/* ==========================================================================
   STYLE.CSS — layout, components & page structure
   Colours come from color.css, type scale from font.css, keyframes from
   animation.css. This file only defines shape, spacing and component
   structure so it stays portable if the palette or type changes.
   ========================================================================== */

*  { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  color: var(--on-surface);
  background: var(--surface);
  overflow-x: hidden;
}

:root {
  --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-xl: 28px; --r-full: 999px;
  --maxw: 1180px;
}

svg.ic {
  display: inline-block; width: 1em; height: 1em; font-size: 24px;
  vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; flex: none;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 84px 0; }
/* For a page whose very first block is a plain .section (no .hero/.pagehead
   of its own) — gives the same clearance under the fixed floating nav.
   Compound selector so it reliably beats .section's own padding-top
   regardless of source order. */
.section.section--head { padding-top: 140px; }
.section__eyebrow { color: var(--primary); margin-bottom: 12px; display: inline-flex; align-items: center; gap: 8px; }
.section__eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--primary); border-radius: 2px; }
.section__head { max-width: 720px; margin-bottom: 44px; }
.section__head .lead { margin-top: 14px; }

/* ===== LOGO ===== */
.logo { display: flex; align-items: center; border: 0; background: none; cursor: pointer; text-align: left; text-decoration: none; }
.logo__mark { height: 40px; width: auto; flex: none; object-fit: contain; }

/* ===== FLOATING APP BAR + DROPDOWN =====
   Fixed (not sticky) so it never reserves its own row — it floats directly
   over whatever the page starts with (.hero / .pagehead), whose own top
   padding is increased below to clear the bar without pushing their
   background down with it. */
.appbar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding: 16px 24px 0; }
.appbar__inner {
  position: relative;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  height: 72px; max-width: var(--maxw); margin: 0 auto; padding: 0 10px 0 22px;
  background: color-mix(in srgb, var(--sc-lowest) 92%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--outline-variant);
  border-radius: var(--r-full);
  box-shadow: var(--elev2);
}
/* .appbar__actions gets an explicit grid-column so it stays correct even
   when .nav becomes position:absolute on mobile — out-of-flow items are
   skipped by grid auto-placement, which would otherwise shift
   .appbar__actions into the middle column, leaving the menu button short of
   the right edge. .nav intentionally has NO explicit grid-column: an
   absolutely-positioned grid item with an unplaced (auto) column uses the
   WHOLE grid as its containing block, which is what makes its
   left:0;right:0 mobile dropdown span the full bar edge-to-edge. Explicitly
   placing it in column 2 would shrink that containing block down to just
   the narrow middle column, breaking the full-width dropdown. */
.appbar__inner .logo { justify-self: start; }
.nav { display: flex; align-items: center; justify-self: center; gap: 2px; }
.appbar__actions { grid-column: 3; display: flex; align-items: center; gap: 6px; justify-self: end; }
.nav__link { position: relative; border: 0; background: none; font: inherit; font-weight: 600; color: var(--on-surface-variant); padding: 10px 15px; border-radius: var(--r-full); cursor: pointer; overflow: hidden; display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.nav__link::after { content: ""; position: absolute; inset: 0; background: var(--primary); opacity: 0; transition: opacity var(--transition-fast); }
.nav__link:hover::after { opacity: .08; }
.nav__link.active { color: var(--primary); }
.nav__link.active::after { opacity: .12; }
.nav__link::before { content: ""; position: absolute; left: 16px; right: 16px; bottom: 7px; height: 2px; background: var(--primary); border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform var(--transition-med) ease; }
.nav__link:hover::before, .nav__link.active::before { transform: scaleX(1); }
.has-drop { position: relative; }
.drop {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(8px) scale(.96);
  transform-origin: top center;
  background: var(--sc-lowest); border: 1px solid var(--outline-variant);
  border-radius: var(--r-lg); box-shadow: var(--elev3); padding: 10px; width: 320px;
  opacity: 0; visibility: hidden;
  transition: opacity .32s var(--ease-glass), transform .32s var(--ease-glass), visibility .32s;
  z-index: 70;
}
.has-drop:hover .drop { opacity: 1; visibility: visible; }
.drop__item { display: flex; gap: 12px; align-items: center; padding: 11px 12px; border-radius: var(--r-md); cursor: pointer; text-decoration: none; color: inherit; }
.drop__item:hover { background: var(--sc-low); }
.drop__item .di { width: 38px; height: 38px; flex: none; border-radius: var(--r-full); background: var(--primary-container); color: var(--on-primary-container); display: grid; place-items: center; }
.drop__item b { font-size: .92rem; font-family: var(--font-display); display: block; }
.drop__item span { font-size: .78rem; color: var(--on-surface-variant); }
.drop__item--all { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--outline-variant); }
.drop__item--all .di { background: var(--secondary-container); color: var(--on-secondary-container); }
.drop__item--all b { color: var(--primary); }
.menu-btn { display: none; border: 0; background: none; cursor: pointer; color: var(--on-surface); padding: 8px; }
.menu-btn .ic { font-size: 28px; }
.nav .nav__mobile-cta { display: none; }

/* ===== BUTTONS ===== */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font: inherit; font-weight: 600; border: 0; border-radius: var(--r-full); padding: 13px 26px; cursor: pointer; overflow: hidden; text-decoration: none; font-size: .98rem; transition: transform var(--transition-fast) ease; }
.btn::after { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity var(--transition-fast); }
.btn:hover::after { opacity: .1; } .btn:active::after { opacity: .14; }
.btn:active { transform: scale(.97); }
.btn::before { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); transition: left .6s ease; pointer-events: none; }
.btn:hover::before { left: 120%; }
.btn--filled { background: var(--primary); color: var(--on-primary); }
.btn--filled:hover { box-shadow: var(--elev1); }
.btn--tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.btn--outlined { background: transparent; color: var(--primary); border: 1px solid var(--outline); }
.btn--text { background: transparent; color: var(--primary); padding: 12px 14px; }
.btn .ic { font-size: 20px; }

/* ===== HERO / ORBIT ===== */
.hero { position: relative; padding: 140px 0 44px; overflow: hidden; }
.hero__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(600px 400px at 82% 18%, color-mix(in srgb, var(--primary-container) 55%, transparent), transparent), radial-gradient(500px 380px at 6% 92%, color-mix(in srgb, var(--tertiary-container) 45%, transparent), transparent); }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero__chip { display: inline-flex; align-items: center; gap: 8px; background: var(--sc-low); border: 1px solid var(--outline-variant); color: var(--on-surface-variant); padding: 7px 14px 7px 10px; border-radius: var(--r-full); font-size: .82rem; font-weight: 600; margin-bottom: 22px; }
.hero__chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.hero h1 { margin-bottom: 20px; }
.hero h1 .accent { color: var(--primary); }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.hero__stats { display: flex; gap: 24px; margin-top: 40px; }
.hero__stat { flex: 1 1 0; min-width: 0; }
.hero__stat b { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: var(--primary); display: block; line-height: 1; }
.hero__stat span { font-size: .85rem; color: var(--on-surface-variant); }
.hero__media { position: relative; aspect-ratio: 4/3; max-width: 480px; margin: 0 auto; width: 100%; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--elev3); }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.orbit { position: relative; aspect-ratio: 1; max-width: 460px; margin: 0 auto; width: 100%; }
.orbit__ring { position: absolute; border-radius: 50%; border: 1.5px dashed var(--outline-variant); }
.orbit__ring.r1 { inset: 8%; } .orbit__ring.r2 { inset: 22%; }
.orbit__core { position: absolute; inset: 34%; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #00b39d, var(--primary)); display: grid; place-items: center; text-align: center; color: #fff; box-shadow: var(--elev3); padding: 14px; }
.orbit__core b { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; }
.orbit__core span { font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; opacity: .85; margin-top: 4px; }
.orbit__node { position: absolute; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: var(--sc-lowest); box-shadow: var(--elev2); color: var(--primary); border: 1px solid var(--outline-variant); transition: transform var(--transition-slow); cursor: pointer; text-decoration: none; }
.orbit__node .ic { font-size: 30px; }
.orbit__node:hover { transform: scale(1.08); }
.orbit__node:nth-of-type(3) { top: 2%; left: 50%; transform: translateX(-50%); background: var(--primary-container); color: var(--on-primary-container); }
.orbit__node:nth-of-type(4) { top: 34%; right: 0; }
.orbit__node:nth-of-type(5) { bottom: 6%; right: 12%; }
.orbit__node:nth-of-type(6) { bottom: 6%; left: 12%; }
.orbit__node:nth-of-type(7) { top: 34%; left: 0; }

/* ===== PARTNERS ===== */
.partners { border-top: 1px solid var(--outline-variant); border-bottom: 1px solid var(--outline-variant); background: var(--sc-low); overflow: hidden; }
.partners__row { display: flex; align-items: center; gap: 24px; padding: 26px 0; }
.partners__label { flex: none; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--on-surface-variant); }
.plogo { display: flex; align-items: center; gap: 8px; padding: 9px 16px; background: var(--sc-lowest); border: 1px solid var(--outline-variant); border-radius: var(--r-full); font-weight: 700; font-family: var(--font-display); color: var(--secondary); font-size: .9rem; white-space: nowrap; }
.plogo .ic { color: var(--primary); font-size: 18px; }

/* ===== MARQUEE (auto-scrolling logo/tile carousel) ===== */
.marquee { overflow: hidden; flex: 1; min-width: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; }
.marquee__set { display: flex; flex: none; align-items: center; gap: 14px; padding-right: 14px; }
.marquee-stack { display: flex; flex-direction: column; gap: 16px; }

/* ===== CARDS / SERVICES ===== */
.grid { display: grid; gap: 22px; } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--2 { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--sc-lowest); border: 1px solid var(--outline-variant); border-radius: var(--r-lg); padding: 28px; transition: box-shadow var(--transition-med), transform var(--transition-med); }
.card:hover { box-shadow: var(--elev2); transform: translateY(-3px); }
.svc__icon { width: 60px; height: 60px; border-radius: var(--r-full); display: grid; place-items: center; margin-bottom: 20px; transition: transform var(--transition-med) ease; }
.card:hover .svc__icon { transform: scale(1.08); }
.svc__icon .ic { font-size: 30px; }
.svc__icon.c1 { background: var(--primary-container); color: var(--on-primary-container); }
.svc__icon.c2 { background: var(--secondary-container); color: var(--on-secondary-container); }
.svc__icon.c3 { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.svc h3 { font-size: 1.16rem; margin-bottom: 8px; }
.svc p { color: var(--on-surface-variant); font-size: .95rem; }
.svc__link { margin-top: 18px; display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 600; font-size: .9rem; cursor: pointer; text-decoration: none; }
.svc__link .ic { font-size: 18px; transition: transform var(--transition-fast); }
.card:hover .svc__link .ic { transform: translateX(4px); }

/* Service card with an uploaded photo (admin/service-edit.php): the photo
   sits blurred behind the content with a light scrim over it for
   legibility, instead of the plain surface background. */
.svc--photo { position: relative; overflow: hidden; padding: 0; }
.svc__bg { position: absolute; inset: -16px; background-size: cover; background-position: center; filter: blur(18px) saturate(1.1); transform: scale(1.15); z-index: 0; transition: transform var(--transition-slow) ease; }
.svc--photo:hover .svc__bg { transform: scale(1.22); }
.svc--photo::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--sc-lowest) 78%, transparent); z-index: 1; }
.svc--photo .svc__content { position: relative; z-index: 2; padding: 28px; }

/* ===== CHAIRMAN ===== */
.chair { display: grid; grid-template-columns: .9fr 1.4fr; gap: 44px; align-items: center; background: var(--sc-low); border-radius: var(--r-xl); padding: 44px; }
.chair__photo { aspect-ratio: 1; border-radius: var(--r-lg); background: radial-gradient(circle at 30% 30%, var(--secondary-container), var(--primary-container)); display: grid; place-items: center; position: relative; overflow: hidden; }
.chair__photo img, .chair__photo video { width: 100%; height: 100%; object-fit: cover; }
.chair__photo .ic { font-size: 90px; color: var(--primary); opacity: .55; }
.chair__photo .badge { position: absolute; bottom: 16px; left: 16px; right: 16px; background: var(--sc-lowest); border-radius: var(--r-md); padding: 12px 16px; box-shadow: var(--elev1); }
.chair__photo .badge b { display: block; font-family: var(--font-display); font-size: .98rem; }
.chair__photo .badge span { font-size: .78rem; color: var(--on-surface-variant); }
.chair blockquote { font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.4; }
.chair .mark { color: var(--primary); font-size: 2.4rem; font-family: Georgia, serif; line-height: 0; }

/* ===== CTA BAND ===== */
.cta-band { background: linear-gradient(120deg, var(--primary), #00897b); color: #fff; border-radius: var(--r-xl); padding: 56px; text-align: center; position: relative; overflow: hidden; }
.cta-band::before, .cta-band::after { content: ""; position: absolute; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .16); }
.cta-band::before { width: 280px; height: 280px; top: -120px; right: -60px; }
.cta-band::after { width: 200px; height: 200px; bottom: -100px; left: -40px; }
.cta-band h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; margin-bottom: 12px; position: relative; }
.cta-band p { opacity: .92; max-width: 560px; margin: 0 auto 28px; position: relative; }
.cta-band .btn--filled { background: #fff; color: var(--primary); position: relative; }

/* ===== PAGE HEAD ===== */
.pagehead { background: var(--sc-low); padding: 140px 0 52px; border-bottom: 1px solid var(--outline-variant); position: relative; overflow: hidden; }
.pagehead::after { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; border: 40px solid var(--primary-container); opacity: .35; top: -140px; right: -80px; }
.pagehead .lead { margin-top: 14px; max-width: 640px; }
.crumb { font-size: .82rem; color: var(--on-surface-variant); margin-bottom: 14px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.crumb .lnk { color: var(--primary); cursor: pointer; font-weight: 600; text-decoration: none; }

/* ===== VALUES ===== */
.value { padding: 26px; border-radius: var(--r-lg); background: var(--sc-lowest); border: 1px solid var(--outline-variant); transition: box-shadow var(--transition-med), transform var(--transition-med); }
.value:hover { box-shadow: var(--elev2); transform: translateY(-3px); }
.value .ic { font-size: 32px; color: var(--primary); margin-bottom: 14px; transition: transform var(--transition-med) ease; }
.value:hover .ic { transform: scale(1.1); }
.value h3 { font-size: 1.06rem; margin-bottom: 6px; }
.value p { font-size: .92rem; color: var(--on-surface-variant); }

/* ===== ACTIVITIES (detailed) ===== */
.act-search { position: relative; margin-bottom: 20px; }
.act-search .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--on-surface-variant); font-size: 18px; pointer-events: none; }
.act-search input { width: 100%; font: inherit; padding: 12px 14px 12px 42px; border: 1px solid var(--outline-variant); border-radius: var(--r-full); background: var(--sc-lowest); color: var(--on-surface); }
.act-search input:focus { outline: 2px solid var(--primary); }
.filter { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 32px; }
.chip { border: 1px solid var(--outline); background: transparent; color: var(--on-surface-variant); font: inherit; font-weight: 600; font-size: .88rem; padding: 8px 16px; border-radius: var(--r-full); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.chip.active { background: var(--secondary-container); color: var(--on-secondary-container); border-color: transparent; }
.chip .ic { font-size: 16px; }

/* Date-range popover — same dropdown pattern as the "Products & Services"
   nav item, so it reads as one consistent control language. */
.daterange-pop { position: relative; }
.daterange-pop__panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; min-width: 230px;
  background: var(--sc-lowest); border: 1px solid var(--outline-variant); border-radius: var(--r-lg);
  box-shadow: var(--elev3); padding: 16px; flex-direction: column; gap: 10px;
}
.daterange-pop__panel:not([hidden]) { display: flex; }
.daterange-pop__panel label { font-size: .8rem; font-weight: 600; color: var(--on-surface-variant); }
.daterange-pop__panel input { width: 100%; font: inherit; padding: 9px 10px; border: 1px solid var(--outline-variant); border-radius: var(--r-md); background: var(--sc-lowest); color: var(--on-surface); }
.daterange-pop__panel input:focus { outline: 2px solid var(--primary); }
.daterange-pop__clear { align-self: flex-start; border: 0; background: none; color: var(--primary); font: inherit; font-weight: 600; font-size: .84rem; cursor: pointer; padding: 4px 0; }
@media (max-width: 700px) {
  /* The chips wrap onto multiple lines here, so the trigger's own position
     within the row isn't reliable as an anchor — .daterange-pop__panel's
     left:0 relative to just the trigger button could land it partway across
     the row and push it off-screen. Anchor to the whole .filter row instead
     (position:relative moves here, off .daterange-pop) so the panel always
     spans safely within the page width regardless of where the trigger
     chip wraps to. */
  .filter { position: relative; }
  .daterange-pop { position: static; }
  .daterange-pop__panel { left: 0; right: 0; min-width: 0; }
}
.featured-slider { position: relative; margin-bottom: 40px; }
.featured-slider .featured { display: none; margin-bottom: 0; }
.featured-slider .featured.active { display: grid; animation: featured-fade .4s ease; }
.featured-slider__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.featured-slider__dots { display: flex; gap: 8px; }
.featured-slider__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--r-full); background: var(--outline-variant); cursor: pointer; transition: width var(--transition-fast), background var(--transition-fast); }
.featured-slider__dot.active { width: 24px; background: var(--primary); }
.featured-slider__arrow { flex: none; width: 40px; height: 40px; border-radius: var(--r-full); border: 1px solid var(--outline-variant); background: var(--sc-lowest); color: var(--on-surface-variant); display: grid; place-items: center; cursor: pointer; transition: background var(--transition-fast); }
.featured-slider__arrow:hover { background: var(--sc-low); }
@keyframes featured-fade { from { opacity: 0; } to { opacity: 1; } }
.featured { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; border: 1px solid var(--outline-variant); border-radius: var(--r-xl); overflow: hidden; background: var(--sc-lowest); }
.featured__img { min-height: 280px; position: relative; display: grid; place-items: center; }
.featured__img .ic { font-size: 64px; color: rgba(255, 255, 255, .85); }
.featured__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.featured__img .flag { position: absolute; top: 18px; left: 18px; background: rgba(255, 255, 255, .92); color: var(--primary); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--r-full); }
.featured__body { padding: 38px; display: flex; flex-direction: column; justify-content: center; }
.featured__meta { font-size: .82rem; color: var(--on-surface-variant); display: flex; gap: 14px; margin-bottom: 12px; }
.featured__meta span { display: inline-flex; align-items: center; gap: 5px; }
.featured__body h2 { font-size: 1.5rem; margin-bottom: 12px; line-height: 1.2; }
.featured__body p { color: var(--on-surface-variant); margin-bottom: 22px; }
.act-card { border: 1px solid var(--outline-variant); border-radius: var(--r-lg); overflow: hidden; background: var(--sc-lowest); cursor: pointer; transition: box-shadow var(--transition-med), transform var(--transition-med); display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.act-card:hover { box-shadow: var(--elev2); transform: translateY(-3px); }
.act-card__img { height: 160px; position: relative; display: grid; place-items: center; }
.act-card__img .ic { font-size: 44px; color: rgba(255, 255, 255, .9); }
.act-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.act-card__img .flag { position: absolute; top: 12px; left: 12px; background: rgba(255, 255, 255, .92); font-weight: 700; font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--r-full); }
.act-card__body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.act-card__date { font-size: .78rem; color: var(--on-surface-variant); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.act-card__body h3 { font-size: 1.05rem; line-height: 1.25; margin-bottom: 8px; }
.act-card__body p { font-size: .9rem; color: var(--on-surface-variant); flex: 1; }
.act-card__more { margin-top: 14px; color: var(--primary); font-weight: 600; font-size: .88rem; display: inline-flex; align-items: center; gap: 6px; }

/* ===== ARTICLE (activity detail) ===== */
.article { max-width: 820px; margin: 0 auto; }
.article__hero { height: 300px; border-radius: var(--r-xl); display: grid; place-items: center; margin: 26px 0 30px; position: relative; overflow: hidden; }
.article__hero .ic { font-size: 80px; color: rgba(255, 255, 255, .9); }
.article__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.article__meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: .86rem; color: var(--on-surface-variant); margin-bottom: 8px; }
.article__meta span { display: inline-flex; align-items: center; gap: 6px; }
.article h1 { font-size: clamp(1.7rem, 3.2vw, 2.2rem); margin-bottom: 18px; line-height: 1.15; }
.article__body p { margin-bottom: 18px; color: var(--on-surface-variant); font-size: 1.05rem; }
.article__body h3 { margin: 28px 0 12px; }
.tagpill { display: inline-block; background: var(--secondary-container); color: var(--on-secondary-container); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: 6px 13px; border-radius: var(--r-full); margin-bottom: 16px; }

/* ===== SERVICE DETAIL ===== */
.sd-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.sd-hero__art { aspect-ratio: 4/3; border-radius: var(--r-xl); display: grid; place-items: center; position: relative; overflow: hidden; }
.sd-hero__art .ic { font-size: 90px; color: rgba(255, 255, 255, .92); z-index: 1; }
.sd-hero__art::before { content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .2); }
.sd-hero__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feat-list { list-style: none; margin-top: 8px; }
.feat-list li { padding: 12px 0; border-bottom: 1px solid var(--outline-variant); }
.feat-list__img { width: 100%; height: 240px; object-fit: cover; border-radius: var(--r-md); display: block; margin-bottom: 12px; }
.feat-list__row { display: flex; gap: 12px; align-items: flex-start; }
.feat-list li .ic { color: var(--primary); font-size: 22px; flex: none; margin-top: 2px; }
.feat-list li b { font-family: var(--font-display); display: block; font-size: .98rem; }
.feat-list li span { font-size: .9rem; color: var(--on-surface-variant); }

/* ===== CONTACT ===== */
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.contact-item { display: flex; gap: 16px; padding: 20px; border-radius: var(--r-md); background: var(--sc-low); margin-bottom: 16px; }
.contact-item .ic { flex: none; font-size: 24px; }
.contact-item .cic { flex: none; width: 48px; height: 48px; border-radius: var(--r-full); background: var(--primary-container); color: var(--on-primary-container); display: grid; place-items: center; }
.contact-item h4 { font-size: .98rem; margin-bottom: 2px; }
.contact-item p, .contact-item a { font-size: .92rem; color: var(--on-surface-variant); text-decoration: none; white-space: pre-line; }
.contact-item a:hover { color: var(--primary); }
.socials { display: flex; gap: 12px; margin-top: 8px; }
.social { width: 46px; height: 46px; border-radius: var(--r-full); border: 1px solid var(--outline-variant); display: grid; place-items: center; color: var(--primary); cursor: pointer; background: var(--sc-lowest); text-decoration: none; }
.social:hover { background: var(--primary); color: #fff; border-color: transparent; }
.social .ic { font-size: 22px; }
.form { background: var(--sc-lowest); border: 1px solid var(--outline-variant); border-radius: var(--r-xl); padding: 32px; }
.field { position: relative; margin-bottom: 20px; }
.field input, .field textarea { width: 100%; font: inherit; padding: 16px; border: 1px solid var(--outline); border-radius: var(--r-sm); background: transparent; color: var(--on-surface); resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
.field label { position: absolute; top: 16px; left: 14px; background: var(--sc-lowest); padding: 0 6px; color: var(--on-surface-variant); pointer-events: none; transition: .15s; font-size: .95rem; }
.field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { top: -9px; font-size: .75rem; color: var(--primary); }
.map { margin-top: 22px; height: 340px; border-radius: var(--r-xl); border: 1px solid var(--outline-variant); background: var(--sc-low); position: relative; overflow: hidden; }
.map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__card { position: absolute; bottom: 18px; left: 18px; background: var(--sc-lowest); border-radius: var(--r-md); padding: 14px 18px; box-shadow: var(--elev2); max-width: 260px; }
.map__card b { font-family: var(--font-display); font-size: .95rem; display: block; margin-bottom: 3px; }
.map__card span { font-size: .82rem; color: var(--on-surface-variant); }
.promise { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.promise__card { background: var(--primary-container); color: var(--on-primary-container); border-radius: var(--r-lg); padding: 24px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.35; }
.promise__card .ic { font-size: 26px; margin-bottom: 10px; display: block; color: var(--primary); }

/* ===== FAQ ===== */
.faq__item { border: 1px solid var(--outline-variant); border-radius: var(--r-md); margin-bottom: 10px; overflow: hidden; background: var(--sc-lowest); }
.faq__q { width: 100%; text-align: left; border: 0; background: none; font: inherit; font-weight: 600; padding: 18px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq__q .ic { transition: transform var(--transition-med); color: var(--primary); flex: none; }
.faq__item.open .faq__q .ic { transform: rotate(180deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .28s ease; color: var(--on-surface-variant); }
.faq__item.open .faq__a { max-height: 240px; }
.faq__a p { padding: 0 20px 18px; font-size: .94rem; }

/* ===== FOOTER ===== */
.footer { background: var(--inverse-surface); color: var(--inverse-on-surface); padding: 56px 0 28px; margin-top: 20px; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 36px; margin-bottom: 36px; }
.footer h4 { font-family: var(--font-display); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-bottom: 16px; }
.footer a { color: var(--inverse-on-surface); text-decoration: none; opacity: .85; display: block; padding: 5px 0; font-size: .92rem; cursor: pointer; }
.footer a:hover { opacity: 1; color: var(--primary-container); }
.footer__brand p { opacity: .8; font-size: .92rem; max-width: 290px; margin-top: 14px; }
.footer__social { display: flex; gap: 10px; margin-top: 16px; }
.footer__social a { width: 38px; height: 38px; border-radius: var(--r-full); border: 1px solid rgba(255, 255, 255, .24); display: grid; place-items: center; cursor: pointer; padding: 0; }
.footer__social a:hover { background: rgba(255, 255, 255, .12); }
.footer__bottom { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .85rem; opacity: .7; }

/* ===== ORG CHART ===== */
.orgwrap { overflow-x: auto; padding: 10px 4px 20px; }
.tree { min-width: 820px; display: flex; justify-content: center; margin: 0 auto; }
.tree ul { display: flex; justify-content: center; padding-top: 28px; position: relative; }
.tree li { list-style: none; position: relative; padding: 28px 12px 0; display: flex; flex-direction: column; align-items: center; }
.tree li::before, .tree li::after { content: ''; position: absolute; top: 0; right: 50%; border-top: 2px solid var(--outline-variant); width: 50%; height: 28px; }
.tree li::after { right: auto; left: 50%; border-left: 2px solid var(--outline-variant); }
.tree li:only-child::before, .tree li:only-child::after { display: none; }
.tree li:only-child { padding-top: 28px; }
.tree li:first-child::before, .tree li:last-child::after { border: 0 none; }
.tree li:last-child::before { border-right: 2px solid var(--outline-variant); border-radius: 0 6px 0 0; }
.tree li:first-child::after { border-radius: 6px 0 0 0; }
.tree ul ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid var(--outline-variant); width: 0; height: 28px; }
.tree > ul { padding-top: 0; } .tree > ul > li { padding-top: 0; }
.node { background: var(--sc-lowest); border: 1px solid var(--outline-variant); border-top: 3px solid var(--outline); border-radius: var(--r-md); padding: 16px 18px; min-width: 176px; box-shadow: var(--elev1); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; transition: box-shadow var(--transition-fast), transform var(--transition-fast); }
.node:hover { box-shadow: var(--elev2); transform: translateY(-2px); }
.node__av { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sc); color: var(--primary); }
.node__av .ic { font-size: 26px; }
.node__role { font-family: var(--font-display); font-weight: 700; font-size: .9rem; line-height: 1.22; }
.node__name { font-size: .78rem; color: var(--on-surface-variant); }
.node__name.ph { font-style: italic; opacity: .65; }
.node--chair { background: var(--primary); color: #fff; border-top-color: var(--gold); min-width: 210px; }
.node--chair .node__av { background: rgba(255, 255, 255, .2); color: #fff; }
.node--chair .node__name { color: rgba(255, 255, 255, .9); }
.node--ceo { background: var(--secondary-container); color: var(--on-secondary-container); border-top-color: var(--secondary); min-width: 196px; }
.node--ceo .node__av { background: rgba(0, 0, 0, .06); color: var(--secondary); }
.n-tech { border-top-color: #006a60; } .n-tech .node__av { background: var(--primary-container); color: var(--on-primary-container); }
.n-health { border-top-color: #4a635e; } .n-health .node__av { background: var(--secondary-container); color: var(--on-secondary-container); }
.n-ind { border-top-color: #3d6373; } .n-ind .node__av { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.n-biz { border-top-color: #8a6d3b; } .n-biz .node__av { background: #f0e6cf; color: #6b5320; }
.n-hosp { border-top-color: #7a5da0; } .n-hosp .node__av { background: #ece3f5; color: #5b4283; }

/* ===== ORG CHART — MOBILE COLLAPSIBLE LIST =====
   Alternative to .tree on narrow viewports (see the 760px media query
   below) — a shrunk branching diagram doesn't hold up at phone width, so
   mobile gets an indented, expandable list instead. Hidden on desktop. */
.orglist { display: none; }
.orglist__item { list-style: none; }
.orglist__row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--outline-variant); cursor: pointer; }
.orglist__av { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sc); color: var(--primary); border-top: 3px solid var(--outline); }
.orglist__av .ic { font-size: 20px; }
.orglist__text { flex: 1; min-width: 0; }
.orglist__role { font-family: var(--font-display); font-weight: 700; font-size: .88rem; line-height: 1.22; display: block; }
.orglist__name { font-size: .78rem; color: var(--on-surface-variant); }
.orglist__name.ph { font-style: italic; opacity: .65; }
.orglist__toggle { flex: none; border: 0; background: none; color: var(--on-surface-variant); padding: 6px; display: grid; place-items: center; cursor: pointer; }
.orglist__toggle .ic { transition: transform .2s ease; }
.orglist__item.open > .orglist__row .orglist__toggle .ic { transform: rotate(180deg); }
.orglist__children { padding-left: 26px; overflow: hidden; max-height: 0; transition: max-height .25s ease; }
.orglist__item.open > .orglist__children { max-height: 2000px; }
.orglist__av.n-tech { border-top-color: #006a60; background: var(--primary-container); color: var(--on-primary-container); }
.orglist__av.n-health { border-top-color: #4a635e; background: var(--secondary-container); color: var(--on-secondary-container); }
.orglist__av.n-ind { border-top-color: #3d6373; background: var(--tertiary-container); color: var(--on-tertiary-container); }
.orglist__av.n-biz { border-top-color: #8a6d3b; background: #f0e6cf; color: #6b5320; }
.orglist__av.n-hosp { border-top-color: #7a5da0; background: #ece3f5; color: #5b4283; }
.orglist__av.node--chair { background: var(--primary); color: #fff; border-top-color: var(--gold); }
.orglist__av.node--ceo { background: var(--secondary-container); color: var(--on-secondary-container); border-top-color: var(--secondary); }

/* ===== VISION & MISSION ===== */
.vmwrap { display: flex; flex-direction: column; gap: 24px; }
.vmcard { background: var(--sc-low); border: 1px solid var(--outline-variant); border-radius: var(--r-xl); padding: 40px; }
.vmcard__label { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); margin-bottom: 18px; }
.vmcard__stmt { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 1.9vw, 1.4rem); line-height: 1.4; color: var(--on-surface); max-width: 820px; }

/* ===== MISSION — FILLIP CHEVRON GRAPHIC ===== */
.fillip { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.fillip__item { display: flex; width: 130px; margin: 0 -10px; cursor: pointer; }
.fillip__chev { width: 100%; height: 78px; clip-path: polygon(0 0, 76% 0, 100% 50%, 76% 100%, 0 100%, 18% 50%); display: flex; align-items: center; justify-content: center; padding-left: 10px; font-family: var(--font-display); font-weight: 800; font-size: 2rem; transition: transform var(--transition-fast), filter var(--transition-fast); }
.fillip__chev--green { background: linear-gradient(135deg, var(--primary), #00897b); color: #fff; }
.fillip__chev--gray { background: var(--outline-variant); color: var(--primary); }
.fillip__chev--gold { background: linear-gradient(135deg, #f2b632, #e0a11e); color: #20303a; }
.fillip__item:hover .fillip__chev, .fillip__item.is-active .fillip__chev { transform: translateY(-6px); filter: brightness(1.08); }
.fillip__message { margin-top: 22px; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--primary); min-height: 1.4em; }
@media (max-width: 860px) {
  /* Shrink to fit one row rather than wrapping to a second row or
     scrolling — all 6 chevrons shrink evenly to divide the available width. */
  .fillip { flex-wrap: nowrap; }
  .fillip__item { flex: 1 1 0; width: auto; min-width: 0; margin: 0; }
  .fillip__chev { font-size: clamp(1rem, 4vw, 1.6rem); height: 64px; padding-left: 6px; }
}

/* ===== STRATEGIC PARTNERS ===== */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pcard { border: 1px solid var(--outline-variant); border-radius: var(--r-lg); overflow: hidden; background: var(--sc-lowest); transition: box-shadow var(--transition-med), transform var(--transition-med); }
.pcard:hover { box-shadow: var(--elev2); transform: translateY(-3px); }
.pcard__logo { height: 104px; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--sc-low); border-bottom: 1px solid var(--outline-variant); color: var(--secondary); font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; text-align: center; padding: 0 16px; }
.pcard__logo .ic { font-size: 26px; color: var(--primary); }
.pcard__body { padding: 18px 20px; }
.pcard__body h3 { font-size: 1rem; margin-bottom: 4px; }
.pcard__body p { font-size: .86rem; color: var(--on-surface-variant); }
.pcard--add { border-style: dashed; background: transparent; }
.pcard--add .pcard__logo { background: transparent; color: var(--on-surface-variant); border-bottom: 0; font-size: .92rem; font-weight: 600; }
.pcard--add .pcard__logo .ic { color: var(--on-surface-variant); }

/* ===== CLIENTS (marquee tiles) ===== */
.ctile { width: 160px; height: 92px; flex: none; border: 1px solid var(--outline-variant); border-radius: var(--r-md); background: var(--sc-lowest); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--on-surface-variant); }
.ctile .ic { font-size: 26px; opacity: .55; }
.ctile span { font-size: .72rem; opacity: .7; }

/* ===== RESPONSIVE ===== */
@media (max-width: 960px) {
  .vm { grid-template-columns: 1fr; } .pgrid { grid-template-columns: repeat(2, 1fr); }
  .hero__grid, .grid--3, .grid--2, .chair, .contact__grid, .footer__grid, .featured, .sd-hero, .promise { grid-template-columns: 1fr; }
  .orbit, .hero__media { max-width: 340px; order: -1; } .footer__grid { gap: 28px; }
}
@media (max-width: 760px) {
  .appbar { padding: 12px 16px 0; }
  .appbar__inner { padding: 0 8px 0 18px; height: 64px; }
  .hero, .pagehead, .section.section--head { padding-top: 110px; }
  .nav {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: var(--sc-lowest); border: 1px solid var(--outline-variant);
    border-radius: var(--r-lg); padding: 12px; gap: 2px;
    box-shadow: var(--elev3); max-height: 90vh; overflow: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97);
    transform-origin: top center;
    transition: opacity .3s var(--ease-glass), transform .3s var(--ease-glass), visibility .3s;
  }
  .nav.open { opacity: 1; visibility: visible; transform: none; }
  /* Highlight/underline should hug the link's own text, not stretch the
     full width of the mobile menu row. */
  .nav__link { align-self: flex-start; width: auto; justify-content: flex-start; padding: 10px 16px; }
  .has-drop { align-self: stretch; }
  /* Collapsed by default (accordion) — no :hover on touch, so app.js
     toggles a .open class on the parent .has-drop instead. */
  .drop {
    position: static; transform: none; width: auto; box-shadow: none; border: 0; padding: 0 0 0 12px;
    opacity: 0; visibility: hidden; max-height: 0; overflow: hidden;
    transition: opacity .25s ease, max-height .25s ease;
  }
  .has-drop.open .drop { opacity: 1; visibility: visible; max-height: 600px; padding-top: 4px; padding-bottom: 4px; }
  .has-drop .nav__link .ic { transition: transform .25s ease; }
  .has-drop.open .nav__link .ic { transform: rotate(180deg); }
  .menu-btn { display: inline-flex; }
  /* Contact Us moves out of the top bar (logo + menu icon only) and into
     the bottom of the mobile nav panel instead. */
  .appbar__actions .nav__cta { display: none; }
  .nav .nav__mobile-cta { display: flex; justify-content: center; margin-top: 10px; }
  .section { padding: 56px 0; } .chair, .cta-band, .form, .featured__body { padding: 26px; }
  /* Partner-strip marquee (home page) — the label no longer squeezes the
     scrolling row down to nothing; stack it above instead. */
  .partners__row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .marquee { width: 100%; }
  /* Chevrons shrink further still at this width (see the 860px rule above
     for the shared shrink-to-fit approach). */
  .fillip__chev { padding-left: 4px; }
  /* Org chart — the branching diagram doesn't hold up shrunk to phone
     width, so mobile gets the collapsible list instead. */
  .orgwrap { display: none; }
  .orglist { display: block; }
}