/* Custom CSS — additive to Tailwind */

/* ===================================================================
   MOBILE SAFETY NET
   Prevent horizontal scroll caused by absolute-positioned decorative
   blobs / watermarks that extend past the viewport on narrow screens.
=================================================================== */
html, body { overflow-x: clip; }
/* Hyphenate / wrap long words gracefully (e.g. URLs in body copy) */
@media (max-width: 640px) {
  h1, h2, h3 { overflow-wrap: break-word; word-break: normal; hyphens: auto; }
}
/* Touch targets: any link/button under 40px feels fiddly on mobile */
@media (hover: none) and (pointer: coarse) {
  a, button { min-height: 32px; }
}


/* ===================================================================
   ACCESSIBILITY — visible focus rings + contrast top-ups
   Tailwind ships transparent default focus rings; this surfaces them for
   every interactive element so keyboard users never get lost.
=================================================================== */
:where(a, button, summary, [tabindex]):focus-visible,
:where(input, select, textarea):focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 3px;
  border-radius: 6px;
  /* No transition — focus must appear instantly */
}
/* On dark sections (hero overlays, footer) brand-600 disappears — use white. */
.bg-brand-900 :focus-visible,
.bg-brand-950 :focus-visible,
.bg-slate-900 :focus-visible,
.bg-slate-950 :focus-visible,
[class*="from-brand-9"] :focus-visible,
[class*="from-slate-9"] :focus-visible,
footer :focus-visible {
  outline-color: #ffffff;
}

/* Bump muted body text in LIGHT mode so it clears WCAG 4.5:1 on white/sand.
   Dark mode leaves slate-400 alone — it has enough contrast on slate-900+. */
html:not(.dark) .text-slate-400 { color: rgb(100 116 139); }  /* → slate-500 */



/* ---------------------------------------------------------------------
   Home hero: header sits transparent over the extended hero image, then
   morphs to the frosted glass look once you scroll past the hero band.
   `.is-home` is set in PHP; `.is-scrolled` is toggled by app.js.
   --------------------------------------------------------------------- */
#site-header.is-home:not(.is-scrolled) {
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
}
#site-header.is-home:not(.is-scrolled) nav[aria-label="Primary"] a {
  color: rgb(255 255 255 / 0.85);
}
#site-header.is-home:not(.is-scrolled) nav[aria-label="Primary"] a:hover {
  color: #fff;
  background-color: rgb(255 255 255 / 0.10);
}
#site-header.is-home:not(.is-scrolled) nav[aria-label="Primary"] a[aria-current="page"] {
  color: #fff;
  background-color: rgb(255 255 255 / 0.15);
}
#site-header.is-home:not(.is-scrolled) a[href^="tel:"] { color: #fff; }
#site-header.is-home:not(.is-scrolled) #theme-toggle {
  background-color: rgb(255 255 255 / 0.12);
  color: #fff;
}
#site-header.is-home:not(.is-scrolled) #theme-toggle:hover {
  background-color: rgb(255 255 255 / 0.22);
}
#site-header.is-home.is-scrolled {
  background: rgb(255 255 255 / 0.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgb(226 232 240 / 0.6);
}
.dark #site-header.is-home.is-scrolled {
  background: rgb(2 6 23 / 0.72);
  border-bottom-color: rgb(30 41 59 / 0.6);
}

/* Smooth in-view animation, applied by IntersectionObserver via .in-view */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); will-change: transform, opacity; }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"].in-view { transition-delay: .08s; }
.reveal[data-delay="2"].in-view { transition-delay: .16s; }
.reveal[data-delay="3"].in-view { transition-delay: .24s; }
.reveal[data-delay="4"].in-view { transition-delay: .32s; }
.reveal[data-delay="5"].in-view { transition-delay: .40s; }

/* FAQ accordion */
.faq-item summary { list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform .3s ease; }

/* Carousel dots */
.dot { width: .5rem; height: .5rem; border-radius: 9999px; background: rgb(203 213 225); transition: width .3s, background .3s; }
.dot.active { width: 1.5rem; background: var(--brand-700); }
:is(.dark) .dot { background: rgb(51 65 85); }
:is(.dark) .dot.active { background: var(--brand-300); }

/* Image lazy-load fade */
img.lazy { opacity: 0; transition: opacity .6s ease; }
img.lazy.loaded { opacity: 1; }

/* Mobile bottom sheet "more" links */
.sheet-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 48px;
  padding: .65rem .9rem;
  border-radius: 1rem;
  background: rgb(248 250 252);
  color: rgb(15 23 42);
  transition: background .2s, transform .15s;
}
.sheet-link:hover { background: rgb(241 245 249); }
.sheet-link:active { transform: scale(.98); }
:is(.dark) .sheet-link { background: rgb(30 41 59); color: rgb(241 245 249); }
:is(.dark) .sheet-link:hover { background: rgb(51 65 85); }
.sheet-ic { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 9999px; background: rgb(var(--brand-700-rgb) / 0.1); color: var(--brand-700); }
.sheet-ic svg { width: 16px; height: 16px; }
:is(.dark) .sheet-ic { background: rgb(var(--brand-300-rgb) / 0.15); color: var(--brand-300); }

/* Mobile sheet open state — toggled by JS */
#mobile-sheet.open { transform: translateY(0); }
#mobile-sheet-backdrop.open { opacity: 1; pointer-events: auto; }

/* Mobile tab active state */
#mobile-tabbar .tab[aria-current="true"] { color: var(--brand-700); }
:is(.dark) #mobile-tabbar .tab[aria-current="true"] { color: var(--brand-300); }

/* ===================================================================
   ARTISTIC ELEMENTS
=================================================================== */

/* Subtle dotted texture overlay (used on dark hero/footer backgrounds) */
.dot-pattern {
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
}

/* Hand-drawn scribble underline beneath display headings.
   Padding-bottom reserves space inside the element for the line,
   so the underline can never overlap letter descenders. */
.scribble {
  position: relative;
  display: inline-block;
  padding-bottom: 0.4em;
}
.scribble::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 0.05em;
  height: 0.18em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2 9 C 40 0, 80 14, 120 6 S 180 2, 198 8' stroke='%230d9488' stroke-width='3' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.85;
  pointer-events: none;
}
:is(.dark) .scribble::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2 9 C 40 0, 80 14, 120 6 S 180 2, 198 8' stroke='%235eead4' stroke-width='3' fill='none' stroke-linecap='round'/></svg>");
}

/* Eyebrow label with leading line (consistent label across the site) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-700);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
:is(.dark) .eyebrow { color: var(--brand-300); }

/* Floating gradient blob (drop into any relatively positioned container).
   Base opacity intentionally low — per-instance `opacity-XX` Tailwind classes
   can boost where a specific section needs more presence. */
.art-blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(60px);
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}
.art-blob.brand   { background: radial-gradient(circle at 30% 30%, var(--brand-400), transparent 60%); }
.art-blob.sand    { background: radial-gradient(circle at 70% 70%, #d8b88a, transparent 60%); }
.art-blob.deep    { background: radial-gradient(circle at 50% 50%, var(--brand-700), transparent 60%); }

/* Decorative number badge for sequenced content */
.num-badge {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-600));
  color: #fff;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  box-shadow: 0 6px 16px -8px rgb(var(--brand-700-rgb) / .6);
}

/* Wave divider helper — used as <svg class="wave-divider"> */
.wave-divider {
  display: block;
  width: 100%;
  height: 56px;
}
@media (min-width: 640px) { .wave-divider { height: 80px; } }

/* "Frame" mask for hero portrait — playful asymmetric rounded corners */
.frame-organic {
  border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
}

/* Soft glow ring used around accent photos */
.glow-ring::before {
  content: "";
  position: absolute; inset: -1rem;
  border-radius: inherit;
  background: radial-gradient(50% 50% at 50% 50%, rgb(var(--brand-400-rgb) / 0.35), transparent 70%);
  filter: blur(24px);
  z-index: -1;
}

/* Decorative ticker line — animated dashed flow */
.ticker-line {
  background-image: linear-gradient(90deg, currentColor 50%, transparent 50%);
  background-size: 12px 1px;
  background-repeat: repeat-x;
  background-position: 0 50%;
  height: 1px;
}

/* Quote-mark drop cap for blockquote pages */
.quote-cap::before {
  content: "\201C";
  font-family: 'Fraunces', serif;
  font-size: 5rem;
  line-height: 0.8;
  color: rgb(var(--brand-700-rgb) / 0.25);
  float: left;
  margin-right: 0.5rem;
  margin-top: 0.2rem;
}

/* ===================================================================
   CREDENTIALS PLATE — framed certificate look with gold detailing
=================================================================== */
.cred-plate {
  position: relative;
  border-radius: 1.25rem;
  background-image: linear-gradient(to bottom right, #ffffff, #fefcf7 60%, #fdf6e7);
  background-color: #ffffff;
  border: 1px solid rgb(217 119 6 / 0.18);
  box-shadow:
    0 1px 0 #ffffff inset,
    0 24px 60px -32px rgba(15, 23, 42, 0.28),
    0 2px 8px -4px rgba(180, 83, 9, 0.08);
  overflow: hidden;
  text-align: center;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s, border-color .5s;
}
:is(.dark) .cred-plate {
  background-image: linear-gradient(to bottom right, rgb(15 23 42 / 0.95), rgb(15 23 42), rgb(2 6 23));
  background-color: rgb(15 23 42);
  border-color: rgb(252 211 77 / 0.15);
  box-shadow:
    0 1px 0 rgb(252 211 77 / 0.04) inset,
    0 28px 70px -32px rgba(0, 0, 0, 0.65),
    0 2px 10px -4px rgba(252, 211, 77, 0.05);
}
/* Inner inset frame — engraved feel */
.cred-plate::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 14px;
  border: 1px solid rgb(217 119 6 / 0.12);
  pointer-events: none;
  z-index: 1;
}
:is(.dark) .cred-plate::before { border-color: rgb(252 211 77 / 0.10); }
/* Subtle paper-texture grain across the plate */
.cred-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(252,211,77,0.05), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(217,119,6,0.05), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
:is(.dark) .cred-plate::after {
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(252,211,77,0.06), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(252,211,77,0.04), transparent 55%);
}
/* Make every child sit above the texture/frame layers */
.cred-plate > * { position: relative; z-index: 2; }

.cred-plate:hover,
a:hover .cred-plate {
  transform: translateY(-4px);
  border-color: rgb(217 119 6 / 0.42);
  box-shadow:
    0 1px 0 #ffffff inset,
    0 32px 80px -28px rgba(217, 119, 6, 0.30),
    0 4px 12px -4px rgba(180, 83, 9, 0.15);
}
:is(.dark) .cred-plate:hover,
:is(.dark) a:hover .cred-plate {
  border-color: rgb(252 211 77 / 0.4);
  box-shadow:
    0 1px 0 rgb(252 211 77 / 0.05) inset,
    0 32px 80px -28px rgba(217, 119, 6, 0.36),
    0 4px 12px -4px rgba(252, 211, 77, 0.10);
}

/* Gold variant — used on the "Recognition / 5★" plate */
.cred-plate--gold { background-image: linear-gradient(to bottom right, #fffbeb, #fef3c7 60%, #fde68a 100%); }
:is(.dark) .cred-plate--gold {
  background-image: linear-gradient(to bottom right, rgb(15 23 42), rgb(15 23 42 / 0.9), rgb(120 53 15 / 0.25));
}

/* Faint giant Roman numeral as a watermark behind each plate's content */
.cred-plate-numeral {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(5.5rem, 15vw, 13rem);
  line-height: 1;
  color: rgb(180 83 9 / 0.05);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  letter-spacing: -0.04em;
}
:is(.dark) .cred-plate-numeral { color: rgb(252 211 77 / 0.05); }

/* On hover, very slight watermark warm-up */
.cred-plate:hover .cred-plate-numeral,
a:hover .cred-plate .cred-plate-numeral {
  color: rgb(180 83 9 / 0.08);
}
:is(.dark) .cred-plate:hover .cred-plate-numeral,
:is(.dark) a:hover .cred-plate .cred-plate-numeral {
  color: rgb(252 211 77 / 0.08);
}

/* ===================================================================
   HERO SLIDER — crossfade slides + capsule dot indicators
=================================================================== */
.hero-slide {
  opacity: 0;
  transition: opacity 1400ms cubic-bezier(.4,.0,.2,1);
  pointer-events: none;
}
.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
/* Ken Burns drift on the active slide — subtle scale to add life to the still image */
.hero-slide.is-active img {
  animation: hero-kenburns 14s ease-out forwards;
}
@keyframes hero-kenburns {
  0%   { transform: scale(1.03); }
  100% { transform: scale(1.08); }
}

.hero-dot {
  width: 24px;
  height: 6px;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.30);
  transition: background-color .35s ease, width .35s ease, transform .2s ease;
  cursor: pointer;
}
.hero-dot:hover  { background: rgb(255 255 255 / 0.55); }
.hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hero-dot.is-active {
  width: 48px;
  background: rgb(255 255 255 / 0.95);
}

/* ===================================================================
   FIXED HEADER CLEARANCE
   Each page now owns its own main padding-top via Tailwind classes, so
   they can pull the first section flush against the fixed nav (no
   visible body-cream sliver between the two). This previous global
   override is removed.
=================================================================== */

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in-view, [data-testimonials-track] { transition: none !important; transform: none !important; }
  .animate-pulse, .animate-fade-up, .animate-fade-in { animation: none !important; }
  .hero-slide { transition: none !important; }
  .hero-slide.is-active img { animation: none !important; transform: none !important; }
}