/* botboat.ai, the public shell: one header, one footer and one set of base rules for every public page. The boat's look
   off the boat (company D35, Brian 2026-11-03: "Give the public site the new look as well"): bone and one orange, Antonio
   for titles and Barlow Semi Condensed for words, rows on a rule, a curve only on a group's outer corner, no icons.
   Orange is the one thing that wants the visitor: the booking. The tokens are adminlook.css's, and tests/test_look_tokens.py
   holds the copies equal. The page follows the visitor's device, dark or day. Page layouts stay inline on their pages. */
:root,[data-mode=dark]{--g:#23211E;--pn:#302D29;--r:#A89F8C;--i:#D8D2C4;--d:#A8A295;--a:#EE7440;--on:#1C1A17;--ona:#000000;--ru:#3C3935;--aw:#EE7440;--awp:#EE7440;color-scheme:dark}
@media (prefers-color-scheme:light){:root:not([data-mode]){--g:#E3DDCE;--pn:#D6CFBD;--r:#5A5448;--i:#35322B;--d:#5A564C;--a:#A83A10;--on:#EDE8DB;--ona:#FFFFFF;--ru:#C4BDAB;--aw:#A83A10;--awp:#35322B;color-scheme:light}}
[data-mode=day]{--g:#E3DDCE;--pn:#D6CFBD;--r:#5A5448;--i:#35322B;--d:#5A564C;--a:#A83A10;--on:#EDE8DB;--ona:#FFFFFF;--ru:#C4BDAB;--aw:#A83A10;--awp:#35322B;color-scheme:light}
@font-face{font-family:Antonio;src:url('/fonts/Antonio-wght.ttf') format('truetype');font-weight:100 700;font-display:swap}
@font-face{font-family:Barlow;src:url('/fonts/BarlowSemiCondensed-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Barlow;src:url('/fonts/BarlowSemiCondensed-SemiBold.ttf') format('truetype');font-weight:600 900;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:17.5px;scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{font-family:Barlow,system-ui,sans-serif;font-weight:500;background:var(--g);color:var(--i);line-height:1.45;overflow-x:hidden;font-synthesis:none;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.brand{font-family:Antonio,Impact,'Arial Narrow',sans-serif;font-weight:600;text-transform:uppercase;line-height:1.08;letter-spacing:.005em}
b,strong{font-weight:600}
a{color:var(--i);text-decoration-color:var(--d);text-underline-offset:3px}
a:hover{text-decoration-color:var(--i)}
:focus-visible{outline:2px solid var(--a);outline-offset:2px}
img,video,svg{max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 1.5rem}
[hidden]{display:none!important}

/* ── the header: a tapered rail across the top, the only ornament there is ── */
.site-head{position:sticky;top:0;z-index:50;background:var(--g)}
.site-head::before{content:'';display:block;height:14px;background:var(--r);clip-path:polygon(0 0,100% 0,100% 18%,0 100%)}
.site-nav{display:flex;align-items:center;justify-content:space-between;padding:.45rem 1.5rem .65rem;gap:1rem;position:relative}
.brand{font-size:1.7rem;color:var(--i);text-decoration:none;white-space:nowrap}
.brand span{color:var(--r)}
.nav-links{display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap}
.nav-links a{color:var(--i);text-decoration:none;font-weight:600;padding:.5rem 0;border-bottom:2px solid transparent}
.nav-links a:hover,.nav-links a.here{border-bottom-color:var(--r)}
.nav-links a.cta{background:var(--r);color:var(--on);padding:.55rem 1.1rem;border-bottom:0}
.navtog{display:none;min-height:48px;padding:0 1.1rem;background:none;border:0;box-shadow:inset 0 0 0 2px var(--r);color:var(--i);font:inherit;font-weight:600;cursor:pointer}

/* ── buttons: bone goes somewhere, orange books ── */
.btn,button.submit{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:54px;padding:.6rem 1.5rem;border:0;background:none;color:var(--i);box-shadow:inset 0 0 0 2px var(--r);cursor:pointer;font:inherit;font-weight:600;font-size:1.05rem;text-decoration:none}
.btn-primary{background:var(--r);color:var(--on);box-shadow:none}
.btn-go,button.submit{background:var(--a);color:var(--ona);box-shadow:none;border-radius:0 26px 0 0}
.btn:hover,button.submit:hover{filter:brightness(1.08)}
.btn-soon{color:var(--d);box-shadow:none;border:2px dashed var(--ru)}
.btn-soon small{margin-left:.6rem;font-size:.85rem;font-weight:500}
.actions{display:flex;gap:.9rem;flex-wrap:wrap}

/* ── sections, rows on a rule ── */
section{padding:3.6rem 0}
section.alt{background:var(--pn);--ru:color-mix(in srgb,var(--r) 38%,var(--pn))}
h2.sec,h2{font-size:clamp(2.2rem,4vw,3.3rem);margin-bottom:.9rem}
p.sub{color:var(--d);max-width:46rem;margin-bottom:2rem;font-size:1.08rem}
.kicker{color:var(--d);font-weight:600;font-size:1.1rem;margin-bottom:.5rem}
.rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:0 2.6rem}
.rows.four{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 2rem}
.rowc{border-top:3px solid var(--r);padding:.85rem 0 2rem;display:flex;flex-direction:column}
.rowc h3{font-size:1.65rem;margin-bottom:.45rem}
.rowc p{color:var(--d)}
.price{font-family:Antonio,Impact,sans-serif;font-weight:600;font-size:2.8rem;line-height:1.05;color:var(--i)}
.per{color:var(--d)}
.sku{color:var(--d);font-weight:600;font-size:.95rem;margin-bottom:.2rem}
.ruled{list-style:none}
.ruled li{padding:.5rem 0;border-top:1px solid var(--ru)}
.ruled li:first-child{border-top:0;padding-top:0}
.tier{border-left:4px solid var(--r);padding:.15rem 0 .15rem 1rem;margin:1rem 0;color:var(--d);max-width:52rem}
.tier b{color:var(--i)}

/* the sea videos: no frame, one curved corner on the group */
.heroviz{margin:1.5rem 0 0}
.heroviz video{display:block;width:100%;height:auto;background:var(--pn);aspect-ratio:16/9;border-radius:0 0 64px 0}
.heroviz .cap{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem 2rem;flex-wrap:wrap;color:var(--d);padding:.8rem 0 0}
.heroviz .cap b{color:var(--i)}
.heroviz .cap span{flex:1 1 34rem}
.heroviz .cap a{font-weight:600;white-space:nowrap;color:var(--i)}

/* ── how an engagement runs: the rail narrows toward delivery ── */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem 2.2rem;counter-reset:step}
.steps::before{content:'';grid-column:1/-1;height:14px;background:var(--r);clip-path:polygon(0 0,100% 42%,100% 58%,0 100%)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);display:block;font-family:Antonio,Impact,sans-serif;font-weight:600;font-size:3.1rem;line-height:1.1;color:var(--r)}
.step b{display:block;font-size:1.12rem;margin:.2rem 0 .3rem}
.step span{color:var(--d)}

/* ── the form ── */
form.intake{max-width:56rem}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:.4rem 2rem}
label{display:block;font-weight:600;color:var(--d);margin-bottom:.25rem}
input,select,textarea{width:100%;min-height:52px;background:var(--pn);border:0;border-bottom:2px solid var(--r);color:var(--i);padding:.6rem .75rem;font:inherit;font-size:17px}
input::placeholder,textarea::placeholder{color:var(--d)}
textarea{resize:vertical;min-height:110px}
.form-row{margin-bottom:1.1rem}
.form-row small{display:block;color:var(--d);margin-top:.3rem;font-size:.92rem}
.result{display:none;margin-top:1.3rem;border-left:4px solid var(--r);padding:.2rem 0 .2rem 1rem;max-width:46rem}
.result.err{border-left-color:var(--a)}
.result .sow{font-weight:600}
.result .actions{margin-top:.8rem}
code{font-family:inherit;font-weight:600;box-shadow:inset 0 0 0 1px var(--r);padding:.1rem .5rem;margin-right:.3rem;white-space:nowrap}

/* ── the footer ── */
.site-foot{border-top:3px solid var(--r);padding:2.2rem 0 3rem;color:var(--d)}
.site-foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.6rem 2.6rem}
.site-foot h4{color:var(--i);margin-bottom:.45rem;font-size:1.25rem}
.site-foot .fine{margin-top:1.8rem;font-size:.92rem}

/* ── the phone ── */
@media (max-width:760px){
  html{font-size:17px}
  .wrap{padding:0 1rem}
  .site-nav{padding:.35rem 1rem .5rem}
  .navtog{display:inline-block}
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--pn);padding:.2rem 1rem 1rem}
  .nav-links.open{display:flex}
  .nav-links a{padding:.8rem .1rem;border-bottom:1px solid var(--ru);font-size:1.1rem}
  .nav-links a.cta{margin-top:.8rem;text-align:center;border-bottom:0}
  section{padding:2.6rem 0}
  .actions .btn,.actions button{width:100%}
  .heroviz video{border-radius:0 0 34px 0}
  .rows.four{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:1fr}
  .steps::before{display:none}
  .step{display:grid;grid-template-columns:3.6rem minmax(0,1fr);column-gap:.5rem;border-top:3px solid var(--r);padding-top:.5rem}
  .step::before{grid-row:1/3}
  button.submit{width:100%}
  .site-foot{padding:1.6rem 0 2.4rem}
}