/* ============================================================
   SERVICES PAGE - page-specific layer (shared tokens above)
   ============================================================ */
/* anchored sections sit under an 80px sticky nav */
.sec[id],.paid[id],.tierd[id]{scroll-margin-top:97px}

/* ROUND 15: 81px nav + 16px clearance */
/* density: this page carries seven bands, so its rhythm is a notch tighter
   than the homepage's (88/74) without changing the type scale */
.sec{padding:72px 0}

.sec-tight{padding:60px 0}

.sec-head{margin-bottom:32px}

/* -- hero: no video on this page. The wash, the rule and the orb
      field carry the movement the other two heroes get from footage. */
.hero-page{min-height:min(52vh,470px);padding:78px 0 64px}

.hero-solo{max-width:56rem}

.hero-page h1{max-width:26ch;font-size:clamp(2.1rem,4.3vw,3.4rem)}

.hero-page .hero-sub{max-width:60ch}

/* jump strip */
.jump{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0;padding:0;list-style:none}

.jump li{flex:0 0 auto}

.chip{display:inline-flex;align-items:center;gap:8px;font-size:.87rem;color:var(--emerald-ink);
  background:var(--white);border:1px solid var(--hairline-2);border-radius:99px;padding:9px 17px;
  line-height:1.3;transition:border-color .25s var(--motion-ease),background .25s,transform .25s var(--motion-ease)}

.chip:hover{border-color:var(--emerald);background:#f7fcfa;color:var(--emerald-ink);transform:translateY(-2px)}

.chip svg{width:12px;height:12px;flex:0 0 12px;opacity:.75}

/* -- prose column + pull quote (same idiom as the About page) -- */
.prose{max-width:66ch}

.prose p{color:var(--body)}

.pull{margin:26px 0;padding:2px 0 2px 22px;border-left:2px solid var(--mint)}

.pull p{font-family:var(--sans);font-style:italic;font-size:clamp(1.14rem,1.9vw,1.4rem);
  color:var(--emerald-ink);line-height:1.5;margin:0;max-width:56ch}

/* -- which one is you: situation -> answer rows ---------------- */
.wr-list{margin:34px 0 0;padding:0;list-style:none;border-top:1px solid var(--hairline-2)}

.wr{display:grid;grid-template-columns:1.2fr .8fr;gap:10px 36px;align-items:baseline;
  padding:16px 2px;border-bottom:1px solid var(--hairline-2)}

.wr-you{margin:0;font-size:1.02rem;color:var(--forest);line-height:1.5}

.wr-ans{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}

.wr-ans h3{margin:0;font-size:1.02rem}

.wr-ans a{font-size:.87rem}

/* -- the flagship: the two ways, the two skills ---------------- */
.flag-top{align-items:start}

.flag-grid{display:grid;grid-template-columns:1fr;gap:20px;margin:0}

.way{background:linear-gradient(180deg,var(--white) 0%,#fafcfb 100%);border:1px solid var(--hairline);
  border-radius:var(--r);padding:26px 24px;position:relative;overflow:hidden;
  box-shadow:0 1px 2px rgba(6,28,20,.045)}

.way-hi{background:linear-gradient(180deg,var(--tint-soft) 0%,#dff7ec 100%);border-color:#a9e8cf;
  box-shadow:0 2px 4px rgba(6,28,20,.05),0 20px 46px rgba(5,150,105,.13)}

.way h3{margin:14px 0 .4em;font-size:1.08rem}

.way p{margin:0;font-size:.94rem;color:var(--muted);line-height:1.6}

.way-hi p{color:var(--body)}

.skill-list{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:1fr;
  gap:16px}

.skill{display:flex;gap:15px;align-items:flex-start}

.skill h3{margin:0 0 .3em;font-size:1.02rem}

.skill p{margin:0;font-size:.93rem;color:var(--muted);line-height:1.55}

.flag-note{margin:26px 0 0;font-size:.98rem;color:var(--forest);max-width:60ch}

.flag-top .flag-note{margin-top:24px;font-size:.95rem}

/* -- the three-path contrast strip (slim: three rows only) -----
   Desktop is a 4-column grid (row label + three paths). Under 860px
   each row stacks and every value carries its column name from
   data-col, so nothing ever scrolls sideways. */
.cmp{margin:36px 0 0;border:1px solid var(--hairline);border-radius:var(--r);overflow:hidden;
  background:var(--white);box-shadow:var(--sh-1)}

.cmp-row{display:grid;grid-template-columns:minmax(130px,.95fr) 1fr 1fr 1.12fr}

.cmp-row + .cmp-row{border-top:1px solid var(--hairline)}

.cmp-cell{padding:14px 18px;font-size:.93rem;color:var(--body);line-height:1.5;min-width:0;
  display:block}

.cmp-lbl{font-size:.86rem;color:var(--muted);background:linear-gradient(180deg,#fbfdfc,#f5f9f7)}

.cmp-head .cmp-cell{padding-top:19px;padding-bottom:17px}

.cmp-h{font-family:var(--serif);font-weight:700;font-size:1rem;color:var(--forest);display:block;
  line-height:1.3}

.cmp-mac{background:linear-gradient(180deg,var(--tint-soft) 0%,#e8f9f1 100%);position:relative}

.cmp-head .cmp-mac{padding-top:22px}

.cmp-head .cmp-mac::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--mint);animation:macBreathe 6.5s ease-in-out infinite}

.cmp-mac.cmp-val{color:var(--forest)}

/* -- website design: the browser frame (parked from v2) --------
   NOTE (carried from the parked block): .bw-nav > * and .bw-cards > *
   are in the min-width:0 list, or the mock pushes its column wider
   than a phone viewport. The display:block rule at the bottom is
   required too - the skeleton spans are inline by default. */
/* a grid item's automatic minimum size is its min-content: without this the
   mock's column refuses to shrink below the frame and pushes past a phone
   viewport (the parked block's min-width:0 note, applied to the track too) */
.grid-2 > *{min-width:0}

.browser{width:100%;max-width:100%;min-width:0;
  border-radius:var(--r);overflow:hidden;border:1px solid var(--hairline-2);background:var(--white);
  box-shadow:var(--sh-2)}

.browser-bar,.browser-body,.bw-nav,.bw-hero,.bw-cards,.bw-foot,
.browser-bar > *,.bw-nav > *,.bw-hero > *,.bw-cards > *{max-width:100%;min-width:0}

.browser-bar{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--cool);
  border-bottom:1px solid var(--hairline)}

.browser-dots{display:flex;gap:6px}

.browser-dots i{width:9px;height:9px;border-radius:50%;background:#cdd8d3;display:block}

.browser-url{flex:1;background:var(--white);border:1px solid var(--hairline);border-radius:99px;
  padding:5px 14px;font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.browser-body{padding:0 0 18px}

.bw-nav{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--hairline)}

.bw-logo{width:70px;height:11px;border-radius:3px;background:var(--forest)}

.bw-nav .l{height:7px;border-radius:3px;background:var(--hairline-2)}

.bw-nav .l:nth-child(2){width:44px}

.bw-nav .l:nth-child(3){width:52px}

.bw-nav .l:nth-child(4){width:38px}

.bw-nav .btn-mock{margin-left:auto;width:74px;height:20px;border-radius:5px;background:var(--mint)}

.bw-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;padding:24px 20px 20px;align-items:center;
  background:linear-gradient(180deg,#fff 0%,#f4faf7 100%)}

.bw-hero .h{height:14px;border-radius:4px;background:var(--forest);width:88%;margin-bottom:8px}

.bw-hero .h.s{width:62%;background:var(--emerald)}

.bw-hero .t{height:7px;border-radius:3px;background:var(--hairline-2);width:100%;margin-top:12px}

.bw-hero .t.s{width:72%;margin-top:6px}

.bw-hero .b{width:88px;height:22px;border-radius:5px;background:var(--mint);margin-top:16px}

.bw-map{aspect-ratio:4/3;border-radius:9px;border:1px solid var(--hairline);position:relative;
  background:
    linear-gradient(90deg,rgba(5,150,105,.10) 1px,transparent 1px),
    linear-gradient(rgba(5,150,105,.10) 1px,transparent 1px),
    linear-gradient(160deg,#eef7f3,#e2f2ea);
  background-size:20px 20px,20px 20px,100% 100%}

.bw-pin{position:absolute;width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--emerald);border:2px solid #fff;box-shadow:0 2px 6px rgba(6,28,20,.25)}

.bw-pin:nth-of-type(1){top:26%;left:30%}

.bw-pin:nth-of-type(2){top:52%;left:58%;background:var(--mint)}

.bw-pin:nth-of-type(3){top:70%;left:26%;background:#8fd9bd}

.bw-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:18px 20px 0}

.bw-card{border:1px solid var(--hairline);border-radius:9px;padding:12px}

.bw-card .k{width:22px;height:22px;border-radius:6px;background:var(--tint);margin-bottom:10px}

.bw-card .l{height:7px;border-radius:3px;background:var(--hairline-2);margin-bottom:6px}

.bw-card .l.s{width:64%}

.bw-foot{margin:18px 20px 0;height:26px;border-radius:7px;background:var(--forest)}

.feat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}

.feat{padding-top:16px;border-top:2px solid var(--hairline)}

.feat h3{font-size:1rem;margin:12px 0 .3em}

.feat p{margin:0;font-size:.89rem;color:var(--muted);line-height:1.55}

/* the decorative spans are inline by default - this rule travels with the block */
.bw-logo,.bw-nav .l,.bw-nav .btn-mock,.bw-hero .h,.bw-hero .t,.bw-hero .b,
.bw-card .k,.bw-card .l{display:block}

/* -- managed campaigns: the page's one dark mid-band ----------- */
.paid{position:relative;overflow:hidden;background:var(--forest);color:#bcd4c9;padding:72px 0}

/* the band's intro runs in two columns: the headline holds the left, the
   qualification paragraph the right - it reads faster and costs less height */
.paid-head{display:grid;grid-template-columns:1.02fr .98fr;gap:16px 52px;align-items:start}

.paid-head h2{margin-bottom:0}

.paid-head .lede{margin-bottom:.85em}

.paid h2{color:#fff;max-width:24ch}

.paid h2 em{color:var(--mint)}

.paid p{color:#bcd4c9}

.paid .lede{color:#bcd4c9;font-size:1.06rem}

.paid strong{color:#fff;font-weight:600}

.paid .eyebrow-d{color:var(--mint);margin-bottom:14px}

.tiers{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:30px 0 0}

.tierd{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);padding:26px 24px;position:relative;overflow:hidden}

.tierd .ico{background:rgba(52,211,153,.14);color:var(--mint)}

.tierd h3{color:#fff;margin:15px 0 .45em;font-size:1.14rem}

.tierd > p{color:#a9c4b6;font-size:.94rem;line-height:1.65}

.tierd-hi{background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.30)}

.qual{display:flex;gap:11px;align-items:flex-start;margin:0 0 18px;padding:14px 16px;
  border-radius:var(--r-sm);background:rgba(52,211,153,.10);border:1px solid rgba(52,211,153,.30);
  font-size:.9rem;line-height:1.5}

.paid .qual{color:#e4fbf1}

.qual svg{width:17px;height:17px;flex:0 0 17px;margin-top:3px;color:var(--mint)}

.olist{list-style:none;padding:0;margin:0}

.olist li{display:flex;gap:11px;align-items:flex-start;padding:7px 0;font-size:.93rem;
  color:#cfe3d9;line-height:1.55}

.olist svg{width:17px;height:17px;flex:0 0 17px;margin-top:4px;color:var(--mint)}

.need-head{font-size:1.16rem;color:#fff;margin:42px 0 .35em}

.need-sub{margin:0 0 20px;font-size:.95rem;max-width:62ch}

.paid .need-sub{color:#a9c4b6}

.needs-strip{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}

@media (min-width:1100px){.needs-strip{grid-template-columns:repeat(3,1fr);gap:0 34px}}

.needs-strip li{font-size:.92rem;color:#cfe3d9;padding:12px 0 12px 22px;position:relative;
  border-top:1px solid rgba(255,255,255,.14)}

.needs-strip li::before{content:"";position:absolute;left:0;top:1.15em;width:7px;height:7px;
  border-radius:2px;background:var(--mint)}

/* -- how it starts: three steps -------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}

.step{background:linear-gradient(180deg,var(--white) 0%,#fafcfb 100%);border:1px solid var(--hairline);
  border-radius:var(--r);padding:26px 24px;position:relative;overflow:hidden;
  box-shadow:0 1px 2px rgba(6,28,20,.045)}

.step-n{display:block;font-family:var(--serif);font-style:italic;font-size:.82rem;
  color:var(--emerald-ink);letter-spacing:.05em;margin-bottom:12px}

.step h3{margin:0 0 .4em;font-size:1.08rem}

.step p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.6}

/* -- responsive ------------------------------------------------ */
@media (max-width:1024px){
  .feat-row{grid-template-columns:repeat(2,1fr)}
  .cmp-row{grid-template-columns:minmax(112px,.9fr) 1fr 1fr 1.1fr}
  .cmp-cell{padding:14px 14px;font-size:.9rem}
}

@media (max-width:900px){
  .steps{grid-template-columns:1fr}
}

@media (max-width:860px){
  .hero-page{padding:60px 0 52px;min-height:0}
  .flag-grid{gap:18px;margin-top:26px}
  .flag-top .flag-note{margin-top:22px}
  .wr{grid-template-columns:1fr;gap:8px;padding:17px 2px}
  .flag-grid,.tiers,.needs-strip{grid-template-columns:1fr}
  .cmp{margin-top:34px}
  .cmp-row{grid-template-columns:1fr}
  .cmp-head{display:none}
  .cmp-row + .cmp-row{border-top:0}
  .cmp-lbl{font-family:var(--serif);font-weight:700;color:var(--forest);font-size:.92rem;
    background:linear-gradient(180deg,#f4f8f6,#eef4f2);border-top:1px solid var(--hairline)}
  .cmp-cell + .cmp-cell{border-top:1px solid var(--hairline)}
  .cmp-val::before{content:attr(data-col);display:block;font-family:var(--sans);font-style:italic;
    font-size:.76rem;color:var(--muted);margin-bottom:4px}
  .cmp-mac.cmp-val::before{color:var(--emerald-ink)}
  .paid{padding:64px 0}
  .paid-head{grid-template-columns:1fr;gap:4px}
  .need-head{margin-top:36px}
}

@media (max-width:620px){
  .feat-row{grid-template-columns:1fr;gap:14px}
  /* the nav skeleton's fixed widths are what set the mock's min-content, so
     they come down on phones - otherwise the frame cannot fit 390px */
  .bw-nav{gap:7px;padding:12px 14px}
  .bw-logo{width:52px}
  .bw-nav .l:nth-child(2){width:30px}
  .bw-nav .l:nth-child(3){width:34px}
  .bw-nav .l:nth-child(4){width:26px}
  .bw-nav .btn-mock{width:52px}
  .bw-hero{padding:18px 14px 16px}
  .bw-hero .b{width:74px}
  .bw-cards{grid-template-columns:1fr 1fr;padding:14px 14px 0}
  .bw-card:nth-child(3){display:none}
  .bw-foot{margin:14px 14px 0}
}

@media (max-width:560px){
  .hero-cta .btn,.cta-row .btn{width:100%}
  .chip{font-size:.83rem;padding:8px 14px}
}

@media (prefers-reduced-motion:reduce){
  .cmp-head .cmp-mac::before{animation:none !important}
  .chip:hover{transform:none !important}
}