/* PeachTouch Studio — built from the PeachTouch design system (tokens.json v2, synced 2026-10-13).
   Desktop values are the Figma 1920 frame; sizes interpolate down to the 312px mobile styles with clamp(). */

@font-face{font-family:Poppins;font-weight:300;font-style:normal;font-display:swap;src:url(/assets/fonts/poppins-latin-300.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/poppins-latin-400.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/poppins-latin-500.woff2) format("woff2")}

:root{
  /* colour */
  --brand:#ED6E66;
  --Homepage-Peach:#ED6E66; --peach-text:#ED6E66; --peach-tint:rgba(237,110,102,.15); --chip-stroke:rgba(0,0,0,.15); /* hero chip borders: the stats-separator hairline (--line, 20%) at 75% strength */
  --title-gradient-start:#ED6E66; --title-gradient-mid:#f7a57e; --title-gradient-end:#f1af92;
  --nav-dot:#d9bba9; --tagline-rose:#a67872;
  --Homepage-PeachLight:#f0e7e2; --footer-gradient-2:#e9d6cb; --footer-gradient-3:#f3d0b7;
  --card-wash:rgba(243,173,142,.1);
  --cmp-mid:#f3d6d1; --cmp-peach:#f6bdb9; /* Homepage-Peach at 45% over Homepage-White, opaque so the strip can blend into it */
  --Homepage-White:#fefdfd; --white:#fff;
  --Homepage-TextDark:#131313; --ink-deep:#090a11; --Homepage-TextMedium:#6a6867;
  --Homepage-PeachVeryDark:#af9e95; /* 2.5:1 as designed; see --control-border */
  --control-border:#8a7a72;          /* darkened from Homepage-PeachVeryDark to reach 3:1 on white (design-system note) */
  --line:rgba(0,0,0,.2); --line-card:rgba(0,7,12,.2); --line-tag:rgba(19,19,19,.2);
  /* space */
  --space-10:8px; --space-15:12px; --space-16:12.8px; --space-20:16px; --space-24:19.2px; --space-28:22.4px;
  --space-30:24px; --space-40:32px; --space-44:35.2px; --space-60:48px; --space-100:80px;
  --gutter:clamp(12.8px,5.84vw,112px);
  /* radius */
  --radius-menu-card:11.356px; --radius-card:17.47px; --radius-input:24px; --radius-feature:28px;
  --radius-cta:28.8px; --radius-panel:38.4px; --radius-nav:40px; --radius-pill:56.331px; --radius-band:80px;
  --shadow-menu:-4.8px 8.8px 11.04px 0 rgba(0,0,0,.25); --shadow-lift:0 2px 0 0 #131313;
  --control-nav:45.6px; --control-chip:45.6px;
  --font-sans:Poppins,system-ui,sans-serif;
  /* fluid type (desktop = Figma, mobile = m-* styles) */
  --fs-display:clamp(35.2px,4.96vw,96px);
  --fs-title:clamp(30.4px,4vw,76.8px);
  --fs-h3:clamp(17.6px,1.5vw,28.8px);
  --fs-bullet:clamp(14.4px,1vw,19.2px);
  --fs-p:clamp(13.6px,0.832vw,16px);
  --fs-small:clamp(11.2px,.83vw,12.8px);
  /* motion tokens (Motion / Framer Motion spec: ease [0.25, 1, 0.5, 1], duration 0.4s) */
  --motion-ease:cubic-bezier(0.25,1,0.5,1);
  --motion-duration:0.4s;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--Homepage-White);color:var(--Homepage-TextDark);font:300 var(--fs-p)/1.6 var(--font-sans)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--Homepage-TextDark);outline-offset:2px}
.skip{position:absolute;left:9.6px;top:-64px;z-index:100;padding:9.6px 16px;background:var(--Homepage-White);color:var(--Homepage-TextDark);border-radius:var(--radius-input);text-decoration:none;font-weight:500}
.skip:focus{top:9.6px}
.wrap{padding-inline:var(--gutter);max-width:1536px;margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--Homepage-White);border-bottom:1px solid transparent}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:19.2px;min-height:80px;padding-block:9.6px}
.logo{display:inline-flex;align-items:center}
.logo img{height:clamp(32px,2.48vw,47.2px);width:auto}
.nav{display:flex;align-items:center;gap:var(--space-15)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:var(--space-15)}
.nav li{position:relative}
.pill{display:inline-flex;align-items:center;gap:8.8px;height:var(--control-nav);padding:0 22.4px;border:0;border-radius:var(--radius-nav);background:var(--Homepage-White);color:var(--Homepage-TextDark);text-decoration:none;font:500 clamp(12px,0.92vw,17.6px)/.9 var(--font-sans);cursor:pointer;white-space:nowrap}
.pill::after{content:"";width:6.4px;height:6.4px;border-radius:50%;background:var(--nav-dot)}
.pill:hover,.pill[aria-expanded=true]{background:var(--peach-tint)}
.pill[aria-current=page]::after,.pill[aria-expanded=true]::after{background:var(--Homepage-Peach)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6.4px;height:var(--control-nav);padding:0 22.4px;border:1px solid var(--Homepage-Peach);border-radius:var(--radius-cta);background:var(--Homepage-Peach);color:#fff;font:500 clamp(12px,0.92vw,17.6px)/.9 var(--font-sans);text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{background:#df5e56;border-color:#df5e56;color:var(--Homepage-White)}
.btn--ghost{background:transparent;border-color:var(--Homepage-TextDark);color:var(--Homepage-TextDark)}
.btn--ghost:hover{background:var(--Homepage-TextDark);border-color:var(--Homepage-TextDark);color:var(--Homepage-White)}
.nav .sub{display:none;position:absolute;left:0;top:100%;min-width:272px;margin:0;padding:9.6px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-menu-card);box-shadow:var(--shadow-menu);flex-direction:column;align-items:stretch;gap:2px}
.nav .has-sub:hover>.sub,.nav .has-sub.open>.sub{display:flex}
.nav .sub{align-items:stretch;gap:2px}
.nav .sub li{display:block}
.sub a{display:block;text-align:left;padding:8px 11.2px;border-radius:8px;text-decoration:none;font:400 var(--fs-p)/1.4 var(--font-sans)}
.sub a:hover{background:var(--peach-tint)}

/* ---------- typography blocks ---------- */
h1,h2,h3,h4{font-family:var(--font-sans);font-weight:500;margin:0}
.display{font-size:var(--fs-display);line-height:1.05;letter-spacing:-.01em}
.title{font-size:var(--fs-title);line-height:1.08;background:linear-gradient(90deg,var(--title-gradient-start) 0%,var(--title-gradient-mid) 69%,var(--title-gradient-end) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
/* Live title gradient: a deeper-coral spotlight, clipped to the glyphs, follows the cursor (main.js sets --tx/--ty/--tspot) */
@property --tspot{syntax:"<number>";inherits:false;initial-value:0}
.title,.footer-title,.step__num{--tx:50%;--ty:40%;--tspot:0;background-image:radial-gradient(circle 8rem at var(--tx) var(--ty),rgba(201,64,56,calc(.95*var(--tspot))),rgba(214,82,72,calc(.5*var(--tspot))) 38%,transparent 72%),var(--title-base);background-repeat:no-repeat;transition:--tspot .35s ease}
.title{--title-base:linear-gradient(90deg,var(--title-gradient-start) 0%,var(--title-gradient-mid) 69%,var(--title-gradient-end) 100%)}
.footer-title{--title-base:linear-gradient(to right,#ED6E66 66%,#f09062 84%)}
.lead{font:400 var(--fs-h3)/1.5 var(--font-sans);letter-spacing:.02em;max-width:62ch}
.h3{font-size:var(--fs-h3);line-height:1.3;letter-spacing:.02em}
.body-l{font-size:var(--fs-p);line-height:1.7;max-width:70ch}
.muted{color:var(--Homepage-TextMedium)}
.eyebrow{font:500 var(--fs-small)/1.4 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--peach-text);margin:0 0 12.8px}
section{padding-block:clamp(44.8px,5.6vw,104px)}
.section-head{margin-bottom:clamp(25.6px,4vw,80px)}
.section-head p{margin:16px 0 0}
.page-hero{padding-block:clamp(32px,4.8vw,88px) clamp(25.6px,3.2vw,64px)}
.page-hero .lead{margin-top:clamp(16px,2vw,32px)}
.crumbs{margin:0 0 22.4px;font-size:var(--fs-small);color:var(--Homepage-TextMedium)}
.crumbs a{text-decoration:none;color:var(--Homepage-TextMedium)}.crumbs a:hover{color:var(--Homepage-TextDark);text-decoration:underline}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--space-20);margin-top:clamp(22.4px,2.4vw,38.4px)}
.divider{width:clamp(44px,4.24vw,80px);height:3.2px;margin-top:clamp(19.2px,2vw,32px)}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--space-20);list-style:none;margin:0;padding:0}
/* Poppins sits high in its line box: uneven padding nudges chip labels ~.12em down so they read optically centred */
.chip{display:inline-flex;align-items:center;justify-content:center;min-height:36.8px;padding:calc(3.2px + .12em) 16px calc(3.2px - .12em);border-radius:var(--radius-pill);font:500 clamp(12px,.96vw,14.8px)/1.2 var(--font-sans);text-decoration:none;color:var(--Homepage-TextDark)}
.chip--filled{background:var(--peach-tint);border:1px solid var(--chip-stroke)}
.chip--outline{border:1px solid var(--chip-stroke);color:var(--Homepage-Peach);background:transparent}

/* ---------- process ---------- */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-20);list-style:none;margin:0;padding:0;counter-reset:p}
.process li{counter-increment:p;padding:var(--space-30);border:1px solid var(--line);border-radius:var(--radius-feature);background:linear-gradient(211deg,transparent 56%,var(--card-wash) 85%);font:500 var(--fs-bullet)/1.4 var(--font-sans)}
.process li::before{content:counter(p);display:grid;place-items:center;width:38.4px;height:38.4px;margin-bottom:16px;border-radius:50%;border:2px solid var(--Homepage-Peach);color:var(--peach-text);font-weight:500}
/* Stats row (Fabrica Numbers pattern): big counting figure + short muted label, no card chrome */
.numbers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-20);list-style:none;margin:0;padding:0}
.numbers li{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,24px)}
/* short grey rule between the figure and its label, left-aligned */
.numbers li::after{content:"";order:1;width:clamp(32px,2.8vw,48px);height:1px;background:var(--line)}
.stat__label{order:2}
.stat__num{font:500 clamp(48px,5.9vw,85px)/1 var(--font-sans);letter-spacing:-.03em;color:var(--Homepage-TextDark);font-variant-numeric:tabular-nums;white-space:nowrap}
.stat__label{font:400 var(--fs-p)/1.4 var(--font-sans);color:var(--Homepage-TextMedium);max-width:22ch}
@media (max-width:1199.98px){.numbers{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(32px,5vw,56px)}}
@media (max-width:900px){.process{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.process{grid-template-columns:1fr}}

/* ---------- feature cards ---------- */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(12.8px,1.2vw,22.4px)}
.features--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.features--3{grid-template-columns:1fr}}
.feature{display:flex;flex-direction:column;gap:var(--space-20);padding:clamp(19.2px,1.68vw,32px);border:1px solid var(--line);border-radius:var(--radius-feature);background:linear-gradient(211deg,transparent 56%,var(--card-wash) 85%);text-decoration:none}
a.feature:hover{border-color:var(--Homepage-Peach)}
.feature h3{font:500 var(--fs-bullet)/1.4 var(--font-sans)}
.feature p{margin:0}
.feature .more{margin-top:auto;font-weight:500;color:var(--peach-text)}

/* ---------- comparison table ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-feature)}
table{border-collapse:separate;border-spacing:0;width:100%;min-width:448px}
th,td{padding:14.4px 19.2px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
tr:last-child td,tr:last-child th{border-bottom:0}
thead th{font-weight:500;background:var(--Homepage-PeachLight)}
thead td+th{border-bottom-left-radius:calc(var(--radius-menu-card) * 2)}
/* header strip warms from the neutral tint to peach. The blend starts 65% into the Traditional cell and
   runs halfway into the PeachTouch cell; --cmp-mid is the colour at the seam (41% of the way, so the slope is even) */
thead td+th{background:linear-gradient(90deg,var(--Homepage-PeachLight) 65%,var(--cmp-mid) 100%)}
thead th:last-child{background:linear-gradient(90deg,var(--cmp-mid) 0%,var(--cmp-peach) 50%)}
tbody th{font-weight:500;width:22%}
caption{text-align:left;padding:0 0 9.6px;font-weight:500}

/* ---------- card animation base (Motion spec: whileHover scale 1.03, duration 0.4s, ease [0.25, 1, 0.5, 1]) ---------- */
.card,
.project,
.feature,
.process li {
  transform-origin: center center;
  transition: transform var(--motion-duration) var(--motion-ease),
              border-color var(--motion-duration) var(--motion-ease),
              box-shadow var(--motion-duration) var(--motion-ease);
  will-change: transform;
}
.card:hover,
.project:hover,
.feature:hover,
.process li:hover {
  transform: scale(1.03);
  border-color: var(--Homepage-Peach);
  z-index: 2;
  position: relative;
}

/* ---------- project cards ---------- */
.projects{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-40)}
@media (max-width:900px){.projects{grid-template-columns:1fr;gap:19.2px}}
.project{display:flex;flex-direction:column;gap:var(--space-30);padding:16px;border:1px solid var(--line-card);border-radius:var(--radius-card);background:var(--white);color:var(--ink-deep);text-decoration:none}
.project__media{border-radius:var(--radius-card);background:var(--Homepage-PeachLight);overflow:hidden;aspect-ratio:724/406}
.project__media img{width:100%;height:100%;object-fit:cover}
.project__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12.8px;font-size:clamp(16px,1.536vw,29.52px)}
.project__title{font:500 1em/1.3 var(--font-sans);min-height:2.6em} /* always room for two lines */
.project__arrow{flex:none;width:19.2px;height:19.2px;margin-top:calc(.65em - 9.6px)} /* centred on the first line */
.project__text{margin:0;font:400 var(--fs-p)/1.5 var(--font-sans);color:var(--Homepage-TextMedium)}
.tags{display:flex;flex-wrap:wrap;gap:var(--space-10);list-style:none;margin:0;padding:0}
.tag{display:inline-flex;align-items:center;min-height:35.2px;padding:3.2px 16px;border:1px solid var(--line-tag);border-radius:var(--radius-pill);font:500 clamp(11.2px,.95vw,14.4px)/1.2 var(--font-sans)}
.badge{display:inline-block;margin-left:8px;padding:2px 9.6px;border:1px solid var(--control-border);border-radius:var(--radius-pill);font:500 var(--fs-small)/1.6 var(--font-sans);color:var(--Homepage-TextMedium);vertical-align:middle}

/* ---------- accordion / faq ---------- */
.accordion{list-style:none;margin:0;padding:0;max-width:720px}
.accordion button{width:100%;min-height:73.6px;display:flex;align-items:center;justify-content:space-between;gap:19.2px;padding:9.6px 5.6px 9.6px 0;background:none;border:0;text-align:left;cursor:pointer;font:500 var(--fs-bullet)/1.4 var(--font-sans);color:var(--Homepage-TextDark)}
.plus{position:relative;flex:none;width:28.8px;height:28.8px;transition:transform .2s}
.plus::before,.plus::after{content:"";position:absolute;background:var(--Homepage-Peach)}
.plus::before{left:0;right:0;top:13.6px;height:2px}.plus::after{top:0;bottom:0;left:13.6px;width:2px}
.accordion [aria-expanded=true] .plus{transform:rotate(45deg)}

/* ---------- founder / split ---------- */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(22.4px,4vw,80px);align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.photo{margin:0}
.photo img{width:100%;border-radius:var(--radius-feature);aspect-ratio:3/4;object-fit:cover;background:var(--Homepage-PeachLight)}
.photo figcaption{display:flex;justify-content:space-between;gap:12.8px;padding:16px 16px 0;font:400 var(--fs-bullet)/1.4 var(--font-sans)}
.photo figcaption strong{font-weight:500}
.stats{list-style:none;margin:22.4px 0;padding:0;display:grid;gap:14.4px}
.stats li{padding-left:16px;border-left:0;position:relative}
.stats li::before{content:"";position:absolute;left:0;top:.6em;width:6.4px;height:6.4px;border-radius:50%;background:var(--Homepage-Peach)}
.stats strong{font-weight:500}
.prose h2{font-size:var(--fs-h3);margin:2em 0 .6em}
.prose h3{font-size:var(--fs-bullet);margin:1.6em 0 .5em}
.prose p,.prose li{max-width:70ch}
/* Two-tone scroll ink: words fill from muted to dark as the block scrolls up, and drain back on scroll up (main.js) */
[data-ink].is-ink .ink{color:var(--Homepage-TextMedium);transition:color .25s ease}
[data-ink].is-ink .ink.on{color:var(--Homepage-TextDark)}
.prose ol,.prose ul{padding-left:1.2em}
.prose>:first-child{margin-top:0}
/* Framework steps: editorial rows, not boxes. Big gradient index | title | description, divided by
   hairlines; on hover the rule above a row draws across in peach. */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;border-bottom:1px solid var(--line)}
.steps li{counter-increment:s;position:relative;display:grid;grid-template-columns:1fr 3fr;gap:var(--space-20);align-items:start;padding-block:clamp(28px,3.4vw,64px);border-top:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);font:500 clamp(44px,5vw,96px)/.9 var(--font-sans);letter-spacing:-.04em;background:linear-gradient(90deg,var(--title-gradient-start),var(--title-gradient-mid));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.steps li::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--Homepage-Peach);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--spring)}
.steps li:hover::after{transform:scaleX(1)}
.steps li>div{display:grid;grid-template-columns:1fr 2fr;gap:var(--space-20);align-items:baseline}
.steps h3{font:500 var(--fs-h3)/1.25 var(--font-sans);letter-spacing:-.01em;margin:0}
.steps p{margin:0;font:300 clamp(15px,1.12vw,21px)/1.6 var(--font-sans);color:var(--Homepage-TextMedium);max-width:52ch}
@media (max-width:1199.98px){.steps li>div{grid-template-columns:1fr;gap:10px}}
@media (max-width:809.98px){.steps li{grid-template-columns:1fr;gap:14px}}
/* ---------- testimonials (Fabrica bento): intro card + one person/quote column per client ---------- */
.tm{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-10)}
.tm__card{border:1px solid var(--line);border-radius:var(--radius-feature);background:linear-gradient(211deg,transparent 56%,var(--card-wash) 85%);padding:clamp(20px,1.9vw,36px)}
.tm__intro{display:flex;flex-direction:column;justify-content:space-between;gap:32px;min-height:clamp(380px,32vw,600px)}
.tm__intro-text{margin:0;font:500 var(--fs-h3)/1.3 var(--font-sans);letter-spacing:-.01em;color:var(--Homepage-TextMedium)}
.tm__intro-foot{display:grid;gap:clamp(20px,2vw,32px)}
.tm__trust{display:flex;align-items:center;gap:12px;font-size:var(--fs-p);line-height:1.4;color:var(--Homepage-TextMedium)}
.tm__trust strong{font-weight:500;color:var(--Homepage-TextDark)}
.tm__faces{display:flex;flex:none}
.tm__faces img{width:40px;height:40px;border-radius:12px;border:2px solid var(--Homepage-White);object-fit:cover}
.tm__faces img+img{margin-left:-10px}
.tm__col{display:flex;flex-direction:column;gap:var(--space-10);margin:0}
.tm__quote{flex:1;display:flex;flex-direction:column;justify-content:flex-end;margin:0;position:relative;padding-top:clamp(64px,5vw,96px)}
.tm__quote::before{content:"\201C";position:absolute;top:clamp(14px,1.4vw,28px);left:clamp(20px,1.9vw,36px);font:500 clamp(56px,4.6vw,88px)/1 var(--font-sans);background:linear-gradient(90deg,var(--title-gradient-start),var(--title-gradient-mid));-webkit-background-clip:text;background-clip:text;color:transparent}
.tm__quote p{margin:0;font:500 clamp(18px,1.55vw,30px)/1.25 var(--font-sans);letter-spacing:-.02em;color:var(--Homepage-TextDark)}
.tm__quote--long p{font-size:clamp(16px,1.2vw,23px);line-height:1.35}
.tm__person{order:-1}
.tm__col--flip .tm__person{order:1}
.tm__col--flip .tm__quote{justify-content:flex-start;padding-top:clamp(80px,6vw,112px)}
.tm__person{display:flex;align-items:center;gap:14px;margin:0}
.tm__person img{width:56px;height:56px;border-radius:14px;object-fit:cover;flex:none}
.tm__person>span{display:grid;gap:2px;min-width:0}
.tm__name{font:500 var(--fs-bullet)/1.3 var(--font-sans);color:var(--Homepage-TextDark)}
.tm__role{font-size:calc(var(--fs-p) * .9);line-height:1.35;color:var(--Homepage-TextMedium)}
@media (max-width:1199.98px){
  .tm{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tm__intro{grid-column:1 / -1;min-height:0}
  .tm__quote{min-height:260px}
}
@media (max-width:809.98px){
  .tm{grid-template-columns:1fr}
  .tm__quote{min-height:0}
  .tm__col--flip .tm__person{order:-1}
  .tm__col--flip .tm__quote{justify-content:flex-end;padding-top:clamp(64px,5vw,96px)}
}
.band{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(90deg,rgba(255,255,255,.33),rgba(255,255,255,.33)),linear-gradient(123deg,var(--Homepage-PeachLight) 1.3%,var(--footer-gradient-2) 43.5%,var(--footer-gradient-3) 100%);border-radius:var(--radius-feature);padding:clamp(22.4px,3.2vw,57.6px)}
.band--cta{display:flex;flex-wrap:wrap;gap:22.4px;align-items:center;justify-content:space-between}
.band--cta h2{font:500 var(--fs-title)/1.1 var(--font-sans);max-width:18ch}

/* ---------- footer (live footer, no form) ---------- */
.site-footer{position:relative;margin-top:clamp(32px,4vw,80px);padding:max(48px,5.44vw) var(--gutter) 0;background:linear-gradient(90deg,rgba(255,255,255,.33),rgba(255,255,255,.33)),linear-gradient(123deg,var(--Homepage-PeachLight) 1.3%,var(--footer-gradient-2) 43.5%,var(--footer-gradient-3) 100%)}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:max(48px,5.44vw);background:var(--Homepage-White);border-radius:0 0 max(28px,4vw) max(28px,4vw)}
.site-footer>*{position:relative}
.footer-title{padding-top:max(32px,3.28vw);font-size:clamp(32px,4.96vw,96px);line-height:1;-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.1em}
.footer-tagline{margin:clamp(9.6px,1.2vw,22.4px) 0 0;font:500 clamp(16px,1.496vw,28.8px)/1.3 var(--font-sans);letter-spacing:.02em;color:var(--peach-text)}
.footer-grid{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(22.4px,4vw,80px);margin-top:clamp(32px,4vw,76.8px)}
.footer-art{flex:0 0 min(22.4vw,416px);aspect-ratio:1/1.1;border-radius:1.44vw;background:var(--Homepage-PeachLight);overflow:hidden}
.footer-art img{width:100%;height:100%;object-fit:cover}
@media (max-width:1200px){.footer-art{display:none}}
.footer-details{display:flex;flex-direction:column;gap:clamp(19.2px,2.4vw,48px)}
.social{display:flex;flex-wrap:wrap;gap:clamp(12.8px,1.2vw,25.6px);list-style:none;margin:0;padding:0;font:500 clamp(13.6px,0.96vw,18.4px)/1.4 var(--font-sans)}
.social a{display:inline-flex;align-items:center;gap:6.4px;text-decoration:none;position:relative;padding-bottom:4.8px}
.social a::before{content:"";position:absolute;left:0;bottom:0;height:2.4px;width:100%;background:var(--Homepage-Peach);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.social a:hover::before,.social a:focus-visible::before{transform:scaleX(1)}
@media (max-width:768px){.social a::before{transform:scaleX(1)}}
.social img{width:14.4px;height:14.4px}
.company{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:16px;font:400 clamp(13.6px,0.96vw,18.4px)/1.4 var(--font-sans)}
.company a{text-decoration:none}.company a:hover{text-decoration:underline}
.footer-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:25.6px;margin-top:clamp(38.4px,4vw,72px);padding-top:25.6px;border-top:1px solid rgba(166,120,114,.25)}
.footer-links h2{font:500 var(--fs-small)/1.6 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;margin-bottom:9.6px;color:var(--Homepage-TextDark)}
.footer-links ul{list-style:none;margin:0;padding:0;display:grid;gap:6.4px;font-size:var(--fs-small)}
.footer-links a{text-decoration:none}.footer-links a:hover{text-decoration:underline}
.legal{display:flex;flex-wrap:wrap;justify-content:center;gap:9.6px clamp(16px,2.4vw,48px);margin-top:clamp(25.6px,2.4vw,48px);padding:25.6px 0 32px;border-top:1px solid rgba(166,120,114,.25);font-size:var(--fs-small)}
.legal a{text-decoration:none}.legal a:hover{text-decoration:underline}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important}
}

/* =====================================================================
   Responsive system + behaviours (from the Fabrica structure & motion spec,
   2026-10-13). PeachTouch colours, type family and components are unchanged;
   this layer adds the 3 breakpoints, the 4-column section rhythm and the motion.
   Desktop >= 1200 · Tablet 810-1199 · Phone < 810
   ===================================================================== */
:root{
  --gutter:28.8px; --container:1216px; --nav-h:67.2px;
  --section-gap:152px; --page-top:272px; --head-gap:80px; --h1-gap:96px;
  --appear-y:136px;
  --fs-display:96px; --fs-title:76.8px; --fs-h3:25.6px; --fs-p:16px;
  --spring:cubic-bezier(.22,1,.36,1);
}
@media (min-width:810px) and (max-width:1199.98px){
  :root{--gutter:24px; --section-gap:96px; --page-top:208px; --head-gap:44.8px; --h1-gap:64px;
        --fs-display:76.8px; --fs-title:57.6px; --fs-h3:22.4px; --fs-p:14.4px}
}
@media (max-width:809.98px){
  :root{--gutter:16px; --nav-h:57.6px; --section-gap:40px; --page-top:112px; --head-gap:25.6px; --h1-gap:24px;
        --appear-y:72px; --fs-display:38.4px; --fs-title:30.4px; --fs-h3:17.6px; --fs-p:13.6px}
}
.wrap{max-width:var(--container);padding-inline:var(--gutter)}
section{padding-block:calc(var(--section-gap) / 2)}
.page-hero{padding-top:var(--page-top);padding-bottom:calc(var(--section-gap) / 2)}
.page-hero--home{padding-top:calc(var(--nav-h) + clamp(32px,4.8vw,88px))}
/* Home hero fills the viewport: leftover height splits evenly above the H1 and above the chips,
   so the chips always sit 4vw off the bottom edge.
   Title, divider, lead and buttons are grouped in .hero-main so their gaps never stretch. The fixed gaps below are the floors on short screens. */
.page-hero--home{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;padding-bottom:4vw}
.page-hero--home>.hero-main{margin-top:auto} /* title→buttons keep their normal block spacing inside */
.page-hero--home>.chips--first{margin-top:auto;padding-top:clamp(26px,3.2vw,51px)}
.page-hero .lead{margin-top:calc(var(--h1-gap) / 3)}
.title,.display{letter-spacing:-.03em}

/* section header: label in column 1, heading in columns 2-4; stacks on phone */
.section-head{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3.2px;margin-bottom:var(--head-gap);align-items:start}
.section-head__main{grid-column:2 / -1}
.section-head__main p{margin:16px 0 0}
.label{display:inline-flex;align-items:center;gap:7.2px;margin:.9em 0 0;font:500 var(--fs-small)/1.4 var(--font-sans);color:var(--Homepage-TextDark)}
.label__dot{position:relative;flex:none;width:14.4px;height:14.4px;border-radius:50%;background:var(--Homepage-Peach)}
.label__dot::before,.label__dot::after{content:"";position:absolute;left:4px;right:4px;top:6.6px;height:1.5px;background:var(--Homepage-TextDark)}
.label__dot::after{transform:rotate(90deg)}
@media (max-width:809.98px){
  .section-head{display:flex;flex-direction:column;gap:12.8px}
  .label{margin:0;gap:4.8px;font-size:10.4px}
}

/* grids per breakpoint */
@media (min-width:810px) and (max-width:1199.98px){ .features--3{grid-template-columns:repeat(2,1fr)} .process{grid-template-columns:1fr 1fr} }
@media (max-width:809.98px){ .features--3,.features{grid-template-columns:1fr} .projects{grid-template-columns:1fr;gap:19.2px} .process{grid-template-columns:1fr} .split{grid-template-columns:1fr} }
@media (min-width:810px){ .projects{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- nav: fixed, blurred; pills on desktop, burger + full menu below 1200 ---------- */
.site-header{position:fixed;left:0;right:0;top:0;background:rgba(254,253,253,.82);-webkit-backdrop-filter:blur(5.6px);backdrop-filter:blur(5.6px);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.site-header.is-hidden{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){ .site-header{transition:none} }
.site-header .bar{min-height:var(--nav-h);padding-block:8px;max-width:none;padding-inline:clamp(16px,1.6vw,24px)} /* full-bleed: logo hugs the left edge, nav + Get in touch the right */
.nav sup{font-size:.6em;margin-left:2px;color:var(--peach-text)}
.burger{display:none;position:relative;width:47.2px;height:35.2px;margin-right:-6.4px;border:0;background:none;cursor:pointer;z-index:61}
.burger i{position:absolute;left:6.4px;right:6.4px;height:2px;background:var(--Homepage-TextDark);transition:transform .45s var(--spring),top .45s var(--spring)}
.burger i:first-of-type{top:13.6px}.burger i:last-of-type{top:21.6px}
.burger[aria-expanded=true] i:first-of-type{top:17.6px;transform:rotate(45deg)}
.burger[aria-expanded=true] i:last-of-type{top:17.6px;transform:rotate(-45deg)}
@media (max-width:1199.98px){ .nav{display:none} .burger{display:block} }

.menu{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:calc(var(--nav-h) + 32px) var(--gutter) 25.6px;background:var(--Homepage-White);overflow:auto}
.menu[hidden]{display:none}
.menu__links{list-style:none;margin:0;padding:0;text-align:center}
.menu__links a{display:inline-block;font:500 48px/57.6px var(--font-sans);letter-spacing:-.04em;text-decoration:none;color:var(--Homepage-TextDark)}
.menu__links a[aria-current=page]{color:var(--peach-text)}
.menu__svc{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6.4px 16px;font-size:var(--fs-small)}
.menu__svc a{text-decoration:none;color:var(--Homepage-TextMedium)}.menu__svc a:hover{color:var(--Homepage-TextDark)}
.menu__bottom{display:flex;flex-direction:column;align-items:center;gap:12.8px;text-align:center;font-size:11.2px}
.menu__mail{font:500 27.2px/1.1 var(--font-sans);letter-spacing:-.03em;text-decoration:none}
.menu__legal{display:flex;gap:19.2px}.menu__bottom a{color:inherit}
@media (min-width:810px) and (max-width:1199.98px){ .menu__links a{font-size:33.6px;line-height:40.32px} }
@media (max-width:809.98px){ .menu__links a{font-size:25.6px;line-height:30.72px} .menu__mail{font-size:20.8px} .menu__bottom{font-size:9.6px} }
.js .menu.open .menu__links li{animation:menu-in .6s var(--spring) both}
.js .menu.open .menu__links li:nth-child(2){animation-delay:.05s}.js .menu.open .menu__links li:nth-child(3){animation-delay:.1s}
.js .menu.open .menu__links li:nth-child(4){animation-delay:.15s}.js .menu.open .menu__links li:nth-child(5){animation-delay:.2s}
@keyframes menu-in{from{opacity:0;transform:translateY(24px);color:#c8c3c0}to{opacity:1;transform:none}}
body.menu-open{overflow:hidden}

/* ---------- button text roll ---------- */
.roll{position:relative;display:inline-block;overflow:hidden;line-height:1.15;vertical-align:middle}
.roll>span{display:block;transition:transform .45s var(--spring)}
.roll>span+span{position:absolute;left:0;top:0;transform:translateY(110%)}
.btn:hover .roll>span:first-child,.btn:focus-visible .roll>span:first-child,.cform__send:not([disabled]):hover .roll>span:first-child,.cform__send:focus-visible .roll>span:first-child,.pill:hover .roll>span:first-child,.pill:focus-visible .roll>span:first-child{transform:translateY(-110%)}
.btn:hover .roll>span+span,.btn:focus-visible .roll>span+span,.cform__send:not([disabled]):hover .roll>span+span,.cform__send:focus-visible .roll>span+span,.pill:hover .roll>span+span,.pill:focus-visible .roll>span+span{transform:translateY(0)}
/* nav-pill dot swaps with the text */
.pill::after{transition:transform .45s var(--spring),background-color .3s}
.pill:hover::after,.pill[aria-current=page]::after{transform:scale(1.25);background:var(--Homepage-Peach)}

/* ---------- accordion: one open, height animates ---------- */
.acc-h{font-size:inherit;margin:0}
.accordion .line{position:relative}
.accordion .line::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--control-border);transform-origin:left}
.accordion .line:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--control-border)}
.accordion .plus{transition:transform .5s var(--spring)}
.accordion .panel{display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s var(--spring),visibility .5s}
.accordion .panel>div{overflow:hidden}
.accordion .panel p{margin:0;padding:0 0 25.6px;max-width:62ch}
.js .accordion .panel{grid-template-rows:0fr;visibility:hidden}
.js .accordion .open .panel{grid-template-rows:1fr;visibility:visible}

/* ---------- scroll reveal: fade + rise + blur clearing; lines draw left to right ---------- */
.js .reveal{opacity:.001;transform:translateY(48px);filter:blur(4.8px);transition:opacity .35s ease,transform .45s var(--spring),filter .35s ease;transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none;filter:none}
.js .accordion .line::before{transform:scaleX(0);transition:transform .45s var(--spring) var(--d,0s)}
.js .accordion .line.in::before{transform:scaleX(1)}
.js [data-appear]{opacity:.001}
.w{display:inline-block;will-change:transform,opacity,filter}
.js .words .w{opacity:.001;transform:translateY(8px);filter:blur(4.8px);transition:opacity .3s ease,transform .35s var(--spring),filter .3s ease;transition-delay:calc(var(--i) * .0125s)}
.js .words.in .w{opacity:1;transform:none;filter:none}

/* ---------- card motion reveal (Motion spec: initial { opacity: 0, y: 20 }, animate { opacity: 1, y: 0 }) ---------- */
.js .card.reveal,
.js .project.reveal,
.js .feature.reveal,
.js .process li.reveal {
  opacity: 0.001;
  transform: translateY(16px);
  filter: none;
  transition: opacity calc(var(--motion-duration) / 2) var(--motion-ease),
              transform calc(var(--motion-duration) / 2) var(--motion-ease),
              border-color var(--motion-duration) var(--motion-ease);
  transition-delay: var(--d, 0s);
}
.js .card.reveal.in,
.js .project.reveal.in,
.js .feature.reveal.in,
.js .process li.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.js .card.reveal.in:hover,
.js .project.reveal.in:hover,
.js .feature.reveal.in:hover,
.js .process li.reveal.in:hover {
  transform: scale(1.03);
}

/* ---------- project card hover ---------- */
.project__media{position:relative}
.project__media img{transition:transform var(--motion-duration) var(--motion-ease)}
.project__media::after{content:"";position:absolute;inset:0;background:#0a0a0a;opacity:0;transition:opacity var(--motion-duration) var(--motion-ease);pointer-events:none}
.project:hover .project__media img{transform:scale(1.08)}
.project:hover .project__media::after{opacity:.15}

/* ---------- progressive blur at the bottom of the viewport ---------- */
.pblur{position:fixed;left:0;right:0;bottom:0;height:69.6px;z-index:40;pointer-events:none}
.pblur i{position:absolute;inset:0}
.pblur i:nth-child(1){-webkit-backdrop-filter:blur(2.4px);backdrop-filter:blur(2.4px);-webkit-mask:linear-gradient(to bottom,transparent 0%,#000 33.33%,#000 66.67%,transparent 100%);mask:linear-gradient(to bottom,transparent 0%,#000 33.33%,#000 66.67%,transparent 100%)}
.pblur i:nth-child(2){-webkit-backdrop-filter:blur(4.8px);backdrop-filter:blur(4.8px);-webkit-mask:linear-gradient(to bottom,transparent 33.33%,#000 66.67%,#000 100%);mask:linear-gradient(to bottom,transparent 33.33%,#000 66.67%,#000 100%)}
.pblur i:nth-child(3){-webkit-backdrop-filter:blur(9.6px);backdrop-filter:blur(9.6px);-webkit-mask:linear-gradient(to bottom,transparent 66.67%,#000 100%);mask:linear-gradient(to bottom,transparent 66.67%,#000 100%)}

/* ---------- footer spacing per breakpoint ---------- */
.site-footer{padding:calc(max(48px,5.44vw) + 80px) var(--gutter) 0}
@media (max-width:1199.98px){ .footer-grid{flex-direction:column;align-items:flex-start} }
@media (max-width:809.98px){ .site-footer{padding-top:calc(max(48px,5.44vw) + 40px)} .legal{flex-direction:column;align-items:center;gap:9.6px;text-align:center} }

/* ---------- reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .words .w,.js [data-appear],
  .card,.project,.feature,.process li,.steps li,
  .card:hover,.project:hover,.feature:hover,.process li:hover,.steps li:hover,
  .js .card.reveal,.js .project.reveal,.js .feature.reveal,.js .process li.reveal,.js .steps li.reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .js .accordion .line::before{transform:none;transition:none}
  .steps li::after{transition:none}
  .cform__send i,.cform__send i::after,
  .roll>span,.project__media img,.accordion .panel,.burger i{transition:none!important}
  .js .menu.open .menu__links li{animation:none}
  .pblur{display:none}
}
@media print{ .pblur,.site-header{display:none} }

/* ---------- projects: one horizontal row, driven by the page scroll ---------- */
.hsec{padding-inline:0}
.projects--row{display:flex;gap:var(--space-40);width:max-content;padding-inline:var(--gutter);will-change:transform}
.projects--row .project{flex:0 0 clamp(272px,34vw,512px)}
.projects__end{flex:none;display:flex;align-items:center;padding-inline:clamp(8px,2vw,40px) calc(clamp(8px,2vw,40px) * 1.4 + var(--gutter) * .4)} /* space after the button = 1.4x (its own pad + the row gutter); the row adds the other 1x gutter */
.hscroll__viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:12px}
.hscroll__viewport .project{scroll-snap-align:start}
.hscroll__viewport:focus-visible{outline-offset:-2px}
/* pinned mode (set by main.js when it fits): the section sticks and its row slides as the page scrolls */
.hscroll.is-pinned{position:relative}
.hscroll.is-pinned .hscroll__sticky{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hscroll.is-pinned .hscroll__viewport{overflow:visible;scroll-snap-type:none;padding-bottom:0}
.hscroll.is-pinned .section-head{margin-bottom:calc(var(--head-gap) / 2)}
@media (max-width:809.98px){ .projects--row{gap:16px} .projects--row .project{flex-basis:82vw} }
@media (prefers-reduced-motion:reduce){ .projects--row{will-change:auto} }

/* feature-card icons (design system: 91px, at the site's 80% scale) */
.feature__icon{display:block;width:73px;height:73px;object-fit:contain}
@media (max-width:809.98px){.feature__icon{width:56px;height:56px}}

/* tags sit at the bottom of the card, whatever the title length */
.project .tags{margin-top:auto}

/* the bottom blur fades out over the footer */
.pblur{transition:opacity .3s ease}
.pblur.is-off{opacity:0}

/* footer content centred */
.site-footer{text-align:center}
.footer-grid{justify-content:center}
.footer-details{align-items:center}
.social{justify-content:center}
.company{align-items:center}
.footer-links{grid-template-columns:repeat(2,minmax(0,max-content));justify-content:center;column-gap:clamp(48px,8vw,160px)}
.footer-links ul{justify-items:center}
@media (max-width:1199.98px){ .footer-grid{align-items:center} }
@media (max-width:809.98px){ .footer-links{grid-template-columns:1fr} }

/* footer social icons */
.social-icons{display:flex;justify-content:center;gap:12px;list-style:none;margin:0;padding:0}
.social-icons a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--white);color:var(--Homepage-TextDark);transition:background-color .3s,color .3s}
.social-icons a:hover,.social-icons a:focus-visible{background:var(--Homepage-TextDark);color:var(--white)}

/* contact lines: block stays centred, lines align left */
.footer-details .company{align-items:flex-start;text-align:left}

/* link columns stay centred as a group; headings and links inside each column align left */
.footer-links>div{text-align:left}
.footer-links ul{justify-items:start}

/* ---------- footer contact: form + company details (replaces the footer image) ---------- */
.contact{display:grid;grid-template-columns:minmax(0,610px) minmax(0,360px);justify-content:center;align-items:start;gap:40px clamp(40px,9vw,170px);margin-top:clamp(32px,4vw,72px);text-align:left}
.cform{display:grid;grid-template-columns:1fr 1fr;gap:24px 30px}
.cform__field{position:relative}
.f-msg,.cform__actions{grid-column:1 / -1}
.cform__input{width:100%;height:42px;padding:8px 16px;border:1px solid var(--control-border);border-radius:24px;background:var(--Homepage-White);color:var(--Homepage-TextDark);font:300 var(--fs-p)/1.4 var(--font-sans)}
.cform__input:-webkit-autofill,.cform__input:-webkit-autofill:hover,.cform__input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--Homepage-White) inset !important;-webkit-text-fill-color:var(--Homepage-TextDark) !important;transition:background-color 5000s ease-in-out 0s}
.cform__input::placeholder{color:var(--Homepage-TextDark);opacity:.85}
.cform__input:hover{border-color:var(--Homepage-Peach)}
.cform__input:focus-visible{outline:2px solid var(--Homepage-TextDark);outline-offset:2px}
.cform__input[aria-invalid=true]{border-color:var(--peach-text)}
.cform__textarea{height:133px;padding-top:10px;padding-bottom:44px;resize:vertical}
.cform__attach{position:absolute;right:24px;bottom:12px;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 48px);cursor:pointer;font:300 var(--fs-p)/1.4 var(--font-sans);color:var(--Homepage-TextDark)}
.cform__file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* (removed: a rule that hid the Attach-file focus ring) */
#cf-file:focus-visible ~ .cform__attach,.f-msg:has(#cf-file:focus-visible) .cform__attach{outline:2px solid var(--Homepage-TextDark);outline-offset:4px;border-radius:6px}
.cform__actions{display:flex;align-items:center;justify-content:flex-end;gap:20px}
.cform__status{margin:0;font-size:var(--fs-small);color:var(--Homepage-TextDark)}
.cform__status.is-error{color:var(--peach-text)}
.cform__send{position:relative;display:inline-flex;align-items:center;justify-content:center;width:158px;height:46px;padding:0 20px;border:0;border-radius:24px;background:var(--Homepage-TextDark);color:var(--Homepage-White);font:500 clamp(16px,1vw,19.2px)/1 var(--font-sans);cursor:pointer;transition:background-color .3s}
.cform__send:hover{background:var(--ink-deep)}
.cform__send i{position:absolute;right:20px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--Homepage-TextMedium)}
.cform__send[disabled]{opacity:.4;cursor:default}
/* Send hover: label rolls (as .btn), dot warms to peach and grows (as the nav-pill dot); phone: arrow nudges right */
.cform__send i{transition:transform .45s var(--spring),background-color .3s}
.cform__send:not([disabled]):hover i,.cform__send:focus-visible i{transform:scale(1.25);background:#dd7135}
.cdetails h3{margin:0 0 clamp(24px,3vw,56px);font:400 clamp(20px,1.875vw,36px)/1.3 var(--font-sans);letter-spacing:.02em;opacity:.8}
.cdetails__list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(16px,1.7vw,32px);font:500 clamp(16px,1.25vw,24px)/1.4 var(--font-sans)}
.cdetails__list a{text-decoration:none}.cdetails__list a:hover{text-decoration:underline}
.cdetails__social{list-style:none;margin:clamp(28px,3.4vw,64px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px clamp(20px,2vw,36px);font:500 var(--fs-small)/1.6 var(--font-sans)}
.cdetails__social a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;position:relative}
.cdetails__social a::after{content:"";position:absolute;left:0;right:16px;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.cdetails__social a:hover::after,.cdetails__social a:focus-visible::after{transform:scaleX(1)}
.footer-tagline{color:var(--tagline-rose)}
@media (max-width:1199.98px){ .contact{grid-template-columns:minmax(0,640px);justify-content:center} }
@media (max-width:809.98px){
  .contact{grid-template-columns:1fr;gap:40px}
  .cform{grid-template-columns:1fr;gap:20px}
  .f-name{order:1}.f-email{order:2}.f-phone{order:3}.f-company{order:4}.f-msg{order:5}.cform__actions{order:6}
  .cform__textarea{height:170px}
  .cform__attach{right:16px;font-size:14px}
  .cform__actions{flex-direction:column-reverse;align-items:center}
  .cform__send{width:172px;height:50px;justify-content:flex-start;padding-left:48px}
  .cform__send i{right:4px;width:42px;height:42px;margin-top:-21px;background:var(--Homepage-White)}
  .cform__send:not([disabled]):hover i,.cform__send:focus-visible i{transform:none;background:var(--Homepage-White)}
  .cform__send i::after{transition:transform .45s var(--spring)}
  .cform__send:not([disabled]):hover i::after,.cform__send:focus-visible i::after{transform:translateX(3px)}
  .cform__send i::after{content:"";position:absolute;inset:0;background:var(--peach-text);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat}
  .cdetails h3{font-size:20px;margin-bottom:28px}
  .cdetails__social{justify-content:space-between}
  .cdetails__social a{text-decoration:underline;text-underline-offset:4px}
  .cdetails__social a::after{display:none}
}
@media (max-width:1199.98px){ .footer-tagline{color:var(--peach-text)} } /* tagline-rose is 3:1, large text only */

/* footer link lists: 5 columns of 3 (Services fills 3, Company fills 2), filled top-to-bottom */
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:32px clamp(40px,5vw,96px)}
.footer-links ul{grid-template-rows:repeat(3,auto);grid-auto-flow:column;grid-auto-columns:max-content;column-gap:clamp(32px,4vw,72px);row-gap:10px}
@media (max-width:809.98px){
  .footer-links{flex-direction:column;align-items:flex-start;width:max-content;max-width:100%;margin-inline:auto}
  .footer-links ul{grid-template-rows:none;grid-auto-flow:row}
}

/* footer link columns are separate lists now; each column sizes on its own */
.fcols{display:flex;align-items:flex-start;gap:clamp(32px,4vw,72px)}
.footer-links .fcols ul{grid-template-rows:none;grid-auto-flow:row;row-gap:10px}
@media (max-width:809.98px){ .fcols{flex-direction:column;gap:10px} }
/* gap between the Services and Company groups: doubled */
.footer-links{column-gap:clamp(80px,10vw,192px)}
/* company details: smaller heading and lines, bigger links */
.cdetails h3{font-size:clamp(18px,1.4vw,27px);margin-bottom:clamp(20px,2.2vw,40px)}
.cdetails__list{font-size:clamp(15px,1vw,19px);gap:clamp(12px,1.3vw,24px)}
.cdetails__social{font-size:clamp(15px,.95vw,18px)}
.cdetails__social .ext{width:12px;height:12px}
@media (max-width:809.98px){ .cdetails h3{font-size:18px} }
/* same space above and below the details list */
.cdetails{--cd-gap:clamp(20px,2.2vw,40px)}
.cdetails h3{margin-bottom:var(--cd-gap)}
.cdetails__social{margin-top:var(--cd-gap)}
@media (max-width:809.98px){ .cdetails{--cd-gap:24px} .cdetails h3{margin-bottom:var(--cd-gap)} }
/* footer links: the row gap moves into the line height, so a wrapped name's second line
   sits exactly as far below as the next link does */
.footer-links .fcols ul{row-gap:0}
.footer-links .fcols li{line-height:calc(1.6em + 10px)}
/* desktop: details column stretches to the form's height; the links sit level with the bottom of the
   message box (the Send row below it is 46px + 24px gap) */
@media (min-width:1200px){
  .contact{align-items:stretch}
  .cdetails{display:flex;flex-direction:column;padding-bottom:70px}
  .cdetails__list{margin-bottom:var(--cd-gap)}
  .cdetails__social{margin-top:auto;padding-bottom:2px}
}

/* ---------- lead paragraphs: indented first line, two close tones driven by scroll ---------- */
.lead{color:var(--Homepage-TextDark)}
.lead.indent{text-indent:clamp(32px,6vw,120px)} /* set by main.js only on paragraphs longer than two lines */
.lead.is-split .w{color:var(--Homepage-TextMedium);transition:color .35s ease}
.lead.is-split .w.on{color:var(--Homepage-TextDark)}
.js .words .w{transition:opacity .6s ease,transform .7s var(--spring),filter .6s ease,color .35s ease}
@media (prefers-reduced-motion:reduce){ .lead.is-split .w{transition:none} }
/* the per-word stagger applies to the entrance only, never to the scroll colour */
.js .words .w{--wd:calc(var(--i) * .025s);transition:opacity .6s ease var(--wd),transform .7s var(--spring) var(--wd),filter .6s ease var(--wd),color .35s ease 0s}
/* text-indent is inherited by inline-block children; only the paragraph's first line is indented */
.lead .w{text-indent:0}

/* lighter second tone, further from the dark one. Desktop leads are large text (25.6px), where 3:1 is
   the contrast minimum; smaller screens keep a tone that passes 4.5:1. */
.lead{--lead-light:#747170}
@media (min-width:1200px){ .lead{--lead-light:#8f8b89} }
.lead.is-split .w{color:var(--lead-light)}
.lead.is-split .w.on{color:var(--Homepage-TextDark)}

/* About: founder photo at half its previous width; the text takes the room */
.split--founder{grid-template-columns:minmax(0,2.5fr) minmax(0,9.5fr)}
.split--founder .lead{margin-bottom:clamp(20px,2vw,36px)}
@media (max-width:809.98px){ .split--founder{grid-template-columns:1fr} .split--founder .photo{max-width:50%} }
/* photo caption: name on one row, role below it */
.photo figcaption{flex-direction:column;justify-content:flex-start;gap:4px;padding:16px 0 0}

/* short leads (two lines or fewer) stay one colour */
.lead.no-tone.is-split .w{color:var(--Homepage-TextDark)}


/* pointer glow, one style for the footer and every .band (same background): a soft glow in the warmest
   stop (--footer-gradient-3) follows the pointer at 45% (softer, lower contrast against the gradient) */
.site-footer::after,.band::after{content:"";position:absolute;pointer-events:none;
  background:radial-gradient(circle 32rem at var(--fx,50%) var(--fy,50%),var(--footer-gradient-3),transparent 70%);opacity:0;transition:opacity .5s ease}
.site-footer.is-lit::after,.band.is-lit::after{opacity:.45}
.ask::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle 12rem at var(--fx,50%) var(--fy,50%),var(--footer-gradient-3),transparent 70%);opacity:0;transition:opacity .5s ease}
.ask.is-lit::after{opacity:0}
.site-footer::after{left:0;right:0;bottom:0;top:max(48px,5.44vw);z-index:0}
.band::after{inset:0;z-index:-1}
.site-footer::before{z-index:1}
.site-footer>*{z-index:1}
@media (prefers-reduced-motion:reduce),(hover:none){ .site-footer::after,.band::after,.ask::after{display:none} }

/* header "Get in touch": gradient fill + three trail dots, ported from the Citizen Café header CTA.
   One dot is lit at a time; the light steps along every 2s (6s / 3 dots) as a cross-fade.
   Hovering holds the cycle and grows the lit dot. */
.btn--cta{gap:10px;border-color:#ed6e66;background:linear-gradient(105deg,#fdac8f 0%,#ed6e66 48%,#ed6b52 100%);color:#fefdfd;transition:filter .2s ease}
.btn--cta:hover{background:linear-gradient(105deg,#fdac8f 0%,#ed6e66 48%,#ed6b52 100%);border-color:#ed6e66;color:#fefdfd;filter:brightness(1.05)}
.cta-dots{display:inline-flex;align-items:center;gap:4.8px}
.cta-dots span{--dot-dim:.35;--dot-lit:.95;--dot-lit-scale:1;width:8px;height:8px;border-radius:50%;background:rgba(254,253,253,.95);opacity:var(--dot-dim);animation:cta-dot-cycle 6s ease-in-out infinite;will-change:opacity,transform}
.cta-dots span:nth-child(2){animation-delay:-4s}
.cta-dots span:nth-child(3){animation-delay:-2s}
@keyframes cta-dot-cycle{0%{opacity:var(--dot-dim);transform:scale(1)}6%{opacity:var(--dot-lit);transform:scale(var(--dot-lit-scale))}27%{opacity:var(--dot-lit);transform:scale(var(--dot-lit-scale))}38%{opacity:var(--dot-dim);transform:scale(1)}100%{opacity:var(--dot-dim);transform:scale(1)}}
.btn--cta:hover .cta-dots span,.btn--cta:focus-visible .cta-dots span{animation-play-state:paused;--dot-lit-scale:1.15}
@media (prefers-reduced-motion:reduce){ .cta-dots span{animation:none!important;opacity:var(--dot-dim)} .cta-dots span:nth-child(1){opacity:var(--dot-lit)} }

/* contact (primary) buttons: soft warm gradient. The left end leans towards yellow-orange but is
   less bright than the Citizen Café CTA (#fdac8f); same coral middle and deep-coral right end. */
:root{--cta-gradient:linear-gradient(105deg,#ef8a68 0%,#ed7a66 45%,#ec6e63 100%)} /* softer: end stops closer together */
.btn:not(.btn--ghost){background:var(--cta-gradient);border-color:#ed6e66;color:#fefdfd}
.btn:not(.btn--ghost):hover,.btn--cta:hover{background:var(--cta-gradient);border-color:#ed6e66;color:#fefdfd;filter:brightness(1.06)}
.btn--cta{background:var(--cta-gradient)}

/* hero tags: grey hairline border (matches the stats separators); text optically centred.
   Poppins' caps already sit on the box centre with even padding, so the old +.12em top offset
   pushed the label down; a hair less on top balances lowercase-heavy labels. */
.chip{padding:calc(3.2px - .03em) 16px calc(3.2px + .03em)}
.chip--filled,.chip--outline{border-color:var(--chip-stroke)} /* no hover state: tags stay static */

/* framework step numbers are real elements now (were ::before counters) so they can take the
   same cursor spotlight as the gradient titles */
.steps li::before{content:none}
.step__num{--title-base:linear-gradient(90deg,var(--title-gradient-start),var(--title-gradient-mid));font:500 clamp(44px,5vw,96px)/.9 var(--font-sans);letter-spacing:-.04em;-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em;justify-self:start}
/* the softer gradient is for regular primary buttons only; the header "Get in touch" (with the dots)
   keeps the previous, stronger warm gradient */
.btn--cta,.btn--cta:hover{background:linear-gradient(105deg,#f39a6b 0%,#ed6e66 52%,#e8605a 100%)}
/* three-dot animation on the header CTA: hidden for now (markup kept, remove this rule to bring it back) */
.cta-dots{display:none}

/* "Why Choose Us" cards: dark variant. Ink ground, white text, inverted icons (icon-*-dark.svg:
   white strokes, ink-filled nodes, same peach focal dot); the peach wash stays as a warm corner glow. */
.feature--dark{background:radial-gradient(120% 90% at 100% 100%,rgba(237,110,102,.22),transparent 60%),var(--Homepage-TextDark);border-color:var(--Homepage-TextDark);color:var(--Homepage-White)}
.feature--dark h3{color:var(--Homepage-White)}
.feature--dark p{color:rgba(254,253,253,.78)}

/* "Why Choose Us" cards: peach variant, built from the footer's warm stops plus the brand peach tint.
   Dark text and the regular (ink) icons keep full contrast. The dark variant (.feature--dark) stays available. */
.feature--peach{background:linear-gradient(211deg,var(--footer-gradient-2) 0%,var(--footer-gradient-3) 100%);border-color:rgba(237,110,102,.25);color:var(--Homepage-TextDark)}
.feature--peach p{color:var(--Homepage-TextDark)}

/* "Why Choose Us" cards: original light design, no hover (they aren't links) */
.feature--static:hover,.js .feature--static.reveal.in:hover{transform:none;border-color:var(--line);z-index:auto}
.js .feature--static.reveal.in:hover{transform:translateY(0)}


/* ---------- cookie banner ---------- */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:start;gap:16px clamp(20px,2.4vw,40px);padding:20px var(--gutter);background:#f5f5f5;border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(0,0,0,.06);text-align:left}
.cookie[hidden]{display:none}
.cookie__logo{height:32px;width:auto;margin-top:2px}
.cookie__title{margin:0 0 10px;font:600 clamp(18px,1.4vw,24px)/1.25 var(--font-sans);color:var(--Homepage-TextDark)}
.cookie__text{margin:0;max-width:92ch;font:300 clamp(14px,.9vw,16px)/1.65 var(--font-sans);color:var(--Homepage-TextMedium)}
.cookie__more{display:inline-block;margin-top:10px;font:500 clamp(14px,.9vw,16px)/1.4 var(--font-sans);color:var(--peach-text);text-decoration:none}
.cookie__more:hover{text-decoration:underline}
.cookie__actions{display:flex;flex-direction:column;gap:12px}
.cookie__btn{min-width:148px;height:46px;padding:0 20px;border:1px solid var(--Homepage-TextDark);border-radius:4px;background:var(--white);color:var(--Homepage-TextDark);font:500 14px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background-color .2s,color .2s}
.cookie__btn:hover{background:var(--Homepage-TextDark);color:var(--white)}
.cookie__btn--allow{background:var(--Homepage-TextDark);color:var(--white)}
.cookie__btn--allow:hover{background:var(--ink-deep)}
.cookie__close{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin:-6px -8px 0 0;border:0;background:none;color:var(--Homepage-TextDark);cursor:pointer;border-radius:50%}
.cookie__close:hover{background:rgba(19,19,19,.06)}
@media (max-width:1199.98px){
  .cookie{grid-template-columns:minmax(0,1fr) auto}
  .cookie__logo{grid-column:1;grid-row:1}
  .cookie__close{grid-column:2;grid-row:1}
  .cookie__body{grid-column:1 / -1}
  .cookie__actions{grid-column:1 / -1;flex-direction:row}
  .cookie__btn{flex:1}
}
@media (max-width:809.98px){ .cookie{padding:16px var(--gutter)} .cookie__text{font-size:13.5px} }
.legal__btn,.link-btn{padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.legal__btn:hover,.link-btn{text-decoration:underline}
.legal-doc h2{font:500 var(--fs-h3)/1.3 var(--font-sans);margin:2em 0 .6em}

/* cookie banner buttons use the brand buttons (.btn primary gradient / .btn--ghost); only width is set here */
.cookie .cookie__btn{min-width:148px;height:var(--control-nav);border-radius:var(--radius-cta);letter-spacing:normal;text-transform:none;font:500 clamp(15px,1.15vw,22px)/.9 var(--font-sans)}

/* cookie banner buttons: the footer "Send" button style (size, colour, font, trailing dot).
   Reject is the same button outlined. */
.send-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:158px;height:46px;padding:0 20px;border:1px solid var(--Homepage-TextDark);border-radius:24px;background:var(--Homepage-White);color:var(--Homepage-TextDark);font:500 clamp(16px,1vw,19.2px)/1 var(--font-sans);cursor:pointer;transition:background-color .3s,color .3s}
.send-btn:hover{background:var(--ink-deep)}
.send-btn i{position:absolute;right:20px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--Homepage-TextMedium)}
.send-btn--outline{background:transparent;color:var(--Homepage-TextDark)}
.send-btn--outline:hover{background:var(--Homepage-TextDark);color:var(--Homepage-White)}
@media (max-width:1199.98px){ .cookie .send-btn{flex:1;width:auto} }

/* cookie banner: both buttons are the "All projects" button (.btn.btn--ghost), same size */
.cookie__actions .btn{min-width:148px}
@media (max-width:1199.98px){ .cookie__actions .btn{flex:1} }

/* filled-ink version of the outlined button (cookie "Allow all") */
.btn--ink{background:var(--Homepage-TextDark);border-color:var(--Homepage-TextDark);color:var(--Homepage-White)}
.btn--ink:hover{background:var(--ink-deep);border-color:var(--ink-deep);color:var(--Homepage-White)}

/* contact form fixes: the textarea is block-level (no inline baseline gap under it), so "Attach file"
   sits inside the box again; the details column is wide enough for the three links on one line */
.cform__textarea{display:block;padding-bottom:48px}
.cform__attach{bottom:14px}
@media (min-width:1200px){
  .contact{grid-template-columns:minmax(0,610px) minmax(0,420px);column-gap:clamp(40px,7vw,150px)}
  .cdetails__social{flex-wrap:nowrap;white-space:nowrap}
}
/* Cookie Policy contact block: regular body text, left-aligned, spaced like the paragraphs above */
.legal-doc .company{align-items:flex-start;text-align:left;gap:4px;margin:1em 0 0;font:300 var(--fs-p)/1.7 var(--font-sans)}

/* HTML site map page */
.sitemap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px clamp(24px,3vw,56px)}
.sitemap__h{font:500 var(--fs-bullet)/1.4 var(--font-sans);margin:0 0 16px}
.sitemap__list{list-style:none;margin:0;padding:0;display:grid;gap:10px;font:300 var(--fs-p)/1.5 var(--font-sans)}
.sitemap__list a{text-decoration:none}.sitemap__list a:hover{text-decoration:underline}
@media (max-width:1199.98px){ .sitemap{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:809.98px){ .sitemap{grid-template-columns:1fr} }


/* =====================================================================
   Accessibility pass (IS 5568 / WCAG 2.1 AA), branch alt/peachtouch-a11y.
   Contrast: normal text 4.5:1, large text (24px+, or 18.66px+ bold) and UI parts 3:1.
   ===================================================================== */
/* primary buttons: white text needs >= 4.5:1, so the gradient runs through deeper corals
   (#c0533f 4.55, #b9483f 5.09, #b44641 5.3 against white). Hover darkens instead of lightening. */
:root{--cta-gradient:linear-gradient(105deg,#c0533f 0%,#b9483f 52%,#b44641 100%)}
.btn:not(.btn--ghost),.btn--cta,.btn--cta:hover{background:var(--cta-gradient);border-color:#b9483f}
.btn:not(.btn--ghost):hover,.btn--cta:hover{filter:brightness(.92)}
/* hero tags: coral label text -> text-safe coral (5.09:1); filled-tag hover keeps white text on a 5:1 fill */
.chip--outline{color:var(--peach-text)}
/* gradient section titles + step numbers (large text, 3:1): every stop now passes on the page white */
:root{--title-gradient-start:#dc5b4f;--title-gradient-mid:#d86a45;--title-gradient-end:#d5703f}
/* footer "Get in Touch" on the footer gradient (3:1 against its warmest stop #f3d0b7) */
.footer-title{--title-base:linear-gradient(to right,#c2583f 40%,#b9483f 100%)}
/* keyboard focus is always visible, including on the brand buttons and the cookie banner */
.btn:focus-visible,.pill:focus-visible,.chip:focus-visible,.cform__send:focus-visible,.send-btn:focus-visible,.cookie__close:focus-visible,.burger:focus-visible{outline:2px solid var(--Homepage-TextDark);outline-offset:3px}
/* text-safe coral restored for the accessible build: the base tokens set --peach-text to the brand coral
   (#ED6E66, 2.94:1), which fails 4.5:1 for every small coral text that uses it (hero outline tags,
   "Learn more" links, eyebrows, the form's error message, the cookie "Show details" link …) */
:root{--peach-text:#b9483f}
.chip--outline{color:#b9483f}

/* ---------- brand colour: #d36349 (owner's choice, 2026-10-14) ----------
   3.66:1 on the page white: fine for large text, graphics, borders and fills; not for small text.
   Small coral text keeps --peach-text (#b9483f, 5.09:1). */
:root{
  --brand:#d36349; --Homepage-Peach:#d36349; --peach-tint:rgba(211,99,73,.15);
  --title-gradient-start:#d36349;
  /* primary buttons: a soft gradient around the brand colour with dark text (5.0:1 at the brand stop,
     4.61-5.74 across the gradient). White text on this colour would be 3.66:1, below the 4.5:1 minimum. */
  --cta-gradient:linear-gradient(105deg,#dc7055 0%,#d36349 50%,#cd5c44 100%);
}
.btn:not(.btn--ghost),.btn--cta,.btn--cta:hover{background:var(--cta-gradient);border-color:#d36349;color:var(--Homepage-TextDark)}
.btn:not(.btn--ghost):hover,.btn--cta:hover{filter:none;background:#d36349;color:var(--Homepage-TextDark)}
.cta-dots span{background:var(--Homepage-TextDark)}
/* primary buttons: same gradient as the regular version (#ef8a68 → #ec6e63). Text stays dark (#131313),
   6.3-7.6:1 across the gradient; white text on these stops is 2.4-3.0:1 and fails 4.5:1. */
:root{--cta-gradient:linear-gradient(105deg,#ef8a68 0%,#ed7a66 45%,#ec6e63 100%)}
.btn:not(.btn--ghost),.btn--cta,.btn--cta:hover{background:var(--cta-gradient);border-color:#ec6e63;color:var(--Homepage-TextDark)}
.btn:not(.btn--ghost):hover,.btn--cta:hover{background:var(--cta-gradient);filter:brightness(1.06);color:var(--Homepage-TextDark)}

/* ---------- brand colour: #D03E0F (owner's choice, replaces #d36349) ----------
   4.72:1 on the page white, so it works for small text too, and white text on it passes 4.5:1. */
:root{
  --brand:#d03e0f; --Homepage-Peach:#d03e0f; --peach-text:#d03e0f; --peach-tint:rgba(208,62,15,.12);
  /* gradient titles + step numbers (large text, 3:1): brand → warmer orange, every stop >= 3.06:1 */
  --title-gradient-start:#d03e0f; --title-gradient-mid:#dc5a2e; --title-gradient-end:#e2733f;
  /* primary buttons: white text on a gradient that never gets lighter than the brand (4.72-5.28:1) */
  --cta-gradient:linear-gradient(105deg,#d03e0f 0%,#c93a0d 55%,#c4380c 100%);
}
.btn:not(.btn--ghost),.btn--cta,.btn--cta:hover{background:var(--cta-gradient);border-color:#d03e0f;color:#fefdfd}
.btn:not(.btn--ghost):hover,.btn--cta:hover{background:var(--cta-gradient);filter:brightness(.93);color:#fefdfd}
.cta-dots span{background:rgba(254,253,253,.95)}
.chip--outline{color:var(--peach-text)}
/* footer "Get in Touch" on the footer gradient: 3.32:1 against its warmest stop */
.footer-title{--title-base:linear-gradient(to right,#d03e0f 40%,#c93a0d 100%)}

/* header "Get in touch": white button, brand-colour text (4.72:1), 4px gradient outline #E37F70 → #ECA067.
   The gradient border is a second background clipped to the border box under a white padding box. */
.btn--cta,.btn--cta:hover{
  border:4px solid transparent;color:#d03e0f;filter:none;
  background:linear-gradient(#fefdfd,#fefdfd) padding-box,linear-gradient(90deg,#e37f70,#eca067) border-box;
}
/* hover keeps the white fill (a tinted fill would drop the text below 4.5:1) and deepens the text */
.btn--cta:hover{color:#a8320b}
.btn--cta .cta-dots span{background:#d03e0f}

/* the rules above lost to ".btn:not(.btn--ghost)" (higher specificity), so the header CTA still showed the
   filled gradient. Same design, scoped to the header so it always wins: */
.site-header .btn.btn--cta,.site-header .btn.btn--cta:hover{
  border:4px solid transparent;color:#d03e0f;filter:none;
  background:linear-gradient(#fefdfd,#fefdfd) padding-box,linear-gradient(90deg,#e37f70,#eca067) border-box;
}
.site-header .btn.btn--cta:hover{color:#a8320b}

/* trial (owner, 2026-10-14): filled gradient #D0460F → #ED691C with white text, header "Get in Touch"
   and every primary button. Contrast for white text: 4.53 at the left stop, 3.12 at the right stop
   (normal-size button text needs 4.5:1), so the lighter half does not meet AA yet. */
:root{--cta-gradient:linear-gradient(90deg,#d0460f 0%,#ed691c 100%)}
.btn:not(.btn--ghost),.site-header .btn.btn--cta,.site-header .btn.btn--cta:hover{border:1px solid transparent;background:var(--cta-gradient) border-box;color:#fefdfd;filter:none}
.btn:not(.btn--ghost):hover,.site-header .btn.btn--cta:hover{background:var(--cta-gradient) border-box;color:#fefdfd;filter:brightness(.94)}
/* nav pill hover fill: half the previous tint (brand at 6% instead of 12%), so it reads whiter */
.pill:hover,.pill[aria-expanded=true]{background:rgba(208,62,15,.06)}
/* primary-button hover: brand black (#131313) at 10% laid over the gradient (owner, 2026-10-14; was 70%) */
.btn:not(.btn--ghost):hover,.site-header .btn.btn--cta:hover{
  background:linear-gradient(rgba(19,19,19,.1),rgba(19,19,19,.1)) border-box,var(--cta-gradient) border-box;
  color:#fefdfd;filter:none;transition:background .3s ease
}
/* primary-button hover: brand black (#131313) at 10% laid over the gradient */
.btn:not(.btn--ghost):hover,.site-header .btn.btn--cta:hover{background:linear-gradient(rgba(19,19,19,.1),rgba(19,19,19,.1)) border-box,var(--cta-gradient) border-box;filter:none;color:#fefdfd}
/* gradient section titles + step numbers: owner's stops, 0% #D9653F → 100% #FB895B */
:root{--title-gradient-start:#d9653f;--title-gradient-mid:#ea774d;--title-gradient-end:#fb895b}
.title{--title-base:linear-gradient(90deg,#d9653f 0%,#fb895b 100%)}
.step__num{--title-base:linear-gradient(90deg,#d9653f 0%,#fb895b 100%)}
/* accordion toggle: filled peach circle (#EC8F65) with a white plus; rotates to a cross when open */
.accordion .plus{width:36px;height:36px;border-radius:50%;background:#ec8f65}
.accordion .plus::before,.accordion .plus::after{background:#fff;border-radius:2px}
.accordion .plus::before{left:11.25px;right:11.25px;top:16.75px;height:2.5px}
.accordion .plus::after{top:11.25px;bottom:11.25px;left:16.75px;width:2.5px}
@media (max-width:809.98px){ .accordion .plus{width:32px;height:32px} .accordion .plus::before{left:10px;right:10px;top:14.75px} .accordion .plus::after{top:10px;bottom:10px;left:14.75px} }
/* feature cards: gradient reversed, the peach wash now sits top-right and the bottom-left corner is the lightest */
.feature{background:linear-gradient(31deg,transparent 56%,var(--card-wash) 85%)}
/* section-label dot: same design as the accordion toggle, peach circle (#EC8F65) with a white plus */
.label__dot{background:#ec8f65}
.label__dot::before,.label__dot::after{background:#fff;border-radius:1px}
/* accordion toggle + section-label dot: the title gradient (#D9653F → #FB895B) instead of a flat colour */
.accordion .plus,.label__dot{background:linear-gradient(90deg,#d9653f 0%,#fb895b 100%)}
/* accordion toggle + section-label dot: solid brand colour (white plus 4.72:1, circle on page 4.72:1) */
.accordion .plus,.label__dot{background:#d03e0f}
/* plus marks sit exactly on the circle's centre: whole-pixel bars (2px) anchored to 50%/50%,
   so there's no sub-pixel rounding that nudges the plus off-centre */
.accordion .plus::before,.accordion .plus::after,.label__dot::before,.label__dot::after{left:50%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%)}
.accordion .plus::before{width:14px;height:2px}.accordion .plus::after{width:2px;height:14px}
.label__dot::before{width:8px;height:2px}.label__dot::after{width:2px;height:8px}
@media (max-width:809.98px){ .accordion .plus::before{width:12px}.accordion .plus::after{height:12px} }
.label__dot{width:16px;height:16px} /* even size, so the 2px bars land on whole pixels */
/* hero tags: first row (services) brand text on white (4.72:1); rows below muted grey (#6a6867, 5.6:1),
   the same grey as the scroll-ink words */
.chip--filled{background:var(--white);color:var(--Homepage-Peach)}
.chip--outline{color:var(--Homepage-TextMedium)}
/* primary buttons + header "Get in touch": 1px black outline, kept on hover */
.btn:not(.btn--ghost),.btn:not(.btn--ghost):hover,.site-header .btn.btn--cta,.site-header .btn.btn--cta:hover{border:1px solid #000}
/* double outline like the logo: the 1px black border above, then a 3px white ring inside it
   (inset shadow, so the button keeps its size) */
.btn:not(.btn--ghost),.btn:not(.btn--ghost):hover,.site-header .btn.btn--cta,.site-header .btn.btn--cta:hover{box-shadow:inset 0 0 0 3px #fefdfd}
/* "Start your project" (primary button in a button row) grows by its double outline, 4px on every side
   (1px black border + 3px white ring), so its inner gradient area is the size of the original button;
   the ghost button beside it keeps its original size and sits centred on the row */
.cta-row{align-items:center}
.cta-row .btn:not(.btn--ghost){height:calc(var(--control-nav) + 8px);padding:0 26.4px;border-radius:calc(var(--radius-cta) + 4px)}
.site-header .btn.btn--cta{height:calc(var(--control-nav) + 4px);padding:0 24.4px;border-radius:calc(var(--radius-cta) + 2px)} /* header Get in Touch: halfway between the base .btn and Start your project (owner, 2026-10-14) */
/* accordion toggle + section-label dot: lighter orange #ED691C (owner, 2026-10-14) instead of the brand #d03e0f */
.accordion .plus,.label__dot{background:#ed691c}
/* home hero lead typewriter (main.js): letters fade in one by one; a 2px caret in the text colour follows
   the last letter (drawn as a pseudo-element, so it takes no space), blinks three times at the end, then goes */
.lead.typing .c{opacity:0}
.lead.typing .c.in{opacity:1}
.lead .c.cur{position:relative}
.lead .c.cur::after{content:"";position:absolute;right:-3px;top:.12em;bottom:.08em;width:2px;background:var(--Homepage-TextDark)}
.lead.typed .c.cur::after{animation:caret-blink .8s steps(1) 3}
@keyframes caret-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .lead.typing .c{opacity:1} .lead .c.cur::after{display:none} }
/* primary-button hover (owner, 2026-10-14): the whole button fades to solid brand #d03e0f instead of a dark overlay.
   A gradient can't transition, so the fill is a large inset shadow under the 3px white ring that fades from transparent */
.btn:not(.btn--ghost),.site-header .btn.btn--cta{box-shadow:inset 0 0 0 3px #fefdfd,inset 0 0 0 999px rgba(208,62,15,0);transition:box-shadow .3s ease}
.btn:not(.btn--ghost):hover,.site-header .btn.btn--cta:hover{background:var(--cta-gradient) border-box;box-shadow:inset 0 0 0 3px #fefdfd,inset 0 0 0 999px #d03e0f;color:#fefdfd;filter:none}
@media (prefers-reduced-motion:reduce){.btn:not(.btn--ghost),.site-header .btn.btn--cta{transition:none}}
/* home hero lead: all text dark (no two-tone scroll ink), it is typed in instead */
.page-hero--home .lead.is-split .w,.page-hero--home .lead.is-split .w.on{color:var(--Homepage-TextDark)}
/* peach skin on primary buttons (owner, 2026-10-14), after a photo of a peach: diagonal crimson streaks,
   a few warm yellow patches and sparse, faint pale fuzz specks, laid over the gradient (normal blend)
   inside the white ring. z-index:-1 inside the button's own stacking context keeps it above the fill
   (gradient, or the solid hover colour) and under the label, so the white text is never tinted. */
.btn:not(.btn--ghost),.site-header .btn.btn--cta{position:relative;isolation:isolate}
.btn:not(.btn--ghost)::after,.site-header .btn.btn--cta::after{content:"";position:absolute;inset:3px;border-radius:inherit;pointer-events:none;z-index:-1;opacity:.3;mix-blend-mode:normal;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='xMidYMid slice'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011 .085' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .69 0 0 0 0 .14 0 0 0 0 .2 3.2 0 0 0 -1.45'/%3E%3C/filter%3E%3Cfilter id='y' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .05' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .97 0 0 0 0 .66 0 0 0 0 .25 2.4 0 0 0 -1.3'/%3E%3C/filter%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='1' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .99 0 0 0 0 .88 0 0 0 0 .66 7 0 0 0 -4.5'/%3E%3C/filter%3E%3Cg transform='rotate(-24 200 60)'%3E%3Crect x='-150' y='-150' width='700' height='420' filter='url(%23y)' opacity='.35'/%3E%3Crect x='-150' y='-150' width='700' height='420' filter='url(%23s)' opacity='.7'/%3E%3C/g%3E%3Crect width='400' height='120' filter='url(%23f)' opacity='.25'/%3E%3C/svg%3E") center/cover no-repeat}
.btn:not(.btn--ghost) .roll,.site-header .btn.btn--cta .roll{z-index:1}
/* typewriter caret: coral #EA7058 (owner) */
.lead .c.cur::after{background:#ea7058}
/* peach skin: hidden on hover (owner), fading out with the solid hover fill */
.btn:not(.btn--ghost)::after,.site-header .btn.btn--cta::after{transition:opacity .3s ease}
.btn:not(.btn--ghost):hover::after,.site-header .btn.btn--cta:hover::after{opacity:0}
@media (prefers-reduced-motion:reduce){.btn:not(.btn--ghost)::after,.site-header .btn.btn--cta::after{transition:none}}
/* comparison header strip (owner, 2026-10-14): brand white to #F9D1BA, one even blend across both header
   cells. Each cell paints its own half (Safari restarts a row background in every cell, so it can't sit on
   the row); the seam colour is the oklab midpoint, so the two halves meet without a step. */
thead{--cmp-a:var(--Homepage-White);--cmp-b:#f9d1ba;--cmp-seam:#fbe7dc;--cmp-seam:color-mix(in oklab,var(--cmp-a),var(--cmp-b))}
thead td+th{background:linear-gradient(90deg,var(--cmp-a),var(--cmp-seam));background:linear-gradient(90deg in oklab,var(--cmp-a),var(--cmp-seam))}
thead th:last-child{background:linear-gradient(90deg,var(--cmp-seam),var(--cmp-b));background:linear-gradient(90deg in oklab,var(--cmp-seam),var(--cmp-b))}
/* comparison table body (home page, table.cmp; owner, 2026-10-14):
   - rows twice as tall: padding grows so 2 x padding + one line (1.6em) doubles (2p + .8em per side)
   - styles swapped: row labels in the light body weight, cell content in the medium weight
   - the PeachTouch column in brand colour (#d03e0f, 4.72:1 on the page white). The "PeachTouch" header
     stays dark: brand on the header's peach end is 2.68:1, below 4.5:1 */
.cmp tbody th,.cmp tbody td{padding-block:calc(28.8px + .8em)}
.cmp tbody th{font-weight:500;color:var(--Homepage-TextMedium)} /* row labels: same weight as the cells, tag grey #6a6867 (5.46:1) */
.cmp tbody td{font-weight:500}
.cmp tbody td:last-child{color:var(--Homepage-Peach)}
/* comparison table: no outer frame (owner); row dividers stay */
.table-wrap--cmp{border:0}
/* comparison table header (owner, 2026-10-14): no gradient strip; column titles larger (h3 size),
   "PeachTouch" in brand colour (4.72:1 on the page white, and 3:1 is enough at this size anyway) */
.cmp thead td+th,.cmp thead th:last-child{background:none;border-bottom-left-radius:0}
.cmp thead th{font-size:var(--fs-h3);line-height:1.3}
.cmp thead th:last-child{color:var(--Homepage-Peach)}
/* home (owner, 2026-10-14, after rubicon-creo.com): the first slide is set apart. The hero stays pinned
   while everything after it (.home-over) slides up over it as one sheet with rounded top corners and a
   soft shadow. --hero-top comes from main.js (0, or negative when the hero is taller than the screen). */
.page-hero--home{position:sticky;top:var(--hero-top,0);z-index:0}
.home-over{position:relative;z-index:1;background:var(--Homepage-White);border-radius:var(--radius-band) var(--radius-band) 0 0;
  box-shadow:0 -18px 48px rgba(19,19,19,.08),0 -1px 0 rgba(19,19,19,.06);padding-top:clamp(24px,4vw,64px)}
@media (max-width:809.98px){ .home-over{border-radius:var(--radius-panel) var(--radius-panel) 0 0} }
/* glass (owner): the first 660px of the sheet is frosted: translucent white that turns solid by 660px, with the pinned
   hero blurring through it. The blur layer sits under the content (z-index:-1 inside the sheet's own stacking context)
   and fades out with a mask so there is no hard edge. */
.home-over{background:linear-gradient(to bottom,rgba(255,255,255,.7) 0,rgba(255,255,255,.7) 80px,var(--Homepage-White) 660px)}
.home-over::before{content:"";position:absolute;inset:0 0 auto 0;height:660px;z-index:-1;pointer-events:none;border-radius:inherit;
  -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 55%,transparent 100%)}
@media (prefers-reduced-transparency:reduce){ .home-over{background:var(--Homepage-White)} .home-over::before{display:none} }
html.a11y .home-over{background:var(--Homepage-White)}
html.a11y .home-over::before{display:none}
/* pinned home hero must fit one screen, so it pins at once and never scrolls on its own (owner).
   The fixed gaps (floors) now follow the screen height instead of its width, and the H1 is capped by
   height (only bites on wide-but-short windows). Still min-height, never clipped: if it can't fit,
   main.js pins it by its bottom edge. */
@media (min-width:810px){
  .page-hero--home{padding-top:calc(var(--nav-h) + clamp(12px,3.4vh,88px));padding-bottom:min(4vw,4.4vh)}
  .page-hero--home>.chips--first{padding-top:clamp(14px,2.8vh,51px)}
  .page-hero--home>.chips--first+.chips{margin-top:min(20px,1.6vh)!important}
  .page-hero--home .display{font-size:min(var(--fs-display),9vh)}
  .page-hero--home .divider{margin-top:clamp(20px,3.4vh,48px)}
  .page-hero--home .lead{margin-top:clamp(12px,2vh,32px)}
  .page-hero--home .lead{max-width:68ch} /* a little wider than the 62ch default so "automations," stays on the line above instead of standing alone */
  .page-hero--home .cta-row{margin-top:clamp(14px,2.6vh,38.4px)}
}
/* clean first slide (owner, 2026-10-14): the tags moved out of the hero into the first section of the sheet
   that slides over it ("What we can do for you"); the hero's text block now sits centred on the screen */
.page-hero--home>.hero-main{margin-block:auto}
/* typing pause/play (main.js): bottom-right of the home hero, 44px round button, dark icon on white
   (icon 17:1, outline 17:1 against the page), visible keyboard focus; fades out when the typing ends */
.page-hero--home{position:sticky}
.type-toggle{position:absolute;right:var(--gutter);bottom:max(16px,4vh);z-index:2;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border:1px solid var(--Homepage-TextDark);border-radius:50%;background:var(--Homepage-White);color:var(--Homepage-TextDark);
  cursor:pointer;transition:opacity .3s ease}
.type-toggle svg{fill:currentColor}
.type-toggle:hover{background:var(--Homepage-TextDark);color:var(--Homepage-White)}
.type-toggle:focus-visible{outline:2px solid var(--Homepage-TextDark);outline-offset:3px}
.type-toggle.is-gone{opacity:0;pointer-events:none}
.type-toggle.is-off{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility 0s .3s} /* typing scrolled out of view or covered */
.lead[tabindex="-1"]:focus{outline:none}
/* typing pause/play: fixed to the screen's bottom-right corner (owner). z-index 45 keeps it above the
   bottom blur strip (.pblur, 40) and under the header (50), menu (55) and cookie banner (70); while the
   cookie banner is open, main.js lifts the button above it (--tt-lift). */
/* (owner, 2026-10-14) the accessibility button now holds the corner; the typing button sits just to its left
   (16px corner + 48px a11y button + 12px gap), vertically centred on it (44px vs 48px: +2px) */
.type-toggle{position:fixed;right:76px;bottom:calc(18px + var(--tt-lift,0px));z-index:45}
/* typing pause/play: no outline ring (owner); the icon itself (17:1) identifies the control */
.type-toggle{border:0}

/* ---------- accessible mode (html.a11y; toggle in main.js) ----------
   No motion at all, everything visible at once, all text in full-contrast colours,
   and the primary buttons ("Start your project", "Get in touch") in solid brand colour (white text 4.72:1). */
html:not(.js) [data-a11y-toggle]{display:none}
/* the toggle: fixed to the screen's bottom-right corner (owner, 2026-10-14; the typing button sits to its left), the universal-access figure icon (white ring and figure
   on a black disc, 21:1), 48px round. z-index 45 like the typing button: above the bottom blur strip,
   under the header, menu and cookie banner; main.js lifts it above the banner while that is open (--a11y-lift). */
.a11y-fab{position:fixed;right:16px;bottom:calc(16px + var(--a11y-lift,0px));z-index:45;display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;padding:0;border:0;border-radius:50%;background:#000;color:#fff;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.18)}
.a11y-fab:hover{background:#333}
.a11y-fab:focus-visible{outline:2px solid var(--Homepage-TextDark);outline-offset:3px}
.a11y-fab[aria-pressed=true]{background:#d03e0f}
html.a11y{scroll-behavior:auto}
html.a11y *,html.a11y *::before,html.a11y *::after{animation:none!important;transition:none!important}
html.a11y .reveal,html.a11y .words .w,html.a11y [data-appear],
html.a11y .card,html.a11y .project,html.a11y .feature,html.a11y .process li,html.a11y .steps li,
html.a11y .card:hover,html.a11y .project:hover,html.a11y .feature:hover,html.a11y .process li:hover,html.a11y .steps li:hover{opacity:1!important;transform:none!important;filter:none!important}
html.a11y .accordion .line::before{transform:none}
html.a11y .pblur,html.a11y .site-footer::after,html.a11y .band::after,html.a11y .ask::after{display:none}
/* no pinned first slide and no sheet sliding over it: the page scrolls as one */
html.a11y .page-hero--home{position:relative;top:auto}
/* everything in the lighter orange #ED691C (plus circles, section-label dots, nav dot, page-transition curtain)
   uses the brand #d03e0f instead (owner, 2026-10-14); the buttons are already solid brand above */
html.a11y .accordion .plus,html.a11y .label__dot,
html.a11y .pill[aria-current=page]::after,html.a11y .pill[aria-expanded=true]::after,html.a11y .pill:hover::after{background:#d03e0f}
html.a11y .ptc{--ptc-bg:#d03e0f}
/* section titles, the footer title and the framework step numbers: solid brand colour, no gradient or hover spotlight
   (owner, 2026-10-14 / step numbers 2026-10-15; 4.72:1 on white) */
html.a11y .title,html.a11y .footer-title,html.a11y .step__num{background:none!important;color:#d03e0f!important}
/* footer tagline ("Let's make your vision bloom!"): black instead of rose (owner, 2026-10-14) */
html.a11y .footer-tagline{color:#000!important}
/* paragraphs: no two-tone scroll ink, all words in the dark text colour */
html.a11y .lead.is-split .w{color:var(--Homepage-TextDark)!important}
/* primary buttons: solid brand, no texture, darker on hover */
html.a11y .btn:not(.btn--ghost),html.a11y .site-header .btn.btn--cta{background:#d03e0f!important;box-shadow:inset 0 0 0 3px #fefdfd!important;color:#fefdfd!important;filter:none!important}
html.a11y .btn:not(.btn--ghost):hover,html.a11y .site-header .btn.btn--cta:hover{background:#b5360d!important;box-shadow:inset 0 0 0 3px #fefdfd!important}
html.a11y .btn:not(.btn--ghost)::after,html.a11y .site-header .btn.btn--cta::after{display:none}
/* current-page / hover nav dot: the same solid brand colour as the plus circles, set explicitly */
.pill[aria-current=page]::after,.pill[aria-expanded=true]::after,.pill:hover::after{background:#d03e0f}
/* current-page / hover nav dot: the same orange as the plus circles (#ED691C) */
.pill[aria-current=page]::after,.pill[aria-expanded=true]::after,.pill:hover::after{background:#ed691c}

/* ---------- page transition (Fabrica behavior spec §6.7): orange curtain with the logo between pages ----------
   Leave: the curtain rises from the bottom while the page dims (main.js). Arrive: the <head> script
   adds html.pt-arrive so the curtain already covers the first paint; main.js then lifts it out the top.
   ptc-safe lifts it after 5s if main.js never runs (the normal arrive ends ~3.2s after the old page left), so a page can't stay covered.
   The curtain wears the primary button's gradient and peach-skin texture (below); --ptc-bg #ED691C is only the
   fallback colour. The dim behind stays dark.
   The logo and the destination page's quote ride inside the curtain, centred, in white (the coral peach would vanish on orange). */
.ptc{--ptc-bg:#ed691c;position:fixed;inset:0;z-index:200;pointer-events:none}
.ptc.is-busy{pointer-events:auto}
.ptc__dim,.ptc__cur{position:absolute;inset:0}
.ptc__dim{background:var(--ink-deep);opacity:0}
.ptc__cur{background:var(--ptc-bg);background:var(--cta-gradient,linear-gradient(90deg,#d0460f 0%,#ed691c 100%));isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(28px,3.4vw,56px);padding:0 var(--gutter);text-align:center;color:#fff;transform:translateY(100%)}
/* curtain = the primary button's surface (owner, 2026-10-14): the same --cta-gradient plus the same peach-skin
   texture at .3. The skin is the button's three filters on a 1600x1000 canvas drawn at 1584x990px (grown only on
   bigger screens), with every baseFrequency x2.25 so the streaks keep the button's density (the button draws a unit
   at ~0.44px). A bigger canvas with the original frequencies is too large a filter area and the streaks drop out.
   Made more random than the button on request (owner, 2026-10-14): the crimson streaks are bent by a slow noise
   (feDisplacementMap) and masked into large patches, and the yellow layer has its own patch mask and a -11deg angle. */
.ptc__cur::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.3;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02475 .1913' numOctaves='3' seed='4' result='n'/%3E%3CfeColorMatrix in='n' values='0 0 0 0 .69 0 0 0 0 .14 0 0 0 0 .2 3.2 0 0 0 -1.45' result='c'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003' numOctaves='2' seed='31' result='w'/%3E%3CfeDisplacementMap in='c' in2='w' scale='90' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0022 .0035' numOctaves='2' seed='23' result='p'/%3E%3CfeColorMatrix in='p' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.8 0 0 0 -1' result='m'/%3E%3CfeComposite in='d' in2='m' operator='in'/%3E%3C/filter%3E%3Cfilter id='y' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045 .1125' numOctaves='2' seed='11' result='n'/%3E%3CfeColorMatrix in='n' values='0 0 0 0 .97 0 0 0 0 .66 0 0 0 0 .25 2.4 0 0 0 -1.3' result='c'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0028 .0019' numOctaves='2' seed='57' result='p'/%3E%3CfeColorMatrix in='p' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.6 0 0 0 -.8' result='m'/%3E%3CfeComposite in='c' in2='m' operator='in'/%3E%3C/filter%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.238' numOctaves='1' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .99 0 0 0 0 .88 0 0 0 0 .66 7 0 0 0 -4.5'/%3E%3C/filter%3E%3Cg transform='rotate(-11 800 500)'%3E%3Crect x='-211' y='-273' width='2021' height='1547' filter='url(%23y)' opacity='.35'/%3E%3C/g%3E%3Cg transform='rotate(-24 800 500)'%3E%3Crect x='-264' y='-412' width='2128' height='1824' filter='url(%23s)' opacity='.7'/%3E%3C/g%3E%3Crect width='1600' height='1000' filter='url(%23f)' opacity='.25'/%3E%3C/svg%3E") center/max(1584px,100%) max(990px,100%) no-repeat}
.ptc__logo{width:clamp(150px,15vw,260px);height:auto;filter:brightness(0) invert(1)}
/* quote: white on #ED691C is ~3:1, so it stays large (>= 24px) */
.ptc__q{margin:0;width:100%;display:flex;flex-direction:column;align-items:center}
.ptc__q[hidden]{display:none}
.ptc__q blockquote{margin:0;font:400 clamp(24px,2.5vw,46px)/1.3 var(--font-sans);letter-spacing:-.01em;text-wrap:balance;max-width:21em}
.ptc__q blockquote::before{content:"\201C"}.ptc__q blockquote::after{content:"\201D"}
.ptc__q figcaption{margin-top:clamp(14px,1.3vw,22px);font:500 clamp(13px,.95vw,17px)/1.4 var(--font-sans);letter-spacing:.08em;text-transform:uppercase}
.ptc__q figcaption::before{content:"\2014\00a0"}
.pt-arrive .ptc__dim{opacity:.6;animation:ptc-safe-dim .78s 5s ease-out forwards}
/* while it covers the arriving page the curtain catches clicks (main.js skips the transition on pointerdown),
   so a click on the orange can't hit a hidden link underneath; it moves off-screen with the curtain */
.pt-arrive .ptc__cur{pointer-events:auto;transform:none;animation:ptc-safe .72s 5s cubic-bezier(.16,1,.3,1) forwards}
/* Skip cursor (owner, 2026-10-14): main.js and the <head> script put html.pt-skip on the page 1s after the click
   (the curtain covers the screen by then) and take it off as soon as the lifting curtain clears the pointer. The real cursor
   is hidden and the ring below is drawn by the page, because browsers only redraw a cursor after the mouse moves. */
html.pt-skip,html.pt-skip *{cursor:none!important}
/* the Skip ring: a white ring with the word, drawn by the page at the pointer's last known position (main.js moves it) */
.ptc__ring{position:fixed;left:0;top:0;width:72px;height:72px;border-radius:50%;display:none;align-items:center;justify-content:center;
  box-sizing:border-box;border:2px solid #fefdfd;background:#a8320b;color:#fefdfd;font:500 15px/1 var(--font-sans);letter-spacing:.03em;
  pointer-events:none;will-change:transform}
html.pt-skip .ptc__ring{display:flex}
/* the three waves sent out when Skip is clicked (main.js ptWaves): 1px white outlines the size of the ring, kept soft (owner) */
.ptc__wave{position:absolute;width:72px;height:72px;box-sizing:border-box;border:1px solid rgba(254,253,253,.9);border-radius:50%;opacity:0;pointer-events:none;filter:blur(.4px)}
@keyframes ptc-safe{to{transform:translateY(-100%)}}
@keyframes ptc-safe-dim{to{opacity:0}}
@media (prefers-reduced-motion:reduce){ .ptc{display:none} }

/* home hero AI search field (owner, 2026-10-15): replaces "Start your project". Same height and radius as that
   button; double outline like it, but black 1px outside and a 1px brand ring inside (inset shadow, no size change) */
.ask{display:flex;align-items:center;gap:10px;flex:0 1 auto;min-width:0;width:clamp(280px,26vw,460px);height:calc(var(--control-nav) + 8px);padding:0 6px 0 20px;box-sizing:border-box;
  border:1px solid #000;border-radius:calc(var(--radius-cta) + 4px);position:relative;isolation:isolate;overflow:hidden;background:var(--Homepage-White);color:var(--Homepage-TextDark);transition:width .12s ease}
/* white 3px middle band with a 1px brand ring inside it, drawn above the glow so the brand colour is never tinted */
.ask::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border:3px solid #fefdfd;border-radius:inherit;box-shadow:inset 0 0 0 1px #d03e0f}
.ask__spark{flex:none;color:#d03e0f}
.ask__input{flex:1;min-width:0;box-sizing:border-box;height:100%;padding:0;border:0;background:transparent;color:inherit;font:500 clamp(12px,0.92vw,17.6px)/1.2 var(--font-sans);outline:0;-webkit-appearance:none;appearance:none;white-space:nowrap;text-overflow:clip} /* one line, always: past the width the text scrolls, so the end stays in view and the start slides out on the left */
.ask__input::placeholder{color:#d03e0f;opacity:1}
.ask__input::-webkit-search-cancel-button{display:none}
.ask__send{flex:none;display:grid;place-items:center;width:calc(var(--control-nav) - 6px);height:calc(var(--control-nav) - 6px);border:0;border-radius:50%;
  background:var(--cta-gradient);color:#fefdfd;cursor:pointer;transition:filter .2s ease}
.ask__send:hover{filter:brightness(.92)}
.cta-row:has(.ask){flex-wrap:nowrap;align-items:center} /* the field never drops to its own row */
.cta-row:has(.ask)>.btn{flex:none}
.ask:focus-within{outline:0;border-color:#d03e0f;box-shadow:0 0 0 2px #d03e0f} /* focus: the outer border thickens (1px + 2px) and turns brand colour */
.ask__send:focus-visible{outline:2px solid #fefdfd;outline-offset:-4px}
@media (max-width:540px){ .ask{width:auto;flex:1 1 0} } /* phones: the field takes whatever the row has left beside the button */
/* footer "Get in Touch": same gradient as the section titles ("Accelerate Your Business"), #D9653F → #FB895B (owner, 2026-10-15) */
.footer-title{--title-base:linear-gradient(90deg,#d9653f 0%,#fb895b 100%)}

/* footer legal bar: full-width brand black strip; its content sits in the centred content container (same width as .wrap), copyright left, links right */
.legal{z-index:2;margin:clamp(25.6px,2.4vw,48px) calc(-1*var(--gutter)) 0;padding:25.6px max(var(--gutter),calc(50% + 2*var(--gutter) - var(--container,1216px)/2));border-top:0;background:var(--Homepage-TextDark);color:var(--Homepage-White);justify-content:flex-end;align-items:center}
.legal>span{margin-right:auto}
.legal a{color:var(--Homepage-White)}
@media (max-width:809.98px){.legal>span{margin-right:0}}

/* footer link columns: same container as the legal strip, so both start on the same left edge;
   columns wrap instead of overflowing both sides of the centred row */
@media (min-width:810px){
  .footer-links{max-width:calc(var(--container,1216px) - 2*var(--gutter));margin-inline:auto;justify-content:space-between;column-gap:clamp(40px,5vw,96px)}
  .fcols{flex-wrap:wrap}
}


/* fixed: exactly 30px above the bottom edge of the screen and dead centre. It is excluded from the hero rise-in (main.js), which put a translateY on it. Centred with auto margins, not a transform: the hero script writes its own transform on the hero children, which wiped translateX(-50%) and shifted the arrow ~12px a second or two after load */
/* home hero scroll cue (owner, 2026-10-15): a small "Scroll" + chevron at the very bottom of the first screen, so it is clear
   there is more under the fold. It lives in the pinned hero, so the sheet sliding up covers it; main.js fades it out on first scroll. */
.scroll-cue{position:fixed;z-index:41;left:50vw;margin-left:-12px;width:24px;bottom:30px;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--Homepage-TextDark);font:500 clamp(12px,0.85vw,14px)/1 var(--font-sans);text-decoration:none;transition:opacity .3s ease}
.scroll-cue svg{display:block;color:#d03e0f;animation:scroll-cue-bob 1.6s ease-in-out infinite}
.scroll-cue:hover{color:#d03e0f}
.scroll-cue:focus-visible{outline:2px solid var(--Homepage-TextDark);outline-offset:4px;border-radius:8px}
.scroll-cue.is-gone{opacity:0;pointer-events:none}

/* scroll cue (owner, 2026-10-15): sits outside the hero (its own stacking context sat under the bottom blur strip, z 40), so it is
   drawn above the blur (41) and below the header (50). Centred on 50vw, the same centre as the grey bar at the bottom of the screen.
   The bob moves the svg only, never the link, so nothing else can overwrite it. */
@keyframes scroll-cue-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){ .scroll-cue svg{animation:none} }