/* ==========================================================================
   SHANTHA HI TECH — SOLUTIONS
   css/solutions.css

   A hub page: ten industry frames living on one page, one visible at a time,
   switched from a sticky rail and deep-linkable by hash (solutions.html#beauty).

   Register: a dark shell that continues the mega-menu panel it's opened from
   (#111 surfaces on near-black), rather than a fourth paper palette. Each
   frame carries a single accent tint of its own via --accent, set per-frame,
   so ten industries get ten identities without ten palettes.

   Type stack matches the rest of the site ('Clarkson' → Helvetica).

   Contents
     01. Tokens          02. Base           03. Layout shell
     04. Rail            05. Frame chrome   06. Placeholders
     07. Frame: Creative Services — parallax portfolio wall
     08. Frame: Education & Training — sticky curriculum stack
     09. Frame: Beauty — before/after reveal
     10. Footer          11. Responsive     12. Motion preferences
   ========================================================================== */


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

:root {
  --ink: #050505;          /* page ground */
  --surface: #111111;      /* panel, matches .solutions-menu */
  --surface-2: #1a1a1a;    /* raised card */
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.22);

  --fg: #ffffff;
  --muted: #898989;
  --muted-2: rgba(255, 255, 255, 0.45);

  /* Default accent; each .frame overrides it — see section 05. */
  --accent: #88bcd8;

  --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-hero: clamp(34px, 4.4vw + 16px, 62px);

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

  --gutter: 24px;
  --container: 1280px;
  --rail-w: 240px;

  --r-btn: 4px;
  --r-card: 8px;
  --r-media: 12px;

  --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;
  /* Anchor landings need clearance: below 1023px the industry rail is a
     sticky chip scroller pinned to the top, so a bare jump would drop the
     section heading underneath it. */
  scroll-padding-top: var(--s6);
}

body {
  background-color: var(--ink);
  color: var(--fg);
  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 {
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--fg);
  text-wrap: balance;
}

p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--accent);
  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(--fg);
  color: var(--ink);
  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;
}

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

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



/* ==========================================================================
   03. LAYOUT SHELL
   Page intro, then a two-column body: sticky rail + frame stage.
   ========================================================================== */

.sol-intro {
  padding: var(--s7) 0 var(--s5);
  border-bottom: 1px solid var(--line);
}

.sol-intro__title {
  font-size: var(--t-hero);
  max-width: 18ch;
}

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

.sol-body {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  gap: var(--s6);
  align-items: start;
  padding-block: var(--s6) var(--s7);
}

/* Grid items default to min-width: auto, which refuses to shrink below the
   content's min-content width. The rail's ten white-space: nowrap buttons
   add up to ~1450px, so without this the column blows the grid — and the
   page — far past the viewport on narrow screens instead of letting the
   rail scroll inside its own overflow-x container. */
.sol-body > * {
  min-width: 0;
}


/* ==========================================================================
   04. RAIL
   Desktop: a sticky vertical index. Mobile: a horizontal chip scroller,
   the same responsive move .pills makes on the homepage.
   ========================================================================== */

.sol-rail {
  position: sticky;
  top: var(--s4);
}

.sol-rail__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sol-rail__link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border-radius: var(--r-btn);
  color: var(--muted);
  font-size: var(--t-base);
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}

.sol-rail__link:hover { color: var(--fg); background-color: rgba(255, 255, 255, 0.04); }

/* Set by the scroll-spy in js/solutions.js as each section comes into view.
   With scripting off the rail is still a working list of jump links; it
   just has no active marker, which is a cosmetic loss, not a functional one. */
.sol-rail__link[aria-current="true"] {
  color: var(--ink);
  background-color: var(--fg);
}


/* ==========================================================================
   05. FRAME CHROME
   One .frame per industry, all ten stacked in normal flow. Each sets its
   own --accent (see the id-keyed map further down), which its links, pill
   hovers and focus rings inherit.

   These used to be tab panels with `hidden` on nine of them; the rule that
   did that has been removed deliberately, because content behind `hidden`
   is discounted by search engines. Do not reintroduce it.
   ========================================================================== */

/* Separation between stacked industries — without this the ten frames abut
   with no breathing room, since .frame itself carries no box of its own.
   Mirrors .legal-doc__section + .legal-doc__section in css/legal.css. */
.frame + .frame {
  margin-top: var(--s7);
  padding-top: var(--s7);
  border-top: 1px solid var(--line);
}

.frame__head {
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s6);
}

.frame__title {
  font-size: var(--t-2xl);
  max-width: 20ch;
}

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

.frame__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin-top: var(--s4);
}

/* Not a touch-target concern: these are <span> labels, not links (they used
   to be self-referential tab-switch links back to their own section, which
   was removed along with the rest of the tab machinery — see solutions.html). */
.frame__pill {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background-color: var(--surface);
  color: var(--fg);
  font-size: var(--t-sm);
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}

.frame__pill:hover {
  border-color: var(--accent);
  background-color: var(--surface-2);
}

/* --------------------------------------------------------------------------
   Photographic head variant. Turns .frame__head into a full-bleed hero band
   with the copy sitting directly on the picture. Add .frame__head--media
   alongside .frame__head to opt one industry in; every other frame keeps the
   plain rule-under-the-heading look untouched.

   No scrim. The photograph is lit so its left third falls to near-black while
   the subject holds the right, which is exactly the shape this layout needs —
   so the copy column is capped narrow enough to stay inside that shadow
   rather than washing the whole image down to make room for it.
   -------------------------------------------------------------------------- */
.frame__head--media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-media);
  border-bottom: 0;              /* the image edge already separates it */
  padding: var(--s6) var(--s5);
  min-height: clamp(360px, 40vw, 540px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.frame__head-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

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

/* Lift the copy above the picture. */
.frame__head--media > .eyebrow,
.frame__head--media > .frame__title,
.frame__head--media > .frame__sub,
.frame__head--media > .frame__pills {
  position: relative;
  z-index: 1;
}

/* Held tight so no line runs out of the shadow and onto the lit subject. */
.frame__head--media .frame__title { max-width: 14ch; }
.frame__head--media .frame__sub { max-width: 32ch; color: rgba(255,255,255,0.86); }

/* Six pills laid in one row spilled clear across the camera and onto the lit
   velvet, where white-on-chartreuse measured 4.2:1. Capping the row to the
   copy column wraps them back inside the shadow instead. */
.frame__head--media .frame__pills { max-width: 34ch; }

/* The pills sit on the picture rather than the page ground, so the flat
   --surface fill would read as grey chips punched out of the photograph.
   Smoked glass rather than white: a light tint cannot rescue white text if a
   pill ever lands on a bright part of the frame, whereas darkening the ground
   under it holds regardless of what the crop puts behind it. */
.frame__head--media .frame__pill {
  background-color: rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.frame__head--media .frame__pill:hover {
  background-color: rgba(0, 0, 0, 0.68);
  border-color: rgba(255, 255, 255, 0.55);
}

/* Mid widths: the band is still landscape enough to hold the composition,
   but the copy column takes a larger share of it, so slide the crop left to
   keep more shadow under the text. */
@media (max-width: 860px) {
  .frame__head--media { padding: var(--s5) var(--s4); }
  .frame__head-image { object-position: 22% center; }
}

/* Narrow screens: stop overlaying entirely.
   The copy stack (heading, sub and six wrapping pills) is tall while the
   viewport is thin, so the band turns portrait — and `cover` then crops a
   landscape still life down to a vertical slice, putting the camera's lit
   silver top plate directly under the eyebrow (measured 29.5% of it below
   4.5:1). No object-position rescues that; the shadow simply isn't wide
   enough to hold a full-width copy column any more.
   So the picture becomes a banner above the copy, and the text returns to
   the page ground where contrast is guaranteed by the palette. */
@media (max-width: 640px) {
  .frame__head--media {
    display: block;
    padding: 0;
    min-height: 0;
    overflow: visible;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: var(--s5);
  }

  .frame__head-media {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-media);
    overflow: hidden;
    margin-bottom: var(--s4);
  }

  /* Landscape again, so the whole still life reads. */
  .frame__head-image { object-position: center center; }

  /* Back on --ink, so the capped widths and smoked glass are both moot. */
  .frame__head--media .frame__title,
  .frame__head--media .frame__sub,
  .frame__head--media .frame__pills { max-width: none; }
  .frame__head--media .frame__sub { color: var(--muted); }

  .frame__head--media .frame__pill {
    background-color: var(--surface);
    border-color: var(--line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.frame__section-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

/* Per-industry accents */
#creative-services     { --accent: #88bcd8; }
#professional-services { --accent: #9fb4c7; }
#education-training    { --accent: #f3ffc1; }
#beauty                { --accent: #e8b4c8; }
#sports-fitness        { --accent: #d8e84f; }
#health-wellness       { --accent: #a8d8c0; }
#home-services         { --accent: #e0b088; }
#events-experiences    { --accent: #c9a8e8; }
#charities-nonprofits  { --accent: #88d8b0; }
#personal              { --accent: #d8d8d8; }


/* ==========================================================================
   06. PLACEHOLDERS
   Swap each .ph for an <img> when artwork arrives — see
   prompts_sw/solutions-prompts.md.
   ========================================================================== */

.ph {
  display: grid;
  place-items: center;
  padding: var(--s3);
  border-radius: var(--r-media);
  background-color: var(--surface);
  background-image: repeating-linear-gradient(
    45deg, rgba(255,255,255,0.035) 0 10px, transparent 10px 20px);
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
}

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

/* Real photo standing in for the placeholder box — drop the diagonal
   stripe fill and the padding that made room for the "Frame in progress"
   label, so the image runs edge to edge inside the same rounded box. */
.ph--media {
  padding: 0;
  background-color: transparent;
  background-image: none;
}
.ph--media .wall__shot { width: 100%; height: 100%; object-fit: cover; display: block; }



/* ==========================================================================
   07. FRAME — CREATIVE SERVICES
   Parallax portfolio wall: four columns drifting at different speeds as the
   page scrolls. Offsets are written to --shift by js/solutions.js; with no
   JS (or reduced motion) the columns simply sit still and the grid reads as
   a normal portfolio wall.
   ========================================================================== */

.wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s3);
  align-items: start;
}

.wall__col {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  transform: translate3d(0, var(--shift, 0px), 0);
  will-change: transform;
}

/* Stagger the resting position so the columns don't read as a flat row */
.wall__col:nth-child(2) { margin-top: var(--s6); }
.wall__col:nth-child(4) { margin-top: var(--s4); }

.wall__item {
  position: relative;
  border-radius: var(--r-media);
  overflow: hidden;
}

/* Real artwork in a wall tile. .wall__item already clips to --r-media, so the
   image only has to fill it; the ratio still comes from the ph--Nx N class on
   the image itself, matching how website.html mounts its portfolio shots. */
.wall__shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wall__caption {
  margin-top: var(--s1);
  color: var(--muted);
  font-size: var(--t-sm);
}


/* ==========================================================================
   08. FRAME — EDUCATION & TRAINING
   Site showcase: one browser-chrome tile per industry pill (Tutors, Online
   Courses, Schools, Language Teachers, Music Teachers, Driving Instructors),
   each with its own fake URL and a caption naming the site type. Deliberately
   not the flat .ph/.ph--media placeholder used on Professional Services —
   this frame shows concrete example sites instead of an abstract "coming
   soon" pattern; the .ph fill inside each tile is only the per-screenshot
   loading state, same as Creative Services' wall before its photos landed.
   ========================================================================== */

/* Section labels sit in their own grid cell and need no outer margin. */
.eyebrow--flush { margin: 0; }

/* Browser chrome, scoped to this page's dark tokens. Same shape as the
   .device component on marketing.css (window bar + traffic-light dots +
   url pill over a screenshot), which is styled for that page's light-paper
   ground — this is an independent copy for solutions.css's dark surface,
   matching the .foot__list convention of one copy per page stylesheet. */
.device {
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
}

.device__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

.device__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--line-strong);
}

.device__url {
  margin-left: var(--s2);
  flex: 1;
  height: 20px;
  border-radius: 6px;
  background: var(--ink);
  display: flex;
  align-items: center;
  padding-inline: 10px;
  color: var(--muted-2);
  font-size: 11px;
}

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

.edu-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5) var(--s4);
  /* Grid's default align-items: stretch, combined with .wall__shot's
     height: 100%, resolved to a wrong ratio here (measured 1.48 instead of
     the intended 16:9) — a grid item's child percentage-height is not the
     same indeterminate case as .wall__shot's original home in Creative
     Services' flex column. align-items: start keeps each item at its own
     natural (aspect-ratio-driven) height instead of grid stretching it. */
  align-items: start;
}

.edu-wall__item .wall__caption { margin-top: var(--s2); }

/* Full self-contained mockups (own chrome baked into the image) need only
   aspect-ratio to size correctly — not .wall__shot's height: 100%, which is
   what misbehaved under grid stretch above. Matches --r-media so a finished
   tile keeps the same rounded corner every pending .device tile already has. */
.edu-wall__item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: var(--r-media);
}


/* ==========================================================================
   09. FRAME — BEAUTY
   Before/after reveal: a draggable split between two states. The clip and
   the handle both read from --pos (0-100), written by js/solutions.js on
   pointer drag and by arrow keys for keyboard users.
   ========================================================================== */

.reveal {
  position: relative;
  border-radius: var(--r-media);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
}

.reveal__layer {
  position: absolute;
  inset: 0;
}

.reveal__layer .ph {
  width: 100%;
  height: 100%;
  border-radius: 0;
  aspect-ratio: auto;
}

/* Real screenshots in place of the .ph placeholders. Both layers must fill
   the 16/10 box identically — the wipe is a hard vertical edge between them,
   so any difference in scale or crop would make dragging read as two
   unrelated images sliding rather than one site becoming another. */
.reveal__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The "after" layer is clipped from the left edge to the handle position */
.reveal__layer--after {
  clip-path: inset(0 0 0 calc(var(--pos, 50) * 1%));
}

.reveal__tag {
  position: absolute;
  bottom: var(--s3);
  padding: 6px 14px;
  border-radius: 100px;
  background-color: rgba(0, 0, 0, 0.6);
  color: var(--fg);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reveal__tag--before { left: var(--s3); }
.reveal__tag--after  { right: var(--s3); }

.reveal__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--pos, 50) * 1%);
  width: 2px;
  margin-left: -1px;
  background-color: var(--fg);
  cursor: ew-resize;
}

.reveal__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--fg);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 13px;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

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


/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.foot {
  border-top: 1px solid var(--line);
  padding-block: var(--s4) var(--s3);
}

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

.foot__logo { height: 48px; width: auto; }
.foot__tag { margin-top: var(--s2); color: var(--muted); font-size: var(--t-sm); }

.foot__t {
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 36px;
}

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

.foot__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
  margin-top: 36px;
  padding-top: var(--s1);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--t-sm);
}

.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;
}
.foot__base a:hover { color: var(--fg); }


/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */

@media (max-width: 1023px) {
  .sol-body {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }

  /* Rail becomes a horizontal chip scroller pinned under the header */
  .sol-rail {
    position: sticky;
    top: 0;
    z-index: 20;
    margin-inline: calc(var(--gutter) * -1);
    padding: var(--s2) var(--gutter);
    background-color: var(--ink);
    border-bottom: 1px solid var(--line);
  }

  .sol-rail__list {
    flex-direction: row;
    gap: var(--s1);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .sol-rail__list::-webkit-scrollbar { display: none; }

  .sol-rail__link {
    /* Override the desktop base rule's width: 100%/display: block — without
       this each chip stretches to fill the scroller's full width instead of
       shrink-wrapping to its label, which defeats the horizontal scroll.
       inline-flex + align-items (not inline-block) so min-height below can
       centre the label rather than just padding out extra bottom space. */
    display: inline-flex;
    align-items: center;
    width: auto;
    /* WCAG 2.2 SC 2.5.5 (Target Size, Enhanced): the smaller mobile font
       plus 8px padding measured ~37px, short of 44px. */
    min-height: 44px;
    border-radius: 100px;
    border: 1px solid var(--line);
    padding: 8px 16px;
    font-size: var(--t-sm);
    flex: none;
  }

  .wall { grid-template-columns: repeat(2, 1fr); }
  .wall__col { transform: none; }
  .wall__col:nth-child(2),
  .wall__col:nth-child(4) { margin-top: 0; }

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

  .foot__grid { grid-template-columns: 1fr 1fr; gap: var(--s4); }
}

@media (max-width: 600px) {
  .wall { grid-template-columns: 1fr; }
  .edu-wall { grid-template-columns: 1fr; }
  .sol-intro { padding-top: var(--s6); }
  .foot__grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   12. MOTION PREFERENCES
   Every frame is designed to remain fully usable with all motion removed.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  /* Parallax off — columns rest in place */
  .wall__col { transform: none !important; }
}