/*
Theme Name: Azimi Immigration
Author: Azimi Immigration
Description: Faithful HTML design conversion with Elementor Free header, footer and pages.
Version: 1.0.1
Requires at least: 6.5
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: azimi-immigration
*/
/* ============================================================
   Azimi Immigration — design system
   Palette: Deep Slate/Navy + Warm Gold accents + Emerald CTAs.
   Layout: modular card/grid components (WP-portable class names —
   no build-step, no framework, styles map 1:1 to PHP template
   partials or Gutenberg/Elementor blocks).
   ============================================================ */

:root{
  /* -- brand palette -- */
  --black:#0f172a;       /* deep slate/navy — dark surfaces, headings, body text */
  --charcoal:#1e293b;
  --charcoal-2:#243347;
  --gold:#c5a059;        /* warm gold — accents, eyebrows, tags */
  --gold-deep:#a9824a;
  --red:#b7473f;         /* brand red, matches the logo mark — CTAs, primary actions */
  --red-bright:#d3564c;
  --red-deep:#8a352e;
  --white:#fff;
  --off-white:#f8fafc;
  --paper-alt:#eef2f7;
  --line:#e2e8f0;
  --line-strong:#cbd5e1;
  --muted:#5b6472;
  --ink:var(--black);

  /* -- surfaces -- */
  --surface:var(--white);
  --surface-alt:var(--paper-alt);
  --body-bg:var(--off-white);

  /* -- elevation + shape -- */
  --shadow-sm:0 2px 14px -6px rgba(15,23,42,.16);
  --shadow-md:0 18px 38px -16px rgba(15,23,42,.22);
  --shadow-lg:0 32px 68px -22px rgba(15,23,42,.30);
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:8px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --grad-dark:linear-gradient(150deg,var(--black) 0%,var(--charcoal-2) 100%);
  --grad-red:linear-gradient(135deg,var(--red-bright) 0%,var(--red-deep) 100%);
  --grad-gold:linear-gradient(135deg,#d8b874 0%,var(--gold-deep) 100%);
  --amber:#b45309;
  --amber-deep:#92400e;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --surface:#161617;
    --surface-alt:#1e1e20;
    --body-bg:#0a0a0b;
    --ink:#f6f5f3;
    --muted:#a6a6a9;
    --line:#2a2a2c;
    --line-strong:#3a3a3d;
    --shadow-sm:0 2px 14px -6px rgba(0,0,0,.55);
    --shadow-md:0 18px 38px -16px rgba(0,0,0,.65);
    --shadow-lg:0 32px 68px -22px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"]{
  --surface:#161617;--surface-alt:#1e1e20;--body-bg:#0a0a0b;--ink:#f6f5f3;--muted:#a6a6a9;
  --line:#2a2a2c;--line-strong:#3a3a3d;
  --shadow-sm:0 2px 14px -6px rgba(0,0,0,.55);--shadow-md:0 18px 38px -16px rgba(0,0,0,.65);--shadow-lg:0 32px 68px -22px rgba(0,0,0,.75);
}

/* ---------------- reset / base ---------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--body-bg);color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.65;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:"Playfair Display",Georgia,serif;font-weight:500;color:var(--ink);text-wrap:balance;letter-spacing:-.01em;overflow-wrap:break-word}
p{margin:0;color:var(--muted)}
ul,ol{margin:0;padding:0}
li{list-style:none}
svg{display:block}
::selection{background:var(--red);color:var(--white)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.wrap{max-width:1360px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.wrap-narrow{max-width:800px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.wrap-read{max-width:1220px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px}
@media (max-width:700px){.grid-2{grid-template-columns:1fr}}

.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:500;display:flex;align-items:center;gap:9px;
}
.eyebrow::before{content:"";width:16px;height:2px;background:var(--black);display:inline-block;border-radius:2px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.num{font-variant-numeric:tabular-nums}
.icon{width:15px;height:15px;flex-shrink:0}

/* ---------------- skip link ---------------- */
.skip{position:fixed;top:-100px;left:16px;background:var(--black);color:var(--white);padding:10px 18px;z-index:999;font-size:13px;border-radius:var(--radius-sm)}
.skip:focus{top:16px}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:600;letter-spacing:.01em;
  padding:13px 24px;border-radius:999px;border:1px solid transparent;
  white-space:nowrap;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,border-color .2s,color .2s;
  cursor:pointer;
}
.btn .icon{width:13px;height:13px}
.btn-primary{background:var(--grad-red);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--red-deep);transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(138,53,46,.5)}
.btn-line{border-color:var(--line-strong);color:var(--ink);background:var(--surface)}
.btn-line:hover{border-color:var(--black);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-ghost{color:var(--ink);border-color:transparent}
.btn-ghost:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.btn-dark{background:var(--grad-dark);color:#fff;box-shadow:var(--shadow-sm)}
.btn-dark:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-outline-light{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.btn-outline-light:hover{background:rgba(255,255,255,.1);border-color:#fff;transform:translateY(-2px)}

/* ---------------- header (glass) ---------------- */
.site-header{
  position:sticky;top:0;z-index:40;background:rgba(250,249,247,.94);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(15,23,42,.08);
}
:root[data-theme="dark"] .site-header{background:rgba(10,10,11,.9);border-bottom-color:rgba(255,255,255,.08)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .site-header{background:rgba(10,10,11,.9);border-bottom-color:rgba(255,255,255,.08)}}
.site-header .bar{display:flex;align-items:center;gap:18px;height:92px}
.brand{display:flex;align-items:center;gap:10px;font-family:"Playfair Display",serif;font-weight:600;font-size:19px;color:var(--ink);margin-right:auto;flex-shrink:0}
.brand img{height:58px;width:auto}
.brand .logo-dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand .logo-light{display:none}
  :root:not([data-theme="light"]) .brand .logo-dark{display:block}
}
:root[data-theme="dark"] .brand .logo-light{display:none}
:root[data-theme="dark"] .brand .logo-dark{display:block}

.main-nav{display:flex;align-items:center;gap:2px;flex-shrink:0}
.main-nav>a{font-size:13.5px;color:var(--ink);opacity:.75;position:relative;padding:12px 10px;white-space:nowrap;transition:opacity .2s;border-radius:999px}
.main-nav>a::after{content:"";position:absolute;left:10px;right:calc(100% - 10px);bottom:6px;height:2px;background:var(--gold);border-radius:2px;transition:right .25s var(--ease)}
.main-nav>a:hover{opacity:1}
.main-nav>a:hover::after,.main-nav>a[aria-current="page"]::after{right:10px}
.main-nav>a[aria-current="page"]{opacity:1}

/* dropdown groups */
.nav-item{position:relative}
.nav-item>a{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;color:var(--ink);opacity:.75;position:relative;padding:12px 10px;white-space:nowrap;transition:opacity .2s;border-radius:999px}
.nav-item>a::after{content:"";position:absolute;left:10px;right:calc(100% - 10px);bottom:6px;height:2px;background:var(--gold);border-radius:2px;transition:right .25s var(--ease)}
.nav-item:hover>a,.nav-item:focus-within>a{opacity:1}
.nav-item:hover>a::after,.nav-item:focus-within>a::after,.nav-item>a[aria-current="page"]::after{right:10px}
.nav-item>a[aria-current="page"]{opacity:1}
.nav-item .caret{width:11px;height:11px;transition:transform .2s var(--ease)}
.nav-item:hover .caret,.nav-item:focus-within .caret{transform:rotate(180deg)}
.dropdown{
  position:absolute;top:100%;left:-4px;min-width:230px;padding:10px;margin-top:6px;
  background:var(--surface);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
  z-index:50;
}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:11px 14px;border-radius:var(--radius-sm);font-size:14px;color:var(--ink);transition:background .15s,color .15s}
.dropdown a:hover{background:var(--surface-alt);color:var(--gold-deep)}

.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.tel-link{
  display:flex;align-items:center;gap:6px;font-family:"IBM Plex Mono",monospace;font-size:13px;
  font-weight:500;color:var(--gold-deep);letter-spacing:.01em;padding:8px 13px;border-radius:999px;
  background:rgba(197,160,89,.12);border:1px solid rgba(197,160,89,.35);
  transition:color .2s,border-color .2s,background .2s,transform .2s;
}
.tel-link svg{width:14px;height:14px;flex-shrink:0}
.tel-link:hover{color:#fff;border-color:var(--gold-deep);background:var(--gold-deep);transform:translateY(-1px)}

.mobile-toggle{display:none}
.mobile-panel{display:none}

/* The full nav (8 items) plus a labeled phone pill plus the primary button
   only fits down to about this width — below it, drop the phone number's
   text (keep the icon) rather than let the row overflow the viewport. */
@media (max-width:1300px){
  .header-actions .tel-link{padding:8px;border-radius:50%}
  .header-actions .tel-link span{display:none}
}
@media (max-width:900px){
  .main-nav{display:none}
  /* Collapse to a tap-to-call icon rather than hiding the number outright —
     a phone-first CTA is too important to disappear on mobile. */
  .header-actions .tel-link{padding:9px;border-radius:50%}
  .header-actions .tel-link span{display:none}
  .site-header .bar{gap:14px}
  .brand{gap:8px}
  .brand .name span{display:none}
  .mobile-toggle{
    display:flex;align-items:center;justify-content:center;
    width:42px;height:42px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
    cursor:pointer;list-style:none;color:var(--ink);flex-shrink:0;background:var(--surface);
  }
  .mobile-toggle::-webkit-details-marker{display:none}
  .mobile-menu[open] .mobile-panel{display:block}
  .mobile-panel{
    position:fixed;inset:92px 0 0 0;background:var(--body-bg);z-index:39;
    overflow-y:auto;padding:28px clamp(20px,6vw,56px) 40px;
  }
  .mobile-panel a{display:block;padding:15px 0;border-bottom:1px solid var(--line);font-family:"Playfair Display",serif;font-weight:500;font-size:22px;color:var(--ink)}
  .mobile-panel .btn{margin-top:20px;width:100%;justify-content:center}
}
@media (max-width:480px){
  .brand{font-size:16px}
  .brand img{height:38px}
  .header-actions .btn-primary{display:none}
}

/* ---------------- footer ---------------- */
.site-footer{background:var(--grad-dark);color:#d8d8da}
.site-footer .wrap{padding-top:68px;padding-bottom:32px}
.foot-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.12)}
/* font-weight is explicit everywhere below because the site only loads
   Playfair Display in 500/600/700 (+500 italic) — any rule left at the
   browser default (400) silently falls back to a generic system serif
   instead of the intended typeface, which is what made this look off. */
.foot-brand{font-family:"Playfair Display",serif;font-weight:600;font-size:25px;letter-spacing:-.01em;color:#fff}
.foot-brand p{font-family:"Inter",sans-serif;font-size:14.5px;color:#aeaeb2;margin-top:14px;max-width:34ch;line-height:1.7}
.foot-contact{display:flex;flex-direction:column;gap:10px;margin-top:20px;font-family:"Inter",sans-serif;font-size:14.5px}
.foot-contact a{color:#eeeef0;font-weight:500;transition:color .2s}
.foot-contact a:hover{color:var(--gold)}
.foot-contact span{color:#aeaeb2;max-width:32ch;line-height:1.55}
.foot-col h4{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:20px}
.foot-col li{margin-bottom:12px}
.foot-col a{font-family:"Inter",sans-serif;font-size:14.5px;color:#d5d5d7;transition:color .2s,padding-left .2s}
.foot-col a:hover{color:#fff;padding-left:4px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:26px;padding-right:90px;font-family:"Inter",sans-serif;font-size:13px;color:#9a9a9e}
.foot-bottom a{color:#aeaeb2}
.foot-bottom a:hover{color:#fff}
@media (max-width:800px){.foot-top{grid-template-columns:1fr 1fr;row-gap:36px}.foot-brand{grid-column:1/-1}}
/* 3 link columns in a 2-col grid always strands the last one alone in row 2,
   leaving a lopsided gap next to whichever of the first two is taller — a
   single column avoids the orphan entirely on narrow phones. */
@media (max-width:520px){.foot-top{grid-template-columns:1fr;row-gap:32px}}

/* ---------------- hero (home) — full-bleed photo, text + form overlaid ---------------- */
/* min-height taller than the text content alone needs: object-fit:cover
   scales a photo to fill both dimensions of whatever box it's given, so a
   short-but-wide hero forces an aggressive crop that shows only a thin,
   zoomed-in slice of a portrait-oriented source photo. Giving the section
   more height lets the same photo cover the width with far less scaling,
   revealing more of the actual composition (the full globe, the skyline,
   the desk it's sitting on) instead of a tight crop of just the globe. */
.home-hero-fullbleed{position:relative;overflow:hidden;isolation:isolate;min-height:820px}
.hhfb-bg{position:absolute;inset:0;z-index:0}
/* scale(1.12): the stock photo library has a soft vignette baked into every
   source image's outer ~10% (transparent corners, now flattened to white) —
   a plain object-fit:cover crop sometimes lands close enough to the source's
   real edges to reveal it. The extra zoom guarantees the crop always comes
   from well inside that margin, regardless of the box's aspect ratio. */
.hhfb-bg img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.12)}
.hhfb-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(10,14,25,.92) 0%,rgba(10,14,25,.72) 38%,rgba(10,14,25,.32) 68%,rgba(10,14,25,.12) 100%);
}
.hhfb-content{
  /* padding-top/bottom only — this element is also .wrap, and a padding
     shorthand here would zero out .wrap's own left/right clamp() padding.
     That only went unnoticed on desktop because .wrap's max-width leaves a
     big auto-margin gutter there; on mobile (well under the max-width) it
     collapsed to zero, running text flush against the screen edge. */
  position:relative;z-index:2;display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;
  padding-top:96px;padding-bottom:88px;
}
.hhfb-text .eyebrow{color:var(--gold)}
.hhfb-text .eyebrow::before{background:var(--gold)}
.hhfb-text h1{color:#fff;font-size:clamp(2.5rem,4.2vw,3.8rem);line-height:1.06}
.hhfb-text .dek{color:rgba(255,255,255,.82);margin-top:22px;max-width:50ch;font-size:1.08rem}
.hhfb-stats{display:flex;margin-top:40px;padding-top:26px;border-top:1px solid rgba(255,255,255,.25)}
.hhfb-stats>div{padding:0 28px;border-right:1px solid rgba(255,255,255,.25)}
.hhfb-stats>div:first-child{padding-left:0}
.hhfb-stats>div:last-child{border-right:0}
.hhfb-stats b{display:block;font-family:"Playfair Display",Georgia,serif;font-size:1.7rem;color:#fff;font-weight:600}
.hhfb-stats span{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.65);margin-top:5px;
}
.hhfb-form-card{
  background:var(--surface);color:var(--ink);border-radius:var(--radius-lg);
  box-shadow:0 40px 80px -20px rgba(0,0,0,.5);padding:clamp(28px,3vw,40px);
}
.hhfb-form-card .eyebrow{color:var(--red)}
.hhfb-form-card .eyebrow::before{background:var(--red)}
.hhfb-form-card h2{font-size:1.6rem;margin-top:14px;line-height:1.15}
.hhfb-form-dek{color:var(--muted);margin-top:12px;font-size:.95rem;line-height:1.55}
.hhfb-form-card .lead-form{margin-top:24px}
@media (max-width:900px){
  .home-hero-fullbleed{min-height:0}
  .hhfb-content{grid-template-columns:1fr;padding-top:56px;padding-bottom:40px}
  .hhfb-stats{flex-wrap:wrap;row-gap:16px}
  .hhfb-stats>div{padding:0 20px 0 0;border-right:0;min-width:40%}
}

/* dark glass panel */
.file-rail{
  border-radius:var(--radius-lg);background:var(--grad-dark);color:#fff;overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.file-rail-head{padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;align-items:center}
.file-rail-head span{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#a9a9ac}
.file-rail-head span.mono{color:var(--gold)}
.file-rail-row{display:flex;justify-content:space-between;align-items:baseline;padding:16px 22px;border-bottom:1px solid rgba(255,255,255,.08)}
.file-rail-row:last-child{border-bottom:0}
.file-rail-row .l{font-size:13px;color:#a9a9ac}
.file-rail-row .v{font-family:"IBM Plex Mono",monospace;font-size:15px;color:#fff;font-weight:500}

/* ---------------- section rhythm ---------------- */
/* Tightened from 96/60px — at the old values, two consecutive default
   sections added up to 192px of padding between their content (96 bottom +
   96 top), which is what actually read as "too much white space" on long
   pages, not any single oversized gap. */
section{padding:68px 0}
section.tight{padding:44px 0}
section.alt{background:var(--surface-alt)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px;flex-wrap:wrap;scroll-margin-top:112px}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.75rem);font-weight:700;letter-spacing:-.015em}
.sec-head .eyebrow{margin-bottom:14px}
.sec-head .link-more{font-size:13.5px;color:var(--black);white-space:nowrap;border-bottom:1px solid var(--line-strong);padding-bottom:2px;transition:border-color .2s,color .2s}
.sec-head .link-more:hover{border-color:var(--gold-deep);color:var(--gold-deep)}
.lede{font-size:1.08rem;max-width:66ch;color:var(--muted)}

.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ---------------- card base ---------------- */
.card{
  display:flex;flex-direction:column;
  background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
a.card:hover,.card.is-hoverable:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.card-media{aspect-ratio:4/2.7;overflow:hidden;border-radius:var(--radius-lg) var(--radius-lg) 0 0;position:relative;flex-shrink:0}
/* base scale(1.12) crops past the stock library's vignetted corners (see
   .hhfb-bg img comment); the hover rule below is bumped to 1.2 to keep the
   same relative +7% hover-zoom feel on top of that new base. */
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);transform:scale(1.12)}
a.card:hover .card-media img{transform:scale(1.2)}

/* per-category icon badge + duotone tint — real visual differentiation
   across the shared/limited photo pool, without fabricating unique photos */
.ph-icon{position:absolute;top:14px;left:14px;width:38px;height:38px;border-radius:50%;background:rgba(15,23,42,.6);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:#fff;z-index:2}
.ph-icon svg{width:19px;height:19px}
.card-media::after,.file-hero-frame::after{content:"";position:absolute;inset:0;mix-blend-mode:multiply;opacity:.5;pointer-events:none;border-radius:inherit}
.ph-worker.card-media::after,/* custom SVG hero art (replaces stock photography) — self-colored, so the
   generic photo-tint overlay above is redundant and switched off here */
.cat-art{width:100%;height:100%;display:block;transition:transform .5s var(--ease)}
a.card:hover .card-media.art .cat-art{transform:scale(1.05)}
.card-media.art::after,.file-hero-frame.art::after{content:none}
.ph-worker .card-media::after,.file-hero-frame.ph-worker::after{background:linear-gradient(160deg,#0c0c0d,#48484c)}
.ph-family.card-media::after,.ph-family .card-media::after,.file-hero-frame.ph-family::after{background:linear-gradient(160deg,#6e241d,#b7473f)}
.ph-student.card-media::after,.ph-student .card-media::after,.file-hero-frame.ph-student::after{background:linear-gradient(160deg,#132531,#2f5169)}
.ph-business.card-media::after,.ph-business .card-media::after,.file-hero-frame.ph-business::after{background:linear-gradient(160deg,#2a1c0c,#6b481f)}
.ph-citizen.card-media::after,.ph-citizen .card-media::after,.file-hero-frame.ph-citizen::after{background:linear-gradient(160deg,#0c0c0d,#b7473f)}
.ph-investor.card-media::after,.ph-investor .card-media::after,.file-hero-frame.ph-investor::after{background:linear-gradient(160deg,#0f2b21,#1f4a3c)}
.ph-talent.card-media::after,.ph-talent .card-media::after,.file-hero-frame.ph-talent::after{background:linear-gradient(160deg,#2a0c1c,#6b1f45)}
.ph-review.card-media::after,.ph-review .card-media::after,.file-hero-frame.ph-review::after{background:linear-gradient(160deg,#18181a,#48484c)}
.ph-visitor.card-media::after,.ph-visitor .card-media::after,.file-hero-frame.ph-visitor::after{background:linear-gradient(160deg,#0c1a2a,#1f4568)}
.card-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}

/* ---------------- program / service / worldwide card grid ---------------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px}
.card-grid-4up{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.program-card .tag{
  display:inline-flex;align-self:flex-start;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);background:var(--surface-alt);
  padding:5px 11px;border-radius:999px;margin-bottom:14px;
}
.program-card h3{font-size:1.28rem;line-height:1.16;margin-bottom:10px}
.program-card p{font-size:14.5px;color:var(--muted);flex:1}
.program-card .go{
  display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;letter-spacing:.04em;color:var(--black);
}
.program-card .go .arrow{transition:transform .25s var(--ease);color:var(--red)}
a.card:hover .go .arrow{transform:translateX(4px)}

/* ---------------- news / insights card grid ---------------- */
.news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.news-card{
  padding:26px 26px 24px;border-radius:var(--radius-md);background:var(--surface);
  box-shadow:var(--shadow-sm);border-top:3px solid var(--black);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;display:flex;flex-direction:column;
}
a.news-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-top-color:var(--red)}
.news-card time{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted)}
.news-card .cat{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--gold-deep);text-transform:uppercase;letter-spacing:.07em;display:block;margin:8px 0 10px}
.news-card h3{font-size:1.12rem;line-height:1.28}
.news-card p{font-size:13.8px;color:var(--muted);margin-top:10px;flex:1}
.news-card .go{margin-top:16px;display:inline-flex;align-items:center;gap:6px;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--black)}
.news-card .go .arrow{color:var(--red)}

/* ---------------- market gateways (home) ---------------- */
.gateways{display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px}
.gateway{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:320px;
  display:flex;flex-direction:column;justify-content:flex-end;padding:32px;color:#fff;
  box-shadow:var(--shadow-md);transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.gateway::before{content:"";position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s var(--ease);filter:grayscale(.25)}
.gateway::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,42,.1) 0%,rgba(15,23,42,.92) 100%)}
.gateway:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.gateway:hover::before{transform:scale(1.08)}
.gateway.g-canada::before{background-image:url('assets/images/original-4e62bbb9e3869aa4.webp')}
.gateway.g-usa::before{background-image:url('assets/images/original-23112cac98c6fed4.webp')}
.gateway.g-worldwide::before{background-image:url('assets/images/original-a9b15fbf7481cb4a.webp')}
.gateway>*{position:relative;z-index:1}
.gateway .eyebrow{color:#fff;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);align-self:flex-start;padding:6px 12px;border-radius:999px}
.gateway .eyebrow::before{background:var(--gold)}
.gateway h3{font-size:1.7rem;margin:16px 0 12px;line-height:1.1;color:#fff}
.gateway p{font-size:14px;color:#d8d8da}
.gateway .go{font-family:"IBM Plex Mono",monospace;font-size:12px;color:#fff;letter-spacing:.04em;margin-top:18px;display:inline-flex;align-items:center;gap:6px}
.gateway .go .arrow{transition:transform .25s var(--ease);color:var(--red-bright)}
.gateway:hover .go .arrow{transform:translateX(4px)}
@media (max-width:860px){.gateways{grid-template-columns:1fr}}

/* ---------------- process ---------------- */
.process-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-top:44px}
.process-card{display:block;padding:28px 24px;border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.process-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.process-card .n{
  width:40px;height:40px;border-radius:50%;background:var(--grad-dark);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:"Playfair Display",serif;font-weight:600;font-size:1.05rem;margin-bottom:16px;
}
.process-card h4{font-size:1.05rem;margin-bottom:8px}
.process-card p{font-size:13.8px;color:var(--muted)}

/* ---------------- stat grid ---------------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin:0}
.stat-card{
  padding:28px 26px;border-radius:var(--radius-md);background:var(--grad-dark);color:#fff;
  box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.stat-card:nth-child(3n){background:var(--grad-gold)}
.stat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.stat-card .v{font-family:"Playfair Display",serif;font-weight:600;font-size:2.3rem;line-height:1;font-variant-numeric:tabular-nums}
.stat-card .l{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-top:12px}

/* ---------------- pull quote ---------------- */
.pull{padding:76px 0;text-align:center}
.pull blockquote{font-family:"Playfair Display",serif;font-style:italic;font-weight:500;font-size:clamp(1.5rem,3.4vw,2.3rem);line-height:1.35;color:var(--ink);max-width:800px;margin:0 auto;text-wrap:balance}
.pull cite{display:block;margin-top:26px;font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pull .mark{width:36px;height:3px;border-radius:2px;background:var(--gold);margin:0 auto 30px}

/* ---------------- split (text + image, alternating) ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.split.rev .media{order:2}
/* A hard-edged card with a strong shadow reads as a separate, pasted-on
   sticker next to the plain text column beside it. Fading the edge facing
   the text softens that seam so the two columns read as one composition
   instead of two isolated elements. */
.media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg);
  box-shadow:0 20px 45px -30px rgba(15,23,42,.25);
  mask-image:linear-gradient(to right,transparent 0,transparent 3%,#000 20%);
  -webkit-mask-image:linear-gradient(to right,transparent 0,transparent 3%,#000 20%);
}
.media-portrait img{aspect-ratio:4/5;object-position:top center}
.split .cap{margin-top:14px;font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:14px;color:var(--ink);letter-spacing:.05em}
.split h2{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:700;letter-spacing:-.015em;margin-bottom:18px}
.split h3{font-size:1.5rem;margin-bottom:14px}
.split p+p{margin-top:14px}
@media (max-width:820px){.split{grid-template-columns:1fr}.split.rev .media{order:0}}

/* ---------------- team grid (standard professional-services bio grid) ----------------
   Portrait photo, name, title — links through to a full bio page. Deliberately
   plain: this is the pattern every real law/consulting firm site uses, and it
   sidesteps the "uneven bio length" problem entirely by not showing bios here. */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:28px}
.team-card .card-media{aspect-ratio:3/3.6}
.team-card .card-media img{filter:grayscale(.35)}
.team-card h3{font-size:1.15rem;margin-bottom:6px}
.team-card .role{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--gold-deep);line-height:1.5;margin-bottom:16px;min-height:32px}
.team-card .go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.04em;color:var(--ink)}
.team-card .go .arrow{transition:transform .25s var(--ease);color:var(--red)}
a.card:hover .go .arrow{transform:translateX(4px)}

/* ---------------- FAQ (accordion cards) ---------------- */
.faq-list{display:flex;flex-direction:column;gap:14px}
.faq-item{
  border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-sm);
  padding:6px 24px;transition:box-shadow .25s var(--ease);
}
.faq-item[open]{box-shadow:var(--shadow-md)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:20px 36px 20px 0;position:relative;
  font-family:"Playfair Display",serif;font-style:italic;font-weight:500;font-size:1.14rem;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";position:absolute;right:0;top:50%;transform:translateY(-50%) rotate(0deg);
  width:28px;height:28px;border-radius:50%;background:var(--black);
  background-image:linear-gradient(0deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%),linear-gradient(90deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%);
  background-size:12px 12px;background-position:center;background-repeat:no-repeat;
  transition:transform .3s var(--ease),background .2s;
}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(135deg);background-color:var(--red)}
.faq-item .a{font-size:14.8px;color:var(--muted);padding:0 0 22px;max-width:66ch}

/* ---------------- article / detail layout ---------------- */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-bottom:22px}
.breadcrumb a{color:var(--muted);transition:color .2s}
.breadcrumb a:hover{color:var(--gold-deep)}
.breadcrumb .sep{color:var(--line-strong)}
.breadcrumb [aria-current]{color:var(--ink);font-weight:600}
.file-head{padding:48px 0 0}
.file-head .eyebrow{margin-bottom:18px}
.file-head h1{font-size:clamp(2.1rem,4.4vw,3.3rem);line-height:1.05}
.file-head .dek{font-size:1.08rem;color:var(--muted);margin-top:20px;max-width:62ch}
.file-hero{margin-top:36px}
.file-hero-frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.file-hero-frame img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block}
/* The category-icon badge reads well on a grid of small cards (helps tell
   categories apart at a glance) but on a single full-width hero photo it just
   looks like an unexplained symbol stamped on the picture — drop it here. */
.file-hero-frame .ph-icon{display:none}
.file-hero figcaption{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:14px;color:var(--ink);letter-spacing:.05em;margin-top:10px}

/* Split hero: text left, photo/art right, contained within the same
   .wrap-read max-width as the rest of the page — never wider than the page
   body below it — while still dissolving softly into the text via a mask +
   negative margin, both PERCENTAGE-based (of the grid column) so they scale
   proportionally at every width instead of blowing up at wide screens (old
   100vw calc()) or swallowing the text column at medium desktop widths (a
   later fixed-px attempt). Used by every program/service/guide/worldwide
   detail page. */
/* Same absolute-positioning technique as .home-hero above, and for the same
   reason: the photo's right edge must land exactly on .wrap-read's own
   right edge (the same boundary the card grid below it uses), which a
   grid-column + negative-margin approach doesn't reliably guarantee once
   aspect-ratio is in the mix. Photo height is driven by the text column's
   own content height (top:0;bottom:0 inside a position:relative row with
   no explicit height) — self-consistent with no arbitrary number to tune. */
/* A tinted banner band, distinct from the plain white page background —
   without it, a hero photo of similar size/shape to a regular content
   photo further down the page (e.g. an "our story" split section) reads as
   just the first of a repeating pattern rather than a hero. */
.file-head-split{padding:40px 0 48px;background:var(--surface-alt)}
.file-head-split .wrap-read,.file-head-split .wrap{position:relative;min-height:460px;display:flex;align-items:center}
.file-head-split .fhs-text{position:relative;z-index:2;width:50%;padding:28px 32px 28px 0}
.file-head-split .fhs-text .breadcrumb{margin-bottom:20px}
.file-head-split .fhs-text .eyebrow{margin-bottom:18px}
.file-head-split .fhs-text h1{font-size:clamp(1.9rem,2.8vw,2.6rem);line-height:1.1}
.file-head-split .fhs-text .dek{font-size:1.05rem;color:var(--muted);margin-top:18px;max-width:48ch}
/* right uses the exact same value as .wrap/.wrap-read's own padding — an
   absolutely positioned child's inset is relative to the padding EDGE (the
   outer boundary, including padding), while every normal-flow sibling
   (card grids, etc.) sits inside the padded CONTENT box instead. right:0
   would therefore land 20-56px further out than every other element's
   right edge on the page; matching the padding value exactly closes that
   gap to zero. */
.file-head-split .fhs-media{position:absolute;top:0;right:clamp(20px,4vw,56px);bottom:0;left:52%;overflow:hidden}
.file-head-split .fhs-media img,.file-head-split .fhs-media svg.cat-art{
  width:100%;height:100%;object-fit:cover;display:block;
  mask-image:linear-gradient(to right,transparent 0,transparent 8%,#000 34%,#000 90%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0,transparent 8%,#000 34%,#000 90%,transparent 100%);
}
/* Real photos only (not the generated SVG art, which has no such vignette):
   see the .hhfb-bg img comment above for why the extra zoom is needed. */
.file-head-split .fhs-media img{transform:scale(1.12)}
.file-head-split .fhs-media .ph-icon{display:none}
.file-head-split .fhs-media .fhs-cap{
  position:absolute;right:16px;bottom:16px;z-index:2;font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.05em;color:#fff;background:rgba(15,23,42,.55);backdrop-filter:blur(4px);
  padding:7px 12px;border-radius:999px;
}
/* Soft top/bottom/right blend to match the left-edge dissolve — without it,
   the photo's other three edges are a hard crop against the tinted banner
   band, which reads as a pasted-in rectangle rather than something that
   belongs in the page. Same tint as .file-head-split's own background, so
   the fade disappears into it seamlessly. Painted on top (not a mask, which
   only reveals whatever sits behind and can end up barely visible against a
   bright photo) so the blend reads consistently regardless of photo content. */
.file-head-split .fhs-media::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom,var(--surface-alt) 0,transparent 10%),
    linear-gradient(to top,var(--surface-alt) 0,transparent 10%),
    linear-gradient(to left,var(--surface-alt) 0,transparent 16%);
}
@media (max-width:900px){
  .file-head-split .wrap-read,.file-head-split .wrap{flex-direction:column;align-items:stretch;min-height:0}
  .file-head-split .fhs-text{width:100%;padding-right:0}
  /* position:relative (not static) so .fhs-cap's absolute bottom/right still
     anchors to this box — static would let it fall through to the taller
     .wrap-read ancestor and land on top of the body text below. */
  .file-head-split .fhs-media{
    position:relative;top:auto;right:auto;bottom:auto;left:auto;order:-1;margin-bottom:24px;border-radius:var(--radius-lg);
    aspect-ratio:4/3;min-height:240px;
  }
  .file-head-split .fhs-media img,.file-head-split .fhs-media svg.cat-art{mask-image:none;-webkit-mask-image:none}
  /* The top/bottom/right tint blend is sized for the wide desktop banner —
     on the compact mobile card it eats a disproportionate chunk of a much
     smaller box, making photos look washed-out/pillarboxed instead of a
     clean self-contained card. */
  .file-head-split .fhs-media::after{display:none}
}

.file-body{display:grid;grid-template-columns:1fr 300px;gap:64px;padding-top:56px}
.file-main article>*+*{margin-top:20px}
.file-main h2{font-size:1.55rem;font-weight:700;margin-top:44px;padding-top:24px;border-top:1px solid var(--line);scroll-margin-top:112px}
.file-main h2:first-child,.file-main .page-toc-top+h2{margin-top:0;padding-top:0;border-top:0}
.file-main p{font-size:15.5px;color:var(--muted)}
.file-main ul.bul{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.file-main ul.bul li{font-size:15px;padding-left:22px;position:relative;color:var(--muted)}
.file-main ul.bul li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:2px;background:var(--gold)}
.inline-cta{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin:36px 0;padding:26px 28px;border-radius:var(--radius-md);background:var(--grad-dark);box-shadow:var(--shadow-sm);
}
.inline-cta h4{color:#fff;font-size:1.1rem;margin-bottom:6px}
.inline-cta p{color:#b3b3b6;font-size:13.5px;max-width:44ch}
.inline-cta .btn{flex-shrink:0}
.related-grid{margin-top:24px}
.related-grid .card-media{aspect-ratio:16/9}

.file-rail-sticky{position:sticky;top:100px;align-self:start;display:flex;flex-direction:column;gap:24px}
.bio-top{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start}
.bio-photo{margin:0}
.bio-facts-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-top:24px}
@media (max-width:820px){.bio-top{grid-template-columns:1fr}.bio-photo{max-width:320px}}
.bio-card{border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);padding:32px 36px}
.bio-card h4{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.bio-card .prose p{margin-top:0;font-size:15px;line-height:1.7}
.bio-card .prose p+p{margin-top:16px}
.facts-box{border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden}

/* ---------------- on-this-page jump menu (top of article) ---------------- */
/* Lives at the top of the article, not the sidebar — a sidebar rail drops to
   the bottom of the page on mobile (.file-rail-sticky goes position:static
   and stacks after the article), which defeats the point of a jump menu
   entirely on the one screen size where it matters most. */
.page-toc-top{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 10px;
  background:var(--surface-alt);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:16px 20px;margin-bottom:12px;
}
.page-toc-top-label{
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);flex-shrink:0;
}
.page-toc-top-links{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.page-toc-top-links a{
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:999px;padding:6px 14px;max-width:100%;
  transition:background .15s,border-color .15s,color .15s;
}
.page-toc-top-links a:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff}
@media (max-width:640px){.page-toc-top{flex-direction:column;align-items:stretch}}
.chip{display:inline-flex;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.03em;color:var(--gold-deep);background:var(--surface-alt);padding:6px 12px;border-radius:999px}
.facts-box h4{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:16px 20px;border-bottom:1px solid var(--line)}
.facts-box .row{display:flex;justify-content:space-between;gap:14px;padding:13px 20px;border-bottom:1px solid var(--line);font-size:13.5px}
.facts-box .row:last-child{border-bottom:0}
.facts-box .row .l{color:var(--muted)}
.facts-box .row .v{color:var(--ink);font-weight:600;text-align:right}
.cta-box{background:var(--grad-dark);color:#f1f1f1;padding:28px;border-radius:var(--radius-md);box-shadow:var(--shadow-md)}
.cta-box h4{font-family:"Playfair Display",serif;font-weight:600;font-size:1.25rem;color:#fff;margin-bottom:10px}
.cta-box p{font-size:13.5px;color:#b9b9bb;margin-bottom:16px}
.cta-box .btn-primary,.cta-box .cta-box-call{width:100%;justify-content:center}
.cta-box-call{display:flex;align-items:center;gap:8px;margin-bottom:10px;border-color:rgba(255,255,255,.35);color:#fff;background:transparent}
.cta-box-call:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.cta-box-call svg{width:16px;height:16px;flex-shrink:0}
.cta-box-trust{margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);font-size:11.5px;color:#9a9a9e;line-height:1.6}
.cta-box-trust a{color:#c9c9cc;border-bottom:1px solid rgba(255,255,255,.3)}
.cta-box-trust a:hover{color:#fff;border-color:#fff}
.source-note{font-size:12px;color:var(--muted);line-height:1.6}
.source-note a{color:var(--black);border-bottom:1px solid var(--line-strong)}
.caution-box{border-radius:var(--radius-md);border-left:4px solid var(--amber);padding:18px 20px;background:var(--surface);box-shadow:var(--shadow-sm);font-size:13px;color:var(--muted)}
.caution-box b{color:var(--amber-deep);display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
@media (max-width:900px){.file-body{grid-template-columns:1fr}.file-rail-sticky{position:static}}

/* ---------------- application-review feature callout ---------------- */
.review-callout{
  position:relative;border-radius:var(--radius-lg);border:1px solid rgba(183,71,63,.25);border-left:5px solid var(--red);
  background:linear-gradient(180deg,rgba(183,71,63,.05) 0%,var(--surface) 130px);box-shadow:var(--shadow-md);
  padding:clamp(28px,4vw,44px);text-align:center;
}
.review-callout-badge{
  display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.08em;
  color:#fff;background:var(--red);padding:7px 16px;border-radius:999px;margin-bottom:18px;
}
.review-callout h2{max-width:22ch;margin:0 auto 14px}
.review-callout-lede{max-width:62ch;margin:0 auto 30px;color:var(--muted);font-size:1.02rem;line-height:1.6}
.review-callout-points{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left;margin-bottom:32px}
.review-callout-points>div{padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md)}
.review-callout-points b{display:block;font-family:"Playfair Display",serif;font-weight:600;font-size:1.05rem;margin-bottom:6px}
.review-callout-points span{font-size:13.5px;color:var(--muted);line-height:1.5}
.review-callout-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.review-callout-ctas .btn-primary{display:flex;align-items:center;gap:8px}
.review-callout-ctas .btn-primary svg{width:17px;height:17px}
@media (max-width:700px){
  .review-callout-points{grid-template-columns:1fr}
  .review-callout-ctas{flex-direction:column}
  .review-callout-ctas .btn{width:100%;justify-content:center}
}

/* ---------------- CTA band ---------------- */
.cta-band{background:var(--grad-dark);color:var(--off-white);padding:64px 0;text-align:center}
.cta-band .eyebrow{justify-content:center;color:var(--gold)}
.cta-band .eyebrow::before{background:#fff}
.cta-band h2{color:#fff;font-size:clamp(1.9rem,4vw,2.8rem);margin:18px auto 14px;max-width:22ch}
.cta-band p{color:#b3b3b6;max-width:52ch;margin:0 auto 30px;font-size:15.5px}
.cta-band .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------------- hero assessment wizard ---------------- */
.assess-panel-body{padding:22px}
.assess-progress{display:flex;gap:6px;margin-bottom:20px}
.assess-progress span{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.16);transition:background .3s}
.assess-progress span.active{background:var(--red-bright)}
.assess-kicker{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;color:#a9a9ac;margin-bottom:16px}
.assess-form{display:flex;flex-direction:column;gap:14px}
.assess-step{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.assess-step[hidden]{display:none}
.assess-row{display:flex;gap:12px}
.assess-row .btn{flex:1;justify-content:center}
.assess-wizard .field input,.assess-wizard .field-select select{background:#fff;color:var(--ink)}
.assess-wizard .consent{color:#c7c7c9;font-size:12px}

/* ---------------- eligibility quiz ---------------- */
.elig-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);padding:clamp(28px,4vw,48px);text-align:center;
}
.elig-card>.eyebrow{justify-content:center}
.elig-card>h2{max-width:26ch;margin:14px auto 28px}
.elig-quiz{max-width:520px;margin:0 auto;text-align:left}
.elig-step-label{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.elig-q{font-size:1.3rem;margin-bottom:20px}
.elig-options{display:flex;flex-direction:column;gap:10px}
.elig-opt{
  display:block;width:100%;text-align:left;padding:14px 18px;border-radius:var(--radius-md);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font-size:15px;
  font-weight:500;transition:border-color .2s,background .2s,transform .2s;
}
.elig-opt:hover{border-color:var(--red);background:var(--surface-alt);transform:translateX(2px)}
.elig-back{margin-top:18px;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.elig-back[hidden]{display:none}
.elig-panel[hidden]{display:none}
.elig-panel[data-panel="result"]{text-align:center}
.elig-result-title{font-size:1.5rem;max-width:26ch;margin:0 auto 12px}
.elig-result-note{font-size:13.5px;color:var(--muted);max-width:48ch;margin:0 auto 26px;line-height:1.6}
.elig-result-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.elig-call{display:flex;align-items:center;gap:8px}
.elig-call svg{width:18px;height:18px}
.elig-restart{font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
@media (max-width:560px){.elig-result-ctas{flex-direction:column}.elig-result-ctas .btn{width:100%;justify-content:center}}

/* ---------------- lead form (floating labels) ---------------- */
.lead-form{display:flex;flex-direction:column;gap:18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{position:relative}
.field input,.field textarea{
  width:100%;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);
  padding:22px 16px 10px;border-radius:14px;font-size:15px;transition:border-color .2s,box-shadow .2s;
}
.field textarea{padding-top:24px;resize:vertical;min-height:100px}
.field label{
  position:absolute;left:17px;top:19px;font-size:14.5px;color:var(--muted);
  transition:top .18s var(--ease),font-size .18s var(--ease),color .18s var(--ease);pointer-events:none;
}
.field input:focus,.field textarea:focus{border-color:var(--red);box-shadow:0 0 0 4px rgba(183,71,63,.12)}
.field input:focus~label,.field input:not(:placeholder-shown)~label,
.field textarea:focus~label,.field textarea:not(:placeholder-shown)~label{
  top:8px;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;font-family:"IBM Plex Mono",monospace;color:var(--red);
}
.field.field-select{display:flex;flex-direction:column;gap:7px}
.field.field-select label{position:static;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;font-family:"IBM Plex Mono",monospace;color:var(--muted);font-weight:600}
.field.field-select select{
  border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);
  padding:13px 16px;border-radius:14px;font-size:15px;transition:border-color .2s,box-shadow .2s;
}
.field.field-select select:focus{border-color:var(--red);box-shadow:0 0 0 4px rgba(183,71,63,.12)}
.field-hint{font-size:12px;color:var(--muted);margin-top:-8px}
.lead-form .consent{display:flex;flex-direction:row;align-items:flex-start;gap:10px;font-size:12.5px;color:var(--muted)}
.lead-form .consent input{width:17px;height:17px;margin-top:2px;flex-shrink:0;accent-color:var(--red)}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}
.form-mailto-note{margin-top:14px;font-size:13px;line-height:1.5;color:var(--muted);background:var(--surface-alt);padding:12px 14px;border-radius:var(--radius-sm)}

/* ---------------- generic content blocks ---------------- */
.prose{max-width:72ch}
.prose h2{margin-top:48px;padding-top:28px;font-size:1.5rem;font-weight:700;border-top:1px solid var(--line)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose p{color:var(--muted)}
.prose p+p,.prose ul+p,.prose p+ul{margin-top:16px}
.prose ul{padding-left:20px}
.prose li{list-style:disc;margin-bottom:8px;font-size:15px;color:var(--muted)}

/* ---------------- comparison / decision-matrix table ---------------- */
.compare-table-wrap{overflow-x:auto;margin:24px 0;border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}
.compare-table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.compare-table th,.compare-table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line)}
.compare-table thead th{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);background:var(--surface-alt);font-weight:500;
}
.compare-table thead th:first-child{color:var(--muted)}
.compare-table tbody th{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.03em;color:var(--muted);
  font-weight:500;white-space:nowrap;background:var(--surface-alt);
}
.compare-table td{color:var(--ink);font-weight:500}
.compare-table tr:last-child td,.compare-table tr:last-child th{border-bottom:0}

/* two-program side-by-side intro (distinct from the plain table below it) */
.compare-intro-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch;margin:20px 0 32px}
.compare-intro-card{padding:22px 24px;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.compare-intro-label{
  display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;letter-spacing:.08em;
  color:var(--gold-deep);background:var(--surface-alt);padding:5px 12px;border-radius:999px;margin-bottom:12px;
}
.compare-intro-card h3{font-size:1.15rem;margin-bottom:8px}
.compare-intro-card p{color:var(--muted);font-size:14px;margin-bottom:12px}
.compare-intro-card ul.bul{margin-top:0}
.compare-intro-card ul.bul li{font-size:13px}
.compare-intro-vs{
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  background:var(--grad-dark);color:#fff;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;
  align-self:center;flex-shrink:0;
}
@media (max-width:760px){
  .compare-intro-grid{grid-template-columns:1fr}
  .compare-intro-vs{margin:0 auto}
}

.filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px}
.filter-bar button,.filter-bar a{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.04em;
  padding:10px 16px;border:1px solid var(--line-strong);border-radius:999px;
  color:var(--muted);background:var(--surface);cursor:pointer;transition:background .2s,color .2s,border-color .2s;
}
.filter-bar .active,.filter-bar button:hover,.filter-bar a:hover{background:var(--black);color:#fff;border-color:var(--black)}

.glossary-grid{columns:2;column-gap:48px}
@media (max-width:700px){.glossary-grid{columns:1}}
.gterm{break-inside:avoid;margin-bottom:26px}
.gterm dt{font-family:"Playfair Display",serif;font-weight:600;font-size:1.05rem;color:var(--ink);margin-bottom:5px}
.gterm dt .cat{font-family:"IBM Plex Mono",monospace;font-size:9.5px;color:var(--gold-deep);text-transform:uppercase;margin-left:8px;letter-spacing:.05em}
.gterm dd{margin:0;font-size:13.8px;color:var(--muted)}

.two-col-list{columns:2;column-gap:40px}
@media (max-width:700px){.two-col-list{columns:1}}
.two-col-list li{break-inside:avoid;font-size:14.5px;padding:9px 0 9px 30px;position:relative;border-bottom:1px solid var(--line);color:var(--muted)}
.two-col-list li::before{
  content:"";position:absolute;left:0;top:9px;width:18px;height:18px;border-radius:50%;background:var(--red);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/60% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/60% no-repeat;
}

.simple-hero{padding:64px 0 50px;border-bottom:1px solid var(--line)}
.simple-hero h1{font-size:clamp(2.2rem,4.6vw,3.4rem)}
.simple-hero .dek{font-size:1.08rem;color:var(--muted);margin-top:18px;max-width:60ch}

.credibility-strip{background:var(--surface-alt);padding:20px 0}
.credibility-strip .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.credibility-strip p{font-size:13.5px;color:var(--muted)}
.credibility-strip p b{color:var(--ink)}
.credibility-strip a{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--black);border-bottom:1px solid var(--line-strong);transition:border-color .2s,color .2s}
.credibility-strip a:hover{border-color:var(--gold-deep);color:var(--gold-deep)}

/* -- shared min-width reset: grid/flex tracks default to a min-content
   min-width, which lets one long unbroken word push a track wider than
   its column. reset explicitly everywhere a track holds running text. -- */
.hero-grid>*,.split>*,.gateways>*,.file-body>*,.foot-top>*,
.card-grid>*,.news-grid>*,.team-grid>*,.process-grid>*,.stat-grid>*{min-width:0}

/* ---------------- WhatsApp floating widget ---------------- */
.whatsapp-fab{
  position:fixed;right:24px;bottom:24px;z-index:60;
  width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px -8px rgba(0,0,0,.4);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.whatsapp-fab svg{width:30px;height:30px}
.whatsapp-fab:hover{transform:scale(1.08);box-shadow:0 14px 34px -8px rgba(0,0,0,.5)}
@media (max-width:600px){.whatsapp-fab{right:16px;bottom:86px;width:52px;height:52px}.whatsapp-fab svg{width:26px;height:26px}}

/* ---------------- mobile sticky call bar ---------------- */
/* Phone calls are this practice's highest-intent conversion path. Fixed to
   the bottom on mobile so "call" and "book" stay one tap away through a
   long scroll, instead of only at the header or wherever a CTA band lands.
   Hidden on desktop, where the header's phone pill + button already do this. */
.mobile-cta-bar{display:none}
@media (max-width:600px){
  .mobile-cta-bar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:56;height:60px;
    box-shadow:0 -6px 20px -6px rgba(15,23,42,.25);
  }
  .mobile-cta-bar a{
    flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
    font-family:"IBM Plex Mono",monospace;font-size:13.5px;font-weight:500;letter-spacing:.01em;
  }
  .mcb-call{background:var(--surface);color:var(--ink);border-top:1px solid var(--line)}
  .mcb-call svg{width:17px;height:17px;color:var(--gold-deep);flex-shrink:0}
  .mcb-book{background:var(--grad-red);color:#fff}
  .mcb-book svg{width:15px;height:15px;flex-shrink:0}
  /* reserve room so the fixed bar never covers the last of the page's own
     content — footer links included, the same class of bug as the WhatsApp
     button covering "Disclaimer" at tablet width. */
  body{padding-bottom:60px}
}

@media print{.site-header,.site-footer,.cta-band,.mobile-toggle,.whatsapp-fab,.mobile-cta-bar{display:none}}

/* Original inline declarations, extracted without changing their cascade. */
:is(#azimi-inline-a#azimi-inline-b#azimi-inline-c,[data-azimi-style="s001"]){margin-top:18px}
:is(#azimi-inline-a#azimi-inline-b#azimi-inline-c,[data-azimi-style="s002"]){margin-top:16px}
:is(#azimi-inline-a#azimi-inline-b#azimi-inline-c,[data-azimi-style="s003"]){margin-top:22px}
:is(#azimi-inline-a#azimi-inline-b#azimi-inline-c,[data-azimi-style="s004"]){margin-top:14px}
:is(#azimi-inline-a#azimi-inline-b#azimi-inline-c,[data-azimi-style="s005"]){display:block;padding:16px 20px;text-decoration:none}
:is(#azimi-inline-a#azimi-inline-b#azimi-inline-c,[data-azimi-style="s006"]){padding:0;border:0;margin-bottom:6px}
:is(#azimi-inline-a#azimi-inline-b#azimi-inline-c,[data-azimi-style="s007"]){color:var(--muted);font-size:13px}
:is(#azimi-inline-a#azimi-inline-b#azimi-inline-c,[data-azimi-style="s008"]){margin-top:8px}
:is(#azimi-inline-a#azimi-inline-b#azimi-inline-c,[data-azimi-style="s009"]){margin-top:40px}
:is(#azimi-inline-a#azimi-inline-b#azimi-inline-c,[data-azimi-style="s010"]){align-items:start}
:is(#azimi-inline-a#azimi-inline-b#azimi-inline-c,[data-azimi-style="s011"]){text-align:right;max-width:60%}
:is(#azimi-inline-a#azimi-inline-b#azimi-inline-c,[data-azimi-style="s012"]){text-align:right}
:is(#azimi-inline-a#azimi-inline-b#azimi-inline-c,[data-azimi-style="s013"]){margin-top:20px}
:is(#azimi-inline-a#azimi-inline-b#azimi-inline-c,[data-azimi-style="s014"]){margin-bottom:64px}
:is(#azimi-inline-a#azimi-inline-b#azimi-inline-c,[data-azimi-style="s015"]){border:1px solid var(--line-strong)}
:is(#azimi-inline-a#azimi-inline-b#azimi-inline-c,[data-azimi-style="s016"]){margin-top:30px}
:is(#azimi-inline-a#azimi-inline-b#azimi-inline-c,[data-azimi-style="s017"]){margin-top:26px;flex-wrap:wrap}
:is(#azimi-inline-a#azimi-inline-b#azimi-inline-c,[data-azimi-style="s018"]){margin-bottom:44px}
:is(#azimi-inline-a#azimi-inline-b#azimi-inline-c,[data-azimi-style="s019"]){align-items:start;margin-bottom:56px}
:is(#azimi-inline-a#azimi-inline-b#azimi-inline-c,[data-azimi-style="s020"]){padding-top:32px}
:is(#azimi-inline-a#azimi-inline-b#azimi-inline-c,[data-azimi-style="s021"]){flex-wrap:wrap;gap:8px;padding:16px 20px}
:is(#azimi-inline-a#azimi-inline-b#azimi-inline-c,[data-azimi-style="s022"]){margin-top:32px}

/* 1.0.1: only the page wrapper loses its leading gap; inner sections retain their spacing. */
body.azimi-site section.spa-page{padding-top:0}

/* Keep the complete desktop header inside the viewport before switching to the drawer. */
@media(max-width:1400px){
  body.azimi-site .header-actions .tel-link{padding:8px;border-radius:50%}
  body.azimi-site .header-actions .tel-link span{display:none}
}
/* Keep a viewport-sized menu by moving the glass filter off its ancestor. */
@media(max-width:1280px){
  body.azimi-site .site-header{
    background:transparent!important;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    isolation:isolate;z-index:1000;
  }
  body.azimi-site .site-header::before{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:rgba(250,249,247,.94);
    backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  }
  :root[data-theme="dark"] body.azimi-site .site-header::before{background:rgba(10,10,11,.9)}
  body.azimi-site .main-nav{display:none}
  body.azimi-site .header-actions .tel-link{padding:9px;border-radius:50%}
  body.azimi-site .header-actions .tel-link span{display:none}
  body.azimi-site .site-header .bar{gap:14px}
  body.azimi-site .brand{gap:8px}
  body.azimi-site .mobile-toggle{
    display:flex;align-items:center;justify-content:center;
    width:42px;height:42px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
    cursor:pointer;list-style:none;color:var(--ink);flex-shrink:0;background:var(--surface);
  }
  body.azimi-site .mobile-toggle::-webkit-details-marker{display:none}
  body.azimi-site .mobile-menu[open] .mobile-panel{display:block}
  body.azimi-site .mobile-panel{
    position:fixed;left:0;right:0;bottom:0;
    top:calc(var(--azimi-admin-offset,0px) + var(--azimi-header-height,93px));
    z-index:50;background:var(--body-bg);overflow-y:auto;overscroll-behavior:contain;
    padding:28px clamp(20px,6vw,56px) max(40px,env(safe-area-inset-bottom));
  }
  body.azimi-site .mobile-panel a{
    display:block;padding:15px 0;border-bottom:1px solid var(--line);
    font-family:"Playfair Display",serif;font-weight:500;font-size:22px;color:var(--ink);
  }
  body.azimi-site .mobile-panel .btn-primary{display:flex;margin-top:20px;width:100%;justify-content:center}
  body.azimi-site.azimi-menu-open{overflow:hidden}
  body.admin-bar.azimi-site{--azimi-admin-offset:32px}
}
@media(max-width:1280px) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body.azimi-site .site-header::before{background:rgba(10,10,11,.9)}
}
@media(max-width:782px){body.admin-bar.azimi-site{--azimi-admin-offset:46px}}

@media(max-width:480px){
  body.azimi-site .brand{min-width:0;flex-shrink:1}
  body.azimi-site .brand img{object-fit:contain}
}