/* =========================================================================
   Craft Legal — site stylesheet
   Layout: editorial pages. Utility bar + sticky header with a right-side
   slide-in menu; dark teal hero and closing bands frame a light paper body.
   ========================================================================= */
:root{
  /* Color — Craft Legal brand values (from the staging stylesheet) */
  --ink:#102D32;        /* Craft ink: header, footer, buttons, body text */
  --ink-2:#173D40;      /* Craft dark section: heroes, menu panel */
  --paper:#F4F3EE;      /* page ground */
  --text:#102D32;
  --brass:#DCEAA2;      /* Craft accent (pale yellow) */
  --brass-deep:#31565B; /* accent as text on light backgrounds */
  --surface:#FFFFFF;
  --tint:#E5EBE5;       /* soft panel (from staging quote band) */
  --muted:#526A69;
  --line:#D5DCDA;
  --on-ink:#FFFFFF;
  --on-ink-muted:#B5C4C0;
  --line-ink:rgba(255,255,255,.16);

  /* Type */
  /* Heading font. Choose it in Appearance > Craft Legal Settings > Heading font, which overrides
     these four values. Default: Instrument Sans (Option 4). */
  --head:"Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --head-stretch:100%;       /* width, for fonts that have one */
  --head-track:-.01em;       /* letter-spacing on large headings */
  --menu-track:.04em;        /* letter-spacing in the slide-in menu */
  --display:var(--head);
  --serif:"Instrument Serif", Georgia, "Iowan Old Style", serif;  /* testimonial quotes only */
  --sans:"Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;

  --gutter:clamp(16px, 4vw, 48px);
  /* Vertical spacing. To tighten or loosen the whole site, override these in
     Divi > Theme Options > General > Custom CSS, e.g. :root{--sec-pad:40px} */
  --sec-pad:clamp(44px,5.5vw,80px);      /* top and bottom of each content section */
  --head-gap:clamp(22px,3vw,40px);       /* section heading to its content */
  --hero-pad:clamp(36px,5vw,72px);       /* top of the home hero and page headings */
  --band-pad:clamp(36px,4.5vw,56px);     /* contact band */
  --max:1240px;
  --ease:cubic-bezier(.22,.8,.24,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
@supports not (overflow:clip){html,body{overflow-x:hidden}}
/* Anchored sections land below the sticky header */
[id]{scroll-margin-top:calc(env(safe-area-inset-top,0px) + 96px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
html.menu-lock{overflow:hidden}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass-deep);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible,.site-header :focus-visible,.drawer :focus-visible,.site-footer :focus-visible{outline-color:var(--brass)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--brass);color:var(--ink);padding:10px 14px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}
[hidden]{display:none!important}

/* ---------- Utility bar ---------- */
.utility{background:var(--ink);color:var(--on-ink-muted);font-size:13px;border-bottom:1px solid var(--line-ink)}
.utility .wrap{display:flex;gap:24px;align-items:center;justify-content:space-between;padding-block:8px;flex-wrap:wrap}
.utility ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.utility a{text-decoration:none}
.utility a:hover{color:var(--on-ink)}
@media (max-width:640px){.utility .hide-sm{display:none}}

/* ---------- Header ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--ink);color:var(--on-ink);transition:box-shadow .3s var(--ease)}
.site-header.scrolled{box-shadow:0 8px 24px rgba(0,0,0,.18)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}
.logo{display:inline-flex;align-items:center;text-decoration:none;transition:opacity .3s var(--ease)}
.logo img{height:36px;width:auto;display:block;filter:invert(1)} /* dark logo artwork shown white on dark */
.logo .wordmark-fallback{font-family:var(--sans);font-weight:700;letter-spacing:.2em;font-size:17px}
.header-actions{display:flex;align-items:center;gap:20px}
.header-cta{font-size:14px;font-weight:600;text-decoration:none;padding:10px 16px;border:1px solid var(--line-ink);border-radius:999px;transition:background .2s,border-color .2s}
.header-cta:hover{border-color:var(--brass);background:rgba(220,234,162,.12)}
@media (max-width:640px){.header-cta{display:none}}

/* Two-line menu icon -> X. Lines slide together, then rotate. */
.burger{position:relative;z-index:60;width:48px;height:48px;border:0;background:transparent;color:var(--on-ink);cursor:pointer;display:grid;place-items:center;border-radius:50%}
.burger:hover{background:rgba(255,255,255,.06)}
.burger .bars{position:relative;width:30px;height:10px;transition:transform .35s var(--ease)}
.burger .bars i{position:absolute;left:0;width:30px;height:2px;background:currentColor;border-radius:2px;transition:top .25s var(--ease) .25s,transform .3s var(--ease) 0s}
.burger .bars i:nth-child(1){top:0}
.burger .bars i:nth-child(2){top:8px}
.burger[aria-expanded="true"] .bars i{top:4px;transition:top .25s var(--ease) 0s,transform .3s var(--ease) .25s}
.burger[aria-expanded="true"] .bars i:nth-child(1){transform:rotate(45deg)}
.burger[aria-expanded="true"] .bars i:nth-child(2){transform:rotate(-45deg)}
.burger[aria-expanded="true"]:hover .bars{transform:rotate(90deg)}
/* While open, the header rises above the panel so the X stays in place */
body.menu-open .site-header{z-index:55;background:transparent;box-shadow:none;pointer-events:none}
body.menu-open .site-header .burger{pointer-events:auto}
body.menu-open .site-header .logo,body.menu-open .site-header .header-cta{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}

/* ---------- Slide-in menu ---------- */
.scrim{position:fixed;inset:0;z-index:45;background:rgba(6,18,20,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
.scrim.open{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:50;width:min(460px,100%);background:var(--ink-2);color:var(--on-ink);
  padding:calc(env(safe-area-inset-top,0px) + 96px) 40px calc(env(safe-area-inset-bottom,0px) + 32px);
  display:flex;flex-direction:column;gap:32px;overflow-y:auto;
  transform:translateX(100%);visibility:hidden;transition:transform .6s var(--ease),visibility 0s .6s;box-shadow:-24px 0 60px rgba(0,0,0,.25)}
.drawer.open{transform:none;visibility:visible;transition:transform .6s var(--ease)}
.drawer nav ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.drawer nav a{display:flex;align-items:baseline;gap:16px;text-decoration:none;font-family:var(--display);font-size:clamp(32px,6vw,42px);line-height:1.15;padding-block:5px;
  opacity:0;transform:translateX(28px);transition:opacity .45s var(--ease),transform .55s var(--ease),color .2s}
.drawer nav a small{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--on-ink-muted);min-width:2.2em}
.drawer nav a:hover{color:var(--brass)}
.drawer.open nav a{opacity:1;transform:none}
.drawer.open nav li:nth-child(1) a{transition-delay:.18s}
.drawer.open nav li:nth-child(2) a{transition-delay:.23s}
.drawer.open nav li:nth-child(3) a{transition-delay:.28s}
.drawer.open nav li:nth-child(4) a{transition-delay:.33s}
.drawer.open nav li:nth-child(5) a{transition-delay:.38s}
.drawer.open nav li:nth-child(6) a{transition-delay:.43s}
.drawer-foot{margin-top:auto;display:grid;gap:18px;border-top:1px solid var(--line-ink);padding-top:24px;font-size:15px;color:var(--on-ink-muted);opacity:0;transition:opacity .5s var(--ease) .1s}
.drawer.open .drawer-foot{opacity:1;transition-delay:.5s}
.drawer-foot a:not(.btn){text-decoration:none;color:var(--on-ink)}
.drawer-foot .btn-brass{color:var(--ink)}
.drawer:focus{outline:none}
@media (prefers-reduced-motion:reduce){.drawer,.scrim,.drawer nav a,.drawer-foot,.burger .bars,.burger .bars i{transition:none!important}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;letter-spacing:.02em;text-decoration:none;padding:15px 24px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s;font-family:var(--sans)}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-brass{background:var(--brass);color:var(--ink)}
.btn-brass:hover{background:#EAF3C4}
.btn-ghost{border-color:var(--line-ink);color:var(--on-ink)}
.btn-ghost:hover{border-color:var(--on-ink)}
.btn-ink{background:var(--ink);color:var(--on-ink)}
.btn-ink:hover{background:var(--brass-deep)}
.justify-start{justify-self:start}

/* ---------- Home hero ---------- */
.hero{background:var(--ink-2);color:var(--on-ink);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,72px);align-items:end;padding-block:var(--hero-pad) calc(var(--hero-pad) * .75)}
.hero .eyebrow{color:var(--brass);margin-bottom:22px;display:block}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(44px,7.4vw,104px);line-height:.98;letter-spacing:-.01em}
.hero h1 em{color:var(--brass)}
.hero .lede{margin-top:24px;max-width:34em;font-size:clamp(18px,1.6vw,21px);color:var(--on-ink-muted);line-height:1.55}
.hero .lede strong{color:var(--on-ink);font-weight:500}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.bridge-fig{margin:0;min-width:0}
.bridge-fig figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--on-ink-muted);margin-top:10px;text-transform:uppercase}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;align-items:start}.bridge-fig{max-width:520px}}

/* ---------- Clients strip ---------- */
.clients{border-bottom:1px solid var(--line);background:var(--surface)}
.clients .wrap{display:flex;align-items:center;gap:32px;padding-block:22px}
.clients .eyebrow{color:var(--muted);flex:none}
.marquee{overflow:hidden;flex:1;min-width:0;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee ul{display:flex;gap:56px;list-style:none;margin:0;padding:0;width:max-content;animation:slide 32s linear infinite}

.marquee li{font-family:var(--display);font-size:24px;white-space:nowrap}
.marquee li::after{content:"·";margin-left:56px;color:var(--brass-deep)}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee ul{animation:none;flex-wrap:wrap;width:auto;gap:12px 32px}.marquee li[aria-hidden]{display:none}.marquee{mask-image:none;-webkit-mask-image:none}}
@media (max-width:640px){.clients .wrap{flex-direction:column;align-items:flex-start;gap:12px}.marquee{width:100%}}

/* ---------- Sections ---------- */
.block{padding-block:var(--sec-pad)}
/* Per-section spacing: add one of these to a section's CSS Class in Divi */
.pad-tight{--sec-pad:clamp(28px,3.5vw,48px)}
.pad-top-0{padding-top:0!important}
.pad-bottom-0{padding-bottom:0!important}
.section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:24px 64px;align-items:end;margin-bottom:var(--head-gap)}
.section-head .eyebrow{color:var(--brass-deep);display:block;margin-bottom:16px}
.section-head h2{font-family:var(--display);font-weight:400;font-size:clamp(38px,5vw,64px);line-height:1.02}
.section-head p{color:var(--muted);font-size:18px;max-width:34em}
.section-head .head-aside{display:grid;gap:20px;justify-items:start}
@media (max-width:860px){.section-head{grid-template-columns:1fr}}

/* Practices / Industries switch (Cooley-style) */
.seg{display:inline-flex;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface);gap:4px}
.seg [role=tab]{all:unset;cursor:pointer;padding:10px 20px;border-radius:999px;font-weight:600;font-size:15px;transition:background .25s var(--ease),color .25s}
.seg [role=tab][aria-selected="true"]{background:var(--ink);color:var(--on-ink)}
.seg [role=tab]:focus-visible{outline:2px solid var(--brass-deep);outline-offset:2px}

/* Selector: list of tabs + detail panel */
.svc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);border-top:2px solid var(--text)}
.svc [role=tablist]{display:flex;flex-direction:column;border-right:1px solid var(--line)}
.svc [role=tab]{all:unset;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 24px 18px 0;border-bottom:1px solid var(--line);font-size:18px;font-weight:500;transition:color .2s,padding .3s var(--ease)}
.svc [role=tab] .arr{opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .3s var(--ease);color:var(--brass-deep)}
.svc [role=tab]:hover{color:var(--brass-deep)}
.svc [role=tab][aria-selected="true"]{padding-left:14px;box-shadow:inset 3px 0 0 var(--brass-deep)}
.svc [role=tab][aria-selected="true"] .arr{opacity:1;transform:none}
.svc [role=tab]:focus-visible{outline:2px solid var(--brass-deep);outline-offset:-2px}
.svc [role=tabpanel]{padding:24px 0 24px clamp(24px,4vw,56px);min-width:0}
.svc [role=tabpanel] h3{font-family:var(--display);font-weight:400;font-size:clamp(32px,3.6vw,46px);line-height:1.05}
.svc .tagline{margin-top:14px;font-size:20px;max-width:30em}
.svc .desc{margin-top:14px;color:var(--muted);max-width:38em}
.ticks{list-style:none;margin:20px 0 24px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.ticks li{padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--muted);display:flex;gap:10px}
.ticks li::before{content:"";flex:none;width:6px;height:6px;margin-top:.62em;background:var(--brass-deep);transform:rotate(45deg)}
.ticks.one{grid-template-columns:1fr}
.more{font-weight:600;text-decoration:none;color:var(--brass-deep);display:inline-flex;gap:8px}
.more:hover{text-decoration:underline;text-underline-offset:4px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 28px;padding:0;list-style:none}
.chips a{display:inline-block;text-decoration:none;font-size:14px;font-weight:500;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);transition:border-color .2s,background .2s}
.chips a:hover{border-color:var(--brass-deep);background:var(--tint)}
@media (max-width:860px){
  .svc{grid-template-columns:1fr}
  .svc [role=tablist]{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);scrollbar-width:none}
  .svc [role=tab]{flex:none;padding:16px 18px;border-bottom:0;font-size:16px;white-space:nowrap}
  .svc [role=tab][aria-selected="true"]{padding-left:18px;box-shadow:inset 0 -3px 0 var(--brass-deep)}
  .svc [role=tab] .arr{display:none}
  .svc [role=tabpanel]{padding-left:0}
  .ticks{grid-template-columns:1fr}
}

/* Approach */
.approach{background:var(--surface);border-block:1px solid var(--line)}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.pillar{padding:28px 32px 4px 0;border-top:1px solid var(--line);min-width:0}
.pillar + .pillar{padding-left:32px;border-left:1px solid var(--line)}
.pillar h3{font-family:var(--display);font-weight:400;font-size:30px;line-height:1.1;margin-bottom:16px}
.pillar p{color:var(--muted);font-size:16.5px}
.pillar .mark{display:block;width:28px;height:2px;background:var(--brass-deep);margin-bottom:18px}
@media (max-width:860px){.pillars{grid-template-columns:1fr}.pillar,.pillar + .pillar{padding:28px 0;border-left:0}}

/* Resources (Cooley "Latest insights" pattern) */
.resources{border-top:2px solid var(--text);list-style:none;margin:0;padding:0}
.resources li{border-bottom:1px solid var(--line)}
.resources a{display:grid;grid-template-columns:140px minmax(0,1fr) auto;gap:24px;align-items:baseline;padding:24px 0;text-decoration:none}
.resources a:hover h3{color:var(--brass-deep)}
.resources .kind{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.resources h3{font-family:var(--display);font-weight:400;font-size:28px;line-height:1.15;transition:color .2s}
.resources .when{font-size:14px;color:var(--muted);white-space:nowrap}
.preview-flag{display:inline-block;margin-bottom:24px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:var(--brass);color:var(--ink);padding:6px 10px}
@media (max-width:640px){.resources a{grid-template-columns:1fr;gap:6px}}

/* People */
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.people.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.person{display:flex;flex-direction:column;min-width:0}
.portrait{aspect-ratio:4/5;max-width:100%;background:var(--ink-2);color:var(--brass);display:grid;place-items:center;position:relative;overflow:hidden}
.portrait span{font-family:var(--display);font-size:clamp(64px,8vw,104px);line-height:1}
.portrait::after{content:"Photo";position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-muted)}
.person .role{margin-top:22px;color:var(--brass-deep)}
.person h3{font-family:var(--display);font-weight:400;font-size:34px;line-height:1.1;margin-top:6px}
.person p.bio{color:var(--muted);margin-top:10px;font-size:16px}
.person .dial{margin-top:auto;padding-top:18px;font-size:15px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);margin-block-start:20px}
.person .dial a{text-decoration:none;font-variant-numeric:tabular-nums}
.person .dial a.profile{font-weight:600;color:var(--brass-deep)}
@media (max-width:860px){.people,.people.two{grid-template-columns:1fr;max-width:460px}}

/* Testimonials */
.voices{background:var(--ink-2);color:var(--on-ink)}
.voices .section-head .eyebrow{color:var(--brass)}
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,6vw,80px)}
.quotes blockquote{margin:0;display:flex;flex-direction:column;gap:24px}
.quotes blockquote p{font-family:var(--display);font-size:clamp(26px,3vw,38px);line-height:1.18}
.quotes blockquote p::before{content:"\201C";color:var(--brass)}
.quotes blockquote p::after{content:"\201D";color:var(--brass)}
.quotes footer{font-size:15px;color:var(--on-ink-muted)}
.quotes footer b{color:var(--on-ink);font-weight:600;display:block}
@media (max-width:860px){.quotes{grid-template-columns:1fr}}

/* FAQ */
.faq{max-width:900px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:18px 0;font-size:20px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;position:relative}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:var(--text);transform:translate(-50%,-50%)}
.faq summary .pm::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .35s var(--ease)}
.faq details[open] summary .pm{border-color:var(--brass-deep)}
.faq details[open] summary .pm::after{transform:translate(-50%,-50%) rotate(0)}
.faq summary:hover{color:var(--brass-deep)}
.faq .ans{padding:0 56px 20px 0;color:var(--muted);max-width:44em}

/* Contact */
.contact{background:var(--surface);border-top:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(32px,6vw,80px)}
.contact h2{font-family:var(--display);font-weight:400;font-size:clamp(40px,5.4vw,72px);line-height:1}
.contact h2 em{color:var(--brass-deep)}
.contact .eyebrow{color:var(--brass-deep);display:block;margin-bottom:16px}
.contact .reach{margin-top:24px;display:grid;gap:4px;font-size:17px}
.contact .reach a{text-decoration:none;font-variant-numeric:tabular-nums}
.contact .reach address{font-style:normal;color:var(--muted);margin-top:12px}
form.engage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
form.engage .full{grid-column:1/-1}
form.engage label{display:grid;gap:8px;font-size:13px;font-weight:600;letter-spacing:.04em}
form.engage .opt{font-weight:400;color:var(--muted)}
form.engage input,form.engage textarea{font:inherit;font-size:16px;padding:14px 16px;border:1px solid var(--line);background:var(--paper);color:var(--text);border-radius:4px;width:100%;transition:border-color .2s,background .2s}
form.engage input:focus,form.engage textarea:focus{outline:none;border-color:var(--ink);background:var(--surface)}
form.engage textarea{min-height:140px;resize:vertical}
form.engage .note{font-size:13px;color:var(--muted);line-height:1.5}
form.engage .actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
form.engage .status{font-size:14px;color:var(--brass-deep);font-weight:600}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:520px){form.engage{grid-template-columns:1fr}}

/* ---------- Inner pages ---------- */
.page-hero{background:var(--ink-2);color:var(--on-ink)}
.page-hero .wrap{padding-block:calc(var(--hero-pad) * .85) var(--hero-pad)}
.crumbs ol{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--on-ink-muted)}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.6}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--on-ink)}
.page-hero .eyebrow{color:var(--brass);display:block;margin-bottom:20px}
.page-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(42px,6vw,84px);line-height:1;max-width:14em}
.page-hero .tag{font-family:var(--display);font-style:italic;font-size:clamp(24px,2.6vw,34px);color:var(--brass);margin-top:16px}
.page-hero .lede{margin-top:28px;max-width:38em;font-size:clamp(18px,1.6vw,20px);color:var(--on-ink-muted)}

.page-body{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:start}
.prose{display:grid;gap:16px;max-width:40em}
.prose p{font-size:18px}
.prose h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,3.4vw,42px);line-height:1.08;margin-top:16px}
.aside{display:grid;gap:20px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 108px)}
.aside-box{background:var(--surface);border:1px solid var(--line);padding:28px}
.aside-box h2{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--muted);margin-bottom:16px}
.aside-box .chips{margin:0}
.mini-people{display:grid;gap:16px;list-style:none;margin:0;padding:0}
.mini-people li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center}
.mini-people .av{width:52px;height:52px;border-radius:50%;background:var(--ink-2);color:var(--brass);display:grid;place-items:center;font-family:var(--display);font-size:22px}
.mini-people b{display:block;font-weight:600}
.mini-people span{font-size:14px;color:var(--muted)}
.mini-people a{text-decoration:none}
.mini-people a.av{transition:background .2s,color .2s}
.mini-people li:hover a.av,.mini-people a.av:hover{background:var(--brass);color:var(--ink)}
.mini-people b a{color:inherit;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;text-decoration-thickness:1px;transition:text-decoration-color .2s}
.mini-people b a:hover,.mini-people b a:focus-visible{text-decoration-color:currentColor}
.clients-note{font-size:15px;color:var(--muted)}
@media (max-width:900px){.page-body{grid-template-columns:1fr}.aside{position:static}}

.how{list-style:none;margin:8px 0 0;padding:0;border-top:2px solid var(--text)}
.how li{border-bottom:1px solid var(--line)}
.how a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;gap:24px;align-items:baseline;padding:22px 0;text-decoration:none}
.how b{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.15}
.how span{color:var(--muted)}
.how .arr{color:var(--brass-deep);transition:transform .25s var(--ease)}
.how a:hover b{color:var(--brass-deep)}
.how a:hover .arr{transform:translateX(4px)}
@media (max-width:700px){.how a{grid-template-columns:1fr;gap:4px}.how .arr{display:none}}

.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{display:flex;flex-direction:column;gap:12px;padding:24px 0 8px;border-top:2px solid var(--text);text-decoration:none;min-width:0}
.card h3{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.12;transition:color .2s}
.card p{color:var(--muted);font-size:15.5px}
.card .more{margin-top:auto}
.card:hover h3{color:var(--brass-deep)}
@media (max-width:1000px){.cards,.cards.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cards,.cards.three{grid-template-columns:1fr}}

.cta-band{background:var(--brass);color:var(--ink)}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px 48px;flex-wrap:wrap;padding-block:var(--band-pad)}
.cta-band h2{font-family:var(--display);font-weight:400;font-size:clamp(34px,4.4vw,56px);line-height:1.04;max-width:16em}
.cta-band p{margin-top:12px;max-width:36em;color:var(--ink)}
.cta-band .note{font-size:13px;margin-top:16px;opacity:.8}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:var(--on-ink-muted);font-size:15px}
.site-footer .wrap{padding-block:48px 28px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:40px}
.site-footer p.tag{margin-top:16px;max-width:22em}
.site-footer h2{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--on-ink);margin-bottom:16px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--on-ink)}
.site-footer address{font-style:normal}
.site-footer .foot-firm{display:inline-block;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink);margin-bottom:4px}
.legal{margin-top:40px;padding-top:24px;border-top:1px solid var(--line-ink);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}
.legal a{text-decoration:underline}
@media (max-width:900px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* ---------- Utilities ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.linklike{all:unset;cursor:pointer;text-decoration:underline;text-underline-offset:3px;font:inherit;color:inherit}
.linklike:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* ---------- Cookie consent ----------
   Non-blocking bar. "Reject all" and "Accept all" share one style so neither is favored. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:0 var(--gutter) calc(env(safe-area-inset-bottom,0px) + 16px);pointer-events:none}
.consent-inner{pointer-events:auto;max-width:var(--max);margin-inline:auto;background:var(--ink);color:var(--on-ink);border:1px solid var(--line-ink);box-shadow:0 18px 50px rgba(0,0,0,.3);padding:24px 28px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 40px;align-items:end;animation:consentIn .5s var(--ease)}
@keyframes consentIn{from{transform:translateY(16px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.consent-inner{animation:none}}
.consent h2{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.1;margin-bottom:8px}
.consent p{font-size:15px;color:var(--on-ink-muted);max-width:52em}
.consent a{color:var(--on-ink)}
.consent .gpc-note{margin-top:8px;color:var(--brass)}
.consent-prefs{grid-column:1/-1;border:0;margin:0;padding:8px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px;border-top:1px solid var(--line-ink)}
.pref{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;padding-top:12px;font-size:14px;color:var(--on-ink-muted);cursor:pointer}
.pref b{display:block;color:var(--on-ink);font-size:15px;font-weight:600}
.pref input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--brass)}
.pref input:disabled{opacity:.6}
.consent-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.consent-actions .linklike{font-size:14px;padding:8px 4px}
.btn-consent{background:var(--brass);color:var(--ink);padding:12px 20px;font-size:14px}
.btn-consent:hover{background:#EAF3C4}
.consent :focus-visible{outline-color:var(--brass)}
@media (max-width:760px){.consent-inner{grid-template-columns:1fr;padding:20px}.consent-actions{justify-content:flex-start}.consent-prefs{grid-template-columns:1fr}}
.site-footer .linklike:hover{color:var(--on-ink)}

/* ---------- Policy page ---------- */
.policy{max-width:46em;display:grid;gap:16px}
.policy h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,3vw,36px);line-height:1.1;margin-top:28px;scroll-margin-top:110px}
.policy h3{font-size:18px;font-weight:600;margin-top:8px}
.policy p,.policy li{color:var(--text)}
.policy ul{margin:0;padding-left:22px;display:grid;gap:8px}
.policy a,.policy .linklike{color:var(--brass-deep);font-weight:600}
.policy .updated{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--muted)}
.policy .notice{background:var(--tint);border-left:3px solid var(--brass-deep);padding:18px 22px}
.table-wrap{overflow-x:auto;border:1px solid var(--line);background:var(--surface)}
.policy table{border-collapse:collapse;width:100%;min-width:620px;font-size:15px}
.policy th,.policy td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--line)}
.policy thead th{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--muted);background:var(--paper)}
.policy tbody tr:last-child th,.policy tbody tr:last-child td{border-bottom:0}

/* Client strip links: pause the scroll while hovering or tabbing through */
.marquee:focus-within ul{animation-play-state:paused}
.marquee a{text-decoration:none;transition:color .2s}
.marquee a:hover,.marquee a:focus-visible{color:var(--brass-deep);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* Contact form honeypot (hidden from people, visible to spam bots) */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
/* Real headshots on the live site */
.portrait.has-photo{background:var(--tint)}
.portrait.has-photo::after{content:none}
.portrait.has-photo img{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block}

/* Generic pages (anything not designed by the theme) */
.generic-title{font-family:var(--display);font-weight:400;font-size:clamp(40px,5vw,64px);line-height:1.04;margin-bottom:12px}

/* ---------- Practices / Industries: stacked tap-to-expand list on phones ---------- */
.acc-btn{all:unset;display:block;font:inherit;color:inherit;pointer-events:none}
.acc-btn .pm{display:none}
@media (max-width:860px){
  .svc{display:block}
  .svc [role=tablist]{display:none}
  .svc [role=tabpanel],.svc [role=tabpanel][hidden]{display:block!important;padding:0;border-bottom:1px solid var(--line)}
  .svc [role=tabpanel] > :not(h3){display:none}
  .svc [role=tabpanel].acc-open > :not(h3){display:revert}
  .svc [role=tabpanel].acc-open > .ticks{display:grid}
  .svc [role=tabpanel].acc-open > .chips{display:flex}
  .svc [role=tabpanel].acc-open > .more{display:inline-flex;margin-bottom:22px}
  .svc [role=tabpanel] h3{font-size:24px}
  .acc-btn{pointer-events:auto;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;padding:18px 0}
  .acc-btn:focus-visible{outline:2px solid var(--brass-deep);outline-offset:2px}
  .acc-btn .pm{display:block;flex:none;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;position:relative}
  .acc-btn .pm::before,.acc-btn .pm::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:var(--text);transform:translate(-50%,-50%)}
  .acc-btn .pm::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s var(--ease)}
  .acc-open .acc-btn .pm{border-color:var(--brass-deep)}
  .acc-open .acc-btn .pm::after{transform:translate(-50%,-50%) rotate(0)}
  .svc .tagline{margin-top:0}
}

/* ---------- People pages ---------- */
.person-link{display:block;text-decoration:none}
.person-link:hover .portrait img{transform:scale(1.02)}
.portrait img{transition:transform .5s var(--ease)}
.person h3 a{text-decoration:none}
.person h3 a:hover{color:var(--brass-deep)}
.person-body .aside .portrait{max-width:340px}
.contact-lines{font-size:15px;line-height:1.8}
.contact-lines a{font-weight:600;text-decoration:none;color:var(--brass-deep)}
.docs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.doc{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;text-decoration:none;padding:10px;border:1px solid var(--line);background:var(--paper);transition:border-color .2s,background .2s}
.doc:hover{border-color:var(--brass-deep);background:var(--tint)}
.doc-ico{display:grid;place-items:center;width:44px;height:52px;background:var(--ink);color:var(--brass);font-family:var(--mono);font-size:11px;letter-spacing:.08em;clip-path:polygon(0 0,72% 0,100% 18%,100% 100%,0 100%)}
.doc span:last-child{font-weight:600;line-height:1.3}
.doc small{display:block;font-weight:400;font-size:13px;color:var(--muted)}
.doc.pending{cursor:default;opacity:.75}
.doc.pending:hover{border-color:var(--line);background:var(--paper)}

/* Contact form captcha */
.captcha{min-height:65px}
.captcha:empty{min-height:0}
.captcha-demo{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--paper);padding:14px 16px;font-size:14px;color:var(--muted);max-width:100%}
.captcha-demo .cb{width:22px;height:22px;border:2px solid var(--muted);border-radius:3px;flex:none}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px}
@media (max-width:560px){.cards.two{grid-template-columns:1fr}}
.person-body .aside .portrait{max-width:none}
/* The Practices / Industries list always fills its row and stays left-aligned */
.svc,.svc > div,.svc [role=tabpanel]{width:100%;text-align:left}
.acc-btn{text-align:left;justify-content:space-between}
.acc-btn span:first-child{flex:1;min-width:0;text-wrap:pretty}

/* Utility bar: contact links only — right-aligned on wider screens, centered on phones */
.utility .wrap{justify-content:flex-end}
@media (max-width:640px){
  .utility .wrap{justify-content:center}
  .utility ul{justify-content:center;gap:6px 16px;font-size:12px}
}

/* Switch never re-centers; bridge caption centered under the drawing */
.seg{display:flex;width:max-content;max-width:100%;margin-right:auto;margin-left:0}
.bridge-fig figcaption{text-align:center}
@media (max-width:860px){.bridge-fig{margin-inline:auto}}
/* Practices / Industries: fixed size so switching views or items never shifts the layout */
@media (min-width:861px){
  .svc{min-height:600px;align-items:start}
  .svc [role=tablist]{align-self:stretch}
}
/* Approach pillars: only the short accent mark, no full-width rule above */
.pillar{border-top:0!important}


/* ---------- Heading font: bolder sans across headings and the menu ---------- */
:is(.hero h1,.page-hero h1,.section-head h2,.contact h2,.cta-band h2,.cta-inner h2,.prose h2,.policy h2,.generic-title,
    .svc [role=tabpanel] h3,.pillar h3,.resources h3,.person h3,.card h3,.how b,.consent h2,.marquee li){
  font-family:var(--head);font-stretch:var(--head-stretch);font-weight:600;letter-spacing:var(--head-track)}
.hero h1{font-size:clamp(40px,6.2vw,88px);line-height:1.02}
.page-hero h1{font-size:clamp(38px,5.2vw,72px);line-height:1.04}
.section-head h2{font-size:clamp(32px,4.2vw,54px);line-height:1.06}
.contact h2{font-size:clamp(34px,4.6vw,60px);line-height:1.04}
:is(.cta-band h2,.cta-inner h2){font-size:clamp(28px,3.6vw,46px);line-height:1.08}
.prose h2{font-size:clamp(26px,2.8vw,34px)}
.svc [role=tabpanel] h3{font-size:clamp(26px,3vw,38px);line-height:1.1}
:is(.pillar h3,.person h3){font-size:26px;line-height:1.15}
:is(.card h3,.resources h3,.how b){font-size:22px;line-height:1.2}
.marquee li{font-size:20px;font-weight:500}
.page-hero .tag{font-family:var(--head);font-stretch:var(--head-stretch);font-style:normal;font-weight:500;font-size:clamp(20px,2vw,26px)}
/* testimonials: Instrument Serif (the serif companion to the heading face). Set firmly so Divi's text styles can't override it. */
.voices blockquote p,.voices blockquote p :is(em,i,strong,span),.quotes blockquote p,.quotes blockquote p :is(em,i,strong,span){font-family:var(--serif)!important;font-weight:400!important;letter-spacing:0}
.voices blockquote p,.quotes blockquote p{font-size:clamp(28px,3.3vw,42px)!important;line-height:1.14!important}
:is(.portrait span,.mini-people .av){font-family:var(--head);font-stretch:var(--head-stretch);font-weight:600}
.drawer nav a{font-family:var(--head);font-stretch:var(--head-stretch);font-weight:600;letter-spacing:var(--menu-track);font-size:clamp(24px,4.6vw,32px);line-height:1.25;padding-block:6px}
.hero h1 em{font-style:normal}

/* Drawer: link back to the home page, above the menu */
.drawer-home{align-self:flex-start;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-muted);text-decoration:none;
  opacity:0;transition:opacity .4s var(--ease) .1s,color .2s;margin-bottom:-12px}
.drawer.open .drawer-home{opacity:1;transition-delay:.15s}
.drawer-home:hover{color:var(--brass)}


/* Hero headline: 10% smaller */
.hero h1{font-size:clamp(36px,5.6vw,79px)}

/* Client strip: click to pause or play; names open a pop-up */
.marquee{position:relative;cursor:pointer}
.marquee.paused ul,.marquee:focus-within ul{animation-play-state:paused}
.marquee a{cursor:pointer}
.marquee-toggle{position:absolute;inset:0;opacity:0;pointer-events:none;border:0;background:none}
.marquee-toggle:focus-visible{opacity:1;outline:2px solid var(--brass-deep);outline-offset:2px}
/* swipe: script drives the strip (CSS animation stays as the no-script fallback) */
.marquee.js-drive ul{animation:none;will-change:transform}
.marquee{touch-action:pan-y;-webkit-user-select:none;user-select:none}
.marquee.dragging,.marquee.dragging a{cursor:grabbing}
/* dock: room above and below for names to swell without being clipped */
.marquee.dock{padding-block:16px;margin-block:-16px}
.marquee.dock li{transform-origin:50% 70%;will-change:transform}

.client-pop{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:var(--gutter)}
.client-pop-scrim{position:absolute;inset:0;background:rgba(6,18,20,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .25s var(--ease)}
.client-pop-card{position:relative;width:min(520px,100%);max-height:calc(100vh - 2 * var(--gutter));overflow:auto;background:var(--surface);color:var(--text);
  padding:36px 32px 30px;box-shadow:0 30px 80px rgba(0,0,0,.35);display:grid;gap:14px;
  opacity:0;transform:translateY(14px) scale(.98);transition:opacity .25s var(--ease),transform .3s var(--ease)}
.client-pop.open .client-pop-scrim{opacity:1}
.client-pop.open .client-pop-card{opacity:1;transform:none}
.client-pop-card:focus{outline:none}
.client-pop-card .eyebrow{color:var(--brass-deep)}
.client-pop-card h2{font-family:var(--head);font-stretch:var(--head-stretch);font-weight:600;letter-spacing:var(--head-track);font-size:clamp(28px,4vw,38px);line-height:1.08;padding-right:40px}
.client-pop-card blockquote{margin:6px 0 0;padding:0 0 0 18px;border-left:2px solid var(--brass-deep)}
.client-pop-card blockquote p{font-family:var(--serif);font-size:21px;line-height:1.35}
.client-pop-card blockquote footer{margin-top:10px;font-size:14px;color:var(--muted)}
.client-pop-actions{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:10px}
.client-pop-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border:0;border-radius:50%;background:transparent;cursor:pointer}
.client-pop-x:hover{background:var(--tint)}
.client-pop-x span,.client-pop-x span::after{position:absolute;left:11px;top:19px;width:18px;height:2px;background:var(--text);transform:rotate(45deg)}
.client-pop-x span::after{content:"";left:0;top:0;transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){.client-pop-card,.client-pop-scrim{transition:none}}

/* 3D bridge canvas (home hero) */
.bridge-fig canvas{display:block;width:100%;height:auto;aspect-ratio:14/10;max-width:100%}
@media (hover:hover) and (pointer:fine){.bridge-fig canvas{cursor:crosshair}}
/* Wireframe "Craft" behind the menu links */
.drawer-wire{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.drawer > :not(.drawer-wire){position:relative;z-index:1}

/* Hero: give the 3D bridge more room */
.hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}}

/* Photo avatars in the attorney boxes */
img.av{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:center 22%;display:block;background:var(--tint)}
.portrait.has-photo img{object-position:center 20%}
/* People cards: phone and "Meet" line aligned along the bottom of every card */
.person p.bio{margin-bottom:20px}
.person .dial{margin-top:auto!important;margin-block-start:auto!important}
/* header logo: letters spin in on load (craft.js). Hidden until the script takes over, shown anyway after 3s. */
.site-header .logo{position:relative}
.logo-slices{position:absolute;pointer-events:none;visibility:hidden}
.logo-slices span{position:absolute;top:0;height:100%;background-repeat:no-repeat;transform-origin:50% 50%;will-change:transform,opacity}
.site-header .logo .wordmark-fallback{white-space:pre}
.logo-ch{display:inline-block;transform-origin:50% 50%}
.logo-anim .site-header .logo>img,.logo-anim .site-header .logo>.wordmark-fallback{opacity:0;animation:logo-safety 0s 3s forwards}
@keyframes logo-safety{to{opacity:1}}

/* ---------- Client portal ---------- */
.drawer-portal{align-self:flex-start;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-muted);text-decoration:none;
  opacity:0;transition:opacity .4s var(--ease) .1s,color .2s;margin-top:-12px}
.drawer.open .drawer-portal{opacity:1;transition-delay:.2s}
.drawer-portal:hover{color:var(--brass)}
.portal{display:grid;gap:40px}
.portal-signin{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:28px 0 4px;border-top:3px solid var(--text)}
.portal-signin h3{font-family:var(--head);font-weight:600;font-size:clamp(28px,3vw,40px);line-height:1.1;margin:10px 0 8px}
.portal-signin p{color:var(--muted);margin:0;max-width:52ch}
.portal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 48px}
@media (max-width:760px){.portal-grid{grid-template-columns:1fr}}
.portal-card{display:flex;flex-direction:column;gap:12px;padding-top:24px;border-top:2px solid var(--text);min-width:0;scroll-margin-top:120px}
.portal-card .eyebrow{color:var(--muted)}
.portal-card h3{font-family:var(--head);font-weight:600;font-size:clamp(24px,2.4vw,30px);line-height:1.15;margin:0}
.portal-card p{color:var(--muted);margin:0;max-width:56ch}
.portal-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.portal-btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;text-decoration:none;color:var(--on-ink);background:var(--ink);
  padding:12px 20px;border-radius:999px;transition:background .2s,color .2s}
.portal-btn:hover,.portal-btn:focus-visible{background:var(--brass);color:var(--ink)}
.portal-signin .portal-btn{background:var(--brass);color:var(--ink)}
.portal-signin .portal-btn:hover{background:var(--ink);color:var(--on-ink)}
.portal-soon{font-size:14px;color:var(--muted);padding:12px 0}
.portal-via{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.portal-via::before{content:"";width:10px;height:12px;flex:none;opacity:.7;
  background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2 5V3.5a3 3 0 0 1 6 0V5h1v7H1V5h1zm1.2 0h3.6V3.5a1.8 1.8 0 0 0-3.6 0V5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2 5V3.5a3 3 0 0 1 6 0V5h1v7H1V5h1zm1.2 0h3.6V3.5a1.8 1.8 0 0 0-3.6 0V5z'/%3E%3C/svg%3E") center/contain no-repeat}
.portal-card.pending .portal-actions{opacity:.8}
.portal-note{color:var(--muted);font-size:15px;max-width:66ch;margin:0}
.portal-note a{color:var(--text)}

/* portal passkey gate */
.portal-gate{display:grid;gap:14px;max-width:620px;padding-top:28px;border-top:3px solid var(--text)}
.portal-gate h2{font-family:var(--head);font-weight:600;font-size:clamp(26px,2.8vw,34px);line-height:1.1;margin:0}
.portal-gate p{margin:0;color:var(--muted)}
.portal-gate-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.portal-gate input{flex:1 1 220px;min-width:0;font:inherit;font-size:17px;padding:12px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text)}
.portal-gate input:focus{outline:none;border-color:var(--ink)}
.portal-gate button{border:0;cursor:pointer;font-family:var(--sans)}
.portal-gate button:disabled{opacity:.6;cursor:progress}
.portal-gate-error{color:#9b2c2c!important;font-weight:500}
.portal-gate-hint{font-size:15px}
.portal-gate-hint a{color:var(--text)}
.portal-dox{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:28px 32px;background:var(--ink);color:var(--on-ink);border-radius:4px}
.portal-dox .eyebrow{color:var(--brass)}
.portal-dox h3{font-family:var(--head);font-weight:600;font-size:clamp(28px,3vw,40px);line-height:1.1;margin:10px 0 8px}
.portal-dox h3.dox-mark{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:14px 0 16px}
.dox-mark>img{height:clamp(52px,6vw,76px);width:auto;display:block;margin-left:-4px}
.dox-by{display:flex;align-items:center;gap:8px;font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-muted)}
.dox-by img{height:13px;width:auto;display:block;filter:invert(1);opacity:.85}
.portal-dox p{color:var(--on-ink-muted);margin:0;max-width:56ch}
.portal-dox .portal-btn{background:var(--brass);color:var(--ink)}
.portal-dox .portal-btn:hover{background:var(--on-ink);color:var(--ink)}
.portal-dox .portal-soon{color:var(--on-ink-muted)}

/* 45-degree arrow (inline SVG, so it never turns into an emoji on phones) */
.arr45{display:inline-block;width:.8em;height:.8em;flex:none;vertical-align:.02em;margin-left:.15em;overflow:visible}
.utility .portal-link{display:inline-flex;align-items:center;gap:.1em}
.foot-portal{display:inline-flex;align-items:center;gap:.1em;margin-top:18px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-muted);text-decoration:none}
.foot-portal:hover,.foot-portal:focus-visible{color:var(--brass)}
.portal-btn .arr45,.btn .arr45{margin-left:0}