/* ==========================================================================
   Safe Fences — Design System
   Metallic Navy Blue & White · premium, elegant
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* ---- navy scale ---- */
  --navy-900:#08172B;
  --navy-800:#0D2340;
  --navy-700:#123055;
  --navy-600:#1A406E;
  --navy-500:#23548C;
  --navy-400:#3D6FA8;

  /* ---- metallic / steel ---- */
  --steel-600:#47597A;
  --steel-500:#5F7695;
  --steel-400:#8399B5;
  --steel-300:#AFC0D4;
  --steel-200:#D2DCE8;
  --steel-100:#E7EDF4;

  /* ---- surfaces ---- */
  --bg:#F7F9FC;
  --bg-alt:#EEF3F9;
  --white:#FFFFFF;

  /* ---- text ---- */
  --ink:#0B1D36;
  --ink-soft:#4A5E7A;
  --ink-faint:#8095B0;

  --line:rgba(11,29,54,0.12);
  --line-soft:rgba(11,29,54,0.07);

  --brand: var(--navy-600);
  --brand-dark: var(--navy-800);
  --accent:#2A6FB0;

  /* ---- glass ---- */
  --glass-bg: rgba(255,255,255,0.50);
  --glass-bg-strong: rgba(255,255,255,0.74);
  --glass-border: rgba(255,255,255,0.80);
  --glass-blur: blur(34px) saturate(200%);
  --glass-shadow:
    0 28px 70px -24px rgba(11,29,54,0.34),
    0 2px 10px rgba(11,29,54,0.05),
    inset 0 1px 0 rgba(255,255,255,0.65);

  /* brushed-metal sheen used on accents */
  --metal: linear-gradient(135deg,#E9EFF6 0%, #AFC0D4 22%, #F4F8FC 44%, #8399B5 62%, #DCE5EF 82%, #A9BBD1 100%);
  --navy-metal: linear-gradient(135deg,#1A406E 0%, #08172B 26%, #2A5A94 50%, #0D2340 74%, #23548C 100%);

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-pill:999px;

  --container:1240px;
  --ff-display:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
/* The header is fixed, so a plain hash jump would tuck the target's top edge
   right under it. Give every in-page anchor target room to clear it. */
[id]{ scroll-margin-top:112px; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background-image:
    radial-gradient(58% 46% at 88% -8%, rgba(26,64,110,0.10), transparent 62%),
    radial-gradient(46% 38% at -8% 16%, rgba(35,84,140,0.08), transparent 62%);
  background-attachment:fixed;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family: var(--ff-display); font-weight:800; margin:0 0 .5em;
  letter-spacing:-0.022em; color: var(--ink); line-height:1.18;
}
p{ margin:0 0 1em; color: var(--ink-soft); }
button{ font-family:inherit; }
strong{ color: var(--ink); font-weight:700; }
:focus-visible{ outline:2px solid var(--navy-500); outline-offset:3px; }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.section{ padding:108px 0; position:relative; }
.section-tight{ padding:74px 0; }
@media (max-width:860px){ .section{ padding:76px 0; } .section-tight{ padding:54px 0; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ff-body); font-weight:700; font-size:12px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--navy-500);
  margin-bottom:16px;
}
.eyebrow::before{ content:''; width:24px; height:2px; background:var(--navy-500); display:inline-block; border-radius:2px; }

h2.h-title{ font-size:clamp(1.95rem,3.1vw,2.7rem); }
h1.h-hero{ font-size:clamp(2.3rem,4.9vw,4.1rem); line-height:1.05; letter-spacing:-0.03em; }
.lead{ font-size:1.12rem; color:var(--ink-soft); max-width:640px; }

/* ============ buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:var(--radius-pill);
  font-family:var(--ff-display); font-weight:700; font-size:.94rem; letter-spacing:.005em;
  border:1px solid transparent; cursor:pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background: linear-gradient(135deg, var(--navy-600), var(--navy-800));
  color:#fff; box-shadow:0 14px 30px -10px rgba(13,35,64,0.55);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 20px 38px -10px rgba(13,35,64,0.62); background:linear-gradient(135deg, var(--navy-500), var(--navy-700)); }
.btn-glass{
  background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border-color:var(--glass-border); color:var(--navy-800); box-shadow:var(--glass-shadow);
}
.btn-glass:hover{ transform:translateY(-2px); background:var(--glass-bg-strong); }
.btn-outline{ background:transparent; border-color:var(--steel-300); color:var(--navy-800); }
.btn-outline:hover{ border-color:var(--navy-600); background:rgba(26,64,110,0.06); }
.btn-sm{ padding:10px 20px; font-size:.84rem; }
.btn-block{ width:100%; }

/* ============ glass ============ */
.glass{
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  border-radius:var(--radius-lg);
}
.glass-strong{ background:var(--glass-bg-strong); }

/* ==========================================================================
   Brand lockup — bold block wordmark + enhanced logo mark
   ========================================================================== */
.brand{ display:flex; align-items:center; gap:13px; }
.brand-logo{ width:55px; height:55px; flex:none; display:block; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-text b{
  font-family:var(--ff-display);
  font-size:1.46rem; font-weight:800;
  letter-spacing:.10em; text-transform:uppercase;
  color:var(--navy-800); white-space:nowrap;
}
.brand-text span{
  font-family:var(--ff-body); font-size:10.5px; font-weight:600;
  letter-spacing:.20em; text-transform:uppercase; color:var(--steel-600);
  margin-top:6px; white-space:nowrap;
}
.site-footer .brand-text b{ color:#fff; }
.site-footer .brand-text span{ color:var(--steel-400); }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200; padding:18px 0;
  transition:padding .4s var(--ease);
}
/* The lockup always sits on its own frosted pill, so legibility never depends
   on what happens to be behind the header — photo hero, navy cover or page. */
.site-header .nav-inner{
  max-width:var(--container); margin:0 auto; padding:10px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,0.74);
  backdrop-filter:blur(30px) saturate(190%); -webkit-backdrop-filter:blur(30px) saturate(190%);
  border:1px solid rgba(255,255,255,0.72);
  box-shadow:0 18px 50px -20px rgba(11,29,54,0.34), 0 1px 2px rgba(11,29,54,0.05), inset 0 1px 0 rgba(255,255,255,0.7);
  transition:background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.site-header.scrolled{ padding:10px 0; }
.site-header.scrolled .nav-inner{
  background:rgba(255,255,255,0.92);
  box-shadow:0 20px 50px -22px rgba(11,29,54,0.40), 0 1px 2px rgba(11,29,54,0.06);
}
/* Fallback for browsers without backdrop-filter: go near-opaque instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .site-header .nav-inner{ background:rgba(255,255,255,0.95); }
}

.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{
  padding:10px 16px; border-radius:var(--radius-pill);
  font-family:var(--ff-display); font-weight:600; font-size:.91rem; color:var(--ink-soft);
  transition:background .25s, color .25s;
}
.nav-links a:hover, .nav-links a.active{ background:rgba(26,64,110,0.09); color:var(--navy-800); }

/* ==========================================================================
   Products mega-menu — native <details>/<summary> so it works with zero JS
   and is keyboard/screen-reader operable by default. Desktop gets a
   multi-column dropdown card; the phone nav collapses it to a plain list.
   ========================================================================== */
.nav-item{ position:relative; }
.nav-item > summary.nav-trigger{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:6px;
  padding:10px 14px 10px 16px; border-radius:var(--radius-pill);
  font-family:var(--ff-display); font-weight:600; font-size:.91rem; color:var(--ink-soft);
  transition:background .25s, color .25s;
}
.nav-item > summary.nav-trigger::-webkit-details-marker{ display:none; }
.nav-item > summary.nav-trigger::marker{ content:''; }
.nav-item > summary.nav-trigger:hover,
.nav-item > summary.nav-trigger.active{ background:rgba(26,64,110,0.09); color:var(--navy-800); }
.nav-item .chev{ width:13px; height:13px; transition:transform .25s var(--ease); flex:none; }
.nav-item[open] .chev{ transform:rotate(180deg); }

.mega{
  display:grid; grid-template-columns:1.05fr repeat(4,1fr); gap:26px;
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%);
  width:min(940px,86vw); padding:26px;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(30px) saturate(190%); -webkit-backdrop-filter:blur(30px) saturate(190%);
  border:1px solid rgba(255,255,255,0.9); border-radius:var(--radius-lg);
  box-shadow:0 34px 80px -26px rgba(11,29,54,0.42), inset 0 1px 0 rgba(255,255,255,0.85);
  z-index:120;
}
.mega-feature{ display:flex; flex-direction:column; gap:14px; }
.mega-feature .mf-img{ border-radius:var(--radius-md); overflow:hidden; aspect-ratio:4/3; }
.mega-feature .mf-img img{ width:100%; height:100%; object-fit:cover; }
.mega-feature b{ font-family:var(--ff-display); font-size:1rem; display:block; margin-bottom:4px; color:var(--navy-800); }
.mega-feature p{ font-size:.84rem; margin:0 0 4px; }
.mega-cta{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--ff-display);
  font-size:.85rem; font-weight:700; color:var(--navy-600);
}
.mega-cta svg{ width:14px; height:14px; transition:transform .25s; }
.mega-cta:hover svg{ transform:translateX(3px); }
.mega-col h4{
  font-family:var(--ff-display); font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--navy-500); margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid var(--line-soft);
}
.mega-col a{
  display:block; font-size:.89rem; line-height:1.4; color:var(--ink-soft);
  padding:8px 10px; margin:0 -10px; border-radius:var(--radius-sm);
  transition:color .2s, transform .2s, background .2s;
}
.mega-col a:hover, .mega-col a:focus-visible{
  color:var(--navy-700); transform:translateX(2px); background:rgba(26,64,110,0.08); outline:none;
}

@media (max-width:1010px){
  /* On the phone dropdown the mega panel becomes a plain single-column list,
     laid out in-flow rather than as an absolute-positioned card. */
  .nav-item > summary.nav-trigger{ justify-content:center; }
  .mega{
    position:static; transform:none; width:auto; grid-template-columns:1fr; gap:4px;
    background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
    border:none; box-shadow:none; padding:6px 6px 10px;
  }
  .mega-feature{ display:none; }
  .mega-col{ padding:10px 10px 4px; }
  .mega-col h4{ text-align:center; }
  .mega-col a{ text-align:center; }
}

.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-toggle{
  display:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  background:var(--glass-bg); align-items:center; justify-content:center; cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:''; display:block; width:18px; height:2px; background:var(--navy-800); border-radius:2px; position:relative;
  transition:transform .3s, opacity .3s;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }
.nav-toggle.open span{ background:transparent; }
.nav-toggle.open span::before{ transform:translateY(6px) rotate(45deg); }
.nav-toggle.open span::after{ transform:translateY(-6px) rotate(-45deg); }

/* The enlarged lockup needs more room, so shed the phone pill before the
   nav has a chance to overflow. */
@media (max-width:1180px){
  .nav-cta .btn-glass.hide-mobile{ display:none; }
  .nav-links a{ padding:10px 13px; }
}

/* On phones the header CTA no longer fits beside the larger lockup, so it
   moves into the dropdown instead of being dropped. */
.nav-quote-mobile{ display:none; }
@media (max-width:520px){
  .nav-cta .btn-primary{ display:none; }
  .nav-links .nav-quote-mobile{
    display:block; margin-top:4px; color:#fff; font-weight:700;
    background:linear-gradient(135deg,var(--navy-600),var(--navy-800));
  }
  .nav-links .nav-quote-mobile:hover{
    background:linear-gradient(135deg,var(--navy-500),var(--navy-700)); color:#fff;
  }
}

@media (max-width:1010px){
  .nav-links{
    position:fixed; inset:84px 16px auto 16px; flex-direction:column; align-items:stretch; gap:6px;
    padding:14px; border-radius:var(--radius-lg);
    /* near-opaque: an open menu has to stay legible over any hero behind it */
    background:rgba(255,255,255,0.97); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid rgba(255,255,255,0.9);
    box-shadow:0 30px 70px -20px rgba(8,23,43,0.55), inset 0 1px 0 rgba(255,255,255,0.9);
    transform-origin:top center; transform:scaleY(.9) translateY(-8px); opacity:0; pointer-events:none;
    transition:transform .3s var(--ease), opacity .3s var(--ease);
  }
  .nav-links.open{ transform:scaleY(1) translateY(0); opacity:1; pointer-events:auto; }
  .nav-links a{ text-align:center; padding:13px 16px; }
  .nav-toggle{ display:flex; }
  .nav-cta .btn-glass.hide-mobile{ display:none; }
}

/* ==========================================================================
   Hero — 70/30 split: rotating product photography on the left,
   message on the right. Fixed to the viewport height so the whole thing
   reads in a single screen, no scroll required to see the product.
   ========================================================================== */
.hero{
  height:100svh; min-height:560px; display:flex; overflow:hidden;
}

.hero-photo-panel{ flex:0 0 70%; max-width:70%; position:relative; }
.hero-slides{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0; opacity:0; transform:scale(1.06);
  transition:opacity 1.4s var(--ease), transform 7s linear;
  background-size:cover; background-position:center;
}
.hero-slide.active{ opacity:1; transform:scale(1); }
.hero-slide-cap{
  position:absolute; left:28px; bottom:28px; z-index:2;
  padding:9px 18px; border-radius:var(--radius-pill);
  background:rgba(8,23,43,0.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:#fff; font-family:var(--ff-display); font-size:.82rem; font-weight:600; letter-spacing:.01em;
  opacity:0; transform:translateY(8px); transition:opacity .6s var(--ease) .3s, transform .6s var(--ease) .3s;
}
.hero-slide.active .hero-slide-cap{ opacity:1; transform:translateY(0); }
.hero-dots{
  position:absolute; z-index:3; left:28px; top:28px; display:flex; gap:8px;
}
.hero-dots button{
  width:22px; height:4px; border-radius:2px; background:rgba(255,255,255,0.4); border:none; cursor:pointer;
  transition:background .3s, width .3s;
}
.hero-dots button.active{ background:#fff; width:34px; }

.hero-text-panel{
  flex:0 0 30%; max-width:30%; display:flex; flex-direction:column; justify-content:center;
  padding:110px 44px 40px; background:var(--bg); position:relative; z-index:2; overflow-y:auto;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:9px; padding:7px 15px 7px 9px; border-radius:var(--radius-pill);
  background:var(--bg-alt); border:1px solid var(--line-soft);
  font-family:var(--ff-display); font-size:.7rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--navy-700); margin-bottom:20px; align-self:flex-start;
}
.hero-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--navy-500); box-shadow:0 0 0 4px rgba(35,84,140,0.18); flex:none; }
.hero-text-panel h1.h-hero{ font-size:clamp(1.7rem,2vw + 1rem,2.3rem); line-height:1.14; }
.hero-text-panel .lead{ font-size:.96rem; margin-top:14px; }
.hero-text-panel .hero-cta{ display:flex; flex-direction:column; gap:12px; margin-top:26px; }
.hero-text-panel .hero-cta .btn{ width:100%; }

@media (max-width:1180px){
  .hero-text-panel{ padding:110px 32px 32px; }
}

@media (max-width:900px){
  .hero{ height:auto; min-height:0; flex-direction:column; }
  .hero-photo-panel{ flex:0 0 auto; max-width:none; height:52svh; min-height:340px; }
  .hero-text-panel{
    flex:0 0 auto; max-width:none; padding:36px 24px 44px; overflow-y:visible;
  }
  .hero-badge{ margin-bottom:16px; }
  .hero-text-panel h1.h-hero{ font-size:1.9rem; }
  .hero-text-panel .hero-cta{ flex-direction:row; flex-wrap:wrap; }
  .hero-text-panel .hero-cta .btn{ width:auto; flex:1 1 auto; }
}
@media (max-width:520px){
  .hero-photo-panel{ height:46svh; min-height:300px; }
  .hero-slide-cap{ left:18px; bottom:18px; font-size:.76rem; padding:8px 14px; }
  .hero-dots{ left:18px; top:18px; }
  .hero-text-panel .hero-cta{ flex-direction:column; }
  .hero-text-panel .hero-cta .btn{ width:100%; }
}

/* ==========================================================================
   Stats bar — the three trust numbers, now a slim band directly under
   the hero rather than crowded into the narrow text column.
   ========================================================================== */
.stats-bar{ padding:26px 0; background:var(--bg-alt); border-bottom:1px solid var(--line-soft); }
.stats-bar-row{ display:flex; justify-content:center; gap:64px; flex-wrap:wrap; }
.stats-bar-row div{ text-align:center; }
.stats-bar-row b{
  display:block; font-family:var(--ff-display); font-size:1.55rem; font-weight:800; letter-spacing:-0.02em;
  background:var(--navy-metal); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stats-bar-row span{ font-size:.7rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.1em; font-weight:600; }
@media (max-width:560px){ .stats-bar-row{ gap:30px; } }

/* ==========================================================================
   Trust marquee
   ========================================================================== */
.trust-strip{ padding:20px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); overflow:hidden; background:rgba(255,255,255,0.45); }
.trust-track{ display:flex; gap:58px; width:max-content; animation:marquee 34s linear infinite; }
.trust-strip:hover .trust-track{ animation-play-state:paused; }
.trust-item{ display:flex; align-items:center; gap:10px; font-family:var(--ff-display); font-weight:600; color:var(--ink-soft); font-size:.88rem; white-space:nowrap; }
.trust-item svg{ width:17px; height:17px; color:var(--navy-500); flex:none; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ==========================================================================
   Carousel
   ========================================================================== */
.carousel-wrap{ position:relative; }
.carousel-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:34px; flex-wrap:wrap; }
.carousel-controls{ display:flex; gap:10px; }
.carousel-controls button{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--glass-bg); border:1px solid var(--glass-border); cursor:pointer; box-shadow:var(--glass-shadow);
  color:var(--navy-700); transition:background .3s, transform .3s, color .3s;
}
.carousel-controls button:hover{ background:var(--navy-700); color:#fff; transform:translateY(-2px); }
.carousel-controls svg{ width:18px; height:18px; }

.carousel-track{ display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding:10px 4px 30px; -ms-overflow-style:none; scrollbar-width:none; }
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-card{
  flex:0 0 auto; width:320px; scroll-snap-align:start; border-radius:var(--radius-lg);
  padding:18px; position:relative; overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.carousel-card:hover{ transform:translateY(-8px); box-shadow:0 32px 68px -24px rgba(11,29,54,0.38); }
.carousel-card .cc-media{ border-radius:var(--radius-md); overflow:hidden; aspect-ratio:4/3; margin-bottom:16px; position:relative; background:var(--steel-100); }
.carousel-card .cc-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.carousel-card:hover .cc-media img{ transform:scale(1.08); }
.carousel-card .cc-tag{
  position:absolute; top:14px; left:14px; z-index:2; padding:6px 12px; border-radius:var(--radius-pill);
  background:rgba(13,35,64,0.86); backdrop-filter:blur(8px);
  font-family:var(--ff-display); font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff;
}
.carousel-card h3{ font-size:1.12rem; margin-bottom:6px; }
.carousel-card p{ font-size:.87rem; margin-bottom:14px; }
.carousel-card .cc-link{ font-family:var(--ff-display); font-size:.84rem; font-weight:700; color:var(--navy-600); display:inline-flex; align-items:center; gap:6px; }
.carousel-card .cc-link svg{ width:14px; height:14px; transition:transform .3s; }
.carousel-card:hover .cc-link svg{ transform:translateX(4px); }
@media (max-width:640px){ .carousel-card{ width:264px; } }

/* ==========================================================================
   Grids / feature cards
   ========================================================================== */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:980px){ .grid-3{ grid-template-columns:1fr 1fr; } .grid-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .grid-3,.grid-2,.grid-4{ grid-template-columns:1fr; } }

.feature-card{ padding:30px 26px; }
.feature-icon{
  width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg, var(--navy-600), var(--navy-800)); color:#fff; margin-bottom:18px;
  box-shadow:0 10px 22px -10px rgba(13,35,64,0.6);
}
.feature-icon svg{ width:23px; height:23px; }
.feature-card h3{ font-size:1.12rem; margin-bottom:8px; }
.feature-card p{ font-size:.91rem; margin:0; }

/* ==========================================================================
   Split / media
   ========================================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:40px; } }
.media-stack{ position:relative; }
.media-stack .m1{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--glass-shadow); }
.media-stack .m1 img{ width:100%; aspect-ratio:4/3.1; object-fit:cover; }
.media-stack .m2{ position:absolute; width:46%; bottom:-30px; right:-30px; border-radius:var(--radius-md); overflow:hidden; border:6px solid var(--bg); box-shadow:var(--glass-shadow); }
.media-stack .m2 img{ width:100%; aspect-ratio:1; object-fit:cover; }
.badge-float{ position:absolute; top:20px; left:-20px; padding:16px 20px; display:flex; align-items:center; gap:12px; z-index:3; }
.badge-float b{ display:block; font-family:var(--ff-display); font-size:1.5rem; font-weight:800; color:var(--navy-700); }
.badge-float span{ font-size:.7rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.1em; font-weight:600; }
@media (max-width:900px){ .media-stack .m2{ width:42%; } .badge-float{ left:12px; } }

.check-list li{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; font-size:.95rem; color:var(--ink-soft); }
.check-list svg{ width:20px; height:20px; flex:none; color:var(--navy-500); margin-top:3px; }

/* ==========================================================================
   Spec band — metallic navy
   ========================================================================== */
.spec-band{ padding:60px 0; }
.spec-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,0.14); border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 26px 60px -24px rgba(11,29,54,0.5); }
.spec-item{ background:linear-gradient(150deg, var(--navy-700), var(--navy-900)); padding:32px 24px; position:relative; }
.spec-item::after{ content:''; position:absolute; inset:0; background:linear-gradient(120deg, rgba(255,255,255,0.10), transparent 42%); pointer-events:none; }
.spec-item b{ display:block; font-family:var(--ff-display); font-size:1.45rem; font-weight:800; margin-bottom:5px; color:#fff; letter-spacing:-0.02em; }
.spec-item span{ font-size:.79rem; color:var(--steel-300); line-height:1.5; display:block; }
@media (max-width:820px){ .spec-grid{ grid-template-columns:1fr 1fr; } }

/* ==========================================================================
   Product pages
   ========================================================================== */
.page-hero{ padding:168px 0 68px; position:relative; overflow:hidden; }
.page-hero .breadcrumb{ font-size:.84rem; color:var(--ink-faint); margin-bottom:18px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.page-hero .breadcrumb a:hover{ color:var(--navy-600); }
.category-nav{ display:flex; gap:11px; flex-wrap:wrap; margin-top:30px; }
.category-nav a{
  padding:11px 20px; border-radius:var(--radius-pill);
  font-family:var(--ff-display); font-size:.87rem; font-weight:600;
  background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--ink-soft);
  transition:all .25s;
}
.category-nav a:hover, .category-nav a.active{ background:linear-gradient(135deg,var(--navy-600),var(--navy-800)); color:#fff; border-color:transparent; }

.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width:980px){ .product-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .product-grid{ grid-template-columns:1fr; } }

.product-card{ overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.product-card:hover{ transform:translateY(-6px); box-shadow:0 30px 64px -26px rgba(11,29,54,0.4); }
.product-card .pc-media{ aspect-ratio:5/4; overflow:hidden; background:var(--steel-100); position:relative; }
.product-card .pc-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.product-card:hover .pc-media img{ transform:scale(1.07); }
.product-card .pc-body{ padding:20px 22px 24px; }
.product-card h3{ font-size:1.04rem; margin-bottom:5px; }
.product-card p{ font-size:.85rem; margin:0; }
.product-card .pc-meta{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.product-card .pc-meta span{
  font-family:var(--ff-display); font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--navy-600); background:rgba(26,64,110,0.10); padding:4px 10px; border-radius:var(--radius-pill);
}

/* clickable product photo → opens the spec lightbox */
.pc-media[data-spec-trigger]{ cursor:zoom-in; }
.pc-media[data-spec-trigger]::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(8,23,43,0.32) 100%);
  opacity:0; transition:opacity .35s var(--ease);
}
.pc-media[data-spec-trigger]:hover::after{ opacity:1; }
.zoom-hint{
  position:absolute; right:12px; bottom:12px; z-index:2; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.92); display:flex; align-items:center; justify-content:center; color:var(--navy-700);
  opacity:0; transform:translateY(6px); transition:opacity .3s var(--ease), transform .3s var(--ease);
  box-shadow:0 8px 18px -8px rgba(11,29,54,0.4);
}
.pc-media[data-spec-trigger]:hover .zoom-hint{ opacity:1; transform:translateY(0); }
.zoom-hint svg{ width:16px; height:16px; }

/* ==========================================================================
   Spec lightbox — opened from a product photo, shows dimensions from the catalog
   ========================================================================== */
.spec-lightbox{
  position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease); background:rgba(8,23,43,0.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.spec-lightbox.open{ opacity:1; visibility:visible; }
.spec-lightbox-panel{
  width:min(880px,100%); max-height:88vh; overflow-y:auto; display:grid; grid-template-columns:1.1fr 1fr;
  background:#fff; border-radius:var(--radius-lg); box-shadow:0 50px 100px -30px rgba(2,8,20,0.55);
  transform:translateY(18px) scale(.98); transition:transform .35s var(--ease);
}
.spec-lightbox.open .spec-lightbox-panel{ transform:translateY(0) scale(1); }
.spec-lightbox-media{ background:var(--steel-100); min-height:260px; }
.spec-lightbox-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.spec-lightbox-body{ padding:32px; position:relative; }
.spec-lightbox-close{
  position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%; border:none;
  background:var(--steel-100); color:var(--navy-800); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s;
}
.spec-lightbox-close:hover{ background:var(--steel-200); }
.spec-lightbox-close svg{ width:17px; height:17px; }
.spec-lightbox-eyebrow{ font-family:var(--ff-display); font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--navy-500); margin-bottom:8px; }
.spec-lightbox-body h3{ font-size:1.4rem; margin-bottom:8px; padding-right:40px; }
.spec-lightbox-body .lb-desc{ font-size:.92rem; margin-bottom:20px; }
.spec-lightbox-specs{ margin:0; }
.spec-lightbox-specs .row{
  display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line-soft); font-size:.88rem;
}
.spec-lightbox-specs .row:last-child{ border-bottom:none; }
.spec-lightbox-specs dt{ color:var(--ink-faint); font-weight:600; flex:none; }
.spec-lightbox-specs dd{ margin:0; color:var(--ink); font-weight:600; text-align:right; }
.spec-lightbox-note{
  margin-top:18px; font-size:.8rem; color:var(--ink-faint); background:var(--bg-alt); padding:12px 14px; border-radius:var(--radius-sm);
}
.spec-lightbox-cta{ margin-top:20px; display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width:680px){
  .spec-lightbox-panel{ grid-template-columns:1fr; max-height:92vh; }
  .spec-lightbox-media{ min-height:200px; }
  .spec-lightbox-body{ padding:24px; }
}

.spec-table{ width:100%; border-collapse:collapse; }
.spec-table th, .spec-table td{ padding:14px 18px; text-align:left; font-size:.9rem; border-bottom:1px solid var(--line-soft); color:var(--ink-soft); }
.spec-table th{ font-family:var(--ff-display); font-weight:700; color:var(--navy-700); text-transform:uppercase; font-size:.7rem; letter-spacing:.1em; background:rgba(26,64,110,0.06); }
.spec-table tr:last-child td{ border-bottom:none; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{ padding:70px; text-align:center; position:relative; overflow:hidden; }
.cta-band::before{ content:''; position:absolute; inset:0; z-index:0; background:radial-gradient(62% 100% at 50% 0%, rgba(26,64,110,0.14), transparent 72%); }
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{ font-size:clamp(1.75rem,2.9vw,2.5rem); max-width:700px; margin:0 auto 14px; }
.cta-band p{ max-width:560px; margin:0 auto 30px; }
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-panel{ padding:40px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:620px){ .form-row{ grid-template-columns:1fr; } }
.field{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--ff-display); font-size:.8rem; font-weight:700; color:var(--navy-700); margin-bottom:8px; letter-spacing:.02em; }
.field .req{ color:var(--accent); }
.field input, .field select, .field textarea{
  width:100%; padding:13px 16px; border-radius:var(--radius-sm); border:1px solid var(--steel-200);
  background:rgba(255,255,255,0.7); font-family:inherit; font-size:.94rem; color:var(--ink);
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--navy-500); box-shadow:0 0 0 4px rgba(35,84,140,0.15); background:#fff;
}
.field textarea{ resize:vertical; min-height:120px; }
.field-check{ display:flex; align-items:flex-start; gap:10px; font-size:.82rem; color:var(--ink-faint); font-weight:400; letter-spacing:0; }
.field-check input{ width:auto; margin-top:3px; accent-color:var(--navy-600); }
.hp-field{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }
.form-status{ margin-top:14px; font-size:.87rem; padding:12px 16px; border-radius:var(--radius-sm); display:none; }
.form-status.ok{ display:block; background:rgba(26,64,110,0.10); color:var(--navy-700); }
.form-status.err{ display:block; background:rgba(176,42,42,0.09); color:#9c2b1f; }

.info-card{ padding:26px 28px; display:flex; gap:16px; align-items:flex-start; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
a.info-card:hover{ transform:translateY(-3px); box-shadow:0 26px 54px -24px rgba(11,29,54,0.4); }
.info-card .ic{ width:44px; height:44px; border-radius:13px; background:linear-gradient(140deg,var(--navy-600),var(--navy-800)); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
.info-card .ic svg{ width:20px; height:20px; }
.info-card b{ display:block; margin-bottom:4px; font-family:var(--ff-display); font-weight:700; color:var(--navy-800); }
.info-card p{ margin:0; font-size:.87rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background:linear-gradient(165deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color:rgba(255,255,255,0.74); padding:72px 0 26px; margin-top:40px; position:relative; overflow:hidden;
}
.site-footer::before{ content:''; position:absolute; inset:0; background:radial-gradient(50% 60% at 82% 0%, rgba(61,111,168,0.22), transparent 70%); pointer-events:none; }
.site-footer .container{ position:relative; z-index:1; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:46px; border-bottom:1px solid rgba(255,255,255,0.12); }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-h{
  color:#fff; font-size:.76rem; text-transform:uppercase; letter-spacing:.16em;
  font-family:var(--ff-display); font-weight:700; margin-bottom:18px;
}
.site-footer ul li{ margin-bottom:11px; }
.site-footer a{ color:rgba(255,255,255,0.7); font-size:.91rem; transition:color .25s; }
.site-footer a:hover{ color:#fff; }
.footer-brand p{ color:rgba(255,255,255,0.62); font-size:.89rem; max-width:320px; }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.10); display:flex; align-items:center; justify-content:center; transition:background .25s; }
.footer-social a:hover{ background:var(--navy-400); }
.footer-social svg{ width:16px; height:16px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; gap:16px; flex-wrap:wrap; font-size:.81rem; color:rgba(255,255,255,0.48); }
.footer-bottom .legal-links{ display:flex; gap:18px; }
.footer-bottom .legal-links a{ color:rgba(255,255,255,0.52); font-size:.81rem; }
.footer-contact-item{ display:flex; gap:10px; margin-bottom:14px; font-size:.88rem; color:rgba(255,255,255,0.7); }
.footer-contact-item svg{ width:17px; height:17px; flex:none; margin-top:3px; color:var(--steel-400); }

/* ==========================================================================
   WhatsApp float + cookie bar
   ========================================================================== */
.wa-float{ position:fixed; right:22px; bottom:22px; z-index:300; display:flex; align-items:center; gap:10px; }
.wa-btn{
  width:50px; height:50px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px -8px rgba(11,29,54,0.35);
  opacity:.82; transition:opacity .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wa-float:hover .wa-btn, .wa-btn:focus-visible{
  opacity:1; transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(29,168,81,0.5);
}
.wa-btn svg{ width:24px; height:24px; fill:#fff; }
.wa-tip{
  background:var(--navy-900); color:#fff; padding:8px 13px; border-radius:var(--radius-pill);
  font-family:var(--ff-display); font-size:.78rem; font-weight:600; white-space:nowrap;
  opacity:0; transform:translateX(8px); transition:opacity .3s, transform .3s; pointer-events:none;
}
.wa-float:hover .wa-tip{ opacity:1; transform:translateX(0); }

/* ==========================================================================
   Catalog download tab — a quiet edge tab (peeks as an icon, reveals its
   label on hover) rather than a second floating button competing with
   WhatsApp for the same corner.
   ========================================================================== */
.pdf-tab{
  position:fixed; right:0; top:60%; transform:translateY(-50%); z-index:250;
  display:flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,var(--navy-600),var(--navy-800)); color:#fff;
  padding:13px 14px 13px 12px; border-radius:14px 0 0 14px;
  box-shadow:-6px 10px 26px -12px rgba(11,29,54,0.45);
  text-decoration:none; overflow:hidden;
  transition:box-shadow .35s var(--ease), transform .35s var(--ease);
}
.pdf-tab svg{ width:19px; height:19px; flex:none; }
.pdf-tab span{
  font-family:var(--ff-display); font-weight:700; font-size:.8rem; white-space:nowrap;
  max-width:0; opacity:0; overflow:hidden; transition:max-width .35s var(--ease), opacity .25s var(--ease), margin .35s var(--ease);
}
.pdf-tab:hover, .pdf-tab:focus-visible{
  transform:translateY(-50%) translateX(-3px);
  box-shadow:-10px 16px 32px -12px rgba(11,29,54,0.55);
}
.pdf-tab:hover span, .pdf-tab:focus-visible span{ max-width:160px; opacity:1; margin-left:2px; }

@media (max-width:900px){
  .pdf-tab{ top:auto; bottom:112px; transform:none; }
  .pdf-tab:hover, .pdf-tab:focus-visible{ transform:translateX(-3px); }
  .pdf-tab span{ max-width:140px; opacity:1; margin-left:6px; }
}
@media (max-width:520px){
  .pdf-tab{ bottom:96px; padding:11px 12px; }
}

.cookie-bar{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:400; max-width:560px;
  padding:22px; display:flex; flex-direction:column; gap:14px;
  transform:translateY(150%); transition:transform .5s var(--ease);
}
.cookie-bar.show{ transform:translateY(0); }
.cookie-bar p{ font-size:.85rem; margin:0; }
.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ==========================================================================
   Reveal
   ========================================================================== */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in{ opacity:1; transform:translateY(0); }
[data-reveal-delay="1"]{ transition-delay:.1s; }
[data-reveal-delay="2"]{ transition-delay:.2s; }
[data-reveal-delay="3"]{ transition-delay:.3s; }
[data-reveal-delay="4"]{ transition-delay:.4s; }

.skip-link{ position:absolute; left:-9999px; top:auto; background:var(--navy-800); color:#fff; padding:12px 20px; z-index:1000; border-radius:8px; }
.skip-link:focus{ left:20px; top:20px; }

/* ==========================================================================
   Mobile refinements
   ========================================================================== */
@media (max-width:560px){
  .container{ padding:0 18px; }
  .site-header{ padding:12px 0; }
  .site-header .nav-inner{ padding:9px 13px; gap:10px; }
  .brand-logo{ width:46px; height:46px; }
  .brand{ gap:9px; }
  .brand-text b{ font-size:1.2rem; letter-spacing:.07em; }
  .brand-text span{ display:none; }
  .nav-cta{ gap:8px; }
  .nav-cta .btn-sm{ padding:9px 14px; font-size:.78rem; }

  .hero{ min-height:auto; padding-top:96px; padding-bottom:56px; }
  /* At this width the card spans nearly the full photo, so a bright fence
     line straight through small text is a legibility problem the desktop
     "peek-through" treatment can't afford here — go back to a strong frost. */
  .hero-card{
    padding:26px 20px 28px;
    background:rgba(255,255,255,0.78);
    backdrop-filter:blur(26px) saturate(180%); -webkit-backdrop-filter:blur(26px) saturate(180%);
  }
  h1.h-hero{ font-size:2rem; line-height:1.12; }
  .hero-badge{ font-size:.63rem; letter-spacing:.06em; margin-bottom:16px; }
  .hero .lead{ font-size:.95rem; }
  .hero-cta{ gap:10px; }
  .hero-cta .btn{ flex:1 1 100%; }
  .hero-stats{ gap:20px; margin-top:24px; }
  .hero-stats div b{ font-size:1.35rem; }
  .hero-stats div span{ font-size:.65rem; }
  .hero-dots{ bottom:12px; }

  h2.h-title{ font-size:1.6rem; }
  .lead{ font-size:1rem; }
  .cta-band{ padding:40px 24px; }
  .form-panel{ padding:26px 20px; }
  .spec-item{ padding:24px 18px; }
  .feature-card{ padding:24px 20px; }
  .info-card{ padding:22px 20px; }

  .cookie-bar{ left:14px; right:14px; bottom:14px; padding:18px; }
  .wa-float{ right:14px; bottom:14px; }
  .wa-btn{ width:46px; height:46px; }
  .wa-btn svg{ width:22px; height:22px; }
  .wa-tip{ display:none; }

  .media-stack .m2{ width:40%; right:-10px; bottom:-20px; }
  .badge-float{ padding:12px 16px; }
  .badge-float b{ font-size:1.25rem; }
}
@media (max-width:860px){ .cookie-bar{ margin-bottom:62px; } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .hero-slide{ transition:opacity .3s linear; }
}

/* ==========================================================================
   Digital brochure / catalog
   ========================================================================== */
.broch-hero{
  position:relative; overflow:hidden; padding:170px 0 90px; color:#fff;
  background:linear-gradient(150deg, var(--navy-700) 0%, var(--navy-900) 62%, #05101F 100%);
}
.broch-hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(48% 62% at 84% 6%, rgba(61,111,168,0.40), transparent 68%),
    radial-gradient(40% 50% at 6% 92%, rgba(35,84,140,0.34), transparent 70%);
}
/* faint picket motif across the cover */
.broch-hero::after{
  content:''; position:absolute; inset:0; opacity:.09;
  background-image:repeating-linear-gradient(90deg, #fff 0 3px, transparent 3px 26px);
  -webkit-mask-image:linear-gradient(180deg, transparent 6%, #000 42%, transparent 96%);
  mask-image:linear-gradient(180deg, transparent 6%, #000 42%, transparent 96%);
}
.broch-hero .container{ position:relative; z-index:2; }
.broch-hero h1{ color:#fff; font-size:clamp(2.4rem,5vw,4rem); letter-spacing:-0.03em; margin-bottom:18px; }
.broch-hero p{ color:rgba(255,255,255,0.76); max-width:600px; font-size:1.1rem; }
.broch-hero .eyebrow{ color:var(--steel-300); }
.broch-hero .eyebrow::before{ background:var(--steel-300); }
.broch-hero .breadcrumb{ color:rgba(255,255,255,0.55); }
.broch-hero .breadcrumb a:hover{ color:#fff; }
.broch-meta{ display:flex; gap:30px; flex-wrap:wrap; margin-top:34px; }
.broch-meta div b{ display:block; font-family:var(--ff-display); font-size:1.5rem; font-weight:800; color:#fff; }
.broch-meta div span{ font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--steel-400); font-weight:600; }

/* sticky in-page chapter nav */
.broch-nav{
  position:sticky; top:78px; z-index:120; margin:0 auto; padding:10px;
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
}
.broch-nav::-webkit-scrollbar{ display:none; }
.broch-nav a{
  flex:none; padding:9px 17px; border-radius:var(--radius-pill);
  font-family:var(--ff-display); font-size:.82rem; font-weight:600; color:var(--ink-soft);
  background:rgba(255,255,255,0.6); border:1px solid var(--glass-border); transition:all .25s; white-space:nowrap;
}
.broch-nav a:hover{ background:linear-gradient(135deg,var(--navy-600),var(--navy-800)); color:#fff; border-color:transparent; }

/* chapter heading band */
.chapter{ display:flex; align-items:baseline; gap:16px; margin-bottom:8px; }
.chapter-num{
  font-family:var(--ff-display); font-size:.78rem; font-weight:800; letter-spacing:.16em;
  color:var(--navy-400); padding:5px 11px; border:1px solid rgba(26,64,110,0.22); border-radius:var(--radius-pill);
}
.rule{ height:1px; background:linear-gradient(90deg, var(--steel-300), transparent); margin:20px 0 34px; }

/* configuration drawing grid */
.config-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
@media (max-width:1040px){ .config-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:680px){ .config-grid{ grid-template-columns:repeat(2,1fr); } }
.config-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1040px){ .config-grid.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .config-grid.cols-4{ grid-template-columns:repeat(2,1fr); } }

.config-card{
  background:#fff; border:1px solid var(--steel-200); border-radius:var(--radius-md); overflow:hidden;
  display:flex; flex-direction:column; margin:0;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.config-card:hover{ transform:translateY(-4px); border-color:var(--navy-400); box-shadow:0 20px 44px -20px rgba(11,29,54,0.38); }
.config-card .cfg-img{ flex:1; padding:16px 14px 10px; display:flex; align-items:center; justify-content:center; min-height:104px; }
.config-card .cfg-img img{ max-height:88px; width:auto; object-fit:contain; }
.config-card .cfg-label{
  margin-top:auto;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-900)); color:#fff;
  font-family:var(--ff-display); font-size:.68rem; font-weight:600; line-height:1.35;
  padding:9px 11px; text-align:center; min-height:46px; display:flex; align-items:center; justify-content:center;
}

/* spec cards inside the brochure */
.spec-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:30px; }
@media (max-width:900px){ .spec-cards{ grid-template-columns:1fr; } }
.spec-card{ padding:26px 24px; background:#fff; border:1px solid var(--steel-200); border-radius:var(--radius-md); }
.spec-card .sc-h{ font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; color:var(--navy-500); margin-bottom:14px; font-weight:700; }
.spec-card dl{ margin:0; }
.spec-card dt{ font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); font-weight:600; margin-top:12px; }
.spec-card dt:first-child{ margin-top:0; }
.spec-card dd{ margin:2px 0 0; font-size:.9rem; color:var(--ink); font-weight:500; }
.size-pills{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.size-pills span{
  font-family:var(--ff-display); font-size:.76rem; font-weight:700; color:var(--navy-700);
  background:rgba(26,64,110,0.09); padding:5px 12px; border-radius:var(--radius-pill);
}

/* fittings list */
.fit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .fit-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .fit-grid{ grid-template-columns:1fr; } }
.fit-card{ background:#fff; border:1px solid var(--steel-200); border-radius:var(--radius-md); overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.fit-card:hover{ transform:translateY(-4px); box-shadow:0 20px 44px -20px rgba(11,29,54,0.34); }
.fit-card .fc-img{ aspect-ratio:4/3; background:var(--steel-100); overflow:hidden; }
.fit-card .fc-img img{ width:100%; height:100%; object-fit:cover; }
.fit-card .fc-body{ padding:16px 18px 20px; }
.fit-card h3{ font-size:.98rem; margin-bottom:6px; }
.fit-card p{ font-size:.82rem; margin:0; }

/* coating layer diagram */
.layer-list{ counter-reset:layer; margin-top:22px; }
.layer-list li{
  display:flex; gap:16px; align-items:flex-start; padding:16px 18px; margin-bottom:10px;
  background:#fff; border:1px solid var(--steel-200); border-left:3px solid var(--navy-500); border-radius:var(--radius-sm);
}
.layer-list li b{ display:block; font-family:var(--ff-display); font-size:.94rem; color:var(--navy-800); }
.layer-list li span{ font-size:.85rem; color:var(--ink-soft); }
.layer-num{
  flex:none; width:30px; height:30px; border-radius:50%; background:linear-gradient(140deg,var(--navy-600),var(--navy-900));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-display); font-size:.8rem; font-weight:800;
}

@media (max-width:560px){
  .broch-hero{ padding:120px 0 60px; }
  .broch-nav{ top:70px; }
  .chapter{ flex-wrap:wrap; gap:10px; }
  .config-card .cfg-img img{ max-height:70px; }
}

.divider-dot{ width:5px; height:5px; border-radius:50%; background:var(--ink-faint); display:inline-block; }
.text-center{ text-align:center; margin-left:auto; margin-right:auto; }
.max-w-sub{ max-width:620px; margin-left:auto; margin-right:auto; }