/* ============================================================
   THE HOMEPAGE, IN SCENES
   ------------------------------------------------------------
   Loaded on the homepage only, after landing.css, whose tokens,
   buttons, nav, field and reveal system it uses as they are.

   A [data-scene] is a section taller than the screen. Its .pin
   sticks to the top of the screen while the extra height scrolls
   past, and cinema.js turns how far through the scene you are
   into its motion. All of that hangs off html.cine, which the
   script sets only when motion is allowed: without it every scene
   is an ordinary section and everything in it is simply there.

   The type: Playfair set large and in capitals for the statements,
   with the first word in its italic, mixed case, the way a title
   card is lettered. The mono carries every label and number.
   ============================================================ */

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* The small labels on this page sit against type five to ten times
   their size, so they are set a step up from the site's usual 11.5px:
   13px on a phone, growing to 15px on a wide screen. The section
   eyebrows match them. */
.mono,#main .eyebrow{font-size:clamp(.8125rem,.74rem + .22vw,.9375rem)}
.mono{font-family:var(--mono);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}

/* ---------------- statement type ---------------- */
.cn-h1,.st-h,.cn-big,.cn-huge{font-family:var(--serif);font-weight:500;text-transform:uppercase;
  letter-spacing:-.012em;line-height:.94;margin:0;text-wrap:nowrap;overflow-wrap:normal}
.cn-h1 em,.st-h em,.cn-big em,.cn-huge em{font-style:italic;font-weight:400;text-transform:none;
  letter-spacing:-.02em}
/* one line each, masked, so a line can rise out of its own slot */
.cn-h1 .ln,.st-h .ln,.cn-big .ln,.cn-huge .ln{display:block;overflow:hidden;overflow:clip;
  padding:0 .14em .14em 0;margin-bottom:-.14em}
.cn-h1 .ln > span,.st-h .ln > span,.cn-big .ln > span,.cn-huge .ln > span{display:inline-block;
  will-change:transform}
/* In metal, as everywhere else on the site: white at the top of the
   line shading to silver at the baseline. Painted on each line's own
   span, which is what moves, so the light travels with the letters. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .cn-h1 .ln > span,.st-h .ln > span,.cn-big .ln > span,.cn-huge .ln > span{
    color:transparent;-webkit-text-fill-color:transparent;
    background-image:linear-gradient(180deg,#fff 0%,#fff 50%,#cfcfcf 86%,#cfcfcf 100%);
    -webkit-background-clip:text;background-clip:text;padding-bottom:.08em}
}

.cn-big{font-size:clamp(2.4rem,1rem + 5.2vw,6rem)}
.cn-huge{font-size:clamp(2.6rem,9vw,11rem);line-height:.9}

/* the lines of a heading outside a scene rise into place once, when
   it first comes into view (cinema.js adds .on) */
html.cine .cn-big .ln > span,html.cine .cn-huge .ln > span{transform:translate3d(0,108%,0);
  transition:transform 1100ms var(--ease) calc(var(--i,0) * 90ms)}
html.cine .cn-big.on .ln > span,html.cine .cn-huge.on .ln > span{transform:none}

/* ---------------- scenes ---------------- */
/* The scenes pin with position: sticky, which only works if nothing
   between a pin and the page is a scroll box of its own. The body's
   sideways guard (overflow-x on body) is one on iPhones before iOS 16,
   which do not know overflow: clip and fall back to hidden: there the
   pins never stuck, and every scene played its motion off screen. The
   root element keeps the guard, which is enough: nothing on this page
   runs wider than the screen. */
html.cine body{overflow-x:visible}
/* On a phone the root keeps no sideways guard either, on the homepage:
   every scene's content is inside a pin that clips, nothing else runs
   wider than the screen, and a guard on the root has made iOS take a
   swipe for something other than a scroll. */
@media (pointer:coarse){html.cine{overflow-x:visible}}
[data-scene]{position:relative;z-index:1}
html.cine .cn-hero{height:230vh}
html.cine .cn-why{height:420vh}
html.cine .cn-work{height:440vh}
/* the process scene's height is set by the script from its strip */
html.cine [data-scene] > .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;overflow:clip}
/* a browser whose sticky slipped (see pinFrame in cinema.js): the pins
   are placed by the script instead, with a transform that follows the
   scroll */
html.cine.jspin [data-scene] > .pin{position:absolute;top:0;left:0;right:0;will-change:transform}
@supports not (height:100svh){html.cine [data-scene] > .pin{height:100vh}}

/* a progress line along the foot of a scene */
.cn-rail{display:none}
html.cine .cn-rail{display:block;position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(1rem,3vh,1.75rem);
  height:1px;background:var(--hair)}
.cn-rail span{position:absolute;left:0;top:-.5px;height:2px;width:100%;transform-origin:left center;
  transform:scaleX(0);background:linear-gradient(90deg,rgba(255,255,255,.4),#fff)}

/* ============================================================
   1. HERO
   ============================================================ */
/* the old hero's padding belongs to the bento it held */
.hero.cn-hero{padding:0}
/* top to bottom: the label, the open space the swirl is fitted into
   (landing.js reads [data-swirl-box]), the headline and its foot */
.cn-hero .pin{min-height:100vh;min-height:100svh;position:relative;display:flex;flex-direction:column;
  padding:calc(var(--nav-h) + clamp(1.5rem,5vh,3rem)) var(--pad) clamp(1.5rem,6vh,3.75rem)}
.cn-tag{margin:0;display:grid;gap:.25rem;line-height:1.5;color:var(--ink-2)}
.cn-swirl-box{flex:1 1 auto;min-height:6rem;pointer-events:none}
.cn-cue{position:absolute;right:var(--pad);top:calc(var(--nav-h) + clamp(1.5rem,5vh,3rem));
  display:flex;align-items:center;gap:.75rem;color:var(--ink-2)}
.cn-cue i{display:block;width:1px;height:2.5rem;background:linear-gradient(180deg,transparent,#fff);
  transform-origin:top center}
@media (prefers-reduced-motion:no-preference){
  .cn-cue i{animation:cue 2.2s var(--ease) infinite}
  @keyframes cue{0%{transform:scaleY(0)}45%{transform:scaleY(1);transform-origin:top center}
    55%{transform:scaleY(1);transform-origin:bottom center}100%{transform:scaleY(0);transform-origin:bottom center}}
}

.cn-h1{font-size:clamp(2.35rem,5.7vw,6.6rem)}
.cn-h1 .ln-up{padding-left:1.9em}
.cn-hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5) var(--s-7);
  flex-wrap:wrap;margin-top:clamp(1.25rem,3.5vh,2.25rem);padding-left:calc(1.9 * clamp(2.35rem,5.7vw,6.6rem))}
.cn-lede{margin:0;max-width:44ch;color:var(--ink-2);font-size:var(--t-md);line-height:1.55}
.cn-cta{display:flex;flex-wrap:wrap;gap:var(--s-3) .625rem}
.cn-cta .btn{padding-inline:1.25rem}

/* the second beat: the promise, centred, once the headline has gone */
.cn-hero-b{display:none}
html.cine .cn-hero-b{display:grid;justify-items:center;gap:var(--s-4);position:absolute;inset:0;
  align-content:center;margin:0;text-align:center;pointer-events:none;opacity:0}
.cn-hero-b .mono{color:var(--ink-2)}
.cn-b-line{font-family:var(--serif);font-weight:500;text-transform:uppercase;line-height:.95;
  font-size:clamp(2.4rem,7vw,7.5rem);letter-spacing:-.012em}
.cn-b-line em{font-style:italic;font-weight:400;text-transform:none}

/* ============================================================
   2. WHY: three statements in one place
   ============================================================ */
.cn-scene-bar{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4)}
html.cine .cn-scene-bar{position:absolute;left:0;right:0;top:calc(var(--nav-h) + clamp(1.25rem,4vh,2.5rem))}
.cn-bar-k{font:inherit;margin:0;color:var(--ink-2)}
.cn-count b{color:var(--ink);font-weight:500}
.cn-statements{list-style:none;margin:0;padding:0}
.st{padding:var(--s-8) var(--pad)}
.st-k{margin:0 0 var(--s-4);color:var(--ink-2)}
.st-h{font-size:clamp(2.1rem,8vw,9.25rem)}
.st-p{margin:var(--s-5) 0 0;max-width:34ch;color:var(--ink-2);font-size:var(--t-lg);line-height:1.5}
html.cine .cn-statements{position:absolute;inset:0}
html.cine .st{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);padding-block:0}
html.cine .st .ln > span{transform:translate3d(0,108%,0)}
html.cine .st-k,html.cine .st-p{opacity:0}
/* the second line sits further in, as on a title card */
.st-h .ln + .ln{padding-left:1.4em}

/* ============================================================
   3. WHAT WE DO
   ============================================================ */
.cn-sec{position:relative;z-index:1;padding:clamp(5rem,14vh,10rem) 0}
.cn-split{display:grid;gap:var(--s-5) var(--s-7)}
@media (min-width:64rem){.cn-split{grid-template-columns:minmax(10rem,1fr) 3fr;align-items:start}
  .cn-split > .eyebrow{margin-top:.9em}}
.cn-reveal{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(1.55rem,1rem + 2.2vw,3.1rem);
  line-height:1.2;letter-spacing:-.008em;color:var(--ink);text-wrap:pretty;max-width:30ch}
/* lit by the script as the page scrolls; no transition of its own, which
   on a phone started one per word per frame */
.cn-reveal .w{transition:none}
html.cine .cn-reveal .w{opacity:.16}

.cn-svc{list-style:none;margin:clamp(3rem,9vh,6rem) 0 0;padding:0;border-bottom:1px solid var(--hair)}
.cn-svc li{border-top:1px solid var(--hair)}
.cn-svc a{position:relative;display:grid;align-items:center;gap:.25rem var(--s-5);
  grid-template-columns:auto 1fr auto;padding:clamp(1.1rem,2.6vh,1.6rem) 0;isolation:isolate}
.cn-svc .n{grid-row:1;align-self:center}
.cn-svc .nm{font-family:var(--serif);font-size:clamp(1.5rem,1rem + 2vw,2.9rem);line-height:1.1;
  transition:transform 500ms var(--ease)}
.cn-svc .sh{grid-column:2;color:var(--muted);font-size:var(--t-sm)}
.cn-svc .arrow{grid-column:3;grid-row:1 / span 2;width:22px;height:22px;color:var(--muted);
  transition:transform 400ms var(--ease),color 200ms var(--ease)}
@media (min-width:64rem){
  .cn-svc a{grid-template-columns:7rem 1.2fr 1fr auto}
  .cn-svc .sh{grid-column:3;grid-row:1;text-align:right;padding-right:var(--s-5)}
  .cn-svc .arrow{grid-column:4;grid-row:1}
}
/* a lit line sweeps in along the top of the row under the pointer */
.cn-svc a::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,#fff 30%,#fff 70%,transparent);
  transform:scaleX(0);transform-origin:left center;transition:transform 600ms var(--ease)}
@media (hover:hover){
  .cn-svc a:hover::before{transform:scaleX(1)}
  .cn-svc a:hover .nm{transform:translateX(.6rem)}
  .cn-svc a:hover .arrow{transform:translateX(4px) rotate(-45deg);color:var(--ink)}
}
.cn-svc a:focus-visible{outline-offset:-2px}
.cn-all{margin-top:var(--s-6)}

/* ============================================================
   4. WORK: the cylinder
   ============================================================ */
.cn-work .pin{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(.5rem,2vh,1.25rem);
  padding:calc(var(--nav-h) + clamp(1rem,3vh,2rem)) 0 clamp(2.25rem,6vh,3.5rem)}
/* a grid item would otherwise grow to the width of every card in the row */
.cn-work .pin > *{min-width:0}
.cn-work-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5)}
.cn-work-head .eyebrow{margin-bottom:var(--s-3)}
.cn-work .cn-big{font-size:clamp(2.1rem,1rem + 4vw,5rem)}
.cn-hint{margin:0;text-align:right;line-height:1.6}
.cn-hint .touch{display:none}
@media (pointer:coarse){.cn-hint .fine{display:none}.cn-hint .touch{display:inline}}

.cyl{position:relative;margin:var(--s-6) 0;outline:none}
.cyl-track{list-style:none;margin:0;padding:0 var(--pad);display:flex;gap:var(--s-4);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.cyl-track::-webkit-scrollbar{display:none}
.cyl-item{flex:none;width:min(86vw,38rem);scroll-snap-align:center}
.cyl-card{position:relative;display:block;aspect-ratio:16/10;border-radius:18px;overflow:hidden;
  background:#111;box-shadow:0 30px 80px rgba(0,0,0,.6)}
/* a phone draws a smaller shadow: a wide blur under five cards that
   change size every frame cost more than it showed */
@media (pointer:coarse){.cyl-card{box-shadow:0 10px 28px rgba(0,0,0,.55)}}
.cyl-card img{width:100%;height:100%;object-fit:cover;object-position:50% 0;
  -webkit-user-drag:none;user-select:none}
/* its rim, lit from above like every other surface on the site */
.cyl-card::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:2;pointer-events:none;
  padding:1px;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.1) 34%,rgba(255,255,255,.05));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* the cards to the side sit in shade; the script sets how deep */
.cyl-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:#050505;opacity:var(--dim,0)}
.cyl-sheen{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.14),transparent 38%);opacity:.7}
.cyl:focus-visible .cyl-card{outline:none}
.cyl:focus-visible::after{content:"";position:absolute;inset:-6px var(--pad);border:2px solid var(--accent);
  border-radius:24px;pointer-events:none}

/* the script's version: the cards stand on a cylinder and the stage
   fills the room the scene leaves it */
.cyl.is-3d{margin:0;height:100%;min-height:14rem;touch-action:pan-y;cursor:grab;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;perspective:1600px}
.cyl.is-3d.dragging{cursor:grabbing}
/* On a touch screen the stage claims no gesture: iOS was taking a
   slightly diagonal thumb flick for a sideways drag, and the page then
   did not move. There the cylinder turns with the scroll and a tap on
   a card brings it to the front. */
@media (pointer:coarse){.cyl.is-3d{touch-action:auto;cursor:auto}}
.cyl.is-3d .cyl-track{position:absolute;inset:0;display:block;overflow:visible;padding:0}
.cyl.is-3d .cyl-item{position:absolute;left:50%;top:50%;width:var(--cw);height:var(--chh);
  margin:calc(var(--chh) / -2) 0 0 calc(var(--cw) / -2);will-change:transform;backface-visibility:hidden}
.cyl.is-3d .cyl-card{width:100%;height:100%;aspect-ratio:auto}

.cyl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-6)}
.cyl-no b{color:var(--ink);font-weight:500}
.cyl-dl{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6);margin:0}
.cyl-dl div{display:flex;align-items:baseline;gap:var(--s-3)}
.cyl-dl dd{margin:0;font-family:var(--serif);font-size:clamp(1.15rem,1rem + .6vw,1.5rem)}
.cyl-links{display:flex;flex-wrap:wrap;gap:.625rem;margin-left:auto}
.cyl-links .btn{min-height:44px}
/* a site with no live address yet has no visit button: .btn sets a
   display of its own, which would otherwise win over [hidden] */
.cyl-links .btn[hidden]{display:none}
.cyl-links .out{width:16px;height:16px}
[data-cyl-meta] [data-swap]{transition:opacity 260ms var(--ease),transform 420ms var(--ease)}
[data-cyl-meta] .swap-out{opacity:0;transform:translateY(6px)}

/* ============================================================
   5. PROCESS: a strip that slides sideways
   ============================================================ */
.cn-track{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--s-5);padding:0 var(--pad)}
.cn-process{padding:clamp(4rem,10vh,8rem) 0}
html.cine .cn-process{padding:0}
html.cine .cn-process .cn-track{flex-wrap:nowrap;width:max-content;height:100%;align-items:center;
  padding:var(--nav-h) var(--pad) 0;gap:clamp(1.25rem,3vw,3rem);will-change:transform}
.cn-intro{flex:1 1 100%;max-width:36rem}
html.cine .cn-intro{flex:none;width:min(36rem,84vw);padding-right:clamp(0rem,4vw,4rem)}
.cn-intro-p{margin:var(--s-5) 0 0;color:var(--ink-2);max-width:34ch}
.cn-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:inherit}
html.cine .cn-steps{flex-wrap:nowrap}
.cn-step{position:relative;flex:1 1 18rem;display:flex;flex-direction:column;justify-content:space-between;
  gap:var(--s-7);padding:clamp(1.5rem,3vw,2.5rem);border-radius:22px;
  background:linear-gradient(180deg,rgba(24,24,24,.86),rgba(12,12,12,.86));overflow:hidden}
html.cine .cn-step{flex:none;width:min(30rem,80vw);height:min(68vh,34rem)}
.cn-step::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;
  background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.1) 34%,rgba(255,255,255,.05));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.cn-step-n{font-family:var(--serif);font-size:clamp(5rem,12vw,10rem);line-height:.8;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55)}
.cn-step-k{margin:0 0 var(--s-3)}
.cn-step h3{font-size:clamp(1.5rem,1rem + 1.2vw,2.1rem);margin:0 0 var(--s-3)}
.cn-step p{margin:0;color:var(--ink-2)}

/* ============================================================
   6. ABOUT, 7. FAQ
   ============================================================ */
.cn-about .define{max-width:34ch}
.cn-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:var(--s-5);
  margin:clamp(2.5rem,7vh,4.5rem) 0 0;padding-top:var(--s-5);border-top:1px solid var(--hair)}
.cn-facts dt{margin-bottom:var(--s-2)}
.cn-facts dd{margin:0;color:var(--ink-2)}

.cn-faq-h{font-size:clamp(2.4rem,1rem + 4.4vw,5.25rem)}
@media (min-width:64rem){.cn-faq-wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,2fr)}
  .cn-faq-h{position:sticky;top:calc(var(--nav-h) + 2rem)}}
.cn-faq{max-width:none;margin:0}
.cn-faq summary .n{flex:none;margin-top:.45em}
.cn-faq summary .q{flex:1}

/* ============================================================
   8. CLOSE
   ============================================================ */
.cn-close{padding-bottom:clamp(4rem,10vh,7rem)}
.cn-close .eyebrow{margin-bottom:var(--s-5)}
.cn-close-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--s-5) var(--s-7);margin-top:clamp(2rem,6vh,3.5rem)}
.cn-close-p{margin:0;max-width:44ch;color:var(--ink-2);font-size:var(--t-md)}
.btn.cn-xl{min-height:64px;padding:var(--s-4) var(--s-6);font-size:var(--t-md)}
.btn.cn-xl svg{width:22px;height:22px}
.cn-contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:var(--s-5);
  margin:clamp(3rem,8vh,5rem) 0 0;padding-top:var(--s-5);border-top:1px solid var(--hair)}
.cn-contact dt{margin-bottom:var(--s-2)}
.cn-contact dd{margin:0;color:var(--ink-2)}

/* ============================================================
   PHONES
   ============================================================ */
@media (max-width:47.99rem){
  .cn-h1{font-size:clamp(1.9rem,9.6vw,3rem)}
  .cn-h1 .ln-up{padding-left:0}
  .cn-hero-foot{padding-left:0;margin-top:var(--s-4)}
  .cn-lede{font-size:var(--t-sm)}
  .cn-cta{width:100%}
  .cn-cta .btn{flex:1 1 auto}
  .cn-cue{display:none}
  .st-h{font-size:clamp(1.9rem,9.4vw,3.4rem)}
  .st-h .ln + .ln{padding-left:0}
  .st-p{font-size:var(--t-md)}
  .cn-work-head{align-items:flex-start;flex-direction:column;gap:var(--s-2)}
  .cn-hint{text-align:left}
  .cn-hint br{display:none}
  .cyl-links{margin-left:0;width:100%}
  .cyl-links .btn{flex:1 1 auto}
  .cn-svc .n{display:none}
  .cn-svc a{grid-template-columns:1fr auto}
  .cn-svc .sh{grid-column:1}
  .cn-svc .arrow{grid-column:2}
  .cn-huge{font-size:clamp(2.3rem,11vw,4rem)}
  .btn.cn-xl{width:100%}
}
/* a short laptop screen: the statement type steps down so the scene
   still fits between the bar and the rail */
@media (min-width:48rem) and (max-height:46rem){
  .cn-h1{font-size:clamp(2.2rem,min(5.7vw,9.5vh),6.6rem)}
  .st-h{font-size:clamp(2rem,min(8vw,14vh),9.25rem)}
}