/* ============================================================
   L&P DEVELOPMENTS — SHARED BASE
   Derived from the master design system.
   Font: Lexend (semi-bold headings, regular body)
   Primary: #F66706 | Dark: #262626 | Corners: square (radius 0)
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  --colour-orange:#F66706; --colour-grey:#262626; --colour-grey-alt:#2E2E2E; --colour-white:#FFFFFF;
  --brand-500:#F66706; --brand-400:#FF8C3A; --brand-300:#FDCCA0; --brand-200:#FDDAB8; --brand-100:#FFF3EB;
  --brand-600:#CC5200; --brand-700:#9D3E00; --brand-faint:rgba(246,103,6,.10); --brand-glow:rgba(246,103,6,.22);
  --grey-0:#FFFFFF; --grey-25:#F8F7F5; --grey-50:#F2F0ED; --grey-100:#E8E5E0; --grey-200:#D4D0C9;
  --grey-300:#B8B3AA; --grey-400:#9A9590; --grey-500:#7A7570; --grey-600:#5A5650; --grey-700:#3E3A35;
  --grey-800:#2E2B26; --grey-900:#262626;
  --dark-0:#1A1917; --dark-1:#1F1E1B; --dark-2:#2E2E2E; --dark-3:#2E2D29; --dark-4:#383630; --dark-5:#444138;
  --light-bg:#FFFFFF; --light-alt:#F8F7F5;
  --text-on-light-heading:#262626; --text-on-light-body:#5A5650; --text-on-light-muted:#9A9590;
  --text-on-dark-heading:#F0EDE8; --text-on-dark-body:#A8A49C; --text-on-dark-muted:#6B6760;
  --border-light:rgba(246,103,6,.15); --border-mid:rgba(246,103,6,.24);
  --border-dark:rgba(255,255,255,.08); --border-dark-mid:rgba(255,255,255,.13);
  --success:#2A7D4F; --danger:#C0392B; --d-danger:#E05252;

  --font-base:'Lexend',sans-serif;
  --text-xs:11px; --text-sm:13px; --text-base:15px; --text-md:17px; --text-lg:20px; --text-xl:24px;
  --text-2xl:30px; --text-3xl:38px; --text-4xl:48px; --text-5xl:60px;
  --weight-regular:400; --weight-semi:600;
  --leading-tight:1.0; --leading-snug:1.15; --leading-base:1.35; --leading-loose:1.45;
  --tracking-tight:-.03em; --tracking-snug:-.015em; --tracking-wide:.04em; --tracking-wider:.08em; --tracking-widest:.12em;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px;

  --radius:0px;
  --ease-out:cubic-bezier(.16,1,.3,1); --dur-fast:100ms; --dur-base:180ms;
  --nav-h:68px; --gutter:5%; --section-y:80px; --maxw:1280px;
}

/* ---------- 2. RESET & BASE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{font-family:var(--font-base);font-weight:var(--weight-regular);font-size:var(--text-base);
  line-height:var(--leading-base);color:var(--text-on-light-body);background:var(--light-bg)}
img,video{display:block;max-width:100%;height:auto}
svg{display:block}
a{color:var(--brand-500);text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit}
::selection{background:var(--brand-500);color:#fff}

/* ---------- 3. TYPOGRAPHY ---------- */
.display-1{font-size:var(--text-5xl);font-weight:var(--weight-semi);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--text-on-light-heading)}
.display-2{font-size:var(--text-4xl);font-weight:var(--weight-semi);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--text-on-light-heading)}
h1,.h1{font-size:var(--text-3xl);font-weight:var(--weight-semi);line-height:var(--leading-snug);letter-spacing:var(--tracking-snug);color:var(--text-on-light-heading)}
h2,.h2{font-size:var(--text-2xl);font-weight:var(--weight-semi);line-height:var(--leading-snug);letter-spacing:var(--tracking-snug);color:var(--text-on-light-heading)}
h3,.h3{font-size:var(--text-xl);font-weight:var(--weight-semi);line-height:var(--leading-snug);color:var(--text-on-light-heading)}
h4,.h4{font-size:var(--text-lg);font-weight:var(--weight-semi);line-height:var(--leading-snug);color:var(--text-on-light-heading)}
h5,.h5{font-size:var(--text-base);font-weight:var(--weight-semi);line-height:var(--leading-base);color:var(--text-on-light-heading)}
h6,.h6{font-size:var(--text-xs);font-weight:var(--weight-semi);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-on-light-muted)}
.text-lead{font-size:var(--text-md);line-height:var(--leading-loose);color:var(--text-on-light-body)}
.text-body{font-size:var(--text-base);line-height:var(--leading-base);color:var(--text-on-light-body)}
.text-sm{font-size:var(--text-sm);line-height:var(--leading-base);color:var(--text-on-light-muted)}
.text-xs{font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-on-light-muted)}
.eyebrow{font-size:var(--text-xs);font-weight:var(--weight-semi);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--brand-500)}
.eyebrow-line{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--text-xs);font-weight:var(--weight-semi);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--brand-500)}
.eyebrow-line::before{content:'';width:24px;height:2px;background:var(--brand-500);flex-shrink:0}
.text-brand{color:var(--brand-500)} .text-muted{color:var(--text-on-light-muted)}
.text-strong{font-weight:var(--weight-semi);color:var(--text-on-light-heading)}

/* on-dark overrides */
.section-dark .display-1,.section-dark .display-2,.section-dark h1,.section-dark .h1,.section-dark h2,.section-dark .h2,
.section-dark h3,.section-dark .h3,.section-dark h4,.section-dark .h4,.section-dark h5,.section-dark .h5{color:var(--text-on-dark-heading)}
.section-dark .text-lead,.section-dark .text-body,.section-dark p:not(.badge):not(.tag){color:var(--text-on-dark-body)}
.section-dark .text-sm,.section-dark .text-xs{color:var(--text-on-dark-muted)}
.section-dark .eyebrow,.section-dark .eyebrow-line{color:var(--brand-400)}
.section-dark .eyebrow-line::before{background:var(--brand-400)}
.section-dark .text-brand{color:var(--brand-400)} .section-dark .text-muted{color:var(--text-on-dark-muted)}
.section-dark .text-strong{color:var(--text-on-dark-heading)}

/* ---------- 4. SECTIONS / LAYOUT ---------- */
.section-light{background:var(--light-bg);padding:var(--section-y) var(--gutter)}
.section-light-alt{background:var(--light-alt);padding:var(--section-y) var(--gutter)}
.section-dark{background:var(--grey-900);padding:var(--section-y) var(--gutter)}
.section-brand{background:var(--brand-500);padding:var(--section-y) var(--gutter)}
.section-light h1,.section-light h2,.section-light h3,.section-light h4,.section-light h5,
.section-light-alt h1,.section-light-alt h2,.section-light-alt h3,.section-light-alt h4,.section-light-alt h5{color:var(--text-on-light-heading)}
.section-brand h1,.section-brand h2,.section-brand h3,.section-brand h4,.section-brand h5,.section-brand p{color:#fff}
.container{max-width:var(--maxw);margin:0 auto}
.section-header{margin-bottom:var(--sp-12)}
.section-header-center{text-align:center;max-width:600px;margin:0 auto var(--sp-12)}
.layout-2col{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-16);align-items:center}
.layout-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
.layout-4col{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6)}
.layout-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-6)}

/* ---------- 5. BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);font-family:var(--font-base);
  font-weight:var(--weight-semi);line-height:1;border-radius:var(--radius);text-decoration:none;white-space:nowrap;
  border:2px solid transparent;cursor:pointer;user-select:none;letter-spacing:var(--tracking-wide);
  transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.btn:hover{text-decoration:none}
.btn:focus-visible{outline:2px solid var(--brand-500);outline-offset:2px}
.btn:active{transform:translate(1px,1px)}
.btn-xs{font-size:var(--text-xs);padding:6px 14px} .btn-sm{font-size:var(--text-sm);padding:9px 20px}
.btn-md{font-size:var(--text-base);padding:12px 26px} .btn-lg{font-size:var(--text-md);padding:15px 34px}
.btn-xl{font-size:var(--text-lg);padding:18px 42px}
.btn-primary{background:transparent;color:var(--brand-500);border-color:var(--brand-500)}
.btn-primary:hover{background:var(--brand-500);color:#fff}
.btn-primary:active{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.btn-solid{background:var(--brand-500);color:#fff;border-color:var(--brand-500)}
.btn-solid:hover{background:transparent;color:var(--brand-500)}
.btn-solid:active{background:transparent;border-color:var(--brand-600);color:var(--brand-600)}
.btn-submit{background:var(--brand-500);color:#fff;border-color:var(--brand-500)}
.btn-submit:hover{background:transparent;border-color:var(--brand-500);color:var(--brand-500)}
.btn-ghost{background:transparent;color:var(--brand-500);border-color:transparent}
.btn-ghost:hover{background:var(--brand-500);color:#fff}
.btn-ghost-muted{background:transparent;color:var(--grey-500);border-color:transparent}
.btn-ghost-muted:hover{background:var(--grey-100);color:var(--grey-900)}
.section-dark .btn-ghost-muted{color:var(--text-on-dark-muted)}
.section-dark .btn-ghost-muted:hover{background:var(--dark-3);color:var(--text-on-dark-heading)}
.btn-on-brand{background:transparent;color:#fff;border-color:#fff}
.btn-on-brand:hover{background:#fff;color:var(--brand-500)}
.btn-full{width:100%}

/* ---------- 6. FORMS ---------- */
.form-group{display:flex;flex-direction:column;gap:var(--sp-3)}
.form-label{font-size:var(--text-md);font-weight:var(--weight-regular);color:var(--text-on-light-heading);display:flex;align-items:baseline;gap:var(--sp-3);line-height:1}
.section-dark .form-label{color:var(--text-on-dark-heading)}
.form-label-req::after{content:'[REQUIRED]';font-size:var(--text-xs);font-weight:700;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--brand-500);vertical-align:.25em;line-height:1}
.form-hint{font-size:var(--text-sm);color:var(--text-on-light-muted)}
.form-error{font-size:var(--text-sm);color:var(--danger);display:none}
.section-dark .form-hint{color:var(--text-on-dark-muted)} .section-dark .form-error{color:var(--d-danger)}
.input,.textarea,.select{width:100%;font-family:var(--font-base);font-size:var(--text-md);font-weight:var(--weight-regular);
  color:var(--text-on-light-heading);background:var(--grey-0);border:1.5px solid var(--grey-200);border-radius:var(--radius);
  transition:border-color var(--dur-base) var(--ease-out);appearance:none;-webkit-appearance:none}
.section-dark .input,.section-dark .textarea,.section-dark .select{color:var(--text-on-dark-heading);background:#2e2e2e;border-color:var(--brand-500)}
.input{padding:14px 18px;height:56px} .textarea{padding:14px 18px;resize:vertical;min-height:140px}
.select{padding:14px 40px 14px 18px;height:56px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239A9590' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;cursor:pointer}
.input::placeholder,.textarea::placeholder{color:var(--grey-300)}
.section-dark .input::placeholder,.section-dark .textarea::placeholder{color:rgba(255,255,255,.25)}
.input:hover,.textarea:hover,.select:hover{border-color:var(--grey-300)}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--brand-500)}
.section-dark .input:focus,.section-dark .textarea:focus,.section-dark .select:focus{border-color:var(--brand-400)}
.input.invalid,.textarea.invalid{border-color:var(--danger)}
.checkbox-item,.radio-item{display:flex;align-items:center;gap:var(--sp-3);cursor:pointer}
.checkbox-item input,.radio-item input{width:18px;height:18px;accent-color:var(--brand-500);flex-shrink:0}

/* ---------- 7. NAV (shared shell + mobile toggle) ---------- */
.nav{position:sticky;top:0;z-index:200;min-height:var(--nav-h);background:var(--grey-0);border-bottom:1px solid var(--border-light);
  padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6)}
.nav-dark{background:var(--grey-900);border-bottom-color:var(--border-dark)}
.nav-logo{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none;flex-shrink:0;color:var(--brand-500)}
.nav-logo:hover{text-decoration:none}
.nav-logo svg{height:64px;width:auto}
.nav-logo .brand-logo{width:150px;height:52px}
.nav-dark .nav-logo{color:#fff}
.nav-links{display:flex;align-items:center;gap:var(--sp-1);flex:1;justify-content:center}
.nav-link{font-size:var(--text-sm);font-weight:var(--weight-semi);color:var(--text-on-light-muted);text-decoration:none;
  padding:var(--sp-2) var(--sp-3);transition:color var(--dur-base),background var(--dur-base)}
.nav-link:hover{color:var(--grey-900);background:var(--grey-50);text-decoration:none}
.nav-link.is-active{color:var(--grey-900)}
.nav-dark .nav-link{color:var(--text-on-dark-muted)}
.nav-dark .nav-link:hover{color:var(--text-on-dark-heading);background:var(--dark-3)}
.nav-dark .nav-link.is-active{color:var(--text-on-dark-heading)}
.nav-dropdown{position:relative}
.dropdown-menu{position:absolute;top:calc(100% + var(--sp-1));left:0;background:var(--grey-0);border:1px solid var(--border-mid);
  padding:var(--sp-2);min-width:200px;display:none}
.nav-dark .dropdown-menu{background:var(--dark-3);border-color:var(--border-dark-mid)}
.nav-dropdown:hover .dropdown-menu,.nav-dropdown:focus-within .dropdown-menu{display:block}
.dropdown-item{display:block;padding:var(--sp-2) var(--sp-3);font-size:var(--text-sm);color:var(--text-on-light-body);text-decoration:none}
.dropdown-item:hover{background:var(--grey-50);color:var(--grey-900);text-decoration:none}
.nav-dark .dropdown-item{color:var(--text-on-dark-body)}
.nav-dark .dropdown-item:hover{background:var(--dark-4);color:var(--text-on-dark-heading)}
.nav-actions{display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0}
.nav-toggle{display:none;width:44px;height:44px;background:transparent;border:none;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.nav-toggle span{display:block;width:24px;height:4px;background:var(--grey-900);transition:transform var(--dur-base),opacity var(--dur-base)}
.nav-dark .nav-toggle span{background:#fff}
.nav-toggle.is-open span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ---------- 8. CARDS ---------- */
.card{background:var(--grey-0);border:1px solid var(--border-light);border-radius:var(--radius);padding:var(--sp-8) var(--sp-6);transition:border var(--dur-base)}
.card:hover{border:3px solid var(--brand-500)}
.section-dark .card{background:var(--dark-2);border-color:var(--border-dark)}
.section-light-alt .card{background:var(--grey-0)}
.card-brand{background:var(--brand-500);border-color:transparent}
.card-brand h3,.card-brand h4,.card-brand h5,.card-brand p{color:#fff}
.service-card{background:var(--grey-0);border:1px solid var(--border-light);padding:var(--sp-8) var(--sp-6);transition:border var(--dur-base)}
.service-card:hover{border:3px solid var(--brand-500)}
.section-dark .service-card{background:var(--dark-2);border-color:var(--border-dark)}
.section-light-alt .service-card{background:var(--grey-0)}
.service-num{font-size:var(--text-xs);font-weight:var(--weight-semi);color:var(--grey-300);letter-spacing:var(--tracking-wide);margin-bottom:var(--sp-4)}
.section-dark .service-num{color:var(--dark-5)}
.icon-card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-4);padding:var(--sp-8);background:var(--grey-0);border:1px solid var(--border-light);transition:border var(--dur-base)}
.icon-card:hover{border:3px solid var(--brand-500)}
.section-dark .icon-card{background:var(--dark-2);border-color:var(--border-dark)}
.icon-wrap{width:56px;height:56px;background:var(--brand-100);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--brand-500)}
.icon-wrap svg{width:32px;height:32px}
.section-dark .icon-wrap{background:var(--brand-faint);border:1px solid rgba(246,103,6,.15)}

/* ---------- 9. BADGES / TAGS ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--text-xs);font-weight:var(--weight-semi);letter-spacing:var(--tracking-wide);padding:3px 10px}
.badge-brand{background:var(--brand-100);color:var(--brand-600)}
.section-dark .badge-brand{background:var(--brand-faint);color:var(--brand-300);border:1px solid rgba(246,103,6,.2)}
.category-label{display:inline-flex;align-items:center;background:var(--brand-500);color:#fff;font-size:var(--text-xs);font-weight:var(--weight-semi);letter-spacing:var(--tracking-wider);text-transform:uppercase;padding:5px 12px;width:fit-content}
.tag{display:inline-flex;align-items:center;font-size:var(--text-sm);padding:4px 12px;background:var(--grey-100);color:var(--grey-600)}
.tag-brand{background:var(--brand-100);color:var(--brand-600)}
.section-dark .tag{background:var(--dark-3);color:var(--text-on-dark-body)}

/* ---------- 10. STATS / PROCESS / CTA ---------- */
.stats-band{padding:var(--sp-16) var(--gutter);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-8);text-align:center}
.stats-band-dark{background:var(--dark-0);border-top:1px solid var(--border-dark);border-bottom:1px solid var(--border-dark)}
.stats-band-brand{background:var(--brand-500)}
.stat-num{font-size:var(--text-4xl);font-weight:var(--weight-semi);letter-spacing:var(--tracking-tight);line-height:1;margin-bottom:var(--sp-2);color:var(--brand-500)}
.stats-band-brand .stat-num{color:#fff}
.stat-label{font-size:var(--text-sm);color:var(--text-on-dark-muted)}
.stats-band-brand .stat-label{color:rgba(255,255,255,.65)}
.process-bar{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border-light)}
.process-step{padding:var(--sp-10) var(--sp-6);border-right:1px solid var(--border-light)}
.process-step:last-child{border-right:none}
.process-num{font-size:var(--text-4xl);font-weight:var(--weight-semi);color:var(--grey-100);line-height:1;margin-bottom:var(--sp-5)}
.section-dark .process-bar{border-color:var(--border-dark)}
.section-dark .process-step{background:var(--dark-2);border-right-color:var(--border-dark)}
.section-dark .process-num{color:var(--dark-4)}
.section-dark .process-step p{color:var(--text-on-dark-muted)}
.cta-band{padding:var(--sp-20) var(--gutter);display:grid;grid-template-columns:1fr auto;gap:var(--sp-12);align-items:center}
.cta-band-brand{background:var(--brand-500)}
.cta-band-dark{background:var(--dark-0);border-top:2px solid var(--brand-500)}
.cta-title{font-size:var(--text-3xl);font-weight:var(--weight-semi);letter-spacing:var(--tracking-snug);margin-bottom:var(--sp-3)}
.cta-band-brand .cta-title{color:#fff} .cta-band-brand .cta-sub{color:rgba(255,255,255,.8)}
.cta-band-dark .cta-title{color:var(--text-on-dark-heading)} .cta-band-dark .cta-sub{color:var(--text-on-dark-muted)}
.cta-actions{display:flex;gap:var(--sp-3);flex-shrink:0;align-items:center}

/* ---------- 11. FOOTER ---------- */
.footer{background:var(--grey-900);border-top:2px solid var(--brand-500);padding:var(--sp-16) var(--gutter) var(--sp-8)}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:var(--sp-12);margin-bottom:var(--sp-12);max-width:var(--maxw);margin-left:auto;margin-right:auto}
.footer-brand{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5);color:#fff}
.footer-brand svg{height:54px;width:auto}
.footer-brand .brand-logo{width:170px;height:58px}
.footer-tagline{font-size:var(--text-sm);color:#fff;line-height:var(--leading-base);max-width:300px;opacity:.85}
.footer-col h4{font-size:var(--text-xs);font-weight:var(--weight-semi);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:#fff;margin-bottom:var(--sp-4)}
.footer-col li{margin-bottom:var(--sp-3)}
.footer-col a{font-size:var(--text-sm);color:var(--brand-500);text-decoration:none;transition:color var(--dur-base)}
.footer-col a:hover{color:#808080;text-decoration:none}
.footer-bottom{max-width:var(--maxw);margin:0 auto;border-top:1px solid var(--border-dark);padding-top:var(--sp-6);display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);font-size:var(--text-xs);color:rgba(255,255,255,.35);flex-wrap:wrap}

/* ---------- 11b. MASK-BASED LOGO & ICONS (recolour via `color`) ----------
   Renders an SVG as a solid shape filled with currentColor, so one asset file
   works on any background. URLs are resolved relative to this stylesheet. */
.brand-logo{display:inline-block;background-color:currentColor;width:170px;height:90px;
  -webkit-mask-image:url(assets/logo-horizontal.svg);mask-image:url(assets/logo-horizontal.svg);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:left center;mask-position:left center;
  -webkit-mask-size:contain;mask-size:contain}
.brand-logo-portrait{-webkit-mask-image:url(assets/logo-portrait.svg);mask-image:url(assets/logo-portrait.svg)}
/* Generic icon: set --i to the asset URL (relative to the HTML document).
   NOTE: longhand (not the `mask:` shorthand) so var() resolves reliably across browsers. */
.ds-icon{display:inline-block;width:32px;height:32px;background-color:currentColor;flex-shrink:0;
  -webkit-mask-image:var(--i);mask-image:var(--i);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}

/* ---------- 12. UTILITIES ---------- */
.divider{border:none;border-top:1px solid var(--border-light);margin:var(--sp-8) 0}
.divider-brand{border-color:var(--brand-500);border-width:2px}
.section-dark .divider{border-color:var(--border-dark)}
.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}
.flex{display:flex} .flex-col{flex-direction:column} .flex-wrap{flex-wrap:wrap}
.items-center{align-items:center} .items-start{align-items:flex-start}
.justify-between{justify-content:space-between} .justify-center{justify-content:center}
.gap-2{gap:var(--sp-2)} .gap-3{gap:var(--sp-3)} .gap-4{gap:var(--sp-4)} .gap-6{gap:var(--sp-6)} .gap-8{gap:var(--sp-8)}
.mt-4{margin-top:var(--sp-4)} .mt-6{margin-top:var(--sp-6)} .mt-8{margin-top:var(--sp-8)} .mt-12{margin-top:var(--sp-12)}
.mb-3{margin-bottom:var(--sp-3)} .mb-4{margin-bottom:var(--sp-4)} .mb-6{margin-bottom:var(--sp-6)} .mb-8{margin-bottom:var(--sp-8)} .mb-12{margin-bottom:var(--sp-12)}
.w-full{width:100%} .text-center{text-align:center}
.maxw-sm{max-width:520px} .maxw-md{max-width:680px} .mx-auto{margin-left:auto;margin-right:auto}

/* ---------- 13. SCROLL REVEAL ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ---------- 14. RESPONSIVE ---------- */
@media (max-width:1024px){
  :root{--text-5xl:48px;--text-4xl:40px;--text-3xl:32px;--section-y:64px}
  .layout-2col{gap:var(--sp-10)}
}
@media (max-width:860px){
  .nav-toggle{display:flex}
  .nav-links{position:fixed;top:var(--nav-h);left:0;right:0;background:var(--grey-0);flex-direction:column;
    align-items:stretch;justify-content:flex-start;gap:0;padding:var(--sp-4) var(--gutter) var(--sp-8);
    border-bottom:1px solid var(--border-light);transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity var(--dur-base),transform var(--dur-base);max-height:calc(100vh - var(--nav-h));overflow-y:auto}
  .nav-dark .nav-links{background:var(--grey-900);border-bottom-color:var(--border-dark)}
  .nav-links.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav-link{padding:var(--sp-3) 0;font-size:var(--text-md);border-bottom:1px solid var(--border-light)}
  .nav-dark .nav-link{border-bottom-color:var(--border-dark)}
  .dropdown-menu{position:static;display:block;border:none;padding:0 0 var(--sp-2) var(--sp-4);background:transparent}
  .nav-dark .dropdown-menu{background:transparent}
  .nav-actions .btn{display:none}
  .layout-2col,.layout-3col,.layout-4col{grid-template-columns:1fr;gap:var(--sp-8)}
  .stats-band{grid-template-columns:1fr 1fr;gap:var(--sp-10) var(--sp-6)}
  .process-bar{grid-template-columns:1fr 1fr}
  .process-step:nth-child(2){border-right:none}
  .cta-band{grid-template-columns:1fr;gap:var(--sp-8)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp-10)}
}
@media (max-width:520px){
  :root{--text-5xl:38px;--text-4xl:32px;--text-3xl:27px;--text-2xl:24px;--gutter:6%}
  .stats-band{grid-template-columns:1fr 1fr;gap:var(--sp-8) var(--sp-4)}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .cta-actions{flex-direction:column;align-items:stretch;width:100%}
  .cta-actions .btn{width:100%}
}