/* /services/: choosing what to build. The page reorders itself around the visitor's problem. */

body[data-page="services"]{--sv-line:var(--color-border);--sv-hair:var(--color-hair);--sv-ink:var(--color-meta);--sv-hi:var(--signal-cyan);--sv-tile:var(--color-tile);--sv-wash:rgba(119,245,255,.07)}
.sv{overflow-x:clip}
.sv :is(h2,h3){font-family:"Space Grotesk",var(--font-display)}

/* ---------- hero: the question, and the work to judge it by ---------- */
.sv-hero{padding-block:clamp(24px,5vw,80px) clamp(44px,7vw,96px)}
.sv-hero__grid{display:grid;gap:clamp(32px,5vw,64px)}
body[data-page="services"] .sv-hero .section-title{margin:18px 0 0;line-height:.98;font-size:clamp(2.6rem,1.7rem + 3.4vw,4.1rem)}
.sv-hero .section-title em{font-style:normal;color:var(--sv-hi)}
.sv-hero__deck{margin:20px 0 0;max-width:44ch;color:var(--color-body);font-size:clamp(1.02rem,.95rem + .35vw,1.2rem);line-height:1.6}
.sv-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:28px}

.sv-shelf{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sv-shelf a{display:block;color:inherit;text-decoration:none;border-radius:12px}
.sv-shelf__img{display:block;overflow:hidden;border:1px solid var(--sv-line);border-radius:12px;background:#000}
.sv-shelf__img :is(img,video){display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;transition:transform .7s var(--ease-out)}
.sv-shelf li:nth-child(3) img{object-position:62% 50%}
.sv-shelf a:is(:hover,:focus-visible) .sv-shelf__img :is(img,video){transform:scale(1.04)}
.sv-shelf__label{display:block;margin-top:10px;font-size:14px;line-height:1.45;color:var(--color-text-muted)}
.sv-shelf__label b{display:block;margin-bottom:3px;font:600 1.06rem/1.25 "Space Grotesk",var(--font-display);letter-spacing:-.01em;color:var(--color-text)}
.sv-shelf__item--lead .sv-shelf__label b{font-size:clamp(1.15rem,1rem + .6vw,1.45rem)}
/* Phone: the lead piece full width, the other three as rows you can read without zooming. */
.sv-shelf__item:not(.sv-shelf__item--lead) a{display:grid;grid-template-columns:clamp(116px,34vw,170px) minmax(0,1fr);gap:14px;align-items:center;padding-top:12px;border-top:1px solid var(--sv-hair)}
.sv-shelf__item:not(.sv-shelf__item--lead) .sv-shelf__label{margin-top:0}
.sv-shelf__item:not(.sv-shelf__item--lead) .sv-shelf__img{border-radius:8px}
@media (min-width:700px) and (max-width:999px){
  .sv-shelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .sv-shelf__item--lead{grid-column:1 / -1}
  .sv-shelf__item:not(.sv-shelf__item--lead) a{display:block;padding-top:0;border-top:0}
  .sv-shelf__item:not(.sv-shelf__item--lead) .sv-shelf__label{margin-top:10px}
}
@media (min-width:1000px){
  .sv-hero__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}
  .sv-shelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 18px}
  .sv-shelf__item--lead{grid-column:1 / -1}
  .sv-shelf__item:not(.sv-shelf__item--lead) a{display:block;padding-top:0;border-top:0}
  .sv-shelf__item:not(.sv-shelf__item--lead) .sv-shelf__label{margin-top:10px;font-size:13.5px}
}
html.motion-boot .sv-shelf{visibility:hidden}

/* ---------- which one is it: the problems on one side, the offers on the other ---------- */
.sv-pick{position:relative;padding-block:clamp(52px,8vw,112px);border-top:1px solid var(--sv-line);background:linear-gradient(180deg,var(--color-surface-2),var(--color-bg) 70%)}
.sv-pick__grid{display:grid;gap:clamp(32px,5vw,72px)}
.sv-pick .section-title{margin:14px 0 0}
.sv-pick__lead{margin:16px 0 0;max-width:40ch;color:var(--color-body);line-height:1.6}
.sv-problems{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--sv-line)}
.sv-problem{position:relative;display:flex;align-items:center;gap:14px;min-height:60px;padding:12px 10px 12px 26px;border-bottom:1px solid var(--sv-line);color:var(--color-text);text-decoration:none;font:500 clamp(1rem,.94rem + .3vw,1.16rem)/1.35 "Space Grotesk",var(--font-display);letter-spacing:-.005em;isolation:isolate}
.sv-problem span{flex:1}
.sv-problem::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sv-wash);box-shadow:inset 2px 0 0 var(--sv-hi);opacity:0;transition:opacity .35s var(--ease-out)}
.sv-problem::after{content:"→";flex:none;font:500 14px/1 "JetBrains Mono",var(--font-mono);color:var(--sv-ink);transition:transform .3s var(--ease-out)}
.sv-problem:is(:hover,:focus-visible)::after{transform:translateX(4px)}
.sv-problem:hover::before{opacity:.5}
.sv-problem[aria-pressed="true"]::before{opacity:1}
.sv-problem[aria-pressed="true"]::after{transform:rotate(90deg)}
.sv-problem i{position:absolute;left:8px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--sv-hi);opacity:0;transform:scale(.4);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
.sv-problem[aria-pressed="true"] i{opacity:1;transform:none}
.sv-pick__status{min-height:1.5em;margin:14px 0 0;font:500 13px/1.5 "JetBrains Mono",var(--font-mono);color:var(--sv-hi)}
.sv-pick__else{margin:6px 0 0;color:var(--color-text-muted);font-size:15px}
@media (min-width:1000px){
  .sv-pick__grid{grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr);align-items:start}
  .sv-pick__sticky{position:sticky;top:88px}
}

.sv-offers{scroll-margin-top:88px}
.sv-offers__head{display:flex;justify-content:space-between;gap:16px;margin:0;padding:0 0 12px;border-bottom:1px solid var(--sv-line);font:500 12px/1.4 "JetBrains Mono",var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sv-ink)}
.sv-offer-list{list-style:none;margin:0;padding:0}
.sv-offer{position:relative;padding:26px 0 30px;border-bottom:1px solid var(--sv-line);scroll-margin-top:88px}
.sv-offer::before{content:"";position:absolute;left:-14px;top:22px;bottom:26px;width:2px;background:var(--sv-hi);opacity:0;transform:scaleY(.3);transform-origin:50% 0;transition:opacity .4s var(--ease-out),transform .5s var(--ease-out)}
.sv-offer.is-match::before{opacity:1;transform:none}
.sv-offer__top{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:4px 12px;align-items:start}
.sv-offer__num{padding-top:.5em;font:500 12px/1 "JetBrains Mono",var(--font-mono);color:var(--sv-ink)}
.sv-offer__name{margin:0;font:600 clamp(1.35rem,1.12rem + 1vw,2rem)/1.08 "Space Grotesk",var(--font-display);letter-spacing:-.025em;color:var(--color-text);text-wrap:balance}
.sv-offer__price{margin:0;text-align:right;white-space:nowrap;font:500 12px/1.3 "JetBrains Mono",var(--font-mono);color:var(--sv-ink)}
.sv-offer__price b{display:block;margin-top:2px;font:600 clamp(1.35rem,1.12rem + 1vw,2rem)/1 "Space Grotesk",var(--font-display);letter-spacing:-.025em;color:var(--color-text)}
.sv-offer--day .sv-offer__price b{display:inline}
.sv-offer__line{grid-column:2 / -1;margin:10px 0 0;max-width:58ch;color:var(--color-body);line-height:1.6}
.sv-offer[data-fit] .sv-offer__name::after{display:inline-block;margin-left:10px;padding:4px 7px;vertical-align:.3em;border:1px solid rgba(119,245,255,.45);font:600 12px/1 "JetBrains Mono",var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sv-hi)}
.sv-offer[data-fit="best"] .sv-offer__name::after{content:"your fit"}
.sv-offer[data-fit="also"] .sv-offer__name::after{content:"also"}
.sv-offer__toggle{display:none}
.sv-offer.is-folded .sv-offer__toggle{grid-column:2 / -1;justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:4px;padding:0;border:0;background:none;font:600 14px/1 "JetBrains Mono",var(--font-mono);color:var(--color-accent);cursor:pointer}
.sv-offer.is-folded .sv-offer__toggle::after{content:"↓"}
.sv-offer.is-folded .sv-offer__body{display:none}
.sv-offer.is-folded{padding-block:18px 14px}

.sv-offer__body{display:grid;gap:20px;margin-top:22px;padding-left:42px}
.sv-offer__fig{position:relative;margin:0}
.sv-offer__fig img,.sv-offer__fig>video{display:block;width:100%;height:auto;border:1px solid var(--sv-line);border-radius:10px;background:#000}
.sv-offer__fig>video{aspect-ratio:16/10;object-fit:cover}
.sv-offer__fig figcaption{margin-top:9px;font:400 13px/1.55 "JetBrains Mono",var(--font-mono);color:var(--color-text-muted)}
.sv-offer__fig figcaption a{color:var(--color-accent)}
.sv-fig-3d__page{position:absolute;right:10px;top:10px;width:38%;max-width:220px;padding:4px;border:1px solid var(--sv-line);border-radius:8px;background:rgba(5,7,10,.88);box-shadow:var(--shadow-md)}
.sv-fig-3d__page img{border:0;border-radius:5px}
.sv-fig-pages__grid{list-style:none;margin:0;padding:10px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border:1px solid var(--sv-line);border-radius:10px;background:var(--sv-tile)}
.sv-fig-pages__grid img{border-radius:4px;border-color:var(--sv-hair)}
.sv-fig-ledger dl{margin:0;padding:6px 16px;border:1px solid var(--sv-line);border-radius:10px;background:var(--sv-tile)}
.sv-fig-ledger dl>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--sv-hair)}
.sv-fig-ledger dl>div:last-child{border-bottom:0}
.sv-fig-ledger dt{font:500 13px/1.45 "JetBrains Mono",var(--font-mono);color:var(--color-text-muted)}
.sv-fig-ledger dd{margin:0;grid-column:1 / -1;font:600 14px/1.45 "JetBrains Mono",var(--font-mono);color:var(--color-text)}
.sv-fig-ledger dd.is-zero{grid-column:2;grid-row:1;text-align:right}
.sv-fig-ledger dd.is-zero{font:600 clamp(1.4rem,1.2rem + .8vw,1.9rem)/1 "Space Grotesk",var(--font-display);color:var(--color-success)}
.sv-offer__gets{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sv-offer__gets li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;color:var(--color-text);line-height:1.5}
.sv-offer__gets li::before{content:"";width:8px;height:8px;margin-top:.55em;border:1.5px solid var(--sv-hi);transform:rotate(45deg)}
.sv-offer__proof{margin:0;max-width:60ch;color:var(--color-body);font-size:15.5px;line-height:1.6}
.sv-offer__proof a,.sv-terms a:not(.link-mono){color:var(--color-accent)}
.sv-offer__more{justify-self:start}
@media (max-width:520px){
  .sv-offer__top{grid-template-columns:24px minmax(0,1fr) auto;gap:4px 10px}
  .sv-offer__body{padding-left:0}
  .sv-offer::before{left:-10px}
}
@media (min-width:1180px){
  .sv-offer__body{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);column-gap:28px;align-items:start}
  .sv-offer__fig{grid-column:1;grid-row:1 / span 3}
  .sv-offer__body> :not(.sv-offer__fig){grid-column:2}
}
.sv-offers__reset{margin:18px 0 0}
.sv-offers__reset button{padding:0;border:0;background:none}

/* ---------- terms ---------- */
.sv-terms{padding-block:clamp(52px,8vw,104px);border-top:1px solid var(--sv-line)}
.sv-terms__grid{display:grid;gap:28px}
.sv-terms .section-title{margin:14px 0 0}
.sv-terms__list{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--sv-line)}
.sv-terms__list li{padding:18px 0;border-bottom:1px solid var(--sv-line);color:var(--color-body);line-height:1.6}
.sv-terms__list b{display:block;margin-bottom:4px;font:600 1.12rem/1.3 "Space Grotesk",var(--font-display);color:var(--color-text)}
.sv-terms__list .link-mono{margin-left:4px}
.sv-terms__why{margin:0;max-width:62ch;color:var(--color-text-muted);line-height:1.7}
@media (min-width:1000px){
  .sv-terms__grid{grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr);column-gap:clamp(32px,5vw,72px)}
  .sv-terms__head{grid-row:1 / span 2}
  .sv-terms__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;border-top:0}
  .sv-terms__list li{border-top:1px solid var(--sv-line);border-bottom:0}
}

@media (prefers-reduced-motion:reduce){
  .sv-shelf__img :is(img,video),.sv-problem::before,.sv-problem::after,.sv-problem i,.sv-offer::before{transition:none}
}