/* ==========================================================================
   Ollie Daglish — "Field Notes"
   Warm bone type on cool graphite. Hairlines, tracked mono labels,
   jade used as a signal (~2% coverage), never as a highlighter.
   ========================================================================== */

@font-face{font-family:Aileron;font-weight:300;font-style:normal;font-display:swap;
  src:url(https://framerusercontent.com/assets/zwilPtpDzv9O9YAejrtnjecscg.woff2) format("woff2")}
@font-face{font-family:Aileron;font-weight:400;font-style:normal;font-display:swap;
  src:url(https://framerusercontent.com/assets/LnlFZ5ZUXRaYAm8jDpvZSmzclA.woff2) format("woff2")}
@font-face{font-family:Aileron;font-weight:600;font-style:normal;font-display:swap;
  src:url(https://framerusercontent.com/assets/suQ36PpzxORmpGk06KApyPNrO0.woff2) format("woff2")}
@font-face{font-family:Aileron;font-weight:700;font-style:normal;font-display:swap;
  src:url(https://framerusercontent.com/assets/RREMWv6SMZi54dQqnELmrDAWKHw.woff2) format("woff2")}

:root{
  /* palette */
  --base:#0a0b0d;
  --raise:#121419;
  --raise-2:#171a20;
  --rule:#242830;
  --rule-soft:#1b1e24;
  --bone:#edeae3;
  --dim:#868c97;
  --dim-2:#5f656e;
  --accent:#ff0000;
  --accent-dim:#7a0000;

  /* type */
  --display:Aileron,"Helvetica Neue",Arial,sans-serif;
  --body:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* rhythm */
  --gut:clamp(20px,4.4vw,64px);
  --maxw:1240px;
  --sec:clamp(88px,11vw,168px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--base);color:var(--bone);
  font-family:var(--body);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* nothing may ever make the page scroll sideways. clip (not hidden) keeps the
   sticky header working and still lets content overflow vertically */
@supports (overflow:clip){ html,body{overflow-x:clip} }
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,p,figure{margin:0}
button{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.skip{
  position:absolute;left:-9999px;top:10px;z-index:100;
  background:var(--bone);color:var(--base);padding:10px 16px;border-radius:4px;
}
.skip:focus{left:16px}

/* ---------- type roles ---------- */
.label{
  font-family:var(--mono);font-size:11px;font-weight:400;
  text-transform:uppercase;letter-spacing:.18em;color:var(--dim);
  margin-bottom:18px;
}
.d-xl{
  font-family:var(--display);font-weight:600;
  font-size:clamp(46px,7.2vw,96px);line-height:.96;letter-spacing:-.035em;
}
.d-l{
  font-family:var(--display);font-weight:600;
  font-size:clamp(32px,4.4vw,58px);line-height:1.02;letter-spacing:-.03em;
}
.d-m{
  font-family:var(--display);font-weight:600;
  font-size:clamp(28px,3.4vw,44px);line-height:1.06;letter-spacing:-.028em;
}
.lead{
  font-size:clamp(16px,1.35vw,19px);line-height:1.6;
  color:var(--dim);max-width:46ch;
}

.sec-head{margin:0 auto clamp(36px,4.4vw,60px);max-width:760px;text-align:center}
.sec-cue{
  margin-top:14px;font-size:clamp(14px,1.2vw,16px);color:rgba(237,234,227,.78);
}
.sec-cue span{color:#ff0000;margin-left:4px;display:inline-block;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.sec-note{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--dim-2);margin-top:16px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--body);font-size:15px;font-weight:500;letter-spacing:-.005em;
  padding:13px 22px;border-radius:2px;border:1px solid var(--rule);
  color:var(--bone);background:transparent;cursor:pointer;
  transition:background .22s ease,border-color .22s ease,color .22s ease;
  white-space:nowrap;
}
.btn:hover{border-color:#3a404a;background:rgba(255,255,255,.04)}

.btn--primary{background:var(--bone);color:#0a0b0d;border-color:var(--bone);font-weight:600}
.btn--primary:hover{background:#fff;border-color:#fff;color:#0a0b0d}

.btn--ghost{color:var(--dim)}
.btn--ghost:hover{color:var(--bone)}

.btn--sm{font-size:13px;padding:9px 16px}
.btn--wide{width:100%;padding:16px 22px;font-size:16px}

/* ==========================================================================
   SIGNATURE — spots indicator
   ========================================================================== */
.spots{display:inline-flex;align-items:center;gap:5px}
.spots .slot{
  display:block;width:16px;height:3px;border-radius:1px;
  background:var(--rule);position:relative;
}
.spots .slot.is-taken::after{
  content:"";position:absolute;inset:0;
  background:var(--dim-2);border-radius:1px;
}
.spots .slot.is-open{
  background:#ff0000;
  box-shadow:0 0 0 1px rgba(255,0,0,.55),0 0 14px 2px rgba(255,0,0,.6);
  animation:breathe 2.4s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{box-shadow:0 0 0 1px rgba(255,0,0,.55),0 0 14px 2px rgba(255,0,0,.6)}
  50%{box-shadow:0 0 0 5px rgba(255,0,0,.14),0 0 30px 6px rgba(255,0,0,.38)}
}
.spots--big .slot{width:46px;height:5px;border-radius:2px}

.spots__read{
  font-family:var(--mono);font-size:13px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--bone);margin-top:20px;
}
.spots__read b{
  color:var(--accent);font-weight:500;font-size:1.5em;
  text-shadow:0 0 18px rgba(255,0,0,.75);
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.head{
  position:sticky;top:0;z-index:50;
  background:rgba(10,11,13,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease,background .3s ease;
}
.head.is-stuck{border-bottom-color:var(--rule-soft);background:rgba(10,11,13,.9)}
.head__in{
  max-width:var(--maxw);margin:0 auto;padding:14px var(--gut);
  display:flex;align-items:center;gap:20px;
}
.mark{display:flex;align-items:baseline;gap:10px;min-width:0}
.mark__name{
  font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.02em;
  white-space:nowrap;
}
.mark__role{
  font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.18em;color:var(--dim-2);white-space:nowrap;
}
.head__mid{margin-left:auto;display:flex;align-items:center;gap:12px}
.head__act{display:flex;align-items:center;gap:8px}
.head__act .btn{flex:0 0 auto}
.mark{min-width:0;flex:1 1 auto}
.mark__name,.mark__role{overflow:hidden;text-overflow:ellipsis}
.lbl-short{display:none}
/* narrow phones: short label so the wordmark never slides under the buttons */
@media (max-width:440px){
  .lbl-long{display:none}
  .lbl-short{display:inline}
  .head__in{gap:10px}
}
.head__status{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--bone);white-space:nowrap;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;overflow-x:clip;
  padding:clamp(48px,7vw,96px) 0 0;
  min-height:clamp(660px,80vw,1120px);
  display:flex;flex-direction:column;
}

/* he bleeds off the top and right edge of the viewport, like the original */
.hero__portrait{
  position:absolute;top:0;bottom:0;margin:0;
  right:clamp(0px,16vw,232px);
  width:clamp(320px,62vw,980px);
  pointer-events:none;
}
.hero__portrait img{
  width:100%;height:100%;
  object-fit:contain;object-position:center bottom;
  /* lighten: anything darker than the page is replaced by the page exactly,
     anything brighter passes through untouched. So his ground vanishes without
     the heavy contrast crush that was dimming him, and nothing is cropped. */
  mix-blend-mode:lighten;
  filter:brightness(1.16) contrast(1.4) saturate(1.12);
  /* edges break into 1px blocks that flow outward, as if shedding off him.
     the four frames are a coherent wave, not random noise: each cell keeps a
     fixed threshold and only flips as the wave reaches it, so slowing it down
     reads as movement rather than flicker. */
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-image:url(assets/fray-1.svg); mask-image:url(assets/fray-1.svg);
  -webkit-mask-size:100% 100%;   mask-size:100% 100%;
  animation:frayWave 5.4s steps(1,end) infinite,
            frayDrift 17s ease-in-out infinite;
}
/* ping-pong through the frames so the loop never snaps back */
@keyframes frayWave{
  0%     {-webkit-mask-image:url(assets/fray-1.svg); mask-image:url(assets/fray-1.svg)}
  16.66% {-webkit-mask-image:url(assets/fray-2.svg); mask-image:url(assets/fray-2.svg)}
  33.33% {-webkit-mask-image:url(assets/fray-3.svg); mask-image:url(assets/fray-3.svg)}
  50%    {-webkit-mask-image:url(assets/fray-4.svg); mask-image:url(assets/fray-4.svg)}
  66.66% {-webkit-mask-image:url(assets/fray-3.svg); mask-image:url(assets/fray-3.svg)}
  83.33% {-webkit-mask-image:url(assets/fray-2.svg); mask-image:url(assets/fray-2.svg)}
  100%   {-webkit-mask-image:url(assets/fray-1.svg); mask-image:url(assets/fray-1.svg)}
}
@keyframes frayDrift{
  0%,100%{-webkit-mask-size:100% 100%;     mask-size:100% 100%}
  50%    {-webkit-mask-size:103.4% 102.5%; mask-size:103.4% 102.5%}
}

/* a text sent from the phone he's holding: dots first, then the message */
.msg-typing,
.msg{
  position:absolute;z-index:3;
  left:80%;top:30%;
  transform-origin:0 0;
}

/* typing indicator */
.msg-typing{
  display:none;align-items:center;gap:5px;
  padding:13px 15px;
  background:linear-gradient(180deg,#ff1a1a 0%,#cc0000 100%);
  border-radius:7px 20px 20px 20px;
  box-shadow:0 14px 36px rgba(0,0,0,.62),0 0 38px rgba(255,0,0,.32);
}
.msg-typing.is-on{display:inline-flex;animation:popIn .3s cubic-bezier(.34,1.5,.64,1) both}
.msg-typing.is-off{animation:popOut .2s ease forwards}
.msg-typing i{
  width:7px;height:7px;border-radius:50%;background:#ffffff;opacity:.45;
  animation:typing 1.05s ease-in-out infinite;
}
.msg-typing i:nth-child(2){animation-delay:.16s}
.msg-typing i:nth-child(3){animation-delay:.32s}
@keyframes typing{
  0%,60%,100%{transform:translateY(0);opacity:.35}
  30%{transform:translateY(-4px);opacity:.9}
}

/* the message itself */
.msg{
  width:min(300px,34%);
  margin:0;padding:15px 19px;
  background:linear-gradient(180deg,#ff1a1a 0%,#cc0000 100%);
  color:#ffffff;
  border-radius:7px 20px 20px 20px;
  font-size:clamp(12.5px,1.05vw,15px);line-height:1.45;
  font-weight:500;letter-spacing:-.008em;
  box-shadow:0 14px 36px rgba(0,0,0,.62),0 0 38px rgba(255,0,0,.32);
  opacity:0;pointer-events:none;
}
.msg.is-on{opacity:1;pointer-events:auto;animation:popIn .42s cubic-bezier(.34,1.45,.64,1) both}

/* tail on the top-left, pointing back up at the phone */
.msg-typing::after,
.msg::after{
  content:"";position:absolute;top:0;left:-9px;
  width:16px;height:13px;background:#ff1a1a;
  clip-path:polygon(0 0,100% 0,100% 100%);   /* flush with the top, overlaps the corner */
}

@keyframes popIn{
  from{opacity:0;transform:translate(-10px,-8px) scale(.82)}
  to{opacity:1;transform:none}
}
@keyframes popOut{
  to{opacity:0;transform:scale(.8)}
}

.hero__grid{
  position:relative;z-index:2;
  max-width:var(--maxw);width:100%;margin:0 auto;padding:0 var(--gut);
}
.hero__grid{padding-bottom:clamp(56px,6vw,90px)}
.hero__copy{max-width:min(620px,54%)}
.hero__copy .lead{margin-top:26px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,2.8vw,36px)}

.hero__note{
  margin-top:15px;
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.15em;color:var(--dim-2);
}

.arrow{
  position:absolute;z-index:3;
  left:calc(97% - 22px);
  top:40%;bottom:0;                 /* reaches the foot of the hero */
  width:clamp(26px,3vw,44px);
  display:flex;flex-direction:column;align-items:center;
  filter:
    drop-shadow(0 0 1.5px rgba(255,150,150,.95))
    drop-shadow(0 0 5px rgba(255,0,0,.7))
    drop-shadow(0 0 13px rgba(255,0,0,.35));
  opacity:0;
  /* hidden from the bottom up. the side and bottom insets are negative so the
     glow has room — a zero inset was slicing the glow into a hard rectangle */
  -webkit-clip-path:inset(0 -40px 100% -40px);
          clip-path:inset(0 -40px 100% -40px);
}
.arrow.is-on{
  opacity:1;
  animation:arrowDraw 1.15s cubic-bezier(.3,.66,.28,1) forwards;
}
/* travels out of the message and down to the video, head arriving last */
@keyframes arrowDraw{
  from{-webkit-clip-path:inset(0 -40px 100% -40px);   clip-path:inset(0 -40px 100% -40px)}
  to  {-webkit-clip-path:inset(0 -40px -40px -40px);  clip-path:inset(0 -40px -40px -40px)}
}

/* shaft: three stacked widths so it reads as a lit tube, and it stretches */
.arrow__line{
  flex:1 1 auto;position:relative;
  width:clamp(3.8px,.44vw,6.4px);
  background:rgba(255,0,0,.5);
}
.arrow__line::before,
.arrow__line::after{
  content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
}
.arrow__line::before{width:clamp(2.3px,.26vw,3.9px);background:#ff0000}
.arrow__line::after{width:clamp(.8px,.1vw,1.5px);background:#ffd6d6}

.arrow__head{flex:0 0 auto;width:100%;height:auto;display:block;margin-top:-1px}

.rail{
  max-width:var(--maxw);width:100%;margin:0 auto;
  padding:clamp(40px,4.2vw,60px) var(--gut) clamp(34px,3.6vw,52px);
  display:grid;grid-template-columns:repeat(3,1fr);
}
.rail__k::before{
  content:"";display:inline-block;vertical-align:middle;
  position:relative;top:-.06em;
  width:8px;height:8px;margin-right:12px;border-radius:50%;
  background:#ff3b30;
  animation:pulse 1.8s ease-out infinite;
}
@keyframes pulse{
  0%  {box-shadow:0 0 6px rgba(255,59,48,.75),0 0 0 0 rgba(255,59,48,.7)}
  100%{box-shadow:0 0 6px rgba(255,59,48,.75),0 0 0 9px rgba(255,59,48,0)}
}

/* inside the availability panel: stacked rows, as on phones */
.rail.rail--panel{
  display:flex;flex-direction:column;
  max-width:none;margin:clamp(22px,2.4vw,32px) 0 0;padding:0;
  border-top:1px solid var(--rule-soft);
}
.rail.rail--panel li{
  flex-direction:row;align-items:baseline;gap:14px;
  padding:16px 0;border-right:0;border-bottom:1px solid var(--rule-soft);
}
.rail.rail--panel li:last-child{border-bottom:0;padding-bottom:0}
.rail li{
  padding:26px 24px 0 0;display:flex;flex-direction:column;gap:5px;
  border-right:1px solid var(--rule-soft);
}
.rail li:last-child{border-right:0}
.rail__k{
  font-family:var(--display);font-weight:600;font-size:clamp(20px,2vw,26px);
  letter-spacing:-.025em;
}
.rail__v{
  font-family:var(--mono);font-size:11px;line-height:1.5;text-transform:uppercase;
  letter-spacing:.16em;color:var(--dim-2);
  max-width:22ch;
}

/* ==========================================================================
   FILM
   ========================================================================== */
.film{max-width:var(--maxw);margin:0 auto;padding:clamp(26px,3vw,44px) var(--gut) 0}
.film__frame{
  border:1px solid var(--rule);background:var(--raise);
  aspect-ratio:16/9;overflow:hidden;
}
.film__frame wistia-player{display:block;width:100%;height:100%}

/* ==========================================================================
   TRANSFORMATIONS
   ========================================================================== */
.work{max-width:var(--maxw);margin:0 auto;padding:var(--sec) var(--gut) 0}
.work__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.4vw,18px);
}

.shot{
  position:relative;aspect-ratio:3/4;overflow:hidden;
  border:1px solid var(--rule);background:var(--raise);
  touch-action:pan-y;user-select:none;cursor:ew-resize;
  --pos:50%;
}
.shot img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;pointer-events:none;
}
.shot__before{position:absolute;inset:0;width:var(--pos);overflow:hidden;will-change:width}
.shot__before img{width:auto;height:100%;max-width:none}

.shot__bar{
  position:absolute;top:0;bottom:0;left:var(--pos);width:1px;
  background:rgba(237,234,227,.85);transform:translateX(-.5px);
  pointer-events:none;will-change:left;
}
.shot__knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:32px;height:32px;border-radius:50%;
  background:rgba(10,11,13,.6);border:1px solid rgba(237,234,227,.7);
  backdrop-filter:blur(6px);
  display:grid;place-items:center;color:var(--bone);
  border-color:rgba(255,0,0,.8);
  box-shadow:
    0 0 0 1px rgba(255,0,0,.35),
    0 0 14px rgba(255,0,0,.75),
    0 0 32px rgba(255,0,0,.45),
    0 0 58px rgba(255,0,0,.2);
}
.shot__knob svg{width:13px;height:13px}

.shot__tag{
  position:absolute;left:10px;bottom:10px;z-index:2;
  /* same face as the headings */
  font-family:var(--display);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.07em;
  color:rgba(237,234,227,.9);
  background:rgba(10,11,13,.55);backdrop-filter:blur(4px);
  padding:5px 9px;border-radius:2px;pointer-events:none;
}
.shot__tag--r{left:auto;right:10px}

/* ==========================================================================
   TESTIMONIALS — coverflow deck
   ========================================================================== */
.words{max-width:var(--maxw);margin:0 auto;padding:var(--sec) var(--gut) 0}

.deck{
  position:relative;
  height:clamp(370px,33vw,460px);
  display:flex;align-items:center;justify-content:center;
}
.deck__stage{position:relative;width:100%;height:100%}

.tcard{
  position:absolute;top:50%;left:50%;
  width:clamp(280px,44vw,620px);
  padding:clamp(22px,2.4vw,34px);
  background:var(--raise);border:1px solid var(--rule);border-radius:22px;
  transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .6s ease,
             border-color .6s ease,box-shadow .6s ease;
  will-change:transform,opacity;
}
.tcard[data-slot="0"]{
  transform:translate(-50%,-50%) scale(1);opacity:1;z-index:5;
  border-color:rgba(255,0,0,.32);
  box-shadow:0 26px 70px rgba(0,0,0,.66),0 0 64px rgba(255,0,0,.12);
}
.tcard[data-slot="-1"]{transform:translate(-88%,-50%) scale(.87);opacity:.4;z-index:4}
.tcard[data-slot="1"] {transform:translate(-12%,-50%) scale(.87);opacity:.4;z-index:4}
.tcard[data-slot="-2"]{transform:translate(-122%,-50%) scale(.76);opacity:.15;z-index:3}
.tcard[data-slot="2"] {transform:translate(22%,-50%) scale(.76);opacity:.15;z-index:3}
.tcard[data-slot="hidden"]{transform:translate(-50%,-50%) scale(.68);opacity:0;z-index:1;pointer-events:none}

/* five stars — they replay each time a card takes the centre */
.stars{display:flex;gap:5px;margin-bottom:clamp(14px,1.3vw,18px)}
.stars svg{
  width:clamp(15px,1.3vw,18px);height:clamp(15px,1.3vw,18px);
}
.tcard .stars svg{color:#d5a24f;opacity:1;transform:none}
.tcard[data-slot="0"] .stars svg{
  opacity:0;transform:scale(.4) rotate(-30deg);
  animation:starpop .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
.tcard[data-slot="0"] .stars svg:nth-child(1){animation-delay:.06s}
.tcard[data-slot="0"] .stars svg:nth-child(2){animation-delay:.14s}
.tcard[data-slot="0"] .stars svg:nth-child(3){animation-delay:.22s}
.tcard[data-slot="0"] .stars svg:nth-child(4){animation-delay:.30s}
.tcard[data-slot="0"] .stars svg:nth-child(5){animation-delay:.38s}
@keyframes starpop{to{opacity:1;transform:none}}

.tcard__text{
  font-size:clamp(15px,1.6vw,22px);line-height:1.45;letter-spacing:-.01em;color:var(--bone);
}
.tcard__by{display:flex;align-items:center;gap:13px;margin-top:clamp(18px,1.8vw,26px)}
.tcard__avatar{
  flex:0 0 auto;width:clamp(38px,3.2vw,46px);height:clamp(38px,3.2vw,46px);
  border-radius:50%;object-fit:cover;
}
.tcard__name{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.015em}
.tcard__ctx{
  font-family:var(--display);font-weight:400;
  font-size:clamp(13px,1.05vw,15px);line-height:1.4;letter-spacing:-.005em;
  color:rgba(237,234,227,.82);margin-top:5px;
}

.deck__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:10;
  width:clamp(42px,4.4vw,64px);height:clamp(26px,2.6vw,38px);
  padding:0;border:0;background:none;cursor:pointer;
  color:#ff0000;display:grid;place-items:center;
  filter:
    drop-shadow(0 0 1.5px rgba(255,150,150,.95))
    drop-shadow(0 0 6px rgba(255,0,0,.65))
    drop-shadow(0 0 15px rgba(255,0,0,.32));
  transition:color .2s ease,filter .2s ease;
}
.deck__nav:hover{color:#ff5c5c}
.deck__nav svg{width:100%;height:100%;overflow:visible}
.deck__nav--prev{left:clamp(4px,7vw,96px)}
.deck__nav--next{right:clamp(4px,7vw,96px)}

.deck__dots{display:flex;gap:8px;justify-content:center;margin-top:clamp(20px,2vw,28px)}
.deck__dots button{
  width:7px;height:7px;padding:0;border:0;border-radius:50%;
  background:rgba(237,234,227,.24);cursor:pointer;
  transition:background .25s ease,transform .25s ease,box-shadow .25s ease;
}
.deck__dots button[aria-current="true"]{
  background:var(--accent);transform:scale(1.3);
  box-shadow:0 0 10px rgba(255,0,0,.7);
}

/* ==========================================================================
   WAYS TO WORK — decision tree
   ========================================================================== */
.path{max-width:var(--maxw);margin:0 auto;padding:var(--sec) var(--gut) 0}

.tree{position:relative;margin-top:clamp(28px,3vw,44px)}
.tree__wires{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;pointer-events:none;z-index:0;
}
.tree__wires path{
  fill:none;stroke:var(--rule);stroke-width:1;
  transition:stroke .3s ease,opacity .3s ease,filter .3s ease;
}

/* the three runs from the question down to 01 / 02 / 03 — lit white */
.tree__wires path[data-level="1"]{
  stroke:#ffffff;stroke-width:1.6;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.95))
    drop-shadow(0 0 6px rgba(255,255,255,.6))
    drop-shadow(0 0 15px rgba(255,255,255,.34))
    drop-shadow(0 0 30px rgba(255,255,255,.16));
}
.tree__wires path[data-level="1"].is-on{
  stroke:#ffffff;stroke-width:2;
  filter:
    drop-shadow(0 0 2px #fff)
    drop-shadow(0 0 9px rgba(255,255,255,.8))
    drop-shadow(0 0 22px rgba(255,255,255,.5))
    drop-shadow(0 0 44px rgba(255,255,255,.24));
}

/* lower runs stay quiet hairlines, jade when their branch is picked */
.tree__wires path[data-level="2"].is-on{stroke:var(--accent);opacity:1}
.tree.is-filtered .tree__wires path:not(.is-on){opacity:.25}

/* only the three white runs to 01/02/03; the cards are a single list below */
.tree__wires path[data-level="2"]{display:none}

.tree__row{position:relative;z-index:1;display:grid;justify-items:center}
.tree__row--root{margin-bottom:clamp(34px,3.6vw,54px)}
.tree__row--branch{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.2vw,16px);
  margin-bottom:clamp(38px,4vw,60px);
}
.tree__row--leaf{
  grid-template-columns:minmax(0,760px);
  justify-content:center;
  gap:clamp(8px,.9vw,12px);
  align-items:start;justify-items:stretch;
}

.node{
  display:flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid var(--rule);background:var(--raise);
  padding:14px 18px;text-align:center;
  transition:border-color .25s ease,background .25s ease,opacity .3s ease;
}
.node--root{
  font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(15px,1.6vw,21px);
  padding:16px 28px;
}
.node--branch{
  width:100%;cursor:pointer;color:var(--bone);font:inherit;
  border-color:rgba(255,0,0,.5);
  box-shadow:0 0 10px rgba(255,0,0,.18),inset 0 0 0 0 transparent;
  transition:border-color .25s ease,background .25s ease,box-shadow .25s ease,opacity .3s ease;
}
.node--branch:hover{border-color:rgba(255,0,0,.75);box-shadow:0 0 16px rgba(255,0,0,.3);background:var(--raise-2)}
.node--branch.is-on{
  border-color:#ff0000;background:var(--raise-2);
  box-shadow:0 0 0 1px rgba(255,0,0,.45),0 0 22px rgba(255,0,0,.5),0 0 46px rgba(255,0,0,.22);
}
.node__no{
  font-family:var(--mono);font-size:clamp(16px,1.7vw,22px);font-weight:500;
  letter-spacing:.08em;color:#ff0000;flex:0 0 auto;
}
.node__t{font-size:clamp(12px,1.15vw,15px);font-weight:500;letter-spacing:-.01em}

.leaf{
  --lp:clamp(14px,1.3vw,20px);
  display:flex;flex-direction:row;align-items:stretch;
  border:1px solid var(--rule);background:var(--raise);
  padding:0;overflow:hidden;
  transition:border-color .25s ease,background .25s ease,opacity .3s ease,transform .25s ease;
}
.leaf:hover{border-color:#3a414c;background:var(--raise-2);transform:translateY(-2px)}
.tree.is-filtered .leaf:not(.is-on){opacity:.22}
.tree.is-filtered .node--branch:not(.is-on){opacity:.42}

.leaf__media{
  flex:0 0 40%;margin:0;
  border-right:1px solid var(--rule);
  background:#14171c;overflow:hidden;
}
.leaf__media img{
  display:block;width:100%;height:100%;min-height:136px;object-fit:cover;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.leaf:hover .leaf__media img{transform:scale(1.035)}
.leaf--lead .leaf__media{border-right-color:rgba(255,0,0,.3)}
.leaf__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;padding:var(--lp)}

.leaf__eyebrow{
  font-family:var(--mono);font-size:9px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--dim-2);margin-bottom:10px;
}
.leaf__eyebrow--on{color:var(--accent)}
.leaf__title{
  font-family:var(--display);font-weight:600;
  font-size:clamp(15px,1.35vw,19px);line-height:1.12;letter-spacing:-.025em;
}
.leaf__price{
  margin-top:8px;
  font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(18px,1.6vw,22px);line-height:1;color:var(--bone);
}
.leaf__price span{font-size:.62em;font-weight:400;color:var(--dim);margin-left:2px}
.leaf__text{margin-top:9px;font-size:13px;line-height:1.5;color:var(--dim)}
.leaf__cta{
  margin-top:auto;padding-top:clamp(16px,1.5vw,22px);
  font-size:13px;font-weight:500;color:var(--bone);
  display:inline-flex;align-items:center;gap:7px;
}
.leaf__cta span{color:var(--dim);transition:transform .25s ease,color .2s ease}
.leaf__cta:hover span{transform:translateX(4px);color:var(--accent)}

.leaf--lead{
  border-color:rgba(255,0,0,.34);
  background:radial-gradient(120% 140% at 0% 0%,rgba(255,0,0,.08) 0%,transparent 58%),var(--raise);
}

/* ==========================================================================
   APPLY
   ========================================================================== */
.apply{max-width:var(--maxw);margin:0 auto;padding:var(--sec) var(--gut) 0}
.apply__panel{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,5vw,80px);align-items:center;
  border:1px solid var(--rule);background:var(--raise);
  padding:clamp(32px,4.4vw,64px);
}
.apply__left .lead{margin-top:22px}
.apply__right{
  border-left:1px solid var(--rule-soft);
  padding-left:clamp(0px,3vw,44px);
}
.apply__right .btn{margin-top:28px}
.apply__fine{
  font-size:13px;color:var(--dim-2);margin-top:14px;text-align:center;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{max-width:var(--maxw);margin:0 auto;padding:var(--sec) var(--gut) 0}

/* bracketed frame — kept from the original */
.faq__box{position:relative;padding:clamp(16px,1.8vw,26px);max-width:1000px;margin:0 auto}
.brk{position:absolute;width:26px;height:26px;pointer-events:none}
.brk--tl{top:0;left:0;border-top:1px solid var(--bone);border-left:1px solid var(--bone)}
.brk--tr{top:0;right:0;border-top:1px solid var(--bone);border-right:1px solid var(--bone)}
.brk--bl{bottom:0;left:0;border-bottom:1px solid var(--bone);border-left:1px solid var(--bone)}
.brk--br{bottom:0;right:0;border-bottom:1px solid var(--bone);border-right:1px solid var(--bone)}

.faq__list{display:flex;flex-direction:column}
.faq__item{border-bottom:1px solid var(--rule-soft);transition:background .25s ease}
.faq__item:last-child{border-bottom:0}
.faq__item.is-open{background:rgba(255,255,255,.055)}

.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(15px,1.5vw,21px) clamp(12px,1.5vw,22px);
  background:none;border:0;cursor:pointer;text-align:left;color:var(--bone);
  font-family:var(--mono);font-weight:400;
  font-size:clamp(12px,1.55vw,22px);line-height:1.45;
  text-transform:uppercase;letter-spacing:0;
  transition:color .2s ease;
}
.faq__q:hover{color:#fff}

/* [+] in its own bracket box — kept from the original */
.faq__sign{position:relative;flex:0 0 auto;width:20px;height:20px}
.faq__sign::before,.faq__sign::after{
  content:"";position:absolute;top:50%;left:50%;background:#ff0000;
  box-shadow:0 0 6px rgba(255,0,0,.55);
  transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s ease,background .2s ease;
}
.faq__sign::before{width:10px;height:1px;transform:translate(-50%,-50%)}
.faq__sign::after{width:1px;height:10px;transform:translate(-50%,-50%)}
.faq__item.is-open .faq__sign::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq__item.is-open .faq__sign::before{background:#ff0000}

.faq__sign i{position:absolute;width:5px;height:5px}
.faq__sign i:nth-child(1){top:0;left:0;border-top:1px solid var(--dim);border-left:1px solid var(--dim)}
.faq__sign i:nth-child(2){top:0;right:0;border-top:1px solid var(--dim);border-right:1px solid var(--dim)}
.faq__sign i:nth-child(3){bottom:0;left:0;border-bottom:1px solid var(--dim);border-left:1px solid var(--dim)}
.faq__sign i:nth-child(4){bottom:0;right:0;border-bottom:1px solid var(--dim);border-right:1px solid var(--dim)}

.faq__a{overflow:hidden;height:0;transition:height .4s cubic-bezier(.22,1,.36,1)}
.faq__a-in{
  padding:0 clamp(40px,4vw,64px) clamp(18px,1.8vw,24px) clamp(12px,1.5vw,22px);
  max-width:62ch;
  font-family:var(--body);font-size:16px;line-height:1.62;color:var(--dim);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{margin-top:var(--sec);border-top:1px solid var(--rule);background:var(--base)}

.foot__social{
  max-width:var(--maxw);margin:0 auto;
  border-top:1px solid var(--rule-soft);
  padding:clamp(40px,4.2vw,60px) var(--gut) clamp(38px,3.8vw,56px);
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:clamp(16px,3vw,48px);
}
.sico{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:14px}
.sico__mark{
  position:relative;isolation:isolate;
  width:clamp(46px,4.2vw,58px);height:clamp(46px,4.2vw,58px);
  display:grid;place-items:center;
  border:1px solid rgba(255,0,0,.42);border-radius:50%;color:var(--bone);
  background:var(--base);
  /* same jade glow the hero arrow carries */
  box-shadow:
    0 0 14px 1px rgba(255,0,0,.34),
    0 0 36px 7px rgba(255,0,0,.14);
  transition:border-color .3s ease,background .3s ease,transform .3s ease,box-shadow .3s ease;
}
/* wider bloom sitting behind the ring */
.sico__mark::before{
  content:"";position:absolute;z-index:-1;inset:-42%;border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(255,0,0,0) 0%,
    rgba(255,0,0,0) 53%,
    rgba(255,0,0,.3) 56%,
    rgba(255,0,0,.1) 75%,
    rgba(255,0,0,0) 100%);
  filter:blur(6px);
  transition:opacity .3s ease,transform .3s ease;
}
.sico__mark svg{width:46%;height:46%}
.sico__label{
  font-family:var(--display);font-weight:600;font-size:13px;
  letter-spacing:-.005em;color:var(--dim);transition:color .2s ease;
}
.sico:hover .sico__mark{
  border-color:rgba(255,0,0,.85);transform:translateY(-3px);
  box-shadow:
    0 0 20px 2px rgba(255,0,0,.5),
    0 0 52px 12px rgba(255,0,0,.22);
}
.sico:hover .sico__mark::before{transform:scale(1.18)}
.sico:hover .sico__label{color:var(--bone)}
.sico__arr{
  display:inline-block;width:.78em;height:.78em;margin-left:4px;vertical-align:-.02em;
  color:var(--dim);transition:color .2s ease,transform .25s cubic-bezier(.34,1.6,.64,1);
}
.sico:hover .sico__arr{color:#ff0000;transform:translate(2px,-2px)}

.foot__figure{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(30px,3.4vw,50px) var(--gut) 0;
  border-top:1px solid var(--rule-soft);
  display:flex;flex-direction:column;align-items:center;
}
.fig__cta{
  position:relative;z-index:2;
  margin-bottom:clamp(48px,6vw,84px);        /* clear space above his head */
  /* sides break into pixels */
  -webkit-mask:url(assets/fray-btn.svg) center / 100% 100% no-repeat;
          mask:url(assets/fray-btn.svg) center / 100% 100% no-repeat;
}
.fig-wrap{position:relative;width:clamp(290px,42vw,580px)}
.fig{
  display:block;width:100%;height:auto;
  mix-blend-mode:lighten;                     /* black ground drops out into the page */
  filter:brightness(1.5) contrast(1.08);
}
/* pixels shedding off his outline; oversized so they can drift past the image box */
.fig-dust{
  position:absolute;left:-8%;top:-8%;width:116%;height:116%;
  pointer-events:none;mix-blend-mode:lighten;
}

/* ==========================================================================
   REVEAL
   ========================================================================== */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.is-in{opacity:1;transform:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1000px){
  .tree__row--leaf{grid-template-columns:1fr}
  .leaf[data-from]{grid-column:1}
  .tree__wires path[data-level="2"]{display:none}
  .deck__nav--prev{left:2px}
  .deck__nav--next{right:2px}
  .hero{min-height:0;padding-bottom:0}
  .hero__copy{max-width:none}
  .hero__portrait{
    position:relative;inset:auto;width:100%;
    height:clamp(500px,160vw,760px);margin-top:clamp(-18px,-2vw,0px);
  }
  .hero__portrait img{object-fit:cover;object-position:center 20%}
  .msg-typing,.msg{left:6%;top:33%;transform-origin:100% 0}
  .arrow{left:30%;top:56%;bottom:0}
  .msg{width:min(235px,66%);padding:13px 16px;border-radius:17px 6px 17px 17px}
  .msg-typing{border-radius:17px 6px 17px 17px}
  .msg-typing::after,.msg::after{
    left:auto;right:-9px;
    clip-path:polygon(0 0,100% 0,0 100%);
  }

  .apply__panel{grid-template-columns:1fr;gap:36px}
  .apply__right{border-left:0;border-top:1px solid var(--rule-soft);padding-left:0;padding-top:32px}
  .head__status{display:none}
}

@media (max-width:720px){
  body{font-size:16px}
  .work__grid{grid-template-columns:repeat(2,1fr)}
  .tree__row--branch{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:26px}
  .tree__row--root{margin-bottom:30px}
  .node--branch{flex-direction:column;gap:5px;padding:11px 6px}
  .node__t{font-size:11.5px;line-height:1.25}
  .leaf__media{flex-basis:38%}
  .leaf__media img{min-height:118px}
  .deck{height:auto}
  .deck__stage{height:auto;display:grid}
  .tcard{position:relative;top:auto;left:auto;width:100%;grid-area:1 / 1}
  .tcard[data-slot]{transform:none;opacity:1;box-shadow:0 18px 50px rgba(0,0,0,.6)}
  .tcard:not([data-slot="0"]){visibility:hidden;opacity:0;pointer-events:none}
  /* arrows sit either side, beneath the card */
  .deck{flex-direction:column;padding-bottom:54px}
  .deck__nav{top:auto;bottom:0;transform:none}
  .deck__nav--prev{left:18%}
  .deck__nav--next{right:18%}
  .foot__social{gap:8px;padding-left:12px;padding-right:12px}
  .sico__label{font-size:12px}
  .fig{width:min(300px,84vw)}
  .fig__cta{font-size:13px;padding:11px 17px}
  .rail{grid-template-columns:1fr}
  .rail li{
    border-right:0;border-bottom:1px solid var(--rule-soft);
    padding:16px 0;flex-direction:row;align-items:baseline;gap:12px;
  }
  .rail li:last-child{border-bottom:0}
  .hero__cta .btn{flex:1 1 auto}
  .foot__in{grid-template-columns:1fr;gap:32px}
  .spots--big .slot{width:38px}
}

@media (max-width:460px){
  .work__grid{grid-template-columns:1fr}
  .mark{flex-direction:column;align-items:flex-start;gap:1px}
  .head__mid{display:none}
  .head__act .btn{padding:8px 11px;font-size:12px}
  .head__act{gap:6px}
  .mark__role{font-size:9px;letter-spacing:.14em}
  .spots--big .slot{width:100%;flex:1}
  .spots--big{display:flex;width:100%}
}

/* two header buttons + wordmark + spots don't fit together below ~800px */
@media (max-width:800px){
  .head__mid{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}