/* Samuel Raoof: clinical-industrial editorial theme.
   Ink-green on white, steel-grey panels, one verdigris accent. Photography leads. */
@font-face{font-family:"Newsreader";src:url(fonts/newsreader.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Plex";src:url(fonts/plex-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex";src:url(fonts/plex-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plex";src:url(fonts/plex-600.woff2) format("woff2");font-weight:600;font-display:swap}
:root{
  --ink:#0f1d1b; --text:#26322f; --muted:#56635f; --line:#d9dfdd; --steel:#e8edec; --wash:#f3f6f5;
  --accent:#0c6a5b; --accent-dark:#084c41; --deep:#0a2b27;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Plex",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --max:1240px; --gut:40px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:#fff;color:var(--text);font:400 17px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent-dark);text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #1b8f7c;outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:99}
.skip:focus{left:16px;top:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* Header */
header.site{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:24px}
.brand{color:var(--ink);text-decoration:none;font:500 24px/1 var(--serif);letter-spacing:-.01em}
.brand:hover{color:var(--ink)}
nav.primary ul{list-style:none;margin:0;padding:0;display:flex;gap:32px}
nav.primary a{color:var(--text);text-decoration:none;font:500 15.5px/1 var(--sans);padding:10px 0;border-bottom:2px solid transparent}
nav.primary a:hover{color:var(--ink);border-bottom-color:var(--line)}
nav.primary a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.menu-btn{display:none;background:#fff;border:1px solid var(--line);color:var(--ink);font:500 15px var(--sans);padding:10px 16px;cursor:pointer}

/* Buttons */
.btn{display:inline-block;font:500 16px/1 var(--sans);text-decoration:none;padding:16px 26px;background:var(--ink);color:#fff;border:1px solid var(--ink);margin:0 12px 12px 0;min-height:48px}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}

/* Home hero: oversized name, portrait set into the bottom edge */
.hero{background:#fff;overflow:hidden;padding:0;border:0}
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
.hero-text{padding:56px 0 56px;align-self:start}
.hero h1{font:400 clamp(60px,7.8vw,112px)/.92 var(--serif);color:var(--ink);margin:0 0 28px;letter-spacing:-.035em;font-optical-sizing:auto}
.hero .lede{font:400 clamp(21px,2vw,26px)/1.4 var(--serif);color:var(--text);max-width:27em;margin:0 0 24px}
.hero .roles{margin:0 0 28px;padding:0;list-style:none;border-top:1px solid var(--ink);max-width:30em}
.hero .roles li{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--line);font:400 15.5px/1.4 var(--sans);color:var(--muted)}
.hero .roles b{font-weight:500;color:var(--ink)}
.portrait{margin:0;align-self:end}
.portrait img{width:100%;max-width:620px;margin-left:auto}

/* Page heads */
.page-head{padding:72px 0 44px;border-bottom:1px solid var(--line)}
.page-head h1{font:400 clamp(46px,6.4vw,92px)/.98 var(--serif);color:var(--ink);margin:0 0 20px;letter-spacing:-.03em}
.page-head p{font:400 clamp(20px,2vw,25px)/1.4 var(--serif);color:var(--muted);max-width:30em;margin:0}

section{padding:88px 0}
section.wash{background:var(--steel)}
h2{font:400 clamp(34px,4vw,54px)/1.05 var(--serif);color:var(--ink);margin:0 0 28px;letter-spacing:-.022em}
h3{font:500 23px/1.25 var(--serif);color:var(--ink);margin:38px 0 8px;letter-spacing:-.005em}
.prose{max-width:38em}
.prose p{margin:0 0 1.25em}
.prose h3:first-child{margin-top:0}
.split{display:grid;grid-template-columns:5fr 7fr;gap:72px;align-items:start}
.split > .side h2{margin:0}
.more-link{font:500 16px var(--sans)}
.lead{font:400 clamp(22px,2.2vw,28px)/1.4 var(--serif);color:var(--ink);margin:0 0 1em}

/* Reel with capability stats set over the film */
.reel{position:relative;background:var(--deep);color:#fff;padding:0;border:0;overflow:hidden}
.reel .film{margin:0}
.reel .film video{width:100%;aspect-ratio:auto;height:clamp(480px,50vw,720px);object-fit:cover}
.reel .film::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,43,39,.15) 0%,rgba(10,43,39,.1) 40%,rgba(7,28,25,.9) 100%);pointer-events:none}
.reel .film-toggle{top:16px;bottom:auto;right:16px;z-index:3}
.reel .stats-over{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:36px}
.reel .stats{display:grid;grid-template-columns:repeat(4,1fr);margin:0;gap:0}
.reel .stats>div{padding:22px 28px 0 0;margin-right:28px;border-top:1px solid rgba(255,255,255,.55)}
.reel .stats>div:last-child{margin-right:0}
.reel .stats dt{font:400 clamp(36px,4.2vw,60px)/1 var(--serif);color:#fff;margin:0 0 10px;letter-spacing:-.02em;white-space:nowrap}
.reel .stats dd{margin:0;font:400 15px/1.45 var(--sans);color:#e3efec;max-width:17em}
/* simple stats variant */
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin:0}

/* Company chapters: image bleeds to the page edge, text sits on the grid */
.chapter{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;padding:0;border:0;min-height:560px}
.chapter .ch-img{margin:0;position:relative;background:#000;overflow:hidden}
.chapter .ch-img img{width:100%;height:100%;min-height:420px;object-fit:cover}
.chapter .ch-text{display:flex;flex-direction:column;justify-content:center;padding:72px max(var(--gut),calc((100vw - var(--max))/2 + var(--gut))) 72px 72px}
.chapter.flip .ch-img{order:2}
.chapter.flip .ch-text{order:1;padding:72px 72px 72px max(var(--gut),calc((100vw - var(--max))/2 + var(--gut)))}
.chapter .logo{height:68px;width:auto;max-width:260px;margin:0 0 26px;object-fit:contain;object-position:left center}
.chapter h2{font-size:clamp(30px,3.2vw,44px);margin:0 0 6px}
.chapter .role{font:500 15.5px var(--sans);color:var(--muted);margin:0 0 22px}
.chapter p.desc{font:400 19px/1.6 var(--sans);margin:0 0 26px;max-width:30em}
.chapter .go{font:500 16px var(--sans)}

/* Pull quote */
.band-dark{background:var(--deep);color:#fff}
.band-dark .pullquote{max-width:none}
.band-dark .pullquote p{max-width:none;font-size:clamp(30px,3.7vw,52px)}
.band-dark .pullquote p{color:#fff}
.band-dark .pullquote figcaption{color:#bcd5cf}
.band-dark h2,.band-dark .prose a{color:#fff}
.pullquote{margin:0;max-width:26em}
.pullquote p{font:400 clamp(30px,4vw,54px)/1.18 var(--serif);color:var(--ink);margin:0 0 26px;letter-spacing:-.02em}
.pullquote blockquote{margin:0}
.pullquote figcaption{font:400 15.5px var(--sans);color:var(--muted)}

/* Lists */
.press,.contact-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.press li{display:grid;grid-template-columns:220px 1fr;gap:32px;padding:24px 0;border-bottom:1px solid var(--line)}
.press .when{font:400 15px/1.5 var(--sans);color:var(--muted)}
.press h3{margin:0 0 4px;font-size:24px}
.press h3 a{color:var(--ink);text-decoration:underline;text-decoration-color:#9aa8a4;text-decoration-thickness:1px;text-underline-offset:4px}
.press h3 a:hover{color:var(--accent);text-decoration:underline}
.press p{margin:0;color:var(--muted);font-size:16px}
.contact-list li{padding:22px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1.4fr;gap:24px;align-items:baseline}
.contact-list b{font:500 23px/1.3 var(--serif);color:var(--ink)}

/* Media */
.media-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px 40px}
.video{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#0a2b27,#1b4f47);display:block}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video img{width:100%;height:100%;object-fit:cover;position:relative;z-index:0}
.video::after{content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='%230c6a5b'/%3E%3C/svg%3E") center/36px no-repeat;pointer-events:none}
.video:has(iframe)::after{display:none}
.video:hover::after{background-color:#fff}
.media-item h3{margin:18px 0 6px;font-size:22px}
.meta{font:400 15px var(--sans);color:var(--muted);margin:0}
.feature{display:grid;grid-template-columns:1fr 1.3fr;gap:64px;align-items:center}

/* Films, photos, logos */
.film{position:relative;margin:0 0 28px;background:var(--deep)}
.film video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--deep)}
.film-toggle{position:absolute;right:12px;bottom:12px;min-height:44px;min-width:76px;padding:8px 16px;border:1px solid rgba(255,255,255,.75);background:rgba(10,43,39,.85);color:#fff;font:500 15px var(--sans);cursor:pointer}
.film-toggle:hover{background:var(--deep)}
.media-item .film{margin:0}
.photo{margin:0 0 32px}
.photo img{width:100%;height:auto}
.photo figcaption{font:400 15px/1.5 var(--sans);color:var(--muted);margin-top:12px;max-width:38em}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.gallery .photo{margin:0}
.about-portrait{margin:0}
.about-portrait img{width:100%}

/* Two-decades section: large archive photo with caption, text beside */
.legacy{display:grid;grid-template-columns:7fr 6fr;gap:72px;align-items:center}
.legacy .photo{margin:0}

footer.site{background:var(--ink);color:#b9c9c5;padding:56px 0;font-size:15.5px}
footer.site .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer.site a{color:#e6f0ed;margin-right:26px;text-decoration:none}
footer.site a:hover{color:#fff;text-decoration:underline}
footer.site a:last-child{margin-right:0}

@media (max-width:1100px){
  .chapter .ch-text{padding:56px 40px}
  .chapter.flip .ch-text{padding:56px 40px}
}
@media (max-width:960px){
  :root{--gut:24px}
  .hero .wrap{grid-template-columns:1fr;gap:0;min-height:0}
  .hero-text{padding:44px 0 24px}
  .portrait img{margin:0 auto;max-width:420px}
  .split,.feature,.legacy{grid-template-columns:1fr;gap:32px}
  .media-grid,.gallery{grid-template-columns:1fr}
  .press li,.contact-list li{grid-template-columns:1fr;gap:6px}
  section{padding:56px 0}
  .page-head{padding:48px 0 32px}
  .chapter,.chapter.flip{grid-template-columns:1fr;min-height:0}
  .chapter .ch-img,.chapter.flip .ch-img{order:0}
  .chapter .ch-img img{min-height:0;aspect-ratio:4/3}
  .chapter .ch-text,.chapter.flip .ch-text{order:1;padding:40px var(--gut) 56px}
  .reel .film video{height:clamp(300px,70vw,460px)}
  .reel .film::after{display:none}
  .reel .stats-over{position:static;background:var(--deep);padding:8px 0 28px}
  .reel .stats{grid-template-columns:1fr 1fr;gap:0 20px}
  .reel .stats>div{margin:0;padding:20px 0 0}
  .reel .stats dt{font-size:44px}
}
@media (max-width:820px){
  .menu-btn{display:block}
  nav.primary{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);max-height:calc(100vh - 73px);max-height:calc(100dvh - 73px);overflow-y:auto}
  nav.primary.open{display:block}
  nav.primary ul{flex-direction:column;gap:0;padding:8px 24px 12px}
  nav.primary a{display:block;padding:16px 0;border-bottom:1px solid var(--line)}
  body.nav-open{overflow:hidden}
  body.nav-open::before{content:"";position:fixed;inset:0;background:rgba(15,29,27,.55);z-index:40}
}
@media (max-width:480px){
  body{font-size:16.5px}
  :root{--gut:20px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.btn,.menu-btn{min-height:44px}

/* Visually hidden but readable by screen readers (company names carried by logos) */
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.chapter .logo{height:80px;max-width:300px;margin:0 0 30px}
.chapter .role{margin:0 0 20px}

/* About: career timeline */
.about-hero h1{font-size:clamp(48px,6.4vw,92px)}
.timeline-sec{padding:72px 0 40px}
.timeline{list-style:none;margin:0;padding:0}
.timeline>li{display:grid;grid-template-columns:200px 1fr;gap:56px;padding:56px 0;border-top:1px solid var(--ink)}
.timeline>li:last-child{border-bottom:1px solid var(--line)}
.timeline .when{font:400 clamp(34px,3.6vw,52px)/1 var(--serif);color:var(--accent);letter-spacing:-.02em;position:sticky;top:97px;align-self:start}
.timeline .what{max-width:44em}
.timeline h2{font-size:clamp(28px,3vw,40px);margin:0 0 18px}
.timeline .what p{margin:0 0 1.2em}
.timeline .photo{margin:28px 0 0}
.timeline .gallery{margin-top:28px}
@media (max-width:960px){.timeline>li{grid-template-columns:1fr;gap:14px;padding:36px 0}.timeline .when{position:static}}

/* Community cause cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0 48px;margin-top:20px}
.card{border-top:1px solid var(--ink);padding:26px 0 44px}
.card .big{font:400 clamp(32px,3.4vw,48px)/1.05 var(--serif);color:var(--accent);margin:0 0 14px;letter-spacing:-.02em}
.card p:not(.big){margin:0 0 .8em}.card p:last-child{margin:0}
.card p.sub{font:500 22px/1.25 var(--serif);color:var(--ink);margin:0 0 8px;letter-spacing:-.005em}
@media (max-width:960px){.cards{grid-template-columns:1fr}}
/* DRMTLGY credentials strip */
.mini-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:0 28px;margin:6px 0 28px;max-width:30em;border-top:1px solid var(--ink)}
.mini-stats>div{padding:16px 0 14px;border-bottom:1px solid var(--line)}
.mini-stats dt{font:400 clamp(30px,3vw,42px)/1 var(--serif);color:var(--accent);letter-spacing:-.02em;margin:0 0 4px;white-space:nowrap}
.mini-stats dd{margin:0;font:400 14.5px/1.4 var(--sans);color:var(--muted)}

/* Logos over the home film */
.reel .film::after{background:linear-gradient(180deg,rgba(10,43,39,.62) 0%,rgba(10,43,39,.12) 34%,rgba(10,43,39,.1) 48%,rgba(7,28,25,.9) 100%)}
.reel .logos-over{position:absolute;left:0;right:0;top:0;z-index:2;padding-top:36px;pointer-events:none}
.reel .logos-over .wrap{display:flex;align-items:center;gap:52px}
.reel .logos-over img{width:auto;display:block;filter:drop-shadow(0 1px 8px rgba(0,0,0,.35))}
.reel .logos-over .lg-nd{height:150px}
.reel .logos-over .lg-bmd{height:92px}
.reel .logos-over .lg-dm{height:40px}
.reel .logos-over .sep{width:1px;height:84px;background:rgba(255,255,255,.55)}
@media (max-width:960px){.reel .logos-over{position:absolute;padding-top:18px}.reel .logos-over .wrap{gap:22px}.reel .logos-over .lg-nd{height:78px}.reel .logos-over .lg-bmd{height:48px}.reel .logos-over .lg-dm{height:20px}.reel .logos-over .sep{height:44px}.reel .film::after{display:block}}

/* Proportion pass (2026-10-22): tighter vertical scale, calmer type */
:root{--gut:36px}
section{padding:68px 0}
h2{font-size:clamp(30px,3.4vw,44px);margin-bottom:22px}
.lead{font-size:clamp(20px,1.9vw,25px)}
.page-head{padding:56px 0 36px}
.page-head h1{font-size:clamp(42px,5.2vw,72px)}
.hero h1{font-size:clamp(52px,6.2vw,88px);margin-bottom:22px}
.hero .lede{font-size:clamp(19px,1.7vw,23px)}
.hero-text{padding:44px 0 44px}
.portrait img{max-width:500px}
.reel .film video{height:clamp(420px,42vw,600px)}
.reel .stats dt{font-size:clamp(32px,3.4vw,48px)}
.reel .stats dd{font-size:14.5px}
.reel .logos-over{padding-top:28px}
.reel .logos-over .wrap{gap:40px}
.reel .logos-over .lg-nd{height:104px}
.reel .logos-over .lg-bmd{height:64px}
.reel .logos-over .lg-dm{height:28px}
.reel .logos-over .sep{height:58px}
.chapter{min-height:480px}
.chapter .ch-text{padding:56px max(var(--gut),calc((100vw - var(--max))/2 + var(--gut))) 56px 64px}
.chapter.flip .ch-text{padding:56px 64px 56px max(var(--gut),calc((100vw - var(--max))/2 + var(--gut)))}
.chapter .logo{height:64px;max-width:250px;margin-bottom:24px}
.chapter p.desc{font:400 17.5px/1.6 var(--sans)}
.pullquote p,.band-dark .pullquote p{font-size:clamp(26px,3.1vw,42px)}
.timeline>li{padding:44px 0}
.timeline h2{font-size:clamp(26px,2.6vw,34px)}
.mini-stats dt{font-size:clamp(26px,2.5vw,34px)}
.card .big{font-size:clamp(28px,2.8vw,38px)}
@media (max-width:960px){:root{--gut:24px}.reel .logos-over .lg-nd{height:64px}.reel .logos-over .lg-bmd{height:40px}.reel .logos-over .lg-dm{height:17px}.reel .logos-over .sep{height:36px}}

/* Viewport-fit pass (2026-10-22): keep every image + its text inside one laptop screen */
:root{--vh-cap:min(56vh,500px)}
.photo img,.about-portrait img,.legacy .photo img,.feature img{max-height:var(--vh-cap);object-fit:cover;object-position:center 40%}
.feature .video img{max-height:none}
.timeline>li{grid-template-columns:180px 1fr;gap:48px;padding:40px 0}
.timeline .what{max-width:52em}
.timeline .what p{max-width:40em}
.timeline .photo{margin:22px 0 0}
.timeline .photo img{aspect-ratio:16/9;max-height:min(50vh,440px)}
.timeline .gallery .photo img{aspect-ratio:4/3;max-height:340px}
.chapter{min-height:0;height:min(76vh,560px)}
.chapter .ch-img img{min-height:0;height:100%}
.chapter .ch-text{padding:36px max(var(--gut),calc((200% - var(--max))/2 + var(--gut))) 36px 56px;overflow:hidden}
.chapter.flip .ch-text{padding:36px 56px 36px max(var(--gut),calc((200% - var(--max))/2 + var(--gut)))}
.chapter .logo{height:56px;margin-bottom:18px}
.chapter .logo[src*="neutraderm"]{height:96px;max-width:260px}
.chapter .logo[src*="drmtlgy"]{height:34px}
.chapter p.desc{font-size:16.5px;line-height:1.55;margin-bottom:18px}
.chapter .role{margin-bottom:14px}
.legacy{gap:48px;align-items:center}
.legacy .photo img{aspect-ratio:4/3}
.feature{gap:48px}
.media-grid{gap:44px 32px}
@media (max-width:960px){
 .chapter,.chapter.flip{height:auto}
 .chapter .ch-img img{height:auto;aspect-ratio:4/3}
 .chapter .ch-text,.chapter.flip .ch-text{padding:36px var(--gut) 48px;overflow:visible}
 .timeline>li{grid-template-columns:1fr}
}
/* chapter fix: height follows text, image fills the cell */
.chapter{height:auto;min-height:min(68vh,480px)}
.chapter .ch-text{overflow:visible}
.chapter .ch-img img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover}
.chapter .ch-img img[src$="bmd-products-black.jpg"]{object-fit:contain;background:#000}
@media (max-width:960px){.chapter .ch-img img{position:static;aspect-ratio:4/3}.chapter .ch-img{min-height:0}}
/* mini-stats in company chapters: compact so the block fits one screen */
.chapter .mini-stats{margin:4px 0 18px;max-width:34em;gap:0 24px}
.chapter .mini-stats>div{padding:11px 0 10px}
.chapter .mini-stats dt{font-size:clamp(24px,2.2vw,30px)}
.chapter .mini-stats dd{font-size:13.5px}
.chapter.flip{background:var(--steel)}
/* named leader callout inside a company chapter */
.chapter .leader{margin:0 0 16px;padding:10px 0 10px 16px;border-left:3px solid var(--accent);font:400 15.5px/1.5 var(--sans);color:var(--text);max-width:34em}
.chapter .leader span{display:block;font:600 11.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
.chapter .leader b{font-weight:600;color:var(--ink)}


/* Home hero: company triptych */
.hero .hero-text{align-self:center;padding:40px 0}
.hero .lede{max-width:20em;font-size:clamp(22px,2.1vw,29px)}
.triptych{background:#fff;border-top:1px solid var(--ink);position:relative;z-index:2}
.triptych .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.tri{display:flex;flex-direction:column;padding:28px 32px 26px 0;margin-right:32px;border-right:1px solid var(--line);color:inherit;text-decoration:none}
.tri:last-child{border-right:0;margin-right:0;padding-right:0}
.tri p{font:400 15.5px/1.5 var(--sans);color:var(--text);margin:0 0 16px;flex:1}
.tri .tri-role{font:600 11.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
@media (max-width:960px){.triptych .wrap{grid-template-columns:1fr}.tri{border-right:0;margin-right:0;padding:22px 0;border-bottom:1px solid var(--line)}.tri:last-child{border-bottom:0}}

/* Home film: logos span the same width as the KPI row, larger */
@media (min-width:961px){
 .reel .logos-over{padding-top:34px}
 .reel .logos-over .wrap{justify-content:space-between;gap:0}
 .reel .logos-over .lg-nd{height:150px}
 .reel .logos-over .lg-bmd{height:92px}
 .reel .logos-over .lg-dm{height:42px}
 .reel .logos-over .sep{height:84px}
}
/* triptych simplified: names, one line, role (logos and numbers live in the film below) */
.tri h3{font:400 clamp(26px,2.4vw,32px)/1.1 var(--serif);color:var(--ink);margin:0 0 10px;letter-spacing:-.01em}
.tri{padding:22px 32px 22px 0}
.tri p{margin:0 0 14px;flex:0 0 auto}
.tri .tri-role{margin-top:auto}
.tri:hover h3{color:var(--accent)}
.split>.side .meta{margin:0 0 10px}
img[src$="bmd-sam-leslie-tradeshow.jpg"]{object-position:50% 1.407%}
.about-portrait img{object-position:center 0%}
.hero .portrait img{object-position:center 0%}
.about-hero .lede{margin-bottom:14px}
.about-hero .lede{font-size:clamp(18px,1.45vw,21px);line-height:1.5;max-width:30em}
.about-hero .lede:last-of-type{margin-bottom:24px}
.reel .logos-over .lg-dm{height:54px}
@media (max-width:960px){.reel .logos-over .lg-dm{height:24px}}
.triptych .wrap{align-items:stretch}.tri{justify-content:flex-start}
/* Stat figures: lining numerals so "50M+" / "5M+" sit evenly with the capital M, even where Safari falls back from Newsreader */
.reel .stats dt,.mini-stats dt,.stats dt,.cards .big{font-family:"Newsreader","Times New Roman",Times,serif;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.timeline .when{font-size:clamp(30px,3vw,42px);padding-right:20px}

/* Pre-launch fixes (2026-11-07) */
/* Stat text over the moving film: keep it legible where the gradient is light */
@media (min-width:961px){.reel .stats dt,.reel .stats dd{text-shadow:0 1px 12px rgba(0,0,0,.55)}}
@media (min-width:961px) and (max-width:1439px){.reel .film::after{background:linear-gradient(180deg,rgba(10,43,39,.62) 0%,rgba(10,43,39,.12) 30%,rgba(7,28,25,.5) 46%,rgba(7,28,25,.88) 64%,rgba(7,28,25,.94) 100%)}}
/* Phones and tablets: logo row scales with the screen so it never overflows; film keeps its intended height; toggle moves off the logos */
@media (max-width:960px){
 .reel .film video{height:clamp(300px,70vw,460px)}
 .reel .logos-over .wrap{gap:min(22px,3.2vw)}
 .reel .logos-over .lg-nd{height:min(64px,13vw)}
 .reel .logos-over .lg-bmd{height:min(40px,8.5vw)}
 .reel .logos-over .lg-dm{height:min(24px,4.2vw)}
 .reel .logos-over .sep{height:min(36px,7vw)}
 .reel .film-toggle{top:auto;bottom:12px;right:12px}
}
@media (max-width:360px){.reel .stats dt,.mini-stats dt{white-space:normal}}
/* 404 page */
.notfound{padding:96px 0 120px}
.notfound h1{font:400 clamp(42px,5.2vw,72px)/.98 var(--serif);color:var(--ink);margin:0 0 32px;letter-spacing:-.03em}

/* Pre-launch fixes, round 2 (2026-11-07) */
/* Footer reaches the bottom of the window on short pages */
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1 0 auto}
/* Home cards: clip sideways only, so the focus ring shows in full */
.hero{overflow:hidden;overflow:clip visible}
/* DRMTLGY bestsellers: keep all four products in the crop */
.chapter .ch-img img[src$="drmtlgy-bestsellers.jpg"]{object-position:53% 50%}
/* Phones and tablets: the mobile spacing the later passes overrode */
@media (max-width:960px){
 section{padding:56px 0}
 .page-head{padding:48px 0 32px}
 .split,.feature,.legacy{gap:32px}
 .portrait img{max-width:420px}
 .about-portrait img{max-width:420px;max-height:none;margin:0 auto}
 .timeline>li{gap:14px;padding:36px 0}
 .tri{padding:22px 0}
}
@media (min-width:600px) and (max-width:960px){.gallery{grid-template-columns:1fr 1fr}}
@media (max-width:480px){:root{--gut:20px}}
/* Short landscape screens: show photos whole */
@media (orientation:landscape) and (max-height:500px){:root{--vh-cap:none}.timeline .photo img{max-height:none}}
/* Community cards: subheadings line up across each row */
@media (min-width:961px){
 .cards{grid-template-rows:repeat(2,auto auto 1fr)}
 .card{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}
}

/* Device pass from Sam's update (2026-11-07): small phones, touch targets, tablets.
   Left out: his logo-row widths (the logo row is already sized above, and both together would stretch the logos)
   and his extra stat padding under 400px (it stacked on the 20px column gap and squeezed the left column). */
.brand{display:inline-flex;align-items:center;min-height:44px}
.chapter .go,.more-link{display:inline-flex;align-items:center;min-height:44px}
.chapter,.chapter>*,.stats>*,.reel .stats>*{min-width:0}
.chapter .ch-text{overflow-wrap:anywhere}
@media (max-width:400px){
  .reel .stats{grid-template-columns:1fr 1fr}
  .reel .stats dt{font-size:clamp(26px,8vw,34px);white-space:normal}
  .reel .stats dd{font-size:14px}
  .chapter .ch-img img{max-width:100%}
}
@media (hover:none){a,button{-webkit-tap-highlight-color:rgba(12,106,91,.15)}}
@supports (padding:max(0px)){body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}}
@media (max-width:400px){.stats{grid-template-columns:1fr 1fr}.stats dt{white-space:normal;overflow-wrap:anywhere}.stats dd{overflow-wrap:anywhere}}
@media (max-width:400px){.mini-stats{grid-template-columns:1fr!important}.mini-stats dt{white-space:normal;overflow-wrap:anywhere}.mini-stats>div{min-width:0}}