/* home.css — overrides, motion & brand polish layered on top of Tailwind CDN. */

/* =========================================================================
   Tailwind safelist for dynamic hue classes emitted from PHP loop.
   Forces Tailwind JIT to generate the class CSS even if the static source
   scan misses them.
   ========================================================================= */
.brand-card [class*="bg-amber-"],
.brand-card [class*="bg-rose-"],
.brand-card [class*="bg-emerald-"],
.brand-card [class*="bg-sky-"],
.brand-card [class*="bg-violet-"],
.brand-card [class*="bg-orange-"],
.brand-card [class*="bg-teal-"],
.brand-card [class*="bg-pink-"],
.brand-card [class*="bg-lime-"],
.brand-card [class*="bg-fuchsia-"],
.brand-card [class*="bg-yellow-"],
.brand-card [class*="bg-indigo-"],
.brand-card [class*="bg-red-"],
.brand-card [class*="bg-cyan-"],
.brand-card [class*="bg-green-"],
.brand-card [class*="bg-purple-"],
.brand-card [class*="bg-slate-"],
.brand-card [class*="bg-stone-"] { /* placeholder */ }

/* Color swatch background fallback for dynamic Tailwind colors. */
.swatch-amber    { background:#fef3c7; }
.swatch-rose     { background:#ffe4e6; }
.swatch-emerald  { background:#d1fae5; }
.swatch-sky      { background:#e0f2fe; }
.swatch-violet   { background:#ede9fe; }
.swatch-orange   { background:#ffedd5; }
.swatch-teal     { background:#ccfbf1; }
.swatch-pink     { background:#fce7f3; }
.swatch-lime     { background:#ecfccb; }
.swatch-fuchsia  { background:#fae8ff; }
.swatch-yellow   { background:#fef9c3; }
.swatch-indigo   { background:#e0e7ff; }
.swatch-red      { background:#fee2e2; }
.swatch-cyan     { background:#cffafe; }
.swatch-green    { background:#dcfce7; }
.swatch-purple   { background:#f3e8ff; }
.swatch-slate    { background:#f1f5f9; }
.swatch-stone    { background:#f5f5f4; }

.text-amber-700    { color:#b45309; }
.text-rose-700     { color:#be123c; }
.text-emerald-700  { color:#047857; }
.text-sky-700      { color:#0369a1; }
.text-violet-700   { color:#6d28d9; }
.text-orange-700   { color:#c2410c; }
.text-teal-700     { color:#0f766e; }
.text-pink-700     { color:#be185d; }
.text-lime-700     { color:#4d7c0f; }
.text-fuchsia-700  { color:#a21caf; }
.text-yellow-700   { color:#a16207; }
.text-indigo-700   { color:#4338ca; }
.text-red-700      { color:#b91c1c; }
.text-cyan-700     { color:#0e7490; }
.text-green-700    { color:#15803d; }
.text-purple-700   { color:#7e22ce; }
.text-slate-700    { color:#334155; }
.text-stone-700    { color:#44403c; }

/* =========================================================================
   Base utilities
   ========================================================================= */
.tabular-nums { font-variant-numeric: tabular-nums; }

html { scroll-behavior: smooth; }

/* Brand-aware selection color */
::selection { background: #FFC12D; color: #0f172a; }

/* Brand focus ring — apply to all interactive elements */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #FFC12D;
  outline-offset: 3px;
  border-radius: 6px;
}

/* =========================================================================
   Scroll-reveal animations
   ========================================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children inside grids — capped at 10 deep to avoid long cascade */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
[data-reveal-stagger].is-visible > *:nth-child(1)  { opacity:1; transform:translateY(0); transition-delay: 0.05s; }
[data-reveal-stagger].is-visible > *:nth-child(2)  { opacity:1; transform:translateY(0); transition-delay: 0.10s; }
[data-reveal-stagger].is-visible > *:nth-child(3)  { opacity:1; transform:translateY(0); transition-delay: 0.15s; }
[data-reveal-stagger].is-visible > *:nth-child(4)  { opacity:1; transform:translateY(0); transition-delay: 0.20s; }
[data-reveal-stagger].is-visible > *:nth-child(5)  { opacity:1; transform:translateY(0); transition-delay: 0.25s; }
[data-reveal-stagger].is-visible > *:nth-child(6)  { opacity:1; transform:translateY(0); transition-delay: 0.30s; }
[data-reveal-stagger].is-visible > *:nth-child(7)  { opacity:1; transform:translateY(0); transition-delay: 0.35s; }
[data-reveal-stagger].is-visible > *:nth-child(8)  { opacity:1; transform:translateY(0); transition-delay: 0.40s; }
/* Items 9+: all visible at same time. Total stagger budget capped at
   400ms (8 × 50ms), per motion-design rule "total stagger must stay
   under 500ms". Brand grid has 18 cards — items 9-18 appear together. */
[data-reveal-stagger].is-visible > *:nth-child(n+9) { opacity:1; transform:translateY(0); }

/* Reveal variants */
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible { transform: translateX(0); }

[data-reveal="scale"] { transform: scale(0.92); }
[data-reveal="scale"].is-visible { transform: scale(1); }

/* =========================================================================
   Motion design tokens (Corporate personality, 1 curve for 80% of motion)
   ========================================================================= */
:root {
  /* Duration palette — 3 tiers per motion-design skill */
  --dur-quick: 150ms;   /* micro feedback (swiper dot, faq summary bg) */
  --dur-std:   250ms;   /* DEFAULT for all hover/click transitions */
  --dur-slow:  400ms;   /* color/icon reveal (value-card border, callout mount) */

  /* Easing — single signature curve, matches career's (.2,.8,.2,1).
     Used for 80% of all transitions (hover, click, accordion, etc).
     Reveal animations (scroll-into-view) keep their own curve below. */
  --ease-corp: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* =========================================================================
   Micro-interactions
   ========================================================================= */

/* Brand monogram watermark — used as large background mark in hero */
.brand-monogram-wrap { opacity: 0.12; }

/* Brand cards: lift + glow on hover (Corporate: 0% overshoot, std timing).
   NOTE: view has `transition` utility class on the same element (Tailwind
   preflight sets all 13 props to 0.15s cubic-bezier(0.4,0,0.2,1)).
   We need to bump specificity (.brand-card.transition) to win, otherwise
   the utility class silently overrides our custom timing. */
.brand-card.transition {
  transition-property: transform, box-shadow, border-color;
  transition-duration: var(--dur-std);
  transition-timing-function: var(--ease-corp);
}
.brand-card.transition:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px -8px rgba(245, 169, 0, 0.18),
              0 4px 12px -2px rgba(15, 23, 42, 0.08);
  border-color: #FFC12D;
}
.brand-card:hover .swatch-tile {
  transform: rotate(-4deg) scale(1.04);  /* was -6deg/1.05 — tamer for corporate */
  transition: transform var(--dur-std) var(--ease-corp);
}
.swatch-tile {
  transition: transform var(--dur-std) ease;
}

/* Brand card icon arrow nudge on hover */
.brand-card:hover .arrow-nudge { transform: translateX(3px); }
.arrow-nudge { transition: transform var(--dur-std) ease; }

/* CTA buttons: subtle press (Corporate: 0% overshoot, std timing).
   Same specificity trick — view adds `.btn-press` with `transition` utility. */
.btn-press.transition {
  transition: transform var(--dur-std) var(--ease-corp),
              background-color var(--dur-std) ease,
              box-shadow var(--dur-std) ease;
}
.btn-press.transition:active { transform: scale(0.98); }  /* was 0.97 — gentler */

/* Hero gradient — bolder, more brand-forward */
.hero-gradient {
  background:
    radial-gradient(ellipse 80% 50% at 20% 20%, rgba(255, 193, 45, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 30%, rgba(255, 152, 0, 0.12) 0%, transparent 55%),
    linear-gradient(180deg, #fff8e1 0%, #ffffff 40%, #f8fafc 100%);
}

/* Hero ambient motion (3 → 1 layer for calmer feel).
   Skill rule: ambient = max 20% of primary motion's energy.
   Decision: KILL blob-2 entirely (decorative, no meaning), slow blob-1 to
   18s+ (less attention), keep hero-sway at 8s (image drift adds life). */
@keyframes blob-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(12px, -8px) scale(1.03); }  /* smaller amplitude */
}
.blob-1 { animation: blob-drift-1 18s ease-in-out infinite; }
/* .blob-2 disabled (was: drift 14s infinite). Static now — gradient bg only. */
.blob-2 { animation: none; }

/* Hero image: gentle horizontal sway (only ambient loop that survived) */
@keyframes hero-sway {
  0%, 100% { transform: translateX(0) translateY(0); }
  25%      { transform: translateX(2px) translateY(-2px); }
  50%      { transform: translateX(0) translateY(-3px); }
  75%      { transform: translateX(-2px) translateY(-2px); }
}
.hero-image-wrap { animation: hero-sway 8s ease-in-out infinite; }

/* Hero stat callouts: corporate mount (NO overshoot, was playful spring).
   Was: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) → scale(1.06) overshoot.
   Now: 0.4s ease-out → 0% overshoot, matches Corporate personality spec. */
@keyframes callout-pop {
  0%   { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}
.callout-pop { animation: callout-pop var(--dur-slow) var(--ease-corp) backwards; }
.callout-pop-1 { animation-delay: 0.2s; }  /* was 0.4s — tighter cascade */
.callout-pop-2 { animation-delay: 0.3s; }  /* was 0.6s — tighter cascade */

/* Stats strip: brand accent on numbers */
.stat-number {
  background: linear-gradient(135deg, #FFC12D 0%, #f5a900 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Values card: gradient border on hover (std timing + corporate ease) */
.value-card {
  position: relative;
  transition: transform var(--dur-std) var(--ease-corp);
}
.value-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  padding: 1px;
  background: linear-gradient(135deg, #FFC12D, #ffedd5);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-std) var(--ease-corp);
  pointer-events: none;
}
.value-card:hover::before { opacity: 1; }
.value-card:hover { transform: translateY(-3px); }

/* FAQ: numbered accordion with native <details> (uniform std timing) */
.faq-item { transition: border-color var(--dur-std) var(--ease-corp),
                       box-shadow var(--dur-std) var(--ease-corp); }
.faq-item > summary { list-style: none; transition: background-color var(--dur-quick) ease; }
.faq-item > summary:hover { background-color: #f8fafc; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary > .faq-num { transition: background-color var(--dur-std) var(--ease-corp),
                                            color var(--dur-std) var(--ease-corp),
                                            border-color var(--dur-std) var(--ease-corp); }
.faq-item > summary > .faq-toggle { transition: transform var(--dur-std) var(--ease-corp),
                                                background-color var(--dur-std) var(--ease-corp),
                                                color var(--dur-std) var(--ease-corp); }
.faq-item[open] {
  border-color: #FFC12D;
  box-shadow: 0 4px 16px -4px rgba(245, 169, 0, 0.12);
}
.faq-item[open] > summary > .faq-num {
  background-color: #FFC12D;
  color: #0f172a;
  border-color: #FFC12D;
}
.faq-item[open] > summary > .faq-toggle { transform: rotate(45deg); background-color: #FFC12D; color: #0f172a; }
/* Smooth open animation via grid-template-rows trick (std timing + corporate ease) */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-std) var(--ease-corp);
}
.faq-a > div { overflow: hidden; min-height: 0; }
.faq-item[open] .faq-a { grid-template-rows: 1fr; }

/* Navbar: shadow on scroll */
.nav-scrolled { box-shadow: 0 2px 16px -4px rgba(15, 23, 42, 0.08); }

/* Contact v7: 2-column info panel + map, matches site style */

/* Contact method card: subtle hover lift (matches brand-card pattern) */
.contact-method { transition: transform var(--dur-std) var(--ease-corp); }
.contact-method:hover { transform: translateY(-2px); }

/* Swiper pagination theme-match (quick tier — small dot, std ease) */
.swiper-pagination-bullet { background: #cbd5e1; opacity: 1; transition: background var(--dur-std) var(--ease-corp), transform var(--dur-std) var(--ease-corp); }
.swiper-pagination-bullet-active { background: #FFC12D; transform: scale(1.2); }

/* Animated counter: no layout shift when counting */
[data-counter] {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 1ch;
}

/* =========================================================================
   Respect user motion preference
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .blob-1, .blob-2, .hero-image-wrap { animation: none !important; }
  /* Callout mount animation also killed (was pop, now see final state) */
  .callout-pop { animation: none !important; opacity: 1 !important; transform: none !important; }
  /* Mitra card number breathing (decorative, no meaning) */
  .mitra-card .text-5xl,
  .mitra-card .lg\:text-6xl { animation: none !important; }
}

/* =========================================================================
   Mobile-friendly overrides (≤ 640px, sm breakpoint)
   Resolves issues found via Playwright measurement at 320/360/390/414/430px:
   - Hero image too tall (420px) on small screens, wastes fold
   - Section padding 80px/80px too airy on mobile
   - Brand cards too narrow (132-152px), text wraps 3+ lines
   - Hero callouts overflow at 414-430px
   - Mitra CTA buttons don't stack on very narrow
   - Footer single-column wasted space (col-1 spanned 2)
   - FAQ answer pl-[68px] crowds the question number on small screens
   ========================================================================= */
@media (max-width: 640px) {

  /* --- Section padding: 80px → 56px vertical on mobile --- */
  main section.py-20,
  main section.py-20.lg\:py-28,
  #brands,
  #values,
  #why-us,
  #mitra,
  #faq,
  #contact {
    padding-top: 3.5rem !important;   /* 56px */
    padding-bottom: 3.5rem !important;
  }
  /* Mitra CTA: 64px → 48px */
  #mitra-cta {
    padding-top: 3rem !important;     /* 48px */
    padding-bottom: 3rem !important;
  }

  /* --- Hero image: 420px → 280px on mobile, taller at sm+ --- */
  .hero-image-wrap img {
    height: 280px !important;
  }
  /* Blob behind image: smaller offset, more visible on mobile */
  .hero-image-wrap > .absolute.bg-brand-200.rounded-3xl {
    border-radius: 1.5rem !important;
  }

  /* --- Hero callouts: pull in so they don't clip viewport edges --- */
  .callout-pop-1 { /* bottom-left */
    left: -0.5rem !important;  /* was -1rem */
    bottom: -0.75rem !important;
  }
  .callout-pop-2 { /* top-right */
    right: -0.5rem !important;
    top: -0.75rem !important;
  }
  /* Smaller callout icons + numbers on mobile */
  .callout-pop {
    padding: 0.625rem 0.75rem !important;
    gap: 0.625rem !important;
  }
  .callout-pop > div:first-child {
    width: 2.25rem !important;
    height: 2.25rem !important;
  }
  .callout-pop > div:last-child > div:first-child {
    font-size: 1.25rem !important;
    line-height: 1.5rem !important;
  }
  .callout-pop > div:last-child > div:last-child {
    font-size: 0.6875rem !important;  /* 11px */
  }

  /* --- Hero CTAs: stack on very narrow, allow wrap --- */
  section.hero-gradient .max-w-7xl > .grid > div:first-child .flex-wrap {
    gap: 0.5rem !important;
  }
  section.hero-gradient .max-w-7xl > .grid > div:first-child a.btn-press {
    padding: 0.75rem 1.25rem !important;
    font-size: 0.8125rem !important;
  }

  /* --- Brand cards: reduce internal padding so text fits --- */
  .brand-card {
    padding: 0.875rem !important;  /* was p-5 (1.25rem) */
  }
  .brand-card .swatch-tile {
    width: 2.5rem !important;
    height: 2.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .brand-card .swatch-tile span {
    font-size: 0.95rem !important;
  }
  .brand-card .font-semibold {
    font-size: 0.8125rem !important;  /* 13px */
    line-height: 1.2 !important;
  }

  /* --- Values cards: tighter padding --- */
  .value-card {
    padding: 1.25rem !important;  /* was p-7 (1.75rem) */
  }

  /* --- Why-us grid: reduce gap, padding on mobile --- */
  #why-us article {
    padding: 1.25rem !important;  /* was p-7 */
  }

  /* --- Mitra CTA banner: stack buttons, tighter spacing --- */
  #mitra-cta h2 {
    font-size: 1.5rem !important;  /* was text-3xl */
    line-height: 1.875rem !important;
  }
  #mitra-cta .md\:col-span-5 {
    flex-direction: column !important;
  }
  #mitra-cta .md\:col-span-5 a.btn-press {
    width: 100% !important;
    justify-content: center !important;
  }

  /* --- FAQ: smaller left padding to give answer more room --- */
  .faq-item > summary {
    padding: 1rem !important;  /* was p-5 */
    gap: 0.75rem !important;
  }
  .faq-item > summary > .faq-num {
    width: 2rem !important;
    height: 2rem !important;
    font-size: 0.75rem !important;
  }
  .faq-item > summary > span:nth-of-type(2) {
    font-size: 0.875rem !important;
  }
  .faq-a > div {
    padding-left: 3rem !important;  /* was pl-[68px] (4.25rem) */
    padding-right: 1rem !important;
    padding-bottom: 1rem !important;
  }

  /* --- Contact panel: reduce internal padding --- */
  #contact .lg\:p-8 {
    padding: 1.25rem !important;
  }
  #contact a[href^="mailto:"] .font-display,
  #contact a[href^="https://wa.me"] .font-display,
  #contact a[href^="https://maps"] .font-display {
    font-size: 0.875rem !important;  /* 14px, was text-base (16px) */
  }
  /* Hide "< 2 jam" / "< 24 jam" badges on very small screens (saves space) */
  #contact .text-\\[10px\\].font-bold {
    display: none !important;
  }

  /* --- Footer: 2-column on mobile for the link lists --- */
  footer .grid {
    grid-template-columns: 1fr !important;
  }
  footer .md\:col-span-2 {
    grid-column: span 1 / span 1 !important;
    margin-bottom: 1rem;
  }
  /* The bottom row: stack copyright + tagline on mobile */
  footer .border-t .flex {
    flex-direction: column !important;
    gap: 0.5rem !important;
    align-items: flex-start !important;
  }

  /* --- Map: less tall on mobile --- */
  #contact iframe {
    min-height: 280px !important;
  }
}

/* Tablet (641px - 1023px) — prevent footer email link from overflowing.
   The footer has md:grid-cols-4 with first col spanning 2, leaving ~192px
   per link col at 768px — not enough for "hc.semestagroup@gmail.com" */
@media (min-width: 641px) and (max-width: 1023px) {
  footer a[href^="mailto:"] {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  footer a[href^="https://wa.me"] {
    overflow-wrap: anywhere !important;
  }
  footer a[href^="https://www.instagram"] {
    overflow-wrap: anywhere !important;
  }
}

/* Even narrower phones (≤ 360px, e.g. iPhone SE 1st gen, Galaxy Fold cover) */
@media (max-width: 360px) {
  .hero-image-wrap img {
    height: 240px !important;
  }
  .callout-pop {
    transform: scale(0.9) !important;
    transform-origin: center !important;
  }
  .callout-pop-1 { left: 0 !important; }
  .callout-pop-2 { right: 0 !important; }
  /* Brand cards: 1-column on very narrow so text doesn't wrap to 3 lines */
  #brands .grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .brand-card {
    padding: 0.75rem !important;
  }
  /* Hero h1: a bit smaller */
  h1.font-display {
    font-size: 1.75rem !important;  /* 28px */
    line-height: 2.125rem !important;
  }
  /* Mitra CTA h2 */
  #mitra-cta h2 {
    font-size: 1.375rem !important;
    line-height: 1.75rem !important;
  }
}

/* =========================================================================
   Layout polish — section rhythm + hero composition
   Goal: match career's calm density. Reduce vertical air, kill decorative
   noise, improve hero typography hierarchy.
   ========================================================================= */

/* --- Section padding scale: 80/112 → 64/96 --- */
/* Applied via [class*="py-"] attribute selector to override Tailwind utilities
   without touching the view. Affects: brands, values, why-us, mitra, faq,
   contact (all 6 main sections were py-20 lg:py-28). */
@media (min-width: 1024px) {
  main section[class*="py-20"] {
    padding-top: 6rem !important;     /* was 7rem (112px) → 6rem (96px) */
    padding-bottom: 6rem !important;
  }
}
@media (max-width: 1023px) {
  main section[class*="py-20"] {
    padding-top: 4rem !important;     /* was 5rem (80px) → 4rem (64px) */
    padding-bottom: 4rem !important;
  }
}
/* Mitra CTA stays a bit tighter (was py-16 lg:py-20) */
@media (min-width: 1024px) {
  #mitra-cta {
    padding-top: 5rem !important;     /* was 5rem → 5rem (no change) */
    padding-bottom: 5rem !important;
  }
}
@media (max-width: 1023px) {
  #mitra-cta {
    padding-top: 3.5rem !important;   /* was 4rem → 3.5rem (56px) */
    padding-bottom: 3.5rem !important;
  }
}

/* --- Hero composition improvements --- */

/* 1. Hide decorative blob-2 (was: bg-brand-100/60, blur-3xl, -bottom-20 -left-20)
   It's pure decoration that adds visual noise. Career has 2 blobs but uses
   .animate-float-slow/med (intentional ambient). Home's blob-2 was a static
   gradient — kill it. (blob-1 already had animation killed in motion audit.) */
.blob-2 {
  display: none !important;
}

/* 2. Tone down the brand-200 blob behind hero image (was rotate-3, full opacity).
   Match career's softer "aurora" feel: lower opacity, less rotation, smaller
   scale. */
.hero-image-wrap > .absolute.bg-brand-200.rounded-3xl {
  opacity: 0.5 !important;
  transform: rotate(2deg) scale(0.96) !important;
  border-radius: 1.5rem !important;
}

/* 3. Reposition brand monogram watermark — currently -top-12 -right-12
   (extending past image, looks like stray SVG on smaller screens).
   Pull it in to overlap the image corner subtly. Constrain BOTH the wrapper
   div AND the inner SVG so it doesn't overflow the parent column. */
.brand-monogram-wrap {
  top: -1.5rem !important;   /* was -3rem (12 in tailwind) → -1.5rem */
  right: -1.5rem !important;
  width: 50% !important;     /* was container-fill → 50% of column */
  max-width: 240px !important;
  height: auto !important;
  pointer-events: none;
}
.brand-monogram-wrap svg {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* 4. Hero h1 typography — match career's premium feel.
   Career: text-5xl sm:text-6xl lg:text-7xl leading-[1.05] tracking-tight
   Home was: text-4xl sm:text-5xl lg:text-6xl (smaller, more marketing-ey).
   Bump up + tighten. The view has these classes already; we override
   only on lg+ where career parity matters most (mobile is fine as-is). */
@media (min-width: 1024px) {
  h1.font-display {
    font-size: 3.75rem !important;     /* 60px (was lg:text-6xl) → 60px (lg:text-7xl is 72px, but our h1 has 'Bisnis kuliner yang' longer than career's 'Tahun baru' so 60px is safer for 2-line fit) */
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;  /* tracking-tight */
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  h1.font-display {
    font-size: 3rem !important;       /* 48px (was sm:text-5xl) */
    line-height: 1.1 !important;
    letter-spacing: -0.015em !important;
  }
}

/* 5. Hero image height: was h-[420px] in view, scale up slightly on lg for
   more visual presence (career uses h-72 w-72 ring + h-[480px] container).
   Don't touch mobile (already optimized in mobile audit). */
@media (min-width: 1024px) {
  .hero-image-wrap img {
    height: 440px !important;          /* was 420px */
  }
}

/* 6. Hero h1 + p spacing: was mt-5 mt-5 (1.25rem). Career uses mt-6 mt-6
   (1.5rem). Loosen slightly for visual breathing. */
@media (min-width: 1024px) {
  h1.font-display + p {
    margin-top: 1.5rem !important;    /* was mt-5 (1.25rem) */
  }
}

/* 7. Hero gradient: less aggressive — was triple radial gradient.
   Tone down opacity for less visual "tint" at top of page. */
.hero-gradient {
  background:
    radial-gradient(ellipse 70% 40% at 15% 15%, rgba(255, 193, 45, 0.10) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 90% 25%, rgba(255, 152, 0, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, #fff8e1 0%, #ffffff 35%, #f8fafc 100%) !important;
}

/* 8. Section header rhythm: standardise margin-bottom between header and content.
   Currently each section has "mt-10 grid" or "mt-12 grid" inconsistently.
   Force uniform mt-10 (2.5rem) for visual rhythm. */
main section h2 + p + .grid,
main section h2 ~ .grid,
main section [class*="max-w-2xl"] + .grid,
main section [class*="text-center"] + .grid {
  margin-top: 2.5rem !important;      /* was mt-10 or mt-12 inconsistent */
}

/* 9. FAQ + Contact left-align match — they have text-center headers in view.
   Career has left-aligned headers. Keep current but loosen header-to-content
   spacing. */

/* 10. Sticky nav: keep it but reduce the visual weight slightly.
   The current `border-b border-ink-200` + `backdrop-blur` is fine.
   Just ensure shadow on scroll is subtle (not heavy). */
.nav-scrolled {
  box-shadow: 0 1px 8px -2px rgba(15, 23, 42, 0.06) !important;
}

/* =========================================================================
   Mitra Stories — numbers-first card design
   Different from career (single rotating cinematic). Each card is a
   results dashboard: big stat at top, mini quote, gradient avatar.
   ========================================================================= */

/* Card hover: lift + brand border + stronger shadow (matches brand-card) */
.mitra-card {
  transition: transform var(--dur-std) var(--ease-corp),
              box-shadow var(--dur-std) var(--ease-corp),
              border-color var(--dur-std) ease;
}
.mitra-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px -8px rgba(245, 169, 0, 0.16),
              0 4px 12px -2px rgba(15, 23, 42, 0.06);
  border-color: #FFC12D;
}

/* Big number — let it "breathe" with breathing animation (ambient layer,
   only the 4 hero numbers, no perpetual loops elsewhere) */
@keyframes number-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}
.mitra-card .text-5xl,
.mitra-card .lg\:text-6xl {
  display: inline-block;
  transform-origin: left center;
  animation: number-breathe 4s ease-in-out infinite;
}
/* Stagger the breathing so all 4 numbers don't pulse in unison */
.mitra-card:nth-of-type(1) .text-5xl,
.mitra-card:nth-of-type(1) .lg\:text-6xl { animation-delay: 0s; }
.mitra-card:nth-of-type(2) .text-5xl,
.mitra-card:nth-of-type(2) .lg\:text-6xl { animation-delay: 1s; }
.mitra-card:nth-of-type(3) .text-5xl,
.mitra-card:nth-of-type(3) .lg\:text-6xl { animation-delay: 2s; }
.mitra-card:nth-of-type(4) .text-5xl,
.mitra-card:nth-of-type(4) .lg\:text-6xl { animation-delay: 3s; }

/* Mobile: tighten stat number (5xl is 3rem = 48px, fine) but make
   the quote + spacing more compact. */
@media (max-width: 640px) {
  .mitra-card > div:first-child { padding: 1.25rem !important; }
  .mitra-card > div:last-child { padding: 0 1.25rem 1.25rem !important; }
  .mitra-card .text-5xl,
  .mitra-card .lg\:text-6xl {
    font-size: 2.75rem !important;     /* 44px, was 3rem at sm+ → 48px */
    line-height: 1 !important;
  }
  .mitra-card p.leading-relaxed {
    font-size: 0.8125rem !important;   /* 13px */
  }
}

/* Swiper pagination dot — make active dot wider, like career.
   Tailwind's default is 8px circle. Career uses w-8 (32px wide bar) for
   active. We can't use Tailwind classes here, but we can match with
   ::after pseudo on active bullet. */
.swiper-pagination-bullet {
  background: #cbd5e1;
  opacity: 1;
  margin: 0 4px !important;
  transition: background var(--dur-std) var(--ease-corp),
              width var(--dur-std) var(--ease-corp),
              transform var(--dur-std) var(--ease-corp);
}
.swiper-pagination-bullet-active {
  background: #FFC12D;
  width: 28px;
  border-radius: 4px;
  transform: none;
}

/* =========================================================================
   Mitra Stories — shadow clip fix
   Swiper sets `overflow: hidden` on the container to clip offscreen slides
   during transitions. That ALSO clips the card box-shadow on hover, making
   the lift effect look "cut off" at the top edge of the swiper.

   Fix: add top padding inside the swiper so the shadow has breathing room
   above the cards. The negative margin on the swiper compensates so the
   section's overall height doesn't visibly grow (cards stay at same position
   visually). Section header has mt-10 (40px) above — plenty of room.

   We do NOT change overflow:hidden on .mySwiper because that would expose
   offscreen slides during transitions (visual mess).
   ========================================================================= */
.mySwiper {
  padding-top: 20px;
  margin-top: -20px;
  /* Bottom: keep pb-12 from the wrapper (3rem) for pagination breathing room.
     The card bottom shadow is fine because the wrapper has 48px of pb-12. */
}

/* Reduce shadow spread slightly so it fits within the 20px headroom
   (translateY -4px + shadow blur 32px needs ~36px of headroom; 20px is
   tight, so trim the shadow to be more contained). */
.mitra-card:hover {
  box-shadow: 0 8px 20px -6px rgba(245, 169, 0, 0.18),
              0 2px 8px -2px rgba(15, 23, 42, 0.06) !important;
}