/* AI-first redesign layer. Loaded last; restyles only, copy is untouched.
   Direction: dark studio ground, one signal accent, one typeface, flat fields. */
:root{
  --paper:#0e0f0d;--ink:#f1f0ea;--muted:#a3a39b;--line:#2a2b27;--orange:#c8ff2e;
  --field:#181916;--field-2:#22231f;--signal:#c8ff2e;--on-signal:#0e0f0d;
  --serif:var(--font);
}
html,body{background:var(--paper);color:var(--ink)}
::selection{background:var(--signal);color:var(--on-signal)}

/* One face, one colour: the accent line is set like the rest */
.accent{font-family:var(--font)!important;font-style:normal!important;font-weight:500!important;letter-spacing:-.045em!important;color:var(--muted)!important}
h1,h2,h3{color:var(--ink)}
h1{font-size:clamp(3.5rem,9vw,10.5rem)!important;line-height:.92!important;letter-spacing:-.055em!important}
h2{line-height:.95!important;letter-spacing:-.05em!important}

/* Labels: sentence case, readable, no tracking */
.eyebrow,.card-kicker,.logo-strip>p,.step-label{text-transform:none!important;letter-spacing:0!important;font-size:1rem!important;font-weight:500!important;color:var(--signal)!important}
.project-status{color:var(--muted);margin-left:.5em}

/* Header: plain bar */
.header{background:var(--paper)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:0!important;box-shadow:none!important}
.header a,.nav-toggle{color:var(--ink)}
.wordmark img{filter:invert(1)}
.header-cta{background:var(--signal);color:var(--on-signal)!important;padding:12px 18px!important;border-radius:999px;font-weight:600}
.reading-progress{background:var(--signal)!important}

/* Buttons: pill, signal fill */
.button,.button-dark{background:var(--signal)!important;color:var(--on-signal)!important;border-radius:999px!important;font-weight:600;border:0;transition:transform .25s var(--ease-out)}
.button:hover{transform:translateY(-2px)}
.button:active{transform:translateY(1px)}
.text-link,.card-link{color:var(--ink)!important}
.text-link:hover,.card-link:hover{color:var(--signal)!important}
:focus-visible{outline:3px solid var(--signal)!important;outline-offset:3px}

/* Hero */
.hero{background:var(--paper)}
.hero-lead,.personal-lead{color:var(--ink)!important;max-width:34ch}
.booking-note,.scroll-cue{color:var(--muted)}
.hero-portrait figcaption{color:var(--muted)}
.hero-portrait figcaption span{color:var(--ink)}
img.parallax-image,.image-card-media img,.offer-tile img{filter:grayscale(.85) contrast(1.08) brightness(.92)!important}
.hero-portrait img,.personal-media img{filter:grayscale(1) contrast(1.1)!important}

/* Logos on dark */
.logo-strip{border:0!important;background:var(--field)}
.logo-row img{filter:grayscale(1) invert(1) brightness(1.4)!important;opacity:.6!important}
.logo-row img:hover{opacity:1!important}

/* Routes */
.image-card{color:var(--ink)}
.image-card-media{border-radius:0!important}
.image-disclaimer{color:var(--muted)}

/* Case scenes: flat scrim instead of a gradient wash */
.scene{background:var(--paper)!important}
.scene-wash{background:none!important}
.scene-copy{background:var(--paper);padding:clamp(28px,3vw,48px);margin-left:calc(var(--gutter)*-1)}
.scene-copy p{color:var(--ink)}
.scene-caption{color:var(--muted)}
.opera-scene .scene-copy{background:var(--field)}

/* Process: tone steps instead of hairlines */
.process-tabs{border:0!important;gap:8px}
.process-tabs button{border:0!important;background:var(--field);padding:24px 28px!important;color:var(--muted)!important;border-radius:999px}
.process-tabs button span{display:none}
.process-tabs button::after{display:none}
.process-tabs button:hover{color:var(--ink)!important;background:var(--field-2)}
.process-tabs button[aria-selected="true"]{background:var(--signal)!important;color:var(--on-signal)!important}
.process-panel p{color:var(--ink)!important}
.process-panel .step-agreement{border:0!important;padding:20px 24px!important;background:var(--field);color:var(--signal)!important}

/* Personal */
.personal{background:var(--field)}
.personal-media{background:var(--field-2)!important}

/* Offers */
.offer-tile:not(.offer-tile--image){border:0!important;background:var(--signal)!important;color:var(--on-signal)!important}
.offer-tile:not(.offer-tile--image) h3,.offer-tile:not(.offer-tile--image) .card-kicker,.offer-tile:not(.offer-tile--image) .card-link{color:var(--on-signal)!important}
.offer-tile--image::before{background:rgba(14,15,13,.62)!important}
.offer-tile .card-kicker{color:var(--signal)!important}

/* FAQ: tone-stepped rows */
.faq details{border:0!important;background:var(--field);margin-bottom:8px;padding:4px 28px}
.faq details[open]{background:var(--field-2)}
.faq summary{color:var(--ink)}
.faq details p{color:var(--ink)}

/* Contact: full signal field */
.contact{border:0!important;background:var(--signal);color:var(--on-signal)}
.contact h2,.contact p,.contact .accent,.contact strong,.contact li,.contact a,.contact .eyebrow,.contact-bottom{color:var(--on-signal)!important}
.contact .button{background:var(--on-signal)!important;color:var(--signal)!important}

/* Footer: the name returns */
.footer{border:0!important;color:var(--muted)}
.footer a{color:var(--ink)}

@media (max-width:820px){
  .scene-copy{margin-left:0;width:100%!important}
  .process-tabs button{padding:18px 22px!important}
}
@media (prefers-reduced-motion:reduce){.button{transition:none}}

/* Inspector round 1 */
:root{--space-section:clamp(112px,12vw,200px)}
.hero-inner{grid-template-columns:1.5fr 1fr!important}
h1{font-size:clamp(3rem,7.4vw,8.5rem)!important}
.section-head,.scene-copy,.personal-copy,.contact .story-copy,.faq-heading{max-width:none!important}
.section-head h2,.contact h2{max-width:16ch}
.scene-copy{width:min(64%,900px)!important}
h2{font-size:clamp(2.5rem,6vw,6.5rem)!important}
.button,.button-dark,.header-cta{box-shadow:none!important}
.text-link,.text-link::after,.card-link::after{border:0!important;background-image:none!important;box-shadow:none!important}
.text-link{text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:6px}
.text-link::after{display:none!important}
.meeting-agenda li{border:0!important}
.skip{background:var(--signal)!important;color:var(--on-signal)!important}
.scene-copy p:not(.eyebrow),.process-panel p,.faq details p,.contact p{max-width:60ch}
@media (max-width:820px){h1{font-size:clamp(2.6rem,11vw,4rem)!important}h2{font-size:clamp(2.1rem,9vw,3rem)!important}.image-card h3{font-size:1.5rem!important}}

/* Round 2: let headlines flow to two lines instead of forced breaks */
h1 br,h2 br{display:none}
.hero h1,.scene h2{max-width:none}
.hero-inner{grid-template-columns:1.8fr 1fr!important}
.footer-links{border:0!important}
.image-note{background:var(--paper)!important;color:var(--ink)!important}
@media (max-width:820px){h1{font-size:clamp(2.4rem,10vw,4rem)!important}.scene h2{font-size:clamp(2rem,8.4vw,3rem)!important}}
h1 .accent::before,h2 .accent::before{content:" "}

/* Round 3: mobile fixes (desktop overrides leaked into the phone layout) */
@media (max-width:820px){
  .hero-inner{grid-template-columns:1fr!important}
  .hero-portrait{order:-1}
  .scene-copy{width:100%!important;max-width:none!important;margin:0!important;padding:28px 24px!important}
  .scene-content{padding-inline:0!important}
  .button{gap:20px;padding:16px 24px!important}
}
@media (max-width:820px){
  .hero-portrait{order:0;height:clamp(220px,34svh,340px)!important}
  .scene-content{padding-block:48px!important}
  :root{--space-section:96px}
}

/* Round 4: back to beige + orange, bold premium type */
:root{
  --paper:#efe5dc;--ink:#171717;--muted:#5c5650;--line:#d4c8bd;--orange:#ee4428;
  --field:#e6d9cc;--field-2:#ddcebf;--signal:#ee4428;--on-signal:#ffffff;
}
h1,h2,h3{font-weight:800!important;letter-spacing:-.055em!important}
h1,h2,h3 .accent,.accent{font-weight:800!important;color:var(--signal)!important}
.wordmark img{filter:none}
.logo-row img{filter:grayscale(1)!important;opacity:.55!important}
img.parallax-image,.image-card-media img,.offer-tile img{filter:saturate(.8) contrast(1.02)!important}
.hero-portrait img,.personal-media img{filter:none!important}
.eyebrow,.card-kicker,.logo-strip>p{color:var(--signal)!important;font-weight:600!important}
.text-link,.card-link{font-weight:700}
.process-tabs button{font-weight:700}
.offer-tile:not(.offer-tile--image) .accent,.contact .accent{color:var(--on-signal)!important;opacity:.85}
.offer-tile--image::before{background:rgba(23,23,23,.6)!important}
.offer-tile--image h3,.offer-tile--image .card-link{color:#fff!important}
.contact .button{background:var(--ink)!important;color:#fff!important}
h1,h2,h3{color:var(--ink)!important}
.contact h2,.offer-tile:not(.offer-tile--image) h3{color:var(--on-signal)!important}
.offer-tile--image h3{color:#fff!important}
h1 .accent,h2 .accent,h3 .accent{color:var(--signal)!important}

/* Hero: full-bleed portrait behind the copy */
.hero{position:relative;min-height:100svh!important;padding-top:0!important;isolation:isolate;overflow:hidden;background:#171717!important}
.hero-inner{position:static!important;display:flex!important;align-items:flex-end!important;min-height:100svh;padding-block:calc(var(--header-height) + 48px) clamp(56px,8vw,112px)!important}
.hero-portrait{position:absolute!important;inset:0;z-index:-2;max-height:none!important;height:auto!important;margin:0}
.hero-portrait .portrait-crop{position:absolute;inset:0;height:100%!important;border-radius:0!important}
.hero-portrait img{width:100%!important;height:100%!important;object-fit:cover;object-position:68% 30%;transform:none!important}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(15,13,12,.5)}
.hero-story{max-width:min(980px,100%)}
.hero h1{color:#fff!important}
.hero .hero-lead{color:#fff!important;max-width:40ch}
.header:not(.is-scrolled){}
@media (max-width:820px){
  .hero-portrait{height:auto!important}
  .hero-portrait img{object-position:62% 25%}
}
.hero-portrait,.hero-portrait .portrait-crop{top:0!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important;max-height:none!important}
.hero-portrait img{position:absolute!important;inset:0!important}

/* Header over the hero image */
.header{transition:background-color .3s}
.header.over-hero{background:transparent!important}
.header.over-hero .wordmark,.header.over-hero nav a,.header.over-hero .nav-toggle{color:#fff!important}
.header.over-hero .wordmark img{filter:invert(1)!important}
.header.over-hero .reading-progress{opacity:0}
@media (max-width:820px){.header.over-hero nav a{color:inherit!important}}

/* Hero: person on the right, copy on the left, no scrim over the face */
.hero::after{display:none}
.hero-portrait,.hero-portrait .portrait-crop{left:auto!important;width:62%!important}
.hero-portrait .portrait-crop{left:0!important;width:100%!important}
.hero-portrait img{object-position:50% 25%!important}
.hero-story{max-width:min(46%,640px)!important;align-self:center}
.hero h1{font-size:clamp(3rem,6vw,6.5rem)!important}
@media (max-width:820px){
  .hero-portrait{width:100%!important;height:58%!important;bottom:auto!important}
  .hero-inner{align-items:flex-end!important}
  .hero-story{max-width:100%!important;align-self:flex-end;background:#171717;padding:24px;margin-inline:calc(var(--gutter)*-1);width:calc(100% + var(--gutter)*2)}
  .hero h1{font-size:clamp(2.4rem,10vw,3.6rem)!important}
}
@media (max-width:820px){
  .hero-portrait{height:50%!important}
  .hero-story{background:none;padding:0;margin:0;width:100%}
  .hero .button{width:auto;align-self:flex-start}
}
/* Buttons hug their label; full width only on small phones */
.button{width:auto!important;align-self:flex-start;justify-content:flex-start!important;gap:20px!important}
@media (max-width:480px){.button{width:100%!important;justify-content:space-between!important}}
/* Soft hand-over from the dark field into the portrait (user's choice) */
.hero-portrait .portrait-crop::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#171717 0%,rgba(23,23,23,.85) 15%,rgba(23,23,23,0) 50%)}
.hero-portrait{width:70%!important}
@media (max-width:820px){.hero-portrait{width:100%!important}.hero-portrait .portrait-crop::after{background:linear-gradient(0deg,#171717 0%,rgba(23,23,23,0) 45%)}}
/* Full-bleed image, darkened on the text side only */
.hero-portrait{width:100%!important;left:0!important}
.hero-portrait img{object-position:70% 25%!important}
.hero-portrait .portrait-crop::after{background:linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.4) 35%,rgba(0,0,0,0) 65%)}
@media (max-width:820px){.hero-portrait{height:100%!important}.hero-portrait .portrait-crop::after{background:linear-gradient(0deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.35) 50%,rgba(0,0,0,0) 80%)}}
@media (min-width:821px){.hero-portrait img{left:auto!important;right:-28%!important;width:128%!important;inset:0 -28% 0 auto!important;object-position:50% 25%!important}}
/* Hero exactly one screen tall; image fills it edge to edge, face pushed right */
.hero,.hero-inner{height:100vh!important;height:100svh!important;min-height:0!important;max-height:none!important}
.hero{width:100%!important;margin:0!important}
.hero-portrait,.hero-portrait .portrait-crop{overflow:hidden}
@media (min-width:821px){.hero-portrait img{inset:0 auto 0 0!important;left:0!important;right:auto!important;width:100%!important;height:100%!important;object-position:50% 25%!important;transform:scale(1.3) translateX(14%)!important;transform-origin:50% 25%}}
@media (min-width:821px){.hero-portrait img{transform:scale(1.3) translateX(10%)!important}}
/* Icons: Google Material Symbols only */
.material-symbols-rounded.icon{font-family:"Material Symbols Rounded";font-weight:500;font-style:normal;font-size:1.25em;line-height:1;width:auto!important;height:auto!important;display:inline-block;letter-spacing:0;text-transform:none;white-space:nowrap;-webkit-font-smoothing:antialiased;font-variation-settings:"FILL" 0,"wght" 500,"GRAD" 0,"opsz" 24;fill:none;stroke:none}
/* Logos: full colour, endless marquee */
.logo-track{display:flex!important;width:max-content!important;animation:logo-scroll 28s linear infinite!important}
.logo-strip:hover .logo-track{animation-play-state:paused!important}
.logo-row{display:flex!important;flex-wrap:nowrap!important;width:auto!important;max-width:none!important;min-width:100vw!important;justify-content:space-around!important;gap:clamp(64px,8vw,128px)!important;padding:0 clamp(32px,4vw,64px)!important;margin:0!important}
.logo-row[aria-hidden="true"]{display:flex!important}
.logo-row img,.logo-row img:hover{filter:none!important;opacity:1!important;height:44px!important}
@media (prefers-reduced-motion:reduce){.logo-track{animation:none!important}.logo-row[aria-hidden="true"]{display:none!important}}
.logo-strip{background:var(--paper)!important}
.logo-row img{width:auto!important;height:48px!important}
.logo-row img{mix-blend-mode:multiply}

/* ---------- AI motion layer ---------- */
.ai-field{position:fixed;inset:0;z-index:-1;pointer-events:none}
body{background:transparent!important}
html{background:var(--paper)}
main>section:not(.hero):not(.scene):not(.contact):not(.personal),.logo-strip,.footer{background:transparent!important}

/* Magnetic buttons */
.is-magnetic{transform:translate(var(--mx,0px),var(--my,0px))!important;transition:transform .35s cubic-bezier(.16,1,.3,1),background-color .25s,color .25s!important}
.is-magnetic:hover{transition:transform .12s linear,background-color .25s!important}
.button:hover,.header-cta:hover{background:var(--ink)!important;color:#fff!important}
.button .icon,.header-cta .icon,.text-link .icon,.card-link .icon{transition:transform .35s cubic-bezier(.16,1,.3,1)}
.button:hover .icon,.header-cta:hover .icon,.text-link:hover .icon,.card-link:hover .icon,a:hover>.icon{transform:translate(4px,-4px) rotate(45deg)}

/* Tilt cards with a following light */
.is-tilt{position:relative;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.16,1,.3,1);transform-style:preserve-3d}
.is-tilt::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--lx,50%) var(--ly,50%),rgba(238,68,40,.14),transparent 60%);z-index:2}
.is-tilt:hover::after{opacity:1}

/* Media drift */
.image-card-media img,.personal-media img,.offer-tile img{translate:0 var(--drift,0px)}

/* Nav links: sliding underline */
nav a,.footer a{position:relative;transition:color .2s}
nav a::after,.footer-links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--signal);transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.16,1,.3,1)}
nav a:hover::after,.footer-links a:hover::after{transform:scaleX(1);transform-origin:left}
nav a:hover{color:var(--signal)!important}

/* FAQ, tabs, logos */
.faq summary{cursor:pointer;transition:color .2s,padding-left .3s cubic-bezier(.16,1,.3,1)}
.faq summary:hover{color:var(--signal);padding-left:8px}
.process-tabs button{transition:background-color .25s,color .25s,transform .3s cubic-bezier(.16,1,.3,1)!important}
.process-tabs button:hover{transform:translateX(6px)}
.logo-row img{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.logo-row img:hover{transform:scale(1.1)}
.wordmark img{transition:transform .6s cubic-bezier(.16,1,.3,1)}
.wordmark:hover img{transform:rotate(-12deg) scale(1.08)}

@media (prefers-reduced-motion:reduce){.is-magnetic,.is-tilt{transform:none!important}.image-card-media img{translate:none}}
.logo-row img[src*="touchbase"],.logo-row img[src*="tinqwise"]{height:34px!important}

/* ---------- Blueprint frame: sections in an orange outline grid ---------- */
:root{--grid-line:rgba(238,68,40,.45);--grid-soft:rgba(238,68,40,.18)}
.routes,.process,.more-offers,.faq,.logo-strip{position:relative}
.routes::before,.process::before,.more-offers::before,.faq::before,.logo-strip::before{
  content:"";position:absolute;pointer-events:none;z-index:0;
  inset:0 calc(var(--gutter)*-.5);
  border-inline:1px solid var(--grid-line);border-top:1px solid var(--grid-line);
  background:
    linear-gradient(var(--signal),var(--signal)) top left/11px 1px no-repeat,
    linear-gradient(var(--signal),var(--signal)) top left/1px 11px no-repeat,
    linear-gradient(var(--signal),var(--signal)) top right/11px 1px no-repeat,
    linear-gradient(var(--signal),var(--signal)) top right/1px 11px no-repeat;
}
.logo-strip::before{inset:0 calc(var(--gutter)*.5);border-bottom:1px solid var(--grid-line)}
.faq::before{border-bottom:1px solid var(--grid-line)}
.routes>*,.process>*,.more-offers>*,.faq>*,.logo-strip>*{position:relative;z-index:1}

/* Inner cells: cards and panels get their own outline */
.image-card,.faq details,.process-panel{outline:1px solid var(--grid-soft);outline-offset:0;transition:outline-color .3s}
.image-card:hover,.faq details:hover,.process-panel:hover{outline-color:var(--signal)}
.image-card-body{padding:24px!important}
.process-panel{padding:clamp(24px,3vw,40px)!important}
.section-head{position:relative;padding-bottom:clamp(24px,3vw,40px);margin-bottom:clamp(32px,4vw,56px)!important}
.section-head::after,.faq-heading::after{content:"";position:absolute;left:calc(var(--gutter)*-.5);right:calc(var(--gutter)*-.5);bottom:0;height:1px;background:var(--grid-soft)}
.faq-heading{position:relative}

/* ---------- Neon frames: always on, offset, pulsing ---------- */
@keyframes neon-pulse{
  0%,100%{border-color:rgba(238,68,40,.55);box-shadow:0 0 0 rgba(238,68,40,0),inset 0 0 0 rgba(238,68,40,0)}
  50%{border-color:rgba(255,92,60,1);box-shadow:0 0 14px rgba(238,68,40,.55),0 0 34px rgba(238,68,40,.25),inset 0 0 10px rgba(238,68,40,.18)}
}
/* Section frames, including the photo and colour sections */
.scene,.personal,.contact{position:relative}
.routes::before,.process::before,.more-offers::before,.faq::before,.logo-strip::before,
.scene::before,.personal::before,.contact::before{
  border:1px solid rgba(238,68,40,.55)!important;
  animation:neon-pulse 3.2s ease-in-out infinite;
}
.scene::before,.personal::before,.contact::before{content:"";position:absolute;inset:14px;pointer-events:none;z-index:3}
.contact::before{border-color:rgba(255,255,255,.7)!important;animation-name:neon-pulse-light}
@keyframes neon-pulse-light{0%,100%{box-shadow:0 0 0 rgba(255,255,255,0)}50%{box-shadow:0 0 16px rgba(255,255,255,.6),inset 0 0 10px rgba(255,255,255,.25)}}
/* Stagger so the page breathes instead of blinking in sync */
.logo-strip::before{animation-delay:-.4s}.routes::before{animation-delay:-.8s}.configurator-scene::before{animation-delay:-1.2s}
.opera-scene::before{animation-delay:-1.6s}.process::before{animation-delay:-2s}.personal::before{animation-delay:-2.4s}
.more-offers::before{animation-delay:-2.8s}.faq::before{animation-delay:-.2s}

/* Cell frames: an offset outline that floats outside each card */
.image-card,.faq details,.process-panel,.offer-tile{position:relative;outline:none!important;overflow:visible!important}
.image-card::before,.faq details::before,.process-panel::before,.offer-tile::before{
  content:"";position:absolute;inset:-10px;pointer-events:none;z-index:2;
  border:1px solid rgba(238,68,40,.45);animation:neon-pulse 3.2s ease-in-out infinite;
  transition:inset .4s cubic-bezier(.16,1,.3,1)
}
.offer-tile--image::before{background:none!important}
.offer-tile--image{isolation:auto}
.offer-tile--image::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(23,23,23,.6)}
.image-card:nth-child(2)::before,.faq details:nth-child(even)::before,.offer-tile:nth-child(2)::before{animation-delay:-1.6s}
.image-card:hover::before,.faq details:hover::before,.process-panel:hover::before,.offer-tile:hover::before{inset:-4px;border-color:#ff5c3c}
.offer-tile{overflow:hidden!important}
.offer-tile::before{inset:10px}
.offer-tile:hover::before{inset:16px}
.faq details{margin-bottom:24px!important}
.route-cards,.more-offers{gap:clamp(32px,3.5vw,56px)!important}

@media (prefers-reduced-motion:reduce){
  .routes::before,.process::before,.more-offers::before,.faq::before,.logo-strip::before,.scene::before,.personal::before,.contact::before,
  .image-card::before,.faq details::before,.process-panel::before,.offer-tile::before{animation:none}
}

/* ---------- Tron light trail: replaces the pulse ---------- */
.routes::before,.process::before,.more-offers::before,.faq::before,.logo-strip::before,
.scene::before,.personal::before,.contact::before,
.image-card::before,.faq details::before,.process-panel::before,.offer-tile::before{animation:none!important;box-shadow:none!important}
.image-card::before,.faq details::before,.process-panel::before,.offer-tile::before{border-color:rgba(238,68,40,.35)!important}
.image-card:hover::before,.faq details:hover::before,.process-panel:hover::before,.offer-tile:hover::before{inset:-10px;border-color:rgba(238,68,40,.35)!important}
.offer-tile:hover::before{inset:10px}

@property --trail{syntax:"<angle>";inherits:false;initial-value:0deg}
.tron{position:absolute;inset:-11px;pointer-events:none;z-index:4;padding:2px;
  background:conic-gradient(from var(--trail),transparent 0 62%,rgba(238,68,40,.25) 78%,#ee4428 93%,#fff 97.5%,transparent 98%);
  -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 exclude,linear-gradient(#000 0 0);
  filter:drop-shadow(0 0 4px #ee4428) drop-shadow(0 0 10px rgba(238,68,40,.7));
  opacity:0;transition:opacity .3s}
.offer-tile>.tron{inset:9px}
:hover>.tron{opacity:1;animation:trail 1.4s linear infinite}
@keyframes trail{to{--trail:360deg}}
@media (prefers-reduced-motion:reduce){:hover>.tron{animation:none;background:none;border:2px solid #ee4428;padding:0}}
/* Tron trail v2: SVG stroke, uniform speed around the outline */
.tron{background:none!important;-webkit-mask:none!important;mask:none!important;padding:0!important;overflow:visible;width:calc(100% + 22px);height:calc(100% + 22px);left:-11px;top:-11px;inset:auto}
.offer-tile>.tron{width:calc(100% - 18px);height:calc(100% - 18px);left:9px;top:9px}
.tron rect{fill:none;stroke:#ff5c3c;stroke-width:2;stroke-linecap:round;stroke-dasharray:14 86;stroke-dashoffset:0;filter:drop-shadow(0 0 3px #ee4428) drop-shadow(0 0 8px rgba(238,68,40,.8))}
:hover>.tron{animation:none;opacity:1}
:hover>.tron rect{animation:tron-run 1.6s linear infinite}
@keyframes tron-run{to{stroke-dashoffset:-100}}
.faq details>.tron{display:block}
/* Calm pass: everything quieter */
.tron rect{width:calc(100% - 2px);height:calc(100% - 2px);stroke-width:1.5;filter:drop-shadow(0 0 3px rgba(238,68,40,.6))}
.image-card::before,.faq details::before,.process-panel::before,.offer-tile::before{border-color:rgba(238,68,40,.2)!important}
.routes::before,.process::before,.more-offers::before,.faq::before,.logo-strip::before,.scene::before,.personal::before{border-color:rgba(238,68,40,.28)!important}
.is-tilt{transform:none!important}
.is-tilt::after{display:none}
/* Slow, rounded comet trail */
.image-card::before,.faq details::before,.process-panel::before,.offer-tile::before,.tron{border-radius:18px}
.image-card-media,.offer-tile,.faq details{border-radius:12px!important;overflow:hidden}
.image-card{overflow:visible!important}
.tron rect{x:1px;y:1px;width:calc(100% - 2px);height:calc(100% - 2px);stroke-width:1.25;stroke-linecap:round;stroke-dashoffset:calc(var(--s) * 1);filter:none}
.tron .head{stroke:#ff6a4a;filter:drop-shadow(0 0 3px rgba(238,68,40,.55))}
.tron .tail1{stroke:rgba(238,68,40,.35)}
.tron .tail2{stroke:rgba(238,68,40,.12)}
.tron{opacity:0;transition:opacity .8s ease}
:hover>.tron{opacity:1}
:hover>.tron rect{animation:tron-slow 7s linear infinite}
@keyframes tron-slow{from{stroke-dashoffset:calc(var(--s) * 1)}to{stroke-dashoffset:calc(var(--s) * 1 - 100)}}
.faq details{overflow:visible!important}
.tron rect{stroke-dashoffset:var(--s)}
@keyframes tron-slow{from{stroke-dashoffset:var(--s)}to{stroke-dashoffset:calc(var(--s) - 100px)}}
.tron{left:-11px!important;top:-11px!important}
.offer-tile>.tron{left:9px!important;top:9px!important}
.faq summary{position:static!important}
.faq details:hover .tron{opacity:1}
.faq details:hover .tron rect{animation:tron-slow 7s linear infinite}
.tron .head{stroke:rgba(255,106,74,.9)!important;filter:drop-shadow(0 0 3px rgba(238,68,40,.5))}

/* Shared Tron trail that follows the pointer from element to element */
.tron{display:none!important}
.tron-overlay{position:fixed;left:0;top:0;z-index:70;pointer-events:none;overflow:visible;opacity:0;transition:opacity .5s ease}
.tron-overlay.is-on{opacity:1}
.tron-overlay rect{fill:none;stroke:rgba(238,68,40,.09);stroke-linecap:round;stroke-dashoffset:var(--s);animation:tron-slow 7s linear infinite}
.tron-overlay .head{stroke:rgba(255,106,74,.9);filter:drop-shadow(0 0 3px rgba(238,68,40,.5))}

/* Orange outline grid removed (user's call) */
.routes::before,.process::before,.more-offers::before,.faq::before,.logo-strip::before,
.scene::before,.personal::before,.contact::before,
.image-card::before,.faq details::before,.process-panel::before,.offer-tile::before,
.section-head::after,.faq-heading::after{display:none!important;content:none!important}

/* Display face: Bricolage Grotesque, tight and condensed */
h1,h2,h3,.process-tabs button,.faq summary,.wordmark{font-family:"Bricolage Grotesque",var(--font)!important;font-variation-settings:"wdth" 80,"opsz" 96}
h1,h2,h3{font-weight:800!important;letter-spacing:-.04em!important}
h3{font-variation-settings:"wdth" 85,"opsz" 48}
.accent{font-family:inherit!important}
h1,h2,h3,.process-tabs button,.faq summary{font-variation-settings:"wdth" 92,"opsz" 96!important}
h1,h2{letter-spacing:-.035em!important;line-height:.95!important}
h1{font-size:clamp(3.2rem,7vw,7.5rem)!important}
.wordmark{font-family:var(--font)!important;font-variation-settings:normal}

/* Display face: Archivo Expanded, a wide, engineered grotesk in the spirit of Porsche Next */
h1,h2,h3,.process-tabs button,.faq summary{font-family:"Archivo",var(--font)!important;font-variation-settings:"wdth" 118!important;font-weight:700!important}
h1,h2{letter-spacing:-.03em!important;line-height:1!important}
h1{font-size:clamp(2.8rem,6vw,6.4rem)!important}
h2{font-size:clamp(2.2rem,4.6vw,5rem)!important}
h3{letter-spacing:-.02em!important;font-weight:600!important;font-variation-settings:"wdth" 110!important}
.process-tabs button,.faq summary{font-weight:500!important;letter-spacing:-.01em}
@media (min-width:821px){.hero-story{max-width:min(58%,860px)!important}}

/* ---------- Lighter beige + subtle Apple-style glass ---------- */
:root{--paper:#f7f2ec;--field:#efe8e0;--field-2:#e8dfd5;
  --glass:rgba(255,255,255,.42);--glass-strong:rgba(255,255,255,.6);
  --glass-edge:rgba(255,255,255,.75);--glass-shade:rgba(23,23,23,.06)}
html{background:var(--paper)}

/* Glass recipe: translucent white, blur + saturation, a bright top edge and a soft drop */
.header:not(.over-hero),
.scene-copy,.faq details,.process-panel,.process-panel .step-agreement,.process-tabs button:not([aria-selected="true"]),
.image-card-body,.offer-tile:not(.offer-tile--image) {
  background:var(--glass)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.6)!important;backdrop-filter:blur(22px) saturate(1.6)!important;
  box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 0 0 1px rgba(255,255,255,.35),0 10px 30px -18px var(--glass-shade)!important;
}
.header:not(.over-hero){background:rgba(247,242,236,.62)!important}
.scene-copy{border-radius:20px;background:var(--glass-strong)!important}
.opera-scene .scene-copy{background:var(--glass-strong)!important}
.faq details,.process-panel,.process-panel .step-agreement{border-radius:16px}
.image-card-body{border-radius:0 0 12px 12px}
.process-tabs button[aria-selected="true"]{box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.faq details[open]{background:var(--glass-strong)!important}

/* Glass pill on the hero CTA and buttons on photos */
.hero .button{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 30px -14px rgba(238,68,40,.6)!important}
.header.over-hero .header-cta,.hero .text-link{background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}

/* Soft colour blooms behind glass so the blur has something to refract */
main{position:relative}
.routes,.faq,.process{isolation:isolate}
.routes::after,.process::after,.faq::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:46vw;height:46vw;border-radius:50%;filter:blur(80px);opacity:.35}
.routes::after{right:-10vw;top:10%;background:#ffc4b3}
.process::after{left:-12vw;top:20%;background:#ffd9c2}
.faq::after{right:-8vw;bottom:0;background:#ffcfbf}
html,body{overflow-x:clip}
main{overflow-x:clip}

/* Hero video: Kenny turns to follow the pointer */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
@media (min-width:821px){.hero-video{transform:scale(1.3) translateX(10%);transform-origin:50% 25%}}
@media (max-width:820px){.hero-video{object-position:50% 20%}}

/* Secondary buttons: same pill as the primary, outlined */
.text-link,.card-link{
  display:inline-flex!important;align-items:center;justify-content:flex-start;gap:20px!important;
  align-self:flex-start;width:auto!important;min-height:58px;padding:16px 30px!important;
  border:1.5px solid var(--signal)!important;border-radius:999px!important;
  color:var(--signal)!important;background:transparent!important;
  font-size:1rem!important;font-weight:600!important;line-height:1.4;
  text-decoration:none!important;transition:background-color .25s,color .25s!important}
.text-link:hover,.card-link:hover,a:hover>.card-link{background:var(--signal)!important;color:#fff!important}
.text-link::after,.card-link::after{display:none!important}
.image-card-body .card-link{margin-top:8px}
.hero .text-link,.contact .text-link{border-color:currentColor!important}
.contact .text-link{color:#fff!important;border-color:#fff!important}
.contact .text-link:hover{background:#fff!important;color:var(--signal)!important}
@media (max-width:480px){.text-link,.card-link{width:100%!important;justify-content:space-between}}
.text-link,.card-link{min-height:68px!important;padding:20px 28px!important;border-width:2px!important}

/* Display face: Playfair Display */
h1,h2,h3,.process-tabs button,.faq summary{font-family:"Playfair Display",Georgia,serif!important;font-variation-settings:normal!important}
h1,h2{font-weight:600!important;letter-spacing:-.02em!important;line-height:1.02!important}
h1{font-size:clamp(3rem,6.4vw,7rem)!important}
h2{font-size:clamp(2.4rem,5vw,5.4rem)!important}
h3{font-weight:600!important;letter-spacing:-.01em!important}
.accent{font-style:italic!important;font-weight:500!important}
.process-tabs button,.faq summary{font-weight:500!important;letter-spacing:0}
/* Bold + light contrast inside each headline */
h1,h2,h3{font-weight:800!important}
h1 .accent,h2 .accent,h3 .accent{font-weight:400!important;font-style:italic!important}
/* Hero video zoom, driven by scroll and pointer (see ai-motion.js) */
@media (min-width:821px){.hero-video{transform:translate(var(--vx,0px),var(--vy,0px)) scale(calc(1.3 * var(--vz,1))) translateX(10%)!important;will-change:transform}}
@media (max-width:820px){.hero-video{transform:scale(var(--vz,1));will-change:transform}}

/* Logo outline trail */
.logo-mark{display:block;flex:none;overflow:visible;color:currentColor}
.logo-trail{stroke:rgba(238,68,40,.12);vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dashoffset:var(--s);animation:tron-slow 9s linear infinite}
.logo-trail.head{stroke:#ff6a4a;filter:drop-shadow(0 0 2px rgba(238,68,40,.7))}
.wordmark .logo-mark{margin-right:.35em}
@media (prefers-reduced-motion:reduce){.logo-trail{display:none}}
.logo-trail{stroke:rgba(238,68,40,.16)}

/* Headlines: light base, the important part bold with a shiny orange flow */
h1,h2,h3{font-weight:400!important}
h1 .accent,h2 .accent,h3 .accent{
  font-weight:800!important;font-style:italic!important;
  background:linear-gradient(100deg,#ee4428 0%,#ff7a3d 18%,#ffb36b 30%,#ff5a2e 42%,#d9301a 55%,#ff8a4c 70%,#ffc58a 80%,#ee4428 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent!important;
  animation:accent-flow 6s ease-in-out infinite;
  padding-right:.08em;
}
@keyframes accent-flow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@media (prefers-reduced-motion:reduce){h1 .accent,h2 .accent,h3 .accent{animation:none}}
/* Hero accent stays white over the photo: bold italic, a soft white shimmer instead of orange */
.hero h1 .accent{
  background:linear-gradient(100deg,#fff 0%,#fff 40%,#ffe3d6 50%,#fff 60%,#fff 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* Logo: outline trail removed; the name types itself */
.logo-trail{display:none!important}
.wordmark-type{display:inline-block;white-space:nowrap;position:relative}
.wordmark-type::after{content:"";display:inline-block;width:2px;height:.9em;margin-left:3px;vertical-align:-.08em;background:var(--signal);animation:caret 1s steps(1) infinite}
.wordmark-type.is-done::after{animation:caret 1s steps(1) 3 forwards}
@keyframes caret{50%{opacity:0}}

/* Floating sticky menu: a glass bar with room around it */
.header{
  top:16px!important;left:50%!important;right:auto!important;
  width:min(calc(100% - 32px),1320px)!important;transform:translateX(-50%);
  border-radius:999px!important;overflow:hidden;
  background:rgba(247,242,236,.62)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.6)!important;backdrop-filter:blur(22px) saturate(1.6)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 0 0 1px rgba(255,255,255,.35),0 12px 36px -18px rgba(23,23,23,.25)!important;
  transition:background-color .4s,box-shadow .4s!important}
.header .header-inner{height:64px!important;padding-inline:28px!important;margin:0!important;max-width:none!important;width:100%!important}
.header.over-hero{background:rgba(20,16,14,.22)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(255,255,255,.12)!important}
.reading-progress{display:none!important}
@media (max-width:1200px){
  .header{top:10px!important;width:calc(100% - 20px)!important;border-radius:22px!important;overflow:visible}
  .header .header-inner{height:56px!important;padding-inline:18px!important}
}
/* Orange blooms removed */
.routes::after,.process::after,.faq::after{display:none!important;content:none!important}
/* Contact accent on the orange field: white with a soft shimmer */
.contact h2 .accent{
  background:linear-gradient(100deg,#fff 0%,#fff 40%,#ffe3d6 50%,#fff 60%,#fff 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:1!important}

/* ---------- Dark enterprise footer ---------- */
.site-footer{position:relative;background:#121110;color:#d9d3cc;margin-top:0;padding-top:clamp(72px,9vw,128px);overflow:hidden;border-radius:32px 32px 0 0}
.site-footer a{color:#f7f2ec}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(32px,5vw,80px);align-items:start}
.footer-brand .wordmark{color:#fff!important;font-size:1.6rem}
.footer-brand .wordmark img,.footer-brand .logo-mark{filter:invert(1)}
.footer-brand .logo-mark{filter:none;color:#fff}
.footer-brand p{margin:20px 0 32px;max-width:28ch;font-size:1.125rem;color:#bdb5ad}
.footer-col{display:flex;flex-direction:column;gap:14px}
.footer-col h2{font-family:var(--font)!important;font-size:.875rem!important;font-weight:600!important;letter-spacing:0!important;line-height:1.4!important;color:#ee4428!important;margin:0 0 6px}
.footer-col a,.footer-col span{font-size:1rem;color:#d9d3cc;transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-giant{font-family:"Playfair Display",Georgia,serif;font-weight:800;font-style:italic;font-size:clamp(5rem,22vw,22rem);line-height:.8;letter-spacing:-.04em;text-align:center;margin-top:clamp(56px,8vw,112px);
  background:linear-gradient(100deg,#ee4428,#ff8a4c 30%,#ffc58a 45%,#ee4428 60%,#d9301a);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:accent-flow 10s ease-in-out infinite;opacity:.95;user-select:none;transform:translateY(12%)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-block:24px;border-top:1px solid rgba(255,255,255,.08);font-size:.875rem;color:#8f8780;position:relative;z-index:1;background:#121110}
.site-footer .back-top{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff}
.site-footer .back-top:hover{background:#ee4428}
@media (max-width:900px){.footer-top{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media (max-width:520px){.footer-top{grid-template-columns:1fr}}
/* Giant footer name in the logo's own face */
.footer-giant{font-family:var(--font)!important;font-style:normal!important;font-weight:800!important;letter-spacing:-.06em!important;line-height:.78!important;font-size:clamp(4.5rem,21vw,21rem)!important;transform:none!important;margin-bottom:clamp(16px,2vw,32px);padding-inline:var(--gutter);text-align:left}
.footer-bottom{background:none!important}
/* Bottom bar above the giant name; the name sinks half below the page edge */
.site-footer{display:flex;flex-direction:column}
.site-footer .footer-top{order:1}
.site-footer .footer-bottom{order:2;margin-top:clamp(48px,6vw,96px)}
.site-footer .footer-giant{order:3;margin:clamp(8px,1.5vw,24px) 0 -.36em!important;pointer-events:none}
/* Footer slides over the orange contact block so its rounded corners sit on orange, not on beige */
.site-footer{margin-top:-32px!important;z-index:2}
.contact{padding-bottom:32px}
.contact-bottom{bottom:62px!important}
/* Contact block: the same flowing orange as the highlighted words */
.contact{
  background:linear-gradient(110deg,#ee4428 0%,#ff7a3d 22%,#ffa060 38%,#ff5a2e 55%,#d9301a 72%,#ff8a4c 88%,#ee4428 100%)!important;
  background-size:220% 220%!important;animation:contact-flow 14s ease-in-out infinite}
@keyframes contact-flow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@media (prefers-reduced-motion:reduce){.contact{animation:none}}
.routes{padding-top:clamp(56px,6vw,96px)!important}
.logo-strip{padding-block:clamp(72px,8vw,120px)!important}

/* AI cursor: dot + lagging ring with the light trail */
.has-ai-cursor,.has-ai-cursor *{cursor:none!important}
.has-ai-cursor input,.has-ai-cursor textarea{cursor:text!important}
.tron-overlay{z-index:9999}
.tron-overlay rect.tail{stroke:rgba(238,68,40,.12)}
.tron-overlay::before{content:none}
.cursor-dot{position:fixed;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#ee4428;box-shadow:0 0 10px 2px rgba(238,68,40,.55);pointer-events:none;z-index:10000;opacity:0;transition:opacity .3s}
.cursor-dot.is-on{opacity:1}
.tron-overlay .ring-base{fill:rgba(238,68,40,.04);stroke:rgba(238,68,40,.22);stroke-width:1}
.tron-overlay{border-radius:50%;box-shadow:inset 0 0 0 1px rgba(238,68,40,.25),0 0 18px rgba(238,68,40,.18);background:rgba(238,68,40,.03)}
.cursor-ghost{position:fixed;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;pointer-events:none;z-index:9998;
  box-shadow:inset 0 0 0 1px rgba(238,68,40,.5),0 0 14px rgba(238,68,40,.25);visibility:hidden}
.cursor-ghost.is-on{visibility:visible}
.cursor-ghost{display:none!important}
.cursor-trail{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:9997;filter:drop-shadow(0 0 4px rgba(238,68,40,.35))}
/* Ring around the dot removed; dot + contrail remain */
.tron-overlay{display:none!important}
/* Contact in the menu as a pill button */
#main-nav a[href="/contact/"]{background:var(--signal);color:#fff!important;border-radius:999px;padding:10px 20px!important;margin-left:8px;font-weight:600;transition:background-color .25s}
#main-nav a[href="/contact/"]::after{display:none}
#main-nav a[href="/contact/"]:hover{background:var(--ink);color:#fff!important}

/* ---------- Services as a card deck ---------- */
.routes.is-deck{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,120px);align-items:center;padding-bottom:clamp(96px,10vw,160px)!important}
.routes.is-deck .section-head{margin:0!important;padding:0!important}
.deck-switch{display:flex;flex-direction:column;gap:10px;margin-top:clamp(32px,4vw,56px)}
.deck-switch button{all:unset;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 24px;border-radius:999px;font-size:1.0625rem;font-weight:600;color:var(--ink);
  background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 0 0 1px rgba(255,255,255,.35);transition:background-color .3s,color .3s,transform .3s}
.deck-switch button:hover{transform:translateX(6px)}
.deck-switch button[aria-selected="true"]{background:var(--signal);color:#fff;box-shadow:0 12px 30px -14px rgba(238,68,40,.6)}
.deck-switch button:focus-visible{outline:3px solid var(--signal);outline-offset:3px}

.routes.is-deck .route-cards{display:grid!important;grid-template-columns:1fr!important;gap:0!important;position:relative;perspective:1400px}
.routes.is-deck .image-card{grid-area:1/1;transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .6s,filter .6s!important;transform-origin:60% 100%}
.routes.is-deck .image-card.is-front{z-index:2;transform:none!important;opacity:1}
.routes.is-deck .image-card.is-back{z-index:1;transform:translate(7%,-7%) rotate(4deg) scale(.92)!important;opacity:.55;filter:saturate(.6)}
.routes.is-deck .image-card.is-back:hover{opacity:.8;transform:translate(9%,-9%) rotate(5deg) scale(.93)!important}
.routes.is-deck .image-card.is-back .card-kicker{display:none}
.routes.is-deck .card-kicker{display:none}
@media (max-width:900px){
  .routes.is-deck{grid-template-columns:1fr}
  .deck-switch{flex-direction:row;flex-wrap:wrap}
  .routes.is-deck .image-card.is-back{transform:translate(4%,-4%) rotate(3deg) scale(.94)!important}
}
@media (prefers-reduced-motion:reduce){.routes.is-deck .image-card{transition:none!important}}
@media (min-width:901px){.routes.is-deck .image-card.is-back{transform:translate(3.5%,-6%) rotate(3deg) scale(.93)!important}.routes.is-deck .image-card.is-back:hover{transform:translate(4.5%,-7.5%) rotate(4deg) scale(.94)!important}.routes.is-deck .route-cards{margin-right:clamp(16px,3vw,48px)}}

/* Deck cards: photo fills the card, copy floats on it as glass */
.routes.is-deck .route-cards{margin-inline:clamp(16px,3vw,48px) clamp(24px,4vw,64px)}
.routes.is-deck .image-card{position:relative;border-radius:22px!important;overflow:hidden!important;height:min(72vh,620px)}
.routes.is-deck .image-card-media{position:absolute;inset:0;aspect-ratio:auto!important;border-radius:0!important}
.routes.is-deck .image-card-media img{width:100%;height:100%;object-fit:cover}
.routes.is-deck .image-card-body{
  position:absolute;left:16px;right:16px;bottom:16px;padding:24px 28px!important;border-radius:18px!important;
  background:rgba(255,255,255,.28)!important;
  -webkit-backdrop-filter:blur(24px) saturate(1.8)!important;backdrop-filter:blur(24px) saturate(1.8)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,255,255,.3),0 20px 40px -20px rgba(0,0,0,.35)!important;
  display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:20px}
.routes.is-deck .image-card-body h3{color:#fff!important;text-shadow:0 1px 16px rgba(0,0,0,.25);margin:0;font-size:clamp(1.5rem,2.2vw,2.1rem)!important}
.routes.is-deck .image-card-body .card-link{flex:none;margin:0;background:#fff!important;border-color:#fff!important;color:var(--signal)!important}
.routes.is-deck .image-card-body .card-link:hover{background:var(--signal)!important;border-color:var(--signal)!important;color:#fff!important}
.routes.is-deck .image-card.is-back{transform:translate(4%,-5%) rotate(2.5deg) scale(.94)!important}
@media (max-width:900px){
  .routes.is-deck .image-card{height:min(78vh,560px)}
  .routes.is-deck .image-card-body{flex-direction:column;align-items:flex-start}
}
.routes.is-deck .image-card{height:clamp(460px,72vh,640px)}
.routes.is-deck .image-card-body{flex-direction:column!important;align-items:flex-start!important;gap:18px!important;background:rgba(24,18,15,.32)!important;right:auto!important;max-width:calc(100% - 32px)}
.routes.is-deck .image-card-body h3{font-size:clamp(1.6rem,2.4vw,2.3rem)!important;line-height:1.1!important}
.deck-switch{align-items:flex-start}
.deck-switch button{width:auto}
/* Swipe */
.routes.is-deck .image-card.is-front{cursor:grab!important;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.routes.is-deck .image-card.is-dragging{transition:none!important;cursor:grabbing!important}
.routes.is-deck .image-card img{pointer-events:none}

/* ---------- Work: pinned stage ---------- */
#werk.is-pinned{position:relative;height:calc(var(--scenes) * 100vh)}
.work-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#111}
#werk.is-pinned .scene{position:absolute!important;inset:0;min-height:0!important;height:100%!important;margin:0!important;pointer-events:none}
#werk.is-pinned .scene.is-active{pointer-events:auto;z-index:2}
#werk.is-pinned .scene::before{display:none!important}
#werk.is-pinned .scene-media{opacity:0;transform:scale(1.08);transition:opacity 1s ease,transform 1.6s cubic-bezier(.16,1,.3,1)}
#werk.is-pinned .scene.is-active .scene-media{opacity:1;transform:scale(1)}
#werk.is-pinned .scene-copy{opacity:0;transform:translateY(60px);transition:opacity .6s ease,transform .9s cubic-bezier(.16,1,.3,1)}
#werk.is-pinned .scene.is-past .scene-copy{transform:translateY(-60px)}
#werk.is-pinned .scene.is-active .scene-copy{opacity:1;transform:none;transition-delay:.25s}
#werk.is-pinned .scene-caption{opacity:0;transition:opacity .6s}
#werk.is-pinned .scene.is-active .scene-caption{opacity:1}
.work-dots{position:absolute;right:clamp(16px,3vw,40px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:5}
.work-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);box-shadow:0 0 0 1px rgba(0,0,0,.1);transition:all .4s}
.work-dots span.is-on{height:28px;border-radius:8px;background:#ee4428;box-shadow:0 0 12px rgba(238,68,40,.6)}
@media (prefers-reduced-motion:reduce){#werk.is-pinned .scene-media,#werk.is-pinned .scene-copy{transition:none}}

/* Work switch choreography: image → card → heading → body → button */
#werk.is-pinned .scene-media{transition:opacity 1.1s ease,transform 1.8s cubic-bezier(.16,1,.3,1)!important;transition-delay:0s!important}
#werk.is-pinned .scene-copy{opacity:0;transform:translateY(40px) scale(.98);transition:opacity .7s ease,transform 1s cubic-bezier(.16,1,.3,1)!important;transition-delay:0s!important}
#werk.is-pinned .scene.is-active .scene-copy{opacity:1;transform:none;transition-delay:.45s!important}
#werk.is-pinned .scene-copy>*{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1)!important;transition-delay:0s!important}
#werk.is-pinned .scene.is-active .scene-copy>h2{opacity:1;transform:none;transition-delay:.85s!important}
#werk.is-pinned .scene.is-active .scene-copy>p{opacity:1;transform:none;transition-delay:1.1s!important}
#werk.is-pinned .scene.is-active .scene-copy>a{opacity:1;transform:none;transition-delay:1.35s!important}
@media (prefers-reduced-motion:reduce){#werk.is-pinned .scene-copy>*{transition:none!important}}
/* Slower choreography */
#werk.is-pinned .scene.is-active .scene-copy{transition-delay:.7s!important}
#werk.is-pinned .scene.is-active .scene-copy>h2{transition-delay:1.3s!important}
#werk.is-pinned .scene.is-active .scene-copy>p{transition-delay:1.75s!important}
#werk.is-pinned .scene.is-active .scene-copy>a{transition-delay:2.2s!important}
/* Cards keep a margin from the screen edges */
#werk.is-pinned .scene-content{padding-inline:clamp(24px,5vw,80px)!important;width:100%;max-width:none!important}
#werk.is-pinned .scene-copy{margin:0!important;width:min(56%,760px)!important}
@media (max-width:820px){#werk.is-pinned .scene-copy{width:100%!important}#werk.is-pinned .scene-content{padding-inline:16px!important}}

/* ---------- Section flow: soft in and out ---------- */
.flow-part{transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1.3s cubic-bezier(.16,1,.3,1),filter 1s ease!important;will-change:opacity,transform}
.flow-section:not(.is-in) .flow-part{opacity:0;filter:blur(6px)}
.flow-section.is-out-down .flow-part,.flow-section:not(.is-in):not(.is-out-up) .flow-part{transform:translateY(56px)}
.flow-section.is-out-up .flow-part{transform:translateY(-40px)}
.flow-section.is-in .flow-part{opacity:1;filter:none;transform:none;transition-delay:calc(var(--i) * .16s)!important}
.flow-section:not(.is-in) .flow-part{transition-delay:calc((var(--n) - var(--i)) * .05s)!important;transition-duration:.7s,.9s,.7s!important}
/* keep the deck's own card transforms */
.routes.is-deck.flow-section .route-cards.flow-part{transform-style:preserve-3d}
.flow-section.is-in .flow-part{transition-delay:calc(.3s + var(--i) * .18s)!important}

/* ---------- Kenny as a premium profile card ---------- */
.personal{
  width:min(calc(100% - 2 * var(--gutter)),1320px);margin:clamp(64px,8vw,120px) auto!important;min-height:0!important;
  border-radius:32px;overflow:hidden;isolation:isolate;
  background:rgba(255,255,255,.55)!important;
  -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.5),0 40px 80px -40px rgba(60,30,20,.28)!important}
.personal-media{top:14px!important;bottom:14px!important;left:14px!important;width:calc(44% - 14px)!important;border-radius:22px;overflow:hidden;background:var(--field-2)!important}
.personal-media img{width:100%;height:100%;object-fit:cover}
.personal-layout{padding-block:clamp(56px,6vw,88px)!important;gap:clamp(40px,6vw,96px)!important;width:100%!important;max-width:none!important;margin:0!important;padding-inline:clamp(24px,4vw,64px)!important}
.personal-copy p:not(.eyebrow):not(.personal-lead){color:var(--muted)}
/* Signature details: an orange online dot on the photo, glass name tag */
.personal-media::after{content:"";position:absolute;left:20px;bottom:20px;width:12px;height:12px;border-radius:50%;background:#35c46a;box-shadow:0 0 0 4px rgba(255,255,255,.7),0 0 14px rgba(53,196,106,.7);animation:online 2.4s ease-in-out infinite}
@keyframes online{50%{box-shadow:0 0 0 4px rgba(255,255,255,.7),0 0 4px rgba(53,196,106,.3)}}
@media (max-width:820px){
  .personal{border-radius:24px}
  .personal-media{position:relative!important;inset:auto!important;width:auto!important;height:360px;margin:12px}
  .personal-layout{padding-block:32px 40px!important}
}
.personal-media::after{display:none!important}

/* Offer tiles styled like the service deck cards */
.more-offers .offer-tile{border-radius:22px!important;padding:16px!important;min-height:clamp(460px,40vw,600px)!important;justify-content:flex-end!important;overflow:hidden!important;background:#222!important;box-shadow:0 30px 60px -30px rgba(60,30,20,.35)!important}
.more-offers .offer-tile::after,.more-offers .offer-tile--image::before{display:none!important}
.more-offers .offer-tile img{border-radius:0}
.offer-body{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:24px 28px;border-radius:18px;max-width:100%;
  background:rgba(24,18,15,.32);-webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,255,255,.3),0 20px 40px -20px rgba(0,0,0,.35)}
.offer-body .card-kicker{color:#fff!important;opacity:.85;font-weight:500!important}
.offer-body h3{color:#fff!important;margin:0;font-size:clamp(1.6rem,2.4vw,2.3rem)!important;line-height:1.1!important;text-shadow:0 1px 16px rgba(0,0,0,.25)}
.offer-body h3 .accent{background:none!important;-webkit-text-fill-color:#fff!important;color:#fff!important;animation:none!important}
.offer-body .card-link{background:#fff!important;border-color:#fff!important;color:var(--signal)!important}
.offer-tile:hover .offer-body .card-link{background:var(--signal)!important;border-color:var(--signal)!important;color:#fff!important}
/* Drifting photos are scaled up so their edges never show */
.offer-tile img,.image-card-media img,.personal-media img{scale:1.08}
.more-offers .offer-tile{background:transparent!important}
.more-offers .offers-head{grid-column:1/-1;margin:0 0 clamp(16px,2vw,32px)!important;padding:0!important}
.more-offers{padding-top:clamp(96px,10vw,160px)!important}
/* More air between heading and button in glass cards */
.offer-body .card-link,.routes.is-deck .image-card-body .card-link{margin-top:16px!important}
/* While approaching, show the first photo only; its card waits until the stage is pinned */
.work-stage:not(:has(.scene.is-active)) .scene:first-of-type .scene-media{opacity:1}
main h2,.section-head,.deck-switch,.route-cards,.process-tabs,.process-panels,.personal-copy,.offer-tile,.faq-heading,.faq-items,.footer-top{will-change:translate}

/* ---------- Subpages: same language as the homepage ---------- */
/* No hairlines: rhythm comes from space and tone */
main :is(section,div,article,li,dl,header,ol,ul,aside,p):not(.footer-bottom){border-top-color:transparent!important;border-bottom-color:transparent!important}
main hr{display:none}
/* Pictures: rounded, inset from the edges */
.story-photo-crop,.detail-image,.work-preview img,.work-preview-media,.article-header img{border-radius:22px;overflow:hidden}
.story-photo,.detail-image{margin-inline:var(--gutter)}
/* Content blocks with a step label become glass cards */
.detail-content > *:has(.step-label),.story-copy:has(.step-label),.knowledge-list > li,.knowledge-list > a,.related-reading a,.work-preview-copy,.delivery-details,.article-answer,.meeting-note{
  background:rgba(255,255,255,.45);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 0 0 1px rgba(255,255,255,.35),0 16px 40px -24px rgba(60,30,20,.2);
  border-radius:20px;padding:clamp(24px,3vw,40px)!important}
.knowledge-list{display:grid;gap:16px}
.step-label{color:var(--signal)!important;font-weight:600}
.breadcrumbs a{color:var(--muted)}
/* Only the outer block is a glass card; nothing nested inside it */
:is(.detail-content > *:has(.step-label)) :is(.story-copy,.delivery-details,.meeting-note,.article-answer){background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;padding:0!important;border-radius:0}
:is(.detail-content > *:has(.step-label)) details{background:rgba(255,255,255,.5)!important}

/* ---------- Subpage hero: full screen, media behind, copy bottom-left ---------- */
.page-hero{position:relative!important;isolation:isolate;min-height:100svh!important;display:flex!important;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  padding-top:calc(var(--header-height) + 64px)!important;padding-bottom:clamp(56px,8vw,112px)!important;margin-bottom:0!important;background:transparent!important;color:#fff}
.page-hero-media{position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;margin:0;overflow:hidden;background:#171310}
.page-hero-media img,.page-hero-media video{width:100%;height:100%;object-fit:cover;object-position:60% 30%;transform:scale(1.04);transform-origin:60% 40%}
.page-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.42) 38%,rgba(0,0,0,.08) 72%),linear-gradient(0deg,rgba(0,0,0,.35),transparent 45%)}
.page-hero > :not(.page-hero-media){max-width:min(760px,100%);position:relative}
.page-hero h1,.page-hero .detail-lead,.page-hero .article-answer,.page-hero p,.page-hero .eyebrow,.page-hero .article-author,.page-hero .breadcrumbs,.page-hero .breadcrumbs a,.page-hero .detail-meta,.page-hero .course-facts{color:#fff!important}
.page-hero .eyebrow{opacity:.85}
.page-hero h1{font-size:clamp(2.8rem,6vw,6.2rem)!important}
.page-hero h1 .accent{background:linear-gradient(100deg,#fff 0%,#fff 40%,#ffe3d6 50%,#fff 60%,#fff 100%)!important;background-size:250% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
.page-hero .text-link{border-color:#fff!important;color:#fff!important;order:-1;margin-bottom:auto}
.page-hero .text-link:hover{background:#fff!important;color:var(--signal)!important}
.page-hero .article-answer{background:rgba(24,18,15,.28)!important}
.page-hero .detail-meta,.page-hero .course-facts{display:flex;flex-wrap:wrap;gap:10px 22px;opacity:.85}
/* Contact page: the photo replaces the orange field */
.contact.page-hero{animation:none!important}
.contact.page-hero .contact-bottom{position:static!important;margin-top:40px;color:#fff}
@media (max-width:820px){.page-hero-media::after{background:linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 55%,rgba(0,0,0,.1) 100%)}}
.article-header.page-hero h1{font-size:clamp(2.4rem,4.4vw,4.4rem)!important}
.contact.page-hero{margin-top:0!important;align-items:stretch}
.contact.page-hero > .contact-inner{max-width:none!important;width:auto!important;margin-inline:var(--gutter)!important;padding:0!important;justify-content:flex-end}
.contact.page-hero .story-copy{max-width:760px}
.page-hero-media img[src*="kenny-portrait"]{object-position:50% 25%;transform-origin:50% 25%;translate:18% 0;scale:1.25}
.contact.page-hero h1,.contact.page-hero .story-copy>p,.contact.page-hero .meeting-agenda,.contact.page-hero .meeting-note{max-width:min(720px,58vw)}
.contact.page-hero .button{background:var(--signal)!important;color:#fff!important}
/* Glass step cards no longer depend on the removed step labels */
.detail-content > section,.detail-content > article{background:rgba(255,255,255,.45);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 0 0 1px rgba(255,255,255,.35),0 16px 40px -24px rgba(60,30,20,.2);border-radius:20px;padding:clamp(24px,3vw,40px)!important}
.detail-content > section :is(.story-copy,.delivery-details,.meeting-note,.article-answer){background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;padding:0!important}
.detail-content{display:grid;gap:20px}
.detail-main{padding-block:clamp(96px,10vw,160px)!important}

/* Subpage project scene: mirrors the homepage work stage */
.scene-solo{min-height:100svh!important;display:flex!important;align-items:center;background:#111!important;overflow:hidden}
.scene-solo .scene-wash{display:none}
.scene-solo .scene-content{padding-inline:clamp(24px,5vw,80px)!important;width:100%;max-width:none!important;margin:0!important}
.scene-solo .scene-copy{margin:0!important;width:min(56%,760px)!important;border-radius:22px}
.scene-solo .scene-media{opacity:.0;transform:scale(1.08);transition:opacity 1.1s ease,transform 1.8s cubic-bezier(.16,1,.3,1)}
.scene-solo.is-active .scene-media{opacity:1;transform:scale(1)}
.scene-solo .scene-copy{opacity:0;transform:translateY(40px) scale(.98);transition:opacity .7s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.scene-solo.is-active .scene-copy{opacity:1;transform:none;transition-delay:.7s}
.scene-solo .scene-copy>*{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.scene-solo.is-active .scene-copy>h2{opacity:1;transform:none;transition-delay:1.3s}
.scene-solo.is-active .scene-copy>p{opacity:1;transform:none;transition-delay:1.75s}
.scene-solo.is-active .scene-copy>a{opacity:1;transform:none;transition-delay:2.2s}
@media (max-width:820px){.scene-solo .scene-copy{width:100%!important}.scene-solo .scene-content{padding-inline:16px!important}}
@media (prefers-reduced-motion:reduce){.scene-solo .scene-media,.scene-solo .scene-copy,.scene-solo .scene-copy>*{opacity:1!important;transform:none!important;transition:none!important}}
.scene-pin{position:relative;height:240vh}
.scene-pin > .scene-solo{position:sticky!important;top:0;height:100vh!important;min-height:0!important}
/* Exit: copy leaves first (reverse order), the photo fades last */
.scene-solo:not(.is-active) .scene-copy>a{transition-delay:0s}
.scene-solo:not(.is-active) .scene-copy>p{transition-delay:.1s}
.scene-solo:not(.is-active) .scene-copy>h2{transition-delay:.2s}
.scene-solo:not(.is-active) .scene-copy{transition-delay:.35s}
.scene-solo:not(.is-active) .scene-media{transition-delay:.6s}

/* ---------- Step cards as a scroll carousel ---------- */
.detail-main.is-carousel{display:block!important;height:calc(var(--steps) * 75vh + 100vh);padding-block:0!important}
.steps-stage{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,120px);align-items:center;padding-top:var(--header-height)}
.steps-stage .detail-heading{position:static!important;align-self:center}
.is-carousel .detail-content{position:relative;display:block!important;overflow:visible}
.is-carousel .detail-content > *{position:absolute!important;inset:0 0 auto 0;margin:0!important;
  transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .7s ease,filter .7s ease}
.is-carousel .detail-content > .is-current{transform:none;opacity:1;filter:none;z-index:2}
.is-carousel .detail-content > .is-after{transform:translateX(18%) scale(.92) rotate(2deg);opacity:.0;filter:blur(4px);pointer-events:none}
.is-carousel .detail-content > .is-after:is(.is-after + .is-after){opacity:0}
.is-carousel .detail-content > .is-current + .is-after{opacity:.35}
.is-carousel .detail-content > .is-before{transform:translateX(-30%) scale(.9);opacity:0;filter:blur(6px);pointer-events:none}
.is-carousel .detail-content [data-reveal]{opacity:1!important;transform:none!important;--reveal-alpha:1!important;--reveal-y:0px!important}
.steps-dots{display:flex;gap:10px;margin-top:24px;grid-column:2}
.steps-dots span{width:8px;height:8px;border-radius:999px;background:rgba(23,23,23,.18);transition:all .4s}
.steps-dots span.is-on{width:28px;background:#ee4428;box-shadow:0 0 12px rgba(238,68,40,.5)}
@media (max-width:900px){.steps-stage{grid-template-columns:1fr;align-content:center;gap:24px}.steps-dots{grid-column:1}}
@media (prefers-reduced-motion:reduce){.is-carousel .detail-content > *{transition:none}}
.detail-content > section,.detail-content > article{min-height:0!important;height:auto!important;display:block!important}
/* Carousel cards centred in their column */
.is-carousel .detail-content > *{inset:auto 0 auto 0!important;top:50%!important;translate:0 -50%}
.steps-stage{padding-top:calc(var(--header-height) * .6)!important}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero .hero-call{border-color:#fff!important;color:#fff!important;background:rgba(255,255,255,.08)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hero .hero-call:hover{background:#fff!important;color:var(--signal)!important}
/* Phone icon rings on hover instead of tilting like the arrows */
.hero-call .icon{transform:none!important;transform-origin:50% 60%}
.hero-call:hover .icon{animation:phone-ring .9s ease-in-out infinite}
@keyframes phone-ring{0%,50%,100%{rotate:0deg}5%,15%,25%,35%{rotate:-16deg}10%,20%,30%,40%{rotate:16deg}}
@media (prefers-reduced-motion:reduce){.hero-call:hover .icon{animation:none}}
/* Hero buttons: icon leads; calendar icon stays upright on hover */
.hero-actions .button,.hero-actions .hero-call{gap:12px!important}
.hero-actions .button .icon{transform:none!important}
.hero-actions .button:hover .icon{animation:cal-bump .5s cubic-bezier(.16,1,.3,1)}
@keyframes cal-bump{40%{transform:translateY(-3px) scale(1.12)}}
/* Peek: front card leans away from the pointer, the back card slides out toward it */
.routes.is-deck .route-cards{--peek:0}
.routes.is-deck .image-card.is-front:not(.is-dragging){transform:translateX(calc(var(--peek) * -28px)) rotate(calc(var(--peek) * -1.6deg))!important;transition:transform .25s ease-out,opacity .6s,filter .6s!important}
.routes.is-deck .image-card.is-back,.routes.is-deck .image-card.is-back:hover{transform:translate(calc(4% + var(--peek) * 9%),-5%) rotate(calc(2.5deg + var(--peek) * 4deg)) scale(.94)!important;opacity:calc(.55 + (var(--peek) * var(--peek)) * .35);transition:transform .25s ease-out,opacity .3s,filter .6s!important}

/* ---------- One button behaviour everywhere ----------
   magnetic pull, a 2px lift, fill swap, and the icon nudges forward. */
:is(.button,.text-link,.card-link,.header-cta,.back-top,#main-nav a[href="/contact/"],.deck-switch button){
  transition:transform .35s cubic-bezier(.16,1,.3,1),background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .35s ease!important}
:is(.button,.text-link,.card-link,.header-cta,.back-top,#main-nav a[href="/contact/"],.deck-switch button).is-magnetic{transform:translate(var(--mx,0px),calc(var(--my,0px) - var(--lift,0px)))!important}
:is(.button,.text-link,.card-link,.header-cta,.back-top,#main-nav a[href="/contact/"],.deck-switch button):hover{--lift:2px}
:is(.button,.text-link,.card-link,.header-cta,.back-top,#main-nav a[href="/contact/"],.deck-switch button):active{--lift:-1px;transition-duration:.1s!important}
/* Icons: all nudge the same way, no spinning */
:is(.button,.text-link,.card-link,.header-cta,.back-top) .icon{transition:transform .35s cubic-bezier(.16,1,.3,1)!important;animation:none}
:is(.button,.text-link,.card-link,.header-cta) :is(:hover,:focus-visible) .icon,
:is(.button,.text-link,.card-link,.header-cta):is(:hover,:focus-visible) .icon,
.image-card:hover .card-link .icon,.offer-tile:hover .card-link .icon{transform:translate(3px,-3px)!important;rotate:0deg}
.back-top:hover .icon{transform:translateY(-3px)!important}
/* the phone keeps its ring as the one exception */
.hero-call:hover .icon{transform:none!important;animation:phone-ring .9s ease-in-out infinite!important}
.hero-actions .button:hover .icon{animation:none!important}
.deck-switch button:hover{transform:translateY(-2px)!important}
.deck-switch button:active{transform:translateY(1px)!important}
/* Carousel moves vertically: past cards rise away, the next waits below */
.is-carousel .detail-content > .is-after{transform:translateY(22%) scale(.94)!important;rotate:0deg}
.is-carousel .detail-content > .is-before{transform:translateY(-28%) scale(.92)!important}
.is-carousel .detail-content > .is-current{transform:none!important}
.steps-dots{flex-direction:row}
/* Step card titles: a little smaller, the key line bold like other headlines */
.detail-content h3{font-size:clamp(1.8rem,2.7vw,2.9rem)!important;line-height:1.08!important;margin-bottom:20px}
/* Carousel progress: vertical, on the right edge, matching the vertical motion */
.steps-stage{position:sticky}
.steps-dots{position:absolute!important;right:clamp(-40px,-2.5vw,-16px);top:50%;transform:translateY(-50%);flex-direction:column!important;gap:10px;margin:0!important;width:auto!important;height:auto!important;z-index:3}
.steps-dots span.is-on{width:8px!important;height:28px}
@media (max-width:900px){.steps-dots{right:4px}}
/* No black stage: the photo fades in from the page background */
.scene-solo{background:transparent!important}
.work-stage{background:var(--paper)!important}
/* FAQ: plus/minus sits inside the card with breathing room */
.faq details{padding:4px 32px!important}
.faq summary{position:relative!important;padding-right:48px!important}
.faq summary::before,.faq summary::after{right:0!important}
/* Leading icons (calendar, mail, phone) stay put and nudge up a touch on hover */
:is(.button,.text-link):has(> .icon:first-child){gap:12px!important}
:is(.button,.text-link):is(:hover,:focus-visible) > .icon:first-child{transform:translateY(-2px)!important}
/* Leading icons (calendar, mail, phone) stay put and nudge up a touch on hover */
:is(.button,.text-link):has(> .icon:first-child){gap:12px!important}
:is(.button,.text-link):is(:hover,:focus-visible) > .icon:first-child{transform:translateY(-2px)!important}
.site-footer .footer-giant{margin-top:clamp(64px,8vw,120px)!important}
/* "What's included" shown directly as a list */
.delivery-list{list-style:none;padding:0;margin:18px 0 22px;display:grid;gap:10px}
.delivery-list li{position:relative;padding-left:30px;line-height:1.55}
.delivery-list li::before{content:"check";font-family:"Material Symbols Rounded";position:absolute;left:0;top:1px;font-size:20px;line-height:1;color:var(--signal)}
/* List matches the card body text */
.delivery-list li{font-size:inherit;line-height:1.7}
.delivery-list{font-size:clamp(1.0625rem,1.5vw,1.366rem)}
.delivery-list li::before{top:.3em;font-size:1.1em}
.detail-content .delivery-list li{font-size:var(--copy-size,1.366rem)!important;line-height:1.7!important}
/* The last section sits under the footer as it slides up */
.is-underlay{position:relative;z-index:0;transform-origin:50% 100%;will-change:transform,filter}
.site-footer{position:relative;z-index:3;box-shadow:0 -30px 60px -30px rgba(0,0,0,.45)}
/* Room at the bottom of the last section, so the sliding footer only covers empty space */
.is-underlay{padding-bottom:calc(min(160px,18vh) + 48px)!important}
.contact.is-underlay .contact-inner{padding-bottom:0!important}
.is-underlay{padding-bottom:calc(min(160px,18vh) + 120px)!important}
/* Scene buttons: the magnetic transform overrode their entrance, so they enter with opacity + translate instead, last */
:is(.scene-solo,#werk.is-pinned .scene) .scene-copy>a{opacity:0!important;translate:0 28px;
  transition:opacity .6s ease 0s,translate .8s cubic-bezier(.16,1,.3,1) 0s,background-color .25s,color .25s,border-color .25s,transform .35s cubic-bezier(.16,1,.3,1)!important}
:is(.scene-solo,#werk.is-pinned .scene).is-active .scene-copy>a{opacity:1!important;translate:0 0;
  transition:opacity .6s ease 2.3s,translate .8s cubic-bezier(.16,1,.3,1) 2.3s,background-color .25s,color .25s,border-color .25s,transform .35s cubic-bezier(.16,1,.3,1)!important}
@media (prefers-reduced-motion:reduce){:is(.scene-solo,#werk.is-pinned .scene) .scene-copy>a{opacity:1!important;translate:none;transition:none!important}}
.wordmark-type.is-done::after{animation:caret 1s steps(1) infinite!important}
/* Hero titles: room for the first line to stay whole */
.page-hero > h1{max-width:min(1040px,100%)!important}
.page-hero > h1,.hero h1{text-wrap:wrap!important}
/* Call button in every hero */
.page-hero .hero-actions{margin-top:28px}
.page-hero .hero-actions .button{margin:0!important}
:is(.hero,.page-hero) .hero-call{border-color:#fff!important;color:#fff!important;background:rgba(255,255,255,.08)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
:is(.hero,.page-hero) .hero-call:hover{background:#fff!important;color:var(--signal)!important}
/* Hero titles keep their authored line break: the bold part starts a new line */
:is(.page-hero,.hero) h1 br{display:inline!important}
:is(.page-hero,.hero) h1 .accent::before{content:none!important}
/* "Bellen is sneller" = the standard secondary button (outline, transparent), white on photos */
:is(.hero,.page-hero) .hero-call{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.hero-call:not(:is(.hero,.page-hero) *){border-color:var(--signal)!important;color:var(--signal)!important}
/* The call button always sits on the right, after the other buttons */
.contact-actions .hero-actions{display:contents}
.hero-call{order:99}
.contact-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-call{order:99!important}
/* Course USPs: icons, no underlines */
.course-facts{gap:12px 28px!important}
.course-facts span{display:inline-flex;align-items:center;gap:10px;border:0!important;padding:0!important;box-shadow:none!important;background:none!important}
.course-facts span::after,.course-facts span::before{display:none!important}
.course-facts .icon{font-size:22px;color:var(--signal);flex:none}
.page-hero .course-facts{opacity:1!important}
/* Contact block butts straight onto a full-screen project stage */
:is(#werk,.scene-pin) + #contact{margin-top:0!important}
/* While the stage scrolls into view, the first photo is already there (no empty beige band) */
#werk.is-pinned .work-stage:not(:has(.scene.is-active)) .scene:first-of-type .scene-media{opacity:1!important;transform:scale(1.08)}

/* Work stage: backgrounds hold still and crossfade; the text cards scroll through like page content */
#werk.is-pinned .scene-media,#werk.is-pinned .scene.is-active .scene-media{transform:none!important;transition:opacity 1.1s ease!important}
#werk.is-pinned .work-stage:not(:has(.scene.is-active)) .scene:first-of-type .scene-media{transform:none!important}
#werk.is-pinned .scene .scene-copy{opacity:1!important;transform:translateY(75vh)!important;transition:transform 1.1s cubic-bezier(.65,0,.35,1)!important;transition-delay:0s!important}
#werk.is-pinned .scene.is-past .scene-copy{transform:translateY(-110vh)!important}
#werk.is-pinned .scene.is-active .scene-copy{transform:none!important;transition-delay:.15s!important}
/* inside the card everything is simply visible; the card itself does the moving */
#werk.is-pinned .scene .scene-copy>*{opacity:1!important;transform:none!important;translate:none!important;transition:none!important}
#werk.is-pinned .scene:not(.is-active) .scene-copy{pointer-events:none}
@media (prefers-reduced-motion:reduce){#werk.is-pinned .scene .scene-copy{transition:none!important}}
/* Crossfade without passing through beige: earlier photos stay underneath */
#werk.is-pinned .scene.is-past .scene-media{opacity:1!important}
#werk.is-pinned .scene.is-past{z-index:1}
#werk.is-pinned .scene.is-active{z-index:2}
/* The old per-image scroll fade must not hide the stage photos */
#werk .parallax-image,.scene-solo .parallax-image{opacity:1!important}

/* Hero as the first scene of the work stage */
#werk .hero-scene .scene-copy.hero-copy{background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;padding:0!important;width:min(62%,900px)!important;color:#fff}
#werk .hero-scene .scene-content{align-self:flex-end;padding-bottom:clamp(56px,8vw,112px)!important}
#werk .hero-scene .scene-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,.35) 40%,rgba(0,0,0,.05) 75%),linear-gradient(0deg,rgba(0,0,0,.35),transparent 45%)}
#werk .hero-scene .scene-media img{width:100%;height:100%;object-fit:cover}
#werk .hero-scene h1{color:#fff!important;font-size:clamp(2.8rem,6vw,6.2rem)!important;text-wrap:wrap!important}
#werk .hero-scene h1 br{display:inline!important}
#werk .hero-scene h1 .accent::before{content:none!important}
#werk .hero-scene h1 .accent{background:linear-gradient(100deg,#fff 0%,#fff 40%,#ffe3d6 50%,#fff 60%,#fff 100%)!important;background-size:250% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
#werk .hero-scene .detail-lead{color:#fff!important;max-width:60ch}
#werk .hero-scene .hero-actions{margin-top:28px}
#werk .hero-scene .hero-call{border-color:#fff!important;color:#fff!important;background:transparent!important}
.has-stage-hero .header{}
#werk.is-pinned .scene .scene-copy>a{opacity:1!important;translate:0 0!important}
/* Work stage is driven by scroll position directly (inline styles from ai-motion.js) */
#werk.is-pinned .scene .scene-copy{transition:none!important;transform:none;will-change:transform,opacity}
#werk.is-pinned .scene .scene-media{transition:none!important}
#werk.is-pinned .scene{z-index:auto}
#werk.is-pinned .scene:first-child .scene-media{opacity:1!important}
#werk.is-pinned .scene .scene-copy,#werk.is-pinned .scene.is-past .scene-copy,#werk.is-pinned .scene.is-active .scene-copy{transform:translateY(var(--card-y,0))!important;opacity:var(--card-o,1)!important}
#werk.is-pinned .scene .scene-media,#werk.is-pinned .scene.is-past .scene-media,#werk.is-pinned .scene.is-active .scene-media,#werk.is-pinned .work-stage:not(:has(.scene.is-active)) .scene:first-of-type .scene-media{opacity:var(--media-o,0)!important;transform:none!important}
/* Subpage turn video: same framing as the homepage */
.page-hero-media video.page-turn{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;transform:scale(1.3) translateX(10%)!important;transform-origin:50% 25%}
@media (max-width:820px){.page-hero-media video.page-turn{transform:none!important;object-position:50% 20%}}
/* Section titles beside the step cards keep their authored lines */
.detail-heading h2 br{display:inline!important}
.detail-heading h2 .accent::before{content:none!important}
.detail-heading h2{text-wrap:wrap!important}
/* FAQ: answers in the body copy size; questions one step up so they still read as questions */
.faq details p{font-size:var(--copy-size)!important;line-height:1.7!important}
.faq summary{font-size:var(--copy-size)!important;line-height:1.4!important}
.faq summary::before,.faq summary::after{top:50%!important;margin-top:-1px}
/* Homepage hero copy sits at the same height as the subpage heroes */
.hero .hero-inner{align-items:flex-end!important;padding-bottom:clamp(56px,8vw,112px)!important}
.hero .hero-story{align-self:flex-end!important;padding:0!important}
.hero h1{font-size:clamp(2.8rem,6vw,6.2rem)!important}
/* FAQ: the title stays centred in view while the questions scroll past */
.faq{align-items:start!important}
.faq-heading{position:sticky!important;top:calc(50vh - 120px);align-self:start!important;height:auto!important}
.faq-heading h2{opacity:1!important;--reveal-alpha:1!important;--reveal-y:0px!important}
@media (max-width:820px){.faq-heading{position:static!important}}
/* Contact page hero behaves like the homepage hero */
.contact.page-hero{min-height:100svh!important;display:flex!important;align-items:flex-end!important}
.contact.page-hero > .contact-inner{justify-content:flex-end!important;padding-bottom:clamp(56px,8vw,112px)!important}
.contact.page-hero [data-reveal],.contact.page-hero .flow-part{opacity:1!important;--reveal-alpha:1!important;--reveal-y:0px!important;filter:none!important}
.contact.page-hero h1{color:#fff!important}
.contact.page-hero h1 .accent{background:linear-gradient(100deg,#fff 0%,#fff 40%,#ffe3d6 50%,#fff 60%,#fff 100%)!important;background-size:250% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
.contact.page-hero .meeting-agenda{display:none}
/* Primary first, then mail, then call */
.contact-actions .button{order:0!important}
.contact-actions .text-link:not(.hero-call){order:1!important}
/* Contact page: the hero video runs up under the floating menu, no beige band */
main.contact-page{padding-top:0!important}

/* ---------- Contact form ---------- */
.contact-form-section{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,120px);align-items:start;padding-block:clamp(96px,10vw,160px)!important}
.form-intro{position:sticky;top:120px}
.form-intro > p{font-size:var(--copy-size);line-height:1.7;margin:24px 0 32px;max-width:40ch}
.form-steps{list-style:none;padding:0;margin:0 0 32px;display:grid;gap:16px;counter-reset:s}
.form-steps li{font-size:1.0625rem;line-height:1.6;padding-left:0}
.form-direct{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.form-direct a{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:600}
.form-direct .icon{color:var(--signal)}
.contact-form{display:grid;gap:22px;padding:clamp(28px,4vw,48px);border-radius:24px;
  background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.5),0 40px 80px -40px rgba(60,30,20,.28)}
.form-topic{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.form-topic legend{font-weight:600;margin-bottom:12px;font-size:1rem}
.form-topic label{cursor:pointer}
.form-topic input{position:absolute;opacity:0;pointer-events:none}
.form-topic span{display:inline-flex;padding:10px 18px;border-radius:999px;border:1.5px solid rgba(23,23,23,.15);font-weight:500;transition:all .2s}
.form-topic input:checked + span{background:var(--signal);border-color:var(--signal);color:#fff}
.form-topic input:focus-visible + span{outline:3px solid var(--signal);outline-offset:2px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:8px}
.field > span{font-weight:600;font-size:.95rem}
.field em{font-style:normal;font-weight:400;color:var(--muted)}
.field input,.field textarea{font:inherit;font-size:1.0625rem;padding:16px 18px;border-radius:14px;border:1.5px solid rgba(23,23,23,.12);background:rgba(255,255,255,.7);color:var(--ink);transition:border-color .2s,box-shadow .2s;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 4px rgba(238,68,40,.15)}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.form-actions .button{gap:12px!important}
.form-hint{margin:0;font-size:.9rem;color:var(--muted)}
.form-error{margin:0;color:#c0301b;font-weight:600}
@media (max-width:900px){.contact-form-section{grid-template-columns:1fr}.form-intro{position:static}.form-row{grid-template-columns:1fr}}
.field .is-missing{border-color:#e0442b!important;box-shadow:0 0 0 4px rgba(238,68,40,.15)!important}

/* ---------- Contact: pinned hero, form appears over the video ---------- */
.contact-pin{position:relative;height:260vh}
.contact-pin > .contact.page-hero{position:sticky!important;top:0;height:100vh!important;min-height:0!important;overflow:hidden}
.contact.page-hero .page-hero-media::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(12,9,8,var(--dim,.25));pointer-events:none}
.hero-form-layer{position:absolute!important;inset:0;z-index:3;display:grid!important;align-content:center;margin:0 auto!important;
  padding:calc(var(--header-height) + 24px) var(--gutter) 32px!important;max-width:1440px;opacity:0;will-change:opacity,transform}
.hero-form-layer .form-intro{position:static;color:#fff;align-self:center}
.hero-form-layer .form-intro h2{color:#fff!important}
.hero-form-layer .form-intro h2 .accent{background:linear-gradient(100deg,#fff 0%,#fff 40%,#ffe3d6 50%,#fff 60%,#fff 100%)!important;background-size:250% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
.hero-form-layer .form-intro p,.hero-form-layer .form-steps li,.hero-form-layer .form-direct a{color:#fff!important}
.hero-form-layer .form-steps li{opacity:.9}
.hero-form-layer .contact-form{gap:16px;padding:clamp(24px,3vw,36px);max-height:calc(100vh - var(--header-height) - 56px);overflow:auto}
.hero-form-layer .field textarea{min-height:110px}
.hero-form-layer [data-reveal]{opacity:1!important;--reveal-alpha:1!important;--reveal-y:0px!important}
.hero-form-layer{width:auto!important;max-width:none!important;left:0;right:0;grid-template-columns:minmax(0,5fr) minmax(0,7fr)!important;gap:clamp(32px,5vw,96px)!important;padding-inline:var(--gutter)!important}
.hero-form-layer .contact-form{overflow-x:hidden}
.hero-form-layer .form-intro h2{font-size:clamp(2.4rem,4.6vw,4.6rem)!important}
/* Only the form over the video */
.hero-form-layer .form-intro{display:none!important}
.hero-form-layer{grid-template-columns:minmax(0,760px)!important;justify-content:center!important}
.contact.page-hero{flex-direction:column!important;justify-content:flex-end!important}
.contact.page-hero > .contact-inner{margin-top:auto!important;margin-bottom:0!important;align-self:stretch}
.contact.page-hero > .contact-inner{padding-bottom:0!important}
/* Contact form over the video: on the left (Kenny stays visible) and clearly readable */
.hero-form-layer{justify-content:start!important;grid-template-columns:minmax(0,min(640px,52vw))!important}
.hero-form-layer .contact-form{background:rgba(250,246,241,.92)!important;color:var(--ink)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.4)!important;backdrop-filter:blur(20px) saturate(1.4)!important;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.9)!important}
.hero-form-layer .contact-form legend,.hero-form-layer .field > span{color:var(--ink)!important}
.hero-form-layer .field em{color:var(--muted)!important}
.hero-form-layer .field input,.hero-form-layer .field textarea{background:#fff!important;color:var(--ink)!important;border-color:rgba(23,23,23,.14)!important}
.hero-form-layer .form-topic span{color:var(--ink);border-color:rgba(23,23,23,.18);background:#fff}
.hero-form-layer .form-topic input:checked + span{color:#fff;background:var(--signal);border-color:var(--signal)}
.hero-form-layer .form-row{gap:14px}
@media (max-width:900px){.hero-form-layer{grid-template-columns:1fr!important}}
/* Contact form: the same tinted glass as the homepage cards */
.hero-form-layer .contact-form{background:rgba(24,18,15,.34)!important;color:#fff!important;
  -webkit-backdrop-filter:blur(24px) saturate(1.8)!important;backdrop-filter:blur(24px) saturate(1.8)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,255,255,.3),0 20px 40px -20px rgba(0,0,0,.35)!important}
.hero-form-layer .contact-form legend,.hero-form-layer .field > span{color:#fff!important}
.hero-form-layer .field em{color:rgba(255,255,255,.7)!important}
.hero-form-layer .field input,.hero-form-layer .field textarea{background:rgba(255,255,255,.12)!important;color:#fff!important;border-color:rgba(255,255,255,.35)!important}
.hero-form-layer .field input:focus,.hero-form-layer .field textarea:focus{border-color:#fff!important;box-shadow:0 0 0 4px rgba(255,255,255,.18)!important;background:rgba(255,255,255,.18)!important}
.hero-form-layer .form-topic span{color:#fff;background:transparent;border-color:rgba(255,255,255,.45)}
.hero-form-layer .form-topic input:checked + span{color:#fff;background:var(--signal);border-color:var(--signal)}
/* Contact form: the light frosted glass of the work cards */
.hero-form-layer .contact-form{background:rgba(255,255,255,.6)!important;color:var(--ink)!important;border-radius:20px!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.6)!important;backdrop-filter:blur(22px) saturate(1.6)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 0 0 1px rgba(255,255,255,.35),0 10px 30px -18px rgba(23,23,23,.06)!important}
.hero-form-layer .contact-form legend,.hero-form-layer .field > span{color:var(--ink)!important}
.hero-form-layer .field em{color:var(--muted)!important}
.hero-form-layer .field input,.hero-form-layer .field textarea{background:rgba(255,255,255,.55)!important;color:var(--ink)!important;border-color:rgba(23,23,23,.12)!important}
.hero-form-layer .field input:focus,.hero-form-layer .field textarea:focus{border-color:var(--signal)!important;box-shadow:0 0 0 4px rgba(238,68,40,.15)!important;background:rgba(255,255,255,.8)!important}
.hero-form-layer .form-topic span{color:var(--ink);background:rgba(255,255,255,.5);border-color:rgba(23,23,23,.15)}
.hero-form-layer .form-topic input:checked + span{color:#fff;background:var(--signal);border-color:var(--signal)}
/* Video stays at full brightness behind the form */
.contact.page-hero .page-hero-media::before{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nav-toggle{display:inline-grid;place-items:center;padding:8px!important}
.nav-toggle .icon{font-size:28px;line-height:1}
.nav-toggle[aria-expanded="true"] .icon{font-size:0}
.nav-toggle[aria-expanded="true"] .icon::before{content:"close";font-size:28px}
.nav-toggle[aria-expanded="true"] .icon{font-size:28px!important}
.nav-toggle[aria-expanded="true"] .icon::before{content:none!important}
/* Mobile menu: full-screen glass */
@media (max-width:1200px){
  #main-nav{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;margin:0!important;border-radius:0!important;
    padding:calc(var(--header-height) + 48px) 28px 40px!important;justify-content:center!important;gap:6px;z-index:-1;
    background:rgba(247,242,236,.55)!important;-webkit-backdrop-filter:blur(28px) saturate(1.6)!important;backdrop-filter:blur(28px) saturate(1.6)!important}
  #main-nav a{border:0!important;font-family:"Playfair Display",Georgia,serif;font-size:clamp(2rem,9vw,2.8rem)!important;line-height:1.15;padding:8px 0!important;color:var(--ink)!important}
  #main-nav a[aria-current="page"]{font-style:italic;font-weight:800;color:var(--signal)!important}
  #main-nav a[href="/contact/"]{font-family:var(--font);font-size:1.125rem!important;margin:28px 0 0!important;align-self:flex-start;padding:18px 32px!important;color:#fff!important}
  .header:has(.nav-toggle[aria-expanded="true"]){background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .header:has(.nav-toggle[aria-expanded="true"]) .wordmark,.header:has(.nav-toggle[aria-expanded="true"]) .nav-toggle{color:var(--ink)!important}
}
@media (max-width:1200px){
  .header:has(.nav-toggle[aria-expanded="true"]){z-index:9000!important;transform:none!important;left:0!important;top:0!important;width:100%!important;border-radius:0!important;overflow:visible!important}
  .header:has(.nav-toggle[aria-expanded="true"]) .header-inner{padding-top:10px}
  #main-nav{z-index:-1!important}
  #main-nav a[aria-current="page"][href="/contact/"]{font-style:normal;color:#fff!important}
}
@media (max-width:1200px){#main-nav{height:100vh!important;min-height:100vh!important;max-height:none!important;bottom:auto!important}}
/* Mobile: the floating bar itself grows into the full-screen glass menu */
@media (max-width:1200px){
  .header{transition:height .55s cubic-bezier(.16,1,.3,1),border-radius .55s cubic-bezier(.16,1,.3,1),background-color .4s!important}
  .header:has(.nav-toggle[aria-expanded="true"]){
    top:10px!important;left:50%!important;transform:translateX(-50%)!important;width:calc(100% - 20px)!important;
    height:calc(100dvh - 20px)!important;border-radius:28px!important;overflow:hidden!important;
    background:rgba(247,242,236,.62)!important;-webkit-backdrop-filter:blur(28px) saturate(1.6)!important;backdrop-filter:blur(28px) saturate(1.6)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 0 0 1px rgba(255,255,255,.35),0 30px 60px -30px rgba(0,0,0,.4)!important}
  #main-nav{position:absolute!important;inset:56px 0 0 0!important;width:auto!important;height:auto!important;min-height:0!important;
    background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:24px 28px 32px!important;z-index:1!important}
}
/* Hide the native scrollbar so it never takes width from the layout (scrolling still works) */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
.page-hero-media{left:0!important;width:100%!important}

/* Burger that morphs into a close cross */
.nav-toggle .burger{position:relative;display:block;width:24px;height:16px}
.nav-toggle .burger i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;
  transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .25s ease,top .45s cubic-bezier(.16,1,.3,1)}
.nav-toggle .burger i:nth-child(1){top:0}
.nav-toggle .burger i:nth-child(2){top:7px}
.nav-toggle .burger i:nth-child(3){top:14px}
.nav-toggle[aria-expanded="true"] .burger i:nth-child(1){top:7px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .burger i:nth-child(2){opacity:0;transform:scaleX(.2)}
.nav-toggle[aria-expanded="true"] .burger i:nth-child(3){top:7px;transform:rotate(-45deg)}

/* Bar morphs smoothly into the full-screen glass menu */
@media (max-width:1200px){
  .header{top:10px!important;left:50%!important;transform:translateX(-50%)!important;width:calc(100% - 20px)!important;height:56px!important;overflow:hidden!important;border-radius:22px!important;
    transition:height .6s cubic-bezier(.76,0,.24,1),border-radius .6s cubic-bezier(.76,0,.24,1),background-color .4s ease,box-shadow .4s ease!important}
  .header .header-inner{height:56px!important}
  .header:has(.nav-toggle[aria-expanded="true"]){height:calc(100dvh - 20px)!important;border-radius:28px!important}
  #main-nav{display:flex!important;visibility:hidden;pointer-events:none;opacity:1!important;transform:none!important}
  .header:has(.nav-toggle[aria-expanded="true"]) #main-nav{visibility:visible;pointer-events:auto}
  #main-nav a{opacity:0;transform:translateY(18px);transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1)}
  .header:has(.nav-toggle[aria-expanded="true"]) #main-nav a{opacity:1;transform:none;transition-delay:calc(.25s + var(--menu-order,0) * .05s)}
}
@media (prefers-reduced-motion:reduce){.header,#main-nav a,.nav-toggle .burger i{transition:none!important}}
/* No temporary scrollbar while the menu grows */
@media (max-width:1200px){#main-nav,.header,.header .header-inner{overflow:hidden!important;scrollbar-width:none}#main-nav::-webkit-scrollbar{display:none}}
@media (max-width:1200px){.header .header-inner{height:56px!important;min-height:0!important;padding-block:0!important;box-sizing:border-box;align-items:center!important}}
/* Mobile: hero copy sits at the bottom of the screen */
@media (max-width:820px){.hero .hero-story{justify-content:flex-end!important;height:auto!important;align-self:flex-end!important;padding-bottom:40px!important}.hero .hero-inner{align-items:flex-end!important;padding-bottom:0!important}}
/* No tap ripple or filled focus box on the menu icon */
.nav-toggle .tap-wave{display:none!important}
.nav-toggle,.nav-toggle:focus,.nav-toggle:active{background:none!important;box-shadow:none!important;outline:none}
.nav-toggle:focus-visible{outline:2px solid currentColor!important;outline-offset:4px;border-radius:10px}
/* Menu icon only on small screens */
.nav-toggle{border:0!important}
@media (min-width:1201px){.nav-toggle{display:none!important}}
/* Subpage hero spans the full width; copy keeps the page gutter */
.page-hero{margin-inline:0!important;width:auto!important;max-width:none!important;padding-inline:var(--gutter)!important}
.page-hero-media{left:0!important;right:0!important;width:auto!important}
/* Hero copy bottom-aligned at every width */
section.hero .hero-inner .hero-story{justify-content:flex-end!important;align-self:flex-end!important;height:auto!important;padding-bottom:clamp(40px,8vw,112px)!important}
section.hero .hero-inner{align-items:flex-end!important;padding-bottom:0!important}
/* Full-width buttons on small phones: icon and label centred together */
@media (max-width:480px){.button,.text-link,.card-link,.hero-call{justify-content:center!important;gap:12px!important}}
/* Compact bar: smaller logo */
@media (max-width:1200px){.header .wordmark{font-size:1.25rem!important}.header .logo-mark{width:26px!important;height:26px!important}.header .wordmark .logo-mark{margin-right:.3em}}
/* Buttons always hug their content, at every width */
.button,.text-link,.card-link,.hero-call,.header-cta{width:auto!important;max-width:100%;align-self:flex-start;justify-content:flex-start!important}
.hero-actions,.contact-actions{align-items:flex-start}
/* Lower deck cards on small screens */
@media (max-width:900px){.routes.is-deck .image-card{height:clamp(380px,58vh,480px)!important}}
.label-short{display:none}
@media (max-width:600px){.label-long{display:none}.label-short{display:inline}}
/* Stage photos always fill the full screen, also on mobile */
#werk.is-pinned .scene-media,.scene-solo .scene-media{position:absolute!important;inset:0!important;height:auto!important;width:auto!important}
#werk.is-pinned .scene-media img,.scene-solo .scene-media img{width:100%!important;height:100%!important;object-fit:cover!important}
#werk.is-pinned .scene{display:flex!important;align-items:center}
/* Mobile layout gave the copy area a solid background that hid the photo */
#werk.is-pinned .scene,#werk.is-pinned .scene-content,.scene-solo .scene-content{background:transparent!important}
#werk.is-pinned .scene-content{position:relative;z-index:2}

/* Easter egg: heart */
.egg-heart{position:fixed;z-index:10001;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);pointer-events:none;
  animation:egg-pop 1.6s cubic-bezier(.16,1,.3,1) forwards}
.egg-heart svg{width:100%;height:100%;fill:#ee4428;filter:drop-shadow(0 0 18px rgba(238,68,40,.6))}
@keyframes egg-pop{0%{transform:scale(.2);opacity:0}18%{transform:scale(1);opacity:1}35%{transform:scale(.92)}100%{transform:scale(3.2);opacity:0}}
.egg-toast{position:fixed;left:50%;bottom:40px;z-index:10001;transform:translateX(-50%);padding:14px 26px;border-radius:999px;
  font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:700;font-size:1.25rem;color:#fff;background:#ee4428;
  box-shadow:0 18px 40px -16px rgba(238,68,40,.7);pointer-events:none;animation:egg-toast 2.6s cubic-bezier(.16,1,.3,1) forwards}
@keyframes egg-toast{0%{opacity:0;transform:translate(-50%,20px)}15%,75%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-10px)}}
@media (prefers-reduced-motion:reduce){.egg-heart{animation:none;opacity:0}.egg-toast{animation:none}}
.egg-heart svg{fill:none}
.egg-toast{background:linear-gradient(100deg,#ee4428 0%,#ff7a3d 18%,#ffb36b 30%,#ff5a2e 42%,#d9301a 55%,#ff8a4c 70%,#ffc58a 80%,#ee4428 100%);background-size:250% 100%;animation:egg-toast 2.6s cubic-bezier(.16,1,.3,1) forwards,accent-flow 3s ease-in-out infinite}
/* Toast sits under the heart; heart grows less */
.egg-toast{bottom:auto!important}
@keyframes egg-pop{0%{transform:scale(.2);opacity:0}18%{transform:scale(1);opacity:1}35%{transform:scale(.92)}100%{transform:scale(1.8);opacity:0}}
/* Heart first, then the thanks */
.egg-toast{opacity:0;animation-delay:.55s,0s!important;animation-fill-mode:both,none!important}
/* Thanks appears where the heart was */
.egg-toast{translate:0 -50%;white-space:nowrap}
/* Thanks as plain text in the headline gradient, no pill */
.egg-toast{padding:0!important;border-radius:0!important;box-shadow:none!important;
  font-size:clamp(1.6rem,3vw,2.4rem)!important;font-weight:800!important;
  background:linear-gradient(100deg,#ee4428 0%,#ff7a3d 18%,#ffb36b 30%,#ff5a2e 42%,#d9301a 55%,#ff8a4c 70%,#ffc58a 80%,#ee4428 100%)!important;
  background-size:250% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important}
.egg-toast{white-space:normal!important;text-align:center;line-height:1!important}
/* Mobile carousel: heading sits tight above the cards */
@media (max-width:900px){.steps-stage .detail-heading{padding:0!important;height:auto!important;min-height:0!important;justify-content:flex-start!important}.steps-stage{align-content:start!important;padding-top:calc(var(--header-height) + 24px)!important;gap:20px!important}}
/* Compact delivery list */
.detail-content .delivery-list{padding-left:0!important;margin:16px 0 20px!important;gap:6px!important}
.detail-content .delivery-list li{line-height:1.5!important;padding-left:28px!important;margin:0!important}
/* Mobile step cards: tighter type so a card fits on screen */
@media (max-width:900px){
  .detail-content .story-copy p,.detail-content .delivery-list li{font-size:1rem!important;line-height:1.5!important}
  .detail-content .story-copy p{margin:0 0 12px!important}
  .detail-content h3{font-size:1.6rem!important;margin-bottom:12px!important}
  .detail-content > section,.detail-content > article{padding:20px!important}
  .detail-content .delivery-list{margin:8px 0 12px!important;gap:4px!important}
  .detail-content .delivery-list li{padding-left:24px!important}
  .detail-content .delivery-list ~ p{display:none}
}
/* Mobile step cards: only the first paragraph, the rest stays on desktop */
@media (max-width:900px){.detail-content .story-copy p ~ p{display:none!important}}
/* Mobile profile card: photo first, then the text */
@media (max-width:820px){.personal{display:flex!important;flex-direction:column!important}.personal-media{order:-1;height:360px!important}.personal-layout{order:1}}
.personal .personal-lead{margin-top:12px!important}
/* Mobile carousel: heading + card centred vertically on the screen */
@media (max-width:900px){.steps-stage{align-content:center!important;grid-template-rows:auto auto!important;padding-top:calc(var(--header-height) * .5)!important}.steps-stage .detail-content{align-self:start}}
@media (max-width:900px){.is-carousel .detail-content > *{top:0!important;translate:none!important}}

/* ---------- Feature banner: same as the homepage hero ---------- */
.feature-banner{position:relative!important;isolation:isolate;display:flex!important;align-items:flex-end!important;min-height:100svh;margin:0!important;max-width:none!important;width:auto!important;
  padding:calc(var(--header-height) + 48px) var(--gutter) clamp(56px,8vw,112px)!important;overflow:hidden;color:#fff}
.feature-media{position:absolute;inset:0;z-index:-1;margin:0;overflow:hidden;background:#171310}
.feature-media video,.feature-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;transform:scale(1.3) translateX(10%);transform-origin:50% 25%}
.feature-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.4) 35%,rgba(0,0,0,0) 65%)}
.feature-banner .ds-copy{max-width:min(760px,58%);padding:0!important}
.feature-banner h2{color:#fff!important;font-size:clamp(2.8rem,6vw,6.2rem)!important;text-wrap:wrap!important}
.feature-banner h2 br{display:inline!important}
.feature-banner h2 .accent::before{content:none!important}
.feature-banner h2 .accent{background:linear-gradient(100deg,#fff 0%,#fff 40%,#ffe3d6 50%,#fff 60%,#fff 100%)!important;background-size:250% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
.feature-banner p{color:#fff!important;max-width:60ch}
.feature-banner .text-link{border-color:#fff!important;color:#fff!important}
.feature-banner .text-link:hover{background:#fff!important;color:var(--signal)!important}
@media (max-width:820px){.feature-media video,.feature-media img{transform:none;object-position:50% 20%}.feature-media::after{background:linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 55%,rgba(0,0,0,.1) 100%)}.feature-banner .ds-copy{max-width:100%}}
.feature-pin{position:relative;height:250vh}
.feature-pin > .feature-banner{position:sticky!important;top:0;height:100vh!important;min-height:0!important}
.feature-banner .ds-copy{will-change:transform,opacity}

/* ---------- Pricing tiers as glass cards ---------- */
.ds-pricing{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px!important;align-items:stretch}
.ds-pricing article{position:relative;display:flex;flex-direction:column;gap:6px;padding:clamp(28px,3vw,40px)!important;border-radius:24px;
  background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(255,255,255,.4),0 24px 50px -30px rgba(60,30,20,.3);
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.ds-pricing article:hover{transform:translateY(-6px)}
.ds-pricing article .button{margin-top:auto!important}
.ds-pricing article ul{margin:16px 0 28px}
.ds-pricing .ds-price{font-size:clamp(2rem,3vw,2.6rem)!important}
.ds-pricing article.is-featured{background:rgba(24,18,15,.82);color:#fff;transform:translateY(-12px) scale(1.02);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 2px #ee4428,0 30px 70px -30px rgba(238,68,40,.55)}
.ds-pricing article.is-featured:hover{transform:translateY(-18px) scale(1.02)}
.ds-pricing article.is-featured .ds-price span{opacity:.75}
.tier-badge{position:absolute;top:-16px;left:clamp(28px,3vw,40px);display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;font-size:.85rem;font-weight:700;color:#fff;
  background:linear-gradient(100deg,#ee4428,#ff7a3d 40%,#ff5a2e 70%,#d9301a);box-shadow:0 10px 24px -10px rgba(238,68,40,.7)}
.tier-badge .icon{font-size:16px;font-variation-settings:"FILL" 1}
@media (max-width:900px){.ds-pricing{grid-template-columns:1fr}.ds-pricing article.is-featured{transform:none}}

/* Deliverables as glass cards with a highlighted word */
.ds-deliverables{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px!important}
.ds-deliverables article{display:flex;flex-direction:column;gap:14px;padding:clamp(28px,3vw,40px)!important;border-radius:24px;
  background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(255,255,255,.4),0 24px 50px -30px rgba(60,30,20,.3);
  transition:transform .4s cubic-bezier(.16,1,.3,1)}
.ds-deliverables article:hover{transform:translateY(-6px)}
.ds-deliverables h3{font-size:clamp(1.6rem,2.2vw,2.1rem)!important;line-height:1.1!important;margin:0}
.ds-deliverables p{margin:0;color:var(--muted)}
.deliv-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;font-size:26px;color:#fff;
  background:linear-gradient(135deg,#ee4428,#ff7a3d 55%,#ffb36b);box-shadow:0 10px 24px -10px rgba(238,68,40,.7)}
@media (max-width:900px){.ds-deliverables{grid-template-columns:1fr}}
/* Featured tier: light glass with a warm orange glow instead of a dark card */
.ds-pricing article.is-featured{background:rgba(255,246,240,.72)!important;color:var(--ink)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 2px #ee4428,0 30px 70px -30px rgba(238,68,40,.45)!important}
.ds-pricing article.is-featured :is(h3,li,.ds-price){color:var(--ink)!important}
.ds-pricing article.is-featured p:not(.ds-price),.ds-pricing article.is-featured .ds-price span{color:var(--muted)!important;opacity:1}
.ds-pricing article.is-featured .ds-price{background:linear-gradient(100deg,#ee4428,#ff7a3d 40%,#d9301a 80%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ds-pricing article.is-featured .ds-price span{-webkit-text-fill-color:var(--muted)}
.ds-pricing article.is-featured h3,.ds-pricing article.is-featured li{color:var(--ink)!important}
.ds-pricing article.is-featured p:not(.ds-price),.ds-pricing article.is-featured .ds-price span{color:var(--muted)!important}
.ds-deliverables article{gap:10px!important}
.ds-deliverables article h3{margin:0!important}
.ds-deliverables article p{margin:0!important}
/* Tiers: title close to a smaller price */
.ds-pricing article h3{margin:0!important}
.ds-pricing .ds-price{font-size:clamp(1.25rem,1.6vw,1.5rem)!important;margin:6px 0 18px!important;line-height:1.3}
.ds-pricing .ds-price span{font-size:.9rem}
/* Mobile: tiers become a horizontal swipe slider */
@media (max-width:900px){
  .ds-pricing{display:flex!important;grid-template-columns:none!important;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;
    gap:16px!important;padding:24px var(--gutter) 28px!important;margin-inline:calc(var(--gutter) * -1)!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ds-pricing::-webkit-scrollbar{display:none}
  .ds-pricing article{flex:0 0 min(84%,380px);scroll-snap-align:center}
  .ds-pricing article.is-featured,.ds-pricing article.is-featured:hover,.ds-pricing article:hover{transform:none!important}
}
/* Slider: room for the card shadows so they are not clipped */
@media (max-width:900px){.ds-pricing{padding-bottom:64px!important;margin-bottom:-36px!important}.ds-pricing article{box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(255,255,255,.4),0 18px 32px -24px rgba(60,30,20,.3)!important}.ds-pricing article.is-featured{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 2px #ee4428,0 18px 36px -24px rgba(238,68,40,.45)!important}}
/* Slider arrows: only when the tiers are a slider and a mouse is used */
.slider-nav{display:none}
@media (max-width:900px) and (pointer:fine){
  .slider-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
  .slider-btn{all:unset;cursor:pointer;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:var(--signal);
    border:2px solid var(--signal);transition:background-color .25s,color .25s,transform .3s cubic-bezier(.16,1,.3,1),opacity .25s}
  .slider-btn:hover{background:var(--signal);color:#fff;transform:translateY(-2px)}
  .slider-btn:disabled{opacity:.3;pointer-events:none}
  .slider-btn:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
}
/* Deliverables: same horizontal slider on mobile */
@media (max-width:900px){
  .ds-deliverables{display:flex!important;grid-template-columns:none!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px!important;
    padding:12px var(--gutter) 64px!important;margin:24px calc(var(--gutter) * -1) -36px!important;scrollbar-width:none}
  .ds-deliverables::-webkit-scrollbar{display:none}
  .ds-deliverables article{flex:0 0 min(84%,380px);scroll-snap-align:center;transform:none!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(255,255,255,.4),0 18px 32px -24px rgba(60,30,20,.3)!important}
}
/* Pain points with icons */
.pain-list{list-style:none!important;padding:0!important;margin:24px 0!important;display:grid;gap:10px}
.pain-list li{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:16px;
  background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(255,255,255,.4);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.pain-list li:hover{transform:translateX(6px)}
.pain-list .icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;font-size:22px;color:#fff;
  background:linear-gradient(135deg,#ee4428,#ff7a3d 60%,#ffb36b)}

/* Contact form: sent state */
.form-sent { display: grid; gap: 12px; justify-items: start; padding: 24px 0; }
.form-sent .icon { font-size: 48px; color: #ee4428; }
.form-sent h3 { margin: 0; font-family: "Playfair Display", serif; font-size: 32px; }
.form-sent p { margin: 0; font-size: 16px; }

/* Contact: mobile uses the same pinned scroll, the form rises over the video */
@media (max-width:900px){
  .contact-pin > .contact.page-hero{height:100svh!important}
  .hero-form-layer{padding:calc(var(--header-height) + 16px) 16px 16px!important;align-content:center}
  .hero-form-layer .contact-form{max-height:calc(100svh - var(--header-height) - 40px);padding:20px!important}
}
.hero-form-layer .contact-form{scrollbar-width:none;-ms-overflow-style:none}
.hero-form-layer .contact-form::-webkit-scrollbar{display:none}
.topic-select{display:none}
@media (max-width:900px){
  .form-topic > label{display:none!important}
  .topic-select{display:block;position:relative;width:100%}
  .topic-select select{appearance:none;-webkit-appearance:none;width:100%;font:inherit;font-size:16px;color:var(--ink);padding:14px 44px 14px 16px;border-radius:14px;border:1px solid rgba(23,23,23,.12);background:rgba(255,255,255,.55)}
  .topic-select select:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 4px rgba(238,68,40,.15)}
  .topic-select .icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--ink)}
}
.topic-select .icon{background:none!important;box-shadow:none!important;width:auto!important;height:auto!important;font-size:24px!important}
.hero-form-layer .form-topic .topic-select span.icon{background:none!important;border:0!important;padding:0!important;box-shadow:none!important;width:auto!important;min-width:0!important;height:auto!important;font-size:24px!important;color:var(--ink)!important}
/* Topic dropdown: glass trigger and list */
@media (max-width:900px){
  .hero-form-layer .contact-form:has(.topic-select.is-open){overflow:visible}
  .topic-select .topic-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;font:inherit;font-size:16px;color:var(--ink);padding:13px 14px 13px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.45);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);cursor:pointer}
  .topic-select .topic-trigger b{font-weight:500}
  .topic-select .topic-trigger i{font-style:normal;font-size:24px;transition:transform .25s ease}
  .topic-select.is-open .topic-trigger{border-color:var(--signal);box-shadow:0 0 0 4px rgba(238,68,40,.15)}
  .topic-select.is-open .topic-trigger i{transform:rotate(180deg)}
  .topic-list{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;margin:0;padding:6px;list-style:none;border-radius:16px;border:1px solid rgba(255,255,255,.7);background:rgba(250,246,241,.62);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);box-shadow:0 18px 40px rgba(23,23,23,.18);opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top;pointer-events:none;transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1)}
  .topic-select.is-open .topic-list{opacity:1;transform:none;pointer-events:auto}
  .topic-list li{padding:12px 14px;border-radius:10px;font-size:16px;color:var(--ink);cursor:pointer}
  .topic-list li:hover{background:rgba(255,255,255,.6)}
  .topic-list li[aria-selected="true"]{background:var(--signal);color:#fff}
}
.hero-form-layer .topic-list li{color:var(--ink)!important;opacity:1!important}.hero-form-layer .topic-list li[aria-selected="true"]{color:#fff!important}.topic-select .topic-trigger i{line-height:1;display:block}
@media (max-width:900px){.contact.page-hero .contact-inner{margin-inline:0!important;width:auto!important}.contact.page-hero .contact-inner h1,.contact.page-hero .contact-inner h2{max-width:none!important}}
/* Sent state: personal note from Kenny, dark ink on the light glass */
.hero-form-layer .form-sent{gap:14px;padding:8px 0}
.hero-form-layer .form-sent img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 25%;box-shadow:0 0 0 3px rgba(255,255,255,.8)}
.hero-form-layer .form-sent h3{color:var(--ink)!important;font-size:clamp(30px,4vw,40px);font-weight:400}
.hero-form-layer .form-sent p{color:var(--ink)!important;opacity:1!important;font-size:17px;line-height:1.5}
.hero-form-layer .form-sent .form-sent-sign{font-family:"Playfair Display",serif;font-style:italic;font-weight:700;font-size:22px}
.hero-form-layer .form-sent .hero-call{color:var(--ink)!important;border-color:rgba(23,23,23,.25)!important;background:transparent!important}
.hero-form-layer .form-sent .hero-call{display:inline-flex!important;align-items:center;gap:8px;justify-self:start;padding:12px 20px!important;border:1.5px solid rgba(23,23,23,.3)!important;border-radius:999px!important;font-size:15px;font-weight:600;text-decoration:none}.hero-form-layer .form-sent .hero-call .icon{font-size:20px!important;color:inherit!important;background:none!important;width:auto!important;height:auto!important}
.hero-form-layer .form-sent .button{justify-self:start}
.hero-form-layer .form-sent .button .icon{color:#fff!important;font-size:20px!important}
/* Sent state: buttons side by side, staggered entrance */
.hero-form-layer .form-sent{grid-template-columns:auto auto;justify-content:start;column-gap:12px}
.hero-form-layer .form-sent > :not(.button){grid-column:1 / -1}
.hero-form-layer .form-sent .hero-call .icon{color:var(--ink)!important}
@keyframes sentIn{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes sentPop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.08)}100%{transform:scale(1)}}
.hero-form-layer .form-sent > *{animation:sentIn .7s cubic-bezier(.2,.8,.2,1) both}
.hero-form-layer .form-sent img{animation-name:sentPop;animation-duration:.6s}
.hero-form-layer .form-sent > :nth-child(2){animation-delay:.12s}
.hero-form-layer .form-sent > :nth-child(3){animation-delay:.22s}
.hero-form-layer .form-sent > :nth-child(4){animation-delay:.32s}
.hero-form-layer .form-sent > :nth-child(5){animation-delay:.42s}
.hero-form-layer .form-sent > :nth-child(6){animation-delay:.5s}
.hero-form-layer .form-sent .accent{display:inline-block;animation:sentIn .8s .3s cubic-bezier(.2,.8,.2,1) both}
@media (max-width:520px){.hero-form-layer .form-sent{grid-template-columns:auto}}
@media (prefers-reduced-motion:reduce){.hero-form-layer .form-sent *{animation:none!important}}
.hero-form-layer .form-sent .hero-call{padding:16px 24px!important;font-size:18px!important;min-height:0}
.hero-form-layer .form-sent .hero-call{min-height:68px!important;box-sizing:border-box}
@media (max-width:1200px){.hero-form-layer{grid-template-columns:minmax(0,1fr)!important}}
.hero-form-layer{padding-inline:max(var(--gutter),calc((100% - 1600px) / 2))!important}
@media (min-width:1201px){header.header{width:min(1600px,calc(100% - 2 * var(--gutter)))!important;max-width:none!important}header.header .header-inner{width:100%!important;max-width:none!important}}
.form-privacy{margin:0;font-size:14px;color:var(--muted)!important}
.form-privacy a{color:inherit;text-decoration:underline}
.hero-form-layer .form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
/* Article-type pages (inzichten, privacy, 404): hero full-bleed like the other pages */
.knowledge-article > .page-hero{width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;margin-right:0!important;padding-inline:max(var(--gutter),calc((100vw - 1600px) / 2))!important;box-sizing:border-box}
.knowledge-main:has(> .knowledge-article > .page-hero:first-child){padding-top:0!important}.knowledge-main > .knowledge-article:has(> .page-hero:first-child){padding-top:0!important;margin-top:0!important}
.page-hero .breadcrumbs{display:none!important}
.article-body h2{font-size:clamp(28px,2.6vw,40px)!important;line-height:1.15!important;margin:0 0 16px!important}.article-body section{padding-block:clamp(24px,3vw,40px)!important;min-height:0!important}
.page-hero .article-answer{display:none!important}
.knowledge-article{padding-bottom:clamp(80px,10vw,160px)!important}
@media (max-width:900px){.partner-hero .hero-portrait{inset:0!important;margin:0!important;width:auto!important;transform:none!important}}