/* =================================================================
   My Local Everything — Gulf Coast Command Center
   Design system: tokens, base, preloader, cursor, header, footer
   Palette: warm sand + deep gulf navy + gulf teal + sunset coral/gold
   ================================================================= */

:root{
  /* --- core palette --- */
  --sand:        #FBF7EF;   /* page base, warm off-white */
  --sand-2:      #F4ECDD;   /* slightly deeper sand */
  --shell:       #FFFFFF;   /* card surface */
  --ink:         #0A2A38;   /* deep gulf navy — primary text */
  --ink-soft:    #2C4A57;   /* secondary text */
  --ink-mute:    #5E7884;   /* muted captions */

  --teal:        #0E7A8C;   /* gulf teal — primary brand */
  --teal-bright: #19B5C9;   /* aqua highlight */
  --teal-deep:   #073C47;   /* deep water — dark sections */
  --teal-ink:    #04222A;   /* deepest gulf */
  --aqua-mist:   #DDEEF0;   /* pale aqua wash */

  --coral:       #FF6B57;   /* sunset coral — accent / CTA */
  --coral-deep:  #E8513C;
  --gold:        #F2B441;   /* sun gold */
  --gold-deep:   #E29A1F;

  /* --- semantic --- */
  --bg:          var(--sand);
  --fg:          var(--ink);
  --accent:      var(--teal);
  --hairline:    rgba(10,42,56,.12);
  --hairline-2:  rgba(10,42,56,.07);

  /* --- type --- */
  --display: "Fraunces", Georgia, serif;
  --sans:    "Figtree", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- scale --- */
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --radius:  18px;
  --radius-sm: 12px;
  --radius-lg: 28px;

  /* --- motion --- */
  --ease-premium: cubic-bezier(.22,1,.36,1);
  --ease-soft:    cubic-bezier(.4,0,.2,1);
  --t-fast: .25s;
  --t-med:  .45s;

  /* --- shadow --- */
  --shadow-sm: 0 1px 2px rgba(10,42,56,.05), 0 4px 14px rgba(10,42,56,.06);
  --shadow-md: 0 8px 28px rgba(10,42,56,.10), 0 2px 8px rgba(10,42,56,.06);
  --shadow-lg: 0 30px 70px -20px rgba(7,60,71,.30);
  --shadow-teal: 0 18px 40px -14px rgba(14,122,140,.45);
}

/* ---------- reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.lenis{ scroll-behavior:auto !important; }
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--teal-bright); color:#fff; }

h1,h2,h3,h4{ font-family:var(--display); font-weight:560; line-height:1.04;
  letter-spacing:-.018em; color:var(--ink); margin:0; }
h1{ font-size:clamp(2.7rem, 6.4vw, 5.4rem); }
h2{ font-size:clamp(2.1rem, 4.6vw, 3.6rem); }
h3{ font-size:clamp(1.35rem, 2.2vw, 1.85rem); }
p{ margin:0 0 1rem; }

/* ---------- layout helpers ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(4.5rem, 9vw, 9rem); position:relative; }
.eyebrow{
  font-family:var(--mono); font-size:.74rem; font-weight:600; letter-spacing:.28em;
  text-transform:uppercase; color:var(--teal); display:inline-flex; align-items:center; gap:.6rem;
}
.eyebrow::before{ content:""; width:26px; height:1.5px; background:var(--coral); display:inline-block; }
.lead{ font-size:clamp(1.1rem,1.6vw,1.32rem); color:var(--ink-soft); line-height:1.6; max-width:54ch; }
.serif-accent{ font-family:var(--display); font-style:italic; font-weight:400; color:var(--teal); }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--coral); --c:#fff;
  display:inline-flex; align-items:center; gap:.6rem; position:relative; overflow:hidden;
  padding:.95rem 1.7rem; border-radius:100px; font-weight:600; font-size:1rem;
  background:var(--bg); color:var(--c); white-space:nowrap;
  transition:transform var(--t-fast) var(--ease-premium), box-shadow var(--t-fast), background var(--t-fast);
  box-shadow:0 10px 26px -10px rgba(232,81,60,.6);
}
.btn svg{ width:18px; height:18px; transition:transform var(--t-fast) var(--ease-premium); }
.btn::after{ /* sheen */
  content:""; position:absolute; top:0; bottom:0; left:0; width:55%; transform:translateX(-200%) skewX(-22deg);
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);
  transition:transform .75s var(--ease-premium);
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -12px rgba(232,81,60,.7); }
.btn:hover::after{ transform:translateX(340%) skewX(-22deg); }
.btn:hover svg{ transform:translateX(4px); }
.btn--ghost{ --bg:transparent; --c:var(--ink); box-shadow:none; border:1.5px solid var(--hairline); }
.btn--ghost:hover{ border-color:var(--teal); color:var(--teal); box-shadow:none; }
.btn--teal{ --bg:var(--teal); box-shadow:0 10px 26px -10px rgba(14,122,140,.6); }
.btn--teal:hover{ box-shadow:0 18px 40px -12px rgba(14,122,140,.7); }
.btn--light{ --bg:var(--sand); --c:var(--ink); box-shadow:var(--shadow-md); }
.btn--lg{ padding:1.1rem 2.1rem; font-size:1.06rem; }

.textlink{ display:inline-flex; align-items:center; gap:.45rem; font-weight:600; color:var(--teal);
  position:relative; }
.textlink::after{ content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1.5px;
  background:var(--teal); transform:scaleX(0); transform-origin:left; transition:transform var(--t-fast) var(--ease-premium); }
.textlink:hover::after{ transform:scaleX(1); }
.textlink svg{ width:16px; height:16px; transition:transform var(--t-fast); }
.textlink:hover svg{ transform:translateX(3px); }

/* ---------- grain overlay ---------- */
.grain{ position:fixed; inset:0; z-index:9000; pointer-events:none; opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- preloader ---------- */
.preloader{ position:fixed; inset:0; z-index:10000; background:var(--teal-ink);
  display:grid; place-items:center; transition:opacity .7s var(--ease-premium), visibility .7s; }
.preloader.done{ opacity:0; visibility:hidden; }
.pre-inner{ text-align:center; color:var(--sand); }
.pre-mark{ display:flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--display);
  font-size:1.5rem; letter-spacing:-.02em; margin-bottom:1.3rem; }
.pre-wave{ width:46px; height:46px; }
.pre-wave path{ stroke-dasharray:90; stroke-dashoffset:90; animation:wavedraw 1.4s var(--ease-premium) infinite alternate; }
.pre-wave path:nth-child(2){ animation-delay:.18s; }
@keyframes wavedraw{ to{ stroke-dashoffset:0; } }
.pre-bar{ width:200px; height:2px; background:rgba(255,255,255,.15); border-radius:2px; overflow:hidden; margin:0 auto; }
.pre-bar i{ display:block; height:100%; width:40%; background:linear-gradient(90deg,var(--teal-bright),var(--gold));
  animation:preload 1.2s var(--ease-soft) infinite; }
@keyframes preload{ 0%{ transform:translateX(-100%);} 100%{ transform:translateX(350%);} }
.pre-label{ font-family:var(--mono); font-size:.7rem; letter-spacing:.25em; text-transform:uppercase;
  opacity:.55; margin-top:1rem; }

/* ---------- custom cursor ---------- */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; z-index:9500; pointer-events:none; border-radius:50%;
  mix-blend-mode:normal; will-change:transform; }
.cursor-dot{ width:7px; height:7px; background:var(--coral); transform:translate(-50%,-50%); }
.cursor-ring{ width:34px; height:34px; border:1.5px solid var(--teal); transform:translate(-50%,-50%);
  transition:width .25s var(--ease-premium), height .25s var(--ease-premium), border-color .25s, background .25s; opacity:.7; }
.cursor-ring.hover{ width:56px; height:56px; background:rgba(14,122,140,.08); border-color:var(--coral); }
@media (hover:none),(pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } }

/* ---------- header ---------- */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:1000; padding-block:1.05rem;
  transition:background var(--t-med) var(--ease-soft), box-shadow var(--t-med), padding var(--t-med), backdrop-filter var(--t-med); }
.site-header.scrolled{ background:rgba(251,247,239,.82); backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 1px 0 var(--hairline-2); padding-block:.7rem; }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--display); font-weight:560;
  font-size:1.18rem; letter-spacing:-.01em; color:var(--ink); }
.brand svg{ width:34px; height:34px; flex:none; }
.brand b{ font-weight:560; }
.brand span{ color:var(--teal); }
.nav-links{ display:flex; align-items:center; gap:2rem; }
.nav-links a{ font-size:.95rem; font-weight:500; color:var(--ink-soft); position:relative; transition:color var(--t-fast); }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-5px; height:2px; width:100%;
  background:var(--coral); transform:scaleX(0); transform-origin:left; transition:transform var(--t-fast) var(--ease-premium); }
.nav-links a:hover,.nav-links a.active{ color:var(--ink); }
.nav-links a:hover::after,.nav-links a.active::after{ transform:scaleX(1); }
.nav-cta{ display:flex; align-items:center; gap:1rem; }
.nav-burger{ display:none; width:44px; height:44px; border-radius:12px; align-items:center; justify-content:center;
  border:1.5px solid var(--hairline); }
.nav-burger span{ width:20px; height:1.8px; background:var(--ink); position:relative; transition:.3s; }
.nav-burger span::before,.nav-burger span::after{ content:""; position:absolute; left:0; width:20px; height:1.8px; background:var(--ink); transition:.3s; }
.nav-burger span::before{ top:-6px; } .nav-burger span::after{ top:6px; }
.nav-burger.open span{ background:transparent; }
.nav-burger.open span::before{ top:0; transform:rotate(45deg); }
.nav-burger.open span::after{ top:0; transform:rotate(-45deg); }

/* mobile drawer */
.drawer{ position:fixed; inset:0; z-index:999; background:var(--teal-ink); color:var(--sand);
  display:flex; flex-direction:column; justify-content:center; gap:.4rem; padding:2rem var(--gutter);
  transform:translateY(-100%); transition:transform .55s var(--ease-premium); visibility:hidden; }
.drawer.open{ transform:translateY(0); visibility:visible; }
.drawer a{ font-family:var(--display); font-size:2rem; padding:.5rem 0; color:var(--sand);
  border-bottom:1px solid rgba(255,255,255,.1); }
.drawer .btn{ margin-top:1.4rem; align-self:flex-start; }

/* ---------- footer ---------- */
.site-footer{ background:var(--teal-ink); color:var(--aqua-mist); padding-block:5rem 2.5rem; position:relative; overflow:hidden; }
.footer-glow{ position:absolute; width:600px; height:600px; border-radius:50%; filter:blur(120px);
  background:radial-gradient(circle,rgba(25,181,201,.22),transparent 70%); top:-200px; right:-100px; pointer-events:none; }
.footer-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.5rem; position:relative; z-index:1;
  padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand .brand{ color:#fff; margin-bottom:1.1rem; }
.footer-brand .brand span{ color:var(--teal-bright); }
.footer-brand p{ color:rgba(221,238,240,.7); max-width:34ch; font-size:.96rem; }
.footer-col h4{ color:#fff; font-family:var(--sans); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; margin-bottom:1.1rem; opacity:.75; }
.footer-col a{ display:block; padding:.32rem 0; color:rgba(221,238,240,.78); font-size:.96rem; transition:color var(--t-fast),transform var(--t-fast); }
.footer-col a:hover{ color:#fff; transform:translateX(3px); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  padding-top:1.8rem; font-size:.85rem; color:rgba(221,238,240,.55); position:relative; z-index:1; }
.footer-bottom .areas{ font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; }

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(28px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .9s var(--ease-premium), transform .9s var(--ease-premium); }
html.no-motion .reveal{ opacity:1 !important; transform:none !important; }

/* ---------- accessibility / reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .cursor-dot,.cursor-ring{ display:none; }
}

/* ---------- responsive header ---------- */
@media (max-width:920px){
  .nav-links, .nav-cta .btn{ display:none; }
  .nav-burger{ display:flex; }
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .footer-top{ grid-template-columns:1fr; }
}