/* DermCare homepage
   Built to the Cedars-Sinai homepage measurements in
   docs/research/cedars-sinai/EXTRACTION.md. Values are measured, not chosen. */

:root{
  --ink:#191919;
  --paper:#f8f5f2;
  --white:#fff;
  --rule:rgba(25,25,25,.16);
  --rule-onDark:rgba(255,255,255,.16);
  --accent:#0f5e9c;
  --dark:#1d2b44;
  --dark-card:#2a3a56;
  --band-blue:#dceff8;
  --band-cream:#ece8cd;
  --task-bg:#e6eef8;
  --task-bd:#7fa6d6;
  --muted:#5e5e5e;
  --img-fill:#e9e4dc;

  --sans:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:var(--sans);

  --shadow:rgba(25,25,25,.16) 0 1px 2px 0;
  --r:8px;
  --gutter:64px;
  --container:1312px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:28px;font-weight:400;letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:300;letter-spacing:-.02em;font-family:var(--sans)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
@media (min-width:1441px){.container{padding:0;}}
/* Centred bands share the container geometry exactly, so every section on
   the site lines up on the same left and right edges. Only the running
   paragraph is held to a readable measure inside it. */
.measure{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter);text-align:center}
.measure > p{max-width:900px;margin-left:auto;margin-right:auto}

/* type roles */
.h-display{font-size:68px;line-height:76px;letter-spacing:-1.8px}
.h-section{font-size:40px;line-height:48px;letter-spacing:-.8px}
.h-card{font-size:32px;line-height:40px;letter-spacing:-.5px}
.h-col{font-size:24px;line-height:28px}
.t-body{font-size:16px;line-height:28px;font-weight:400;letter-spacing:0}
.t-ui{font-size:16px;line-height:20px;font-weight:600;letter-spacing:.2px}
.t-eyebrow{font-size:14px;line-height:20px;font-weight:500;letter-spacing:1.4px;text-transform:uppercase}
.t-small{font-size:14px;line-height:24px;font-weight:400;letter-spacing:0}

/* section heading with 2px rule, as measured: padding-bottom 24, 2px rule, 74px tall */
.section-head{padding-bottom:24px;border-bottom:2px solid var(--rule);margin-bottom:48px}
.section-head.on-dark{border-bottom-color:var(--rule-onDark)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r);font:600 16px/20px var(--sans);letter-spacing:0;padding:12px 16px;border:2px solid transparent;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.btn-solid{background:var(--ink);color:var(--white);border-color:var(--ink);padding:14px 18px}
.btn-solid:hover{background:#000;border-color:#000}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink);padding:16px 16px}
.btn-outline:hover{background:var(--ink);color:var(--white)}
.btn-circle{width:48px;height:48px;border-radius:50%;background:var(--white);display:inline-grid;place-items:center;color:var(--accent);box-shadow:var(--shadow)}
.btn-circle svg{width:24px;height:24px;display:block}
.on-light .btn-circle{background:var(--white)}

/* icons */
.i{display:inline-block;width:20px;height:20px;flex:none}

/* ---------------- header ---------------- */
.util{background:var(--white);border-bottom:1px solid var(--rule);height:53px}
.util .container{display:flex;align-items:center;height:52px;gap:24px}
.brand{display:flex;align-items:center;gap:10px;margin-right:16px}
.brand-mark{width:30px;height:30px;color:var(--accent)}
.brand-name{font-family:var(--sans);font-size:26px;line-height:30px;font-weight:500;letter-spacing:-.8px}
.brand-name b{font-weight:300;color:var(--accent)}
.tabs{display:flex;height:52px}
.tabs a{display:flex;align-items:center;padding:0 8px;margin:0 8px;height:52px;font:500 16px/20px var(--sans);letter-spacing:0;border-bottom:2px solid transparent;color:var(--ink)}
.tabs a[aria-current]{border-bottom-color:var(--accent)}
.tabs a:hover{color:#000}
.util-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.util-right a{padding:8px;border-radius:var(--r);font:500 16px/16px var(--sans);letter-spacing:0}
.util-right a:hover{background:var(--paper)}

.nav{height:104px;background:var(--white);border-bottom:1px solid var(--rule)}
.nav .container{display:flex;align-items:center;height:104px}
.menu{display:flex;align-items:center;gap:48px}
.menu a{display:inline-flex;align-items:center;gap:8px;font:600 16px/20px var(--sans);letter-spacing:0;padding:10px 0}
.menu a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.menu svg{width:14px;height:14px}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:24px}
.nav-right .btn-solid{padding:10px 12px;height:40px}
.search{width:32px;height:32px;display:grid;place-items:center;color:var(--ink)}
.search svg{width:26px;height:26px}

/* ---------------- 1 hero ---------------- */
.hero{background:var(--paper);height:900px;position:relative;overflow:hidden}
.hero .container{position:relative;height:100%}
.hero h1{position:absolute;left:var(--gutter);top:150px;width:620px;font-size:64px;line-height:72px;letter-spacing:-1.5px}
.hero-card{position:absolute;left:var(--gutter);top:330px;width:540px;background:var(--white);border-radius:var(--r);box-shadow:var(--shadow);padding:24px 24px 16px}
.hero-card-label{font:500 16px/24px var(--sans);letter-spacing:0}
.tasks{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 0 28px}
.task{display:flex;align-items:center;gap:8px;height:48px;padding:12px 16px;border-radius:var(--r);background:var(--task-bg);border:1px solid var(--task-bd);font:600 16px/26px var(--sans);letter-spacing:0;color:var(--ink)}
.task:hover{background:#dbe6f4}
.task svg{width:24px;height:24px;color:var(--accent);flex:none}
.hero-search{position:relative}
.hero-search input{width:100%;height:56px;border:1px solid var(--ink);border-radius:var(--r);padding:0 60px 0 20px;font:500 16px/28px var(--sans);letter-spacing:0;color:var(--ink);background:var(--white)}
.hero-search input::placeholder{color:#5e5e5e}
.hero-search button{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;background:var(--accent);color:var(--white);display:grid;place-items:center;cursor:pointer;transition:background-color .15s ease}
.hero-search button:hover{background:var(--navy-800)}
.hero-search button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.hero-search button svg{width:19px;height:19px}
.hero-card-note{margin-top:10px;font:500 14px/14px var(--sans);letter-spacing:0;color:var(--muted)}
.hero-badge{position:absolute;left:var(--gutter);top:636px;display:flex;align-items:center;gap:28px}
.badge-tile{width:140px;height:119px;background:var(--white);border-radius:var(--r);box-shadow:var(--shadow);display:grid;place-items:center}
.badge-tile span{font-family:var(--sans);font-size:34px;line-height:40px;font-weight:300;letter-spacing:.5px;color:var(--accent)}
.hero-badge p{font:500 24px/32px var(--sans);letter-spacing:0;max-width:280px}
.hero h1,.hero-card,.hero-badge{z-index:2}
/* right:0 would resolve to the container padding box (1376) and overhang the
   content edge by one gutter. Offset by the gutter so the portrait ends on the
   same 1312 line as every other section. */
/* The cutout is cropped to its subject, so pinning the box to the content
   edge aligns the portrait itself with every other section. */
.hero-figure{position:absolute;right:var(--gutter);bottom:0;width:612px;height:auto;aspect-ratio:1300/1837;left:auto;margin:0}
.hero-figure img{width:100%;height:100%;object-fit:contain;object-position:center bottom}

/* Above 1440 the container drops its padding and the content edge becomes the
   container edge. The hero's absolutely positioned children are offset from the
   container's padding box, so left:var(--gutter) stopped being the content edge
   and inset the whole hero by one gutter on both sides, while the header, the
   sections and the footer sat on the real edge. Zero the offsets here so the
   hero lines up with everything else on wide screens. */
@media (min-width:1441px){
  .hero h1,.hero-card,.hero-badge{left:0}
  .hero-figure{right:0}
}

/* ---------------- 2 quote ---------------- */
.quote{background:var(--band-blue);height:196px}
.quote .container{display:grid;grid-template-columns:1fr 1px 382px;gap:0 48px;align-items:center;height:196px}
.quote blockquote{margin:0;font-family:var(--sans);font-size:24px;line-height:32px;font-weight:300;letter-spacing:-.2px;max-width:691px}
.quote-divider{width:1px;height:100px;background:var(--ink)}
.quote-who{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:0}
.quote-who .name{font:500 20px/32px var(--sans);letter-spacing:0}
.quote-who .role{font:500 16px/28px var(--sans);letter-spacing:0}
.quote-who .btn{margin-top:14px}

/* ---------------- 3 banner ---------------- */
.banner{position:relative;height:640px;display:grid;place-items:center stretch;overflow:hidden;background:var(--white)}
.banner-bg{position:absolute;inset:0;background:var(--img-fill) url("../img/banner-clinic.jpg") center/cover;filter:blur(5px) saturate(.85);transform:scale(1.04);opacity:.7}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.55) 40%,rgba(255,255,255,.85) 70%,#fff)}
.banner .measure{position:relative;z-index:1}
.banner h2{margin-bottom:24px}
.banner p{margin-bottom:32px}

/* ---------------- 4 dark cards ---------------- */
.find{background:var(--dark);color:var(--white);padding:72px 0 84px}
.find .section-head{color:var(--white)}
.find-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dcard{background:var(--dark-card);border-radius:var(--r);padding:32px;min-height:508px;display:flex;flex-direction:column}
.dcard .t-eyebrow{margin-bottom:8px;opacity:.95}
.dcard h3{font-size:40px;line-height:48px;letter-spacing:-.8px;margin-bottom:36px}
.checks li{display:flex;gap:12px;align-items:flex-start;margin-bottom:8px}
.checks .ck{width:20px;height:20px;border-radius:50%;background:var(--white);display:grid;place-items:center;flex:none;margin-top:4px}
.checks .ck svg{width:12px;height:12px;color:var(--accent)}
.dcard .btn-circle{margin-top:auto}

/* ---------------- 5 cream band ---------------- */
.cream{background:var(--band-cream);height:352px;display:grid;place-items:center stretch}
.cream h2{margin-bottom:24px}
.cream p{margin-bottom:32px}

/* ---------------- 6 conditions ---------------- */
.conditions{padding:88px 0 96px}
.cond-grid{display:grid;grid-template-columns:500px 1fr;gap:64px;align-items:start}
.cond-list{padding-left:0}
.cond-row{display:flex;align-items:center;justify-content:space-between;height:110px;border-bottom:1px solid var(--rule);padding:0}
.cond-row:first-child{border-top:1px solid transparent}
.cond-row .name{font:500 24px/32px var(--sans);letter-spacing:0}
.cond-row .sub{font:500 16px/28px var(--sans);letter-spacing:0}
.cond-row .arrow{color:var(--accent);width:32px;height:32px}
.cond-row:hover .name{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.cond-list .btn{margin:40px 0 0}
.cond-figure{position:relative;height:760px}
.cond-figure img{position:absolute;right:0;top:0;width:560px;height:700px;object-fit:cover;border-radius:var(--r);background:var(--img-fill)}
.cond-figure .fact{position:absolute;left:0;bottom:0;width:340px;background:var(--paper);border-radius:var(--r);box-shadow:var(--shadow);padding:32px}
.cond-figure .fact .num{font-family:var(--sans);font-size:56px;line-height:56px;font-weight:300;letter-spacing:-1px;display:block;margin-bottom:8px}

/* ---------------- 7 research card ---------------- */
.rcard-wrap{padding:0 0 96px}
.rcard{background:var(--paper);border-radius:var(--r);box-shadow:var(--shadow);padding:32px;display:grid;grid-template-columns:562px 1fr;gap:88px;align-items:center;min-height:485px}
.rcard img{width:562px;height:421px;object-fit:cover;border-radius:var(--r);background:var(--img-fill)}
.rcard h2{margin-bottom:24px}
.rcard .note{font:500 16px/28px var(--sans);letter-spacing:0}
.rcard .note b{font-weight:600}
.rcard .btn{margin-top:32px}

/* ---------------- 8 physicians ---------------- */
.people{padding:0 0 96px}
.people-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px;align-items:stretch}
.person{text-align:center;display:flex;flex-direction:column;height:100%}
.person img,.person .portrait-mono{width:100%;height:238px;object-fit:cover;object-position:center 18%;border-radius:var(--r);background:var(--img-fill);margin-bottom:40px;flex:0 0 auto}
.person h3{margin-bottom:12px}
.person p{margin-bottom:32px}
.person .btn{margin-top:auto;align-self:center}

/* ---------------- 9 publications carousel ---------------- */
.pubs{padding:0 0 96px}
/* proximity, not mandatory: with only ~316px of scroll range a mandatory
   snap has no reachable snap point past 0 and springs the track back. */
.track{display:grid;grid-template-columns:repeat(4,357px);gap:24px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;padding-bottom:8px;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.pcard{background:var(--paper);border-radius:var(--r);box-shadow:var(--shadow);height:640px;display:flex;flex-direction:column;scroll-snap-align:start;overflow:hidden}
.pcard img{width:357px;height:268px;object-fit:cover;background:var(--img-fill)}
.pcard-body{padding:32px;display:flex;flex-direction:column;flex:1}
.pcard h3{font:500 24px/32px var(--sans);letter-spacing:0;margin-bottom:16px}
.pcard p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pcard .btn-circle{margin-top:auto}
.track-nav{display:flex;align-items:center;gap:24px;margin-top:40px}
.progress{flex:1;height:2px;background:var(--rule);position:relative}
.progress i{position:absolute;left:0;top:-1px;height:4px;width:50%;background:var(--ink)}
.track-btns{display:flex;gap:24px}
.sq{width:56px;height:56px;border-radius:var(--r);border:2px solid var(--ink);display:grid;place-items:center;background:var(--white);cursor:pointer}
.sq[disabled]{border-color:transparent;background:#eeeeee;color:#9a9a9a}
.sq svg{width:20px;height:20px}

/* ---------------- 10 bar cards ---------------- */
.refer{padding:0 0 104px}
.bar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bcard-wrap{position:relative;padding-top:20px;display:flex}
.bcard-wrap .bcard{flex:1}
.bcard-wrap::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--accent);border-radius:2px}
.bcard{background:var(--paper);border-radius:var(--r);box-shadow:var(--shadow);padding:48px 32px;min-height:316px;display:flex;flex-direction:column}
.bcard h3{margin-bottom:16px}
.bcard p{margin-bottom:32px}
.bcard .btn-circle{margin-top:auto}

/* ---------------- 11 help ---------------- */
.help{background:var(--band-blue);height:352px;display:grid;place-items:center stretch}
.help h2{margin-bottom:24px}
.help p{margin-bottom:32px}

/* ---------------- footer ---------------- */
footer{border-top:1px solid var(--rule);padding-top:64px;background:var(--white)}
.foot-grid{display:grid;grid-template-columns:1.1fr repeat(3,minmax(0,1fr));gap:32px;padding-bottom:64px}
.foot-brand .brand{margin-bottom:24px}
.foot-brand address{font-style:normal;font:500 16px/28px var(--sans);letter-spacing:0}
.foot-brand .tel{display:inline-block;margin-top:8px;text-decoration:underline;text-underline-offset:4px}
.foot-col h4{font-family:var(--sans);font-size:22px;line-height:28px;font-weight:400;letter-spacing:-.3px;margin-bottom:16px}
.foot-col li{font:500 16px/28px var(--sans);letter-spacing:0;margin-bottom:8px}
.foot-col a:hover{text-decoration:underline;text-underline-offset:4px}
.foot-col + .foot-col{}
.foot-grid-2{display:grid;grid-template-columns:1.1fr repeat(3,minmax(0,1fr));gap:32px;padding-bottom:64px}
.foot-bottom{background:var(--paper);padding:40px 0}
.foot-bottom .container{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.foot-bottom p{font:500 14px/24px var(--sans);letter-spacing:0}
.legal{display:flex;gap:16px;flex-wrap:wrap;margin-top:4px}
.legal a{font:500 14px/24px var(--sans);letter-spacing:0;text-decoration:underline;text-underline-offset:4px}
.social{display:flex;gap:16px}
.social svg{width:20px;height:20px}

/* unresolved content, dotted underline only */
.tbc{border-bottom:1px dotted #9a7b3a;text-decoration:none}
.tbc-note{padding:24px 0 0;font:500 14px/24px var(--sans);letter-spacing:0;color:var(--muted)}

/* ---------------- responsive ---------------- */
/* Between the 1180 stack and the 1440 reference the hero keeps absolute
   positioning, so the headline and the portrait are scaled together here to
   guarantee they can never meet. */
@media (max-width:1380px){
  .hero h1{font-size:56px;line-height:64px;width:545px}
  .hero-figure{width:630px}
  .hero-card{width:500px}
  .hero-search input{padding-right:56px}
}
@media (max-width:1260px){
  .hero h1{font-size:50px;line-height:56px;width:490px}
  .hero-figure{width:600px}
  .hero-card{width:460px}
  .hero-badge p{font-size:20px;line-height:28px}
  .tasks{gap:10px}
  .task{font-size:15px;padding:12px 12px}
}
@media (max-width:1439px){
  :root{--gutter:48px}
}
@media (max-width:1180px){
  .h-display{font-size:56px;line-height:64px}
  .hero{height:auto;padding-bottom:0}
  .hero h1,.hero-card,.hero-badge{position:static;width:auto;margin-bottom:24px}
  .hero .container{padding-top:80px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
  .hero-figure img{width:100%;height:auto;object-fit:contain}
  .quote .container{grid-template-columns:1fr;padding-left:var(--gutter);padding-right:var(--gutter);height:auto;padding-top:40px;padding-bottom:40px;gap:24px}
  .quote{height:auto}
  .quote-divider{display:none}
  .quote-who{align-items:flex-start;text-align:left}
  .find-grid,.bar-grid{grid-template-columns:1fr}
  .dcard{min-height:0}
  .cond-grid{grid-template-columns:1fr}
  .cond-figure{height:auto}
  .cond-figure img{position:static;width:100%;height:auto;aspect-ratio:1300/1837}
  .cond-figure .fact{position:static;width:auto;margin-top:24px}
  .rcard{grid-template-columns:1fr;gap:32px}
  .rcard img{width:100%;height:auto;aspect-ratio:1300/1837}
  .people-grid{grid-template-columns:1fr;gap:56px}
  .person img{width:100%}
  .track{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:357px}
  .foot-grid,.foot-grid-2{grid-template-columns:1fr 1fr;gap:32px}
  .menu{display:none}
}
@media (max-width:720px){
  :root{--gutter:20px}
  .h-display{font-size:44px;line-height:50px}
  .h-section{font-size:32px;line-height:40px}
  .hero .container{grid-template-columns:1fr}
  .tabs a{padding:0 4px;margin:0 6px;font-size:14px}
  .util-right{display:none}
  .tasks{grid-template-columns:1fr}
  .hero-badge{gap:16px}
  .hero-badge p{font-size:18px;line-height:26px}
  .foot-grid,.foot-grid-2{grid-template-columns:1fr}
  .foot-bottom .container{flex-direction:column}
}

/* ======================================================================
   Inner pages
   ====================================================================== */
.crumbs{display:flex;gap:10px;font-size:14px;line-height:20px;color:var(--muted);margin-bottom:24px;flex-wrap:wrap}
.crumbs a:hover{text-decoration:underline}
.crumbs span::before{content:"/";margin-right:10px;color:#b5b0a8}
.page-hero{background:var(--paper);padding:56px 0 64px;border-bottom:1px solid var(--rule)}
.page-hero .grid{display:grid;grid-template-columns:1fr 480px;gap:64px;align-items:center}
.page-hero h1{font-size:56px;line-height:64px;letter-spacing:-1.4px;margin-bottom:20px}
.page-hero .lead{font-size:20px;line-height:32px;font-weight:300;max-width:640px}
.page-hero .actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.page-hero img{width:480px;height:320px;object-fit:cover;border-radius:var(--r);background:var(--img-fill);box-shadow:var(--shadow)}
.page-hero.plain .grid{grid-template-columns:1fr}

.content{padding:72px 0 96px}
.content .grid{display:grid;grid-template-columns:minmax(0,760px) 357px;gap:88px;align-items:start;justify-content:space-between}
.prose,.side{min-width:0}
.prose h2{font-size:32px;line-height:40px;letter-spacing:-.5px;margin:48px 0 16px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:22px;line-height:30px;font-weight:500;letter-spacing:-.2px;margin:32px 0 12px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 20px;padding-left:22px}
.prose li{margin-bottom:8px}
.prose ul li{list-style:disc}
.prose ol li{list-style:decimal}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose table{width:100%;border-collapse:collapse;margin:16px 0 24px;font-size:15px;line-height:24px}
.prose th,.prose td{text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.prose th{font-weight:600}
.prose .lead{font-size:20px;line-height:32px;font-weight:300;margin-bottom:32px}

.notice{background:var(--band-blue);border-radius:var(--r);padding:24px 28px;margin:24px 0}
.notice.cream{background:var(--band-cream)}
.notice h4{font-size:16px;line-height:24px;font-weight:600;margin-bottom:6px}
.notice p{margin:0}

.side{display:grid;gap:24px;position:sticky;top:24px}
.scard{background:var(--paper);border-radius:var(--r);box-shadow:var(--shadow);padding:32px}
.scard h3{font-size:22px;line-height:30px;font-weight:500;letter-spacing:-.2px;margin-bottom:16px}
.scard dl{margin:0;display:grid;gap:12px}
.scard dt{font-size:13px;line-height:18px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:500}
.scard dd{margin:0}
.scard .btn{margin-top:20px}
.scard ul li{padding:10px 0;border-bottom:1px solid var(--rule)}
.scard ul li:last-child{border-bottom:0}
.scard ul a:hover{text-decoration:underline}
.scard.dark{background:var(--dark);color:var(--white)}
.scard.dark dt{color:#b9c6d6}
.scard.dark .btn-solid{background:var(--white);color:var(--ink);border-color:var(--white)}

.steps{counter-reset:s;display:grid;gap:0;margin:24px 0 32px}
.step{display:grid;grid-template-columns:56px 1fr;gap:24px;padding:24px 0;border-top:1px solid var(--rule)}
.step:last-child{border-bottom:1px solid var(--rule)}
.step::before{counter-increment:s;content:counter(s);width:48px;height:48px;border-radius:50%;background:var(--white);box-shadow:var(--shadow);display:grid;place-items:center;font-size:20px;font-weight:300;color:var(--accent)}
.step h4{font-size:20px;line-height:28px;font-weight:500;margin-bottom:6px}
.step p{margin:0}

.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-size:18px;line-height:28px;font-weight:500;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:18px;font-size:28px;font-weight:300;color:var(--accent)}
.faq details[open] summary::after{content:"-"}
.faq .a{padding:0 0 24px;color:var(--ink)}

.icards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.icards.two{grid-template-columns:repeat(2,1fr)}
.icard{background:var(--paper);border-radius:var(--r);box-shadow:var(--shadow);padding:32px;display:flex;flex-direction:column;min-height:260px}
.icard h3{font-size:24px;line-height:32px;font-weight:500;letter-spacing:-.3px;margin-bottom:12px}
.icard p{margin-bottom:24px}
.icard .btn-circle{margin-top:auto}
.icard.img{padding:0;overflow:hidden}
.icard.img img{width:100%;height:220px;object-fit:cover;background:var(--img-fill)}
.icard.img .body{padding:28px 32px 32px;display:flex;flex-direction:column;flex:1}
.section{padding:0 0 96px}
.section .section-head{margin-bottom:40px}

.doc-hero{background:var(--paper);padding:64px 0;border-bottom:1px solid var(--rule)}
.doc-hero .grid{display:grid;grid-template-columns:420px 1fr;gap:72px;align-items:start}
.doc-hero img{width:420px;height:520px;object-fit:cover;object-position:top;border-radius:var(--r);background:var(--img-fill);box-shadow:var(--shadow)}
.doc-hero h1{font-size:48px;line-height:56px;letter-spacing:-1.2px;margin-bottom:8px}
.doc-hero .role{font-size:20px;line-height:32px;font-weight:300;margin-bottom:28px;color:var(--muted)}
.creds{margin:0 0 28px;padding:0}
.creds li{padding:12px 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:200px 1fr;gap:16px}
.creds li:last-child{border-bottom:1px solid var(--rule)}
.creds b{font-weight:600}
.doc-hero .cpso{font-size:14px;line-height:22px;color:var(--muted)}

.band{padding:72px 0}
.band.cream,.band.blue,.band.dark{height:auto;display:block}
.band.blue{background:var(--band-blue)}
.band.cream{background:var(--band-cream)}
.band.dark{background:var(--dark);color:var(--white)}
.band .measure h2{margin-bottom:20px}
.band .measure p{margin-bottom:32px}

.list-rows{border-top:1px solid var(--rule)}
.list-row{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:24px 0;border-bottom:1px solid var(--rule)}
.list-row .name{font-size:22px;line-height:30px;font-weight:500;letter-spacing:-.2px}
.list-row .sub{color:var(--muted)}
.list-row svg{width:28px;height:28px;color:var(--accent)}
.list-row:hover .name{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

.tbc-key{padding:16px 0 0;font-size:13px;line-height:20px;color:var(--muted)}

@media (max-width:1180px){
  .page-hero .grid,.content .grid,.doc-hero .grid{grid-template-columns:minmax(0,1fr)}
  .page-hero img,.doc-hero img{width:100%;height:auto;aspect-ratio:1300/1837}
  .doc-hero img{aspect-ratio:1300/1837;max-width:420px}
  .icards,.icards.two{grid-template-columns:1fr}
  .side{position:static}
}
@media (max-width:720px){
  .page-hero h1{font-size:40px;line-height:46px}
  .doc-hero h1{font-size:36px;line-height:42px}
  .creds li{grid-template-columns:1fr}
}

/* header dropdowns */
.nav{position:relative;z-index:60}
.dd{position:relative}
.dd > a{cursor:pointer}
.dd-panel{position:absolute;left:-24px;top:100%;padding-top:12px;display:none;z-index:70}
.dd:hover .dd-panel,.dd:focus-within .dd-panel{display:block}
.dd-panel ul{background:var(--white);border:1px solid var(--rule);border-radius:var(--r);box-shadow:0 12px 32px rgba(25,25,25,.12);padding:12px 0;min-width:320px}
.dd-panel li a{display:block;padding:10px 24px;font:400 16px/24px var(--sans);letter-spacing:0;white-space:nowrap}
.dd-panel li a:hover{background:var(--paper);text-decoration:none}
.dd-panel li:last-child a{font-weight:600;border-top:1px solid var(--rule);margin-top:8px;padding-top:14px}
.prose .list-row,.prose .list-row *{text-decoration:none}
.prose .list-row:hover .name{text-decoration:underline}
.prose .icard a,.prose .icards a{text-decoration:none}

/* contact form */
.cform{display:grid;gap:20px;margin:24px 0 8px;max-width:min(640px,100%);min-width:0}
.cform label{display:grid;gap:8px;font-size:14px;line-height:20px;font-weight:600}
.cform input,.cform textarea{width:100%;max-width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--ink);border-radius:var(--r);padding:12px 16px;font:400 16px/24px var(--sans);letter-spacing:0;color:var(--ink);background:var(--white)}
.cform textarea{min-height:160px;resize:vertical}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform .fine{font-size:14px;line-height:22px;color:var(--muted);margin:0}

.fig{margin:8px 0 40px}
.fig img{width:100%;height:420px;object-fit:cover;border-radius:var(--r);background:var(--img-fill)}

/* ======================================================================
   Mobile layer. Its own thing under 900px.
   ====================================================================== */
.m-actions,.drawer,.m-bar{display:none}
.m-actions{align-items:center;gap:8px;margin-left:auto}
.m-call{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--accent);background:var(--task-bg)}
.m-call svg{width:22px;height:22px}
.m-burger{width:44px;height:44px;border:0;background:transparent;display:grid;place-items:center;gap:0;padding:0;cursor:pointer}
.m-burger span{display:block;width:22px;height:2px;background:var(--ink);margin:2.5px 0;border-radius:1px}

.drawer{position:fixed;inset:0;z-index:200;background:var(--white);overflow-y:auto;-webkit-overflow-scrolling:touch}
.drawer[hidden]{display:none}
.drawer-bar{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 20px;border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--white)}
.drawer-close{width:44px;height:44px;border:0;background:transparent;font-size:20px;cursor:pointer;color:var(--ink)}
.drawer-nav{padding:8px 20px 40px}
.drawer-aud{display:grid;gap:0;margin:8px 0 16px;border-bottom:1px solid var(--rule)}
.drawer-aud a{display:block;padding:14px 0;font-size:18px;font-weight:500;letter-spacing:-.2px}
.drawer-aud a::after{content:"";display:block;height:2px;background:var(--accent);width:32px;margin-top:6px;opacity:0}
.drawer-nav details{border-bottom:1px solid var(--rule)}
.drawer-nav summary{list-style:none;cursor:pointer;padding:16px 36px 16px 0;font-size:17px;font-weight:600;position:relative}
.drawer-nav summary::-webkit-details-marker{display:none}
.drawer-nav summary::after{content:"";position:absolute;right:6px;top:22px;width:9px;height:9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);transition:transform .15s}
.drawer-nav details[open] summary::after{transform:rotate(-135deg);top:26px}
.drawer-nav details ul{padding:0 0 12px 12px}
.drawer-nav details li a{display:block;padding:10px 0;font-size:16px;color:var(--ink)}
.drawer-nav details li:last-child a{font-weight:600}
.drawer-link{display:block;padding:16px 0;font-size:17px;font-weight:600;border-bottom:1px solid var(--rule)}
.drawer-cta{display:grid;gap:12px;padding-top:24px}
.drawer-cta .btn{width:100%}
.drawer-cta p{font-size:14px;color:var(--muted);text-align:center}
body.drawer-open{overflow:hidden}

.m-bar{position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--white);border-top:1px solid var(--rule);padding:10px 16px calc(10px + env(safe-area-inset-bottom));grid-template-columns:1fr 1fr;gap:10px;box-shadow:0 -6px 24px rgba(25,25,25,.08)}
.m-bar .btn{width:100%;padding:12px 8px;font-size:15px}
body.drawer-open .m-bar{display:none}

@media (max-width:900px){
  .util{height:64px}
  .util .container{height:64px;gap:12px}
  .tabs,.util-right,.nav{display:none}
  .m-actions{display:flex}
  .brand-name{font-size:24px}
  .drawer{display:block}
  .drawer[hidden]{display:none}
  .m-bar{display:grid}
  body{padding-bottom:76px}
  footer{padding-bottom:12px}

  /* hero, mobile composition: headline, task card, badge, then the portrait
     as a full bleed band. Everything in normal flow: no absolute positioning,
     no negative margins, nothing overlapping. */
  .hero{height:auto;overflow:hidden}
  .hero .container{height:auto;position:static;padding-top:32px;padding-bottom:0;
    display:grid;grid-template-columns:minmax(0,1fr);gap:0}
  .hero h1{position:static;left:auto;top:auto;width:auto;order:1;margin:0 0 24px}
  .hero-card{position:static;left:auto;top:auto;width:auto;order:2;margin:0;padding:20px 20px 16px}
  .hero-badge{position:static;left:auto;top:auto;order:3;margin:28px 0 32px;gap:20px}
  .hero-figure{position:static;right:auto;bottom:auto;order:4;
    width:calc(100% + var(--gutter) * 2);margin:0 calc(var(--gutter) * -1);
    height:320px;overflow:hidden}
  .hero-figure img{width:100%;height:320px;object-fit:contain;object-position:center bottom}
  .badge-tile{width:104px;height:92px}
  .badge-tile span{font-size:26px}
  .hero-badge p{font-size:19px;line-height:26px}
  .tasks{grid-template-columns:1fr;gap:10px;padding:14px 0 20px}
  .hero-search input{height:52px}
  .hero-search button{width:52px;height:52px}

  .h-display{font-size:42px;line-height:48px;letter-spacing:-1px}
  .h-section{font-size:30px;line-height:38px;letter-spacing:-.5px}
  .h-card{font-size:26px;line-height:32px}
  .section-head{margin-bottom:28px}
  .quote{height:auto}
  .banner{height:auto;padding:72px 0}
  .find{padding:56px 0 64px}
  .cream,.help{height:auto;padding:64px 0}
  .commit{grid-template-columns:1fr;gap:28px}
  .dcard{padding:28px;min-height:0}
  .dcard h3{font-size:32px;line-height:38px;margin-bottom:24px}
  .conditions,.people,.pubs,.refer,.rcard-wrap{padding:0 0 64px}
  .conditions{padding-top:64px}
  .cond-row{height:auto;padding:18px 0}
  .cond-figure img{aspect-ratio:1300/1837}
  .rcard{padding:20px}
  .track{grid-auto-columns:300px}
  .pcard{height:auto}
  .pcard img{width:100%;height:200px}
  .foot-grid,.foot-grid-2{grid-template-columns:1fr;gap:28px;padding-bottom:32px}
  .foot-grid-2 > div:empty{display:none}
  .foot-bottom .container{flex-direction:column}

  /* inner pages */
  .page-hero{padding:32px 0 40px}
  .page-hero h1{font-size:38px;line-height:44px;letter-spacing:-.8px}
  .page-hero .lead{font-size:18px;line-height:28px}
  .page-hero .actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:24px}
  .page-hero .actions .btn{width:100%}
  .page-hero img{width:100%;height:auto;aspect-ratio:1300/1837;margin-top:8px}
  .content{padding:48px 0 64px}
  .content .grid{gap:40px}
  .prose h2{font-size:26px;line-height:32px;margin:36px 0 12px}
  .prose table{display:block;overflow-x:auto;max-width:100%;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .content .grid{grid-template-columns:minmax(0,1fr)}
  .cform{max-width:100%}
  .fig img{height:240px}
  .doc-hero{padding:32px 0 40px}
  .doc-hero img{width:100%;max-width:none;height:auto;aspect-ratio:1300/1837}
  .doc-hero h1{font-size:34px;line-height:40px}
  .creds li{grid-template-columns:1fr;gap:4px}
  .doc-hero .actions{display:grid !important;grid-template-columns:1fr}
  .icard{min-height:0;padding:24px}
  .step{grid-template-columns:44px 1fr;gap:16px}
  .step::before{width:40px;height:40px;font-size:17px}
  .band{padding:56px 0}
  .list-row .name{font-size:19px;line-height:26px}
}
@media (max-width:720px){
  :root{--gutter:20px}
}

/* agency credit */
.credit{margin-top:14px;font-size:14px;line-height:22px;color:#7E93A6}
.credit a{color:#A9BCCC;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.credit a:hover{color:var(--ink)}
.foot-bottom .credit a{color:var(--ink);font-weight:500}
.foot-bottom .credit a:hover{color:var(--accent)}

/* footer contact, replaces the unused social row */
.foot-contact{display:grid;gap:4px;text-align:right;font-size:14px;line-height:22px;color:var(--muted)}
.foot-contact a{color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.foot-contact a:hover{color:var(--accent)}
@media (max-width:900px){.foot-contact{text-align:left;margin-top:16px}}

/* search */
.search-wrap{padding:48px 0 96px}
.search-form{display:flex;gap:12px;margin-bottom:8px;max-width:720px}
.search-form input{flex:1;min-width:0;height:56px;border:1px solid var(--ink);border-radius:var(--r);padding:0 20px;font:400 17px/24px var(--sans);color:var(--ink);background:var(--white)}
.search-form .btn{flex:none}
.search-count{color:var(--muted);font-size:15px;margin-bottom:32px}
.results{border-top:1px solid var(--rule)}
.result{display:block;padding:24px 0;border-bottom:1px solid var(--rule)}
.result h3{font-size:22px;line-height:30px;font-weight:500;letter-spacing:-.2px;margin-bottom:6px;color:var(--accent)}
.result:hover h3{text-decoration:underline;text-underline-offset:4px}
.result p{color:var(--ink);margin-bottom:6px}
.result .path{font-size:14px;color:var(--muted)}
.result mark{background:#fdf0c9;color:inherit;padding:0 2px;border-radius:2px}
.search-empty{padding:40px 0;color:var(--muted)}
.search-empty a{text-decoration:underline}
@media (max-width:900px){.search-form{flex-direction:column}.search-form .btn{width:100%}}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* contact routes */
.reach{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0 8px}
.reach-card{display:grid;gap:4px;align-content:start;background:var(--paper);border:1px solid var(--paper-3);border-radius:var(--r);padding:22px 24px;text-decoration:none}
a.reach-card:hover{border-color:var(--accent);background:var(--white)}
.reach-k{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:600}
.reach-v{font-size:21px;line-height:28px;font-weight:500;letter-spacing:-.3px;color:var(--accent)}
.reach-d{font-size:14px;line-height:21px;color:var(--ink)}
.reach-d a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.reach{grid-template-columns:1fr}}

/* publications: four items, a grid rather than a carousel */
.pub-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.pub-grid .pcard{height:auto;scroll-snap-align:none}
.pub-grid .pcard img{width:100%;height:200px}
@media (max-width:1180px){.pub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.pub-grid{grid-template-columns:minmax(0,1fr);gap:20px}}