@charset "utf-8";
/* ==========================================================================
   مركز السلطان الطبي — Al Sultan Medical Center LLC
   main.css — non-critical stylesheet (loaded async; critical CSS is inlined)
   RTL-first, mobile-first. Logical properties used throughout so the layout
   stays correct if an LTR page is ever added.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Self-hosted fonts (no external font request anywhere on the site)
   El Messiri ships one variable file covering 600–700 for the arabic subset.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'El Messiri';font-style:normal;font-weight:600 700;font-display:swap;
  src:url('../fonts/elmessiri-arabic-600-700.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
@font-face{
  font-family:'El Messiri';font-style:normal;font-weight:600 700;font-display:swap;
  src:url('../fonts/elmessiri-latin-600-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/tajawal-arabic-400.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
@font-face{
  font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/tajawal-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/tajawal-arabic-500.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
@font-face{
  font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/tajawal-latin-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/tajawal-arabic-700.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
@font-face{
  font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/tajawal-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Layout primitives
   -------------------------------------------------------------------------- */
.section{padding-block:clamp(44px,8vw,80px)}
.section--tight{padding-block:clamp(32px,6vw,56px)}
.section--cream{background:var(--surface-2)}

.section__head{max-width:62ch;margin-block-end:clamp(24px,4vw,40px)}
.section__head--center{margin-inline:auto;text-align:center}
.eyebrow{
  display:inline-block;font-size:.8125rem;font-weight:700;letter-spacing:.02em;
  color:var(--gold-ink);background:var(--gold-soft);
  padding:.35em 1em;border-radius:999px;margin-block-end:.75rem;
}
.lede{font-size:clamp(1rem,2.4vw,1.125rem);color:var(--text-2);margin-block-start:.75rem}

/* The "direct answer" block that opens every page — the 2–3 sentence factual
   summary that answer engines quote. Styled to read as substance, not a callout. */
.answer{
  border-inline-start:3px solid var(--gold);
  padding-inline-start:clamp(14px,3vw,22px);
  margin-block:clamp(18px,3vw,26px);
  font-size:clamp(1.0625rem,2.6vw,1.1875rem);
  line-height:1.75;color:var(--text-1);max-width:68ch;
}
.answer strong{font-weight:700;color:var(--navy-ink)}

/* --------------------------------------------------------------------------
   3. Breadcrumbs
   -------------------------------------------------------------------------- */
.crumbs{padding-block:14px;font-size:.875rem;color:var(--text-3)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.4em;list-style:none;margin:0;padding:0}
.crumbs li{display:flex;align-items:center;gap:.4em}
.crumbs li+li::before{content:"‹";color:var(--border-strong);font-size:1.1em;line-height:1}
.crumbs a{color:var(--text-3);text-decoration:none;border-block-end:1px solid transparent}
.crumbs a:hover{color:var(--indigo);border-block-end-color:currentColor}
.crumbs [aria-current="page"]{color:var(--text-1);font-weight:500}

/* --------------------------------------------------------------------------
   4. Cards & grids
   -------------------------------------------------------------------------- */
.grid{display:grid;gap:clamp(14px,2.5vw,22px)}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:960px){
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
}

.card{
  display:flex;flex-direction:column;background:var(--surface-1);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;transition:border-color .18s,box-shadow .18s,transform .18s;
}
.card:hover{border-color:var(--indigo-soft);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card__media{position:relative;aspect-ratio:16/10;background:var(--surface-3);overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;display:block}
.card__body{padding:clamp(16px,3vw,22px);display:flex;flex-direction:column;gap:.5rem;flex:1}
.card__title{font-size:1.25rem;margin:0}
.card__title a{color:inherit;text-decoration:none}
.card__title a::after{content:"";position:absolute;inset:0}
.card{position:relative}
.card p{color:var(--text-2);font-size:.9375rem;margin:0}
.card__more{margin-block-start:auto;padding-block-start:.5rem;font-weight:700;font-size:.9375rem;color:var(--gold-ink)}
.badge{
  align-self:flex-start;font-size:.75rem;font-weight:700;
  color:var(--indigo-ink);background:var(--indigo-soft);
  padding:.25em .85em;border-radius:999px;
}

/* Feature list — the "why us" points */
.features{display:grid;gap:clamp(14px,2.5vw,20px);list-style:none;margin:0;padding:0}
@media (min-width:640px){.features{grid-template-columns:repeat(2,1fr)}}
.feature{
  background:var(--surface-1);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:clamp(16px,3vw,22px);
}
.feature h3{font-size:1.0625rem;margin:0 0 .35rem;display:flex;align-items:center;gap:.5rem}
.feature p{margin:0;color:var(--text-2);font-size:.9375rem}
.feature .ico{color:var(--gold);flex:none}

/* --------------------------------------------------------------------------
   5. Team
   -------------------------------------------------------------------------- */
.team-grid{display:grid;gap:clamp(14px,2.5vw,20px);grid-template-columns:repeat(2,1fr)}
@media (min-width:768px){.team-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.team-grid{grid-template-columns:repeat(4,1fr)}}
/* Full-bleed portrait card. The studio shots are 4:5 head-and-torso frames, so
   a portrait crop shows them properly where a small circle would cut the
   subject in half. */
.doctor{
  background:var(--surface-1);border:1px solid var(--border);
  border-radius:var(--radius-md);overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .18s,box-shadow .18s;
}
.doctor:hover{border-color:var(--indigo-soft);box-shadow:var(--shadow-md)}
.doctor__photo{
  inline-size:100%;aspect-ratio:4/5;display:block;
  object-fit:cover;object-position:50% 18%;
  background:var(--surface-3);
}
.doctor__body{padding:clamp(12px,2.2vw,16px);text-align:center}
.doctor__name{font-size:1.0625rem;margin:0 0 .2rem}
.doctor__role{font-size:.875rem;color:var(--text-2);margin:0;line-height:1.55}
.doctor__role-en{font-size:.8125rem;color:var(--text-3);margin:.2rem 0 0;direction:ltr;unicode-bidi:isolate}
/* Verified board certification — set apart from the job title so it reads as a
   credential rather than more of the same description. */
.doctor__cred{
  font-size:.75rem;line-height:1.6;color:var(--gold-ink);
  margin:.6rem 0 0;padding-block-start:.6rem;
  border-block-start:1px solid var(--border);
}

/* --------------------------------------------------------------------------
   6. FAQ — plain visible headings + paragraphs.
   Deliberately NOT an accordion: every answer must sit in the raw HTML and be
   readable without JS so search and answer engines can extract it.
   -------------------------------------------------------------------------- */
.faq{display:grid;gap:clamp(18px,3vw,26px);max-width:72ch}
.faq__item{border-block-end:1px solid var(--border);padding-block-end:clamp(16px,2.5vw,22px)}
.faq__item:last-child{border-block-end:0;padding-block-end:0}
.faq__q{font-size:clamp(1.0625rem,2.6vw,1.1875rem);margin:0 0 .5rem;color:var(--navy-ink)}
.faq__a{margin:0;color:var(--text-2);line-height:1.8}

/* --------------------------------------------------------------------------
   7. Forms — booking (name + phone only)
   -------------------------------------------------------------------------- */
.form-card{
  background:var(--surface-1);border:1px solid var(--border);
  border-block-start:4px solid var(--gold);
  border-radius:var(--radius-lg);padding:clamp(20px,4vw,32px);
  box-shadow:var(--shadow-lg);max-width:560px;
}
.field{margin-block-end:1rem}
.field label{display:block;font-weight:500;font-size:.9375rem;margin-block-end:.4rem;color:var(--text-1)}
.field .req{color:var(--danger);margin-inline-start:.15em}
.field input{
  inline-size:100%;min-block-size:52px;padding:0 1rem;
  font-family:inherit;font-size:1rem;color:var(--text-1);
  background:var(--surface-input);border:1.5px solid var(--border-strong);
  border-radius:var(--radius-sm);transition:border-color .15s,box-shadow .15s;
}
.field input::placeholder{color:var(--text-3);opacity:1}
.field input:focus{outline:0;border-color:var(--indigo);box-shadow:0 0 0 3px var(--indigo-ring)}
.field input[aria-invalid="true"]{border-color:var(--danger)}
.field input[type="tel"]{direction:ltr;text-align:start}
.field__error{display:none;color:var(--danger);font-size:.8125rem;margin-block-start:.35rem}
.field input[aria-invalid="true"]~.field__error{display:block}
.form-note{font-size:.8125rem;color:var(--text-3);margin-block-start:.85rem;line-height:1.7}
.form-status{margin-block-start:1rem;padding:0;border-radius:var(--radius-sm);font-size:.9375rem;font-weight:500}
.form-status[data-state]{padding:.9rem 1rem}
.form-status[data-state="ok"]{background:var(--ok-soft);color:var(--ok-ink)}
.form-status[data-state="err"]{background:var(--danger-soft);color:var(--danger-ink)}
.form-status[data-state="pending"]{background:var(--indigo-soft);color:var(--indigo-ink)}
.hp{position:absolute!important;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --------------------------------------------------------------------------
   8. Info blocks — NAP, hours
   -------------------------------------------------------------------------- */
.info-list{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.info-list dt,.info-item__label{font-weight:700;font-size:.8125rem;color:var(--text-3);letter-spacing:.02em;margin-block-end:.2rem}
.info-item__value{font-size:1rem;color:var(--text-1);line-height:1.7}
.info-item__value a{color:var(--text-1);text-decoration:none;border-block-end:1px solid var(--border-strong)}
.info-item__value a:hover{color:var(--indigo);border-block-end-color:currentColor}
.tel{direction:ltr;unicode-bidi:isolate;display:inline-block;font-variant-numeric:tabular-nums}

.hours{width:100%;border-collapse:collapse;font-size:.9375rem}
.hours th,.hours td{padding:.6rem .25rem;text-align:start;border-block-end:1px solid var(--border)}
.hours th{font-weight:500;color:var(--text-2)}
.hours td{font-weight:700;color:var(--text-1);direction:ltr;unicode-bidi:isolate;text-align:end}
.hours tr:last-child th,.hours tr:last-child td{border-block-end:0}

/* --------------------------------------------------------------------------
   9. Prose (privacy / terms / about body copy)
   -------------------------------------------------------------------------- */
.prose{max-width:72ch}
.prose h2{margin-block:clamp(28px,4vw,40px) .6rem;font-size:clamp(1.25rem,3.2vw,1.5rem)}
.prose h3{margin-block:1.6rem .5rem;font-size:1.0625rem}
.prose p,.prose li{color:var(--text-2);line-height:1.85}
.prose p{margin-block:0 1rem}
.prose ul,.prose ol{margin-block:0 1rem;padding-inline-start:1.3em}
.prose li{margin-block-end:.5rem}
.prose a{color:var(--indigo-ink);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--text-1)}

/* Medical disclaimer — required on every page carrying clinical wording */
.disclaimer{
  font-size:.8125rem;line-height:1.75;color:var(--text-3);
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:clamp(14px,2.5vw,18px);
}

/* --------------------------------------------------------------------------
   10. TO FILL markers — visible ONLY while ?draft=1 is on the URL, so the
   scaffolding is obvious during content work but invisible to visitors and
   to crawlers on the live URL.
   -------------------------------------------------------------------------- */
.tofill{display:none}
:root[data-draft="1"] .tofill{
  display:block;margin-block:1rem;padding:.85rem 1rem;
  border:1px dashed #C9922E;border-radius:8px;
  background:rgba(201,146,46,.08);color:#8A6417;
  font-size:.875rem;font-weight:500;line-height:1.7;
}
:root[data-draft="1"] .tofill::before{content:"TO FILL — ";font-weight:700}

/* --------------------------------------------------------------------------
   11. Map
   -------------------------------------------------------------------------- */
.map-frame{
  position:relative;aspect-ratio:16/10;border-radius:var(--radius-lg);
  overflow:hidden;border:1px solid var(--border);background:var(--surface-3);
}
.map-frame iframe{position:absolute;inset:0;inline-size:100%;block-size:100%;border:0}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.site-footer{background:var(--navy);color:#D7DEEE;padding-block:clamp(36px,6vw,56px) 0;margin-block-start:clamp(48px,8vw,80px)}
.site-footer a{color:#D7DEEE;text-decoration:none}
.site-footer a:hover{color:var(--gold-light)}
.footer-grid{display:grid;gap:clamp(24px,4vw,36px);grid-template-columns:1fr}
@media (min-width:720px){.footer-grid{grid-template-columns:1.4fr 1fr 1.2fr}}
.footer-brand{display:flex;align-items:center;gap:.7rem;margin-block-end:.9rem}
.footer-brand img{inline-size:46px;block-size:46px;border-radius:50%;flex:none}
.footer-brand b{font-family:var(--font-head);font-size:1.0625rem;color:#fff;display:block;line-height:1.3}
.footer-brand span{font-size:.75rem;color:#9FAECB;display:block;direction:ltr;unicode-bidi:isolate}
.site-footer h2{font-size:.9375rem;color:#fff;margin:0 0 .85rem;font-family:var(--font-body);font-weight:700;letter-spacing:.02em}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.9375rem}
.site-footer address{font-style:normal;font-size:.9375rem;line-height:1.85;color:#C3CDE3}
/* The hours table inherits --text-1/--text-2, which are dark. The footer is
   always navy regardless of theme, so those tokens must be overridden here or
   the opening times render near-invisible (1.05:1) on the navy panel. */
.site-footer .hours th{color:#AEBAD3;font-weight:500}
.site-footer .hours td{color:#FFFFFF;font-weight:700}
.site-footer .hours th,.site-footer .hours td{border-block-end-color:rgba(255,255,255,.12)}
.social{display:flex;flex-wrap:wrap;gap:.6rem;margin-block-start:1.1rem;list-style:none;padding:0}
.social a{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .9rem;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  font-size:.875rem;font-weight:500;color:#E6EAF5;
  transition:background .15s,border-color .15s;
}
.social a:hover{background:rgba(255,255,255,.14);border-color:var(--gold);color:#fff}
.social svg{inline-size:18px;block-size:18px;fill:currentColor;flex:none}
.footer-bottom{
  margin-block-start:clamp(28px,5vw,44px);padding-block:1.1rem;
  border-block-start:1px solid rgba(255,255,255,.12);
  font-size:.8125rem;color:#9FAECB;
  display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center;justify-content:space-between;
}
.footer-bottom nav{display:flex;gap:1.2rem;flex-wrap:wrap}
.footer-disclaimer{
  font-size:.75rem;line-height:1.8;color:#8E9CB8;
  margin-block-start:1.2rem;padding-block-start:1.2rem;
  border-block-start:1px solid rgba(255,255,255,.1);
}

/* --------------------------------------------------------------------------
   13. Floating actions (WhatsApp + mobile call bar)
   -------------------------------------------------------------------------- */
.fab{
  position:fixed;inset-block-end:calc(16px + var(--bar-h,0px));inset-inline-start:16px;z-index:60;
  inline-size:56px;block-size:56px;border-radius:50%;
  display:grid;place-items:center;background:#0C7A42;color:#fff;
  box-shadow:0 10px 26px -8px rgba(12,122,66,.7);
  transition:transform .18s;
}
.fab:hover{transform:scale(1.06)}
.fab svg{inline-size:28px;block-size:28px;fill:currentColor}

.callbar{
  position:fixed;inset-inline:0;inset-block-end:0;z-index:55;
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--border);border-block-start:1px solid var(--border);
  padding-block-end:env(safe-area-inset-bottom);
}
.callbar a{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  min-block-size:54px;background:var(--surface-1);color:var(--navy-ink);
  font-weight:700;font-size:.9375rem;text-decoration:none;
}
.callbar a.is-primary{background:var(--navy);color:#fff}
@media (min-width:860px){.callbar{display:none}}

/* --------------------------------------------------------------------------
   13b. Cookie consent
   Fixed-position so it never contributes layout shift. Hidden by default and
   revealed by JS only when no choice is stored, which also means a visitor who
   already chose never sees it again.
   -------------------------------------------------------------------------- */
.consent{
  display:none;
  position:fixed;inset-inline:0;inset-block-end:0;z-index:100;
  padding:12px 12px calc(12px + env(safe-area-inset-bottom));
}
.consent.is-open{display:block}
.consent__panel{
  max-inline-size:var(--wrap);margin-inline:auto;
  background:var(--surface-1);color:var(--text-1);
  border:1px solid var(--border);border-block-start:3px solid var(--gold);
  border-radius:var(--radius-lg);
  box-shadow:0 -10px 50px -16px rgba(22,35,61,.45),var(--shadow-lg);
  padding:clamp(16px,3vw,24px);
  display:grid;gap:clamp(14px,2.5vw,22px);
}
@media (min-width:900px){
  .consent__panel{grid-template-columns:1fr auto;align-items:center}
  .consent.is-expanded .consent__panel{grid-template-columns:1fr}
}
.consent__title{font-size:1.125rem;margin:0 0 .35rem}
.consent__desc{margin:0;font-size:.9375rem;color:var(--text-2);line-height:1.75;max-inline-size:68ch}
.consent__actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.consent__actions .btn{flex:1 1 auto;min-inline-size:140px}
@media (min-width:900px){.consent__actions .btn{flex:0 0 auto}}
.consent__toggle{flex:0 0 auto}
.consent__options{display:grid;gap:.85rem;margin-block-start:1.1rem;padding-block-start:1.1rem;border-block-start:1px solid var(--border)}
.consent__opt{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer;font-size:.875rem;line-height:1.65}
.consent__opt input{inline-size:20px;block-size:20px;flex:none;margin-block-start:.15rem;accent-color:var(--indigo);cursor:pointer}
.consent__opt input:disabled{cursor:not-allowed;opacity:.65}
.consent__opt b{display:block;color:var(--text-1);font-size:.9375rem;margin-block-end:.1rem}
.consent__opt span{color:var(--text-2)}

/* A button that reads as a link — used for "manage cookies" in the footer and
   the "customize" toggle, so neither needs to be a fake <a href="#">. */
.linklike{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;
}
.site-footer .linklike{color:#D7DEEE;font-size:.8125rem}
.site-footer .linklike:hover{color:var(--gold-light)}
.consent__toggle{color:var(--indigo-ink);font-weight:500;font-size:.9375rem}

/* While the banner is open, get the floating controls out of its way.
   Keyed off the root element because the banner sits AFTER .fab/.callbar in the
   DOM, so a sibling combinator would never match them. */
:root[data-consent-open] .fab{display:none}
:root[data-consent-open] .callbar{display:none}

/* --------------------------------------------------------------------------
   14. Utilities
   -------------------------------------------------------------------------- */
.text-center{text-align:center}
.mt-0{margin-block-start:0}
.stack>*+*{margin-block-start:1rem}
.split{display:grid;gap:clamp(24px,5vw,48px);align-items:start}
@media (min-width:880px){.split{grid-template-columns:1fr 1fr}.split--wide{grid-template-columns:1.25fr 1fr}}
.rounded-media{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);background:var(--surface-3)}
.rounded-media img{display:block;inline-size:100%;block-size:auto}

/* Vertical (9:16) clip. Capped so a portrait video can't dominate a desktop
   row, and centred so the letterboxing reads as deliberate. */
.video-wrap{
  max-inline-size:360px;margin-inline:auto;
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--border);background:#0D1626;
}
.video-wrap video{display:block;inline-size:100%;block-size:auto;aspect-ratio:9/16;object-fit:cover}
.video-note{
  font-size:.8125rem;color:var(--text-3);text-align:center;
  margin-block-start:.6rem;max-inline-size:360px;margin-inline:auto;line-height:1.7;
}
.video-grid{display:grid;gap:clamp(20px,4vw,32px);justify-items:center}
@media (min-width:760px){.video-grid--2{grid-template-columns:repeat(2,1fr)}}

/* YouTube facade: a self-hosted poster plus a play button. No request reaches
   Google — and no YouTube cookie is set — until the visitor presses play. The
   real embed replaces this on click. Saves ~500KB of player JS per video. */
.ytfacade{position:relative;display:block;inline-size:100%;aspect-ratio:9/16;border:0;padding:0;margin:0;background:#0D1626;cursor:pointer;overflow:hidden}
.ytfacade img{inline-size:100%;block-size:100%;object-fit:cover;display:block;transition:transform .3s,filter .3s}
.ytfacade:hover img{transform:scale(1.03);filter:brightness(1.06)}
.ytfacade__play{
  position:absolute;inset-block-start:50%;inset-inline-start:50%;
  transform:translate(50%,-50%);
  inline-size:64px;block-size:64px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(22,35,61,.82);border:2px solid rgba(255,255,255,.9);
  box-shadow:0 8px 28px -8px rgba(0,0,0,.8);
  transition:background .2s,transform .2s;
}
.ytfacade:hover .ytfacade__play{background:#B98A2E;transform:translate(50%,-50%) scale(1.07)}
.ytfacade__play svg{inline-size:26px;block-size:26px;fill:#fff;margin-inline-start:3px}
.ytfacade:focus-visible{outline:3px solid var(--indigo);outline-offset:3px}
.video-wrap iframe{display:block;inline-size:100%;aspect-ratio:9/16;border:0}

/* An image slot that has no photo yet. Renders as a labelled placeholder so a
   missing asset is impossible to miss, and never ships a fake image. */
.slot{
  display:grid;place-items:center;text-align:center;gap:.4rem;
  aspect-ratio:3/2;padding:1.25rem;
  border:2px dashed var(--border-strong);border-radius:var(--radius-lg);
  background:var(--surface-2);color:var(--text-3);
}
.slot b{display:block;font-size:.8125rem;font-weight:700;color:var(--gold-ink);letter-spacing:.02em}
.slot span{font-size:.8125rem;line-height:1.6;max-width:32ch}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

@media print{
  .site-header,.fab,.callbar,.site-footer,.crumbs{display:none!important}
  body{background:#fff;color:#000}
}