/* ---------------------------------------------------------------------------
   LL Brown is NOT bundled with this theme.

   It was added on 2026-09-18 and removed the same day: the licence held does
   not cover this domain. Serving the files from here would have been the
   breach, so they are gone from the theme, from the server and from this
   stylesheet.

   Every font-family below still names 'Brown' first, deliberately. That is what
   the design specifies, and anyone with the font installed locally -- designers
   reviewing the work -- still sees it. Everyone else gets the fallback stack,
   which is what the site rendered for its whole life before today.

   If a licence covering zeidler.group is obtained later, restoring this is
   three files in assets/fonts/ and the @font-face block that used to sit here;
   see the commit that removed it. Note that the design asks for weights 400,
   500, 600 and 700, and the cut supplied covered only Light, Regular and Bold.
   --------------------------------------------------------------------------- */


  :root{
    /* Zeidler brand palette — Brand Guidelines 310317 */
    /* The one accent hue on the site, taken directly from the fill in
       logo-zeidler.svg's .st0 path — never approximated by eye. Every
       other cyan/blue token below is this same value, aliased for the
       call sites that already use their name. */
    --zeidler-cyan:#0BBBEF;
    --zeidler-cyan-dark:#077B9D; /* same hue, darkened to reach 4.9:1 on white */
    --blue:var(--zeidler-cyan);
    --blue-light:#3BC9F1;
    --blue-pale:#E3F7FE;
    /* The brand cyan reaches 2.2:1 on white, so it cannot carry small text
       there; --cyan-dark is the same hue at a lightness that reaches 4.9:1.
       --cyan-tint is the brand cyan lifted for body-size text on dark, where
       the pure value vibrates. Three values, one hue, one job each. */
    /* Text on the dark grounds. Three values, because a paragraph, a label and
       a divider are the only three jobs there are down there. */
    --dk-body:#C4C6D1; --dk-muted:#8A8DA0; --dk-faint:#5B5E72;
    /* The small letterspaced label. Once a monospace, now the brand face:
       the platform's table and its "in build" tag. A spec sheet is allowed to
       look like one; the rest of the site is not. */
    /* Not a monospace any more: one typeface on the whole site. The token still
       marks the small letterspaced label, which is what every use of it is. */
    --mono:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
    --blue-dark:var(--zeidler-cyan-dark);
    --dark:#303245;          /* Pantone 2380 — Dark Blue */
    --dark-band:#3A3C52;
    --dark-deep:#16171F;
    --dark-space:#101118;
    --tint-60:#787B8E;       /* brand tints of Dark Blue */
    --tint-30:#B6B8C7;
    --tint-15:#D9DAE3;
    --tint-08:#ECEDF1;
    /* Zeidler Red, Pantone 1925, CMYK 0/100/60/0. A deliberate secondary
       brand color, not a second Zeidler-cyan: cyan still owns technology,
       interaction, active states and functional UI; red is for editorial,
       human and expressive accents — a section eyebrow, a category label,
       a short rule, a marker, never a button, a large area, a full card
       border, or anything tied to a person's own profile. 4.75:1 on white,
       so it holds as small text without a separate dark variant.
       --red is kept as a short alias, same as --blue/--cyan alias
       --zeidler-cyan, so existing call sites don't all need renaming. */
    --zeidler-red:#E50046;
    --red:var(--zeidler-red);
    --white:#FFFFFF;

    /* roles */
    --bg:#FFFFFF; --bg-soft:#F1F2F6; --border:#D9DAE3;
    --ink:#303245; --body:#4E5064; --muted:#6A6C80;
    /* kept so existing rules resolve; both now point at brand values */
    --navy-900:#303245; --navy-800:#3A3C52;
    --cyan:var(--zeidler-cyan); --cyan-dark:var(--zeidler-cyan-dark);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:auto;}
  [id]{scroll-margin-top:124px;}
  /* The WordPress admin bar sits above everything for logged-in users, so
     anchor landings need its height added. motion.js needs no change:
     scrollIntoView() honours scroll-margin-top natively. */
  body.admin-bar [id]{scroll-margin-top:156px;}
  @media screen and (max-width:782px){
    body.admin-bar [id]{scroll-margin-top:170px;}
  }

  /* Regulatory & Compliance's eight areas used to live in a sticky sub-nav
     bar of their own, under the main header. Retired: eight links never
     reliably fit on one line (they need roughly 1700px against the page's
     1304px content width), and every fix for that — horizontal scroll,
     then wrapping to more lines — still read as cramped or unbalanced.
     They now live in a dropdown off "Regulatory & Compliance" in the main
     nav instead, so there is no second bar competing with the main header
     for stickiness, and no combined-height math for the register's sticky
     offset to worry about (.sec-mark below is back to the plain 138px
     every other page already uses). Pure CSS: :hover for a mouse,
     :focus-within for the keyboard, no JS. Touch has neither, so tapping
     the label just goes to the overview page, which lists all eight areas
     in its own "01 What we cover" anyway — never a dead end. */
  .nav-drop{position:relative;display:flex;align-items:center;}
  /* The chevron used to be this link's own ::after, which meant it shared
     a single pseudo-element slot with .navlink.active::after's underline
     when this was also the active page — CSS cascades every property on
     its own, not one rule as a block, so trying to run both off the same
     ::after left one rule's border, width and rotation bleeding through
     underneath the other's, which is what produced the small rotated mark
     a reader kept seeing regardless of which one "won". A real element
     cannot share a slot with anything, so it cannot have this problem
     again in either state, active or not — simpler than any CSS-only
     arrangement of one shared pseudo-element could be. */
  .nav-caret{
    display:inline-block;margin:0 0 2px 6px;width:6px;height:6px;
    border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:rotate(45deg);
  }
  .nav-drop-menu{
    position:absolute;top:100%;left:0;margin-top:14px;min-width:300px;
    background:#fff;border:1px solid var(--border);border-radius:10px;
    box-shadow:0 24px 48px -20px rgba(16,23,41,.28);
    padding:10px;display:flex;flex-direction:column;gap:1px;
    opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
    transition:opacity .15s ease,transform .15s ease;
    z-index:50;
  }
  /* The 14px gap above (for breathing room between the nav bar and the
     menu) is empty space outside .nav-drop-menu's own box, so moving the
     mouse straight down from the link into the menu crossed a strip that
     was not part of .nav-drop, :hover ended right there, and the menu
     closed before the cursor arrived — a reader saw the menu vanish
     "immediately". This invisible strip is a real child of .nav-drop-menu
     covering exactly that gap, so :hover never lapses while crossing it. */
  .nav-drop-menu::before{
    content:"";position:absolute;left:0;right:0;top:-14px;height:14px;
  }
  .nav-drop:hover .nav-drop-menu,
  .nav-drop:focus-within .nav-drop-menu{
    opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
  }
  .nav-drop-menu a{
    padding:10px 14px;border-radius:6px;font-size:14px;font-weight:500;
    color:var(--body);white-space:nowrap;
  }
  .nav-drop-menu a:hover,.nav-drop-menu a:focus-visible{background:var(--bg-soft);color:var(--ink);}

  /* The area pages' compact page header: an eyebrow, a headline, one
     paragraph and an optional line of scope terms, replacing what used to
     be a second full dark hero on every one of the seven pages. The sticky
     sub-nav above already says which area this is, so this only needs to
     say what the area does. Sits directly under .rcsub in normal flow (the
     header is .site-head here, not the fixed .site-head-hero, so it already
     reserves its own space — no clearance padding needed). */
  /* Widened from 26ch (roughly 430px) to 1200px over a couple of rounds:
     narrow max-widths kept breaking these headlines right near the end of
     the sentence, leaving one short word alone on its own line beside most
     of the row's width doing nothing ("...with our / systems.", later
     "...consistently across / markets." — a wider max-width fixed one and
     just moved the same problem to the next headline, since it depends on
     exactly how long that headline's own text is, not on the box). The
     real fix is text-wrap:balance: the browser looks at how the line
     already wants to break and redistributes the text over that many
     lines evenly instead of greedily filling the first one, so a headline
     never strands a single trailing word again, on this or any other
     length. Unsupported browsers just get the plain wrap they always had,
     so this is free to add regardless of exact browser support. */
  .rchead-h1{font-size:42px;line-height:1.15;font-weight:500;letter-spacing:-.016em;max-width:1200px;margin:16px 0 0;text-wrap:balance;}
  .rchead-scope{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--muted);margin:18px 0 0;}
  /* Page eyebrows are cyan everywhere now, no exception for About, Insights,
     Careers and Contact — the earlier "editorial pages get a red eyebrow"
     split made the colour hierarchy read as arbitrary rather than
     intentional. Cyan says where you are (the page); red is reserved for
     where you are within the page (.sec-lab, the numbered register's own
     label, still red sitewide with its own scanner rule — see THE
     REGISTER below). This class and red-scan.js's handling of it are
     unused now that the four pages it applied to are back to a plain
     cyan .t-kicker; removed rather than left as dead weight. */
  @media (max-width:920px){
    .rchead-h1{font-size:29px;}
  }

  /* Reporting's "What we cover" groups get a sentence each rather than a
     bullet list, reusing the .doms 3-column grid and .dom-head label. */
  .dom p{font-size:15.5px;line-height:1.6;color:var(--body);margin:0;}

  /* Reporting's "How the service runs" is a 4-step .matters row rather
     than the default 3, following the #proof / #sender-detail pattern. */
  #runs .matters{grid-template-columns:repeat(4,1fr);}
  @media (max-width:1020px){ #runs .matters{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:700px){ #runs .matters{grid-template-columns:1fr;} }

  /* Regulatory Intelligence's "What we cover" is two named services
     (Global Knowledge Hub, Horizon Scanning), not three, so the default
     three column .doms grid would leave a column empty. Two instead,
     collapsing to one below 700px same as everywhere else that uses it. */
  #gkh .doms{grid-template-columns:repeat(2,1fr);}
  @media (max-width:700px){ #gkh .doms{grid-template-columns:1fr;} }
  body{margin:0;background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;color:var(--body);}
  h1,h2,h3{font-family:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;color:var(--ink);margin:0;}
  a{color:var(--ink);text-decoration:none;transition:color .15s ease;}
  a:hover{color:var(--cyan);}
  .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:6px;font-weight:600;font-size:15px;cursor:pointer;white-space:nowrap;border:1px solid transparent;transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;}
  .btn:hover{transform:translateY(-1px);}
  .btn-primary{background:var(--navy-900);color:#fff;border-color:var(--ink);}
  .btn-primary:hover{background:var(--navy-800);color:#fff;box-shadow:0 10px 24px -12px rgba(10,27,51,.5);}
  .btn-cyan{background:var(--cyan);color:var(--ink);border-color:var(--blue);}
  .btn-cyan:hover{background:#3bc9f1;box-shadow:0 10px 26px -10px rgba(18,180,196,.55);}
  .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.4);}
  .btn-outline:hover{border-color:#fff;color:#fff;}
  .navlink{font-size:15.5px;font-weight:500;color:var(--body);}
  .navlink:hover{color:var(--ink);}
  /* Marked, not thickened: 700 weight on one link put more ink in the
     navigation on every page except the homepage. */
  .navlink.active{color:var(--ink);}
  .navlink.active::after{
    content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;
    background:var(--blue);
  }
  .site-head-hero .navlink.active::after{background:var(--blue);}
  .wrap{max-width:1400px;margin:0 auto;padding-left:48px;padding-right:48px;}

  /* ══ THE HERO FRAME ═══════════════════════════════════════════════════════
     Every page's dark band is the same height, its copy starts at the same
     line, and its headline is the same size and the same width. Anything that
     sits above the headline — an eyebrow, a page name, the Zeidler Law lockup —
     lives in a slot of fixed height, which is what keeps the headline itself on
     one line across the site. */
  /* 94vh, floored: the expanse of the original homepage hero, on every page.
     max() rather than a bare vh so a 700px-tall laptop still gets a hero
     rather than a strip. */
  :root{--hero-h:max(660px, 94vh);--hero-top:clamp(160px, 25vh, 280px);--hero-bot:96px;--hero-kick-h:44px;}
  .hero,.lawhero{
    position:relative;overflow:hidden;overflow:clip;
    background:var(--dark-space);
    min-height:var(--hero-h);display:flex;align-items:stretch;
  }
  .hero-in,.lawhero-inner{
    position:relative;z-index:2;width:100%;display:block;
    min-height:var(--hero-h);
    padding-top:var(--hero-top);padding-bottom:var(--hero-bot);
  }
  .hero-copy{max-width:760px;}
  /* The kicker slot. Three different things sit in it on different pages; all
     three are centred in the same 44px, so none of them moves the headline. */
  .hero-kick,.lawhero-name,.lawhero-lock{
    display:flex;align-items:center;
    min-height:var(--hero-kick-h);margin:0 0 30px;
  }
  .hero h1,.lawhero h1{max-width:760px;}
  .hero-sub,.lawhero-lede{max-width:640px;}

  @media (max-width:820px){
    :root{--hero-h:0px;--hero-top:126px;--hero-bot:76px;--hero-kick-h:0px;}
    .hero-kick,.lawhero-name,.lawhero-lock{margin-bottom:20px;}
  }

  /* HERO / GLOBE ------------------------------------------------------------
     Three stacked layers: a CSS star field (never filtered, so stars stay
     crisp), the WebGL globe canvas (contrast-pushed so only the real city
     lights read against near-black land), and a copy scrim on top. */
  /* Axial tilt — the globe sits on a slight lean like a real orbital view.
     Scaled up so the rotation never exposes an empty corner. */

  /* CONTENT ---------------------------------------------------------------- */
  .logo-cell{display:flex;align-items:center;justify-content:center;height:76px;}
  .logo-cell img{max-height:76px;max-width:100%;object-fit:contain;}
  .card-lift{transition:transform .22s ease, box-shadow .22s ease;}
  .card-lift:hover{transform:translateY(-4px);box-shadow:0 24px 48px -24px rgba(10,27,51,.32);}
  /* Click, not hover: a hover state has no equivalent on a phone, and this is
     meant to feel like an answer opening, not a link lighting up. */
  .task{border-top:1px solid var(--border);}
  .task:last-of-type{border-bottom:1px solid var(--border);}
  .task > summary{
    display:flex;align-items:center;justify-content:space-between;gap:20px;
    padding:34px 4px;cursor:pointer;list-style:none;
    transition:padding-left .2s ease;
  }
  .task > summary::-webkit-details-marker{display:none;}
  .task:hover > summary{padding-left:12px;}
  .task h3{font-size:24px;font-weight:500;}
  .task-arrow{transition:transform .2s ease, color .2s ease;color:var(--muted);flex-shrink:0;}
  .task:hover .task-arrow{color:var(--cyan);}
  .task[open] .task-arrow{transform:rotate(90deg);color:var(--cyan);}
  .task-body{padding:0 4px 34px;max-width:640px;}
  .task-body p{font-size:16px;line-height:1.65;color:var(--body);margin:0;}
  .task-go{
    display:inline-flex;align-items:center;gap:8px;margin-top:20px;
    font-size:14px;font-weight:700;color:var(--cyan);
  }
  /* A need with two valid next steps (Sender or Responder) gets two
     .task-go links; stacked, not run together, so each reads as its own
     choice rather than one link with a stray second half. */
  .task-actions{display:flex;flex-direction:column;gap:12px;margin-top:20px;}
  .task-actions .task-go{margin-top:0;}
  .task-go svg{transition:transform .2s ease;}
  .task-go:hover{text-decoration:underline;}
  .task-go:hover svg{transform:translateX(4px);}
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
  .reveal.is-visible{opacity:1;transform:translateY(0);}
  .portrait{width:60px;height:60px;border-radius:50%;object-fit:cover;object-position:center 12%;background:#ecedf1;flex-shrink:0;}
  .mono{width:56px;height:56px;border-radius:50%;background:#ecedf1;color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;font-size:19px;font-weight:600;flex-shrink:0;}
  .flow-node{animation:nodeGlow 4s ease-in-out infinite;}
  .flow-node-2{animation:nodeGlow 4s ease-in-out infinite 1.3s;}
  .flow-node-3{animation:nodeGlow 4s ease-in-out infinite 2.6s;}
  @keyframes nodeGlow{0%,100%{opacity:.45;}50%{opacity:1;}}

  /* Leadership reuses .lawyers/.lawcard from Zeidler Law directly. Four
     people in Zeidler Law's own three-column grid means three in one row
     and a fourth sitting alone below, which reads oddly for a leadership
     team specifically (Zeidler Law's own six lawyers fill two full rows, so
     it never shows there). Two columns fixes that, but naively forcing
     grid-template-columns to 2 also stretches each card to fill the now
     wider column — same bug as the oversized-portrait one before, just
     from the opposite direction. Capping the card's own width instead of
     the grid keeps the card exactly Zeidler Law's size, arranged 2x2. */
  #leadership .lawyers{grid-template-columns:repeat(2,1fr);}
  #leadership .lawcard{max-width:410px;justify-self:start;}
  @media (max-width:920px){
    #leadership .lawyers{grid-template-columns:1fr;}
    #leadership .lawcard{max-width:none;}
  }

  /* About's office line: the same flowing, middot-separated list Global
     Reach uses, on a light background instead of a dark one, so it needs
     its own hover and focus colours rather than Global Reach's dark-mode
     ones. */
  .about-offices .offc{padding:2px 0;border-radius:3px;}
  .about-offices .offc:focus-visible{outline:2px solid var(--zeidler-cyan);outline-offset:4px;}
  .about-offices .offc-city{
    text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;
    transition:color .16s ease, text-decoration-color .16s ease;
  }
  .about-offices .offc:hover .offc-city,.about-offices .offc:focus-visible .offc-city{
    color:var(--zeidler-cyan);text-decoration-color:var(--zeidler-cyan);
  }
  .about-offices .offc:not(:last-child) .offc-city::after{
    content:"\00b7";display:inline-block;margin:0 12px;color:var(--tint-30);font-weight:400;text-decoration:none;
  }

  /* PROFILE MODAL --------------------------------------------------------- */
  .modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:32px;}
  .modal[hidden]{display:none;}
  .modal-backdrop{position:absolute;inset:0;background:rgba(6,14,26,.72);backdrop-filter:blur(3px);}
  .modal-panel{position:relative;background:#fff;border-radius:14px;max-width:1000px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 40px 90px -30px rgba(6,14,26,.6);animation:modalIn .26s ease;}
  @keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.99);}to{opacity:1;transform:none;}}
  .modal-x{position:absolute;top:18px;right:18px;z-index:3;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:rgba(255,255,255,.94);color:var(--body);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s ease;}
  .modal-x:hover{background:var(--navy-900);color:#fff;border-color:var(--ink);}
  .modal-grid{display:grid;grid-template-columns:330px 1fr;}
  .modal-media{background:var(--bg-soft);padding:36px 30px;display:flex;flex-direction:column;gap:22px;}
  .modal-media img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 14%;border-radius:10px;background:#d9dae3;}
  .modal-contact{display:flex;flex-direction:column;gap:10px;}
  .modal-link{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--ink);}
  .modal-link:hover{color:var(--cyan);}
  .modal-copy{padding:56px 52px 48px;}
  .modal-role{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--ink);}
  .modal-name{font-size:40px;line-height:1.2;font-weight:500;margin:14px 0 8px;}
  .modal-loc{font-size:15px;color:var(--muted);margin-bottom:28px;}
  #bioText p{font-size:16.5px;line-height:1.75;color:var(--body);margin:0 0 18px;}
  .modal-facts{display:grid;grid-template-columns:1fr 1fr;gap:26px 32px;margin-top:34px;padding-top:30px;border-top:1px solid var(--border);}
  .modal-fact span{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:9px;}
  .modal-fact div{font-size:14.5px;line-height:1.6;color:var(--body);}
  .modal-facts[hidden],.modal-fact[hidden]{display:none;}

  /* OFFICE CARDS ---------------------------------------------------------- */
  @media (max-width:920px){
    .wrap{padding-left:24px;padding-right:24px;}
    h1{font-size:44px !important;}
    .split3{grid-template-columns:1fr !important;gap:32px !important;}
    .split{grid-template-columns:1fr !important;gap:32px !important;}
    .pillars{grid-template-columns:1fr !important;}
    .stats{grid-template-columns:repeat(2,1fr) !important;}
    .logos{grid-template-columns:repeat(2,1fr) !important;}
    .why-grid{grid-template-columns:1fr !important;}
    .people-grid{grid-template-columns:1fr !important;}
    .footer-grid{grid-template-columns:repeat(2,1fr) !important;}
    .footer-legal{grid-template-columns:1fr !important;gap:32px !important;}
    .footer-legal > div:last-child{justify-self:start !important;text-align:left !important;}
    .task{flex-wrap:wrap;}
    .presence-foot{grid-template-columns:1fr !important;gap:28px !important;}
    .modal{padding:0;}
    .modal-panel{max-height:100vh;border-radius:0;}
    .modal-grid{grid-template-columns:1fr !important;}
    .modal-media{flex-direction:row;align-items:center;gap:20px;padding:24px;}
    .modal-media img{width:120px;flex-shrink:0;}
    .modal-copy{padding:28px 24px 36px;}
    .modal-name{font-size:30px;}
    .modal-facts{grid-template-columns:1fr !important;}
  }

  /* from zeidler-law.html */

  /* from regulatory-compliance.html */
  .step{display:flex;flex-direction:column;gap:10px;}
  .step-num{font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.1em;font-variant-numeric:tabular-nums;}

  /* from insights.html */
  .chip{padding:9px 18px;border-radius:100px;border:1px solid var(--border);background:#fff;font-size:14px;font-weight:600;color:var(--body);cursor:pointer;transition:all .18s ease;font-family:inherit;}
  .chip:hover{border-color:var(--ink);color:var(--ink);}
  .chip.on{background:var(--navy-900);border-color:var(--ink);color:#fff;}
  /* Matches the two red category kickers (Event, Webinar) so the filter row
     and the cards it filters use the same color logic. Selected state stays
     navy regardless of category, same as every other chip. */
  .chip[data-cat="event"]:not(.on),.chip[data-cat="web"]:not(.on){color:var(--red);border-color:#f2c1cd;}
  .art{display:flex;flex-direction:column;gap:12px;padding:28px 0;border-top:1px solid var(--border);transition:padding-left .2s ease;}
  /* Insights is editorial content, not a service page, so its hover
     accent is red rather than the cyan every service link on the site
     uses — cyan stays reserved for functional/technology interactions. */
  .art:hover{padding-left:10px;}
  .art:hover h3{color:var(--zeidler-red);}
  .art h3{font-size:20px;font-weight:500;line-height:1.32;transition:color .18s ease;}
  .kicker{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--muted);}
  /* Insights runs seven content categories. Blog Post and Whitepaper were
     already cyan; News and Case Study had no rule at all (flagged by
     check.js this whole project as classes with no CSS) and just inherited
     the neutral default, which is fine — coloring every one of seven
     categories would be a rainbow, not a system. Podcast joins the cyan
     group, since audio content is technology delivered. Event and Webinar
     are the two red accents: both mean people in a room together rather
     than something written or produced, which is exactly the "warmth, not
     technology" role red has here — and at two categories out of seven,
     still the minority. */
  .k-pod{color:var(--zeidler-cyan);}
  .k-event,.k-web{color:var(--red);}
  .k-blog{color:var(--cyan);}
  .k-white{color:var(--cyan);}
  .art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 48px;}

  /* from careers.html */
  .role{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 4px;border-top:1px solid var(--border);transition:padding-left .2s ease;}
  .role:last-of-type{border-bottom:1px solid var(--border);}
  .role:hover{padding-left:12px;}
  .role:hover .role-arrow{transform:translateX(4px);color:var(--cyan);}
  .role-arrow{transition:transform .2s ease, color .2s ease;color:var(--muted);flex-shrink:0;}
  .role h3{font-size:20px;font-weight:500;}
  .meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:7px;}
  .meta span{font-size:13px;color:var(--muted);}
  .role-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;}
  .role-filter{font-size:14px;font-weight:600;color:var(--muted);background:none;border:1px solid var(--border);border-radius:100px;padding:8px 16px;cursor:pointer;transition:color .16s ease,border-color .16s ease;}
  .role-filter:hover{color:var(--ink);}
  .role-filter.active{color:#fff;background:var(--zeidler-cyan-dark);border-color:var(--zeidler-cyan-dark);}
  .role-empty{font-size:15px;color:var(--muted);padding:26px 4px;margin:0;}

  /* Life at Zeidler's three cards are real colleagues' own words, which is
     what a quote mark is for — the second sparse, deliberate use of red on
     the site (the first is Insights' Event category). A small mark, not a
     giant background glyph: this is still a bio card, not a pull quote.

     Each card is a button carrying data-id, opening the same profile modal
     the leadership and "your contact" cards already use (people.js opens
     a profile for any element with data-id, regardless of class) — a card
     you cannot click through to the person behind it was the actual
     problem, not the quote text. font-family/text-align/width reset the
     button defaults a plain div never had to fight; the hover lift matches
     .lawcard's, so the same "this opens something" signal reads the same
     way everywhere on the site. */
  .voice-card{
    display:block;width:100%;text-align:left;font-family:inherit;cursor:pointer;
    transition:transform .2s ease,box-shadow .2s ease;
  }
  .voice-card:hover{
    transform:translateY(-3px);
    box-shadow:0 20px 40px -24px rgba(48,50,69,.28);
  }
  .voice-card::before{
    content:"“";position:absolute;top:10px;right:22px;
    font-family:Georgia,'Times New Roman',serif;font-size:52px;line-height:1;
    color:var(--red);opacity:.55;
  }

  /* ── responsive blocks carried over from the individual pages ── */
  /* zeidler-law.html */
  @media (max-width:920px){
    .wrap{padding-left:24px;padding-right:24px;}
    h1{font-size:36px !important;}
    .split{grid-template-columns:1fr !important;gap:32px !important;}
    .svc-grid{grid-template-columns:1fr !important;}
    .people-grid{grid-template-columns:1fr !important;}
    .work-grid{grid-template-columns:1fr !important;}
    .footer-grid{grid-template-columns:repeat(2,1fr) !important;}
    .footer-legal{grid-template-columns:1fr !important;gap:32px !important;}
    .footer-legal > div:last-child{justify-self:start !important;text-align:left !important;}
  }
  /* regulatory-compliance.html */
  @media (max-width:920px){
    .wrap{padding-left:24px;padding-right:24px;}
    h1{font-size:36px !important;}
    .split{grid-template-columns:1fr !important;gap:32px !important;}
    .svc-list{grid-template-columns:1fr !important;}
    .deliver-grid{grid-template-columns:repeat(2,1fr) !important;}
    .steps{grid-template-columns:repeat(2,1fr) !important;}
    .people-grid{grid-template-columns:1fr !important;}
    .footer-grid{grid-template-columns:repeat(2,1fr) !important;}
    .footer-legal{grid-template-columns:1fr !important;gap:32px !important;}
    .footer-legal > div:last-child{justify-self:start !important;text-align:left !important;}
  }
  /* insights.html */
  @media (max-width:1020px){ .art-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:920px){
    .wrap{padding-left:24px;padding-right:24px;}
    h1{font-size:38px !important;}
    .art-grid{grid-template-columns:1fr !important;}
    .feature{grid-template-columns:1fr !important;}
    .footer-grid{grid-template-columns:repeat(2,1fr) !important;}
    .footer-legal{grid-template-columns:1fr !important;gap:32px !important;}
    .footer-legal > div:last-child{justify-self:start !important;text-align:left !important;}
  }
  /* careers.html */
  @media (max-width:920px){
    .wrap{padding-left:24px;padding-right:24px;}
    h1{font-size:38px !important;}
    .split{grid-template-columns:1fr !important;gap:36px !important;}
    .val-grid{grid-template-columns:1fr !important;}
    .exp-grid{grid-template-columns:1fr !important;}
    .offer-grid{grid-template-columns:1fr !important;}
    .voices{grid-template-columns:1fr !important;}
    .footer-grid{grid-template-columns:repeat(2,1fr) !important;}
    .footer-legal{grid-template-columns:1fr !important;gap:32px !important;}
    .footer-legal > div:last-child{justify-self:start !important;text-align:left !important;}
    .role{flex-wrap:wrap;}
  }

  /* ══ ADDITIONS ═══════════════════════════════════════════════════════════ */

  /* Client logo wall.
     A hairline lattice instead of a loose grid: the container draws the top and
     left edges, each cell draws its right and bottom, so the rules meet exactly
     and no double-thickness lines appear. Logos sit much larger than before and
     keep their own colour — desaturating them made them look wrong. */
  .logo-lattice{
    display:grid;grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--border);border-left:1px solid var(--border);
    background:#fff;
  }
  .logo-lattice > div{
    border-right:1px solid var(--border);border-bottom:1px solid var(--border);
    height:190px;display:flex;align-items:center;justify-content:center;
    padding:28px 34px;
  }
  .logo-lattice img{
    max-height:132px;max-width:100%;width:auto;object-fit:contain;
  }

  /* Monogram used wherever a person has no published portrait. Same footprint
     as the photo it replaces, so a row of cards stays on its grid. */
  .lead-mono{
    width:100%;aspect-ratio:1/1;background:#ecedf1;color:var(--ink);
    display:flex;align-items:center;justify-content:center;
    font-family:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;font-size:58px;font-weight:600;letter-spacing:.02em;
  }
  .modal-mono{
    width:100%;aspect-ratio:1/1;border-radius:10px;background:#d9dae3;color:var(--ink);
    display:flex;align-items:center;justify-content:center;
    font-family:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;font-size:76px;font-weight:600;
  }
  .modal-mono[hidden],.modal-media img[hidden]{display:none;}

  /* Person row — a denser alternative to the big card, for pages that list
     eight or ten people rather than four. */
  .prow{
    display:flex;align-items:center;gap:22px;width:100%;text-align:left;
    padding:20px 4px;background:none;border:0;border-top:1px solid var(--border);
    font-family:inherit;cursor:pointer;transition:padding-left .2s ease;
  }
  .prow:last-of-type{border-bottom:1px solid var(--border);}
  .prow:hover{padding-left:12px;}
  .prow:hover .prow-arrow{transform:translateX(4px);color:var(--cyan);}
  .prow-img{width:74px;height:74px;border-radius:50%;object-fit:cover;object-position:center 12%;background:#ecedf1;flex-shrink:0;}
  .prow-mono{
    width:74px;height:74px;border-radius:50%;background:#ecedf1;color:var(--ink);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    font-family:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;font-size:24px;font-weight:600;
  }
  .prow-name{font-family:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;font-size:21px;font-weight:600;color:var(--ink);line-height:1.2;}
  .prow-role{font-size:14px;color:var(--muted);margin-top:4px;}
  .prow-arrow{margin-left:auto;color:var(--muted);flex-shrink:0;transition:transform .2s ease,color .2s ease;}

  /* Service deep-dive block: heading, plain-language summary, what you get,
     and the person accountable for it. One rhythm repeated, so six services
     read as a sequence rather than a wall. */
  .svc{border-top:1px solid var(--border);padding:84px 0;}
  .svc:last-of-type{border-bottom:1px solid var(--border);}
  .svc-head{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
  .svc-tag{font-size:12px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--ink);}
  .svc-title{font-size:31px;line-height:1.2;font-weight:500;margin-top:14px;}
  .svc-lede{font-size:17.5px;line-height:1.72;color:var(--body);}
  .svc-points{display:grid;grid-template-columns:1fr 1fr;gap:14px 34px;margin-top:34px;list-style:none;padding:0;}
  .svc-points li{position:relative;padding-left:22px;font-size:15px;line-height:1.6;color:var(--body);}
  .svc-points li::before{
    content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;
    background:var(--cyan);
  }
  .svc-lead{
    display:flex;align-items:center;gap:18px;width:100%;
    padding:18px 0;background:none;border:0;border-top:1px solid var(--border);
    text-align:left;font-family:inherit;cursor:pointer;
  }
  .svc-lead:hover .svc-lead-name{color:var(--cyan);}
  .svc-lead img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:center 12%;background:#ecedf1;flex-shrink:0;}
  .svc-lead .prow-mono{width:56px;height:56px;font-size:19px;}
  .svc-lead-name{font-family:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;font-size:18px;font-weight:600;color:var(--ink);margin-top:3px;}
  .svc-lead-role{font-size:13.5px;color:var(--muted);margin-top:2px;}

  /* Scroll-drawn line art. The dash offset animates from the full path length
     to zero once the figure scrolls into view, so the diagram draws itself. No
     library: one class toggled by the same IntersectionObserver the text uses. */
  .draw path,.draw line,.draw circle,.draw rect{
    stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
    transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1);
  }
  .draw.is-visible path,.draw.is-visible line,.draw.is-visible circle,.draw.is-visible rect{
    stroke-dashoffset:0;
  }
  .draw .fadein{opacity:0;transition:opacity .7s ease .6s;}
  .draw.is-visible .fadein{opacity:1;}

  /* Numeric counters that run up when the figure appears. */
  .count{font-variant-numeric:tabular-nums;}

  @media (prefers-reduced-motion:reduce){
    .draw path,.draw line,.draw circle,.draw rect{transition:none;stroke-dashoffset:0;}
    .draw .fadein{transition:none;opacity:1;}
    .reveal{transition:none;opacity:1;transform:none;}
    .flow-node,.flow-node-2,.flow-node-3{animation:none;opacity:1;}
  }

  @media (max-width:1020px){
    .logo-lattice{grid-template-columns:repeat(3,1fr);}
    .logo-lattice > div{height:126px;}
    .logo-lattice img{max-height:78px;}
  }
  @media (max-width:920px){
    .svc-head{grid-template-columns:1fr;gap:26px;}
    .svc-points{grid-template-columns:1fr;}
    .logo-lattice{grid-template-columns:repeat(2,1fr);}
    .logo-lattice > div{height:112px;padding:18px;}
    .logo-lattice img{max-height:64px;}
    .prow-img,.prow-mono{width:58px;height:58px;}
    .prow-name{font-size:18px;}
  }

  /* ══ REGULATORY & COMPLIANCE ══════════════════════════════════════════════
     These blocks used to be <div>s with a hover state — they looked clickable
     and were not. They are links now, and the styling makes that legible: an
     explicit affordance line, a lift on hover, and a visible focus ring. */

  /* Six services, as columns with a rule between them. The 1px-gap grid with a
     border and a radius read as a table of cards; this reads as a page. */
  .mtiles{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);}
  .mtile{
    display:flex;flex-direction:column;padding:28px 34px 26px 0;
    border-bottom:1px solid var(--border);
    transition:padding-left .2s ease;
  }
  .mtile:not(:nth-child(3n+1)){border-left:1px solid var(--border);padding-left:34px;}
  .mtile h3{
    font-family:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
    font-size:19px;font-weight:600;margin:0 0 10px;color:var(--ink);
    transition:color .18s ease;
  }
  .mtile p{font-size:15px;line-height:1.62;color:var(--muted);margin:0 0 22px;}
  .mtile-go{
    display:inline-flex;align-items:center;gap:8px;margin-top:auto;
    font-size:13.5px;font-weight:700;letter-spacing:.02em;color:var(--cyan);
  }
  .mtile-go svg{transition:transform .2s ease;}
  .mtile:hover h3{color:var(--cyan);}
  .mtile:hover .mtile-go svg{transform:translateX(5px);}


  /* Each service ends with a specific next step rather than nothing. */
  .svc-foot{
    display:flex;align-items:center;gap:28px;flex-wrap:wrap;
    margin-top:32px;padding-top:26px;border-top:1px solid var(--border);
  }
  .svc-foot-cta{
    display:inline-flex;align-items:center;gap:8px;
    font-size:15px;font-weight:700;color:var(--ink);
  }
  .svc-foot-cta svg{transition:transform .2s ease;}
  .svc-foot-cta:hover{color:var(--cyan);}
  .svc-foot-cta:hover svg{transform:translateX(4px);}
  .svc-foot-alt{font-size:14.5px;color:var(--muted);}
  .svc-foot-alt:hover{color:var(--cyan);}

  /* Keyboard users need to see where they are; this was missing throughout. */
  a:focus-visible,button:focus-visible{
    outline:2px solid var(--cyan-dark);outline-offset:3px;border-radius:4px;
  }

  @media (max-width:1020px){
    .mtiles{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:920px){
    .mtiles{grid-template-columns:1fr;}
  }

  /* On the regulatory page two sticky bars stack (78px header + 62px service
     bar), so a service anchor needs more clearance than the global default. */
  .svc{scroll-margin-top:184px;}
  @media (max-width:920px){ .svc{scroll-margin-top:80px;} }

  /* ══ AI ═══════════════════════════════════════════════════════════════════
     One marker, one layout, repeated on every page. The consistency is the
     message: AI is not a feature on one page, it is how the work is done. */

  /* The marker. Always a link, always to the governance statement — so the
     claim and the accountability for it are never more than one click apart. */
  .ai-tag{
    display:inline-flex;align-items:center;gap:10px;
    font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
    color:var(--cyan);transition:color .18s ease;
  }
  .ai-tag:hover{text-decoration:underline;}
  .ai-tag-dot{
    width:7px;height:7px;border-radius:50%;background:var(--blue);flex-shrink:0;
    box-shadow:0 0 0 3px rgba(11,187,239,.22);
    animation:aiPulse 2.6s ease-in-out infinite;
  }
  @keyframes aiPulse{
    0%,100%{box-shadow:0 0 0 3px rgba(11,187,239,.22);}
    50%{box-shadow:0 0 0 6px rgba(11,187,239,.08);}
  }
  /* On a dark surface the pale fill would glare. */
  .ai-tag.on-dark{color:var(--blue);}
  .ai-tag.on-dark:hover{color:#fff;}

  /* The AI-does / person-decides pair, used inside a service or a practice. */
  /* What AI does here, and where a person decides. A cyan rule down the side
     rather than a filled panel — the claim does not need a highlighter. */
  .ai-split{margin-top:36px;padding-left:26px;border-left:2px solid var(--blue);}
  .ai-split-tag{margin-bottom:16px;}
  .ai-split-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px 40px;}
  .ai-split-cols span{
    display:block;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
    font-weight:700;color:var(--cyan);margin-bottom:8px;
  }
  .ai-split-cols p{font-size:14.5px;line-height:1.65;color:var(--body);margin:0;}

  /* The homepage matrix. A table would be the honest structure, but three
     columns of prose at these lengths reads better as a grid of rows with a
     header, and it collapses to stacked blocks on a narrow screen. */
  .aigrid{
    border-top:1px solid rgba(255,255,255,.14);
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  .aigrid-head{
    display:grid;grid-template-columns:1fr 1.5fr 1.35fr;gap:36px;
    padding:16px 0;border-bottom:1px solid rgba(255,255,255,.14);
  }
  .aigrid-head span{
    font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--dk-muted);
  }
  .aigrid-head span:nth-child(2){color:var(--blue);}
  .airow{
    display:grid;grid-template-columns:1fr 1.5fr 1.35fr;gap:36px;
    padding:26px 0;border-bottom:1px solid rgba(255,255,255,.08);
    transition:background-color .18s ease;
  }
  .airow:last-child{border-bottom:0;}
  .airow-svc{
    font-size:18px;font-weight:600;color:#fff;line-height:1.3;
  }
  .airow-ai{font-size:14.5px;line-height:1.65;color:var(--dk-body);}
  .airow-ai::before{
    content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
    background:var(--blue);margin-right:9px;vertical-align:2px;
  }
  .airow-human{font-size:14.5px;line-height:1.65;color:var(--dk-muted);}

  .ai-proof{
    display:grid;grid-template-columns:repeat(3,1fr) auto;gap:36px;
    align-items:end;margin-top:52px;
  }
  .ai-proof-num{
    font-size:26px;font-weight:600;color:#fff;line-height:1.15;margin-bottom:8px;
  }
  .ai-proof-lbl{font-size:13.5px;line-height:1.55;color:var(--dk-muted);}


  @media (prefers-reduced-motion:reduce){ .ai-tag-dot{animation:none;} }

  @media (max-width:1020px){
    .ai-proof{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:920px){
    .aigrid-head{display:none;}
    .airow{grid-template-columns:1fr;gap:12px;padding:22px 0;}
    .airow-human::before{
      content:"Accountable: ";font-weight:700;color:var(--dk-muted);
    }
    .ai-split-cols{grid-template-columns:1fr;}
    .ai-proof{grid-template-columns:1fr;gap:26px;}
  }

  /* The matrix rows are links to the page that handles the job, so they need a
     visible affordance rather than only a hover colour. */
  a.airow{color:inherit;text-decoration:none;}
  a.airow:hover{background:rgba(255,255,255,.04);}
  a.airow:hover .airow-svc{color:var(--blue);}
  .airow-go{flex-shrink:0;color:var(--dk-muted);transition:transform .2s ease,color .2s ease;}
  a.airow:hover .airow-go{transform:translateX(4px);color:var(--blue);}

  /* ══ ONE GROUP ════════════════════════════════════════════════════════════
     The thirty-second answer: law at the core, managed execution, and the AI
     that delivers it. Three cards, few words, each a link. */
  .og{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .ogcard{
    display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);
    border-radius:10px;padding:34px 32px 30px;
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  }
  .ogcard:hover{
    transform:translateY(-4px);border-color:var(--blue);
    box-shadow:0 24px 48px -26px rgba(48,50,69,.3);
  }
  .ogcard-kicker{
    font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
    color:var(--cyan);margin-bottom:16px;
  }
  .ogcard h3{font-size:26px;line-height:1.2;font-weight:500;color:var(--ink);margin:0 0 14px;}
  .ogcard p{font-size:16px;line-height:1.6;color:var(--body);margin:0 0 22px;}
  .ogcard-scope{
    font-size:13.5px;line-height:1.7;color:var(--muted);
    padding-top:20px;border-top:1px solid var(--border);margin-bottom:22px;
  }
  .ogcard-go{
    display:inline-flex;align-items:center;gap:8px;margin-top:auto;
    font-size:14px;font-weight:700;color:var(--ink);
  }
  .ogcard-go svg{transition:transform .2s ease;}
  .ogcard:hover .ogcard-go{color:var(--cyan);}
  .ogcard:hover .ogcard-go svg{transform:translateX(4px);}
  @media (max-width:920px){ .og{grid-template-columns:1fr;} }

  /* Two cards, not three: managed execution and the tools it runs on are one
     offer, so the tools sit in a band spanning both cards instead of competing
     with them as a third column. */
  .og-2{grid-template-columns:repeat(2,1fr);}
  .ogai{
    display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;
    margin-top:24px;padding:26px 32px;border-radius:10px;
    background:var(--dark);
    transition:background-color .2s ease;
  }
  .ogai:hover{background:#3a3c52;}
  .ogai-kicker{
    font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
    font-weight:700;color:var(--blue);margin-bottom:8px;
  }
  .ogai-line{font-size:20px;font-weight:500;color:#fff;line-height:1.3;}
  .ogai-tools{font-size:14px;line-height:1.6;color:var(--dk-body);}
  .ogai-go{
    display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
    font-size:14px;font-weight:700;color:var(--blue);
  }
  .ogai-go svg{transition:transform .2s ease;}
  .ogai:hover .ogai-go svg{transform:translateX(4px);}
  @media (max-width:920px){
    .og-2{grid-template-columns:1fr;}
    .ogai{grid-template-columns:1fr;gap:16px;}
  }


  /* The fee statement. It is the only claim true of every engagement, so it is
     set as a statement: two hairlines and nothing else. It was a pale blue
     panel, which made the plainest thing on the page the loudest. */
  .feeband{
    display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:56px;
    align-items:start;margin-top:8px;padding:44px 0 46px;
    border-top:1px solid var(--ink);border-bottom:1px solid var(--border);
  }
  .feeband-big{
    font-family:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
    font-size:32px;line-height:1.16;font-weight:600;color:var(--ink);
    letter-spacing:-.012em;
  }
  .feeband p{font-size:17px;line-height:1.72;color:var(--body);margin:0;max-width:660px;}
  @media (max-width:920px){
    .feeband{grid-template-columns:1fr;gap:20px;padding:32px 0 34px;}
    .feeband-big{font-size:26px;}
  }

  /* ══ ZEIDLER LAW ══════════════════════════════════════════════════════════
     A law firm page carries its weight with typography, space and the people —
     not decoration. The only photographic element is the NASA dusk plate behind
     two dark bands, which is real imagery rather than a stock skyline. */

  /* Hero — the same recipe as the homepage's: the corpus underneath, a veil
     heavier on the side the words are on, and nothing photographic. */
  .lawhero-field{position:absolute;inset:0;}
  .lawhero-field .hero-scan{top:0;}
  /* The practice's own name, on its own page: read first, and at a size that
     says practice rather than product label. */
  .lawhero-name{
    font-family:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
    font-size:30px;font-weight:600;letter-spacing:-.01em;
    color:var(--blue);
  }
  /* The practice masthead. The name is the same size and the same cyan as every
     other page's name — the register does not change from page to page — and the
     line after the hairline states the profession, which is the one fact this
     page cannot leave to inference. */
  .lawhero-lock{gap:22px;}
  .lawhero-practice{
    font-family:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
    font-size:30px;font-weight:600;letter-spacing:-.01em;color:var(--blue);line-height:1;
  }
  .lawhero-kind{
    position:relative;padding-left:23px;
    font-family:var(--mono);
    font-size:12.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
    color:#fff;line-height:1.2;white-space:nowrap;
  }
  .lawhero-kind::before{
    content:"";position:absolute;left:0;top:-9px;bottom:-9px;width:1px;
    background:rgba(255,255,255,.3);
  }
  @media (max-width:620px){
    .lawhero-kind{display:none;}
  }
  /* Same size as the homepage's — .t-h1, spelled out here because the subpage
     headings are plain h1 elements without the class. */
  .lawhero h1{
    color:#fff;font-size:64px;line-height:1.09;font-weight:500;
    letter-spacing:-.021em;margin:0;
  }
  .lawhero-lede{
    color:var(--dk-body);font-size:21px;line-height:1.65;margin:30px 0 0;
  }

  /* Practice areas. Unnumbered on purpose: "01 Practice areas" already
     names the section in its own register at the left, so a second number
     per area read as a taxonomy rather than five things a specialist firm
     does. */
  .pa{
    display:grid;grid-template-columns:1.25fr 1fr;gap:56px;
    padding:58px 0;border-top:1px solid var(--border);align-items:start;
  }
  .pa:last-of-type{border-bottom:1px solid var(--border);}
  .pa-body h3{font-size:27px;line-height:1.22;font-weight:500;color:var(--ink);margin:0 0 14px;}
  .pa-body p{font-size:16.5px;line-height:1.7;color:var(--body);margin:0;}
  .pa-points{list-style:none;margin:6px 0 0;padding:0;}
  .pa-points li{
    position:relative;padding-left:20px;margin-bottom:11px;
    font-size:15px;line-height:1.55;color:var(--muted);
  }
  .pa-points li::before{
    content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
    border-radius:50%;background:var(--blue);
  }

  /* Representative matters. Nine white cards inside a bordered grid was three
     borders doing one border's work. Ruled off instead, three to a row. */
  .matters{
    display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px;
    border-top:1px solid var(--ink);
  }
  .matter{padding:34px 0 38px;border-bottom:1px solid var(--border);}
  .matter h3{
    font-family:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
    font-size:20px;line-height:1.28;font-weight:600;color:var(--ink);margin:0 0 12px;
  }
  .matter p{font-size:15.5px;line-height:1.65;color:var(--muted);margin:0;}
  @media (max-width:1020px){ .matters{grid-template-columns:1fr 1fr;gap:0 36px;} }
  @media (max-width:700px){ .matters{grid-template-columns:1fr;} }

  /* Due Diligence page: two grids need their own column count instead of
     .mtiles's/.matters's own defaults. An inline style would win that fight
     at every screen width, including the ones where it shouldn't — it
     outranks a class selector regardless of which media query the class
     rule sits in, so it would permanently defeat the mobile breakpoints
     above. ID-scoping instead is specific enough to win without doing
     that. */
  #gateway .mtiles{grid-template-columns:repeat(2,1fr);}
  @media (max-width:700px){ #gateway .mtiles{grid-template-columns:1fr;} }

  #sender-detail .matters{grid-template-columns:repeat(4,1fr);}
  @media (max-width:1020px){ #sender-detail .matters{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:700px){ #sender-detail .matters{grid-template-columns:1fr;} }

  /* Regulatory & Compliance's proof block, the same trick a third time. */
  #proof .matters{grid-template-columns:repeat(4,1fr);}
  @media (max-width:1020px){ #proof .matters{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:700px){ #proof .matters{grid-template-columns:1fr;} }

  /* Regulatory & Compliance's six areas: a title on the left, the
     explanation, an optional delivery note and the link on the right —
     one flowing list, not six product tiles. A managed regulatory practice
     reads as a short list of things a specialist firm runs, not a grid of
     SaaS cards. */
  /* Was var(--ink), a near-black rule far heavier than any other divider on
     the site — every other one, including .arow's own bottom border two
     lines down, uses the same light grey. Matched it. */
  .arows{border-top:1px solid var(--border);}
  .arow{
    display:grid;grid-template-columns:0.85fr 1.9fr;gap:48px;
    padding:32px 0;border-bottom:1px solid var(--border);
    align-items:start;color:inherit;text-decoration:none;
  }
  .arow-title{font-size:23px;font-weight:500;color:var(--ink);line-height:1.28;transition:color .18s ease;}
  .arow-body p{font-size:16px;line-height:1.65;color:var(--body);margin:0;}
  /* .arow-note is now only the small "FINMA regulated" credential on Swiss
     Representative — a deliberately small tag, not a second body-text size.
     Every other secondary sentence lives in .arow-body p at the same size
     as the row's main paragraph, so a row never mixes three different text
     sizes. */
  .arow-note{display:block;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--muted);margin-top:14px;}
  /* Sender, Responder, Marketing Material Review, Global Knowledge Hub and
     Horizon Scanning are small headings within the text, not system
     labels — normal Title Case at a size between the row title and the
     body, not a small-caps eyebrow. */
  .arow-sub{margin-top:16px;}
  .arow-sub strong{
    display:block;font-size:16px;font-weight:600;color:var(--zeidler-cyan);margin-bottom:5px;
  }
  .arow-sub p{font-size:16px;line-height:1.65;color:var(--body);margin:0 0 14px;}
  .arow-sub p:last-child{margin-bottom:0;}
  .arow-go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:14px;font-weight:700;color:var(--cyan);}
  .arow-go svg{transition:transform .2s ease;}
  .arow:hover .arow-title{color:var(--cyan);}
  .arow:hover .arow-go svg{transform:translateX(4px);}
  @media (max-width:820px){ .arow{grid-template-columns:1fr;gap:14px;} }

  /* Lawyer cards — large enough to read a face, which is the point */
  .lawyers{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;}
  .lawcard{
    display:flex;flex-direction:column;text-align:left;padding:0;cursor:pointer;
    background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;
    font-family:inherit;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  }
  .lawcard:hover{transform:translateY(-5px);border-color:var(--blue);
    box-shadow:0 28px 54px -26px rgba(48,50,69,.34);}
  .lawcard img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 14%;background:var(--tint-08);display:block;}
  .lawcard-mono{
    width:100%;aspect-ratio:1/1;background:var(--tint-08);color:var(--ink);
    display:flex;align-items:center;justify-content:center;font-size:64px;font-weight:600;
  }
  .lawcard-body{padding:24px 24px 26px;position:relative;}
  .lawcard-name{font-size:21px;font-weight:600;color:var(--ink);line-height:1.25;}
  .lawcard-role{font-size:14.5px;font-weight:600;color:var(--cyan);margin-top:6px;}
  .lawcard-loc{font-size:14px;color:var(--muted);margin-top:3px;}
  /* "Read full profile →" used to repeat, in cyan, on every single card,
     next to a role already in cyan, on a card that is already a button —
     one job stated three times per card. The whole card was always the
     click target, so the link only ever repeated that. Removed; a small
     arrow appears bottom right on hover or keyboard focus instead, cheap
     enough not to need explaining the way a repeated link did. */
  .lawcard-body::after{
    content:"\2192";position:absolute;right:24px;bottom:20px;
    font-size:16px;font-weight:700;color:var(--cyan);
    opacity:0;transform:translateX(-4px);
    transition:opacity .18s ease,transform .18s ease;
  }
  .lawcard:hover .lawcard-body::after,
  .lawcard:focus-visible .lawcard-body::after{opacity:1;transform:translateX(0);}


  @media (max-width:1020px){
    .matters{grid-template-columns:repeat(2,1fr);}
    .lawyers{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:920px){
    .lawhero h1{font-size:38px;}
    .lawhero-facts{gap:28px;}
    .pa{grid-template-columns:1fr;gap:18px;padding:36px 0;}
    .matters{grid-template-columns:1fr;}
    .lawyers{grid-template-columns:1fr;}
    .lawcover-inner{grid-template-columns:1fr;gap:40px;padding:72px 24px;}
  }


  /* ══ HEADER ═══════════════════════════════════════════════════════════════
     Three steps down, so nothing ever wraps or collides:
       > 1180px  full navigation
       ≤ 1180px  tighter spacing, client login moves to the burger
       ≤  980px  burger only, with every link inside it                      */
  .site-head{
    position:sticky;top:0;z-index:30;background:#fff;
    border-bottom:1px solid var(--border);
  }
  /* The homepage header rides over the hero rather than sitting above it: a
     white bar on top of a dark screen is furniture the eye skips, which is how
     the only mention of the firm's name went unread. It lands on first scroll —
     see the toggle in motion.js. */
  /* Fixed, not sticky: a sticky header stays in the flow, so the hero started
     below it and the transparent bar showed the white page behind — white
     links on white. Fixed, it overlays the dark hero as intended. */
  /* Fixed and always present. It turns white at the first movement of the
     page, so nothing ever travels behind a transparent bar and the wordmark is
     never off screen. */
  .site-head-hero{
    position:fixed;top:0;left:0;right:0;
    background-color:transparent;border-bottom-color:transparent;
  }
  /* The hero's own ground, opaque at the very top and gone by the bar's lower
     edge: the navigation stays legible, whatever scrolls under it, and the top
     of the page still reads as dark rather than as a white band. */
  .site-head-hero::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:var(--dark-space);
    transition:opacity .35s ease;
  }
  /* The bar's lower edge against the field, so a solid dark bar on a solid dark
     hero still reads as a bar rather than as more hero. */
  .site-head-hero::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:rgba(255,255,255,.14);transition:opacity .35s ease;
  }
  .site-head-hero.is-solid::after{opacity:0;}
  .site-head-hero.is-solid::before{opacity:0;}
  .site-head-hero .site-head-in{position:relative;z-index:1;}
  /* One logo, one height, on every page: nothing about the header resizes. */
  .site-head-hero .navlink{color:rgba(255,255,255,.8);}
  .site-head-hero .navlink:hover,.site-head-hero .navlink.active{color:#fff;}
  .site-head-hero .nav-cta{
    background:transparent;color:#fff;border-color:rgba(255,255,255,.42);
  }
  .site-head-hero .nav-cta:hover{background:#fff;color:var(--ink);border-color:#fff;}
  .site-head-hero .burger span{background:#fff;}
  .site-head-hero,.site-head-hero .navlink,.site-head-hero .nav-cta{
    transition:background-color .35s ease, border-color .35s ease, color .35s ease;
  }
  /* Landed. Everything returns to the shared header, so only the hero state is
     ever an exception. */
  /* At the hero's edge it comes back as a fixed white bar, dropping in from
     above so its arrival is legible rather than sudden. */
  /* The only change is the ground, faded in — the logo does not move and does
     not resize, which is what made the earlier version feel like a glitch. */
  .site-head-hero.is-solid{background-color:#fff;border-bottom-color:var(--border);}
  .site-head-hero.is-solid .navlink{color:var(--body);}
  .site-head-hero.is-solid .navlink:hover,
  .site-head-hero.is-solid .navlink.active{color:var(--ink);}
  .site-head-hero.is-solid .nav-cta{
    background:var(--navy-900);color:#fff;border-color:var(--ink);
  }
  .site-head-hero.is-solid .burger span{background:var(--ink);}

  .site-head-in{
    display:flex;align-items:center;justify-content:space-between;
    gap:40px;height:104px;
  }
  /* flex:0 0 auto is what stops the logo being squeezed into the first link. */
  .site-logo{flex:0 0 auto;display:flex;align-items:center;}
  .site-logo img{height:60px;width:auto;display:block;}
  .nav-links{display:flex;align-items:center;gap:36px;}
  .navlink{white-space:nowrap;position:relative;}
  .site-actions{flex:0 0 auto;display:flex;align-items:center;gap:24px;}
  .nav-cta{padding:11px 22px;font-size:14.5px;}

  .burger{
    display:none;width:44px;height:44px;padding:0;margin-right:-8px;
    background:none;border:0;cursor:pointer;
    flex-direction:column;align-items:center;justify-content:center;gap:5px;
  }
  .burger span{
    display:block;width:22px;height:2px;border-radius:2px;background:var(--ink);
    transition:transform .22s ease, opacity .18s ease;
  }
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .mobnav{
    display:flex;flex-direction:column;gap:2px;
    padding:12px 24px 24px;border-top:1px solid var(--border);background:#fff;
  }
  .mobnav[hidden]{display:none;}
  .moblink{
    padding:15px 2px;font-size:17px;font-weight:600;color:var(--ink);
    border-bottom:1px solid var(--border);
  }
  .moblink.active{color:var(--cyan);}
  .moblink-quiet{font-weight:500;color:var(--muted);font-size:15.5px;}
  /* The eight R&C areas, listed directly under "Regulatory & Compliance" in
     the mobile menu rather than behind the hover dropdown desktop gets:
     touch has no hover, and the mobile menu is already a full-screen list,
     so a second interaction layer here would only add friction. Smaller,
     indented and grouped in their own border so they read as nested under
     the label above them, not as eight more top-level items the same
     weight as "Careers". */
  .moblink-subgroup{padding-bottom:12px;border-bottom:1px solid var(--border);}
  .moblink-sub{
    display:block;padding:11px 2px 11px 16px;font-size:14.5px;font-weight:500;
    color:var(--muted);border-bottom:none;
  }
  .mobnav-cta{margin-top:18px;justify-content:center;}

  /* Where the bar runs out of room the gaps close, never the type: navigation
     type that changes with the window is navigation that looks like a different
     size on every screen. */
  @media (max-width:1168px){
    .site-head-in{gap:26px;}
    .nav-links{gap:26px;}
    .nav-login{display:none;}
  }
  @media (max-width:1000px){
    .nav-links{gap:18px;}
  }
  @media (max-width:956px){
    .nav-links{display:none;}
    .nav-cta{display:none;}
    .burger{display:flex;}
  }
  /* Only a phone gets a shorter bar, and then the logo comes down with it so
     the proportion is the one everywhere else. */
  @media (max-width:560px){
    .site-head-in{height:76px;}
    .site-logo img{height:44px;}
  }

  /* The page gutter should narrow when the burger appears, not 36px later —
     the old 920px rule left a mismatched band between the two. */
  @media (max-width:956px){
    .wrap{padding-left:24px;padding-right:24px;}
  }


  /* ══ GLOBAL REACH ═════════════════════════════════════════════════════════
     A generated map rather than photographs: a geo-neutral firm should not
     illustrate itself with pictures of buildings.

     The jurisdictions carry the interaction here. That works where it failed
     for the offices, because the jurisdictions are one per country and spread
     across the frame, while five of the nine offices sit inside three degrees
     of longitude. Their card opens over the map beside the dot, so reading one
     country never costs you the picture. */
  /* The card. Positioned in JS beside the dot and clamped to the map. */
  .jpop{
    position:absolute;z-index:6;width:262px;
    background:#fff;border:1px solid var(--border);border-radius:10px;
    padding:18px 20px 17px;box-shadow:0 26px 54px -22px rgba(16,23,41,.34);
    animation:jpopIn .18s ease;
  }
  .jpop[hidden]{display:none;}
  @keyframes jpopIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}
  .jpop-x{
    position:absolute;top:11px;right:11px;width:24px;height:24px;padding:0;
    border:0;border-radius:50%;background:transparent;color:var(--dk-muted);cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:color .16s ease;
  }
  .jpop-x:hover{color:var(--ink);}
  .jpop-name{
    font-size:16.5px;font-weight:600;color:var(--ink);line-height:1.25;
    padding-right:22px;
  }
  .jpop-list{list-style:none;margin:13px 0 0;padding:0;}
  .jpop-list li{
    position:relative;padding-left:16px;margin-top:7px;
    font-size:13.5px;line-height:1.5;color:var(--body);
  }
  .jpop-list li::before{
    content:"";position:absolute;left:0;top:8px;
    width:5px;height:5px;border-radius:50%;background:var(--blue);
  }



  @media (prefers-reduced-motion:reduce){
    .jpop{animation:none;}
  }


  /* A phone does not inherit the desktop's gaps: 140px there is a screen and a
     half of nothing. */
  @media (max-width:900px){
    .chap{border-top-width:1px;}
    section[style*="padding:148px"],section[style*="padding:136px"],
    section[style*="padding:140px"],section[style*="padding:124px"],
    section[style*="padding:120px"],section[style*="padding:112px"],
    section[style*="padding:108px"],section[style*="padding:104px"]{
      padding-top:84px !important;padding-bottom:84px !important;
    }
    .svc{padding:56px 0;}
    .pa{padding:40px 0;}
    .task{padding:24px 4px;}
    .t-lead{font-size:19px;}
    .t-body{font-size:17px;}
  }


  /* ══ OFFICES ══════════════════════════════════════════════════════════════
     The address, the number and the person are one click away in the panel,
     which is where detail that only matters once you have chosen a city
     belongs. .offc-label and .offc-grid, the bordered nine-column version this
     replaced, are gone; the dark, flowing version lives with the rest of
     Global Reach's own styles further down. */
  .offc{
    display:block;text-align:left;background:none;border:0;cursor:pointer;
  }
  .offc-city{
    font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.25;
    transition:color .16s ease;
  }

  /* Office panel: one column, so it stays a card rather than a spread. */
  /* The office panel: a head, an action, and the person — in that order of
     size, because the person is what the panel is for. */
  .office-panel{max-width:540px;}
  .office-panel-body{padding:46px 46px 38px;}
  .office-city{
    font-family:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
    font-size:36px;line-height:1.16;font-weight:600;color:var(--ink);
    letter-spacing:-.015em;margin:13px 0 0;
  }
  .office-addr{
    font-style:normal;font-size:16px;line-height:1.75;color:var(--body);
    margin:18px 0 0;
  }
  .office-tel{
    display:inline-flex;align-items:baseline;gap:9px;
    font-size:18px;font-weight:600;color:var(--cyan);
    margin-top:20px;padding-top:20px;border-top:1px solid var(--border);
  }
  .office-tel:hover{text-decoration:underline;}

  /* The footer is the only tinted surface in the panel, which is what makes
     the contact the second thing the eye lands on. */
  .office-foot{
    background:var(--bg-soft);border-top:1px solid var(--border);
    padding:30px 46px 34px;
  }
  .office-contact{display:flex;align-items:center;gap:22px;}
  .office-contact img,.office-contact .prow-mono{
    width:88px;height:88px;border-radius:50%;flex-shrink:0;
    object-fit:cover;object-position:center 12%;background:#e4e5eb;
    font-size:27px;
  }
  .office-contact-label{
    font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
    font-weight:700;color:var(--muted);margin-bottom:8px;
  }
  .office-contact-name{
    font-family:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
    font-size:22px;font-weight:600;color:var(--ink);line-height:1.2;
  }
  .office-contact-role{font-size:14.5px;line-height:1.5;color:var(--muted);margin-top:4px;}
  .office-contact-mail{font-size:15px;font-weight:600;color:var(--cyan);margin-top:9px;}
  .office-contact-mail::after{content:" \2192";}
  .office-contact:hover .office-contact-mail{text-decoration:underline;}

  @media (max-width:560px){
    .office-panel-body{padding:34px 26px 28px;}
    .office-foot{padding:24px 26px 28px;}
    .office-city{font-size:30px;}
    .office-contact{gap:16px;}
    .office-contact img,.office-contact .prow-mono{width:68px;height:68px;font-size:21px;}
    .office-contact-name{font-size:19.5px;}
  }


  /* ══ THE STORYLINE BLOCKS ═════════════════════════════════════════════════
     Belief, the three ways, and how the work runs. These carry the argument
     the homepage was missing, so they are given room rather than squeezed
     into the card grid that used to stand in for all three. */

  /* Three short verdicts under the belief. Deliberately not cards: they are
     one sentence broken into three, not three separate points. */

  .og-3{grid-template-columns:repeat(3,1fr);}

  /* The sentence that stops the three routes reading as three catalogues.
     It is the answer to "why does a law firm do due diligence", so it is
     marked rather than left to sit as another grey paragraph. */
  .ways-note{
    margin:28px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted);
  }

  /* Intake → first pass → review → evidence. A numbered list, because the
     order is the point. */
  .flow{
    list-style:none;margin:0;padding:0;
    display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.12);border-radius:10px;overflow:hidden;
  }
  .flow li{background:var(--navy-800);padding:30px 26px 32px;}
  .flow-n{
    display:block;font-size:12.5px;letter-spacing:.1em;font-weight:700;
    color:var(--blue);margin-bottom:14px;
  }
  .flow strong{
    display:block;font-size:18px;font-weight:600;color:#fff;line-height:1.3;
  }
  .flow p{font-size:14.5px;line-height:1.62;color:var(--dk-body);margin:10px 0 0;}
  .flow-note{
    font-size:14.5px;line-height:1.7;color:var(--dk-muted);
    margin:26px 0 0;max-width:820px;
  }
  .flow-note a{color:var(--blue);font-weight:600;}
  .flow-note a:hover{text-decoration:underline;}

  @media (max-width:980px){
    .belief-row{grid-template-columns:1fr;gap:22px;}
  }
  @media (max-width:620px){
    .ways-note{padding:18px 20px;font-size:15.5px;}
  }


  /* ══ DELIVERY ROUTE LABELS ════════════════════════════════════════════════
     On each service: who does the work. Two visually distinct chips, because
     the whole point is that they are different answers — a filled chip for the
     managed route, an outlined one for the software route. A service carrying
     both is not a contradiction; it is the offer. */
  .svc-modes{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
  /* Who runs it. Two filled pills were the loudest thing in a service head;
     a dot says the same in the margin — solid for us, outlined for you. */
  .mode{
    display:inline-flex;align-items:center;
    font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
    white-space:nowrap;
  }
  .mode::before{
    content:"";width:8px;height:8px;border-radius:50%;margin-right:10px;flex-shrink:0;
  }
  .mode-we{color:var(--ink);}
  .mode-we::before{background:var(--navy-900);}
  .mode-you{color:var(--cyan);}
  .mode-you::before{box-shadow:inset 0 0 0 2px var(--blue);}


  .step-title{
    font-family:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
    font-size:21px;line-height:1.25;font-weight:600;color:var(--ink);margin:0 0 10px;
  }

  /* "What arrives on your side": four ruled rows with a tick. It was built
     from inline styles, which is why it drifted from everything around it. */
  .arrives{display:flex;flex-direction:column;}
  .arrives-row{
    display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--border);
    color:var(--blue);
  }
  .arrives-row:last-child{border-bottom:1px solid var(--border);}
  .arrives-row svg{flex-shrink:0;margin-top:2px;}
  .arrives-name{font-size:15px;font-weight:600;color:var(--ink);}
  .arrives-note{font-size:14.5px;line-height:1.55;color:var(--muted);margin-top:3px;}

  /* Three columns on hairlines: what AI does, who decides, what is evidenced.
     The subject is accountability, so the setting is a document, not a card. */
  .gov{display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px;border-top:1px solid var(--ink);}
  .gov > div{padding:30px 0 0;}
  .gov-head{
    display:block;font-family:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
    font-size:20px;font-weight:600;color:var(--ink);line-height:1.3;margin-bottom:14px;
  }
  .gov p{font-size:16px;line-height:1.65;color:var(--body);margin:0;}
  @media (max-width:900px){
    .gov{grid-template-columns:1fr;gap:0;}
    .gov > div{padding:26px 0;border-bottom:1px solid var(--border);}
  }

  /* The catalogue. <details> because the browser already knows how to open and
     close a section, keyboard included, and its own find-in-page searches inside
     a closed one. Styled as a ruled index rather than as an accordion widget:
     the caption is the summary, the count sits in the margin, and the marker is
     a rule that becomes a cross. */
  .cats{border-top:1px solid var(--ink);}
  .cat{border-bottom:1px solid var(--border);}
  .cat > summary{
    display:flex;align-items:center;gap:20px;
    padding:26px 0;cursor:pointer;list-style:none;
  }
  .cat > summary::-webkit-details-marker{display:none;}
  .cat > summary::after{
    content:"";width:13px;height:13px;margin-left:auto;flex-shrink:0;
    background:
      linear-gradient(var(--ink),var(--ink)) center/13px 1.5px no-repeat,
      linear-gradient(var(--ink),var(--ink)) center/1.5px 13px no-repeat;
    transition:transform .22s ease, background-size .22s ease;
  }
  .cat[open] > summary::after{
    background:linear-gradient(var(--blue),var(--blue)) center/13px 1.5px no-repeat;
    transform:rotate(180deg);
  }
  .cat-name{
    font-family:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
    font-size:21px;font-weight:600;color:var(--ink);line-height:1.25;
  }
  .cat-count{
    font-family:var(--mono);font-size:11px;letter-spacing:.1em;
    color:var(--muted);font-variant-numeric:tabular-nums;
  }
  .cat > summary:hover .cat-name{color:var(--cyan);}
  .cat-list{
    list-style:none;margin:0;padding:0 0 26px;
    columns:2;column-gap:64px;
  }
  .cat-list li{
    font-size:16px;line-height:1.5;color:var(--body);
    padding:11px 0;border-top:1px solid var(--border);break-inside:avoid;
  }
  @media (max-width:900px){
    .cat-list{columns:1;}
    .cat-name{font-size:19px;}
  }

  /* The specifics: six blocks on one ruled grid, three to a row. A domicile's
     vehicles belong together — a flat alphabet of acronyms reads as a glossary,
     and a glossary is not evidence of having formed anything. */
  .doms{
    display:grid;grid-template-columns:repeat(3,1fr);gap:0 60px;
    border-top:1px solid var(--ink);
  }
  .dom{padding:30px 0 38px;border-bottom:1px solid var(--border);}
  .dom-head{
    display:block;font-family:var(--mono);
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    font-weight:600;color:var(--cyan);margin-bottom:18px;
  }
  /* The site's one reusable "short cyan dash" bullet: every list that uses
     it (five R&C pages today) shares this exact rule rather than its own
     copy, so width, gap and vertical position can never quietly drift
     apart between them the way they had. 11px dash, 11px gap (so 22px of
     total indent), vertically centred on the 15.5px/1.5 line box's optical
     centre (11.6px down, minus half the dash's own 2px) rather than an
     eyeballed offset. Because the indent lives on the whole <li> as
     padding, a bullet that wraps to a second line indents under the
     text on line one, never under the dash. */
  .dom-list{list-style:none;margin:0;padding:0;}
  .dom-list li{
    position:relative;padding-left:22px;margin-bottom:10px;
    font-size:15.5px;line-height:1.5;color:var(--body);
  }
  .dom-list li::before{
    content:"";position:absolute;left:0;top:10.5px;width:11px;height:2px;
    border-radius:1px;background:var(--blue);
  }
  @media (max-width:1000px){ .doms{grid-template-columns:repeat(2,1fr);gap:0 44px;} }
  @media (max-width:700px){ .doms{grid-template-columns:1fr;} }

  /* .vtab (the legal-work/systems/lawyer table this replaced) is gone from
     every page now; removed rather than left as dead weight. */

  /* The network field (Careers, Insights) and the governance field (About)
     share .lawhero-field's positioning; each only needs its own SVG to fill the
     box the way .rulefield does. */
  .netfield-svg{position:absolute;inset:0;width:100%;height:100%;display:block;}

  /* The network moves more than the rule-field's texture layers do, on purpose:
     these are inviting pages, and a network that visibly drifts and pulses
     reads as alive in a way a 6-9px sway over 42-58s does not. Scoped to
     .netfield-svg so the rule-field's own .rl-1/.rl-2/.rl-3 keep their original,
     quieter motion. */
  .netfield-svg .rl-1{animation:nfDrift1 22s ease-in-out infinite;}
  .netfield-svg .rl-2{animation:nfDrift2 27s ease-in-out infinite;}
  .netfield-svg .rl-3{animation:nfDrift3 19s ease-in-out infinite;}
  @keyframes nfDrift1{0%,100%{transform:translate(0,0);}50%{transform:translate(6px,-20px);}}
  @keyframes nfDrift2{0%,100%{transform:translate(0,0);}50%{transform:translate(-9px,14px);}}
  @keyframes nfDrift3{0%,100%{transform:translate(7px,0);}50%{transform:translate(-6px,-16px);}}

  /* The accent nodes breathe: each carries its own negative delay so the whole
     field doesn't pulse in lockstep, which would read as a heartbeat rather
     than as several independent points of light. */
  .nf-pulse{animation:nfPulse 5.5s ease-in-out infinite;animation-delay:var(--pd);}
  @keyframes nfPulse{0%,100%{opacity:.55;}50%{opacity:1;}}

  @media (prefers-reduced-motion:reduce){
    .netfield-svg .rl-layer,.nf-pulse{animation:none;}
  }

  /* ══ THE STATEMENT ═══════════════════════════════════════════════════════
     One dark beat with no hero furniture around it: no field, no scan, no
     kicker, no register number. It is meant to read as a pause in the scroll
     rather than as another numbered chapter, which is also why it carries no
     sec-mark. Centred, because a hero-width left rail here would make it look
     like an unfinished hero rather than a deliberate break. */
  .statement{
    background:
      radial-gradient(120% 140% at 50% -10%, rgba(11,187,239,.10), rgba(11,187,239,0) 55%),
      radial-gradient(90% 120% at 100% 110%, var(--navy-900), transparent 60%),
      var(--dark-space);
    padding:104px 48px;margin:56px 0;
  }
  .statement-in{max-width:760px;margin:0 auto;text-align:center;}
  .statement-line{
    font-family:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
    font-size:44px;font-weight:500;line-height:1.22;letter-spacing:-.015em;
    color:#fff;margin:0;
  }
  .statement-sub{
    font-size:18px;line-height:1.65;color:var(--dk-body);
    margin:22px auto 0;max-width:520px;
  }
  @media (max-width:820px){
    .statement{padding:72px 24px;margin:36px 0;}
    .statement-line{font-size:30px;}
    .statement-sub{font-size:16.5px;}
  }

  /* ══ THE PRODUCTS ═════════════════════════════════════════════════════════
     One ruled block each: the name and who may run it on the left, what it does
     and what it covers on the right. The facts are a definition list because
     that is what they are — a term and its value. */
  .prods{border-top:1px solid var(--ink);}
  .prod{
    display:grid;grid-template-columns:300px 1fr;gap:60px;
    padding:52px 0;border-bottom:1px solid var(--border);
  }
  .prod-kicker{
    display:block;font-family:var(--mono);
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    font-weight:600;color:var(--muted);
  }
  .prod-name{
    font-family:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
    font-size:31px;line-height:1.15;font-weight:600;color:var(--ink);
    letter-spacing:-.012em;margin:12px 0 0;
  }
  .prod-modes{display:flex;flex-direction:column;gap:9px;margin-top:20px;}
  .prod-go{
    display:inline-flex;align-items:center;gap:8px;margin-top:26px;
    font-size:14px;font-weight:700;color:var(--cyan);
  }
  .prod-go svg{transition:transform .2s ease;}
  .prod-go:hover svg{transform:translateX(4px);}
  .prod-lede{font-size:19px;line-height:1.6;color:var(--ink);margin:0;max-width:680px;}
  .prod-points{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:11px;}
  .prod-points li{
    position:relative;padding-left:24px;font-size:16px;line-height:1.55;color:var(--body);
  }
  .prod-points li::before{
    content:"";position:absolute;left:0;top:8px;width:8px;height:8px;
    border-radius:50%;background:var(--blue);
  }
  .prod-facts{
    display:grid;grid-template-columns:repeat(2,1fr);gap:22px 44px;
    margin:32px 0 0;padding-top:28px;border-top:1px solid var(--border);
  }
  .prod-facts dt{
    font-family:var(--mono);
    font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
    font-weight:600;color:var(--muted);
  }
  .prod-facts dd{font-size:16px;line-height:1.5;color:var(--ink);margin:7px 0 0;}

  @media (max-width:1000px){
    .prod{grid-template-columns:1fr;gap:28px;padding:40px 0;}
    .prod-modes{flex-direction:row;gap:22px;margin-top:16px;}
    .prod-facts{grid-template-columns:1fr;gap:18px;}
  }

  /* ══ THE CONTACT PAGE ══════════════════════════════════════════════════════
     A form set like the rest of the site: a label above, a hairline under, and
     the rule turns cyan on focus. That is the one place the brand colour marks a
     state rather than a link, which is right — it is the only thing on the site
     a visitor is doing rather than reading. */
  .cform{max-width:840px;}
  .cform-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px 44px;}
  .cfield{display:flex;flex-direction:column;}
  .cfield-wide{grid-column:1 / -1;}
  .cfield > .cfield-label{
    font-family:var(--mono);
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    font-weight:600;color:var(--muted);margin-bottom:10px;
  }
  .cfield > .cfield-label em{font-style:normal;color:var(--tint-30);letter-spacing:.1em;}
  /* Contact Form 7 wraps each control in its own span. display:contents
     removes it from .cfield's flex column so the input sits directly under
     its label, as designed. Safe here precisely because .cfield has no
     direct-child positioning rule -- unlike .wrap.sec, where the same trick
     would break the layout. */
  .cform .wpcf7-form-control-wrap{display:contents;}
  .wpcf7-not-valid-tip{
    font-family:var(--mono);font-size:11px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--red);margin-top:8px;
  }
  .wpcf7-response-output{
    font-size:14px;line-height:1.6;border:0;border-left:2px solid var(--red);
    margin:24px 0 0;padding:4px 0 4px 16px;
  }
  .wpcf7 form.sent .wpcf7-response-output{display:none;}
  .cfield input,.cfield select,.cfield textarea{
    font-family:inherit;font-size:17px;line-height:1.5;color:var(--ink);
    background:none;border:0;border-bottom:1px solid var(--border);
    padding:10px 0;border-radius:0;width:100%;
    transition:border-color .18s ease;
  }
  .cfield textarea{resize:vertical;}
  .cfield input:focus,.cfield select:focus,.cfield textarea:focus{
    outline:none;border-bottom-color:var(--blue);
  }
  .cfield input::placeholder,.cfield textarea::placeholder{color:var(--tint-30);}
  /* No border-top here any more: the message field right above already
     ends in its own underline (every .cfield does), so a second rule 44px
     below it read as two lines doing the same job rather than one
     deliberate divider — the margin alone is enough separation. */
  .cform-foot{
    display:flex;align-items:center;gap:32px;flex-wrap:wrap;
    margin-top:44px;
  }
  /* Contact Form 7 injects its submit spinner as a third flex child between the
     button and the note, carrying `margin:0 24px` of its own. That is 72px the
     design never budgeted for: the row totals more than the 840px container,
     flex-wrap sends the note to a second line, and the form grows ~58px taller
     than the reference. Zeroing the spinner's margin leaves it in the row --
     it still appears while a submission is in flight -- and the foot measures
     as designed again. */
  .cform-foot .wpcf7-spinner{
    /* Collapsed it must surrender the row's 32px gap as well as its own width,
       or the note still sits a gap-width right of where the design puts it. */
    margin:0 -32px 0 0;width:0;overflow:hidden;transition:width .15s ease;
  }
  /* CF7 puts .submitting on the form for the duration of the request, so the
     spinner claims its 24px only while it has something to say. Idle, the row
     measures exactly as the design drew it. */
  .cform-foot .wpcf7-form.submitting .wpcf7-spinner,
  form.submitting .cform-foot .wpcf7-spinner{width:24px;margin:0;}

  /* The nine offices: city, address, number. One row each, nothing boxed. */
  .offrows{border-top:1px solid var(--ink);}
  .offrow{
    display:grid;grid-template-columns:220px 1fr auto;gap:32px;align-items:baseline;
    padding:26px 0;border-bottom:1px solid var(--border);
  }
  .offrow-city{
    font-family:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
    font-size:21px;font-weight:600;color:var(--ink);line-height:1.2;
  }
  .offrow-city span{display:block;font-family:inherit;font-size:13.5px;font-weight:400;color:var(--muted);margin-top:5px;}
  .offrow-addr{font-style:normal;font-size:15.5px;line-height:1.6;color:var(--body);}
  .offrow-tel{
    font-size:16px;font-weight:600;color:var(--cyan);white-space:nowrap;
    font-variant-numeric:tabular-nums;
  }
  .offrow-tel:hover{text-decoration:underline;}

  @media (max-width:820px){
    .cform-grid{grid-template-columns:1fr;gap:28px;}
    .offrow{grid-template-columns:1fr;gap:8px;padding:22px 0;}
  }

  /* ══ TYPE SCALE ═══════════════════════════════════════════════════════════
     Ten steps, each with one job. The homepage had twenty-seven inline sizes,
     which is what reads as noise: not any single choice, but every section
     inventing its own hierarchy. Sizes live here now, colour stays local. */
  .t-kicker{
    font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
    line-height:1.4;
  }
  .t-h1{font-size:64px;line-height:1.09;font-weight:500;letter-spacing:-.022em;max-width:19ch;}
  .t-h2{font-size:42px;line-height:1.17;font-weight:500;letter-spacing:-.014em;max-width:30ch;}
  .t-h3{font-size:24px;line-height:1.34;font-weight:600;}
  .t-lead{font-size:21px;line-height:1.6;}
  .t-body{font-size:18px;line-height:1.75;}
  .t-small{font-size:15.5px;line-height:1.66;}

  @media (max-width:900px){
    .t-h1{font-size:40px;letter-spacing:-.018em;}
    .t-h2{font-size:27px;}
    .t-h3{font-size:21px;}
    .t-lead{font-size:18px;}
  }

  /* ══ BELIEF ═══════════════════════════════════════════════════════════════
     White and editorial. It used to be a dark band under a dark hero, which is
     why no wording fixed it. The promise sits on a dark inset panel so the
     section has one anchor rather than four paragraphs of equal weight. */
  .belief{background:#fff;padding:124px 0 116px;}
  .belief-lead{max-width:820px;}

  .belief-row{
    display:grid;grid-template-columns:repeat(3,1fr);gap:36px;
    margin:56px 0 0;padding-top:34px;border-top:1px solid var(--border);
  }
  /* One sentence per verdict, subject in bold — three statements rather
     than six fragments. */
  .belief-row p{
    margin:0;font-size:19.5px;line-height:1.5;color:var(--muted);max-width:22ch;
  }
  .belief-row strong{font-weight:600;color:var(--ink);}

  /* The mechanism. A cyan rule marks it as the answer to the three above. */
  .belief-ai{
    margin-top:56px;padding-left:26px;border-left:3px solid var(--blue);
    max-width:780px;
  }

  .dawn{
    padding:44px 0 0;margin-top:56px;
    border-top:1px solid var(--border);
  }
  .dawn-label{
    font-size:14px;letter-spacing:.14em;text-transform:uppercase;
    font-weight:700;color:var(--ink);margin:0;
  }
  /* Stacked, because three promises read as three promises. In a row at this
     size they wrap at the wrong places and lose the cadence. */
  .dawn-words{display:block;margin-top:22px;}
  .dawn-words span{
    display:block;font-size:42px;font-weight:600;color:var(--ink);
    line-height:1.2;letter-spacing:-.015em;
  }

  .dawn-coda{
    font-size:24px;line-height:1.4;color:var(--blue);
    font-style:italic;margin:24px 0 0;
  }

  @media (max-width:900px){
    .belief{padding:88px 0 80px;}
    .belief-row{grid-template-columns:1fr;gap:24px;margin-top:44px;}
    .belief-ai{margin-top:44px;padding-left:20px;}
  }

  /* Set by motion.js when the page is opened on a deep link: the reveal has
     already been applied, so no transition should run from it. */
  .no-anim{transition:none !important;}



  /* ══ STAGGER AND CARD POLISH ══════════════════════════════════════════════
     Children of a .stagger container rise in one after another once their
     section is revealed. The delay is capped at twelve steps — past that the
     last item arrives so late it reads as a fault rather than a flourish. */
  .reveal.is-visible .stagger > *{
    animation:riseIn .62s cubic-bezier(.22,.9,.3,1) backwards;
  }
  @keyframes riseIn{
    from{opacity:0;transform:translateY(14px);}
    to{opacity:1;transform:none;}
  }
  .reveal.is-visible .stagger > :nth-child(1){animation-delay:.04s;}
  .reveal.is-visible .stagger > :nth-child(2){animation-delay:.10s;}
  .reveal.is-visible .stagger > :nth-child(3){animation-delay:.16s;}
  .reveal.is-visible .stagger > :nth-child(4){animation-delay:.22s;}
  .reveal.is-visible .stagger > :nth-child(5){animation-delay:.28s;}
  .reveal.is-visible .stagger > :nth-child(6){animation-delay:.34s;}
  .reveal.is-visible .stagger > :nth-child(7){animation-delay:.40s;}
  .reveal.is-visible .stagger > :nth-child(8){animation-delay:.46s;}
  .reveal.is-visible .stagger > :nth-child(9){animation-delay:.52s;}
  .reveal.is-visible .stagger > :nth-child(10){animation-delay:.58s;}
  .reveal.is-visible .stagger > :nth-child(11){animation-delay:.64s;}
  .reveal.is-visible .stagger > :nth-child(n+12){animation-delay:.70s;}

  /* Hover: a lift with a cyan edge rather than a heavier shadow. Same easing
     everywhere, so the whole page feels like one mechanism. */
  .ogcard,.lawcard,.offc,.cap{
    transition:transform .26s cubic-bezier(.22,.9,.3,1),
               box-shadow .26s ease, border-color .26s ease, background .26s ease;
  }
  .ogcard:hover,.lawcard:hover{
    box-shadow:0 24px 54px -28px rgba(16,23,41,.42), 0 0 0 1px rgba(11,187,239,.35);
  }
  .cap:hover{background:#42445c;}
  .cap:hover .cap-glyph{color:var(--blue);}

  @media (prefers-reduced-motion:reduce){
    .reveal.is-visible .stagger > *{animation:none;}
  }


  /* ══ SECTION RULES THAT DRAW ══════════════════════════════════════════════
     The dividers under the belief and above the stats arrive as a line rather
     than appearing whole — the cheapest way to make a static page feel built.
     Replaces the plain border, so nothing shifts. */
  .belief-row,.reach-stats{position:relative;border-top:0;}
  .belief-row::before,.reach-stats::before{
    content:"";position:absolute;top:0;left:0;height:1px;width:100%;
    background:var(--border);
    transform:scaleX(0);transform-origin:left center;
    transition:transform 1.1s cubic-bezier(.22,.9,.3,1) .12s;
  }
  .reveal.is-visible .belief-row::before,
  .reveal.is-visible .reach-stats::before{transform:scaleX(1);}
  @media (prefers-reduced-motion:reduce){
    .belief-row::before,.reach-stats::before{transform:none;transition:none;}
  }



  /* ══ HERO — THE RULE FIELD ════════════════════════════════════════════════
     Five columns of rules, grouped like the articles of a regulation. Reads as
     a legal text and as a data structure at once, which is the intersection the
     firm occupies — and unlike a globe it does not contradict the geo-neutrality
     argument three screens below it.

     Three things move, all slowly: the columns drift at different rates so the
     field has depth, a scan passes down every eighteen seconds, and the flagged
     rules brighten with a lawyer's tick appearing beside them. */
  .hero-field{position:absolute;inset:0;}
  /* The firm, named in the dark where a visitor is looking. Letterspaced caps
     rather than the logo again: the wordmark is typographic, so this is the
     same identity at the size the question "who is this?" deserves. */
  .rulefield{position:absolute;inset:0;width:100%;height:100%;display:block;}

  /* Different drift rates are the whole depth effect. Amplitudes stay under
     10px: any more and it stops being parallax and becomes a wobble. */
  .rl-layer{will-change:transform;}
  .rl-1{animation:rlDrift1 42s ease-in-out infinite;}
  .rl-2{animation:rlDrift2 58s ease-in-out infinite;}
  .rl-3{animation:rlDrift3 34s ease-in-out infinite;}
  @keyframes rlDrift1{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
  @keyframes rlDrift2{0%,100%{transform:translateY(-6px);}50%{transform:translateY(5px);}}
  @keyframes rlDrift3{0%,100%{transform:translateY(3px);}50%{transform:translateY(-7px);}}

  /* The flagged rules and their margin ticks share one delay, so the tick
     arrives with the rule it belongs to. The delay itself is generated as a
     positive 0-18s offset, calibrated against .hero-scan's band starting at
     t=0. Two problems, one fix each, and both need to hold at once:

     1. A positive animation-delay holds an element frozen at its opening
        frame until the delay elapses, so every rule sat invisible for as
        much as 18 seconds before it ever lit up. Fixed by making the delay
        negative — but subtracting only a full 18s loop (the earlier fix)
        left the VALUE identical mod 18s, so it changed nothing about when
        the band itself becomes visible, only when each rule stops freezing.

     2. .hero-scan starts at translateY(-60%), off the top of the frame, so
        even with #1 fixed the visible band still took about four seconds to
        scroll into view — the corpus looked static right when it should
        already be moving.

     Fix for both together: shift .hero-scan by a real -4s (not a period
     multiple), which puts the band at the top of frame, already visible, at
     t=0. .rl-lit / .rl-mark / .rl-flash below shift by that SAME real 4s so
     they stay calibrated to the band's new (also shifted) position, plus an
     extra full period on top so the combined value is always negative
     (never re-introduces the freeze from #1). Subtracting a whole period
     more doesn't change phase at all, mod 18s — it only keeps the sign
     negative, which is the whole point. */
  .rl-lit{opacity:.34;animation:rlLit 18s linear infinite;animation-delay:calc(var(--d) - 22s);}
  @keyframes rlLit{
    0%{opacity:1;}
    2.6%{opacity:1;}
    3.4%{opacity:.34;}
    100%{opacity:.34;}
  }
  .rl-mark{opacity:0;animation:rlTick 18s linear infinite;animation-delay:calc(var(--d) - 22s);}
  @keyframes rlTick{
    0%{opacity:1;}
    13%{opacity:1;}
    19%{opacity:0;}
    100%{opacity:0;}
  }

  /* The pass itself: a wide, soft band travelling down the corpus. -4s puts
     it at the top of frame (already visible) at t=0 instead of at -60%
     (off screen) — see the long comment on .rl-lit above for why .rl-lit /
     .rl-mark / .rl-flash all shift by this same real amount, so every
     term's flash still fires exactly when this band reaches it. */
  /* Zeidler red, not cyan: a reader flagged the band itself reading as blue
     when it should carry the brand red. Same gradient shape and the same
     alphas, hue swapped from cyan (11,187,239 / 122,220,247) to red
     (229,0,70 / a lighter tint of it, 237,77,120). The terms and their
     checkmarks it lights up as it passes stay cyan (set in the SVG markup,
     not here) — this only recolors the travelling band and its leading edge. */
  .hero-scan{
    position:absolute;left:0;right:0;height:44%;
    background:linear-gradient(180deg,
      rgba(229,0,70,0) 0%,
      rgba(229,0,70,.06) 38%,
      rgba(237,77,120,.20) 50%,
      rgba(229,0,70,.05) 64%,
      rgba(229,0,70,0) 100%);
    animation:heroScan 18s linear infinite;
    animation-delay:-4s;
  }
  /* The leading edge, at the band's centre — which is the height the term
     delays are keyed to, so the coincidence is visible rather than implied.
     Faded away on the left so it never crosses the headline. */
  .hero-scan::after{
    content:"";position:absolute;left:0;right:0;top:50%;height:1px;
    background:linear-gradient(90deg,
      rgba(237,77,120,0) 0%, rgba(237,77,120,.14) 26%,
      rgba(237,77,120,.72) 52%, rgba(237,77,120,.86) 78%,
      rgba(237,77,120,.3) 100%);
    box-shadow:0 0 16px rgba(229,0,70,.5);
  }
  @keyframes heroScan{
    from{transform:translateY(-60%);}
    to{transform:translateY(210%);}
  }

  /* Keeps the headline readable over the field. Heavier on the left, where the
     text sits, and clearing to nothing on the right so the corpus stays visible
     as a corpus rather than a texture. */
  /* One veil for seven heroes. */
  .hero-veil,.lawhero-veil{
    position:absolute;inset:0;pointer-events:none;
    background:
      linear-gradient(100deg, rgba(11,12,18,.97) 0%, rgba(11,12,18,.9) 30%,
                              rgba(11,12,18,.42) 56%, rgba(11,12,18,.1) 78%,
                              rgba(11,12,18,.2) 100%),
      radial-gradient(120% 80% at 8% 46%, rgba(11,12,18,.84), rgba(11,12,18,0) 68%);
  }
  /* width:100% is load-bearing: as a flex item the wrap would shrink to its
     content and its auto margins would centre it, which put the headline off
     the grid every other line on the page is set to. */

  @media (max-width:760px){
    /* Five columns at phone width is noise, and the veil has to be near-solid
       for the headline anyway — so the field goes quiet rather than busy. */
    .rulefield{opacity:.5;}
    .hero-scan{display:none;}
  }
  @media (prefers-reduced-motion:reduce){
    .rl-layer,.rl-lit,.rl-mark,.hero-scan{animation:none;}
    .rl-lit{opacity:.7;}
    .rl-mark{opacity:.7;}
  }



  /* ══ GLOBAL REACH ═════════════════════════════════════════════════════════
     The globe is a background layer for the whole section, not an object in a
     frame. Offset right and cropped by the section, masked so its edge
     dissolves into the section colour — that dissolve is what makes it read as
     floating rather than pasted on. The copy sits over it on the left, where
     the sphere is not.

     Same near-black as the hero, so the two dark screens bookend the page. */
  /* Aligned with 01–06: same ground, same type, no variant of its own. The rule
     field, the map plate and the scrim went with the dark. */
  .reach-sec{
    position:relative;padding:104px 0 96px;
    background:
      radial-gradient(120% 140% at 8% -10%, rgba(11,187,239,.08), rgba(11,187,239,0) 55%),
      var(--dark-space);
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .reach-in{position:relative;}
  .reach-copy{max-width:none;}

  .reach-stats{
    display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
    max-width:none;margin-top:56px;border-top:1px solid rgba(255,255,255,.14);padding-top:36px;
  }
  .reach-stats strong{
    display:block;font-size:38px;font-weight:600;color:#fff;line-height:1.1;
    font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  }
  .reach-stats > div > span{
    display:block;font-size:13.5px;line-height:1.5;color:var(--dk-muted);margin-top:10px;
  }
  .reach-note{font-size:14.5px;color:var(--dk-muted);margin:22px 0 0;}

  .offc-intro{
    margin-top:52px;padding-top:28px;border-top:1px solid rgba(255,255,255,.14);
    display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;
  }
  .offc-heading{font-size:14px;font-weight:600;color:#fff;}
  .offc-hint{font-size:14px;color:var(--dk-muted);}
  .offc-line{display:flex;flex-wrap:wrap;column-gap:0;row-gap:12px;margin-top:16px;}
  .offc-line .offc{
    background:none;border:0;padding:2px 0;cursor:pointer;border-radius:3px;
  }
  .offc-line .offc:focus-visible{
    outline:1px solid rgba(255,255,255,.5);outline-offset:5px;
  }
  .offc-line .offc-city{
    font-size:15px;font-weight:500;color:var(--dk-body);
    text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;
    transition:color .16s ease, text-decoration-color .16s ease;
  }
  .offc-line .offc:hover .offc-city,.offc-line .offc:focus-visible .offc-city{
    color:var(--blue);text-decoration-color:var(--blue);
  }
  .offc-line .offc:not(:last-child) .offc-city::after{content:"\00b7";display:inline-block;margin:0 12px;color:var(--dk-faint);font-weight:400;text-decoration:none;}

  @media (max-width:1100px){
    /* The sphere has to stop competing with the copy before it overlaps it. */
  }
  @media (max-width:820px){
    .reach-sec{padding:80px 0 72px;}
    .reach-stats{grid-template-columns:repeat(2,1fr);gap:28px;margin-top:44px;}
    .offc-line{
      display:grid;grid-template-columns:repeat(3,1fr);column-gap:16px;row-gap:16px;
    }
    .offc-line .offc-city:not(:last-child)::after{content:none;}
  }
  @media (max-width:520px){
    .reach-stats{grid-template-columns:1fr 1fr;}
    .offc-line{grid-template-columns:repeat(2,1fr);}
  }

  /* globe.gl renders point labels as raw HTML, so the tooltip is styled here. */
  .gl-tip{
    font-family:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
    background:rgba(16,17,24,.96);border:1px solid rgba(11,187,239,.45);
    border-radius:8px;padding:8px 12px;
    font-size:14.5px;font-weight:600;color:#fff;white-space:nowrap;
    box-shadow:0 14px 30px -14px rgba(0,0,0,.85);
  }
  .gl-tip span{
    display:block;font-size:13px;font-weight:500;color:var(--blue);margin-top:3px;
  }
  .gl-tip-off{border-color:rgba(255,255,255,.6);}
  .gl-tip-off span{color:var(--dk-body);}


  /* ══ THE RULED SYSTEM ═════════════════════════════════════════════════════
     The hero's field, carried through the rest of the page so it reads as one
     design rather than one good screen and several others. Three scales:
     a texture behind dark blocks, a ruled divider, and the margin tick as the
     site's list marker. */

  /* TEXTURE. One SVG file behind any dark block. White art, so the ground
     colour shows through and opacity alone sets the weight. */
  .ruled{position:relative;overflow:hidden;overflow:clip;}
  .ruled::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:url('../patterns/ruled.svg');
    background-size:1400px auto;background-position:center top;
    background-repeat:repeat;
    opacity:.055;
  }
  .ruled > *{position:relative;z-index:1;}

  /* DIVIDER. A short run of rules where a plain border used to be, the way a
     statute breaks between articles. Set on the element's top edge. */
  .ruled-rule{position:relative;padding-top:34px;}
  .ruled-rule::before{
    content:"";position:absolute;top:0;left:0;
    width:190px;height:11px;
    background-image:
      linear-gradient(currentColor,currentColor),
      linear-gradient(currentColor,currentColor),
      linear-gradient(currentColor,currentColor);
    background-size:190px 2px, 132px 2px, 74px 2px;
    background-position:0 0, 0 4.5px, 0 9px;
    background-repeat:no-repeat;
    opacity:.3;
  }

  /* TICK. The mark from the hero margin, now the list marker. It is the detail
     that says a person confirmed the line — so it replaces the generic dot
     wherever a list asserts something. */
  .ticked{list-style:none;padding-left:0;}
  .ticked li{position:relative;padding-left:26px;}
  .ticked li::before{
    content:"";position:absolute;left:0;top:.52em;
    width:11px;height:7px;background:none;
    border-left:1.8px solid var(--blue);
    border-bottom:1.8px solid var(--blue);
    transform:rotate(-45deg) translateY(-1px);
    border-radius:1px;
  }


  /* ══ THE REGISTER ═════════════════════════════════════════════════════════
     The brand device. The wordmark is purely typographic — a cyan word over a
     grey one, no symbol — so there is no mark to borrow and any invented one
     would be the interchangeable decoration we are trying to get rid of. The
     identity comes from structure instead: every section numbered and named in
     a left rail, running down the page as a register, the way a regulation is
     built. It is what makes a Zeidler page recognisable from a thumbnail.

     The number is sticky within its section, so it stays beside you while you
     read — a register you are inside of, not a label you scrolled past. */
  .wrap.sec{position:relative;display:grid;grid-template-columns:178px 1fr;column-gap:60px;}
  /* The ruled margin. It runs the height of the section, and the number and its
     caption sit on it and travel down it — the register reads as one rule
     through the page rather than as a caption per section. */
  .wrap.sec::before{
    content:"";position:absolute;left:0;top:112px;bottom:6px;width:1px;
    background:linear-gradient(180deg,var(--border) 0%,var(--border) 88%,transparent 100%);
  }
  .wrap.sec > *:not(.sec-mark){grid-column:2;}
  .sec-mark{
    grid-column:1;grid-row:1 / -1;align-self:start;
    position:sticky;top:138px;
    display:flex;flex-direction:column;
  }
  .sec-no{
    font-family:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
    font-size:24px;font-weight:600;line-height:1;
    /* The logo's own #0BBBEF, unaltered: at 24px it holds, and beside the
       header it is the same number as the wordmark. */
    color:var(--blue);font-variant-numeric:tabular-nums;
    letter-spacing:.01em;
  }
  /* The register's number stays cyan everywhere: it is the site's strongest
     wayfinding element ("where am I in the structure"), and giving it up
     would cost cyan a real job. The label beside it is red instead of the
     old plain grey, with the same one-time scanner rule used on the page
     eyebrows (see .rchead-editorial above): "here begins a new thought",
     not "here begins a new section number" — cyan keeps the second job,
     red takes the first. A global rule, not a per-page or per-section one,
     so every "01 / 02 / 03" on the site reads the same way. */
  .sec-lab{
    font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
    font-weight:700;color:var(--zeidler-red);margin-top:12px;line-height:1.5;
  }
  .sec-lab::after{
    content:"";display:block;width:32px;height:3px;border-radius:2px;
    background:var(--zeidler-red);margin-top:10px;
    transform:scaleX(0);transform-origin:left center;
    transition:transform .6s cubic-bezier(.4,0,.2,1);
  }
  .sec-lab.is-in::after{transform:scaleX(1);}
  @media (prefers-reduced-motion:reduce){
    .sec-lab::after{transition:none;}
  }
  /* 138px clears the 104px main header with a little room to spare. This
     used to need a taller override on Regulatory & Compliance pages for
     their sticky sub-nav bar; that bar is gone now (the areas live in a
     dropdown off the main nav instead), so every page, R&C included, uses
     this same one number again. */

  /* On the two dark sections the accent and the hairline have to invert. */
  #software .sec-no,
  .ruled > .wrap.sec .sec-no{color:var(--blue);}
  #software .sec-lab{color:var(--dk-muted);}
  #software .wrap.sec::before{
    background:linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.26) 88%,transparent 100%);
  }
  .ruled > .wrap.sec .sec-lab{color:var(--dk-muted);}
  .ruled > .wrap.sec::before{
    background:linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.26) 88%,transparent 100%);
  }

  /* Where a section's own grid leaves no room for the rail, the register lies
     down inside it instead. Same number, same caption, same type. */
  .sec-mark-row{
    position:static;flex-direction:row;align-items:baseline;gap:14px;
    margin-bottom:20px;
  }

  @media (max-width:1080px){
    .wrap.sec{grid-template-columns:128px 1fr;column-gap:40px;}
  }
  @media (max-width:820px){
    /* The rail lies down above the content: same information, same order, no
       column narrow enough to be useless. */
    .wrap.sec{grid-template-columns:1fr;}
    .wrap.sec > *:not(.sec-mark){grid-column:1;}
    .sec-mark{
      grid-row:auto;position:static;
      flex-direction:row;align-items:baseline;gap:14px;margin-bottom:22px;
    }
    .sec-no{font-size:19.5px;}
    .sec-lab{margin-top:0;}
    .wrap.sec::before{display:none;}
  }


  /* ══ 01 WHO WE ARE ════════════════════════════════════════════════════════
     The opening argument, and it is about us. Takes the near-black of the hero
     and continues straight out of it, so it reads as the second half of the
     cover rather than as a new section. The closing line is the only place on
     this screen the signal colour is spent. */
  .who{background:var(--dark-space);padding:104px 0 96px;}
  .who-lead{max-width:860px;}
  .who-three{
    display:grid;grid-template-columns:repeat(3,1fr);gap:40px;
    margin-top:56px;padding-top:44px;
    border-top:1px solid rgba(255,255,255,.13);
  }
  .who-close{
    margin-top:56px;padding-left:26px;
    border-left:3px solid var(--blue);max-width:840px;
  }

  @media (max-width:980px){
    .who-three{grid-template-columns:1fr;gap:32px;}
  }
  @media (max-width:820px){
    .who{padding:76px 0 68px;}
    .who-three{margin-top:40px;padding-top:34px;}
    .who-close{margin-top:40px;padding-left:20px;}
  }




  /* ══ CHAPTER RULE ═════════════════════════════════════════════════════════
     Every numbered section opens on a hairline running the full width, in a mid
     grey that reads on white and on near-black alike. The ground colour then
     changes ON a drawn line instead of on nothing, which is what made the old
     transitions feel abrupt — six colour changes with nothing to explain them. */
  .chap{border-top:1px solid rgba(120,123,142,.34);}



  /* A section that sits on a dark ground: the register mark and the hairline
     invert with it. Declared once so any section can be moved between acts
     without hunting for the colours it carries inline. */
  .on-dark .sec-no{color:var(--blue);}
  .on-dark .sec-lab{color:var(--dk-muted);}
  .on-dark .wrap.sec::before{
    background:linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.26) 88%,transparent 100%);
  }
  .on-dark .ways-note{color:var(--dk-muted);}



  /* ══ 01 THREE WAYS — columns, not cards ═══════════════════════════════════
     Three white panels on near-black was the harshest thing on the page: a fill
     is the loudest tool available and it was doing work that a rule and good
     alignment do better. Now three columns divided by hairlines, each laid out
     to the same four-part grid, so the set reads as structure rather than as
     three separate objects. */
  .ways{
    display:grid;grid-template-columns:repeat(3,1fr);gap:0;
    grid-template-rows:auto auto auto auto auto;
    border-top:1px solid var(--border);
  }
  .way{
    display:grid;grid-row:1 / -1;grid-template-rows:subgrid;gap:0;
    padding:34px 34px 30px;
    border-left:1px solid var(--border);
    transition:background .24s ease;
  }
  .way:first-child{border-left:0;padding-left:0;}
  .way:last-child{padding-right:0;}
  .way:hover{background:var(--bg-soft);}
  .way-kicker{
    font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
    font-weight:700;color:var(--ink);
  }
  .way-title{
    font-family:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
    font-size:27px;font-weight:600;color:var(--ink);line-height:1.25;margin-top:14px;
  }
  .way-lede{font-size:15.5px;line-height:1.62;color:var(--body);margin-top:14px;min-height:4.9em;}
  .way-go{
    display:inline-flex;align-items:center;gap:8px;margin-top:22px;
    font-size:13.5px;font-weight:700;color:var(--ink);
  }
  .way-go svg{transition:transform .2s ease;}
  .way:hover .way-go{color:var(--cyan);}
  .way:hover .way-go svg{transform:translateX(4px);}

  @media (max-width:920px){
    .ways{grid-template-columns:1fr;}
    .way{
      border-left:0;border-top:1px solid var(--border);
      padding:30px 0;
    }
    .way:first-child{border-top:0;padding-top:0;}
  }


  /* ══ 04 WHAT AI DOES ══════════════════════════════════════════════════════
     A schedule with a header row, because the question the section answers is
     a matter of fact: at this stage, this is the operation, on this. The middle
     column is the answer, so the middle column is the cyan one — AI is legible
     from the words rather than from the point size. */
  .ail{list-style:none;margin:80px 0 0;padding:0;}
  .ail-row,.ail-head{
    display:grid;grid-template-columns:38px 190px 1fr;gap:0 28px;
    align-items:baseline;padding:28px 0;
    border-top:1px solid var(--tint-15);position:relative;overflow:hidden;
  }
  .ail-head{
    padding:0 0 14px;border-top:0;
  }
  /* .ail-head's own font-size never reached the header text: .ail-stage and
     .ail-combo each carry their own size, and a child's rule beats its
     parent's regardless of specificity. These two scoped overrides are what
     actually shrink "Workflow" and "What AI does" down to a label. */
  .ail-head .ail-stage,.ail-head .ail-combo{
    font-family:var(--mono);
    font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);line-height:1.4;
  }
  .ail-row:last-child{border-bottom:1px solid var(--tint-15);}
  .ail-no{
    font-family:var(--mono);
    font-size:12px;font-weight:600;color:var(--muted);
    font-variant-numeric:tabular-nums;letter-spacing:.04em;
  }

  .ail-stage{
    font-family:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
    font-size:19.5px;font-weight:500;color:var(--ink);line-height:1.3;
  }
  /* Emphasis by weight and size, not by hue: this column is the answer, and it
     is a heading rather than a link. */
  /* Regular weight, not bold: the stage name above carries the emphasis for the
     row, so this and "On what" below it read as two supporting lines rather
     than a second heading competing with the first. Three tiers, not four. */
  /* One flowing sentence, AI's part and Zeidler's part together, because a
     table that still boxes them separately argues against the section's own
     point. */
  .ail-combo{font-size:15.5px;line-height:1.65;color:var(--muted);}
  .ail-on{font-size:15px;line-height:1.6;color:var(--muted);}

  /* The homepage's schedule with two columns instead of three. */
  .life .ail-row,.life .ail-head{grid-template-columns:38px 240px 1fr;}

  /* Two lists of facts, set as facts: a monospaced caption on a navy rule, then
     names on hairlines. Nothing here is a claim that needs a sentence. */
  .spec{display:grid;grid-template-columns:1.15fr 1fr;gap:0 76px;}
  .spec-head{
    display:block;font-family:var(--mono);
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    font-weight:600;color:var(--muted);padding-bottom:15px;
    border-bottom:1px solid var(--ink);
  }
  .spec-list{list-style:none;margin:0;padding:0;columns:2;column-gap:44px;}
  .spec-list-one{columns:1;}
  .spec-list li{
    font-size:16px;line-height:1.5;color:var(--body);
    padding:14px 0;border-bottom:1px solid var(--border);break-inside:avoid;
  }
  @media (max-width:900px){
    .spec{grid-template-columns:1fr;gap:56px;}
    .spec-list{columns:1;}
  }

  /* Coverage on white: prose left, the figures in a column of their own. */
  .lawcover-inner{display:grid;grid-template-columns:1.3fr 1fr;gap:76px;align-items:start;}
  .lawcover-stats{display:grid;gap:36px;}
  .lawcover-stats strong{
    display:block;font-size:38px;font-weight:600;color:var(--ink);line-height:1.05;
    font-variant-numeric:tabular-nums;letter-spacing:-.012em;
  }
  .lawcover-stats span{display:block;font-size:15px;line-height:1.5;color:var(--muted);margin-top:9px;}
  @media (max-width:900px){ .lawcover-inner{grid-template-columns:1fr;gap:46px;} }

  @media (max-width:1000px){
    .ail-row{grid-template-columns:34px 1fr;gap:4px 18px;}
    .ail-on,.ail-combo{grid-column:2;}
    .ail-on{margin-top:4px;}
    .ail-head{display:none;}
  }


  /* ══ 04 THE PROMISE — ruled, not boxed ════════════════════════════════════ */

  /* The fast layer: a term flashes for about six per cent of its own loop, and
     every item has a different loop between five and eleven seconds — so the
     pattern never visibly repeats and something appears somewhere roughly every
     hundred milliseconds. Negative delays start them mid-cycle, which is why the
     field is already working in the first frame instead of waking up — the
     generated --d is a positive 0-18s offset, so it is turned negative here
     the same way .rl-lit and .rl-mark are, rather than waiting it out. It
     also shifts by the same real -4s .hero-scan itself now starts at (see
     the comment on .rl-lit), so a term still flashes exactly when the band
     reaches it, not four seconds after. */
  .rl-flash{opacity:0;animation:rlFlash var(--l) linear infinite;animation-delay:calc(var(--d) - var(--l) - 4s);}
  /* A tighter window than before — about two seconds of an eighteen-second
     loop — because the flash now has to coincide with the band passing rather
     than merely happen often enough. */
  /* Six tenths of a second: up as the line arrives, held while it crosses the
     word, gone as it leaves. A fifth of a second read as a blink. */
  @keyframes rlFlash{
    0%{opacity:0;}
    0.3%{opacity:1;}
    1.4%{opacity:1;}
    1.65%{opacity:0;}
    100%{opacity:0;}
  }

  /* A pulse travels each layer as it arrives — the same idea as the hero, at
     the speed a line is read rather than scanned. */
  .ail-row::before{
    content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
    background-image:linear-gradient(90deg,transparent 0%,var(--blue) 50%,transparent 100%);
    background-repeat:no-repeat;background-size:170px 100%;
    background-position:-210px 0;opacity:0;
  }
  .reveal.is-visible .ail-row::before{animation:opPulse 1.5s ease-out forwards;}
  /* Delay driven by the loop index the template emits as --i, rather than
     seven hand-written nth-child rules. Those counted from the section's
     first child, which is .ail-head, so they landed on ladder rows 2-8 and
     missed the first and last. var(--i,0) degrades to no delay. */
  .reveal.is-visible .ail-row::before{animation-delay:calc(var(--i,0) * .1s);}
  @keyframes opPulse{
    0%{background-position:-210px 0;opacity:0;}
    10%{opacity:1;}
    90%{opacity:1;}
    100%{background-position:calc(100% + 210px) 0;opacity:0;}
  }

  @media (prefers-reduced-motion:reduce){
    .rl-flash{animation:none;opacity:.75;}
    .ail-row::before{animation:none !important;opacity:0;}
  }

  @media (max-width:820px){
    .dawn-words span{font-size:28px;}
    .dawn-coda{font-size:18px;}
    .belief-row p{font-size:18px;max-width:none;}
  }

  /* One line per column saying who does the work and where AI sits — the same
     slot on all three, so the point lands on each route rather than being left
     to the section above. */
  .way-how{
    font-size:12.5px;letter-spacing:.05em;font-weight:700;
    color:var(--cyan);margin-top:14px;
  }
  /* Minimum heights on the two variable rows. Without them each column laid
     itself out to its own content and the dividers sat at three different
     heights — "You run it" was visibly lower than its neighbours. */
  @media (max-width:920px){
    .way-lede{min-height:0;}
  }

  /* The three statements that are true of every route, closing the section they
     frame. Was its own screen; it does more work here.

     Six flat grid children (headline, body, headline, body, headline, body),
     not three self-contained paragraphs: a headline that wraps to two lines
     used to push only its own body text down, leaving the other columns'
     body text starting at a different height. Auto-flowing across three
     columns puts every headline in row one and every body in row two, so
     row two always starts level regardless of how any one headline wraps. */
  .frame{
    display:grid;grid-template-columns:repeat(3,1fr);gap:10px 36px;
    margin-top:56px;padding-top:38px;border-top:1px solid var(--border);
  }
  .frame p{
    margin:0;font-size:16px;line-height:1.6;color:var(--muted);
  }
  .frame strong{display:block;font-size:19.5px;font-weight:600;color:var(--ink);line-height:1.3;}
  /* The markup stays headline-then-body per statement, in reading and
     screen-reader order — plain grid auto-flow would instead fill row one
     with the first three children regardless of type (headline, body,
     headline...), scrambling which body sits under which headline. These
     six explicit placements put statement N's headline and body in column
     N, rows one and two, without changing that source order. */
  .frame > :nth-child(1){grid-column:1;grid-row:1;}
  .frame > :nth-child(2){grid-column:1;grid-row:2;}
  .frame > :nth-child(3){grid-column:2;grid-row:1;}
  .frame > :nth-child(4){grid-column:2;grid-row:2;}
  .frame > :nth-child(5){grid-column:3;grid-row:1;}
  .frame > :nth-child(6){grid-column:3;grid-row:2;}

  /* The promise now stands alone, so it needs no rule above it. */
  .dawn-solo{border-top:0;padding-top:0;margin-top:0;}


  @media (max-width:920px){
    .frame{grid-template-columns:1fr;gap:26px;}
    /* One column now, so the explicit placements above must be cleared —
       left as they were, "column 3" would force phantom extra columns
       into existence rather than stacking everything in the one real one. */
    .frame > *{grid-column:auto;grid-row:auto;}
  }

  /* The cyan line above a section heading. One rule, so every section sits on
     the same rhythm — 01 had its spacing inline and the others would have
     drifted from it. */
  .sec-kick{font-size:14px;letter-spacing:.14em;margin:0 0 22px;}


  /* ══ FOOTER ═══════════════════════════════════════════════════════════════
     Four jobs, two rules. It had three stacked rows and five visual languages
     in one block: a 28px wordmark beside 14px prose, three link columns of
     three, nine offices set as three middot lines, a raster badge next to a
     vendor wordmark, and five underlined links stacked right-aligned. */
  .ft{background:var(--dark-space);padding:0 0 40px;}

  /* The contact row is the footer's top row, not a band of its own on a
     slightly different dark — which is what made the seam show. */
  .ft-cta{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:40px;flex-wrap:wrap;padding:84px 0 72px;
  }

  /* Services now splits into two sub-columns (see nav.ft-col[aria-label
     "Services"] below) and needs the room a single 1fr track never gave
     it; Explore and Company are two or three short words each and never
     needed a full 1fr to begin with. Same total (4.5fr either way),
     redistributed toward the column actually using it. */
  .ft-main{
    display:grid;grid-template-columns:1.3fr 0.8fr 1.6fr 0.8fr;gap:44px;
    padding:52px 0 48px;border-top:1px solid rgba(255,255,255,.15);
  }
  .ft-brand p{
    font-size:14.5px;line-height:1.65;color:var(--dk-muted);margin:20px 0 0;max-width:300px;
  }
  /* At 28px the two-tone lockup was illegible. A mark needs room to read as one. */
  .ft-logo{height:42px;width:auto;display:block;}
  .ft-in{
    display:inline-flex;align-items:center;gap:9px;margin-top:22px;
    font-size:13.5px;font-weight:600;color:var(--dk-muted);transition:color .18s ease;
  }
  .ft-in:hover{color:#fff;}

  .ft-col{display:flex;flex-direction:column;}
  .ft-h{
    font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
    font-weight:700;color:var(--muted);margin-bottom:18px;
  }
  .ft-col a{
    font-size:14.5px;line-height:1.5;color:var(--dk-body);padding:5px 0;
    transition:color .18s ease;
  }
  .ft-col a:hover{color:#fff;}
  /* Eight links made Services roughly twice the height of Company or
     Explore, leaving a tall empty gap under those shorter columns before
     the office row's own divider — which read as the divider not reaching
     as far down as it should, rather than what it actually is, three
     columns of different lengths sharing one grid row. Splitting Services
     into two sub-columns brings its height back in line with its
     neighbours instead. Collapses to one column at the same width .ft-main
     itself drops to a single column, so it never gets cramped. */
  nav.ft-col[aria-label="Services"]{
    display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;
    grid-template-rows:auto repeat(4,auto);column-gap:20px;
  }
  nav.ft-col[aria-label="Services"] .ft-h{grid-column:1 / -1;}
  @media (max-width:640px){
    nav.ft-col[aria-label="Services"]{display:flex;flex-direction:column;}
  }

  /* Nine offices, one line: the office row used to be one of .ft-main's
     four grid columns, so it only had about a fifth of the footer's width
     to work with and wrapped wherever it ran out of room — a different,
     ragged break at nearly every viewport width. Full width row instead,
     the same way .ft-creds and .ft-bar already sit below .ft-main, so all
     nine cities fit on one deliberate line; horizontal scroll is the
     fallback for a desktop too narrow for that, not a wrap. Below 820px
     the existing .offc-line grid breakpoints already take over with a
     controlled 3-then-2 column layout, untouched here. */
  .ft-offices{
    display:flex;flex-direction:column;
    padding:32px 0 28px;border-top:1px solid rgba(255,255,255,.09);
  }
  .ft-offices .ft-h{margin-bottom:16px;}
  .ft-offices .offc-line{
    flex-wrap:nowrap;overflow-x:auto;margin-top:0;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .ft-offices .offc-line::-webkit-scrollbar{display:none;}
  .ft-offices .offc-city{font-size:14px;}
  .ft-offices .offc-line .offc:not(:last-child) .offc-city::after{color:var(--dk-muted);}
  /* Below 820px the shared .offc-line breakpoint switches this to
     display:grid, which makes flex-wrap/overflow-x above moot — no
     override needed here, the two rules simply don't compete. */

  /* One line of small text instead of a grid of three unequal columns. */
  .ft-bar{
    display:flex;align-items:baseline;justify-content:space-between;
    gap:24px 44px;flex-wrap:wrap;
    padding-top:26px;border-top:1px solid rgba(255,255,255,.09);
  }
  /* A credential, not a footnote: its own row, its own rule, and set large
     enough that a procurement team finds it without looking. */
  .ft-creds{
    display:flex;gap:14px 44px;flex-wrap:wrap;
    margin:0;padding:26px 0 28px;list-style:none;
    border-top:1px solid rgba(255,255,255,.09);
  }
  .ft-creds li{
    font-size:15px;font-weight:600;color:#fff;padding-left:26px;
  }
  /* The tick lifts a shade on the dark ground; --blue is calibrated for white. */
  .ft-creds li::before{
    border-left-color:var(--blue);border-bottom-color:var(--blue);
    width:12px;height:8px;border-width:2px;
  }
  .ft-legal{
    display:flex;gap:8px 22px;flex-wrap:wrap;margin:0;padding:0;list-style:none;
  }
  .ft-legal li{font-size:13px;color:var(--dk-muted);}
  .ft-legal a{color:var(--dk-muted);transition:color .18s ease;}
  .ft-legal a:hover{color:#fff;text-decoration:underline;}
  .ft-copy{color:var(--muted);}

  .ft-note{
    font-size:12.5px;line-height:1.65;color:var(--dk-faint);margin:30px 0 0;max-width:860px;
  }

  @media (max-width:1020px){
    .ft-main{grid-template-columns:1fr 1fr;gap:40px 32px;}
    .ft-brand{grid-column:1 / -1;}
  }
  @media (max-width:640px){
    .ft-cta{padding:60px 0 48px;}
    .ft-main{grid-template-columns:1fr;gap:34px;}
    .ft-bar{flex-direction:column;align-items:flex-start;gap:20px;}
  }

  /* ── Long-form prose ─────────────────────────────────────────────────────
     The static build designed no article page and no legal page — it had
     neither. This is the one piece of new design in the conversion, and it is
     deliberately restrained: it reuses the existing type scale and tokens
     rather than inventing a second vocabulary, so a legal notice and an
     Insights article read as the same site as the rest.

     Applies to editor-authored content, where we do not control the markup:
     WordPress emits bare <h2>, <p>, <ul> and the styling has to meet it there
     rather than through classes. */
  .zg-prose{max-width:760px;color:var(--body);font-size:17px;line-height:1.72;}
  .zg-prose > * + *{margin-top:1.15em;}
  .zg-prose h2{
    font-family:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
    font-size:26px;line-height:1.25;font-weight:600;color:var(--ink);
    margin-top:2.2em;letter-spacing:-0.01em;
  }
  .zg-prose h3{
    font-family:'Brown','Brown Pro',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
    font-size:20px;line-height:1.3;font-weight:600;color:var(--ink);margin-top:1.9em;
  }
  .zg-prose h2:first-child,.zg-prose h3:first-child{margin-top:0;}
  .zg-prose a{color:var(--cyan-dark);text-decoration:underline;text-underline-offset:3px;}
  .zg-prose a:hover{color:var(--ink);}
  .zg-prose ul,.zg-prose ol{padding-left:1.25em;}
  .zg-prose li + li{margin-top:.5em;}
  .zg-prose strong{color:var(--ink);font-weight:600;}
  .zg-prose blockquote{
    margin-left:0;padding-left:20px;border-left:2px solid var(--red);
    color:var(--ink);font-size:19px;line-height:1.6;
  }
  .zg-prose img{border-radius:8px;height:auto;}
  .zg-prose figcaption{font-size:13.5px;color:var(--muted);margin-top:10px;}
  .zg-prose hr{border:0;border-top:1px solid var(--border);margin:2.4em 0;}
  .zg-prose table{width:100%;border-collapse:collapse;font-size:15px;}
  .zg-prose th,.zg-prose td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--border);}
  .zg-prose th{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;}
  .zg-prose code{background:var(--bg-soft);padding:.1em .35em;border-radius:3px;font-size:.9em;}

  /* The article's own meta line: type, date. */
  .zg-article-meta{
    display:flex;gap:14px;align-items:center;flex-wrap:wrap;
    font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;
    text-transform:uppercase;color:var(--muted);margin-top:18px;
  }
  @media (max-width:760px){
    .zg-prose{font-size:16px;}
    .zg-prose h2{font-size:23px;}
  }

  /* ── LEGAL DOCUMENT MODAL ────────────────────────────────────────────────
     Legal Notice, Website terms of use, Privacy Notice, Cookies Notice, ICT
     Commitment — opened from the footer, built on the same .modal shell as the
     profile and office modals.

     The one structural difference from those two: the panel does not scroll,
     its middle does. .modal-panel is overflow-y:auto, which for a 12,000-word
     privacy notice would scroll the title and the document switcher off the
     top. Here the head and the foot stay put and .legal-scroll takes the
     overflow, so you always know which document you are reading and can move
     to another one without scrolling back. */
  .legal-panel{
    max-width:880px;display:flex;flex-direction:column;
    max-height:88vh;overflow:hidden;
  }
  .legal-head{
    flex:0 0 auto;padding:44px 52px 22px;border-bottom:1px solid var(--border);
    /* clear of the close button */
    padding-right:84px;
  }
  .legal-name{font-size:32px;line-height:1.2;font-weight:500;margin:12px 0 0;color:var(--ink);}
  .legal-meta{
    font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--muted);margin-top:10px;min-height:14px;
  }

  .legal-scroll{
    flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
    padding:30px 52px 38px;
  }
  .legal-scroll:focus-visible{outline:2px solid var(--zeidler-cyan);outline-offset:-4px;}

  /* The document itself. Deliberately the same measure and rhythm as
     .zg-prose — a legal page and this modal should not read as two different
     typefaces of the same firm — but scoped, because .zg-prose is a page-width
     column and this is a panel. */
  .legal-body{color:var(--body);font-size:15.5px;line-height:1.72;max-width:70ch;}
  /* The rhythm is set on the children rather than on p/h2/ul individually:
     every element's own margin goes, one rule puts the gap back between
     siblings, and the exceptions below override it. Setting `p{margin:0}` as
     well would out-specify the sibling rule and collapse the whole document
     into one block of text. */
  .legal-body > *{margin:0;}
  .legal-body > * + *{margin-top:1.05em;}
  .legal-body h2{
    font-size:20px;line-height:1.3;font-weight:500;color:var(--ink);
    margin-top:2.1em;
  }
  .legal-body h3{
    font-size:15.5px;font-weight:600;color:var(--ink);margin-top:1.7em;
  }
  /* A heading belongs to what follows it, not to what came before. */
  .legal-body h2 + *,.legal-body h3 + *{margin-top:.5em;}
  .legal-body p + ul,.legal-body p + ol{margin-top:.6em;}
  .legal-body h2:first-child,.legal-body h3:first-child{margin-top:0;}
  .legal-body strong{color:var(--ink);font-weight:600;}
  .legal-body a{color:var(--cyan-dark);text-decoration:underline;text-underline-offset:3px;}
  .legal-body a:hover{color:var(--ink);}
  .legal-body ul,.legal-body ol{padding-left:1.2em;margin-block:0;}
  .legal-body li + li{margin-top:.45em;}
  .legal-body li > ul{margin-top:.45em;}
  .legal-loading{color:var(--muted);}

  /* Some of these tables are three columns of dense prose. They get their own
     horizontal scroll rather than being squeezed to unreadable, and a minimum
     width so they do not collapse into a column of single words on a phone. */
  .legal-table{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;}
  .legal-table table{width:100%;min-width:560px;border-collapse:collapse;font-size:14px;line-height:1.6;}
  .legal-table th,.legal-table td{
    text-align:left;vertical-align:top;padding:12px 16px 12px 0;
    border-bottom:1px solid var(--border);
  }
  .legal-table th{
    font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--muted);font-weight:600;border-bottom-color:var(--tint-30);
  }
  .legal-table td ul{padding-left:1.1em;margin:0;}
  .legal-table td p{margin:0 0 .5em;}
  .legal-table tr:last-child td{border-bottom:0;}

  .legal-foot{
    position:relative;
    flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
    gap:20px;flex-wrap:wrap;
    padding:16px 52px;border-top:1px solid var(--border);background:var(--bg-soft);
  }
  /* The document runs under the foot, so the last visible line is always cut
     mid-glyph. The fade says "there is more" instead of "this is the end". */
  .legal-foot::before{
    content:"";position:absolute;left:0;right:0;bottom:100%;height:34px;
    background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);
    pointer-events:none;
  }
  /* The other four documents, so you can move between them without closing —
     they are read together far more often than any one is read alone. */
  .legal-switch{display:flex;flex-wrap:wrap;gap:6px;}
  .legal-switch-item{
    border:1px solid var(--border);background:#fff;color:var(--body);
    font:inherit;font-size:12.5px;line-height:1;
    padding:8px 12px;border-radius:999px;cursor:pointer;
    transition:color .16s ease,border-color .16s ease,background .16s ease;
  }
  .legal-switch-item:hover{color:var(--ink);border-color:var(--tint-30);}
  .legal-switch-item.active{
    background:var(--ink);border-color:var(--ink);color:#fff;cursor:default;
  }
  .legal-switch-item:focus-visible{outline:2px solid var(--zeidler-cyan);outline-offset:2px;}
  .legal-page-link{white-space:nowrap;}

  @media (max-width:920px){
    .legal-panel{max-height:100vh;}
    .legal-head{padding:28px 24px 18px;padding-right:72px;}
    .legal-name{font-size:25px;}
    .legal-scroll{padding:22px 24px 28px;}
    .legal-foot{padding:14px 24px;}
    /* The switcher is five pills; below the fold of a phone it is worth more
       as a scrolling row than as four wrapped lines pushing the document up. */
    .legal-switch{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;}
    .legal-switch-item{flex:0 0 auto;}
  }

/* Podcast players and video embeds inside an article. The providers ship their
   own styling, so this only constrains width to the prose measure and stops a
   fixed-width iframe forcing a horizontal scrollbar on a phone. */
.zg-article-embed{max-width:960px;margin:0 0 8px;}
.zg-article-embed:empty{display:none;}
.zg-article-embed iframe{max-width:100%;}

/* Article credits: role, name, headshot. Sits at the foot of the prose column,
   so it keeps the article's measure rather than the full page width. Wraps to
   one per line on a phone; a headshot is optional because many of the imported
   references point at images that no longer exist. */
.zg-authors{
  display:flex;flex-wrap:wrap;gap:28px 48px;
  max-width:760px;margin:52px 0 0;padding-top:28px;
  border-top:1px solid var(--border);
}
.zg-author{display:flex;align-items:center;gap:16px;}
.zg-author-avatar{flex:0 0 auto;}
.zg-author-img{
  width:56px;height:56px;border-radius:50%;object-fit:cover;display:block;
}
.zg-author-role{
  margin:0 0 2px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
}
.zg-author-name{margin:0;font-weight:600;color:var(--ink);}
.zg-author-name a{color:inherit;text-decoration:none;border-bottom:1px solid var(--border);}
.zg-author-name a:hover{border-bottom-color:currentColor;}

/* A single colleague's page. Two columns on a desktop -- portrait and contact
   on the left, everything else on the right -- collapsing to one on a phone.
   Reuses .modal-role/.modal-name/.modal-loc/.modal-facts so this page and the
   About modal cannot drift apart. */
.tm-profile{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start;max-width:1000px;}
.tm-media{position:sticky;top:110px;}
.tm-portrait{width:100%;height:auto;border-radius:10px;display:block;}
.tm-contact{display:flex;flex-wrap:wrap;gap:18px;margin-top:20px;}
@media (max-width:920px){
  .tm-profile{grid-template-columns:1fr;gap:32px;}
  .tm-media{position:static;max-width:280px;}
}