/* ==========================================================================
   BOOST YOUR DIGITAL MARKETING — Design System
   Typefaces: Playfair Display (display) / Hanken Grotesk (body, labels)
   Motif: the orange thread — a single rule that carries through the page
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root{
  /* ---- color ---- */
  --orange:        #F97316;
  --orange-deep:   #C2560A;
  --orange-soft:   #FBD9BC;
  --ink:           #16130F;      /* near black, warm */
  --ink-soft:      #3A342C;
  --slate:         #4B5563;
  --mocha:         #86736A;
  --cream:         #FBF3EA;      /* warm white — primary bg */
  --cream-deep:    #F3E4D3;      /* soft off-white — separation */
  --paper:         #FFFDFB;
  --line:          #E4D4C2;      /* fine hairline */
  --line-strong:   rgba(22,19,15,0.16);

  /* ---- type ---- */
  --serif: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --sans:  'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- rhythm ---- */
  --gutter: clamp(24px, 5vw, 96px);
  --section-space: clamp(88px, 12vw, 176px);
  --max: 1600px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; background:none; border:0; cursor:pointer; color:inherit; }
h1,h2,h3,h4,p,figure{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

::selection{ background: var(--orange); color: var(--paper); }

:focus-visible{
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* ---- layout helpers ---- */
.wrap{
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.bleed{ width:100%; }
section{ position: relative; }

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2vw, 32px);
}

.eyebrow{
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--orange-deep);
  display:flex;
  align-items:center;
  gap: 10px;
}
.eyebrow::before{
  content:'';
  width: 22px;
  height: 1px;
  background: var(--orange);
  display:inline-block;
}

/* ---- type scale ---- */
h1, .h1{
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 0.98;
  font-size: clamp(48px, 7vw, 118px);
}
h2, .h2{
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.01em;
  font-size: clamp(34px, 4.6vw, 72px);
}
h3, .h3{
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.1;
  font-size: clamp(24px, 2.6vw, 38px);
}
.lede{
  font-family: var(--sans);
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
}
p.body-copy, .body-copy{
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 62ch;
}
.small{
  font-size: 14px;
  color: var(--mocha);
}
em, i{ font-style: italic; font-family: var(--serif); }

.num{
  font-family: var(--serif);
  font-style: italic;
  color: var(--orange);
}

/* ==========================================================================
   NAV
   ========================================================================== */
.site-header{
  position: sticky;
  top:0;
  z-index: 80;
  background: rgba(251,243,234,0.86);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s ease;
}
.site-header.is-scrolled{ border-bottom-color: var(--line); }

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block: 20px;
}
.logo{
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.logo span{ color: var(--orange); }

.nav-links{
  display:flex;
  align-items:center;
  gap: clamp(20px, 2.4vw, 42px);
}
.nav-links a{
  font-size: 14.5px;
  font-weight: 500;
  position: relative;
  padding-block: 4px;
}
.nav-links a:not(.nav-cta)::after{
  content:'';
  position:absolute;
  left:0; right:100%;
  bottom:0;
  height:1px;
  background: var(--orange);
  transition: right .28s cubic-bezier(.4,0,.2,1);
}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a.is-active::after{ right:0; }
.nav-links a.is-active{ color: var(--orange-deep); }

.nav-cta{
  border: 1px solid var(--ink);
  padding: 10px 20px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.nav-cta:hover{ background: var(--ink); color: var(--cream); }

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  width: 28px;
}
.nav-toggle span{
  height:1px; background: var(--ink); width:100%;
  transition: transform .3s ease, opacity .3s ease;
}

/* mobile menu */
.mobile-menu{
  position: fixed;
  inset:0;
  background: var(--ink);
  color: var(--cream);
  z-index: 100;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px var(--gutter) 40px;
  transform: translateY(-100%);
  transition: transform .5s cubic-bezier(.65,0,.15,1);
}
.mobile-menu.is-open{ transform: translateY(0); }
.mobile-menu-top{ display:flex; align-items:center; justify-content:space-between; }
.mobile-menu .logo{ color: var(--cream); }
.mobile-menu .logo span{ color: var(--orange); }
.mobile-close span{ background: var(--cream); }
.mobile-links{ display:flex; flex-direction:column; gap: 6px; margin-top: 40px; }
.mobile-links a{
  font-family: var(--serif);
  font-size: clamp(38px, 11vw, 64px);
  font-weight: 600;
  padding-block: 10px;
  border-bottom: 1px solid rgba(251,243,234,0.14);
}
.mobile-menu-bottom{
  display:flex; flex-direction:column; gap:14px;
  font-size: 14px; color: rgba(251,243,234,0.6);
}
.mobile-menu-bottom a{ color: var(--orange); }

/* ==========================================================================
   BUTTONS / CTA
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding-bottom: 2px;
}
.btn-line{
  width: 40px; height: 1px; background: currentColor; position:relative;
  transition: width .3s ease;
}
.btn-line::after{
  content:'';
  position:absolute; right:0; top:-3px;
  width:7px;height:7px;
  border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform: rotate(45deg);
}
.btn:hover .btn-line{ width: 56px; }

.btn-solid{
  background: var(--orange);
  color: var(--paper);
  padding: 15px 28px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition: background .25s ease, transform .25s ease;
}
.btn-solid:hover{ background: var(--orange-deep); }

.btn-outline{
  border: 1px solid var(--line-strong);
  padding: 15px 28px;
  font-size: 14.5px;
  font-weight: 600;
  transition: border-color .25s ease, background .25s ease;
}
.btn-outline:hover{ border-color: var(--ink); background: var(--paper); }

/* ==========================================================================
   MOTIFS — the orange thread
   ========================================================================== */
.thread{
  width: 1px;
  background: linear-gradient(to bottom, var(--orange), transparent);
}
.rule{
  height:1px;
  background: var(--line);
  width:100%;
}
.rule-strong{ background: var(--line-strong); }

.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-in{ opacity: 1; transform: translateY(0); }
.reveal-delay-1{ transition-delay: .08s; }
.reveal-delay-2{ transition-delay: .16s; }
.reveal-delay-3{ transition-delay: .24s; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  padding-top: clamp(48px, 8vw, 96px);
  padding-bottom: clamp(56px, 8vw, 110px);
}
.hero-kicker{
  display:flex; align-items:center; gap:14px;
  font-size: 13px; font-weight:600; letter-spacing:.06em; color: var(--mocha);
  margin-bottom: 28px;
}
.hero-kicker .dot{ width:6px; height:6px; background: var(--orange); border-radius:50%; }

.hero h1{ max-width: 15ch; }
.hero h1 .accent{ color: var(--orange); font-style: italic; }

.hero-row{
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.hero-services{
  font-size: 15px;
  font-weight:600;
  color: var(--ink-soft);
  max-width: 30ch;
}
.hero-actions{ display:flex; align-items:center; gap: 32px; flex-wrap:wrap; }

.hero-figure{
  margin-top: clamp(48px, 6vw, 84px);
  position: relative;
  aspect-ratio: 21/9;
  overflow: hidden;
}
.hero-figure img{ width:100%; height:100%; object-fit: cover; }
.hero-figure-caption{
  position:absolute; left: var(--gutter); bottom: 20px;
  color: var(--cream); font-size: 13px; font-weight:500;
  display:flex; align-items:center; gap:10px;
}
.hero-figure-caption .dot{ width:6px;height:6px;background:var(--orange);border-radius:50%; }
.hero-figure::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(17,17,17,0.45), transparent 45%);
}

/* ==========================================================================
   STATEMENT
   ========================================================================== */
.statement{
  padding-block: var(--section-space);
  border-top: 1px solid var(--line);
}
.statement h2{ max-width: 18ch; }
.statement-row{
  display:grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: flex-end;
}
.statement-side{
  display:flex; flex-direction:column; gap: 28px;
  padding-left: clamp(0px, 2vw, 32px);
  border-left: 1px solid var(--line);
}

/* ==========================================================================
   SERVICES INDEX
   ========================================================================== */
.services-index{
  padding-block: var(--section-space);
  border-top: 1px solid var(--line);
}
.services-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.services-head h2{ max-width: 14ch; }

.service-row{
  display:grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding-block: clamp(22px, 3vw, 34px);
  border-top: 1px solid var(--line);
  cursor: pointer;
  position: relative;
}
.service-row:last-child{ border-bottom: 1px solid var(--line); }
.service-row .num{ font-size: 16px; }
.service-row h3{
  font-size: clamp(26px, 4.2vw, 54px);
  transition: color .3s ease, transform .4s cubic-bezier(.2,.7,.2,1);
}
.service-row .service-desc{
  grid-column: 2;
  color: var(--mocha);
  font-size: 14.5px;
  max-width: 52ch;
  margin-top: 8px;
  display:none;
}
.service-row .arrow{
  width: 44px; height:44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.service-row .arrow svg{ width:16px; height:16px; stroke: var(--ink); transition: stroke .3s ease; }
.service-row:hover .arrow{ background: var(--orange); border-color: var(--orange); transform: rotate(45deg); }
.service-row:hover .arrow svg{ stroke: var(--paper); }
.service-row:hover h3{ color: var(--orange-deep); transform: translateX(10px); }
@media (hover:hover){
  .service-row .service-desc{ display:block; }
}

.services-visual{
  position: sticky;
  top: 110px;
  aspect-ratio: 4/5;
  overflow:hidden;
  background: var(--cream-deep);
}
.services-visual img{
  width:100%; height:100%; object-fit:cover;
  position:absolute; inset:0;
  opacity:0;
  transition: opacity .6s ease;
}
.services-visual img.is-active{ opacity:1; }

.services-layout{
  display:grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: flex-start;
}
@media (max-width: 640px){
    .hero-services{
        width:100%;
        max-width:100%;
        line-height:1.6;
    }
    .pull-quote{
        padding-block:52px;
    }

    .pull-quote .wrap{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .pull-quote blockquote{
        position:relative !important;
        width:min(100%, 18ch) !important;
        max-width:18ch !important;

        margin:0 auto !important;
        padding:46px 0 42px !important;

        text-align:center;
        font-size:clamp(28px, 8vw, 38px);
        line-height:1.18;
    }

    .pull-quote blockquote::before{
        content:'“';
        position:absolute;

        left:50% !important;
        right:auto !important;

        top:0 !important;
        bottom:auto !important;

        transform:translateX(-50%) !important;

        color:var(--orange);
        font-size:48px;
        line-height:1;
    }

    .pull-quote blockquote::after{
        content:'”';
        position:absolute;

        left:50% !important;
        right:auto !important;

        top:auto !important;
        bottom:0 !important;

        transform:translateX(-50%) !important;

        color:var(--orange);
        font-size:48px;
        line-height:1;
    }

    .pull-quote cite{
        width:100%;
        margin-top:20px !important;
        padding-left:0 !important;

        text-align:center;
        font-size:13px;
    }
}
@media (max-width: 900px){
  .services-layout{ grid-template-columns: 1fr; }
  .services-visual{ display:none; }
}

/* ==========================================================================
   SELECTED WORK
   ========================================================================== */
.work-section{ padding-block: var(--section-space); border-top: 1px solid var(--line); }
.work-item{
  display:grid;
  gap: clamp(18px,3vw,40px);
  padding-block: clamp(48px, 7vw, 96px);
  align-items: center;
}
.work-item:first-child{ padding-top:0; }
.work-item + .work-item{ border-top: 1px solid var(--line); }

.work-item.layout-full{ grid-template-columns: 1fr; }
.work-item.layout-70-30{ grid-template-columns: 7fr 5fr; }
.work-item.layout-40-60{ grid-template-columns: 5fr 7fr; }
@media (max-width: 860px){
  .work-item.layout-70-30, .work-item.layout-40-60{ grid-template-columns: 1fr; }
}

.work-media{ overflow:hidden; position:relative; }
.work-media img{ width:100%; height:100%; object-fit:cover; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.work-item:hover .work-media img{ transform: scale(1.045); }
.work-media.tall{ aspect-ratio: 3/4; }
.work-media.wide{ aspect-ratio: 16/9; }

.work-meta{ display:flex; flex-direction:column; gap:16px; }
.work-meta .num{ font-size:14px; }
.work-meta h3{ font-size: clamp(28px, 3.6vw, 48px); }
.work-tags{ display:flex; gap:18px; flex-wrap:wrap; }
.work-tags span{ font-size:13px; color: var(--mocha); font-weight:600; letter-spacing:.02em; }
.work-tags span:not(:last-child)::after{ content:'·'; margin-left:18px; color: var(--line-strong); }

.work-footer{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  margin-top: clamp(40px,6vw,72px); flex-wrap:wrap;
}

/* ==========================================================================
   CONNECT / FLOW
   ========================================================================== */
.flow-section{
  padding-block: var(--section-space);
  background: var(--ink);
  color: var(--cream);
}
.flow-section .eyebrow{ color: var(--orange); }
.flow-section h2{ color: var(--cream); max-width: 20ch; }
.flow-list{ margin-top: clamp(48px,6vw,80px); }
.flow-step{
  display:grid;
  grid-template-columns: 100px 1fr auto;
  align-items:center;
  gap: clamp(16px,3vw,40px);
  padding-block: clamp(24px,3vw,34px);
  border-top: 1px solid rgba(251,243,234,0.14);
}
.flow-list .flow-step:last-child{ border-bottom: 1px solid rgba(251,243,234,0.14); }
.flow-step .num{ font-size:15px; color: var(--orange); }
.flow-step h3{ color: var(--cream); font-size: clamp(22px,3vw,36px); }
.flow-step .flow-desc{ font-size:14px; color: rgba(251,243,234,0.55); max-width:34ch; text-align:right; }
@media (max-width: 760px){
  .flow-step{ grid-template-columns: 44px 1fr; }
  .flow-step .flow-desc{ grid-column: 2; text-align:left; margin-top:6px; }
}
.flow-thread{
  position:absolute; left: calc(var(--gutter) + 49px); top:0; bottom:0;
  width:1px; background: linear-gradient(to bottom, transparent, var(--orange), transparent);
  opacity:.5;
}

/* ==========================================================================
   RESULTS
   ========================================================================== */
.results-section{ padding-block: var(--section-space); border-top:1px solid var(--line); }
.results-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px,4vw,48px);
  margin-top: clamp(40px,6vw,72px);
}
.result{ border-top: 1px solid var(--line-strong); padding-top: 22px; }
.result .figure{
  font-family: var(--serif);
  font-size: clamp(48px, 6.4vw, 96px);
  color: var(--orange);
  line-height: 1;
  font-style: italic;
}
.result .label{ margin-top:14px; font-size:13.5px; font-weight:600; letter-spacing:.03em; color: var(--ink-soft); }
.result .tag{ margin-top:6px; font-size:11.5px; color: var(--mocha); letter-spacing:.05em; }
@media (max-width:760px){ .results-grid{ grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   PROCESS
   ========================================================================== */
.process-section{ padding-block: var(--section-space); border-top:1px solid var(--line); overflow:hidden; }
.process-step{
  display:grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(20px,4vw,64px);
  align-items:center;
  padding-block: clamp(36px,6vw,64px);
  position:relative;
}
.process-step + .process-step{ border-top:1px solid var(--line); }
.process-step .big-num{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(90px, 13vw, 220px);
  line-height:.8;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  user-select:none;
}
.process-step:hover .big-num{ -webkit-text-stroke: 1px var(--orange); }
.process-copy h3{ margin-bottom:12px; }
@media (max-width: 760px){
  .process-step{ grid-template-columns: 1fr; text-align:left; }
}

/* ==========================================================================
   INSIGHTS
   ========================================================================== */
.insights-section{ padding-block: var(--section-space); border-top:1px solid var(--line); }
.insights-layout{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(28px,4vw,56px);
  margin-top: clamp(36px,5vw,64px);
}
.insight-feature .work-media{ aspect-ratio: 16/10; margin-bottom: 26px; }
.insight-feature h3{ font-size: clamp(28px, 3.4vw, 44px); max-width: 20ch; }
.insight-minor{ display:flex; flex-direction:column; gap:28px; }
.insight-minor-item{ padding-top: 24px; border-top: 1px solid var(--line); }
.insight-minor-item:first-child{ border-top:0; padding-top:0; }
.insight-minor-item h4{ font-family: var(--serif); font-size: 20px; font-weight:600; margin-top:8px; }
.insight-meta{ display:flex; gap:14px; font-size:12.5px; color: var(--mocha); font-weight:600; letter-spacing:.02em; }
@media (max-width: 860px){ .insights-layout{ grid-template-columns: 1fr; } }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.final-cta{
  background: var(--orange);
  color: var(--ink);
  padding-block: clamp(90px, 14vw, 200px);
  overflow:hidden;
  position:relative;
}
.final-cta h2{
  color: var(--ink);
  font-size: clamp(52px, 9vw, 148px);
  max-width: 18ch;
}
.final-cta .lede{ color: rgba(22,19,15,0.72); margin-top:24px; }
.final-cta-row{
  display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap;
  margin-top: clamp(48px,7vw,88px);
}
.final-cta .btn-solid{ background: var(--ink); color: var(--cream); }
.final-cta .btn-solid:hover{ background: var(--paper); color: var(--ink); }
.final-cta-email{ font-size: 15px; font-weight:600; text-decoration: underline; text-underline-offset: 4px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--ink); color: var(--cream); padding-top: clamp(56px,8vw,96px); }
.footer-top{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(24px,4vw,40px);
  padding-bottom: clamp(48px,7vw,80px);
  border-bottom: 1px solid rgba(251,243,234,0.14);
}
.footer-brand .logo{ color: var(--cream); font-size: 26px; }
.footer-brand p{ margin-top:18px; color: rgba(251,243,234,0.6); font-size:14.5px; max-width: 34ch; }
.footer-col h5{ font-size:12.5px; letter-spacing:.06em; color: var(--orange); font-weight:600; margin-bottom:18px; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:14.5px; color: rgba(251,243,234,0.75); transition: color .2s ease; }
.footer-col a:hover{ color: var(--orange); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  padding-block: 26px;
  font-size:12.5px; color: rgba(251,243,234,0.45);
}
.footer-bottom a{ color: rgba(251,243,234,0.45); }
.footer-bottom a:hover{ color: var(--orange); }
@media (max-width: 860px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .footer-top{ grid-template-columns: 1fr; } }

/* ==========================================================================
   PAGE HEADER (inner pages)
   ========================================================================== */
.page-hero{ padding-top: clamp(48px,7vw,88px); padding-bottom: clamp(40px,6vw,72px); }
.page-hero h1{ max-width: 17ch; }
.page-hero .lede{ margin-top:24px; }
.breadcrumbs{ display:flex; gap:8px; font-size:13px; color: var(--mocha); margin-bottom: 26px; }
.breadcrumbs a:hover{ color: var(--orange-deep); }

/* generic split section */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px,4vw,64px);
  align-items: center;
  padding-block: var(--section-space);
  border-top: 1px solid var(--line);
}
.split.reverse .split-media{ order:2; }
.split-media{ aspect-ratio: 4/3; overflow:hidden; }
.split-media img{ width:100%; height:100%; object-fit:cover; }
@media (max-width: 860px){ .split{ grid-template-columns:1fr; } .split.reverse .split-media{ order:0; } }

/* numbered concept list (used on service pages) */
.concept-list .concept-item{
  display:grid;
  grid-template-columns: 70px 1fr;
  gap: clamp(16px,3vw,40px);
  padding-block: clamp(28px,4vw,44px);
  border-top: 1px solid var(--line);
}
.concept-list .concept-item:last-child{ border-bottom:1px solid var(--line); }
.concept-item h4{ font-family: var(--serif); font-size: clamp(22px,2.6vw,30px); font-weight:600; margin-bottom:10px; }
.concept-item .num{ font-size:15px; }

.pull-quote{
  padding-block: clamp(56px,8vw,96px);
  border-top:1px solid var(--line);
}
.pull-quote blockquote{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.2;
  max-width: 22ch;
}
.pull-quote cite{ display:block; margin-top:24px; font-style:normal; font-size:14px; color: var(--mocha); font-weight:600; }

.faq-item{ border-top:1px solid var(--line); padding-block: 26px; }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item button{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px;
  text-align:left; font-family: var(--serif); font-size: clamp(19px,2vw,24px); font-weight:600;
}
.faq-item .plus{ width:22px; height:22px; position:relative; flex-shrink:0; }
.faq-item .plus::before, .faq-item .plus::after{ content:''; position:absolute; background: var(--orange); }
.faq-item .plus::before{ left:0; right:0; top:50%; height:1px; transform: translateY(-50%); }
.faq-item .plus::after{ top:0; bottom:0; left:50%; width:1px; transform: translateX(-50%); transition: transform .3s ease; }
.faq-item.is-open .plus::after{ transform: translateX(-50%) rotate(90deg); }
.faq-answer{ max-height:0; overflow:hidden; transition: max-height .4s ease; }
.faq-item.is-open .faq-answer{ max-height: 400px; }
.faq-answer p{ padding-top:18px; max-width: 66ch; color: var(--ink-soft); }

/* form */
.contact-form{ display:flex; flex-direction:column; gap:0; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.field{ padding-block: 20px; border-bottom: 1px solid var(--line-strong); position:relative; }
.field label{ font-size:12.5px; font-weight:600; letter-spacing:.03em; color: var(--mocha); display:block; margin-bottom:8px; }
.field input, .field textarea, .field select{
  width:100%; border:0; background:transparent; font-family: var(--sans); font-size:18px; color: var(--ink);
  padding:0; resize:none;
}
.field input:focus, .field textarea:focus, .field select:focus{ outline:0; }
.field textarea{ min-height: 90px; }
.field.optional label::after{ content:' (optional)'; text-transform:none; font-weight:400; }

.industry-strip{ display:flex; flex-wrap:wrap; gap: 14px 0; }
.industry-strip span{
  font-family: var(--serif); font-size: clamp(20px,2.6vw,30px); font-style: italic;
  padding: 0 22px; border-right: 1px solid var(--line-strong);
}
.industry-strip span:last-child{ border-right:0; }

.marquee{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block: 22px; }
.marquee-track{ display:flex; gap: 60px; white-space:nowrap; animation: marquee 32s linear infinite; width:max-content; }
.marquee-track span{ font-family: var(--serif); font-style:italic; font-size: clamp(20px,3vw,34px); color: var(--mocha); }
.marquee-track span b{ color: var(--orange); font-style: normal; font-family: var(--sans); font-size: 14px; vertical-align: middle; margin-inline:8px;}
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* utilities */
.mt-0{ margin-top:0 !important; }
.text-center{ text-align:center; }
.hide-mobile{ display:initial; }
.show-mobile{ display:none; }
@media (max-width: 760px){
  .hide-mobile{ display:none; }
  .show-mobile{ display:initial; }
  .grid{ gap: 20px; }
}

@media (max-width: 900px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .statement-row{ grid-template-columns: 1fr; }
  .statement-side{ border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:24px; }
  .results-grid{ grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   BRAND + SPACING PATCH — 2026-09-01
   Keeps the existing visual system intact while tightening alignment,
   navigation rhythm and responsive section gutters.
   ========================================================================== */

/* Brand artwork */
.logo{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  line-height:0;
}
.logo img{
  display:block;
  width:100%;
  height:auto;
}
.site-header .logo{
  width: clamp(188px, 16vw, 224px);
}
.mobile-menu .logo{
  width: clamp(190px, 56vw, 232px);
}
.footer-brand .logo{
  width: min(258px, 100%);
}

/* Give the primary navigation more breathing room without making the header bulky. */
.nav{
  gap: clamp(24px, 3vw, 48px);
  padding-block: 15px;
}
.nav-links{
  margin-left:auto;
  gap: clamp(40px, 4vw, 72px);
}
.nav-links a{
  padding-block: 7px;
}
.nav-cta{
  padding: 11px 22px;
  margin-left: 14px;
}

/* Split sections previously touched the viewport edges. Align their content to .wrap. */
.split{
  padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
}

/* Long contact details should never force a column wider than its grid track. */
.footer-col,
.footer-brand,
.final-cta-row > *{
  min-width:0;
}
.footer-col a,
.final-cta-email{
  overflow-wrap:anywhere;
}

/* Compact legal/confirmation footers do not need the empty full-footer top gutter. */
.footer-compact{
  padding-top:0;
}

@media (max-width: 900px){
  .site-header .logo{ width: clamp(184px, 28vw, 208px); }
  .nav{ padding-block: 14px; }
}

@media (max-width: 760px){
  /* Any 12-column editorial grid becomes a clean single column on phones. */
  .grid > *{
    grid-column: 1 / -1 !important;
  }
  .page-hero .grid{
    row-gap: 28px;
  }
  main > section:not(.page-hero) .grid{
    row-gap: clamp(44px, 12vw, 64px);
  }

  /* Contact fields need full-width tap targets on smaller screens. */
  .form-row{
    grid-template-columns: 1fr;
    gap:0;
  }

  /* Keep service rows readable after reducing the available width. */
  .service-row{
    grid-template-columns: 42px minmax(0, 1fr) 40px;
    gap: 12px;
  }
  .service-row .arrow{
    width:40px;
    height:40px;
  }

  .split{
    padding-inline: var(--gutter);
  }

  .footer-top{
    row-gap: 40px;
  }
  .footer-bottom{
    align-items:flex-start;
    padding-block: 22px;
  }
}

@media (max-width: 540px){
  .site-header .logo{ width: 182px; }
  .mobile-menu .logo{ width: min(210px, 66vw); }
  .footer-brand .logo{ width: min(238px, 82vw); }

  .nav{ padding-block: 13px; }
  .nav-toggle{ width:30px; }

  .service-row h3{
    font-size: clamp(24px, 7vw, 30px);
  }
}


/* ==========================================================================
   PATCH — WORK LINKS + ARTICLES
   ========================================================================== */
.work-links{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  align-items:center;
  margin-top: 6px;
}
.work-links a{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.work-links a:hover{ color: var(--orange-deep); }
.result .body-copy{ margin-top: 12px; max-width: none; }
.article-meta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top: 18px;
  color: var(--mocha);
  font-size: 13px;
  letter-spacing: .03em;
}
.article-shell{
  padding-block: var(--section-space);
  border-top: 1px solid var(--line);
}
.article-layout{
  display:grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(260px, .9fr);
  gap: clamp(40px, 5vw, 88px);
  align-items:start;
}
.article-content{
  min-width:0;
}
.article-content h2{
  margin-top: 52px;
  margin-bottom: 18px;
}
.article-content h3{
  margin-top: 34px;
  margin-bottom: 12px;
  font-size: clamp(24px, 2.3vw, 32px);
}
.article-content p,
.article-content li{
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.8;
}
.article-content ul,
.article-content ol{
  margin: 16px 0 24px 22px;
}
.article-content strong{ color: var(--ink); }
.article-content a{ color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.article-intro{
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.6;
  color: var(--ink);
  max-width: 48ch;
}
.article-note,
.article-sidebar-card{
  border-top:1px solid var(--line-strong);
  padding-top: 18px;
}
.article-sidebar{
  position: sticky;
  top: 110px;
  display:flex;
  flex-direction:column;
  gap: 28px;
}
.article-sidebar h4{
  font-size: 16px;
  margin-bottom: 12px;
}
.article-sidebar ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: 12px;
}
.article-sidebar li a{
  color: var(--ink-soft);
  text-decoration:none;
}
.article-sidebar li a:hover{ color: var(--orange-deep); }
.related-articles{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(20px, 3vw, 32px);
  margin-top: 32px;
}
.related-articles .concept-item{
  border-top:1px solid var(--line-strong);
  padding-top:22px;
}
.insight-card-link{ display:block; color:inherit; }
@media (max-width: 980px){
  .article-layout{ grid-template-columns: 1fr; }
  .article-sidebar{ position: static; top:auto; }
}
@media (max-width: 760px){
  .related-articles{ grid-template-columns: 1fr; }
}


/* ==========================================================================
   PATCH — NAV SPACING / FEATURED IMAGE / ARTICLE LISTS / WEBSITE SHOTS
   ========================================================================== */
@media (min-width: 861px){
  .nav{
    justify-content: flex-start;
    gap: clamp(24px, 3vw, 48px);
  }
  .nav-links{
    margin-left: auto;
    gap: 0 !important;
    flex-wrap: nowrap;
  }
  .nav-links > a{
    flex: 0 0 auto;
  }
  .nav-links > a + a{
    margin-left: clamp(36px, 3.8vw, 35px);
  }
  .nav-links > .nav-cta{
    margin-left: clamp(36px, 3.8vw, 35px);
  }
}

.insight-feature .work-media{
  aspect-ratio: 16 / 10;
  background: #e7ded2;
}
.insight-feature .work-media img{
  object-fit: contain;
  object-position: center center;
}

.work-media.website-shot{
  background: #f2ece4;
  border: 1px solid var(--line);
  aspect-ratio: 2 / 1;
}
.work-media.website-shot img{
  object-fit: cover;
  object-position: top center;
  background: #f2ece4;
}

.article-content ul,
.article-content ol{
  margin: 16px 0 24px 0;
  padding: 0;
}
.article-content ul{
  list-style: none;
}
.article-content ul li,
.article-content ol li{
  position: relative;
  margin: 0 0 14px;
  line-height: 1.8;
}
.article-content ul li{
  padding-left: 28px;
}
.article-content ul li::before{
  content: '↗';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--orange-deep);
  font-weight: 700;
}
.article-content ol{
  counter-reset: article-ol;
  list-style: none;
}
.article-content ol li{
  counter-increment: article-ol;
  padding-left: 34px;
}
.article-content ol li::before{
  content: counter(article-ol);
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(249,115,22,.12);
  color: var(--orange-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}


/* ==========================================================================
   PATCH — ARTICLE CARDS WITH IMAGES
   ========================================================================== */
.related-articles.cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(20px, 3vw, 32px);
  margin-top: 32px;
}
.related-card{
  display: block;
  color: inherit;
}
.related-card .related-card-media{
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #ede4d8;
  margin-bottom: 18px;
}
.related-card .related-card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s cubic-bezier(.2,.7,.2,1);
}
.related-card:hover .related-card-media img{
  transform: scale(1.03);
}
.related-card .related-card-meta{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--mocha);
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 10px;
}
.related-card h4{
  margin: 0 0 10px;
}
.related-card .body-copy{
  margin-top: 0;
}
.article-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(20px, 3vw, 32px);
  margin-top: 32px;
}
.article-grid-card{
  display: block;
  color: inherit;
}
.article-grid-card .article-grid-media{
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #ede4d8;
  margin-bottom: 18px;
}
.article-grid-card .article-grid-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s cubic-bezier(.2,.7,.2,1);
}
.article-grid-card:hover .article-grid-media img{
  transform: scale(1.03);
}
.article-grid-card .article-grid-meta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  font-size:12.5px;
  color: var(--mocha);
  font-weight:600;
  letter-spacing:.02em;
  margin-bottom:10px;
}
.article-grid-card h4{
  margin:0 0 10px;
}
@media (max-width: 760px){
  .related-articles.cards,
  .article-grid{
    grid-template-columns: 1fr;
  }
}


@media (max-width: 860px){
  .work-media.website-shot,
  .work-media.website-shot.tall,
  .work-media.website-shot.wide{
    aspect-ratio: 5 / 4;
  }
}

body.services-page .split-media{ aspect-ratio: 5 / 4; }


/* ========================================================================== 
   V8 — NAV DROPDOWN, QUOTES, CASE-STUDY CTA, CONTACT FORM
   ========================================================================== */
@media (min-width: 861px){
  .nav-links > * + *{ margin-left: clamp(36px, 3.8vw, 35px); }
  .nav-services{ position:relative; display:flex; align-items:center; }
  .nav-services > a{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
  .nav-chevron{ width:6px; height:6px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .2s ease; }
  .nav-services:hover .nav-chevron,
  .nav-services:focus-within .nav-chevron{ transform:rotate(225deg) translate(-1px,-1px); }
  .nav-dropdown{
    position:absolute; top:calc(100% + 18px); left:-24px; width:min(620px, 70vw);
    display:grid; grid-template-columns:1fr 1fr; gap:0;
    padding:16px; background:var(--paper); border:1px solid var(--line-strong);
    box-shadow:0 22px 55px rgba(22,19,15,.14);
    opacity:0; visibility:hidden; transform:translateY(8px); pointer-events:none;
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index:120;
  }
  .nav-services::after{ content:''; position:absolute; left:-24px; right:-24px; top:100%; height:20px; }
  .nav-services:hover .nav-dropdown,
  .nav-services:focus-within .nav-dropdown{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
  .nav-dropdown a{
    display:grid; grid-template-columns:28px 1fr; grid-template-rows:auto auto;
    column-gap:10px; padding:14px 12px; border-bottom:1px solid var(--line); color:var(--ink);
  }
  .nav-dropdown a:nth-last-child(-n+2){ border-bottom:0; }
  .nav-dropdown a::after{ display:none !important; }
  .nav-dropdown a span{ grid-row:1/3; color:var(--orange-deep); font-size:11px; font-weight:700; padding-top:2px; }
  .nav-dropdown a strong{ font-size:14px; font-weight:650; }
  .nav-dropdown a small{ margin-top:4px; font-size:11.5px; line-height:1.45; color:var(--mocha); }
  .nav-dropdown a:hover{ background:rgba(249,115,22,.06); }
}

/* Keep the active/hover underline on the Services trigger rather than dropdown links. */
.nav-services > a{ position:relative; padding-block:7px; }
.nav-services > a::after{ content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--orange); transition:right .28s cubic-bezier(.4,0,.2,1); }
.nav-services > a:hover::after,
.nav-services > a.is-active::after{ right:0; }
.nav-services > a.is-active{ color:var(--orange-deep); }

/* Full-width pull quotes with visible quotation marks and a consistent label. */
.pull-quote .wrap{ width:100%; }
.pull-quote blockquote{
  position:relative;
  width:100%;
  max-width:none;
  padding-inline:clamp(34px,5vw,78px);
}
.pull-quote blockquote::before,
.pull-quote blockquote::after{
  position:absolute;
  color:var(--orange);
  font-family:var(--serif);
  font-style:normal;
  line-height:1;
  font-size:clamp(42px,6vw,82px);
}
.pull-quote blockquote::before{ content:'“'; left:0; top:-.08em; }
.pull-quote blockquote::after{ content:'”'; right:0; bottom:-.35em; }
.pull-quote cite{ padding-left:clamp(34px,5vw,78px); }

/* Better placement for the Selected Work archive CTA. */
.work-footer{ justify-content:flex-end; margin-top:clamp(18px,2.5vw,32px); }
.last-home-work{ padding-bottom:clamp(24px,3vw,42px); }

.bot-field{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important; }
.form-note{ margin-top:18px; max-width:58ch; color:var(--mocha); font-size:12.5px; line-height:1.6; }
.faq-list{ margin-top:8px; }


/* ========================================================================== 
   V9 — DESKTOP NAV ALIGNMENT FIX
   .hide-mobile previously reset the nav element to its initial block display.
   Force the desktop primary navigation back to a single flex row.
   ========================================================================== */
@media (min-width: 901px){
  .nav-links.hide-mobile{
    display:flex !important;
    align-items:center;
    flex-wrap:nowrap;
    margin-left:auto;
    gap:0 !important;
    width:auto;
  }
  .nav-links.hide-mobile > *{
    flex:0 0 auto;
  }
  .nav-links.hide-mobile > * + *{
    margin-left:clamp(36px, 3.8vw, 35px);
  }
  .nav-links.hide-mobile .nav-cta{
    margin-right:0;
  }
}
@media (max-width: 900px){
  .nav-links.hide-mobile{ display:none !important; }
}


/* ========================================================================== 
   V10 — FAQ HEADING SINGLE LINE, SUBMENU BREATHING ROOM, GENERATED SERVICE IMAGES
   ========================================================================== */
.faq-section .services-head h2,
.work-section > .wrap > h2.reveal{
  max-width:none;
  white-space:nowrap;
  font-size:clamp(18px, 4.4vw, 44px);
  line-height:1.05;
}

@media (min-width: 861px){
  .nav-dropdown{
    left:-20px;
    width:min(580px, calc(100vw - (var(--gutter) * 2) - 60px));
    padding:16px 24px 16px 16px;
  }
  .nav-services::after{ left:-20px; right:-32px; }
}


/* ========================================================================== 
   V11 — CONTENT MARKETING PAGE REFINEMENT
   ========================================================================== */
.content-approach-section{
  padding-block: var(--section-space);
  border-top: 1px solid var(--line);
}
.content-approach-head{
  display:grid;
  grid-template-columns: minmax(160px,.45fr) minmax(0,1.55fr);
  gap: clamp(28px,5vw,80px);
  align-items:start;
  margin-bottom: clamp(38px,5vw,70px);
}
.content-approach-head h2{
  max-width: 21ch;
}
.content-approach-grid{
  display:grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(34px,5vw,76px);
  align-items:stretch;
}
.content-approach-media{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.content-approach-media > img{
  width:100%;
  aspect-ratio: 4 / 3;
  object-fit:cover;
}
.content-media-caption{
  display:grid;
  grid-template-columns: minmax(120px,.38fr) minmax(0,1fr);
  gap:24px;
  padding-top:20px;
  margin-top:0;
  border-top:1px solid var(--line-strong);
}
.content-media-caption span{
  color:var(--orange-deep);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.content-media-caption p{
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.65;
  max-width:48ch;
}
.content-approach-list{
  border-top:1px solid var(--line-strong);
}
.content-approach-item{
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:clamp(18px,2.4vw,34px);
  padding-block:clamp(26px,3.2vw,42px);
  border-bottom:1px solid var(--line);
}
.content-approach-item .num{
  padding-top:3px;
  color:var(--orange-deep);
  font-size:13px;
  font-weight:700;
}
.content-approach-item .eyebrow{
  margin-bottom:10px;
}
.content-approach-item h3{
  font-family:var(--serif);
  font-size:clamp(23px,2.4vw,34px);
  line-height:1.15;
  max-width:24ch;
}
.content-approach-item .body-copy{
  margin-top:12px;
  max-width:56ch;
}

@media (max-width: 900px){
  .content-approach-head,
  .content-approach-grid{
    grid-template-columns:1fr;
  }
  .content-approach-head{ gap:16px; }
  .content-approach-media > img{ aspect-ratio:16/10; }
}
@media (max-width: 620px){
  .content-media-caption{ grid-template-columns:1fr; gap:8px; }
  .content-approach-item{ grid-template-columns:40px minmax(0,1fr); }
}


/* ==========================================================================
   V13 — SEO/GEO ARTICLE ENHANCEMENTS
   ========================================================================== */
.article-answer-box{
  margin:clamp(28px,4vw,42px) 0;
  padding:clamp(22px,3vw,30px);
  background:var(--paper);
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);
  border-left:3px solid var(--orange);
}
.article-answer-box .eyebrow{
  color:var(--orange-deep);
  margin-bottom:14px;
}
.article-answer-box ul{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.article-answer-box li{
  position:relative;
  padding-left:26px;
  color:var(--ink-soft);
  line-height:1.65;
}
.article-answer-box li::before{
  content:'↗';
  position:absolute;
  left:0;
  top:0;
  color:var(--orange-deep);
  font-weight:700;
}
.article-source-list{
  margin-top:16px !important;
}
.article-source-list li{
  margin-bottom:10px;
}
.article-source-list a{
  text-decoration:underline;
  text-underline-offset:4px;
}


/* ==========================================================================
   V14 — INSIGHTS REDESIGN + NAV DROPDOWN POSITION
   ========================================================================== */

/* Keep the Services submenu centred below its trigger instead of drifting
   toward the right edge of the viewport. */
@media (min-width:861px){
  .nav-dropdown{
    left:50% !important;
    right:auto !important;
    width:min(610px, calc(100vw - (var(--gutter) * 2) - 80px)) !important;
    transform:translate(-50%, 8px) !important;
  }
  .nav-services:hover .nav-dropdown,
  .nav-services:focus-within .nav-dropdown{
    transform:translate(-50%, 0) !important;
  }
  .nav-services::after{
    left:-46px !important;
    right:-46px !important;
  }
}

.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;
}

.insights-page .page-hero{ display:none; }

.insights-hero{
  padding-block:clamp(82px,10vw,140px) clamp(60px,7vw,92px);
  border-top:1px solid var(--line);
}

.insights-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:clamp(40px,7vw,110px);
  align-items:end;
}

.insights-hero h1{
  margin-top:18px;
  font-size:clamp(64px,8.5vw,138px);
  line-height:.88;
  max-width:8ch;
}

.insights-hero h1 em{
  color:var(--orange);
  font-style:italic;
}

.insights-hero-copy{
  padding-bottom:8px;
}

.insights-hero-copy p{
  color:var(--ink-soft);
  font-size:clamp(17px,1.35vw,21px);
  line-height:1.6;
  max-width:37ch;
}

.text-link{
  display:inline-flex;
  gap:12px;
  align-items:center;
  margin-top:24px;
  font-size:14px;
  font-weight:650;
  border-bottom:1px solid var(--ink);
  padding-bottom:4px;
}

.insights-featured-section{
  padding-bottom:var(--section-space);
}

.insights-featured{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);
  min-height:520px;
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);
}

.insights-featured-media{
  overflow:hidden;
  min-height:520px;
  background:#e8ded2;
}

.insights-featured-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
}

.insights-featured:hover .insights-featured-media img{
  transform:scale(1.025);
}

.insights-featured-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(36px,5vw,78px);
  border-left:1px solid var(--line);
}

.insights-featured-copy > .eyebrow{
  color:var(--orange-deep);
  margin-bottom:22px;
}

.insights-featured-copy .insights-card-meta{
  margin-bottom:18px;
}

.insights-featured-copy h2{
  font-size:clamp(36px,4.1vw,64px);
  line-height:1.02;
  max-width:13ch;
}

.insights-featured-copy > p{
  margin-top:22px;
  color:var(--ink-soft);
  line-height:1.68;
  max-width:45ch;
}

.insights-featured-copy .btn{
  margin-top:30px;
  align-self:flex-start;
}

.insights-library{
  padding-block:var(--section-space);
  border-top:1px solid var(--line);
}

.insights-library-head{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
  gap:clamp(32px,6vw,92px);
  align-items:end;
}

.insights-library-head h2{
  margin-top:14px;
  max-width:none;
}

.insights-library-head > p{
  color:var(--ink-soft);
  line-height:1.65;
  max-width:46ch;
  justify-self:end;
}

.insights-tools{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(200px,280px);
  gap:14px;
  margin-top:clamp(34px,5vw,58px);
}

.insights-search,
.insights-filter{
  position:relative;
  display:flex;
  align-items:center;
  border:1px solid var(--line-strong);
  background:var(--paper);
  min-height:58px;
}

.insights-search svg{
  position:absolute;
  left:20px;
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
}

.insights-search input,
.insights-filter select{
  width:100%;
  border:0;
  background:transparent;
  outline:0;
  color:var(--ink);
  min-height:56px;
}

.insights-search input{
  padding:0 18px 0 54px;
}

.insights-filter select{
  padding:0 42px 0 18px;
  cursor:pointer;
}

.insights-search:focus-within,
.insights-filter:focus-within{
  border-color:var(--orange);
}

.insights-results-bar{
  min-height:46px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding-top:18px;
  color:var(--mocha);
  font-size:13px;
}

.insights-clear{
  border:0;
  background:none;
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:4px;
  cursor:pointer;
  font:inherit;
}

.insights-card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,3vw,42px) clamp(18px,2vw,28px);
  margin-top:22px;
}

.insights-card{
  display:flex;
  flex-direction:column;
  color:inherit;
  min-width:0;
  border-top:1px solid var(--line-strong);
  padding-top:18px;
}

.insights-card[hidden]{ display:none !important; }

.insights-card-media{
  aspect-ratio:16/10;
  overflow:hidden;
  background:#e9dfd3;
}

.insights-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .85s cubic-bezier(.2,.7,.2,1);
}

.insights-card:hover .insights-card-media img{
  transform:scale(1.035);
}

.insights-card-meta{
  display:flex;
  gap:13px;
  flex-wrap:wrap;
  margin-top:18px;
  color:var(--mocha);
  font-size:12px;
  font-weight:650;
  letter-spacing:.02em;
}

.insights-card h3{
  margin-top:10px;
  font-family:var(--serif);
  font-size:clamp(22px,2vw,29px);
  line-height:1.12;
}

.insights-card > p{
  margin-top:13px;
  color:var(--ink-soft);
  line-height:1.62;
  font-size:14.5px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.insights-card-link{
  display:inline-flex;
  gap:9px;
  align-items:center;
  margin-top:auto;
  padding-top:18px;
  font-size:13px;
  font-weight:650;
}

.insights-empty{
  padding:70px 0;
  text-align:center;
  border-top:1px solid var(--line);
  margin-top:24px;
}

.insights-empty h3{
  margin-top:10px;
  font-size:clamp(30px,4vw,48px);
}

.insights-empty p{
  color:var(--ink-soft);
  margin-top:12px;
}

.insights-pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:clamp(42px,6vw,72px);
}

.insights-pagination button{
  width:44px;
  height:44px;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  transition:.2s ease;
}

.insights-pagination button:hover{
  border-color:var(--ink);
}

.insights-pagination button[aria-current="page"]{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--cream);
}

.insights-pagination button:disabled{
  opacity:.35;
  cursor:not-allowed;
}

.insights-faq{
  border-top:1px solid var(--line);
}

@media (max-width:1020px){
  .insights-featured{
    grid-template-columns:1fr;
  }
  .insights-featured-media{
    min-height:0;
    aspect-ratio:16/9;
  }
  .insights-featured-copy{
    border-left:0;
    border-top:1px solid var(--line);
  }
  .insights-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px){
  .insights-hero-grid,
  .insights-library-head,
  .insights-tools{
    grid-template-columns:1fr;
  }

  .insights-hero{
    padding-top:64px;
  }

  .insights-hero h1{
    font-size:clamp(58px,18vw,92px);
  }

  .insights-library-head > p{
    justify-self:start;
  }

  .insights-card-grid{
    grid-template-columns:1fr;
  }

  .insights-featured-copy{
    padding:30px 0 0;
    border-top:0;
  }

  .insights-featured{
    border-bottom:0;
  }

  .insights-featured-copy h2{
    max-width:none;
  }
}


/* ==========================================================================
   V15 — HOMEPAGE INSIGHTS + COMPACT FEATURE + RELATED ARTICLE CARDS
   ========================================================================== */

/* The featured article should feel premium without dominating the whole screen. */
.insights-featured{
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  min-height:0;
}
.insights-featured-media{
  min-height:0;
  aspect-ratio:16 / 10;
}
.insights-featured-copy{
  padding:clamp(30px,4vw,58px);
}
.insights-featured-copy h2{
  font-size:clamp(32px,3.15vw,50px);
  line-height:1.04;
  max-width:15ch;
}
.insights-featured-copy > p{
  margin-top:18px;
}
.insights-featured-copy .btn{
  margin-top:24px;
}

/* Homepage Insights now uses the same editorial visual language as the archive. */
.home-insights{
  padding-block:var(--section-space);
  border-top:1px solid var(--line);
}
.home-insights-head{
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:end;
  margin-bottom:clamp(36px,5vw,60px);
}
.home-insights-head h2{
  margin-top:12px;
  max-width:16ch;
}
.home-insights-feature{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);
}
.home-insights-feature-media{
  aspect-ratio:16/9;
  overflow:hidden;
  background:#e8ded2;
}
.home-insights-feature-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .85s cubic-bezier(.2,.7,.2,1);
}
.home-insights-feature:hover .home-insights-feature-media img{
  transform:scale(1.025);
}
.home-insights-feature-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(30px,4vw,56px);
  border-left:1px solid var(--line);
}
.home-insights-feature-copy .insights-card-meta{
  margin-top:0;
}
.home-insights-feature-copy h3{
  margin-top:14px;
  font-family:var(--serif);
  font-size:clamp(30px,3vw,46px);
  line-height:1.05;
  max-width:15ch;
}
.home-insights-feature-copy > p{
  color:var(--ink-soft);
  line-height:1.65;
  margin-top:18px;
  max-width:43ch;
}
.home-insights-feature-copy .insights-card-link{
  margin-top:24px;
}
.home-insights-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,30px);
  margin-top:clamp(30px,4vw,44px);
}
.home-insights-card{
  display:flex;
  flex-direction:column;
  color:inherit;
  min-width:0;
  border-top:1px solid var(--line-strong);
  padding-top:16px;
}
.home-insights-card .insights-card-media{
  aspect-ratio:16/10;
}
.home-insights-card h3{
  margin-top:10px;
  font-family:var(--serif);
  font-size:clamp(21px,1.8vw,28px);
  line-height:1.12;
}
.home-insights-card > p{
  margin-top:12px;
  color:var(--ink-soft);
  font-size:14px;
  line-height:1.6;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.home-insights-card .insights-card-link{
  margin-top:auto;
  padding-top:17px;
}

/* Related articles now use the same card system as the Insights library. */
.article-related-section{
  padding-block:var(--section-space);
  border-top:1px solid var(--line);
}
.article-related-section .services-head{
  margin-bottom:clamp(30px,4vw,44px);
}
.article-related-section .services-head h2{
  margin-top:10px;
}
.article-related-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,30px);
}
.article-related-card{
  display:flex;
  flex-direction:column;
  color:inherit;
  min-width:0;
  border-top:1px solid var(--line-strong);
  padding-top:16px;
}
.article-related-card .insights-card-media{
  aspect-ratio:16/10;
}
.article-related-card h3{
  margin-top:10px;
  font-family:var(--serif);
  font-size:clamp(21px,1.8vw,28px);
  line-height:1.12;
}
.article-related-card > p{
  margin-top:12px;
  color:var(--ink-soft);
  font-size:14px;
  line-height:1.6;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.article-related-card .insights-card-link{
  margin-top:auto;
  padding-top:17px;
}

@media (max-width:980px){
  .home-insights-grid,
  .article-related-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .home-insights-feature{
    grid-template-columns:1fr;
  }
  .home-insights-feature-copy{
    border-left:0;
    border-top:1px solid var(--line);
  }
}
@media (max-width:760px){
  .home-insights-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .home-insights-grid,
  .article-related-grid{
    grid-template-columns:1fr;
  }
  .insights-featured{
    grid-template-columns:1fr;
  }
}


/* ==========================================================================
   V16 — PREMIUM FEATURE STORY + UNIQUE ARTICLE IMAGES
   ========================================================================== */

/* Shared premium story treatment: image leads, text card overlaps it subtly. */
.insights-featured,
.home-insights-feature{
  position:relative;
  display:block;
  border:0;
  min-height:0;
  padding-bottom:clamp(82px,9vw,128px);
}

.insights-featured-media,
.home-insights-feature-media{
  width:min(74%, 980px);
  aspect-ratio:16/9;
  overflow:hidden;
  background:#e9dfd3;
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);
}

.insights-featured-media img,
.home-insights-feature-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
}

.insights-featured:hover .insights-featured-media img,
.home-insights-feature:hover .home-insights-feature-media img{
  transform:scale(1.025);
}

.insights-featured-copy,
.home-insights-feature-copy{
  position:absolute;
  right:0;
  bottom:0;
  width:min(48%, 650px);
  background:var(--cream);
  border:1px solid var(--line-strong);
  padding:clamp(30px,4vw,56px);
  z-index:2;
}

.insights-featured-copy{
  display:block;
}

.insights-featured-copy > .eyebrow{
  margin-bottom:18px;
}

.insights-featured-copy h2,
.home-insights-feature-copy h3{
  max-width:none;
}

.insights-featured-copy h2{
  font-size:clamp(32px,3.4vw,52px);
  line-height:1.02;
}

.home-insights-feature-copy h3{
  font-size:clamp(28px,2.8vw,44px);
  line-height:1.04;
}

.insights-featured-copy > p,
.home-insights-feature-copy > p{
  margin-top:16px;
  max-width:48ch;
}

.insights-featured-copy .btn,
.home-insights-feature-copy .insights-card-link{
  margin-top:22px;
}

@media (max-width:980px){
  .insights-featured,
  .home-insights-feature{
    padding-bottom:0;
  }

  .insights-featured-media,
  .home-insights-feature-media{
    width:100%;
  }

  .insights-featured-copy,
  .home-insights-feature-copy{
    position:static;
    width:100%;
    border-top:0;
  }
}


/* ==========================================================================
   V19 — HTML SITEMAP
   ========================================================================== */
.html-sitemap-hero{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);
  gap:clamp(40px,7vw,110px);
  align-items:end;
  margin-top:20px;
}
.html-sitemap-hero h1{
  margin-top:16px;
}
.html-sitemap-hero .lede{
  margin:0;
  max-width:36ch;
  justify-self:end;
}
.html-sitemap-section{
  padding-block:var(--section-space);
  border-top:1px solid var(--line);
}
.html-sitemap-top-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(30px,5vw,72px);
}
.html-sitemap-group{
  min-width:0;
}
.html-sitemap-group > .eyebrow{
  color:var(--orange-deep);
  margin-bottom:16px;
}
.html-sitemap-links{
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid var(--line-strong);
}
.html-sitemap-links li{
  margin:0;
  padding:0;
}
.html-sitemap-links a{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:22px;
  padding:17px 0;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  transition:color .2s ease, padding-left .2s ease;
}
.html-sitemap-links a:hover{
  color:var(--orange-deep);
  padding-left:6px;
}
.html-sitemap-insights-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-top:clamp(62px,8vw,110px);
  margin-bottom:clamp(30px,4vw,48px);
}
.html-sitemap-insights-head h2{
  margin-top:10px;
}
.html-sitemap-article-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(36px,5vw,72px);
}
@media (max-width:760px){
  .html-sitemap-hero,
  .html-sitemap-top-grid,
  .html-sitemap-article-grid{
    grid-template-columns:1fr;
  }
  .html-sitemap-hero .lede{
    justify-self:start;
  }
  .html-sitemap-insights-head{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* ==========================================================================
   V20 — PRIVACY POLICY + COOKIE CONSENT
   ========================================================================== */
.legal-hero{
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:end;
  margin-top:20px;
}
.legal-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  color:var(--mocha);
  font-size:13px;
}
.legal-meta strong{
  color:var(--ink);
}
.legal-content-section{
  padding-block:var(--section-space);
  border-top:1px solid var(--line);
}
.legal-layout{
  display:grid;
  grid-template-columns:minmax(200px,.34fr) minmax(0,1.66fr);
  gap:clamp(40px,7vw,110px);
  align-items:start;
}
.legal-nav{
  position:sticky;
  top:110px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.legal-nav .eyebrow{
  margin-bottom:8px;
  color:var(--orange-deep);
}
.legal-nav a{
  color:var(--mocha);
  font-size:14px;
}
.legal-nav a:hover{
  color:var(--orange-deep);
}
.legal-copy{
  max-width:860px;
}
.legal-copy section{
  scroll-margin-top:120px;
  padding-bottom:clamp(36px,5vw,60px);
  margin-bottom:clamp(36px,5vw,60px);
  border-bottom:1px solid var(--line);
}
.legal-copy section:last-child{
  border-bottom:0;
  margin-bottom:0;
}
.legal-copy h2{
  font-size:clamp(30px,3.5vw,46px);
  margin-bottom:18px;
  max-width:none;
}
.legal-copy h3{
  font-family:var(--serif);
  font-size:clamp(22px,2.2vw,30px);
  margin:28px 0 12px;
}
.legal-copy p,
.legal-copy li{
  color:var(--ink-soft);
  line-height:1.78;
  font-size:16px;
}
.legal-copy p + p{
  margin-top:16px;
}
.legal-copy ul{
  margin:18px 0 0;
  padding:0;
  list-style:none;
}
.legal-copy li{
  position:relative;
  padding-left:28px;
  margin-bottom:10px;
}
.legal-copy li::before{
  content:'↗';
  position:absolute;
  left:0;
  color:var(--orange-deep);
  font-weight:700;
}
.legal-copy a{
  text-decoration:underline;
  text-underline-offset:4px;
}
.inline-cookie-settings{
  appearance:none;
  border:0;
  background:none;
  padding:0;
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:4px;
  cursor:pointer;
  font:inherit;
}
.footer-cookie-link{
  appearance:none;
  border:0;
  background:none;
  color:inherit;
  padding:0;
  font:inherit;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:4px;
}

.cookie-consent{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:1000;
  padding:16px var(--gutter);
}
.cookie-consent[hidden]{
  display:none !important;
}
.cookie-consent-inner{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:28px;
  align-items:center;
  background:var(--ink);
  color:var(--cream);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 20px 60px rgba(0,0,0,.28);
  padding:22px 24px;
}
.cookie-consent-copy .eyebrow{
  color:var(--orange);
}
.cookie-consent-copy p{
  margin-top:7px;
  color:rgba(251,243,234,.76);
  font-size:13.5px;
  line-height:1.55;
  max-width:72ch;
}
.cookie-consent-copy a{
  color:var(--cream);
  text-decoration:underline;
  text-underline-offset:3px;
}
.cookie-consent-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.cookie-btn{
  min-height:44px;
  padding:0 17px;
  border:1px solid rgba(255,255,255,.35);
  font-weight:650;
  cursor:pointer;
}
.cookie-btn-primary{
  background:var(--orange);
  border-color:var(--orange);
  color:var(--ink);
}
.cookie-btn-secondary{
  background:transparent;
  color:var(--cream);
}

@media (max-width:820px){
  .legal-hero,
  .cookie-consent-inner{
    grid-template-columns:1fr;
    display:grid;
  }
  .legal-meta{
    align-items:flex-start;
  }
  .legal-layout{
    grid-template-columns:1fr;
  }
  .legal-nav{
    position:static;
    display:none;
  }
  .cookie-consent-actions{
    width:100%;
  }
  .cookie-btn{
    flex:1 1 160px;
  }
}


/* ==========================================================================
   V21 — PRIVACY + SITEMAP REDESIGN
   ========================================================================== */

/* ---------- Privacy ---------- */
.privacy-redesign{
  background:var(--cream);
}
.privacy-hero{
  padding:clamp(54px,7vw,90px) 0 clamp(48px,6vw,78px);
  border-top:1px solid var(--line);
}
.privacy-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
  gap:clamp(40px,7vw,100px);
  align-items:end;
}
.privacy-hero h1{
  margin-top:16px;
  max-width:8ch;
  font-size:clamp(54px,6.6vw,96px) !important;
  line-height:.95 !important;
}
.privacy-hero-copy{
  padding-bottom:8px;
}
.privacy-hero-copy > p{
  max-width:42ch;
  color:var(--ink-soft);
  font-size:clamp(16px,1.3vw,19px);
  line-height:1.65;
}
.privacy-updated{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:22px;
  font-size:13px;
  color:var(--mocha);
}
.privacy-updated strong{
  color:var(--ink);
}
.privacy-summary-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:clamp(42px,5vw,64px);
}
.privacy-summary-card{
  min-height:190px;
  background:var(--paper);
  border:1px solid var(--line);
  padding:24px;
}
.privacy-summary-num{
  color:var(--orange-deep);
  font-size:12px;
  font-weight:700;
}
.privacy-summary-card h3{
  margin-top:30px;
  font-family:var(--serif);
  font-size:clamp(22px,2vw,28px) !important;
  line-height:1.1;
}
.privacy-summary-card p{
  margin-top:11px;
  color:var(--ink-soft);
  font-size:14px;
  line-height:1.58;
}
.privacy-content-wrap{
  padding:clamp(50px,7vw,96px) 0 var(--section-space);
  border-top:1px solid var(--line);
}
.privacy-layout-v21{
  display:grid;
  grid-template-columns:minmax(230px,.38fr) minmax(0,1.62fr);
  gap:clamp(36px,6vw,86px);
  align-items:start;
}
.privacy-toc{
  position:sticky;
  top:100px;
}
.privacy-toc-card{
  background:var(--paper);
  border:1px solid var(--line);
  padding:22px;
}
.privacy-toc-card > .eyebrow{
  color:var(--orange-deep);
  margin-bottom:14px;
}
.privacy-toc nav{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
}
.privacy-toc nav a{
  display:flex !important;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
  color:var(--mocha);
  font-size:13px !important;
  line-height:1.35;
}
.privacy-toc nav a:hover{
  color:var(--orange-deep);
}
.privacy-cookie-btn{
  width:100%;
  margin-top:18px;
  border:1px solid var(--ink);
  background:transparent;
  min-height:44px;
  cursor:pointer;
  font:inherit;
  font-size:13px;
  font-weight:650;
}
.privacy-section-card{
  scroll-margin-top:110px;
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:clamp(24px,4vw,52px);
  padding:clamp(28px,4vw,48px);
  margin-bottom:18px;
  background:var(--paper);
  border:1px solid var(--line);
}
.privacy-section-head{
  border-right:1px solid var(--line);
  padding-right:22px;
}
.privacy-section-num{
  display:block;
  color:var(--orange-deep);
  font-size:12px;
  font-weight:700;
  margin-bottom:16px;
}
.privacy-section-head h2{
  margin:0 !important;
  font-family:var(--serif);
  font-size:clamp(25px,2.5vw,25px) !important;
  line-height:1.05 !important;
  max-width:8ch !important;
}
.privacy-section-body h3{
  margin:0 0 10px;
  padding-top:4px;
  font-family:var(--serif);
  font-size:clamp(20px,1.8vw,26px) !important;
  line-height:1.15;
}
.privacy-section-body h3:not(:first-child){
  margin-top:24px;
}
.privacy-section-body p,
.privacy-section-body li{
  color:var(--ink-soft);
  font-size:15px !important;
  line-height:1.75 !important;
}
.privacy-section-body p + p{
  margin-top:14px;
}
.privacy-section-body ul{
  list-style:none;
  margin:16px 0 0;
  padding:0;
}
.privacy-section-body li{
  position:relative;
  padding-left:25px;
  margin-bottom:9px;
}
.privacy-section-body li::before{
  content:'↗';
  position:absolute;
  left:0;
  color:var(--orange-deep);
}
.privacy-section-body a{
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- HTML Sitemap ---------- */
.sitemap-redesign{
  background:var(--cream);
}
.sitemap-hero-v21{
  padding:clamp(54px,7vw,90px) 0 clamp(46px,6vw,72px);
  border-top:1px solid var(--line);
}
.sitemap-hero-grid-v21{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
  gap:clamp(40px,7vw,100px);
  align-items:end;
}
.sitemap-hero-v21 h1{
  margin-top:16px;
  font-size:clamp(52px,6vw,88px) !important;
  line-height:.98 !important;
  max-width:10ch !important;
}
.sitemap-hero-copy-v21{
  padding-bottom:6px;
}
.sitemap-hero-copy-v21 p{
  max-width:40ch;
  color:var(--ink-soft);
  font-size:clamp(16px,1.3vw,19px);
  line-height:1.65;
}
.sitemap-primary-v21,
.sitemap-insights-v21{
  padding:var(--section-space) 0;
  border-top:1px solid var(--line);
}
.sitemap-section-heading{
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:end;
  margin-bottom:clamp(30px,4vw,46px);
}
.sitemap-section-heading h2{
  margin-top:10px !important;
  font-size:clamp(34px,4vw,56px) !important;
  line-height:1.02 !important;
  max-width:none !important;
}
.sitemap-main-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:18px;
}
.sitemap-main-group{
  background:var(--paper);
  border:1px solid var(--line);
  padding:clamp(22px,3vw,30px);
}
.sitemap-group-label{
  display:flex;
  gap:14px;
  align-items:center;
  padding-bottom:18px;
  border-bottom:1px solid var(--line-strong);
  margin-bottom:4px;
}
.sitemap-group-label span{
  color:var(--orange-deep);
  font-size:11px;
  font-weight:700;
}
.sitemap-group-label strong{
  font-family:var(--serif);
  font-size:24px;
}
.sitemap-card-list{
  display:grid;
}
.sitemap-link-card{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
  padding:17px 0;
  border-bottom:1px solid var(--line);
}
.sitemap-link-card:last-child{
  border-bottom:0;
}
.sitemap-link-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.sitemap-link-copy strong{
  font-size:15px;
}
.sitemap-link-copy small{
  color:var(--mocha);
  font-size:12.5px;
  line-height:1.45;
}
.sitemap-link-arrow{
  color:var(--orange-deep);
}
.sitemap-insights-heading-v21{
  margin-bottom:clamp(34px,5vw,54px);
}
.sitemap-topic-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.sitemap-topic-card{
  background:var(--paper);
  border:1px solid var(--line);
  padding:clamp(22px,3vw,30px);
}
.sitemap-topic-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding-bottom:17px;
  border-bottom:1px solid var(--line-strong);
}
.sitemap-topic-head .eyebrow{
  color:var(--orange-deep);
}
.sitemap-topic-count{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid var(--line-strong);
  font-size:11px;
  color:var(--mocha);
}
.sitemap-topic-links{
  display:flex;
  flex-direction:column;
}
.sitemap-article-link{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:13.5px;
  line-height:1.45;
}
.sitemap-article-link:last-child{
  border-bottom:0;
}
.sitemap-article-link:hover{
  color:var(--orange-deep);
}

@media (max-width:900px){
  .privacy-summary-grid{
    grid-template-columns:1fr;
  }
  .privacy-layout-v21,
  .sitemap-hero-grid-v21,
  .sitemap-main-grid,
  .sitemap-topic-grid{
    grid-template-columns:1fr;
  }
  .privacy-toc{
    position:static;
  }
  .privacy-toc nav{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:18px;
  }
}
@media (max-width:640px){
  .privacy-section-card{
    grid-template-columns:1fr;
  }
  .privacy-section-head{
    border-right:0;
    border-bottom:1px solid var(--line);
    padding-right:0;
    padding-bottom:18px;
  }
  .privacy-section-head h2{
    max-width:none !important;
  }
  .privacy-toc nav{
    grid-template-columns:1fr;
  }
  .sitemap-section-heading{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* ==========================================================================
   V22 — SMTP CONTACT + INTERACTIVE 404
   ========================================================================== */

.contact-delivery-notice{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:24px;
  padding:18px 20px;
  border-left:3px solid var(--orange);
  background:rgba(249,115,22,.07);
  color:var(--ink-soft);
}
.contact-delivery-notice[hidden]{ display:none !important; }
.contact-delivery-notice strong{ color:var(--ink); }
.contact-delivery-notice a{
  text-decoration:underline;
  text-underline-offset:3px;
}

.error404-page{ overflow:hidden; }

.error404-hero{
  min-height:calc(100vh - 92px);
  display:flex;
  align-items:center;
  padding:clamp(58px,8vw,110px) 0;
  border-top:1px solid var(--line);
}

.error404-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(42px,8vw,130px);
  align-items:center;
}

.error404-art{
  position:relative;
  min-height:470px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-right:1px solid var(--line);
}

.error404-number{
  position:relative;
  display:flex;
  align-items:center;
  letter-spacing:-.08em;
  font-family:var(--serif);
  font-size:clamp(110px,18vw,290px);
  line-height:.7;
}

.error404-number span{
  position:relative;
  z-index:2;
}

.error404-number .error404-orbit{
  color:var(--orange);
  font-style:italic;
}

.error404-orbit-ring{
  position:absolute;
  width:clamp(130px,14vw,230px);
  height:clamp(130px,14vw,230px);
  left:46%;
  top:46%;
  transform:translate(-50%,-50%);
  border:1px solid var(--orange);
  border-radius:50%;
  animation:error404OrbitSpin 8s linear infinite;
}

.error404-orbit-ring::before,
.error404-orbit-ring::after{
  content:'';
  position:absolute;
  border-radius:50%;
}

.error404-orbit-ring::before{
  width:12px;
  height:12px;
  right:11px;
  top:26px;
  background:var(--ink);
}

.error404-orbit-ring::after{
  width:7px;
  height:7px;
  left:20px;
  bottom:30px;
  background:var(--orange);
}

.error404-art > p{
  margin-top:36px;
  color:var(--mocha);
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

@keyframes error404OrbitSpin{
  to{ transform:translate(-50%,-50%) rotate(360deg); }
}

.error404-copy h1{
  margin-top:16px;
  max-width:10ch;
  font-size:clamp(54px,6.8vw,102px);
  line-height:.92;
}

.error404-lede{
  margin-top:24px;
  max-width:48ch;
  color:var(--ink-soft);
  font-size:clamp(16px,1.3vw,19px);
  line-height:1.65;
}

.error404-search{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  min-height:62px;
  margin-top:32px;
  border:1px solid var(--line-strong);
  background:var(--paper);
}

.error404-search svg{
  width:20px;
  height:20px;
  margin-left:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
}

.error404-search input{
  min-width:0;
  height:60px;
  padding:0 16px;
  border:0;
  background:transparent;
  outline:0;
  color:var(--ink);
}

.error404-search button{
  align-self:stretch;
  padding:0 22px;
  border:0;
  border-left:1px solid var(--line-strong);
  background:var(--ink);
  color:var(--cream);
  font-weight:650;
  cursor:pointer;
}

.error404-search:focus-within{ border-color:var(--orange); }

.error404-results{
  display:none;
  border:1px solid var(--line-strong);
  border-top:0;
  background:var(--paper);
}

.error404-results.is-open{ display:block; }

.error404-result{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  padding:15px 18px;
  border-bottom:1px solid var(--line);
}

.error404-result:last-child{ border-bottom:0; }

.error404-result > span{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.error404-result strong{ font-size:14px; }

.error404-result small{
  color:var(--mocha);
  font-size:12px;
  line-height:1.4;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.error404-result i{
  color:var(--orange-deep);
  font-style:normal;
}

.error404-result:hover{ background:rgba(249,115,22,.05); }

.error404-no-results{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:17px 18px;
}

.error404-no-results span{
  color:var(--mocha);
  font-size:12.5px;
}

.error404-actions{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:28px;
}

.error404-shortcuts{
  padding:var(--section-space) 0;
  background:var(--paper);
  border-top:1px solid var(--line);
}

.error404-shortcuts-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:clamp(30px,4vw,46px);
}

.error404-shortcuts-head h2{
  margin-top:10px;
  max-width:none;
  font-size:clamp(34px,4vw,56px);
}

.error404-shortcut-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line-strong);
  border-left:1px solid var(--line-strong);
}

.error404-shortcut-card{
  position:relative;
  min-height:230px;
  display:flex;
  flex-direction:column;
  padding:22px;
  border-right:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);
  transition:background .2s ease;
}

.error404-shortcut-card > span{
  color:var(--orange-deep);
  font-size:11px;
  font-weight:700;
}

.error404-shortcut-card strong{
  margin-top:44px;
  font-family:var(--serif);
  font-size:clamp(25px,2.2vw,34px);
}

.error404-shortcut-card small{
  margin-top:10px;
  max-width:25ch;
  color:var(--mocha);
  font-size:12.5px;
  line-height:1.55;
}

.error404-shortcut-card i{
  position:absolute;
  right:22px;
  bottom:20px;
  color:var(--orange-deep);
  font-style:normal;
  font-size:18px;
}

.error404-shortcut-card:hover{
  background:rgba(249,115,22,.05);
}

@media (prefers-reduced-motion:reduce){
  .error404-orbit-ring{ animation:none; }
}

@media (max-width:980px){
  .error404-grid{ grid-template-columns:1fr; }
  .error404-art{
    min-height:300px;
    border-right:0;
    border-bottom:1px solid var(--line);
    padding-bottom:44px;
  }
  .error404-number{ font-size:clamp(120px,28vw,230px); }
  .error404-shortcut-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:600px){
  .error404-art{ min-height:250px; }
  .error404-copy h1{ font-size:clamp(52px,16vw,78px); }
  .error404-search{ grid-template-columns:auto minmax(0,1fr); }
  .error404-search button{
    grid-column:1 / -1;
    min-height:48px;
    border-left:0;
    border-top:1px solid var(--line-strong);
  }
  .error404-shortcut-grid{ grid-template-columns:1fr; }
  .error404-shortcut-card{ min-height:190px; }
}


/* ==========================================================================
   V23 — REFINED 404 PAGE
   ========================================================================== */

.error404-hero-v23{
  padding:clamp(68px,8vw,118px) 0 clamp(72px,9vw,126px);
  border-top:1px solid var(--line);
}

.error404-layout-v23{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);
  gap:clamp(56px,8vw,130px);
  align-items:center;
}

.error404-copy-v23{
  max-width:700px;
}

.error404-copy-v23 h1{
  margin-top:18px;
  max-width:9ch;
  font-size:clamp(58px,6.8vw,104px);
  line-height:.92;
}

.error404-copy-v23 h1 em{
  color:var(--orange);
  font-style:italic;
}

.error404-lede-v23{
  margin-top:28px;
  max-width:48ch;
  color:var(--ink-soft);
  font-size:clamp(16px,1.25vw,19px);
  line-height:1.7;
}

.error404-search-v23{
  max-width:680px;
}

.error404-visual-v23{
  display:flex;
  justify-content:flex-end;
}

.error404-visual-frame{
  position:relative;
  width:min(100%, 690px);
  aspect-ratio:1 / .82;
  overflow:hidden;
  background:var(--paper);
  border:1px solid var(--line-strong);
}

.error404-grid-lines{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, transparent calc(25% - .5px), var(--line) 25%, transparent calc(25% + .5px)),
    linear-gradient(to right, transparent calc(50% - .5px), var(--line) 50%, transparent calc(50% + .5px)),
    linear-gradient(to right, transparent calc(75% - .5px), var(--line) 75%, transparent calc(75% + .5px)),
    linear-gradient(to bottom, transparent calc(33.333% - .5px), var(--line) 33.333%, transparent calc(33.333% + .5px)),
    linear-gradient(to bottom, transparent calc(66.666% - .5px), var(--line) 66.666%, transparent calc(66.666% + .5px));
  opacity:.7;
}

.error404-code-v23{
  position:absolute;
  left:50%;
  top:43%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap:.01em;
  font-family:var(--serif);
  font-size:clamp(104px,11vw,188px);
  line-height:.78;
  letter-spacing:-.09em;
  white-space:nowrap;
}

.error404-zero-v23{
  position:relative;
  z-index:2;
  color:var(--orange);
  font-style:italic;
}

.error404-zero-v23::after{
  content:'';
  position:absolute;
  width:1.16em;
  height:1.16em;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) rotate(-18deg);
  border:1px solid var(--orange);
  border-radius:50%;
  animation:error404V23Orbit 9s linear infinite;
}

@keyframes error404V23Orbit{
  to{ transform:translate(-50%,-50%) rotate(342deg); }
}

.error404-route-v23{
  position:absolute;
  left:9%;
  right:9%;
  bottom:24%;
  height:28px;
}

.route-dot{
  position:absolute;
  top:50%;
  width:9px;
  height:9px;
  margin-top:-4.5px;
  border-radius:50%;
  background:var(--ink);
}

.route-dot-a{ left:0; }
.route-dot-b{
  left:48%;
  background:var(--orange);
}
.route-dot-c{ right:0; }

.route-line{
  position:absolute;
  top:50%;
  height:1px;
  background:var(--line-strong);
}

.route-line-a{ left:9px; width:calc(48% - 13px); }
.route-line-b{ left:calc(48% + 9px); right:9px; }

.error404-status-v23{
  position:absolute;
  left:9%;
  top:10%;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:var(--mocha);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.error404-status-v23 > span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--orange);
}

.error404-visual-footer-v23{
  position:absolute;
  left:9%;
  right:9%;
  bottom:8%;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--mocha);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.error404-visual-footer-v23 span:last-child{
  color:var(--ink);
}

.error404-shortcuts-v23{
  padding-top:clamp(70px,8vw,110px);
}

@media (prefers-reduced-motion:reduce){
  .error404-zero-v23::after{ animation:none; }
}

@media (max-width:980px){
  .error404-layout-v23{
    grid-template-columns:1fr;
  }

  .error404-copy-v23{
    max-width:none;
  }

  .error404-copy-v23 h1{
    max-width:8ch;
  }

  .error404-visual-v23{
    justify-content:flex-start;
  }

  .error404-visual-frame{
    width:100%;
    max-width:760px;
  }
}

@media (max-width:640px){
  .error404-hero-v23{
    padding-top:54px;
  }

  .error404-copy-v23 h1{
    font-size:clamp(54px,16vw,78px);
  }

  .error404-visual-frame{
    aspect-ratio:1 / 1.05;
  }

  .error404-code-v23{
    font-size:clamp(92px,28vw,138px);
  }

  .error404-visual-footer-v23{
    flex-direction:column;
    gap:5px;
  }
}


/* ==========================================================================
   V24 — MOBILE RESPONSIVENESS PASS
   Targeted responsive fixes only. Desktop design is intentionally unchanged.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Navigation
   - Give hamburger / close controls proper touch targets.
   - Allow the full-screen menu to scroll on short phones / landscape devices.
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .nav-toggle,
  .mobile-close{
    width:44px;
    height:44px;
    min-width:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px;
  }

  .nav-toggle{
    flex-direction:column;
    gap:5px;
  }

  .nav-toggle span,
  .mobile-close span{
    width:28px;
    flex:0 0 auto;
  }

  .mobile-menu{
    min-height:100dvh;
    height:100dvh;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    justify-content:flex-start;
  }

  .mobile-menu-top,
  .mobile-links{
    flex-shrink:0;
  }

  .mobile-menu-bottom{
    margin-top:auto;
    padding-top:36px;
    padding-bottom:max(8px, env(safe-area-inset-bottom));
    flex-shrink:0;
  }
}

/* --------------------------------------------------------------------------
   Inner-page hero grids
   Many pages use inline 12-column placement. Stack these earlier on portrait
   tablets / large phones so copy never gets squeezed into narrow columns.
   -------------------------------------------------------------------------- */
@media (max-width:860px){
  .page-hero .wrap.grid{
    row-gap:28px;
  }

  .page-hero .wrap.grid > [style*="grid-column"]{
    grid-column:1 / -1 !important;
  }

  .page-hero .wrap.grid > [style*="align-self"]{
    align-self:start !important;
  }
}

/* --------------------------------------------------------------------------
   Privacy Policy
   Explicitly switch the hero from left/right to top/bottom on mobile.
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .privacy-hero-grid{
    grid-template-columns:1fr !important;
    gap:28px !important;
    align-items:start !important;
  }

  .privacy-hero-copy{
    padding-bottom:0;
    max-width:640px;
  }

  .privacy-hero-copy > p{
    max-width:48ch;
  }

  .privacy-updated{
    justify-content:flex-start;
  }
}

@media (max-width:640px){
  .privacy-hero{
    padding-top:44px;
  }

  .privacy-hero h1{
    max-width:7.5ch;
    font-size:clamp(48px,15vw,72px) !important;
  }

  .privacy-hero-grid{
    gap:24px !important;
  }

  .privacy-updated{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    margin-top:18px;
  }

  .privacy-summary-grid{
    gap:12px;
  }

  .privacy-summary-card{
    min-height:0;
  }
}

/* --------------------------------------------------------------------------
   Homepage hero image
   Avoid an overly shallow 21:9 crop on phones.
   -------------------------------------------------------------------------- */
@media (max-width:640px){
  .hero-figure{
    aspect-ratio:4 / 3;
    margin-top:40px;
  }

  .hero-figure-caption{
    left:18px;
    right:18px;
    bottom:16px;
    max-width:28ch;
    line-height:1.4;
  }

  .hero-actions{
    gap:20px;
  }
}

/* --------------------------------------------------------------------------
   Homepage result metrics
   Two columns are fine on tablets; use one clean column on narrow phones.
   -------------------------------------------------------------------------- */
@media (max-width:560px){
  .results-grid{
    grid-template-columns:1fr !important;
    gap:30px;
  }

  .result .figure{
    font-size:clamp(54px,17vw,78px);
  }
}

/* --------------------------------------------------------------------------
   Insights
   Stack the archive hero on portrait tablets instead of forcing a narrow
   300px side column. The existing phone rules remain in place.
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .insights-hero-grid{
    grid-template-columns:1fr !important;
    gap:28px;
    align-items:start;
  }

  .insights-hero-copy{
    padding-bottom:0;
    max-width:620px;
  }

  .insights-library-head{
    grid-template-columns:1fr;
    gap:20px;
    align-items:start;
  }

  .insights-library-head > p{
    justify-self:start;
  }
}

@media (max-width:640px){
  .insights-hero{
    padding-top:58px;
  }

  .insights-hero h1{
    max-width:7ch;
    font-size:clamp(54px,17vw,82px);
  }
}

/* --------------------------------------------------------------------------
   Service-page numbered concept lists
   Reduce the fixed number column on very small screens.
   -------------------------------------------------------------------------- */
@media (max-width:600px){
  .concept-list .concept-item{
    grid-template-columns:40px minmax(0,1fr);
    gap:14px;
  }
}

/* --------------------------------------------------------------------------
   Contact form
   Make the two-column form stack slightly earlier than the generic 760px
   breakpoint to avoid cramped portrait-tablet fields.
   -------------------------------------------------------------------------- */
@media (max-width:860px){
  .contact-form .form-row{
    grid-template-columns:1fr;
    gap:0;
  }
}

/* --------------------------------------------------------------------------
   General small-screen resilience
   Preserve the visual system while preventing long strings / controls from
   causing accidental overflow.
   -------------------------------------------------------------------------- */
@media (max-width:640px){
  .hero-actions,
  .final-cta-row,
  .error404-actions{
    align-items:flex-start;
  }

  .field input,
  .field textarea,
  .field select{
    min-width:0;
  }

  .footer-bottom{
    row-gap:10px;
  }
}