@charset "utf-8";
/* Locally hosted Playfair Display supplied by the site owner. */
@font-face {
  font-family:"Playfair Display";
  src:url("../fonts/playfair-display-variable.ttf") format("truetype");
  font-style:normal;font-weight:400 900;font-display:swap;
}
@font-face {
  font-family:"Playfair Display";
  src:url("../fonts/playfair-display-italic-variable.ttf") format("truetype");
  font-style:italic;font-weight:400 900;font-display:swap;
}

/* ============================================================================
   DINAH RAINEY LAW — design system
   Editorial-modern. Light-dominant (~70/30). Red is punctuation, never surface.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* colour */
  --ink:#0B0B0B;
  --ink-80:rgba(11,11,11,.80);
  --ink-60:rgba(11,11,11,.60);
  --white:#FFFFFF;
  --paper:#F7F5F2;
  --paper-deep:#EFECE7;
  --silver:#A7A9AC;
  --silver-light:#D9DADC;
  --silver-hair:#E4E2DF;
  --red:#B6302B;
  --red-deep:#B6302B;
  --stone:#6B6863;
  --edge:#8A8783;      /* 3.58:1 on white — interactive boundaries */

  /* on dark */
  --on-ink:#F4F2EF;
  --on-ink-dim:#A9A5A0;
  --hair-dark:rgba(255,255,255,.16);

  /* type */
  --display:"Playfair Display",Georgia,serif;
  --sans:"Playfair Display",Georgia,serif;

  --fs-eyebrow:.6875rem;
  --fs-small:.875rem;
  --fs-body:1.125rem;
  --fs-lead:clamp(1.1875rem,.9rem + .8vw,1.4375rem);
  --fs-h4:clamp(1.125rem,1rem + .35vw,1.3125rem);
  --fs-h3:clamp(1.375rem,1.1rem + 1.1vw,2.0625rem);
  --fs-h2:clamp(1.875rem,1.2rem + 2.6vw,3.125rem);
  --fs-h1:clamp(2.6rem,6.1vw,5.6rem);
  --fs-quote:clamp(1.4rem,1rem + 1.9vw,2.375rem);

  /* spacing — 8px scale */
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --s6:48px; --s7:64px; --s8:80px; --s9:104px; --s10:136px;
  --gutter:clamp(20px,4vw,64px);
  --maxw:1320px;
  --measure:68ch;

  /* motion */
  --ease-spring:cubic-bezier(.22,1.12,.36,1);
  --ease-out:cubic-bezier(.2,.7,.25,1);
  --ease-reveal:cubic-bezier(.22,1,.36,1);
  --t-fast:150ms; --t-mid:220ms; --t-slow:520ms;

  --header-h:84px;

  /* contextual (re-pointed inside dark panels) */
  --c-text:var(--ink);
  --c-soft:var(--ink-80);
  --c-mute:var(--stone);
  --c-hair:var(--silver-hair);
  --c-line:var(--silver-light);
}

/* any dark surface — section, price panel, CTA band, footer, credibility bar */
.sec--ink,.pricepanel,.ctaband,.site-footer,.cred{
  --c-text:var(--on-ink);
  --c-soft:var(--on-ink-dim);
  --c-mute:var(--on-ink-dim);
  --c-hair:var(--hair-dark);
  --c-line:rgba(255,255,255,.32);
}
.pricepanel--light{
  --c-text:var(--ink);
  --c-soft:var(--ink-80);
  --c-mute:var(--stone);
  --c-hair:var(--silver-hair);
  --c-line:var(--silver-light);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-body);line-height:1.6;
  font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
@supports not (overflow-x:clip){
  body{overflow-x:hidden}
  .sec:not(.hero),.cred,.site-footer{overflow-x:hidden}
  .hero .reg-ghost{display:none}
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--red);color:#fff}

/* skip link */
/* heading kept for document outline, not for the eye */
.skip-h{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;
  padding:12px 20px;font-size:var(--fs-small);letter-spacing:.06em}
.skip:focus{left:8px;top:8px}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:1px}
.sec--ink :focus-visible,.pricepanel:not(.pricepanel--light) :focus-visible,.ctaband :focus-visible,
.site-footer :focus-visible,.cred :focus-visible{outline-color:#fff}

/* --------------------------------------------------------------- 2. TYPE */
h1,h2,h3,h4{
  font-family:var(--display);font-weight:400;margin:0;
  
  letter-spacing:-.004em;line-height:1.08;
  font-synthesis-weight:none;
}
h1{font-size:var(--fs-h1);line-height:1.06;letter-spacing:-.008em}
h1,h2,h3,.tquote,.pull{text-wrap:balance}
h2{font-size:var(--fs-h2);line-height:1.1}
h3{font-size:var(--fs-h3);line-height:1.16}
h4{font-size:var(--fs-h4);line-height:1.25;letter-spacing:0}
p{margin:0 0 1.1em}
/* size utilities: keep the visual scale while the tag stays semantic */
.h-sm{font-size:var(--fs-h4);line-height:1.2;letter-spacing:-.01em}
.h-md{font-size:var(--fs-h3);line-height:1.12}
h1 em,h2 em,h3 em{font-style:italic;}

.eyebrow{
  font-family:var(--sans);font-size:var(--fs-eyebrow);font-weight:600;
  text-transform:uppercase;letter-spacing:.28em;color:var(--c-mute);
  margin:0 0 var(--s3);display:block;line-height:1.4;
}
.eyebrow--red{color:var(--red)}
.num{
  font-family:var(--sans);font-size:var(--fs-eyebrow);font-weight:600;
  text-transform:uppercase;letter-spacing:.28em;color:var(--c-mute);
}
.lead{font-size:var(--fs-lead);line-height:1.45;color:var(--c-soft);max-width:34ch}
.prose{max-width:var(--measure)}
.prose h2,.prose h3{margin-bottom:var(--s2)}
.prose h3+p{margin-top:0}
.prose p{color:var(--c-soft)}
.muted{color:var(--c-mute);font-size:var(--fs-small);line-height:1.55}
.tight{max-width:52ch}

/* pull line — the witty one-liners from Dinah's copy */
.pull{
  font-family:var(--display);font-size:var(--fs-h3);line-height:1.28;
  letter-spacing:-.002em;
  margin:var(--s4) 0;padding-left:var(--s3);
  border-left:2px solid var(--red);
}


/* ------------------------------------------- 3. SIGNATURE: tapered red rule */
/* The logo's red line, reused as the brand underline. */
.mark{
  font-style:italic;position:relative;display:inline-block;
  
}
.mark::after{
  content:"";position:absolute;left:-.04em;right:-.04em;bottom:-.06em;height:.1em;
  min-height:4px;
  background:no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4C38 .6 162 .6 200 4c-38 3.4-162 3.4-200 0z' fill='%23B6302B'/%3E%3C/svg%3E");
  transform:scaleX(1);transform-origin:left center;
  transition:transform 720ms var(--ease-out) 260ms;
}
.js .reveal:not(.is-in) .mark::after{transform:scaleX(0)}

/* standalone tapered divider */
.rule-red{
  display:block;width:120px;height:6px;border:0;margin:0 0 var(--s4);
  background:no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4C38 .6 162 .6 200 4c-38 3.4-162 3.4-200 0z' fill='%23B6302B'/%3E%3C/svg%3E");
}
.hair{border:0;border-top:1px solid var(--c-hair);margin:0}

/* oversized outlined ® */
.reg-ghost{
  font-family:var(--display);
  color:transparent;-webkit-text-stroke:1.5px var(--silver-light);
  line-height:1;user-select:none;pointer-events:none;position:absolute;
  font-size:clamp(280px,42vw,620px);
}
.sec--ink .reg-ghost,.pricepanel:not(.pricepanel--light) .reg-ghost,.ctaband .reg-ghost{-webkit-text-stroke-color:rgba(255,255,255,.16)}

/* ™ → ® device */
.tm-arrow{display:inline-flex;align-items:baseline;gap:.5em;font-family:var(--display);
  letter-spacing:-.01em}
.tm-arrow i{font-style:normal;color:var(--silver);font-family:var(--sans);font-size:.7em}
.tm-arrow b{font-weight:400;color:var(--red)}

/* ------------------------------------------------------------ 4. LAYOUT */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{max-width:1560px}
.sec{padding-block:clamp(56px,8vw,var(--s10));position:relative;overflow-x:clip}
.sec--tight{padding-block:clamp(40px,5vw,var(--s8))}
.sec--paper{background:var(--paper)}
.sec--ink{background:var(--ink);color:var(--on-ink)}
.sec--ink h1,.sec--ink h2,.sec--ink h3,.sec--ink h4,
.pricepanel:not(.pricepanel--light) h2,.pricepanel:not(.pricepanel--light) h3,
.pricepanel:not(.pricepanel--light) h4,
.ctaband h2,.ctaband h3{color:var(--c-text)}
.grid{display:grid;gap:var(--gutter)}
.g12{grid-template-columns:repeat(12,1fr)}

/* ------------------------------------------------------------ 5. BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-size:.9375rem;font-weight:600;letter-spacing:.02em;
  padding:16px 28px;min-height:52px;border:1px solid transparent;border-radius:2px;
  text-decoration:none;cursor:pointer;text-align:center;
  transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),
             border-color var(--t-fast) var(--ease-out),transform var(--t-mid) var(--ease-spring),
             box-shadow var(--t-mid) var(--ease-spring);
}
.btn:active{transform:translateY(0);transition-duration:60ms}
.btn--primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn--primary:hover{background:var(--red-deep);border-color:var(--red-deep);
  box-shadow:0 8px 22px -10px rgba(182,48,43,.75)}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:#fff}
.btn--light{background:transparent;color:var(--on-ink);border-color:rgba(255,255,255,.45)}
.btn--light:hover{background:var(--on-ink);color:var(--ink);border-color:var(--on-ink)}
.btn--solid-light{background:var(--on-ink);color:var(--ink);border-color:var(--on-ink)}
.btn--solid-light:hover{background:#fff;border-color:#fff}
.btn--sm{padding:11px 18px;min-height:44px;font-size:.8125rem}
.btn--wide{width:100%}
.btn .lock{width:13px;height:13px;flex:none}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}

/* text link with tapered red underline on hover */
.tlink{
  display:inline-block;text-decoration:none;font-weight:600;font-size:.9375rem;
  letter-spacing:.02em;padding-bottom:6px;position:relative;
}
.tlink::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4C38 .6 162 .6 200 4c-38 3.4-162 3.4-200 0z' fill='%23B6302B'/%3E%3C/svg%3E");
  transform:scaleX(.24);transform-origin:left center;
  transition:transform var(--t-mid) var(--ease-spring);
}
.tlink:focus-visible::after{transform:scaleX(1)}
.tlink .arw{display:inline-block;transition:transform var(--t-mid) var(--ease-spring)}

/* ------------------------------------------------------------- 6. HEADER */
.site-header{
  position:sticky;top:0;z-index:80;background:var(--white);
  border-bottom:1px solid var(--silver-hair);
  transition:box-shadow var(--t-mid) var(--ease-out),background var(--t-mid) var(--ease-out);
}
.site-header.is-stuck{box-shadow:0 1px 24px -12px rgba(11,11,11,.45)}
.hdr{display:flex;align-items:center;gap:var(--s4);
  height:var(--header-h)}
.site-header.is-stuck .hdr{height:var(--header-h)}
.brand{display:block;flex:none;line-height:0}
.brand img{height:36px;width:auto;transform-origin:left center;transition:transform var(--t-mid) var(--ease-out)}
.site-header.is-stuck .brand img{transform:scale(.82)}
.nav{display:flex;align-items:center;gap:clamp(14px,1.6vw,26px);margin-left:auto}
.nav a{
  position:relative;text-decoration:none;font-size:.875rem;font-weight:500;
  letter-spacing:.015em;white-space:nowrap;padding:6px 0;color:var(--ink);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:5px;
  background:no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4C38 .6 162 .6 200 4c-38 3.4-162 3.4-200 0z' fill='%23B6302B'/%3E%3C/svg%3E");
  transform:scaleX(0);transform-origin:center;
  transition:transform var(--t-mid) var(--ease-spring);
}
.nav a:focus-visible::after{transform:scaleX(.7)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr-cta{display:flex;align-items:center;gap:10px;flex:none}
.burger{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:26px;height:1.5px;background:var(--ink);margin:6px 0;
  transition:transform var(--t-mid) var(--ease-spring),opacity var(--t-fast)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* mobile full-screen menu */
.mobile-menu{
  position:fixed;inset:0;z-index:90;background:var(--white);
  padding:calc(var(--header-h) + 16px) var(--gutter) calc(env(safe-area-inset-bottom) + 28px);
  display:flex;flex-direction:column;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  /* visibility flips instantly when opening (so focus can land inside) and is
     held back until the fade finishes when closing */
  transition:opacity var(--t-mid) var(--ease-out),transform var(--t-mid) var(--ease-out),
             visibility 0s linear var(--t-mid);
}
.mobile-menu.is-open{
  opacity:1;visibility:visible;transform:none;
  transition:opacity var(--t-mid) var(--ease-out),transform var(--t-mid) var(--ease-out),
             visibility 0s linear 0s;
}
.mobile-menu a.mlink{
  font-family:var(--display);
  font-size:2rem;text-decoration:none;padding:14px 0;border-bottom:1px solid var(--silver-hair);
  display:block;letter-spacing:-.02em;
}
.mobile-menu a.mlink[aria-current="page"]{color:var(--red)}
.mobile-menu .btn-row{margin-top:var(--s5);flex-direction:column;align-items:stretch}
.mobile-menu .m-meta{margin-top:auto;padding-top:var(--s5);color:var(--stone);font-size:var(--fs-small)}
.mobile-menu .m-meta a{text-decoration:none}

/* mobile sticky bottom CTA */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:var(--ink);padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  transform:translateY(105%);transition:transform 320ms var(--ease-spring);
}
.sticky-cta.is-on{transform:none}
.sticky-cta .btn{width:100%}

/* --------------------------------------------------------------- 7. HERO */
.hero{position:relative;background:var(--white);z-index:2;overflow-x:clip;
  padding-top:clamp(40px,5vw,72px);padding-bottom:0}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--gutter);align-items:end;min-height:min(72vh,680px)}
.hero__copy{padding-bottom:clamp(48px,7vw,116px);padding-top:clamp(24px,4vw,56px);
  position:relative;z-index:2;align-self:center}
.hero h1{margin:0 0 var(--s4)}
.hero .lead{max-width:44ch;margin-bottom:var(--s5)}
.hero__fig{position:relative;justify-self:center;align-self:end;z-index:2;max-width:100%}

/* framed portrait — a photograph on the page, not a silhouette floating on it */
.portrait-frame{
  background:var(--white);padding:14px 14px 0;
  box-shadow:0 30px 60px -28px rgba(11,11,11,.42),0 0 0 1px var(--silver-hair);
  width:min(420px,100%);
}
.portrait-frame picture{display:block;overflow:hidden}
.portrait-frame img{display:block;width:100%;height:clamp(340px,46vh,470px);object-fit:cover;
  object-position:50% 18%}
.portrait-frame figcaption{
  display:flex;flex-direction:column;gap:3px;padding:14px 2px 16px;
}
.portrait-frame figcaption strong{
  font-family:var(--display);font-weight:400;
  font-size:1.25rem;letter-spacing:.01em;color:var(--ink);
}
.portrait-frame figcaption span{
  font-size:.625rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--c-mute);
}
.hero__reg{
  position:absolute;right:4%;bottom:12%;z-index:1;
  font-size:clamp(260px,26vw,440px);-webkit-text-stroke-width:2px;
}
.hero__paper{position:absolute;right:0;top:0;bottom:0;width:44%;background:var(--paper);z-index:0}
/* portrait crosses into the dark credibility band */
.hero--overlap .hero__fig{margin-bottom:-44px}
.cred{background:var(--ink);color:var(--c-text);position:relative;z-index:1;overflow-x:clip}
.cred--hero{padding-right:clamp(0px,30%,420px)}
.cred__inner{padding-block:22px;font-size:.75rem;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;color:var(--on-ink-dim)}
/* deliberate 3 + 2 grid rather than an inline row that wraps by accident */
.cred__inner ul{list-style:none;margin:0;padding:0;display:grid;gap:10px clamp(20px,3vw,44px);
  grid-template-columns:repeat(3,max-content)}

/* ticker: one continuous line instead of a wrapped grid, once JS has built it */
/* overflow:hidden clips at the padding edge, so the track would run under the
   portrait — the mask fades it out before it gets there instead */
.cred__inner.is-ticker{overflow:hidden;padding-right:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 54%,transparent 72%);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 54%,transparent 72%)}
@media (max-width:1024px){
  .cred__inner.is-ticker{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 90%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 90%,transparent)}
}

.cred__inner.is-ticker ul{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.ticker-track{display:flex;width:max-content;animation:ticker 42s linear infinite}
.cred__inner:hover .ticker-track,.cred__inner:focus-within .ticker-track{animation-play-state:paused}
.ticker-track.is-paused{animation-play-state:paused}
.ticker-group{display:flex;align-items:center;gap:clamp(28px,4vw,56px);
  padding-right:clamp(28px,4vw,56px);flex-shrink:0}
.ticker-group span{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.ticker-group span::before{content:"";width:4px;height:4px;border-radius:50%;
  background:var(--red);flex:none;transform:translateY(-3px)}
@keyframes ticker{to{transform:translateX(-50%)}}
.cred__inner li{display:flex;align-items:baseline;gap:10px;line-height:1.3}
.cred__inner li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--red);
  flex:none;transform:translateY(-3px)}

/* ---------------------------------------------------------- 8. EDITORIAL */
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,88px);
  align-items:start}
.split--rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.split--even{grid-template-columns:repeat(2,minmax(0,1fr))}
.stack>*+*{margin-top:var(--s3)}

.figure{position:relative;margin:0}
.figure img{width:100%}
/* framed photography lifts very slightly under the cursor; cut-outs never do */
.figure picture,.gallery picture,.card .card__img{display:block;overflow:hidden}
.figure:not(.figure--cutout) picture img,
.gallery picture img,
.card .card__img{transition:transform .6s var(--ease-out)}
.figure:not(.figure--cutout):hover picture img,
.figure figcaption{margin-top:12px;font-size:var(--fs-small);color:var(--c-mute);letter-spacing:.01em}
.figure--edge{margin-left:calc(var(--gutter) * -1)}
.service-inline-image{margin:var(--s5) 0 0;overflow:hidden}
.service-inline-image picture{display:block;overflow:hidden}
.service-inline-image img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s var(--ease-out)}
.service-inline-image:hover img{transform:scale(1.025)}
.short-version-media{margin:var(--s5) 0 0;overflow:hidden}
.short-version-media img{display:block;width:100%;object-fit:cover;box-shadow:0 22px 46px -30px rgba(11,11,11,.48);transition:transform .7s var(--ease-out),box-shadow .7s var(--ease-out)}
.short-version-media:hover img{transform:scale(1.018);box-shadow:0 28px 52px -30px rgba(11,11,11,.44)}
.short-version-media--mother{max-width:460px}
.short-version-media--mother img{aspect-ratio:4/5;object-position:center;border-radius:2px 42% 2px 2px}
.short-version-media--brand{max-width:460px;margin-top:var(--s6)}
.short-version-media--brand img{aspect-ratio:4/5;object-position:center;border-radius:0}
.short-version-media--ventures{max-width:520px;margin-left:auto;margin-bottom:var(--s4)}
.short-version-media--ventures img{aspect-ratio:16/10;object-position:center;border-radius:42% 2px 2px 2px}
.office-action-visuals{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2.4vw,28px);align-items:start;margin-top:var(--s5);max-width:480px}
.office-action-visual{margin:0;overflow:hidden;box-shadow:0 22px 46px -30px rgba(11,11,11,.46)}
.office-action-visual img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out),filter .7s var(--ease-out)}
.office-action-visual:hover img{transform:scale(1.025);filter:saturate(1.04)}
.office-action-visual--letter,.office-action-visual--review{aspect-ratio:1/1}
.office-action-visual--letter{border-radius:2px 22% 2px 2px}
.office-action-visual--review{border-radius:22% 2px 2px 2px}
.option-guide-media{margin:var(--s5) 0 0;max-width:520px;aspect-ratio:1/1;overflow:hidden;box-shadow:0 22px 46px -30px rgba(11,11,11,.46)}
.option-guide-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out),filter .7s var(--ease-out)}
.option-guide-media:hover img{transform:scale(1.02);filter:saturate(1.04)}
.faq-guide-media{margin:var(--s6) 0 0;max-width:520px;aspect-ratio:1/1;overflow:hidden;box-shadow:0 22px 46px -30px rgba(11,11,11,.46)}
.faq-guide-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out),filter .7s var(--ease-out)}
.faq-guide-media:hover img{transform:scale(1.02);filter:saturate(1.04)}
.search-visual{margin:var(--s6) 0 0;width:min(100%,420px);max-width:420px;overflow:hidden;box-shadow:0 22px 46px -30px rgba(11,11,11,.46)}
.search-visual img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform .7s var(--ease-out),filter .7s var(--ease-out)}
.search-visual:hover img{transform:scale(1.02);filter:saturate(1.04)}
.bigger-issue-visual{margin:var(--s5) 0 0;max-width:520px;overflow:hidden;box-shadow:0 22px 46px -30px rgba(11,11,11,.46)}
.bigger-issue-visual img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .7s var(--ease-out),filter .7s var(--ease-out)}
.bigger-issue-visual:hover img{transform:scale(1.02);filter:saturate(1.04)}
.inset{position:absolute;width:44%;right:-8%;bottom:-8%;border:6px solid var(--white);
  box-shadow:0 24px 50px -24px rgba(11,11,11,.4)}
.sec--ink .inset,.pricepanel .inset{border-color:var(--ink)}

/* numbered editorial item — replaces "three identical cards" */
.enum{list-style:none;margin:0;padding:0}
.enum>li{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,7fr);
  gap:clamp(16px,3vw,48px);padding-block:var(--s5);border-top:1px solid var(--c-hair)}
.enum>li:last-child{border-bottom:1px solid var(--c-hair)}
.enum h3{margin-bottom:12px}
.enum p{color:var(--c-soft);margin-bottom:0}
.enum p+p{margin-top:.9em}

/* --------------------------------------------------------- 9. PRICE PANELS */
.pricepanel{background:var(--ink);color:var(--c-text);padding:clamp(28px,4vw,56px);
  position:relative;overflow:hidden}
.pricepanel .reg-ghost{right:-22%;bottom:-34%;font-size:clamp(220px,20vw,330px)}
.pricepanel>*{position:relative;z-index:1}
.price{font-family:var(--display);
  font-size:clamp(2.5rem,5.4vw,3.875rem);line-height:1.04;letter-spacing:-.01em;display:block}
.price small{font-family:var(--sans);font-size:.6875rem;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;display:block;margin-bottom:14px;color:var(--on-ink-dim)}
.pricepanel--light{background:var(--white);color:var(--ink);border:1px solid var(--silver-light)}
.pricepanel--light .price small{color:var(--stone)}

.checks{list-style:none;margin:var(--s4) 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px var(--s4)}
.checks li{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;
  font-size:.9375rem;line-height:1.45}
.checks li::before{
  content:"";width:18px;height:18px;margin-top:3px;flex:none;
  background:var(--red);
  -webkit-mask:no-repeat center/13px 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 8.6l4 4L14.5 3' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E");
  mask:no-repeat center/13px 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 8.6l4 4L14.5 3' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E");
}

/* compact price list (service left, fee right) */
.plist{list-style:none;margin:var(--s4) 0 0;padding:0}
.plist li{display:flex;flex-wrap:wrap;gap:4px var(--s3);align-items:baseline;
  justify-content:space-between;padding:16px 0;border-top:1px solid var(--c-hair)}
.plist .svc{font-size:1rem;font-weight:500;line-height:1.35;flex:1 1 60%}
.plist .fee{font-family:var(--display);
  font-size:1.25rem;letter-spacing:-.02em;white-space:nowrap}
.plist .fee em{font-family:var(--sans);font-style:normal;font-size:.8125rem;
  letter-spacing:.01em;color:var(--c-mute);display:block;text-align:right}

/* pay-as-you-go table -> stacked cards on mobile */
.ptable{width:100%;border-collapse:collapse;margin-top:var(--s4)}
.ptable caption{text-align:left;font-size:var(--fs-small);color:var(--c-mute);padding-bottom:var(--s3)}
.ptable th,.ptable td{text-align:left;padding:22px 20px 22px 0;border-top:1px solid var(--silver-hair);
  vertical-align:baseline}
.ptable thead th{border-top:0;border-bottom:1px solid var(--ink);padding-top:0;
  font-family:var(--sans);font-size:var(--fs-eyebrow);font-weight:600;
  text-transform:uppercase;letter-spacing:.28em;color:var(--stone)}
.ptable tbody th{font-family:var(--sans);font-weight:500;font-size:1.0625rem;width:62%}
.ptable td{font-family:var(--display);
  font-size:1.5rem;letter-spacing:-.02em;white-space:nowrap}
.ptable td span{font-family:var(--sans);font-size:.8125rem;letter-spacing:.01em;
  color:var(--c-mute);display:block;white-space:normal;margin-top:4px}

/* --------------------------------------------------------- 10. PROCESS RAIL */
.rail{list-style:none;margin:var(--s6) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.rail::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--c-hair)}
.rail li{padding:var(--s4) var(--s3) 0 0;position:relative}
.rail li::before{content:"";position:absolute;left:0;top:-2px;width:5px;height:5px;
  background:var(--silver);border-radius:50%}
.rail li:last-child::before{background:var(--red);width:7px;height:7px;top:-3px}
.rail .num{display:block;margin-bottom:12px}
.rail h3{margin-bottom:8px}
.rail p{font-size:.9375rem;color:var(--c-mute);margin:0}

/* sticky-scroll process story */
.sticky-story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(24px,5vw,80px);align-items:start}
.sticky-story__pin{position:sticky;top:calc(var(--header-h) + 32px);align-self:start}
.stepcard{padding-block:clamp(40px,7vw,90px);border-top:1px solid var(--c-hair)}
.stepcard__image{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;margin:0 0 var(--s4);border-radius:2px;box-shadow:0 18px 38px -28px rgba(11,11,11,.5);transition:transform .7s var(--ease-out),box-shadow .7s var(--ease-out)}
.stepcard:hover .stepcard__image{transform:scale(1.012);box-shadow:0 22px 42px -26px rgba(11,11,11,.42)}
.stepcard:first-child{border-top:0;padding-top:0}
.stepcard h3{margin:10px 0 var(--s3)}
.stepdl{margin:var(--s4) 0 0;display:grid;grid-template-columns:auto 1fr;gap:12px var(--s3)}
.stepdl dt{font-size:var(--fs-eyebrow);font-weight:600;text-transform:uppercase;
  letter-spacing:.28em;color:var(--c-mute);padding-top:5px;white-space:nowrap}
.stepdl dd{margin:0;font-size:1rem;color:var(--c-soft)}
.bigstack{position:relative;height:clamp(4.3rem,11vw,9.4rem)}
.bigstep{font-family:var(--display);
  font-size:clamp(4.5rem,11.5vw,9.5rem);line-height:.9;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1.5px var(--silver-light);
  position:absolute;left:0;top:0;opacity:0;
  transition:opacity var(--t-slow) var(--ease-out),color var(--t-slow) var(--ease-out)}
.bigstep:first-child{opacity:1}
.bigstep.is-active{opacity:1;color:var(--ink);-webkit-text-stroke-color:transparent}
.bigstack:has(.is-active) .bigstep:not(.is-active){opacity:0}
.pinlist{list-style:none;margin:0;padding:0}
.pinlist li{padding:14px 0;border-top:1px solid var(--c-hair);display:flex;gap:var(--s3);
  align-items:baseline;color:var(--c-mute);transition:color var(--t-mid) var(--ease-out)}
.pinlist li.is-active{color:var(--ink)}
.pinlist li.is-active .num{color:var(--red)}
.pinlist b{font-weight:500;font-size:1.0625rem}

/* ----------------------------------------------------------- 11. TESTIMONIALS */
.tslider{position:relative}
.tslide{display:none}
.tslide.is-active{display:block;animation:fadeup var(--t-slow) var(--ease-out)}
.no-js .tslide{display:block;margin-bottom:var(--s7)}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tquote{font-family:var(--display);
  font-size:var(--fs-quote);line-height:1.3;letter-spacing:-.004em;margin:0 0 var(--s5);
  max-width:24ch}
.tquote.tquote--wide{max-width:30ch}
.tmeta{display:flex;align-items:center;gap:var(--s3)}
.tavatar{width:66px;height:66px;border-radius:50%;object-fit:cover;flex:none;
  filter:grayscale(1) contrast(1.02);border:1px solid var(--silver-light)}
.tmono{width:66px;height:66px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid var(--silver);font-family:var(--display);
  font-size:1.25rem;letter-spacing:.06em;color:var(--ink)}
.pricepanel:not(.pricepanel--light) .tmono,.sec--ink .tmono,.ctaband .tmono{border-color:var(--c-line);color:var(--c-text)}
.tname{font-weight:600;font-size:1rem;letter-spacing:.01em}
.tdots{display:flex;gap:10px;margin-top:var(--s5);align-items:center;flex-wrap:wrap}
.tdots .motion-toggle{margin:0 0 0 var(--s3);border-bottom:0}
.tdot{width:44px;height:44px;display:grid;place-items:center;background:none;border:0;
  cursor:pointer;padding:0}
.tdot i{display:block;width:34px;height:2px;background:var(--silver-light);transition:background var(--t-mid)}
.pricepanel:not(.pricepanel--light) .tdot i,.sec--ink .tdot i,.ctaband .tdot i{background:rgba(255,255,255,.28)}
.tdot[aria-selected="true"] i{background:var(--red)}
.tdisclaimer{margin-top:var(--s5);font-size:.75rem;line-height:1.5;color:var(--c-mute);max-width:64ch}

/* pause control for anything that advances on its own (WCAG 2.2.2) */
.motion-toggle{
  background:none;border:0;border-bottom:1px solid var(--c-hair);color:var(--c-mute);
  padding:6px 0;margin-top:var(--s3);font-size:.75rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;transition:color var(--t-fast),border-color var(--t-fast);
}
.motion-toggle:hover{color:var(--c-text);border-bottom-color:var(--red)}
.motion-toggle::before{content:"";flex:none;width:8px;height:10px;
  background:linear-gradient(currentColor,currentColor) left/3px 100% no-repeat,
             linear-gradient(currentColor,currentColor) right/3px 100% no-repeat}
.motion-toggle[aria-pressed="true"]::before{
  width:0;height:0;background:none;border-style:solid;
  border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}

/* ------------------------------------------------------------ 12. CTA BAND */
.ctaband{background:var(--ink);color:var(--c-text);position:relative;overflow:hidden}
.ctaband .reg-ghost{left:-6%;top:-40%;font-size:clamp(340px,40vw,640px)}
.ctaband__inner{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end}
.ctaband h2{max-width:19ch}

/* --------------------------------------------------------------- 13. CARDS */
.card{background:var(--white);border:1px solid var(--silver-light);padding:var(--s4);
  text-decoration:none;display:block;
  transition:transform var(--t-mid) var(--ease-spring),box-shadow var(--t-mid) var(--ease-spring),
             border-color var(--t-mid)}
a.card:hover{box-shadow:0 18px 40px -24px rgba(11,11,11,.45);border-color:var(--silver)}
.card__img{aspect-ratio:16/10;object-fit:cover;width:100%;margin-bottom:var(--s3)}
.cat{font-size:var(--fs-eyebrow);font-weight:600;text-transform:uppercase;
  letter-spacing:.28em;color:var(--red)}
.postmeta{font-size:var(--fs-small);color:var(--c-mute);margin-top:10px}

/* featured + two small = deliberately unequal */
.postgrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--gutter)}
.postgrid__side{display:grid;gap:var(--gutter);align-content:start}
.postlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}

/* ------------------------------------------------------------- 14. FORMS */
.field{margin-bottom:var(--s3)}
.field label{display:block;font-size:var(--fs-eyebrow);font-weight:600;text-transform:uppercase;
  letter-spacing:.28em;margin-bottom:10px;color:var(--c-mute)}
.field input,.field textarea,.field select{
  width:100%;font-family:var(--sans);font-size:16px;line-height:1.4;
  padding:15px 16px;min-height:52px;background:var(--white);color:var(--ink);
  border:1px solid var(--edge);border-radius:2px;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.field input::placeholder{color:#767370}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(11,11,11,.09)}
.pricepanel:not(.pricepanel--light) .field input,.sec--ink .field input,
.ctaband .field input,.site-footer .field input{
  background:transparent;color:var(--on-ink);border-color:rgba(255,255,255,.38)}
.pricepanel:not(.pricepanel--light) .field input::placeholder,.sec--ink .field input::placeholder,
.ctaband .field input::placeholder,.site-footer .field input::placeholder{color:rgba(255,255,255,.4)}
.pricepanel:not(.pricepanel--light) .field input:focus,.sec--ink .field input:focus,
.ctaband .field input:focus,.site-footer .field input:focus{
  border-color:var(--on-ink);box-shadow:0 0 0 3px rgba(255,255,255,.14)}
.field.is-error input{border-color:var(--red);box-shadow:0 0 0 3px rgba(182,48,43,.14)}
.err{display:none;font-size:var(--fs-small);color:var(--red);margin-top:8px;font-weight:500}
.pricepanel:not(.pricepanel--light) .err,.sec--ink .err,.ctaband .err,.site-footer .err{color:#FFFFFF}
.field.is-error .err{display:block}
.formnote{font-size:.75rem;line-height:1.55;color:var(--c-mute);margin-top:var(--s2)}
.formsuccess{display:none;border-left:2px solid var(--red);padding:var(--s3) 0 var(--s3) var(--s3)}
.formsuccess h3{margin-bottom:8px}
form.is-sent .formsuccess{display:block}
form.is-sent .formbody{display:none}
.ml-badge{display:inline-flex;align-items:center;gap:8px;font-size:.6875rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--silver);
  border:1px dashed var(--silver);padding:6px 10px;border-radius:2px}

/* integration placeholder container */
.embed{
  border:1px dashed var(--edge);background:var(--paper);
  padding:clamp(24px,4vw,var(--s7)) var(--s4);text-align:center;border-radius:2px;
}
.pricepanel:not(.pricepanel--light) .embed,.sec--ink .embed{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.3)}
.embed__tag{display:inline-block;font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--red);margin-bottom:var(--s2)}
.embed h3{margin-bottom:10px}
.embed p{color:var(--c-mute);font-size:var(--fs-small);max-width:52ch;margin:0 auto}

/* ------------------------------------ 14b. AUTO-ADVANCING PANEL (+progress) */
.autopanel{margin-top:var(--s5)}
.autopanel details{position:relative;overflow:hidden;border-top:1px solid var(--c-hair)}
.autopanel details:last-of-type{border-bottom:1px solid var(--c-hair)}
.autopanel summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr;
  gap:var(--s3);align-items:baseline;padding:var(--s4) 0;
  font-family:var(--display);
  font-size:var(--fs-h4);letter-spacing:-.01em;line-height:1.25;
}
.autopanel summary::-webkit-details-marker{display:none}
.autopanel summary .num{transition:color var(--t-mid)}
.autopanel details[open] summary .num{color:var(--red)}
.autopanel details p{margin:0 0 var(--s4);padding-left:calc(var(--s3) + 3.2em);
  color:var(--c-soft);font-size:1rem;max-width:56ch}
.js .autopanel details[open] p{animation:accord 320ms var(--ease-out)}
/* the bar fills across the panel while it is the active one */
.autopanel details::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;
}
.autopanel details[open]::after{transform:scaleX(var(--progress,0))}
.autopanel__media{overflow:hidden}

/* --------------------------------------------------------------- 15. FAQ */
.faq{border-top:1px solid var(--c-hair)}
.faq details{border-bottom:1px solid var(--c-hair)}
.faq summary{
  list-style:none;cursor:pointer;padding:var(--s4) 44px var(--s4) 0;position:relative;
  font-family:var(--display);
  font-size:var(--fs-h4);letter-spacing:-.01em;line-height:1.25;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-7px;
  background:var(--ink);transition:transform var(--t-mid) var(--ease-spring),background var(--t-mid);
  -webkit-mask:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
  mask:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
}
.sec--ink .faq summary::after{background:var(--c-text)}
.faq details[open] summary::after{transform:rotate(135deg);background:var(--red)}
.faq .ans{overflow:hidden}
.faq .ans p{padding-right:44px;color:var(--c-soft);max-width:62ch}
.faq .ans>:last-child{margin-bottom:var(--s4)}
.js .faq details[open] .ans{animation:accord 260ms var(--ease-out)}
@keyframes accord{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------- 16. GLOSSARY / TIMELINE */
.glossary{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,5vw,72px)}
.glossary div{padding-block:var(--s4);border-top:1px solid var(--c-hair)}
.glossary dt{font-family:var(--display);
  font-size:1.3125rem;letter-spacing:-.01em;margin-bottom:8px}
.glossary dd{margin:0;font-size:1rem;color:var(--c-soft)}

.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline>li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);
  gap:clamp(16px,3vw,48px);padding-block:var(--s5);border-top:1px solid var(--c-hair);
  position:relative}
.timeline>li::before{content:"";position:absolute;left:0;top:-3px;width:6px;height:6px;
  border-radius:50%;background:var(--silver)}
.timeline>li:last-child::before{background:var(--red);width:8px;height:8px;top:-4px}
.timeline h3{margin-bottom:10px}
.timeline p{margin:0;color:var(--c-soft);font-size:1rem}
.timeline-media{margin:var(--s4) 0 0;width:min(100%,520px);max-width:520px;overflow:hidden}
.timeline-media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;box-shadow:0 18px 38px -28px rgba(11,11,11,.45);transition:transform .7s var(--ease-out),box-shadow .7s var(--ease-out)}
.timeline-media:hover img{transform:scale(1.018);box-shadow:0 24px 44px -28px rgba(11,11,11,.42)}
.timeline>li:nth-child(2) .timeline-media,.timeline>li:nth-child(5) .timeline-media{width:min(100%,520px);max-width:520px;margin-left:0}
.timeline>li:nth-child(3) .timeline-media img{border-radius:48% 2px 2px 2px}
.timeline>li:nth-child(4) .timeline-media img{border-radius:2px 48% 2px 2px}
.timeline>li:nth-child(6) .timeline-media img{border-radius:2px 2px 48% 2px}
.timeline>li:nth-child(6) .timeline-media img{object-fit:contain;background:var(--paper)}
.timeline .yr{font-family:var(--display);
  font-size:clamp(1.5rem,3vw,2.25rem);letter-spacing:-.02em;line-height:1;display:block}
.timeline .yr span{display:block;font-family:var(--sans);font-size:var(--fs-eyebrow);
  font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--stone);margin-top:10px}

.creds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.credential-card__image{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;margin:0 0 var(--s4);border-radius:2px;box-shadow:0 18px 38px -28px rgba(11,11,11,.45);transition:transform .7s var(--ease-out),box-shadow .7s var(--ease-out)}
.creds>div:hover .credential-card__image{transform:translateY(-4px);box-shadow:0 24px 44px -28px rgba(11,11,11,.42)}
.creds h2{font-size:var(--fs-h4);margin-bottom:var(--s3);padding-bottom:var(--s3);
  border-bottom:1px solid var(--c-hair)}
.creds ul{list-style:none;margin:0;padding:0}
.creds li{padding:12px 0;font-size:1rem;line-height:1.5;color:var(--c-soft)}

/* portrait gallery */
.gallery{display:grid;grid-template-columns:repeat(10,1fr);gap:var(--s2);align-items:start}
.gallery img{width:100%;object-fit:cover}
.gallery .g-a{grid-column:span 3;aspect-ratio:3/4}
.gallery .g-b{grid-column:span 2;aspect-ratio:3/4;margin-top:var(--s7)}
.gallery .g-c{grid-column:span 3;aspect-ratio:3/4}
.gallery .g-d{grid-column:span 2;aspect-ratio:3/4;margin-top:var(--s5)}

/* ------------------------------------------- 15b. RESOURCES: TOPICS + FEATURE
   Topic cards carry a full ink border, per Dinah's note on the mockup, and sit
   on a slight vertical stagger so the row never reads as a rigid grid. */
.topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.topics--two{grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,900px);max-width:900px;margin-inline:auto}
.topic{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--ink);background:var(--white);
  transition:transform var(--t-mid) var(--ease-spring),box-shadow var(--t-mid) var(--ease-spring)}
.topic:nth-child(2),.topic:nth-child(3){margin-top:0}
.topic picture{display:block;overflow:hidden;margin:10px 10px 0;aspect-ratio:16/10}
.topic img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;display:block;
  transition:transform .6s var(--ease-out)}
.topic__body{display:flex;flex:1;flex-direction:column;min-height:220px;padding:var(--s3) var(--s4) var(--s4)}
.topic--no-image .topic__body{padding-top:clamp(24px,3vw,44px)}
.topic__body h3{margin-bottom:8px}
.topic__body .muted{margin-bottom:var(--s3)}
.topic .tlink{pointer-events:none;margin-top:auto}

/* the featured resource: photograph left, copy right, deliberately uneven */
.card__body h3{margin:12px 0 8px}
.card--featured{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:center;border:0;padding:0;background:none}
.card--featured picture{display:block;overflow:hidden}
.card--featured .card__img{aspect-ratio:4/3;width:100%;object-fit:cover;margin:0}
.card--featured h3{font-size:var(--fs-h2);line-height:1.1;margin:var(--s3) 0}
.card--featured .muted{font-size:var(--fs-lead);line-height:1.45;color:var(--c-soft)}
.card--featured .postmeta{margin-top:var(--s3)}
a.card--featured:hover{transform:none;box-shadow:none}

/* article cards keep a photograph at the top */
.card--article .card__img{aspect-ratio:16/11;object-fit:cover}

@media (hover:hover) and (pointer:fine){
  .topic:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(11,11,11,.5)}
  .topic:hover img{transform:scale(1.04)}
  .card--featured:hover .card__img{transform:scale(1.03)}
}
@media (max-width:1024px){
  .short-version-media--mother,.short-version-media--ventures{max-width:100%;margin-left:0}
  .short-version-media--mother img{aspect-ratio:16/10;border-radius:2px 30% 2px 2px}
  .office-action-visuals{max-width:100%;gap:16px}
  .topics{grid-template-columns:1fr;gap:var(--s4)}
  .topics--two{grid-template-columns:1fr;max-width:none}
  .topic:nth-child(2),.topic:nth-child(3){margin-top:0}
  .card--featured{grid-template-columns:1fr}
  .card--featured picture{grid-row:auto}
  .card--featured .card__img{aspect-ratio:16/10}
  .card--featured h3{font-size:var(--fs-h3)}
}

/* --------------------------------------------- 16a. THE DRAWN RULE
   Section divider. One tapered red stroke — the logo's line, stretched —
   crossed once by an ink hairline. Reads as a single pen gesture rather
   than a decorative wave, and the crossing keeps it off-axis. */
.rule-wave{display:block;width:100%;height:clamp(52px,5.6vw,92px);
  margin-block:clamp(8px,1.4vw,20px)}
.rule-wave--flip{transform:scaleX(-1)}
.sec--ink+.rule-wave,.rule-wave+.sec--ink{margin-block:0}

/* a section that wants room to breathe, per Dinah's brief */
.sec--airy{padding-block:clamp(72px,10vw,168px)}

/* ---------------------------------------- 16b. EDITORIAL IMAGE BREAK
   Long stretches of copy need air, especially on a phone where a section
   can run for several screens. These land between blocks of text. */
.imgband{position:relative;margin-block:clamp(40px,6vw,88px)}
.imgband img{width:100%;display:block;object-fit:cover;
  height:clamp(200px,34vw,380px)}
.imgband--tall img{height:clamp(320px,46vw,520px)}
.imgband figcaption{margin-top:12px;font-size:var(--fs-small);color:var(--c-mute);
  max-width:56ch}
.imgband--bleed{margin-inline:calc(var(--gutter) * -1)}
.imgband--bleed figcaption{padding-inline:var(--gutter)}
/* inside a section that already has a max-width wrap, go edge to edge */
@media (min-width:1025px){
  .imgband--bleed{margin-inline:calc((100vw - min(100vw, var(--maxw))) / -2 - var(--gutter))}
}

/* a photo set beside copy, rather than stacked under it */
.sidefig{margin:0}
.sidefig img{width:100%;display:block;object-fit:cover;height:clamp(240px,30vw,400px)}
.sidefig figcaption{margin-top:12px;font-size:var(--fs-small);color:var(--c-mute)}

/* ------------------------------------------------- 17. LEAD MAGNET / PDF MOCK */
.pdfmock{
  position:relative;width:min(340px,80%);margin-inline:auto;aspect-ratio:3/4;
  background:linear-gradient(145deg,#fff 0%,#fbfaf8 46%,#f0edE8 100%);
  border:1px solid var(--silver-light);
  box-shadow:-14px 26px 60px -26px rgba(11,11,11,.55),
             inset 8px 0 14px -12px rgba(11,11,11,.16);
  padding:clamp(20px,4vw,34px);display:flex;flex-direction:column;
  transform:perspective(1400px) rotateY(-11deg) rotateX(2deg);
  transition:transform var(--t-slow) var(--ease-spring);
}
.pdfmock::before{content:"";position:absolute;left:0;top:0;bottom:0;width:9px;
  background:linear-gradient(90deg,rgba(11,11,11,.16),rgba(11,11,11,0))}
.pdfmock img.pm-logo{width:60%;margin-bottom:auto}
.pdfmock .pm-kicker{font-size:.625rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--stone);margin-bottom:12px}
.pdfmock .pm-title{font-family:var(--display);
  font-size:clamp(1.4rem,2.6vw,1.85rem);line-height:1.08;letter-spacing:-.02em;margin:0 0 14px}
.pdfmock .pm-foot{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--silver);
  margin-top:14px}

.benefits{list-style:none;margin:var(--s4) 0;padding:0}
.benefits li{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);
  padding:var(--s3) 0;border-top:1px solid var(--silver-hair);font-size:1.0625rem}
.benefits .num{padding-top:5px}

/* ------------------------------------------------------------- 18. ARTICLE */
.article{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);
  gap:clamp(24px,5vw,80px);align-items:start}
.toc{position:sticky;top:calc(var(--header-h) + 32px);font-size:.9375rem}
.toc ol{list-style:none;margin:var(--s3) 0 0;padding:0;counter-reset:t}
.toc li{counter-increment:t;border-top:1px solid var(--silver-hair)}
.toc a{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:11px 0;
  text-decoration:none;color:var(--stone);transition:color var(--t-fast);line-height:1.35}
.toc a::before{content:counter(t,decimal-leading-zero);font-size:.6875rem;font-weight:600;
  letter-spacing:.2em;padding-top:3px}
.toc a:hover,.toc a[aria-current="true"]{color:var(--ink)}
.toc a[aria-current="true"]::before{color:var(--red)}
.body-copy{max-width:var(--measure)}
.body-copy h2{font-size:clamp(1.5rem,2.6vw,2.125rem);margin:var(--s7) 0 var(--s3);scroll-margin-top:120px}
.body-copy h3{font-size:var(--fs-h4);margin:var(--s5) 0 var(--s2)}
.body-copy p,.body-copy li{color:var(--ink-80);font-size:1.0625rem;line-height:1.72}
.body-copy>p:first-of-type{font-size:var(--fs-lead);line-height:1.5;color:var(--ink)}
.body-copy ul,.body-copy ol{padding-left:1.25em;margin:0 0 1.2em}
.body-copy li{margin-bottom:.5em}
.body-copy figure{margin:var(--s6) 0}
.inline-cta{background:var(--paper);border-left:2px solid var(--red);
  padding:var(--s4);margin:var(--s7) 0}
.inline-cta h3{margin-bottom:10px}
.authorbox{display:grid;grid-template-columns:120px 1fr;gap:var(--s4);align-items:start;
  padding-top:var(--s5);border-top:1px solid var(--silver-hair);margin-top:var(--s7)}
.authorbox img{border-radius:50%;width:120px;height:120px;object-fit:cover}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s4)}
.chip{font-size:.8125rem;font-weight:500;letter-spacing:.02em;padding:10px 18px;min-height:44px;
  display:inline-flex;align-items:center;border:1px solid var(--edge);background:transparent;
  border-radius:2px;cursor:pointer;text-decoration:none;
  transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast)}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* --------------------------------------------------------------- 19. FOOTER */
.site-footer{background:var(--ink);color:var(--on-ink-dim);overflow-x:clip;
  padding-block:clamp(48px,7vw,var(--s9)) var(--s5);font-size:.9375rem}
.site-footer a{text-decoration:none;color:var(--on-ink-dim);transition:color var(--t-fast)}
.site-footer a:hover{color:var(--on-ink)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(32px,6vw,96px);padding-bottom:var(--s7);border-bottom:1px solid var(--hair-dark)}
.foot-logo{width:230px;margin-bottom:var(--s4)}
.foot-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s4);
  padding-block:var(--s6);border-bottom:1px solid var(--hair-dark)}
.foot-nav h2{font-family:var(--sans);font-size:var(--fs-eyebrow);font-weight:600;
  text-transform:uppercase;letter-spacing:.28em;color:var(--on-ink-dim);margin-bottom:var(--s3)}
.foot-nav ul{list-style:none;margin:0;padding:0}
.foot-nav li{margin-bottom:12px}
.foot-nav .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.foot-bottom{padding-top:var(--s5);display:grid;gap:var(--s3)}
.foot-legal{font-size:.75rem;line-height:1.6;max-width:92ch;color:var(--on-ink-dim)}
.foot-meta{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:.75rem;letter-spacing:.04em;
  text-transform:uppercase}
.socials{display:flex;gap:var(--s3);margin-top:var(--s3)}
.socials a{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem}

/* About closing: portrait bleeds into the CTA band that follows */
.closing{padding-bottom:0}
.closing--end{padding-bottom:clamp(40px,6vw,88px)}
.closing .split{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.closing__fig img{width:100%;max-width:340px;margin-left:auto;display:block}
@media (max-width:1024px){
  .closing .split{grid-template-columns:1fr}
  .closing__fig img{margin-inline:auto}
  .closing{padding-bottom:clamp(32px,5vw,56px)}
}

/* bare pages (lead magnet / thank you) */
.bare-header{padding-block:var(--s4);border-bottom:1px solid var(--silver-hair)}
.bare-header .hdr{height:auto;gap:var(--s3)}
.bare-header .bare-note{margin-left:auto;font-size:var(--fs-small);color:var(--stone)}
.bare-header .bare-cta{margin-left:auto;display:flex}
@media (max-width:640px){.bare-header .bare-cta .btn--outline{display:none}
  .bare-header .bare-cta .btn{width:auto}}

/* -------------------------------------------------------------- 20. MOTION */
.js .reveal{opacity:0;transform:translateY(34px);
  transition:opacity 850ms var(--ease-reveal),transform 850ms var(--ease-reveal);
  transition-delay:var(--reveal-delay,0ms)}
.js .reveal[data-from="left"]{transform:translateX(-52px)}
.js .reveal[data-from="right"]{transform:translateX(52px)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal[data-d="1"]{--reveal-delay:90ms}
.js .reveal[data-d="2"]{--reveal-delay:180ms}
.js .reveal[data-d="3"]{--reveal-delay:270ms}
/* ---------------------------------------------------- above-the-fold entrance
   CSS animations, not JS: they run off the main thread while the page is still
   loading and parsing, so the hero never waits on site.js or flashes empty. */
.lines{--line-stagger:80ms;display:flow-root}  /* contains the clips' negative margins */
.lines>span{
  display:block;overflow:hidden;
  /* descenders and the red rule sit below the baseline — give them room
     inside the clip, then take it back so line spacing is unchanged */
  padding-bottom:.18em;margin-bottom:-.18em;
}
.lines>span>span{display:block;animation:line-reveal 800ms var(--ease-reveal) both}
.lines>span:nth-child(1)>span{animation-delay:60ms}
.lines>span:nth-child(2)>span{animation-delay:calc(60ms + var(--line-stagger))}
.lines>span:nth-child(3)>span{animation-delay:calc(60ms + var(--line-stagger)*2)}
.lines>span:nth-child(4)>span{animation-delay:calc(60ms + var(--line-stagger)*3)}
@keyframes line-reveal{from{transform:translateY(120%)}to{transform:translateY(0)}}

/* the brand rule draws in once the last line has landed */
.lines .mark::after{animation:rule-draw 620ms var(--ease-reveal) 620ms both}
@keyframes rule-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* everything else in the hero rises a few pixels behind the headline */
.hero__copy>*:not(.lines){animation:page-in 620ms var(--ease-reveal) both}
.hero__copy>.eyebrow{animation-delay:0ms}
.hero__copy>.lead{animation-delay:320ms}
.hero__copy>.btn-row{animation-delay:400ms}
@keyframes page-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* the lead image settles rather than pops as it decodes */
img[fetchpriority="high"]{animation:photo-in 1s var(--ease-out) both}
@keyframes photo-in{from{opacity:.6;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}

/* pointer-gated hover motion (a tap on touch fires a phantom :hover) */
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px)}
  .tlink:hover::after{transform:scaleX(1)}
  .tlink:hover .arw{transform:translateX(4px)}
  .nav a:hover::after{transform:scaleX(.7)}
  a.card:hover{transform:translateY(-3px)}
  .pdfmock:hover{transform:perspective(1400px) rotateY(-6deg) rotateX(1deg) translateY(-6px)}
  .figure:not(.figure--cutout):hover picture img,
  .gallery picture:hover img{transform:scale(1.035)}
  a.card:hover .card__img{transform:scale(1.045)}
}

.parallax{will-change:transform}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1!important;transform:none!important}
  .lines>span{overflow:visible;padding-bottom:0;margin-bottom:0}
  .lines>span>span,.hero__copy>*:not(.lines),img[fetchpriority="high"]{animation:none!important}
  .mark::after{transform:scaleX(1)!important}
  .parallax{transform:none!important}
  .ticker-track{animation:none;width:100%}
  .ticker-group{flex-wrap:wrap;padding-right:0}
  .ticker-group[aria-hidden="true"]{display:none}
  .cred__inner.is-ticker{-webkit-mask-image:none;mask-image:none}
  .motion-toggle{display:none}
  .autopanel details::after{display:none}
  .figure:not(.figure--cutout):hover picture img,
  .gallery picture:hover img,a.card:hover .card__img{transform:none!important}
}

/* --------------------------------------------------------- 21. BREAKPOINTS */
@media (max-width:1180px){
  .nav{gap:14px}
  .nav a{font-size:.8125rem}
  .hdr-cta .btn{padding:11px 14px;font-size:.78rem}
}
@media (max-width:1024px){
  .nav,.hdr-cta{display:none}
  .burger{display:block}
  .hero__grid{grid-template-columns:1fr;gap:0}
  .hero__copy{padding-bottom:var(--s5)}
  .hero__fig{justify-self:center;margin-right:0}
  .hero__fig{width:min(360px,100%)}
  .portrait-frame img{height:clamp(320px,44vh,430px)}
  .hero__grid{min-height:0}
  .hero__paper{width:100%;top:auto;height:58%;bottom:0}
  .hero--overlap .hero__fig{margin-bottom:-32px}
  .cred--hero{padding-right:var(--gutter)}
  .cred__inner ul{grid-template-columns:repeat(2,max-content)}
  .hero__reg{font-size:clamp(280px,64vw,420px);right:-12%;bottom:10%}
  .split,.split--rev,.split--even,.sticky-story,.article,.ctaband__inner,
  .postgrid,.foot-top{grid-template-columns:1fr}
  .sticky-story__pin{position:static}
  .postlist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .creds{grid-template-columns:1fr}
  .creds>div+div{margin-top:var(--s5)}
  .rail{grid-template-columns:repeat(2,1fr);gap:0 var(--s3)}
  .rail li{padding-right:var(--s2)}
  .rail li:nth-child(n+3){border-top:1px solid var(--c-hair);margin-top:var(--s4)}
  
  .figure--edge{margin-left:0}
  .inset{position:static;width:100%;margin-top:var(--s2);border:0;box-shadow:none}
  .toc{position:static;padding-bottom:var(--s4);border-bottom:1px solid var(--silver-hair)}
  .foot-top{gap:var(--s6)}
  .article .toc{margin-bottom:var(--s4)}
}
@media (max-width:760px){
  :root{--header-h:68px}
  body{font-size:1.0625rem}
  .brand img{height:30px}
  .checks{grid-template-columns:1fr}
  .glossary{grid-template-columns:1fr}
  .postlist{grid-template-columns:1fr}
  .enum>li,.timeline>li{grid-template-columns:1fr;gap:var(--s2)}
  .timeline>li:nth-child(2) .timeline-media,.timeline>li:nth-child(5) .timeline-media{max-width:100%;margin-left:0}
  .rail{grid-template-columns:1fr}
  .rail li:nth-child(n+2){border-top:1px solid var(--c-hair);margin-top:var(--s3)}
  
  .foot-nav{grid-template-columns:1fr;gap:var(--s5)}
  .foot-nav .cols{grid-template-columns:repeat(2,1fr)}
  .authorbox{grid-template-columns:1fr}
  .authorbox img{width:96px;height:96px}
  .gallery{grid-template-columns:repeat(2,1fr);gap:var(--s2)}
  .gallery .g-a,.gallery .g-b,.gallery .g-c,.gallery .g-d{grid-column:span 1;margin-top:0}
  .sticky-cta{display:block}
  body.has-sticky-cta{padding-bottom:78px}
  .cred__inner ul{grid-template-columns:1fr;gap:8px}
  .hero--overlap .hero__fig{margin-bottom:-24px}
  .stepdl{grid-template-columns:1fr;gap:4px}
  .stepdl dt{padding-top:var(--s2)}
  .btn{width:100%}
  .btn-row{gap:12px}
  .btn-row .btn{flex:1 1 100%}
  .tavatar,.tmono{width:56px;height:56px}
  .pdfmock{transform:none;width:min(280px,86%)}

  /* pay-as-you-go table -> stacked cards */
  .ptable,.ptable caption,.ptable tbody,.ptable tr,.ptable th,.ptable td{display:block;width:auto}
  .ptable caption{max-width:none}
  .ptable thead{position:absolute;left:-9999px}
  .ptable tr{border:1px solid var(--silver-light);padding:var(--s3);margin-bottom:12px;
    background:var(--white)}
  .ptable tbody th{border:0;padding:0 0 10px;font-size:1.0625rem;width:auto}
  .ptable td{border:0;padding:0;font-size:1.625rem;white-space:normal}
}
@media (min-width:1025px){
  .gallery .g-b{margin-top:var(--s8)}
}
@media print{
  .site-header,.sticky-cta,.mobile-menu,.embed{display:none}
  body{font-size:11pt}
}

/* Animation is opt-in only after the viewport observer has initialized. */
.scroll-motion{transition:none!important}
.scroll-motion[data-motion-pending]{opacity:0!important;transform:translateY(40px)}
@media(prefers-reduced-motion:reduce){.scroll-motion[data-motion-pending]{opacity:1!important;transform:none!important}}
@media print{.scroll-motion[data-motion-pending]{opacity:1!important;transform:none!important}}

/* Keep editorial photography crisp and rectangular throughout the content. */
main figure,main figure img{border-radius:0 !important}

/* Short mobile reading paths; full details remain on the linked service pages. */
.mobile-copy{display:none}
@media(max-width:767px){
 .desktop-copy{display:none!important}
 .mobile-copy{display:block}
 .home-page .enum p,.home-page .rail p,.home-page .pricepanel .checks,
 .home-page .pricepanel .plist,.home-page .pricepanel .hair{display:none}
 .home-page .enum li{padding-block:22px}
 .home-page .rail li{padding-block:18px}
 .home-page .prose .mobile-copy{margin-top:0}
 .home-page .book-kicker{display:none}

 /* Mobile media rhythm: every editorial block fills the available column,
    while its component keeps a deliberate, stable crop. This prevents
    portrait assets from shrinking beside copy or creating uneven gutters. */
 .split > figure,.split > .figure,.split > .short-version-media,
 .split > .search-visual,.split > .bigger-issue-visual,
 .split > .office-action-visuals,.split > .option-guide-media,
 .split > .faq-guide-media{width:100%;max-width:100%;justify-self:stretch}
 .short-version-media--mother,.short-version-media--brand,
 .short-version-media--ventures{width:100%;max-width:100%;margin-left:0;margin-right:0}
 .short-version-media--mother img,.short-version-media--brand img,
 .short-version-media--ventures img{aspect-ratio:4/3;object-fit:cover}
 .topic picture{height:auto;aspect-ratio:16/10;min-height:0}
 .topic img{height:100%!important;aspect-ratio:auto;object-fit:cover;opacity:1!important;visibility:visible!important}
 .topic__body{min-height:220px}
 .topics--two{display:flex;flex-direction:column;width:100%;max-width:none;gap:24px}
 .topics--two .topic{width:100%;min-width:0;margin:0!important}
 .card--featured .card__img,.card--article .card__img{width:100%;aspect-ratio:4/3}
 .service-inline-image img,.timeline-media img,.credential-card__image{aspect-ratio:4/3}
 .search-visual,.bigger-issue-visual{width:100%;max-width:100%}
 .office-action-visuals{width:100%;max-width:100%;gap:16px}
 .office-action-visual--letter,.office-action-visual--review{width:100%;aspect-ratio:1/1}
}

/* An editorial cover: use the supplied photograph without altering its lettering. */
.hero--book{background:#eae5dc;padding-block:clamp(44px,6vw,90px)}
.hero--book .hero__grid{align-items:center;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);min-height:0;gap:clamp(32px,5vw,88px)}
.hero--book .hero__copy{padding-block:24px}
.hero--book .hero__fig{align-self:center;margin:0;max-width:100%;width:min(100%,405px)}
.book-link{display:block;position:relative;perspective:1100px;padding:10px 18px 25px;text-decoration:none}
.book-float{display:block;animation:book-float 6s ease-in-out infinite;will-change:transform}
.book-tilt{display:block;transform:rotateX(var(--book-x,0deg)) rotateY(var(--book-y,0deg));transition:transform .45s ease;filter:drop-shadow(0 23px 17px #3b302431)}
.book-crop{display:block;position:relative;aspect-ratio:785/934}
.book-crop img{position:absolute;width:184.459%;max-width:none;height:auto;left:-45.35%;top:-8.03%;clip-path:polygon(24.59% 16.67%,66.64% 6.85%,78.80% 81.7%,34.0% 93.0%);animation:none!important}
.book-link:focus-visible{outline:2px solid var(--red,#B6302B);outline-offset:8px;border-radius:3px}
.book-display figcaption{text-align:center;display:flex;align-items:center;flex-direction:column;gap:8px;margin-top:8px}
.book-kicker{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:#635d54}
.book-display figcaption a{font-family:var(--display);font-size:1.4rem;text-decoration:none;border-bottom:1px solid #B6302B;padding-bottom:5px}
.book-motion{display:block;margin:16px auto 0;padding:8px 12px;background:transparent;border:0;color:#625c53;font:inherit;font-size:.8125rem;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.book-display.is-paused .book-float{animation-play-state:paused}
.book-display.is-paused .book-tilt{transform:none}
.guide-cover{background:#eae5dc}
.guide-cover img{display:block;width:100%;height:auto;object-fit:contain}
@keyframes book-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-15px) rotate(1deg)}}
@media(max-width:900px){
 .hero--book .hero__grid{grid-template-columns:1fr;gap:30px}
 .hero--book .hero__copy{padding-block:0}
 .hero--book .hero__fig{width:min(330px,88%);margin:0 auto}
 .hero--book{padding-block:38px 45px}
 .book-link{padding-bottom:16px}
}
@media(prefers-reduced-motion:reduce){
 .book-float{animation:none;will-change:auto}
 .book-tilt{transition:none;transform:none!important}
 .book-motion{display:none}
}

.book-display.is-offscreen .book-float,.book-display.is-background .book-float{animation-play-state:paused}

/* An interactive reading surface, using the original photographed cover. */
.hero--book .hero__fig.book-ready{width:100%;max-width:570px;justify-self:center}
.book-ready .book-original{display:none}
.book-reader[hidden],.book-point[hidden],.book-pause[hidden]{display:none}
.book-stage{perspective:1600px;padding:20px 0 30px}
.book-volume{position:relative;width:min(80%,310px);height:clamp(365px,32vw,430px);margin-left:max(10%,calc((100% - 310px)/2));transform-style:preserve-3d;transform:rotateZ(-5deg);transition:width 1.3s cubic-bezier(.22,.7,.2,1),margin-left 1.3s cubic-bezier(.22,.7,.2,1),transform 1.3s cubic-bezier(.22,.7,.2,1)}
.book-ready.is-open .book-volume{width:50%;margin-left:50%;transform:rotateZ(0)}
.book-page,.book-cover,.book-cover-front,.book-cover-inside{position:absolute;inset:0;border-radius:2px 5px 5px 2px}
.book-page{background:linear-gradient(90deg,#d8cfc0 0,#f8f3e9 9%,#fffcf5 75%,#ede6d8 100%);padding:clamp(14px,2vw,26px);display:flex;flex-direction:column;box-shadow:3px 3px 0 #d4cabb,5px 5px 0 #f2ecdf,7px 7px 0 #c9bdad,10px 19px 28px #3b302425;color:#191715}
.book-cover{transform-origin:left center;transform-style:preserve-3d;transform:rotateY(0deg) translateZ(2px);transition:transform 1.3s cubic-bezier(.22,.7,.2,1);z-index:2}
.book-cover-front,.book-cover-inside{-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#eae5dc;overflow:hidden;box-shadow:0 2px 5px #3b302430}
.book-cover-front img{position:absolute;left:0;top:0;width:1448px!important;height:1086px!important;max-width:none!important;transform-origin:0 0;animation:none!important}
.book-cover-inside{transform:rotateY(180deg);background:linear-gradient(90deg,#f1eadd,#faf6ed 85%,#cfc3b0);padding:clamp(14px,2vw,28px);display:flex;flex-direction:column;justify-content:center;text-align:left}
.book-cover-inside>span:first-child{font:500 .75rem/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.book-cover-inside p{font:400 clamp(23px,2.3vw,34px)/1.18 var(--display);margin:28px 0 20px}
.book-cover-inside small{font-size:.75rem;letter-spacing:.06em}
.book-inside-rule{width:40px;height:2px;background:var(--red);margin-bottom:24px}
.book-ready.is-open .book-cover{transform:rotateY(-178deg) translateZ(2px)}
.book-page-label{font:500 .75rem/1.5 var(--sans);letter-spacing:.09em;text-transform:uppercase;min-height:36px}
.book-points{flex:1;display:flex;align-items:center;padding-block:12px}
.book-point{animation:book-point-in .6s ease both}
.book-point-number{display:block;font:400 2.1rem/1 var(--display);color:var(--red);margin-bottom:12px}
.book-point h2{font:400 clamp(21px,1.9vw,28px)/1.17 var(--display);letter-spacing:-.025em;margin:0 0 14px;max-width:none}
.book-point p{font:400 1rem/1.45 var(--sans);margin:0;color:#4b443c}
.book-pagination{display:flex;gap:8px;border-top:1px solid #cfc3b0;padding-top:9px}
.book-pagination button{font:500 .875rem/1 var(--sans);border:0;background:none;color:#62574b;min-height:36px;min-width:36px;cursor:pointer;border-bottom:2px solid transparent}
.book-pagination button[aria-current=true]{color:var(--red);border-color:var(--red)}
.book-controls{display:flex;justify-content:center;align-items:center;gap:12px;min-height:48px;margin-bottom:12px}
.book-controls button{cursor:pointer;border:1px solid #85796b;background:transparent;padding:10px 16px;font:500 .875rem/1.3 var(--sans);color:#302922;min-height:44px}
.book-controls .book-toggle{background:#2a2520;color:#fff;border-color:#2a2520}
.book-controls button:focus-visible,.book-pagination button:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.book-ready figcaption{margin-top:0}
@keyframes book-point-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(max-width:1100px) and (min-width:901px){.book-page{padding:14px}.book-volume{height:415px}.book-point h2{font-size:22px}}
@media(max-width:900px){.hero--book .hero__fig.book-ready{width:min(100%,540px)}.book-volume{height:390px}.book-point h2{font-size:25px}.book-page{padding:20px}}
@media(max-width:480px){.book-volume{height:440px}.book-page{padding:13px}.book-point h2{font-size:21px}.book-point p{font-size:1rem;line-height:1.4}.book-cover-inside{padding:15px}.book-cover-inside p{font-size:23px}.book-pagination{gap:0}.book-page-label{letter-spacing:.035em}.book-stage{padding-top:12px}}
@media(prefers-reduced-motion:reduce){.book-volume,.book-cover{transition:none}.book-point{animation:none}}

/* Photography accompanies the original copy, without changing other lists. */
.enum--illustrated>li{align-items:center}
.enum--illustrated .enum__visual{min-width:0}
.enum--illustrated .num{display:block;margin-bottom:18px;line-height:1.6}
.enum--illustrated img{display:block;width:100%;height:auto;background:#eee9e0}
@media(max-width:767px){
  .enum--illustrated>li{gap:24px}
  .enum--illustrated .enum__visual{width:100%;max-width:400px}
}

/* Readability and a consistent editorial grid across all pages. */
:root{--sans:"Avenir Next",Avenir,"Segoe UI",Helvetica,Arial,sans-serif;--fs-eyebrow:.75rem;--fs-small:.9375rem;--fs-body:1.0625rem;--fs-lead:clamp(1.125rem,1rem + .3vw,1.3125rem);--gutter:clamp(20px,4vw,64px);--maxw:1320px}
body{font-family:var(--sans);line-height:1.65}
h1,h2,h3,h4,.price,.tquote{font-family:var(--display)}
p,li,label,input,textarea,select,button,.btn,.nav a,.eyebrow,.num,.muted,.tlink,figcaption,.book-kicker{font-family:var(--sans)}
.eyebrow,.num{letter-spacing:.13em;line-height:1.6}
.btn{font-weight:600;letter-spacing:0;line-height:1.45}
.fine,.tdisclaimer,.foot-legal,.foot-meta,form small{font-size:.8125rem;line-height:1.65}
.wrap,.wrap--wide{width:calc(100% - var(--gutter)*2);max-width:var(--maxw);margin-inline:auto;padding-inline:0}
.wrap .wrap{width:100%}
.split{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,64px);align-items:start}
.split>*{min-width:0}
.topics--two{width:100%;max-width:none;margin-inline:0;grid-template-columns:repeat(2,minmax(0,1fr))}
.topic__body{min-height:210px;padding:28px}
.topic h3{margin-bottom:14px}
.topic .tlink{margin-top:auto;align-self:start}
.hdr{gap:22px}.hdr .brand img{height:32px}.nav{gap:18px}.hdr-cta{gap:10px}.hdr .btn--sm{padding:11px 14px;font-size:.75rem}.nav a{font-size:.8125rem}
.cred{padding-block:24px}
.cred__inner{overflow:visible;mask-image:none!important;-webkit-mask-image:none!important}
.cred__inner ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 32px;list-style:none;margin:0;padding:0;width:100%}
.cred__inner li{position:relative;margin:0;padding:0 0 0 14px;white-space:normal;font-size:.75rem;letter-spacing:.06em;color:#efede8;line-height:1.5}
.cred__inner li::before{content:"";position:absolute;left:0;top:50%;width:4px;height:4px;border-radius:50%;background:var(--red);transform:translateY(-50%)}
#brand-essentials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
#brand-essentials>li{display:flex;flex-direction:column;gap:22px;padding:24px;border:1px solid #ded9d1;background:#f7f5f2;align-items:stretch;min-width:0}
#brand-essentials .enum__visual{max-width:none;width:100%}
#brand-essentials .num{font-size:.6875rem;min-height:36px;margin-bottom:18px}
#brand-essentials img{aspect-ratio:4/3;object-fit:cover;width:100%}
#brand-essentials h3{font-size:clamp(1.3rem,1.7vw,1.65rem);line-height:1.25;letter-spacing:-.025em}
#brand-essentials p{display:block;font-size:.9375rem;line-height:1.65}
.testimonials-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.testimonials-layout h2{max-width:12ch;font-size:clamp(2.5rem,4.4vw,4rem);line-height:1.12}
.testimonials-layout .tslider{padding:0;min-height:360px}
.testimonials-layout .tquote{font-size:clamp(1.6rem,2.5vw,2.4rem);line-height:1.35}
.testimonials-layout .tmeta{margin-top:28px}.testimonials-layout .tavatar{width:64px;height:64px}.testimonials-layout .tdisclaimer{max-width:none}
.lawyer-section{display:block}
.lawyer-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(28px,6vw,96px);align-items:start}
.lawyer-story>.eyebrow{grid-column:1/-1;margin-bottom:clamp(18px,2vw,30px)}
.lawyer-story>h2{grid-column:1;align-self:start;max-width:13ch;margin:0}
.lawyer-story>.prose{grid-column:2;grid-row:2 / span 2;margin-top:0!important}
.lawyer-story>.btn-row{grid-column:2;grid-row:4;margin-top:var(--s5)!important}
.guide-newsletter-section>.wrap{align-items:stretch}
.guide-summary{display:flex;align-items:center;padding:clamp(24px,4vw,56px);background:#f1ede6;border:1px solid #ded9d1}
.guide-summary h3{font-size:clamp(2rem,3.4vw,3.2rem);line-height:1.2;max-width:17ch;margin-bottom:24px}
.guide-summary p{max-width:43ch}
.guide-newsletter-section .signup{height:100%}
.mobile-menu .btn-row{flex-wrap:wrap}.mobile-menu .btn-row .btn{max-width:100%;white-space:normal}
:focus-visible{outline:2px solid var(--red);outline-offset:5px}
/* A real paper stack; native scrolling remains available in either direction. */
.hero--book{padding:0;background:#eae5dc;overflow:visible}
.hero--book .hero__grid{gap:clamp(24px,4vw,56px);grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;padding-block:48px;min-height:calc(100svh - var(--header-h))}
.hero--book .hero__copy{padding:0}.hero--book .hero__copy h1{font-size:clamp(2.6rem,5.4vw,5rem);line-height:1.07}.hero--book .hero__copy .lead{max-width:42ch}
.hero--book .hero__fig{width:100%;max-width:none;margin:0;align-self:center;justify-self:stretch}
.reading-stage{width:100%;padding-block:24px}
.reading-book{display:grid;grid-template-columns:1fr 1fr;perspective:1800px;min-height:450px;filter:drop-shadow(0 20px 18px #3b302420)}
.reading-left{background:linear-gradient(90deg,#f4eee3 0%,#faf6ee 92%,#d5c9b7 100%);padding:clamp(18px,2.3vw,34px);display:flex;flex-direction:column;justify-content:center;min-width:0;border-radius:3px 0 0 3px;box-shadow:0 3px 2px #8d7a5b20}
.reading-left .eyebrow{font-size:.625rem;letter-spacing:.1em;color:#51493f;margin-bottom:24px}
.reading-left h2{font-size:clamp(1.5rem,2.3vw,2.15rem);line-height:1.22;letter-spacing:-.025em}
.reading-left p{font-size:.75rem;margin:0;color:#51493f}
.reading-rule{display:block;width:36px;height:2px;background:var(--red);margin-block:24px}
.reading-right{position:relative;min-width:0;transform-style:preserve-3d;box-shadow:3px 3px #d7cbbb,6px 6px #eee4d7,9px 9px #cec1ae;border-radius:0 5px 5px 0}
.reading-leaf{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d;will-change:transform}
.leaf-front,.leaf-back,.reading-end{position:absolute;inset:0;background:linear-gradient(90deg,#d8cdbb,#fcf9f1 7%,#fffdf8 88%,#eee6d8);padding:clamp(18px,2.1vw,30px);border-radius:0 4px 4px 0;display:flex;flex-direction:column;backface-visibility:hidden;-webkit-backface-visibility:hidden;color:#29251f}
.leaf-back{transform:rotateY(180deg);background:linear-gradient(90deg,#f4eee3,#faf6ee 92%,#d5c9b7);justify-content:center}
.leaf-back p{font-family:var(--display);font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.3;margin-block:36px}
.reading-label{font-size:.625rem;letter-spacing:.09em;text-transform:uppercase;line-height:1.5;margin-bottom:24px}
.reading-number{font-family:var(--display);font-size:2rem;color:var(--red);line-height:1;margin-bottom:18px}
.leaf-front h3,.reading-end h3{font-size:clamp(1.4rem,1.85vw,1.8rem);line-height:1.18;letter-spacing:-.025em;margin:0 0 18px}
.leaf-front p,.reading-end p{font:400 .9375rem/1.6 var(--sans);color:#51493f;margin:0 0 18px}
.reading-folio{display:flex;justify-content:space-between;gap:8px;margin-top:auto;border-top:1px solid #d5c9b7;padding-top:12px;font-size:.625rem;color:#675c4e}
.reading-end{justify-content:center}.reading-end .btn{font-size:.8125rem;padding:12px}
.reading-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;margin-top:28px;font-size:.75rem;color:#50483d}
.reading-pagination{display:flex;gap:4px}.reading-pagination button{min-width:40px;min-height:44px;background:none;border:0;border-bottom:2px solid transparent;padding:8px;cursor:pointer;font-size:.8125rem}
.reading-pagination button[aria-current=true]{border-color:var(--red);color:var(--red)}
.reading-skip{color:#50483d;text-underline-offset:4px}
.hero--book.scroll-book{height:calc(100svh + 1800px)}
.scroll-book .hero__grid{position:sticky;top:var(--header-h)}
/* A static, readable book remains available without JavaScript. */
.hero--book:not(.scroll-book) .reading-book{display:block}.hero--book:not(.scroll-book) .reading-left{display:none}.hero--book:not(.scroll-book) .reading-right{display:grid;gap:16px;box-shadow:none}.hero--book:not(.scroll-book) .reading-leaf,.hero--book:not(.scroll-book) .leaf-front,.hero--book:not(.scroll-book) .reading-end{position:relative;transform:none!important}.hero--book:not(.scroll-book) .leaf-back{display:none}.hero--book:not(.scroll-book) .reading-controls{display:none}
@media(min-width:901px) and (max-height:760px){.hero--book .hero__grid{padding-block:24px}.reading-book{min-height:420px}.reading-stage{padding-block:8px}.reading-label{margin-bottom:16px}.reading-controls{margin-top:16px}.hero--book .hero__copy h1{font-size:clamp(2.6rem,4.5vw,4.5rem)}}
@media(max-width:1150px){.nav,.hdr-cta{display:none}.burger{display:block;margin-left:auto}.hdr{justify-content:space-between}}
@media(max-width:900px){
 .split,.split--rev,.split--even,.testimonials-layout{grid-template-columns:1fr}
 .hero--book .hero__grid{display:block;padding-block:36px 0;min-height:0;position:static}
 .hero--book .hero__copy{max-width:620px;margin:0 auto;padding-bottom:20px}
 .hero--book .hero__copy h1{font-size:clamp(2.6rem,7.5vw,4rem)}
 .hero--book .hero__copy .btn-row{gap:12px}.hero--book .hero__copy .btn{font-size:.8125rem;padding:14px 18px}
 .hero--book.scroll-book{height:auto}.scroll-book .book-display{height:calc(100svh + 1500px)}
 .scroll-book .reading-stage{position:sticky;top:calc(var(--header-h) + 12px);padding:20px 0 32px}
 .reading-book{min-height:440px;max-width:640px;margin-inline:auto}
 .reading-left h2{font-size:1.9rem}.leaf-front h3,.reading-end h3{font-size:1.7rem}
 .leaf-front,.leaf-back,.reading-end,.reading-left{padding:24px}
 #brand-essentials{gap:16px}#brand-essentials>li{padding:18px}
 .testimonials-layout h2{max-width:20ch}.testimonials-layout .tslider{min-height:300px}
 .lawyer-story{grid-template-columns:1fr;row-gap:18px}.lawyer-story>.eyebrow,.lawyer-story>h2,.lawyer-story>.prose,.lawyer-story>.btn-row{grid-column:1;grid-row:auto}.lawyer-story>.prose{margin-top:0!important}
 .topics--two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
 :root{--header-h:68px}
 .sec{padding-block:56px}.hero--book{padding:0}
 .hero--book .hero__copy .eyebrow{font-size:.625rem;letter-spacing:.1em}.hero--book .hero__copy .lead{font-size:1rem;line-height:1.65}
 .reading-book{grid-template-columns:31% 69%;min-height:440px}
 .reading-left{padding:12px;overflow:hidden}.reading-left .eyebrow{font-size:.5rem;overflow-wrap:normal}.reading-left h2{font-size:1.15rem;line-height:1.35}.reading-left p{font-size:.625rem}.reading-rule{margin-block:18px}
 .leaf-front,.leaf-back,.reading-end{padding:20px 18px}.leaf-front h3,.reading-end h3{font-size:1.5rem}.leaf-front p,.reading-end p{font-size:.875rem;line-height:1.65}.reading-label{font-size:.5625rem;margin-bottom:22px}.reading-number{font-size:1.8rem;margin-bottom:18px}
 .leaf-back{visibility:hidden}.reading-folio{font-size:.55rem}.reading-controls{gap:8px 12px;margin-top:24px}.reading-hint{flex-basis:100%;text-align:center}
 .cred{padding-block:20px}.cred__inner ul{gap:12px 20px}.cred__inner li{font-size:.625rem;letter-spacing:.03em}
 .topics--two{grid-template-columns:1fr}.topic__body{min-height:190px;padding:24px}
 #brand-essentials{display:block;padding-bottom:12px}
 #brand-essentials>li{position:sticky;top:calc(var(--header-h) + 14px);padding:22px;margin-bottom:32px;box-shadow:0 -10px 25px #4037260b;gap:16px}
 #brand-essentials>li:nth-child(2){top:calc(var(--header-h) + 24px)}#brand-essentials>li:nth-child(3){top:calc(var(--header-h) + 34px);margin-bottom:0}
 #brand-essentials .num{min-height:0;font-size:.625rem;margin-bottom:14px}#brand-essentials img{aspect-ratio:16/9;max-height:210px}
 #brand-essentials h3{font-size:1.5rem}#brand-essentials p{font-size:.875rem;line-height:1.55}
 .testimonials-layout h2{font-size:2.5rem;max-width:13ch}.testimonials-layout .tquote{font-size:1.75rem}.testimonials-layout .tmeta{align-items:start}.guide-summary{padding:28px}.guide-summary h3{font-size:2.2rem}
 .mobile-menu .btn-row{display:grid;grid-template-columns:1fr;gap:12px}.mobile-menu .btn{width:100%;min-height:48px;padding:14px}.mobile-menu{overflow-y:auto}
}
/* Keep every mobile section on the same visible grid. Decorative marks and
   reveal offsets can otherwise create the impression that individual blocks
   have different gutters while they are entering the viewport. */
@media(max-width:767px){
 main figure,main .figure,main .timeline-media,main .service-inline-image,
 main .short-version-media,main .search-visual,main .bigger-issue-visual,
 main .office-action-visuals,main .option-guide-media,main .faq-guide-media{
  width:100%;max-width:100%;margin-left:0;margin-right:0;transform:none!important
 }
 .scroll-motion[data-motion-pending]{opacity:1!important;transform:none!important}
 .reg-ghost{display:none!important}
 .rail[style]{grid-template-columns:1fr!important}
}
@media(max-width:600px) and (max-height:730px){.reading-book{min-height:390px}.leaf-front,.leaf-back,.reading-end{padding:15px}.leaf-front h3{font-size:1.3rem;margin-bottom:12px}.leaf-front p{font-size:.8125rem;line-height:1.5}.reading-label{margin-bottom:14px}.reading-number{margin-bottom:12px}.reading-controls{margin-top:18px;gap:6px}.reading-stage{padding-top:8px!important}}
@media(prefers-reduced-motion:reduce){#brand-essentials>li{position:relative;top:auto!important}.reading-leaf{will-change:auto}.scroll-book{height:auto!important}.scroll-book .book-display{height:auto!important}.scroll-book .hero__grid,.scroll-book .reading-stage{position:static!important}}
#after-book{scroll-margin-top:var(--header-h)}
.guide-newsletter-section .pricepanel{height:100%}
/* Text remains readable throughout navigation; photography carries the reveals. */
.scroll-motion:is(h1,h2,h3,p,blockquote,.eyebrow,form,.btn-row,.tlink)[data-motion-pending]{opacity:1!important;transform:none!important}
@media(max-width:600px){.sticky-cta .btn{font-size:.8125rem}.reading-stage{isolation:isolate}}
.sec[id]{scroll-margin-top:var(--header-h)}
.wrap[style*="max-width"]{max-width:var(--maxw)!important}
/* Keep long-form reading comfortable inside the same page margins. */
.article .prose{max-width:72ch}
/* The close button must stay above the full-screen navigation panel. */
.site-header{z-index:100}
/* Desktop site map: one focused panel replaces a long row of small links. */
@media(min-width:1151px){
 .hdr{position:relative}
 .nav{position:static;align-items:stretch}
 .nav-home,.nav-link,.nav-mega>summary{display:flex;align-items:center;min-height:42px}
 .nav-home,.nav-link{white-space:nowrap}
 .nav-mega{position:static}
 .nav-mega>summary{position:relative;list-style:none;cursor:pointer;gap:8px;white-space:nowrap;padding:6px 0;font-size:.8125rem;font-weight:500;letter-spacing:.015em;color:var(--ink);transition:color 180ms ease}
 .nav-mega>summary:hover,.nav-mega[open]>summary,.nav-mega.is-current>summary{color:var(--red)}
 .nav-mega>summary:focus-visible{outline:2px solid var(--red);outline-offset:4px}
 .nav-mega>summary::-webkit-details-marker{display:none}
 .nav-chevron{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform 180ms ease}
 .nav-mega[open] .nav-chevron{transform:translateY(1px) rotate(-135deg)}
 .mega-panel{position:absolute;z-index:20;top:calc(100% + 1px);right:0;width:min(900px,calc(100vw - 40px));display:grid;grid-template-columns:1.15fr 1fr 1fr .95fr;gap:0;background:#fff;color:var(--ink);border:1px solid var(--silver-hair);box-shadow:0 22px 50px -28px rgba(11,11,11,.45);padding:28px}
 .mega-panel::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:24px}
 .mega-intro{padding:4px 28px 4px 4px;border-right:1px solid var(--silver-hair)}
 .mega-intro .eyebrow,.mega-column h3{display:block;line-height:1.4;font-family:var(--sans);font-weight:600;font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;color:var(--stone);margin:0 0 14px}
 .mega-intro h2{font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.15;letter-spacing:-.025em;margin:0 0 12px}
 .mega-intro p{font-size:.875rem;line-height:1.55;color:var(--stone);margin:0;max-width:24ch}
 .mega-column{padding:4px 24px;border-right:1px solid var(--silver-hair)}
 .mega-column a{display:flex;justify-content:space-between;gap:12px;padding:9px 0;color:var(--ink);font-size:.875rem;line-height:1.35;text-decoration:none;border-bottom:1px solid transparent}
 .mega-panel a::after{display:none}
 .mega-column a:hover,.mega-column a:focus-visible{color:var(--red);border-bottom-color:var(--red)}
 .mega-column a span,.mega-feature-link span{color:var(--red)}
 .mega-feature{display:flex;flex-direction:column;justify-content:center;padding:8px 4px 8px 24px;background:var(--paper)}
 .mega-feature .eyebrow{font-size:.65rem;letter-spacing:.13em;color:var(--stone);margin-bottom:14px}
 .mega-feature strong{font-family:var(--display);font-size:1.35rem;line-height:1.2;font-weight:400}
 .mega-feature-link{margin-top:24px;font-size:.8125rem;font-weight:600;text-decoration:none}
 .mega-feature-link:hover{text-decoration:underline;text-underline-offset:4px}
}
@media(max-width:1150px){.nav-mega{display:none}}

/* ============================================================================
   Brand layer v2 — the client's Resources mockup (21 Sep 2026) applied site-wide:
   ribbon dividers, red eyebrows, script accents, sign-off, bordered cards.
   Loaded after site/refinement CSS on every page.
   ========================================================================== */

@font-face{
  font-family:"Mrs Saint Delafield";
  src:url("../fonts/mrs-saint-delafield-latin.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
:root{--script:"Mrs Saint Delafield","Snell Roundhand",cursive}

/* ------------------------------------------------------- site-wide accents
   Eyebrows are red on light surfaces (dark panels keep their dimmed tone),
   primary buttons carry the arrow, and article cards get the ink hairline
   border the client liked on the topic cards. */
:root{--c-eyebrow:var(--red)}
.sec--ink,.pricepanel,.ctaband,.site-footer,.cred{--c-eyebrow:var(--on-ink-dim)}
.pricepanel--light{--c-eyebrow:var(--red)}
.eyebrow{color:var(--c-eyebrow)}
main .btn--primary:not(:has(.arw))::after{content:"\2192";display:inline-block;margin-left:.55em;
  transition:transform var(--t-mid) var(--ease-spring)}
main .btn--primary:not(:has(.arw)):hover::after{transform:translateX(4px)}
.card--article{border-color:var(--ink)}

/* ---------------------------------------------------------------- spacing
   The client asked for a longer page with generous space between sections. */
.page-resources .sec--airy{padding-block:clamp(72px,9vw,152px)}

/* ------------------------------------------------------- ribbon divider
   Replaces the literal red/black waves: one fine ink hairline that ends in
   a hand-drawn red loop, set off-centre and alternating sides down the page. */
.ribbon{--rh:clamp(56px,6vw,84px);position:relative;z-index:2;display:flex;align-items:center;
  width:min(100% - 2*var(--gutter),var(--maxw));margin:calc(var(--rh)/-2) auto;height:var(--rh);pointer-events:none}
.ribbon::before{content:"";flex:1 1 auto;height:1px;background:var(--ink);opacity:.85}
.ribbon::after{content:"";flex:0 0 clamp(64px,28%,380px)}
.ribbon svg{flex:0 0 auto;width:clamp(150px,17vw,240px);height:auto;overflow:visible;margin-left:-1px}
.ribbon--r{flex-direction:row-reverse}
.ribbon--r svg{transform:scaleX(-1);margin-left:0;margin-right:-1px}
.ribbon .rb-ink{fill:none;stroke:var(--ink);stroke-width:1;stroke-linecap:round}
.ribbon .rb-red{fill:none;stroke:var(--red);stroke-width:1.9;stroke-linecap:round}
.ribbon .rb-dot{fill:var(--red)}
.js .ribbon .rb-red{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease-reveal) .15s}
.js .ribbon.is-in .rb-red{stroke-dashoffset:0}
.js .ribbon .rb-dot{opacity:0;transition:opacity .4s ease 1.4s}
.js .ribbon.is-in .rb-dot{opacity:1}
@media (prefers-reduced-motion:reduce){
  .js .ribbon .rb-red{stroke-dashoffset:0;transition:none}
  .js .ribbon .rb-dot{opacity:1;transition:none}
}
@media (max-width:640px){.ribbon::after{flex-basis:14%}}

/* ------------------------------------------------------------ script note */
.script-note{font-family:var(--script);font-weight:400;color:var(--ink);
  font-size:clamp(2rem,1.4rem + 2vw,3.1rem);line-height:.95;letter-spacing:0;text-transform:none}
.script-note::after{content:"";display:block;width:64px;height:1.5px;background:var(--red);margin-top:14px}

/* ------------------------------------------------------------------- hero */
.res-hero{position:relative}
.res-hero .figure{position:relative;margin-top:clamp(24px,5vw,72px)}
.res-hero .figure img{aspect-ratio:4/3;object-fit:cover}
.res-hero .script-note{position:absolute;right:0;top:clamp(-128px,-9vw,-76px);
  transform:rotate(-7deg);transform-origin:right bottom;text-align:right}
.res-hero .script-note::after{margin-left:auto}

/* -------------------------------------------------------- featured resource
   Copy left, image right, with an offset ink frame for a softer, less rigid edge. */
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(36px,6vw,104px);align-items:center}
.feature h2{font-size:var(--fs-h2);line-height:1.08;margin:var(--s3) 0}
.feature .lead{max-width:40ch}
.feature .postmeta{margin:var(--s3) 0 var(--s5)}
.feature__media{position:relative;margin:0 clamp(14px,1.6vw,22px) clamp(14px,1.6vw,22px) 0}
.feature__media::before{content:"";position:absolute;inset:clamp(14px,1.6vw,22px) calc(-1*clamp(14px,1.6vw,22px)) calc(-1*clamp(14px,1.6vw,22px)) clamp(14px,1.6vw,22px);
  border:1px solid var(--ink);pointer-events:none}
.feature__media picture{position:relative;display:block;overflow:hidden}
.feature__media img{display:block;width:100%;aspect-ratio:5/4;object-fit:cover;transition:transform .9s var(--ease-out)}
.feature__media:hover img{transform:scale(1.03)}
.btn .arw{display:inline-block;margin-left:.5em;transition:transform var(--t-mid) var(--ease-spring)}
.btn:hover .arw{transform:translateX(4px)}

/* ------------------------------------------------------ explore by topic */
.topics--three{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,40px);align-items:start;width:100%;max-width:none}
.topic--offset{margin-top:clamp(0px,4vw,56px)}
.topics--three .topic picture{aspect-ratio:4/3}
.topics--three .topic__body{min-height:0;padding:24px 26px 28px}
.topics--three .topic .muted{min-height:3.2em}
.topic .tlink{color:var(--red)}
.topic__count{display:block;font-size:var(--fs-eyebrow);letter-spacing:.13em;text-transform:uppercase;color:var(--stone);margin-bottom:10px}

/* ------------------------------------------- all resources: topic filter */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 clamp(28px,4vw,48px)}
.filters button{font:500 .8125rem/1 var(--sans);letter-spacing:.04em;padding:12px 18px;min-height:44px;
  border:1px solid var(--edge);background:transparent;color:var(--ink);cursor:pointer;border-radius:999px;
  transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out)}
.filters button:hover{border-color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.filters button:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.postlist [hidden]{display:none!important}
.postlist__empty{grid-column:1/-1;color:var(--stone)}

/* ------------------------------------------------------ free download cover
   The lead magnet is the 10-point checklist, so the cover is drawn in HTML
   rather than borrowing the "Before You Name It" guide photo. */
.lm{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,120px);align-items:center}
.lm__stage{position:relative;display:flex;justify-content:center;padding:clamp(24px,4vw,56px) 0}
.lm__cover{position:relative;width:min(78%,360px);aspect-ratio:8.5/11;background:#fff;color:var(--ink);
  padding:clamp(28px,3.4vw,44px) clamp(24px,3vw,38px);display:flex;flex-direction:column;
  transform:rotate(-4deg);box-shadow:0 2px 2px rgba(11,11,11,.05),0 30px 60px -28px rgba(11,11,11,.45);
  border:1px solid var(--silver-hair)}
.lm__cover::before{content:"";position:absolute;inset:0;background:#fff;border:1px solid var(--silver-hair);
  transform:translate(14px,10px) rotate(3deg);z-index:-1;box-shadow:0 24px 50px -30px rgba(11,11,11,.4)}
.lm__title{font-family:var(--display);font-size:clamp(1.45rem,1rem + 1.3vw,2.05rem);line-height:1.12;margin:0}
.lm__rule{width:44px;height:1.5px;background:var(--red);margin:22px 0 14px}
.lm__kicker{font:600 .625rem/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.lm__list{list-style:none;margin:auto 0 0;padding:0;display:grid;gap:9px}
.lm__list li{display:flex;align-items:center;gap:10px;font:400 .6875rem/1.3 var(--sans);color:var(--stone)}
.lm__list li::before{content:"";flex:0 0 11px;height:11px;border:1px solid var(--ink)}
.lm__list li:first-child::before{background:linear-gradient(135deg,transparent 45%,var(--red) 45% 58%,transparent 58%)}
.lm__brand{margin-top:22px;padding-top:14px;border-top:1px solid var(--silver-hair);
  font:600 .625rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase}
.lm h3.lm__sub{font-family:var(--display);font-size:var(--fs-h3);font-weight:400;margin:var(--s2) 0 0}

/* inline form rows (download + list) */
.form-row .formbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto;gap:12px;align-items:end}
.form-row .formbody .field{margin:0}
.form-row .formbody .formnote{grid-column:1/-1;margin-top:4px}
.form-row .formbody .btn{min-height:52px;white-space:nowrap}
@media (max-width:760px){.form-row .formbody{grid-template-columns:1fr}}

/* ------------------------------------------------------------- email list */
.join{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,7vw,120px);align-items:center}
.join__media{position:relative}
.join__media img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.join__media .script-note{position:absolute;left:calc(-1*clamp(28px,5vw,88px));bottom:clamp(20px,4vw,48px);
  background:var(--white);padding:18px 22px 16px;transform:rotate(-4deg);box-shadow:0 20px 40px -28px rgba(11,11,11,.5)}

/* ---------------------------------------------------------------- sign-off */
.signoff{text-align:center;padding-block:clamp(56px,7vw,112px) clamp(40px,5vw,72px)}
.signoff .rule-red{display:block;width:48px;height:1.5px;background:var(--red);margin:0 auto 18px}
.signoff .eyebrow{display:block;margin-bottom:6px}
.signoff .script-note{font-size:clamp(2.6rem,2rem + 2vw,3.8rem)}
.signoff .script-note::after{display:none}

/* -------------------------------------------------------------- responsive */
@media (max-width:980px){
  .feature,.lm,.join{grid-template-columns:1fr}
  .feature__media{order:-1}
  .topics--three{grid-template-columns:1fr}
  .topic--offset{margin-top:0}
  .res-hero .script-note{position:static;transform:rotate(-4deg);margin:0 0 18px auto;width:max-content}
  .join__media .script-note{left:12px;bottom:12px}
  .lm__stage{order:-1}
}
@media (min-width:600px) and (max-width:980px){
  .topics--three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topic--wide{grid-column:1/-1}
  .topic--wide picture{aspect-ratio:16/7}
}

/* ============================================================== RED HERO
   Home only. Red field with a still-life photo on the right that fades into
   the red, the header sitting transparent on top while the hero is in view.
   Contrast: white on --red is 5.9:1 and on --red-deep 8:1, so every piece of
   hero copy and chrome switches to white/cream; buttons invert to white. */
.hero--red{--hero-red:var(--red);--hero-deep:var(--red-deep);
  background:var(--hero-red);margin-top:calc(-1*var(--header-h) - 1px);padding-top:calc(var(--header-h) + 1px);
  --c-text:#fff;--c-soft:rgba(255,255,255,.9);--c-mute:rgba(255,255,255,.86);--c-eyebrow:#fff}
/* The bg layer spans the whole (tall, scroll-pinned) section; its child is
   sticky, so the photo stays put while the book turns and leaves with the
   section. No flow changes, so the book-reader geometry is untouched. */
.hero--red .hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero--red .hero__bg-pin{position:sticky;top:0;height:100svh;overflow:hidden}
.hero--red .hero__bg img{position:absolute;inset:0 0 0 auto;width:62%;height:100%;object-fit:cover;object-position:center;z-index:0}
/* the veil must sit above the photo (z-index), otherwise it paints underneath */
.hero--red .hero__bg-pin::after{content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,var(--hero-red) 0%,var(--hero-red) 38%,rgba(182,48,43,.9) 50%,rgba(182,48,43,.55) 68%,rgba(182,48,43,.35) 100%),
    linear-gradient(180deg,rgba(182,48,43,.55) 0%,rgba(182,48,43,0) 22%,rgba(182,48,43,0) 70%,rgba(182,48,43,.75) 100%)}
.hero--red .hero__grid{position:relative;z-index:1;top:0}
@media (min-width:901px){.hero--red.scroll-book .hero__grid{position:sticky;top:var(--header-h)}}

.hero--red .hero__copy .eyebrow{color:#fff;opacity:.92}
.hero--red .hero__copy h1{color:#fff}
.hero--red .hero__copy .mark::after{background:#fff}
.hero--red .hero__copy .lead{color:rgba(255,255,255,.92)}
.hero--red .hero__copy .btn--primary{background:#fff;border-color:#fff;color:var(--red-deep)}
.hero--red .hero__copy .btn--primary:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.hero--red .hero__copy .btn--outline{border-color:#fff;color:#fff}
.hero--red .hero__copy .btn--outline:hover{background:#fff;color:var(--red-deep)}
.hero--red .btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hero--red .book-display{filter:drop-shadow(0 40px 60px rgba(60,0,6,.45))}
.hero--red .reading-controls{color:#fff;text-shadow:0 1px 10px rgba(90,0,8,.55)}
.hero--red .reading-hint{color:rgba(255,255,255,.88)}
.hero--red .reading-pagination button{color:rgba(255,255,255,.8)}
.hero--red .reading-pagination button[aria-current=true]{color:#fff;border-color:#fff}
.hero--red .reading-pagination button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hero--red .reading-skip{color:#fff}


/* transparent header while it floats over the red hero */
.site-header.is-over-hero{background:transparent;border-bottom-color:rgba(255,255,255,.18);box-shadow:none}
.site-header.is-over-hero.is-stuck{background:rgba(182,48,43,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.site-header.is-over-hero .brand img{filter:brightness(0) invert(1)}
/* top-level items only: the mega panel keeps its own white surface and ink links */
.site-header.is-over-hero .nav>:is(.nav-home,.nav-link),.site-header.is-over-hero .nav-mega>summary{color:#fff}
.site-header.is-over-hero .nav>:is(.nav-home,.nav-link)::after{background:#fff}
.site-header.is-over-hero .nav-mega>summary:hover,.site-header.is-over-hero .nav-mega[open]>summary,.site-header.is-over-hero .nav-mega.is-current>summary{color:#fff;opacity:.85}
.site-header.is-over-hero .hdr-cta .btn--outline{border-color:#fff;color:#fff}
.site-header.is-over-hero .hdr-cta .btn--outline:hover{background:#fff;color:var(--red-deep)}
.site-header.is-over-hero .hdr-cta .btn--primary{background:#fff;border-color:#fff;color:var(--red-deep)}
.site-header.is-over-hero .hdr-cta .btn--primary:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.site-header.is-over-hero .burger span{background:#fff}
.site-header.is-over-hero :is(.hdr-cta a,.burger,.brand,.nav-home,.nav-link,.nav-mega>summary):focus-visible{outline-color:#fff}

@media (max-width:900px){
  .hero--red .hero__bg img{width:100%;opacity:.55}
  .hero--red .hero__bg-pin::after{background:linear-gradient(180deg,var(--hero-red) 0%,rgba(182,48,43,.92) 45%,rgba(182,48,43,.88) 100%)}
}
@media print{.hero--red{background:#fff;margin-top:0}.hero--red .hero__bg{display:none}}

/* ------------------------------------------------------- contrast fixes
   Found by the site-wide audit (25 Sep): three small labels below AA. */
.ml-badge{color:var(--c-mute);border-color:var(--c-line)}        /* 2.4:1 → 5.4:1 light, 7.9:1 dark */
.tm-arrow i{color:var(--stone)}                                  /* 2.4:1 → 5.4:1 */
.embed__tag{color:#B6302B}                                       /* 3.1:1 → 6.4:1 on #151515 */


.filter-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}