:root {
  --surface: #f2ede8;
  --font-body: "Inter", sans-serif;
  --font-display: "Inter Tight", "Inter", sans-serif;
  --bg: #070c13;
  --bg-soft: #0b121c;
  --panel: #101823;
  --panel-2: #121d29;
  --ink: #f2f1ee;
  --muted: #a5aab2;
  --red: #df2435;
  --red-deep: #a90820;
  --line: rgba(255,255,255,.14);
  --line-strong: rgba(255,255,255,.28);
  --shell: 1500px;
  --section: 100px;
  --gutter: clamp(22px, 5vw, 74px);
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.76,0,.24,1);
  --header-h: 78px;
  --h1-size: 70px;
  --h2-size: 50px;
  --h3-size: 26px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto;background:var(--bg);scroll-padding-top:var(--header-h)}
body{margin:0;overflow-x:clip;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--red);color:#fff}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:#070c13}
::-webkit-scrollbar-thumb{border:2px solid #070c13;border-radius:8px;background:#4b5360}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button{color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:5px}
.skip-link{position:fixed;z-index:1000;top:12px;left:12px;padding:10px 14px;background:#fff;color:#05080d;transform:translateY(-180%);transition:transform .25s var(--ease)}
.skip-link:focus{transform:none}
.shell{width:min(var(--shell),calc(100% - var(--gutter)*2));margin-inline:auto}
.scene{position:relative;isolation:isolate}
.eyebrow{margin:0;color:var(--red);font-family:var(--font-body);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.display-title{margin:0;font-family:var(--font-display);font-size:var(--h2-size);font-weight:400;letter-spacing:-.04em;line-height:1.02;text-wrap:balance}
.display-title em{font-style:normal}
h1{font-size:var(--h1-size)}
h2{font-size:var(--h2-size)}
h3{font-size:var(--h3-size);line-height:1.02}

#webgl{display:none}
.global-atmosphere{position:fixed;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(circle at var(--light-x,72%) var(--light-y,12%),rgba(91,112,139,.17),transparent 31%),radial-gradient(circle at 20% 80%,rgba(146,14,34,.08),transparent 28%),#070c13;transition:background 1s var(--ease)}


.site-header{position:fixed;z-index:90;top:0;right:0;left:0;height:var(--header-h);border-bottom:1px solid rgba(25,25,24,.1);background:#f6f2ed;transition:box-shadow .35s var(--ease)}
.site-header.is-scrolled{box-shadow:0 6px 24px rgba(25,25,24,.06)}
.header__inner{display:flex;height:100%;align-items:center;justify-content:space-between;gap:34px}
/* Floating pill: nav + CTA ride together on one dark capsule. */
.brand{display:block;width:175px;flex:0 0 auto}
.brand img{width:100%}
.desktop-nav{display:flex;align-items:center;justify-content:center;gap:clamp(22px,2.6vw,42px)}
.desktop-nav a{position:relative;padding:28px 0 25px;color:rgba(25,25,24,.82);font-size:14px;letter-spacing:-.01em;white-space:nowrap;transition:color .3s var(--ease)}
.desktop-nav a::after{content:"";position:absolute;right:0;bottom:17px;left:0;height:2px;background:var(--red);transform:scaleX(0);transition:transform .32s var(--ease);transform-origin:right center}
.desktop-nav a:hover,.desktop-nav a.is-active{color:var(--ink)}
.desktop-nav a:hover::after,.desktop-nav a.is-active::after{transform:scaleX(1);transform-origin:left center}
/* Products carries the six categories. Hover-only, CSS-only: nothing to get
   stuck open, and :focus-within keeps it reachable from the keyboard. */
.nav-group{position:relative;display:flex;align-items:center}
.nav-group>a{display:inline-flex;align-items:center;gap:6px}
.nav-group__caret{font-size:12px;transition:transform .3s var(--ease)}
.nav-drop{position:absolute;z-index:5;top:100%;left:50%;display:grid;min-width:228px;padding:9px;border:1px solid rgba(25,25,24,.1);border-radius:16px;background:rgba(250,247,243,.97);box-shadow:0 34px 64px -44px rgba(74,54,42,.55);opacity:0;translate:-50% 8px;pointer-events:none;transition:opacity .26s var(--ease),translate .26s var(--ease);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.nav-group:hover .nav-drop,.nav-group:focus-within .nav-drop{opacity:1;pointer-events:auto;translate:-50% 0}
.nav-group:hover .nav-group__caret,.nav-group:focus-within .nav-group__caret{transform:rotate(180deg)}
.desktop-nav .nav-drop a{padding:10px 13px;border-radius:10px;color:rgba(25,25,24,.72);transition:background .22s var(--ease),color .22s var(--ease)}
.desktop-nav .nav-drop a::after{display:none}
.desktop-nav .nav-drop a:hover{background:rgba(25,25,24,.055);color:var(--ink)}
.desktop-nav .nav-drop a.is-active{color:var(--red)}
.button{display:inline-flex;min-height:50px;padding:0 22px;align-items:center;justify-content:center;gap:24px;border:1px solid transparent;font-family:var(--font-body);font-size:14px;font-weight:500;letter-spacing:-.01em;line-height:1;white-space:nowrap;text-transform:none;transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.button i{font-size:17px}
.button__mark{flex:0 0 auto;width:18px;height:18px}
/* Solid, not outlined: the bar is transparent over the hero now, and a hairline border
   disappears against a bright photograph. Filled also suits it being the one CTA up there. */
.button--header{min-height:43px;padding-inline:18px;gap:10px;border-color:var(--red);background:var(--red);color:#fff;font-size:14px;letter-spacing:-.01em}
.button--header:hover{border-color:#f23b4d;background:#f23b4d}
.button--ghost:hover{border-color:#fff;background:#fff;color:#08101a}
.button--primary{border-color:var(--red);background:var(--red);color:#fff;box-shadow:0 16px 34px rgba(199,18,43,.2)}
.button--primary:hover{border-color:#f23b4d;background:#f23b4d;box-shadow:0 20px 44px rgba(199,18,43,.3)}
.button--ghost{border-color:rgba(255,255,255,.5);background:rgba(5,9,15,.22);color:#fff}
.menu-button{display:none;align-items:center;gap:9px;border:0;background:transparent;font-size:14px;letter-spacing:-.01em}
.menu-button i{font-size:22px}
.mobile-menu{display:none}

.hero{z-index:3;min-height:100svh;overflow:hidden;background:#080d14}
.hero__media{position:absolute;z-index:-3;inset:0;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center;transition:opacity .5s ease}
/* Keep the source photograph as a resilient base layer. The shared WebGL
   canvas adds optical motion above the scene when supported, while the image
   guarantees the approved composition remains intact in every browser. */
html.webgl-ready .hero__media img{opacity:1}
.hero__scrim{position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(3,7,12,.95) 0%,rgba(3,7,12,.78) 29%,rgba(3,7,12,.22) 67%,rgba(3,7,12,.13)),linear-gradient(0deg,rgba(5,9,15,.77),transparent 44%,rgba(4,7,12,.38))}
.hero__inner{position:relative;z-index:1;display:flex;min-height:100svh;padding-top:calc(var(--header-h) + 72px);padding-bottom:65px;align-items:center}
.hero__content{width:min(930px,76vw);transform-style:preserve-3d;perspective:800px}
.hero__eyebrow{display:flex;margin-bottom:24px;align-items:center;gap:10px;color:#d7d9dd}
.hero__eyebrow i{color:var(--red);font-size:16px}
.hero__title{margin:0;font-family:var(--font-display);font-size:var(--h1-size);font-weight:400;letter-spacing:-.055em;line-height:1.02;text-wrap:balance}
.hero__title>span{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}
.hero__title em{color:#ef3947;font-style:normal}
.hero__copy{max-width:520px;margin:25px 0 0;color:rgba(255,255,255,.76);font-size:clamp(16px,1.5vw,20px);line-height:1.5}
.hero__actions{display:flex;gap:16px;margin-top:34px}
.hero__edge{position:absolute;right:0;bottom:-1px;left:0;height:1px;background:linear-gradient(90deg,transparent,var(--red),transparent);opacity:.45}

.about{margin-top:-1px}
.about__sticky{position:sticky;top:0;height:100svh;overflow:hidden;background:#09111b;transform-style:preserve-3d}
.about__background{position:absolute;inset:-5%;opacity:.16;transform:scale(1.1);filter:saturate(.35) contrast(1.1)}
.about__background::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,12,19,.96),rgba(7,12,19,.62)),linear-gradient(0deg,#09111b 0%,transparent 34%,#09111b 100%)}
.about__background img{height:100%;object-fit:cover}
.about__panel{position:relative;display:grid;min-height:100%;grid-template-columns:minmax(300px,.9fr) minmax(0,1.5fr);align-items:center;gap:clamp(36px,6vw,90px);transform-style:preserve-3d}
.about__story{max-width:520px}
.about__story .display-title{margin-top:20px}
.about__story>p:not(.eyebrow){margin:29px 0 0;color:#aeb3bb;font-size:17px;line-height:1.75}
.text-link{display:inline-flex;margin-top:26px;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.38);font-size:13px;padding-bottom:5px}
.about__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0}

.solutions{position:relative;z-index:8;background:var(--surface)}
.solutions__sticky{position:relative;padding-block:var(--section);overflow:hidden}
.solutions__heading{position:relative;z-index:3;text-align:center}
.solutions__heading .display-title{max-width:1000px;margin:13px auto 0;line-height:1.08}
.solutions__lead{max-width:670px;margin:20px auto 0;color:rgba(25,25,24,.62);font-family:var(--font-body);font-size:15px;font-weight:400;line-height:1.62}
.carousel{--card-w:clamp(203px,21.3vw,355px);--card-h:clamp(218px,22.5vw,377px);position:relative;width:min(var(--shell),calc(100% - var(--gutter)*2));height:calc(var(--card-h) + 86px);margin:40px auto 0}
.carousel__podium{position:absolute;z-index:1;top:calc(var(--card-h) - 22px);left:50%;width:min(1288px,88%);height:98px;border-radius:50%;background:linear-gradient(180deg,#f8f4f0,#ece5df 52%,#e3dad3);box-shadow:0 20px 38px -26px rgba(74,54,42,.32);transform:translateX(-50%)}
.carousel__podium::before{content:"";position:absolute;inset:2px;border:2px solid transparent;border-bottom-color:var(--red);border-radius:50%;box-shadow:0 14px 26px -12px rgba(201,21,43,.6)}
.carousel__scene{position:absolute;z-index:2;top:calc(var(--card-h)/2 + 6px);left:50%;width:0;height:0;perspective:1690px;perspective-origin:0 calc(var(--card-h)/2 - 22px)}
.solution-card{position:absolute;top:0;left:0;display:flex;translate:-50% -50%;width:var(--card-w);height:var(--card-h);padding:clamp(17px,1.5vw,24px);flex-direction:column;border:1px solid rgba(25,25,24,.055);border-radius:clamp(14px,1.2vw,20px);background:linear-gradient(165deg,#fdfcfb,#f3eeea);box-shadow:0 26px 56px -26px rgba(74,54,42,.36);transform-origin:center center;will-change:transform,opacity,filter;transition:scale .58s cubic-bezier(.34,.08,.24,1),box-shadow .58s cubic-bezier(.34,.08,.24,1)}
.solution-card__index{display:flex;align-items:center;gap:12px;color:var(--red);font-family:var(--font-body);font-size:14px;font-weight:500;letter-spacing:.02em}
.solution-card__index::after{content:"";width:clamp(26px,3vw,54px);height:1px;background:rgba(201,21,43,.32)}
.solution-card img{width:100%;min-height:0;flex:1 1 auto;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(74,54,42,.22))}
.solution-card h3{margin:0;color:var(--ink);font-family:var(--font-body);font-size:clamp(11px,.88vw,13px);font-weight:500;letter-spacing:.045em;line-height:1.2;text-transform:uppercase}
.solution-card p{margin:8px 0 0;color:rgba(25,25,24,.54);font-family:var(--font-body);font-size:clamp(9.5px,.68vw,11px);font-weight:400;line-height:1.45}
@media (hover:hover){
  .solution-card.is-front:hover{scale:1.045;box-shadow:0 34px 66px -26px rgba(74,54,42,.44)}
}
.carousel__button{position:absolute;z-index:200;top:50%;display:grid;width:clamp(44px,3.4vw,54px);height:clamp(44px,3.4vw,54px);place-items:center;border:1px solid rgba(25,25,24,.07);border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 14px 28px -16px rgba(74,54,42,.55);cursor:pointer;transform:translateY(-50%);transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),opacity .3s var(--ease)}
.carousel__button:hover:not(:disabled){border-color:var(--red);background:var(--red);color:#fff;transform:translateY(-50%) scale(1.06)}
.carousel__button--prev{left:0}.carousel__button--next{right:0}

.projects{position:relative;z-index:6;padding-block:var(--section)}
/* Header row: statement left, gallery link right; cards sit underneath. */
.projects__head{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(30px,5vw,80px)}
.projects__heading .display-title{margin:18px 0 0}
.projects__head .button{flex:0 0 auto}
/* One tall lead card on the left, two stacked on the right. The grid owns the height so
   the cards fill their tracks instead of each carrying its own fixed height. */
.projects__grid{position:relative;display:grid;height:clamp(360px,32vw,480px);margin-top:clamp(30px,4.4svh,52px);grid-template-columns:2.1fr 1fr;grid-template-rows:repeat(2,1fr);gap:clamp(12px,1vw,16px)}
.project{position:relative;overflow:hidden;border-radius:12px;background:#111923}
.project--lead{grid-row:span 2}
.project img{width:100%;height:100%;object-fit:cover;will-change:transform;transform:scale(1.02);transition:transform .95s cubic-bezier(.16,1,.3,1)}
/* darkens the foot for the caption and the crown for the index row */
.project__overlay{position:absolute;z-index:2;inset:0;background-color:rgba(4,7,12,.32);background-image:linear-gradient(0deg,rgba(4,7,12,.86) 0%,rgba(4,7,12,.44) 34%,transparent 66%),linear-gradient(180deg,rgba(4,7,12,.42),transparent 26%)}
.project__meta{position:absolute;z-index:3;top:clamp(16px,1.5vw,24px);right:clamp(18px,1.6vw,26px);left:clamp(18px,1.6vw,26px);display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.project__index{color:#fff;font-family:var(--font-body);font-size:clamp(13px,1.1vw,16px);font-weight:500;letter-spacing:-.01em}
.project__tag{color:rgba(255,255,255,.72);font-family:var(--font-body);font-size:clamp(9px,.72vw,10.5px);font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.project--lead .project__meta{justify-content:flex-start;gap:clamp(20px,2.4vw,38px)}
.project__caption{position:absolute;z-index:3;right:clamp(18px,1.6vw,26px);bottom:clamp(18px,1.6vw,26px);left:clamp(18px,1.6vw,26px)}
.project__caption h3{margin:0;color:#fff;font-family:var(--font-body);font-size:clamp(19px,2vw,30px);font-weight:400;letter-spacing:-.02em;line-height:1.14}
.project__caption p{margin:6px 0 0;color:rgba(255,255,255,.74);font-family:var(--font-body);font-size:clamp(11px,.88vw,13px);font-weight:400}
.project__rule{display:block;width:clamp(34px,3vw,48px);height:1px;margin:clamp(14px,1.4vw,20px) 0;background:rgba(255,255,255,.42)}
/* the lead card puts its caption above the CTA row, so it sits higher up the card */
.project--lead .project__caption{top:0;bottom:0;height:fit-content;margin-block:auto}
.project--lead .project__caption h3{font-size:clamp(30px,3.4vw,52px);letter-spacing:-.035em;line-height:1.04}
.project--lead .project__caption p{margin:0;font-size:clamp(12px,.95vw,14px)}
.project__cta{position:absolute;z-index:3;bottom:clamp(18px,1.6vw,26px);left:clamp(18px,1.6vw,26px);display:inline-flex;align-items:center;gap:12px;color:#fff;font-family:var(--font-body);font-size:clamp(10px,.8vw,12px);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.project__cta i{font-size:16px}
/* the label and the rule belong to the lead slot, not to a particular card, so they are
   present on all three and revealed by the slot the card currently occupies */
.project:not(.project--lead) .project__cta{right:clamp(18px,1.6vw,26px);left:auto;gap:0}
.project:not(.project--lead) .project__cta i{font-size:clamp(17px,1.4vw,21px)}
.project:not(.project--lead) .project__cta-label,.project:not(.project--lead) .project__rule{display:none}
@media (hover:hover) and (pointer:fine){.project:hover img{transform:scale(1.075)}}

.trust{position:relative;z-index:8;padding-block:var(--section)}
/* Trust and Contact are each carried by a render. Both ends of the image are masked away to
   transparent, revealing the section's own flat --surface -- the same colour the neighbouring
   sections use -- so the joins between them have no visible edge. A negative z-index paints
   the image above the parent's background but below the content. */
.trust__media,.contact__media{position:absolute;z-index:-1;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 10%,rgba(0,0,0,.8) 22%,#000 34%,#000 66%,rgba(0,0,0,.62) 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 10%,rgba(0,0,0,.8) 22%,#000 34%,#000 66%,rgba(0,0,0,.62) 84%,transparent 100%)}
.trust__media{background-image:url("../assets/images/homepage/trust-interior.webp")}
.contact__media{background-image:url("../assets/images/homepage/contact.webp")}
.trust__heading{margin-bottom:clamp(38px,4vw,58px);text-align:center}
.trust__heading .display-title{margin-top:18px}
.quote-carousel{--quote-gap:clamp(16px,1.8vw,24px);cursor:grab;touch-action:pan-y;user-select:none}
.quote-carousel.is-dragging{cursor:grabbing}
.quote-carousel__viewport{overflow:hidden}
.quote-grid{display:flex;gap:var(--quote-gap);align-items:stretch;transition:transform .7s var(--ease);will-change:transform}
.quote-card{position:relative;display:flex;min-width:0;margin:0;padding:clamp(30px,2.6vw,40px);overflow:hidden;border:1px solid rgba(25,25,24,.13);border-radius:16px;background:#fff;flex:0 0 calc((100% - (var(--quote-gap) * 2)) / 3);flex-direction:column}
/* One indent shared by the quote and the attribution, so the name always sits
   flush with the first character of the quote. */
.quote-card{--quote-indent:24px}
.quote-card blockquote{position:relative;flex:1 1 auto;margin:0;padding:42px 10px 34px var(--quote-indent);color:#41413f;font-family:var(--font-body);font-size:16px;font-weight:300;line-height:1.65}
.quote-card blockquote::before,.quote-card blockquote::after{position:absolute;color:#d7142f;font-family:"Arial Unicode MS","Segoe UI Symbol",sans-serif;font-size:43px;font-weight:400;line-height:1;pointer-events:none}
.quote-card blockquote::before{content:"❝";top:0;left:0}
.quote-card blockquote::after{content:"❞";right:0;bottom:10px}
.quote-card figcaption{display:grid;margin-top:14px;padding-left:var(--quote-indent);gap:3px;font-size:16px}
.quote-card figcaption strong,.quote-card figcaption span{font-size:16px}
.quote-card figcaption span{color:#77706a}
.quote-carousel__dots{display:flex;margin-top:28px;align-items:center;justify-content:center;gap:9px}
.quote-carousel__dot{width:28px;height:3px;padding:0;border:0;background:rgba(25,25,24,.22);cursor:pointer;transition:background .3s var(--ease),transform .3s var(--ease)}
.quote-carousel__dot.is-active{background:var(--red);transform:scaleX(1.14)}
.contact{position:relative;z-index:9;min-height:100svh;overflow:hidden;background:var(--surface);color:var(--ink)}
.contact__inner{position:relative;z-index:1;display:grid;min-height:100svh;padding-block:var(--section);grid-template-columns:minmax(0,.83fr) minmax(620px,1.17fr);align-items:center;gap:clamp(70px,9vw,160px)}
.contact__intro{display:flex;max-width:570px;align-self:stretch;justify-self:start;flex-direction:column}
.contact__intro>.eyebrow{margin-bottom:30px;color:var(--red)}
.contact__intro .display-title{margin:0 0 28px}
.contact__intro>p:not(.eyebrow){max-width:510px;margin:0;color:#4d4945;font-size:15px;line-height:1.6}
.contact__details{display:grid;margin-top:34px;gap:14px}
.contact__details>.eyebrow{margin-bottom:10px;color:var(--red)}
.contact__card{display:grid;grid-template-columns:52px minmax(0,1fr);margin:0;padding:14px 22px 14px 14px;align-items:center;gap:16px;border:1px solid rgba(25,25,24,.12);border-radius:16px;background:rgba(255,255,255,.5);color:rgba(25,25,24,.86);font-size:16px;font-style:normal;line-height:1.55}
.contact__card>i{display:grid;width:52px;height:52px;place-items:center;border:1px solid rgba(201,21,43,.45);border-radius:50%;color:var(--red);font-size:22px}
.contact__card-body{display:grid;gap:2px}
.contact__card-body strong{color:var(--ink)}
.contact__card-body p{margin:0;color:#4d4945;font-size:15px;line-height:1.6}
.contact__card-body a{transition:color .25s var(--ease)}
.contact__card-body a:hover{color:var(--red)}
@media (max-width:640px){
  .contact__card{padding:12px;gap:12px;grid-template-columns:40px minmax(0,1fr)}
  .contact__card>i{width:40px;height:40px;font-size:18px}
  .contact__card-body p{overflow-wrap:anywhere}
}
/* Frosted glass. backdrop-filter blurs whatever sits behind the panel, so the
   section provides a soft glow for it to refract — over a flat colour a blur
   has nothing to work on and the effect is invisible. The inset highlight is
   the lit top edge, the inset dark line the shaded bottom edge. */
.contact-form{position:relative;z-index:1;display:grid;width:100%;max-width:none;align-content:start;padding:clamp(30px,3.2vw,50px);border:1px solid rgba(255,255,255,.7);border-radius:clamp(28px,2.6vw,40px);background:#faf8f5;gap:20px;box-shadow:0 40px 90px -50px rgba(74,54,42,.45)}
/* A brighter sheen across the top-left corner, the way light catches glass. */
.contact-form__row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.contact-form__field{display:grid;gap:9px}
.contact-form__field>span{font:15px var(--font-body);font-weight:500;letter-spacing:-.02em;text-transform:none;color:var(--ink)}
.contact-form__field input,.contact-form__field textarea{width:100%;padding:16px 20px;border:1px solid transparent;border-radius:14px;background:#f0ece7;color:var(--ink);font-size:16px;outline:0;transition:border-color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease)}
.contact-form__field textarea{resize:vertical;min-height:128px}
.contact-form__field input::placeholder,.contact-form__field textarea::placeholder{color:rgba(25,25,24,.4)}
.contact-form__field input:focus,.contact-form__field textarea:focus{border-color:var(--red);background:#fdfcfb;box-shadow:0 0 0 4px rgba(201,21,43,.1)}
.contact-form .button--contact{width:100%;min-height:66px;margin-top:6px;justify-content:flex-start;padding-inline:28px;border-radius:11px;background:var(--red);font-size:15px;box-shadow:0 14px 28px -12px rgba(201,21,43,.5)}
.contact-form .button--contact:hover{border-color:#f23b4d;background:#f23b4d}
.contact-form .button--contact:hover i{transform:none}
.contact-form .button--contact span{margin-inline:auto}.contact-form .button--contact i:last-child{font-size:22px}.button--contact{min-width:190px}
.form-toast{position:fixed;z-index:1000;right:28px;bottom:28px;display:flex;padding:14px 17px;align-items:center;gap:10px;border:1px solid rgba(223,36,53,.28);border-radius:12px;background:#fff;color:#25211f;font-size:13px;font-weight:500;box-shadow:0 18px 45px rgba(49,35,27,.16);opacity:0;pointer-events:none;transform:translateY(16px);transition:opacity .28s var(--ease),transform .28s var(--ease)}
.form-toast i{color:var(--red);font-size:19px}.form-toast.is-visible{opacity:1;transform:none}

.site-footer{position:relative;z-index:10;background:var(--surface);color:#5b574f}
.site-footer .shell{width:min(1500px,calc(100% - var(--gutter)*2))}
.footer__grid{display:grid;padding-block:76px 62px;grid-template-columns:1.3fr .75fr .95fr 1.35fr;gap:clamp(35px,6vw,90px)}
.footer__brand img{width:170px}
.footer__brand>p{max-width:270px;margin:24px 0;color:#6d685f;font-size:13px}
.socials{display:flex;gap:10px}
.socials a{display:grid;width:34px;height:34px;place-items:center;border:1px solid rgba(255,255,255,.27);border-radius:50%;transition:background .25s ease,color .25s ease}
.socials a:hover{background:var(--red);color:#fff}
.site-footer h4{margin:0 0 24px;color:var(--ink);font-family:var(--font-body);font-size:14px;font-weight:600}
.footer__links{display:flex;align-items:flex-start;flex-direction:column;gap:10px}
.footer__links a,.footer__contact a{color:rgba(25,25,24,.62);font-size:12px;transition:color .2s ease}
.footer__links a:hover,.footer__contact a:hover{color:var(--ink)}
.footer__contact{font-style:normal}
.footer__contact p,.footer__contact a{display:flex;margin:0 0 14px;align-items:center;gap:10px;font-family:var(--font-body);font-size:12px;font-weight:400;line-height:1.6}
.footer__contact i{display:grid;flex:0 0 auto;width:26px;height:26px;place-items:center;border:1px solid var(--red);border-radius:50%;background:var(--red);color:#fff;font-size:13px}
.footer__person{display:flex;margin:0 0 14px;align-items:center;gap:10px}
.footer__person>div{display:grid;gap:1px}
.footer__person strong{color:var(--ink);font-size:12px;font-weight:400;line-height:1.6}
.footer__person a{margin:0}
.footer__bottom{display:flex;padding-block:20px;border-top:1px solid rgba(25,25,24,.12);align-items:center;justify-content:space-between;color:rgba(25,25,24,.5);font-size:11px}
.footer__bottom p{margin:0}.footer__bottom a{color:inherit;text-underline-offset:3px;transition:color .2s ease}.footer__bottom a:hover{color:var(--red)}.footer__bottom a+a{margin-left:25px}


/* SplitText masks each line so the characters are hidden before they arrive,
   but the mask is exactly one line-height tall and a 1.02 leading is shallower
   than the font's descender — so g/p/y were being cropped. overflow-clip-margin
   widens the clip region without touching layout (padding plus a negative
   margin would work too, but the last line's margin collapses into the heading
   and leaves the box 11px tall for nothing). The inner .split-line must not
   clip at all, or it crops the glyphs before the mask ever sees them. */
.split-line{display:block}
/* overflow-clip-margin is Chromium/Firefox only - Safari clips at the padding box and
   ate the descenders on iOS. Padding inside the clip region with a matching negative
   margin does the same job everywhere; flow-root keeps the last line's negative margin
   from collapsing out of the heading and shrinking its box. */
[data-split]{display:flow-root}
.split-mask-line-mask{padding-bottom:.26em;margin-bottom:-.26em;overflow-clip-margin:.26em}
/* SplitText stamps the text-align it measured onto every line mask as an inline style,
   so a heading split at desktop width keeps reading left once the window crosses a
   breakpoint. !important in a stylesheet outranks a plain inline style. */
.split-mask-line-mask{text-align:inherit!important}
.split-word{display:inline-block;white-space:nowrap}.split-char{display:inline-block;will-change:transform,filter,opacity}

/* 2026 light product-stage art direction */
:root{
  --bg:var(--surface);
  --bg-soft:#ece5df;
  --panel:#fbf8f4;
  --panel-2:#e9e1da;
  --ink:#191918;
  --muted:#68635f;
  --red:#c9152b;
  --red-deep:#941122;
  --line:rgba(25,25,24,.13);
  --line-strong:rgba(25,25,24,.25);
}
html,body{background:var(--bg);color:var(--ink)}
::-webkit-scrollbar-track{background:#ece5df}
::-webkit-scrollbar-thumb{border-color:#ece5df;background:#b7aea7}
.global-atmosphere{background:radial-gradient(circle at var(--light-x,72%) var(--light-y,12%),rgba(255,255,255,.72),transparent 33%),radial-gradient(circle at 18% 80%,rgba(201,21,43,.05),transparent 28%),var(--surface)}
.site-header{color:var(--ink)}
.brand{display:block;width:175px;line-height:1}
.brand img{display:block;width:100%;height:auto}
.desktop-nav a{font-weight:500}
.button--outline-red{min-width:195px;border-color:var(--red);background:rgba(255,255,255,.18);color:var(--red)}
.button--outline-red:hover{background:var(--red);color:#fff;box-shadow:0 18px 38px rgba(153,12,31,.16)}

.product-sequence{position:relative;z-index:3;background:var(--surface)}
.product-stage{position:relative;overflow:visible;background:var(--surface);isolation:isolate}
.product-stage__architecture{position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none}
.hero .product-stage__architecture{display:none}
.product-stage__halo{position:absolute;top:-23vh;left:50%;width:min(74vw,1120px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 46%,#fff 0%,#fbf7f2 55%,#e9dfd8 73%,rgba(230,219,210,.2) 74%,transparent 75%);transform:translateX(-50%);box-shadow:0 38px 90px rgba(110,92,78,.08)}
.product-stage__ribs{position:absolute;top:0;right:0;width:17vw;height:100%;border-left:1px solid rgba(126,107,94,.12);background:repeating-linear-gradient(90deg,rgba(126,107,94,.1) 0 1px,transparent 1px 9px),linear-gradient(90deg,rgba(255,255,255,.25),rgba(221,209,199,.45));clip-path:polygon(28% 0,100% 0,100% 100%,0 100%,17% 67%)}
.product-stage__wave{position:absolute;z-index:1;right:13%;bottom:20%;left:10%;height:25%;border-top:1px solid rgba(201,21,43,.42);border-radius:50% 50% 0 0/100% 100% 0 0;transform:rotate(5deg)}
.product-stage__wave::before,.product-stage__wave::after{content:"";position:absolute;inset:-12px 0 auto;height:100%;border-top:1px solid rgba(201,21,43,.13);border-radius:inherit}
.product-stage__wave::after{inset:-24px 0 auto}
.product-stage__wave--two{right:18%;bottom:15%;left:18%;opacity:.5;transform:rotate(-2deg) scaleY(.72)}

.hero,.about{position:relative;z-index:3;inset:auto;height:auto;min-height:100svh;overflow:hidden;color:var(--ink)}
.hero{background:#eee8e3}
.hero__media{position:absolute;z-index:-2;inset:0;overflow:hidden;pointer-events:none}
.hero__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hero::after{content:"";position:absolute;z-index:6;right:0;bottom:0;left:0;height:22%;pointer-events:none;background:linear-gradient(0deg,var(--surface) 0%,rgba(242,237,232,.72) 38%,rgba(242,237,232,0) 100%)}
.about{z-index:4;margin-top:0;background:var(--surface)}
.hero__inner{min-height:100svh;padding-top:var(--header-h);padding-bottom:0;align-items:center}
.hero__content{width:min(510px,44vw);margin-top:2vh;perspective:none;transform-style:flat}
.hero__eyebrow{margin-bottom:17px;color:var(--red);font-size:11px;letter-spacing:.08em}
.hero__title{font-size:70px;font-weight:400;letter-spacing:-.06em;line-height:.94;text-transform:uppercase;text-wrap:initial}
.hero__copy{max-width:420px;margin-top:26px;color:#4f4b47;font-size:15px;line-height:1.58}
.hero__actions{margin-top:30px}

.product-chair{position:absolute;z-index:5;inset:0;width:clamp(400px,31vw,535px);height:auto;aspect-ratio:1;margin:auto;pointer-events:none;will-change:transform}
.product-chair__float{position:relative;aspect-ratio:1;pointer-events:none;animation:chairFloat 2.9s cubic-bezier(.45,0,.55,1) infinite alternate;will-change:transform}
@keyframes chairFloat{from{transform:translate3d(0,11px,0)}to{transform:translate3d(0,-11px,0)}}
.product-chair__model{position:absolute;z-index:2;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;outline:0}
/* Contact shadow sits outside the floating wrapper so it can counter-shift
   against the chair instead of travelling with it. */
.product-chair__contact{position:absolute;z-index:1;bottom:5.5%;left:50%;width:46%;height:3.4%;border-radius:50%;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(78,56,42,.44),rgba(78,56,42,.2) 55%,rgba(78,56,42,0) 78%);filter:blur(5px);animation:chairContact 2.9s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes chairContact{from{transform:translateX(-50%) scale(1.07);opacity:1;filter:blur(4px)}to{transform:translateX(-50%) scale(.86);opacity:.72;filter:blur(7px)}}

.about__panel{display:grid;min-height:100svh;padding-block:var(--section) 0;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center;gap:40px;text-align:center}
.about__media{position:relative;left:auto;width:100vw;max-width:none;margin:0;justify-self:center;overflow:hidden;filter:saturate(.88);transform:none}
.about__media img,.about__media video{display:block;width:100%;height:100svh;object-fit:cover;object-position:bottom center;background:#ddd6cf}
.about__story{width:min(100%,1100px);max-width:1100px;text-align:center}
.about__story .display-title{margin-top:25px;font-weight:400;line-height:1.02;text-transform:none}
.about__story>p:not(.eyebrow){max-width:680px;margin:22px auto 0;color:#4d4945;font-size:15px;line-height:1.75}
.about__rule{display:block;width:54px;height:1px;margin:24px auto 0;background:var(--red)}

/* Lower-page layout is preserved; only the palette is remapped. */
.solutions,.solutions__sticky,.projects,.trust{background:var(--surface);color:var(--ink)}
.projects__head .button--ghost{border-color:rgba(25,25,24,.38);background:transparent;color:var(--ink)}
.projects__head .button--ghost:hover{background:var(--red);border-color:var(--red);color:#fff}

html.motion-enabled .product-sequence{height:auto}
html.motion-enabled .hero,html.motion-enabled .about{height:auto}


@media (prefers-reduced-motion:reduce){
  .product-sequence{height:auto}.product-stage{height:auto;overflow:visible}
  .hero,.about{position:relative;visibility:visible;opacity:1}
  .product-chair{inset:15vh auto auto 64%;width:38vw;margin:0;transform:none}
  .product-chair__float{animation:none;transform:none}
  .product-chair__contact{animation:none}
}

@media (max-width:900px){
  :root{--gutter:30px}
  .desktop-nav{gap:18px}.desktop-nav a{font-size:14px}.brand{width:155px}
  .about__panel{gap:50px}
  .projects__head{align-items:flex-start;flex-direction:column;gap:26px}
  .contact__inner{grid-template-columns:1fr .95fr;gap:40px}
  .contact-form__row{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1.2fr .8fr .9fr 1.2fr;gap:35px}
}

@media (max-width:820px){
  :root{--gutter:22px;--header-h:70px;--section:76px;--h1-size:clamp(49px,11vw,70px);--h2-size:clamp(38px,8vw,52px);--h3-size:23px}
  .desktop-nav{display:none}.button--header{display:none}.menu-button{display:flex}.brand{width:145px}
  .mobile-menu{position:fixed;top:var(--header-h);right:0;left:0;display:block;padding:26px var(--gutter) 40px;border-top:1px solid var(--line);background:rgba(250,247,243,.98);opacity:0;pointer-events:none;transform:translateY(-15px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
  .mobile-menu.is-open{opacity:1;pointer-events:auto;transform:none}.mobile-menu nav{display:grid}.mobile-menu a{padding:15px 0;border-bottom:1px solid var(--line);font-family:var(--font-body);font-size:14px}
  .mobile-menu__sub{display:grid}
  .mobile-menu__sub a{padding-left:18px;color:rgba(25,25,24,.62)}
  .mobile-menu__sub a.is-active{color:var(--red)}
  .hero__inner{padding-top:120px;align-items:flex-end}.hero__content{width:100%}.hero__actions{align-items:stretch;flex-direction:column}.hero__actions .button{width:100%}
  .about__story .display-title{white-space:normal}
  .solutions__lead{font-size:14px}.carousel__podium{height:72px}
  .projects__grid{height:auto;grid-template-columns:1fr;grid-template-rows:none}.project{height:clamp(240px,42svh,360px)}.project--lead{grid-row:auto}.project--lead .project__caption{top:auto;bottom:clamp(52px,6vw,72px);height:auto;margin-block:0}
  .quote-card{padding:26px}
  .contact{min-height:auto}.contact__inner{min-height:auto;padding-block:90px;grid-template-columns:1fr;align-content:center}.contact__intro{max-width:560px}.contact-form{max-width:560px}
  .form-toast{right:22px;bottom:22px}
  .footer__grid{grid-template-columns:1fr 1fr}.footer__brand,.footer__contact{grid-column:1/-1}.footer__bottom{align-items:flex-start;flex-direction:column;gap:12px}
}

@media (max-width:520px){
  :root{--h1-size:46px;--h2-size:36px;--h3-size:22px}
  .hero__inner{padding-bottom:34px}.hero__title{font-size:42px;line-height:.96}.hero__copy{font-size:14px}.hero__eyebrow{font-size:9px}
  .quote-card blockquote{font-size:17px}
  .contact__inner{padding-block:70px}.contact-form__row{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}.footer__links,.footer__brand,.footer__contact{grid-column:auto}
}

/* ===== About page (about.html) ===================================================== */
.eyebrow--rule{display:flex;align-items:center;gap:12px}
.eyebrow--rule::before{content:"";width:26px;height:1px;background:var(--red)}
.button--outline-ink{border-color:rgba(25,25,24,.22);background:transparent;color:var(--ink)}
.button--outline-ink:hover{border-color:var(--ink);background:var(--ink);color:#fff}

.about-page,.about-page main{background:var(--surface)}
.page-hero{position:relative;display:flex;min-height:100svh;padding-block:100px;align-items:center;overflow:hidden;background:linear-gradient(to bottom,rgba(242,237,232,0) 46%,rgba(242,237,232,.18) 62%,rgba(242,237,232,.5) 77%,rgba(242,237,232,.86) 91%,var(--surface) 100%),url("../assets/images/about-us/hero-architectural-background.webp") center/cover no-repeat}
.page-hero__inner{position:relative;z-index:1;display:grid;width:min(1500px,calc(100% - var(--gutter)*2));margin-inline:auto;align-items:center;grid-template-columns:minmax(500px,1fr) minmax(0,869px);gap:clamp(42px,3.5vw,64px)}
.page-hero__copy{position:relative;z-index:2;max-width:500px}
.page-hero__eyebrow{margin-bottom:17px;color:var(--red);font-size:11px;letter-spacing:.08em}
.page-hero__title{margin:0;color:#111315;font-family:var(--font-display);font-size:var(--h1-size);font-weight:400;letter-spacing:-.06em;line-height:.94;text-transform:none;text-wrap:initial}
.page-hero__title,.page-hero__title em{color:#111315;font-style:normal}
.page-hero__lead{max-width:420px;margin:26px 0 0;color:#4f4b47;font-family:var(--font-body);font-size:15px;font-weight:400;line-height:1.58}
.page-hero__visual{position:relative;isolation:isolate;justify-self:end;width:min(100%,869px);min-width:0;min-height:0;aspect-ratio:869/594}
.page-hero__visual::before{content:"";position:absolute;z-index:0;inset:14px 9px 13px 14px;border:1px solid rgba(255,255,255,.72);border-radius:54px;pointer-events:none}
.page-hero__image-frame{position:absolute;z-index:1;top:6.73%;right:3.91%;bottom:7.24%;left:4.14%;overflow:hidden;border:1px solid rgba(255,255,255,.58);border-radius:32px;background:#ddd5ca;box-shadow:0 18px 38px rgba(61,47,37,.11)}
.page-hero__image-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 47%;filter:saturate(.88) contrast(.96) brightness(1.035)}

.story{position:relative;isolation:isolate;margin-top:-1px;padding-block:100px;background:var(--surface)}
.story::before{display:none}
.story::after{display:none}
.story__inner{display:grid;width:min(1500px,calc(100% - var(--gutter)*2));grid-template-columns:minmax(0,.82fr) minmax(560px,1.18fr);align-items:stretch;gap:clamp(64px,7vw,112px)}
.story__copy{max-width:470px;padding:0;border:0}
.story__copy .eyebrow::after{display:none}
.story__copy .display-title{margin-top:30px;white-space:nowrap}
.story__copy .display-title::after{content:"";display:block;width:67px;height:2px;margin-top:30px;background:var(--red)}
.story__copy .display-title em{display:inline;margin-left:0;color:#111315;font-style:normal}
.story__copy>p:not(.eyebrow){margin:28px 0 0;color:#4d4945;font-size:15px;line-height:1.7}
.timeline{--timeline-icon-size:88px;position:relative;display:grid;min-height:0;margin:0;padding:50px 68px;align-content:space-between;gap:34px;border:0;border-radius:52px;background:rgba(248,244,239,.72);box-shadow:0 0 12px rgba(89,65,37,.06),0 0 44px rgba(89,65,37,.1);list-style:none;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.timeline::before{display:none}
.timeline__step{position:relative;z-index:1;display:grid;grid-template-columns:var(--timeline-icon-size) minmax(0,1fr);align-items:center;gap:clamp(30px,3vw,54px);will-change:opacity,transform,filter}
.timeline__step i{position:relative;z-index:2;display:grid;width:var(--timeline-icon-size);height:var(--timeline-icon-size);place-items:center;border:1px solid rgba(201,21,43,.4);border-radius:50%;background:#f8f4ef;color:var(--red);font-size:32px;box-shadow:inset 0 1px 0 #fff,0 14px 30px rgba(201,21,43,.13)}
.timeline__step i::after{display:none}
.timeline__step h3{margin:0;color:var(--red);font-family:var(--font-body);font-size:var(--h3-size);font-weight:500;letter-spacing:-.02em}
.timeline__step p{max-width:400px;margin:10px 0 0;color:#4d4945;font-size:15px;line-height:1.65}
.timeline__step:not(:last-child)::after{content:"";position:absolute;z-index:0;top:var(--timeline-connector-start,var(--timeline-icon-size));left:calc(var(--timeline-icon-size) / 2);width:1px;height:var(--timeline-connector-height,80px);background:linear-gradient(to bottom,rgba(201,21,43,.22),rgba(201,21,43,.7),rgba(201,21,43,.22));transform:scaleY(0);transform-origin:top;opacity:.95;transition:transform .5s var(--ease)}
.timeline__step.is-connector-drawn:not(:last-child)::after{transform:scaleY(1)}
.timeline.timeline--reveal-ready .timeline__step{opacity:0;transform:translateY(18px);filter:blur(4px);transition:opacity .46s var(--ease),transform .46s var(--ease),filter .46s var(--ease)}
.timeline.timeline--reveal-ready .timeline__step.is-visible{opacity:1;transform:none;filter:none}

.pledge{position:relative;isolation:isolate;margin-top:-1px;background:var(--surface);color:#191b1f}
.pledge::before{display:none}
.pledge::after{display:none}
.pledge__inner{position:relative;z-index:1;width:min(1500px,calc(100% - var(--gutter)*2));padding-block:100px}
.pledge__heading{text-align:center}
.pledge__heading .eyebrow{color:var(--red)}
.pledge__heading .eyebrow::after{display:none}
.pledge__heading .display-title{margin-top:24px;color:#191b1f;font-size:50px;letter-spacing:-.055em;line-height:.98}
.pledge__items{position:relative;display:grid;margin-top:clamp(36px,3vw,48px);grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,2.4vw,36px)}
.pledge__items::after{display:none}
.pledge__item{position:relative;z-index:2;display:grid;padding:clamp(40px,3.4vw,54px);justify-items:center;grid-template-columns:minmax(0,1fr);align-items:start;gap:clamp(22px,2vw,30px);border:0;border-radius:32px;background:rgba(248,244,239,.72);box-shadow:0 0 12px rgba(89,65,37,.06),0 0 44px rgba(89,65,37,.1);text-align:center}
.pledge__item i{display:grid;width:88px;height:88px;place-items:center;border:1px solid rgba(201,21,43,.4);border-radius:50%;background:rgba(250,247,243,.24);color:var(--red);font-size:32px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 28px rgba(201,21,43,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pledge__copy .eyebrow{margin-top:2px;color:var(--red)}
.pledge__copy h3{max-width:440px;margin:22px auto 0;color:#191b1f;font-family:var(--font-display);font-size:30px;font-weight:400;letter-spacing:-.045em;line-height:1.05}
.pledge__copy p:not(.eyebrow){max-width:470px;margin:24px auto 0;color:rgba(25,27,31,.64);font-size:15px;line-height:1.75}


.ready{position:relative;min-height:clamp(520px,33.3vw,725px);overflow:hidden;background:var(--surface);color:#191b1f}
.ready__media{position:absolute;inset:0 0 0 50%;background:url("../assets/images/about-us/cta-full-background.webp?v=4") center/cover no-repeat}
.ready__inner{position:relative;z-index:1;display:flex;min-height:clamp(520px,33.3vw,725px);padding-block:100px;align-items:center}
.ready__copy{max-width:min(780px,calc(50vw - var(--gutter) - 40px))}
.ready__eyebrow{display:flex;align-items:center;gap:16px;color:var(--red)}
/* No font-size of its own: 3.1vw hits the 32px floor from 1032px down, so at 820 this
   sat at 32 beside the page's other section titles at 50-52. It follows --h2-size like
   every other display title now; the phone keeps its 36px override. */
.ready__copy .display-title{margin-top:24px;color:#191b1f;letter-spacing:-.055em;line-height:.98}
.ready__copy p:not(.eyebrow){max-width:660px;margin:30px 0 0;color:rgba(25,27,31,.68);font-size:15px;line-height:1.7}
.ready__reach{display:grid;margin:0;padding-left:clamp(30px,4vw,70px);border-left:1px solid rgba(255,255,255,.2);grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,38px);list-style:none}
.ready__reach li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:12px}
.ready__reach i{color:#f5566a;font-size:19px}
.ready__reach span{color:rgba(255,255,255,.62);font-family:var(--font-body);font-size:12px;font-weight:500;letter-spacing:.02em}
.ready__reach p{margin:5px 0 0;color:#fff;font-size:13px;line-height:1.6}

@media (max-width:1000px){
  .story__inner,.ready__inner{grid-template-columns:minmax(0,1fr)}
  .page-hero{min-height:100svh;padding-block:100px}
  .page-hero__inner{grid-template-columns:minmax(250px,.74fr) minmax(0,1.26fr);gap:clamp(30px,4vw,54px)}
  .page-hero__copy{max-width:360px}
  .page-hero__title{font-size:clamp(52px,6.5vw,70px)}
  .page-hero__visual{width:100%;min-height:0;aspect-ratio:869/594}
  .story__inner{width:min(760px,calc(100% - var(--gutter)*2));gap:64px}
  .story__copy{max-width:540px;padding-right:0;border-right:0}
  .timeline{min-height:610px}
  .pledge__items{gap:clamp(20px,2vw,30px)}
  .ready__reach{padding-top:clamp(26px,3vw,38px);padding-left:0;border-top:1px solid rgba(255,255,255,.2);border-left:0;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .page-hero{min-height:auto;padding-block:100px}
  .page-hero__inner{grid-template-columns:minmax(0,1fr);gap:42px}
  .page-hero__copy{max-width:330px}
  .page-hero__title{font-size:clamp(54px,17vw,78px);line-height:.91}
  .page-hero__lead{font-size:14px}
  .page-hero__visual{min-height:0;aspect-ratio:869/594}
  .story{padding-block:100px}
  .story__inner{gap:46px}
  .timeline{--timeline-icon-size:56px;min-height:540px;padding:44px 24px;border-radius:30px}
  .timeline__step{grid-template-columns:56px minmax(0,1fr);gap:20px}
  .timeline__step i{width:56px;height:56px;font-size:24px}
  .timeline__step h3{font-size:var(--h3-size)}
  .timeline__step p{font-size:14px}
  .pledge__inner{padding-block:100px}
  .pledge__heading .display-title{font-size:clamp(42px,13vw,50px)}
  .pledge__items{margin-top:36px;grid-template-columns:minmax(0,1fr);gap:20px}
  .pledge__items::before,.pledge__items::after{display:none}
  .pledge__item{padding:36px 24px;grid-template-columns:minmax(0,1fr);gap:18px;border-radius:24px}
  .pledge__item i{width:56px;height:56px;font-size:24px}
  .pledge__copy h3{margin-top:16px;font-size:clamp(24px,7vw,30px)}
  .pledge__copy p:not(.eyebrow){margin-top:16px;font-size:14px}
  .ready__reach{grid-template-columns:minmax(0,1fr)}
}



.ready__inner--cta{display:block}
.ready__actions{display:flex;margin-top:34px;flex-wrap:wrap;gap:16px}
.ready__actions .button{min-height:43px;padding-inline:18px;border-radius:0;gap:10px}
.ready__actions .button--outline-light{border-color:var(--red);background:rgba(255,255,255,.12);color:var(--red)}
.ready__actions .button--outline-light:hover{border-color:var(--red);background:var(--red);color:#fff}

@media (max-width:1000px){
  .ready__inner--cta{display:block}
  .ready__copy{max-width:680px}
  .ready__media{inset:auto 0 0 0;height:260px}
  .ready__inner{padding-bottom:300px}
}
@media (max-width:640px){
  .ready{min-height:620px}
  .ready__inner{min-height:620px;padding-block:100px}
  .ready__copy .display-title{font-size:clamp(40px,11vw,56px)}
  .ready__copy p:not(.eyebrow){margin-top:22px;font-size:14px}
  .ready__actions{margin-top:28px}
  .ready__actions .button{width:100%}
}

/* ===== Contact page (page-contact.php) */
/* A plain hero: no backplate photo and no full-viewport height, because the
   enquiry block below it is the point of the page, not the opening image. */
.page-hero--plain{min-height:100svh;padding-block:calc(var(--header-h) + 84px) 84px;background:linear-gradient(to bottom,rgba(242,237,232,0) 44%,rgba(242,237,232,.18) 61%,rgba(242,237,232,.5) 77%,rgba(242,237,232,.86) 91%,var(--surface) 100%),var(--surface) url("../assets/images/contact/contact-hero.webp?v=3") left center/cover no-repeat}
.page-hero--plain .page-hero__inner{grid-template-columns:minmax(0,1fr)}
.page-hero--plain .page-hero__copy{max-width:640px}
.page-hero--plain .page-hero__lead{max-width:560px;margin-top:30px}

/* ===== Head Office */
.headoffice{position:relative;isolation:isolate;overflow:hidden;background:var(--surface);color:var(--ink)}
.headoffice__inner{position:relative;z-index:1;display:grid;width:min(1500px,calc(100% - var(--gutter)*2));padding-block:100px;grid-template-columns:minmax(0,420px) 1fr minmax(0,860px);column-gap:0;align-items:stretch}
.headoffice__details{grid-column:1}
.headoffice .contact-form--wall{grid-column:3}

/* A filled disc on the left, a title and its values on the right, all inside one
   soft panel, one hairline between each row. */
.headoffice__eyebrow{margin-bottom:20px}
.headoffice__eyebrow::after{content:"";display:block;width:34px;height:2px;margin-top:14px;background:var(--red)}
.headoffice__title{margin:0;color:var(--ink);font-family:var(--font-display);font-size:var(--h2-size);font-weight:400;letter-spacing:-.04em;line-height:1}
.headoffice__lead{margin:20px 0 0;color:#4d4945;font-size:15px;line-height:1.7}
.ho-list{margin-top:32px;padding:26px 24px;border:1px solid rgba(25,25,24,.09);border-radius:22px;background:rgba(250,247,243,.62)}
.ho-item{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:18px}
.ho-item+.ho-item{margin-top:22px;padding-top:22px;border-top:1px solid rgba(25,25,24,.12)}
.ho-item>i{display:grid;width:52px;height:52px;place-items:center;border:1px solid var(--red);border-radius:50%;background:var(--red);color:#fff;font-size:22px}
.ho-item__body{display:grid;gap:2px}
.ho-item__body h3{margin:0 0 5px;color:var(--ink);font-family:var(--font-body);font-size:16px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.ho-item__values{margin:0;color:#4d4945;font-size:15px;line-height:1.55}
.ho-item__body a{color:inherit;text-decoration:none;transition:color .25s var(--ease)}
.ho-item__body a[href^="tel"],.ho-item__body a[href*="wa.me"]{white-space:nowrap}
.ho-item__body a:hover{color:var(--red)}

/* On the wall the card should read as mounted, not floating: a translucent fill
   with a hairline edge instead of the solid panel the homepage uses. No
   backdrop-filter, it promotes a layer and kills subpixel text rendering. */
.contact-form--wall{max-width:none;align-content:stretch;grid-template-rows:auto auto 1fr auto;border:1px solid rgba(255,255,255,.8);background:rgba(252,250,247,.84);box-shadow:0 34px 70px -44px rgba(74,54,42,.4)}
.contact-form--wall .contact-form__field:has(textarea){grid-template-rows:auto minmax(128px,1fr)}
.contact-form--wall textarea{height:100%}
.contact-form--wall .contact-form__field input,.contact-form--wall .contact-form__field textarea{background:rgba(240,236,231,.86)}


.locate{position:relative;padding-block:100px;background:#fff}
.locate__inner{width:min(1500px,calc(100% - var(--gutter)*2))}
.locate__inner .display-title{margin:0}
/* Two addresses over a full-width map. The map only shows one of them, so it
   carries a label saying which. */
.locate__offices{display:grid;margin:clamp(30px,3vw,44px) 0 clamp(30px,3vw,44px);grid-template-columns:minmax(0,420px) minmax(0,420px);gap:clamp(30px,3vw,60px)}
.locate__office{display:grid;margin:0;gap:8px;color:#4d4945;font-size:15px;line-height:1.7}
.locate__office span{color:rgba(25,25,24,.55);font-family:var(--font-body);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.locate__office a{color:#4d4945;text-decoration:none;transition:color .25s var(--ease)}
.locate__office a:hover{color:var(--red)}
.locate__map{position:relative;overflow:hidden;border:1px solid rgba(25,25,24,.12);border-radius:clamp(20px,2vw,32px);background:#e9e1da;aspect-ratio:16/6}
/* sits above the frame, so it is a caption rather than an overlay */
.locate__pin{display:flex;margin:0 0 14px;align-items:center;gap:9px;color:rgba(25,25,24,.55);font-family:var(--font-body);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.locate__pin i{color:var(--red);font-size:15px;letter-spacing:normal}
.locate__map iframe{display:block;width:100%;height:100%;border:0;filter:saturate(.9) contrast(1.02)}

@media (max-width:1000px){
  .page-hero--plain{min-height:0;padding-block:calc(var(--header-h) + 62px) 56px;background-image:none}
  .headoffice__inner{grid-template-columns:minmax(0,1fr);row-gap:44px}
  .headoffice__details,.headoffice .contact-form--wall{grid-column:1}
  .locate{padding-block:100px}
  .locate__offices{grid-template-columns:minmax(0,1fr);gap:30px}
  .locate__map{aspect-ratio:4/3}
}
@media (max-width:640px){
  .headoffice__title{font-size:clamp(34px,9vw,50px)}
  .ho-list{padding:22px 16px}
  .ho-item{grid-template-columns:40px minmax(0,1fr);gap:14px}
  .ho-item>i{width:40px;height:40px;font-size:18px}
  .ho-item__body h3{font-size:15px}
  .ho-item__values{font-size:14px;overflow-wrap:anywhere}
  .locate__office{font-size:14px}
}

/* ===== Project Gallery (page-project-gallery.php)
   Full-screen hero like the other pages, but the backdrop is the work itself:
   three columns of project photographs drifting at different speeds. */
.page-hero--gallery{min-height:100svh;padding-block:calc(var(--header-h) + 40px) 0;overflow:hidden;background:var(--surface)}
.page-hero--gallery .page-hero__inner{grid-template-columns:minmax(0,520px) minmax(0,1fr);align-items:center;gap:clamp(40px,4vw,80px)}
.page-hero--gallery .page-hero__copy{max-width:520px}
.page-hero--gallery .page-hero__lead{max-width:460px;margin-top:28px}

.gallery-wall{display:grid;height:calc(100svh - var(--header-h) + 200px);margin:-40px 0 -200px;align-self:start;justify-self:end;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.4vw,22px);overflow:hidden}
.gallery-wall__col{display:grid;align-content:start;gap:0;will-change:transform}
/* the middle column starts higher so the three do not line up in bands */
.gallery-wall__col:nth-child(2){margin-top:-8%}
.gallery-wall img{display:block;width:100%;height:auto;border:1px solid rgba(25,25,24,.08);background:#e9e1da;filter:saturate(.9);object-fit:cover;aspect-ratio:3/2}

/* Nothing here hides the cards or the filter bar. Both sit below a full-screen
   hero, so JS has already run by the time they can be seen, and keeping the
   hidden state in JS alone means an animation clearing its inline value can
   never hand them back to a stylesheet rule that hides them again. */

.gallery{position:relative;padding-block:100px;background:#fff}
.gallery__inner{width:min(1500px,calc(100% - var(--gutter)*2))}

.gallery__filters{display:flex;margin-bottom:clamp(34px,3.4vw,48px);flex-wrap:wrap;gap:10px}
.gallery__filter{display:inline-flex;padding:11px 18px;align-items:center;gap:9px;border:1px solid rgba(25,25,24,.14);border-radius:999px;background:transparent;color:rgba(25,25,24,.7);font-family:var(--font-body);font-size:14px;font-weight:500;letter-spacing:-.01em;cursor:pointer;transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}
.gallery__filter span{color:rgba(25,25,24,.4);font-size:12px;font-weight:400;font-variant-numeric:tabular-nums}
.gallery__filter:hover{border-color:rgba(25,25,24,.3);color:var(--ink)}
.gallery__filter.is-active{border-color:var(--red);background:var(--red);color:#fff}
.gallery__filter.is-active span{color:rgba(255,255,255,.65)}

.gallery__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2vw,30px)}
.gallery__item{margin:0}
/* hidden rather than removed, so the grid keeps its column rhythm on filter */
.gallery__item[hidden]{display:none}
.gallery__frame{position:relative;display:block;width:100%;padding:0;overflow:hidden;border:1px solid rgba(25,25,24,.1);border-radius:clamp(14px,1.4vw,20px);background:#e9e1da;aspect-ratio:3/2;cursor:zoom-in}
.gallery__zoom{position:absolute;z-index:1;top:12px;right:12px;display:grid;width:36px;height:36px;place-items:center;border-radius:50%;background:rgba(252,250,247,.9);color:var(--ink);font-size:16px;opacity:0;transition:opacity .3s var(--ease)}
@media (hover:hover){.gallery__frame:hover .gallery__zoom,.gallery__frame:focus-visible .gallery__zoom{opacity:1}}
.gallery__frame img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.94);transition:transform .6s var(--ease)}
@media (hover:hover){.gallery__item:hover .gallery__frame img{transform:scale(1.035)}}
.gallery__item figcaption{display:grid;margin-top:14px;gap:5px;color:var(--ink);font-size:15px;line-height:1.5}
.gallery__item figcaption span{color:rgba(25,25,24,.5);font-family:var(--font-body);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.gallery__empty{margin:0;padding-block:60px;color:rgba(25,25,24,.5);font-size:15px;text-align:center}

@media (max-width:1000px){
  /* the wall needs two comfortable columns of width; below that it is dropped
     and the hero goes back to being copy only */
  .page-hero--gallery{min-height:0;padding-block:calc(var(--header-h) + 62px) 56px}
  .page-hero--gallery .page-hero__inner{grid-template-columns:minmax(0,1fr)}
  .gallery-wall{display:none}
  .gallery{padding-block:100px}
  .gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .gallery__grid{grid-template-columns:minmax(0,1fr)}
  .gallery__filter{padding:9px 15px;font-size:13px}
  .gallery__item figcaption{font-size:14px}
}

/* ===== Gallery lightbox
   Light, not the usual black overlay: the site is a warm off-white and a dark
   scrim would read as somebody else's component dropped in. */
.lightbox{--lightbox-h:min(58svh,600px);position:fixed;z-index:120;inset:0;display:grid;padding:clamp(16px,2.4vw,34px);grid-template-rows:auto auto;gap:clamp(14px,1.6vw,24px);align-content:center;justify-items:center}
.lightbox[hidden]{display:none}
.lightbox__scrim{position:absolute;inset:0;background:rgba(240,235,229,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:zoom-out}
.lightbox__close{position:absolute;z-index:2;top:clamp(16px,2vw,28px);right:clamp(16px,2vw,28px);display:grid;width:46px;height:46px;place-items:center;border:1px solid rgba(25,25,24,.16);border-radius:50%;background:rgba(252,250,247,.92);color:var(--ink);font-size:20px;cursor:pointer;transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.lightbox__close:hover{border-color:var(--red);background:var(--red);color:#fff}

.lightbox__stage{position:relative;z-index:1;display:grid;width:min(1180px,100%);margin:0;grid-template-rows:auto auto;gap:16px}
/* Always the full stage width, which is what keeps the arrows still: they are
   pinned to this box, not to the photograph, so a narrow image no longer drags
   them inwards. */
.lightbox__viewport{position:relative;display:grid;height:var(--lightbox-h);place-items:center}
/* No panel behind the picture. The image carries its own corner and shadow, so
   a portrait shot shows no letterboxing either side. */
.lightbox__viewport img{display:block;width:auto;height:var(--lightbox-h);max-width:calc(100% - 160px);object-fit:contain;border-radius:clamp(12px,1.2vw,18px);box-shadow:0 40px 90px -60px rgba(74,54,42,.6)}
.lightbox__stage figcaption{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:6px 14px;color:var(--ink);font-size:15px;text-align:center}
.lightbox__stage figcaption span{color:rgba(25,25,24,.5);font-family:var(--font-body);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.lightbox__stage figcaption em{font-style:normal}
.lightbox__stage figcaption b{color:rgba(25,25,24,.4);font-size:13px;font-weight:400;font-variant-numeric:tabular-nums}

.lightbox__nav{position:absolute;top:50%;z-index:2;display:grid;width:52px;height:52px;place-items:center;border:1px solid rgba(25,25,24,.16);border-radius:50%;background:rgba(252,250,247,.92);color:var(--ink);font-size:22px;cursor:pointer;translate:0 -50%;transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.lightbox__nav--prev{left:0}
.lightbox__nav--next{right:0}
.lightbox__nav:hover{border-color:var(--red);background:var(--red);color:#fff}

.lightbox__thumbs{position:relative;z-index:1;display:flex;max-width:100%;padding-bottom:6px;justify-content:flex-start;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.lightbox__thumb{flex:0 0 auto;width:92px;padding:0;overflow:hidden;border:1px solid rgba(25,25,24,.12);border-radius:10px;background:#e9e1da;aspect-ratio:3/2;cursor:pointer;opacity:.55;transition:opacity .25s var(--ease),border-color .25s var(--ease)}
.lightbox__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.lightbox__thumb:hover{opacity:.85}
.lightbox__thumb[aria-selected="true"]{border-color:var(--red);opacity:1}

body.is-lightbox-open{overflow:hidden}

/* Makes a whole card clickable without wrapping its markup in an anchor. */
.stretch-link{position:absolute;z-index:6;inset:0;border-radius:inherit}
.stretch-link:focus-visible{outline:2px solid var(--red);outline-offset:3px}

@media (max-width:640px){
  .lightbox{--lightbox-h:min(48svh,420px)}
  /* A definite height plus a max-width narrow enough to bite means object-fit
     letterboxes inside the element, and the element keeps its radius and shadow -
     so a landscape shot sat in a tall empty frame. Cap the height instead and the
     box hugs the photograph. */
  .lightbox__viewport img{width:auto;height:auto;max-width:calc(100% - 104px);max-height:var(--lightbox-h)}
  .lightbox__nav{width:44px;height:44px;font-size:19px}
  .lightbox__thumb{width:74px}
}

/* ===== Product category archive (taxonomy-product_cat.php) =================
   The product photography is a 430px cut-out on pure white, so the card frame
   is white too and the seat appears to float rather than sit in a tinted box. */

.page-hero--category{min-height:100svh;padding-block:calc(var(--header-h) + 40px) 40px;background:var(--surface)}
.page-hero--category .page-hero__inner{align-items:center;grid-template-columns:1fr 1fr;gap:clamp(32px,3vw,56px)}
.page-hero--category .page-hero__copy{max-width:560px}
.page-hero--category .page-hero__lead{max-width:470px}
.category-hero__visual{justify-self:center;width:min(100%,500px);aspect-ratio:1}
.category-hero__visual::before{display:none}
.category-hero__visual img{display:block;width:100%;height:100%;border-radius:clamp(26px,2.6vw,40px);object-fit:cover}

.products{position:relative;padding-block:100px;background:var(--surface)}
.products__inner{width:min(1500px,calc(100% - var(--gutter)*2))}

.products__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,1.8vw,26px)}
.product-card{margin:0}
.product-card__link{display:grid;overflow:hidden;border:1px solid rgba(25,25,24,.1);border-radius:clamp(14px,1.4vw,20px);background:#fff;transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.product-card__frame{display:grid;padding:clamp(14px,1.4vw,24px);aspect-ratio:1;place-items:center}
.product-card__frame img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;transition:transform .5s var(--ease)}
.product-card__body{display:grid;padding:15px 18px 17px;align-items:center;border-top:1px solid rgba(25,25,24,.08);grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;row-gap:3px}
.product-card__code{grid-area:1/1;color:var(--ink);font-size:16px}
.product-card__meta{grid-area:2/1;color:rgba(25,25,24,.5);font-family:var(--font-body);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.product-card__go{align-self:center;color:var(--red);font-size:17px;grid-area:1/2/3/3;transition:transform .3s var(--ease)}
@media (hover:hover){
  .product-card__link:hover{border-color:rgba(201,21,43,.3);box-shadow:0 26px 50px -40px rgba(74,54,42,.5);transform:translateY(-3px)}
  .product-card__link:hover .product-card__frame img{transform:scale(1.05)}
  .product-card__link:hover .product-card__go{transform:translateX(3px)}
}
.products__empty{margin:0;padding-block:60px;color:rgba(25,25,24,.5);font-size:15px;text-align:center}

.products .navigation.pagination{display:flex;margin-top:clamp(34px,3.4vw,48px);justify-content:center}
.products .nav-links{display:flex;align-items:center;gap:8px}
.products .page-numbers{display:grid;width:40px;height:40px;place-items:center;border:1px solid rgba(25,25,24,.14);border-radius:50%;color:rgba(25,25,24,.7);font-size:14px;transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}
.products .page-numbers:hover{border-color:rgba(25,25,24,.3);color:var(--ink)}
.products .page-numbers.current{border-color:var(--red);background:var(--red);color:#fff}
.products .page-numbers.dots{border-color:transparent}

@media (max-width:1200px){
  .products__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1000px){
  .page-hero--category{min-height:0;padding-block:calc(var(--header-h) + 62px) 56px}
  .page-hero--category .page-hero__inner{grid-template-columns:minmax(0,1fr)}
  .category-hero__visual{justify-self:start;width:min(100%,380px)}
  .products{padding-block:76px}
}
@media (max-width:640px){
  .products__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .product-card__body{padding:13px 14px 15px}
  .product-card__code{font-size:15px}
}

/* ===== Product detail (single-product.php) ================================
   No price, no cart: the seat, its numbers, and one way to ask about it. */

.product{position:relative;display:flex;padding-block:calc(var(--header-h) + clamp(52px,4.2vw,80px)) clamp(72px,6vw,104px);align-items:center;background:var(--surface)}

/* The name sits beside the photograph. Same face and size as every other page
   title, so the product page reads as part of the set. */
.product__code{margin:0;color:#111315;font-family:var(--font-display);font-size:var(--h1-size);font-weight:400;letter-spacing:-.06em;line-height:.94;text-transform:none}
.product__about{margin:26px 0 0;color:rgba(25,25,24,.5);font-family:var(--font-body);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.product__lead{max-width:470px;margin:10px 0 0;color:#4f4b47;font-family:var(--font-body);font-size:15px;font-weight:400;line-height:1.62}
.product__inner{display:grid;width:min(1500px,calc(100% - var(--gutter)*2));align-items:start;justify-content:space-between;grid-template-columns:minmax(0,660px) minmax(0,580px);gap:clamp(40px,4vw,80px)}

/* the cut-outs are on white, so the stage is white and the seat appears to float */
.product__media{position:sticky;top:calc(var(--header-h) + 28px);display:grid;align-items:start;grid-template-columns:minmax(0,1fr) auto;gap:clamp(10px,1vw,16px)}
.product__stage{display:block;margin:0;padding:clamp(14px,1.3vw,20px);border:1px solid rgba(25,25,24,.1);border-radius:clamp(18px,1.8vw,26px);background:#fff;height:clamp(320px,33vw,480px)}
.product__stage img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain}
.product__ground{position:absolute;z-index:0;bottom:14%;left:50%;width:62%;height:9%;translate:-50% 0;border-radius:50%;background:radial-gradient(ellipse at center,rgba(74,54,42,.19),rgba(74,54,42,.07) 52%,transparent 72%);filter:blur(2px)}
.product__thumbs{display:grid;align-content:start;gap:clamp(8px,.8vw,12px)}
.product__thumb{width:clamp(62px,5.4vw,78px);padding:6px;border:1px solid rgba(25,25,24,.12);border-radius:12px;background:#fff;cursor:pointer;transition:border-color .25s var(--ease)}
.product__thumb img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.product__thumb:hover{border-color:rgba(25,25,24,.3)}
.product__thumb.is-active{border-color:var(--red)}

.product__info{align-self:center}
.product__eyebrow{margin-bottom:22px}
.product__eyebrow a{display:inline-flex;align-items:center;gap:8px;color:var(--red);transition:gap .25s var(--ease)}
.product__eyebrow a:hover{gap:12px}
.product__eyebrow i{font-size:13px}


.product-specs{width:100%;border-collapse:collapse}
.product-specs tbody{counter-reset:spec}
.product-specs tr{counter-increment:spec}
.product-specs th,.product-specs td{padding:13px 0;border-top:1px solid rgba(25,25,24,.12);text-align:left;vertical-align:top;transition:border-color .3s var(--ease)}
.product-specs th::before{content:counter(spec,decimal-leading-zero);display:inline-block;width:28px;color:rgba(25,25,24,.28);font-family:var(--font-body);font-size:11px;font-weight:500;letter-spacing:.14em}
@media (hover:hover){.product-specs tr:hover th,.product-specs tr:hover td{border-color:rgba(201,21,43,.34)}}
.product-specs th{width:1%;padding-right:clamp(24px,2.6vw,44px);color:var(--ink);font-family:var(--font-body);font-size:11px;font-weight:500;letter-spacing:.18em;line-height:1.6;text-transform:uppercase;white-space:nowrap}
.product-specs td{width:100%;color:#4d4945;font-size:15px;line-height:1.6}
.product__cta{margin-top:34px}
.motion-enabled .product-specs tr{opacity:0}
.motion-enabled .product-tech__figure img{clip-path:inset(0 100% 0 0)}

.product-spec{padding-block:clamp(70px,6vw,104px);background:var(--surface)}
.product-spec__inner{display:grid;width:min(1500px,calc(100% - var(--gutter)*2));justify-items:center;grid-template-columns:minmax(0,1fr);gap:clamp(34px,3.6vw,54px);text-align:center}
.product-spec__copy .eyebrow{margin-bottom:14px;color:var(--red)}
.product-spec__copy .display-title{margin:0}
.product-spec__lead{max-width:560px;margin:22px auto 0;color:#4f4b47;font-size:15px;line-height:1.58}
.product-spec__table{width:100%;max-width:840px;text-align:left}

.product-tech{padding-block:clamp(70px,6vw,110px);background:var(--surface)}
.product-tech__inner{display:grid;width:min(1500px,calc(100% - var(--gutter)*2));justify-items:center;grid-template-columns:minmax(0,1fr);gap:clamp(34px,3.6vw,58px);text-align:center}
.product-tech__lead{max-width:520px;margin:22px auto 0;color:#4f4b47;font-size:15px;line-height:1.58}
.product-tech__figure{display:grid;margin:0;place-items:center}
/* the drawing is line art on white, so it needs no frame - just room */
.product-tech__figure img{display:block;width:auto;max-width:100%;height:clamp(380px,50vw,680px);object-fit:contain;mix-blend-mode:multiply}

.product-more{padding-top:clamp(50px,4.5vw,74px)}
.product-more__head{display:flex;margin-bottom:clamp(30px,3vw,44px);align-items:flex-end;justify-content:space-between;gap:24px}
.product-more__head .eyebrow{margin-bottom:14px;color:var(--red)}
.product-more__head .display-title{margin:0}
.product-more__all{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-size:14px;font-weight:500;white-space:nowrap;transition:gap .25s var(--ease),color .25s var(--ease)}
.product-more__all i{color:var(--red);font-size:17px}
.product-more__all:hover{gap:14px;color:var(--red)}

@media (max-width:1000px){
  .product{min-height:0;padding-block:calc(var(--header-h) + 40px) 66px}
  .product__inner{grid-template-columns:minmax(0,1fr);gap:40px}
  .product__media{position:static;max-width:560px}
  /* one column: nothing to centre against */
  .product__info{align-self:start}
  .product-spec__inner{gap:28px}
  .product-tech__inner{gap:30px}
  .product-tech__figure img{height:clamp(300px,58vw,520px)}
}
@media (max-width:640px){
  .product__stage{padding:20px;aspect-ratio:1}
  .product__media{grid-template-columns:minmax(0,1fr)}
  .product__thumbs{grid-auto-flow:column;justify-content:start;margin-top:12px}
  .product__thumb{width:62px}
  .product-specs th{padding-right:16px;font-size:10px;white-space:normal}
  .product-specs td{font-size:14px}
  .product-more__head{align-items:flex-start;flex-direction:column;gap:14px}
  /* width:100% resolved against a shrink-to-fit grid item, so the figure was
     0x0 and the drawing never loaded. A definite box fixes both, and keeps the
     section's height stable before the image arrives. */
  .product-tech__figure{width:100%}
  .product-tech__figure img{width:100%;height:clamp(260px,72vw,340px)}
  /* The plotter wipe measures its trigger before that image lands, so on a phone
     the drawing just sits there rather than being wiped in. */
  .motion-enabled .product-tech__figure img{clip-path:none}
}

/* ===== Products overview (page-products.php) ============================== */

.page-hero--products{min-height:100svh;background:
  linear-gradient(90deg,var(--surface) 0,var(--surface) 26%,rgba(242,237,232,.88) 36%,rgba(242,237,232,.46) 47%,rgba(242,237,232,.12) 58%,rgba(242,237,232,0) 68%),
  linear-gradient(180deg,rgba(242,237,232,0) 62%,rgba(242,237,232,.45) 82%,rgba(242,237,232,.86) 94%,var(--surface) 100%),
  url("../assets/images/products/products-hero.webp") right center/cover no-repeat,
  var(--surface)}
.page-hero--products .page-hero__inner{grid-template-columns:minmax(0,1fr)}
.page-hero--products .page-hero__copy{max-width:620px}
.page-hero--products .page-hero__lead{max-width:540px}

/* real counts, so they read as facts rather than decoration */

/* Six range cards. The photographs are all 1:1, so the frame is square and
   every one is shown whole rather than cropped to a 4:3 box. */
.ranges{position:relative;padding-block:clamp(70px,6vw,104px);background:var(--surface)}
.ranges__inner{width:min(1500px,calc(100% - var(--gutter)*2))}
.ranges__head{margin-bottom:clamp(34px,3.4vw,52px);text-align:center}
.ranges__head .eyebrow{margin-bottom:14px;color:var(--red)}
.ranges__head .display-title{margin:0}
.ranges__rule{display:block;width:64px;height:2px;margin:18px auto 0;border-radius:2px;background:var(--red)}
.ranges__track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2vw,32px)}

.range-panel{margin:0}
.range-panel__link{display:grid;height:100%;overflow:hidden;border:1px solid rgba(25,25,24,.1);border-radius:clamp(16px,1.6vw,24px);background:#fff;grid-template-rows:auto 1fr;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.range-panel__media{position:relative;display:block;padding:clamp(16px,1.8vw,26px) clamp(36px,4.4vw,70px);overflow:hidden;aspect-ratio:3/2;background:#fff}
.range-panel__media img{display:block;width:100%;height:100%;object-fit:contain}
.range-panel__badge{position:absolute;z-index:1;top:16px;left:16px;display:grid;width:44px;height:44px;place-items:center;border-radius:50%;background:rgba(201,21,43,.09);color:var(--red);font-size:20px;transition:background .3s var(--ease),color .3s var(--ease)}
.range-panel__body{display:grid;padding:clamp(20px,1.8vw,30px);align-content:start;gap:9px}
.range-panel__name{margin:0;color:var(--ink);font-family:var(--font-body);font-size:16px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.range-panel__meta{color:rgba(25,25,24,.5);font-family:var(--font-body);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.range-panel__lead{margin-top:4px;color:#4d4945;font-size:15px;line-height:1.6}
.range-panel__go{display:inline-flex;margin-top:10px;align-items:center;gap:9px;color:var(--red);font-size:14px;font-weight:500}
.range-panel__go em{font-style:normal}
.range-panel__go i{font-size:17px;transition:transform .3s var(--ease)}
@media (hover:hover){
  .range-panel__link:hover{border-color:rgba(201,21,43,.3);box-shadow:0 30px 56px -44px rgba(74,54,42,.5)}
  .range-panel__link:hover .range-panel__go i{transform:translateX(4px)}
  .range-panel__link:hover .range-panel__badge{background:var(--red);color:#fff}
}

.fitout{padding-block:clamp(70px,6vw,104px);background:var(--surface)}
.fitout__inner{display:grid;width:min(1500px,calc(100% - var(--gutter)*2));align-items:start;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:clamp(36px,4vw,74px)}
.fitout__copy{position:sticky;top:clamp(var(--header-h),calc(50svh - 170px),50svh);align-self:start}
.fitout__copy .eyebrow{margin-bottom:14px;color:var(--red)}
.fitout__copy .display-title{margin:0}
.fitout__lead{max-width:330px;margin:22px 0 0;color:#4f4b47;font-size:15px;line-height:1.58}
.fitout__all{display:inline-flex;margin-top:24px;align-items:center;gap:10px;color:var(--ink);font-size:14px;font-weight:500;transition:gap .25s var(--ease),color .25s var(--ease)}
.fitout__all i{color:var(--red);font-size:17px}
.fitout__all:hover{gap:14px;color:var(--red)}
.fitout__list{display:grid;margin:0;padding:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.4vw,20px);list-style:none}
.fitout__list a{display:grid;overflow:hidden;border:1px solid rgba(25,25,24,.1);border-radius:14px;background:#fff;gap:0;transition:border-color .25s var(--ease)}
.fitout__list img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.fitout__list span{padding:11px 12px 13px;color:rgba(25,25,24,.66);font-family:var(--font-body);font-size:11px;font-weight:500;letter-spacing:.14em;line-height:1.4;text-transform:uppercase}
.fitout__list a:hover{border-color:rgba(201,21,43,.32)}

.products-cta{padding-block:clamp(70px,6vw,110px);background:var(--surface)}
.products-cta__inner{width:min(820px,calc(100% - var(--gutter)*2));margin-inline:auto;text-align:center}
.products-cta__inner .eyebrow{margin-bottom:14px;color:var(--red)}
.products-cta__inner .display-title{margin:0 0 22px}
.products-cta__inner>p:not(.eyebrow){max-width:610px;margin:0 auto;color:#4f4b47;font-size:15px;line-height:1.6}
.products-cta__actions{display:flex;margin-top:34px;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(18px,2vw,34px)}
.products-cta__actions .fitout__all{margin-top:0}

@media (max-width:1200px){
  .ranges__track{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fitout__list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1000px){
  .ranges{padding-block:76px}
  .fitout__inner{grid-template-columns:minmax(0,1fr);gap:32px}
  /* nothing to scroll past on one column */
  .fitout__copy{position:static;min-height:0}
  .fitout__lead{max-width:520px}
}
@media (max-width:640px){
  .ranges__track{grid-template-columns:minmax(0,1fr)}
  .fitout__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .products-cta__actions{flex-direction:column;align-items:stretch}
}

/* ===== Get A Quote dialog ==================================================
   Same shell as the gallery lightbox: fixed layer, scrim, close button, and
   [hidden] doing the actual hiding so nothing is left invisible if JS fails. */

.quote{position:fixed;z-index:130;inset:0;display:grid;padding:clamp(14px,2vw,28px);align-content:center;justify-items:center}
.quote[hidden]{display:none}
.quote__scrim{position:absolute;inset:0;background:rgba(240,235,229,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer}
.quote__panel{position:relative;z-index:1;width:min(740px,100%);max-height:calc(100svh - clamp(28px,4vw,56px));padding:clamp(22px,2.6vw,36px);overflow-y:auto;border:1px solid rgba(25,25,24,.1);border-radius:clamp(18px,1.8vw,26px);background:#fff;box-shadow:0 50px 110px -60px rgba(74,54,42,.6)}
.quote__close{position:absolute;z-index:2;top:clamp(14px,1.6vw,22px);right:clamp(14px,1.6vw,22px);display:grid;width:42px;height:42px;place-items:center;border:1px solid rgba(25,25,24,.16);border-radius:50%;background:transparent;color:var(--ink);font-size:19px;cursor:pointer;transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.quote__close:hover{border-color:var(--red);background:var(--red);color:#fff}
.quote__eyebrow{margin-bottom:12px;color:var(--red)}
.quote__title{margin:0;color:var(--ink);font-family:var(--font-display);font-size:clamp(24px,2.4vw,29px);font-weight:400;letter-spacing:-.03em;line-height:1.1}
.quote__lead{max-width:560px;margin:10px 0 0;color:#4f4b47;font-size:15px;line-height:1.58}

/* Compact variant: the panel already provides the card, so the form drops its
   own padding, border and shadow and tightens up enough to need no scrolling. */
.quote__form{margin-top:clamp(14px,1.4vw,18px);padding:0;border:0;border-radius:0;background:none;box-shadow:none;gap:11px}
.quote__form .contact-form__row{gap:16px}
.quote__form .contact-form__field{gap:6px}
.quote__form .contact-form__field>span{font-size:13px}
.quote__form .contact-form__field input,.quote__form .contact-form__field textarea,.quote__form .contact-form__field select{padding:12px 16px;border-radius:12px;font-size:15px}
.quote__form .contact-form__field textarea{min-height:60px}
.quote__form .button--contact{min-height:50px;margin-top:0}

/* selects wear the same skin as the inputs, with our own caret */
.contact-form__field select{width:100%;padding:16px 20px;appearance:none;border:1px solid transparent;border-radius:14px;background:#f0ece7 no-repeat right 18px center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23191918' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");padding-right:44px;color:var(--ink);font-family:var(--font-body);font-size:16px;outline:0;cursor:pointer;transition:border-color .25s var(--ease),background-color .25s var(--ease),box-shadow .25s var(--ease)}
.contact-form__field select:focus{border-color:var(--red);background-color:#fdfcfb;box-shadow:0 0 0 4px rgba(201,21,43,.1)}
.contact-form__field select:invalid{color:rgba(25,25,24,.4)}

@media (max-width:640px){
  .quote{padding:14px}
  .quote__panel{padding:22px 18px 26px}
  .quote__close{top:12px;right:12px;width:38px;height:38px;font-size:17px}
}


/* ===== Mobile pass ================================================================
   Tuned against an iPhone 12 Pro viewport (390 x 844). Three layout components were
   built desktop-only and collapsed at this width; the rest is type size, alignment
   and tap targets. */

/* The hero's bottom blend sat at z-index 6 - above the copy, not just the photograph.
   On desktop the text sits high enough to escape it; on mobile it is bottom-aligned
   and the blend washed the whole block out. */
.hero::after{z-index:0}

@media (max-width:820px){
  /* --- Solutions: a 3D carousel at 390px leaves 92px cards fanned off-screen, so
         lay the five out as rows instead. --- */
  .carousel{height:auto;margin-top:26px}
  .carousel__podium,.carousel__button{display:none}
  .carousel__scene{position:static;top:auto;left:auto;display:grid;width:auto;height:auto;gap:12px;perspective:none}
  .solution-card{position:static;display:grid;width:auto;height:auto;padding:clamp(16px,2.2vw,20px);translate:none;
    grid-template-columns:clamp(104px,23vw,190px) minmax(0,1fr);grid-template-areas:"img idx" "img title" "img desc";
    align-content:center;column-gap:clamp(16px,2.6vw,24px);row-gap:3px;box-shadow:0 10px 26px -18px rgba(74,54,42,.5);
    transform:none!important;opacity:1!important;filter:none!important;z-index:auto!important;pointer-events:auto!important}
  .solution-card__index{grid-area:idx;font-size:12px}
  .solution-card img{grid-area:img;height:clamp(104px,23vw,190px);min-height:0;flex:0 0 auto}
  .solution-card h3{grid-area:title;font-size:14px}
  .solution-card p{grid-area:desc;margin-top:2px;font-size:13px}

  /* --- Testimonials: the track showed three per view, which is a 105px card here. --- */
  .quote-card{padding:24px;flex:0 0 100%}
  .quote-card blockquote{padding:38px 6px 28px var(--quote-indent);font-size:16px}
  .quote-card figcaption,.quote-card figcaption strong,.quote-card figcaption span{font-size:14px}
  .quote-carousel__dot{position:relative;height:16px;padding:0;background:transparent}
  .quote-carousel__dot::before{content:"";position:absolute;top:50%;right:0;left:0;height:3px;margin-top:-1.5px;background:rgba(25,25,24,.22);transition:background .3s var(--ease)}
  .quote-carousel__dot.is-active{transform:none}
  .quote-carousel__dot.is-active::before{background:var(--red);transform:scaleX(1.14)}

  /* --- Hero: centre the copy and fill the CTA. Outlined red on open photography
         reads as a ghost at this size. --- */
  /* The photograph carries a fade baked into its left third, for the desktop layout
     where the copy sits left. Centred copy does not need it, so crop past it. */
  .hero__media img{object-position:66% center}
  .hero__inner{align-items:center;padding-top:var(--header-h);padding-bottom:0;text-align:center}
  .hero__content{width:100%}
  .hero__eyebrow{justify-content:center;font-size:11px;letter-spacing:.1em}
  .hero__copy{max-width:none;margin-inline:auto;color:#3d3935;font-size:15px}
  .hero__actions{align-items:center;justify-content:center}
  .hero .button--outline-red{border-color:var(--red);background:var(--red);color:#fff}
  .hero::after{top:0;height:100%;background:linear-gradient(180deg,rgba(242,237,232,0) 0%,rgba(242,237,232,.18) 24%,rgba(242,237,232,.72) 42%,rgba(242,237,232,.8) 58%,rgba(242,237,232,.3) 78%,var(--surface) 100%)}

  /* --- Section intros centre on mobile, the way About and Trust already did. --- */
  .projects__head{display:grid;justify-items:center;gap:22px;text-align:center}
  .projects__heading{text-align:center}
  .ready__inner--cta,.ready__inner--cta .ready__copy{text-align:center}
  .ready__inner--cta .ready__eyebrow{justify-content:center}
  .ready__inner--cta .ready__copy p:not(.eyebrow){margin-inline:auto}
  .ready__actions{justify-content:center}

  /* --- Type: anything under 12px is unreadable on a phone. --- */
  .eyebrow{font-size:12px}
  .project__tag{font-size:11px}
  .project__cta,.project__cta-label{font-size:12px}
  .product-card__meta,.product__about,.range-panel__meta,.locate__pin{font-size:12px}
  .product-spec__table th{font-size:12px}
  .footer__links a,.footer__contact a,.footer__contact p{font-size:13px}
  .footer__bottom p,.footer__bottom a{font-size:12px}
  .project__caption p{font-size:12px}

  /* --- Tap targets. --- */
  .menu-button{min-height:44px;padding-left:10px}
  .footer__links a,.footer__contact a{padding-block:7px}
  .contact__card-body a{display:inline-block;padding-block:6px}
  .fitout__all,.product-more__all{min-height:40px}

  /* --- The showreel ran a full viewport tall, which is most of a scroll for one clip. --- */
  .about__media{position:relative;left:50%;width:100vw;max-width:none;margin-inline:-50vw;justify-self:stretch}
  .about__media img,.about__media video{width:100%;height:52svh;min-height:300px}

  /* --- Line breaks written for a wide column land mid-sentence here. --- */
  .solutions__lead br,.projects__heading br,.ready__copy br{display:none}

  /* --- Card order is the carousel's, where index 2 sits at the front. Stacked, it has
         to read 01 to 05. Desktop keeps the DOM order. --- */
  .solution-card:nth-child(1){order:4}
  .solution-card:nth-child(2){order:5}
  .solution-card:nth-child(3){order:1}
  .solution-card:nth-child(4){order:2}
  .solution-card:nth-child(5){order:3}

  /* --- justify-items shrink-wraps each child, so the heading box was only as wide as
         its longest line and the short line read as left-aligned inside it. --- */
  /* text-wrap:balance shrinks the heading box below the column, so centre the box
     itself as well as the text inside it. */
  .projects__head{grid-template-columns:minmax(0,1fr);justify-items:stretch}
  .projects__heading,.projects__heading .display-title,.projects__head .eyebrow{margin-inline:auto;text-align:center}
  .projects__head .button{justify-self:center}

  /* --- Buttons are nowrap by default; the contact CTA is too long for 390px. --- */
  .button{white-space:normal}
  .button--contact{padding-inline:16px;gap:12px;line-height:1.3}
  .button--contact span{text-align:center}

  /* --- Footer centres too. --- */
  .footer__grid{justify-items:center;text-align:center}
  .footer__brand>p{max-width:none;margin-inline:auto}
  .footer__links{align-items:center}
  .footer__brand .brand{margin-inline:auto}
  /* Icon over text rather than beside it: a 26px disc next to a three-line block
     leaves the disc stranded on the left however the text is centred. */
  .footer__contact p,.footer__contact>a,.footer__person{align-items:center;flex-direction:column;gap:8px;text-align:center}
  .footer__person>div{justify-items:center}
  .footer__bottom{flex-direction:column;gap:8px;text-align:center}
  .footer__bottom a+a{margin-left:16px}

  /* --- The active dot inherited a red background across the whole 16px hit area. --- */
  .quote-carousel__dot.is-active{background:transparent}
}

/* The rows above are the 390px treatment and the block runs to 820px, where a 104px
   thumbnail sat stranded beside 560px of text - hence the clamps on the media column,
   the padding and the gap. Past 640 the type needs the same step up. */
@media (min-width:641px) and (max-width:820px){
  .solution-card__index{font-size:13px}
  .solution-card h3{font-size:16px}
  .solution-card p{margin-top:4px;font-size:14px}
}

@media (max-width:520px){
  /* The lead project card is twice the others on desktop, where it also sits in a
     wider column. At one card per row that reads as a mistake. */
  .projects__grid .project:first-child h3{font-size:22px}
}

/* ===== Mobile pass: the inner pages ===============================================
   Same rules the homepage settled on at 390px: the section intro - eyebrow,
   display title, lead paragraph, buttons - centres, while anything inside a card
   keeps its own left-aligned rows. Type follows the homepage scale as well
   (h1 42, h2 36, eyebrow 12, body 15/14/13/12); several of these pages were
   running headings half again as large as the homepage's. */

@media (max-width:640px){
  /* --- Every page hero, the way the homepage's is. --- */
  .page-hero__inner{justify-items:center}
  .page-hero__copy{max-width:none;margin-inline:auto;text-align:center}
  .page-hero__title{font-size:42px;line-height:.96}
  .page-hero__lead{max-width:none;margin-inline:auto;font-size:15px}

  /* --- One display-title size, the homepage's. --- */
  .pledge__heading .display-title,.ready__copy .display-title,
  .headoffice__title{font-size:36px}
  .pledge__copy h3{font-size:22px}

  /* --- About. The story column is an intro, so it centres; the timeline beside
         it is a card and keeps its rows left. --- */
  .story{padding-block:76px}
  .story__copy{max-width:none;margin-inline:auto;text-align:center}
  .story__copy .display-title::after{margin-inline:auto}
  .pledge__inner{padding-block:76px}

  /* --- The CTA band's photograph is pinned to the bottom 260px of the section,
         and the wider breakpoint reserves 300px of padding for it. Overriding
         padding-block here had been dropping that, so the buttons sat on the
         photograph. --- */
  .ready__inner{padding-block:76px 300px}

  /* --- Contact. --- */
  .headoffice__inner{padding-block:76px}
  .headoffice__details{text-align:center}
  .headoffice__eyebrow::after{margin-inline:auto}
  .ho-list{text-align:left}
  .locate{padding-block:76px}
  .locate__inner{text-align:center}
  .locate__pin{justify-content:center}
  .locate__office{justify-items:center}

  /* --- Products. --- */
  .fitout__copy{text-align:center}
  .fitout__lead{max-width:none;margin-inline:auto}
  .fitout__list span{font-size:12px;letter-spacing:.1em}

  /* --- Gallery. --- */
  .gallery{padding-block:76px}
  .gallery__filters{justify-content:center}

  /* --- Single product. --- */
  .product__info{text-align:center}
  .product__code{font-size:42px}
  .product__lead{max-width:none;margin-inline:auto}
  .product__eyebrow a{justify-content:center}
  .product-spec__table,.product-specs th,.product-specs td{text-align:left}
  /* A two-column table leaves the label an ~111px column, and at that width it either
     wraps around the row number or has to sit under it - both read as a mess. Stack the
     rows instead: the label gets the full 346px, every one of them then fits on one line
     with its number, and the value sits directly beneath. Costs 21px of height. */
  .product-specs,.product-specs tbody,.product-specs tr,
  .product-specs th,.product-specs td{display:block;width:auto}
  .product-specs tr{padding-block:14px;border-top:1px solid rgba(25,25,24,.12)}
  .product-specs th{padding:0 0 7px;border-top:0;white-space:normal}
  .product-specs th::before{display:inline-block;width:26px}
  /* Same 26px the number occupies, so the value starts under the label and the number
     hangs off to the left of both. */
  .product-specs td{padding:0 0 0 26px;border-top:0}
  .product-more__head{align-items:center;text-align:center}
}

@media (max-width:640px){
  /* --- The products hero's scrim runs left to right, for copy in the left
         third. Centred, the copy landed on the open photograph. --- */
  .page-hero--products{background:
    linear-gradient(180deg,rgba(242,237,232,.34) 0%,rgba(242,237,232,.82) 20%,rgba(242,237,232,.9) 48%,rgba(242,237,232,.78) 72%,rgba(242,237,232,.6) 86%,var(--surface) 100%),
    url("../assets/images/products/products-hero.webp") center/cover no-repeat,
    var(--surface)}

  /* --- Contact, Gallery and Category heroes sit at header + 62 over 56. About and
         Products never got that: they were still on the base 100/100, and
         --products also kept min-height:100svh - it is declared after the mobile
         reset, so it won the cascade and gave Products a full-screen hero carrying
         237px of copy. About keeps 44 at the bottom because its hero ends on a
         photograph and 56 + 76 over the next heading reads as a hole. --- */
  .page-hero--editorial{min-height:0;padding-block:calc(var(--header-h) + 62px) 44px}
  .page-hero--products{min-height:0;padding-block:calc(var(--header-h) + 62px) 56px}

  /* --- Sizes and weights the homepage does not use: 16/500, 22/500, 15/700. --- */
  .range-panel__name{font-size:19px;font-weight:400}
  .timeline__step h3{font-weight:400}
  .product-card__code{font-weight:500}

  /* --- align-items:center shrink-wraps each child, so the heading box was only
         as wide as its longest line and wrapped three ways. --- */
  .product-more__head>div{width:100%}

  /* --- "Established in 1997" is nowrap for the desktop column. At 36px that is
         320px wide: it clears 390 but not a 360px phone. --- */
  .story__copy .display-title{white-space:normal}

  /* --- The stage inherits height:clamp(320px,33vw,480px) from the base rule, and
         a box with an aspect-ratio and a definite height does not stretch, so the
         square resolved to 320 inside the 346 column and sat flush left with 26px
         of dead space beside it. --- */
  .product__stage{height:auto}

  /* --- The card body is code / arrow on the first row and VIEW DETAILS under it,
         but the arrow spanned both rows, leaving the label a 107px column - enough
         to break those two words over two lines in every card on the site. --- */
  .product-card__go{grid-area:1/2/2/3}
  .product-card__meta{grid-area:2/1/3/3}

  /* --- 30px of card padding inside a 346px shell left the fields at 285. --- */
  .contact-form{padding:24px}

  /* --- Stretching a CTA the full 346px turns its 18px padding into 90px of empty
         red on either side of the label. Let them size to their own text; the row
         is already centred. --- */
  .ready__actions .button{width:auto}
  .products-cta__actions{align-items:center}
}

/* ===== Tablet: the same treatment as the phone, at the phone's breakpoint plus one
   ==================================================================================
   641-1000 was still running the desktop layout in a narrow column: the About and
   Category heroes kept their two-column split, which leaves the copy 253px at 768 -
   narrower than the phone gets - and every section intro stayed left while the phone
   centres. The type scale is deliberately not touched here; only alignment, the hero
   column and button width. */

@media (max-width:1000px){
  .page-hero__inner{grid-template-columns:minmax(0,1fr);justify-items:center}
  .page-hero__copy{max-width:none;margin-inline:auto;text-align:center}
  .page-hero__lead{max-width:none;margin-inline:auto}
  .page-hero__visual{justify-self:center;width:100%}

  /* Section intros centre; anything inside a card keeps its own left-aligned rows. */
  .story__copy{max-width:none;margin-inline:auto;text-align:center}
  .story__copy .display-title::after{margin-inline:auto}
  .headoffice__details{text-align:center}
  .headoffice__eyebrow::after{margin-inline:auto}
  .ho-list{text-align:left}
  .locate__inner{text-align:center}
  .locate__pin{justify-content:center}
  .locate__office{justify-items:center}
  /* max-width with no auto margin: the whole CTA block sat 48px left of the page's
     centre line while its own text was centred inside it. */
  .ready__copy,.ready__copy p:not(.eyebrow){margin-inline:auto}

  .fitout__copy{text-align:center}
  .fitout__lead{max-width:none;margin-inline:auto}
  .gallery__filters{justify-content:center}
  .product__info{text-align:center}
  .product__lead{max-width:none;margin-inline:auto}
  .product__eyebrow a{justify-content:center}
  .product-spec__table,.product-specs th,.product-specs td{text-align:left}
  /* It is a space-between row on desktop, so align-items only moved it vertically
     and "See all" stayed pinned to the right edge. */
  .product-more__head{flex-direction:column;align-items:center;text-align:center}
  .product-more__head>div{width:100%}

  /* The arrow belongs on the card's centre line, across both rows the way it is on
     desktop. It only got pushed onto the code's row because VIEW DETAILS at 12px is
     109px against a 107px column; at 10px it is 91px and fits, so the arrow can span
     again and the label keeps its full-width row underneath it. */
  .product-card__meta{font-size:10px}
  .product-card__go{grid-area:1/2/3/3}

  /* A stretched CTA turns its 18px padding into a third of the button. The enquiry
     form's submit was 653px wide at 768. Size them to their own text instead. */
  .ready__actions,.products-cta__actions{justify-content:center}
  .ready__actions .button,.products-cta__actions .button{width:auto}
}

/* Tablet only - the phone layout is signed off and must not move. */
@media (min-width:641px) and (max-width:1000px){
  /* The enquiry form's submit is a grid item filling the card: 285px on a phone,
     which is right, but 653px at 768. */
  .contact-form .button--contact{width:auto;justify-self:center;padding-inline:26px}

  /* The homepage hero CTA is width:100% below 900, which is 767px of button for a
     two-word label at 820. */
  .hero__actions .button{width:auto}

  /* The homepage contact intro is the last block still reading left while every
     other section on the page centres. */
  .contact__intro{max-width:none;margin-inline:auto;align-items:center;justify-self:center;text-align:center}
  .contact__intro>p:not(.eyebrow){margin-inline:auto}

  /* Same letterboxed frame the phone had: a definite height plus a max-width narrow
     enough to bite leaves the photograph inside an empty box that keeps the radius
     and shadow. */
  .lightbox__viewport img{width:auto;height:auto;max-height:var(--lightbox-h)}
}