/* ============ Font (self-hosted Archivo, variable width + weight) ============ */
@font-face{
  font-family:'Archivo';
  src:url('fonts/Archivo.woff2') format('woff2');
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
}

/* ============ Tokens ============ */
:root{
  /* One orange ramp, one warm neutral ramp (see build/colours.md) */
  --orange-50:#FFEFE7;
  --orange-100:#FFDBCC;
  --orange-500:#F05A28;   /* display word only: large text */
  --orange-600:#D14223;   /* buttons: white text 4.65:1 */
  --orange-700:#B42300;   /* orange text on paper 5.9:1 */
  --paper:#F5F2EC;
  --n-0:#FFFDF8;
  --n-100:#EBE7E2;
  --n-600:#5D5A57;
  --ink:#121212;

  /* Type scale: 8 sizes */
  --t-12:12px;
  --t-14:14px;
  --t-17:17px;
  --t-20:20px;
  --t-24:24px;
  --t-h3:clamp(24px,2.4vw,32px);
  --t-h2:clamp(40px,6vw,80px);
  --t-display:clamp(44px,8.2vw,124px);

  /* Spacing */
  --gutter:20px;
  --section:72px;
  --s-8:8px; --s-16:16px; --s-24:24px; --s-32:32px;
  --radius:14px;
}
@media (min-width:900px){
  :root{ --gutter:48px; --section:120px; }
}

/* ============ Base ============ */
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo',system-ui,sans-serif;
  font-size:var(--t-17);
  line-height:1.5;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--orange-600);outline-offset:3px}
h2{
  font-size:clamp(30px,3.2vw,46px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.015em;
  margin:0 0 var(--s-16);
}
h3{font-size:var(--t-h3);font-weight:800;line-height:1.1;margin:0 0 var(--s-8)}
.lead{font-size:var(--t-20);color:var(--n-600);max-width:640px;margin:0 0 var(--s-32)}
section{padding:var(--section) var(--gutter);scroll-margin-top:76px}

/* Section tones: step within the ramps, never a new hue */
.tone-ink{background:var(--night);color:var(--n-0)}   /* same warm charcoal as the laptop scene, so they join */
.tone-ink .lead{color:#C9C5BF}
.tone-orange{background:var(--orange-50)}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 24px;
  background:var(--orange-600);color:#fff;
  border:0;border-radius:999px;
  font:800 var(--t-17)/1 'Archivo',sans-serif;
  text-decoration:none;cursor:pointer;
  transition:transform .2s ease,background .2s ease;
}
.btn:hover{background:var(--orange-700);transform:translateY(-2px)}
.btn-sm{min-height:44px;padding:0 20px;font-size:var(--t-14)}

/* ============ Header ============ */
.top{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:var(--s-24);
  padding:var(--s-16) var(--gutter);
  background:var(--paper);
}
.logo{font-weight:900;font-stretch:125%;font-size:var(--t-20);text-decoration:none;text-transform:uppercase;margin-right:auto;min-height:44px;display:flex;align-items:center}
.links{display:flex;gap:var(--s-24)}
.links a{text-decoration:none;font-size:var(--t-17);min-height:44px;display:flex;align-items:center}
.links a:hover{color:var(--orange-700)}
.menu{display:none}
@media (max-width:899px){
  .top{gap:var(--s-8)}
  .top .btn-sm{padding:0 16px}
  .menu{display:block;min-height:44px;padding:0 16px;border:1px solid currentColor;border-radius:999px;background:transparent;font:600 var(--t-14) 'Archivo';color:inherit}
  .links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--bg,var(--paper));padding:0 var(--gutter) var(--s-16);border-bottom:1px solid var(--n-100)}
  .links.open{display:flex}
}

/* ============ 1. Hero ============ */
.hero{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 76px);padding-top:var(--s-32);padding-bottom:var(--section)}
.kick{font-size:var(--t-12);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--n-600);margin:0}
.word{font-size:clamp(56px,10.4vw,170px);font-weight:900;font-stretch:125%;text-transform:uppercase;letter-spacing:-.04em;line-height:.84;margin:var(--s-16) 0 var(--s-24)}
.word span{display:block}
.word .hot,.sub .hot{color:var(--orange-500)}
.sub{font-size:clamp(22px,2.2vw,30px);font-weight:800;margin:0 0 var(--s-8)}
.intro{font-size:var(--t-17);color:var(--n-600);max-width:560px;margin:0 0 var(--s-32)}
.hero-form{display:flex;gap:8px;width:100%;max-width:580px;background:var(--n-0);border-radius:999px;padding:8px;box-shadow:0 18px 40px -22px rgba(18,18,18,.4)}
.hero-form input{flex:1;min-width:0;border:0;background:transparent;font:400 var(--t-17) 'Archivo',sans-serif;color:var(--ink);padding:0 18px;min-height:48px}
.hero-form input:focus{outline:0}
.hero-form:focus-within{box-shadow:0 0 0 3px var(--orange-500),0 18px 40px -22px rgba(18,18,18,.4)}
.proof{list-style:none;display:flex;gap:var(--s-24);flex-wrap:wrap;justify-content:center;padding:0;margin:var(--s-24) 0 0;font-size:var(--t-14);color:var(--n-600)}
.proof li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--orange-500);margin-right:8px;vertical-align:middle}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:700px){
  .hero-form{flex-direction:column;border-radius:22px}
  .hero-form input{text-align:center}
  .word{font-size:13vw}
}

/* ============ 2. Work: 3D laptop ============ */
.work{padding-bottom:0}
.laptop-stage{height:420vh;position:relative}
.laptop-sticky{position:sticky;top:72px;height:calc(100vh - 72px);display:flex;flex-direction:column}
.laptop-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-24);flex-wrap:wrap}
.laptop-head h2{margin:0}
.tabs{display:flex;gap:var(--s-8);flex-wrap:wrap}
.tabs button{
  min-height:44px;padding:0 16px;border-radius:999px;
  border:1px solid var(--ink);background:transparent;color:var(--ink);
  font:600 var(--t-14) 'Archivo';cursor:pointer;
}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--n-0)}
.laptop{flex:1;position:relative;min-height:0}
/* The 3D fills the whole pinned screen edge to edge; heading, tabs and caption sit over it */
.laptop-sticky{top:0;height:100vh;height:100svh;padding-top:72px}
.laptop{position:absolute;inset:0 calc(-1 * var(--gutter));overflow:hidden}
.laptop-head,.laptop-cap{position:relative;z-index:2}
.laptop-sticky .laptop-cap{margin-top:auto}
.laptop canvas{position:absolute;inset:0;width:100%!important;height:100%!important;opacity:var(--scene,1)!important}
/* Without WebGL: a still of the bakery site, centred below the heading */
.laptop-fallback{position:absolute;left:50%;top:56%;translate:-50% -50%;width:min(880px,calc(100% - 2 * var(--gutter)));height:auto;border-radius:10px;box-shadow:0 30px 60px -30px rgba(18,18,18,.5)}
.laptop.webgl .laptop-fallback{display:none}
.laptop-cap{text-align:center;color:var(--n-600);font-size:var(--t-14);margin:0 0 var(--s-16)}

.projects{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-32) var(--s-24)}
.projects li{display:grid;grid-template-columns:1fr auto;gap:var(--s-8)}
.projects li a{display:contents;text-decoration:none}
.projects img{grid-column:1/-1;border-radius:10px;aspect-ratio:16/10;object-fit:cover;transition:transform .3s ease}
.projects li:hover img{transform:translateY(-4px)}
.projects .name{font-weight:700}
.projects .kind{color:var(--n-600);font-size:var(--t-14)}
.tone-ink .projects .kind{color:#A9A39B}
.more{padding-top:0}
@media (max-width:899px){
  .laptop-stage{height:380vh}
  .projects{grid-template-columns:1fr 1fr;gap:var(--s-24) var(--s-16)}
}

/* Light and dark never fade into each other (that passes through a muddy grey). The edge moves instead:
   dark sections are solid black and slide up over the light page as a rounded sheet, and light
   sections slide back up over the dark the same way. The header flips quickly when a dark section
   reaches it (app.js sets --hdr). */
:root{--dark:1;--ui:1;--hdr:0;--night:#000;--sheet:32px}   /* --night matches the rendered void */
.work{background:var(--night);color:var(--n-0)}
.get,.preview{position:relative}
/* Work starts with a straight cut from the hero: no sheet, no overlap */
.work{position:relative;overflow:clip}
/* Statement: big text whose words brighten as you scroll past (app.js wraps each word) */
/* Pinned while the words light up. The pin is only as tall as the text, and the wrapper adds 55vh of
   scroll for the effect, so How it works follows straight after with no empty screen in between. */
.statement-wrap{position:relative}
.statement-wrap::after{content:"";display:block;height:35vh}   /* scroll room for the pin (padding wouldn't count) */
.statement-pin{position:sticky;top:0;display:flex;justify-content:center;padding:clamp(96px,16vh,170px) 0 clamp(64px,12vh,120px)}
.statement{font-size:clamp(26px,3vw,44px);font-weight:800;line-height:1.2;text-align:center;max-width:820px;margin:0 auto}
.statement .w{opacity:.2;transition:opacity .35s ease}
.statement .w.on{opacity:1}
@media (prefers-reduced-motion:reduce){.statement .w{opacity:1}}

/* How it works: three steps on the black, before the laptop shot */
.how{padding:0 0 var(--s-32)}
/* Built to work: four services on the black, before How it works */
.services{margin:0 0 calc(var(--section) * 1.4)}
.services-title{margin:0 0 var(--s-8)}
.services-lead{color:#B9B3AB;max-width:620px;margin:0 0 var(--s-32)}
.svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-16)}
.svc li{background:#111;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:var(--s-32)}
.svc h3{font-size:var(--t-20);margin:0 0 var(--s-8)}
.svc p{margin:0;color:#B9B3AB}
@media (max-width:700px){.svc{grid-template-columns:1fr}}
.how-title{margin:0 0 var(--s-32)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-16);counter-reset:step;position:relative}
.steps li{position:relative;background:#111;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:var(--s-32)}
.steps .n{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--orange-500);color:#fff;font-size:var(--t-17);font-weight:900;line-height:1;margin-bottom:var(--s-24)}
.steps h3{margin:0 0 var(--s-8);font-size:var(--t-20)}
.steps p{margin:0;color:#B9B3AB}
@media (max-width:899px){.steps{grid-template-columns:1fr}}
@media (max-width:899px){.steps{grid-template-columns:1fr}}
/* The section underneath a rising sheet darkens (app.js sets --cover) */
.under{position:relative;transform-origin:50% 100%}
.under::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--cover,0);pointer-events:none;z-index:5}
.under{will-change:transform,filter}
.top{
  --bg:color-mix(in oklab,var(--night) calc(var(--hdr)*100%),var(--paper));
  --fg:color-mix(in oklab,var(--n-0) calc(var(--hdr)*100%),var(--ink));
  background:var(--bg);color:var(--fg);
  transition:background-color .3s ease,color .3s ease;
}
.work .laptop-cap{color:inherit;opacity:calc(var(--ui)*.65)}
/* The heading and tabs wait until the laptop has turned to face you */
.laptop-head{opacity:var(--ui);transform:translateY(calc((1 - var(--ui))*14px))}
.laptop-head .tabs{pointer-events:auto}
/* A soft vignette closes in with the dark, so the edges fall away like a stage */
.laptop-sticky::after{
  content:"";position:absolute;inset:0 calc(-1 * var(--gutter));pointer-events:none;z-index:1;
  opacity:var(--dark);
  background:radial-gradient(ellipse 75% 70% at 50% 55%,transparent 55%,rgba(0,0,0,.35) 100%);
}

.chapters{position:absolute;left:0;top:50%;translate:0 -50%;width:min(360px,30%);pointer-events:none;z-index:2}
.chapter{
  position:absolute;left:0;top:0;translate:0 -50%;margin:0;
  font-size:var(--t-h3);font-weight:800;line-height:1.1;font-stretch:112%;
  opacity:0;transform:translateY(16px);
}
.laptop-sticky{position:sticky}
@media (max-width:899px){
  .chapters{left:0;right:0;width:auto;top:auto;bottom:104px;translate:none;text-align:center}
  .chapter{left:0;right:0;translate:none;font-size:var(--t-20)}
}

/* ============ 3. Before and after ============ */
.cmp{position:relative;max-width:1200px;margin:0 auto;aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;user-select:none;touch-action:pan-y}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp .after{clip-path:inset(0 0 0 var(--x))}
.cmp-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.handle{position:absolute;top:0;bottom:0;left:var(--x);width:3px;background:#fff;translate:-50% 0;pointer-events:none}
.handle b{position:absolute;top:50%;left:50%;translate:-50% -50%;width:56px;height:56px;border-radius:50%;background:var(--orange-600);color:#fff;display:grid;place-items:center;font-size:var(--t-14);font-weight:800}
.cmp-tags{display:flex;justify-content:space-between;max-width:1200px;margin:0 auto var(--s-16);font-size:var(--t-14);font-weight:700;color:#B9B3AB}
.cmp-tags span:last-child{color:var(--orange-500)}
.tag{position:absolute;top:16px;font-size:var(--t-12);font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:6px 12px;border-radius:999px;pointer-events:none}
.tag.l{left:16px;background:var(--n-0);color:var(--ink)}
.tag.r{right:16px;background:var(--orange-600);color:#fff}

/* ============ 4. What you get ============ */
/* The lights come back up here: charcoal fades to paper across the top of the section */
.get{background:var(--paper)}
/* Editorial rows: a big orange number, the point, then the detail, on hairlines */
.get-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 64px;border-top:2px solid var(--ink);counter-reset:get}
.get-grid > div{display:grid;grid-template-columns:auto 1fr;gap:4px 24px;padding:var(--s-32) 0;border-bottom:1px solid var(--n-100);counter-increment:get}
.get-grid > div::before{
  content:counter(get,decimal-leading-zero);grid-row:span 2;
  font-size:var(--t-h2);font-weight:900;font-stretch:125%;line-height:.9;color:var(--orange-500);min-width:1.6em
}
.get-grid h3{margin:0}
.get-grid p{color:var(--n-600);margin:0}
@media (max-width:899px){.get-grid{grid-template-columns:1fr}}

/* ============ 5. Prices ============ */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-24);align-items:start}
.tier{background:var(--n-0);border-radius:var(--radius);padding:var(--s-32)}
.tier-main{background:var(--ink);color:var(--n-0)}
.price{font-size:var(--t-24);margin:0}
.price span{font-size:clamp(36px,3.6vw,56px);font-weight:900;font-stretch:125%;line-height:1}
.setup{color:var(--n-600);margin:var(--s-8) 0 var(--s-24)}
.tier-main .setup{color:#C9C5BF}
.tier ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--n-100)}
.tier-main ul{border-color:#333}
.tier li{padding:12px 0;border-bottom:1px solid var(--n-100)}
.tier-main li{border-color:#333}
.note{margin:var(--s-32) 0 var(--s-8);font-weight:700;color:var(--ink)}
.care{margin:0;color:var(--n-600);max-width:640px}
@media (max-width:899px){.tiers{grid-template-columns:1fr}}

/* ============ 6. About ============ */
.about{display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:var(--s-32) 64px;align-items:center}
.about .me{border-radius:var(--radius);width:100%}
.about p{font-size:var(--t-20);max-width:620px;margin:0 0 var(--s-16)}
@media (max-width:899px){.about{grid-template-columns:1fr}.about .me{max-width:320px}}

/* ============ 7. Free preview form ============ */
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-16) var(--s-24);max-width:900px}
.form label{display:flex;flex-direction:column;gap:var(--s-8);font-size:var(--t-14);font-weight:600}
.form .wide{grid-column:1/-1}
.form input,.form textarea{
  font:400 var(--t-17) 'Archivo';color:var(--ink);
  background:var(--n-0);border:2px solid transparent;border-radius:10px;
  padding:12px 14px;min-height:48px;
}
.form input:focus,.form textarea:focus{border-color:var(--orange-500);outline:0}
.form .btn{justify-self:start}
.form .btn:disabled{opacity:.6;cursor:default}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{grid-column:1/-1;margin:0;font-size:var(--t-17);min-height:1.5em}
.form-note a{color:inherit}
.form.sent label,.form.sent .btn{display:none}
.form.sent .form-note{font-size:var(--t-24);font-weight:700}
@media (max-width:640px){.form{grid-template-columns:1fr}}

/* ============ Footer ============ */
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s-16);padding:var(--s-32) var(--gutter);font-size:var(--t-14);color:#A9A39B;background:var(--night);border-top:1px solid rgba(255,255,255,.08)}   /* the page ends in the same charcoal as the form */
.foot{align-items:center}
.foot a{min-height:44px;display:flex;align-items:center}

/* ============ Section reveals (same curve as the hero) ============ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ============ Load reveal: the hero rises in once ============ */
@media (prefers-reduced-motion:no-preference){
  .hero > *{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
  .hero > :nth-child(2){animation-delay:.06s}
  .hero > :nth-child(3){animation-delay:.16s}
  .hero > :nth-child(4){animation-delay:.24s}
  .hero > :nth-child(5){animation-delay:.32s}
  .hero > :nth-child(6){animation-delay:.4s}
  @keyframes rise{from{opacity:0;transform:translateY(24px)}}
}
@media (prefers-reduced-motion:reduce){
  .btn,.projects img{transition:none}
}

/* Reassurance points under the prices */
.assure{list-style:none;padding:0;margin:var(--s-32) 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-24)}
.assure h3{font-size:var(--t-20);margin:0 0 4px}
.assure p{margin:0;color:var(--n-600)}
@media (max-width:899px){.assure{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.assure{grid-template-columns:1fr}}

/* One column for the work grid on small phones (names were breaking mid-word) */
@media (max-width:600px){.projects{grid-template-columns:1fr}}
/* Reduced motion: no pinned scroll for the laptop; show it once with the lines as plain text */
@media (prefers-reduced-motion:reduce){
  .laptop-stage{height:auto}
  .laptop-sticky{position:relative;height:auto;min-height:80vh}
  .chapters{position:static;translate:none;width:auto;display:block}
  .chapter{position:static;opacity:1!important;transform:none!important;translate:none}
}


/* 'Explore more work': centred under the closed laptop, fades and rises in at the end of the shot */
:root{--end:0}
.explore{position:absolute;left:50%;bottom:clamp(64px,12vh,120px);z-index:3;
  opacity:var(--end);transform:translate(-50%,calc((1 - var(--end)) * 16px));
  pointer-events:none;white-space:nowrap}