*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 32px}
@media(max-width:600px){.wrap{padding:0 20px}}
.serif{font-family:var(--serif)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.dim{color:var(--dim)}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--nav-bg,rgba(10,13,19,.72));backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:76px;max-width:100%;margin:0;padding:0 40px 0 28px}
.nav-logo{height:34px;opacity:.98;transition:opacity .2s;display:block}
.nav-logo:hover{opacity:.75}
.nav-links{display:flex;align-items:center;gap:38px}
.nav-links a{font-size:14px;font-weight:500;color:var(--dim);transition:color .2s;letter-spacing:.01em}
.nav-links a:hover{color:var(--text)}
.nav-cta{padding:11px 22px;background:var(--accent);color:var(--ink-on-accent)!important;border-radius:100px;font-weight:700!important;font-size:13.5px;letter-spacing:.01em;transition:transform .2s,box-shadow .2s;box-shadow:0 0 0 rgba(var(--accent-rgb),0)}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px -6px var(--glow)}
/* Catalan, Spanish and French labels are longer than the English ones. Without
   this the pill button wrapped to two lines and pushed the bar out of shape. */
.nav-links a{white-space:nowrap}
.nav-cta{flex:none}
@media(min-width:901px) and (max-width:1240px){
  .nav-links{gap:26px}
  .lang{margin-left:12px;padding-left:12px}
  .lang a,.lang span{padding:5px 6px}
  .nav-cta{padding:10px 16px;font-size:12.5px}
}
@media(max-width:900px){.nav-in{padding:0 20px 0 18px;height:64px}
  .nav-links a{white-space:normal}}

/* HERO */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding-top:76px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:62% 60%}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,11,17,.94) 0%,rgba(8,11,17,.80) 30%,rgba(8,11,17,.40) 56%,rgba(8,11,17,.12) 100%),linear-gradient(0deg,rgba(8,11,17,.55) 0%,transparent 38%)}
.hero-in{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:0 32px;width:100%}
.hero-eyebrow{display:inline-flex;align-items:center;gap:12px;margin-bottom:26px}
.hero-eyebrow::before{content:"";width:38px;height:1px;background:var(--accent)}
.hero-brand{font-family:var(--serif);font-size:clamp(20px,2.3vw,30px);color:var(--accent-br);display:block;margin-bottom:4px;letter-spacing:-.01em}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(33px,4.4vw,60px);line-height:1.05;letter-spacing:-.015em;margin-bottom:22px;max-width:16ch}
.hero h1 em{font-style:italic;color:var(--accent-br)}
.hero-sub{font-size:clamp(15px,1.3vw,18px);line-height:1.62;color:#cdd6e1;max-width:50ch;margin-bottom:34px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:64px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:16px 30px;border-radius:100px;font-size:15px;font-weight:700;letter-spacing:.01em;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}
.btn-pri{background:var(--accent);color:var(--ink-on-accent);box-shadow:0 10px 30px -8px var(--glow)}
.btn-pri:hover{transform:translateY(-2px);box-shadow:0 16px 40px -8px var(--glow)}
.btn-sec{background:rgba(var(--tint-rgb),.06);color:var(--text);border:1px solid var(--line2);backdrop-filter:blur(4px)}
.btn-sec:hover{transform:translateY(-2px);background:rgba(var(--tint-rgb),.1)}
.hero-stats{display:flex;gap:48px;flex-wrap:wrap}
.hero-stat .n{font-family:var(--serif);font-size:clamp(28px,3.2vw,42px);line-height:1;color:var(--accent-br);letter-spacing:-.01em}
.hero-stat .n em{font-style:normal;color:var(--accent-br)}
.hero-stat .l{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:8px}
.scroll-cue{position:absolute;bottom:30px;left:50%;z-index:3;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);display:flex;flex-direction:column;align-items:center;gap:9px;transition:opacity .35s ease;will-change:opacity;transform:translateX(-50%)}
.scroll-cue .chev{width:24px;height:24px;color:var(--accent-br);animation:chev 1.9s ease-in-out infinite;filter:drop-shadow(0 0 9px var(--glow))}
@keyframes chev{0%{transform:translateY(-5px);opacity:.3}50%{transform:translateY(5px);opacity:1}100%{transform:translateY(-5px);opacity:.3}}
@media(max-width:900px){.hero-bg img{object-position:center center}.hero-bg::after{background:linear-gradient(180deg,rgba(8,11,17,.80) 0%,rgba(8,11,17,.60) 44%,rgba(8,11,17,.26) 72%,rgba(8,11,17,.48) 100%)}.hero-stats{gap:28px}.scroll-cue{display:none}}

/* SECTION SHELL */
section{position:relative}
.sec{padding:130px 0}
.sec-head{max-width:760px;margin-bottom:64px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head .eyebrow{display:block;margin-bottom:18px}
.sec-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.4vw,58px);line-height:1.04;letter-spacing:-.015em}
.sec-head h2 em{font-style:italic;color:var(--accent-br)}
.sec-head p{margin-top:20px;font-size:17px;color:var(--dim);line-height:1.6}
@media(max-width:700px){.sec{padding:84px 0}.sec-head{margin-bottom:44px}}

/* TRUST STRIP */
.trust{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:54px 0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.trust-item{position:relative;overflow:hidden;padding:30px 26px;background:linear-gradient(168deg,var(--card-a) 0%,var(--card-b) 100%);border:1px solid var(--line2);border-radius:16px;display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 44px -26px rgba(var(--shadow-rgb),.95);transition:transform .3s,border-color .3s,box-shadow .3s}
.trust-item::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),transparent 80%)}
.trust-item:hover{transform:translateY(-6px);border-color:rgba(var(--accent-rgb),.55);box-shadow:0 28px 54px -24px rgba(var(--shadow-rgb),.95),0 0 44px -18px var(--glow)}
.ic-tile{width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.05));border:1px solid rgba(var(--accent-rgb),.38);box-shadow:inset 0 1px 0 rgba(var(--tint-rgb),.08);flex-shrink:0}
.ic-tile svg{width:25px;height:25px;color:var(--accent-br);stroke-width:1.7}
.trust-item h3{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.trust-item p{font-size:13.5px;color:var(--dim);line-height:1.55}
@media(max-width:900px){.trust-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.trust-grid{grid-template-columns:1fr}}

/* PRODUCTS */
.prod-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.pcard{background:linear-gradient(165deg,var(--surface),var(--bg2));border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .35s cubic-bezier(.2,.7,.3,1),border-color .35s,box-shadow .35s;display:flex;flex-direction:column;text-align:left;width:100%}
.pcard:hover{transform:translateY(-8px);border-color:rgba(var(--accent-rgb),.5);box-shadow:0 24px 50px -18px rgba(var(--shadow-rgb),.7),0 0 40px -16px var(--glow)}
.pcard-img{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:26px;background:radial-gradient(circle at 50% 42%,rgba(var(--accent-rgb),.12),transparent 62%)}
.pcard-img img{max-height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 14px 24px rgba(var(--shadow-rgb),.5));transition:transform .35s}
.pcard:hover .pcard-img img{transform:scale(1.06)}
.pcard-size{position:absolute;top:14px;right:14px;font-family:var(--serif);font-size:16px;color:var(--accent-br);background:var(--pill-bg,rgba(8,11,17,.6));border:1px solid var(--line);border-radius:100px;padding:4px 12px}
.pcard-body{padding:20px 20px 22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px;flex:1}
.pcard-name{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text)}
.pcard-app{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--accent-br);margin-bottom:14px}
.pcard-meta{display:flex;justify-content:space-between;align-items:flex-end;margin-top:auto}
.pcard-from .pl{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.pcard-from .pv{font-family:var(--serif);font-size:21px;color:var(--price-text,var(--text))}
.pcard-dots{display:flex;gap:5px}
.dot{width:11px;height:11px;border-radius:50%;border:1px solid rgba(var(--tint-rgb),.2)}
.dot.warm{background:linear-gradient(135deg,#ffe0a8,#ffb86b)}.dot.cool{background:linear-gradient(135deg,#eaf6ff,#a9d4ec)}.dot.natural{background:linear-gradient(135deg,#fffaef,#f3e6c4)}.dot.rgbw{background:conic-gradient(from 0deg,#ff4d6d,#ffb86b,#52daf2,#7d5cff,#ff4d6d)}
.prod-foot{margin-top:30px;text-align:center;font-size:14px;color:var(--dim)}
.prod-foot a{color:var(--accent-br);font-weight:600}
@media(max-width:1050px){.prod-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.prod-grid{grid-template-columns:1fr 1fr;gap:12px}}
@media(max-width:420px){.prod-grid{grid-template-columns:1fr}}

/* MODAL */
.ov{position:fixed;inset:0;z-index:200;background:rgba(4,7,12,.8);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .3s}
.ov.on{opacity:1;pointer-events:auto}
.modal{background:var(--surface);border:1px solid var(--line2);border-radius:20px;width:100%;max-width:1080px;max-height:92vh;overflow:hidden;transform:scale(.96) translateY(8px);transition:transform .3s;display:flex;flex-direction:column}
.ov.on .modal{transform:none}
.modal-grid{display:grid;grid-template-columns:1.05fr 1fr;overflow-y:auto}
.modal-img{background:radial-gradient(circle at 50% 45%,rgba(var(--accent-rgb),.16),transparent 60%),var(--bg2);display:flex;align-items:center;justify-content:center;padding:54px;min-height:460px}
.modal-img img{max-width:100%;max-height:380px;object-fit:contain;filter:drop-shadow(0 24px 40px rgba(var(--shadow-rgb),.6));transition:opacity .2s}
.modal-img img.fading{opacity:0}
.modal-info{padding:42px 40px;overflow-y:auto}
.modal-eye{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.modal-title{font-family:var(--serif);font-weight:400;font-size:42px;line-height:1;margin-bottom:6px}
.modal-sz{font-family:var(--serif);font-style:italic;color:var(--dim);font-size:18px;margin-bottom:26px}
.mlabel{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin:22px 0 12px;padding-top:18px;border-top:1px solid var(--line)}
.opts{display:flex;flex-direction:column;gap:7px}
.opt{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;background:var(--bg2);border:1px solid var(--line);border-radius:11px;cursor:pointer;transition:border-color .2s,background .2s;text-align:left;width:100%}
.opt:hover{border-color:var(--line2)}
.opt.sel{border-color:var(--accent);background:rgba(var(--accent-rgb),.1)}
.opt-l{display:flex;align-items:center;gap:11px}
.opt-name{font-size:13.5px;font-weight:600}
.opt-name .s{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--dim);font-size:12.5px;margin-left:5px}
.opt-price{font-family:var(--serif);font-size:17px;color:var(--accent-br)}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.spec{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.spec .sl{font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.spec .sv{font-size:14px;font-weight:700}
.spec .sv em{font-style:normal;color:var(--accent-br);font-family:var(--serif);font-size:11px;margin-left:5px}
.mfeat{list-style:none;margin:22px 0 26px}
.mfeat li{display:flex;gap:10px;padding:5px 0;font-size:13.5px;color:#c8d0db}
.mfeat li::before{content:"";flex-shrink:0;margin-top:8px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.modal-cta{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:15px;background:var(--accent);color:var(--ink-on-accent);border-radius:100px;font-weight:700;font-size:14.5px;transition:transform .2s,box-shadow .2s}
.modal-cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px var(--glow)}
.modal-sub{text-align:center;font-size:12.5px;color:var(--dim);margin-top:11px}
.modal-sub a{color:var(--accent-br);font-weight:600}
.mclose{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;background:rgba(8,11,17,.6);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;z-index:3;transition:background .2s}
.mclose:hover{background:var(--accent);color:var(--ink-on-accent)}
@media(max-width:860px){.modal-grid{grid-template-columns:1fr}.modal-img{min-height:300px;padding:36px}.modal-info{padding:30px 24px}}

/* WHY — merged cards */
.why{background:var(--bg2);border-top:1px solid var(--line)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.wcard{background:linear-gradient(168deg,var(--card2-a) 0%,var(--card2-b) 100%);border:1px solid var(--line2);border-radius:16px;padding:28px;transition:transform .3s,border-color .3s,box-shadow .3s;box-shadow:0 16px 38px -28px rgba(var(--shadow-rgb),.9)}
.wcard:hover{transform:translateY(-6px);border-color:rgba(var(--accent-rgb),.5);box-shadow:0 26px 50px -24px rgba(var(--shadow-rgb),.95),0 0 40px -20px var(--glow)}
.wcard .ic-tile{margin-bottom:16px}
.wcard h3{font-size:16.5px;font-weight:700;letter-spacing:-.01em;margin-bottom:10px;line-height:1.3}
.wcard p{font-size:14px;color:var(--wcard-text,var(--dim));line-height:1.62}
@media(max-width:950px){.why-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.why-grid{grid-template-columns:1fr}}

/* FINISHES (rings + plates) */
.fin-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fcard{background:linear-gradient(168deg,var(--card2-a),var(--card2-b));border:1px solid var(--line2);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;text-align:left;width:100%;cursor:pointer;transition:transform .3s,border-color .3s,box-shadow .3s;box-shadow:0 16px 40px -28px rgba(var(--shadow-rgb),.9)}
.fcard:hover{transform:translateY(-6px);border-color:rgba(var(--accent-rgb),.5);box-shadow:0 26px 52px -24px rgba(var(--shadow-rgb),.95),0 0 44px -20px var(--glow)}
.fcard-img{aspect-ratio:1.7;background:radial-gradient(circle at 50% 45%,rgba(var(--accent-rgb),.12),transparent 60%),var(--bg2);display:flex;align-items:center;justify-content:center;padding:30px}
.fcard-img img{max-height:210px;object-fit:contain;filter:drop-shadow(0 16px 28px rgba(var(--shadow-rgb),.55));transition:transform .3s}
.fcard:hover .fcard-img img{transform:scale(1.05)}
.fcard-more{font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--accent-br);display:inline-flex;gap:6px;align-items:center}
.fin-opts{display:flex;gap:8px;margin:4px 0 2px}
.fin-opt{flex:1;padding:12px 10px;border:1px solid var(--line2);border-radius:11px;background:var(--bg2);cursor:pointer;text-align:center;transition:border-color .2s,background .2s}
.fin-opt.sel{border-color:var(--accent);background:rgba(var(--accent-rgb),.1)}
.fin-opt .ol{font-size:13px;font-weight:700}
.fin-opt .os{font-size:11px;color:var(--dim);font-family:var(--serif);font-style:italic;margin-top:2px}
.fcard-b{padding:28px 30px}
.fcard-b .eyebrow{font-size:10px;display:block;margin-bottom:10px}
.fcard-b h3{font-family:var(--serif);font-size:30px;font-weight:400;margin-bottom:12px}
.fcard-b p{font-size:14px;color:#bcc6d4;line-height:1.62;margin-bottom:18px}
.fcard-px{display:flex;gap:26px;padding-top:16px;border-top:1px solid var(--line)}
.fcard-px .pl{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.fcard-px .pv{font-family:var(--serif);font-size:22px;color:var(--accent-br)}
@media(max-width:800px){.fin-cards{grid-template-columns:1fr}}

/* 180 VIEWER */
.viewer{background:var(--bg2);border-top:1px solid var(--line)}
.viewer-stage{max-width:680px;margin:0 auto;background:radial-gradient(circle at 50% 45%,rgba(var(--accent-rgb),.14),transparent 62%),var(--surface);border:1px solid var(--line);border-radius:20px;padding:50px;text-align:center;position:relative;overflow:hidden}
.viewer-stage img{max-width:340px;margin:0 auto;cursor:ew-resize;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 24px 44px rgba(var(--shadow-rgb),.6));transition:transform .1s}
.viewer-track{margin:30px auto 0;max-width:300px}
.viewer-range{width:100%;-webkit-appearance:none;appearance:none;height:3px;border-radius:3px;background:var(--line2);outline:none}
.viewer-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 14px var(--glow)}
.viewer-range::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;background:var(--accent);cursor:pointer}
.viewer-hint{margin-top:16px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.viewer-badge{position:absolute;top:18px;left:18px;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);border:1px solid var(--line2);border-radius:100px;padding:5px 12px}

/* DOCS */
.docs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.doc{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;transition:transform .25s,border-color .25s}
.doc:hover{transform:translateY(-4px);border-color:rgba(var(--accent-rgb),.45)}
.doc .ic{width:26px;height:26px;color:var(--accent);flex-shrink:0;margin-top:2px}
.doc h4{font-size:14.5px;font-weight:700;margin-bottom:4px}
.doc p{font-size:12px;color:var(--dim);line-height:1.5}
.doc .dl{font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--accent-br);margin-top:10px;display:inline-flex;gap:5px;align-items:center}
@media(max-width:850px){.docs-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.docs-grid{grid-template-columns:1fr}}

/* PROOF */
.proof{background:var(--bg2);border-top:1px solid var(--line);text-align:center}
.proof-q{font-family:var(--serif);font-style:italic;font-size:clamp(22px,3vw,36px);line-height:1.35;max-width:900px;margin:0 auto 30px}
.proof-q em{color:var(--accent-br)}
.proof-by{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.proof-by strong{color:var(--text)}
.proof-stats{display:flex;justify-content:center;gap:70px;margin-top:54px;padding-top:46px;border-top:1px solid var(--line);flex-wrap:wrap}
.proof-stats .n{font-family:var(--serif);font-size:clamp(38px,5vw,58px);color:var(--accent-br);line-height:1}
.proof-stats .l{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:8px}

/* WARRANTY */
.warr-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}
.warr-shield{justify-self:center;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle at 50% 40%,rgba(var(--accent-rgb),.18),transparent 60%),var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative}
.warr-shield::before{content:"";position:absolute;inset:26px;border:1px solid var(--line);border-radius:50%}
.warr-shield .num{font-family:var(--serif);font-size:120px;line-height:.8;color:var(--accent-br)}
.warr-shield .yr{font-family:var(--serif);font-size:20px;letter-spacing:.04em;color:var(--text)}
.warr-info h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4vw,48px);line-height:1.05;margin-bottom:18px}
.warr-info h2 em{font-style:italic;color:var(--accent-br)}
.warr-info p.lead{font-size:17px;color:var(--dim);line-height:1.6;margin-bottom:26px}
.warr-pts{list-style:none}
.warr-pts li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--warr-text,#c8d0db)}
.warr-pts li:last-child{border:none}
.warr-pts li::before{content:"";flex-shrink:0;margin-top:8px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.warr-pts strong{color:var(--text)}
@media(max-width:820px){.warr-grid{grid-template-columns:1fr;gap:44px}.warr-shield{width:220px;height:220px}.warr-shield .num{font-size:92px}}

/* CONTACT */
.contact{background:var(--bg2);border-top:1px solid var(--line)}
.cform-wrap{max-width:720px;margin:0 auto}
.cform{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:42px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.frow.one{grid-template-columns:1fr}
.fg{display:flex;flex-direction:column}
.fg label{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.fg label .r{color:var(--accent)}
.fg input,.fg select,.fg textarea{font-family:var(--sans);font-size:15px;padding:13px 14px;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;color:var(--text);transition:border-color .2s}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--accent)}
.fg textarea{resize:vertical;min-height:96px}
.fg select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233d9bf0'><path d='M7 10l5 5 5-5z'/></svg>");background-repeat:no-repeat;background-position:right 12px center;background-size:20px;padding-right:38px}
.fsubmit{width:100%;padding:16px;background:var(--accent);color:var(--ink-on-accent);border-radius:100px;font-weight:700;font-size:15px;margin-top:8px;transition:transform .2s,box-shadow .2s}
.fsubmit:hover{transform:translateY(-2px);box-shadow:0 14px 34px -8px var(--glow)}
.ffoot{text-align:center;font-size:12.5px;color:var(--dim);margin-top:16px}
.ffoot a{color:var(--accent-br);font-weight:600}
.fsuccess{display:none;text-align:center;padding:30px;background:var(--surface);border:1px solid var(--accent);border-radius:20px}
.fsuccess.on{display:block}
.fsuccess h3{font-family:var(--serif);font-size:28px;color:var(--accent-br);margin-bottom:8px}
@media(max-width:600px){.frow{grid-template-columns:1fr;gap:14px}.cform{padding:26px 20px}}

/* FOOTER */
.foot{border-top:1px solid var(--line);padding:64px 0 34px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;margin-bottom:48px}
.foot-logo{height:30px;opacity:.92;margin-bottom:18px}
.foot-tag{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--dim);max-width:280px;line-height:1.4}
.foot-col h5{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:16px}
.foot-col ul{list-style:none}.foot-col li{margin-bottom:10px}
.foot-col a{font-size:13.5px;color:var(--dim);transition:color .2s}.foot-col a:hover{color:var(--accent-br)}
.foot-col p{font-size:13.5px;color:var(--dim);line-height:1.7}
.foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-top:24px;border-top:1px solid var(--line);font-size:11.5px;color:var(--faint)}
.foot-bot em{font-family:var(--serif);font-style:italic;color:var(--dim);font-size:13px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:500px){.foot-grid{grid-template-columns:1fr}}

/* reveal */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s,transform .7s}
.rv.in{opacity:1;transform:none}
body.lock{overflow:hidden}

/* ============================================================
   ADDITIONS — nav states, services, maintenance plans,
   language switcher, mobile nav. Brand-neutral (uses vars).
   ============================================================ */

.nav.scrolled{box-shadow:0 8px 30px -12px var(--nav-shadow,rgba(var(--shadow-rgb),.6))}

.pcard-from .pv.pv-sm{font-size:15px;letter-spacing:.01em}

/* ---- language switcher ---- */
.lang{display:flex;align-items:center;gap:2px;margin-left:18px;padding-left:18px;border-left:1px solid var(--line)}
.lang a,.lang span{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:6px;color:var(--faint);transition:color .18s,background .18s}
.lang a:hover{color:var(--text);background:var(--surface)}
.lang .active{color:var(--accent);background:var(--surface);cursor:default}
.lang a.soon{opacity:.42;cursor:default}
.lang a.soon:hover{color:var(--faint);background:none}

/* ---- mobile nav ---- */
.nav-toggle{display:none;width:40px;height:40px;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--line)}
.nav-toggle svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
@media(max-width:960px){
  .nav-toggle{display:flex}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:8px 20px 18px;display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 4px;border-bottom:1px solid var(--line)}
  .nav-links a:last-child{border-bottom:none}
  .nav-cta{margin-top:12px;text-align:center}
  .lang{margin:14px 0 0;padding:14px 0 0;border-left:none;border-top:1px solid var(--line);justify-content:flex-start}
}

/* ---- services ---- */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:52px}
@media(max-width:820px){.svc-grid{grid-template-columns:1fr}}
.svc-group{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:32px 28px 30px;
  transition:border-color .25s,transform .25s,box-shadow .25s}
.svc-group:hover{border-color:var(--line2);transform:translateY(-3px);box-shadow:0 18px 40px -24px var(--nav-shadow,rgba(var(--shadow-rgb),.45))}
.svc-group h3{font-family:var(--serif);font-size:23px;font-weight:600;margin:18px 0 8px;letter-spacing:-.01em}
.svc-lede{color:var(--dim);font-size:14.5px;line-height:1.62;margin-bottom:20px}
.svc-list{list-style:none;display:flex;flex-direction:column;gap:1px}
.svc-list li{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;padding:9px 0;border-top:1px solid var(--line);font-size:14.5px}
.svc-name{font-weight:500}
.svc-tag{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 7px;border-radius:5px;background:var(--accent-soft,rgba(var(--accent-rgb),.13));color:var(--accent-deep)}

/* ---- maintenance plans ---- */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:24px;margin-top:52px;align-items:start}
.plan{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:34px 28px 30px;display:flex;flex-direction:column;height:100%}
.plan.featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 22px 50px -28px var(--glow)}
.plan-flag{position:absolute;top:-12px;left:28px;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 11px;border-radius:20px;background:var(--accent);color:var(--ink-on-accent)}
.plan-name{font-family:var(--serif);font-size:25px;font-weight:600;letter-spacing:-.01em}
.plan-for{color:var(--dim);font-size:14px;line-height:1.6;margin:8px 0 22px}
.plan-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px;flex:1}
.plan-list li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.55}
.plan-list li::before{content:'';position:absolute;left:0;top:6px;width:15px;height:9px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.plan-cta{width:100%;text-align:center;justify-content:center}

/* ---- scope-honesty note ---- */
.scope-note{margin-top:36px;padding:22px 26px;border:1px dashed var(--line2);border-radius:14px;
  background:var(--surface);color:var(--dim);font-size:14.5px;line-height:1.65}
.scope-note strong{color:var(--text);font-weight:600}

/* ---- text wordmark (used until a logo file is supplied) ---- */
.wordmark{display:inline-flex;align-items:baseline;gap:9px;font-family:var(--sans);
  font-weight:700;font-size:21px;letter-spacing:.14em;color:var(--text);white-space:nowrap}
.wordmark-ad{font-family:var(--serif);font-weight:400;font-style:italic;font-size:14px;
  letter-spacing:.02em;color:var(--accent)}
.foot-logo.wordmark{margin-bottom:14px;font-size:19px}

/* ---- phone layout fixes ---- */
@media(max-width:900px){
  .hero{min-height:auto;padding-top:104px;padding-bottom:64px}
  .hero-stats{gap:26px 32px}
  .hero-stat{min-width:38%}
  .hero-ctas{gap:12px;margin-bottom:44px}
  .hero-ctas .btn{width:100%;justify-content:center}
  .scroll-cue{display:none}
}
@media(max-width:600px){
  .hero h1{max-width:100%}
  .svc-group,.plan{padding:26px 22px 24px}
  .sec{padding-left:0;padding-right:0}
}
@media(max-width:900px){
  .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}
  .hero-stat{min-width:0}
  .hero-stat .l{font-size:9.5px;letter-spacing:.12em}
}

/* ---- brand lockup: logo file + region label ---- */
.brand-lockup{display:inline-flex;align-items:center;gap:12px}
.brand-lockup .nav-logo{height:26px;width:auto}
.brand-region{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--accent);
  padding-left:12px;border-left:1px solid var(--line2);line-height:1}
.foot-lockup{margin-bottom:16px}
/* the standalone .foot-logo rule carries a bottom margin; inside the lockup that
   pushes the wordmark up off the flag's centre line, so clear it here */
.foot-lockup .foot-logo{height:24px;width:auto;margin-bottom:0;display:block}
.foot-lockup .brand-region{font-size:13px}
@media(max-width:600px){
  .brand-lockup .nav-logo{height:21px}
  .brand-region{font-size:12px;padding-left:9px;gap:9px}
}

/* ============================================================
   MULTI-PAGE COMPONENTS
   Used by brands with more than one page. Brand-neutral.
   ============================================================ */

/* current page in the nav */
.nav-links a.here{color:var(--text);position:relative}
.nav-links a.here::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  border-radius:2px;background:var(--accent)}
@media(max-width:960px){.nav-links a.here::after{display:none}}

/* interior page hero — compact, photo-backed */
.page-hero{position:relative;padding:150px 0 76px;overflow:hidden;isolation:isolate}
.page-hero.short{padding:150px 0 60px}
.page-hero-bg{position:absolute;inset:0;z-index:-1}
.page-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.page-hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(8,11,17,.93) 0%,rgba(8,11,17,.82) 42%,rgba(8,11,17,.52) 100%)}
.page-hero-in{position:relative}
.page-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.8vw,50px);
  line-height:1.08;letter-spacing:-.015em;margin:14px 0 18px;max-width:20ch}
.page-hero h1 em{font-style:italic}
.page-hero p{font-size:clamp(15px,1.25vw,17.5px);line-height:1.62;max-width:60ch}
.sec-tight{padding-top:64px}

/* three-across linked pillars */
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.pillar-grid.three-up{margin-top:0}
.pillar{display:block;text-align:left;background:var(--card2-a);border:1px solid var(--line);
  border-radius:16px;padding:32px 28px;transition:transform .28s,border-color .28s,box-shadow .28s}
.pillar:not(.static):hover{transform:translateY(-6px);border-color:rgba(var(--accent-rgb),.5);
  box-shadow:0 26px 50px -26px rgba(var(--shadow-rgb),.45)}
.pillar h3{font-family:var(--serif);font-size:23px;font-weight:600;margin:18px 0 10px;letter-spacing:-.01em}
.pillar p{font-size:14.5px;line-height:1.64;color:var(--dim)}
.pillar-more{display:inline-block;margin-top:18px;font-size:13px;font-weight:700;color:var(--accent);letter-spacing:.01em}
@media(max-width:900px){.pillar-grid{grid-template-columns:1fr}}

/* image category cards */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.cat{background:var(--card2-a);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.cat-img{aspect-ratio:1.5;overflow:hidden}
.cat-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cat:hover .cat-img img{transform:scale(1.05)}
.cat-b{padding:24px 24px 26px}
.cat-b h3{font-family:var(--serif);font-size:21px;font-weight:600;margin-bottom:7px}
.cat-b p{font-size:14px;color:var(--dim);line-height:1.6}
@media(max-width:860px){.cat-grid{grid-template-columns:1fr}}

/* accessories */
.acc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px}
.acc{display:flex;flex-direction:column;background:var(--card2-a);border:1px solid var(--line);
  border-radius:14px;padding:26px 24px;transition:transform .25s,border-color .25s}
.acc:hover{transform:translateY(-4px);border-color:rgba(var(--accent-rgb),.5)}
.acc h3{font-size:16px;font-weight:700;margin-bottom:9px}
.acc p{font-size:13.5px;color:var(--dim);line-height:1.6;flex:1}
.acc-more{margin-top:18px;font-size:12.5px;font-weight:700;color:var(--accent)}
@media(max-width:1000px){.acc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.acc-grid{grid-template-columns:1fr}}

/* projects */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.proj{background:var(--card2-a);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column}
.proj-img{aspect-ratio:1.45;overflow:hidden;background:var(--surface2)}
.proj-img img{width:100%;height:100%;object-fit:cover}
.proj-img.ph{display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,var(--surface2),var(--surface2) 12px,transparent 12px,transparent 24px)}
.proj-img.ph span{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);background:var(--card2-a);padding:8px 14px;border-radius:100px;border:1px solid var(--line)}
.proj-b{padding:24px 24px 26px}
.proj-where{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.proj-b h3{font-family:var(--serif);font-size:20px;font-weight:600;margin:9px 0 8px;line-height:1.25}
.proj-b p{font-size:14px;color:var(--dim);line-height:1.6}
@media(max-width:980px){.proj-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.proj-grid{grid-template-columns:1fr}}

/* numbered steps */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px;counter-reset:s}
.steps li{background:var(--card2-a);border:1px solid var(--line);border-radius:16px;padding:30px 26px}
.step-n{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  background:var(--accent);color:var(--ink-on-accent);font-family:var(--serif);font-size:19px;margin-bottom:16px}
.steps h3{font-size:17px;font-weight:700;margin-bottom:9px}
.steps p{font-size:14px;color:var(--dim);line-height:1.62}
@media(max-width:860px){.steps{grid-template-columns:1fr}}

/* closing CTA band */
.cta-band{background:var(--accent-deep);color:#fff;padding:64px 0}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:44px;flex-wrap:wrap}
.cta-band h2{font-family:var(--serif);font-weight:400;font-size:clamp(25px,2.7vw,36px);
  letter-spacing:-.015em;margin-bottom:10px}
.cta-band p{font-size:15px;line-height:1.62;color:rgba(255,255,255,.82);max-width:56ch}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}
.cta-band .btn-pri{background:#fff;color:var(--accent-deep);box-shadow:none}
.cta-band .btn-sec{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.34)}
.cta-band .btn-sec:hover{background:rgba(255,255,255,.2)}

/* contact page */
.contact-split{display:grid;grid-template-columns:1.55fr 1fr;gap:28px;align-items:start}
.contact-split .cform-wrap{margin:0;max-width:none}
.contact-aside{display:flex;flex-direction:column;gap:16px}
.cbox{background:var(--card2-a);border:1px solid var(--line);border-radius:16px;padding:26px 24px}
.cbox.soft{background:none;border-style:dashed}
.cbox h3{font-size:15px;font-weight:700;margin-bottom:13px}
.cbox p{font-size:14px;line-height:1.62}
.cline{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 0;border-top:1px solid var(--line)}
.cline:hover .cl-v{color:var(--accent)}
.cl-l{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.cl-v{font-size:15px;font-weight:600;transition:color .18s}
@media(max-width:940px){.contact-split{grid-template-columns:1fr}}
.scope-note.draft{border-color:#c8842f;background:rgba(200,132,47,.08);color:var(--text)}
.scope-note.draft code{font-family:ui-monospace,Menlo,monospace;font-size:13px;
  background:rgba(var(--shadow-rgb),.07);padding:2px 6px;border-radius:4px}

/* ============================================================
   REFERENCE-STYLE LAYOUT
   Flat, image-led sections. Used by HARMONIK Andorra.
   ============================================================ */

/* ---- placeholder image block ---- */
.ph-img{position:relative;display:flex;align-items:center;justify-content:center;
  background:var(--surface2);border:1px solid var(--line);overflow:hidden}
.ph-img::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 14px,rgba(var(--shadow-rgb),.035) 14px,rgba(var(--shadow-rgb),.035) 28px)}
.ph-img span{position:relative;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);text-align:center;padding:0 18px;line-height:1.5}

/* ---- hero: flat colour panel, ready for a video ---- */
.vhero{position:relative;overflow:hidden;background:var(--accent-deep);color:#fff;
  padding:190px 0 120px;isolation:isolate}
.vhero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(1100px 520px at 78% 22%,rgba(255,255,255,.14),transparent 70%),
             linear-gradient(160deg,var(--accent-deep) 0%,#06323a 100%)}
.vhero video,.vhero .vhero-media{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2}
.vhero-in{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.vhero .eyebrow{color:rgba(255,255,255,.72);display:block;margin-bottom:20px}
.vhero h1{font-weight:600;font-size:clamp(34px,4.6vw,60px);line-height:1.1;
  letter-spacing:-.02em;max-width:17ch;margin-bottom:22px}
.vhero p{font-size:clamp(16px,1.35vw,19px);line-height:1.62;color:rgba(255,255,255,.84);
  max-width:56ch;margin-bottom:38px;font-weight:300}
.vhero-ctas{display:flex;gap:13px;flex-wrap:wrap}
.vhero .btn-pri{background:#fff;color:var(--accent-deep);box-shadow:none}
.vhero .btn-sec{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.vhero .btn-sec:hover{background:rgba(255,255,255,.14)}
.vslot{position:absolute;right:26px;bottom:22px;z-index:2;font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.42);
  border:1px dashed rgba(255,255,255,.3);padding:7px 13px;border-radius:100px}
@media(max-width:900px){.vhero{padding:130px 0 78px}.vslot{display:none}}

/* ---- three highlights under the hero ---- */
.hl-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2)}
.hl{padding:44px 38px;border-right:1px solid var(--line)}
.hl:last-child{border-right:none}
.hl-n{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.hl h3{font-size:19px;font-weight:600;letter-spacing:-.01em;margin:12px 0 10px}
.hl p{font-size:14.5px;line-height:1.65;color:var(--dim);font-weight:300}
@media(max-width:900px){.hl-row{grid-template-columns:1fr}
  .hl{border-right:none;border-bottom:1px solid var(--line);padding:34px 24px}
  .hl:last-child{border-bottom:none}}

/* ---- centred statement band ---- */
.statement{padding:96px 0;text-align:center;background:var(--bg)}
.statement p{max-width:26ch;margin:0 auto;font-size:clamp(24px,3vw,38px);font-weight:300;
  line-height:1.28;letter-spacing:-.02em;color:var(--text)}
.statement em{font-style:normal;color:var(--accent);font-weight:500}

/* ---- section heading, reference style ---- */
.rhead{max-width:62ch;margin-bottom:48px}
.rhead.center{margin-left:auto;margin-right:auto;text-align:center}
.rhead .eyebrow{display:block;margin-bottom:14px}
.rhead h2{font-size:clamp(27px,3.2vw,42px);font-weight:600;line-height:1.16;letter-spacing:-.022em;margin-bottom:16px}
.rhead p{font-size:16px;line-height:1.7;color:var(--dim);font-weight:300}

/* ---- CATEGORY BLOCKS — image, title, small description ---- */
.cat2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 28px}
.cat2-grid.four{grid-template-columns:repeat(4,1fr);gap:30px 24px}
.cat2{display:block;color:inherit}
.cat2 .cat2-media,.cat2 .ph-img{aspect-ratio:1.35;border-radius:3px;margin-bottom:20px;overflow:hidden}
.cat2 img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
a.cat2:hover img{transform:scale(1.045)}
.cat2 h3{font-size:19px;font-weight:600;letter-spacing:-.012em;margin-bottom:9px}
.cat2 p{font-size:14.5px;line-height:1.68;color:var(--dim);font-weight:300}
a.cat2:hover h3{color:var(--accent)}
@media(max-width:1000px){.cat2-grid,.cat2-grid.four{grid-template-columns:1fr 1fr;gap:30px 22px}}
@media(max-width:620px){.cat2-grid,.cat2-grid.four{grid-template-columns:1fr}}

/* ---- 4-step pipeline ---- */
.pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:8px;
  border-top:1px solid var(--line)}
.pipe li{list-style:none;padding:34px 30px 34px 0;border-right:1px solid var(--line);position:relative}
.pipe li:last-child{border-right:none;padding-right:0}
.pipe li:not(:first-child){padding-left:30px}
.pipe-n{display:block;font-size:13px;font-weight:600;color:var(--accent);
  letter-spacing:.06em;margin-bottom:14px}
.pipe h3{font-size:17px;font-weight:600;letter-spacing:-.01em;margin-bottom:9px}
.pipe p{font-size:14px;line-height:1.65;color:var(--dim);font-weight:300}
@media(max-width:900px){.pipe{grid-template-columns:1fr}
  .pipe li{border-right:none;border-bottom:1px solid var(--line);padding:26px 0}
  .pipe li:not(:first-child){padding-left:0}
  .pipe li:last-child{border-bottom:none}}

/* ---- split showcase: media one side, copy the other ---- */
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.showcase.flip .sc-media{order:2}
.showcase .ph-img,.showcase .sc-media{aspect-ratio:1.15;border-radius:3px;overflow:hidden}
.showcase .sc-media img{width:100%;height:100%;object-fit:cover}
.sc-body h2{font-size:clamp(26px,3vw,38px);font-weight:600;line-height:1.18;letter-spacing:-.022em;margin:14px 0 18px}
.sc-body p{font-size:15.5px;line-height:1.72;color:var(--dim);font-weight:300;margin-bottom:16px}
.sc-list{list-style:none;margin:22px 0 30px}
.sc-list li{position:relative;padding:11px 0 11px 28px;font-size:14.5px;line-height:1.6;
  border-top:1px solid var(--line)}
.sc-list li::before{content:"";position:absolute;left:0;top:18px;width:13px;height:8px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
@media(max-width:900px){.showcase{grid-template-columns:1fr;gap:34px}.showcase.flip .sc-media{order:0}}

/* ---- flat section spacing for this style ---- */
.rsec{padding:96px 0}
.rsec.tint{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rsec.pad-sm{padding:72px 0}
@media(max-width:900px){.rsec{padding:64px 0}}
.vhero.short{padding:150px 0 82px}
@media(max-width:900px){.vhero.short{padding:120px 0 58px}}
.vhero.short h1{font-size:clamp(29px,3.7vw,46px)}
.cat2.no-media{border-top:2px solid var(--accent);padding-top:22px}
.cat2.no-media h3{margin-bottom:9px}

/* ---- pipeline rendered over a supplied graphic ---- */
.pipe-graphic{position:relative;max-width:1080px;margin:14px auto 0}
.pipe-graphic>img{width:100%;display:block}
.pipe-labels{position:relative;height:150px;margin-top:6px}
/* each label is centred on its icon, so the outer two hang past the graphic.
   narrowing them below 1240px keeps that overhang inside the page gutter. */
.pipe-label{position:absolute;top:0;width:200px;transform:translateX(-50%);text-align:center}
@media(max-width:1240px){
  .pipe-label{width:168px}
  /* pulling the graphic in also pulls the icons in, so the labels stay centred
     on them while gaining room at both ends */
  .pipe-graphic{width:calc(100% - 90px)}
}
.pipe-label h3{font-size:15.5px;font-weight:600;letter-spacing:-.01em;margin-bottom:7px}
.pipe-label p{font-size:13px;line-height:1.55;color:var(--dim);font-weight:300}
.pipe-fallback{display:none}
@media(max-width:900px){
  .pipe-graphic{display:none}
  .pipe-fallback{display:grid}
}

/* ---- brand flag ---- */
/* sized by height only, so the 132x92 artwork keeps its true 1.43 proportions
   instead of being stretched by hard-coded width/height attributes */
.brand-flag{display:block;height:15px;width:auto;border-radius:2px;
  box-shadow:0 0 0 1px rgba(var(--shadow-rgb),.12);margin-left:-2px}
.foot-lockup .brand-flag{height:14px}
@media(max-width:600px){.brand-flag{height:12px}}

/* ---- plain scannable service list ---- */
.svc-list-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 34px}
.svc-col h3{font-size:16px;font-weight:600;letter-spacing:-.01em;padding-bottom:14px;
  margin-bottom:6px;border-bottom:2px solid var(--accent)}
.svc-col ul{list-style:none}
.svc-col li{font-size:14.5px;line-height:1.5;font-weight:300;padding:11px 0;
  border-bottom:1px solid var(--line);color:var(--text)}
.svc-col li:last-child{border-bottom:none}
@media(max-width:980px){.svc-list-grid{grid-template-columns:1fr 1fr;gap:34px 30px}}
@media(max-width:560px){.svc-list-grid{grid-template-columns:1fr}}

/* ---- who we look after ---- */
.care-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.care{background:var(--card2-a);border:1px solid var(--line);border-radius:4px;padding:32px 28px}
.care h3{font-size:19px;font-weight:600;letter-spacing:-.012em;margin-bottom:8px}
.care-for{font-size:14px;line-height:1.6;color:var(--dim);font-weight:300;margin-bottom:20px}
.care-list{list-style:none}
.care-list li{position:relative;padding:9px 0 9px 27px;font-size:14.5px;line-height:1.55;font-weight:300}
.care-list li::before{content:"";position:absolute;left:0;top:15px;width:13px;height:8px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
@media(max-width:900px){.care-grid{grid-template-columns:1fr}}

/* ---- simple section footer link ---- */
.rsec-foot{margin-top:42px;text-align:center;font-size:15px}
.rsec-foot a{color:var(--accent);font-weight:600}

/* ---- simpler headings for the pared-back layout ---- */
.rhead.center h2{margin-bottom:12px}
.rhead.center p{font-size:16px}


/* ---- service list: four columns, readable in one screen ---- */
.svc-list-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:38px 30px;align-items:start}
/* reserve two lines for the heading so the rules underneath — and the first
   item in every column — sit on the same line whatever the language */
.svc-col h3{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.4;
  min-height:calc(2.8em + 17px);padding-bottom:15px;box-sizing:border-box;/* 2 lines + padding + 2px rule */
  margin-bottom:4px;border-bottom:2px solid var(--accent)}
.svc-col ul{list-style:none}
.svc-col li{font-size:15px;line-height:1.45;font-weight:300;padding:13px 0;
  border-bottom:1px solid var(--line)}
.svc-col li:last-child{border-bottom:none}
.svc-note{margin-top:14px;font-size:12px;line-height:1.5;font-weight:400;letter-spacing:.02em;
  text-transform:uppercase;color:var(--accent);opacity:.85}
@media(max-width:1000px){.svc-list-grid{grid-template-columns:1fr 1fr;gap:34px 28px}}
@media(max-width:560px){.svc-list-grid{grid-template-columns:1fr}}

/* ---- maintenance: custom note ---- */
.care-note{display:flex;align-items:flex-start;gap:18px;max-width:760px;margin:34px auto 0;
  padding:22px 26px;border:1px solid var(--line);border-radius:4px;background:var(--card2-a)}
.care-note span{flex-shrink:0;font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-on-accent);background:var(--accent);
  padding:6px 12px;border-radius:100px;margin-top:2px}
.care-note p{font-size:14.5px;line-height:1.65;color:var(--dim);font-weight:300}
@media(max-width:600px){.care-note{flex-direction:column;gap:12px}}

/* ---- hero with a photo behind it ---- */
/* The scrim only needs to be heavy where the words sit. Clearing it faster
   across the frame lets the photo actually show. Text contrast is checked
   against the rendered page, not guessed. */
/* Neutral, not teal. A coloured scrim tinted the whole photograph; plain black
   darkens only what it needs to and leaves the colours alone. It also ends at
   fully transparent, so the right-hand side of every hero is the untouched
   original image. Worst-case contrast behind the body copy is 5.6:1, above the
   4.5:1 readability floor — re-run tune_neutral.py if you lighten it. */
.vhero.has-media::after{background:linear-gradient(100deg,
  rgba(0,0,0,.84) 0%, rgba(0,0,0,.70) 34%,
  rgba(0,0,0,.30) 66%, rgba(0,0,0,0) 100%)}
/* A bright, evenly-lit photograph needs more help than a dark one. Add
   scrim-strong to a hero whose picture is light — measure, do not guess. */
.vhero.has-media.scrim-strong::after{background:linear-gradient(100deg,
  rgba(0,0,0,.94) 0%, rgba(0,0,0,.88) 34%,
  rgba(0,0,0,.50) 66%, rgba(0,0,0,.18) 100%)}
/* On a phone the text runs the full width, so a left-to-right scrim leaves the
   end of every line on bare photo. Top-to-bottom instead. */
@media(max-width:900px){
  .vhero.has-media::after{background:linear-gradient(180deg,
    rgba(0,0,0,.78) 0%, rgba(0,0,0,.66) 45%, rgba(0,0,0,.52) 100%)}
  .vhero.has-media.scrim-strong::after{background:linear-gradient(180deg,
    rgba(0,0,0,.86) 0%, rgba(0,0,0,.76) 45%, rgba(0,0,0,.62) 100%)}
}
.vhero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}

/* ---- how can we help: four boxes ---- */
.help-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.help{position:relative;display:block;background:var(--card2-a);border:1px solid var(--line);
  border-radius:4px;padding:30px 26px 54px;color:inherit;
  transition:transform .25s,border-color .25s,box-shadow .25s}
.help:hover{transform:translateY(-4px);border-color:var(--accent);
  box-shadow:0 20px 40px -26px rgba(var(--shadow-rgb),.4)}
.help h3{font-size:18px;font-weight:600;letter-spacing:-.012em;margin-bottom:10px}
.help p{font-size:14px;line-height:1.62;color:var(--dim);font-weight:300}
.help-go{position:absolute;left:26px;bottom:24px;font-size:17px;color:var(--accent);
  transition:transform .25s;display:inline-block}
.help:hover .help-go{transform:translateX(5px)}
@media(max-width:960px){.help-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.help-grid{grid-template-columns:1fr}
  .help{padding:24px 22px 48px}}

/* ---- tighter home hero so the help boxes sit above the fold ---- */
.vhero{padding:142px 0 78px}
@media(max-width:900px){.vhero{padding:118px 0 60px}}
.vhero h1{font-size:clamp(30px,3.9vw,48px);margin-bottom:16px}
.vhero p{margin-bottom:28px}
.rsec.pad-sm{padding:46px 0 34px}
.rsec.pad-sm .rhead{margin-bottom:26px}
.rsec.pad-sm + .rsec{padding-top:56px}

/* ---- always on ----
   A section marked no-reveal skips the fade-in, so it is drawn the moment
   the page loads even when only half of it is on screen. Used on "How can
   we help": a section peeking above the fold must not sit blank waiting
   for a scroll. */
.no-reveal .rv{opacity:1;transform:none;transition:none}

/* ---- plan CTA as a button, not a text link ---- */
.rsec-foot.cta a{display:inline-flex;align-items:center;gap:9px;padding:15px 30px;
  border-radius:100px;background:var(--accent);color:var(--ink-on-accent);
  font-size:15px;font-weight:600;box-shadow:0 10px 26px -10px var(--glow);
  transition:transform .2s,box-shadow .2s}
.rsec-foot.cta a:hover{transform:translateY(-2px);box-shadow:0 16px 34px -10px var(--glow)}

/* ---- brand band: names only, quietly scrolling ---- */
.band{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg2);padding:26px 0}
.band-track{display:flex;width:max-content;align-items:center;
  animation:bandscroll 46s linear infinite}
.band-track span{flex-shrink:0;padding:0 42px;font-size:16px;font-weight:600;
  letter-spacing:.19em;color:var(--faint);white-space:nowrap;
  transition:color .25s}
.band:hover .band-track{animation-play-state:paused}
.band-track span:hover{color:var(--accent)}
@keyframes bandscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.band-track{animation:none;flex-wrap:wrap;
  width:100%;justify-content:center;gap:10px 0}}
.band-note{text-align:center;font-size:12px;color:var(--faint);margin-top:18px;
  letter-spacing:.02em;font-weight:300}


/* ---- our own lighting ---- */
.own-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:760px;margin:0 auto}
.own{text-align:center}
.own-img{aspect-ratio:1.25;display:flex;align-items:center;justify-content:center;padding:22px;
  background:radial-gradient(circle at 50% 45%,rgba(var(--accent-rgb),.12),transparent 62%),var(--card2-a);
  border:1px solid var(--line);border-radius:4px;margin-bottom:18px}
.own-img img{max-width:78%;max-height:100%;object-fit:contain}
.own h3{font-size:16.5px;font-weight:600;margin-bottom:7px}
.own p{font-size:14px;color:var(--dim);font-weight:300}
@media(max-width:560px){.own-grid{grid-template-columns:1fr}}


/* ---- full-width photo band between sections ---- */
.photo-band{position:relative;height:340px;overflow:hidden}
.photo-band img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:700px){.photo-band{height:220px}}

/* ---- care cards with a photo ---- */
.care{padding:0;overflow:hidden}
.care-img{aspect-ratio:1.5;overflow:hidden}
.care-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.care:hover .care-img img{transform:scale(1.04)}
.care-b{padding:28px 26px 30px}

/* ---- how we choose ---- */
.choose-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.choose{background:var(--card2-a);border:1px solid var(--line);border-radius:4px;padding:32px 28px}
.choose-n{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--accent);margin-bottom:14px}
.choose h3{font-size:18px;font-weight:600;letter-spacing:-.012em;margin-bottom:10px}
.choose p{font-size:14.5px;line-height:1.65;color:var(--dim);font-weight:300}
@media(max-width:860px){.choose-grid{grid-template-columns:1fr}}

/* ---- photo band: fade into the page instead of hard edges ---- */
.photo-band{height:300px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%)}
.photo-band.inset{max-width:var(--wrap);margin:0 auto;padding:0 32px;height:330px}
.photo-band.inset img{border-radius:4px}
@media(max-width:700px){.photo-band,.photo-band.inset{height:200px}}

/* ---- what we work with: media panel left, copy right, all rows aligned ---- */
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.work{display:grid;grid-template-columns:210px 1fr;padding:0;overflow:hidden;
  background:var(--card2-a);border:1px solid var(--line);border-radius:4px;
  transition:border-color .25s,box-shadow .25s}
.work:hover{border-color:var(--line2);box-shadow:0 16px 34px -26px rgba(var(--shadow-rgb),.4)}
.work-img{position:relative;min-height:210px;background:var(--surface2);overflow:hidden}
.work-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.work:hover .work-img img{transform:scale(1.05)}
/* product renders sit on a tinted panel instead of filling it */
.work-img.contain{background:radial-gradient(circle at 50% 45%,rgba(var(--accent-rgb),.14),transparent 68%),var(--surface2)}
.work-img.contain img{object-fit:contain;padding:26px}
.work:hover .work-img.contain img{transform:scale(1.04)}
.work-b{padding:28px 28px 26px;display:flex;flex-direction:column;justify-content:center}
.work-b h3{font-size:18.5px;font-weight:600;letter-spacing:-.012em;margin:0 0 9px;line-height:1.25}
.work-b p{font-size:14px;line-height:1.6;color:var(--dim);font-weight:300;margin:0 0 16px}
.work-brands{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.work-brands em{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--accent-deep);background:var(--accent-soft);
  padding:5px 10px;border-radius:100px;white-space:nowrap}
.work-brands .more{font-size:12px;font-weight:300;color:var(--faint);padding-left:3px}
@media(max-width:1000px){.work-grid{grid-template-columns:1fr}}
@media(max-width:560px){.work{grid-template-columns:1fr}.work-img{min-height:170px}
  .work-img.contain img{padding:20px}}


/* ---- anchored sections clear the fixed nav ---- */
[id]{scroll-margin-top:96px}

/* ---- when a link jumps to a service column, show which one ---- */
.svc-col:target{position:relative}
.svc-col:target::before{content:"";position:absolute;inset:-14px -16px;border-radius:4px;
  border:2px solid var(--accent);background:var(--accent-soft);
  animation:targetfade 2.6s ease forwards;pointer-events:none}
@keyframes targetfade{0%,50%{opacity:1}100%{opacity:0}}

/* ---- closing CTA band over a photo ---- */
.cta-band.has-media{position:relative;isolation:isolate;overflow:hidden;padding:76px 0}
.cta-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cta-band.has-media::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(6,45,52,.95) 0%,rgba(6,45,52,.86) 48%,rgba(6,45,52,.66) 100%)}

/* ---- who we are: dark band, breaks up the pale page ---- */
.about{position:relative;isolation:isolate;overflow:hidden;padding:88px 0;color:#fff}
.about::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(150deg,#08303a 0%,#062b33 100%)}
.about-in{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:center;
  max-width:var(--wrap);margin:0 auto;padding:0 32px}
.about-copy .eyebrow{display:block;color:rgba(255,255,255,.6);margin-bottom:16px}
.about-copy h2{font-size:clamp(26px,3vw,38px);font-weight:600;line-height:1.18;
  letter-spacing:-.022em;margin-bottom:18px}
.about-copy p{font-size:16px;line-height:1.72;color:rgba(255,255,255,.8);font-weight:300}
.about-stats{display:grid;gap:26px}
.stat{border-left:2px solid var(--accent-br);padding-left:22px}
.stat-n{font-size:clamp(34px,4vw,46px);font-weight:600;letter-spacing:-.03em;line-height:1}
.stat-l{font-size:13px;font-weight:300;letter-spacing:.04em;color:rgba(255,255,255,.66);margin-top:7px}
@media(max-width:900px){.about-in{grid-template-columns:1fr;gap:40px}
  .about-stats{grid-template-columns:repeat(3,1fr);gap:18px}
  .stat{border-left:none;border-top:2px solid var(--accent-br);padding:14px 0 0}}
@media(max-width:520px){.about-stats{grid-template-columns:1fr}}

/* ---- home: one photograph behind both the hero and the numbers ----
   There is no teal band any more; the picture runs from under the nav down to
   "How can we help". Two things make it work:
   1. The photo is 122% of the wrapper's height and pinned to the bottom, so
      the frame keeps the pool and loses the window tops.
   2. Two scrims — the usual left-to-right one that keeps the headline
      readable, plus a vertical one that settles into the brand teal so the
      numbers sit on solid colour rather than on glass and reflections. */
.megahero{position:relative;isolation:isolate;overflow:hidden}
.megahero > .vhero-media{position:absolute;left:0;right:0;bottom:0;top:auto;
  width:100%;height:122%;object-fit:cover;z-index:-2}
.megahero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    /* neutral for most of the fall, turning teal only near the foot, so the
       photograph keeps its own colour much further down the frame */
    linear-gradient(180deg, rgba(0,0,0,0) 48%, rgba(0,0,0,.34) 68%,
                            rgba(6,40,46,.72) 86%, rgba(6,40,46,.92) 100%),
    linear-gradient(100deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.66) 34%,
                            rgba(0,0,0,.25) 66%, rgba(0,0,0,.03) 100%)}
/* the hero and the about block go transparent — the wrapper carries both now */
.megahero .vhero{background:none}
.megahero .vhero::after{display:none}
.megahero .about{background:none;isolation:auto}
.megahero .about::after{display:none}
/* On a phone the text runs the full width, so a left-to-right scrim leaves the
   right-hand end of every line sitting on bare photo. Top-to-bottom instead. */
@media(max-width:900px){
  .megahero::after{background:linear-gradient(180deg,
    rgba(0,0,0,.80) 0%, rgba(0,0,0,.68) 30%,
    rgba(6,40,46,.78) 58%, rgba(6,40,46,.96) 100%)}
}

/* ---- about sits right under the hero, so keep it compact ----
   its padding is also the fine adjustment for how much of "How can we help"
   peeks above the fold; raising it pushes that heading out of sight ---- */
.about{padding:45px 0}
.about-in{gap:56px;align-items:center}
.about-copy h2{font-size:clamp(24px,2.6vw,33px);margin-bottom:14px}
.about-copy p{font-size:15.5px;line-height:1.68}
.stat-n{font-size:clamp(30px,3.4vw,40px)}
@media(max-width:900px){.about{padding:48px 0}}

/* Section positions must not depend on how many lines a headline happens to
   wrap to — otherwise "How can we help" peeks by a different amount in every
   language, and every copy edit silently re-breaks it. Fixing the hero height
   and centring the content inside it makes the fold identical everywhere.
   Only applies from 901px up; below that the page stacks and scrolls anyway. */
@media(min-width:901px){
  .vhero{min-height:500px;display:flex;align-items:center;padding:96px 0 44px}
  .vhero.short{min-height:412px;padding:104px 0 44px}
  .vhero-in{width:100%}
  /* 17ch forced English and Spanish onto three lines while Catalan sat on
     two. This column gives a two-line headline in all four. */
  .vhero:not(.short) h1{max-width:580px}
  /* the inner-page headings are shorter, but 17ch still broke the Catalan and
     Spanish contact heading across three lines. One line, every language. */
  .vhero.short h1{max-width:780px;text-wrap:balance}
}
/* stops a line ending on a single stranded word */
.vhero p{text-wrap:pretty}