/* Depth layer (owner 2026-10-24: "too flat, make it modern"): loaded after every page stylesheet.
   Soft layered shadows, rounded surfaces, glass over photos, lit slate bands, 3D tilt (depth.js).
   Colours stay the pre-checked tokens, so contrast is unchanged. */

:root{
  --r:16px; --r-sm:10px; --r-lg:22px;
  --sh-1:0 1px 2px rgba(19,38,47,.06),0 4px 14px -4px rgba(19,38,47,.10);
  --sh-2:0 2px 4px rgba(19,38,47,.05),0 14px 34px -10px rgba(19,38,47,.22);
  --sh-3:0 4px 8px rgba(19,38,47,.06),0 30px 60px -18px rgba(19,38,47,.38);
  --glow-y:0 10px 26px -8px rgba(255,170,0,.55);
  --hair:rgba(28,53,65,.12);
  --glass:rgba(246,244,239,.78);
}

/* ---------- page atmosphere ---------- */
body{
  background:
    radial-gradient(1100px 600px at 92% -8%,rgba(255,194,0,.16),transparent 60%),
    radial-gradient(900px 700px at -10% 30%,rgba(28,53,65,.08),transparent 60%),
    linear-gradient(180deg,#ece9e3 0%,var(--paper) 40%,#e2dfd7 100%);
  background-attachment:fixed;
}

/* ---------- header: frosted glass ---------- */
.site-head{
  background:rgba(246,244,239,.72);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--hair);
  box-shadow:0 8px 24px -18px rgba(19,38,47,.5);
}

/* ---------- surfaces: rounded + layered ---------- */
.panel,.panel--frame,
.h-board__panel,.h-job,.h-fault,.h-route,.h-start__panel,
.s-card,.s-kit__box,.s-seq__step,.s-suggest,.s-buy,
.k-boq,.k-tally,.k-order,.k-form,
.o-card,.o-kit,.o-totals,.o-help,
.p-ab-open__panel,.note-box,.tbl-wrap{
  border-radius:var(--r);
  border:1px solid var(--hair);
  box-shadow:var(--sh-2);
}
.panel,.h-job,.s-card,.k-boq,.k-form,.o-totals,.s-kit__box,.s-seq__step{background:linear-gradient(180deg,#fbfaf7,var(--panel))}
.h-fault,.h-route,.s-card,.o-card,.tbl-wrap,.k-boq{overflow:hidden}
.note-box{border:1px solid rgba(163,58,18,.35);border-left:4px solid var(--warn);box-shadow:var(--sh-1)}
.k-tally,.s-buy{box-shadow:var(--sh-3)}
.h-board__panel{
  background:var(--glass);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:var(--sh-3),inset 0 1px 0 rgba(255,255,255,.7);
  overflow:hidden;position:relative;z-index:2;
}
.h-board__photo{border:0;border-radius:var(--r-lg) 0 0 var(--r-lg);overflow:hidden;box-shadow:var(--sh-3)}
.h-board__photo img{transform:scale(1.06) translateY(var(--para,0px));transition:transform .1s linear;will-change:transform}
.s-open__ph{border:0;border-radius:var(--r-lg) 0 0 var(--r-lg);box-shadow:var(--sh-3)}
.h-start__panel,.k-order,.o-help{
  background:linear-gradient(160deg,rgba(36,66,80,.92),rgba(19,38,47,.94));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.08);border-top:4px solid var(--yellow);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.55);
}
.duo{border-radius:calc(var(--r) - 4px)}
.h-fault .duo,.h-route .duo,.s-card .duo{border-radius:0}

/* ---------- lit slate bands ---------- */
.band{
  background:
    radial-gradient(800px 400px at 85% 0%,rgba(255,194,0,.12),transparent 60%),
    radial-gradient(700px 500px at 0% 100%,rgba(125,146,154,.18),transparent 60%),
    linear-gradient(180deg,#203d4a,var(--slate) 45%,var(--slate-2));
  position:relative;
}
.band::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/40px 40px,
             linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/40px 40px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%)}
.band>*{position:relative}

/* stage columns become raised glass tiles */
.h-stage{border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:clamp(18px,2vw,28px);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 40px -24px rgba(0,0,0,.6);
  transition:transform .3s var(--ease),background .3s}
.h-stage:hover{transform:translateY(-6px);background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.03))}
.h-stages__cols{gap:16px}
.band .ordinal{color:transparent;-webkit-text-stroke:0;background:linear-gradient(180deg,#ffe07a,var(--yellow) 55%,#c98f00);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 8px 18px rgba(255,194,0,.25))}
.ordinal{background:linear-gradient(180deg,rgba(28,53,65,.35),rgba(28,53,65,.08));-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:0;color:transparent}

/* ---------- buttons: tactile ---------- */
.btn{border-radius:var(--r-sm);border-width:0;
  background:linear-gradient(180deg,#ffd440,var(--yellow) 60%,#f2b400);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 0 rgba(0,0,0,.08),var(--glow-y);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s}
.btn:hover{transform:translateY(-2px);background:linear-gradient(180deg,#ffd75a,#ffc71a 60%,#f5ba00);color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 16px 30px -10px rgba(255,170,0,.65)}
.btn:active{transform:translateY(0);box-shadow:inset 0 2px 4px rgba(0,0,0,.15)}
.btn--ghost{background:rgba(255,255,255,.55);border:1.5px solid rgba(28,53,65,.35);box-shadow:var(--sh-1);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn--ghost:hover{background:var(--ink);color:var(--chalk);border-color:var(--ink);box-shadow:var(--sh-2)}
.btn--on-dark,.band .btn--ghost{background:rgba(255,255,255,.06);border:1.5px solid rgba(243,241,234,.55);box-shadow:none}
.btn--on-dark:hover,.band .btn--ghost:hover{background:var(--chalk);color:var(--ink)}
.band .btn:not(.btn--ghost):not(.btn--on-dark):hover{background:linear-gradient(180deg,#ffd75a,#ffc71a);color:var(--ink)}
.btn.is-in{background:rgba(255,255,255,.7);border:1.5px dashed rgba(28,53,65,.5);box-shadow:none}

/* chips, inputs */
.chip{border-radius:999px;border-color:var(--hair)}
.chip--yellow{border-color:transparent;box-shadow:0 4px 12px -6px rgba(255,170,0,.7)}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{
  border-radius:var(--r-sm);border:1px solid rgba(28,53,65,.22);background:#fff;
  box-shadow:inset 0 1px 2px rgba(19,38,47,.06);transition:border-color .15s,box-shadow .15s}
input:not([type=checkbox]):not([type=radio]):not([type=file]):hover,select:hover,textarea:hover{border-color:rgba(28,53,65,.45)}

/* tables: header row with depth */
.tbl thead th{background:linear-gradient(180deg,#264654,var(--slate))}
.tbl tbody tr{transition:background-color .15s}

/* ---------- cards: hover lift + 3D (tilt from depth.js) ---------- */
.lift:hover,.lift:focus-within{transform:translateY(-6px);box-shadow:var(--sh-3)}
[data-tilt]{transform-style:preserve-3d;transition:transform .35s var(--ease),box-shadow .35s var(--ease);will-change:transform}
[data-tilt]:hover{box-shadow:var(--sh-3)}
[data-tilt].is-tilting{transition:transform .08s linear,box-shadow .3s}
.h-job:hover,.h-job:has(input:checked){box-shadow:var(--sh-3)}
.h-job:has(input:checked){border-color:rgba(255,194,0,.9);box-shadow:0 0 0 3px rgba(255,194,0,.35),var(--sh-3)}

/* ---------- wall cutaway: real 3D model ---------- */
.h-cut__fig{perspective:1400px}
.h-cut__fig>*:first-child{transform:rotateY(-14deg) rotateX(6deg);transform-origin:40% 50%;
  transition:transform .8s var(--ease);border-radius:var(--r);
  box-shadow:-30px 40px 60px -30px rgba(19,38,47,.45),0 2px 6px rgba(19,38,47,.1)}
.h-cut__fig:hover>*:first-child,.h-cut__fig:focus-within>*:first-child{transform:rotateY(-4deg) rotateX(2deg)}
.h-cut__list li{border-radius:var(--r-sm);padding-left:10px}

/* fault strip and route photos zoom softly */
.h-fault img,.h-route img,.s-card img{transition:filter .4s,transform .6s var(--ease)}
.h-fault:hover img,.h-route:hover img,.s-card:hover img{transform:scale(1.05)}

/* order page stamps float */
.o-stamp__mark{border-radius:50%;box-shadow:var(--sh-2)}

/* footer: deeper gradient */
.site-foot{background:radial-gradient(900px 400px at 100% 0%,rgba(255,194,0,.08),transparent 60%),linear-gradient(180deg,var(--slate),#0e1e25)}

@media (max-width:860px){
  .h-board__photo,.s-open__ph{border-radius:var(--r-lg)}
  .h-cut__fig>*:first-child{transform:none}
}
@media (prefers-reduced-motion:reduce){
  [data-tilt],[data-tilt]:hover{transform:none !important}
  .h-board__photo img{transform:scale(1.06)}
  .btn:hover,.h-stage:hover,.lift:hover{transform:none}
}