/* Carlin 4.0 — interior page types.
   Extends the homepage material system in main.css (mahogany · leather · glass · gold).
   Page types covered here: page head, before/after gallery (case), team, about (bio). */

/* ============ shared interior bits ============ */
.page-head { padding: 92px var(--pad-x) 72px; text-align: center; }
.page-head-inner { max-width: 900px; margin: 0 auto; }
.page-head .eyebrow { color: var(--tan-cap); }
.page-head h1 {
  font: 600 clamp(42px, 5.6vw, 78px)/1.04 var(--serif);
  color: var(--tan-head); margin-top: 18px; letter-spacing: -.01em;
}
.page-head .gold-rule { margin: 22px auto 0; }
.page-head .lead {
  font: 400 clamp(16px, 1.4vw, 19px)/1.7 var(--sans);
  color: var(--tan-body); margin-top: 26px;
}
.kicker {
  font: 400 12px/1 var(--sans); letter-spacing: .34em;
  text-transform: uppercase; color: var(--brown-cap);
}
.mahogany .kicker { color: var(--tan-cap); }

.btn-line {
  display: inline-block; margin-top: 22px; padding: 13px 26px;
  font: 500 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-light); border: 1px solid rgba(201,162,92,.55); border-radius: 3px;
  transition: background .25s, color .25s;
}
.btn-line:hover { background: rgba(201,162,92,.16); color: var(--tan-head); }
.leather .btn-line { color: var(--brown-btn); border-color: rgba(106,72,31,.45); }
.leather .btn-line:hover { background: rgba(106,72,31,.1); color: var(--brown-head); }

.glass-cream {
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.24));
  border: 1px solid rgba(120,90,50,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 12px 34px rgba(60,40,20,.1);
  border-radius: 6px;
}

/* ============ before & after gallery ============ */
.ba-count {
  margin-top: 20px; font: 400 12px/1 var(--sans);
  letter-spacing: .28em; text-transform: uppercase; color: var(--tan-cap);
}

.ba-section { padding: 64px var(--pad-x) 96px; }

.ba-filters {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  max-width: var(--maxw); margin: 0 auto 56px;
}
.ba-filter {
  cursor: pointer; padding: 12px 24px; border-radius: 3px;
  font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--brown-body); background: rgba(255,255,255,.34);
  border: 1px solid rgba(120,90,50,.24); transition: all .22s;
}
.ba-filter span { opacity: .55; margin-left: 8px; letter-spacing: 0; }
.ba-filter:hover { background: rgba(255,255,255,.6); color: var(--brown-head); }
.ba-filter.active {
  background: var(--brown-btn); border-color: var(--brown-btn); color: var(--cream);
}

.ba-grid { max-width: var(--maxw); margin: 0 auto; display: grid; gap: clamp(48px, 6vw, 84px); }


.ba-note {
  max-width: 780px; margin: 56px auto 0; text-align: center;
  font: 400 13px/1.7 var(--sans); color: var(--brown-body); opacity: .8;
}

/* ============ team ============ */
.team-lead { padding: 84px var(--pad-x); }
.team-lead-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: minmax(280px, 460px) 1fr; gap: 56px; align-items: center;
}
.team-lead-photo img { width: 100%; border-radius: 6px; box-shadow: 0 24px 60px rgba(60,40,20,.24); }
.team-lead h2 {
  font: 600 clamp(32px, 3.8vw, 52px)/1.08 var(--serif);
  color: var(--brown-head); margin-top: 14px;
}
.team-lead p { font: 400 16px/1.75 var(--sans); color: var(--brown-body); margin-top: 22px; }

.team-section { padding: 84px var(--pad-x) 96px; }
.team-head { max-width: var(--maxw); margin: 0 auto 52px; }
.team-head h2 { font: 600 clamp(30px, 3.4vw, 46px)/1.1 var(--serif); color: var(--tan-head); margin-top: 14px; }

.team-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
@media (max-width: 1000px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .team-grid { grid-template-columns: 1fr; } }
.team-card {
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
  border: 1px solid rgba(201,162,92,.24); border-radius: 6px; overflow: hidden;
}
.team-photo img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }   /* native 800x1200 — no crop */
.team-meta { padding: 22px 22px 26px; }
.team-meta h3 { font: 600 26px/1.2 var(--serif); color: var(--tan-head); }
.team-role {
  margin-top: 7px; font: 400 11px/1.4 var(--sans);
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
}
.team-tag { margin-top: 10px; font: 400 14px/1.5 var(--serif); font-style: italic; color: var(--tan-body-2); }
.team-meta p { margin-top: 14px; font: 400 14px/1.72 var(--sans); color: var(--tan-body); }
.team-mail { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--gold-light); word-break: break-all; }
.team-mail:hover { color: var(--tan-head); }

.team-contact {
  max-width: var(--maxw); margin: 56px auto 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px;
  padding-top: 34px; border-top: 1px solid rgba(201,162,92,.22);
}
.team-contact span {
  display: block; font: 400 11px/1 var(--sans);
  letter-spacing: .22em; text-transform: uppercase; color: var(--tan-cap); margin-bottom: 8px;
}
.team-contact a { color: var(--gold-light); font-size: 14px; word-break: break-all; }

/* ============ about / bio ============ */
.about-hero { padding: 84px var(--pad-x); }
.about-hero-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: minmax(280px, 520px) 1fr; gap: 60px; align-items: center;
}
.about-photo img { width: 100%; border-radius: 6px; box-shadow: 0 24px 60px rgba(60,40,20,.24); }
.about-quote blockquote {
  margin-top: 20px; font: 400 clamp(20px, 2.2vw, 29px)/1.5 var(--serif);
  font-style: italic; color: var(--brown-head);
}
.about-quote .who {
  margin-top: 18px; font: 400 11px/1 var(--sans);
  letter-spacing: .26em; text-transform: uppercase; color: var(--brown-cap);
}
.about-quote p { margin-top: 22px; font: 400 16px/1.75 var(--sans); color: var(--brown-body); }

.about-stats { padding: 52px var(--pad-x); }
.stat-row {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; text-align: center;
}
.stat b { display: block; font: 500 clamp(30px, 3.4vw, 46px)/1 var(--display); color: var(--gold-light); }
.stat span {
  display: block; margin-top: 12px; font: 400 11px/1.5 var(--sans);
  letter-spacing: .2em; text-transform: uppercase; color: var(--tan-body-2);
}

.about-body { padding: 84px var(--pad-x) 96px; }
.about-cols {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr minmax(280px, 400px); gap: 60px; align-items: start;
}
.about-main h2 { font: 600 clamp(28px, 3.2vw, 42px)/1.12 var(--serif); color: var(--brown-head); margin-top: 14px; }
.about-main h2 + .gold-rule { margin-bottom: 24px; }
.about-main p { font: 400 16px/1.8 var(--sans); color: var(--brown-body); margin-bottom: 18px; }
.about-main h2:not(:first-of-type) { margin-top: 46px; }

.about-card { padding: 28px 28px 30px; margin-bottom: 22px; }
.about-card h4 {
  font: 400 11px/1 var(--sans); letter-spacing: .26em;
  text-transform: uppercase; color: var(--brown-cap); margin-bottom: 18px;
}
.about-card ul { list-style: none; }
.about-card li {
  font: 400 14px/1.6 var(--sans); color: var(--brown-body);
  padding: 10px 0 10px 18px; position: relative;
  border-bottom: 1px solid rgba(120,90,50,.14);
}
.about-card li:last-child { border-bottom: 0; }
.about-card li::before { content: '✦'; position: absolute; left: 0; color: var(--gold-deep); font-size: 10px; top: 12px; }

/* ============ responsive ============ */
@media (max-width: 1100px) {
  .team-lead-inner, .about-hero-inner, .about-cols { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 760px) {
  :root { --pad-x: 20px; }
  .page-head { padding: 62px var(--pad-x) 52px; }
  .ba-section, .team-section, .about-body { padding-left: var(--pad-x); padding-right: var(--pad-x); }
  .ba-filter { padding: 10px 16px; font-size: 11px; }
}

/* ============ internal draft flag (build with DRAFT=0 to remove) ============ */
.draft-flag {
  position: relative; z-index: 200;
  padding: 9px 20px; text-align: center;
  font: 500 11px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: #1a1208; background: linear-gradient(90deg, #e6c98a, #c9a25c);
}

/* ============ breadcrumbs ============ */
.crumbs {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  font: 400 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--tan-body-2); margin-bottom: 26px;
}
.crumbs a { color: var(--tan-cap); }
.crumbs a:hover { color: var(--gold-light); }
.crumbs span[aria-current] { color: var(--gold-light); }

/* ============ procedure page ============ */
.proc-facts { background: rgba(9,5,3,.96); border-block: 1px solid rgba(201,162,92,.22); padding: 22px var(--pad-x); }
.proc-facts-row {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 20px 48px; justify-content: center;
}
.proc-facts-row span { font: 400 12px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #cbb593; }
.proc-facts-row span b { color: var(--gold-light); font-weight: 400; margin-right: 10px; }

.proc-ba { padding: 92px var(--pad-x) 96px; }
.proc-ba-head {
  max-width: var(--maxw); margin: 0 auto 44px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.proc-ba-head h2 { font: 600 clamp(34px, 4vw, 56px)/1.06 var(--serif); color: var(--tan-head); margin-top: 14px; }
.proc-ba-head p { font: 300 16px/1.7 var(--sans); color: var(--tan-body); max-width: 460px; }
.proc-ba-cases {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; gap: clamp(40px, 5vw, 72px);
}
.proc-ba-cta { max-width: var(--maxw); margin: 40px auto 0; display: flex; flex-wrap: wrap; gap: 16px; }

/* single static review (procedure pages reuse the .testi shell) */
.testi-static { margin-top: 40px; }
.testi-static blockquote {
  font: italic 400 clamp(22px, 2.3vw, 31px)/1.62 var(--serif); color: var(--brown-head);
  max-width: 860px; margin: 0 auto;
}
.testi-static .who {
  font: 400 14px/1.5 var(--sans); letter-spacing: .24em;
  text-transform: uppercase; color: var(--brown-cap); margin-top: 22px;
}

/* ============ FAQ ============ */
.faq { padding: 92px var(--pad-x) 100px; }
.faq-head { max-width: var(--maxw); margin: 0 auto 40px; }
.faq-head h2 { font: 600 clamp(32px, 3.6vw, 50px)/1.08 var(--serif); color: var(--tan-head); margin-top: 14px; }
.faq-list { max-width: 980px; margin: 0 auto; }
.faq-list details {
  border-bottom: 1px solid rgba(201,162,92,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
}
.faq-list details[open] { background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02)); }
.faq-list summary {
  cursor: pointer; list-style: none; padding: 24px 46px 24px 22px; position: relative;
  font: 400 clamp(17px, 1.7vw, 21px)/1.4 var(--serif); color: var(--tan-head);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  color: var(--gold-light); font: 300 24px/1 var(--sans);
}
.faq-list details[open] summary::after { content: "\2013"; }
.faq-list summary:hover { color: var(--gold-light); }
.faq-list p { padding: 0 46px 26px 22px; font: 400 15px/1.8 var(--sans); color: var(--tan-body); }

/* ============ related procedures ============ */
.related { padding: 92px var(--pad-x) 100px; }
.related-head { max-width: var(--maxw); margin: 0 auto 40px; }
.related-head h2 { font: 600 clamp(30px, 3.4vw, 46px)/1.1 var(--serif); color: var(--brown-head); margin-top: 14px; }
.related-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px;
}
.related-card {
  display: block; padding: 30px 28px 32px;
  background: rgba(255,255,255,.42); border: 1px solid rgba(120,90,50,.2); border-radius: 6px;
  transition: transform .25s, box-shadow .25s;
}
.related-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(60,40,20,.16); }
.related-card h3 { font: 600 30px/1.14 var(--serif); color: var(--brown-head); margin: 10px 0 12px; }
.related-card p { font: 400 15px/1.7 var(--sans); color: var(--brown-body); }
.related-card .go {
  display: inline-block; margin-top: 16px; font: 500 11px/1 var(--sans);
  letter-spacing: .22em; text-transform: uppercase; color: var(--brown-btn);
}

/* ============ case page ============ */
.case-hero { padding: 84px var(--pad-x); }
.case-hero-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: center;
}
.case-facts { display: grid; gap: 2px; }
.case-facts .fact { padding: 18px 0; border-bottom: 1px solid rgba(120,90,50,.2); }
.case-facts .fact:last-child { border-bottom: 0; }
.case-facts span {
  display: block; font: 400 11px/1 var(--sans);
  letter-spacing: .24em; text-transform: uppercase; color: var(--brown-cap); margin-bottom: 9px;
}
.case-facts b { font: 600 17px/1.5 var(--serif); color: var(--brown-head); }

.case-views { padding: 84px var(--pad-x) 96px; }
.case-views-head { max-width: var(--maxw); margin: 0 auto 40px; }
.case-views-head h2 { font: 600 clamp(32px, 3.6vw, 50px)/1.08 var(--serif); color: var(--tan-head); margin-top: 14px; }
.case-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px;
}
.case-grid figcaption {
  grid-column: 1 / -1; padding: 12px 2px 0;
  font: 400 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--tan-cap);
}
.case-extra { max-width: var(--maxw); margin: 44px auto 0; }
.case-extra-head {
  font: 400 11px/1 var(--sans); letter-spacing: .22em;
  text-transform: uppercase; color: var(--tan-cap); margin-bottom: 14px;
}
.case-extra-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.case-extra-grid img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; }
.case-note {
  max-width: 820px; margin: 48px auto 0; text-align: center;
  font: 400 13px/1.75 var(--sans); color: var(--tan-body-2);
}
.case-next { padding: 92px var(--pad-x); text-align: center; }
.case-next-inner { max-width: 720px; margin: 0 auto; }
.case-next h2 { font: 600 clamp(32px, 3.8vw, 52px)/1.08 var(--serif); color: var(--brown-head); margin-top: 14px; }
.case-next .gold-rule { margin: 20px auto 0; }
.case-next p { font: 400 17px/1.75 var(--sans); color: var(--brown-body); margin-top: 24px; }
.case-next .btn-light-glass { margin-top: 28px; }

/* ============ blog post ============ */
.post-head { padding: 92px var(--pad-x) 76px; text-align: center; }
.post-head-inner { max-width: 940px; margin: 0 auto; }
.post-head .eyebrow { color: var(--gold-light); }
.post-head h1 {
  font: 600 clamp(34px, 4.6vw, 62px)/1.12 var(--serif);
  color: var(--tan-head); margin-top: 18px;
}
.post-head .gold-rule { margin: 24px auto 0; }
.post-meta {
  margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  font: 400 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--tan-body-2);
}

.post { padding: 84px var(--pad-x) 96px; }
.post-body { max-width: 760px; margin: 0 auto; }
.post-lead {
  font: 400 clamp(19px, 2vw, 24px)/1.62 var(--serif);
  color: var(--brown-head); padding-bottom: 30px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(120,90,50,.22);
}
.post-body h2 {
  font: 600 clamp(25px, 2.8vw, 34px)/1.16 var(--serif);
  color: var(--brown-head); margin: 46px 0 18px;
}
.post-body p { font: 400 17px/1.85 var(--sans); color: var(--brown-body); margin-bottom: 18px; }
.post-body strong { color: var(--brown-head); font-weight: 600; }
.post-list { list-style: none; margin: 4px 0 22px; }
.post-list li {
  position: relative; padding: 12px 0 12px 26px;
  font: 400 16px/1.75 var(--sans); color: var(--brown-body);
  border-bottom: 1px solid rgba(120,90,50,.14);
}
.post-list li::before { content: "\2726"; position: absolute; left: 0; top: 16px; font-size: 10px; color: var(--gold-deep); }
.post-list b { color: var(--brown-head); font-weight: 600; }
blockquote.pull {
  margin: 34px 0; padding: 26px 0 26px 30px;
  border-left: 2px solid var(--gold-deep);
  font: italic 400 clamp(20px, 2.1vw, 27px)/1.55 var(--serif); color: var(--brown-head);
}
.post-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 28px 30px; margin: 40px 0;
}
.post-cta h3 { font: 600 24px/1.2 var(--serif); color: var(--brown-head); margin: 10px 0 6px; }
.post-cta p { font: 400 15px/1.6 var(--sans); color: var(--brown-body); margin: 0; }
.post-cta .btn-line { margin-top: 0; }
.post-author { display: flex; gap: 26px; padding: 30px; margin-top: 52px; align-items: flex-start; }
.post-author img { width: 150px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; flex: 0 0 auto; }  /* native 1067x1600 */
.post-author h4 { font: 600 24px/1.2 var(--serif); color: var(--brown-head); margin: 10px 0 10px; }
.post-author p { font: 400 15px/1.7 var(--sans); color: var(--brown-body); margin: 0; }

/* ============ contact page ============ */
.contact-bigphone {
  display: inline-block; margin-top: 30px;
  font: 600 clamp(30px, 3.6vw, 48px)/1 var(--serif); color: var(--gold-light);
}
.contact-bigphone:hover { color: var(--tan-head); }

.contact-main { padding: 84px var(--pad-x) 92px; }
.contact-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr minmax(320px, 560px); gap: 60px; align-items: start;
}
.contact-block { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid rgba(120,90,50,.2); }
.contact-block:last-child { border-bottom: 0; }
.contact-block p { font: 400 16px/1.75 var(--sans); color: var(--brown-body); margin-top: 14px; }
.contact-block p.small { font-size: 14px; opacity: .85; }
.contact-block strong { color: var(--brown-head); font-weight: 600; }
.hours { margin-top: 14px; }
.hours div {
  display: flex; justify-content: space-between; gap: 20px;
  font: 400 16px/2.1 var(--sans); color: var(--brown-body);
  border-bottom: 1px solid rgba(120,90,50,.12);
}
.hours div:last-child { border-bottom: 0; }
.hours div span:last-child, .hours div a { color: var(--brown-head); }
.routes { margin-top: 16px; display: grid; gap: 18px; }
.routes b { display: block; font: 600 16px/1.4 var(--serif); color: var(--brown-head); }
.routes span { display: block; font: 400 12px/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--brown-cap); margin: 4px 0 5px; }
.routes a { font: 400 15px/1.5 var(--sans); color: var(--brown-btn); word-break: break-all; }
.routes a:hover { color: var(--gold-deep); }
.contact-block.notice { padding: 26px 28px; border-bottom: 0; }

.contact-form { padding: 34px 32px 38px; }
.contact-form h2 { font: 600 clamp(28px, 3vw, 40px)/1.1 var(--serif); color: var(--brown-head); margin-top: 12px; }
.contact-form .gold-rule { margin-bottom: 26px; }
.contact-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.contact-form input, .contact-form textarea, .contact-form select {
  width: 100%; padding: 15px 16px; margin-bottom: 14px;
  font: 400 15px/1.4 var(--sans); color: var(--brown-head);
  background: rgba(255,255,255,.6); border: 1px solid rgba(120,90,50,.28); border-radius: 3px;
}
.contact-form .row2 input { margin-bottom: 0; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(90,70,52,.62); }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  outline: none; border-color: var(--gold-deep); background: rgba(255,255,255,.85);
}
.contact-form .form-note { margin-top: 14px; font: 400 12px/1.6 var(--sans); color: var(--brown-body); opacity: .75; }

.contact-map { height: 460px; }
.contact-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.35) sepia(.12); }

@media (max-width: 1100px) {
  .case-hero-inner, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 760px) {
  .proc-ba, .faq, .related, .case-hero, .case-views, .case-next, .post, .contact-main {
    padding-left: var(--pad-x); padding-right: var(--pad-x);
  }
  .case-grid { grid-template-columns: 1fr; }
  .post-author { flex-direction: column; }
  .post-author img { width: 140px; }   /* keep the native 2:3 — never crop the face */
  .contact-form .row2 { grid-template-columns: 1fr; gap: 0; }
  .contact-form .row2 input { margin-bottom: 14px; }
}

/* ============ case-study slide + case card ==============================
   The slide itself is a FINISHED IMAGE authored outside this repo (2020 slides
   still on the live site; 2026 slides from SOMA). Nothing here draws one.

   A CASE is the unit: one patient's views are held together in a single wood
   card — copper hairline, drop shadow — with a lead Front View across the card
   and the remaining views in a row beneath, each captioned. Click a slide and
   it opens full screen on the same wood, the way the live site blew the slide
   up. Behaviour: the lightbox block in js/main.js. */

.cs-case {
  width: 100%; max-width: 1240px; justify-self: center;   /* width first: a grid item with
                                                             auto margins sizes to max-content */
  padding: clamp(18px, 2.2vw, 34px);
  /* the card sits ON the section's wood, so it is lifted off it: lighter grain, a copper
     hairline, a top highlight and a real drop shadow. Raised, not inset. */
  background:
    linear-gradient(180deg, rgba(96,58,28,.36), rgba(26,14,7,.58)),
    url('../assets/wood.webp') center / 150% auto;
  border: 1px solid rgba(201,162,92,.5);
  border-radius: 5px;
  box-shadow:
    0 34px 70px rgba(0,0,0,.58),
    0 8px 20px rgba(0,0,0,.4),
    0 1px 0 rgba(255,228,190,.14) inset;
}
.cs-case[hidden] { display: none; }

.cs-case-head {
  display: flex; align-items: baseline; gap: 8px 18px; flex-wrap: wrap;
  padding-bottom: 13px; margin-bottom: clamp(16px, 1.8vw, 24px);
  border-bottom: 1px solid rgba(201,162,92,.26);
  font: 400 12px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
}
.cs-case-head b { font-weight: 500; color: var(--gold-light); }
.cs-case-head span { color: var(--tan-body-2); letter-spacing: .16em; }
.cs-case-head .cs-case-link { margin-left: auto; color: var(--gold); letter-spacing: .12em; }
.cs-case-head .cs-case-link:hover { color: var(--gold-light); }

.cs { margin: 0; }
.cs-open {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; -webkit-tap-highlight-color: transparent;
}
.cs-open img {
  width: 100%; height: auto; display: block; background: #060403;
  border: 1px solid rgba(196,140,96,.3);
  transition: border-color .22s, box-shadow .22s, transform .22s;
}
.cs-open:hover img, .cs-open:focus-visible img {
  border-color: rgba(230,201,138,.72);
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
  transform: translateY(-2px);
}
.cs-open:focus { outline: none; }
.cs-open:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.cs figcaption {
  margin-top: 9px; text-align: center;
  font: 400 12px/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--tan-cap);
}
.cs-lead { margin-bottom: clamp(14px, 1.8vw, 22px); }

/* Two across, as on the live site — a whole slide (wordmark, panels, address line) is
   unreadable much narrower than this, so a third view starts a second row at the same size. */
.cs-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.8vw, 24px); }
@media (max-width: 700px) { .cs-row { grid-template-columns: 1fr; } }
.cs-row-wide { max-width: 1240px; margin: 0 auto; }

.cs-note {
  max-width: 780px; margin: clamp(26px, 3vw, 40px) auto 0;
  font: 300 13px/1.75 var(--sans); color: var(--tan-body-2);
}

/* On a light (leather) section the card keeps its wood; only the loose text changes. */
.leather .cs-note { color: var(--brown-body); }

/* ---- lightbox: the slide, full screen, on the same wood ---- */
.cs-box[hidden] { display: none !important; }
.cs-box {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; flex-direction: column;
  background:
    linear-gradient(180deg, rgba(18,10,5,.9), rgba(8,4,2,.97)),
    url('../assets/wood.webp') top center / 1600px auto no-repeat,
    linear-gradient(180deg, rgba(19,11,6,0) 0, rgba(19,11,6,1) 980px),
    #130b06;
  animation: csFade .22s ease-out;
}
@keyframes csFade { from { opacity: 0; } to { opacity: 1; } }
.cs-box-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px clamp(16px, 3vw, 40px);
  border-bottom: 1px solid rgba(201,162,92,.2);
  font: 400 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--tan-body-2);
}
.cs-box-bar b { color: var(--gold-light); font-weight: 500; }
.cs-box-bar .cs-box-view { margin-left: auto; color: var(--tan-cap); }
.cs-box-stage {
  flex: 1; min-height: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(14px, 2.5vw, 36px);
}
.cs-box-stage img {
  /* fill the screen, not sit at native size — but capped, because the artwork is 1023px
     (2026) / 1355px (2020) wide and past ~1.5x it goes soft. */
  width: min(100%, 1500px); height: auto; max-height: 100%; object-fit: contain;
  display: block; background: #060403;
  border: 1px solid rgba(196,140,96,.42);
  box-shadow: 0 30px 80px rgba(0,0,0,.65);
}
.cs-box button {
  border: 1px solid rgba(201,162,92,.42); background: rgba(20,12,7,.62);
  color: var(--tan-head); cursor: pointer; backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s, color .2s;
}
.cs-box button:hover { background: rgba(106,72,31,.72); border-color: var(--gold); color: var(--gold-light); }
.cs-box-close {
  width: 40px; height: 40px; border-radius: 50%; font: 400 20px/1 var(--sans);
  position: absolute; top: 12px; right: clamp(12px, 3vw, 32px); z-index: 2;
}
.cs-box-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 74px; font: 400 22px/1 var(--sans);
}
.cs-box-prev { left: clamp(8px, 2vw, 26px); }
.cs-box-next { right: clamp(8px, 2vw, 26px); }
.cs-box-foot {
  padding: 0 clamp(16px, 3vw, 40px) 18px; text-align: center;
  font: 400 11px/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--tan-cap);
}
@media (max-width: 700px) {
  .cs-box-nav { width: 38px; height: 60px; }
  .cs-box-bar { letter-spacing: .14em; font-size: 11px; }
}

/* An interior hero is a signpost, not a poster: at 16:9 full-bleed it filled a 2560px screen with
   a 1430px-tall face. Capped so the page below it is visible without scrolling. */
.hero.hero-page { max-height: 78vh; }

/* ============ interior hero =============================================
   The homepage hero, reused on interior pages with a still in place of the
   video loop. Same 16:9 frame, same overlays, same right-aligned copy, same
   trust bar — an interior page should read as the same site, not as a tall
   text block. Replaces the old .page-head masthead on procedure pages. */
/* Every interior hero is a 16:9 media plate with the subject framed centre. Keep the subject
   centred at every viewport (heads in the middle) — on desktop the 16:9 media fills the 16:9 box
   with no crop; on narrower/taller boxes the sides crop evenly around the centred subject. */
.hero-page .vid-wrap img,
.hero-page .vid-wrap video { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
/* About: Dr. Carlin sits at ~28% (left, in the open) on desktop where the 16:9 media fills the 16:9
   box uncropped. On narrower/taller boxes the sides crop, so anchor on his face so it's never cut. */
.page-about .hero-page .vid-wrap img { object-position: 24% center; }
.hero-page .crumbs { justify-content: flex-end; margin-bottom: 20px; }
.hero-page h1 { margin: 20px 0 22px; }
.hero-page .hero-cta a { padding: 20px 34px; font-size: 13px; }

/* A high-key photograph needs a heavier scrim on the copy side than the video does,
   or gold-on-white loses its contrast. */
/* No full-width curtain on an interior hero — it banded across the picture and killed the
   photograph. The scrim is a BOX behind the copy instead: 60px of pad, a soft tint that is dark
   at the right and fades to nothing on the left, and a single gold hairline down its left edge
   for separation. No top or bottom gradient: those muddied the frame. Everything else stays clear. */
.hero-page .ovl-x { display: none; }
.hero-page .hero-inner { position: relative; padding: 60px; }
.hero-page .hero-inner > * { position: relative; z-index: 1; }
.hero-page .hero-inner::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: -46px; pointer-events: none;
  /* Mahogany, not black — straight black drains the colour out of the photograph. Radial, not
     linear: a linear fill has hard top and bottom edges, which read as a grey slab as soon as the
     hero behind it is a light shot. This has no straight edge anywhere and still carries the copy. */
  background: radial-gradient(118% 132% at 104% 50%,
    rgba(52,16,11,.46) 0%, rgba(50,15,10,.34) 40%, rgba(46,14,9,.14) 68%, rgba(44,14,9,0) 88%);
}
/* the hairline: 1px, gold, fading out at both ends */
.hero-page .hero-inner::after {
  content: ""; position: absolute; top: 4%; bottom: 4%; left: 0; width: 1px; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(230,201,138,0) 0%, rgba(230,201,138,.34) 22%, rgba(230,201,138,.34) 78%, rgba(230,201,138,0) 100%);
}
@media (max-width: 900px) {
  /* narrow screens: the copy box spans the column, so the scrim reads as a soft plate. The
     heroes are cut with the subject left of centre for the desktop copy, so the mobile crop is
     pulled left too — otherwise `cover` centres on the empty half of the frame. */
  .hero-page .hero-inner { padding: 40px 28px; }
  .hero-page .hero-inner::before { right: -28px; left: -28px; }
  .hero-page .hero-inner::after { display: none; }
  .hero-page video, .hero-page .vid-wrap > img { object-position: 34% center; }
}

/* ============ internal B&A census (/_review/bna-census) ============ */
.page-census { background: #100e0c; }
.cn-head { max-width: 1500px; margin: 0 auto; padding: 48px 24px 10px; }
.cn-head h1 { font: 600 36px/1.15 var(--serif); color: var(--tan-head); }
.cn-head p { font: 400 15px/1.7 var(--sans); color: var(--tan-body); margin-top: 14px; max-width: 900px; }
.cn-head b { color: var(--gold-light); }
.cn-meta { font-size: 13px; opacity: .75; }
.cn-head code, .cn-era code { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--gold-light); font-size: 12.5px; }
.cn-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.cn-jump a {
  padding: 9px 16px; border: 1px solid rgba(201,162,92,.4); border-radius: 3px;
  font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tan-body);
}
.cn-jump a:hover { background: rgba(201,162,92,.14); color: var(--gold-light); }
.cn-jump a span { color: var(--gold); margin-left: 8px; letter-spacing: 0; }

.cn-era { max-width: 1500px; margin: 0 auto; padding: 40px 24px; border-top: 1px solid rgba(201,162,92,.18); }
.cn-era header { margin-bottom: 22px; }
.cn-era h2 { font: 600 26px/1.2 var(--serif); color: var(--tan-head); }
.cn-era header p { font: 400 14px/1.7 var(--sans); color: var(--tan-body-2); margin-top: 8px; max-width: 860px; }
.cn-count { font: 400 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-top: 12px; }
.cn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.cn-cell { background: #000; border: 1px solid rgba(201,162,92,.22); }
.cn-cell img { width: 100%; display: block; }
.cn-noimg {
  aspect-ratio: 4/3; display: grid; place-items: center; text-align: center;
  font: 400 12px/1.5 var(--sans); color: var(--tan-body-2); background: #1a1512;
}
.cn-cell figcaption {
  padding: 7px 9px; font: 400 10.5px/1.4 var(--sans); color: var(--tan-body-2);
  display: flex; justify-content: space-between; gap: 8px; word-break: break-all;
}
.cn-cell figcaption span { color: var(--gold); flex: 0 0 auto; }

/* ============ feature grid (surgery center · new patients · financing) ============ */
.feature-sec { padding: 84px var(--pad-x) 92px; }
.feature-head { max-width: var(--maxw); margin: 0 auto 48px; text-align: center; }
.feature-head h2 { font: 600 clamp(30px, 3.4vw, 46px)/1.1 var(--serif); color: var(--brown-head); margin-top: 14px; }
.feature-head .gold-rule { margin: 20px auto 0; }
.feature-head p { max-width: 740px; margin: 22px auto 0; font: 400 16px/1.7 var(--sans); color: var(--brown-body); }
.mahogany .feature-head h2 { color: var(--tan-head); }
.mahogany .feature-head p { color: var(--tan-body); }
.feature-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px;
}
.feature { padding: 34px 30px 36px; background: rgba(255,255,255,.42); border: 1px solid rgba(120,90,50,.2); border-radius: 6px; }
.mahogany .feature { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border-color: rgba(201,162,92,.24); }
.feature .fnum { font: 400 12px/1 var(--sans); letter-spacing: .3em; color: var(--gold-deep); }
.mahogany .feature .fnum { color: var(--gold); }
.feature h3 { font: 600 24px/1.22 var(--serif); color: var(--brown-head); margin: 14px 0 12px; }
.mahogany .feature h3 { color: var(--tan-head); }
.feature p { font: 400 15px/1.72 var(--sans); color: var(--brown-body); }
.mahogany .feature p { color: var(--tan-body); }

/* ============ facility photo gallery (mixed portrait/landscape → masonry columns) ============ */
.facility-sec { padding: 84px var(--pad-x) 92px; }
.facility-grid { max-width: 1200px; margin: 0 auto; columns: 3 300px; column-gap: 16px; }
.facility-grid figure {
  break-inside: avoid; margin: 0 0 16px; border: 1px solid rgba(201,162,92,.22);
  border-radius: 6px; overflow: hidden; background: #000;
}
.facility-grid img { width: 100%; display: block; }
.facility-grid figcaption {
  padding: 11px 14px; font: 400 11px/1.4 var(--sans); letter-spacing: .18em;
  text-transform: uppercase; color: var(--tan-cap); background: rgba(12,7,4,.55);
}

/* ============ simple prose block (new patients · financing · privacy) ============ */
.prose-sec { padding: 84px var(--pad-x) 96px; }
.prose { max-width: 820px; margin: 0 auto; }
.prose h2 { font: 600 clamp(26px, 3vw, 40px)/1.12 var(--serif); color: var(--brown-head); margin: 46px 0 16px; }
.prose h2:first-child { margin-top: 0; }
.prose h2 + .gold-rule { margin-bottom: 22px; }
.prose p { font: 400 17px/1.8 var(--sans); color: var(--brown-body); margin-bottom: 18px; }
.prose strong { color: var(--brown-head); font-weight: 600; }
.prose a { color: var(--brown-btn); border-bottom: 1px solid rgba(106,72,31,.4); }
.prose a:hover { color: var(--gold-deep); }
.prose ul { list-style: none; margin: 6px 0 22px; }
.prose li {
  position: relative; padding: 11px 0 11px 26px; font: 400 16px/1.7 var(--sans);
  color: var(--brown-body); border-bottom: 1px solid rgba(120,90,50,.14);
}
.prose li::before { content: '\2726'; position: absolute; left: 0; top: 15px; font-size: 10px; color: var(--gold-deep); }
.mahogany .prose h2 { color: var(--tan-head); }
.mahogany .prose p, .mahogany .prose li { color: var(--tan-body); }

@media (max-width: 760px) {
  .feature-sec, .facility-sec, .prose-sec { padding-left: var(--pad-x); padding-right: var(--pad-x); }
  .facility-grid { columns: 1; }
}

/* ============ testimonials page ============ */
.reviews-sec { padding: 64px var(--pad-x) 20px; }
.reviews-sec.last { padding-bottom: 96px; }
.reviews-cat { max-width: var(--maxw); margin: 0 auto 30px; display: flex; align-items: baseline; gap: 16px; }
.reviews-cat h2 { font: 600 clamp(26px, 3vw, 40px)/1.1 var(--serif); color: var(--brown-head); }
.reviews-cat .n { font: 400 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--brown-cap); }
.reviews-grid { max-width: var(--maxw); margin: 0 auto; columns: 3 340px; column-gap: 24px; }
.review-card {
  break-inside: avoid; margin: 0 0 24px; padding: 28px 28px 26px;
  background: rgba(255,255,255,.46); border: 1px solid rgba(120,90,50,.2);
  border-radius: 8px; box-shadow: 0 12px 30px rgba(60,40,20,.07);
}
.review-card .stars { color: var(--gold-deep); letter-spacing: 3px; font-size: 15px; }
.review-card blockquote { font: 400 clamp(17px, 1.5vw, 19px)/1.6 var(--serif); color: var(--brown-head); margin: 13px 0 18px; }
.review-card .who { font: 500 13px/1.45 var(--sans); letter-spacing: .04em; color: var(--brown-head); }
.review-card .src { font: 400 11px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--brown-cap); margin-top: 3px; }
@media (max-width: 760px) { .reviews-sec { padding-left: var(--pad-x); padding-right: var(--pad-x); } .reviews-grid { columns: 1; } }

/* ============ imagery bands ==============================================
   The material system lists brushed chrome alongside the mahogany, leather
   and glass; this is where it earns its place. A photograph is mounted in a
   chrome bezel — a real gradient, not a grey border — and the page uses it at
   three sizes: a wide plate and a tall plate side by side (.band-duo), and a
   small square inset that overlaps the intro photograph (.pod-inset).
   Sources and crops: _src/tools/heroes.mjs. */

.chrome {
  position: relative; padding: 7px; border-radius: 3px;
  background: linear-gradient(158deg,
    #efe9dd 0%, #9d9488 16%, #f5f0e6 34%, #8b8175 52%,
    #e9e2d5 70%, #a69c8f 86%, #d8d1c4 100%);
  box-shadow:
    0 22px 50px rgba(0,0,0,.42),
    0 4px 12px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.55);
}
.chrome img { display: block; width: 100%; height: auto; border-radius: 1px; }
.chrome figcaption {
  position: absolute; left: 0; right: 0; bottom: -30px;
  font: 400 11px/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  color: var(--tan-cap); text-align: center;
}
.leather .chrome figcaption { color: var(--brown-cap); }

/* a small SQUARE plate mounted over the corner of the intro photograph. Square, not round:
   every other frame on the site is square, and the chrome bezel + drop shadow is the point. */
.split-pod .photo { position: relative; }
.pod-inset {
  position: absolute; right: -48px; bottom: -38px; width: 25%; max-width: 220px; z-index: 2;
}
.pod-inset img { aspect-ratio: 1; object-fit: cover; }
.split-pod.photo-right .pod-inset { right: auto; left: -48px; }
@media (max-width: 1100px) { .pod-inset { display: none; } }

/* ============ patient story ==============================================
   Copy LEFT on the leather, patient RIGHT in the photograph — the same split
   the intro pod uses, so it reads as part of the site rather than a new
   device. Nothing is set over a face, everything in the copy column is
   left-aligned, and both halves bleed to their own edge. No border rules:
   the material change between leather and photograph is the separation. */
.story {
  display: grid; grid-template-columns: 1fr 1.08fr;
  min-height: clamp(420px, 34vw, 560px);
  background:
    linear-gradient(180deg, rgba(255,252,245,.5), rgba(246,239,224,.5)),
    url('../assets/leather.webp') top center / 1600px auto no-repeat,
    linear-gradient(180deg, rgba(246,239,224,0) 0, rgba(246,239,224,1) 560px),
    #f6efe0;
}
.story .bg { position: relative; overflow: hidden; }
.story .bg img, .story .bg video {
  /* plates are cut subject-centred by _src/tools/subject.py, so a plain centre crop is right */
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
}
.story-copy {
  /* Right-set against the photograph, so the quote and the patient meet in the middle of the
     band instead of sitting at opposite edges with a field of leather between them. */
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  padding: clamp(48px, 5vw, 84px) clamp(36px, 3.4vw, 64px) clamp(48px, 5vw, 84px) clamp(32px, 4.5vw, 84px);
  text-align: right;
}
.story-copy > * { max-width: 620px; margin-left: auto; margin-right: 0; }
.story-copy .eyebrow { color: var(--gold-deep); }
.story blockquote {
  font: italic 400 clamp(23px, 2vw, 32px)/1.62 var(--serif);
  color: var(--brown-head); margin: 20px 0 0;
}
.story .who {
  margin-top: 26px; font: 400 12px/1.6 var(--sans);
  letter-spacing: .24em; text-transform: uppercase; color: var(--brown-cap);
}
.story .stars { color: var(--gold-deep); letter-spacing: .26em; font-size: 13px; margin-right: 12px; }

@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; }
  .story .bg { order: -1; aspect-ratio: 3 / 2; }
  .story-copy { padding: 44px clamp(24px, 6vw, 48px) 54px; align-items: center; text-align: center; }
  .story-copy > * { margin: 0 auto; }
}

}

}


/* Interior split-pods sit on the content grid, not full-bleed. At 2560px the full-bleed version
   made a 1361x1070 slab of photograph — twice the size of anything else on the page. The homepage
   keeps its full-bleed pods; interior page types are capped to --maxw like every other section. */
.page-procedure .split-pod, .page-case .split-pod, .page-hub .split-pod {
  max-width: var(--maxw); margin: 0 auto; min-height: clamp(440px, 34vw, 620px);
}
.page-procedure .split-pod .panel, .page-case .split-pod .panel { padding: 72px 64px; }
.page-procedure .split-pod.photo-right .panel { padding: 72px 64px; }
@media (max-width: 900px) {
  .page-procedure .split-pod .panel, .page-procedure .split-pod.photo-right .panel,
  .page-case .split-pod .panel { padding: 56px clamp(24px, 6vw, 64px); }
}


/* Interior split-pods: set the copy against the photograph rather than against the outside edge,
   so the words and the picture meet in the middle of the band instead of sitting at opposite
   ends with a field of leather between them. The homepage pods are signed off and untouched. */
body:not(.page-home) .split-pod.photo-right .panel { align-items: flex-end; text-align: right; }
body:not(.page-home) .split-pod.photo-right .panel > * { margin-left: auto; margin-right: 0; }
@media (max-width: 900px) {
  body:not(.page-home) .split-pod.photo-right .panel { align-items: flex-start; text-align: left; }
  body:not(.page-home) .split-pod.photo-right .panel > * { margin-left: 0; }
}

/* Contact: three columns, not one tall stack beside a small form. The details run two-up so the
   column halves in height and everything pulls up; the form takes an equal share of the width. */
.page-contact .contact-grid { grid-template-columns: minmax(0, 1.1fr) minmax(420px, 700px); gap: 56px; }
.page-contact .contact-info {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; align-content: start;
}
.page-contact .contact-block { break-inside: avoid; }
@media (max-width: 1180px) {
  .page-contact .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .page-contact .contact-info { grid-template-columns: 1fr; }
}


/* ============ interior hero on a phone ===================================
   Not an overlay. The loop takes the top two thirds of the screen, the copy
   sits under it on the mahogany, and the headline centres. Overlaying copy on
   a face works at 1600px and does not work at 390px. */
@media (max-width: 760px) {
  /* EVERY hero, homepage included: the loop takes the top, the copy sits under it. A phone is a
     vertical frame — copy set over the picture lands on a face. */
  .hero, .hero.hero-page {
    aspect-ratio: auto; max-height: none; height: auto; min-height: 0;
    flex-direction: column; align-items: stretch;
  }
  .hero .vid-wrap, .hero-page .vid-wrap { position: relative; inset: auto; height: 58vh; min-height: 320px; animation: none; }
  .hero .ovl-x, .hero .ovl-y { display: none; }
  .hero .hero-copy {
    position: relative; justify-content: center; padding: 0; animation: none;
    background:
      linear-gradient(180deg, rgba(30,17,9,.55), rgba(14,8,4,.9)),
      url('../assets/wood.webp') top center / 1600px auto no-repeat,
    linear-gradient(180deg, rgba(19,11,6,0) 0, rgba(19,11,6,1) 980px),
    #130b06;
  }
  .hero .hero-inner { max-width: none; width: 100%; padding: 30px 22px 34px; text-align: center; }
  .hero .hero-cta { justify-content: center; }
  .hero .trust-bar { position: relative; inset: auto; }
  /* the subject is cut at 42% of every hero plate, so the phone crop lands on the person */
  .hero video, .hero .vid-wrap > img { object-position: 42% 32%; }
  /* every hero is cut with the subject left of centre for the desktop copy, so the phone crop
     is pulled left too — `cover` centred on the frame lands on the empty half */

  .hero-page .ovl-x, .hero-page .ovl-y { display: none; }

  .hero-page .hero-copy {
    position: relative; justify-content: center; padding: 0; animation: none;
    background:
      linear-gradient(180deg, rgba(30,17,9,.55), rgba(14,8,4,.9)),
      url('../assets/wood.webp') top center / 1600px auto no-repeat,
    linear-gradient(180deg, rgba(19,11,6,0) 0, rgba(19,11,6,1) 980px),
    #130b06;
  }
  .hero-page .hero-inner {
    max-width: none; width: 100%; padding: 30px 22px 34px; text-align: center;
  }
  .hero-page .hero-inner::before, .hero-page .hero-inner::after { display: none; }
  .hero-page .crumbs { justify-content: center; }
  .hero-page .hero .eyebrow, .hero-page .eyebrow { justify-content: center; }
  .hero-page h1 { font-size: clamp(34px, 9.5vw, 46px); margin: 14px 0 16px; }
  .hero-page .hero-inner p { max-width: none; margin: 0 auto; }
  .hero-page .hero-cta { justify-content: center; }
  /* the trust bar is absolute on desktop; in the stacked phone layout it has to take its own row
     or the CTA buttons sit on top of it */
  .hero-page .trust-bar { position: relative; inset: auto; }
  .hero-page .hero-cta a.secondary { display: inline-block; }
}


/* The middle is the only part of a frame that survives a viewport change, so the subject is set
   toward the copy — the two meet in the centre of the band instead of sitting at opposite edges.
   (BRAIN: brain/standards/development.md 8b.) */
body:not(.page-home) .split-pod.photo-right .photo img { object-position: 22% center; }
body:not(.page-home) .split-pod:not(.photo-right) .photo img { object-position: 78% center; }
@media (max-width: 900px) {
  body:not(.page-home) .split-pod .photo img { object-position: 50% 26%; }
  .story .bg img, .story .bg video { object-position: 50% 26%; }
}

/* ============ mobile pass ================================================
   Swept every page at 375px. Four faults, all site-wide, all fixed here:
     1. 3px of horizontal overflow on every page — the burger's 48px box ran
        past the header's right padding.
     2. The hub heroes pushed their second CTA off the screen.
     3. Type under 11.5px in several places (review sources, footer legal,
        trust bar) — too small to read on a phone.
     4. Links and buttons under 36px tall, which is below a usable tap target.
   Nothing above 760px is touched. */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  .nav-row { padding-right: 14px; }
  .burger { width: 44px; height: 44px; }

  /* both hero CTAs stay, stacked and full width, instead of one running off */
  .hero-page .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
  .hero-page .hero-cta a { display: block; width: 100%; text-align: center; padding: 16px 18px; }
  .hero-page .hero-cta a.secondary { display: block; }

  /* nothing readable on a phone is under 12px */
  .trust-row span { font-size: 12px; letter-spacing: .08em; }
  .review-card .src, .reviews-card .src, .team-role, .story .who, .cs figcaption,
  .cs-case-head, .legal-inner, .legal-inner a, .form-note, .kicker,
  .logo .sub, .foot-brand .sub { font-size: 12px; }
  .draft-flag { font-size: 12px; }

  /* every tap target clears 44px */
  a.tel, .team-mail, .contact-bigphone, .legal-inner a, .foot-cols a, .contact-block a,
  .mm-links a, .related-card .go, .ba-filter, .cs-case-link, .socials a, .crumbs a,
  .routes a, .fin-card a, .np-card a, header a, footer a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
}


/* ============ type size =================================================
   Body copy was set at 15-16px against a 1560px column — too small to read
   comfortably at the distance this site is actually viewed. Everything that
   is prose goes up; small-caps eyebrows and kickers stay where they are,
   because they are labels, not reading. */
.split-pod p, .about-body p, .about-body li, .contact-block p,
.np-body p, .fin-body p, .post p, .post li,
.faq-list p, .related-card p, .proc-card p, .team-card p, .cs-note,
.reviews-card blockquote, .review-card blockquote { font-size: 17.5px; line-height: 1.78; }

.band-duo-head p, .proc-ba-head p, .hero p { font-size: 17.5px; }
.about-side li, .contact-block .hours, .contact-block .hours div { font-size: 16px; }
.team-card .team-role, .reviews-card .src, .review-card .src { font-size: 13px; }

@media (max-width: 760px) {
  .split-pod p, .about-body p, .about-body li, .contact-block p,
  .np-body p, .fin-body p, .post p, .post li, .faq-list p { font-size: 17px; }
}