@import url("../tokens/fonts.css");

/* ==========================================================================
   Scaffold — built properly. A premium builder's website kit.
   Board-marked concrete, oak, galvanised steel and one hi-vis orange.
   Colours, spacing, radii and shadows come from tokens.css; motion lives here.
   Rules: transform/opacity only for movement; entrances fill BACKWARDS;
   box-shadow changes only on one element's hover/press; nothing loops idle.
   ========================================================================== */

:root {
  /* easings (mirrors of the tokens, with fallbacks) */
  --sc-press: var(--ease-press, cubic-bezier(.5, 0, .9, .4));
  --sc-thunk: var(--ease-thunk, cubic-bezier(.25, 1.7, .45, 1));
  --sc-slide: var(--ease-slide, cubic-bezier(.16, 1, .3, 1));
  --sc-settle: var(--ease-settle, cubic-bezier(.3, 1.35, .5, 1));
  --sc-exit: var(--ease-exit, cubic-bezier(.4, 0, 1, 1));
  /* a damped spring for liquids: the bubble overshoots, swings back and settles */
  --sc-bubble: linear(0, .32 10%, .78 22%, 1.1 34%, 1.14 40%, 1.04 52%, .97 62%, 1.01 76%, 1);
  /* durations */
  --sc-t-press: var(--duration-press, 70ms);
  --sc-t-thunk: var(--duration-thunk, 260ms);
  --sc-t-quick: var(--duration-quick, 160ms);
  --sc-t-slide: var(--duration-slide, 320ms);
  --sc-t-panel: var(--duration-panel, 560ms);
  --sc-t-settle: var(--duration-settle, 720ms);
  --sc-t-extend: var(--duration-extend, 900ms);
  --sc-plinth: 5px;
  --sc-focus: var(--chalk);
  --sc-plinth-steel: #090b0d;
  --sc-scrim: rgb(13 16 19 / .62);
  /* board-marked concrete: speckle, faint board grain, formwork joints offset by half a board, tie-holes */
  --sc-ground: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='336'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .28 0 0 0 0 .25 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='480' height='336' filter='url(%23n)'/%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.035'%3E%3Cpath d='M0 38c90-4 170 5 260 0s160-3 220 1M0 92c120 3 210-5 300-1s130 4 180 0M0 131c70-2 150 3 240 0s170-4 240 1M0 206c110-3 200 4 300 0s120-3 180 1M0 262c80 4 170-3 250 0s160 4 230-1M0 300c120-2 220 3 300 0s130-2 180 1'/%3E%3C/g%3E%3Cg fill='%23d0ccc2'%3E%3Crect y='166.5' width='480' height='1.5'/%3E%3Crect y='334.5' width='480' height='1.5'/%3E%3Crect x='0' y='0' width='1.5' height='168'/%3E%3Crect x='240' y='168' width='1.5' height='168'/%3E%3C/g%3E%3Cg fill='%23c9c4b9'%3E%3Ccircle cx='120' cy='84' r='4.5'/%3E%3Ccircle cx='360' cy='84' r='4.5'/%3E%3Ccircle cx='0' cy='252' r='4.5'/%3E%3Ccircle cx='240' cy='252' r='4.5'/%3E%3Ccircle cx='480' cy='252' r='4.5'/%3E%3C/g%3E%3Cpath fill='none' stroke='%23f2f0eb' stroke-width='1.2' d='M123.5 86.5a4.5 4.5 0 0 1-6 1.5M363.5 86.5a4.5 4.5 0 0 1-6 1.5M3.5 254.5a4.5 4.5 0 0 1-6 1.5M243.5 254.5a4.5 4.5 0 0 1-6 1.5M483.5 254.5a4.5 4.5 0 0 1-6 1.5'/%3E%3C/svg%3E");
  --sc-ground-size: 480px 336px;
  color-scheme: light;
}
[data-theme="dark"] {
  color-scheme: dark;
  --sc-scrim: rgb(0 0 0 / .7);
  --sc-plinth-steel: #000;
  /* steel: blued plate with a low diamond tread and a little mill-scale noise */
  --sc-ground: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='%231e2327'%3E%3Crect x='3' y='8' width='14' height='4' rx='2' transform='rotate(-45 10 10)'/%3E%3Crect x='23' y='28' width='14' height='4' rx='2' transform='rotate(-45 30 30)'/%3E%3Crect x='23' y='8' width='14' height='4' rx='2' transform='rotate(45 30 10)'/%3E%3Crect x='3' y='28' width='14' height='4' rx='2' transform='rotate(45 10 30)'/%3E%3C/g%3E%3Cg fill='%23242a2f'%3E%3Crect x='4' y='8' width='12' height='1' rx='.5' transform='rotate(-45 10 10)'/%3E%3Crect x='24' y='28' width='12' height='1' rx='.5' transform='rotate(-45 30 30)'/%3E%3Crect x='24' y='8' width='12' height='1' rx='.5' transform='rotate(45 30 10)'/%3E%3Crect x='4' y='28' width='12' height='1' rx='.5' transform='rotate(45 10 30)'/%3E%3C/g%3E%3C/svg%3E");
  --sc-ground-size: 40px 40px;
}

body {
  margin: 0;
  background-color: var(--page);
  background-image: var(--sc-ground);
  background-size: var(--sc-ground-size);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 25px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }
.sc-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
:where(.sc-root) :focus-visible, .sc-focusable:focus-visible { outline: 3px solid var(--sc-focus); outline-offset: 2px; }
:focus-visible { outline: 3px solid var(--sc-focus); outline-offset: 2px; }
.sc-on-steel { --sc-focus: var(--hivis); }
.sc-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
.sc-display, .sc-title, .sc-heading, .sc-figure { font-family: var(--font-display); margin: 0; color: inherit; }
.sc-display { font-size: 76px; line-height: 68px; font-weight: 800; letter-spacing: .005em; text-transform: uppercase; }
.sc-title { font-size: 48px; line-height: 46px; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; }
.sc-heading { font-size: 28px; line-height: 30px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.sc-figure { font-size: 44px; line-height: 44px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-stencil { font-family: var(--font-stencil); font-weight: 800; font-size: 18px; line-height: 20px; letter-spacing: .12em; text-transform: uppercase; }
.sc-lead { font-size: 20px; line-height: 30px; margin: 0; }
.sc-p { margin: 0; font-size: 16px; line-height: 25px; }
.sc-small { font-size: 14px; line-height: 20px; }
.sc-soft { color: var(--ink-soft); }
.sc-label { font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sc-overline { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.sc-overline::before { content: ""; width: 10px; height: 10px; background: var(--hivis); flex: none; }
.sc-num { font-variant-numeric: tabular-nums; }
.sc-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hivis); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: text-decoration-color var(--sc-t-quick); }
.sc-link:hover { text-decoration-color: var(--ink); }
.sc-prose a { color: var(--chalk); text-underline-offset: 3px; }
@media (max-width: 720px) {
  .sc-display { font-size: 52px; line-height: 48px; }
  .sc-title { font-size: 36px; line-height: 36px; }
  .sc-heading { font-size: 24px; line-height: 26px; }
  .sc-figure { font-size: 36px; line-height: 38px; }
  .sc-lead { font-size: 18px; line-height: 27px; }
}

/* ---------- layout helpers ---------- */
.sc-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--space-8); }
@media (max-width: 720px) { .sc-wrap { padding: 0 var(--space-4); } }
.sc-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.sc-col { display: flex; flex-direction: column; gap: var(--space-4); }
.sc-stage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-4); padding: var(--space-6); }
.sc-stage--col { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.sc-cap { width: 100%; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); display: flex; align-items: center; gap: 10px; }
.sc-cap::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- surfaces ---------- */
.sc-surface { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); color: var(--ink); }
.sc-steel { background: var(--steel); color: var(--steel-ink); --ink: var(--steel-ink); --ink-soft: color-mix(in srgb, var(--steel-ink) 72%, var(--steel)); --sc-focus: var(--hivis); --line: rgb(255 255 255 / .12); }

/* ---------- entrances (all fill backwards; .is-in is set once by Scaffold.reveal) ---------- */
@keyframes sc-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes sc-hoard { from { opacity: 0; transform: translateX(-36px); } }
@keyframes sc-fade { from { opacity: 0; } }
@keyframes sc-snap { from { transform: scaleX(0); } }
[data-sc-reveal]:not(.is-in) .sc-brick, [data-sc-reveal]:not(.is-in).sc-rise { opacity: 0; }
.sc-bricks.is-in > * { animation: sc-rise 520ms var(--sc-slide) backwards; animation-delay: calc(var(--sc-i, 0) * 70ms); }
.sc-bricks:not(.is-in) > * { opacity: 0; }
.sc-rise.is-in { animation: sc-rise 560ms var(--sc-slide) backwards; animation-delay: calc(var(--sc-i, 0) * 80ms); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  .sc-bricks:not(.is-in) > *, [data-sc-reveal]:not(.is-in).sc-rise { opacity: 1; }
}

/* =============================================================== Button
   A machine button: a solid face on a 5px plinth. Hover rises 1px; press travels 4px down onto the plinth
   in 70ms (ease-press); release springs back with one small rebound over 260ms (ease-thunk) — the thunk. */
.sc-btn {
  --_face: var(--surface); --_fg: var(--ink); --_edge: var(--line-strong); --_base: var(--steel); --_p: var(--sc-plinth);
  position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; margin: 0 0 var(--_p); border: 1.5px solid var(--_edge); border-radius: var(--radius-md);
  background: var(--_face); color: var(--_fg);
  font: 700 19px/1 var(--font-display); letter-spacing: .07em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  box-shadow: 0 var(--_p) 0 var(--_base), inset 0 1px 0 rgb(255 255 255 / .28);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform var(--sc-t-thunk) var(--sc-thunk), box-shadow var(--sc-t-thunk) var(--sc-thunk), background-color var(--sc-t-quick), border-color var(--sc-t-quick);
}
.sc-btn::after { content: ""; position: absolute; z-index: -1; inset: -3px -5px calc(-1 * var(--_p) - 6px) -3px; }
.sc-btn .sc-icon { width: 20px; height: 20px; stroke-width: 2.2; }
.sc-btn__label { position: relative; top: 1px; }
.sc-btn:hover { transform: translateY(-1px); box-shadow: 0 calc(var(--_p) + 1px) 0 var(--_base), inset 0 1px 0 rgb(255 255 255 / .28); }
.sc-btn:hover .sc-btn__end { transform: translateX(3px); }
.sc-btn__end { transition: transform var(--sc-t-slide) var(--sc-slide); }
.sc-btn:active:not(:disabled), .sc-btn.is-pressed {
  transform: translateY(calc(var(--_p) - 1px)); box-shadow: 0 1px 0 var(--_base), inset 0 2px 0 rgb(0 0 0 / .12);
  transition-duration: var(--sc-t-press); transition-timing-function: var(--sc-press);
}
.sc-btn--primary { --_face: var(--hivis); --_fg: var(--hivis-ink); --_edge: var(--hivis-deep); --_base: var(--hivis-deep); }
.sc-btn--primary:hover { --_face: color-mix(in srgb, var(--hivis) 92%, #fff); }
.sc-btn--steel { --_face: var(--steel); --_fg: var(--steel-ink); --_edge: var(--steel); --_base: var(--sc-plinth-steel); }
[data-theme="dark"] .sc-btn--steel { --_face: #3a4248; --_edge: #4b545b; }
.sc-btn--danger { --_face: var(--stop); --_fg: var(--surface); --_edge: color-mix(in srgb, var(--stop) 70%, #000); --_base: color-mix(in srgb, var(--stop) 55%, #000); }
.sc-btn--ghost { --_face: transparent; --_edge: transparent; --_p: 0px; box-shadow: none; padding: 0 6px; }
.sc-btn--ghost::before { content: ""; position: absolute; left: 6px; right: 6px; bottom: 9px; height: 2px; background: var(--hivis); transform: scaleX(.35); transform-origin: left; transition: transform var(--sc-t-slide) var(--sc-slide); }
.sc-btn--ghost:hover { transform: none; box-shadow: none; }
.sc-btn--ghost:hover::before { transform: scaleX(1); }
.sc-btn--ghost:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.sc-btn--sm { min-height: 38px; padding: 0 16px; font-size: 16px; --_p: 4px; gap: 8px; }
.sc-btn--sm .sc-icon { width: 17px; height: 17px; }
.sc-btn--lg { min-height: 60px; padding: 0 30px; font-size: 23px; --_p: 6px; gap: 12px; }
.sc-btn--lg .sc-icon { width: 23px; height: 23px; }
.sc-btn--block { display: flex; width: 100%; }
.sc-btn:disabled, .sc-btn[aria-disabled="true"] { --_face: var(--surface-sunk); --_fg: var(--ink-soft); --_edge: var(--line); --_base: var(--line); cursor: not-allowed; transform: translateY(calc(var(--_p) - 2px)); box-shadow: 0 2px 0 var(--_base); }
.sc-btn.is-loading { pointer-events: none; }
.sc-btn.is-loading > :not(.sc-btn__bricks) { opacity: 0; }
/* the loader lays three bricks in running bond, over and over, only while loading */
.sc-btn__bricks { position: absolute; inset: 0; display: grid; place-content: center; grid-template-columns: repeat(3, 12px); grid-template-rows: 6px 6px; gap: 2px; }
.sc-btn__bricks i { background: currentColor; border-radius: 1px; animation: sc-lay 960ms steps(1) infinite backwards; }
.sc-btn__bricks i:nth-child(1) { grid-column: 1; grid-row: 2; }
.sc-btn__bricks i:nth-child(2) { grid-column: 2; grid-row: 2; animation-delay: 160ms; }
.sc-btn__bricks i:nth-child(3) { grid-column: 3; grid-row: 2; animation-delay: 320ms; }
.sc-btn__bricks i:nth-child(4) { grid-column: 1 / span 2; grid-row: 1; margin-left: 7px; animation-delay: 480ms; }
@keyframes sc-lay { 0% { opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }

/* ============================================================ IconButton */
.sc-iconbtn {
  --_face: var(--surface); --_fg: var(--ink); --_edge: var(--line-strong); --_base: var(--steel); --_p: 3px;
  position: relative; z-index: 0; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0 0 var(--_p); padding: 0;
  border: 1.5px solid var(--_edge); border-radius: var(--radius-md); background: var(--_face); color: var(--_fg);
  box-shadow: 0 var(--_p) 0 var(--_base); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--sc-t-thunk) var(--sc-thunk), box-shadow var(--sc-t-thunk) var(--sc-thunk), background-color var(--sc-t-quick);
}
.sc-iconbtn::after { content: ""; position: absolute; z-index: -1; inset: -3px -5px -9px -3px; }
.sc-iconbtn:hover { transform: translateY(-1px); box-shadow: 0 calc(var(--_p) + 1px) 0 var(--_base); }
.sc-iconbtn:active:not(:disabled) { transform: translateY(calc(var(--_p) - 1px)); box-shadow: 0 1px 0 var(--_base); transition-duration: var(--sc-t-press); transition-timing-function: var(--sc-press); }
.sc-iconbtn[aria-pressed="true"] { --_face: var(--steel); --_fg: var(--hivis); --_edge: var(--steel); --_base: var(--sc-plinth-steel); transform: translateY(1px); box-shadow: 0 calc(var(--_p) - 1px) 0 var(--_base); }
.sc-iconbtn--ghost { --_face: transparent; --_edge: transparent; --_p: 0px; box-shadow: none; }
.sc-iconbtn--ghost:hover { transform: none; box-shadow: none; background: var(--surface-sunk); }
.sc-iconbtn--steel { --_face: var(--steel); --_fg: var(--steel-ink); --_edge: var(--steel); --_base: var(--sc-plinth-steel); }
.sc-iconbtn--primary { --_face: var(--hivis); --_fg: var(--hivis-ink); --_edge: var(--hivis-deep); --_base: var(--hivis-deep); }
.sc-iconbtn--sm { width: 36px; height: 36px; }
.sc-iconbtn--sm .sc-icon { width: 17px; height: 17px; }
.sc-iconbtn:disabled { opacity: .45; cursor: not-allowed; }
.sc-iconbtn__count { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--hivis); color: var(--hivis-ink); font: 700 12px/20px var(--font-body); font-variant-numeric: tabular-nums; }

/* ============================================================ Toggle: a spirit level
   The track is a level's steel stock with a vial set into it. Switching on, the bubble runs right and settles
   between the two hi-vis marks (a damped spring, 720ms) — level, done. Off, it rests at the left end. */
.sc-toggle { display: inline-flex; align-items: center; gap: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sc-toggle__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sc-level { position: relative; flex: none; width: 76px; height: 34px; padding: 5px 7px; border-radius: var(--radius-sm); background: var(--steel); box-shadow: 0 2px 0 var(--sc-plinth-steel); }
[data-theme="dark"] .sc-level { background: #3a4248; }
.sc-level::before, .sc-level::after { content: ""; position: absolute; top: 15px; width: 3px; height: 3px; border-radius: 50%; background: rgb(255 255 255 / .35); }
.sc-level::before { left: 2px; } .sc-level::after { right: 2px; }
.sc-level__vial { position: relative; display: block; height: 24px; border-radius: 12px; overflow: hidden; background: #e9eee0; box-shadow: inset 0 2px 3px rgb(0 0 0 / .22), inset 0 -1px 0 rgb(255 255 255 / .5); }
.sc-level__liquid { position: absolute; inset: 0; background: #c8db55; opacity: .35; transition: opacity var(--sc-t-slide); }
.sc-level__marks { position: absolute; top: 0; bottom: 0; left: 31px; width: 26px; border-left: 2px solid var(--hivis-deep); border-right: 2px solid var(--hivis-deep); opacity: .55; transition: opacity var(--sc-t-slide); }
.sc-level__bubble { position: absolute; top: 4px; left: 3px; width: 22px; height: 16px; border-radius: 50%; background: radial-gradient(ellipse at 40% 35%, #fff 0 30%, #f4f7ea 60%, #dfe6c8 100%); box-shadow: 0 0 0 1px rgb(80 90 40 / .25); transition: transform var(--sc-t-settle) var(--sc-bubble); }
.sc-toggle__input:checked + .sc-level .sc-level__bubble { transform: translateX(31px); }
.sc-toggle__input:checked + .sc-level .sc-level__liquid { opacity: 1; }
.sc-toggle__input:checked + .sc-level .sc-level__marks { opacity: 1; }
.sc-toggle__input:focus-visible + .sc-level { outline: 3px solid var(--sc-focus); outline-offset: 3px; }
.sc-toggle:active .sc-level { transform: translateY(1px); box-shadow: 0 1px 0 var(--sc-plinth-steel); }
.sc-toggle__input:disabled + .sc-level { opacity: .45; }
.sc-toggle:has(.sc-toggle__input:disabled) { cursor: not-allowed; }
.sc-choice__text, .sc-toggle__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-choice__label, .sc-toggle__label { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ink); }
.sc-choice__hint, .sc-toggle__hint { font-size: 14px; line-height: 20px; color: var(--ink-soft); }

/* ======================================================= Checkbox / Radio */
.sc-choice { position: relative; display: inline-flex; align-items: flex-start; gap: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sc-choice__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sc-choice__box { position: relative; flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow-inset); border-radius: var(--radius-sm); transition: background-color var(--sc-t-quick), border-color var(--sc-t-quick), transform var(--sc-t-thunk) var(--sc-thunk); }
.sc-choice:active .sc-choice__box { transform: translateY(1px); transition-duration: var(--sc-t-press); }
.sc-choice__mark { width: 18px; height: 18px; fill: none; stroke: var(--hivis); stroke-width: 3; stroke-linecap: square; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 220ms var(--sc-slide); }
.sc-choice__input:checked + .sc-choice__box { background: var(--steel); border-color: var(--steel); }
[data-theme="dark"] .sc-choice__input:checked + .sc-choice__box { background: #3a4248; border-color: #4b545b; }
.sc-choice__input:checked + .sc-choice__box .sc-choice__mark { stroke-dashoffset: 0; }
.sc-choice__input:indeterminate + .sc-choice__box { background: var(--steel); border-color: var(--steel); }
.sc-choice__input:indeterminate + .sc-choice__box::after { content: ""; width: 12px; height: 3px; background: var(--hivis); }
.sc-choice__input:indeterminate + .sc-choice__box .sc-choice__mark { display: none; }
.sc-choice--radio .sc-choice__box { border-radius: 50%; }
.sc-choice--radio .sc-choice__box::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--hivis); transform: scale(0); transition: transform var(--sc-t-thunk) var(--sc-thunk); }
.sc-choice--radio .sc-choice__input:checked + .sc-choice__box::after { transform: scale(1); }
.sc-choice__input:focus-visible + .sc-choice__box { outline: 3px solid var(--sc-focus); outline-offset: 2px; }
.sc-choice__input:disabled ~ * { opacity: .5; }
.sc-choice:has(.sc-choice__input:disabled) { cursor: not-allowed; }
.sc-choice__text { padding-top: 1px; }
.sc-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sc-fieldset > legend { padding: 0; margin-bottom: 14px; }
.sc-fieldset--row { flex-direction: row; flex-wrap: wrap; gap: 14px 24px; }

/* ChoiceCard: a big pressable tile used for the wizard's questions */
.sc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.sc-ccard { position: relative; z-index: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 16px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); box-shadow: 0 3px 0 var(--line-strong); cursor: pointer; text-align: left; font: inherit; margin-bottom: 3px; transition: transform var(--sc-t-thunk) var(--sc-thunk), box-shadow var(--sc-t-thunk) var(--sc-thunk), background-color var(--sc-t-quick), border-color var(--sc-t-quick); }
.sc-ccard::after { content: ""; position: absolute; z-index: -1; inset: -3px -5px -9px -3px; }
.sc-ccard:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--line-strong); }
.sc-ccard:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line-strong); transition-duration: var(--sc-t-press); transition-timing-function: var(--sc-press); }
.sc-ccard[aria-checked="true"] { background: var(--timber-soft); border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.sc-ccard__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--surface-sunk); color: var(--ink); transition: background-color var(--sc-t-quick), color var(--sc-t-quick); }
.sc-ccard__icon .sc-icon { width: 26px; height: 26px; stroke-width: 1.8; }
.sc-ccard[aria-checked="true"] .sc-ccard__icon { background: var(--steel); color: var(--hivis); }
.sc-ccard__title { font: 700 21px/22px var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.sc-ccard__hint { font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.sc-ccard__tick { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--hivis); color: var(--hivis-ink); opacity: 0; transform: translateY(-4px); transition: opacity var(--sc-t-quick), transform var(--sc-t-thunk) var(--sc-thunk); }
.sc-ccard__tick .sc-icon { width: 16px; height: 16px; stroke-width: 3; }
.sc-ccard[aria-checked="true"] .sc-ccard__tick { opacity: 1; transform: none; }

/* ============================================================== TextField
   A sunk field. Focus snaps a blue chalk line along its foot (scaleX, 320ms). Errors are snags. */
.sc-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sc-field__label { font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.sc-field__label i { font-style: normal; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--ink-soft); }
.sc-field__box { position: relative; display: flex; align-items: center; min-height: 50px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-inset); transition: border-color var(--sc-t-quick); overflow: hidden; }
.sc-field__box::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 3px; background: var(--chalk); transform: scaleX(0); transform-origin: left; transition: transform var(--sc-t-slide) var(--sc-slide); }
.sc-field__box:focus-within { border-color: var(--ink); }
.sc-field__box:focus-within::after { transform: scaleX(1); }
.sc-field__input { flex: 1; min-width: 0; height: 47px; padding: 0 14px; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 16px/22px var(--font-body); }
textarea.sc-field__input { height: auto; min-height: 112px; padding: 12px 14px; resize: vertical; }
.sc-field__input::placeholder { color: var(--ink-soft); opacity: .85; }
.sc-field__affix { display: grid; place-items: center; align-self: stretch; padding: 0 12px; color: var(--ink-soft); font-weight: 600; background: var(--surface-sunk); }
.sc-field__affix:first-child { border-right: 1px solid var(--line); }
.sc-field__affix:last-child { border-left: 1px solid var(--line); }
.sc-field__hint { font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.sc-field__error { display: none; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--stop); }
.sc-field__error .sc-icon { width: 18px; height: 18px; margin-top: 1px; }
.sc-field.is-error .sc-field__box { border-color: var(--stop); }
.sc-field.is-error .sc-field__box::after { background: var(--stop); transform: scaleX(1); }
.sc-field.is-error .sc-field__error { display: flex; animation: sc-fade 200ms backwards; }
.sc-field.is-error .sc-field__hint { display: none; }
.sc-field.is-disabled .sc-field__box { background: var(--surface-sunk); opacity: .7; }

/* ================================================================= Select */
.sc-select { position: relative; }
.sc-select__btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 0 12px 0 14px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 400 16px/22px var(--font-body); text-align: left; cursor: pointer; box-shadow: 0 2px 0 var(--line); transition: border-color var(--sc-t-quick); }
.sc-select__btn:hover { border-color: var(--ink); }
.sc-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-select__value.is-placeholder { color: var(--ink-soft); }
.sc-select__btn .sc-icon { transition: transform var(--sc-t-slide) var(--sc-slide); }
.sc-select.is-open .sc-select__btn .sc-icon { transform: rotate(180deg); }
.sc-select.is-open .sc-select__btn { border-color: var(--ink); }
.sc-menu { position: fixed; z-index: 80; min-width: 180px; max-height: 300px; overflow: auto; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-md); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity var(--sc-t-quick), transform var(--sc-t-slide) var(--sc-slide); }
.sc-menu[data-side="top"] { transform: translateY(6px); }
.sc-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.sc-menu__opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: var(--radius-sm); cursor: pointer; color: var(--ink); }
.sc-menu__opt .sc-icon { width: 18px; height: 18px; color: var(--hivis-deep); opacity: 0; }
[data-theme="dark"] .sc-menu__opt .sc-icon { color: var(--hivis); }
.sc-menu__opt[aria-selected="true"] { font-weight: 700; }
.sc-menu__opt[aria-selected="true"] .sc-icon { opacity: 1; }
.sc-menu__opt.is-active { background: var(--surface-sunk); box-shadow: inset 3px 0 0 var(--ink); }
.sc-menu__opt small { margin-left: auto; color: var(--ink-soft); font-size: 13px; }

/* ================================================================= Slider: a steel rule with a marking clamp */
.sc-slider { display: flex; flex-direction: column; gap: 10px; min-width: 0; user-select: none; }
.sc-slider__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sc-slider__out { font: 700 30px/30px var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); min-width: 4ch; text-align: right; }
.sc-slider__out small { font-size: .6em; letter-spacing: .04em; color: var(--ink-soft); margin-left: 2px; }
.sc-slider__rule { position: relative; height: 40px; margin: 0 11px; touch-action: none; cursor: pointer; outline: none; }
.sc-slider__rule::before { content: ""; position: absolute; left: -11px; right: -11px; top: 6px; height: 26px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background:
  repeating-linear-gradient(90deg, var(--line-strong) 0 1.5px, transparent 1.5px 100%) 10px 0 / calc((100% - 22px) / 10) 12px no-repeat,
  repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 100%) 10px 0 / calc((100% - 22px) / 50) 6px no-repeat,
  var(--surface-sunk); box-shadow: var(--shadow-inset); }
.sc-slider__rule::before { background-repeat: repeat-x, repeat-x, no-repeat; background-size: calc((100% - 22px) / 10) 12px, calc((100% - 22px) / 50) 6px, auto; background-position: 10px 0, 10px 0, 0 0; }
.sc-slider__fill { position: absolute; left: -10px; right: -10px; top: 26px; height: 5px; background: var(--hivis); transform-origin: left; transform: scaleX(var(--_f, 0)); border-radius: 0 0 0 2px; }
.sc-slider__track { position: absolute; left: 0; top: 0; bottom: 0; width: 0; transform: translateX(calc(var(--_p, 0) * var(--_w, 0px) / 100)); transition: transform var(--sc-t-slide) var(--sc-slide); pointer-events: none; }
.sc-slider.is-dragging .sc-slider__track, .sc-slider.is-dragging .sc-slider__fill, .sc-slider:not(.is-ready) .sc-slider__track, .sc-slider:not(.is-ready) .sc-slider__fill { transition: none; }
.sc-slider__fill { transition: transform var(--sc-t-slide) var(--sc-slide); }
.sc-slider__clamp { position: absolute; left: -11px; top: 0; width: 22px; height: 40px; border-radius: 3px; background: var(--steel); box-shadow: 0 3px 0 var(--sc-plinth-steel); transition: transform var(--sc-t-thunk) var(--sc-thunk); }
[data-theme="dark"] .sc-slider__clamp { background: #4a535a; }
.sc-slider__clamp::before { content: ""; position: absolute; left: 10px; top: 4px; bottom: 4px; width: 2px; background: var(--hivis); }
.sc-slider__clamp::after { content: ""; position: absolute; left: 4px; right: 4px; top: 4px; height: 3px; border-top: 1px solid rgb(255 255 255 / .3); border-bottom: 1px solid rgb(255 255 255 / .3); }
.sc-slider__rule:hover .sc-slider__clamp { transform: translateY(-1px); }
.sc-slider.is-dragging .sc-slider__clamp { transform: translateY(2px); box-shadow: 0 1px 0 var(--sc-plinth-steel); transition-duration: var(--sc-t-press); }
.sc-slider__rule:focus-visible .sc-slider__clamp { outline: 3px solid var(--sc-focus); outline-offset: 2px; }
.sc-slider__scale { display: flex; justify-content: space-between; font-size: 13px; line-height: 16px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ================================================================== Tabs */
.sc-tabs__list { position: relative; display: flex; gap: 4px; border-bottom: 1.5px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.sc-tabs__list::-webkit-scrollbar { display: none; }
.sc-tab { position: relative; flex: none; min-height: 48px; padding: 0 16px; border: 0; background: transparent; color: var(--ink-soft); font: 700 19px/1 var(--font-display); letter-spacing: .07em; text-transform: uppercase; cursor: pointer; transition: color var(--sc-t-quick); }
.sc-tab:hover { color: var(--ink); }
.sc-tab[aria-selected="true"] { color: var(--ink); }
.sc-tab:focus-visible { outline-offset: -3px; }
.sc-tabs__rail { position: absolute; left: 0; bottom: -1.5px; width: 100px; height: 4px; background: var(--hivis); transform-origin: left; transition: transform var(--sc-t-slide) var(--sc-slide); pointer-events: none; }
.sc-tabs__panel { padding-top: 20px; }
.sc-tabs__panel.is-entering { animation: sc-fade 260ms backwards; }

/* ====================================================== SegmentedControl */
.sc-seg { position: relative; display: inline-flex; padding: 4px; border-radius: var(--radius-md); background: var(--surface-sunk); border: 1px solid var(--line); box-shadow: var(--shadow-inset); max-width: 100%; }
.sc-seg__thumb { position: absolute; top: 4px; bottom: 4px; left: 0; width: 100px; border-radius: 3px; background: var(--steel); box-shadow: 0 2px 0 var(--sc-plinth-steel); transform-origin: left; transition: transform var(--sc-t-slide) var(--sc-slide); }
[data-theme="dark"] .sc-seg__thumb { background: #3f474e; }
.sc-seg__opt { position: relative; z-index: 1; flex: 1 0 auto; min-width: 0; min-height: 40px; padding: 0 16px; border: 0; background: transparent; color: var(--ink-soft); font: 600 15px/1 var(--font-body); white-space: nowrap; cursor: pointer; border-radius: 3px; transition: color var(--sc-t-quick); }
.sc-seg__opt:hover { color: var(--ink); }
.sc-seg__opt[aria-checked="true"] { color: var(--steel-ink); }
[data-theme="dark"] .sc-seg__opt[aria-checked="true"] { color: var(--ink); }
.sc-seg--block { display: flex; width: 100%; }
.sc-seg--block .sc-seg__opt { flex: 1 1 0; padding: 0 8px; }

/* ================================================================== Card */
.sc-card { position: relative; z-index: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; min-width: 0; }
.sc-card__media { position: relative; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; aspect-ratio: 16 / 10; background: var(--surface-sunk); }
.sc-card__media .sc-art, .sc-pic .sc-art { display: block; width: 100%; height: 100%; }
.sc-card__media .sc-art { transition: transform var(--sc-t-panel) var(--sc-slide); }
.sc-card__body { display: flex; flex-direction: column; gap: 10px; padding: var(--space-6); flex: 1; }
.sc-card__eyebrow { font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.sc-card__title { margin: 0; font: 700 26px/28px var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.sc-card__text { margin: 0; color: var(--ink-soft); }
.sc-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px var(--space-6); border-top: 1px solid var(--line); margin-top: auto; }
.sc-card--interactive { cursor: pointer; transition: transform var(--sc-t-slide) var(--sc-slide), box-shadow var(--sc-t-slide) var(--sc-slide); }
.sc-card--interactive::after { content: ""; position: absolute; z-index: -1; inset: -2px -6px -8px -2px; }
.sc-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.sc-card--interactive:hover .sc-card__media .sc-art { transform: scale(1.035); }
.sc-card--interactive:active { transform: translateY(-1px); transition-duration: var(--sc-t-press); }
.sc-card__go { display: inline-flex; align-items: center; gap: 8px; font: 700 17px/1 var(--font-display); letter-spacing: .07em; text-transform: uppercase; color: var(--ink); }
.sc-card__go .sc-icon { transition: transform var(--sc-t-slide) var(--sc-slide); color: var(--hivis-deep); }
[data-theme="dark"] .sc-card__go .sc-icon { color: var(--hivis); }
.sc-card--interactive:hover .sc-card__go .sc-icon { transform: translateX(4px); }
.sc-pic { position: relative; overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 16 / 10; background: var(--surface-sunk); }
.sc-pic--square { aspect-ratio: 1; } .sc-pic--wide { aspect-ratio: 21 / 9; } .sc-pic--tall { aspect-ratio: 4 / 5; } .sc-pic--photo { aspect-ratio: 4 / 3; }

/* ================================================================ Badge / Tag */
.sc-badge { --_bg: var(--surface-sunk); --_fg: var(--ink); --_bd: var(--line); display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: var(--radius-sm); border: 1px solid var(--_bd); background: var(--_bg); color: var(--_fg); font: 700 12px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.sc-badge .sc-icon { width: 14px; height: 14px; stroke-width: 2.4; }
.sc-badge__dot { width: 7px; height: 7px; background: currentColor; flex: none; }
.sc-badge--hivis { --_bg: var(--hivis); --_fg: var(--hivis-ink); --_bd: var(--hivis-deep); }
.sc-badge--go { --_bg: var(--go); --_fg: var(--surface); --_bd: var(--go); }
.sc-badge--stop { --_bg: var(--stop); --_fg: var(--surface); --_bd: var(--stop); }
.sc-badge--timber { --_bg: var(--timber-soft); --_fg: var(--ink); --_bd: color-mix(in srgb, var(--timber) 45%, transparent); }
.sc-badge--steel { --_bg: var(--steel); --_fg: var(--steel-ink); --_bd: var(--steel); }
.sc-badge--outline { --_bg: transparent; --_bd: var(--line-strong); }
.sc-badge--chalk { --_bg: transparent; --_fg: var(--chalk); --_bd: var(--chalk); }
/* hazard: a steel plate with a strip of chevron tape on its leading edge — for live/on-site states only */
.sc-badge--hazard { --_bg: var(--steel); --_fg: var(--steel-ink); --_bd: var(--steel); padding-left: 24px; position: relative; overflow: hidden; }
.sc-badge--hazard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 15px; background: repeating-linear-gradient(-45deg, var(--hivis) 0 4px, #1c2023 4px 8px); }
.sc-badge--lg { height: 32px; padding: 0 12px; font-size: 13px; }
.sc-tag { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 4px 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; }
.sc-tag.is-leaving { opacity: 0; transform: translateX(-8px); transition: opacity 180ms var(--sc-exit), transform 180ms var(--sc-exit); }
.sc-tag__x { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 2px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.sc-tag__x:hover { background: var(--surface-sunk); color: var(--ink); }
.sc-tag__x .sc-icon { width: 15px; height: 15px; }
.sc-tag--plain { padding-right: 12px; }

/* ================================================================ Avatar */
.sc-avatar { --_s: 44px; position: relative; display: inline-grid; place-items: center; width: var(--_s); height: var(--_s); flex: none; border-radius: 50%; background: var(--timber-soft); color: var(--ink); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--timber); font: 700 calc(var(--_s) * .4)/1 var(--font-display); letter-spacing: .04em; overflow: hidden; }
.sc-avatar--sm { --_s: 32px; } .sc-avatar--lg { --_s: 64px; } .sc-avatar--xl { --_s: 88px; }
.sc-avatar--steel { background: var(--steel); color: var(--steel-ink); }
.sc-steel .sc-avatar, .sc-footer .sc-avatar, .sc-case__facts .sc-avatar, .sc-callbar .sc-avatar { background: rgb(255 255 255 / .1); color: var(--steel-ink); box-shadow: 0 0 0 2px transparent, 0 0 0 4px var(--timber); }
.sc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sc-avatar__status { position: absolute; right: -1px; bottom: -1px; width: 30%; height: 30%; min-width: 10px; min-height: 10px; border-radius: 50%; background: var(--go); box-shadow: 0 0 0 2px var(--surface); }
.sc-avatars { display: inline-flex; }
.sc-avatars > .sc-avatar + .sc-avatar { margin-left: -6px; }
.sc-avatars__more { background: var(--surface-sunk); font-family: var(--font-body); font-size: 13px; font-weight: 700; }
.sc-person { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sc-person__name { font-weight: 700; line-height: 20px; }
.sc-person__role { font-size: 14px; line-height: 20px; color: var(--ink-soft); }

/* =============================================================== Tooltip: a steel site tag */
.sc-tipwrap { display: inline-flex; }
.sc-tip { position: fixed; z-index: 95; left: 0; top: 0; max-width: min(280px, calc(100vw - 16px)); padding: 9px 12px; border-radius: var(--radius-sm); background: var(--steel); color: var(--steel-ink); font-size: 14px; line-height: 20px; box-shadow: var(--shadow-md); pointer-events: none; opacity: 0; transition: opacity var(--sc-t-quick), transform var(--sc-t-slide) var(--sc-slide); }
[data-theme="dark"] .sc-tip { background: #e9e6df; color: #1c2023; }
.sc-tip b { display: block; font: 700 15px/18px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--hivis); margin-bottom: 2px; }
[data-theme="dark"] .sc-tip b { color: #a4400b; }
.sc-tip__arrow { position: absolute; width: 10px; height: 10px; background: inherit; transform: rotate(45deg); }
.sc-tip[data-side="top"] { transform: translateY(4px); } .sc-tip[data-side="bottom"] { transform: translateY(-4px); }
.sc-tip[data-side="left"] { transform: translateX(4px); } .sc-tip[data-side="right"] { transform: translateX(-4px); }
.sc-tip.is-open { opacity: 1; transform: none; }

/* ================================================================= Toast: a delivery note
   Slides in from the right; a hairline timer underneath pays out like tape. Max 3 on screen, the rest queue. */
.sc-toasts { position: fixed; z-index: 90; right: 24px; bottom: 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; width: min(400px, calc(100vw - 32px)); pointer-events: none; }
@media (max-width: 560px) { .sc-toasts { right: 16px; bottom: 16px; } }
.sc-toasts--inline { position: static; width: 100%; max-width: 420px; align-items: stretch; }
.sc-toast { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 36px; gap: 12px; align-items: start; width: 100%; padding: 14px 10px 16px 14px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-md); color: var(--ink); pointer-events: auto; overflow: hidden; animation: sc-toast-in var(--sc-t-panel) var(--sc-slide) backwards; }
@keyframes sc-toast-in { from { opacity: 0; transform: translateX(40px); } }
.sc-toast.is-leaving { opacity: 0; transform: translateX(40px); transition: opacity 220ms var(--sc-exit), transform 220ms var(--sc-exit); }
.sc-toast__plate { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--steel); color: var(--steel-ink); }
.sc-toast__plate .sc-icon { width: 22px; height: 22px; }
.sc-toast--go .sc-toast__plate { background: var(--go); color: var(--surface); }
.sc-toast--stop .sc-toast__plate { background: var(--stop); color: var(--surface); }
.sc-toast--hivis .sc-toast__plate { background: var(--hivis); color: var(--hivis-ink); }
.sc-toast__title { display: block; font: 700 20px/22px var(--font-display); letter-spacing: .05em; text-transform: uppercase; }
.sc-toast__msg { display: block; font-size: 15px; line-height: 22px; color: var(--ink-soft); margin-top: 2px; }
.sc-toast__x { margin: -2px 0 0; }
.sc-toast__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--hivis); transform-origin: left; animation: sc-timer linear forwards; }
@keyframes sc-timer { to { transform: scaleX(0); } }
.sc-toast:hover .sc-toast__timer { animation-play-state: paused; }
.sc-toasts__more { pointer-events: none; padding: 4px 10px; border-radius: var(--radius-sm); background: var(--steel); color: var(--steel-ink); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ================================================================= Modal / Sheet */
.sc-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; }
.sc-modal[hidden] { display: none; }
.sc-modal__scrim { position: absolute; inset: 0; background: var(--sc-scrim); animation: sc-fade var(--sc-t-slide) backwards; }
.sc-modal__panel { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: var(--space-8); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); outline: none; animation: sc-modal-in var(--sc-t-panel) var(--sc-slide) backwards; }
.sc-modal__panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--steel); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
@keyframes sc-modal-in { from { opacity: 0; transform: translateY(24px); } }
.sc-modal.is-leaving .sc-modal__panel { opacity: 0; transform: translateY(16px); transition: opacity 200ms var(--sc-exit), transform 200ms var(--sc-exit); }
.sc-modal.is-leaving .sc-modal__scrim { opacity: 0; transition: opacity 200ms var(--sc-exit); }
.sc-modal__x { position: absolute; top: 18px; right: 18px; }
.sc-modal__title { margin: 4px 48px 12px 0; font: 800 34px/34px var(--font-display); letter-spacing: .01em; text-transform: uppercase; }
.sc-modal__body { color: var(--ink-soft); }
.sc-modal__body > * + * { margin-top: 14px; }
.sc-modal__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: var(--space-6); }
.sc-modal--sheet { place-items: end center; padding: 0; }
.sc-modal--sheet .sc-modal__panel { width: min(640px, 100%); border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 86vh; animation-name: sc-sheet-in; padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); }
.sc-modal--sheet .sc-modal__panel::after { content: ""; position: absolute; top: 14px; left: 50%; width: 44px; height: 4px; margin-left: -22px; border-radius: 2px; background: var(--line-strong); }
@keyframes sc-sheet-in { from { transform: translateY(100%); } }
.sc-modal--sheet.is-leaving .sc-modal__panel { transform: translateY(100%); opacity: 1; transition: transform 260ms var(--sc-exit); }
@media (max-width: 560px) { .sc-modal__panel { padding: var(--space-6); } .sc-modal__title { font-size: 28px; line-height: 30px; } }

/* ============================================================== Progress: a tape measure
   A steel case on the left; the blade pays out of it to the value (translateX, 900ms ease-slide), its ticks and
   numbers travelling with it, the hi-vis hook leading. */
.sc-tape { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sc-tape__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sc-tape__label { font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sc-tape__value { font: 700 22px/22px var(--font-display); letter-spacing: .03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-tape__body { position: relative; display: flex; align-items: center; height: 48px; }
.sc-tape__case { position: relative; z-index: 2; flex: none; width: 52px; height: 48px; border-radius: 10px 10px 10px 4px; background: var(--steel); box-shadow: 0 3px 0 var(--sc-plinth-steel), inset 0 0 0 4px rgb(255 255 255 / .06); }
[data-theme="dark"] .sc-tape__case { background: #3a4248; }
.sc-tape__case::before { content: ""; position: absolute; left: 10px; top: 10px; width: 24px; height: 24px; border-radius: 50%; border: 3px solid rgb(255 255 255 / .16); }
.sc-tape__case::after { content: ""; position: absolute; right: 8px; top: 6px; width: 8px; height: 13px; border-radius: 2px; background: var(--hivis); }
.sc-tape__slot { position: relative; flex: 1; height: 26px; margin-left: -6px; overflow: hidden; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface-sunk); box-shadow: var(--shadow-inset); }
.sc-tape__blade { position: absolute; inset: 2px 0 2px 0; transform: translateX(calc((var(--_v, 0) - 100) * 1%)); transition: transform var(--sc-t-extend) var(--sc-slide); }
.sc-tape__strip { position: absolute; inset: 0 14px 0 0; border-radius: 1px; background:
  repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--ink) calc(10% - 2px) 10%) 0 0 / 100% 11px no-repeat,
  repeating-linear-gradient(90deg, transparent 0 calc(2% - 1px), var(--line-strong) calc(2% - 1px) 2%) 0 0 / 100% 6px no-repeat,
  var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sc-tape__nums { position: absolute; inset: 0 14px 0 0; }
.sc-tape__nums span { position: absolute; bottom: 1px; transform: translateX(calc(-100% - 4px)); font: 700 11px/11px var(--font-body); font-variant-numeric: tabular-nums; color: var(--stop); }
.sc-tape__hook { position: absolute; right: 0; top: -2px; bottom: -2px; width: 14px; background: var(--hivis); border-radius: 0 2px 2px 0; box-shadow: inset 3px 0 0 var(--hivis-deep); }
.sc-tape--sm .sc-tape__body { height: 34px; }
.sc-tape--sm .sc-tape__case { width: 38px; height: 34px; border-radius: 8px 8px 8px 3px; }
.sc-tape--sm .sc-tape__case::before { left: 7px; top: 7px; width: 16px; height: 16px; border-width: 2px; }
.sc-tape--sm .sc-tape__case::after { right: 6px; top: 5px; width: 6px; height: 9px; }
.sc-tape--sm .sc-tape__slot { height: 18px; }
.sc-tape--sm .sc-tape__nums { display: none; }
.sc-tape--sm .sc-tape__hook { width: 10px; }
.sc-tape--sm .sc-tape__strip { right: 10px; }
.sc-tape.is-done .sc-tape__hook { background: var(--go); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--go) 70%, #000); }

/* ============================================================== Accordion / FAQ */
.sc-acc { border-top: 1.5px solid var(--line-strong); }
.sc-acc__item { border-bottom: 1px solid var(--line-strong); }
.sc-acc__btn { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 64px; padding: 14px 0; border: 0; background: transparent; color: var(--ink); font: 600 18px/26px var(--font-body); text-align: left; cursor: pointer; }
.sc-acc__btn:focus-visible { outline-offset: 0; }
.sc-acc__q { flex: 1; min-width: 0; }
.sc-acc__no { flex: none; font: 800 15px/1 var(--font-stencil); letter-spacing: .1em; color: var(--ink-soft); width: 28px; }
.sc-acc__plate { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1.5px solid var(--line-strong); background: var(--surface); transition: background-color var(--sc-t-quick), border-color var(--sc-t-quick); }
.sc-acc__plate .sc-icon { transition: transform var(--sc-t-slide) var(--sc-thunk); }
.sc-acc__btn:hover .sc-acc__plate { border-color: var(--ink); }
.sc-acc__btn[aria-expanded="true"] .sc-acc__plate { background: var(--steel); border-color: var(--steel); color: var(--hivis); }
.sc-acc__btn[aria-expanded="true"] .sc-acc__plate .sc-icon { transform: rotate(45deg); }
.sc-acc__panel { padding: 0 52px 22px 44px; color: var(--ink-soft); }
.sc-acc__panel:not([hidden]) { animation: sc-acc-in 360ms var(--sc-slide) backwards; }
@keyframes sc-acc-in { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 560px) { .sc-acc__panel { padding: 0 0 20px 44px; } .sc-acc__btn { font-size: 17px; } }

/* ================================================================= Header */
.sc-header { position: relative; z-index: 40; }
.sc-header--sticky { position: sticky; top: 0; }
.sc-header__rail { background: var(--steel); color: var(--steel-ink); font-size: 13px; line-height: 16px; --sc-focus: var(--hivis); }
.sc-header__rail .sc-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.sc-header__rail a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.sc-header__rail .sc-icon { width: 15px; height: 15px; color: var(--hivis); }
.sc-header__railnote { display: inline-flex; align-items: center; gap: 8px; color: color-mix(in srgb, var(--steel-ink) 78%, var(--steel)); }
.sc-header__railnote::before { content: ""; width: 8px; height: 8px; background: var(--go); border-radius: 50%; }
[data-theme="light"] .sc-header__railnote::before, :root:not([data-theme="dark"]) .sc-header__railnote::before { background: #62c48a; }
.sc-header__bar { background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgb(0 0 0 / .03); }
.sc-header__bar .sc-wrap { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.sc-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; flex: none; }
.sc-brand__mark { width: 44px; height: 44px; flex: none; }
.sc-brand__name { display: block; font: 800 26px/24px var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.sc-brand__sub { display: block; font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.sc-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.sc-nav__link { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.sc-nav__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform var(--sc-t-slide) var(--sc-slide); }
.sc-nav__link:hover::after { transform: scaleX(1); }
.sc-nav__link[aria-current="page"]::after { background: var(--hivis); height: 3px; transform: scaleX(1); }
.sc-header__actions { display: flex; align-items: center; gap: 16px; flex: none; }
.sc-header__actions .sc-btn { margin-bottom: 0; }
.sc-header__phone { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font: 700 22px/1 var(--font-display); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.sc-header__phone .sc-icon { color: var(--hivis-deep); }
[data-theme="dark"] .sc-header__phone .sc-icon { color: var(--hivis); }
.sc-header__menu-btn { display: none; margin-bottom: 0; }
.sc-header__menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: 8px 0 24px; animation: sc-menu-in var(--sc-t-panel) var(--sc-slide) backwards; }
.sc-header__menu[hidden] { display: none; }
@keyframes sc-menu-in { from { opacity: 0; transform: translateY(-10px); } }
.sc-header__menu a.sc-mlink { display: flex; align-items: center; justify-content: space-between; min-height: 58px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font: 800 28px/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.sc-header__menu a.sc-mlink .sc-icon { color: var(--hivis-deep); }
.sc-header__menu-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
@media (max-width: 1020px) {
  .sc-nav, .sc-header__actions .sc-header__phone { display: none; }
  .sc-header__menu-btn { display: inline-grid; }
  .sc-header__actions { margin-left: auto; gap: 10px; }
  .sc-header__railnote { display: none; }
}
@media (max-width: 560px) {
  .sc-header__bar .sc-wrap { min-height: 64px; gap: 12px; }
  .sc-header__actions .sc-btn { display: none; }
  .sc-brand__mark { width: 38px; height: 38px; }
  .sc-brand__name { font-size: 22px; line-height: 21px; }
  .sc-header__rail .sc-wrap { justify-content: center; }
  .sc-header__rail .sc-header__hours { display: none; }
}
/* the mobile call bar: Call + Get a quote, pinned to the bottom of phones */
.sc-callbar { display: none; }
@media (max-width: 720px) {
  .sc-callbar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--steel); box-shadow: 0 -8px 20px -10px rgb(0 0 0 / .4); --sc-focus: var(--hivis); }
  .sc-callbar .sc-btn { margin-bottom: 4px; min-height: 46px; font-size: 18px; }
  .sc-has-callbar { padding-bottom: 76px; }
}

/* ================================================================= Footer */
.sc-footer { position: relative; background: var(--steel); color: var(--steel-ink); --ink: var(--steel-ink); --ink-soft: color-mix(in srgb, var(--steel-ink) 74%, var(--steel)); --line: rgb(255 255 255 / .12); --sc-focus: var(--hivis); }
.sc-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(90deg, var(--hivis) 0 2px, transparent 2px 24px), repeating-linear-gradient(90deg, rgb(255 255 255 / .2) 0 1px, transparent 1px 6px); background-size: auto 6px, auto 3px; background-repeat: repeat-x; }
.sc-footer__top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; padding: 64px 0 48px; }
.sc-footer__blurb { margin: 16px 0 20px; color: var(--ink-soft); max-width: 340px; font-size: 15px; line-height: 23px; }
.sc-footer .sc-brand { color: var(--steel-ink); }
.sc-footer__h { margin: 0 0 14px; font: 700 18px/20px var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--hivis); }
.sc-footer__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.sc-footer__list a { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; color: var(--steel-ink); text-decoration: none; font-size: 15px; }
.sc-footer__list a:hover { text-decoration: underline; text-decoration-color: var(--hivis); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.sc-footer__list .sc-icon { width: 16px; height: 16px; color: var(--hivis); }
.sc-footer__marks { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 20px 0 28px; border-top: 1px solid var(--line); font-size: 13px; line-height: 19px; color: var(--ink-soft); }
.sc-footer__bottom a { color: inherit; }
@media (max-width: 900px) { .sc-footer__top { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-top: 48px; } .sc-footer__about { grid-column: 1 / -1; } }
@media (max-width: 480px) { .sc-footer__top { grid-template-columns: 1fr; } }

/* ===================================================================== builder kit ===================== */
.sc-grid { display: grid; gap: var(--space-6); }
.sc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .sc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .sc-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .sc-grid--2, .sc-grid--3, .sc-grid--4 { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } }
.sc-ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sc-ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 22px; }
.sc-ticks .sc-icon { width: 18px; height: 18px; margin-top: 2px; color: var(--go); stroke-width: 2.6; }

/* ---------- Divider: the construction line ---------- */
.sc-divider { display: flex; align-items: center; gap: 14px; min-height: 28px; color: var(--ink); }
.sc-divider__no { display: grid; place-items: center; min-width: 40px; height: 28px; padding: 0 8px; border-radius: var(--radius-sm); background: var(--steel); color: var(--steel-ink); font: 800 16px/1 var(--font-stencil); letter-spacing: .1em; }
.sc-divider--steel .sc-divider__no { background: var(--hivis); color: var(--hivis-ink); }
.sc-divider__label { font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.sc-divider__line { position: relative; flex: 1; height: 2px; min-width: 24px; }
.sc-divider__line::before { content: ""; position: absolute; inset: 0; background: var(--chalk); transform-origin: left; border-radius: 1px; }
/* the chalk's dust: a faint, speckled second line just under the first */
.sc-divider__line i { position: absolute; left: 0; right: 0; top: 2px; height: 3px; opacity: .4; background: radial-gradient(circle, var(--chalk) .6px, transparent 1px) 0 0 / 5px 3px, radial-gradient(circle, var(--chalk) .5px, transparent .9px) 2px 1px / 7px 3px; }
.sc-divider__peg { position: relative; flex: none; width: 10px; height: 26px; margin-left: -6px; background: linear-gradient(var(--hivis) 0 7px, var(--timber) 7px); clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%); }
.sc-divider.is-in .sc-divider__line::before { animation: sc-snap var(--sc-t-extend) var(--sc-slide) backwards; animation-delay: 120ms; }
.sc-divider.is-in .sc-divider__line i { animation: sc-fade 500ms backwards; animation-delay: 700ms; }
.sc-divider.is-in .sc-divider__peg { animation: sc-peg 380ms var(--sc-thunk) backwards; animation-delay: 820ms; }
@keyframes sc-peg { from { opacity: 0; transform: translateY(-10px); } }
.sc-divider:not(.is-in) .sc-divider__line::before { transform: scaleX(0); }
.sc-divider:not(.is-in) .sc-divider__line i, .sc-divider:not(.is-in) .sc-divider__peg { opacity: 0; }
.sc-steel .sc-divider__line::before, .sc-footer .sc-divider__line::before { background: color-mix(in srgb, var(--chalk) 55%, #fff); }

.sc-shead { display: flex; flex-direction: column; gap: 22px; margin-bottom: var(--space-8); }
.sc-shead__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px 48px; align-items: end; }
.sc-shead__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.sc-shead--center .sc-shead__row { grid-template-columns: 1fr; text-align: center; justify-items: center; }
@media (max-width: 820px) { .sc-shead__row { grid-template-columns: 1fr; } .sc-shead { margin-bottom: var(--space-6); } }

/* ---------- ServiceCard ---------- */
.sc-service { overflow: hidden; }
.sc-service__swatch { display: block; height: 12px; }
.sc-swatch { display: block; width: 100%; height: 12px; }
.sc-service__body { display: flex; flex-direction: column; gap: 12px; padding: 22px var(--space-6) 18px; flex: 1; }
.sc-service__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.sc-service__plate { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--steel); color: var(--steel-ink); transition: transform var(--sc-t-thunk) var(--sc-thunk); }
[data-theme="dark"] .sc-service__plate { background: #3a4248; }
.sc-service__plate::after { content: ""; position: absolute; right: 0; top: 0; border-style: solid; border-width: 0 12px 12px 0; border-color: transparent var(--hivis) transparent transparent; }
.sc-service__plate .sc-icon { width: 30px; height: 30px; stroke-width: 1.8; }
.sc-service__meta { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px dashed var(--line-strong); margin: 0 var(--space-6); }
.sc-service__meta > span { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; }
.sc-service__meta > span + span { padding-left: 14px; border-left: 1px dashed var(--line-strong); }
.sc-service__meta small { font-size: 12px; line-height: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.sc-service__meta b { font: 700 22px/24px var(--font-display); letter-spacing: .02em; }
.sc-service .sc-card__foot { border-top: 1px solid var(--line); }

/* ---------- ProjectCard: hoarding panels ---------- */
.sc-project .sc-card__media { aspect-ratio: 4 / 3; }
.sc-project__type { position: absolute; left: 12px; top: 12px; }
.sc-project__plate { position: absolute; left: 0; bottom: 0; display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 24px); padding: 8px 14px 7px 12px; background: var(--steel); color: var(--steel-ink); font: 800 14px/1 var(--font-stencil); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top-right-radius: var(--radius-sm); }
.sc-project__plate b { color: var(--hivis); font-weight: 800; }
.sc-project__body { gap: 14px; }
.sc-project__where { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; }
.sc-project__where .sc-icon { width: 16px; height: 16px; }
.sc-project__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: auto 0 0; border-top: 1px solid var(--line); padding-top: 12px; }
.sc-project__stats div { min-width: 0; }
.sc-project__stats div + div { padding-left: 12px; border-left: 1px solid var(--line); }
.sc-project__stats dt { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.sc-project__stats dd { margin: 2px 0 0; font: 700 21px/24px var(--font-display); letter-spacing: .02em; white-space: nowrap; }
.sc-project--feature { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.sc-project--feature .sc-card__media { aspect-ratio: auto; min-height: 340px; border-radius: var(--radius-md) 0 0 var(--radius-md); }
.sc-project--feature .sc-card__body { padding: var(--space-8); }
@media (max-width: 760px) { .sc-project--feature { grid-template-columns: 1fr; } .sc-project--feature .sc-card__media { min-height: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-md) var(--radius-md) 0 0; } .sc-project--feature .sc-card__body { padding: var(--space-6); } }
.sc-hoarding.is-in > * { animation: sc-hoard var(--sc-t-panel) var(--sc-slide) backwards; animation-delay: calc(var(--sc-i, 0) * 110ms); }
.sc-hoarding:not(.is-in) > * { opacity: 0; }

/* ---------- BeforeAfter ---------- */
.sc-ba { display: flex; flex-direction: column; gap: 12px; }
.sc-ba__frame { position: relative; overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 16 / 10; background: var(--surface-sunk); touch-action: pan-y; cursor: ew-resize; user-select: none; box-shadow: var(--shadow-sm); }
.sc-ba__frame.sc-pic--wide { aspect-ratio: 21 / 9; }
@media (max-width: 620px) { .sc-ba__frame.sc-pic--wide { aspect-ratio: 4 / 3; } }
.sc-ba__after, .sc-ba__before { position: absolute; inset: 0; }
.sc-ba__after .sc-art, .sc-ba__before .sc-art { display: block; width: 100%; height: 100%; }
.sc-ba__tag { position: absolute; top: 12px; z-index: 2; padding: 6px 10px 5px; border-radius: var(--radius-sm); background: var(--steel); color: var(--steel-ink); font: 800 13px/1 var(--font-stencil); letter-spacing: .16em; text-transform: uppercase; pointer-events: none; transition: opacity var(--sc-t-quick); }
.sc-ba__tag--b { left: 12px; } .sc-ba__tag--a { right: 12px; background: var(--hivis); color: var(--hivis-ink); }
.sc-ba__track { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sc-ba__handle { position: absolute; left: 0; top: 0; bottom: 0; width: 0; pointer-events: auto; outline: none; }
.sc-ba__post { position: absolute; left: -2px; top: 0; bottom: 0; width: 4px; background: var(--steel-ink); box-shadow: 0 0 0 1px rgb(0 0 0 / .25); }
.sc-ba__knob { position: absolute; left: -24px; top: 50%; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-top: -24px; border-radius: var(--radius-md); background: var(--steel); color: var(--steel-ink); box-shadow: 0 4px 0 #0a0c0e; transition: transform var(--sc-t-thunk) var(--sc-thunk); }
.sc-ba__knob::before { content: ""; position: absolute; left: 50%; top: 9px; bottom: 9px; width: 2px; margin-left: -1px; background: var(--hivis); }
.sc-ba__knob .sc-icon { width: 16px; height: 16px; stroke-width: 2.6; }
.sc-ba__knob .sc-icon:first-child { margin-right: 6px; } .sc-ba__knob .sc-icon:last-child { margin-left: 6px; }
.sc-ba__frame:hover .sc-ba__knob { transform: translateY(-1px); }
.sc-ba.is-dragging .sc-ba__knob { transform: translateY(3px); box-shadow: 0 1px 0 #0a0c0e; transition-duration: var(--sc-t-press); }
.sc-ba__handle:focus-visible .sc-ba__knob { outline: 3px solid var(--hivis); outline-offset: 3px; }
.sc-ba.is-in .sc-ba__knob { animation: sc-nudge 1100ms var(--sc-thunk) backwards; animation-delay: 400ms; }
@keyframes sc-nudge { 0% { transform: translateX(0); } 30% { transform: translateX(-10px); } 60% { transform: translateX(8px); } 100% { transform: translateX(0); } }
.sc-ba__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- Gallery ---------- */
.sc-gallery { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sc-gallery__view { position: relative; }
.sc-gallery__stage { position: relative; overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 16 / 10; background: var(--surface-sunk); box-shadow: var(--shadow-sm); }
.sc-gallery__stage:focus-visible { outline: 3px solid var(--sc-focus); outline-offset: 3px; }
.sc-gallery__frame { position: absolute; inset: 0; }
.sc-gallery__frame .sc-art { display: block; width: 100%; height: 100%; }
.sc-gallery__frame.is-next { animation: sc-gal-next var(--sc-t-panel) var(--sc-slide) backwards; }
.sc-gallery__frame.is-prev { animation: sc-gal-prev var(--sc-t-panel) var(--sc-slide) backwards; }
@keyframes sc-gal-next { from { transform: translateX(100%); } }
@keyframes sc-gal-prev { from { transform: translateX(-100%); } }
.sc-gallery__ctrl { position: absolute; left: 0; right: 12px; bottom: 6px; display: flex; align-items: flex-end; justify-content: space-between; pointer-events: none; }
.sc-gallery__ctrl > * { pointer-events: auto; }
.sc-gallery__ctrl .sc-iconbtn { margin-bottom: 4px; }
.sc-gallery__count { padding: 9px 14px 8px; margin-bottom: -6px; border-top-right-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-md); background: var(--steel); color: var(--steel-ink); font: 800 15px/1 var(--font-stencil); letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.sc-gallery__cap { margin: 0; min-height: 20px; }
.sc-gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.sc-gallery__thumb { position: relative; padding: 0; border: 0; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 16 / 10; cursor: pointer; background: var(--surface-sunk); opacity: .78; transition: opacity var(--sc-t-quick), transform var(--sc-t-thunk) var(--sc-thunk); }
.sc-gallery__thumb .sc-art { display: block; width: 100%; height: 100%; }
.sc-gallery__thumb:hover { opacity: 1; transform: translateY(-2px); }
.sc-gallery__thumb[aria-selected="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--surface), 0 0 0 5px var(--hivis); }
@media (max-width: 620px) { .sc-gallery__thumbs { grid-template-columns: repeat(5, minmax(56px, 1fr)); overflow-x: auto; } }

/* ---------- Testimonial ---------- */
.sc-stars { display: inline-flex; gap: 2px; color: var(--line-strong); }
.sc-stars .sc-icon { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.sc-stars .sc-icon.is-on { color: var(--hivis); }
.sc-quote { position: relative; display: flex; flex-direction: column; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; min-width: 0; }
.sc-quote__main { position: relative; display: flex; flex-direction: column; gap: 16px; padding: var(--space-6); flex: 1; }
.sc-quote__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sc-quote__mark { width: 40px; height: 34px; fill: var(--timber); }
.sc-quote__text { margin: 0; flex: 1; }
.sc-quote__text p { margin: 0; font-size: 17px; line-height: 27px; }
.sc-quote__by { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--line); }
.sc-quote__pic { aspect-ratio: 16 / 9; overflow: hidden; }
.sc-quote__pic .sc-art { display: block; width: 100%; height: 100%; }
.sc-quote--feature { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); background: var(--timber-soft); border-color: color-mix(in srgb, var(--timber) 40%, transparent); }
.sc-quote--feature .sc-quote__pic { aspect-ratio: auto; min-height: 100%; }
.sc-quote--feature .sc-quote__main { padding: var(--space-8); }
.sc-quote--feature .sc-quote__text p { font-size: 22px; line-height: 33px; }
.sc-quote--feature .sc-quote__mark { width: 56px; height: 47px; }
.sc-quote--feature .sc-quote__by { border-color: color-mix(in srgb, var(--timber) 45%, transparent); }
@media (max-width: 760px) { .sc-quote--feature { grid-template-columns: 1fr; } .sc-quote--feature .sc-quote__pic { aspect-ratio: 16 / 9; } .sc-quote--feature .sc-quote__main { padding: var(--space-6); } .sc-quote--feature .sc-quote__text p { font-size: 19px; line-height: 29px; } }
.sc-rating { display: inline-flex; align-items: center; gap: 14px; }
.sc-rating__num { font: 800 56px/48px var(--font-display); }

/* ---------- AccreditationStrip ---------- */
.sc-accred { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.sc-accred__item { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.sc-accred__seal { width: 50px; height: 50px; flex: none; }
.sc-accred__shape { fill: var(--steel); }
.sc-accred__inner { fill: none; stroke: var(--steel-ink); stroke-width: 1.4; stroke-dasharray: 3 2; opacity: .55; }
.sc-accred__seal text { fill: var(--steel-ink); font-family: var(--font-stencil); font-weight: 800; letter-spacing: .06em; }
[data-theme="dark"] .sc-accred__shape { fill: #3a4248; }
.sc-accred__text { display: flex; flex-direction: column; min-width: 0; }
.sc-accred__text b { font-size: 14px; line-height: 18px; }
.sc-accred__text span { font-size: 12px; line-height: 16px; color: var(--ink-soft); }
.sc-accred--steel .sc-accred__item { background: transparent; border-color: rgb(255 255 255 / .14); }
.sc-accred--steel .sc-accred__shape { fill: var(--hivis); }
.sc-accred--steel .sc-accred__seal text { fill: var(--hivis-ink); }
.sc-accred--steel .sc-accred__inner { stroke: var(--hivis-ink); }

/* ---------- GuaranteeBadge: a cast plate ---------- */
.sc-guarantee { display: flex; align-items: center; gap: 24px; }
.sc-plate { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 132px; height: 132px; background: var(--steel); color: var(--steel-ink); clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); }
[data-theme="dark"] .sc-plate { background: #3a4248; }
.sc-plate::before { content: ""; position: absolute; inset: 7px; border: 1.5px solid rgb(255 255 255 / .22); clip-path: inherit; }
.sc-plate__rivet { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgb(255 255 255 / .55), rgb(255 255 255 / .12) 60%); }
.sc-plate__rivet:nth-child(1) { left: 14px; top: 14px; } .sc-plate__rivet:nth-child(2) { right: 14px; top: 14px; }
.sc-plate__rivet:nth-child(3) { left: 14px; bottom: 14px; } .sc-plate__rivet:nth-child(4) { right: 14px; bottom: 14px; }
.sc-plate__top, .sc-plate__bot { font: 800 12px/1 var(--font-stencil); letter-spacing: .2em; text-transform: uppercase; }
.sc-plate__num { font: 900 66px/58px var(--font-display); color: var(--hivis); margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.sc-guarantee--sm .sc-plate { width: 96px; height: 96px; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); }
.sc-guarantee--sm .sc-plate__num { font-size: 46px; line-height: 40px; }
.sc-guarantee--sm .sc-plate__top, .sc-guarantee--sm .sc-plate__bot { font-size: 10px; }
.sc-guarantee--sm .sc-plate__rivet { width: 5px; height: 5px; }
.sc-guarantee--sm .sc-plate__rivet:nth-child(1), .sc-guarantee--sm .sc-plate__rivet:nth-child(3) { left: 10px; } .sc-guarantee--sm .sc-plate__rivet:nth-child(2), .sc-guarantee--sm .sc-plate__rivet:nth-child(4) { right: 10px; }
.sc-guarantee--sm .sc-plate__rivet:nth-child(1), .sc-guarantee--sm .sc-plate__rivet:nth-child(2) { top: 10px; } .sc-guarantee--sm .sc-plate__rivet:nth-child(3), .sc-guarantee--sm .sc-plate__rivet:nth-child(4) { bottom: 10px; }
.sc-guarantee__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sc-guarantee.is-in .sc-plate { animation: sc-stamp 520ms var(--sc-thunk) backwards; animation-delay: 150ms; }
@keyframes sc-stamp { from { opacity: 0; transform: scale(1.12); } }
.sc-guarantee:not(.is-in) .sc-plate { opacity: 0; }
@media (max-width: 480px) { .sc-guarantee:not(.sc-guarantee--sm) { flex-direction: column; align-items: flex-start; } }

/* ---------- ProjectTimeline: the programme of works ---------- */
.sc-gantt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sc-gantt__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sc-gantt__grid, .sc-gantt__row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: center; }
.sc-gantt__unit { align-self: end; padding-bottom: 6px; }
.sc-gantt__ruler { position: relative; height: 30px; border-bottom: 1.5px solid var(--ink); background: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px calc(100% / var(--_n, 16))) 0 100% / 100% 8px no-repeat; }
.sc-gantt__ruler span { position: absolute; bottom: 10px; transform: translateX(-50%); font: 700 12px/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.sc-gantt__ruler span:first-child { transform: none; } .sc-gantt__ruler span:last-child { transform: translateX(-100%); }
.sc-gantt__rows { position: relative; display: flex; flex-direction: column; }
.sc-gantt__row { width: 100%; min-height: 54px; padding: 6px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.sc-gantt__row:hover .sc-gantt__name span { text-decoration: underline; text-decoration-color: var(--hivis); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.sc-gantt__row:focus-visible { outline-offset: -2px; }
.sc-gantt__name { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 700; }
.sc-gantt__name span { min-width: 0; }
.sc-gantt__name small { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sc-gantt__no { display: grid; place-items: center; flex: none; width: 30px; height: 26px; border-radius: var(--radius-sm); background: var(--surface-sunk); font: 800 13px/1 var(--font-stencil); letter-spacing: .08em; }
.sc-gantt__row[aria-pressed="true"] .sc-gantt__no { background: var(--steel); color: var(--hivis); }
.sc-gantt__lane { position: relative; height: 26px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 32px); }
.sc-gantt__bar { position: absolute; top: 3px; bottom: 3px; border-radius: var(--radius-sm); overflow: hidden; }
.sc-gantt__bar i { position: absolute; inset: 0; background: var(--steel); transform-origin: left; border-radius: inherit; }
[data-theme="dark"] .sc-gantt__bar i { background: #59636b; }
.sc-gantt__row.is-now .sc-gantt__bar i { background: var(--hivis); }
.sc-gantt__row.is-next .sc-gantt__bar i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); background-image: repeating-linear-gradient(-45deg, var(--line) 0 2px, transparent 2px 7px); }
.sc-gantt.is-in .sc-gantt__bar i { animation: sc-snap 700ms var(--sc-slide) backwards; animation-delay: calc(200ms + var(--sc-i, 0) * 120ms); }
.sc-gantt:not(.is-in) .sc-gantt__bar i { transform: scaleX(0); }
.sc-gantt__today { position: absolute; top: -8px; bottom: 0; left: calc(220px + 16px + (100% - 236px) * var(--_x) / 100); width: 2px; background: var(--chalk); pointer-events: none; }
.sc-gantt__today span { position: absolute; top: 10px; left: 6px; padding: 3px 7px; border-radius: var(--radius-sm); background: var(--chalk); color: var(--surface); font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.sc-gantt__detail { display: flex; gap: 16px; align-items: flex-start; margin-top: 14px; padding: 18px 20px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); min-height: 112px; }
.sc-gantt__detail.is-entering { animation: sc-fade 260ms backwards; }
.sc-gantt__dno { flex: none; font: 900 44px/40px var(--font-display); color: var(--timber); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .sc-gantt__grid { grid-template-columns: 1fr; }
  .sc-gantt__unit { display: none; }
  .sc-gantt__row { grid-template-columns: 1fr; gap: 6px; }
  .sc-gantt__today { left: calc(100% * var(--_x) / 100); }
  .sc-gantt__detail { padding: 16px; }
}

/* ---------- QuoteWizard ---------- */
.sc-wiz { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); min-width: 0; }
.sc-wiz::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--steel); }
.sc-wiz__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); gap: 16px 32px; align-items: end; padding: 28px var(--space-8) 18px; }
.sc-wiz__titles { display: flex; flex-direction: column; gap: 8px; }
.sc-wiz__title { font-size: 34px; line-height: 34px; }
.sc-wiz__steps { display: flex; gap: 4px; margin: 0; padding: 0 var(--space-8); list-style: none; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.sc-wiz__steps li { flex: 1; min-width: 0; }
.sc-wiz__step { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 46px; padding: 0 4px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; background: none; color: var(--ink-soft); font: 600 14px/1 var(--font-body); cursor: default; white-space: nowrap; }
.sc-wiz__step b { display: grid; place-items: center; width: 28px; height: 24px; border-radius: var(--radius-sm); background: var(--surface-sunk); color: var(--ink-soft); font: 800 13px/1 var(--font-stencil); letter-spacing: .08em; flex: none; }
.sc-wiz__step.is-now { color: var(--ink); border-bottom-color: var(--hivis); }
.sc-wiz__step.is-now b { background: var(--hivis); color: var(--hivis-ink); }
.sc-wiz__step.is-done { color: var(--ink); cursor: pointer; }
.sc-wiz__step.is-done b { background: var(--steel); color: var(--steel-ink); }
.sc-wiz__step.is-done:disabled { cursor: default; }
.sc-wiz__step:not(:disabled):hover span { text-decoration: underline; text-underline-offset: 3px; }
.sc-wiz__body { position: relative; padding: 28px var(--space-8) 8px; min-height: 420px; overflow: hidden; }
.sc-wiz__view { display: flex; flex-direction: column; gap: 22px; }
.sc-wiz__view.is-fwd { animation: sc-wiz-fwd 420ms var(--sc-slide) backwards; }
.sc-wiz__view.is-back { animation: sc-wiz-back 420ms var(--sc-slide) backwards; }
@keyframes sc-wiz-fwd { from { opacity: 0; transform: translateX(32px); } }
@keyframes sc-wiz-back { from { opacity: 0; transform: translateX(-32px); } }
.sc-wiz__q { display: flex; flex-direction: column; gap: 6px; }
.sc-wiz__qt { margin: 0; font: 800 30px/32px var(--font-display); letter-spacing: .015em; text-transform: uppercase; outline: none; }
.sc-wiz__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sc-wiz__form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.sc-wiz__wide { grid-column: 1 / -1; }
.sc-wiz__est { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface-sunk); box-shadow: var(--shadow-inset); }
.sc-wiz__est b { font: 700 30px/32px var(--font-display); }
.sc-wiz__err { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--stop); font-weight: 600; font-size: 15px; }
.sc-wiz__err[hidden] { display: none; }
.sc-wiz__err.is-shake { animation: sc-shake 360ms var(--sc-slide); }
@keyframes sc-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 60% { transform: translateX(4px); } }
.sc-wiz__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px var(--space-8) 22px; border-top: 1px solid var(--line); margin-top: 20px; }
.sc-wiz__foot .sc-btn { margin-bottom: 5px; }
.sc-wiz__foot[hidden] { display: none; }
.sc-wiz__save { display: inline-flex; align-items: center; gap: 6px; }
.sc-wiz__save .sc-icon { width: 16px; height: 16px; }
.sc-wiz__done { gap: 24px; }
.sc-wiz__donehead { display: flex; gap: 18px; align-items: flex-start; }
.sc-wiz__check { display: grid; place-items: center; width: 60px; height: 60px; flex: none; border-radius: var(--radius-md); background: var(--go); color: var(--surface); }
.sc-wiz__check .sc-icon { width: 34px; height: 34px; stroke-width: 3; }
.sc-wiz__sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.sc-wiz__sum div { padding: 14px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 -1px -1px 0; }
.sc-wiz__sum dt { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.sc-wiz__sum dd { margin: 4px 0 0; font-weight: 700; }
@media (max-width: 720px) {
  .sc-wiz__head { grid-template-columns: 1fr; padding: 24px var(--space-4) 14px; }
  .sc-wiz__steps { padding: 0 var(--space-4); }
  .sc-wiz__steps li { flex: 0 0 auto; }
  .sc-wiz__steps li:has(.is-now) { flex: 1 0 auto; }
  .sc-wiz__step span { display: none; }
  .sc-wiz__step.is-now span { display: inline; }
  .sc-wiz__body { padding: 22px var(--space-4) 4px; min-height: 0; }
  .sc-wiz__qt { font-size: 26px; line-height: 28px; }
  .sc-wiz__pair, .sc-wiz__form { grid-template-columns: 1fr; }
  .sc-wiz .sc-cards { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .sc-wiz .sc-ccard { padding: 12px; }
  .sc-wiz .sc-ccard__title { font-size: 18px; line-height: 20px; }
  .sc-wiz__foot { padding: 14px var(--space-4) 18px; }
  .sc-wiz__save { display: none; }
  .sc-wiz__sum { grid-template-columns: 1fr 1fr; }
  .sc-wiz__title { font-size: 28px; line-height: 28px; }
}

/* ---------- ProjectCaseStudy ---------- */
.sc-case { display: flex; flex-direction: column; gap: var(--space-12); min-width: 0; }
.sc-case__head { display: flex; flex-direction: column; gap: 14px; max-width: 860px; }
.sc-case__title { font-size: 60px; line-height: 56px; }
.sc-case__where { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; }
.sc-case__where .sc-icon { color: var(--hivis-deep); }
[data-theme="dark"] .sc-case__where .sc-icon { color: var(--hivis); }
.sc-case__sum { margin-top: 4px; }
.sc-case__grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); gap: var(--space-6); align-items: start; }
.sc-case__facts { position: relative; display: flex; flex-direction: column; gap: 18px; padding: var(--space-6); border-radius: var(--radius-md); background: var(--steel); color: var(--steel-ink); --ink: var(--steel-ink); --ink-soft: color-mix(in srgb, var(--steel-ink) 74%, var(--steel)); --sc-focus: var(--hivis); --surface: var(--steel); }
[data-theme="dark"] .sc-case__facts { background: #252b30; --surface: #252b30; }
.sc-case__facts dl { margin: 0; display: flex; flex-direction: column; }
.sc-case__facts dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed rgb(255 255 255 / .18); }
.sc-case__facts dt { font-size: 14px; color: var(--ink-soft); }
.sc-case__facts dd { margin: 0; font-weight: 700; text-align: right; }
.sc-case__story { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.sc-case__story > div { display: flex; flex-direction: column; gap: 12px; }
.sc-case__ba { display: flex; flex-direction: column; gap: 14px; }
.sc-case__bahead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) { .sc-case__grid { grid-template-columns: 1fr; } .sc-case__story { grid-template-columns: 1fr; gap: var(--space-6); } }
@media (max-width: 620px) { .sc-case { gap: var(--space-8); } .sc-case__title { font-size: 40px; line-height: 40px; } }

/* ---------- Measured: dimension lines set out around a picture, like a drawing ---------- */
.sc-measured { position: relative; padding: 30px 0 0 30px; min-width: 0; }
.sc-dim { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); pointer-events: none; }
.sc-dim::before { content: ""; position: absolute; background: var(--line-strong); }
.sc-dim span { position: relative; padding: 0 8px; background: var(--page); font: 700 12px/16px var(--font-body); letter-spacing: .1em; text-transform: uppercase; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.sc-dim--x { left: 30px; right: 0; top: 4px; height: 18px; border-left: 1.5px solid var(--line-strong); border-right: 1.5px solid var(--line-strong); }
.sc-dim--x::before { left: 0; right: 0; top: 50%; height: 1.5px; transform-origin: left; }
.sc-dim--y { top: 30px; bottom: 0; left: 4px; width: 18px; border-top: 1.5px solid var(--line-strong); border-bottom: 1.5px solid var(--line-strong); }
.sc-dim--y::before { top: 0; bottom: 0; left: 50%; width: 1.5px; transform-origin: top; }
.sc-dim--y span { transform: rotate(-90deg); }
.sc-measured.is-in .sc-dim--x::before { animation: sc-snap var(--sc-t-extend) var(--sc-slide) backwards; animation-delay: 200ms; }
.sc-measured.is-in .sc-dim--y::before { animation: sc-snapy var(--sc-t-extend) var(--sc-slide) backwards; animation-delay: 320ms; }
.sc-measured.is-in .sc-dim span { animation: sc-fade 400ms backwards; animation-delay: 700ms; }
@keyframes sc-snapy { from { transform: scaleY(0); } }
.sc-steel .sc-dim span { background: var(--steel); }
@media (max-width: 560px) { .sc-measured { padding: 26px 0 0 0; } .sc-dim--x { left: 0; } .sc-dim--y { display: none; } }

/* ===================================================================== widgets ===================== */

/* ---------- BudgetEstimator ---------- */
.sc-est { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); overflow: hidden; min-width: 0; }
.sc-est__in { display: flex; flex-direction: column; gap: 22px; padding: var(--space-8); min-width: 0; }
.sc-est__head { display: flex; flex-direction: column; gap: 8px; }
.sc-est__extras { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.sc-est__extras legend { grid-column: 1 / -1; }
.sc-est__out { display: flex; flex-direction: column; gap: 16px; padding: var(--space-8); border-radius: 0; }
.sc-est__fig { display: flex; flex-direction: column; font: 800 50px/50px var(--font-display); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.sc-est__fig .sc-num { display: block; height: 50px; white-space: nowrap; }
.sc-est__to { font: 700 13px/18px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.sc-est__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--ink-soft); }
.sc-est__meta span { display: inline-flex; align-items: center; gap: 6px; }
.sc-est__meta .sc-icon { width: 16px; height: 16px; color: var(--hivis); }
.sc-est__bar { display: flex; height: 16px; gap: 2px; border-radius: 2px; overflow: hidden; background: rgb(255 255 255 / .08); }
.sc-est__seg { flex: 1 1 0; min-width: 0; }
.sc-est__seg--shell { background: var(--steel-ink); }
.sc-est__seg--fit { background: var(--timber); }
.sc-est__seg--fees { background: color-mix(in srgb, var(--chalk) 60%, #fff); }
.sc-est__seg--extras { background: var(--hivis); }
.sc-est__legend { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; }
.sc-est__legend li { display: flex; align-items: center; gap: 10px; }
.sc-est__legend b { margin-left: auto; font-variant-numeric: tabular-nums; }
.sc-est__key { width: 12px; height: 12px; flex: none; border-radius: 1px; }
.sc-est__note { margin: auto 0 0; color: var(--ink-soft); }
@media (max-width: 860px) { .sc-est { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .sc-est__in, .sc-est__out { padding: var(--space-6) var(--space-4); } .sc-est__extras { grid-template-columns: 1fr; } .sc-est__fig { font-size: 42px; line-height: 44px; } .sc-est__fig .sc-num { height: 44px; } }

/* ---------- AreaCovered ---------- */
.sc-area { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); overflow: hidden; min-width: 0; }
.sc-area__map { position: relative; background: var(--surface-sunk); border-right: 1px solid var(--line); min-height: 320px; }
.sc-map { display: block; width: 100%; height: 100%; }
.sc-map__bg { fill: var(--surface-sunk); }
.sc-map__grid { stroke: var(--line); stroke-width: .6; }
.sc-map__county { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.4; stroke-dasharray: 6 3 1.5 3; }
.sc-map__river { fill: none; stroke: color-mix(in srgb, var(--chalk) 35%, transparent); stroke-width: 6; stroke-linecap: round; }
.sc-map__road { fill: none; stroke: var(--line-strong); stroke-width: 2.5; stroke-linecap: round; }
.sc-map__road--m { stroke: var(--ink-soft); stroke-width: 4; }
.sc-map__roadl { font: 700 10px/1 var(--font-body); fill: var(--ink-soft); letter-spacing: .06em; }
.sc-map__ring { fill: none; stroke: var(--chalk); stroke-width: 1.6; stroke-dasharray: 7 5; }
.sc-map__ring--in { fill: color-mix(in srgb, var(--go) 7%, transparent); }
.sc-map__rl { font: 700 10px/1 var(--font-body); fill: var(--chalk); letter-spacing: .14em; }
.sc-map__town rect { fill: var(--ink); }
.sc-map__town text { font: 600 11.5px/1 var(--font-body); fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.sc-map__town.is-hit text { font-weight: 800; }
.sc-map__yard rect { fill: var(--steel); }
[data-theme="dark"] .sc-map__yard rect { fill: #4a535a; }
.sc-map__yard path { stroke: var(--hivis); stroke-width: 2.4; fill: none; }
.sc-map__yardl { font: 800 11px/1 var(--font-stencil); fill: var(--ink); letter-spacing: .12em; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.sc-map__pinbody { animation: sc-pin 520ms var(--sc-thunk) backwards; }
@keyframes sc-pin { from { opacity: 0; transform: translateY(-22px); } }
.sc-map__pin path { stroke: var(--surface); stroke-width: 2; }
.sc-map__pin--go path { fill: var(--go); } .sc-map__pin--edge path { fill: var(--hivis); } .sc-map__pin--stop path { fill: var(--stop); }
.sc-map__pin circle { fill: var(--surface); }
.sc-area__side { display: flex; flex-direction: column; gap: 18px; padding: var(--space-8); min-width: 0; }
.sc-area__form { display: flex; align-items: flex-end; gap: 10px; }
.sc-area__form .sc-field { flex: 1; }
.sc-area__form .sc-btn { margin-bottom: 5px; min-height: 50px; }
.sc-area__form .sc-field.is-error + .sc-btn, .sc-area__form:has(.is-error) { align-items: flex-start; }
.sc-area__form:has(.is-error) .sc-btn { margin-top: 24px; }
.sc-area__result { display: flex; gap: 14px; align-items: flex-start; min-height: 92px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface-sunk); border: 1px solid var(--line); }
.sc-area__result b { display: block; font: 800 22px/24px var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.sc-area__result span:not(.sc-area__icon) { display: block; font-size: 14px; line-height: 20px; color: var(--ink-soft); margin-top: 2px; }
.sc-area__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--steel); color: var(--steel-ink); }
.sc-area__result.is-go .sc-area__icon { background: var(--go); color: var(--surface); }
.sc-area__result.is-edge .sc-area__icon { background: var(--hivis); color: var(--hivis-ink); }
.sc-area__result.is-stop .sc-area__icon { background: var(--stop); color: var(--surface); }
.sc-area__result.is-go b { color: var(--go); } .sc-area__result.is-stop b { color: var(--stop); }
.sc-area__result:not(:empty) > * { animation: sc-fade 260ms backwards; }
.sc-area__towns { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-area__towns .sc-tag { height: 28px; font-size: 13px; padding: 0 10px; background: transparent; }
@media (max-width: 860px) { .sc-area { grid-template-columns: 1fr; } .sc-area__map { border-right: 0; border-bottom: 1px solid var(--line); min-height: 0; } }
@media (max-width: 560px) { .sc-area__side { padding: var(--space-6) var(--space-4); } }

/* ---------- SiteDiary ---------- */
.sc-diary { display: flex; flex-direction: column; gap: 20px; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); min-width: 0; }
.sc-diary__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sc-diary__weeks { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.sc-diary__wk { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 var(--line-strong); margin-bottom: 3px; transition: transform var(--sc-t-thunk) var(--sc-thunk), box-shadow var(--sc-t-thunk) var(--sc-thunk); }
.sc-diary__wk small { font-size: 10px; line-height: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.sc-diary__wk b { font: 800 22px/22px var(--font-display); }
.sc-diary__wk:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--line-strong); }
.sc-diary__wk:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line-strong); transition-duration: var(--sc-t-press); }
.sc-diary__wk[aria-selected="true"] { background: var(--steel); border-color: var(--steel); color: var(--steel-ink); box-shadow: 0 3px 0 var(--sc-plinth-steel); }
.sc-diary__wk[aria-selected="true"] small { color: var(--hivis); }
.sc-diary__view { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.sc-diary__view.is-entering { animation: sc-fade 300ms backwards; }
.sc-diary__pic { aspect-ratio: 4 / 3; }
.sc-diary__copy { display: flex; flex-direction: column; gap: 8px; min-height: 230px; }
.sc-diary__title { margin: 0; font: 800 26px/28px var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.sc-diary__list { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sc-diary__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 22px; }
.sc-diary__list .sc-icon { width: 18px; height: 18px; margin-top: 2px; color: var(--ink-soft); }
.sc-diary__list li.is-done .sc-icon { color: var(--go); stroke-width: 2.6; }
.sc-diary__next { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--radius-md); background: var(--timber-soft); font-size: 15px; }
.sc-diary__next > .sc-icon { color: var(--ink); }
.sc-diary__next > span { flex: 1; min-width: 200px; }
.sc-diary__next .sc-btn { margin-bottom: 4px; }
@media (max-width: 720px) { .sc-diary { padding: var(--space-4); } .sc-diary__view { grid-template-columns: 1fr; } .sc-diary__copy { min-height: 0; } }