/* ===========================================================================
   Alex Martinez Law - design system
   Values taken from the design canvas boards (1440 desktop / 390 mobile) and
   build plan section 5. Desktop sections 100px top/bottom with 80px sides;
   mobile 48px by 16px; buttons 52-58px tall; touch targets at least 44px;
   form inputs 16px text.
   =========================================================================== */

/* Fallback faces sized to the web fonts. When a web font is not ready (see
   the @font-face rules below), text is set in Arial scaled to the same width
   and line metrics, so it looks and wraps the way the page will in Barlow.
   size-adjust is each font's measured width against Arial (Barlow 400 0.963,
   Barlow 500-700 0.91 of Arial Bold, Barlow Condensed 0.67 of Arial Bold,
   Alex Brush 0.739); the overrides are the fonts' own vertical metrics
   (Barlow ascent 1000 / descent 200, Alex Brush 825 / 425, per 1000 units)
   divided by that ratio. Liberation Sans has Arial's metrics. */
@font-face {
  font-family: "Barlow Fallback"; font-weight: 400;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 96.3%; ascent-override: 103.8%; descent-override: 20.8%; line-gap-override: 0%;
}
@font-face {
  font-family: "Barlow Fallback"; font-weight: 500 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold");
  size-adjust: 91%; ascent-override: 109.9%; descent-override: 22%; line-gap-override: 0%;
}
@font-face {
  font-family: "Barlow Condensed Fallback"; font-weight: 500 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold");
  size-adjust: 67%; ascent-override: 149.3%; descent-override: 29.9%; line-gap-override: 0%;
}
@font-face {
  font-family: "Alex Brush Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 73.9%; ascent-override: 111.6%; descent-override: 57.5%; line-gap-override: 0%;
}

/* The three families, served from this site rather than Google Fonts
   (all three are SIL Open Font License), all font-display: optional. The
   page head preloads the faces used above the fold, and a face that is not
   ready in the first moment is skipped for that page view rather than
   swapped in later, so the text never reflows on any device: a late swap
   moved the post hero by 0.1, and the cursive line the hero buttons by 0.04,
   wherever the sized fallback faces above were missing. Files are Google's
   latin and latin-ext subsets, named with the font's version so they can be
   cached for a year. The license travels with them, as the OFL requires:
   /fonts/ofl-barlow.txt (Barlow and Barlow Condensed) and
   /fonts/ofl-alex-brush.txt. */
@font-face {
  font-family: "Alex Brush"; font-style: normal; font-weight: 400; font-display: optional;
  src: url(/fonts/alex-brush-v23-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Alex Brush"; font-style: normal; font-weight: 400; font-display: optional;
  src: url(/fonts/alex-brush-v23-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: optional;
  src: url(/fonts/barlow-v13-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: optional;
  src: url(/fonts/barlow-v13-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: optional;
  src: url(/fonts/barlow-v13-500-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: optional;
  src: url(/fonts/barlow-v13-500-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: optional;
  src: url(/fonts/barlow-v13-600-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: optional;
  src: url(/fonts/barlow-v13-600-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: optional;
  src: url(/fonts/barlow-v13-700-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: optional;
  src: url(/fonts/barlow-v13-700-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: optional;
  src: url(/fonts/barlow-condensed-v13-500-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: optional;
  src: url(/fonts/barlow-condensed-v13-500-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: optional;
  src: url(/fonts/barlow-condensed-v13-600-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: optional;
  src: url(/fonts/barlow-condensed-v13-600-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: optional;
  src: url(/fonts/barlow-condensed-v13-700-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: optional;
  src: url(/fonts/barlow-condensed-v13-700-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Colour - build plan section 5 */
  --red: #C8161D;
  --red-bright: #E3262E;
  --red-hover: #A01016;
  --ink: #1A1213;
  --ink-deep: #120C0D;
  --oxblood: #3A0B0D;
  --oxblood-deep: #2A0809;
  --cream: #FFFBF6;
  --cream-2: #F6EFE6;
  --border: #E3D5C4;
  --border-2: #CDB9A8;
  --body: #5E4E49;
  --muted: #7A6760;
  --text-2: #3A2E2C;
  --surface-3: #EFE5D8;
  --map-bg: #E9DDCD;

  /* On dark */
  --on-dark: #E9DDD6;
  --on-dark-2: #BFAEA7;
  --on-dark-3: #EADBD5;
  --pink: #F3C5C0;
  --pink-2: #F0C7C4;
  --line-dark: #3A2A2B;
  --line-dark-2: #5A4546;
  --panel: #2A2021;
  --panel-border: #3A2E2F;
  --footer-muted: #8C7B75;

  --star: #F4B400;

  /* Type */
  --sans: "Barlow", "Barlow Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond: "Barlow Condensed", "Barlow Condensed Fallback", "Barlow", system-ui, sans-serif;
  --script: "Alex Brush", "Alex Brush Fallback", "Barlow Condensed", cursive;

  /* Rhythm */
  --pad-x: clamp(16px, 5.56vw, 80px);
  --section-y: clamp(48px, 6.95vw, 100px);
  --wrap: 1280px;
  --radius: 6px;
  --sticky-h: 64px;
}

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

/* The same background as body. body only paints its own box, so anything
   that overflows horizontally - at a width narrower than anyone designed
   for, say - shows the canvas beside it, and an unset html paints that
   white. */
html { -webkit-text-size-adjust: 100%; background: var(--cream-2); }

body {
  margin: 0;
  background: var(--cream-2);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* The mobile sticky action bar sits over the end of the page. */
@media (max-width: 900px) {
  body { padding-bottom: var(--sticky-h); }
}

img, svg { display: block; max-width: 100%; }

/* The star row. stars() is used on pages that do not load home.css, where
   this rule used to live, and inline-flex keeps it on the same line as the
   rating text it sits beside. */
.stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.stars svg { fill: var(--star); }
img { height: auto; }

/* Tab panels are toggled with the hidden attribute, so it has to beat the
   display rules the panels carry. */
[hidden] { display: none !important; }

a { color: var(--red); }
a:hover { color: var(--red-hover); }

:where(h1, h2, h3, h4, h5, h6) { font-family: var(--cond); font-weight: 700; margin: 0; }

:focus-visible { outline: 3px solid var(--red-bright); outline-offset: 2px; }

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

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--red); color: #FFF; padding: 12px 18px; border-radius: 4px;
  font-weight: 700; text-decoration: none; transition: top .15s;
}
.skip-link:focus { top: 8px; color: #FFF; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
/* The side gutter lives on .wrap, not on .section, because the hero bands and
   the strips between sections are not .section and still need it. The max
   width is the board's 1280 content column plus the two gutters, so with
   border-box the content lands at 1280 on a 1440 board and at 358 on a 390
   one - the same as when .section carried the padding. */
.section { padding: var(--section-y) 0; }
.wrap {
  max-width: calc(var(--wrap) + var(--pad-x) * 2);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section--cream { background: var(--cream); }
.section--cream2 { background: var(--cream-2); }
.section--ink { background: var(--ink); color: #FFF; }
.section--oxblood { position: relative; background: var(--oxblood-deep); color: #FFF; overflow: hidden; }

.section--oxblood .tex,
.section--oxblood .gallo {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
}
.section--oxblood .tex { inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.section--oxblood > .wrap { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Shared type pieces
   -------------------------------------------------------------------------- */
/* These run as <p> so they read as text, but the boards set their spacing
   explicitly - the browser default margin has to go. */
.eyebrow, .script, .lede { margin: 0; }

.eyebrow {
  font-size: clamp(12px, 1vw, 14px); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--red);
}
.eyebrow--light { color: var(--pink); }
.eyebrow--rule { display: flex; align-items: center; gap: 14px; color: var(--pink-2); }
.eyebrow--rule::before { content: ""; width: 36px; height: 2px; background: var(--red-bright); flex: none; }
/* Figma comment #9: "Make McAllen and Brownsville bigger so it's more
   visible." The two office cities are the only thing on the hero that says
   where the firm is, and at the shared eyebrow size they read as a caption.
   The rule grows with the text so the lockup keeps its proportions. */
.eyebrow--place {
  font-size: clamp(15px, 1.45vw, 20px); letter-spacing: .12em; gap: 16px;
}
.eyebrow--place::before { width: 48px; height: 3px; }

.h-display {
  font-family: var(--cond); font-weight: 700;
  font-size: clamp(42px, 5vw, 72px); line-height: .95;
  text-transform: uppercase; margin: 12px 0 0;
}
/* The hero headline. Every board sizes this one itself - 86px on most
   interior pages, stepped down where that page's own headline is long, and
   76px on the home board - so the desktop cap comes from --h1-max, which each
   hero sets from its board. The mobile boards all agree on 44px. */
.h-display--lg {
  margin-top: 20px;
  font-size: clamp(44px, 6.11vw, var(--h1-max, 86px));
  line-height: .92;
  letter-spacing: .005em;
}
.h-display--sm { font-size: clamp(42px, 4.72vw, 68px); }
/* The attorneys board sets a column heading at 40px against a 64px section
   heading; --sm is nearly the full display size and the two competed. */
.h-display--xs { font-size: clamp(26px, 3.1vw, 44px); }

.script {
  font-family: var(--script); color: var(--red);
  font-size: clamp(38px, 4vw, 58px); line-height: 1.1;
}
.script--hero { font-size: clamp(50px, 5.83vw, 84px); line-height: 1.05; color: var(--red-bright); }
.script--light { color: var(--pink); }
.script--tilt { transform: rotate(-2deg); transform-origin: left center; }
.script--tilt3 { transform: rotate(-3deg); transform-origin: left center; }
/* Phones: each cursive line carries its width in em (--em, stamped by the
   page shell), so it scales to fit the column on one line, as the mobile
   boards draw it, and never grows past its usual size. The column is the
   window less the two --pad-x gutters; 100vw also counts a classic scrollbar
   as page width (a desktop window narrowed to phone size), so 26px more
   covers up to 17px of scrollbar and the tilt. */
@media (max-width: 560px) {
  .script { font-size: min(38px, calc((100vw - 2 * var(--pad-x) - 26px) / var(--em, 8))); text-wrap: balance; }
  .script--hero { font-size: min(50px, calc((100vw - 2 * var(--pad-x) - 26px) / var(--em, 8))); }
}

.lede { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border: 0; border-radius: 4px;
  font-family: var(--sans); font-size: 14px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; text-align: center;
}
.btn--red { background: var(--red); color: #FFF; }
.btn--red:hover { background: var(--red-hover); color: #FFF; }
.btn--ink { background: var(--ink); color: #FFF; }
.btn--ink:hover { background: #000; color: #FFF; }
.btn--white { background: #FFF; color: var(--ink); }
.btn--white:hover { background: var(--cream); color: var(--ink); }
.btn--ghost-light { border: 1.5px solid var(--pink); color: #FFF; background: transparent; }
/* The board's outlined button on a dark hero: a cream hairline rather than
   the pink one, matching #F6EFE6 exactly. Used beside the red CTA so the
   phone number reads as an action instead of a label. */
.btn--ghost-cream { border: 1.5px solid var(--cream-2); color: #FFF; background: transparent; }
.btn--ghost-cream:hover { background: rgba(255,255,255,.08); color: #FFF; }
.btn--ghost-light:hover { background: rgba(255,255,255,.08); color: #FFF; }
.btn--block { display: flex; width: 100%; }

/* Pill tab */
.pill {
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  border: 1.5px solid var(--border-2); background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: 14px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.pill[aria-selected="true"] { background: var(--red); border-color: var(--red); color: #FFF; }

/* Round carousel control */
.rnd {
  width: 48px; height: 48px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--border-2); background: transparent;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.rnd--solid { border: 0; background: var(--ink); }
.rnd:disabled { opacity: .4; cursor: default; }

.dots { display: flex; gap: 8px; align-items: center; }
.dots span { width: 6px; height: 6px; border-radius: 3px; background: var(--border-2); }
.dots span[data-on] { width: 28px; background: var(--red); }

/* Pending-content marker. Staging only - hidden once the slot is filled. */

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */
.topbar {
  min-height: 44px; background: var(--ink-deep); color: var(--on-dark);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 var(--pad-x);
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.topbar__l { display: flex; gap: 18px; align-items: center; }
.topbar__sep { color: #6E5A55; }
.topbar__r { display: flex; gap: 28px; align-items: center; }
.topbar__cities { color: var(--on-dark-2); }
.topbar a { color: var(--on-dark); text-decoration: none; display: flex; gap: 8px; align-items: center; }
.topbar a:hover { color: #FFF; }
.topbar a.is-phone { color: #FFF; }
.langswitch { display: flex; border: 1px solid var(--line-dark-2); border-radius: 4px; overflow: hidden; }
.langswitch a {
  height: 30px; padding: 0 12px; display: flex; align-items: center;
  color: #FFF; text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: .08em;
}
.langswitch a[aria-current="page"] { background: #FFF; color: var(--ink); }

/* The in-browser translation (js/translate.js). Google's widget injects a
   banner iframe and pushes the document down with its own `body { top }`,
   which would shove the sticky header off the top of the viewport; the
   switch in the topbar is the control, so the banner comes off. */
#gt-host { display: none; }
.goog-te-banner-frame, .goog-te-balloon-frame, .goog-te-gadget-icon, #goog-gt-tt { display: none !important; }
/* The current widget names that banner with a generated class and only
   `skiptranslate` is stable; left alone it overlays the top of the page
   and swallows clicks on the switch itself. */
iframe.skiptranslate, .skiptranslate > iframe { display: none !important; }
body { top: 0 !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
@media (max-width: 1100px) { .topbar { display: none; } }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.hdr {
  position: relative; z-index: 60;
  min-height: 96px; background: var(--ink);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 0 var(--pad-x); border-bottom: 1px solid var(--line-dark);
}
.hdr__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.hdr__logo img:first-child { width: 62px; height: 62px; }
.hdr__logo img:last-child { width: 190px; height: 44px; object-fit: contain; }

.nav { display: flex; gap: 28px; align-items: center; white-space: nowrap; }
.nav__item { position: relative; }
.nav__link {
  color: #FFF; text-decoration: none; font-size: 14px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  display: flex; gap: 6px; align-items: center;
  height: 40px; background: none; border: 0; padding: 0;
  font-family: var(--sans); cursor: pointer; border-bottom: 2px solid transparent;
}
.nav__link:hover { color: #FFF; }
.nav__link svg { stroke: var(--red-bright); transition: transform .18s; }
.nav__link[aria-expanded="true"] { border-bottom-color: var(--red-bright); }
.nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }

.hdr__cta { flex: none; min-height: 50px; padding: 0 22px; white-space: nowrap; }

.hdr__burger {
  display: none; width: 44px; height: 44px; border: 0; border-radius: 4px;
  background: var(--red); align-items: center; justify-content: center; cursor: pointer;
}
.hdr__es {
  display: none; height: 44px; padding: 0 10px; align-items: center;
  border: 1px solid var(--line-dark-2); border-radius: 4px; color: #FFF;
  text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: .08em;
}
.hdr__mobile { display: none; align-items: center; gap: 8px; }

@media (max-width: 1100px) {
  .hdr { min-height: 68px; padding: 0 16px; }
  .hdr__logo img:first-child { width: 44px; height: 44px; }
  .hdr__logo img:last-child { width: 138px; height: 32px; }
  .nav, .hdr__cta { display: none; }
  .hdr__mobile { display: flex; }
  .hdr__burger { display: flex; }
  .hdr__es { display: flex; }
}

/* The boards stop at 390. Below 360 the header's own contents are wider than
   the screen - logo 194 + gaps 32 + ES 39 + burger 44 + padding 32 = 341 - so
   on a 320px phone the burger was clipped and the page scrolled sideways. The
   wordmark steps down a size and the gaps tighten; the ES control and the
   burger keep their 44px touch targets. Nothing changes at 360 and up. */
@media (max-width: 359px) {
  .hdr { gap: 12px; }
  .hdr__logo { gap: 8px; }
  .hdr__logo img:last-child { width: 112px; height: 26px; }
}

/* 280 is the Galaxy Fold's cover screen, and the header still needed 283px
   there - the burger clipped by 3px and the page scrolled sideways. One more
   step down on the wordmark takes the floor to about 263. */
@media (max-width: 289px) {
  .hdr { gap: 8px; padding: 0 12px; }
  .hdr__logo img:last-child { width: 92px; height: 21px; }
}

/* Mega menu ----------------------------------------------------------------- */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--cream); padding: 44px var(--pad-x) 48px;
  box-shadow: 0 30px 50px -30px rgba(26,18,19,.5);
  display: none; z-index: 70;
}
.mega[data-open] { display: block; }
.mega__grid {
  max-width: var(--wrap); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr) 360px; gap: 56px;
}
.mega__col { display: flex; flex-direction: column; gap: 18px; }
.mega__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 14px; border-bottom: 2px solid var(--ink);
  color: var(--ink); text-decoration: none;
}
.mega__head span:first-child { font-family: var(--cond); font-size: 32px; font-weight: 700; text-transform: uppercase; }
.mega__hub {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--red);
}
.mega__cols { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px 30px; }
.mega__group { display: flex; flex-direction: column; gap: 10px; }
/* Doubled to (0,2,0): a broad `.block p` rule out-ranks a single class
   and was deciding this element size. Same pattern as site.css. */
.mega__label.mega__label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mega__group a { font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none; }
.mega__group a:hover { color: var(--red); text-decoration: underline; }

.mega__promo {
  position: relative; background: var(--oxblood); border-radius: 8px;
  padding: 28px 28px 26px; overflow: hidden;
  display: flex; flex-direction: column; gap: 12px; color: #FFF;
}
.mega__promo > * { position: relative; }
.mega__promo .gallo { position: absolute; right: -50px; bottom: -60px; width: 240px; height: 240px; opacity: .5; }
/* Doubled to (0,2,0): a broad `.block p` rule out-ranks a single class
   and was deciding this element size. Same pattern as site.css. */
.mega__promo-h.mega__promo-h {
  margin: 0; font-family: var(--cond); font-size: 34px; font-weight: 700;
  line-height: 1; text-transform: uppercase;
}
.mega__promo p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--on-dark-3); }
.mega__links {
  margin-top: 10px; padding-top: 14px; border-top: 1px solid #6E3033;
  display: flex; flex-direction: column; gap: 8px; font-size: 15px;
}
.mega__links a { color: #FFF; font-weight: 600; }

/* Simple dropdown (Results, About Us) */
.drop {
  position: absolute; left: 0; top: calc(100% + 28px); width: 330px;
  background: var(--cream); border-radius: 0 0 8px 8px;
  box-shadow: 0 24px 40px -24px rgba(26,18,19,.5);
  padding: 10px; display: none; flex-direction: column; z-index: 70;
}
.drop[data-open] { display: flex; }
.drop a {
  padding: 16px 18px; border-radius: 4px; display: flex; flex-direction: column; gap: 2px;
  color: var(--ink); text-decoration: none;
}
.drop a:hover { background: var(--cream-2); }
.drop a > span:first-child { font-size: 17px; font-weight: 700; }
.drop a > span + span { font-size: 14px; color: var(--muted); }

/* Mobile drawer ------------------------------------------------------------- */
.drawer { position: fixed; inset: 0; z-index: 120; display: none; }
.drawer[data-open] { display: block; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(18,12,13,.6); }
.drawer__panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(92vw, 420px);
  background: var(--ink); color: #FFF; overflow-y: auto;
  display: flex; flex-direction: column;
}
.drawer__top {
  position: sticky; top: 0; background: var(--ink); z-index: 2;
  min-height: 68px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; border-bottom: 1px solid var(--line-dark);
}
.drawer__close {
  width: 44px; height: 44px; border: 0; border-radius: 4px; background: var(--red);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.drawer__body { padding: 8px 16px 32px; display: flex; flex-direction: column; }
.drawer__row {
  min-height: 56px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0; border: 0; border-bottom: 1px solid var(--line-dark);
  color: #FFF; text-decoration: none; background: none;
  font-family: var(--sans); font-size: 15px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; width: 100%; cursor: pointer; text-align: left;
}
.drawer__row svg { stroke: var(--pink); flex: none; transition: transform .18s; }
.drawer__row[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer__sub { display: none; padding: 6px 0 14px; flex-direction: column; gap: 2px; }
.drawer__sub[data-open] { display: flex; }
.drawer__sub a {
  min-height: 44px; display: flex; align-items: center;
  color: var(--on-dark); text-decoration: none; font-size: 16px; font-weight: 600;
  padding-left: 12px; border-left: 2px solid var(--line-dark-2);
}
.drawer__sub a:hover { color: #FFF; }
.drawer__sub span.is-plain {
  min-height: 44px; display: flex; align-items: center;
  color: var(--on-dark-2); font-size: 16px; font-weight: 600;
  padding-left: 12px; border-left: 2px solid var(--line-dark-2);
}
.drawer__label {
  margin-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--on-dark-2);
}
.drawer__foot { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.drawer__call {
  font-family: var(--cond); font-size: 34px; font-weight: 700; color: #FFF; text-decoration: none;
}

/* Sticky mobile action bar -------------------------------------------------- */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;
  height: var(--sticky-h); background: var(--ink); border-top: 1px solid var(--line-dark);
  display: none; grid-template-columns: repeat(3, minmax(0,1fr));
  box-shadow: 0 -10px 30px -10px rgba(0,0,0,.5);
}
.stickybar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: #FFF; text-decoration: none; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.stickybar a:nth-child(2) { border-left: 1px solid var(--line-dark); border-right: 1px solid var(--line-dark); }
.stickybar a:last-child { background: var(--red); }
@media (max-width: 900px) { .stickybar { display: grid; } }

/* The Intaker chat (live domain only) sits 10px off the bottom of the window
   by default, which puts it over the sticky bar. Wherever the bar shows, the
   chat starts above it instead. #icw is the widget's own container. */
@media (max-width: 900px) { #icw { bottom: calc(var(--sticky-h) + 10px) !important; } }

/* --------------------------------------------------------------------------
   In the media strip (shared component)
   -------------------------------------------------------------------------- */
.mediastrip {
  background: var(--cream); border-bottom: 1px solid var(--border);
  padding: 0 var(--pad-x);
  display: flex; align-items: center; gap: 48px; min-height: 128px;
}
.mediastrip__title { flex: none; display: flex; flex-direction: column; gap: 2px; }
.mediastrip__title b {
  font-family: var(--cond); font-size: 24px; font-weight: 700; line-height: 1;
  letter-spacing: .04em; text-transform: uppercase; color: var(--red);
}
.mediastrip__title i { font-family: var(--script); font-size: 24px; line-height: 1; color: var(--oxblood); font-style: normal; }
.mediastrip__rule { width: 1px; height: 56px; flex: none; background: var(--border); }

/* The logos run as a continuous marquee. The track holds two identical
   copies of the list, so translating it by exactly half its width loops
   seamlessly. --marquee-s scales with how many logos there are. */
.mediastrip__viewport {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}
.mediastrip__track {
  display: flex; align-items: center; width: max-content;
  animation: marquee var(--marquee-s, 42s) linear infinite;
}
.mediastrip__track:hover,
.mediastrip__track:focus-within { animation-play-state: paused; }
.mediastrip__group {
  display: flex; align-items: center; gap: 56px; padding-right: 56px; flex: none;
}
.mediastrip__group img { object-fit: contain; flex: none; width: var(--w); height: var(--h); }

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .mediastrip__track { animation: none; }
  .mediastrip__viewport { overflow-x: auto; scrollbar-width: none; }
  .mediastrip__viewport::-webkit-scrollbar { display: none; }
}

@media (max-width: 1100px) {
  .mediastrip {
    min-height: 0; flex-direction: column; align-items: flex-start; gap: 10px;
    padding: 18px 16px;
  }
  .mediastrip__title { flex-direction: row; align-items: baseline; gap: 10px; }
  .mediastrip__title b { font-size: 17px; letter-spacing: .06em; }
  .mediastrip__title i { font-size: 18px; }
  .mediastrip__rule { display: none; }
  .mediastrip__viewport {
    width: 100%; height: 44px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent 100%);
  }
  .mediastrip__group { gap: 26px; padding-right: 26px; }
  .mediastrip__group img { width: var(--mw); height: var(--mh); }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.ftr { background: var(--ink-deep); color: var(--on-dark); padding: 80px var(--pad-x) 0; }
.ftr__grid {
  max-width: var(--wrap); margin-inline: auto;
  display: grid; grid-template-columns: 360px repeat(3, minmax(0,1fr)); gap: 48px;
  padding-bottom: 60px; border-bottom: 1px solid var(--line-dark);
}
.ftr__brand { display: flex; flex-direction: column; gap: 18px; }
.ftr__brand .lockup { display: flex; align-items: center; gap: 12px; }
.ftr__brand .lockup img:first-child { width: 60px; height: 60px; }
.ftr__brand .lockup img:last-child { width: 190px; height: 44px; object-fit: contain; }
.ftr__brand p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--on-dark-2); }
.ftr__col { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
/* A styled paragraph, not a heading: the board draws these as plain divs,
   and a footer column label is navigation, not page structure. */
.ftr__h { margin: 0; font-family: var(--cond); font-size: 22px; font-weight: 700; text-transform: uppercase; color: #FFF; }
.ftr__col a { color: var(--on-dark-2); text-decoration: none; }
.ftr__col a:hover { color: #FFF; }
.ftr__col a.is-all { color: var(--pink); font-weight: 600; }
.ftr__col span { color: var(--on-dark-2); line-height: 1.5; }
.ftr__col a.is-phone { color: #FFF; font-weight: 600; }

.socials { display: flex; gap: 10px; }
.socials a {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line-dark-2);
  display: flex; align-items: center; justify-content: center; color: #FFF;
}
.socials a:hover { border-color: var(--pink); color: #FFF; }

.ftr__bar {
  max-width: var(--wrap); margin-inline: auto;
  min-height: 72px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--footer-muted); padding: 16px 0;
}
.ftr__legal { display: flex; gap: 24px; flex-wrap: wrap; }
.ftr__legal a { color: var(--footer-muted); text-decoration: none; }
/* A 44px tap area (build plan: touch targets) with the bar's layout
   unchanged: the padding is taken back by an equal negative margin. */
.ftr__legal a { padding-block: 11.5px; margin-block: -11.5px; }
/* Phone numbers set inline in running text. Vertical padding on an inline
   element enlarges what a finger can hit without moving any text. */
main a[href^="tel:"]:not([class]) { padding-block: 15px; }
.ftr__legal a:hover { color: #FFF; }
/* The agency credit links out, so it needs the footer's own link colour -
   left to the global red it sat at 3.31:1 on the dark bar. Underlined so it
   still reads as a link without relying on colour alone. */
.ftr__credit a { color: var(--footer-muted); text-decoration: underline; text-underline-offset: 3px; }
.ftr__credit a:hover { color: #FFF; }

@media (max-width: 1100px) {
  .ftr__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px; }
  .ftr__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ftr { padding: 36px 16px 0; }
  .ftr__grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 32px; }
  .ftr__brand .lockup img:first-child { width: 44px; height: 44px; }
  .ftr__brand .lockup img:last-child { width: 138px; height: 32px; }
  .ftr__bar { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---------------------------------------------------------------------------
   Mobile sizing floors.

   Build plan section 5 sets a 44px minimum for touch target and 16px for
   form inputs. The type scale is a clamp() between each board's desktop and
   mobile value, which lands the small tracked labels at 12px on a 390 screen;
   the mobile boards set them at 13px, so that is the floor.

   Each selector is doubled so these win wherever they sit in the load order.
   The page stylesheets come after this file, and several of them set the same
   properties at the same specificity, so source order alone would decide it.
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .eyebrow.eyebrow,
  .person__role.person__role,
  .postindex__h.postindex__h,
  .legal__indexh.legal__indexh,
  .blogaside__h.blogaside__h,
  .officecard__h.officecard__h,
  .thanks__stepsh.thanks__stepsh,
  .postauthor__h.postauthor__h,
  .postcta__eyebrow.postcta__eyebrow,
  .pcard__cat.pcard__cat,
  .proof__label.proof__label,
  .stepsrow__ph.stepsrow__ph { font-size: 13px; }

  /* A list of links is navigation, so it takes the 44px floor. An inline link
     inside running text is not a target and is left alone. */
  .help__services.help__services a,
  .help__services.help__services .is-plain,
  .scard__links.scard__links a,
  .scard__links.scard__links .is-plain,
  .relinks.relinks a,
  .relinks.relinks .is-plain,
  .communities__list.communities__list a,
  .communities__list.communities__list span,
  .blogaside__links.blogaside__links a,
  .eslist.eslist a,
  .uscis__links.uscis__links a,
  .checkcase.checkcase a,
  .urgent__alts.urgent__alts a,
  .office__dir.office__dir,
  .officecard__dir.officecard__dir,
  .reviews__acts.reviews__acts a.is-text,
  .socials-inline.socials-inline,
  .postmeta__who.postmeta__who a,
  .crumb.crumb a,
  .postindex.postindex a,
  .legal__index.legal__index a,
  .post__keep.post__keep li a,
  .caserev__chan.caserev__chan a,
  .isvc__ask.isvc__ask,
  .isvc__more.isvc__more,
  .ftr__col a { min-height: 44px; }

  /* The floor only helps if the box fills it. */
  .help__services.help__services a,
  .help__services.help__services .is-plain,
  .scard__links.scard__links a,
  .scard__links.scard__links .is-plain,
  .crumb a,
  .postmeta__who a,
  .post__keep li a,
  .caserev__chan a { display: inline-flex; align-items: center; }

  /* A label wrapping a radio or a checkbox is the tap target. */
  .intake fieldset label,
  .tcard__lang label,
  .consult__lang label,
  .intake__lang label {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .crumb { gap: 4px 10px; }
}

/* ---------------------------------------------------------------------------
   Section head. Shared by the immigration and personal injury templates, so it
   belongs here: it used to live in imm.css, which the twelve personal injury
   service pages never load, leaving the component completely unstyled there.
   --------------------------------------------------------------------------- */
.sechead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(22px, 2.8vw, 40px);
  flex-wrap: wrap;
}
/* The boards set the standfirst beside the heading, not under it. Both
   children were auto width, so the heading block filled the row and pushed
   the note onto a line of its own on every section that has one. Giving
   each a basis keeps them paired while there is room, and the existing wrap
   still stacks them when there is not. */
.sechead > :first-child { flex: 1 1 520px; min-width: 0; }
.sechead__note { margin: 0; flex: 0 1 420px; max-width: 420px; font-size: 16px; line-height: 1.6; color: var(--body); }
.sechead__rating { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--body); }
.sechead__rating strong { font-size: 20px; }

@media (max-width: 760px) {
  .sechead { align-items: flex-start; }
}