/* -------------------------------------------------------------------------
 * 07.09.2026 - surnud reeglite koristus
 *
 * Eemaldatud 59 reeglit, mille selektor ei vasta uhelegi elemendile avalehel
 * (see on ainus leht, kus see fail laetakse - vt standard_assets()).
 *
 * Need on kahe varasema kaardikujunduse jaanused: `.meta`, `.cap`, `.more`,
 * `.desktop-card-label`, `> a.cell > img`, `> a.cell > .go` - markup, mida
 * mall enam ei valjasta. Kontrollitud kahtpidi: 0 vastet DOM-is, kui KOIK
 * paneelid on `.on`, ja klassi ei ole renderdatud HTML-is.
 *
 * Nad ei muutnud midagi, aga nad olid mura, mille sees eksisin tana kolm
 * korda: otsisin polevat reeglit ja ei leidnud seda, mis tegelikult maalis.
 *
 * Varukoopia: assets/css/home.css.bak-20260907
 * ------------------------------------------------------------------------- */

:root{
  --navy:      oklch(0.32 0.088 264);
  --navy-deep: oklch(0.26 0.078 264);
  --ink:       oklch(0.28 0.03 264);
  --ink-soft:  oklch(0.52 0.02 264);
  --line:      oklch(0.9 0.006 264);
  --paper:     oklch(0.995 0.0015 264);
  --white:     oklch(0.985 0.003 264);
  --f:  "Karla", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --fs: "Merriweather", Georgia, serif;
  --edge: clamp(1.25rem, 0.4rem + 3.4vw, 4.5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* brand worlds */
  --brown:  oklch(0.44 0.072 58);
  --gold:   oklch(0.68 0.09 78);
  --beige:  oklch(0.925 0.014 76);
  --accent: var(--navy);
}
/* per-world brand colour: Sisustus = sinine, Originals = pruun, Lab = navy */
.stage[data-world="0"]{--accent:var(--navy)}
.stage[data-world="1"]{--accent:var(--brown)}
.stage[data-world="2"]{--accent:oklch(0.2 0.008 264)}
/* Lab = mustvalge: nupp valge sisuga + must ääris */
.stage[data-world="2"] .cta-big{background:var(--white);color:oklch(0.18 0.008 264);border:1px solid oklch(0.18 0.008 264)}
.stage[data-world="2"] .cta-big:hover{background:oklch(0.18 0.008 264);color:var(--white);filter:none}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html.leaving{opacity:0;transition:opacity .42s cubic-bezier(.16,1,.3,1)}
body{font-family:var(--f);background:var(--paper);color:var(--ink);font-size:clamp(0.95rem, 0.9rem + 0.2vw, 1.02rem);line-height:1.55}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--navy);color:var(--white)}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:60;height:clamp(58px, 2.4vw + 42px, 76px);margin-bottom:calc(-1 * clamp(58px, 2.4vw + 42px, 76px));display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:0 var(--edge);color:var(--white);background:transparent;
  transition:background .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease)}
header.solid{background:var(--paper);color:var(--navy);box-shadow:0 1px 0 var(--line)}
.logo{height:clamp(1.15rem, 1rem + 0.5vw, 1.5rem);width:auto;color:currentColor;display:block}
nav.main{display:flex;gap:clamp(1rem, 0.2rem + 1.9vw, 2.9rem)}
nav.main a{font-size:clamp(0.66rem, 0.6rem + 0.15vw, 0.78rem);letter-spacing:0.13em;text-transform:uppercase;font-weight:500;position:relative;padding-block:.5rem;opacity:.9;transition:opacity .3s}
nav.main a::after{content:"";position:absolute;left:0;bottom:.15rem;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
nav.main a:hover{opacity:1}nav.main a:hover::after{transform:scaleX(1)}
.head-right{display:flex;align-items:center;gap:clamp(1rem, 0.4rem + 1.4vw, 2rem)}
.btn-outline{border:1px solid currentColor;border-radius:3px;padding:0.7em 2em;font-size:0.78rem;font-weight:600;letter-spacing:0.14em;opacity:.92;transition:background .35s var(--ease),color .35s var(--ease),opacity .3s;white-space:nowrap}
header.solid .btn-outline:hover{background:var(--navy);color:var(--white)}
.lang{font-size:0.78rem;font-weight:600;letter-spacing:0.16em}
.langsw{position:relative}
.langsw-t{display:inline-flex;align-items:center;gap:.34rem;background:none;border:0;padding:.2rem .1rem;cursor:pointer;color:inherit;font:inherit;font-size:.78rem;font-weight:600;letter-spacing:.16em;line-height:1}
.langsw-c{width:9px;height:6px;opacity:.55;transition:transform .4s var(--ease),opacity .3s var(--ease)}
.langsw-t:hover .langsw-c{opacity:1}
.langsw.open .langsw-c{transform:rotate(180deg);opacity:1}
.langsw-p{position:absolute;top:calc(100% + .85rem);right:0;min-width:11.5rem;background:var(--white);border:1px solid oklch(0.9 0.006 264);box-shadow:0 18px 44px oklch(0.2 0.05 264/.13);padding:.4rem;opacity:0;visibility:hidden;transform:translateY(-.4rem);transition:opacity .34s var(--ease),transform .44s var(--ease),visibility .34s;z-index:60}
.langsw.open .langsw-p{opacity:1;visibility:visible;transform:none}
.langsw-o{display:flex;align-items:baseline;gap:.7rem;width:100%;background:none;border:0;padding:.5rem .7rem;cursor:pointer;font:inherit;text-align:start;color:var(--ink-soft);transition:color .28s var(--ease),background .28s var(--ease)}
.langsw-o:hover{background:oklch(0.975 0.004 264);color:var(--navy)}
.langsw-o.on{color:var(--navy)}
.langsw-code{font-size:.66rem;font-weight:700;letter-spacing:.14em;min-width:1.7rem;opacity:.55}
.langsw-o.on .langsw-code{opacity:1}
.langsw-name{font-size:.88rem;letter-spacing:0;font-weight:400}
.langsw-o.on .langsw-name{font-weight:600}
.icon-btn-h{color:currentColor;display:grid;place-items:center;opacity:.9;transition:opacity .3s}.icon-btn-h:hover{opacity:1}
.menu-toggle{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;gap:5px;padding:6px 0;color:currentColor}
.menu-toggle span{display:block;width:26px;height:1.5px;background:currentColor}
/* menu is an UNDERLAY on the paper background (right side). The page recedes into a card,
   keeping its left/top/bottom edges flush and rounding ONLY its right edge to reveal the menu. */
body{background:var(--paper)}
body.menu-open{overflow:hidden}
.frame-t,.frame-b{display:none}
.page{position:fixed;inset:0;z-index:2;background:var(--paper);overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;transition:inset .8s cubic-bezier(.76,0,.24,1),border-radius .8s cubic-bezier(.76,0,.24,1),box-shadow .8s cubic-bezier(.76,0,.24,1),transform .95s cubic-bezier(.76,0,.24,1)}
.page::-webkit-scrollbar{width:0;height:0;display:none}
.page.pl-enter{transform:translateY(46px)}
body.menu-open .page{inset:0 min(33vw,540px) 0 0;border-radius:0 40px 40px 0;box-shadow:0 30px 90px oklch(0.2 0.05 264 / .18)}
.menu-panel{position:fixed;inset:0;z-index:1;background:var(--paper);overflow:hidden}
.menu-inner{position:absolute;top:0;right:0;bottom:0;width:min(33vw,540px);display:flex;flex-direction:column;padding:clamp(4rem,2rem + 7vw,7.5rem) clamp(2rem,1rem + 3.2vw,4.5rem) clamp(2rem,1rem + 3vw,3.5rem)}
.menu-mono{position:absolute;right:-3%;bottom:clamp(5rem,13vh,10rem);width:clamp(14rem,20vw,24rem);pointer-events:none;user-select:none;z-index:0}
.menu-mono img{width:100%;height:auto;display:block;opacity:.1}
.menu-x{position:fixed;top:clamp(1.8rem,1rem + 1.6vw,2.8rem);right:clamp(1.8rem,1rem + 2vw,3rem);z-index:5;background:none;border:none;cursor:pointer;font-size:1.7rem;line-height:1;color:var(--navy);opacity:0;visibility:hidden;transition:opacity .4s var(--ease) .15s,visibility 0s .55s}
body.menu-open .menu-x{opacity:1;visibility:visible;transition:opacity .4s var(--ease) .35s}
.menu-list{list-style:none}
.menu-list li{overflow:hidden}
.menu-list li a{display:block;font-size:clamp(1.5rem,1rem + 1.8vw,2.4rem);font-weight:600;letter-spacing:0.01em;text-transform:uppercase;color:var(--navy);line-height:1.75;transform:translateY(110%);transition:transform .7s cubic-bezier(.76,0,.24,1),color .3s var(--ease)}
body.menu-open .menu-list li a{transform:none}
body.menu-open .menu-list li:nth-child(1) a{transition-delay:.32s}body.menu-open .menu-list li:nth-child(2) a{transition-delay:.38s}body.menu-open .menu-list li:nth-child(3) a{transition-delay:.44s}body.menu-open .menu-list li:nth-child(4) a{transition-delay:.5s}body.menu-open .menu-list li:nth-child(5) a{transition-delay:.56s}body.menu-open .menu-list li:nth-child(6) a{transition-delay:.62s}
.menu-list a:hover{color:oklch(0.56 0.11 264)}
.menu-bottom{margin-top:auto;width:100%;display:flex;gap:clamp(2rem,1rem + 3vw,4rem);opacity:0;transition:opacity .5s .55s}
body.menu-open .menu-bottom{opacity:1}
.menu-col{display:flex;flex-direction:column;gap:.35rem}
.menu-lbl{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.35rem}
.menu-col a,.menu-col span{font-size:.9rem;color:var(--ink);transition:color .3s}.menu-col a:hover{color:var(--navy)}
@media(max-width:820px){body.menu-open .page{inset:0 84vw 0 0;border-radius:0 28px 28px 0}.menu-inner{width:84vw}}
@media(max-width:920px){nav.main{display:none}.btn-outline{display:none}}

/* ---------- Stage ---------- */
.stage{position:relative;height:97svh;overflow:hidden;--feat:21.5%}
.hero{position:absolute;inset:0;overflow:hidden;color:var(--white)}
.hslide{position:absolute;inset:0;visibility:hidden}
.hslide.on{visibility:visible}
.hslide .bg{position:absolute;inset:0;overflow:hidden}
.hslide .bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
/* one single smooth gradient on the main background image (bottom-weighted for headline + 1944) */
.hslide::after{content:"";position:absolute;inset:0;background:linear-gradient(18deg, oklch(0.10 0.04 264 / .93) 0%, oklch(0.11 0.04 264 / .62) 30%, oklch(0.13 0.04 264 / .28) 52%, oklch(0.14 0.04 264 / .08) 66%, transparent 80%)}
.hslide-in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(0.9rem, 0.7rem + 1.2vw, 1.7rem);padding:4rem var(--edge) calc(clamp(16rem, 12rem + 6vw, 19.5rem) + clamp(3.4rem, 2rem + 2.4vw, 5rem));max-width:60rem}
.eyebrow{font-size:clamp(0.74rem, 0.66rem + 0.24vw, 0.92rem);letter-spacing:0.26em;text-transform:uppercase;font-weight:500;color:oklch(0.98 0.01 264 / .96)}
.hslide a.eyebrow{display:inline-flex;align-items:center;gap:1.2rem;width:max-content}

.hslide a.eyebrow .ar::after{content:"";position:absolute;right:-1px;top:-4px;width:9px;height:9px;border-top:2px solid currentColor;border-inline-end:2px solid currentColor;transform:rotate(45deg)}
.hslide a.eyebrow .ar {
  position: relative;
  flex: 0 0 auto;
  width: clamp(3.4rem, 3vw + 1.5rem, 5.4rem);
  height: 2px;
  background: currentColor;
  display: inline-block;
  transition: width .45s var(--ease);
}
.hslide a.eyebrow:hover .ar{width:clamp(4.4rem, 4vw + 1.5rem, 6.4rem)}
.hslide .hslide-title{font-weight:300;line-height:1.06;letter-spacing:-0.015em;font-size:clamp(1.7rem, 0.6rem + 4.6vw, 5rem)}
.hslide .hslide-title .lm{display:block;overflow:hidden}.hslide .hslide-title .lm>span{display:block;white-space:nowrap}
.hcta{display:inline-flex;align-items:center;gap:1rem;font-size:0.82rem;letter-spacing:0.16em;text-transform:uppercase;font-weight:500;width:max-content}
.hcta .ar{width:2.8rem;height:1px;background:currentColor;position:relative;transition:width .45s var(--ease)}
.hcta .ar::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-inline-end:1px solid currentColor;transform:rotate(45deg)}
.hcta:hover .ar{width:3.7rem}

/* slider controls — arrow always visible */
.s-nav{display:none}
.s-btn{width:clamp(2.1rem, 1.6rem + 1.1vw, 2.9rem);aspect-ratio:1;border-radius:50%;border:none;cursor:pointer;display:grid;place-items:center;
  background:var(--white);color:var(--navy);box-shadow:0 5px 18px oklch(0.18 0.05 264 / .26);transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease)}
.s-btn svg{width:60%;height:60%}
.s-btn:hover{background:var(--navy);color:var(--white);transform:scale(1.08)}
.s-btn.prev{opacity:.55}.s-btn.prev:hover{opacity:1}
.dots{position:absolute;left:auto;top:auto;right:calc(var(--feat) + 0.7rem);bottom:calc(clamp(16rem, 12rem + 6vw, 19.5rem) + clamp(3.4rem, 2rem + 2.4vw, 5rem));z-index:6;display:flex;gap:.8rem;align-items:center}
.dots button{width:9px;height:9px;border-radius:50%;border:1px solid oklch(0.98 0.01 264 / .85);background:transparent;cursor:pointer;padding:0;transition:background .35s var(--ease),transform .35s var(--ease)}
.dots button:hover{background:oklch(0.98 0.01 264 / .5)}
.dots button.on{background:var(--white);transform:scale(1.2)}
@media(max-width:640px){.s-nav{right:1rem}}

/* ---------- Deck (25% more compact) ---------- */
/* fixed, moderate deck height -> all panels equal, hero keeps room, content sized to fit */
.deck{position:absolute;left:0;right:0;bottom:0;z-index:4;height:clamp(16rem, 12rem + 6vw, 19.5rem);background:transparent;overflow:hidden}
.panel{position:absolute;inset:0;display:none}
.panel.on{display:grid;grid-template-rows:minmax(0,1fr)}
.cell{padding:clamp(0.9rem, 0.65rem + 0.8vw, 1.5rem) clamp(0.95rem, 0.6rem + 0.8vw, 1.5rem);display:flex;flex-direction:column;gap:.55rem;min-width:0;min-height:0;height:100%;overflow:hidden;background:var(--paper)}
.cell + .cell{border-inline-start:1px solid var(--line)}
.k-label{font-size:0.7rem;font-weight:600;letter-spacing:0.11em;text-transform:uppercase;color:var(--accent);line-height:1.35;transition:color .6s var(--ease)}
.cimg{flex:1 1 auto;min-height:0;overflow:hidden;background:var(--white)}
.cimg img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.1s var(--ease)}
.cell:hover .cimg img{transform:scale(1.1)}


.go{margin-top:auto;width:2rem;height:1px;background:var(--ink);position:relative;display:block;transition:width .45s var(--ease)}
.go::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid var(--ink);border-inline-end:1px solid var(--ink);transform:rotate(45deg)}
.cell:hover .go{width:3rem}
.p-segments .seg-cap{display:flex;align-items:center;gap:.9rem;margin-top:auto;padding-top:1rem}
.p-segments .seg-cap .go{margin:0}
.p-segments .seg-name{font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);line-height:1.3;transition:color .6s var(--ease)}
.p-segments .rail-head{display:flex;flex-direction:column;gap:.4rem}
.p-segments .rail .rsub{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);line-height:1.5;max-width:22ch;transition:color .6s var(--ease)}
.cta-big{display:grid;place-items:center;background:var(--accent);color:var(--white);padding:clamp(0.62rem, 0.5rem + 0.5vw, 0.95rem);border-radius:3px;font-size:clamp(0.82rem, 0.75rem + 0.35vw, 1.02rem);font-weight:700;letter-spacing:0.1em;transition:background .35s var(--ease),transform .5s var(--ease);flex:0 0 auto}
.cta-big:hover{filter:brightness(.88);transform:translateY(-2px)}
.rail{justify-content:space-between}
.rail-head{display:flex;flex-direction:column;gap:.5rem}
.serif{font-family:var(--fs);font-weight:300;line-height:.82;color:var(--accent);transition:color .6s var(--ease)}
/* deck feature column — transparent: the SAME hero background shows through (per Figma mask) */
.rail.feature{position:relative;overflow:hidden;color:var(--white);background:transparent}
.rail.feature > *{position:relative;z-index:1}
.rail.feature .k-label{color:oklch(0.9 0.02 264)}
.rail.feature .serif{color:var(--white)}
.rail.feature .rsub{color:oklch(0.88 0.02 264)}
.rail.feature .cta-big{background:var(--navy);color:var(--white)}
.rail.feature .cta-big:hover{filter:brightness(1.15)}


.stage[data-world="2"] .rail.feature .cta-big{background:var(--white);color:oklch(0.15 0.02 264);border:none}

/* Panel 0 — segments: 4 equal columns */
.p-segments{grid-template-columns:repeat(3,1fr) var(--feat)}
.p-segments .rail .serif{font-size:clamp(2.6rem, 1.4rem + 3vw, 4rem);display:flex;align-items:flex-start;gap:.5rem}


/* Panel 1 — products: ranked, numerals over image */
.p-products{grid-template-columns:repeat(3,1fr) var(--feat)}
.p-products .cell{gap:.55rem}
.p-products .rank{position:relative}
.p-products .rank img{object-fit:cover}
.p-products .rank .no{position:absolute;top:.4rem;left:.5rem;z-index:2;font-family:var(--fs);font-weight:300;font-size:clamp(1.8rem, 1rem + 2vw, 2.8rem);color:var(--white);line-height:1;text-shadow:0 2px 14px oklch(0.18 0.05 264 / .5)}
.p-products .rail .serif{font-size:clamp(2.4rem, 1.4rem + 2.6vw, 3.6rem)}
.p-products .rail .serif small{font-family:var(--f);display:block;font-size:0.64rem;font-weight:600;letter-spacing:0.13em;text-transform:uppercase;margin-top:.4rem}

/* Panel 2 — Lab: one big spotlight + side list */
.p-lab{grid-template-columns:0.95fr 1.55fr var(--feat)}
.p-lab .spot{padding:0;border-inline-start:1px solid var(--line)}
.p-lab .spot .cimg{height:100%;min-height:0}
.p-lab .spotxt{justify-content:center;gap:.5rem}
.p-lab .spotxt .t{font-weight:400;font-size:clamp(1.35rem, 1rem + 1.5vw, 2.2rem);letter-spacing:-0.02em;line-height:1.08;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.p-lab .spotxt .ex{font-size:0.84rem;color:var(--ink-soft);max-width:34ch;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}


@media(max-width:1040px){
  /* drop the desktop overlay/mask: hero and deck return to normal stacked flow */
  .stage{height:auto;overflow:visible}
  .hero{position:relative;inset:auto;min-height:84svh}
  .hslide-in{justify-content:flex-end;padding:5rem var(--edge) 5rem;max-width:none}
  .dots{position:absolute;left:var(--edge);right:auto;top:auto;bottom:1.8rem}
  .deck{position:relative;left:auto;right:auto;bottom:auto;height:auto;z-index:1}
  .panel{position:relative;inset:auto}
  .panel.on{height:auto}
  .cell{height:auto}
  .cimg{flex:none;height:clamp(9rem, 26vw, 14rem)}
  .p-segments,.p-products,.p-lab{grid-template-columns:1fr 1fr}
  .cell:nth-child(odd){border-inline-start:0}
  .cell:nth-child(n+3){border-top:1px solid var(--line)}
  /* feature column has no hero image behind it when stacked -> solid navy block */
  .rail.feature{background:var(--navy);justify-content:flex-start;gap:1.4rem;padding:clamp(1.6rem,1rem + 3vw,2.4rem)}
  .rail.feature .cta-big{background:var(--white);color:var(--navy)}
  .p-lab .spot{border-inline-start:0}
  .p-lab .spot .cimg{height:clamp(9rem, 26vw, 14rem)}
}
@media(max-width:640px){
  .p-segments,.p-products,.p-lab{grid-template-columns:1fr}
  .cell,.cell + .cell{border-inline-start:0}.cell + .cell{border-top:1px solid var(--line)}
  .hslide .hslide-title{font-size:clamp(1.7rem, 3vw + 1.15rem, 2.6rem)}
  .hslide .hslide-title .lm{overflow:visible}
  .hslide .hslide-title .lm>span{white-space:normal}
  .hslide-in{padding-bottom:4.5rem;gap:1rem}
  .dots{bottom:1.5rem}
}

/* ---------- After ---------- */
.strip{padding:clamp(0.9rem, 0.7rem + 0.5vw, 1.3rem) var(--edge);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.8rem 2rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip .lead{font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-soft)}
.strip ul{list-style:none;display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(1.2rem, 0.8rem + 1.6vw, 2.6rem);overflow-x:auto;scrollbar-width:none;max-width:100%}
.strip ul::-webkit-scrollbar{display:none}
.strip li{font-size:clamp(0.8rem, 0.7rem + 0.3vw, 1rem);font-weight:500;opacity:.5;transition:opacity .35s;display:flex;align-items:center;flex:0 0 auto}
.strip li:hover{opacity:1}
.strip li img{display:block;height:clamp(0.75rem, 0.6rem + 0.35vw, 1.05rem);width:auto;max-width:4.5rem;object-fit:contain}
/* Fookuses — blog bento grid */
.blog{max-width:100rem;margin-inline:auto;padding:clamp(3rem,2rem + 4vw,6.5rem) var(--edge)}
.blog-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:clamp(1.4rem,2.5vw,2.4rem)}
.blog-head{font-size:clamp(1.4rem,1rem + 1.4vw,2.2rem);font-weight:400;letter-spacing:-0.02em;color:var(--navy)}
.blog-grid{display:grid;grid-template-columns:1.5fr 1.02fr 1.08fr;gap:clamp(0.7rem,1vw,1.2rem);height:clamp(28rem,42vw,44rem)}
.blog-col{display:flex;flex-direction:column;gap:clamp(0.7rem,1vw,1.2rem);min-height:0;min-width:0}
.bcard{position:relative;overflow:hidden;display:block;min-height:0;background:var(--paper-2);flex:1}
.bcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.bcard:hover img{transform:scale(1.06)}
.bcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,oklch(0.13 0.035 264 / .74))}
.btitle{position:absolute;z-index:2;left:clamp(1rem,1.4vw,1.6rem);right:clamp(3.4rem,4.5vw,4.4rem);bottom:clamp(1rem,1.4vw,1.5rem);color:#fff;font-size:clamp(0.92rem,0.8rem + 0.5vw,1.25rem);font-weight:500;line-height:1.22}
.blog-feat .btitle{font-size:clamp(1.1rem,0.9rem + 0.8vw,1.7rem);right:clamp(4rem,5vw,5rem)}
.barrow{position:absolute;z-index:2;right:clamp(1rem,1.4vw,1.5rem);bottom:clamp(1rem,1.4vw,1.5rem);width:clamp(2.1rem,3vw,2.7rem);height:clamp(2.1rem,3vw,2.7rem);border-radius:50%;border:1px solid rgba(255,255,255,.55);display:grid;place-items:center;color:#fff;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s}
.bcard:hover .barrow{background:#fff;color:var(--navy);border-color:#fff}
.barrow svg{width:46%;height:46%}
.bcta{position:relative;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:clamp(1.1rem,1rem + 1vw,1.9rem) clamp(1.3rem,1rem + 1.2vw,2rem);font-size:clamp(1.05rem,0.9rem + 0.6vw,1.5rem);font-weight:400;overflow:hidden;transition:filter .35s}
.bcta:hover{filter:brightness(1.18)}
.bcta .barrow{position:static;border-color:rgba(255,255,255,.55)}
.bcta:hover .barrow{background:#fff;color:var(--navy);border-color:#fff}
@media(max-width:820px){
  .blog-grid{grid-template-columns:1fr;height:auto}
  .bcard{aspect-ratio:16/10;flex:none}
  .blog-feat{aspect-ratio:16/11}
  .bcta{flex:none}
}
footer{padding:clamp(3rem, 2rem + 3vw, 5.5rem) var(--edge) 0;overflow:hidden}
.foot-word{margin:clamp(1.5rem,3vw,2.6rem) 0 0;line-height:0;padding:0 clamp(0rem,2vw,3rem);overflow:hidden}
.foot-word svg{width:100%;height:auto;display:block;color:oklch(0.85 0.008 264)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(1.5rem, 1rem + 2vw, 3rem);background:#fff;margin-inline:calc(-1 * var(--edge));padding:clamp(2.5rem,2rem + 2vw,3.5rem) var(--edge) clamp(2rem,3vw,3rem)}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-grid .logo{color:var(--navy);height:1.4rem;margin-bottom:1rem}
.foot-grid p.tag{color:var(--ink-soft);font-size:0.9rem;max-width:26ch}
.foot-grid h4{font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1rem;font-weight:600}
.foot-grid a,.foot-grid p:not(.tag){display:block;font-size:0.9rem;color:var(--ink-soft);padding-block:.28rem;transition:color .3s}
.foot-grid a:hover{color:var(--navy)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:0.8rem;color:var(--ink-soft);margin-top:clamp(1.4rem,2vw,2.2rem)}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition-duration:.01ms!important}#preload{display:none!important}}
#preload{position:fixed;inset:0;z-index:1000;background:var(--paper);color:var(--navy);display:grid;place-items:center;transition:transform 1s cubic-bezier(0.76,0,0.24,1)}
#preload.done{transform:translateY(-100%)}
#preload .pl-center{display:flex;flex-direction:column;align-items:center;gap:clamp(1.5rem,3.4vh,2.6rem)}
#preload .pl-logo-mask{overflow:hidden;line-height:0;padding:.14em 0}
#preload .pl-logo{width:clamp(11rem,26vw,19rem);height:auto;color:var(--navy);display:block;transform:translateY(118%);transition:transform 1.05s cubic-bezier(0.76,0,0.24,1)}
#preload.reveal .pl-logo{transform:translateY(0)}
#preload .pl-logo path{fill:currentColor}
#preload .pl-line{width:clamp(6rem,15vw,9.5rem);height:1px;background:oklch(0.5 0.05 264 / .18);position:relative;overflow:hidden;opacity:0;transform:translateY(6px);transition:opacity .7s .35s var(--ease),transform .7s .35s var(--ease)}
#preload.reveal .pl-line{opacity:1;transform:none}
#preload .pl-line i{position:absolute;inset:0;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.35,0,.15,1)}
#preload.filling .pl-line i{transform:scaleX(1)}
/* grain overlay (premium texture) */
.grain{position:fixed;inset:0;z-index:900;pointer-events:none;opacity:.045;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:120px}
/* editorial homepage sections */
.hsec{padding-block:clamp(3.5rem,2.5rem + 4vw,8rem);max-width:82rem;margin-inline:auto;padding-inline:var(--edge)}
.hsec.tint{background:var(--paper-2, oklch(0.975 0.004 264));max-width:none;margin:0}
.hsec.tint > .inr{max-width:82rem;margin-inline:auto;padding-inline:var(--edge)}
.h-eyebrow{font-size:clamp(0.74rem, 0.66rem + 0.24vw, 0.92rem);letter-spacing:0.26em;text-transform:uppercase;font-weight:500;color:var(--ink-soft)}
.intro-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(2rem,1rem + 4vw,6rem);margin-top:1.6rem;align-items:start}
@media(max-width:840px){.intro-grid{grid-template-columns:1fr;gap:1.8rem}}
/* intro section with a full-height image bleeding to the right edge */
.intro-sec{max-width:100rem;margin-inline:auto;padding:clamp(4rem,3rem + 4vw,8.5rem) 0 clamp(4rem,3rem + 4vw,8.5rem) var(--edge);display:grid;grid-template-columns:1fr clamp(16rem,24vw,27rem);align-items:stretch;gap:clamp(2rem,3vw,4.5rem)}
.intro-main{padding:0;min-width:0}
.intro-media{position:relative;overflow:hidden;background:var(--paper-2);min-height:clamp(22rem,38vw,38rem)}
.intro-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
@media(max-width:840px){
  .intro-sec{grid-template-columns:1fr;gap:clamp(2rem,5vw,3rem);padding-inline-end:var(--edge)}
  .intro-main{padding:0}
  .intro-media{min-height:clamp(15rem,52vw,22rem);margin-inline-end:calc(-1 * var(--edge))}
}
/* partner logo marquee (scrolls right → left) */
.partners{margin-top:clamp(2rem,1.4rem + 2vw,3.4rem);border-top:1px solid var(--line);padding-top:clamp(1.3rem,1rem + 1.4vw,2rem)}
.partners-lbl{display:block;font-size:clamp(0.74rem, 0.66rem + 0.24vw, 0.92rem);letter-spacing:0.26em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;margin-bottom:clamp(1rem,1.4vw,1.5rem)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;gap:clamp(2.6rem,1.5rem + 3vw,5.5rem);width:max-content;animation:marq 40s linear infinite}
.marquee-track img{height:clamp(1.8rem,1.3rem + 1.3vw,2.6rem);width:auto;flex:0 0 auto;object-fit:contain;opacity:.42;filter:grayscale(1) contrast(.9);transition:opacity .4s var(--ease),filter .4s var(--ease)}
.marquee-track img:hover{opacity:.9;filter:none}
.partners:hover .marquee-track{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}
.intro-lead{font-size:clamp(1.7rem,1rem + 2.8vw,3.3rem);font-weight:300;line-height:1.14;letter-spacing:-0.015em;max-width:20ch}
.intro-lead em{font-family:var(--fs);font-style:italic}
.intro-lead .lnm{display:block;overflow:hidden}
.intro-lead .lnm>span{display:block;transform:translateY(115%);transition:transform 1.15s cubic-bezier(.16,1,.3,1)}
.hsec.in .intro-lead .lnm>span{transform:none}
.hsec.in .intro-lead .lnm:nth-child(2)>span{transition-delay:.08s}
.hsec.in .intro-lead .lnm:nth-child(3)>span{transition-delay:.16s}
.intro-body{display:flex;flex-direction:column;gap:1.1rem;color:var(--ink-soft);font-size:1.06rem;max-width:46ch;padding-top:.5rem}
.intro-body a{color:var(--navy);border-bottom:1px solid var(--line)}
.metarow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,1rem + 2vw,3rem);margin-top:clamp(2.5rem,1.5rem + 3vw,4rem)}
@media(max-width:560px){.metarow{grid-template-columns:1fr;gap:1.4rem}}
.metarow .k{font-size:clamp(0.74rem, 0.66rem + 0.24vw, 0.92rem);letter-spacing:0.26em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
.metarow .v{font-family:var(--fs);font-weight:300;font-size:clamp(2rem,1.5rem + 1.6vw,3rem);color:var(--navy);margin-top:.5rem;line-height:1}

/* Services — pinned scroll-stepper: meta card + image (left), tabs + items (right) */
.svc-outer{position:relative;height:360svh}
.svc-sticky{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;justify-content:center}
.svc-sec{max-width:100rem;width:100%;margin-inline:auto;padding-inline-start:var(--edge);padding-inline-end:0}
.svc-eyebrow{display:block;margin-bottom:clamp(1.4rem,2.5vw,2.4rem)}
.svc-grid{display:grid;grid-template-columns:minmax(0,0.84fr) minmax(0,1.16fr);gap:clamp(2rem,4vw,5rem);align-items:start}
.svc-left{display:flex;flex-direction:column;gap:clamp(1.4rem,2.4vw,2.2rem)}
.svc-card{position:relative;min-height:clamp(13rem,20vw,17rem)}
.svc-meta{position:absolute;left:0;right:0;top:0;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s .6s}
.svc-meta.is-active{position:relative;left:auto;right:auto;top:auto;opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease) .05s,transform .7s var(--ease) .05s}
.svc-no{font-family:var(--fs);font-weight:300;font-size:clamp(3rem,2rem + 3.5vw,5.5rem);line-height:.78;color:var(--navy);display:block}
.svc-pt{font-size:clamp(1.35rem,1rem + 1.4vw,2rem);font-weight:400;letter-spacing:-0.02em;line-height:1.12;margin-top:clamp(0.9rem,1.6vw,1.4rem);color:var(--navy);max-width:16ch}
.svc-pl{font-size:.98rem;color:var(--ink-soft);line-height:1.55;margin-top:.85rem;max-width:40ch}
.svc-img{position:relative;margin-top:clamp(0.6rem,1.2vh,1.4rem);height:clamp(13rem,26vh,22rem);overflow:hidden;background:var(--paper-2)}
.svc-frame{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s .6s}
.svc-frame.is-active{opacity:1;visibility:visible;transition:opacity .7s var(--ease)}
.svc-img img{width:100%;height:100%;object-fit:cover}
.svc-right{display:flex;flex-direction:column;gap:clamp(1.5rem,2.5vw,2.4rem)}
.svc-tabs{position:relative;margin-bottom:clamp(1.5rem,2.5vw,2.4rem);background:oklch(0.963 0.005 264);display:grid;grid-template-columns:repeat(4,1fr);padding:clamp(1rem,1.5vw,1.6rem) clamp(0.4rem,0.8vw,0.9rem) clamp(1.4rem,1.9vw,2.1rem)}
.svc-tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:clamp(.8rem,1.4vw,1.2rem);background:none;border:none;cursor:pointer;padding:clamp(0.7rem,1.2vw,1.1rem) .4rem 0;color:var(--ink-soft);transition:color .4s var(--ease)}
.svc-tab .lbl{font-size:clamp(.72rem,0.6rem + 0.4vw,.92rem);letter-spacing:.12em;text-transform:uppercase;font-weight:500;text-align:center;line-height:1.35;min-height:2.5em;display:flex;align-items:flex-start;justify-content:center}
.svc-tab .pip{width:13px;height:13px;border-radius:50%;border:1.5px solid oklch(0.62 0.03 264);position:relative;z-index:2;background:oklch(0.963 0.005 264);transition:border-color .4s var(--ease)}
.svc-tab .pip::after{content:"";position:absolute;inset:2.5px;border-radius:50%;background:var(--navy);transform:scale(0);transition:transform .4s var(--ease)}
.svc-tab:hover{color:var(--navy)}
.svc-tab.is-active{color:var(--navy)}
.svc-tab.is-active .pip{border-color:var(--navy)}
.svc-tab.is-active .pip::after{transform:scale(1)}
/* progress bar connecting the pips, fills left → right */
.svc-track{position:absolute;left:12.5%;right:12.5%;bottom:calc(clamp(1.4rem,1.9vw,2.1rem) + 6px);height:2px;background:var(--line);z-index:1;transform:translateY(50%)}
.svc-fill{height:100%;width:100%;background:var(--navy);transform-origin:left;transform:scaleX(0);transition:transform .6s var(--ease)}
.svc-stack{position:relative;min-height:clamp(11rem,18vw,15rem)}
.svc-items{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s .6s}
.svc-items.is-active{position:relative;opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease) .08s,transform .7s var(--ease) .08s}
.svc-items li{display:block;padding:0 clamp(1rem,1.8vw,2rem)}
.svc-items li:first-child{padding-inline-start:0}
.svc-ic{display:block;color:var(--navy);line-height:0;margin-bottom:clamp(0.9rem,1.5vw,1.5rem)}
.svc-ic svg{width:clamp(1.8rem,1.4rem + 1vw,2.4rem);height:clamp(1.8rem,1.4rem + 1vw,2.4rem);stroke:var(--navy);fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.svc-items h4{font-size:clamp(0.95rem,0.85rem + 0.4vw,1.15rem);font-weight:600;color:var(--navy);line-height:1.2}
.svc-items p{font-size:.85rem;color:var(--ink-soft);line-height:1.5;margin-top:.4rem}
@media(max-width:920px){
  .svc-outer{height:auto}
  .svc-sticky{position:static;min-height:0;display:block}
  .svc-sec{padding-inline-end:var(--edge)}
  .svc-grid{grid-template-columns:1fr;gap:clamp(2rem,4vw,3rem)}
  .svc-card{min-height:0}
  .svc-items{grid-auto-flow:row;grid-auto-columns:auto}
  .svc-items li{padding:clamp(0.9rem,3vw,1.3rem) 0}
  .svc-items li:first-child{padding-top:0}
  .svc-meta{position:absolute}.svc-meta.is-active{position:relative}
  .svc-stack{min-height:0}
  .svc-tab .no{writing-mode:horizontal-tb}
}
@media(max-width:560px){.svc-tab .lbl{font-size:.56rem}.svc-tab .no{display:none}.svc-items p{max-width:none}}
.fwork{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,0.5rem + 1.4vw,2rem);margin-top:1.8rem}
@media(max-width:840px){.fwork{grid-template-columns:1fr}}
.fwork .fr{overflow:hidden;aspect-ratio:4/3}
.fwork .fr img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.fwork a:hover .fr img{transform:scale(1.06)}
.fwork .cap{padding-top:.8rem;font-weight:600}
.fwork .cap span{display:block;font-weight:400;color:var(--ink-soft);font-size:.85rem;margin-top:.2rem}
.hsec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1rem}
.hsec-head h2{font-size:clamp(1.7rem,1.1rem + 2vw,2.9rem);font-weight:400;letter-spacing:-0.015em}
/* References — rotating SVG globe with clickable project pins */
.refs{position:relative;overflow:hidden;height:84svh;min-height:560px;max-width:100rem;margin-inline:auto;padding:clamp(1.2rem,3vh,2.6rem) var(--edge)}
.refs-top{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:flex-start;gap:2rem}
.refs-top h2{font-size:clamp(1.8rem,1rem + 2.6vw,3.4rem);font-weight:300;letter-spacing:-0.02em;color:var(--navy);line-height:1}
.refs-count{text-align:end;line-height:1.02}
.refs-count .n{font-family:var(--fs);font-weight:300;font-size:clamp(2.4rem,1.5rem + 3vw,4.5rem);color:var(--navy);display:block}
.refs-count em{font-style:normal;font-size:clamp(1rem,0.8rem + 0.6vw,1.5rem);color:var(--ink-soft);font-weight:300}
.refs-globe{position:absolute;inset:0;z-index:1;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 86%);mask-image:linear-gradient(180deg,#000 60%,transparent 86%)}
.refs-globe svg{width:100%;height:100%;display:block;cursor:grab;overflow:visible}
.refs-globe svg:active{cursor:grabbing}
.g-halo{fill:none;stroke:oklch(0.88 0.008 264);stroke-width:1}
.g-sphere{fill:url(#gsph)}
.g-grat{fill:none;stroke:oklch(0.86 0.008 264);stroke-width:.4}
.g-land{fill:oklch(0.99 0.001 264);stroke:oklch(0.78 0.012 264);stroke-width:.5;filter:drop-shadow(0 2px 3px oklch(0.3 0.04 264 / .16))}
.g-dot{fill:oklch(0.55 0.1 58);opacity:.35}
.g-pin{fill:oklch(0.5 0.12 58);transition:fill .35s var(--ease)}
.g-pinwrap:hover .g-pin{fill:var(--navy)}
.g-pin.is-active{fill:var(--navy)}
.g-ring{fill:none;stroke:var(--navy);stroke-width:1.4;opacity:0;transition:opacity .35s}
.g-pinwrap.is-active .g-ring{opacity:.5}
.refs-detail{position:absolute;left:var(--edge);right:var(--edge);bottom:clamp(1.5rem,3.5vh,3.4rem);z-index:3;display:grid;grid-template-columns:1fr 0.78fr;gap:clamp(2rem,4vw,4.5rem);align-items:end}
.refs-info{padding-bottom:clamp(0.5rem,1.5vw,1.5rem)}
.refs-title{font-size:clamp(1.9rem,1rem + 2.8vw,3.4rem);font-weight:300;letter-spacing:-0.02em;color:var(--navy);line-height:1.04}
.refs-loc{font-size:.92rem;color:var(--ink-soft);margin-top:.5rem;letter-spacing:.03em}
.refs-stats{display:flex;margin-top:clamp(1.4rem,2.5vw,2.2rem)}
.refs-stats>div{padding-inline-end:clamp(1.4rem,3vw,3rem)}
.refs-stats>div + div{border-inline-start:1px solid var(--line);padding-inline-start:clamp(1.4rem,3vw,3rem)}
.refs-stats .rk{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
.refs-stats .rv{font-family:var(--fs);font-weight:300;font-size:clamp(1.3rem,1rem + 1vw,2rem);color:var(--navy);margin-top:.35rem;line-height:1}
.refs-desc{font-size:.98rem;color:var(--ink-soft);line-height:1.55;margin-top:clamp(1.2rem,2vw,1.8rem);max-width:44ch}
.refs-cta{display:inline-flex;align-items:center;gap:1rem;margin-top:clamp(1.3rem,2.4vw,1.9rem);padding:.85rem 1.6rem;border:1px solid var(--navy);color:var(--navy);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;transition:background .4s var(--ease),color .4s var(--ease)}
.refs-cta:hover{background:var(--navy);color:#fff}
.refs-cta span{transition:transform .4s var(--ease)}
.refs-cta:hover span{transform:translateX(5px)}
.refs-media{position:relative}
.refs-media img{width:100%;height:clamp(11rem,30vh,19rem);object-fit:cover;display:block;background:var(--paper-2);transition:opacity .35s var(--ease)}
.refs-nav{display:flex;align-items:center;justify-content:space-between;background:var(--navy);color:#fff;padding:clamp(0.4rem,0.7vw,0.7rem) clamp(0.8rem,1.3vw,1.4rem)}
.refs-arrow{background:none;border:none;color:#fff;cursor:pointer;display:grid;place-items:center;padding:.5rem .7rem;opacity:.8;transition:opacity .3s}
.refs-arrow:hover{opacity:1}
.refs-arrow svg{width:1.35rem;height:1.35rem}
.refs-counter{font-size:.76rem;letter-spacing:.2em;color:oklch(0.82 0.03 264);font-variant-numeric:tabular-nums}
@media(max-width:820px){
  .refs-globe{height:clamp(17rem,64vw,24rem)}
  .refs-detail{grid-template-columns:1fr;gap:1.8rem;margin-top:0}
}
.hsec [data-r]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform 1.05s var(--ease)}
.hsec.in [data-r]{opacity:1;transform:none}
.hsec.in [data-r]:nth-child(2){transition-delay:.06s}.hsec.in [data-r]:nth-child(3){transition-delay:.12s}.hsec.in [data-r]:nth-child(4){transition-delay:.18s}

/* reusable inline logo markup */
.logo path{fill:currentColor}


/* Mobile homepage UX fixes — 2026-08-24 */
@media (max-width: 820px) {
  /* Mobile uses a true overlay instead of compressing the page into a sliver. */
  .menu-panel {
    z-index: 80;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform .55s var(--ease), visibility 0s .55s;
  }
  body.menu-open .menu-panel {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform .55s var(--ease), visibility 0s;
  }
  body.menu-open .page {
    inset: 0;
    transform: none;
    border-radius: 0;
    box-shadow: none;
  }
  .menu-inner { width: 100%; }
  .menu-x { z-index: 82; }
  .admin-bar .menu-x { top: calc(46px + 1rem); }
}

@media (max-width: 640px) {
  /* Centre the hero copy and allow natural vertical page flow below it. */
  .hero { min-height: 82svh; touch-action: pan-y; }
  .hslide-in {
    justify-content: center;
    padding: 5.5rem var(--edge) 4rem;
    gap: 1rem;
  }
  .dots { bottom: 1.25rem; }

  /* Hero topic/product cards form a horizontal, touch-friendly snap rail. */
  .panel.on {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .panel.on::-webkit-scrollbar { display: none; }
  .panel.on > .cell {
    flex: 0 0 84vw;
    width: 84vw;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border-top: 0;
    border-inline-start: 1px solid var(--line);
  }
  .panel.on > .cell:first-child { border-inline-start: 0; }

  /* Keep the three company figures in one clear row. */
  .metarow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
  }
  .metarow > div + div {
    border-inline-start: 1px solid var(--line);
    padding-inline-start: .65rem;
  }
  .metarow .k {
    font-size: .56rem;
    letter-spacing: .12em;
  }
  .metarow .v {
    font-size: clamp(1.45rem, 7vw, 2rem);
    margin-top: .35rem;
  }
  

  /* Services stay compact and keep a stable height while tabs change. */
  .svc-card { min-height: 12rem; }
  .svc-stack { min-height: 26rem; }
  .svc-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
  }
  .svc-items li,
  .svc-items li:first-child {
    padding: .9rem .7rem;
    border-top: 1px solid var(--line);
  }
  .svc-items li:nth-child(odd) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
  .svc-items li:nth-child(even) {
    border-inline-start: 1px solid var(--line);
  }
  .svc-items li:nth-child(-n+2) { border-top: 0; }
  .svc-items p { font-size: .76rem; line-height: 1.4; }
  .svc-items h4 { font-size: .88rem; }
}

/* Mobile hero lower-third and compositing refinements — 2026-08-24 */
@media (max-width: 640px) {
  .hslide,
  .hslide .bg,
  .hslide .bg img {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .hslide { will-change: transform; contain: paint; }
  .hslide .bg img { will-change: transform; }

  /* The world summary stays fixed in the hero lower third; only the three cards swipe. */
  .hslide-in {
    justify-content: center;
    padding-bottom: calc(30svh + 1.5rem);
  }
  .panel.on > .rail.feature {
    position: absolute;
    inset: auto 0 100%;
    z-index: 7;
    width: 100%;
    height: 30svh;
    min-height: 14rem;
    max-height: 17rem;
    flex: none;
    scroll-snap-align: none;
    border: 0;
    padding: 1.15rem var(--edge);
    overflow: hidden;
  }
  .panel.on > .rail.feature .serif {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }
  .panel.on > .rail.feature .cta-big {
    padding-block: .7rem;
  }
}

@media (max-width: 640px) {
  /* The original feature card is only a content source; the host stays fixed in the hero. */
  .panel.on > .rail.feature { display: none; }
  .mobile-feature-host {
    display: flex;
    position: absolute;
    inset: auto 0 0;
    z-index: 7;
    width: 100%;
    height: 30svh;
    min-height: 14rem;
    max-height: 17rem;
    padding: 1.15rem var(--edge);
    overflow: hidden;
    background: var(--navy);
  }
  .mobile-feature-host .serif {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }
  .mobile-feature-host .cta-big {
    padding-block: .7rem;
  }
}


@media (max-width: 640px) {
  .hero .mobile-feature-host {
    position: absolute;
    inset: auto 0 0;
  }
}


/* Mobile hero reference layout: transparent lower-third over image */
@media (max-width: 640px) {
  .hero {
    min-height: 100svh;
    height: 100svh;
  }

  .hero .hslide-in {
    min-height: 100svh;
    justify-content: center;
    align-items: flex-start;
    padding: 5.75rem var(--edge) 10.5rem;
  }

  .hero .hcopy {
    width: 100%;
    max-width: none;
    margin: 0;
    text-align: left;
  }

  .hero .hcopy .eyebrow {
    justify-content: flex-start;
  }

  .hero .hcopy h1,
  .hero .hcopy h2 {
    max-width: 100%;
    margin-inline: 0;
    text-align: left;
  }

  .hero .mobile-feature-host {
    position: absolute;
    inset: auto var(--edge) clamp(2.25rem, 5svh, 3.25rem) auto;
    z-index: 8;
    width: min(43vw, 11rem);
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    overflow: visible;
    background: transparent;
    color: #fff;
    box-shadow: none;
    border: 0;
  }

  .hero .mobile-feature-host .k-label,
  .hero .mobile-feature-host .serif,
  .hero .mobile-feature-host .rsub {
    color: #fff;
    text-align: left;
  }

  .hero .mobile-feature-host .k-label {
    margin: 0;
    font-size: .72rem;
    line-height: 1.2;
    letter-spacing: .02em;
  }

  .hero .mobile-feature-host .serif {
    margin: .15rem 0 .3rem;
    font-size: clamp(3.4rem, 16vw, 4.75rem);
    font-weight: 400;
    line-height: .86;
    letter-spacing: -.055em;
  }

  .hero .mobile-feature-host .rsub {
    max-width: 10rem;
    margin: 0;
    font-size: .72rem;
    line-height: 1.25;
    letter-spacing: .02em;
    text-transform: uppercase;
  }

  .hero .mobile-feature-host .cta-big {
    display: none !important;
  }

  .hero .dots {
    bottom: 1.5rem;
  }

  .panel.on > .rail.feature {
    display: none;
  }

  

  
}


@media (max-width: 640px) and (min-width: 783px) {
  body.admin-bar .hero,
  body.admin-bar .hero .hslide-in {
    height: calc(100svh - 32px);
    min-height: calc(100svh - 32px);
  }
}


/* Mobile first viewport: hero plus all three segment cards */
@media (max-width: 640px) {
  .hero,
  .hero .hslide-in {
    height: 68svh;
    min-height: 68svh;
  }

  body.admin-bar .hero,
  body.admin-bar .hero .hslide-in {
    height: calc(68svh - 46px);
    min-height: calc(68svh - 46px);
  }

  .hero .hslide-in {
    padding: 5rem var(--edge) 8.5rem;
  }

  .hero .mobile-feature-host {
    bottom: 1.35rem;
  }

  .panel.p-segments.on {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .55rem !important;
    width: 100% !important;
    padding: .8rem .65rem 1rem !important;
    overflow: visible !important;
    background: #fff;
    scroll-snap-type: none !important;
  }

  .panel.p-segments.on > .cell {
    display: flex !important;
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    scroll-snap-align: none !important;
  }

  .panel.p-segments.on > .cell img {
    width: 100% !important;
    aspect-ratio: 1 / 1.04;
    object-fit: cover;
  }

  

  .panel.p-segments.on > .rail.feature {
    display: none !important;
  }
}


/* Segment labels overlay their corresponding images on desktop and mobile */
.panel.p-segments > .cell {
  position: relative;
  overflow: hidden;
}

.panel.p-segments > .cell::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(5, 12, 30, .68), rgba(5, 12, 30, 0));
}

.panel.p-segments > .cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


@media (min-width: 641px) {
  .panel.p-segments > .cell {
    height: 100%;
  }
}

@media (max-width: 640px) {
  .panel.p-segments.on > .cell {
    height: clamp(9.25rem, 23svh, 11.5rem);
  }

  .panel.p-segments.on > .cell img {
    height: 100% !important;
    aspect-ratio: auto;
  }

  
}


/* Definitive segment-card overlay fix */
.panel.p-segments > a.cell {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  padding: 0 !important;
}


/* Correct markup: .cimg + .seg-cap */
.panel.p-segments > a.cell > .cimg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}


/* Final card order: label above image, never inside or below */
.panel.p-segments > a.cell {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: #fff !important;
}

.panel.p-segments > a.cell::after {
  display: none !important;
  content: none !important;
}

.panel.p-segments > a.cell > .seg-cap {
  position: relative !important;
  z-index: 2 !important;
  left: clamp(.85rem, 1.5vw, 1.5rem) !important;
  right: .75rem !important;
  bottom: clamp(.8rem, 1.35vw, 1.25rem) !important;
  width: 100% !important;
  min-height: 3.5rem !important;
  padding: .85rem clamp(.7rem, 1.25vw, 1.2rem) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: .7rem !important;
  color: var(--navy, #101a3d) !important;
  background: #fff !important;
  transform: none !important;
  inset: auto !important;
  order: 1 !important;
  flex: 0 0 auto !important;
  text-shadow: none !important;
}

.panel.p-segments > a.cell > .seg-cap, .panel.p-segments > a.cell > .seg-cap * {
  color: var(--navy, #101a3d) !important;
  border-color: var(--navy, #101a3d) !important;
}

.panel.p-segments > a.cell > .cimg {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  order: 2 !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.panel.p-segments > a.cell > .cimg img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: static !important;
}

/* Restore original card spacing and sizing; only swap caption/image order */
@media (min-width: 641px) {
  .panel.p-segments > a.cell {
    box-sizing: border-box !important;
    height: 100% !important;
    padding: clamp(1rem, 1.25vw, 1.5rem) !important;
    gap: clamp(.65rem, .8vw, .9rem) !important;
    background: #fff !important;
  }

  .panel.p-segments > a.cell > .seg-cap {
    order: 1 !important;
    min-height: 2.5rem !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .panel.p-segments > a.cell > .cimg {
    order: 2 !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

@media (max-width: 640px) {
  

  

  

  .panel.p-segments.on > a.cell > .cimg {
    order: 2 !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }
}


/* Mobile concept: hero info strip + horizontal field scroller */
@media (max-width: 640px) {
  .hero,
  .hero .hslide-in {
    height: 84svh;
    min-height: 84svh;
  }

  body.admin-bar .hero,
  body.admin-bar .hero .hslide-in {
    height: calc(84svh - 46px);
    min-height: calc(84svh - 46px);
  }

  .hero .hslide-in {
    padding: 5rem var(--edge) 11.5rem;
  }

  .hero .mobile-feature-host {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 9;
    width: 100%;
    min-height: 8.6rem;
    padding: 1.25rem var(--edge);
    display: grid;
    grid-template-columns: .8fr 1fr 1.45fr;
    column-gap: .85rem;
    align-items: center;
    background: rgba(8, 9, 14, .76);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: #fff;
  }

  .hero .mobile-feature-host::before {
    content: "01 / 03";
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
    padding-bottom: 1.65rem;
    border-bottom: 1px solid rgba(255,255,255,.42);
    font-size: .72rem;
    line-height: 1;
    letter-spacing: .06em;
  }

  .hero .mobile-feature-host .k-label {
    grid-column: 2;
    grid-row: 1;
    font-size: .62rem;
    letter-spacing: .1em;
  }

  .hero .mobile-feature-host .serif {
    grid-column: 2;
    grid-row: 2 / span 2;
    margin: .15rem 0 0;
    font-size: clamp(2.65rem, 13vw, 3.65rem);
    line-height: .86;
  }

  .hero .mobile-feature-host .rsub {
    grid-column: 3;
    grid-row: 1 / span 3;
    max-width: 9rem;
    font-size: .68rem;
    line-height: 1.35;
    text-transform: none;
  }

  .hero .mobile-feature-host .cta-big {
    display: none !important;
  }

  .panel.p-segments.on {
    position: relative;
    display: flex !important;
    grid-template-columns: none !important;
    gap: 1rem !important;
    width: 100% !important;
    padding: 5rem var(--edge) 4.25rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: var(--edge);
    -webkit-overflow-scrolling: touch;
    background: #f7f5f1;
    scrollbar-width: none;
  }

  .panel.p-segments.on::-webkit-scrollbar {
    display: none;
  }

  .panel.p-segments.on::before {
    content: "VALDKONNAD";
    position: absolute;
    top: 1.7rem;
    left: var(--edge);
    color: var(--navy, #101a3d);
    font-size: .72rem;
    line-height: 1;
    letter-spacing: .16em;
  }

  .panel.p-segments.on > a.cell {
    position: relative !important;
    display: block !important;
    flex: 0 0 72vw !important;
    width: 72vw !important;
    max-width: 19rem !important;
    height: min(54svh, 28rem) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    scroll-snap-align: start !important;
    background: #ddd !important;
    border-radius: 0 !important;
  }

  .panel.p-segments.on > a.cell > .cimg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .panel.p-segments.on > a.cell > .cimg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .panel.p-segments.on > a.cell::after {
    content: "";
    display: block !important;
    position: absolute;
    z-index: 2;
    inset: auto 0 0;
    height: 42%;
    background: linear-gradient(to top, rgba(8, 9, 14, .6), transparent);
    pointer-events: none;
  }

  .panel.p-segments.on > a.cell > .seg-cap {
    position: absolute !important;
    z-index: 3 !important;
    inset: auto .9rem 1rem .9rem !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    color: #fff !important;
    background: transparent !important;
  }

  .panel.p-segments.on > a.cell > .seg-cap,
  .panel.p-segments.on > a.cell > .seg-cap * {
    color: #fff !important;
    border-color: #fff !important;
  }

  .panel.p-segments.on > a.cell > .seg-cap .seg-name {
    max-width: 10rem;
    font-size: .82rem !important;
    line-height: 1.25 !important;
    letter-spacing: .06em !important;
  }

  .panel.p-segments.on > .rail.feature {
    display: none !important;
  }
}


/* Mobile: remove the extra statistics strip entirely */
@media (max-width: 640px) {
  .hero .mobile-feature-host,
  .panel.p-segments.on > .rail.feature {
    display: none !important;
  }

  .hero .hslide-in {
    padding-bottom: 5rem;
  }
}


/* Mobile: bring fields higher and show horizontal-scroll pagination */
@media (max-width: 640px) {
  .hero,
  .hero .hslide-in {
    height: 76svh;
    min-height: 76svh;
  }

  body.admin-bar .hero,
  body.admin-bar .hero .hslide-in {
    height: calc(76svh - 46px);
    min-height: calc(76svh - 46px);
  }

  .panel.p-segments.on {
    padding-top: 4.15rem !important;
    padding-bottom: 4.25rem !important;
    background-color: #f7f5f1 !important;
    background-image:
      radial-gradient(circle, #111 0 4px, transparent 4.5px),
      radial-gradient(circle, #c9c9c9 0 4px, transparent 4.5px),
      radial-gradient(circle, #c9c9c9 0 4px, transparent 4.5px) !important;
    background-repeat: no-repeat !important;
    background-size: 9px 9px, 9px 9px, 9px 9px !important;
    background-position:
      calc(50% - 18px) calc(100% - 1.45rem),
      50% calc(100% - 1.45rem),
      calc(50% + 18px) calc(100% - 1.45rem) !important;
  }

  .panel.p-segments.on::before {
    top: 1.45rem;
  }
}


@media (max-width: 640px) {
  .panel.p-segments.on > a.cell > .seg-cap {
  left: .45rem !important;
  right: .25rem !important;
  bottom: .5rem !important;
  gap: .55rem !important;
  min-height: 2.25rem !important;
  padding: .35rem .15rem 0 !important;
  order: 1 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

  .panel.p-segments.on > a.cell > .seg-cap .go {
    flex: 0 0 auto;
    color: #fff !important;
    border-color: #fff !important;
    filter: brightness(0) invert(1);
    transform: none !important;
  }

  .panel.p-segments.on > a.cell > .seg-cap .seg-name {
  font-size: clamp(.44rem, 1.9vw, .6rem) !important;
  line-height: 1.12 !important;
  letter-spacing: .02em !important;
  display: flex;
  align-items: center;
  margin: 0 !important;
  color: #fff !important;
}
}


/* Subtle top-to-bottom hero gradient for header legibility */
.hero::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0 0 auto;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, .48) 0%,
    rgba(0, 0, 0, .2) 48%,
    rgba(0, 0, 0, 0) 100%
  );
}


@media (max-width: 640px) {
  .hero,
  .hero .hslide-in {
    height: 56svh;
    min-height: 56svh;
  }

  body.admin-bar .hero, body.admin-bar .hero .hslide-in {
  height: calc(56svh - 46px);
  min-height: calc(56svh - 46px);
}

  .hero .hslide-in {
    padding-top: 4.5rem;
    padding-bottom: 2.5rem;
  }

  .hero .hcopy h1,
  .hero .hcopy h2 {
    font-size: clamp(1.8rem, 8.5vw, 2.65rem);
    line-height: 1.05;
  }
}


@media (max-width: 640px) {
  

  .panel.p-segments.on::before {
    top: 1.25rem;
  }

  .panel.p-segments.on > a.cell {
  height: min(38svh, 19.5rem) !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  gap: .4rem !important;
  background: #fff !important;
}

  .panel.p-segments.on {
  gap: .55rem !important;
  padding: .8rem .65rem 1rem !important;
  background-color: #fff !important;
  padding-top: 3.65rem !important;
  padding-bottom: 3.5rem !important;
  background-position: calc(50% - 18px) calc(100% - 1.15rem),
      50% calc(100% - 1.15rem),
      calc(50% + 18px) calc(100% - 1.15rem) !important;
}
}


/* Mobile products: match the Fields scroller styling */
@media (max-width: 640px) {
  .panel.p-products.on {
    position: relative;
    display: flex !important;
    gap: 1rem !important;
    width: 100% !important;
    padding: 3.65rem var(--edge) 3.5rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: var(--edge);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background-color: #fff !important;
    background-image:
      radial-gradient(circle, #111 0 4px, transparent 4.5px),
      radial-gradient(circle, #c9c9c9 0 4px, transparent 4.5px),
      radial-gradient(circle, #c9c9c9 0 4px, transparent 4.5px) !important;
    background-repeat: no-repeat !important;
    background-size: 9px 9px, 9px 9px, 9px 9px !important;
    background-position:
      calc(50% - 18px) calc(100% - 1.15rem),
      50% calc(100% - 1.15rem),
      calc(50% + 18px) calc(100% - 1.15rem) !important;
  }

  .panel.p-products.on::-webkit-scrollbar {
    display: none;
  }

  .panel.p-products.on::before {
    content: "TOOTED";
    position: absolute;
    top: 1.25rem;
    left: var(--edge);
    color: var(--navy, #101a3d);
    font-size: .72rem;
    line-height: 1;
    letter-spacing: .16em;
  }

  .panel.p-products.on > a.cell {
    position: relative !important;
    display: block !important;
    flex: 0 0 72vw !important;
    width: 72vw !important;
    max-width: 19rem !important;
    height: min(38svh, 19.5rem) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    scroll-snap-align: start !important;
    background: #ddd !important;
    border-radius: 0 !important;
  }

  .panel.p-products.on > a.cell::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: auto 0 0;
    height: 48%;
    pointer-events: none;
    background: linear-gradient(to top, rgba(8, 9, 14, .68), transparent);
  }

  .panel.p-products.on > a.cell > .cimg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }

  .panel.p-products.on > a.cell > .cimg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  

  

  

  

  

  .panel.p-products.on > a.cell .no {
    color: #fff !important;
  }

  .panel.p-products.on > .rail.feature {
    display: none !important;
  }
}


/* Mobile Standard Lab: compact, readable, image-free */
@media (max-width: 640px) {
  .panel.p-lab.on {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #fff !important;
  }

  .panel.p-lab.on > .cell.spot {
    display: none !important;
  }

  .panel.p-lab.on > .cell.spotxt {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 1.5rem var(--edge) 1.75rem !important;
    margin: 0 !important;
    background: #fff !important;
    color: var(--navy, #101a3d) !important;
  }

  .panel.p-lab.on > .cell.spotxt .k-label {
    margin: 0 0 .75rem !important;
    color: var(--navy, #101a3d) !important;
    font-size: .62rem !important;
    line-height: 1.2 !important;
    letter-spacing: .12em !important;
  }

  .panel.p-lab.on > .cell.spotxt .t {
    max-width: 34rem !important;
    margin: 0 !important;
    color: var(--navy, #101a3d) !important;
    font-size: clamp(1.25rem, 5.6vw, 1.65rem) !important;
    line-height: 1.12 !important;
  }

  .panel.p-lab.on > .cell.spotxt .ex {
    display: -webkit-box !important;
    max-width: 34rem !important;
    margin: .8rem 0 1rem !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: var(--navy, #101a3d) !important;
    font-size: .78rem !important;
    line-height: 1.4 !important;
  }

  .panel.p-lab.on > .cell.spotxt .hcta {
    align-self: flex-start !important;
    margin: 0 !important;
    color: var(--navy, #101a3d) !important;
  }

  .panel.p-lab.on > .rail.feature {
    display: none !important;
  }
}


/* Mobile hero controls: previous/next + 12 second progress */
@media (max-width: 640px) {
  .hero .s-btn {
    display: grid !important;
    place-items: center;
    position: absolute !important;
    z-index: 12 !important;
    bottom: 1rem !important;
    width: 2.35rem !important;
    height: 2.35rem !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    border-radius: 0 !important;
    background: rgba(0,0,0,.18) !important;
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  .hero .s-btn.prev {
    left: var(--edge) !important;
  }

  .hero .s-btn.next {
    right: var(--edge) !important;
  }

  .hero .s-btn svg,
  .hero .s-btn path {
    stroke: #fff !important;
    color: #fff !important;
  }

  .hero .dots {
    display: flex !important;
    position: absolute !important;
    z-index: 12 !important;
    left: 50% !important;
    right: auto !important;
    bottom: 2.08rem !important;
    width: calc(100% - 8.75rem) !important;
    height: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    background: rgba(255,255,255,.35) !important;
    overflow: hidden;
  }

  .hero .dots::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0 auto 0 0;
    width: 0;
    background: #fff;
    animation-duration: 12s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }

  .hero .dots:has(button:nth-child(1).on)::after {
    animation-name: hero-progress-1;
  }

  .hero .dots:has(button:nth-child(2).on)::after {
    animation-name: hero-progress-2;
  }

  .hero .dots:has(button:nth-child(3).on)::after {
    animation-name: hero-progress-3;
  }

  .hero .dots button {
    position: relative !important;
    z-index: 2 !important;
    flex: 1 1 33.333% !important;
    width: auto !important;
    height: 12px !important;
    margin: -5px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    opacity: 0 !important;
    cursor: pointer;
  }
}

@keyframes hero-progress-1 {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes hero-progress-2 {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes hero-progress-3 {
  from { width: 0; }
  to { width: 100%; }
}


@media (max-width: 640px) {
  .hero .s-nav {
    display: block !important;
    position: absolute !important;
    z-index: 50 !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
  }

  

  .hero .s-nav .s-btn svg,
  .hero .s-nav .s-btn img {
    display: none !important;
  }

  .hero .s-nav .s-btn::before {
    display: block;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1;
  }

  .hero .s-nav .s-btn.prev::before {
    content: "←";
  }

  .hero .s-nav .s-btn.next::before {
    content: "→";
  }

  
}


@media (max-width: 640px) {
  .hero .s-nav .s-btn {
  display: grid !important;
  z-index: 51 !important;
  pointer-events: auto !important;
  width: 2.35rem !important;
  height: 2.35rem !important;
  bottom: 1rem !important;
  border-radius: 50% !important;
}

  .hero .s-nav .s-btn.prev {
    left: auto !important;
    right: calc(var(--edge) + 2.75rem) !important;
  }

  .hero .s-nav .s-btn.next {
    left: auto !important;
    right: var(--edge) !important;
  }

  .hero .dots {
  z-index: 52 !important;
  left: var(--edge) !important;
  right: calc(var(--edge) + 6rem) !important;
  width: auto !important;
  transform: none !important;
}
}


/* Desktop hero controls: round arrows on right + 12s progress */
@media (min-width: 641px) {
  .hero .s-nav {
    display: block !important;
    position: absolute !important;
    z-index: 50 !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
  }

  .hero .s-nav .s-btn {
    display: grid !important;
    place-items: center;
    position: absolute !important;
    z-index: 51 !important;
    bottom: 1.5rem !important;
    width: 2.65rem !important;
    height: 2.65rem !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,.16) !important;
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  .hero .s-nav .s-btn.prev {
    left: auto !important;
    right: calc(var(--edge) + 3.1rem) !important;
  }

  .hero .s-nav .s-btn.next {
    left: auto !important;
    right: var(--edge) !important;
  }

  .hero .s-nav .s-btn svg,
  .hero .s-nav .s-btn img {
    display: none !important;
  }

  .hero .s-nav .s-btn::before {
    display: block;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1;
  }

  .hero .s-nav .s-btn.prev::before {
    content: "←";
  }

  .hero .s-nav .s-btn.next::before {
    content: "→";
  }

  .hero .dots {
    display: flex !important;
    position: absolute !important;
    z-index: 52 !important;
    left: var(--edge) !important;
    right: calc(var(--edge) + 7.25rem) !important;
    bottom: 2.78rem !important;
    width: auto !important;
    height: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    background: rgba(255,255,255,.35) !important;
    overflow: hidden;
  }

  .hero .dots::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0 auto 0 0;
    width: 0;
    background: #fff;
    animation-duration: 12s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }

  .hero .dots:has(button:nth-child(1).on)::after {
    animation-name: hero-progress-1;
  }

  .hero .dots:has(button:nth-child(2).on)::after {
    animation-name: hero-progress-2;
  }

  .hero .dots:has(button:nth-child(3).on)::after {
    animation-name: hero-progress-3;
  }

  .hero .dots button {
    position: relative !important;
    z-index: 2 !important;
    flex: 1 1 33.333% !important;
    width: auto !important;
    height: 12px !important;
    margin: -5px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    opacity: 0 !important;
  }
}


@media (min-width: 641px) {
  .hero .s-nav {
    top: 0 !important;
    bottom: auto !important;
    height: 66svh !important;
  }

  
}


/* Desktop rollback: restore the original dot navigation */
@media (min-width: 641px) {
  .hero .s-nav {
    display: none !important;
  }

  .hero .dots {
    display: flex !important;
    position: absolute !important;
    z-index: 12 !important;
    top: auto !important;
    left: 75% !important;
    right: auto !important;
    bottom: 4.75rem !important;
    width: auto !important;
    height: auto !important;
    gap: .75rem !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: translateX(-50%) !important;
    background: transparent !important;
  }

  .hero .dots::after {
    display: none !important;
    content: none !important;
    animation: none !important;
  }

  .hero .dots button {
    display: block !important;
    flex: 0 0 auto !important;
    width: .55rem !important;
    height: .55rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.9) !important;
    border-radius: 50% !important;
    background: transparent !important;
    opacity: 1 !important;
  }

  .hero .dots button.on {
    background: #fff !important;
  }
}


/* Mobile product categories: clean white version of the Fields scroller */
@media (max-width: 640px) {
  .panel.p-products.on::before {
    content: "KATEGOORIAD" !important;
  }

  .panel.p-products.on > a.cell {
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    color: var(--navy, #101a3d) !important;
  }

  .panel.p-products.on > a.cell::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }

  

  .panel.p-products.on > a.cell > .cimg {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    order: 2 !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .panel.p-products.on > a.cell > .cimg img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .panel.p-products.on > a.cell > .cimg .no {
    color: var(--navy, #101a3d) !important;
    background: rgba(255,255,255,.86) !important;
  }

  

  

  

  

  
}


@media (max-width: 640px) {
  

  .panel.p-products.on > a.cell > .cimg img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    transform: translateX(4%) scale(1.16) !important;
    transform-origin: center center !important;
  }
}


/* Mobile category artwork uploaded August 2026 */
@media (max-width: 640px) {
  /* 07.09: kolm kovakodeeritud taustapilti eemaldatud - vt faili lopus. */
}


@media (max-width: 640px) {
  .panel.p-products.on > a.cell .no {
    display: none !important;
  }

  

  

  

  

  

  

  

  

  
}


/* Desktop product categories use the same clean artwork and labels */
@media (min-width: 641px) {
  .panel.p-products.on > a.cell {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  .panel.p-products.on > a.cell > .k-label,
  .panel.p-products.on > a.cell .no,
  .panel.p-products.on > a.cell > .meta .t {
    display: none !important;
  }

  .panel.p-products.on > a.cell > .cimg {
    position: relative !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  /* 07.09: kolm kovakodeeritud taustapilti eemaldatud - vt faili lopus. */

  

  

  

  

  

  

  
}


/* Product-category arrow is a sibling of .meta: align it with the label */
.panel.p-products.on > a.cell {
  position: relative !important;
}


/* Mobile scroller headings are fixed background labels, not scrolling content */
@media (max-width: 640px) {
  .panel.p-segments.on::before,
  .panel.p-products.on::before {
    display: none !important;
    content: none !important;
  }

  .panel.p-segments.on {
    background-image:
      radial-gradient(circle, #111 0 4px, transparent 4.5px),
      radial-gradient(circle, #c9c9c9 0 4px, transparent 4.5px),
      radial-gradient(circle, #c9c9c9 0 4px, transparent 4.5px),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='22' viewBox='0 0 180 22'%3E%3Ctext x='0' y='14' fill='%23101a3d' font-family='Arial,sans-serif' font-size='11' letter-spacing='2.2'%3EVALDKONNAD%3C/text%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: 9px 9px, 9px 9px, 9px 9px, 180px 22px !important;
    background-position:
      calc(50% - 18px) calc(100% - 1.15rem),
      50% calc(100% - 1.15rem),
      calc(50% + 18px) calc(100% - 1.15rem),
      var(--edge) 1.25rem !important;
  }

  .panel.p-products.on {
    background-image:
      radial-gradient(circle, #111 0 4px, transparent 4.5px),
      radial-gradient(circle, #c9c9c9 0 4px, transparent 4.5px),
      radial-gradient(circle, #c9c9c9 0 4px, transparent 4.5px),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='22' viewBox='0 0 180 22'%3E%3Ctext x='0' y='14' fill='%23101a3d' font-family='Arial,sans-serif' font-size='11' letter-spacing='2.2'%3EKATEGOORIAD%3C/text%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: 9px 9px, 9px 9px, 9px 9px, 180px 22px !important;
    background-position:
      calc(50% - 18px) calc(100% - 1.15rem),
      50% calc(100% - 1.15rem),
      calc(50% + 18px) calc(100% - 1.15rem),
      var(--edge) 1.25rem !important;
  }
}


/* Match product category label placement to segment cards */
@media (min-width: 641px) {
  

  .panel.p-products.on > a.cell > .cimg {
    order: 2 !important;
  }

  
}

@media (max-width: 640px) {
  .panel.p-products.on > a.cell {
    position: relative !important;
    display: block !important;
  }

  .panel.p-products.on > a.cell > .cimg {
  position: absolute !important;
  overflow: hidden !important;
  isolation: isolate;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

  

  

  
}


/* Desktop interior composition based on the supplied reference */
@media (min-width: 641px) {
  .hero,
  .hero .hslide-in {
    height: 73svh;
    min-height: 73svh;
  }

  body.admin-bar .hero,
  body.admin-bar .hero .hslide-in {
    height: calc(73svh - 32px);
    min-height: calc(73svh - 32px);
  }

  .hero .hslide-in {
    padding: 7rem var(--edge) 9rem;
    justify-content: center;
  }

  .hero .hcopy {
    max-width: 58rem;
  }

  .hero .hcopy h1,
  .hero .hcopy h2 {
    max-width: 58rem;
    font-size: clamp(3.35rem, 4.35vw, 5.4rem);
    line-height: 1.02;
    letter-spacing: -.035em;
  }

  .panel.p-segments.on {
    position: relative !important;
    z-index: 20 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(1.25rem, 2vw, 2.25rem) !important;
    width: calc(100% - 8vw) !important;
    min-height: 25rem !important;
    margin: -4.75rem auto 0 !important;
    padding: 2rem clamp(1.5rem, 2.5vw, 2.75rem) 2.35rem !important;
    overflow: visible !important;
    background: #fff !important;
    border-radius: .45rem !important;
    box-shadow: 0 1.25rem 3.5rem rgba(8,12,24,.12) !important;
  }

  .panel.p-segments.on > a.cell {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    gap: .85rem !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  .panel.p-segments.on > a.cell > .seg-cap {
    order: 1 !important;
    min-height: 2rem !important;
    padding: 0 .2rem !important;
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
    color: var(--navy, #101a3d) !important;
    background: transparent !important;
  }

  .panel.p-segments.on > a.cell > .seg-cap,
  .panel.p-segments.on > a.cell > .seg-cap * {
    color: var(--navy, #101a3d) !important;
    border-color: var(--navy, #101a3d) !important;
  }

  .panel.p-segments.on > a.cell > .cimg {
    order: 2 !important;
    flex: 1 1 auto !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 18rem !important;
    overflow: hidden !important;
  }

  .panel.p-segments.on > a.cell > .cimg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .panel.p-segments.on > .rail.feature {
    display: flex !important;
    position: absolute !important;
    z-index: 22 !important;
    top: -14.5rem !important;
    right: 0 !important;
    width: clamp(14rem, 17vw, 18rem) !important;
    min-height: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    color: #fff !important;
    background: transparent !important;
  }

  .panel.p-segments.on > .rail.feature .k-label,
  .panel.p-segments.on > .rail.feature .serif,
  .panel.p-segments.on > .rail.feature .rsub {
    color: #fff !important;
  }

  .panel.p-segments.on > .rail.feature .serif {
    margin: .35rem 0 .5rem !important;
    font-size: clamp(3.4rem, 4.7vw, 5.25rem) !important;
    line-height: .88 !important;
  }

  .panel.p-segments.on > .rail.feature .rsub {
    max-width: 12rem !important;
    font-size: .78rem !important;
    line-height: 1.35 !important;
  }

  .panel.p-segments.on > .rail.feature .cta-big {
    display: flex !important;
    width: 100% !important;
    min-height: 3.75rem !important;
    margin-top: 1.25rem !important;
    padding: 0 1.25rem !important;
    justify-content: space-between !important;
    align-items: center !important;
    color: #fff !important;
    background: rgba(5,8,14,.82) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
  }

  .hero .dots {
    top: calc(73svh - 7rem) !important;
    left: var(--edge) !important;
    right: auto !important;
    bottom: auto !important;
    width: 12rem !important;
    height: 1px !important;
    gap: 0 !important;
    overflow: visible !important;
    transform: none !important;
    background: rgba(255,255,255,.45) !important;
  }

  .hero .dots::before {
    content: "01";
    position: absolute;
    right: calc(100% + .75rem);
    top: -.55rem;
    color: #fff;
    font-size: .72rem;
    letter-spacing: .06em;
  }

  .hero .dots::after {
    display: block !important;
    content: "03" !important;
    position: absolute !important;
    left: calc(100% + .75rem) !important;
    right: auto !important;
    top: -.55rem !important;
    width: auto !important;
    color: #fff !important;
    background: transparent !important;
    animation: none !important;
    font-size: .72rem;
    letter-spacing: .06em;
  }

  .hero .dots button {
    opacity: 0 !important;
    width: 33.333% !important;
    height: 12px !important;
    border: 0 !important;
    background: transparent !important;
  }
}


@media (min-width: 641px) {
  

  

  

  

  .panel.p-segments.on > .rail.feature > * {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
  }

  
}


@media (min-width: 641px) {
  

  

  


  

  .hero .mobile-feature-host {
    display: flex !important;
    position: absolute !important;
    z-index: 18 !important;
    inset: auto var(--edge) 5.2rem auto !important;
    width: clamp(14rem, 17vw, 18rem) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .2rem !important;
    overflow: visible !important;
    color: #fff !important;
    background: transparent !important;
    transform: none !important;
  }

  .hero .mobile-feature-host .k-label,
  .hero .mobile-feature-host .serif,
  .hero .mobile-feature-host .rsub {
    color: #fff !important;
  }

  .hero .mobile-feature-host .serif {
    margin: .35rem 0 .5rem !important;
    font-size: clamp(3.4rem, 4.7vw, 5.25rem) !important;
    line-height: .88 !important;
  }

  .hero .mobile-feature-host .rsub {
    max-width: 12rem !important;
    font-size: .78rem !important;
    line-height: 1.35 !important;
  }

  .hero .mobile-feature-host .cta-big {
    display: flex !important;
    width: 100% !important;
    min-height: 3.75rem !important;
    margin-top: 1.25rem !important;
    padding: 0 1.25rem !important;
    justify-content: space-between !important;
    align-items: center !important;
    color: #fff !important;
    background: rgba(5,8,14,.82) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
  }
}


@media (min-width: 641px) {
  

  

  

  .panel.p-segments.on > .rail.feature {
  inset: auto 0 auto auto !important;
  top: -15rem !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  justify-content: flex-start !important;
  transform: none !important;
  overflow: visible !important;
  display: flex !important;
  position: absolute !important;
  z-index: 100 !important;
  width: clamp(14rem, 17vw, 18rem) !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #fff !important;
  background: transparent !important;
}

  .panel.p-segments.on > .rail.feature .k-label,
  .panel.p-segments.on > .rail.feature .serif,
  .panel.p-segments.on > .rail.feature .rsub {
    display: block !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #fff !important;
    transform: none !important;
  }

  .panel.p-segments.on > .rail.feature .cta-big {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  display: flex !important;
  width: 100% !important;
  min-height: 3.75rem !important;
  margin-top: 1.25rem !important;
  opacity: 1 !important;
  visibility: visible !important;
}
}

@media (min-width: 641px) {
  .panel.p-segments.on > a.cell::before {
  position: absolute !important;
  z-index: 99 !important;
  top: 0 !important;
  left: 0 !important;
  color: var(--navy, #101a3d) !important;
  font-size: .68rem;
  line-height: 1;
  letter-spacing: .11em;
  white-space: nowrap;
  display: none !important;
  align-items: center !important;
  right: 0 !important;
  width: 100% !important;
  height: 3rem !important;
  padding: 0 .2rem !important;
  background: #fff !important;
  content: none !important;
}

  

  .hero .desktop-feature-host {
    display: flex !important;
    position: absolute !important;
    z-index: 30 !important;
    right: var(--edge) !important;
    bottom: 5.1rem !important;
    width: clamp(14rem, 17vw, 18rem) !important;
    height: auto !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    color: #fff !important;
    background: transparent !important;
  }

  .hero .desktop-feature-host[hidden] {
    display: none !important;
  }

  .hero .desktop-feature-host .k-label,
  .hero .desktop-feature-host .serif,
  .hero .desktop-feature-host .rsub {
    color: #fff !important;
  }

  .hero .desktop-feature-host .serif {
    margin: .35rem 0 .5rem !important;
    font-size: clamp(3.4rem, 4.7vw, 5.25rem) !important;
    line-height: .88 !important;
  }

  .hero .desktop-feature-host .rsub {
    max-width: 12rem !important;
    font-size: .78rem !important;
    line-height: 1.35 !important;
  }

  
}

@media (max-width: 640px) {
  .hero .desktop-feature-host,
  .desktop-card-label {
    display: none !important;
  }
}


@media (min-width: 641px) {
  /* Removed on review: this hid the Sisustus card labels completely.
     Three passes of the same selector had accumulated here and the last one won, so all three
     cards showed a photograph and no text at all while Tooted beside them labelled every card. */

  .panel.p-segments.on > a.cell > .seg-cap {
    display: flex !important;
    position: relative !important;
    inset: auto !important;
    z-index: 5 !important;
    order: 1 !important;
    flex: 0 0 3rem !important;
    width: 100% !important;
    height: 3rem !important;
    min-height: 3rem !important;
    padding: 0 .2rem !important;
    margin: 0 !important;
    align-items: center !important;
    gap: .75rem !important;
    color: var(--navy, #101a3d) !important;
    background: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .panel.p-segments.on > a.cell > .seg-cap,
  .panel.p-segments.on > a.cell > .seg-cap * {
    color: var(--navy, #101a3d) !important;
    border-color: var(--navy, #101a3d) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  

  .hero .desktop-feature-host .cta-big {
  display: flex !important;
  width: 100% !important;
  min-height: 3.75rem !important;
  margin-top: 1.25rem !important;
  padding: 0 1.25rem !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: #fff !important;
  background: var(--navy, #101a3d) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-color: var(--navy, #101a3d) !important;
}

  

  .hero .dots::before {
    display: block !important;
    content: "01" !important;
    position: absolute !important;
    right: calc(100% + .75rem) !important;
    top: -.55rem !important;
    color: #fff !important;
  }

  .hero .dots::after {
    display: block !important;
    content: "03" !important;
    position: absolute !important;
    left: calc(100% + .75rem) !important;
    top: -.55rem !important;
    width: auto !important;
    color: #fff !important;
    background: transparent !important;
    animation: none !important;
  }
}


@media (min-width: 641px) {
  .panel.p-segments.on > a.cell > .seg-cap .seg-name {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    color: var(--navy, #101a3d) !important;
    font-size: .68rem !important;
    line-height: 1.15 !important;
    letter-spacing: .1em !important;
    text-align: left !important;
    text-transform: uppercase !important;
  }

  .panel.p-segments.on > a.cell > .seg-cap .go {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    color: var(--navy, #101a3d) !important;
    border-color: var(--navy, #101a3d) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

@media (min-width: 641px) {
  .panel.p-segments.on {
    grid-template-rows: 3.5rem 20rem !important;
    min-height: 0 !important;
  }

  

  

  .panel.p-segments.on > a.cell {
  transform: none !important;
  position: relative !important;
  padding-top: 2.75rem !important;
  height: 20rem !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  grid-row: 2 !important;
}

  .panel.p-segments.on > a.cell > .seg-cap {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  width: 100% !important;
  flex: 0 0 2.25rem !important;
  transform: none !important;
  display: none !important;
}

  

  .hero .dots {
  top: calc(73svh - 7rem) !important;
  bottom: auto !important;
  left: var(--edge) !important;
  right: auto !important;
  transform: none !important;
  display: flex !important;
  position: absolute !important;
  z-index: 100 !important;
  width: 14rem !important;
  height: 2px !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  background: linear-gradient(to right, #fff 0 34%, rgba(255,255,255,.45) 34% 100%) !important;
}

  .hero .dots::before,
  .hero .dots::after {
    font-size: .85rem !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}


@media (min-width: 641px) {
  .panel.p-segments.on > .desktop-label-row,
  .panel.p-segments.on > .desktop-label-row > div,
  .panel.p-segments.on > .desktop-label-row span {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    color: var(--navy, #101a3d) !important;
  }
}


@media (min-width: 641px) {
  

  

  .panel.p-segments.on > .desktop-label-row > div > span {
    display: inline-block !important;
    position: relative !important;
    z-index: 10001 !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: .72rem !important;
    line-height: 1 !important;
    color: #101a3d !important;
  }
}


@media (min-width: 641px) {
  

  .panel.p-segments.on > .desktop-label-row > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 .2rem !important;
  font-size: .72rem !important;
  line-height: 1 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  position: relative !important;
  z-index: 10000 !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-family: Arial, sans-serif !important;
  font-weight: 600 !important;
  color: transparent !important;
}
}


@media (min-width: 641px) {
  .panel.p-segments.on > .desktop-label-row {
  display: none !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(1.25rem, 2vw, 2.25rem) !important;
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  order: -10 !important;
  width: 100% !important;
  height: 3.5rem !important;
  color: var(--navy, #101a3d) !important;
  background: #fff !important;
  position: relative !important;
  z-index: 9999 !important;
  isolation: isolate !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: .72rem !important;
  line-height: 1 !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='56'%3E%3Ctext x='8' y='34' fill='%23101a3d' font-family='Arial,sans-serif' font-size='12' font-weight='600' letter-spacing='1.5'%3EKONTOR %26 AVALIK RUUM →%3C/text%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='56'%3E%3Ctext x='8' y='34' fill='%23101a3d' font-family='Arial,sans-serif' font-size='12' font-weight='600' letter-spacing='1.5'%3EHOTELLID %26 RESORDID →%3C/text%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='56'%3E%3Ctext x='8' y='34' fill='%23101a3d' font-family='Arial,sans-serif' font-size='12' font-weight='600' letter-spacing='1.5'%3ELAEVAD %26 JAHID →%3C/text%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: calc(33.333% - 1rem) 100%, calc(33.333% - 1rem) 100%, calc(33.333% - 1rem) 100% !important;
  background-position: left center, center center, right center !important;
}

  .panel.p-segments.on > a.cell > .cimg {
  position: relative !important;
  inset: 0 !important;
  z-index: 1 !important;
  transform: none !important;
  top: 3rem !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 20rem !important;
  min-height: 0 !important;
  order: 2 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  background: #fff !important;
}

  


  .panel.p-segments.on > a.cell > .cimg img {
    height: calc(100% - 3.5rem) !important;
    margin-top: 3.5rem !important;
  }

  .panel.p-products.on,
  .panel.p-lab.on {
    width: calc(100% - 8vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


@media (min-width: 641px) {
  .panel.p-segments.on > a.cell > .cimg::after {
  display: flex !important;
  position: absolute !important;
  z-index: 2147483647 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3.5rem !important;
  padding: 0 1rem !important;
  align-items: center !important;
  color: #101a3d !important;
  -webkit-text-fill-color: #101a3d !important;
  background: #fff !important;
  font-family: Arial, sans-serif !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  content: none !important;
}


}

/* ==========================================================================
   Sisustuse kaart: uks pealkiri
   -------------------------------------------------------------------------
   Kaardi nimi tuleb WordPressist (.seg-cap). See on ainus koht, kus teksti
   muudetakse, ja ainus, mis WPML-i kaudu inglise keelde jouab. home.js lisas
   varem iga kaardi peale teise sildi (.desktop-card-label) koodi sisse
   kirjutatud eestikeelsest massiivist, mistottu pealkiri oli kaks korda ja
   ingliskeelsel lehel vales keeles. Silt on nuud JS-ist eemaldatud; see
   reegel on kaitse juhuks, kui vana JS tuleb brauseri vahemalust.
   Mobiil (< 901px) on teadlikult puutumata.
   ========================================================================== */
@media (min-width: 901px) {
  /* JS-i lisatud dublikaat */
  

  /* Ainus kaardi pealkiri, tekst tuleb WordPressist */
  .panel.p-segments.on > a.cell > .seg-cap {
    display: flex !important;
    order: -1 !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: .55rem !important;
    margin: 0 0 .6rem !important;
    padding: 0 !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 3 !important;
  }
  .panel.p-segments.on > a.cell > .seg-cap .seg-name {
    font-size: .68rem !important;
    font-weight: 600 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--navy, oklch(0.32 0.088 264)) !important;
  }

  /* Vabanenud ruum lauheb pildile */
  .panel.p-segments.on > a.cell > .cimg {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    /* top: 3rem loksutas pilti allapoole, et JS-i lisatud sildist mooda saada.
       Silti enam ei ole, nii et see ajas pildi ainult kaardist valja. */
    top: 0 !important;
  }
}


/* --------------------------------------------------------------------------
   Kaardi pealkiri visuaali jargi: tekst, siis nool.
   Siit eemaldati uheksa reeglit, kus kaardi nimed olid content:-i sees kovasti
   kirjas (a.cell::before ning .cimg::after, nii nth-child kui nth-of-type).
   Need ei olnud DOM-is ega tolkinud: ingliskeelsel lehel naitasid nad eesti
   keelt ja pealkiri paistis kaardil kaks korda. Nimi tuleb nuud ainult
   WordPressist (.seg-name).
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  /* pikk joon-nool kuulub hero silmkulmu juurde, mitte kaardile */
  .panel.p-segments.on > a.cell > .seg-cap > .go { display: none !important; }

  .panel.p-segments.on > a.cell > .seg-cap .seg-name {
    font-size: .78rem !important;
    font-weight: 700 !important;
    letter-spacing: .14em !important;
  }
  .panel.p-segments.on > a.cell > .seg-cap .seg-name::after {
    content: " \2192";
    margin-left: .55rem;
  }
}

/* Hero CTA: nupul on juba justify-content: space-between, aga nool puudus.
   Visuaalil on tekst vasakul ja nool paremas servas. */
@media (min-width: 901px) {
  .hero .cta-big::after { content: "\2192"; font-size: 1.05em; line-height: 1; opacity: .95; }
}

/* .seg-cap oli height/min-height: 3rem — fikseeritud pesa, mis oli tehtud vana
   kahesildilise lahenduse jaoks. Tekst ise on 14px, nii et 34px seisis tuhjalt.
   Ruum laheb pildile; kaardi ja paneeli korgus ei muutu, nii et GSAP-i motmine
   jaab paigale. */
@media (min-width: 901px) {
  .panel.p-segments.on > a.cell > .seg-cap {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 .85rem !important;
  }
}

/* Hero controls — count, full 12-second progress and direct slide navigation. */
.hero .hero-controls { position:absolute;z-index:110;left:var(--edge);bottom:clamp(5.5rem,9svh,6.5rem);display:flex;align-items:center;gap:.85rem;color:#fff }
.hero .hero-pagination { display:flex;align-items:center;gap:.28rem;min-width:3.4rem;font-size:.75rem;font-variant-numeric:tabular-nums;letter-spacing:.08em }
.hero .hero-progress { position:relative;width:clamp(8rem,12vw,12rem);height:1px;overflow:hidden;background:rgba(255,255,255,.38) }
.hero .hero-progress span { display:block;width:100%;height:100%;background:#fff;transform:scaleX(0);transform-origin:left center }
.hero .hero-progress span.running { animation:hero-cycle-progress 12s linear forwards }
@keyframes hero-cycle-progress { to { transform:scaleX(1) } }
.hero .hero-controls .dots { position:static!important;display:flex!important;align-items:center!important;width:auto!important;height:auto!important;gap:.55rem!important;margin:0!important;padding:0!important;overflow:visible!important;transform:none!important;background:transparent!important }
.hero .hero-controls .dots::before,.hero .hero-controls .dots::after { content:none!important;display:none!important }
.hero .hero-controls .dots button { position:static!important;display:block!important;flex:0 0 auto!important;width:.5rem!important;height:.5rem!important;margin:0!important;padding:0!important;border:1px solid rgba(255,255,255,.9)!important;border-radius:50%!important;background:transparent!important;opacity:1!important;cursor:pointer }
.hero .hero-controls .dots button.on { background:#fff!important }

/* Tooted uses the same desktop card composition and dimensions as Sisustus. */
@media (min-width:901px) {
  .panel.p-products.on { width:100%!important;margin-inline:0!important;grid-template-rows:20rem!important }
  .panel.p-products.on>a.cell { display:flex!important;height:20rem!important;padding:0!important;flex-direction:column!important }
  
  
  .panel.p-products.on>a.cell>.cimg { order:1!important;flex:1 1 auto!important;height:auto!important;min-height:0!important;width:100%!important }
  .panel.p-products.on>a.cell>.cimg img { width:100%!important;height:100%!important;object-fit:cover!important }
  .panel.p-products.on>a.cell>.meta,.panel.p-products.on>a.cell>.go,.panel.p-products.on>a.cell>.cimg .no { display:none!important }
}
@media (max-width:640px) {
  .hero .hero-controls { left:var(--edge);right:var(--edge);bottom:1.5rem }
  .hero .hero-progress { flex:1 1 auto;width:auto }
}
@media (prefers-reduced-motion:reduce) { .hero .hero-progress span.running { animation:none;transform:scaleX(1) } }

/* Mobile hero: direct dots replace the old circular previous/next controls.
   Keep the Sisustus scroller compact and pull it slightly into the hero. */
@media (max-width:640px) {
  .hero .s-nav,
  .hero .s-btn {
    display:none!important;
  }

  .panel.p-segments.on>.desktop-label-row {
    display:none!important;
  }

  .panel.p-segments.on {
    margin-top:0!important;
    padding-top:3rem!important;
    padding-bottom:2.5rem!important;
  }

  .panel.p-segments.on>a.cell {
    height:min(30svh,15rem)!important;
  }
}

/* Mobile finishing pass: keep slide dots on the right and replace the globe with a clean reference card. */
@media (max-width:640px) {
  .hero .hero-controls .dots {
    margin-left:auto!important;
  }

  .refs {
    height:auto!important;
    min-height:0!important;
    padding:2.5rem var(--edge)!important;
    overflow:hidden!important;
  }

  .refs-globe {
    display:none!important;
  }

  .refs-top {
    align-items:flex-start!important;
    gap:1rem!important;
  }

  .refs-detail {
    position:relative!important;
    inset:auto!important;
    grid-template-columns:1fr!important;
    gap:1.5rem!important;
    margin-top:2.25rem!important;
  }

  .refs-info {
    padding-bottom:0!important;
  }

  .refs-media img {
    height:clamp(13rem,65vw,16rem)!important;
  }
}

/* Align the mobile deck pagination dots with the hero controls' right edge. */
@media (max-width:640px) {
  .panel.p-segments.on,
  .panel.p-products.on {
    background-position:
      right calc(var(--edge) + 36px) bottom 1.15rem,
      right calc(var(--edge) + 18px) bottom 1.15rem,
      right var(--edge) bottom 1.15rem,
      var(--edge) 1.25rem!important;
  }
}

/* Sisustus + Tooted: one shared desktop card layout.
   The old duplicated Sisustus label reserved 3.5rem inside each image. Once the
   duplicate was removed that spacer only shortened the photo and left a white
   strip. Let the image fill its box, keep a small label gap, and give Products
   the same inset three-column deck as Sisustus. */
@media (min-width:901px) {
  .panel.p-segments.on>a.cell,
  .panel.p-products.on>a.cell {
    gap:0!important;
    overflow:visible!important;
  }

  .panel.p-segments.on>a.cell>.seg-cap,
  .panel.p-products.on>a.cell>.k-label {
    margin:0 0 .45rem!important;
    transform:translateY(-1.2rem)!important;
  }

  .panel.p-segments.on>a.cell>.cimg img {
    width:100%!important;
    height:100%!important;
    margin-top:0!important;
    object-fit:cover!important;
  }

  .panel.p-products.on {
    position:relative!important;
    z-index:20!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:3.5rem 20rem!important;
    gap:clamp(1.25rem,2vw,2.25rem)!important;
    width:calc(100% - 8vw)!important;
    min-height:25rem!important;
    margin:-4.75rem auto 0!important;
    padding:2rem clamp(1.5rem,2.5vw,2.75rem) 2.35rem!important;
    overflow:visible!important;
    background:#fff!important;
    border-radius:.45rem!important;
    box-shadow:0 1.25rem 3.5rem rgba(8,12,24,.12)!important;
  }

  .panel.p-products.on>a.cell {
    grid-row:2!important;
    display:flex!important;
    flex-direction:column!important;
    height:20rem!important;
    min-width:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:transparent!important;
  }

  /* Sama pildikate nagu 01 peal. `contain` jattis projektifoto raami
     sisse, umber teda valge riba - Harli: „pildid peavad katma terve ala". */
  .panel.p-products.on>a.cell>.cimg img {
    object-fit:cover!important;
    object-position:center!important;
    transform:none!important;
    transform-origin:center top!important;
  }

  .panel.p-segments.on>a.cell>.cimg,
  .panel.p-products.on>a.cell>.cimg {
    overflow:hidden!important;
  }

  .panel.p-products.on>a.cell {
    overflow:visible!important;
  }

  .panel.p-products.on>.rail.feature {
    display:none!important;
  }

  /* LAB keeps its own image + story composition, but uses the same inset deck
     shell as Sisustus and Tooted. The feature rail is already rendered in the
     hero, so the duplicate inside the white deck must not be shown. */
  .panel.p-lab.on {
    position:relative!important;
    z-index:20!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:3.5rem 20rem!important;
    gap:clamp(1.25rem,2vw,2.25rem)!important;
    width:calc(100% - 8vw)!important;
    min-height:25rem!important;
    margin:-4.75rem auto 0!important;
    padding:2rem clamp(1.5rem,2.5vw,2.75rem) 2.35rem!important;
    overflow:visible!important;
    background:#fff!important;
    border-radius:.45rem!important;
    box-shadow:0 1.25rem 3.5rem rgba(8,12,24,.12)!important;
  }

  .panel.p-lab.on>.cell.spot,
  .panel.p-lab.on>.cell.spotxt {
    grid-row:2!important;
    height:20rem!important;
    min-width:0!important;
  }

  .panel.p-lab.on>.cell.spot {
    grid-column:1!important;
  }

  .panel.p-lab.on>.cell.spotxt {
    grid-column:2 / 4!important;
    position:relative!important;
    top:-2rem!important;
  }

  .panel.p-lab.on>.cell.spot>.cimg,
  .panel.p-lab.on>.cell.spot>.cimg img {
    width:100%!important;
    height:100%!important;
  }

  .panel.p-lab.on>.cell.spot>.cimg img {
    object-fit:cover!important;
    object-position:center top!important;
  }

  .panel.p-lab.on>.rail.feature {
    display:none!important;
  }
}

/* Mobile Products mirrors the compact Sisustus card deck. */
@media (max-width:640px) {
  .panel.p-products.on {
    margin-top:0!important;
    gap:.55rem!important;
    padding:3rem .65rem 2.5rem!important;
  }

  .panel.p-products.on>a.cell {
    height:min(30svh,15rem)!important;
  }

  .panel.p-products.on>a.cell>.cimg {
    background-size:contain!important;
    background-position:center top!important;
  }
}

/* Sisustus and Tooted render one shared caption component: .seg-cap. */
@media (max-width:640px) {
  :is(.panel.p-segments.on,.panel.p-products.on)>a.cell>.seg-cap {
    position:absolute!important;
    z-index:4!important;
    inset:auto .25rem .5rem .45rem!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:.55rem!important;
    width:auto!important;
    min-height:2.25rem!important;
    margin:0!important;
    padding:.35rem .15rem 0!important;
    background:transparent!important;
  }

  :is(.panel.p-segments.on,.panel.p-products.on)>a.cell>.seg-cap .go {
    flex:0 0 auto!important;
    transform:none!important;
  }

  :is(.panel.p-segments.on,.panel.p-products.on)>a.cell>.seg-cap .seg-name {
    display:flex!important;
    align-items:center!important;
    max-width:10rem!important;
    margin:0!important;
    font-size:clamp(.44rem,1.9vw,.6rem)!important;
    font-weight:700!important;
    line-height:1.12!important;
    letter-spacing:.02em!important;
    text-transform:uppercase!important;
  }

  .panel.p-segments.on>a.cell>.seg-cap,
  .panel.p-segments.on>a.cell>.seg-cap * {
    color:#fff!important;
    border-color:#fff!important;
  }

  .panel.p-segments.on>a.cell>.seg-cap .go {
    filter:brightness(0) invert(1)!important;
  }

  .panel.p-products.on>a.cell>.seg-cap,
  .panel.p-products.on>a.cell>.seg-cap * {
    color:var(--navy,#101a3d)!important;
    border-color:var(--navy,#101a3d)!important;
  }

  .panel.p-products.on>a.cell>.seg-cap .go {
    filter:none!important;
  }
}

/* Mobile card captions use the hero eyebrow typography and arrow geometry. */
@media (max-width:640px) {
  :is(.panel.p-segments.on,.panel.p-products.on)>a.cell>.seg-cap {
    gap:1.2rem!important;
  }

  :is(.panel.p-segments.on,.panel.p-products.on)>a.cell>.seg-cap .go {
    position:relative!important;
    display:inline-block!important;
    flex:0 0 auto!important;
    width:clamp(3.4rem,3vw + 1.5rem,5.4rem)!important;
    height:2px!important;
    margin:0!important;
    background:currentColor!important;
    transform:none!important;
  }

  :is(.panel.p-segments.on,.panel.p-products.on)>a.cell>.seg-cap .go::after {
    content:""!important;
    position:absolute!important;
    right:-1px!important;
    top:-4px!important;
    width:9px!important;
    height:9px!important;
    border-top:2px solid currentColor!important;
    border-inline-end:2px solid currentColor!important;
    transform:rotate(45deg)!important;
  }

  :is(.panel.p-segments.on,.panel.p-products.on)>a.cell>.seg-cap .seg-name {
    font-size:clamp(.74rem,.66rem + .24vw,.92rem)!important;
    font-weight:500!important;
    line-height:1.55!important;
    letter-spacing:.26em!important;
  }
}

@media (min-width:641px) {
  :is(.panel.p-segments.on,.panel.p-products.on)>a.cell>.seg-cap {
    position:relative!important;
    inset:auto!important;
    z-index:3!important;
    order:-1!important;
    display:flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:.9rem!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0 0 .85rem!important;
    padding:0 .2rem!important;
    color:var(--navy,#101a3d)!important;
    background:transparent!important;
    opacity:1!important;
    visibility:visible!important;
  }

  :is(.panel.p-segments.on,.panel.p-products.on)>a.cell>.seg-cap,
  :is(.panel.p-segments.on,.panel.p-products.on)>a.cell>.seg-cap * {
    color:var(--navy,#101a3d)!important;
    border-color:var(--navy,#101a3d)!important;
  }

  :is(.panel.p-segments.on,.panel.p-products.on)>a.cell>.seg-cap .seg-name {
    display:block!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    font-size:.68rem!important;
    font-weight:600!important;
    line-height:1.3!important;
    letter-spacing:.16em!important;
    text-transform:uppercase!important;
  }
}

@media (min-width:901px) {
  :is(.panel.p-segments.on,.panel.p-products.on)>a.cell>.seg-cap {
    margin:0 0 .45rem!important;
    transform:translateY(-1.2rem)!important;
  }

  :is(.panel.p-segments.on,.panel.p-products.on)>a.cell>.seg-cap>.go {
    display:none!important;
  }

  :is(.panel.p-segments.on,.panel.p-products.on)>a.cell>.seg-cap .seg-name {
    font-size:.78rem!important;
    font-weight:700!important;
    letter-spacing:.14em!important;
  }

  :is(.panel.p-segments.on,.panel.p-products.on)>a.cell>.seg-cap .seg-name::after {
    content:" \2192";
    margin-left:.55rem;
  }
}

/* ================================== valdkonnakaardid telefonis: silt pildi alla
 *
 * MIKS. Kaardil oli pilt ja selle alumises servas nool + nimi, valgena pildi
 * peal. Foto ei ole uhtlane taust: heleda seina voi akna kohal kadus valge
 * kiri ara. Iga selline kaart on link, ja kui sildi loetavus soltub sellest,
 * mis juhtub fotol just seal olema, siis ei ole see enam kujundus vaid onn.
 *
 * Nuud on nad lahus: pilt oma kastis, nool ja nimi selle all valgel, tumedas
 * kirjas. Pilt laheb uhtlasi kitsamaks - 64vw endise 72vw asemel - nii et
 * jargmine kaart paistab servast rohkem valja ja on nahtav, et rida keritakse.
 *
 * Kehtib nii 01 (Valdkonnad) kui 02 (Tooted) paneelil: neil on sama markup.
 *
 * `!important` on siin seetottu, et varasemad mobiilireeglid samadele
 * valijatele kasutavad seda ka; ilma selleta ei jouaks uus reegel kohale.
 */
@media (max-width: 640px) {

  /*
   * Kaartidel 2 ja 3 oli `border-inline-start: 1px` hele joon - toolauavaate
   * veerujaotur, mis siin keribas joonistab kaartide vahele juhusliku kriipsu.
   * Kaardil 1 seda ei ole, nii et rida naeb valja ka ebasummeetriline.
   * Keribas eraldab kaarte vahe, mitte joon.
   */
  :is(.panel.p-segments, .panel.p-products).on > a.cell {
    border-inline-start: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    flex: 0 0 64vw !important;
    max-width: 16rem !important;
  }

  :is(.panel.p-segments, .panel.p-products).on > a.cell > .cimg {
    position: relative !important;
    inset: auto !important;
    order: 0 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    flex: 0 0 auto !important;
  }

  :is(.panel.p-segments, .panel.p-products).on > a.cell > .seg-cap {
    position: relative !important;
    inset: auto !important;
    order: 1 !important;
    padding: .8rem 0 0 !important;
    background: none !important;
    color: var(--ink, #212938) !important;
  }

  /* Nool on riba, mitte marge: tema varv tuleb `background`-ist, mitte `color`-ist. */
  /*
   * Varv peab minema ka `.seg-first` ja `.seg-rest` peale.
   *
   * Need span-id on uued (standard_split_label) ja `.seg-name` sees olevad
   * span-id parivad teemas valge varvi - see oli moeldud ajaks, mil silt
   * seisis tumeda pildi peal. Valgel taustal tahendas see valget kirja
   * valgel: tekst oli kohal, aga nahtamatu. Vanema varvimisest ei piisa,
   * kui lapsel on oma varv - sama loksu tegin tana juba noole otsaga.
   */
  :is(.panel.p-segments, .panel.p-products).on > a.cell > .seg-cap .seg-name,
  :is(.panel.p-segments, .panel.p-products).on > a.cell > .seg-cap .seg-first,
  :is(.panel.p-segments, .panel.p-products).on > a.cell > .seg-cap .seg-rest {
    color: var(--ink, #212938) !important;
  }

  /*
   * 02 paneeli pildid olid 1,16x suurendatud ja 9,6 px paremale nihutatud,
   * 01 omad 1,04x ilma nihketa. Sama kastisuuruse juures tahendas see, et
   * tootefotod olid margatavalt sisse suumitud ja toode ise ei mahtunud
   * kaadrisse. Sama kast, sama suurendus - siis nad ka naevad samad valja.
   */
  :is(.panel.p-segments, .panel.p-products).on > a.cell > .cimg img {
    transform: scale(1.04) !important;
  }
  :is(.panel.p-segments, .panel.p-products).on > a.cell > .seg-cap .go {
    /*
     * Nool koosneb kahest osast: riba on `background`, ots on `::after`,
     * mille aarised on `currentColor`. 01 paneelil oli `.go` varv valge, nii
     * et riba laks tumedaks aga ots jai valgeks - ja kadus valgel taustal ara.
     * Seetottu tuleb panna MOLEMAD, mitte ainult taust.
     */
    background: var(--ink, #212938) !important;
    color: var(--ink, #212938) !important;
  }
}


/* ---------------------------------- kaardirea viimistlus telefonis
 *
 * Kolm asja, mis eraldi on pisiasjad ja koos teevad rea lopetamata olekuga.
 *
 * 1. RIDA ALGAS VALEST KOHAST. Paneeli kulgpolsterdus oli 10,4 px, aga kogu
 *    ulejaanud leht - sildid, pealkirjad, tekstiplokid - istub `--edge` peal,
 *    mis 375 pikslil on 20 px. Kaardid algasid seega kumme pikslit vasakult
 *    poolt sissepoole ja rida naeb valja, nagu libiseks ekraanilt maha.
 *    Kumme pikslit on vahe, mida ei oska nimetada, aga silm loeb kohe valja.
 *    `scroll-padding-inline` peab sama olema, muidu snap peatub vales kohas.
 *
 * 2. NOOL SOI KAARDI ARA. 54 px riba 240 px kaardil on viiendik laiusest, ja
 *    see surus sildi kahele reale („Kontor & avalik ruum"). Toolaual, kus
 *    kaart on kolm korda laiem, on sama riba elegantne. Siin ta lihtsalt
 *    vottis ruumi.
 *
 * 3. PUSTINE RUUM. 48 px peal + 40 px all + jargmise sektsiooni oma polsterdus
 *    tegi kaardirea alla ligi 90 px tuhja. Riba peab hingama, mitte holjuma.
 */
@media (max-width: 640px) {

  :is(.panel.p-segments, .panel.p-products).on {
    padding-inline: var(--edge) !important;
    scroll-padding-inline: var(--edge) !important;
    /*
     * Ulemist polsterdust EI TOHI vahendada: paneelil on absoluutne sektsiooni
     * silt (VALDKONNAD / KATEGOORIAD) `top: 20px` peal. 2rem juures joudsid
     * kaardid sellele otsa - kaks pikslit kattuvust ja silt naeb valja nagu
     * pooleks loigatud. 3rem hoiab talle ruumi. Alt sai kokku votta kull.
     */
    padding-top: 3rem !important;
    padding-bottom: 1.75rem !important;
    gap: .75rem !important;
  }

  :is(.panel.p-segments, .panel.p-products).on > a.cell > .seg-cap {
    gap: .8rem !important;
  }

  :is(.panel.p-segments, .panel.p-products).on > a.cell > .seg-cap .go {
    width: 2rem !important;
    flex: 0 0 2rem !important;
  }
}


/* ------------------- 01 ja 02 kaardid uhele kujule (telefon)
 *
 * Kaks paneeli olid samast markupist, aga eri stiilidest. Arvutatud stiile
 * korvuti pannes tuli valja kuus paris erinevust; ulejaanud kaksteist olid
 * lihtsalt teksti pikkusest tingitud.
 *
 *   kaardi tekstivarv    01 ink 0.28        02 navy 0.32
 *   pildi ja sildi vahe  01 6,4 px          02 8,8 px
 *   pildikasti taust     01 murtud valge    02 puhas valge
 *   pildi enda taust     01 labipaistev     02 hall #f7f7f7
 *   pildi max-width      01 100%            02 none
 *   sildi laius          01 160 px          02 sisu jargi
 *
 * Ukski neist ei ole eraldi suur. Koos tahendavad nad, et kaks korvuti
 * paneeli, mis peaksid olema uks ja sama komponent, ei ole seda.
 * 01 on oige, seega 02 tuleb tema juurde.
 */
@media (max-width: 640px) {

  :is(.panel.p-segments, .panel.p-products).on > a.cell {
    color: var(--ink, #212938) !important;
    gap: .4rem !important;
  }

  /* Tapselt sama toon, mis 01 peal - `--paper` andis 0.995, 01 kasutab 0.985. */
  :is(.panel.p-segments, .panel.p-products).on > a.cell > .cimg {
    background: oklch(0.985 0.003 264) !important;
  }

  :is(.panel.p-segments, .panel.p-products).on > a.cell > .seg-cap {
    flex: 0 0 auto !important;
  }

  /*
   * Sildi korgus kahele reale, ka siis kui tekst mahub uhele.
   *
   * 01 sildid murduvad („Kontor & avalik ruum"), 02 omad ei murdu
   * („Lauad"). Ilma selleta on kaart 01 peal 236 px ja 02 peal 222 px, ja
   * kuna paneelid vahetuvad samas kohas, hupleb terve rida hero-slaidi
   * vahetusel 14 pikslit. Silm loeb selle liigutusena, mitte sisuna.
   */
  /*
   * Silt: ainult esimene sona. Taisnimi jaab DOM-i alles (vt
   * standard_split_label() functions.php-s), aga telefonis peidame saba.
   * „Kontor & avalik ruum" murdus kahele reale ja pidi olema vaike, et ara
   * mahtuda; „Kontor" mahub uhele ja lubab kirja suuremaks.
   *
   * Uherealise sildi juures ei ole `min-height` enam vaja ja nool saab
   * tagasi tsentrisse - `flex-start` oli seal ainult selleks, et kahe rea
   * puhul nool tekstiploki ules jaaks.
   */
  :is(.panel.p-segments, .panel.p-products).on > a.cell > .seg-cap {
    align-items: center !important;
  }

  :is(.panel.p-segments, .panel.p-products).on > a.cell .seg-rest {
    display: none !important;
  }

  /*
   * Kirja suurus laheb ka `.seg-first` peale: tekst elab nuud seal ja
   * `.seg-name` peal olev reegel ei parandanud last, kellel on oma suurus.
   * `.stage` ees tostab kaalu - samale valijale on mujal juba `!important`
   * pandud ja pelgalt hilisemast asukohast failis ei piisanud.
   */
  .stage :is(.panel.p-segments, .panel.p-products).on > a.cell .seg-name,
  .stage :is(.panel.p-segments, .panel.p-products).on > a.cell .seg-first {
    width: auto !important;
    font-size: .82rem !important;
    letter-spacing: .09em !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }

  :is(.panel.p-segments, .panel.p-products).on > a.cell > .cimg img {
    background: transparent !important;
    max-width: 100% !important;
  }

  /* `width: 10rem` oli siin ainult 02 peal ja raakis vastu ulalpool
     olevale `width: auto`-le. Uhtse markupi juures ei ole teda vaja. */
}


/* ------------------- kupsisenupp kaardi noole alt ara (telefon)
 *
 * Cookie Law Info paneb oma „revisit" nupu fikseeritult VASAKUSSE alaserva.
 * Telefonis satub see tapselt esimese kaardi noole peale - Harli nagi seda
 * nii, et „01 peal ei ole uldse nooli". Nooled olid kohal, nupp oli nende ees.
 *
 * Nupp ise on plugina oma ja teda ei saa mallist liigutada, aga tema asukoht
 * on CSS. Paremasse serva, kus kaardil ei ole midagi.
 */
@media (max-width: 640px) {
  .cky-btn-revisit-wrapper {
    left: auto !important;
    right: 1rem !important;
  }
}


/* ------------------- kaardinool: lopetav reegel (telefon)
 *
 * Nool jai 01 peal nahtamatuks ka parast kahte varviparandust. Molemad
 * eelmised toetusid ahelale: `:is()` + `.on` + parimine + `var(--ink)`.
 * Kui uks luli sellest ahelast kuskil ei pea - vale keskkond, muutuja
 * defineerimata, klass hetkel puudu - kaob kogu reegel ara ja nool laheb
 * tagasi valgeks.
 *
 * Siin on koik ahelad valja voetud: lihtne valija, otsene HEX, ei mingit
 * `.on` soltuvust. Nool koosneb ribast (`background`) ja otsast (`::after`
 * aarised), seega molemad said oma rea. Kui see ei toota, siis ei ole
 * probleem varvis.
 */
@media (max-width: 640px) {
  .panel .seg-cap .go {
    background: #212938 !important;
    color: #212938 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .panel .seg-cap .go::after {
    border-top-color: #212938 !important;
    border-right-color: #212938 !important;
    border-inline-end-color: #212938 !important;
  }

  .panel .seg-cap .seg-name,
  .panel .seg-cap .seg-first,
  .panel .seg-cap .seg-rest {
    color: #212938 !important;
  }
}


/* ------------------- 01 noole tegelik pohjus: CSS-filter (telefon)
 *
 * Terve paev otsisin varvi. Varv ei olnud kunagi vale.
 *
 * `.panel.p-segments.on > a.cell > .seg-cap .go` peal on kaks reeglit
 * (read ~1319 ja ~3527) `filter: brightness(0) invert(1)`. See kirjutati
 * ajal, mil silt seisis tumeda foto peal ja nool pidi olema valge:
 * brightness(0) teeb musta, invert(1) teeb sellest valge. Tulemus on
 * PUHASVALGE nool, ukskoik mis on `background` voi `color`.
 *
 * Filter rakendub peale varvi arvutamist. Seetottu ei aidanud ukski minu
 * kolmest varviparandusest - ka mitte see, kus ma votsin ara koik
 * soltuvused ja panin otse HEX-i. Ma kontrollisin ainult neid omadusi,
 * mille ma ise valisin kontrollida, ja `filter` ei olnud nende hulgas.
 * Leidsin ta alles siis, kui vordlesin 01 ja 02 KOIKI arvutatud omadusi.
 *
 * Nuud on kaart valge ja nool peab olema tume - filtrit ei ole vaja.
 */
@media (max-width: 640px) {
  :is(.panel.p-segments, .panel.p-products).on > a.cell > .seg-cap .go {
    filter: none !important;
  }
}


/* ------------------- „02 pildid on ikka zoomed in" - tegelik pohjus
 *
 * Terve selle otsingu ajal vaatasin ma vale elementi.
 *
 * `.p-products` kaartidel oli `.cimg` peal CSS `background-image` kolme
 * KOVAKODEERITUD faili URL-iga (006, 049, 051 karl-kasepold), ja samas plokis
 * `img { opacity: 0; visibility: hidden }`. Ehk: paris pilt - see, mida mall
 * valjastab ja mida ma korduvalt vahetasin - oli peidus, ja nahtaval oli
 * taust. Kaks neist kolmest failist olid 1125x1500, PUSTFORMAADIS.
 *
 * `background-size: 104% auto` tahendab pustpildi puhul, et kastis on naha
 * ainult pildi ulemine osa - suur ja loigatud. Tapselt see, mida Harli
 * nimetas „zoomed in" ja varem „liiga vertikaalsed".
 *
 * Ma vahetasin kolm korda `$standard_product_card_images` massiivi ja
 * parandasin `object-fit`-i - mitte uks neist ei saanud midagi muuta, sest
 * `<img>` oli `visibility: hidden`. Ma ei kontrollinud kordagi, KAS pilt,
 * mida ma mootsin, on uldse see pilt, mida ekraanil naha on.
 *
 * Kokku eemaldatud kuus taustareeglit ja kaks peitereeglit. Nuud naitab 02
 * sama moodi kui 01: mallist tulev `<img>`, `object-fit: cover`.
 */

/* Localize the fixed mobile carousel labels. */
@media (max-width:640px){
html:lang(en) .panel.p-segments.on {
    background-image:
      radial-gradient(circle, #111 0 4px, transparent 4.5px),
      radial-gradient(circle, #c9c9c9 0 4px, transparent 4.5px),
      radial-gradient(circle, #c9c9c9 0 4px, transparent 4.5px),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='22' viewBox='0 0 180 22'%3E%3Ctext x='0' y='14' fill='%23101a3d' font-family='Arial,sans-serif' font-size='11' letter-spacing='2.2'%3ESECTORS%3C/text%3E%3C/svg%3E") !important;
}
html:lang(en) .panel.p-products.on {
    background-image:
      radial-gradient(circle, #111 0 4px, transparent 4.5px),
      radial-gradient(circle, #c9c9c9 0 4px, transparent 4.5px),
      radial-gradient(circle, #c9c9c9 0 4px, transparent 4.5px),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='22' viewBox='0 0 180 22'%3E%3Ctext x='0' y='14' fill='%23101a3d' font-family='Arial,sans-serif' font-size='11' letter-spacing='2.2'%3ECATEGORIES%3C/text%3E%3C/svg%3E") !important;
}
}
/* --- hero-alumine-vabaruum ------------------------------------------------------
   02.10.2026, Harli markus. Avalehe hero alumine rida — vasakul „01 / 03" koos
   edenemisjoonega (.hero-controls) ja paremal numbriplokk koos nupuga „Kusi
   pakkumist" (.desktop-feature-host) — seisis valja logitud kulastajal liiga
   madalal, peaaegu vastu valget .deck riba.

   Pohjus: .deck ei ala sealt, kus hero lopeb. Ta on absoluutne ja algab
   hero ALUMISEST servast 62 px vorra korgemalt — kaardid katavad teadlikult
   hero alaserva. Molema elemendi bottom-vaartus (88px ja 81.6px) oli aga
   motedud hero enda alaservast, mitte kaartide ulaservast. Jarele jai 20-26 px
   ohku.

   Miks ma seda varem ei nainud: ma vaatasin lehte sisse logituna ja WP
   adminiriba luhendab heroed 32 px vorra, mis andis juhuslikult parasjagu ruumi.
   Seega mootsin vale asja — markus oli oige.

   Parandus annab molemale sama bottom-vaartuse, nii et nad seisavad ka
   uhel joonel (varem 6 px nihkes), ja jatab kaartide ette umbes 55 px.
   Vaartus on svh-pohine, et see skaleeruks koos heroga; clamp hoiab ta
   madalal ja korgel ekraanil mojuvates piirides. Ainult suur ekraan:
   alla 1040 px laheb hero tavalisse voogu ja seal seda probleemi ei ole.

   !important ei ole siin laiskus: olemasolev .hero .desktop-feature-host reegel
   samas failis on ise !important-iga kirjutatud, nii et sama spetsiifilisusega
   reegel teda muidu ule ei kirjutaks. */
@media (min-width: 1041px) {
	.hero .hero-controls,
	.hero .desktop-feature-host {
		bottom: clamp(6.5rem, 13svh, 9rem) !important;
	}
}