@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --flame:      #E8572A;
  --flame-pale: #FFF0EB;
  --teal:       #0D7A6B;
  --teal-pale:  #E6F5F3;
  --amber:      #D4920A;
  --amber-pale: #FEF6E4;
  --violet:     #6B4FBB;
  --violet-pale:#F0ECFB;
  --ink:        #111827;
  --ink-mid:    #374151;
  --ink-soft:   #6B7280;
  --ink-faint:  #9CA3AF;
  --white:      #FFFFFF;
  --off-white:  #F9FAFB;
  --border:     #E5E7EB;
  --sans:       'Outfit', system-ui, sans-serif;
  --max:        1080px;
  --pad:        clamp(1.5rem, 5vw, 4rem);
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.10);
}

html { scroll-behavior: smooth; }
body { font-family: var(--sans); font-size: 17px; line-height: 1.7; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; }

/* ── SCROLL ANIMATIONS ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(.22,.68,0,1.2), transform 0.65s cubic-bezier(.22,.68,0,1.2);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── ANIMATED ICONS ── */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes spin-slow { to{transform:rotate(360deg)} }
@keyframes pulse-ring { 0%{transform:scale(1);opacity:.4} 100%{transform:scale(1.5);opacity:0} }
@keyframes draw { to{stroke-dashoffset:0} }
@keyframes bounce-dot { 0%,80%,100%{transform:scale(0)} 40%{transform:scale(1)} }
@keyframes wiggle { 0%,100%{transform:rotate(-5deg)} 50%{transform:rotate(5deg)} }
@keyframes grow-up { from{transform:scaleY(0)} to{transform:scaleY(1)} }

.icon-animated { display: inline-flex; align-items:center; justify-content:center; }
.icon-float { animation: float 3s ease-in-out infinite; }
.icon-wiggle { animation: wiggle 2s ease-in-out infinite; }

/* ── NAV ── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--pad);
}
.nav-inner { max-width: var(--max); margin: 0 auto; display:flex; align-items:center; justify-content:space-between; height: 70px; }
.nav-logo { font-size: 1.3rem; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: -0.02em; display:flex; align-items:center; gap:0.5rem; }
.nav-logo-dot { width: 8px; height: 8px; background: var(--flame); border-radius: 50%; display:inline-block; }
.nav-links { display:flex; align-items:center; gap:2.5rem; list-style:none; }
.nav-links a { font-size: 0.88rem; font-weight: 500; color: var(--ink-soft); text-decoration:none; letter-spacing:0.04em; transition: color 0.2s; position: relative; }
.nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--flame); border-radius:2px; transition: width 0.25s; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-cta { background: var(--flame) !important; color: white !important; padding: 0.5rem 1.3rem; border-radius: 100px; font-size: 0.88rem !important; }
.nav-cta::after { display:none !important; }
.nav-cta:hover { background: #c94820 !important; }
.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:4px; }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; border-radius:2px; transition: all 0.3s; }

/* ── LAYOUT ── */
.section { padding: clamp(5rem,10vw,9rem) var(--pad); }
.section-sm { padding: clamp(3rem,6vw,5rem) var(--pad); }
.inner { max-width: var(--max); margin: 0 auto; }
.bg-white { background: var(--white); }
.bg-off { background: var(--off-white); }

/* ── TYPE ── */
.eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--flame); margin-bottom: 1rem; display:block; }
.eyebrow-teal { color: var(--teal); }
.eyebrow-amber { color: var(--amber); }
.eyebrow-violet { color: var(--violet); }
h1,h2,h3,h4 { font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
.h-display { font-size: clamp(2.6rem, 5.5vw, 4rem); }
.h-xl     { font-size: clamp(2rem, 4vw, 3rem); }
.h-lg     { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.h-md     { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.h-sm     { font-size: 1.1rem; }
.lead     { font-size: clamp(1.05rem, 1.8vw, 1.2rem); color: var(--ink-mid); line-height: 1.8; font-weight: 400; }
.body-sm  { font-size: 0.95rem; color: var(--ink-mid); line-height: 1.75; }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; gap:0.4rem; padding:0.75rem 1.75rem; border-radius:100px; font-weight:600; font-size:0.92rem; text-decoration:none; transition:all 0.2s; cursor:pointer; border:none; font-family:var(--sans); }
.btn:hover { transform: translateY(-2px); }
.btn-flame { background:var(--flame); color:white; }
.btn-flame:hover { background:#c94820; box-shadow: 0 8px 24px rgba(232,87,42,0.3); }
.btn-outline { border:2px solid var(--ink); color:var(--ink); background:transparent; }
.btn-outline:hover { border-color:var(--flame); color:var(--flame); }
.btn-outline-flame { border:2px solid var(--flame); color:var(--flame); background:transparent; }
.btn-outline-flame:hover { background:var(--flame); color:white; }
.btn-white { background:white; color:var(--flame); }
.btn-white:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.btn-ghost { color:var(--ink-mid); background:transparent; padding:0.75rem 0; }
.btn-ghost:hover { color:var(--flame); transform:none; }
.btn-ghost .arr { display:inline-block; transition:transform 0.2s; }
.btn-ghost:hover .arr { transform:translateX(4px); }

/* ── ACCENT CHIPS / TAGS ── */
.chip { display:inline-flex; align-items:center; gap:0.4rem; padding:0.3rem 0.85rem; border-radius:100px; font-size:0.78rem; font-weight:600; letter-spacing:0.04em; }
.chip-flame  { background:var(--flame-pale);  color:var(--flame); }
.chip-teal   { background:var(--teal-pale);   color:var(--teal); }
.chip-amber  { background:var(--amber-pale);  color:var(--amber); }
.chip-violet { background:var(--violet-pale); color:var(--violet); }

/* ── ICON CONTAINERS ── */
.icon-wrap { width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; overflow:visible; }
.icon-wrap svg { width:28px; height:28px; }
.icon-wrap-flame  { background:var(--flame-pale); }
.icon-wrap-teal   { background:var(--teal-pale); }
.icon-wrap-amber  { background:var(--amber-pale); }
.icon-wrap-violet { background:var(--violet-pale); }
.icon-wrap-lg { width:72px; height:72px; border-radius:20px; }
.icon-wrap-lg svg { width:36px; height:36px; }

/* ── CARDS ── */
.card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2.25rem; transition: border-color 0.2s, transform 0.25s, box-shadow 0.25s; }
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent; }
.card-flame:hover  { box-shadow: 0 12px 40px rgba(232,87,42,0.12); }
.card-teal:hover   { box-shadow: 0 12px 40px rgba(13,122,107,0.10); }
.card-amber:hover  { box-shadow: 0 12px 40px rgba(212,146,10,0.10); }
.cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; }
.cards-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.75rem; }
.card h3 { font-size:1.1rem; margin-bottom:0.6rem; font-weight:700; }
.card p  { font-size:0.92rem; color:var(--ink-mid); line-height:1.7; }
.card-link { display:inline-flex; align-items:center; gap:0.3rem; font-size:0.85rem; font-weight:600; text-decoration:none; margin-top:1.25rem; transition:gap 0.2s; }
.card-link:hover { gap:0.5rem; }
.card-link-flame  { color:var(--flame); }
.card-link-teal   { color:var(--teal); }
.card-link-amber  { color:var(--amber); }

/* ── STAT CARDS ── */
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.stat-card { background:white; border:1px solid var(--border); border-radius:var(--radius-md); padding:1.75rem 1.5rem; text-align:center; }
.stat-number { font-size:2.4rem; font-weight:700; line-height:1; letter-spacing:-0.03em; }
.stat-label  { font-size:0.82rem; color:var(--ink-soft); margin-top:0.35rem; font-weight:500; }

/* ── HERO PHOTO ── */
.hero-photo-wrap { border-radius:var(--radius-lg); overflow:hidden; background:var(--flame-pale); position:relative; }
.hero-photo-wrap img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.hero-photo-badge { position:absolute; bottom:1.5rem; left:1.5rem; background:white; border-radius:var(--radius-md); padding:0.9rem 1.25rem; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:0.75rem; }
.hero-photo-badge .badge-label { font-size:0.82rem; color:var(--ink-soft); }
.hero-photo-badge .badge-value { font-size:0.95rem; font-weight:700; color:var(--ink); }

/* ── QUOTE BLOCK ── */
.quote-block { border-left:4px solid var(--flame); padding:1.5rem 2rem; background:var(--off-white); border-radius:0 var(--radius-md) var(--radius-md) 0; }
.quote-block blockquote { font-size:clamp(1.05rem,1.8vw,1.25rem); font-weight:500; color:var(--ink); line-height:1.6; font-style:italic; }
.quote-block cite { display:block; margin-top:0.75rem; font-size:0.82rem; color:var(--ink-soft); font-style:normal; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; }

/* ── TWO-COL LAYOUT ── */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,5rem); align-items:center; }
.two-col-start { align-items:start; }

/* ── CHALLENGE/OUTCOME BOXES ── */
.box-challenge { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem; }
.box-challenge h3 { font-size:0.8rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--flame); margin-bottom:1.25rem; }
.box-challenge ul { list-style:none; }
.box-challenge li { font-size:0.93rem; color:var(--ink-mid); padding:0.55rem 0; border-bottom:1px solid var(--border); display:flex; gap:0.75rem; align-items:flex-start; line-height:1.5; }
.box-challenge li:last-child { border-bottom:none; padding-bottom:0; }
.box-challenge li::before { content:''; width:6px; height:6px; background:var(--flame); border-radius:50%; flex-shrink:0; margin-top:0.5rem; }
.box-outcome { border-radius:var(--radius-lg); padding:2rem; }
.box-outcome-teal   { background:var(--teal);   color:white; }
.box-outcome-flame  { background:var(--flame);  color:white; }
.box-outcome-amber  { background:var(--amber);  color:white; }
.box-outcome h3 { font-size:0.75rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; opacity:0.6; margin-bottom:1rem; }
.box-outcome p { font-size:1.05rem; line-height:1.65; font-weight:500; }

/* ── ACCENT DIVIDER ── */
.accent-line { width:48px; height:4px; border-radius:4px; margin-bottom:1.5rem; }
.accent-flame  { background:var(--flame); }
.accent-teal   { background:var(--teal); }
.accent-amber  { background:var(--amber); }

/* ── DARK SECTION ── */
.section-dark { background:#0F172A; color:white; padding:clamp(5rem,10vw,9rem) var(--pad); }
.section-dark .eyebrow { color:var(--flame); }
.section-dark h2 { color:white; }
.section-dark .lead { color:rgba(255,255,255,0.7); }

/* ── NAV-SERVICES ── */
.service-subnav { background:white; border-bottom:1px solid var(--border); padding:0 var(--pad); position:sticky; top:70px; z-index:90; }
.service-subnav .inner { display:flex; gap:0; overflow-x:auto; }
.service-subnav a { font-size:0.84rem; font-weight:600; color:var(--ink-soft); text-decoration:none; padding:1.1rem 1.5rem 1rem; border-bottom:2px solid transparent; white-space:nowrap; transition:color 0.2s, border-color 0.2s; }
.service-subnav a:hover { color:var(--ink); }
.service-subnav a.active { color:var(--flame); border-bottom-color:var(--flame); }

/* ── CTA BANNER ── */
.cta-banner { background:var(--ink); color:white; padding:clamp(4rem,8vw,6rem) var(--pad); text-align:center; }
.cta-banner h2 { color:white; font-size:clamp(1.8rem,3.5vw,2.6rem); margin-bottom:1rem; }
.cta-banner p { color:rgba(255,255,255,0.65); font-size:1.05rem; margin-bottom:2rem; max-width:46ch; margin-left:auto; margin-right:auto; }

/* ── CONTACT ── */
.contact-form-wrap { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2.5rem; box-shadow:var(--shadow-md); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { margin-bottom:1.25rem; }
.form-group label { display:block; font-size:0.84rem; font-weight:600; color:var(--ink); margin-bottom:0.45rem; }
.form-group input, .form-group textarea, .form-group select { width:100%; padding:0.75rem 1rem; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-family:var(--sans); font-size:0.95rem; color:var(--ink); background:var(--off-white); outline:none; transition:border-color 0.2s, background 0.2s; resize:vertical; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color:var(--flame); background:white; }
.form-group textarea { min-height:130px; }

/* ── FOOTER ── */
footer { background:#0F172A; color:rgba(255,255,255,0.55); padding:clamp(4rem,7vw,5rem) var(--pad); }
.footer-inner { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:3rem; }
.footer-brand .logo { font-size:1.2rem; font-weight:700; color:white; text-decoration:none; letter-spacing:-0.02em; display:flex; align-items:center; gap:0.4rem; }
.footer-brand p { font-size:0.86rem; margin-top:0.75rem; line-height:1.65; max-width:26ch; }
.footer-col h4 { font-size:0.73rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.3); margin-bottom:1.1rem; }
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:0.6rem; }
.footer-col a { color:rgba(255,255,255,0.55); text-decoration:none; font-size:0.9rem; transition:color 0.2s; }
.footer-col a:hover { color:var(--flame); }
.footer-bottom { max-width:var(--max); margin:2.5rem auto 0; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,0.07); display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.5rem; font-size:0.8rem; }

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .two-col,.cards-3,.stats-row,.footer-inner { grid-template-columns:1fr; }
  .cards-2 { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr 1fr; }
  .stats-row { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:640px){
  .nav-links { display:none; flex-direction:column; position:absolute; top:70px; left:0; right:0; background:white; border-bottom:1px solid var(--border); padding:1.5rem var(--pad); gap:1.25rem; z-index:99; }
  .nav-links.open { display:flex; }
  .nav-toggle { display:block; }
  .form-row { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr; }
  .stats-row { grid-template-columns:repeat(2,1fr); }
}