/* ==========================================================================
   AIMS Technologies - design system
   Dual theme. Light is the brand's home register; dark follows the visitor's
   system unless they pick one, and the pick is remembered.
   Gold has three roles and they are NOT interchangeable in either theme:
     --gold        decorative only (fills, borders, rules, icon chips)
     --gold-ink    gold TEXT at body size        (AA verified in both themes)
     --gold-dim    gold TEXT at display size     (AA-large verified)
   Radius rule: cards 16px / panels 20px / inputs 10px / buttons + tags pill.
   ========================================================================== */

:root{
  /* Radius system, five steps, no one-offs:
     pill  = buttons, tags, chips, pills
     card  = cards, layers, notices
     panel = large panels
     input = inputs, icon chips, social buttons
     inline= inline code and tokens */
  --r-card:   16px;
  --r-panel:  20px;
  --r-input:  10px;
  --r-inline: 6px;
  --r-pill:   999px;

  --shell:    1320px;
  --gutter:   clamp(20px, 5vw, 64px);
  --ease:     cubic-bezier(.16,1,.3,1);

  --f-sans:   "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-serif:  "Playfair Display", "Iowan Old Style", Georgia, serif;
  --f-mono:   "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---- light ------------------------------------------------------------- */
:root, [data-theme="light"]{
  color-scheme: light;

  /* silver, lifted from the aiMS wordmark */
  --surface:    #e9edf2;
  --surface-2:  #dfe5ec;
  --surface-3:  #d3dae3;
  --raised:     #f5f7fa;

  --line:       rgba(27,35,45,.15);
  --line-2:     rgba(27,35,45,.26);

  --fg:         #1b232d;
  --fg-2:       #4f5964;
  --fg-3:       #67717c;

  /* copper, lifted from the AIMS mark */
  --gold:       #a8794f;
  --gold-ink:   #7b5230;
  --gold-dim:   #8f6440;
  --gold-hi:    #d6ab84;
  --gold-soft:  rgba(168,121,79,.14);

  /* teal, the shield half of the mark */
  --teal:       #2e5c6e;
  --teal-ink:   #1f4552;
  --teal-hi:    #527786;
  --teal-soft:  rgba(46,92,110,.12);

  --btn-a:      #d2a67e;
  --btn-b:      #a8794f;
  --btn-c:      #8a5f3a;
  --btn-ink:    #2a1a0c;

  --shadow-sm:  0 1px 2px rgba(40,33,20,.05), 0 2px 8px rgba(40,33,20,.04);
  --shadow-md:  0 2px 6px rgba(40,33,20,.06), 0 12px 32px rgba(40,33,20,.07);
  --shadow-lg:  0 4px 12px rgba(40,33,20,.07), 0 24px 60px rgba(40,33,20,.09);

  --nav-bg:     rgba(233,237,242,.74);
  --nav-bg-2:   rgba(233,237,242,.95);
  --scroll-thumb: #aab4c0;

  --grain-blend: multiply;
  --grain-op:    .35;

  --scrim: linear-gradient(to top,rgba(233,237,242,.97) 0%,rgba(233,237,242,.89) 38%,
                           rgba(233,237,242,.44) 74%,rgba(233,237,242,.12) 100%);
  --tex-ops:  url("../img/ops-floor.jpg");
  --tex-rack: url("../img/rack.jpg");

  --lattice-line: 27,35,45;
  --lattice-node: 123,82,48;

  --wash-1: rgba(233,237,242,.94);
  --wash-0: rgba(233,237,242,0);
  --logo-light: block;
  --logo-dark:  none;

  --err-bg:   #fdf1ed;
  --err-line: #e5b6a6;
  --err-ink:  #8f2d16;
}

/* ---- dark -------------------------------------------------------------- */
[data-theme="dark"]{
  color-scheme: dark;

  /* Cool charcoal surfaces keep the copper/teal identity intact in dark mode
     while retaining clear separation between page, bands, and cards. */
  --surface:    #101820;
  --surface-2:  #17222d;
  --surface-3:  #202e3b;
  --raised:     #1b2935;

  --line:       rgba(220,232,241,.13);
  --line-2:     rgba(220,232,241,.25);

  --fg:         #f1f5f8;
  --fg-2:       #bdc9d4;
  --fg-3:       #93a4b4;

  --gold:       #d29a62;
  --gold-ink:   #e6b985;
  --gold-dim:   #dba976;
  --gold-hi:    #f2d0aa;
  --gold-soft:  rgba(210,154,98,.17);

  --teal:       #73b4bd;
  --teal-ink:   #9bd0d4;
  --teal-hi:    #b9e1e2;
  --teal-soft:  rgba(115,180,189,.17);

  --btn-a:      #ecc296;
  --btn-b:      #d29a62;
  --btn-c:      #a96f3e;
  --btn-ink:    #1c1209;

  --shadow-sm:  0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --shadow-md:  0 2px 6px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.38);
  --shadow-lg:  0 4px 12px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.45);

  --nav-bg:     rgba(16,24,32,.76);
  --nav-bg-2:   rgba(16,24,32,.96);
  --scroll-thumb: #485c6e;

  --grain-blend: soft-light;
  --grain-op:    .14;

  --scrim: linear-gradient(to top,rgba(16,24,32,.97) 0%,rgba(16,24,32,.9) 38%,
                           rgba(16,24,32,.5) 74%,rgba(16,24,32,.18) 100%);
  --tex-ops:  url("../img/ops-floor-dark.jpg");
  --tex-rack: url("../img/rack-dark.jpg");

  --lattice-line: 241,245,248;
  --lattice-node: 210,154,98;

  --wash-1: rgba(16,24,32,.94);
  --wash-0: rgba(16,24,32,0);
  --logo-light: none;
  --logo-dark:  block;

  --err-bg:   #2a1712;
  --err-line: #6b3423;
  --err-ink:  #f0a68c;
}

/* System preference decides only when the visitor has not chosen. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --surface:#101820; --surface-2:#17222d; --surface-3:#202e3b; --raised:#1b2935;
    --line:rgba(220,232,241,.13); --line-2:rgba(220,232,241,.25);
    --fg:#f1f5f8; --fg-2:#bdc9d4; --fg-3:#93a4b4;
    --gold:#d29a62; --gold-ink:#e6b985; --gold-dim:#dba976; --gold-hi:#f2d0aa;
    --gold-soft:rgba(210,154,98,.17);
    --teal:#73b4bd; --teal-ink:#9bd0d4; --teal-hi:#b9e1e2; --teal-soft:rgba(115,180,189,.17);
    --btn-a:#ecc296; --btn-b:#d29a62; --btn-c:#a96f3e; --btn-ink:#1c1209;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
    --shadow-md:0 2px 6px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.38);
    --shadow-lg:0 4px 12px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.45);
    --nav-bg:rgba(16,24,32,.76); --nav-bg-2:rgba(16,24,32,.96); --scroll-thumb:#485c6e;
    --grain-blend:soft-light; --grain-op:.14;
    --scrim:linear-gradient(to top,rgba(16,24,32,.97) 0%,rgba(16,24,32,.9) 38%,
                            rgba(16,24,32,.5) 74%,rgba(16,24,32,.18) 100%);
    --tex-ops:url("../img/ops-floor-dark.jpg"); --tex-rack:url("../img/rack-dark.jpg");
    --lattice-line:241,245,248; --lattice-node:210,154,98;
    --wash-1:rgba(16,24,32,.94); --wash-0:rgba(16,24,32,0);
    --logo-light:none; --logo-dark:block;
    --err-bg:#2a1712; --err-line:#6b3423; --err-ink:#f0a68c;
  }
}

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

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

body{
  margin:0;
  background:var(--surface);
  color:var(--fg);
  font-family:var(--f-sans);
  font-size:17px;
  line-height:1.62;
  font-weight:340;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

::selection{ background:var(--gold); color:var(--btn-ink); }

/* Surfaces the browser draws for us still belong to the palette. */
html{ scrollbar-color:var(--scroll-thumb) var(--surface-2); scrollbar-width:thin; caret-color:var(--gold-ink); }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--surface-2); }
::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb); border-radius:var(--r-pill); border:3px solid var(--surface-2);
}
::-webkit-scrollbar-thumb:hover{ background:var(--gold-dim); }
:where(input,textarea,select){ caret-color:var(--gold-ink); }
.stat__n, .ledger__i, time, .tbl td{ font-variant-numeric:tabular-nums; }

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--gold-ink); outline-offset:3px; border-radius:var(--r-inline);
}

/* --- paper grain (fixed, never on a scrolling container) ------------------ */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:var(--grain-op);
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:var(--grain-blend);
}

/* --- layout -------------------------------------------------------------- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(84px,11vw,150px); position:relative; }
.section--tight{ padding-block:clamp(60px,7vw,96px); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* --- type ---------------------------------------------------------------- */
h1,h2,h3,h4{
  font-weight:500; letter-spacing:-.03em; line-height:1.02; margin:0; color:var(--fg);
  text-wrap:balance;
}
.h-xl{ font-size:clamp(3rem,6.6vw,5.6rem); letter-spacing:-.04em; }
.h-lg{ font-size:clamp(2.4rem,5vw,4rem); letter-spacing:-.036em; }
.h-md{ font-size:clamp(1.7rem,2.8vw,2.5rem); letter-spacing:-.026em; }
.h-sm{ font-size:clamp(1.15rem,1.5vw,1.4rem); letter-spacing:-.014em; line-height:1.25; }

p{ margin:0; }
.lede{ font-size:clamp(1.05rem,1.35vw,1.22rem); color:var(--fg-2); max-width:60ch; line-height:1.66; }
.body{ color:var(--fg-2); max-width:64ch; }
.small{ font-size:.93rem; color:var(--fg-2); }

.gold{ color:var(--gold-ink); }
.serif{ font-family:var(--f-serif); font-weight:500; font-style:italic; color:var(--gold-dim); }

/* --- brand lockup --------------------------------------------------------
   The AIMS mark is raster artwork with baked-in copper and teal, so it is
   never recoloured. Two files ship: the full stacked lockup carries a dark
   wordmark for light surfaces, a light one for dark surfaces.
   ------------------------------------------------------------------------- */
.brand{ display:inline-flex; align-items:center; gap:12px; line-height:1; text-decoration:none; }
.brand__mark{ height:38px; width:auto; display:block; flex:none; }
.brand img.lg-l{ display:var(--logo-light); }
.brand img.lg-d{ display:var(--logo-dark); }
.brand--stack{ display:inline-block; }
.brand--stack img{ height:104px; width:auto; display:block; }
@media (max-width:760px){ .brand__mark{ height:32px; } .brand--stack img{ height:84px; } }

/* --- wordmark ------------------------------------------------------------ */
.wordmark{ display:inline-flex; align-items:baseline; gap:.42em; line-height:1; }
.wordmark__a{
  /* set in the sans to echo the geometric wordmark in the logo artwork;
     the serif face renders a lowercase "ai" too softly beside the mark */
  font-family:var(--f-sans); font-weight:500; font-size:1.42rem; letter-spacing:-.005em;
  background:linear-gradient(168deg,var(--gold-hi) 6%,var(--gold) 48%,var(--gold-dim) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wordmark__t{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--fg-3); transform:translateY(-1px);
}
.wordmark--lg .wordmark__a{ font-size:2.6rem; }
.wordmark--lg .wordmark__t{ font-size:11px; }

/* --- nav ----------------------------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50; height:70px;
  display:flex; align-items:center;
  background:var(--nav-bg);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.nav--solid{ background:var(--nav-bg-2); border-bottom-color:var(--line); box-shadow:var(--shadow-sm); }
.nav__in{ display:flex; align-items:center; justify-content:space-between; gap:28px; width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
.nav__links{ display:flex; align-items:center; gap:30px; }
.nav__link{
  font-size:14px; color:var(--fg-2); letter-spacing:-.008em; white-space:nowrap;
  transition:color .25s var(--ease); position:relative; padding-block:6px;
}
.nav__link:hover,.nav__link[aria-current="page"]{ color:var(--fg); }
.nav__link[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--gold);
}
.nav__toggle{
  display:none; background:var(--raised); border:1px solid var(--line-2); color:var(--fg);
  border-radius:var(--r-pill); padding:7px 14px; font-size:13px; cursor:pointer;
}

/* --- buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  padding:13px 24px; border-radius:var(--r-pill); font-size:14.5px; font-weight:400;
  letter-spacing:-.005em; cursor:pointer; border:1px solid transparent;
  transition:transform .18s var(--ease), background .28s var(--ease),
             border-color .28s var(--ease), color .28s var(--ease), box-shadow .28s var(--ease);
}
.btn:active{ transform:translateY(1px) scale(.985); }
/* dark ink on gold: 8.1:1 */
.btn--gold{
  background:linear-gradient(160deg,var(--btn-a),var(--btn-b) 58%,var(--btn-c));
  color:var(--btn-ink); font-weight:500;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), var(--shadow-sm);
}
.btn--gold:hover{ filter:brightness(1.05); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), var(--shadow-md); }
.btn--ghost{ border-color:var(--line-2); color:var(--fg); background:var(--raised); }
.btn--ghost:hover{ border-color:var(--gold-dim); color:var(--gold-ink); box-shadow:var(--shadow-sm); }
.btn--sm{ padding:10px 18px; font-size:13.5px; }
.btn i{ font-size:1.05em; }

/* --- surfaces ------------------------------------------------------------ */
.panel{
  background:var(--raised);
  border:1px solid var(--line); border-radius:var(--r-panel);
  box-shadow:var(--shadow-sm);
}
.card{
  background:var(--raised); border:1px solid var(--line); border-radius:var(--r-card);
  padding:30px; position:relative; overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover{ border-color:var(--gold); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.card__ico{
  width:42px; height:42px; border-radius:var(--r-input); display:grid; place-items:center;
  background:var(--gold-soft); color:var(--gold-ink); font-size:20px; margin-bottom:20px;
  border:1px solid var(--gold-soft);
}
.tag{
  display:inline-block; padding:5px 13px; border-radius:var(--r-pill);
  border:1px solid var(--line-2); font-family:var(--f-mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-2);
}
.tag--gold{ border-color:var(--gold); color:var(--gold-ink); background:var(--gold-soft); }

/* --- hero ---------------------------------------------------------------- */
.hero{ position:relative; min-height:100dvh; display:flex; align-items:center; padding-top:96px; padding-bottom:56px; overflow:hidden; }
.hero__grid{
  display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(32px,5vw,72px); align-items:center;
  width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter);
}
.hero__brand{ margin-bottom:30px; }
.hero__brand img{ height:158px; width:auto; display:block; }
.hero__brand img.lg-l{ display:var(--logo-light); }
.hero__brand img.lg-d{ display:var(--logo-dark); }
@media (max-width:760px){ .hero__brand img{ height:120px; } }
@media (max-width:760px){ .hero__brand img{ height:58px; } }
.hero__title{ font-size:clamp(2.3rem,4.5vw,3.65rem); line-height:1.06; letter-spacing:-.03em; font-weight:500; }
.hero__sub{ margin-top:26px; font-size:clamp(1.02rem,1.3vw,1.18rem); color:var(--fg-2); max-width:46ch; line-height:1.6; }
.hero__cta{ margin-top:38px; display:flex; gap:14px; flex-wrap:wrap; }
.hero__canvas{ position:relative; aspect-ratio:1/1; width:100%; }
.hero__canvas canvas{ width:100%; height:100%; }
.hero__glow{
  position:absolute; inset:-14%; z-index:-1; pointer-events:none;
  background:radial-gradient(circle at 52% 48%, var(--gold-soft), transparent 64%);
  filter:blur(10px);
}

/* --- marks ---------------------------------------------------------------
   Two kinds live side by side: real partner artwork (raster, light + dark
   files) and AIMS-drawn SVG for vendors whose pack has not arrived. Both fit
   the slot by height so a row of mixed marks optically aligns.
   ------------------------------------------------------------------------- */
[data-logo]{ display:block; }
[data-logo] svg{ height:100%; width:auto; max-width:100%; }
[data-logo].has-art{ display:flex; align-items:center; }
[data-logo] img{ height:100%; width:auto; max-width:100%; object-fit:contain; }
[data-logo] img.lg-l{ display:var(--logo-light); }
[data-logo] img.lg-d{ display:var(--logo-dark); }


/* --- logo wall ----------------------------------------------------------- */
.wall{ border-block:1px solid var(--line); padding-block:44px; background:var(--surface-2); }
.wall__row{ display:grid; grid-template-columns:repeat(6,1fr); align-items:center; gap:clamp(16px,2.4vw,34px); }
.wall__logo{ opacity:.9; transition:opacity .3s var(--ease); display:block; }
.wall__logo:hover{ opacity:1; }
.wall__logo svg{ height:auto; width:100%; max-width:170px; }
.wall__logo{ display:flex; align-items:center; justify-content:center; min-height:34px; }
.wall__logo img{ height:auto; max-height:30px; width:auto; max-width:100%; }
/* Falcon AML is a drawn lockup, not a raster image. Its tighter viewport lets
   it use this wall slot at an equivalent optical size and closes the empty
   space before Yally without changing the rest of the partner grid. */
.wall__logo[data-logo="falcon-aml"]{ justify-content:flex-end; }
.wall__logo[data-logo="falcon-aml"] svg{ width:min(145px,100%); }
[data-theme="dark"] .wall__logo{ opacity:.98; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .wall__logo{ opacity:.98; }
}
/* the wall shows marks only: the descriptor line inside each mark is hidden here */
.wall__logo svg .mk-sub{ display:none; }

/* --- stat block ---------------------------------------------------------- */
.stat__n{
  font-family:var(--f-serif); font-size:clamp(2.6rem,5vw,4.1rem); line-height:1;
  color:var(--gold-dim); font-weight:600; letter-spacing:-.02em;
}
.stat__l{ margin-top:14px; color:var(--fg-2); font-size:.95rem; max-width:30ch; }

/* --- horizontal pan (portfolio walkthrough) ------------------------------ */
.pan{ position:relative; overflow:hidden; background:var(--surface-2); }
.pan__track{ display:flex; align-items:center; height:100dvh; will-change:transform; }
.pan__intro{
  flex:0 0 min(78vw,560px); padding-inline:var(--gutter); display:flex; flex-direction:column; justify-content:center;
}
/* Height is content-driven with a floor, never a fixed vh box. A fixed height
   clipped the "in detail" button on short laptop viewports. */
.pan__card{
  flex:0 0 min(84vw,430px); margin-right:26px;
  min-height:min(58vh,440px); max-height:86vh;
  border:1px solid var(--line); border-radius:var(--r-panel); padding:32px;
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  background:var(--raised); box-shadow:var(--shadow-md);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.pan__card:hover{ border-color:var(--gold); box-shadow:var(--shadow-lg); }
.pan__card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 88% 2%, var(--gold-soft), transparent 52%);
}
/* A mark sitting above card copy: fixed slot height, descriptor hidden because
   the card's own category tag already says it. */
.card__mark{ height:27px; margin-bottom:26px; }
.card__mark svg .mk-sub{ display:none; }
.pan__logo{ height:27px; margin-bottom:30px; }
.pan__logo svg .mk-sub{ display:none; }
.pan__body{ position:relative; z-index:1; display:flex; flex-direction:column; flex:1 1 auto; align-items:flex-start; }
.pan__cta{ margin-top:auto; padding-top:24px; align-self:flex-start; }
.pan__list{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:9px; }
.pan__list li{ font-size:.9rem; color:var(--fg-2); display:flex; gap:10px; align-items:flex-start; }
.pan__list i{ color:var(--gold-ink); font-size:15px; margin-top:3px; }
.pan__end{ flex:0 0 var(--gutter); }

/* --- bento --------------------------------------------------------------- */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.bento > *{
  border-radius:var(--r-card); border:1px solid var(--line); overflow:hidden;
  position:relative; background:var(--raised); box-shadow:var(--shadow-sm);
}
.b-a{ grid-column:span 4; min-height:262px; }
.b-b{ grid-column:span 2; min-height:262px; }
.b-c{ grid-column:span 2; min-height:250px; }
.b-d{ grid-column:span 2; min-height:250px; }
.b-e{ grid-column:span 2; min-height:250px; }
.bento__pad{ padding:30px; height:100%; display:flex; flex-direction:column; justify-content:flex-start; position:relative; z-index:1; }
.bento__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9; }
.bento__scrim{ position:absolute; inset:0; background:var(--scrim); }
.bento__gold{ background:linear-gradient(150deg,var(--gold-soft),transparent 60%),var(--raised); }


/* --- ledger --------------------------------------------------------------
   Replaces the uniform icon+heading+text card grid. Structure comes from
   hairlines and measure, not from boxes, so the eye reads a list of claims
   rather than a wall of equal tiles. The node motif is the hero lattice,
   carried down the page.
   ------------------------------------------------------------------------ */
.ledger{ display:grid; gap:0; border-top:1px solid var(--line-2); }
.ledger__row{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,10fr);
  gap:clamp(20px,4vw,64px);
  padding-block:clamp(26px,3.2vw,42px);
  border-bottom:1px solid var(--line);
  position:relative;
}
.ledger__row:last-child{ border-bottom:1px solid var(--line-2); }
.ledger__k{ display:flex; align-items:flex-start; gap:16px; }
/* the node: a lattice vertex, echoing the hero canvas */
.ledger__node{
  flex:0 0 auto; width:9px; height:9px; margin-top:.62em; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 4px var(--gold-soft);
}
.ledger__t{
  font-size:clamp(1.22rem,1.9vw,1.62rem); letter-spacing:-.024em;
  line-height:1.14; font-weight:500;
}
.ledger__d{ color:var(--fg-2); max-width:62ch; line-height:1.66; }
.ledger__row--lead .ledger__t{ font-size:clamp(1.5rem,2.6vw,2.15rem); }
.ledger__row--lead .ledger__d{ font-size:1.06rem; }

@media (max-width:820px){
  .ledger__row{ grid-template-columns:1fr; gap:12px; }
}

/* --- section lead --------------------------------------------------------
   Section identity without a kicker label: the heading carries it, and an
   optional gold rule marks where a new movement starts.
   ------------------------------------------------------------------------ */
/* Measure must be set on the heading, where ch resolves against the display
   size. On the wrapper it resolves against body size and crushes the column. */
.lead{ max-width:100%; }
.lead > h2, .lead > h1{ max-width:17ch; }
.lead--wide > h2, .lead--wide > h1{ max-width:24ch; }
.lead__rule{
  width:56px; height:2px; background:var(--gold); border:0; margin:0 0 30px;
}
.lead__note{ margin-top:22px; color:var(--fg-2); max-width:52ch; line-height:1.66; }


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

/* --- theme toggle --------------------------------------------------------- */
.themer{
  display:inline-flex; align-items:center; gap:2px; padding:3px;
  border:1px solid var(--line-2); border-radius:var(--r-pill); background:var(--raised);
}
.themer__b{
  width:30px; height:26px; display:grid; place-items:center; cursor:pointer;
  border:0; background:none; color:var(--fg-3); border-radius:var(--r-pill);
  font-size:14px; line-height:1; transition:color .25s var(--ease), background .25s var(--ease);
}
.themer__b:hover{ color:var(--fg); }
.themer__b[aria-pressed="true"]{ background:var(--gold-soft); color:var(--gold-ink); }

/* --- vendor block --------------------------------------------------------- */
.vend{
  display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(24px,4vw,64px); padding-block:clamp(38px,5vw,64px);
  border-top:1px solid var(--line); scroll-margin-top:96px;
}
.vend:first-of-type{ border-top:0; padding-top:0; }
.vend__id{ display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
.vend__logo{
  display:flex; align-items:center; justify-content:flex-start;
  min-height:56px; width:100%;
}
.vend__logo img{ width:auto; object-fit:contain; }
.vend__logo img.lg-l{ display:var(--logo-light); }
.vend__logo img.lg-d{ display:var(--logo-dark); }
/* One height for every vendor mark: the art is trimmed to its ink, so equal
   height reads as equal size instead of equal bounding box. */
.vend__logo img{ max-height:38px; }
.vend__t{ font-size:clamp(1.5rem,2.5vw,2.05rem); letter-spacing:-.028em; }
.vend__d{ color:var(--fg-2); margin-top:16px; max-width:64ch; line-height:1.68; }
.vend__pts{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:9px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.vend__pts li{ font-size:.92rem; color:var(--fg-2); display:flex; gap:10px; align-items:flex-start; }
.vend__pts i{ color:var(--gold-ink); font-size:15px; margin-top:3px; }
.vend__acts{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:860px){
  .vend{ grid-template-columns:1fr; gap:22px; }
}

/* --- technology stack map ------------------------------------------------- */
.stack{ display:grid; gap:14px; }
.layer{
  display:grid; grid-template-columns:minmax(0,210px) minmax(0,1fr);
  gap:clamp(16px,2.4vw,32px); align-items:start;
  padding:clamp(20px,2.4vw,28px); border:1px solid var(--line);
  border-radius:var(--r-card); background:var(--raised); box-shadow:var(--shadow-sm);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.layer:hover{ border-color:var(--gold); box-shadow:var(--shadow-md); }
.layer__h{ display:flex; flex-direction:column; gap:9px; }
.layer__v{
  display:flex; flex-direction:column; align-items:flex-start; gap:7px;
  margin-bottom:6px; transition:opacity .22s var(--ease);
}
.layer__v:hover{ opacity:.7; }
.layer__logo{ display:flex; align-items:center; height:24px; }
.layer__logo img{ height:auto; max-height:24px; width:auto; }
/* drawn lockups carry a descriptor line the image marks do not: hide it here */
.layer__logo svg{ height:20px; width:auto; }
.layer__logo svg .mk-sub{ display:none; }
.layer__logo--own{
  font-family:var(--f-serif); font-weight:700; font-size:1.15rem; letter-spacing:.05em;
  color:var(--gold-dim); height:24px; display:flex; align-items:center;
}
.layer__vn{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-3);
}
.layer__n{ font-size:1.12rem; letter-spacing:-.02em; font-weight:500; }
.layer__s{ font-size:.86rem; color:var(--fg-3); line-height:1.45; }
.layer__items{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:9px 15px;
  border-radius:var(--r-pill); border:1px solid var(--line-2);
  background:var(--surface); font-size:.9rem; color:var(--fg);
  transition:border-color .22s var(--ease), background .22s var(--ease),
             color .22s var(--ease), transform .22s var(--ease);
}
.chip:hover{ border-color:var(--gold); background:var(--gold-soft); color:var(--gold-ink); transform:translateY(-2px); }
.chip__dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); flex:0 0 auto; }

@media (max-width:760px){
  .layer{ grid-template-columns:1fr; gap:16px; }
}

/* --- service block -------------------------------------------------------- */
.svc{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(22px,4vw,60px); padding-block:clamp(34px,4.5vw,58px);
  border-top:1px solid var(--line); scroll-margin-top:96px;
}
.svc:first-of-type{ border-top:0; padding-top:0; }
.svc__h{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.svc__n{ font-size:clamp(1.6rem,2.8vw,2.3rem); letter-spacing:-.03em; }
.svc__d{ color:var(--fg-2); line-height:1.68; }
.svc__pts{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px; }
.svc__pts li{ font-size:.94rem; color:var(--fg-2); display:flex; gap:11px; align-items:flex-start; }
.svc__pts i{ color:var(--gold-ink); font-size:15px; margin-top:3px; }
@media (max-width:860px){ .svc{ grid-template-columns:1fr; gap:18px; } }


/* --- services teaser list ------------------------------------------------
   Its own component rather than a .layer overridden inline: same hairline
   rhythm as .ledger, so the two read as one family.
   ------------------------------------------------------------------------ */
.svclist{ padding:clamp(8px,1.4vw,14px) clamp(20px,2.6vw,30px); }
.svclist__row{
  display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr);
  gap:clamp(14px,2vw,26px); align-items:baseline;
  padding-block:20px; border-bottom:1px solid var(--line);
  transition:opacity .22s var(--ease);
}
.svclist__row:last-child{ border-bottom:0; }
.svclist__row:hover{ opacity:.72; }
.svclist__n{ font-size:1.08rem; font-weight:500; letter-spacing:-.02em; color:var(--fg); }
.svclist__d{ font-size:.93rem; color:var(--fg-2); line-height:1.6; }
@media (max-width:640px){
  .svclist__row{ grid-template-columns:1fr; gap:6px; }
}

/* --- footer social -------------------------------------------------------- */
.social{ display:flex; gap:10px; margin-top:22px; }
.social a{
  width:38px; height:38px; display:grid; place-items:center; border-radius:var(--r-input);
  border:1px solid var(--line-2); color:var(--fg-2); font-size:18px;
  transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.social a:hover{ color:var(--gold-ink); border-color:var(--gold); background:var(--gold-soft); }

/* --- logo nodes on the hero lattice ---------------------------------------
   No chip, no border: each vendor sits directly on the lattice and is kept
   legible by a soft radial wash of the page colour rather than a hard disc.
   ------------------------------------------------------------------------- */
.hero__nodes{ position:absolute; inset:0; pointer-events:none; }
.lnode{
  position:absolute; transform:translate(-50%,-50%); pointer-events:auto;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  width:136px; text-decoration:none; text-align:center;
  transition:transform .35s var(--ease);
}
.lnode::before{
  content:""; position:absolute; left:50%; top:22px; width:112px; height:112px;
  transform:translate(-50%,-50%); border-radius:50%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, var(--wash-1) 38%, var(--wash-0) 100%);
}
.lnode__ic{ display:flex; align-items:center; justify-content:center; height:44px; }
.lnode__ic img{ width:44px; height:44px; max-width:none; max-height:none; object-fit:contain; }
.lnode__ic svg{ height:36px; width:36px; color:var(--gold-ink); }
.lnode__n{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--fg-3); line-height:1.4; white-space:nowrap;
  transition:color .3s var(--ease);
}
.lnode:hover{ transform:translate(-50%,-50%) scale(1.07); }
.lnode:hover .lnode__n{ color:var(--gold-ink); }
@media (max-width:1080px){
  .lnode{ width:112px; gap:8px; }
  .lnode__ic{ height:36px; }
  .lnode__ic img{ width:36px; height:36px; }
  .lnode__n{ font-size:9px; letter-spacing:.12em; }
  .lnode::before{ width:92px; height:92px; top:18px; }
}
@media (max-width:560px){ .hero__nodes{ display:none; } }

/* --- process timeline ---------------------------------------------------- */
.flow{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; margin-top:56px; }
.flow__line{ position:absolute; left:0; right:0; top:23px; height:1px; background:var(--line); }
.flow__prog{ position:absolute; left:0; top:23px; height:1px; background:var(--gold); width:0; }
.flow__step{ padding-right:26px; position:relative; }
.flow__dot{
  width:11px; height:11px; border-radius:50%; background:var(--surface); border:1px solid var(--gold-dim);
  position:relative; z-index:1; margin-bottom:30px; margin-top:18px;
}
.flow__step h3{ font-size:1.05rem; margin-bottom:9px; }
.flow__step p{ font-size:.9rem; color:var(--fg-2); }

/* --- split feature ------------------------------------------------------- */
.split{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(30px,5vw,80px); align-items:center; }
.split--flip{ grid-template-columns:1.08fr .92fr; }

/* --- vendor page hero ---------------------------------------------------- */
.vhero{
  padding-top:150px; padding-bottom:clamp(56px,7vw,90px);
  position:relative; overflow:hidden; isolation:isolate;
}
/* The hero lattice, carried onto every inner page as a bleeding fragment.
   Same motif, same canvas code, quieter register. */
.vhero__mesh{
  position:absolute; z-index:0; pointer-events:none;
  top:-14%; right:-14%; width:min(54vw,780px); aspect-ratio:1; opacity:.5;
  mask-image:radial-gradient(circle at 50% 50%, #000 42%, transparent 76%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 42%, transparent 76%);
}
.vhero__mesh canvas{ width:100%; height:100%; }
.vhero > .shell{ position:relative; z-index:1; }
.vhero__logo{ height:34px; margin-bottom:28px; }

/* --- module grid --------------------------------------------------------- */
.mods{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:16px; }

/* --- spec clusters ------------------------------------------------------- */
.cluster{ display:grid; grid-template-columns:220px 1fr; gap:36px; padding-block:32px; border-top:1px solid var(--line); }
.cluster h3{ font-size:1.05rem; color:var(--gold-ink); }
.cluster ul{ margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px 30px; }
.cluster li{ font-size:.93rem; color:var(--fg-2); display:flex; gap:10px; }
.cluster li i{ color:var(--gold-ink); font-size:14px; margin-top:4px; }

/* --- quote --------------------------------------------------------------- */
.quote{ max-width:56ch; }
.quote p{ font-family:var(--f-serif); font-size:clamp(1.3rem,2.1vw,1.75rem); line-height:1.42; font-style:italic; color:var(--fg); }
.quote footer{ margin-top:22px; font-size:.88rem; color:var(--fg-2); font-style:normal; }

/* --- form ---------------------------------------------------------------- */
.form{ display:grid; gap:18px; }
.field{ display:grid; gap:8px; }
.field label{ font-size:.86rem; color:var(--fg); letter-spacing:-.005em; font-weight:400; }
.field input,.field select,.field textarea{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-input);
  color:var(--fg); padding:12px 14px; font-family:inherit; font-size:15px; width:100%;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
/* placeholder contrast on --surface: 4.6:1 */
.field input::placeholder,.field textarea::placeholder{ color:var(--fg-3); }
.field :is(input,select,textarea):focus{
  outline:none; background:var(--raised);
  border-color:var(--gold-dim); box-shadow:0 0 0 3px var(--gold-soft);
}
.field__help{ font-size:.8rem; color:var(--fg-2); }
.field__err{ font-size:.8rem; color:var(--err-ink,#a3341a); display:none; }
.field.is-bad input,.field.is-bad textarea{ border-color:var(--err-ink,#a3341a); }
.field.is-bad .field__err{ display:block; }
.form__note{ font-size:.83rem; color:var(--fg-2); }
.form__ok{
  display:none; align-items:center; gap:10px; padding:14px 18px; border-radius:var(--r-input);
  background:var(--gold-soft); border:1px solid var(--gold); color:var(--gold-ink); font-size:.92rem;
}
.form__ok.is-on{ display:flex; }

/* --- footer -------------------------------------------------------------- */
.foot{ border-top:1px solid var(--line); padding-block:60px 34px; background:var(--surface-2); }
.foot__grid{ display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:36px; }
.foot__h{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-3); margin-bottom:16px; font-weight:500; }
.foot__grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.foot__grid a{ font-size:.92rem; color:var(--fg-2); transition:color .25s var(--ease); }
.foot__grid a:hover{ color:var(--gold-ink); }
.foot__bar{ margin-top:52px; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:.84rem; color:var(--fg-2); }


/* --- consent checkbox on the form ---------------------------------------- */
.field--consent{ margin-top:4px; }
.consent-line{ display:flex; gap:11px; align-items:flex-start; cursor:pointer; font-size:.88rem; color:var(--fg-2); line-height:1.5; }
.consent-line input{ width:17px; height:17px; margin:2px 0 0; flex:0 0 auto; accent-color:var(--gold-dim); cursor:pointer; }
.consent-line a{ color:var(--gold-ink); text-decoration:underline; text-underline-offset:2px; }
.field--consent.is-bad .consent-line{ color:var(--err-ink,#a3341a); }

/* --- honeypot: off-screen, not display:none, so bots still see it --------- */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* --- form error box ------------------------------------------------------ */
.form__bad{
  display:none; align-items:flex-start; gap:10px; padding:14px 18px; border-radius:var(--r-input);
  background:var(--err-bg,#fdf1ed); border:1px solid var(--err-line,#e5b6a6); color:var(--err-ink,#8f2d16); font-size:.92rem; line-height:1.5;
}
.form__bad.is-on{ display:flex; }
.form__bad i{ font-size:18px; margin-top:2px; flex:0 0 auto; }
.btn[aria-busy="true"]{ opacity:.72; cursor:progress; }

/* --- inline link that behaves like a button ------------------------------ */
.linkbtn{
  background:none; border:0; padding:0; font-size:.92rem; color:var(--fg-2);
  cursor:pointer; font-family:inherit; text-align:left;
  transition:color .25s var(--ease);
}
.linkbtn:hover{ color:var(--gold-ink); }

/* --- cookie consent banner ----------------------------------------------- */
/* the [hidden] attribute must win over the display:flex below it */
.consent[hidden], .consent__none[hidden]{ display:none; }
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:70; padding:var(--gutter);
  display:flex; justify-content:center; pointer-events:none;
}
.consent__box{
  pointer-events:auto; max-width:640px; width:100%;
  background:var(--raised); border:1px solid var(--line-2); border-radius:var(--r-panel);
  padding:26px 28px; box-shadow:var(--shadow-lg);
  transform:translateY(18px); opacity:0;
  transition:transform .34s var(--ease), opacity .34s var(--ease);
}
.consent.is-up .consent__box{ transform:none; opacity:1; }
.consent__h{ font-size:1.08rem; letter-spacing:-.015em; }
.consent__p{ margin-top:10px; font-size:.9rem; color:var(--fg-2); line-height:1.58; }
.consent__acts{ margin-top:20px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.consent__link{ font-size:.86rem; color:var(--gold-ink); text-decoration:underline; text-underline-offset:2px; }
.consent__none{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:70;
  background:var(--raised); border:1px solid var(--line-2); border-radius:var(--r-pill);
  padding:11px 20px; font-size:.88rem; color:var(--fg-2); box-shadow:var(--shadow-md);
}
@media (prefers-reduced-motion:reduce){
  .consent__box{ transform:none; opacity:1; }
}

/* --- long-form legal prose ----------------------------------------------- */
.prose{ max-width:74ch; }
.prose h2{
  font-size:clamp(1.24rem,1.9vw,1.55rem); letter-spacing:-.018em;
  margin:56px 0 16px; padding-top:26px; border-top:1px solid var(--line);
}
.prose h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.prose h3{ font-size:1.02rem; margin:28px 0 10px; color:var(--fg); }
.prose p{ color:var(--fg-2); margin-bottom:15px; line-height:1.72; }
.prose ul{ margin:0 0 18px; padding-left:20px; color:var(--fg-2); }
.prose li{ margin-bottom:9px; line-height:1.66; }
.prose a{ color:var(--gold-ink); text-decoration:underline; text-underline-offset:2px; }
.prose strong{ color:var(--fg); font-weight:500; }
.prose code{
  font-family:var(--f-mono); font-size:.86em; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-inline); padding:1px 6px; color:var(--fg);
}

/* a value AIMS still has to fill in before publishing */
.tok{
  font-family:var(--f-mono); font-size:max(11.5px,.84em); color:var(--gold-ink);
  background:var(--gold-soft); border:1px dashed var(--gold);
  border-radius:var(--r-inline); padding:1px 7px; white-space:nowrap;
}

.notice{
  display:flex; gap:15px; align-items:flex-start; max-width:74ch;
  background:var(--gold-soft); border:1px solid var(--gold);
  border-radius:var(--r-card); padding:22px 24px; margin-bottom:56px;
}
.notice i{ font-size:21px; color:var(--gold-ink); margin-top:2px; flex:0 0 auto; }
.notice strong{ font-weight:500; }

.tbl{ width:100%; border-collapse:collapse; margin:6px 0 20px; font-size:.9rem; }
.tbl th{
  text-align:left; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-3); font-weight:500;
  padding:0 16px 10px 0; border-bottom:1px solid var(--line-2);
}
.tbl td{ padding:13px 16px 13px 0; color:var(--fg-2); vertical-align:top; border-bottom:1px solid var(--line); line-height:1.55; }
.tbl tr:last-child td{ border-bottom:0; }
@media (max-width:680px){
  .tbl, .tbl thead, .tbl tbody, .tbl tr, .tbl th, .tbl td{ display:block; width:100%; }
  .tbl thead{ display:none; }
  .tbl tr{ border-bottom:1px solid var(--line-2); padding-block:12px; }
  .tbl td{ border:0; padding:3px 0; }
  .tbl td:first-child{ color:var(--fg); font-weight:500; }
}

/* --- reveal --------------------------------------------------------------
   Gated on the js class, so a failed or blocked script leaves the page fully
   readable instead of blank. Entrance is short and shallow: the authored
   motion moment on this site is the pinned portfolio pan, not section fades.
   ------------------------------------------------------------------------ */
.js .rv{ opacity:0; transform:translateY(14px); }
.js .rv.is-in{
  opacity:1; transform:none;
  transition:opacity .62s var(--ease), transform .62s var(--ease);
}

/* Hero gets the one staggered entrance, from an already-laid-out default. */
.js .hero__grid > * > .rv{ transition-duration:.72s; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width:1080px){
  .hero__grid{ grid-template-columns:1fr; gap:44px; }
  .hero__canvas{ max-width:480px; margin-inline:auto; }
  .flow{ grid-template-columns:repeat(2,1fr); gap:34px 24px; }
  .flow__line,.flow__prog{ display:none; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .vhero__mesh{ width:88vw; top:-6%; right:-30%; opacity:.34; }
  .split,.split--flip{ grid-template-columns:1fr; }
  .bento{ grid-template-columns:1fr; }
  .bento > *{ grid-column:span 1 !important; min-height:230px; }
  .cluster{ grid-template-columns:1fr; gap:18px; }
  .wall__row{ grid-template-columns:repeat(3,1fr); row-gap:26px; }
}
@media (max-width:820px){
  .nav__links{
    position:fixed; top:70px; left:0; right:0; flex-direction:column; align-items:flex-start;
    gap:0; background:var(--surface); border-bottom:1px solid var(--line);
    padding:10px var(--gutter) 24px; display:none; box-shadow:var(--shadow-md);
  }
  .nav__links.is-open{ display:flex; }
  .nav__links .nav__link{ width:100%; padding-block:13px; border-bottom:1px solid var(--line); font-size:15px; }
  .nav__links .btn{ margin-top:16px; width:100%; justify-content:center; }
  .nav__toggle{ display:inline-flex; }
  .flow{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr; gap:32px; }
  body{ font-size:16px; }
}
@media (max-width:560px){
  .wall__row{ grid-template-columns:repeat(2,1fr); }
  .pan__card{ flex:0 0 84vw; min-height:400px; max-height:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rv{ opacity:1 !important; transform:none !important; transition:none !important; }
  *{ animation-duration:.001ms !important; transition-duration:.06s !important; }
}