/* ==========================================================================
   CASESFACTORY — Design System v1.0
   Direction: "Spec-Sheet Industrial" — the site reads like an engineering
   drawing package: graphite tool-steel, mould-steel, engineering paper,
   one safety-orange accent, monospace annotations, and dimension callouts
   drawn directly over real product photography.
   Tokens are the single source of truth; pages must not hard-code colours.
   ========================================================================== */

:root{
  /* --- surfaces ------------------------------------------------------- */
  --ink:          #0E1013;   /* graphite near-black            */
  --steel-900:    #15181D;
  --steel-800:    #1B1F26;
  --steel-700:    #242A33;
  --steel-600:    #323A45;
  --line:         #39424F;
  --line-soft:    rgba(255,255,255,.09);

  --paper:        #F1EEE7;   /* engineering paper              */
  --paper-2:      #E6E1D6;
  --paper-3:      #D8D2C4;
  --mold:         #C4C9D1;   /* mould steel                    */

  /* --- accents -------------------------------------------------------- */
  --orange:       #FF5A1F;   /* safety / hazard                */
  --orange-dk:    #D8400C;
  --orange-soft:  rgba(255,90,31,.14);
  --blueprint:    #63D3DE;   /* annotation cyan, used rarely   */
  --ok:           #78B664;
  --warn:         #E8B33A;

  /* --- type ----------------------------------------------------------- */
  --f-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-body:    "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "Consolas", monospace;

  --fs-hero:   clamp(2.25rem, 4.5vw, 4.35rem);
  --fs-h2:     clamp(1.85rem, 3.6vw, 3.35rem);
  --fs-h3:     clamp(1.15rem, 1.7vw, 1.6rem);
  --fs-lead:   clamp(1.02rem, 1.35vw, 1.3rem);
  --fs-body:   clamp(.95rem, .98vw, 1.04rem);
  --fs-mono:   .74rem;

  /* --- rhythm / geometry ---------------------------------------------- */
  --gutter:    clamp(1.1rem, 4vw, 4.5rem);
  --sec-y:     clamp(3.6rem, 8vw, 7.5rem);
  --maxw:      1420px;
  --r:         2px;           /* hard industrial corners        */
  --r-lg:      3px;
  --shadow:    0 26px 60px -28px rgba(0,0,0,.65);
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
}

/* ============================  RESET  =================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:var(--fs-body);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
::selection{background:var(--orange);color:#fff}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;
  padding:.7rem 1.1rem;font-family:var(--f-mono);font-size:.8rem}
.skip:focus{left:.6rem}

/* ============================  UTILS  =================================== */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.mono{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.09em;text-transform:uppercase}
.mono-sm{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.disp{font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 118;
  text-transform:uppercase;line-height:.93;letter-spacing:-.018em}
.grid2{display:grid;gap:clamp(1.4rem,3vw,3.2rem)}
/* .g2 = asymmetric two-column editorial split. Stacks on mobile, columns >=900px.
   Ratios are passed per instance with --c1 / --c2 so no page needs an inline
   grid-template-columns (inline columns never collapse — that caused a real
   horizontal overflow at 390px). */
.g2{display:grid;gap:clamp(1.4rem,3vw,3.2rem);grid-template-columns:1fr}
@media(min-width:900px){.g2{grid-template-columns:var(--c1,minmax(0,1fr)) var(--c2,minmax(0,1fr));align-items:start}}
/* grid items default to min-width:auto, which refuses to shrink below min-content
   and pushes wide media (the annotated <figure>) past the viewport on phones. */
.g2>*,.grid2>*,.sec-head>*,.facts>*,.flow>*{min-width:0}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--steel-700);max-width:62ch}
.dark .lead{color:#B9C0CB}
.eyebrow{display:flex;align-items:center;gap:.7rem;font-family:var(--f-mono);font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-bottom:1.1rem}
.eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.45;max-width:120px}
.eyebrow .idx{color:var(--steel-600)}
.dark .eyebrow .idx{color:#6C7686}
.hr-note{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;color:var(--steel-600);
  border-left:2px solid var(--orange);padding-left:.7rem;line-height:1.5}

/* ============================  TEXTURE  ================================= */
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.blueprint{background-image:
  linear-gradient(var(--line-soft) 1px,transparent 1px),
  linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:44px 44px,44px 44px}
.blueprint--fine{background-size:11px 11px,11px 11px;opacity:.5}

/* ============================  SECTION  ================================= */
section{position:relative}
.sec{padding-block:var(--sec-y)}
.dark{background:var(--steel-900);color:#E7EAEF}
.dark h2,.dark h3{color:#fff}
.paper-2{background:var(--paper-2)}
.sec-head{display:grid;gap:1.2rem;margin-bottom:clamp(2rem,4vw,3.4rem)}
@media(min-width:900px){.sec-head--split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:end;gap:3rem}}

/* gasket divider — the seam between sections */
.gasket{height:16px;background:
  repeating-linear-gradient(90deg,var(--steel-800) 0 9px,transparent 9px 18px) center/18px 2px no-repeat,
  var(--paper);position:relative}
.dark+.gasket{background-color:var(--steel-900)}
.gasket::before,.gasket::after{content:"";position:absolute;top:50%;translate:0 -50%;
  width:34px;height:9px;background:var(--orange);border-radius:1px}
.gasket::before{left:var(--gutter)}
.gasket::after{right:var(--gutter)}

/* ============================  HEADER  ================================== */
.topbar{background:var(--ink);color:#9AA4B2;border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:1.4rem;min-height:38px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}
.topbar a:hover{color:var(--orange)}
.topbar .sep{opacity:.35}
.topbar .push{margin-left:auto}
.langsw{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.langsw a{padding:.15rem .3rem;border:1px solid transparent}
.langsw a[aria-current="true"]{color:var(--orange);border-color:rgba(255,90,31,.45)}
/* unpublished languages are labels, not links — a visible link to a 404 is a
   dead link and a crawl-budget leak. build.py rewrites <a class=soon> to <span>. */
.langsw a.soon,.langsw span.soon{opacity:.42;cursor:default}
.langsw span.soon::after{content:" · soon";font-size:.85em;opacity:.7}

.nav{position:sticky;top:0;z-index:60;background:rgba(14,16,19,.94);color:#fff;
  border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.nav .wrap{display:flex;align-items:center;gap:1.6rem;min-height:74px}
.brand{display:flex;align-items:center;gap:.62rem;flex:0 0 auto}
.brand svg{width:34px;height:34px;flex:0 0 auto}
.brand b{font-family:var(--f-display);font-variation-settings:"wdth" 112;font-weight:800;
  font-size:1.16rem;letter-spacing:-.01em;text-transform:uppercase;line-height:1}
.brand b i{font-style:normal;color:var(--orange)}
.brand span{display:block;font-family:var(--f-mono);font-size:.55rem;letter-spacing:.22em;
  color:#7C8797;text-transform:uppercase;margin-top:3px}
.menu{display:none;gap:1.5rem;margin-left:auto;align-items:center}
@media(min-width:1080px){.menu{display:flex}}
.menu>li{position:relative}
.menu>a{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  padding:1.55rem 0;display:inline-flex;gap:.4rem;align-items:center;color:#DCE1E8}
.menu>a::after{content:"";width:0;height:2px;background:var(--orange);transition:width .3s var(--ease)}
.menu>a:hover::after,.menu>a[aria-current]::after{width:100%}
.menu li:hover .drop,.menu li:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop{position:absolute;top:100%;left:-1.1rem;min-width:260px;background:var(--steel-800);
  border:1px solid var(--line);padding:.55rem;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:.24s var(--ease);box-shadow:var(--shadow);z-index:5}
.drop a{display:flex;justify-content:space-between;gap:1rem;padding:.6rem .7rem;font-size:.86rem;color:#D6DBE3}
.drop a:hover{background:var(--steel-700);color:#fff}
.drop a em{font-family:var(--f-mono);font-size:.6rem;font-style:normal;color:var(--orange);align-self:center}
.nav-cta{display:flex;gap:.6rem;align-items:center;margin-left:auto}
@media(min-width:1080px){.nav-cta{margin-left:1.6rem}}
.burger{display:inline-flex;flex-direction:column;gap:5px;padding:.85rem;border:1px solid var(--line);
  background:transparent;margin-left:auto}
.burger i{width:20px;height:2px;background:#fff;display:block}
@media(min-width:1080px){.burger{display:none}}
#mnav{display:none;border-top:1px solid var(--line);background:var(--steel-900)}
#mnav.open{display:block}
#mnav a{display:block;padding:.85rem var(--gutter);border-bottom:1px solid rgba(255,255,255,.06);
  font-family:var(--f-mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:#D6DBE3}

/* ============================  BUTTONS  ================================= */
.btn{position:relative;display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.5rem;
  font-family:var(--f-mono);font-size:.73rem;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid transparent;border-radius:var(--r);cursor:pointer;transition:.25s var(--ease);
  background:var(--orange);color:#fff;overflow:hidden}
.btn:hover{background:var(--orange-dk);transform:translateY(-2px)}
.btn::after{content:"";position:absolute;right:0;top:0;bottom:0;width:6px;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.22) 0 3px,transparent 3px 6px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--steel-600)}
/* ghost buttons must invert on every dark surface — otherwise the label is invisible */
.dark .btn--ghost,.hero .btn--ghost,.phead .btn--ghost,.topbar .btn--ghost,footer .btn--ghost{color:#fff;border-color:var(--line)}
.dark .btn--ghost:hover,.hero .btn--ghost:hover,.phead .btn--ghost:hover,footer .btn--ghost:hover{color:var(--orange);border-color:var(--orange);background:rgba(255,90,31,.08)}
.btn--ghost::after{display:none}
.btn--ghost:hover{border-color:var(--orange);color:var(--orange);background:var(--orange-soft)}
.dark .btn--ghost{color:#fff;border-color:var(--line)}
.dark .btn--ghost:hover{color:var(--orange);border-color:var(--orange)}
.btn--sm{padding:.6rem 1rem;font-size:.66rem}
.btn--wide{padding:1.05rem 2rem}
.arrow{transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.tlink{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--orange);border-bottom:1px solid rgba(255,90,31,.3);
  padding-bottom:.25rem}
.tlink:hover{border-color:var(--orange)}

/* ============================  HERO  ==================================== */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero .wrap{display:grid;gap:clamp(2rem,4vw,3.5rem);padding-block:clamp(3rem,7vw,6.2rem)}
@media(min-width:1000px){.hero .wrap{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);align-items:center}}
.hero-media{position:relative;border:1px solid var(--line);background:var(--steel-800);overflow:hidden}
.hero-media video,.hero-media img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.96) contrast(1.04)}
.hero-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(14,16,19,.42),transparent 40%,rgba(14,16,19,.55))}
.hero-tag{position:absolute;z-index:3;left:0;bottom:0;background:var(--ink);border-top:1px solid var(--orange);
  border-right:1px solid var(--orange);padding:.55rem .9rem;font-family:var(--f-mono);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:#C9D1DB}
.hero-tag b{color:var(--orange)}
.hero h1{font-size:var(--fs-hero);margin:.4rem 0 1.15rem;overflow-wrap:break-word;hyphens:auto}
.hero h1 .o{color:var(--orange)}
.hero h1 .thin{font-weight:400;font-variation-settings:"wdth" 100;display:block;font-size:.42em;
  letter-spacing:.06em;color:#9FAAB8;margin-bottom:.5rem}
.hero .lead{color:#C2CAD5}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.9rem}
.caps{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin-top:1.8rem;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:#8F9AAB}
.caps span{position:relative;padding-left:.85rem}
.caps span::before{content:"";position:absolute;left:0;top:.42em;width:4px;height:4px;background:var(--orange)}
.hero-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:2.2rem}
@media(min-width:640px){.hero-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hero-stats div{background:var(--ink);padding:.95rem 1rem}
.hero-stats b{display:block;font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 112;
  font-size:1.75rem;line-height:1;color:#fff;white-space:nowrap}
.hero-stats b i{font-style:normal;color:var(--orange);font-size:.6em}
.hero-stats em{font-style:normal;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:#7F8A9A;display:block;margin-top:.45rem}

/* ticker */
.ticker{border-block:1px solid var(--line);background:var(--steel-900);overflow:hidden;color:#8B95A5}
.ticker div{display:flex;gap:2.4rem;white-space:nowrap;padding:.6rem 0;width:max-content;
  animation:slide 34s linear infinite;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}
.ticker b{color:var(--orange);font-weight:500}
@keyframes slide{to{transform:translateX(-50%)}}

/* =======================  DIMENSION CALLOUT  ============================
   The signature module: real product photography annotated like a drawing. */
.dim{position:relative;border:1px solid var(--line);background:var(--steel-800);overflow:hidden}
.dim img{width:100%;aspect-ratio:16/11;object-fit:cover}
.dim svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.dim .dl{stroke:var(--orange);stroke-width:1.1;fill:none;
  stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);
  animation:draw 1.15s var(--ease-out) forwards}
.dim .dt{fill:var(--orange);font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;opacity:0;
  animation:fadein .5s .55s var(--ease) forwards}
.dim .dt-bg{fill:rgba(14,16,19,.82);opacity:0;animation:fadein .5s .45s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}
.dim-cap{display:flex;justify-content:space-between;gap:1rem;padding:.7rem .9rem;border-top:1px solid var(--line);
  background:var(--ink);font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#8B95A5}
.dim-cap b{color:#fff;font-weight:500}
.dim-note{margin-top:.9rem;font-family:var(--f-mono);font-size:.66rem;line-height:1.7;color:var(--steel-600)}
.dark .dim-note{color:#7E8898}

/* ============================  CARDS  =================================== */
.cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:640px){.cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:700px){.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{position:relative;background:var(--paper);padding:0;overflow:hidden;transition:.3s var(--ease)}
.dark .card{background:var(--steel-800)}
.card:hover{background:var(--paper-2)}
.dark .card:hover{background:var(--steel-700)}
.card-img{position:relative;overflow:hidden;background:var(--steel-700)}
.card-img img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover .card-img img{transform:scale(1.045)}
.card-no{position:absolute;top:0;left:0;z-index:2;background:var(--ink);color:var(--orange);
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;padding:.35rem .6rem}
.card-body{padding:1.15rem 1.2rem 1.4rem}
.card-body h3{font-family:var(--f-display);font-weight:700;font-variation-settings:"wdth" 110;
  text-transform:uppercase;letter-spacing:-.01em;font-size:1.12rem;line-height:1.1;margin-bottom:.5rem}
.card-body p{font-size:.9rem;color:var(--steel-700);line-height:1.6}
.dark .card-body p{color:#AFB8C4}
.card-specs{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.9rem}
.chip{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--paper-3);padding:.22rem .5rem;color:var(--steel-600);background:rgba(255,255,255,.5)}
.dark .chip{border-color:var(--line);color:#98A2B0;background:rgba(255,255,255,.03)}
.card-go{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;font-family:var(--f-mono);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--orange);transition:width .3s var(--ease);z-index:3}
.card:hover::before{width:3px}

/* ============================  PROCESS  ================================= */
.flow{counter-reset:step;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:760px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1120px){.flow{grid-template-columns:repeat(5,minmax(0,1fr))}}
.step{counter-increment:step;background:var(--steel-900);padding:1.4rem 1.3rem 1.6rem;position:relative;transition:.3s var(--ease)}
.step:hover{background:var(--steel-800)}
.step::before{content:counter(step,decimal-leading-zero);position:absolute;top:1.2rem;right:1.2rem;
  font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 112;font-size:2.1rem;
  color:transparent;-webkit-text-stroke:1px var(--line);line-height:1}
.step h3{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange);margin:1.5rem 0 .6rem}
.step p{font-size:.88rem;color:#A9B3C0;line-height:1.6}
.step .t{display:inline-block;margin-top:.9rem;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;
  color:#7C8797;border:1px solid var(--line);padding:.2rem .5rem}

/* ============================  TABLE  =================================== */
.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th,.tbl td{text-align:left;padding:.85rem .9rem;border-bottom:1px solid var(--paper-3);vertical-align:top}
.dark .tbl th,.dark .tbl td{border-color:var(--line)}
.tbl thead th{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel-600);border-bottom:2px solid var(--ink);background:var(--paper-2)}
.dark .tbl thead th{color:#8E99A8;border-bottom-color:var(--orange);background:var(--steel-800)}
.tbl tbody tr:hover{background:rgba(255,90,31,.05)}
.tbl td b{font-family:var(--f-mono);font-weight:500;font-size:.85rem}
.tbl .num{font-family:var(--f-mono);font-size:.82rem;color:var(--steel-700)}
.dark .tbl .num{color:#9AA5B3}
.tbl-wrap{overflow-x:auto;border:1px solid var(--paper-3)}
.dark .tbl-wrap{border-color:var(--line)}

/* ============================  FAQ  ===================================== */
.faq{border-top:1px solid var(--paper-3)}
.dark .faq{border-color:var(--line)}
.faq details{border-bottom:1px solid var(--paper-3)}
.dark .faq details{border-color:var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 2.6rem 1.15rem 0;position:relative;
  font-family:var(--f-display);font-weight:700;font-variation-settings:"wdth" 108;text-transform:uppercase;
  letter-spacing:-.005em;font-size:1.02rem;transition:.2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:50%;translate:0 -50%;color:var(--orange);
  font-family:var(--f-mono);font-size:1.3rem;transition:.25s var(--ease)}
.faq details[open] summary::after{content:"–";transform:rotate(180deg)}
.faq summary:hover{color:var(--orange)}
.faq .a{padding:0 0 1.3rem;max-width:78ch;color:var(--steel-700);font-size:.94rem;line-height:1.7}
.dark .faq .a{color:#AFB8C4}
.faq .a p+p{margin-top:.7rem}

/* ============================  FORM  ==================================== */
.form{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:760px){.form{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field{background:var(--steel-900);padding:1.05rem 1.15rem;display:flex;flex-direction:column;gap:.5rem}
.field--full{grid-column:1/-1}
.field label{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:#98A2B0}
.field label .req{color:var(--orange)}
.field input,.field select,.field textarea{background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:.5rem 0;color:#fff;font-size:.98rem;width:100%;border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--orange)}
.field select option{background:var(--steel-800)}
.field textarea{min-height:110px;resize:vertical}
.field .hint{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.06em;color:#6D7787;text-transform:none}
.field.bad input,.field.bad select{border-color:#E0574B}
.field .err{display:none;font-family:var(--f-mono);font-size:.62rem;color:#F0776A}
.field.bad .err{display:block}
.dims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.unit{display:inline-flex;border:1px solid var(--line);font-family:var(--f-mono);font-size:.62rem}
.unit button{background:transparent;border:0;padding:.35rem .7rem;color:#8B95A5;cursor:pointer}
.unit button[aria-pressed="true"]{background:var(--orange);color:#fff}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.8rem;color:#98A2B0;line-height:1.5}
.consent input{width:16px;height:16px;accent-color:var(--orange);flex:0 0 auto;margin-top:.2rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ok-msg{display:none;border:1px solid var(--ok);background:rgba(120,182,100,.1);padding:1.2rem 1.4rem;color:#CFE6C6}
.ok-msg.show{display:block}

/* ============================  FACTS  =================================== */
.facts{border:1px solid var(--line);background:var(--steel-800)}
.facts h3{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange);padding:.85rem 1.1rem;border-bottom:1px solid var(--line);background:rgba(255,90,31,.07)}
.facts dl{margin:0;padding:.4rem 1.1rem 1rem;display:grid;grid-template-columns:1fr;gap:0}
.facts dl>div{display:flex;justify-content:space-between;gap:1.2rem;padding:.6rem 0;border-bottom:1px dashed rgba(255,255,255,.09)}
.facts dl>div:last-child{border-bottom:0}
.facts dt{font-size:.82rem;color:#9AA5B3}
.facts dd{margin:0;font-family:var(--f-mono);font-size:.74rem;color:#fff;text-align:right;letter-spacing:.04em}
.facts dd.pending{color:var(--warn)}
.facts .stamp{padding:.7rem 1.1rem;border-top:1px solid var(--line);font-family:var(--f-mono);
  font-size:.6rem;letter-spacing:.1em;color:#6D7787;text-transform:uppercase}

/* ============================  GALLERY  ================================= */
.gal{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);grid-template-columns:2fr}
@media(min-width:820px){.gal{grid-template-columns:repeat(6,1fr)}
  .gal>*:nth-child(1){grid-column:span 4;grid-row:span 2}
  .gal>*:nth-child(2),.gal>*:nth-child(3){grid-column:span 2}
  .gal>*:nth-child(n+4){grid-column:span 2}}
.gal figure{position:relative;margin:0;background:var(--steel-800);overflow:hidden}
.gal img{width:100%;height:100%;object-fit:cover;min-height:150px;transition:transform .8s var(--ease),filter .4s}
.gal figure:hover img{transform:scale(1.04)}
.gal figcaption{position:absolute;inset:auto 0 0 0;padding:.6rem .8rem;background:linear-gradient(transparent,rgba(14,16,19,.92));
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:#C6CEDA}

/* ============================  CALLOUT BOX  ============================= */
.note{border-left:3px solid var(--orange);background:var(--orange-soft);padding:1rem 1.2rem;font-size:.9rem;line-height:1.65}
.note b{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:.35rem;color:var(--orange-dk)}
.dark .note{background:rgba(255,90,31,.08)}
.dark .note b{color:var(--orange)}
.pending{border:1px dashed var(--warn);color:var(--warn);font-family:var(--f-mono);font-size:.64rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.5rem .7rem;display:inline-block}

/* ============================  FOOTER  ================================ */
footer{background:var(--ink);color:#8B95A5;padding-block:clamp(2.6rem,5vw,4.4rem) 0;position:relative}
.fgrid{display:grid;gap:2.2rem;padding-bottom:2.6rem}
@media(min-width:900px){.fgrid{grid-template-columns:1.5fr repeat(3,1fr)}}
.fgrid h4{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:1rem}
.fgrid li{margin-bottom:.55rem;font-size:.88rem}
.fgrid a:hover{color:var(--orange)}
.flegal{border-top:1px solid var(--line);padding:1.4rem 0 1.1rem;display:grid;gap:.7rem;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.06em;line-height:1.7;color:#6D7787}
@media(min-width:800px){.flegal{grid-template-columns:1fr auto;align-items:start}}
.flegal a{color:#8B95A5}
.flegal a:hover{color:var(--orange)}
.wa{position:fixed;right:1rem;bottom:1rem;z-index:70;display:inline-flex;align-items:center;gap:.55rem;
  background:var(--orange);color:#fff;padding:.8rem 1.05rem;font-family:var(--f-mono);font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;box-shadow:0 14px 34px -12px rgba(255,90,31,.75);border-radius:var(--r)}
.wa:hover{background:var(--orange-dk)}

/* ============================  REVEAL  ================================== */
.rise{opacity:0;transform:translateY(22px)}
.in .rise,.rise.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease-out);
  transition-delay:calc(var(--d,0)*80ms)}
.mask{clip-path:inset(0 100% 0 0);animation:wipe 1s var(--ease-out) forwards;animation-delay:calc(var(--d,0)*90ms)}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}

/* ============================  BREADCRUMB  ============================== */
.crumb{display:flex;flex-wrap:wrap;gap:.5rem;font-family:var(--f-mono);font-size:.64rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--steel-600);padding-block:1rem}
.crumb a:hover{color:var(--orange)}
.crumb li+li::before{content:"/";margin-right:.5rem;color:var(--paper-3)}
.dark .crumb li+li::before{color:var(--line)}
.dark .crumb{color:#7C8797}

/* page head */
.phead{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.phead .wrap{padding-block:clamp(2.4rem,5vw,4rem)}
.phead h1{font-size:clamp(2rem,4.6vw,3.9rem);margin:.6rem 0 .9rem}
.phead .lead{color:#B9C0CB}

/* product spec block */
.spec{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);grid-template-columns:1fr}
@media(min-width:520px){.spec{grid-template-columns:repeat(2,minmax(0,1fr))}}
.spec>div{background:var(--paper);padding:.85rem 1rem;display:flex;justify-content:space-between;gap:1rem}
.dark .spec>div{background:var(--steel-800)}
.spec dt{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel-600)}
.dark .spec dt{color:#8B95A5}
.spec dd{margin:0;font-size:.88rem;font-weight:500;text-align:right}

/* thumbs */
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:1px}
.thumbs button{border:0;background:var(--steel-800);padding:0;cursor:pointer;position:relative}
.thumbs img{aspect-ratio:1;object-fit:cover;width:100%;opacity:.62;transition:.25s}
.thumbs button[aria-pressed="true"] img,.thumbs button:hover img{opacity:1}
.thumbs button[aria-pressed="true"]::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--orange)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rise{opacity:1;transform:none}.mask{clip-path:none}
  .dim .dl{stroke-dashoffset:0}.dim .dt,.dim .dt-bg{opacity:1}
}

/* ---- small phones: the wordmark alone must fit next to the CTA + burger ---- */
@media (max-width:560px){
  .brand span span{display:none}                 /* drop tagline, keep CASESFACTORY */
  .brand b{font-size:1.02rem}
  .brand svg{width:28px;height:28px}
  .nav .wrap{gap:.6rem;min-height:62px}
  .nav-cta{margin-left:auto;gap:.45rem}
  .nav .nav-cta .btn{padding:.62rem .72rem;font-size:.6rem;letter-spacing:.07em}
  .burger{padding:.68rem .6rem}
  .topbar .wrap{gap:.55rem .9rem;min-height:34px;font-size:.6rem}
  .topbar .langsw a{padding:.1rem .22rem}
  .wa{right:.7rem;bottom:.7rem;padding:.62rem .8rem;font-size:.6rem}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dim-cap{flex-direction:column;gap:.2rem}
}