/* Hermanus Blinds — clifftop layout: horizon-line hero, cliff-path section
   flow, spout-arc signature moment.
   sea spray + bluff ink + old harbour brass | Playfair Display + Inter Tight */

:root{
  --canvas:#F4F6F6;
  --canvas-alt:#ECF0F0;
  --ink:#1A2224;
  --ink-soft:#3E4A4C;
  --accent:#6F949A;
  --accent-deep:#45646A;
  --brass:#AB8D5C;
  --brass-deep:#7C6640;
  --white:#FFFFFF;
  --line:rgba(26,34,36,.13);
  --shadow:0 24px 60px -28px rgba(14,18,19,.38);
  --serif:'Playfair Display', Georgia, serif;
  --sans:'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --section-pad: clamp(64px, 9vw, 104px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--sans);
  background:var(--canvas);
  color:var(--ink);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-0.015em;
  margin:0 0 .5em;
  color:var(--ink);
}
h2{ font-size:clamp(2.1rem, 3.4vw, 3.1rem); }
h3{ font-size:1.35rem; }
p{ margin:0 0 1em; max-width:66ch; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
.wrap{ width:min(1180px, 92vw); margin-inline:auto; }

.skip-link{ position:absolute; left:-999px; top:0; background:var(--ink); color:var(--white); padding:12px 20px; z-index:999; }
.skip-link:focus{ left:12px; top:12px; }

.eyebrow{
  display:block; font-family:var(--sans); font-weight:700; font-size:.72rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--accent-deep);
  margin-bottom:.9em;
}
.section-head{ max-width:62ch; margin-bottom:2.4rem; }
.section-head p{ color:var(--ink-soft); }

.rule{
  height:1px; background:var(--line); width:100%; margin:0 0 3rem;
  transform-origin:left center; transform:scaleX(0);
}
.rule.in{ transform:scaleX(1); transition:transform .9s cubic-bezier(.22,1,.36,1); }

.section{ padding:var(--section-pad) 0; }
.section--dim{ background:var(--canvas-alt); }
.section--ink{ background:var(--ink); color:var(--canvas); }
.section--ink .eyebrow{ color:var(--brass); }
.section--ink h2, .section--ink h3, .section--ink strong{ color:var(--white); }
.section--ink p{ color:rgba(244,246,246,.78); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:.5em; font-family:var(--sans);
  font-weight:700; font-size:.92rem; letter-spacing:.01em; padding:.95em 1.7em;
  border-radius:2px; text-decoration:none; cursor:pointer; border:1.5px solid transparent;
  transition:transform .25s cubic-bezier(.2,.9,.3,1), background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.btn-primary{ background:var(--accent-deep); color:var(--white); }
.btn-primary:hover{ background:var(--accent); transform:translateY(-2px); box-shadow:0 14px 26px -14px rgba(69,100,106,.55); }
.btn-outline{ border-color:currentColor; color:var(--ink); }
.btn-outline.on-ink{ color:var(--white); border-color:rgba(255,255,255,.6); }
.btn-outline:hover{ background:rgba(26,34,36,.06); transform:translateY(-2px); }
.btn-outline.on-ink:hover{ background:rgba(255,255,255,.12); }

/* nav */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px clamp(20px,4vw,48px);
  background:transparent; transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.nav.solid{ background:rgba(244,246,246,.94); backdrop-filter:blur(10px); box-shadow:0 6px 24px -18px rgba(14,18,19,.4); padding-block:14px; }
.nav-brand{ display:flex; align-items:center; gap:.65em; text-decoration:none; }
.logo-mark{ width:40px; height:40px; border-radius:9px; object-fit:cover; flex:none; box-shadow:0 6px 14px -8px rgba(14,18,19,.5); }
.wordmark{ font-family:var(--serif); font-size:1.28rem; color:var(--ink); letter-spacing:-.01em; font-weight:600; }
.nav:not(.solid) .wordmark{ color:var(--white); }
.nav.solid .wordmark{ color:var(--ink); }
.wordmark em{ font-style:normal; color:var(--accent-deep); }
.nav.solid .wordmark em{ color:var(--brass-deep); }
.nav-links{ display:flex; align-items:center; gap:2rem; }
.nav-links a:not(.btn){ text-decoration:none; font-size:.95rem; font-weight:500; color:var(--white); position:relative; transition:color .25s ease; }
.nav.solid .nav-links a:not(.btn){ color:var(--ink); }
.nav-links a:not(.btn)::after{ content:''; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.nav-links a:not(.btn):hover::after{ transform:scaleX(1); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.nav-toggle span{ width:24px; height:2px; background:var(--white); transition:background .25s ease; }
.nav.solid .nav-toggle span{ background:var(--ink); }

/* hero — horizon-line split sky/sea */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); }
.hero-scrim{ position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(12,16,17,.62) 0%, rgba(14,18,19,.1) 42%, rgba(20,32,34,.28) 58%, rgba(10,15,16,.78) 100%); }
.horizon-line{
  position:absolute; left:0; right:0; top:57%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(244,246,246,.55) 18%, rgba(244,246,246,.55) 82%, transparent);
  transform-origin:center; transform:scaleX(0); z-index:2;
}
.horizon-line.in{ transform:scaleX(1); transition:transform 1.6s cubic-bezier(.16,1,.3,1) .5s; }
.hero-inner{ position:relative; z-index:2; padding-bottom:clamp(56px,9vw,104px); padding-top:180px; width:100%; }
.hero-spread{ display:grid; grid-template-columns:1.5fr 1px 1fr; gap:clamp(28px,4vw,56px); align-items:end; }
.hero-eyebrow{ color:var(--brass); }
.hero-headline{ font-size:clamp(2.5rem, 5.6vw, 4.5rem); color:var(--white); margin-bottom:.5em; max-width:16ch; }
.hero-headline .word{ display:inline-block; opacity:0; transform:translateY(28px) rotate(1deg); }
.hero-sub{ color:rgba(244,246,246,.88); font-size:1.08rem; max-width:48ch; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:1rem; margin:1.6rem 0 1.8rem; }
.trust-row{ display:flex; flex-wrap:wrap; gap:1.6rem 2rem; }
.trust-row li{ display:flex; align-items:center; gap:.55em; color:var(--white); font-size:.92rem; font-weight:500; }
.trust-row svg{ width:19px; height:19px; color:var(--brass); flex:none; }
.hero-divider{ align-self:stretch; background:rgba(255,255,255,.28); }
.hero-facts{
  background:rgba(14,18,19,.44); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.18);
  padding:1.8rem 1.9rem; box-shadow:var(--shadow);
}
.hero-facts h4{ font-family:var(--serif); color:var(--brass); font-size:1.1rem; margin:0 0 .8em; font-weight:600; }
.hero-facts ul{ display:flex; flex-direction:column; gap:.9rem; }
.hero-facts strong{ display:block; color:var(--white); font-size:.94rem; margin-bottom:.2em; }
.hero-facts li{ color:rgba(244,246,246,.82); font-size:.87rem; line-height:1.55; }

/* sub-page hero (products/areas) */
.nav--page{ background:rgba(244,246,246,.94); backdrop-filter:blur(10px); box-shadow:0 6px 24px -18px rgba(14,18,19,.4); padding-block:14px; }
.nav--page .wordmark{ color:var(--ink); }
.nav--page .wordmark em{ color:var(--brass-deep); }
.nav--page .nav-links a:not(.btn){ color:var(--ink); }
.nav--page .nav-toggle span{ background:var(--ink); }
.page-hero{ position:relative; min-height:60vh; display:flex; align-items:flex-end; overflow:hidden; }
.page-hero .hero-media img{ transform:scale(1.02); }
.page-hero .hero-inner{ padding-top:150px; padding-bottom:clamp(48px,7vw,80px); }
.breadcrumb{ display:flex; flex-wrap:wrap; gap:.5em; align-items:center; font-size:.85rem; color:rgba(244,246,246,.7); margin-bottom:1.2rem; }
.breadcrumb a{ text-decoration:none; color:rgba(244,246,246,.85); }
.breadcrumb a:hover{ color:var(--brass); }
.breadcrumb span{ opacity:.6; }
.page-hero h1{ color:var(--white); font-size:clamp(2.2rem,4.6vw,3.6rem); max-width:20ch; }
.page-hero .hero-sub{ max-width:56ch; }

.content-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.content-grid p{ color:var(--ink-soft); }
.spec-list{ display:flex; flex-direction:column; gap:1.1rem; }
.spec-list li{ display:flex; gap:.8em; align-items:flex-start; font-size:.96rem; color:var(--ink-soft); }
.spec-list svg{ width:18px; height:18px; flex:none; margin-top:.2em; color:var(--accent-deep); }
.spec-list strong{ color:var(--ink); }
.side-card{ background:var(--canvas-alt); border:1px solid var(--line); padding:1.8rem; margin-bottom:1.4rem; }
.side-card h4{ font-family:var(--serif); font-size:1.15rem; margin-bottom:.6em; font-weight:600; }
.side-card p{ font-size:.92rem; }
.side-card dl{ margin:.4rem 0 0; display:grid; grid-template-columns:auto 1fr; gap:.5rem 1rem; font-size:.88rem; }
.side-card dt{ color:var(--ink-soft); font-weight:600; margin:0; }
.side-card dd{ margin:0; }
.side-card ul{ display:flex; flex-direction:column; gap:.6rem; margin-top:.3rem; }
.side-card ul a{ font-size:.92rem; font-weight:600; color:var(--accent-deep); }

.mini-facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }

/* signature moment: the clifftop divider — a jagged cliff silhouette rises
   out of the ink as you scroll (clip-path scrub), a dotted cliff-path line
   traces along its ridge, and a small spout-arc (whale blow) surfaces at
   the point right as the path line reaches it. Never a one-shot reveal —
   scroll back and the cliff sinks again, tied to scroll position. */
.cliff-divider{ position:relative; height:clamp(110px,14vw,190px); background:var(--ink); overflow:hidden; margin-top:-2px; }
.cliff-band{
  position:absolute; inset:-2px -2px -2px -2px; background:var(--canvas);
  clip-path:polygon(0% 100%,0% 92%,5% 94%,11% 90%,18% 93%,25% 88%,32% 92%,40% 87%,47% 91%,54% 86%,63% 90%,72% 87%,80% 92%,88% 88%,96% 91%,100% 89%,100% 100%);
}
.cliff-svg{ position:absolute; inset:0; width:100%; height:100%; }
.cliff-path-line{ fill:none; stroke:var(--brass); stroke-width:2; stroke-linecap:round; stroke-dasharray:4 7; stroke-dashoffset:1600; }
.spout-arc{ fill:none; stroke:var(--accent); stroke-width:2.4; stroke-linecap:round; opacity:0; transform:scale(.5); transform-origin:78% 30%; }
.spout-arc .drop{ fill:var(--accent); }

/* marquee */
.marquee{ background:var(--ink); color:var(--brass); padding:14px 0; overflow:hidden; white-space:nowrap; }
.marquee-track{ display:inline-flex; gap:3.2rem; animation:marquee 34s linear infinite; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee-track span{ font-family:var(--serif); font-style:italic; font-size:1.05rem; opacity:.92; }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

/* product grid — flat editorial cards, brass rule draws under photo on hover */
.product-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:2.4rem 1.8rem; }
.product-card{ display:flex; flex-direction:column; }
.card-photo{ position:relative; aspect-ratio:4/3; overflow:hidden; margin-bottom:1.1rem; box-shadow:var(--shadow); }
.card-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.3,1); }
.card-photo::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--brass);
  transform-origin:left center; transform:scaleX(0); transition:transform .45s cubic-bezier(.2,.9,.3,1);
}
.product-card:hover .card-photo img{ transform:scale(1.06); }
.product-card:hover .card-photo::after{ transform:scaleX(1); }
.product-card h3{ margin-bottom:.35em; }
.product-card p{ color:var(--ink-soft); font-size:.96rem; margin-bottom:.7em; }
.rs-note{ font-size:.84rem; color:var(--brass-deep); background:rgba(171,141,92,.14); padding:.6em .8em; border-left:2px solid var(--brass); margin-bottom:.8em; }
.explore{ display:inline-flex; align-items:center; gap:.4em; font-weight:700; font-size:.88rem; text-decoration:none; color:var(--accent-deep); }
.explore svg{ width:16px; height:16px; transition:transform .25s ease; }
.explore:hover svg{ transform:translateX(4px); }

/* editorial — staggered stepping-stone layout, no rotation */
.editorial-grid{ display:grid; grid-template-columns:repeat(6, 1fr); grid-template-rows:auto auto; gap:1.6rem; }
.ed-item{ position:relative; overflow:hidden; box-shadow:var(--shadow); transition:transform .4s cubic-bezier(.2,.8,.3,1); }
.ed-item img{ width:100%; height:100%; object-fit:cover; }
.ed-a{ grid-column:1 / 4; grid-row:1 / 3; }
.ed-b{ grid-column:4 / 7; grid-row:1 / 2; margin-top:2.4rem; }
.ed-c{ grid-column:4 / 7; grid-row:2 / 3; margin-bottom:-2.4rem; }
.ed-item:hover{ transform:translateY(-6px); }
.cap-plate{ position:absolute; left:0; right:0; bottom:0; padding:1rem 1.15rem; background:linear-gradient(0deg, rgba(12,16,17,.84), rgba(12,16,17,0)); color:var(--white); font-size:.88rem; }

.pullquote-wrap{ padding:0 0 var(--section-pad); }
.pullquote{ display:flex; gap:1.6rem; align-items:flex-start; }
.pullquote .bar{ width:3px; align-self:stretch; background:var(--brass); flex:none; }
.pullquote blockquote{ margin:0 0 .6em; font-family:var(--serif); font-size:clamp(1.4rem,2.4vw,1.9rem); line-height:1.35; color:var(--ink); font-weight:600; }
.pullquote cite{ font-style:normal; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-deep); }

/* locale */
.locale-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.locale-copy p{ color:rgba(244,246,246,.82); }
.locale-facts{ display:flex; flex-direction:column; gap:1.5rem; }
.fact{ padding:1.3rem 1.4rem; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-left:2px solid var(--brass); }
.fact strong{ display:block; font-family:var(--serif); font-size:1.08rem; color:var(--brass); margin-bottom:.35em; font-weight:600; }
.fact span{ font-size:.92rem; color:rgba(244,246,246,.78); line-height:1.6; }

.spec-method{ margin-top:3rem; padding-top:3rem; border-top:1px solid rgba(255,255,255,.16); }
.spec-method-title{ font-family:var(--sans); font-weight:700; font-size:.95rem; letter-spacing:.03em; color:var(--white); margin-bottom:1.6rem; }
.spec-steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; counter-reset:spec; position:relative; }
.spec-steps::before{ content:''; position:absolute; top:.85rem; left:2%; right:2%; height:1px; background:repeating-linear-gradient(90deg, var(--brass) 0 6px, transparent 6px 12px); opacity:.55; }
.spec-step{ position:relative; padding-top:2.4rem; }
.spec-step::before{ counter-increment:spec; content:counter(spec,decimal-leading-zero); position:absolute; top:0; left:0; font-family:var(--serif); font-size:1.5rem; color:var(--brass); background:var(--ink); padding-right:.4rem; font-weight:600; }
.spec-step h4{ font-family:var(--sans); font-weight:700; font-size:.86rem; letter-spacing:.03em; color:var(--white); margin-bottom:.35em; }
.spec-step p{ font-size:.86rem; color:rgba(244,246,246,.72); margin:0; }

/* process */
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.process-step{ position:relative; padding-top:1rem; border-top:1px solid var(--line); }
.process-step .num{ display:block; font-family:var(--serif); font-size:2.6rem; color:var(--brass-deep); opacity:.55; margin-bottom:.2em; font-weight:600; }

/* mini CTA band (product / area inner pages) */
.mini-cta{ background:var(--canvas-alt); text-align:center; padding:var(--section-pad) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.mini-cta h2{ font-size:1.9rem; margin-bottom:.3em; }
.mini-cta p{ color:var(--ink-soft); margin-left:auto; margin-right:auto; margin-bottom:1.6rem; }

/* areas */
.area-chips{ display:flex; flex-wrap:wrap; gap:.9rem; }
.area-chip{
  display:inline-flex; align-items:center; padding:.7em 1.3em; border:1px solid var(--line);
  border-radius:999px; text-decoration:none; font-size:.92rem; font-weight:600; color:var(--ink);
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.area-chip:not(.current):hover{ border-color:var(--accent-deep); background:rgba(111,148,154,.1); transform:translateY(-2px); }
.area-chip.current{ background:var(--ink); color:var(--white); border-color:var(--ink); }

/* faq */
.faq-list{ display:flex; flex-direction:column; gap:.9rem; max-width:74ch; }
.faq-item{ border:1px solid var(--line); padding:1.2rem 1.4rem; background:var(--white); }
.faq-item summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; font-weight:700; font-size:1.02rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.toggle{ position:relative; width:18px; height:18px; flex:none; }
.toggle::before, .toggle::after{ content:''; position:absolute; background:var(--accent-deep); top:50%; left:50%; transform:translate(-50%,-50%); transition:transform .25s ease; }
.toggle::before{ width:14px; height:2px; }
.toggle::after{ width:2px; height:14px; }
.faq-item[open] .toggle::after{ transform:translate(-50%,-50%) rotate(90deg) scale(0); }
.faq-item .a{ padding-top:.9rem; }
.faq-item .a p{ color:var(--ink-soft); margin:0; }

/* CTA close */
.cta-close{ position:relative; padding:var(--section-pad) 0; background:var(--ink); overflow:hidden; text-align:center; }
.cta-glow{ position:absolute; inset:-20%; background:radial-gradient(circle at 28% 30%, rgba(111,148,154,.5), transparent 55%), radial-gradient(circle at 76% 68%, rgba(171,141,92,.34), transparent 50%); filter:blur(40px); animation:drift 16s ease-in-out infinite alternate; }
@keyframes drift{ from{ transform:translate(-3%,-2%) scale(1); } to{ transform:translate(3%,3%) scale(1.08); } }
@media (prefers-reduced-motion: reduce){ .cta-glow{ animation:none; } }
.cta-close .inner{ position:relative; z-index:1; }
.cta-close h2{ color:var(--white); max-width:16ch; margin-inline:auto; }
.cta-close p{ color:rgba(244,246,246,.78); margin-inline:auto; }
.cta-close .hero-ctas{ justify-content:center; }
.cta-close .eyebrow{ color:var(--brass); }

/* enquiry */
.enquire-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.enquire-copy .locale-facts .fact{ background:var(--canvas-alt); border-color:var(--line); border-left-color:var(--brass); }
.enquire-copy .fact strong{ color:var(--accent-deep); font-family:var(--sans); font-weight:800; font-size:1.05rem; }
.enquire-copy .fact span{ color:var(--ink-soft); }
.form-card{ background:var(--white); border:1px solid var(--line); padding:clamp(1.6rem,3vw,2.4rem); box-shadow:var(--shadow); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-size:.84rem; font-weight:700; letter-spacing:.02em; margin-bottom:.4em; color:var(--ink); }
.field input, .field select, .field textarea{
  width:100%; padding:.85em 1em; border:1.5px solid var(--line); background:var(--canvas);
  font-family:var(--sans); font-size:.96rem; color:var(--ink); transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(111,148,154,.18); }
.form-popia{ font-size:.82rem; color:var(--ink-soft); margin:0 0 1.2rem; }
.form-status{ margin-top:.9rem; font-size:.9rem; font-weight:600; color:var(--accent-deep); min-height:1.2em; }

/* footer */
footer{ background:var(--ink); color:rgba(244,246,246,.82); padding:64px 0 32px; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.4rem; padding-bottom:2.6rem; border-bottom:1px solid rgba(255,255,255,.14); }
.footer-brand{ display:flex; align-items:center; gap:.65em; margin-bottom:.9rem; }
.footer-brand .wordmark{ color:var(--white); }
.footer-brand .wordmark em{ color:var(--brass); }
.footer-statement{ font-size:.92rem; color:rgba(244,246,246,.68); max-width:32ch; }
.footer-col h4{ font-family:var(--sans); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); margin-bottom:1rem; font-weight:700; }
.footer-col ul{ display:flex; flex-direction:column; gap:.65rem; }
.footer-col a{ text-decoration:none; font-size:.92rem; color:rgba(244,246,246,.78); transition:color .2s ease; }
.footer-col a:hover{ color:var(--brass); }
.footer-bottom{ padding-top:1.6rem; display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between; font-size:.82rem; color:rgba(244,246,246,.55); }
.footer-popia{ max-width:56ch; }

/* reveal */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal.in{ opacity:1; transform:translateY(0); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero-headline .word{ opacity:1 !important; transform:none !important; }
  .horizon-line{ transform:scaleX(1) !important; }
}

/* chat widget */
.chat-launcher{
  position:fixed; right:22px; bottom:22px; z-index:300; width:58px; height:58px; border-radius:50%;
  background:var(--accent-deep); color:var(--white); border:0; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 30px -12px rgba(69,100,106,.6); transition:transform .25s ease, background .25s ease;
}
.chat-launcher:hover{ background:var(--accent); transform:translateY(-3px) scale(1.04); }
.chat-launcher svg{ width:24px; height:24px; position:absolute; transition:opacity .2s ease, transform .2s ease; }
.chat-launcher .ico-close{ opacity:0; transform:rotate(-45deg) scale(.6); }
.chat-launcher[aria-expanded="true"] .ico-chat{ opacity:0; transform:rotate(45deg) scale(.6); }
.chat-launcher[aria-expanded="true"] .ico-close{ opacity:1; transform:rotate(0) scale(1); }

.chat-panel{
  position:fixed; right:22px; bottom:92px; z-index:300; width:min(360px, 92vw); max-height:min(560px, 72vh);
  background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow);
  display:flex; flex-direction:column; overflow:hidden; opacity:0; transform:translateY(16px) scale(.98);
  pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
.chat-panel.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.chat-head{ display:flex; align-items:center; gap:.7em; padding:1rem 1.15rem; background:var(--ink); color:var(--white); }
.chat-head .dot{ width:9px; height:9px; border-radius:50%; background:#8FB0B4; box-shadow:0 0 0 3px rgba(143,176,180,.25); flex:none; }
.chat-head strong{ display:block; font-size:.92rem; }
.chat-head span{ font-size:.76rem; color:rgba(244,246,246,.65); }
.chat-body{ flex:1; overflow-y:auto; padding:1rem 1.05rem; display:flex; flex-direction:column; gap:.7rem; background:var(--canvas-alt); }
.msg{ max-width:85%; padding:.65em .9em; border-radius:12px; font-size:.9rem; line-height:1.5; }
.msg.bot{ align-self:flex-start; background:var(--white); border:1px solid var(--line); border-bottom-left-radius:2px; }
.msg.user{ align-self:flex-end; background:var(--accent-deep); color:var(--white); border-bottom-right-radius:2px; }
.msg.popia{ align-self:stretch; background:transparent; border:1px dashed var(--line); color:var(--ink-soft); font-size:.78rem; }
.chat-chips-slot{ display:flex; flex-wrap:wrap; gap:.5rem; padding:0 1.05rem .8rem; }
.chip-btn{ border:1px solid var(--accent-deep); background:var(--white); color:var(--accent-deep); font-size:.82rem; font-weight:600; padding:.5em .9em; border-radius:999px; cursor:pointer; transition:background .2s ease, color .2s ease; }
.chip-btn:hover{ background:var(--accent-deep); color:var(--white); }
.chat-input-row{ display:flex; border-top:1px solid var(--line); }
.chat-input-row input{ flex:1; border:0; padding:.9em 1rem; font-family:var(--sans); font-size:.9rem; background:var(--white); }
.chat-input-row input:focus{ outline:none; }
.chat-input-row button{ border:0; background:var(--accent-deep); color:var(--white); width:48px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s ease; }
.chat-input-row button:hover{ background:var(--accent); }
.chat-input-row button svg{ width:18px; height:18px; }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:2px solid var(--accent-deep); outline-offset:2px;
}

/* responsive */
@media (max-width: 1080px){
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .editorial-grid{ grid-template-columns:repeat(2,1fr); grid-template-rows:auto; }
  .ed-a{ grid-column:1/3; grid-row:1; aspect-ratio:16/9; }
  .ed-b{ grid-column:1/2; grid-row:2; margin-top:0; }
  .ed-c{ grid-column:2/3; grid-row:2; margin-bottom:0; }
  .locale-grid{ grid-template-columns:1fr; }
  .spec-steps{ grid-template-columns:repeat(3,1fr); row-gap:1.6rem; }
  .spec-steps::before{ display:none; }
  .process-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 860px){
  .hero-spread{ grid-template-columns:1fr; }
  .hero-divider{ display:none; }
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(320px,84vw); background:var(--ink); flex-direction:column;
    align-items:flex-start; padding:110px 32px 32px; gap:1.6rem; transform:translateX(100%);
    transition:transform .35s ease; box-shadow:-20px 0 40px rgba(0,0,0,.3);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a:not(.btn){ color:var(--white); font-size:1.1rem; }
  .nav-toggle{ display:flex; }
  .enquire-grid{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .product-grid{ grid-template-columns:1fr; }
  .editorial-grid{ grid-template-columns:1fr; }
  .ed-a, .ed-b, .ed-c{ grid-column:1; aspect-ratio:4/3; }
  .ed-a{ grid-row:auto; } .ed-b{ grid-row:auto; } .ed-c{ grid-row:auto; }
  .spec-steps{ grid-template-columns:1fr 1fr; }
  .process-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  h2{ font-size:clamp(1.9rem,7vw,2.6rem); }
}