/* tokens.css */
/* ATELIER — design tokens
   The premise: aluminium is sold on precision. The interface borrows the
   language of the fabrication drawing — graphite ground, hairline grid,
   dimension lines, monospace annotation — with brushed metal and one
   anodised-orange accent as the only warmth. */

:root {
  /* ---- Ground ---- */
  --ink:        #0B0D10;   /* deepest — footer, inverted wells */
  --graphite:   #121418;   /* page canvas */
  --steel:      #191C21;   /* raised surface */
  --steel-2:    #22262D;   /* cards, inputs */
  --steel-3:    #2C313A;   /* hover surface */

  /* ---- Drawing lines ---- */
  --hairline:        rgb(206 220 232 / 0.08);
  --hairline-mid:    rgb(206 220 232 / 0.16);
  --hairline-strong: rgb(206 220 232 / 0.30);

  /* ---- Brushed aluminium ---- */
  --alu-hi:  #F2F6F9;
  --alu:     #C3CCD5;
  --alu-mid: #93A0AB;
  --alu-lo:  #6D7883;

  /* ---- Type ---- */
  --text:      #DDE4EA;
  --text-mid:  #9AA5B0;
  /* 4.85:1 on --graphite. Do not darken: this drives the 11–12px monospace
     annotation, which is small text and must clear WCAG AA (4.5:1). */
  --text-dim:  #7A848F;

  /* ---- Accent: anodised orange ---- */
  --accent:      #FF5A1F;
  --accent-hot:  #FF7A45;
  --accent-deep: #C93F0C;
  --accent-glow: rgb(255 90 31 / 0.22);

  /* ---- Inverted "datasheet" block ---- */
  --paper:     #EDF0F2;
  --paper-ink: #14171B;
  --paper-mid: #55606B;
  --paper-line: rgb(20 23 27 / 0.14);

  --whatsapp: #25D366;

  /* ---- Typefaces ---- */
  --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-body:    'IBM Plex Sans', ui-sans-serif, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Fluid display scale — condensed faces carry size well. */
  --step-hero: clamp(3.5rem, 11vw, 9.5rem);
  --step-h2:   clamp(2.25rem, 5.2vw, 4.25rem);
  --step-h3:   clamp(1.5rem, 2.4vw, 2.125rem);

  --text-xs:   0.6875rem;  /* 11px — mono annotation */
  --text-sm:   0.75rem;    /* 12px — mono labels */
  --text-base: 0.9375rem;  /* 15px — body */
  --text-md:   1.0625rem;  /* 17px */
  --text-lg:   1.25rem;    /* 20px — lead */

  --leading-tight: 0.92;
  --leading-snug:  1.15;
  --leading-body:  1.65;

  --track-mono: 0.14em;
  --track-wide: 0.06em;

  /* ---- Space ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 7rem;
  --space-20: 10rem;

  /* ---- Layout ---- */
  --container: 1340px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --header-h: 76px;
  --grid-cell: 88px;       /* blueprint grid pitch */

  /* ---- Form ---- */
  --radius: 0;             /* nothing is rounded in a drawing */
  --radius-pill: 999px;

  --shadow-plate: 0 24px 60px -24px rgb(0 0 0 / 0.75);
  --shadow-lift:  0 12px 32px -12px rgb(0 0 0 / 0.6);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms var(--ease-out);
  --t-base: 320ms var(--ease-out);
  --t-slow: 620ms var(--ease-out);

  --z-grid: 0;
  --z-base: 1;
  --z-header: 200;
  --z-float: 300;
  --z-modal: 500;
}

/* reset.css */
/* Reset + base */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-padding-top: calc(var(--header-h) + 2rem);
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text);
  background-color: var(--graphite);
  overflow-x: hidden;
  overflow-wrap: break-word;
}

/* The blueprint field. Fixed so the drawing grid stays registered to the
   viewport while content scrolls over it, and masked so it fades at the edges
   instead of tiling flatly to the corners. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-grid);
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--hairline) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hairline) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 20%, transparent 78%);
}

/* Fine film grain — keeps the large flat darks from banding. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-grid);
  pointer-events: none;
  opacity: 0.30;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Everything real sits above the field. */
.site-header, main, .site-footer, .float-stack, .cookie-consent { position: relative; z-index: var(--z-base); }

img, picture, svg, video { max-width: 100%; display: block; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

ul, ol { list-style: none; }

a { color: inherit; text-decoration: none; transition: color var(--t-fast); }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100%; left: var(--space-4);
  z-index: var(--z-modal);
  padding: var(--space-3) var(--space-5);
  background: var(--accent); color: #fff;
  font-family: var(--font-mono); font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: var(--track-mono);
}
.skip-link:focus { top: var(--space-3); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* fonts.css */
/* Self-hosted typefaces — no CDN, so the CSP can stay 'self' only.
   Big Shoulders Display: condensed industrial signage face, carries the headlines.
   IBM Plex Sans: humanist-technical body face.
   IBM Plex Mono: drawing annotations, section numbering, dimension labels. */


@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/bigshoulders-400-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/bigshoulders-400-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plexsans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plexsans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/plexsans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/plexsans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plexmono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plexmono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/plexmono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/plexmono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* typography.css */
/* Typography
   Big Shoulders carries every headline — condensed, tightly leaded, set large.
   Plex Sans handles running text. Plex Mono is reserved for annotation. */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--alu-hi);
}

.h-hero {
  font-size: var(--step-hero);
  line-height: 0.86;
  font-weight: 800;
}

.h-section {
  font-size: var(--step-h2);
  line-height: 0.94;
}

.h-sub {
  font-size: var(--step-h3);
  line-height: 1.05;
}

p { line-height: var(--leading-body); }
p + p { margin-top: var(--space-4); }

.lead {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--text-mid);
  max-width: 60ch;
}

.body-text {
  color: var(--text-mid);
  max-width: 66ch;
}

.body-text strong,
.lead strong { color: var(--text); font-weight: 600; }

/* ---- Brushed aluminium text ----
   Fine striations layered over a raked highlight ramp, clipped to the glyphs.
   Reserved for one or two words per page so it stays an event. */
.alu-text {
  background-image:
    repeating-linear-gradient(101deg,
      rgb(255 255 255 / 0.13) 0 1px,
      transparent 1px 4px),
    linear-gradient(101deg,
      var(--alu-lo)  0%,
      var(--alu-hi)  14%,
      var(--alu-mid) 30%,
      var(--alu-hi)  48%,
      var(--alu-lo)  63%,
      var(--alu)     80%,
      var(--alu-lo) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Monospace annotation ---- */
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-dim);
}

.mono--accent { color: var(--accent); }
.mono--bright { color: var(--alu); }

/* Section index: 01 / SERVICES */
.idx {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--space-5);
}

.idx__num {
  color: var(--accent);
  font-weight: 500;
}

/* The rule runs out from the label to the end of the column. */
.idx__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--hairline-mid), transparent);
}

/* ---- Inverted datasheet block ---- */
.paper { background: var(--paper); color: var(--paper-ink); }
.paper h1, .paper h2, .paper h3, .paper h4 { color: var(--paper-ink); }
.paper .body-text, .paper .lead { color: var(--paper-mid); }
.paper .body-text strong, .paper .lead strong { color: var(--paper-ink); }
.paper .mono { color: var(--paper-mid); }
.paper .idx { color: var(--paper-mid); }
.paper .idx__rule { background: linear-gradient(to right, var(--paper-line), transparent); }
.paper a:not(.btn) { color: var(--accent-deep); }

/* blueprint.css */
/* Blueprint devices — the drawing vocabulary this design is built from.
   Dimension lines, crop-mark brackets, tick scales, plate frames. */

/* ---- Dimension line ----
   <div class="dim"><span class="dim__label">2400 MM</span></div>
   Ticked at both ends like a drawing callout, with the label punched out of
   the rule by matching the surrounding ground. */
.dim {
  position: relative;
  height: 1px;
  background: var(--hairline-strong);
  margin-block: var(--space-5);
}

.dim::before,
.dim::after {
  content: '';
  position: absolute;
  top: -5px;
  width: 1px;
  height: 11px;
  background: var(--hairline-strong);
}

.dim::before { left: 0; }
.dim::after  { right: 0; }

.dim__label {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  padding-right: var(--space-4);
  background: var(--graphite);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  max-width: 100%;
}

.dim__label--center {
  left: 50%;
  transform: translate(-50%, -50%);
  padding-inline: var(--space-4);
}

/* Sits clear of the right-hand tick so the terminator stays readable as a
   drawing mark rather than colliding with the last word. */
.dim__label--end {
  left: auto;
  right: var(--space-5);
  padding-right: 0;
  padding-left: var(--space-4);
}

.paper .dim { background: var(--paper-line); }
.paper .dim::before, .paper .dim::after { background: var(--paper-line); }
.paper .dim__label { background: var(--paper); color: var(--paper-mid); }

/* ---- Crop-mark brackets ----
   Two pseudo-elements draw opposite corners, so a card reads as a framed
   detail on a drawing sheet rather than a boxed-in panel. They extend on
   hover, which is the whole interaction language of the site. */
.brackets {
  position: relative;
}

.brackets::before,
.brackets::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--hairline-strong);
  border-style: solid;
  transition: width var(--t-base), height var(--t-base), border-color var(--t-base);
  pointer-events: none;
}

.brackets::before {
  top: -1px; left: -1px;
  border-width: 1px 0 0 1px;
}

.brackets::after {
  bottom: -1px; right: -1px;
  border-width: 0 1px 1px 0;
}

.brackets:hover::before,
.brackets:hover::after,
.brackets.is-active::before,
.brackets.is-active::after {
  width: 26px;
  height: 26px;
  border-color: var(--accent);
}

/* ---- Tick scale ----
   A ruler edge. Used along the top of the services index and the footer. */
.ticks {
  height: 10px;
  background-image: repeating-linear-gradient(
    to right,
    var(--hairline-mid) 0 1px,
    transparent 1px 12px
  );
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

/* ---- Plate: a framed image, presented as a drawing detail ---- */
.plate {
  position: relative;
  border: 1px solid var(--hairline-mid);
  background: var(--steel);
}

.plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Cool the photograph toward the palette so it sits inside the drawing
     rather than on top of it. */
  filter: grayscale(0.55) contrast(1.12) brightness(0.86);
  transition: filter var(--t-slow), transform var(--t-slow);
}

.plate:hover img {
  filter: grayscale(0.2) contrast(1.06) brightness(0.97);
}

.plate__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgb(11 13 16 / 0.86);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--hairline-mid);
  border-right: 1px solid var(--hairline-mid);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-mid);
}

.plate__caption b { color: var(--accent); font-weight: 500; }

/* ---- Extruded profile glyph ----
   The cross-sections drawn in the services index. */
.profile {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  stroke: var(--alu-mid);
  stroke-width: 1.25;
  fill: none;
  transition: stroke var(--t-base), transform var(--t-base);
}

.profile__fill { fill: rgb(195 204 213 / 0.07); stroke: none; }

/* ---- Corner registration marks on full-bleed bands ---- */
.reg-mark {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid var(--hairline-mid);
  border-radius: 50%;
}
.reg-mark::before,
.reg-mark::after {
  content: '';
  position: absolute;
  background: var(--hairline-mid);
}
.reg-mark::before { top: 4px; left: -5px; width: 19px; height: 1px; }
.reg-mark::after  { left: 4px; top: -5px; height: 19px; width: 1px; }

/* layout.css */
/* Layout: container, section rhythm, the ruled column edges */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: 940px; }
.container--wide   { max-width: 1560px; }

/* A container whose edges are ruled, like the trim lines on a drawing sheet. */
.container--ruled {
  position: relative;
}

.container--ruled::before,
.container--ruled::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--hairline);
}

.container--ruled::before { left: calc(var(--gutter) - 1px); }
.container--ruled::after  { right: calc(var(--gutter) - 1px); }

.section {
  position: relative;
  padding-block: var(--space-16);
}

.section--tight { padding-block: var(--space-10); }
.section--flush-top { padding-top: 0; }

/* Full-bleed band with its own ground. */
.band { position: relative; }
.band--steel { background: var(--steel); }
.band--ink   { background: var(--ink); }

.band--ruled {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

/* ---- Splits ---- */
.split {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

.split--55  { grid-template-columns: 1.2fr 1fr; }
.split--45  { grid-template-columns: 1fr 1.2fr; }
.split--even { grid-template-columns: 1fr 1fr; }

/* Header row: index + heading left, supporting copy right. */
.section-head {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--space-10);
  align-items: end;
  margin-bottom: var(--space-10);
}

.section-head--center {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* buttons.css */
/* Buttons — squared, monospace-labelled, with an accent wipe on hover. */

.btn {
  --btn-fg: var(--alu-hi);
  --btn-bd: var(--hairline-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 1.05rem var(--space-6);
  overflow: hidden;
  border: 1px solid var(--btn-bd);
  color: var(--btn-fg);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--t-base), border-color var(--t-base);
}

/* The wipe: a block that sweeps in from the left under the label. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-base);
  z-index: 0;
}

.btn > * { position: relative; z-index: 1; }

.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); }

.btn:hover, .btn:focus-visible {
  color: #fff;
  border-color: var(--accent);
}

.btn__icon {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex-shrink: 0;
}

/* Primary: already carrying the accent, so it inverts to metal on hover. */
.btn--primary {
  --btn-fg: #fff;
  --btn-bd: var(--accent);
  background: var(--accent);
}

.btn--primary::before { background: var(--alu-hi); }
.btn--primary:hover, .btn--primary:focus-visible {
  color: var(--ink);
  border-color: var(--alu-hi);
}

/* Ghost — the default outline treatment. */
.btn--ghost { background: transparent; }

/* On the paper block. */
.paper .btn { --btn-fg: var(--paper-ink); --btn-bd: var(--paper-line); }
.paper .btn:hover { color: #fff; }
.paper .btn--primary { --btn-fg: #fff; --btn-bd: var(--accent); }
.paper .btn--primary::before { background: var(--paper-ink); }
.paper .btn--primary:hover { color: #fff; border-color: var(--paper-ink); }

/* ---- Text link with a drawn underline ---- */
.link-draw {
  position: relative;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 3px;
}

.link-draw::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--t-base);
}

.link-draw:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ---- Floating contact stack (bottom-right, per /srv/CLAUDE.md) ---- */

.float-stack {
  position: fixed;
  right: var(--gutter);
  bottom: var(--space-5);
  z-index: var(--z-float);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.float-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--hairline-strong);
  background: var(--steel-2);
  color: var(--text);
  transition: background var(--t-base), color var(--t-base),
              border-color var(--t-base), transform var(--t-fast);
}

.float-btn:hover { transform: translateY(-2px); }

.float-btn svg { width: 26px; height: 26px; fill: currentColor; }

.float-btn--whatsapp {
  background: var(--whatsapp);
  border-color: var(--whatsapp);
  color: #08130C;
  animation: pulse-wa 2.6s infinite;
}

.float-btn--whatsapp:hover { background: #1FBF5B; border-color: #1FBF5B; color: #08130C; }

@keyframes pulse-wa {
  0%   { box-shadow: 0 0 0 0 rgb(37 211 102 / 0.55); }
  70%  { box-shadow: 0 0 0 18px rgb(37 211 102 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(37 211 102 / 0); }
}

/* Back-to-top sits above WhatsApp in the same stack, so it can never overlap. */
.float-btn--top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--t-base), visibility var(--t-base), transform var(--t-base),
              background var(--t-base), border-color var(--t-base);
}

.float-btn--top.is-visible { opacity: 1; visibility: visible; transform: none; }
.float-btn--top:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* header.css */
/* Header — a title block, not a nav bar. Hairline-ruled, monospace, and it
   condenses on scroll rather than changing colour. */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgb(18 20 24 / 0.72);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--hairline);
  transition: background var(--t-base), border-color var(--t-base);
}

.site-header.is-stuck {
  background: rgb(11 13 16 / 0.94);
  border-bottom-color: var(--hairline-mid);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: var(--header-h);
}

/* ---- Wordmark ---- */
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--hairline-strong);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent);
  transition: border-color var(--t-base), background var(--t-base), color var(--t-base);
}

.brand:hover .brand__mark {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.brand__name {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand__name b {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--alu-hi);
}

.brand__name span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---- Navigation ---- */
.nav { display: flex; align-items: center; gap: var(--space-6); }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding-block: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-mid);
}

/* Each item is numbered, like a parts list. */
.nav__num {
  font-size: var(--text-xs);
  color: var(--text-dim);
  transition: color var(--t-base);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--t-base);
}

.nav__link:hover { color: var(--alu-hi); }
.nav__link:hover .nav__num { color: var(--accent); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left center; }

.nav__link[aria-current='page'] { color: var(--alu-hi); }
.nav__link[aria-current='page'] .nav__num { color: var(--accent); }
.nav__link[aria-current='page']::after { transform: scaleX(1); }

/* ---- Header phone ---- */
.header__tel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
  flex-shrink: 0;
}

.header__tel small {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-dim);
}

.header__tel b {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--alu-hi);
  transition: color var(--t-base);
}

.header__tel:hover b { color: var(--accent); }

/* ---- Mobile toggle ---- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  color: var(--alu-hi);
}

.nav-toggle span {
  display: block;
  width: 26px;
  height: 1px;
  background: currentColor;
  transition: transform var(--t-base), opacity var(--t-base);
}

.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Inner-page title block ---- */
.page-head {
  position: relative;
  padding-block: var(--space-16) var(--space-10);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}

.page-head__title {
  font-size: var(--step-h2);
  margin-block: var(--space-4) var(--space-5);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-dim);
}

.crumbs a:hover { color: var(--accent); }
.crumbs li + li::before { content: '/'; margin-right: var(--space-3); opacity: 0.45; }

/* A single oversized ghost numeral watermarks each inner page. */
.page-head__ghost {
  position: absolute;
  right: calc(var(--gutter) * -0.4);
  top: 50%;
  transform: translateY(-46%);
  font-family: var(--font-display);
  font-size: clamp(9rem, 22vw, 20rem);
  font-weight: 800;
  line-height: 0.7;
  color: transparent;
  -webkit-text-stroke: 1px var(--hairline-mid);
  pointer-events: none;
  user-select: none;
}

/* hero.css */
/* Hero — a title block on a drawing sheet: oversized condensed headline,
   dimension callouts, and the one photograph presented as a framed detail. */

.hero {
  position: relative;
  padding-block: var(--space-12) var(--space-10);
  overflow: hidden;
}

/* The photograph bleeds in behind everything at low opacity and is masked
   away from the type, so the hero has depth without a hard image panel. */
.hero__bleed {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('/assets/images/hero-aluminium-marrakech.webp');
  background-size: cover;
  background-position: 62% 40%;
  opacity: 0.30;
  filter: grayscale(0.75) contrast(1.15);
  -webkit-mask-image: linear-gradient(105deg, transparent 6%, #000 46%, #000 80%, transparent 100%);
  mask-image: linear-gradient(105deg, transparent 6%, #000 46%, #000 80%, transparent 100%);
}

/* Scrim: the photograph is dense with edges and competes with the headline.
   A raked gradient keeps the metal visible on the right, where the plate and
   the aside sit, and clears the left column for type. Painted after the bleed
   but below .hero__inner (z-index 1). */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      var(--graphite) 10%,
      rgb(18 20 24 / 0.86) 36%,
      rgb(18 20 24 / 0.45) 58%,
      rgb(18 20 24 / 0.15) 78%,
      transparent 100%),
    linear-gradient(to bottom,
      rgb(18 20 24 / 0.55) 0%,
      transparent 26%,
      transparent 62%,
      var(--graphite) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--space-10);
  align-items: end;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.hero__eyebrow-rule {
  width: clamp(40px, 8vw, 120px);
  height: 1px;
  background: var(--accent);
}

.hero__title {
  margin-bottom: var(--space-2);
}

/* Each line is its own block so they can stagger in on load. */
.hero__line { display: block; }

.hero__line--alu { /* carries .alu-text */ }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero__meta-item dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-dim);
}

.hero__meta-item dd {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--alu-hi);
  line-height: 1;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* ---- Right column: the framed plate ---- */
.hero__plate {
  aspect-ratio: 4 / 5;
  max-height: 560px;
}

.hero__aside-note {
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-transform: uppercase;
}

.hero__aside-note b { color: var(--alu); font-weight: 500; }

/* ---- Marquee of capabilities beneath the hero ---- */
.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  border-block: 1px solid var(--hairline);
  background: var(--ink);
  padding-block: var(--space-4);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-8);
  padding-right: var(--space-8);
  animation: marquee 42s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--alu-mid);
  white-space: nowrap;
}

.marquee__item::after {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--accent);
  transform: rotate(45deg);
  flex-shrink: 0;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* sections.css */
/* Page sections */

/* ---- Services: a parts index ----
   Rows, not cards. Each carries a drawn profile cross-section, a number, and
   a rule that fills with accent on hover. */

.index-list {
  border-top: 1px solid var(--hairline);
}

.index-row {
  position: relative;
  display: grid;
  grid-template-columns: 68px 72px 1fr auto;
  gap: var(--space-6);
  align-items: center;
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--hairline);
  transition: background var(--t-base);
}

/* Accent rule that draws along the bottom edge on hover. */
.index-row::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-slow);
}

.index-row:hover::after { transform: scaleX(1); }
.index-row:hover { background: linear-gradient(to right, rgb(255 90 31 / 0.05), transparent 55%); }
.index-row:hover .profile { stroke: var(--accent); transform: translateX(3px); }
.index-row:hover .index-row__title { color: var(--alu-hi); }

.index-row__num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-mono);
  color: var(--text-dim);
}

.index-row__body { max-width: 62ch; }

.index-row__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--alu);
  margin-bottom: var(--space-2);
  transition: color var(--t-base);
}

.index-row__text {
  font-size: var(--text-base);
  color: var(--text-mid);
}

.index-row__spec {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: right;
  white-space: nowrap;
}

/* ---- Spec table: "Pourquoi nous choisir" as a data sheet ---- */

.spec-table { border-top: 1px solid var(--hairline); }

.spec-row {
  display: grid;
  grid-template-columns: 88px 1fr 1.35fr;
  gap: var(--space-6);
  align-items: baseline;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--hairline);
  transition: border-color var(--t-base);
}

.spec-row:hover { border-bottom-color: var(--accent); }

.spec-row__num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-mono);
  color: var(--accent);
}

.spec-row__key {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--alu-hi);
}

.spec-row__val {
  font-size: var(--text-base);
  color: var(--text-mid);
}

/* ---- Stat strip ---- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--hairline);
}

.stat {
  padding: var(--space-6);
  border-right: 1px solid var(--hairline);
}

.stat:last-child { border-right: none; }

.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 0.9;
  color: var(--alu-hi);
  margin-bottom: var(--space-3);
}

.stat__num em { font-style: normal; color: var(--accent); }

.stat__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---- Prose ---- */
.prose h2 {
  font-size: var(--step-h3);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.prose h2:first-child { margin-top: 0; }

.prose h3 {
  font-size: 1.4rem;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.prose p {
  font-size: var(--text-md);
  color: var(--text-mid);
  margin-bottom: var(--space-4);
  max-width: 70ch;
}

.prose ul { margin: 0 0 var(--space-6); }

.prose li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-md);
  color: var(--text-mid);
  margin-bottom: var(--space-3);
  max-width: 70ch;
}

/* Diamond bullets, matching the marquee separators. */
.prose li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 5px;
  height: 5px;
  background: var(--accent);
  transform: rotate(45deg);
}

.prose strong { color: var(--text); font-weight: 600; }
.paper .prose strong { color: var(--paper-ink); }
.paper .prose p, .paper .prose li { color: var(--paper-mid); }

.prose a:not(.btn) {
  color: var(--accent);
  border-bottom: 1px solid rgb(255 90 31 / 0.4);
  transition: border-color var(--t-fast);
}

.prose a:not(.btn):hover { border-bottom-color: var(--accent); }

/* ---- Coverage chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.chip {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--hairline-mid);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-mid);
  transition: border-color var(--t-base), color var(--t-base);
}

.chip:hover { border-color: var(--accent); color: var(--alu-hi); }
.paper .chip { border-color: var(--paper-line); color: var(--paper-mid); }

/* ---- Blog empty state ---- */
.empty-state {
  padding: var(--space-12) var(--space-8);
  border: 1px solid var(--hairline);
  text-align: center;
}

.empty-state .h-sub { margin-bottom: var(--space-4); }
.empty-state p { color: var(--text-mid); max-width: 52ch; margin-inline: auto; }
.empty-state .btn { margin-top: var(--space-6); }

/* ---- Contact detail rows ---- */
.contact-rows { border-top: 1px solid var(--hairline); }

.contact-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--space-5);
  align-items: baseline;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--hairline);
}

.contact-row__key {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-dim);
}

.contact-row__val {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--alu-hi);
  line-height: 1.1;
}

.contact-row__val a { transition: color var(--t-fast); }
.contact-row__val a:hover { color: var(--accent); }
.contact-row__note {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  text-transform: none;
  color: var(--text-mid);
}

/* accordion.css */
/* FAQ — a numbered technical index that opens in place. */

.faq { border-top: 1px solid var(--paper-line); }

.faq__item { border-bottom: 1px solid var(--paper-line); }

.faq__trigger {
  display: grid;
  grid-template-columns: 56px 1fr 28px;
  gap: var(--space-5);
  align-items: baseline;
  width: 100%;
  padding-block: var(--space-5);
  text-align: left;
  transition: color var(--t-base);
}

.faq__num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-mono);
  color: var(--accent);
}

.faq__q {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--paper-ink);
  transition: color var(--t-base);
}

.faq__trigger:hover .faq__q { color: var(--accent-deep); }

/* Plus/minus drawn from two rules. */
.faq__sign {
  position: relative;
  align-self: center;
  width: 15px;
  height: 15px;
  justify-self: end;
}

.faq__sign::before,
.faq__sign::after {
  content: '';
  position: absolute;
  background: var(--paper-ink);
  transition: transform var(--t-base), opacity var(--t-base);
}

.faq__sign::before { top: 7px; left: 0; width: 15px; height: 1px; }
.faq__sign::after  { left: 7px; top: 0; width: 1px; height: 15px; }

.faq__trigger[aria-expanded='true'] .faq__sign::after { transform: rotate(90deg); opacity: 0; }
.faq__trigger[aria-expanded='true'] .faq__q { color: var(--accent-deep); }

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base);
}

.faq__panel.is-open { grid-template-rows: 1fr; }

.faq__panel-inner { overflow: hidden; }

.faq__panel p {
  grid-column: 2;
  max-width: 76ch;
  padding: 0 0 var(--space-6);
  margin-left: calc(56px + var(--space-5));
  font-size: var(--text-md);
  color: var(--paper-mid);
}

/* Dark-ground variant, if the FAQ is ever moved off the paper block. */
.faq--dark { border-top-color: var(--hairline); }
.faq--dark .faq__item { border-bottom-color: var(--hairline); }
.faq--dark .faq__q { color: var(--alu-hi); }
.faq--dark .faq__sign::before, .faq--dark .faq__sign::after { background: var(--alu-hi); }
.faq--dark .faq__panel p { color: var(--text-mid); }
.faq--dark .faq__trigger:hover .faq__q,
.faq--dark .faq__trigger[aria-expanded='true'] .faq__q { color: var(--accent); }

/* forms.css */
/* Forms — styled as a project data sheet: mono labels, ruled fields,
   no rounding, accent focus. */

.form { display: grid; gap: var(--space-5); }

.form--plate {
  padding: var(--space-8);
  border: 1px solid var(--hairline-mid);
  background: var(--steel);
}

.form__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--hairline);
}

.form__title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--alu-hi);
}

.form__row { display: grid; gap: var(--space-5); }
.form__row--2 { grid-template-columns: 1fr 1fr; }

.form__field { display: flex; flex-direction: column; gap: var(--space-2); }

.form__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-dim);
}

.form__label .req { color: var(--accent); }

/* Underline-only fields — closer to a form on a printed sheet than a boxed
   input, and it keeps the ruled language consistent. */
.form__input,
.form__textarea {
  width: 100%;
  padding: var(--space-3) 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--alu-hi);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline-mid);
  border-radius: 0;
  transition: border-color var(--t-base);
}

.form__input:focus,
.form__textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.form__input::placeholder,
.form__textarea::placeholder { color: var(--text-dim); }

.form__textarea { min-height: 116px; resize: vertical; }

.form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__message {
  display: none;
  padding: var(--space-4);
  border-left: 2px solid;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
}

.form__message.is-visible { display: block; }

.form__message--success {
  background: rgb(37 211 102 / 0.10);
  border-color: var(--whatsapp);
  color: #8FE7B4;
}

.form__message--error {
  background: rgb(255 90 31 / 0.10);
  border-color: var(--accent);
  color: var(--accent-hot);
}

.form__note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-transform: uppercase;
}

/* ---- Inline callback field ---- */
.form--inline {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: end;
}

/* ---- Paper variant ---- */
.paper .form--plate { background: transparent; border-color: var(--paper-line); }
.paper .form__title { color: var(--paper-ink); }
.paper .form__head { border-bottom-color: var(--paper-line); }
.paper .form__label { color: var(--paper-mid); }
.paper .form__input,
.paper .form__textarea { color: var(--paper-ink); border-bottom-color: var(--paper-line); }
.paper .form__input::placeholder,
.paper .form__textarea::placeholder { color: var(--paper-mid); }
.paper .form__note { color: var(--paper-mid); }

/* footer.css */
/* Footer — the drawing's title block: ruled cells, revision line, stamp. */

.site-footer {
  background: var(--ink);
  border-top: 1px solid var(--hairline);
}

/* Oversized closing wordmark, stroked rather than filled. */
.footer__stamp {
  padding-block: var(--space-10) var(--space-6);
  overflow: hidden;
}

.footer__stamp-text {
  font-family: var(--font-display);
  font-size: clamp(3rem, 13vw, 11rem);
  font-weight: 800;
  line-height: 0.82;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--hairline-mid);
  white-space: nowrap;
  transition: -webkit-text-stroke-color var(--t-slow);
}

.footer__stamp:hover .footer__stamp-text { -webkit-text-stroke-color: var(--accent); }

.footer__main {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--space-8);
  padding-block: var(--space-8);
  border-top: 1px solid var(--hairline);
}

.footer__col-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-5);
}

.footer__about {
  font-size: var(--text-base);
  color: var(--text-mid);
  max-width: 42ch;
  margin-bottom: var(--space-5);
}

.footer__list { display: flex; flex-direction: column; gap: var(--space-3); }

.footer__list a,
.footer__list span {
  font-size: var(--text-base);
  color: var(--text-mid);
  transition: color var(--t-fast);
}

.footer__list a:hover { color: var(--accent); }

.footer__list--mono a,
.footer__list--mono span {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.03em;
}

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-dim);
}

.footer__bar a:hover { color: var(--accent); }
.footer__bar strong { color: var(--text-mid); font-weight: 500; }

/* ---- Cookie consent ---- */
.cookie-consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-modal);
  display: none;
  background: var(--ink);
  border-top: 1px solid var(--hairline-mid);
}

.cookie-consent.is-visible { display: block; }

.cookie-consent__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-4);
  /* Clear of the floating buttons. */
  padding-right: calc(var(--gutter) + 70px);
}

.cookie-consent p {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--text-mid);
  max-width: 72ch;
}

.cookie-consent a { color: var(--accent); border-bottom: 1px solid rgb(255 90 31 / 0.4); }

/* motion.css */
/* Motion
   Two ideas only: a staggered draw-in on first paint for the hero, and a
   single reveal as each block enters the viewport. Rules "draw" along their
   axis rather than fading, which keeps the drafting metaphor intact. */

/* ---- Scroll reveal (JS adds .is-in) ----
   Gated behind `scripting: enabled` so the hidden state is never applied when
   JS is off. Browsers that don't understand the query simply skip the block
   and render everything visible — which is the correct fallback either way.
   An inline `.js` bootstrap script would be the usual trick, but the CSP here
   is script-src 'self' and inline scripts are blocked. */
@media (scripting: enabled) {
  .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  }

  .reveal-group > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  }

  .reveal-rule {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 900ms var(--ease-io);
  }
}

.reveal.is-in { opacity: 1; transform: none; }
.reveal-group.is-in > * { opacity: 1; transform: none; }
.reveal-rule.is-in { transform: scaleX(1); }
.reveal-group.is-in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-group.is-in > *:nth-child(2) { transition-delay: 70ms; }
.reveal-group.is-in > *:nth-child(3) { transition-delay: 140ms; }
.reveal-group.is-in > *:nth-child(4) { transition-delay: 210ms; }
.reveal-group.is-in > *:nth-child(5) { transition-delay: 280ms; }
.reveal-group.is-in > *:nth-child(6) { transition-delay: 350ms; }
.reveal-group.is-in > *:nth-child(7) { transition-delay: 420ms; }
.reveal-group.is-in > *:nth-child(8) { transition-delay: 490ms; }
.reveal-group.is-in > *:nth-child(9) { transition-delay: 560ms; }

/* ---- Hero load choreography ---- */
@keyframes rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

@keyframes draw-x {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes plate-in {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.hero__eyebrow,
.hero__title .hero__line,
.hero__meta,
.hero__actions,
.hero__aside { opacity: 0; animation: rise 900ms var(--ease-out) forwards; }

.hero__eyebrow            { animation-delay: 100ms; }
.hero__title .hero__line:nth-child(1) { animation-delay: 200ms; }
.hero__title .hero__line:nth-child(2) { animation-delay: 300ms; }
.hero__title .hero__line:nth-child(3) { animation-delay: 400ms; }
.hero__meta               { animation-delay: 560ms; }
.hero__actions            { animation-delay: 660ms; }

.hero__aside { animation: plate-in 1100ms var(--ease-out) 420ms forwards; }

.hero__eyebrow-rule {
  transform-origin: left center;
  animation: draw-x 900ms var(--ease-io) 220ms both;
}

.hero .dim {
  transform-origin: left center;
  animation: draw-x 1100ms var(--ease-io) 700ms both;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-group > *, .reveal-rule { opacity: 1; transform: none; transition: none; }
  .hero__eyebrow, .hero__title .hero__line, .hero__meta,
  .hero__actions, .hero__aside, .hero__eyebrow-rule, .hero .dim {
    opacity: 1; animation: none; transform: none;
  }
}

/* responsive.css */
/* Responsive */

@media (max-width: 1180px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero__plate { aspect-ratio: 16 / 9; max-height: 380px; }
  .section-head { grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
  .split--55, .split--45, .split--even { grid-template-columns: 1fr; }
  .spec-row { grid-template-columns: 60px 1fr; }
  .spec-row__val { grid-column: 2; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }
}

/* ---- Mobile nav ---- */
@media (max-width: 940px) {
  :root { --header-h: 62px; }

  .nav-toggle { display: flex; flex-shrink: 0; }

  /* The brand must be allowed to shrink, or it pushes the toggle off-screen. */
  .brand { min-width: 0; gap: var(--space-3); }
  .brand__name { min-width: 0; }
  .brand__name b {
    font-size: 1.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .brand__name span { display: none; }

  .site-header__nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: var(--space-5) var(--gutter) var(--space-8);
    background: var(--ink);
    border-bottom: 1px solid var(--hairline-mid);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }

  .site-header__nav.is-open { display: flex; }

  .nav { flex-direction: column; align-items: stretch; gap: 0; }

  .nav__link {
    justify-content: flex-start;
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--hairline);
    font-size: var(--text-base);
  }

  .nav__link::after { display: none; }

  .header__tel--desktop { display: none; }
  .header__tel--drawer { display: flex; align-items: flex-start; margin-top: var(--space-6); }
  .header__tel--drawer b { font-size: 1.4rem; }
}

@media (min-width: 941px) {
  .header__tel--drawer { display: none; }
}

/* ---- Phone ---- */
@media (max-width: 720px) {
  .index-row {
    grid-template-columns: 44px 1fr;
    gap: var(--space-3) var(--space-4);
    padding-block: var(--space-5);
  }

  /* The profile glyph moves beside the number; the spec drops below the copy. */
  .index-row__profile { grid-row: 1; grid-column: 2; justify-self: start; }
  .index-row__body { grid-column: 1 / -1; }
  .index-row__spec { grid-column: 1 / -1; text-align: left; }

  .spec-row { grid-template-columns: 44px 1fr; gap: var(--space-3) var(--space-4); }
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 1px solid var(--hairline); }
  .stat:last-child { border-bottom: none; }

  .form__row--2 { grid-template-columns: 1fr; }
  .form--plate { padding: var(--space-5); }
  .form--inline { grid-template-columns: 1fr; }

  .faq__trigger { grid-template-columns: 38px 1fr 20px; gap: var(--space-3); }
  .faq__panel p { margin-left: calc(38px + var(--space-3)); }

  .contact-row { grid-template-columns: 1fr; gap: var(--space-2); }

  /* Dimension lines restack: the rule sits above and the label runs beneath it
     in normal flow, so long callouts wrap instead of forcing a page scroll. */
  .dim {
    height: auto;
    background: none;
    margin-block: var(--space-4);
  }
  .dim::before {
    position: static;
    display: block;
    width: 100%;
    height: 1px;
    background: var(--hairline-strong);
  }
  .dim::after { display: none; }
  .dim__label {
    position: static;
    transform: none;
    display: block;
    padding: var(--space-2) 0 0;
    background: none;
    white-space: normal;
  }

  .footer__main { grid-template-columns: 1fr; gap: var(--space-6); }
  .footer__bar { flex-direction: column; align-items: flex-start; }

  .hero__meta { gap: var(--space-5); }
  .hero__actions .btn { width: 100%; }

  .cookie-consent__inner {
    flex-direction: column;
    align-items: flex-start;
    padding-right: var(--gutter);
    padding-bottom: 86px; /* clear the floating stack */
  }

  .float-stack { bottom: var(--space-4); right: var(--space-4); }
  .float-btn { width: 48px; height: 48px; }
  .float-btn svg { width: 23px; height: 23px; }

  .page-head__ghost { display: none; }
}

/* utilities.css */
/* Utilities */

.text-center { text-align: center; }
.text-right  { text-align: right; }

.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-5  { margin-top: var(--space-5); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }

.mb-4  { margin-bottom: var(--space-4); }
.mb-5  { margin-bottom: var(--space-5); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }

.mx-auto { margin-inline: auto; }
.max-prose { max-width: 70ch; }

.accent { color: var(--accent); }
.dim-text { color: var(--text-dim); }