/* ============================================================================
   BIZNZUP — biznzup.com
   ----------------------------------------------------------------------------
   1.  Tokens
   2.  Base & typography
   3.  Layout primitives
   4.  Components (buttons, eyebrow, placeholder flag, mockups)
   5.  Header & navigation
   6.  Hero
   7.  Trust
   8.  Problem
   9.  Need help with
   10. Websites
   11. Paid growth
   12. Organic growth
   13. Managed growth
   14. Growth system
   15. Why BiznzUp
   16. Work / case studies
   17. Services accordion
   18. Process
   19. About & team
   20. Testimonials
   21. Final CTA
   22. Contact form
   23. Footer
   24. Motion / reveal
   25. Responsive
   26. Reduced motion & print
   ========================================================================= */


/* ============================================================================
   1. TOKENS
   ========================================================================= */
:root{
  /* Colour */
  --ink:        #05090F;
  --navy-900:   #071223;
  --navy-800:   #0B1A31;
  --navy-700:   #122A4E;
  --blue:       #1B6BFF;
  --blue-deep:  #0B47C4;
  --blue-lift:  #4D91FF;
  --sky:        #9CC4FF;
  --sky-soft:   #E4EDFF;
  --paper:      #FFFFFF;
  --mist:       #F3F6FB;
  --line:       rgba(7,18,35,.11);
  --line-2:     rgba(7,18,35,.18);
  --line-dark:  rgba(255,255,255,.13);
  --muted:      #56637A;
  --muted-dark: #93A4BF;
  --flag:       #8A5710;         /* editable-placeholder marker, off-palette on purpose */
  --danger:     #B3261E;
  --ok:         #1F7A45;

  /* Type */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Schibsted Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Layout */
  --shell: 1240px;
  --gut:   clamp(20px, 5vw, 56px);
  --sec:   clamp(64px, 8vw, 124px);
  --radius: 12px;
}


/* ============================================================================
   2. BASE & TYPOGRAPHY
   ========================================================================= */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;height:auto}

/* The browser's own [hidden] rule loses to any author rule that sets display,
   and several components here do. Without this, elements JS hides with
   .hidden = true (the unconfigured phone and WhatsApp links) still render. */
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:3px}
.dark :focus-visible,.hero :focus-visible{outline-color:var(--sky)}

h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.033em;line-height:1.03;margin:0}
h1{font-size:clamp(40px,6.2vw,78px)}
h2{font-size:clamp(30px,4.4vw,54px)}
h3{font-size:clamp(20px,2.1vw,27px);letter-spacing:-.022em;line-height:1.18}
p{margin:0}

.lead{font-size:clamp(16.5px,1.55vw,20px);line-height:1.62;color:var(--muted);max-width:62ch}
.dark .lead{color:var(--muted-dark)}
.note{margin-top:24px;font-size:14.5px;color:var(--muted);line-height:1.55;max-width:74ch}
.dark .note{color:var(--muted-dark)}
.note a{color:var(--blue);border-bottom:1px solid rgba(27,107,255,.35)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--blue);color:#fff;padding:14px 22px;border-radius:0 0 6px 0;font-weight:600;
}
.skip:focus{left:0}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}


/* ============================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================= */
.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}

/* Anchor links must clear the fixed header, not hide behind it */
section[id],#top{scroll-margin-top:88px}
.sec{padding-block:var(--sec)}
.sec-mist{background:var(--mist)}
.dark{background:var(--navy-900);color:#fff}

/* Two-column section: copy left, visual right */
.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(36px,5vw,76px);
  align-items:center;
}
.split-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(24px,4vw,48px);align-items:end;margin-bottom:clamp(38px,5vw,62px);
}
.stack-head{margin-bottom:clamp(34px,4vw,52px)}


/* ============================================================================
   4. COMPONENTS
   ========================================================================= */

/* --- Eyebrow ------------------------------------------------------------- */
.eyebrow{
  font-family:var(--body);font-size:14px;font-weight:600;color:var(--blue);
  display:flex;align-items:center;gap:10px;margin-bottom:18px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--blue);flex:none}
.dark .eyebrow{color:var(--sky)}
.dark .eyebrow::before{background:var(--sky)}

/* --- Draft vs production -------------------------------------------------
   Everything written for us rather than for a customer carries .dev-note or
   .ph. Setting data-mode="production" on <html> hides all of it in one move,
   without deleting anything, so the page stays editable afterwards. ------- */
html[data-mode="production"] .dev-note,
html[data-mode="production"] .ph{display:none!important}

/* --- Editable placeholder flag ------------------------------------------- */
.ph{
  display:inline-block;font-family:var(--body);font-size:11px;font-weight:700;
  letter-spacing:.04em;color:var(--flag);border:1px dashed var(--flag);
  padding:2px 7px;border-radius:3px;vertical-align:middle;white-space:nowrap;
  background:rgba(138,87,16,.07);
}
.dark .ph{color:#F0BE72;border-color:rgba(240,190,114,.55);background:rgba(240,190,114,.08)}

/* --- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-weight:600;font-size:16px;
  padding:15px 26px;border-radius:6px;min-height:52px;text-align:center;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 24px -10px rgba(27,107,255,.75)}
.btn-primary:hover{background:var(--blue-deep);transform:translateY(-2px)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{border:1px solid var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.dark .btn-ghost{border-color:var(--line-dark);color:#fff}
.dark .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-sm{padding:11px 19px;font-size:15px;min-height:44px}

/* Inline text link with arrow */
.link-arrow{
  font-weight:600;font-size:15px;color:var(--blue);
  display:inline-flex;align-items:center;gap:7px;
}
.link-arrow svg{transition:transform .25s ease}
.link-arrow:hover svg{transform:translateX(4px)}

/* --- Pill list ----------------------------------------------------------- */
.pills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:24px 0 0;padding:0}
.pills li{font-size:14.5px;padding:8px 14px;border:1px solid var(--line);border-radius:5px;background:var(--mist)}
.pills-round li{border-radius:999px;background:var(--paper);padding:9px 16px;font-size:15px;transition:border-color .25s,color .25s}
.pills-round li:hover{border-color:var(--blue);color:var(--blue)}

/* --- Check list ---------------------------------------------------------- */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,40px);margin-top:26px;list-style:none;padding:0}
.checks li{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:16px;align-items:flex-start}
.checks svg{flex:none;margin-top:4px}

/* --- Browser mockup ------------------------------------------------------ */
.bw{border-radius:11px;overflow:hidden;background:#fff;box-shadow:0 22px 44px -20px rgba(0,0,0,.5)}
.bw-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#E8EDF5;border-bottom:1px solid #D5DEEB}
.bw-bar i{width:8px;height:8px;border-radius:50%;background:#C2CDDD;flex:none}
.bw-url{flex:1;margin-left:8px;background:#fff;border-radius:5px;font-size:11px;color:#7C8AA0;padding:4px 10px;text-align:center}
.ms-nav{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid #EDF1F7}
.ms-nav b{width:34px;height:8px;border-radius:2px;background:var(--ink);flex:none}
.ms-nav u{width:22px;height:5px;border-radius:2px;background:#D9E1EC;text-decoration:none}
.ms-nav em{margin-left:auto;font-style:normal;font-size:9.5px;font-weight:600;color:#fff;background:var(--blue);border-radius:4px;padding:4px 9px}
.ms-hero{padding:20px 16px;background:linear-gradient(160deg,var(--sky-soft),#fff)}
.ms-hero s{display:block;height:9px;border-radius:3px;background:#C9D6E8;margin-bottom:7px;text-decoration:none}
.ms-hero s:first-child{height:12px;background:var(--ink);opacity:.82}
.ms-btn{display:inline-block;margin-top:11px;font-size:10px;font-weight:600;color:#fff;background:var(--blue);border-radius:5px;padding:6px 13px}
.ms-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px}
.ms-cards div{height:38px;border-radius:6px;background:#F0F4FA;border:1px solid #E4EAF3}
.ms-cards div::after{content:"";display:block;width:44%;height:5px;border-radius:2px;background:#CFDAE9;margin:11px 0 0 9px}

/* --- Phone mockup -------------------------------------------------------- */
.phone{
  width:92px;border-radius:13px;overflow:hidden;background:#fff;
  border:3px solid #10233F;box-shadow:0 26px 48px -18px rgba(0,0,0,.7);
}
.phone .ph-bar{height:14px;background:#10233F}
.phone .ph-body{padding:7px}
.phone .ph-body s{display:block;height:5px;border-radius:2px;background:#D6DFEC;margin-bottom:5px;text-decoration:none}
.phone .ph-body s:first-child{height:7px;background:var(--ink);opacity:.8;width:72%}
.phone .ph-body em{display:block;font-style:normal;height:11px;border-radius:3px;background:var(--blue);width:56%;margin-top:8px}
.phone .ph-body div{height:22px;border-radius:4px;background:#F0F4FA;margin-top:8px}


/* ============================================================================
   5. HEADER & NAVIGATION
   ========================================================================= */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:90;
  border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;
}
.hdr.stuck{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.hdr-in{display:flex;align-items:center;gap:32px;height:76px}

.logo{display:flex;align-items:center;gap:11px}
.logo-mark{width:34px;height:34px;flex:none;display:block}
.logo-txt{
  font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.028em;
  line-height:1;color:#fff;white-space:nowrap;
}
/* The two Z's are drawn, not typed — same geometry as the mark */
.wm-z{display:inline-block;height:.72em;width:.556em;vertical-align:baseline;margin:0 .012em;color:currentColor}
.wm-z.acc{color:var(--sky)}
.hdr.stuck .logo-txt{color:var(--ink)}
.hdr.stuck .wm-z.acc{color:var(--blue)}

.nav{display:flex;gap:26px;margin-left:auto;align-items:center;list-style:none;margin-block:0;padding:0}
.nav a{font-size:15.5px;font-weight:500;color:#fff;opacity:.82;transition:opacity .2s,color .2s;padding:6px 0;display:block}
.nav a:hover{opacity:1}
.nav a[aria-current="true"]{opacity:1;color:var(--sky)}
.hdr.stuck .nav a{color:var(--ink);opacity:.72}
.hdr.stuck .nav a:hover{opacity:1;color:var(--blue)}
.hdr.stuck .nav a[aria-current="true"]{color:var(--blue);opacity:1}
.hdr .btn-primary{margin-left:6px;flex:none}
/* The auto margin must sit on the <nav> itself (the flex child), not on the
   list inside it, or the menu hugs the logo instead of the button. */
.hdr-in > nav{margin-left:auto}

.burger{
  display:none;margin-left:auto;width:46px;height:46px;
  align-items:center;justify-content:center;border-radius:6px;
}
.burger span{display:block;width:22px;height:2px;background:#fff;position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:inherit;transition:transform .25s ease,top .25s ease}
.burger span::before{top:-7px}
.burger span::after{top:7px}
.hdr.stuck .burger span,.hdr.stuck .burger span::before,.hdr.stuck .burger span::after{background:var(--ink)}
.burger[aria-expanded="true"] span{background:transparent!important}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.mnav{
  display:none;background:var(--paper);border-bottom:1px solid var(--line);
  padding:8px var(--gut) 26px;max-height:calc(100vh - 76px);overflow-y:auto;
}
.mnav.open{display:block}
.mnav ul{list-style:none;margin:0;padding:0}
.mnav a{display:block;padding:15px 0;border-bottom:1px solid var(--line);font-weight:600;font-size:18px}
.mnav .btn{margin-top:20px;width:100%}


/* ============================================================================
   6. HERO
   ========================================================================= */
.hero{
  position:relative;background:var(--navy-900);color:#fff;
  padding:calc(76px + clamp(48px,7vw,92px)) 0 clamp(60px,8vw,104px);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 520px at 78% 12%, rgba(27,107,255,.30), transparent 62%),
    radial-gradient(700px 460px at 8% 90%, rgba(13,71,196,.22), transparent 65%);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(1100px 640px at 60% 30%,#000,transparent 78%);
          mask-image:radial-gradient(1100px 640px at 60% 30%,#000,transparent 78%);
  opacity:.5;
}
.hero .shell{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,5vw,72px);align-items:center}
.hero h1{max-width:13ch}
.hero h1 .line{display:block;overflow:hidden;padding-block:.08em;margin-block:-.08em}
.hero h1 .line i{display:block;font-style:normal;transform:translateY(105%);animation:rise .85s cubic-bezier(.2,.8,.2,1) forwards}
.hero h1 .line:nth-child(2) i{animation-delay:.09s}
@keyframes rise{to{transform:translateY(0)}}
.hero-sub{margin-top:26px;max-width:52ch;font-size:clamp(16.5px,1.5vw,19.5px);line-height:1.6;color:#C3D2EA}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-note{margin-top:26px;font-size:14.5px;color:#8FA5C4;display:flex;align-items:flex-start;gap:9px}
.hero-note .dot{margin-top:7px}
.hero-note b{color:#fff;font-weight:600}
.dot{width:7px;height:7px;border-radius:50%;background:#3CE28B;box-shadow:0 0 0 4px rgba(60,226,139,.16);flex:none}

/* --- Hero visual: the growth panel --------------------------------------- */
.dash{position:relative}
.dash-main{
  background:linear-gradient(158deg,rgba(20,46,86,.95),rgba(7,18,35,.96));
  border:1px solid var(--line-dark);border-radius:16px;padding:20px 20px 18px;
  box-shadow:0 48px 92px -46px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.06);
}
.dash-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-bottom:15px;border-bottom:1px solid var(--line-dark)}
.dash-top h2{font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.dash-top p{font-size:12.5px;color:#8FA5C4;margin-top:4px}
.demo-tag{
  font-size:10px;font-weight:700;letter-spacing:.07em;color:var(--sky);
  border:1px solid rgba(156,196,255,.42);border-radius:4px;padding:4px 8px;flex:none;white-space:nowrap;
}
.feed{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px;list-style:none;padding:0}
.feed li{font-size:11.5px;text-align:center;color:#A9BDD9;border:1px solid var(--line-dark);border-radius:5px;padding:6px 4px;background:rgba(255,255,255,.03)}
.feed-flow{margin:0 0 -2px}
.feed-flow svg{width:100%;height:auto;display:block}
.feed-flow path{stroke-dasharray:70;stroke-dashoffset:70;animation:draw 1s .7s ease-out forwards}
.feed-flow path:nth-child(2){animation-delay:.8s}
.feed-flow path:nth-child(3){animation-delay:.9s}
.feed-flow path:nth-child(4){animation-delay:1s}
@keyframes draw{to{stroke-dashoffset:0}}

.jr{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-dark)}
.jr-steps{display:grid;grid-template-columns:repeat(5,1fr);text-align:center;position:relative;list-style:none;margin:0;padding:0}
.jr-steps::before{content:"";position:absolute;left:10%;right:10%;top:5px;height:1px;background:var(--line-dark)}
.jr-steps li{position:relative}
.jr-steps i{display:block;width:9px;height:9px;border-radius:50%;background:#2B3F5F;margin:1px auto 9px;position:relative;z-index:2;transition:background .3s,box-shadow .3s}
.jr-steps li.lit i{background:var(--blue-lift);box-shadow:0 0 0 4px rgba(27,107,255,.2)}
.jr-steps li.key i{background:var(--sky)}
.jr-steps span{font-size:11px;color:#8FA5C4}
.jr-steps li.lit span{color:#fff}

.chip{
  position:absolute;right:-26px;bottom:132px;width:184px;
  background:#fff;color:var(--ink);border-radius:12px;padding:13px 15px;
  box-shadow:0 26px 52px -20px rgba(0,0,0,.66);animation:bob 7s 1.7s ease-in-out infinite;
}
.chip h3{font-family:var(--body);font-size:11.5px;font-weight:600;color:var(--muted);margin:0;letter-spacing:0}
.chip strong{display:block;font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.042em;margin-top:2px;line-height:1.1}
.chip small{display:block;font-size:11px;color:var(--muted);margin-top:3px;line-height:1.4}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.hero-phone{position:absolute;left:-28px;bottom:96px;animation:bob 7.5s ease-in-out infinite}
.dash-cap{margin-top:16px;font-size:12px;color:#7E93B4;max-width:250px}


/* ============================================================================
   7. TRUST
   ========================================================================= */
.trust{border-bottom:1px solid var(--line);background:var(--paper);padding-block:clamp(40px,5vw,58px)}
.trust-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,60px);align-items:start}
.trust h2{font-size:clamp(21px,2.1vw,26px);max-width:18ch;margin-bottom:12px}
.trust p{font-size:16px;color:var(--muted);max-width:40ch}
.trust-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px);margin-top:clamp(30px,3.4vw,44px);border-top:1px solid var(--line);padding-top:26px}
.trust-facts div{border-left:2px solid var(--blue);padding-left:16px}
.trust-facts b{display:block;font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.trust-facts p{font-size:14.5px;color:var(--muted);max-width:34ch}


/* ============================================================================
   8. PROBLEM
   ========================================================================= */
.prob-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);margin-top:clamp(40px,5vw,64px)}
.col-h{
  font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:-.01em;
  padding-bottom:14px;border-bottom:2px solid var(--ink);margin:0 0 6px;
}
.col-h.good{border-bottom-color:var(--blue);color:var(--blue)}
.p-list{list-style:none;margin:0;padding:0}
.p-list li{display:flex;gap:14px;padding:17px 0;border-bottom:1px solid var(--line);font-size:16.5px;line-height:1.45}
.p-list svg{flex:none;margin-top:3px}
.p-list.bad li{color:var(--muted)}


/* ============================================================================
   9. WHAT DO YOU NEED HELP WITH
   ========================================================================= */
.needs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:clamp(34px,4vw,50px);list-style:none;padding:0}
.need{
  border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,2.3vw,30px);
  display:flex;flex-direction:column;background:var(--paper);position:relative;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.need:hover,.need:focus-within{transform:translateY(-5px);box-shadow:0 26px 50px -30px rgba(7,18,35,.4);border-color:rgba(27,107,255,.45)}
.need.first{background:var(--navy-900);border-color:transparent;color:#fff}
.need.first p{color:#A9BFDD}
.need.first .need-n{color:var(--sky)}
.need.first .link-arrow{color:var(--sky)}
.need-n{font-family:var(--display);font-size:12.5px;font-weight:700;color:var(--blue);margin-bottom:14px;letter-spacing:.02em}
.need h3{font-size:clamp(19px,1.8vw,22px);margin-bottom:11px}
.need p{font-size:15.5px;color:var(--muted);line-height:1.5;flex:1}
.need .link-arrow{margin-top:22px}
/* whole card clickable, link still the accessible target */
.need .link-arrow::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}


/* ============================================================================
   10. WEBSITES
   ========================================================================= */
.wsite-devices{position:relative;padding-bottom:26px}
.wsite-devices .phone{position:absolute;right:-14px;bottom:-8px;width:104px}


/* ============================================================================
   11. PAID GROWTH — ad → page → enquiry
   ========================================================================= */
.flow3{display:grid;gap:0}
.f3-card{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  box-shadow:0 18px 40px -26px rgba(7,18,35,.4);overflow:hidden;
}
.f3-step{display:flex;align-items:center;justify-content:center;gap:9px;padding:13px 0;font-size:13.5px;color:var(--muted)}
.f3-step svg{flex:none;opacity:.6}
.ad-media{aspect-ratio:16/9;background:var(--mist);border-top:1px solid var(--line);display:grid;place-items:center;font-size:12px;color:#93A0B4;text-align:center;padding:10px}
.ad-meta{display:flex;align-items:center;gap:9px;padding:13px 15px 4px}
.ad-meta i{width:22px;height:22px;border-radius:50%;background:var(--ink);flex:none}
.ad-meta b{font-family:var(--display);font-size:13px;font-weight:700}
.ad-meta span{font-size:11px;color:var(--muted);margin-left:auto;border:1px solid var(--line);border-radius:3px;padding:2px 6px}
.ad-body{padding:6px 15px 15px}
.ad-body s{display:block;height:7px;border-radius:2px;background:#D9E1EC;margin-bottom:6px;text-decoration:none}
.ad-cta{display:inline-block;margin-top:8px;font-size:11px;font-weight:600;color:#fff;background:var(--blue);border-radius:5px;padding:6px 13px}
.enq-card{padding:16px}
.enq-card h3{font-family:var(--display);font-size:13px;font-weight:700;margin:0 0 12px;letter-spacing:0}
.enq-card s{display:block;height:26px;border-radius:6px;background:var(--mist);border:1px solid var(--line);margin-bottom:8px;text-decoration:none}
.enq-ok{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;font-weight:600;color:var(--blue)}


/* ============================================================================
   12. ORGANIC GROWTH — content frames
   ========================================================================= */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cframe{
  border:1px dashed var(--line-2);border-radius:10px;background:var(--paper);
  display:grid;place-items:center;text-align:center;font-size:12px;color:#8C99AC;
  padding:12px;line-height:1.45;transition:border-color .25s,color .25s;
}
.cframe:hover{border-color:var(--blue);color:var(--blue)}
.cframe b{display:block;font-family:var(--display);font-size:13px;font-weight:700;color:var(--ink);margin-bottom:4px}
.cframe:hover b{color:var(--blue)}
.cframe.wide{grid-column:1/-1;aspect-ratio:16/8}
.cframe.tall{aspect-ratio:9/15}
.cgrid-cap{margin-top:14px;font-size:13.5px;color:var(--muted);text-align:center}


/* ============================================================================
   13. MANAGED GROWTH
   ========================================================================= */
.handle{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,36px);margin-top:clamp(32px,4vw,48px);list-style:none;padding:0}
.handle li{border-top:2px solid var(--line-2);padding-top:20px;transition:border-color .4s}
.handle li:hover{border-top-color:var(--blue)}
.handle b{display:block;font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.02em;margin-bottom:9px}
.handle p{font-size:15px;color:var(--muted);line-height:1.5}

.sec-foot{
  margin-top:clamp(36px,4.4vw,54px);padding-top:28px;border-top:1px solid var(--line);
  display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.sec-foot p{font-size:16.5px;color:var(--muted);max-width:56ch}
.dark .sec-foot{border-top-color:var(--line-dark)}
.dark .sec-foot p{color:#B4C6E0}


/* ============================================================================
   14. GROWTH SYSTEM
   ========================================================================= */
.sys{position:relative;overflow:hidden}
.sys::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(1000px 420px at 50% 0%,rgba(27,107,255,.22),transparent 70%)}
.sys .shell{position:relative;z-index:2}
.sys-head h2{max-width:16ch}

.rail{position:relative}
.rail-track{position:absolute;left:10px;right:10px;top:9px;height:2px;overflow:hidden;background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,.24),rgba(255,255,255,.10))}
.rail-track b{
  position:absolute;left:0;top:0;height:2px;width:26%;
  background:linear-gradient(90deg,transparent,var(--blue-lift),transparent);
  animation:pulse 6.5s 1s ease-in-out infinite;
}
@keyframes pulse{0%{transform:translateX(-110%)}62%,100%{transform:translateX(400%)}}

.stages{display:grid;grid-template-columns:repeat(5,1fr);gap:0;list-style:none;margin:0;padding:0}
.stage{position:relative;padding-right:clamp(16px,2.1vw,32px)}
.stage:last-child{padding-right:0}
.stage::after{
  content:"";position:absolute;top:5px;left:calc(50% + 10px);width:9px;height:9px;
  border-right:2px solid var(--blue-lift);border-top:2px solid var(--blue-lift);
  transform:rotate(45deg);opacity:.5;transition:opacity .3s;
}
.stage:last-child::after{display:none}
.stage.on::after{opacity:1}
.node{width:20px;height:20px;border-radius:50%;background:var(--navy-900);border:2px solid var(--line-dark);position:relative;z-index:2;transition:border-color .3s,box-shadow .3s}
.node::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--line-dark);transition:background .3s}
.stage.on .node{border-color:var(--blue-lift);box-shadow:0 0 0 6px rgba(27,107,255,.18)}
.stage.on .node::after{background:var(--blue-lift)}
.stage-out{
  display:inline-block;margin-top:22px;font-size:11.5px;font-weight:600;color:var(--sky);
  border:1px solid rgba(156,196,255,.28);border-radius:4px;padding:3px 9px;transition:border-color .3s,background .3s;
}
.stage.on .stage-out{border-color:rgba(156,196,255,.6);background:rgba(27,107,255,.14)}
.stage h3{margin:13px 0 9px;font-size:clamp(20px,2vw,26px)}
.stage p{font-size:15px;color:#8FA5C4;line-height:1.55}

.foundation{
  margin-top:clamp(28px,3.2vw,40px);border:1px solid rgba(156,196,255,.26);
  background:rgba(27,107,255,.10);border-radius:9px;padding:15px 20px;
  font-size:15.5px;color:#C7D6EB;text-align:center;
}
.loop{position:relative;margin-top:clamp(24px,2.8vw,34px);height:66px}
.loop-arc{position:absolute;inset:0;border:1px dashed rgba(156,196,255,.32);border-top:0;border-radius:0 0 90px 90px}
.loop-tip{position:absolute;left:-5px;top:-5px;width:0;height:0;border:5px solid transparent;border-bottom-color:var(--sky);opacity:.75}
.loop-lbl{
  position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);
  background:var(--navy-900);padding:0 18px;font-size:14.5px;color:#A9BFDD;text-align:center;max-width:88%;
}


/* ============================================================================
   15. WHY BIZNZUP
   ========================================================================= */
.why-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,6vw,90px);align-items:start}
.why-stick{position:sticky;top:110px}
.why-stick h2{margin-bottom:18px}
.why-list{border-top:1px solid var(--line);list-style:none;margin:0;padding:0}
.why-list li{
  padding:clamp(24px,3vw,34px) 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
}
.why-list svg{flex:none;margin-top:4px}
.why-list h3{margin-bottom:9px}
.why-list p{color:var(--muted);font-size:16.5px;max-width:56ch}


/* ============================================================================
   16. WORK / CASE STUDIES
   ========================================================================= */
.case{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:22px}
.case-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start;padding:clamp(24px,3.4vw,38px);border-bottom:1px solid var(--line)}
.case-tag{font-size:13.5px;font-weight:600;color:var(--blue);margin-bottom:12px}
.case-top h3{max-width:26ch;font-size:clamp(21px,2.4vw,31px)}
.case-meta{text-align:right;font-size:14px;color:var(--muted);line-height:1.5}

.ba{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.ba-side{background:var(--paper);padding:clamp(20px,2.4vw,28px)}
.ba-side h4{font-family:var(--display);font-size:12px;font-weight:700;margin:0 0 14px;letter-spacing:.04em}
.ba-side.before h4{color:var(--muted)}
.ba-side.after h4{color:var(--blue)}
.ba-frame{
  aspect-ratio:16/10;border-radius:8px;border:1px dashed var(--line-2);
  display:grid;place-items:center;text-align:center;padding:16px;
  font-size:12.5px;color:#93A0B4;line-height:1.5;background:var(--mist);
}
.ba-side.after .ba-frame{border-style:solid;border-color:rgba(27,107,255,.3);background:var(--sky-soft)}
.ba-side > p{margin-top:14px;font-size:15px;color:var(--muted);line-height:1.5}

.case-body{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.case-cell{padding:clamp(20px,2.6vw,30px);border-left:1px solid var(--line)}
.case-cell:first-child{border-left:0}
.case-cell h4{font-family:var(--display);font-size:13px;font-weight:700;color:var(--blue);margin:0 0 10px;letter-spacing:-.005em}
.case-cell p{font-size:15.5px;line-height:1.55;color:var(--muted)}
.case-cell.result{background:var(--sky-soft)}
.case-cell.result p{color:var(--ink)}

.case-foot{
  display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;
  padding:clamp(18px,2.2vw,24px) clamp(24px,3.4vw,38px);
  border-top:1px solid var(--line);background:var(--mist);
}
.case-services{margin:0;min-width:0}
.case-services li{background:var(--paper)}
.case-link{
  font-size:15px;font-weight:600;color:var(--blue);
  display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;
}
.case-link svg{transition:transform .25s}
.case-link:hover svg{transform:translateX(4px)}

/* --- Direct contact rows (email / phone / WhatsApp) ---------------------- */
.contact-direct{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.contact-direct li{display:flex;align-items:center;gap:11px;font-size:16px;color:var(--muted)}
.contact-direct svg{flex:none;color:var(--blue)}
.contact-direct a{font-weight:600;color:var(--ink);border-bottom:1px solid rgba(27,107,255,.35)}
.contact-direct a:hover{color:var(--blue)}


/* ============================================================================
   17. SERVICES ACCORDION
   ========================================================================= */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-btn{display:flex;width:100%;align-items:center;gap:20px;padding:clamp(20px,2.6vw,30px) 0;text-align:left}
.acc-num{font-family:var(--display);font-size:14px;font-weight:700;color:#A9B4C6;width:26px;flex:none}
.acc-btn h3{flex:1;transition:color .2s}
.acc-item.open .acc-btn h3,.acc-btn:hover h3{color:var(--blue)}
.acc-ico{
  width:30px;height:30px;border:1px solid var(--line-2);border-radius:50%;
  display:grid;place-items:center;flex:none;transition:transform .3s,background .3s,border-color .3s;
}
.acc-ico svg{stroke:var(--ink);transition:stroke .3s}
.acc-item.open .acc-ico{transform:rotate(45deg);background:var(--blue);border-color:var(--blue)}
.acc-item.open .acc-ico svg{stroke:#fff}
.acc-panel{height:0;overflow:hidden;transition:height .38s cubic-bezier(.4,0,.2,1)}
.acc-inner{padding:0 0 32px 46px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px)}
.acc-inner > p{color:var(--muted);font-size:16.5px;max-width:46ch}
.acc-inner .pills{margin-top:0}


/* ============================================================================
   18. PROCESS
   ========================================================================= */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,34px);list-style:none;margin:0;padding:0}
.step{border-top:2px solid var(--line-dark);padding-top:24px;transition:border-color .5s ease}
.step.in{border-top-color:var(--blue)}
.step b{font-family:var(--display);font-size:14px;font-weight:700;color:var(--sky);display:block;margin-bottom:14px}
.step h3{margin-bottom:11px}
.step p{font-size:15.5px;color:#93A9C7;line-height:1.55}


/* ============================================================================
   19. ABOUT & TEAM
   ========================================================================= */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,80px);align-items:center}
.about-grid h2{max-width:14ch;margin-bottom:20px}
.about-pts{margin-top:28px;border-top:1px solid var(--line);list-style:none;padding:0}
.about-pts li{padding:16px 0;border-bottom:1px solid var(--line);font-size:16.5px;display:flex;gap:14px}
.about-pts b{font-family:var(--display);font-weight:700;min-width:112px;flex:none}
.about-photo{border-radius:var(--radius);overflow:hidden;position:relative;background:var(--mist);border:1px solid var(--line)}
.about-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.about-photo figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 22px 16px;font-size:13px;color:#fff;
  background:linear-gradient(transparent,rgba(5,9,15,.82));
}

.team{margin-top:clamp(44px,6vw,72px);display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none;padding:0}
.mem{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:10px;padding:16px;background:var(--paper);transition:border-color .25s,transform .25s}
.mem:hover{border-color:rgba(27,107,255,.4);transform:translateY(-3px)}
.mem img{width:58px;height:58px;border-radius:50%;flex:none;object-fit:cover;background:var(--mist)}
.mem-ph{width:58px;height:58px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--sky-soft);color:var(--blue);font-family:var(--display);font-weight:700;font-size:12px}
.mem b{font-family:var(--display);font-size:15.5px;font-weight:700;display:block;letter-spacing:-.015em}
.mem span{font-size:13.5px;color:var(--muted);line-height:1.35;display:block}


/* ============================================================================
   20. TESTIMONIALS
   ========================================================================= */
.quo-in{max-width:900px}
.quo-mark{font-family:var(--display);font-size:96px;font-weight:800;color:var(--blue);line-height:.6;height:52px}
.quo blockquote{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(21px,2.7vw,34px);line-height:1.32;letter-spacing:-.025em}
.quo-who{display:flex;align-items:center;gap:14px;margin-top:30px}
.quo-av{width:48px;height:48px;border-radius:50%;background:var(--sky-soft);display:grid;place-items:center;font-family:var(--display);font-weight:700;color:var(--blue);flex:none}
.quo-who b{font-family:var(--display);font-size:16px;display:block}
.quo-who span{font-size:14.5px;color:var(--muted)}
.slide{display:none}
.slide.on{display:block;animation:fadein .45s ease}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.quo-ctrl{display:flex;align-items:center;gap:16px;margin-top:34px;flex-wrap:wrap}
.quo-nav{display:flex;gap:10px}
.quo-nav button{width:46px;height:46px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;transition:background .2s,border-color .2s}
.quo-nav button svg{stroke:var(--ink);transition:stroke .2s}
.quo-nav button:hover{background:var(--ink);border-color:var(--ink)}
.quo-nav button:hover svg{stroke:#fff}
.quo-dots{display:flex;gap:2px}
/* 9px dot, 30px hit area — comfortable to tap without looking heavy */
.quo-dots button{width:30px;height:30px;border-radius:50%;display:grid;place-items:center}
.quo-dots button::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--line-2);
  transition:background .25s,transform .25s;
}
.quo-dots button:hover::before{background:var(--muted)}
.quo-dots button[aria-current="true"]::before{background:var(--blue);transform:scale(1.25)}


/* ============================================================================
   21. FINAL CTA
   ========================================================================= */
.cta{position:relative;overflow:hidden;padding-block:clamp(58px,7vw,96px)}
.cta::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(760px 420px at 50% 110%,rgba(27,107,255,.35),transparent 68%)}
.cta .shell{position:relative;z-index:2;text-align:center}
.cta h2{max-width:17ch;margin-inline:auto;font-size:clamp(32px,5vw,62px)}
.cta .lead{margin:22px auto 0;text-align:center}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.cta-mini{margin-top:28px;font-size:14.5px;color:#8FA5C4}


/* ============================================================================
   22. CONTACT FORM
   ========================================================================= */
.form-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(36px,5vw,76px);align-items:start}
.form-grid h2{max-width:16ch}
.form-pts{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line)}
.form-pts li{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--muted);display:flex;gap:12px}
.form-pts svg{flex:none;margin-top:5px}

.form{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:clamp(22px,2.8vw,34px);box-shadow:0 30px 66px -36px rgba(7,18,35,.38);
}
.form h3{font-family:var(--display);font-size:19px;font-weight:800;letter-spacing:-.025em;color:var(--ink);margin-bottom:20px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{margin-bottom:16px}
.fld label,.fld legend{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px;padding:0}
.fld .opt-label{font-weight:400}
.fld input,.fld textarea{
  width:100%;font-family:var(--body);font-size:16px;color:var(--ink);
  background:var(--mist);border:1px solid var(--line-2);border-radius:7px;padding:13px;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.fld input::placeholder,.fld textarea::placeholder{color:#8E9AAD}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(27,107,255,.16)}
.fld textarea{resize:vertical;min-height:96px}
.fld fieldset{border:0;margin:0;padding:0}

/* invalid state */
.fld.err input,.fld.err textarea{border-color:var(--danger);background:#FFF6F5}
.f-err{display:none;margin-top:6px;font-size:13px;font-weight:500;color:var(--danger)}
.fld.err .f-err{display:block}

.opts{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.opt{
  font-size:14px;padding:9px 14px;border:1px solid var(--line-2);border-radius:999px;
  color:var(--muted);background:#fff;transition:background .2s,border-color .2s,color .2s;
}
.opt:hover{border-color:var(--blue);color:var(--blue)}
.opt[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}

.form .btn{width:100%;margin-top:6px}
.form .btn[aria-busy="true"]{opacity:.7;pointer-events:none}
.f-note{margin-top:14px;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.5}

.f-status{margin-top:16px;border-radius:8px;padding:16px;font-size:15px;line-height:1.55}
.f-status:empty{display:none}
.f-status.ok{background:var(--sky-soft);border:1px solid rgba(27,107,255,.3);color:var(--ink)}
.f-status.bad{background:#FFF1F0;border:1px solid rgba(179,38,30,.3);color:var(--danger)}
.f-status b{display:block;font-family:var(--display);font-size:17px;margin-bottom:4px}


/* ============================================================================
   23. FOOTER
   ========================================================================= */
.ft{background:var(--ink);color:#fff;padding-block:clamp(48px,6vw,74px) 30px}
.ft-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:36px}
.ft-brand p{margin-top:20px;font-size:15px;color:#8496AF;max-width:34ch;line-height:1.6}
.ft h2{font-family:var(--display);font-size:14px;font-weight:700;margin:0 0 18px;letter-spacing:-.01em}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{margin-bottom:11px}
.ft li a{font-size:15px;color:#8496AF;transition:color .2s}
.ft li a:hover{color:#fff}
.ft-social{display:flex;gap:10px;margin-top:22px}
.ft-social a{width:40px;height:40px;border:1px solid rgba(255,255,255,.14);border-radius:6px;display:grid;place-items:center;transition:background .2s,border-color .2s}
.ft-social a:hover{background:var(--blue);border-color:var(--blue)}
.ft-base{
  margin-top:clamp(40px,5vw,60px);padding-top:24px;border-top:1px solid rgba(255,255,255,.11);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:#7A8CA5;
}
.ft-base a{margin-left:22px}
.ft-base a:hover{color:#fff}


/* --- Optional WhatsApp bubble (off unless SITE.whatsapp.float is true) ---- */
.wa-float{
  position:fixed;right:clamp(16px,3vw,26px);bottom:clamp(16px,3vw,26px);z-index:80;
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:#25D366;color:#fff;box-shadow:0 12px 30px -10px rgba(0,0,0,.45);
  transition:transform .2s ease,box-shadow .2s ease;
}
.wa-float:hover{transform:translateY(-3px);box-shadow:0 18px 38px -12px rgba(0,0,0,.5)}
@media print{.wa-float{display:none}}


/* ============================================================================
   24. MOTION / REVEAL
   ========================================================================= */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}


/* ============================================================================
   25. RESPONSIVE
   Breakpoints checked: 1440 · 1280 · 1024 · 768 · 480 · 390 · 375
   ========================================================================= */
@media (max-width:1080px){
  .hero-grid,.sys-head,.split,.split-head,.about-grid,.why-grid,.prob-grid,
  .form-grid,.trust-grid{grid-template-columns:1fr}
  .why-stick{position:static}
  .needs{grid-template-columns:1fr 1fr}
  .stages{grid-template-columns:repeat(2,1fr)}
  .stage{border-top:1px solid var(--line-dark);padding:26px clamp(16px,2vw,24px) 26px 0}
  .rail-track,.stage::after{display:none}
  .loop{height:54px}
  .loop-lbl{font-size:13.5px}
  .steps{grid-template-columns:repeat(2,1fr);gap:30px}
  .team{grid-template-columns:repeat(2,1fr)}
  .ft-grid{grid-template-columns:1fr 1fr 1fr}
  .ft-brand{grid-column:1/-1}
  .case-body{grid-template-columns:1fr}
  .case-cell{border-left:0;border-top:1px solid var(--line)}
  .case-cell:first-child{border-top:0}
  .chip{position:static;width:auto;margin-top:14px;animation:none}
  .hero-phone{display:none}
  .dash-cap{max-width:none}
  .trust-facts{margin-top:26px}
}
@media (max-width:860px){
  .nav,.hdr .btn-primary,.hdr-in > nav{display:none}
  .burger{display:flex}
  .acc-inner{grid-template-columns:1fr;padding-left:0}
  .hero{padding-top:calc(76px + 40px)}
  .wsite-devices .phone{position:static;width:120px;margin:18px auto 0}
  .handle{grid-template-columns:1fr 1fr}
  .trust-facts{grid-template-columns:1fr;gap:20px}
}
@media (max-width:620px){
  body{font-size:16px}
  .needs,.checks,.ba,.f-row,.steps,.team,.ft-grid,.handle{grid-template-columns:1fr}
  .stages{grid-template-columns:1fr}
  .case-top{grid-template-columns:1fr}
  .case-foot{flex-direction:column;align-items:flex-start;gap:14px}
  .case-link{flex-wrap:wrap;line-height:1.45}
  .case-meta{text-align:left}
  .ba{gap:0}
  .ba-side.after{border-top:1px solid var(--line)}
  .jr-steps{grid-template-columns:repeat(3,1fr);gap:14px 4px}
  .jr-steps::before{display:none}
  .feed{grid-template-columns:1fr 1fr}
  .feed-flow{display:none}
  .about-pts li{flex-direction:column;gap:2px}
  .ft-base a{margin:0 22px 0 0}
  .cgrid{grid-template-columns:repeat(3,1fr);gap:8px}
  .cframe{font-size:11px;padding:8px}
  .cframe.tall{aspect-ratio:9/13}
  .quo-mark{font-size:74px;height:40px}
  .btn{width:100%}
  .hero-cta .btn,.cta-row .btn{flex:1 1 auto}
}
@media (max-width:400px){
  .mem{padding:14px}
  .mem img,.mem-ph{width:56px;height:56px}
}


/* ============================================================================
   26. REDUCED MOTION & PRINT
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  html:focus-within{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .hero h1 .line i{transform:none}
  .feed-flow path{stroke-dashoffset:0}
}

@media print{
  .hdr,.mnav,.burger,.quo-ctrl,.hero::after,.skip{display:none!important}
  body{font-size:12pt;overflow:visible}
  .dark,.hero,.ft{background:#fff!important;color:#000!important}
  .acc-panel{height:auto!important}
}