/* ============================================================================
   AS SOLAR POWER SOLUTIONS
   ----------------------------------------------------------------------------
   Design language: warm, rounded and premium.
   Content sits on soft cards with generous corner radii and light, layered
   shadows. Depth is subtle — a card lifts a little on hover, nothing shouts.
   Gold stays the accent: buttons, numerals and small marks, never body text.

   Every colour, size, radius and timing used on the site is defined once in
   :root below. Change a value there and it updates everywhere.
   ========================================================================= */

:root{
  /* ---- Brand ---- */
  --bg-dusk-1:#10160c;
  --bg-dusk-2:#1c2c12;
  --panel:#141d0d;
  --ink:#16210e;
  --muted:#5c6b52;
  --muted-light:#cdd6c2;
  --gold:#d99a1b;
  --gold-light:#f0c463;
  --green:#3e7a16;
  --eco:#4a8f1f;
  --line:#e2e6da;

  /* ---- Surface ladder: cards separate by value, not by blur ---- */
  --surface-0:#fdfdfa;      /* raised — cards sitting on --surface */
  --surface:#f8f9f4;        /* page ground */
  --surface-2:#eef0e6;      /* recessed band */
  --surface-3:#e6e9dc;

  /* ---- Hairlines: the primary depth mechanism ---- */
  --rule:rgba(22,33,14,.14);
  --rule-strong:rgba(22,33,14,.28);
  --rule-dark:rgba(255,255,255,.10);
  --rule-dark-strong:rgba(255,255,255,.20);
  --line-alt:#d5dbc9;       /* borders that must stay visible on --surface-2 */
  --dash:#b9c4ac;           /* dashed connectors on --surface-2 */
  --edge:var(--rule);

  /* ---- Gold, rationed ----
     #d99a1b on the light page ground measures 2.31:1 and fails WCAG AA for
     text. Gold TEXT on a light background is always --gold-ink (5.33:1).
     --gold / --gold-light stay as they are on dark grounds. */
  --gold-ink:#8a5f0d;
  --gold-deep:#c8891a;
  --green-ink:#33660f;      /* green that passes contrast on pale green chips */
  --gold-rgb:217,154,27;
  --gold-wash:rgba(217,154,27,.10);

  /* ---- Solar-cell seam (busbar) ---- */
  --busbar-dark:repeating-linear-gradient(90deg,rgba(240,196,99,.18) 0 1px,transparent 1px 26px);
  --seam-mask:linear-gradient(180deg,#000,transparent);

  /* ---- Raking light on dark grounds ---- */
  --dark-rake:
    radial-gradient(80% 55% at 78% 8%, rgba(217,154,27,.16), transparent 62%),
    radial-gradient(120% 90% at 12% 0%, #2f4a16 0%, transparent 58%),
    radial-gradient(90% 70% at 50% 118%, rgba(62,122,22,.30), transparent 70%),
    linear-gradient(176deg,var(--bg-dusk-1) 0%,#131c0c 46%,var(--bg-dusk-2) 100%);

  /* ---- Elevation: soft, layered, never heavy ---- */
  --lift:inset 0 1px 0 rgba(255,255,255,.60);
  --sh-1:0 1px 2px rgba(16,22,12,.04),0 6px 16px -10px rgba(16,22,12,.18);
  --sh-card:0 1px 2px rgba(16,22,12,.04),0 6px 18px -10px rgba(16,22,12,.16);
  --sh-card-h:0 2px 6px rgba(16,22,12,.06),0 20px 40px -20px rgba(16,22,12,.26);
  --sh-2:0 2px 8px rgba(16,22,12,.05),0 30px 60px -34px rgba(16,22,12,.34);
  --sh-btn:0 1px 2px rgba(16,22,12,.10),0 8px 18px -10px rgba(200,137,26,.55);
  --sh-btn-h:0 2px 5px rgba(16,22,12,.12),0 14px 28px -12px rgba(200,137,26,.70);
  --shadow:var(--sh-2);

  /* ---- Geometry: one rounded scale, used everywhere ---- */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --r-btn:12px;             /* buttons and inputs */
  --r-card:18px;            /* cards, panels, media */
  --radius:var(--r-md);
  --max:1200px;
  --gutter:clamp(18px,4vw,40px);
  --rail:84px;
  --nav-h:64px;
  --dock-h:58px;

  /* ---- Spacing, 4px base ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --section-y:clamp(72px,9vw,120px);

  /* ---- Type ---- */
  --font-head:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-body:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --t-display:clamp(36px,6vw,72px);
  --t-h1:clamp(30px,4.4vw,50px);
  --t-h2:clamp(26px,3.3vw,38px);
  --t-h3:clamp(19px,1.6vw,22px);
  --t-lede:clamp(17px,1.6vw,20px);
  --t-body:16.5px;
  --t-small:13.5px;
  --t-micro:11.5px;
  --measure:62ch;
  --lh-display:1.03; --lh-head:1.13; --lh-body:1.72;
  --track-display:-.028em; --track-head:-.018em; --track-mono:.16em;

  /* ---- Focus ---- */
  --focus:#16210e;

  /* ---- Motion ---- */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-inout:cubic-bezier(.65,0,.35,1);
  --d-fast:160ms; --d-mid:280ms; --d-slow:620ms;
}

/* Dark grounds flip focus + edge colour by inheritance. */
.hero,.page-banner,.stats-band,.contact-info,footer,.dock,.mobile-menu{
  --focus:#f0c463;
  --edge:var(--rule-dark);
}

@media(prefers-contrast:more){
  :root{--rule:rgba(22,33,14,.32);--rule-dark:rgba(255,255,255,.26);--muted:#4a5741;}
}
@media(max-width:760px){ :root{--nav-h:58px;} }

/* ============================================================================
   1. RESET AND GLOBALS
   ========================================================================= */

*{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{
  font-family:var(--font-head);
  margin:0;
  letter-spacing:var(--track-head);
  line-height:var(--lh-head);
  text-wrap:balance;
}
p{margin:0;text-wrap:pretty;}
a{color:inherit;text-decoration:none;}
img,svg{max-width:100%;display:block;}
button{font:inherit;}
/* The sticky header floats over the dark hero/banner rather than sitting
   above it, so its transparent "at the top of the page" state has something
   dark to be transparent against. Every page opens with a dark section. */
main{position:relative;display:block;margin-top:calc(var(--nav-h) * -1);}
.mono{font-family:var(--font-mono);}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);position:relative;}
section{padding:var(--section-y) 0;}
.section-alt{
  background:var(--surface-2);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---- Focus: the site previously had none ---- */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:var(--r-xs);
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:1px;
  border-color:var(--ink);
  box-shadow:none;
}

.skip{position:absolute;left:-9999px;}
.skip:focus{
  left:var(--gutter);top:8px;z-index:400;position:fixed;
  background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-sm);
  font-weight:700;font-size:14px;
}

/* ============================================================================
   2. HEADER
   ========================================================================= */

.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(248,249,244,.88);
  border-bottom:1px solid var(--rule);
  --nav-ink:var(--ink);
  --nav-rule:var(--rule);
  transition:background var(--d-mid) var(--e-out),border-color var(--d-mid) var(--e-out);
}
@supports(backdrop-filter:blur(1px)){
  .site-header{backdrop-filter:blur(12px) saturate(1.15);}
}
/* Transparent while the visitor is still at the top of a dark hero/banner. */
body.is-top .site-header{
  background:transparent;
  border-bottom-color:var(--rule-dark);
  --nav-ink:#fff;
  --nav-rule:var(--rule-dark);
  backdrop-filter:none;
}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  height:var(--nav-h);
  padding:0 var(--gutter);max-width:var(--max);margin:0 auto;
}
.brand{display:flex;align-items:center;gap:12px;color:var(--nav-ink);min-width:0;}
.logo-chip{
  width:46px;height:46px;border-radius:var(--r-md);flex:none;
  background:#fff;border:1px solid var(--nav-rule);
  display:flex;align-items:center;justify-content:center;padding:2px;
}
.logo-img{width:100%;height:100%;object-fit:contain;flex:none;}
.brand .name{
  font-family:var(--font-head);font-weight:700;font-size:16px;
  line-height:1.15;color:var(--nav-ink);
}
.brand .name span{
  display:block;font-family:var(--font-mono);font-weight:500;font-size:9.5px;
  letter-spacing:var(--track-mono);color:var(--gold-ink);text-transform:uppercase;margin-top:3px;
}
body.is-top .brand .name span{color:var(--gold-light);}

nav.links{display:flex;align-items:center;gap:28px;}
nav.links a{
  position:relative;color:var(--nav-ink);font-size:13.5px;font-weight:600;
  padding:6px 2px;transition:color var(--d-fast);
}
nav.links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--gold);transition:right 320ms var(--e-out);
}
nav.links a:hover::after,nav.links a.active::after{right:0;}
nav.links a.active{color:var(--nav-ink);}
.nav-right{display:flex;align-items:center;gap:12px;}
.nav-cta.is-current{box-shadow:var(--lift),0 0 0 3px var(--gold-wash);}

/* Scroll progress hairline — pure CSS, silently absent where unsupported. */
.progress{display:none;}
@media(prefers-reduced-motion:no-preference){
  @supports(animation-timeline:scroll()){
    .progress{
      display:block;position:absolute;left:0;bottom:-1px;height:1px;width:100%;
      background:var(--gold);transform-origin:0 50%;transform:scaleX(0);
      animation:rail linear;animation-timeline:scroll(root block);
    }
    @keyframes rail{to{transform:scaleX(1);}}
  }
}

.burger{
  display:none;background:none;border:none;cursor:pointer;padding:10px;
  min-width:44px;min-height:44px;
  flex-direction:column;align-items:center;justify-content:center;
}
.burger span{display:block;width:22px;height:2px;background:var(--nav-ink);margin:3px 0;border-radius:2px;}

/* ---- Mobile menu ---- */
.mobile-menu{
  display:none;position:fixed;inset:0;background:var(--bg-dusk-1);z-index:200;
  padding:20px var(--gutter);flex-direction:column;overflow-y:auto;
}
.mobile-menu.open{display:flex;}
.mobile-menu .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s7);}
.mobile-menu a{
  color:#fff;font-size:22px;font-family:var(--font-head);font-weight:600;
  padding:16px 0;border-bottom:1px solid var(--rule-dark);
  opacity:0;transform:translateY(8px);
  transition:opacity 380ms var(--e-out),transform 380ms var(--e-out);
  transition-delay:calc(var(--i,0)*45ms);
}
.mobile-menu.open a{opacity:1;transform:none;}
.mobile-menu a.active{color:var(--gold-light);}
.mobile-menu .close-btn{
  background:none;border:1px solid var(--rule-dark);color:#fff;font-size:24px;cursor:pointer;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  line-height:1;border-radius:var(--r-btn);
}
.mobile-menu .mm-foot{margin-top:auto;padding-top:var(--s6);border-top:1px solid var(--rule-dark);}
.mobile-menu .mm-foot a{
  border:0;font-family:var(--font-mono);font-size:13px;padding:8px 0;opacity:1;transform:none;
  color:var(--muted-light);
}

/* ============================================================================
   3. BUTTONS
   ========================================================================= */

.cta-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(180deg,#e3a622 0%,var(--gold-deep) 100%);
  color:#12190b;border:0;border-radius:var(--r-btn);
  padding:15px 26px;position:relative;overflow:hidden;isolation:isolate;
  font-family:var(--font-body);font-weight:700;font-size:14.5px;
  cursor:pointer;text-align:center;
  box-shadow:var(--sh-btn),var(--lift);
  transition:transform var(--d-fast) var(--e-out),
             box-shadow var(--d-mid) var(--e-out),
             background var(--d-fast) var(--e-out);
}
/* A single light sweep across the face on hover. */
.cta-btn::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.38) 50%,transparent 62%);
  transform:translateX(-130%);
  transition:transform 700ms var(--e-out);
}
.cta-btn:hover{
  background:linear-gradient(180deg,#e9b12f 0%,#bd8016 100%);
  box-shadow:var(--sh-btn-h),var(--lift);
  transform:translateY(-2px);
}
.cta-btn:hover::after{transform:translateX(130%);}
.cta-btn:active{transform:translateY(0);box-shadow:var(--sh-btn),var(--lift);}

.cta-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  color:currentColor;border:1px solid currentColor;opacity:.7;
  border-radius:var(--r-btn);padding:14px 24px;
  font-weight:600;font-size:14px;text-align:center;background:transparent;
  transition:opacity var(--d-fast) var(--e-out),
             background var(--d-mid) var(--e-out),
             transform var(--d-fast) var(--e-out);
}
.cta-ghost:hover{opacity:1;background:var(--ghost-hover,rgba(255,255,255,.08));transform:translateY(-2px);}
.cta-ghost:active{transform:translateY(0);}
.cta-band .cta-ghost,.contact-form .cta-ghost{--ghost-hover:rgba(22,33,14,.05);}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;margin-top:var(--s2);
  font-weight:700;font-size:14.5px;color:var(--ink);padding-bottom:5px;
  background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% 1.5px no-repeat;
  transition:color var(--d-fast) var(--e-out),
             background-size var(--d-mid) var(--e-out);
}
.link-arrow:hover{color:var(--gold-ink);background-size:100% 2.5px;}

/* ============================================================================
   4. SECTION FURNITURE — eyebrow, index rail, headings
   ========================================================================= */

.eyebrow{
  font-family:var(--font-mono);font-size:var(--t-micro);
  letter-spacing:var(--track-mono);text-transform:uppercase;
  color:var(--gold-ink);font-weight:500;display:inline-block;
}
.eyebrow::before{
  content:"";display:inline-block;width:24px;height:1px;background:currentColor;
  vertical-align:middle;margin-right:12px;transform:translateY(-1px);
}
.hero .eyebrow,.page-banner .eyebrow,.stats-band .eyebrow,.contact-info .eyebrow,.cta-band .eyebrow{
  color:var(--gold-light);
}
.cta-band .eyebrow{color:var(--gold-ink);}

.section-head{max-width:640px;margin-bottom:var(--s7);}
.section-head h2{font-size:var(--t-h2);margin-top:var(--s3);}
.section-head p{color:var(--muted);font-size:var(--t-body);margin-top:var(--s4);max-width:var(--measure);}
.stats-band .section-head h2{color:#fff;}
.stats-band .section-head p{color:var(--muted-light);}
.center-row{text-align:center;margin-top:var(--s6);}

/* ---- The index rail: every section is a numbered plate in a drawing set ---- */
.wrap.ruled{display:grid;grid-template-columns:1fr;}
/* Grid and flex children default to a min-content floor, which lets a wide
   child (a scroll rail, a long mono string) push the whole column past the
   viewport. min-width:0 lets them shrink instead. */
.wrap.ruled>*,.hero-grid>*,.about-grid>*,.contact-shell>*,.sheet>*,.foot-grid>*{min-width:0;}
.rail{
  display:flex;gap:10px;align-items:baseline;
  border-top:1px solid var(--edge);padding-top:10px;margin-bottom:var(--s6);
}
.rail-n{
  font-family:var(--font-mono);font-size:15px;font-variant-numeric:tabular-nums;
  color:var(--gold-ink);line-height:1;
}
.rail-t{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--muted);
}
.hero .rail-n,.page-banner .rail-n,.stats-band .rail-n{color:var(--gold-light);}
.hero .rail-t,.page-banner .rail-t,.stats-band .rail-t{color:var(--muted-light);}
@media(min-width:1024px){
  .wrap.ruled{grid-template-columns:var(--rail) minmax(0,1fr);column-gap:var(--s7);}
  .rail{
    position:sticky;top:calc(var(--nav-h) + 40px);align-self:start;
    display:block;margin-bottom:0;padding-top:var(--s3);
  }
  .rail-n{display:block;font-size:22px;}
  .rail-t{display:block;margin-top:6px;}
  /* Container margin rules */
  .wrap.ruled::before,.wrap.ruled::after{
    content:"";position:absolute;top:0;bottom:0;width:1px;
    background:var(--edge);pointer-events:none;
  }
  .wrap.ruled::before{left:0;}
  .wrap.ruled::after{right:0;}
}

/* ============================================================================
   5. CARDS AND SHEETS
   ========================================================================= */

/* One card recipe, used by every card on the site: a rounded sheet on a soft
   shadow that lifts a little when you point at it. */
.svc-card,.quote-card,.sheet>*{
  background:var(--surface-0);
  border:1px solid var(--rule);
  border-radius:var(--r-card);
  box-shadow:var(--sh-card);
  padding:var(--s6);
  position:relative;
  transition:transform var(--d-mid) var(--e-out),
             box-shadow var(--d-mid) var(--e-out),
             border-color var(--d-mid) var(--e-out);
}
.svc-card:hover,.quote-card:hover,.sheet>*:hover{
  transform:translateY(-4px);
  box-shadow:var(--sh-card-h);
  border-color:rgba(var(--gold-rgb),.34);
}
.section-alt .svc-card,.section-alt .sheet>*{border-color:var(--line-alt);}
/* Needs the same specificity as the rule above, or the recessed-band border
   colour wins and these cards never pick up the gold hover edge. */
.section-alt .svc-card:hover,.section-alt .sheet>*:hover{border-color:rgba(var(--gold-rgb),.4);}

/* Card rows: separate cards with a gap, not one ruled block. */
.sheet{display:grid;gap:var(--s5);border:0;background:none;box-shadow:none;}
.sheet-2{grid-template-columns:1fr 1fr;}
.sheet-3{grid-template-columns:repeat(3,1fr);}
.sheet h3{font-size:var(--t-h3);margin-bottom:var(--s3);}
.sheet p{color:var(--muted);font-size:15px;line-height:1.7;max-width:var(--measure);}
.sheet-n{
  position:absolute;top:var(--s5);right:var(--s6);
  font-family:var(--font-mono);font-size:44px;line-height:1;
  color:var(--gold-ink);opacity:.13;pointer-events:none;
}
@media(max-width:820px){
  .sheet-2,.sheet-3{grid-template-columns:1fr;}
  .sheet-n{font-size:32px;}
}

/* Warm plate behind each service icon, as in the reference. */
.svc-icon{
  width:52px;height:52px;border-radius:var(--r-md);
  background:linear-gradient(145deg,#fdf3de,#f7e3ae);
  border:1px solid rgba(var(--gold-rgb),.22);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--s5);color:var(--green-ink);
  transition:transform var(--d-mid) var(--e-out),box-shadow var(--d-mid) var(--e-out);
}
.svc-icon svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.6;fill:none;}
.svc-card:hover .svc-icon,.sheet>*:hover .svc-icon{
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 6px 14px -6px rgba(var(--gold-rgb),.5);
}
.svc-card h3{font-size:var(--t-h3);margin-bottom:var(--s3);}
.svc-card p{color:var(--muted);font-size:15px;line-height:1.7;max-width:var(--measure);}
.svc-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:var(--s5);}
.svc-tags span{
  border-radius:var(--r-pill);background:#eef6e2;border:1px solid #cfe6ac;
  color:var(--green-ink);font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;
  transition:background var(--d-fast),border-color var(--d-fast);
}
.svc-card:hover .svc-tags span,.sheet>*:hover .svc-tags span{background:#e7f2d6;border-color:#bcd996;}

/* ============================================================================
   6. HERO
   ========================================================================= */

.hero{
  position:relative;overflow:hidden;
  background:var(--dark-rake);color:#fff;padding:0;
}
.hero-grid{
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr) minmax(0,.88fr);
  column-gap:var(--s7);align-items:center;
  max-width:var(--max);margin:0 auto;
  padding:calc(var(--nav-h) + var(--s8)) var(--gutter) var(--s7);
  position:relative;z-index:1;
  min-height:clamp(600px,88vh,860px);
  min-height:clamp(600px,88svh,860px);
}
.hero h1{
  font-size:var(--t-display);font-weight:500;
  line-height:var(--lh-display);letter-spacing:var(--track-display);
  margin-top:var(--s5);max-width:15ch;overflow-wrap:break-word;
}
.hero h1 em{
  font-style:normal;color:var(--gold-light);
  background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 1px no-repeat;
  transition:background-size 900ms var(--e-out) 600ms;
}
body.is-lit .hero h1 em{background-size:100% 1px;}
.hero p.lead{
  color:var(--muted-light);font-size:17px;line-height:var(--lh-body);
  margin-top:var(--s5);max-width:46ch;
}
.hero-actions{display:flex;gap:var(--s3);margin-top:var(--s6);flex-wrap:wrap;}
.hero-meta{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--rule-dark);margin-top:var(--s7);
}
.hero-meta div{padding:var(--s4) var(--s4) 0 0;border-right:1px solid var(--rule-dark);}
.hero-meta div:last-child{border-right:0;}
.hero-meta .num{
  font-family:var(--font-mono);font-size:clamp(24px,2.6vw,32px);
  font-variant-numeric:tabular-nums;color:#fff;line-height:1.1;
}
.hero-meta .lbl{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--muted-light);margin-top:6px;line-height:1.4;
}

/* Self-contained grain — no HTTP request. */
.hero::after,.stats-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- The sun-arc diagram ---- */
.arc-wrap{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:380px;
}
.arc-wrap svg{
  width:calc(100% + 60px);max-width:none;margin-right:-60px;height:auto;opacity:.94;
}
/* The drawing only occupies the lower two-thirds of its own viewBox, so it is
   scaled up and nudged towards the optical centre of the column. Scaling the
   <svg> element does not disturb the offset-path coordinates inside it. */
@media(min-width:921px){
  .arc-wrap svg{transform:scale(1.26) translateY(-5%);transform-origin:60% 55%;}
}
.sun-orbit{
  transform-box:view-box;
  offset-path:path("M 40 340 A 220 220 0 0 1 480 340");
  offset-rotate:0deg;offset-distance:0%;opacity:0;
  animation:sunrise 1600ms cubic-bezier(.16,.84,.44,1) 250ms forwards;
}
@keyframes sunrise{
  from{offset-distance:0%;opacity:0;}
  12%{opacity:1;}
  to{offset-distance:66.7%;opacity:1;}
}
@supports not (offset-path:path("M 0 0")){
  .sun-orbit{transform:translate(370px,150px);opacity:1;animation:none;}
}
.sun-core{filter:drop-shadow(0 0 12px rgba(240,196,99,.5));}
.sun-halo{
  transform-box:fill-box;transform-origin:center;opacity:.35;
  animation:halo 7s var(--e-inout) 1900ms infinite;
}
@keyframes halo{
  0%,100%{transform:scale(1);opacity:.35;}
  50%{transform:scale(1.18);opacity:.14;}
}
.arc-charge{
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:charge 1600ms cubic-bezier(.16,.84,.44,1) 250ms forwards;
}
@keyframes charge{to{stroke-dashoffset:.333;}}
.photon{stroke-dasharray:4 14;animation:photon 2200ms linear infinite;}
@keyframes photon{to{stroke-dashoffset:-36;}}
.arc-wrap svg g.stage{
  opacity:0;transition:opacity 520ms var(--e-out);
  transition-delay:calc(600ms + var(--i,0)*220ms);
}
.arc-wrap.is-in svg g.stage{opacity:1;}

/* ---- Hero strip ---- */
.hero-strip{border-top:1px solid var(--rule-dark);background:rgba(255,255,255,.02);position:relative;z-index:1;}
.hero-strip .wrap{display:flex;flex-wrap:wrap;padding-left:0;padding-right:0;}
.hero-strip .item{
  flex:1 1 0;min-width:150px;padding:18px var(--s5);
  border-right:1px solid var(--rule-dark);
  font-size:13px;color:var(--muted-light);
  display:flex;align-items:center;gap:10px;
}
.hero-strip .item:last-child{border-right:none;}
.hero-strip .dot{
  width:5px;height:5px;border:1px solid var(--gold);background:none;
  border-radius:0;transform:rotate(45deg);flex:none;
}

/* ---- Verifiability strip: facts the business already owns ---- */
.verify{background:var(--surface-2);border-bottom:1px solid var(--rule);}
.verify .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding-left:0;padding-right:0;}
.verify .cell{
  padding:20px var(--s5);border-right:1px solid var(--rule);
  display:flex;gap:10px;align-items:flex-start;
}
.verify .cell:last-child{border-right:0;}
.verify .cell svg{width:16px;height:16px;flex:none;stroke:var(--gold-ink);stroke-width:1.5;fill:none;margin-top:3px;}
.verify .k{
  display:block;font-family:var(--font-mono);font-size:10px;
  letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--muted);margin-bottom:3px;
}
.verify .v{font-size:13.5px;line-height:1.45;color:var(--ink);font-weight:600;}

/* ============================================================================
   7. INNER PAGE BANNER
   ========================================================================= */

.page-banner{
  background:var(--dark-rake);color:#fff;
  padding:calc(var(--nav-h) + var(--s7)) 0 var(--s7);
  position:relative;overflow:hidden;
}
.page-banner h1{font-size:var(--t-h1);margin-top:var(--s4);max-width:20ch;}
.page-banner p{
  color:var(--muted-light);font-size:15.5px;margin-top:var(--s4);
  max-width:58ch;line-height:var(--lh-body);
}
.crumb{
  color:var(--muted-light);font-family:var(--font-mono);font-size:11px;
  letter-spacing:var(--track-mono);text-transform:uppercase;margin-top:var(--s5);
}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.crumb li:not(:last-child)::after{content:"/";margin-left:8px;opacity:.5;}
.crumb a{color:var(--gold-light);}
.crumb a:hover{text-decoration:underline;}
.crumb [aria-current]{color:var(--muted-light);}

/* ---- Busbar seams on dark grounds ---- */
.stats-band,.page-banner,footer{position:relative;}
.stats-band::before,.page-banner::before,footer::before{
  content:"";position:absolute;inset:0 0 auto 0;height:120px;pointer-events:none;
  background-image:var(--busbar-dark);
  -webkit-mask-image:var(--seam-mask);mask-image:var(--seam-mask);
}

/* ============================================================================
   8. ABOUT
   ========================================================================= */

.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s8);align-items:center;}
.about-media{
  position:relative;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--rule);aspect-ratio:4/5;background:var(--surface-2);box-shadow:var(--sh-card);
}
.about-media img{width:100%;height:100%;object-fit:cover;}
.about-badge{
  position:absolute;bottom:14px;left:14px;right:14px;
  background:var(--panel);border-left:1px solid var(--gold);
  color:#fff;padding:16px 18px;border-radius:var(--r-md);
  display:flex;gap:14px;align-items:center;
}
.about-badge .num{
  font-family:var(--font-mono);font-size:24px;color:var(--gold-light);
  font-variant-numeric:tabular-nums;line-height:1;
}
.about-badge .lbl{font-size:12.5px;color:var(--muted-light);line-height:1.4;}
.about-copy h2{font-size:var(--t-h2);margin-top:var(--s3);margin-bottom:var(--s5);}
.about-copy .lede{
  font-family:var(--font-head);font-size:var(--t-lede);font-weight:500;
  color:var(--ink);line-height:1.5;margin-bottom:var(--s5);max-width:var(--measure);
}
.about-copy p{color:var(--muted);font-size:15.5px;line-height:1.75;margin-bottom:var(--s4);max-width:var(--measure);}

/* ============================================================================
   9. PROCESS TRACK
   ========================================================================= */

.process-track{
  display:grid;grid-template-columns:repeat(4,1fr);position:relative;margin-top:var(--s3);
}
.process-track::before{
  content:"";position:absolute;top:23px;left:0;right:0;height:1px;
  background:repeating-linear-gradient(90deg,var(--dash) 0 8px,transparent 8px 14px);
}
.process-track::after{
  content:"";position:absolute;top:23px;left:0;right:0;height:1px;
  background:var(--gold);transform:scaleX(var(--p,0));transform-origin:0 50%;
  transition:transform 900ms var(--e-out);
}
.step{position:relative;padding-right:var(--s5);}
.step .idx{
  width:40px;height:40px;border-radius:var(--r-md);
  background:var(--surface-0);border:1px solid var(--rule-strong);
  color:var(--gold-ink);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:500;font-size:15px;
  position:relative;z-index:2;margin-bottom:var(--s4);
  box-shadow:0 0 0 6px var(--surface-2);
}
.step h3{font-size:16px;margin-bottom:var(--s2);}
.step p{font-size:13.5px;color:var(--muted);line-height:1.6;}

@media(max-width:920px){
  .process-track{grid-template-columns:1fr;row-gap:0;}
  .process-track::before{
    top:0;bottom:0;left:19px;right:auto;width:1px;height:auto;
    background:repeating-linear-gradient(180deg,var(--dash) 0 8px,transparent 8px 14px);
  }
  .process-track::after{
    top:0;bottom:0;left:19px;right:auto;width:1px;height:auto;
    transform:scaleY(var(--p,0));transform-origin:50% 0;
  }
  .step{
    display:grid;grid-template-columns:40px 1fr;column-gap:var(--s4);
    padding:var(--s5) 0;border-bottom:1px solid var(--rule);
  }
  .step .idx{margin-bottom:0;}
  .step h3,.step p{grid-column:2;}
  .step:last-child{border-bottom:0;}
}

/* ============================================================================
   10. GALLERY — ragged contact sheet
   ========================================================================= */

/* A ragged contact sheet. Tile heights come from explicit row spans rather
   than aspect-ratio: an aspect-ratio on a grid item stops it stretching to
   the row, which leaves gaps under the shorter tile in every mixed row. */
.gallery-grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(84px,10.4vw,126px);gap:12px;
}
.g-item{
  position:relative;overflow:hidden;margin:0;background:var(--surface-2);
  border:1px solid var(--rule);border-radius:var(--r-md);
  box-shadow:var(--sh-card);
  transition:transform var(--d-mid) var(--e-out),box-shadow var(--d-mid) var(--e-out);
}
.g-item:hover{transform:translateY(-3px);box-shadow:var(--sh-card-h);}
.g-item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 620ms var(--e-out);
}
.g-item:hover img{transform:scale(1.05);}
/* Row 1: a wide site shot beside a tall one. Row 2: three square details. */
.g-item:nth-child(1){grid-column:span 7;grid-row:span 4;}
.g-item:nth-child(2){grid-column:span 5;grid-row:span 4;}
.g-item:nth-child(3),.g-item:nth-child(4),.g-item:nth-child(5){grid-column:span 4;grid-row:span 3;}
.g-cap{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  background:linear-gradient(transparent,rgba(16,22,12,.86));color:#fff;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:var(--track-mono);
  text-transform:uppercase;opacity:0;transform:translateY(8px);
  transition:opacity var(--d-mid) var(--e-out),transform var(--d-mid) var(--e-out);
}
.g-item:hover .g-cap,.g-item:focus-within .g-cap{opacity:1;transform:none;}
.g-note{
  margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--rule);
  display:flex;gap:var(--s4);align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.g-note p{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);max-width:62ch;line-height:1.7;
}
@media(max-width:720px){
  /* One tile per row, so aspect-ratio is safe again — there is no shorter
     neighbour for it to disagree with. */
  /* Every rule here has to repeat the :nth-child selector. A plain `.g-item`
     rule loses to the desktop `.g-item:nth-child(1)` above on specificity, and
     a media query does not change that. */
  .gallery-grid{grid-auto-rows:auto;}
  .g-item:nth-child(1),.g-item:nth-child(2){grid-column:span 12;grid-row:auto;}
  .g-item:nth-child(1){aspect-ratio:4/3;}
  .g-item:nth-child(2){aspect-ratio:4/5;}
  .g-item:nth-child(3),.g-item:nth-child(4),.g-item:nth-child(5){
    grid-column:span 6;grid-row:auto;aspect-ratio:1/1;
  }
  .g-cap{opacity:1;transform:none;padding:12px 13px;}
}

/* ============================================================================
   11. STATS BAND AND WHY CARDS
   ========================================================================= */

.stats-band{background:var(--dark-rake);color:#fff;position:relative;overflow:hidden;}
.stats-band>.wrap{position:relative;z-index:1;}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-bottom:var(--s8);}
.why-card{
  background:rgba(255,255,255,.04);border:1px solid var(--rule-dark);
  border-radius:var(--r-card);padding:var(--s6) var(--s5);
  transition:border-color var(--d-mid) var(--e-out),background var(--d-mid) var(--e-out),transform var(--d-mid) var(--e-out);
}
.why-card:hover{border-color:rgba(var(--gold-rgb),.4);background:rgba(255,255,255,.075);transform:translateY(-4px);}
.why-ic{
  width:40px;height:40px;border:1px solid var(--rule-dark);border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold-light);margin-bottom:var(--s4);font-size:0;
}
.why-ic svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.why-card h3{font-size:15.5px;color:#fff;margin-bottom:var(--s3);line-height:1.35;}
.why-card p{font-size:13.5px;color:var(--muted-light);line-height:1.65;}

.stats-band .stats-grid{padding-top:var(--s6);border-top:1px solid var(--rule-dark);}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.stat{text-align:center;padding:var(--s3) var(--s2);border-right:1px solid var(--rule-dark);}
.stat:last-child{border-right:none;}
.stat .num{
  font-family:var(--font-mono);font-size:clamp(30px,4vw,44px);font-weight:500;
  color:var(--gold-light);font-variant-numeric:tabular-nums;line-height:1.1;
}
.stat .lbl{
  font-family:var(--font-mono);font-size:11px;letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--muted-light);margin-top:var(--s2);
}

/* ============================================================================
   12. TESTIMONIALS — editorial voices
   ========================================================================= */

.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);min-width:0;}
.voice{
  position:relative;margin:0;display:flex;flex-direction:column;
  background:var(--surface-0);
  border:1px solid var(--rule);
  border-radius:var(--r-card);
  box-shadow:var(--sh-card);
  padding:var(--s6);
  transition:transform var(--d-mid) var(--e-out),
             box-shadow var(--d-mid) var(--e-out),
             border-color var(--d-mid) var(--e-out);
}
.voice:hover{
  transform:translateY(-4px);
  box-shadow:var(--sh-card-h);
  border-color:rgba(var(--gold-rgb),.34);
}
/* Oversized opening quote, sitting behind the text. */
.voice-mark{
  position:absolute;top:6px;right:var(--s5);
  font-family:var(--font-head);font-weight:700;font-size:82px;line-height:1;
  color:var(--gold);opacity:.15;pointer-events:none;user-select:none;
  transition:opacity var(--d-mid) var(--e-out),transform var(--d-mid) var(--e-out);
}
.voice:hover .voice-mark{opacity:.24;transform:translateY(-2px);}
.voice .stars{display:block;position:relative;}
.voice .stars svg{width:80px;height:14px;fill:var(--gold-deep);}
.voice blockquote{
  margin:var(--s4) 0 var(--s5);position:relative;flex:1;
  font-size:16px;line-height:1.72;color:var(--ink);
}
.voice figcaption{
  display:flex;align-items:center;gap:12px;
  padding-top:var(--s4);border-top:1px solid var(--rule);
  /* Fixed height so the rule under every quote lands on the same line, even
     when one person's role wraps onto two lines. */
  min-height:76px;
}
.voice .avatar{
  width:42px;height:42px;border-radius:50%;flex:none;
  background:linear-gradient(145deg,#2f4a16,#1b2712);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold-light);font-family:var(--font-head);font-weight:700;
  font-size:14px;letter-spacing:.02em;
}
.voice .nm{display:block;font-weight:700;font-size:14.5px;color:var(--ink);line-height:1.3;}
.voice .rl{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.4;}

@media(max-width:820px){
  /* A swipeable rail: three stacked cards would otherwise put three whole
     screens of scrolling between the reader and the call to action. */
  .voices{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;gap:var(--s4);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding:6px 2px var(--s4);
  }
  .voices::-webkit-scrollbar{display:none;}
  .voice{flex:0 0 86%;scroll-snap-align:center;}
  .voice:hover{transform:none;box-shadow:var(--sh-card);}
}

/* ============================================================================
   13. CONTACT SHELL AND FORMS
   ========================================================================= */

.contact-shell{
  border-radius:var(--r-card);overflow:hidden;
  display:grid;grid-template-columns:1fr 1.15fr;
  border:1px solid var(--rule);box-shadow:var(--sh-1);background:var(--panel);
}
.contact-info{
  padding:var(--s7) var(--s6);color:#fff;
  background:radial-gradient(120% 100% at 0% 0%, #2a4014, var(--panel) 60%);
  display:flex;flex-direction:column;
}
.contact-info h2,.contact-info h3{font-size:23px;margin-top:var(--s3);line-height:1.3;}
.contact-info p.desc{color:var(--muted-light);font-size:14.5px;margin-top:var(--s4);line-height:1.65;}
/* Sits against the bottom of the dark panel so the column does not end in a
   large block of empty green when the form beside it is taller.
   Declared after `.contact-info p.desc` on purpose — it carries the same
   specificity, so source order is what lets `margin-top:auto` win. */
.info-foot,.contact-info p.info-foot{
  margin-top:auto;padding-top:var(--s6);
  border-top:1px solid var(--rule-dark);
}
.info-row{display:flex;gap:14px;align-items:flex-start;margin-top:var(--s5);}
.info-row .ic{
  width:38px;height:38px;border-radius:var(--r-md);
  border:1px solid var(--rule-dark);background:rgba(var(--gold-rgb),.10);
  display:flex;align-items:center;justify-content:center;flex:none;color:var(--gold-light);
  font-family:var(--font-mono);font-weight:500;font-size:14px;
}
.info-row .ic svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.info-row .txt{font-size:14.5px;line-height:1.55;}
.info-row .txt .k{
  font-family:var(--font-mono);font-size:10.5px;color:var(--muted-light);
  text-transform:uppercase;letter-spacing:var(--track-mono);display:block;margin-bottom:4px;
}
.info-row .txt a{border-bottom:1px solid rgba(var(--gold-rgb),.5);}
.info-row .txt a:hover{border-bottom-color:var(--gold-light);}

/* The quote page's numbered conduit */
.steps{position:relative;}
.steps::before{
  content:"";position:absolute;left:19px;top:28px;bottom:28px;width:1px;
  background:var(--rule-dark);
}

.contact-form{background:var(--surface-0);padding:var(--s7) var(--s6);}
.contact-form h3,.contact-form h4{font-size:19px;margin-bottom:var(--s2);}
.contact-form .sub{color:var(--muted);font-size:14px;margin-bottom:var(--s5);}
.contact-form form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);}
.field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.field label{font-size:12.5px;font-weight:700;color:var(--ink);}
.field input,.field select,.field textarea{
  border:1px solid var(--line);border-bottom-width:1.5px;border-radius:var(--r-btn);
  padding:12px 13px;font-family:var(--font-body);
  font-size:16px;                       /* 16px stops iOS zooming on focus */
  color:var(--ink);background:var(--surface);
  transition:border-color var(--d-fast);width:100%;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--rule-strong);}
.field input:user-invalid{border-color:#a33;}
.field textarea{resize:vertical;min-height:104px;}
.full{grid-column:1/-1;}
.err{font-size:12px;color:#a33;line-height:1.4;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-alert{
  display:none;grid-column:1/-1;margin-bottom:0;padding:12px 14px;
  border:1px solid #c9a2a2;border-left:3px solid #a33;border-radius:var(--r-btn);
  background:#fcf6f6;font-size:14px;color:#7a2020;line-height:1.5;
}
.form-alert.show{display:block;}
.submit-btn{
  grid-column:1/-1;width:100%;background:var(--ink);color:#fff;border:none;
  padding:16px;border-radius:var(--r-btn);font-weight:700;font-size:15px;cursor:pointer;
  box-shadow:var(--sh-card);
  transition:background var(--d-fast) var(--e-out),transform var(--d-fast) var(--e-out),box-shadow var(--d-mid) var(--e-out);
}
.submit-btn:hover{background:#243516;transform:translateY(-2px);box-shadow:var(--sh-card-h);}
.submit-btn:active{transform:translateY(1px);}
.submit-btn[disabled]{opacity:.65;cursor:progress;}
.form-note{
  grid-column:1/-1;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:var(--track-mono);text-transform:uppercase;
  color:var(--muted);text-align:center;line-height:1.7;
}
.form-success{display:none;text-align:center;padding:var(--s7) var(--s3);}
.form-success.show{display:block;}
.form-success .ic{
  width:56px;height:56px;border-radius:50%;border:1px solid var(--eco);
  color:var(--eco);display:flex;align-items:center;justify-content:center;margin:0 auto var(--s4);
}
.form-success .ic svg path{
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:tick 420ms var(--e-out) 120ms forwards;
}
@keyframes tick{to{stroke-dashoffset:0;}}
.form-success h3,.form-success h4{font-size:19px;margin-bottom:var(--s2);}
.form-success p{color:var(--muted);font-size:14.5px;}
.form-success:focus{outline:none;}


/* ---- Map facade: the embed only loads when asked for ---- */
.map-shell{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--rule);box-shadow:var(--sh-card);}
.map-facade{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s4);min-height:300px;background:var(--panel);color:#fff;
  text-align:center;padding:var(--s6) var(--s5);cursor:pointer;width:100%;border:0;
}
.map-facade .addr{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  color:var(--muted-light);line-height:1.8;text-transform:uppercase;
}
.map-facade .row{display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:center;}
.map-shell iframe{border:0;display:block;width:100%;height:380px;}

/* ============================================================================
   14. CTA BAND
   ========================================================================= */

.cta-band{
  background:var(--surface-2);text-align:center;padding:var(--s9) 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  color:var(--ink);
}
.cta-band .eyebrow{display:block;margin-bottom:var(--s3);}
.cta-band .eyebrow::before{display:none;}
.cta-band h2{font-size:var(--t-h2);max-width:22ch;margin:0 auto;}
.cta-band .row{display:flex;justify-content:center;gap:var(--s3);margin-top:var(--s6);flex-wrap:wrap;}
.cta-band .cta-ghost{opacity:.85;}

/* ============================================================================
   15. FOOTER
   ========================================================================= */

footer{
  background:var(--bg-dusk-1);color:var(--muted-light);
  padding:var(--s8) 0 var(--s5);position:relative;overflow:hidden;
}
footer>.wrap{position:relative;z-index:1;}
/* Sized so the whole wordmark fits the container at every width — a stroked
   name that runs off the edge reads as broken, not editorial. */
.foot-mark{
  font-family:var(--font-head);font-weight:700;
  font-size:min(5.4vw,78px);line-height:.9;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.10);
  margin:0 0 var(--s8);white-space:nowrap;overflow:hidden;
}
.foot-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:var(--s7);
  padding-bottom:var(--s7);border-bottom:1px solid var(--rule-dark);
}
.foot-grid>div+div{border-left:1px solid var(--rule-dark);padding-left:var(--s6);}
.foot-brand{display:flex;gap:12px;align-items:center;color:#fff;margin-bottom:var(--s4);}
.foot-chip{
  width:44px;height:44px;border-radius:var(--r-md);flex:none;background:#fff;
  display:flex;align-items:center;justify-content:center;padding:2px;
}
.foot-brand strong{font-family:var(--font-head);font-size:16px;}
.foot-about{font-size:14px;line-height:1.75;max-width:34ch;}
.foot-h{
  color:#fff;font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:var(--track-mono);text-transform:uppercase;margin-bottom:var(--s4);
}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
footer a{font-size:14px;color:var(--muted-light);transition:color var(--d-fast);}
footer a:hover{color:var(--gold-light);}
footer li a{display:inline-block;padding:2px 0;}
.foot-bottom{
  display:flex;justify-content:space-between;padding-top:var(--s5);
  font-size:13px;flex-wrap:wrap;gap:var(--s3);align-items:center;
}
.credit{display:flex;align-items:center;gap:10px;color:var(--muted-light);flex-wrap:wrap;}
.credit strong{color:#fff;font-weight:700;margin-left:4px;}
.credit-links{display:flex;align-items:center;gap:8px;}
.credit-links a{
  color:var(--muted-light);display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--rule-dark);
  transition:color var(--d-fast),border-color var(--d-fast),background var(--d-fast);
}
.credit-links a:hover{color:var(--gold-light);border-color:var(--gold);background:rgba(var(--gold-rgb),.1);}

/* ============================================================================
   16. MOBILE ACTION DOCK + WHATSAPP BUTTON
   ========================================================================= */

.dock{display:none;}
.whatsapp-fab{
  position:fixed;right:22px;bottom:22px;z-index:150;
  width:56px;height:56px;border-radius:50%;background:#fff;
  border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-1);
  transition:box-shadow var(--d-mid) var(--e-out);
}
.whatsapp-fab:hover{box-shadow:var(--sh-1),0 0 0 6px rgba(37,211,102,.25);}

@media(max-width:820px){
  .dock{
    display:grid;grid-template-columns:1fr 1fr 1.25fr;
    position:fixed;left:0;right:0;bottom:0;z-index:160;
    background:rgba(20,29,13,.94);
    border-top:1px solid rgba(var(--gold-rgb),.28);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .dock a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:var(--dock-h);color:#fff;font-size:11.5px;font-weight:700;
    border-right:1px solid var(--rule-dark);text-align:center;
  }
  .dock a:last-child{border-right:0;}
  .dock a svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
  .dock-cta{background:var(--gold-deep);color:#12190b !important;}
  body{padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom,0px));}
  .whatsapp-fab{display:none;}
}
@supports(backdrop-filter:blur(1px)){
  .dock{backdrop-filter:blur(12px);}
}

/* ============================================================================
   17. REVEAL MOTION
   ========================================================================= */

/* Sections rise into place once, as they scroll in.

   This uses an animation rather than a transition on purpose. A transition
   here would occupy the element's `transform` permanently and its delay would
   also apply to hover, so cards would refuse to lift and would lag by their
   stagger amount. main.js strips the attribute once the animation ends, which
   hands `transform` back to the hover rules cleanly. */
[data-reveal]{opacity:0;}
[data-reveal].is-in{
  animation:as-rise var(--d-slow) var(--e-out) both;
  animation-delay:calc(var(--i,0) * 80ms);
}
@keyframes as-rise{
  from{opacity:0;transform:translate3d(0,22px,0);}
  to{opacity:1;transform:translate3d(0,0,0);}
}

/* ============================================================================
   18. RESPONSIVE
   ========================================================================= */

@media(max-width:1023px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);}
  .hero .rail{grid-column:1/-1;}
}

@media(max-width:920px){
  nav.links{display:none;}
  .burger{display:flex;}
  .hero-grid{grid-template-columns:1fr;padding-top:calc(var(--nav-h) + var(--s6));row-gap:var(--s6);}
  .arc-wrap{min-height:220px;opacity:.8;}
  .arc-wrap svg{width:100%;margin-right:0;}
  .about-grid{grid-template-columns:1fr;gap:var(--s6);}
  .about-media{aspect-ratio:4/3;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .stat{border-bottom:1px solid var(--rule-dark);padding:var(--s5) var(--s2);}
  .stat:nth-child(2n){border-right:none;}
  .stat:nth-last-child(-n+2){border-bottom:none;}
  .contact-shell{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--s6);}
  .foot-grid>div+div{border-left:0;padding-left:0;}
  .verify .wrap{grid-template-columns:repeat(2,1fr);}
  .verify .cell:nth-child(2n){border-right:0;}
  .verify .cell:nth-child(-n+2){border-bottom:1px solid var(--rule);}
}

@media(max-width:600px){
  /* The dock at the bottom of the screen already carries a permanent CTA, so
     the header one is dropped rather than squeezed into a three-line block. */
  .nav-cta{display:none;}
  .logo-chip{width:40px;height:40px;}
  .brand{gap:9px;}
  .brand .name{font-size:14px;line-height:1.1;}
  .brand .name span{font-size:9px;margin-top:2px;}
  .hero-strip .item{flex:1 1 50%;border-right:0;border-bottom:1px solid var(--rule-dark);}
  .hero-strip .wrap{display:grid;grid-template-columns:1fr 1fr;}
  .hero-strip .item:nth-child(odd){border-right:1px solid var(--rule-dark);}
  .hero-strip .item:nth-last-child(-n+2){border-bottom:0;}
  .why-grid{grid-template-columns:1fr;gap:var(--s3);}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .stat{padding:20px 6px;}
  .stat .lbl{font-size:10px;}
  .foot-grid{grid-template-columns:1fr;}
  .foot-bottom{flex-direction:column;align-items:flex-start;}
  .contact-info,.contact-form{padding:var(--s6) var(--s5);}
  /* The email address is a long unbreakable string on a narrow card. */
  .info-row .txt{font-size:13.5px;}
  .info-row .txt a.mono{font-size:12.5px;overflow-wrap:anywhere;}
  .contact-form form{grid-template-columns:1fr;}
  .verify .wrap{grid-template-columns:1fr;}
  .verify .cell{border-right:0;border-bottom:1px solid var(--rule);}
  .verify .cell:last-child{border-bottom:0;}
  .hero-meta{grid-template-columns:1fr 1fr;}
  .hero-meta div:nth-child(2n),.hero-meta div:last-child{border-right:0;}
  .hero-meta div:nth-child(3){border-top:1px solid var(--rule-dark);margin-top:var(--s3);padding-top:var(--s3);}
  .hero::after,.stats-band::after{display:none;}
  .foot-mark{margin-bottom:var(--s6);}
}

/* ============================================================================
   19. REDUCED MOTION
   Both layers must be handled: zeroing transition durations alone would
   strand every opacity:0 reveal element permanently invisible.
   ========================================================================= */

@media(prefers-reduced-motion:reduce){
  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal],[data-reveal].is-in{opacity:1 !important;transform:none !important;animation:none !important;}
  .sun-orbit,.sun-halo,.photon,.arc-charge{animation:none !important;}
  .cta-btn::after{display:none;}
  .sun-orbit{offset-distance:66.7%;opacity:1;}
  .arc-charge{stroke-dashoffset:.333;}
  .arc-wrap svg g.stage{opacity:1;}
  .hero h1 em{background-size:100% 1px;}
  .mobile-menu a{opacity:1;transform:none;}
}

@media print{
  .site-header,.dock,.whatsapp-fab,.mobile-menu,.skip,.arc-wrap{display:none !important;}
  body{background:#fff;color:#000;padding-bottom:0;}
  .hero,.page-banner,.stats-band,footer{background:#fff !important;color:#000 !important;}
}

/* =============================================================================
   ENQUIRY POPUP — auto-shows 15s after page load (see main.js)
   ========================================================================= */
.enquiry-overlay{
  display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:300;
  background:rgba(16,22,12,.55);backdrop-filter:blur(3px);
  align-items:center;justify-content:center;padding:20px;
}
.enquiry-overlay.show{display:flex;animation:enq-fade .25s ease both;}
@keyframes enq-fade{from{opacity:0;}to{opacity:1;}}
.enquiry-popup{
  position:relative;background:var(--surface-0,#fff);border-radius:16px;
  max-width:420px;width:100%;padding:34px 30px 30px;
  box-shadow:0 30px 70px -20px rgba(10,17,10,.5);
  animation:enq-pop .3s ease both;
}
@keyframes enq-pop{from{opacity:0;transform:scale(.94) translateY(8px);}to{opacity:1;transform:scale(1) translateY(0);}}
.enquiry-popup h3{font-size:22px;margin:8px 0 10px;}
.enquiry-popup p{color:var(--muted);font-size:14px;line-height:1.6;margin-bottom:20px;}
.enquiry-close{
  position:absolute;top:14px;right:14px;width:30px;height:30px;
  border-radius:50%;border:none;background:var(--surface-2,#eee);
  color:var(--ink,#111);font-size:18px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.enquiry-close:hover{background:#e2e6da;}
.enquiry-success{display:none;text-align:center;padding:10px 4px 4px;}
.enquiry-success .ic{
  width:48px;height:48px;border-radius:50%;background:#eaf6e0;color:#3e7a16;
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
}
.enquiry-success h4{font-size:18px;margin-bottom:8px;}
.enquiry-success p{color:var(--muted);font-size:14px;margin-bottom:0;}
@media(max-width:480px){
  .enquiry-popup{padding:28px 22px 24px;}
}