/* =========================================================================
   RALaw — Rudi Lee, Annie Kon & Associates
   One hand-written stylesheet. Tokens first; no raw hex below :root (§3).
   Order: tokens · reset · type · utilities · header · banner · footer ·
          buttons · forms · responsive
   ========================================================================= */

:root {
  /* --- Colour: the three published Figma variables --------------------- */
  --gold:        #BB8F40;
  --black:       #070D0D;
  --white-text:  #F2F2F2;

  /* --- Colour: derived in §3, not in the Figma file -------------------- */
  --white:       #FFFFFF;
  --gold-deep:   #8C6A2C;              /* 5.1:1 on white — any text under 24px */
  --gold-hover:  #A87C33;              /* CTA hover, node 122:0 */
  --scrim:       rgba(7, 13, 13, .6);  /* service-card caption band */
  --card-veil:   linear-gradient(180deg, rgba(7, 13, 13, .3) 22%, rgba(255, 255, 255, 0) 100%);
  --banner-veil: linear-gradient(180deg, #070D0D, rgba(7, 13, 13, 0));

  /* --- Type ------------------------------------------------------------ */
  --font-body:   "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-footer: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --size-title:    80px;   --lh-title:    96px;    /* interior page titles */
  --size-band:     50px;   --lh-band:     40.3px;  /* "WHY CHOOSE US" */
  --size-firm:     40px;                           /* home firm name */
  --size-heading:  36px;   --lh-heading:  28.8px;  /* section headings, names */
  --size-cta:      30px;   --lh-cta:      40.3px;  /* GET IN TOUCH > */
  --size-label:    24px;   --lh-label:    30px;    /* card labels, submit */
  --size-caption:  20px;   --lh-caption:  40.3px;  /* why-choose-us captions */
  --size-body:     18px;   --lh-body:     28.8px;  /* body copy everywhere */
  --lh-list:       36px;                           /* legal-team panel list */
  --size-nav:      16px;   --lh-nav:      28.8px;  /* nav, uppercase */
  --size-legal:    16px;   --lh-legal:    21.6px;  /* footer copyright bar */
  --size-field:    14px;                           /* form placeholders */

  /* --- Space, radius, elevation ---------------------------------------- */
  --gutter:          74px;
  --pad:             clamp(20px, 5vw, 74px);
  --container:       1292px;
  --radius:          20px;
  --header-h:        100px;
  --footer-block-h:  353px;
  --footer-bar-h:    50px;
  --banner-interior: 424px;
  --banner-profile:  215px;

  --shadow-card: 0 4px 4px rgba(0, 0, 0, .25);
  --shadow-text: 0 4px 4px rgba(0, 0, 0, .25);

  --transition: 150ms ease;
}

/* =========================================================================
   Reset
   ========================================================================= */

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  font-weight: 400;
  overflow-x: hidden;                  /* §6: no horizontal scroll, ever */
}

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* =========================================================================
   Type
   ========================================================================= */

.t-title   { font-size: var(--size-title);   line-height: var(--lh-title);   font-weight: 700; }
.t-band    { font-size: var(--size-band);    line-height: var(--lh-band);    font-weight: 700; }
.t-heading { font-size: var(--size-heading); line-height: var(--lh-heading); font-weight: 700; }
.t-label   { font-size: var(--size-label);   line-height: var(--lh-label);   font-weight: 700; }
.t-caption { font-size: var(--size-caption); line-height: var(--lh-caption); font-weight: 400; }

/* =========================================================================
   Utilities
   ========================================================================= */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* Full-bleed bands keep their own edge-to-edge ground but align inner content. */
.band { width: 100%; }

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

/* §10.4 — nothing in the design addresses keyboard use. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: 0; left: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--black);
  color: var(--white-text);
  font-weight: 700;
  transform: translateY(-100%);
}
.skip-link:focus { transform: translateY(0); }

/* =========================================================================
   Header (§4.1)
   Built at x:0 — nodes 74:85 / 74:86 are Figma residue, not a 4px offset.
   ========================================================================= */

.site-header {
  position: relative;
  z-index: 20;
  background: var(--white-text);      /* §10.3: profile frames' #F0EEF1 normalised */
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 50px;
}

.site-header__logo { display: block; flex: none; }
.site-header__logo img { width: 223px; height: auto; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 40px;                           /* §10.3: absolute gaps 53–160px evened out */
}

.site-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--header-h);
  font-size: var(--size-nav);
  line-height: var(--lh-nav);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--black);
  white-space: nowrap;
}

/* Active / hover rule: 50×3, gold, centred, 65px from the top of the header. */
.site-nav__link::after {
  content: "";
  position: absolute;
  top: 65px;
  left: 50%;
  width: 50px;
  height: 3px;
  background: var(--gold);
  transform: translateX(-50%) scaleX(0);
  transition: transform var(--transition);
}
.site-nav__link:hover::after,
.site-nav__link.is-active::after { transform: translateX(-50%) scaleX(1); }

/* Hamburger — hidden on desktop, revealed at the tablet breakpoint. */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  height: 2px;
  background: var(--black);
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle__bar + .nav-toggle__bar { margin-top: 6px; }

/* =========================================================================
   Banner (§4.3)
   Interior: photo, no overlay, gold title. Profile: photo + dark ramp, white
   title. The source is one 2880×1920 frame; CSS crops it to each height.
   ========================================================================= */

.banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  overflow: hidden;
}

.banner__media,
.banner__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner__inner { position: relative; width: 100%; }

.banner--interior { height: var(--banner-interior); }
.banner--interior .banner__title {
  color: var(--gold);
  padding-bottom: 112px;               /* title baseline block at y:216 of 424 */
}

.banner--profile { height: var(--banner-profile); }
.banner--profile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--banner-veil);
}
.banner--profile .banner__title {
  color: var(--white);
  padding-bottom: 24px;
}

.banner__title {
  font-size: var(--size-title);
  line-height: var(--lh-title);
  font-weight: 700;
  text-transform: uppercase;
}

/* =========================================================================
   Footer (§4.2) — identical on all ten pages
   ========================================================================= */

.site-footer { background: var(--white-text); }

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 528px) minmax(0, 1fr) auto;
  align-items: start;
  gap: 40px;
  min-height: var(--footer-block-h);
  max-width: 1440px;
  margin-inline: auto;
  padding: 64px 70px 64px 140px;
}

.site-footer__name {
  font-size: var(--size-caption);
  line-height: 25px;
  font-weight: 700;
}

.site-footer__address {
  margin-top: 73px;
  font-family: var(--font-footer);
  font-size: var(--size-body);
  line-height: 25px;
}

.site-footer__contact { display: grid; gap: 20px; }

.site-footer__row {
  display: grid;
  grid-template-columns: 46px 1fr;      /* icon at x:668, values at x:714 */
  align-items: start;
  gap: 0;
}

.site-footer__icon { color: var(--black); }
.site-footer__icon--phone   { width: 26.8px; height: 26.8px; }
.site-footer__icon--fax,
.site-footer__icon--email   { width: 29.8px; height: 29.8px; }

.site-footer__values {
  font-family: var(--font-footer);
  font-size: var(--size-body);
  line-height: 25px;
}
.site-footer__values a { text-decoration: none; }
.site-footer__values a:hover { text-decoration: underline; }

.site-footer__mark { justify-self: end; }
.site-footer__mark img { width: 108px; height: auto; }

.site-footer__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--footer-bar-h);
  padding: 12px 20px;
  background: var(--gold);
  color: var(--black);
  font-family: var(--font-footer);
  font-size: var(--size-legal);
  line-height: var(--lh-legal);
  text-align: center;
}

/* =========================================================================
   Buttons (§4.4) — always <a> or <button>, never a <div>
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition);
}

.btn--cta,
.btn--submit {
  width: 322px;
  max-width: 100%;
  height: 64px;
  background: var(--gold);
  color: var(--white-text);
}
.btn--cta { font-size: var(--size-cta); line-height: var(--lh-cta); }
.btn--submit { font-size: var(--size-label); line-height: var(--lh-label); }
.btn--cta:hover,
.btn--submit:hover { background: var(--gold-hover); }

.btn--learn {
  width: 134px;
  height: 38px;
  background: var(--black);
  color: var(--white);
  font-size: var(--size-body);
  line-height: var(--lh-body);
}
.btn--learn:hover { background: var(--gold); }

/* =========================================================================
   Form fields (§4.5)
   Real <label>s, visually hidden; the in-field text stays a placeholder.
   ========================================================================= */

/* §4.5 — panel 640×455 with 530px fields, i.e. 55px of side padding. The top
   edge sits 40px above the first field and the submit clears the foot by 24px.
   §5's rule against fixing heights applies here too: min-height, not height. */
.form-panel {
  width: 640px;
  max-width: 100%;
  min-height: 455px;
  padding: 40px 55px 24px;
  background: var(--white-text);
  border-radius: var(--radius);
}

/* §8.1 — offscreen rather than display:none, which some bots skip. */
.honeypot {
  position: absolute;
  left: -9999px;
}

.field { margin-bottom: 20px; }

.field__control {
  display: block;
  width: 530px;
  max-width: 100%;
  padding: 0 12px;
  background: var(--white);
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--size-field);
  color: var(--black);
}

input.field__control { height: 46px; }

textarea.field__control {
  height: 112px;
  padding-block: 12px;
  resize: vertical;
}

.field__control::placeholder { color: var(--black); opacity: 1; }

.form-error {
  margin-bottom: 20px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--gold-deep);
  font-size: var(--size-field);
  font-weight: 700;
}

/* The summary lists one item per failed rule, so it needs real list marks —
   colour alone must not be what tells someone the form went wrong. */
.form-error ul {
  margin: 8px 0 0;
  padding-left: 20px;
  list-style: disc;
}

.form-error li + li { margin-top: 4px; }

/* =========================================================================
   Prose blocks — a 36px gold heading over 18/28.8 body.
   Shared by About (§5) and Services (§5).
   ========================================================================= */

.prose-block + .prose-block { margin-top: 40px; }

.prose-block__heading {
  margin-bottom: 20px;
  color: var(--gold);
  font-size: var(--size-heading);
  line-height: 1.2;                    /* 28.8px would clip a wrapped heading */
  font-weight: 700;
}

.prose-block p + p { margin-top: 20px; }

.page-section { padding-block: 60px; }

/* =========================================================================
   Home (§5) — node 74:2
   ========================================================================= */

/* Hero: the frame stacks two identical copies (74:4, 74:5) — one ships.

   The source is a 1440×600 group portrait with four people spread across
   almost the whole frame — the outermost two start 130px from the left edge
   and end 40px from the right. A fixed height narrower than 1440px makes
   object-fit:cover crop the sides, and at 340px tall on a phone it showed the
   middle two people only. So the height follows the source's own 12:5 ratio
   and is capped at the design's 600px: below 1440px the band gets shorter
   rather than narrower, and everyone stays in frame. Past 1440px the cap
   takes over and the crop turns vertical, trimming the plinth of books below
   the group rather than anyone standing in it. */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  aspect-ratio: 12 / 5;
  max-height: 600px;
  overflow: hidden;
}

.hero__media,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Past 1440px the 600px cap makes cover crop vertically. Anchored to the top,
   the 200px it takes at 1920px come off the torsos rather than the heads. */
.hero__media img { object-position: center top; }

.hero__cta { position: relative; margin-bottom: 42px; }

.membership {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 35px;
}

.membership__label { font-size: var(--size-label); line-height: var(--lh-body); }

/* The source lockup is 1085×200; §7's "600×70" would squash it, so the width
   is honoured and the height left to fall out of the aspect ratio. */
.membership__mark img { width: 600px; }

.firm-name {
  padding-top: 40px;
  text-align: center;
}
.firm-name__name { font-size: var(--size-firm); line-height: 1.2; font-weight: 700; }
.firm-name__tagline {
  margin-top: 8px;
  font-size: var(--size-cta);
  line-height: 25px;
  font-weight: 700;
}

.home-about {
  display: grid;
  grid-template-columns: 616px minmax(0, 1fr);
  gap: 50px;
  align-items: start;
  padding-block: 60px;
}
.home-about p + p { margin-top: 20px; }
.home-about__photo img { width: 100%; border-radius: var(--radius); }

/* Why choose us — full-bleed band, node 74:32. */
.why {
  padding-block: 52px 60px;
  background: var(--black);
  color: var(--white-text);
  text-align: center;
}

.why__heading-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.why__rule {
  flex: 0 1 245px;
  height: 1px;
  background: var(--white-text);
}
.why__heading {
  font-size: var(--size-band);
  line-height: var(--lh-band);
  font-weight: 700;
  text-shadow: var(--shadow-text);
}

.why__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 65px;
}

/* §10.3 — the three circles are 131×124, 126×126 and 130×130 in the frame. */
.why__figure img {
  width: 128px;
  height: 128px;
  margin-inline: auto;
  border-radius: 50%;
  object-fit: cover;
}
.why__caption {
  margin-top: 30px;
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
}

/* =========================================================================
   About (§5) — node 101:138
   ========================================================================= */

/* Content runs x:74 → x:1390 in the frame, wider than --container, because the
   panel sits nearer the right edge than the 74px gutter. */
.about__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 307px;
  column-gap: 34px;
  align-items: start;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: 60px 50px 60px var(--pad);
}
.about__intro { grid-column: 1; grid-row: 1; }
.about__panel { grid-column: 2; grid-row: 1; }
.about__rest  { grid-column: 1; grid-row: 2; margin-top: 40px; }

.team-panel {
  padding: 20px;
  border: 5px solid var(--gold);
  border-radius: var(--radius);
}
.team-panel__heading {
  margin-bottom: 16px;
  font-size: var(--size-label);
  line-height: var(--lh-label);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}
.team-panel__item {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: var(--size-nav);
  line-height: var(--lh-list);
}
.team-panel__bullet { flex: none; width: 16px; height: 16px; color: var(--gold); }
/* §3 — gold is 2.9:1 on white, so 16px link text takes the deep variant. */
.team-panel__item a { color: var(--gold-deep); text-decoration: none; }
.team-panel__item a:hover { text-decoration: underline; }

/* =========================================================================
   Our Lawyers listing (§5) — node 109:3
   ========================================================================= */

.lawyer-row {
  display: grid;
  grid-template-columns: 261px minmax(0, 762px);
  column-gap: 50px;
  align-items: start;
  padding-block: 15px;
}

.lawyer-row__thumb img {
  width: 261px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);      /* §10.3 — only 110:4 has it; all six get it */
}

.lawyer-row__name {
  margin-bottom: 20px;
  font-size: var(--size-heading);
  line-height: 1.2;
  font-weight: 700;
}
.lawyer-row__credentials { margin-bottom: 20px; font-weight: 700; }
.lawyer-row__summary { margin-bottom: 24px; }

/* Blocker 2 — nodes 144:2 and 144:4 are both #070D0D, so the heading is
   invisible in the frame. Built light, matching the Why-choose-us band. */
.admin-band {
  display: flex;
  align-items: center;
  min-height: 94px;
  margin-block: 30px;
  background: var(--black);
  color: var(--white-text);
  /* Full-bleed from inside .container: the band spans 1440px in the frame while
     the rows sit on the 1292px measure. body has overflow-x:hidden, so the
     scrollbar's share of 100vw is clipped rather than scrolled. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.admin-band__inner {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
}
.admin-band__heading { font-size: var(--size-heading); line-height: 1.2; font-weight: 700; }

/* =========================================================================
   Our Services (§5) — node 110:208
   ========================================================================= */

.services__layout {
  display: grid;
  grid-template-columns: 564px minmax(0, 1fr);
  column-gap: 42px;
  align-items: start;
  padding-block: 60px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 200px));
  gap: 30px 43px;                      /* frame gaps are 41 and 45 — evened out */
  justify-content: start;
}

/* §5 DECISION — no per-service page exists, so cards are figures, not links. */
.service-card {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  overflow: hidden;
}
.service-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-card__label {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 101.8px;
  padding: 8px;
  background: var(--scrim);
  color: var(--gold);
  font-size: var(--size-label);
  line-height: var(--lh-label);
  font-weight: 700;
  text-align: center;
  text-shadow: var(--shadow-text);
}

/* =========================================================================
   Profile (§5) — nodes 110:52 · 254:4 · 260:115
   ========================================================================= */

/* §5 DECISION — frames differ in height only because bios differ in length.
   The row starts aligned and the page grows; Annie Kon's bio outruns the photo. */
.profile {
  display: grid;
  grid-template-columns: 500px minmax(0, 655px);
  column-gap: 50px;
  align-items: start;
  justify-content: start;
  padding-block: 60px;
}

.profile__photo img { width: 100%; border-radius: var(--radius); }

.profile__name {
  margin-bottom: 20px;
  color: var(--gold);
  font-size: var(--size-heading);
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
}
.profile__credentials { margin-bottom: 20px; font-weight: 700; }
.profile__bio p + p { margin-top: 20px; }

/* =========================================================================
   Contact (§5) — node 110:323
   ========================================================================= */

/* The frame runs its two panels 55 → 1384, a 1329px measure wider than the
   1292 container. §10.3 standardises the gutter at 74px, so the panels take an
   even share of the container instead and keep their 50px gap; §6 turns every
   fixed width in the frames into a max-width anyway. */
.contact__layout {
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(0, 639px);
  gap: 50px;
  align-items: start;
  padding-block: 60px;
}

.map-panel {
  width: 639px;
  max-width: 100%;
  min-height: 455px;
  display: grid;
}

/* One block link over the whole panel. When the map raster arrives it goes
   inside .map-panel__figure as an {% image %}; nothing else here changes. */
.map-panel__link {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
  padding: 40px;
  border-radius: var(--radius);
  background: var(--white-text);
  color: var(--black);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transition);
}
.map-panel__link:hover { background: var(--white); }

.map-panel__figure {
  display: grid;
  gap: 16px;
  justify-items: center;
}

.map-panel__name {
  font-size: var(--size-label);
  line-height: 1.25;
  font-weight: 700;
}

.map-panel__address {
  font-size: var(--size-body);
  line-height: var(--lh-body);
}

/* Under 24px, so --gold-deep rather than --gold (§3 contrast decision). */
.map-panel__cta {
  color: var(--gold-deep);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  font-weight: 700;
  text-decoration: underline;
}

/* =========================================================================
   Message pages (§10.4) — /thank-you/ and /404.html, not designed
   ========================================================================= */

/* Keeps the container's centred 1292px measure like every other page; only the
   prose inside is held to the ~975px column the About page reads at. */
.message-page { padding-block: 60px; }

.message-page > * { max-width: 975px; }

.message-page p + p { margin-top: 20px; }

.message-page__phones {
  margin-top: 32px;
  font-weight: 700;
}

.message-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 40px;
}

/* The 134px Learn More width is drawn for two words; these labels are longer. */
.message-page__actions .btn {
  width: auto;
  min-width: 134px;
  padding-inline: 24px;
}

/* =========================================================================
   Responsive (§6) — authored in the handoff, not derived from Figma
   ========================================================================= */

@media (max-width: 1199px) {
  .site-footer__inner { padding-inline: 40px; }

  .home-about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .about__layout { padding-inline: var(--pad); }
  .services__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lawyer-row { grid-template-columns: 261px minmax(0, 1fr); }
  .profile { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
}

/* §6 — the contact panels stack below 980px, form first. Like the profile rule
   below it, this sits between the named bands: two 640px panels plus a 50px gap
   need 1330px, so they are cramped well before the tablet breakpoint. */
@media (max-width: 979px) {
  .contact__layout { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .form-panel { width: 100%; }
  .map-panel { width: 100%; min-height: 0; }
  .map-panel__link { aspect-ratio: 640 / 455; }
}

/* §6 — the profile's two columns stack below 900px, between the tablet and
   laptop bands, because a 500px photo leaves no usable measure for the bio. */
@media (max-width: 899px) {
  .profile { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .profile__photo img { max-width: 400px; }
}

/* Tablet — nav collapses, drawer takes over. */
@media (max-width: 1023px) {
  .nav-toggle { display: block; }

  .site-header__inner { padding-inline: 32px; }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--black);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--transition), visibility var(--transition);
  }
  .site-nav.is-open { visibility: visible; opacity: 1; }

  .site-nav__list { flex-direction: column; gap: 32px; }

  .site-nav__link {
    height: auto;
    padding: 8px 16px;
    font-size: var(--size-label);
    color: var(--white-text);
  }
  .site-nav__link::after { display: none; }
  .site-nav__link.is-active { color: var(--gold); }

  .nav-close {
    position: absolute;
    top: 16px; right: 24px;
    width: 44px; height: 44px;
    background: none;
    border: 0;
    color: var(--white-text);
    font-size: var(--size-label);
    cursor: pointer;
  }

  .banner--interior { height: 320px; }
  .banner--interior .banner__title { padding-bottom: 64px; }
  .banner--profile { height: 180px; }

  /* §6 — fields become 100% of the panel minus 2×24px of padding. */
  .form-panel { padding: 24px; }
  .field__control { width: 100%; }


  /* §6 — the panel becomes a full-width block directly under the intro. */
  .about__layout { grid-template-columns: minmax(0, 1fr); }
  .about__intro,
  .about__panel,
  .about__rest { grid-column: 1; grid-row: auto; }
  .about__panel { margin-top: 40px; }
  .about__rest { margin-top: 40px; }
  .team-panel { max-width: 100%; }

  /* §6 — prose moves above the grid, which drops to two columns. */
  .services__layout { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 48px 32px;
  }
  .site-footer__mark { grid-column: 1 / -1; justify-self: start; }
  .site-footer__address { margin-top: 32px; }
}

@media (max-width: 560px) {
  .service-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Mobile — everything single column. */
@media (max-width: 767px) {
  :root {
    --header-h: 72px;
    --size-body: 17px;
    --lh-body: 1.6;
  }

  .site-header__inner { padding-inline: 20px; }
  .site-header__logo img { width: 180px; }

  .banner__title { font-size: clamp(36px, 8vw, 80px); line-height: 1.15; }
  .banner--interior { height: 220px; }
  .banner--interior .banner__title { padding-bottom: 32px; }
  .banner--profile { height: 150px; }

  .t-heading { font-size: clamp(24px, 4vw, 36px); line-height: 1.25; }

  .btn--cta { width: min(322px, 88vw); height: 56px; font-size: var(--size-label); }
  .btn--submit { width: 100%; height: 56px; }

  /* §4.4 — the 38px Learn More button needs a real touch target. */
  .btn--learn { height: 44px; }

  input.field__control { height: 52px; }
  textarea.field__control { height: 132px; }

  /* At 12:5 the band is only ~160px tall on a phone, which cannot float a
     56px button over it. The CTA drops out of the overlay and sits under the
     photo instead — which also gives it a full-width touch target. */
  .hero {
    display: block;
    aspect-ratio: auto;
    max-height: none;
    overflow: visible;
  }
  .hero__media,
  .hero__media img {
    position: relative;
    inset: auto;
    height: auto;
  }
  .hero__media img { aspect-ratio: 12 / 5; }
  .hero__cta {
    display: flex;
    margin: 24px auto 0;
  }

  .membership__label { font-size: var(--size-caption); }
  .membership__mark img { width: 100%; max-width: 600px; }

  .firm-name__name { font-size: clamp(24px, 6vw, 40px); }
  .firm-name__tagline { font-size: clamp(20px, 5vw, 30px); }

  /* §6 — text first, photo full-width beneath it. */
  .home-about { grid-template-columns: minmax(0, 1fr); gap: 32px; }

  .why__items { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .why__rule { display: none; }
  .why__heading { font-size: clamp(28px, 7vw, 50px); line-height: 1.2; }
  .why__caption { font-size: var(--size-body); line-height: 1.6; }

  .lawyer-row { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .lawyer-row__thumb img { width: 100%; max-width: 280px; }

  .admin-band__heading { font-size: clamp(24px, 5vw, 36px); }

  .service-card__label { min-height: 72px; font-size: var(--size-caption); }

  .map-panel__link { aspect-ratio: auto; padding: 32px 24px; }
  .message-page__actions .btn { width: 100%; }

  /* Headings centre once the measure narrows — the 74px desktop gutter reads
     as a stray indent on a 320px screen. Body copy stays left-aligned: centred
     paragraphs are harder to read, and these are long ones. */
  .banner__title,
  .prose-block__heading,
  .admin-band__heading,
  .lawyer-row__name,
  .profile__name { text-align: center; }

  /* Footer collapses to one centred column — every item, not just the bar. */
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 32px;
    padding: 40px 20px;
    text-align: center;
  }
  .site-footer__contact { justify-items: center; }

  /* The 46px icon column is a desktop x-offset (icon x:668, values x:714);
     centred, the pair wants to sit as one group on the line instead. */
  .site-footer__row {
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 12px;
  }

  .site-footer__mark { justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}