/* ═══════════════════════════════════════════
   Acacia Web — Global Stylesheet
   Shared across all pages

   DESIGN SYSTEM: "Paper & Ledger"
   Warm savanna ground · bark ink · acacia-gold accent
   Squared edges · hard offset shadows · document-like

   ─ ORGANISATION ─
   1. Fonts
   2. Tokens (new system + legacy shims)
   3. Base / type helpers
   4. Buttons
   5. Navbar
   6. Page hero (inner pages)
   7. Sections / labels
   8. Ledger + horizon (brand primitives)
   9. Dateline
   10. CTA / sign-off
   11. Footer
   12. Prose (legal pages)
   13. Animations + utilities
   14. Cookie consent (re-skinned visuals only)
═══════════════════════════════════════════ */

/* ── 1. FONTS ─────────────────────────────
   Loaded here so the whole site is self-contained tonight.
   Tomorrow we can lift these into <link> tags in the includes
   for slightly faster first paint — noted, not urgent. */
   @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Sora:wght@300;400;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

   /* ── 2. TOKENS ──────────────────────────── */
   :root {
     /* NEW — paper system */
     --bone:   #F4EFE4;   /* dry savanna ground (page bg) */
     --paper:  #FBF8F0;   /* the ledger sheet (cards) */
     --bark:   #201A10;   /* ink — warm brown-black */
     --gold:   #DE9E14;   /* acacia blossom (accent) */
     --olive:  #56603C;   /* thorn / leaf (support + "on" states) */
     --khaki:  #837A5F;   /* muted labels */
     --line:   #D9D1BC;   /* hairlines + shadow colour */
     --body:   #4A4433;   /* body copy */
   
     /* type */
     --font-display: 'Bricolage Grotesque', sans-serif;
     --font-body:    'Sora', sans-serif;
     --font-mono:    'IBM Plex Mono', monospace;
   
     /* squared-off edges */
     --edge:     3px;
     --edge-sm:  2px;
   
     /* hard offset shadows (print, not glass) */
     --drop:     5px 5px 0 var(--line);
     --drop-lg:  8px 8px 0 var(--line);
   
     /* ───────────────────────────────────────────────
        LEGACY SHIMS — kept ONLY so pages we haven't
        migrated yet (about, services, projects, contact,
        privacy, terms) keep rendering until each is
        converted. Prune this block as pages move over.
        ─────────────────────────────────────────────── */
     --navy:#050d1f; --navy-mid:#0a1a3a; --blue-dark:#0f3460;
     --blue:#1a56db; --blue-mid:#3b82f6; --blue-light:#60a5fa;
     --blue-pale:#eff6ff; --cyan:#06b6d4; --indigo:#4338ca;
     --white:#ffffff; --off-white:#f8faff; --slate:#64748b;
     --charcoal:#0f172a; --mid:#334155;
     --grad-main: linear-gradient(135deg,#1a56db,#06b6d4);
     --grad-deep: linear-gradient(135deg,#050d1f,#0f3460 60%,#1a56db);
     --grad-soft: linear-gradient(135deg,#eff6ff,#e0f2fe);
     --radius:16px; --radius-sm:10px;
     --shadow:0 4px 24px rgba(26,86,219,0.1);
     --shadow-lg:0 16px 60px rgba(26,86,219,0.18);
     --shadow-blue:0 8px 32px rgba(26,86,219,0.35);
   }
   
   /* ── 3. BASE / TYPE ───────────────────────── */
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   html { scroll-behavior: smooth; }
   @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
   
   body {
     font-family: var(--font-body);
     font-weight: 300;
     color: var(--bark);
     background: var(--bone);
     overflow-x: hidden;
     -webkit-font-smoothing: antialiased;
   }
   
   ::selection { background: var(--gold); color: var(--bark); }
   
   a:focus-visible, button:focus-visible, summary:focus-visible {
     outline: 2px solid var(--olive);
     outline-offset: 3px;
   }
   
   /* mono utility — labels, data, ledger rows, dates */
   .mono {
     font-family: var(--font-mono);
     font-size: .72rem;
     letter-spacing: .08em;
   }
   
   /* section kicker — replaces the old eyebrow pill everywhere */
   .kick {
     display: block;
     font-family: var(--font-mono);
     font-size: .72rem;
     letter-spacing: .08em;
     text-transform: uppercase;
     color: var(--khaki);
     margin-bottom: 1rem;
   }
   .kick b { color: var(--olive); font-weight: 500; }
   
   /* the one flourish: hand-drawn gold stroke under a single word */
   .uword { position: relative; white-space: nowrap; }
   .uword svg {
     position: absolute; left: -2%; right: -2%; bottom: -.12em;
     width: 104%; height: .28em; overflow: visible;
   }
   .uword svg path { fill: none; stroke: var(--gold); stroke-width: 7; stroke-linecap: round; }
   
   /* gradient-text helper repurposed to a solid gold accent
      (kept the class name so old markup referencing it still works) */
   .grad-text, .grad { color: var(--gold); -webkit-text-fill-color: var(--gold); }
   
   /* ── 4. BUTTONS ───────────────────────────
      New primary pair: ink block + underlined plain link.
      Old classes remapped so unmigrated pages stay usable. */
   .btn-ink {
     display: inline-flex; align-items: center; gap: .5rem;
     background: var(--bark); color: var(--bone);
     border: none; border-radius: var(--edge);
     padding: .95rem 1.8rem;
     font-family: var(--font-body); font-weight: 600; font-size: .92rem;
     text-decoration: none; cursor: pointer;
     transition: background .2s, transform .15s;
   }
   .btn-ink:hover { background: var(--olive); color: var(--bone); transform: translate(-1px,-1px); }
   
   .link-plain {
     display: inline-flex; align-items: center; gap: .4rem;
     color: var(--bark); text-decoration: none;
     font-family: var(--font-body); font-weight: 400; font-size: .92rem;
     border-bottom: 2px solid var(--gold); padding-bottom: 3px;
     transition: border-color .2s;
   }
   .link-plain:hover { border-color: var(--bark); color: var(--bark); }
   
   /* legacy button remaps → all now read as the new system */
   .btn-primary-blue, .btn-cta-white {
     display: inline-flex; align-items: center; gap: .5rem;
     background: var(--bark); color: var(--bone);
     border: none; border-radius: var(--edge);
     padding: .95rem 1.9rem; font-family: var(--font-body);
     font-weight: 600; font-size: .92rem; text-decoration: none;
     box-shadow: none; transition: background .2s, transform .15s;
   }
   .btn-primary-blue:hover, .btn-cta-white:hover { background: var(--olive); color: var(--bone); transform: translate(-1px,-1px); }
   
   .btn-outline-blue, .btn-cta-glass {
     display: inline-flex; align-items: center; gap: .4rem;
     background: transparent; color: var(--bark);
     border: none; border-bottom: 2px solid var(--gold); border-radius: 0;
     padding: .4rem 0 .3rem; font-family: var(--font-body);
     font-weight: 400; font-size: .92rem; text-decoration: none;
     transition: border-color .2s;
   }
   .btn-outline-blue:hover, .btn-cta-glass:hover { border-color: var(--bark); background: transparent; color: var(--bark); transform: none; }
   
   /* ── 5. NAVBAR ────────────────────────────
      Bootstrap .navbar retained (collapse still works);
      restyled from glass-blue to paper strip. */
   .navbar {
     background: var(--bone);
     backdrop-filter: none; -webkit-backdrop-filter: none;
     border-bottom: 1px solid var(--line);
     padding: 1rem 0;
     position: sticky; top: 0; z-index: 1030;
     transition: box-shadow .3s, background .3s;
   }
   .navbar.scrolled {
     box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(32,26,16,0.05);
     background: var(--bone);
   }
   .navbar-brand {
     font-family: var(--font-display);
     font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em;
     color: var(--bark) !important;
     display: flex; align-items: center; gap: .1rem;
     text-decoration: none;
   }
   .navbar-brand img { height: 30px; width: auto; margin-right: .5rem; vertical-align: middle; }
   .navbar-brand .accent { color: var(--bark); }        /* "Web" no longer blue */
   .navbar-brand .dot {                                  /* dot → gold, squared */
     display: inline-block; width: 7px; height: 7px;
     border-radius: 1px; background: var(--gold);
     margin: 0 0 2px 3px;
   }
   .nav-link {
     color: var(--body) !important;
     font-family: var(--font-body); font-weight: 400; font-size: .875rem;
     letter-spacing: 0;
     padding: .4rem .2rem !important;
     margin: 0 .55rem;
     border-radius: 0;
     border-bottom: 2px solid transparent;
     transition: border-color .2s, color .2s;
   }
   .nav-link:hover { background: transparent; color: var(--bark) !important; border-bottom-color: var(--gold); }
   .nav-link.active { color: var(--bark) !important; font-weight: 400; background: transparent; border-bottom-color: var(--gold); }
   .btn-nav {
     background: var(--bark);
     color: var(--bone) !important;
     border-radius: var(--edge);
     padding: .55rem 1.2rem !important;
     font-weight: 600; font-size: .875rem;
     box-shadow: none; border-bottom: none !important;
     margin-left: .6rem;
     transition: background .2s, transform .15s;
   }
   .btn-nav:hover { background: var(--olive); opacity: 1; transform: translateY(-1px); box-shadow: none; }
   .navbar-toggler { color: var(--bark); }
   .navbar-toggler-icon {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23201A10' stroke-width='2' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E");
   }
   
   /* ── 6. PAGE HERO (inner pages) ────────────
      Was dark gradient + orbs + grid. Now paper.
      Orbs/grid hidden; markup can stay as-is on inner pages. */
   .page-hero {
     background: var(--bone);
     border-bottom: 1px solid var(--line);
     position: relative; overflow: hidden;
     padding: 70px 0 64px;
   }
   .page-hero-grid, .page-hero .orb { display: none; }   /* kill the theatre */
   .page-hero .eyebrow {                                   /* eyebrow → mono kick */
     display: inline-block;
     background: transparent; border: none;
     color: var(--khaki);
     font-family: var(--font-mono);
     padding: 0; margin-bottom: 1.2rem;
     font-size: .72rem; font-weight: 400;
     letter-spacing: .08em; text-transform: uppercase;
   }
   .page-hero .eyebrow i { color: var(--gold); }
   .page-hero h1 {
     font-family: var(--font-display);
     font-size: clamp(2rem, 4vw, 3rem);
     font-weight: 800; color: var(--bark);
     letter-spacing: -.02em; line-height: 1.05;
     margin-bottom: 1rem;
   }
   .page-hero h1 .grad { color: var(--gold); -webkit-text-fill-color: var(--gold); background: none; }
   .page-hero p { color: var(--body); font-size: 1rem; line-height: 1.8; font-weight: 300; max-width: 520px; }
   .breadcrumb-nav {
     display: flex; align-items: center; gap: .5rem;
     font-family: var(--font-mono); font-size: .7rem;
     letter-spacing: .06em; color: var(--khaki); margin-bottom: 1.6rem;
   }
   .breadcrumb-nav a { color: var(--khaki); text-decoration: none; transition: color .2s; }
   .breadcrumb-nav a:hover { color: var(--bark); }
   .breadcrumb-nav i { font-size: .55rem; color: var(--line); }
   
   /* ── 7. SECTIONS / LABELS ─────────────────── */
   section { padding: 96px 0; }
   .section-label {                                        /* → mono kick */
     display: inline-block;
     background: transparent; color: var(--khaki);
     border-radius: 0; padding: 0;
     font-family: var(--font-mono); font-size: .72rem; font-weight: 400;
     letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1rem;
   }
   .section-title {
     font-family: var(--font-display);
     font-size: clamp(1.9rem, 3.4vw, 2.7rem);
     font-weight: 800; line-height: 1.08;
     letter-spacing: -.02em; color: var(--bark); margin-bottom: 1rem;
   }
   .section-sub { color: var(--body); font-size: .98rem; line-height: 1.8; font-weight: 300; max-width: 540px; }
   
   /* ── 8. LEDGER + HORIZON (brand primitives) ──
      Reusable across hero, contact, rates. The look
      that carries the identity. */
   .ledger {
     background: var(--paper);
     border: 1px solid var(--bark);
     border-radius: var(--edge-sm);
     box-shadow: 6px 6px 0 var(--line);
     padding: 1.8rem 1.7rem 2rem;
     position: relative;
   }
   .ledger-head {
     display: flex; justify-content: space-between;
     font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em;
     color: var(--khaki);
     border-bottom: 1px solid var(--bark);
     padding-bottom: .9rem; margin-bottom: 1.2rem;
   }
   .ledger-head b { color: var(--bark); font-weight: 500; }
   .lrow {
     display: flex; align-items: baseline; gap: .55rem;
     font-family: var(--font-mono); font-size: .78rem;
     margin-bottom: .85rem;
   }
   .lrow .leader { flex: 1; border-bottom: 2px dotted var(--line); transform: translateY(-4px); min-width: 20px; }
   .lrow .val { font-weight: 500; text-align: right; }
   .lrow .val.gold  { color: var(--gold); }
   .lrow .val.olive { color: var(--olive); }
   .lrule { border: 0; border-top: 1px solid var(--line); margin: 1.1rem 0; }
   .stamp {
     position: absolute; right: 1.2rem; bottom: -1.1rem; transform: rotate(-7deg);
     font-family: var(--font-mono); font-size: .66rem; font-weight: 500;
     letter-spacing: .14em; text-transform: uppercase;
     color: var(--gold); border: 2px solid var(--gold);
     border-radius: var(--edge); padding: .45rem .8rem; background: var(--paper);
   }
   
   /* horizon — the signature: ground line, rising sun, acacia */
   .horizon { position: absolute; left: 0; right: 0; bottom: 3.4rem; height: 90px; pointer-events: none; }
   .horizon .ground { position: absolute; left: 2rem; right: 2rem; bottom: 0; border-bottom: 1.5px solid var(--bark); }
   .horizon .sun {
     position: absolute; bottom: 0; left: 12%;
     width: 46px; height: 23px; background: var(--gold);
     border-radius: 46px 46px 0 0;
     animation: aw-rise 1.4s ease-out both;
   }
   .horizon .sun.full { width: 40px; height: 40px; border-radius: 50%; bottom: 26px; left: auto; right: 14%; animation: none; }
   .horizon svg.tree { position: absolute; bottom: 1px; right: 18%; height: 78px; animation: aw-settle 1.2s ease-out both; }
   .horizon svg.tree.left { right: auto; left: 10%; height: 64px; }
   @keyframes aw-rise   { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
   @keyframes aw-settle { from { opacity: 0; } to { opacity: 1; } }
   @media (prefers-reduced-motion: reduce) {
     .horizon .sun, .horizon svg.tree { animation: none; }
     .btn-ink:hover, .btn-nav:hover { transform: none; }
   }
   
   /* ── 9. DATELINE (trust strip) ────────────── */
   .dateline {
     border-top: 1px solid var(--line);
     border-bottom: 1px solid var(--line);
     padding: .95rem 2rem; text-align: center;
     font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em;
     text-transform: uppercase; color: var(--khaki); line-height: 2;
   }
   .dateline b { color: var(--olive); font-weight: 500; }
   
   /* ── 10. CTA / SIGN-OFF ───────────────────── */
   .cta-section {
     background: var(--bone);
     border-top: 1px solid var(--line);
     padding: 96px 0; position: relative; overflow: hidden;
   }
   .cta-orb { display: none; }
   .cta-section h2 { font-family: var(--font-display); color: var(--bark); letter-spacing: -.02em; }
   .cta-section p { color: var(--body); font-weight: 300; font-size: 1.03rem; }
   .cta-section .section-label { color: var(--khaki) !important; background: transparent !important; border: none !important; }
   
   /* ── 11. FOOTER ───────────────────────────
      Navy → paper. Multi-column structure retained
      (real links + hosting partner keep their value);
      only the skin changes. */
   footer {
     background: var(--bone);
     border-top: 1px solid var(--line);
     padding: 64px 0 0;
     color: var(--body);
   }
   .footer-brand {
     font-family: var(--font-display);
     font-size: 1.2rem; font-weight: 800; color: var(--bark);
     letter-spacing: -.02em; margin-bottom: 1rem;
     display: flex; align-items: center; gap: .1rem;
   }
   .footer-brand img { height: 28px; width: auto; filter: none; margin-right: .5rem; }
   .footer-brand .dot { display: inline-block; width: 7px; height: 7px; border-radius: 1px; background: var(--gold); margin: 0 0 2px 3px; }
   footer h6 {
     font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em;
     text-transform: uppercase; color: var(--khaki); font-weight: 500; margin-bottom: 1rem;
   }
   footer a {
     color: var(--body); text-decoration: none; font-size: .84rem;
     display: block; margin-bottom: .5rem;
     border-bottom: 1px solid transparent; width: fit-content;
     transition: color .2s, border-color .2s;
   }
   footer a:hover { color: var(--bark); border-bottom-color: var(--gold); }
   .footer-contact-item { display: flex; align-items: center; gap: .6rem; font-size: .84rem; margin-bottom: .6rem; color: var(--body); }
   .footer-contact-item i { color: var(--gold); }
   .footer-hosting-btn {
     display: inline-flex !important; align-items: center; gap: .5rem;
     background: var(--paper); color: var(--body) !important;
     border: 1px solid var(--bark); border-radius: var(--edge);
     padding: .7rem 1.2rem; font-size: .82rem; font-weight: 600;
     margin-bottom: 0; width: fit-content;
     transition: background .2s, color .2s, transform .15s;
   }
   .footer-hosting-btn:hover { background: var(--bark); color: var(--bone) !important; border-bottom-color: var(--bark); transform: translate(-1px,-1px); }
   .footer-hosting-btn i { color: var(--gold); }
   .footer-hosting-btn:hover i { color: var(--gold); }
   .footer-divider { border-top: 1px solid var(--line); margin-top: 52px; padding: 1.4rem 0; }
   .footer-copy { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .05em; color: var(--khaki); }
   .footer-copy a { display: inline !important; color: var(--khaki) !important; }
   .footer-copy a:hover { color: var(--bark) !important; }
   
   /* ── 12. PROSE (legal / policy pages) ─────── */
   .prose h2 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; letter-spacing: -.01em; color: var(--bark); margin: 2.5rem 0 .8rem; }
   .prose h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--bark); margin: 1.8rem 0 .6rem; }
   .prose p  { color: var(--body); font-size: .95rem; line-height: 1.85; font-weight: 300; margin-bottom: 1.1rem; }
   .prose ul { color: var(--body); font-size: .95rem; line-height: 1.85; font-weight: 300; padding-left: 1.4rem; margin-bottom: 1.1rem; }
   .prose ul li { margin-bottom: .4rem; }
   .prose a { color: var(--olive); text-decoration: underline; display: inline; }
   .prose strong { font-weight: 600; color: var(--bark); }
   .prose .last-updated { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; color: var(--khaki); font-weight: 400; margin-bottom: 2rem; display: block; }
   
   /* ── 13. ANIMATIONS + UTILITIES ───────────── */
   [data-animate] { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
   [data-animate].visible { opacity: 1; transform: translateY(0); }
   [data-delay="1"] { transition-delay: .1s; }
   [data-delay="2"] { transition-delay: .2s; }
   [data-delay="3"] { transition-delay: .3s; }
   [data-delay="4"] { transition-delay: .4s; }
   @media (prefers-reduced-motion: reduce) {
     [data-animate] { opacity: 1; transform: none; transition: none; }
   }
   
   .text-blue { color: var(--olive); }   /* legacy hooks remapped to palette */
   .text-cyan { color: var(--gold); }
   
   @media (max-width: 991px) { .page-hero { padding: 56px 0 48px; } section { padding: 72px 0; } }
   @media (max-width: 575px) { .page-hero h1 { letter-spacing: -.01em; } .section-title { letter-spacing: -.01em; } }
   
   /* ── 14. COOKIE CONSENT ───────────────────────
      IMPORTANT: class names + DOM structure UNCHANGED —
      js/cookies.js depends on these exact selectors.
      Only colours / fonts / radii are re-skinned to match
      the paper system. "On" toggle uses olive (reads as enabled). */
   #aw-cookie-banner {
     position: fixed; bottom: 0; left: 0; right: 0;
     z-index: 9000; padding: 1.2rem 1rem;
     transform: translateY(110%);
     transition: transform .4s cubic-bezier(.4,0,.2,1);
     pointer-events: none;
   }
   #aw-cookie-banner.aw-cb-visible { transform: translateY(0); pointer-events: all; }
   .aw-cb-inner {
     max-width: 980px; margin: 0 auto;
     background: var(--paper);
     border: 1px solid var(--bark);
     border-radius: var(--edge);
     padding: 1.4rem 1.8rem;
     display: flex; align-items: center; gap: 2rem;
     box-shadow: var(--drop);
     backdrop-filter: none;
   }
   .aw-cb-text { flex: 1; min-width: 0; }
   .aw-cb-title {
     font-family: var(--font-display);
     font-size: .9rem; font-weight: 700; color: var(--bark);
     letter-spacing: -.01em; margin-bottom: .4rem;
     display: flex; align-items: center; gap: .4rem;
   }
   .aw-cb-title i { color: var(--gold); }
   .aw-cb-text p { font-size: .78rem; color: var(--khaki); line-height: 1.6; font-weight: 300; margin: 0; }
   .aw-cb-text p a { color: var(--olive); text-decoration: underline; }
   .aw-cb-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; flex-wrap: wrap; }
   .aw-btn-accept, .aw-btn-reject, .aw-btn-manage {
     font-family: var(--font-body); font-size: .78rem; font-weight: 600;
     border-radius: var(--edge); border: none; cursor: pointer;
     padding: .55rem 1.2rem; white-space: nowrap;
     transition: transform .2s, background .2s, color .2s; letter-spacing: 0;
   }
   .aw-btn-accept:hover, .aw-btn-reject:hover, .aw-btn-manage:hover { transform: translateY(-1px); }
   .aw-btn-accept { background: var(--bark); color: var(--bone); box-shadow: none; }
   .aw-btn-accept:hover { background: var(--olive); }
   .aw-btn-reject { background: transparent; color: var(--body); border: 1px solid var(--bark) !important; }
   .aw-btn-reject:hover { background: var(--bark); color: var(--bone); }
   .aw-btn-manage { background: transparent; color: var(--khaki); border: 1px solid var(--line) !important; }
   .aw-btn-manage:hover { color: var(--bark); border-color: var(--bark) !important; }
   
   #aw-cookie-modal {
     position: fixed; inset: 0; z-index: 9100;
     display: flex; align-items: center; justify-content: center; padding: 1rem;
     opacity: 0; transition: opacity .3s ease; pointer-events: none;
   }
   #aw-cookie-modal.aw-modal-visible { opacity: 1; pointer-events: all; }
   .aw-modal-backdrop { position: absolute; inset: 0; background: rgba(32,26,16,0.55); backdrop-filter: blur(3px); }
   .aw-modal-box {
     position: relative; z-index: 1; background: var(--paper);
     border: 1px solid var(--bark); border-radius: var(--edge);
     width: 100%; max-width: 520px;
     box-shadow: var(--drop-lg);
     transform: translateY(16px) scale(.98);
     transition: transform .3s ease; overflow: hidden;
   }
   #aw-cookie-modal.aw-modal-visible .aw-modal-box { transform: translateY(0) scale(1); }
   .aw-modal-header {
     background: var(--bark); padding: 1.4rem 1.6rem;
     display: flex; align-items: center; justify-content: space-between;
   }
   .aw-modal-title { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--bone); letter-spacing: -.01em; display: flex; align-items: center; gap: .45rem; }
   .aw-modal-title i { color: var(--gold); }
   .aw-modal-close {
     background: rgba(244,239,228,0.15); border: none; color: rgba(244,239,228,0.7);
     width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: .9rem;
     display: flex; align-items: center; justify-content: center;
     transition: background .2s, color .2s; font-family: sans-serif;
   }
   .aw-modal-close:hover { background: rgba(244,239,228,0.28); color: var(--bone); }
   .aw-modal-body { padding: 1.5rem 1.6rem; }
   .aw-modal-intro { font-size: .83rem; color: var(--khaki); line-height: 1.7; font-weight: 300; margin-bottom: 1.4rem; }
   .aw-modal-intro strong { font-weight: 600; color: var(--bark); }
   .aw-pref-row {
     display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
     padding: 1rem 0; border-top: 1px solid var(--line);
   }
   .aw-pref-row:first-of-type { border-top: none; }
   .aw-pref-info { flex: 1; }
   .aw-pref-name { font-size: .88rem; font-weight: 700; color: var(--bark); margin-bottom: .3rem; letter-spacing: -.01em; display: flex; align-items: center; gap: .5rem; }
   .aw-pref-required {
     font-family: var(--font-mono); font-size: .62rem; font-weight: 500;
     letter-spacing: .1em; text-transform: uppercase;
     background: transparent; color: var(--gold);
     border: 1px solid var(--gold); border-radius: var(--edge-sm); padding: .12rem .5rem;
   }
   .aw-pref-desc { font-size: .78rem; color: var(--khaki); line-height: 1.6; font-weight: 300; }
   .aw-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; margin-top: 2px; }
   .aw-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
   .aw-toggle-track { position: absolute; inset: 0; background: var(--line); border-radius: 99px; transition: background .25s; }
   .aw-toggle-track::after {
     content: ''; position: absolute; top: 3px; left: 3px;
     width: 18px; height: 18px; border-radius: 50%; background: var(--paper);
     box-shadow: 0 1px 4px rgba(32,26,16,0.25); transition: transform .25s;
   }
   .aw-toggle input:checked + .aw-toggle-track { background: var(--olive); }
   .aw-toggle input:checked + .aw-toggle-track::after { transform: translateX(20px); }
   .aw-toggle-disabled { cursor: not-allowed; opacity: .6; }
   .aw-toggle input:focus-visible + .aw-toggle-track { outline: 2px solid var(--olive); outline-offset: 2px; }
   .aw-modal-footer { padding: 1rem 1.6rem 1.4rem; display: flex; gap: .6rem; justify-content: flex-end; border-top: 1px solid var(--line); }
   .aw-modal-footer .aw-btn-reject { background: transparent; color: var(--body); border-color: var(--bark) !important; }
   .aw-modal-footer .aw-btn-reject:hover { background: var(--bark); color: var(--bone); }
   #aw-cookie-reopener {
     position: fixed; bottom: 1.2rem; left: 1.2rem; z-index: 8900;
     background: var(--paper); color: var(--body);
     border: 1px solid var(--bark); border-radius: var(--edge);
     padding: .45rem 1rem; font-family: var(--font-mono); font-size: .68rem;
     letter-spacing: .05em; font-weight: 400; cursor: pointer;
     display: flex; align-items: center; gap: .4rem;
     transition: color .2s, border-color .2s, box-shadow .2s, transform .2s;
     box-shadow: 3px 3px 0 var(--line);
   }
   #aw-cookie-reopener i { color: var(--gold); font-size: .8rem; }
   #aw-cookie-reopener:hover { color: var(--bark); box-shadow: 4px 4px 0 var(--line); transform: translate(-1px,-1px); }
   body.aw-modal-open { overflow: hidden; }
   @media (max-width: 700px) {
     .aw-cb-inner { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.2rem; }
     .aw-cb-actions { width: 100%; justify-content: flex-start; }
     .aw-btn-accept, .aw-btn-reject, .aw-btn-manage { flex: 1; text-align: center; justify-content: center; }
     .aw-modal-box { max-width: 100%; }
     .aw-modal-footer { flex-direction: column-reverse; }
     .aw-modal-footer .aw-btn-accept, .aw-modal-footer .aw-btn-reject { width: 100%; text-align: center; }
     #aw-cookie-banner { padding: .8rem; }
   }