/* 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:992px;position:relative;overflow:hidden}
.hero .container{position:relative;height:100%}
.hero h1{position:absolute;left:var(--gutter);top:152px;width:720px}
.hero-card{position:absolute;left:var(--gutter);top:336px;width:576px;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 64px 0 24px;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:0;top:0;width:56px;height:56px;border-radius:50%;border:0;background:#f0eeea;color:#8a8a8a;display:grid;place-items:center;cursor:pointer}
.hero-search button svg{width:22px;height:22px}
.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:646px;display:flex;align-items:center;gap:32px}
.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. */
.hero-figure{position:absolute;right:var(--gutter);bottom:0;width:755px;height:968px;left:auto;margin:0}
.hero-figure img{width:755px;height:968px;object-fit:cover;object-position:top center}

/* ---------------- 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}
.person{text-align:center}
.person img{width:100%;height:238px;object-fit:cover;object-position:center 18%;border-radius:var(--r);background:var(--img-fill);margin-bottom:40px}
.person h3{margin-bottom:12px}
.person p{margin-bottom:32px;min-height:112px}

/* ---------------- 9 publications carousel ---------------- */
.pubs{padding:0 0 96px}
.track{display:grid;grid-template-columns:repeat(4,357px);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;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:346px repeat(3,330px);gap:0;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:346px repeat(3,330px);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 ---------------- */
@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:4/5}
  .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:4/3}
  .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:3/2}
  .doc-hero img{aspect-ratio:4/5;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:4/3}
  .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:3/2;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:4/3}
  .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)}