/* ============================================================ 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-family:"Plantagenet Cherokee","Plantin Linotype",var(--serif);
  font-weight:300;line-height:1.72;color:var(--ink-soft);
}


.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}



.back-link{
  display:inline-flex;align-items:center;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);position:relative;padding-bottom:2px;
  transition:color .3s var(--ease);
}


.teaser-art.stack{position:relative;min-height:280px}


.back-link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:var(--fo,0%);
  transition:transform .35s var(--ease);
}


.teaser-art.stack .c1{position:absolute;right:2%;top:50%;transform:translateY(-50%);width:min(460px,88%)}


.teaser-art.stack .teaser-logo-mark{position:absolute;right:14%;top:50%;transform:translateY(-50%);width:min(300px,60%);height:auto}


.back-link:hover,.back-link:focus-visible{color:var(--red-text)}


.teaser-art.stack .c2{position:absolute;right:2%;top:50%;transform:translateY(-50%);width:min(460px,88%);opacity:.55}


.back-link:hover::after,.back-link:focus-visible::after{transform:scaleX(1)}



/* ============================================================ footer */
.site-footer{
  background:var(--red-deep);color:var(--on-dark);
  padding:clamp(56px,7vw,84px) 0 34px;position:relative;overflow:hidden;
}




/* ============================================================ 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}


.reveal[data-d="5"]{transition-delay:.45s}


[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%}
}



/* ============================================================ responsive */
@media (max-width:1080px){
  .hero-inner{min-height:0}
  .practice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* 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}
  .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}
}


@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;
}



/* one single bordered panel holds the title/lede/back-link, the cards
   and the photo. left column stacks the text above the cards, which
   run left to right rather than stacking on each other; the photo is
   a right-hand column that runs the full height of that stack. */
.svc-panel{
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(16px,2.4vw,28px);align-items:stretch;
  border:1px solid var(--red);
  padding:clamp(18px,2.2vw,28px);
}


.page-hero .hero-art .ribbon{right:-16%;top:-34%;width:min(1120px,102%);opacity:.8}


.svc-left{display:flex;flex-direction:column;gap:clamp(24px,3vw,36px)}


.page-hero .hero-art .radar{right:1%;top:-46%;width:min(520px,54%);opacity:.6}


.svc-lead__top{display:flex;align-items:center;gap:18px;flex-wrap:wrap}


.page-hero .hero-copy{max-width:min(760px,100%)}


.svc-lead__top .svc-mark{margin-top:0}


.page-eyebrow{margin-bottom:22px}


.svc-lead__top .back-link{margin-bottom:0;margin-left:auto}


.svc-lead .page-eyebrow{margin-top:16px;margin-bottom:10px}


.svc-lead h1{
  font-family:"Plantagenet Cherokee","Plantin Linotype",var(--serif);font-weight:400;
  font-size:clamp(2.15rem,4.55vw,3.65rem);line-height:1.07;letter-spacing:-.019em;
}


.svc-lead .hero-lede{max-width:50ch;margin-top:18px}


.hero-photo-panel{height:100%;min-height:200px;overflow:hidden}


@media (max-width:900px){
  .svc-panel{grid-template-columns:1fr}
  .svc-subs{grid-template-columns:1fr}
  .hero-photo-panel{height:260px}
}



/* keep the whole intro AND the sub-service cards inside one viewport on
   comfortable screen heights, so nothing above the closing CTA needs a
   scroll to be seen */
@media (min-width:901px){
  .intro-combo{display:flex;flex-direction:column;min-height:calc(100vh - 84px)}
  .intro-combo .page-hero{flex:1 0 auto;display:flex;align-items:stretch}
  .intro-combo .page-hero .hero-inner{width:100%;padding-block:clamp(16px,2vw,24px)}
  .intro-combo .svc-panel{width:100%;box-sizing:border-box;padding:clamp(16px,2vw,22px)}

  .intro-combo .svc-lead__top{gap:14px}
  .intro-combo .svc-lead__top .back-link{margin-bottom:0!important}
  .intro-combo .svc-lead .page-eyebrow{margin-top:10px;margin-bottom:8px}
  .intro-combo .svc-lead h1{font-size:clamp(1.6rem,2.6vw,2.15rem);line-height:1.14}
  .intro-combo .svc-lead .hero-hairline{margin-top:12px}
  .intro-combo .svc-lead .hero-lede{margin-top:10px;font-size:13px;line-height:1.5;max-width:52ch}
  .intro-combo .svc-left{gap:clamp(12px,1.6vw,18px)}

  .intro-combo .svc-index{font-size:1.6rem}
  .intro-combo .svc-lead__top .svc-mark{width:30px;height:30px;margin-top:0}
  .intro-combo .svc-subs{gap:clamp(10px,1.4vw,16px)}
  .intro-combo .svc-sub{padding:clamp(14px,1.6vw,18px);gap:10px}
  .intro-combo .svc-sub__n{width:28px;height:28px;font-size:10.5px}
  .intro-combo .svc-sub h3{font-size:clamp(0.85rem,1vw,0.95rem)}
  .intro-combo .svc-sub p{font-size:11.5px;line-height:1.5}
}



.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}
}



/* =================================================== selected experience */
.experience .exp-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;
}


.exp-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(40px,6vw,80px);margin-top:clamp(26px,3vw,40px);
}


.exp-item{
  display:flex;gap:18px;align-items:baseline;
  padding:20px 0;border-top:1px solid var(--on-dark-rule);
  font-size:14.5px;font-weight:300;line-height:1.65;color:var(--on-dark-soft);
}


.exp-item .n{
  flex:none;font-family:var(--serif);font-size:13px;letter-spacing:.1em;
  color:var(--on-dark);opacity:.6;
}


.exp-item em{font-style:normal;color:var(--on-dark)}



/* =========================================================== responsive */
@media (max-width:1080px){
  .exp-grid{grid-template-columns:1fr}
}


@media (max-width:760px){
  .exp-item{font-size:14px;gap:14px}
}



/* ═════════════════════════════════════════════════ 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}



/* ══════════════════════════════ services page: top/bottom split ═════ */
/* the whole area under the header is split into two equal, unscrolled
   halves: hero copy on top, the four practice cards below, joined by
   a structural (not visually ruled) divider, so the cards sit fully in
   view without scrolling on first load. Below 901px the split can't hold
   four cards and hero copy in one screen, so it reverts to normal flow. */
@media (min-width:901px){
  .services-split{
    display:flex;flex-direction:column;
    min-height:calc(100vh - 84px);
  }
  .services-split .split-top,
  .services-split .split-bottom{
    flex:1 0 0;display:flex;align-items:center;
  }
  .services-split .split-top .hero-inner,
  .services-split .split-bottom .shell{width:100%}
  .services-split .split-top .hero-inner{padding-block:clamp(24px,4vw,48px)}
}


.split-divider{height:1px;background:transparent}



/* ══════════════════════════════════════════════ practice cards ═════ */
.cards{padding:clamp(28px,4vw,44px) 0}



.card-grid{
  display:grid;align-items:stretch;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,1.8vw,24px);
}


.card{
  display:flex;flex-direction:column;
  background:#fff;color:inherit;text-decoration:none;cursor:pointer;
  border:1px solid var(--red);
  border-radius:2px;
  padding:clamp(20px,2.2vw,28px);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}


.card__n{
  font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--red-text);
}


/* the titles run to three lines in the narrowest column, so the block is
   given that height and the text sits on its bottom edge - every card's
   artwork and copy then begin on the same line across the row */
.card h3{
  display:flex;align-items:flex-end;
  min-height:calc(2 * 1.2em);
  margin-top:12px;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.08rem,1.35vw,1.28rem);line-height:1.2;
  letter-spacing:.004em;color:var(--ink);
}


.card__art{
  display:grid;place-items:center;
  height:clamp(102px,10vw,126px);
  margin-top:clamp(16px,1.8vw,22px);
  background:var(--cream-3);
  border:1px solid var(--rule);
}


.card__art svg{width:clamp(44px,4.4vw,54px);height:auto;color:var(--red)}


.card__body{
  margin-top:clamp(16px,1.8vw,20px);margin-bottom:clamp(22px,2.4vw,28px);
  font-family:"Plantagenet Cherokee","Plantin Linotype",var(--serif);
  font-size:13.5px;font-weight:300;line-height:1.72;color:var(--ink-soft);
}


.card__go{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 18px;border:1px solid var(--red);border-radius:1px;
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red-text);background:transparent;
  transition:background .45s var(--ease),color .45s var(--ease);
}


.card__go .arw{transition:transform .45s var(--ease)}


@media (hover:hover){
  .card:hover{transform:translateY(-3px);box-shadow:0 14px 34px -22px rgba(27,25,23,.5)}
  .card:hover .card__go{background:var(--red-hover);color:#fff}
  .card:hover .card__go .arw{transform:translateX(4px)}
}


.card:focus-visible .card__go{background:var(--red-hover);color:#fff}



@media (max-width:1080px){
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card h3{min-height:calc(1.2em)}
}


@media (max-width:600px){
  .card-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .card h3{min-height:0}
  .card__art{height:clamp(120px,34vw,160px)}
}



/* ═══════════════════════════════════════════════ the pobek approach ═══ */
.approach{
  padding:clamp(76px,10vw,128px) 0;
  background:var(--cream-3);border-top:1px solid var(--rule);
}


.approach h2{
  font-family:var(--serif);font-weight:400;letter-spacing:-.018em;
  font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.12;margin-top:18px;
}


.approach h2 .accent{color:var(--red)}


.approach-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(34px,5vw,74px);
  margin-top:clamp(38px,4.6vw,58px);
  align-items:start;
}


.approach-copy p{
  font-size:15.5px;font-weight:300;line-height:1.78;color:var(--ink-soft);max-width:46ch;
}


.approach-copy p + p{margin-top:18px}


.approach-list{border-top:1px solid var(--rule)}


.approach-list li{
  position:relative;padding:18px 0 18px 26px;
  border-bottom:1px solid var(--rule);
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1rem,1.35vw,1.14rem);line-height:1.5;color:var(--ink);
}


.approach-list li::before{
  content:"";position:absolute;left:0;top:1.62em;
  width:12px;height:1px;background:var(--red);
}


.approach-close{
  margin-top:clamp(38px,4.6vw,58px);
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.3;
  letter-spacing:-.012em;color:var(--ink);max-width:24ch;
}


@media (max-width:860px){
  .approach-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .approach-close{max-width:none}
}


/* ====================================================== practice areas */
.svc{
  position:relative;overflow:hidden;
  padding:clamp(54px,7vw,94px) 0;
  border-top:1px solid var(--rule);
}


.svc:nth-of-type(even){background:var(--cream-3)}


.svc-grid{
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(16px,2.4vw,28px);align-items:start;
}


.svc-index{
  font-family:var(--serif);font-weight:400;line-height:1;
  font-size:clamp(2.1rem,3.6vw,3.1rem);color:var(--red-text);opacity:.24;
  letter-spacing:.02em;
}


.svc h2{
  font-family:var(--serif);font-weight:400;letter-spacing:-.014em;
  font-size:clamp(1.55rem,2.85vw,2.3rem);line-height:1.14;
  margin-top:18px;max-width:16ch;
}


.svc-mark{
  width:54px;height:54px;color:var(--red);opacity:.45;margin-top:32px;
}



/* ══════════════════════════════════════════ service detail blocks ═══ */
.svc-standfirst{
  margin-top:20px;font-size:15px;font-weight:300;line-height:1.7;
  color:var(--ink-soft);max-width:32ch;
}


.svc-subs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.4vw,20px);
}


.svc-sub{
  display:flex;flex-direction:column;gap:14px;
  min-width:0;min-height:0;
  padding:clamp(20px,2vw,26px);
  background:#fff;
  border:1px solid var(--rule);
  border-radius:2px;
  transition:border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
}


.svc-sub__n{
  display:inline-grid;place-items:center;flex:none;
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--red);
  font-family:var(--serif);font-size:12px;letter-spacing:.04em;
  color:var(--red-text);
}


.svc-sub h3{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.25;
  letter-spacing:.004em;color:var(--ink);
}


.svc-sub p{
  font-size:13.5px;font-weight:300;line-height:1.68;color:var(--ink-soft);
  font-family:"Plantagenet Cherokee","Plantin Linotype",var(--serif);
}


.svc-sub em{font-style:normal;color:var(--ink);font-weight:500}


@media (hover:hover){
  .svc-sub:hover{
    border-color:var(--red-hover);transform:translateY(-3px);
    box-shadow:0 14px 34px -22px rgba(27,25,23,.5);
  }
}