/*
 * SMN Industries — React site theme (28 Sep 2026, owner: "white and golden and black grey").
 * White pages, black and grey type, gold accents; black bands (AFP, call-to-action, fact strip, footer) for contrast.
 * Headings keep the condensed capitals of the approved Canva catalogue cover. (The earlier all-black
 * "catalogue" theme is in git history, commit 9c36170.)
 * Loaded after /assets/css/smn.css and overrides its tokens and components.
 */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/anton-400.woff2) format('woff2'); }

:root {
  --paper: #FFFFFF;        /* page */
  --paper-2: #F4F4F2;      /* light grey panels, image wells */
  --ink: #111111;          /* black text, primary buttons */
  --graphite: #111111;     /* black bands */
  --stone: #5C5C5C;        /* grey secondary text (6.5:1 on white) */
  --line: #E3E3E0;         /* hairlines */
  --gold: #C9A24A;         /* golden rules, marks on black */
  --gold-2: #E2C47A;       /* light gold (on black) */
  --accent: #C9A24A;
  --accent-ink: #8A6A1E;   /* gold as text on white (5.2:1) */
  --brand: #C9A24A; --brand-deep: #8A6A1E; --charcoal: #111111; --charcoal-2: #0C0C0C;
  --display: "Anton", "Oswald", "Arial Narrow", sans-serif;
  --serif: var(--display);
  --radius: 0px;
}

body { background: #fff; color: var(--ink); }
::selection { background: var(--gold); color: #111; }

/* ---------- type ---------- */
.display, .h2, .prose h2, .swatch-tile__name, .drawer nav a, .app--plain span, .tile .cap b, .fact b {
  font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em;
}
.display { font-size: clamp(42px, 6.6vw, 96px); line-height: .95; }
.h2 { font-size: clamp(30px, 4vw, 54px); line-height: .98; }
.display .outline, .h2 .outline { color: transparent; -webkit-text-stroke: 2px var(--gold); }
@supports not (-webkit-text-stroke: 1px black) { .display .outline, .h2 .outline { color: var(--accent-ink); } }
.eyebrow { color: var(--accent-ink); letter-spacing: .22em; font-weight: 500; }
.lede, .muted { color: var(--stone); }
.head > div::after { content: ""; display: block; width: 72px; height: 2px; background: var(--gold); margin-top: 18px; }
.head .h2 { max-width: 20ch; }
.link:hover, .card-link:hover, .tile:hover .cap b { color: var(--accent-ink); }

/* ---------- buttons: black, turning gold ---------- */
.btn { background: #111; border-color: #111; color: #fff; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 13.5px; white-space: nowrap; }
.btn:hover { background: var(--gold); border-color: var(--gold); color: #111; }
.btn--ghost { background: transparent; color: #111; border-color: #111; }
.btn--ghost:hover { background: #111; color: #fff; border-color: #111; }
.btn--light, .btn--brand { background: var(--gold); border-color: var(--gold); color: #111; }
.btn--light:hover, .btn--brand:hover { background: #fff; border-color: #fff; color: #111; }
.btn--line-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--line-light:hover { border-color: var(--gold); color: var(--gold-2); }
@media (max-width: 420px) { .btn { white-space: normal; } }

/* ---------- header, drawer, action bar, footer ---------- */
.site-header { background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); }
.nav a { color: #222; letter-spacing: .06em; text-transform: uppercase; font-size: 12.5px; }
.nav a:hover, .nav a[aria-current="page"] { color: #111; border-bottom-color: var(--gold); }
.drawer nav a { font-size: 30px; }
.drawer nav a:hover { color: var(--accent-ink); }
.actionbar { background: #111; color: #fff; border-top: 2px solid var(--gold); }
.actionbar a { border-left-color: #2A2A2A; }
.actionbar a:nth-child(2) svg { color: var(--gold-2); }
.site-footer { background: #0C0C0C; border-top: 3px solid var(--gold); color: #BDBDBD; }
.foot-grid h2 { color: var(--gold-2); }
.foot-base { border-top-color: #262626; }
.social a:hover { border-color: var(--gold); color: var(--gold-2); }

/* ---------- bands ---------- */
.section--panel { background: var(--paper-2); }
.section--dark { background: #111; color: #F2F2F2; }
.section--dark .eyebrow { color: var(--gold-2); }
.section--dark .lede, .section--dark .muted { color: #B5B5B5; }
.section--dark .h2 .outline { -webkit-text-stroke-color: var(--gold-2); }
.fact-strip { background: #111; color: #B5B5B5; border-top: 2px solid var(--gold); }
.fact-strip b { color: var(--gold-2); font-family: var(--display); font-weight: 400; letter-spacing: .03em; font-size: 16px; }
.sister { border-color: var(--line); }

/* ---------- hero: white panel beside the photo ---------- */
.hero-full { background: #fff; color: #111; min-height: min(86vh, 820px); align-items: center; }
.hero-full__media { left: 48%; }
.hero-full__media img { object-position: 50% 45%; }
.hero-full__shade { background: linear-gradient(90deg, #fff 0%, #fff 48%, rgba(255,255,255,.6) 53%, rgba(255,255,255,0) 64%); }
.hero-full__copy { padding-top: 88px; padding-bottom: 88px; }
.hero-full .eyebrow { color: var(--accent-ink); }
.hero-full .display { max-width: 10ch; color: #111; }
.hero-full .display .outline { display: block; }
.hero-full .lede { color: var(--stone); max-width: 30em; }
.hero-full .btn--light { background: #111; border-color: #111; color: #fff; }
.hero-full .btn--light:hover { background: var(--gold); border-color: var(--gold); color: #111; }
.hero-full .btn--line-light { color: #111; border-color: #111; }
.hero-full .btn--line-light:hover { background: #111; color: #fff; }
@media (max-width: 900px) {
  .hero-full { min-height: auto; display: grid; }
  .hero-full__media { position: relative; left: 0; height: 56vw; min-height: 240px; order: -1; }
  .hero-full__media picture, .hero-full__media img { position: absolute; inset: 0; }
  .hero-full__shade { display: none; }
  .hero-full__copy { padding-top: 28px; padding-bottom: 44px; }
  .hero-full .display { max-width: none; }
}

/* ---------- cards, tiles, swatches, apps ---------- */
.tile .img, .card .img, .app, .pdp-media figure, .split figure, .compare-page .img, .cover { background: #161616; }
.tile .cap { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.tile .cap b { font-size: 24px; }
.tile .cap span { color: var(--accent-ink); letter-spacing: .08em; text-transform: uppercase; font-size: 11.5px; }
.card h3 { font: 500 17px/1.3 var(--sans); letter-spacing: .01em; }
.card-link { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.card-link::before, .card-link[aria-pressed="true"] { color: var(--accent-ink); }
.badge { background: var(--gold); color: #111; font-weight: 600; }
.swatch .chip { box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 0 0 4px #fff, 0 0 0 5px var(--line); }
.swatch:hover .chip { box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 0 0 4px #fff, 0 0 0 5px var(--gold); }
.swatch b { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .03em; font-size: 17px; }
.app span { background: linear-gradient(transparent, rgba(0,0,0,.78)); font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .03em; font-size: 19px; }
.app:hover span { color: var(--gold-2); }
.app--plain { background: linear-gradient(160deg, #2A2A2A, #111); }

/* ---------- lists with round check bullets ---------- */
.split ul li { position: relative; padding-left: 34px; }
.split ul li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%;
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8 6l4 4-4 4' fill='none' stroke='%23111111' stroke-width='2'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.section--dark .split li { border-top-color: #2A2A2A; }

/* ---------- steps ---------- */
.steps { border-top: 2px solid var(--gold); }
.steps li::before { font-family: var(--display); color: var(--accent-ink); font-size: 40px; }

/* ---------- library, forms, misc ---------- */
.opt input, .check-list input[type="checkbox"], .field input[type="checkbox"], .field input[type="radio"] { accent-color: #111; }
.chip-btn[aria-pressed="true"], .chips a.chip-btn[aria-current="true"] { background: #111; color: #fff; border-color: #111; }
.tray { background: #111; color: #fff; border-top: 2px solid var(--gold); }
.tray .btn { background: var(--gold); color: #111; border-color: var(--gold); }
.field input:focus, .field select:focus, .field textarea:focus, .search-form input:focus { outline-color: var(--gold); border-color: var(--gold); }
.crumbs a:hover { color: var(--accent-ink); }
.notice { border-left-color: var(--gold); }
.form { align-content: start; }
.tone[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gold); }
.video-play:hover .video-icon, .video-play:focus-visible .video-icon { background: var(--gold); color: #111; }
.skip { background: #111; color: #fff; }

/* ---------- alignment pass (28 Sep 2026, owner: "things not aligned properly") ---------- */
/* balanced grids: columns chosen per screen size from the item count (lib/grid.ts); a lone last item is centred */
.g { display: grid; gap: 40px 24px; grid-template-columns: repeat(var(--cd), minmax(0, 1fr)); }
.g > * { min-width: 0; }
.g-lone-d > :last-child { grid-column: 1 / -1; justify-self: center; width: calc((100% - (var(--cd) - 1) * 24px) / var(--cd)); }
@media (max-width: 1080px) {
  .g { grid-template-columns: repeat(var(--ct), minmax(0, 1fr)); }
  .g-lone-d > :last-child { grid-column: auto; width: auto; }
  .g-lone-t > :last-child { grid-column: 1 / -1; justify-self: center; width: calc((100% - (var(--ct) - 1) * 24px) / var(--ct)); }
}
@media (max-width: 640px) {
  .g { grid-template-columns: repeat(var(--cp), minmax(0, 1fr)); gap: 28px 14px; }
  .g-lone-t > :last-child { grid-column: auto; width: auto; }
  .g-lone-p > :last-child { grid-column: 1 / -1; justify-self: center; width: calc((100% - (var(--cp) - 1) * 14px) / var(--cp)); }
}
.steps.g { gap: 0; }
.steps.g li { padding-right: 22px; }

/* button groups: equal blocks side by side, stacked full width on phones; labels centred on one line */
.btn { text-align: center; }
.hero-actions, .cta-band .actions, .pdp-actions, .actions-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
.cta-band .actions { justify-content: stretch; }
.hero-actions .btn, .cta-band .actions .btn, .pdp-actions .btn, .actions-row .btn { width: 100%; }
@media (max-width: 520px) {
  .hero-actions, .cta-band .actions, .pdp-actions, .actions-row { grid-auto-flow: row; grid-template-columns: 1fr; }
  .btn { white-space: nowrap; padding: 0 14px; letter-spacing: .06em; }
}
.card-link { white-space: nowrap; }

/* hero photo: fill only the right-hand panel (it was sized to the full width and cut off) */
@media (min-width: 901px) { .hero-full__media { width: auto; right: 0; } .hero-full__media picture { position: absolute; inset: 0; width: 100%; height: 100%; } .hero-full__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } }
/* header icons: same square, level with each other and with the logo */
.header-cta { align-items: center; }
.header-search, .site-header .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0; }
.site-header .menu-btn svg, .header-search svg { width: 24px; height: 24px; }
@media (min-width: 1081px) { .site-header .menu-btn { display: none; } }
/* comfortable tap targets for small buttons on phones */
@media (max-width: 640px) { .btn--sm { min-height: 44px; } }
.header-cta .btn { min-height: 44px; height: 44px; }

/* recheck 28 Sep 2026 (small details) */
/* hero headline: the column was 10ch, "ARCHITECTURE." is ~11.3ch and spilled past it */
.hero-full .display { max-width: 11.6ch; }
/* .actions-inline (equal loose button groups) lives in /assets/css/smn.css: the PHP 404 page uses it too */
/* nothing smaller than 12px */
.badge { font-size: 12px; }
.tile .cap span { font-size: 12px; }
/* card footer on two-column phone grids: "+ Add sample" and "Compare" no longer push the card wider than its column */
@media (max-width: 640px) {
  .card-actions { flex-wrap: wrap; gap: 0 12px; }
  .card-actions .card-link, .card-actions .check { min-height: 40px; display: inline-flex; align-items: center; gap: 5px; }
  .card .meta, .card h3, .card .sub { min-width: 0; overflow-wrap: anywhere; }
}
@media (max-width: 640px) {
  /* text links and colour toggles: bigger hit area without moving the text (inline padding does not change line height) */
  /* only stand-alone links: inside running text or tables the padding would push underlines into the next line */
  a.link:not(:is(p, td, dd, span, figcaption, h1, h2, h3, h4) a), a.muted-link:not(:is(p, td, dd, span, figcaption) a), th > a { padding-block: 9px; }
  .tone { min-height: 40px; }
}
.visual-tag { font-size: 12px; }
/* hero buttons stay in the text column (the equal-width grid had stretched them across the photo) */
@media (min-width: 901px) { .hero-full .hero-actions { max-width: 570px; } }

/* phone home page (owner, 28 Sep 2026: "not aligned and out of the screen") */
@media (max-width: 900px) {
  /* shorter hero photo so both hero buttons show above the Call / WhatsApp / Samples bar on the first screen */
  .hero-full__media { height: 42vw; min-height: 150px; max-height: 320px; }
}
@media (max-width: 760px) {
  /* swipe rows: the first tile snapped to the screen edge; keep it on the page margin like everything else */
  .rail--swipe { scroll-padding-inline: var(--gutter, 16px); }
  /* colour circles: equal columns (a long name no longer widens its circle); short last row centred */
  .swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 10px; }
  .swatches .swatch { flex: 0 0 calc((100% - 30px) / 4); min-width: 0; }
  .swatch b { font-size: 14px; line-height: 1.15; min-height: 2.3em; display: flex; align-items: flex-start; justify-content: center; overflow-wrap: anywhere; }
}

/* "From finish to site, in five steps": equal boxes, content centred (owner, 28 Sep 2026) */
.steps.steps--boxes { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; border-top: 0; }
.steps--boxes li { flex: 0 0 calc((100% - 64px) / 5); margin: 0; padding: 28px 18px 26px; border: 1px solid var(--line); border-top: 3px solid var(--gold); border-right: 1px solid var(--line); background: #fff; text-align: center; display: flex; flex-direction: column; align-items: center; }
.steps--boxes li:last-child { border-right: 1px solid var(--line); }
.steps--boxes li::before { margin: 0 0 14px; }
.steps--boxes b { margin-bottom: 8px; }
@media (max-width: 1080px) { .steps--boxes li { flex-basis: calc((100% - 32px) / 3); } }
@media (max-width: 640px) { .steps--boxes { gap: 12px; } .steps--boxes li { flex-basis: 100%; padding: 22px 18px; } }

@media (max-width: 760px) {
  /* finish tiles on phones: a tidy two-column grid, every tile whole (the swipe row cut tiles off at the screen edge) */
  .rail--swipe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
  .rail--swipe > * { flex: none; min-width: 0; }
  .rail--3:not(.rail--swipe), .rail--4:not(.rail--swipe) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile .cap { flex-direction: column; align-items: flex-start; gap: 2px; }
  .tile .cap b { overflow-wrap: anywhere; }
  /* one-column layouts may not be widened by a picture or a long label */
  .split { grid-template-columns: minmax(0, 1fr); }
  .video-grid--wide { grid-template-columns: minmax(0, 1fr); }
}
/* long button labels may wrap on the narrowest phones instead of pushing the page wider */
@media (max-width: 400px) { .btn { white-space: normal; height: auto; min-height: 48px; padding-block: 10px; line-height: 1.3; text-wrap: balance; } }

/* touch screens of any size (phones and tablets): finger-sized hit areas */
@media (pointer: coarse) {
  .head .link, a.link.arrow { display: inline-flex; align-items: center; min-height: 44px; }
  .card-actions .card-link, .card-actions .check { min-height: 40px; display: inline-flex; align-items: center; gap: 5px; }
  /* only stand-alone links: inside running text or tables the padding would push underlines into the next line */
  a.link:not(:is(p, td, dd, span, figcaption, h1, h2, h3, h4) a), a.muted-link:not(:is(p, td, dd, span, figcaption) a), th > a { padding-block: 9px; }
  .tone { min-height: 40px; }
}

/* video grids: equal columns per screen size, a short last row centred (no lone video at the left) */
.video-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; --vc: 5; }
.video-grid > * { flex: 0 0 calc((100% - (var(--vc) - 1) * 18px) / var(--vc)); min-width: 0; }
@media (max-width: 1200px) { .video-grid { --vc: 4; } }
@media (max-width: 900px) { .video-grid { --vc: 3; } }
@media (max-width: 520px) { .video-grid { --vc: 2; gap: 14px; } .video-grid > * { flex-basis: calc((100% - 14px) / 2); } }
.video-grid--wide { --vc: 2; }
@media (max-width: 760px) { .video-grid--wide { --vc: 1; } .video-grid--wide > * { flex-basis: 100%; } }

/* full responsive recheck (13 screen modes, 28 Sep 2026) */
/* equal action buttons: an older fixed column template no longer overrides the equal columns */
.hero-actions, .cta-band .actions, .pdp-actions, .actions-row { grid-template-columns: none; }
@media (max-width: 520px) { .hero-actions, .cta-band .actions, .pdp-actions, .actions-row { grid-template-columns: 1fr; } }
/* long labels wrap onto two balanced lines instead of spilling out of the button */
.btn { white-space: normal; text-wrap: balance; height: auto; line-height: 1.25; padding-block: 8px; }
.header-cta .btn { white-space: nowrap; }
/* etched designs: colour dots and "Enquire" share one line height */
.etch figcaption .etch-tones, .etch figcaption a { min-height: 40px; display: inline-flex; align-items: center; padding-block: 0; }
/* closing band: text and buttons centred on one line */
.cta-band { align-items: center; }
/* below laptop width: heading on top, buttons full width underneath (side by side they were squeezed to 3 lines) */
@media (max-width: 1024px) { .cta-band { grid-template-columns: 1fr; gap: 20px; } .cta-band .actions { justify-content: stretch; } }