/* 49°N — site styles
   Layout: navy header and feature bands, warm-paper content sections, one interactive growth ring. */
:root{
  --navy:#23324F;
  --navy-deep:#1A2640;
  --sand:#E8D7B5;
  --gold:#B9A57A;
  --stone:#E3E2DC;
  --paper:#F3F2EE;
  --ink:#1A2233;
  --text:#3E4757;
  --label:#6B5A33;
  --on-navy:#E9ECF2;
  --on-navy-muted:#C9D0DC;
  --line-on-navy:#8C98AE;
  --white:#FFFFFF;
  --font:'Manrope', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --wrap:1200px;
  --radius:16px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; font-family:var(--font); font-size:17px; line-height:1.6; color:var(--ink); background:var(--paper)}
img{max-width:100%; display:block}
a{color:var(--navy)}
a:hover{color:var(--navy-deep)}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px}

.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:24px}
.skip{position:absolute; left:-9999px; top:0; background:var(--white); color:var(--navy); padding:10px 16px; z-index:10}
.skip:focus{left:16px; top:16px}

/* Header */
.site-header{background:var(--navy); color:var(--white)}
.nav{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding-block:22px}
.logo{color:var(--white); text-decoration:none; font-size:30px; font-weight:600; letter-spacing:-.5px}
.logo:hover{color:var(--white)}
.logo{display:inline-flex; align-items:center; gap:12px}
.logo-mark{width:44px; height:44px; flex:none}
.foot .logo-mark{width:36px; height:36px}
.nav ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 28px}
.nav a{color:var(--white); text-decoration:none; font-size:16px}
.nav a:hover{color:var(--sand)}
.nav a[aria-current="page"]{text-decoration:underline; text-underline-offset:6px}

/* Type */
h1,h2,h3{text-wrap:balance}
h1{margin:0 0 24px; font-size:clamp(40px,6vw,64px); line-height:1.05; font-weight:600; letter-spacing:-1.5px}
h2{margin:0 0 12px; font-size:clamp(30px,4vw,44px); line-height:1.15; font-weight:600; letter-spacing:-1px; color:var(--navy)}
h3{margin:0 0 10px; font-size:22px; line-height:1.25; font-weight:700; color:var(--navy)}
.eyebrow{margin:0 0 14px; font-size:14px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--label)}
.intro{margin:0 0 40px; max-width:62ch; font-size:19px; color:var(--text)}

/* Navy bands */
.band-navy{background:var(--navy); color:var(--white)}
.band-navy h1,.band-navy h2,.band-navy h3{color:var(--white)}
.band-navy p,.band-navy li{color:var(--on-navy)}
.band-navy .eyebrow{color:var(--sand)}
.band-stone{background:var(--stone)}

/* Hero */
.hero{padding-block:40px 88px}
.hero-grid{display:flex; flex-wrap:wrap; align-items:center; gap:56px}
.hero-copy{flex:1 1 460px; min-width:0}
.hero-media{flex:1 1 420px; min-width:0}
.hero-media img{width:100%; height:440px; object-fit:cover; border-radius:var(--radius)}
.hero-graphic{background:var(--navy-deep); border-radius:var(--radius); padding:24px; display:flex; align-items:center; justify-content:center}
.hero-graphic svg{width:100%; max-width:440px; height:auto; overflow:visible}
.lede{margin:0 0 20px; max-width:58ch; font-size:20px; line-height:1.55}
.band-navy .note{margin:0 0 36px; font-size:16px; color:var(--on-navy-muted)}
.page-head{padding-block:48px 72px}
.page-head .lede{margin:0}

/* Buttons */
.btns{display:flex; flex-wrap:wrap; gap:16px}
.btn{display:inline-block; padding:16px 32px; border-radius:999px; border:1px solid transparent; font:inherit; font-size:16px; font-weight:700; text-decoration:none; white-space:nowrap; cursor:pointer}
.btn-light{background:var(--white); color:var(--navy)}
.btn-light:hover{background:var(--sand); color:var(--navy)}
.btn-ghost{border-color:var(--line-on-navy); color:var(--white)}
.btn-ghost:hover{border-color:var(--white); color:var(--white)}
.btn-navy{background:var(--navy); color:var(--white)}
.btn-navy:hover{background:var(--navy-deep); color:var(--white)}

/* Sections */
.section{padding-block:96px}
.section-tight{padding-block:48px}
.cols{display:flex; flex-wrap:wrap; gap:32px}
.cols > *{flex:1 1 260px; min-width:0}
.cols h3{font-size:19px; margin-bottom:6px}
.cols p{margin:0; font-size:16px; color:var(--text)}

.chips{list-style:none; margin:0 0 48px; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.chips li{padding:8px 16px; border-radius:999px; border:1px solid #C9C5B8; background:var(--white); font-size:15px; font-weight:600; color:var(--navy)}

/* Growth ring */
.ring{display:flex; flex-wrap:wrap; align-items:center; gap:48px}
.ring-col{flex:1 1 480px; min-width:0}
.ring-box{position:relative; width:100%; max-width:600px; aspect-ratio:1/1; margin:0 auto}
.ring-svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.ring-track{fill:none; stroke:#D6D3C9; stroke-width:.6}
.ring-arc{fill:none; stroke:var(--gold); stroke-width:.8; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:0; transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1)}
.ring-center{position:absolute; left:34%; top:34%; width:32%; height:32%; border-radius:50%; background:var(--navy); color:var(--white); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:8px; text-align:center; box-shadow:0 0 0 10px rgba(232,215,181,.45); transition:opacity .5s ease .15s, transform .7s cubic-bezier(.2,.9,.25,1.2) .15s}
.ring-center strong{font-size:clamp(15px,2.4vw,22px); line-height:1.2}
.ring-center span{font-size:clamp(11px,1.4vw,14px); line-height:1.2; color:var(--sand)}
.leaf{position:absolute; width:24%; height:16%; margin:0; padding:4px 6px; -webkit-appearance:none; appearance:none; border:2px solid var(--navy); background:var(--sand); color:var(--navy); font-family:inherit; line-height:1.2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-align:center; cursor:pointer; box-shadow:0 2px 6px rgba(35,50,79,.10); transition:opacity .5s ease var(--d), transform .8s cubic-bezier(.2,.9,.25,1.15) var(--d), background-color .25s ease, color .25s ease, box-shadow .25s ease}
.leaf-a{border-radius:60% 6% 60% 6%}
.leaf-b{border-radius:6% 60% 6% 60%}
.leaf:hover{filter:brightness(1.06)}
.leaf.is-on{background:var(--navy); color:var(--white); box-shadow:0 10px 24px rgba(35,50,79,.30)}
.leaf strong{display:block; font-size:clamp(13px,1.8vw,17px)}
.leaf span{display:block; font-size:clamp(10px,1.2vw,12.5px); line-height:1.25}
.ring.is-anim .ring-arc{stroke-dashoffset:100}
.ring.is-anim .ring-center{opacity:0; transform:scale(.6)}
.ring.is-anim .leaf{opacity:0; transform:translate(var(--fx),var(--fy)) scale(.2) rotate(var(--r))}
.ring.is-anim.is-grown .ring-arc{stroke-dashoffset:0}
.ring.is-anim.is-grown .ring-center{opacity:1; transform:none}
.ring.is-anim.is-grown .leaf{opacity:1; transform:none}
.ring.is-settled .leaf{transition-delay:0s,0s,0s,0s,0s}
.ring-panel{flex:1 1 380px; min-width:0; background:var(--white); border-radius:var(--radius); padding:36px}
.ring-panel h3{font-size:28px; margin-bottom:12px}
.ring-panel p{margin:0 0 20px; color:var(--text)}
.ring-panel ul{margin:0; padding-left:20px}
.ring-panel li{margin:0 0 8px; font-size:16px; color:var(--text)}
.ring-panel .network{margin:24px 0 0; padding-top:20px; border-top:1px solid var(--stone); font-size:15px}
@media (prefers-reduced-motion:reduce){.leaf,.ring-center,.ring-arc{transition:none}}

/* Callout + photos */
.callout{margin-top:56px; background:var(--navy); color:var(--white); border-radius:var(--radius); padding:40px; display:flex; flex-wrap:wrap; align-items:center; gap:24px 48px}
.callout > *{flex:1 1 380px; min-width:0}
.callout .eyebrow{color:var(--sand); margin-bottom:8px}
.callout h3{margin:0; font-size:32px; line-height:1.2; font-weight:600; color:var(--white)}
.callout p{margin:0; color:var(--on-navy)}
.photos{display:flex; flex-wrap:wrap; gap:16px; margin-top:48px}
.photos img{flex:1 1 280px; min-width:0; height:220px; object-fit:cover; border-radius:var(--radius)}
.more-link{margin:40px 0 0; font-weight:700}

/* Feature */
.feature{display:flex; flex-wrap:wrap; align-items:center; gap:56px}
.feature > *{min-width:0}
.feature .stat-col{flex:1 1 300px}
.feature .copy-col{flex:1 1 540px}
.stat,.band-navy .stat{margin:0; font-size:clamp(80px,12vw,120px); line-height:1; font-weight:600; letter-spacing:-3px; color:var(--sand)}
.band-navy .stat-caption{margin:12px 0 0; font-size:18px}
.feature .copy-col p{font-size:18px; margin:0 0 16px}

/* Principles */
.principles{display:flex; flex-wrap:wrap; gap:24px}
.principles > div{flex:1 1 440px; min-width:0; border-top:2px solid var(--navy); padding-top:20px}
.principles p{margin:0; font-size:16px; color:var(--text)}
.principles > div{display:flex; flex-direction:column; gap:4px; background:var(--white); border-top:0; border-radius:var(--radius); padding:32px}
.p-icon{width:52px; height:52px; border-radius:50%; background:var(--sand); display:flex; align-items:center; justify-content:center; margin-bottom:12px}
.p-icon svg{width:26px; height:26px; fill:none; stroke:var(--navy); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.principles .is-feature{background:var(--navy)}
.principles .is-feature h3{color:var(--white)}
.principles .is-feature p{color:var(--on-navy)}
.principles .is-feature .p-icon{background:var(--gold)}
.principles .is-feature .p-icon svg{stroke:var(--white)}

/* Services page */
.svc{display:flex; flex-wrap:wrap; gap:24px}
.svc article{flex:1 1 440px; min-width:0; background:var(--white); border-radius:var(--radius); padding:32px}
.svc .eyebrow{font-size:13px; margin-bottom:8px}
.svc h2{margin:0 0 10px; font-size:24px; line-height:1.25; font-weight:700; letter-spacing:0}
.svc p{margin:0 0 16px; color:var(--text)}
.svc ul{margin:0; padding-left:20px}
.svc li{margin:0 0 6px; font-size:16px; color:var(--text)}

/* CTA */
.cta{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px 48px}
.cta > div{flex:1 1 520px; min-width:0}
.cta h2{margin:0 0 8px}
.cta p{margin:0; font-size:18px; color:var(--text)}

/* Contact */
.contact{display:flex; flex-wrap:wrap; gap:56px}
.contact-copy{flex:1 1 360px; min-width:0}
.contact-copy p{font-size:18px}
.contact-copy .email{font-size:20px; font-weight:700; color:var(--white); word-break:break-word}
.form{flex:1 1 520px; min-width:0; display:flex; flex-direction:column; gap:20px}
.row{display:flex; flex-wrap:wrap; gap:16px}
.field{flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:8px}
.field label{font-size:15px; font-weight:700; color:var(--white)}
.field .opt{font-weight:400; color:var(--on-navy-muted)}
.field input,.field select,.field textarea{width:100%; height:48px; border-radius:10px; border:1px solid var(--line-on-navy); background:var(--white); padding:0 14px; font:inherit; font-size:16px; color:var(--ink)}
.field textarea{height:auto; padding:12px 14px; resize:vertical}
.form .hint{margin:0; font-size:14px; color:var(--on-navy-muted)}
.form .hint a{color:var(--white)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* Prose */
.prose{max-width:70ch}
.prose h2{font-size:26px; margin-top:40px}
.prose p,.prose li{color:var(--text)}

/* Footer */
.site-footer{background:var(--navy-deep); color:var(--on-navy-muted); font-size:14px}
.foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px 48px; padding-block:40px}
.foot > *{min-width:0}
.foot .logo{font-size:24px}
.foot p{margin:8px 0 0; max-width:40ch}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 24px}
.foot a{color:var(--white); text-decoration:none}
.foot a:hover{color:var(--sand)}

@media (max-width:600px){
  body{font-size:16px}
  .section{padding-block:64px}
  .hero{padding-block:24px 64px}
  .hero-media img{height:280px}
  .ring{gap:28px}
  .ring-panel,.svc article{padding:26px}
  .ring-panel h3{font-size:24px}
  .callout{padding:28px}
  .callout h3{font-size:26px}
}
.nav .logo{font-size:28px}
.logo-word{height:60px; width:auto; display:block}
.foot .logo-word{height:46px}
/* Inner-page imagery */
.bc-art{margin-top:40px; color:var(--sand)}
.bc-art svg{display:block; width:100%; height:auto; max-height:180px}
.photos-4 img{flex:1 1 220px; height:240px}
.photos-3 img{flex:1 1 280px; height:260px}
/* Softer 80% section */
.feature-soft{border-top:1px solid #DAD7CE}
.feature-soft .stat{font-size:clamp(56px,7vw,76px); letter-spacing:-2px; color:var(--label)}
.feature-soft .stat-caption{margin:8px 0 0; font-size:16px; color:var(--text)}
.feature-soft .copy-col p{color:var(--text); font-size:17px}
.feature-soft .copy-col h2{font-size:clamp(28px,3.4vw,36px)}
/* Services journey bar */
.journey-steps{list-style:none; margin:0 0 32px; padding:0; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); position:relative}
.journey-steps::before{content:""; position:absolute; left:6%; right:6%; top:13px; height:2px; background:#D6D3C9}
.journey-steps button{position:relative; width:100%; background:none; border:0; padding:4px 2px; font:inherit; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--navy)}
.journey-steps .dot{width:20px; height:20px; border-radius:50%; background:var(--paper); border:2px solid var(--navy); transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease}
.journey-steps .lbl{font-size:15px; font-weight:700}
.journey-steps button.is-done .dot{background:var(--gold); border-color:var(--gold)}
.journey-steps button[aria-selected="true"] .dot{background:var(--navy); transform:scale(1.25); box-shadow:0 0 0 6px rgba(232,215,181,.8)}
.journey-steps button:hover .dot{transform:scale(1.15)}
.journey.is-js .svc{display:block}
.journey.is-js .svc article{max-width:none; padding:40px}
.journey.is-js .svc h2{font-size:30px}
.journey-next{margin-top:24px; background:none; border:0; padding:0; font:inherit; font-weight:700; color:var(--navy); cursor:pointer; text-decoration:underline; text-underline-offset:5px}
.journey-next:hover{color:var(--label)}
@media (max-width:760px){
  .journey-steps{grid-template-columns:repeat(8,84px); overflow-x:auto; padding-bottom:8px}
  .journey-steps::before{left:42px; right:auto; width:588px}
  .journey.is-js .svc article{padding:26px}
}
@media (prefers-reduced-motion:reduce){.journey-steps .dot{transition:none}}
/* How we work: interactive explorer (desktop) */
.principles.is-explorer{display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:32px; align-items:stretch}
.px-list{display:flex; flex-direction:column; gap:8px}
.px-tab{text-align:left; background:transparent; border:0; border-radius:12px; padding:16px 18px; font:inherit; font-size:17px; font-weight:700; line-height:1.35; color:var(--text); cursor:pointer; display:flex; flex-direction:column; gap:10px; transition:background-color .2s ease, color .2s ease, box-shadow .2s ease}
.px-tab:hover{background:rgba(255,255,255,.65); color:var(--navy)}
.px-tab[aria-selected="true"]{background:var(--white); color:var(--navy); box-shadow:0 6px 18px rgba(35,50,79,.08)}
.px-bar{display:block; height:3px; border-radius:2px; background:var(--stone); overflow:hidden; visibility:hidden}
.px-bar span{display:block; height:100%; width:100%; background:var(--gold)}
.px-tab[aria-selected="true"] .px-bar{visibility:visible}
.principles.is-auto .px-tab[aria-selected="true"] .px-bar span{animation:pxfill 6s linear forwards}
@keyframes pxfill{from{width:0}to{width:100%}}
.px-stage{position:relative; min-height:400px; display:flex}
.principles.is-explorer .px-stage > div{flex:1; min-width:0; padding:48px 56px; display:flex; flex-direction:column; justify-content:center; gap:12px}
.principles.is-explorer .px-stage .p-icon{width:104px; height:104px; margin-bottom:20px}
.principles.is-explorer .px-stage .p-icon svg{width:52px; height:52px; stroke-width:1.6}
.principles.is-explorer .px-stage h3{font-size:30px}
.principles.is-explorer .px-stage p{font-size:18px; max-width:58ch}
.principles.is-explorer .p-icon svg *{stroke-dasharray:1; stroke-dashoffset:0}
.principles.is-explorer .px-stage > div.is-drawing .p-icon svg *{stroke-dashoffset:1}
.principles.is-explorer .px-stage > div.is-drawn .p-icon svg *{transition:stroke-dashoffset 1.2s ease .15s}
.principles.is-explorer .px-stage > div.is-drawn{animation:pxin .45s ease}
@keyframes pxin{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
/* Phones: cards slide in on scroll */
.principles > div.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; transition-delay:var(--rd,0s)}
.principles > div.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .principles > div.reveal{opacity:1; transform:none; transition:none}
  .principles.is-explorer .px-stage > div.is-drawn{animation:none}
  .principles.is-explorer .px-stage > div.is-drawn .p-icon svg *{transition:none}
}
[hidden]{display:none !important}
.principles > .px-list,.principles > .px-stage{background:none; padding:0; border-radius:0; gap:8px}
.principles.is-explorer .px-stage > div{background:var(--white); border-radius:var(--radius)}
.principles.is-explorer .px-stage > div.is-feature{background:var(--navy)}
/* Nav call-to-action */
.nav a.nav-cta{border:1px solid var(--sand); color:var(--sand); padding:6px 14px; border-radius:999px; white-space:nowrap}
.nav a.nav-cta:hover{background:var(--sand); color:var(--navy)}
.nav a.nav-cta[aria-current="page"]{background:var(--sand); color:var(--navy); text-decoration:none}

/* Why 49°N band */
.why-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px 48px}
.why-row > div{flex:1 1 520px; min-width:0}
.why-row .eyebrow{margin-bottom:8px}
.band-navy .why-text{margin:0; font-size:20px; line-height:1.5; max-width:60ch; color:var(--on-navy)}

/* Timeline factors on Services */
.factors{margin-top:56px; display:flex; flex-wrap:wrap; gap:32px 56px; background:var(--white); border-radius:var(--radius); padding:40px}
.factors > div{flex:1 1 320px; min-width:0}
.factors > div p{color:var(--text); margin:0 0 24px}
.factors ul{flex:1 1 440px; min-width:0; margin:0; padding-left:20px}
.factors li{margin:0 0 12px; color:var(--text)}
.factors li strong{color:var(--navy)}

/* Coordinates tool */
.coord{max-width:880px; margin:0 auto; background:var(--white); border-radius:var(--radius); padding:40px; min-height:360px}
.coord-head{display:flex; flex-direction:column; gap:10px; margin-bottom:24px}
.coord-head .eyebrow{margin:0}
.coord-progress{height:4px; border-radius:2px; background:var(--stone); overflow:hidden}
.coord-progress span{display:block; height:100%; background:var(--gold); transition:width .35s ease}
.coord-q{margin:0 0 24px; font-size:clamp(24px,3vw,32px); outline:none}
.coord-opts{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px}
.coord-opt{text-align:left; background:var(--paper); border:2px solid transparent; border-radius:12px; padding:18px 20px; font:inherit; font-size:17px; font-weight:600; color:var(--navy); cursor:pointer; transition:border-color .15s ease, background-color .15s ease, transform .15s ease}
.coord-opt:hover{border-color:var(--gold); background:var(--white); transform:translateY(-2px)}
.coord-opt.is-picked{border-color:var(--navy)}
.coord-back{margin-top:20px; background:none; border:0; padding:0; font:inherit; font-weight:700; color:var(--text); text-decoration:underline; text-underline-offset:5px; cursor:pointer}
.coord-note{max-width:880px; margin:16px auto 0; font-size:14px; color:var(--text); text-align:center}
.coord-map{list-style:none; margin:8px 0 8px; padding:0; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); position:relative}
.coord-map::before{content:""; position:absolute; left:6%; right:6%; top:11px; height:2px; background:#D6D3C9}
.coord-map li{position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center}
.coord-map .dot{width:22px; height:22px; border-radius:50%; background:var(--white); border:2px solid #B9B5A8}
.coord-map .lbl{font-size:14px; font-weight:700; color:var(--text)}
.coord-map .is-past .dot{background:#D6D3C9; border-color:#D6D3C9}
.coord-map .is-route .dot{border:3px solid var(--gold)}
.coord-map .is-here .dot{background:var(--navy); border-color:var(--navy); box-shadow:0 0 0 6px rgba(232,215,181,.9)}
.coord-map .is-here .lbl{color:var(--navy)}
.coord-map .tag{font-size:12px; font-weight:700; color:var(--label); white-space:nowrap}
.coord-legend{margin:4px 0 28px; font-size:14px; color:var(--text); text-align:center}
.coord-results{display:flex; flex-wrap:wrap; gap:16px}
.coord-card{flex:1 1 240px; min-width:0; background:var(--paper); border-radius:12px; padding:24px}
.coord-card h3{font-size:19px; margin-bottom:10px}
.coord-card p{margin:0 0 10px; font-size:15px; color:var(--text)}
.coord-card ul{margin:0; padding-left:18px}
.coord-card li{margin:0 0 8px; font-size:15px; color:var(--text)}
.coord-card.is-navy{background:var(--navy)}
.coord-card.is-navy h3{color:var(--white)}
.coord-card.is-navy p,.coord-card.is-navy li{color:var(--on-navy)}
.coord-cta{display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin-top:28px}
.coord-cta .coord-back{margin-top:0}
@media (max-width:640px){
  .coord{padding:24px}
  .coord-map{grid-template-columns:repeat(8,72px); overflow-x:auto; padding-bottom:8px}
  .coord-map::before{left:36px; right:auto; width:504px}
}
@media (prefers-reduced-motion:reduce){.coord-opt,.coord-progress span{transition:none}}
/* Sound familiar? */
.pains-sec{padding-block:88px 40px}
.pains{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px}
.pain{background:var(--white); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; gap:10px; transition:transform .2s ease, box-shadow .2s ease}
.pain:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(35,50,79,.08)}
.pain p{margin:0; color:var(--text); font-size:16px}
.pain .pain-q{font-size:19px; font-weight:700; line-height:1.35; color:var(--navy)}
.pain-tag{align-self:flex-start; margin-top:auto; font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--label); background:var(--paper); padding:4px 10px; border-radius:999px}
@media (prefers-reduced-motion:reduce){.pain{transition:none}.pain:hover{transform:none}}
/* FAQ */
.faq-wrap{display:flex; flex-wrap:wrap; gap:24px 56px}
.faq-wrap > div:first-child{flex:1 1 280px; min-width:0}
.faq{flex:2 1 520px; min-width:0; display:flex; flex-direction:column; gap:10px}
.faq details{background:var(--white); border-radius:12px; padding:0 24px}
.faq summary{cursor:pointer; list-style:none; padding:20px 32px 20px 0; position:relative; font-weight:700; font-size:17px; color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:24px; font-weight:400; color:var(--gold)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0 0 20px; color:var(--text)}
/* Contact: next steps */
.next-steps{margin:32px 0 0; padding-left:22px; display:flex; flex-direction:column; gap:12px}
.next-steps li{color:var(--on-navy)}
.next-steps strong{color:var(--white)}
/* Descriptor next to the logo */
.logo{gap:16px}
.logo-desc{font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; line-height:1.4; color:var(--sand); border-left:1px solid rgba(232,215,181,.45); padding-left:16px}
.foot .logo-desc{font-size:11px}
@media (max-width:480px){.logo-desc{font-size:10px; letter-spacing:1px; padding-left:12px}}
.logo-desc{font-size:15px; letter-spacing:1.6px}
.foot .logo-desc{font-size:13px}
@media (max-width:480px){.logo-desc{font-size:11px; letter-spacing:1px}}
.logo-desc{font-size:17px; letter-spacing:1.4px}
.foot .logo-desc{font-size:14px}
@media (max-width:480px){.logo-desc{font-size:11px}}
.coord-card .coord-sub{margin:18px 0 8px; font-size:17px}
.coord-map .tag-next{color:var(--text); font-weight:600}
.coord-results .coord-card:first-child{flex:1.4 1 300px}
.coord-opt.is-suggested{background:var(--white); border-color:var(--gold); display:flex; flex-direction:column; align-items:flex-start; gap:8px}
.coord-badge{font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--navy); background:var(--sand); padding:3px 10px; border-radius:999px}
.coord-urgent{background:var(--white); border:2px solid var(--gold); margin-bottom:16px}
.coord-urgent .eyebrow{margin:0 0 6px}
.coord-urgent h3{font-size:22px}
.coord-urgent-top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px}
.coord-urgent-top .eyebrow{margin:0}
.coord-level{font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--navy); background:var(--sand); padding:4px 12px; border-radius:999px}
.coord-urgent.is-hot{border-color:var(--navy)}
.coord-urgent.is-hot .coord-level{background:var(--navy); color:var(--white)}
/* Hero city cloud */
.city-cloud{position:relative; width:100%; aspect-ratio:1/0.92; max-width:100%}
.city-cloud .cc{position:absolute; transform:translate(-50%,-50%) rotate(var(--r)); white-space:nowrap; font-weight:600; letter-spacing:.2px; color:#FFFFFF; opacity:var(--o); transition:color .6s ease, opacity .6s ease, text-shadow .6s ease; animation:ccin .8s ease both; animation-delay:var(--d)}
.city-cloud .cc-xl{font-size:clamp(30px,4.2vw,50px); font-weight:700; letter-spacing:-1px}
.city-cloud .cc-m{font-size:clamp(15px,1.7vw,21px)}
.city-cloud .cc-s{font-size:clamp(12px,1.3vw,16px)}
.city-cloud .cc-xs{font-size:clamp(10px,1.05vw,13px); font-weight:500}
.city-cloud .cc.is-lit{color:var(--sand); opacity:1; text-shadow:0 0 18px rgba(232,215,181,.45)}
.cc-line{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.cc-spark{position:absolute; left:65.6%; top:57.6%; width:14px; height:14px; transform:translate(-50%,-50%); background:var(--sand); clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%)}
.cc-tag{position:absolute; left:75%; top:57.5%; transform:translateY(-50%); font-size:12px; font-weight:700; letter-spacing:1.4px; color:var(--gold)}
@keyframes ccin{from{opacity:0; filter:blur(4px)} to{opacity:var(--o); filter:none}}
@media (prefers-reduced-motion:reduce){.city-cloud .cc{animation:none; transition:none}}
@media (max-width:600px){
  .city-cloud .cc-m{font-size:13px}
  .city-cloud .cc-s{font-size:11px}
  .city-cloud .cc-xs{font-size:9px}
  .city-cloud .cc-xl{font-size:28px}
}
.cc-region{position:absolute; left:3%; bottom:2%; font-size:12px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--gold)}
@media (max-width:600px){.cc-region{font-size:9px; letter-spacing:3px}}
.city-cloud .cc-l{font-size:clamp(20px,2.4vw,29px); font-weight:700}
@media (max-width:600px){.city-cloud .cc-l{font-size:17px}}
/* Ways to work with us */
.ways{margin-top:56px}
.ways h2{margin-bottom:24px}
.ways-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px}
.ways-grid > div{background:var(--white); border-radius:var(--radius); padding:28px; border-top:3px solid var(--gold)}
.ways-grid h3{font-size:19px; margin-bottom:8px}
.ways-grid p{margin:0; font-size:16px; color:var(--text)}
.feature-soft .stat.stat-words{font-size:clamp(34px,4vw,48px); line-height:1.1; letter-spacing:-1px}
.faq details ul{margin:-8px 0 20px; padding-left:20px}
.faq details li{margin:0 0 6px; color:var(--text)}
.pains{grid-template-columns:1fr}
@media (min-width:640px){.pains{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.pains{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pain .pain-q{font-size:18px}