/* ============================================================
   NO SKID — Concept B
   Light, product-led, navy + heritage red.
   ============================================================ */
:root{
  --navy:#0F2438;
  --navy-2:#16324B;
  --navy-3:#0A1826;
  --white:#FFFFFF;
  --mist:#F4F5F7;
  --mist-2:#E9ECEF;
  --red:#D8232A;
  --red-deep:#AC161C;
  --amber:#E8912A;
  --slate:#5A6572;

  --bg:var(--white);
  --bg-soft:var(--mist);
  --bg-card:var(--white);
  --fg:#101B26;
  --fg-mid:#4C5865;
  --fg-dim:#7C8896;
  --rule:rgba(16,27,38,.12);
  --rule-strong:rgba(16,27,38,.26);
  --accent:var(--red);
  --measure:#9A5D0E;
  --r:3px;
  --r-lg:6px;
  --shadow:0 1px 2px rgba(15,36,56,.05),0 12px 32px -16px rgba(15,36,56,.28);

  --gutter:clamp(1.15rem,4vw,3.5rem);
  --maxw:1300px;

  --f-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",
           "Noto Sans",Arial,sans-serif;
  --f-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,"Roboto Mono",Consolas,monospace;
}
/* This design is single-theme by choice: navy + white + heritage red is
   the brand palette, and it stays fixed regardless of the visitor's
   system or browser dark-mode setting. */

/* Navy band: re-declares tokens so children re-derive against it. */
.band-navy{
  --bg:var(--navy); --bg-soft:var(--navy-2); --bg-card:var(--navy-2);
  --fg:#EAF0F5; --fg-mid:#A9B8C6; --fg-dim:#7B8B9B;
  --rule:rgba(234,240,245,.15); --rule-strong:rgba(234,240,245,.30);
  --accent:#F04249; --measure:var(--amber);
  background:var(--bg);color:var(--fg);
}

*{box-sizing:border-box}

/* One-page anchor navigation. `scroll-margin-top` keeps a section's heading
   clear of the sticky header when it is jumped to. */
:root{--anchor-offset:94px}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:var(--anchor-offset)}
@media (max-width:760px){:root{--anchor-offset:74px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-sans);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* width:100% is required, not decorative: wherever .wrap ends up as the
   sole child of a flex container (e.g. .hero-cine-inner), its auto side
   margins disable that axis's default stretch and it would otherwise
   shrink to its content width instead of filling out to the cap. In
   every plain block context (the vast majority of uses) this is a
   no-op, since block boxes already default to 100% of their container. */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
/* Top and bottom padding are split deliberately: anchor-nav scrolls land a
   section right under the sticky header (see scroll-margin-top below), so
   a large top pad reads as dead space above the heading. Bottom pad stays
   generous since it is what separates one section from the next. */
.sec{padding-top:clamp(1.1rem,2vw,1.6rem);padding-bottom:clamp(3.5rem,7.5vw,6.5rem)}

/* Headline device: weight contrast inside the line. */
.hl{margin:0;font-weight:300;letter-spacing:-.028em;line-height:1.04;text-wrap:balance}
.hl b{font-weight:800;letter-spacing:-.034em}
.hl .red{color:var(--accent)}
.h1{font-size:clamp(2.35rem,4.6vw,3.85rem)}
.h2{font-size:clamp(1.9rem,4vw,3.1rem)}
.h3{font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:700;letter-spacing:-.015em;line-height:1.2;margin:0}

.eyebrow{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);font-weight:600;display:block;margin-bottom:1rem}
.eyebrow.muted{color:var(--fg-dim);font-weight:500}
.lede{font-size:clamp(1.02rem,1.4vw,1.16rem);color:var(--fg-mid);max-width:58ch;line-height:1.68;
  margin:1.15rem 0 0}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

.sechead{margin-bottom:clamp(2rem,4vw,3rem);max-width:64ch}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-size:.86rem;font-weight:700;letter-spacing:.01em;text-decoration:none;
  padding:1rem 1.75rem;border:1.5px solid transparent;border-radius:var(--r);cursor:pointer;
  font-family:inherit;transition:background .16s ease,color .16s ease,border-color .16s ease,transform .12s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--red-deep);border-color:var(--red-deep)}
.btn-outline{border-color:var(--rule-strong);color:var(--fg)}
.btn-outline:hover{border-color:var(--fg);background:var(--fg);color:var(--bg)}
.btn-whatsapp{background:#25D366;border-color:#25D366;color:#fff}
.btn-whatsapp:hover{background:#1EBE5B;border-color:#1EBE5B}
.btn-pdf{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-pdf:hover{background:var(--navy-2);border-color:var(--navy-2)}
.btn .bic{width:18px;height:18px;flex-shrink:0}
.btn .bic svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2rem}

/* ============================================================
   Header
   ============================================================ */
header.site{position:sticky;top:0;z-index:60;background:rgba(10,24,38,.88);
  backdrop-filter:blur(10px) saturate(1.4);-webkit-backdrop-filter:blur(10px) saturate(1.4);
  border-bottom:1px solid rgba(234,240,245,.12);
  transition:transform .32s cubic-bezier(.4,0,.2,1)}
header.site .wrap{display:flex;align-items:center;gap:1.6rem;min-height:80px}
.brand{display:flex;flex-direction:column;gap:.1rem;text-decoration:none;flex-shrink:0;line-height:1}
.brand .mark{font-size:1.7rem;font-weight:800;font-style:italic;color:#F04249;letter-spacing:-.035em;
  text-shadow:0 1px 4px rgba(0,0,0,.4)}
.brand .sub{font-family:var(--f-mono);font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;
  color:#8C9BAA}
nav.main{margin-left:auto;display:flex;gap:.2rem;align-items:center}
nav.main a{position:relative;font-size:.87rem;font-weight:600;text-decoration:none;
  padding:.6rem .85rem;color:#C3CEDA;border-radius:var(--r);
  transition:color .15s,background .15s}
nav.main a:hover{color:#fff;background:rgba(255,255,255,.08)}
/* Active section indicator, driven by the scroll spy. */
nav.main a::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.28rem;height:2px;
  background:var(--red);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .22s cubic-bezier(.22,.9,.28,1)}
nav.main a.is-active{color:#fff}
nav.main a.is-active::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){nav.main a::after{transition:none}}
.hdr-side{display:flex;align-items:center;gap:1rem;margin-left:.6rem}
.hdr-tel{text-decoration:none;color:#EAF0F5;line-height:1.2;white-space:nowrap}
.hdr-tel .t{font-family:var(--f-mono);font-size:.94rem;font-weight:600;font-variant-numeric:tabular-nums}
.hdr-tel .l{display:block;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:#8C9BAA}
.burger{display:none;margin-left:auto;background:none;border:1.5px solid rgba(234,240,245,.3);
  border-radius:var(--r);padding:.6rem .7rem;cursor:pointer;color:#EAF0F5}
.bars{display:block;width:20px;height:2px;background:currentColor;position:relative;border-radius:2px}
.bars::before,.bars::after{content:"";position:absolute;left:0;width:20px;height:2px;
  background:currentColor;border-radius:2px}
.bars::before{top:-6px}.bars::after{top:6px}

/* ============================================================
   Hero — cinematic, full-bleed background
   No real video footage exists for these floors, so motion is
   simulated: a slow Ken Burns drift on the active photo, cross-fading
   whenever a swatch is chosen. Reads as "video" at a fraction of the
   weight, and works with the same still photography used everywhere
   else on the page.
   ============================================================ */
.hero-cine{position:relative;overflow:hidden;isolation:isolate;color:#fff;
  min-height:min(86vh,860px);display:flex;flex-direction:column}
.hero-bg{position:absolute;inset:0;z-index:0;background:var(--navy-3)}
.hb-layer{position:absolute;inset:0;opacity:0;transform:scale(1.08);
  transition:opacity 1.15s ease}
.hb-layer.is-active{opacity:1;animation:heroKen 17s ease-in-out infinite alternate}
@keyframes heroKen{
  0%{transform:scale(1.08) translate3d(0,0,0)}
  100%{transform:scale(1.18) translate3d(-1.4%,-1.1%,0)}
}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(6,13,20,.86) 0%,rgba(6,13,20,.66) 34%,
                     rgba(6,13,20,.28) 60%,rgba(6,13,20,.08) 78%),
    linear-gradient(0deg,rgba(6,13,20,.78) 0%,rgba(6,13,20,.15) 30%,transparent 55%),
    linear-gradient(180deg,rgba(6,13,20,.5) 0%,transparent 22%)}

.hero-cine-inner{position:relative;z-index:2;flex:1;display:flex;align-items:center;
  padding-block:clamp(2rem,5vw,3rem)}
.hero-cine-copy{max-width:36rem;
  transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1),
             visibility 0s linear 0s}
.hero-cine-copy .eyebrow{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.hero-cine-copy .lede{color:rgba(255,255,255,.82)}
.hero-cine-copy .hl b{color:#fff}
/* "Fly out" when a non-default floor is previewed, so the copy block
   never sits over the photo the visitor asked to see. visibility is
   delayed on the way out (and instant on the way in) so the hidden
   buttons drop out of the tab order without an extra JS timer. */
.hero-cine-copy.is-hidden{
  opacity:0;transform:translateY(-22px) scale(.985);pointer-events:none;
  visibility:hidden;transition:opacity .38s cubic-bezier(.4,0,1,1),
    transform .38s cubic-bezier(.4,0,1,1),visibility 0s linear .38s}
@media (prefers-reduced-motion:reduce){
  /* Motion is the only thing that makes a hide/reveal toggle legible.
     Without it, keep the copy present rather than have it vanish. */
  .hero-cine-copy.is-hidden{opacity:1;transform:none;visibility:visible;pointer-events:auto}
}
.btn-onvideo{border-color:rgba(255,255,255,.55);color:#fff}
.btn-onvideo:hover{background:#fff;color:var(--navy);border-color:#fff}

/* Reveal-on-load: headline lines and supporting elements stagger in.
   Runs once, on page load -- not scroll-triggered. */
.reveal{animation:heroReveal .8s cubic-bezier(.19,1,.22,1) both;
  animation-delay:var(--d,0s)}
.hl .reveal-line{display:inline-block;animation:heroReveal .8s cubic-bezier(.19,1,.22,1) both;
  animation-delay:var(--d,0s)}
@keyframes heroReveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hb-layer.is-active{animation:none}
  .reveal,.hl .reveal-line{animation:none;opacity:1;transform:none}
}

/* Floating floor card: the interactive differentiator, now driving the
   full-bleed background instead of a boxed panel. Capped to the same
   max-width/centering as .wrap so it lines up with every other
   section's content column instead of stretching edge-to-edge on
   wide viewports. `width:100%` is required here, not just max-width:
   this element is a flex item of .hero-cine's column layout, and an
   auto/auto side margin disables that flex axis's default stretch,
   so without an explicit width it shrinks to fit its own content
   instead of filling out to the cap. */
.hero-floorcard{position:relative;z-index:2;width:100%;max-width:var(--maxw);
  margin:0 auto clamp(1.1rem,2.5vw,1.6rem);
  background:rgba(8,16,25,.52);backdrop-filter:blur(10px) saturate(1.3);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);
  padding:1.1rem var(--gutter) 1.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.5rem}
.fc-info{display:flex;flex-direction:column;gap:.15rem;margin-right:auto;min-width:11rem}
.fc-name{font-size:1.05rem;font-weight:700;letter-spacing:-.015em;color:#fff}
.fc-spec{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.02em;color:rgba(255,255,255,.72);
  font-variant-numeric:tabular-nums}
.hero-floorcard .swatches{margin:0}

.swatches{display:flex;gap:.5rem;flex-wrap:wrap}
.sw{width:52px;height:52px;border-radius:var(--r);border:2px solid rgba(255,255,255,.28);
  cursor:pointer;padding:0;position:relative;overflow:hidden;background:none;
  outline-offset:2px;transition:border-color .15s ease,transform .15s ease}
.sw span{position:absolute;inset:0}
.sw:hover{transform:translateY(-2px)}
.sw[aria-pressed="true"]{border-color:var(--accent)}
.sw[aria-pressed="true"]::after{content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 2px #fff}

/* Stats bar: pinned to the foot of the cinematic hero, on the scrim
   rather than the page background. The divider line stays full-bleed
   (same pattern as .trust below), but the row of figures sits in its
   own .wrap so it lines up under the same edges as every other
   section's content instead of stretching past them. */
.hero-stats{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.16)}
.hero-stats .wrap{display:flex;flex-wrap:wrap;
  gap:clamp(1.4rem,4vw,3.5rem);padding-block:1.1rem 1.3rem}
.hero-stats .wrap>div{display:flex;flex-direction:column;gap:.1rem}
.hero-stats .v{font-size:1.4rem;font-weight:800;letter-spacing:-.03em;line-height:1.1;color:#fff}
.hero-stats .l{font-size:.7rem;color:rgba(255,255,255,.68);letter-spacing:.02em}

/* ============================================================
   Surfaces -- real photography from the existing noskid.com.my
   image library, re-cropped and WebP-encoded. Each photo is
   declared once as a custom property (asset block at the end of
   the document) so the hero panel, the product card and the
   swatch all share a single copy of the data.
   ============================================================ */
.s-carpet  {background:var(--img-carpet)   center/cover no-repeat}
.s-vinyl   {background:var(--img-vinyl)    center/cover no-repeat}
.s-turf    {background:var(--img-turf)     center/cover no-repeat}
.s-court   {background:var(--img-court)    center/cover no-repeat}
.s-epdm    {background:var(--img-epdm)     center/cover no-repeat}
.s-rubber  {background:var(--img-rubber)   center/cover no-repeat}
.s-tile    {background:var(--img-antislip) center/cover no-repeat}
.s-meter   {background:var(--img-meter)    center/cover no-repeat}
.s-apply   {background:var(--img-apply)    center/cover no-repeat}
.s-ware1   {background:var(--img-ware1)    center/cover no-repeat}
.s-ware2   {background:var(--img-ware2)    center/cover no-repeat}
.s-ware3   {background:var(--img-ware3)    center/cover no-repeat}
.pj-ant1   {background:var(--img-p-ant1) center/cover no-repeat}
.pj-ant2   {background:var(--img-p-ant2) center/cover no-repeat}
.pj-ant3   {background:var(--img-p-ant3) center/cover no-repeat}
.pj-com1   {background:var(--img-p-com1) center/cover no-repeat}
.pj-com2   {background:var(--img-p-com2) center/cover no-repeat}
.pj-com3   {background:var(--img-p-com3) center/cover no-repeat}
.pj-com4   {background:var(--img-p-com4) center/cover no-repeat}
.pj-dec1   {background:var(--img-p-dec1) center/cover no-repeat}
.pj-dec2   {background:var(--img-p-dec2) center/cover no-repeat}
.pj-dec3   {background:var(--img-p-dec3) center/cover no-repeat}
.pj-spo1   {background:var(--img-p-spo1) center/cover no-repeat}
.pj-spo2   {background:var(--img-p-spo2) center/cover no-repeat}
.pj-spo3   {background:var(--img-p-spo3) center/cover no-repeat}
.pj-spo4   {background:var(--img-p-spo4) center/cover no-repeat}
.pj-spo5   {background:var(--img-p-spo5) center/cover no-repeat}
.pj-spo6   {background:var(--img-p-spo6) center/cover no-repeat}

/* ============================================================
   Trust strip
   ============================================================ */
.trust{background:var(--bg-soft);border-block:1px solid var(--rule)}
.trust .wrap{display:flex;align-items:center;justify-content:space-between;gap:clamp(1rem,3vw,2rem);
  padding-block:1.4rem;flex-wrap:wrap}
.trust .lbl{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--fg-dim)}
.std-row{display:flex;gap:clamp(.7rem,2vw,1.6rem);flex-wrap:wrap;align-items:center}
.std{font-size:.9rem;font-weight:700;letter-spacing:.03em;color:var(--fg-mid);
  border:1.5px solid var(--rule-strong);border-radius:var(--r);padding:.35rem .75rem}

/* Four reasons, numbered because they are a ranked pitch, not a set of equals. */
.valueprops{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));
  gap:clamp(1.25rem,2.5vw,2.25rem);padding-bottom:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--rule);padding-top:clamp(1.75rem,3.5vw,2.5rem)}
.vp{display:flex;gap:.85rem;align-items:flex-start}
.vpn{font-family:var(--f-mono);font-size:.72rem;font-weight:700;color:var(--accent);
  font-variant-numeric:tabular-nums;padding-top:.15rem;flex-shrink:0}
.vp div{font-size:.86rem;color:var(--fg-mid);line-height:1.6}
.vp b{display:block;color:var(--fg);font-size:.95rem;font-weight:700;letter-spacing:-.01em;
  margin-bottom:.3rem}

/* ============================================================
   Products
   ============================================================ */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));
  gap:clamp(1rem,1.8vw,1.5rem)}
.prod{background:var(--bg-card);border:1px solid var(--rule);border-radius:var(--r-lg);
  overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.prod:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--rule-strong)}
.prod:hover .arrow{background:var(--accent);color:#fff;border-color:var(--accent)}
.prod-img{height:184px;position:relative;overflow:hidden}
.prod-img img{width:100%;height:100%;object-fit:cover;display:block}
.prod-img .tagb{position:absolute;top:.7rem;left:.7rem;background:rgba(10,24,38,.75);color:#fff;
  backdrop-filter:blur(4px);font-family:var(--f-mono);font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.3rem .55rem;border-radius:2px}
.prod-body{padding:1.25rem 1.35rem 1.4rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.prod-body p{margin:0;font-size:.89rem;color:var(--fg-mid);line-height:1.6;flex:1}
.prod-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding-top:.85rem;border-top:1px solid var(--rule)}
.prod-foot .spec{font-family:var(--f-mono);font-size:.66rem;color:var(--fg-dim);
  font-variant-numeric:tabular-nums;line-height:1.4}
.arrow{width:32px;height:32px;flex-shrink:0;border:1.5px solid var(--rule-strong);border-radius:50%;
  display:grid;place-items:center;font-size:.85rem;transition:all .18s ease}

/* ============================================================
   Proof (COF)
   ============================================================ */
.proof-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(2rem,4.5vw,4rem);align-items:center}
.gauge{background:var(--bg-card);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(1.3rem,2.4vw,2rem);box-shadow:var(--shadow)}
.gauge-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  padding-bottom:1.1rem;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.gauge-top h3{font-size:1.02rem}
.gauge-top .sub{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-dim);margin-top:.2rem}
.seg{display:inline-flex;border:1.5px solid var(--rule-strong);border-radius:var(--r);overflow:hidden}
.seg button{font-family:var(--f-sans);font-size:.76rem;font-weight:700;padding:.42rem .85rem;
  background:transparent;border:0;cursor:pointer;color:var(--fg-dim)}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}

.reads{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin:1.4rem 0 1.6rem}
.read .rl{font-size:.74rem;color:var(--fg-dim);display:flex;align-items:center;gap:.45rem;
  margin-bottom:.3rem}
.dotc{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.read .rv{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-weight:600;
  font-size:clamp(2.3rem,5.2vw,3.1rem);line-height:1;letter-spacing:-.05em}
.read .rt{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  margin-top:.45rem;display:inline-block;padding:.16rem .5rem;border-radius:2px}
.t-pass{background:var(--accent);color:#fff}
.t-fail{background:var(--rule);color:var(--fg-dim)}

.gscale{position:relative;height:104px}
.gtrack{position:absolute;left:0;right:0;height:14px;background:var(--bg-soft);
  border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.gtrack.g1{top:18px}.gtrack.g2{top:42px}
.gtrack .zone{position:absolute;left:0;top:0;bottom:0;width:60%;
  background:repeating-linear-gradient(-45deg,transparent 0 5px,var(--rule) 5px 6px)}
.gbar{position:absolute;left:0;top:0;bottom:0;width:0;transition:width .9s cubic-bezier(.22,.9,.28,1)}
.gbar.u{background:var(--fg-dim);opacity:.55}
.gbar.t{background:var(--accent)}
.glabel{position:absolute;right:7px;top:50%;transform:translateY(-50%);font-family:var(--f-mono);
  font-size:.56rem;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-dim);pointer-events:none}
.gthresh{position:absolute;top:0;height:70px;left:60%;border-left:2px solid var(--measure);z-index:3}
.gthresh::after{content:"MIN 0.60";position:absolute;top:0;left:6px;white-space:nowrap;
  font-family:var(--f-mono);font-size:.58rem;font-weight:600;letter-spacing:.09em;color:var(--measure)}
.gticks{position:absolute;left:0;right:0;top:60px;display:flex;justify-content:space-between;
  font-family:var(--f-mono);font-size:.58rem;color:var(--fg-dim);font-variant-numeric:tabular-nums}
.gticks span{padding-top:.5rem;position:relative}
.gticks span::before{content:"";position:absolute;top:0;left:0;width:1px;height:4px;
  background:var(--rule-strong)}
.gfoot{margin:1.2rem 0 0;padding-top:.9rem;border-top:1px solid var(--rule);
  font-size:.76rem;color:var(--fg-dim);line-height:1.65}

.evidence{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.9rem}
.ev{margin:0;display:flex;flex-direction:column;gap:.6rem}
.ev-img{display:block;aspect-ratio:4/3;border-radius:var(--r);border:1px solid var(--rule)}
.ev figcaption{font-size:.79rem;color:var(--fg-dim);line-height:1.55}
.ev figcaption b{color:var(--fg-mid);font-weight:600}
@media (max-width:520px){.evidence{grid-template-columns:1fr}}

.benefits{display:grid;gap:.85rem;margin-top:1.75rem}
.ben{display:flex;gap:1rem;align-items:flex-start}
.ben .bv{font-family:var(--f-mono);font-size:.8rem;font-weight:600;color:var(--measure);
  white-space:nowrap;width:5.2rem;flex-shrink:0;padding-top:.15rem;font-variant-numeric:tabular-nums}
.ben .bt{font-size:.92rem;color:var(--fg-mid);line-height:1.55}
.ben .bt b{color:var(--fg);font-weight:700}

/* ============================================================
   Sectors
   ============================================================ */
.sect-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:.75rem}
.sect{background:var(--bg-card);border:1px solid var(--rule);border-radius:var(--r);
  padding:1rem 1.1rem;transition:border-color .16s,transform .16s}
.sect:hover{border-color:var(--accent);transform:translateY(-2px)}
.sect .n{font-size:.98rem;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.sect .d{font-size:.73rem;color:var(--fg-dim);margin-top:.2rem}

/* ============================================================
   References
   ============================================================ */
.reftabs{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1.75rem}
.reftabs button{font-size:.8rem;font-weight:600;padding:.5rem .95rem;background:transparent;
  border:1.5px solid var(--rule-strong);border-radius:var(--r);color:var(--fg-mid);cursor:pointer;
  font-family:inherit;transition:all .15s}
.reftabs button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.reftabs button:hover{color:var(--fg)}
.reflist{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:0 clamp(1.5rem,4vw,3.5rem)}
.ref{display:flex;align-items:center;gap:.9rem;width:100%;padding:.85rem 0;
  border:0;border-bottom:1px solid var(--rule);background:transparent;color:inherit;
  font-family:inherit;text-align:left;cursor:pointer}
.ref[hidden]{display:none}
.ref .sq{width:58px;height:58px;border-radius:var(--r);flex-shrink:0;border:1px solid var(--rule);
  transition:transform .18s ease}
.rmeta{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1}
.ref .rn{display:block;font-size:.92rem;font-weight:600;line-height:1.3}
.ref .rc{display:block;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--fg-dim)}
.rzoom{width:26px;height:26px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--rule);color:var(--fg-dim);opacity:0;transition:all .18s ease}
.rzoom svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round}
.ref:hover .sq,.ref:focus-visible .sq{transform:scale(1.06)}
.ref:hover .rn,.ref:focus-visible .rn{color:var(--accent)}
.ref:hover .rzoom,.ref:focus-visible .rzoom{opacity:1;color:var(--accent);border-color:var(--accent)}
@media (hover:none){.rzoom{opacity:1}}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:clamp(.75rem,3vw,2rem)}
.lb[hidden]{display:none}
.lb-backdrop{position:absolute;inset:0;background:rgba(8,14,20,.86);backdrop-filter:blur(3px)}
.lb-panel{position:relative;z-index:2;width:min(1000px,100%);max-height:100%;
  display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--rule);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  animation:lbIn .22s cubic-bezier(.22,.9,.28,1)}
@keyframes lbIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lb-panel{animation:none}}
.lb-img{width:100%;aspect-ratio:45/32;background-size:cover;background-position:center;
  background-repeat:no-repeat;background-color:var(--bg-soft);min-height:0}
.lb-x{position:absolute;top:.7rem;right:.7rem;z-index:3;width:38px;height:38px;border-radius:50%;
  border:0;cursor:pointer;background:rgba(8,14,20,.72);color:#fff;font-size:1.15rem;line-height:1;
  display:grid;place-items:center;backdrop-filter:blur(4px);transition:background .15s}
.lb-x:hover{background:var(--accent)}
.lb-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1rem 1.25rem;border-top:1px solid var(--rule)}
.lb-foot h3{margin:0;font-size:1.05rem;font-weight:700;letter-spacing:-.015em}
.lb-foot p{margin:.2rem 0 0;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--fg-dim)}
.lb-nav{display:flex;align-items:center;gap:.5rem}
.lb-nav button{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--rule-strong);
  background:transparent;color:var(--fg);cursor:pointer;font-size:1.1rem;line-height:1;
  display:grid;place-items:center;font-family:inherit;transition:all .15s}
.lb-nav button:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.lb-count{font-family:var(--f-mono);font-size:.72rem;color:var(--fg-dim);
  font-variant-numeric:tabular-nums;min-width:4.2rem;text-align:center}
.lb-hint{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-dim)}
@media (max-width:560px){
  .lb-foot{padding:.85rem 1rem}
  .lb-hint{display:none}
  .lb-img{aspect-ratio:4/3}
}

/* ============================================================
   About / brands
   ============================================================ */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4.5vw,4rem);align-items:center}
.applist{margin-top:1.75rem;padding-top:1.4rem;border-top:1px solid var(--rule)}
.applbl{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--fg-dim);display:block;margin-bottom:.75rem}
.applist ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.applist li{font-size:.79rem;color:var(--fg-mid);border:1px solid var(--rule);
  border-radius:100px;padding:.28rem .7rem;line-height:1.4}

.brandrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:.75rem;
  margin-top:2rem}
.bcard{background:var(--bg-card);border:1px solid var(--rule);border-radius:var(--r);
  padding:1rem 1.1rem}
.bcard .bn{font-size:1.12rem;font-weight:800;letter-spacing:-.025em;color:var(--accent);line-height:1.1}
.bcard .bd{font-size:.75rem;color:var(--fg-dim);margin-top:.3rem;line-height:1.5}
.aboutshot{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:.6rem;
  aspect-ratio:1/.86}
.aboutshot span{border-radius:var(--r);display:block}
.aboutshot span:first-child{grid-row:span 2}

/* ============================================================
   Contact
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,4.5vw,3.5rem);align-items:start}
form.q{display:grid;gap:1rem}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.fld{display:flex;flex-direction:column;gap:.35rem}
.fld label{font-size:.74rem;font-weight:600;color:var(--fg-mid);letter-spacing:.01em}
.fld input,.fld select,.fld textarea{
  font-family:inherit;font-size:.94rem;color:var(--fg);background:var(--bg-card);
  border:1.5px solid var(--rule-strong);border-radius:var(--r);padding:.75rem .85rem;width:100%}
.fld textarea{resize:vertical;min-height:110px;line-height:1.55}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent)}
.fnote{font-size:.76rem;color:var(--fg-dim);line-height:1.6;margin:0}

.info{background:var(--bg-card);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.inforow{padding:1.1rem 1.25rem;border-bottom:1px solid var(--rule)}
.inforow:last-child{border-bottom:0}
.inforow .k{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-dim);display:block;margin-bottom:.3rem}
.inforow .v{font-size:.95rem;line-height:1.55}
.inforow a{text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.inforow a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.telbig{font-family:var(--f-mono);font-size:1.35rem;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;border-bottom:0 !important}

/* Sales contact: the person's name and their phone number carry equal
   visual weight -- both are the primary information in this row. Role
   is demoted to a small pill so it reads as metadata, not competition. */
.contact-person{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-bottom:.5rem}
.cp-name{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;color:var(--fg)}
.cp-role{font-family:var(--f-mono);font-size:.58rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-dim);border:1px solid var(--rule-strong);
  border-radius:100px;padding:.2rem .6rem;line-height:1.4}
.cp-tel{display:inline-block;font-family:var(--f-mono);font-size:1.05rem;font-weight:700;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--accent);
  text-decoration:none;border-bottom:0 !important}
.cp-tel:hover{color:var(--red-deep)}

/* ============================================================
   Footer
   ============================================================ */
footer.site{background:var(--navy-3);color:#9FB0BF;
  --fg:#EAF0F5;--rule:rgba(234,240,245,.13)}
footer.site .wrap{padding-block:clamp(2.5rem,5vw,3.75rem)}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:2rem}
.fcol h4{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:#7A8B9A;
  margin:0 0 1rem;font-weight:600}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.fcol a{color:#9FB0BF;text-decoration:none;font-size:.87rem}
.fcol a:hover{color:#fff}
.fbrand .mark{font-size:1.6rem;font-weight:800;font-style:italic;color:#F04249;letter-spacing:-.035em}
.fbrand p{font-size:.85rem;line-height:1.7;max-width:36ch;margin:.75rem 0 0}
.fbot{border-top:1px solid var(--rule);margin-top:2.5rem;padding-top:1.4rem;display:flex;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.76rem;color:#7A8B9A}

/* mobile action bar */
.mobibar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--bg-card);
  border-top:1px solid var(--rule-strong);padding:.5rem .5rem calc(.5rem + env(safe-area-inset-bottom));
  gap:.45rem;box-shadow:0 -6px 20px -10px rgba(0,0,0,.35);
  transition:transform .32s cubic-bezier(.4,0,.2,1)}
.mobibar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:.25rem;
  text-decoration:none;padding:.5rem .2rem;font-size:.66rem;font-weight:600;color:var(--fg-mid);
  border:1px solid var(--rule);border-radius:var(--r)}
.mobibar a.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.mobibar .ic{width:18px;height:18px;display:block}
.mobibar .ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

.drawer{position:fixed;inset:0;z-index:90;background:var(--navy);color:#EAF0F5;display:none;
  flex-direction:column;overflow-y:auto}
.drawer[data-open="true"]{display:flex}
.drawer-top{display:flex;justify-content:space-between;align-items:center;
  padding:1rem var(--gutter);border-bottom:1px solid rgba(234,240,245,.14);min-height:70px}
.drawer nav{display:flex;flex-direction:column;padding:0 var(--gutter)}
.drawer nav a{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;text-decoration:none;
  padding:1.05rem 0;border-bottom:1px solid rgba(234,240,245,.12);display:flex;
  justify-content:space-between;align-items:center}
.drawer nav a small{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;color:#8C9BAA;
  font-weight:400}
.xbtn{background:none;border:1.5px solid rgba(234,240,245,.3);border-radius:var(--r);color:#EAF0F5;
  font-family:inherit;font-size:.78rem;font-weight:600;padding:.5rem .85rem;cursor:pointer}

.note{font-size:.76rem;color:var(--fg-dim);border:1px dashed var(--rule-strong);
  border-radius:var(--r);padding:.8rem 1rem;line-height:1.6;margin:1.25rem 0 0}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1080px){
  nav.main a{padding:.55rem .6rem;font-size:.82rem}
  .hdr-tel{display:none}
}
@media (max-width:920px){
  .proof-grid,.about-grid,.contact-grid{grid-template-columns:1fr}
  .hero-cine-copy{max-width:none}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  nav.main,.hdr-side{display:none}
  .burger{display:block}
  header.site .wrap{min-height:66px}
  .mobibar{display:flex}
  body{padding-bottom:74px}
  .frow{grid-template-columns:1fr}
  .reads{grid-template-columns:1fr 1fr;gap:1rem}
  .fgrid{grid-template-columns:1fr;gap:1.75rem}
  .hero-cine{min-height:auto}
  .hero-floorcard{flex-direction:column;align-items:flex-start}
  .sw{width:48px;height:48px}
  /* Auto-hide on scroll: only in effect at this width, where the fixed
     header + bottom action bar cost real reading space. Desktop keeps
     both bars pinned regardless of scroll direction. */
  header.site.nav-hidden{transform:translateY(-100%)}
  .mobibar.bar-hidden{transform:translateY(100%)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}