/* Shared styling for the pages that hang off the front page: the portfolio and
   the six service pages. Same palette, same fonts, no intro animation. */
@font-face{font-family:'Nohemi';src:url('../fonts/Nohemi-ExtraLight.woff2') format('woff2');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Nohemi';src:url('../fonts/Nohemi-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Nohemi';src:url('../fonts/Nohemi-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Nohemi';src:url('../fonts/Nohemi-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --paper:#FBFAF8; --card:#FFFFFF; --ink:#17293C;
  --orange:#B0764E; --gold:#D3A76A; --navy:#22415C; --brown:#6F5849; --blue:#456485;
  --green:#54715B; --sage:#7E9481;
  --line:rgba(23,41,60,.08);
  --shadow:0 18px 50px -20px rgba(23,41,60,.22), 0 2px 8px rgba(23,41,60,.05);
  --pad:28px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden;overflow-anchor:none;scroll-behavior:auto}
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
body{background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}

/* ---------- arriving on the page ----------
   A sheet of paper covers the window and lifts away, and the masthead and the opening
   block come up behind it. Pure CSS, no JS: a script-driven version would leave a
   blank page if anything ever went wrong with the script.
   ⚠️ The veil is body::before so it needs no markup in any of the pages, and it is
   pointer-events:none from the first frame so it can never swallow a click.
   ⚠️ The masthead animates OPACITY ONLY. A transform on it would make it a containing
   block and kill its position:sticky. */
/* ⚠️ Its RESTING state is already lifted away, and the animation supplies the covered
   state. That way round, a browser that never runs the animation shows the page; the
   other way round it would sit under an opaque sheet forever. */
body::before{
  content:"";position:fixed;inset:0;z-index:100;
  background:var(--paper);pointer-events:none;
  transform:translateY(-101%);
  animation:sp-veil 1.05s cubic-bezier(.62,0,.15,1) both;
}
@keyframes sp-veil{
  from{transform:translateY(0)}
  to{transform:translateY(-101%)}
}
@keyframes sp-rise{
  from{opacity:0;transform:translateY(26px)}
  to{opacity:1;transform:none}
}
@keyframes sp-fade{ from{opacity:0} to{opacity:1} }
.sp-head{animation:sp-fade .7s ease .34s both}
.sp-hero{animation:sp-rise .95s cubic-bezier(.16,.6,.2,1) .40s both}
.ab-open{animation:sp-rise .95s cubic-bezier(.16,.6,.2,1) .52s both}
/* the six services come up on the same beat as the about page's opening photograph */
.sv-grid{animation:sp-rise .95s cubic-bezier(.16,.6,.2,1) .52s both}
@media (prefers-reduced-motion:reduce){
  body::before{display:none}
  .sp-head,.sp-hero,.ab-open,.sv-grid{animation:none}
}

/* ---------- slim masthead ---------- */
.sp-head{position:sticky;top:0;z-index:40;background:rgba(251,250,248,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--pad)}
.sp-logo{display:flex;align-items:center;text-decoration:none}
.sp-logo img{width:clamp(96px,8vw,120px);height:auto;display:block}
.sp-nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.sp-nav a{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;text-decoration:none;color:rgba(23,41,60,.72);transition:color .2s}
.sp-nav a:hover{color:var(--orange)}
.sp-nav a.cta{background:var(--orange);color:#fff;border-radius:999px;
  padding:9px 18px;letter-spacing:.1em}
.sp-nav a.cta:hover{background:var(--navy);color:#fff}
/* THE RIBBON IS GONE ON A PHONE (2026-08-01, his ask) — it is a burger now, the same
   one the front page uses (assets/menu.css + assets/menu.js). This used to be
   `@media (max-width:700px){.sp-nav a:not(.cta){display:none}}`, which left a phone
   with one link out of four and no way to reach the other three.
   ⚠️ The ribbon must stay in the DOM: menu.js reads THESE anchors to build the
   sheet, and forwards the sheet's clicks back to them. 900 is the site's phone
   breakpoint and menu.js's — keep the three in step.
   ⚠️ `html.has-mnav` is set by menu.js only once the button and the sheet are
   really on the page, so a phone that never gets that file keeps its ribbon
   instead of losing its navigation altogether. */
@media (max-width:900px){html.has-mnav .sp-nav{display:none}}

/* ---------- page opening ---------- */
/* The opening block sits CLOSE under the masthead. The back link is a small thing
   and was being given a whole band of paper to itself; the title now starts nearly
   where that band used to. Shared by every subpage, so changing it here moves them
   all together. */
.sp-hero{padding:clamp(18px,2.4vh,30px) var(--pad) clamp(22px,3.4vh,44px)}
.sp-back{display:inline-block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:rgba(23,41,60,.5);text-decoration:none;margin-bottom:10px}
.sp-back:hover{color:var(--orange)}
.sp-eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;
  color:rgba(23,41,60,.45);margin-bottom:16px}
.sp-title{font-family:'Nohemi',sans-serif;font-weight:200;letter-spacing:-.015em;
  font-size:clamp(38px,5.4vw,92px);line-height:1.05;max-width:18ch}
/* The service's own name inside the headline, in its colour. COLOUR ONLY.
   ⚠️ Do not add weight to it. The front page headline does exactly this with
   "wrapped." and it stays at the same extra-light cut as the words around it;
   bolding it breaks the line and reads as a different typeface. */
.sp-title .ax{color:var(--cc)}
.sp-lead{margin-top:24px;max-width:62ch;font-size:clamp(16px,1.2vw,20px);
  line-height:1.7;color:rgba(23,41,60,.78)}

/* ---------- let's have a chat ----------
   This is a straight port of the FRONT PAGE contact screen, not the old navy panel
   that used to close the subpages: white screen, details on the left, and the form
   itself as the blue box. It closes every subpage, and the same markup is cloned
   into the pop-up (see chat.js), so there is exactly one of it to keep in step. */
.chat{
  min-height:100svh;color:var(--ink);position:relative;
  display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,4vw,64px);
  padding:clamp(32px,4.6vh,64px) clamp(34px,4vw,74px) clamp(28px,4vh,56px);
  align-items:center;align-content:center;
}
.chat h2{font-family:'Nohemi',sans-serif;font-weight:200;
  font-size:clamp(35px,4.3vw,80px);line-height:1.08;letter-spacing:-.01em;
  margin-bottom:30px;color:var(--ink)}
.chat h2 .ox{color:var(--orange)}
.chat .blurb{max-width:44ch;color:rgba(23,41,60,.7);font-size:16.5px;margin-bottom:30px}
.chat .mail{color:var(--orange);text-decoration:none;font-size:19px;font-weight:600}
.chat .mail:hover{text-decoration:underline}
.cmeta{display:grid;gap:clamp(14px,2vh,22px);margin-top:clamp(26px,4vh,44px);
  padding-top:clamp(22px,3vh,34px);border-top:1px solid var(--line);max-width:42ch}
.cmeta dt{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:rgba(23,41,60,.42);margin-bottom:5px}
.cmeta dd{font-size:15.5px;line-height:1.55;color:rgba(23,41,60,.78)}
.cmeta dd a{color:inherit;text-decoration:none}
.cmeta dd a:hover{color:var(--orange)}
.cform{background:var(--navy);color:#fff;border-radius:24px;
  padding:clamp(28px,3.6vh,44px) clamp(26px,2.4vw,42px)}
.cform label{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:rgba(255,255,255,.62);margin-bottom:9px}
.cform input,.cform textarea{
  width:100%;background:transparent;border:0;outline:0;
  border-bottom:1px solid rgba(255,255,255,.28);
  color:#fff;font-family:'Inter',sans-serif;font-size:16.5px;
  padding:2px 0 12px;margin-bottom:clamp(18px,2.6vh,30px);resize:none}
.cform input::placeholder,.cform textarea::placeholder{color:rgba(255,255,255,.38)}
.cform input:focus,.cform textarea:focus{border-bottom-color:var(--gold)}
.cform .two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,40px)}
.send{background:var(--gold);color:var(--navy);border:0;border-radius:999px;
  padding:14px 34px;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;
  letter-spacing:.06em;cursor:pointer;transition:background .25s,color .25s}
.send:hover{background:var(--orange);color:#fff}
/* the three icons, nothing else, under the contact details */
.c-socials{display:flex;gap:16px;margin-top:clamp(22px,3.2vh,40px)}
.c-socials a{width:54px;height:54px;border-radius:16px;border:0;
  background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s,box-shadow .25s,filter .25s}
.c-socials a.li{--brand:#0A66C2}
.c-socials a.ig{--brand:#DD2A7B;
  background:linear-gradient(45deg,#F9A03F 4%,#F55F5F 26%,#DD2A7B 52%,#8134AF 78%,#515BD4 100%)}
.c-socials a:hover{transform:translateY(-3px);filter:saturate(1.15);
  box-shadow:0 12px 26px -12px rgba(23,41,60,.45)}
.c-socials svg{width:27px;height:27px}
.ig-defs{display:none}
/* the button is phone-only; on a wide screen the form is right there beside the
   details and a button to reach it would be a step backwards */
.c-actions{display:none}
@media (max-width:1000px){
  .chat{grid-template-columns:1fr;gap:44px;min-height:0;
    padding:clamp(40px,7vh,80px) var(--pad)}
  .cform .two{grid-template-columns:1fr;gap:0}
}
/* ---------- phone: the closing chat block matches the front page ----------
   Details only, with the form behind a button. The button is `.js-chat`, so it
   opens the EXISTING pop-up (a clone of this very section) rather than a second
   sheet — one form on the page, still. */
@media (max-width:900px){
  /* no gap override needed: a display:none child creates no grid row, so the
     footer gains no trailing gap, and the pop-up (where the form IS shown)
     keeps the full 44px it needs to clear the social tiles */
  .chat > .cform{display:none}
  .c-actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:26px}
  .cbtn{display:flex;align-items:center;justify-content:center;height:52px;width:100%;
    border-radius:14px;border:1px solid var(--navy);cursor:pointer;
    font-family:'Inter',sans-serif;font-weight:600;font-size:13px;
    letter-spacing:.07em;text-transform:uppercase;text-decoration:none;
    transition:opacity .2s ease,transform .2s ease}
  .cbtn:active{transform:translateY(1px)}
  .cbtn-solid{background:var(--navy);color:#fff}
  /* ⚠️ inside the pop-up the rules invert: that clone IS the form, so it shows
     the form and drops the button that would only reopen what is already open.
     Without this the pop-up would be details and a dead button, nothing else. */
  .chatm .chat > .cform{display:block}
  .chatm .c-actions{display:none}
  .chatm-panel .chat{padding:clamp(26px,4vh,40px) var(--pad) clamp(30px,4vh,44px)}
}

/* ---------- the same thing again, as a pop-up ----------
   Built by cloning the page's own .chat section, so it cannot drift out of step
   with it. The panel scrolls internally: on a short window the contact screen is
   taller than the space a dialog can take. */
.chatm{position:fixed;inset:0;z-index:90;display:flex;align-items:center;
  justify-content:center;padding:clamp(14px,3vh,40px) clamp(14px,3vw,40px);
  opacity:0;pointer-events:none;transition:opacity .3s ease}
.chatm.open{opacity:1;pointer-events:auto}
.chatm-bd{position:absolute;inset:0;background:rgba(23,41,60,.55);
  backdrop-filter:blur(3px)}
.chatm-panel{position:relative;background:var(--paper);border-radius:24px;
  width:min(1500px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;
  box-shadow:0 50px 110px -30px rgba(23,41,60,.55);
  transform:translateY(16px) scale(.985);transition:transform .38s cubic-bezier(.16,.6,.2,1)}
.chatm.open .chatm-panel{transform:none}
/* inside the pop-up the section is no longer a whole screen of its own */
.chatm-panel .chat{min-height:0;padding:clamp(34px,4.4vh,60px) clamp(26px,3.2vw,58px)}
.chatm-x{position:absolute;top:14px;right:18px;z-index:2;background:none;border:0;
  font-size:30px;line-height:1;color:rgba(23,41,60,.45);cursor:pointer;
  font-family:'Inter',sans-serif;transition:color .2s}
.chatm-x:hover{color:var(--orange)}
html.chat-locked{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .chatm,.chatm-panel{transition:none}
}

/* ---------- lightbox (portfolio + service galleries) ---------- */
.lb{position:fixed;inset:0;z-index:80;background:rgba(23,41,60,.93);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .28s}
.lb.open{opacity:1;pointer-events:auto}
.lb img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:6px}
.lb button{position:absolute;background:none;border:0;color:rgba(255,255,255,.8);
  cursor:pointer;font-size:34px;line-height:1;padding:14px;transition:color .2s}
.lb button:hover{color:#fff}
.lb .lb-x{top:12px;right:18px;font-size:30px}
.lb .lb-p{left:10px;top:50%;transform:translateY(-50%)}
.lb .lb-n{right:10px;top:50%;transform:translateY(-50%)}
.lb .lb-c{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  font-size:12.5px;letter-spacing:.16em;color:rgba(255,255,255,.6)}
html.lb-open,html.lb-open body{overflow:hidden}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.16,.6,.2,1),transform .8s cubic-bezier(.16,.6,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- the service page's own intro screen ----------
   Each service opens on a screen of its own: the name of the thing and what it is,
   and nothing else. What we print, the process and the rest are a scroll away.
   ⚠️ The masthead is position:sticky, so it takes its space in the flow. The screen
   is therefore the window LESS the masthead, measured in the page script, or the
   intro would run a masthead's height past the fold. */
.sv-hero{position:relative;min-height:calc(100svh - var(--headH,64px));
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(64px,9vh,110px) var(--pad) clamp(76px,11vh,130px)}
.sv-hero .sp-back{position:absolute;top:clamp(16px,2.2vh,28px);left:var(--pad);margin:0}
/* Stacked, not split left to right: the title, then the line under it, then the
   paragraphs, all in one column. The running text keeps its own measure so it does
   not stretch across the window. */
.sv-herotop{display:block}
.sv-herotext{margin-top:clamp(22px,3.2vh,40px)}
.sv-herotext .sp-lead{margin-top:0}
.sv-herotext .sp-lead + .sp-lead{margin-top:1.15em}
/* ⚠️ The opening line is the SAME SIZE as the paragraphs under it. It reads as the
   standfirst through colour alone, not through a third size: the headline and the
   body are the only two sizes in this block. */
.sv-sub{color:rgba(23,41,60,.9)}

@media (max-width:900px){
  .sv-hero{min-height:0;padding:clamp(40px,7vh,70px) var(--pad) clamp(34px,5vh,54px)}
}
/* ---------- service page sections ---------- */
/* ⚠️ NO max-width. The front page runs every screen full bleed on a single
   var(--pad) gutter, and these sections used to sit in a 1500px column in the middle
   of a wide window, which reads as a different site. Only running text is measured. */
.sv-sec{padding:clamp(34px,6vh,72px) var(--pad)}
.sv-h{font-family:'Nohemi',sans-serif;font-weight:200;letter-spacing:-.01em;
  font-size:clamp(28px,3vw,52px);line-height:1.1;margin-bottom:clamp(22px,3.4vh,42px)}
.sv-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
/* ---------- the pale card (2026-07-31, his ask) ----------
   These used to be solid blocks of colour with white type. He did not like them and
   asked for the About page's treatment instead: a wash of the card's own colour, a
   hairline of the same colour, and a 3px rule of the full colour along the top.
   ⚠️ SOLID COLOUR SURVIVES IN EXACTLY ONE PLACE, the services grid on the FRONT page
   (`.scard` in index.html). That was his instruction: change it everywhere, keep it
   on the main page. Do not "unify" the two.
   ⚠️ The shadow is a pre-rendered ::after that fades in. Transitioning box-shadow on
   a card this size repaints the whole thing every frame.
   ⚠️ Colour and transform only: changing a width, a padding or a BORDER WIDTH reflows
   the card under the cursor and the row of them jumps. The hover deepens the wash and
   the border COLOUR, never its width. */
.sv-group{position:relative;border-radius:18px;padding:26px 28px;
  background:color-mix(in srgb, var(--cc) 12%, var(--paper));
  border:1px solid color-mix(in srgb, var(--cc) 24%, var(--paper));
  border-top:3px solid var(--cc);
  transition:transform .42s cubic-bezier(.16,.6,.2,1),
             background .42s ease, border-color .42s ease}
.sv-group::after{content:"";position:absolute;inset:0;border-radius:18px;
  box-shadow:0 32px 64px -24px color-mix(in srgb, var(--cc) 62%, transparent),
             0 6px 16px -8px rgba(23,41,60,.18);
  opacity:0;transition:opacity .42s ease;pointer-events:none}
.sv-group:hover{transform:translateY(-9px) scale(1.022);
  background:color-mix(in srgb, var(--cc) 22%, var(--paper));
  border-color:color-mix(in srgb, var(--cc) 42%, var(--paper))}
.sv-group:hover::after{opacity:1}
.sv-group h3{font-family:'Nohemi',sans-serif;font-weight:400;font-size:19px;
  margin-bottom:14px;color:var(--ink);transition:color .42s ease}
.sv-group:hover h3{color:color-mix(in srgb, var(--cc) 72%, var(--ink))}
.sv-group ul{list-style:none}
.sv-group li{position:relative;padding-left:18px;font-size:15px;line-height:1.55;
  margin-bottom:9px;color:rgba(23,41,60,.75)}
.sv-group li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--cc);opacity:.75}
/* process: numbered steps on a hairline */
/* ---------- the process, as a flowchart ----------
   A numbered disc per step sitting on a single rail that runs the width of the row,
   with a chevron pointing into the next one. The rail is drawn by each node rather
   than by one long element, so it stretches and wraps with the grid instead of
   needing to be measured.
   ⚠️ The first node's rail starts at its own centre and the last one's stops there,
   otherwise the line juts out into the margin at both ends. */
.sv-flow{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  margin-top:clamp(10px,1.6vh,22px)}
.sv-node{position:relative;text-align:center;padding:0 clamp(10px,1.2vw,22px)}
.sv-node::before{content:"";position:absolute;top:27px;left:0;right:0;height:2px;
  background:var(--line);z-index:0}
.sv-node:first-child::before{left:50%}
.sv-node:last-child::before{right:50%}
/* the chevron that points at the next step */
.sv-node:not(:last-child)::after{content:"";position:absolute;top:21px;right:-6px;
  width:12px;height:12px;border-top:2px solid var(--cc);border-right:2px solid var(--cc);
  transform:rotate(45deg);opacity:.55}
.sv-dot{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;margin:0 auto 22px;border-radius:50%;
  background:var(--cc);color:var(--con,#fff);
  font-family:'Nohemi',sans-serif;font-weight:400;font-size:21px;
  box-shadow:0 0 0 8px var(--paper)}
.sv-node h3{font-family:'Nohemi',sans-serif;font-weight:400;font-size:19px;
  margin-bottom:9px;line-height:1.25}
.sv-node p{font-size:15px;line-height:1.6;color:rgba(23,41,60,.75);max-width:30ch;
  margin:0 auto}
@media (max-width:900px){
  /* the rail turns and runs down the side */
  .sv-flow{grid-auto-flow:row;gap:26px}
  .sv-node{display:grid;grid-template-columns:56px 1fr;gap:18px;text-align:left;padding:0}
  .sv-node::before{top:0;bottom:0;left:27px;right:auto;width:2px;height:auto}
  .sv-node:first-child::before{top:28px;left:27px}
  .sv-node:last-child::before{bottom:calc(100% - 28px);right:auto}
  .sv-node:not(:last-child)::after{display:none}
  .sv-dot{margin:0}
  .sv-node h3{grid-column:2}
  .sv-node p{grid-column:2;margin:0;max-width:none}
}

.sv-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
/* same pale card as .sv-group above, see the note there */
.sv-why div{position:relative;border-radius:18px;padding:24px 26px;
  background:color-mix(in srgb, var(--cc) 12%, var(--paper));
  border:1px solid color-mix(in srgb, var(--cc) 24%, var(--paper));
  border-top:3px solid var(--cc);
  transition:transform .42s cubic-bezier(.16,.6,.2,1),
             background .42s ease, border-color .42s ease}
.sv-why div::after{content:"";position:absolute;inset:0;border-radius:18px;
  box-shadow:0 32px 64px -24px color-mix(in srgb, var(--cc) 62%, transparent),
             0 6px 16px -8px rgba(23,41,60,.18);
  opacity:0;transition:opacity .42s ease;pointer-events:none}
.sv-why div:hover{transform:translateY(-9px) scale(1.022);
  background:color-mix(in srgb, var(--cc) 22%, var(--paper));
  border-color:color-mix(in srgb, var(--cc) 42%, var(--paper))}
.sv-why div:hover::after{opacity:1}
.sv-why h3{font-family:'Nohemi',sans-serif;font-weight:400;font-size:18px;
  margin-bottom:8px;color:var(--ink);transition:color .42s ease}
.sv-why div:hover h3{color:color-mix(in srgb, var(--cc) 72%, var(--ink))}
.sv-why p{font-size:15px;line-height:1.6;color:rgba(23,41,60,.75)}
/* gallery */
/* ---------- a drifting strip of large photographs ----------
   ⚠️ The vertical padding is what a hovered photograph grows into. The strip has to
   keep overflow:hidden for the loop, and a browser resolves overflow-y:visible next
   to overflow-x:hidden as auto, so the room has to be inside the box.
   ⚠️ margin-right on the figure, NEVER gap on the track: a -50% loop only lands
   seamlessly if every item costs picture plus spacing. */
.sv-strip{width:100%;overflow:hidden;padding:26px 0;
  margin:clamp(10px,2vh,26px) 0 clamp(20px,3vh,44px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.sv-striptrack{display:flex;width:max-content;animation:svflow 70s linear infinite}
@keyframes svflow{to{transform:translateX(-50%)}}
.sv-striptrack figure{flex:0 0 auto;margin-right:24px;cursor:zoom-in;
  width:clamp(320px,30vw,600px);height:clamp(240px,22vw,440px);
  overflow:hidden;border-radius:16px;position:relative;
  transition:transform .5s cubic-bezier(.16,.6,.2,1)}
.sv-striptrack img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.16,.6,.2,1)}
/* Several of the photographs are of white or backlit panels, and on a paper-white
   page one of those with no edge reads as a hole in the strip rather than as a
   picture. Every frame carries a hairline for that reason.
   ⚠️ An overlay, not a border: a border would widen the item and a -50% loop only
   meets itself if every item costs exactly picture plus margin. An inset shadow on
   the figure would not work either, it paints underneath the image. */
.sv-striptrack figure::after{content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(23,41,60,.14);pointer-events:none}
/* Hovering a photograph enlarges it and stops the strip.
   ⚠️ `.up` is added by the script, not by :hover. The track is a masked, clipped,
   continuously transformed subtree, and a bare :hover on a child of one of those is
   the sort of thing that silently does nothing. The pause is set as an inline style
   on the track for the same reason. */
.sv-striptrack figure.up{transform:scale(1.09);z-index:2}
.sv-striptrack figure.up img{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){
  .sv-striptrack{animation:none}
  .sv-striptrack figure,.sv-striptrack img{transition:none}
}

/* ---------- the answers, simply on the page ----------
   ⚠️ Not a disclosure widget. No summary, no marker, no pointer cursor: there is
   nothing here to open, so nothing should look as though it could be clicked. */
.sv-faq{max-width:900px}
.sv-q{border-bottom:1px solid var(--line);padding:20px 0}
.sv-q:first-child{padding-top:0}
.sv-q:last-child{border-bottom:0}
.sv-q h3{font-family:'Inter',sans-serif;font-weight:600;font-size:16.5px;
  color:var(--ink);margin-bottom:10px}
.sv-q p{font-size:15.5px;line-height:1.65;color:rgba(23,41,60,.75)}