/* ==========================================================================
   SHANTHA HI TECH — WEBSITE
   website.css

   Palette and structure informed by the reference AI-website-builder page:
   off-white grounds with subtle tonal shifts rather than hard black/white,
   charcoal type, frosted-glass overlay panels, near-rectangular solid
   buttons, alternating image/text blocks. Type stack matches the rest of
   the site ('Clarkson' → Helvetica).

   Eight anchored frames, one viewport screen each, each with its own
   layout so no two read the same:

     1 #websites            centred statement + full-bleed band, glass panel
     2 #website-templates   three-up template rack
     3 #ai-website-builder  atmospheric dark frame, centred glass card
     4 #design-intelligence split — copy left, stacked UI cards right
     5 #ecommerce           product grid left, copy right
     6 #portfolios          full-bleed four-column image wall
     7 #blogs               editorial index — big headline + article rows
     8 #analytics           stat row + chart panel

   Contents
     01. Tokens
     02. Base
     03. Surfaces & frame scaffolding
     04. Type & utilities
     05. Buttons, links, glass
     06. Frame 1  Websites
     07. Frame 2  Website Templates
     08. Frame 3  AI Website Builder
     09. Frame 4  Design Intelligence
     10. Frame 5  Ecommerce
     11. Frame 6  Portfolios
     12. Frame 7  Blogs
     13. Frame 8  Analytics
     14. Footer
     15. Responsive
     16. Motion
   ========================================================================== */

/* ==========================================================================
   01. TOKENS
   ========================================================================== */

:root {
  /* Grounds — tonal shifts, not hard contrast */
  --paper: #ffffff;
  --paper-2: #f8f7f5;
  --paper-3: #f1efeb;
  --mist: #e9e7e2;

  /* Ink */
  --charcoal: #1a1a1a;
  --ink: #2e2e2e;
  --muted: #6f6f6f;
  --line: #e3e1dc;

  /* Atmospheric dark frame */
  --deep: #131313;
  --deep-2: #1f1f1f;
  --on-deep: #ffffff;
  --on-deep-muted: rgba(255, 255, 255, 0.62);
  --line-deep: rgba(255, 255, 255, 0.14);

  /* Frosted glass */
  --glass: rgba(255, 255, 255, 0.62);
  --glass-line: rgba(255, 255, 255, 0.7);
  --glass-dark: rgba(20, 20, 20, 0.42);

  --font: "Clarkson", "Helvetica", Helvetica, Arial, sans-serif;

  --t-xs: 12px;
  --t-sm: 14px;
  --t-base: 16px;
  --t-lg: clamp(17px, 0.3vw + 16px, 19px);
  --t-xl: clamp(20px, 0.9vw + 17px, 26px);
  --t-2xl: clamp(26px, 2.2vw + 18px, 42px);
  --t-3xl: clamp(30px, 3.6vw + 16px, 60px);
  --t-hero: clamp(38px, 5.6vw + 16px, 76px);
  --t-stat: clamp(34px, 3.4vw + 18px, 60px);

  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;
  --s7: 96px;

  --gutter: 24px;
  --container: 1280px;

  --r-btn: 4px;
  --r-card: 10px;
  --r-media: 14px;

  --ease: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fast: 200ms;
  --mid: 380ms;
}

@media (min-width: 768px) { :root { --gutter: 40px; } }
@media (min-width: 1024px) { :root { --gutter: 56px; } }

/* ==========================================================================
   02. BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.5;
  letter-spacing: -0.001em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

h1, h2, h3, h4 {
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: var(--charcoal);
  text-wrap: balance;
}

p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: -80px;
  left: var(--s2);
  z-index: 300;
  padding: var(--s2) var(--s3);
  background: var(--charcoal);
  color: var(--paper);
  border-radius: var(--r-btn);
  font-size: var(--t-sm);
}

.skip-link:focus { top: var(--s2); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   03. SURFACES & FRAME SCAFFOLDING
   ========================================================================== */

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

/* Every frame is one screen. Frame 1 subtracts the masthead. */
.frame {
  /* svh after vh: unsupporting browsers discard the second line and keep
     the first; supporting ones get the mobile-toolbar-visible height rather
     than the taller, toolbar-hidden 100vh. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--s6);
  position: relative;
  overflow: hidden;
}

.frame--first {
  /* body carries .header-overlay (css/header.css) — the masthead is lifted
     out of flow and floats over this frame instead of sitting above it, so
     this frame now owns the full viewport and pads its own top clear of the
     bar, matching the same pattern already used on marketing.html/.css. */
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--header-h, 193px) + var(--s2));
  justify-content: space-between;
  padding-bottom: 0;
}

/* Tonal grounds — the subtle shift between screens */
.tone-1 { background-color: var(--paper); }
.tone-2 { background-color: var(--paper-2); }
.tone-3 { background-color: var(--paper-3); }
.tone-mist { background-color: var(--mist); }

.tone-deep {
  background-color: var(--deep);
  background-image:
    radial-gradient(120% 90% at 18% 8%, rgba(255,255,255,0.10) 0%, transparent 55%),
    radial-gradient(100% 80% at 88% 92%, rgba(255,255,255,0.07) 0%, transparent 60%);
  color: var(--on-deep);
}

/* --------------------------------------------------------------------------
   Cinematic video ground — a full-bleed film behind a deep frame.
   Layers, bottom to top: video → scrim (legibility) → grain → content.
   -------------------------------------------------------------------------- */

.frame--video,
.frame--media { background-color: #000; }

/* The gradient wash on .tone-deep would sit over the film — drop it here and
   let the scrim do the shaping instead. */
.frame--video.tone-deep,
.frame--media.tone-deep { background-image: none; }

.frame__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.frame__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}


/* Legibility. Dark at the centre where the card sits, darker still at the
   edges — a vignette, not a flat overlay, so the film still reads. */
.frame__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 100% at 50% 45%, rgba(10,10,12,0.42) 0%, rgba(10,10,12,0.74) 55%, rgba(6,6,8,0.92) 100%),
    linear-gradient(to bottom, rgba(6,6,8,0.86) 0%, rgba(6,6,8,0.30) 26%, rgba(6,6,8,0.34) 70%, rgba(6,6,8,0.88) 100%);
}

/* Fine grain — takes the digital sheen off the gradients. */
.frame__scrim--blog {
  background:
    linear-gradient(to bottom, rgba(8,8,9,0.30) 0%, rgba(8,8,9,0.58) 34%, rgba(8,8,9,0.62) 66%, rgba(8,8,9,0.34) 100%);
}

.frame__grain {
  position: absolute;
  inset: -50%;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Content rides above the film. */
.frame--video > .container,
.frame--media > .container { position: relative; z-index: 2; }

/* On a moving ground the card needs more body and a crisper edge. */
.frame--video .glass,
.frame--media .glass {
  background: rgba(18, 18, 20, 0.46);
  border-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.frame--video .f-title,
.frame--video .sub,
.frame--media .f-title,
.frame--media .f-title--hero,
.frame--media .sub {
  text-shadow: 0 1px 30px rgba(0, 0, 0, 0.55);
}

.tone-deep h1, .tone-deep h2, .tone-deep h3 { color: var(--on-deep); }
.tone-deep .eyebrow { color: var(--on-deep-muted); }
.tone-deep .sub { color: var(--on-deep-muted); }

/* ==========================================================================
   04. TYPE & UTILITIES
   ========================================================================== */

.eyebrow {
  display: block;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s2);
}

.f-title {
  font-size: var(--t-3xl);
  letter-spacing: -0.045em;
  max-width: 17ch;
}

.f-title--hero {
  font-size: var(--t-hero);
  letter-spacing: -0.05em;
  max-width: 15ch;
}

.sub {
  margin-top: var(--s3);
  font-size: var(--t-lg);
  color: var(--muted);
  max-width: 46ch;
}

.mini {
  font-size: var(--t-sm);
  color: var(--muted);
}

/* ==========================================================================
   05. BUTTONS, LINKS, GLASS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  padding: 18px 26px;
  border-radius: var(--r-btn);
  font-weight: 500;
  font-size: 17px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: background-color var(--fast) var(--ease),
    color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.btn--solid { background-color: var(--charcoal); color: var(--paper); }
.btn--solid:hover { background-color: #000; }

.btn--outline { border-color: var(--line); color: var(--charcoal); }
.btn--outline:hover { border-color: var(--charcoal); }

.tone-deep .btn--solid { background-color: var(--paper); color: var(--charcoal); }
.tone-deep .btn--solid:hover { background-color: #e9e9e9; }
.tone-deep .btn--outline { border-color: var(--line-deep); color: var(--on-deep); }
.tone-deep .btn--outline:hover { border-color: var(--on-deep); }

.arw { transition: transform var(--mid) var(--ease-out); }
.btn:hover .arw { transform: translateX(4px); }

/* Frosted panel */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-card);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.08);
}

.tone-deep .glass {
  background: var(--glass-dark);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.4);
}

/* Placeholder blocks — swap for <img> when artwork arrives */
.ph {
  display: grid;
  place-items: center;
  padding: var(--s3);
  border-radius: var(--r-media);
  background-color: var(--mist);
  background-image: repeating-linear-gradient(
    45deg, rgba(0,0,0,0.028) 0 10px, transparent 10px 20px);
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
}

.tone-deep .ph {
  background-color: #262626;
  background-image: repeating-linear-gradient(
    45deg, rgba(255,255,255,0.035) 0 10px, transparent 10px 20px);
  color: rgba(255,255,255,0.5);
}

.ph--4x3  { aspect-ratio: 4 / 3; }
.ph--1x1  { aspect-ratio: 1 / 1; }
.ph--3x4  { aspect-ratio: 3 / 4; }

/* ==========================================================================
   06. FRAME 1 — WEBSITES
   Centred statement, then a full-bleed band with a glass panel riding on it
   ========================================================================== */

.f1__head { text-align: center; padding-top: var(--s6); }
.f1__head .f-title--hero { margin-inline: auto; }
.f1__head .sub { margin-inline: auto; }

.f1__actions {
  margin-top: var(--s5);
  display: flex;
  gap: var(--s2);
  justify-content: center;
  flex-wrap: wrap;
}

.f1__band {
  position: relative;
  margin-top: var(--s6);
  height: 34vh;
  min-height: 220px;
}

.f1__band { overflow: hidden; }
.f1__band .ph { height: 100%; border-radius: 0; }

/* One photo now covers the whole section (frame__media/.frame__image,
   absolute inset:0) — .f1__band no longer carries its own image or veil,
   it's just the positioning wrapper for .f1__panel. Same restrained grade
   the old band photo used, so the tone matches the rest of the site. */
#websites .frame__image {
  object-position: center 30%;
  filter: saturate(0.82) contrast(1.03) brightness(0.96);
}

.f1__panel {
  position: absolute;
  left: 50%;
  bottom: calc(var(--s5) + 6px);
  transform: translateX(-50%);
  width: min(720px, calc(100% - 2 * var(--gutter)));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  padding: var(--s4);
}

.f1__stat b {
  display: block;
  font-size: var(--t-xl);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #ffffff;
}

.f1__stat .mini {
  color: rgba(255, 255, 255, 0.75);
}

/* ==========================================================================
   07. FRAME 2 — WEBSITE TEMPLATES
   Three-up rack, centre card lifted
   ========================================================================== */

.f2__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s6);
}

.f2__rack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  align-items: end;
}

.f2__card {
  border-radius: var(--r-media);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
  transition: transform var(--mid) var(--ease-out),
    box-shadow var(--mid) var(--ease-out);
}

.f2__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(0,0,0,0.10);
}

/* Middle card sits taller — breaks the grid's evenness */
.f2__card--tall { margin-bottom: var(--s5); }

.f2__card .ph { border-radius: 0; }

/* Template screenshots. The card is 3:4 and the shots are taller pages, so
   anchor to the top — a preview should show the hero, not the footer. */
.f2__shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  background-color: var(--mist);
}

.f2__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s3);
}

.f2__name { font-weight: 500; color: var(--charcoal); }

/* ==========================================================================
   08. FRAME 3 — AI WEBSITE BUILDER
   Atmospheric dark screen, centred glass card
   ========================================================================== */

.f3__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.f3__inner .f-title { margin-inline: auto; }
.f3__inner .sub { margin-inline: auto; }

.f3__card {
  margin-top: var(--s6);
  width: min(860px, 100%);
  padding: var(--s5);
  display: grid;
  gap: var(--s4);
  text-align: left;
}

.f3__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}

.f3__step-n {
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  color: var(--on-deep-muted);
  display: block;
  margin-bottom: var(--s1);
}

.f3__step h3 { font-size: var(--t-base); font-weight: 500; letter-spacing: -0.01em; }
.f3__step p { font-size: var(--t-sm); color: var(--on-deep-muted); margin-top: 4px; }

.f3__bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.16);
  overflow: hidden;
}

.f3__bar span {
  display: block;
  height: 100%;
  width: 72%;
  background: var(--paper);
  border-radius: 3px;
}

/* ==========================================================================
   09. FRAME 4 — DESIGN INTELLIGENCE
   Copy left, offset stack of UI cards right
   ========================================================================== */

.f4__grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: var(--s7);
  align-items: center;
}

.f4__stack { position: relative; padding-bottom: var(--s6); }

.f4__stack .ph,
.f4__stack .f4__shot { box-shadow: 0 18px 40px rgba(0,0,0,0.10); }

/* Sample artwork in the stack — same rounding and fit as the placeholders. */
.f4__shot {
  width: 100%;
  object-fit: cover;
  /* Anchor low — the title and diagram live in the bottom half. */
  object-position: center bottom;
  height: auto;
  border-radius: var(--r-media);
  display: block;
}

.f4__stack-b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 62%;
}

.f4__shot--top { object-position: center top; }

.f4__list { margin-top: var(--s4); display: grid; gap: var(--s2); }

.f4__item {
  display: flex;
  gap: var(--s2);
  align-items: baseline;
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--muted);
}

.f4__item b { color: var(--charcoal); font-weight: 500; min-width: 7.5em; flex-shrink: 0; }

/* ==========================================================================
   10. FRAME 5 — ECOMMERCE
   Product grid left, copy right
   ========================================================================== */

.f5__grid {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: var(--s7);
  align-items: center;
}

.f5__products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
  /* Grid's default align-items: stretch forces every .f5__product to the
     tallest row member's height, which — combined with the img's own HTML
     width/height attributes — resolves aspect-ratio against the wrong box
     and stretches the shorter product photos. Same failure mode already
     documented and fixed for .edu-wall in css/solutions.css; same fix. */
  align-items: start;
}

.f5__product {
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
}

.f5__product .ph { border-radius: 0; }

/* Product photography in the grid tiles. */
.f5__shot {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.f5__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s2) var(--s3) var(--s3);
  font-size: var(--t-sm);
}

.f5__price { font-weight: 500; color: var(--charcoal); }

/* ==========================================================================
   11. FRAME 6 — PORTFOLIOS
   Full-bleed four-column wall, staggered
   ========================================================================== */

.f6 { justify-content: flex-start; padding-block: 0; }

.f6__wall {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s2);
  padding: var(--s2);
}

.f6__col { display: grid; gap: var(--s2); align-content: center; }
.f6__col--drop { transform: translateY(6%); }
.f6__col--rise { transform: translateY(-6%); }

.f6__wall .ph,
.f6__wall .f6__shot { border-radius: var(--r-media); }

/* Portfolio artwork — fills its cell, aspect held by the ph--* modifier. */
.f6__shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.f6__overlay {
  position: relative;
  z-index: 2;
  margin: auto;
  width: min(620px, calc(100% - 2 * var(--gutter)));
  padding: var(--s5);
  text-align: center;
}

/* ==========================================================================
   12. FRAME 7 — BLOGS
   Editorial index
   ========================================================================== */

.f7__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--s7);
  align-items: center;
}

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

/* Frame 7 sits on a dark ground — re-tone the hairlines, dates and arrows so
   the editorial index reads the same way it does on paper. */
.tone-deep .f7__list { border-top-color: var(--line-deep); }
.tone-deep .f7__post { border-bottom-color: var(--line-deep); }
.tone-deep .f7__date,
.tone-deep .f7__post .arw { color: var(--on-deep-muted); }
.tone-deep .f7__post:hover .arw { color: var(--on-deep); }

.f7__post {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s3);
  align-items: baseline;
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
  transition: padding-left var(--mid) var(--ease-out);
}

.f7__post:hover { padding-left: var(--s2); }

.f7__date {
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 6.5em;
}

.f7__post h3 { font-size: var(--t-lg); font-weight: 400; letter-spacing: -0.02em; }
.f7__post .arw { color: var(--muted); }

/* ==========================================================================
   13. FRAME 8 — ANALYTICS
   Stat row over a chart panel
   ========================================================================== */

.f8__head { text-align: center; margin-bottom: var(--s6); }
.f8__head .f-title { margin-inline: auto; }
.f8__head .sub { margin-inline: auto; }

.f8__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s3);
  margin-bottom: var(--s5);
}

.f8__stat { padding-top: var(--s2); border-top: 1px solid var(--line); }

.f8__val {
  display: block;
  font-size: var(--t-stat);
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--charcoal);
  font-variant-numeric: tabular-nums;
}

.f8__panel { padding: var(--s4); }

.f8__chart { height: clamp(150px, 22vh, 240px); }

/* The generated chart art. Sits inside the glass panel, so it keeps the same
   media rounding and simply fills the cell. */
.f8__chart-img {
  width: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: var(--r-media);
  display: block;
}

/* ==========================================================================
   14. FOOTER
   ========================================================================== */

.foot {
  background-color: var(--charcoal);
  color: var(--paper);
  padding-block: var(--s4) var(--s3);
}

.foot__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--s3);
  padding-bottom: 36px;
}

.foot__logo { height: 46px; width: auto; }

.foot__tag { font-size: var(--t-sm); color: rgba(255,255,255,0.6); margin-top: var(--s2); }

/* Footer column labels. These are <p>, not headings — they label a list of
   links, they don't open a section, and marking them up as <h2> diluted the
   page's heading outline for crawlers. font-weight/line-height are stated
   explicitly here (rather than inherited from the h1-h4 rule as before) so
   the styling is self-contained and the element type can't change the look. */
.foot__t {
  font-size: var(--t-xs);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 36px;
}

.foot__list { display: grid; gap: 0; }
.foot__list a { font-size: var(--t-sm); opacity: 0.78; transition: opacity var(--fast) var(--ease); display: inline-flex; align-items: center; min-height: 32px; }
.foot__list a:hover { opacity: 1; }

.foot__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  align-items: center;
  padding-top: var(--s1);
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: var(--t-xs);
  color: rgba(255,255,255,0.6);
}

.foot__base p { margin-right: auto; }

.foot__base a {
  /* WCAG 2.2 SC 2.5.8 wants 24px; min-height (not padding) so font metrics
     can't leave it a pixel short — matches .foot__list a's treatment. */
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */

@media (max-width: 1023px) {
  .f4__grid, .f5__grid, .f7__grid { grid-template-columns: 1fr; gap: var(--s5); }
  .f5__grid .f5__products { order: 2; }
  .f3__steps { grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
  .f8__stats { grid-template-columns: repeat(2, 1fr); row-gap: var(--s4); }
  .foot__grid { grid-template-columns: repeat(3, 1fr); }
  .foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  /* Frames stop being one hard screen — content decides height */
  .frame { min-height: 0; padding-block: var(--s6); }
  .frame--first { min-height: 0; }

  .f1__band { height: 200px; margin-top: var(--s5); }
  .f1__panel {
    position: static;
    transform: none;
    width: 100%;
    grid-template-columns: 1fr;
    gap: var(--s2);
    margin-top: var(--s3);
    padding: var(--s3);
  }

  .f2__head { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .f2__rack { grid-template-columns: 1fr; }
  .f2__card--tall { margin-bottom: 0; }

  .f3__card { padding: var(--s3); }
  .f3__steps { grid-template-columns: 1fr; gap: var(--s3); }

  .f5__products { grid-template-columns: repeat(2, 1fr); }

  /* The wall becomes a normal block rather than an absolute backdrop. Once
     it's static it's just the first flex child in DOM order, so without an
     explicit order the title ("Let the work do the talking") renders AFTER
     all 8 photos instead of introducing them — a wall of unlabelled images
     scrolls past first, then the heading shows up right before the next
     section. order swaps the visual order without touching the DOM. */
  .f6 { padding-block: var(--s6); }
  .f6__wall { position: static; grid-template-columns: repeat(2, 1fr); padding: 0; order: 2; }
  .f6__col--drop, .f6__col--rise { transform: none; }
  .f6__overlay { order: 1; width: 100%; padding: 0 0 var(--s4); text-align: left; background: none; border: none; box-shadow: none; backdrop-filter: none; }

  .f7__post { grid-template-columns: 1fr auto; row-gap: 4px; }
  .f7__date { grid-column: 1 / -1; }

  .f8__stats { grid-template-columns: 1fr; }
  .f8__panel { padding: var(--s3); }

  .foot__grid { grid-template-columns: repeat(2, 1fr); }
  .foot__base { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   16. MOTION
   ========================================================================== */

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

/* ==========================================================================
   SPACING / ALIGNMENT MODIFIERS
   Replaces style="" attributes that previously carried these one-off rules,
   so the CSP can drop 'unsafe-inline' from style-src.
   ========================================================================== */

.btn--start   { justify-self: start; }
.is-centered  { margin-inline: auto; }