/* ==========================================================================
   MYIMMIGRATIONPLEA.COM: additions on top of the re-toned system
   Loaded after ip.css and ip.motion.css. retone.py never touches this file,
   so layout additions live here. Colors are tokens only (SOUL.md 5.1).
   ========================================================================== */

/* ---- line icons on cards ------------------------------------------------- */
.ico{width:34px;height:34px;display:block;margin-bottom:12px;color:var(--copper-2)}
.dark .ico,.darker .ico{color:var(--copper)}
.ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---- photo cards used for services and statuses ------------------------- */
.postcard .p-media{aspect-ratio:3/2}
.postcard.trackcard{padding-top:0}
.postcard.trackcard::before{z-index:2;left:0;right:0;border-radius:0}
.postcard .p-body .track-badge{margin-bottom:10px}
.postgrid.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1060px){.postgrid.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.postgrid.four{grid-template-columns:1fr}}
.postcard .p-media img.shot{transition:transform .5s ease}

/* ---- feature blocks (photo beside text), alternating -------------------- */
.feature.flip{grid-template-columns:.95fr 1.05fr}
.feature.flip .f-media{order:2}
@media(max-width:860px){.feature.flip{grid-template-columns:1fr}.feature.flip .f-media{order:0}}
.feature .f-media img.shot{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.feature+.feature{margin-top:var(--s-4)}
.feature .f-body h3{font-size:clamp(1.3rem,2.4vw,1.75rem);margin-bottom:.4em}
.feature .f-body ul{margin:.6rem 0 1rem;padding-left:1.15em}
.feature .f-body li{margin:.35em 0;font-size:.97rem}
.feature .f-body .ctarow{margin-top:14px}

/* ---- attorney strip ------------------------------------------------------ */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
@media(max-width:760px){.team{grid-template-columns:1fr}}
.team a{display:flex;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--radius);padding:14px 16px;color:var(--ink);text-decoration:none;transition:border-color .2s,transform .2s}
.team a:hover{border-color:var(--copper-2);transform:translateY(-2px);text-decoration:none}
.team img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:2px solid var(--bone-2)}
.team b{display:block;font-family:var(--font-display);font-size:1.05rem;font-weight:600}
.team small{display:block;color:var(--muted);font-size:.84rem;line-height:1.4}

/* ---- tool preview (a static mock of the result, no script) ------------- */
.mock{background:var(--surface);border:1px solid rgba(241,220,198,.25);border-radius:var(--radius);padding:18px 20px;color:var(--ink-soft);
  box-shadow:var(--shadow-lg);position:relative;transform:rotate(-1.2deg);max-width:520px;margin:0 auto}
@media(max-width:860px){.mock{transform:none;max-width:none}}
.mock .m-head{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:10px}
.mock .m-bar{height:5px;background:var(--bone-2);border-radius:3px;margin-bottom:14px;overflow:hidden}
.mock .m-bar i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--copper-2),var(--copper))}
.mock .m-verdict{font-family:var(--font-display);font-size:1.05rem;color:var(--ink);line-height:1.45;margin:0 0 12px}
.mock .m-verdict mark{background:transparent;color:var(--ink);padding:0;border-radius:0;font-weight:700}
.mock .m-row{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:10px 12px 10px 14px;border-radius:0;border:0;border-top:1px solid var(--line);border-left:3px solid var(--line-strong);margin:0;font-size:.84rem;background:transparent;color:var(--ink-soft)}
.mock .m-row .lvl{font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:999px;border:1px solid currentColor;white-space:nowrap;margin-top:1px}
.mock .m-row.risk{border-left-color:#7A3319}.mock .m-row.risk .lvl{color:#7A3319}
.mock .m-row.warn{border-left-color:var(--copper-2)}.mock .m-row.warn .lvl{color:var(--copper-2)}
.mock .m-row.ok{border-left-color:#154A33}.mock .m-row.ok .lvl{color:#154A33}
.mock .m-row b,.dark .mock .m-row b{display:block;font-weight:700;color:var(--ink);margin-bottom:2px}.mock .m-row+.m-foot{border-top:1px solid var(--line);padding-top:10px}
.mock .m-foot{font-size:.76rem;color:var(--muted);margin:10px 0 0}
.tool-split{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-5);align-items:center}
@media(max-width:860px){.tool-split{grid-template-columns:1fr;gap:var(--s-4)}}

/* ---- photo band with copy over it --------------------------------------- */
.band{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:340px;display:flex;align-items:flex-end;color:#fff;
  border:1px solid var(--line-strong)}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band .b-copy{position:relative;padding:var(--s-5) var(--s-4);max-width:60ch;
  background:linear-gradient(180deg,rgba(23,28,33,0) 0%,rgba(23,28,33,.86) 45%);width:100%}
@media(max-width:560px){.band .b-copy{padding:var(--s-4) 20px}}
.band h2{color:#fff;margin-bottom:.4em}
.band p{color:#D3D7DB;margin-bottom:1rem}

/* ---- numbered process with photos --------------------------------------- */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
@media(max-width:900px){.steps{grid-template-columns:1fr}}
.steps .card{position:relative;padding-top:28px}
.steps .card::before{counter-increment:step;content:counter(step);position:absolute;top:-16px;left:var(--s-3);width:36px;height:36px;border-radius:50%;
  background:var(--copper-2);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:var(--font-display)}
.dark .steps .card::before{background:var(--copper);color:var(--graphite-2)}

/* ==========================================================================
   DESIGN PASS 3 (2026-09-16): serious, and we have this
   Mobbin references: Harvey and Legora heroes (full-bleed photograph of the
   people at work, copy on a dark left gradient, a quiet credentials rule
   underneath); Wise and YLLW service rows (equal photo cards, one ratio);
   Origin and Loom trust bands (a calm dark band, a few large serif figures).
   Every color is a token or a pair already in tools/retone.py's audit table.
   Motion is light: one drifting copper pool, one slow push-in on the
   photograph, an optional low-opacity loop, all off under reduced motion.
   ========================================================================== */

/* ---- 1. Photographic hero ------------------------------------------------ */
.hero.hero-photo{padding:0;min-height:min(84vh,720px);display:flex;flex-direction:column;justify-content:flex-end;border-bottom:0}
.hero-photo .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--graphite-2)}
.hero-photo .hero-bg .shot,.hero-photo .hero-bg .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 0%;display:block}
.hero-photo .hero-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(23,28,33,.96) 0%,rgba(23,28,33,.86) 34%,rgba(23,28,33,.38) 58%,rgba(23,28,33,.12) 100%),
             linear-gradient(180deg,rgba(23,28,33,.35) 0%,rgba(23,28,33,0) 30%,rgba(23,28,33,.5) 100%)}
.hero-photo::before{z-index:1}                       /* the copper pool drifts over the picture */
.hero-photo>.wrap{position:relative;z-index:2;flex:1 1 auto;display:flex;align-items:center;padding-top:84px;padding-bottom:56px}
.hero-photo .hero-copy{max-width:660px}
.hero-photo h1{max-width:15ch;font-size:clamp(2.5rem,5.4vw,4.3rem);line-height:1.04;text-shadow:0 2px 24px rgba(13,16,19,.35)}
.hero-photo .lede{max-width:56ch;font-size:1.06rem;line-height:1.6}
.hero-photo .ctarow{margin-top:30px}
.hero-photo .hero-note{margin:22px 0 0;font-size:.9rem;color:#AFB6BD;max-width:54ch}
.hero-photo .hero-note a{color:var(--copper-soft);font-weight:600}
.hero-cred{position:relative;z-index:2;border-top:1px solid rgba(241,220,198,.22);background:rgba(13,16,19,.58);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero-cred ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.hero-cred li{padding:18px 24px 18px 24px;font-size:.88rem;line-height:1.45;color:#C8CDD2;border-left:1px solid rgba(241,220,198,.18)}
.hero-cred li:first-child{padding-left:0;border-left:0}
.hero-cred li b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.06rem;color:#fff;margin-bottom:2px;letter-spacing:-.01em}
.hero-cred li a{color:#fff;font-weight:600}
@media(max-width:1000px){.hero-cred ul{grid-template-columns:repeat(2,1fr)}
  .hero-cred li:nth-child(3){padding-left:0;border-left:0}.hero-cred li{padding-top:14px;padding-bottom:14px}}
/* 1241 and up: the whole frame fits the page width, top anchored, fading at the foot. The client sits
   54 percent across and Usher 82 percent, so both stay clear of the copy at every width. */
@media(min-width:1241px){.hero-photo .hero-bg .shot,.hero-photo .hero-bg .hero-video{bottom:auto;height:calc(100vw * 824 / 1920);object-position:100% 0%;
    -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 82%,transparent 100%)}
  .hero-photo .hero-bg::after{background:linear-gradient(90deg,rgba(23,28,33,.97) 0%,rgba(23,28,33,.9) 38%,rgba(23,28,33,.6) 46%,rgba(23,28,33,.06) 53%,rgba(23,28,33,0) 100%)}}
/* 1240 and under: picture above the copy, so text never runs over a face */
@media(max-width:1240px){.hero.hero-photo{min-height:0;background:var(--graphite-2)}.hero-photo>.wrap{padding-top:32px;padding-bottom:44px}
  .hero-photo .hero-bg{position:relative;inset:auto;flex:none;width:100%;aspect-ratio:16/9}
  .hero-photo .hero-bg .shot,.hero-photo .hero-bg .hero-video{left:auto;right:0;width:160%;object-position:100% 0%}
  .hero-photo .hero-bg::after{background:linear-gradient(180deg,rgba(23,28,33,0) 76%,rgba(23,28,33,1) 100%)}}
@media(max-width:560px){.hero-photo .hero-bg{aspect-ratio:5/4}
  .hero-photo .hero-bg .shot,.hero-photo .hero-bg .hero-video{left:0;right:0;width:100%}}
@media(min-width:2000px){.hero-photo .hero-bg .shot,.hero-photo .hero-bg .hero-video{left:4%}}
@media(max-width:560px){.hero-cred ul{grid-template-columns:1fr}
  .hero-cred li{padding:12px 0;border-left:0;border-top:1px solid rgba(241,220,198,.14)}.hero-cred li:first-child{border-top:0}
  .hero-photo>.wrap{padding-top:24px;padding-bottom:36px}}

/* ---- 2. Even grids: one ratio per row, equal card heights ---------------- */
.postgrid .postcard figure.framed.p-media{aspect-ratio:3/2}
.postgrid.four .postcard figure.framed.p-media{aspect-ratio:4/3}
.postgrid .postcard,.grid .card,.steps .card,.newsrow .lawchange{height:100%}
.grid a.card{display:flex;flex-direction:column}
.grid a.card .more{margin-top:auto;padding-top:14px}
.grid a.card p:last-of-type{margin-bottom:0}
.newsrow .lawchange{display:flex;flex-direction:column}
.newsrow .lawchange .src{margin-top:auto;padding-top:6px}
.steps.six{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.steps.six{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.steps.six{grid-template-columns:1fr}}
.g4.even{grid-template-columns:repeat(4,1fr)}
@media(max-width:920px){.g4.even{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.g4.even{grid-template-columns:1fr}}

/* ---- 3. Trust band: large serif figures on a calm dark ground ----------- */
.stats.band-stats{margin-top:var(--s-4)}
.stats.band-stats .stat .n{display:flex;align-items:flex-end;min-height:4.2rem;font-size:clamp(1.35rem,2.1vw,1.7rem);line-height:1.15}
.stats.band-stats .stat .n.num{font-size:clamp(2rem,3.4vw,2.8rem);line-height:1}
@media(max-width:900px){.stats.band-stats .stat .n{min-height:0}}

/* ---- 4. Ambient light on dark sections (CSS pool + optional loop) -------- */
.ambient{position:relative;overflow:hidden}
.ambient>.wrap{position:relative;z-index:1}
.ambient::before{content:"";position:absolute;inset:-25% -15%;z-index:0;pointer-events:none;
  background:radial-gradient(34% 48% at 50% 50%,rgba(210,140,85,.10),rgba(210,140,85,0) 72%);
  transform:translate3d(12%,8%,0);animation:ip-drift 24s ease-in-out infinite alternate-reverse;will-change:transform}
.ambient .amb-video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity 1.6s ease;pointer-events:none;mix-blend-mode:screen}
.ambient.is-playing .amb-video{opacity:.14}
.ambient.no-video .amb-video{display:none}
@media(prefers-reduced-motion:reduce){.ambient::before{display:none}.ambient .amb-video{display:none}}
@media print{.ambient::before,.ambient .amb-video{display:none}}

/* ---- 5. Rhythm and micro-motion ------------------------------------------ */
h2{letter-spacing:-.02em}
.sec-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.15}
.sec-head p{color:var(--ink-soft)}
.btn-copper:hover{box-shadow:0 10px 24px rgba(210,140,85,.28)}
.postgrid .reveal:nth-child(2),.grid .reveal:nth-child(2),.newsrow .reveal:nth-child(2){transition-delay:.08s}
.postgrid .reveal:nth-child(3),.grid .reveal:nth-child(3),.newsrow .reveal:nth-child(3){transition-delay:.16s}
.postgrid .reveal:nth-child(4),.grid .reveal:nth-child(4){transition-delay:.24s}
.postcard .p-media img.shot,.feature .f-media img.shot{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.postcard:hover .p-media img.shot{transform:scale(1.04)}
.feature:hover .f-media img.shot{transform:scale(1.02)}
.postcard .postmeta .cat{color:var(--copper-2);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.72rem}
.postcard .postmeta .cat::before{content:"";display:inline-block;width:18px;height:1px;background:var(--copper-2);margin-right:8px;vertical-align:middle}
/* the result card sits straight: no tilt, no hover swing (Oct 30, 2026, "too gimmicky") */
.mock{transform:none}
@media(prefers-reduced-motion:reduce){.postcard:hover .p-media img.shot,.feature:hover .f-media img.shot,.tool-split:hover .mock{transform:none}}

/* ---- 6. Reviewer requests (evenness sweep, 2026-09-16) ------------------ */
@media(max-width:480px){.btn{white-space:normal;height:auto;line-height:1.3;text-align:center;padding-top:12px;padding-bottom:12px;min-height:44px}}
.wrap>figure.framed{margin-top:var(--s-3)}
@media(max-width:560px){header.nav .nav-cta .btn{display:inline-flex;align-items:center;min-height:var(--tap)}}
.wrap>.prose+.grid,.wrap>.prose+.postgrid,.wrap>.prose+figure.framed,.wrap>.grid+.prose,.wrap>.postgrid+.prose{margin-top:var(--s-4)}
.grid.g2>.sibling:first-child:nth-last-child(odd){grid-column:1/-1}
.grid+.prose,.steps+.prose{margin-top:1.6rem}
.prose+.steps{margin-top:2rem}
.wrap>figure.framed+.grid{margin-top:var(--s-4)}
.grid>.sibling{margin:0}

/* ==========================================================================
   PASS 4 (2026-10-07): buttons readable on dark, even rows, hero tool panel,
   clickable law-change scroll. Tokens only.
   ========================================================================== */
/* .dark a{color:var(--copper)} was winning over .btn-copper: copper text on a copper button. */
.dark a.btn-copper,.darker a.btn-copper,.ambient a.btn-copper,.ctaband a.btn-copper,.hero a.btn-copper,
.dark a.btn-copper:hover,.darker a.btn-copper:hover,.ambient a.btn-copper:hover,.ctaband a.btn-copper:hover,.hero a.btn-copper:hover{color:var(--graphite-2)}
.dark a.btn-graphite,.darker a.btn-graphite{background:var(--bone);color:var(--graphite-2)}
/* hero secondary button is solid enough to read over a photograph */
.hero-photo .btn-ghost{background:rgba(246,243,238,.12);border-color:rgba(246,243,238,.7);color:#fff}
.hero-photo .btn-ghost:hover{background:rgba(246,243,238,.24);border-color:#fff;color:#fff}
/* credentials: one-line titles, equal cells */
.hero-cred li b{white-space:nowrap}
@media(max-width:1000px){.hero-cred li b{white-space:normal}}
/* hero: copy on the left, the tool on the right */
.hero-photo .hero-grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;width:100%}
@media(max-width:900px){.hero-photo .hero-grid2{grid-template-columns:1fr;gap:28px}}
.hero-photo .hero-copy{max-width:600px}
.hero-tool{position:relative;background:rgba(23,28,33,.74);border:1px solid rgba(241,220,198,.28);border-radius:var(--radius);
  padding:26px 26px 24px;box-shadow:0 24px 48px rgba(13,16,19,.38);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);margin:0}
.hero-tool::before{content:"";position:absolute;top:0;left:26px;right:26px;height:2px;background:var(--copper);border-radius:0 0 2px 2px}
.hero-tool .eyebrow{color:var(--copper);margin-bottom:8px}
.hero-tool h2{color:#fff;font-size:1.32rem;margin:0 0 6px;letter-spacing:-.01em}
.hero-tool>p{color:#C8CDD2;font-size:.92rem;margin:0 0 6px;line-height:1.5}
.hero-tool label{display:block;color:#E6E8EA;font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:14px 0 6px}
.hero-tool select{width:100%;min-height:46px;padding:9px 12px;font:inherit;font-size:1rem;color:var(--ink);background:var(--bone);
  border:1px solid rgba(241,220,198,.55);border-radius:var(--radius-sm)}
.hero-tool select:focus-visible{outline:3px solid var(--bone);outline-offset:2px}
.hero-tool .btn{width:100%;margin-top:18px}
.hero-tool .ht-note{font-size:.8rem;color:#AFB6BD;margin:12px 0 0;line-height:1.5}
@media(max-width:560px){.hero-tool{padding:20px 18px 18px}.hero-tool::before{left:18px;right:18px}}
/* status and most-read cards: badges on one line, titles the same height, links on one line */
.postcard .track-badge{white-space:nowrap;font-size:.7rem;letter-spacing:.04em}
.postgrid .postcard h3{min-height:2.6em}
.postcard .more{white-space:nowrap}
/* law changes: a horizontal scroll of clickable cards, newest first */
.newsrow.scroll{display:flex;gap:var(--s-3);overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 18px;margin:0 -4px;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.newsrow.scroll>*{flex:0 0 340px;scroll-snap-align:start;height:auto}
@media(max-width:560px){.newsrow.scroll>*{flex-basis:84vw}}
a.lawchange{display:flex;flex-direction:column;color:var(--ink-soft);text-decoration:none;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
a.lawchange:hover{transform:translateY(-2px);border-color:var(--copper-2);box-shadow:var(--shadow-sm);text-decoration:none}
a.lawchange h3{color:var(--ink)}
a.lawchange .src{margin-top:auto;color:var(--copper-2);font-weight:650;font-size:.9rem}
a.lawchange:hover .src{text-decoration:underline;text-underline-offset:3px}
.newsrow-hint{font-size:.82rem;color:var(--muted);margin:-6px 0 12px}
/* case cards */
.card .f-tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--copper-2);margin-bottom:8px}
.card .f-tag::before{content:"";display:inline-block;width:18px;height:1px;background:var(--copper-2);margin-right:8px;vertical-align:middle}
.dark .card .f-tag,.darker .card .f-tag{color:var(--copper)}
.card .more a{color:inherit;text-decoration:none}

/* ---- owner-supplied logo (2026-10-07): document, gavel, MY ImmigrationPlea.com ---- */
.brand .logo{height:42px;width:auto;display:block}
.brand .mark{display:none}
.brand .wordmark.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:420px){.brand .logo{height:32px}.brand .wordmark{display:none}}
footer .f-brand .logo-light{height:40px;width:auto;display:block;margin-bottom:6px}

/* ---- the tool bar under the hero (photo stays unobstructed) --------------- */
.toolbar-sec{padding:0;background:var(--graphite-2);border-bottom:1px solid rgba(241,220,198,.22)}
.hero-tool.toolbar{background:transparent;border:0;box-shadow:none;border-radius:0;padding:22px 0 20px;-webkit-backdrop-filter:none;backdrop-filter:none}
.hero-tool.toolbar::before{display:none}
.hero-tool.toolbar .tb-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:12px}
.hero-tool.toolbar .tb-head h2{font-size:1.2rem;margin:0}
.hero-tool.toolbar .tb-head .eyebrow{margin:0}
.hero-tool.toolbar .tb-fields{display:grid;grid-template-columns:1fr 1.3fr auto;gap:12px 16px;align-items:end}
.hero-tool.toolbar label{margin:0 0 6px}
.hero-tool.toolbar .btn{width:auto;margin:0;min-height:46px;white-space:nowrap}
.hero-tool.toolbar .ht-note{margin:10px 0 0}
@media(max-width:900px){.hero-tool.toolbar .tb-fields{grid-template-columns:1fr 1fr}.hero-tool.toolbar .btn{grid-column:1/-1;width:100%}}
@media(max-width:560px){.hero-tool.toolbar .tb-fields{grid-template-columns:1fr}}

/* ==========================================================================
   LAW-CHANGES RAIL (2026-10-29): photo cards on a dark band that move on
   their own, pause on hover or focus, and have arrows. Mobbin references:
   Kastle (image card, date, arrows), Mistral (dark "latest updates" band),
   Ditto (photo header with a label). Off under reduced motion.
   ========================================================================== */
.rail-head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"eyebrow nav" "title nav" "lede nav";gap:0 28px;align-items:end;max-width:none}
.rail-head>.eyebrow{grid-area:eyebrow}.rail-head>h2{grid-area:title;max-width:22ch}.rail-head>p{grid-area:lede;max-width:64ch}.rail-head>.rail-nav{grid-area:nav;align-self:end}
.dark .sec-head p,.darker .sec-head p{color:#C8CDD2}
.rail-nav{display:flex;gap:8px;padding-bottom:4px}
.rail-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:inherit;font-size:1.1rem;cursor:pointer;transition:background .2s,border-color .2s}
.rail-btn:hover{background:var(--copper-2);color:#fff;border-color:var(--copper-2)}
.rail-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media(max-width:640px){.rail-head{grid-template-columns:1fr}.rail-nav{justify-content:flex-start}}
.newsrail{position:relative;margin:0 -20px}
.rail-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 20px 10px;scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
.rail-track::-webkit-scrollbar{display:none}
.rail-track.is-dragging{cursor:grabbing}
.rail-track:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;border-radius:var(--radius)}
.rail-edge{position:absolute;top:0;bottom:0;width:60px;pointer-events:none;z-index:2}
.rail-edge-l{left:0;background:linear-gradient(90deg,var(--bone),rgba(246,243,238,0))}
.rail-edge-r{right:0;background:linear-gradient(270deg,var(--bone),rgba(246,243,238,0))}
@media(max-width:640px){.rail-edge{width:24px}}
.n-card{flex:0 0 360px;scroll-snap-align:start;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;color:var(--ink-soft);text-decoration:none;transition:transform .22s ease,border-color .22s ease,background .22s ease}
.n-card:hover{transform:translateY(-3px);border-color:var(--copper-2);box-shadow:var(--shadow-sm);text-decoration:none}
.n-card:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media(max-width:640px){.n-card{flex-basis:82vw}}
.n-media{margin:0;position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--bone-2);border-bottom:1px solid var(--line)}
.n-media img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .4s ease;filter:saturate(.92)}
.n-card:hover .n-media img,.n-card.is-active .n-media img{transform:scale(1.05);filter:saturate(1)}
.n-year{position:absolute;left:12px;bottom:12px;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--copper-2);padding:4px 9px;border-radius:999px}
.n-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.n-body .date{font-size:.76rem;color:var(--muted);font-weight:650;letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px}
.n-body h3{color:var(--ink);font-size:1.08rem;margin:0 0 .5em;line-height:1.3;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.n-body p{font-size:.92rem;line-height:1.55;margin:0 0 14px;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:4.65em}
.n-body .src{margin-top:auto;color:var(--copper-2);font-weight:650;font-size:.9rem}
.n-card:hover .src{text-decoration:underline;text-underline-offset:3px}
.dark .newsrow-hint{color:#959CA4}
/* the news page keeps its grid, with the same photo headers */
.newsrow .lawchange .n-media{margin:-1px -1px 14px;border-radius:var(--radius-sm) var(--radius-sm) 0 0;aspect-ratio:16/9}
.newsrow .lawchange{padding-top:0;overflow:hidden}
.newsrow .lawchange .n-media+.date{margin-left:22px}
.newsrow .lawchange .n-media~h3,.newsrow .lawchange .n-media~p{margin-left:22px;margin-right:22px}
@media(prefers-reduced-motion:reduce){.n-card,.n-media img{transition:none}}

/* ---- rail v2: one card at a time, progress bar, dots, active state ----------- */
.n-card{position:relative}
.n-card .n-progress{position:absolute;left:0;right:0;top:0;height:3px;background:var(--bone-2);z-index:3;overflow:hidden}
.n-card .n-progress i{display:block;height:100%;width:0;background:var(--copper-2)}
.n-card.is-active .n-progress i{animation:rail-progress var(--rail-ms,5500ms) linear forwards}
.newsrail.is-paused .n-card.is-active .n-progress i{animation-play-state:paused}
@keyframes rail-progress{from{width:0}to{width:100%}}
.n-card.is-active{border-color:var(--copper-2);box-shadow:var(--shadow-sm)}
.n-card .n-year{transition:transform .3s ease}
.n-card:hover .n-year,.n-card.is-active .n-year{transform:translateY(-2px)}
.rail-dots{display:flex;gap:8px;justify-content:center;padding:4px 20px 0}
.rail-dots button{width:10px;height:10px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;padding:0;cursor:pointer;transition:background .2s,transform .2s,width .2s}
.rail-dots button:hover{background:var(--line-strong)}
.rail-dots button[aria-selected="true"]{background:var(--copper-2);border-color:var(--copper-2);width:26px;border-radius:5px}
.rail-dots button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.n-card.is-active .n-progress i{animation:none;width:100%}.n-card.is-active .n-media img,.n-card:hover .n-media img{transform:none}}
.rail-sec{background:var(--bone)}
/* wide screens: keep the hero shallow enough that the photograph is not cropped at the top */
@media(min-width:1600px){.hero.hero-photo{min-height:min(70vh,640px)}.hero-photo .hero-bg .shot,.hero-photo .hero-bg .hero-video{object-position:50% 0%}}

/* the slow zoom grows from the top edge, so a head at the top of the frame is never pushed out */
.hero-photo .hero-bg .shot,.hero-photo .hero-bg .hero-video{transform-origin:50% 0}

/* ---- "one goes home, one is deported": two-photo contrast (Oct 30, 2026) ---- */
.outcomes{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);align-items:stretch}
@media(max-width:760px){.outcomes{grid-template-columns:1fr}}
.outcome{display:flex;flex-direction:column;height:100%;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;color:inherit;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.outcome:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(23,28,33,.12)}
.outcome figure.framed.o-media{margin:0;border:0;border-radius:0;aspect-ratio:3/2;overflow:hidden}
.outcome .o-media img.shot{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block;transition:transform .5s ease}
.outcome:hover .o-media img.shot{transform:scale(1.03)}
.outcome .o-body{padding:18px 20px 20px;border-top:4px solid var(--line-strong);flex:1 1 auto;display:flex;flex-direction:column}
.outcome.free .o-body{border-top-color:#154A33}
.outcome.deport .o-body{border-top-color:#7A3319}
.outcome .o-tag{display:inline-block;align-self:flex-start;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid currentColor;margin-bottom:10px}
.outcome.free .o-tag{color:#154A33}
.outcome.deport .o-tag{color:#7A3319}
.outcome h3{margin:0 0 .4em;font-size:1.2rem;color:var(--ink)}
.outcome p{margin:0 0 12px;color:var(--ink-soft)}
.outcome .more{margin-top:auto}
.outcome-note{text-align:center;margin:var(--s-4) auto 0;max-width:760px;font-size:1.02rem;color:var(--ink)}
.outcome-note .btn{margin-left:12px;vertical-align:middle}
@media(max-width:560px){.outcome-note .btn{display:inline-flex;margin:12px 0 0}}
@media(prefers-reduced-motion:reduce){.outcome,.outcome .o-media img.shot{transition:none}.outcome:hover{transform:none}.outcome:hover .o-media img.shot{transform:none}}

/* wide screens: narrower copy so the paragraph stays off the client */
@media(min-width:1241px){.hero-photo .hero-copy{max-width:540px}}

/* phone header (Nov 1, 2026): the wide logo pushed the menu button off the screen. On phones the top call
   button gives way to the floating Call now button, so logo, language and menu always fit. */
@media(max-width:560px){header.nav .nav-cta>.btn-copper{display:none}
  header.nav .logo{max-width:min(193px,46vw);height:auto}}

/* ---- QC Nov 1 layout ------------------------------------------------------- */
/* home tool bar: each label stays on its own dropdown */
.hero-tool.toolbar .tb-field{display:flex;flex-direction:column;min-width:0}
.hero-tool.toolbar .tb-field select{width:100%;text-overflow:ellipsis}
/* the band: picture first, copy below it, so text never runs over a face or crops a head */
.band{display:block;min-height:0;background:var(--graphite-2)}
.band::before,.band::after{display:none}
.band img{position:static;display:block;width:100%;height:auto;max-height:560px;object-fit:cover;object-position:50% 0}
.band .b-copy{max-width:none;background:none;padding:var(--s-4)}
/* law-changes rail: no fade over the first card's words; dots above a centered hint */
.rail-edge-l{display:none}
.newsrow-hint{margin:12px auto 0;text-align:center}
.rail-dots{padding-top:8px}
/* links on dark bands were dim brown */
.dark a:not(.btn):not(.card):not(.sibling),.darker a:not(.btn):not(.card):not(.sibling),.dark a.card .more,.dark .card .more{color:#EDBF98}
.dark a:not(.btn):not(.card):not(.sibling):hover{color:#fff}
/* cards and buttons are not underlined text links */
a.card,a.card *,a.sibling,a.sibling *,a.postcard,a.postcard *{text-decoration:none}
a.btn,a.btn:hover,.prose a.btn,.prose a.btn:hover{text-decoration:none}
a.card:hover .more,a.sibling:hover .s-t,a.postcard:hover .more{text-decoration:underline}
/* common questions line up with the rest of the page */
#faq .wrap.narrow{max-width:var(--maxw)}
/* long dropdown text ends in an ellipsis */
select{text-overflow:ellipsis}
/* phones: tables become labeled stacks, so no column is cut off and nothing scrolls sideways */
@media(max-width:640px){
  .tablewrap{overflow:visible;border:0;box-shadow:none;background:none}
  .tablewrap table.stack{display:block;width:100%;min-width:0;border:0;background:none}
  .tablewrap table.stack thead{display:none}
  .tablewrap table.stack caption{display:block;text-align:left}
  .tablewrap table.stack tbody{display:block}
  .tablewrap table.stack tr{display:block;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);padding:12px 14px;margin:0 0 10px}
  .tablewrap table.stack td,.tablewrap table.stack th[scope=row]{display:block;border:0;padding:6px 0 0;width:auto;min-width:0;white-space:normal;text-align:left;background:none}
  .tablewrap table.stack td:first-child,.tablewrap table.stack th[scope=row]{padding-top:0;font-weight:700;color:var(--ink)}
  .tablewrap table.stack td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;font-size:.76rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--muted);margin-bottom:2px}
}

/* phones: room under the footer so the floating Call now button never covers its last links */
@media(max-width:820px){footer.site{padding-bottom:84px}}

/* stats strip: the short rule sits under its heading; headings do not strand one word */
.stats.band-stats .stat .n{flex-direction:column;align-items:flex-start;justify-content:flex-end}
.stats.band-stats .stat .n::after{margin:12px 0 10px}
h1,h2,h3,.m-verdict{text-wrap:balance}

/* ---- QC Nov 1, second pass -------------------------------------------------- */
/* status words: a bad result never reads as good */
.no{color:#7A3319}
/* feature photos keep their own shape instead of stretching to the text, so nobody's face is cut at the edge */
.feature{align-items:center}
.feature .f-media,.feature .f-media figure,.feature .f-media figure.framed{height:auto;align-self:center}
.feature .f-media img.shot{height:auto;aspect-ratio:auto;object-fit:contain}
/* rail: the first card starts on the page margin; heading above the arrows on phones */
.rail-track{scroll-padding-left:20px}
@media(max-width:640px){.rail-head{grid-template-areas:"eyebrow" "title" "lede" "nav"}.rail-head>h2,.rail-head>p{max-width:none}.rail-head>.rail-nav{justify-self:start;margin-top:10px}}
/* status pills hug their words in every card */
.postcard .p-body .track-badge{align-self:flex-start;width:fit-content}
/* a phone number never breaks across two lines */
a[href^="tel:"]{white-space:nowrap}

/* status words take their color from what they mean for the client */
.st-good{color:#154A33;font-weight:700}
.st-bad{color:#7A3319;font-weight:700}
.st-neutral{color:var(--ink);font-weight:700}

/* final visual pass: no blank band under a card photo on phones */
.feature .f-media{min-height:0}

/* Nov 2: result card rows line up; badges share one width */
.mock .m-row{grid-template-columns:118px 1fr}
.mock .m-row .lvl{display:block;width:100%;text-align:center;padding:3px 4px;letter-spacing:.04em;box-sizing:border-box}
.mock .m-verdict{text-wrap:pretty}
@media(max-width:480px){.mock .m-row{grid-template-columns:1fr;gap:6px}.mock .m-row .lvl{width:fit-content;padding:3px 9px}}
/* Nov 2: eight tabs need a little less air */
@media(min-width:1241px){.nav-links{gap:14px}}
/* Nov 2: translated labels run long, so translated pages use the menu button at every width */
html.nav-compact .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:2px;background:var(--bone);padding:14px 20px 20px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
html.nav-compact .nav-links.open{display:flex}
html.nav-compact .nav-links a{width:100%;padding:11px 0;font-size:1rem;min-height:var(--tap);display:flex;align-items:center;border-bottom:1px solid var(--line)}
html.nav-compact .menu-btn{display:block}
.lang-menu button[aria-current]{font-weight:700;color:var(--copper-2)}