:root{color-scheme:light}
body{margin:0}
img{max-width:100%}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/HankenGrotesk-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/HankenGrotesk-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/HankenGrotesk-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/Spectral-300i.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/Spectral-300.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Spectral-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

  /* Layout: a quiet advisory page. Generous white space, one serif voice, thin rules,
     a single deep-green accent used only for the mark and links. */
  :root{
    --ground:#F6F6F3;   /* cool paper */
    --ink:#14181C;
    --muted:#5E656C;
    --hair:#D9DBD6;
    --accent:#22513F;   /* deep ledger green */
    --serif:"Spectral", Georgia, "Times New Roman", serif;
    --sans:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
    --step-0:clamp(1rem,.97rem + .15vw,1.08rem);
    --step-1:clamp(1.2rem,1.1rem + .45vw,1.45rem);
    --step-2:clamp(1.7rem,1.4rem + 1.3vw,2.4rem);
    --step-4:clamp(2.7rem,1.8rem + 4.2vw,5.4rem);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){ --ground:#111416; --ink:#E8EAE7; --muted:#9AA1A6; --hair:#2A2F33; --accent:#7FB89E; color-scheme:dark; }
  }
  :root[data-theme="dark"]{ --ground:#111416; --ink:#E8EAE7; --muted:#9AA1A6; --hair:#2A2F33; --accent:#7FB89E; color-scheme:dark; }
  *{box-sizing:border-box; margin:0}
  body{background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:var(--step-0); line-height:1.65}
  .page{max-width:1040px; margin:0 auto; padding-block:0 48px; padding-inline:24px}
  a{color:var(--accent); text-underline-offset:3px}
  a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

  header{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-block:28px; border-bottom:1px solid var(--hair)}
  .mark{display:flex; align-items:center; gap:12px; font-family:var(--sans); font-weight:600; letter-spacing:.18em; text-transform:uppercase; font-size:.82rem}
  .mark svg{width:20px; height:20px}
  .mark rect{fill:none; stroke:var(--ink); stroke-width:1.4}
  .mark rect.fill{fill:var(--accent); stroke:var(--accent)}
  nav{display:flex; gap:28px; font-size:.9rem}
  nav a{color:var(--muted); text-decoration:none} nav a:hover{color:var(--ink)}

  .hero{padding-block:clamp(72px,12vw,150px) clamp(56px,8vw,110px); display:grid; gap:28px; max-width:820px}
  .hero h1{font-family:var(--serif); font-weight:300; font-size:var(--step-4); line-height:1.02; letter-spacing:-.015em; text-wrap:balance}
  .hero p{font-size:var(--step-1); color:var(--muted); max-width:32em; line-height:1.5}

  .label{font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
  .services{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--ink)}
  .svc{padding:28px 28px 36px 0; display:grid; gap:12px; align-content:start; min-width:0}
  .svc + .svc{padding-left:28px; border-left:1px solid var(--hair)}
  .svc h2{font-family:var(--serif); font-weight:400; font-size:var(--step-2); line-height:1.1}
  .svc p{color:var(--muted)}
  .svc ul{list-style:none; padding:0; display:grid; gap:4px; font-size:.95rem; margin-top:4px}
  .svc li{padding-left:18px; position:relative}
  .svc li::before{content:""; position:absolute; left:0; top:.72em; width:8px; height:1px; background:var(--ink)}

  .stance{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:48px; padding-block:clamp(56px,9vw,110px); border-top:1px solid var(--hair); margin-top:24px}
  .stance blockquote{font-family:var(--serif); font-style:italic; font-weight:300; font-size:var(--step-2); line-height:1.2; text-wrap:balance}
  .stance p{color:var(--muted); max-width:36em}
  .stance p + p{margin-top:14px}

  .gates{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
  .gate{padding:24px 24px 28px 0; display:grid; gap:8px; min-width:0}
  .gate + .gate{padding-left:24px; border-left:1px solid var(--hair)}
  .gate .n{font-family:var(--serif); font-size:2.2rem; line-height:1; color:var(--accent); font-variant-numeric:oldstyle-nums}
  .gate h3{font-weight:600; font-size:1rem}
  .gate p{color:var(--muted); font-size:.95rem}

  .contact{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:48px; padding-block:clamp(56px,9vw,110px) 24px; align-items:end}
  .contact h2{font-family:var(--serif); font-weight:300; font-size:var(--step-2); line-height:1.15; text-wrap:balance}
  .rows{display:grid; gap:0; border-top:1px solid var(--ink)}
  .row{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding-block:14px; border-bottom:1px solid var(--hair)}
  .row .v{font-size:1.02rem}
  .copy{font:inherit; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; background:none; border:1px solid var(--hair); color:var(--muted); padding:4px 10px; cursor:pointer}
  .copy:hover{border-color:var(--ink); color:var(--ink)}

  footer{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:28px; color:var(--muted); font-size:.85rem}

  @media (max-width:820px){
    .services,.gates,.stance,.contact{grid-template-columns:minmax(0,1fr)}
    .svc,.svc + .svc,.gate,.gate + .gate{padding-left:0; border-left:none}
    .svc + .svc,.gate + .gate{border-top:1px solid var(--hair)}
    .stance,.contact{gap:24px}
  }
  @media (prefers-reduced-motion:no-preference){ .copy,nav a{transition:color .15s,border-color .15s} }

/* Accessibility helpers */
.skip{position:absolute; left:16px; top:-48px; z-index:10; background:var(--ink); color:var(--ground); padding:10px 14px; text-decoration:none; font-size:.9rem}
.skip:focus{top:12px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
