/* Kamal Hisham & Associates — shared stylesheet */

:root {
  /* Petrol-teal ground with an ice-blue accent, cream for light sections.
     Gold is the logo's colour and is kept as a hairline accent so the mark
     does not read as an orphan against the cool palette. */
  --deep: #0C3A47;
  --deep-dark: #072831;
  --deep-line: rgba(185, 227, 236, .18);
  --ice: #B9E3EC;
  --ice-strong: #8FD3E0;
  --gold: #C9963F;
  --cream: #F6F4EF;
  --cream-line: #E4E0D6;
  --paper: #FFFFFF;
  --ink: #0B2A33;
  --body: #4C5A60;
  --body-dark: #A9C6CE;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --wrap: 1200px;
  --gut: clamp(1.25rem, 4vw, 3rem);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.14;
  margin: 0 0 .6em;
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(2.7rem, 6.2vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
h3 { font-size: 1.4rem; }

h1 em, h2 em { font-style: italic; font-weight: 400; }

p { margin: 0 0 1.2em; }

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

.eyebrow {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ice-strong);
  margin: 0 0 1.1rem;
}

.section .eyebrow,
.section--tint .eyebrow { color: #6E8B94; }

.rule {
  width: 54px;
  height: 1px;
  background: var(--gold);
  border: 0;
  margin: 0 0 1.8rem;
}

.center { text-align: center; }
.center .rule { margin-inline: auto; }
.center p { margin-inline: auto; }

.lede { font-size: 1.18rem; line-height: 1.7; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 1rem 2.2rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .25s, color .25s, border-color .25s;
}

.btn-solid { background: var(--ice); color: var(--deep-dark); border-color: var(--ice); }
.btn-solid:hover { background: var(--ice-strong); border-color: var(--ice-strong); }

.btn-ghost { background: transparent; color: var(--ice); border-color: rgba(185,227,236,.5); }
.btn-ghost:hover { background: var(--ice); color: var(--deep-dark); border-color: var(--ice); }

.btn-dark { background: var(--deep); color: var(--cream); border-color: var(--deep); }
.btn-dark:hover { background: var(--deep-dark); border-color: var(--deep-dark); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(7, 40, 49, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--deep-line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 86px;
}

.brand { display: flex; align-items: center; gap: .85rem; text-decoration: none; }
.brand img { height: 50px; width: auto; }
.brand img.brand-logo { height: 62px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: .01em;
}
.brand-sub {
  font-size: .56rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
}
.brand-mono {
  font-family: var(--serif);
  font-size: .74rem;
  letter-spacing: .3em;
  color: var(--gold);
  margin-top: .12rem;
}

.nav-links { display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2rem); }

.nav-links a {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--body-dark);
  text-decoration: none;
  padding: .4rem 0;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}

.nav-links a:hover { color: var(--cream); }
.nav-links a[aria-current="page"] { color: var(--ice); border-bottom-color: var(--ice); }
.nav-links .btn { color: var(--ice); border: 1px solid rgba(185,227,236,.5); padding: .8rem 1.5rem; }
.nav-links .btn:hover { color: var(--deep-dark); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--deep-line);
  color: var(--cream);
  padding: .55rem .7rem;
  cursor: pointer;
  line-height: 0;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--cream); margin: 4px 0; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background: var(--deep);
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
}

/* The photograph sits under a heavy teal wash — the source frames vary a lot in
   age and quality, and the tint is what makes them read as one set. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  opacity: .38;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(12,58,71,.55) 0%, rgba(7,40,49,.94) 70%),
    linear-gradient(180deg, rgba(7,40,49,.4), rgba(7,40,49,.98));
}

.hero-inner {
  text-align: center;
  padding-block: clamp(4rem, 10vw, 8.5rem) clamp(2.5rem, 5vw, 4rem);
  max-width: 900px;
  margin-inline: auto;
}

.hero h1 { color: var(--cream); margin-bottom: .35em; }
.hero h1 em { color: var(--ice); }

.hero-inner > p {
  color: var(--body-dark);
  font-size: 1.12rem;
  max-width: 60ch;
  margin-inline: auto;
}

.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }

/* Three feature cards sitting on the hero ground */
.hero-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.hero-card {
  border: 1px solid var(--deep-line);
  background: rgba(255,255,255,.03);
  padding: 1.8rem 1.6rem;
}

.hero-card .icon { color: var(--ice-strong); margin-bottom: 1rem; }
.hero-card h3 { color: var(--cream); font-size: 1.15rem; margin-bottom: .4rem; }
.hero-card p { color: var(--body-dark); font-size: .92rem; margin: 0; }

.icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.25; }

/* ---------- Stats band ---------- */

.stats {
  background: var(--deep-dark);
  border-top: 1px solid var(--deep-line);
  padding-block: clamp(2.2rem, 4vw, 3.2rem);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
  margin: 0;
}

.stats-grid div { border-left: 1px solid var(--deep-line); padding-inline: 1rem; }
.stats-grid div:first-child { border-left: 0; }

.stats-grid .icon { color: var(--ice-strong); display: flex; justify-content: center; margin-bottom: .7rem; }

.stats-grid dd {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--cream);
  line-height: 1.2;
}

.stats-grid dt {
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--body-dark);
  margin-top: .35rem;
}

/* ---------- Page banner (inner pages) ---------- */

.banner {
  background: var(--deep);
  color: var(--cream);
  padding-block: clamp(3.5rem, 8vw, 6rem);
  position: relative;
  text-align: center;
  isolation: isolate;
}

.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  opacity: .2;
}

.banner--about::after { background-image: url("img/advocates-courtroom.jpg"); }
.banner--services::after { background-image: url("img/courtroom-confer.jpg"); }
.banner--contact::after { background-image: url("img/boardroom.jpg"); }
.banner--people::after { background-image: url("img/robes-courtroom.jpg"); background-position: center 30%; }
.banner--activities::after { background-image: url("img/moot-aikol.jpg"); background-position: center 32%; }

.banner h1 { color: var(--cream); font-size: clamp(2.4rem, 5vw, 4rem); }
.banner p.banner-monogram {
  font-family: var(--serif);
  color: var(--gold);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  letter-spacing: .35em;
  margin: -1rem auto 1.6rem;
}
.banner p { color: var(--body-dark); max-width: 62ch; margin-inline: auto; }

/* ---------- Sections ---------- */

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--tint { background: var(--cream); }
.section--dark { background: var(--deep); color: var(--body-dark); }
.section--dark h2, .section--dark h3 { color: var(--cream); }
.section--dark .eyebrow { color: var(--ice-strong); }

.section-head { max-width: 62ch; margin-bottom: 3rem; }
.section-head.center { margin-inline: auto; }

/* ---------- Editorial imagery ---------- */

/*
  Photos render in their natural colour. (Class name kept as .duotone so the
  page markup did not need touching.) The source photos span 2012 phone cameras
  to recent DSLRs, so the set is not perfectly uniform — but the client asked for
  true colour over the earlier teal monochrome treatment.
*/
.duotone {
  overflow: hidden;
  margin: 0;
}

.duotone img {
  transition: transform .6s ease;
}

.duotone:hover img { transform: scale(1.03); }

/* ---------- Cards ---------- */

.grid { display: grid; gap: 1.5rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--paper);
  border: 1px solid var(--cream-line);
  padding: 2.2rem 1.9rem;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.card:hover {
  border-color: var(--deep);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -28px rgba(12,58,71,.5);
}
.card .icon { color: var(--deep); margin-bottom: 1.1rem; }
.card h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.card p { font-size: .95rem; margin: 0; }

.card-num {
  font-family: var(--serif);
  font-size: .85rem;
  letter-spacing: .1em;
  color: var(--gold);
  display: block;
  margin-bottom: 1rem;
}

/* Service blocks with imagery */

.service {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--cream-line);
}

.service:first-of-type { border-top: 0; }
.service:nth-child(even) .service-figure { order: 2; }

.service-figure img {
  width: 100%;
  height: clamp(260px, 34vw, 420px);
  object-fit: cover;
}

/* ---------- Split feature ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.split-figure img {
  width: 100%;
  height: clamp(320px, 42vw, 520px);
  object-fit: cover;
}

/* Heads sit near the top of these shots — anchor the crop up so they are never cut. */
.split-figure img[src*="moot-aikol"],
.split-figure img[src*="parlimen"] { object-position: center top; }
.tile img[src*="gulf-counterparts"] { object-position: center top; }

/*
  The Harvard photograph is only 644x476 — the tallest .split-figure frame would
  upscale it. A 4:3 box capped at 400px keeps it at or below 1:1 pixel scale.
*/
.edu-figure img {
  height: auto;
  aspect-ratio: 4 / 3;
  max-height: 400px;
  object-position: center 40%;
}

.tick-list { list-style: none; margin: 0; padding: 0; }
.tick-list li { position: relative; padding-left: 1.6rem; margin-bottom: .7rem; font-size: 1rem; }
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 8px;
  height: 1px;
  background: var(--gold);
}

/* ---------- Gallery tile ---------- */

/*
  Flex column with a growing caption: the grid stretches every tile to the tallest
  row height, and without this the duotone's teal ground shows as a bar beneath
  the shorter captions.
*/
.tile { margin: 0; display: flex; flex-direction: column; }

.tile img {
  width: 100%;
  height: clamp(240px, 26vw, 320px);
  object-fit: cover;
  object-position: center 30%;
}

/* The caption sits outside the duotone blend, so it must not inherit it. */
.tile figcaption {
  flex: 1 1 auto;
  mix-blend-mode: normal;
  background: var(--paper);
  color: var(--body);
  font-size: .84rem;
  line-height: 1.6;
  padding: 1rem 0 0;
}

.section--tint .tile figcaption { background: var(--cream); }
.section--dark .tile figcaption { background: transparent; color: var(--body-dark); }

/* ---------- Lawyer profile ---------- */

.profile {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.profile-figure { margin: 0; }

.profile-figure img {
  width: 100%;
  /* height:auto is required — the width/height attributes on the <img> are a
     presentational hint that otherwise fixes the height and defeats aspect-ratio. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 30%;
  border-bottom: 3px solid var(--gold);
}

.profile-facts { margin-top: 1.8rem; font-size: .92rem; }

.profile-facts div {
  display: grid;
  grid-template-columns: 1fr;
  padding: .8rem 0;
  border-bottom: 1px solid var(--cream-line);
}

.profile-facts dt {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6E8B94;
  margin-bottom: .25rem;
}

.profile-facts dd { margin: 0; color: var(--ink); }
.profile-facts a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(201,150,63,.5); }
.profile-facts a:hover { color: var(--gold); }

.profile-body h2 { font-size: clamp(2.2rem, 4vw, 3.2rem); }

.person-role {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6E8B94;
  margin-bottom: .9rem;
}

/*
  Unfilled placeholder text. Deliberately loud — a bracket that reaches a live
  site is worse than an ugly one in a draft. Delete the span with the content.
*/
.todo {
  background: #FFF3CD;
  color: #8A6100;
  box-shadow: inset 0 -1px 0 #E0A800;
  padding: 0 .2em;
  font-style: italic;
}

/* ---------- Skylines ---------- */

/*
  Hand-drawn line art, not photography — there is no city photograph anywhere in
  the source folder. Inline SVG (rather than a background image) so the stroke can
  inherit currentColor and sit correctly on both the teal and the cream sections.
*/
.skyline { color: var(--ice-strong); pointer-events: none; }

.skyline svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Skyline sitting behind a full-width band */
.skyline--band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  opacity: .3;
}

/* Skyline anchored to the foot of an office card. The whole skyline is shown
   rather than cropped — cropped, KL and JB are indistinguishable. */
.skyline--card {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: .34;
}

.skyline--card svg { height: auto; }

.section--tint .skyline--card { color: var(--deep); opacity: .18; }

/* ---------- Dubai feature band ---------- */

.dubai-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--deep-dark);
  color: var(--body-dark);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(6rem, 10vw, 9rem);
}

.dubai-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.dubai-band h2 { color: var(--cream); font-size: clamp(2.4rem, 4.6vw, 3.6rem); margin-bottom: .25em; }
.dubai-band h2 em { color: var(--ice); }

.dubai-flag {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--deep-dark);
  background: var(--ice);
  padding: .4rem .9rem;
  margin-bottom: 1.4rem;
}

.dubai-card {
  border: 1px solid var(--deep-line);
  background: rgba(255,255,255,.04);
  padding: 2rem 1.8rem;
  backdrop-filter: blur(2px);
}

.dubai-card h3 { color: var(--cream); font-size: 1.2rem; }
.dubai-card address { font-style: normal; font-size: .95rem; margin-bottom: 1.2rem; }
.dubai-card dl { margin: 0 0 1.6rem; font-size: .93rem; }
.dubai-card dl div { display: flex; gap: .7rem; margin-bottom: .3rem; }
.dubai-card dt { color: var(--ice-strong); min-width: 46px; }
.dubai-card dd { margin: 0; }
.dubai-card a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(185,227,236,.35); }
.dubai-card a:hover { color: var(--ice); }

/* ---------- Offices ---------- */

.office {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--gold);
  padding-top: 1.6rem;
  padding-bottom: 7.5rem; /* clearance for the skyline at the card foot */
}

.office h3 { font-size: 1.25rem; margin-bottom: .2rem; }
.office .office-tag {
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ice-strong);
  margin-bottom: .9rem;
}
.office address { font-style: normal; font-size: .95rem; margin-bottom: 1rem; }
.office a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(185,227,236,.35); }
.office a:hover { color: var(--ice); }
.office dl { margin: 0; font-size: .93rem; }
.office dl div { display: flex; gap: .6rem; margin-bottom: .2rem; }
.office dt { color: var(--ice-strong); min-width: 44px; }
.office dd { margin: 0; }

.section--tint .office .office-tag,
.section--tint .office dt { color: #6E8B94; }
.section--tint .office a { border-bottom-color: rgba(12,58,71,.3); }
.section--tint .office a:hover { color: var(--deep); }

/* ---------- Form ---------- */

.form-shell {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: flex; flex-direction: column; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: .45rem;
}

.field input, .field select, .field textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  padding: .85rem .9rem;
  border: 1px solid #D5D0C4;
  background: var(--paper);
  border-radius: 0;
}

.field textarea { resize: vertical; min-height: 150px; }

.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--deep);
  outline-offset: -2px;
  border-color: var(--deep);
}

.form-note { font-size: .82rem; color: #7C8A90; margin: 1.2rem 0 0; }

.callout { background: var(--deep); color: var(--body-dark); padding: 2.2rem; }
.callout h3 { color: var(--cream); }
.callout a { color: var(--ice); }

/* ---------- CTA strip ---------- */

.cta {
  background: var(--deep-dark);
  color: var(--cream);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}
.cta h2 { color: var(--cream); }
.cta p { color: var(--body-dark); max-width: 56ch; margin-inline: auto; }
.cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--deep-dark);
  color: var(--body-dark);
  padding-block: 4rem 2rem;
  font-size: .9rem;
  border-top: 1px solid var(--deep-line);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--deep-line);
}

.site-footer h4 {
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ice-strong);
  margin-bottom: 1rem;
}

.site-footer img.footer-logo { height: 64px; width: auto; margin-bottom: 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .5rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--ice); }
.site-footer address { font-style: normal; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.8rem;
  font-size: .76rem;
  color: #6E8B94;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .hero-grid, .split, .service, .form-shell, .profile, .dubai-grid { grid-template-columns: 1fr; }
  .hero-cards { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 0; }
  .stats-grid div:nth-child(odd) { border-left: 0; }
  .profile-figure img { aspect-ratio: 3 / 2; object-position: center 15%; }
  .service:nth-child(even) .service-figure { order: 0; }
  .grid-3, .grid-2 { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 86px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--deep-dark);
    border-bottom: 1px solid var(--deep-line);
    padding: 1rem var(--gut) 1.6rem;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: .9rem 0; border-bottom: 1px solid var(--deep-line); }
  .nav-links .btn { margin-top: 1rem; text-align: center; }
}

@media (max-width: 620px) {
  .grid-3, .grid-2, .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .stats-grid div { border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}