/* Hill Country Cruises site styles. Values come from the Hill Country Cruises design system (tokens.json, 2026-10-11). */
@font-face{font-family:"Atkinson Hyperlegible";src:url("fonts/AtkinsonHyperlegible-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("fonts/AtkinsonHyperlegible-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"TeX Gyre Pagella";src:url("fonts/texgyrepagella-bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}

:root{
  --surface-100:#fbf8f2; --surface-200:#ffffff; --surface-sand:#f4ead8;
  --line:#ddd5c6; --border-control:#4a5565;
  --ink:#1c2430; --ink-muted:#4a5565; --heading:#1b3a5c; --link:#264f7a;
  --brand-navy:#1b3a5c; --brand-navy-2:#264f7a; --brand-sand:#f4ead8; --brand-amber:#e0a96d;
  --brand-rust:#a8471d; --rust-hover:#8f3b17; --on-rust:#fbf8f2;
  --focus:#264f7a; --success:#1f6b3a;
  --serif:"TeX Gyre Pagella","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --surface-100:#12202f; --surface-200:#1b2d42; --surface-sand:#243a52;
    --line:#34485e; --border-control:#8fa0b3;
    --ink:#f4ead8; --ink-muted:#b8c2cd; --heading:#a9c3dd; --link:#9cc0e6;
    --brand-rust:#e8956a; --rust-hover:#f0aa85; --on-rust:#12202f;
    --focus:#e0a96d; --success:#7cc79a;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-100);color:var(--ink);font:400 20px/1.6 var(--sans);-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:var(--serif);font-weight:700;color:var(--heading);margin:0 0 .5em}
h1{font-size:clamp(36px,6vw,50px);line-height:1.15}
h2{font-size:clamp(28px,4.5vw,35px);line-height:1.2}
h3{font-size:24px;line-height:1.25}
p{margin:0 0 1em}
a{color:var(--link);text-decoration:underline}
:focus-visible{outline:4px solid var(--focus);outline-offset:2px}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:0;background:var(--surface-200);color:var(--ink);padding:12px;z-index:10}
.skip:focus{left:12px}
.eyebrow{font:700 16px/1.3 var(--serif);letter-spacing:.18em;text-transform:uppercase;color:var(--brand-rust);margin:0 0 8px}

/* top bar: always navy; sand text, amber accents */
.top{background:var(--brand-navy);color:var(--brand-sand)}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-top:12px;padding-bottom:12px}
.logo{display:block;line-height:0}
.logo img{width:200px;height:auto}
.logo.wordmark{font:700 28px/1.15 var(--serif);color:var(--brand-sand);text-decoration:none;letter-spacing:.01em}
.logo.wordmark:hover{text-decoration:underline}
.top .call{color:var(--brand-sand);font-weight:700;font-size:18px;line-height:1.3;text-align:right}
.top .call a{color:var(--brand-sand);white-space:nowrap}
.top .call span{display:block;font-weight:400;font-size:16px}
@media(max-width:560px){.top .call{text-align:left}}

/* hero */
.hero{background:linear-gradient(180deg,var(--brand-navy) 0%,var(--brand-navy-2) 100%);color:var(--brand-sand);padding:48px 0 64px;position:relative;overflow:hidden}
.hero h1{color:var(--brand-sand);max-width:22ch}
.hero p.lead{font-size:22px;max-width:36em;color:var(--brand-sand)}
.hero svg{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:56px;color:var(--surface-100)}
.btns{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:14px 26px;border-radius:10px;font:700 18px/1.3 var(--sans);text-decoration:none;text-align:center;border:2px solid transparent;cursor:pointer}
.btn-rust{background:var(--brand-rust);color:var(--on-rust)}
.btn-rust:hover{background:var(--rust-hover)}
.btn-line{border-color:var(--brand-sand);color:var(--brand-sand);background:transparent}
.btn-line:hover{background:rgba(244,234,216,.12)}
.hero :focus-visible,.top :focus-visible,footer :focus-visible{outline-color:var(--brand-amber)}

section{padding:48px 0 64px}
section.alt{background:var(--surface-sand)}
.intro{max-width:36em;color:var(--ink-muted)}

.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:24px}
.card{background:var(--surface-200);border:1px solid var(--line);border-radius:10px;padding:24px}
.card p{margin:0;color:var(--ink-muted)}

ol.steps{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
ol.steps li{background:var(--surface-200);border:1px solid var(--line);border-radius:10px;padding:24px 24px 24px 80px;position:relative}
ol.steps li b.n{position:absolute;left:22px;top:22px;width:42px;height:42px;border-radius:50%;background:var(--brand-navy);color:var(--brand-sand);display:flex;align-items:center;justify-content:center;font:700 20px var(--serif)}
ol.steps li p{margin:0;color:var(--ink-muted)}

.ai{background:var(--surface-200);border:1px solid var(--line);border-radius:10px;padding:24px;margin-top:24px;max-width:46em}
.ai ul{padding-left:1.2em;margin:12px 0 0}
.ai li{margin-bottom:.5em;color:var(--ink-muted)}

ul.facts{padding-left:1.2em;margin:16px 0 0;max-width:36em}
ul.facts li{margin-bottom:.6em}

.about{display:grid;gap:32px;grid-template-columns:1fr;align-items:start}
@media(min-width:760px){.about{grid-template-columns:240px 1fr}}
.about p{max-width:36em}
.photo{display:block;width:100%;max-width:240px;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:10px;border:1px solid var(--line)}

details{background:var(--surface-200);border:1px solid var(--line);border-radius:10px;margin-bottom:12px;max-width:46em}
summary{cursor:pointer;padding:16px 20px;font-weight:700;color:var(--heading);list-style:none;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:28px;line-height:1}
details[open] summary::after{content:"\2212"}
details div{padding:0 20px 18px;color:var(--ink-muted)}

/* form */
form{background:var(--surface-200);border:1px solid var(--line);border-radius:10px;padding:24px;margin-top:24px;max-width:720px}
@media(min-width:640px){form{padding:32px}}
.row{display:grid;gap:0 20px;grid-template-columns:1fr}
@media(min-width:640px){.row.two{grid-template-columns:1fr 1fr}}
.field{margin-bottom:20px}
label,legend{display:block;font-weight:700;font-size:18px;line-height:1.4;margin-bottom:8px}
.hint{display:block;font-weight:400;color:var(--ink-muted);font-size:16px}
input[type=text],input[type=email],input[type=tel],select,textarea{width:100%;font:400 20px/1.4 var(--sans);padding:12px 14px;min-height:54px;border:2px solid var(--border-control);border-radius:6px;background:var(--surface-200);color:var(--ink)}
textarea{min-height:130px;resize:vertical}
fieldset{border:0;padding:0;margin:0 0 20px}
.choice{display:flex;align-items:flex-start;gap:12px;margin:8px 0;font-weight:400;font-size:20px}
.choice input{width:26px;height:26px;margin:3px 0 0;flex:0 0 auto;accent-color:var(--brand-navy)}
.inline{display:flex;flex-wrap:wrap;gap:4px 24px}
.consent{background:var(--surface-sand);border-radius:6px;padding:14px 16px}
/* errors: ink text with a rust marker and the word "Please" (the palette has no red) */
.err{display:none;color:var(--ink);font-weight:700;margin:0 0 16px;padding:12px 16px 12px 52px;position:relative;background:var(--surface-sand);border-radius:6px}
.err::before{content:"!";position:absolute;left:14px;top:12px;width:26px;height:26px;border-radius:50%;background:var(--brand-rust);color:var(--on-rust);font:700 18px/26px var(--sans);text-align:center}
.err.show{display:block}
.hidden{position:absolute;left:-9999px}
.note{font-size:16px;line-height:1.5;color:var(--ink-muted);margin-top:16px}

/* footer: navy ground, sand text, fine print 16px minimum */
footer{background:var(--brand-navy);color:var(--brand-sand);padding:40px 0;font-size:18px}
footer a{color:var(--brand-sand)}
footer p{margin:0 0 .7em}
footer .fine{font-size:16px;line-height:1.5}

/* thank-you page */
.box{max-width:640px;margin:48px auto;padding:32px 24px;background:var(--surface-200);border:1px solid var(--line);border-radius:10px}