/* ==========================================================================
   American Disability Law — prototype stylesheet
   Brand colours extracted from the live site's theme CSS (2026-08-08):
     navy #044475 · red #d52027 · gold #f1b144
   ========================================================================== */

:root{
  /* Brand */
  --navy:#044475;
  --navy-dk:#03325a;
  --navy-lt:#0a5b96;
  --red:#d52027;
  --red-dk:#b01920;
  --gold:#f1b144;

  /* Neutrals */
  --ink:#1a1d21;
  --body:#3b4149;
  --muted:#646b74;
  --line:#dfe3e8;
  --panel:#f4f6f8;
  --panel-2:#eaeef2;
  --white:#fff;

  /* Type */
  --font-head:"Cabin Condensed","Oswald","Arial Narrow",system-ui,sans-serif;
  --font-body:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Space */
  --wrap:1160px;
  --gap:clamp(1.25rem,3vw,2.5rem);
  --sec:clamp(3rem,7vw,5.5rem);
  --radius:6px;
  --shadow:0 1px 3px rgba(4,68,117,.09),0 8px 24px rgba(4,68,117,.07);
}

/* --- Reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg{max-width:100%;display:block}
/* The build wraps every <img> with a webp sibling in a <picture>. display:contents
   makes that wrapper generate no box, so the <img> is laid out as a direct child
   of whatever contained it before — .split img, .post-card__media img and the
   sticky .split--top img all keep behaving exactly as they did. */
picture{display:contents}
/* display:contents promotes picture's CHILDREN to items of the real container,
   and <source> computes to display:block here — without this it becomes a
   phantom grid/flex item and pushes the image into the next cell. */
picture > source{display:none}
iframe,video{max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  font-family:var(--font-body);
  font-size:clamp(1rem,.97rem + .15vw,1.0625rem);
  line-height:1.65;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

/* --- Accessibility -------------------------------------------------------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--navy);color:#fff;padding:.75rem 1.25rem;border-radius:0 0 var(--radius) 0;
  font-weight:700;text-decoration:none;
}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:2px}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --- Layout --------------------------------------------------------------- */
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.section{padding-block:var(--sec)}
.section--panel{background:var(--panel)}
.section--navy{background:var(--navy);color:#dce9f3}
.section--navy h2,.section--navy h3{color:#fff}

/* --- Type ----------------------------------------------------------------- */
h1,h2,h3,h4,.h-alt{
  font-family:var(--font-head);
  color:var(--navy);
  line-height:1.12;
  letter-spacing:-.005em;
  font-weight:700;
  text-wrap:balance;
}
h1{font-size:clamp(2.1rem,1.4rem + 3.3vw,3.5rem);margin-bottom:.6em}
h2{font-size:clamp(1.6rem,1.2rem + 1.9vw,2.4rem);margin-bottom:.55em}
h3{font-size:clamp(1.15rem,1.05rem + .6vw,1.4rem);margin-bottom:.4em}
p{margin-bottom:1.1em;max-width:70ch}
p:last-child{margin-bottom:0}
a{color:var(--navy-lt);text-decoration-thickness:1px;text-underline-offset:2px}
/* The firm email is a 32-character unbreakable token; on the narrowest phones
   it forced the whole page wider than the viewport wherever it sat outside a
   .dl. `anywhere` breaks it only when it would otherwise overflow. */
a[href^="mailto:"]{overflow-wrap:anywhere}
a:hover{color:var(--red)}
strong{color:var(--ink);font-weight:700}

.lede{font-size:clamp(1.1rem,1rem + .5vw,1.3rem);color:var(--body);line-height:1.55}
.eyebrow{
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:.12em;
  font-size:.85rem;font-weight:700;color:var(--red);margin-bottom:.6rem;
}
.section--navy .eyebrow{color:var(--gold)}

/* --- Buttons -------------------------------------------------------------- */
.btn{
  display:inline-block;font-family:var(--font-head);font-weight:700;
  font-size:1.05rem;letter-spacing:.02em;text-transform:uppercase;
  padding:.85rem 1.75rem;border-radius:var(--radius);border:2px solid transparent;
  text-decoration:none;transition:background-color .15s,color .15s,border-color .15s;
}
.btn--primary{background:var(--red);color:#fff}
.btn--primary:hover{background:var(--red-dk);color:#fff}
.btn--ghost{border-color:currentColor;color:var(--navy);background:transparent}
.btn--ghost:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.section--navy .btn--ghost{color:#fff}
.section--navy .btn--ghost:hover{background:#fff;color:var(--navy)}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.75rem}

/* --- Header (single ribbon; brand left, nav centre, phone pinned top-right) - */
.masthead{
  border-top:4px solid var(--navy);
  border-bottom:1px solid var(--line);
  background:#fff;position:sticky;top:0;z-index:50;
  box-shadow:0 6px 18px rgba(4,68,117,.06);
}
.masthead .wrap{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;   /* brand | nav | phone */
  grid-template-areas:"brand nav cta";
  align-items:center;
  column-gap:2rem;row-gap:.8rem;
  padding-block:.95rem;
}

/* Brand */
.brand{grid-area:brand;display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand img{width:50px;height:auto}
.brand-name{
  font-family:var(--font-head);font-weight:700;color:var(--navy);
  font-size:1.28rem;line-height:1.05;letter-spacing:.01em;white-space:nowrap;
}
/* Second line of the lockup: the former firm name (site.json -> tagline).
   Hero mockup round 4, option B — tracked caps lifted out of grey into the
   navy so it reads as identity rather than as a caption. Tracking is tighter
   than the old practice-and-city line because this string is far longer. */
.brand-name span{
  display:block;font-size:.635rem;letter-spacing:.07em;margin-top:.2rem;
  text-transform:uppercase;color:var(--navy);font-weight:700;white-space:nowrap;
}

/* Nav — can shrink and wrap internally so it never displaces the phone */
.nav{grid-area:nav;min-width:0;display:flex;justify-content:center}
.nav ul{display:flex;flex-wrap:wrap;justify-content:center;
  gap:.2rem 1.25rem;align-items:center;list-style:none;padding:0;margin:0}
.nav a{
  font-family:var(--font-head);font-weight:700;font-size:1rem;letter-spacing:.02em;
  color:var(--navy);text-decoration:none;padding:.45rem 0;
  border-bottom:3px solid transparent;white-space:nowrap;
}
.nav a:hover{color:var(--red);border-bottom-color:var(--red)}
.nav a[aria-current="page"]{color:var(--red);border-bottom-color:var(--red)}

/* Phone/CTA block — placed top right by the masthead grid; layout details
   live with the rest of the header-action styles further down. */
.header-cta{grid-area:cta;justify-self:end;line-height:1.2}
.header-phone{
  font-family:var(--font-head);font-weight:700;
  color:var(--red);text-decoration:none;
  letter-spacing:.01em;white-space:nowrap;
}
.header-phone:hover{color:var(--red-dk);text-decoration:underline}
.header-note{display:block;font-size:.72rem;color:var(--muted);white-space:nowrap;
  text-transform:uppercase;letter-spacing:.07em;font-weight:600;margin-top:.15rem}

/* Below ~1040px the nav drops to its own row; brand and phone stay on the top line */
@media (max-width:1040px){
  .masthead .wrap{
    grid-template-columns:auto auto;
    grid-template-areas:"brand cta" "nav nav";
    justify-content:space-between;
  }
  .nav,.nav ul{justify-content:flex-start}
}

/* --- Mobile navigation ----------------------------------------------------
   One row, always: brand left, phone and menu right. The old mobile header
   stacked brand / phone + CTA / language link into three rows — 168px of
   sticky chrome — and the nowrap tagline clipped under the menu button.
   The phone number lives in the bottom call bar on phones, so the header
   only needs a tap target, not a second rendering of the number. */
.nav-toggle{
  display:none;grid-area:toggle;align-items:center;gap:.5rem;
  background:none;border:1.5px solid var(--line);border-radius:var(--radius);
  padding:.5rem .8rem;cursor:pointer;font-family:var(--font-head);
  font-weight:700;font-size:.95rem;color:var(--navy);
  text-transform:uppercase;letter-spacing:.05em;
}
.nav-toggle:hover{border-color:var(--navy-lt)}
.nav-toggle__bars{display:block;width:18px;height:2px;background:currentColor;position:relative}
.nav-toggle__bars::before,.nav-toggle__bars::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;
  transition:transform .18s ease,top .18s ease;
}
.nav-toggle__bars::before{top:-6px}
.nav-toggle__bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{top:0;transform:rotate(-45deg)}

/* Hidden on desktop: the language link inside the mobile menu. */
.nav__lang{display:none}

@media (max-width:780px){
  .masthead .wrap{
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:"brand cta toggle" "nav nav nav";
    column-gap:.7rem;row-gap:0;
    padding-block:.55rem;
  }
  .brand{gap:.55rem;min-width:0}
  .brand img{width:40px}
  .brand-name{font-size:1.02rem;white-space:normal;line-height:1.1}
  /* The former firm name is exactly what a returning client on a phone needs
     to see, so it stays visible here — unlike the practice-and-city line this
     replaced, which used to be hidden. It is allowed to wrap; the non-breaking
     space in the token keeps STEPHANIE LAKE together on one line. */
  .brand-name span{
    display:block;font-size:.56rem;letter-spacing:.05em;
    white-space:normal;line-height:1.25;margin-top:.15rem;
  }

  .nav-toggle{display:inline-flex}
  .nav{display:none}
  .nav.is-open{display:block}
  .nav ul{flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid var(--line);margin-top:.55rem}
  .nav li{border-bottom:1px solid var(--line)}
  .nav a{display:block;padding:.85rem .2rem;font-size:1.05rem}
  .nav a::after{display:none}
  .nav__lang{display:block}
}
@media (max-width:560px){
  /* Icon-only phone and menu: the full number is always visible in the
     bottom call bar, and a wrapped number in the header is worse than none. */
  .nav-toggle__label{display:none}
  .nav-toggle{padding:.62rem .68rem}
  .header-note{font-size:.64rem}
}

/* --- Sticky tap-to-call bar (phones only) ---------------------------------
   The primary conversion for this firm is a phone call, and callers skew
   older. Always-visible, thumb-reachable, safe-area aware. */
.callbar{display:none}
@media (max-width:780px){
  .callbar{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--line);
    padding-bottom:env(safe-area-inset-bottom,0);
    box-shadow:0 -4px 16px rgba(4,68,117,.16);
  }
  .callbar a{
    display:flex;align-items:center;justify-content:center;gap:.45rem;
    padding:.95rem .4rem;text-decoration:none;font-family:var(--font-head);
    font-weight:700;font-size:.98rem;letter-spacing:.02em;min-height:56px;
    white-space:nowrap;
  }
  .callbar__call{background:var(--red);color:#fff}
  .callbar__form{background:var(--navy);color:#fff}
  .callbar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
  /* keep the footer clear of the bar */
  body{padding-bottom:64px}
  .migbtn{bottom:76px}
}

/* --- Hero ----------------------------------------------------------------- */
.hero{position:relative;background:var(--navy);color:#e3edf5;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:0;
  /* Kept dense behind the copy for contrast, but cleared on the right so the
     attorney's face is actually visible — it is the strongest trust asset here. */
  background:linear-gradient(100deg,
    rgba(3,40,70,.94) 0%,
    rgba(3,48,82,.88) 34%,
    rgba(4,68,117,.55) 58%,
    rgba(4,68,117,.22) 100%);
}
@media (max-width:820px){
  /* On phones the copy overlays the whole image, so the veil stays even. */
  .hero::after{background:linear-gradient(180deg,rgba(3,40,70,.90),rgba(4,68,117,.86))}
}
.hero img.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;
}
/* ---------------------------------------------------------------------------
   Hero "E" — homepage only. Portrait pinned to the right of the viewport, its
   left edge masked into transparency so it dissolves into the navy instead of
   ending on a hard seam. The photo is a background on .hero-portrait, not an
   <img>, so the mask applies to the element itself.

   The grid reserves a 40% column for the portrait, but the portrait is
   positioned against the SECTION and bleeds to the viewport edge — otherwise
   it would stop at the content column and read as an inset picture rather
   than a hero. Below 860px it stacks: photo on top, copy underneath.
   --------------------------------------------------------------------------- */
.hero--sl{display:block}
.hero--sl::after{display:none !important}
.hero--sl .hero-inner{
  position:static;display:grid;grid-template-columns:1fr 40%;
  align-items:center;gap:0;max-width:var(--wrap,1200px);margin:0 auto;
  padding:0 1.25rem;min-height:520px;
}
.hero--sl .hero-copy{
  position:relative;z-index:2;
  padding-block:clamp(3rem,7vw,5rem);padding-right:2.5rem;
}
/* The portrait is the homepage LCP element. Because it is a background rather
   than an <img>, the preload scanner cannot find it — index.json preloads it
   from <head>, and those preload links must keep naming the same files and
   breakpoint as the rules below or the browser downloads the photo twice. */
.hero--sl .hero-portrait{
  position:absolute;top:0;bottom:0;right:0;width:min(48vw,780px);
  background:url("../img/2019-0405-American-Disability-Law-0323-F-website.jpg")
             56% 22%/cover no-repeat;
  background-image:image-set(
    url("../img/2019-0405-American-Disability-Law-0323-F-website.webp") type("image/webp"),
    url("../img/2019-0405-American-Disability-Law-0323-F-website.jpg") type("image/jpeg"));
}
.hero--fade .hero-portrait{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 100%);
}
@media (max-width:860px){
  .hero--sl .hero-inner{grid-template-columns:1fr;min-height:0}
  .hero--sl .hero-portrait{
    position:relative;width:auto;height:300px;order:-1;margin:0 -1.25rem;
    background-position:56% 18%;
    /* A 300px band never needs the 1600px file — phones get a 900px crop. */
    background-image:url("../img/2019-0405-American-Disability-Law-0323-F-website-900.jpg");
    background-image:image-set(
      url("../img/2019-0405-American-Disability-Law-0323-F-website-900.webp") type("image/webp"),
      url("../img/2019-0405-American-Disability-Law-0323-F-website-900.jpg") type("image/jpeg"));
  }
  .hero--sl .hero-copy{padding-right:0}
}

.hero .wrap{position:relative;z-index:2;padding-block:clamp(3.5rem,9vw,7rem)}
.hero h1{color:#fff;max-width:18ch}
.hero p{color:#d5e5f1;max-width:52ch}
.hero .eyebrow{color:var(--gold)}

/* --- Trust bar ------------------------------------------------------------ */
.trust{background:var(--panel-2);border-block:1px solid var(--line)}
.trust ul{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  padding-block:1.6rem;list-style:none;margin:0}
.trust li{display:flex;gap:.7rem;align-items:flex-start;font-size:.98rem}
.trust b{display:block;font-family:var(--font-head);color:var(--navy);font-size:1.08rem}
.tick{flex:0 0 auto;width:22px;height:22px;margin-top:2px;fill:none;
  stroke:var(--red);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* --- Cards / grids -------------------------------------------------------- */
.grid{display:grid;gap:var(--gap)}
/* min(...,100%) so the column minimum can never exceed the container —
   a bare 320px minimum forced 320-wide columns into the 300px wrap on the
   narrowest phones and pushed the whole page sideways. */
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.card{
  background:#fff;border:1px solid var(--line);border-top:4px solid var(--navy);
  border-radius:var(--radius);padding:1.6rem 1.5rem;box-shadow:var(--shadow);
}
.card h3{margin-bottom:.5rem}
.card--accent{border-top-color:var(--red)}
.card--gold{border-top-color:var(--gold)}

/* --- Prose lists ---------------------------------------------------------- */
.ticks{list-style:none;padding:0;margin:0 0 1.2rem}
.ticks li{position:relative;padding-left:1.7rem;margin-bottom:.6rem}
.ticks li::before{
  content:"";position:absolute;left:0;top:.55em;width:.7rem;height:.7rem;
  background:var(--red);border-radius:2px;
}
.section--navy .ticks li::before{background:var(--gold)}

/* --- Split media ---------------------------------------------------------- */
.split{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:820px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split--narrow{grid-template-columns:minmax(0,320px) 1fr}
}
/* A portrait beside a much taller text column must align to the TOP, or it
   floats in the middle of a void (the Our Attorneys bug). */
.split--top{align-items:start}
.split--wide-gap{--gap:clamp(1.5rem,4vw,3.5rem)}
.split--top img{position:sticky;top:8.5rem}
@media (max-width:819px){.split--top img{position:static}}
.split img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;height:auto}

/* --- Definition / contact list -------------------------------------------- */
.dl{margin:0}
.dl div{display:flex;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
.dl div:last-child{border-bottom:0}
.dl dt,.dl dd{min-width:0}
/* `anywhere`, not `break-word`: only `anywhere` reduces min-content width, which
   is what lets a long email shrink inside a flex item. */
.dl dd,.dl dd a{overflow-wrap:anywhere}
.dl dt{flex:0 0 8.5rem;font-family:var(--font-head);font-weight:700;color:var(--navy)}
.dl dd{margin:0}

/* --- Form ----------------------------------------------------------------- */
.form{display:grid;gap:1.1rem}
.field label{display:block;font-weight:600;color:var(--ink);margin-bottom:.35rem}
.field input,.field textarea,.field select{
  width:100%;padding:.7rem .85rem;border:1px solid #c3cbd4;border-radius:var(--radius);
  background:#fff;transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--navy-lt);box-shadow:0 0 0 3px rgba(10,91,150,.15);outline:none;
}
.req{color:var(--red)}
.hint{font-size:.88rem;color:var(--muted);margin-top:.3rem}
.field label{font-size:.95rem;line-height:1.35}
/* Paired fields (first/last name) sit side by side, stacking on narrow screens. */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:520px){.field-row{grid-template-columns:1fr}}

/* --- Map embed ------------------------------------------------------------ */
.map{
  margin-top:1.25rem;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);
  aspect-ratio:4/3;background:var(--panel-2);
}
.map iframe{display:block;width:100%;height:100%;border:0}
@media (min-width:900px){.map{aspect-ratio:16/10}}

/* --- Notices -------------------------------------------------------------- */
.notice{
  background:#fff7e6;border:1px solid #f0d9a8;border-left:4px solid var(--gold);
  padding:1rem 1.2rem;border-radius:0 var(--radius) var(--radius) 0;font-size:.95rem;
}

/* --- Footer --------------------------------------------------------------- */
.footer{background:var(--navy-dk);color:#b9cfe0;padding-block:var(--sec) 2rem;font-size:.95rem}
.footer h3{color:#fff;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.9rem}
.footer a{color:#dce9f3;text-decoration:none}
.footer a:hover{color:var(--gold);text-decoration:underline}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:.5rem}
.footer img{width:64px;margin-bottom:1rem}
.footer-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.legal{border-top:1px solid rgba(255,255,255,.15);margin-top:2.5rem;padding-top:1.5rem;
  font-size:.86rem;color:#8fabc4}
.legal p{max-width:none}

/* --- Print ---------------------------------------------------------------- */
@media print{
  .nav,.hero img,.btn{display:none}
  body{color:#000;font-size:11pt}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt}
}

/* ==========================================================================
   Blog — index, posts, video
   ========================================================================== */

.crumb{font-size:.9rem;margin-bottom:1.5rem;color:var(--muted)}
.crumb a{color:var(--navy-lt)}

/* --- Post layout ---------------------------------------------------------- */
.post{max-width:74ch}
.post h1{margin-bottom:.35em}
.byline{font-size:.95rem;color:var(--muted);margin-bottom:1.75rem}
.byline a{color:var(--navy-lt);font-weight:600}
.post-hero{width:100%;height:auto;border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:2.5rem}

.post h2{margin-top:2.4em;padding-top:.2em}
.post h3{margin-top:1.9em;color:var(--ink);font-family:var(--font-body);
  font-size:1.12rem;font-weight:700;letter-spacing:0}
.post p,.post li{max-width:none}
.post ul,.post ol{margin:0 0 1.2em;padding-left:1.35rem}
.post li{margin-bottom:.5rem}
.post ul li::marker{color:var(--red)}
.post ol li::marker{color:var(--navy);font-weight:700}
.post blockquote p:last-child{margin-bottom:0}
.post strong{color:var(--ink)}

/* --- Tables --------------------------------------------------------------- */
.table-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;margin:2em 0;
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);background:#fff;
}
.table-wrap table,
.post table{
  border-collapse:collapse;width:100%;min-width:34rem;
  font-size:.96rem;line-height:1.55;
}
.table-wrap th,.table-wrap td,
.post th,.post td{
  padding:.85rem 1rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);
}
.table-wrap thead th,
.post thead th{
  background:var(--navy);color:#fff;
  font-family:var(--font-head);font-weight:700;
  font-size:1.02rem;letter-spacing:.03em;
  border-bottom:0;position:sticky;top:0;
}
.table-wrap tbody tr:nth-child(even),
.post tbody tr:nth-child(even){background:var(--panel)}
.table-wrap tbody tr:hover,
.post tbody tr:hover{background:#eef4f9}
.table-wrap tbody td:first-child,
.post tbody td:first-child{
  font-weight:600;color:var(--ink);
  border-left:3px solid transparent;
}
.table-wrap tbody tr:hover td:first-child,
.post tbody tr:hover td:first-child{border-left-color:var(--red)}
.table-wrap tr:last-child td,
.post tr:last-child td{border-bottom:0}
.table-wrap td strong,.post td strong{color:var(--navy)}

/* Two-column comparison tables read better with a fixed first column */
.table-wrap table.compare th:first-child,
.table-wrap table.compare td:first-child{width:38%}

@media (max-width:640px){
  .table-wrap::after{
    content:"Scroll to see more \2192";
    display:block;padding:.5rem 1rem;font-size:.78rem;color:var(--muted);
    background:var(--panel);border-top:1px solid var(--line);
    text-transform:uppercase;letter-spacing:.06em;position:sticky;left:0;
  }
}

/* --- In-post CTA ---------------------------------------------------------- */
.cta-box{
  margin-top:3rem;padding:1.9rem;background:var(--navy);color:#dce9f3;
  border-radius:var(--radius);
}
.cta-box h2{color:#fff;margin-top:0;font-size:1.5rem}
.cta-box p{margin-bottom:0}
/* .post strong pins a dark ink colour, which is unreadable on the navy
   CTA panel. Restore contrast for bolded text inside the box. */
.cta-box strong{color:#fff}
.cta-box .btn--ghost{color:#fff}
.cta-box .btn--ghost:hover{background:#fff;color:var(--navy)}

/* --- Blog index ----------------------------------------------------------- */
.post-list{display:grid;gap:1.75rem}
.post-card{
  display:grid;gap:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
}
/* Ten identical full-width rows read as a list, not a library. Cards now sit
   in a responsive grid; the first one spans and stays horizontal as a feature. */
.post-grid{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media (min-width:700px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.post-grid{grid-template-columns:repeat(3,1fr)}}
.post-card--feature{grid-column:1/-1}
@media (min-width:700px){
  .post-card--feature{grid-template-columns:minmax(0,46%) 1fr}
  .post-card--feature .post-card__media img{min-height:300px}
  .post-card--feature h2{font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem)}
  .post-card--feature .post-card__body{padding:2rem 2.2rem}
}
.post-card:hover{border-color:var(--navy-lt)}
.post-card__media{display:block;overflow:hidden;background:var(--panel-2)}
.post-card__media img{width:100%;height:100%;min-height:190px;object-fit:cover;
  transition:transform .3s ease}
.post-card:hover .post-card__media img{transform:scale(1.03)}
.post-card__body{padding:1.5rem 1.6rem}
.post-card__date{font-family:var(--font-head);text-transform:uppercase;
  letter-spacing:.1em;font-size:.8rem;color:var(--red);margin-bottom:.5rem}
.post-card h2{font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem);margin-bottom:.5rem}
.post-card h2 a{color:var(--navy);text-decoration:none}
.post-card h2 a:hover{color:var(--red)}
.post-card p{font-size:.98rem;margin-bottom:.9rem}
.more{font-family:var(--font-head);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--red);text-decoration:none}
.more:hover{text-decoration:underline}

/* --- Video ---------------------------------------------------------------- */
.video{margin:1.8rem 0 2.4rem}
.video-frame{position:relative;aspect-ratio:16/9;background:#000;
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video figcaption{margin-top:.7rem;font-family:var(--font-head);font-weight:700;
  color:var(--navy);font-size:1.08rem}

/* ==========================================================================
   Contrast fix — ghost buttons on dark surfaces
   The hero is not .section--navy, so .btn--ghost inherited navy-on-navy
   and was effectively invisible. Any dark surface now forces white.
   ========================================================================== */
.hero .btn--ghost,
.cta-box .btn--ghost,
.section--navy .btn--ghost{color:#fff;border-color:#fff}
.hero .btn--ghost:hover,
.cta-box .btn--ghost:hover,
.section--navy .btn--ghost:hover{background:#fff;color:var(--navy);border-color:#fff}

/* ==========================================================================
   FAQs · Resources · Case review
   ========================================================================== */

/* --- FAQ ------------------------------------------------------------------
   <details>/<summary> so answers collapse without any JavaScript. Content
   stays in the DOM, so FAQPage schema and crawlers are unaffected. */
.faq-list{display:grid;gap:.85rem}
.faq{
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--navy);
  border-radius:0 var(--radius) var(--radius) 0;padding:0;box-shadow:var(--shadow);
}
.faq h2{
  font-size:clamp(1.15rem,1.05rem + .5vw,1.35rem);margin-bottom:.6rem;
  color:var(--navy);
}
.faq p{margin-bottom:0;max-width:none}
.faq:nth-child(even){border-left-color:var(--red)}

details.faq{overflow:hidden}
details.faq > summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:1rem;
  padding:1.15rem 1.5rem;font-family:var(--font-head);font-weight:700;
  color:var(--navy);font-size:clamp(1.08rem,1rem + .45vw,1.28rem);line-height:1.3;
}
details.faq > summary::-webkit-details-marker{display:none}
/* The question stays a real <h2> for document outline + FAQPage schema; it just
   inherits the summary's type so it does not re-introduce heading spacing. */
details.faq > summary h2{font:inherit;color:inherit;margin:0;letter-spacing:inherit}
details.faq > summary::after{
  content:"";flex:0 0 auto;margin-left:auto;margin-top:.28em;
  width:.7em;height:.7em;border-right:2.5px solid var(--red);
  border-bottom:2.5px solid var(--red);transform:rotate(45deg);
  transition:transform .18s ease;
}
details.faq[open] > summary::after{transform:rotate(-135deg)}
details.faq > summary:hover{background:var(--panel)}
details.faq > summary:focus-visible{outline:3px solid var(--navy-lt);outline-offset:-3px}
.faq__body{padding:0 1.5rem 1.35rem}
.faq__body p + p{margin-top:.7rem}

/* --- PDF list ------------------------------------------------------------- */
.pdf-list{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  list-style:none;padding:0;margin:0}
.pdf-list a{
  display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem 1.25rem 1.1rem 3.2rem;text-decoration:none;position:relative;
  box-shadow:var(--shadow);transition:border-color .15s,transform .15s;
}
.pdf-list a::before{
  content:"PDF";position:absolute;left:1rem;top:1.15rem;
  font-family:var(--font-head);font-size:.68rem;font-weight:700;letter-spacing:.06em;
  color:#fff;background:var(--red);padding:.16rem .34rem;border-radius:3px;
}
.pdf-list a:hover{border-color:var(--navy-lt);transform:translateY(-2px)}
.pdf-name{display:block;font-family:var(--font-head);font-size:1.15rem;
  font-weight:700;color:var(--navy);margin-bottom:.2rem}
.pdf-desc{display:block;font-size:.93rem;color:var(--body);margin-bottom:.35rem}
.pdf-meta{display:block;font-size:.8rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em}

/* --- Numbered steps ------------------------------------------------------- */
.steps{list-style:none;padding:0;margin:0 0 1.75rem;counter-reset:step}
.steps li{position:relative;padding-left:3rem;margin-bottom:1.25rem;counter-increment:step}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:-.1rem;
  width:2.1rem;height:2.1rem;display:grid;place-items:center;
  background:var(--navy);color:#fff;border-radius:50%;
  font-family:var(--font-head);font-weight:700;font-size:1.05rem;
}
.steps li strong{display:block;color:var(--navy);margin-bottom:.15rem}
.steps li + li{margin-top:0}

/* Steps on a dark/navy panel: the default navy counter disc is invisible there,
   so invert to the gold token and lift the body + link colours for contrast. */
.steps--light li{color:#dce9f3}
.steps--light li strong{color:#fff}
.steps--light li::before{background:var(--gold);color:var(--navy)}
.steps--light a{color:#fff;text-decoration-color:var(--gold);text-underline-offset:.18em}
.steps--light a:hover{color:var(--gold)}

/* --- Condition lists (Resources: what we handle) -------------------------- */
.cond-list{
  list-style:none;padding:0;margin:.25rem 0 0;
  columns:2;column-gap:1.6rem;
}
.cond-list li{
  break-inside:avoid;position:relative;padding-left:1.1rem;
  margin-bottom:.42rem;font-size:.95rem;line-height:1.45;
}
.cond-list li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:5px;height:5px;border-radius:50%;background:var(--red);
}
.card--accent .cond-list li::before{background:var(--navy)}
@media (max-width:560px){.cond-list{columns:1}}

/* Archived / historical press entries — visually distinct from live guidance
   so a 2018 answer is never mistaken for current advice. */
.notice--archive{
  background:#fbf4e6;border-left-color:var(--gold);color:#4a3c22;
}
.notice--archive p{margin:0 0 .6rem}
.notice--archive p:last-child{margin-bottom:0}
.notice--archive a{color:#7a5a12}
.post blockquote{
  margin:1.6rem 0;padding:.2rem 0 .2rem 1.4rem;
  border-left:4px solid var(--red);
}
.post blockquote p{
  font-family:var(--font-head);font-size:clamp(1.15rem,2.4vw,1.5rem);
  line-height:1.35;color:var(--navy);margin:0 0 .5rem;
}
.post blockquote cite{
  font-style:normal;font-size:.85rem;letter-spacing:.08em;
  text-transform:uppercase;color:#5c6b7a;
}
.post-card--archive .post-card__date{color:#8a6d1f}

/* ==========================================================================
   Floating "Migration Management" button — PROTOTYPE ONLY.
   Deliberately loud and marked internal so it cannot be mistaken for a
   public UI element. Remove this block and the .migbtn markup before launch.
   ========================================================================== */
.migbtn{
  position:fixed;right:1rem;bottom:1rem;z-index:900;
  display:inline-flex;align-items:center;gap:.55rem;
  background:#12212e;color:#fff;text-decoration:none;
  font-family:var(--font-head);font-weight:700;font-size:.95rem;
  letter-spacing:.03em;padding:.72rem 1.05rem;border-radius:99px;
  border:2px solid var(--gold);
  box-shadow:0 8px 26px rgba(0,0,0,.34);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.migbtn:hover,.migbtn:focus-visible{
  background:#1b3448;transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,.42);color:#fff;
}
.migbtn__dot{
  width:.6rem;height:.6rem;border-radius:50%;background:var(--gold);
  flex:none;box-shadow:0 0 0 0 rgba(241,177,68,.7);
  animation:migpulse 2.6s ease-out infinite;
}
@keyframes migpulse{
  0%{box-shadow:0 0 0 0 rgba(241,177,68,.7)}
  70%{box-shadow:0 0 0 .55rem rgba(241,177,68,0)}
  100%{box-shadow:0 0 0 0 rgba(241,177,68,0)}
}
@media (prefers-reduced-motion:reduce){
  .migbtn__dot{animation:none}
  .migbtn{transition:none}
}
/* On small screens collapse to the dot so it never covers content.
   bottom stays above the 64px call bar — .7rem put the dot ON the bar,
   covering the end of "Free case review". */
@media (max-width:560px){
  .migbtn{padding:.7rem;right:.7rem;bottom:74px}
  .migbtn__txt{display:none}
  .migbtn__dot{width:.85rem;height:.85rem}
}

/* ==========================================================================
   Social proof — aggregate Google rating + verbatim client quotes
   ⚠ Quotes must be pasted VERBATIM from the live Google Business Profile.
     Never write or paraphrase a testimonial.
   ========================================================================== */
.proof{background:var(--panel);border-block:1px solid var(--line)}
.proof__head{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2.4rem;margin-bottom:2rem}
.proof__score{display:flex;align-items:center;gap:1rem}
.proof__num{font-family:var(--font-head);font-weight:700;font-size:3.2rem;
  line-height:1;color:var(--navy);letter-spacing:-.02em}
.proof__label{display:block;font-family:var(--font-head);font-weight:700;
  font-size:1.25rem;color:var(--ink);line-height:1.15}
.proof__meta{font-size:.95rem;color:var(--body)}
.proof__meta b{display:block;font-family:var(--font-head);font-size:1.05rem;color:var(--ink)}

.quotes{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:760px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{
  background:#fff;border:1px solid var(--line);border-top:4px solid var(--gold);
  border-radius:var(--radius);padding:1.5rem 1.6rem;box-shadow:var(--shadow);
  display:flex;flex-direction:column;
}
.quote blockquote{margin:0 0 1rem;font-size:1rem;line-height:1.6;color:var(--body)}
.quote blockquote::before{content:"\201C";font-family:var(--font-head);font-size:2.4rem;
  line-height:0;color:var(--gold);vertical-align:-.35em;margin-right:.15em}
.quote figcaption{margin-top:auto;font-size:.9rem;color:var(--muted)}
.quote figcaption b{display:block;color:var(--ink);font-family:var(--font-head);font-size:1rem}

/* --- Intro / page-head blocks --------------------------------------------
   Intros were a narrow column against ~40% dead space. Give the lede a
   companion rail on wide screens instead of leaving the gap empty. */
.pagehead{display:grid;gap:1.2rem 3rem;grid-template-columns:1fr;align-items:end}
@media (min-width:900px){.pagehead{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
.pagehead__aside{
  border-left:3px solid var(--gold);padding:.15rem 0 .15rem 1.25rem;
  font-size:.98rem;color:var(--body);
}
.pagehead__aside b{font-family:var(--font-head);color:var(--navy);display:block;
  font-size:1.05rem;margin-bottom:.2rem}
.section--tight{padding-block:clamp(2.2rem,4vw,3rem)}

/* Author byline with portrait (E-E-A-T). A VARIANT — the base .byline rule
   defined earlier still governs the plain text bylines; do not redefine it. */
.byline--avatar{
  display:flex;align-items:center;gap:.85rem;
  padding-bottom:1.15rem;border-bottom:1px solid var(--line);
}
.byline--avatar img{
  width:48px;height:48px;border-radius:50%;object-fit:cover;
  object-position:center 18%;flex:0 0 auto;box-shadow:var(--shadow);
}
.byline__txt{min-width:0}
.byline__txt b{display:block;font-family:var(--font-head);font-size:1.05rem;
  color:var(--navy);font-weight:700}

/* Spanish link in the header note — the claim "Se habla español" should go
   somewhere, not just assert itself. */
.header-note__es{color:var(--navy-lt);text-decoration:underline;
  text-underline-offset:2px;font-weight:700}
.header-note__es:hover{color:var(--red)}
@media (max-width:780px){.header-note{white-space:normal}}

/* The card grid reuses 5 photos across 10 posts, so repeats sat side by side
   reading as duplicates. Varying the crop per position breaks the pattern.
   This is a mitigation — the real fix is more photography. */
.post-grid .post-card:nth-child(3n+1) .post-card__media img{object-position:center 22%}
.post-grid .post-card:nth-child(3n+2) .post-card__media img{object-position:30% 38%}
.post-grid .post-card:nth-child(3n)   .post-card__media img{object-position:70% 30%}
.post-grid .post-card--feature .post-card__media img{object-position:center 34%}

/* Single wide testimonial (contact page, Spanish page) */
.quote--feature{border-top-color:var(--gold);max-width:70ch}
.quote--feature blockquote{font-size:1.05rem;line-height:1.62}
.proof .quote--feature{margin-bottom:0}


/* Five-star row on each testimonial. Every review shown is a genuine 5-star
   review; the glyphs carry no meaning for assistive tech, hence role+label. */
.stars{
  margin:0 0 .85rem;color:#f0a91f;font-size:1.6rem;
  letter-spacing:.1em;line-height:1;
  /* The bare glyph renders thin at large sizes; a matched shadow thickens it
     without needing an icon font or SVG sprite. */
  text-shadow:0 0 1px #f0a91f;
}
.quote--feature .stars{font-size:1.75rem}
@media (max-width:560px){.stars{font-size:1.45rem}}

/* ==========================================================================
   Landing page (case review)
   Mirrors the live Unbounce page: a full-width hero image with the promise
   overlaid, then a centred form card that overlaps upward into it so the
   form is visible almost immediately. Form fields run two-up.
   ========================================================================== */
.masthead--landing .wrap{grid-template-columns:auto auto;grid-template-areas:"brand cta"}
.masthead--landing .brand{cursor:default}
.footer--landing{padding-block:2rem}
.footer-landing__nap{color:#cfe0ee;font-size:.95rem;margin-bottom:1rem}
.footer-landing__nap a{color:#fff}

/* --- Hero band ------------------------------------------------------------ */
.lp-hero{
  position:relative;background:var(--navy);color:#e6eef6;overflow:hidden;
  padding-block:clamp(2.75rem,7vw,5.5rem);
  padding-bottom:clamp(5rem,10vw,8rem);      /* room for the card to overlap */
}
.lp-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 26%}
.lp-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(3,40,70,.93) 0%,rgba(3,48,82,.86) 42%,
             rgba(4,68,117,.55) 72%,rgba(4,68,117,.30) 100%)}
.lp-hero > .wrap{position:relative;z-index:1}

.lp-pitch{max-width:44rem}
.lp-pitch h1{color:#fff;font-size:clamp(2.1rem,1.4rem + 2.9vw,3.4rem)}
.lp-pitch .eyebrow{color:var(--gold)}
.lp-pitch .lede{color:#dbe8f4;max-width:46ch}
.lp-ticks{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.65rem}
@media (min-width:700px){.lp-ticks{grid-template-columns:1fr 1fr;column-gap:2rem}}
.lp-ticks li{position:relative;padding-left:1.9rem;color:#e6eef6;font-size:1.02rem}
.lp-ticks li::before{
  content:"";position:absolute;left:0;top:.35em;width:1.15rem;height:.6rem;
  border-left:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);
  transform:rotate(-45deg);
}
.lp-heroCall{color:#fff}
.lp-heroCall:hover{background:#fff;color:var(--navy);border-color:#fff}

/* --- Form card, pulled up over the hero ----------------------------------- */
.lp-formsection{background:var(--panel);padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.lp-formcard{
  max-width:920px;margin-inline:auto;
  margin-top:clamp(-4.5rem,-6vw,-3rem);      /* the overlap */
  position:relative;z-index:2;
  background:#fff;border-radius:var(--radius);border-top:5px solid var(--red);
  padding:clamp(1.5rem,3vw,2.6rem);
  box-shadow:0 20px 55px rgba(2,24,44,.28);
}
.lp-formcard__kicker{font-family:var(--font-head);text-transform:uppercase;
  letter-spacing:.12em;font-size:.8rem;font-weight:700;color:var(--red);margin-bottom:.3rem}
.lp-formcard h2{font-size:clamp(1.5rem,1.2rem + 1.1vw,2.1rem);margin-bottom:.3em}
.lp-formcard__sub{font-size:1rem;color:var(--muted);margin-bottom:1.6rem}

/* Two-up fields. .field--span forces a row to take the full width. */
.form--2col{display:grid;gap:1.1rem 1.6rem;grid-template-columns:1fr}
@media (min-width:720px){
  .form--2col{grid-template-columns:1fr 1fr}
  .form--2col .field--span{grid-column:1/-1}
}
.form--2col .field label{font-size:.92rem;line-height:1.35}
.lp-submit{margin-top:.5rem;font-size:1.15rem;padding:1rem 2.6rem}
@media (max-width:560px){.lp-submit{width:100%}}

/* --- Big routing CTA band (contact page: send new clients to the form) ----- */
.cta-band{
  display:grid;gap:1.5rem 2.5rem;align-items:center;
  grid-template-columns:1fr;
  background:linear-gradient(105deg,var(--navy) 0%,#065a97 100%);
  color:#e6eef6;border-radius:var(--radius);
  padding:clamp(1.6rem,3.5vw,2.6rem) clamp(1.5rem,3.5vw,2.8rem);
  box-shadow:var(--shadow);
}
@media (min-width:820px){.cta-band{grid-template-columns:1fr auto}}
.cta-band__kicker{
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:.12em;
  font-size:.82rem;font-weight:700;color:var(--gold);margin-bottom:.4rem;
}
.cta-band h2{color:#fff;margin-bottom:.4em;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem)}
/* Let the copy use the column it is given. Capping the paragraph at 52ch while
   the heading filled 798px left a ragged block and a large void before the
   button — the text, not the grid gap, was the spacing problem. */
.cta-band p{color:#dbe8f4;margin-bottom:0;max-width:none}
.cta-band__text{max-width:64rem}
.cta-band__action{text-align:left}
@media (min-width:820px){.cta-band__action{text-align:center}}
.cta-band__btn{font-size:1.2rem;padding:1.05rem 2.4rem;white-space:nowrap}
.cta-band__alt{margin-top:.9rem;font-size:.95rem;color:#cfe0ee}
.cta-band__alt a{color:#fff;font-weight:700}
.cta-band__alt a:hover{color:var(--gold)}

/* --- Header actions: phone + case-review button, Spanish beneath ---------- */
.header-cta{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem}
.header-cta__row{display:flex;align-items:center;gap:1rem}
.header-cta__stack{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.header-phone{display:inline-flex;align-items:center;gap:.45rem;font-size:1.4rem}
.header-phone svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;flex:0 0 auto}
.header-review{font-size:.95rem;padding:.7rem 1.15rem;white-space:nowrap}
.header-es{
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--navy-lt);text-decoration:none;border-bottom:2px solid var(--gold);
  padding-bottom:1px;
}
.header-es:hover{color:var(--red)}
@media (max-width:1180px){
  .header-phone{font-size:1.25rem}
  .header-review{font-size:.88rem;padding:.6rem .9rem}
}
@media (max-width:780px){
  /* The header keeps only a compact phone tap target. The red case-review
     button and the language link leave the header: the sticky call bar
     carries both actions, and the language switch sits in the open menu. */
  .header-cta{align-items:center}
  .header-cta__row{gap:0}
  .header-review{display:none}
  .header-es{display:none}
  .header-phone{
    font-size:1.02rem;gap:.4rem;
    padding:.55rem .75rem;border:1.5px solid var(--line);border-radius:99px;
  }
  .header-phone svg{width:17px;height:17px}

  /* Tap targets: 24px minimum on touch. The audience skews older and disabled,
     so standalone links get real height rather than the text's own line box. */
  .footer li a,.crumb a,nav[aria-label="Breadcrumb"] a,.dl dd a,
  .ticks li>a,.pdf-list a,.more{display:inline-block;padding-block:.22rem}
}
@media (max-width:560px){
  .header-phone .header-phone__num{display:none}
  .header-phone{padding:.6rem;border-radius:50%}
  .header-phone svg{width:19px;height:19px}
}

/* The CTA band can lead a page, so its heading may be an h1. */
.cta-band h1{color:#fff;margin-bottom:.4em;font-size:clamp(1.6rem,1.25rem + 1.5vw,2.4rem)}

/* Full-width notice band (contact page scope statement). Sits below both
   columns so it is not buried, and so the columns end level. */
.notice--wide{max-width:none;font-size:1rem}
/* The map fills its column rather than stopping short of the text beside it. */
/* An explicit height (not min-height) so the iframe's height:100% resolves;
   with min-height alone the frame collapses and leaves grey below the tiles. */
@media (min-width:820px){.map{aspect-ratio:auto;height:288px}}

/* The firm's own tagline, used as the hero kicker. Sized up from a standard
   eyebrow because it is a brand line, not a category label. */
.eyebrow--tagline{
  font-size:clamp(1rem,.9rem + .45vw,1.25rem);
  letter-spacing:.16em;
}

/* --- Dark-section text overrides -----------------------------------------
   Several utility classes pin a dark colour (.lede, .hint, .pdf-*), which
   beats the light colour inherited from .section--navy and renders near
   invisible — the case-review closing section measured 1.02:1 against navy.
   Restate them here so any of these can be used on a dark panel safely. */
.section--navy .lede,
.section--navy .pdf-desc,
.section--navy .proof__meta{color:#dce9f3}
.section--navy .hint,
.section--navy .pdf-meta{color:#b9cfe2}
.section--navy strong{color:#fff}
.section--navy a{color:#fff;text-decoration-color:var(--gold)}
.section--navy a:hover{color:var(--gold)}

/* External-link affordance. Paired with visually-hidden "(opens in a new tab)"
   text, which is what WCAG G201 asks for when a link opens a new window. */
.extlink{
  display:inline-block;width:.72em;height:.72em;margin-left:.28em;
  vertical-align:baseline;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.75;
}
a:hover .extlink{opacity:1}
.pdf-list .extlink{position:absolute;right:1rem;top:1.2rem;width:.85em;height:.85em}

/* ==========================================================================
   Review carousel
   Scroll-snap track with arrows flanking it. Cards are a uniform height:
   quotes clamp to a fixed number of lines so one 200-word review cannot make
   every other card 700px tall. Full text stays in the DOM for search and
   screen readers. No autoplay.
   ========================================================================== */
.rev{position:relative}
/* The arrows centre on the TRACK, so they live in a stage that excludes the
   counter beneath — anchoring them to .rev put them low by half the counter. */
.rev__stage{position:relative}
@media (min-width:860px){.rev{padding-inline:3.6rem}}

.rev__viewport{
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;
  align-items:stretch;                 /* equal-height cards */
  gap:1.25rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:.35rem;margin:-.35rem;
  scrollbar-width:none;
}
.rev__viewport::-webkit-scrollbar{display:none}
@media (min-width:700px){.rev__viewport{grid-auto-columns:calc(50% - .65rem)}}
@media (min-width:1040px){.rev__viewport{grid-auto-columns:calc(33.333% - .85rem)}}
@media (prefers-reduced-motion:reduce){.rev__viewport{scroll-behavior:auto}}
.rev__viewport:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:var(--radius)}
.rev__slide{scroll-snap-align:start;margin:0}

/* Clamp the quote so every card is the same height. The ellipsis is the
   affordance that there is more; the full review is still in the markup. */
.rev__slide blockquote{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;
  overflow:hidden;
}

/* Arrows sit beside the reviews, vertically centred on the track. */
.rev__btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;display:grid;place-items:center;
  border:1.5px solid var(--line);background:#fff;border-radius:50%;
  color:var(--navy);box-shadow:var(--shadow);z-index:2;
  transition:border-color .15s,background .15s,color .15s,opacity .15s;
}
/* Pulled out into .rev's inline padding so they sit beside the cards
   rather than on top of them. */
.rev__btn--prev{left:0}
.rev__btn--next{right:0}
@media (min-width:860px){
  .rev__btn--prev{left:-3.6rem}
  .rev__btn--next{right:-3.6rem}
}
.rev__btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.rev__btn:hover:not(:disabled){border-color:var(--navy);background:var(--navy);color:#fff}
.rev__btn:disabled{opacity:.3;cursor:default}

.rev__count{
  /* max-width:none — the global p{max-width:70ch} was boxing this to ~560px,
     so text-align:center centred it inside that box, not under the track. */
  max-width:none;
  text-align:center;margin:.9rem 0 0;font-family:var(--font-head);
  font-weight:700;color:var(--muted);font-size:.9rem;letter-spacing:.05em;
}

/* Below 860px there is no room to flank, so the arrows drop under the track. */
@media (max-width:859px){
  .rev__btn{position:static;transform:none;display:inline-grid}
  .rev__count{display:inline-block;margin:0 1rem;vertical-align:middle}
  .rev{padding-bottom:0}
  .rev__viewport{margin-bottom:.9rem}
  .rev > .rev__btn,.rev > .rev__count{margin-top:.9rem}
  .rev{text-align:center}
  .rev__viewport{text-align:left}
}

/* ==========================================================================
   Spacing and layout utilities
   ==========================================================================
   These replace inline style attributes that had accumulated across the page
   bodies. Every value below is the value it replaced, so the computed styles
   are unchanged — this is a refactor, not a redesign. The off-grid values
   (1.4rem, 1.75rem, 2.5rem) are kept as-is deliberately; snapping them to a
   scale would have moved elements on the page. */
.mt-xs{margin-top:.4rem}
.mt-1{margin-top:1rem}
.mt-2{margin-top:1.5rem}
.mt-3{margin-top:1.75rem}
.mt-4{margin-top:2rem}
.mt-5{margin-top:2.5rem}
.mt-6{margin-top:3rem}
.mb-xs{margin-bottom:.15em}
.mb-1{margin-bottom:1.4rem}
.mb-2{margin-bottom:1.5rem}
.mb-3{margin-bottom:2rem}
.mb-4{margin-bottom:2.5rem}
.center{text-align:center}
.text-left{text-align:left}
.justify-center{justify-content:center}
.mx-auto{margin-inline:auto}
.measure{max-width:64ch}
.pt-0{padding-top:0}
.pt-2{padding-top:2rem}
.fs-sm{font-size:.9rem}
.fs-md{font-size:.95rem}
.on-dark{color:#fff}

/* A section that fades from white into the panel tint, used where a panel
   follows a white block and a hard edge would read as a seam. The fade depth
   matches the section's own top padding. */
.section--fade{padding-top:0;background:linear-gradient(180deg,#fff 0 2rem,var(--panel) 2rem 100%)}
.section--fade-lg{padding-top:0;background:linear-gradient(180deg,#fff 0 3rem,var(--panel) 3rem 100%)}

/* --- Contact page routing cards ------------------------------------------
   The contact page's job is to sort two audiences with different needs before
   either of them reads anything else: prospective clients, who should reach the
   case review, and existing clients, who need their own case team and were
   previously told only to "call or email". Two equal columns, colour-coded on
   the top rule — red for the new-client conversion path, navy for service.
   Buttons are full width and bottom-aligned so the two cards agree visually
   even when the copy lengths differ. */
.routes{align-items:stretch}
.route{display:flex;flex-direction:column;border-top-width:6px;padding:1.9rem 1.75rem 1.6rem}
.route--new{border-top-color:var(--red)}
.route--current{border-top-color:var(--navy)}
.route h2{margin-bottom:.35em}
.route > p{max-width:none}
.route__grow{flex:1 1 auto}
.route__btn{display:block;width:100%;text-align:center;margin-top:.85rem;padding-inline:1rem}
.route__btn + .route__btn{margin-top:.6rem}
.route__eg{font-size:.93rem;color:var(--muted);margin-top:.9rem}
.route__eg b{color:var(--ink)}
.route__contact{margin-top:1.4rem;border-top:1px solid var(--line);padding-top:.3rem}
.route__contact div{padding:.55rem 0}
.route__contact dt{flex:0 0 4.6rem;font-size:.95rem}
.route__contact dd{font-size:.97rem}

/* Contact page, phones only: the two routing cards stack, which buried
   CURRENT CLIENTS two and a half screens down. This pair of jump links sits
   under the page heading so both audiences see their own door before any
   scrolling. Hidden on desktop, where the cards sit side by side already. */
.route-jump{display:none}
@media (max-width:780px){
  .route-jump{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1.15rem}
  .route-jump a{
    display:block;text-align:center;text-decoration:none;
    font-family:var(--font-head);font-weight:700;font-size:1.05rem;
    text-transform:uppercase;letter-spacing:.03em;line-height:1.15;
    padding:.85rem .4rem;border-radius:var(--radius);border:2px solid;
  }
  .route-jump a span{
    display:block;font-family:var(--font-body);text-transform:none;
    font-size:.78rem;font-weight:600;letter-spacing:.01em;margin-top:.2rem;
  }
  .route-jump__new{background:var(--red);border-color:var(--red);color:#fff}
  .route-jump__new span{color:#fbe3e4}
  .route-jump__current{background:#fff;border-color:var(--navy);color:var(--navy)}
  .route-jump__current span{color:var(--muted)}
  /* Land the jump below the sticky header. */
  .route--new,.route--current{scroll-margin-top:4.5rem}
}

/* The form card was built to overlap a hero band, so it carries a negative
   top margin. On pages with no hero above it that pulls the card up over the
   preceding paragraph. This modifier sits it in normal flow. */
.lp-formcard--flat{margin-top:0;box-shadow:var(--shadow);border:1px solid var(--line);border-top:5px solid var(--red)}

/* Contact routing cards: the audience label is the heading, not a kicker.
   The card's job is to sort two audiences at a glance, so "NEW CLIENTS" is the
   thing that should be readable from across the room; the sentence beneath it
   only has to confirm you picked the right side. Label colour follows the
   card's top rule so the coding is consistent. */
.route__label{
  font-family:var(--font-head);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.55rem,1.2rem + 1.5vw,2.2rem);line-height:1.02;
  letter-spacing:.055em;margin:0 0 .18em;
}
.route--new .route__label{color:var(--red)}
.route--current .route__label{color:var(--navy)}
.route__sub{
  font-family:var(--font-head);font-weight:700;font-size:1.18rem;
  line-height:1.25;color:var(--ink);margin:0 0 .9rem;max-width:none;
}

/* --- Data-chart figures in articles ---------------------------------------- */
.post figure{margin:1.9rem 0}
.post figure img{display:block;width:100%;height:auto;border:1px solid #e6e8eb;
  border-radius:6px;background:#fff}
.post figure figcaption{margin-top:.6rem;font-size:.93rem;color:var(--muted);
  line-height:1.45}

/* Former firm name in the footer — quiet confirmation for people who
   searched the old name. Sits under the short description. */
.footer-former{
  margin-top:.35rem;
  font-size:.85rem;
  opacity:.72;
}