/* 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. */
@media(max-width:559px){ .hero img{height:452px} }
.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:16ch;
         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}