/* MOCKUP ONLY: NOBREAKS editorial homepage, Quicksilver identity.
   Structure: hero filmstrip (after Hero Carousel by crafterui, 21st.dev, MIT), services index (after Project Index by ssychui, MIT),
   text links (after Link Button by hyperiux, MIT), primary pill sweep (after Metallic Button by starc007, MIT). All written from scratch in plain CSS/JS. */
:root{
  --onyx:#0A0A0A; --alab:#E5E4E2; --steel:#A9B2BA; --slate:#536878; --deep:#2B3338; --sky:#588FB8; --tail:#D91A12;
  --line:rgba(169,178,186,.18);
  --sans:"Archivo",system-ui,sans-serif; --disp:"Unbounded","Archivo",sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --gut:clamp(16px,3.2vw,48px); --ease:cubic-bezier(.32,.72,0,1);
  --chrome:linear-gradient(100deg,#E5E4E2 0%,#A9B2BA 16%,#3A454C 34%,#8A98A3 48%,#F2F2F0 58%,#71828F 74%,#E5E4E2 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--onyx);scroll-behavior:smooth}
body{background:var(--onyx);color:var(--alab);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:2px solid var(--tail);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--alab);color:var(--onyx);padding:8px 14px;border-radius:99px}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{padding-inline:var(--gut)}
.num{font:400 12px/1.4 var(--mono);color:var(--steel);font-variant-numeric:tabular-nums}

/* ---------- buttons: two kinds only ---------- */
/* primary: a plain Alabaster pill; on hover one band of light crosses it like a reflection on polished metal */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 26px;border-radius:999px;
  background:var(--alab);color:var(--onyx);font:500 15px/1 var(--sans);letter-spacing:-.005em;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(10,10,10,.18),0 0 0 1px rgba(229,228,226,.35);
  transition:transform .25s var(--ease),box-shadow .3s}
.btn::after{content:"";position:absolute;inset:-2px;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(83,104,120,.38) 45%,rgba(255,255,255,.95) 50%,rgba(83,104,120,.38) 55%,transparent 65%);transform:translateX(-120%)}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(120%);transition:transform .9s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-sm{height:38px;padding:0 18px;font-size:14px}
/* secondary: text with an underline that leaves to the right and comes back from the left */
.lnk{position:relative;display:inline-block;padding:4px 0;font:500 15px/1.2 var(--sans);color:var(--alab)}
.lnk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:right;transition:transform .45s var(--ease)}
.lnk:hover::after,.lnk:focus-visible::after{transform:scaleX(0);animation:lnk-back .45s var(--ease) .4s forwards}
.lnk:hover,.lnk:focus-visible{color:var(--alab)}
@keyframes lnk-back{from{transform-origin:left;transform:scaleX(0)}to{transform-origin:left;transform:scaleX(1);background:var(--tail)}}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;height:68px;padding-inline:var(--gut);transition:background .4s,backdrop-filter .4s}
.nav.solid{background:rgba(10,10,10,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav-logo img{height:34px;width:auto}
.nav nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px)}
.nav nav .lnk{font-size:14px}
@media (max-width:640px){.nav nav .lnk{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;grid-template-rows:auto 1fr;padding-top:112px;overflow:hidden}
.hero-bg{position:absolute;inset:-10%;z-index:0}
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(48px) saturate(.45) brightness(.32);opacity:0;transition:opacity 1.1s ease}
.hero-bg img.on{opacity:1}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.55),rgba(10,10,10,.2) 40%,rgba(10,10,10,.9))}
.hero-top{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:end;padding-inline:var(--gut);padding-bottom:clamp(28px,4vh,48px)}
.hero h1{grid-column:1/9;font:800 clamp(34px,5.4vw,84px)/.93 var(--disp);text-transform:uppercase;letter-spacing:-.04em;
  background:var(--chrome);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-side{grid-column:9/13;display:grid;gap:22px;max-width:40ch}
.hero-side p{color:var(--steel);font-size:16px}
.hero-act{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
@media (prefers-reduced-motion:no-preference){
  .hero h1{animation:sheen 2.4s var(--ease) .5s both}
  @keyframes sheen{from{background-position:100% 0}to{background-position:0 0}}
}
@media (max-width:900px){.hero h1,.hero-side{grid-column:1/-1}.hero-side{margin-top:22px}}

/* filmstrip: every card hangs from one top edge; the focused one opens to full height */
.strip{position:relative;z-index:2;display:grid;grid-template-rows:1fr auto;min-height:0}
.strip-view{position:relative;overflow:hidden;cursor:grab;touch-action:pan-y;min-height:clamp(300px,48vh,560px)}
.strip-view.drag{cursor:grabbing}
.strip-track{position:absolute;inset:0 auto 0 0;display:flex;align-items:flex-start;gap:8px;will-change:transform;transition:transform .8s var(--ease)}
.card{position:relative;flex:0 0 auto;width:var(--wc,160px);border:0;padding:0;height:52%;border-radius:6px;overflow:hidden;background:var(--deep);cursor:pointer;
  transition:width .8s var(--ease),height .8s var(--ease),filter .5s;filter:saturate(.75) brightness(.8)}
.card img{width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.card.on{width:var(--wo,320px);height:100%;filter:none}
.card:hover{filter:none}
.card:focus-visible{outline-offset:-2px}
.strip-bar{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:24px;padding:16px var(--gut) 22px;border-top:1px solid var(--line);margin-top:18px}
.cap{display:flex;gap:14px;align-items:baseline;min-width:0}
.cap b{font-weight:500;font-size:15px;position:relative;padding-left:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cap b::before{content:"";position:absolute;left:0;top:50%;width:8px;height:2px;background:var(--tail)}
.cap span{color:var(--steel);font-size:14px;white-space:nowrap}
.ctrl{display:flex;gap:6px}
.ctrl button{width:38px;height:38px;border-radius:50%;border:0;background:transparent;color:var(--alab);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;font:16px/1 var(--sans);transition:box-shadow .3s,background .3s}
.ctrl button:hover{box-shadow:inset 0 0 0 1px var(--steel);background:rgba(229,228,226,.06)}
.ph{font:400 11px/1 var(--mono);color:var(--steel);opacity:.8}
@media (max-width:640px){
  .strip-bar{grid-template-columns:1fr auto}.strip-bar .num{display:none}
  .cap span{display:none}
}

/* ---------- sections ---------- */
.sec{padding:clamp(80px,12vw,160px) var(--gut)}
.sec-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.sec-head h2{grid-column:1/8;font:500 clamp(32px,4.2vw,60px)/1.02 var(--sans);letter-spacing:-.035em}
.sec-head p{grid-column:9/13;color:var(--steel);max-width:40ch}
@media (max-width:900px){.sec-head h2,.sec-head p{grid-column:1/-1}.sec-head p{margin-top:16px}}

/* services: heading and one picture hold still on the left; the right column is only the six names, one opens at a time */
.svc{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:start}
.svc-side{grid-column:1/6;position:sticky;top:110px;display:grid;gap:22px}
.svc-side h2{font:500 clamp(32px,4.2vw,60px)/1.02 var(--sans);letter-spacing:-.035em}
.svc-side p{color:var(--steel);max-width:38ch}
.svc-pic{position:relative;margin-top:18px;width:min(100%,340px);aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:var(--deep)}
.svc-pic img{width:100%;height:100%;object-fit:cover;transition:opacity .45s ease}
.svc-pic img.swap{opacity:0}
.svc-pic .ph{position:absolute;left:12px;bottom:10px;padding:3px 7px;border-radius:4px;background:rgba(10,10,10,.6)}
.accs{grid-column:7/13;border-top:1px solid var(--line)}
.acc{border-bottom:1px solid var(--line)}
.acc h3{font:inherit}
.acc button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(26px,3vw,38px) 0;border:0;background:none;color:var(--alab);text-align:left;cursor:pointer;
  font:500 clamp(22px,2.1vw,30px)/1.15 var(--sans);letter-spacing:-.022em;transition:color .3s}
.acc:not(.open) button{color:color-mix(in srgb,var(--alab) 55%,transparent)}
.acc button:hover{color:var(--alab)}
/* plus that turns into a minus */
.acc i{position:relative;flex:0 0 14px;height:14px}
.acc i::before,.acc i::after{content:"";position:absolute;left:0;top:50%;width:14px;height:1.5px;background:currentColor;transition:transform .45s var(--ease)}
.acc i::after{transform:rotate(90deg)}
.acc.open i::after{transform:rotate(0)}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.acc.open .acc-body{grid-template-rows:1fr}
.acc-body>div{overflow:hidden;display:grid;gap:16px;justify-items:start}
.acc-body p{color:var(--steel);max-width:46ch}
.acc.open .acc-body>div{padding-bottom:clamp(26px,3vw,38px)}
.acc-body>div{transition:padding .55s var(--ease)}
@media (max-width:900px){
  .svc-side,.accs{grid-column:1/-1}
  .svc-side{position:static;margin-bottom:36px}
  .svc-pic{display:none}
}

/* selected work: an even grid, every frame captioned so it scans */
.work{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,1.6vw,24px);row-gap:clamp(36px,4vw,56px)}
.work figure{display:grid;gap:12px}
.work .f{position:relative;overflow:hidden;border-radius:6px;background:var(--deep)}
.work .f img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.work figure:hover .f img{transform:scale(1.03)}
.work figcaption{display:flex;justify-content:space-between;gap:16px;font-size:14px}
.work figcaption b{font-weight:500}
.work figcaption span{color:var(--steel)}
/* every frame the same shape, three across, tops aligned */
.work figure{grid-column:span 4}
.work .f{aspect-ratio:4/5}
@media (max-width:900px){.work figure{grid-column:span 6}}
@media (max-width:560px){.work figure{grid-column:1/-1}}

/* two ways to start: two plain columns, a hairline between */
.start{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.start article{display:grid;align-content:start;gap:18px;padding:clamp(28px,3.4vw,48px) clamp(0px,3vw,48px) clamp(28px,3.4vw,48px) 0}
.start article+article{padding-left:clamp(20px,3vw,48px);border-left:1px solid var(--line)}
.start h3{font:500 clamp(24px,2.4vw,34px)/1.1 var(--sans);letter-spacing:-.025em}
.start .kind{color:var(--steel);font-size:14px}
.start p,.start li{color:var(--steel);max-width:52ch}
.start ul{display:grid;gap:10px;margin-top:4px}
.start li{position:relative;padding-left:18px}
.start li::before{content:"";position:absolute;left:0;top:.75em;width:8px;height:1px;background:var(--steel)}
.start .act{margin-top:10px}
@media (max-width:760px){.start{grid-template-columns:1fr}.start article+article{padding-left:0;border-left:0;border-top:1px solid var(--line)}}

/* close */
.close{padding:clamp(100px,14vw,200px) var(--gut) 28px;border-top:1px solid var(--line);background:radial-gradient(60% 70% at 80% 100%,rgba(88,143,184,.12),transparent 70%)}
.close h2{font:800 clamp(34px,6vw,96px)/.93 var(--disp);text-transform:uppercase;letter-spacing:-.04em;max-width:13ch;background:var(--chrome);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.close-act{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:40px}
.foot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:clamp(80px,10vw,140px);padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--steel)}
.foot nav{display:flex;gap:22px}

/* colour bands: sections alternate through the Quicksilver base colours (red is never a background).
   Each band swaps the text and button tokens, so every component reads on it without its own rules. */
.t-alab,.t-slate,.t-sky{color:var(--alab);border-top:0}
.t-alab{--alab:#0A0A0A;--onyx:#E5E4E2;--steel:#3F4B54;--line:rgba(10,10,10,.16);--deep:#CFD2D4;background:#E5E4E2}
.t-slate{--steel:#E5E4E2;--line:rgba(229,228,226,.24);--deep:#3E4F5B;background:#536878}
.t-sky{--alab:#0A0A0A;--onyx:#E5E4E2;--steel:#14222C;--line:rgba(10,10,10,.2);--deep:#46789E;background:#588FB8}
.t-alab .btn,.t-sky .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(10,10,10,.6)}
.close.t-sky h2{background:none;color:var(--alab)}
.qs-label{position:fixed;left:12px;bottom:12px;z-index:60;padding:6px 10px;border-radius:6px;background:rgba(10,10,10,.85);box-shadow:inset 0 0 0 1px rgba(217,26,18,.55);color:var(--alab);font:12px/1.3 var(--mono);max-width:calc(100vw - 24px)}
@media (max-width:640px){.qs-label{max-width:calc(100vw - 170px);font-size:10px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
}

/* red accents, quiet details only (Tail Light #D91A12, never a fill or a background) */
/* 1. viewfinder corners on the focused filmstrip frame */
.card::after{content:"";position:absolute;inset:10px;pointer-events:none;opacity:0;transition:opacity .5s .3s;--c:var(--tail);--l:16px;--w:1.5px;
  background:
   linear-gradient(var(--c),var(--c)) top left/var(--l) var(--w) no-repeat,linear-gradient(var(--c),var(--c)) top left/var(--w) var(--l) no-repeat,
   linear-gradient(var(--c),var(--c)) top right/var(--l) var(--w) no-repeat,linear-gradient(var(--c),var(--c)) top right/var(--w) var(--l) no-repeat,
   linear-gradient(var(--c),var(--c)) bottom left/var(--l) var(--w) no-repeat,linear-gradient(var(--c),var(--c)) bottom left/var(--w) var(--l) no-repeat,
   linear-gradient(var(--c),var(--c)) bottom right/var(--l) var(--w) no-repeat,linear-gradient(var(--c),var(--c)) bottom right/var(--w) var(--l) no-repeat}
.card.on::after{opacity:1}
/* 2. the open service: a short red line slides in before its name, and its minus turns red */
.acc button span{position:relative;transition:transform .45s var(--ease)}
.acc button span::before{content:"";position:absolute;left:-22px;top:.6em;width:12px;height:2px;background:var(--tail);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.acc.open button span{transform:translateX(22px)}
.acc.open button span::before{transform:scaleX(1)}
.acc.open i{color:var(--tail)}
/* 3. work: a red hairline draws under the caption on hover (text stays neutral; red text is too low-contrast on Onyx) */
.work figcaption{position:relative;padding-bottom:10px}
.work figcaption::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--tail);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.work figure:hover figcaption::after{transform:scaleX(1)}
/* 5. two ways to start: a small red dot before the kind of engagement */
.start .kind{display:flex;align-items:center;gap:8px}
.start .kind::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tail)}

/* clients: a slim black band under the hero; the logos roll slowly and stop when you point at them.
   Marquee after Logo Marquee by ddoemonn (21st.dev, MIT), as on the live site. Four copies of the three logos make the loop seamless. */
.clients{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:center;padding:clamp(28px,3.4vw,44px) var(--gut);background:var(--onyx);box-shadow:inset 0 1px 0 var(--line)}
.clients h2{grid-column:1/3;font:400 14px/1.2 var(--sans);color:var(--steel)}
.roll{grid-column:3/13;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.roll-track{display:flex;align-items:center;gap:clamp(56px,7vw,112px);width:max-content;animation:roll 40s linear infinite}
.roll:hover .roll-track,.roll:focus-within .roll-track,.roll:focus .roll-track{animation-play-state:paused}
.roll img{height:26px;width:auto;opacity:.62;transition:opacity .3s}
.roll li:hover img{opacity:1}
@keyframes roll{to{transform:translateX(calc(-50% - clamp(56px,7vw,112px) / 2))}}
@media (max-width:760px){.clients h2{grid-column:1/-1;margin-bottom:16px}.roll{grid-column:1/-1}.roll img{height:22px}}
@media (prefers-reduced-motion:reduce){.roll-track{animation:none;flex-wrap:wrap;width:auto}.roll-track li[aria-hidden]{display:none}}