/* =================================================================
   TYG — The Yellow Group · Claymorphism
   style.css · target ≤ 500 lines
   NOTE: --yellow #FFD21F — verify with an eyedropper on your logo!
   ================================================================= */

/* ── 1. TOKENS ──────────────────────────────────────────────── */
:root{
  --yellow:#FFD21F;--yellow-soft:#FFE46B;--yellow-deep:#E5B400;--yellow-wash:#FFF3B8;
  --black:#111111;--ink:#141414;--muted:#5E5848;--bg:#FBF4DA;--surface:#FFFCF0;
  --white:#FFFFFF;--mint:#6FD3A8;--coral:#FF7A5C;--sky:#8CCBFF;
  --clay:12px 12px 24px rgba(112,80,0,.24),-10px -10px 22px rgba(255,255,255,.95),
         inset -6px -6px 12px rgba(112,80,0,.12),inset 6px 6px 12px rgba(255,255,255,.8);
  --clay-sm:6px 6px 14px rgba(112,80,0,.22),-5px -5px 12px rgba(255,255,255,.95),
            inset -3px -3px 6px rgba(112,80,0,.12),inset 3px 3px 6px rgba(255,255,255,.8);
  --clay-p:inset 6px 6px 12px rgba(112,80,0,.25),inset -5px -5px 10px rgba(255,255,255,.9);
  --clay-y:10px 10px 22px rgba(176,125,0,.38),-8px -8px 18px rgba(255,255,255,.9),
            inset -6px -6px 12px rgba(200,140,0,.45),inset 6px 6px 12px rgba(255,240,150,.9);
  --clay-b:12px 12px 24px rgba(40,30,0,.35),-8px -8px 18px rgba(255,255,255,.9),
            inset 5px 5px 10px rgba(255,255,255,.14),inset -6px -6px 12px rgba(0,0,0,.6);
  --r:32px;--ri:24px;--rp:999px;--rl:48px;
  --sp:cubic-bezier(.34,1.56,.64,1);--eo:cubic-bezier(.22,1,.36,1);
  --sec:clamp(72px,10vw,140px);--wrap:1180px;
}

/* ── 2. RESET & BASE ────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Nunito',sans-serif;font-size:17px;line-height:1.65;background:var(--bg);color:var(--ink);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
h1,h2,h3,h4{font-family:'Fredoka',sans-serif;line-height:1.1}
.skip-link{position:absolute;top:-99px;left:1rem;background:var(--yellow);color:var(--ink);padding:.5rem 1rem;border-radius:var(--rp);font-weight:800;z-index:9999;transition:top .2s}
.skip-link:focus{top:1rem}
.container{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem)}
.section-title{font-size:clamp(2rem,4vw,3rem);font-weight:700;margin-bottom:.5rem}
.section-sub{color:var(--muted);margin-bottom:3rem;max-width:50ch}

/* ── 3. CLAY BASE CLASSES (six + two modifiers) ─────────────── */
.clay{background:var(--surface);border-radius:var(--r);box-shadow:var(--clay)}
.clay-sm{background:var(--surface);border-radius:var(--r);box-shadow:var(--clay-sm)}
.inset{background:var(--bg);border-radius:var(--r);box-shadow:var(--clay-p)}
.clay.yellow,.clay-sm.yellow{background:var(--yellow);box-shadow:var(--clay-y)}
.clay.black,.clay-sm.black{background:var(--black);box-shadow:var(--clay-b)}

/* ── 4. BRACKET ─────────────────────────────────────────────── */
.bracket{position:relative}
.bracket::before,.bracket::after{content:'';position:absolute;width:28px;height:28px;border-color:var(--black);border-style:solid;border-width:0;pointer-events:none;z-index:2}
.bracket::before{top:12px;left:12px;border-top-width:4px;border-left-width:4px;border-radius:6px 0 0 0}
.bracket::after{bottom:12px;right:12px;border-bottom-width:4px;border-right-width:4px;border-radius:0 0 6px 0}
.on-black.bracket::before,.on-black.bracket::after{border-color:var(--yellow)}

/* ── 5. BUTTON ──────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.85rem 2rem;border-radius:var(--rp);font-family:'Nunito',sans-serif;font-size:1rem;font-weight:800;border:none;cursor:pointer;min-height:48px;transition:transform 350ms var(--sp),box-shadow 350ms var(--sp);text-decoration:none}
.btn.yellow{background:var(--yellow);color:var(--ink);box-shadow:var(--clay-y)}
.btn.black{background:var(--black);color:var(--white);box-shadow:var(--clay-b)}
.btn.cream{background:var(--surface);color:var(--ink);box-shadow:var(--clay-sm)}
.btn:hover{transform:translateY(-4px)}
.btn:active{transform:scale(.97);box-shadow:var(--clay-p)}
.btn:focus-visible{outline:3px solid var(--black);outline-offset:3px}
.btn.black:focus-visible{outline-color:var(--yellow)}

/* ── 6. CHIP ────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .9rem;border-radius:var(--rp);font-size:.875rem;font-weight:800;box-shadow:var(--clay-sm)}
.chip.yellow{background:var(--yellow);color:var(--ink);box-shadow:var(--clay-y)}
.chip.white{background:var(--white);color:var(--ink)}
.chip.black{background:var(--black);color:var(--white);box-shadow:var(--clay-b)}

/* ── 7. ICON ORB ────────────────────────────────────────────── */
.icon-orb{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--clay-sm);transition:transform 350ms var(--sp),background 350ms}
.icon-orb.yellow{background:var(--yellow);box-shadow:var(--clay-y)}
.icon-orb.white{background:var(--white)}
.icon-orb.black{background:var(--black);box-shadow:var(--clay-b)}
.icon-orb svg{transition:transform 350ms var(--sp)}
.icon-orb:hover svg{transform:rotate(8deg)}

/* ── 8. PROGRESS BAR ────────────────────────────────────────── */
#progress-bar{position:fixed;top:0;left:0;height:4px;width:100%;z-index:1000;background:var(--yellow);box-shadow:var(--clay-y);transform-origin:left;transform:scaleX(0);transition:transform .1s linear;border-radius:0 2px 2px 0}

/* ── 9. HEADER ──────────────────────────────────────────────── */
#site-header{position:fixed;top:1rem;left:50%;transform:translateX(-50%);width:calc(100% - 2rem);max-width:var(--wrap);background:var(--surface);border-radius:var(--rp);box-shadow:var(--clay);display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem .5rem 1rem;z-index:900;transition:padding 350ms}
#site-header.small{padding-top:.3rem;padding-bottom:.3rem}
.nav-logo{display:flex;align-items:center;background:var(--black);border-radius:12px;padding:4px 10px;box-shadow:var(--clay-b);min-height:40px}
.nav-logo img{height:32px;width:auto}
.nav-logo-text{color:var(--white);font-family:'Fredoka',sans-serif;font-size:1.1rem;font-weight:700}
.nav-logo-text span{color:var(--yellow)}
.site-nav{display:none;align-items:center;gap:1.5rem}
.site-nav a{font-weight:700;font-size:.95rem;position:relative;padding:.25rem 0;transition:color .2s}
.site-nav a[aria-current]::after{content:'';position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:var(--yellow)}
.nav-actions{display:flex;align-items:center;gap:.75rem}
.menu-btn{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--surface);box-shadow:var(--clay-sm);border:none;cursor:pointer}
.menu-btn:focus-visible{outline:3px solid var(--black);outline-offset:3px}
#mobile-menu{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--surface);z-index:800;padding:5rem 2rem 2rem;flex-direction:column;gap:1.5rem;overflow-y:auto}
#mobile-menu.open{display:flex}
#mobile-menu a{font-family:'Fredoka',sans-serif;font-size:1.5rem;font-weight:700}
.mobile-close{position:absolute;top:1.25rem;right:1.25rem;background:var(--black);color:var(--white);border:none;width:48px;height:48px;border-radius:50%;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
@media(min-width:768px){.site-nav{display:flex}.menu-btn{display:none}}

/* ── 10. HERO ───────────────────────────────────────────────── */
#top{min-height:100svh;padding-top:calc(5rem + var(--sec));padding-bottom:var(--sec);background:var(--bg);display:grid;align-items:center}
.hero-inner{display:grid;gap:3rem;align-items:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:var(--yellow);color:var(--ink);padding:.35rem 1rem;border-radius:var(--rp);font-size:.875rem;font-weight:800;box-shadow:var(--clay-y);margin-bottom:1.25rem}
.hero-h1{font-size:clamp(2.6rem,6vw,5rem);font-weight:700;margin-bottom:1rem}
.h1-highlight{background:var(--yellow);border-radius:12px;padding:0 .3em;box-shadow:var(--clay-y);display:inline}
.hero-sub{font-size:1.1rem;color:var(--muted);max-width:44ch;margin-bottom:2rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2rem}
.trust-row{display:flex;flex-wrap:wrap;gap:.75rem}
.trust-tile{display:flex;align-items:center;gap:.5rem;background:var(--surface);border-radius:var(--rp);padding:.4rem 1rem;box-shadow:var(--clay-sm);font-size:.875rem;font-weight:700}
.trust-tile::before{content:'●';color:var(--yellow);font-size:.6rem}
/* Visual */
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:380px}
.hero-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;pointer-events:none}
.blob-1{width:320px;height:280px;background:rgba(255,210,31,.35);top:-10%;right:5%}
.blob-2{width:220px;height:200px;background:rgba(255,235,100,.25);bottom:5%;left:5%}
.hero-dash{position:relative;width:260px;background:var(--black);border-radius:var(--r);padding:1.5rem;box-shadow:var(--clay-b);animation:floatA 6s ease-in-out infinite}
.dash-label{color:rgba(255,255,255,.5);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem}
.dash-bars{display:flex;align-items:flex-end;gap:.5rem;height:80px}
.dash-bars span{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(to top,var(--yellow-deep),var(--yellow-soft))}
.dash-bars span:nth-child(1){height:30%}
.dash-bars span:nth-child(2){height:55%}
.dash-bars span:nth-child(3){height:75%}
.dash-bars span:nth-child(4){height:100%;background:linear-gradient(to top,var(--yellow),var(--yellow-soft))}
.hero-chip-reach{position:absolute;top:-1rem;right:-2rem;background:var(--white);border-radius:var(--rp);padding:.4rem .9rem;box-shadow:var(--clay-sm);font-size:.85rem;font-weight:800;display:flex;align-items:center;gap:.4rem}
.hero-chip-reach .dot{width:8px;height:8px;border-radius:50%;background:var(--mint)}
.hero-chip-ctr{position:absolute;bottom:-1rem;left:-1.5rem;background:var(--yellow);border-radius:var(--rp);padding:.4rem .9rem;box-shadow:var(--clay-y);font-size:.85rem;font-weight:800;color:var(--ink)}
.sphere{position:absolute;border-radius:50%}
.sphere-y{width:56px;height:56px;background:radial-gradient(circle at 35% 30%,var(--yellow-soft),var(--yellow-deep));top:0;right:-1rem;box-shadow:var(--clay-y);animation:floatB 7s 1s ease-in-out infinite}
.sphere-b{width:44px;height:44px;background:radial-gradient(circle at 35% 30%,#3a3a3a,var(--black));bottom:10%;right:-2rem;box-shadow:var(--clay-b);animation:floatC 5.5s .5s ease-in-out infinite}
.sphere-w{width:36px;height:36px;background:radial-gradient(circle at 35% 30%,#fff,#e8e0ce);bottom:20%;left:-2rem;box-shadow:var(--clay-sm);animation:floatA 8s 2s ease-in-out infinite}
.orb-icon{position:absolute;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.orb-mega{background:var(--yellow);box-shadow:var(--clay-y);top:20%;left:-3rem;animation:floatC 6.5s 1.5s ease-in-out infinite}
.orb-heart{background:var(--black);box-shadow:var(--clay-b);bottom:30%;right:-3rem;animation:floatB 7s ease-in-out infinite}
.scroll-cue{position:absolute;bottom:-3rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;background:var(--surface);border-radius:var(--rp);padding:.5rem 1.1rem;box-shadow:var(--clay-sm);font-size:.8rem;font-weight:700;color:var(--muted)}
.scroll-cue svg{animation:bounce 1.6s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes floatC{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(min-width:900px){.hero-inner{grid-template-columns:1fr 1fr}.hero-visual{min-height:440px}}

/* ── 11. MARQUEE ────────────────────────────────────────────── */
#trusted{padding:2.5rem 0;overflow:hidden;border-top:1px solid rgba(112,80,0,.08);border-bottom:1px solid rgba(112,80,0,.08)}
.marquee-track{display:flex;gap:1.5rem;animation:marquee 28s linear infinite;width:max-content}
#trusted:hover .marquee-track{animation-play-state:paused}
.logo-pill{background:var(--white);border-radius:var(--rp);padding:.6rem 1.5rem;box-shadow:var(--clay-sm);font-weight:800;font-size:.95rem;white-space:nowrap}

/* ── 12. SERVICES ───────────────────────────────────────────── */
#services{padding:var(--sec) 0;background:var(--bg)}
.services-grid{display:grid;gap:1.5rem;grid-template-columns:1fr}
.service-card{background:var(--surface);border-radius:var(--r);box-shadow:var(--clay);padding:2rem;display:flex;flex-direction:column;gap:1rem;transition:transform 350ms var(--sp),box-shadow 350ms;text-decoration:none;color:var(--ink)}
.service-card:hover{transform:translateY(-6px)}
.service-card:hover .icon-orb{background:var(--yellow);box-shadow:var(--clay-y)}
.service-card:focus-visible{outline:3px solid var(--black);outline-offset:3px}
.service-card h3{font-size:1.3rem;font-weight:700}
.service-card p{color:var(--muted);font-size:.95rem;flex:1}
.service-link{color:var(--black);font-weight:800;font-size:.9rem;text-decoration:underline;text-underline-offset:3px}
@media(min-width:480px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.services-grid{grid-template-columns:repeat(3,1fr)}}

/* ── 13. RESULTS ────────────────────────────────────────────── */
#results{padding:var(--sec) 0;background:var(--black)}
.results-panel{background:var(--black);border-radius:var(--rl);box-shadow:var(--clay-b);padding:3rem 2rem;position:relative}
.results-panel .section-title{color:var(--white)}
.results-panel .section-sub{color:rgba(255,255,255,.5)}
.results-panel::before,.results-panel::after{content:'';position:absolute;width:28px;height:28px;border-color:var(--yellow);border-style:solid;border-width:0}
.results-panel::before{top:20px;left:20px;border-top-width:4px;border-left-width:4px;border-radius:6px 0 0 0}
.results-panel::after{bottom:20px;right:20px;border-bottom-width:4px;border-right-width:4px;border-radius:0 0 6px 0}
.results-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(2,1fr);margin-top:2.5rem}
.stat-tile{background:rgba(255,255,255,.04);border-radius:var(--r);box-shadow:inset 4px 4px 10px rgba(0,0,0,.5),inset -3px -3px 8px rgba(255,255,255,.07);padding:2rem 1.5rem;text-align:center}
.stat-num{font-family:'Fredoka',sans-serif;font-size:clamp(2rem,5vw,3.5rem);font-weight:700;color:var(--yellow);display:block}
.stat-label{color:rgba(255,255,255,.7);font-size:.9rem;font-weight:600;margin-top:.25rem}
@media(min-width:768px){.results-grid{grid-template-columns:repeat(4,1fr)}}

/* ── 14. PROCESS ────────────────────────────────────────────── */
#process{padding:var(--sec) 0;background:var(--bg)}
.process-steps{display:flex;flex-direction:column;gap:2rem;position:relative;margin-top:3rem}
.process-line{position:absolute;left:27px;top:0;bottom:0;width:4px;background:rgba(112,80,0,.15);border-radius:2px}
.process-line-fill{width:100%;border-radius:2px;background:linear-gradient(to bottom,var(--yellow),var(--yellow-deep));height:calc(var(--progress,0)*100%);transition:height .15s linear}
.process-step{display:flex;gap:1.5rem;align-items:flex-start}
.pebble{width:56px;height:56px;border-radius:50%;flex-shrink:0;background:var(--yellow);box-shadow:var(--clay-y);display:flex;align-items:center;justify-content:center;font-family:'Fredoka',sans-serif;font-size:1.3rem;font-weight:700;color:var(--ink);position:relative;z-index:1}
.process-content h3{font-size:1.25rem;font-weight:700;margin-bottom:.35rem}
.process-content p{color:var(--muted);font-size:.95rem}
@media(min-width:768px){.process-steps{flex-direction:row;gap:0}.process-line{top:27px;left:0;right:0;bottom:auto;width:100%;height:4px}.process-line-fill{height:100%;width:calc(var(--progress,0)*100%)}.process-step{flex-direction:column;align-items:center;text-align:center;flex:1;padding:0 1rem}}

/* ── 15. WORK ───────────────────────────────────────────────── */
#work{padding:var(--sec) 0;background:var(--bg);overflow:hidden}
.work-scroll{display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:1rem .5rem 2rem;scrollbar-width:none}
.work-scroll::-webkit-scrollbar{display:none}
.case-card{min-width:300px;max-width:340px;flex-shrink:0;background:var(--surface);border-radius:var(--r);box-shadow:var(--clay);padding:2rem;scroll-snap-align:start;transition:transform 350ms var(--sp);position:relative}
.case-card:hover{transform:translateY(-4px)}
.case-card.yellow{background:var(--yellow);box-shadow:var(--clay-y)}
.case-client{font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.5rem}
.case-card.yellow .case-client{color:rgba(20,20,20,.6)}
.case-challenge{font-size:.95rem;margin-bottom:1.5rem}
.case-metric{font-family:'Fredoka',sans-serif;font-size:3rem;font-weight:700;line-height:1;margin-bottom:.75rem}

/* ── 16. TESTIMONIALS ───────────────────────────────────────── */
#testimonials{padding:var(--sec) 0;background:var(--bg)}
.testi-grid{display:grid;gap:2rem;margin-top:3rem}
.testi-card{background:var(--white);border-radius:var(--r);box-shadow:var(--clay);padding:2rem;position:relative}
.testi-card::before{content:'';position:absolute;bottom:-16px;left:2.5rem;border:14px solid transparent;border-top:16px solid var(--white);filter:drop-shadow(0 4px 4px rgba(112,80,0,.12))}
.testi-stars{color:var(--yellow);letter-spacing:.1em;margin-bottom:1rem}
.testi-quote{margin-bottom:2rem}
.testi-author{display:flex;align-items:center;gap:.75rem}
.testi-avatar{width:48px;height:48px;border-radius:50%;background:var(--yellow);box-shadow:var(--clay-y);display:flex;align-items:center;justify-content:center;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.1rem;flex-shrink:0}
.testi-name{font-weight:800;font-size:.95rem}
.testi-role{color:var(--muted);font-size:.85rem}
@media(min-width:768px){.testi-grid{grid-template-columns:repeat(3,1fr)}}

/* ── 17. PACKAGES ───────────────────────────────────────────── */
#packages{padding:var(--sec) 0;background:var(--bg)}
.pkg-grid{display:grid;gap:1.5rem;margin-top:3rem;align-items:center}
.pkg-card{background:var(--surface);border-radius:var(--r);box-shadow:var(--clay);padding:2.5rem 2rem}
.pkg-card.featured{background:var(--yellow);box-shadow:var(--clay-y);transform:scale(1.04)}
.pkg-badge{display:inline-block;background:var(--black);color:var(--white);border-radius:var(--rp);font-size:.8rem;font-weight:800;padding:.25rem .75rem;margin-bottom:1rem}
.pkg-name{font-size:1.5rem;font-weight:700;margin-bottom:.5rem}
.pkg-price{font-family:'Fredoka',sans-serif;font-size:2.5rem;font-weight:700;margin-bottom:1rem}
.pkg-price span{font-size:1rem;font-weight:600}
.pkg-features{display:flex;flex-direction:column;gap:.5rem;margin-bottom:2rem}
.pkg-features li{font-size:.95rem;padding-left:1.4em;position:relative}
.pkg-features li::before{content:'✓';position:absolute;left:0;font-weight:800;color:var(--mint)}
.pkg-card.featured .pkg-features li::before{color:var(--black)}
@media(min-width:768px){.pkg-grid{grid-template-columns:repeat(3,1fr)}}

/* ── 18. FAQ ────────────────────────────────────────────────── */
#faq{padding:var(--sec) 0;background:var(--bg)}
.faq-list{display:flex;flex-direction:column;gap:1rem;margin-top:3rem}
details.faq-row{background:var(--bg);border-radius:var(--r);box-shadow:var(--clay-p);transition:box-shadow 350ms}
details.faq-row[open]{background:var(--surface);box-shadow:var(--clay)}
details.faq-row summary{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;cursor:pointer;list-style:none;font-weight:800;gap:1rem}
details.faq-row summary::-webkit-details-marker{display:none}
.faq-icon{width:32px;height:32px;border-radius:50%;flex-shrink:0;background:var(--surface);box-shadow:var(--clay-sm);display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:transform 350ms var(--sp)}
details.faq-row[open] .faq-icon{transform:rotate(45deg);background:var(--yellow);box-shadow:var(--clay-y)}
.faq-answer{padding:0 1.5rem 1.5rem;color:var(--muted);font-size:.95rem}
details.faq-row summary:focus-visible{outline:3px solid var(--black);outline-offset:-3px;border-radius:var(--r)}

/* ── 18b. CAREERS ───────────────────────────────────────────── */
#careers{padding:var(--sec) 0;background:var(--bg)}
.career-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem;background:var(--yellow);border-radius:var(--r);box-shadow:var(--clay-y);padding:1.5rem 2rem;margin-bottom:2.5rem}
.career-banner h3{font-size:1.25rem;font-weight:800;color:var(--ink)}
.career-banner p{font-size:.95rem;color:var(--ink);max-width:55ch}
.career-grid{display:grid;gap:1.75rem;grid-template-columns:1fr;margin-top:2rem}
.career-card{background:var(--surface);border-radius:var(--r);box-shadow:var(--clay);padding:2rem;display:flex;flex-direction:column;gap:1rem;transition:transform 350ms var(--sp)}
.career-card:hover{transform:translateY(-4px)}
.career-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;flex-wrap:wrap}
.career-card-header h3{font-size:1.35rem;font-weight:700}
.career-badges{display:flex;gap:.5rem;flex-wrap:wrap}
.career-desc{color:var(--muted);font-size:.95rem;flex:1}
.career-details{background:var(--bg);border-radius:20px;box-shadow:var(--clay-p);padding:1rem 1.25rem;margin:.5rem 0}
.career-details summary{font-weight:800;font-size:.9rem;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;color:var(--ink)}
.career-details summary::-webkit-details-marker{display:none}
.career-details-body{margin-top:1rem;font-size:.875rem}
.career-details-body h4{font-size:.9rem;font-weight:800;margin:1rem 0 .35rem;color:var(--ink)}
.career-details-body h4:first-child{margin-top:0}
.career-details-body ul{list-style:disc;padding-left:1.2rem;display:flex;flex-direction:column;gap:.35rem;color:var(--muted)}
.career-actions{display:flex;gap:.75rem;align-items:center;margin-top:.5rem;flex-wrap:wrap}
.career-hiring-box{background:var(--black);color:var(--white);border-radius:var(--rl);box-shadow:var(--clay-b);padding:clamp(2rem,5vw,3rem);margin-top:3.5rem;position:relative}
.career-hiring-box .section-title{color:var(--white);font-size:clamp(1.5rem,3.5vw,2.2rem)}
.career-hiring-box p{color:rgba(255,255,255,.75);font-size:.95rem;margin-bottom:1.5rem;max-width:54ch}
.career-hiring-box .form-field input{background:rgba(255,255,255,.08);color:var(--white);border:1px solid rgba(255,255,255,.15);box-shadow:inset 3px 3px 6px rgba(0,0,0,.5)}
.career-hiring-box .form-field input:focus-visible{border-color:var(--yellow);outline:none;box-shadow:0 0 0 2px var(--yellow)}
.career-hiring-box .form-field label{color:rgba(255,255,255,.9)}
@media(min-width:768px){.career-grid{grid-template-columns:repeat(2,1fr)}}

/* ── 19. CLOSING CTA ────────────────────────────────────────── */
#cta{padding:var(--sec) 0;background:var(--yellow)}
.cta-panel{background:var(--yellow);border-radius:var(--rl);box-shadow:var(--clay-y);padding:clamp(2.5rem,6vw,4rem);position:relative;max-width:760px;margin:0 auto}
.cta-panel::before,.cta-panel::after{content:'';position:absolute;width:28px;height:28px;border-color:var(--black);border-style:solid;border-width:0}
.cta-panel::before{top:20px;left:20px;border-top-width:4px;border-left-width:4px;border-radius:6px 0 0 0}
.cta-panel::after{bottom:20px;right:20px;border-bottom-width:4px;border-right-width:4px;border-radius:0 0 6px 0}
.cta-sub{color:rgba(20,20,20,.65);margin-bottom:2rem}
.cta-form{display:flex;flex-direction:column;gap:1rem}
.form-row{display:grid;gap:1rem}
.form-field{display:flex;flex-direction:column;gap:.35rem}
.form-field label{font-weight:800;font-size:.875rem}
.form-field input,.form-field select{background:var(--white);border:2px solid transparent;border-radius:var(--ri);padding:.85rem 1.25rem;font-family:'Nunito',sans-serif;font-size:1rem;color:var(--ink);box-shadow:var(--clay-p);transition:border-color .2s,box-shadow .2s;appearance:none;min-height:48px}
.form-field input:focus-visible,.form-field select:focus-visible{outline:none;border-color:var(--black);box-shadow:var(--clay)}
.form-field input.error,.form-field select.error{border-color:var(--coral)}
.form-error{font-size:.8rem;color:var(--coral);font-weight:700;min-height:1em}
.form-success{background:var(--surface);border-radius:var(--r);padding:1.5rem;text-align:center;display:none;font-weight:700}
@media(min-width:480px){.form-row{grid-template-columns:1fr 1fr}}

/* ── 20. FOOTER ─────────────────────────────────────────────── */
#site-footer{background:var(--black);padding:clamp(3rem,6vw,5rem) 0 1.5rem}
.footer-inner{display:grid;gap:3rem;margin-bottom:3rem}
.footer-logo-wrap{background:var(--black);border-radius:14px;padding:6px 14px;display:inline-flex;align-items:center;box-shadow:var(--clay-b);margin-bottom:1rem;height:56px}
.footer-logo-wrap img{height:44px;width:auto}
.footer-logo-text{color:var(--white);font-family:'Fredoka',sans-serif;font-size:1.3rem;font-weight:700}
.footer-logo-text span{color:var(--yellow)}
.footer-blurb{color:rgba(255,255,255,.55);font-size:.9rem;max-width:32ch;margin-top:.5rem}
.footer-nav h4,.footer-contact h4{color:var(--white);font-size:1rem;font-weight:700;margin-bottom:1rem}
.footer-nav ul,.footer-contact address{display:flex;flex-direction:column;gap:.5rem;font-style:normal}
.footer-nav a,.footer-contact a{color:rgba(255,255,255,.55);font-size:.9rem;transition:color .2s}
.footer-nav a:hover,.footer-contact a:hover{color:var(--yellow)}
.social-row{display:flex;gap:.75rem;margin-top:1rem}
.social-orb{width:44px;height:44px;border-radius:50%;background:var(--yellow);box-shadow:var(--clay-y);display:flex;align-items:center;justify-content:center;transition:transform 350ms var(--sp);color:var(--ink)}
.social-orb:hover{transform:translateY(-3px)}
.social-orb:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.footer-legal{border-top:1px solid rgba(255,255,255,.1);padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}
.footer-legal p,.footer-legal a{color:rgba(255,255,255,.35);font-size:.8rem}
@media(min-width:768px){.footer-inner{grid-template-columns:2fr 1fr 1fr}}

/* ── 21. REVEAL ─────────────────────────────────────────────── */
html.js .reveal{opacity:0;transform:translateY(24px) scale(.96);transition:opacity 700ms var(--eo),transform 700ms var(--sp);transition-delay:calc(var(--i,0)*80ms)}
html.js .reveal.in{opacity:1;transform:none}

/* ── 22. MOBILE SHADOWS ─────────────────────────────────────── */
@media(max-width:767px){
  :root{
    --clay:7px 7px 14px rgba(112,80,0,.22),-6px -6px 13px rgba(255,255,255,.95),inset -3px -3px 7px rgba(112,80,0,.1),inset 3px 3px 7px rgba(255,255,255,.8);
    --clay-sm:4px 4px 8px rgba(112,80,0,.2),-3px -3px 7px rgba(255,255,255,.95),inset -2px -2px 4px rgba(112,80,0,.1),inset 2px 2px 4px rgba(255,255,255,.8);
    --clay-y:6px 6px 13px rgba(176,125,0,.35),-5px -5px 11px rgba(255,255,255,.9),inset -3px -3px 7px rgba(200,140,0,.4),inset 3px 3px 7px rgba(255,240,150,.9);
    --clay-b:7px 7px 14px rgba(40,30,0,.32),-5px -5px 11px rgba(255,255,255,.9),inset 3px 3px 6px rgba(255,255,255,.12),inset -4px -4px 7px rgba(0,0,0,.55);
  }
}

/* ── 23. REDUCED MOTION ─────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  html.js .reveal{opacity:1!important;transform:none!important}
}