/*
 * File:        assets/css/main.css
 * Project:     Forge42 Tech Website
 * Version:     2.7.4
 * Updated:     25/06/2026
 *
 * Changelog:
  v2.5.6 - .founder-photo CSS class added for headshot
  v2.5.4 - New phone 07376 847298, new email hello@forge42.co.uk site-wide.
            Server Cabinet Organisation and Office & Desk Setup services added
            to services.html. All consumer and business prices updated.
 * v2.2.5 - New type system: Oswald 700 hero headings, Barlow 700
 *           section headings, Inter 500 nav, Oswald 600 buttons/CTAs,
 *           Inter 600 eyebrows/labels. Google Fonts import updated.
 *           Windows rendering fix selectors updated to match new families.
  v2.5.1 - Icon sizing fixed: explicit px widths per context, ri-orange restored,
            sprite id added to prevent deduplication failures
 * v2.5.0 - .ri icon helper class added, .wa-fab svg/.ri sizing rule
 *           updated, dead testimonial comment retained for history
 * v2.4.0 - Removed dead testimonial CSS (~12 rules + responsive override),
 *           noscript FAQ fallback comment added
 * v2.2.6 - FAQ sidebar responsive rule, version unified with site
 * v2.2.4 - Windows Barlow Condensed 900 rendering fix: translateZ(0) GPU
 *           layer promotion, optimizeLegibility, antialiased smoothing,
 *           backface-visibility:hidden on all Barlow Condensed elements;
 *           will-change:transform on fixed/sticky positioned elements
 * v2.2.3 - Skip link, sticky mobile CTA bar, FAQ accordion styles,
 *           404 page styles, founder/about section styles, brand meaning
 *           blocks, comparison table, pullquote component
 * v2.2.0 - WhatsApp FAB, GDPR consent banner, testimonial section,
 *           service-area page styles, phone CTA in nav/footer,
 *           experience banner strip, schema/OG meta support classes
 * v2.1.0 - Dark/light mode via [data-theme="light"], mobile-first
 *           responsive rewrite, hamburger nav, theme toggle
 * v2.0.0 - Full Forge42 brand system
 * v1.1.0 - Initial release
 */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600;700&family=Barlow+Condensed:wght@900&family=Barlow:wght@700&family=Inter:wght@400;500;600&display=swap');

/*
 * Windows font rendering fix — v2.2.4
 *
 * Problem: Barlow Condensed 900 appears fuzzy on Windows Chrome/Edge because
 * Windows GDI/DirectWrite uses greyscale antialiasing by default, which blurs
 * heavy condensed weights. macOS/iOS use sub-pixel rendering and look fine.
 *
 * Fix stack (CSS only, no JS, no extra assets):
 *
 * 1. text-rendering: optimizeLegibility
 *    Enables kerning and ligatures; nudges DirectWrite into a sharper path.
 *
 * 2. -webkit-font-smoothing: antialiased (already on body)
 *    Chrome on macOS: switches from sub-pixel to greyscale antialiasing,
 *    which looks thinner and crisper for dark-on-light heavy weights.
 *    No effect on Windows — safe to include everywhere.
 *
 * 3. -moz-osx-font-smoothing: grayscale
 *    Firefox on macOS equivalent of the above.
 *
 * 4. transform: translateZ(0)
 *    Forces GPU compositing layer. On Windows Chrome/Edge this promotes the
 *    element to a composited layer rendered via DirectComposition rather than
 *    GDI, which uses DirectWrite's ClearType-quality path instead of the
 *    legacy GDI greyscale path. This is the key fix for Windows fuzziness.
 *
 * 5. backface-visibility: hidden
 *    Reinforces GPU layer promotion — belt-and-braces alongside translateZ.
 *
 * 6. Slightly increased letter-spacing on h1/h2/h3 at small sizes
 *    Condensed glyphs at sub-20px look crowded under Windows rendering;
 *    a small positive nudge improves legibility without affecting large display
 *    type (which already has negative tracking for the editorial look).
 *
 * Applied only to elements using Barlow Condensed — not body text —
 * to avoid any rendering side-effects on Inter paragraphs.
 */

/* Target every display typeface usage site-wide (Oswald + Barlow) */
/* Oswald (hero h1, buttons, stats, prices) */
h1,
.btn,
.nav-cta,
.mobile-nav-cta,
.exp-stat-num,
.price-value,
.stat-number,
.brand-block-number,
.notfound-code,
.gdpr-accept,
.skip-link,
/* Barlow 700 (h2, h3, section headings) */
h2, h3,
.pickup-name,
.founder-name,
.faq-q,
/* Barlow Condensed 900 (logo identity only) */
.logo-wordmark,
.footer-brand h3,
.founder-avatar,
/* Inter 600 (eyebrows, labels) */
.eyebrow,
.footer-col h4,
.pickup-badge,
.topbar-wa,
.area-card h3 {
  text-rendering:         optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform:              translateZ(0);
  backface-visibility:    hidden;
}

/*
 * Small-size sharpness nudge — Inter 600 at sub-16px on Windows.
 * Oswald and Barlow have their own tracking set per-element above.
 * Nudge applies only to Inter 600 uppercase labels where GDI
 * tracking is tighter and glyphs can appear crowded.
 */
.eyebrow,
.footer-col h4,
.pickup-badge {
  letter-spacing: .015em;
}

/*
 * Prevent translateZ from creating stacking-context issues on positioned
 * elements — restore will-change as a lighter alternative for those.
 */
.wa-fab,
.gdpr-banner,
.mobile-cta-bar,
.site-header {
  will-change: transform;
}

/* ═══ TOKENS — Dark (default) ═══════════════════════════════════════════ */
:root {
  --orange:      #E8720C;
  --orange-dim:  rgba(232,114,12,0.13);
  --orange-dim2: rgba(232,114,12,0.07);
  --green-wa:    #25D366;

  --bg:          #0C0D0F;
  --bg2:         #111214;
  --surface:     #1A1B1E;
  --surface2:    #222328;
  --border:      #2A2B30;
  --border2:     #333640;

  --text:        #F0F0F2;
  --text-muted:  #888;
  --text-dim:    #555;
  --nav-bg:      rgba(12,13,15,0.92);

  --radius:      12px;
  --radius-sm:   7px;
  --radius-lg:   20px;
  --shadow:      0 4px 24px rgba(0,0,0,0.45);
  --shadow-sm:   0 2px 10px rgba(0,0,0,0.3);
  --t:           0.2s ease;
}

/* ═══ TOKENS — Light ═════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:          #F5F5F7;
  --bg2:         #EAEAED;
  --surface:     #FFFFFF;
  --surface2:    #F0F0F2;
  --border:      #D8D8DC;
  --border2:     #C8C8CC;
  --text:        #0C0D0F;
  --text-muted:  #555;
  --text-dim:    #999;
  --nav-bg:      rgba(245,245,247,0.93);
  --shadow:      0 4px 24px rgba(0,0,0,0.1);
  --shadow-sm:   0 2px 10px rgba(0,0,0,0.06);
}

/* ═══ RESET ══════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter',sans-serif;font-size:15px;line-height:1.65;
  background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;
  transition:background var(--t),color var(--t)}
a{color:var(--orange);text-decoration:none;transition:opacity .15s}
a:hover{opacity:.8}
img{max-width:100%;display:block}
ul{list-style:none}

/* ═══ LAYOUT ═════════════════════════════════════════════════════════════ */
.container{width:100%;max-width:1100px;margin:0 auto;padding:0 1.25rem}
.section   {padding:3.5rem 0}
.section-lg{padding:5rem 0}
.section-sm{padding:2rem 0}

/* ═══ TOPBAR — phone strip ═══════════════════════════════════════════════ */
.topbar{
  background:var(--bg2);
  border-bottom:0.5px solid var(--border);
  padding:.4rem 0;
  font-size:12px;
  color:var(--text-dim);
}
.topbar .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.topbar-left{display:flex;align-items:center;gap:1rem}
.topbar-right{display:flex;align-items:center;gap:1rem}
.topbar a{color:var(--text-muted);font-size:12px}
.topbar a:hover{color:var(--orange);opacity:1}
.topbar-phone{
  font-weight:600;color:var(--orange) !important;
  display:flex;align-items:center;gap:5px;
}
.topbar-wa{
  background:var(--green-wa);color:#fff !important;
  border-radius:4px;padding:2px 9px;
  display:flex;align-items:center;gap:4px;font-weight:500;
}
.topbar-wa:hover{opacity:.88 !important}

/* ═══ HEADER ════════════════════════════════════════════════════════════ */
.site-header{
  position:sticky;top:0;z-index:200;
  background:var(--nav-bg);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:0.5px solid var(--border);
  transition:background var(--t);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:60px;gap:1rem}

/* ── Logo ── */
.logo-lockup{display:flex;align-items:center;gap:9px;text-decoration:none;flex-shrink:0}
.logo-hex{width:32px;height:32px}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-wordmark{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:17px;color:var(--text);letter-spacing:.04em}
.logo-wordmark span{color:var(--orange)}
.logo-tagline{font-size:9.5px;color:var(--text-dim);margin-top:2px}

/* ── Desktop nav ── */
.site-nav{display:flex;align-items:center;gap:.15rem}
.site-nav a{font-size:13px;font-weight:500;color:var(--text-muted);padding:.38rem .65rem;border-radius:var(--radius-sm);transition:color .15s,background .15s;white-space:nowrap}
.site-nav a:hover{color:var(--text);background:var(--surface);opacity:1}
.site-nav a.active{color:var(--orange)}
.nav-cta{font-family:'Oswald',sans-serif !important;font-weight:600 !important;font-size:12px !important;letter-spacing:.06em !important;text-transform:uppercase !important;background:var(--orange) !important;color:#0C0D0F !important;padding:.42rem 1rem !important;border-radius:var(--radius-sm) !important}
.nav-cta:hover{opacity:.85 !important;background:var(--orange) !important}

/* ── Header controls ── */
.header-controls{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.theme-toggle{background:var(--surface);border:0.5px solid var(--border);color:var(--text-muted);border-radius:var(--radius-sm);width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;transition:background .15s,color .15s;flex-shrink:0}
.theme-toggle:hover{background:var(--surface2);color:var(--text)}
.icon-sun{display:none}.icon-moon{display:block}
[data-theme="light"] .icon-sun{display:block}[data-theme="light"] .icon-moon{display:none}
.menu-toggle{display:none;background:var(--surface);border:0.5px solid var(--border);color:var(--text);border-radius:var(--radius-sm);width:36px;height:36px;align-items:center;justify-content:center;cursor:pointer;font-size:18px;flex-shrink:0}

/* ── Mobile nav drawer ── */
.mobile-nav{display:none;flex-direction:column;gap:.2rem;background:var(--bg);border-bottom:0.5px solid var(--border);padding:1rem 1.25rem 1.25rem}
.mobile-nav.open{display:flex}
.mobile-nav a{font-size:15px;font-weight:500;color:var(--text-muted);padding:.55rem .75rem;border-radius:var(--radius-sm);transition:color .15s,background .15s}
.mobile-nav a:hover,.mobile-nav a.active{color:var(--text);background:var(--surface);opacity:1}
.mobile-nav a.active{color:var(--orange)}
.mobile-nav-cta{margin-top:.5rem;font-family:'Oswald',sans-serif !important;font-weight:600 !important;font-size:14px !important;letter-spacing:.06em !important;text-transform:uppercase !important;background:var(--orange) !important;color:#0C0D0F !important;text-align:center;padding:.65rem 1rem !important;border-radius:var(--radius-sm) !important}
.mobile-nav-phone{margin-top:.25rem;display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px;font-weight:600;color:var(--orange) !important;padding:.5rem;border:0.5px solid var(--border);border-radius:var(--radius-sm)}

/* ═══ EXPERIENCE BANNER ══════════════════════════════════════════════════ */
.exp-banner{
  background:linear-gradient(135deg,var(--orange) 0%,#c45a08 100%);
  padding:1rem 0;
  color:#0C0D0F;
}
.exp-banner .container{display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap;text-align:center}
.exp-stat{display:flex;flex-direction:column;align-items:center}
.exp-stat-num{font-family:'Oswald',sans-serif;font-weight:700;font-size:28px;line-height:1}
.exp-stat-label{font-size:11px;font-weight:500;opacity:.8;margin-top:2px}
.exp-divider{width:1px;height:40px;background:rgba(0,0,0,0.2)}

/* ═══ TYPOGRAPHY ═════════════════════════════════════════════════════════ */
.eyebrow{display:block;font-family:'Inter',sans-serif;font-weight:600;font-size:11px;letter-spacing:.16em;color:var(--orange);text-transform:uppercase;margin-bottom:.6rem}
h1{font-family:'Oswald',sans-serif;font-weight:700;color:var(--text);line-height:1.05;letter-spacing:-.02em}
h2,h3{font-family:'Barlow',sans-serif;font-weight:700;color:var(--text);line-height:1.1;letter-spacing:-.01em}
h1{font-size:clamp(32px,7vw,60px)}
h2{font-size:clamp(24px,5vw,40px)}
h3{font-size:20px}
h1 span,h2 span{color:var(--orange)}
p{color:var(--text-muted)}

/* ═══ BUTTONS ════════════════════════════════════════════════════════════ */
.btn{display:inline-block;font-family:'Oswald',sans-serif;font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:.75rem 1.75rem;border-radius:var(--radius-sm);border:none;cursor:pointer;transition:opacity .15s,transform .1s;text-align:center}
.btn:hover{opacity:.85;transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--orange);color:#0C0D0F}
.btn-ghost{background:transparent;color:var(--text);border:0.5px solid var(--border)}
.btn-ghost:hover{background:var(--surface)}
.btn-wa{background:var(--green-wa);color:#fff;display:inline-flex;align-items:center;gap:8px}
.btn-block{display:block;width:100%}

/* ═══ HERO ═══════════════════════════════════════════════════════════════ */
.hero{padding:4rem 0 3.5rem;position:relative;overflow:hidden}

/* Two-column hero: headline left, photo+about right */
.hero-split{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:3.5rem;
  align-items:start;
}
.hero-inner{position:relative;z-index:1;padding-top:.5rem}
.hero h1{margin-bottom:1.1rem}
.hero-sub{font-size:clamp(15px,2.5vw,17px);color:var(--text-muted);max-width:500px;line-height:1.65;margin-bottom:1.25rem}
.hero-trust{display:flex;flex-direction:column;gap:.5rem;margin-bottom:2rem}
.hero-trust-item{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-muted)}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap}

/* Right column — photo stacked above about text */
.hero-about{display:flex;flex-direction:column;gap:1.25rem}
.hero-photo-card{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:0.5px solid var(--border);
  box-shadow:0 8px 40px rgba(0,0,0,0.35);
  flex-shrink:0;
}
.hero-photo{
  display:block;
  width:100%;
  height:340px;
  object-fit:cover;
  object-position:center top;
}
.hero-photo-caption{
  position:absolute;
  bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(12,13,15,0.9));
  padding:.875rem 1rem;
}
.hero-photo-name{
  font-family:'Barlow',sans-serif;font-weight:700;
  font-size:16px;color:#F0F0F2;line-height:1.2;
}
.hero-photo-title{font-size:12px;color:rgba(240,240,242,0.65);margin-top:2px}

/* About text block beneath photo */
.hero-about-text{
  background:var(--surface);
  border:0.5px solid var(--border);
  border-radius:var(--radius);
  padding:1.25rem;
}
.hero-about-text h3{font-size:18px}

/* Collapse to single column on tablet/mobile */
@media(max-width:960px){
  .hero-split{
    grid-template-columns:1fr;
    gap:2rem;
  }
  .hero-photo{height:260px}
  .hero-about{flex-direction:row;align-items:flex-start;gap:1.25rem}
  .hero-photo-card{width:160px;flex-shrink:0}
  .hero-photo{height:200px}
}
@media(max-width:600px){
  .hero-about{flex-direction:column}
  .hero-photo-card{width:100%}
  .hero-photo{height:240px}
}

/* ═══ CARDS ══════════════════════════════════════════════════════════════ */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.875rem}
.card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius);padding:1.35rem;transition:box-shadow var(--t)}
.card-icon{width:38px;height:38px;background:var(--orange-dim);border:1.5px solid var(--orange);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:.875rem}
.card h3{font-size:17px;margin-bottom:.35rem;color:var(--text)}
.card p{font-size:13px;color:var(--text-muted);line-height:1.55}

/* ═══ PICKUP / MAP ═══════════════════════════════════════════════════════ */
.pickup-section{background:var(--bg2)}
.pickup-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.pickup-areas{display:flex;flex-direction:column;gap:.6rem;margin:1.25rem 0 1.5rem}
.pickup-area{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius);padding:.875rem 1.1rem;display:flex;align-items:center;gap:10px}
.pickup-dot{width:8px;height:8px;border-radius:50%;background:var(--orange);flex-shrink:0}
.pickup-name{font-family:'Barlow',sans-serif;font-weight:700;font-size:14px;color:var(--text);flex:1}
.pickup-badge{font-size:11px;color:var(--orange);background:var(--orange-dim);border-radius:4px;padding:2px 8px;font-weight:500;white-space:nowrap}
.map-card{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.map-legend{display:flex;gap:16px;flex-wrap:wrap;padding:.875rem 1.1rem;border-top:0.5px solid var(--border)}
.legend-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-muted)}
.legend-dot{width:8px;height:8px;border-radius:50%;background:var(--orange);flex-shrink:0}
.legend-zone{width:14px;height:9px;border-radius:2px;background:var(--orange-dim2);border:0.5px dashed var(--orange);flex-shrink:0}
.legend-land{width:14px;height:9px;border-radius:2px;background:var(--surface);border:0.5px solid var(--border);flex-shrink:0}

/* ═══ INFO LIST ══════════════════════════════════════════════════════════ */
.info-list{display:flex;flex-direction:column;gap:.6rem}
.info-row{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--text-muted)}
.info-icon{color:var(--orange);font-size:15px;flex-shrink:0;margin-top:1px}
.info-row strong{color:var(--text);font-weight:500}

/* ═══ TESTIMONIALS ═══════════════════════════════════════════════════════ */
/* Testimonials block removed in v2.3.0 (fake reviews eliminated) —
   CSS rules removed in v2.4.0 to avoid shipping dead, unused styles */
.google-badge{display:inline-flex;align-items:center;gap:6px;background:var(--surface2);border:0.5px solid var(--border);border-radius:6px;padding:6px 12px;font-size:12px;color:var(--text-muted);margin-top:1.5rem}
.google-badge-star{color:#FBBC04}

/* ═══ SERVICE AREA PAGE ══════════════════════════════════════════════════ */
.area-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-top:2rem}
.area-card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius);padding:1.5rem;transition:border-color var(--t)}
.area-card:hover{border-color:var(--orange)}
.area-card-header{display:flex;align-items:center;gap:12px;margin-bottom:1rem}
.area-pin{width:40px;height:40px;background:var(--orange-dim);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.area-card h3{font-size:20px;margin-bottom:2px}
.area-card-sub{font-size:12px;color:var(--text-dim)}
.area-coverage{display:flex;flex-direction:column;gap:.4rem;margin:.875rem 0}
.area-coverage-item{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-muted)}
.area-coverage-item::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--orange);flex-shrink:0}
.coverage-note{background:var(--orange-dim2);border:0.5px dashed var(--orange);border-radius:var(--radius-sm);padding:.75rem 1rem;font-size:13px;color:var(--text-muted);margin-top:1rem}

/* ═══ PRICING ════════════════════════════════════════════════════════════ */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.875rem}
.price-card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius);padding:1.35rem;transition:border-color var(--t)}
.price-card.featured{border-color:var(--orange)}
.price-tag{display:inline-block;font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;background:var(--orange-dim);color:var(--orange);border-radius:4px;padding:2px 8px;margin-bottom:.75rem}
.price-name{font-size:14px;font-weight:500;color:var(--text);margin-bottom:.3rem}
.price-value{font-family:'Oswald',sans-serif;font-weight:700;font-size:30px;color:var(--text);line-height:1;margin-bottom:.5rem}
.price-value span{font-size:16px;color:var(--text-muted)}
.price-desc{font-size:13px;color:var(--text-muted);line-height:1.55}

/* ═══ FORMS ══════════════════════════════════════════════════════════════ */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.875rem}
.form-group{display:flex;flex-direction:column;gap:.4rem}
.form-group.full{grid-column:1/-1}
label{font-size:12px;color:var(--text-muted);font-weight:500;letter-spacing:.02em}
input,select,textarea{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'Inter',sans-serif;font-size:14px;padding:.65rem .9rem;outline:none;transition:border-color .15s,background var(--t);width:100%;-webkit-appearance:none}
input:focus,select:focus,textarea:focus{border-color:var(--orange)}
input::placeholder,textarea::placeholder{color:var(--text-dim)}
select option{background:var(--surface);color:var(--text)}
textarea{resize:vertical;min-height:110px}

/* GDPR consent checkbox — fully custom so we control the tick and colour */
.consent-row{display:flex;align-items:flex-start;gap:10px;padding:1rem;background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-sm);transition:border-color .15s}
.consent-row:focus-within{border-color:var(--orange)}
.consent-row label{font-size:12px;color:var(--text-muted);line-height:1.5;cursor:pointer}
.consent-row a{color:var(--orange)}

/* Hide the native checkbox completely */
.consent-check{
  /* Visually hidden but still receives clicks via label[for] */
  position:absolute;
  opacity:0;
  width:20px;height:20px;
  margin:0;cursor:pointer;
  z-index:1;
}
/* Custom box — the <span> sibling we'll add next to the input */
.consent-box{
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  width:20px;height:20px;min-width:20px;
  border:1.5px solid var(--border);
  border-radius:4px;
  background:var(--bg);
  margin-top:1px;
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.consent-check:focus-visible + .consent-box{
  outline:2px solid var(--orange);
  outline-offset:2px;
}
/* Checked state — fill orange, show tick */
.consent-check:checked + .consent-box{
  background:var(--orange);
  border-color:var(--orange);
}
.consent-check:checked + .consent-box::after{
  content:'';
  display:block;
  width:5px;height:9px;
  border:2px solid #0C0D0F;
  border-top:none;border-left:none;
  transform:rotate(45deg) translate(-1px,-1px);
}

/* Inline field validation states */
.form-group input.invalid,
.form-group textarea.invalid,
.form-group select.invalid{border-color:#e05252 !important}
.form-group .field-error{
  font-size:11px;color:#e05252;margin-top:4px;display:none;
}
.form-group input.invalid ~ .field-error,
.form-group textarea.invalid ~ .field-error,
.form-group select.invalid ~ .field-error{display:block}

/* Textarea character counter */
.char-counter{
  font-size:11px;color:var(--text-dim);
  text-align:right;margin-top:4px;
}
.char-counter.near-limit{color:var(--orange)}

/* ═══ GDPR COOKIE BANNER ═════════════════════════════════════════════════ */
.gdpr-banner{
  position:fixed;bottom:0;left:0;right:0;z-index:500;
  background:var(--surface2);border-top:0.5px solid var(--border);
  padding:1rem 0;box-shadow:0 -4px 20px rgba(0,0,0,0.3);
  transition:transform .3s ease;
}
.gdpr-banner.hidden{transform:translateY(110%)}
.gdpr-banner .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.gdpr-text{font-size:13px;color:var(--text-muted);max-width:680px;line-height:1.5}
.gdpr-text a{color:var(--orange)}
.gdpr-actions{display:flex;gap:.5rem;flex-shrink:0;flex-wrap:wrap}
.gdpr-accept{background:var(--orange);color:#0C0D0F;border:none;border-radius:var(--radius-sm);padding:.5rem 1.1rem;font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.gdpr-decline{background:transparent;color:var(--text-muted);border:0.5px solid var(--border);border-radius:var(--radius-sm);padding:.5rem 1.1rem;font-size:13px;cursor:pointer;white-space:nowrap}

/* ═══ WHATSAPP FAB ════════════════════════════════════════════════════════ */
.wa-fab{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:400;
  width:56px;height:56px;
  background:var(--green-wa);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,0.45);
  cursor:pointer;text-decoration:none;
  transition:transform .2s,box-shadow .2s;
  animation:wa-pulse 3s ease-in-out infinite;
}
.wa-fab:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(37,211,102,0.6);opacity:1}
.wa-fab svg,.wa-fab .ri{width:28px;height:28px;fill:#fff}
.wa-fab-tooltip{
  position:absolute;right:68px;top:50%;transform:translateY(-50%);
  background:var(--surface);border:0.5px solid var(--border);
  color:var(--text);font-size:12px;font-weight:500;
  padding:.35rem .75rem;border-radius:6px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s;
  box-shadow:var(--shadow-sm);
}
.wa-fab:hover .wa-fab-tooltip{opacity:1}
@keyframes wa-pulse{0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.45)}50%{box-shadow:0 4px 28px rgba(37,211,102,.7)}}

/* ═══ PAGE HERO (inner pages) ════════════════════════════════════════════ */
.page-hero{padding:3rem 0 2.5rem;border-bottom:0.5px solid var(--border)}
.page-hero h1{font-size:clamp(28px,6vw,50px);margin-bottom:.6rem}
.page-hero p{color:var(--text-muted);font-size:15px;max-width:500px}

/* ═══ ABOUT ══════════════════════════════════════════════════════════════ */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:.875rem;margin-top:1.25rem}
.stat-card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius);padding:1.1rem}
.stat-number{font-family:'Oswald',sans-serif;font-weight:700;font-size:34px;color:var(--orange);line-height:1}
.stat-label{font-size:12px;color:var(--text-muted);margin-top:.2rem}

/* ═══ MISC ═══════════════════════════════════════════════════════════════ */
.divider{border:none;border-top:0.5px solid var(--border);margin:2.5rem 0}
.notice{padding:1rem 1.25rem;background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius);font-size:13px;color:var(--text-muted);line-height:1.6}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
.thankyou-wrap{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4rem 0;gap:1rem}
.thankyou-icon{width:56px;height:56px;background:var(--orange-dim);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--orange);font-size:26px;margin:0 auto .5rem}
.policy-body h3{font-size:17px;margin:1.75rem 0 .5rem}
.policy-body p,.policy-body ul{color:var(--text-muted);font-size:14px;line-height:1.75;margin-bottom:.75rem}
.policy-body ul{padding-left:1.5rem;list-style:disc}
.policy-body ul li{margin-bottom:.3rem}
.policy-body code{background:var(--surface2);padding:1px 5px;border-radius:3px;font-size:12px}

/* ═══ FOOTER ═════════════════════════════════════════════════════════════ */
.site-footer{background:var(--bg2);border-top:0.5px solid var(--border);padding:3rem 0 0;transition:background var(--t)}
.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem;padding-bottom:2.5rem}
.footer-brand h3{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:19px;color:var(--text);letter-spacing:.04em;margin-bottom:.35rem}
.footer-brand h3 span{color:var(--orange)}
.footer-tagline{font-size:12px;color:var(--text-dim);margin-bottom:.875rem}
.footer-desc{font-size:13px;color:var(--text-muted);line-height:1.6;max-width:280px}
.footer-phone{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--orange) !important;font-size:14px;margin-top:.75rem}
.footer-col h4{font-family:'Inter',sans-serif;font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.875rem}
.footer-col a,.footer-col p{display:block;font-size:13px;color:var(--text-muted);margin-bottom:.45rem}
.footer-col a:hover{color:var(--text);opacity:1}
.footer-bottom{border-top:0.5px solid var(--border);padding:1.1rem 0;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer-bottom p{font-size:12px;color:var(--text-dim)}
.footer-bottom a{font-size:12px;color:var(--text-dim)}
.footer-bottom a:hover{color:var(--text-muted);opacity:1}

/* ═══ RESPONSIVE ═════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .site-nav{display:none}
  .menu-toggle{display:flex}
  .pickup-grid,.about-grid,.contact-grid,.faq-layout{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr 1fr;gap:2rem}
  .footer-brand{grid-column:1/-1}
  .topbar{display:none}
  .exp-divider{display:none}
}
@media(max-width:600px){
  .container{padding:0 1rem}
  .section{padding:2.5rem 0}
  .section-lg{padding:3rem 0}
  .hero{padding:2.75rem 0 2.5rem}
  .card-grid,.pricing-grid,.stat-grid,.area-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .form-group.full{grid-column:1}
  .footer-inner{grid-template-columns:1fr;gap:1.75rem}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:.4rem}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{text-align:center}
  .page-hero{padding:2rem 0 1.75rem}
  .gdpr-banner .container{flex-direction:column;align-items:flex-start}
  .exp-banner .container{gap:1rem}
  .exp-stat-num{font-size:22px}
  .wa-fab{bottom:1rem;right:1rem;width:50px;height:50px}
  .wa-fab svg,.wa-fab .ri{width:24px;height:24px}
}
@media(max-width:380px){
  .logo-tagline{display:none}
  .stat-grid{grid-template-columns:1fr}
}

/* ═══ v2.2.3 ADDITIONS ════════════════════════════════════════════════════

/* ── Skip to content link ── */
.skip-link{position:absolute;top:-100px;left:1rem;background:var(--orange);color:#0C0D0F;font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase;padding:.5rem 1.1rem;border-radius:var(--radius-sm);z-index:999;transition:top .15s}
.skip-link:focus{top:1rem;opacity:1}

/* ── Sticky mobile CTA bar ── */
.mobile-cta-bar{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:300;
  background:var(--bg);border-top:0.5px solid var(--border);
  padding:.75rem 1rem;
  display:grid;grid-template-columns:1fr 1fr;gap:.5rem;
  box-shadow:0 -4px 20px rgba(0,0,0,0.35);
}
.mobile-cta-bar a{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-family:'Oswald',sans-serif;font-weight:600;
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  padding:.6rem .5rem;border-radius:var(--radius-sm);text-align:center;
  text-decoration:none;transition:opacity .15s;
}
.mobile-cta-bar a:hover{opacity:.85}
.mobile-cta-call{background:var(--surface);color:var(--text) !important;border:0.5px solid var(--border)}
.mobile-cta-book{background:var(--orange);color:#0C0D0F !important}
/* Only show bar on mobile */
@media(max-width:900px){
  .mobile-cta-bar{display:grid}
  /* Push page content up so bar doesn't cover it */
  body{padding-bottom:68px}
  /* Keep WAB above CTA bar */
  .wa-fab{bottom:5rem}
  /* hide GDPR banner behind CTA bar offset */
  .gdpr-banner{bottom:68px}
}
@media(min-width:901px){
  .mobile-cta-bar{display:none !important}
  body{padding-bottom:0}
}

/* ── FAQ page ── */
.faq-list{display:flex;flex-direction:column;gap:.5rem;margin-top:1.5rem}
.faq-item{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color var(--t)}
.faq-item:hover{border-color:var(--orange)}
.faq-item.open{border-color:var(--orange)}
.faq-q{
  width:100%;background:none;border:none;text-align:left;
  padding:1.1rem 1.25rem;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:'Barlow',sans-serif;font-weight:700;
  font-size:17px;color:var(--text);letter-spacing:-.01em;
  transition:color .15s;
}
.faq-q:hover{color:var(--orange)}
.faq-item.open .faq-q{color:var(--orange)}
.faq-chevron{
  width:20px;height:20px;border:1.5px solid var(--border);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:11px;color:var(--text-muted);transition:transform .2s,border-color .15s;
}
.faq-item.open .faq-chevron{transform:rotate(180deg);border-color:var(--orange);color:var(--orange)}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .3s ease,padding .3s ease;
  padding:0 1.25rem;
}
.faq-item.open .faq-a{max-height:500px;padding:0 1.25rem 1.1rem}
.faq-a p{font-size:14px;color:var(--text-muted);line-height:1.7}

/* ── No-JS fallback ────────────────────────────────────────────────────
   If JavaScript fails to load, the accordion toggle never runs and every
   answer stays permanently collapsed (max-height:0) — making the entire
   FAQ page content inaccessible. <noscript><style> here forces all
   answers open and hides the now-non-functional chevron, so the page
   degrades to a plain, fully-readable FAQ list instead of an empty shell. */

.faq-a a{color:var(--orange)}
.faq-a strong{color:var(--text);font-weight:500}

/* ── 404 page ── */
.notfound-wrap{
  min-height:70vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;padding:4rem 1.25rem;gap:1rem;
}
.notfound-code{
  font-family:'Oswald',sans-serif;font-weight:700;
  font-size:clamp(80px,18vw,140px);line-height:1;
  color:var(--orange);opacity:.15;margin-bottom:-.5rem;
}
.notfound-icon{font-size:48px;margin-bottom:.25rem}

/* ── About: founder section ── */
.founder-grid{display:grid;grid-template-columns:1fr 2fr;gap:2.5rem;align-items:start;margin-top:2rem}
.founder-card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:2rem;text-align:center;position:sticky;top:80px}
.founder-avatar{width:96px;height:96px;border-radius:50%;background:var(--orange-dim);border:2px solid var(--orange);display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:32px;color:var(--orange);margin:0 auto 1rem}
.founder-photo{width:96px;height:96px;border-radius:50%;border:2px solid var(--orange);object-fit:cover;display:block;margin:0 auto 1rem}
.founder-name{font-family:'Barlow',sans-serif;font-weight:700;font-size:22px;color:var(--text);margin-bottom:.25rem}
.founder-title{font-size:13px;color:var(--text-muted);margin-bottom:1rem}
.founder-tags{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.founder-tag{font-size:11px;color:var(--orange);background:var(--orange-dim);border-radius:4px;padding:2px 8px;font-weight:500}
.founder-body{display:flex;flex-direction:column;gap:1.25rem}
.founder-body p{font-size:14px;color:var(--text-muted);line-height:1.75}
.founder-body p strong{color:var(--text);font-weight:500}
.comparison-table{width:100%;border-collapse:collapse;margin-top:1.5rem;font-size:13px}
.comparison-table th{text-align:left;padding:.75rem 1rem;background:var(--surface2);color:var(--text-muted);font-weight:500;font-size:12px;letter-spacing:.04em;text-transform:uppercase;border-bottom:0.5px solid var(--border)}
.comparison-table th:first-child{border-radius:var(--radius-sm) 0 0 0}
.comparison-table th:last-child{border-radius:0 var(--radius-sm) 0 0}
.comparison-table td{padding:.75rem 1rem;border-bottom:0.5px solid var(--border);vertical-align:top;color:var(--text-muted)}
.comparison-table td:last-child{color:var(--text)}
.comparison-table tr:last-child td{border-bottom:none}
.comparison-table .tick{color:var(--orange);font-size:15px}
.comparison-table .cross{color:var(--text-dim)}
.brand-meaning{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.5rem}
.brand-block{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius);padding:1.35rem}
.brand-block-number{font-family:'Oswald',sans-serif;font-weight:700;font-size:42px;color:var(--orange);line-height:1;margin-bottom:.5rem}
.brand-block h3{font-size:17px;margin-bottom:.5rem}
.brand-block p{font-size:13px;color:var(--text-muted);line-height:1.6}
.pullquote{border-left:3px solid var(--orange);padding:.875rem 1.25rem;margin:1.5rem 0;background:var(--orange-dim2);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.pullquote p{font-size:15px;color:var(--text);font-style:italic;line-height:1.65}
.pullquote cite{font-size:12px;color:var(--text-muted);margin-top:.4rem;display:block}

@media(max-width:768px){
  .founder-grid{grid-template-columns:1fr}
  .founder-card{position:static}
  .brand-meaning{grid-template-columns:1fr}
}
@media(max-width:600px){
  .comparison-table{font-size:12px}
  .comparison-table td,.comparison-table th{padding:.6rem .75rem}
}

/* FAQ layout — sidebar stacks below accordion on tablet/mobile */
@media(max-width:900px){
  .faq-layout > div:last-child{position:static !important;top:auto !important}
}

/* ═══ REMIX ICONS — v2.5.0 ════════════════════════════════════════════
 * Replaces emoji icons site-wide with Remix Icon SVG sprite (MIT/Apache
 * 2.0, free for commercial use). Icons are <use> references into
 * assets/icons-sprite.svg, loaded once via inline <svg style="display:none">
 * injected at top of <body> on every page. currentColor lets every icon
 * inherit text colour and be recoloured per-context with normal CSS —
 * something emoji could never do. Renders pixel-identical across every
 * OS/browser, unlike emoji which differ between Windows/macOS/Android.
 */
.ri{
  display:inline-block;
  width:18px;height:18px;
  vertical-align:-0.2em;
  fill:currentColor;
  flex-shrink:0;
}
/* Colour modifier */
.ri-orange{ color:var(--orange); }

/* Context-specific sizes — explicit px prevents em inheritance from large parents */
.topbar .ri            { width:13px; height:13px; vertical-align:-0.12em; }
.mobile-nav-phone .ri  { width:15px; height:15px; }
.footer-phone .ri      { width:16px; height:16px; }
.info-icon .ri         { width:18px; height:18px; vertical-align:-0.2em; }
.card-icon .ri         { width:20px; height:20px; }
.exp-stat-num .ri      { width:28px; height:28px; }
.icon-moon .ri,
.icon-sun .ri          { width:16px; height:16px; vertical-align:-0.15em; }
.pickup-area .ri       { width:10px; height:10px; }
.area-pin .ri          { width:20px; height:20px; }
.stat-number .ri       { width:28px; height:28px; }
.tick .ri,.cross .ri   { width:16px; height:16px; vertical-align:-0.15em; }
.thankyou-icon .ri     { width:28px; height:28px; }
.notfound-icon .ri     { width:36px; height:36px; }
.brand-block-number .ri{ width:36px; height:36px; }
.hero-trust-item .ri   { width:14px; height:14px; vertical-align:-0.1em; }
.mobile-cta-call .ri   { width:15px; height:15px; vertical-align:-0.15em; }
.google-badge .ri      { width:16px; height:16px; vertical-align:-0.15em; }
/* Size modifiers */
.ri-lg{ width:22px !important; height:22px !important; }
.ri-xl{ width:28px !important; height:28px !important; }