/* ============================================================
   OBIFORM — proposta web
   Estil: modern-net, blanc, lleuger. Marca: blau→verd + molinet.
   ============================================================ */

/* ---- Fonts (carregades a l'HTML) ---- */
:root{
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Mulish', system-ui, sans-serif;

  /* Brand palette (default accent) */
  --blue:        #0E86C6;
  --blue-deep:   #0A6CA0;
  --cyan:        #19B2D8;
  --green:       #4DB24A;
  --green-deep:  #2F9A3D;
  --coral:       #E9543B;
  --gold:        #F2B01E;

  /* Accent driven tokens (overridable by tweaks) */
  --accent:      var(--blue);
  --accent-deep: var(--blue-deep);
  --accent-2:    var(--green);
  --grad-brand:  linear-gradient(95deg, var(--blue) 0%, var(--cyan) 48%, var(--green) 100%);

  /* Ink / neutrals */
  --ink:    #14222B;
  --ink-2:  #36474F;
  --muted:  #64767E;
  --line:   #E5ECF0;
  --line-2: #EFF4F7;
  --bg:     #FFFFFF;
  --bg-soft:#F4F8FB;
  --bg-tint:#EAF4F9;

  /* Shape */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 26px;
  --shadow-sm: 0 1px 2px rgba(20,40,55,.05), 0 2px 8px rgba(20,40,55,.04);
  --shadow:    0 4px 14px rgba(16,80,120,.08), 0 18px 40px rgba(16,80,120,.07);
  --shadow-lg: 0 10px 30px rgba(16,80,120,.12), 0 30px 70px rgba(16,80,120,.10);

  /* Layout */
  --maxw: 1240px;
  --gutter: clamp(18px, 4vw, 48px);
  --deco-opacity: .9;
}

[data-accent="ocean"]{ --accent:#0A6CA0; --accent-deep:#075a86; --accent-2:#19B2D8;
  --grad-brand:linear-gradient(95deg,#075a86,#0E86C6 55%,#19B2D8); }
[data-accent="forest"]{ --accent:#2F9A3D; --accent-deep:#23802F; --accent-2:#19B2D8;
  --grad-brand:linear-gradient(95deg,#0E86C6,#19B2D8 45%,#4DB24A); }

[data-font="jakarta"]{ --font-display:'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:'Plus Jakarta Sans', system-ui, sans-serif; }
[data-font="manrope"]{ --font-display:'Manrope', system-ui, sans-serif;
  --font-body:'Manrope', system-ui, sans-serif; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Foam-cell decoration behind everything */
body::before{
  content:"";
  position:fixed; inset:0;
  background:url('foam-texture.png');
  background-size:560px;
  opacity:var(--deco-opacity);
  z-index:-2;
  pointer-events:none;
}
body::after{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(60% 50% at 85% -5%, rgba(25,178,216,.10), transparent 60%),
    radial-gradient(55% 45% at -5% 8%, rgba(77,178,74,.08), transparent 60%);
  z-index:-2; pointer-events:none;
}
[data-deco="off"] body::before{ display:none; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); line-height:1.1;
  font-weight:700; letter-spacing:-.01em; margin:0; text-wrap:balance; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.eyebrow{
  font-family:var(--font-display); font-weight:600; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{ content:""; width:22px; height:2px; border-radius:2px; background:var(--grad-brand); }
.muted{ color:var(--muted); }
.center{ text-align:center; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display);
  font-weight:600; font-size:15px; padding:13px 22px; border-radius:999px;
  border:1px solid transparent; transition:.22s ease; white-space:nowrap; }
.btn svg{ width:17px; height:17px; }
.btn-primary{ background:var(--grad-brand); color:#fff; box-shadow:0 8px 20px rgba(14,134,198,.28); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(14,134,198,.34); }
.btn-ghost{ background:#fff; color:var(--ink); border-color:var(--line); box-shadow:var(--shadow-sm); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent-deep); transform:translateY(-2px); }
.btn-soft{ background:var(--bg-tint); color:var(--accent-deep); }
.btn-soft:hover{ background:#dceef6; }
.btn-lg{ padding:16px 28px; font-size:16px; }

/* =========================  HEADER  ========================= */
.site-header{ position:sticky; top:0; z-index:50; }
.topbar{
  background:var(--ink);
  color:#cfe0e8; font-size:13.5px;
}
.topbar .wrap{ display:flex; align-items:center; gap:22px; min-height:44px; flex-wrap:wrap; }
.topbar a{ display:inline-flex; align-items:center; gap:7px; color:#cfe0e8; transition:.18s; }
.topbar a:hover{ color:#fff; }
.topbar svg{ width:15px; height:15px; color:var(--cyan); }
.topbar .sep{ width:1px; height:16px; background:rgba(255,255,255,.16); }
.topbar .spacer{ flex:1; }
.topsearch{ display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:6px 12px; }
.topsearch input{ background:transparent; border:0; outline:none; color:#fff; font-size:13px;
  width:140px; font-family:var(--font-body); }
.topsearch input::placeholder{ color:#9fb6c1; }
.topsearch svg{ width:15px; height:15px; }
.lang{ display:flex; align-items:center; gap:2px; }
.lang button{ background:transparent; border:0; color:#8fa8b4; font-size:12.5px; font-weight:700;
  padding:4px 7px; border-radius:7px; letter-spacing:.04em; transition:.16s; }
.lang button[aria-pressed="true"]{ color:#fff; background:rgba(255,255,255,.14); }
.lang button:hover{ color:#fff; }

.site-header .topbar > .wrap, .site-header .mainbar > .wrap{ max-width:1440px; padding-inline:clamp(18px,3vw,34px); }
.mainbar{ background:rgba(255,255,255,.86); backdrop-filter:blur(12px) saturate(1.3);
  border-bottom:1px solid var(--line); }
.mainbar .wrap{ display:flex; align-items:center; gap:18px; min-height:78px; }
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand img{ height:42px; width:auto; }
.nav{ display:flex; align-items:stretch; gap:2px; margin-left:auto; }
.nav-item{ position:relative; display:flex; align-items:center; }
.nav-link{ display:inline-flex; align-items:center; gap:4px; padding:6px 8px; border-radius:9px;
  font-family:var(--font-display); font-weight:600; font-size:12.5px; color:var(--ink-2);
  transition:.16s; cursor:pointer; white-space:nowrap; }
.nav-link:hover, .nav-item.open .nav-link{ color:var(--accent-deep); background:var(--bg-soft); }
.nav-link .chev{ width:13px; height:13px; transition:.2s; opacity:.7; }
.nav-item.open .nav-link .chev{ transform:rotate(180deg); }
.nav-cta{ margin-left:8px; display:none; }
@media (min-width:1440px){ .nav-cta{ display:inline-flex; } }

/* Mega dropdown */
.mega{ position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(calc(-50% + var(--mega-shift,0px))) translateY(8px);
  min-width:320px; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:14px; opacity:0; visibility:hidden; transition:.2s ease; z-index:60; }
.mega:not(.one-col){ min-width:660px; }
.nav-item.open .mega{ opacity:1; visibility:visible; transform:translateX(calc(-50% + var(--mega-shift,0px))) translateY(0); }
.mega::before{ content:""; position:absolute; top:-6px; left:calc(50% - var(--mega-shift,0px)); transform:translateX(-50%) rotate(45deg);
  width:12px; height:12px; background:#fff; border-left:1px solid var(--line); border-top:1px solid var(--line); }
.mega-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; }
.mega.one-col{ min-width:340px; }
.mega.one-col .mega-grid{ grid-template-columns:1fr; }
.mega-link{ display:flex; gap:11px; align-items:flex-start; padding:11px 12px; border-radius:10px; transition:.15s; }
.mega-link:hover{ background:var(--bg-soft); }
.mega-ico{ flex-shrink:0; width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:var(--bg-tint); color:var(--accent-deep); }
.mega-ico svg{ width:18px; height:18px; }
.mega-link b{ font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink); display:block; }
.mega-link span{ font-size:12.5px; color:var(--muted); line-height:1.4; }
.mega-foot{ margin-top:8px; padding:12px; border-radius:12px; background:var(--bg-soft);
  display:flex; align-items:center; justify-content:space-between; gap:14px; }
.mega-foot p{ margin:0; font-size:13px; color:var(--ink-2); }
.mega-foot b{ font-family:var(--font-display); }

/* grouped mega (Materials i peces) */
.mega.grouped{ min-width:620px; }
.mega-cols{ display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; }
.mega-col{ display:flex; flex-direction:column; }
.mega-h{ display:flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); padding:8px 12px 8px; margin-bottom:2px; border-bottom:1px solid var(--line-2); transition:.15s; }
a.mega-h:hover{ color:var(--accent-deep); }
a.mega-h::after{ content:""; width:13px; height:13px; margin-left:auto; opacity:.55;
  background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.m-grouphead{ display:block; font-family:var(--font-display); font-weight:700; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:12px 12px 4px; }

/* Mobile nav toggle */
.burger{ display:none; margin-left:auto; background:#fff; border:1px solid var(--line);
  width:46px; height:46px; border-radius:12px; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); }
.burger svg{ width:22px; height:22px; color:var(--ink); }

/* =========================  BREADCRUMB  ========================= */
.crumbs{ border-bottom:1px solid var(--line-2); background:rgba(255,255,255,.5); }
.crumbs .wrap{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-block:13px; font-size:13.5px; }
.crumbs a{ color:var(--muted); transition:.15s; }
.crumbs a:hover{ color:var(--accent-deep); }
.crumbs .cur{ color:var(--ink); font-weight:600; }
.crumbs svg{ width:14px; height:14px; color:#b7c6cd; }

/* =========================  SECTIONS  ========================= */
main{ display:block; }
.section{ padding-block:clamp(56px, 8vw, 104px); position:relative; }
.section.soft{ background:linear-gradient(180deg, var(--bg-soft), #fff); }
.section-head{ max-width:680px; margin-bottom:42px; }
.section-head.center{ margin-inline:auto; }
.section-head h2{ font-size:clamp(28px, 3.4vw, 42px); margin-top:14px; }
.section-head p{ font-size:clamp(16px,1.5vw,18px); color:var(--muted); margin:14px 0 0; }

/* =========================  HERO  ========================= */
/* ---- Full-width video hero (home) ---- */
.hero-v{ position:relative; }
.hero-v-stage{ position:relative; width:100%; overflow:hidden; background:#0a2a3d; }
.hero-v-video, .hero-v-fallback, .hero-v-scrim{ position:absolute; inset:0; width:100%; height:100%; }
.hero-v-fallback{ display:flex; flex-direction:column; gap:18px; align-items:center; justify-content:center;
  background:url('home-poster.jpg') center/cover no-repeat; color:#dff1f8; z-index:1; }
.hero-v-fallback .play{ width:84px; height:84px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.13); border:1.5px solid rgba(255,255,255,.55); backdrop-filter:blur(4px);
  box-shadow:0 10px 40px rgba(0,0,0,.25); transition:.25s; }
.hero-v:hover .hero-v-fallback .play{ background:rgba(255,255,255,.22); transform:scale(1.05); }
.hero-v-fallback .play svg{ width:30px; height:30px; margin-left:5px; color:#fff; }
.hero-v-fallback .ph-label{ font-family:var(--font-display); font-weight:600; font-size:13.5px;
  letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.82); }
.hero-v-video{ object-fit:cover; z-index:2; opacity:0; transition:opacity .12s; }
.hero-v-video.ready{ opacity:1; }
.hero-v-scrim{ z-index:3; pointer-events:none; }
.hero-v-content h1{ font-size:clamp(36px,5.2vw,64px); line-height:1.04; }
.hero-v-content h1 .grad{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-v-content .lead{ font-size:clamp(17px,1.7vw,20px); color:var(--ink-2); margin:22px 0 30px; max-width:46em; }

/* MODE A · overlay (video background, text on top) — default */
[data-hero="overlay"] .hero-v{ min-height:clamp(540px,80vh,800px); display:flex; align-items:center; }
[data-hero="overlay"] .hero-v-stage{ position:absolute; inset:0; height:100%; }
[data-hero="overlay"] .hero-v-content{ position:relative; z-index:5; width:100%; padding-block:clamp(40px,6vw,72px); }
[data-hero="overlay"] .hero-v-content .lead{ max-width:38em; }
[data-hero="overlay"] .hero-v-scrim{
  background:linear-gradient(100deg, rgba(8,24,33,.86) 0%, rgba(8,24,33,.6) 40%, rgba(8,24,33,.12) 100%); }
[data-hero="overlay"] .hero-v-content h1{ color:#fff; }
[data-hero="overlay"] .hero-v-content h1 .grad{ background:linear-gradient(95deg,#5fd6ff,#86eb98);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
[data-hero="overlay"] .hero-v-content .eyebrow{ color:#7fdcff; }
[data-hero="overlay"] .hero-v-content .lead{ color:#d3e6ef; }
[data-hero="overlay"] .hero-v-content .hero-stats .st b{ color:#fff; }
[data-hero="overlay"] .hero-v-content .hero-stats .st b i{ background:linear-gradient(95deg,#5fd6ff,#86eb98);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
[data-hero="overlay"] .hero-v-content .hero-stats .st span{ color:#a9c6d3; }
[data-hero="overlay"] .hero-v .btn-ghost{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.5); color:#fff; }
[data-hero="overlay"] .hero-v .btn-ghost:hover{ background:rgba(255,255,255,.16); border-color:#fff; }
[data-hero="overlay"] .hero-v-fallback{ align-items:flex-end; justify-content:center;
  padding-right:clamp(36px,7vw,130px); padding-bottom:0; text-align:right; }

/* MODE B · below (video band on top, text below) */
[data-hero="below"] .hero-v-stage{ position:relative; height:clamp(300px,44vw,560px); }
[data-hero="below"] .hero-v-content{ padding-top:clamp(34px,5vw,58px); padding-bottom:4px; }
[data-hero="below"] .hero-v-scrim{ background:linear-gradient(0deg, rgba(8,24,33,.18), transparent 55%); }

@media (prefers-reduced-motion: reduce){ .hero-v-video{ display:none; } }

@media (max-width:720px){
  [data-hero="overlay"] .hero-v{ min-height:clamp(460px,86vh,640px); }
  [data-hero="overlay"] .hero-v-scrim{
    background:linear-gradient(160deg, rgba(8,24,33,.7) 0%, rgba(8,24,33,.8) 100%); }
  [data-hero="overlay"] .hero-v-fallback{ align-items:center; padding-right:0; text-align:center; opacity:.5; }
  [data-hero="below"] .hero-v-stage{ height:clamp(220px,52vw,320px); }
  .hero-v-fallback .play{ width:64px; height:64px; }
  .hero-v-fallback .play svg{ width:24px; height:24px; }
}

/* legacy hero (kept for safety) */
.hero{ position:relative; padding-top:clamp(48px,6vw,80px); padding-bottom:clamp(48px,6vw,86px); }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,64px); align-items:center; }
.hero h1{ font-size:clamp(36px, 5.2vw, 64px); line-height:1.04; }
.hero h1 .grad{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead{ font-size:clamp(17px,1.7vw,20px); color:var(--ink-2); margin:22px 0 30px; max-width:30em; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:30px; margin-top:38px; flex-wrap:wrap; }
.hero-stats .st b{ font-family:var(--font-display); font-size:30px; color:var(--ink); display:block; line-height:1; }
.hero-stats .st b i{ font-style:normal; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-stats .st span{ font-size:13px; color:var(--muted); }
.hero-media{ position:relative; }
.hero-media image-slot{ width:100%; height:clamp(340px,42vw,500px); display:block; box-shadow:var(--shadow-lg); }
.hero-badge{ position:absolute; background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding:14px 16px; display:flex; gap:11px; align-items:center; }
.hero-badge .ico{ width:38px; height:38px; border-radius:10px; background:var(--bg-tint); display:grid; place-items:center; color:var(--accent-deep); }
.hero-badge .ico svg{ width:20px; height:20px; }
.hero-badge b{ font-family:var(--font-display); font-size:14px; display:block; }
.hero-badge span{ font-size:12px; color:var(--muted); }
.hero-badge.b1{ bottom:24px; left:-22px; }
.hero-badge.b2{ top:24px; right:-18px; }

/* Trust strip */
.trust{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.6); }
.trust .wrap{ display:flex; align-items:center; gap:clamp(20px,4vw,52px); padding-block:22px; flex-wrap:wrap; justify-content:center; }
.trust .t{ display:flex; align-items:center; gap:11px; color:var(--ink-2); font-size:14.5px; font-weight:600; font-family:var(--font-display); }
.trust .t svg{ width:22px; height:22px; color:var(--accent); }

/* =========================  CARD GRID (families / category)  ========================= */
.grid{ display:grid; gap:clamp(18px,2.2vw,26px); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm); transition:.24s ease; display:flex; flex-direction:column; }
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:#d4e6ef; }
.material-card:hover{ background:#e8f5fb; border-color:#8fcfe8; }
.material-card:hover h3{ color:var(--accent-deep); }
.material-card .card-body{ align-items:center; padding:24px !important; }
.material-card h3{ text-align:center; margin:0; }
.material-card-polietilens .material-image{ clip-path:none; border-radius:10px; background:#fff; }
.material-card-polietilens .material-image-base{ clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); }
.material-card-polietilens .material-image-hover{ clip-path:none; border-radius:0; }
.material-card-polietilens:hover .material-image{ clip-path:none; }
.material-card-polietilens:hover .material-image-base{ opacity:0; }
.material-card-polietilens:hover .material-image-hover{ opacity:1; clip-path:none; }
.form-trap{ position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; }
.consent-check{ display:flex; gap:9px; align-items:flex-start; margin:4px 0 14px; color:var(--ink-2); font-size:13px; line-height:1.45; }
.consent-check input{ margin-top:3px; flex:0 0 auto; }
.form-status{ min-height:22px; margin:14px 0 0; font-size:17px; font-weight:700; line-height:1.4; }
.form-status.is-loading{ color:var(--ink-2); }
.form-status.is-success{ color:#147a4b; }
.form-status.is-error{ color:#b42318; }
.contact-form button:disabled{ opacity:.65; cursor:wait; }
.card:focus-visible{ outline:3px solid var(--accent); outline-offset:4px; }
.gamma-card{ display:flex; flex-direction:column; min-width:0; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); transition:.24s ease; }
.gamma-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:#8fcfe8; }
.gamma-card:focus-visible{ outline:3px solid var(--accent); outline-offset:4px; }
.gamma-card{ background:#fff; }
.gamma-card-media{ position:relative; aspect-ratio:1.2; display:grid; place-items:center; padding:clamp(18px,3vw,30px); overflow:hidden; background:#fff; }
.gamma-card-media > img{ width:82%; height:82%; object-fit:contain; display:block; }
.gamma-specs{ position:absolute; inset:12px; display:flex; flex-direction:column; justify-content:center; padding:20px; border-radius:14px; background:linear-gradient(145deg,rgba(15,55,70,.96),rgba(10,108,160,.95)); color:#fff; opacity:0; transform:translateY(10px); transition:opacity .22s ease,transform .22s ease; }
.gamma-card:hover .gamma-specs, .gamma-card:focus-visible .gamma-specs{ opacity:1; transform:translateY(0); }
.gamma-card.is-touch-open .gamma-specs{ opacity:1; transform:translateY(0); }
.gamma-spec-icon{ width:38px; height:38px; display:grid; place-items:center; margin-bottom:8px; border-radius:12px; background:rgba(255,255,255,.92); color:var(--accent-deep); }
.gamma-spec-icon svg{ width:21px; height:21px; }
.gamma-spec-label{ font-family:var(--font-display); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#aee8f5; }
.gamma-specs strong{ margin-top:6px; font-family:var(--font-display); font-size:18px; line-height:1.15; }
.gamma-specs ul{ display:grid; gap:5px; margin:12px 0 0; padding:0; list-style:none; }
.gamma-specs li{ position:relative; padding-left:15px; font-size:13px; line-height:1.35; color:rgba(255,255,255,.9); }
.gamma-specs li::before{ content:""; position:absolute; left:0; top:.52em; width:6px; height:6px; border-radius:50%; background:var(--cyan); }
.gamma-card-body{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px 20px; }
.gamma-card-body h3{ font-size:18px; }
.gamma-card-body span{ flex-shrink:0; color:var(--accent-deep); font-family:var(--font-display); font-size:12px; font-weight:700; }
.gamma-section{ padding-block:clamp(42px,6vw,72px); }
.gamma-page-title{ margin:0 0 clamp(26px,4vw,44px); text-align:center; font-size:clamp(30px,4vw,48px); }
.card-media{ position:relative; aspect-ratio:4/3; background:var(--bg-soft); overflow:hidden; }
.card-media image-slot{ width:100%; height:100%; display:block; }
.product-specs{ position:absolute; z-index:2; inset:12px; display:flex; flex-direction:column; justify-content:center; padding:18px; border-radius:12px; background:linear-gradient(145deg,rgba(20,34,43,.96),rgba(10,108,160,.94)); color:#fff; opacity:0; transform:translateY(8px); transition:opacity .22s ease,transform .22s ease; pointer-events:none; }
.product-specs-label{ font-family:var(--font-display); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#aee8f5; }
.product-specs strong{ margin-top:6px; font-family:var(--font-display); font-size:18px; line-height:1.15; }
.product-specs ul{ display:grid; gap:5px; margin:12px 0 0; padding:0; list-style:none; }
.product-specs li{ position:relative; padding-left:15px; font-size:12.5px; line-height:1.35; color:rgba(255,255,255,.88); }
.product-specs li::before{ content:""; position:absolute; left:0; top:.52em; width:6px; height:6px; border-radius:50%; background:var(--cyan); }
.card:hover .product-specs, .card:focus-visible .product-specs{ opacity:1; transform:translateY(0); }
.material-image{ width:clamp(96px,10vw,132px); aspect-ratio:1; margin:0 auto 18px; overflow:hidden; clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); background:var(--bg-soft); }
.material-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.material-image.has-hover{ position:relative; }
.material-image.has-hover .material-image-hover{ position:absolute; inset:0; opacity:0; transition:opacity .22s ease; }
.card:hover .material-image.has-hover .material-image-hover{ opacity:1; }
.card-tag{ position:absolute; top:12px; left:12px; z-index:3; background:rgba(255,255,255,.92);
  backdrop-filter:blur(4px); color:var(--accent-deep); font-family:var(--font-display); font-weight:700;
  font-size:11px; letter-spacing:.04em; text-transform:uppercase; padding:6px 11px; border-radius:999px; box-shadow:var(--shadow-sm); }
.card-body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.card-body h3{ font-size:19px; }
.card-body p{ font-size:14.5px; color:var(--muted); margin:9px 0 0; flex:1; }
.card-more{ margin-top:16px; display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display);
  font-weight:600; font-size:14px; color:var(--accent-deep); }
.card-more svg{ width:16px; height:16px; transition:.2s; }
.card:hover .card-more svg{ transform:translateX(4px); }
.search-result .eyebrow{ margin-bottom:14px; }
.search-result h2{ font-size:20px; }
.search-result .card-body{ min-width:0; }
.search-result p{ overflow-wrap:anywhere; }

/* Family card (home) — bigger with accent bar */
.fam{ position:relative; }
.fam .card-media{ aspect-ratio:16/11; }
.fam .bar{ height:5px; background:var(--grad-brand); }

/* =========================  CATEGORY HEADER  ========================= */
.cat-hero{ padding-block:clamp(36px,5vw,60px) clamp(28px,4vw,44px); }
.cat-hero h1{ font-size:clamp(32px,4.4vw,52px); }
.cat-hero p{ font-size:clamp(16px,1.6vw,19px); color:var(--ink-2); max-width:46em; margin:18px 0 0; }
.cat-meta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
.chip{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:8px 15px; font-size:13.5px; font-weight:600; color:var(--ink-2); box-shadow:var(--shadow-sm); }
.chip svg{ width:15px; height:15px; color:var(--accent); }

/* =========================  PRODUCT DETAIL  ========================= */
.pd-top{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px,4vw,56px); align-items:start; padding-block:clamp(30px,4vw,52px); }
.gallery{ position:sticky; top:140px; }
.gallery-main, .gallery > image-slot{ width:100%; height:clamp(320px,40vw,440px); display:block; border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.gallery-thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }
.gallery-thumbs image-slot{ width:100%; height:92px; }
.gallery image-slot[src]{ cursor:zoom-in; }
.gallery image-slot[src]:hover{ filter:brightness(.96); }
.pd-info .eyebrow{ margin-bottom:12px; }
.pd-info h1{ font-size:clamp(30px,3.8vw,46px); }
.pd-info .lead{ font-size:17.5px; color:var(--ink-2); margin:18px 0 24px; }
.pd-actions{ display:flex; gap:13px; flex-wrap:wrap; margin:26px 0; }
.feat-list{ list-style:none; padding:0; margin:24px 0 0; display:grid; gap:12px; }
.feat-list li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink-2); }
.feat-list .tick{ flex-shrink:0; width:24px; height:24px; border-radius:7px; background:var(--bg-tint);
  display:grid; place-items:center; color:var(--green-deep); margin-top:1px; }
.feat-list .tick svg{ width:14px; height:14px; }

/* schema-driven detail blocks */
.feat-grid{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 36px; }
.feat-grid li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--ink-2); }
.feat-grid .tick{ flex-shrink:0; width:24px; height:24px; border-radius:7px; background:var(--bg-tint);
  display:grid; place-items:center; color:var(--green-deep); margin-top:1px; }
.feat-grid .tick svg{ width:14px; height:14px; }

.tcards{ display:grid; gap:clamp(16px,2vw,22px); }
.tcards.c2{ grid-template-columns:repeat(2,1fr); }
.tcards.c3{ grid-template-columns:repeat(3,1fr); }
.tcard{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 22px; box-shadow:var(--shadow-sm); transition:.2s ease; }
.tcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:#d4e6ef; }
.tcard .tnum{ display:inline-grid; place-items:center; min-width:34px; height:30px; padding:0 8px; border-radius:8px;
  background:var(--bg-tint); color:var(--accent-deep); font-family:var(--font-display); font-weight:700; font-size:13px;
  letter-spacing:.04em; margin-bottom:13px; }
.tcard b{ font-family:var(--font-display); font-size:17px; display:block; margin-bottom:7px; color:var(--ink); }
.tcard p{ margin:0; font-size:14.5px; color:var(--muted); line-height:1.55; }
.pd-aside{ position:sticky; top:140px; }
[data-dir="b"] .tcard{ border-radius:8px; box-shadow:none; border:1.5px solid var(--line); }
[data-dir="b"] .tcard:hover{ border-color:var(--accent); box-shadow:var(--shadow); }

/* horizontal comparison bars (e.g. conductivitat tèrmica) */
.bars{ display:grid; gap:14px; max-width:780px; }
.bar-row{ display:grid; grid-template-columns:140px 1fr auto; gap:16px; align-items:center; }
.bar-row .bl{ font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--ink); }
.bar-track{ height:14px; border-radius:999px; background:var(--bg-soft); border:1px solid var(--line); overflow:hidden; }
.bar-fill{ display:block; height:100%; border-radius:999px; min-width:8px; background:linear-gradient(90deg,#cfe0ea,#b3cedd); }
.bar-row.best .bar-fill{ background:var(--grad-brand); }
.bar-val{ font-family:var(--font-display); font-size:13.5px; color:var(--muted); white-space:nowrap; }
.bar-row.best .bar-val{ color:var(--accent-deep); font-weight:700; }
@media (max-width:560px){ .bar-row{ grid-template-columns:96px 1fr; } .bar-val{ grid-column:2; justify-self:end; margin-top:-6px; } }

.prose{ max-width:760px; }
.prose h2{ font-size:clamp(24px,2.6vw,32px); margin:0 0 16px; }
.prose h3{ font-size:21px; margin:34px 0 12px; }
.prose p{ font-size:16.5px; color:var(--ink-2); margin:0 0 18px; }
.prose ul{ margin:0 0 18px; padding:0; list-style:none; display:grid; gap:11px; }
.prose ul li{ position:relative; padding-left:30px; color:var(--ink-2); font-size:16px; }
.prose ul li::before{ content:""; position:absolute; left:0; top:9px; width:16px; height:16px; border-radius:5px;
  background:var(--grad-brand); }
.prose ul li::after{ content:""; position:absolute; left:4.5px; top:13px; width:5px; height:8px;
  border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(40deg); }

/* sectors cards in detail */
.sector-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:8px; }
.sector{ display:flex; gap:14px; padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm); }
.sector .ico{ flex-shrink:0; width:44px; height:44px; border-radius:12px; background:var(--bg-tint); display:grid; place-items:center; color:var(--accent-deep); }
.sector .ico svg{ width:22px; height:22px; }
.sector b{ font-family:var(--font-display); font-size:16px; display:block; margin-bottom:4px; }
.sector p{ margin:0; font-size:14px; color:var(--muted); line-height:1.5; }

/* sticky aside quote box */
.aside-quote{ background:var(--ink); color:#dceaf1; border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow); }
.aside-quote h3{ color:#fff; font-size:22px; }
.aside-quote p{ font-size:14.5px; color:#a9c2cf; margin:10px 0 18px; }

/* =========================  CTA BAND  ========================= */
.cta-band{ position:relative; overflow:hidden; border-radius:var(--radius-lg); padding:clamp(36px,5vw,60px);
  background:linear-gradient(110deg, var(--blue-deep), var(--blue) 45%, var(--green) 120%); color:#fff;
  box-shadow:var(--shadow-lg); }
.cta-band::before{ content:""; position:absolute; inset:0; background:url('foam-texture.png'); background-size:420px;
  opacity:.5; mix-blend-mode:overlay; }
.cta-band .inner{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.cta-band h2{ color:#fff; font-size:clamp(26px,3vw,38px); max-width:16em; }
.cta-band p{ color:rgba(255,255,255,.85); margin:12px 0 0; max-width:40em; }
.cta-band .btn-primary{ background:#fff; color:var(--blue-deep); box-shadow:0 10px 26px rgba(0,0,0,.18); }
.cta-band .btn-primary:hover{ background:#f3fbff; }
.cta-band .btn-ghost{ background:transparent; border-color:rgba(255,255,255,.5); color:#fff; }
.cta-band .btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

/* sectors strip */
.logos{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.logo-pill{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:22px 12px;
  border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm); transition:.2s; }
.logo-pill:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.logo-pill .ico{ width:46px; height:46px; border-radius:13px; background:var(--bg-tint); display:grid; place-items:center; color:var(--accent-deep); }
.logo-pill .ico svg{ width:24px; height:24px; }
.logo-pill span{ font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--ink-2); }

/* =========================  CONTACT  ========================= */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,48px); align-items:start; }
.info-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); margin-bottom:16px; }
.info-row{ display:flex; gap:14px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--line-2); }
.info-row:last-child{ border-bottom:0; }
.info-row .ico{ flex-shrink:0; width:40px; height:40px; border-radius:11px; background:var(--bg-tint); display:grid; place-items:center; color:var(--accent-deep); }
.info-row .ico svg{ width:19px; height:19px; }
.info-row b{ font-family:var(--font-display); font-size:14px; display:block; }
.info-row span,.info-row a{ font-size:14.5px; color:var(--ink-2); }
.hours{ list-style:none; padding:0; margin:0; }
.hours li{ display:flex; justify-content:space-between; padding:7px 0; font-size:14px; border-bottom:1px solid var(--line-2); }
.hours li:last-child{ border-bottom:0; }
.hours li span{ color:var(--muted); }
.hours li.closed b{ color:var(--coral); }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:13px; font-weight:700; font-family:var(--font-display); margin-bottom:6px; color:var(--ink-2); }
.field input,.field textarea,.field select{ width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px;
  font-family:var(--font-body); font-size:15px; color:var(--ink); background:#fff; outline:none; transition:.16s; }
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(14,134,198,.12); }
.field textarea{ resize:vertical; min-height:120px; }
.map{ width:100%; height:300px; border-radius:var(--radius); border:1px solid var(--line); filter:saturate(.92); }

/* generic simple page */
.simple{ padding-block:clamp(34px,5vw,64px); }
.simple .lead{ font-size:clamp(17px,1.6vw,20px); color:var(--ink-2); max-width:44em; }
.prep{ display:inline-flex; align-items:center; gap:9px; background:var(--bg-tint); color:var(--accent-deep);
  font-family:var(--font-display); font-weight:600; font-size:13.5px; padding:8px 15px; border-radius:999px; margin-top:18px; }
.prep svg{ width:16px; height:16px; }

/* =========================  FOOTER  ========================= */
.footer{ background:var(--ink); color:#aebfc8; margin-top:clamp(56px,7vw,90px); position:relative; }
.footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad-brand); }
.footer .wrap{ padding-block:clamp(46px,6vw,72px) 0; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:36px; }
.footer img.logo{ height:38px; filter:brightness(0) invert(1); opacity:.95; margin-bottom:16px; }
.footer p{ font-size:14px; line-height:1.7; color:#9fb2bc; margin:0 0 18px; max-width:30ch; }
.footer .footer-title{ color:#fff; font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin:0 0 16px; font-family:var(--font-display); }
.footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.footer ul a{ color:#9fb2bc; font-size:14px; transition:.15s; }
.footer ul a:hover{ color:#fff; }
.footer .social{ display:flex; gap:10px; }
.footer .social a{ width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.07); display:grid; place-items:center; transition:.18s; }
.footer .social a:hover{ background:var(--accent); }
.footer .social svg{ width:19px; height:19px; color:#fff; }
.footer .contact-mini li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:#9fb2bc; }
.footer .contact-mini svg{ width:17px; height:17px; color:var(--cyan); flex-shrink:0; margin-top:2px; }
.footer-bot{ border-top:1px solid rgba(255,255,255,.1); margin-top:46px; padding-block:22px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13px; color:#7e96a2; }
.footer-bot a{ color:#7e96a2; }
.footer-bot a:hover{ color:#fff; }
.legal-links{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.legal-content{ max-width:850px; }
.legal-content h2{ margin-top:38px; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content a{ color:var(--accent-deep); text-decoration:underline; text-underline-offset:3px; }
.legal-content ul{ list-style:disc; padding-left:24px; display:block; }
.legal-content ul li{ padding-left:4px; margin-bottom:9px; }
.legal-content ul li::before,.legal-content ul li::after{ display:none; }
.legal-notice{ padding:20px 22px; border:1px solid rgba(14,134,198,.25); border-left:4px solid var(--accent); border-radius:var(--radius-sm); background:var(--bg-tint); color:var(--ink); }
.legal-notice p{ margin:8px 0 0; }
.legal-table-wrap{ width:100%; overflow-x:auto; margin:10px 0 24px; border:1px solid var(--line); border-radius:var(--radius-sm); }
.legal-table{ width:100%; min-width:680px; border-collapse:collapse; font-size:14px; line-height:1.5; }
.legal-table th,.legal-table td{ padding:13px 15px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.legal-table th{ color:var(--ink); background:var(--bg-tint); font-family:var(--font-display); font-size:13px; }
.legal-table td{ color:var(--ink-2); }
.legal-table tbody tr:last-child td{ border-bottom:0; }
.legal-content code{ padding:2px 5px; border-radius:5px; background:var(--bg-tint); font-size:.9em; }
.map-consent{ min-height:300px; margin-top:18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-tint); display:grid; place-content:center; justify-items:center; gap:14px; padding:28px; text-align:center; color:var(--ink-2); }
.map-consent p{ margin:0; }
.cookie-layer{ position:fixed; inset:0; z-index:500; display:flex; align-items:flex-end; justify-content:flex-end; padding:22px; pointer-events:none; }
.cookie-layer[hidden]{ display:none; }
.cookie-banner{ position:relative; width:min(520px,100%); padding:17px 15px 12px; border:1px solid #e5e5e5; border-radius:0; background:#fff; box-shadow:0 14px 45px rgba(5,25,38,.22); color:#252525; pointer-events:auto; }
.cookie-close{ position:absolute; top:8px; right:14px; border:0; padding:0; background:none; color:#242424; font:700 32px/1 Arial,sans-serif; cursor:pointer; }
.cookie-main{ display:block; }
.cookie-main h2{ margin:0 42px 23px; text-align:center; font-family:var(--font-body); font-size:16px; font-weight:600; }
.cookie-main p{ margin:0; color:#4b4b4b; font-size:12px; line-height:1.48; }
.cookie-preferences{ margin-top:20px; border-block:1px solid var(--line); }
.cookie-preferences[hidden]{ display:none; }
.cookie-preferences label{ display:flex; justify-content:space-between; gap:20px; align-items:center; padding:14px 2px; }
.cookie-preferences label+label{ border-top:1px solid var(--line); }
.cookie-preferences span{ display:grid; gap:3px; }
.cookie-preferences small{ color:var(--ink-2); }
.cookie-preferences input{ width:22px; height:22px; accent-color:var(--accent); }
.cookie-actions{ display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:10px; margin-top:24px; }
.cookie-actions .btn{ width:100%; min-height:45px; justify-content:center; padding:9px 10px; border-radius:6px; font-size:14px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap; }
.cookie-actions .btn-primary{ border-color:var(--accent); background:var(--accent); }
.cookie-actions .btn-primary:hover{ border-color:var(--accent-deep); background:var(--accent-deep); }
.cookie-actions [data-cookie-save]{ grid-column:1/-1; }
.cookie-actions .cookie-reject,.cookie-actions .cookie-custom{ color:var(--accent-deep); border-color:var(--accent); background:#fff; }
.cookie-actions .cookie-reject:hover,.cookie-actions .cookie-custom:hover{ color:#fff; border-color:var(--accent-deep); background:var(--accent-deep); }
.cookie-legal{ display:flex; justify-content:center; flex-wrap:wrap; gap:11px; margin-top:17px; }
.cookie-legal a{ color:var(--accent-deep); font-size:11px; text-decoration:underline; text-underline-offset:2px; }
.cookie-actions [hidden]{ display:none; }
.cookie-tab{ position:fixed; right:22px; bottom:0; z-index:499; width:42px; height:27px; border:0; border-radius:6px 6px 0 0; background:var(--accent); color:#fff; box-shadow:0 -3px 12px rgba(5,25,38,.18); cursor:pointer; transition:height .18s,background .18s; }
.cookie-tab[hidden]{ display:none; }
.cookie-tab:hover,.cookie-tab:focus-visible{ height:33px; background:var(--accent-deep); }
.cookie-tab span{ display:block; font:700 20px/18px Arial,sans-serif; transform:translateY(2px); }
@media (max-width:720px){
  .legal-page{ padding-top:40px; }
  .legal-content h2{ margin-top:30px; font-size:24px; }
  .legal-content p,.legal-content li{ font-size:16px; }
  .cookie-layer{ padding:10px; justify-content:center; }
  .cookie-banner{ padding:20px 16px; max-height:calc(100vh - 20px); overflow:auto; border-radius:16px; }
  .cookie-main h2{ margin-bottom:18px; font-size:16px; }
  .cookie-actions{ display:grid; grid-template-columns:1fr; }
  .cookie-actions .btn{ width:100%; justify-content:center; }
  .cookie-tab{ right:12px; }
}

/* =========================  DIRECTION B overrides  ========================= */
[data-dir="b"]{ --radius:8px; --radius-sm:6px; --radius-lg:14px; }
[data-dir="b"] .hero{ background:var(--ink); color:#dfeaf0; border-radius:0; overflow:hidden; position:relative; }
[data-dir="b"] .hero::after{ content:""; position:absolute; inset:0; background:url('foam-texture.png');
  background-size:480px; opacity:.4; mix-blend-mode:screen; pointer-events:none; }
[data-dir="b"] .hero h1{ color:#fff; }
[data-dir="b"] .hero h1 .grad{ background:linear-gradient(95deg,#3fd0ff,#7be886); -webkit-background-clip:text; background-clip:text; color:transparent; }
[data-dir="b"] .hero p.lead{ color:#b9cdd7; }
[data-dir="b"] .hero-stats .st b{ color:#fff; }
[data-dir="b"] .hero-stats .st span{ color:#92aab6; }
[data-dir="b"] .hero .btn-ghost{ background:transparent; border-color:rgba(255,255,255,.4); color:#fff; }
[data-dir="b"] .hero .btn-ghost:hover{ background:rgba(255,255,255,.1); }
[data-dir="b"] .hero-badge{ background:rgba(255,255,255,.95); }
[data-dir="b"] .mainbar{ border-bottom:2px solid var(--ink); }
[data-dir="b"] .nav-link{ border-radius:0; }
[data-dir="b"] .card{ border-radius:8px; box-shadow:none; border:1.5px solid var(--line); }
[data-dir="b"] .card:hover{ border-color:var(--accent); box-shadow:var(--shadow); transform:translateY(-4px); }
[data-dir="b"] .btn{ border-radius:8px; }
[data-dir="b"] .eyebrow::before{ width:30px; }
[data-dir="b"] .fam .bar{ display:none; }
[data-dir="b"] .card-media{ border-bottom:1.5px solid var(--line); }

/* =========================  RESPONSIVE  ========================= */
@media (max-width:1080px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .logos{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid > *, .pd-top > *, .contact-grid > *{ min-width:0; }
  .about-grid{ grid-template-columns:minmax(0,1fr) !important; }
  .about-grid > *, .about-grid .prose{ width:100%; min-width:0; max-width:100%; }
  .about-grid .hero-media{ order:initial !important; }
  .about-chips{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .sector-grid{ grid-template-columns:minmax(0,1fr) !important; }
  .sector > div:last-child{ min-width:0; }
  .sector b, .sector p{ overflow-wrap:anywhere; }
}
@media (max-width:1239px){
  .nav, .nav-cta{ display:none !important; }
  .burger{ display:flex; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-media{ order:-1; }
  .hero-badge{ display:none; }
  .pd-top{ grid-template-columns:1fr; }
  .gallery{ position:static; }
  .pd-aside{ position:static; }
  .pd-intro{ grid-template-columns:1fr !important; }
  .tcards.c3{ grid-template-columns:repeat(2,1fr); }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:30px; }
}
@media (max-width:720px){
  .grid-3, .grid-2{ grid-template-columns:1fr 1fr; }
  .grid[style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
  .sector-grid{ grid-template-columns:minmax(0,1fr) !important; }
  .feat-grid{ grid-template-columns:1fr; }
  .tcards.c2, .tcards.c3{ grid-template-columns:1fr; }
  .topbar .hide-sm{ display:none; }
  .topsearch{ display:none; }
  .cta-band .inner{ flex-direction:column; align-items:flex-start; }
  .grid > *, .pd-top > *, .contact-grid > *{ min-width:0; }
  .field input, .field textarea, .field select{ font-size:16px; }
}
@media (max-width:520px){
  .grid-3, .grid-2, .grid-4{ grid-template-columns:1fr; }
  .logos{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr; }
  .hero-stats{ gap:22px; }
  .btn{ max-width:100%; white-space:normal; text-align:center; justify-content:center; }
  .pd-actions .btn, .hero-cta .btn{ width:100%; }
  .gallery > image-slot{ height:clamp(260px,88vw,340px); }
  .gallery-thumbs{ gap:8px; }
  .gallery-thumbs image-slot{ height:72px; }
  .section{ padding-block:48px; }
  .info-card{ padding:20px 16px; }
  .about-page .wrap{ padding-inline:20px; }
  .about-chips{ grid-template-columns:minmax(0,1fr) !important; }
  .about-chips .chip{ width:100%; min-width:0; white-space:normal; }
  .about-grid image-slot{ height:clamp(250px,90vw,340px) !important; }
}

/* mobile menu drawer */
.drawer{ position:fixed; inset:0; z-index:90; visibility:hidden; }
.drawer.open{ visibility:visible; }
.drawer-bg{ position:absolute; inset:0; background:rgba(8,20,28,.45); opacity:0; transition:.25s; }
.drawer.open .drawer-bg{ opacity:1; }
.drawer-panel{ position:absolute; top:0; right:0; bottom:0; width:min(380px,86vw); background:#fff;
  transform:translateX(100%); transition:.28s ease; overflow-y:auto; box-shadow:var(--shadow-lg); padding:18px; }
.drawer.open .drawer-panel{ transform:translateX(0); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.drawer-head img{ height:34px; }
.drawer-close{ width:42px; height:42px; border-radius:11px; border:1px solid var(--line); background:#fff; display:grid; place-items:center; }
.drawer-close svg{ width:20px; height:20px; }
.drawer .drawer-search{ display:flex; width:100%; margin:8px 0 12px; padding:9px 13px; background:var(--bg-soft); border-color:var(--line); }
.drawer .drawer-search svg{ width:18px; height:18px; color:var(--accent-deep); flex-shrink:0; }
.drawer .drawer-search input{ width:100%; min-width:0; color:var(--ink); font-size:16px; }
.drawer .drawer-search input::placeholder{ color:var(--muted); }
.m-group{ border-bottom:1px solid var(--line-2); }
.m-top{ display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:0;
  padding:15px 6px; font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--ink); text-align:left; }
.m-top svg{ width:18px; height:18px; transition:.2s; color:var(--muted); }
.m-group.open .m-top svg{ transform:rotate(180deg); }
.m-group.has-current > .m-top{ color:var(--accent-deep); }
.m-sub{ display:none; padding:0 6px 12px; }
.m-group.open .m-sub{ display:grid; gap:2px; }
.m-sub a{ padding:10px 12px; border-radius:9px; font-size:14.5px; color:var(--ink-2); }
.m-sub .m-all{ font-weight:700; }
.m-sub a[aria-current="page"], .m-top[aria-current="page"]{
  background:var(--bg-tint); color:var(--accent-deep); font-weight:700;
  box-shadow:inset 3px 0 0 var(--accent);
}
.m-sub a:hover{ background:var(--bg-soft); color:var(--accent-deep); }
.drawer .btn{ width:100%; justify-content:center; margin-top:16px; }

/* tweaks panel mount */
#tweaks-root{ position:fixed; z-index:120; }

/* ---- Branded image-slot placeholders ---- */
image-slot{ background:var(--bg-soft); }
image-slot::part(frame){
  background:
    url('foam-texture.png') center/300px,
    radial-gradient(120% 120% at 28% 18%, #eef8fc 0%, #e0f0f8 55%, #d6e9f3 100%);
  color:var(--accent-deep);
}
image-slot::part(empty){ color:var(--accent-deep); font-weight:600; }

/* Product image lightbox */
.lightbox{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,52px); background:rgba(5,15,22,.92); opacity:0; visibility:hidden;
  transition:opacity .2s ease, visibility .2s ease; }
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox figure{ margin:0; max-width:min(1180px,88vw); max-height:92vh; display:flex; flex-direction:column; align-items:center; gap:12px; }
.lightbox-image{ display:block; max-width:100%; max-height:82vh; width:auto; height:auto; object-fit:contain; border-radius:12px; box-shadow:0 20px 70px rgba(0,0,0,.45); }
.lightbox-count{ color:#a9c2cf; font-size:14px; }
.lightbox-close, .lightbox-nav{ position:absolute; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.1);
  color:#fff; display:grid; place-items:center; border-radius:50%; backdrop-filter:blur(8px); }
.lightbox-close{ top:18px; right:18px; width:46px; height:46px; }
.lightbox-close svg{ width:22px; height:22px; }
.lightbox-nav{ top:50%; width:52px; height:52px; transform:translateY(-50%); font-size:38px; line-height:1; }
.lightbox-prev{ left:18px; }
.lightbox-next{ right:18px; }
.lightbox-close:hover, .lightbox-nav:hover{ background:rgba(255,255,255,.22); }
@media (max-width:720px){
  .lightbox{ padding:70px 14px 24px; }
  .lightbox figure{ max-width:100%; }
  .lightbox-image{ max-height:72vh; }
  .lightbox-nav{ top:auto; bottom:18px; transform:none; width:46px; height:46px; }
  .lightbox-prev{ left:calc(50% - 58px); }
  .lightbox-next{ right:calc(50% - 58px); }
  .lightbox-count{ padding-bottom:54px; }
}