/* ==========================================================================
   Lakewood Oral & Maxillofacial Surgery — website
   Shared stylesheet for index.html and procedures.html.

   Palette sampled from the LOMS logo: olive #7E793F, wordmark grey #4D4D4D.
   ========================================================================== */
:root{
  --olive:#7E793F; --olive-lt:#A39D5E; --olive-dk:#635F31; --olive-pale:#EFEDE2;
  --ink:#26261F; --gray:#4D4D4D; --muted:#6E6C63;
  --accent-dk:#D8D3A8; --cream:#F7F6F1; --cream2:#EFEEE7; --line:#E2E0D5; --white:#fff;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost","Segoe UI",system-ui,-apple-system,sans-serif;
  --wrap:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.75;
  color:var(--gray);background:var(--cream);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;color:var(--ink);line-height:1.12;letter-spacing:.2px}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}

.eyebrow{font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--olive);
  font-weight:400;margin-bottom:20px}
.eyebrow--center{display:inline-block}
.eyebrow--rule::before{content:"";display:inline-block;width:32px;height:1px;background:var(--olive);
  vertical-align:middle;margin-right:14px;margin-bottom:4px}

.btn{display:inline-block;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  padding:17px 36px;border:1px solid var(--olive);transition:.35s ease;cursor:pointer;font-weight:400;
  white-space:nowrap}
.btn--solid{background:var(--olive);color:#fff}
.btn--solid:hover{background:transparent;color:var(--olive)}
.btn--ghost{background:transparent;color:var(--ink);border-color:#C9C6B4}
.btn--ghost:hover{border-color:var(--olive);color:var(--olive)}
.btn--light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn--light:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ---------- placeholder blocks -------------------------------------------
   Real photography does not exist yet — the office opens later and the
   renderings are still with Susan Strauss. These stand in AND double as an
   asset checklist: every hatched panel is a file somebody still owes us. */
.ph{position:relative;background:
     repeating-linear-gradient(135deg,var(--olive-pale) 0 14px,#E7E4D6 14px 28px);
  display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.ph::after{content:attr(data-label);font-family:var(--sans);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--olive-dk);padding:12px 20px;background:rgba(255,255,255,.86);
  border:1px solid rgba(126,121,63,.3);max-width:82%;line-height:1.7}

/* ---------- header -------------------------------------------------------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;padding:20px 46px;gap:40px;transition:.4s ease}
.hdr__logo{flex-shrink:0}
.hdr__logo img{height:56px;width:auto;transition:.4s ease;display:block}
/* Two real files rather than a CSS filter. The supplied logo is a JPG on solid
   white, so brightness(0)+invert(1) would flood the whole rectangle white. */
/* The hero carries a large centred logo, so at the top of the homepage the
   header mark would be a second copy of the same thing. Hide it there and let
   it fade in once the hero has scrolled away. visibility (not display) keeps
   the flex row from reflowing and takes the link out of the tab order while
   it is invisible. */
.hdr__logo{transition:opacity .45s ease,visibility .45s ease}
.hdr--over:not(.scrolled) .hdr__logo{opacity:0;visibility:hidden}
.hdr nav{display:flex;gap:36px;align-items:center}
.hdr nav a{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;position:relative;padding-bottom:4px;white-space:nowrap}
.hdr nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--olive);transition:.3s}
.hdr nav a:hover::after{width:100%}
.hdr__cta{display:flex;align-items:center;gap:24px}
.hdr__phone{font-size:13px;letter-spacing:.06em;white-space:nowrap;flex-shrink:0}
/* the number reads as one line with the town beside it, not as a separate
   display element */
.hdr__phone b{font:inherit;color:inherit}
/* over a dark video hero the bar starts transparent and light */
.hdr--over{color:#fff}
.hdr.scrolled{background:rgba(247,246,241,.97);box-shadow:0 1px 0 var(--line);padding:12px 46px;
  backdrop-filter:blur(8px);color:var(--ink)}
.hdr.scrolled .hdr__logo img{height:46px}
.hdr.scrolled .btn--light{color:var(--ink);border-color:#C9C6B4}
/* The bar steps down as the screen narrows: space gives way first, then
   size, and the phone number never goes -- for this practice it is the most
   useful thing in the bar. Breakpoints are measured on the homepage, whose
   larger logo makes it the tightest page, plus ~20px because a media query
   counts the scrollbar and the bar does not. */
@media(max-width:1609px){
  /* the town goes, the number stays */
  .hdr__phone{font-size:0}
  .hdr__phone a{font-size:13px}
}
@media(max-width:1499px){
  .hdr,.hdr.scrolled{padding-left:28px;padding-right:28px}
  .hdr nav{gap:24px}
  .hdr__cta{gap:14px}
  .hdr__cta .btn{padding:15px 22px;letter-spacing:.18em}
}
@media(max-width:1329px){
  .hdr{gap:32px}
  .hdr__logo img{height:46px}
  .hdr nav{gap:22px}
  .hdr nav a{font-size:12px;letter-spacing:.12em}
  .hdr__cta .btn{font-size:10.5px;letter-spacing:.14em;padding:13px 18px}
}
@media(max-width:1199px){
  /* the nav moves into the burger rather than the number leaving */
  .hdr nav{display:none}
  .hdr{padding:14px 20px;gap:14px}
  .hdr.scrolled{padding:10px 20px}
  .hdr__cta{gap:14px}
  .hdr__logo img{height:44px}
  .hdr.scrolled .hdr__logo img{height:38px}
  .hdr__cta .btn{padding:12px 16px;font-size:10px;letter-spacing:.12em}
}
@media(max-width:760px){
  /* Refer a Patient is in the menu, one tap away; the number is not */
  .hdr__refer{display:none}
}
@media(max-width:600px){
  /* Logo + number + button + burger will not share one 375px line, so the
     number takes a slim row of its own across the top of the bar, and the
     town comes back with it. The cta wrapper dissolves so its children can
     be ordered inside the bar. */
  .hdr,.hdr.scrolled{flex-wrap:wrap;padding:0 12px 8px;column-gap:6px;row-gap:8px}
  .hdr__cta{display:contents}
  .hdr__phone{order:-1;flex:0 0 calc(100% + 24px);margin:0 -12px;padding:7px 12px;
    text-align:center;font-size:12px;letter-spacing:.08em;
    border-bottom:1px solid rgba(128,124,110,.28)}
  .hdr__phone a{font-size:12px}
  .hdr__logo img{height:34px}
  .hdr.scrolled .hdr__logo img{height:32px}
  .hdr__cta .btn{padding:9px 10px;font-size:8.6px;letter-spacing:.08em}
  .hdr__cta .btn:not(.hdr__refer){margin-left:auto}
  .hdr__burger{width:34px;height:34px}
}

/* ---------- mobile menu --------------------------------------------------- */
.hdr__burger{display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;width:40px;height:40px;padding:0;border:0;background:none;color:inherit;
  cursor:pointer;flex-shrink:0}
.hdr__burger span{display:block;width:22px;height:1.5px;background:currentColor;
  transition:transform .3s ease,opacity .2s ease}
.hdr__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hdr__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hdr__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(max-width:1199px){.hdr__burger{display:flex}}

/* The panel sits under the bar (z-index 60) so the burger stays hittable, and
   its own top padding clears it. */
.mnav{position:fixed;inset:0;z-index:55;background:var(--cream);color:var(--ink);
  padding:92px 24px 48px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s}
.mnav.open{opacity:1;visibility:visible}
.mnav__inner{display:flex;flex-direction:column}
.mnav a{display:block;padding:15px 0;font-family:var(--serif);font-size:23px;
  line-height:1.2;color:var(--ink);border-bottom:1px solid var(--line)}
.mnav__label{font-family:var(--sans)!important;font-size:11.5px!important;
  letter-spacing:.24em;text-transform:uppercase;color:var(--olive);
  padding:18px 0 8px!important;border-bottom:0!important}
.mnav__group a:not(.mnav__label){padding-left:18px;font-size:19px}
.mnav__refer{margin-top:24px}
.mnav__tel{font-weight:600;font-size:27px;border-bottom:0!important}
/* over the video hero the bar is transparent: give it a surface while the
   panel is open, or the links behind it show through the logo */
body.menu-open{overflow:hidden}
body.menu-open .hdr{background:rgba(247,246,241,.97);color:var(--ink)}
body.menu-open .hdr--over:not(.scrolled) .hdr__logo{opacity:1;visibility:visible}
/* the light button is white-on-transparent over the hero; on the panel's
   cream it would vanish */
body.menu-open .hdr .btn--light{color:var(--ink);border-color:#C9C6B4}
@media(min-width:1200px){.mnav{display:none}}

/* ---------- hero A · video ------------------------------------------------ */
.hero-v{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.hero-v__media{position:absolute;inset:0;z-index:0}
.hero-v__media video{width:100%;height:100%;object-fit:cover}
.hero-v__media img{width:100%;height:100%;object-fit:cover}
.hero-v__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,20,16,.60) 0%,rgba(20,20,16,.68) 45%,rgba(20,20,16,.74) 100%)}
.hero-v__inner{position:relative;z-index:2;color:#fff;padding:150px 0 110px;text-align:center}
/* The monogram is an image; the practice name beneath it is real text, so its
   size, tracking and the rule under it are all adjustable from here without
   touching the artwork. */
.hero-v__lockup{display:inline-block;margin:0 auto clamp(48px,5.6vw,74px)}
.hero-v__mark{display:block;width:clamp(200px,34vw,440px);aspect-ratio:700/318;
  margin:0 auto 26px;
  background:url("loms-mark-gold.png") center/contain no-repeat}

.hero-v__wordmark{font-family:var(--serif);color:var(--accent-dk);margin:0;
  font-size:clamp(12px,1.25vw,17px);letter-spacing:.2em;text-transform:uppercase;
  padding-bottom:12px;border-bottom:1px solid rgba(216,211,168,.5)}
.hero-v h1{color:#fff;font-size:clamp(38px,5vw,68px);max-width:22ch;margin:0 auto;text-wrap:balance}


/* ---------- section shell -------------------------------------------------- */
section{padding:120px 0}
.sec-head{max-width:700px}
.sec-head--center{margin:0 auto;text-align:center}
.sec-head h2{font-size:clamp(34px,3.6vw,50px);margin-bottom:18px}
.sec-head p{color:var(--muted)}

/* ---------- intro ---------------------------------------------------------- */
.intro{background:var(--white)}
.intro__grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.intro__media{position:relative}
.intro__media img{width:100%;height:540px;object-fit:cover}
.intro__media .frame{position:absolute;inset:18px;border:1px solid var(--olive);pointer-events:none}
.intro h2{font-size:clamp(32px,3.4vw,46px);margin-bottom:24px}
.intro p{margin-bottom:20px;color:var(--muted)}
@media(max-width:940px){.intro__grid{grid-template-columns:1fr;gap:40px}}

/* ---------- procedures ------------------------------------------------------ */
.procs{background:var(--white)}
.proc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:64px}
/* Section and tiles are both white, so the hover lifts to the cream instead of
   away from it — otherwise hovering a white tile on a white ground does nothing. */
.proc{background:var(--white);padding:46px 40px;transition:.4s ease}
.proc:hover{background:var(--cream)}
.proc h3{font-size:26px;margin:14px 0 12px}
.proc p{font-size:15px;line-height:1.7;color:var(--muted)}
.procs__more{text-align:center;margin-top:48px}
@media(max-width:940px){.proc-grid{grid-template-columns:1fr}
  .intro__media img{height:380px}}

/* ---------- header: Our Surgeons dropdown --------------------------------- */
/* flex kills the line-box strut a block div adds under the label, which
   otherwise sits the toggle a few px lower than its sibling links */
.nav-drop{position:relative;display:flex}
.nav-drop__toggle{display:inline-flex;align-items:center;gap:6px}
.nav-drop__toggle svg{width:12px;height:12px;transition:transform .3s ease}
.nav-drop:hover .nav-drop__toggle svg,.nav-drop:focus-within .nav-drop__toggle svg{transform:rotate(180deg)}
/* the list hangs below the label behind a transparent 14px pad, so the pointer
   can travel from the label into the list without the hover dropping */
.nav-drop__menu{position:absolute;top:100%;left:-22px;min-width:250px;padding:14px 0 8px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s}
.nav-drop:hover .nav-drop__menu,.nav-drop:focus-within .nav-drop__menu{opacity:1;visibility:visible;transform:none}
.nav-drop__menu::before{content:"";position:absolute;inset:14px 0 0;background:var(--cream);
  border:1px solid var(--line);box-shadow:0 12px 32px rgba(38,38,31,.12)}
.hdr nav .nav-drop__menu a{display:block;padding:11px 22px;font-size:12px;letter-spacing:.14em;color:var(--ink)}
.hdr nav .nav-drop__menu a:first-child{margin-top:8px}
.hdr nav .nav-drop__menu a::after{display:none}
.hdr nav .nav-drop__menu a:hover,.hdr nav .nav-drop__menu a[aria-current="page"]{color:var(--olive)}

/* ---------- surgeons: board-certification line ---------------------------- */
.diplomates{display:flex;align-items:center;gap:clamp(16px,2vw,28px);margin-top:26px}
.diplomates__rule{flex:1 1 40px;height:1px;background:var(--olive);opacity:.55}
.diplomates__seal{width:clamp(72px,6.4vw,96px);height:auto;flex-shrink:0}
.diplomates__text{font-size:clamp(11px,1.05vw,15px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--olive);text-align:center}
.diplomates + .team-grid{margin-top:30px}
@media(max-width:760px){
  .diplomates{flex-wrap:wrap;justify-content:center;row-gap:14px}
  .diplomates__rule{display:none}
  .diplomates__text{flex-basis:100%;line-height:1.7}
}

/* ---------- team ------------------------------------------------------------ */
.team{background:var(--white)}
.team--alt{background:var(--cream)}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:60px}

.doc__photo{position:relative;margin-bottom:22px;aspect-ratio:1/1;overflow:hidden;background:var(--olive-pale)}
/* The supplied headshots are landscape originals shot against the same wall,
   each subject sitting right of centre. A square crop biased to 82% puts every
   face in the middle of the card. Re-check this if new photos are supplied. */
.doc__photo img{width:100%;height:100%;object-fit:cover;object-position:82% center}
.doc h3{font-size:23px;margin-bottom:5px}
.doc .role{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--olive);margin-bottom:14px}
.doc p{font-size:14px;line-height:1.7;color:var(--muted)}
/* link from a surgeon card to that surgeon's profile page */
.doc__more{display:inline-flex;align-items:center;gap:10px;margin-top:18px;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--olive);transition:color .3s ease}
.doc__more svg{width:14px;height:14px;transition:transform .3s ease}
.doc__more:hover{color:var(--olive-dk)}
.doc__more:hover svg{transform:translateX(4px)}
.staff-grid{display:flex;flex-wrap:wrap;gap:38px;justify-content:center;margin-top:46px}
.staff{width:196px;text-align:center}
.staff__photo{position:relative;aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  background:var(--olive-pale);margin-bottom:18px}
.staff__photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.staff__photo .ph{position:absolute;inset:0}
.staff__photo .ph::after{font-size:9.5px;letter-spacing:.14em;padding:8px 10px;max-width:88%}
.staff h3{font-size:19px;margin-bottom:4px}
.staff .role{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--olive)}

.team__note{margin-top:52px;padding:24px 30px;background:var(--olive-pale);border-left:2px solid var(--olive);
  font-size:14px;color:var(--olive-dk)}
@media(max-width:1080px){.team-grid{grid-template-columns:1fr 1fr;gap:38px}}
@media(max-width:600px){.team-grid{grid-template-columns:1fr}}

/* ---------- the LOMS experience ------------------------------------------
   Two-column editorial: heading block left (38%), the four points 2x2 right
   (58%). Type scaled up so the section carries comparable weight to the dark
   Clinical Excellence block above, while staying shorter and lighter.
   Hairline above each point for organisation. No cards, no boxes, no motion. */
.why{background:var(--cream2);padding:76px 0}
.why__grid{display:grid;grid-template-columns:38% 1fr;column-gap:4%;align-items:start}

/* Two sentences, each too long for one line at this size in a 38% column.
   text-wrap:balance evens the lines instead of stranding "care." as a widow. */
.why__lead h2{font-size:clamp(34px,3.6vw,48px);line-height:1.14;margin:0;max-width:24ch;
  text-wrap:balance}
.why__intro{color:var(--muted);font-size:18px;line-height:1.75;margin-top:36px;max-width:34ch}

.why__points{display:grid;grid-template-columns:1fr 1fr;gap:26px 44px}
.why-item{padding-top:18px;border-top:1px solid var(--line)}
.why-item h3{font-size:clamp(25px,2.2vw,30px);line-height:1.18;margin:0 0 10px;color:var(--ink)}
.why-item p{font-size:16.5px;line-height:1.72;color:var(--muted);margin:0}

@media(max-width:980px){
  .why{padding:76px 0}
  .why__grid{grid-template-columns:1fr;column-gap:0;row-gap:48px}
  .why__lead h2{max-width:18ch}
  .why__intro{max-width:56ch}
}
@media(max-width:620px){.why__points{grid-template-columns:1fr;gap:40px}}

/* ---------- referring doctors ------------------------------------------------ */
.refer{background:var(--cream2)}
.refer__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.refer h2{font-size:clamp(32px,3.4vw,46px);margin-bottom:20px}
.refer p{color:var(--muted);margin-bottom:18px}
.refer__pill{display:inline-block;margin-top:10px;padding:9px 18px;border:1px solid var(--olive);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--olive-dk);background:var(--white)}
.form{background:var(--white);border:1px solid var(--line);padding:44px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{margin-bottom:22px}
.field label{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--olive-dk);margin-bottom:9px}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:15px;font-weight:300;
  color:var(--ink);background:var(--cream);border:1px solid var(--line);padding:14px 16px;transition:.25s}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--olive);outline-offset:2px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--olive);background:#fff}
.field textarea{min-height:110px;resize:vertical}
.form__foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:8px;flex-wrap:wrap}
.form__foot small{font-size:12.5px;color:var(--muted);max-width:34ch;line-height:1.6}
@media(max-width:940px){.refer__grid{grid-template-columns:1fr;gap:40px}.form__row{grid-template-columns:1fr}
  .form{padding:30px}}

/* ---------- contact / cta ----------------------------------------------------- */
.cta{background:var(--white);text-align:center}
.cta h2{font-size:clamp(34px,3.8vw,52px);margin-bottom:18px}
.cta p{color:var(--muted);max-width:52ch;margin:0 auto 30px}
.phone-big{display:inline-block;font-family:var(--serif);font-size:clamp(38px,4.6vw,58px);
  color:var(--olive);margin:6px 0 30px;letter-spacing:.5px}
/* ---------- request a consultation ----------------------------------------
   Compact: heading left, form right. No card around the fields — the cream
   inputs read against the white ground on their own, which keeps it lighter
   than the boxed referral form on refer.html. */
.consult{background:var(--white);padding:clamp(72px,7vw,96px) 0}
.consult__grid{display:grid;grid-template-columns:1fr 1.3fr;gap:64px;align-items:start}
.consult__lead h2{font-size:clamp(30px,3vw,42px);line-height:1.14;margin:0;max-width:13ch}
.consult__lead p{color:var(--muted);font-size:16.5px;line-height:1.78;margin-top:20px;max-width:36ch}
.consult__form .field{margin-bottom:18px}
.consult__form .field label em{font-style:normal;text-transform:none;letter-spacing:0;
  color:var(--muted);opacity:.8;margin-left:6px}
.consult__form textarea{min-height:84px}
.consult__form .form__foot{margin-top:4px}
@media(max-width:940px){
  .consult__grid{grid-template-columns:1fr;gap:36px}
  .consult__lead h2,.consult__lead p{max-width:none}
}

/* ---------- footer -------------------------------------------------------------- */
/* Three tones on the dark ground:
   ivory ...... logo, ABOMS seal, column headings, phone number
   warm grey .. body copy, links, address and hours
   faint grey . divider, copyright and design credit */
footer{--foot-ivory:#F4F1E8;--foot-warm:#B5AFA2;--foot-faint:#6F6B62;
  background:var(--ink);color:var(--foot-warm);padding:84px 0 38px;font-size:15px;line-height:1.75}
.foot-grid{display:grid;grid-template-columns:1.35fr 1fr 1.2fr .85fr;gap:56px}
.foot-logo img{height:64px;width:auto;margin-bottom:22px}
.foot-brand p{max-width:32ch}
.foot-seal{display:block;width:112px;height:auto;margin-top:34px}
footer h4{color:var(--foot-ivory);font-size:22px;font-weight:500;margin-bottom:18px}
footer ul{list-style:none}
footer li{margin-bottom:12px}
footer a{color:var(--foot-warm);transition:color .3s ease}
footer a:hover{color:var(--foot-ivory)}
.foot-lab{display:block;margin:18px 0 4px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--foot-warm)}
.foot-lab:first-of-type{margin-top:0}
.foot-val{display:block}
/* the phone number is the conversion point, not body copy: ivory and serif */
footer .foot-tel{display:inline-block;font-family:var(--serif);font-size:26px;font-weight:600;
  line-height:1.3;letter-spacing:.01em;color:var(--foot-ivory)}
.foot-more{margin-top:20px}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:60px;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.09);font-size:13px;color:var(--foot-faint)}
@media(max-width:940px){.foot-grid{grid-template-columns:1fr 1fr;gap:40px}}
@media(max-width:600px){.foot-grid{grid-template-columns:1fr}}


/* ---------- scroll reveal ------------------------------------------------------ */
/* Content is visible by default; the hidden state is only applied once the
   observer is actually running. If the script fails the page still renders. */
.reveal{transition:opacity .9s cubic-bezier(.2,.75,.2,1),
  transform .9s cubic-bezier(.2,.75,.2,1)}
.js-reveal .reveal{opacity:0;transform:translateY(26px)}
.js-reveal .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-reveal .reveal{opacity:1;transform:none;transition:none}
}
@media(max-width:700px){
  .wrap{padding:0 24px}
  section{padding:80px 0}
}

/* ---------- procedures.html: page head + knowledge base --------------------- */
.pagehead{background:var(--cream2);padding:170px 0 76px}
.pagehead h1{font-size:clamp(38px,4.6vw,62px);margin-bottom:16px}
.pagehead p{color:var(--muted);max-width:54ch}

.kb{background:var(--white);padding:96px 0 120px}
.kb__grid{display:grid;grid-template-columns:230px 1fr;gap:72px;align-items:start}
.kb__index{position:sticky;top:110px}
.kb__index nav{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line)}
.kb__index-label{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#A5A297;
  padding:0 0 14px 20px}
.kb__index a{font-size:14px;color:var(--muted);padding:9px 0 9px 20px;border-left:2px solid transparent;
  margin-left:-1px;transition:.25s}
.kb__index a:hover{color:var(--olive);border-left-color:var(--olive)}

.kb__h{font-size:clamp(28px,3vw,40px);margin:0 0 26px;padding-top:6px;scroll-margin-top:110px}
.kb__h:not(:first-child){margin-top:76px;padding-top:44px;border-top:1px solid var(--line)}
.kb__note{color:var(--muted);font-size:15px;margin:-10px 0 26px}

.acc{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;
  font-family:var(--serif);font-size:24px;color:var(--ink);transition:color .25s}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--olive)}
.acc summary::after{content:"";position:absolute;right:8px;top:33px;width:9px;height:9px;
  border-right:1px solid var(--olive);border-bottom:1px solid var(--olive);
  transform:rotate(45deg);transition:transform .3s}
.acc[open] summary::after{transform:rotate(-135deg)}
.acc__in{padding:0 0 26px}
.acc__in p{color:var(--muted);font-size:15.5px;max-width:64ch;margin:0 0 14px}
.acc__in p:last-child{margin-bottom:0}
.acc__in h4{font-family:var(--serif);font-weight:500;font-size:19px;color:var(--ink);
  margin:24px 0 8px;letter-spacing:.2px}
.acc__in h4:first-child{margin-top:0}
/* prose lists inside a topic — .acc__sub keeps its own two-column treatment */
.acc__in ul:not(.acc__sub){margin:0 0 14px;padding-left:20px;list-style:disc;
  color:var(--muted);font-size:15.5px;max-width:64ch}
.acc__in ul:not(.acc__sub) li{margin-bottom:6px}
.acc__sub{list-style:none;margin:20px 0 0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:10px 30px}
.acc__sub li{position:relative;padding-left:18px;font-size:14.5px;color:var(--muted)}
.acc__sub li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:1px;background:var(--olive)}

@media(max-width:940px){
  .kb__grid{grid-template-columns:1fr;gap:40px}
  .kb__index{position:static}
  .kb__index nav{flex-direction:row;flex-wrap:wrap;border-left:0;border-bottom:1px solid var(--line);
    padding-bottom:14px;gap:18px}
  .kb__index-label{display:none}
  .kb__index a{border-left:0;padding:0}
  .acc__sub{grid-template-columns:1fr}
  .pagehead{padding:120px 0 56px}
}

/* ---------- clinical excellence · static editorial panels -----------------
   No sticky, no scroll handlers, no fixed or viewport heights. Image-led
   panels with the copy beneath; height comes from the content. The section
   below is also light, and the one above is cream, so this deep near-black
   carries the contrast on its own without needing rules or boxes. */
.ce{background:radial-gradient(ellipse at 16% 12%,rgba(126,121,63,.16),transparent 64%),#161613;
  color:#CFCDC4;padding:clamp(74px,7.5vw,112px) 0}
.ce .eyebrow{color:var(--olive-lt);margin-bottom:16px}
.ce .eyebrow--rule::before{background:var(--olive-lt)}

.ce__head{margin-bottom:clamp(42px,4.6vw,66px)}
.ce__head h2{color:#fff;font-size:clamp(30px,3.2vw,44px);line-height:1.14;margin:0;max-width:16ch}

.ce__panels{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,2.8vw,44px)}
.ce__panel{min-width:0}
.ce__img{margin:0 0 26px;aspect-ratio:3/2;overflow:hidden}
.ce__img img,.ce__img .ph{width:100%;height:100%;object-fit:cover}
.ce__label{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--olive-lt);
  margin-bottom:14px;display:flex;align-items:center;gap:11px}
.ce__label i{font-style:normal;font-family:var(--serif);font-size:14px;letter-spacing:0;opacity:.75}
.ce__panel h3{color:#fff;font-size:clamp(21px,1.95vw,26px);line-height:1.22;margin:0 0 12px;max-width:20ch}
.ce__panel p{color:#A5A39A;font-size:15px;line-height:1.75;margin:0}

@media(max-width:900px){
  .ce__panels{grid-template-columns:1fr;gap:54px}
  .ce__img{aspect-ratio:3/2}
}

/* ---------- location map -------------------------------------------------- */
.mapband{padding:0;line-height:0;background:var(--cream2)}
.mapband iframe{width:100%;height:clamp(260px,32vh,360px);border:0;display:block}

/* Referral route inside the consultation block. The header button is hidden on
   phones, so this is how a dentist gets through on mobile. */
.consult__refer{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  font-size:15px;color:var(--muted)}
.consult__refer a{color:var(--olive);border-bottom:1px solid rgba(126,121,63,.4);transition:.3s}
.consult__refer a:hover{border-bottom-color:var(--olive)}