@font-face{font-family:'Cormorant Garamond';src:url(fonts/cormorant-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(fonts/cormorant-500i.woff2) format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url(fonts/hanken-400.woff2) format('woff2');font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:'Kondor Serif Fallback';src:local('Garamond'),local('Georgia');size-adjust:88%;ascent-override:96%;descent-override:30%}

/* one dark world: night sky, warm rising air, ivory words, gold only for what lifts (and the button) */
:root{
  --night:#030A26;
  --ivory:#EDE6D3;
  --mist:#A6ABC6;
  --ivory-cold:#E4E2DB;   /* ivory out in the cold air, away from the light */
  --ink:#0B1338;          /* scene 5: the words on the bright warm air; scene 6: the text on the light page */
  --paper:#F3EEE4;        /* scene 6: the light page */
  --gold-deep:#B48A2C;    /* scene 6: gold that reads on the light page */
  --gold:#FFE79A;
  --display:'Cormorant Garamond','Kondor Serif Fallback',Georgia,serif;
  --text:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --gut:max(24px,6vw);
  --head:76px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--night);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--ivory);font:400 18px/1.5 var(--text);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
.skip{position:absolute;left:-999px;top:10px;z-index:99;background:var(--gold);color:var(--night);padding:10px 16px;border-radius:999px;text-decoration:none}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:999px}

/* the world stays put; scrolling moves time through it */
.world{position:fixed;inset:0;z-index:0;overflow:hidden;background:radial-gradient(60% 70% at 68% 100%,#6b3f2c 0%,#24193a 35%,#07102f 70%,#020718 100%)}
.world canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.world .birds{z-index:1}
.world .near{inset:auto;left:0;top:0;width:auto;height:auto;filter:blur(3.5px);will-change:transform;z-index:2}   /* the nearest bird, in front of every other bird */
.world .cloud{inset:auto;left:0;top:0;will-change:transform;z-index:3;visibility:hidden}   /* scene 3: soft clouds close below us, in front of every bird */
.world .grain{position:absolute;inset:0;background-size:128px 128px;pointer-events:none;z-index:4}
.track{height:1342vh;position:relative;z-index:-1}   /* 2.3vh of scrolling per unit of the climb's timeline (540 units), plus the last screen */
/* (each scene is a resting place: one swipe, wheel turn or key moves one scene; see "one gesture, one scene" in main.js) */

/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:6;height:var(--head);display:flex;align-items:center;justify-content:space-between;
  padding:0 max(var(--gut),env(safe-area-inset-right,0px)) 0 max(var(--gut),env(safe-area-inset-left,0px))}
.logo{position:relative;display:block}
.logo img{display:block;height:30px;width:auto;transition:opacity .45s ease}
.logo .ink{position:absolute;left:0;top:0;opacity:0}
/* scene 6, on the light page: the header turns navy */
.light .logo img:not(.ink){opacity:0}
.light .logo .ink{opacity:1}
.light .book{color:var(--ink);background:transparent;box-shadow:inset 0 0 0 1px rgba(11,19,56,.45)}
.light .book:hover{background:var(--gold);color:var(--night);box-shadow:inset 0 0 0 1px var(--gold)}
/* the menu: the case, then the one button */
.menu{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.nav-case{position:relative;font:500 15px/1 var(--text);letter-spacing:.01em;color:var(--ivory);text-decoration:none;padding:12px 2px;transition:color .35s ease}
.nav-case::after{content:"";position:absolute;left:2px;right:2px;bottom:6px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.16,1,.3,1)}
.nav-case:hover::after,.nav-case.cur::after{transform:scaleX(1)}
.light .nav-case{color:var(--ink)}
.light .nav-case::after{background:var(--gold-deep)}
/* a jump between far scenes dissolves through the colour of where you're going (over everything but the header) */
.veil{position:fixed;inset:0;z-index:5;opacity:0;pointer-events:none;background:var(--night)}
/* gold is kept for what lifts: the button is an outline that fills with gold under your hand */
.book{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:999px;background:rgba(3,10,38,.22);color:var(--ivory);
  box-shadow:inset 0 0 0 1px rgba(255,231,154,.55);font:500 15px/1 var(--text);letter-spacing:.01em;text-decoration:none;
  transition:background-color .35s cubic-bezier(.16,1,.3,1),color .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1)}
.book:hover{background:var(--gold);color:var(--night);box-shadow:inset 0 0 0 1px var(--gold),0 10px 30px -10px rgba(255,214,140,.55)}

/* the words live inside the scene */
.words{position:fixed;inset:0;z-index:3;pointer-events:none}
.hero{position:absolute;left:var(--gut);top:50%;transform:translateY(-46%);width:min(58vw,880px)}
h1{margin:0;font:500 clamp(46px,5.6vw,96px)/1.08 var(--display);letter-spacing:-.014em;text-wrap:balance}
h1 .m{display:block}
.sub{margin:clamp(20px,2.2vw,32px) 0 0;max-width:31em;font:400 clamp(16px,1.35vw,20px)/1.55 var(--text);color:var(--mist);text-wrap:pretty}
.m{display:inline-block;vertical-align:top}
.l,.w{display:inline-block}
/* the thesis sits centred under the condor's settled shadow, as large as the headline */
.line{position:absolute;left:50%;top:63%;transform:translate(-50%,-50%);width:min(84vw,1180px);margin:0;text-align:center;
  font:500 clamp(46px,5.6vw,96px)/1.04 var(--display);letter-spacing:-.014em;text-wrap:balance}

/* scene 3: in the cold, empty gap between the light that has gone up and the birds left below */
.lb{left:var(--gut);top:41%;transform:none;width:min(62vw,1000px);text-align:left}
.lb .pb{display:none}   /* phone line breaks, set by meaning: "Effort without / strategy only takes / a bird so far." */
/* scene 4a: high on the right, in the empty cold sky the spent air left, clear of the condor gliding over the middle */
.lc{left:auto;right:var(--gut);top:calc(var(--head) + 4vh);transform:none;width:min(50vw,840px);text-align:right}
/* scene 4b: on the left, beside the new column of rising air (it rises on the right) */
.ld{left:var(--gut);top:36%;transform:none;width:min(56vw,940px);text-align:left}
/* scene 5: centred low on the warm air that fills the sky, under your bird and the condor (a line break after "account,") */
.le{top:66%;width:min(90vw,1240px)}

/* scene 7, the close (the route): high on the left, in the deepening evening sky, clear of the birds and the road ahead of
   them; the one button under the line, a little larger than the header's, its outline lit from below like the birds */
.close{position:absolute;left:var(--gut);top:calc(var(--head) + 9vh);width:min(46vw,760px);margin:0;display:flex;flex-direction:column;
  align-items:flex-start;gap:clamp(26px,3vw,42px);text-align:left}
.lf{margin:0;font:500 clamp(46px,5.6vw,96px)/1.04 var(--display);letter-spacing:-.014em;text-wrap:balance}
.close .book{pointer-events:auto}
/* (its outline is lit from below by the sunrise, like the birds; under your hand it fills with gold, as every "Book a call" does) */
.book-xl{position:relative;isolation:isolate;min-height:56px;padding:0 34px;font-size:17px;border:1px solid transparent;
  background:linear-gradient(rgba(3,10,38,.55),rgba(3,10,38,.55)) padding-box,linear-gradient(to top,rgba(255,231,154,.95),rgba(255,231,154,.28)) border-box;
  box-shadow:0 16px 40px -20px rgba(255,200,120,.7)}
.book-xl::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:var(--gold);opacity:0;transition:opacity .35s cubic-bezier(.16,1,.3,1)}
.book-xl:hover{background:linear-gradient(rgba(3,10,38,.55),rgba(3,10,38,.55)) padding-box,linear-gradient(to top,rgba(255,231,154,.95),rgba(255,231,154,.28)) border-box;
  box-shadow:0 16px 46px -14px rgba(255,214,140,.8)}
.book-xl:hover::before{opacity:1}

/* scene 6: the results on a light page, above the whole world (only the header stays over it) */
.proof{position:fixed;inset:0;z-index:4;background:var(--paper);color:var(--ink);opacity:0;visibility:hidden;pointer-events:none;
  padding:0 var(--gut)}
.proof.on{visibility:visible;pointer-events:auto}
.pf-who{position:absolute;left:var(--gut);top:calc(var(--head) + 8vh);display:flex;align-items:center;gap:14px}
.pf-who img{width:44px;height:44px;border-radius:50%;display:block;box-shadow:0 0 0 1px rgba(11,19,56,.12)}
.pf-who b{font:500 17px/1.25 var(--text)}
.pf-who div > span{display:block;font:400 14px/1.35 var(--text);color:rgba(11,19,56,.58)}
/* the account's size and platform, beside its name: an Instagram mark and the follower count, quiet */
.pf-name{display:flex;align-items:center;gap:10px;margin:0}
.pf-meta{display:inline-flex;align-items:center;gap:5px;font:500 14px/1 var(--text);color:rgba(11,19,56,.55)}
.pf-meta em{font-style:normal;font-variant-numeric:tabular-nums}
.pf-meta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9}
.pf-meta .dot{fill:currentColor;stroke:none}
.pf-big{position:absolute;left:var(--gut);top:34%;display:flex;flex-direction:column;gap:clamp(8px,1vw,16px)}
.pf-num{font:500 clamp(84px,11.5vw,196px)/.86 var(--display);letter-spacing:-.025em;font-variant-numeric:lining-nums tabular-nums}
.pf-sub{font:500 clamp(26px,2.5vw,42px)/1.15 var(--display);color:rgba(11,19,56,.78);font-variant-numeric:lining-nums}
.pf-chart{position:absolute;left:52%;right:var(--gut);top:24%;height:42%;margin:0;cursor:crosshair}
.pf-chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;clip-path:inset(-10% 0 -10% 0)}
.pf-line{fill:none;stroke:var(--gold-deep);stroke-width:2.4px;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.pf-mark{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;opacity:0;transition:opacity .2s ease;
  background:var(--ink);box-shadow:0 0 0 4px rgba(11,19,56,.1)}
/* the 100K flag (a fine pole with its label at the top) and today's point at the end of the line */
.pf-flag,.pf-now{position:absolute;width:0;height:0;opacity:0;transform:translateY(5px);transition:opacity .45s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.pf-flag.in,.pf-now.in{opacity:1;transform:none}
.pf-flag i,.pf-now i{position:absolute;width:9px;height:9px;left:-4.5px;top:-4.5px;border-radius:50%;background:var(--gold-deep);box-shadow:0 0 0 4px rgba(180,138,44,.16)}
.pf-flag::before{content:"";position:absolute;left:-.5px;bottom:6px;width:1px;height:34px;background:var(--gold-deep)}
/* (the flag flies to the left of its pole, over the empty space above the climb, never over the line ahead) */
.pf-flag b{position:absolute;right:-.5px;bottom:40px;white-space:nowrap;font:500 13px/1 var(--text);color:#fff;background:var(--gold-deep);padding:5px 7px 5px 8px;border-radius:3px 0 0 3px}
.pf-now b{position:absolute;right:-4px;bottom:14px;white-space:nowrap;font:500 13px/1 var(--text);color:var(--ink)}
/* the three phases: a numbered point on the line where each began, the same numbers named in one row under the chart */
.pf-step{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--ink);color:var(--paper);
  font:500 11px/18px var(--text);text-align:center;box-shadow:0 0 0 3px var(--paper);opacity:0;transform:scale(.4);
  transition:opacity .35s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.pf-step.in{opacity:1;transform:none}
.pf-phases{position:absolute;left:0;right:0;top:calc(100% + 22px);display:flex;flex-wrap:wrap;gap:10px 26px}
.pf-phases span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font:400 13px/1 var(--text);color:rgba(11,19,56,.62)}
.pf-phases i{width:18px;height:18px;border-radius:50%;background:var(--ink);color:var(--paper);font:500 11px/18px var(--text);font-style:normal;text-align:center}
.pf-tip{position:absolute;transform:translate(-50%,calc(-100% - 14px));white-space:nowrap;font:500 14px/1 var(--text);color:var(--ink);
  background:#fff;padding:8px 11px;border-radius:999px;box-shadow:0 6px 22px -8px rgba(11,19,56,.28);opacity:0;transition:opacity .2s ease;pointer-events:none}
.pf-chart.reading .pf-mark,.pf-chart.reading .pf-tip{opacity:1}
.pf-more{position:absolute;left:var(--gut);bottom:12%;display:flex;gap:clamp(28px,4vw,64px);margin:0;padding:0;list-style:none}
.pf-more li{display:flex;flex-direction:column;gap:6px}
.pf-more li + li{padding-left:clamp(28px,4vw,64px);border-left:1px solid rgba(11,19,56,.14)}
.pf-more b{font:500 clamp(36px,3.4vw,56px)/1 var(--display);font-variant-numeric:lining-nums}
.pf-more span{font:400 14px/1.3 var(--text);color:rgba(11,19,56,.6)}

/* before the script takes over, everything simply shows (no JavaScript, or reduced motion) */
.js .line,.js .close{opacity:0}
/* until the script runs, the page is the opening's first frame: the sky before the warm air rises (sampled from the
   shader at intro 0), no words, no header; the opening then brings them in (else they flash in full, then vanish) */
.js .hero,.js .top{opacity:0}
.js .world{background:linear-gradient(90deg,rgba(0,0,0,.23),transparent 40%,transparent 60%,rgba(0,0,0,.23)),
  linear-gradient(#01030a,#010410 10%,#020719 20%,#030923 30%,#040b29 40%,#050c2c 50%,#090f31 60%,#0b1234 70%,#0c1233 80%,#17152d 90%,#1e1627)}

@media (max-width:759px){
  :root{--gut:20px;--head:60px}
  .logo img{height:22px}
  .book{min-height:40px;padding:0 16px;font-size:14px}
  .nav-case{font-size:14px}
  .hero{top:calc(var(--head) + 7vh);transform:none;width:auto;right:var(--gut)}
  h1{font-size:clamp(38px,11vw,54px)}
  .sub{font-size:16px;max-width:22em}
  .line{top:58%;left:var(--gut);right:var(--gut);transform:translateY(-50%);width:auto;font-size:clamp(38px,11vw,54px)}
  .lb{top:40%;transform:none}
  .lb .pb{display:inline}
  .lc{top:calc(var(--head) + 4vh);transform:none}
  .ld{top:36%;transform:none}
  .le{top:62%}
  .pf-who{top:calc(var(--head) + 3vh)}
  .pf-big{top:19%}
  .pf-num{font-size:clamp(60px,18vw,84px)}
  .pf-sub{font-size:24px}
  .pf-chart{left:var(--gut);right:calc(var(--gut) + 6px);top:44%;height:24%}
  .pf-more{bottom:8%}
  .pf-phases{flex-direction:column;gap:9px}
  .pf-more b{font-size:34px}
  .le .pb2{display:none}
  .close{top:calc(var(--head) + 5vh);width:calc(100vw - 2 * var(--gut));gap:22px}
  .lf{font-size:clamp(38px,11vw,54px)}
  .book-xl{min-height:50px;padding:0 28px;font-size:16px}
}
@media (min-width:760px) and (max-width:1100px){
  .hero{width:min(54vw,880px)}
}
@media (prefers-reduced-motion:reduce){
  .world .near{filter:none}
}

/* reduced motion, no animation library, or no JavaScript: the same words, one calm screen each, over the resting scene */
html:not(.js) .words,.still .words{position:relative;inset:auto;pointer-events:auto}
html:not(.js) .track,.still .track{display:none}
.still .top{opacity:1}
html:not(.js) .proof,.still .proof{position:relative;inset:auto;opacity:1;visibility:visible;pointer-events:auto;height:100vh;min-height:620px}
html:not(.js) .hero,html:not(.js) .line,.still .hero,.still .line{position:relative;left:auto;right:auto;top:auto;transform:none;opacity:1;
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:0 var(--gut);width:auto;max-width:960px}
/* the line's words sit in a row (flex drops the spaces between them, the gap puts them back) */
html:not(.js) .line,.still .line{flex-flow:row wrap;align-content:center;justify-content:center;column-gap:.26em;margin:0 auto}
html:not(.js) .lb .pb,.still .lb .pb,html:not(.js) .le .pb2,.still .le .pb2{display:none}   /* the words already wrap here on their own */
html:not(.js) .close,.still .close{position:relative;left:auto;top:auto;transform:none;opacity:1;min-height:100vh;justify-content:center;
  margin:0 auto;padding:0 var(--gut);width:auto;max-width:960px}