/* ---------------------------------------------------------------
   Third build. The dark site and the paper site in one page.

   The two earlier builds each had half the problem. The paper one
   ran five sections of the same shape and kept its colour at the
   edges; the dark one had colour everywhere but nothing to prove.
   This one alternates ground, changes layout at every section, and
   puts the two things a portfolio actually converts on where they
   cannot be missed: the work, and the price.
   --------------------------------------------------------------- */
:root{
  /* the spectrum is the sampled strip, exactly. The three channel
     tokens are the same three colours lifted a step, because the purple
     and the teal are dark enough that at label size on the black ground
     they would sink; the coral needs nothing. */
  --r:#FF8983;
  --v:#A93A93;
  --g:#15837C;
  --spectrum:linear-gradient(90deg,#FF8983 8%,#8B197F 50%,#0F6D68);

  --ink:#0A0A0D;
  --ink-2:#101016;
  --paper:#F4F3F0;
  --paper-2:#FFFFFF;
  --paper-3:#BEBEBB;   /* the quiet grey the quotes sit on */
  --dim:#8E8E99;
  --dimmer:#5C5C66;
  --hair:rgba(255,255,255,.12);
  --hair-d:rgba(10,10,13,.14);

  --gut:clamp(1.25rem,5vw,5.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  --out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font:400 clamp(.95rem,.35vw + .88rem,1.0625rem)/1.65 "Inter Tight",system-ui,sans-serif;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:"Bricolage Grotesque","Inter Tight",sans-serif;font-weight:700;letter-spacing:-.045em;line-height:.95}
p{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
b{font-weight:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;padding:.75rem 1rem;background:var(--paper);color:var(--ink);z-index:99}
.skip:focus{left:.5rem;top:.5rem}
.h2{font-size:clamp(2rem,5vw,4.5rem);letter-spacing:-.045em}
.mark{display:inline-block;margin-right:.4em;color:var(--g);font-size:.78em;vertical-align:.06em}
.dot{width:7px;height:7px;border-radius:50%;background:var(--g);flex:none}

/* ---------- scroll progress ---------- */
.scan{position:fixed;inset:0 0 auto 0;height:2px;z-index:60;background:rgba(255,255,255,.07)}
.scan__bar{display:block;height:100%;background:var(--spectrum);transform:scaleX(0);transform-origin:0 50%;will-change:transform}

/* ---------- bar ---------- */
.bar{
  position:relative;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.15rem var(--gut);font-size:.8125rem;
}
.bar__id{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;letter-spacing:-.02em}
/* ---------- language ---------- */
.bar__right{display:flex;align-items:center;gap:.85rem}
.lang{display:flex;padding:2px;border:1px solid var(--hair);border-radius:100px}
.lang__b{
  appearance:none;border:0;background:none;cursor:pointer;
  padding:.35rem .7rem;border-radius:100px;
  font:inherit;font-size:.75rem;letter-spacing:.06em;color:var(--dim);
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
.lang__b:hover{color:var(--paper)}
.lang__b[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.lang__b:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
@media (max-width:520px){ .lang__b{padding:.35rem .5rem} }

.bar__cta{
  padding:.5rem 1.1rem;border:1px solid var(--hair);border-radius:100px;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.bar__cta:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* ---------- shared buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 1.6rem;border:1px solid currentColor;border-radius:100px;
  font-size:.875rem;
  transition:background-color .4s var(--ease),color .4s var(--ease),transform .4s var(--ease);
}
.btn span{transition:transform .4s var(--ease)}
.btn:hover span{transform:translate(2px,-2px)}
.btn--sm{padding:.7rem 1.35rem;font-size:.8125rem;border-color:var(--hair-d)}
.btn--go{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--go:hover{background:transparent;color:var(--paper)}
.btn--sm:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ================= 1. HERO ================= */
.hero{
  position:relative;isolation:isolate;
  min-height:calc(100svh - 4rem);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(1rem,4vh,3rem) 0 clamp(.75rem,2vh,1.5rem);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(52% 40% at 6% 6%,   rgba(255,137,131,.20), transparent 66%),
    radial-gradient(48% 40% at 96% 10%, rgba(169,58,147,.44),  transparent 68%),
    radial-gradient(66% 46% at 50% 100%,rgba(21,131,124,.34),  transparent 70%);
}
.hero__grid{
  flex:1;min-height:0;display:grid;align-items:stretch;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(1.5rem,4vw,4rem);
  padding:0 var(--gut);
}
.hero__say{display:flex;flex-direction:column;justify-content:space-between;padding-bottom:clamp(1rem,3vh,2.5rem)}
.eyebrow{display:flex;align-items:center;gap:1rem;font-size:.8125rem;color:var(--dim);margin-bottom:clamp(1.25rem,3vh,2rem)}
/* the line that says what he is, sitting under the portrait */
.hero .eyebrow{font-size:clamp(.9375rem,1.15vw,1.0625rem);color:var(--paper);margin-bottom:0}
.eyebrow__rule{display:block;width:clamp(2rem,6vw,5rem);height:1px;background:var(--spectrum);flex:none}
.hero__claim{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:600;
  font-size:clamp(1.25rem,2.4vw,2.125rem);letter-spacing:-.03em;line-height:1.25;
  max-width:26ch;
}
.hero__act{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(1.75rem,4vh,2.75rem)}
/* ---------- based in Transylvania, as a turning world ---------- */
/* a badge, not a line of text: the same hairline-on-glass pill the contact
   details use, so it belongs to the page rather than sitting on it */
.based{
  display:inline-flex;align-items:center;gap:.8rem;
  align-self:flex-start;
  margin-top:clamp(2rem,9vh,5.5rem);
  padding:.4rem 1.15rem .4rem .4rem;
  border:1px solid var(--hair);border-radius:100px;
  background:rgba(10,10,13,.42);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
}
.based__t{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:600;letter-spacing:-.01em;
  font-size:clamp(.875rem,1.05vw,1rem);color:var(--paper);
}
.globe{
  position:relative;flex:none;
  width:clamp(2.75rem,3.6vw,3.5rem);aspect-ratio:1;border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.10),0 12px 28px rgba(0,0,0,.6),0 0 34px rgba(21,131,124,.32);
}
/* the surface. Land grain on a shaded sphere, travelling left, which is
   the whole rotation: at this size nothing else is legible anyway. */
.globe__ball{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 34% 27%,#23232c 0%,#121218 60%,#08080c 100%);
  box-shadow:inset -7px -5px 16px rgba(0,0,0,.8),inset 5px 4px 12px rgba(255,255,255,.05);
}
/* the graticule stays still. A grid that turned with the grain would read
   as a spinning ball of wire rather than a world. */
.globe__wire{
  position:absolute;inset:0;width:100%;height:100%;
  fill:none;stroke:rgba(244,243,240,.62);stroke-width:2.6;stroke-linecap:round;
}
.globe__rim{stroke:url(#globeRim);stroke-width:4}
/* a meridian seen straight on is an ellipse whose width is the cosine of its
   longitude. Sweep rx and the wireframe turns; four of them, a quarter turn
   apart, is enough for the eye to read it as one rotation. */
.globe__m{animation:globe-merid 9s ease-in-out infinite}
@keyframes globe-merid{ 0%{rx:49px} 50%{rx:.5px} 100%{rx:49px} }
.globe__pin{fill:var(--g);stroke:none}
.globe__ping{
  fill:none;stroke:var(--g);stroke-width:2;
  transform-box:fill-box;transform-origin:50% 50%;
  animation:globe-ping 2.8s var(--out) infinite;
}
@keyframes globe-ping{ 0%{transform:scale(.45);opacity:.85} 70%,100%{transform:scale(2.8);opacity:0} }
@media (prefers-reduced-motion:reduce){
  .globe__m{animation:none}
  .globe__ping{animation:none;opacity:0}
}
@media (max-width:900px){ .based{margin-bottom:1.75rem} }

/* the figure sits in the layout and overlaps the name below it */
.hero__me{
  margin:0;justify-self:center;align-self:center;position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;gap:1rem;
}
.hero__me picture{display:block;position:relative}
/* a framed portrait rather than a cut out figure: head and shoulders at
   the size a face wants to be, not the size a silhouette can carry */
/* No frame, because there is no longer a rectangle to frame. The studio
   backdrop was keyed out of the file itself: a white box at luminance 248
   sitting on a page at 10 read as an ID photo stapled to the design, and
   no amount of border-radius fixes a contrast gap that size. He now stands
   on the page the way the type does. */
.hero__me img{
  height:min(50vh,32rem);width:auto;
  filter:drop-shadow(0 24px 44px rgba(0,0,0,.6));
}
.hero__cap{
  display:flex;align-items:center;gap:.6rem;
  font-size:.75rem;color:var(--dim);
}
.marquee{
  position:relative;z-index:1;
  overflow:hidden;
  font-size:clamp(2.5rem,13vw,14rem);
  font-weight:700;letter-spacing:-.05em;line-height:.92;
  color:#FFFFFF;
  -webkit-user-select:none;user-select:none;
}
.marquee__track{display:flex;width:max-content;will-change:transform}
.marquee__word{display:block;padding-right:.28em;white-space:nowrap}
.marquee__word::after{content:"\00b7";padding-left:.28em;opacity:.4}

@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;align-items:start;gap:2rem}
  .hero__me{justify-self:end;margin-top:-2rem}
  .hero__me img{height:min(46vh,26rem)}
}

/* ================= 2. PROOF BAND ================= */
/* the strip is dark from the middle out, so the text is paper now; a
   scrim over the coral end keeps it readable there too */
.band{
  background:linear-gradient(90deg,rgba(10,10,13,.34),rgba(10,10,13,0) 42%),var(--spectrum);
  color:var(--paper);padding:clamp(1.75rem,4vh,2.75rem) var(--gut);
}
.band__list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));
  gap:clamp(1.25rem,3vw,2.5rem);
}
.band__list li{display:flex;align-items:baseline;gap:.7rem}
.band__list b{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:-.04em;
  font-size:clamp(1.5rem,3vw,2.5rem);line-height:1;
}
.band__list span{font-size:.8125rem;line-height:1.4;opacity:.78;max-width:22ch}

/* ================= 3. STATEMENT. Light, asymmetric ================= */
.say{
  background:var(--paper);color:var(--ink);
  padding:clamp(4.5rem,13vh,10rem) var(--gut);
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,6rem);align-items:start;
}
.say__big{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:clamp(1.75rem,4.4vw,3.75rem);letter-spacing:-.04em;line-height:1.08;
  max-width:18ch;
}
.say__big--accent{
  margin-top:.35em;
  background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* the note is pushed down, so the two columns do not start on one line */
.say__note{margin-top:clamp(2rem,10vh,7rem);color:#45454E;max-width:42ch}
.say__note p + p{margin-top:1.25rem}
.say__sig{color:var(--ink);font-family:"Bricolage Grotesque",sans-serif;font-weight:600;letter-spacing:-.02em}
@media (max-width:900px){ .say{grid-template-columns:1fr} .say__note{margin-top:0} }

/* ================= 4. WORK. The screenshots are the section ============ */
/* The work sits on paper now. The screenshots are mostly dark images,
   so a light ground gives them their own edge instead of asking a dark
   card to separate a dark picture from a dark page. */
.work{padding:clamp(4.5rem,12vh,9rem) 0 clamp(3rem,8vh,6rem);background:var(--paper);color:var(--ink);overflow:hidden}
.work__head{padding:0 var(--gut);margin-bottom:clamp(2.5rem,6vh,4.5rem)}
.work__sub{margin-top:1rem;color:#54545E;max-width:44ch}

.case{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:center;
  padding:clamp(2rem,5vh,4rem) var(--gut);
}
.case--flip .case__shot{order:2}
.case--flip .case__body{order:1}
.case__body{position:relative}
.case__body > :not(svg){position:relative;z-index:1}

.case__shot{
  display:block;position:relative;overflow:hidden;
  border:1px solid var(--hair-d);border-radius:6px;
  background:#E8E7E3;
}
.case__shot img{
  width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;
  filter:grayscale(.15) contrast(1.02);
  transform:scale(1.005);
  transition:transform 1.1s var(--out),filter .7s var(--ease);
}
.case__shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(10,10,13,.06);
  background:linear-gradient(180deg,transparent 62%,rgba(10,10,13,.14));
  opacity:1;transition:opacity .6s var(--ease);
}
.case__shot:hover img{transform:scale(1.03);filter:grayscale(0) contrast(1)}
.case__shot:hover::after{opacity:.4}

.case__n{display:flex;align-items:center;gap:.85rem;font-size:.75rem;letter-spacing:.14em;color:#6E6E78}
.case__n i{display:block;width:2rem;height:1px;background:var(--hair-d);flex:none}
.case__name{font-size:clamp(2rem,5vw,4rem);letter-spacing:-.05em;margin-top:1rem}
.case__desc{margin-top:1rem;max-width:34ch;color:#45454E;font-size:clamp(1rem,1.2vw,1.125rem);line-height:1.55}

/* ---------- the line system that fills the space beside each case ----------
   Five concentric curves turning at five speeds, two of them dashed, plus a
   pair of travelling dots. Every ring is a rotation of one ellipse, which is
   why this costs a handful of transforms and no library. The svg is absolute
   and pointer-inert, so nothing here can move the text or catch a click. */
.orbit{
  --o1:var(--r);--o2:var(--g);--o3:var(--v);
  position:absolute;z-index:0;pointer-events:none;overflow:visible;
  top:50%;right:calc(var(--gut) * -.55 - 4.5rem);
  width:min(30rem,116%);height:auto;aspect-ratio:1;
  transform:translateY(-50%);
}
.case--flip .orbit{right:auto;left:calc(var(--gut) * -.55 - 4.5rem)}
/* each case leads with a different channel, and starts mid-turn, so the four
   read as one system rather than four copies of the same clock */

.orbit__l,.orbit__s{
  transform-box:view-box;transform-origin:50% 50%;
  animation:orbit-turn linear infinite;
}
.orbit__l{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
@keyframes orbit-turn{ to{ transform:rotate(360deg) } }
.orbit__l--a{stroke:var(--o1);opacity:.42;animation-duration:26s}
.orbit__l--b{stroke:var(--o3);opacity:.38;animation-duration:34s;animation-direction:reverse}
.orbit__l--c{stroke:var(--o2);opacity:.42;animation-duration:46s}
.orbit__l--d{stroke:var(--o3);opacity:.26;stroke-dasharray:3 13;animation-duration:64s;animation-direction:reverse}
.orbit__l--e{stroke:var(--o1);opacity:.17;stroke-dasharray:1 10;animation-duration:88s}
.orbit__d{fill:var(--o2);stroke:none}
.orbit__d--b{fill:var(--o3)}
.orbit__s--1{animation-duration:19s}
.orbit__s--2{animation-duration:29s;animation-direction:reverse}
@media (prefers-reduced-motion:reduce){ .orbit__l,.orbit__s{animation:none} }

/* ---------- the contour field, for the two flipped cases ----------
   Those put their copy against the outer edge, so the empty room is on the
   inside, between the last line of text and the screenshot. Seven smooth
   waves drift across it and run out underneath the shot. Each path is drawn
   three periods wider than the box, so translating by exactly one period
   (120 units) loops with no seam. A radial mask keeps it from ending on a
   hard rectangle. */
.wave{
  --w1:var(--g);--w2:var(--v);--w3:var(--r);
  position:absolute;z-index:0;pointer-events:none;
  top:50%;left:50%;
  width:min(34rem,126%);aspect-ratio:4/3;height:auto;
  transform:translateY(-50%);
  -webkit-mask-image:radial-gradient(closest-side ellipse at 50% 50%,#000 46%,transparent 100%);
  mask-image:radial-gradient(closest-side ellipse at 50% 50%,#000 46%,transparent 100%);
}
.wave__g{
  transform-box:view-box;transform-origin:0 0;
  animation:wave-drift linear infinite;
}
@keyframes wave-drift{ to{ transform:translateX(-120px) } }
.wave__p{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.wave__p--a{stroke:var(--w1);opacity:.6}
.wave__p--b{stroke:var(--w2);opacity:.5}
.wave__p--c{stroke:var(--w3);opacity:.44}
.wave__d{fill:var(--w1);stroke:none}
.wave__d--b{fill:var(--w3)}
/* seven speeds, alternating direction: the field never reads as one sheet */
.wave__g--1{animation-duration:17s}
.wave__g--2{animation-duration:26s;animation-direction:reverse}
.wave__g--3{animation-duration:21s}
.wave__g--4{animation-duration:31s;animation-direction:reverse}
.wave__g--5{animation-duration:24s}
.wave__g--6{animation-duration:35s;animation-direction:reverse}
.wave__g--7{animation-duration:19s}
@media (prefers-reduced-motion:reduce){ .wave__g{animation:none} }

/* ---------- rooms, for Garden Rooms ----------
   Nested rounded squares, each turning at its own rate. The interest is the
   moire where two edges cross at a shallow angle, so the sizes step evenly
   and only the speeds differ. Outer margin, like the rings. */
.frame{
  --f1:var(--v);--f2:var(--r);--f3:var(--g);
  position:absolute;z-index:0;pointer-events:none;overflow:visible;
  top:50%;right:calc(var(--gut) * -.55 - 4.5rem);
  width:min(30rem,116%);aspect-ratio:1;height:auto;
  transform:translateY(-50%);
}
.case--flip .frame{right:auto;left:calc(var(--gut) * -.55 - 4.5rem)}
.frame__g{transform-box:view-box;transform-origin:50% 50%;animation:orbit-turn linear infinite}
.frame__r{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.frame__r--a{stroke:var(--f1);opacity:.44}
.frame__r--b{stroke:var(--f2);opacity:.4}
.frame__r--c{stroke:var(--f3);opacity:.44}
.frame__d{fill:var(--f3);stroke:none}
.frame__d--b{fill:var(--f2)}
.frame__g--1{animation-duration:38s}
.frame__g--2{animation-duration:29s;animation-direction:reverse}
.frame__g--3{animation-duration:47s}
.frame__g--4{animation-duration:23s;animation-direction:reverse}
.frame__g--5{animation-duration:34s}
.frame__g--6{animation-duration:16s}
.frame__g--7{animation-duration:25s;animation-direction:reverse}

/* ---------- the coil, for Specimoso ----------
   Three arms of one Archimedean spiral, 120 degrees apart, turning at close
   but unequal rates so the arms drift out of register. Inner gutter, like the
   contour field, because this case is flipped too. */
.coil{
  --c1:var(--g);--c2:var(--r);--c3:var(--v);
  position:absolute;z-index:0;pointer-events:none;
  top:50%;left:48%;
  width:min(32rem,122%);aspect-ratio:1;height:auto;
  transform:translateY(-50%);
  -webkit-mask-image:radial-gradient(closest-side circle at 50% 50%,#000 58%,transparent 100%);
  mask-image:radial-gradient(closest-side circle at 50% 50%,#000 58%,transparent 100%);
}
.coil__g{transform-box:view-box;transform-origin:50% 50%;animation:orbit-turn linear infinite}
.coil__p{fill:none;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.coil__p--a{stroke:var(--c1);opacity:.5}
.coil__p--b{stroke:var(--c2);opacity:.44}
.coil__p--c{stroke:var(--c3);opacity:.44}
.coil__d{fill:var(--c1);stroke:none}
.coil__d--b{fill:var(--c3)}
.coil__g--1{animation-duration:44s}
.coil__g--2{animation-duration:52s}
.coil__g--3{animation-duration:38s}
.coil__g--4{animation-duration:21s;animation-direction:reverse}
@media (prefers-reduced-motion:reduce){ .frame__g,.coil__g{animation:none} }
.case .btn{margin-top:1.5rem}

@media (max-width:900px){
  .case{grid-template-columns:1fr;gap:1.5rem}
  .case--flip .case__shot{order:0}
  .case--flip .case__body{order:0}
  .orbit{width:min(22rem,96%);opacity:.65;right:calc(var(--gut) * -.8)}
  .case--flip .orbit{left:calc(var(--gut) * -.8)}
  .wave{width:min(24rem,104%);left:auto;right:calc(var(--gut) * -.8);opacity:.7}
  .frame{width:min(22rem,96%);opacity:.65;right:calc(var(--gut) * -.8)}
  .coil{width:min(24rem,104%);left:auto;right:calc(var(--gut) * -.8);opacity:.7}
}

/* ================= 5. PRICING. Light ================= */
/* Inverted from the work above it: the number lands on black, and the
   tier being recommended is the one lit up rather than the one darkened */
.price{background:var(--ink-2);color:var(--paper);padding:clamp(4.5rem,13vh,10rem) var(--gut);border-top:1px solid var(--hair-d)}
.price__head{max-width:60rem;margin-bottom:clamp(2.5rem,6vh,4.5rem)}
.price__lede{margin-top:1.25rem;color:#A3A3AD;max-width:52ch;font-size:clamp(1rem,.4vw + .9rem,1.125rem)}
/* What every package carries, said once at the top rather than three
   times down the columns. The tiers below then only have to show what
   actually differs, which is the page count and the rounds. */
.incl{
  display:flex;flex-wrap:wrap;gap:.6rem .5rem;
  margin-bottom:clamp(2rem,4vh,3rem);
}
.incl li{
  display:flex;align-items:center;gap:.55rem;
  padding:.5rem 1rem .5rem .85rem;
  border:1px solid var(--hair);border-radius:100px;
  font-size:.8125rem;color:#C4C3C9;
}
.incl li::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;background:var(--g);
}
.incl li:nth-child(3n+1)::before{background:var(--r)}
.incl li:nth-child(3n+3)::before{background:var(--v)}
.incl__k{
  margin-bottom:.9rem;
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer);
}

.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:clamp(1rem,2vw,1.5rem)}
.tier{
  position:relative;isolation:isolate;
  padding:clamp(1.75rem,3.5vh,2.5rem);
  border:1px solid var(--hair);border-radius:8px;
  background:rgba(255,255,255,.03);
}
.tier--pick{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.tier--pick .tier__what{color:#54545E}
.tier--pick .tier__n{color:var(--dimmer)}
.tier__n{font-size:.75rem;letter-spacing:.18em;color:var(--g)}
.tier__name{font-size:clamp(1.25rem,1.9vw,1.625rem);font-weight:600;margin-top:1.25rem}
/* no "from" on these: the whole point of the cap is that the number is
   the number, and a "from" would quietly take that promise back */
.tier__fig{margin-top:1rem;display:flex;align-items:baseline;gap:.5rem}
.tier__fig b{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:-.04em;
  font-size:clamp(1.875rem,3.6vw,2.75rem);line-height:1;color:var(--paper);
}
.tier--pick .tier__fig b{color:var(--ink)}
.tier__what{margin-top:1.25rem;color:#A3A3AD;font-size:.9375rem;line-height:1.6}
/* what each tier stops at. A fixed price with no stated edge is just an
   unpaid open ticket, so the edge is on the page next to the figure. */
.tier__has{
  margin-top:1.5rem;padding-top:1.25rem;
  border-top:1px solid var(--hair);
  display:grid;gap:.6rem;
}
.tier__has li{
  position:relative;padding-left:1.15rem;
  font-size:.875rem;line-height:1.45;color:#A3A3AD;
}
.tier__has li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:5px;height:5px;border-radius:50%;background:var(--g);
}
.tier--pick .tier__has{border-top-color:var(--hair-d)}
.tier--pick .tier__has li{color:#54545E}

/* the care line is the only recurring money in the model, so it gets a
   shape of its own rather than a fourth column nobody reads */
.care{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(1.5rem,4vw,3rem);
  margin-top:clamp(1rem,2vw,1.5rem);
  padding:clamp(1.75rem,3.5vh,2.5rem);
  border:1px solid var(--hair);border-radius:8px;
  background:linear-gradient(90deg,rgba(21,131,124,.16),rgba(169,58,147,.12) 60%,transparent);
}
.care__say{max-width:56ch}
.care__k{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--g)}
.care__name{font-size:clamp(1.25rem,1.9vw,1.625rem);font-weight:600;margin-top:.9rem}
.care__what{margin-top:.9rem;color:#A3A3AD;font-size:.9375rem;line-height:1.6}
.care__fig{display:flex;align-items:baseline;gap:.5rem;flex:none}
.care__fig b{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:-.04em;
  font-size:clamp(1.875rem,3.4vw,2.5rem);line-height:1;color:var(--paper);
}
.care__fig span{font-size:.8125rem;color:#83838E}
.care__fig b{color:var(--g)}
.price__note{
  margin-top:clamp(2rem,4vh,3rem);max-width:56ch;color:#A3A3AD;
  font-size:clamp(1rem,.4vw + .9rem,1.125rem);
}
.price__note b{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;color:var(--paper)}

/* ================= 6. WHAT I DO. Dark ================= */
.doing{padding:clamp(6rem,18vh,12rem) var(--gut);background:var(--paper-2);color:var(--ink)}
.doing__title{font-size:clamp(2.5rem,6vw,5.5rem);margin-bottom:clamp(3.5rem,9vh,6rem)}
.doing__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:clamp(3rem,5vw,5rem)}
.item{--ch:var(--v)}
.item[data-ch="r"]{--ch:var(--r)}
.item[data-ch="g"]{--ch:var(--g)}
.item[data-ch="v"]{--ch:var(--v)}
.item__n{
  display:block;font-size:.875rem;letter-spacing:.18em;line-height:1;color:var(--ch);
  padding-bottom:clamp(.9rem,1.8vh,1.25rem);border-bottom:1px solid var(--hair-d);
  margin-bottom:clamp(2rem,4.5vh,3rem);
  transition:border-color .5s var(--ease);
}
.item:hover .item__n{border-bottom-color:var(--ch)}
.item__name{font-size:clamp(1.625rem,2.4vw,2.375rem);font-weight:600;margin-bottom:1.5rem}
.item p{color:#54545E;max-width:34ch;font-size:clamp(1rem,1.25vw,1.1875rem);line-height:1.6}

/* ================= 7. CONTACT. Dark with colour in the middle ========== */
.end{position:relative;isolation:isolate;padding:clamp(5rem,14vh,10rem) var(--gut);overflow:hidden}
.end::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(48% 60% at 12% 100%, rgba(255,137,131,.18), transparent 68%),
    radial-gradient(46% 58% at 88% 0%,   rgba(169,58,147,.40),  transparent 68%),
    radial-gradient(60% 50% at 50% 60%,  rgba(21,131,124,.28),  transparent 72%);
}
.end__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,5rem);align-items:center}
.end__head{font-size:clamp(2.25rem,6.4vw,5.5rem);letter-spacing:-.05em;line-height:.96}
.end__body{margin-top:clamp(1.5rem,3vh,2.25rem);max-width:46ch;color:#B4B4BE;font-size:clamp(1rem,.4vw + .9rem,1.125rem)}
/* both ways of reaching him sit under the headline on the left; the
   form, which is the one that actually qualifies anyone, gets the right
   hand side to itself and the only full spectrum surface on the page */
.end__ways{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(2rem,4vh,3rem)}
.end__act{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.end__act--drop{margin-top:clamp(2.5rem,7vh,5rem)}
.end__act .cta{width:100%;max-width:23rem}
.cta{
  display:flex;flex-direction:column;gap:.55rem;
  padding:clamp(1.1rem,2.2vh,1.5rem) clamp(1.35rem,2.2vw,1.75rem);
  border-radius:9px;
  background:linear-gradient(90deg,rgba(10,10,13,.34),rgba(10,10,13,0) 45%),var(--spectrum);
  background-size:100% 100%,190% 100%;background-position:0 0,0 0;
  color:var(--paper);
  transition:transform .45s var(--ease),background-position 1.4s var(--ease),box-shadow .45s var(--ease);
}
.cta__k{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;opacity:.72}
.cta__v{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:-.035em;
  font-size:clamp(1.125rem,1.7vw,1.5rem);line-height:1;
}
.cta__v i{font-style:normal;transition:transform .45s var(--ease)}
.cta:hover{transform:translateY(-3px);background-position:0 0,100% 0;box-shadow:0 20px 44px rgba(0,0,0,.5)}
.cta:hover .cta__v i{transform:translateX(5px)}
.end__note{color:var(--dim);font-size:.875rem;line-height:1.55;max-width:34ch}
.way{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;gap:.4rem;
  padding:clamp(1rem,2.2vh,1.4rem) clamp(1.5rem,3vw,2.25rem);
  border:1px solid var(--hair);border-radius:100px;
  background:rgba(10,10,13,.35);
  transition:transform .45s var(--ease);
}
.way__k{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);transition:color .45s var(--ease)}
.way__v{font-family:"Bricolage Grotesque",sans-serif;font-weight:500;letter-spacing:-.02em;font-size:clamp(1.125rem,2vw,1.5rem);white-space:nowrap}
.way::after{
  content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:2px;
  background:linear-gradient(90deg,var(--r),var(--v) 34%,var(--g) 68%,var(--r));
  background-size:220% 100%;
  -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,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;transition:opacity .4s var(--ease),background-position 2.2s linear;
}
.way:hover{transform:translateY(-2px)}
.way:hover::after{opacity:1;background-position:-120% 0}
.way:hover .way__k{color:var(--paper)}
.end__meta{display:flex;align-items:center;gap:.6rem;margin-top:clamp(1.75rem,3.5vh,2.5rem);font-size:.8125rem;color:var(--dim)}
@media (max-width:900px){ .end__grid{grid-template-columns:1fr} .way__v{white-space:normal;overflow-wrap:anywhere} }

.foot{
  display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;
  padding:2rem var(--gut);border-top:1px solid var(--hair);
  font-size:.8125rem;color:var(--dimmer);background:var(--ink);
}

/* ---------- reveals ---------- */
.js [data-rise]{opacity:0;transform:translateY(1.1rem)}
.js [data-rise].is-in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .js [data-rise]{opacity:1;transform:none}
  .marquee__track{transform:none!important}
}

/* ================= WHAT THEY SAID =================
   Two quotes, split by a hairline, the second one dropped so the pair
   does not read as a table. The whole section is then pinned: it holds
   while the contact below climbs up over it, which is why .reveal-pair
   exists at all. */
.reveal-pair{position:relative}
.word{
  position:sticky;top:0;z-index:1;
  min-height:66svh;
  display:grid;align-content:center;
  padding:clamp(3rem,7vh,5rem) var(--gut);
  /* grey, not black: two dark grounds in a row (quotes, then contact)
     flattened the section change, and the contact panel needs something
     lighter to slide up over. */
  background:var(--paper-3);color:var(--ink);
}
.word__grid{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.5rem);
  align-items:start;
  width:100%;max-width:64rem;margin-inline:auto;
}
.word__box{margin:0;position:relative}
.word__box--b{
  margin-top:clamp(2rem,6vh,4rem);
  padding-left:clamp(2rem,4vw,3.5rem);
  border-left:1px solid var(--hair-d);
}
/* a gradient clipped to one quote glyph only ever shows its first
   colour, so the two marks take a channel each instead */
.word__mark{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:clamp(2.25rem,4vw,3.5rem);line-height:.6;
  color:var(--r);
}
.word__box--b .word__mark{color:var(--v)}
.word__quote{margin:0}
.word__quote p{
  margin-top:clamp(.75rem,1.8vh,1.25rem);
  font-family:"Bricolage Grotesque",sans-serif;font-weight:500;
  font-size:clamp(1.0625rem,1.75vw,1.5rem);letter-spacing:-.022em;line-height:1.42;
}
.word__box--b .word__quote p{font-size:clamp(1rem,1.4vw,1.25rem)}
.word__who{
  display:flex;flex-wrap:wrap;gap:.35rem 1rem;align-items:baseline;
  margin-top:clamp(1rem,2.5vh,1.5rem);
  padding-top:clamp(.75rem,1.5vh,1.1rem);
  border-top:1px solid var(--hair-d);
  font-size:.875rem;
}
.word__name{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;letter-spacing:-.01em}
.word__where{color:#4B4B54}
.word__where a{border-bottom:1px solid var(--hair-d);transition:border-color .35s var(--ease)}
.word__where a:hover{border-color:var(--ink)}

/* the contact rides up over the pinned quotes, with an edge so the
   arrival reads as one panel sliding over another. It needs a ground of
   its own: until now it borrowed the body's, which was fine while
   nothing sat behind it and useless the moment something did. */
.reveal-pair .end{
  position:relative;z-index:2;
  background:var(--ink);
  box-shadow:0 -34px 70px rgba(0,0,0,.75);
  border-top:1px solid var(--hair);
}

/* ---------- get in touch, as a triangle ---------- */
.tri{
  position:relative;flex:none;
  width:clamp(11rem,15vw,13.5rem);
  aspect-ratio:216/188;
  display:grid;place-items:end center;
  transform-origin:50% 64%;
  /* the shape is a clip, not an SVG, so the fill underneath it can be a
     moving gradient: the same travelling colours the rectangle button has */
  clip-path:polygon(50% 0%,100% 100%,0% 100%);
  background:linear-gradient(90deg,var(--r),var(--v) 34%,var(--g) 68%,var(--r));
  background-size:220% 100%;background-position:0 0;
  transition:transform .5s var(--ease),background-position 1.6s var(--ease);
}
.tri__text{
  position:relative;z-index:1;width:72%;
  padding-bottom:clamp(1.1rem,2.4vh,1.7rem);
  text-align:center;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;
  line-height:1.65;color:var(--paper);
}
.tri:hover{transform:rotate(-1.4deg) scale(1.03);background-position:-120% 0}

@media (max-width:900px),(max-height:700px){
  /* nothing to pin on a screen that cannot hold the pair */
  .word{position:static;min-height:0}
  .reveal-pair .end{box-shadow:none}
  .word__grid{grid-template-columns:1fr;gap:2.5rem}
  .word__box--b{margin-top:0;padding-left:0;border-left:0;padding-top:2.5rem;border-top:1px solid var(--hair-d)}
}