/* profile.css: the fourteen provider profiles on Brand's system (system.css), beside One Medical's provider pages (Brand,
   16 Oct: a round portrait about 280px wide at 390, the name as the h1, location and education as plain rows, "About" in
   body, one pill), on How it works' first screen: the name at the display size (44 at 390, 86 at 1440, weight 300), one
   quiet eyebrow, one body size, hairline rows for credentials, specialties and the practical details (no boxes, no terra
   icons), the one action as the terra pill. Loaded after the page's own styles, zaha.css and system.css; the words are
   untouched. The portrait is the profile-size cream pass (images/team/<name>-profile.jpg); three are 320px originals and
   are never shown larger than 320 CSS px. */

.z-light body { background: var(--z-bg); }
.z-light .nav-links .nav-cta { background: var(--z-action) !important; color: var(--z-on-action) !important; border-color: var(--z-action); }
.z-light .nav-links .nav-cta:hover { background: var(--z-action-hover) !important; color: var(--z-on-action) !important; }

/* the head: portrait beside the name on a desktop, above it on a phone */
.z-light .hero { padding: calc(env(safe-area-inset-top, 0px) + 136px) var(--z-margin) var(--z-gap-5); }
.z-light .hero-inner { max-width: 1180px; grid-template-columns: 320px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.z-light .hero .avatar { width: 320px; height: 320px; border-radius: 50%; box-shadow: none; background: var(--z-bg-warm); }
.z-light .hero .avatar::after { content: none; }
.z-light .hero .avatar::before { font-weight: 300; color: var(--z-ink-3); }
.z-light .hero .hero-body .kicker { display: block; margin: 0 0 var(--z-gap-3); padding: 0; background: none; font: 600 12px/1.4 var(--z-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--z-ink-3); }
.z-light .hero .hero-body h1 { font: 300 clamp(2.75rem, 1.775rem + 4vw, 5.375rem)/0.98 var(--z-serif); letter-spacing: -0.025em; color: var(--z-ink); margin: 0 0 var(--z-gap-2); text-wrap: balance; }
.z-light .hero .hero-body h1 em { font-style: italic; color: var(--z-ink); }
.z-light .hero .hero-body .role { font: var(--z-t-body); color: var(--z-ink); margin: 0; }
.z-light .hero .hero-body .hero-cred { font: var(--z-t-body); color: var(--z-ink-3); margin: 0; }
.z-light .hero .meta-row { margin-top: var(--z-gap-2); gap: 6px 20px; }
.z-light .hero .meta-item { font: var(--z-t-body); color: var(--z-ink-2); }
.z-light .hero .meta-item .icon { display: none; }
@media (max-width: 720px) {
  .z-light .hero { padding-top: calc(env(safe-area-inset-top, 0px) + 124px); }
  .z-light .hero-inner { grid-template-columns: minmax(0, 1fr); text-align: left; gap: var(--z-gap-3); }
  .z-light .hero .avatar { width: 280px; height: 280px; margin: 0; }
  .z-light .hero .meta-row { justify-content: flex-start; }
}

/* sections: one serif head at one size, a quiet label above it, one body */
.z-light main section { padding: var(--z-gap-5) var(--z-margin); background: var(--z-bg); border: 0; }
.z-light main .container { max-width: 1180px; }
.z-light .container .section-label { font: 600 12px/1.4 var(--z-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--z-ink-3); margin-bottom: var(--z-gap-2); }
.z-light .section-title { font: 300 clamp(28px, 1.2rem + 1.4vw, 36px)/1.1 var(--z-serif); letter-spacing: -0.015em; color: var(--z-ink); margin-bottom: var(--z-gap-3); max-width: 24em; }
.z-light .section-title .dot { color: var(--z-terra); }
.z-light .about { background: var(--z-bg); }
.z-light .about p { font: 400 clamp(17px, 1rem + .2vw, 18px)/1.6 var(--z-sans); color: var(--z-ink-2); max-width: 33em; margin-bottom: 1.1em; }
.z-light .about p strong { color: var(--z-ink); font-weight: 600; }
.z-light .about .about-pull { font: 300 clamp(22px, 1.1rem + 1vw, 30px)/1.3 var(--z-serif); color: var(--z-ink); border-left: 1px solid var(--z-line); padding: 4px 0 4px var(--z-gap-3); margin: var(--z-gap-4) 0 0; max-width: 24em; }

/* credentials and specialties: hairline rows, two columns on a desktop */
.z-light .creds-grid, .z-light .spec-grid { border-top: 1px solid var(--z-hair); gap: 0 var(--z-gap-5); margin-top: 0; }
.z-light .cred, .z-light .spec { padding: var(--z-gap-3) 0; border-bottom: 1px solid var(--z-hair); }
.z-light .cred .cred-icon { display: none; }
.z-light .cred-text { font: var(--z-t-body); color: var(--z-ink-2); }
.z-light .cred-text strong { font: var(--z-t-strong); color: var(--z-ink); margin-bottom: 2px; }
.z-light .specialties { background: var(--z-bg); }
.z-light .spec-name { font: var(--z-t-strong); color: var(--z-ink); margin-bottom: 2px; } /* Figtree 16 at 600, one fact style with the credential rows (Brand, 16 Oct) */
.z-light .spec-desc { font: var(--z-t-body); color: var(--z-ink-2); }

/* the practical details: plain rows, no card */
.z-light .sched-wrap { background: none; border: 0; border-top: 1px solid var(--z-hair); border-radius: 0; padding: 0; box-shadow: none; }
.z-light .sched-meta { gap: 0; flex-direction: column; }
.z-light .sched-meta-item { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--z-gap-2); padding: var(--z-gap-2) 0; border-bottom: 1px solid var(--z-hair); font: var(--z-t-body); color: var(--z-ink-2); }
.z-light .sched-meta-item strong { font: var(--z-t-body); color: var(--z-ink); margin: 0; }
.z-light .sched-wrap .sched-footer { border: 0; padding: var(--z-gap-2) 0 0; margin: 0; font: var(--z-t-small); color: var(--z-ink-3); }
@media (max-width: 720px) { .z-light .sched-meta-item { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* the one action: the dark band keeps its ground; the headline at 300; the bright terra pill */
.z-light .book { background: var(--ground-dark); padding: var(--z-gap-5) var(--z-margin); }
.z-light .book h2 { font: 300 clamp(28px, 1.2rem + 1.4vw, 36px)/1.1 var(--z-serif); letter-spacing: -0.015em; }
.z-light .book h2 .dot { color: #E89571; }
.z-light .book p { font: var(--z-t-body); color: #D4CBC1; }
.z-light .book .btn-white { background: #E89571; color: #1A1A1A; font-weight: 600; min-height: 48px; border-radius: 999px; }
.z-light .book .btn-white:hover { background: #F0A586; color: #1A1A1A; }
.z-light .book h2 + .btn { margin-top: var(--z-gap-2); }

/* the founder, 17 Oct: the profiles take the site's cream panel (zaha.css §7b) behind the portrait and name, and every
   section sits centred on the page: heads, About and the quote centred; the credential and specialty rows a centred block */
.z-light .hero-inner { box-sizing: border-box; width: min(1180px, 100%); grid-template-columns: 320px auto; justify-content: center;
  padding: clamp(32px, 4vw, 64px) clamp(20px, 4vw, 64px); border-radius: 28px; border: 1px solid var(--line);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23C4704B' stroke-opacity='.09' stroke-width='1'%3E%3Cpath d='M44 20 L54 34 L68 44 L54 54 L44 68 L34 54 L20 44 L34 34 Z'/%3E%3Crect x='30' y='30' width='28' height='28' transform='rotate(45 44 44)'/%3E%3Cpath d='M44 0 V20 M44 68 V88 M0 44 H20 M68 44 H88'/%3E%3C/g%3E%3C/svg%3E") center / 132px 132px, radial-gradient(120% 90% at 50% 0%, #FBF3EA 0%, #F2E2D3 55%, #EBD3C0 100%); }
.z-light .hero .avatar { background: var(--z-bg); }
.z-light .hero, .z-light main section.hero { padding-top: clamp(20px, 2vw, 32px); } /* the topbar sits in the flow, so the panel starts under it, as on every other page */
.z-light main .container { max-width: 980px; margin-inline: auto; }
.z-light .about p { max-width: 44em; } /* the founder, 17 Oct: About felt scrunched at 33em */
.z-light .about .about-pull, .z-light .section-title { max-width: 30em; }
.z-light .topbar-inner { max-width: 1180px; } /* the logo and the back link line up with the panel's edges */
.z-light .container .section-label, .z-light .section-title { text-align: center; margin-inline: auto; }
.z-light .about p { text-align: center; margin-inline: auto; }
.z-light .about .about-pull { text-align: center; margin: var(--z-gap-4) auto 0; border-left: 0; padding: var(--z-gap-3) 0 0; position: relative; }
.z-light .about .about-pull::before { content: ""; position: absolute; top: 0; left: 50%; width: 40px; height: 2px; background: var(--z-terra); transform: translateX(-50%); }
@media (max-width: 720px) {
  .z-light .hero-inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .z-light .hero .meta-row { justify-content: center; }
}

/* visitor review, 17 Oct: the role line is gone (the kicker says it), so the credentials and the meta line under the name
   take the body size in the full ink and read at 1440; no heading leaves one word alone; on a phone the gaps between
   sections are about half */
.z-light .hero .hero-body .hero-cred, .z-light .hero .meta-item { font: var(--z-t-body); color: var(--z-ink); }
.z-light .section-title, .z-light .about .section-title { text-wrap: balance; }
@media (max-width: 720px) {
  .z-light main section { padding-top: calc(var(--z-gap-5) / 2); padding-bottom: calc(var(--z-gap-5) / 2); }
  .z-light .hero, .z-light main section.hero { padding-bottom: calc(var(--z-gap-5) / 2); }
  .z-light .book { padding-top: var(--z-gap-5); padding-bottom: var(--z-gap-5); }
}