/* CCC Site Factory base design system. Tokens are injected per site from site.json. */
:root{--ink:#1F2C42;--paper:#F7F4F0;--card:#FFFFFF;--wash:#EEE8DD;--line:#DCD4C6;--line-strong:#7A7466;--muted:#545C69;--signal:#F2A900;--signal-deep:#8A5700;--link:#1F2C42;--focus:#1F5FD0;--err:#B42318;--tint-a:#FBEFD2;--tint-b:#E2EBF5;--tint-c:#F3E7DD;}
@font-face{font-family:"Site";src:url(/assets/font.258a93fe93.woff2) format("woff2");font-weight:400 900;font-stretch:62% 125%;font-display:swap}
:root{
  --body:"Site",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --radius:14px;--maxw:1200px;--gutter:clamp(16px,4vw,40px);
  --step-0:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-1:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --step-2:clamp(1.6rem,1.3rem + 1.4vw,2.25rem);
  --step-3:clamp(2.1rem,1.6rem + 2.6vw,3.5rem);
  --step-4:clamp(2.6rem,1.8rem + 4.2vw,5.25rem);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:var(--step-0);line-height:1.6;font-variation-settings:"wdth" 100;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
picture{display:block}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:.08em}
a:hover{text-decoration-thickness:.14em}
h1,h2,h3{line-height:1.08;margin:0 0 var(--s4);font-weight:600;font-stretch:112%;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);font-weight:600;line-height:1.2;letter-spacing:-.005em}
p{margin:0 0 var(--s4);max-width:66ch;text-wrap:pretty}
.lede{font-size:var(--step-1);line-height:1.5;max-width:52ch}
.eyebrow{font-size:.875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:0 0 var(--s3);color:var(--muted);font-stretch:118%}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.on-dark :focus-visible,.hero :focus-visible{outline-color:var(--signal)}
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:12px 16px;border-radius:8px;font-weight:600}
.skip:focus{top:8px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.75em 1.35em;border-radius:999px;background:var(--signal);color:var(--ink);font-weight:600;text-decoration:none;border:2px solid var(--signal);font-stretch:108%;white-space:nowrap;transition:transform .2s var(--ease),background .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px -10px rgba(0,0,0,.45)}
.btn-ghost{background:transparent;color:inherit;border-color:currentColor}
.btn-sm{min-height:44px;padding:.5em 1.1em;font-size:.95rem}
.ctas{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.head-row{display:flex;align-items:center;gap:var(--s4);min-height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-height:44px}
.brand-word{font-weight:600;font-stretch:122%;letter-spacing:.01em;text-transform:uppercase;line-height:1;font-size:1.02rem;display:flex;flex-direction:column}
.brand-word span{font-weight:600;letter-spacing:.32em;font-size:.72rem;margin-top:3px;color:var(--muted)}
.menu{margin-left:auto;position:relative}
.menu summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 10px;cursor:pointer;border-radius:10px;font-weight:600}
.menu summary::-webkit-details-marker{display:none}
.burger,.burger::before,.burger::after{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;position:relative}
.burger::before,.burger::after{content:"";position:absolute;left:0}
.burger::before{top:-6px}.burger::after{top:6px}
.menu nav{position:absolute;right:0;top:calc(100% + 10px);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 20px 40px -20px rgba(0,0,0,.35);padding:var(--s3);min-width:240px}
.menu ul{list-style:none;margin:0;padding:0}
.menu nav a{display:flex;align-items:center;min-height:44px;padding:0 var(--s3);border-radius:10px;color:var(--ink);text-decoration:none;font-weight:600;white-space:nowrap}
.menu nav a:hover{background:var(--wash)}
.menu nav a[aria-current=page]{box-shadow:inset 3px 0 0 var(--signal-deep);background:var(--wash)}
.head-actions{display:flex;align-items:center;gap:var(--s3)}
.head-tel{display:none;color:var(--ink);font-weight:600;text-decoration:none;min-height:44px;align-items:center;white-space:nowrap;font-variant-numeric:tabular-nums}
.nav-desk{display:none}
.nav-desk ul{list-style:none;margin:0;padding:0;display:flex;gap:2px}
.nav-desk a{display:flex;align-items:center;min-height:44px;padding:0 11px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.97rem;white-space:nowrap}
.nav-desk a:hover{text-decoration:underline}
.nav-desk a[aria-current=page]{box-shadow:inset 0 -3px 0 var(--signal-deep)}
@media (min-width:1100px){
  .nav-desk{display:block;margin-left:auto}
  .menu{display:none}
  .head-tel{display:inline-flex}
}
@media (max-width:420px){.head-actions .btn-sm{padding:.5em .8em;font-size:.88rem}.menu-word{display:none}.brand-word{font-size:.86rem}.menu summary{padding:0 6px}}
.brand-word{white-space:nowrap}
h1 .l{display:block}
address{font-style:normal;line-height:1.7}
address a{display:inline-flex;align-items:center;min-height:44px}
.hero a:not(.btn){color:#fff}

/* hero */
.hero{position:relative;isolation:isolate;color:#fff;min-height:min(88svh,820px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hero-short{min-height:min(62svh,560px)}
.hero.no-img{min-height:auto;padding-top:var(--s8)}
.hero-img,.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,12,16,0) 30%,rgba(10,12,16,.55) 62%,rgba(10,12,16,.88) 100%)}
.hero-body{padding-block:var(--s9) var(--s8);width:100%}
.hero .eyebrow{color:var(--signal)}
.hero h1{max-width:15ch;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero .lede{color:#F4F1EA}
.hero .btn-ghost{color:#fff}
.facts{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:var(--s5) 0 0;padding:0}
.facts li{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:6px 12px;border-radius:999px;font-size:.92rem;font-weight:600;color:#fff}
.hero-cap{font-size:.875rem;color:#E8E4DA;margin:var(--s4) 0 0}
.stripe{position:absolute;left:0;right:0;bottom:0;height:8px;background:linear-gradient(90deg,var(--signal) 0 72%,var(--ink) 72% 74%,var(--signal) 74%)}

/* bands */
.band{padding-block:clamp(56px,8vw,112px);position:relative}
.band + .band:not(.on-dark):not(.band-specs){border-top:1px solid var(--line)}
.on-dark{background:var(--ink);color:#F4F1EA}
.on-dark .eyebrow{color:var(--signal)}
.on-dark a:not(.btn){color:#fff}
.on-dark .btn{color:var(--ink)}
.on-dark .btn-ghost{color:#fff}
.on-dark .lede,.on-dark p{color:#E4E0D6}
.sec-head{margin-bottom:var(--s6);max-width:760px}

/* tiles */
.tiles{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);grid-template-columns:1fr}
@media (min-width:600px){.tiles{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.tiles{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(220px,auto)}.tile-big{grid-column:span 2;grid-row:span 2}
  .tiles > li:last-child:nth-child(5){grid-column:span 2}
  .tiles > li:last-child:nth-child(5) img{aspect-ratio:auto;max-height:340px}}
@media (min-width:600px) and (max-width:899px){.tile-big{grid-column:1/-1}.tiles > li:last-child:nth-child(odd):not(.tile-big){grid-column:1/-1}}
.tile{min-width:0}
.tile a{position:relative;display:block;height:100%;border-radius:var(--radius);overflow:hidden;color:#fff;text-decoration:none;background:var(--ink)}
.tile picture,.tile img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.tile-big img{aspect-ratio:auto}
.tile-cap{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;background:linear-gradient(180deg,transparent,rgba(10,12,16,.85));font-weight:600;font-size:.98rem}
.tile a:hover img{transform:scale(1.03)}
.tile img{transition:transform .6s var(--ease)}

/* specs */
.band-specs{background:var(--wash)}
.specs{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.specs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.spec{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s5);display:flex;flex-direction:column;gap:6px;min-width:0}
.spec-big{font-size:var(--step-3);font-weight:600;font-stretch:112%;line-height:1;letter-spacing:-.02em}
.spec-small{color:var(--muted);font-weight:600}
.spec-note{margin-top:var(--s5);font-size:1.05rem}

/* cards */
.cards{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5);grid-template-columns:1fr}
@media (min-width:700px){.cards.cols-2,.cards.cols-3{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.cards.cols-3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.on-dark .card{background:#20242B;border-color:#343a44}
.card-img img{aspect-ratio:3/2;object-fit:cover;width:100%;height:auto}
.card-body{padding:var(--s5);display:flex;flex-direction:column;gap:2px;flex:1}
.card-body p{font-size:1rem}
.tag{display:inline-block;align-self:flex-start;background:var(--wash);color:var(--ink);font-size:.875rem;font-weight:600;padding:4px 10px;border-radius:999px;margin:auto 0 0}
.card-link{font-weight:600;margin-top:auto;min-height:44px;display:inline-flex;align-items:center;gap:.35em}
.split-fig.portrait img{aspect-ratio:4/5;object-position:50% 18%;max-height:640px}

/* route: the signature element, a transit line with stops */
.route{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5);position:relative;counter-reset:stop}
@media (min-width:900px){.route{grid-template-columns:repeat(4,1fr);gap:var(--s4)}
  .route::before{content:"";position:absolute;left:12px;right:12px;top:11px;height:4px;background:var(--signal);border-radius:4px}}
@media (max-width:899px){.route{padding-left:36px}.route::before{content:"";position:absolute;left:10px;top:6px;bottom:6px;width:4px;background:var(--signal);border-radius:4px}}
.stop{position:relative;min-width:0}
.stop-dot{display:block;width:26px;height:26px;border-radius:50%;background:var(--paper);border:5px solid var(--ink);margin-bottom:var(--s4);position:relative;z-index:1}
@media (max-width:899px){.stop-dot{position:absolute;left:-36px;top:0;margin:0}}
.on-dark .stop-dot{background:var(--ink);border-color:var(--signal)}
.stop-n{font-size:.875rem;font-weight:600;letter-spacing:.12em;color:var(--muted);display:block;margin-bottom:4px}
.on-dark .stop-n{color:var(--signal)}
.stop p{font-size:1rem}

/* split */
.split{display:grid;gap:var(--s7);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}.split-rev .split-fig{order:-1}}
.split-text,.split-fig{min-width:0}
.split-fig{margin:0}
.split-fig img{border-radius:var(--radius);width:100%;aspect-ratio:4/3;object-fit:cover;height:auto}
figcaption{font-size:.88rem;color:var(--muted);margin-top:var(--s2)}
.on-dark figcaption{color:#CFCABF}
.ticks{list-style:none;padding:0;margin:0 0 var(--s4)}
.ticks li{position:relative;padding-left:30px;margin-bottom:10px;max-width:60ch}
.ticks li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:8px;border-left:3px solid var(--signal-deep);border-bottom:3px solid var(--signal-deep);transform:rotate(-45deg)}
.on-dark .ticks li::before{border-color:var(--signal)}

/* moment */
.moment-grid{display:grid;gap:var(--s6);align-items:center}
@media (min-width:900px){.moment-grid{grid-template-columns:1.2fr 1fr}}
.moment figure{margin:0}
.moment img{border-radius:var(--radius);width:100%;height:auto}
.moment-line{font-size:var(--step-3);color:#fff;max-width:18ch}

/* table */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:520px;font-variant-numeric:tabular-nums}
caption{text-align:left;padding:var(--s4);font-weight:600}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-size:.875rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:var(--wash)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
.table-note{font-size:.95rem;color:var(--muted);margin-top:var(--s4)}

/* planner */
.planner-grid{display:grid;gap:var(--s6)}
.planner{display:grid;gap:var(--s4);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s5)}
@media (min-width:900px){.planner{grid-template-columns:repeat(3,1fr)}.planner-out{grid-column:1/-1}}
.field label{display:block;font-weight:600;margin-bottom:6px;font-size:.98rem}
.field input{width:100%;min-height:48px;font:inherit;padding:10px 14px;border:2px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--ink)}
.field input:focus-visible{border-color:var(--ink)}
.planner-out{display:block;background:var(--ink);color:#fff;border-radius:12px;padding:var(--s5);font-size:1.05rem}
.planner-out strong{color:var(--signal);font-size:1.25em}
.planner-out p{color:#EDE9DF;margin:0 0 6px}
.js-only{display:none}
html.js .js-only{display:grid}
html.js .planner-static{display:none}

/* faq */
.faq{display:grid;gap:var(--s3);max-width:860px}
.qa{border:1px solid var(--line);border-radius:12px;background:var(--card)}
.qa summary{cursor:pointer;list-style:none;padding:var(--s4) var(--s5);display:flex;justify-content:space-between;gap:var(--s4);align-items:center;min-height:56px}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{font-size:1.1rem;margin:0;font-stretch:104%}
.qa summary::after{content:"+";font-size:1.6rem;font-weight:600;line-height:1;flex:none;transition:transform .2s}
.qa[open] summary::after{transform:rotate(45deg)}
.qa-a{padding:0 var(--s5) var(--s4)}

/* strip (the family) */
.strip{list-style:none;margin:0;padding:0 0 8px;display:grid;gap:var(--s4);grid-auto-flow:column;grid-auto-columns:minmax(260px,82%);overflow-x:auto;scroll-snap-type:x mandatory}
.strip > li{scroll-snap-align:start}
@media (min-width:900px){.strip{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible}}
.strip-card a{color:inherit;text-decoration:none;display:flex;flex-direction:column;height:100%}
.strip-card h3{margin-top:8px}

/* prose and sources */
.prose p{font-size:1.08rem}
.sources{padding-left:1.2em}
.sources li{margin-bottom:8px;font-size:.95rem}

/* cta band */
.cta-band{overflow:hidden}
.cta-inner{text-align:left;padding-bottom:var(--s4)}
.cta-inner h2{color:#fff;max-width:18ch}
.cta-band .btn-ghost{color:#fff}

/* form */
.band-form{background:var(--wash)}
.form-split{align-items:start}
.form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s5);box-shadow:0 20px 50px -30px rgba(0,0,0,.35)}
#tripleseat_link{font-size:.875rem;color:var(--muted)}
#tripleseat_embed_form_inline{font-family:var(--body);color:var(--ink)}
#tripleseat_embed_form_inline h2,#tripleseat_embed_form_inline .row_contact_header,#tripleseat_embed_form_inline .row_details_header{font-size:1.15rem;font-weight:600;margin:var(--s5) 0 var(--s3);letter-spacing:0;font-stretch:106%}
#tripleseat_embed_form_inline h2:first-of-type{margin-top:0}
#tripleseat_embed_form_inline .tripleseat_field_section{display:block;width:100%}
#tripleseat_embed_form_inline .tripleseat_field{display:block;width:100%;margin-bottom:var(--s4)}
#tripleseat_embed_form_inline label{display:block;font-weight:600;margin-bottom:6px;font-size:.98rem}
#tripleseat_embed_form_inline label em{font-weight:400;font-style:normal;color:var(--muted);margin-left:6px;font-size:.9rem}
#tripleseat_embed_form_inline label .required{color:var(--err);margin-left:2px}
#tripleseat_embed_form_inline input[type=text],#tripleseat_embed_form_inline input[type=email],#tripleseat_embed_form_inline input[type=tel],#tripleseat_embed_form_inline input[type=number],#tripleseat_embed_form_inline input.text,#tripleseat_embed_form_inline select,#tripleseat_embed_form_inline textarea,#tripleseat_embed_form_inline .timeselect_input{width:100%;min-height:48px;font:inherit;font-size:1rem;padding:10px 14px;border:2px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--ink)}
#tripleseat_embed_form_inline textarea{min-height:110px;resize:vertical}
#tripleseat_embed_form_inline input:focus,#tripleseat_embed_form_inline select:focus,#tripleseat_embed_form_inline textarea:focus{border-color:var(--ink);outline:3px solid var(--focus);outline-offset:2px}
#tripleseat_embed_form_inline input[type=submit],#tripleseat_embed_form_inline #lead_submit,#tripleseat_embed_form_inline .button{min-height:52px;padding:.8em 1.6em;border-radius:999px;background:var(--signal);color:var(--ink);border:2px solid var(--signal);font:inherit;font-weight:600;cursor:pointer;width:100%}
#tripleseat_embed_form_inline input[name=website]{position:absolute;left:-9999px}
#tripleseat_embed_form_inline .col-sm-4,#tripleseat_embed_form_inline .control-label{width:auto;float:none;padding:0;text-align:left}
#ui-datepicker-div{max-width:calc(100vw - 16px);z-index:9999;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px}
#ui-datepicker-div table{min-width:0}

/* footer */
.site-foot{padding-block:var(--s8) var(--s5);background:var(--ink)}
.site-foot a{color:#fff}
.brand-foot{color:#fff}
.brand-foot .brand-word span{color:#CFCABF}
.foot-grid{display:grid;gap:var(--s6)}
@media (min-width:800px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot-h{font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);margin:0 0 var(--s3);font-weight:600}
.site-foot ul{list-style:none;margin:0 0 var(--s5);padding:0}
.site-foot li a{display:inline-flex;min-height:36px;align-items:center}
.foot-legal{border-top:1px solid #343a44;margin-top:var(--s6);padding-top:var(--s4)}
.foot-legal p{font-size:.875rem;color:#BDB8AD;max-width:none}

/* motion: felt, never required */
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  html.js .reveal.in{opacity:1;transform:none}
  .hero-img img{animation:settle 9s var(--ease) both}
  @keyframes settle{from{transform:scale(1.06)}to{transform:scale(1)}}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;scroll-behavior:auto !important}}
@media print{.site-head,.hero-scrim,.stripe,.cta-band,.band-form{display:none}.hero{min-height:0;color:#000}.hero-img{position:static}}
.ready-h{font-size:var(--step-1);margin-top:var(--s5)}
/* tables become stacked cards on a phone: no sideways scrolling for the buyer */
@media (max-width:639px){
  .tablewrap{overflow:visible;border:0;background:none}
  .tablewrap table{min-width:0}
  .tablewrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tablewrap tbody tr{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:var(--s3);padding:var(--s2) 0}
  .tablewrap tbody th,.tablewrap tbody td{display:flex;justify-content:space-between;gap:var(--s4);border:0;padding:8px 16px}
  .tablewrap tbody th{font-size:1.08rem}
  .tablewrap tbody td::before{content:attr(data-label);color:var(--muted);font-weight:600;font-size:.9rem;flex:0 0 45%}
  .tablewrap tbody td{text-align:right}
  .tablewrap caption{padding:0 0 var(--s3)}
}
p,li,address,dd,figcaption{overflow-wrap:anywhere}
.tablewrap a{display:inline-flex;align-items:center;min-height:44px}
.lbl-short{display:none}
@media (max-width:380px){.head-actions .lbl-long{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.head-actions .lbl-short{display:inline}}
.split > *{min-width:0}
#tripleseat_embed_form_inline, #tripleseat_embed_form_inline *{max-width:100%;box-sizing:border-box}
@media (max-width:380px){.form-card{padding:var(--s4)}}
.specs > li:last-child:nth-child(odd){grid-column:1/-1}
@media (min-width:900px){.specs > li:last-child:nth-child(odd){grid-column:auto}}

/* round 2: hero label reads on any photo; no-JS planner table stays inside a phone */
.hero .eyebrow{display:inline-block;background:rgba(10,12,16,.78);padding:5px 10px;border-radius:6px}
.planner-static table{min-width:0}
#ui-datepicker-div{font-size:1rem}
/* round 2: the scrim is measured against real photo pixels now (runtime gate hero_pixels). Darken where the text sits:
   a bottom-weighted wash on every width, plus a left-weighted wash on wide screens where the text column is on the left. */
.hero-scrim{background:linear-gradient(180deg,rgba(10,12,16,.30) 0%,rgba(10,12,16,.62) 38%,rgba(10,12,16,.86) 70%,rgba(10,12,16,.94) 100%)}
@media (min-width:900px){.hero-scrim{background:linear-gradient(90deg,rgba(10,12,16,.90) 0%,rgba(10,12,16,.78) 42%,rgba(10,12,16,.25) 75%,rgba(10,12,16,.10) 100%),linear-gradient(180deg,rgba(10,12,16,0) 55%,rgba(10,12,16,.55) 100%)}}
.hero h1,.hero .lede{text-shadow:0 1px 18px rgba(0,0,0,.45)}
/* third-party frames (reCAPTCHA inside the booking form) take keyboard focus; give them a visible ring too */
iframe:focus-visible,iframe:focus{outline:3px solid var(--focus);outline-offset:3px}
/* our own ring around the reCAPTCHA checkbox: Google's in-frame ring does not show on every browser (CI, Linux) */
#tripleseat_embed_form_inline div:has(> iframe):focus-within{outline:3px solid var(--focus);outline-offset:4px;border-radius:4px}

/* round 3: on a phone the photo is the product, so it sits above the words instead of under them */
@media (max-width:599px){
  .hero{display:block;min-height:0;background:var(--ink)}
  .hero-img,.hero-img img{position:static;height:auto;aspect-ratio:4/3;width:100%;object-fit:cover}
  .hero-short .hero-img img{aspect-ratio:16/10}
  .hero-scrim{display:none}
  .hero-body{padding-block:var(--s5) var(--s7)}
  .hero .eyebrow{background:none;padding:0}
}
/* with JavaScript off the booking card would be empty: hide it, the noscript card carries the phone and email */
html:not(.js) #ts-slot{display:none}
/* round 4: captions on photos were measured at 3.05-4.34:1 against the real pixels (bright skies). A solid band, not a fade. */
.tile-cap{background:rgba(10,12,16,.86);padding:10px 14px;left:0;right:0;bottom:0}

/* round 5: stat grids fill every row at every width (grader E: a lone leftover tile) */
.specs{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
@media (min-width:900px){.specs{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
.specs > li:last-child:nth-child(odd){grid-column:auto}
.planner{grid-template-columns:1fr}
@media (min-width:900px){.planner{grid-template-columns:repeat(2,1fr)}}

/* round 6: call and text first */
.head-call{display:none}
@media (max-width:1099px){.head-call{display:inline-flex}}
@media (max-width:420px){.head-call{padding:.5em .7em}}
@media (min-width:1100px){.nav-desk{display:none}.menu{display:block}}
@media (min-width:1240px){.nav-desk{display:block;margin-left:auto}.menu{display:none}}
.cta-more{display:inline-flex;align-items:center;min-height:48px;color:#fff;font-weight:600;text-underline-offset:.2em}
.band:not(.on-dark) .cta-more{color:var(--ink)}
/* round 6b: Call + Text + menu + brand must fit a 320 px phone (runtime gate A11Y-11) */
@media (max-width:480px){
  .head-row{gap:8px}
  .head-actions{gap:6px}
  .head-actions .lbl-long{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .head-actions .lbl-short{display:inline}
  .head-actions .btn-sm{padding:.5em .75em;font-size:.9rem}
  .menu summary{padding:0 4px}
}
@media (max-width:360px){.brand-mark svg{width:32px}.brand-word{font-size:.8rem}.brand-word span{letter-spacing:.2em}}
@media (max-width:340px){.site-head .wrap{padding-inline:12px}.head-actions .btn-sm{padding:.5em .6em}}

/* endorsed-brand line under the footer wordmark: small caps, neutral grey, behind a hairline, 12px minimum (endorsed-brand lockup practice); the header keeps the plain wordmark so its buttons always fit */
.brand-word .brand-endorse{display:block;margin-top:6px;padding-top:5px;border-top:1px solid var(--line);font-size:.75rem;font-weight:600;letter-spacing:.08em;color:var(--muted);font-stretch:100%}
.brand-foot .brand-word .brand-endorse{color:#CFCABF;border-top-color:rgba(255,255,255,.28)}
.site-head .brand-endorse{display:none}

/* reviews: exact quotes, stars carry a text alternative */
.reviews{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));margin:0;padding:0}
.review figure{margin:0;height:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.review .stars{margin:0;color:var(--signal-deep);letter-spacing:.12em;font-size:1.05rem}
.review blockquote{margin:0;flex:1}.review blockquote p{margin:0;font-size:1.05rem;line-height:1.5}
.review figcaption{font-size:.9rem;color:var(--muted)}

/* ===== Design pass r8, 2026-09-27 (Bobby: "feels a bit amateur, hype this up"; the photo grid is unbalanced).
   Win the reader in two seconds: the designed logo, a hero photo at full strength with a bottom-third scrim only,
   balanced grids, the leaning stripe from the logo as the site's signature, the key numbers in a bold dark band. ===== */

/* designed logo (brand.logo in site.json): the SVG lockup replaces the drawn mark */
.brand-lockup{display:flex;flex-direction:column;gap:6px}
.brand-logo{display:block;height:40px;width:auto}
.brand-foot .brand-logo{height:52px}
@media (max-width:480px){.site-head .brand-logo{height:31px}}
@media (max-width:360px){.site-head .brand-logo{height:26px}}
.brand-lockup .brand-endorse{display:block;margin-top:2px;padding-top:6px;border-top:1px solid rgba(255,255,255,.28);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#CFCABF;font-stretch:100%;max-width:max-content}

/* the signature: a short leaning stripe before every section eyebrow */
.eyebrow{display:flex;align-items:center;gap:.7em}
.eyebrow::before{content:"";flex:0 0 auto;width:30px;height:10px;background:var(--signal);clip-path:polygon(0 0,70% 0,100% 100%,0 100%)}

/* hero: the photograph at full strength; only the bottom third darkens so the type still measures */
.hero-scrim{background:linear-gradient(180deg,rgba(15,22,34,0) 38%,rgba(15,22,34,.5) 60%,rgba(15,22,34,.9) 100%)}
.hero h1{font-size:clamp(2.9rem,1.7rem + 5.4vw,6.25rem);max-width:13ch;letter-spacing:-.025em;font-stretch:118%}
.hero .eyebrow{color:#fff}
.stripe{height:14px;background:var(--signal);clip-path:polygon(0 0,calc(100% - 64px) 0,100% 100%,0 100%);left:0;right:18%}

/* headings a step bigger and wider everywhere: confident, not a document */
h2{font-size:clamp(2.3rem,1.6rem + 3vw,4rem);font-stretch:118%;letter-spacing:-.025em}

/* the bus photos: balanced mosaic for four (big left, two stacked right, the wide shot across the bottom) */
@media (min-width:900px){
  .tiles:has(> li:nth-child(4):last-child){grid-template-columns:2fr 1fr;grid-auto-rows:178px}
  .tiles:has(> li:nth-child(4):last-child) > li:nth-child(1){grid-column:1;grid-row:1 / span 3}
  .tiles:has(> li:nth-child(4):last-child) > li:nth-child(n+2){grid-column:2}
  .tiles:has(> li:nth-child(4):last-child) img{aspect-ratio:auto;height:100%}
}
@media (min-width:600px) and (max-width:899px){
  .tiles:has(> li:nth-child(4):last-child) > li:nth-child(4){grid-column:1 / -1}
}
.tile-cap{font-size:1.02rem;padding:56px 18px 16px}

/* the numbers: a bold dark band, amber figures (7:1 on navy) */
.band-specs{background:var(--ink);color:#F4F1EA}
.band-specs h2{color:#fff}
.band-specs .eyebrow{color:var(--signal)}
.band-specs .spec{background:transparent;border:0;border-top:3px solid var(--signal);border-radius:0;padding:var(--s4) 0 0}
.band-specs .spec-big{color:var(--signal);font-size:clamp(3rem,2rem + 3.4vw,4.75rem);font-stretch:122%}
.band-specs .spec-small{color:#E4E0D6;font-size:1rem}
.band-specs .spec-note{color:#E4E0D6}
.band-specs a:not(.btn){color:#fff}
.band + .band-specs,.band-specs + .band{border-top:0}

/* reviews: no stray bullets; four sit in a 2 x 2, never three and an orphan */
.reviews{list-style:none}
@media (min-width:760px){.reviews:has(> li:nth-child(4):last-child),.reviews:has(> li:nth-child(2):last-child){grid-template-columns:1fr 1fr}}
.review figure{position:relative;padding:var(--s5);border:0;border-left:6px solid var(--signal);border-radius:var(--radius)}
.review blockquote p{font-size:clamp(1.15rem,1rem + .5vw,1.35rem);font-weight:600;line-height:1.4}
.band-reviews .note,.reviews + .note{font-size:.95rem;color:var(--muted);margin-top:var(--s4)}

/* cards and tiles lift a little under the pointer; photos fill the card top */
@media (prefers-reduced-motion:no-preference){
  .card{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
  .card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(15,22,34,.45)}
}
.card{border:0;box-shadow:0 1px 0 var(--line),0 10px 30px -24px rgba(15,22,34,.35)}

/* closing call band: the stripe runs across its top edge */
.cta-band{position:relative}
.cta-band::before{content:"";position:absolute;left:0;top:0;width:min(62%,760px);height:12px;background:var(--signal);clip-path:polygon(0 0,100% 0,calc(100% - 48px) 100%,0 100%)}
/* photo captions as a compact navy label in the corner, so the photograph stays the picture */
.tile-cap{left:14px;right:auto;bottom:14px;max-width:calc(100% - 28px);padding:8px 14px;border-radius:10px;background:var(--ink);font-size:.95rem;line-height:1.3}
/* r8 fixes from the runtime gate: the photo stays full strength where the bus is (right); the text side (left) and the
   bottom third darken so white type measures at least 3:1 at every width; the logos fit a 320px phone */
.hero-scrim{background:
  linear-gradient(90deg,rgba(15,22,34,.82) 0%,rgba(15,22,34,.62) 38%,rgba(15,22,34,.18) 66%,rgba(15,22,34,0) 82%),
  linear-gradient(180deg,rgba(15,22,34,0) 30%,rgba(15,22,34,.45) 62%,rgba(15,22,34,.88) 100%)}
@media (max-width:899px){.hero-scrim{background:linear-gradient(180deg,rgba(15,22,34,.35) 0%,rgba(15,22,34,.6) 40%,rgba(15,22,34,.9) 100%)}}
@media (max-width:360px){.site-head .brand-logo{height:21px}}
.brand-foot .brand-logo{height:auto;width:min(300px,100%)}

/* ===== Polish r10, 2026-09-27: calm premium (elite-site benchmark: Blacklane, Wheels Up, Soho House, Aman, Ace Hotel,
   Linear, Stripe, Revel, measured with Playwright). Findings: display type at regular-to-medium weight, 2-3 weights total,
   one button shape, no fact chips, labels only where they help, photos big with few captions, flow from photos and white
   space rather than stripes and colour bands. This block overrides the louder r8 treatments above it. ===== */

/* type: one heading weight, calmer sizes, less stretch */
h1,h2,h3{font-weight:600;font-stretch:106%;letter-spacing:-.018em}
h1{font-size:clamp(2.4rem,1.7rem + 3vw,4.25rem)}
.hero h1{font-size:clamp(2.5rem,1.6rem + 3.6vw,4.5rem);max-width:16ch;letter-spacing:-.02em;font-stretch:106%}
h2{font-size:clamp(1.9rem,1.45rem + 1.7vw,3rem);font-stretch:106%;letter-spacing:-.018em}
h3{font-weight:600}
strong,b{font-weight:600}
.btn{font-weight:600;font-stretch:100%}

/* labels: only the hero keeps one, and it loses the stripe tick and the dark box */
.eyebrow::before{content:none}
.hero .eyebrow{background:none;padding:0;color:#fff;letter-spacing:.12em;font-size:.875rem;font-weight:600}

/* one amber stripe on the site: under the hero; none above the closing band */
.cta-band::before{content:none}

/* photo captions sit under the photo in plain text, not as chips on it */
.tile a{display:flex;flex-direction:column;background:transparent;color:var(--ink);height:100%}
.tile picture{flex:1 1 auto;min-height:0;border-radius:var(--radius);overflow:hidden;display:block}
.tile-cap{position:static;left:auto;bottom:auto;max-width:none;padding:10px 2px 0;background:none;border-radius:0;color:var(--muted);font-weight:600;font-size:.95rem}
@media (min-width:900px){.tiles:has(> li:nth-child(4):last-child){grid-auto-rows:196px}}

/* the numbers: back to a quiet light band (the benchmark sites put facts in sentences, not stat rows) */
.band-specs{background:var(--wash);color:var(--ink)}
.band-specs h2{color:var(--ink)}
.band-specs .spec{border-top:2px solid var(--ink)}
.band-specs .spec-big{color:var(--ink);font-weight:600;font-size:clamp(2.2rem,1.6rem + 2vw,3.25rem);font-stretch:106%}
.band-specs .spec-small,.band-specs .spec-note{color:var(--muted)}
.band-specs a:not(.btn){color:var(--ink)}

/* reviews: plain cards, no amber rule; stars small */
.review figure{border-left:0;border:1px solid var(--line);box-shadow:none}
.review blockquote p{font-weight:600}
.review .stars{font-size:.9rem;letter-spacing:.08em}

/* cards: one soft surface, no lift */
.card{box-shadow:none;border:1px solid var(--line)}
@media (prefers-reduced-motion:no-preference){.card:hover{transform:none;box-shadow:0 12px 32px -24px rgba(15,22,34,.35)}}

/* a text link does nothing on most computers: show Text on phones, the booking page on computers */
.only-desk{display:none}
@media (hover:hover) and (pointer:fine) and (min-width:900px){.only-touch{display:none}.only-desk{display:inline-flex}}

/* Polish r10b: benchmark rules 17, 18 and 24: amber only fills the main button (and lives in the logo); no stripes */
.stripe{display:none}
.review .stars{color:var(--ink)}
.foot-h{color:#CFCABF}
.band-specs .eyebrow{color:var(--muted)}

/* header call-to-action (head_label): on small phones only the first word shows; the rest stays in the accessible name */
@media (max-width:480px){.head-actions .lbl-rest{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}

/* the phone menu opens against the header row, inside the screen at every width (it hung off the left at 320 and 360) */
.head-row{position:relative}
.menu{position:static}
.menu nav{right:0;left:auto;max-width:calc(100vw - 2 * var(--gutter))}

/* ===== The motion look (CCC Site Factory, round 12, 2026-09-29). Owner taste: the Aisle & Cradle style board
   (58 Love): modern, Instagram feel, "sticky", full of movement; muted looping video, pastel/tinted bands, two fonts
   at most, a pause-motion control, everything readable with JavaScript off and with motion reduced.
   Every autonomous movement runs only when (1) JavaScript loaded, (2) the reader has not asked the system for reduced
   motion, and (3) the site-wide Pause motion switch is on: html.js[data-motion="on"]. Content never depends on it. ===== */

@font-face{font-family:"Accent";src:url(/assets/accent.24e6c99ca0.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
:root{--accent:"Accent","Iowan Old Style","Palatino Linotype",Georgia,serif;--r-l:22px;--wave:28px}

/* the one accent word: serif italic, a touch larger so it sits on the sans baseline */
h1 em,h2 em,.statement em{font-family:var(--accent);font-style:italic;font-weight:400;font-size:1.08em;letter-spacing:0;font-stretch:100%}
.hero h1 em{color:var(--signal)}

/* ---------- top strip: value marquee + Pause motion ---------- */
.topstrip{background:var(--tint-a);color:var(--ink);border-bottom:1px solid var(--line)}
.topstrip-row{display:flex;align-items:center;gap:var(--s3);min-height:44px}
.marquee{flex:1;min-width:0;overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.marquee-track{display:inline-flex}
.mq{display:inline-flex;margin:0;max-width:none;padding-block:var(--s2);font-size:.95rem;font-weight:600}
.mq span{display:inline-flex;flex:none;align-items:center;gap:var(--s5);padding-right:var(--s5);white-space:nowrap;overflow-wrap:normal}
.mq span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--signal-deep)}
html:not(.js) .mq[aria-hidden],html[data-motion="off"] .mq[aria-hidden]{display:none}
.motion-btn{flex:none;display:none;align-items:center;gap:var(--s2);min-height:44px;min-width:44px;padding:0 var(--s3);border-radius:999px;border:2px solid var(--ink);background:transparent;color:var(--ink);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer}
html.js .motion-btn{display:inline-flex}
.motion-btn .ico{width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.motion-btn.is-paused{background:var(--ink);color:var(--paper)}
.motion-btn.is-paused .ico{border:0;width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
@media (max-width:599px){.motion-btn .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.motion-btn{justify-content:center;padding:0}}

/* ---------- hero: headline straight on the footage, left and bottom scrim, no panel ---------- */
.hero-vid{min-height:min(84svh,780px)}
.hero-vid .vid{position:absolute;inset:0;z-index:-2}
.hero-vid .vid .hero-img,.hero-vid .vid .hero-img img,.hero-vid .vid-el{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-vid .vid-el{opacity:0;transition:opacity .6s var(--ease)}
.hero-vid .vid.playing .vid-el{opacity:1}
.hero-vid .hero-scrim{background:linear-gradient(90deg,rgba(15,22,34,.84) 0%,rgba(15,22,34,.6) 36%,rgba(15,22,34,.12) 64%,rgba(15,22,34,0) 80%),linear-gradient(180deg,rgba(15,22,34,.25) 0%,rgba(15,22,34,0) 30%,rgba(15,22,34,.2) 62%,rgba(15,22,34,.82) 100%)}
.hero-body{background:none;box-shadow:none}
.hero h1{max-width:14ch}
.vid-ctl{position:absolute;right:var(--gutter);bottom:var(--s5);z-index:3;display:none;align-items:center;gap:var(--s2);min-height:44px;min-width:44px;padding:0 var(--s4);border-radius:999px;border:0;background:rgba(15,22,34,.72);color:#fff;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer}
html.js .has-vid .vid-ctl{display:inline-flex}
.vid-ctl .ico-pause{width:10px;height:12px;border-left:3px solid #fff;border-right:3px solid #fff}
.vid-ctl .ico-play{width:0;height:0;border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.vid-ctl:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
/* phone: the footage fills the screen and the words sit on its darkened bottom */
@media (max-width:599px){
  .hero.hero-vid{display:flex;min-height:78svh}
  .hero-vid .vid .hero-img,.hero-vid .vid .hero-img img{position:absolute;aspect-ratio:auto;height:100%}
  .hero-vid .hero-scrim{display:block;background:linear-gradient(180deg,rgba(15,22,34,.2) 0%,rgba(15,22,34,0) 28%,rgba(15,22,34,.55) 55%,rgba(15,22,34,.92) 100%)}
  .hero-vid .hero-body{padding-block:var(--s8) var(--s8)}
  .vid-ctl{top:var(--s4);bottom:auto;padding:0;justify-content:center}
  .vid-ctl .t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* ---------- tinted bands with a soft wave on top ---------- */
.band.tint-a,.band.tint-b,.band.tint-c{border-top:0 !important;position:relative}
.band.tint-a{background:var(--tint-a)}.band.tint-b{background:var(--tint-b)}.band.tint-c{background:var(--tint-c)}
.band.tint-a::before,.band.tint-b::before,.band.tint-c::before{content:"";position:absolute;left:0;right:0;top:calc(var(--wave) * -1 + 1px);height:var(--wave);background:inherit;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V14C150 0 300 0 450 12S750 28 900 16 1100 2 1200 10V28Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V14C150 0 300 0 450 12S750 28 900 16 1100 2 1200 10V28Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}
.hero + .band::before{display:none}
.band.tint-a .card,.band.tint-b .card,.band.tint-c .card,.band.tint-a .qa,.band.tint-b .qa,.band.tint-c .qa{background:#fff}

/* ---------- round trip-type bubbles ---------- */
.bubbles{list-style:none;margin:0;padding:4px 2px 8px;display:grid;grid-auto-flow:column;grid-auto-columns:112px;gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.bub{scroll-snap-align:start;min-width:0}
.bub a{display:flex;flex-direction:column;align-items:center;gap:var(--s2);text-decoration:none;color:var(--ink);font-weight:600;text-align:center;line-height:1.25}
.bub-img{width:104px;height:104px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--signal);display:block}
.bub-img img{width:100%;height:100%;object-fit:cover}
.bub-t{font-size:.95rem;min-height:2.5em}
@media (min-width:900px){.bubbles{grid-auto-flow:row;grid-template-columns:repeat(6,1fr);overflow:visible;gap:var(--s5)}.bub-img{width:132px;height:132px}}
.band-bubbles{padding-block:clamp(40px,5vw,64px)}

/* ---------- the statement ---------- */
.band-statement{padding-block:clamp(72px,10vw,140px)}
.statement{font-size:clamp(2.6rem,1.6rem + 4.6vw,5.5rem);line-height:1.02;max-width:16ch;letter-spacing:-.03em;margin-bottom:var(--s5)}
.statement .w{display:inline;color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  html.js[data-motion="on"] .fill.armed:not(.in) .w{color:#9A9489}
  html.js[data-motion="on"] .fill .w{transition:color .5s var(--ease)}
  html.js[data-motion="on"] .fill.in .w:nth-child(2){transition-delay:.12s}
  html.js[data-motion="on"] .fill.in .w:nth-child(3){transition-delay:.24s}
  html.js[data-motion="on"] .fill.in .w:nth-child(4){transition-delay:.36s}
  html.js[data-motion="on"] .fill.in .w:nth-child(n+5){transition-delay:.48s}
}

/* ---------- sideways card rail ---------- */
.rail-wrap{position:relative}
.rail-arrows{display:none;gap:var(--s2);justify-content:flex-end;margin:calc(var(--s6) * -1) 0 var(--s4)}
html.js .rail-arrows{display:flex}
.arrow{min-width:48px;min-height:48px;border-radius:50%;border:2px solid var(--ink);background:#fff;color:var(--ink);font-size:1.2rem;cursor:pointer}
.cards.rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(82%,340px);grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s3);overscroll-behavior-x:contain}
.cards.rail > li{scroll-snap-align:start}

/* ---------- split: copy column carries stacked cards, photo no taller than the copy ---------- */
.split-stack{align-items:start}
.stack{list-style:none;margin:var(--s4) 0 var(--s5);padding:0;display:grid;gap:var(--s3)}
.mini{background:#fff;border-radius:16px;padding:var(--s4) var(--s5);box-shadow:0 1px 0 var(--line)}
.mini h3{font-size:1.1rem;margin:0 0 4px}
.mini p{margin:0;font-size:1rem}
@media (min-width:900px){.split-stack .split-fig img{aspect-ratio:4/3;max-height:520px}.split .split-fig.portrait img{aspect-ratio:4/5;max-height:560px}}

/* ---------- softer, rounder, Instagram-feel surfaces ---------- */
.card,.split-fig img,.tile picture,.qa,.review figure{border-radius:var(--r-l)}
.card{border:0;box-shadow:0 1px 0 var(--line),0 14px 34px -26px rgba(15,22,34,.4)}
.card-img{overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  html.js[data-motion="on"] .card .card-img img,html.js[data-motion="on"] .tile img{transition:transform .7s var(--ease)}
  html.js[data-motion="on"] .card:hover .card-img img,html.js[data-motion="on"] .tile a:hover img{transform:scale(1.05)}
  html.js[data-motion="on"] .marquee-track{animation:ccs-marq 38s linear infinite}
  html.js[data-motion="on"] .marquee:hover .marquee-track,html.js[data-motion="on"] .marquee:focus-within .marquee-track{animation-play-state:paused}
  html.js[data-motion="on"] .bub a:hover .bub-img{transform:translateY(-3px)}
  html.js[data-motion="on"] .bub-img{transition:transform .25s var(--ease)}
  @keyframes ccs-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
}
/* Pause motion: everything that moves stops, and nothing is left hidden mid-reveal */
html[data-motion="off"] .reveal{opacity:1 !important;transform:none !important}
html[data-motion="off"] .hero-img img{animation:none !important}
@media (prefers-reduced-motion:reduce){.mq[aria-hidden]{display:none}}

/* photo page-heads: the same lighter scrim as the video hero (dark only behind the words, the photo stays bright) */
@media (min-width:600px){
  .hero:not(.no-img) .hero-scrim{background:linear-gradient(90deg,rgba(15,22,34,.84) 0%,rgba(15,22,34,.6) 36%,rgba(15,22,34,.12) 64%,rgba(15,22,34,0) 80%),linear-gradient(180deg,rgba(15,22,34,.25) 0%,rgba(15,22,34,0) 30%,rgba(15,22,34,.2) 62%,rgba(15,22,34,.82) 100%)}
}
/* pages with no photo open on a pastel band instead of solid navy */
.hero.no-img{background:var(--tint-b);color:var(--ink)}
.hero.no-img h1,.hero.no-img .lede{color:var(--ink);text-shadow:none}
.hero.no-img .eyebrow{color:var(--muted)}
.hero.no-img a:not(.btn){color:var(--ink)}
.hero.no-img .btn-ghost{color:var(--ink)}
.hero.no-img :focus-visible{outline-color:var(--focus)}
.hero.no-img h1 em{color:var(--signal-deep)}
.hero.no-img .hero-scrim{display:none}

/* framed page-head: a photo smaller than a wide screen sits beside the words on a pastel band, never stretched */
.hero-frame{padding-block:var(--s7) var(--s8)}
.hero-frame-grid{display:grid;gap:var(--s6);align-items:center}
@media (min-width:900px){.hero-frame-grid{grid-template-columns:1.05fr 1fr}}
.hero-frame .hero-body{padding-block:0}
.hero-frame-fig{margin:0}
.hero-frame-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-l);box-shadow:0 24px 48px -30px rgba(15,22,34,.45)}
/* phone video hero: the words sit on a firm dark base; the small video label is dropped (the button keeps its name) */
@media (max-width:599px){
  .hero-vid .hero-scrim{background:linear-gradient(180deg,rgba(15,22,34,.34) 0%,rgba(15,22,34,.66) 24%,rgba(15,22,34,.86) 44%,rgba(15,22,34,.94) 100%)}
  .vid-ctl .t{display:none}
}
/* mid widths: the words run further across the photo, so the dark side reaches further */
@media (min-width:600px) and (max-width:1099px){
  .hero:not(.no-img) .hero-scrim{background:linear-gradient(90deg,rgba(15,22,34,.88) 0%,rgba(15,22,34,.76) 50%,rgba(15,22,34,.4) 78%,rgba(15,22,34,.15) 100%),linear-gradient(180deg,rgba(15,22,34,.25) 0%,rgba(15,22,34,0) 30%,rgba(15,22,34,.3) 62%,rgba(15,22,34,.85) 100%)}
}
/* cards with no photo sit at their own height, so a short one is not an empty box */
.cards:not(:has(img)){align-items:start}
/* pages with no photo: a compact pastel opener, not a tall empty band */
.hero.no-img:not(.hero-frame){padding-top:var(--s6)}
.hero.no-img:not(.hero-frame) .hero-body{padding-block:var(--s5) var(--s7)}

/* ===== round 1 blind review fixes ===== */
/* the video button is a child of the hero, above the scrim and the words; phones use the Pause motion switch instead */
.hero-vid .vid-ctl{z-index:4}
@media (max-width:599px){html.js .has-vid .vid-ctl{display:none}}
/* phone hero: the faces stay bright in the top half; the dark base sits only under the words */
@media (max-width:599px){
  .hero.hero-vid{min-height:88svh}
  .hero-vid .hero-scrim{background:linear-gradient(180deg,rgba(15,22,34,.18) 0%,rgba(15,22,34,.04) 30%,rgba(15,22,34,.62) 50%,rgba(15,22,34,.9) 64%,rgba(15,22,34,.95) 100%)}
  .hero-vid .hero-body{padding-block:var(--s6) var(--s7)}
  .hero-vid .lede{font-size:1.05rem}
}
/* the statement sits below the headline in size, and shares its band with a photo */
.statement{font-size:clamp(2.3rem,1.5rem + 3.4vw,4rem)}
.statement-grid{display:grid;gap:var(--s6);align-items:center}
@media (min-width:900px){.statement-grid{grid-template-columns:1.25fr 1fr}}
.statement-fig{margin:0}
.statement-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-l);max-height:560px}
/* the booking page: what to have ready stays in view beside the long form */
@media (min-width:900px){.band-form .split-text{position:sticky;top:120px}}
/* the footer's page list runs in two columns */
.foot-grid > div:nth-child(2) ul{columns:2;column-gap:var(--s5)}
/* a still marquee shows whole items only, never a word cut off by the fade */
html:not(.js) .marquee,html[data-motion="off"] .marquee{-webkit-mask-image:none;mask-image:none}
html:not(.js) .mq span:nth-child(n+3),html[data-motion="off"] .mq span:nth-child(n+3){display:none}
@media (prefers-reduced-motion:reduce){.marquee{-webkit-mask-image:none;mask-image:none}.mq span:nth-child(n+3){display:none}}
/* the photo's slow settle runs only while motion is on (it ran with scripts off, where there is no pause) */
.hero-img img{animation:none}
@media (prefers-reduced-motion:no-preference){html.js[data-motion="on"] .hero-img img{animation:settle 9s var(--ease) both}}
/* the narrowest phones: the words wrap taller, so the dark base starts higher (runtime gate at 320) */
@media (max-width:380px){
  .hero-vid .hero-scrim{background:linear-gradient(180deg,rgba(15,22,34,.2) 0%,rgba(15,22,34,.1) 18%,rgba(15,22,34,.72) 34%,rgba(15,22,34,.92) 50%,rgba(15,22,34,.95) 100%)}
  .hero-vid h1{font-size:2.2rem}
}

/* ===== round 2 blind review fixes ===== */
/* phones: a photo page-head is the full background with the words on its lower part (was a strip of photo over a navy slab) */
@media (max-width:599px){
  .hero:not(.no-img):not(.hero-vid){display:flex;align-items:flex-end;min-height:78svh}
  .hero:not(.no-img):not(.hero-vid) .hero-img,.hero:not(.no-img):not(.hero-vid) .hero-img img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
  .hero:not(.no-img):not(.hero-vid) .hero-scrim{display:block;background:linear-gradient(180deg,rgba(15,22,34,.18) 0%,rgba(15,22,34,.06) 30%,rgba(15,22,34,.66) 50%,rgba(15,22,34,.9) 64%,rgba(15,22,34,.95) 100%)}
  .hero:not(.no-img):not(.hero-vid) .hero-body{padding-block:var(--s7) var(--s7)}
}
@media (max-width:380px){.hero:not(.no-img):not(.hero-vid) .hero-scrim{background:linear-gradient(180deg,rgba(15,22,34,.2) 0%,rgba(15,22,34,.1) 18%,rgba(15,22,34,.72) 34%,rgba(15,22,34,.92) 50%,rgba(15,22,34,.95) 100%)}}
/* the video hero's poster never zooms: the zoom ghosted against the video as it faded in */
.hero-vid .hero-img img{animation:none !important}
/* a still marquee on a phone shows one whole item */
@media (max-width:599px){html:not(.js) .mq span:nth-child(n+2),html[data-motion="off"] .mq span:nth-child(n+2){display:none}}
@media (max-width:599px) and (prefers-reduced-motion:reduce){.mq span:nth-child(n+2){display:none}}
/* the statement: its photo is landscape and no taller than the words need; on small phones it stays below the headline */
.statement-fig img{aspect-ratio:4/3;max-height:420px}
@media (max-width:380px){.statement{font-size:1.95rem}}
/* two-column tables on a phone: the row reads left to right, no floating label */
@media (max-width:639px){.tablewrap tbody tr:not(:has(td + td)) td::before{display:none}.tablewrap tbody tr:not(:has(td + td)) td{text-align:left}}
/* rail arrows use the site font (they fell back to Arial) */
.arrow{font-family:var(--body)}
/* phones: the small hero label sat above the dark base on bright photos (runtime gate 1.68-3.83:1); the headline says it anyway */
@media (max-width:599px){.hero:not(.no-img) .hero-body > .eyebrow{display:none}}
/* the FAQ "+" is decoration: screen readers skip it */
.qa summary::after{content:"+" / ""}

/* ===== round 3 blind review fixes ===== */
/* the desktop video reads bright: dark only behind the words on the left, a light base at the very bottom */
@media (min-width:600px){.hero-vid .hero-scrim{background:linear-gradient(90deg,rgba(15,22,34,.82) 0%,rgba(15,22,34,.55) 34%,rgba(15,22,34,.08) 62%,rgba(15,22,34,0) 78%),linear-gradient(180deg,rgba(15,22,34,0) 70%,rgba(15,22,34,.45) 100%)}}
/* text-only bands fill the width: heading on the left, words on the right (no empty right half) */
@media (min-width:900px){
  .band:not(.cta-band) > .wrap:has(> .prose){display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s7);align-items:start}
  .band > .wrap:has(> .prose) > .sec-head{position:sticky;top:120px;margin:0}
  .band > .wrap:has(> .faq){display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s7);align-items:start}
  .band > .wrap:has(> .faq) > .sec-head{margin:0}
  .band > .wrap:has(> .faq) > .faq{max-width:none}
}
/* the closing call band sits centred, so it has no empty right half */
.cta-inner{text-align:center;display:flex;flex-direction:column;align-items:center}
.cta-inner h2,.cta-inner .lede{margin-inline:auto}
.cta-inner .ctas{justify-content:center}
/* phone price table: each sample trip is one row, hours left and price right */
@media (max-width:639px){.tablewrap tbody tr{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);padding:var(--s3) var(--s4)}.tablewrap tbody th,.tablewrap tbody td{padding:0}}
/* phone: the bus photos swipe sideways instead of stacking four tall */
@media (max-width:599px){
  .tiles{grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-bottom:var(--s2)}
  .tiles > li{scroll-snap-align:start}
  .tiles .tile-big{grid-column:auto}
}

/* ===== round 5 blind review fixes ===== */
/* narrowest phones: the faces in the video stay above the dark base (it starts at 44% now; the label is hidden on phones) */
@media (max-width:380px){.hero-vid .hero-scrim{background:linear-gradient(180deg,rgba(15,22,34,.2) 0%,rgba(15,22,34,.06) 26%,rgba(15,22,34,.72) 44%,rgba(15,22,34,.92) 58%,rgba(15,22,34,.95) 100%)}.hero-vid h1{font-size:2rem}}

/* ===== round 6 blind review fixes (B1: phone heroes read as a navy slab, faces lost) ===== */
/* phones: the photo stays bright down to about half way, the dark base caps near .85 and sits only behind the words;
   the tall crops (img_crops/make_tall_crops.py) now put the faces about 22% from the top of a 3:5 frame */
@media (max-width:599px){
  .hero:not(.no-img):not(.hero-vid) .hero-scrim{background:linear-gradient(180deg,rgba(15,22,34,.16) 0%,rgba(15,22,34,.02) 30%,rgba(15,22,34,.3) 46%,rgba(15,22,34,.72) 62%,rgba(15,22,34,.84) 80%,rgba(15,22,34,.86) 100%)}
  .hero-vid .hero-scrim{background:linear-gradient(180deg,rgba(15,22,34,.16) 0%,rgba(15,22,34,.02) 40%,rgba(15,22,34,.4) 58%,rgba(15,22,34,.76) 70%,rgba(15,22,34,.85) 100%)}
  .hero:not(.no-img) h1,.hero:not(.no-img) .lede{text-shadow:0 1px 3px rgba(15,22,34,.55),0 2px 18px rgba(15,22,34,.6)}
}
/* the narrowest phones: the words wrap taller, so the ramp starts a little higher, and the duplicate Call button in the
   hero goes (the header keeps Call), which keeps the words low enough to leave the faces clear */
@media (max-width:380px){
  .hero:not(.no-img):not(.hero-vid) .hero-scrim{background:linear-gradient(180deg,rgba(15,22,34,.16) 0%,rgba(15,22,34,.02) 24%,rgba(15,22,34,.36) 38%,rgba(15,22,34,.74) 52%,rgba(15,22,34,.85) 70%,rgba(15,22,34,.86) 100%)}
  .hero-vid .hero-scrim{background:linear-gradient(180deg,rgba(15,22,34,.16) 0%,rgba(15,22,34,.02) 30%,rgba(15,22,34,.4) 44%,rgba(15,22,34,.76) 56%,rgba(15,22,34,.85) 100%)}
  .hero:not(.no-img) .ctas .btn-ghost[href^="tel:"]{display:none}
  .hero:not(.no-img) h1{font-size:1.85rem}
  .hero:not(.no-img) .lede{font-size:.95rem}
}
/* design P3: a short heading beside prose or an accordion left an empty half at 1280. Text-only and FAQ bands are one
   centred reading column now, heading on top (about 760 px, the width a paragraph reads best at) */
@media (min-width:900px){
  .band:not(.cta-band) > .wrap:has(> .prose),.band > .wrap:has(> .faq){display:block;max-width:calc(760px + 2 * var(--gutter))}
  .band > .wrap:has(> .prose) > .sec-head,.band > .wrap:has(> .faq) > .sec-head{position:static;margin:0 0 var(--s5)}
  .band > .wrap:has(> .faq) > .faq,.band > .wrap:has(> .prose) > .prose{max-width:none}
}
.card-body .credit{font-size:.875rem;color:var(--muted,#5b6472);margin-top:var(--s2)}
/* round 7 P11: with scripts off the rail arrows cannot scroll, so they are not shown (the rail still swipes) */
html:not(.js) .rail-arrows{display:none}
/* round 7 P3: phones keep more of the photo behind the words (cap .78, a firmer text shadow carries the contrast) */
@media (max-width:599px){
  .hero:not(.no-img):not(.hero-vid) .hero-scrim{background:linear-gradient(180deg,rgba(15,22,34,.14) 0%,rgba(15,22,34,.02) 30%,rgba(15,22,34,.28) 46%,rgba(15,22,34,.66) 62%,rgba(15,22,34,.76) 80%,rgba(15,22,34,.78) 100%)}
  .hero:not(.no-img) h1,.hero:not(.no-img) .lede{text-shadow:0 1px 2px rgba(15,22,34,.7),0 2px 20px rgba(15,22,34,.65)}
}
@media (max-width:380px){
  .hero:not(.no-img):not(.hero-vid) .hero-scrim{background:linear-gradient(180deg,rgba(15,22,34,.14) 0%,rgba(15,22,34,.02) 24%,rgba(15,22,34,.32) 38%,rgba(15,22,34,.68) 52%,rgba(15,22,34,.78) 70%,rgba(15,22,34,.78) 100%)}
}
/* round 8 P8: the text-only and FAQ column starts on the page's left edge like every other block (it was centred at x=260) */
@media (min-width:900px){
  .band:not(.cta-band) > .wrap:has(> .prose),.band > .wrap:has(> .faq){max-width:var(--maxw)}
  .band > .wrap:has(> .prose) > *,.band > .wrap:has(> .faq) > *{max-width:760px}
}
/* round 8 P6: phones, the dark base under the words stops at .62; the two-layer text shadow carries the contrast */
@media (max-width:599px){
  .hero:not(.no-img):not(.hero-vid) .hero-scrim{background:linear-gradient(180deg,rgba(15,22,34,.12) 0%,rgba(15,22,34,.02) 30%,rgba(15,22,34,.24) 46%,rgba(15,22,34,.54) 62%,rgba(15,22,34,.62) 80%,rgba(15,22,34,.62) 100%)}
}
@media (max-width:380px){
  .hero:not(.no-img):not(.hero-vid) .hero-scrim{background:linear-gradient(180deg,rgba(15,22,34,.12) 0%,rgba(15,22,34,.02) 24%,rgba(15,22,34,.28) 38%,rgba(15,22,34,.56) 52%,rgba(15,22,34,.62) 70%,rgba(15,22,34,.62) 100%)}
}
/* the runtime gate (r12s) measured the wedding heroes at 2.70-2.98:1 under the .62 cap: bright photos need a little more */
@media (max-width:599px){
  .hero:not(.no-img):not(.hero-vid) .hero-scrim{background:linear-gradient(180deg,rgba(15,22,34,.12) 0%,rgba(15,22,34,.02) 30%,rgba(15,22,34,.32) 46%,rgba(15,22,34,.64) 62%,rgba(15,22,34,.72) 80%,rgba(15,22,34,.72) 100%)}
}
@media (max-width:380px){
  .hero:not(.no-img):not(.hero-vid) .hero-scrim{background:linear-gradient(180deg,rgba(15,22,34,.12) 0%,rgba(15,22,34,.02) 24%,rgba(15,22,34,.34) 38%,rgba(15,22,34,.66) 52%,rgba(15,22,34,.72) 70%,rgba(15,22,34,.72) 100%)}
}
/* owner 2026-09-29: the /stay photo slideshow reuses the card rail; wider slides, caption under each photo */
.gallery .gallery-item{padding:0;overflow:hidden}
.gallery .gallery-cap{margin:0;padding:10px 14px 14px;font-size:.95rem;color:var(--ink)}
.cards.rail.gallery{grid-auto-columns:min(86%,520px)}
/* heroes whose photo is bright where the words sit (site.json "deep": true): the phone shade goes back to .86 */
@media (max-width:599px){.hero.scrim-deep:not(.no-img):not(.hero-vid) .hero-scrim{background:linear-gradient(180deg,rgba(15,22,34,.16) 0%,rgba(15,22,34,.04) 26%,rgba(15,22,34,.5) 42%,rgba(15,22,34,.8) 56%,rgba(15,22,34,.86) 100%)}}