/* =====================================================================
   ZAMBEZI CREATIVE — Global Stylesheet
   Palette: white #FCFCFB · yellow #F7AF06 · green #757768
   Reference: Hero.jpg, call-to-action.jpg, call-to-action2.jpg
   ===================================================================== */

:root{
    --white:      #F3F3F1;   /* warm white — page canvas */
    --paper:      #FFFFFF;   /* pure white — cards & hero (keeps slider blend) */
    --yellow:     #F5B000;   /* gold (warm accent / highlights) */
    --gold:       #F5B000;
    --terracotta: #C94F2D;   /* conversion accent — CTAs & key actions */
    --terracotta-d:#B0421F;  /* terracotta hover */
    --green:      #6E7D2E;   /* olive-green accent (text / links) */
    --dark:       #0F2B0F;   /* deep forest green (dark sections) */
    --olive:      #7A8A2D;   /* brushstroke olive accent */
    --brown:      #6B4A2B;   /* rich earth brown */
    --sand:       #E7DCC6;   /* sand beige */
    --ink:        #14210D;   /* warm near-black headings/body */
    --muted:      #5F6354;   /* secondary text (warm) */
    --line:       #E5E1D6;   /* hairlines (warm) */
    --cream:      #EFEADE;   /* soft card background (warm) */

    --maxw: 1240px;
    --radius: 16px;
    --radius-lg: 22px;
    --shadow: 0 24px 60px -24px rgba(29,42,19,.30);
    --shadow-sm: 0 10px 28px -14px rgba(29,42,19,.24);
    --shadow-card: 0 2px 1px rgba(29,42,19,.03), 0 16px 40px -28px rgba(29,42,19,.35);

    --font-head:    'Poppins', system-ui, sans-serif;
    --font-display: 'Poppins', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;
    --font-script:  'Caveat', cursive;

    --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--white);
    line-height:1.65;
    font-size:17px;
    overflow-x:hidden;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }

h1,h2,h3,h4{ font-family:var(--font-head); line-height:1.04; letter-spacing:-.01em; color:var(--ink); font-weight:800; }
h1{ font-size:clamp(2.6rem,6vw,4.6rem); text-transform:uppercase; font-weight:900; }
h2{ font-size:clamp(2rem,4vw,3.1rem); text-transform:uppercase; }
h3{ font-size:clamp(1.3rem,2.2vw,1.7rem); }
p{ color:var(--muted); }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{ left:16px; top:16px; z-index:999; background:var(--dark); color:#fff; padding:10px 16px; border-radius:8px; }

/* ---------- Accents ---------- */
.text-green{ color:var(--green); }
.text-yellow{ color:var(--yellow); }
.text-dark{ color:var(--dark); }
.script-accent{ font-family:var(--font-script); color:var(--green); font-size:1.6rem; font-weight:700; display:inline-block; }

/* hand-drawn yellow underline */
.brush-underline{ position:relative; display:inline-block; }
.brush-underline::after{
    content:""; position:absolute; left:0; right:0; bottom:-.18em; height:.32em;
    background:var(--yellow); border-radius:50%;
    transform:scaleY(.55) rotate(-.6deg); opacity:.95;
}

.kicker{
    font-family:var(--font-body); font-weight:700; text-transform:uppercase;
    letter-spacing:.22em; font-size:.74rem; color:var(--green);
    display:inline-flex; align-items:center; gap:10px;
}
.kicker::before{ content:""; width:34px; height:2px; background:var(--yellow); display:inline-block; }

.section{ padding:clamp(64px,9vw,120px) 0; }
.section-head{ max-width:760px; margin-bottom:54px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head p{ margin-top:16px; font-size:1.05rem; }

/* ---------- Buttons ---------- */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    font-family:var(--font-head); font-weight:700; text-transform:uppercase;
    letter-spacing:.04em; font-size:.85rem; padding:15px 30px; border-radius:6px;
    background:var(--dark); color:#fff; transition:transform .3s var(--ease), background .3s, box-shadow .3s;
    border:2px solid var(--dark);
}
.btn:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.btn-pill{ border-radius:50px; }
.btn-yellow{ background:var(--yellow); border-color:var(--yellow); color:var(--ink); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:#fff; }
.btn-light{ background:#fff; border-color:#fff; color:var(--ink); }

/* circular arrow button (from Hero "See Our Work") */
.btn-arrow{ display:inline-flex; align-items:center; gap:16px; font-family:var(--font-head);
    font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.82rem; color:var(--ink); }
.arrow-circle{
    width:56px; height:56px; border-radius:50%; background:var(--dark); color:#fff;
    display:inline-grid; place-items:center; flex:0 0 auto; transition:transform .35s var(--ease), background .35s;
}
.arrow-circle svg{ width:22px; height:22px; }
.btn-arrow:hover .arrow-circle{ transform:translateX(6px) rotate(-8deg); background:var(--yellow); color:var(--ink); }
.btn-arrow-label{ position:relative; padding-bottom:6px; }
.btn-arrow-label::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--ink); }
.btn-arrow.on-dark{ color:#fff; }
.btn-arrow.on-dark .arrow-circle{ background:var(--olive); }
.btn-arrow.on-dark .btn-arrow-label::after{ background:rgba(255,255,255,.6); }

/* solid dark-green pill variant (hero primary CTA) */
.btn-arrow--solid{
    background:var(--dark); color:#fff;
    padding:9px 30px 9px 9px; border-radius:999px;
    box-shadow:0 16px 32px -18px rgba(15,43,15,.8);
}
.btn-arrow--solid .arrow-circle{
    width:46px; height:46px; background:rgba(255,255,255,.12);
    border:1.5px solid rgba(255,255,255,.55);
}
.btn-arrow--solid .btn-arrow-label{ padding-bottom:0; }
.btn-arrow--solid .btn-arrow-label::after{ display:none; }
.btn-arrow--solid:hover{ background:#12351b; }
.btn-arrow--solid:hover .arrow-circle{ background:var(--yellow); color:var(--dark); border-color:var(--yellow); transform:none; }

/* outlined secondary button (hero "See Our Work") */
.btn-ghost{
    display:inline-flex; align-items:center; gap:12px;
    font-family:var(--font-head); font-weight:700; text-transform:uppercase;
    letter-spacing:.08em; font-size:.78rem; color:var(--dark);
    padding:14px 26px; border:1.6px solid rgba(15,43,15,.35); border-radius:999px;
    transition:background .3s, border-color .3s, color .3s;
}
.btn-ghost-ic{ width:20px; height:20px; flex:0 0 auto; }
.btn-ghost:hover{ border-color:var(--dark); background:var(--dark); color:#fff; }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header{
    position:sticky; top:0; z-index:100; background:rgba(252,252,251,.86);
    backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:.3s;
}
.site-header.scrolled{ box-shadow:0 6px 24px -16px rgba(0,0,0,.35); border-bottom-color:var(--line); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:88px; }
.brand-logo{ height:54px; width:auto; }
.main-nav ul{ display:flex; gap:38px; }
.nav-link{
    font-family:var(--font-head); font-weight:700; text-transform:uppercase;
    letter-spacing:.06em; font-size:.86rem; color:var(--ink); position:relative; padding:6px 0;
}
.nav-link::after{
    content:""; position:absolute; left:0; bottom:-2px; width:0; height:3px;
    background:var(--yellow); border-radius:3px; transition:width .3s var(--ease);
}
.nav-link:hover::after, .nav-link.is-active::after{ width:100%; }
.nav-link.is-active{ color:var(--dark); }
.nav-cta{ padding:12px 26px; font-size:.78rem; }

.menu-toggle{ display:none; width:50px; height:50px; border-radius:10px; background:var(--dark); position:relative; }
.menu-toggle span{ position:absolute; left:13px; right:13px; height:2px; background:#fff; transition:.3s; }
.menu-toggle span:nth-child(1){ top:17px; }
.menu-toggle span:nth-child(2){ top:24px; }
.menu-toggle span:nth-child(3){ top:31px; }
.menu-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* mobile drawer */
.mobile-nav{
    position:fixed; inset:0 0 0 auto; width:min(86vw,380px); background:var(--dark); color:#fff;
    transform:translateX(105%); transition:transform .4s var(--ease); z-index:200;
    padding:110px 36px 40px; display:flex; flex-direction:column;
}
.mobile-nav.open{ transform:translateX(0); box-shadow:-30px 0 60px -20px rgba(0,0,0,.5); }
.mobile-nav ul{ display:flex; flex-direction:column; gap:8px; }
.mobile-nav a{ font-family:var(--font-head); font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    font-size:1.4rem; padding:10px 0; display:block; color:#fff; transition:color .2s; }
.mobile-nav a:hover, .mobile-nav a.is-active{ color:var(--yellow); }
.mobile-nav .btn{ margin-top:18px; background:var(--yellow); border-color:var(--yellow); color:var(--ink); font-size:.9rem; }
.mobile-nav-foot{ margin-top:auto; color:rgba(255,255,255,.6); font-size:.9rem; }
.mobile-nav-foot a{ font-family:var(--font-body); text-transform:none; font-size:.95rem; letter-spacing:0; }
.nav-overlay{ position:fixed; inset:0; background:rgba(20,20,12,.5); opacity:0; visibility:hidden; transition:.3s; z-index:150; }
.nav-overlay.open{ opacity:1; visibility:visible; }

/* =====================================================================
   HERO SLIDER  (carousel — styled like the "Local Expertise" reference)
   ===================================================================== */
.hero{ position:relative; overflow:hidden; background:#fff; }
.hero-slider{ position:relative; width:100%; aspect-ratio:2/1; min-height:480px; max-height:720px; }
.hero-slide{
    position:absolute; inset:0; opacity:0; visibility:hidden;
    transition:opacity .9s var(--ease); display:flex; align-items:center;
}
.hero-slide.active{ opacity:1; visibility:visible; }
.hero-slide > .container{ position:relative; z-index:2; width:100%; }
.hero-copy{ max-width:46%; }

/* full-bleed background image — subject on the right, white space on the left */
.hero-bg-pic{ display:contents; }
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center; z-index:0; }
.hero-slide::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(90deg, #fff 0%, #fff 30%, rgba(255,255,255,.82) 46%, rgba(255,255,255,0) 64%); }
.hero-title{ font-size:clamp(1.9rem,3.7vw,3.3rem); line-height:1.04; letter-spacing:-.015em; }
.hero-title span{ display:block; opacity:0; transform:translateY(26px); }
.hero-title .ln-green{ color:var(--green); }
.hero-slide.active .hero-title span{ animation:fadeUp .8s var(--ease) forwards; }
.hero-slide.active .hero-title span:nth-child(1){ animation-delay:.2s; }
.hero-slide.active .hero-title span:nth-child(2){ animation-delay:.32s; }
.hero-slide.active .hero-title span:nth-child(3){ animation-delay:.44s; }
.hero-slide.active .hero-title span:nth-child(4){ animation-delay:.56s; }

/* short yellow brush stroke above the headline */
.hero-kicker{
    display:block; width:64px; height:11px; margin:0 0 26px;
    background:var(--yellow); border-radius:50%;
    transform:scaleY(.5) rotate(-.7deg); transform-origin:left center; opacity:0;
}
.hero-slide.active .hero-kicker{ animation:fadeUp .8s var(--ease) .12s forwards; }
/* thin divider line under the headline */
.hero-divider{
    display:block; width:74px; height:2px; margin:24px 0 0;
    background:rgba(15,43,15,.32); opacity:0;
}
.hero-slide.active .hero-divider{ animation:fadeUp .8s var(--ease) .66s forwards; }

.hero-text{ font-size:1.06rem; max-width:440px; margin:28px 0 34px; color:var(--muted); opacity:0; transform:translateY(20px); }
.hero-text strong{ color:var(--ink); font-weight:700; }
.hero-slide.active .hero-text{ animation:fadeUp .8s var(--ease) .78s forwards; }
.hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; opacity:0; transform:translateY(20px); }
.hero-slide.active .hero-actions{ animation:fadeUp .8s var(--ease) .9s forwards; }

/* portrait + decorations */
.hero-visual{ position:relative; align-self:stretch; display:flex; align-items:center; justify-content:flex-end; min-height:560px; }
.hero-figure{ position:relative; z-index:2; width:100%; max-width:560px; height:100%; min-height:560px; }
.hero-figure img{ width:100%; height:100%; object-fit:cover; object-position:center 12%; }
.hero-dots{ position:absolute; z-index:1; width:118px; height:118px; opacity:.9;
    background-image:radial-gradient(var(--green) 2.4px, transparent 2.6px); background-size:20px 20px; }
.hero-dots.tr{ top:14px; right:-4px; z-index:3; }
.hero-waves{ position:absolute; z-index:0; left:-40px; bottom:30px; width:min(60%,420px); height:auto; color:#EBC98A; opacity:.7; pointer-events:none; }

/* slider controls */
.hero-arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:6;
    width:46px; height:46px; display:grid; place-items:center; color:var(--ink);
    border-radius:50%; transition:.3s;
}
.hero-arrow:hover{ background:var(--dark); color:#fff; }
.hero-arrow.prev{ left:14px; }
.hero-arrow.next{ right:14px; }
.hero-arrow svg{ width:26px; height:26px; }
.hero-dots-nav{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); display:flex; gap:12px; z-index:6; }
.hero-dots-nav button{ width:11px; height:11px; border-radius:50%; background:rgba(42,48,23,.25); transition:.3s; }
.hero-dots-nav button.active{ background:var(--dark); width:30px; border-radius:6px; }

/* =====================================================================
   TRUST BAR / LOGOS
   ===================================================================== */
.trust-bar{ background:var(--dark); color:#fff; }
.trust-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; padding:26px 0; }
.trust-inner .lead{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:.04em; font-weight:700; font-size:.9rem; color:rgba(255,255,255,.85); }
.trust-logos{ display:flex; flex-wrap:wrap; gap:30px 44px; align-items:center; }
.trust-logos span{ font-family:var(--font-head); font-weight:700; opacity:.55; letter-spacing:.05em; text-transform:uppercase; font-size:.95rem; }

/* =====================================================================
   STATS
   ===================================================================== */
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat{ text-align:center; padding:26px 16px; border-radius:var(--radius); background:var(--cream); }
.stat .value{ font-family:var(--font-head); font-weight:900; font-size:clamp(2.4rem,5vw,3.4rem); color:var(--dark); line-height:1; }
.stat .label{ margin-top:10px; font-size:.92rem; color:var(--muted); }

/* =====================================================================
   SERVICES
   ===================================================================== */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.svc-card{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:34px 30px;
    transition:transform .35s var(--ease), box-shadow .35s, border-color .35s; position:relative; overflow:hidden;
}
.svc-card::before{ content:""; position:absolute; left:0; top:0; height:4px; width:0; background:var(--yellow); transition:width .4s var(--ease); }
.svc-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); border-color:transparent; }
.svc-card:hover::before{ width:100%; }
.svc-icon-wrap{ width:62px; height:62px; border-radius:14px; background:var(--cream); display:grid; place-items:center; color:var(--dark); margin-bottom:22px; transition:.35s; }
.svc-card:hover .svc-icon-wrap{ background:var(--dark); color:var(--yellow); }
.svc-icon{ width:30px; height:30px; }
.svc-card h3{ margin-bottom:12px; }
.svc-card p{ font-size:.97rem; margin-bottom:18px; }
.svc-points{ display:flex; flex-direction:column; gap:8px; }
.svc-points li{ font-size:.9rem; color:var(--ink); display:flex; gap:10px; align-items:flex-start; }
.svc-points li::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--yellow); margin-top:8px; flex:0 0 auto; }
.svc-link{ margin-top:22px; display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:700; text-transform:uppercase; font-size:.78rem; letter-spacing:.06em; color:var(--dark); }
.svc-link svg{ width:18px; height:18px; transition:transform .3s; }
.svc-card:hover .svc-link svg{ transform:translateX(5px); }

/* =====================================================================
   FEATURED WORK
   ===================================================================== */
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.work-card{ border-radius:var(--radius); overflow:hidden; position:relative; background:var(--dark); aspect-ratio:4/3; display:block; }
.work-card img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), filter .4s; }
.work-card:hover img{ transform:scale(1.07); }
.work-overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(26,26,16,.9) 0%, rgba(26,26,16,.15) 55%, transparent 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:26px; color:#fff; }
.work-overlay .tags{ display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.work-overlay .tags span{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; background:rgba(255,255,255,.16); padding:5px 11px; border-radius:50px; backdrop-filter:blur(4px); }
.work-overlay h3{ color:#fff; font-size:1.35rem; }
.work-result{ margin-top:8px; color:var(--yellow); font-family:var(--font-head); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.82rem; }
.filter-bar{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:40px; }
.filter-bar button{ font-family:var(--font-head); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.78rem; padding:10px 20px; border-radius:50px; border:2px solid var(--line); color:var(--muted); transition:.3s; }
.filter-bar button.active, .filter-bar button:hover{ background:var(--dark); border-color:var(--dark); color:#fff; }

/* =====================================================================
   INDUSTRIES
   ===================================================================== */
.ind-section{ background:var(--cream); }
.ind-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.ind-chip{ background:#fff; border-radius:12px; padding:22px 20px; font-family:var(--font-head); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:.92rem; color:var(--ink); display:flex; align-items:center; gap:12px; transition:.3s; border:1px solid var(--line); }
.ind-chip::before{ content:""; width:10px; height:10px; border-radius:3px; background:var(--yellow); flex:0 0 auto; }
.ind-chip:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.ind-chip:nth-child(even)::before{ background:var(--green); }

/* =====================================================================
   PROCESS
   ===================================================================== */
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.process-step{ position:relative; padding-top:18px; }
.process-step .num{ font-family:var(--font-head); font-weight:900; font-size:3rem; color:var(--line); line-height:1; transition:color .3s; }
.process-step:hover .num{ color:var(--yellow); }
.process-step h3{ margin:10px 0 10px; }
.process-step p{ font-size:.95rem; }
.process-step::after{ content:""; position:absolute; top:34px; right:-12px; width:24px; height:2px; background:var(--line); }
.process-step:last-child::after{ display:none; }

/* =====================================================================
   TESTIMONIALS
   ===================================================================== */
.testi-section{ background:var(--dark); color:#fff; position:relative; overflow:hidden; }
.testi-section .section-head h2, .testi-section .kicker{ color:#fff; }
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.testi-card{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); padding:32px 28px; }
.testi-card .mark{ font-family:var(--font-head); font-size:3.4rem; line-height:.5; color:var(--yellow); display:block; height:30px; }
.testi-card blockquote{ font-size:1.02rem; color:rgba(255,255,255,.92); margin:18px 0 22px; }
.testi-author{ display:flex; align-items:center; gap:12px; }
.testi-author .avatar{ width:46px; height:46px; border-radius:50%; background:var(--yellow); color:var(--dark); display:grid; place-items:center; font-family:var(--font-head); font-weight:800; }
.testi-author .name{ font-family:var(--font-head); font-weight:700; }
.testi-author .role{ font-size:.85rem; color:rgba(255,255,255,.6); }

/* =====================================================================
   CTA BANNERS  (from call-to-action.jpg)
   ===================================================================== */
.cta-band{ border-radius:var(--radius); padding:46px 50px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:30px; position:relative; overflow:hidden; }
.cta-band .cta-head{ display:flex; align-items:center; gap:26px; }
.cta-band h2{ font-size:clamp(1.7rem,3vw,2.4rem); margin:0; }
.cta-band .script-accent{ font-size:1.9rem; }
.cta-band .cta-right{ display:flex; align-items:center; gap:26px; max-width:520px; }
.cta-band .cta-right p{ font-size:.96rem; margin:0; }
.cta-divider{ width:1px; align-self:stretch; min-height:54px; background:currentColor; opacity:.2; }

.cta-cream{ background:var(--cream); }
.cta-dark{ background:var(--dark); color:#fff; }
.cta-dark h2, .cta-dark .script-accent{ color:#fff; }
.cta-dark .script-accent{ color:var(--yellow); }
.cta-dark p{ color:rgba(255,255,255,.75); }
.cta-yellow{ background:var(--yellow); color:var(--ink); }
.cta-yellow p{ color:rgba(26,26,20,.75); }

/* =====================================================================
   PRE-FOOTER CTA (call-to-action2.jpg)
   ===================================================================== */
.footer-cta{ border-top:1px solid var(--line); background:var(--white); }
.footer-cta-inner{ display:grid; grid-template-columns:1.1fr 1fr; gap:50px; align-items:center; padding:clamp(56px,8vw,96px) 0; }
.footer-cta .script-accent{ font-size:2rem; margin-bottom:6px; }
.footer-cta h2{ font-size:clamp(2rem,4.5vw,3.4rem); }
.footer-cta-action{ display:flex; flex-direction:column; gap:26px; }
.footer-cta-action p{ font-size:1.05rem; max-width:380px; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{ background:#1c2010; color:rgba(255,255,255,.7); padding:70px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; }
.footer-logo{ height:86px; width:auto; filter:brightness(0) invert(1); margin-bottom:18px; }
.footer-brand p{ color:rgba(255,255,255,.6); font-size:.95rem; max-width:340px; }
.footer-meta{ margin-top:18px; font-size:.92rem; line-height:1.9; }
.footer-meta a:hover{ color:var(--yellow); }
.footer-col h3{ color:#fff; font-size:1rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:18px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ color:rgba(255,255,255,.6); font-size:.95rem; transition:.2s; }
.footer-col a:hover{ color:var(--yellow); padding-left:4px; }
.footer-bottom{ display:flex; align-items:center; gap:16px; margin-top:50px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); font-size:.86rem; }
.footer-mark img{ border-radius:6px; }
.footer-tag{ color:var(--yellow); margin-left:6px; }

/* =====================================================================
   PAGE HEADER (interior pages)
   ===================================================================== */
.page-hero{ background:var(--cream); padding:clamp(60px,8vw,96px) 0 clamp(50px,6vw,72px); position:relative; overflow:hidden; }
.page-hero .container{ position:relative; z-index:2; }
.page-hero h1{ max-width:14ch; }
.page-hero p{ max-width:560px; margin-top:18px; font-size:1.12rem; }
.page-hero .crumbs{ font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--green); font-weight:700; margin-bottom:18px; }
.page-hero .crumbs a:hover{ color:var(--ink); }
.deco-circle{ position:absolute; border-radius:50%; border:14px solid var(--yellow); opacity:.25; }
.deco-circle.c1{ width:220px; height:220px; right:-60px; top:-60px; }
.deco-circle.c2{ width:140px; height:140px; right:120px; bottom:-70px; border-color:var(--green); }

/* =====================================================================
   SPLIT / ABOUT BLOCKS
   ===================================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px); align-items:center; }
.split.reverse .split-media{ order:2; }
.split-media{ position:relative; }
.split-media img{ border-radius:var(--radius); box-shadow:var(--shadow); width:100%; }
.split-body h2{ margin-bottom:20px; }
.split-body p{ margin-bottom:16px; font-size:1.04rem; }
.media-badge{ position:absolute; bottom:-22px; left:-22px; background:var(--yellow); color:var(--ink); padding:18px 24px; border-radius:14px; box-shadow:var(--shadow-sm); }
.media-badge .b-val{ font-family:var(--font-head); font-weight:900; font-size:1.8rem; line-height:1; }
.media-badge .b-lab{ font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; }

.value-list{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:10px; }
.value-item h3{ display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:1.15rem; }
.value-item h3::before{ content:""; width:14px; height:14px; border-radius:4px; background:var(--yellow); }
.value-item p{ font-size:.96rem; }

/* team */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.team-card{ border-radius:var(--radius); overflow:hidden; background:var(--cream); }
.team-card .photo{ aspect-ratio:1/1; overflow:hidden; background:var(--dark); }
.team-card .photo img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.team-card:hover .photo img{ transform:scale(1.05); }
.team-card .info{ padding:22px 24px; }
.team-card .info h3{ font-size:1.2rem; }
.team-card .info .role{ color:var(--green); font-weight:700; font-size:.86rem; text-transform:uppercase; letter-spacing:.05em; margin-top:4px; }
.team-card .info p{ font-size:.92rem; margin-top:10px; }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq-list{ max-width:820px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 0; font-family:var(--font-head); font-weight:700; font-size:1.12rem; color:var(--ink); }
.faq-q .ic{ width:34px; height:34px; flex:0 0 auto; border-radius:50%; background:var(--cream); display:grid; place-items:center; transition:.3s; }
.faq-q .ic::before, .faq-q .ic::after{ content:""; position:absolute; background:var(--dark); transition:.3s; }
.faq-q .ic{ position:relative; }
.faq-q .ic::before{ width:14px; height:2px; }
.faq-q .ic::after{ width:2px; height:14px; }
.faq-item.open .faq-q .ic{ background:var(--yellow); }
.faq-item.open .faq-q .ic::after{ transform:rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-a p{ padding:0 0 24px; font-size:1rem; max-width:64ch; }

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(36px,5vw,64px); align-items:start; }
.contact-info .info-block{ display:flex; gap:16px; margin-bottom:26px; }
.contact-info .ic{ width:50px; height:50px; flex:0 0 auto; border-radius:12px; background:var(--cream); display:grid; place-items:center; color:var(--dark); }
.contact-info .ic svg{ width:24px; height:24px; }
.contact-info h3{ font-size:1.05rem; margin-bottom:4px; }
.contact-info a, .contact-info span{ color:var(--muted); }
.contact-info a:hover{ color:var(--dark); }
.contact-form{ background:var(--cream); padding:38px; border-radius:var(--radius); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--font-head); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.field input, .field select, .field textarea{
    width:100%; padding:14px 16px; border:2px solid var(--line); border-radius:8px; background:#fff;
    font-family:var(--font-body); font-size:1rem; color:var(--ink); transition:.25s;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--yellow); box-shadow:0 0 0 4px rgba(247,175,6,.15); }
.field textarea{ min-height:140px; resize:vertical; }
.form-note{ font-size:.84rem; color:var(--muted); margin-top:8px; }
.form-alert{ padding:16px 20px; border-radius:10px; margin-bottom:22px; font-size:.96rem; }
.form-alert.success{ background:rgba(117,119,104,.15); color:var(--dark); border:1px solid var(--green); }
.form-alert.error{ background:rgba(247,175,6,.15); color:#8a5a00; border:1px solid var(--yellow); }

/* =====================================================================
   CASE STUDY / PROCESS PAGES helpers
   ===================================================================== */
.lead-text{ font-size:1.25rem; color:var(--ink); max-width:62ch; line-height:1.6; }
.two-col-text{ columns:2; column-gap:48px; }
.checklist{ display:grid; grid-template-columns:1fr 1fr; gap:14px 30px; margin-top:10px; }
.checklist li{ display:flex; gap:12px; font-size:1rem; }
.checklist li svg{ width:22px; height:22px; color:var(--green); flex:0 0 auto; margin-top:3px; }

/* =====================================================================
   REVEAL ANIMATIONS
   ===================================================================== */
.reveal{ transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal{ opacity:0; transform:translateY(34px); }      /* hidden only when JS is active */
.js .reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.1s; } .reveal.d2{ transition-delay:.2s; }
.reveal.d3{ transition-delay:.3s; } .reveal.d4{ transition-delay:.4s; }

@keyframes fadeUp{ to{ opacity:1; transform:none; } }

/* back to top */
.back-to-top{ position:fixed; right:22px; bottom:22px; width:50px; height:50px; border-radius:50%; background:var(--dark); color:#fff; display:grid; place-items:center; opacity:0; visibility:hidden; transform:translateY(20px); transition:.35s; z-index:90; box-shadow:var(--shadow-sm); }
.back-to-top.show{ opacity:1; visibility:visible; transform:none; }
.back-to-top:hover{ background:var(--yellow); color:var(--ink); }
.back-to-top svg{ width:24px; height:24px; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1080px){
    .services-grid, .work-grid, .testi-grid, .team-grid{ grid-template-columns:repeat(2,1fr); }
    .stats-grid{ grid-template-columns:repeat(2,1fr); }
    .ind-grid{ grid-template-columns:repeat(3,1fr); }
    .process-grid{ grid-template-columns:repeat(2,1fr); }
    .process-step::after{ display:none; }
}
@media (max-width:900px){
    .main-nav, .nav-cta{ display:none; }
    .menu-toggle{ display:block; }
    .hero-slider{ min-height:auto; aspect-ratio:auto; max-height:none; }
    .hero-slide{ position:relative; visibility:visible; opacity:0; height:0; overflow:hidden; display:block; }
    .hero-slide.active{ height:auto; overflow:visible; }
    .hero-slide > .container{ position:relative; z-index:2; min-height:90vh; padding-top:96px; padding-bottom:44px; display:flex; align-items:center; }
    .hero-slide::before{ display:block; background:linear-gradient(90deg,#F4F1EA 0%, #F4F1EA 50%, rgba(244,241,234,.9) 67%, rgba(244,241,234,0) 88%); }
    .hero-copy{ max-width:none; width:78%; }
    .hero-title{ font-size:clamp(1.85rem,8.6vw,2.6rem); line-height:1.04; letter-spacing:-.015em; }
    .hero-kicker{ width:58px; height:10px; margin-bottom:20px; }
    .hero-divider{ width:64px; margin-top:20px; }
    .hero-text{ font-size:.95rem; line-height:1.55; max-width:300px; margin:18px 0 26px; }
    .hero-bg{ position:absolute; inset:0; width:100%; height:100%; margin:0; object-fit:cover; object-position:73% center; }
    .hero-actions{ flex-direction:column; align-items:stretch; width:100%; max-width:320px; gap:14px; }
    .btn-arrow--solid{ justify-content:flex-start; }
    .btn-ghost{ justify-content:flex-start; padding:13px 24px; }
    .hero-arrow, .hero-dots-nav{ display:none; }   /* avoid overlapping the copy on small screens */
    .split{ grid-template-columns:1fr; }
    .split.reverse .split-media{ order:0; }
    .contact-grid{ grid-template-columns:1fr; }
    .footer-cta-inner{ grid-template-columns:1fr; gap:34px; }
    .footer-grid{ grid-template-columns:1fr 1fr; }
    .cta-band{ flex-direction:column; align-items:flex-start; }
    .cta-band .cta-right{ flex-direction:column; align-items:flex-start; }
    .cta-divider{ display:none; }
    .two-col-text{ columns:1; }
}
@media (max-width:600px){
    body{ font-size:16px; }
    .container{ padding:0 20px; }

    /* HERO — phones only: centered copy with the image stacked below (mobile backgrounds) */
    .hero-slide > .container{ min-height:0; padding-top:88px; padding-bottom:0; display:block; }
    .hero-slide::before{ display:none; }
    .hero-copy{ width:100%; max-width:none; text-align:center; }
    .hero-kicker{ margin-left:auto; margin-right:auto; }
    .hero-divider{ margin-left:auto; margin-right:auto; }
    .hero-text{ margin-left:auto; margin-right:auto; max-width:340px; }
    .hero-actions{ margin-left:auto; margin-right:auto; }
    .btn-arrow--solid, .btn-ghost{ justify-content:center; }
    .hero-bg{ position:relative; inset:auto; width:100%; height:auto; margin-top:26px; object-fit:contain; object-position:center; }
    .services-grid, .work-grid, .testi-grid, .team-grid, .stats-grid, .ind-grid, .process-grid, .value-list, .checklist, .form-row{ grid-template-columns:1fr; }
    .header-inner{ height:74px; }
    .brand-logo{ height:44px; }
    .cta-band{ padding:34px 26px; }
    .cta-band .cta-head{ flex-direction:column; align-items:flex-start; gap:12px; }
    .contact-form{ padding:26px; }
    .footer-bottom{ flex-direction:column; align-items:flex-start; text-align:left; }
}

@media (prefers-reduced-motion:reduce){
    *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto; }
    .reveal{ opacity:1; transform:none; }
}

/* =====================================================================
   HOMEPAGE v2 — "Bold Ideas. Rooted in Zimbabwe." reference build
   ===================================================================== */

/* ---------- HERO ---------- */
.hx-hero{ position:relative; overflow:hidden; padding:clamp(28px,4.5vw,66px) 0 clamp(48px,7vw,88px); }
.hx-hero-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:50px; align-items:center; }
.hx-hero-copy{ position:relative; padding-left:48px; z-index:2; }
.hx-slide-rail{ position:absolute; left:0; top:8px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.hx-slide-rail .rail-line{ width:1px; height:150px; background:linear-gradient(var(--ink),transparent); }
.hx-slide-rail .rail-dot{ width:11px; height:11px; border-radius:50%; }
.hx-slide-rail .d1{ background:var(--yellow); }
.hx-slide-rail .d2{ background:var(--olive); }
.hx-slide-rail .d3{ background:transparent; border:1.5px solid var(--ink); }

.hx-hero-title{ font-family:var(--font-head); font-weight:900; text-transform:uppercase; font-size:clamp(2.6rem,5.4vw,4.7rem); line-height:.97; letter-spacing:-.012em; }
.hx-hero-title span{ display:block; opacity:0; transform:translateY(24px); animation:fadeUp .8s var(--ease) forwards; }
.hx-hero-title span:nth-child(1){ animation-delay:.12s; }
.hx-hero-title span:nth-child(2){ animation-delay:.24s; }
.hx-hero-title span:nth-child(3){ animation-delay:.36s; }
.hx-hero-title .ln-green{ color:var(--green); }
.hx-hero-text{ max-width:380px; margin:28px 0 36px; color:var(--muted); font-size:1.06rem; opacity:0; transform:translateY(18px); animation:fadeUp .8s var(--ease) .5s forwards; }

.hx-btn-square{ display:inline-flex; align-items:center; gap:18px; opacity:0; transform:translateY(18px); animation:fadeUp .8s var(--ease) .62s forwards; }
.hx-btn-square .sq{ width:54px; height:54px; border-radius:10px; background:var(--dark); color:#fff; display:grid; place-items:center; transition:.3s; }
.hx-btn-square .sq svg{ width:22px; height:22px; }
.hx-btn-square .lbl{ font-family:var(--font-head); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:.82rem; border-bottom:2px solid var(--ink); padding-bottom:4px; }
.hx-btn-square:hover .sq{ background:var(--yellow); color:var(--ink); transform:translate(2px,-2px); }

.hx-hero-visual{ position:relative; min-height:520px; display:flex; align-items:center; justify-content:center; }
.hx-hero-portrait{ position:relative; z-index:2; width:100%; max-width:520px; height:560px; }
.hx-hero-portrait img{ width:100%; height:100%; object-fit:cover; object-position:center 14%; opacity:0; animation:fadeUp 1s var(--ease) .25s forwards; }
.hx-hero-block{ position:absolute; z-index:1; right:7%; bottom:26px; width:150px; height:110px; background:var(--dark); }
.hx-pattern{ position:absolute; z-index:1; right:1%; top:26%; width:110px; height:200px; opacity:.45;
    background-image:repeating-linear-gradient(45deg, var(--olive) 0 2px, transparent 2px 10px),
                     repeating-linear-gradient(-45deg, var(--olive) 0 2px, transparent 2px 10px); }
.hx-dots{ width:118px; height:118px; background-image:radial-gradient(currentColor 2.3px, transparent 2.6px); background-size:19px 19px; }
.hx-dots.green{ color:var(--olive); }
.hx-hero-visual .hx-dots.green{ position:absolute; right:-4px; top:6px; z-index:3; }

/* ---------- WHAT WE DO ---------- */
.hx-what{ position:relative; padding:clamp(48px,6.5vw,88px) 0; }
.hx-eyebrow{ font-family:var(--font-head); font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; color:var(--dark); margin-bottom:34px; }
.hx-vrot{ position:absolute; right:6px; top:50%; transform:translateY(-50%); writing-mode:vertical-rl; font-family:var(--font-head); font-weight:800; text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; color:var(--dark); opacity:.85; }
.hx-what-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.hx-what-item{ padding:4px 28px; border-left:1px solid var(--line); text-align:center; }
.hx-what-item:first-child{ border-left:none; }
.hx-what-icon{ display:block; width:50px; height:50px; margin:0 auto 22px; }
.hx-what-icon svg{ width:100%; height:100%; }
.hx-what-item h3{ text-transform:uppercase; font-size:1.04rem; font-weight:800; line-height:1.15; margin-bottom:14px; }
.hx-what-item p{ font-size:.95rem; }

/* ---------- FEATURED WORK ---------- */
.hx-featured{ padding:0; }
.hx-featured > .container{ max-width:none; width:100%; margin:0; padding:0; }
.hx-featured-banner{
    position:relative; display:flex; align-items:center;
    aspect-ratio:2092 / 751;
    background-size:cover; background-position:right center; background-repeat:no-repeat;
    background-color:#F8F3EF;
    overflow:hidden;
}
/* Cream wash on the left keeps the copy legible over the artwork at any width */
.hx-featured-banner::before{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(90deg, #F8F3EF 0%, rgba(248,243,239,.94) 32%, rgba(248,243,239,0) 60%);
}
.hx-featured-copy{ position:relative; z-index:2; width:54%; padding:0 24px 0 clamp(28px,8vw,140px); }
.hx-featured-fallback{ display:none; }
.hx-featured-copy h2{ font-size:clamp(2rem,4vw,3.4rem); text-transform:uppercase; line-height:.96; color:var(--dark); }
.hx-underline{ display:block; width:92px; height:9px; background:var(--yellow); border-radius:40%; transform:scaleY(.55); transform-origin:left; margin:18px 0 22px; }
.hx-featured-copy p{ max-width:330px; margin-bottom:24px; color:var(--muted); }
.hx-textlink{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; }
.hx-textlink svg{ width:18px; height:18px; transition:.3s; }
.hx-textlink:hover svg{ transform:translateX(5px); }
.hx-featured-media{ position:relative; }
.hx-featured-block{ position:absolute; right:-2%; top:-7%; width:40%; height:82%; background:var(--yellow); z-index:0; border-radius:6px; }
.hx-browser{ position:relative; z-index:1; background:#fff; border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
.hx-browser .bar{ display:flex; gap:7px; padding:12px 16px; background:#f3f2ee; border-bottom:1px solid var(--line); }
.hx-browser .bar i{ width:10px; height:10px; border-radius:50%; background:#cfcdc4; }
.hx-browser img{ width:100%; display:block; }

/* ---------- WAYS WE CAN WORK TOGETHER ---------- */
.hx-ways{ padding:clamp(48px,6.5vw,88px) 0; }
.hx-center-eyebrow{ text-align:center; font-family:var(--font-head); font-weight:800; text-transform:uppercase; letter-spacing:.12em; font-size:.86rem; color:var(--dark); margin-bottom:46px; }
.hx-center-eyebrow .wave{ display:block; width:66px; height:16px; margin:12px auto 0;
    background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='16' viewBox='0 0 66 16'%3E%3Cpath d='M2 6 q8 -7 16 0 t16 0 t16 0' fill='none' stroke='%236E7A33' stroke-width='2.4'/%3E%3Cpath d='M2 11 q8 -7 16 0 t16 0 t16 0' fill='none' stroke='%23F7AF06' stroke-width='2.4'/%3E%3C/svg%3E"); }
.hx-ways-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.hx-card{ position:relative; display:grid; grid-template-columns:1fr 1fr; border-radius:16px; overflow:hidden; min-height:300px; transition:transform .35s var(--ease), box-shadow .35s; }
.hx-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.hx-card-body{ padding:40px 34px; display:flex; flex-direction:column; justify-content:center; }
.hx-card-script{ font-family:var(--font-script); font-weight:700; font-size:2.1rem; line-height:1.04; text-transform:none; letter-spacing:0; }
.hx-card-underline{ display:block; width:88px; height:6px; background:var(--yellow); border-radius:40%; transform:scaleY(.55); transform-origin:left; margin:10px 0 16px; }
.hx-card-body p{ font-size:.96rem; margin-bottom:24px; }
.hx-card-link{ display:inline-flex; align-items:center; gap:14px; }
.hx-card-link .circ{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--dark); color:#fff; flex:0 0 auto; transition:.3s; }
.hx-card-link .circ svg{ width:18px; height:18px; }
.hx-card-link .ll{ font-family:var(--font-head); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.76rem; border-bottom:2px solid currentColor; padding-bottom:3px; }
.hx-card:hover .hx-card-link .circ{ transform:translateX(4px); }
.hx-card-art{ position:relative; overflow:hidden; display:grid; place-items:center; }
.hx-card-art img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }
.hx-card-art.brush-green::before{ content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(circle at 58% 48%, var(--olive) 0 36%, transparent 60%); opacity:.5; }
.hx-card-art.brush-yellow::before{ content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(circle at 56% 50%, var(--yellow) 0 40%, transparent 62%); opacity:.55; }
.hx-card.tone-cream{ background:var(--cream); color:var(--ink); }
.hx-card.tone-yellow{ background:var(--yellow); color:var(--ink); }
.hx-card.tone-dark{ background:var(--dark); color:#fff; }
.hx-card.tone-dark p{ color:rgba(255,255,255,.82); }
.hx-card.tone-dark .hx-card-link .circ{ background:var(--yellow); color:var(--ink); }
.hx-card.tone-yellow .hx-card-underline{ background:#fff; }
.hx-card.tone-dark .hx-card-underline{ background:var(--yellow); }
.art-pattern{ position:relative; z-index:1; width:120px; height:120px; opacity:.85;
    background-image:repeating-linear-gradient(45deg, var(--yellow) 0 2px, transparent 2px 12px),
                     repeating-linear-gradient(-45deg, var(--yellow) 0 2px, transparent 2px 12px); }
.art-chess{ position:relative; z-index:1; color:var(--dark); width:84px; }
.art-chess svg{ width:100%; height:auto; }

/* ---------- TRUSTED BY ---------- */
.hx-trusted{ padding:clamp(32px,4vw,52px) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.hx-trusted-inner{ display:flex; align-items:center; gap:44px; flex-wrap:wrap; }
.hx-trusted-script{ font-family:var(--font-script); font-weight:700; font-size:1.7rem; line-height:1.04; color:var(--dark); flex:0 0 auto; }
.hx-trusted-script::after{ content:""; display:block; width:78px; height:6px; background:var(--yellow); border-radius:40%; transform:scaleY(.55); margin-top:6px; }
.hx-trusted-logos{ display:flex; flex-wrap:wrap; align-items:center; gap:22px 40px; flex:1; }
.hx-logo{ font-family:var(--font-head); font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:1.02rem; color:var(--ink); opacity:.65; transition:.3s; }
.hx-logo:hover{ opacity:1; }
.hx-dots.sm{ width:78px; height:78px; flex:0 0 auto; }

/* ---------- VIEW OUR WORK ---------- */
.hx-vow{ padding:clamp(38px,5.5vw,78px) 0; }
.hx-vow-card{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; background:var(--cream); border-radius:18px; overflow:hidden; }
.hx-vow-copy{ padding:clamp(34px,5vw,60px); display:flex; flex-direction:column; justify-content:center; }
.hx-vow-copy .hx-card-script{ font-size:2.7rem; }
.hx-vow-copy .hx-underline{ width:112px; }
.hx-vow-copy p{ max-width:300px; margin-bottom:26px; }
.hx-vow-media{ position:relative; min-height:300px; overflow:hidden; }
.hx-vow-media img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }

/* ---------- CTA BANDS ---------- */
.hx-bands{ padding:clamp(28px,4vw,48px) 0 clamp(48px,7vw,88px); }
.hx-band{ position:relative; display:flex; align-items:center; gap:32px; flex-wrap:wrap; padding:32px 46px; border-radius:14px; overflow:hidden; margin-bottom:22px; }
.hx-band:last-child{ margin-bottom:0; }
.hx-band.tone-cream{ background:var(--cream); }
.hx-band.tone-dark{ background:var(--dark); color:#fff; }
.hx-band.tone-yellow{ background:var(--yellow); }
.hx-band-ic{ width:58px; height:58px; flex:0 0 auto; position:relative; z-index:2; }
.hx-band-ic svg{ width:100%; height:100%; }
.hx-band.tone-cream .hx-band-ic{ color:var(--dark); }
.hx-band.tone-dark .hx-band-ic{ color:var(--yellow); }
.hx-band.tone-yellow .hx-band-ic{ color:var(--ink); }
.hx-band-head{ display:flex; flex-direction:column; position:relative; z-index:2; flex:0 0 auto; min-width:210px; padding-left:24px; border-left:1px solid rgba(0,0,0,.16); }
.hx-band.tone-dark .hx-band-head{ border-left-color:rgba(255,255,255,.2); }
.hx-band > .hx-band-head:first-child{ border-left:none; padding-left:0; }
.hx-band-head .t1{ font-family:var(--font-head); font-weight:900; text-transform:uppercase; font-size:clamp(1.4rem,2.3vw,1.95rem); line-height:1; }
.hx-band-head .t2{ font-size:clamp(1.4rem,2.3vw,1.95rem); line-height:1.06; margin-top:2px; }
.hx-band-head .t2.script{ font-family:var(--font-script); font-weight:700; text-transform:none; color:var(--green); }
.hx-band-head .t2.script.yellow{ color:var(--yellow); }
.hx-band-head .t2.script.green{ color:var(--olive); }
.hx-band-head.on-dark .t1{ color:#fff; }
.hx-card-underline.light{ background:#fff; }
.hx-band-action{ position:relative; z-index:2; display:flex; flex-direction:column; gap:14px; flex:0 1 330px; margin-right:auto; }
.hx-band-action p{ font-size:.95rem; }
.hx-band.tone-dark .hx-band-action p{ color:rgba(255,255,255,.8); }
.hx-band-link{ display:inline-flex; align-items:center; gap:14px; font-family:var(--font-head); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.76rem; }
.hx-band-link .circ{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; transition:.3s; }
.hx-band-link .circ svg{ width:18px; height:18px; }
.hx-band-link > span:last-child{ border-bottom:2px solid currentColor; padding-bottom:3px; }
.hx-band-link.yellow .circ{ background:var(--yellow); color:var(--ink); }
.hx-band-link.green .circ{ background:var(--olive); color:#fff; }
.hx-band-link.dark .circ{ background:var(--dark); color:#fff; }
.hx-band-link:hover .circ{ transform:translateX(4px); }
.hx-band-brush, .hx-band-waves{ position:absolute; right:0; top:0; bottom:0; width:30%; z-index:1; pointer-events:none; }
.hx-band-brush.bg{ background:radial-gradient(circle at 86% 50%, var(--yellow) 0 26%, transparent 50%), radial-gradient(circle at 64% 50%, var(--dark) 0 30%, transparent 56%); opacity:.9; }
.hx-band-brush.dk{ background:radial-gradient(circle at 88% 50%, var(--dark) 0 34%, transparent 60%); opacity:.9; }
.hx-band-waves{ width:14%; background-image:repeating-linear-gradient(90deg, transparent 0 12px, var(--olive) 12px 15px); opacity:.45; -webkit-mask:linear-gradient(90deg,transparent,#000 60%); mask:linear-gradient(90deg,transparent,#000 60%); }
.hx-dots.green.corner{ position:absolute; right:34px; bottom:24px; width:96px; height:64px; z-index:1; opacity:.6; }

/* ---------- HOMEPAGE RESPONSIVE ---------- */
@media (max-width:980px){
    .hx-hero-grid{ grid-template-columns:1fr; gap:30px; }
    .hx-hero-copy{ order:1; }
    .hx-hero-visual{ order:2; min-height:auto; }
    .hx-hero-portrait{ height:auto; aspect-ratio:1/1; max-width:440px; }
    .hx-vrot{ display:none; }
    .hx-what-grid{ grid-template-columns:1fr 1fr; gap:34px 0; }
    .hx-what-item{ padding:4px 26px; }
    .hx-what-item:nth-child(odd){ border-left:none; padding-left:0; }
    .hx-featured-copy{ width:62%; }
    .hx-vow-card{ grid-template-columns:1fr; }
    .hx-vow-media{ order:-1; min-height:240px; }
}
@media (max-width:760px){
    /* Stack the featured banner: copy on top, full artwork below */
    .hx-featured-banner{ aspect-ratio:auto; display:block; background-image:none !important; padding:30px 0 0; }
    .hx-featured-banner::before{ display:none; }
    .hx-featured-copy{ width:100%; padding:0 22px; }
    .hx-featured-copy p{ max-width:none; }
    .hx-featured-fallback{ display:block; width:100%; margin-top:22px; }
    .hx-ways-grid{ grid-template-columns:1fr; }
    .hx-band{ padding:28px 28px; gap:20px; }
    .hx-band-head{ border-left:none; padding-left:0; min-width:0; flex:1 1 100%; }
    .hx-band-action{ flex:1 1 100%; }
    .hx-band-brush, .hx-band-waves, .hx-dots.green.corner{ display:none; }
}
@media (max-width:560px){
    .hx-hero-copy{ padding-left:34px; }
    .hx-what-grid{ grid-template-columns:1fr; }
    .hx-what-item{ border-left:none !important; padding:0 0 6px !important; }
    .hx-card{ grid-template-columns:1fr; }
    .hx-card-art{ min-height:200px; order:2; }
    .hx-trusted-inner{ gap:24px; }
}

/* =====================================================================
   PREMIUM UPGRADE — Phase 2 & 3 (services, portfolio, stats, testimonials, final CTA)
   ===================================================================== */
.kicker.on-dark{ color:var(--yellow); }
.kicker.on-dark::before{ background:var(--yellow); }

/* ---- What We Do: premium icon badges + hover ---- */
.hx-what-item{ transition:transform .4s var(--ease); }
.hx-what-item:hover{ transform:translateY(-6px); }
.hx-what-icon{ width:78px; height:78px; border-radius:50%; background:var(--sand);
    display:grid; place-items:center; margin:0 auto 24px; transition:transform .4s var(--ease), box-shadow .4s; }
.hx-what-icon svg{ width:42px; height:42px; }
.hx-what-item:hover .hx-what-icon{ transform:scale(1.07); box-shadow:0 0 0 7px rgba(232,176,33,.14); }

/* ---- Portfolio (Selected Work) ---- */
.hx-portfolio .work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.work-grid.premium .work-card{ aspect-ratio:4/3.1; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); }
.work-grid.premium .work-card:hover img{ transform:scale(1.06); }
.work-card .work-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:14px;
    font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.08em;
    font-size:.72rem; color:var(--yellow); opacity:0; transform:translateY(8px); transition:.4s var(--ease); }
.work-card .work-cta svg{ width:16px; height:16px; }
.work-card:hover .work-cta{ opacity:1; transform:none; }
.hx-portfolio-foot{ text-align:center; margin-top:50px; }

/* ---- Stats (dark, animated counters) ---- */
.hx-stats{ position:relative; overflow:hidden; background:var(--dark); color:#fff; padding:clamp(58px,7vw,96px) 0; }
.hx-stats::before{ content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px; border-radius:50%;
    background:radial-gradient(closest-side, rgba(232,176,33,.16), transparent 70%); pointer-events:none; }
.hx-stats-head{ text-align:center; max-width:620px; margin:0 auto 50px; }
.hx-stats-head h2{ color:#fff; }
.hx-stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; position:relative; z-index:1; }
.hx-stat{ text-align:center; padding:34px 18px; border-radius:var(--radius); background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.09); transition:transform .4s var(--ease), background .4s; }
.hx-stat:hover{ transform:translateY(-6px); background:rgba(255,255,255,.08); }
.hx-stat-ic{ display:grid; place-items:center; width:60px; height:60px; margin:0 auto 16px; border-radius:50%;
    background:rgba(232,176,33,.14); color:var(--yellow); }
.hx-stat-ic svg{ width:28px; height:28px; }
.hx-stat-val{ font-family:var(--font-display); font-weight:700; font-size:clamp(2.4rem,4.4vw,3.4rem); line-height:1; color:#fff; }
.hx-stat-label{ margin-top:10px; color:rgba(255,255,255,.6); font-size:.92rem; }

/* ---- Testimonials ---- */
.hx-testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.hx-testi-card{ display:flex; flex-direction:column; gap:18px; background:#fff; border:1px solid var(--line);
    border-radius:var(--radius-lg); padding:34px 30px; box-shadow:var(--shadow-card); transition:transform .4s var(--ease), box-shadow .4s; }
.hx-testi-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.hx-stars{ display:flex; gap:4px; color:var(--yellow); }
.hx-stars svg{ width:18px; height:18px; }
.hx-testi-card blockquote{ font-size:1.04rem; line-height:1.62; color:var(--ink); }
.hx-testi-result{ align-self:flex-start; font-family:var(--font-display); font-weight:600; font-size:.72rem;
    text-transform:uppercase; letter-spacing:.05em; color:var(--dark); background:var(--sand); padding:7px 14px; border-radius:50px; }
.hx-testi-author{ display:flex; align-items:center; gap:14px; margin-top:auto; padding-top:6px; }
.hx-avatar{ width:50px; height:50px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
    background:var(--dark); color:var(--yellow); font-family:var(--font-display); font-weight:700; font-size:1.15rem; }
.hx-testi-author .nm{ display:block; font-family:var(--font-head); font-weight:700; font-size:.95rem; color:var(--ink); }
.hx-testi-author .rl{ display:block; font-size:.82rem; color:var(--muted); }

/* ---- Final CTA ---- */
.hx-final{ padding:clamp(40px,6vw,84px) 0 clamp(56px,8vw,104px); }
.hx-final-card{ position:relative; overflow:hidden; background:var(--dark); color:#fff; border-radius:var(--radius-lg);
    padding:clamp(52px,8vw,100px) clamp(28px,5vw,72px); text-align:center; }
.hx-final-inner{ position:relative; z-index:2; max-width:720px; margin:0 auto; }
.hx-final-eyebrow{ font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.2em;
    font-size:.76rem; color:var(--yellow); margin-bottom:18px; }
.hx-final-card h2{ color:#fff; font-size:clamp(2.1rem,4.6vw,3.6rem); line-height:1.05; }
.hx-final-sub{ color:rgba(255,255,255,.72); max-width:540px; margin:20px auto 36px; font-size:1.06rem; }
.hx-final-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hx-final-pattern{ position:absolute; inset:0; z-index:0; opacity:.6;
    background-image:radial-gradient(rgba(232,176,33,.18) 1.5px, transparent 1.7px); background-size:26px 26px;
    -webkit-mask:radial-gradient(circle at 82% 18%, #000, transparent 58%); mask:radial-gradient(circle at 82% 18%, #000, transparent 58%); }
.hx-dots.yellow{ color:var(--yellow); }
.hx-dots.yellow.corner2{ position:absolute; left:30px; bottom:22px; width:96px; height:64px; z-index:1; opacity:.4; }

/* ---- Buttons ---- */
.btn-lg{ padding:17px 34px; font-size:.9rem; }
.btn-ghost{ background:transparent; border:2px solid rgba(255,255,255,.4); color:#fff; }
.btn-ghost:hover{ background:#fff; border-color:#fff; color:var(--dark); }

/* ---- Phase 2 & 3 responsive ---- */
@media (max-width:980px){
    .hx-portfolio .work-grid, .hx-stats-grid, .hx-testi-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
    .hx-portfolio .work-grid, .hx-stats-grid, .hx-testi-grid{ grid-template-columns:1fr; }
    .hx-final-actions .btn{ width:100%; }
}

/* ---- Motion polish ---- */
[data-parallax]{ will-change:transform; }
.btn:active{ transform:translateY(-1px) scale(.99); }

/* =====================================================================
   PALETTE v3 — Terracotta accent + premium, conversion-focused CTAs
   ===================================================================== */
.text-terracotta{ color:var(--terracotta); }
.text-gold{ color:var(--gold); }

/* ---------- Premium buttons (refined treatment + sheen) ---------- */
.btn{ padding:16px 36px; border-radius:10px; letter-spacing:.06em;
    box-shadow:0 8px 22px -13px rgba(15,43,15,.55); position:relative; overflow:hidden; isolation:isolate; }
.btn-pill{ border-radius:50px; }
.btn::after{ content:""; position:absolute; top:0; bottom:0; left:-130%; width:55%; z-index:-1;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform:skewX(-18deg); }
.btn:hover{ transform:translateY(-3px); box-shadow:0 16px 32px -14px rgba(15,43,15,.5); }
.btn:hover::after{ animation:btnSheen .75s var(--ease); }
@keyframes btnSheen{ to{ left:150%; } }

/* primary conversion CTA = terracotta */
.btn-cta{ background:var(--terracotta); border-color:var(--terracotta); color:#fff;
    box-shadow:0 10px 26px -11px rgba(201,79,45,.6); }
.btn-cta:hover{ background:var(--terracotta-d); border-color:var(--terracotta-d);
    box-shadow:0 18px 36px -13px rgba(201,79,45,.6); }
.btn-yellow{ background:var(--gold); border-color:var(--gold); color:var(--dark); }
.btn-yellow:hover{ background:#DD9F00; border-color:#DD9F00; }

/* header + mobile primary CTA → terracotta */
.nav-cta{ background:var(--terracotta); border-color:var(--terracotta); color:#fff;
    box-shadow:0 8px 20px -10px rgba(201,79,45,.55); }
.nav-cta:hover{ background:var(--terracotta-d); border-color:var(--terracotta-d); }
.mobile-nav .btn{ background:var(--terracotta); border-color:var(--terracotta); color:#fff; }

/* contact form submit → terracotta */
.contact-form .btn, .contact-form button[type="submit"]{ background:var(--terracotta); border-color:var(--terracotta); color:#fff; }
.contact-form .btn:hover, .contact-form button[type="submit"]:hover{ background:var(--terracotta-d); border-color:var(--terracotta-d); }

/* ---------- Arrow buttons: refined, warmer hover ---------- */
.arrow-circle{ box-shadow:0 8px 20px -12px rgba(15,43,15,.5); }
.btn-arrow:hover .arrow-circle{ background:var(--terracotta); color:#fff; transform:translateX(6px); }
.btn-arrow-label::after{ transition:background .35s var(--ease); }
.btn-arrow:hover .btn-arrow-label::after{ background:var(--terracotta); }
.btn-arrow.on-dark .arrow-circle{ background:var(--gold); color:var(--dark); }
.btn-arrow.on-dark:hover .arrow-circle{ background:var(--terracotta); color:#fff; }

/* ---------- Lead CTA band → terracotta conversion block ---------- */
.hx-band.tone-terracotta{ background:var(--terracotta); color:#fff; }
.hx-band.tone-terracotta .t1{ color:#fff; }
.hx-band.tone-terracotta .t2.script{ color:#fff; }
.hx-band.tone-terracotta .hx-card-underline{ background:#fff; }
.hx-band.tone-terracotta .hx-band-action p{ color:rgba(255,255,255,.88); }
.hx-band.tone-terracotta .hx-band-head{ border-left-color:rgba(255,255,255,.25); }
.hx-band.tone-terracotta .hx-band-link{ color:#fff; }
.hx-band.tone-terracotta .hx-band-link .circ{ background:#fff; color:var(--terracotta); }
.hx-band.tone-terracotta .hx-band-link:hover .circ{ background:var(--dark); color:#fff; }
.hx-band.tone-terracotta .hx-band-brush.bg{ opacity:.55;
    background:radial-gradient(circle at 86% 50%, rgba(255,255,255,.20) 0 26%, transparent 52%),
              radial-gradient(circle at 62% 50%, var(--dark) 0 30%, transparent 56%); }

/* ---------- Warm accents on cards / trust ---------- */
.hx-what-item:hover .hx-what-icon{ box-shadow:0 0 0 7px rgba(201,79,45,.12); }
.hx-logo:hover{ color:var(--terracotta); opacity:1; }
.svc-card:hover::before{ background:var(--terracotta); }
.work-card .work-cta{ color:var(--gold); }

/* Featured Work image → premium framed showcase */
.hx-featured-img{ position:relative; z-index:1; width:100%; display:block; border-radius:var(--radius-lg); box-shadow:var(--shadow); }

/* =====================================================================
   Premium pill CTAs — label + circular arrow (Ways We Work cards)
   ===================================================================== */
.hx-card-link{ gap:14px; padding:6px 6px 6px 24px; border-radius:50px;
    background:var(--dark); color:#fff; box-shadow:0 12px 26px -16px rgba(15,43,15,.65);
    transition:transform .4s var(--ease), box-shadow .4s, background .4s; }
.hx-card-link .ll{ order:1; font-family:var(--font-head); font-weight:600; text-transform:none;
    letter-spacing:.005em; font-size:.86rem; border-bottom:none; padding-bottom:0; white-space:nowrap; }
.hx-card-link .circ{ order:2; width:42px; height:42px; background:var(--gold); color:var(--dark);
    box-shadow:none; transition:transform .4s var(--ease), background .4s, color .4s; }
.hx-card:hover .hx-card-link{ transform:translateY(-3px); box-shadow:0 18px 32px -16px rgba(15,43,15,.6); }
.hx-card:hover .hx-card-link .circ{ transform:translateX(4px); }
/* tone variants matching the reference */
.hx-card.tone-dark .hx-card-link{ background:var(--gold); color:var(--dark); }
.hx-card.tone-dark .hx-card-link .circ{ background:var(--dark); color:var(--gold); }
.hx-card.tone-dark:hover .hx-card-link .circ{ background:#fff; color:var(--dark); }
.hx-card.tone-yellow .hx-card-link{ background:var(--dark); color:#fff; }
.hx-card.tone-yellow .hx-card-link .circ{ background:var(--gold); color:var(--dark); }

/* =====================================================================
   PROJECT BRIEF FORM (brief.php)
   ===================================================================== */
.brief-wrap{ max-width:880px; margin:0 auto; }
/* The form itself is transparent; each section is its own cream card */
.brief-form{ background:transparent; padding:0; }
.brief-section{
    background:var(--cream); border:0; border-radius:var(--radius);
    padding:30px 32px 14px; margin:0 0 24px;
}
.brief-section legend{
    font-family:var(--font-head); font-weight:800; font-size:1.05rem; color:var(--dark);
    padding:0 0 18px; margin-bottom:8px;
}
/* Two-column field grid; full-width fields span both columns */
.brief-form .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 22px; }
.brief-form .field{ min-width:0; }
.brief-form .field.full{ grid-column:1 / -1; }
/* Group label for radios / checkboxes */
.brief-legend{
    display:block; font-family:var(--font-head); font-weight:700; font-size:.82rem;
    text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px;
}
/* Choice pills (checkboxes / radios) */
.choice-grid{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:6px; }
.choice{
    display:inline-flex; align-items:center; gap:9px; padding:10px 16px;
    background:#fff; border:1.5px solid var(--line); border-radius:40px;
    font-size:.9rem; cursor:pointer; transition:border-color .2s, background .2s, color .2s;
    user-select:none;
}
.choice:hover{ border-color:var(--green); }
.choice input{ width:16px; height:16px; margin:0; accent-color:var(--green); cursor:pointer; }
.choice:has(input:checked){ border-color:var(--green); background:rgba(110,122,51,.12); color:var(--dark); font-weight:600; }
.form-note.err{ color:#b23b1e; font-weight:600; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"]{
    border-color:#b23b1e; box-shadow:0 0 0 3px rgba(178,59,30,.12);
}

/* ---- Multi-step wizard ---- */
.brief-progress{ margin-bottom:26px; }
.brief-progress-meta{ display:flex; align-items:baseline; gap:12px; margin-bottom:10px; }
.brief-progress-meta .bp-step{ font-family:var(--font-head); font-weight:800; color:var(--dark); font-size:.95rem; }
.brief-progress-meta .bp-title{ flex:1; color:var(--green); font-weight:600; font-size:.9rem; }
.brief-progress-meta .bp-count{ color:var(--muted); font-size:.82rem; font-weight:600; }
.brief-progress-bar{ height:8px; background:var(--line); border-radius:6px; overflow:hidden; }
.brief-progress-bar > span{ display:block; height:100%; width:0; border-radius:6px;
    background:linear-gradient(90deg, var(--green), var(--yellow)); transition:width .4s var(--ease); }

/* Wizard mode: show one step at a time (no-JS fallback = all steps visible) */
.brief-form.wizard .brief-section{ display:none; }
.brief-form.wizard .brief-section.is-active{ display:block; animation:fadeUp .45s var(--ease) both; }

/* Navigation row */
.brief-nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:6px; }
.brief-nav-right{ display:flex; gap:12px; margin-left:auto; }
.brief-next svg, .brief-back svg{ flex:0 0 auto; }
/* No-JS default: hide step buttons, show the submit (long-form behaviour) */
.brief-back, .brief-next{ display:none; }
.brief-form.wizard .brief-back, .brief-form.wizard .brief-next{ display:inline-flex; align-items:center; }
.brief-form.wizard .brief-send{ display:none; }
.brief-form.wizard.on-last .brief-send{ display:inline-flex; }
.brief-privacy{ text-align:center; margin-top:16px; }

@media (max-width:640px){
    .brief-form .form-grid{ grid-template-columns:1fr; }
    .brief-section{ padding:24px 20px 10px; }
    .brief-nav{ flex-wrap:wrap; }
    .brief-nav-right{ width:100%; }
    .brief-form.wizard .brief-next, .brief-form.wizard .brief-send{ flex:1; justify-content:center; }
}

/* =====================================================================
   PROJECT BRIEF — 6-phase consultative redesign
   ===================================================================== */
:root{ --pp-active:#1E3A1E; --pp-done:#C8941A; --pp-up:#CCCCCC; }

/* CHANGE 1 — Reframed opening */
.brief-intro-section{ background:var(--cream); padding:clamp(40px,6vw,72px) 0 14px; }
.brief-intro{ text-align:center; max-width:760px; }
.brief-intro-logo{ height:60px; width:auto; display:block; margin:0 auto 22px; }
.brief-intro h1{ color:var(--pp-active); font-weight:800; font-size:clamp(1.9rem,4vw,2.8rem); line-height:1.1; margin:0 0 16px; }
.brief-intro p{ color:#666; font-style:italic; font-size:1.06rem; line-height:1.7; max-width:640px; margin:0 auto; }

.brief-section-wrap{ padding-top:clamp(26px,4vw,44px); }

/* CHANGE 3 — Named, sticky phase progress bar */
.phase-progress{
    position:sticky; top:74px; z-index:50;
    background:var(--bg); padding:14px 0 12px; margin:0 0 28px;
    border-bottom:1px solid var(--line);
}
.pp-steps{ list-style:none; margin:0; padding:0; display:flex; align-items:center; }
.pp-step{ display:flex; align-items:center; flex:1 1 0; min-width:0; }
.pp-step:not(:last-child)::after{ content:""; flex:1; height:2px; background:var(--pp-up); margin:0 8px; border-radius:2px; }
.pp-step.is-done:not(:last-child)::after{ background:var(--pp-done); }
.pp-btn{ display:inline-flex; align-items:center; gap:9px; background:none; border:0; padding:4px 2px; cursor:pointer; font-family:Arial,sans-serif; white-space:nowrap; }
.pp-btn:disabled{ cursor:default; }
.pp-marker{ width:28px; height:28px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; font-size:.82rem; font-weight:700; background:var(--pp-up); color:#fff; transition:background .3s; }
.pp-label{ font-size:.82rem; font-weight:500; color:#999; transition:color .3s; }
.pp-step.is-current .pp-marker{ background:var(--pp-active); }
.pp-step.is-current .pp-label{ color:var(--pp-active); font-weight:700; }
.pp-step.is-done .pp-marker{ background:var(--pp-done); }
.pp-step.is-done .pp-label{ color:var(--pp-active); }
.pp-step.is-done .pp-btn{ cursor:pointer; }
.pp-step.is-upcoming .pp-marker{ background:var(--pp-up); }
.pp-step.is-upcoming .pp-label{ color:var(--pp-up); }
/* Mobile progress */
.pp-mobile{ display:none; }
.pp-mobile-label{ display:block; font:700 .92rem Arial,sans-serif; color:var(--pp-active); margin-bottom:8px; }
.pp-mobile-bar{ height:8px; background:var(--pp-up); border-radius:6px; overflow:hidden; }
.pp-mobile-bar > span{ display:block; height:100%; width:16%; background:var(--pp-active); border-radius:6px; transition:width .4s var(--ease); }

/* Compact the desktop bar on smaller widths: markers only */
@media (max-width:980px){ .pp-label{ display:none; } }
@media (max-width:760px){
    .pp-steps{ display:none; }
    .pp-mobile{ display:block; }
    .phase-progress{ top:60px; }
}

/* Phase heads & sub-group headings */
.phase-head{ margin-bottom:18px; }
.phase-title{ color:var(--pp-active); font-weight:800; font-size:clamp(1.4rem,2.6vw,1.95rem); line-height:1.15; margin:0 0 6px; }
.phase-desc{ color:#666; font-size:1rem; margin:0; }
.phase-group{ color:var(--pp-active); font-weight:700; font-size:1.05rem; margin:26px 0 12px; padding-bottom:7px; border-bottom:1px solid var(--line); }
.field-intro{ color:#666; font-style:italic; font-size:.93rem; line-height:1.6; margin:0 0 12px; max-width:580px; }

/* CHANGE 4 — Reframed submit button + confirmation */
.brief-send{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    background:var(--pp-active); color:#fff; border:0; border-radius:10px;
    font-family:var(--font-head, Arial), sans-serif; font-weight:700; font-size:1rem;
    padding:16px 34px; cursor:pointer; transition:background .25s, transform .25s, box-shadow .25s;
    box-shadow:0 12px 26px -16px rgba(30,58,30,.8);
}
.brief-send:hover{ background:#14290f; transform:translateY(-2px); }
.brief-confirm{ text-align:center; font-style:italic; color:#666; font-size:.9rem; margin-top:16px; }