/* =========================================================================
   SPORT FISHING FL — "Deep Gulf" design system
   Tokens in :root → one edit re-themes the whole site.
   ========================================================================= */

:root{
  /* ---- color ---- */
  --abyss:        #0A1A24;   /* page background */
  --panel:        #0E2A38;   /* cards / sections */
  --panel-2:      #13384A;   /* raised surfaces / hover */
  --teal:         #1FA39B;   /* primary */
  --teal-bright:  #3FD0C6;   /* highlight / glow */
  --gold:         #E0B24C;   /* accent / catch-light */
  --gold-soft:    #f0cf86;
  --foam:         #EAF2F2;   /* primary text on dark */
  --slate:        #8FA8AD;   /* secondary text */
  --line:         rgba(234,242,242,.12);
  --line-strong:  rgba(234,242,242,.22);

  /* ---- type ---- */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ---- shape ---- */
  --r-card: 16px;
  --r-pill: 999px;
  --shadow: 0 24px 60px -28px rgba(0,0,0,.75);
  --shadow-lg: 0 40px 100px -40px rgba(0,0,0,.85);

  /* ---- layout ---- */
  --maxw: 1240px;
  --gutter: clamp(1.1rem, 4vw, 2.6rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html.lenis, html.lenis body{ scroll-behavior:auto !important; }   /* Lenis guard */
body{
  font-family:var(--sans);
  background:var(--abyss);
  color:var(--foam);
  line-height:1.7;
  font-size:1.02rem;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
input,textarea,select{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--teal-bright); outline-offset:3px; border-radius:4px; }

/* ---------- type ---------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.05; letter-spacing:-.01em; }
h1{ font-size:clamp(2.6rem,7vw,5.4rem); }
h2{ font-size:clamp(2rem,4.4vw,3.3rem); }
h3{ font-size:clamp(1.3rem,2.4vw,1.8rem); line-height:1.15; }
p{ color:var(--foam); }
.lede{ font-size:clamp(1.1rem,1.6vw,1.35rem); color:var(--slate); line-height:1.6; }
.eyebrow{
  font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--teal-bright); display:inline-flex; align-items:center; gap:.6rem;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--gold); display:inline-block; }
.text-gold{ color:var(--gold); }
.text-teal{ color:var(--teal-bright); }
.serif{ font-family:var(--serif); }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); position:relative; }
.section--tight{ padding-block:clamp(3rem,6vw,5rem); }
.center{ text-align:center; }
.measure{ max-width:62ch; }
.section-head{ max-width:760px; margin-bottom:clamp(2rem,4vw,3.2rem); }
.section-head.center{ margin-inline:auto; }
.section-head .eyebrow{ margin-bottom:1rem; }
.section-head p{ margin-top:1rem; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.7rem; border-radius:var(--r-pill); font-weight:600; font-size:.98rem;
  letter-spacing:.01em; position:relative; overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
  white-space:nowrap; line-height:1;
}
.btn svg{ width:18px; height:18px; }
.btn--primary{ background:var(--gold); color:#1a1205; box-shadow:0 10px 30px -10px rgba(224,178,76,.6); }
.btn--primary::after{
  content:""; position:absolute; top:0; left:-80%; width:55%; height:100%; transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transition:left .55s var(--ease);
}
.btn--primary:hover{ transform:translateY(-3px); box-shadow:0 16px 40px -10px rgba(224,178,76,.7); }
.btn--primary:hover::after{ left:130%; }
.btn--ghost{ background:transparent; color:var(--foam); border:1px solid var(--line-strong); }
.btn--ghost:hover{ border-color:var(--teal); background:rgba(31,163,155,.1); transform:translateY(-3px); }
.btn--teal{ background:var(--teal); color:#04201e; box-shadow:0 10px 30px -10px rgba(31,163,155,.6); }
.btn--teal:hover{ transform:translateY(-3px); background:var(--teal-bright); }
.btn--lg{ padding:1.15rem 2.2rem; font-size:1.05rem; }
.btn--block{ width:100%; }

/* ---------- header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:200; padding-block:1.1rem;
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(8,21,29,.82); backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line); 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(--serif); font-size:1.3rem; letter-spacing:.02em; z-index:2; }
.brand b{ font-weight:600; }
.brand .brand__fl{ color:var(--gold); }
.brand__mark{ width:34px; height:34px; flex:none; }
.nav__links{ display:flex; align-items:center; gap:1.9rem; }
.nav__links a{ font-size:.92rem; font-weight:500; color:var(--foam); position:relative; padding:.3rem 0; opacity:.88; transition:opacity .25s; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1.5px; background:var(--gold); transition:width .3s var(--ease); }
.nav__links a:hover,.nav__links a[aria-current="page"]{ opacity:1; }
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{ width:100%; }
.nav__cta{ display:flex; align-items:center; gap:1rem; }
.nav__phone{ font-weight:600; font-size:.92rem; color:var(--foam); display:inline-flex; align-items:center; gap:.4rem; }
.nav__phone svg{ width:15px; height:15px; color:var(--teal-bright); }

/* burger */
.burger{ display:none; width:42px; height:42px; border:1px solid var(--line-strong); border-radius:10px; align-items:center; justify-content:center; z-index:2; }
.burger span{ display:block; width:18px; height:2px; background:var(--foam); position:relative; transition:.3s; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--foam); transition:.3s; }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.nav-open .burger span{ background:transparent; }
.nav-open .burger span::before{ top:0; transform:rotate(45deg); }
.nav-open .burger span::after{ top:0; transform:rotate(-45deg); }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:150; background:rgba(8,21,29,.97); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; justify-content:center; gap:.4rem; padding:var(--gutter);
  transform:translateX(100%); transition:transform .45s var(--ease); visibility:hidden;
}
.nav-open .drawer{ transform:translateX(0); visibility:visible; }
.drawer a{ font-family:var(--serif); font-size:1.7rem; padding:.55rem 0; border-bottom:1px solid var(--line); }
.drawer .btn{ margin-top:1.4rem; }

/* ---------- footer ---------- */
.site-footer{ position:relative; background:var(--panel); border-top:1px solid var(--line); overflow:hidden; padding-top:clamp(3.5rem,7vw,6rem); }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:2.5rem; position:relative; z-index:2; }
.footer-grid h4{ font-family:var(--sans); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); margin-bottom:1.2rem; }
.footer-grid a{ display:block; color:var(--slate); padding:.3rem 0; font-size:.95rem; transition:color .25s; }
.footer-grid a:hover{ color:var(--foam); }
.footer-about p{ color:var(--slate); margin:1rem 0 1.4rem; max-width:34ch; font-size:.95rem; }
.footer-contact-line{ display:flex; align-items:center; gap:.6rem; color:var(--foam); font-weight:500; margin-bottom:.6rem; }
.footer-contact-line svg{ width:16px; height:16px; color:var(--teal-bright); flex:none; }
.footer-bottom{ position:relative; z-index:2; border-top:1px solid var(--line); margin-top:clamp(3rem,5vw,4.5rem); padding-block:1.6rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; color:var(--slate); font-size:.85rem; }
.footer-watermark{
  position:absolute; left:50%; bottom:-3vw; transform:translateX(-50%); z-index:1; white-space:nowrap;
  font-family:var(--serif); font-size:19vw; line-height:.8; color:transparent;
  -webkit-text-stroke:1px rgba(234,242,242,.06); pointer-events:none; user-select:none;
}

/* ---------- cards ---------- */
.card{
  position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card);
  padding:1.8rem; overflow:hidden; transition:transform .4s var(--ease), border-color .4s, background .4s;
}
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(31,163,155,.6),transparent); opacity:0; transition:opacity .4s;
}
.card:hover{ transform:translateY(-6px); border-color:var(--line-strong); background:var(--panel-2); }
.card:hover::before{ opacity:1; }

/* ---------- grain + atmosphere ---------- */
.grain{
  position:fixed; inset:0; z-index:300; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.glow{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; pointer-events:none; z-index:0; }
.glow--teal{ background:radial-gradient(circle,rgba(31,163,155,.5),transparent 70%); }
.glow--gold{ background:radial-gradient(circle,rgba(224,178,76,.32),transparent 70%); }

/* ---------- custom cursor ---------- */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; z-index:9000; border-radius:50%; transform:translate(-50%,-50%); opacity:0; transition:opacity .3s; }
.cursor-dot{ width:7px; height:7px; background:var(--teal-bright); }
.cursor-ring{ width:38px; height:38px; border:1.5px solid var(--gold); transition:width .25s var(--ease),height .25s var(--ease),background .25s,opacity .3s; }
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor .btn, html.has-cursor [data-tilt]{ cursor:none; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select{ cursor:auto; }
html.has-cursor.cursor-active .cursor-dot, html.has-cursor.cursor-active .cursor-ring{ opacity:1; }
.cursor-hover .cursor-ring{ width:60px; height:60px; background:rgba(224,178,76,.12); }
.cursor-down .cursor-ring{ width:28px; height:28px; }

/* ---------- reveals ---------- */
[data-reveal]{ opacity:0; will-change:transform,opacity; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ---------- forms ---------- */
.field{ margin-bottom:1.2rem; }
.field label{ display:block; font-size:.8rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--slate); margin-bottom:.5rem; }
.field input,.field textarea,.field select{
  width:100%; padding:.95rem 1.1rem; background:rgba(234,242,242,.04); border:1px solid var(--line-strong);
  border-radius:12px; transition:border-color .25s, background .25s;
}
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--teal); background:rgba(31,163,155,.06); }
.field textarea{ min-height:130px; resize:vertical; }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.form-note{ font-size:.82rem; color:var(--slate); margin-top:.6rem; }
.form-success{ display:none; padding:1rem 1.2rem; border-radius:12px; background:rgba(31,163,155,.12); border:1px solid var(--teal); color:var(--foam); margin-top:1rem; }
.form-success.show{ display:block; }

/* ---------- pills / tags ---------- */
.tag{ display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .85rem; border-radius:var(--r-pill); background:rgba(31,163,155,.1); border:1px solid var(--line); font-size:.8rem; font-weight:600; color:var(--teal-bright); }
.tag--gold{ background:rgba(224,178,76,.1); color:var(--gold); }

/* ---------- breadcrumb ---------- */
.crumb{ font-size:.82rem; color:var(--slate); padding-top:1rem; }
.crumb a:hover{ color:var(--foam); }
.crumb span{ margin:0 .4rem; opacity:.5; }

/* ---------- utility ---------- */
.grid{ display:grid; gap:1.4rem; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.flow > * + *{ margin-top:1rem; }
.divider{ height:1px; background:var(--line); border:0; }

/* ---------- responsive ---------- */
@media (max-width:960px){
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:2rem; }
}
@media (max-width:780px){
  .nav__links,.nav__cta .btn,.nav__phone{ display:none; }
  .burger{ display:flex; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .field--row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
}