/* ==========================================================================
   Big Easy Renovations - Design System Tokens
   Phase 1. Source: SONIC-HANDOFF.md section 2.
   Structural mapping from the Infintech house template, renovation palette.
   ========================================================================== */

:root{
  /* --- Ink and structure --- */
  --ink:          #0B1620;
  --navy:         #0B2545;
  --navy-mid:     #1F6FB2;

  /* --- Accent. CTAs and highlights ONLY. Always --ink text on it. --- */
  --accent:       #FFC21A;
  --accent-deep:  #E0A400;
  /* accent gold is unreadable as TEXT on cream (2.02:1). This is the text-safe
     variant for the FAQ section. Passes AA on --cream. */
  --accent-text:  #7A5300;

  /* --- Surfaces --- */
  --cream:        #F7F4EE;
  --paper:        #FFFFFF;

  /* --- Text --- */
  --txt-on-dark:  #E9EEF4;
  --txt-body:     #3A4652;
  --txt-muted:    #56636F;

  /* --- Lines and depth --- */
  --line:         rgba(255,255,255,.14);
  --line-dark:    rgba(11,37,69,.12);
  --shadow-lg:    0 24px 60px -18px rgba(11,37,69,.35);
  --shadow-sm:    0 2px 8px rgba(11,37,69,.08);

  /* --- Type --- */
  --ff-head:      'Barlow Condensed', Impact, sans-serif;
  --ff-body:      'Barlow', system-ui, sans-serif;

  /* --- Motion --- */
  --ease-out:     cubic-bezier(.19,1,.22,1);

  /* --- Rhythm --- */
  --wrap:         1200px;
  --gut:          clamp(1.25rem, 4vw, 2.5rem);
  --sect-y:       clamp(3.5rem, 8vw, 7rem);
  --radius:       4px;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--ff-body);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;
  color:var(--txt-body);
  background:var(--paper);
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--navy-mid); }

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--ff-head);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.01em;
  color:var(--navy);
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.75rem,1.8rem + 4.2vw,5.25rem); text-transform:uppercase; }
h2{ font-size:clamp(2rem,1.4rem + 2.6vw,3.5rem);   text-transform:uppercase; }
h3{ font-size:clamp(1.25rem,1.1rem + .7vw,1.625rem); }
h4{ font-size:1.0625rem; }
p{ margin:0 0 1.15em; max-width:68ch; }

.eyebrow{
  font-family:var(--ff-head);
  font-size:.875rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--navy-mid);
  margin:0 0 .75rem;
}
.lede{ font-size:clamp(1.0625rem,1rem + .35vw,1.25rem); color:var(--txt-muted); }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.wrap{ width:min(var(--wrap),100% - (var(--gut) * 2)); margin-inline:auto; }
.sect{ padding-block:var(--sect-y); }
.sect--dark{ background:var(--navy); color:var(--txt-on-dark); }
.sect--dark h2,.sect--dark h3{ color:#fff; }
.sect--dark .eyebrow{ color:var(--accent); }
.sect--dark .lede{ color:var(--txt-on-dark); opacity:.82; }
.sect--cream{ background:var(--cream); }
.sect--ink{ background:var(--ink); color:var(--txt-on-dark); }
.sect--ink h2,.sect--ink h3{ color:#fff; }
.sect--ink .eyebrow{ color:var(--accent); }

.sect__head{ max-width:56ch; margin-bottom:clamp(2rem,4vw,3.25rem); }
.sect__head--center{ margin-inline:auto; text-align:center; }

.grid{ display:grid; gap:clamp(1.25rem,2.5vw,2rem); }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); }
.grid--4{ grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr)); }

/* --------------------------------------------------------------------------
   Buttons
   Accent is ALWAYS --ink text on yellow. Never white on yellow.
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--ff-head);
  font-size:1.0625rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  padding:1rem 1.75rem;
  border:2px solid transparent; border-radius:var(--radius);
  text-decoration:none; cursor:pointer;
  transition:transform .18s var(--ease-out), background-color .18s, border-color .18s;
}
.btn:hover{ transform:translateY(-2px); }
.btn:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

.btn--accent{ background:var(--accent); color:var(--ink); }
.btn--accent:hover{ background:var(--accent-deep); }

.btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

.btn--navy{ background:var(--navy); color:#fff; }
.btn--navy:hover{ background:var(--navy-mid); }

/* --------------------------------------------------------------------------
   Client placeholder. Must be visible, never a plausible guess.
   -------------------------------------------------------------------------- */
.ph{
  display:inline-block;
  background:repeating-linear-gradient(45deg,#FFE9A8,#FFE9A8 8px,#FFF4D1 8px,#FFF4D1 16px);
  color:#6B4A00; border:1px dashed #C79A00;
  font-family:var(--ff-body); font-size:.8125rem; font-weight:600;
  padding:.15em .5em; border-radius:3px; letter-spacing:.01em;
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--accent); color:var(--ink);
  padding:.75rem 1.25rem; font-family:var(--ff-head); font-weight:700;
}
.skip:focus{ left:0; }
.vh{
  position:absolute!important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
}