/* ============================================================ tokens */
:root{
  /* ---- brand red ---------------------------------------------------
     --red is the logo value, unaltered. The other two are the same hue
     (358.4deg) and saturation (78.9%) at lower value, so the family reads as
     one colour while the contrast maths works:
       --red      on cream  3.62:1  graphics only - marks, rules, fills, display type
       --red-text on cream  5.07:1  AA - small caps, links, and fills under cream text
       --red-deep + cream   9.32:1  AAA - footer, bands, row inversion            */
  /* One red, the logo value, everywhere the burgundy used to be.
     var(--red) is 3.62:1 on cream, so it clears the 3:1 large-text/graphics bar
     but not the 4.5:1 bar for small text. Text sitting ON the red is pushed to
     pure white and the muted tier is retired, which is as far as contrast can
     be taken without altering the colour itself.                            */
  /* ---- brand red -----------------------------------------------------
     One source of truth. --red is the only value you need to change; the
     four role tokens below all point at it, so a single edit repaints the
     logo accents, buttons, headings, rules, decorative line work and the
     solid band.
       #C41E3A on cream   5.15:1   AA for text of any size
       white on #C41E3A   5.84:1   AA for the buttons and the red band
     --red-hover is the lighter state for hover and active.             */
  --red:#C41E3A;
  --red-hover:#E0354D;

  /* The logo keeps the red of the supplied artwork. The mark is a raster file
     at #ED3237, so the wordmark typeset beside it has to match or the header
     shows two different reds side by side. This is the only place it is used;
     everything else on the site is --red. */
  --logo-red:#ED3237;

  /* role aliases - every one of these resolves to the two above */
  --red-text:var(--red);
  --red-deep:var(--red);
  --red-line:var(--red);
  --red-bright:var(--red-hover);
  --cream:#FFFFFF;
  --cream-2:#ECECEB;
  --cream-3:#F5F5F4;
  --ink:#1B1917;
  --ink-soft:#5C544E;
  --rule:#DCD3C8;
  --on-dark:#FFFFFF;
  --on-dark-soft:#FFFFFF;
  --on-dark-rule:rgba(255,255,255,.34);

  --serif:"Playfair Display","Didot","Bodoni MT",Garamond,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --shell:1280px;
  --gutter:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ============================================================ reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit}
::selection{background:rgba(196,30,58,.18)}

/* paper grain, applied once over the whole page */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27200%27%20height%3D%27200%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%270.32%27%2F%3E%3C%2Fsvg%3E");
  opacity:.5;mix-blend-mode:multiply;
}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter);position:relative}
.eyebrow{
  font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red-text);
}
.rule{height:1px;background:var(--rule);border:0;margin:0}
.flag{display:inline-block;width:14px;height:9.5px;vertical-align:-1px;margin:0 1px;border-radius:1px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}

/* ============================================================ header */
.site-header{
  position:sticky;top:0;z-index:60;
  background:var(--cream);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease);
}
.site-header.is-stuck{border-bottom-color:var(--rule)}
.header-inner{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:32px;
  height:84px;
}
.header-nav{margin-left:auto;display:flex;align-items:center;gap:38px}
:where(a,button,input,textarea):focus-visible{
  outline:2px solid var(--red);outline-offset:3px;border-radius:1px;
}
.header-nav a{
  position:relative;font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);padding:6px 0;
  transition:color .3s var(--ease);
}
.header-nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--red);transform:scaleX(0);transform-origin:var(--fo,0%);
  transition:transform .45s var(--ease);
}
.header-nav a:hover{color:var(--red-hover)}
.header-nav a:hover::after{transform:scaleX(1)}
.nav-item{position:relative}
.nav-caret{display:none}
.nav-submenu{
  position:absolute;top:100%;left:0;margin-top:14px;
  min-width:264px;padding:8px 0;
  background:var(--cream);border:1px solid var(--rule);border-radius:2px;
  box-shadow:0 14px 34px -18px rgba(27,25,23,.4);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s linear .25s;
}
.nav-item:hover .nav-submenu,.nav-item:focus-within .nav-submenu{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s linear 0s;
}
.nav-submenu a{
  display:flex;align-items:center;gap:12px;width:auto;padding:10px 20px;
  font-family:var(--serif);font-size:13px;font-weight:400;letter-spacing:.004em;
  text-transform:none;color:var(--ink);white-space:nowrap;
  border-bottom:1px solid var(--red);
}
.nav-submenu a:last-child{border-bottom:0}
.nav-submenu a svg{width:17px;height:17px;flex:none;color:var(--red)}
.nav-submenu a::after{display:none}
.nav-submenu a:hover{background:var(--cream-3);color:var(--red-hover)}

/* logo lockup */
.logo{display:flex;align-items:center;gap:12px}
.logo-emblem{height:46px;width:auto;flex:none;
  transition:transform .8s var(--ease)}
.logo:hover .logo-emblem{transform:scale(1.045)}
.logo-type{display:flex;flex-direction:column;line-height:1}
.logo-name{
  font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:.12em;
  color:var(--logo-red);
}
.logo-sub{
  font-size:7.5px;font-weight:500;letter-spacing:.34em;color:var(--ink-soft);
  margin-top:4px;
}

.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:13px 22px;border-radius:1px;border:1px solid var(--red);
  color:var(--red-text);background-color:transparent;cursor:pointer;
  background-image:linear-gradient(var(--red-hover),var(--red-hover));
  background-repeat:no-repeat;background-position:var(--fo,0%) 0;background-size:0% 100%;
  transition:background-size .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.btn:hover{background-size:100% 100%;border-color:var(--red-hover);color:#fff}
.btn-solid{background-color:var(--red-text);border-color:var(--red-text);color:#fff;padding:17px 30px}
.btn-solid:hover{border-color:var(--red-hover)}
.btn .arw{transition:transform .45s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}
@media (hover:hover){
  .btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(196,30,58,.5)}
}

.nav-toggle{
  display:none;place-items:center;margin-left:auto;margin-right:-10px;
  width:44px;height:44px;background:none;border:0;padding:0;
  color:var(--ink);cursor:pointer;line-height:0;
  -webkit-tap-highlight-color:transparent;
}
.nav-icon line{
  transform-box:fill-box;transform-origin:center;
  transition:transform .4s var(--ease),opacity .25s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-icon .l1{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-icon .l2{opacity:0}
.nav-toggle[aria-expanded="true"] .nav-icon .l3{transform:translateY(-6px) rotate(-45deg)}

/* dims the page behind the open menu and closes it on tap */
.nav-scrim{
  position:fixed;inset:0;z-index:1;display:none;
  background:rgba(27,25,23,.32);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
}
.nav-scrim.on{opacity:1;pointer-events:auto}
body.nav-open{position:fixed;width:100%;overflow:hidden}

/* ============================================================ hero */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero-art{
  position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
}
.hero-art .ribbon{
  position:absolute;color:var(--red-line);
  right:-14%;top:-6%;width:min(1180px,105%);height:auto;opacity:.85;
}
.hero-art .radar{
  position:absolute;color:var(--red-line);
  right:6%;top:12%;width:min(560px,60%);height:auto;opacity:.75;
}
.hero-art .web{
  position:absolute;color:var(--red-line);
  right:-4%;top:0;width:min(900px,80%);height:auto;opacity:.5;
}
.hero-art .ribbon,
.hero-art .web{
  -webkit-mask-image:linear-gradient(101deg,transparent 4%,rgba(0,0,0,.28) 27%,#000 54%);
  mask-image:linear-gradient(101deg,transparent 4%,rgba(0,0,0,.28) 27%,#000 54%);
}
.hero-inner{
  display:block;
  min-height:min(690px,80vh);
  padding-block:clamp(60px,8vw,108px) clamp(64px,8vw,116px);
}
.hero-copy{max-width:min(800px,100%)}
.hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.55rem,5.35vw,4.3rem);line-height:1.04;letter-spacing:-.021em;
}
.hero h1 .line{display:block}
.hero h1 .accent{color:var(--red)}
.hero-lede{
  margin-top:30px;max-width:47ch;font-size:clamp(15px,1.15vw,17px);
  font-weight:300;line-height:1.72;color:var(--ink-soft);
}
.hero-cta{margin-top:42px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.hero-meta{
  margin-top:0;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);
}
.hero-hairline{
  width:72px;height:1px;background:var(--red);margin:34px 0 0;
  transform-origin:left;
}
.crosshair{
  position:absolute;top:clamp(24px,5vw,60px);right:var(--gutter);
  width:26px;height:26px;color:var(--red-line);opacity:.7;
}

/* ======================================================= practice areas */
.practice{
  position:relative;background:var(--red-deep);color:var(--on-dark);
  clip-path:polygon(0 clamp(46px,7vw,104px),100% 0,100% 100%,0 100%);
  margin-top:calc(-1 * clamp(46px,7vw,104px));
  padding:calc(clamp(46px,7vw,104px) + clamp(64px,8vw,104px)) 0 clamp(72px,9vw,112px);
  overflow:hidden;
  filter:drop-shadow(0 -2px 0 rgba(196,64,74,.9));
}
.practice::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 78% 0%,rgba(196,64,74,.30),transparent 62%),
    radial-gradient(90% 70% at 8% 100%,rgba(0,0,0,.34),transparent 60%);
}
.practice-art{
  position:absolute;right:-6%;bottom:-24%;width:min(880px,90%);
  color:var(--on-dark);opacity:.13;pointer-events:none;
}
.practice-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  flex-wrap:wrap;position:relative;
}
.practice-head .eyebrow{color:var(--on-dark-soft)}
.practice-head h2{
  font-family:var(--serif);font-weight:400;letter-spacing:-.015em;
  font-size:clamp(1.85rem,3.4vw,2.7rem);line-height:1.12;margin-top:14px;
}
.practice-rule{margin:38px 0 0;height:1px;background:var(--on-dark-rule);border:0;position:relative}
.practice-grid{
  position:relative;display:grid;gap:0;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:0;
}
.practice-item{
  padding:44px clamp(18px,2.4vw,34px) 8px;
  border-left:1px solid var(--on-dark-rule);
}
.practice-item:first-child{border-left:0;padding-left:0}
.practice-item:last-child{padding-right:0}
.practice-icon{width:52px;height:52px;color:var(--on-dark);opacity:.92}
.practice-item h3{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.2rem,1.7vw,1.5rem);
  line-height:1.16;margin-top:26px;letter-spacing:.005em;
}
.practice-item p{
  margin-top:14px;font-size:13.5px;font-weight:300;line-height:1.7;
  color:var(--on-dark-soft);max-width:30ch;
}
.practice-item p span{display:block}

/* ============================================================ teasers */
.teaser{padding:clamp(76px,10vw,132px) 0;position:relative;overflow:hidden}
.teaser-alt{background:var(--cream-3);border-block:1px solid var(--rule)}
.teaser-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,6vw,88px);align-items:center;
}
.teaser h2{
  font-family:var(--serif);font-weight:400;letter-spacing:-.018em;
  font-size:clamp(2rem,4vw,3.15rem);line-height:1.1;margin-top:20px;
}
.teaser h2 .accent{color:var(--red);display:block}
.teaser p{
  margin-top:24px;max-width:46ch;font-size:15.5px;font-weight:300;
  line-height:1.75;color:var(--ink-soft);
}
.link-arrow{
  display:inline-flex;align-items:center;gap:11px;margin-top:32px;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red-text);position:relative;padding-bottom:6px;
}
.link-arrow::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--red-text);transform:scaleX(.3);transform-origin:var(--fo,0%);
  transition:transform .5s var(--ease);
}
.link-arrow:hover::after{transform:scaleX(1)}
.link-arrow .arw{transition:transform .45s var(--ease)}
.link-arrow:hover .arw{transform:translateX(5px)}

.teaser-art{color:var(--red-line);opacity:.9}
.teaser-art.stack{position:relative;min-height:280px}
.teaser-art.stack .teaser-logo-mark{position:absolute;right:14%;top:50%;transform:translateY(-50%);width:min(300px,60%);height:auto}
.teaser-art.stack .c1{position:absolute;right:2%;top:50%;transform:translateY(-50%);width:min(460px,88%)}
.teaser-art.stack .c2{position:absolute;right:2%;top:50%;transform:translateY(-50%);width:min(460px,88%);opacity:.55}

/* ============================================================ footer */
.site-footer{
  background:var(--red-deep);color:var(--on-dark);
  padding:clamp(56px,7vw,84px) 0 34px;position:relative;overflow:hidden;
}
.site-footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 120% at 84% 0%,rgba(196,64,74,.22),transparent 60%);
}
.footer-top{
  position:relative;display:grid;gap:clamp(28px,3vw,44px);
  grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr));
  align-items:start;
}
.footer-brand .logo-name{color:var(--on-dark)}
.footer-brand .logo-sub{color:var(--on-dark-soft)}
.footer-tag{
  margin-top:22px;font-size:10.5px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--on-dark-soft);
}
.footer-social{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:22px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--on-dark-rule);color:var(--on-dark-soft);
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.footer-social svg{width:16px;height:16px}
.footer-social:hover{color:var(--on-dark);border-color:var(--on-dark-soft)}
.footer-col h4{
  margin:0;font-size:10.5px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--on-dark-soft);
}
.footer-col p{
  margin-top:14px;font-family:var(--serif);font-size:clamp(1.02rem,1.5vw,1.24rem);
  line-height:1.45;color:var(--on-dark);
}
.footer-col p + p{margin-top:12px}
.footer-addr{
  font-family:var(--sans)!important;font-size:14px!important;font-weight:300;
  line-height:1.65;color:var(--on-dark-soft)!important;
}
.footer-link{
  position:relative;color:var(--on-dark);
  background-image:linear-gradient(var(--on-dark-soft),var(--on-dark-soft));
  background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:color .4s var(--ease),background-size .4s var(--ease);
}
.footer-link:hover{color:#fff;background-size:100% 1px}
.footer-legal{display:flex;align-items:center;gap:12px}
@media (max-width:900px){
  /* 11px caps are a 17px tap target; padding buys the height back without
     moving the type */
  .footer-legal{margin-block:-14px;gap:16px}
  .footer-legal a{padding-block:14px}
}
.footer-legal a{
  color:var(--on-dark-soft);transition:color .35s var(--ease);
}
.footer-legal a:hover{color:var(--on-dark)}
.footer-bottom{
  position:relative;margin-top:clamp(44px,6vw,72px);padding-top:26px;
  border-top:1px solid var(--on-dark-rule);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-soft);
}

/* ============================================================ motion */
[data-reveal-armed] .reveal{opacity:0;transform:translateY(22px);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}
[data-reveal-armed] .grow{transform:scaleX(0);transition:transform 1.1s var(--ease) .2s}
.grow.in{transform:scaleX(1)}
[data-reveal-armed] .art-fade{opacity:0;transition:opacity 1.8s var(--ease)}
.art-fade.in{opacity:1}
[data-reveal-armed] .draw{stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 2.4s var(--ease) .25s}
.draw.in{stroke-dashoffset:0}

/* the page-hero's title and lede are already on screen at first paint;
   skip the slower scroll-triggered pace here so the heading is never left
   blank while the page settles */
[data-reveal-armed] .page-hero .hero-inner .reveal,
[data-reveal-armed] .page-hero .hero-inner .grow{opacity:1;transform:none;transition:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.grow,.art-fade,.draw{transition:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
}

/* ============================================================ responsive */
@media (max-width:1080px){
  .hero-inner{min-height:0}
  .hero-art .ribbon,.hero-art .web{-webkit-mask-image:none;mask-image:none}
  .hero-art .ribbon{right:-30%;top:auto;bottom:-8%;width:150%;opacity:.7}
  .hero-art .radar{right:-14%;top:6%;width:78%;opacity:.55}
  .hero-art .web{opacity:.34}
  .practice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .practice-item{padding:40px clamp(18px,3vw,32px) 8px}
  .practice-item:nth-child(3){border-left:0;padding-left:0}
  .practice-item:nth-child(2){padding-right:0}
  .teaser-grid{grid-template-columns:1fr}
  .teaser-art.stack{min-height:220px;order:2}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-legal{order:3;width:100%}
}
/* the horizontal nav stops fitting below ~900px, not 760px */
@media (max-width:900px){
  .header-nav{
    position:fixed;top:84px;left:0;right:0;bottom:auto;
    z-index:2;background:var(--cream);
    flex-direction:column;align-items:flex-start;gap:0;
    padding:8px var(--gutter) 30px;border-bottom:1px solid var(--rule);
    max-height:calc(100dvh - 84px);overflow-y:auto;
    transform:translateY(-14px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .35s var(--ease),transform .35s var(--ease),
               visibility 0s linear .35s;
  }
  .header-nav.open{
    opacity:1;transform:none;visibility:visible;pointer-events:auto;
    transition:opacity .35s var(--ease),transform .35s var(--ease),
               visibility 0s linear 0s;
  }
  .header-nav a{width:100%;padding:17px 0;border-bottom:1px solid var(--rule);font-size:12px}
  .nav-toggle{display:inline-grid}
  .nav-scrim{display:block}
  .header-nav a::after{display:none}
  .nav-item{position:relative;width:100%}
  .nav-item .nav-link{padding-right:44px}
  .nav-caret{
    display:inline-grid;place-items:center;
    position:absolute;top:0;bottom:0;right:0;width:44px;
    background:none;border:0;padding:0;color:var(--ink);cursor:pointer;
  }
  .nav-caret svg{width:11px;height:auto;transition:transform .3s var(--ease)}
  .nav-caret[aria-expanded="true"] svg{transform:rotate(180deg)}
  .nav-submenu{
    position:static;opacity:1;visibility:hidden;transform:none;
    border:0;box-shadow:none;padding:0;margin-top:0;min-width:0;
    max-height:0;overflow:hidden;background:var(--cream-3);
    transition:max-height .35s var(--ease),visibility 0s linear .35s;
  }
  .nav-submenu.open{
    max-height:280px;visibility:visible;
    transition:max-height .35s var(--ease),visibility 0s linear 0s;
  }
  .nav-submenu a{
    display:flex;align-items:center;gap:12px;width:100%;padding:14px 0 14px 20px;
    border-bottom:1px solid var(--red);font-size:11.5px;
  }
  .nav-submenu a svg{width:16px;height:16px;flex:none;color:var(--red)}
  .nav-submenu a:last-child{border-bottom:0}
}
@media (max-width:760px){
  .logo-emblem{height:40px;width:auto}
  .logo-name{font-size:19px}
  .crosshair{display:none}
  .practice-grid{grid-template-columns:1fr}
  .practice-item{border-left:0;padding:36px 0 8px;border-top:1px solid var(--on-dark-rule)}
  .practice-item:first-child{border-top:0}
  .practice-item p{max-width:38ch}
  .footer-top{grid-template-columns:1fr;gap:32px}
  .footer-bottom{flex-direction:column;gap:12px}
  .hero-cta{gap:18px}
}

/* ============================================ shared interior-page shell */
/* used by every page other than the homepage: the shorter hero, and the
   closing call to action that ends each one */

.page-hero .hero-inner{
  min-height:0;
  padding-block:clamp(64px,8vw,112px) clamp(56px,7vw,96px);
}
.page-hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.15rem,4.55vw,3.65rem);line-height:1.07;letter-spacing:-.019em;
}
.page-hero .hero-art .ribbon{right:-16%;top:-34%;width:min(1120px,102%);opacity:.8}
.page-hero .hero-art .radar{right:1%;top:-46%;width:min(520px,54%);opacity:.6}
.page-hero .hero-copy{max-width:min(760px,100%)}
.page-eyebrow{margin-bottom:22px}

.closing .teaser-grid{align-items:center}
.closing h2{margin-top:20px}
.closing .btn-solid{margin-top:36px}
.closing-note{
  margin-top:26px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);
}

@media (max-width:1080px){
  .page-hero .hero-art .ribbon{right:-30%;top:auto;bottom:-30%;width:150%;opacity:.6}
  .page-hero .hero-art .radar{right:-12%;top:-30%;width:70%;opacity:.45}
}

/* ================================================================ legal */
.legal{
  padding:clamp(48px,6vw,84px) 0 clamp(72px,9vw,116px);
  border-top:1px solid var(--rule);
}
.legal-wrap{max-width:70ch}
.legal-meta{
  font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);padding-bottom:24px;border-bottom:1px solid var(--rule);
}
.hero-copy > .back-link{margin-bottom:18px;display:inline-flex}
.case-meta{
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  padding-bottom:28px;border-bottom:1px solid var(--rule);
}
.case-logo{max-height:56px;width:auto;max-width:220px;object-fit:contain;flex:none}
.case-meta-text{display:flex;gap:32px;flex-wrap:wrap}
.case-meta-text p{margin:0;font-size:13.5px;font-weight:300;line-height:1.5;color:var(--ink)}
.case-meta-text span{
  display:block;font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:4px;
}
.legal h2{
  font-family:var(--serif);font-weight:400;letter-spacing:-.012em;
  font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.2;
  margin-top:clamp(38px,4.5vw,54px);
}
.legal h3{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red-text);margin-top:30px;
}
.legal p,.legal li{
  font-size:15.5px;font-weight:300;line-height:1.78;color:var(--ink-soft);
}
.legal p{margin-top:16px}
.legal ul{margin-top:16px}
.legal li{
  position:relative;padding:6px 0 6px 24px;
}
.legal li::before{
  content:"";position:absolute;left:2px;top:16px;
  width:6px;height:6px;transform:rotate(45deg);border:1px solid var(--red);
}
.legal a{
  color:var(--red-text);
  background-image:linear-gradient(var(--red-text),var(--red-text));
  background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:color .35s var(--ease),background-size .35s var(--ease);
}
.legal a:hover{color:var(--red-hover);background-size:100% 2px}

/* ═════════════════════════════════════════════════ loading screen ═══ */
/* The loader is display:none until a script in <head> decides this is a
   first visit and sets html[data-pk-loading]. So it can never be left
   covering the site if JavaScript fails, and it never flashes on the
   pages where it is not wanted. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.pk-loader{display:none}
html[data-pk-loading] .pk-loader{display:grid}
html[data-pk-loading]{overflow:hidden}

.pk-loader{
  --pk-red:var(--red);
  --pk-bg:var(--cream);
  --pk-ink:var(--ink);
  --pk-size:clamp(112px,26vw,156px);
  --pk-cycle:3.6s;
  --pk-ease:cubic-bezier(.62,.04,.3,1);
  --pk-sub:rgba(27,25,23,.62);
  position:fixed;inset:0;z-index:9999;
  place-items:center;background:var(--pk-bg);
  clip-path:circle(150% at 50% 50%);
  transition:clip-path .85s var(--pk-ease),visibility 0s linear .85s;
}
.pk-loader-bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
}
.pk-loader::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:rgba(10,9,8,.62);
}
/* The curtain closes the same way it opened - an aperture centred on the
   logo, not a flat cross-fade - so the exit reads as one continuous motion
   with the ring sweep above rather than a separate effect bolted on. */
.pk-loader.is-done{clip-path:circle(0% at 50% 50%);visibility:hidden;pointer-events:none}
html[data-pk-first] .pk-loader{--pk-cycle:7.2s}   /* first-ever visit: same single loop, played at half speed */
.pk-loader.pk--dark{--pk-bg:#141210;--pk-ink:#F6F0E9;--pk-sub:rgba(246,240,233,.62)}
.pk-mark--dark{display:none}
.pk--dark .pk-mark--light{display:none}
.pk--dark .pk-mark--dark{display:block}

.pk-stage{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(20px,4vw,30px);
  animation:pk-stage var(--pk-cycle) var(--pk-ease) infinite;
  will-change:opacity,transform;
}
.pk-svg{display:block;width:calc(var(--pk-size)*260/180);height:calc(var(--pk-size)*260/180);overflow:visible}
/* a circle of radius R/2 stroked at width R covers the whole disc of radius R,
   so drawing that stroke sweeps a wedge out from the centre */
.pk-sweep{stroke-dashoffset:1.06;animation:pk-sweep var(--pk-cycle) var(--pk-ease) infinite;will-change:stroke-dashoffset}
.pk-ring{fill:none;stroke-width:1}
.pk-ring--track{stroke:var(--pk-ink);stroke-opacity:.09}
.pk-ring--live{stroke:var(--pk-red);stroke-opacity:.55;stroke-linecap:round;
  stroke-dashoffset:1.06;animation:pk-ring var(--pk-cycle) var(--pk-ease) infinite;will-change:stroke-dashoffset}
.pk-word{display:flex;flex-direction:column;align-items:center;gap:calc(var(--pk-size)*.055);
  opacity:0;transform:translateY(9px);
  animation:pk-word var(--pk-cycle) var(--pk-ease) infinite;will-change:opacity,transform}
.pk-word__name{font-family:var(--serif);font-size:calc(var(--pk-size)*.215);font-weight:600;
  letter-spacing:.14em;line-height:1;color:var(--logo-red);text-indent:.14em}
.pk-word__sub{font-family:var(--sans);font-size:calc(var(--pk-size)*.067);font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;line-height:1;color:var(--pk-sub);text-indent:.32em}

@keyframes pk-sweep{0%{stroke-dashoffset:1.06}42%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes pk-ring {0%{stroke-dashoffset:1.06}42%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes pk-word{0%,32%{opacity:0;transform:translateY(9px)}54%{opacity:1;transform:none}100%{opacity:1;transform:none}}
@keyframes pk-stage{0%{opacity:0;transform:scale(.972)}7%{opacity:1;transform:scale(.978)}
  48%{opacity:1;transform:scale(1)}87%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.012)}}

@media (prefers-reduced-motion:reduce){
  .pk-loader{transition:none}
  .pk-stage,.pk-word,.pk-sweep,.pk-ring--live{animation:none!important}
  .pk-sweep{stroke-dashoffset:0}
  .pk-ring--live{stroke-dashoffset:0}
  .pk-word{opacity:1;transform:none}
  .pk-stage{opacity:1;transform:none}
}

/* held for a beat before the curtain opens - snaps the breathing loop to
   its fully-visible frame (same settled values as reduced-motion above)
   rather than letting the exit land mid-fade at a random point in the
   loop, so the mark and the video behind it are both clearly in view */
.pk-loader.is-holding .pk-stage,
.pk-loader.is-holding .pk-word,
.pk-loader.is-holding .pk-sweep,
.pk-loader.is-holding .pk-ring--live{animation:none!important}
.pk-loader.is-holding .pk-sweep{stroke-dashoffset:0}
.pk-loader.is-holding .pk-ring--live{stroke-dashoffset:0}
.pk-loader.is-holding .pk-word{opacity:1;transform:none}
.pk-loader.is-holding .pk-stage{opacity:1;transform:none}