/* ============================================================
   Atlas by Steph — site stylesheet
   Rebuilt Sept 2026 for the simplified site: home + six service
   pages + legal. One stylesheet, no build step, no framework.

   Ground rules carried over from the brand system:
     --ink  is TEXT ONLY. It is never a section background.
     --gold is an ACCENT ONLY. It is never a section background.
     --cream is the only light section ground.
     Every band composites paper-texture over the ground with
     multiply, so contrast must be measured on the blended result.
     Dark grounds in use (cream text): cobalt, teal, brick, cocoa.
     --azure is deliberately NOT a band here: cream on azure lands
     at 4.31:1 unblended, too close to the AA line to trust.
   ============================================================ */

@font-face{font-family:'Zodiak';src:url('../fonts/zodiak-variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Zodiak';src:url('../fonts/zodiak-variable-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Fragment Mono';src:url('../fonts/fragment-mono-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --paper:#fefefa;
  --cream:#f9f5ed;
  --gold:#cfa200;
  --cobalt:#264ba1;
  --sky:#89cedf;
  --teal:#1d6260;
  --cocoa:#7c4849;
  --brick:#a74843;
  --ink:#12282c;
  --salt:#e4e7db;
  --disp:'Zodiak',Georgia,serif;
  --body:'Zodiak',Georgia,serif;
  --ital:'Archivo',Helvetica,Arial,sans-serif;
  --mono:'Fragment Mono',ui-monospace,Menlo,monospace;
  --nav-h:70px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  font-family:var(--body);font-weight:400;color:var(--ink);
  background-color:var(--cream);
  background-image:url('../paper-texture.jpg');
  background-size:640px;background-blend-mode:multiply;
  font-size:19px;line-height:1.62;
  overflow-x:hidden;
  font-kerning:normal;
  font-variant-ligatures:common-ligatures contextual;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--sky);color:var(--ink)}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--paper);color:var(--ink);padding:10px 16px;border:2px solid var(--ink)}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--disp);font-weight:800;line-height:1.08;letter-spacing:-0.02em}
h1{font-size:clamp(38px,6.2vw,68px)}
h2{font-size:clamp(30px,4.4vw,46px)}
h3{font-size:clamp(20px,2.2vw,25px);line-height:1.2}
.gi{font-family:var(--ital);font-style:italic;font-weight:400}
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:16px;
}
.dek{font-size:clamp(19px,2vw,22px);line-height:1.55;max-width:58ch}
.lede{max-width:62ch}
.lede p + p{margin-top:1em}

/* ---------- layout ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;width:100%}
.band{
  padding:clamp(64px,9vw,108px) 0;
  background-image:url('../paper-texture.jpg');
  background-size:640px;background-blend-mode:multiply;
}
.b-cream{background-color:var(--cream);color:var(--ink)}
.b-cobalt{background-color:var(--cobalt);color:var(--cream)}
.b-teal{background-color:var(--teal);color:var(--cream)}
.b-brick{background-color:var(--brick);color:var(--cream)}
.b-cocoa{background-color:var(--cocoa);color:var(--cream)}
.b-sky{background-color:var(--sky);color:var(--ink)}

/* Eyebrow tints per ground. The eyebrow is 12px, so it needs the full 4.5:1
   and not the 3:1 large-text allowance. Gold was the obvious accent and fails
   on every dark ground it was used on (cobalt 3.39, teal 2.97, brick 2.41), so
   on dark grounds the eyebrow is plain cream and earns its separation from the
   mono face, the tracking and the caps instead of from hue. Teal clears cream
   at 6.51 but only reaches 4.03 on sky, so sky takes cobalt at 4.59. */
.b-cream .eyebrow{color:var(--teal)}
.b-sky .eyebrow{color:var(--cobalt)}
.b-cobalt .eyebrow,.b-teal .eyebrow,.b-brick .eyebrow,.b-cocoa .eyebrow{color:var(--cream)}

/* ---------- nav ---------- */
#nav{
  position:sticky;top:0;z-index:100;
  background:var(--paper);border-bottom:2px solid var(--ink);
}
.nav-in{
  max-width:1120px;margin:0 auto;padding:0 24px;
  height:var(--nav-h);display:flex;align-items:center;gap:24px;
}
.wordmark{display:flex;align-items:center;margin-right:auto;text-decoration:none}
.wordmark img{height:26px;width:auto}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none}
.nav-links a{
  text-decoration:none;font-size:16px;
  border-bottom:2px solid transparent;padding-bottom:2px;
}
.nav-links a:not(.btn):hover{border-bottom-color:var(--ink)}
.burger{
  display:none;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;background:var(--paper);color:var(--ink);
  border:2px solid var(--ink);border-radius:3px;padding:9px 12px;cursor:pointer;
}

/* ---------- buttons ----------
   One chassis, four covers. 2px ink rule, hard offset shadow, and a
   press that drops the button onto its own shadow. Hierarchy is
   carried by fill, never by removing the chassis:
     .btn-plan  brick   primary, high intent
     .btn-call  cobalt  (sky on dark grounds)
     .btn       paper   neutral: email + text
*/
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--body);font-weight:700;font-size:16px;line-height:1;
  padding:15px 20px;border:2px solid var(--ink);border-radius:3px;
  background:var(--paper);color:var(--ink);text-decoration:none;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .12s ease,box-shadow .12s ease;
  white-space:nowrap;cursor:pointer;
}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.btn-plan{background:var(--brick);color:var(--cream)}
.btn-call{background:var(--cobalt);color:var(--cream)}
/* On a dark ground the cobalt cover goes muddy, so it lifts to sky. */
.b-cobalt .btn-call,.b-teal .btn-call,.b-brick .btn-call,.b-cocoa .btn-call,.hero .btn-call{
  background:var(--sky);color:var(--ink)
}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.cta-row.center{justify-content:center}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(460px,68vh,640px);display:flex;align-items:flex-end}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(18,40,44,.20) 0%,rgba(18,40,44,.50) 45%,rgba(18,40,44,.86) 100%);
}
.hero .wrap{position:relative;z-index:2;padding-top:80px;padding-bottom:clamp(48px,7vw,80px)}
.hero h1,.hero .dek{color:var(--cream)}
.hero .dek{margin-top:20px;text-shadow:0 1px 14px rgba(18,40,44,.5)}
.hero h1{text-shadow:0 2px 18px rgba(18,40,44,.45)}
.hero .eyebrow{color:var(--sky)}

/* A page hero with no photograph: same shape, cream ground. */
.hero-flat{padding:clamp(72px,10vw,120px) 0 clamp(56px,7vw,84px)}

/* ---------- service cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px;margin-top:44px}
.card{
  display:flex;flex-direction:column;text-decoration:none;
  background:var(--paper);color:var(--ink);
  border:2px solid var(--ink);border-radius:3px;
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .14s ease,box-shadow .14s ease;
  overflow:hidden;
}
.card:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
/* height:auto is load-bearing: the width/height attributes on the <img> are a
   presentational hint, and without this they win over aspect-ratio and the
   card image renders at its attribute height. The source photos are portrait
   (~546x820), so the crop favours the upper middle where subjects sit. */
.card-img{aspect-ratio:4/3;width:100%;height:auto;object-fit:cover;object-position:50% 42%;border-bottom:2px solid var(--ink)}
.card-stripe{height:8px;width:100%}
.card-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.card-body h3{margin-bottom:6px}
.card-sub{font-family:var(--ital);font-style:italic;font-size:16px;opacity:.75;margin-bottom:12px}
.card-body p{font-size:17px;line-height:1.5}
.card-go{
  margin-top:auto;padding-top:18px;font-family:var(--mono);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt);
}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px;margin-top:44px}
.step .n{
  font-family:var(--disp);font-weight:800;font-size:52px;line-height:1;
  color:var(--cobalt);margin-bottom:10px;
}
.step h3{margin-bottom:8px}
.step p{font-size:17px;line-height:1.55}

/* ---------- included list ---------- */
.included{margin-top:40px;border-top:2px solid currentColor}
.included li{list-style:none;border-bottom:2px solid currentColor;padding:22px 0}
.inc-grid{display:grid;grid-template-columns:minmax(200px,.85fr) 2fr;gap:10px 40px;align-items:start}
.inc-grid h3{font-size:clamp(18px,2vw,21px)}
.inc-grid p{font-size:17px;line-height:1.55}

/* ---------- faq ---------- */
.faq{margin-top:40px;max-width:80ch}
.faq details{border-bottom:2px solid currentColor;padding:4px 0}
.faq details:first-child{border-top:2px solid currentColor}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 34px 20px 0;position:relative;
  font-family:var(--disp);font-weight:800;font-size:clamp(18px,2vw,21px);line-height:1.25;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:22px;line-height:1;
}
.faq details[open] summary::after{content:'\2013'}
.faq .a{padding:0 34px 22px 0;font-size:17px;line-height:1.6;max-width:72ch}

/* ---------- contact band ---------- */
.contact h2{max-width:24ch;text-wrap:balance}
.contact .dek{margin-top:18px}
.contact-note{
  margin-top:26px;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.04em;line-height:1.9;
}
.contact-note a{text-decoration:underline;text-underline-offset:3px}

/* ---------- footer ---------- */
footer{background-color:var(--ink);color:var(--cream);padding:56px 0 40px}
footer .wm{height:24px;width:auto;margin-bottom:26px}
.foot-grid{display:flex;flex-wrap:wrap;gap:34px 56px;justify-content:space-between}
.foot-col h4{
  font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sky);margin-bottom:12px;
}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:8px}
.foot-col a{text-decoration:none;font-size:16.5px}
.foot-col a:hover{text-decoration:underline;text-underline-offset:3px}
.legal{
  margin-top:44px;padding-top:24px;border-top:1px solid rgba(249,245,237,.28);
  font-size:14px;line-height:1.65;opacity:.82;max-width:78ch;
}
.legal a{text-decoration:underline;text-underline-offset:3px}

/* ---------- legal pages ---------- */
.doc{max-width:74ch}
.doc h2{font-size:clamp(21px,2.4vw,26px);margin:44px 0 12px}
.doc h2:first-of-type{margin-top:32px}
.doc p{font-size:17px;line-height:1.65}
.doc .updated{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal)}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .inc-grid{grid-template-columns:1fr;gap:6px}
}
@media(max-width:760px){
  body{font-size:18px}
  .burger{display:block}
  .nav-links{
    display:none;position:absolute;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:2px solid var(--ink);padding:8px 24px 20px;
  }
  .nav-links.open{display:flex}
  .nav-links li{padding:11px 0}
  .nav-links .btn{margin-top:8px;width:100%}
  .cta-row .btn{flex:1 1 auto;min-width:calc(50% - 7px)}
}
@media(max-width:420px){
  .cta-row .btn{min-width:100%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* The step numeral is 52px, so 3:1 is the bar. Gold cleared it on nothing it
   was actually used on: 2.19 on cream, 1.36 on sky. Cobalt carries the light
   grounds (7.42 on cream, 4.59 on sky) and sky carries the dark ones
   (4.59 on cobalt, 4.03 on teal, 4.15 on cocoa). */
.b-cobalt .step .n,.b-teal .step .n,.b-brick .step .n,.b-cocoa .step .n{color:var(--sky)}