/* Hammerhead Flow Co. — v2 visual layer.
   Loaded AFTER each page's own <style>. Pure presentation: no markup, IDs,
   form names or scripts depend on this file. Remove the <link> to revert. */
:root{
  --hf-navy:#001A33; --hf-navy-2:#022A52; --hf-deep:#00111F; --hf-bright:#009CE4; --hf-royal:#003F92;
  --hf-tick:rgba(0,63,146,.55);
  --hf-photo-hero:url("images/photos/obx-coastline.jpg");
  --hf-photo-page:url("images/photos/obx-beach-2.jpg");
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--hf-tick:rgba(77,195,245,.6)}}
:root[data-theme="dark"]{--hf-tick:rgba(77,195,245,.6)}

@keyframes hf-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes hf-flow{from{background-position:0 0}to{background-position:64px 0}}
@keyframes hf-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- Type scale: bigger, louder condensed headlines ---------- */
h2{font-size:clamp(2.4rem,5.4vw,4.2rem) !important;line-height:.92 !important;letter-spacing:-.005em !important}
.kicker{display:flex;align-items:center;gap:12px;letter-spacing:.18em}
.kicker::before{content:"";width:34px;height:2px;background:currentColor;flex:none}

/* ---------- Square, blueprint-style objects ---------- */
.btn,.card,.status,.res-card,.buyer,.steps li,.sf-step,.formcard,.owner,.team-card,.notice-box,.mapcard,
.receive-list li,.scale li,.creds li,.chip span,.choice span,.callout,.tablewrap,.badge,.regional,.sf-why,
input,select,textarea,.stepper button,.portrait{border-radius:0 !important}
.card,.status,.res-card,.buyer,.team-card,.notice-box,.owner,.formcard,.mapcard{
  background-image:
    linear-gradient(var(--hf-tick),var(--hf-tick)),linear-gradient(var(--hf-tick),var(--hf-tick)),
    linear-gradient(var(--hf-tick),var(--hf-tick)),linear-gradient(var(--hf-tick),var(--hf-tick)),
    linear-gradient(var(--hf-tick),var(--hf-tick)),linear-gradient(var(--hf-tick),var(--hf-tick)),
    linear-gradient(var(--hf-tick),var(--hf-tick)),linear-gradient(var(--hf-tick),var(--hf-tick));
  background-size:12px 1px,1px 12px,12px 1px,1px 12px,12px 1px,1px 12px,12px 1px,1px 12px;
  background-position:6px 6px,6px 6px,calc(100% - 6px) 6px,calc(100% - 6px) 6px,6px calc(100% - 6px),6px calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) calc(100% - 6px);
  background-repeat:no-repeat;
}
.card,.res-card,.buyer{transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover,.res-card:hover,.buyer:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,26,51,.14)}
.mapcard{background-image:none}

/* ---------- Buttons ---------- */
.btn{letter-spacing:.06em}
.btn-blue,.btn-cta,.nav .btn{background:var(--hf-bright) !important;color:#001A33 !important;box-shadow:0 10px 30px rgba(0,156,228,.35) !important;border-radius:0 !important}
.btn-blue:hover,.btn-cta:hover,.nav .btn:hover{background:#27B3F2 !important;transform:translateY(-2px)}
.btn-navy{border:2px solid rgba(255,255,255,.55) !important}

/* ---------- Announcement + nav (dark) ---------- */
.announce{background:var(--hf-deep);border-bottom:1px solid #0D3A66}
.announce strong{color:var(--hf-bright)}
.announce span{color:#D6E3F0}
.nav,.subnav{background:rgba(0,26,51,.94) !important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid #0D3A66 !important}
.nav li a,.subnav .links a{color:#C4D3E3 !important}
.nav li a:hover,.subnav .links a:hover,.subnav .links a[aria-current="page"]{color:#4DC3F5 !important}
.subnav .home{color:#fff !important}
.subnav .home::before{content:"";width:36px;height:36px;background:url("images/hammerhead-logo-transparent.png") center/contain no-repeat;flex:none}

/* ---------- Homepage hero: photo + navy ---------- */
.hero{position:relative;color:#fff !important;border-bottom:0 !important;overflow:hidden;
  background:linear-gradient(100deg,rgba(0,17,31,.97) 0%,rgba(0,26,51,.88) 48%,rgba(0,26,51,.55) 100%),var(--hf-photo-hero) center/cover no-repeat,#001A33 !important}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:var(--hf-bright)}
.hero .wrap{max-width:1240px;padding-top:56px !important;padding-bottom:72px !important}
@media (min-width:860px){.hero .wrap{padding-top:80px !important;padding-bottom:96px !important}}
.hero .logo{filter:drop-shadow(0 20px 40px rgba(0,0,0,.45));animation:hf-rise .8s both}
@media (min-width:860px){.hero-copy{border-left:2px solid var(--hf-bright) !important}}
.hero-copy{animation:hf-rise .8s .1s both}
.hero h1{color:#fff !important;font-size:clamp(3.2rem,9vw,6.4rem) !important;line-height:.86 !important}
.hero h1 span{color:var(--hf-bright) !important}
.hero .tag{color:#4DC3F5 !important}
.hero .sub,.hero .fine{color:#C4D3E3 !important}
.hero .multi,.hero .area,.hero .approved{color:#fff !important}
.hero .multi a,.hero .area a,.hero .fine a{color:#4DC3F5 !important}
.hero .approved{background:rgba(30,122,70,.18);border:1px solid rgba(95,203,138,.45);padding:10px 14px;display:inline-flex}
.hero .approved svg{color:#5FCB8A !important}
.hero .bluerule{background:linear-gradient(90deg,var(--hf-bright),rgba(0,156,228,0)) !important}
.hero .creds li{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.hero .creds li.hi{background:var(--hf-bright);border-color:var(--hf-bright);color:#001A33}

/* ---------- Trust strip → bright band ---------- */
.trust{background:var(--hf-bright) !important;border:0 !important}
.trust li,.trust svg{color:#001A33 !important}

/* ---------- Town marquee (markup in index.html) ---------- */
.hf-marquee{background:var(--hf-deep);color:#fff;overflow:hidden;border-bottom:1px solid #0D3A66}
.hf-marquee .track{display:flex;width:max-content;animation:hf-marquee 46s linear infinite}
.hf-marquee ul{display:flex;align-items:center;list-style:none;margin:0;padding:14px 0}
.hf-marquee li{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:1.25rem;white-space:nowrap;padding:0 22px;display:flex;align-items:center;gap:10px}
.hf-marquee li::after{content:"";width:7px;height:7px;background:var(--hf-bright);transform:rotate(45deg);margin-left:22px}
.hf-marquee li b{font-weight:700;font-size:.72rem;letter-spacing:.14em;padding:2px 7px;border:1px solid currentColor}
.hf-marquee li b.ok{color:#5FCB8A}.hf-marquee li b.wait{color:#8FB6DD}

/* ---------- Dark sections pick up photo + flowing line ---------- */
.process,.sf,.portfolio{position:relative}
.process::before,.sf::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:repeating-linear-gradient(90deg,var(--hf-bright) 0 32px,transparent 32px 64px);animation:hf-flow 1.4s linear infinite}
.steps li::before{font-size:3.4rem !important}
.steps li{background:rgba(2,42,82,.7) !important}

/* ---------- Full-bleed photo band (markup in index.html) ---------- */
.hf-photos{display:grid;grid-template-columns:1fr;gap:0;background:var(--hf-deep)}
@media (min-width:760px){.hf-photos{grid-template-columns:1fr 1fr}}
.hf-photos figure{position:relative;margin:0;min-height:380px;display:flex;align-items:flex-end;overflow:hidden}
.hf-photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 6s ease}
.hf-photos figure:hover img{transform:scale(1.06)}
.hf-photos figure::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,17,31,.95) 0%,rgba(0,17,31,.35) 60%,rgba(0,17,31,.1) 100%)}
.hf-photos figcaption{position:relative;z-index:2;padding:32px clamp(20px,4vw,48px) 36px;color:#fff;display:flex;flex-direction:column;gap:6px}
.hf-photos .st{font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:.95rem;color:#4DC3F5}
.hf-photos .nm{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(2.4rem,5vw,3.8rem);line-height:.9}
.hf-photos .ds{color:#D6E3F0;font-size:1rem;max-width:44ch}
.hf-photos .cr{position:absolute;z-index:2;top:12px;right:14px;font-size:.7rem;color:rgba(255,255,255,.7)}
.hf-photos .cr a{color:inherit}

/* ---------- Owner portrait ---------- */
.portrait{border:0 !important;box-shadow:16px 16px 0 var(--hf-bright),0 24px 50px rgba(0,26,51,.25) !important}

/* ---------- FAQ ---------- */
.faq summary{font-size:1.5rem !important}
.faq summary::after{border-radius:0 !important;background:var(--hf-navy);color:#fff !important;border-color:var(--hf-navy) !important}

/* ---------- Form ---------- */
.formhead{background:linear-gradient(100deg,rgba(0,17,31,.96),rgba(0,26,51,.85)),var(--hf-photo-page) center/cover !important}
.formhead h3{font-size:2.2rem !important}

/* ---------- Footer ---------- */
footer,body > footer{background:var(--hf-deep) !important}
.foot .flogo{background:transparent !important;padding:0 !important;width:180px !important;content:url("images/hammerhead-logo-transparent.png")}
.promise{background:var(--hf-bright) !important;color:#001A33}
.promise b{color:#001A33 !important}.promise i{color:#003F92 !important}

/* ---------- Secondary pages ---------- */
.pagehead{position:relative;color:#fff;border-bottom:0 !important;
  background:linear-gradient(100deg,rgba(0,17,31,.96) 0%,rgba(0,26,51,.86) 55%,rgba(0,26,51,.6) 100%),var(--hf-photo-page) center/cover no-repeat,#001A33 !important}
.pagehead::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:var(--hf-bright)}
.pagehead .wrap{padding-top:72px !important;padding-bottom:72px !important}
.pagehead h1{color:#fff;font-size:clamp(2.8rem,7.5vw,5.2rem) !important;line-height:.88 !important}
.pagehead .lead,.pagehead p{color:#D6E3F0 !important}
.pagehead .kicker{color:#4DC3F5 !important}
.pagehead .bluerule{background:linear-gradient(90deg,var(--hf-bright),rgba(0,156,228,0)) !important}
.pagehead a{color:#4DC3F5}
.ctaband{background:linear-gradient(100deg,rgba(0,17,31,.96),rgba(0,26,51,.8)),var(--hf-photo-hero) center/cover !important;border-top:4px solid var(--hf-bright)}
thead th{background:var(--hf-deep) !important}
.callout{border-left-width:4px}

/* Design-option switcher (preview only) */
.hf-optbar{position:fixed;right:16px;bottom:16px;z-index:999;display:flex;align-items:center;gap:4px;background:#001A33;color:#fff;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.35);font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.9rem}
.hf-optbar span{padding:0 10px}
.hf-optbar a{display:grid;place-items:center;width:34px;height:34px;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.3)}
.hf-optbar a:hover{background:#009CE4;color:#001A33}

/* ================= v2 full reformat (homepage) ================= */
/* Nav: logo left, links, CTA right */
.hf-navlogo{display:block;flex:none}
.hf-navlogo img{display:block;height:64px;width:auto}
.nav .wrap{max-width:1240px}
@media (min-width:900px){
  .nav .wrap{flex-direction:row !important;gap:28px !important;padding-top:8px !important;padding-bottom:8px !important}
  .nav ul{margin-left:auto !important;gap:22px !important}
  .nav .btn{min-width:0 !important;width:auto !important;font-size:1.05rem !important;min-height:46px !important;padding:0 20px !important}
}
@media (min-width:900px) and (max-width:1499px){.nav ul{display:none !important}.nav .btn{margin-left:auto}}
@media (min-width:900px){.nav .btn{flex:none !important;white-space:nowrap !important;overflow:visible}.nav ul{flex:0 1 auto;min-width:0}}
@media (min-width:1500px){.nav .wrap{max-width:none;padding-left:28px;padding-right:28px}}
/* fit the menu: keep the key links, tuck the rest behind the page scroll, shorten the button when tight */
@media (min-width:1500px){.nav ul{gap:16px !important;flex-wrap:nowrap !important}.nav ul a{font-size:.95rem;white-space:nowrap}.nav .wrap{gap:20px !important}}
@media (min-width:1500px) and (max-width:2199px){.nav ul li:has(> a[href="#process"]),.nav ul li:has(> a[href="#about"]),.nav ul li:has(> a[href="#owner"]),.nav ul li:has(> a[href="#faq"]){display:none}}
@media (min-width:1500px) and (max-width:1799px){.nav ul li:has(> a[href="#area"]),.nav ul li:has(> a[href="#resources"]){display:none}}
.nav .btn .hf-short{display:none}
@media (max-width:1799px){.nav .btn .hf-long{display:none}.nav .btn .hf-short{display:inline}}
@media (max-width:899px){.hf-navlogo img{height:52px}}

/* Hero: copy left, approval plate right */
@media (min-width:860px){.hero .wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr) !important;gap:56px !important}
  .hero-copy{order:-1;padding-left:0 !important;border-left:0 !important}}
.hf-plate{background:#fff;color:#0A1A2E;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.45);transform:rotate(1.6deg);
  display:flex;flex-direction:column;gap:14px;animation:hf-rise .8s .2s both;position:relative;
  background-image:linear-gradient(#003F92,#003F92),linear-gradient(#003F92,#003F92),linear-gradient(#003F92,#003F92),linear-gradient(#003F92,#003F92);
  background-size:14px 2px,2px 14px,14px 2px,2px 14px;background-position:8px 8px,8px 8px,calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) calc(100% - 8px);background-repeat:no-repeat}
.hf-plate-head{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:2px solid #0A1A2E;padding-bottom:12px}
.hf-plate-head b{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:1.6rem;line-height:1}
.hf-plate-head span{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#4A5A6E;margin-top:5px}
.hf-plate-head img{height:52px;width:auto}
.hf-plate table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:0}
.hf-plate th{text-align:left;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#4A5A6E;padding:6px 0;border-bottom:1px solid #C9D4E0;background:none !important;font-family:"Barlow",sans-serif}
.hf-plate th:last-child,.hf-plate td:last-child{text-align:right}
.hf-plate td{padding:11px 0;border-bottom:1px solid #E2E9F0;font-weight:600;vertical-align:top;background:none !important}
.hf-plate td small{display:block;font-weight:400;font-size:.78rem;color:#4A5A6E;margin-top:2px}
.hf-plate td .ok,.hf-plate td .wait{font-family:"Barlow Condensed",sans-serif;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;padding:3px 8px;white-space:nowrap}
.hf-plate td .ok{background:#1E7A46;color:#fff}
.hf-plate td .wait{border:1.5px solid #AFAFB1;color:#4A5A6E}
.hf-plate-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.8rem;color:#4A5A6E}
.hf-stamp{border:3px solid #009CE4;color:#003F92;font-family:"Barlow Condensed",sans-serif;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:1.5rem;padding:2px 12px;transform:rotate(-7deg);white-space:nowrap}
.hero .logo{display:none}

/* Process: numbered squares on a flowing line */
.steps{position:relative;gap:28px !important}
@media (min-width:800px){.steps::before{content:"";position:absolute;left:0;right:0;top:44px;height:3px;
  background:repeating-linear-gradient(90deg,#009CE4 0 32px,transparent 32px 64px);animation:hf-flow 1.4s linear infinite}}
.steps li{background:transparent !important;border:0 !important;padding:0 !important;position:relative}
.steps li::before{width:88px;height:88px;display:grid !important;place-items:center;background:#009CE4;color:#001A33 !important;font-size:2.6rem !important;margin-bottom:18px !important;position:relative;z-index:1}
.steps strong{font-size:1.7rem !important}
.regional{background:rgba(2,42,82,.7) !important;border-left:0 !important;border-top:3px solid #009CE4 !important}

/* Who we serve: dark section with photo cards */
.serve{background:#001A33;color:#fff}
.serve h2{color:#fff}.serve .kicker{color:#4DC3F5}
.serve .lead,.serve .also{color:#C4D3E3 !important}
.serve .lead a{color:#4DC3F5}
.serve .card{background-color:transparent !important;border:1px solid rgba(255,255,255,.18) !important;border-top:3px solid #009CE4 !important;padding:0 !important;overflow:hidden;
  --hf-tick:rgba(77,195,245,.7);color:#fff}
.serve .card h3{color:#fff;font-size:1.6rem;padding:20px 20px 0}
.serve .card p{color:#C4D3E3 !important;padding:0 20px 22px}
.hf-ph{height:220px;overflow:hidden;background:#022A52}
.hf-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.serve .card:hover .hf-ph img{transform:scale(1.06)}
@media (min-width:960px){.serve .grid{grid-template-columns:repeat(4,1fr) !important}.serve .card{grid-column:auto !important}}

/* Owner: offset-shadow portrait already; bigger name */
.owner-copy .name{font-size:clamp(2.8rem,6vw,4.4rem) !important}

/* Bright CTA band */
.hf-ctaband{background:#009CE4;color:#001A33;padding:80px 0}
.hf-ctaband .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px 40px;max-width:1240px}
.hf-ctaband h2{color:#001A33;margin:0;font-size:clamp(2.8rem,6.5vw,5rem) !important}
.hf-ctarow{display:flex;flex-wrap:wrap;gap:12px}
.hf-btn-dark{background:#001A33 !important;color:#fff !important;border-radius:0 !important}
.hf-btn-dark:hover{background:#022A52 !important}
.hf-btn-ghost{border:2px solid #001A33 !important;color:#001A33 !important;background:transparent;border-radius:0 !important}
.hf-btn-ghost:hover{background:rgba(0,26,51,.08)}
.hf-ctaband p{flex-basis:100%;margin:0;font-weight:600}

/* Wider containers to match v2 */
.wrap{max-width:1240px}

@media (prefers-reduced-motion:reduce){.steps::before{animation:none}.hf-plate{animation:none}}
@media (prefers-reduced-motion:reduce){.hf-marquee .track{animation:none}.hero .logo,.hero-copy{animation:none}}