/* ------------------------------------------------------------------
   Hathor Entertainment website.
   Home follows the twelve elements of the Homepage Design Requirements.
   Each Solutions page is a landing page on the same structure.
   Colour, type and shape per MK-242: two reading pairs, dark on ivory
   and ivory on black. Gold is a signal. Rectilinear only.
   ------------------------------------------------------------------ */

:root{
  --img-ip-firm:none;
  --img-ip-impact:none;
  --img-ip-retention:none;
  --img-ip-reviews:none;
  --img-ip-serve:none;
  --img-ip-volunteer:none;
  --img-lp-careers:none;
  --img-lp-cfo:none;
  --img-lp-cta:none;
  --img-lp-medspa:none;
  --img-lp-newsletter:none;
  --img-lp-partners:none;
  --img-lp-planning:none;
  --img-lp-review:none;
  --img-lp-taxprep:none;
  --img-lp-tol:none;
  --ink:#000000;
  --text:#12171A;
  --ivory:#F5F0E8;
  --gold:#B8975A;
  --gold-light:#D4AF6E;
  --silver:#ACA8A3;

  --ground:var(--ivory);
  --body:var(--text);
  --quiet:#5A5750;
  --rule-2:rgba(18,23,26,0.40);
  --signal:var(--gold);

  --img-blog-entertainers:none;
  --img-blog-revenue:none;
  --img-blog-athletes:none;
  --img-blog-medspa:none;
  --hero-image:none;
  --whatwedo-image:none;
  --logo-image:none;
  --img-case-artist:none;
  --img-case-franchise:none;
  --img-case-exec:none;
  --img-case-medspa:none;
  --img-case-physician:none;
  --img-case-owner:none;
  --img-ebmg:none;
  --img-hathor:none;
  --img-rb:none;
--img-dwight:none;
--img-impact:none;
--img-hh:none;
  --img-class:none;
  --img-medspa-hero:none;
  --gutter:clamp(20px,5vw,64px);
  --step:clamp(56px,7vw,96px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:var(--ink); --body:var(--ivory); --quiet:var(--silver);
    --rule-2:rgba(245,240,232,0.38); --signal:var(--gold-light); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:var(--ink); --body:var(--ivory); --quiet:var(--silver);
  --rule-2:rgba(245,240,232,0.38); --signal:var(--gold-light); color-scheme:dark;
}

*{box-sizing:border-box;}
body{
  background:var(--ground); color:var(--body);
  font-family:"DM Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
.wrap{ max-width:1140px; margin:0 auto; padding-inline:var(--gutter); }
section{ padding-block:var(--step); }

.onblack{ background:var(--ink); color:var(--ivory); }
.onblack .quiet{ color:var(--silver); }
.onblack .eyebrow{ color:var(--gold-light); }
.onblack .btn,.ctaband .btn,.quotepanel .btn,.restile .btn,.pcard .btn{ color:var(--ivory); border-color:var(--ivory); }
.onblack .btn.key,.ctaband .btn.key,.quotepanel .btn.key,.restile .btn.key,.pcard .btn.key{ color:var(--ink); background:var(--gold-light); border-color:var(--gold-light); }
.onblack .btn:hover,.onblack .btn:focus-visible,
.ctaband .btn:hover,.ctaband .btn:focus-visible,
.quotepanel .btn:hover,.quotepanel .btn:focus-visible,
.restile .btn:hover,.restile .btn:focus-visible,
.pcard .btn:hover,.pcard .btn:focus-visible{ color:var(--ink); background:var(--gold-light); border-color:var(--gold-light); }
.onblack .btn.key:hover,.onblack .btn.key:focus-visible,
.ctaband .btn.key:hover,.ctaband .btn.key:focus-visible{ color:var(--ink); background:var(--ivory); border-color:var(--ivory); }
.onblack .grid,.onblack .cell{ border-color:rgba(245,240,232,0.26); }
.onblack .cell p{ color:var(--silver); }
.onblack .rulemark{ background:var(--gold-light); }

.display{
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  font-weight:400; line-height:1.12; letter-spacing:-0.005em; text-wrap:balance; margin:0;
}
h1.display{ font-size:clamp(36px,5vw,54px); }
h2.display{ font-size:clamp(27px,3.4vw,40px); }
h3.display{ font-size:clamp(22px,2.3vw,29px); }
.accent{ color:var(--signal); font-style:italic; }
.onblack .accent{ color:var(--gold-light); }

.eyebrow{ font-size:12px; font-weight:700; letter-spacing:0.24em; text-transform:uppercase; color:var(--signal); margin:0; }
.lede{ font-size:clamp(16px,1.3vw,18px); line-height:1.65; margin:0; }
.caption{ font-size:14px; line-height:1.6; margin:0; }
p{ margin:0; }
.rulemark{ width:56px; height:2px; background:var(--signal); }

.center{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; }
.center .lede{ max-width:58ch; }
.center h1,.center h2{ max-width:22ch; }

.actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.btn{
  font-family:inherit; font-size:12px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; text-decoration:none; padding:15px 28px; display:inline-block;
  border:1px solid var(--body); color:var(--body); background:transparent;
  transition:color .18s ease,border-color .18s ease;
}
.btn.key{ color:var(--ink); background:var(--gold); border-color:var(--gold); }
.btn:hover,.btn:focus-visible{ color:var(--ivory); background:var(--gold); border-color:var(--gold); }
.btn.key:hover,.btn.key:focus-visible{ color:var(--ivory); background:var(--ink); border-color:var(--ink); }
.btn{ transition:color .18s ease, background-color .18s ease, border-color .18s ease; }
.btn.sm{ padding:11px 20px; }

/* ---------- Navigation with dropdowns ---------- */
.topbar{ background:var(--ink); color:var(--ivory); padding-block:0; position:relative; z-index:50; box-shadow:0 1px 0 rgba(184,151,90,0.55), 0 16px 34px rgba(0,0,0,0.55); }
.topbar .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; padding-block:16px; }
.brand{ display:block; text-decoration:none; color:var(--ivory); flex:0 0 auto; line-height:0; }
.brand .logo{
  display:block; width:clamp(132px,15vw,167px); aspect-ratio:2.609/1;
  background-image:var(--logo-image,none); background-size:contain;
  background-position:left center; background-repeat:no-repeat;
}

nav.primary{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 20px; }
.navitem{ position:relative; }
.navitem > a{
  font-size:14px; font-weight:500; color:var(--ivory); text-decoration:none;
  padding:6px 0 6px; display:inline-flex; align-items:center; gap:6px;
  border-bottom:1px solid transparent;
}
.navitem > a:hover,.navitem > a:focus-visible,.navitem:focus-within > a{ color:var(--gold-light); border-bottom-color:var(--gold-light); }
.navitem > a[aria-current="page"]{ color:var(--gold-light); }
.caret{ width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; }

.submenu{
  position:absolute; top:100%; left:-18px; min-width:236px;
  background:var(--ink); border:1px solid rgba(245,240,232,0.22);
  padding:8px 0; margin:0; list-style:none; display:none; z-index:60;
}
.navitem:hover .submenu,.navitem:focus-within .submenu{ display:block; }
.submenu a{
  display:block; padding:11px 22px; font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ivory); text-decoration:none;
}
.submenu a:hover,.submenu a:focus-visible{ color:var(--gold-light); }
.navtoggle{
  display:none; align-items:center; gap:9px; background:transparent; border:1px solid rgba(245,240,232,0.34);
  color:var(--ivory); font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; padding:11px 15px; cursor:pointer;
}
.navtoggle:hover,.navtoggle:focus-visible{ border-color:var(--gold-light); color:var(--gold-light); }
.navtoggle .bars{ display:inline-flex; flex-direction:column; gap:3px; }
.navtoggle .bars i{ display:block; width:15px; height:1px; background:currentColor; }

@media (max-width:960px){
  .topbar .wrap{ flex-wrap:wrap; }
  .topbar .brand{ flex:0 0 auto; }
  .navtoggle{ display:inline-flex; }
  nav.primary{
    display:none; order:3; width:100%; flex-direction:column; align-items:stretch;
    gap:0; padding:6px 0 16px; border-top:1px solid rgba(245,240,232,0.18); margin-top:12px;
  }
  nav.primary.open{ display:flex; }
  .navitem{ width:100%; }
  .navitem > a{ display:block; padding:13px 0; border-bottom:1px solid rgba(245,240,232,0.10); }
  .submenu{ position:static; display:none; border:0; padding:4px 0 10px; min-width:0; background:transparent; }
  .navitem.open .submenu{ display:block; }
  .submenu a{ padding:9px 0 9px 16px; }
  .caret{ display:inline-block; margin-left:8px; transition:transform .18s ease; }
  .navitem.open > a .caret{ transform:rotate(180deg); }
  nav.primary .btn.key.sm{ margin-top:14px; text-align:center; }
}

/* ---------- Grids ---------- */
.grid{ display:grid; width:100%; gap:0; border-top:1px solid var(--rule-2); border-left:1px solid var(--rule-2); }
.grid.g2{ grid-template-columns:repeat(2,1fr); }
.grid.g3{ grid-template-columns:repeat(3,1fr); }
.grid.g4{ grid-template-columns:repeat(4,1fr); }
.cell{
  border-right:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2);
  padding:clamp(22px,2.8vw,32px);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:11px;
}
@media (max-width:860px){ .grid.g4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid.g2,.grid.g3,.grid.g4{ grid-template-columns:1fr; } }
.cell h3{ margin:0; }
.cell p{ font-size:15px; line-height:1.6; max-width:32ch; color:var(--quiet); }

.driver{ gap:5px; padding-block:clamp(16px,2vw,24px); }
.driver .n{ font-family:"Cormorant Garamond",Georgia,serif; font-size:21px; line-height:1; color:var(--gold-light); font-variant-numeric:tabular-nums; }
.driver .t{ font-size:14px; line-height:1.4; color:var(--silver); }

.pagehead{ padding-block:clamp(56px,7vw,96px); }

.steps{ counter-reset:s; }
.steps .cell::before{
  counter-increment:s; content:counter(s,decimal-leading-zero);
  font-family:"Cormorant Garamond",Georgia,serif; font-size:21px; line-height:1; color:var(--signal);
}
.onblack .steps .cell::before{ color:var(--gold-light); }

.article{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; max-width:66ch; margin:0 auto; }

/* Two column band: supporting visual left, features right */
.twocol{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,60px); align-items:stretch; width:100%; }
@media (max-width:860px){ .twocol{ grid-template-columns:1fr; } }
.col{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; }
.col .grid{ margin-top:auto; }
/* Features: a plain list of names, as in the wireframe. No boxes. */
.featlist{ width:100%; margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:clamp(8px,1.4vw,16px); }
.featlist li,.featlist a{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(26px,3vw,38px); line-height:1.15; font-weight:400;
  text-decoration:none; color:inherit; display:inline-block;
  transition:color .18s ease;
}
.featlist a:hover,.featlist a:focus-visible{ color:var(--gold-light); }

/* Supporting visual panel, in the image position */
.visualpanel{
  background:var(--ink); color:var(--ivory);
  border:1px solid rgba(245,240,232,0.26);
  padding:clamp(24px,3vw,36px);
  display:flex; flex-direction:column; gap:18px; justify-content:center;
}
.visualpanel .eyebrow{ color:var(--gold-light); }
.visualpanel .grid,.visualpanel .cell{ border-color:rgba(245,240,232,0.26); }

/* Hero: the brand kit image, whose curved sweep carries into the next section */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  aspect-ratio:16/9; min-height:540px;
  display:flex; align-items:center;
  padding-block:clamp(40px,5vw,72px) clamp(120px,18vw,300px);
}
.hero .herobg{
  position:absolute; inset:0; z-index:-2;
  background-color:var(--ink);
  background-image:var(--hero-image, none);
  background-size:cover; background-position:center bottom; background-repeat:no-repeat;
}
.hero .heroscrim{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,
    rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.74) 30%,
    rgba(0,0,0,0.42) 52%, rgba(0,0,0,0.06) 72%, rgba(0,0,0,0) 100%);
  /* Lift the scrim off the bottom so the image's own sweep stays clean
     and meets the ivory band below with no tint across the seam. */
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,0) 66%);
  mask-image:linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,0) 66%);
}
.hero .wrap{ position:relative; z-index:1; width:100%; }
.heroinner{
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  gap:20px; width:100%; max-width:min(600px,52%);
}
.heroinner h1,.heroinner .lede{ max-width:100%; }
.heroinner .actions{ justify-content:flex-start; }
@media (max-width:860px){
  .hero{ aspect-ratio:auto; min-height:0; padding-block:clamp(56px,10vw,90px) clamp(150px,42vw,260px); }
  .hero .herobg{ background-position:72% bottom; }
  .heroinner{ max-width:100%; }
  .hero .heroscrim{
    background:linear-gradient(180deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.66) 55%, rgba(0,0,0,0.40) 100%);
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,0) 80%);
    mask-image:linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,0) 80%);
  }
}

/* The band the hero sweeps into. Flat ivory, no gradient, no shadow. */
.ivoryband{ background:#F5F0E8; color:var(--text); box-shadow:none; }
.ivoryband .eyebrow{ color:var(--gold); }
.ivoryband .featlist li,.ivoryband .featlist a{ color:var(--text); }
.ivoryband .featlist a:hover,.ivoryband .featlist a:focus-visible{ color:var(--gold); }

/* Image card carrying its own title and description */
.imagecard{
  position:relative; overflow:hidden; isolation:isolate;
  aspect-ratio:4/3; min-height:300px;
  background-color:var(--ink);
  background-image:var(--whatwedo-image, none);
  background-size:cover; background-position:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:12px; padding:clamp(28px,4vw,48px);
  color:var(--ivory);
}
.imagecard::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.52) 58%, rgba(0,0,0,0.78) 100%);
}
.imagecard{ justify-content:flex-end; text-align:left; align-items:flex-start; }
.imagecard p{ max-width:40ch; color:#E7E2DA; }
.imagecard h3{ margin:0; color:var(--ivory); }
.imagecard p{ font-size:15px; line-height:1.65; color:var(--silver); max-width:36ch; margin:0; }
.imagecard{ min-width:0; max-width:100%; }
@media (max-width:560px){ .imagecard{ min-height:0; } }

/* Success Readiness Checklist: scored self assessment */
.segbar{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px clamp(14px,2.4vw,34px); width:100%; }
.segbar button{ appearance:none; background:none; border:0; cursor:pointer; padding:6px 2px;
  font-family:inherit; font-size:12px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--quiet); transition:color .18s ease; white-space:nowrap; }
.segbar button:hover,.segbar button:focus-visible{ color:var(--gold); }
.segbar button[aria-pressed="true"]{ color:var(--gold); border-bottom:1px solid var(--gold); }
.ckgfocus{ margin:0 0 16px; font-size:14px; line-height:1.6; color:var(--quiet); font-style:italic; }
.cksheet{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(30px,4vw,60px); width:100%; align-items:start; }
@media (max-width:900px){ .cksheet{ grid-template-columns:1fr; } }
.ckgroup{ padding-block:clamp(22px,2.6vw,30px); border-top:1px solid rgba(18,23,26,0.16); }
.ckgroup:first-child,.cksheet > .ckgroup:nth-child(2){ border-top:0; }
@media (max-width:900px){ .cksheet > .ckgroup:nth-child(2){ border-top:1px solid rgba(18,23,26,0.16); } }
.ckgroup h3{ margin:0 0 4px; font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(20px,2vw,25px); line-height:1.25; font-weight:400; }
.ckhint{ margin:0 0 16px; font-size:11px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); }
.ckitem{ display:flex; gap:13px; align-items:flex-start; padding:11px 10px 11px 6px; cursor:pointer; transition:background-color .2s ease; }
.ckitem:hover{ background:rgba(18,23,26,0.045); }
.ckitem input{ appearance:none; -webkit-appearance:none; flex:0 0 auto; width:19px; height:19px; margin:2px 0 0; border:1px solid rgba(18,23,26,0.45); background:transparent; cursor:pointer; position:relative; }
.ckitem input[type="radio"]{ border-radius:50%; }
.ckitem input:checked{ border-color:var(--gold); background:var(--gold); }
.ckitem input:checked::after{ content:""; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid #FFFFFF; border-width:0 2px 2px 0; transform:rotate(45deg); }
.ckitem input[type="radio"]:checked::after{ left:5px; top:5px; width:7px; height:7px; border:0; border-radius:50%; background:#FFFFFF; transform:none; }
.ckitem input:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.ckitem span{ font-size:15px; line-height:1.6; color:var(--quiet); }
.ckitem b{ color:var(--text); font-weight:600; }
.ckitem input:checked ~ span{ color:var(--text); }
.ckgroup.cktier{ grid-column:1 / -1; border-top:1px solid rgba(18,23,26,0.16); }
.cktier .tierrow{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 clamp(14px,2vw,26px); }
@media (max-width:700px){ .cktier .tierrow{ grid-template-columns:repeat(2,1fr); } }

.ckresult{ border:1px solid rgba(245,240,232,0.26); background:var(--ink); color:var(--ivory);
  padding:clamp(26px,3.4vw,44px); display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; width:100%; }
.cknum{ margin:0; font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(52px,7vw,86px); line-height:1; color:var(--gold-light); }
.cknum small{ font-size:0.32em; letter-spacing:0.18em; text-transform:uppercase; color:var(--silver); display:block; margin-top:10px; }
.ckband{ margin:0; font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(23px,2.6vw,32px); line-height:1.25; font-weight:400; }
.ckdiag{ margin:0; font-size:15px; line-height:1.7; color:var(--silver); max-width:60ch; }
.ckfocus{ margin:0; font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-light); }

/* Benefits panel: heading over three unbordered text columns */
.benefitpanel{
  background:#F5F0E8;
  padding:clamp(34px,5vw,68px) clamp(24px,4vw,56px);
  display:flex; flex-direction:column; align-items:center; gap:clamp(28px,4vw,46px);
  width:100%;
}
.benefitpanel h2{ color:var(--text); }
.benefitpanel .lab{ color:var(--gold); }
.benefitpanel p{ color:#5A5750; }
.benefitcols{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0; width:100%;
}
@media (max-width:720px){ .benefitcols{ grid-template-columns:1fr; } }
.benefitcol{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  padding:clamp(22px,2.6vw,32px) clamp(18px,2.4vw,34px);
  border-left:1px solid rgba(18,23,26,0.16);
  transition:background-color .22s ease;
}
.benefitcol:first-child{ border-left:0; }
@media (max-width:720px){
  .benefitcol{ border-left:0; border-top:1px solid rgba(18,23,26,0.16); }
  .benefitcol:first-child{ border-top:0; }
}
.benefitcol:hover{ background:rgba(18,23,26,0.045); }
.benefitcol .lab,.benefitcol p{ transition:color .22s ease; }
.benefitcol:hover p{ color:var(--text); }

.rettable{ width:100%; margin:clamp(22px,2.6vw,34px) 0 14px; text-align:left; }
.retrow{ display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); gap:clamp(14px,2vw,28px);
  padding:14px 0; border-top:1px solid rgba(18,23,26,0.16); align-items:baseline; }
.retrow span{ min-width:0; }
.retrow:last-child{ border-bottom:1px solid rgba(18,23,26,0.16); }
.rethead span{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.rethead{ border-top:0; }
.retrow span:last-child{ font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(16px,1.5vw,19px); }
.rethead span:last-child{ font-family:"DM Sans",system-ui,sans-serif; font-size:12px; }
.retrow:not(.rethead):hover{ background:rgba(18,23,26,0.045); }
.onblack .retrow{ border-color:rgba(245,240,232,0.18); }
.onblack .retrow:not(.rethead):hover{ background:rgba(245,240,232,0.05); }
@media (max-width:620px){
  .retrow{ grid-template-columns:1fr; gap:4px; }
}

.doclist{ list-style:none; margin:clamp(20px,2.4vw,30px) auto 0; padding:0; max-width:900px;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px clamp(18px,2.4vw,32px); text-align:left; }
.doclist li{ position:relative; padding-left:18px; font-size:15px; line-height:1.5; min-width:0; }
.doclist li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:1px; background:var(--accent); }

/* ---------- landing page hero: headline, image, bullets, form above the fold ---------- */
.lphero{ background-size:cover; background-position:center; background-color:#0B0E10; }
.lpgrid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);
  gap:clamp(28px,4vw,60px); align-items:center; width:100%; }
@media (max-width:900px){ .lpgrid{ grid-template-columns:1fr; } }
.lpcopy{ text-align:left; min-width:0; }
.lpcopy .eyebrow{ margin:0 0 12px; }
.lpcopy .display{ font-size:clamp(29px,3.5vw,45px); line-height:1.12; margin:0 0 14px; max-width:20ch; }
.lpcopy .lede{ margin:0 0 22px; max-width:44ch; }
.lpbullets{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; max-width:46ch; }
.lpbullets li{ position:relative; padding-left:26px; font-size:15px; line-height:1.55; color:var(--silver); }
.lpbullets li::before{ content:""; position:absolute; left:0; top:.66em; width:13px; height:1px; background:var(--gold-light); }
.lpcard{ min-width:0; }
.lpttl{ margin:0; font-family:"Cormorant Garamond",Georgia,serif; font-weight:400;
  font-size:clamp(21px,2vw,27px); line-height:1.2; color:var(--text); }
.lpsub{ margin:0; font-size:14px; line-height:1.55; color:var(--quiet); }
.lpfine{ margin:0; font-size:12px; line-height:1.5; color:var(--quiet); }
.lpcta{ background:var(--ivory); color:var(--text); border:1px solid rgba(18,23,26,0.18);
  padding:clamp(24px,3vw,36px); display:flex; flex-direction:column; gap:16px; text-align:left; }
.lpcta .btn.key{ align-self:flex-start; }
.onblack .doclist li{ color:var(--silver); }
@media (max-width:760px){ .doclist{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:440px){ .doclist{ grid-template-columns:1fr; } }

.statrow{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; width:100%;
  margin-top:clamp(28px,3.4vw,44px); border-top:1px solid rgba(245,240,232,0.26); }
.stat{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; min-width:0;
  padding:clamp(22px,2.6vw,32px) clamp(10px,1.6vw,22px);
  border-left:1px solid rgba(245,240,232,0.26); }
.stat:first-child{ border-left:0; }
.stat .num{ font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(30px,3.6vw,46px);
  line-height:1; font-weight:600; color:var(--gold-light); }
.stat .lab{ font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--silver); line-height:1.5; }
section:not(.onblack) .statrow,section:not(.onblack) .stat{ border-color:var(--rule-2); }
section:not(.onblack) .stat .num{ color:var(--gold); }
section:not(.onblack) .stat .lab{ color:var(--quiet); }
@media (max-width:720px){
  .statrow{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat{ border-left:0; border-top:1px solid rgba(245,240,232,0.26); }
  .stat:first-child,.stat:nth-child(2){ border-top:0; }
  section:not(.onblack) .stat{ border-color:var(--rule-2); }
}

.timeline{ width:100%; text-align:left; margin-top:clamp(26px,3vw,42px);
  border-left:1px solid var(--rule-2); }
.tlrow{ position:relative; padding:0 0 clamp(26px,3vw,40px) clamp(22px,3vw,38px); }
.tlrow:last-child{ padding-bottom:0; }
.tlrow::before{ content:""; position:absolute; left:-4px; top:12px; width:7px; height:7px; background:var(--signal); }
.tlrow .yr{ display:block; font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(26px,3vw,36px); line-height:1; color:var(--gold); }
.tlrow h3{ margin:10px 0 6px; }
.tlrow p{ margin:0; max-width:66ch; }
.onblack .timeline{ border-color:rgba(245,240,232,0.26); }
.onblack .tlrow .yr{ color:var(--gold-light); }

section:not(.onblack) .hostcard,section:not(.onblack) .hostpic{ border-color:var(--rule-2); }

.quoteshot{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:12px;
  aspect-ratio:16/9; width:100%; padding:clamp(20px,2.4vw,30px);
  background-image:linear-gradient(rgba(0,0,0,0.30) 0%,rgba(0,0,0,0.42) 45%,rgba(0,0,0,0.80) 100%),var(--img-impact);
  background-size:cover; background-position:center; background-color:#0B0E10;
  color:var(--ivory); text-align:left;
}
.quoteshot blockquote{
  margin:0; font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(17px,1.85vw,25px); line-height:1.26; text-wrap:balance;
}
.splitgrid.splitnum{ align-items:center; grid-template-columns:1.35fr 1fr; }
.numsection .wrap{ max-width:1240px; }
.focusgrid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.6vw,34px); width:100%; }
@media (max-width:760px){ .focusgrid{ grid-template-columns:1fr; } }
.focuscard{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  padding:clamp(30px,4vw,54px) clamp(22px,3vw,40px);
  background:rgba(245,240,232,0.045); min-width:0;
}
.focuscard .eyebrow{ margin:0; }
.focuscard h3{ margin:0; font-size:clamp(28px,3.2vw,42px); line-height:1.1; }
.focuscard p:last-child{ margin:0; color:var(--silver); font-size:16px; line-height:1.6; max-width:44ch; }
@media (max-width:900px){ .splitgrid.splitnum{ grid-template-columns:1fr; } }
.splitnum .numblock .stat{ padding:clamp(15px,1.7vw,21px) clamp(10px,1.3vw,18px); gap:7px; }
.splitnum .numblock .stat .num{ font-size:clamp(28px,3vw,40px); }
.splitnum .splitcopy .display{ font-size:clamp(28px,3.2vw,40px); }
.splitnum .splitcopy{ padding-block:0; gap:16px; }
.splitnum .splitcopy .display{ margin:0; }
.quoteshot .qattr{ margin:0; font-size:11px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-light); }

.numblock{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; width:100%;
  border:1px solid rgba(245,240,232,0.26); margin-top:8px;
}
.numblock .stat{ border-left:1px solid rgba(245,240,232,0.26); border-top:1px solid rgba(245,240,232,0.26); }
.numblock .stat:nth-child(odd){ border-left:0; }
.numblock .stat:nth-child(-n+2){ border-top:0; }
@media (max-width:520px){
  .numblock{ grid-template-columns:1fr; }
  .numblock .stat{ border-left:0; border-top:1px solid rgba(245,240,232,0.26); }
  .numblock .stat:first-child{ border-top:0; }
}
.hostpic{ background-size:cover; background-position:center 18%; }
.benefitcol .lab{
  font-size:12px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--signal); margin:0;
}
.benefitcol p{ font-size:15px; line-height:1.7; color:var(--quiet); max-width:34ch; }

/* Fourth section: quote panel left, resource tile and badge stacked right */
.proofgrid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3vw,40px); align-items:stretch; width:100%; }
@media (max-width:860px){ .proofgrid{ grid-template-columns:1fr; } }
.quotepanel{
  border:1px solid rgba(245,240,232,0.26); background:var(--ink); color:var(--ivory);
  padding:clamp(28px,4vw,52px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:22px;
}
.quotepanel blockquote{ hanging-punctuation:first last;
  font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(23px,2.6vw,32px);
  line-height:1.3; margin:0; max-width:24ch; text-wrap:balance;
}
.quotepanel .qattr{ margin-top:12px; }
.qattr{ font-size:11px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--silver); }
.rightstack{ display:flex; flex-direction:column; gap:clamp(22px,3vw,40px); }
.restile{
  border:1px solid rgba(245,240,232,0.26); background:var(--ink); color:var(--ivory);
  padding:clamp(24px,3vw,36px); display:flex; flex-direction:column; gap:16px; flex:1;
}
.restile h3{ margin:0; }
.resgrid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.2vw,26px); }
@media (max-width:560px){ .resgrid{ grid-template-columns:1fr; } }
.rescard{ display:flex; flex-direction:column; gap:12px; text-decoration:none; color:var(--ivory); }
.rescard .shot{ display:block; width:100%; aspect-ratio:4/3; background-size:cover; background-position:center; background-color:#0B0E10; }
.rescard h3{ margin:0; font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(17px,1.45vw,20px); line-height:1.3; font-weight:400; text-wrap:balance; min-height:2.6em; }
.rescard .more{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-light); margin-top:auto; }
.rescard:hover h3,.rescard:focus-visible h3{ color:var(--gold-light); }
.reslist{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; }
.reslist li{ border-top:1px solid rgba(245,240,232,0.22); }
.reslist a{ display:block; padding:13px 0; font-size:15px; line-height:1.45; color:var(--ivory); text-decoration:none; }
.reslist a:hover,.reslist a:focus-visible{ color:var(--gold-light); }
.badgebar{
  border:1px solid var(--gold-light); color:var(--gold-light); background:var(--ink);
  padding:26px clamp(16px,2vw,26px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2vw,24px); align-items:center;
}

/* Form card, as on the landing page example */
.formcard{
  background:var(--ivory); color:var(--text);
  border:1px solid rgba(18,23,26,0.18);
  padding:clamp(24px,3vw,36px);
  max-width:520px; width:100%; margin:0 auto;
  display:flex; flex-direction:column; gap:16px; text-align:left;
}
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--quiet); }
.field input,.field textarea{
  font-family:inherit; font-size:15px; padding:12px 13px;
  border:1px solid rgba(18,23,26,0.32); background:#fff; color:var(--text);
}
.field input:focus-visible,.field textarea:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
.field textarea{ resize:vertical; }
.fieldrow{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fieldrow > *{ min-width:0; }
.field input,.field textarea{ width:100%; box-sizing:border-box; }
@media (max-width:520px){ .fieldrow{ grid-template-columns:1fr; } }
.formcard button{
  font-family:inherit; font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  padding:15px 22px; border:1px solid var(--ink); background:var(--ink); color:var(--gold-light); cursor:pointer;
}
.formcard button:hover{ background:transparent; color:var(--ink); }

/* Price table */
.pricetable{ width:100%; border-collapse:collapse; font-size:15px; }
.pricetable th,.pricetable td{ text-align:left; padding:13px 14px; border-bottom:1px solid var(--rule-2); }
.pricetable th{ font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--quiet); }
.pricetable td.fee{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tablescroll{ width:100%; overflow-x:auto; }

footer{ background:var(--ink); color:var(--silver); padding-block:clamp(42px,6vw,60px) 28px; position:relative; z-index:5; box-shadow:0 -1px 0 rgba(184,151,90,0.55), 0 -16px 34px rgba(0,0,0,0.55); }
footer .cols{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:34px clamp(38px,6vw,84px); margin-bottom:36px; text-align:center; }
footer .cols > *{ min-width:132px; }
footer ul{ align-items:center; }
footer h5{ font-size:12px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--ivory); margin:0 0 13px; }
footer ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
footer a{ color:var(--silver); text-decoration:none; border-bottom:1px solid transparent; font-size:15px; }
footer a:hover,footer a:focus-visible{ color:var(--gold-light); border-bottom-color:var(--gold-light); }
.legal{ border-top:1px solid rgba(245,240,232,0.18); padding-top:20px; text-align:center; font-size:14px; }

a:focus-visible,.btn:focus-visible,button:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }
/* Section 12 - success indicators */
.indcol{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; min-width:0; }
.indcol .num{ font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(34px,4vw,48px); line-height:1; font-weight:600; color:var(--ivory); }
.indcol .cap{ font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-light); }
/* Index pages: case studies, blog, events */
.swash{ position:relative; display:inline-block; }
.swash::after{
  content:""; position:absolute; left:4%; right:4%; bottom:-0.16em; height:0.055em;
  background:var(--gold-light); border-radius:50%;
  transform:rotate(-0.6deg);
}
.filterbar{
  display:flex; flex-wrap:nowrap; justify-content:center; align-items:center;
  gap:clamp(14px,2.4vw,34px); width:100%;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  padding-bottom:2px;
}
.filterbar::-webkit-scrollbar{ display:none; }
.filterbar button{ white-space:nowrap; flex:0 0 auto; }
.filterbar button{
  appearance:none; background:none; border:0; cursor:pointer; padding:6px 2px;
  font-family:inherit; font-size:12px; font-weight:700; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--quiet); transition:color .18s ease;
}
.onblack .filterbar button{ color:var(--silver); }
.filterbar button:hover,.filterbar button:focus-visible{ color:var(--gold); }
.onblack .filterbar button:hover,.onblack .filterbar button:focus-visible{ color:var(--gold-light); }
.filterbar button[aria-pressed="true"]{ color:var(--gold); }
.onblack .filterbar button[aria-pressed="true"]{ color:var(--gold-light); }

.cardgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,34px); width:100%; }
.cardgrid[data-grid="blog"]{ grid-template-columns:repeat(2,1fr); }
.cardgrid[data-grid="events"]{ grid-template-columns:minmax(0,380px); justify-content:center; }
@media (max-width:900px){ .cardgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .cardgrid{ grid-template-columns:1fr; } }
.pcard[hidden]{ display:none !important; }
.pcard{
  display:flex; flex-direction:column; border:1px solid var(--rule-2);
  background:transparent; overflow:hidden;
}
.onblack .pcard{ border-color:rgba(245,240,232,0.26); }
.pcard .cap{
  min-height:190px;
  aspect-ratio:auto; display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(16px,2vw,22px); background:var(--ink); color:var(--ivory); gap:4px;
  border-bottom:1px solid rgba(245,240,232,0.26);
}
.pcard .cap .kicker{ font-size:11px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold-light); }
.pcard .cap .figure{ font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(30px,3.4vw,44px); line-height:1; font-weight:600; }
.pcard .cap .unit{ font-size:12px; line-height:1.4; color:var(--silver); max-width:26ch; }
.pcard .cap .unit{ margin-inline:auto; }
.pcard .body{ display:flex; flex-direction:column; gap:12px; padding:clamp(18px,2.2vw,26px); flex:1; }
.pcard h3{ margin:0; font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(20px,2vw,25px); line-height:1.25; font-weight:400; min-height:2.5em; display:flex; align-items:center; justify-content:center; text-align:center; text-wrap:balance; }
.pcard p{ margin:0; font-size:14px; line-height:1.6; color:var(--quiet); }
.onblack .pcard p{ color:var(--silver); }
.pcard .foot{ margin-top:auto; padding-top:4px; }

.ctaband{ background:var(--ink); color:var(--ivory); }
.ctaband .wrap{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; }
.ctaband .lede{ color:var(--silver); max-width:48ch; }
/* Case study detail */
.csmeta{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; font-size:13px; color:var(--silver); }
.csmeta span{ display:inline-flex; align-items:center; gap:8px; }
.csbody{ max-width:74ch; margin:0 auto; display:flex; flex-direction:column; gap:clamp(30px,4vw,48px); }
.csblock h2{
  font-size:12px; font-weight:700; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--signal); margin:0 0 16px; font-family:inherit;
}
.onblack .csblock h2{ color:var(--gold-light); }
.csblock p{ margin:0 0 14px; font-size:17px; line-height:1.66; }
.csblock p:last-child{ margin-bottom:0; }
.cslist{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:14px; }
.cslist li{ position:relative; padding-left:26px; font-size:17px; line-height:1.6; }
.cslist li::before{ content:""; position:absolute; left:0; top:0.62em; width:12px; height:1px; background:var(--signal); }
.onblack .cslist li::before{ background:var(--gold-light); }
.cslist li b{ font-weight:600; }
.csintro{ font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(20px,2.2vw,26px); line-height:1.5; }
.pcard .shot{ display:block; width:100%; aspect-ratio:4/3; background-size:cover; background-position:center; background-color:var(--ink); margin:2px 0 4px; }
.csshot{ width:100%; aspect-ratio:16/9; background-size:cover; background-position:center; background-color:var(--ink); }
@media (max-width:620px){ .csshot{ aspect-ratio:4/3; } }
/* Event / webinar page */
.evhead{ background:#F5F0E8; color:var(--text); }
.evhead .eyebrow{ color:var(--quiet); }
.evhead .display{ text-transform:uppercase; font-size:clamp(24px,3.1vw,40px); line-height:1.1; letter-spacing:0.01em; text-wrap:balance; max-width:40ch; }
.evmeta{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 30px; font-size:16px; color:var(--quiet); }
.evmeta span{ display:inline-flex; align-items:center; gap:9px; }
.evprice{ font-size:15px; letter-spacing:0.06em; color:var(--text); }
.evprice b{ color:var(--gold); letter-spacing:0.12em; }
.evcount{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.evcount .lab{ font-size:12px; font-weight:700; letter-spacing:0.24em; text-transform:uppercase; color:var(--quiet); }
.evclock{ display:flex; gap:clamp(14px,3vw,34px); }
.evunit{ display:flex; flex-direction:column; align-items:center; gap:4px; min-width:58px; }
.evunit b{ font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(30px,4vw,46px); line-height:1; font-weight:600; color:var(--text); }
.evunit span{ font-size:10px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--quiet); }
.evtba{ font-size:15px; color:var(--quiet); }
.classgrid{ display:grid; grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr); gap:clamp(26px,4vw,58px); align-items:center; width:100%; }
@media (max-width:860px){ .classgrid{ grid-template-columns:1fr; gap:30px; } }
.classpic{ width:100%; aspect-ratio:4/3; background-image:var(--img-class); background-size:cover; background-position:center; background-color:var(--ink); }
.yeslist{ display:flex; flex-direction:column; gap:clamp(14px,1.8vw,20px); width:100%; text-align:left; margin:0; padding:0; list-style:none; }
.yeslist li{ display:flex; gap:14px; font-size:16px; line-height:1.55; }
.yeslist .tick{ flex:0 0 auto; width:22px; height:22px; border:1px solid var(--gold); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; margin-top:2px; }
.onblack .yeslist .tick{ border-color:var(--gold-light); color:var(--gold-light); }
.hostcard{ display:grid; grid-template-columns:clamp(240px,28vw,330px) 1fr; grid-template-rows:auto 1fr; column-gap:clamp(26px,4vw,54px); row-gap:18px; width:100%; text-align:left; border:1px solid rgba(245,240,232,0.26); padding:clamp(22px,3vw,38px); }
.hostpic{ grid-column:1; grid-row:2; display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 18%; background-color:var(--ink); border:1px solid rgba(245,240,232,0.26); }
@media (max-width:700px){ .hostcard{ grid-template-columns:1fr; grid-template-rows:auto auto auto; justify-items:center; text-align:center; }
  .hostcard .hostid{ grid-column:1; grid-row:1; align-items:center; }
  .hostcard .hostpic{ grid-column:1; grid-row:2; max-width:250px; }
  .hostcard .hostbio{ grid-column:1; grid-row:3; }
  .hostid .nm{ white-space:normal; } }
.hostid{ grid-column:1; grid-row:1; display:flex; flex-direction:column; gap:4px; }
.hostbio{ grid-column:2; grid-row:2; display:flex; flex-direction:column; gap:14px; }
.hostbio p{ margin:0; }
.hostid .nm{ font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(21px,2vw,26px); line-height:1.2; white-space:nowrap; }
.hostid .rl{ font-size:12px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold-light); }
.agenda{ width:100%; border-top:1px solid rgba(18,23,26,0.22); }
.agenda details{ border-bottom:1px solid rgba(18,23,26,0.22); }
.agenda summary{ list-style:none; cursor:pointer; padding:22px 0; display:flex; gap:18px; align-items:baseline; justify-content:space-between; }
.agenda summary::-webkit-details-marker{ display:none; }
.agenda .slot{ font-size:12px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); flex:0 0 auto; }
.agenda .ttl{ font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(19px,2.2vw,26px); line-height:1.25; flex:1; text-align:left; }
.agenda .plus{ font-size:22px; color:var(--gold); flex:0 0 auto; }
.agenda details[open] .plus{ transform:rotate(45deg); }
.sponsgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:clamp(22px,4vw,52px); width:100%; align-items:center; justify-items:center; }
.sponsgrid a,.sponsgrid span{ display:flex; align-items:center; justify-content:center; width:100%; height:clamp(52px,7vw,84px); }
.sponsgrid img{ max-width:100%; max-height:100%; object-fit:contain; opacity:.86; transition:opacity .18s ease,transform .18s ease; }
.sponsgrid a:hover img,.sponsgrid a:focus-visible img{ opacity:1; transform:scale(1.03); }
.agenda .det{ padding:0 0 24px; font-size:16px; line-height:1.6; color:var(--quiet); text-align:left; max-width:70ch; }
.postbody .postq{
  font-family:inherit; font-style:normal; font-weight:600;
  font-size:clamp(17px,1.85vw,21px); line-height:1.55; color:var(--text);
  margin:0 0 28px; padding-left:20px; border-left:3px solid var(--gold);
}
.onblack .postbody .postq{ color:var(--ivory); border-left-color:var(--gold-light); }

.postbody p.todo{ padding-left:18px; border-left:2px solid var(--signal); }
.postbody p.todo span{ font-weight:700; letter-spacing:0.02em; }
.postbody h3.posth{ font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(22px,2.4vw,29px); line-height:1.25; font-weight:400; margin:34px 0 12px; }
.postbody p{ margin:0 0 16px; }
.postbody p:last-child{ margin-bottom:0; }
/* Med spa landing page: split hero, icon trio, numbered path */
.splithero{ background:var(--ink); color:var(--ivory); padding:0; }
.splithero .wrap{ max-width:1240px; }
.splitgrid{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(30px,5vw,72px); }
@media (max-width:900px){ .splitgrid{ grid-template-columns:1fr; gap:34px; } }
.splitcopy{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; padding-block:clamp(48px,7vw,96px); }
.splitcopy .display{ font-size:clamp(30px,3.8vw,48px); line-height:1.12; }
.splitcopy .display,.splitcopy .lede{ max-width:100%; }
.splitcopy .lede{ color:var(--silver); }
.splitpic{ width:100%; aspect-ratio:4/5; max-height:640px; background-image:var(--img-medspa-hero); background-size:cover; background-position:center; background-color:#0B0E10; }
@media (max-width:900px){ .splitpic{ aspect-ratio:16/10; order:-1; } }

.icontrio{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,60px); width:100%; }
@media (max-width:820px){ .icontrio{ grid-template-columns:1fr; } }
.icontrio .col{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; }
.icontrio svg{ width:clamp(64px,7vw,88px); height:auto; display:block; }
.icontrio h3{ margin:0; }
.icontrio .rulemark{ width:44px; }
.icontrio p{ margin:0; font-size:15px; line-height:1.65; color:var(--quiet); max-width:34ch; }
.onblack .icontrio p{ color:var(--silver); }

.pathgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; width:100%; border-top:1px solid var(--rule-2); border-left:1px solid var(--rule-2); }
@media (max-width:820px){ .pathgrid{ grid-template-columns:1fr; } }
.onblack .pathgrid{ border-color:rgba(245,240,232,0.26); }
.pathstep{ border-right:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2); padding:clamp(26px,3.4vw,44px); display:flex; flex-direction:column; gap:12px; text-align:left; }
.onblack .pathstep{ border-color:rgba(245,240,232,0.26); }
.pathstep .num{ font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(34px,4vw,52px); line-height:1; color:var(--gold); }
.onblack .pathstep .num{ color:var(--gold-light); }
.pathstep h3{ margin:0; }
.pathstep p{ margin:0; font-size:15px; line-height:1.65; color:var(--quiet); }
.onblack .pathstep p{ color:var(--silver); }
.csback{ display:flex; justify-content:center; }
.backlink{ font-size:12px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--quiet); text-decoration:none; }
.backlink:hover,.backlink:focus-visible{ color:var(--gold); }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }
.page[hidden]{ display:none !important; }
/* ===== landing pages, mockup design ================================== */
/* Surfaces derived from the shared house brand kit, so nothing off palette is used.
   Primary #000000  Secondary #0D0F10  Text A #12171A  Accent #B8975A
   BG/Text B #F5F0E8  Gold Light #D4AF6E  Text C #ACA8A3               */
:root{
  --ink-2:#0D0F10;                /* Secondary */
  --surface:#FFFFFF;              /* paper, for cards that sit on the ivory ground */
  --tint:#EEE5D7;                 /* accent over ivory, fallback for older browsers */
  --tint:color-mix(in srgb, var(--gold) 12%, var(--ivory));
  --tint-2:#EEE6D8;
  --tint-2:color-mix(in srgb, var(--gold) 11%, var(--ivory));
  --hint:rgba(18,23,26,0.50);     /* Text A at half, for placeholder text */
}
.visually-hidden{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.mksec{ padding-block:clamp(24px,2.7vw,38px); }
.mksec.tight{ padding-top:0; }

/* --- split hero and dark closing band ------------------------------- */
.mkhero,.mkcta{ position:relative; overflow:hidden; }
.mkhero{ background:var(--ivory); color:var(--text); }
.mkcta{ background:var(--ink); color:var(--ivory); }
.mkphoto{ background-size:cover; background-position:center; background-repeat:no-repeat; }
/* the closing band is black, so its photo is scrimmed to match */
.mkcta .mkphoto::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to right,rgba(0,0,0,.55),rgba(0,0,0,.26) 55%,rgba(0,0,0,.60)); }

@media (min-width:901px){
  .mkhero{ padding-block:clamp(50px,5.6vw,88px); }
  .mkcta{ padding-block:clamp(46px,5vw,76px); }
  .mkhero .mkphoto,.mkcta .mkphoto{
    position:absolute; top:0; right:0; bottom:0; left:42%;
    background-size:cover; background-position:right center;
    -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,.55) 22%,#000 44%);
            mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,.55) 22%,#000 44%);
  }
  /* The hero's height is set by the copy, which on a long page would leave the
     photo box far taller than the photo and crop the lettering out of it. Pin
     the box to the photos' own shape instead and centre it: what the browser
     crops is then a few percent of empty margin, never a word. */
  .mkhero .mkphoto{
    /* explicit width, not left+right: with an aspect-ratio an over-constrained
       box drops `right` and pulls away from the edge. */
    bottom:auto; left:auto; right:0; width:60%; max-width:1040px;
    top:50%; translate:0 -50%;
    height:auto; aspect-ratio:1.34; max-height:100%;
    -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,0) 16%,rgba(0,0,0,.5) 28%,#000 42%);
            mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,0) 16%,rgba(0,0,0,.5) 28%,#000 42%);
  }
  .mkcta .mkphoto{ left:56%; }
  /* 16:9 source: widen the box so cover barely crops, and start the fade
     later so the copy still sits on clean ivory. */
  .mkhero.wideimg .mkphoto{
    left:34%;
    -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,0) 25%,rgba(0,0,0,.5) 38%,#000 53%);
            mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,0) 25%,rgba(0,0,0,.5) 38%,#000 53%);
  }
  .mkhero .wrap,.mkcta .wrap{ position:relative; }
  .mkcopy{ max-width:min(52%,585px); }
  /* breathing room so the copy never crowds the photograph */
  .mkcopy,.mkctagrid > div:first-child{
    box-sizing:border-box; padding-right:clamp(20px,2.6vw,44px);
  }
  /* the closing banner sits on a photograph with its own lettering, so its
     copy needs more room than the hero's */
  .mkctagrid > div:first-child{
    padding-right:clamp(28px,4.4vw,76px);
  }
  /* with no word list the band's text column would otherwise span the full
     width and run under the photograph */
  .mkctagrid > div:first-child{ max-width:min(52%,600px); }
}
@media (max-width:900px){
  /* the photo is a static block here, so it must anchor its own scrim */
  .mkhero .mkphoto,.mkcta .mkphoto{ position:relative; height:clamp(190px,50vw,300px); }
  .mkhero .wrap,.mkcta .wrap{ padding-block:clamp(28px,6vw,40px); }
}

/* --- shared type ----------------------------------------------------- */
.mkeyebrow{
  display:flex; align-items:center; gap:14px; margin:0 0 clamp(14px,1.6vw,20px);
  font-size:11.5px; font-weight:700; letter-spacing:.19em; text-transform:uppercase;
  color:var(--gold);
}
.mkeyebrow::after{
  content:""; flex:0 0 auto; width:clamp(70px,13vw,180px); height:1px;
  background:rgba(184,151,90,.55);
}
.mkeyebrow.wide::after{ flex:1 1 auto; width:auto; }
.mkcta .mkeyebrow{ color:var(--gold-light); }
.mkcta .mkeyebrow::after{ background:rgba(212,175,110,.5); }

/* headlines carry their own line breaks, matching the approved designs, so
   they must not re-wrap inside a line */
.mkhero h1.brk,.mkcta h2.brk{ max-width:none; }
.mkhero h1{ font-size:clamp(31px,4.1vw,52px); max-width:22ch; margin:0 0 clamp(14px,1.6vw,20px); }
.mkcta h2{ font-size:clamp(25px,2.9vw,38px); max-width:none; margin:0 0 12px; }
/* the closing banner headline breaks where the design breaks it, and nowhere else */
@media (min-width:901px){ .mkcta h2{ text-wrap:nowrap; } }
.mklede{ margin:0 0 clamp(20px,2.4vw,28px); font-size:clamp(14.5px,1.15vw,16.5px);
  line-height:1.62; color:var(--quiet); max-width:46ch; }
.mkcta .mklede{ color:var(--silver); margin-bottom:clamp(18px,2vw,24px); }

/* --- the gold button ------------------------------------------------- */
.mkbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  background:var(--gold); color:var(--ink); border:1px solid var(--gold);
  padding:clamp(14px,1.5vw,18px) clamp(24px,3vw,38px);
  font-size:clamp(14.5px,1.1vw,16.5px); font-weight:500; letter-spacing:.01em;
  text-decoration:none; min-width:min(100%,330px); transition:background .18s,border-color .18s;
}
.mkbtn:hover,.mkbtn:focus-visible{ background:var(--gold-light); border-color:var(--gold-light); }
.mkbtn .arw{ font-size:1.05em; line-height:1; }

/* --- inline checkmark row -------------------------------------------- */
.mkchecks{
  list-style:none; margin:clamp(14px,1.6vw,18px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:9px clamp(14px,1.7vw,24px);
}
.mkchecks li{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--quiet); }
.mkcta .mkchecks li{ color:var(--silver); }
.mkchecks li::before{
  content:""; flex:0 0 auto; width:12px; height:7px; margin-top:-3px;
  border-left:1.6px solid var(--gold); border-bottom:1.6px solid var(--gold);
  transform:rotate(-45deg);
}
.mkcta .mkchecks li::before{ border-color:var(--gold-light); }
/* the three reassurances read as one row, never two. Declared after the base
   rule above so it wins the cascade. */
@media (min-width:1100px){
  .mkchecks{ flex-wrap:nowrap; gap:0 clamp(11px,1.5vw,24px); }
  .mkchecks li{ white-space:nowrap; }
}

/* --- hero tagline ----------------------------------------------------- */
.mktag{
  margin:clamp(20px,2.4vw,30px) 0 0; padding-top:clamp(14px,1.6vw,18px);
  font-size:11.5px; font-weight:500; letter-spacing:.21em; text-transform:uppercase;
  color:var(--gold); position:relative;
}
.mktag::before{ content:""; position:absolute; top:0; left:0; width:44px; height:1px;
  background:rgba(184,151,90,.6); }

/* --- section heading -------------------------------------------------- */
.mkhead{ margin:0 0 clamp(22px,2.6vw,34px); }
.mkhead h2{ font-size:clamp(24px,2.95vw,39px); margin:0 0 8px; max-width:none; }
/* keep section headings to a single line on desktop; they must still wrap
   on a phone, where no amount of shrinking would fit them. */
@media (min-width:901px){ .mkhead h2{ text-wrap:nowrap; } }
.mkhead p{ margin:0; font-size:clamp(14.5px,1.2vw,17px); line-height:1.55; color:var(--quiet); max-width:62ch; }

/* --- white cards with a round icon badge ------------------------------ */
.mkcards{ display:grid; gap:clamp(13px,1.5vw,20px); }
.mkcards.n2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.mkcards.n3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.mkcards.n4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.mkcard{
  background:var(--surface); border:1px solid rgba(18,23,26,.09);
  padding:clamp(20px,2.3vw,30px); display:flex; flex-direction:column; gap:13px;
}
.mkbadge{
  flex:0 0 auto; width:clamp(52px,5vw,64px); height:clamp(52px,5vw,64px); border-radius:50%;
  background:var(--tint); color:var(--gold); display:inline-flex; align-items:center; justify-content:center;
}
.mkbadge svg{ width:47%; height:47%; }
.mkcard h3{
  font-family:"Cormorant Garamond",Georgia,serif; font-weight:400;
  font-size:clamp(19px,1.85vw,25px); line-height:1.18; margin:0; color:var(--text);
}
.mkcard p{ margin:0; font-size:14.5px; line-height:1.62; color:var(--quiet); }

/* wide variant: badge to the left of the text */
.mkcards.wide .mkcard{ flex-direction:row; align-items:flex-start; gap:clamp(16px,2vw,24px); }
.mkcards.wide .mkcard .bd{ display:flex; flex-direction:column; gap:9px; min-width:0; }

/* check list inside a card */
.mkcardchecks{
  list-style:none; margin:4px 0 0; padding:clamp(13px,1.5vw,17px) 0 0; display:flex;
  flex-direction:column; gap:9px; border-top:1px solid rgba(18,23,26,.10);
}
.mkcardchecks li{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px;
  line-height:1.45; color:var(--quiet); }
.mkcardchecks li::before{
  content:""; flex:0 0 auto; width:11px; height:6.5px; margin-top:5px;
  border-left:1.6px solid var(--gold); border-bottom:1.6px solid var(--gold);
  transform:rotate(-45deg);
}

.mkcardlink{
  margin-top:auto; padding-top:clamp(13px,1.5vw,17px); border-top:1px solid rgba(18,23,26,.10);
  display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  font-size:14px; font-weight:500; color:var(--gold); text-decoration:none;
}
.mkcardlink:hover,.mkcardlink:focus-visible{ color:var(--text); }
.mkcardchecks + .mkcardlink{ border-top:0; padding-top:12px; }

.mkcard .kick{
  margin:-4px 0 2px; font-size:11px; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--gold);
}

/* --- icon tiles -------------------------------------------------------- */
.mktiles{ display:grid; gap:clamp(13px,1.5vw,20px); grid-template-columns:repeat(4,minmax(0,1fr)); }
.mktile{
  background:var(--surface); border:1px solid rgba(18,23,26,.09);
  padding:clamp(20px,2.2vw,28px) clamp(12px,1.6vw,18px);
  display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
}
.mktile svg{ width:clamp(30px,3vw,38px); height:clamp(30px,3vw,38px); color:var(--gold); }
.mktile span{ font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(16px,1.5vw,20px);
  line-height:1.25; color:var(--text); }

/* --- tan accent band ---------------------------------------------------- */
.mkband{
  background:var(--tint-2); padding:clamp(22px,2.8vw,38px) clamp(20px,2.8vw,42px);
  display:flex; align-items:center; gap:clamp(18px,2.6vw,34px);
}
.mkband .ic{ flex:0 0 auto; color:var(--gold); }
.mkband .ic svg{ width:clamp(40px,4.4vw,56px); height:clamp(40px,4.4vw,56px); }
.mkband .sep{ flex:0 0 auto; width:1px; align-self:stretch; background:rgba(184,151,90,.42); }
.mkband .bd{ min-width:0; }
.mkband h3{ font-family:"Cormorant Garamond",Georgia,serif; font-weight:400;
  font-size:clamp(21px,2.4vw,31px); line-height:1.2; margin:0 0 7px; color:var(--text); }
.mkband p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--quiet); max-width:70ch; }
.mkband .attr{ margin-top:10px; font-size:11.5px; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--gold); }

/* --- divided icon row ---------------------------------------------------- */
.mkwhy{ display:grid; gap:0; }
.mkwhy.n3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.mkwhy.n4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.mkwhy > div{
  padding:clamp(8px,1.2vw,14px) clamp(10px,1.4vw,20px); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  border-left:1px solid rgba(184,151,90,.38);
}
.mkwhy > div:first-child{ border-left:0; }
.mkwhy svg{ width:clamp(26px,2.6vw,33px); height:clamp(26px,2.6vw,33px); color:var(--gold); }
.mkwhy b{ font-family:"Cormorant Garamond",Georgia,serif; font-weight:400;
  font-size:clamp(16px,1.5vw,20px); line-height:1.22; color:var(--text); }
.mkwhy small{ font-size:13.5px; line-height:1.5; color:var(--quiet); }
.mkwhy.caps b{ font-family:"DM Sans",system-ui,sans-serif; font-size:12.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; }
.mkwhy.onband{ background:var(--tint-2); padding:clamp(22px,2.6vw,32px) clamp(12px,2vw,26px); }

/* --- numbered steps -------------------------------------------------------- */
.mksteps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; }
.mkstep{
  display:grid; grid-template-columns:auto auto 1fr; gap:10px clamp(11px,1.4vw,16px);
  align-items:center; padding:clamp(6px,1vw,12px) clamp(14px,2.2vw,30px);
  border-left:1px solid rgba(184,151,90,.38);
}
.mkstep:first-child{ border-left:0; }
.mknum{
  width:clamp(38px,3.6vw,46px); height:clamp(38px,3.6vw,46px); border-radius:50%;
  background:var(--tint); color:var(--text); display:grid; place-items:center;
  font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(16px,1.5vw,19px);
}
.mkstep .si svg{ width:clamp(27px,2.7vw,34px); height:clamp(27px,2.7vw,34px); color:var(--gold); }
.mkstep h3{ grid-column:1/-1; margin:6px 0 0;
  font-family:"Cormorant Garamond",Georgia,serif; font-weight:400;
  font-size:clamp(17px,1.7vw,22px); line-height:1.2; color:var(--text); }
.mkstep p{ grid-column:1/-1; margin:0; font-size:13.5px; line-height:1.6; color:var(--quiet); }

/* --- dark closing band layout ------------------------------------------------ */
.mkctagrid{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(20px,3vw,44px);
  align-items:center; }
.mkwords{ display:flex; flex-direction:column; gap:clamp(7px,.9vw,11px); text-align:right;
  padding-left:clamp(16px,2vw,26px); }
.mkwords span{ font-size:11.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-light); white-space:nowrap; }
.mkwords::after{ content:""; height:1px; width:52px; align-self:flex-end; margin-top:5px;
  background:rgba(212,175,110,.55); }

/* --- forms in the hero and closing band ---------------------------------------- */
.mkform{ display:flex; flex-direction:column; gap:11px; max-width:392px; margin:0 0 4px; }
.mkform input,.mkform select{
  width:100%; box-sizing:border-box; background:var(--surface); color:var(--text);
  border:1px solid rgba(18,23,26,.22); padding:clamp(13px,1.4vw,16px) 16px;
  font:inherit; font-size:15px;
}
.mkform select{
  appearance:none; -webkit-appearance:none; padding-right:42px; cursor:pointer;
  background-image:none;
  background-repeat:no-repeat; background-position:right 16px center;
}
.mkform select:invalid,.mkform select option[value=""]{ color:var(--hint); }
.mkform select:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
.mkform input::placeholder{ color:var(--hint); }
.mkform input:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
.mkform .mkbtn{ min-width:0; width:100%; }
.mkform.row{ flex-direction:row; flex-wrap:wrap; max-width:min(520px,100%); }
@media (min-width:901px) and (max-width:1200px){
  /* the closing band's column is narrow here: stack the inline form so it
     never reaches across into the photograph */
  .mkcta .mkform.row{ flex-direction:column; }
  .mkcta .mkform.row .mkbtn{ width:100%; }
}
.mkform.row input{ flex:1 1 210px; min-width:0; }
.mkform.row .mkbtn{ width:auto; flex:0 0 auto; min-width:0;
  padding-inline:clamp(18px,2.4vw,30px); }

/* --- responsive ------------------------------------------------------------------ */
@media (max-width:1000px){
  .mkcards.n4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mktiles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mkwords{ display:none; }
  .mkctagrid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:760px){
  .mkcards.n2,.mkcards.n3,.mkcards.n4{ grid-template-columns:minmax(0,1fr); }
  .mkcards.wide .mkcard{ flex-direction:column; }
  .mkwhy.n3,.mkwhy.n4,.mksteps{ grid-template-columns:minmax(0,1fr); }
  .mkwhy > div,.mkstep{ border-left:0; border-top:1px solid rgba(184,151,90,.38);
    padding-block:clamp(16px,4vw,22px); }
  .mkwhy > div:first-child,.mkstep:first-child{ border-top:0; }
  .mkband{ flex-direction:column; align-items:flex-start; text-align:left; }
  .mkband .sep{ display:none; }
  .mkform.row{ flex-direction:column; }
  .mkform.row .mkbtn{ width:100%; }
  .mkbtn{ min-width:0; width:100%; }
}
/* ===== interior pages, mockup design ================================= */
.ipsec{ padding-block:clamp(32px,4vw,58px); }
.ipsec.dark{ background:var(--ink); color:var(--ivory); }
.ipsec.ivory{ background:var(--ivory); color:var(--text); }
.ipsec.flush{ padding:0; }

/* --- hero -------------------------------------------------------------- */
.iphero{ position:relative; background:var(--ink); color:var(--ivory); overflow:hidden; }
.iphero .ipphoto{
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.iphero h1{
  font-size:clamp(30px,calc(24px + 2.4vw),56px); line-height:1.12;
  margin:0 0 clamp(14px,1.6vw,20px); color:var(--ivory); max-width:none;
}
.iphero h1 em,.ipcta h2 em,.ipsplit h2 em,.iphead h2 em{
  font-style:italic; color:var(--gold-light); font-weight:400;
}
.iphero .iplede{ margin:0; font-size:clamp(14.5px,calc(13.4px + .12vw),16.5px);
  line-height:1.62; color:var(--silver); max-width:52ch; }
.ipeyebrow{
  margin:0 0 clamp(12px,1.4vw,18px); font-size:11.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.iprule{ width:96px; height:1px; background:var(--gold); margin:0 0 clamp(14px,1.6vw,20px); }

/* the vertical gold word list at the right edge of the hero */
.ipwords{ display:flex; flex-direction:column; gap:6px; }
.ipwords::before{ content:""; width:38px; height:1px; background:rgba(184,151,90,.7);
  margin-bottom:8px; }
.ipwords span{ font-size:11.5px; letter-spacing:.19em; text-transform:uppercase;
  color:var(--gold-light); white-space:nowrap; text-shadow:0 1px 3px rgba(0,0,0,.85); }

@media (min-width:901px){
  .iphero{ padding-block:clamp(44px,4.6vw,70px); }
  /* the photo stops short of the right edge, leaving the black column the
     mockups run the gold word list down */
  .iphero .ipphoto{
    position:absolute; top:0; right:clamp(88px,9.4vw,168px); bottom:0; left:48%;
    -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,0) 10%,#000 34%);
            mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,0) 10%,#000 34%);
  }
  .iphero .wrap{ position:relative; }
  .iphero .ipcopy{ max-width:min(52%,600px); box-sizing:border-box;
    padding-right:clamp(20px,2.4vw,40px); }
  /* the gold word list must read whatever the photo is doing behind it */
  .iphero .ipphoto::after{ content:""; position:absolute; inset:0;
    background:linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,0) 58%,
      rgba(0,0,0,.28) 78%,rgba(0,0,0,.62) 92%,rgba(0,0,0,.88) 100%); }
  .iphero .ipwords{ position:absolute; top:clamp(30px,4vw,58px);
    right:clamp(14px,1.7vw,30px); z-index:2; }
}
@media (max-width:900px){
  /* stack photo, copy, then the word list; the section carries no padding of
     its own so the photo sits flush under the nav */
  .iphero{ display:flex; flex-direction:column; padding:0; }
  .iphero .ipphoto{ order:1; height:clamp(180px,48vw,280px); }
  .iphero .wrap{ order:2; padding-block:clamp(26px,6vw,38px); }
  .iphero .ipwords{ order:3; margin:0 0 clamp(22px,6vw,32px);
    padding-inline:clamp(16px,5vw,28px); }
}
/* Connect has no hero photo: the copy is centred */
@media (min-width:901px){ .iphero h1.oneline{ text-wrap:nowrap; } }
.iphero.plain .ipcopy{ max-width:74ch; margin-inline:auto; text-align:center;
  padding-right:0; }
.iphero.plain h1{ margin-inline:auto; }
.iphero.plain .iplede{ max-width:70ch; margin-inline:auto; }
.iphero.plain .ipeyebrow{ text-align:center; }

/* the small divided icon row under the Our Firm hero */
.iphrow{ display:flex; flex-wrap:wrap; margin-top:clamp(20px,2.4vw,30px); }
.iphrow > div{ display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:0 clamp(12px,1.6vw,22px); border-left:1px solid rgba(184,151,90,.4);
  text-align:center; }
.iphrow > div:first-child{ border-left:0; padding-left:0; }
.iphrow svg{ width:23px; height:23px; color:var(--gold-light); }
.iphrow span{ font-size:11.5px; line-height:1.35; color:var(--silver); max-width:13ch; }

/* --- centred section heading ------------------------------------------- */
.iphead{ text-align:center; margin:0 0 clamp(24px,3vw,40px); }
.iphead h2{
  font-size:clamp(24px,calc(22.7px + 1.06vw),38px); line-height:1.16; margin:0;
  font-family:"Cormorant Garamond",Georgia,serif; font-weight:400;
}
.iphead::after{ content:""; display:block; width:72px; height:1px;
  background:var(--gold); margin:clamp(12px,1.4vw,18px) auto 0; }
.iphead p{ margin:clamp(14px,1.6vw,20px) auto 0; max-width:70ch;
  font-size:clamp(14px,1.1vw,15.5px); line-height:1.6; color:var(--quiet); }
.dark .iphead h2{ color:var(--ivory); }
.dark .iphead p{ color:var(--silver); }

/* --- bordered cards ----------------------------------------------------- */
.ipcards{ display:grid; gap:clamp(14px,1.6vw,22px); }
.ipcards.n3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.ipcards.n4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.ipcards.n5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.ipcard{
  border:1px solid rgba(18,23,26,.16); padding:clamp(22px,2.6vw,32px) clamp(14px,1.8vw,24px);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(12px,1.4vw,17px);
}
.ipbadge{
  width:clamp(56px,calc(44px + 2.75vw),80px); height:clamp(56px,calc(44px + 2.75vw),80px);
  border-radius:50%;
  background:var(--tint); color:var(--gold);
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.ipbadge svg{ width:62%; height:62%; }
/* four and five across carry a slightly smaller card scale, as the mockups do */
.ipcards.n4 .ipbadge,.ipcards.n5 .ipbadge{
  width:clamp(50px,calc(39px + 2.45vw),70px); height:clamp(50px,calc(39px + 2.45vw),70px); }
.ipcards.n4 .ipcard h3,.ipcards.n5 .ipcard h3{
  font-size:clamp(17px,calc(14.8px + .58vw),21px); }
.ipcards.n4 .ipcard p,.ipcards.n5 .ipcard p{ font-size:13.6px; max-width:21ch; }
/* the mockup draws these icons without the tinted disc behind them */
.ipcards.plain .ipbadge{ background:none; width:auto; height:auto; border-radius:0; }
.ipcards.plain .ipbadge svg{ width:clamp(29px,calc(24px + .55vw),38px);
  height:clamp(29px,calc(24px + .55vw),38px); }
.ipcard h3{
  margin:0; text-wrap:balance;
  font-family:"Cormorant Garamond",Georgia,serif; font-weight:400;
  font-size:clamp(18px,calc(16.5px + .66vw),26px); line-height:1.2; color:var(--text);
}
.ipcard p{ margin:0 auto; max-width:23ch; font-size:14.2px; line-height:1.62;
  color:var(--quiet); }

/* --- dark bordered cards ------------------------------------------------ */
.ipdark{ display:grid; gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(3,minmax(0,1fr)); }
.ipdark .ipcard{ background:var(--ink-2); border-color:rgba(212,175,110,.30); }
.ipdark .ipcard svg{ width:clamp(26px,2.5vw,31px); height:clamp(26px,2.5vw,31px);
  color:var(--gold-light); }
.ipdark .ipcard h3{ color:var(--ivory); }
.ipdark .ipcard p{ color:var(--silver); max-width:26ch; }

/* --- split: photo one side, dark tiles the other ------------------------ */
.ipsplit{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:var(--ink); color:var(--ivory); padding:0; }
.ipsplit .ipphoto{ background-size:cover; background-position:center; min-height:clamp(320px,34vw,480px); }
.ipsplit .bd{ padding:clamp(28px,3.4vw,52px) clamp(22px,3vw,46px); align-self:center; }
.ipsplit h2{ font-family:"Cormorant Garamond",Georgia,serif; font-weight:400;
  font-size:clamp(22px,calc(20px + 1.4vw),40px); line-height:1.2;
  margin:0 0 clamp(18px,2.2vw,28px);
  color:var(--ivory); }
.iptiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px); }
.iptile{ border:1px solid rgba(212,175,110,.30); padding:clamp(16px,1.8vw,22px);
  display:flex; flex-direction:column; gap:9px; }
.iptile svg{ width:25px; height:25px; color:var(--gold-light); }
.iptile b{ font-family:"Cormorant Garamond",Georgia,serif; font-weight:400;
  font-size:clamp(16px,calc(13px + .72vw),23px); line-height:1.2; color:var(--ivory); }
.iptile small{ font-size:13.4px; line-height:1.58; color:var(--silver); }

/* --- centred pull quote -------------------------------------------------- */
.ippull{ text-align:center; padding-block:clamp(30px,3.6vw,52px); background:var(--ivory); }
.ippull p{
  margin:0 auto; max-width:none; text-wrap:balance;
  font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-weight:400;
  font-size:clamp(21px,calc(17px + 1.5vw),40px); line-height:1.25; color:var(--text);
}
.ippull::before,.ippull::after{ content:""; display:block; width:72px; height:1px;
  background:var(--gold); margin:0 auto; }
.ippull::before{ margin-bottom:clamp(18px,2.2vw,28px); }
.ippull::after{ margin-top:clamp(18px,2.2vw,28px); }

/* --- divided icon row on black -------------------------------------------- */
.ipdiv{ display:grid; gap:0; grid-template-columns:repeat(4,minmax(0,1fr)); }
.ipdiv > div{ padding:clamp(6px,1vw,14px) clamp(14px,2vw,26px); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  border-left:1px solid rgba(212,175,110,.34); }
.ipdiv > div:first-child{ border-left:0; }
.ipdiv svg{ width:clamp(27px,2.6vw,33px); height:clamp(27px,2.6vw,33px); color:var(--gold-light); }
.ipdiv b{ font-family:"Cormorant Garamond",Georgia,serif; font-weight:400;
  font-size:clamp(17px,calc(14px + .85vw),23px); line-height:1.2; color:var(--ivory);
  text-wrap:balance; }
.ipdiv small{ font-size:13.8px; line-height:1.58; color:var(--silver); max-width:27ch; }

/* --- numbered steps -------------------------------------------------------- */
.ipsteps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px); }
.ipstep{ border:1px solid rgba(18,23,26,.16); padding:clamp(20px,2.4vw,30px);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
.ipnum{ width:clamp(46px,calc(36px + 2.2vw),66px); height:clamp(46px,calc(36px + 2.2vw),66px);
  border-radius:50%; background:var(--tint); color:var(--text); display:grid; place-items:center;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(19px,calc(15px + .85vw),27px); }
.ipstep b{ font-family:"Cormorant Garamond",Georgia,serif; font-weight:400;
  font-size:clamp(18px,calc(16.5px + .66vw),26px); line-height:1.2; color:var(--text); }
.ipstep small{ font-size:14.2px; line-height:1.62; color:var(--quiet); max-width:27ch; }
/* Our Firm shows the number beside the title rather than above it */
.ipsteps.inline .ipstep{ flex-direction:row; align-items:flex-start; text-align:left;
  flex-wrap:wrap; gap:0 clamp(13px,1.5vw,18px); }
.ipsteps.inline .ipnum{ flex:0 0 auto; }
.ipsteps.inline .ipstep b{ align-self:center; }
.ipsteps.inline .ipstep small{ flex:1 0 100%; margin-top:9px; }

/* --- the retention table ----------------------------------------------------- */
.iptable{ width:100%; border-collapse:collapse; font-size:clamp(13.5px,1.05vw,15px); }
.iptable th{
  text-align:left; padding:0 clamp(12px,1.4vw,18px) 11px; font-size:11px; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; color:var(--quiet);
  border-bottom:1px solid rgba(18,23,26,.30);
}
.iptable td{ padding:clamp(13px,1.5vw,17px) clamp(12px,1.4vw,18px); vertical-align:top;
  line-height:1.55; color:var(--text); border-bottom:1px solid rgba(18,23,26,.14); }
.iptable td:first-child{ padding-left:0; }
.iptable td + td{ border-left:1px solid rgba(18,23,26,.14); }
.iptable tr:last-child td{ border-bottom:0; }
.ipnote{ margin:clamp(14px,1.6vw,20px) 0 0; text-align:center; font-size:12.5px;
  line-height:1.55; color:var(--quiet); }
.iptablewrap{ overflow-x:auto; }

/* --- leadership card ---------------------------------------------------------- */
.ipleader{ border:1px solid rgba(18,23,26,.16); display:grid;
  grid-template-columns:minmax(0,210px) minmax(0,1fr); gap:clamp(20px,2.6vw,38px);
  align-items:center; padding:clamp(18px,2vw,26px); max-width:800px; margin-inline:auto; }
.ipleader .ipphoto{ background-size:cover; background-position:center top;
  aspect-ratio:3/4; }
.ipleader h3{ margin:0 0 6px; font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:400; font-size:clamp(21px,calc(17px + .95vw),30px); line-height:1.2;
  color:var(--text); }
.ipleader .role{ margin:0 0 clamp(12px,1.4vw,17px); font-size:11px; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; color:var(--gold); }
.ipleader p{ margin:0; font-size:14.5px; line-height:1.62; color:var(--quiet); }

/* --- reserved slot --------------------------------------------------------------- */
.ipslot{ min-height:clamp(220px,26vw,380px); }

/* --- the connect form ------------------------------------------------------------- */
.ipform{ background:var(--ivory); color:var(--text); padding:clamp(24px,3vw,40px);
  max-width:620px; margin-inline:auto; display:flex; flex-direction:column;
  gap:clamp(14px,1.7vw,20px); }
.ipform .row{ display:grid; gap:clamp(14px,1.7vw,20px); }
.ipform .row.two{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.ipform label{ display:block; margin:0 0 8px; font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--quiet); }
.ipform input,.ipform textarea{
  width:100%; box-sizing:border-box; background:var(--surface); color:var(--text);
  border:1px solid rgba(18,23,26,.22); padding:13px 14px; font:inherit; font-size:15px;
}
.ipform textarea{ min-height:118px; resize:vertical; }
.ipform input:focus-visible,.ipform textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:1px; }
.ipform button{
  background:var(--ink); color:var(--gold-light); border:1px solid var(--ink);
  padding:15px 20px; font:inherit; font-size:12.5px; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; cursor:pointer; transition:background .18s,color .18s;
}
.ipform button:hover,.ipform button:focus-visible{ background:var(--gold); color:var(--ink);
  border-color:var(--gold); }

/* --- centred closing band ---------------------------------------------------------- */
.ipcta{ background:var(--ink); color:var(--ivory); text-align:center;
  padding-block:clamp(38px,4.4vw,64px); }
.ipcta h2{ margin:0 auto clamp(12px,1.4vw,17px); max-width:none; text-wrap:balance;
  font-family:"Cormorant Garamond",Georgia,serif; font-weight:400;
  font-size:clamp(25px,calc(26px + 1.18vw),43px); line-height:1.18; color:var(--ivory); }
.ipcta p{ margin:0 auto clamp(20px,2.4vw,30px); max-width:66ch;
  font-size:clamp(14.5px,calc(13.4px + .12vw),16.5px); line-height:1.62; color:var(--silver); }
.ipbtns{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.ipbtn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--gold); color:var(--ink); border:1px solid var(--gold);
  padding:15px clamp(22px,2.6vw,34px); font-size:12.5px; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; text-decoration:none;
  transition:background .18s,color .18s;
}
.ipbtn:hover,.ipbtn:focus-visible{ background:var(--gold-light); border-color:var(--gold-light); }
.ipbtn.ghost{ background:transparent; color:var(--ivory); border-color:rgba(245,240,232,.5); }
.ipbtn.ghost:hover,.ipbtn.ghost:focus-visible{ background:var(--ivory); color:var(--ink);
  border-color:var(--ivory); }

/* --- responsive ------------------------------------------------------------------- */
@media (max-width:900px){
  .ipcards.n5{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ipcards.n4,.ipdiv{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ipdark{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ipdiv > div{ border-left:0; border-top:1px solid rgba(212,175,110,.34);
    padding-block:clamp(16px,2.4vw,22px); }
  .ipdiv > div:nth-child(-n+2){ border-top:0; }
}
@media (max-width:760px){
  .ipcards.n3,.ipcards.n4,.ipcards.n5,.ipdark,.ipsteps,.ipdiv,
  .iptiles,.ipsplit{ grid-template-columns:minmax(0,1fr); }
  .ipdiv > div{ border-top:1px solid rgba(212,175,110,.34); }
  .ipdiv > div:first-child{ border-top:0; }
  .ipsplit .ipphoto{ min-height:clamp(200px,52vw,300px); }
  .ipleader{ grid-template-columns:minmax(0,1fr); text-align:center; }
  .ipleader .ipphoto{ max-width:230px; margin-inline:auto; aspect-ratio:3/4; }
  .ipform .row.two{ grid-template-columns:minmax(0,1fr); }
  .iphrow > div{ border-left:0; padding-inline:0; flex:1 0 44%; }
  .ipbtn{ width:100%; }
}


/* ---- Hathor Entertainment ---- */
:root{ --img-ha-catalog:url("/wp-content/themes/hathor-entertainment/assets/img/catalog.jpg?v=176"); --img-ha-licensing:url("/wp-content/themes/hathor-entertainment/assets/img/licensing.jpg?v=176"); --img-ha-custom:url("/wp-content/themes/hathor-entertainment/assets/img/custom.jpg?v=176"); --img-ha-supervisors:url("/wp-content/themes/hathor-entertainment/assets/img/supervisors.jpg?v=176"); --img-ha-agencies:url("/wp-content/themes/hathor-entertainment/assets/img/agencies.jpg?v=176"); --img-ha-artists:url("/wp-content/themes/hathor-entertainment/assets/img/artists.jpg?v=176"); --img-ha-submit:url("/wp-content/themes/hathor-entertainment/assets/img/submit.jpg?v=176"); --img-ha-roster:url("/wp-content/themes/hathor-entertainment/assets/img/roster.jpg?v=176"); --img-ha-niara:url("/wp-content/themes/hathor-entertainment/assets/img/niara.jpg?v=176"); --img-ha-recorded:url("/wp-content/themes/hathor-entertainment/assets/img/recorded.jpg?v=176"); --img-ha-publishing:url("/wp-content/themes/hathor-entertainment/assets/img/publishing.jpg?v=176"); --img-ha-merch:url("/wp-content/themes/hathor-entertainment/assets/img/merch.jpg?v=176"); --img-ha-about:url("/wp-content/themes/hathor-entertainment/assets/img/about.jpg?v=176"); --img-ha-story:url("/wp-content/themes/hathor-entertainment/assets/img/story.jpg?v=176"); --img-ha-press:url("/wp-content/themes/hathor-entertainment/assets/img/press.jpg?v=176"); --img-ha-careers:url("/wp-content/themes/hathor-entertainment/assets/img/careers.jpg?v=176"); --img-ha-connect:url("/wp-content/themes/hathor-entertainment/assets/img/connect.jpg?v=176"); --img-ha-cat-vinyl:url("/wp-content/themes/hathor-entertainment/assets/img/cat-vinyl.jpg?v=176"); --img-ha-cat-strings:url("/wp-content/themes/hathor-entertainment/assets/img/cat-strings.jpg?v=176"); --img-ha-cat-score:url("/wp-content/themes/hathor-entertainment/assets/img/cat-score.jpg?v=176"); --img-ha-cat-studio:url("/wp-content/themes/hathor-entertainment/assets/img/cat-studio.jpg?v=176");
  --logo-image:url("/wp-content/themes/hathor-entertainment/assets/img/logo.png?v=176");
  --img-ha-console:url("/wp-content/themes/hathor-entertainment/assets/img/console.jpg?v=176");
  --hero-image:url("/wp-content/themes/hathor-entertainment/assets/img/hero.jpg?v=176");
  --img-ha-nia:url("/wp-content/themes/hathor-entertainment/assets/img/nia.png?v=176");
  --img-ha-ceo:url("/wp-content/themes/hathor-entertainment/assets/img/nia.png?v=176");
}

/* The real wordmark file from the Brand Kit. MK-242: never retyped in house type. */
.brand .logo{ width:clamp(64px,6.6vw,84px); aspect-ratio:1.655/1; }

/* Placeholder image areas, marked so nobody mistakes one for art direction. */
.ph{ background-image:radial-gradient(120%% 90%% at 72%% 18%%, rgba(184,151,90,.16) 0%%, rgba(184,151,90,0) 58%%),linear-gradient(158deg,#171C20 0%%, #0D0F10 52%%, #000000 100%%) !important; background-size:auto,cover; position:relative; }

/* EBMG's badge values are numerals, so they are set in the display size.
   The Hathor equivalents are short phrases, which wrap badly at
   48px. Same bar, sized for words. */
.badgebar .indcol .num{ font-size:clamp(19px,1.9vw,25px); line-height:1.15; white-space:nowrap; }
@media (max-width:560px){ .badgebar .indcol .num{ white-space:normal; } }

/* EBMG's stat row is built for four figures. The representation evidence is
   three, led by the producer number because it is the worst of them. */
.statrow.n3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:720px){ .statrow.n3{ grid-template-columns:minmax(0,1fr); }
  .statrow.n3 .stat:nth-child(2){ border-top:1px solid rgba(245,240,232,.26); } }
.statsrc{ margin:clamp(16px,1.8vw,22px) 0 0; font-size:11.5px; letter-spacing:.04em;
  color:var(--silver); }

/* The founder panel takes the proof grid's quote slot. A portrait, a name and
   the company's own position. MK-242 section 6 is rectilinear, so the portrait
   is squared rather than the circular crop the earlier comp used. No words are
   set in quotation marks, because none of them were said by a person. */
.founderpanel{ align-items:flex-start; text-align:left;
  gap:clamp(20px,2.4vw,30px); justify-content:center; }
/* Her own file is a circular crop with nothing outside it, and the Hathor mark
   is itself a circle, so the portrait stays round. */
.founderphoto{ flex:0 0 auto; width:clamp(104px,10.7vw,154px); aspect-ratio:1;
  background-image:var(--img-ha-nia); background-size:cover;
  background-repeat:no-repeat; background-position:center; border-radius:50%;
  position:relative; isolation:isolate;
  filter:saturate(.62) brightness(.74) contrast(1.05); }
/* A warm dark wash so the one daylight photograph on the site sits down into
   the black ground instead of pulling the eye off the hero. */
.founderphoto::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:linear-gradient(180deg, rgba(184,151,90,.13) 0%, rgba(0,0,0,.30) 46%,
    rgba(0,0,0,.52) 100%);
}
.foundertext{ display:flex; flex-direction:column; gap:6px; min-width:0; width:100%; }
.foundertext .fname{ margin:0; font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(24px,2.4vw,31px); line-height:1.12; color:var(--ivory); }
.foundertext .qattr{ margin:0; }
.foundertext .founderphoto{ align-self:flex-start;
  margin:clamp(14px,1.8vw,22px) 0 clamp(16px,2vw,24px); }
/* The sign off is her first name set in a script face. It is typography, not a
   reproduction of her handwriting, and it is a third type family, so MK-242
   section 4 makes it an owner approved exception. */
.fsign{ margin:clamp(14px,1.6vw,20px) 0 0; font-family:"Allura","Snell Roundhand","Apple Chancery","Segoe Script",cursive;
  font-size:clamp(36px,4vw,50px); line-height:1; color:var(--gold-light);
  letter-spacing:.01em; }
.foundertext .fbody{ margin:0; font-size:14.5px; line-height:1.68;
  color:var(--silver); }


/* EBMG's card grid defines three, four and five across. Hathor needs one and
   two as well, for the single signed artist and the two deal paths. */
.ipcards.n2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.ipcards.n1{ grid-template-columns:minmax(0,1fr); max-width:520px; margin-inline:auto; }
@media (max-width:700px){ .ipcards.n2{ grid-template-columns:minmax(0,1fr); } }

/* Empty state slots carry a line rather than nothing at all. */
.ipslot[data-slot]{ min-height:0; display:flex; align-items:center; justify-content:center;
  padding-block:clamp(10px,1.4vw,18px); }
.ipslot[data-slot]::before{
  content:attr(data-slot); font-family:"DM Sans",system-ui,sans-serif;
  font-size:15.5px; line-height:1.6; letter-spacing:.01em; color:var(--quiet);
  text-align:center; max-width:52ch;
}


/* ==================================================================
   WordPress
   The artifact had no editor behind it. These are the rules a page
   typed as ordinary prose needs, and the few places WordPress puts
   markup of its own on the page.
   ================================================================== */

/* Prose, and only prose. A page built from the theme's patterns carries
   .is-patterned, and nothing below touches it: the design's own classes have
   lower specificity than .entry-content h2, so an unscoped rule here would
   silently override the band it sits in. */
.entry-content:not(.is-patterned){ max-width:812px; margin-inline:auto; }
.entry-content:not(.is-patterned) > * + *{ margin-top:1.1em; }
.entry-content:not(.is-patterned) h2{
  font-family:"Cormorant Garamond",Georgia,serif; font-weight:500;
  font-size:clamp(28px,3vw,40px); line-height:1.16; margin-top:1.7em; }
.entry-content:not(.is-patterned) h3{
  font-family:"Cormorant Garamond",Georgia,serif; font-weight:500;
  font-size:clamp(22px,2.2vw,28px); line-height:1.2; margin-top:1.5em; }
.entry-content:not(.is-patterned) p,
.entry-content:not(.is-patterned) li{ font-size:18px; line-height:1.7; }
.entry-content:not(.is-patterned) ul,
.entry-content:not(.is-patterned) ol{ padding-left:1.3em; }
.entry-content:not(.is-patterned) blockquote{
  border-left:2px solid var(--gold); padding-left:20px; font-style:italic; }
.entry-content:not(.is-patterned) img{ height:auto; max-width:100%; }
.entry-content:not(.is-patterned) a{ color:#8A6E33; }
.entry-content.is-patterned > * + *{ margin-top:0; }

/* The alignment classes the editor writes. */
.alignwide{ max-width:1140px; margin-inline:auto; }
.alignfull{ max-width:none; margin-inline:calc(50% - 50vw); width:100vw; }
.alignleft{ float:left; margin:0 1.4em .8em 0; }
.alignright{ float:right; margin:0 0 .8em 1.4em; }
.aligncenter{ margin-inline:auto; display:block; }
.wp-caption-text,figcaption{ font-size:14px; color:var(--silver); margin-top:8px; }
.screen-reader-text{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; }
.skip-link:focus{
  position:fixed; top:10px; left:10px; z-index:999; width:auto; height:auto;
  clip:auto; padding:12px 18px; background:var(--ink); color:var(--ivory); }

/* The admin bar sits over the top of a fixed header, so make room for it. */
body.admin-bar .topbar{ top:32px; }
@media screen and (max-width:782px){ body.admin-bar .topbar{ top:46px; } }

/* wp_nav_menu puts a <ul> inside the copyright <p>, which is markup a browser
   will not keep: it closes the paragraph, and the links drop to their own
   line. Making the paragraph inline is what holds the row together. */
footer .legal > p{ display:inline; margin:0; }
footer .legal > p:empty{ display:none; }
footer ul.legalmenu{
  display:inline; margin:0 0 0 6px; padding:0; list-style:none; }
footer ul.legalmenu li{ display:inline; }
footer ul.legalmenu li + li::before{
  content:"|"; padding:0 8px; color:rgba(245,240,232,.34); }
footer .legalmenu a{ font-size:inherit; }

/* ------------------------------------------------------------------
   Where each photograph is anchored inside its slot.

   .ipsplit .ipphoto centres the crop, which is right when the subject
   is in the middle of the frame and wrong when it is not. The careers
   picture is taller than its slot and both faces sit in the top half,
   so a centred crop takes the tops of the heads off and fills the
   bottom third with clothing. Anchoring to the top keeps the faces and
   drops the clothing instead. These come out slot by slot as Hathor's
   own photography replaces the stand ins.
   ------------------------------------------------------------------ */
.ipsec.careersband .ipsplit .ipphoto{ background-position:50% 0%; }

/* ------------------------------------------------------------------
   Band spacing, matched to the Our Agency page.

   Both sites share the same base rules, and Rhythm & Brands tightens
   them again further down its stylesheet. Hathor inherited only the
   base, so every band sat about 12px taller and every heading about
   10px further from its content. These are that site's own values.
   ------------------------------------------------------------------ */
.ipsec{ padding-block:clamp(28px,3.2vw,46px); }
.iphead{ margin-bottom:clamp(16px,2.1vw,30px); }
.iphero{ padding-block:clamp(40px,4.45vw,64px); }
.ipcards.n4{ gap:clamp(8px,.85vw,9px); }
.ipcards.n4 .ipcard,.ipcards.n5 .ipcard{ padding-inline:clamp(9px,.8vw,10px); }
.ipdark.ipcards.n3 .ipcard{ padding-inline:clamp(14px,1.5vw,20px); }

/* Our Agency tightens its impact band further than the rest, keyed on that
   section's own id. Three short cards under a heading and a subhead do not
   need the full band padding, and the same is true here. */
#sec-about-impact{ padding-block:clamp(24px,2.6vw,37px); }
#sec-about-impact .iphead{ margin-bottom:clamp(10px,1.05vw,15px); }

/* The sign off under the contact copy. Set like the eyebrow so it reads as a
   closing statement rather than an orphaned line of body text. */
.ipsplit .bd .ipclose{
  margin:clamp(20px,2.4vw,32px) 0 0; font-family:"DM Sans",system-ui,sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-light); }

/* The founder portrait is a round crop on a transparent ground. Filling the
   band with it means cropping into the circle, which takes the top of her
   head off, so it is shown whole and centred on the band's black instead.
   That is a deliberate round portrait, the same treatment the homepage
   founder panel uses, rather than a photograph with its edges cut. */
.ipsec.leadband .ipsplit .ipphoto{
  background-size:contain; background-repeat:no-repeat;
  background-position:center; }

/* ------------------------------------------------------------------
   The contact form in the split band.

   Hathor's base stylesheet draws every form as an ivory card. On this
   band the form stands on the band's own photograph, so a card puts a
   second panel on top of the picture and makes the band 113px taller
   than Our Agency's. That page uses an inset variant instead: no card,
   the label carried inside the field, a shorter message box and a gold
   submit. These are its rules.
   ------------------------------------------------------------------ */
.ipsplit .bd.formside .ipform{ width:100%; margin:0; }
.ipform.inset{ background:none; padding:0; gap:9px; }
.ipform.inset .row + .row,.ipform.inset button{ margin-top:0; }
.ipform.inset label{ position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.ipform.inset input,.ipform.inset textarea{
  background:rgba(0,0,0,.55); border:1px solid rgba(212,175,110,.42);
  color:var(--ivory); padding:10px 18px; font-size:18px; }
.ipform.inset input::placeholder,.ipform.inset textarea::placeholder{
  color:rgba(245,240,232,.62); opacity:1; }
.ipform.inset input:focus-visible,.ipform.inset textarea:focus-visible{
  border-color:var(--gold-light); outline:none; background:rgba(245,240,232,.075); }
.ipform.inset textarea{ min-height:62px; }
.ipform.inset button{
  width:100%; background:var(--gold); color:var(--ink); border:1px solid var(--gold);
  padding:11px 24px; font-size:18px; font-weight:700; letter-spacing:.02em;
  text-transform:none; }
.ipform.inset button:hover,.ipform.inset button:focus-visible{
  background:var(--gold-light); border-color:var(--gold-light); color:var(--ink); }
.ipsplit .bd .ipeyebrow{ margin:0 0 clamp(10px,1.2vw,14px); }
.ipsplit .bd .ipform{ margin-top:clamp(16px,2vw,24px); }
.ipsplit .bd .iphbtns{ margin-top:clamp(16px,2vw,24px); }


/* ==================================================================
   The Who We Serve page
   A layout of its own, built to the approved mockup: a split hero
   with the word list over the photograph, three picture cards, a
   ringed four column row, a numbered three step row, a split
   collaboration band, and a contact bar one line deep.
   Every measurement here was taken off the mockup and checked
   against the rendered page, band by band.
   ================================================================== */
.svwrap{ max-width:1400px; margin:0 auto; padding-inline:clamp(20px,4.2vw,60px); }
.sveyebrow{ margin:0 0 clamp(8px,1vw,13px); font-family:"DM Sans",system-ui,sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); }
.sveyebrow.light{ color:var(--ivory); letter-spacing:.22em; }
.svsec{ padding-block:clamp(17px,1.67vw,24px); }
.svsec.ivory{ background:var(--ivory); color:var(--text); }
.svsec.dark{ background:var(--ink); color:var(--ivory); }
.svsec h2,.svsplit h2{ font-family:"Cormorant Garamond",Georgia,serif; font-weight:400;
  font-size:clamp(30px,calc(23px + 1.75vw),49px); line-height:1.08; margin:0; }

/* the heading row: title left, a short aside behind a rule on the right */
.svtop{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:clamp(20px,4vw,64px); margin-bottom:clamp(12px,1.3vw,19px); }
.svaside{ margin:0; align-self:center; max-width:46ch; font-size:15px; line-height:1.55;
  color:var(--quiet); border-left:1px solid rgba(18,23,26,.20);
  padding-left:clamp(16px,2vw,28px); }
.svsec.dark .svaside{ color:var(--silver); border-left-color:rgba(245,240,232,.22); }

/* ---- hero ---- */
.svhero{ padding:0; position:relative; background:var(--ink); color:var(--ivory); overflow:hidden;
  min-height:clamp(330px,32.2vw,463px); display:flex; align-items:center; }
.svhphoto{ position:absolute; inset:0 0 0 44%; background-size:cover;
  background-position:center; }
.svhphoto::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, #000 0%, rgba(0,0,0,.72) 26%, rgba(0,0,0,.10) 68%); }
.svhwords{ position:absolute; right:clamp(20px,4.2vw,60px); top:clamp(22px,3vw,42px);
  display:flex; flex-direction:column; gap:clamp(4px,.5vw,8px); z-index:3;
  font-family:"DM Sans",system-ui,sans-serif; font-size:12.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(245,240,232,.92);
  text-align:right; }
.svhwords::after{ content:""; display:block; width:34px; height:1px;
  background:var(--gold); margin-top:6px; margin-left:auto; }
.svhcopy{ position:relative; z-index:2; width:min(53%,700px);
  padding:clamp(24px,2.8vw,40px) clamp(16px,2vw,28px)
    clamp(18px,2vw,28px) clamp(20px,4.2vw,60px); }
.svhcopy h1{ font-family:"Cormorant Garamond",Georgia,serif; font-weight:400;
  font-size:clamp(31px,calc(23px + 2.1vw),52px); line-height:1.1; margin:0;
  color:var(--ivory); }
.svhcopy h1 em{ font-style:normal; color:var(--gold-light); }
.svlede{ margin:clamp(10px,1.2vw,17px) 0 0; font-size:17px; line-height:1.62;
  color:rgba(245,240,232,.80); }
.svbtns{ display:flex; flex-wrap:wrap; gap:clamp(10px,1.2vw,16px);
  margin-top:clamp(13px,1.4vw,19px); }
.svbtns .btn{ font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; padding:13px clamp(18px,2.2vw,30px); }
/* The second button stands on the black band, so it is an outline in cream
   rather than the base rule's dark text, which was invisible here. */
.svhero .svbtns .btn:not(.key){ background:none; color:var(--ivory);
  border:1px solid rgba(245,240,232,.55); }
.svhero .svbtns .btn:not(.key):hover,
.svhero .svbtns .btn:not(.key):focus-visible{
  border-color:var(--gold-light); color:var(--gold-light); }

/* ---- the three picture cards ---- */
.svcards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid rgba(18,23,26,.14); }
.svcard{ padding:clamp(14px,1.6vw,22px); display:flex; flex-direction:column; }
.svcard + .svcard{ border-left:1px solid rgba(18,23,26,.14); }
.svshot{ display:block; aspect-ratio:2.39/1; background-size:cover;
  background-position:center; margin-bottom:clamp(12px,1.4vw,18px); }
.svcard h3{ font-family:"Cormorant Garamond",Georgia,serif; font-weight:400;
  font-size:clamp(20px,1.85vw,26px); line-height:1.15; margin:0 0 clamp(6px,.8vw,10px); }
.svcard p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--quiet); }
.svarrow{ margin-top:clamp(10px,1.2vw,16px); color:var(--gold);
  font-size:19px; line-height:1; }

/* ---- why partners choose Hathor ---- */
.svwrow{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.svwcell{ text-align:center; padding:clamp(6px,1vw,14px) clamp(10px,1.4vw,20px); }
.svwcell + .svwcell{ border-left:1px solid rgba(245,240,232,.18); }
.svring{ display:inline-flex; align-items:center; justify-content:center;
  width:clamp(40px,3.6vw,50px); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(212,175,110,.55); color:var(--gold-light);
  margin-bottom:clamp(9px,1.1vw,14px); }
.svring svg{ width:46%; height:46%; }
.svwlab{ margin:0 0 clamp(6px,.7vw,9px); font-family:"DM Sans",system-ui,sans-serif;
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-light); }
.svwcell p:not(.svwlab){ margin:0; font-size:14px; line-height:1.6;
  color:rgba(245,240,232,.82); }

/* ---- how we work ---- */
.svsteps{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:start; gap:clamp(8px,1.4vw,20px); }
.svstep{ text-align:center; }
.svnum{ display:inline-flex; align-items:center; justify-content:center;
  width:clamp(34px,2.9vw,40px); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(184,151,90,.65); color:var(--gold);
  font-family:"Cormorant Garamond",Georgia,serif; font-size:17px;
  margin-bottom:clamp(8px,1vw,13px); }
.svstep b{ display:block; font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:400; font-size:clamp(19px,1.7vw,24px); line-height:1.15;
  margin-bottom:clamp(4px,.6vw,8px); }
.svstep small{ display:block; font-size:14px; line-height:1.6; color:var(--quiet); }
.svline{ height:1px; background:rgba(18,23,26,.22); margin-top:clamp(17px,1.45vw,20px);
  min-width:clamp(40px,9vw,150px); }

/* ---- designed for real collaboration ---- */
.svsplit{ padding:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:var(--ink); color:var(--ivory); }
.svscopy{ padding:clamp(18px,1.9vw,27px) clamp(24px,3vw,44px)
  clamp(18px,1.9vw,27px) clamp(20px,4.2vw,60px); align-self:center; }
.svscopy h2{ color:var(--ivory); margin-bottom:clamp(10px,1.2vw,16px); }
.svscopy > p{ margin:0; font-size:15.5px; line-height:1.62;
  color:rgba(245,240,232,.80); }
.svsphoto{ background-size:cover; background-position:center;
  min-height:clamp(230px,23.06vw,332px); }

/* ---- the contact bar ---- */
.svconnect .svcrow{ display:flex; align-items:center; justify-content:space-between;
  gap:clamp(20px,4vw,60px); }
.svconnect h2{ margin:0 0 clamp(6px,.8vw,11px); }
.svconnect .svcrow > div:first-child > p:last-child{ margin:0; font-size:15.5px;
  line-height:1.6; color:var(--quiet); }
.svcbtn{ flex:0 0 auto; border-left:1px solid rgba(18,23,26,.20);
  padding-left:clamp(20px,3vw,44px); }
.svcbtn .btn{ font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; padding:14px clamp(20px,2.4vw,32px); }

@media (max-width:900px){
  .svhero{ display:block; }
  .svhphoto{ position:relative; inset:auto; height:clamp(200px,44vw,300px); }
  .svhphoto::before{ background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55)); }
  .svhcopy{ width:100%; padding-inline:clamp(20px,4.2vw,60px); }
  .svhwords{ display:none; }
  .svtop{ flex-direction:column; gap:14px; }
  .svaside{ border-left:0; padding-left:0; align-self:flex-start; }
  .svcards{ grid-template-columns:minmax(0,1fr); }
  .svcard + .svcard{ border-left:0; border-top:1px solid rgba(18,23,26,.14); }
  .svwrow{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:22px; }
  .svwcell:nth-child(odd){ border-left:0; }
  .svsteps{ grid-template-columns:minmax(0,1fr); gap:24px; }
  .svline{ display:none; }
  .svsplit{ grid-template-columns:minmax(0,1fr); }
  .svconnect .svcrow{ flex-direction:column; align-items:flex-start; gap:18px; }
  .svcbtn{ border-left:0; padding-left:0; }
}
@media (max-width:560px){
  .svwrow{ grid-template-columns:minmax(0,1fr); }
  .svwcell + .svwcell{ border-left:0; border-top:1px solid rgba(245,240,232,.18);
    padding-top:20px; }
}


/* ==================================================================
   The Catalog page
   Built to the approved mockup: a dark hero with the line of capitals
   at the right edge, then four bands that alternate ivory and black,
   each of them copy on one side and art on the other, closed by a
   band with the photograph on the left. Every band sets padding
   explicitly, because the bare section rule higher up this sheet puts
   96px on anything that does not.
   ================================================================== */
.catwrap{ max-width:1400px; margin:0 auto; padding-inline:clamp(20px,4.2vw,60px); }
.cateyebrow{ margin:0 0 clamp(9px,1.1vw,15px); font-family:"DM Sans",system-ui,sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); }
.cateyebrow.light{ letter-spacing:.22em; }
.catbtns{ display:flex; flex-wrap:wrap; gap:clamp(10px,1.2vw,16px);
  margin-top:clamp(16px,1.9vw,27px); }
.catbtns .btn{ font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; padding:14px clamp(20px,2.4vw,32px); }

/* The stacked capitals the mockup sets over a photograph. The modifier names
   are prefixed because the plain words are already spoken for higher up this
   sheet: a second class of "hero" here picked up the homepage hero's own
   rule and gave this block a 960 by 540 box. */
.catmark{ position:absolute; z-index:3; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:stretch;
  width:max-content; gap:clamp(4px,.55vw,8px);
  font-family:"DM Sans",system-ui,sans-serif; font-size:12px; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase; color:rgba(245,240,232,.92);
  line-height:1.25; }
.catmark.catmedge{ right:clamp(20px,4.2vw,60px); text-align:right;
  padding-right:clamp(12px,1.4vw,20px);
  border-right:1px solid rgba(212,175,110,.75); }
.catmark.catmover{ left:clamp(16px,2.2vw,32px); }
.catmark.catmoverr{ right:clamp(20px,3.2vw,46px);
  padding-left:clamp(12px,1.4vw,20px);
  border-left:1px solid rgba(212,175,110,.75); }

/* ---- hero ---- */
.cathero{ padding:0; position:relative; background:var(--ink); color:var(--ivory);
  overflow:hidden; min-height:clamp(330px,30.5vw,439px); display:flex; align-items:center; }
.cathphoto{ position:absolute; inset:0 0 0 36%; background-size:cover;
  background-position:center; }
.cathphoto::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.72) 16%, rgba(0,0,0,.22) 46%, rgba(0,0,0,0) 72%); }
.cathcopy{ position:relative; z-index:2; width:min(56%,740px);
  padding:clamp(24px,2.6vw,38px) clamp(16px,2vw,28px)
    clamp(18px,1.8vw,26px) clamp(20px,4.2vw,60px); }
.cathcopy h1{ font-family:"Cormorant Garamond",Georgia,serif; font-weight:400;
  font-size:clamp(33px,calc(22px + 2.5vw),58px); line-height:1.08; margin:0;
  color:var(--ivory); }
.cathsub{ margin:clamp(12px,1.35vw,19px) 0 0; font-family:"DM Sans",system-ui,sans-serif;
  font-size:17px; line-height:1.5; color:var(--ivory); }
.cathbody{ margin:clamp(12px,1.35vw,19px) 0 0; font-size:15.5px; line-height:1.6;
  color:rgba(245,240,232,.74); }

/* ---- the four bands ---- */
.catsec{ padding-block:clamp(22px,2.3vw,33px); }
.catsec.ivory{ background:var(--ivory); color:var(--text); }
.catsec.dark{ background:var(--ink); color:var(--ivory); }
.catrow{ display:grid; grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);
  gap:clamp(22px,3.4vw,50px); align-items:center; }
.catcopy h2{ font-family:"Cormorant Garamond",Georgia,serif; font-weight:400;
  font-size:clamp(31px,calc(21px + 2.2vw),52px); line-height:1.06; margin:0; }
.catsec.dark .catcopy h2{ color:var(--ivory); }
.catsub{ margin:clamp(9px,1.1vw,15px) 0 0; font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(17px,1.45vw,21px); line-height:1.35; color:var(--text); }
.catsec.dark .catsub{ color:var(--ivory); }
.catbody{ margin:clamp(12px,1.35vw,19px) 0 0; font-size:15px; line-height:1.62;
  color:var(--quiet); }
.catsec.dark .catbody{ color:rgba(245,240,232,.78); }

/* ---- the collage ---- */
.catgal{ display:grid; grid-template-columns:minmax(0,1.52fr) minmax(0,1fr);
  gap:clamp(6px,.75vw,11px); }
.catgtall{ position:relative; display:block; background-size:cover;
  background-position:center; min-height:clamp(210px,24.03vw,346px); }
.catgcol{ display:grid; grid-template-rows:repeat(2,minmax(0,1fr));
  gap:clamp(6px,.75vw,11px); }
.catgshot{ display:block; background-size:cover; background-position:center; }

/* ---- the four cells ---- */
.catcells{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:center; min-height:clamp(200px,23.75vw,342px);
  gap:clamp(16px,2.1vw,30px) clamp(16px,2.4vw,34px);
  border-left:1px solid rgba(245,240,232,.22);
  padding-left:clamp(20px,3.2vw,46px); }
.catcell{ text-align:center; }
.catico{ display:inline-flex; align-items:center; justify-content:center;
  width:clamp(26px,2.1vw,30px); aspect-ratio:1; color:var(--gold-light);
  margin-bottom:clamp(8px,1vw,13px); }
.catico svg{ width:100%; height:100%; }
.catclab{ margin:0 0 clamp(5px,.65vw,9px); font-family:"DM Sans",system-ui,sans-serif;
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-light); }
.catcell p:not(.catclab){ margin:0; font-size:14px; line-height:1.58;
  color:rgba(245,240,232,.82); }

/* ---- the single photograph ---- */
.catshot{ position:relative; background-size:cover; background-position:center;
  min-height:clamp(215px,22.99vw,331px); }

/* ---- the closing band ---- */
.catclose{ padding:0; display:grid;
  grid-template-columns:minmax(0,.48fr) minmax(0,.52fr);
  background:var(--ink); color:var(--ivory); }
.catcphoto{ background-size:cover; background-position:center;
  min-height:clamp(230px,25.2vw,363px); }
.catccopy{ align-self:center; padding:clamp(22px,2.4vw,34px) clamp(20px,4.2vw,60px); }
.catccopy h2{ font-family:"Cormorant Garamond",Georgia,serif; font-weight:400;
  font-size:clamp(28px,calc(19px + 2vw),46px); line-height:1.08; margin:0;
  color:var(--ivory); }
.catccopy > p{ margin:clamp(10px,1.15vw,16px) 0 0; font-size:15.5px;
  line-height:1.6; color:rgba(245,240,232,.80); }

/* The line breaks on this page are the mockup's, drawn for a wide column.
   In a narrow one they land mid sentence, so below the breakpoint the copy
   flows on its own. The measured match is at full width, where they stay. */
@media (max-width:900px){
  .cathbody br,.catbody br,.catcell p br,.catccopy > p br,
  .svlede br,.svcard p br,.svwcell p br,.svstep small br,.svscopy > p br,
  .svaside br{ display:none; }
}

@media (max-width:900px){
  .cathero{ display:block; }
  .cathphoto{ position:relative; inset:auto; height:clamp(200px,44vw,300px); }
  .cathphoto::before{ background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55)); }
  .cathcopy{ width:100%; padding-inline:clamp(20px,4.2vw,60px); }
  .catmark.catmedge{ display:none; }
  .catrow{ grid-template-columns:minmax(0,1fr); }
  .catcells{ border-left:0; padding-left:0; }
  .catclose{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:560px){
  .catgal{ grid-template-columns:minmax(0,1fr); }
  .catgtall{ min-height:clamp(180px,50vw,230px); }
  .catgcol{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; }
  .catgshot{ min-height:clamp(110px,30vw,150px); }
  .catcells{ grid-template-columns:minmax(0,1fr); }
  .catmark{ display:none; }
}

/* The Start here tile stretches to the height of the founder panel beside
   it, and with only two cards in it the whole of that extra height landed as
   dead black under the Read more links. The card grid takes the slack now,
   and inside each card the photograph takes it, so the tile fills rather
   than pads. */
.restile .resgrid{ flex:1 1 auto; }
.restile .rescard{ height:100%; }
.restile .rescard .shot{ flex:1 1 auto; aspect-ratio:auto;
  min-height:clamp(150px,13vw,188px); }

/* The portrait used to carry the space between the role line and the body,
   and it is on the About page now rather than here, so the body carries it. */
.foundertext .fbody{ margin-top:clamp(14px,1.8vw,22px); }

/* A footer row of plain links with no heading above them. */
footer .cols > .flatlink{ min-width:0; }
footer .cols > .flatlink a{ font-size:14px; font-weight:500; letter-spacing:.02em;
  color:var(--ivory); }
footer .cols > .flatlink a:hover,
footer .cols > .flatlink a:focus-visible{ color:var(--gold-light); }

/* The blog, which the artifact has no equivalent of. */
.postlist{ display:grid; gap:clamp(20px,2.4vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); }
.postcard{ border:1px solid var(--rule-2); background:#fff; display:flex;
  flex-direction:column; }
.postcard .shot{ display:block; aspect-ratio:16/10; background-size:cover;
  background-position:center; }
.postcard .pbody{ padding:clamp(18px,2vw,26px); }
.postcard h3{ font-family:"Cormorant Garamond",Georgia,serif; font-weight:500;
  font-size:clamp(21px,2vw,26px); line-height:1.18; margin:0 0 9px; }
.postcard h3 a{ color:inherit; text-decoration:none; }
.postcard h3 a:hover{ color:#8A6E33; }
.postcard .cat{ margin:0 0 8px; font-size:11px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.postcard p{ margin:0; font-size:15.5px; line-height:1.65; color:var(--quiet); }
.postshot img{ width:100%; height:auto; display:block;
  margin-bottom:clamp(20px,2.4vw,32px); }
.pagination{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin-top:clamp(26px,3vw,40px); }
.pagination .page-numbers{ padding:9px 15px; border:1px solid var(--rule-2);
  text-decoration:none; color:inherit; font-size:14px; }
.pagination .page-numbers.current{ background:var(--ink); color:var(--ivory);
  border-color:var(--ink); }
.emptynote{ text-align:center; color:var(--quiet); }

/* Search and comments. */
.ha-search{ display:flex; gap:10px; flex-wrap:wrap; max-width:520px; }
.ha-search input[type=search]{ flex:1 1 220px; padding:12px 14px;
  border:1px solid var(--rule-2); font:inherit; font-size:16px;
  background:#fff; color:inherit; }
.comments-area{ max-width:812px; margin:clamp(30px,4vw,56px) auto 0; }
.comments-title{ font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:500; font-size:clamp(22px,2.2vw,29px); margin:0 0 18px; }
.commentlist{ list-style:none; margin:0 0 28px; padding:0; }
.commentlist ol.children{ list-style:none; padding-left:clamp(16px,2vw,32px); }
.commentlist li{ border-top:1px solid var(--rule-2); padding:18px 0; }
.comment-form input[type=text],.comment-form input[type=email],
.comment-form input[type=url],.comment-form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--rule-2);
  font:inherit; font-size:16px; background:#fff; }
.comment-form .submit{ font:inherit; font-size:12px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; padding:13px 24px;
  background:var(--gold); color:var(--ink); border:1px solid var(--gold);
  cursor:pointer; }

/* Print: the black bands cost a cartridge and say nothing on paper. */
@media print{
  .topbar,footer,.navtoggle,.heroscrim{ display:none !important; }
  body{ background:#fff; color:#000; }
  .onblack,.ipsec.dark,.ipcta{ background:#fff !important; color:#000 !important; }
}



/* ==================================================================
   Split and banded sections
   The bands the combined About page is built from: copy beside a
   photograph that bleeds to the edge, copy standing on its own
   photograph with a form beside it, the ringed divided row, and the
   linked card. Same design system as Rhythm & Brands, same rules.
   ================================================================== */
.ipsec.flush{ padding:0; }

.ipdark.ipcards.n2{ grid-template-columns:repeat(2,minmax(0,1fr)); }

.ipdark.ipcards.n4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

.ipdark.ipcards.plain .ipbadge{ color:var(--gold-light); }

@media (max-width:900px){
.ipdark.ipcards.n4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:760px){
.ipdark.ipcards.n2, .ipdark.ipcards.n4{ grid-template-columns:minmax(0,1fr); }
}

.ipcard.ipcardlink{ text-decoration:none; color:inherit;
  transition:border-color .18s ease, background-color .18s ease; }

.ipcard.ipcardlink h3{ border-bottom:1px solid transparent; }

.ipcard.ipcardlink:hover{ border-color:var(--gold); background:rgba(184,151,90,.05); }

.ipcard.ipcardlink:hover h3, .ipcard.ipcardlink:focus-visible h3{
  color:var(--gold); border-bottom-color:var(--gold); }

.iphbtns{ display:flex; flex-wrap:wrap; gap:clamp(10px,1.2vw,14px);
  margin-top:clamp(18px,2.2vw,28px); }

.iphbtns .ipbtn{ margin:0; }

.ipsec.leadband .ipsplit h2{ line-height:1.08; margin-bottom:clamp(10px,1.2vw,17px); }

.ipsec.leadband .ipsplit .bd{ padding-block:clamp(18px,1.9vw,27px); }

.ipsec.leadband .ipsplit .bd > p:not(.ipeyebrow){ margin-bottom:clamp(8px,.9vw,12px); }

.ipsec.leadband .ipsplit .bd .ipeyebrow{ margin-bottom:clamp(6px,.75vw,11px); }

.ipsec.careersband .ipsplit .bd{ padding-block:clamp(14px,1.5vw,21px); }

.ipsplit .bd.bdphoto{ padding-block:clamp(22px,2.5vw,36px); }

.ipsplit .bd.formside{ padding-block:clamp(6px,.65vw,9px); }

.ipsplit .bd.bdphoto{ position:relative; isolation:isolate; align-self:stretch;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding-block:clamp(22px,2.5vw,36px); }

.ipsplit .bd.bdphoto::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  /* The fade runs horizontally, gradually, the whole width of the column, the
     way the reference does: the room simply gets further away as it goes
     right and is gone by the time it reaches the form. A tight radial was
     wrong twice over, because it finished halfway across and still had
     opacity left at the column edge, which drew a line. Many stops, so the
     ramp is smooth rather than stepped, and zero exactly at the edge.
     The ramp that keeps the far end the same color as the band rather than a
     brown haze is baked into the photograph in rb_photos, because a mask only
     lowers opacity and a lower opacity warm color is still warm. */
  background-image:var(--bg); background-size:cover;
  background-position:left bottom; background-repeat:no-repeat;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-image:linear-gradient(to right,
    #000 0%, rgba(0,0,0,.98) 10%, rgba(0,0,0,.94) 20%, rgba(0,0,0,.87) 29%,
    rgba(0,0,0,.78) 38%, rgba(0,0,0,.67) 47%, rgba(0,0,0,.55) 56%,
    rgba(0,0,0,.42) 65%, rgba(0,0,0,.30) 74%, rgba(0,0,0,.19) 82%,
    rgba(0,0,0,.10) 89%, rgba(0,0,0,.04) 95%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to right,
    #000 0%, rgba(0,0,0,.98) 10%, rgba(0,0,0,.94) 20%, rgba(0,0,0,.87) 29%,
    rgba(0,0,0,.78) 38%, rgba(0,0,0,.67) 47%, rgba(0,0,0,.55) 56%,
    rgba(0,0,0,.42) 65%, rgba(0,0,0,.30) 74%, rgba(0,0,0,.19) 82%,
    rgba(0,0,0,.10) 89%, rgba(0,0,0,.04) 95%, rgba(0,0,0,0) 100%);
}

.ipsplit .bd.bdphoto::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.46) 30%,
      rgba(0,0,0,.16) 60%, rgba(0,0,0,0) 100%),
    linear-gradient(90deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.08) 44%,
      rgba(0,0,0,0) 72%);
  /* the wash exists to hold the copy, which sits on the left, so it lifts off
     before the column edge rather than darkening the last sliver and leaving
     a step against the band */
  -webkit-mask-image:linear-gradient(to right, #000 52%, rgba(0,0,0,.45) 76%,
    rgba(0,0,0,0) 94%);
  mask-image:linear-gradient(to right, #000 52%, rgba(0,0,0,.45) 76%,
    rgba(0,0,0,0) 94%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
}

.ipsplit .bd.formside{ display:flex; align-items:center; align-self:stretch;
  padding-block:clamp(14px,1.4vw,20px); }

.ipsplit .bd.formside .ipform{ width:100%; margin:0; }

.ipsplit .bd .iphbtns{ margin-top:clamp(16px,2vw,24px); }

.ipsec.ivory .ipsplit h2, .ipsec.ivory .ipsplit .leadname{ color:var(--text); }

.ipsec.ivory .ipsplit .bd > p:not(.ipeyebrow):not(.role):not(.leadname){ color:var(--quiet); }

.ipdark.ipcards.n3 .ipcard{ padding-inline:clamp(14px,1.5vw,20px); }

.ipsec.careersband .ipsplit{ grid-template-columns:minmax(0,64fr) minmax(0,36fr); }

.ipsec.careersband .ipsplit .ipphoto{ min-height:clamp(210px,21.5vw,310px); }

.ipsec.leadband .ipsplit .ipphoto{ min-height:clamp(300px,36vw,519px); }

.ipsec.careersband .ipsplit .bd{ padding-block:clamp(10px,1.0vw,14px); }

.ipsec.careersband .ipsplit .bd .ipeyebrow{ margin-bottom:clamp(5px,.55vw,8px); }

.ipsec.careersband .ipsplit .bd h2{ margin-bottom:clamp(7px,.85vw,12px); }

.ipsec.cultureband{ padding-block:clamp(22px,2.5vw,36px) clamp(20px,2.3vw,33px); }

.ipsec.cultureband .iphead{ margin-bottom:clamp(12px,1.45vw,21px); }

.ipsec.cultureband .ipdiv > div, .ipsec.cultureband .ipdiv > .ipdivlink{
  padding-block:4px; }

.ipsec.cultureband .iphead h2{ margin-bottom:0; }

.ipsec.cultureband .ipdiv .ipring{
  width:clamp(46px,4vw,58px); height:clamp(46px,4vw,58px);
  margin-bottom:clamp(9px,.9vw,13px); }

.ipsec.careersband .ipsplit .bd > p:not(.ipeyebrow):not(.role):not(.leadname){
  max-width:none; }

.ipsec.leadband .ipsplit h2{ font-size:clamp(34px,calc(26px + 2.1vw),56px); }

.ipsplit .bd.bdphoto h2{ margin-bottom:2px; }

.ipsplit .bd.bdphoto h2 + p{ line-height:1.5; }

.ipsec.leadband .ipsplit{ grid-template-columns:minmax(0,46fr) minmax(0,54fr); }

.ipsplit .bd > p:not(.ipeyebrow):not(.role):not(.leadname){ font-size:20px; }

.ipsplit .bd .leadname{ margin:0 0 4px; font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:500; font-size:clamp(24px,calc(20px + .9vw),31px); line-height:1.2;
  color:var(--ivory); }

.ipsplit .bd > p:not(.ipeyebrow):not(.role):not(.leadname){
  margin:0 0 clamp(10px,1.2vw,15px); font-size:20px; line-height:1.62;
  color:var(--silver); max-width:54ch; }

.ipdiv .ipring{ width:clamp(54px,calc(44px + 1.5vw),66px); height:clamp(54px,calc(44px + 1.5vw),66px);
  border:1px solid rgba(184,151,90,.55); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  margin-bottom:clamp(12px,1.4vw,16px); }

.ipdiv .ipring svg{ width:46%; height:46%; }

.ipsec.dark .ipdiv .ipring{ border-color:rgba(212,175,110,.45); }

.ipsec.ivory .ipdiv > div, .ipsec.ivory .ipdiv > .ipdivlink{
  border-left-color:rgba(18,23,26,.16); }

@media (max-width:760px){
.ipsec.ivory .ipdiv > div, .ipsec.ivory .ipdiv > .ipdivlink{
    border-top-color:rgba(18,23,26,.16); }
}

.ipdiv > .ipdivlink{ display:flex; flex-direction:column; align-items:center;
  text-decoration:none; color:inherit; transition:background-color .18s ease; }

.ipdiv > .ipdivlink b{ border-bottom:1px solid transparent; }

.ipdiv > .ipdivlink:hover{ background:rgba(184,151,90,.07); }

.ipdiv > .ipdivlink:hover b, .ipdiv > .ipdivlink:focus-visible b{
  color:var(--gold-light); border-bottom-color:var(--gold-light); }

.ipdiv.d2{ grid-template-columns:repeat(2,minmax(0,1fr)); }

.ipdiv.d3{ grid-template-columns:repeat(3,minmax(0,1fr)); }

@media (max-width:900px){
.ipdiv.d3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.ipdiv.d3 > div{ border-left:1px solid rgba(212,175,110,.34); border-top:0;
    padding-block:clamp(6px,1vw,14px); }
.ipdiv.d3 > div:first-child{ border-left:0; }
}

@media (max-width:760px){
.ipdiv.d2, .ipdiv.d3{ grid-template-columns:minmax(0,1fr); }
.ipdiv.d3 > div{ border-left:0; border-top:1px solid rgba(212,175,110,.34);
    padding-block:clamp(16px,2.4vw,22px); }
.ipdiv.d3 > div:first-child{ border-top:0; }
}
/* The curved sweep that carries the hero into the ivory band beneath it. The
   Our Agency hero has it, so the About hero does too. */
.iphero.sweep::after{
  content:""; position:absolute; left:-4%; right:-4%; bottom:-2px;
  height:clamp(34px,4.6vw,78px);
  background:var(--ivory); border-radius:100% 100% 0 0 / 100% 100% 0 0;
  z-index:4; pointer-events:none;
}


/* Tone overrides. A band's own colour rules: without these a label set
   for the dark ground stays cream on the ivory band and cannot be read. */

.ipsec.dark, .iphero, .hero, .ipsec.dark .ipsplit{ background-color:#000000; }

.ipsec.dark .ipcard, .ipdark .ipcard{ background-color:#000000; }

.ipsec.ivory .ipsplit{ background:var(--ivory); color:var(--text); }

.ipsec.ivory .ipsplit .role{ color:var(--gold); }

.ipsec.ivory .ipdiv small{ max-width:20ch; }

.ipsec.dark .ipsplit .ipphoto{
  filter:brightness(.84) saturate(.97);
  -webkit-mask-image:
    linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.015) 8%,
      rgba(0,0,0,.05) 16%, rgba(0,0,0,.12) 24%, rgba(0,0,0,.23) 32%,
      rgba(0,0,0,.37) 40%, rgba(0,0,0,.53) 48%, rgba(0,0,0,.68) 56%,
      rgba(0,0,0,.81) 64%, rgba(0,0,0,.91) 72%, rgba(0,0,0,.97) 80%, #000 88%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 3%,
      rgba(0,0,0,.52) 7%, rgba(0,0,0,.82) 11%, rgba(0,0,0,.96) 15%, #000 19%);
  mask-image:
    linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.015) 8%,
      rgba(0,0,0,.05) 16%, rgba(0,0,0,.12) 24%, rgba(0,0,0,.23) 32%,
      rgba(0,0,0,.37) 40%, rgba(0,0,0,.53) 48%, rgba(0,0,0,.68) 56%,
      rgba(0,0,0,.81) 64%, rgba(0,0,0,.91) 72%, rgba(0,0,0,.97) 80%, #000 88%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 3%,
      rgba(0,0,0,.52) 7%, rgba(0,0,0,.82) 11%, rgba(0,0,0,.96) 15%, #000 19%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}

.ipsec.ivory .ipsplit .ipphoto{
  -webkit-mask-image:
    linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.03) 8%,
      rgba(0,0,0,.10) 17%, rgba(0,0,0,.22) 26%, rgba(0,0,0,.38) 35%,
      rgba(0,0,0,.56) 44%, rgba(0,0,0,.73) 53%, rgba(0,0,0,.87) 62%,
      rgba(0,0,0,.96) 71%, #000 80%);
  mask-image:
    linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.03) 8%,
      rgba(0,0,0,.10) 17%, rgba(0,0,0,.22) 26%, rgba(0,0,0,.38) 35%,
      rgba(0,0,0,.56) 44%, rgba(0,0,0,.73) 53%, rgba(0,0,0,.87) 62%,
      rgba(0,0,0,.96) 71%, #000 80%);
}

.ipsec.ivory .ipdiv b{ color:var(--text); }

.ipsec.ivory .ipdiv small{ color:var(--quiet); }

.ipsec.ivory .ipdiv svg{ color:var(--gold); }



/* ==================================================================
   The service page bands
   What a service covers beside what it does not, the stages in
   order, the questions, and a closing band that is a form rather
   than a pair of buttons. Same rules as the Rhythm & Brands
   Artist Management page, which is the layout this follows.
   ================================================================== */
/* ==================================== Artist Management page =============
   Built to the reference layout for that page. Every heading in these bands
   is ranged left, which is the one thing that separates them from the rest of
   the site, so each carries .amh2 rather than going through .iphead. */
.amh2{ font-family:"Cormorant Garamond",Georgia,serif; font-weight:400;
  font-size:clamp(29px,calc(23px + 1.65vw),47px); line-height:1.1;
  margin:5px 0 0; text-wrap:balance; }

.ipsec.dark .amh2{ color:var(--ivory); }

/* The hero carries no rule under the headline here, and its last line is the
   italic the wordmark's own line uses. */
.iphero.amhero .iprule{ display:none; }

.iphero.amhero h1.display em{ font-style:italic; color:var(--gold-light); }

.iphero.amhero .iplede{ margin-top:clamp(12px,1.4vw,18px); }

/* ---- what this service is ---- */
.amscope .amscopegrid{ display:grid;
  grid-template-columns:minmax(0,38fr) minmax(0,62fr);
  gap:clamp(24px,3.4vw,56px); align-items:start; }

.amscopecopy > p{ margin:clamp(12px,1.4vw,18px) 0 0; font-size:16px;
  line-height:1.62; color:var(--quiet); }

.ampanels{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(13px,1.5vw,21px); }

.ampanel{ background:var(--ink); color:var(--ivory);
  padding:clamp(17px,1.9vw,25px) clamp(17px,1.9vw,25px) clamp(19px,2.1vw,27px); }

.amptitle{ display:flex; align-items:center; gap:10px; margin:0 0 clamp(12px,1.5vw,18px);
  font-size:17px; font-weight:700; color:var(--ivory); }

.amptitle svg{ width:21px; height:21px; color:var(--gold-light); flex:0 0 auto; }

.ampanel ul{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:clamp(7px,.85vw,11px); }

.ampanel li{ display:flex; gap:11px; align-items:flex-start;
  font-size:15px; line-height:1.45; }

.amyes,.amno{ flex:0 0 auto; width:13px; color:var(--gold-light);
  font-size:13px; line-height:1.45; }

/* ---- how it works ---- */
.amprocess .amsteps{ display:flex; align-items:stretch; gap:clamp(6px,.8vw,12px);
  margin-top:clamp(20px,2.4vw,34px); }

.amstep{ position:relative; flex:1 1 0; min-width:0;
  border:1px solid rgba(245,240,232,.26); padding:clamp(15px,1.8vw,25px);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(5px,.6vw,9px); }

.amstep .amnum{ position:absolute; left:clamp(11px,1.1vw,15px); top:clamp(10px,1vw,14px);
  font-family:"DM Sans",system-ui,sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.14em; color:var(--silver); }

.amstep svg{ width:26px; height:26px; color:var(--gold-light);
  margin-top:clamp(6px,.8vw,12px); }

.amstep b{ font-size:17px; font-weight:600; color:var(--ivory); }

.amstep small{ font-size:14px; line-height:1.5; color:var(--silver); }

.amarrow{ flex:0 0 auto; align-self:center; color:var(--gold-light); font-size:17px;
  line-height:1; }

/* ---- why artists trust us ---- */
.amtrust .amtgrid{ display:grid;
  grid-template-columns:minmax(0,31fr) minmax(0,69fr);
  gap:clamp(20px,2.8vw,46px); align-items:start; }

.amtphoto{ width:100%; aspect-ratio:4/5; background-size:cover;
  background-position:center 22%; background-color:var(--ink);
  margin-top:clamp(16px,2vw,28px); }

.amtcards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(11px,1.4vw,19px); }

.amtcard{ border:1px solid rgba(18,23,26,.16); padding:clamp(13px,1.6vw,21px);
  display:flex; flex-direction:column; gap:clamp(6px,.8vw,10px); min-width:0; }

.amtcard svg{ width:26px; height:26px; color:var(--gold); }

.amtcard b{ font-size:16px; font-weight:600; line-height:1.25; }

.amtcard small{ font-size:14px; line-height:1.5; color:var(--quiet); }

/* Published work, where the reference puts a case study beside a review. */
.amwork{ margin-top:clamp(16px,2vw,28px); padding-top:clamp(14px,1.8vw,24px);
  border-top:1px solid rgba(18,23,26,.16); }

.amwork .filterbar{ justify-content:flex-start; margin:clamp(9px,1.1vw,14px) 0
  clamp(13px,1.6vw,20px); }

.amwork .filterbar button{ font-size:11px; letter-spacing:.16em; }

.amworkgrid{ gap:clamp(11px,1.4vw,19px); }

.amworkgrid .casebody{ padding:clamp(12px,1.4vw,17px); gap:6px; }

.amworkgrid .casebody h3{ font-size:clamp(19px,1.5vw,22px); }

.amworkgrid .casebody p{ font-size:14px; line-height:1.55; }

.amworkgrid .casebody .cat{ font-size:9.5px; }

.amwork .caseempty{ margin-top:clamp(14px,1.8vw,22px); }

.amcred{ display:flex; align-items:center; gap:11px; margin:0;
  margin-top:clamp(14px,1.8vw,24px); padding-top:clamp(12px,1.6vw,20px);
  border-top:1px solid rgba(18,23,26,.16); font-size:15px; color:var(--quiet); }

.amcred svg{ width:22px; height:22px; color:var(--gold); flex:0 0 auto; }

/* ---- frequently asked ---- */
.amfaq .amfgrid{ display:grid;
  grid-template-columns:minmax(0,31fr) minmax(0,69fr);
  gap:clamp(20px,2.8vw,46px); align-items:start; }

.amflist{ display:flex; flex-direction:column; gap:clamp(7px,.9vw,12px); }

.amfitem{ border:1px solid rgba(245,240,232,.22); }

.amfitem summary{ list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:18px;
  padding:clamp(12px,1.4vw,17px) clamp(14px,1.6vw,21px);
  font-size:16px; line-height:1.35; color:var(--ivory); }

.amfitem summary::-webkit-details-marker{ display:none; }

.amfitem summary::marker{ content:""; }

.amplus{ position:relative; flex:0 0 auto; width:13px; height:13px; }

.amplus::before,.amplus::after{ content:""; position:absolute;
  background:var(--gold-light); }

.amplus::before{ left:0; right:0; top:6px; height:1.4px; }

.amplus::after{ top:0; bottom:0; left:6px; width:1.4px; }

.amfitem[open] .amplus::after{ opacity:0; }

.amfitem > p{ margin:0; font-size:15px; line-height:1.66; color:var(--silver);
  padding:0 clamp(14px,1.6vw,21px) clamp(13px,1.6vw,19px); max-width:74ch; }

/* ---- ready to talk ---- */
.amcontact .amcgrid{ display:grid;
  grid-template-columns:minmax(0,31fr) minmax(0,69fr);
  gap:clamp(22px,3.2vw,54px); align-items:center; }

.amclede{ margin:clamp(12px,1.4vw,18px) 0 0; font-size:16px; line-height:1.6;
  color:var(--quiet); }

.amcrule{ width:62px; height:1px; background:var(--gold);
  margin:clamp(16px,2vw,26px) 0 clamp(14px,1.8vw,22px); }

.amscript{ margin:0; font-family:"Caveat","Bradley Hand","Segoe Script",cursive;
  font-size:clamp(25px,2.5vw,33px); line-height:1.12; color:var(--text); }

.amcard{ background:#FFFFFF; border:1px solid rgba(18,23,26,.12);
  display:grid; grid-template-columns:minmax(0,63fr) minmax(0,37fr);
  gap:clamp(16px,2.2vw,32px); padding:clamp(17px,2.1vw,29px); }

.amcftitle{ margin:0 0 clamp(11px,1.4vw,17px); font-size:16px; font-weight:700; }

.amrow{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1.2vw,15px);
  margin-bottom:clamp(10px,1.2vw,15px); }

.amrow > *{ min-width:0; }

.amfield{ display:flex; flex-direction:column; gap:5px; }

.amfield label{ font-size:12px; font-weight:600; color:var(--quiet); }

.amreq{ color:#9B2C2C; font-style:normal; }

.amfield input,.amfield textarea{ font-family:inherit; font-size:14px;
  padding:9px 11px; border:1px solid rgba(18,23,26,.22); background:#FFFFFF;
  color:var(--text); width:100%; box-sizing:border-box; }

.amfield input::placeholder,.amfield textarea::placeholder{ color:rgba(18,23,26,.38); }

.amfield input:focus-visible,.amfield textarea:focus-visible{ outline:2px solid var(--gold);
  outline-offset:1px; }

.amfield textarea{ resize:vertical; min-height:40px; }

.amcform button{ width:100%; font-family:inherit; font-size:13px; font-weight:700;
  letter-spacing:.06em; padding:13px 20px; border:1px solid var(--gold);
  background:var(--gold); color:var(--ink); cursor:pointer;
  transition:background-color .18s ease,color .18s ease; }

.amcform button:hover{ background:transparent; color:var(--text); }

.amcbook{ border-left:1px solid rgba(18,23,26,.12);
  padding-left:clamp(15px,1.9vw,27px);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(9px,1.1vw,14px); }

.amcbtitle{ align-self:flex-start; margin:0; font-size:15px; font-weight:700;
  text-align:left; }

.amcbicon{ line-height:0; }

.amcbicon svg{ width:33px; height:33px; color:var(--gold); }

.amcbook p{ margin:0; font-size:14px; line-height:1.5; color:var(--quiet); }

.amcbbtn{ display:block; width:100%; margin-top:auto; text-align:center;
  text-decoration:none; background:var(--ink); color:var(--ivory);
  font-family:inherit; font-size:13px; font-weight:700; letter-spacing:.06em;
  padding:12px 18px; border:1px solid var(--ink);
  transition:background-color .18s ease,color .18s ease; }

.amcbbtn:hover{ background:transparent; color:var(--text); }

@media (max-width:980px){
  .amscope .amscopegrid,.amtrust .amtgrid,.amfaq .amfgrid,
  .amcontact .amcgrid{ grid-template-columns:1fr; }
  .amtphoto{ aspect-ratio:16/9; }
  .amprocess .amsteps{ flex-wrap:wrap; }
  .amstep{ flex:1 1 calc(50% - 20px); }
  .amcard{ grid-template-columns:1fr; }
  .amcbook{ border-left:0; padding-left:0; padding-top:clamp(16px,2.2vw,24px);
    border-top:1px solid rgba(18,23,26,.12); }
}

@media (max-width:700px){
  .ampanels{ grid-template-columns:1fr; }
  .amtcards{ grid-template-columns:1fr; }
  .amprocess .amsteps{ flex-direction:column; }
  .amstep{ flex:1 1 auto; }
  .amarrow{ transform:rotate(90deg); }
  .amrow{ grid-template-columns:1fr; }
}

/* ---- band heights, measured against the reference ---- */
.ipsec.amscope,.ipsec.amprocess,.ipsec.amtrust,.ipsec.amfaq,
.ipsec.amcontact{ padding-block:clamp(23px,2.5vw,36px); }

.iphero.amhero{ padding-block:clamp(28px,3.0vw,44px); }

.iphero.amhero h1.display{ font-size:clamp(34px,calc(26px + 2.3vw),58px);
  line-height:1.14; }

.iphero.amhero .iplede{ font-size:16px; line-height:1.55; }

.amtphoto{ background-position:center top; margin-top:clamp(13px,1.6vw,22px); }

/* Eight categories will not sit on one line in this column, so the row wraps
   rather than scrolling sideways the way the full width bars do. */
.amwork .filterbar{ flex-wrap:wrap; overflow:visible; row-gap:9px;
  column-gap:clamp(12px,1.6vw,24px); }

.amprocess .amsteps{ margin-top:clamp(16px,1.9vw,26px); }

.amstep{ padding:clamp(13px,1.5vw,20px); gap:clamp(4px,.5vw,7px); }

.amstep svg{ margin-top:clamp(4px,.6vw,9px); }

.amfitem summary{ padding:clamp(10px,1.1vw,14px) clamp(13px,1.5vw,19px);
  font-size:15.5px; }

.amflist{ gap:clamp(6px,.7vw,9px); }

.amworkgrid .casecard .shot{ aspect-ratio:16/11; }

.amwork{ margin-top:clamp(13px,1.6vw,22px); padding-top:clamp(12px,1.5vw,19px); }

.amcred{ margin-top:clamp(11px,1.4vw,18px); padding-top:clamp(10px,1.3vw,16px); }

.amcard{ padding:clamp(15px,1.8vw,25px); }

.amcontact .amcgrid{ align-items:start; }

.amfitem summary{ padding:10px clamp(13px,1.5vw,19px); }

.amflist{ gap:7px; }

.amrow{ margin-bottom:clamp(8px,1vw,12px); gap:clamp(9px,1.1vw,13px); }

.amfield textarea{ min-height:34px; }

.amcftitle{ margin-bottom:clamp(9px,1.1vw,14px); }

.amcbook{ gap:clamp(7px,.9vw,11px); }

/* The contact card with no booking column beside it is one column, and its
   two field rows carry the width the two columns used to share. */
.amcard.nobook{ grid-template-columns:1fr; }

/* The one line of small print under the form button. */
.amcnote{ margin:clamp(8px,1vw,12px) 0 0; font-size:12px; line-height:1.5;
  color:var(--quiet); text-align:center; font-style:italic; }

/* The published work grid and its filter bar. */

.rescard .shot{ display:block; width:100%; aspect-ratio:4/3; background-size:cover; background-position:center; background-color:#0B0E10; }

.filterbar{
  display:flex; flex-wrap:nowrap; justify-content:center; align-items:center;
  gap:clamp(14px,2.4vw,34px); width:100%;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  padding-bottom:2px;
}

.filterbar::-webkit-scrollbar{ display:none; }

.filterbar button{ white-space:nowrap; flex:0 0 auto; }

.filterbar button{
  appearance:none; background:none; border:0; cursor:pointer; padding:6px 2px;
  font-family:inherit; font-size:12px; font-weight:700; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--quiet); transition:color .18s ease;
}

.onblack .filterbar button{ color:var(--silver); }

.filterbar button:hover, .filterbar button:focus-visible{ color:var(--gold); }

.onblack .filterbar button:hover, .onblack .filterbar button:focus-visible{ color:var(--gold-light); }

.filterbar button[aria-pressed="true"]{ color:var(--gold); }

.onblack .filterbar button[aria-pressed="true"]{ color:var(--gold-light); }

.pcard .shot{ display:block; width:100%; aspect-ratio:4/3; background-size:cover; background-position:center; background-color:var(--ink); margin:2px 0 4px; }

.ipsec .filterbar{ margin:0 0 clamp(24px,2.8vw,38px); }

.filterbar button.none{ opacity:.45; }

.filterbar button.none[aria-pressed="true"]{ opacity:1; }

.casegrid{ display:grid; gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(3,minmax(0,1fr)); }

@media (max-width:900px){
.casegrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:600px){
.casegrid{ grid-template-columns:1fr; }
}

.casecard{ border:1px solid var(--rule-2); display:flex; flex-direction:column;
  min-width:0; background:transparent; }

.casecard .shot{ display:block; width:100%; aspect-ratio:16/10;
  background-size:cover; background-position:center; }

.casebody{ padding:clamp(18px,2vw,24px); display:flex; flex-direction:column; gap:9px; }

.casebody .cat{ margin:0; font-family:"DM Sans",system-ui,sans-serif; font-size:10.5px;
  font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }

.casebody h3{ margin:0; font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:500; font-size:clamp(25px,2.25vw,31px); line-height:1.2; }

.casebody p{ margin:0; font-size:18px; line-height:1.6; color:var(--quiet); }

.casebody{ flex:1; }

.casebody > p:last-of-type{ margin-bottom:clamp(4px,.6vw,8px); }

.casebody .tutor{ margin:0; font-family:"DM Sans",system-ui,sans-serif; font-size:11px;
  font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
  margin-top:auto; padding-top:clamp(8px,1vw,12px); }

.caseempty{ text-align:center; font-size:14px; color:var(--quiet);
  margin:clamp(24px,3vw,40px) 0 0; }

.wcard .shot{ display:block; width:100%; aspect-ratio:11/4; background-size:cover;
  background-position:center; }

.wbody .cat{ margin:0 0 8px; font-family:"DM Sans",system-ui,sans-serif;
  font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--gold); }

.rescard h3, .casebody h3{ font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:500; font-size:27px; line-height:1.25; }