/* ==========================================================================
   LARA & CO. — Glassmorphism Design System v2
   Theme-aware (dark navy / light beige), minimal B2B-professional refinement
   ========================================================================== */

:root {
  /* Brand constants */
  --charcoal:#333333; --beige:#AFA091; --slate:#0C1F31; --biscotti:#E3D7C7;
  --ease:cubic-bezier(.22,1,.36,1);
  --font-display:'Playfair Display', Georgia, serif;
  --font-body:'Montserrat', 'Helvetica Neue', sans-serif;

  /* Dark theme (default) */
  --bg: #0C1F31;
  --text-primary: #F7F4EF;
  --text-secondary: #B9AFA0;
  --text-eyebrow: #E3D7C7;
  --surface-glass: rgba(255,255,255,0.045);
  --surface-glass-hover: rgba(255,255,255,0.075);
  --border-glass: rgba(255,255,255,0.1);
  --border-glass-strong: rgba(227,215,199,0.32);
  --nav-bg: rgba(12,31,49,0.5);
  --nav-bg-top: rgba(12,31,49,0.06);
  --mesh-1: #1c3a56; --mesh-2: #362c20; --mesh-3: #0c1f31; --mesh-4: #4a4030;
  --overlay-scrim: rgba(12,31,49,0.62);
  --btn-solid-bg: var(--text-primary);
  --btn-solid-text: var(--slate);
}

[data-theme="light"] {
  --bg: #EFE7DB;
  --text-primary: #23201c;
  --text-secondary: #6b6053;
  --text-eyebrow: #9c7a4f;
  --surface-glass: rgba(255,255,255,0.55);
  --surface-glass-hover: rgba(255,255,255,0.78);
  --border-glass: rgba(51,51,51,0.1);
  --border-glass-strong: rgba(12,31,49,0.22);
  --nav-bg: rgba(239,231,219,0.6);
  --nav-bg-top: rgba(239,231,219,0.08);
  --mesh-1: #e3d3b8; --mesh-2: #d8c6ab; --mesh-3: #ecdfc9; --mesh-4: #cbb896;
  --overlay-scrim: rgba(239,231,219,0.72);
  --btn-solid-bg: var(--slate);
  --btn-solid-text: #F7F4EF;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0; font-family:var(--font-body); background:var(--bg); color:var(--text-secondary);
  overflow-x:hidden; -webkit-font-smoothing:antialiased; line-height:1.7;
  transition:background-color .5s var(--ease), color .5s var(--ease);
}

/* ---------------- Custom cursor (desktop / fine-pointer only) ---------------- */
@media (hover:hover) and (pointer:fine){
  html, body{ cursor:url('/wp-content/themes/lara-co-viewport-hero-fixed/assets/images/cursor-light.svg') 3 2, auto; }
  [data-theme="light"] html, [data-theme="light"] body{ cursor:url('/wp-content/themes/lara-co-viewport-hero-fixed/assets/images/cursor-dark.svg') 3 2, auto; }
  a, button, input, select, textarea, [role="button"]{ cursor:url('/wp-content/themes/lara-co-viewport-hero-fixed/assets/images/cursor-light.svg') 3 2, pointer; }
  [data-theme="light"] a, [data-theme="light"] button, [data-theme="light"] input,
  [data-theme="light"] select, [data-theme="light"] textarea, [data-theme="light"] [role="button"]{
    cursor:url('/wp-content/themes/lara-co-viewport-hero-fixed/assets/images/cursor-dark.svg') 3 2, pointer;
  }
}

/* ---------------- Custom scrollbar (theme-aware) ---------------- */
html{ scrollbar-width:thin; scrollbar-color:var(--text-eyebrow) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--text-eyebrow); border-radius:10px; border:2px solid var(--bg); background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--beige); background-clip:padding-box; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; line-height:1.15; color:var(--text-primary); margin:0; transition:color .5s var(--ease); }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }

/* .container's real, single definition (base + all breakpoints) lives in the
   "RESPONSIVE VIEWPORT SYSTEM" section below — having it defined again here
   (as this file used to) is exactly the kind of duplicate, conflicting rule
   that made large/4K viewports render inconsistently: two different
   max-width values were competing for the same viewport width, and which
   one "won" depended on source order rather than intent. Kept as a single
   source of truth from now on. */

/* ---------------- Ambient mesh background + grain ---------------- */
.mesh{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.mesh span{ position:absolute; border-radius:50%; filter:blur(100px); opacity:.4; transition:background-color .6s var(--ease); }
.mesh .b1{ width:520px; height:520px; background:var(--mesh-1); top:-160px; left:-120px; }
.mesh .b2{ width:440px; height:440px; background:var(--mesh-2); top:20%; right:-140px; }
.mesh .b3{ width:600px; height:600px; background:var(--mesh-3); bottom:-220px; left:14%; }
.mesh .b4{ width:340px; height:340px; background:var(--mesh-4); opacity:.28; bottom:10%; right:6%; }
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.03; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
section, header, footer, nav { position:relative; z-index:2; }

/* ---------------- Reading progress ---------------- */
#progress{ position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--text-eyebrow),var(--beige)); z-index:9999; transition:width .08s linear; }

/* ---------------- Glass nav ---------------- */
nav.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px; transition:padding .5s var(--ease), background-color .5s var(--ease), box-shadow .5s var(--ease);
  background:var(--nav-bg-top);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border-glass);
  gap:12px;
  transform:translateZ(0);
  will-change:transform;
  backface-visibility:hidden;
}
nav.site-nav.solid{
  padding:10px 32px;
  background:var(--nav-bg);
  backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.brand{ display:flex; align-items:center; flex-shrink:0; gap:10px; }
.brand img.mark{ width:40px; height:40px; display:block; flex-shrink:0; }

.nav-links{ display:flex; gap:16px; align-items:center; margin:0 16px; flex-wrap:nowrap; flex-shrink:1; min-width:0; }
.nav-links a{ font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--text-primary); opacity:.82; position:relative; padding:4px 0; transition:opacity .3s var(--ease); white-space:nowrap; }
.nav-links a:hover{ opacity:1; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--text-eyebrow); transition:width .3s var(--ease); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ color:var(--text-eyebrow); opacity:1; }
[data-theme="light"] .nav-links a.active{ color:#ffffff; }
/* Large-viewport nav scaling (1921px+/2561px+) is defined once, in the
   "RESPONSIVE VIEWPORT SYSTEM" section below, instead of here as well — see
   the note by the old .container rule above for why duplicating breakpoints
   across the file is what caused inconsistent 4K rendering. */

.nav-controls{ display:flex; align-items:center; gap:14px; flex-shrink:0; }

/* Theme toggle */
.theme-toggle{
  width:36px; height:21px; border-radius:20px; border:1px solid var(--border-glass-strong);
  background:var(--surface-glass); position:relative; padding:2px; display:flex; align-items:center;
  transition:background .3s var(--ease); flex-shrink:0;
}
.theme-toggle .knob{
  width:15px; height:15px; border-radius:50%; background:var(--text-eyebrow);
  transform:translateX(15px); transition:transform .35s var(--ease); box-shadow:0 2px 6px rgba(0,0,0,.3);
}
[data-theme="light"] .theme-toggle .knob{ transform:translateX(0); background:var(--slate); }
.theme-toggle-wrap{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-eyebrow); white-space:nowrap; }
/* On the homepage, the nav sits transparently over the hero photo before
   you scroll (not a solid bar), so the toggle's muted-brown light-theme
   color (--text-eyebrow) can disappear into a bright patch of that photo.
   Force it to white there specifically, since that's the one spot where
   it isn't sitting on the site's own light-cream background. */
body.home[data-theme="light"] .theme-toggle-wrap{ color:#ffffff; }

/* TranslatePress-style placeholder widget */
.tp-switcher{ position:relative; }
.tp-trigger{
  display:flex; align-items:center; gap:5px; background:var(--surface-glass); border:1px solid var(--border-glass);
  color:var(--text-primary); padding:7px 10px; font-size:10.5px; border-radius:20px; backdrop-filter:blur(10px);
  transition:border-color .3s var(--ease);
}
.tp-trigger:hover{ border-color:var(--border-glass-strong); }
.tp-flag{ font-size:13px; line-height:1; }
.tp-code{ letter-spacing:.04em; }
.tp-chevron{ font-size:9px; color:var(--text-secondary); transition:transform .3s var(--ease); }
.tp-switcher.open .tp-chevron{ transform:rotate(180deg); }
.tp-dropdown{
  position:absolute; top:calc(100% + 10px); right:0; width:200px; padding:8px;
  background:var(--nav-bg); border:1px solid var(--border-glass); border-radius:8px;
  backdrop-filter:blur(24px) saturate(160%); box-shadow:0 20px 50px rgba(0,0,0,.3);
  opacity:0; pointer-events:none; transform:translateY(-8px); transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.tp-switcher.open .tp-dropdown{ opacity:1; pointer-events:auto; transform:translateY(0); }
.tp-dropdown-head{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-eyebrow); padding:6px 10px 8px; }
.tp-option{ display:flex; align-items:center; gap:9px; padding:9px 10px; font-size:12.5px; color:var(--text-primary); border-radius:5px; }
.tp-option:hover{ background:var(--surface-glass-hover); }
.tp-option.is-active{ color:var(--text-eyebrow); }
.tp-dropdown-foot{ font-size:9.5px; color:var(--text-secondary); padding:10px 10px 4px; border-top:1px solid var(--border-glass); margin-top:6px; line-height:1.5; }

.nav-cta{
  padding:9px 16px; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--surface-glass); border:1px solid var(--border-glass-strong);
  backdrop-filter:blur(10px); color:var(--text-eyebrow); transition:all .35s var(--ease); white-space:nowrap; border-radius:2px;
  flex-shrink:0;
}
.nav-cta:hover{ background:var(--text-eyebrow); color:var(--slate); border-color:var(--text-eyebrow); }
.nav-toggle{ display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:none; border:none; min-width:44px; min-height:44px; padding:6px; flex-shrink:0; }
.nav-toggle span{ width:20px; height:1.5px; background:var(--text-eyebrow); transition:transform .3s var(--ease), opacity .3s var(--ease); }
.nav-toggle.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
@media (max-width:1160px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  nav.site-nav{ justify-content:space-between; padding:16px 24px; }
}
@media (max-width:480px){
  .tp-dropdown{ width:180px; right:-40px; }
}

.mobile-drawer{
  position:fixed; inset:0; z-index:1100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
  background:var(--bg); backdrop-filter:blur(20px);
  transform:translateY(-100%); transition:transform .5s var(--ease);
}
.mobile-drawer.open{ transform:translateY(0); }
.mobile-drawer a{ font-family:var(--font-display); font-size:24px; color:var(--text-primary); }
.drawer-close{ position:absolute; top:24px; right:24px; background:none; border:none; color:var(--text-eyebrow); font-size:24px; }
.drawer-controls{ display:flex; gap:16px; margin-top:10px; }

/* ---------------- Eyebrow ---------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text-eyebrow); font-weight:600;
}
.eyebrow::before{ content:""; width:16px; height:16px; background-size:contain; background-repeat:no-repeat; background-position:center; background-image:url('/wp-content/themes/lara-co-viewport-hero-fixed/assets/images/leaf-sprig.svg'); }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::before, .eyebrow.center::after{ content:""; width:16px; height:16px; background-size:contain; background-repeat:no-repeat; background-position:center; background-image:url('/wp-content/themes/lara-co-viewport-hero-fixed/assets/images/leaf-sprig.svg'); }
.eyebrow.center::after{ transform:scaleX(-1); }

/* ---------------- Buttons ---------------- */
.btn-glass{
  display:inline-block; padding:14px 26px; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  background:var(--surface-glass); border:1px solid var(--border-glass-strong);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); color:var(--text-primary);
  transition:all .4s var(--ease); border-radius:2px;
}
.btn-glass:hover{ background:var(--surface-glass-hover); border-color:var(--text-eyebrow); }
.btn-glass.accent{ background:rgba(227,215,199,0.14); border-color:var(--text-eyebrow); color:var(--text-eyebrow); }
.btn-glass.accent:hover{ background:var(--text-eyebrow); color:var(--slate); }
.btn-glass.solid{ background:var(--btn-solid-bg); color:var(--btn-solid-text); border-color:var(--btn-solid-bg); }
.btn-glass.solid:hover{ opacity:.88; }
.btn-text{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-eyebrow); border-bottom:1px solid var(--border-glass-strong); padding-bottom:3px; }
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

/* ---------------- Homepage Hero ---------------- */
/*
 * True first-viewport hero. The fixed navigation overlays the hero, so the
 * hero always occupies exactly the visible viewport before scrolling begins
 * — it must NOT be capped below 100% height, or the next section's
 * background (which shares the same navy/beige theme colour) shows through
 * as a blank strip underneath the trust bar on any screen taller than the
 * cap. min-height is a floor only, for short/landscape-mobile viewports.
 * The copy is top-anchored (not vertically centered) via padding on
 * .hero-content, so its position stays stable regardless of copy length and
 * never collides with the trust bar. Uses svh to avoid Safari/mobile
 * browser chrome changing the section height after load, with a vh
 * fallback for browsers that don't support svh.
 *
 * NOTE: everything under .hero lives in this ONE block. It used to be
 * split across three separate rule sets (this one, a small-phone media
 * query further down, and a later "final override" block) which fought
 * each other via source order and a stray `.hero > .hero-content` selector
 * that out-specificity'd everything else. That's why the hero used to
 * render inconsistently across screen sizes. Keep it consolidated here.
 */
.hero{
  position:relative;
  width:100%;
  margin:0;
  padding:0;
  height:100svh;
  min-height:700px;
  overflow:hidden;
  isolation:isolate;
}
@supports not (height:100svh){
  .hero{ height:100vh; }
}

.hero-background{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:var(--bg);
}
.hero-background-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-width:100%;
  min-height:100%;
  object-fit:cover;
  object-position:67% center;
  transition:opacity .65s var(--ease), filter .65s var(--ease), transform 1.2s var(--ease);
  transform:scale(1.015);
}
.hero-background-dark{ opacity:1; }
.hero-background-light{ opacity:0; }
.hero-background-mobile-dark{ opacity:0; }
.hero-background-mobile-light{ opacity:0; }
[data-theme="light"] .hero-background-dark{ opacity:0; }
[data-theme="light"] .hero-background-light{ opacity:1; }
/* Phones get their own pair of images (set in the Customizer under
   Homepage — "Hero background, Mobile") instead of the desktop photo
   being force-cropped into a portrait sliver via object-position. Below
   721px, swap which pair is visible; above it, the mobile pair stays at
   opacity:0 (rule above) and is never shown. */
@media (max-width:720px){
  .hero-background-dark, .hero-background-light{ opacity:0; }
  .hero-background-mobile-dark{ opacity:1; }
  [data-theme="light"] .hero-background-mobile-dark{ opacity:0; }
  [data-theme="light"] .hero-background-mobile-light{ opacity:1; }
}
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:none;
}
[data-theme="light"] .hero-overlay{
  background:none;
}
.hero-content{
  position:relative;
  z-index:3;
  width:100%;
  height:100%;
  box-sizing:border-box;
  display:flex;
  align-items:flex-start;
  padding:154px 56px 112px;
}
.hero-copy{
  width:min(610px, 48vw);
  max-width:610px;
  margin:0;
  position:relative;
  z-index:1;
}
.hero-copy > *{ position:relative; z-index:1; }
.hero-label{ display:block; margin-bottom:22px; color:#E3D7C7; }
.hero h1{
  font-size:clamp(58px, 5.1vw, 82px);
  line-height:.94;
  letter-spacing:-.035em;
  margin:0 0 24px;
  text-transform:none;
  max-width:600px;
  color:#F7F4EF;
}
.hero h1 em{
  font-style:italic;
  font-weight:500;
  color:#E3D7C7;
}
.hero-sub{
  max-width:590px;
  margin:0 0 32px;
  font-size:15px;
  line-height:1.8;
  color:#F7F4EF;
}
.hero .cta-row{ display:flex; align-items:center; gap:18px; }
.hero .btn-glass{ min-height:62px; padding:0 34px; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; }
.hero .btn-glass.solid{ min-width:236px; background:#F7F4EF; color:#0C1F31; border-color:#F7F4EF; }
.hero .btn-glass.solid:hover{ opacity:.88; }
/* Overrides the generic .btn-glass.accent (14%-opacity fill, thin
   border) which was nearly invisible over a bright photo, especially
   with --text-eyebrow resolving to a medium brown in light mode. This
   is a proper frosted-dark chip instead, so it stays legible over any
   photo in either theme — intentionally NOT theme-aware, same reasoning
   as .hero-overlay above. */
.hero .btn-glass.accent{
  min-width:303px;
  background:rgba(8,16,26,.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-color:rgba(247,244,239,.7);
  color:#F7F4EF;
}
.hero .btn-glass.accent:hover{ background:rgba(8,16,26,.8); color:#F7F4EF; border-color:#F7F4EF; }
.hero-trust{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:5;
  height:76px;
  border-top:1px solid rgba(255,255,255,.10);
  background:rgba(5,18,30,.12);
  transition:background .65s var(--ease), border-color .65s var(--ease);
}
.hero-trust-inner{
  height:76px;
  min-height:76px;
  display:flex;
  align-items:center;
  gap:38px;
  color:rgba(247,244,239,.68);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
}
[data-theme="light"] .hero-trust{
  border-top-color:rgba(51,51,51,.12);
  background:rgba(239,231,219,.14);
}
[data-theme="light"] .hero-trust-inner{ color:rgba(247,244,239,.68); }

/* Desktop: extra side padding so the copy doesn't crowd the viewport edge. */
@media (min-width:1161px){
  .hero-content{ padding-left:56px; padding-right:56px; }
}

/* Tablet range */
@media (max-width:1160px) and (min-width:721px){
  .hero{ min-height:680px; }
  .hero-content{ padding:142px 40px 106px; }
  .hero-copy{ width:min(560px, 52vw); }
  .hero h1{ font-size:clamp(54px, 6vw, 72px); }
}

/* Phones */
@media (max-width:720px){
  .hero{ min-height:650px; }
  .hero-content{ padding:128px 24px 104px; align-items:flex-start; }
  .hero-copy{ width:100%; max-width:560px; margin-top:0; }
  .hero-label{ margin-bottom:18px; }
  .hero h1{ font-size:clamp(48px, 13vw, 68px); line-height:.94; margin-bottom:20px; }
  .hero-sub{ font-size:13.5px; max-width:100%; margin-bottom:25px; line-height:1.72; }
  .hero .cta-row{ flex-wrap:wrap; gap:10px; }
  .hero .btn-glass, .hero .btn-glass.solid, .hero .btn-glass.accent{ min-width:0; min-height:54px; flex:1 1 auto; }
  .hero-trust{ height:70px; }
  .hero-trust-inner{ height:70px; min-height:70px; gap:16px; overflow-x:auto; scrollbar-width:none; }
  .hero-trust-inner::-webkit-scrollbar{ display:none; }
  .hero-trust-inner span{ flex:0 0 auto; font-size:8.5px; }
  /* The dedicated mobile hero photo is composed for this crop directly,
     so it doesn't need the 68%/64% horizontal bias below — that was only
     ever compensating for showing the *desktop* landscape photo here.
     Placed after the generic rule so it wins the cascade for the two
     mobile-specific images specifically. */
  .hero-background-image{ object-position:68% center; }
  .hero-background-mobile-dark, .hero-background-mobile-light{ object-position:center 22%; }
}

/* Small phones: sits after the (max-width:720px) query above so it can
   correctly override it for the narrowest screens instead of being
   silently overridden by it. */
@media (max-width:600px){
  .hero{ min-height:600px; }
  .hero-content{ padding:92px 24px 82px; align-items:center; }
  .hero-background-image{ object-position:64% center; }
  .hero-background-mobile-dark, .hero-background-mobile-light{ object-position:center 22%; }
  .hero-trust-inner{ font-size:8.5px; letter-spacing:.08em; gap:14px; overflow-x:hidden; }
}

/* ---------------- Page hero (interior pages) ---------------- */
/* min-height is capped with clamp() rather than a raw vh value, so it stays
   a sensible banner height on tall viewports (4K etc.) instead of ballooning
   into a near-empty full-height block. */
.page-hero{
  min-height:clamp(420px, 46vh, 620px);
  display:flex; align-items:center;
  padding-top:clamp(160px, 8.2vw, 220px);
  padding-bottom:clamp(70px, 4.5vw, 120px);
  padding-left:clamp(56px, 2.9vw, 130px);
  padding-right:clamp(56px, 2.9vw, 130px);
  position:relative; overflow:hidden;
}
/* Shorter variant (Brochure page). Previously set inline as style="min-height:38vh",
   an uncapped viewport-height value that ballooned past the normal page-hero
   height on tall 4K displays instead of staying a compact banner. */
.page-hero--short{ min-height:clamp(340px, 38vh, 480px); }
.page-hero-media{ position:absolute; inset:0; z-index:0; }
/* The slow 7s zoom-from-1.06-to-1 on load was the "image zooms a bit,
   a bit disturbing" effect — a moving background behind page-title text
   for a full 7 seconds reads as distracting rather than subtle. Now
   static from the first paint; .page-hero.loaded no longer needs a
   scale override since there's nothing left to animate away from. */
.page-hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; opacity:.32; }
/* Light theme's scrim below is a near-opaque light beige rather than a
   dark navy, so the same .32 opacity reads as much fainter against it
   (light-on-light vs. light-on-dark) — bumped up to compensate. */
[data-theme="light"] .page-hero-media img{ opacity:.5; }
.page-hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, var(--overlay-scrim), var(--bg) 92%); }
.page-hero-content{ position:relative; z-index:1; max-width:clamp(740px, 26vw, 1000px); }
/* Coefficients below are calibrated so the value keeps growing all the way
   out to a 3840px-wide (true 4K) viewport instead of maxing out around
   1300-1400px like the previous clamp()s did, which is why this heading
   looked identical (and small) on any screen from a small laptop up through
   a 4K display. */
.page-hero h1{ font-size:clamp(32px, 2.5vw, 96px); margin:18px 0 16px; text-transform:capitalize; }
.page-hero p{ font-size:clamp(15px, .68vw, 26px); color:var(--text-secondary); max-width:clamp(520px, 19.8vw, 760px); }
@media (max-width:900px){
  .page-hero{ padding:150px 40px 60px; }
}

/* ---------------- Sections ---------------- */
.section{ padding:110px 0; }
.section-tight{ padding:70px 0; }
.head{ max-width:620px; margin:0 auto 56px; text-align:center; }
.head h2{ font-size:clamp(26px,3vw,38px); margin-top:16px; }
.head p{ margin-top:14px; font-size:14px; color:var(--text-secondary); }

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ---------------- Glass card grid ---------------- */
.glass-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.glass-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.glass-card{
  position:relative; padding:36px 28px; border-radius:6px;
  background:var(--surface-glass); border:1px solid var(--border-glass);
  backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%);
  transition:transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
  overflow:hidden;
}
.glass-card:hover{ transform:translateY(-5px); border-color:var(--border-glass-strong); background:var(--surface-glass-hover); }
.glass-card .glow{
  position:absolute; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(227,215,199,0.16), transparent 70%);
  top:var(--y,-40%); left:var(--x,-20%); pointer-events:none; opacity:0; transition:opacity .4s ease;
}
[data-theme="light"] .glass-card .glow{ background:radial-gradient(circle, rgba(12,31,49,0.1), transparent 70%); }
.glass-card:hover .glow{ opacity:1; }
.glass-card .icon{
  width:44px; height:44px; border-radius:50%; margin-bottom:18px;
  background:transparent; border:1px solid var(--border-glass-strong);
  display:flex; align-items:center; justify-content:center; color:var(--text-eyebrow); font-size:16px;
}
.glass-card h3, .glass-card h4{ font-size:16px; margin-bottom:8px; color:var(--text-primary); }
.glass-card p{ font-size:12.5px; color:var(--text-secondary); margin:0; line-height:1.65; }
.glass-grid.cols-4 .glass-card{ text-align:center; }
.glass-grid.cols-4 .glass-card .icon{ margin-left:auto; margin-right:auto; }
@media (max-width:900px){ .glass-grid, .glass-grid.cols-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .glass-grid, .glass-grid.cols-4{ grid-template-columns:1fr; } }

/* ---------------- Glass split (image + text panel) ---------------- */
.glass-split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.glass-split.reverse{ direction:rtl; }
.glass-split.reverse > *{ direction:ltr; }
.glass-split .img-wrap{
  position:relative; border-radius:4px; overflow:hidden;
  box-shadow:0 30px 70px -25px rgba(0,0,0,.4);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.glass-split .img-wrap:hover{ transform:translateY(-5px); box-shadow:0 36px 80px -20px rgba(0,0,0,.5); }
.glass-split .img-wrap img{ width:100%; aspect-ratio:4/5; height:auto; object-fit:cover; object-position:center 22%; transition:transform .6s var(--ease); }
.glass-split .img-wrap:hover img{ transform:scale(1.045); }
.glass-split h2{ font-size:clamp(24px,2.8vw,34px); margin:16px 0 18px; }
.glass-split p{ font-size:14px; color:var(--text-secondary); margin-bottom:13px; }
@media (max-width:900px){
  .glass-split{ grid-template-columns:1fr; gap:32px; }
}

/* ---------------- Stat strip ---------------- */
.stat-row{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
.stat-pill{
  padding:26px 34px; text-align:center; border-radius:6px;
  background:var(--surface-glass); border:1px solid var(--border-glass);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); min-width:170px;
}
.stat-pill .num{ font-family:var(--font-display); font-size:32px; color:var(--text-eyebrow); }
.stat-pill .cap{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-secondary); margin-top:6px; }

/* ---------------- Media banner ---------------- */
.media-banner{ position:relative; min-height:480px; display:flex; align-items:center; overflow:hidden; }
.media-banner-media{ position:absolute; inset:0; }
.media-banner-media img{ width:100%; height:100%; object-fit:cover; }
.media-banner::after{ content:""; position:absolute; inset:0; background:var(--overlay-scrim); }
.media-banner-content{ position:relative; z-index:1; max-width:620px; }
.media-banner-content .glass-panel{
  padding:40px 38px; border-radius:6px;
  background:var(--surface-glass); border:1px solid var(--border-glass-strong);
  backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
}
.media-banner-content h2{ font-size:clamp(24px,3vw,36px); margin:14px 0 22px; }
.media-banner-content p{ font-size:13.5px; color:var(--text-secondary); margin-bottom:22px; }

/* ---------------- Heritage / film ---------------- */
.heritage{ position:relative; min-height:520px; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.heritage-media{ position:absolute; inset:0; }
.heritage-media img{ width:100%; height:100%; object-fit:cover; }
.heritage::after{ content:""; position:absolute; inset:0; background:var(--overlay-scrim); }
.heritage-panel{
  position:relative; z-index:1; max-width:540px; margin:0 24px; padding:46px 42px; border-radius:6px;
  background:var(--surface-glass); border:1px solid var(--border-glass);
  backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
}
.heritage-panel h2{ font-size:clamp(26px,3.2vw,40px); margin:14px 0; }
.heritage-panel p{ margin-bottom:22px; color:var(--text-secondary); }
.play-btn{ display:inline-flex; align-items:center; gap:12px; color:var(--text-eyebrow); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.play-btn .circle{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--surface-glass); border:1px solid var(--border-glass-strong); transition:background .3s var(--ease);
}
.play-btn:hover .circle{ background:var(--text-eyebrow); color:var(--slate); }

/* ---------------- Photo grid ---------------- */
.photo-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.photo-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.photo-card{ position:relative; aspect-ratio:3/4; border-radius:4px; overflow:hidden; }
.photo-card img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.photo-card:hover img{ transform:scale(1.06); }
.photo-card .glass-label{
  position:absolute; left:6px; right:6px; bottom:6px; padding:10px 12px; border-radius:4px;
  background:rgba(12,31,49,0.4); border:1px solid rgba(255,255,255,0.14);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:#fff;
}
@media (max-width:900px){ .photo-grid, .photo-grid.cols-4{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .photo-grid, .photo-grid.cols-4{ grid-template-columns:repeat(2,1fr); } }

/* ---------------- Category / product cards ---------------- */
.cat-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.cat-card{
  border-radius:6px; overflow:hidden; background:var(--surface-glass);
  border:1px solid var(--border-glass); backdrop-filter:blur(14px);
  transition:transform .4s var(--ease), border-color .4s var(--ease);
}
.cat-card:hover{ transform:translateY(-4px); border-color:var(--border-glass-strong); }
.cat-card img{ height:160px; width:100%; object-fit:cover; }
.cat-card .body{ padding:18px 18px 22px; }
.cat-card h4{ font-size:14.5px; margin-bottom:6px; color:var(--text-primary); }
.cat-card p{ font-size:11.5px; color:var(--text-secondary); margin:0; }
@media (max-width:900px){ .cat-cards{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .cat-cards{ grid-template-columns:1fr; } }

/* Swatch chips */
.swatch-row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.swatch{ text-align:center; }
.swatch .dot{ width:56px; height:56px; border-radius:50%; margin:0 auto 8px; border:1px solid var(--border-glass-strong); box-shadow:0 8px 24px rgba(0,0,0,.25); }
.swatch .name{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-secondary); }

/* ---------------- Numbered rows ---------------- */
.num-row{
  display:grid; grid-template-columns:80px 1fr 1fr auto; gap:22px; align-items:center;
  padding:26px 30px; border-radius:6px; margin-bottom:12px;
  background:var(--surface-glass); border:1px solid var(--border-glass);
  backdrop-filter:blur(14px); transition:background .4s var(--ease), border-color .4s var(--ease);
}
.num-row:hover{ background:var(--surface-glass-hover); border-color:var(--border-glass-strong); }
.num-row .idx{ font-family:var(--font-display); font-size:24px; color:var(--text-secondary); }
.num-row h3{ font-size:18px; }
.num-row p{ font-size:12.5px; color:var(--text-secondary); margin:0; }
@media (max-width:780px){ .num-row{ grid-template-columns:1fr; text-align:left; gap:6px; } }

/* ---------------- Spec table (real product data) ---------------- */
.spec-wrap{ overflow-x:auto; border-radius:6px; border:1px solid var(--border-glass); background:var(--surface-glass); backdrop-filter:blur(14px); }
table.spec-table{ width:100%; border-collapse:collapse; font-size:12.5px; min-width:520px; }
table.spec-table th, table.spec-table td{ padding:14px 18px; text-align:left; border-bottom:1px solid var(--border-glass); color:var(--text-secondary); }
table.spec-table th{ color:var(--text-eyebrow); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; }
table.spec-table td:first-child, table.spec-table th:first-child{ color:var(--text-primary); font-weight:500; }
table.spec-table tr:last-child td{ border-bottom:none; }
.spec-note{ font-size:11px; color:var(--text-secondary); margin-top:10px; font-style:italic; }
/* Phones: the table was forced to min-width:520px no matter what, so on
   a ~375-414px screen the "Gel Fiber" column just got clipped past the
   edge (it's technically reachable via a sideways swipe inside .spec-wrap,
   but nothing hints that, so it reads as cut off/broken). Below 480px,
   drop the forced min-width and shrink padding/font-size so the table's
   natural width fits the screen and cell text wraps normally instead —
   no hidden column, no swipe required. */
@media (max-width:480px){
  table.spec-table{ min-width:0; width:100%; font-size:11px; }
  table.spec-table th, table.spec-table td{ padding:10px 8px; }
}
.spec-title{ font-family:var(--font-display); font-size:22px; color:var(--text-primary); margin-bottom:6px; }
.spec-sub{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-eyebrow); margin-bottom:14px; display:block; }
.spec-block{ margin-bottom:64px; }
.spec-block p.desc{ font-size:13.5px; color:var(--text-secondary); max-width:640px; margin-bottom:24px; }

/* ---------------- Certification badges (real logos) ---------------- */
.cert-strip{ display:flex; align-items:flex-start; justify-content:center; gap:40px; flex-wrap:wrap; }
.cert-strip img{ max-height:64px; width:auto; max-width:100%; margin:0 auto; filter:grayscale(0%); }
.cert-strip .cert-item{ text-align:center; max-width:220px; }
.cert-strip .cert-item p{ font-size:12px; color:var(--text-secondary); margin-top:12px; }
/* Larger badge variant (Quality page). Previously set per-image with inline
   style="max-height:90px", which — because inline styles always beat an
   external stylesheet rule of equal or lower specificity — silently
   overrode the responsive .cert-strip img clamp() below at every viewport
   width, so those two badges stayed frozen at 90px even at 4K while every
   other cert-strip image on the site scaled up correctly. Using a class
   here keeps the same 90px look on desktop but lets it scale like the rest. */
.cert-strip--lg{ gap:64px; }
.cert-strip--lg img{ max-height:90px; }

/* ---------------- Contact ---------------- */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; }
.contact-panel{ padding:36px 32px; border-radius:6px; background:var(--surface-glass); border:1px solid var(--border-glass); backdrop-filter:blur(16px); height:fit-content; }
.contact-item{ margin-bottom:20px; }
.contact-item .k{ display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-eyebrow); margin-bottom:6px; }
.contact-item .v{ font-size:14px; color:var(--text-primary); }
.social-row{ display:flex; gap:10px; margin-top:18px; }
.social-row a svg{ width:46%; height:46%; }
.social-row a{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--surface-glass); border:1px solid var(--border-glass-strong); font-size:11px; color:var(--text-eyebrow); }

.tabs{ display:flex; gap:8px; margin-bottom:20px; }
.tab-btn{
  background:var(--surface-glass); border:1px solid var(--border-glass); color:var(--text-eyebrow);
  padding:11px 20px; font-size:10px; letter-spacing:.1em; text-transform:uppercase; border-radius:3px;
  backdrop-filter:blur(10px); transition:all .3s var(--ease);
}
.tab-btn.active, .tab-btn:hover{ background:var(--text-eyebrow); color:var(--slate); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }
.embed-panel{ padding:12px; border-radius:6px; background:var(--surface-glass); border:1px solid var(--border-glass); backdrop-filter:blur(14px); }

/* ---------------- Brochure page ---------------- */
.brochure-hero{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.brochure-cover{ position:relative; border-radius:6px; overflow:hidden; box-shadow:0 40px 90px -25px rgba(0,0,0,.5); }
.brochure-cover img{ width:100%; display:block; }
.brochure-panel{ padding:40px 36px; border-radius:6px; background:var(--surface-glass); border:1px solid var(--border-glass); backdrop-filter:blur(16px); }
.brochure-list{ margin:22px 0 28px; }
.brochure-list li{ font-size:13px; color:var(--text-secondary); padding:9px 0; border-bottom:1px solid var(--border-glass); display:flex; align-items:center; gap:10px; }
.brochure-list li::before{ content:"—"; color:var(--text-eyebrow); }
@media (max-width:900px){ .brochure-hero{ grid-template-columns:1fr; gap:36px; } }

/* ---------------- Footer ---------------- */
.site-footer{ padding:80px 0 0; }
.footer-panel{ padding:52px 44px 0; border-radius:14px 14px 0 0; background:var(--surface-glass); border:1px solid var(--border-glass); border-bottom:none; backdrop-filter:blur(20px); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr; gap:32px; padding-bottom:44px; }
.footer-brand p{ font-size:12.5px; max-width:220px; margin-top:10px; color:var(--text-secondary); }
.footer-brand .word{ text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.footer-legal-menu{ display:inline-flex; gap:6px; }
.footer-legal-menu li{ list-style:none; display:inline; }
.footer-legal-menu li:not(:last-child)::after{ content:"|"; margin-left:6px; opacity:.5; }
.footer-legal-menu a{ color:var(--text-secondary); }
.footer-legal-menu a:hover{ color:var(--text-primary); }
.footer-col h5{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-eyebrow); margin-bottom:16px; }
.footer-col ul li{ margin-bottom:10px; font-size:12.5px; color:var(--text-secondary); }
.footer-col ul li a:hover{ color:var(--text-eyebrow); }
.newsletter-form{ display:flex; margin-top:12px; border-bottom:1px solid var(--border-glass-strong); }
.newsletter-form input{ background:none; border:none; outline:none; color:var(--text-primary); font-size:12.5px; padding:7px 0; flex:1; font-family:var(--font-body); }
.newsletter-form input::placeholder{ color:var(--text-secondary); }
.newsletter-form button{ background:none; border:none; color:var(--text-eyebrow); font-size:15px; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:22px 44px; font-size:10.5px; color:var(--text-secondary); border-top:1px solid var(--border-glass); }
@media (max-width:980px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-panel{ padding:44px 24px 0; } .footer-bottom{ padding:18px 24px; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------------- Scroll to top ---------------- */
#scroll-top{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px);
  width:46px; height:46px; border-radius:50%;
  background:var(--surface-glass); border:1px solid var(--border-glass-strong);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  color:var(--text-eyebrow); display:flex; align-items:center; justify-content:center; font-size:15px;
  opacity:0; pointer-events:none; z-index:900; cursor:pointer;
  transition:opacity .35s var(--ease), transform .35s var(--ease), background .3s var(--ease);
}
#scroll-top.show{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
#scroll-top:hover{ background:var(--text-eyebrow); color:var(--slate); }

.intro-copy{ max-width:800px; margin:0 auto; text-align:center; }
.intro-copy p{ font-size:14px; color:var(--text-secondary); margin-bottom:14px; }
.intro-copy h2{ font-size:clamp(22px,2.6vw,30px); margin-bottom:20px; }

/* ---------------- Viewpoint statement (homepage "Our Point of View") ----------------
   Previously the front page set this block's width with an inline
   style="max-width:900px", a hard pixel cap that never grew with the
   viewport. On a 4K/ultra-wide screen the surrounding .container can be
   1900px+ wide, so a fixed 900px block just sits in the middle of a huge
   empty page — that's the "so much empty space" bug. Scaling max-width with
   clamp() here means the block grows in proportion to the page at every
   width instead of stalling at a desktop value. */
.statement{ max-width:clamp(560px, 46vw, 1200px); margin-inline:auto; text-align:center; }
.statement h2{ margin:18px 0 20px; font-size:clamp(26px, 3.2vw, 40px); }
.statement p{ font-size:clamp(14.5px, .5vw, 17px); color:var(--text-secondary); max-width:min(620px, 90%); margin-inline:auto; }

/* ---------------- Responsive media frame (e.g. Sustainability world map) ----------------
   Same bug pattern as .statement above: the map image used to be wrapped in
   an inline style="max-width:900px", so it stayed a small, fixed-size block
   regardless of how wide the viewport actually was. */
.media-frame{ max-width:clamp(640px, 58vw, 1400px); margin-inline:auto; border-radius:8px; overflow:hidden; box-shadow:0 30px 70px -25px rgba(0,0,0,.4); }
.media-frame img{ width:100%; display:block; }

.seal{ width:64px; height:64px; opacity:.92; }
.trust-row{ display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; }
.trust-row .seal-item{ display:flex; align-items:center; gap:12px; }
.trust-row .seal-item .cap{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-secondary); line-height:1.5; text-align:left; }
.trust-row .seal-item .cap strong{ display:block; color:var(--text-primary); font-family:var(--font-display); font-size:14px; font-weight:500; letter-spacing:0; }

.center{ text-align:center; }

/* ---------------- Google Website Translator: hide its default chrome ----------------
   Our custom .tp-switcher dropdown drives the hidden Google widget (see main.js);
   these rules keep Google's own banner/tooltip UI from ever showing. */
.goog-te-banner-frame, .goog-te-gadget-icon{ display:none !important; }
body{ top:0 !important; position:static !important; }
.goog-tooltip, .goog-tooltip:hover{ display:none !important; }
.goog-text-highlight{ background:none !important; box-shadow:none !important; }
#google_translate_element{ display:none !important; }

/* ---------------- Small phones (<=600px) ---------------- */
@media (max-width:600px){
  .section{ padding:64px 0; }
  .section-tight{ padding:44px 0; }

  .page-hero{ min-height:auto; padding:120px 24px 50px; }
  .page-hero-content{ max-width:100%; }

  /* .hero rules for this breakpoint now live in the consolidated
     "Homepage Hero" block above, so they win the cascade correctly. */

  /* .glass-split .img-wrap img no longer needs a per-breakpoint height —
     it uses aspect-ratio now, which scales correctly at every width on
     its own (see the base rule). A fixed height here used to fight with
     the unscoped "universal" rule further down the file at every width
     except this exact one, which is what caused the image on the
     Industries page to render with the wrong crop ratio. */

  .media-banner{ min-height:auto; padding:56px 0; }
  .media-banner-content .glass-panel{ padding:26px 22px; }

  .heritage{ min-height:auto; padding:56px 0; }
  .heritage-panel{ padding:30px 24px; margin:0 16px; }

  /* Contact page: this grid had no mobile breakpoint before, so the
     two columns were squeezing on phones — stack them instead. */
  .contact-grid{ grid-template-columns:1fr; gap:28px; }

  .brochure-panel{ padding:28px 22px; }

  #scroll-top{ width:44px; height:44px; bottom:18px; }
  .swatch .dot{ width:46px; height:46px; }
}


/* Hero styles are fully consolidated in the "Homepage Hero" block near the
   top of this file — see the note there. This second copy was the source
   of the sizing bugs and has been removed. */

/* ---------------- Google Translate widget cleanup ---------------- */
/* Google's Website Translator injects its own banner/iframe at the top of
   the page and pushes <body> down with an inline "top" offset whenever a
   language is selected. Hide all of that so only our own language dropdown
   UI is visible, and the page layout never shifts. */
.goog-te-banner-frame,
.goog-te-gadget-icon,
.skiptranslate iframe{ display:none !important; visibility:hidden !important; height:0 !important; }
body{ top:0 !important; }
body.goog-te-menu-value:hover{ text-decoration:none; }
.goog-tooltip, .goog-tooltip:hover{ display:none !important; }
.goog-text-highlight{ background:none !important; box-shadow:none !important; }
#google_translate_element{ display:none !important; }


/* ==========================================================================
   RESPONSIVE VIEWPORT SYSTEM — v2 (consolidated)
   Single source of truth for how the whole design scales from phones up
   through true 4K (3840px) displays.

   This replaces three earlier passes at this ("RESPONSIVE VIEWPORT SYSTEM
   v1.2", "TRUE LARGE-DESKTOP / 4K RESPONSIVE PASS v1.3" and "TRUE 4K
   COMPOSITION v1.4") that had each been bolted on top of the last without
   removing what came before. All three redefined the same selectors
   (.container, nav.site-nav, .hero, .num-row, .glass-grid, .glass-split,
   .media-banner, the footer, etc.) at overlapping breakpoints (1921px and
   2561px were each defined up to four times), plus a separate fixed-pixel
   "4K safety" block at 3600px that fought the vw/clamp()-based values from
   the other passes. Because CSS resolves ties by source order rather than
   intent, which value actually won for a given property depended on where
   in the file it happened to sit — that's what produced inconsistent,
   "broken-looking" layouts specifically on large/4K screens while every
   other breakpoint (which only had one rule to satisfy) rendered fine.

   Below, every selector is scaled exactly once, with a single clamp() that
   is calibrated to keep growing smoothly all the way out to ~3840px instead
   of plateauing early — so there is no longer a seam between "desktop" and
   "4K" values, and no two rules can disagree about the outcome.
   ========================================================================== */

/* ---------------- Layout container ----------------
   max-width is a single continuous function of viewport width above
   1920px (900px + 36.46vw), calibrated so it equals exactly 1600px right
   at the 1921px breakpoint (matching the capped value used below it) and
   grows smoothly from there — about 2300px at true 4K (3840px). Using one
   continuous formula instead of two separate breakpoint tiers (as the
   previous passes did) means there is no seam where the container's width
   suddenly jumps at a specific screen size. */
.container{
  width:100%;
  max-width:1600px;
  margin-inline:auto;
  padding-inline:clamp(24px, 3.2vw, 64px);
}
@media (min-width:1921px){
  .container{ max-width:clamp(1600px, calc(900px + 36.46vw), 2500px); padding-inline:clamp(56px, 3.6vw, 120px); }
}

/* ---------------- Section rhythm ---------------- */
.section{ padding-block:clamp(64px, 5vw, 120px); }
.section-tight{ padding-block:clamp(44px, 3.4vw, 84px); }
.head{ max-width:clamp(620px, 34vw, 820px); margin-bottom:clamp(56px, 3vw, 80px); }
.head h2{ font-size:clamp(26px, 2.4vw, 54px); margin-top:clamp(14px, .9vw, 20px); }
.head p{ font-size:clamp(14px, .55vw, 16px); margin-top:clamp(12px, .8vw, 18px); }
.eyebrow{ font-size:clamp(11px, .32vw, 13px); }
.eyebrow::before, .eyebrow.center::before, .eyebrow.center::after{ width:clamp(16px, .55vw, 22px); height:clamp(16px, .55vw, 22px); }

/* ---------------- Navigation ---------------- */
nav.site-nav, nav.site-nav.solid{
  padding-inline:clamp(20px, 2.6vw, 104px);
}
nav.site-nav{ padding-block:clamp(16px, 1vw, 30px); }
nav.site-nav.solid{ padding-block:clamp(10px, .68vw, 22px); }
.brand{ gap:clamp(8px, .5vw, 12px); }
.brand img.mark{
  width:clamp(34px, 2vw, 52px);
  height:clamp(34px, 2vw, 52px);
}
.nav-links{ gap:clamp(16px, 1.4vw, 44px); margin-inline:clamp(14px, 1.4vw, 44px); }
.nav-links a{ font-size:clamp(10.5px, .33vw, 13px); }
.nav-controls{ gap:clamp(12px, .7vw, 22px); }
.theme-toggle-wrap{ font-size:clamp(12px, .34vw, 14px); }
.theme-toggle{ width:clamp(36px, 1.9vw, 46px); height:clamp(21px, 1.1vw, 27px); }
.theme-toggle .knob{ width:clamp(15px, .78vw, 19px); height:clamp(15px, .78vw, 19px); transform:translateX(clamp(15px, .78vw, 19px)); }
[data-theme="light"] .theme-toggle .knob{ transform:translateX(0); }
.tp-trigger{ padding:clamp(7px, .4vw, 11px) clamp(10px, .58vw, 16px); font-size:clamp(10.5px, .33vw, 13px); }
.nav-cta{ padding:clamp(9px, .5vw, 13px) clamp(16px, .9vw, 22px); font-size:clamp(9.5px, .3vw, 12px); }
@media (max-width:1280px) and (min-width:1161px){
  .nav-links{ gap:11px; margin-inline:10px; }
  .nav-links a{ font-size:9.5px; }
  .nav-controls{ gap:9px; }
  .nav-cta{ padding-inline:14px; }
}

/* ---------------- First-viewport hero ----------------
   JS supplies --lc-vh from the actual browser viewport. The CSS fallback
   keeps the hero correct even before JS executes. */
.hero{
  height:100svh;
  min-height:0;
}
@supports (height:100dvh){
  .hero{ height:100dvh; }
}
.hero{ height:var(--lc-vh, 100svh); }
.hero-content{
  padding-top:clamp(112px, 13vh, 230px);
  padding-bottom:clamp(88px, 10vh, 150px);
}
.hero-copy{ width:min(760px, 42vw); max-width:760px; }
.hero-label{ margin-bottom:clamp(18px, 1.1vw, 34px); }
.hero h1{
  font-size:clamp(52px, 4.3vw, 108px);
  max-width:760px;
  margin-bottom:clamp(20px, 1.2vw, 34px);
}
.hero-sub{
  font-size:clamp(13px, 1.05vw, 26px);
  max-width:min(620px, 40vw);
  line-height:1.78;
  margin-bottom:clamp(24px, 1.5vw, 42px);
}
.hero .cta-row{ gap:clamp(10px, 1vw, 26px); }
.hero .btn-glass{
  min-height:clamp(52px, 3.6vw, 76px);
  padding-inline:clamp(22px, 1.7vw, 48px);
  font-size:clamp(11px, .33vw, 13px);
}
.hero .btn-glass.solid{ min-width:clamp(190px, 13vw, 300px); }
.hero .btn-glass.accent{ min-width:clamp(230px, 17vw, 380px); }
.hero-trust{ height:clamp(70px, 4vw, 96px); }
.hero-trust-inner{
  height:clamp(70px, 4vw, 96px);
  min-height:clamp(70px, 4vw, 96px);
  padding-inline:clamp(24px, 3.2vw, 64px);
  gap:clamp(20px, 2vw, 52px);
  font-size:clamp(10.5px, .34vw, 13px);
}

/* At very tall/very wide desktop sizes, keep the copy in a comfortable
   reading zone instead of stretching it toward the edges. */
@media (min-width:1921px){
  .hero-copy{ width:min(760px, 40vw); }
  .hero-sub{ max-width:660px; }
}

/* Landscape laptops / short desktop viewports. */
@media (min-width:721px) and (max-height:800px){
  .hero-content{
    padding-top:clamp(96px, 11vh, 126px);
    padding-bottom:88px;
  }
  .hero-label{ margin-bottom:14px; }
  .hero h1{ margin-bottom:18px; }
  .hero-sub{ margin-bottom:22px; line-height:1.65; }
  .hero .btn-glass{ min-height:52px; }
  .hero-trust{ height:64px; }
  .hero-trust-inner{ height:64px; min-height:64px; }
}

/* Mid-size laptops: prevent the row navigation/content from becoming cramped. */
@media (max-width:1160px) and (min-width:901px){
  .hero-copy{ width:min(560px, 48vw); }
  .hero h1{ font-size:clamp(50px, 5.3vw, 68px); }
  .hero-sub{ max-width:520px; }
}

/* ---------------- Numbered collection rows ----------------
   Gated to min-width:1101px deliberately. This block used to have no
   lower bound at all, so on mobile it was overriding the single-column
   @media(max-width:780px) rule above (same specificity, later in the
   file wins) with a 4-column grid-template-columns whose fixed minmax()
   minimums alone (54+150+250 = 454px, before gaps/padding) don't fit a
   ~375-414px phone screen — that's what was pushing each card's text
   past the edge of the screen and clipping it (caught by the site-wide
   overflow-x:hidden on <body>, so it disappeared with no scrollbar
   rather than wrapping). The 781-1100px tier just below already fully
   redefines every one of these properties for its own range, so this
   block was never actually needed below 1101px. */
@media (min-width:1101px){
.num-row{
  grid-template-columns:minmax(54px, 110px) minmax(150px, .8fr) minmax(250px, 1.5fr) auto;
  gap:clamp(22px, 1.3vw, 32px);
  padding:clamp(26px, 1.6vw, 38px) clamp(30px, 1.8vw, 44px);
  margin-bottom:clamp(12px, .7vw, 16px);
}
.num-row .idx{ font-size:clamp(24px, 1.45vw, 32px); }
.num-row h3{ font-size:clamp(18px, 1vw, 23px); }
.num-row p{ font-size:clamp(12.5px, .4vw, 15px); }
.num-row .btn-glass{ padding:clamp(10px, .6vw, 14px) clamp(18px, 1.2vw, 24px); font-size:clamp(10.5px, .34vw, 13px); }
}
@media (max-width:1100px) and (min-width:781px){
  .num-row{
    grid-template-columns:58px minmax(130px, .8fr) minmax(190px, 1.4fr) auto;
    gap:14px;
    padding:22px 22px;
  }
  .num-row h3{ font-size:16px; }
  .num-row p{ font-size:11.5px; }
  .num-row .btn-glass{ padding-inline:18px; }
}

/* ---------------- Card grids ---------------- */
.glass-grid{ gap:clamp(20px, 1.05vw, 28px); }
.glass-card{ padding:clamp(36px, 1.8vw, 48px) clamp(28px, 1.55vw, 42px); }
.glass-card .icon{ width:clamp(44px, 2.3vw, 56px); height:clamp(44px, 2.3vw, 56px); margin-bottom:clamp(18px, .95vw, 24px); }
.glass-card h3, .glass-card h4{ font-size:clamp(16px, .5vw, 19px); }
.glass-card p{ font-size:clamp(12.5px, .38vw, 15px); }
@media (max-width:1100px) and (min-width:901px){
  .cat-cards{ grid-template-columns:repeat(2,1fr); }
  .glass-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:700px){
  .cat-cards, .glass-grid, .glass-grid.cols-4{ grid-template-columns:1fr; }
}

/* ---------------- Category cards ---------------- */
.cat-cards{ gap:clamp(18px, .95vw, 26px); }
.cat-card img{ height:clamp(160px, 10vw, 220px); }
.cat-card .body{ padding:clamp(18px, 1vw, 26px); }
.cat-card h4{ font-size:clamp(14.5px, .45vw, 18px); }
.cat-card p{ font-size:clamp(11.5px, .34vw, 14px); }

/* ---------------- Image / split sections ----------------
   No height rule here anymore — .glass-split .img-wrap img now uses
   aspect-ratio (set once, in the base rule above) instead of a fixed
   pixel height, so it already scales correctly at every viewport width,
   including true 4K, without needing a separate value here. A fixed
   height here is what previously caused the Industries page image to
   crop incorrectly at large widths: the container above (.container)
   legitimately grows wider at 4K, but a flat height cap didn't grow
   with it, so the image was forced into an increasingly wide, shallow
   crop the image was never composed for. */
.glass-split{ gap:clamp(28px, 3vw, 78px); }
.glass-split h2{ font-size:clamp(24px, 2.3vw, 54px); }
.glass-split p{ font-size:clamp(14px, .42vw, 16px); }
/* .statement (homepage "Our Point of View") had no override at all in
   this system, so its h2 stayed frozen at its base 40px cap while every
   other section heading here grows to 54px — the exact same "titles
   look inconsistent at 4K" bug as the .statement p fix above, just on
   the heading instead of the paragraph. */
.statement h2{ font-size:clamp(26px, 3.2vw, 54px); }

.media-banner{ min-height:clamp(420px, 42vw, 820px); }
.media-banner-content{ max-width:clamp(620px, 38vw, 780px); }
.media-banner-content .glass-panel{ padding:clamp(40px, 2.1vw, 56px) clamp(38px, 2vw, 52px); }
.media-banner-content h2{ font-size:clamp(24px, 2.35vw, 54px); }
.media-banner-content p{ font-size:clamp(13.5px, .42vw, 16px); }

.heritage{ min-height:clamp(520px, 42vw, 820px); }
.heritage-panel{ max-width:clamp(540px, 34vw, 680px); padding:clamp(46px, 2.4vw, 62px) clamp(42px, 2.2vw, 56px); }
.heritage-panel h2{ font-size:clamp(26px, 2.6vw, 54px); }
.heritage-panel p{ font-size:clamp(14px, .42vw, 16px); }

/* ---------------- Footer ---------------- */
.site-footer{ padding-top:clamp(80px, 5vw, 120px); }
.footer-panel{ padding:clamp(52px, 2.8vw, 72px) clamp(44px, 2.4vw, 62px) 0; }
.footer-grid{ gap:clamp(24px, 1.7vw, 44px); padding-bottom:clamp(44px, 2.3vw, 58px); }
.footer-brand p, .footer-col ul li, .newsletter-form input, .footer-contact{ font-size:clamp(12px, .38vw, 15px); }
.footer-contact{ color:var(--text-secondary); margin:0; }
.footer-col h5{ font-size:clamp(10px, .31vw, 13px); }

/* ---------------- Accessibility / overflow ---------------- */
html, body{ max-width:100%; overflow-x:clip; }
img{ max-width:100%; }
@media (prefers-reduced-motion:reduce){
  .hero-background-image, .reveal, .glass-card, .glass-split .img-wrap{ transition:none !important; }
}


/* ==========================================================================
   INTERIOR-PAGE COMPONENTS — FLUID DESKTOP-TO-4K SCALING
   Previous pass: coefficients were calibrated so small that most of them
   never grew past their floor value until the viewport was nearly 4000px
   wide, and separately .page-hero's min-height used a raw (uncapped) vh
   value that made the banner balloon into a mostly-empty block on tall
   4K viewports. Both are fixed here:
   - every clamp() below is calibrated so the value is already growing at
     1920px and reaches its target right around 3840px (100vw = 38.4 times
     the vw coefficient), instead of sitting flat at the minimum;
   - wrapped in one min-width so it can never interfere with the mobile/
     tablet rules defined earlier in this file (which must keep winning
     the cascade on small screens regardless of source order).
   ========================================================================== */
@media (min-width:1200px){

  /* Intro copy (About / Quality / Sustainability / generic Page)
     Was capping at 78px/25px — a different, much larger scale than the
     54px/16px cap every other h2/p on the site uses (.head h2, .glass-split
     h2, .heritage-panel p, etc). That mismatch, not anything to do with
     padding, is what read as "inconsistent text sizes" at 4K: this exact
     heading style looks like a different, larger design system depending
     on which page it's on. Brought back in line with the rest of the site. */
  .intro-copy{ max-width:clamp(800px, 28.6vw, 1100px); }
  .intro-copy h2{ font-size:clamp(22px, 1.4vw, 54px); }
  .intro-copy p{ font-size:clamp(14px, .45vw, 16px); }

  /* Certification badges (Industries / Quality / Brochure) */
  .cert-strip{ gap:clamp(40px, 1.82vw, 70px); }
  .cert-strip img{ max-height:clamp(64px, 2.86vw, 110px); }
  .cert-strip--lg{ gap:clamp(64px, 2.6vw, 100px); }
  .cert-strip--lg img{ max-height:clamp(90px, 4vw, 154px); }
  .cert-strip .cert-item{ max-width:clamp(220px, 8.3vw, 320px); }
  .cert-strip .cert-item p{ font-size:clamp(12px, .38vw, 15px); }

  /* Contact page */
  .contact-grid{ gap:clamp(56px, 2.34vw, 90px); }
  .contact-panel{ padding:clamp(36px, 1.67vw, 64px) clamp(32px, 1.46vw, 56px); }
  .contact-item .v{ font-size:clamp(14px, .42vw, 16px); }
  .contact-item .k{ font-size:clamp(10px, .32vw, 13px); }
  .social-row a{ width:clamp(32px, 1.25vw, 48px); height:clamp(32px, 1.25vw, 48px); font-size:clamp(11px, .42vw, 16px); }
  .tab-btn{ padding:clamp(11px, .9vw, 18px) clamp(20px, 1.6vw, 32px); font-size:clamp(10px, .32vw, 13px); }
  .embed-panel{ padding:clamp(12px, .52vw, 20px); }

  /* Products page — spec table and swatches
     table.spec-table was capping at 24px with up to 26px/32px cell
     padding — noticeably larger than body copy anywhere else on the site
     (16px cap), which is what made these tables feel oversized and
     over-padded specifically at large widths. Brought down to the same
     body-text scale, with padding trimmed to match. */
  table.spec-table{ font-size:clamp(12.5px, .38vw, 15px); }
  table.spec-table th, table.spec-table td{ padding:clamp(14px, .42vw, 18px) clamp(18px, .52vw, 24px); }
  .spec-title{ font-size:clamp(22px, 1vw, 38px); }
  .spec-sub{ font-size:clamp(11px, .32vw, 13px); }
  .spec-block{ margin-bottom:clamp(64px, 1.9vw, 80px); }
  .spec-block p.desc{ font-size:clamp(13.5px, .45vw, 16px); max-width:clamp(640px, 23.4vw, 900px); }
  .swatch-row{ gap:clamp(12px, 1.6vw, 40px); }
  .swatch .dot{ width:clamp(56px, 2.5vw, 96px); height:clamp(56px, 2.5vw, 96px); }
  .swatch .name{ font-size:clamp(10px, .32vw, 13px); }

  /* Brochure page */
  .brochure-hero{ gap:clamp(56px, 2.34vw, 90px); }
  .brochure-panel{ padding:clamp(40px, 1.77vw, 68px) clamp(36px, 1.56vw, 60px); }
  .brochure-list li{ font-size:clamp(13px, .4vw, 16px); }
}

/* ==========================================================================
   NATIVE (UNSCALED) 4K DISPLAY COMPENSATION
   Everything above scales layout *proportionally to CSS viewport width* via
   clamp()/vw, which is the correct fix for "the site looks broken/cramped
   at large widths." It cannot fix a different problem: on a real 4K panel
   (e.g. an HP ZBook 17 with a UHD screen) running Windows display scaling
   at 100%, the browser reports a ~3840px CSS viewport with a
   devicePixelRatio of ~1 — one CSS pixel is one physical screen pixel. A
   4K panel packs far more pixels into the same physical inches than a
   1080p/1440p monitor, so every element still measures "correctly" in CSS
   px yet looks physically tiny. This happens on every website at that
   display setting, not just this one — it's why Windows itself recommends
   ~200–250% scaling for a 4K laptop panel, and why Ctrl+ (browser zoom)
   fixes it instantly on any page.

   `min-resolution`/`max-resolution` below check devicePixelRatio, not the
   physical screen, but the combination of "very wide CSS viewport" +
   "devicePixelRatio ~1" only occurs when no OS/browser scaling has been
   applied to a high-density screen — a normally-scaled 4K laptop (150–250%)
   reports a much narrower CSS viewport instead (e.g. ~1536–2560px), so this
   rule can't misfire on ordinary setups; it only fires for the exact "4K
   panel, 100% scale" case.

   `zoom` (not `transform:scale`) is used deliberately: transform creates a
   new containing block for position:fixed descendants, which would break
   the fixed nav bar and scroll-to-top button; zoom rescales the page the
   same way browser-level page zoom does, before layout, with no such side
   effect, and every clamp()/vw rule above keeps working exactly as before
   because they now resolve against the smaller *effective* viewport. It's
   a Chromium/WebKit feature (Chrome, Edge, Safari — the browsers this
   laptop scenario is realistically running); Firefox ignores it and simply
   keeps the proportional clamp() scaling on its own. */
@media (min-width:3200px) and (min-resolution:0.9dppx) and (max-resolution:1.15dppx){
  html{
    --uz-zoom:1.5;
    zoom:var(--uz-zoom);
  }

  /* Correction: switching the hero to plain svh/dvh (previous pass) was
     not enough, because `zoom` does not do what it looks like it should
     here. Confirmed against how desktop browser zoom actually behaves:
     zooming in/out does NOT change what vw/vh/svh/dvh resolve to — the
     CSS-pixel viewport stays exactly the same size, and zoom only
     magnifies the already-computed rendering afterward (this is also true
     of the CSS `zoom` property, since it's spec'd to behave like page
     zoom). That means every vw/vh/clamp() value elsewhere in this file is
     computed against the *real, un-zoomed* viewport and then simply
     rendered 1.5x bigger — which is harmless almost everywhere (a 2300px
     container rendering at 3450px still fits inside a real 3840px-wide
     4K screen, so it just looks pleasantly larger). It's NOT harmless for
     .hero, which is deliberately sized to exactly fill one screen: at
     100dvh pre-zoom, it renders at 150% of the real viewport height once
     magnified — spilling past the bottom, which is exactly the bug.
     The fix is to target 100% divided by the zoom factor *before* zoom is
     applied, so that after the 1.5x magnification it lands back on
     exactly 100% of the real, visible screen — no more, no less. */
  .hero{ height:calc(100svh / var(--uz-zoom)); }
  @supports (height:100dvh){
    .hero{ height:calc(100dvh / var(--uz-zoom)); }
  }
}