/* ============================================
   about.css — About Us Page Styles
   Company history, milestones, certifications, values
   ============================================ */

/* ── HEADER ── */
/* Sticky header navigation at top of page */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy);
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 5%;
  border-bottom: 1px solid var(--border);
}
/* Header logo image height constraint */
.site-header img { height: 42px; }
/* Fallback text logo when image is unavailable */
.logo-fallback {
  color: var(--gold-lt); font-family: 'Sora', sans-serif;
  font-weight: 800; font-size: 1.1rem; letter-spacing: 0.06em;
}
/* Right-aligned header container for phone and CTA */
.header-right { display: flex; align-items: center; gap: 20px; }
/* Header phone number link with animated status indicator */
.header-phone {
  color: var(--gold-lt); font-family: 'Sora', sans-serif;
  font-weight: 600; font-size: 0.92rem; text-decoration: none;
  display: flex; align-items: center; gap: 8px;
  transition: color 0.2s;
}
/* Hover state for header phone number */
.header-phone:hover { color: var(--white); }
/* Animated green status dot indicating availability */
.header-phone::before {
  content: '';
  display: inline-block; width: 8px; height: 8px;
  background: #4ade80; border-radius: 50%;
  box-shadow: 0 0 6px #4ade80;
  animation: pulse-dot 1.8s infinite;
}
/* Keyframe animation for pulsing status dot */
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.5; transform:scale(1.4); }
}
/* Header call-to-action button styling */
.header-cta-btn {
  background: var(--orange); color: #fff;
  padding: 9px 22px; border-radius: 6px; border: none;
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 0.88rem; cursor: pointer; letter-spacing: 0.03em;
  transition: background 0.2s, transform 0.15s; text-decoration: none;
}
/* Hover state for header CTA button with subtle lift effect */
.header-cta-btn:hover { background: var(--orange-h); transform: translateY(-1px); }

/* ── HERO ── */
/* About page hero banner with two-column layout */
.about-hero {
  background: var(--navy);
  display: flex; flex-wrap: wrap;
  min-height: 520px;
  overflow: hidden;
  position: relative;
}

/* Left content column in hero containing headline, description, and CTAs */
.hero-left {
  flex: 1; min-width: 300px;
  padding: 72px 5% 72px 5%;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; z-index: 2;
}
/* Eyebrow badge above headline with star icon */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(200,150,62,0.15); border: 1px solid var(--border);
  color: var(--gold-lt); font-family: 'Sora', sans-serif;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 5px 14px; border-radius: 4px;
  margin-bottom: 20px;
}
/* Star icon prefix for eyebrow badge */
.hero-eyebrow::before { content: '★'; color: var(--gold); }
/* Main hero headline with responsive font sizing */
.about-hero h1 {
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--white); line-height: 1.15; margin-bottom: 18px;
}
/* Highlighted text within headline using gold color */
.about-hero h1 em { font-style: normal; color: var(--gold-lt); }
/* Hero description paragraph with semi-transparent white */
.hero-desc {
  color: rgba(255,255,255,0.68); font-size: 1rem;
  line-height: 1.75; max-width: 480px; margin-bottom: 32px;
}
/* Row container for CTA buttons with wrapping support */
.hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
/* Primary CTA button with orange background and shadow */
.btn-primary {
  background: var(--orange); color: #fff;
  padding: 13px 32px; border-radius: 7px; border: none;
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 0.95rem;
  cursor: pointer; letter-spacing: 0.04em; text-decoration: none;
  box-shadow: 0 6px 20px rgba(232,98,10,0.35);
  transition: background 0.2s, transform 0.15s;
  display: inline-flex; align-items: center; gap: 8px;
}
/* Hover state for primary button with lift animation */
.btn-primary:hover { background: var(--orange-h); transform: translateY(-2px); }
/* Secondary outline button with gold border */
.btn-outline {
  background: transparent; color: var(--gold-lt);
  padding: 12px 24px; border-radius: 7px;
  border: 1.5px solid rgba(200,150,62,0.45);
  font-family: 'Sora', sans-serif; font-weight: 600; font-size: 0.95rem;
  cursor: pointer; text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
  display: inline-flex; align-items: center; gap: 8px;
}
/* Hover state for outline button with subtle background */
.btn-outline:hover { border-color: var(--gold-lt); background: rgba(200,150,62,0.08); }

/* Right photo column in hero with diagonal clip path */
.hero-photo {
  flex: 0 0 46%;
  position: relative; overflow: hidden;
  clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%);
}
/* Hero photo image with brightness adjustment */
.hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: brightness(0.8);
}
/* Placeholder container when hero photo is unavailable */
.hero-photo-placeholder {
  width: 100%; height: 100%; min-height: 520px;
  background: linear-gradient(135deg, var(--navy2) 0%, #1a3560 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  color: rgba(255,255,255,0.3);
}
/* Placeholder icon styling */
.hero-photo-placeholder .ms-icon {
  font-size: 4rem; opacity: 0.3;
}
/* Placeholder text styling */
.hero-photo-placeholder p {
  font-family: 'Sora', sans-serif; font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* Statistics overlay on hero photo showing key metrics */
.hero-photo-stats {
  position: absolute; bottom: 28px; left: 28px; right: 28px;
  display: flex; gap: 12px; flex-wrap: wrap;
}
/* Individual statistic card with glassmorphism effect */
.hps-item {
  background: rgba(10,22,40,0.82); backdrop-filter: blur(8px);
  border: 1px solid rgba(200,150,62,0.25); border-radius: 8px;
  padding: 12px 16px; flex: 1; min-width: 100px; text-align: center;
}
/* Statistic value display */
.hps-val {
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: 1.5rem; color: var(--white); display: block; line-height: 1;
}
/* Gold-colored accent within statistic value */
.hps-val span { color: var(--gold); }
/* Statistic label below value */
.hps-lbl { font-size: 0.72rem; color: rgba(255,255,255,0.5); margin-top: 4px; }

/* ── STORY ── */
/* Company story timeline section with alternating image/text blocks */
.story-section {
  background: var(--offwhite, #f5f7fa);
  padding: 88px 5%;
  position: relative;
}
/* Diagonal transition divider from hero section */
.story-section::before {
  content: '';
  position: absolute; top: -40px; left: 0; right: 0; height: 80px;
  background: var(--offwhite, #f5f7fa);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* Story block container with alternating layout */
.story-block {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 56px; margin-bottom: 80px;
}
/* Remove margin from last story block */
.story-block:last-child { margin-bottom: 0; }
/* Reverse layout for alternating story blocks */
.story-block.reverse { flex-direction: row-reverse; }

/* Story image container with shadow and rounded corners */
.story-img {
  flex: 0 0 44%; border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(10,22,40,0.14);
  position: relative;
}
/* Story image with fixed height and cover cropping */
.story-img img { width: 100%; height: 320px; object-fit: cover; display: block; }
/* Placeholder for story image when unavailable */
.story-img-placeholder {
  width: 100%; height: 320px;
  background: linear-gradient(135deg, #e8ecf2 0%, #d0d8e4 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  color: #94a3b8;
}
/* Placeholder icon styling */
.story-img-placeholder .ms-icon { font-size: 3.5rem; opacity: 0.5; }
/* Placeholder text styling */
.story-img-placeholder p {
  font-family: 'Sora', sans-serif; font-size: 0.75rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* Year badge positioned on story image */
.story-img-year {
  position: absolute; top: 16px; left: 16px;
  background: var(--navy); color: var(--gold-lt);
  font-family: 'Sora', sans-serif; font-weight: 800; font-size: 0.85rem;
  padding: 6px 14px; border-radius: 4px;
}

/* Story text content container */
.story-text { flex: 1; min-width: 280px; }
/* Story tag above headline */
.story-tag {
  display: inline-block; font-family: 'Sora', sans-serif;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold);
  border: 1px solid var(--border); padding: 4px 12px;
  border-radius: 3px; margin-bottom: 14px;
}
/* Story block headline */
.story-text h2 {
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--navy); margin-bottom: 14px; line-height: 1.2;
}
/* Story paragraph text */
.story-text p {
  color: #4b5563; font-size: 0.97rem; line-height: 1.8;
  margin-bottom: 12px;
}
/* Remove margin from last paragraph */
.story-text p:last-of-type { margin-bottom: 0; }

/* ── MILESTONES ── */
/* Horizontal timeline for company milestones */
.milestones-section {
  background: var(--navy);
  padding: 80px 5%;
  position: relative; overflow: hidden;
}
/* Diagonal transition divider from story section */
.milestones-section::before {
  content: '';
  position: absolute; top: -40px; left: 0; right: 0; height: 80px;
  background: var(--navy);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
/* Milestones section header container */
.ms-header { text-align: center; margin-bottom: 56px; }
/* Milestones tag above section headline */
.ms-tag {
  display: inline-block; font-family: 'Sora', sans-serif;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-lt);
  border: 1px solid var(--border); padding: 4px 12px;
  border-radius: 3px; margin-bottom: 14px;
}
/* Milestones section main headline */
.ms-header h2 {
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2rem); color: var(--white);
}

/* Timeline container with horizontal scrolling */
.timeline {
  position: relative; display: flex; gap: 0;
  overflow-x: auto; padding-bottom: 8px;
}

/* Horizontal timeline line with gradient effect */
.timeline::before {
  content: '';
  position: absolute; top: 22px; left: 0; right: 0; height: 2px;
  background: linear-gradient(to right,
    transparent 0%, rgba(200,150,62,0.4) 5%,
    rgba(200,150,62,0.4) 95%, transparent 100%);
}
/* Individual timeline item container */
.tl-item {
  flex: 1; min-width: 160px;
  text-align: center; padding: 0 12px;
  position: relative;
}
/* Timeline dot marker with gold border */
.tl-dot {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy2); border: 2px solid var(--gold);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: 0.75rem; color: var(--gold-lt);
  position: relative; z-index: 1; margin-bottom: 16px;
  transition: background 0.2s;
}
/* Hover state for timeline dot with color inversion */
.tl-item:hover .tl-dot { background: var(--gold); color: var(--navy); }
/* Timeline year display */
.tl-year {
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 0.82rem; color: var(--gold-lt); margin-bottom: 6px;
}
/* Timeline event description */
.tl-event {
  font-size: 0.82rem; color: rgba(255,255,255,0.55); line-height: 1.55;
}

/* ── CERTIFICATIONS ── */
/* Company certifications and credentials grid */
.certs-section {
  background: var(--white, #fff);
  padding: 80px 5%;
}
/* Certifications section inner container with max width constraint */
.certs-inner { max-width: 1000px; margin: 0 auto; }
/* Certifications section header */
.certs-head { text-align: center; margin-bottom: 48px; }
/* Generic section tag for consistent styling */
.sec-tag {
  display: inline-block; font-family: 'Sora', sans-serif;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold);
  border: 1px solid var(--border); padding: 4px 12px;
  border-radius: 3px; margin-bottom: 12px;
}
/* Certifications section headline */
.certs-head h2 {
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem); color: var(--navy);
}
/* 4-column grid layout for certification cards */
.cert-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
/* Individual certification card with hover effects */
.cert-card {
  border: 1px solid #e9ecef; border-radius: 10px; padding: 28px 20px;
  text-align: center; background: var(--offwhite, #f5f7fa);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  border-top: 3px solid transparent;
}
/* Hover state for certification card with lift and gold accent */
.cert-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(10,22,40,0.1);
  border-top-color: var(--gold);
}
/* Certification icon container */
.cert-icon {
  width: 64px; height: 64px; margin: 0 auto 14px;
  background: var(--navy); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-lt);
}
/* Certification icon (Material Symbols) size */
.cert-icon .material-symbols-outlined { font-size: 2rem; }
/* Certification name/title */
.cert-name {
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 0.88rem; color: var(--navy); margin-bottom: 6px;
}
/* Certification description text */
.cert-desc { font-size: 0.78rem; color: #6b7280; line-height: 1.6; }

/* ── VALUES ── */
/* Company core values section */
.values-section {
  background: var(--offwhite, #f5f7fa); padding: 80px 5%;
  position: relative;
}
/* Diagonal transition divider from certifications section */
.values-section::before {
  content: '';
  position: absolute; top: -40px; left: 0; right: 0; height: 80px;
  background: var(--offwhite, #f5f7fa);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
/* Values section two-column container */
.values-inner {
  display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start;
}
/* Values text content column */
.values-text { flex: 1; min-width: 280px; }
/* Values section headline */
.values-text h2 {
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem); color: var(--navy);
  margin-bottom: 14px; margin-top: 12px;
}
/* Values section introductory paragraph */
.values-text p {
  color: #4b5563; font-size: 0.95rem; line-height: 1.8; max-width: 440px;
}
/* 2-column grid for value cards */
.values-grid {
  flex: 1; min-width: 280px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
/* Individual value card with gold left border */
.value-card {
  background: var(--white, #fff); border-radius: 10px; padding: 24px 20px;
  border: 1px solid #e9ecef;
  border-left: 3px solid var(--gold);
  box-shadow: 0 2px 12px rgba(10,22,40,0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}
/* Hover state for value card with lift effect */
.value-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(10,22,40,0.1); }
/* Value icon container */
.value-icon { margin-bottom: 12px; color: var(--gold); }
/* Value icon (Material Symbols) size */
.value-icon .material-symbols-outlined { font-size: 1.8rem; }
/* Value card title */
.value-card h4 {
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 0.92rem; color: var(--navy); margin-bottom: 6px;
}
/* Value card description */
.value-card p { font-size: 0.82rem; color: #6b7280; line-height: 1.65; }

/* ── CONTACT BAND  ── */
/* Bottom contact band with form */
.contact-band {
  background: var(--navy);
  padding: 80px 5%;
  display: flex; flex-wrap: wrap;
  gap: 56px; align-items: center;
  position: relative; overflow: hidden;
}
/* Diagonal transition divider from values section */
.contact-band::before {
  content: '';
  position: absolute; top: -40px; left: 0; right: 0; height: 80px;
  background: var(--navy);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
/* Decorative radial gradient accent on right side */
.contact-band::after {
  content: '';
  position: absolute; top: -120px; right: -120px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,150,62,0.1), transparent 70%);
  pointer-events: none;
}
/* Contact text content container */
.contact-text { flex: 1; min-width: 280px; position: relative; z-index: 1; }
/* Contact section headline */
.contact-text h2 {
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--white);
  margin-bottom: 14px;
}
/* Contact section description paragraph */
.contact-text p { color: rgba(255,255,255,0.6); font-size: 0.97rem; line-height: 1.7; margin-bottom: 28px; }
/* Vertical list of contact links */
.contact-links { display: flex; flex-direction: column; gap: 12px; }
/* Individual contact link with icon */
.contact-link {
  display: flex; align-items: center; gap: 12px;
  color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.92rem;
  transition: color 0.2s;
}
/* Hover state for contact link with gold color */
.contact-link:hover { color: var(--gold-lt); }
/* Contact link icon styling */
.contact-link .material-symbols-outlined {
  font-size: 1.3rem; color: var(--gold);
}

/* Contact form panel with white background */
.contact-form-wrap {
  flex: 0 0 380px;
  background: var(--white, #fff); border-radius: 12px;
  box-shadow: 0 20px 60px rgba(10,22,40,0.25), 0 0 0 1px rgba(200,150,62,0.15);
  overflow: hidden; position: relative; z-index: 1;
}
/* Contact form header with dark navy background */
.cf-header {
  background: #112040; padding: 18px 28px 16px;
  border-bottom: 2px solid var(--gold);
}
/* Contact form header title */
.cf-header h3 {
  color: var(--white); font-family: 'Sora', sans-serif;
  font-size: 1.05rem; font-weight: 700; margin-bottom: 3px;
}
/* Contact form header subtitle */
.cf-header p {
  color: var(--muted, #8a96a8); font-size: 0.8rem;
  display: flex; align-items: center; gap: 6px;
}
/* Lightning bolt icon prefix for form subtitle */
.cf-header p::before { content: '⚡'; font-size: 0.85em; }
/* Contact form body container */
.cf-body { padding: 22px 28px 26px; }
/* Form row container with bottom margin */
.cf-row { margin-bottom: 12px; }
/* Form field label styling */
.cf-row label {
  display: block; font-size: 0.72rem; font-weight: 600;
  color: #6b7280; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px;
}
/* Form input/select/textarea base styling */
.cf-row input,
.cf-row select,
.cf-row textarea {
  width: 100%; padding: 10px 13px;
  border: 1.5px solid #e5e7eb; border-radius: 6px;
  font-family: 'DM Sans', sans-serif; font-size: 0.93rem;
  color: var(--navy); background: #fafafa; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
/* Focus state for form fields with gold border and glow */
.cf-row input:focus,
.cf-row select:focus,
.cf-row textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,150,62,0.1);
  background: #fff;
}
/* Textarea with vertical resize only */
.cf-row textarea { resize: vertical; min-height: 68px; }
/* Form submit button with orange background */
.form-submit {
  width: 100%; padding: 13px;
  background: var(--orange); color: #fff; border: none; border-radius: 7px;
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 0.95rem;
  cursor: pointer; letter-spacing: 0.04em;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(232,98,10,0.3);
}
/* Hover state for submit button with lift effect */
.form-submit:hover { background: var(--orange-h); transform: translateY(-2px); }
/* Privacy assurance text below form */
.cf-assurance {
  text-align: center; margin-top: 10px; font-size: 0.74rem; color: #9ca3af;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
/* Lock icon prefix for privacy assurance */
.cf-assurance::before { content: '🔒'; font-size: 0.8em; }

/* ── FOOTER ── */
/* Footer copyright section */
.site-footer-meta {
  background: #060e1c; color: rgba(255,255,255,0.35);
  text-align: center; padding: 20px 5%; font-size: 0.78rem;
}
/* Footer link styling */
.site-footer-meta a { color: rgba(255,255,255,0.45); text-decoration: none; }


@keyframes wa-bounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ── ANIMATE ── */
/* Scroll reveal animation base class (Animate On Scroll) */
.aos {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
/* Visible state for scroll-revealed elements */
.aos.visible { opacity: 1; transform: translateY(0); }

/* ── RESPONSIVE ── */
/* Tablet responsive styles (max-width: 1000px) */
@media (max-width: 1000px) {
  /* Switch certifications grid from 4 to 2 columns */
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Tablet responsive styles (max-width: 820px) */
@media (max-width: 820px) {
  /* Hero photo becomes full width with no diagonal clip, moves above content */
  .hero-photo { clip-path: none; flex: none; width: 100%; order: -1; }
  /* Reduce hero photo placeholder height */
  .hero-photo-placeholder { min-height: 260px; }
  /* Reduce padding on hero left content */
  .hero-left { padding: 40px 5% 32px; }
  /* Stack story blocks vertically, remove alternating layout */
  .story-block, .story-block.reverse { flex-direction: column; }
  /* Story image becomes full width */
  .story-img { flex: none; width: 100%; }
  /* Adjust timeline padding and spacing */
  .timeline { gap: 0; padding-bottom: 0; }
  /* Reduce timeline item minimum width */
  .tl-item { min-width: 140px; }
  /* Contact form becomes full width with max-width constraint */
  .contact-form-wrap { flex: none; width: 100%; max-width: 480px; }
  /* Values grid remains 2 columns on tablet */
  .values-grid { grid-template-columns: 1fr 1fr; }
}
/* Mobile responsive styles (max-width: 600px) */
@media (max-width: 600px) {
  /* Certifications grid remains 2 columns on small mobile */
  .cert-grid { grid-template-columns: 1fr 1fr; }
  /* Values grid switches to 1 column on small mobile */
  .values-grid { grid-template-columns: 1fr; }
  /* Stack hero statistics vertically */
  .hero-photo-stats { flex-direction: column; }
  /* Statistic items become full width */
  .hps-item { flex: none; }
}
/* Small mobile responsive styles (max-width: 480px) */
@media (max-width: 480px) {
  /* Hide header CTA button on smallest screens */
  .header-cta-btn { display: none; }
  /* Hide header phone text, show only icon + label */
  .header-phone { font-size: 0; }
  /* Replace phone text with "WhatsApp" label */
  .header-phone::after {
    content: 'WhatsApp';
    font-size: 0.88rem; font-family: 'Sora', sans-serif; font-weight: 600;
  }
  /* Stack hero CTA buttons vertically */
  .hero-cta-row { flex-direction: column; }
  /* Make hero buttons full width with centered content */
  .btn-primary, .btn-outline { width: 100%; justify-content: center; }
}