/* ============================================================================
   SHAK WEB GROUP — "Signature" core layer  (design logic v2, 2026-11-07)
   Factored from adhp.com's assets/css/signature.css (commit a36830c). Vanilla CSS,
   no libraries. Load AFTER the site's own base stylesheet; theme it by overriding
   the tokens in a per-brand theme file (see theme.example.css). Nothing in this
   file names a brand colour or a brand font: everything resolves through tokens.
   ========================================================================== */
/* ---------- TOKENS (override these in the per-brand theme file; never edit here) ----------
   Role names, not colour names. "brand" = the deep ground colour used for dark sections and
   headings; "accent" = the mid-tone action colour (buttons, eyebrows, links); "highlight" = the
   warm third colour used for ticks, rules and emphasis italics on dark; "on-dark" = text ramps
   used on brand/photo sections. Every rgba() tint in this file resolves through the *-rgb
   triplets, so a theme only needs to set the hex AND the matching triplet. Defaults below are
   neutral (charcoal / slate / amber) so an unthemed page still reads; they are NOT a brand. */
:root {
  --brand: #1F2933;            --brand-rgb: 31,41,51;
  --brand-deep: #121A21;       --brand-deep-rgb: 18,26,33;
  --brand-soft: #334152;
  --brand-grad-start: #151D25; --brand-grad-end: #2A3A4A;
  --accent: #3B6D8C;           --accent-rgb: 59,109,140;
  --accent-bright: #4E8AAE;    --accent-bright-rgb: 78,138,174;
  --accent-deep: #2C5269;
  --accent-wash: #EAF2F7;      --accent-wash-rgb: 234,242,247;
  --highlight: #C9A35B;        --highlight-rgb: 201,163,91;
  --highlight-light: #E4CE98;  --highlight-deep: #A9874A;
  --scan-rgb: 120,220,240;     /* the technology "scan sweep" line */
  --open: #38C78E; --open-rgb: 56,199,142;   /* "open now" status dot; the one green allowed because it is live data */
  --paper: #FFFFFF; --cloud: #F6F8FA; --cloud-2: #EEF2F5;   /* page ground is always clean white; cloud = tonal section, never ivory */
  --ink: #161C22; --muted: #5B6873; --line: #E2E8ED; --line-strong: #CCD5DD;
  --on-dark: #E3EAF0; --on-dark-2: #BCC9D5; --on-dark-3: #8CA0B2; --on-accent-soft: #E6F1F5;
  --f-head: 'Helvetica Neue', Arial, sans-serif;   /* theme sets the brand display face */
  --f-body: 'Helvetica Neue', Arial, sans-serif;   /* theme sets the brand text face */
  --radius: 18px; --radius-sm: 10px;               /* theme may set 0 for a sharp brand */
  --arch: 999px 999px 22px 22px;                   /* the signature image window; theme may swap for a different frame */
  --grad-brand: linear-gradient(135deg, var(--brand-grad-start) 0%, var(--brand) 40%, var(--brand-grad-end) 100%);
  --grad-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
  --grad-highlight: linear-gradient(135deg, var(--highlight-light) 0%, var(--highlight) 55%, var(--highlight-deep) 100%);
  --shadow-sm: 0 1px 2px rgba(var(--brand-rgb),.05), 0 2px 8px rgba(var(--brand-rgb),.05);
  --shadow-md: 0 8px 20px rgba(var(--brand-rgb),.09), 0 20px 48px rgba(var(--brand-rgb),.08);
  --shadow-lg: 0 18px 40px rgba(var(--brand-rgb),.14), 0 40px 90px rgba(var(--brand-rgb),.12);
  --ease: cubic-bezier(.2,.6,.2,1);
  --t: 240ms var(--ease);
  --dots: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.3px);
  --wrap: 1200px; --gap: 28px;
}
/* legacy aliases so markup written against ADHP's names keeps working inside the core */
:root { --grad-teal: var(--grad-accent); --grad-gold: var(--grad-highlight); }



body { background: var(--paper); color: var(--ink); }
html, body { overflow-x: clip; }
main { overflow-x: clip; }
::selection { background: var(--highlight); color: var(--brand-deep); }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--f-head); color: var(--brand); letter-spacing: -0.022em; }
h1 { font-size: clamp(2.3rem, 4.8vw, 3.9rem); line-height: 1.04; font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.3vw, 2.7rem); line-height: 1.1; font-weight: 800; }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.42rem); letter-spacing: -0.012em; font-weight: 700; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 300; letter-spacing: -0.01em; color: var(--accent); }
.section--brand h2 em, .hero h1 em, .svc-hero h1 em, .pagehead h1 em, .cta-photo h2 em, .tech h2 em { color: var(--highlight-light); }
p { color: inherit; }
.lede { font-size: 1.22rem; line-height: 1.6; color: var(--brand-soft); }

/* ---------- eyebrow: small caps with a gold tick (never numbered, never mono) ---------- */
.eyebrow, .hero__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--f-head); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); background: none; border-radius: 0; padding: 0; margin-bottom: 1.1rem;
}
.eyebrow::before, .hero__eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--highlight); flex: 0 0 auto; border-radius: 2px; }
.section-head .eyebrow { justify-content: center; }
.section-head--left .eyebrow { justify-content: flex-start; }
.section--brand .eyebrow, .cta-photo .eyebrow, .hero__eyebrow, .svc-hero .eyebrow, .pagehead .eyebrow, .tech .eyebrow { color: var(--highlight-light); }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--f-head); font-weight: 600; font-size: .94rem; letter-spacing: .01em;
  padding: .95rem 1.85rem; border-radius: 999px; border: 1.5px solid transparent;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--grad-teal); color: #fff; box-shadow: 0 8px 22px rgba(var(--accent-rgb),.26); }
.btn--primary:hover { background: var(--accent-bright); color: #fff; box-shadow: 0 12px 28px rgba(var(--accent-rgb),.34); }
.btn--highlight { background: var(--grad-gold); color: var(--brand-deep); box-shadow: 0 8px 22px rgba(var(--highlight-rgb),.28); }
.btn--highlight:hover { background: var(--highlight-light); color: var(--brand-deep); box-shadow: 0 12px 28px rgba(var(--highlight-rgb),.36); }
.btn--ghost { border-color: var(--line-strong); color: var(--brand); background: #fff; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: #fff; }
.btn--on-navy { border-color: rgba(255,255,255,.42); color: #fff; background: rgba(255,255,255,.04); backdrop-filter: blur(6px); }
.btn--on-navy:hover { background: #fff; color: var(--brand); border-color: #fff; }
.section--brand .btn--highlight, .cta-photo .btn--highlight, .svc-hero .btn--highlight, .hero .btn--highlight, .tech .btn--highlight, .ins__text .btn--highlight { color: var(--brand-deep); }
.section--brand .btn--on-navy, .cta-photo .btn--on-navy, .svc-hero .btn--on-navy, .tech .btn--on-navy { color: #fff; }
.section--brand .btn--on-navy:hover, .cta-photo .btn--on-navy:hover, .svc-hero .btn--on-navy:hover { color: var(--brand); }
.btn--sm { padding: .6rem 1.2rem; font-size: .86rem; }
.btn--xs { padding: .45rem .95rem; font-size: .8rem; }

/* ---------- section rhythm ---------- */
.section { padding: clamp(3.75rem, 7.5vw, 7rem) 0; position: relative; }
.section--tight { padding: clamp(2.25rem, 4.5vw, 3.5rem) 0; }
.section--cloud { background: linear-gradient(180deg, var(--cloud) 0%, var(--cloud-2) 100%); }
.section--brand { background: var(--grad-brand); color: var(--on-dark); overflow: hidden; }
.section--brand::before { content: ''; position: absolute; inset: 0; background-image: var(--dots); background-size: 26px 26px; opacity: .22; mask-image: radial-gradient(ellipse at 70% 20%, #000 0%, transparent 60%); -webkit-mask-image: radial-gradient(ellipse at 70% 20%, #000 0%, transparent 60%); pointer-events: none; }
.section--brand::after { content: ''; position: absolute; width: 70vw; height: 70vw; max-width: 1000px; max-height: 1000px; right: -26vw; top: -34vw; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-bright-rgb),.32) 0%, rgba(var(--accent-bright-rgb),0) 62%); pointer-events: none; }
.section--brand > .wrap { position: relative; z-index: 1; }
.section--brand h2, .section--brand h3, .section--brand h4 { color: #fff; }
.section--brand p { color: var(--on-dark-2); }
.section--brand a:not(.btn) { color: var(--highlight-light); }
.section-head { max-width: 760px; }
.section-head p { color: var(--muted); font-size: 1.1rem; line-height: 1.65; }
.section--brand .section-head p { color: var(--on-dark-2); }
.section-head--compact h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
.section-head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; text-align: left; }
.section-head--row > div { max-width: 640px; }
.section-head--row .eyebrow { justify-content: flex-start; }
@media (min-width: 981px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.split__body { min-width: 0; }
.split__body h3 { font-size: 1.4rem; }
.split__body h3 + p { font-size: 1rem; }

/* four-item sets: 2x2 / 4-up instead of 3+1 */
.svc-grid:has(> :nth-child(4):last-child) > *, .services-grid:has(> :nth-child(4):last-child) > *, .related-grid:has(> :nth-child(4):last-child) > *, .condition-grid:has(> :nth-child(4):last-child) > * { grid-column: span 6; }

/* ---------- top bar ---------- */
.topbar { background: var(--brand-deep); font-size: .82rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.topbar__inner { padding: .42rem 0; }
.topbar a { color: var(--on-dark-2); }
.topbar a:hover { color: var(--highlight-light); }
.topbar__links a { font-weight: 500; }
.topbar__phone { font-family: var(--f-head); font-weight: 600; color: #fff; }
.topbar__inner > div { display: flex; align-items: center; }
.topbar__links { margin-right: auto; }
.topbar__inner .lang-switch { margin-left: .5rem; padding-left: 1rem; border-left: 1px solid rgba(255,255,255,.12); }
.topbar__inner .topbar__social { padding: 0 .6rem; }
.topbar__social, .nav__social { display: inline-flex; align-items: center; gap: .3rem; line-height: 0; }
.topbar__social a, .nav__social a { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--on-dark-2); padding: 0; margin: 0; transition: background var(--t), color var(--t); }
.topbar__social a:hover, .nav__social a:hover { background: rgba(255,255,255,.1); color: #fff; }
.topbar__social svg, .nav__social svg { width: 14px; height: 14px; fill: currentColor; display: block; }
.lang-switch { display: inline-flex; gap: .3rem; align-items: center; font-family: var(--f-head); font-size: .72rem; letter-spacing: .1em; }
.lang-switch a[aria-current="true"] { color: var(--highlight-light); }
.lang-switch span { opacity: .4; }
.nav__social { display: none; }

/* ---------- header (sticky, condenses on scroll) ---------- */
.site-header { background: rgba(var(--brand-rgb),.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.08); }
.site-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: linear-gradient(90deg, var(--accent) 0%, var(--accent-bright) 40%, var(--highlight) 100%); }
.site-header__inner { padding: .95rem 0; transition: padding var(--t); }
.brand img { width: 224px; transition: width var(--t); }
body.is-scrolled .site-header__inner { padding: .5rem 0; }
body.is-scrolled .brand img { width: 184px; }
.nav__list > li > a { font-family: var(--f-head); font-size: .86rem; font-weight: 600; letter-spacing: .01em; color: var(--on-dark); }
.nav__list > li > a::after { background: var(--highlight); height: 2px; bottom: -.1rem; }
.nav__sub { border-radius: var(--radius-sm); border-top: 2px solid var(--highlight); box-shadow: var(--shadow-lg); padding: .5rem; }
.nav__sub a { font-family: var(--f-body); font-size: .9rem; font-weight: 500; border-radius: 6px; }
.nav__sub a:hover { background: var(--accent-wash); color: var(--accent); }
.nav__sub .nav__sub-overview { display: none; }
.nav .btn--highlight.btn--sm { padding: .64rem 1.25rem; }

/* ---------- arch window imagery (the signature shape) ---------- */
.arch { border-radius: var(--arch); overflow: hidden; }
.arch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arch--flat { border-radius: 22px 22px 999px 999px; }

/* ---------- HOME HERO: cinematic video, large type, office quick-book ---------- */
.hero { position: relative; overflow: hidden; color: #fff; min-height: clamp(620px, 92vh, 900px); background: var(--brand-deep); display: flex; align-items: flex-end; }
.hero__video { position: absolute; inset: -6% 0; height: 112%; width: 100%; object-fit: cover; z-index: 0; will-change: transform; }
.hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--brand-deep-rgb),.62) 0%, rgba(var(--brand-deep-rgb),.38) 40%, rgba(var(--brand-deep-rgb),.08) 70%, rgba(var(--brand-deep-rgb),.2) 100%),
              linear-gradient(0deg, rgba(var(--brand-deep-rgb),.9) 0%, rgba(var(--brand-deep-rgb),.3) 45%, rgba(var(--brand-deep-rgb),0) 80%); }
.hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 7fr) minmax(300px, 4fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: end; padding: clamp(7rem, 14vh, 10rem) 0 clamp(5rem, 6.5vw, 6.5rem); min-height: 0; width: min(var(--wrap, 1200px), calc(100% - 3rem)); margin-inline: auto; }
.hero__body { max-width: 680px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; padding: 0; }
.hero__eyebrow { margin-bottom: 1.2rem; }
.hero h1 { color: #fff; font-size: clamp(2.4rem, 5.2vw, 4.4rem); margin-bottom: 1.1rem; text-wrap: balance; }
.hero__sub { font-size: clamp(1.05rem, 1.4vw, 1.22rem); color: var(--on-dark); max-width: 52ch; margin-bottom: 1.8rem; line-height: 1.6; }
.hero .btn--highlight { box-shadow: 0 10px 28px rgba(var(--highlight-rgb),.3); }
.hero__trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem 1.5rem; margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.18); }
.hero__trust strong { display: block; font-family: var(--f-head); font-size: clamp(1.5rem, 2.2vw, 2rem); color: #fff; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hero__trust span { display: block; margin-top: .3rem; font-size: .8rem; color: var(--on-dark-2); line-height: 1.35; max-width: 11ch; }
.hero__book { background: rgba(var(--brand-deep-rgb),.62); color: var(--on-dark); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); padding: 1.35rem 1.4rem 1.3rem; box-shadow: 0 30px 70px rgba(0,0,0,.35); position: relative; overflow: hidden; backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); }
.hero__book::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--highlight)); }
.hero__book h2 { font-size: 1.08rem; margin: 0 0 .25rem; color: #fff; letter-spacing: -.01em; }
.hero__book > p { font-size: .85rem; color: var(--on-dark-2); margin: 0 0 .8rem; }
.hero__book ul { list-style: none; margin: 0; padding: 0; }
.hero__book li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .58rem 0; border-top: 1px solid rgba(255,255,255,.12); }
.hero__book li strong { display: block; font-family: var(--f-head); font-weight: 700; font-size: .94rem; color: #fff; line-height: 1.2; }
.hero__book li a.tel { font-size: .82rem; color: var(--on-dark-2); font-weight: 500; }
.hero__book li a.tel:hover { color: var(--highlight-light); }
.hero__book .btn--xs { background: var(--grad-gold); color: var(--brand-deep); box-shadow: none; }
.hero__book .btn--xs:hover { background: var(--highlight-light); color: var(--brand-deep); }
.hero__book__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .9rem; padding: .9rem 0 .2rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .84rem; color: var(--on-dark-2); }
.hero__book__foot a { font-family: var(--f-head); font-weight: 600; color: var(--highlight-light); white-space: nowrap; }
.hero__cue { position: absolute; left: 50%; bottom: 14px; z-index: 2; transform: translateX(-50%); width: 26px; height: 42px; border: 1.5px solid rgba(255,255,255,.45); border-radius: 999px; display: none; }
.hero__cue::after { content: ''; position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 3px; background: var(--highlight-light); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }

/* ---------- INTRO: staggered duo composition ---------- */
.duo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.duo__media { position: relative; padding: 0 16% 18% 0; }
.duo__main { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--arch); overflow: hidden; box-shadow: var(--shadow-md); position: relative; }
.duo__main img { width: 100%; height: 100%; object-fit: cover; }
.duo__inset { position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; border: 8px solid #fff; box-shadow: var(--shadow-lg); }
.duo__inset img { width: 100%; height: 100%; object-fit: cover; }
.duo__badge { position: absolute; left: -10px; top: 8%; display: inline-flex; align-items: center; gap: .75rem; background: #fff; border-radius: 999px; padding: .6rem 1.1rem .6rem .6rem; box-shadow: var(--shadow-md); font-family: var(--f-head); font-weight: 600; font-size: .86rem; color: var(--brand); z-index: 2; }
.duo__badge i { width: 36px; height: 36px; border-radius: 50%; background: var(--grad-teal) var(--ico) center / 18px no-repeat; }
.duo__body .eyebrow { margin-bottom: 1rem; }
.duo__body h2 { margin-bottom: 1.1rem; }
.duo__body p { color: var(--muted); font-size: 1.04rem; }
.duo__body p a { color: var(--accent); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb),.35); text-underline-offset: 3px; }
.duo__pull { margin: 1.4rem 0 1.6rem; padding: 0 0 0 1.2rem; border-left: 3px solid var(--highlight); font-family: var(--f-head); font-weight: 600; font-size: 1.08rem; line-height: 1.5; color: var(--brand); background: none; border-radius: 0; font-style: normal; }
.duo--reverse .duo__media { order: 2; padding: 0 0 18% 16%; }
.duo--reverse .duo__inset { right: auto; left: 0; }
.duo--reverse .duo__badge { left: auto; right: -10px; }

/* ---------- SERVICES RAIL: horizontal scroll cards ---------- */
.rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.rail-head .section-head { margin: 0; text-align: left; max-width: 640px; }
.rail-head .eyebrow { justify-content: flex-start; }
.rail-nav { display: flex; gap: .5rem; flex: 0 0 auto; }
.rail-nav button { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: #fff; color: var(--brand); cursor: pointer; display: grid; place-items: center; transition: background var(--t), color var(--t), border-color var(--t), transform var(--t); }
.rail-nav button:hover { background: var(--brand); color: #fff; border-color: var(--brand); transform: translateY(-2px); }
.rail-nav button svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rail { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: max(1.5rem, calc((100vw - 1200px) / 2)); padding: .5rem max(1.5rem, calc((100vw - 1200px) / 2)) 1.6rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 140px), rgba(0,0,0,0) 100%); -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 140px), rgba(0,0,0,0) 100%); }
.rail.is-end { mask-image: none; -webkit-mask-image: none; }
.rail::-webkit-scrollbar { display: none; }
.rail-card { flex: 0 0 clamp(240px, calc((min(1200px, 100vw - 3rem) - 3 * var(--gap)) / 3.55), 320px); scroll-snap-align: start; position: relative; border-radius: var(--radius); overflow: hidden; background: var(--brand-deep); color: #fff; aspect-ratio: 4 / 5.2; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.rail-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.rail-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--brand-deep-rgb),0) 32%, rgba(var(--brand-deep-rgb),.45) 60%, rgba(var(--brand-deep-rgb),.94) 100%); transition: opacity var(--t); }
.rail-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.rail-card:hover img { transform: scale(1.06); }
.rail-card__body { position: relative; z-index: 1; padding: 1.4rem 1.4rem 1.5rem; }
.rail-card h3 { color: #fff; font-size: 1.25rem; margin: 0 0 .4rem; }
.rail-card p { color: var(--on-dark-2); font-size: .9rem; line-height: 1.5; margin: 0 0 .9rem; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .4s var(--ease); }
.rail-card:hover p, .rail-card:focus-visible p { max-height: 7rem; opacity: 1; }
.rail-card__go { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--f-head); font-weight: 600; font-size: .84rem; color: var(--highlight-light); }
.rail-card__go::after { content: '\2192'; transition: transform var(--t); }
.rail-card:hover .rail-card__go::after { transform: translateX(4px); }
.rail-card__tag { position: absolute; top: 1.1rem; left: 1.1rem; z-index: 1; font-family: var(--f-head); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(var(--brand-deep-rgb),.55); border: 1px solid rgba(255,255,255,.22); padding: .38rem .6rem; border-radius: 6px; backdrop-filter: blur(6px); }
.rail-card--all { background: var(--grad-teal); justify-content: center; align-items: center; text-align: center; }
.rail-card--all::after { display: none; }
.rail-card--all .rail-card__body { padding: 2rem; }
.rail-card--all h3 { font-size: 1.5rem; }
.rail-card--all p { max-height: none; opacity: 1; color: var(--on-accent-soft); }
.rail-card--all .rail-card__go { color: #fff; border: 1.5px solid rgba(255,255,255,.6); border-radius: 999px; padding: .6rem 1.1rem; }

/* ---------- TECH STORY: scan-sweep imagery + feature rows ---------- */
.tech__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.tech__media { position: relative; padding: 0 0 22% 14%; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.tech__main { flex: 0 0 auto; }
.tech__main { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 4.2; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.tech__main img { width: 100%; height: 100%; object-fit: cover; }
.tech__main::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(var(--accent-bright-rgb),.18) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent-bright-rgb),.18) 1px, transparent 1px); background-size: 40px 40px; mix-blend-mode: screen; pointer-events: none; opacity: .55; }
.tech__sweep { position: absolute; left: 0; top: 0; height: 100%; width: 100%; pointer-events: none; background: linear-gradient(180deg, rgba(var(--scan-rgb),0) 0%, rgba(var(--scan-rgb),0) 48%, rgba(var(--scan-rgb),.5) 49.4%, #ffffff 50%, rgba(var(--scan-rgb),.5) 50.6%, rgba(var(--scan-rgb),0) 52%, rgba(var(--scan-rgb),0) 100%); box-shadow: none; animation: sweep2 6s var(--ease) infinite; mix-blend-mode: screen; }
@keyframes sweep2 { 0% { transform: translateY(-50%); opacity: 0; } 10% { opacity: .9; } 65% { opacity: .9; } 75% { transform: translateY(50%); opacity: 0; } 100% { transform: translateY(-50%); opacity: 0; } }
.tech__inset { position: absolute; right: -6%; bottom: 0; width: 50%; aspect-ratio: 1; margin: 0; border-radius: var(--radius); overflow: hidden; border: 6px solid var(--brand); box-shadow: var(--shadow-lg); }
.tech__inset img { width: 100%; height: 100%; object-fit: cover; }
.tech__media .chip { position: absolute; left: 0; top: 10%; z-index: 2; }
.chip { display: inline-flex; align-items: center; gap: .65rem; background: #fff; border-radius: 999px; padding: .55rem 1rem .55rem .55rem; box-shadow: var(--shadow-md); font-family: var(--f-head); font-weight: 600; font-size: .84rem; color: var(--brand); white-space: nowrap; }
.chip i { display: inline-block; width: 32px; height: 32px; border-radius: 50%; background-image: var(--ico), var(--grad-teal); background-size: 18px 18px, cover; background-position: center; background-repeat: no-repeat; flex: 0 0 auto; }
.chip--highlight i { background-image: var(--ico), var(--grad-gold); }
.chip--ct i, .ico--ct { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M12 3.5v3M12 17.5v3M3.5 12h3M17.5 12h3'/%3E%3C/svg%3E"); }
.chip--lab i, .ico--lab { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6l-5 9a2 2 0 0 0 1.7 3h10.6a2 2 0 0 0 1.7-3l-5-9V3'/%3E%3C/svg%3E"); }
.chip--sed i, .ico--sed { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17V9a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8M2 17h20M6 7V5h5v2'/%3E%3C/svg%3E"); }
.chip--guide i, .ico--guide { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8l8-4 8 4-8 4-8-4z'/%3E%3Cpath d='M4 8v8l8 4 8-4V8'/%3E%3Cpath d='M12 12v8'/%3E%3C/svg%3E"); }
.chip--scan i, .ico--scan { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8V5a1 1 0 0 1 1-1h3M16 4h3a1 1 0 0 1 1 1v3M20 16v3a1 1 0 0 1-1 1h-3M8 20H5a1 1 0 0 1-1-1v-3'/%3E%3Cpath d='M3 12h18'/%3E%3C/svg%3E"); }
.chip--team i, .ico--team { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Ccircle cx='16.5' cy='9.5' r='2.6'/%3E%3Cpath d='M3.5 19a5.5 5.5 0 0 1 11 0M14.5 18.5a4.2 4.2 0 0 1 6 0'/%3E%3C/svg%3E"); }
.chip--smile i, .ico--smile { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8 13.5c1 1.8 2.4 2.7 4 2.7s3-.9 4-2.7M9 9.5h.01M15 9.5h.01'/%3E%3C/svg%3E"); }
.chip--tooth i, .ico--tooth { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4c-2-1.6-6-1.6-6 3 0 3 1.5 4 1.8 7 .2 2 .6 6 2.2 6 1.4 0 1.4-4 2-4s.6 4 2 4c1.6 0 2-4 2.2-6 .3-3 1.8-4 1.8-7 0-4.6-4-4.6-6-3z'/%3E%3C/svg%3E"); }
.chip--clip i, .ico--clip { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V3h6v1M8.5 10h7M8.5 14h5'/%3E%3C/svg%3E"); }
.chip--clock i, .ico--clock { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.chip--pin i, .ico--pin { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.3-7-11.5a7 7 0 0 1 14 0C19 14.7 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.tech__body h2 { margin-bottom: 1rem; }
.tech-list { list-style: none; margin: 1.8rem 0 2rem; padding: 0; display: grid; gap: 0; }
.tech-list li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 1.1rem; align-items: start; padding: 1.1rem 0; border-top: 1px solid rgba(255,255,255,.12); }
.tech-list li:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.tech-list i { width: 48px; height: 48px; border-radius: 14px; background-image: var(--ico), linear-gradient(135deg, rgba(var(--accent-bright-rgb),.35), rgba(var(--accent-bright-rgb),.08)); background-size: 22px 22px, cover; background-position: center; background-repeat: no-repeat; border: 1px solid rgba(255,255,255,.14); }
.tech-list strong { display: block; font-family: var(--f-head); font-weight: 700; color: #fff; font-size: 1.05rem; margin-bottom: .2rem; }
.tech-list span { color: var(--on-dark-2); font-size: .95rem; line-height: 1.55; }
/* value grid (about, dental lab): glass cards on navy with a gold tick */
.value-grid .card--brand { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); box-shadow: none; }
.value-grid .card--brand:hover { background: rgba(255,255,255,.08); border-color: rgba(var(--highlight-rgb),.5); }
.value-grid .card--brand::before { display: none; }
.value-grid .card--brand h3::before { content: ''; display: block; width: 28px; height: 2px; background: var(--highlight); border-radius: 2px; margin-bottom: .85rem; }
/* value grid: light sections get white cards, navy sections get glass cards */
.value-grid .value { text-align: left; padding: 1.5rem 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.value strong { display: block; font-family: var(--f-head); font-size: 1.5rem; color: var(--brand); font-weight: 800; margin-bottom: .45rem; letter-spacing: -.02em; }
.value strong::before { content: ''; display: block; width: 28px; height: 2px; background: var(--highlight); border-radius: 2px; margin-bottom: .8rem; }
.value span { color: var(--muted); font-size: .95rem; line-height: 1.55; }
.section--brand .value-grid .value { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.04); box-shadow: none; backdrop-filter: blur(6px); }
.section--brand .value strong { color: var(--highlight-light); }
.section--brand .value span { color: var(--on-dark-2); }
.value-grid:has(> :nth-child(4):last-child) > * { grid-column: span 6; }
@media (max-width: 600px) { .value-grid:has(> :nth-child(4):last-child) > * { grid-column: 1 / -1; } }

/* ---------- DOCTORS: arch portraits ---------- */
.doc-card { border: 0; background: none; box-shadow: none; overflow: visible; border-radius: 0; }
.doc-card:hover { transform: none; box-shadow: none; }
.doc-card__photo { background: none; padding: 10px 2.4rem 0; position: relative; }
.doc-card__photo::before { content: ''; position: absolute; left: 50%; top: 50%; width: 92%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 50% 35%, var(--accent-wash) 0%, rgba(var(--accent-wash-rgb),0) 70%); z-index: -1; }
.doc-card__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center; border-radius: 50%; background: #fff; box-shadow: var(--shadow-md), 0 0 0 7px #fff, 0 0 0 8px rgba(var(--highlight-rgb),.7); filter: saturate(.62) contrast(1.06) brightness(1.02); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.doc-card:hover .doc-card__photo img { transform: translateY(-6px); box-shadow: var(--shadow-lg), 0 0 0 7px #fff, 0 0 0 8px var(--highlight); }
.doc-card__photo::after { content: ''; position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); width: 44px; height: 3px; background: var(--highlight); border-radius: 3px; }
.doc-card__body { padding: 1.6rem 1rem 1rem; text-align: center; }
.doc-card__body h3 { font-size: 1.2rem; margin-bottom: .25rem; }
.doc-card__role { font-family: var(--f-head); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--accent); margin-bottom: .7rem; flex: 0 0 auto; }
.doc-card__body p { font-size: .94rem; }
.doc-card .card__link { align-self: center; }
.section--cloud .doc-card__photo img { box-shadow: var(--shadow-sm); }

/* ---------- cards (generic) ---------- */
.card, .loc-card, .post-card, .quote-card, .about-gallery__item, .practice-gallery__item, .ba-grid__item, .form-card, .video-card__meta { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.card, .loc-card, .post-card { position: relative; overflow: hidden; box-shadow: var(--shadow-sm); border-color: var(--line); transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.card::before, .post-card::before, .loc-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--highlight)); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); z-index: 2; }
.card:hover, .loc-card:hover, .post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.card:hover::before, .post-card:hover::before, .loc-card:hover::before { transform: scaleX(1); }
.card { padding: 1.75rem; }
.card h3, .post-card h3, .loc-card h3 { font-size: 1.18rem; }
.card p, .post-card p { font-size: .96rem; color: var(--muted); }
.card__media { margin: -1.75rem -1.75rem 1.3rem; border-radius: 0; position: relative; overflow: hidden; background: var(--cloud-2); }
.card__media img { aspect-ratio: 4 / 3; object-fit: cover; transition: transform .7s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card__link { font-family: var(--f-head); font-weight: 600; font-size: .86rem; color: var(--accent); }
.card__link::after { content: '\2192'; }
.card--brand { background: var(--brand-soft); border-color: rgba(255,255,255,.12); }
.card--brand h3 { color: #fff; } .card--brand p { color: var(--on-dark-2); }
.post-card > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--cloud-2); }
.post-card__body { padding: 1.3rem 1.4rem 1.5rem; }
.post-card__date { font-family: var(--f-head); font-size: .72rem; letter-spacing: .1em; color: var(--accent); font-weight: 700; }
.post-card h3 { font-size: 1.08rem; line-height: 1.3; }
.post-card h3 a { color: var(--brand); } .post-card h3 a:hover { color: var(--accent); }
.quote-card { padding: 1.8rem 1.8rem 1.6rem; position: relative; background: #fff; }
.quote-card::after { content: '\201C'; position: absolute; right: 1.2rem; top: .2rem; font-family: var(--f-head); font-size: 4.6rem; line-height: 1; color: var(--accent-wash); pointer-events: none; font-weight: 800; }
.quote-card__stars { color: var(--highlight); font-size: .95rem; letter-spacing: .1em; }
.quote-card blockquote { font-size: 1rem; line-height: 1.65; color: var(--ink); }
.quote-card__who { font-family: var(--f-head); font-weight: 600; font-size: .9rem; }

/* ---------- SPLIT imagery: arch shapes ---------- */
.split__media { position: relative; }
.split__media > img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.split__media > img[width="800"][height="800"], .split__media > img[width="1024"][height="1024"] { aspect-ratio: 4 / 5; border-radius: var(--arch); max-width: 440px; margin-inline: auto; }
.split__media > img[width="1400"] { aspect-ratio: 16 / 10; }
.section--why-choose .split__media img { max-width: none; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.split__media::after { display: none; }

/* ---------- before / after stage ---------- */
.ba-stage { display: grid; grid-template-columns: minmax(0, 8.5fr) minmax(0, 3.5fr); gap: var(--gap); align-items: stretch; }
.ba-slider { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--brand-deep); user-select: none; -webkit-user-select: none; touch-action: pan-y; box-shadow: var(--shadow-md); aspect-ratio: 1010 / 580; }
.ba-stage .ba-slider { aspect-ratio: auto; min-height: 0; }
.ba-stage .ba-slider::before { content: ''; display: block; padding-top: 57.4%; }
.ba-slider__after { display: block; width: 100%; aspect-ratio: 1010 / 580; object-fit: cover; }
.ba-stage .ba-slider__after { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.ba-slider__before-wrap { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.ba-slider__before-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-slider__handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: #fff; transform: translateX(-1px); box-shadow: 0 0 0 1px rgba(var(--brand-rgb),.25); pointer-events: none; }
.ba-slider__handle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2438' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 24px no-repeat; border: 2px solid var(--highlight); transform: translate(-50%, -50%); box-shadow: var(--shadow-md); }
.ba-slider input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba-slider__label { position: absolute; bottom: 12px; font-family: var(--f-head); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: rgba(var(--brand-deep-rgb),.72); padding: .38rem .65rem; border-radius: 6px; pointer-events: none; }
.ba-slider__label--b { left: 12px; } .ba-slider__label--a { right: 12px; }
.ba-tabs { display: grid; grid-template-rows: 1fr 1fr auto; gap: .8rem; }
.ba-tab { display: flex; flex-direction: column; justify-content: flex-end; gap: .7rem; text-align: left; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: .6rem .6rem .8rem; cursor: pointer; font: inherit; color: var(--ink); transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.ba-tab img { width: 100%; flex: 1 1 auto; min-height: 0; aspect-ratio: auto; object-fit: cover; border-radius: 6px; }
.ba-tab > span { padding: 0 .3rem; }
.ba-tab strong { display: block; font-family: var(--f-head); font-weight: 700; font-size: .92rem; color: var(--brand); line-height: 1.25; }
.ba-tab span { font-size: .82rem; color: var(--muted); }
.ba-tab:hover { border-color: var(--accent); transform: translateY(-2px); }
.ba-tab.is-active { border-color: var(--highlight); box-shadow: 0 0 0 3px rgba(var(--highlight-rgb),.18); }
.ba-tabs__note { margin: 0; font-size: .84rem; color: var(--muted); padding: .9rem 1rem; background: #fff; border-radius: var(--radius-sm); border: 1px dashed var(--line-strong); }
.ba-grid > .ba-item { grid-column: span 6; }
.ba-item { display: flex; flex-direction: column; gap: .8rem; margin: 0; }
.ba-item figcaption { font-size: .9rem; color: var(--muted); padding: 0 .2rem; }

/* ---------- patient stories: quote + featured video ---------- */
.stories { display: grid; grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.stories__quote { position: relative; padding: 2.4rem 0 0; }
.stories__mark { position: absolute; left: -.2rem; top: -1.4rem; font-family: var(--f-head); font-weight: 800; font-size: 7rem; line-height: 1; color: var(--highlight); opacity: .35; pointer-events: none; }
.stories__quote blockquote { margin: 0 0 1.2rem; padding: 0; border: 0; background: none; font-family: var(--f-head); font-weight: 600; font-style: normal; font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.35; color: var(--brand); letter-spacing: -.015em; }
.stories__quote cite { display: block; font-style: normal; font-family: var(--f-head); font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.stories__quote .btn-row { margin-top: 1.8rem; }
.stories__videos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.stories__videos .video-item:first-child { grid-column: 1 / -1; }
.video-card { border-radius: var(--radius) var(--radius) 0 0; }
.video-card img { opacity: .92; }
.video-card__play span { width: 68px; height: 68px; background: rgba(255,255,255,.95); border: 2px solid var(--highlight); transition: transform var(--t); }
.video-card:hover .video-card__play span { transform: scale(1.08); }
.video-card__meta { border-radius: 0 0 var(--radius) var(--radius); }
.video-card__meta h3 { font-size: 1.02rem; }
.video-item { display: flex; flex-direction: column; }

/* ---------- insurance split ---------- */
.ins { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: stretch; }
.ins__text { background: var(--brand); color: var(--on-dark); border-radius: var(--radius); padding: clamp(1.8rem, 3vw, 2.6rem); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.ins__text::after { content: ''; position: absolute; right: -30%; bottom: -40%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-bright-rgb),.45), rgba(var(--accent-bright-rgb),0) 65%); }
.ins__text > * { position: relative; z-index: 1; }
.ins__text h2 { color: #fff; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.ins__text p { color: var(--on-dark-2); font-size: 1rem; }
.ins__logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--gap); }
.ins__logos > div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); min-height: 96px; display: grid; place-items: center; padding: .9rem; transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.ins__logos > div:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.ins__logos img { max-height: 58px; width: auto; max-width: 78%; object-fit: contain; }
.ins__logos .ins__more { font-family: var(--f-head); font-weight: 700; color: #fff; font-size: 1rem; text-align: center; line-height: 1.3; background: var(--grad-teal); border-color: transparent; position: relative; padding-top: 2.4rem; }
.ins__logos .ins__more::before { content: ''; position: absolute; top: .8rem; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.ins__logos .ins__more small { display: block; font-weight: 500; color: var(--on-accent-soft); font-size: .78rem; margin-top: .2rem; }
.insurance-logos { gap: 1.5rem 2.5rem; padding: 1.6rem 2rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }

/* ---------- OFFICE CARDS (image-led) + map ---------- */
.offices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); list-style: none; margin: 0; padding: 0; }
.office-card { position: relative; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.office-card:hover, .office-card.is-active { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.office-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--brand-deep); }
.office-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.office-card:hover .office-card__media img { transform: scale(1.05); }
.office-card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--brand-deep-rgb),.05) 0%, rgba(var(--brand-deep-rgb),.15) 35%, rgba(var(--brand-deep-rgb),.92) 100%); }
.office-card__title { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.1rem; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.office-card__title .office-card__status { position: absolute; right: 0; bottom: calc(100% + 4.2rem); }
.office-card__title h3 { color: #fff; margin: 0; font-size: 1.4rem; }
.office-card__title small { display: block; color: var(--on-dark-2); font-family: var(--f-body); font-size: .82rem; font-weight: 400; margin-top: .2rem; }
.office-card__status { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--f-head); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(var(--brand-deep-rgb),.65); border: 1px solid rgba(255,255,255,.2); padding: .4rem .65rem; border-radius: 6px; white-space: nowrap; backdrop-filter: blur(6px); }
.office-card__status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--on-dark-3); }
.office-card__status.is-open::before { background: var(--open); box-shadow: 0 0 0 3px rgba(var(--open-rgb),.25); }
.office-card__body { padding: 1.25rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: .9rem; flex: 1 1 auto; }
.office-card__row { display: grid; grid-template-columns: 22px 1fr; gap: .7rem; align-items: start; font-size: .94rem; color: var(--ink); }
.office-card__row svg { width: 18px; height: 18px; stroke: var(--accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.office-card__row address { font-style: normal; line-height: 1.45; }
.office-card__row a { color: var(--brand); font-weight: 600; font-family: var(--f-head); font-size: .95rem; }
.office-card__row a:hover { color: var(--accent); }
.office-card__hours { color: var(--muted); font-size: .9rem; line-height: 1.5; }
.office-card__hours b { color: var(--ink); font-weight: 600; }
.office-card__actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: auto; padding-top: .3rem; }
.office-card__actions .btn { padding: .68rem .5rem; font-size: .82rem; width: 100%; }
.office-card__actions .btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.office-map-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: stretch; }
.office-map { position: relative; background: var(--grad-brand); border-radius: var(--radius); border: 1px solid rgba(255,255,255,.12); overflow: hidden; min-height: 420px; display: flex; flex-direction: column; }
.office-map::before { content: ''; position: absolute; inset: 0; background-image: var(--dots); background-size: 22px 22px; opacity: .25; pointer-events: none; }
.office-map svg { width: 100%; height: auto; flex: 1 1 auto; display: block; position: relative; }
.office-map__coast { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.3); stroke-width: 1.2; }
.office-map__road { stroke: rgba(var(--highlight-rgb),.4); stroke-width: 1; fill: none; stroke-dasharray: 3 5; }
.office-map__pin { cursor: pointer; }
.office-map__pin circle.ring { fill: none; stroke: var(--highlight); stroke-width: 1; opacity: .55; transform-origin: center; transform-box: fill-box; animation: ping 2.6s ease-out infinite; }
.office-map__pin circle.dot { fill: var(--highlight); stroke: var(--brand); stroke-width: 2; transition: r var(--t); }
.office-map__pin text { font-family: var(--f-head); font-size: 11px; letter-spacing: .08em; fill: var(--on-dark); text-transform: uppercase; font-weight: 600; }
.office-map__pin:hover circle.dot, .office-map__pin.is-active circle.dot { fill: #fff; }
.office-map__pin:hover text, .office-map__pin.is-active text { fill: var(--highlight-light); }
@keyframes ping { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(2.6); opacity: 0; } }
.office-map__legend { position: absolute; left: 1.1rem; top: 1.1rem; font-family: var(--f-head); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--highlight-light); display: inline-flex; align-items: center; gap: .5rem; z-index: 1; }
.office-map__legend::before { content: ''; width: 18px; height: 2px; background: var(--highlight); }
.office-map__note { padding: 1rem 1.2rem 1.15rem; border-top: 1px solid rgba(255,255,255,.12); color: var(--on-dark-2); font-size: .88rem; line-height: 1.5; position: relative; }
.office-map__note strong { color: #fff; font-family: var(--f-head); font-weight: 600; display: block; margin-bottom: .15rem; }
.office-map-layout .offices { grid-template-columns: 1fr 1fr; }
/* office page: detail block */
.office-detail { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: stretch; }
.office-detail__photo { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); min-height: 340px; background: var(--brand-deep); }
.office-detail__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.office-detail__photo .hero__tag { position: absolute; left: 18px; bottom: 18px; z-index: 2; display: inline-flex; align-items: center; gap: .55rem; background: rgba(var(--brand-deep-rgb),.78); color: var(--on-dark); font-family: var(--f-head); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; padding: .55rem .85rem; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; }
.office-detail__photo .hero__tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 0 3px rgba(var(--accent-bright-rgb),.25); }
.office-detail__card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.7rem; display: flex; flex-direction: column; gap: 1rem; box-shadow: var(--shadow-sm); }
.office-detail__card h3 { margin: 0; font-size: 1.3rem; }
.office-detail__card .office-card__actions { margin-top: .4rem; }
.hours { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.hours li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.hours li b { font-weight: 500; color: var(--ink); } .hours li span { color: var(--muted); font-variant-numeric: tabular-nums; }
.hours li.is-today b { color: var(--accent); font-weight: 700; }
.loc-card { padding: 0; }
.loc-card > h3 { padding: 1.2rem 1.4rem 0; }
.loc-card address, .loc-card__phone, .loc-card__hours, .loc-card .card__link { margin-left: 1.4rem; margin-right: 1.4rem; }
.loc-card .card__link { margin-bottom: 1.3rem; }

/* ---------- INNER PAGE HEAD: photography-led ---------- */
.pagehead { background: var(--grad-brand); padding: clamp(2.6rem, 5vw, 4.2rem) 0; position: relative; overflow: hidden; }
.pagehead h1 { color: #fff; font-size: clamp(2.1rem, 4.2vw, 3.4rem); font-weight: 800; max-width: 22ch; text-wrap: balance; }
.pagehead p { color: var(--on-dark); font-size: 1.12rem; max-width: 58ch; }
.pagehead--photo { min-height: clamp(420px, 58vh, 620px); display: flex; align-items: flex-end; padding: clamp(5rem, 10vw, 8rem) 0 clamp(2.6rem, 4vw, 3.6rem); }
.pagehead__bg { position: absolute; inset: 0; z-index: 0; }
.pagehead__bg img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; object-position: center; will-change: transform; }
.pagehead__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--brand-deep-rgb),.92) 0%, rgba(var(--brand-deep-rgb),.7) 45%, rgba(var(--brand-deep-rgb),.25) 100%), linear-gradient(0deg, rgba(var(--brand-deep-rgb),.8) 0%, rgba(var(--brand-deep-rgb),0) 60%); }
.pagehead--photo .wrap { position: relative; z-index: 1; }
.pagehead__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
.pagehead__shape { position: absolute; z-index: 1; right: -6vw; bottom: -14vw; width: 34vw; height: 34vw; max-width: 480px; max-height: 480px; border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%; background: radial-gradient(circle at 30% 30%, rgba(var(--accent-bright-rgb),.5), rgba(var(--accent-bright-rgb),0) 70%); pointer-events: none; }
.breadcrumb { font-family: var(--f-head); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 1.2rem; }
.breadcrumb a { color: var(--on-dark-2); } .breadcrumb a:hover { color: var(--highlight-light); }
/* blog post head: blurred image bed + framed social image */
.pagehead--post .pagehead__bg img { filter: blur(22px) saturate(1.1) brightness(.75); transform: scale(1.15); }
.pagehead--post .pagehead__bg::after { background: linear-gradient(180deg, rgba(var(--brand-deep-rgb),.55) 0%, rgba(var(--brand-deep-rgb),.88) 100%); }
.pagehead--post .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.pagehead--post .breadcrumb, .pagehead--post h1, .pagehead--post .pagehead__actions, .pagehead--post p { grid-column: 1; }
.pagehead--post h1 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); max-width: none; }
.pagehead--post .wrap > img { grid-column: 2; grid-row: 1 / span 5; width: 100% !important; max-width: 480px !important; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius) !important; margin: 0 0 0 auto !important; box-shadow: var(--shadow-lg); border: 6px solid rgba(255,255,255,.12); }

/* ---------- SERVICE HERO: navy panel + arch window ---------- */
.svc-hero { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); background: var(--grad-brand); color: #fff; overflow: hidden; min-height: clamp(560px, 76vh, 760px); }
.svc-hero::before { content: ''; position: absolute; inset: 0; background-image: var(--dots); background-size: 26px 26px; opacity: .3; mask-image: radial-gradient(ellipse at 20% 90%, #000 0%, transparent 55%); -webkit-mask-image: radial-gradient(ellipse at 20% 90%, #000 0%, transparent 55%); pointer-events: none; }
.svc-hero::after { content: ''; position: absolute; width: 60vw; height: 60vw; max-width: 880px; max-height: 880px; left: -22vw; top: -36vw; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-bright-rgb),.28) 0%, rgba(var(--accent-bright-rgb),0) 62%); pointer-events: none; }
.svc-hero__panel { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 4vw, 4rem) clamp(3rem, 6vw, 5.5rem) max(1.5rem, calc((100vw - 1200px) / 2)); }
.svc-hero__panel .breadcrumb { margin-bottom: 1.4rem; }
.svc-hero h1 { color: #fff; margin-bottom: 1rem; max-width: 16ch; text-wrap: balance; }
.svc-hero__lede { color: var(--on-dark); font-size: clamp(1.05rem, 1.4vw, 1.25rem); max-width: 54ch; line-height: 1.6; margin-bottom: 1.8rem; }
.svc-hero__chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2.2rem; }
.svc-hero__chips .chip { background: rgba(255,255,255,.08); color: var(--on-dark); border: 1px solid rgba(255,255,255,.14); box-shadow: none; font-weight: 500; font-size: .82rem; backdrop-filter: blur(6px); }
.svc-hero__media { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem) 0; }
.svc-hero__arch { position: relative; width: min(100%, 460px); aspect-ratio: 4 / 5.3; border-radius: var(--arch); border-bottom-left-radius: 0; border-bottom-right-radius: 0; overflow: hidden; box-shadow: 0 -20px 60px rgba(0,0,0,.35); }
.svc-hero__arch img { width: 100%; height: 100%; object-fit: cover; }
.svc-hero__arch::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); pointer-events: none; }
.svc-hero__ring { position: absolute; inset: -14px -14px 0; border-radius: var(--arch); border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1.5px solid rgba(var(--highlight-rgb),.45); border-bottom: 0; pointer-events: none; }
.svc-hero__tag { position: absolute; left: -22px; bottom: 15%; z-index: 2; }
.svc-hero__media .chip { position: absolute; }

/* ---------- PROCESS TIMELINE (animated) ---------- */
.section--brand:has(.timeline)::before { display: none; }
.timeline-wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.timeline { --tl: 0%; list-style: none; margin: 0; padding: 0 0 0 2.2rem; position: relative; counter-reset: none; }
.timeline::before { content: ''; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; background: rgba(255,255,255,.14); border-radius: 2px; }
.timeline::after { content: ''; position: absolute; left: 11px; top: 14px; width: 2px; height: var(--tl); max-height: calc(100% - 28px); background: linear-gradient(180deg, var(--highlight-light), var(--accent-bright)); border-radius: 2px; box-shadow: 0 0 12px rgba(var(--accent-bright-rgb),.5); transition: height .25s linear; }
.timeline__step { position: relative; padding: 0 0 2.2rem 1.6rem; margin: 0; }
.timeline__step:last-child { padding-bottom: 0; }
.timeline__node { position: absolute; left: -2.2rem; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); border: 2px solid rgba(255,255,255,.35); box-shadow: 0 0 0 4px var(--brand); transition: background var(--t), border-color var(--t), box-shadow var(--t); z-index: 1; }
.timeline__step.is-lit .timeline__node { background: var(--highlight); border-color: var(--highlight-light); box-shadow: 0 0 0 4px var(--brand), 0 0 0 7px rgba(var(--highlight-rgb),.3); }
.timeline__icon { width: 54px; height: 54px; border-radius: 16px; margin-bottom: .9rem; background-image: var(--ico), linear-gradient(135deg, rgba(var(--accent-bright-rgb),.4), rgba(var(--accent-bright-rgb),.08)); background-size: 26px 26px, cover; background-position: center; background-repeat: no-repeat; border: 1px solid rgba(255,255,255,.16); }
.timeline__step h3 { color: #fff; font-size: 1.22rem; margin-bottom: .5rem; }
.timeline__step p { color: var(--on-dark-2); font-size: .98rem; }
.timeline__step p:last-child { margin-bottom: 0; }
.timeline__step a { color: var(--highlight-light); }
.timeline__media { position: sticky; top: 108px; margin: 0; }
.timeline__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--arch); box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.14); }
.timeline__media figcaption { margin-top: 1rem; font-size: .9rem; color: var(--on-dark-2); text-align: center; }
.timeline__media .chip { position: absolute; left: -10px; bottom: 18%; }
.step__tick, .step__num { display: none; }
/* legacy process grid fallback */
.process-grid .step { position: relative; background: #fff; border: 0; border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow-md); }
.process-grid .step.card--brand { background: #fff; }
.process-grid .step h3 { color: var(--brand); font-size: 1.15rem; }
.process-grid .step p { color: var(--muted); font-size: .95rem; }

/* ---------- proof band (services) ---------- */
.proof { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.proof__media { position: relative; padding: 0 2.5rem 2.5rem 0; }
.proof__media img:first-child { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.proof__media img:nth-child(2) { position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-sm); border: 6px solid #fff; box-shadow: var(--shadow-lg); }
.proof__media .proof-chip, .proof__media .chip { position: absolute; left: -10px; top: 24px; }
.proof-chip { display: inline-flex; align-items: center; gap: .7rem; background: #fff; border-radius: 999px; padding: .6rem 1rem .6rem .6rem; box-shadow: var(--shadow-md); font-family: var(--f-head); font-weight: 600; font-size: .84rem; color: var(--brand); }
.proof-chip i { display: inline-block; width: 34px; height: 34px; border-radius: 50%; background-image: var(--ico), var(--grad-teal); background-size: 18px 18px, cover; background-position: center; background-repeat: no-repeat; flex: 0 0 auto; }
.proof-chip--ct i { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M12 3.5v3M12 17.5v3M3.5 12h3M17.5 12h3'/%3E%3C/svg%3E"); }
.proof-chip--lab i { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6l-5 9a2 2 0 0 0 1.7 3h10.6a2 2 0 0 0 1.7-3l-5-9V3'/%3E%3C/svg%3E"); }
.proof-chip--sed i { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17V9a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8M2 17h20M6 7V5h5v2'/%3E%3C/svg%3E"); }
.proof__chips { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.4rem 0 1.6rem; }
.proof__quote { background: #fff; border-radius: var(--radius); padding: 1.3rem 1.4rem; box-shadow: var(--shadow-sm); border-left: 4px solid var(--highlight); }
.proof__quote blockquote { margin: 0 0 .5rem; padding: 0; border: 0; background: none; font-size: 1.02rem; font-style: italic; color: var(--ink); }
.proof__quote cite { font-style: normal; font-family: var(--f-head); font-weight: 600; font-size: .86rem; color: var(--accent); }

/* ---------- FAQ with photography ---------- */
.faq-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.faq-layout__media { position: sticky; top: 110px; }
.faq-layout__media img { width: 100%; aspect-ratio: 4 / 5; max-height: 520px; object-fit: cover; border-radius: var(--arch); box-shadow: var(--shadow-md); }
.faq-layout__media .proof-chip, .faq-layout__media .chip { position: absolute; left: -14px; bottom: 28px; }
.faq-layout .faq { margin: 0; max-width: none; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.faq details[open] { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.faq summary { font-family: var(--f-head); font-weight: 600; font-size: 1rem; color: var(--brand); padding: 1.1rem 3rem 1.1rem 1.3rem; }
.faq summary::after { width: 14px; height: 14px; border: 0; background: linear-gradient(var(--accent), var(--accent)) center / 100% 2px no-repeat, linear-gradient(var(--accent), var(--accent)) center / 2px 100% no-repeat; transform: translateY(-50%); transition: transform var(--t); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__body { color: var(--muted); padding: 0 1.3rem 1.2rem; }

/* ---------- galleries ---------- */
.about-gallery__item img, .practice-gallery__item img { aspect-ratio: 4 / 3; }
.about-gallery__item figcaption, .practice-gallery__item figcaption, .ba-grid__item figcaption { background: #fff; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }

/* ---------- CTA: large type over photo ---------- */
.cta-photo { position: relative; overflow: hidden; background: var(--brand-deep); color: #fff; text-align: center; padding: clamp(5rem, 11vw, 9rem) 0; isolation: isolate; }
.cta-photo__bg { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; object-position: center 30%; z-index: 0; will-change: transform; }
.cta-photo::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(var(--brand-deep-rgb),.84) 0%, rgba(var(--brand-rgb),.78) 50%, rgba(var(--brand-deep-rgb),.9) 100%); }
.cta-photo::after { content: ''; position: absolute; inset: 0; z-index: 1; background-image: var(--dots); background-size: 26px 26px; opacity: .25; pointer-events: none; }
.cta-photo .wrap { position: relative; z-index: 2; max-width: 860px; }
.cta-photo h2 { color: #fff; font-size: clamp(2rem, 4.2vw, 3.4rem); margin-bottom: 1rem; text-wrap: balance; }
.cta-photo p { color: var(--on-dark); font-size: clamp(1.05rem, 1.4vw, 1.2rem); max-width: 60ch; margin: 0 auto 2rem; }
.cta-photo .btn-row { justify-content: center; }
.cta-band { background: var(--grad-brand); }

/* ---------- blog post: reading column + sticky rail ---------- */
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.post-layout .prose { margin-inline: auto; }
.post-rail { position: sticky; top: 104px; display: grid; gap: 1.2rem; }
.post-rail__card { background: var(--grad-brand); color: var(--on-dark); border-radius: var(--radius); padding: 1.5rem 1.5rem 1.4rem; position: relative; overflow: hidden; }
.post-rail__card::after { content: ''; position: absolute; right: -30%; bottom: -40%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-bright-rgb),.45), rgba(var(--accent-bright-rgb),0) 65%); }
.post-rail__card > * { position: relative; z-index: 1; }
.post-rail__card h3 { color: #fff; font-size: 1.15rem; margin-bottom: .4rem; }
.post-rail__card p { font-size: .92rem; color: var(--on-dark-2); margin-bottom: 1rem; }
.post-rail__card .btn { width: 100%; }
.post-rail__offices { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; }
.post-rail__offices h4 { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .6rem; }
.post-rail__offices ul { list-style: none; margin: 0; padding: 0; }
.post-rail__offices li { display: flex; justify-content: space-between; gap: .8rem; padding: .5rem 0; border-top: 1px solid var(--line); font-size: .9rem; }
.post-rail__offices li strong { font-family: var(--f-head); font-weight: 600; color: var(--brand); }
.post-rail__offices li a { color: var(--muted); white-space: nowrap; }
.post-rail__offices li a:hover { color: var(--accent); }
.post-rail__back { font-family: var(--f-head); font-weight: 600; font-size: .88rem; color: var(--accent); }
@media (min-width: 1100px) { .post-layout { grid-template-columns: minmax(0, 1fr) 320px; } .post-layout .prose { margin-inline: 0; max-width: 760px; } }

/* ---------- forms, tables, prose ---------- */
.form-card { box-shadow: var(--shadow-sm); }
.field label { font-family: var(--f-head); font-weight: 600; font-size: .84rem; }
.field input, .field select, .field textarea { border-radius: var(--radius-sm); border-color: var(--line-strong); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.14); }
.table-wrap { border-radius: var(--radius); overflow: hidden; border: 0; box-shadow: var(--shadow-sm); background: #fff; }
table { min-width: 0; }
th { font-family: var(--f-head); font-weight: 600; font-size: .86rem; background: var(--accent-wash); color: var(--brand); border-bottom: 0; }
td { border-bottom: 1px solid var(--cloud-2); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--cloud); }
.fleet-whatsnew { border: 0 !important; background: var(--accent-wash) !important; border-radius: var(--radius) !important; padding: 1.2rem 1.4rem !important; }
.fleet-whatsnew-month { font-family: var(--f-head); font-weight: 700; color: var(--brand); }
.prose img { border-radius: var(--radius); border: 1px solid var(--line); }
.prose h2 { font-size: clamp(1.5rem, 2.4vw, 1.95rem); }
.prose h2::before { content: ''; display: block; width: 36px; height: 3px; background: var(--highlight); border-radius: 3px; margin-bottom: .8rem; }
.note { border-left: 3px solid var(--accent); background: var(--accent-wash); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.pill { font-family: var(--f-head); font-weight: 600; font-size: .8rem; }
.anchor-nav a { font-family: var(--f-head); font-weight: 600; font-size: .82rem; }

/* ---------- footer ---------- */
.site-footer { background: var(--brand-deep); position: relative; padding-top: clamp(3rem, 6vw, 4.5rem); }
.site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--accent) 0%, var(--accent-bright) 40%, var(--highlight) 100%); }
.site-footer h4 { font-family: var(--f-head); font-weight: 700; font-size: .92rem; letter-spacing: 0; text-transform: none; color: var(--highlight-light); }
.footer__brand { text-align: center; }
.footer__brand img { width: 220px; margin-left: auto; margin-right: auto; }
.footer__brand p { font-size: .92rem; color: var(--on-dark-3); margin-left: auto; margin-right: auto; max-width: 34ch; }
.footer__social { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .7rem; margin: 1.2rem 0 0; line-height: 0; }
.footer__social a { flex: 0 0 36px; width: 36px; height: 36px; margin: 0; padding: 0; border-radius: 50%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; transition: background var(--t), transform var(--t), border-color var(--t); }
.footer__social a:hover { background: var(--highlight); border-color: var(--highlight); color: var(--brand-deep); transform: translateY(-2px); }
.footer__social svg { width: 16px; height: 16px; fill: currentColor; display: block; margin: 0; }
.footer__social svg path[stroke] { stroke: currentColor; fill: none; }
.footer__social a:hover svg { fill: currentColor; }
.footer__grid { border-bottom: 1px solid rgba(255,255,255,.1); }
.footer__legal { border-top: 0; }
.footer__bar > span { font-size: .84rem; }
.footer-shak img { width: 34px; height: 34px; }

/* ---------- scroll reveals (respect reduced motion) ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.rv-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; } .rv-d2 { transition-delay: .16s; } .rv-d3 { transition-delay: .24s; } .rv-d4 { transition-delay: .32s; }

/* ---------- a11y toggle + booking modal ---------- */
.a11y-toggle { background: var(--brand); border: 1px solid rgba(255,255,255,.2); }
.a11y-toggle:hover { background: var(--accent); }
.a11y-panel { border-radius: var(--radius); }
.a11y-panel button { font-family: var(--f-body); border-radius: var(--radius-sm); }
.a11y-panel button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); }
.bk-card { border-top: 3px solid var(--highlight); border-radius: var(--radius); }
.bk-card__title { font-family: var(--f-head); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .hero__inner { grid-template-columns: minmax(0, 7fr) minmax(280px, 4.6fr); }
}
@media (max-width: 1080px) {
  .brand img { width: 190px; }
  .nav__list > li > a { font-size: .8rem; }
}
@media (max-width: 980px) {
  .hero { align-items: flex-end; min-height: 0; }
  .hero__inner { grid-template-columns: 1fr; padding-top: clamp(6rem, 18vh, 9rem); gap: 1.8rem; }
  .hero__book { max-width: 560px; }
  .svc-grid:has(> :nth-child(4):last-child) > *, .services-grid:has(> :nth-child(4):last-child) > *, .related-grid:has(> :nth-child(4):last-child) > *, .condition-grid:has(> :nth-child(4):last-child) > * { grid-column: span 6; }
  .faq-layout, .proof, .duo, .tech__grid, .stories, .ins, .ba-stage, .timeline-wrap, .office-map-layout, .office-detail { grid-template-columns: 1fr; }
  .duo__media, .duo--reverse .duo__media { order: 0; padding: 0 14% 16% 0; max-width: 520px; margin-inline: auto; }
  .duo--reverse .duo__inset { left: auto; right: 0; }
  .tech__media { max-width: 560px; margin-inline: auto; padding: 0 0 20% 0; }
  .tech__inset { right: 0; }
  .faq-layout__media { position: relative; top: auto; }
  .faq-layout__media img { aspect-ratio: 16 / 9; border-radius: var(--radius); max-height: none; }
  .stories__quote { padding-top: 1.6rem; }
  .stories__videos { order: -1; }
  .ba-tabs { flex-direction: row; }
  .ba-tab { flex: 1 1 0; }
  .ba-tabs__note { flex: 1 1 100%; margin-top: 0; }
  .timeline__media { position: relative; top: auto; max-width: 420px; margin-inline: auto; }
  .svc-hero { grid-template-columns: 1fr; min-height: 0; }
  .svc-hero__panel { padding: 2.6rem 1.5rem 2.2rem; }
  .svc-hero__media { padding: 0 1.5rem; }
  .svc-hero__arch { width: min(100%, 520px); aspect-ratio: 4 / 3; }
  .svc-hero__ring { display: none; }
  .pagehead--post .wrap { grid-template-columns: 1fr; }
  .pagehead--post .wrap > img { grid-column: 1; grid-row: auto; max-width: 420px !important; margin: 0 auto !important; }
  .rail-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .nav { background: var(--brand); }
  .nav__sub .nav__sub-overview { display: block; }
  .nav__sub a { color: var(--on-dark-2); }
  .nav__sub .nav__sub-overview a { color: var(--highlight-light); font-weight: 600; }
  .nav__social { display: inline-flex; margin-top: 1.2rem; justify-content: center; }
  .nav__social a { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.15); }
  .office-map { min-height: 320px; }
  .section-head--row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 900px) {
  .ba-grid > .ba-item { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .topbar__inner { display: flex; justify-content: space-between; gap: .6rem; padding: .4rem 0; }
  .topbar__inner > .topbar__links, .topbar__inner > .topbar__social { display: none; }
  .topbar__inner .lang-switch { margin: 0; padding: 0; border: 0; }
  .topbar__inner > div { white-space: nowrap; font-size: .8rem; }
  .hero__trust { grid-template-columns: repeat(2, 1fr); gap: 1rem 1.25rem; }
  .offices, .office-map-layout .offices { grid-template-columns: 1fr; }
  .topbar__inner { justify-content: space-between; }
  .topbar__social { display: none; }
  .office-card__actions { grid-template-columns: 1fr 1fr 1fr; }
  .stories__videos { grid-template-columns: 1fr; }
  .ins__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ba-tabs { flex-direction: column; }
  .footer__brand p { max-width: none; }
}
@media (max-width: 600px) {
  .hero { min-height: 0; }
  .hero__inner { padding-top: 6rem; padding-bottom: 1.5rem; }
  .hero h1 { font-size: 2.1rem; }
  .hero__sub { font-size: 1rem; }
  .hero__book { padding: 1.2rem 1.1rem 1rem; }
  .hero__book li { grid-template-columns: minmax(0, 1fr) auto; }
  .svc-grid, .video-grid, .doctors-grid, .related-grid, .services-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .9rem; padding: .25rem 1.1rem 1rem; margin: 0 -1.1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .svc-grid::-webkit-scrollbar, .video-grid::-webkit-scrollbar, .doctors-grid::-webkit-scrollbar, .related-grid::-webkit-scrollbar, .services-grid::-webkit-scrollbar { display: none; }
  .svc-grid > *, .video-grid > *, .doctors-grid > *, .related-grid > *, .services-grid > * { flex: 0 0 84%; scroll-snap-align: center; }
  .stories__videos { display: grid; overflow: visible; margin: 0; padding: 0; }
  .stories__videos > * { flex: none; }
  .rail-card { flex-basis: 76vw; }
  .duo__media, .duo--reverse .duo__media { padding: 0 10% 14% 0; }
  .duo__badge { display: none; }
  .tech__media .chip { display: none; }
  .office-card__actions { grid-template-columns: 1fr; }
  .office-card__actions .btn { width: 100%; }
  .btn { width: auto; }
  .btn-row .btn { width: 100%; }
  .ba-slider__handle::after { width: 36px; height: 36px; }
  .office-map { min-height: 260px; }
  .footer__bar { justify-content: center; text-align: center; }
  .svc-hero__chips .chip { white-space: normal; }
  .svc-hero__tag { display: none; }
  .svc-hero__arch { aspect-ratio: 4 / 3.4; }
  .pagehead--photo { min-height: 0; padding-top: 4rem; }
  .cta-photo { padding: 4rem 0; }
  .timeline__media .chip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .tech__sweep, .hero__cue::after, .office-map__pin circle.ring { animation: none; }
  .office-map__pin circle.ring { opacity: .35; }
  .card:hover, .loc-card:hover, .post-card:hover, .office-card:hover, .rail-card:hover, .btn:hover, .doc-card:hover .doc-card__photo img { transform: none; }
  .card:hover .card__media img, .office-card:hover .office-card__media img, .rail-card:hover img { transform: none; }
  .timeline::after { transition: none; }
}
body.a11y-no-motion .rv { opacity: 1; transform: none; transition: none; }
body.a11y-no-motion .tech__sweep { animation: none; }

/* r1107w1: header backdrop-filter turns the fixed mobile drawer into a header-relative box (drawer only ~120px tall).
   Drop the blur at the drawer breakpoint so the drawer is full height.
   r1107w: the drawer (.nav fixed, z 99) then sits over the hamburger, so lift .nav-toggle above it to keep it tappable for close (same as ADHP 9138435). */
@media (max-width: 980px) { .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; } .nav-toggle { position: relative; z-index: 101; } }

/* r1107-rail (fdp-deploy): rail gutter tracks the section width (not 100vw, which includes the desktop
   scrollbar), so card 1 sits flush with the .wrap heading; when every card fits the track centres and the
   arrows hide; arrows disable at the ends. core.js toggles .is-fit / .is-start / .is-end. */
.rail { padding-inline: max(var(--rail-gutter, 1.5rem), calc((100% - var(--wrap, 1200px)) / 2)); scroll-padding-inline: max(var(--rail-gutter, 1.5rem), calc((100% - var(--wrap, 1200px)) / 2)); margin-inline: 0; width: auto; max-width: none; transform: none; }
.rail > .rail-card:first-child { margin-left: 0; }
.rail.is-fit { justify-content: center; mask-image: none; -webkit-mask-image: none; }
.rail.is-start:not(.is-end) { mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 140px), rgba(0,0,0,0) 100%); -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 140px), rgba(0,0,0,0) 100%); }
.rail:not(.is-start):not(.is-end) { mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 64px, #000 calc(100% - 140px), rgba(0,0,0,0) 100%); -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 64px, #000 calc(100% - 140px), rgba(0,0,0,0) 100%); }
.rail.is-end:not(.is-start) { mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 64px); -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 64px); }
.rail-nav button:disabled { opacity: .35; cursor: default; pointer-events: none; transform: none; }
[data-rail].rail-fits .rail-nav { display: none; }
@media (max-width: 980px) { .rail-head { flex-direction: row; align-items: flex-end; } }
@media (max-width: 600px) { .rail-head { flex-direction: column; align-items: flex-start; } .rail-nav button { width: 44px; height: 44px; } }

/* r1107fix (Shak 2026-11-07, three screenshot defects):
   1. dropdowns: the header's gradient bottom rule (::after) painted over the open submenu (tree order, same
      stacking context). Submenus now stack above all header decoration; the rule never takes pointer events.
   2. technology story: the photo pair was skewed (main pushed right by a 14% pad, inset hanging 6% outside the
      column and clipped, chip floating outside the photo, media stretched to the text height = dead space) and a
      bright scan line swept across the photo. Pair now fills its column exactly (balanced overlap, nothing outside),
      is vertically centred with the text, the chip sits inside the main photo's corner, the sweep line is off.
   3. every chip/badge that hung outside its photo corner (duo, proof, faq) is anchored inside the photo. */
.site-header::after { z-index: 0; pointer-events: none; }
.nav__list > li > .nav__sub { z-index: 5; }
.tech__sweep { display: none; }
.tech__media { padding: 0 0 18% 0; align-self: center; display: block; }
.tech__main { width: 82%; }
.tech__inset { right: 0; bottom: 0; width: 46%; }
.tech__media .chip { left: 1rem; top: 1rem; }
.duo__badge { left: 1rem; top: 46%; }
.duo--reverse .duo__badge { left: auto; right: 1rem; }
.proof__media .proof-chip, .proof__media .chip { left: 1rem; top: 1rem; }
.faq-layout__media .proof-chip, .faq-layout__media .chip { left: 1rem; bottom: 1rem; }
@media (max-width: 980px) { .tech__media { max-width: 560px; margin-inline: auto; padding: 0 0 18% 0; } }


/* ==========================================================================
   r1107lang: LANGUAGE SWITCH (Shak 2026-11-07: Spanish available naturally on every site).
   Additive; the legacy ".lang-switch" (ADHP topbar) above keeps working unchanged.
   Modes (registry websites.<domain>.lang_mode):
     prominent  bilingual sites (familydentalplus, lennoxdental, apollolg): EN/ES segmented control in the
                header AND the mobile drawer on EVERY page, every page has a twin.
     utility    every other site: small "ES / Español" link in header or drawer (and footer), shown ONLY
                where the twin page exists; otherwise the translate-on-request fallback (never a dead link).
   Markup (server-rendered, so nothing shifts when core.js runs):
     <nav class="lang-switch lang-switch--prominent" data-lang-switch="prominent" aria-label="Language / Idioma">
       <a href="/" hreflang="en" lang="en" aria-current="page">EN</a><span aria-hidden="true">/</span>
       <a href="/es/" hreflang="es" lang="es">ES</a></nav>
   Drawer copy: add "lang-switch--drawer" and put it inside .nav. Footer copy: "lang-switch--footer".
   Light ground: add "lang-switch--on-light". Header copy hidden on phones: "lang-switch--desktop".
   ========================================================================== */
.lang-switch { --ls-h: 2rem; }
.lang-switch a { text-decoration: none; }
.lang-switch a[aria-current="page"] { color: var(--highlight-light); }
.lang-switch a:focus-visible { outline: 2px solid var(--highlight); outline-offset: 2px; border-radius: 6px; }
.lang-switch[hidden], .lang-switch a[hidden], .lang-switch a[hidden] + span, .lang-switch span:has(+ a[hidden]) { display: none !important; }
/* prominent: segmented pill, both languages always visible, fixed width (no shift) */
.lang-switch--prominent { gap: 0; padding: 2px; min-height: var(--ls-h); min-width: 5.9rem; justify-content: center; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; line-height: 1; }
.lang-switch--prominent > span { display: none; }
.lang-switch--prominent a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.7rem; height: calc(var(--ls-h) - 6px); padding: 0 .7rem; border-radius: 999px; color: var(--on-dark); transition: background var(--t), color var(--t); }
.lang-switch--prominent a:hover { background: rgba(255,255,255,.12); color: #fff; }
.lang-switch--prominent a[aria-current="page"], .lang-switch--prominent a[aria-current="true"] { background: var(--highlight); color: var(--brand-deep); }
/* utility: quiet text link with a globe */
.lang-switch--utility { gap: .25rem; font-size: .74rem; font-weight: 600; letter-spacing: .06em; }
.lang-switch--utility a { color: inherit; padding: .3rem .15rem; opacity: .85; transition: opacity var(--t), color var(--t); }
.lang-switch--utility a:hover { opacity: 1; color: var(--highlight-light); }
.lang-switch--utility a[aria-current="page"], .lang-switch--utility a[aria-current="true"] { opacity: 1; }
.lang-switch__globe { width: 13px; height: 13px; flex: 0 0 13px; fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .8; }
.lang-switch__fallback { font-style: normal; white-space: nowrap; }
/* light grounds (white header / footer) */
.lang-switch--on-light.lang-switch--prominent { border-color: var(--line-strong); }
.lang-switch--on-light a { color: var(--ink); }
.lang-switch--on-light a:hover { color: var(--accent); background: var(--accent-wash); }
.lang-switch--on-light a[aria-current="page"], .lang-switch--on-light a[aria-current="true"] { color: var(--accent); }
.lang-switch--on-light.lang-switch--prominent a[aria-current="page"], .lang-switch--on-light.lang-switch--prominent a[aria-current="true"] { background: var(--accent); color: #fff; }
/* placement */
.lang-switch--drawer { display: none; }
.lang-switch--footer { display: flex; justify-content: center; margin: 1rem auto 0; }
.site-header .lang-switch--prominent:not(.lang-switch--drawer) { margin-inline: .75rem; }
@media (max-width: 980px) {
  .lang-switch--drawer { display: flex; justify-content: center; margin: 1.2rem auto 0; --ls-h: 2.9rem; font-size: .9rem; }
  .lang-switch--drawer a { min-width: 44px; min-height: 44px; }
  .lang-switch--desktop { display: none; }
  .site-header .lang-switch--prominent:not(.lang-switch--drawer) { --ls-h: 1.9rem; min-width: 5.4rem; margin-inline: .4rem; }
}
@media (prefers-reduced-motion: reduce) { .lang-switch a { transition: none; } }

/* r1107dd (dropdown hairline): the header's gradient bottom rule (.site-header::after) must never cross an open
   submenu. Rule sits at z-index 0 with no pointer events; every submenu panel stacks above it (z-index 50).
   Check: tools/qa_rules.py (dropdown-hairline) + tools/dd_probe.py (open-submenu screenshot + hit-test). */
.site-header::after { z-index: 0; pointer-events: none; }
.site-header .nav__list > li { z-index: auto; }
.site-header .nav__sub { z-index: 50; }