/* Website development — page-specific sections (kit styles in service-page.css). */

/* Devices: real page strips inside minimal browser and phone frames. */
.sv-web-device{position:relative;display:block;color:inherit}
.sv-web-browser{position:relative;border-radius:12px;overflow:hidden;background:#141414;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 34px 70px -40px rgba(0,0,0,.55)}
.sv-web-chrome{display:grid;grid-template-columns:8px 8px 8px minmax(0,1fr) 42px;gap:6px;align-items:center;height:32px;padding:0 14px;background:#1c1c1c;border-bottom:1px solid rgba(255,255,255,.06)}
.sv-web-chrome i{width:8px;height:8px;border-radius:50%;background:#3b3b3b}
.sv-web-chrome span{justify-self:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:12px/1 var(--sans);color:#8e8e8e;padding:5px 14px;border-radius:6px;background:rgba(255,255,255,.05)}
.sv-web-screen{position:relative;overflow:hidden;aspect-ratio:16/10;background:#202020;isolation:isolate}
.sv-web-strip{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;will-change:transform}
.sv-web-phone{position:relative;padding:6px;border-radius:32px;background:#1a1a1a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 30px 60px -30px rgba(0,0,0,.6)}
.sv-web-phone .sv-web-screen{aspect-ratio:390/844;border-radius:26px}
.sv-web-device.is-pair .sv-web-phone{position:absolute;right:-4%;bottom:-11%;width:22%}
/* The real sticky add-to-cart bar of the page, shown once the page has scrolled past the button. */
.sv-web-bar{position:absolute;left:0;bottom:0;z-index:1;width:100%;height:auto;max-width:none;translate:0 102%;transition:translate .7s var(--ease)}
.sv-web-bar.is-on{translate:0 0}

/* Hero: one live store, desktop and phone scrolling together. */
.sv-web .sv-stage.sv-web-stage{width:min(1120px,100%);aspect-ratio:auto;overflow:visible;margin-top:clamp(36px,4vw,60px)}
.sv-web-hero{width:82%;margin-left:7%;padding-bottom:7%}
.sv-web-hero .sv-web-browser{background:#fff;box-shadow:0 0 0 1px rgba(13,13,13,.08),0 60px 110px -50px rgba(13,13,13,.5)}
.sv-web-hero .sv-web-chrome{background:#f3f3f3;border-bottom-color:#e4e4e4}
.sv-web-hero .sv-web-chrome i{background:#d5d5d5}
.sv-web-hero .sv-web-chrome span{color:#6f6f6f;background:#fff}
.sv-web-hero .sv-web-phone{background:#0d0d0d;box-shadow:0 40px 70px -26px rgba(13,13,13,.55)}
.sv-web-hero .sv-web-screen{background:#f4f4f2}
.sv-web-hero-cap{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;font:13px/1.4 var(--sans);color:#787878;margin:26px 0 44px}
.sv-web-hero-cap a{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* Without logos, the thesis hands over to the wall sooner. */
.sv-web .sv-thesis{padding-bottom:70px}
.sv-web .sv-statement{margin-bottom:0}

/* The work, working: seven live sites at different scales. */
.sv-web-wall{padding:110px var(--sv-pad) 210px}
.sv-web-head{text-align:center;margin-bottom:120px}
.sv-web-head h2{font-size:clamp(46px,6vw,96px);line-height:.96;margin:20px auto 28px}
.sv-web-head>p:last-child{font:16px/1.6 var(--display);color:var(--sv-soft);max-width:470px;margin:0 auto}
.sv-web-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;row-gap:140px;align-items:start}
.sv-web-item{margin:0;min-width:0}
.sv-web-item figcaption{display:grid;gap:5px;margin-top:24px}
.sv-web-item.is-pair figcaption{max-width:64%;margin-top:28px}
.sv-web-name{font:400 26px/1.05 var(--serif);letter-spacing:-.02em}
.sv-web-kind{font:13px/1.4 var(--sans);color:var(--sv-muted)}
.sv-web-kind i{font-style:normal;opacity:.6;margin:0 .2em}
.sv-web-links{display:flex;flex-wrap:wrap;gap:4px 16px;font:13px/1.5 var(--sans);margin-top:4px}
.sv-web-links a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;transition:opacity .3s}
.sv-web-links a:hover{opacity:.6}
.sv-web-w1{grid-column:1/8}
.sv-web-w2{grid-column:9/11;margin-top:110px}
.sv-web-w3{grid-column:11/13;margin-top:250px}
.sv-web-w4{grid-column:1/3}
.sv-web-w5{grid-column:3/5;margin-top:-120px}
.sv-web-w6{grid-column:6/13}
.sv-web-w7{grid-column:3/11;margin-top:-20px}
/* On the right edge the phone leans in from the left, and the caption moves right. */
.sv-web-w6 .sv-web-device.is-pair .sv-web-phone{right:auto;left:-4%}
.sv-web-w6 figcaption{margin-left:auto;text-align:right}
.sv-web-w6 .sv-web-links{justify-content:flex-end}
.sv-web-item .sv-web-browser,.sv-web-item .sv-web-phone{transition:box-shadow .4s var(--ease)}
.sv-web-item:hover .sv-web-browser,.sv-web-item:hover .sv-web-phone{box-shadow:0 0 0 1px rgba(255,255,255,.26),0 34px 70px -40px rgba(0,0,0,.55)}

/* One page does the selling: the Flick Edge product page follows the scroll. */
/* The pinned page ends inside an empty band, so the switch to the light act never touches it. */
.sv-web-pdp{padding-bottom:110px}
.sv-web-pdp-track{position:relative;height:290vh}
.sv-web-pdp-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;align-items:center;padding:0 var(--sv-pad)}
.sv-web-pdp-stage{grid-column:1/9}
.sv-web-pdp-stage .sv-web-phone{display:none}
.sv-web-pdp-copy{grid-column:9/13;padding:40px 0 0 12px}
.sv-web-pdp-copy h2{font-size:clamp(38px,3.8vw,58px);line-height:1;margin:16px 0 20px}
.sv-web-pdp-text{font:15px/1.6 var(--display);color:var(--sv-soft);max-width:420px}
.sv-web-notes{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--sv-line)}
.sv-web-notes li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;padding:14px 0;border-bottom:1px solid var(--sv-line);opacity:.3;transition:opacity .5s var(--ease)}
.sv-web-notes li.is-on{opacity:1}
.sv-web-notes span{font:12px/1.9 var(--sans);color:var(--sv-muted)}
.sv-web-notes h3{font-size:21px;line-height:1.15;letter-spacing:-.02em}
.sv-web-notes p{font:14px/1.5 var(--display);color:var(--sv-soft);margin-top:5px}
.sv-web-pdp-links{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:26px}

/* Two founders, in their words. */
.sv-web-voices{align-items:start;row-gap:0;padding-top:130px}
.sv-web-voices .sv-voice-media{grid-row:1/3}
.sv-web-voices blockquote{grid-column:8/13}
.sv-web-voices .sv-web-voice-2{grid-row:2;margin-top:48px;padding-top:40px;border-top:1px solid var(--sv-line)}
.sv-web-voices .sv-web-voice-2 p{font-size:clamp(21px,1.8vw,27px);line-height:1.25}
.sv-web-voices footer{flex-wrap:wrap;row-gap:10px}
.sv-web-voices .sv-link{white-space:nowrap}

/* Light act: start, questions, then one compact row naming the case studies still to come. */
.sv-web .sv-start{padding-bottom:40px}
.sv-web .sv-faq{padding-bottom:80px}
.sv-web .sv-web-next{padding:0 var(--sv-pad) 140px}
.sv-web-next>h2{font-size:clamp(22px,1.9vw,28px);line-height:1.1;margin-bottom:18px}
.sv-web-next .sv-needed-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sv-web-next .sv-needed-slot{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:16px;align-items:start;padding:16px;border:1px dashed color-mix(in srgb,currentColor 30%,transparent);border-radius:10px}
.sv-web-next .sv-needed-frame{display:contents}
/* A small empty browser window stands for the site still to be captured. */
.sv-web-next .sv-needed-frame:before{content:"";grid-column:1;grid-row:1/3;width:52px;aspect-ratio:16/10;border-radius:4px;border:1px solid color-mix(in srgb,currentColor 18%,transparent);background:linear-gradient(color-mix(in srgb,currentColor 14%,transparent),color-mix(in srgb,currentColor 14%,transparent)) top/100% 6px no-repeat,repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,currentColor 8%,transparent) 5px 6px)}
.sv-web-next .sv-needed-frame span{grid-column:2;grid-row:1;padding:0;text-align:left;font-size:11px;line-height:1.35;color:var(--sv-fg)}
.sv-web-next .sv-needed-slot figcaption{grid-column:2;grid-row:2;margin-top:6px}

@media(max-width:1100px){
 .sv-web-w2{grid-column:9/11;margin-top:80px}
 .sv-web-w3{grid-column:11/13;margin-top:200px}
 .sv-web-pdp-stage{grid-column:1/8}
 .sv-web-pdp-copy{grid-column:8/13}
}
@media(max-width:760px){
 .sv-web .sv-stage.sv-web-stage{aspect-ratio:auto;margin-top:34px}
 .sv-web-hero{width:86%;margin-left:2%;padding-bottom:14%}
 .sv-web-chrome{height:22px;grid-template-columns:5px 5px 5px minmax(0,1fr) 20px;gap:4px;padding:0 9px}
 .sv-web-chrome i{width:5px;height:5px}
 .sv-web-chrome span{font-size:9px;padding:3px 8px;border-radius:4px}
 .sv-web-browser{border-radius:8px}
 .sv-web-phone{padding:4px;border-radius:22px}
 .sv-web-phone .sv-web-screen{border-radius:18px}
 .sv-web-device.is-pair .sv-web-phone{width:32%;right:-6%;bottom:-20%}
 .sv-web-hero-cap{margin:22px 0 34px}
 .sv-web .sv-thesis{padding-bottom:40px}

 .sv-web-wall{padding:80px var(--sv-gutter) 120px}
 .sv-web-head{display:block;margin-bottom:56px}
 .sv-web-head h2{font-size:52px;margin:16px 0 20px}
 .sv-web-head>p:last-child{font-size:15px}
 .sv-web-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:72px}
 .sv-web-item.is-pair{grid-column:1/-1;margin-top:0}
 /* Pairs stay inside the gutter: a narrower browser, the phone on its edge. */
 .sv-web-item .sv-web-device.is-pair .sv-web-browser{width:88%}
 .sv-web-item .sv-web-device.is-pair .sv-web-phone{width:31%;right:0;bottom:-16%}
 .sv-web-w6 .sv-web-device.is-pair .sv-web-browser{margin-left:auto}
 .sv-web-w6 .sv-web-device.is-pair .sv-web-phone{left:0}
 .sv-web-item.is-pair figcaption{max-width:62%;margin-top:24px}
 .sv-web-w2,.sv-web-w4{grid-column:1;margin-top:0}
 .sv-web-w3,.sv-web-w5{grid-column:2;margin-top:64px}
 .sv-web-name{font-size:22px}
 .sv-web-links{gap:2px 12px}

 /* The product page on a phone, with the note it has reached right below it. */
 .sv-web-pdp{padding-bottom:0}
 .sv-web-pdp-track{height:auto}
 .sv-web-pdp-pin{position:static;height:auto;display:flex;flex-direction:column;align-items:stretch;padding:40px var(--sv-gutter) 120px}
 .sv-web-pdp-copy{display:contents}
 .sv-web-pdp-copy>.sv-label{order:1}
 .sv-web-pdp-copy>h2{order:2;font-size:40px}
 .sv-web-pdp-text{order:3}
 .sv-web-pdp-stage{order:4;width:62%;margin:44px auto 0}
 .sv-web-pdp-stage .sv-web-browser{display:none}
 .sv-web-pdp-stage .sv-web-phone{display:block}
 .sv-web-pdp .sv-web-device.is-pair .sv-web-phone{position:relative;right:auto;bottom:auto;width:100%}
 .sv-web-notes{order:5;display:grid;margin-top:30px;border-top:0}
 .sv-web-notes li{grid-area:1/1;padding:0;border:0;opacity:0;transition:opacity .6s var(--ease)}
 .sv-web-notes li.is-on{opacity:1}
 .sv-web-pdp-links{order:6}

 .sv-web-voices{padding-top:90px}
 .sv-web-voices .sv-web-voice-2{margin-top:40px;padding-top:32px}
 .sv-web-voices .sv-web-voice-2 p{font-size:21px}
 .sv-web .sv-faq{padding-bottom:64px}
 .sv-web .sv-web-next{padding:0 var(--sv-gutter) 96px}
 .sv-web-next .sv-needed-grid{grid-template-columns:1fr;gap:10px}
}
@media(prefers-reduced-motion:reduce){
 .sv-web-pdp-track{height:auto}
 .sv-web-pdp-pin{position:relative;height:auto;padding-top:80px;padding-bottom:160px}
 .sv-web-notes li{opacity:1}
 .sv-web-strip{will-change:auto}
}
@media(prefers-reduced-motion:reduce) and (max-width:760px){
 .sv-web-notes{display:block;border-top:1px solid var(--sv-line)}
 .sv-web-notes li{padding:14px 0;border-bottom:1px solid var(--sv-line)}
}