/* ===========================================================
   CoreyTheGreat — Editorial Portfolio System
   Shared stylesheet (multi-page)
   =========================================================== */
:root{
  /* Surfaces */
  --bg:#EFEEEB; --bg-cool:#EAEBEC; --surface:#E6E5E1; --surface-2:#DEDDD8;
  /* Ink */
  --ink:#0E0E0E; --ink-2:#3F3F3D; --ink-muted:#767672; --ink-faint:#A6A6A1;
  --line:rgba(14,14,14,0.14); --line-strong:rgba(14,14,14,0.32);
  /* Accent */
  --accent:#A6C4E6; --accent-deep:#5B7FA6; --accent-wash:#DCE7F3;
  /* Expressive — content only */
  --pop-lime:#C6F032; --pop-magenta:#FF3D9A; --pop-blue:#1F3CFF; --pop-violet:#6B4BD6;
  /* Type */
  --font-display:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-text:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"Space Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --t-hero:clamp(4.5rem,17vw,17rem);
  --t-display:clamp(3rem,10vw,9rem);
  --t-xl:clamp(2.25rem,6vw,4.5rem);
  --t-l:clamp(1.75rem,3.4vw,2.75rem);
  --t-m:1.375rem; --t-body:1rem; --t-sm:0.875rem; --t-label:0.75rem;
  /* Spacing */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-6:1.5rem; --s-8:2rem;
  --s-12:3rem; --s-16:4rem; --s-24:6rem; --s-32:8rem; --s-40:10rem;
  --gutter:clamp(1.25rem,4vw,3rem); --maxw:1480px; --radius:0px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-text); background:var(--bg); color:var(--ink);
  font-size:var(--t-body); line-height:1.55; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}
.uc{text-transform:uppercase; letter-spacing:.09em; font-weight:600; font-size:var(--t-label)}
.mono{font-family:var(--font-mono); letter-spacing:.04em}
a{color:inherit; text-decoration:none}
img{display:block; width:100%; height:100%; object-fit:cover}
:focus-visible{outline:2px solid var(--accent-deep); outline-offset:3px}
.ast{display:inline-block; color:var(--accent); vertical-align:baseline}

/* ---- Top nav ---- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:color-mix(in srgb,var(--bg) 88%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; height:60px; gap:var(--s-6)}
.brand{display:flex; align-items:center; gap:var(--s-3)}
.brand img{width:auto; height:30px; object-fit:contain; filter:contrast(1.05)}
.brand .wordmark{font-family:var(--font-display); font-weight:800; letter-spacing:-0.02em;
  text-transform:uppercase; font-size:1.05rem}
.topbar .nav{display:flex; gap:var(--s-6); align-items:center}
.topbar .nav a{color:var(--ink-muted); transition:color .45s cubic-bezier(.22,1,.36,1); position:relative}
.topbar .nav a:hover{color:var(--ink)}
.topbar .nav a.active{color:var(--ink)}
.topbar .nav a.active::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--accent-deep)}
@media(max-width:860px){.topbar .nav{gap:var(--s-4)} .topbar .nav a.ext{display:none}}
@media(max-width:680px){.topbar .nav a{font-size:10px} .topbar .nav{gap:var(--s-3)}}

/* ---- Page header offset ---- */
.page{padding-top:60px}

/* ---- Cover / hero ---- */
.cover{
  background:var(--bg-cool); min-height:calc(100vh - 60px);
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.cover-watermark{position:absolute; right:-4%; bottom:-6%; width:min(46vw,560px);
  opacity:.07; pointer-events:none; filter:grayscale(1) contrast(1.2)}
.cover-watermark img{width:100%; height:auto; object-fit:contain}
.meta-bar{display:flex; justify-content:space-between; gap:var(--s-4);
  color:var(--ink-muted); padding:var(--s-8) 0 0}
.meta-bar .right{text-align:right}
.cover-center{flex:1; display:flex; flex-direction:column; justify-content:center; padding:var(--s-8) 0; position:relative; z-index:1}
.eyebrow{display:flex; align-items:center; gap:var(--s-3); color:var(--ink-muted); margin-bottom:var(--s-6); flex-wrap:wrap}
.hero-word{font-family:var(--font-display); font-weight:800; font-size:var(--t-hero);
  line-height:0.86; letter-spacing:-0.04em; text-transform:uppercase}
.hero-sub{display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s-6);
  margin-top:var(--s-8); padding-top:var(--s-6); border-top:1px solid var(--line-strong)}
.hero-sub p{max-width:38ch; color:var(--ink-2); font-size:var(--t-m); line-height:1.4}
.hero-sub .roles{color:var(--ink-muted); text-align:right; line-height:1.9}

/* Glitch wordmark */
.glitch{position:relative; display:inline-block; color:var(--ink)}
.glitch::before,.glitch::after{content:attr(data-text); position:absolute; top:0; left:0; width:100%;
  overflow:hidden; pointer-events:none}
.glitch::before{color:var(--accent); clip-path:inset(0 0 55% 0); transform:translate(-2px,-2px)}
.glitch::after{color:var(--ink); clip-path:inset(58% 0 0 0); transform:translate(2px,2px)}
@media(prefers-reduced-motion:no-preference){
  .glitch::before{animation:gl-top 4.2s steps(2,end) infinite}
  .glitch::after{animation:gl-bot 3.4s steps(2,end) infinite}
  @keyframes gl-top{0%,72%,100%{transform:translate(-2px,-2px)}74%{transform:translate(-7px,-2px)}78%{transform:translate(3px,-2px)}82%{transform:translate(-2px,-2px)}}
  @keyframes gl-bot{0%,80%,100%{transform:translate(2px,2px)}84%{transform:translate(8px,2px)}88%{transform:translate(-3px,2px)}92%{transform:translate(2px,2px)}}
}

/* ---- Section / page opener ---- */
.opener{padding:var(--s-24) 0 var(--s-12); border-top:1px solid var(--line)}
.opener:first-of-type{border-top:none}
.opener-head{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-8); flex-wrap:wrap}
.opener-num{display:flex; align-items:center; gap:var(--s-4)}
.opener-num .num{font-family:var(--font-display); font-weight:800; font-size:var(--t-display);
  line-height:0.9; letter-spacing:-0.04em}
.opener-num .ast{width:clamp(28px,4vw,52px); height:clamp(28px,4vw,52px)}
.opener-title{font-family:var(--font-display); font-weight:800; font-size:var(--t-xl);
  line-height:0.95; letter-spacing:-0.03em; text-transform:uppercase; text-align:right; max-width:14ch}
.strip{display:flex; gap:var(--s-6); flex-wrap:wrap; margin-top:var(--s-8);
  padding:var(--s-3) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--ink-muted)}
.strip span{display:flex; align-items:center; gap:var(--s-3)}
.strip .dot{color:var(--accent-deep)}
.opener-cap{display:flex; gap:var(--s-2); margin-top:var(--s-4); color:var(--ink-muted)}
.opener-cap b{color:var(--ink); font-weight:600}

/* ---- Work grid ---- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--s-6); margin-top:var(--s-12)}
.grid.tall{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{border:1px solid var(--line); background:var(--surface); transition:border-color .45s cubic-bezier(.22,1,.36,1)}
.card:hover{border-color:var(--line-strong)}
.card .thumb{aspect-ratio:3/4; background:var(--surface-2); overflow:hidden; position:relative}
.card .thumb .ph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:clamp(3rem,8vw,5rem); letter-spacing:-0.04em; color:var(--bg)}
.card:hover .thumb img{transform:scale(1.03)}
.card .thumb img{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.card .cap{display:flex; justify-content:space-between; gap:var(--s-3); padding:var(--s-3) var(--s-4); color:var(--ink-muted)}
.card .cap b{color:var(--ink); font-weight:600}
.t-lime{background:var(--pop-lime)} .t-mag{background:var(--pop-magenta)}
.t-blue{background:var(--pop-blue)} .t-vio{background:var(--pop-violet)}
.t-ink{background:var(--ink)} .t-acc{background:var(--accent-deep)}

/* ---- Section teaser (home) ---- */
.teaser{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-6); margin-top:var(--s-12)}
.teaser .tcard{position:relative; border:1px solid var(--line); background:var(--surface-2);
  aspect-ratio:3/4; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end}
.teaser .tcard img{position:absolute; inset:0; z-index:0; filter:grayscale(.15)}
.teaser .tcard:hover img{transform:scale(1.04)}
.teaser .tcard img{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.teaser .tcard .lbl{position:relative; z-index:1; padding:var(--s-6);
  background:linear-gradient(to top,rgba(14,14,14,.78),transparent)}
.teaser .tcard .lbl .k{font-family:var(--font-display); font-weight:800; font-size:var(--t-l);
  letter-spacing:-0.03em; text-transform:uppercase; color:#fff; line-height:.95}
.teaser .tcard .lbl .n{display:block; color:rgba(255,255,255,.7); margin-top:var(--s-2); font-size:11px;
  text-transform:uppercase; letter-spacing:.09em; font-weight:600}
@media(max-width:720px){.teaser{grid-template-columns:1fr}}

/* ---- Feed ---- */
.feed-list{margin-top:var(--s-12); border-top:1px solid var(--line)}
.feed-row{display:grid; grid-template-columns:auto 1fr auto; gap:var(--s-6); align-items:baseline;
  padding:var(--s-6) 0; border-bottom:1px solid var(--line); transition:background .45s cubic-bezier(.22,1,.36,1)}
.feed-row:hover{background:var(--surface)}
.feed-row .idx{font-family:var(--font-mono); color:var(--ink-faint); font-size:var(--t-sm)}
.feed-row .body .ttl{font-family:var(--font-display); font-weight:800; letter-spacing:-0.02em;
  font-size:var(--t-l); line-height:1; text-transform:uppercase}
.feed-row .body .tags{display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-3)}
.feed-row .body .tag{font-family:var(--font-mono); font-size:11px; color:var(--ink-muted); border:1px solid var(--line); padding:.15rem .5rem}
.feed-row .when{font-family:var(--font-mono); color:var(--ink-muted); font-size:var(--t-sm); white-space:nowrap}
@media(max-width:720px){.feed-row{grid-template-columns:1fr; gap:var(--s-2)} .feed-row .when{order:-1}}

/* ---- About ---- */
.about{padding:var(--s-24) 0; border-top:1px solid var(--line)}
.about-grid{display:grid; grid-template-columns:1fr 1.2fr; gap:var(--s-16); align-items:start}
.about h2{font-family:var(--font-display); font-weight:800; font-size:var(--t-l); letter-spacing:-0.03em; line-height:1.05}
.about p{color:var(--ink-2); font-size:var(--t-m); line-height:1.5; margin-top:var(--s-4)}
.about p+p{margin-top:var(--s-4)}
.specs{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-6); margin-top:var(--s-8)}
.spec b{display:block; color:var(--ink); font-weight:600; margin-bottom:var(--s-1)}
.spec span{color:var(--ink-muted); font-size:var(--t-sm)}
@media(max-width:720px){.about-grid{grid-template-columns:1fr; gap:var(--s-8)}}

/* ---- Services list (about) ---- */
.svc{margin-top:var(--s-12); border-top:1px solid var(--line)}
.svc-row{display:grid; grid-template-columns:auto 1fr; gap:var(--s-8); align-items:baseline;
  padding:var(--s-6) 0; border-bottom:1px solid var(--line)}
.svc-row .n{font-family:var(--font-mono); color:var(--ink-faint); font-size:var(--t-sm)}
.svc-row .t{font-family:var(--font-display); font-weight:800; letter-spacing:-0.03em;
  font-size:var(--t-xl); text-transform:uppercase; line-height:.95}

/* ---- Pricing / rates ---- */
.rates{margin-top:var(--s-12); border-top:1px solid var(--line)}
.rate-row{display:grid; grid-template-columns:auto 1fr auto; gap:var(--s-8); align-items:baseline;
  padding:var(--s-6) 0; border-bottom:1px solid var(--line); transition:background .45s cubic-bezier(.22,1,.36,1)}
.rate-row:hover{background:var(--surface)}
.rate-row .n{font-family:var(--font-mono); color:var(--ink-faint); font-size:var(--t-sm)}
.rate-row .svc-t{font-family:var(--font-display); font-weight:800; letter-spacing:-0.03em;
  font-size:var(--t-l); text-transform:uppercase; line-height:.95}
.rate-row .desc{color:var(--ink-muted); font-size:var(--t-sm); margin-top:var(--s-2); max-width:46ch}
.rate-row .price{text-align:right; white-space:nowrap}
.rate-row .price .from{display:block; color:var(--ink-muted); text-transform:uppercase;
  letter-spacing:.09em; font-size:10px; font-weight:600; margin-bottom:var(--s-1)}
.rate-row .price .amt{font-family:var(--font-mono); font-weight:700; font-size:var(--t-m); color:var(--ink)}
.rate-note{margin-top:var(--s-8); color:var(--ink-muted); font-size:var(--t-sm); max-width:60ch}
.rate-note b{color:var(--ink); font-weight:600}
@media(max-width:680px){
  .rate-row{grid-template-columns:auto 1fr; gap:var(--s-4)}
  .rate-row .price{grid-column:2; text-align:left; margin-top:var(--s-2)}
  .rate-row .price .from{display:inline; margin-right:var(--s-2)}
}

/* ---- Booking form ---- */
.book-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:var(--s-16); align-items:start; margin-top:var(--s-12)}
@media(max-width:860px){.book-grid{grid-template-columns:1fr; gap:var(--s-8)}}
.book-types{border-top:1px solid var(--line)}
.book-type{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-4);
  padding:var(--s-4) 0; border-bottom:1px solid var(--line)}
.book-type .bt-t{font-family:var(--font-display); font-weight:800; letter-spacing:-0.02em;
  font-size:var(--t-m); text-transform:uppercase}
.book-type .bt-p{font-family:var(--font-mono); color:var(--ink-muted); font-size:var(--t-sm); white-space:nowrap}
.book-intro{color:var(--ink-2); font-size:var(--t-m); line-height:1.5; margin-bottom:var(--s-8)}

.steps{margin-top:var(--s-8); display:flex; flex-direction:column; gap:var(--s-3)}
.steps .sh{color:var(--ink-muted); text-transform:uppercase; letter-spacing:.09em; font-size:var(--t-label); font-weight:600; margin-bottom:var(--s-1)}
.step{display:flex; gap:var(--s-3); align-items:baseline}
.step .sn{font-family:var(--font-mono); color:var(--accent-deep); font-weight:700; font-size:var(--t-sm); min-width:1.5rem}
.step .sx{color:var(--ink-2); font-size:var(--t-sm); line-height:1.5}
.step .sx b{color:var(--ink); font-weight:600}

.calc{margin-top:var(--s-6); padding:var(--s-6); background:var(--surface-2); border:1px solid var(--line)}
.calc .clabel{color:var(--ink-muted); text-transform:uppercase; letter-spacing:.09em; font-size:var(--t-label); font-weight:600; margin-bottom:var(--s-3); display:block}
.calc select{width:100%; font-family:var(--font-text); font-size:var(--t-body); color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:0; padding:var(--s-3) var(--s-4);
  transition:border-color .45s cubic-bezier(.22,1,.36,1)}
.calc select:focus{outline:none; border-color:var(--accent-deep)}
.calc .out{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-4);
  margin-top:var(--s-4); padding-top:var(--s-4); border-top:1px solid var(--line)}
.calc .out .k{color:var(--ink-muted); text-transform:uppercase; letter-spacing:.09em; font-size:var(--t-label); font-weight:600}
.calc .out .v{font-family:var(--font-mono); font-weight:700; font-size:var(--t-m); color:var(--ink); white-space:nowrap}
.calc .cnote{color:var(--ink-muted); font-size:var(--t-sm); margin-top:var(--s-3); line-height:1.5}

.deposit{margin-top:var(--s-8); padding-top:var(--s-6); border-top:1px solid var(--line)}
.deposit .dlabel{color:var(--ink-muted); text-transform:uppercase; letter-spacing:.09em; font-size:var(--t-label); font-weight:600; margin-bottom:var(--s-3)}
.deposit .dnote{color:var(--ink-muted); font-size:var(--t-sm); margin-top:var(--s-3)}

.form{display:flex; flex-direction:column; gap:var(--s-4)}
.field{display:flex; flex-direction:column; gap:var(--s-2)}
.field label{color:var(--ink-muted); text-transform:uppercase; letter-spacing:.09em; font-size:var(--t-label); font-weight:600}
.field .req{color:var(--accent-deep)}
.field input,.field select,.field textarea{
  font-family:var(--font-text); font-size:var(--t-body); color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:0;
  padding:var(--s-3) var(--s-4); transition:border-color .45s cubic-bezier(.22,1,.36,1)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--accent-deep)}
.field textarea{resize:vertical; min-height:120px}
.field-2{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4)}
@media(max-width:560px){.field-2{grid-template-columns:1fr}}
.form .btn{align-self:flex-start; margin-top:var(--s-2); border:none; cursor:pointer}
.form-note{color:var(--ink-muted); font-size:var(--t-sm); margin-top:var(--s-2)}
.form-note b{color:var(--ink); font-weight:600}

/* ---- CTA band ---- */
.band{background:var(--surface); border-top:1px solid var(--line); padding:var(--s-24) 0}
.band-inner{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-8); flex-wrap:wrap}
.band h2{font-family:var(--font-display); font-weight:800; font-size:var(--t-display);
  line-height:0.9; letter-spacing:-0.04em; text-transform:uppercase}
.btnrow{display:flex; gap:var(--s-4); flex-wrap:wrap}
.btn{font-family:var(--font-text); font-weight:600; text-transform:uppercase; letter-spacing:.09em;
  font-size:var(--t-sm); padding:.75rem 1.5rem; border:1px solid var(--ink); background:var(--ink);
  color:var(--bg); border-radius:0; cursor:pointer; transition:.45s cubic-bezier(.22,1,.36,1);
  display:inline-flex; align-items:center; gap:var(--s-2)}
.btn:hover{background:transparent; color:var(--ink)}
.btn--ghost{background:transparent; color:var(--ink)}
.btn--ghost:hover{background:var(--ink); color:var(--bg)}
.btn--accent{background:var(--accent); border-color:var(--accent); color:var(--ink)}
.btn--accent:hover{background:transparent; color:var(--ink); border-color:var(--ink)}

/* ---- Footer ---- */
footer{background:var(--surface); border-top:1px solid var(--line); padding:var(--s-12) 0 var(--s-8)}
.foot-grid{display:flex; justify-content:space-between; gap:var(--s-8); flex-wrap:wrap}
.foot-col h4{color:var(--ink-muted); margin-bottom:var(--s-3)}
.foot-col a{display:block; color:var(--ink-2); line-height:1.9; transition:color .45s cubic-bezier(.22,1,.36,1)}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{display:flex; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap;
  margin-top:var(--s-12); padding-top:var(--s-4); border-top:1px solid var(--line); color:var(--ink-muted)}

/* ---- Chatbot ---- */
.cb-launch{position:fixed; right:var(--gutter); bottom:var(--gutter); z-index:60;
  display:inline-flex; align-items:center; gap:var(--s-2); cursor:pointer;
  font-family:var(--font-text); font-weight:600; text-transform:uppercase; letter-spacing:.09em;
  font-size:var(--t-label); padding:.85rem 1.25rem; border:1px solid var(--ink);
  background:var(--ink); color:var(--bg); border-radius:0; transition:.45s cubic-bezier(.22,1,.36,1)}
.cb-launch:hover{background:transparent; color:var(--ink)}
.cb-launch .ast{color:var(--accent)}
.cb-launch:hover .ast{color:var(--accent-deep)}
.cb-launch[hidden]{display:none}
.cb-panel{position:fixed; right:var(--gutter); bottom:var(--gutter); z-index:61;
  width:min(380px,calc(100vw - 2*var(--gutter))); height:min(560px,calc(100vh - 2*var(--gutter)));
  display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--ink); border-radius:0}
.cb-panel[hidden]{display:none}
@media(prefers-reduced-motion:no-preference){
  .cb-panel{animation:cb-in .45s cubic-bezier(.22,1,.36,1)}
  @keyframes cb-in{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
}
.cb-head{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding:var(--s-4); border-bottom:1px solid var(--line); background:var(--bg-cool)}
.cb-head .title{display:flex; align-items:center; gap:var(--s-2); font-family:var(--font-display);
  font-weight:800; letter-spacing:-0.02em; font-size:var(--t-m)}
.cb-head .ast{color:var(--accent)}
.cb-head .sub{display:block; color:var(--ink-muted); font-size:10px; text-transform:uppercase;
  letter-spacing:.09em; font-weight:600; margin-top:2px}
.cb-close{background:none; border:none; cursor:pointer; color:var(--ink-muted); font-size:1.25rem;
  line-height:1; padding:var(--s-2); transition:color .45s cubic-bezier(.22,1,.36,1)}
.cb-close:hover{color:var(--ink)}
.cb-log{flex:1; overflow-y:auto; padding:var(--s-4); display:flex; flex-direction:column; gap:var(--s-3)}
.cb-msg{max-width:85%; padding:var(--s-3) var(--s-4); font-size:var(--t-sm); line-height:1.5; border:1px solid var(--line)}
.cb-msg.bot{align-self:flex-start; background:var(--surface); color:var(--ink)}
.cb-msg.user{align-self:flex-end; background:var(--ink); color:var(--bg); border-color:var(--ink)}
.cb-msg a{color:var(--accent-deep); text-decoration:underline; text-underline-offset:2px}
.cb-msg.user a{color:var(--accent)}
.cb-chips{display:flex; flex-wrap:wrap; gap:var(--s-2); padding:0 var(--s-4) var(--s-3)}
.cb-chip{font-family:var(--font-text); font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  font-weight:600; cursor:pointer; padding:.4rem .7rem; border:1px solid var(--line-strong);
  background:transparent; color:var(--ink-2); border-radius:0; transition:.45s cubic-bezier(.22,1,.36,1)}
.cb-chip:hover{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.cb-form{display:flex; gap:0; border-top:1px solid var(--line)}
.cb-input{flex:1; border:none; background:transparent; padding:var(--s-4);
  font-family:var(--font-text); font-size:var(--t-sm); color:var(--ink)}
.cb-input::placeholder{color:var(--ink-faint)}
.cb-input:focus{outline:none}
.cb-send{border:none; border-left:1px solid var(--line); background:var(--ink); color:var(--bg); cursor:pointer;
  padding:0 var(--s-6); font-family:var(--font-text); font-weight:600; text-transform:uppercase;
  letter-spacing:.09em; font-size:var(--t-label); transition:.45s cubic-bezier(.22,1,.36,1)}
.cb-send:hover{background:var(--accent-deep)}

/* ---- Purchase: clickable rates + modal ---- */
.rate-row.buy{cursor:pointer}
.rate-row.buy:focus-visible{background:var(--surface)}
.rate-row.buy .svc-t{transition:color .45s cubic-bezier(.22,1,.36,1)}
.rate-row.buy:hover .svc-t{color:var(--accent-deep)}
.rate-row .price .reserve{display:block; margin-top:var(--s-1); color:var(--accent-deep);
  text-transform:uppercase; letter-spacing:.09em; font-size:10px; font-weight:600;
  opacity:0; transition:opacity .45s cubic-bezier(.22,1,.36,1)}
.rate-row.buy:hover .price .reserve,.rate-row.buy:focus-visible .price .reserve{opacity:1}
@media(max-width:680px){.rate-row .price .reserve{opacity:1}}

.modal{position:fixed; inset:0; z-index:80; display:none; align-items:flex-start; justify-content:center;
  padding:var(--gutter); overflow-y:auto; background:rgba(14,14,14,.55)}
.modal.open{display:flex}
.modal-card{background:var(--bg); border:1px solid var(--ink); width:min(560px,100%);
  margin:auto; padding:var(--s-8)}
@media(prefers-reduced-motion:no-preference){
  .modal.open .modal-card{animation:modal-in .45s cubic-bezier(.22,1,.36,1)}
  @keyframes modal-in{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
}
.modal-head{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s-4); margin-bottom:var(--s-6)}
.modal-head .mt{font-family:var(--font-display); font-weight:800; font-size:var(--t-l);
  letter-spacing:-0.03em; text-transform:uppercase; line-height:1}
.modal-head .msub{color:var(--ink-muted); font-size:var(--t-sm); margin-top:var(--s-2)}
.modal-close{background:none; border:none; cursor:pointer; color:var(--ink-muted); font-size:1.4rem;
  line-height:1; padding:var(--s-2); transition:color .45s cubic-bezier(.22,1,.36,1)}
.modal-close:hover{color:var(--ink)}
.modal .selected{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-4);
  padding:var(--s-4); background:var(--surface-2); border:1px solid var(--line); margin-bottom:var(--s-6)}
.modal .selected .sv-t{font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:-0.02em}
.modal .selected .sv-p{font-family:var(--font-mono); color:var(--ink-muted); font-size:var(--t-sm); white-space:nowrap}

/* Buy modal — sub-product picker */
.buy-options{display:flex; flex-direction:column; gap:var(--s-3); margin-bottom:var(--s-6)}
.buy-opt{display:flex; justify-content:space-between; align-items:center; gap:var(--s-4);
  padding:var(--s-4); border:1px solid var(--line); background:var(--surface); cursor:pointer;
  transition:border-color .45s cubic-bezier(.22,1,.36,1), background .45s cubic-bezier(.22,1,.36,1)}
.buy-opt:hover{border-color:var(--line-strong)}
.buy-opt.sel{border-color:var(--accent-deep); background:var(--accent-wash)}
.buy-opt .bo-t{font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:-0.02em; font-size:var(--t-m)}
.buy-opt .bo-d{color:var(--ink-muted); font-size:var(--t-sm); margin-top:2px}
.buy-opt .bo-p{font-family:var(--font-mono); font-weight:700; color:var(--ink); white-space:nowrap}
.buy-opt.off{opacity:.55; cursor:not-allowed; background:var(--surface-2)}
.buy-opt.off:hover{border-color:var(--line)}
.buy-opt .off-tag{font-family:var(--font-text); font-weight:600; font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-muted)}
#buyNowBtn{align-self:flex-start; border:none; cursor:pointer}
#buyNowBtn:disabled{opacity:.5; cursor:not-allowed}

/* ---- Calendar date picker ---- */
.cal{border:1px solid var(--line); background:var(--surface-2); padding:var(--s-4)}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s-3)}
.cal-title{font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:-0.01em; font-size:var(--t-sm)}
.cal-nav{width:30px; height:30px; border:1px solid var(--line); background:var(--bg); color:var(--ink);
  cursor:pointer; font-size:1.1rem; line-height:1; border-radius:0;
  transition:border-color .45s cubic-bezier(.22,1,.36,1), color .45s cubic-bezier(.22,1,.36,1)}
.cal-nav:hover:not(:disabled){border-color:var(--accent-deep); color:var(--accent-deep)}
.cal-nav:disabled{opacity:.35; cursor:not-allowed}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:3px}
.cal-dow{margin-bottom:3px}
.cal-dowc{text-align:center; font-family:var(--font-mono); font-size:10px; color:var(--ink-muted); padding:2px 0}
.cal-day{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:0;
  border:1px solid transparent; background:var(--bg); color:var(--ink); cursor:pointer;
  font-family:var(--font-text); font-size:var(--t-sm); border-radius:0;
  transition:border-color .3s cubic-bezier(.22,1,.36,1), background .3s cubic-bezier(.22,1,.36,1)}
.cal-day:hover:not(:disabled){border-color:var(--accent-deep)}
.cal-empty{background:transparent; cursor:default}
.cal-past{opacity:.3; cursor:not-allowed; text-decoration:line-through}
.cal-on{background:var(--accent-deep); color:#fff; font-weight:600}
.cal-on:hover{border-color:var(--accent-deep)}
.cal-sel{margin-top:var(--s-3); font-family:var(--font-mono); font-size:var(--t-sm); color:var(--ink)}

/* ---- Travel calculator input ---- */
.calc .trow{display:flex; align-items:center; gap:var(--s-3)}
.calc .tmiles{flex:1; min-width:0; font-family:var(--font-text); font-size:var(--t-body); color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:0; padding:var(--s-3) var(--s-4);
  transition:border-color .45s cubic-bezier(.22,1,.36,1)}
.calc .tmiles:focus{outline:none; border-color:var(--accent-deep)}
.calc .tunit{font-family:var(--font-mono); color:var(--ink-muted); font-size:var(--t-sm)}