/* Lakemont — screen stylesheet, v2 (22 Sep 2026, K-024).
   v1 is archived at 04 Website & Tools\-Archive\site-v1_2026-09-22.
   Palette authority: 01 Templates/00 Style Guide/Brand-Identity.md §2 (Palette D).
   The :root block is the ONLY place hex values appear. */

:root {
  color-scheme: light;
  --slate:      #2C3B45;
  --lake-blue:  #2C6B87;
  --signal:     #B04A38;  /* alert only */
  --mist:       #B4C3C0;
  --fog:        #DCDEDA;
  --aqua:       #57A2AC;  /* dark grounds only */
  --shell:      #F4F4F1;
  --deep-water: #1A252C;
  --lake-light: #86A6B4;
  --pale:       #D9DFD9;
  --muted:      #5B6469;
  --paper:      #FFFFFF;
  --ui: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Figtree only, self-hosted. Google Fonts nested tree — do not flatten. */
@font-face { font-family: "Figtree";
             src: url("/static/fonts/Figtree/Figtree-VariableFont_wght.ttf") format("truetype");
             font-weight: 400 800; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--shell); color: var(--slate); font-family: var(--ui);
       font-size: 1.0625rem; line-height: 1.65; text-rendering: optimizeLegibility; }
:focus-visible { outline: 3px solid var(--lake-blue); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -9999px; background: var(--slate); color: var(--shell);
        padding: .75rem 1.25rem; text-decoration: none; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; }
.wrap { max-width: 72rem; margin: 0 auto; padding-inline: clamp(16px, 4vw, 1.5rem); }

/* ---- masthead ---- */
.masthead { border-bottom: 1px solid var(--fog); }
.masthead .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center;
                  justify-content: space-between; padding-block: 1.6rem 1.1rem; }
.mark { text-decoration: none; color: var(--slate); display: inline-flex; gap: 13px; align-items: center; margin: 0; }
.mark__word { font-weight: 800; letter-spacing: .2em; }
.mark__place { color: var(--muted); font-size: .8625rem; letter-spacing: .06em; margin-left: -6px; }
.masthead nav ul { display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.masthead nav a { color: var(--slate); text-decoration: none; font-weight: 500;
                  padding: .5rem 0 2px; border-bottom: 2px solid transparent; }
.masthead nav a:hover { border-bottom-color: var(--mist); }
.masthead nav a[aria-current="page"] { font-weight: 600; border-bottom-color: var(--lake-blue); }

/* ---- type ---- */
h1, h2, h3 { font-weight: 600; line-height: 1.2; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.05rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.3rem, 1.2rem + .55vw, 1.62rem); color: var(--lake-blue); }
p { margin: 0; max-width: 65ch; }
.lede { font-size: clamp(1.2rem, 1.1rem + .5vw, 1.5rem); color: var(--muted); line-height: 1.5; max-width: 44ch; }
.eyebrow { font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
a { color: var(--lake-blue); text-underline-offset: .18em; }
.btn { display: inline-block; background: var(--slate); color: var(--shell); text-decoration: none;
       font: inherit; font-weight: 500; padding: .8rem 1.6rem; border: 1px solid var(--slate); cursor: pointer; }
.btn:hover { background: var(--deep-water); border-color: var(--deep-water); }
.btn:disabled { background: var(--mist); border-color: var(--mist); color: var(--muted); cursor: wait; }

main { padding-block: 4rem 5rem; }

/* ---- home ---- */
.hero { display: grid; gap: 1.5rem; padding-bottom: 3.5rem; border-bottom: 1px solid var(--fog); }
.hero h1 { max-width: 18ch; }
.services-title { color: var(--slate); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); padding-top: 3rem; }
.sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
         gap: 2.5rem 3.5rem; padding-block: 1.75rem 3rem; }
.side { display: grid; gap: .75rem; align-content: start; }
.side ul { margin: .25rem 0 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.side li { padding-left: 1rem; position: relative; }
.side li::before { content: ""; position: absolute; left: 0; top: .75em; width: .4rem; height: 1px; background: var(--lake-blue); }
.promise { background: var(--deep-water); color: var(--shell); padding: 2rem clamp(1.25rem, 3vw, 2.25rem);
           display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.promise p { font-size: 1.2rem; max-width: 40ch; }
.promise .btn { background: var(--shell); color: var(--deep-water); border-color: var(--shell); }

/* ---- team ---- */
.team-head { display: grid; gap: 1rem; margin-bottom: 3rem; }
.team-head .lede { max-width: 52ch; }
.scale { display: grid; gap: .75rem; padding-top: 1.5rem; margin-top: .5rem; }
.person { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 2rem 3rem;
          padding-block: 2.5rem; border-top: 1px solid var(--fog); }
@media (max-width: 640px) { .person { grid-template-columns: 1fr; } }
.portrait { display: grid; gap: .9rem; align-content: start; max-width: 12rem; }
.portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border: 1px solid var(--fog); }
.li { display: inline-flex; align-items: center; gap: .5rem; color: var(--lake-blue); font-weight: 600;
      font-size: .9375rem; text-decoration: none; }
.li:hover { text-decoration: underline; }
.bio { display: grid; gap: 1rem; }
.bio .role { color: var(--muted); font-weight: 500; margin-top: -.5rem; }

/* ---- connect ---- */
.connect { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 3rem; }
.connect-intro { display: grid; gap: 1.25rem; align-content: start; }
.email { font-weight: 600; }
form { display: grid; gap: 1.25rem; background: var(--paper); border: 1px solid var(--fog); padding: clamp(1.25rem, 3vw, 2rem); }
.form-title { color: var(--slate); font-size: 1.5rem; font-weight: 500; margin-bottom: .5rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
input, textarea { font: inherit; color: var(--slate); background: var(--paper); border: 1px solid var(--fog);
                  border-radius: 3px; padding: 1rem; width: 100%; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:hover, textarea:hover { border-color: var(--muted); }
input:focus-visible, textarea:focus-visible { border-color: var(--lake-blue); }
input[aria-invalid="true"] { border-width: 2px; border-color: var(--signal); }
textarea { min-height: 9rem; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
form .btn { width: 100%; background: var(--deep-water); border-color: var(--deep-water); border-radius: 3px;
            padding: 1rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.status { font-size: .9375rem; color: var(--muted); min-height: 1.5em; }
.status.is-error { color: var(--signal); font-weight: 500; }
.thanks { display: grid; gap: .75rem; background: var(--paper); border: 1px solid var(--fog);
          border-left: 3px solid var(--lake-blue); padding: clamp(1.25rem, 3vw, 2rem); align-content: start; }

/* ---- footer ---- */
.footer { border-top: 1px solid var(--fog); }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 1.5rem 4rem; justify-content: space-between;
                padding-block: 2.5rem 3.5rem; font-size: .8625rem; color: var(--muted); }
.footer p { margin: 0 0 .3em; }
.footer a { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}