/* Self-hosted DM Serif Display + DM Sans.
   Previously loaded from fonts.googleapis.com, which cost two extra DNS+TLS
   round trips on the critical path, came back cache-control:private max-age=86400,
   and transmitted every visitor's IP to Google (disclosed in privacy.html).
   Files are the exact woff2 Google serves, same unicode-range splits. */
@font-face{font-family:'DM Sans';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/dm-sans-400-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'DM Sans';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/dm-sans-400-italic-latin.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:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/dm-sans-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/dm-sans-400-latin.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:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/dm-sans-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/dm-sans-400-latin.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:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/dm-serif-display-400-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/dm-serif-display-400-italic-latin.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:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/dm-serif-display-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/dm-serif-display-400-latin.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;}

:root{
  --black:#141414; --white:#F5EFEA; --silver:#878B8F;
  /* muted text needs two values: silver is only AA-legible on dark (5.37:1); on the
     light band it is 3.01:1 and fails. --muted resolves by context, set below. */
  --silver-ink:#62666B;
  --muted:var(--silver-ink);
  --serif:"DM Serif Display","Playfair Display",Georgia,serif;
  --sans:"DM Sans",Arial,Helvetica,sans-serif;
  --pad-x:clamp(24px,6vw,96px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-size:17px;line-height:1.65;background:var(--white);color:var(--black)}
::selection{background:var(--black);color:var(--white)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--black);outline-offset:3px}
.band--black a:focus-visible{outline-color:var(--white)}
/* offscreen until focused; z-index must clear the sticky nav (10) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:20;background:var(--black);color:var(--white);padding:12px 20px;font-size:14px}
.skip-link:focus{left:0}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:20px}
.serif{font-family:var(--serif);font-weight:400}

/* nav */
.nav{background:var(--white);border-bottom:.5px solid var(--silver);display:flex;justify-content:space-between;align-items:center;padding:16px var(--pad-x);position:sticky;top:0;z-index:10}
.nav .logo{height:34px;width:auto}
.nav-links{display:flex;align-items:center;gap:32px;font-size:14px}
.nav-links a:not(.cta){position:relative}
.nav-links a:not(.cta)::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--black);transition:width .25s ease}
.nav-links a:not(.cta):hover::after{width:100%}
.cta{background:var(--black);color:var(--white);padding:9px 22px}
/* Mobile nav: these links used to be display:none with nothing replacing them, which
   left a phone user no way to reach any page from the header. They now wrap to a
   second row instead — logo + links + CTA cannot fit one 390px row. */
@media (max-width:680px){
  .nav{flex-wrap:wrap;padding-bottom:0}
  .nav .logo{height:28px;width:auto}
  .nav-links{width:100%;order:3;gap:26px;margin-top:10px;border-top:.5px solid var(--silver)}
  .nav-links a:not(.cta){display:block;padding:11px 0}
  .nav-links .cta{margin-left:auto;padding:11px 20px}
}

.band{padding:clamp(64px,10vw,120px) var(--pad-x)}
.band--black{background:var(--black);color:var(--white);--muted:var(--silver)}
.band--black p{color:var(--muted)}

/* hero — each page sets its own background-image inline, path relative to the page.
   Never move that url() into a custom property: inside var() it resolves against
   this stylesheet instead of the page and 404s. Scrim stays here = one edit point. */
.hero{
  position:relative;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  /* silver over a photo drops as low as 1.3:1 on the bright patches even under the
     .68 scrim, so hero muted text is full white; hierarchy comes from size. */
  --muted:var(--white);
}
.hero::before{content:"";position:absolute;inset:0;background:rgba(20,20,20,.68);pointer-events:none}
.hero>*{position:relative}
.hero h1{font-family:var(--serif);font-size:clamp(42px,7.5vw,86px);line-height:1.04;max-width:16ch;margin-bottom:26px}
/* 16ch was tuned for the homepage headline. Service-page headlines run 40-83
   characters, which wrapped them to 4-6 lines, pushed the hero past 100vh and
   left the CTAs below the fold. Widened here only — index/about keep the
   approved 16ch. No change to the 86px display size. */
.page-service .hero h1{max-width:24ch}
.hero p{max-width:54ch;font-size:clamp(15px,1.6vw,18px);margin-bottom:36px}
.btn-outline{display:inline-block;border:1px solid var(--white);color:var(--white);font-size:14px;padding:13px 30px;transition:.25s}
.btn-outline:hover{background:var(--white);color:var(--black)}
.btn-solid{display:inline-block;background:var(--black);color:var(--white);font-size:14px;padding:13px 30px;transition:.25s}
.btn-solid:hover{background:#000}
.hero-inner{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;flex-wrap:wrap}
.hero-spade{height:120px;width:auto;opacity:.95;flex-shrink:0}

/* offer ticker */
.ticker{background:var(--silver);color:var(--black);overflow:hidden;padding:14px 0;border-top:.5px solid var(--black);border-bottom:.5px solid var(--black)}
.ticker-track{display:flex;width:max-content;animation:scroll 34s linear infinite}
.ticker-set{display:flex;white-space:nowrap;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.ticker-set span{padding:0 26px;position:relative}
.ticker-set span::after{content:"\2660";position:absolute;right:-5px;font-size:9px;opacity:.6}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* services */
.band h2{font-family:var(--serif);font-size:clamp(30px,4vw,46px);line-height:1.1;margin-bottom:16px;max-width:20ch}
.band-lede{max-width:56ch;color:var(--muted);margin-bottom:56px}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0;border:.5px solid var(--silver)}
.svc{border-right:.5px solid var(--silver);border-bottom:.5px solid var(--silver);padding:38px 32px;min-height:230px;display:flex;flex-direction:column;gap:14px;transition:.25s}
.svc .no{font-size:12px;letter-spacing:.14em;color:var(--muted)}
.svc h3{font-family:var(--serif);font-size:23px;font-weight:400}
.svc p{font-size:14.5px;color:var(--muted);flex:1}
.svc.placeholder h3{color:var(--muted);font-style:italic}
.svc:hover{background:var(--black);color:var(--white)}
.svc:hover{--muted:var(--silver)}
.svc:hover.placeholder h3{color:var(--white)}

/* AI + SEO feature split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0}
.split>div{padding:clamp(48px,7vw,96px) var(--pad-x)}
.split .l{background:var(--black);color:var(--white);--muted:var(--silver)}
.split .l p{color:var(--muted)}
.split .r{background:var(--white)}
.split h2{font-size:clamp(26px,3.4vw,38px)}
@media (max-width:820px){.split{grid-template-columns:1fr}}

/* quote */
.quote{text-align:center;padding:clamp(56px,8vw,96px) var(--pad-x)}
.quote blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(24px,3.4vw,38px);line-height:1.25;max-width:22ch;margin:0 auto}

/* group mention */
.group{background:var(--white);padding:44px var(--pad-x);border-top:.5px solid var(--silver)}
.group .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;display:block}
.group-row{display:flex;gap:40px;flex-wrap:wrap;align-items:center}
.group-row a{font-family:var(--serif);font-size:18px;color:var(--muted);transition:color .2s}
.group-row a:hover{color:var(--black)}

/* contact */
.contact-inner{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
/* this paragraph was the one uncapped measure on the site — it ran the full 1267px
   band width on a laptop. Everything else is already held at 54-64ch. */
.contact-inner p{max-width:60ch}

/* sitemap */
.sitemap{background:var(--white);padding:44px var(--pad-x);border-top:.5px solid var(--silver);display:flex;gap:56px;flex-wrap:wrap}
.sitemap .col{display:flex;flex-direction:column;gap:10px;min-width:160px}
.sitemap .col .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;display:block}
.sitemap .col a{font-size:14px;color:var(--black)}
.sitemap .col a:hover{color:var(--muted)}

/* footer */
.footer-main{display:flex;justify-content:space-between;align-items:center;padding:26px var(--pad-x);border-top:.5px solid var(--silver);background:var(--white);flex-wrap:wrap;gap:16px}
.footer-main .logo{height:30px;width:auto}
.footer-main .tag{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px}
.footer-main .tag img{height:13px;width:auto}
.footer-sub{padding:16px var(--pad-x) 30px;background:var(--white);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted)}
.footer-sub .domains{display:flex;gap:20px;flex-wrap:wrap}
.footer-sub a:hover{color:var(--black)}

/* per-service detail pages */
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:24px;display:block}
.breadcrumb a:hover{color:var(--white)}
.pending{border:.5px dashed var(--silver);padding:28px 32px;color:var(--muted);font-size:14.5px;max-width:56ch}

/* long-form service pages */
.btn-fill{display:inline-block;background:var(--white);color:var(--black);font-size:14px;padding:13px 30px;transition:.25s}
.btn-fill:hover{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1px var(--white)}
.cta-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}

.lede-list{list-style:none;max-width:64ch;color:var(--muted);font-size:15px}
.lede-list li{margin-bottom:10px}
.band--black .lede-list{color:var(--muted)}

.detail-block{border-top:.5px solid var(--silver);padding-top:32px;margin-top:32px}
.detail-block:first-of-type{border-top:none;padding-top:0;margin-top:0}
.detail-block h3{font-family:var(--sans);font-weight:500;font-size:19px;margin-bottom:10px}
.detail-block p{font-size:15px;color:var(--muted);margin-bottom:14px;max-width:64ch}
.detail-block ul{list-style:none;font-size:14.5px;color:var(--muted);max-width:64ch}
.detail-block ul li{margin-bottom:6px}

.process-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;margin-top:32px}
.process-list .no{font-size:12px;letter-spacing:.14em;color:var(--muted);display:block;margin-bottom:10px}
.process-list h3{font-family:var(--sans);font-weight:500;font-size:17px;margin-bottom:8px}
.process-list p{font-size:14px;color:var(--muted)}

/* geometric process diagram: numbered nodes on a connecting line */
.process-diagram{display:flex;justify-content:space-between;align-items:center;position:relative;margin-top:24px}
.process-diagram::before{content:"";position:absolute;top:50%;left:18px;right:18px;height:1px;background:var(--silver);transform:translateY(-50%);z-index:0}
.process-diagram .node{position:relative;z-index:1;width:36px;height:36px;border:1px solid var(--black);background:var(--white);display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:12px;font-weight:500;flex-shrink:0}
.band--black .process-diagram .node{border-color:var(--white);background:var(--black);color:var(--white)}
@media (max-width:820px){.process-diagram{display:none}}

/* geometric journey diagram: square markers on a connecting line, labeled beneath */
.journey-diagram{display:flex;justify-content:space-between;position:relative;margin:28px 0;flex-wrap:wrap;row-gap:16px}
.journey-diagram::before{content:"";position:absolute;top:6px;left:16px;right:16px;height:1px;background:var(--silver);z-index:0}
.journey-diagram .stage{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;flex:1;min-width:84px}
.journey-diagram .stage .dot{width:12px;height:12px;background:var(--white);flex-shrink:0}
.journey-diagram .stage .label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center;white-space:nowrap}
@media (max-width:820px){.journey-diagram::before{display:none}.journey-diagram{justify-content:flex-start;gap:14px 28px}.journey-diagram .stage{flex:none;min-width:0}}

.qa{border-bottom:.5px solid var(--silver);padding:20px 0}
.qa:last-child{border-bottom:none}
.qa h3{font-family:var(--sans);font-weight:500;font-size:15.5px;margin-bottom:10px}
.qa h3::before{content:"▪";color:var(--muted);margin-right:10px;font-size:11px}
.qa p{font-size:14.5px;color:var(--muted);max-width:64ch}

.byline{font-size:12px;color:var(--muted);margin-bottom:20px;display:block}

.related-services{border-top:.5px solid var(--silver);padding-top:32px;margin-top:40px}
.related-services .links{display:flex;gap:28px;flex-wrap:wrap;margin-top:16px}
.related-services .links a{font-family:var(--serif);font-size:17px;color:var(--black);border-bottom:1px solid transparent;transition:border-color .2s}
.related-services .links a:hover{border-color:var(--black)}
.band--black .related-services{border-top-color:var(--silver)}
.band--black .related-services .links a{color:var(--white)}
.band--black .related-services .links a:hover{border-color:var(--white)}

.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;border:.5px solid var(--silver);margin-top:8px}
.hub-grid a{border-right:.5px solid var(--silver);border-bottom:.5px solid var(--silver);padding:32px;display:flex;flex-direction:column;gap:10px;transition:.25s;color:var(--black)}
.hub-grid a:hover{background:var(--black);color:var(--white)}
.hub-grid a:hover{--muted:var(--silver)}
.hub-grid h3{font-family:var(--serif);font-size:21px;font-weight:400}
.hub-grid p{font-size:14px;color:var(--muted)}

/* ---- mobile refinements ----
   44px minimum tap targets and 16px minimum body copy. Note the tension: larger
   mobile type makes the black bands taller, working against the <=70vh band rule
   below — legibility wins, and band padding is cut to claw some height back. */
@media (max-width:680px){
  /* tap targets: these were 20-30px tall, and the sitemap was the ONLY mobile nav */
  .sitemap .col{gap:0}
  .sitemap .col a{padding:11px 0}
  .group-row{gap:4px 40px}
  .group-row a,.related-services .links a{display:inline-block;padding:10px 0}
  .footer-sub .domains a{display:inline-block;padding:12px 0}
  .breadcrumb{padding:12px 0;margin-bottom:14px}
  .nav>a{display:inline-flex;align-items:center;padding:8px 0}
  .btn-outline,.btn-fill,.btn-solid{padding:14px 30px}

  /* body copy to 16px */
  .hero p,.svc p,.detail-block p,.detail-block ul,.qa p,.qa h3,
  .lede-list,.process-list p,.hub-grid p,.pending,.sitemap .col a{font-size:16px}
  .nav-links,.btn-outline,.btn-fill,.btn-solid{font-size:15px}
  .footer-sub{font-size:13px}
  .byline{font-size:13px}
  .group .lbl,.sitemap .col .lbl,.journey-diagram .stage .label{font-size:12px}

  /* reclaim vertical space on the black bands */
  .band{padding:56px var(--pad-x)}
  .hero h1{margin-bottom:20px}
  .hero p{margin-bottom:24px}
}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ticker-track{animation:none;width:100%;justify-content:center;flex-wrap:wrap}.ticker-set:last-child{display:none}.reveal{opacity:1!important;transform:none!important;transition:none!important}}