/* altimn — /services (Start here).
   SELF-CONTAINED: this page does NOT load notes.css. Tokens + base live here, so the
   services layout can evolve without dragging the Notes layout along with it.
   (Values mirror the homepage's warm-paper system — keep them in sync with default.php.) */
:root{
  --paper:#ead9bf; --paper-2:#d9c7a8; --ink:#1a1a1a;
  --soft:oklch(0.34 0.012 55); --dim:oklch(0.52 0.018 55); --line:oklch(0.72 0.022 60);
  --accent:#a48a41;
  --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
  --pad:clamp(40px,8vw,110px); --maxw:1200px;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
.br-m{display:none;}

/* ── hero band — full-bleed, edge to edge, like the homepage hero.
      object-position sits high (18%) so the TOP of the flat-lay (laptop, screen) survives
      the cover crop; the band is tall, and .sv below pulls up over its lower third — so the
      bottom of the image slides UNDER the content instead of being chopped off. ── */
/* site-chrome.css sets body{padding-top:70px} for the fixed bar, but the bar is really
   67px tall (18 + 30 logo + 18 + 1px border) — that 3px was a cream seam under the nav. */
body{padding-top:67px;}

/* …and the artwork itself carries a band of cream at its top edge, which reads as more gap
   (it's the same colour as the page). Crop it off so the picture sits flush to the nav. */
.sv-hero{position:relative;width:100%;margin:0;background:var(--paper);overflow:hidden;}
.sv-hero img{margin-top:calc(-1 * clamp(8px,2.2vw,40px));}
/* NO cropping: the flat-lay is a wide 2.33:1 composition — `object-fit: cover` at a fixed
   height blew it up and chopped the laptop off the top. Let it render at its natural ratio
   and let the CONTENT climb over its lower edge instead. */
/* opacity + a touch of desaturation: the art is a backdrop, not the subject — it shouldn't
   out-shout the headline sitting on top of it */
.sv-hero img{width:100%;height:auto;mix-blend-mode:multiply;opacity:.62;filter:saturate(.85);}
/* melt the bottom of the picture into the paper so the content lands on paper, not on art */
.sv-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;
  background:linear-gradient(to bottom,rgba(234,217,191,0) 0%,rgba(234,217,191,.7) 52%,var(--paper) 90%);}

/* negative top margin = the overlap. Content rides on top of the hero's fading lower edge. */
.sv{position:relative;z-index:1;max-width:1200px;margin:calc(-1 * clamp(280px,52vh,760px)) auto 0;
  padding:clamp(24px,4vw,44px) clamp(20px,5vw,40px) clamp(60px,10vh,120px);}

/* ── head ── */
/* full-width panel (aligned with the package cards), split into two columns so the copy keeps
   a readable measure instead of either stretching across it or leaving half of it empty. */
/* the headline now breaks to two lines, so it needs less width — the copy gets the surplus.
   (This ratio is intentionally NOT the .85fr/1fr used by the package cards below.) */
.sv-head{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;
  /* solid gold + light type — the same treatment as the homepage's gold sections (#s02/#s03/#s04) */
  background:var(--accent);color:#fff;border-radius:12px;
  padding:clamp(30px,4.5vw,56px) clamp(24px,4vw,48px);margin-bottom:clamp(28px,4vw,40px);}
.sv-head .sv-eyebrow{color:rgba(234,217,191,.75);}
.sv-head .sv-h1{color:var(--ink);}
.sv-head .sv-sub{color:rgba(255,255,255,.88);}
.sv-head .sv-sub em{color:#fff;font-weight:600;}
.sv-head .sv-sub2{color:rgba(255,255,255,.78);}
.sv-head .sv-head-more{color:#fff;border-bottom-color:rgba(255,255,255,.4);}
.sv-head .sv-head-more:hover{border-bottom-color:#fff;}
.sv-head .sv-head-sep{color:rgba(255,255,255,.5);opacity:1;}
.sv-eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 clamp(16px,2.2vw,22px);}
.sv-h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.5rem,6.2vw,4.2rem);line-height:1.04;letter-spacing:-.024em;margin:0 0 clamp(14px,1.6vw,20px);font-variation-settings:'opsz' 96;}
/* CJK sits on a full square body and is bold here — at the English size it reads much heavier.
   Drop it a step so both languages carry the same visual weight, not the same number. */
html[lang="zh-Hant"] .sv-h1{font-family:var(--sans);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.2;}
.sv-h1{margin-bottom:0;}
/* orientation lines — who this is / what I do, for visitors who never saw the homepage */
.sv-sub{color:var(--soft);margin:0 0 10px;max-width:62ch;font-size:1.06rem;line-height:1.55;}
.sv-sub em{font-style:normal;color:var(--ink);font-weight:500;}
.sv-sub2{color:var(--soft);margin:0 0 clamp(18px,2.4vw,24px);max-width:62ch;font-size:1.02rem;}
.sv-sub2 em{font-style:normal;color:#fff;font-weight:600;}
.sv-head-links{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0;}
.sv-head-sep{color:var(--accent);opacity:.5;}
.sv-head-more{display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  border-bottom:1px solid color-mix(in oklab,var(--accent) 40%,transparent);padding-bottom:3px;transition:border-color .3s;}
.sv-head-more:hover{border-bottom-color:var(--accent);}
.sv-head-more:hover .sv-arr{transform:translate(2px,-2px);}

/* ── method — the differentiator, stated once above the ladder ── */
/* it sits BELOW the package ladder now, so the breathing room goes on top */
.sv-method{margin:clamp(36px,5vw,60px) 0 0;padding:clamp(24px,3.2vw,38px) clamp(24px,4vw,44px);
  border:1px solid color-mix(in oklab,var(--accent) 35%,transparent);border-radius:12px;}
/* no character cap — these sit in the full 1200px box, and a 74ch cap left the right half
   of every paragraph empty. They fill the block now. */
.sv-method-line{font-family:var(--serif);font-size:clamp(1.12rem,1.6vw,1.4rem);line-height:1.5;color:var(--ink);margin:0 0 12px;}
html[lang="zh-Hant"] .sv-method-line{font-family:var(--sans);font-weight:400;font-size:clamp(1.02rem,1.4vw,1.18rem);}
.sv-method-line em{font-style:normal;font-weight:600;color:var(--accent);}
.sv-method-sub{font-size:.98rem;line-height:1.6;color:var(--soft);margin:0 0 20px;}
.sv-method-sub em{font-style:normal;font-weight:500;color:var(--ink);}
/* the payoff — echoes the homepage's "Not more discovery. Different decisions." */
.sv-method-pay{font-family:var(--serif);font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.4;color:var(--ink);
  margin:0 0 20px;padding-top:6px;}
html[lang="zh-Hant"] .sv-method-pay{font-family:var(--sans);font-weight:500;}
.sv-method-pay em{font-style:normal;color:var(--accent);font-weight:600;}
/* pushed to the right edge — it's a footnote to the block, not a next step */
/* smallest, quietest type on the page — it's a footnote, and it should look like one */
.sv-method-more{display:block;width:fit-content;margin:clamp(40px,5.5vw,64px) 0 0 auto;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);border-bottom:1px solid color-mix(in oklab,var(--accent) 28%,transparent);
  padding-bottom:3px;transition:border-color .3s,color .3s;}
.sv-method-more:hover{color:var(--accent);border-bottom-color:var(--accent);}
.sv-method-more:hover .sv-arr{transform:translate(2px,-2px);}

/* ── credibility strip — facts, in a row. NOT a bio: no photo, no headline, no prose.
      (The homepage #s04 does the narrative version; this must not become that.) ── */
.sv-cred{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 0;
  margin:clamp(20px,3vw,30px) 0 clamp(28px,4vw,44px);padding:0;}
.sv-cred li{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--soft);
  padding:0 clamp(12px,1.6vw,20px);border-left:1px solid color-mix(in oklab,var(--accent) 40%,transparent);}
.sv-cred li:first-child{padding-left:0;border-left:none;}
/* the last one is the proof that matters most on this page — let it carry the accent */
.sv-cred li:last-child{color:var(--accent);}
@media(max-width:760px){
  /* stacked + tiny .66rem mono read as "small text floating in space" on a phone: bump the
     size and pull the line-height in so the wrapping last item (the AI-agents line) sits tight. */
  .sv-cred{flex-direction:column;align-items:flex-start;gap:8px;}
  .sv-cred li{padding:0;border-left:none;font-size:.8rem;line-height:1.4;letter-spacing:.04em;}
}

/* ── package ladder ── */
.sv-list{display:flex;flex-direction:column;gap:clamp(20px,2.6vw,32px);}

.sv-pkg{scroll-margin-top:96px;                 /* sticky topbar clearance for #anchor links */
  border:1px solid color-mix(in oklab,var(--accent) 30%,transparent);border-radius:12px;
  padding:clamp(26px,3.4vw,44px) clamp(22px,3vw,40px);
  background:color-mix(in oklab,var(--accent) 6%,var(--paper));
  transition:border-color .35s,background .35s;}
.sv-pkg:hover{border-color:color-mix(in oklab,var(--accent) 55%,transparent);}
/* the flagship reads a shade warmer than the rest of the ladder */
.sv-pkg.is-featured{background:color-mix(in oklab,var(--accent) 13%,var(--paper));border-color:color-mix(in oklab,var(--accent) 45%,transparent);}
.sv-pkg.is-addon{border-style:dashed;background:transparent;}

/* [num + name] | [one-liner + "this is for you if"] — mirrors .sv-head's two columns */
.sv-pkg-head{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);
  align-items:start;margin-bottom:clamp(22px,2.6vw,30px);}
.sv-pkg-id{display:flex;align-items:center;gap:14px;margin-bottom:12px;}
.sv-num{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--accent);}
.sv-kicker{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper);background:var(--accent);border-radius:3px;padding:4px 9px;}
/* outlined, not filled — it's a property of the engagement, not a sales flag like .sv-kicker */
.sv-codesign{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);background:transparent;border:1px solid color-mix(in oklab,var(--accent) 55%,transparent);
  border-radius:3px;padding:3px 9px;}

.sv-name{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.15;letter-spacing:-.018em;margin:0 0 12px;font-variation-settings:'opsz' 48;}
html[lang="zh-Hant"] .sv-name{font-family:var(--sans);font-weight:700;letter-spacing:0;}
/* dropped a size — at 1.28rem these ran cramped against the name above them */
.sv-line{font-family:var(--serif);font-size:clamp(.98rem,1.2vw,1.08rem);line-height:1.5;color:var(--soft);margin:0;max-width:52ch;}
html[lang="zh-Hant"] .sv-line{font-family:var(--sans);font-weight:400;font-size:clamp(.94rem,1.1vw,1rem);}
/* when the one-liner sits under the name (left column), give it room to breathe */
.sv-pkg-head-l .sv-line{margin-top:14px;}
/* …and with the line gone from the right column, the "for you if" block starts at the top */
.sv-pkg-head-r > .sv-fit:first-child{margin-top:0;}
html[lang="zh-Hant"] .sv-line{font-family:var(--sans);font-weight:400;font-size:clamp(1rem,1.4vw,1.12rem);}

/* "This is for you if —" : the client's own situation, in serif, so it reads as recognition
   rather than as another spec list. Tick markers, not the up-arrow used by deliverables. */
.sv-fit{margin-top:clamp(18px,2.4vw,26px);}
.sv-fit-list{list-style:none;margin:0;padding:0;}
.sv-fit-list li{position:relative;padding-left:26px;margin:0 0 8px;
  font-family:var(--serif);font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.45;color:var(--ink);}
.sv-fit-list li:last-child{margin-bottom:0;}
html[lang="zh-Hant"] .sv-fit-list li{font-family:var(--sans);font-weight:400;font-size:clamp(.96rem,1.15vw,1.05rem);}
/* a plain dot — the ticks made this compete with the up-arrow markers in "What you get".
   Two decorated bullet styles in one card read as fussy. (Swap to a square by removing
   border-radius.) */
.sv-fit-list li::before{content:"";position:absolute;left:4px;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--accent);}

/* body: deliverables (left) + terms (right) */
/* SAME column ratio + gap as .sv-pkg-head — otherwise "What you get" wouldn't sit directly
   under "This is for you if". Keep these three values in sync if either changes. */
.sv-pkg-body{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);
  padding-top:clamp(22px,2.6vw,30px);border-top:1px solid color-mix(in oklab,var(--accent) 25%,transparent);}

.sv-lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#6b551f;margin:0 0 14px;}

.sv-items{list-style:none;margin:0;padding:0;}
.sv-items li{position:relative;padding-left:22px;margin:0 0 10px;font-size:.98rem;line-height:1.5;color:#26211a;}
.sv-items li:last-child{margin-bottom:0;}
/* up-tick marker — the house arrow always points up */
.sv-items li::before{content:"";position:absolute;left:2px;top:.58em;width:7px;height:7px;
  border-left:1.5px solid var(--accent);border-top:1.5px solid var(--accent);transform:rotate(45deg);}

/* no vertical rule — the horizontal one above already separates pitch from detail; a second
   divider between the columns just adds noise. The grid gap does the separating. */
.sv-terms{padding-right:clamp(20px,2.4vw,32px);}
.sv-price{font-family:var(--serif);font-weight:500;font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.35;color:var(--ink);margin:0 0 12px;}
/* launch offer: the old price is struck through and demoted; the new one carries the weight */
.sv-promo-tag{display:inline-block;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper);background:#9a4422;border-radius:3px;padding:4px 8px;margin:0 0 10px;}
.sv-price--now{color:var(--ink);margin:0 0 4px;}
.sv-price--was{font-size:.88rem;color:var(--dim);text-decoration:line-through;margin:0 0 2px;font-weight:400;}
.sv-price--usd{font-size:.88rem;color:var(--dim);margin:0 0 12px;font-weight:400;}
.sv-meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;line-height:1.7;color:var(--dim);margin:0 0 22px;}
/* a real button, not an underlined link — this is the page's primary action, and four
   underlined links down the column made the layout feel like scattered fragments.
   Dark, like the form's Send button: gold-on-gold cards would have swallowed it. */
.sv-cta-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:#EEEEEE;background:#222831;
  border-radius:4px;padding:12px 20px;transition:background .25s,transform .25s;}
.sv-cta-link .sv-arr{color:#FFD369;}
.sv-cta-link:hover{background:#393E46;transform:translateY(-1px);}
.sv-cta-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.sv-arr{display:inline-block;transition:transform .3s;}
.sv-cta-link:hover .sv-arr{transform:translate(2px,-2px);}

/* ══ shared contact form + enquiry dialog ══════════════════════════════════════════
   The form partial is bilingual via .en-t/.zh-t spans (same mechanism as the homepage).
   Here the language is fixed server-side by the lang-* class on <html>. */
.lang-en .zh-t{display:none;}
.lang-zh .en-t{display:none;}

.cf-dialog{border:none;padding:0;background:transparent;max-width:min(560px,92vw);width:100%;}
.cf-dialog::backdrop{background:rgba(26,18,6,.55);backdrop-filter:blur(3px);}
.cf-dialog-in{position:relative;background:var(--paper);border-radius:12px;
  padding:clamp(28px,4vw,44px) clamp(24px,4vw,40px);box-shadow:0 30px 70px rgba(26,18,6,.3);
  max-height:88vh;overflow-y:auto;}
.cf-dialog-x{position:absolute;top:12px;right:14px;background:none;border:none;font-size:1.6rem;line-height:1;
  color:var(--dim);cursor:pointer;padding:4px 8px;transition:color .25s;}
.cf-dialog-x:hover{color:var(--ink);}
.cf-dialog-eyebrow{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 10px;}
.cf-dialog-title{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15;color:var(--accent);margin:0 0 8px;}
html[lang="zh-Hant"] .cf-dialog-title{font-family:var(--sans);font-weight:700;}
.cf-dialog-lead{color:var(--soft);font-size:.98rem;margin:0 0 clamp(20px,3vw,28px);}

/* fields — mirrors the homepage form */
.cform{display:flex;flex-direction:column;}
.cf-hp{display:none !important;}
.cf-row{margin-bottom:clamp(20px,3vh,28px);}
.cf-label{display:block;font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;}
.cform input,.cform textarea{width:100%;font-family:var(--serif);font-size:1rem;color:var(--ink);background:transparent;
  border:none;border-bottom:1px solid rgba(34,40,49,.28);padding:8px 2px;transition:border-color .3s;}
.cform input:focus,.cform textarea:focus{outline:none;border-bottom-color:var(--ink);}
/* browsers paint autofilled fields a cold blue-white; only an inset shadow beats it */
.cform input:-webkit-autofill,.cform input:-webkit-autofill:hover,.cform input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--paper) inset;-webkit-text-fill-color:var(--ink);caret-color:var(--ink);
  transition:background-color 9999s ease-in-out 0s;}
.cform textarea{resize:vertical;min-height:80px;line-height:1.5;}

.cf-select{position:relative;}
.cf-select-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--serif);font-size:1rem;color:var(--ink);background:transparent;border:none;
  border-bottom:1px solid rgba(34,40,49,.28);padding:8px 2px;cursor:pointer;text-align:left;transition:border-color .3s;}
.cf-select.is-open .cf-select-trigger,.cf-select-trigger:focus-visible{outline:none;border-bottom-color:var(--ink);}
.cf-select-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cf-select-value.is-placeholder{color:var(--soft);}
.cf-select-arrow{flex-shrink:0;width:10px;height:7px;transition:transform .28s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a48a41' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain;}
.cf-select.is-open .cf-select-arrow{transform:rotate(180deg);}
.cf-select-list{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:30;margin:0;padding:6px 0;list-style:none;
  background:var(--paper);border:1px solid var(--line);box-shadow:0 14px 30px rgba(26,18,6,.18);
  max-height:262px;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-5px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;}
.cf-select.is-open .cf-select-list{opacity:1;visibility:visible;transform:translateY(0);}
.cf-select-opt{font-family:var(--serif);font-size:1rem;color:var(--ink);padding:9px 14px;cursor:pointer;transition:background .15s;}
.cf-select-opt.is-active{background:var(--paper-2);}
.cf-select-opt[aria-selected="true"]{color:var(--accent);}

/* 4px radius — matches the CTA buttons, the kicker badges and the cards */
.cf-submit{margin-top:6px;background:#222831;color:#EEEEEE;font-family:var(--serif);font-size:1.05rem;border:none;
  border-radius:4px;padding:12px 26px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  transition:background .3s,padding-right .3s;}
.cf-submit .cf-ar{color:#FFD369;}
.cf-submit:hover{background:#393E46;padding-right:34px;}
.cf-submit:disabled{opacity:.5;cursor:default;}
.cf-status{margin-top:14px;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;min-height:1em;color:rgba(34,40,49,.6);}
.cf-status.err{color:#9a4422;}
.cform.cf-sent .cf-row,.cform.cf-sent .cf-submit{display:none;}
.cform.cf-sent .cf-status{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:#EEEEEE;letter-spacing:0;
  background:var(--accent);padding:14px 18px;margin-top:0;}
.cf-direct{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--dim);margin:16px 0 0;}
.cf-direct-link{color:var(--accent);margin-left:8px;border-bottom:1px solid color-mix(in oklab,var(--accent) 40%,transparent);}

/* ── closing CTA ── */
.sv-close{text-align:center;margin-top:clamp(56px,8vh,96px);color:var(--accent);}
.sv-close-line{font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.45;color:var(--soft);margin:0 auto 26px;max-width:34ch;}
html[lang="zh-Hant"] .sv-close-line{font-family:var(--sans);}
.sv-close-line em{font-style:italic;color:var(--ink);}
html[lang="zh-Hant"] .sv-close-line em{font-style:normal;font-weight:700;}
.sv-close-cta{display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper);background:var(--accent);border-radius:4px;padding:13px 26px;transition:background .3s;}
.sv-close-cta:hover{background:#8d7537;}

/* ── tablet ── */
@media(max-width:900px){
  /* the desktop overlap is -52vh; on a narrow, tall viewport that yanks the content up over
     the hero (and can reach the nav). Scale it right down. */
  .sv{margin-top:calc(-1 * clamp(60px,12vh,150px));}
  .sv-head{grid-template-columns:1fr;gap:22px;}
  .sv-h1{margin-bottom:0;}
  .sv-pkg-head{grid-template-columns:1fr;gap:20px;}
  /* stacked: deliverables first, price last — read what it is before what it costs */
  .sv-pkg-body{grid-template-columns:1fr;gap:26px;}
  .sv-deliver{order:1;}
  .sv-terms{order:2;border-top:1px solid color-mix(in oklab,var(--accent) 25%,transparent);padding-right:0;padding-top:24px;}
}

/* ── mobile ── */
@media(max-width:600px){
  .br-m{display:inline;}
  .sv{margin-top:calc(-1 * clamp(30px,6vw,60px));}
  .sv-h1{font-size:clamp(2.5rem,10.5vw,3.2rem);line-height:1.1;}
  .sv-sub{font-size:1rem;}
  .sv-items li{font-size:.95rem;}
  .sv-meta{font-size:.68rem;}
  .sv-close-cta{width:100%;text-align:center;}
}