/* The lower half: what we do, how we work, contact, footer. Same language as the
   turnover and building sections: photoreal stills, glass panels, sienna accents. */

/* WHAT WE DO: pinned photo stage, six services */
.svx{position:relative;height:calc(var(--n,6)*80vh);background:#0f1822}
.svx-stage{position:sticky;top:0;height:100svh;overflow:hidden;color:var(--light);background:#0f1822}
.svx-img{position:absolute;inset:0;opacity:0;will-change:opacity}
.svx-img:first-child{opacity:1}
.svx-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:60% 50%;will-change:transform}
.svx-grade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 60% 80% at 0% 0%,rgba(10,17,25,.82) 0%,rgba(10,17,25,.45) 45%,rgba(10,17,25,0) 76%),
             linear-gradient(0deg,rgba(10,17,25,.6) 0%,rgba(10,17,25,0) 30%)}
.svx-panel{position:absolute;left:clamp(16px,5vw,80px);top:clamp(92px,13vh,128px);z-index:4;width:min(480px,40vw);padding:26px 28px 28px;
  background:rgba(11,19,28,.66);backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);
  border:1px solid rgba(241,235,224,.12);border-radius:4px;box-shadow:0 30px 80px rgba(4,9,15,.35)}
.svx-panel h2{margin-top:12px;font-family:var(--display);font-stretch:125%;font-weight:800;font-size:clamp(1.5rem,2.3vw,2.2rem);line-height:1.04;letter-spacing:-.01em}
.svx-intro{margin-top:12px;font-size:.95rem;line-height:1.6;color:rgba(241,235,224,.85);max-width:44ch}
.svx-list{list-style:none;margin:20px 0 0;padding:0;border-left:1px solid rgba(241,235,224,.18)}
.svx-list>li{position:relative;padding:8px 0 8px 16px;color:rgba(241,235,224,.45);transition:color .4s ease}
.svx-list>li::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:transparent;transition:background .4s}
.svx-list>li.done{color:rgba(241,235,224,.72)}
.svx-list>li.done::before{background:rgba(241,235,224,.5)}
.svx-list>li.on{color:var(--light)}
.svx-list>li.on::before{background:var(--sienna)}
.svx-n{display:inline-block;min-width:2.5em;font-family:var(--display);font-stretch:118%;font-weight:700;font-size:.66rem;letter-spacing:.16em;color:var(--sienna)}
.svx-name{font-family:var(--display);font-stretch:112%;font-weight:700;font-size:.98rem;letter-spacing:.01em}
.svx-d{max-height:0;overflow:hidden;opacity:0;transition:max-height .55s cubic-bezier(.16,1,.3,1),opacity .4s ease}
.svx-list>li.on .svx-d{max-height:16em;opacity:1}
.svx-d p{margin-top:8px;font-size:.92rem;line-height:1.55;color:rgba(241,235,224,.86);max-width:44ch}
.svx-d ul{list-style:none;margin:8px 0 2px;padding:0}
.svx-d ul li{position:relative;padding:2px 0 2px 16px;font-size:.84rem;line-height:1.45;color:rgba(241,235,224,.72)}
.svx-d ul li::before{content:"";position:absolute;left:0;top:.75em;width:8px;height:1.5px;background:var(--sienna)}
.svx-cta{margin-top:22px}
.svx-count{position:absolute;right:clamp(16px,5vw,80px);bottom:clamp(28px,6vh,60px);z-index:4;font-family:var(--display);font-stretch:125%;font-weight:800;
  color:var(--light);text-shadow:0 4px 30px rgba(8,14,22,.6);line-height:1}
.svx-now{font-size:clamp(3rem,8vw,6.5rem)}
.svx-of{font-size:1rem;opacity:.7;margin-left:8px}
.svx-segs{display:none}
.svx .tskip{top:clamp(92px,13vh,128px);bottom:auto;left:auto;right:clamp(16px,5vw,80px)}

/* HOW WE WORK */
.hw{background:var(--ink,#121b26);color:var(--light);padding:clamp(90px,14vh,160px) clamp(16px,6vw,96px)}
.hw-inner{max-width:1180px;margin:0 auto}
.hw-head h2{margin-top:14px;font-family:var(--display);font-stretch:125%;font-weight:800;font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.02;letter-spacing:-.01em;max-width:16ch}
.hw-body{position:relative;margin-top:clamp(40px,7vh,72px);padding-left:clamp(44px,7vw,100px)}
.hw-line{position:absolute;left:clamp(12px,2.5vw,34px);top:8px;bottom:8px;width:2px;background:rgba(241,235,224,.14)}
.hw-fill{position:absolute;inset:0;background:var(--sienna);transform-origin:top;transform:scaleY(0)}
.hw-steps{list-style:none;margin:0;padding:0}
.hw-step{display:grid;grid-template-columns:clamp(96px,13vw,180px) 1fr;gap:clamp(16px,3vw,40px);align-items:start;padding:clamp(26px,4vh,40px) 0;
  border-top:1px solid rgba(241,235,224,.1);opacity:.4;transform:translateY(14px);transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.hw-step:first-child{border-top:0}
.hw-step.in{opacity:1;transform:none}
.hw-n{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:clamp(3rem,7vw,5.6rem);line-height:.9;color:transparent;
  -webkit-text-stroke:1.5px rgba(241,235,224,.5);transition:-webkit-text-stroke-color .6s}
.hw-step.in .hw-n{-webkit-text-stroke-color:var(--sienna)}
.hw-t h3{font-family:var(--display);font-stretch:118%;font-weight:800;font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1.1}
.hw-t p{margin-top:10px;font-size:1rem;line-height:1.65;color:rgba(241,235,224,.82);max-width:52ch}
.hw-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,40px);margin-top:clamp(56px,9vh,96px);padding-top:clamp(28px,4vh,40px);border-top:1px solid rgba(241,235,224,.14)}
.hw-sn{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:clamp(2.6rem,5vw,4.2rem);line-height:1;color:var(--sienna)}
.hw-sl{margin-top:10px;font-family:var(--display);font-stretch:112%;font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(241,235,224,.7);max-width:22ch}

/* CONTACT */
.ct{background:#0f1822;color:var(--light);padding:clamp(80px,12vh,140px) clamp(16px,5vw,64px)}
.ct-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,4vw,64px);align-items:stretch}
.ct-media{position:relative;border-radius:4px;overflow:hidden;min-height:560px;background:#1a2532}
.ct-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.ct-cap{position:absolute;left:20px;right:20px;bottom:20px;padding:20px 24px;background:rgba(11,19,28,.66);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(241,235,224,.12);border-radius:4px}
.ct-cap p{margin-top:8px;font-size:1rem;line-height:1.55;color:rgba(241,235,224,.9);max-width:46ch}
.ct-side h2{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:clamp(2rem,4vw,3.4rem);line-height:1.02;letter-spacing:-.01em}
.ct-call{margin-top:24px}
.ct-k{display:block;font-family:var(--display);font-stretch:118%;font-weight:700;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sienna)}
.ct-no{display:inline-block;margin-top:6px;font-family:var(--display);font-stretch:125%;font-weight:800;font-size:clamp(1.8rem,3.2vw,2.6rem);color:var(--light);text-decoration:none;letter-spacing:.02em}
.ct-no:hover,.ct-no:focus-visible{color:var(--sienna)}
.ct-sub{display:block;margin-top:4px;font-size:.86rem;color:rgba(241,235,224,.6)}
.ct-kind{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 18px}
.ct-pill{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid rgba(241,235,224,.25);border-radius:999px;
  font-family:var(--display);font-stretch:118%;font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(241,235,224,.8);text-decoration:none;transition:background .25s,color .25s}
.ct-pill.on{background:var(--light);color:#141F2B;border-color:var(--light)}
.ct .formwrap{margin:0;padding:0;background:none;box-shadow:none;border:0;max-width:none}
.ct .enq label{color:rgba(241,235,224,.7)}
.ct .enq input,.ct .enq select{background:rgba(241,235,224,.06);border:1px solid rgba(241,235,224,.2);color:var(--light);border-radius:3px}
.ct .enq select option{color:#141F2B}
.ct .enq input:focus,.ct .enq select:focus{background:rgba(241,235,224,.1)}
.ct .enq .req{color:rgba(241,235,224,.6)}
.ct .enqnote{color:var(--light)}
.ct .enqnote.ok{color:#9fdcb0}
.ct .enqnote.warn{color:#f3ad85}
.ct .emailfall{margin-top:18px;text-align:left;font-size:.92rem;color:rgba(241,235,224,.72)}
.ct .emailfall a{color:var(--light)}
.ct .standing{margin:28px 0 0;max-width:none;padding:18px 0 0;border-top:1px solid rgba(241,235,224,.14);background:none}
.ct .standing .stk{color:var(--sienna)}
.ct .standing .sl{color:rgba(241,235,224,.9)}
.ct .standing .sv{color:rgba(241,235,224,.55)}

/* FOOTER */
.ft{padding:clamp(56px,9vh,96px) clamp(16px,6vw,96px) 40px}
.ft-top{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,56px)}
.ft .wordmark{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:clamp(1.8rem,3.4vw,2.8rem);letter-spacing:.04em;text-transform:uppercase;color:var(--light)}
.ft-brand p{margin-top:14px;font-size:.95rem;line-height:1.6;color:rgba(241,235,224,.7);max-width:34ch}
.ft-k{margin-bottom:10px;font-family:var(--display);font-stretch:118%;font-weight:700;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sienna)}
.ft-col a{display:block;padding:11px 0;font-size:.95rem;color:rgba(241,235,224,.82);text-decoration:none}
.ft-col a:hover,.ft-col a:focus-visible{color:var(--light)}
.ft .note{max-width:1180px;margin:clamp(40px,6vh,64px) auto 0;padding-top:22px;border-top:1px solid rgba(241,235,224,.12);font-size:.78rem;line-height:1.6;color:rgba(241,235,224,.5)}

/* entrance for headings, added by script so the page reads fine without it */
.lw-rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.lw-rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.hw-step,.lw-rv{opacity:1;transform:none;transition:none}}

/* desktop, short windows */
@media(min-width:761px) and (max-height:820px){
  .svx-intro{display:none}
  .svx-list>li{padding:6px 0 6px 16px}
  .svx-panel h2{font-size:clamp(1.35rem,2vw,1.9rem)}
}
/* phones and portrait tablets: the panel becomes a sheet at the bottom */
@media(max-width:760px),(max-aspect-ratio:4/5){
  .svx-panel{left:12px;right:12px;top:auto;bottom:52px;width:auto;max-width:560px;margin-inline:auto;padding:16px 18px 18px}
  .svx-panel h2,.svx-intro,.svx-cta,.svx-d ul{display:none}
  .svx-list{margin-top:10px;border-left:0}
  .svx-list>li{display:none;padding:0}
  .svx-list>li.on{display:block}
  .svx-list>li::before{display:none}
  .svx-name{font-size:1.15rem}
  .svx-grade{background:linear-gradient(0deg,rgba(10,17,25,.82) 0%,rgba(10,17,25,.35) 40%,rgba(10,17,25,0) 62%),linear-gradient(180deg,rgba(10,17,25,.55) 0%,rgba(10,17,25,0) 22%)}
  .svx-count{top:96px;bottom:auto;right:16px}
  .svx-now{font-size:2.6rem}
  .svx-segs{display:flex;gap:4px;position:absolute;left:16px;right:16px;bottom:26px;z-index:4}
  .svx-segs span{flex:1;height:3px;border-radius:2px;background:rgba(241,235,224,.22);transition:background .4s}
  .svx-segs span.done{background:rgba(241,235,224,.6)}
  .svx-segs span.on{background:var(--sienna)}
  .svx .tskip{top:104px;bottom:auto;left:16px;right:auto}
}
@media(max-width:900px){
  .ct-grid{grid-template-columns:1fr}
  .ct-media{min-height:0;width:100%;height:min(70svh,118vw)}
  .ft-top{grid-template-columns:1fr 1fr}
  .ft-brand{grid-column:1/-1}
}
@media(max-width:760px){
  .hw-body{padding-left:34px}
  .hw-line{left:8px}
  .hw-step{grid-template-columns:1fr;gap:6px}
  .hw-n{font-size:2.6rem}
  .hw-stats{grid-template-columns:1fr;gap:24px}
  .ft-top{grid-template-columns:1fr}
}
/* short screens: landscape phones */
@media(max-height:540px){
  .svx-panel{top:62px;bottom:auto;left:16px;right:auto;width:min(46vw,420px);margin:0;padding:12px 16px 14px}
  .svx-panel h2,.svx-intro,.svx-cta,.svx-d ul{display:none}
  .svx-list{margin-top:6px;border-left:0}
  .svx-list>li{display:none;padding:0}
  .svx-list>li.on{display:block}
  .svx-list>li::before{display:none}
  .svx-d p{font-size:.82rem}
  .svx-count{top:62px;bottom:auto;right:16px}
  .svx-now{font-size:2.2rem}
  .svx-segs{display:flex;gap:4px;position:absolute;left:16px;right:16px;bottom:14px;z-index:4}
  .svx-segs span{flex:1;height:3px;border-radius:2px;background:rgba(241,235,224,.22)}
  .svx-segs span.done{background:rgba(241,235,224,.6)}
  .svx-segs span.on{background:var(--sienna)}
  .svx .tskip{top:auto;bottom:30px;left:16px}
  .ct-media{height:80svh}
}

/* ---------- Phones, portrait tablets and landscape phones: built for a thumb ---------- */
.svm{display:none}
.ct-callw{display:none}
@media(max-width:900px),(max-height:540px){
  /* services: a native swipe carousel instead of a pinned scroll stage */
  .svm{display:none;padding:clamp(64px,10vh,96px) 0 clamp(56px,8vh,80px);color:var(--light)}
  .svm-head{padding:0 20px;max-width:640px}
  .svm-head h2{margin-top:12px;font-family:var(--display);font-stretch:125%;font-weight:800;font-size:clamp(1.8rem,7vw,2.6rem);line-height:1.03;letter-spacing:-.01em}
  .svm-head p{margin-top:14px;font-size:1rem;line-height:1.6;color:rgba(241,235,224,.82)}
  .svm-track{display:flex;gap:12px;margin-top:28px;padding:0 20px 4px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:20px;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none}
  .svm-track::-webkit-scrollbar{display:none}
  .svm-card{flex:0 0 min(84%,420px);scroll-snap-align:start;background:#16212d;border:1px solid rgba(241,235,224,.1);border-radius:6px;overflow:hidden}
  .svm-img{aspect-ratio:4/3;overflow:hidden;background:#1a2532}
  .svm-img img{width:100%;height:100%;object-fit:cover;display:block}
  .svm-body{padding:18px 18px 20px}
  .svm-body .svx-n{font-size:.75rem}
  .svm-body h3{margin-top:6px;font-family:var(--display);font-stretch:118%;font-weight:800;font-size:1.25rem;line-height:1.15}
  .svm-body p{margin-top:10px;font-size:.95rem;line-height:1.55;color:rgba(241,235,224,.84)}
  .svm-body ul{list-style:none;margin:12px 0 0;padding:0}
  .svm-body ul li{position:relative;padding:3px 0 3px 16px;font-size:.88rem;line-height:1.45;color:rgba(241,235,224,.72)}
  .svm-body ul li::before{content:"";position:absolute;left:0;top:.8em;width:8px;height:1.5px;background:var(--sienna)}
  .svm-dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
  .svm-dots span{width:8px;height:8px;border-radius:50%;background:rgba(241,235,224,.25);transition:background .3s,transform .3s}
  .svm-dots span.on{background:var(--sienna);transform:scale(1.25)}
  .svm-cta{padding:0 20px;margin-top:28px}
  .svm-cta .cta{display:flex;justify-content:center;align-items:center;min-height:52px;width:100%;max-width:420px}

  /* type floor: nothing under 12px in the new sections */
  .svm .tkick,.hw .tkick,.ct .tkick,.ct-k,.ft-k{font-size:.75rem}
  .hw-sl{font-size:.75rem}
  .ct-pill{font-size:.75rem;min-height:44px}
  .ct .enq label{font-size:.75rem}
  .ct .standing .stk{font-size:.75rem}
  .ct .standing .sv{font-size:.75rem}

  /* how we work: number beside the title, tighter rhythm */
  .hw{padding:clamp(64px,10vh,96px) 20px}
  .hw-head h2{font-size:clamp(1.8rem,7vw,2.6rem)}
  .hw-body{padding-left:30px;margin-top:32px}
  .hw-line{left:8px}
  .hw-step{grid-template-columns:auto 1fr;gap:14px;padding:22px 0}
  .hw-n{font-size:2.2rem;min-width:2.1ch}
  .hw-t h3{font-size:1.2rem}
  .hw-t p{font-size:.95rem;margin-top:6px}
  .hw-stats{grid-template-columns:repeat(3,1fr);gap:12px;margin-top:44px}
  .hw-sn{font-size:2.2rem}
  .hw-sl{letter-spacing:.06em;text-transform:none;font-stretch:100%;font-weight:600;line-height:1.35}

  /* contact: call first, as a real button; the photo closes the section */
  .ct{padding:clamp(64px,10vh,96px) 20px}
  .ct-grid{display:flex;flex-direction:column;gap:28px}
  .ct-side{order:1}
  .ct-media{order:2;height:auto;min-height:0;background:none;overflow:visible}
  .ct-media img{position:static;display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
  .ct-cap{position:static;margin-top:12px;padding:16px 18px}
  .ct-side h2{font-size:clamp(1.9rem,8vw,2.8rem)}
  .ct-no{display:flex;align-items:center;justify-content:center;gap:.35em;width:100%;min-height:56px;margin-top:10px;padding:0 16px;
    background:var(--sienna);color:var(--light);border-radius:3px;font-size:1.25rem;letter-spacing:.04em}
  .ct-no:hover,.ct-no:focus-visible{color:var(--light);filter:brightness(1.08)}
  .ct-callw{display:inline}
  .ct-sub{text-align:center}
  .ct .enq .sub .cta{width:100%;min-height:52px}
  .ct .standing ul{grid-template-columns:1fr}

  /* footer: two columns of links, big enough to tap */
  .ft{padding:56px 20px 32px}
  .ft-top{grid-template-columns:1fr 1fr;gap:24px 16px}
  .ft-brand{grid-column:1/-1}
  .ft-col a{padding:11px 0;font-size:.95rem}
}
/* landscape phones: wider cards, shorter photos */
@media(max-height:540px) and (orientation:landscape){
  .svm-card{flex-basis:min(46%,420px)}
  .svm-img{aspect-ratio:16/9}
  .ct-media img{aspect-ratio:16/9}
}
@media(max-width:360px){
  .ft-top{grid-template-columns:1fr}
  .hw-stats{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .hw-sn{font-size:1.9rem}
}

/* ---------- Every screen: type floor and touch sizes for the new sections ---------- */
.svx .tkick,.svm .tkick,.hw .tkick,.ct .tkick,.ct-k,.ft-k,.hw-sl,.ct-pill,.ct .enq label,.ct .standing .stk,.ct .standing .sv,.svx-n,.svx .tskip{font-size:.75rem}
.ct-pill{min-height:44px}
.svx .tskip{display:inline-flex;align-items:center;min-height:44px}
.ct-no{display:inline-flex;align-items:center;min-height:48px}
.ct .emailfall a{display:inline-flex;align-items:center;min-height:44px}
/* iOS draws a bare select at its own small height; take over its look so it is a full 48px field */
.ct .enq select{-webkit-appearance:none;appearance:none;min-height:48px;padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F1EBE0' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px}
@media(max-width:900px),(max-height:540px){
  .ct-no{display:flex;width:100%;min-height:56px}
}

/* ---------- Phones: keep the layered photo stage, built around a thumb ---------- */
.svx-wipe{display:none}
@media(max-width:900px),(max-height:540px){
  .svx{height:calc((var(--n,6) + 1)*58vh)}
  .svx-stage{touch-action:pan-y}
}
@media(max-width:760px),(max-aspect-ratio:4/5),(max-height:540px){
  .svx-wipe{display:block;position:absolute;top:0;bottom:0;z-index:3;width:2px;margin-left:-1px;background:var(--sienna);opacity:0;
    box-shadow:0 0 0 1px rgba(196,80,26,.25),0 0 22px rgba(196,80,26,.65);transition:opacity .3s;pointer-events:none}
  .svx-panel{max-height:40svh;overflow:hidden}
  .svx-list>li.on{animation:svxIn .45s cubic-bezier(.16,1,.3,1)}
  .svx-count{transition:opacity .4s}
  .svx.is-intro .svx-panel h2{display:block;margin-top:8px;font-size:clamp(1.4rem,6.4vw,1.9rem)}
  .svx.is-intro .svx-list{display:none}
  .svx.is-intro .svx-count{opacity:0}
  .svx-hint{display:block}
}
@media(max-width:760px),(max-aspect-ratio:4/5){
  .svx.is-intro .svx-intro{display:block;margin-top:10px;font-size:.92rem}
}
@keyframes svxIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.svx-hint{display:none;margin-top:10px;font-family:var(--display);font-stretch:112%;font-weight:700;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(241,235,224,.6)}
.svx:not(.is-intro) .svx-hint{display:none}
/* people who ask their phone for less motion get the plain swipe carousel instead */
@media(prefers-reduced-motion:reduce){
  @media(max-width:900px),(max-height:540px){
    .svx{height:auto}
    .svx-stage{display:none}
    .svm{display:block}
  }
}
@media(max-height:620px){.svx.is-intro .svx-intro{display:none}}
@media(max-width:760px),(max-aspect-ratio:4/5),(max-height:540px){
  .svx.is-intro .svx-hint{display:block}
  .svx .tskip{padding:0 12px;background:rgba(11,19,28,.6);border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--light)}
}
@media(max-height:540px){.svx.is-intro .svx-panel{max-height:calc(100svh - 110px)}.svx.is-intro .svx-panel h2{font-size:1.15rem;margin-top:6px}.svx-hint{margin-top:6px}}

/* phones: a slow pan across each photo as the layers change, set by script */
@media(max-width:760px),(max-aspect-ratio:4/5),(max-height:540px){
  .svx-img img{object-position:calc(25% + var(--pan,.5)*50%) 50%;transform-origin:calc(25% + var(--pan,.5)*50%) 50%}
}

/* ---------- Desktop, 2026-10-20: the caption sits on the photo, option 1 ----------
   The panel box goes. The section title sits top left and is read once; the current
   service sits low on the photo, large, with one line under it. A thin rail on the
   right shows where you are. Phones keep their bottom sheet, set above. */
@media (min-width:761px) and (min-aspect-ratio:4/5) and (min-height:541px){
  .svx-panel{inset:0;left:0;top:0;width:auto;max-width:none;padding:0;background:none;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}
  .svx-panel>*{pointer-events:auto}
  .svx-panel>.tkick{position:absolute;left:clamp(24px,5vw,80px);top:clamp(92px,13vh,128px)}
  .svx-panel h2{position:absolute;left:clamp(24px,5vw,80px);top:calc(clamp(92px,13vh,128px) + 22px);max-width:24ch;margin:0;font-size:clamp(1.25rem,1.8vw,1.75rem)}
  .svx-intro{display:none}
  .svx-list{position:absolute;left:clamp(24px,5vw,80px);right:max(30vw,180px);bottom:calc(clamp(28px,6vh,60px) + 80px);margin:0;border-left:0}
  .svx-list>li{display:none;padding:0}
  .svx-list>li::before{display:none}
  .svx-list>li.on{display:block;animation:svxIn .5s cubic-bezier(.16,1,.3,1)}
  .svx-list .svx-n{display:block;margin-bottom:12px}
  .svx-name{display:block;font-stretch:125%;font-weight:800;font-size:clamp(2.2rem,4.4vw,4.2rem);line-height:1;letter-spacing:-.015em;color:var(--light)}
  .svx-d{max-height:none;opacity:1;overflow:visible}
  .svx-d p{margin-top:14px;font-size:clamp(1.05rem,1.3vw,1.3rem);line-height:1.45;max-width:40ch;color:rgba(241,235,224,.92)}
  .svx-d ul{display:none}
  .svx-cta{position:absolute;left:clamp(24px,5vw,80px);bottom:clamp(28px,6vh,60px);margin:0}
  .svx-grade{background:linear-gradient(0deg,rgba(10,17,25,.86) 0%,rgba(10,17,25,.45) 40%,rgba(10,17,25,0) 64%),linear-gradient(180deg,rgba(10,17,25,.62) 0%,rgba(10,17,25,0) 30%)}
  .svx-segs{display:flex;flex-direction:column;gap:6px;position:absolute;right:clamp(16px,2.4vw,36px);top:50%;transform:translateY(-50%);z-index:4}
  .svx-segs span{width:3px;height:22px;border-radius:2px;background:rgba(241,235,224,.25);transition:background .4s,height .4s}
  .svx-segs span.done{background:rgba(241,235,224,.6)}
  .svx-segs span.on{background:var(--sienna);height:38px}
}

/* ---------- How we work, 2026-10-20: the job schedule ----------
   Four bars on a job board, in order, not to scale. A playhead sweeps across with the
   scroll and fills each bar as it passes. Replaces the numbered list and line. */
.hs{--x:0%;margin-top:clamp(40px,7vh,72px)}
.hs-head,.hs-row{display:grid;grid-template-columns:minmax(220px,34%) 1fr;gap:clamp(16px,3vw,48px)}
.hs-head{padding:0 0 12px;border-bottom:1px solid rgba(241,235,224,.18);font-family:var(--display);font-stretch:118%;font-weight:700;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(241,235,224,.5)}
.hs-head>span:last-child{display:flex;justify-content:space-between}
.hs-rows{list-style:none;margin:0;padding:0}
.hs-row{align-items:center;padding:clamp(22px,3.6vh,36px) 0;border-bottom:1px solid rgba(241,235,224,.1)}
.hs-n{display:block;margin-bottom:8px;font-family:var(--display);font-stretch:118%;font-weight:700;font-size:.75rem;letter-spacing:.16em;color:var(--sienna)}
.hs-l h3{font-family:var(--display);font-stretch:118%;font-weight:800;font-size:clamp(1.2rem,1.9vw,1.6rem);line-height:1.1;color:rgba(241,235,224,.5);transition:color .4s}
.hs-row.now .hs-l h3,.hs-row.done .hs-l h3{color:var(--light)}
.hs-l p{margin-top:8px;font-size:.95rem;line-height:1.55;color:rgba(241,235,224,.72);max-width:44ch}
.hs-track{position:relative;height:46px;border-left:1px solid rgba(241,235,224,.22);border-right:1px solid rgba(241,235,224,.22);
  background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),rgba(241,235,224,.08) calc(10% - 1px),rgba(241,235,224,.08) 10%)}
.hs-bar{position:absolute;top:9px;bottom:9px;left:calc(var(--s)*1%);width:calc(var(--w)*1%);border-radius:2px;background:rgba(241,235,224,.08);box-shadow:inset 0 0 0 1px rgba(241,235,224,.2);overflow:hidden}
.hs-bar i{position:absolute;inset:0;background:var(--sienna);transform-origin:left center;transform:scaleX(var(--f,0))}
.hs-track::after{content:"";position:absolute;top:-8px;bottom:-8px;left:var(--x);width:2px;margin-left:-1px;background:var(--light);opacity:.85;box-shadow:0 0 12px rgba(241,235,224,.35)}
.hs-row.done .hs-bar{box-shadow:inset 0 0 0 1px var(--sienna)}
@media(max-width:760px){
  .hs-head{grid-template-columns:1fr}
  .hs-head>span:first-child{display:none}
  .hs-row{grid-template-columns:1fr;gap:14px;padding:22px 0}
  .hs-l h3{font-size:1.2rem}
  .hs-l p{font-size:.95rem;margin-top:6px}
  .hs-track{height:34px}
  .hs-bar{top:7px;bottom:7px}
}
@media(prefers-reduced-motion:reduce){.hs-track::after{display:none}}

/* 2026-10-20: footer socials and base line */
.ft-social{margin-top:24px}
.ft-ig{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 20px;border:1px solid rgba(241,235,224,.28);border-radius:999px;color:var(--light);text-decoration:none;font-family:var(--display);font-stretch:112%;font-weight:700;font-size:.85rem;letter-spacing:.06em;transition:border-color .3s,background .3s}
.ft-ig .ft-h{font-family:var(--text);font-stretch:100%;font-weight:400;letter-spacing:0;color:rgba(241,235,224,.7)}
.ft-ig:hover,.ft-ig:focus-visible{border-color:var(--sienna);background:rgba(196,80,26,.12)}
.ft-base{max-width:1180px;margin:clamp(40px,6vh,64px) auto 0;padding-top:22px;border-top:1px solid rgba(241,235,224,.12);display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;font-size:.8rem;line-height:1.6;color:rgba(241,235,224,.55)}
.ft-base a{color:rgba(241,235,224,.75);text-decoration:none;margin-left:20px}
.ft-base a:first-child{margin-left:0}
.ft-base a:hover,.ft-base a:focus-visible{color:var(--light)}
@media(max-width:760px){.ft-base{flex-direction:column;gap:6px}.ft-base a{display:inline-block;padding:10px 0}}