/* Catalyst polish layer: depth, colour, type. Loaded last so it refines the base styles. */
:root{
  --sh-1:0 1px 2px rgba(60,35,20,.06),0 4px 10px rgba(60,35,20,.05),0 18px 40px -12px rgba(60,35,20,.14);
  --sh-2:0 2px 4px rgba(60,35,20,.06),0 12px 24px rgba(255,107,53,.08),0 34px 70px -18px rgba(204,71,16,.22);
  --glow:0 10px 24px -6px rgba(255,107,53,.55),0 24px 48px -12px rgba(255,107,53,.38);
}
html{background:#f5f1ea}
body{
  background:
    radial-gradient(900px 520px at 85% -8%,rgba(255,138,82,.20),transparent 60%),
    radial-gradient(760px 480px at -6% 12%,rgba(245,183,81,.18),transparent 62%),
    radial-gradient(900px 600px at 50% 105%,rgba(255,107,53,.10),transparent 60%),
    #f5f1ea;
  background-attachment:fixed;
}
::selection{background:#ff6b35;color:#fff}
:focus-visible{outline:3px solid rgba(255,107,53,.55);outline-offset:3px;border-radius:8px}

/* Type */
h1,h2,h3{text-wrap:balance;letter-spacing:-.022em}
h1{line-height:1.04}
h2{line-height:1.1}
p,li{text-wrap:pretty}
body{font-feature-settings:"kern","liga","calt";letter-spacing:-.003em}

/* Buttons */
.btn{transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,filter .2s ease}
.btn-primary,.pcta,.bl-cta .btn-primary{
  background:linear-gradient(180deg,#ff8a55 0%,#ff6b35 55%,#f25a22 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(160,50,10,.25),var(--glow);
}
.btn-primary:hover{transform:translateY(-2px);filter:saturate(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(160,50,10,.25),0 14px 28px -6px rgba(255,107,53,.62),0 32px 60px -14px rgba(255,107,53,.45)}
.btn-primary:active{transform:translateY(0)}
.btn-secondary{box-shadow:inset 0 1px 0 #fff,var(--sh-1)}
.btn-secondary:hover{transform:translateY(-2px)}
.btn-dark{background:linear-gradient(180deg,#232c3f,#111827);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 30px -8px rgba(17,24,39,.5)}

/* Cards: layered, warm-tinted depth with a light top edge */
.svc,.faq-item,.process-card,.proof-card,.case-card,.plan,.calc-in,.bl-card,.bl-feat{
  background-image:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.0) 42%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),var(--sh-1);
  border-color:rgba(60,35,20,.07);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease;
}
.svc:hover,.bl-card:hover,.process-card:hover,.case-card:hover,.proof-card:hover{
  transform:translateY(-6px);box-shadow:inset 0 1px 0 #fff,var(--sh-2);border-color:rgba(255,107,53,.28);
}
.plan.hot{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 4px rgba(60,35,20,.06),0 26px 60px -14px rgba(255,107,53,.40)}
.bl-feat{box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(60,35,20,.06),0 40px 80px -24px rgba(204,71,16,.28)}

/* Hero cards get coloured shadows matching their tint */
.hc-card.orange{box-shadow:0 24px 50px -14px rgba(255,107,53,.55)}
.hc-card.peach{box-shadow:0 24px 50px -16px rgba(255,150,100,.45)}
.hc-card.navy{box-shadow:0 26px 56px -14px rgba(17,24,39,.55)}
.hc-card.soft,.hc-card.media{box-shadow:var(--sh-1)}
.hc-badges span{box-shadow:inset 0 1px 0 #fff,0 6px 16px -6px rgba(60,35,20,.18)}

/* Dark sections */
.dark,.bl-cta-box{
  background:
    radial-gradient(700px 360px at 90% 0%,rgba(255,107,53,.28),transparent 60%),
    radial-gradient(520px 320px at 0% 100%,rgba(245,183,81,.14),transparent 60%),
    linear-gradient(160deg,#1a2234,#0f1522)!important;
}
.bl-cta-box{box-shadow:0 40px 80px -30px rgba(15,21,34,.6)}

/* Header glass */
header.pillnav .pill-wrap{
  background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(60,35,20,.06),0 18px 44px -14px rgba(60,35,20,.22);
}

@media (prefers-reduced-motion:reduce){.svc:hover,.bl-card:hover,.btn-primary:hover{transform:none}}

/* Section rhythm: every content section gets breathing room so cards never touch the next band */
section:not(.hero):not(.dark):not(.final-cta){padding-top:88px;padding-bottom:88px}
@media(max-width:700px){section:not(.hero):not(.dark):not(.final-cta){padding-top:60px;padding-bottom:60px}}
/* Hero cards on phones: let each card be as tall as its content so nothing is clipped */
@media(max-width:520px){.c1{min-height:300px}.c2,.c3,.c4,.c5{min-height:0}.hc-card{padding:22px}}

/* Metric tiles: keep words whole */
.case-metrics{gap:8px;padding:0 14px 20px}
.case-metrics div{padding:10px 4px}
.case-metrics strong{overflow-wrap:normal;word-break:normal;hyphens:none;font-size:.92rem;letter-spacing:-.02em}
.case-metrics span{font-size:.7rem;line-height:1.25;display:block}

.social{display:flex;gap:10px;margin-top:18px}
.social a{width:42px;height:42px;border-radius:12px;background:#fff;display:grid;place-items:center;box-shadow:inset 0 1px 0 #fff,0 8px 18px -6px rgba(0,0,0,.45);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
.social a:hover{transform:translateY(-4px);box-shadow:0 14px 26px -8px rgba(255,107,53,.65)}
.social img{width:20px;height:20px;display:block}
.social-contact{margin-top:6px}.social-contact .social a{box-shadow:inset 0 1px 0 #fff,0 6px 16px -6px rgba(60,35,20,.25);border:1px solid rgba(60,35,20,.08)}

/* Menu button: drawn icon that turns into a cross */
.pburger{font-size:0!important;line-height:0;position:relative;width:46px;height:46px;border-radius:50%!important;border:0!important;background:linear-gradient(180deg,#ff8a55,#f25a22)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px -6px rgba(255,107,53,.6);cursor:pointer;transition:transform .2s ease}
.pburger:active{transform:scale(.94)}
.pburger::before,.pburger::after{content:"";position:absolute;left:14px;top:22px;width:18px;height:2.5px;border-radius:2px;background:#fff;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,opacity .2s ease}
.pburger::before{box-shadow:0 -6px 0 #fff,0 6px 0 #fff}
.pburger::after{opacity:0}
.pburger[aria-expanded="true"]::before{transform:rotate(45deg);box-shadow:none}
.pburger[aria-expanded="true"]::after{opacity:1;transform:rotate(-45deg)}
.pburger{margin-left:auto;margin-right:-22px}

/* Gradient italic words: give the glyphs room so descenders (y, g) and italic tails are not clipped */
.built h2 em{display:inline-block;padding:.04em .14em .2em .04em;margin:-.04em -.14em -.2em -.04em;line-height:1.15}
.built h2{margin-bottom:22px}

/* Shorter hero on phones: keep video, steps and channel logos */
@media(max-width:520px){.hero-cards .c3,.hero-cards .c4,.hero-cards .c5{display:none}.hc-mid{order:0}}

/* Section labels: brand-colour gradient text, a touch larger */
.eyebrow{background:linear-gradient(90deg,#b4410c,#e8661f 55%,#d98a12);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;font-size:.8rem;letter-spacing:.16em}
.dark .eyebrow,.final-cta .eyebrow,.bl-cta-box .eyebrow{background:linear-gradient(90deg,#ffb27a,#ffd08a);-webkit-background-clip:text;background-clip:text}

/* Soft colour glow behind each section, alternating sides, so the page has depth instead of flat bands */
section:not(.hero):not(.dark):not(.final-cta){position:relative;isolation:isolate;overflow:hidden}
section:not(.hero):not(.dark):not(.final-cta)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(640px 320px at 50% -4%,rgba(255,138,82,.16),transparent 70%),radial-gradient(520px 360px at 100% 100%,rgba(245,183,81,.12),transparent 70%)}
section:not(.hero):not(.dark):not(.final-cta):nth-of-type(even)::before{
  background:radial-gradient(560px 340px at 0% 0%,rgba(245,183,81,.16),transparent 70%),radial-gradient(640px 320px at 80% 108%,rgba(255,107,53,.12),transparent 70%)}
.section-head h2,.built h2{background:linear-gradient(180deg,#141821 55%,#3a2a24);-webkit-background-clip:text;background-clip:text;color:transparent}
.built h2 em{background:linear-gradient(90deg,#ff6b35,#f5a23a);-webkit-background-clip:text;background-clip:text}

/* Bigger, lighter section headings with a brand-colour accent word */
.section-head h2{font-size:clamp(2.4rem,5vw,4rem);font-weight:600;letter-spacing:-.035em;line-height:1.04}
.section-head h2 em,.mission h2 em{font-style:italic;background:linear-gradient(90deg,#ff6b35,#f5a23a);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;padding:.04em .14em .2em .04em;margin:-.04em -.14em -.2em -.04em}
.section-head p{font-size:1.12rem}

/* Mission cards */
.mis-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:980px;margin:0 auto}
.mis{position:relative;background:#fff;border-radius:22px;padding:26px 24px;border:1px solid rgba(60,35,20,.07);box-shadow:inset 0 1px 0 #fff,var(--sh-1);overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
.mis::after{content:"";position:absolute;inset:auto -30% -60% -30%;height:70%;background:radial-gradient(closest-side,rgba(255,138,82,.28),transparent);pointer-events:none}
.mis:hover{transform:translateY(-6px);box-shadow:inset 0 1px 0 #fff,var(--sh-2)}
.mis b{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;color:#fff;font-size:.9rem;background:linear-gradient(180deg,#ff8a55,#f25a22);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 20px -8px rgba(255,107,53,.6);margin-bottom:16px}
.mis h3{font-family:'Playfair Display',Georgia,serif;font-size:1.4rem;letter-spacing:-.02em;margin:0 0 8px}
.mis p{color:var(--muted);margin:0;font-size:.97rem}
@media(max-width:800px){.mis-grid{grid-template-columns:1fr}}

/* Accent word in every heading */
h1 em,h2 em{font-style:italic;background:linear-gradient(90deg,#ff6b35,#f5a23a);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;padding:.04em .14em .2em .04em;margin:-.04em -.14em -.2em -.04em}
.dark h2 em,.final-cta h2 em,.bl-cta-box h2 em,#resources h2 em{background:linear-gradient(90deg,#ff9a66,#ffc974);-webkit-background-clip:text;background-clip:text}
.bl-sub{font-size:clamp(1.6rem,3vw,2.2rem)}

/* Fade each section glow out at the top and bottom so there is no hard line between sections */
section:not(.hero):not(.dark):not(.final-cta)::before{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 78%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 78%,transparent 100%)}

/* Orange glow back at full strength: centres sit inside each section and fade out before the edges, so no seam */
section:not(.hero):not(.dark):not(.final-cta)::before{
  background:radial-gradient(760px 300px at 50% 24%,rgba(255,122,64,.26),transparent 72%),radial-gradient(560px 300px at 92% 78%,rgba(245,183,81,.22),transparent 72%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%)}
section:not(.hero):not(.dark):not(.final-cta):nth-of-type(even)::before{
  background:radial-gradient(640px 300px at 8% 28%,rgba(245,183,81,.26),transparent 72%),radial-gradient(760px 320px at 58% 80%,rgba(255,107,53,.22),transparent 72%)}

/* Alignment: mission cards match the width of the other card grids; form fields get breathing room */
.mis-grid{max-width:none}
.contact-form .field{margin-bottom:16px}
.contact-form .form-grid{gap:16px}
.contact-form .field label{margin-bottom:6px;display:block}
