/* =========================================================
   AMD Global: the look of the site.
   Every colour, font, spacing and animation lives in this file.
   ========================================================= */

/* COLOURS AND SETTINGS: the brand palette. Change a colour here and it changes everywhere */
:root{
  --canvas:#E3E3E0;          /* page background: pale concrete, matched to the video */
  --panel:#EDEDEA;           /* cards and raised surfaces */
  --text-primary:#1C1E20;    /* graphite: headings and body text */
  --text-secondary:#55595C;  /* soft graphite: supporting text */
  --line:rgba(28,30,32,.14); /* fine lines and borders */
  --line-strong:rgba(28,30,32,.42); /* borders on things you can click */

  /* Safety orange: the one bright colour. Buttons, numbers and a few accent lines only */
  --accent:#FF5A1F;          /* hi-vis orange (buttons, and anything on the dark sections) */
  --accent-hover:#FF7038;    /* orange, on hover */
  --accent-ink:#1C1E20;      /* text on orange buttons */
  --accent-text:#B23A0B;     /* deeper orange for small text on the light background, so it stays readable */

  /* The dark sections */
  --ink-bg:#17191B;          /* graphite background */
  --ink-panel:#202326;       /* cards on the dark background */
  --ink-text:#F1F0EC;        /* text on the dark background */
  --ink-secondary:#A9ADB0;   /* supporting text on the dark background */
  --ink-line:rgba(241,240,236,.12);

  /* Fonts: Archivo for headlines and the logo, Public Sans for reading, IBM Plex Mono for small labels */
  --display:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:"Public Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Easing: the two motion curves used everywhere, so every movement feels related */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  /* Spacing at the page edges, growing with the screen */
  --gutter:clamp(20px, 5vw, 72px);
  --nav-h:68px;

  /* Soft light halo behind dark words over the video, so they always read clearly */
  --tshadow:0 1px 1px rgba(236,236,233,.9), 0 2px 14px rgba(236,236,233,.75), 0 8px 44px rgba(236,236,233,.6);
}

/* BASICS: sensible defaults for every element */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;overflow-x:hidden;overflow-x:clip;
  background:var(--canvas);color:var(--text-primary);
  font:400 17px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;
  animation:page-in .7s var(--ease-out) both;   /* the whole page eases in on arrival */
}
@keyframes page-in{from{opacity:0}to{opacity:1}}
img,svg,video{display:block;max-width:100%}
h1,h2,h3,p,ol,ul,figure,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
button,input,select{font:inherit;color:inherit}
a{color:inherit}
::selection{background:rgba(255,90,31,.25)}

/* KEYBOARD FOCUS: a clear ring for people using the keyboard */
:focus-visible{outline:2px solid var(--text-primary);outline-offset:3px;border-radius:6px}
.dark :focus-visible,.foot :focus-visible{outline-color:var(--ink-text)}

/* HIDDEN HELPERS: text only screen readers hear, and the skip link */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--text-primary);color:var(--canvas);padding:10px 16px;border-radius:8px;text-decoration:none;transition:top .3s var(--ease-out)}
.skip:focus{top:16px}
main:focus{outline:none}

/* TYPE: the shared text styles */
.label{font:400 12.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.label .num{color:var(--accent-text);margin-right:.6em}
h1,h2,h3{font-family:var(--display);font-stretch:112%;font-weight:650;letter-spacing:-.015em;line-height:1.04}
h1,h2{text-wrap:balance}   /* balanced line breaks: no single word left alone on the last line */
h2{font-size:clamp(2.2rem, 4.2vw, 4rem);margin-top:18px}
h3{font-size:1.2rem;font-weight:600;line-height:1.25}
.lede{font-size:clamp(1.05rem, 1.25vw, 1.2rem);color:var(--text-secondary);max-width:46ch}
.small{font-size:.9rem;color:var(--text-secondary)}
.link{color:var(--text-primary);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:.3em;transition:text-decoration-color .3s var(--ease-out)}
.link:hover{text-decoration-color:var(--accent)}

/* LOGO: just the letters AMD, in a bold wide face */
.logo{font:800 22px/1 var(--display);font-stretch:125%;letter-spacing:.04em;text-decoration:none;color:var(--text-primary)}

/* BUTTONS: the orange main button, the outlined button, and their sizes */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  background:var(--accent);color:var(--accent-ink);
  font:600 15px/1 var(--display);font-stretch:112%;letter-spacing:.01em;
  padding:16px 26px;text-shadow:none;
  transition:background-color .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(255,90,31,.75)}
.btn:active{transform:translateY(0)}
.btn .arrow{display:inline-block;transition:transform .35s var(--ease-out)}
.btn:hover .arrow{transform:translateX(4px)}
.btn-small{padding:11px 18px;font-size:14px}
.btn-big{padding:20px 34px;font-size:16px}
.btn-ghost{background:transparent;color:var(--text-primary);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.btn-ghost:hover{background:rgba(28,30,32,.05);box-shadow:inset 0 0 0 1.5px var(--text-primary)}
/* Bigger tap areas on touch screens, without changing the layout */
@media (pointer:coarse){
  .btn,.nav-links a,.link{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* BACKGROUND ENVIRONMENT: soft drifting light and fine grain, fixed behind everything */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.env-light{
  position:absolute;inset:-30%;
  background:
    radial-gradient(40% 35% at 30% 30%, rgba(255,255,252,.55), rgba(255,255,252,0) 70%),
    radial-gradient(45% 40% at 75% 70%, rgba(200,200,196,.35), rgba(200,200,196,0) 70%);
  animation:light-drift 90s var(--ease-io) infinite alternate;
  animation-delay:-20s;
}
@keyframes light-drift{from{transform:translate3d(-4%,-2%,0) rotate(0deg)}to{transform:translate3d(5%,3%,0) rotate(6deg)}}
.env-grain{
  position:absolute;inset:0;opacity:.14;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* TOP MENU */
.nav{position:fixed;inset:0 0 auto 0;z-index:40;height:var(--nav-h);
  background:rgba(227,227,224,.74);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line)}
.nav-inner{height:100%;display:flex;align-items:center;gap:32px;padding:0 var(--gutter)}
.nav-links{display:flex;gap:28px;font-size:15px;margin-left:auto}
.nav-links a{text-decoration:none;color:var(--text-secondary);transition:color .3s var(--ease-out)}
.nav-links a:hover{color:var(--text-primary)}
@media (max-width:900px){.nav-links{display:none}.nav-inner .btn{margin-left:auto}}

/* =========================================================
   HERO: the scrolling concrete pour
   ========================================================= */
.hero{position:relative;height:340vh}                 /* how much scrolling the pour takes */
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.poster,.poster-end,.hero-video{position:absolute;inset:0;width:100%;height:100%}
.poster{background:#D2D2D0 center 70% / cover no-repeat}
.poster-end{background:center 70% / cover no-repeat;opacity:0}   /* only used if the video fails */
.hero-video{object-fit:cover;object-position:50% 70%;opacity:0;transition:opacity .8s var(--ease-out);transform:translateZ(0);will-change:transform}
.stage.video-ready .hero-video{opacity:1}
.stage.video-failed .hero-video{display:none}
/* A soft light wash on the left so the words sit on a calm area of the video */
.scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(232,232,229,.62) 0%, rgba(232,232,229,.34) 34%, rgba(232,232,229,0) 58%),
    linear-gradient(0deg, rgba(23,25,27,.35) 0%, rgba(23,25,27,0) 7%)}

/* THE TWO MESSAGES over the video. JavaScript sets --k (0 to 1) as each one assembles */
.band{
  position:absolute;left:var(--gutter);top:50%;
  width:min(48vw, 700px);
  transform:translateY(-44%);
  opacity:0;text-shadow:var(--tshadow);
}
.band::before{   /* an extra soft light glow behind each message while it is showing */
  content:"";position:absolute;inset:-14% -10%;z-index:-1;pointer-events:none;
  opacity:calc(.3 + .7 * var(--k,1));
  background:radial-gradient(ellipse 70% 62% at 42% 50%, rgba(236,236,233,.62) 0%, rgba(236,236,233,.36) 48%, rgba(236,236,233,0) 76%);
}
.band .label{margin-bottom:22px;color:var(--text-primary)}
.band h1,.band h2{font-size:clamp(2.6rem, 4.5vw, 4.9rem);line-height:1;margin:0 0 22px}
.band .sub{font-size:clamp(1.05rem, 1.3vw, 1.22rem);color:#2E3134;max-width:36ch;margin-bottom:30px}
.cta-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.band .btn{text-shadow:none}
.w{display:inline-block;white-space:nowrap}
/* The orange accent line under each hero headline */
.accent-line{display:block;height:5px;border-radius:3px;background:var(--accent);transform-origin:0 50%;margin-bottom:26px}

/* MESSAGE 1 ENTRANCE: words rise into place on arrival, then drift down and fade as the pour begins */
.b1 .w{
  --kc:clamp(0, (var(--k,0) - var(--th,0)) * 2.6, 1);
  opacity:var(--kc);
  transform:translate3d(0, calc((1 - var(--kc)) * .45em + var(--out,0) * .5em), 0);
}
.b1 .label,.b1 .sub,.b1 .cta-row{
  --kl:clamp(0, (var(--k,0) - .35) * 2.2, 1);
  opacity:var(--kl);
  transform:translate3d(0, calc((1 - var(--kl)) * 12px + var(--out,0) * 14px), 0);
}
.b1 .accent-line{width:92px;--kl:clamp(0, (var(--k,0) - .25) * 2, 1);transform:scaleX(var(--kl))}

/* MESSAGE 2 ENTRANCE: "pour and settle". Words slide down into place and spread to their final spacing,
   like concrete finding its level. The orange line then draws out level, then the line and button arrive */
.b2 .w{
  --kc:clamp(0, (var(--k,0) - var(--th,0)) * 3, 1);
  --ks:clamp(0, (var(--k,0) - var(--th,0) - .12) * 2.6, 1);
  opacity:var(--kc);
  transform:translate3d(calc((1 - var(--ks)) * var(--sx,0px)), calc((1 - var(--kc)) * -.6em), 0);
}
.b2 .label{--kl:clamp(0, var(--k,0) * 3, 1);opacity:var(--kl)}
.b2 .accent-line{width:min(340px, 70%);--kl:clamp(0, (var(--k,0) - .3) * 2.2, 1);transform:scaleX(var(--kl))}
.b2 .sub{--kl:clamp(0, (var(--k,0) - .62) * 4, 1);opacity:var(--kl);transform:translate3d(0, calc((1 - var(--kl)) * 10px), 0)}
.b2 .cta-row{--kl:clamp(0, (var(--k,0) - .78) * 5, 1);opacity:var(--kl);transform:translate3d(0, calc((1 - var(--kl)) * 10px), 0)}

/* LOADING RING: fills while the video downloads */
.ring{position:absolute;left:50%;bottom:34px;width:40px;height:40px;margin-left:-20px;transform:rotate(-90deg);transition:opacity .6s var(--ease-out)}
.ring-track{fill:none;stroke:rgba(28,30,32,.14);stroke-width:2.5}
.ring-fill{fill:none;stroke:var(--text-primary);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:126;stroke-dashoffset:var(--ld,126);transition:stroke-dashoffset .2s linear}
.stage.video-ready .ring,.stage.video-failed .ring{opacity:0}

/* SCROLL CUE: a thin line that drips downward, shown once the video is ready, until you start scrolling */
.cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;
  font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);opacity:0;transition:opacity .6s var(--ease-out);pointer-events:none}
.cue::after{content:"";width:1px;height:34px;background:linear-gradient(var(--text-primary), rgba(28,30,32,0));transform-origin:top;animation:drip 2.4s var(--ease-io) infinite;animation-delay:-.6s}
.stage.cue-on .cue{opacity:1}
@keyframes drip{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@media (max-height:560px){.cue,.ring{display:none}}

/* PHONES AND UPRIGHT TABLETS: the video plays here too. It sits at the top of the screen, framed on
   the pour, and the words sit underneath on the plain background. --split is where the video ends */
@media (orientation: portrait) and (max-width: 1024px) and (prefers-reduced-motion: no-preference){
  .stage{--split:57svh}
  .poster,.poster-end,.hero-video,.scrim{top:var(--nav-h);bottom:auto;height:calc(var(--split) - var(--nav-h))}
  .hero-video{object-position:72% 50%}
  .poster,.poster-end{background-position:72% 50%}
  .scrim{background:linear-gradient(0deg, var(--canvas) 0%, rgba(227,227,224,0) 24%)}
  .band{left:var(--gutter);right:var(--gutter);width:auto;top:calc(var(--split) + 4px);transform:none;text-shadow:none}
  .band::before{display:none}
  .band .label{margin-bottom:10px}
  .band h1,.band h2{font-size:clamp(1.95rem, 7.6vw, 3.3rem);margin-bottom:14px}
  .accent-line{margin-bottom:16px}
  .band .sub{font-size:clamp(.98rem, 2.4vw, 1.15rem);max-width:42ch;margin-bottom:18px}
  .ring{top:calc(var(--split) - 56px);bottom:auto}
  .cue{display:none}
}
/* Upright tablets: more room, so a taller video and bigger words */
@media (orientation: portrait) and (min-width: 600px) and (max-width: 1024px) and (prefers-reduced-motion: no-preference){
  .stage{--split:60svh}
  .band h1,.band h2{font-size:clamp(2.6rem, 7.4vw, 4.4rem)}
  .band .sub{font-size:1.2rem}
}
/* Short phones: a little less video, so the words still fit underneath */
@media (orientation: portrait) and (max-width: 1024px) and (max-height: 700px) and (prefers-reduced-motion: no-preference){
  .stage{--split:50svh}
}

/* STILL HERO: anyone who has asked their device for less motion, and phones held sideways (too short
   for the journey), get a designed still version.
   These two conditions must match the GATES list in main.js exactly */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce){
  .hero{height:auto}
  .stage{position:relative;height:auto;overflow:visible;display:grid;grid-template-columns:1fr;grid-template-rows:auto auto}
  .poster{position:relative;grid-row:1;grid-column:1;min-height:100vh;min-height:100svh;
    background-image:url("hero-ending.jpg") !important;background-position:72% 100%}
  .hero-video,.ring,.cue,.poster-end{display:none}
  .scrim{grid-row:1;grid-column:1;position:relative;
    background:linear-gradient(180deg, rgba(232,232,229,.82) 0%, rgba(232,232,229,.55) 45%, rgba(232,232,229,0) 70%),
               linear-gradient(0deg, var(--canvas) 0%, rgba(227,227,224,0) 12%)}
  .band{position:relative;left:auto;top:auto;transform:none;width:auto;opacity:1 !important;padding:0 var(--gutter)}
  .band::before{display:none}
  .b1{grid-row:1;grid-column:1;align-self:start;padding-top:calc(var(--nav-h) + 9vh);max-width:640px}
  .b2{grid-row:2;padding-top:72px;padding-bottom:64px;max-width:700px}
  .band .w,.band .label,.band .sub,.band .cta-row,.band .accent-line{opacity:1 !important;transform:none !important}
}
@media (max-width:720px) and (prefers-reduced-motion: reduce){
  .band h1,.band h2{font-size:clamp(2.3rem, 10.5vw, 3.1rem)}
  .b1{padding-top:calc(var(--nav-h) + 6vh)}
}

/* =========================================================
   TRADES STRIP: the moving line of trades on graphite.
   JavaScript moves it, speeds it up with your scrolling, and leans it a touch
   ========================================================= */
.trades{position:relative;background:var(--ink-bg);color:var(--ink-text);overflow:hidden;padding:30px 0}
.trades-track{display:flex;width:max-content;will-change:transform}
.trades-list{display:flex;flex:none}
.trades-list li{display:flex;align-items:center;white-space:nowrap;
  font:700 clamp(1.7rem, 3.4vw, 3rem)/1 var(--display);font-stretch:118%;letter-spacing:-.01em;
  transform:skewX(var(--skew,0deg))}
.trades-list li::after{content:"";flex:none;width:.28em;height:.28em;border-radius:50%;background:var(--accent);margin:0 .8em}

/* =========================================================
   PAGE SECTIONS
   ========================================================= */
.sec{position:relative;padding:clamp(100px, 15vh, 184px) 0}
.wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 var(--gutter)}

/* ENTRANCES: elements fade and rise into place as they scroll into view, one after another */
.reveal{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
.reveal.settled{transition-delay:0ms}   /* once arrived, hovers respond instantly */

/* HEADLINE ENTRANCES: each word rises up out of a hidden slot, one after another.
   The extra space under each word keeps the tails of g, y and p from being cut off */
.split-h .wm{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .03em .16em;margin:0 -.03em -.16em}
.split-h .wi{display:inline-block;transform:translate3d(0,110%,0);transition:transform 1s var(--ease-out);transition-delay:calc(var(--wi,0) * 70ms + 80ms)}
.in .split-h .wi{transform:none}

/* 01 THE PROBLEM */
.problem-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px, 7vw, 120px);align-items:end}
.problem-head h2{max-width:12ch}
.problem-body .lede{margin-bottom:38px}
.signs{display:grid;border-top:1px solid var(--line)}
.signs li{position:relative;display:flex;align-items:baseline;gap:18px;padding:20px 0;border-bottom:1px solid var(--line);font-size:1.12rem;font-weight:500}
.signs li::before{content:"";flex:none;width:18px;height:3px;border-radius:2px;background:var(--accent);position:relative;top:-.3em}

/* 02 WHAT YOU GET: the dark section */
.dark{background:var(--ink-bg);color:var(--ink-text);overflow:hidden}
.dark .label{color:var(--ink-secondary)}
.dark .label .num{color:var(--accent)}
/* Living element: a soft orange glow drifting slowly behind the cards */
.dark::before{content:"";position:absolute;width:70vw;height:70vw;max-width:980px;max-height:980px;right:-18vw;top:-22vw;border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,90,31,.10), rgba(255,90,31,0));pointer-events:none}
.live.dark::before{animation:glow-drift 26s var(--ease-io) infinite alternate;animation-delay:-8s}
@keyframes glow-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-14vw,12vw,0)}}
.get-head{position:relative;max-width:820px;margin-bottom:64px}
.cards{position:relative;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:clamp(14px, 1.6vw, 22px)}
.card{background:var(--ink-panel);border:1px solid var(--ink-line);border-radius:20px;padding:clamp(24px, 2.4vw, 34px);
  transition:opacity .9s var(--ease-out), transform .5s var(--ease-out), border-color .4s var(--ease-out);transition-delay:var(--d,0ms)}
.card.settled{transition-delay:0ms}
.card.in:hover{transform:translateY(-6px);border-color:rgba(255,90,31,.55)}
.card-n{display:block;font:400 13px/1 var(--mono);letter-spacing:.08em;color:var(--accent);margin-bottom:46px}
.card h3{font-size:clamp(1.25rem, 1.6vw, 1.5rem);margin-bottom:12px}
.card p{color:var(--ink-secondary)}

/* 03 HOW IT WORKS: pictures sweep into view as the step arrives */
.how-head{max-width:720px;margin-bottom:60px}
.steps{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:clamp(20px, 3vw, 44px)}
.img-wrap{position:relative;overflow:hidden;border-radius:18px;margin-bottom:24px;background:#D6D6D3}
.img-wrap::after{content:"";position:absolute;inset:0;background:var(--canvas);transform-origin:50% 0;transform:scaleY(1);
  transition:transform 1.1s var(--ease-io);transition-delay:calc(var(--d,0ms) + 150ms)}
.step.in .img-wrap::after{transform:scaleY(0)}
.step-img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transform:scale(1.14);transition:transform 1.6s var(--ease-out);transition-delay:var(--d,0ms)}
.step.in .step-img{transform:scale(1)}
.step.settled .step-img{transition:transform .8s var(--ease-out);transition-delay:0ms}
.step.settled:hover .step-img{transform:scale(1.04)}
.step-n{display:block;font:400 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);margin-bottom:12px}
.step h3{font-size:1.35rem;margin-bottom:10px}
.step p{color:var(--text-secondary);max-width:34ch}

/* 04 PRICING: the annual plan is the dark one */
.pricing-head{max-width:980px;margin-bottom:56px}
.pricing-head .lede{margin-top:16px}
.plans{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:clamp(18px, 2.4vw, 32px);max-width:960px}
.plan{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:clamp(28px, 3vw, 44px)}
.plan-best{background:var(--ink-bg);color:var(--ink-text);border-color:var(--ink-bg)}
.plan-name{font:400 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em}
.plan-price{display:flex;align-items:baseline;gap:10px;font:700 clamp(2.8rem, 4.6vw, 4.2rem)/1 var(--display);font-stretch:112%;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.plan-price .per{font:400 1rem/1 var(--body);color:var(--text-secondary);letter-spacing:0}
.plan-note{color:var(--text-secondary);min-height:3.2em}
.plan-best .per,.plan-best .plan-note{color:var(--ink-secondary)}
.plan .btn{margin-top:8px}
.tag{position:absolute;top:24px;right:24px;font:400 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent);padding:8px 11px;border-radius:999px}
.plans-foot{margin-top:34px;color:var(--text-secondary);max-width:60ch}
.currency-note{margin-top:12px;font:400 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}

/* REVIEWS (switched off until real reviews are added) */
.quotes{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px,1fr));gap:24px;margin-top:40px}
.quote{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px}
.quote blockquote{font-size:1.1rem;margin-bottom:16px}
.quote figcaption{font-size:.9rem;color:var(--text-secondary)}

/* 05 QUESTIONS */
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px, 7vw, 120px);align-items:start}
.faq-head{position:sticky;top:calc(var(--nav-h) + 40px)}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding:24px 0;font:500 1.14rem/1.4 var(--body);transition:color .3s var(--ease-out)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:#000}
.faq-list details p{color:var(--text-secondary);max-width:58ch;padding:0 0 26px}
.faq-list details[open] p{animation:open .6s var(--ease-out)}
@keyframes open{from{opacity:0;transform:translate3d(0,-6px,0)}to{opacity:1;transform:none}}
.pm{position:relative;flex:none;width:14px;height:14px;transition:transform .45s var(--ease-out)}
.pm::before,.pm::after{content:"";position:absolute;left:0;top:6.5px;width:14px;height:2px;border-radius:1px;background:var(--text-primary)}
.pm::after{transform:rotate(90deg);transition:transform .45s var(--ease-out)}
details[open] .pm{transform:rotate(180deg)}
details[open] .pm::before{background:var(--accent)}
details[open] .pm::after{transform:rotate(0deg);background:var(--accent)}

/* 06 BOOK A CALL: the finished slab from the video, with the last invitation over the plain wall */
.book{min-height:100vh;display:flex;align-items:flex-start;padding-top:calc(var(--nav-h) + 17vh);overflow:hidden}
.book-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% calc(100% + 16vh)}   /* nudged down so the formwork sits below the words */
/* A soft light wash across the top of the picture, so the words read clearly wherever they are */
.book::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, var(--canvas) 0%, rgba(232,232,229,.72) 22%, rgba(232,232,229,.45) 48%, rgba(232,232,229,0) 70%)}
.book-inner{position:relative;z-index:2}
/* THE SLIDING TEXT: JavaScript sets --slide, which moves the block from the left edge (start)
   to the middle of the page (at the very bottom of the page) */
.book-slide{max-width:680px;margin:0 auto;text-align:center;transform:translate3d(var(--slide,0px),0,0);will-change:transform}
.book h2{max-width:13ch;margin:18px auto 22px}
.book .lede{color:#2E3134;margin:0 auto 34px;text-shadow:var(--tshadow)}
.book .small{margin-top:16px;color:#3B3F42}
/* Living element: a soft orange glow breathing around the big button */
.book .btn-big::after{content:"";position:absolute;inset:0;border-radius:999px;box-shadow:0 0 34px 4px rgba(255,90,31,.38);opacity:0;pointer-events:none}
.live .btn-big::after{animation:glow 3.6s var(--ease-io) infinite alternate;animation-delay:-1s}
@keyframes glow{from{opacity:0}to{opacity:1}}

/* FOOTER: graphite, to close the page. Big screens: logo and tagline on the left, copyright and "Back to top" on the right */
.foot{background:var(--ink-bg);color:var(--ink-text);padding:28px 0 30px}
.foot-inner{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:8px 36px}
.foot .logo{color:var(--ink-text);font-size:24px;justify-self:start}
.foot-tag{color:var(--ink-secondary)}
.foot-copy{color:var(--ink-secondary);font-size:.9rem}
.foot-top{display:inline-flex;align-items:center;gap:.45em;min-height:44px;color:var(--ink-text);text-decoration:none;font-size:.95rem;font-weight:500;transition:color .3s var(--ease-out)}
.foot-top:hover{color:#fff}
.foot-top .up{color:var(--accent);transition:transform .35s var(--ease-out)}
.foot-top:hover .up{transform:translateY(-3px)}

/* =========================================================
   BOOKING FORM (the full-screen question flow)
   ========================================================= */
.booking{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;
  background:var(--canvas);color:var(--text-primary);overflow:auto}
.booking::backdrop{background:rgba(23,25,27,.4)}
.booking[open]{animation:sheet-in .5s var(--ease-out)}
@keyframes sheet-in{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}
.bk{position:relative;min-height:100%;max-width:760px;margin:0 auto;padding:28px var(--gutter) 60px;display:flex;flex-direction:column}
.bk-top{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px 18px;margin-bottom:clamp(40px, 10vh, 110px)}
.bk-title{font:400 12.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary)}
.bk-count{font:400 12px/1 var(--mono);color:var(--text-secondary)}
.bk-close{width:44px;height:44px;border:0;border-radius:50%;background:transparent;cursor:pointer;font-size:30px;line-height:1;color:var(--text-primary)}
.bk-close:hover{background:rgba(28,30,32,.06)}
.bk-bar{grid-column:1 / -1;height:4px;border-radius:2px;background:rgba(28,30,32,.1);overflow:hidden}
.bk-bar span{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--bkp,0));transition:transform .7s var(--ease-out)}
.bk-step{border:0;margin:0;padding:0;min-width:0}
.bk-step.enter{animation:step-in .55s var(--ease-out)}
@keyframes step-in{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
.bk-q{display:block;font:650 clamp(1.7rem, 3.4vw, 2.6rem)/1.1 var(--display);font-stretch:112%;letter-spacing:-.01em;margin-bottom:32px;padding:0}
.bk-opts{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:12px}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{display:block;min-height:62px;padding:19px 20px;line-height:1.3;border-radius:14px;background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line-strong);font-size:1.02rem;transition:box-shadow .25s var(--ease-out), background-color .25s var(--ease-out), transform .25s var(--ease-out)}
.opt span i{font-style:normal}
.opt:hover span{box-shadow:inset 0 0 0 1.5px var(--text-primary);transform:translateY(-1px)}
.opt input:focus-visible + span{outline:2px solid var(--text-primary);outline-offset:3px}
.opt input:checked + span{background:var(--accent);color:var(--accent-ink);box-shadow:none}
.phone{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:12px}
.phone select,.phone input{height:62px;border-radius:14px;border:0;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-strong);padding:0 18px;font-size:1.1rem}
.phone select:focus-visible,.phone input:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px}
.bk-note{margin-top:14px;color:var(--text-secondary);font-size:.95rem}
.bk-error{color:#8A2A1B;min-height:1.4em;margin:12px 0}
.bk-submit[disabled]{opacity:.6;cursor:progress}
.bk-back{align-self:flex-start;margin-top:36px;border:0;background:none;cursor:pointer;color:var(--text-secondary);
  text-decoration:underline;text-underline-offset:.3em;padding:10px 0}
.bk-done .bk-q{max-width:22ch}
/* The orange tick on the thank-you screen */
.bk-tick{position:relative;display:block;width:56px;height:56px;border-radius:50%;background:var(--accent);margin-bottom:28px}
.bk-tick::after{content:"";position:absolute;left:21px;top:13px;width:12px;height:22px;border:solid var(--accent-ink);border-width:0 3px 3px 0;transform:rotate(45deg)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:560px){
  .bk-top{margin-bottom:36px}
  .bk-q{margin-bottom:22px}
  .bk-opts{grid-template-columns:1fr;gap:9px}
  .opt span{min-height:50px;padding:14px 18px}
  .phone{grid-template-columns:132px minmax(0,1fr)}
  .phone select{padding:0 8px 0 14px;font-size:1rem}
}

/* =========================================================
   SMALLER SCREENS: what changes on tablets and phones
   ========================================================= */
@media (max-width:980px){
  .cards{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:900px){
  .faq-grid{grid-template-columns:1fr}
  .faq-head{position:static}
  .book{min-height:86vh;padding-top:110px}
  .book-img{object-position:70% 100%}
  .book::before{background:linear-gradient(180deg, rgba(232,232,229,.85) 0%, rgba(232,232,229,.6) 45%, rgba(232,232,229,0) 75%)}
  /* Footer on tablets and phones: logo and "Back to top" on the top line, then the tagline and copyright */
  .foot-inner{grid-template-columns:1fr auto;gap:4px 20px}
  .foot .logo{grid-column:1;grid-row:1}
  .foot-top{grid-column:2;grid-row:1;justify-self:end}
  .foot-tag{grid-column:1 / -1;grid-row:2}
  .foot-copy{grid-column:1 / -1;grid-row:3;margin-top:6px}
}
/* Tablets: the problem section's headline sits at the top of its column */
@media (max-width:1024px){
  .problem-grid{align-items:start}
}
/* Tablets: the problem section stacks below 760px wide */
@media (max-width:760px){
  .problem-grid{grid-template-columns:1fr}
}
/* Phones: steps and prices stack into one column */
@media (max-width:720px){
  .steps{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
}
@media (max-width:620px){
  .sec{padding:clamp(72px, 11vh, 112px) 0}   /* less empty space between sections on phones */
  .cards{grid-template-columns:1fr}
  .card-n{margin-bottom:28px}
  .trades{padding:22px 0}
}

/* PAUSING: animations stop when the tab is hidden (body.paused), and run only while their section is on screen (.live) */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* REDUCED MOTION: everything appears in its finished state, nothing moves */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important;transition-delay:0s !important}
  .reveal{opacity:1;transform:none}
  .split-h .wi{transform:none}
  .book-slide{transform:none}
  .img-wrap::after{transform:scaleY(0)}
  .step-img{transform:none}
  .trades-list li{transform:none}
  .trades-track{width:auto}
  .trades-list + .trades-list{display:none}
  .trades-list{flex-wrap:wrap;padding:0 var(--gutter);row-gap:14px}
}