/* swimcrete.com - Option G "Golden Hour" on deep navy. Tokens first; everything else derives from them. */
@font-face{font-family:"Bricolage Grotesque";src:url("/assets/bricolage-grotesque-display.4c0768675c.woff2") format("woff2");font-weight:600 800;font-style:normal;font-display:swap}
/* ============================================================
   OPTION F — "GOLDEN HOUR"   swimcrete.com home page mockup
   Mobile-first. Base = 390px phone. Enhancements at 48/64/80rem.
   ============================================================ */

:root{
  color-scheme: dark;

  /* palette */
  --color-bg:              #0A1626;
  --color-surface:         #102038;
  --color-surface-alt:     #172B46;
  --color-text:            #F3F2EE;
  --color-text-muted:      #A9B8CC;
  --color-primary:         #57C7DE;
  --color-primary-strong:  #8EDCEC;
  --color-accent:          #F2A63B;
  --color-accent-contrast: #0A1626;
  --color-border:          #21364F;
  --color-focus:           #57C7DE;
  --color-header-bg:       rgba(10,22,38,.90);
  --color-footer-bg:       #060E19;
  --color-hero-overlay:    linear-gradient(180deg, rgba(10,22,38,.25) 0%, rgba(10,22,38,.88) 100%);
  --color-highlight:       #F6C453;
  --color-border-strong:   #5F7896;
  --color-bg-invert:       #F3F2EE;
  --color-text-invert:     #0A1626;

  /* type */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --step-h1:    clamp(2.375rem, 1.45rem + 3.8vw,  4.25rem);
  --step-h2:    clamp(1.75rem,  1.29rem + 1.9vw,  2.75rem);
  --step-h3:    clamp(1.25rem,  1.1rem  + 0.62vw, 1.625rem);
  --step-body:  clamp(1.0625rem,1.01rem + 0.21vw, 1.1875rem);
  --step-small: clamp(0.8125rem,0.79rem + 0.1vw,  0.875rem);
  --step-stat:  clamp(2.25rem,  1.4rem  + 3.5vw,  4rem);

  /* shape + depth */
  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 999px;
  --shadow-1: 0 0 0 1px var(--color-border);
  --shadow-2: 0 24px 60px -24px rgb(0 0 0 / .85);
  --glow: 0 0 0 1px rgba(246,196,83,.38);

  /* space */
  --measure: 62ch;
  --wrap: 84rem;
  --wrap-wide: 92rem;   /* header + hero: full bleed minus the gutter */
  --gutter: 1rem;
  --section-pad: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);

  /* imagery */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:var(--step-body);
  font-weight:400;
  line-height:1.65;
  letter-spacing:.005em;
  overflow-x:clip;
  padding-bottom:5.25rem; /* clearance for the fixed action bar */
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;height:auto}
svg{display:block}

h1,h2,h3{
  font-family:var(--font-display);
  margin:0;
  color:var(--color-text);
  text-wrap:balance;
}
h1{font-weight:700;font-size:var(--step-h1);line-height:1.0;letter-spacing:-.03em;font-variation-settings:"opsz" 72}
h2{font-weight:700;font-size:var(--step-h2);line-height:1.1;letter-spacing:-.025em;font-variation-settings:"opsz" 44}
h3{font-weight:600;font-size:var(--step-h3);line-height:1.25;letter-spacing:-.015em;font-variation-settings:"opsz" 26}
p{margin:0}

a{color:var(--color-primary);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--color-primary-strong)}

:focus-visible{
  outline:3px solid var(--color-focus);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute;left:.75rem;top:-4rem;z-index:80;
  background:var(--color-accent);color:var(--color-accent-contrast);
  font-weight:600;padding:.75rem 1.25rem;border-radius:var(--radius-pill);
  text-decoration:none;transition:top .18s ease;
}
.skip:focus{top:.75rem;color:var(--color-accent-contrast)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.topbar .wrap,.hero .wrap{max-width:var(--wrap-wide)}
.section{padding-block:var(--section-pad);position:relative}
.eyebrow{
  font-family:var(--font-body);font-weight:600;font-size:var(--step-small);
  line-height:1.2;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-highlight);margin:0;
}
.muted{color:var(--color-text-muted)}
.measure{max-width:var(--measure)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- media treatment: warm grade + sand soft-light + grain ---------- */
.media{
  display:block;
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--color-surface-alt);
  box-shadow:var(--shadow-1);
}
.media > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.08) contrast(1.06) brightness(.97)}
.media::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--color-highlight);mix-blend-mode:soft-light;opacity:.045}
.media::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background-image:var(--grain);background-size:200px 200px;opacity:.06;mix-blend-mode:overlay}
.scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--color-hero-overlay)}
.tag{
  position:absolute;left:.75rem;bottom:.75rem;z-index:4;
  display:inline-block;background:var(--color-surface-alt);color:var(--color-highlight);
  font-size:var(--step-small);font-weight:600;letter-spacing:.04em;line-height:1;
  padding:.45rem .7rem;border-radius:var(--radius-pill);
  box-shadow:0 0 0 1px rgba(246,196,83,.22);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:54px;padding:0 28px;border-radius:var(--radius-pill);
  font-family:var(--font-body);font-weight:600;font-size:1.0625rem;letter-spacing:.01em;line-height:1;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn--primary{background:var(--color-accent);color:var(--color-accent-contrast)}
.btn--primary:hover{background:var(--color-highlight);color:var(--color-accent-contrast)}
.btn--ghost{background:transparent;color:var(--color-primary);border-color:rgba(87,199,222,.55)}
.btn--ghost:hover{color:var(--color-primary-strong);border-color:var(--color-primary-strong);background:rgba(87,199,222,.09)}
.btn--invert{background:var(--color-text-invert);color:var(--color-highlight)}
.btn--invert:hover{background:#000;color:var(--color-highlight)}
.btn--sm{min-height:46px;padding:0 18px;font-size:1rem}
.btn__ico{flex:none}

.link-arrow{
  display:inline-flex;align-items:center;gap:.4rem;
  font-weight:600;font-size:var(--step-small);letter-spacing:.06em;text-transform:uppercase;
  color:var(--color-primary);text-decoration:none;
}
.link-arrow:hover{color:var(--color-primary-strong)}
.link-arrow svg{transition:transform .18s ease}
.link-arrow:hover svg{transform:translateX(3px)}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:var(--color-header-bg);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-border);
}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:52px}
.brand{display:inline-flex;align-items:center;flex:none}
.brand img{width:160px;height:auto}
.topbar__nav,.topbar__util{display:none}
.menubtn{
  display:inline-flex;align-items:center;gap:.45rem;
  min-height:40px;padding:0 .85rem;
  background:transparent;color:var(--color-text);
  border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);
  font-family:var(--font-body);font-weight:600;font-size:.9375rem;cursor:pointer;
}
.menubtn:hover{border-color:var(--color-highlight);color:var(--color-highlight)}

/* ---------- hero ---------- */
.hero{padding-top:.5rem}
.hero__panel{
  position:relative;display:flex;align-items:flex-end;
  min-height:35rem;border-radius:var(--radius-xl);
}
.hero__panel > img{z-index:0}
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(10,22,38,.14) 0%, rgba(10,22,38,.42) 38%, rgba(10,22,38,.88) 72%, rgba(10,22,38,.97) 100%);
}
.hero__content{position:relative;z-index:4;padding:1.25rem 1.25rem 3.5rem;width:100%}
.hero__content h1{margin:.55rem 0 0}
.hero__sub{margin:.85rem 0 0;max-width:40ch;color:#DDE5EE}
.btnrow{display:flex;flex-direction:column;gap:.625rem;margin-top:1.35rem}
.btnrow .btn{width:100%}

/* ---------- audience fork (overlaps the hero) ---------- */
.fork{margin-top:-2.5rem;position:relative;z-index:6;padding-bottom:var(--section-pad)}
.fork__grid{display:grid;gap:.75rem}
.forkcard{
  display:grid;grid-template-columns:4.5rem minmax(0,1fr) 1.25rem;
  align-items:center;gap:.875rem;
  background:var(--color-surface);border-radius:var(--radius-lg);
  padding:.75rem;text-decoration:none;color:var(--color-text);
  box-shadow:var(--shadow-1), var(--shadow-2);
  transition:transform .18s ease, box-shadow .18s ease;
}
.forkcard:hover{transform:translateY(-3px);box-shadow:var(--glow), var(--shadow-2);color:var(--color-text)}
.forkcard__thumb{width:4.5rem;aspect-ratio:1/1;border-radius:var(--radius-md);display:block}
.forkcard__body{display:block;min-width:0}
.forkcard__title{display:block;font-family:var(--font-display);font-weight:700;font-size:1.1875rem;letter-spacing:-.02em;line-height:1.2}
.forkcard__sub{display:block;font-size:var(--step-small);line-height:1.45;color:var(--color-text-muted);margin-top:.15rem}
.forkcard .chev{color:var(--color-highlight)}

/* ---------- proof / stat band ---------- */
.stats{border-block:1px solid var(--color-border);background:var(--color-bg)}
.stats__eyebrow{margin-bottom:1.5rem}
.stats__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 1rem}
.stat__num{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:var(--step-stat);line-height:.95;letter-spacing:-.03em;
  color:var(--color-highlight);
}
.stat__rule{display:block;width:2.25rem;height:2px;background:rgba(246,196,83,.55);margin:.7rem 0 .55rem;border-radius:2px}
.stat__label{display:block;font-size:var(--step-small);line-height:1.4;color:var(--color-text-muted)}

/* ---------- section head ---------- */
.sechead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1.5rem;margin-bottom:1.25rem}
.sechead p{margin-top:.6rem;color:var(--color-text-muted);font-size:var(--step-small);max-width:46ch}
.process .sechead p{display:none} /* phone: keep the fold tight; restored at 48rem */

/* ---------- product families ---------- */
.systems__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem .75rem}
.pcard{
  display:flex;flex-direction:column;min-width:0;
  background:var(--color-surface);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-1);text-decoration:none;color:var(--color-text);
  transition:transform .18s ease, box-shadow .18s ease;
}
.pcard:nth-child(even){transform:translateY(1.25rem)}
.pcard:hover{box-shadow:var(--glow)}
.pcard__media{flex:none;border-radius:0;box-shadow:none;aspect-ratio:4/3}
.pcard__body{padding:.8rem .85rem .9rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.pcard__title{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.pcard__title .chev{color:var(--color-highlight);flex:none}
.pcard__sub{font-size:var(--step-small);line-height:1.45;color:var(--color-text-muted)}
.pills{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto;padding-top:.35rem}
.pills .pill:nth-child(n+3){display:none} /* phone: two tags max; all shown at 48rem */
.pill{
  font-size:.75rem;font-weight:600;letter-spacing:.05em;line-height:1;
  color:var(--color-highlight);background:var(--color-surface-alt);
  padding:.4rem .6rem;border-radius:var(--radius-pill);
  box-shadow:0 0 0 1px rgba(246,196,83,.18);
}

/* ---------- process ---------- */
.tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.25rem}
.tab{
  min-height:40px;padding:0 1rem;border-radius:var(--radius-pill);
  background:transparent;color:var(--color-text-muted);
  border:1px solid var(--color-border-strong);
  font-family:var(--font-body);font-weight:600;font-size:.9375rem;cursor:pointer;
}
.tab[aria-pressed="true"]{background:var(--color-surface-alt);color:var(--color-highlight);border-color:rgba(246,196,83,.5)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.step{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:1rem;align-items:start}
.step__media{aspect-ratio:1/1;border-radius:var(--radius-md)}
.step__num{font-family:var(--font-display);font-weight:700;font-size:1rem;letter-spacing:.02em;color:var(--color-highlight);line-height:1}
.step h3{margin:.3rem 0 .35rem}
.step p{font-size:var(--step-small);line-height:1.55;color:var(--color-text-muted)}

/* ---------- CAD ---------- */
.cad{background:var(--color-surface-alt);overflow-x:clip}
.cad h2{max-width:18ch}
.cad__lead{margin-top:1rem;color:var(--color-text-muted);font-size:var(--step-small);line-height:1.6;max-width:56ch}
.cad__lead + .cad__lead{margin-top:.75rem}
.cad__visual{
  margin-top:1.5rem;
  margin-right:calc(var(--gutter) * -1);
  border-radius:var(--radius-lg) 0 0 var(--radius-lg);
  background:#0E1B2E;box-shadow:inset 0 0 0 1px var(--color-border);
  overflow:hidden;
}
.cad__visual svg{width:100%;height:auto}
.cad .btn{margin-top:1.5rem}

/* ---------- shapes rail ---------- */
.shapes{overflow-x:clip}
.rail{
  list-style:none;margin:0;padding:.25rem 0 .75rem;
  display:flex;gap:.75rem;
  overflow-x:auto;scroll-snap-type:x mandatory;
  margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
  scrollbar-width:none;-ms-overflow-style:none;
  align-items:flex-end;
}
.rail::-webkit-scrollbar{display:none}
.shapecard{flex:0 0 clamp(12.5rem, 24vw, 16.5rem);scroll-snap-align:start;margin:0;min-width:0}
.shapecard .media{aspect-ratio:4/5}
.shapecard:nth-child(even) .media{aspect-ratio:5/4}
.shapecard figcaption{margin-top:.6rem;font-size:var(--step-small);line-height:1.4;color:var(--color-text-muted)}
.rail__foot{margin-top:.5rem;display:flex;justify-content:flex-end}

/* ---------- warm paper band ---------- */
.paper{background:var(--color-bg-invert);color:var(--color-text-invert)}
.paper h2,.paper h3{color:var(--color-text-invert)}
.paper .eyebrow{color:#6B4B14}
.paper__lead{margin-top:1rem;color:#26405F;max-width:56ch}
.ctable{width:100%;border-collapse:collapse;margin-top:1.5rem;font-size:var(--step-small)}
.ctable caption{text-align:left;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:var(--step-small);color:#6B4B14;padding-bottom:.6rem}
.ctable th,.ctable td{text-align:left;padding:.7rem .5rem;border-bottom:1px solid rgba(10,22,38,.15);vertical-align:top;line-height:1.4}
.ctable thead th{font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.75rem;color:#6B4B14;border-bottom-color:rgba(10,22,38,.35)}
.ctable tbody th{font-weight:600;width:30%}
.ctable td:first-of-type{color:var(--color-text-invert);font-weight:600}
.ctable td:last-of-type{color:#44597A}
.paper .btn{margin-top:1.5rem}

/* ---------- catalog ---------- */
.catalog{overflow-x:clip}
.catalog__grid{display:grid;gap:1.5rem;justify-items:start}
.cover{
  position:relative;width:clamp(9.5rem,40vw,12rem);aspect-ratio:8.5/11;
  border-radius:var(--radius-md);overflow:hidden;isolation:isolate;
  transform:rotate(-3.5deg);
  box-shadow:var(--shadow-2), 0 0 0 1px var(--color-border-strong);
  margin-left:.5rem;
}
.cover > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.08) contrast(1.06) brightness(.72)}
.cover__face{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;gap:.5rem;padding:.9rem}
.cover__face img{width:78%;height:auto}
.cover__rule{width:2rem;height:2px;background:var(--color-highlight);border-radius:2px}
.cover__face span{font-family:var(--font-display);font-weight:600;font-size:.8125rem;line-height:1.2;color:var(--color-text)}
.cover::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(200deg,rgba(10,22,38,.25),rgba(10,22,38,.9))}

/* ---------- video ---------- */
.video__frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius-xl)}
.playbtn{
  position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);
  width:4.5rem;height:4.5rem;border-radius:50%;border:none;cursor:pointer;
  background:var(--color-accent);color:var(--color-accent-contrast);
  display:grid;place-items:center;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9);
  transition:background-color .18s ease, transform .18s ease;
}
.playbtn:hover{background:var(--color-highlight);transform:translate(-50%,-50%) scale(1.04)}
.video__cap{margin-top:.9rem;font-size:var(--step-small);color:var(--color-text-muted)}

/* ---------- find a builder / contact ---------- */
.builder__card{
  background:var(--color-surface);border-radius:var(--radius-xl);
  padding:1.75rem 1.25rem;box-shadow:var(--shadow-1);
}
.builder__card h2{color:var(--color-highlight);max-width:20ch}
.builder__card p{margin-top:.75rem;color:var(--color-text-muted);max-width:48ch}
.builder__card .btn{margin-top:1.5rem}
.contact p{margin-top:.9rem;color:var(--color-text-muted);max-width:46ch}
.contact__row{display:flex;flex-direction:column;gap:1rem;margin-top:1.75rem;align-items:flex-start}
.telbig{
  display:inline-flex;align-items:center;gap:.5rem;min-height:54px;
  font-family:var(--font-display);font-weight:600;font-size:1.375rem;letter-spacing:-.01em;
  color:var(--color-primary);text-decoration:none;
}
.telbig:hover{color:var(--color-primary-strong)}

/* ---------- footer ---------- */
.site-footer{background:var(--color-footer-bg);border-top:1px solid rgba(246,196,83,.3);padding-block:var(--section-pad)}
.footer__top{display:grid;gap:1.75rem}
.footer__brand img{width:190px;height:auto}
.footer__brand address{font-style:normal;margin-top:1rem;color:var(--color-text-muted);font-size:var(--step-small);line-height:1.6}
.footer__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.footer__cols h3{font-size:.875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-highlight);font-family:var(--font-body);font-weight:600}
.footer__cols ul{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.5rem}
.footer__cols a{color:var(--color-text);text-decoration:none;font-size:var(--step-small)}
.footer__cols a:hover{color:var(--color-primary-strong)}
.footer__contact{font-size:var(--step-small);line-height:1.7;color:var(--color-text-muted)}
.footer__contact a{font-weight:600}
.footer__base{
  margin-top:2rem;padding-top:1.25rem;border-top:1px solid rgba(246,196,83,.18);
  font-size:var(--step-small);color:var(--color-text-muted);
}

/* ---------- fixed bottom action bar (phone) ---------- */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:grid;grid-template-columns:1fr 1fr;gap:.625rem;
  padding:.5rem var(--gutter) calc(.5rem + env(safe-area-inset-bottom, 0px));
  background:var(--color-surface);
  border-top:1px solid var(--color-border);
  box-shadow:0 -14px 40px -22px rgb(0 0 0 / .95);
}
.actionbar .btn{width:100%}

/* ---------- bottom sheet nav (phone) ---------- */
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--color-surface);
  border-top:1px solid var(--color-border);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow:var(--shadow-2);
  padding:.75rem var(--gutter) 1.25rem;
}
.sheet[hidden]{display:none}
.sheet__handle{width:2.5rem;height:4px;border-radius:2px;background:var(--color-border-strong);margin:0 auto 1rem}
.sheet ul{list-style:none;margin:0;padding:0}
.sheet li + li{border-top:1px solid rgba(246,196,83,.16)}
.sheet a{
  display:flex;align-items:center;justify-content:space-between;
  min-height:56px;font-family:var(--font-display);font-weight:600;font-size:1.0625rem;
  color:var(--color-text);text-decoration:none;
}
.sheet a:hover{color:var(--color-highlight)}
.sheet__foot{display:grid;gap:.625rem;margin-top:1rem}

/* ============================================================
   >= 48rem  (tablet)
   ============================================================ */
@media (min-width:48rem){
  :root{--gutter:1.5rem}
  .hero__panel{min-height:30rem}
  .hero__content{padding:2rem 2rem 4rem}
  .btnrow{flex-direction:row;flex-wrap:wrap}
  .btnrow .btn{width:auto}
  .fork__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
  .fork{margin-top:-3rem}
  .process .sechead p{display:block}
  .pills .pill:nth-child(n+3){display:inline-block}
  .stats__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
  .systems__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 1.25rem}
  .step{grid-template-columns:6.5rem minmax(0,1fr)}
  .catalog__grid{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2.5rem}
  .contact__row{flex-direction:row;align-items:center;gap:1.75rem}
  .footer__cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .builder__card{padding:2.5rem}
}

/* ============================================================
   >= 64rem  (desktop)
   ============================================================ */
@media (min-width:64rem){
  :root{--gutter:2rem}

  body{padding-bottom:0}
  .actionbar,.menubtn,.sheet{display:none}

  .topbar__in{min-height:68px;gap:2rem}
  .brand img{width:184px}
  .topbar__nav{display:flex;align-items:center;gap:1.5rem;margin-right:auto}
  .topbar__nav a{
    display:inline-flex;align-items:center;gap:.3rem;
    color:var(--color-text);text-decoration:none;font-weight:600;font-size:.9375rem;letter-spacing:.01em;
  }
  .topbar__nav a:hover{color:var(--color-highlight)}
  .topbar__util{display:flex;align-items:center;gap:1.25rem}
  .topbar__util .tel{color:var(--color-primary);text-decoration:none;font-weight:600;font-size:.9375rem;white-space:nowrap}
  .topbar__util .tel:hover{color:var(--color-primary-strong)}
  .topbar__util .btn{min-height:44px;padding:0 20px;font-size:.9375rem}

  .hero{padding-top:1.5rem}
  .hero__panel{min-height:32.5rem;align-items:flex-end}
  .hero__content{padding:3rem 3.25rem 4.75rem;max-width:56rem}
  .hero__content h1{margin-top:1rem;max-width:15ch}
  .hero__sub{font-size:1.1875rem;max-width:52ch;margin-top:1.15rem}
  .btnrow{margin-top:2rem;gap:.875rem}

  .fork{margin-top:-3.5rem}
  .forkcard{grid-template-columns:5.5rem minmax(0,1fr) 1.5rem;padding:1rem;gap:1.25rem}
  .forkcard__thumb{width:5.5rem}
  .forkcard__title{font-size:1.375rem}
  .forkcard__sub{font-size:1rem}

  .stats__grid{gap:2rem}
  .stat__rule{width:3rem;margin:.9rem 0 .7rem}
  .stat__label{font-size:1rem}

  .sechead{margin-bottom:2rem;align-items:flex-end}

  .systems__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
  .pcard:nth-child(even){transform:translateY(2.25rem)}
  .pcard__media{aspect-ratio:16/10}
  .pcard__body{padding:1.1rem 1.15rem 1.25rem}

  .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
  .step{grid-template-columns:minmax(0,1fr);gap:1rem}
  .step__media{aspect-ratio:4/3;border-radius:var(--radius-lg)}
  .step__num{font-size:1.125rem}

  .cad__grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
  .cad__visual{margin-top:0;margin-right:calc(var(--gutter) * -1 - ((100vw - min(100vw, var(--wrap))) / 2))}

  .shapecard figcaption{font-size:.9375rem}

  .paper__grid{display:grid;grid-template-columns:5fr 7fr;gap:3.5rem;align-items:start}
  .ctable{margin-top:0;font-size:1rem}
  .ctable th,.ctable td{padding:.9rem .75rem}

  .video__frame{border-radius:var(--radius-xl)}
  .playbtn{width:6rem;height:6rem}

  .builder__card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2.5rem;padding:2.75rem 3rem}
  .builder__card .btn{margin-top:0}

  .contact__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3rem}
  .contact__row{margin-top:0}

  .footer__top{grid-template-columns:20rem minmax(0,1fr);gap:3rem}
  .footer__cols{grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
}

/* ============================================================
   >= 80rem
   ============================================================ */
@media (min-width:80rem){
  .hero__panel{min-height:34rem}
  .hero__content{padding:3.5rem 4rem 5rem}
  .topbar__nav{gap:1.85rem}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference){
  .hero__panel > img{animation:heroIn 1200ms cubic-bezier(.22,1,.36,1) both}
  @keyframes heroIn{from{transform:scale(1.05)}to{transform:scale(1)}}
  .pcard:hover{transform:translateY(-3px)}
  .pcard:nth-child(even):hover{transform:translateY(calc(1.25rem - 3px))}
}
@media (prefers-reduced-motion: no-preference) and (min-width:64rem){
  .pcard:nth-child(even):hover{transform:translateY(calc(2.25rem - 3px))}
}

/* ---------- additions for the real site (not in the mockup) ---------- */
.brand img{height:auto}
/* the mockup's invented plan was meant to bleed off the right edge; a real drawing must be fully visible */
.cad__visual{margin-right:0 !important;padding:0;background:none;box-shadow:none;border-radius:0;overflow:visible}
.cad__sheet{display:block;background:#fff;border-radius:var(--radius-md);padding:.6rem;box-shadow:var(--shadow-2)}
.cad__sheet img{display:block;width:100%;height:auto}
.cad__cap{margin-top:.6rem;font-size:var(--step-small);color:var(--color-text-muted)}
.picker__grid{display:grid;gap:1.25rem}
.picker fieldset{border:0;margin:0;padding:0;min-width:0}
.picker legend{padding:0;margin-bottom:.75rem}
.picker__shapes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.shape{position:relative;display:block;cursor:pointer}
.shape input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.shape span{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.9rem .5rem;min-height:5.5rem;justify-content:center;
  background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-1);font-weight:600;font-size:.9375rem;text-align:center}
.shape svg{width:3.25rem;height:2rem;color:var(--color-primary)}
.shape input:checked + span{box-shadow:0 0 0 2px var(--color-accent);color:var(--color-highlight)}
.shape input:checked + span svg{color:var(--color-accent)}
.shape input:focus-visible + span{outline:3px solid var(--color-focus);outline-offset:3px}
.picker__result{background:var(--color-surface-alt);border-radius:var(--radius-lg);padding:1.25rem 1.25rem 1.4rem}
.picker__set{margin:0 0 1.1rem}
.picker__set h3{margin:0 0 .5rem;font-size:1.0625rem}
.picker__set ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.picker__set li a{display:inline-block;padding:.45rem .85rem;border-radius:var(--radius-pill);background:var(--color-surface);
  box-shadow:var(--shadow-1);font-weight:600;font-size:.9375rem;color:var(--color-text);text-decoration:none}
.picker__set li a:hover{color:var(--color-highlight)}
.js .picker__set[hidden]{display:none}
.picker__note{margin:.25rem 0 0;color:var(--color-text-muted);font-size:var(--step-small)}
@media (min-width:48rem){.picker__shapes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:64rem){.picker__grid{grid-template-columns:1.1fr .9fr;align-items:start;gap:2rem}}

/* ============================================================
   INNER PAGES - page head, breadcrumbs, prose, fact box, gallery, style cards
   ============================================================ */
.pagehead{padding-block:clamp(1.5rem,1rem + 2.5vw,3rem) clamp(1.25rem,1rem + 1.5vw,2.25rem);
  background:linear-gradient(180deg,var(--color-surface) 0%,var(--color-bg) 100%);border-bottom:1px solid var(--color-border)}
.pagehead h1{margin-top:.6rem;max-width:22ch}
.pagehead__lede{margin-top:1rem;max-width:var(--measure);color:var(--color-text-muted);font-size:clamp(1.0625rem,1rem + .4vw,1.3125rem);line-height:1.55}
.crumbs ol{list-style:none;margin:0 0 1.1rem;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .5rem;font-size:var(--step-small);color:var(--color-text-muted)}
.crumbs li + li::before{content:"/";margin-right:.5rem;color:var(--color-border-strong)}
.crumbs a{color:var(--color-text-muted);text-decoration:none;display:inline-block;padding-block:.35rem}
.crumbs a:hover{color:var(--color-primary-strong);text-decoration:underline}
.crumbs [aria-current]{color:var(--color-text);padding-block:.35rem}

.page__grid{display:grid;gap:2rem}
.prose{max-width:var(--measure)}
.prose > * + *{margin-top:1.1rem}
.prose h2{margin-top:2.25rem;font-size:var(--step-h3)}
.prose h2:first-child{margin-top:0}
.prose ul{padding-left:1.2rem}
.prose li + li{margin-top:.4rem}
.note{border-left:3px solid var(--color-accent);background:var(--color-surface);padding:.9rem 1.1rem;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.note strong{color:var(--color-highlight)}

.factbox{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding:1.25rem 1.25rem 1.4rem;align-self:start}
.factbox h2{font-size:var(--step-h3)}
.facts{margin:1rem 0 0}
.facts > div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:.75rem;padding-block:.7rem;border-top:1px solid var(--color-border)}
.facts dt{color:var(--color-text-muted);font-size:var(--step-small);letter-spacing:.04em;text-transform:uppercase;padding-top:.15rem}
.facts dd{margin:0;font-weight:600}

.gallery{columns:1;column-gap:1rem}
.gallery__item{break-inside:avoid;margin:0 0 1rem;background:var(--color-surface);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-1)}
.gallery__item a{display:block;background:#fff;text-align:center}
.gallery__item img{display:block;width:100%;height:auto;margin-inline:auto}
.gallery__item figcaption{padding:.7rem .9rem .8rem;font-size:var(--step-small);line-height:1.45;color:var(--color-text-muted)}
.gallery__item a:hover img{filter:brightness(1.06)}

.systems__grid--flat .pcard:nth-child(even),.systems__grid--flat .pcard:nth-child(even):hover{transform:none}
.systems__grid--flat h3{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem)}

.stylegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.stylecard{margin:0;background:var(--color-surface);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-1)}
.stylecard img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.stylecard figcaption{padding:.7rem .85rem .85rem}
.stylecard h3{font-size:clamp(1rem,.95rem + .3vw,1.1875rem)}
.stylecard p{margin-top:.3rem;font-size:var(--step-small);color:var(--color-text-muted);line-height:1.45}
.jump{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.jump a{display:inline-block;padding:.5rem .85rem;border-radius:var(--radius-pill);background:var(--color-surface);box-shadow:var(--shadow-1);
  color:var(--color-text);text-decoration:none;font-size:var(--step-small);font-weight:600}
.jump a:hover{box-shadow:var(--glow);color:var(--color-highlight)}
.acc{display:grid;gap:1.25rem;padding-block:2rem;border-top:1px solid var(--color-border);scroll-margin-top:5.5rem}
.acc:first-of-type{border-top:0;padding-top:0}
.acc h2{font-size:var(--step-h3)}
.acc__text > * + *{margin-top:.9rem}
.acc__text ul{padding-left:1.2rem;color:var(--color-text)}
.acc__text li + li{margin-top:.35rem}
.pics{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-start}
.pic{display:block;background:#fff;border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-1);flex:0 1 auto}
.pic img{display:block;width:auto;height:auto;max-width:100%;max-height:9.5rem}   /* a row of small shots, not a column of big ones */
@media (min-width:64rem){
  .acc{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:3rem;align-items:start}
}
/* the eight shape renderings are 200 px originals on a #3A4342 ground: show them at their own size on the same ground */
.shapetiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;list-style:none;margin:0;padding:0}
.shapetile{background:#3A4342;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-1);display:flex;flex-direction:column}
.shapetile img{display:block;width:100%;max-width:200px;height:auto;margin:.5rem auto 0}
.shapetile h3{background:var(--color-surface);padding:.7rem .85rem .8rem;margin-top:auto;font-size:clamp(1rem,.95rem + .3vw,1.1875rem)}
@media (min-width:48rem){.shapetiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}}
.gsteps{list-style:none;margin:0;padding:0;display:grid;gap:2.25rem}
.gstep{display:grid;gap:1rem;scroll-margin-top:5.5rem}
.gstep__media{display:grid;gap:.75rem;align-content:start}
.gstep__media img{display:block;width:100%;height:auto;border-radius:var(--radius-md);box-shadow:var(--shadow-1)}
.gstep__body > * + *{margin-top:.8rem}
.gstep__body h2{font-size:var(--step-h3);margin-top:.35rem}
.gstep__body p{max-width:var(--measure)}
@media (min-width:48rem){
  .gstep{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:2.25rem;align-items:start}
  .gsteps{gap:3rem}
}
a.playbtn{text-decoration:none}
a.tab{text-decoration:none;display:inline-flex;align-items:center}
a.tab:hover{color:var(--color-highlight);border-color:rgba(246,196,83,.5)}
.video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:5}
.lead{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding:1.25rem 1.25rem 1.5rem}
.lead h2{font-size:var(--step-h3)}
.lead__fields{display:grid;gap:1rem;margin-top:1.1rem}
.lead label{display:grid;gap:.4rem;font-weight:600;font-size:var(--step-small);letter-spacing:.02em}
.lead label small{font-weight:400;color:var(--color-text-muted)}
.lead input,.lead textarea{width:100%;font:inherit;font-size:1rem;font-weight:400;color:var(--color-text);background:var(--color-bg);
  border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);padding:.75rem .85rem;min-height:48px}
.lead textarea{resize:vertical;min-height:8rem}
.lead input:focus-visible,.lead textarea:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-color:var(--color-focus)}
.lead [aria-invalid="true"]{border-color:#FF8A80}
.lead__err{color:#FFB4AB;font-weight:600}
.lead__hp{position:absolute;left:-5000px}
.lead__ts{margin-top:1rem;min-height:0}
.lead button{margin-top:1.1rem;min-width:9rem}
.lead__result{margin-top:1rem;padding:.9rem 1rem;border-radius:var(--radius-sm);background:var(--color-surface-alt);border-left:3px solid var(--color-primary)}
.lead__result--bad{border-left-color:#FF8A80}
.lead__note{margin-top:.8rem;color:var(--color-text-muted);font-size:var(--step-small)}
.people{display:grid;gap:1rem}
.person{background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-1);padding:1.1rem 1.2rem 1.2rem}
.person h3{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem)}
.person__role{color:var(--color-text-muted);font-size:var(--step-small);margin-top:.2rem}
.person dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;margin:.8rem 0 0}
.person dt{color:var(--color-text-muted);font-size:var(--step-small);padding-top:.15rem}
.person dd{margin:0;font-weight:600}
.person dd a{display:inline-block;padding-block:.2rem}
@media (min-width:40rem){
  .lead__fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lead__wide{grid-column:1 / -1}
  .people{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.cadsheets{display:grid;gap:1.25rem;margin-top:1.5rem}
.cadsheets figure{margin:0}
.cadsheets a{display:block;background:#fff;border:1px solid rgba(10,22,38,.2);border-radius:var(--radius-md);overflow:hidden}
.cadsheets img{display:block;width:100%;height:auto}
.cadsheets figcaption{margin-top:.5rem;font-weight:600;color:var(--color-text-invert)}
@media (min-width:64rem){.cadsheets{grid-template-columns:repeat(2,minmax(0,1fr))}}
.region{padding-block:1.75rem;border-top:1px solid var(--color-border);scroll-margin-top:5.5rem}
.region h2{font-size:var(--step-h3);margin-bottom:1rem}
.builder__lines{margin-top:.6rem;line-height:1.6}
.builder__lines a{display:inline-block;padding-block:.2rem;font-weight:600}
.builder__site{margin-top:.6rem;font-size:var(--step-small)}
@media (min-width:64rem){.people--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.contact-grid2{display:grid;gap:2rem}
@media (min-width:64rem){.contact-grid2{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:3rem;align-items:start}}
.guide-note{padding-block:1.75rem 0}
.guide-note .note{max-width:60rem}
.guide-note + .section{padding-top:2rem}
/* quick contact bubble: above the phone action bar, below the nav sheet */
.qc-toggle{position:fixed;right:1rem;bottom:calc(5.25rem + env(safe-area-inset-bottom, 0px));z-index:55;width:3.5rem;height:3.5rem;border-radius:50%;
  border:0;cursor:pointer;display:grid;place-items:center;background:var(--color-accent);color:var(--color-accent-contrast);
  box-shadow:0 14px 34px -12px rgb(0 0 0 / .9), 0 0 0 1px rgba(10,22,38,.35);transition:transform .18s ease, background-color .18s ease}
.qc-toggle:hover{background:var(--color-highlight);transform:scale(1.05)}
.qc-toggle:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.qc-toggle__close,.qc-toggle[aria-expanded="true"] .qc-toggle__open{display:none}
.qc-toggle[aria-expanded="true"] .qc-toggle__close{display:block}
.qc{position:fixed;right:1rem;bottom:calc(9.5rem + env(safe-area-inset-bottom, 0px));z-index:55;width:22.5rem;max-width:calc(100vw - 2rem);
  max-height:calc(100vh - 11rem);overflow-y:auto;background:var(--color-surface);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-2), 0 0 0 1px var(--color-border-strong)}
.qc__head{background:var(--color-accent);color:var(--color-accent-contrast)}
.qc__head h2{font-size:1.25rem;color:inherit}
.qc__head p{font-size:var(--step-small);margin-top:.15rem}
.lead--quick{background:none;box-shadow:none;border-radius:0;padding:1rem 1.1rem 1.2rem}
.lead--quick .lead__fields{grid-template-columns:minmax(0,1fr);gap:.55rem;margin-top:0}
.lead--quick label{display:block}
.lead--quick label small{margin-left:.35rem}
.lead--quick input,.lead--quick textarea{display:block;margin-top:.3rem;padding:.55rem .75rem;min-height:44px}
.lead--quick textarea{min-height:3.25rem}
.lead--quick .lead__err:not([hidden]){display:block;margin-top:.25rem;font-size:.8125rem}
.lead--quick .lead__ts{margin-top:.7rem}
.lead--quick button{width:100%;margin-top:.7rem}
.qc__head{padding:.75rem 1.1rem}
@media (min-width:48rem){
  .qc-toggle{right:1.5rem;bottom:1.5rem}
  .qc{right:1.5rem;bottom:5.75rem;max-height:calc(100vh - 7.5rem)}
}
@media print{.qc-toggle,.qc{display:none}}
.section--tight{padding-top:0}
.paper a:not(.btn){color:#0B5C73}
.paper a:not(.btn):hover{color:#083F50}
.ctable tbody th a{font-weight:700}

@media (min-width:48rem){
  .gallery{columns:2}
  .stylegrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
  .page__grid{grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:2.5rem;align-items:start}
}
@media (min-width:64rem){
  .gallery{columns:3;column-gap:1.25rem}
  .gallery--few{columns:2;max-width:60rem}
  .gallery__item{margin-bottom:1.25rem}
  .stylegrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
  .page__grid{gap:4rem}
  .systems__grid--flat{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:80rem){
  .systems__grid--flat{grid-template-columns:repeat(4,minmax(0,1fr))}
  .systems__grid--flat[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}   /* three cards fill the row */
  .systems__grid--flat[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:56rem}
}