/* The Boat Club of Texas — public site.
   Same navy/brass palette as the member app, so the website and the app read as
   one business. Photography is his own, off boatcluboftexas.com, and every shot
   carries the club's gold anchor watermark — which is what stops this looking
   like a template with a logo dropped in. */
:root{
  --navy:#0E2436; --navy-deep:#071726; --gold:#937104; --gold-lt:#B8912A;
  --ink:#10161C; --muted:#42596A; --line:#CFE0E8; --bg:#F2F8FB; --card:#FFFFFF;
  --hair:rgba(14,54,74,.14);
  --shadow:0 1px 2px rgba(14,36,54,.06), 0 8px 24px rgba(14,36,54,.08);
  --shadow-lg:0 2px 8px rgba(14,36,54,.10), 0 24px 56px rgba(14,36,54,.18);
  --wrap:1120px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%; display:block}
h1,h2,h3{margin:0 0 12px; line-height:1.15; letter-spacing:-.5px}
h2{font-size:clamp(25px,4vw,34px)}
h3{font-size:20px; letter-spacing:-.2px}
p{margin:0 0 14px}
a{color:#0B4E6B}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:99; background:#fff; padding:12px 16px; border-radius:8px}

/* ------------------------------------------------------------- header */
.top{
  position:sticky; top:0; z-index:40; background:rgba(14,36,54,.96);
  -webkit-backdrop-filter:saturate(160%) blur(12px); backdrop-filter:saturate(160%) blur(12px);
  color:#fff; display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:11px 16px; padding-top:calc(env(safe-area-inset-top) + 11px);
}
.brand{display:flex; align-items:center; gap:11px; color:#fff; text-decoration:none; font-weight:800}
.brand img{width:44px; height:44px; background:#fff; border-radius:50%; padding:2px}
.brand small{display:block; font-weight:700; color:var(--gold-lt); font-size:11px;
             letter-spacing:.1em; text-transform:uppercase; margin-top:2px}
.burger{display:flex; flex-direction:column; justify-content:center; gap:5px; width:48px; height:48px;
        background:transparent; border:0; cursor:pointer; padding:0 10px}
.burger span{display:block; height:2px; background:#fff; border-radius:2px; transition:.2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#nav{display:none; position:absolute; top:100%; left:0; right:0; background:var(--navy);
     flex-direction:column; padding:6px 10px 14px; box-shadow:var(--shadow-lg)}
#nav.open{display:flex}
#nav a{color:#fff; text-decoration:none; font-weight:700; padding:15px 8px; min-height:52px;
       border-bottom:1px solid rgba(255,255,255,.10)}
#nav a[aria-current=page]{color:var(--gold-lt)}
#nav .navcall{color:var(--navy); background:var(--gold-lt); border-radius:10px; text-align:center;
              margin-top:12px; border:0}
@media(min-width:900px){
  .burger{display:none}
  #nav{display:flex; position:static; flex-direction:row; align-items:center; gap:6px;
       background:transparent; padding:0; box-shadow:none}
  #nav a{border:0; padding:12px 13px; min-height:44px; font-size:15.5px}
  #nav .navcall{margin-top:0; padding:12px 18px}
}

/* --------------------------------------------------------------- hero */
.hero{position:relative; background:var(--navy); isolation:isolate}
.hero img{width:100%; height:clamp(320px,52vw,520px); object-fit:cover}
/* The hero text is absolutely positioned over the image, so if it is taller than
   the image it overflows upward and disappears behind the sticky header. The
   home page headline runs to three lines on a phone and was losing its first
   line entirely. Give the shortest viewports enough image to sit on. */
/* 520, not 452. The hero text is absolutely positioned and bottom-aligned, so
   when it grows TALLER than the image the overflow goes UPWARD and slides behind
   the sticky header — the headline simply disappears. That is exactly what the
   second CTA ("Members: book a boat", added 2026-08-12) did: the button block is
   204px on a phone because the two buttons stack, taking the text block to 465px
   against a 452px image. Measured on a 390px iPhone: 13px of the h1 was hidden.
   Keep this comfortably above the tallest the text block can get. */
@media(max-width:559px){ .hero img{height:520px} }
.hero .hwrap{position:absolute; inset:0; display:flex; align-items:flex-end;
  background:linear-gradient(180deg,rgba(7,23,38,.18) 0%,rgba(7,23,38,.42) 45%,rgba(7,23,38,.86) 100%)}
.hero .hinner{max-width:var(--wrap); margin:0 auto; width:100%; padding:0 16px 34px}
.hero h1{color:#fff; font-size:clamp(31px,6.4vw,58px); font-weight:800; max-width:26ch; text-wrap:balance;
         text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero .hsub{color:#E9F2F7; font-weight:600; font-size:clamp(16px,2.2vw,20px); margin-top:8px;
            text-shadow:0 1px 8px rgba(0,0,0,.55)}
.hcta{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
/* On a phone the two calls-to-action wrap onto separate lines and, sized to
   their own text, land as a ragged staircase. Full width lines them up and
   makes both a proper thumb target. */
@media(max-width:559px){ .hcta .btn{flex:1 1 100%} }

.btn{display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
     border-radius:12px; padding:15px 24px; min-height:54px; font-size:16.5px; font-weight:800;
     border:2px solid transparent; cursor:pointer}
.btn.gold{background:var(--gold); color:#fff}
.btn.gold:hover{background:#7d6003}
.btn.ghost{background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.62)}
main .btn.ghost{background:#fff; color:var(--navy); border-color:var(--navy)}
.btn[disabled]{opacity:.6}

/* ------------------------------------------------------------ layout */
.wrap{max-width:var(--wrap); margin:0 auto; padding:52px 16px}
.wrap.alt{background:#fff; max-width:none}
.wrap.alt > *{max-width:var(--wrap); margin-left:auto; margin-right:auto}
.lead{font-size:clamp(18px,2.3vw,21px); color:#2A3B47; max-width:62ch}
.wrap p{max-width:70ch}
.more{font-weight:800; text-decoration:none; display:inline-block; margin-top:6px}
.more:hover{text-decoration:underline}

.grid{display:grid; gap:18px; margin-top:24px}
.grid.two{grid-template-columns:1fr}
.grid.three{grid-template-columns:1fr}
@media(min-width:640px){ .grid.three{grid-template-columns:1fr 1fr} }
@media(min-width:960px){ .grid.three{grid-template-columns:repeat(3,1fr)} .grid.two{grid-template-columns:1fr 1fr; gap:34px} }

.card{background:var(--card); border:1px solid var(--hair); border-radius:18px;
      box-shadow:var(--shadow); overflow:hidden}
.card.pad{padding:22px}
.card.pad h3{margin-bottom:6px}
.card.pad p:last-child{margin-bottom:0}
a.card.link{text-decoration:none; color:inherit; display:block; transition:transform .16s, box-shadow .16s}
a.card.link:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.notice{border-left:8px solid var(--gold); background:#FFFDF6}
.meta{color:var(--muted); font-weight:700; font-size:15px}

/* --------------------------------------------------------- the fleet */
.fleet{grid-template-columns:1fr}
@media(min-width:640px){ .fleet{grid-template-columns:1fr 1fr} }
@media(min-width:1000px){ .fleet{grid-template-columns:repeat(3,1fr)} }
/* Reviewers of the incumbent's app complain their boat photos are cropped through
   the middle. 3:2, whole boat, never a slice. */
.boat img{width:100%; aspect-ratio:3/2; object-fit:cover; background:#DCE7ED}
.boat .bmeta{padding:18px 19px 20px}
.boat h3{font-size:18.5px}
.boat p:last-child{margin-bottom:0}

.steps{counter-reset:s; list-style:none; padding:0; margin:26px 0 0; display:grid; gap:14px}
.steps li{counter-increment:s; background:#fff; border:1px solid var(--hair); border-radius:16px;
          padding:20px 20px 20px 64px; position:relative; box-shadow:var(--shadow)}
.steps li::before{content:counter(s); position:absolute; left:18px; top:18px; width:32px; height:32px;
  background:var(--navy); color:#fff; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:16px}

.ticks{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:11px}
.ticks li{position:relative; padding-left:34px; font-size:17.5px}
.ticks li::before{content:''; position:absolute; left:4px; top:9px; width:9px; height:16px;
  border:solid var(--gold); border-width:0 3px 3px 0; transform:rotate(45deg)}

/* ----------------------------------------------------------- the FAQ */
.faq{margin-top:22px; display:grid; gap:10px}
.faq details{background:#fff; border:1px solid var(--hair); border-radius:14px; box-shadow:var(--shadow)}
.faq summary{cursor:pointer; padding:18px 20px; font-weight:800; font-size:17.5px; min-height:56px;
             list-style:none; display:flex; align-items:center; justify-content:space-between; gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; font-size:26px; font-weight:400; color:var(--gold); line-height:1}
.faq details[open] summary::after{content:'–'}
.faq p{padding:0 20px 20px; margin:0; color:#2A3B47}

/* ---------------------------------------------------------- cta band */
.band{background:linear-gradient(160deg,#14324A 0%,var(--navy) 48%,var(--navy-deep) 100%);
      color:#fff; text-align:center; padding:56px 16px}
.band h2{color:#fff}
.band p{color:#D5E2EA; max-width:56ch; margin-left:auto; margin-right:auto}
.band .hcta{justify-content:center}

/* ------------------------------------------------------------- forms */
label{display:block; font-weight:800; font-size:13.5px; color:var(--muted); margin:16px 0 6px;
      letter-spacing:.04em; text-transform:uppercase}
label .opt{text-transform:none; letter-spacing:0; font-weight:600}
input,textarea{width:100%; font:inherit; padding:14px; min-height:54px; border:2px solid var(--line);
               border-radius:11px; background:#fff; color:var(--ink)}
input:focus,textarea:focus{outline:3px solid var(--gold-lt); outline-offset:1px; border-color:var(--navy)}
#leadform .btn{width:100%; margin-top:20px}
#leadmsg{margin-top:12px; font-weight:700}
#leadmsg.err{color:#A81B0B}

/* ------------------------------------------------------------ footer */
.foot{background:var(--navy); color:#D5E2EA; padding:46px 16px 26px}
.fwrap{max-width:var(--wrap); margin:0 auto; display:grid; gap:26px}
@media(min-width:760px){ .fwrap{grid-template-columns:2fr 1fr 1fr} }
.foot strong{color:#fff; display:block; margin-bottom:9px; font-size:16px}
.foot a{color:#EAF3F8; text-decoration:none; line-height:2.1}
.foot a:hover{text-decoration:underline}
.fbot{max-width:var(--wrap); margin:30px auto 0; padding-top:18px; font-size:14.5px;
      border-top:1px solid rgba(255,255,255,.14); color:#AFC4D1}
.fbot a{color:#EAF3F8}

/* ---- get-the-app block (QR landing + membership). The gold button is the
   App Store; the ghost is the browser version, which is the ONLY door an
   Android member has, so it never reads as a lesser option. */
.appget .hcta{margin-top:16px}
.appget .small{margin-top:14px}
@media(max-width:559px){ .appget .hcta .btn{flex:1 1 100%} }

/* ---- member reviews (real Google reviews, added 2026-08-22) */
.reviews{display:grid; gap:16px; margin-top:22px}
@media(min-width:760px){ .reviews{grid-template-columns:1fr 1fr} }
.rev{margin:0; background:var(--card,#fff); border:1px solid var(--hair,rgba(14,54,74,.16));
     border-radius:18px; padding:20px 20px 18px}
.revstars{color:#C9971C; letter-spacing:3px; font-size:17px; line-height:1}
.rev blockquote{margin:12px 0 14px; font-size:16.5px; line-height:1.5}
.rev figcaption{display:flex; flex-direction:column; gap:2px; font-size:14px}
.rev figcaption strong{font-size:15px}
.rev figcaption span{color:#5A7080}
.rev figcaption a{margin-top:4px; font-weight:700}