/* Harborside v2 theme (6 Oct 2026) — from Harborside-V2-Reference.html.
   Dark, Bricolage Grotesque + DM Mono, orange → pink → purple gradient.
   Loaded AFTER style.css on every page: it re-points the old variables so
   existing pages follow, restyles the shared chrome (top bar, pill nav,
   footer), and neutralises the light inline colours older pages carry. */
:root{
  --v-bg:#0C0C0E; --v-surface:#141417; --v-surface-2:#1A1A1E; --v-border:#26262B; --v-line:#1E1E22; --v-field:#2E2E34;
  --v-text:#F4F3F0; --v-body:#A1A1A8; --v-soft:#B9B9C0; --v-soft2:#C9C9CF; --v-dim:#7C7C84; --v-faint:#45454C;
  --v-orange:#FF7A1A; --v-pink:#FF3D6E; --v-purple:#C047FF; --v-link:#FF7A4A; --v-link-hover:#FFA27F; --v-green:#3EE08F;
  --v-grad:linear-gradient(100deg,#FF7A1A,#FF3D6E,#C047FF);
  --v-grad-btn:linear-gradient(100deg,#FF7A1A,#FF3D6E,#C047FF,#FF7A1A);
  --v-sans:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --v-mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* the old names, re-pointed */
  --navy:var(--v-text); --navy-dark:#fff; --gold:var(--v-link); --gold-dark:var(--v-link-hover);
  --ink:var(--v-body); --muted:var(--v-soft); --line:var(--v-border);
  --bg:var(--v-bg); --bg-soft:var(--v-surface); --bg-lift:var(--v-surface);
  --green:var(--v-green); --radius:14px; --radius-pill:999px; --max:1320px;
  --font:var(--v-sans); --font-display:var(--v-sans); --track-ui:0; --track-eyebrow:.04em;
  color-scheme:dark;
}
html{background:var(--v-bg)}
body{background:var(--v-bg);color:var(--v-body);font-family:var(--v-sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:var(--v-sans) !important;color:var(--v-text);text-transform:none !important;letter-spacing:-.03em !important;font-weight:800}
h1{line-height:.95;letter-spacing:-.045em !important}
h2{line-height:1}
h3,h4{font-weight:700}
p,li,td,th,label,dd,dt{color:inherit}
a{color:var(--v-link)}
a:hover{color:var(--v-link-hover);text-decoration:none}
strong,b{color:var(--v-text)}
h1 em,h2 em,h3 em{font-style:normal;background:var(--v-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--v-body)}
.eyebrow,.hs-eyebrow,.crumbs{font-family:var(--v-mono) !important;font-size:12px !important;letter-spacing:.04em !important;text-transform:none !important;color:var(--v-link) !important;font-weight:400 !important}
.crumbs,.crumbs a{color:var(--v-dim) !important}
section.soft,.soft{background:transparent}
hr{border-color:var(--v-line)}
code{font-family:var(--v-mono);background:var(--v-surface-2);color:var(--v-text);padding:1px 6px;border-radius:6px}
::selection{background:#FF3D6E55}

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn,a.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px !important;font-family:var(--v-sans) !important;font-weight:700 !important;letter-spacing:0 !important;text-transform:none !important;color:#0C0C0E !important;background-image:var(--v-grad-btn) !important;background-color:transparent !important;background-size:300% 100% !important;background-position:0% 50%;box-shadow:0 10px 36px -12px rgba(255,61,110,.8) !important;transition:background-position .6s,box-shadow .3s,transform .2s;text-decoration:none !important}
.btn:hover{background-position:100% 50%;transform:translateY(-1px);box-shadow:0 14px 40px -10px rgba(192,71,255,.8) !important;color:#0C0C0E !important}
.btn.ghost,.btn-ghost,.btn.btn-ghost-sm,a.btn.ghost{background:linear-gradient(var(--v-bg),var(--v-bg)) padding-box,var(--v-grad) border-box !important;border:1.5px solid transparent !important;color:var(--v-text) !important;box-shadow:none !important}
.btn.ghost:hover{background:linear-gradient(var(--v-surface-2),var(--v-surface-2)) padding-box,var(--v-grad) border-box !important}

/* ── top bar ─────────────────────────────────────────────────────────── */
.v-top{display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;padding:10px 20px;font-family:var(--v-mono);font-size:12px;letter-spacing:.04em;color:var(--v-soft2);border-bottom:1px solid var(--v-line);background:var(--v-bg)}
.v-top .sep{color:var(--v-faint)}
.v-top .g{font-weight:500;background:var(--v-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.bar{display:none !important}

/* ── pill nav (keeps the old class names so main.js's menu toggle works) ── */
header.site{position:sticky;top:12px;z-index:50;display:flex;justify-content:center;padding:12px 16px 0;background:transparent !important;border:0 !important;box-shadow:none !important}
header.site .nav{display:flex;align-items:center;gap:24px;width:100%;max-width:1320px;margin:0 auto;padding:10px 10px 10px 22px !important;border-radius:999px;background:rgba(20,20,23,.72);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--v-border);position:relative;flex-wrap:nowrap}
header.site .logo{display:flex;align-items:center;gap:10px;font-family:var(--v-sans) !important;font-weight:800 !important;font-size:19px !important;color:var(--v-text) !important;letter-spacing:-.03em !important;text-transform:none !important;white-space:nowrap}
header.site .logo em{display:none}
header.site .logo .mark{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,#FF7A1A,#FF3D6E 55%,#C047FF);flex:none}
nav.main{display:flex;gap:22px !important;align-items:center;flex-wrap:nowrap}
nav.main a{font-family:var(--v-sans) !important;font-size:15px !important;font-weight:500 !important;letter-spacing:0 !important;text-transform:none !important;color:var(--v-soft) !important;padding:6px 0 !important;border:0 !important}
nav.main a:hover{color:var(--v-text) !important;border:0 !important}
nav.main a[href="/design/"]{color:var(--v-soft) !important;font-weight:500 !important;padding-right:0 !important}
nav.main a[href="/design/"]:hover{color:var(--v-text) !important}
nav.main a[href="/design/"]::after{display:none}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:14px !important}
.nav-cta .phone{font-family:var(--v-mono) !important;font-size:13px !important;color:var(--v-soft) !important;font-weight:400 !important;letter-spacing:0 !important}
.nav-cta .btn{padding:11px 20px !important;font-size:15px !important;min-height:0}
.menu-toggle{color:var(--v-text) !important;background:transparent !important;border:0 !important;font-size:1.4rem}
@media(min-width:1101px){.menu-toggle{display:none !important}nav.main{display:flex !important;position:static !important}}
@media(max-width:1100px){
  nav.main{display:none !important}
  nav.main.open{display:flex !important;flex-direction:column;align-items:stretch;position:absolute;top:calc(100% + 8px);left:0;right:0;padding:12px 18px;border-radius:22px;background:rgba(20,20,23,.97);border:1px solid var(--v-border);gap:2px !important}
  nav.main.open a{padding:12px 4px !important;border-bottom:1px solid var(--v-line) !important}
  .menu-toggle{display:inline-block !important;order:2;margin-left:auto}
  .nav-cta{margin-left:0;order:3}
  .nav-cta .phone{display:none !important}
}
@media(max-width:480px){
  header.site{padding:10px 10px 0}
  header.site .nav{gap:8px;padding:8px 8px 8px 16px !important}
  header.site .logo{font-size:17px !important}
  .nav-cta .btn{padding:10px 14px !important;font-size:14px !important}
}
@media(max-width:360px){header.site .logo .word{display:none}}

/* ── footer ──────────────────────────────────────────────────────────── */
footer.site{background:var(--v-bg) !important;border-top:1px solid var(--v-line);color:var(--v-body);padding:0 !important}
.v-foot{max-width:1320px;margin:0 auto;padding:56px 24px 24px;display:flex;flex-direction:column;gap:48px}
.v-foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:32px}
.v-foot-about{display:flex;flex-direction:column;gap:12px;max-width:380px}
.v-foot-about p{font-size:16px;line-height:1.5;color:var(--v-soft);margin:0}
.v-foot-about .tel{font-family:var(--v-mono);font-size:13px;color:var(--v-text)}
.v-foot-col{display:flex;flex-direction:column;gap:10px}
.v-foot-col .h{font-family:var(--v-mono);font-size:12px;color:var(--v-dim)}
.v-foot-col a{color:var(--v-soft2);font-size:15px}
.v-foot-col a:hover{color:var(--v-text)}
.v-word{font-weight:800;font-size:clamp(64px,16vw,240px);line-height:.8;letter-spacing:-.06em;background:linear-gradient(100deg,#FF7A1A 0%,#FF3D6E 45%,#C047FF 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:8px;user-select:none}
.v-foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--v-mono);font-size:12px;color:var(--v-dim)}
.v-foot-bottom a{color:var(--v-dim)}
@media(min-width:900px){.v-foot-about{grid-column:span 2}}

/* ── surfaces the older pages use ───────────────────────────────────── */
.card,.product,.tile,.panel,.box,.faq-item,details,.estimate,.estimate-panel,.quote-box,.form-card,.garment-preview,.pricing-card,.tier,.callout,.note,.testimonial,.review,.step,.feature,.hs-featured-card,.hs-price-card,.hs-pricing-card{background:var(--v-surface) !important;border:1px solid var(--v-border) !important;border-radius:20px;color:var(--v-body)}
input,select,textarea{background:var(--v-bg) !important;color:var(--v-text) !important;border:1px solid var(--v-field) !important;border-radius:12px !important;font-family:var(--v-sans)}
input::placeholder,textarea::placeholder{color:var(--v-dim)}
input:focus,select:focus,textarea:focus{outline:2px solid #FF3D6E66;border-color:#FF3D6E !important}
table{border-color:var(--v-border)}
th,td{border-color:var(--v-border) !important}
th{color:var(--v-dim);font-family:var(--v-mono);font-weight:400}
tr:nth-child(even) td{background:transparent}

/* inline light backgrounds and dark text on the older static pages */
[style*="background:#fff" i],[style*="background: #fff" i],[style*="background:#ffffff" i],[style*="background: #ffffff" i],[style*="background:white" i],[style*="background-color:#fff" i],[style*="background:#FAFAF8" i],[style*="background:#F5F5F0" i],[style*="background:#F3F3F0" i],[style*="background:#F6F6F4" i],[style*="background:#FFFBEF" i],[style*="background:#FFF9E6" i],[style*="background:#FFF8E1" i],[style*="background:#F5F7FA" i],[style*="background:var(--bg-soft)" i],[style*="background:var(--bg)" i]{background:var(--v-surface) !important}
[style*="background:#FFFBEF" i],[style*="background:#FFF9E6" i],[style*="background:#FFF8E1" i]{border-color:#FF7A1A55 !important}
[style*="color:#404040" i],[style*="color: #404040" i],[style*="color:#111;" i],[style*="color:#111\"" i],[style*="color:#1b2d4f" i],[style*="color:#3d4a63" i],[style*="color:#5b6678" i],[style*="color:#5c5c58" i],[style*="color:#8b8b85" i],[style*="color:#666" i],[style*="color:#333" i],[style*="color:#222" i],[style*="color:#000" i]{color:var(--v-body) !important}
[style*="color:#E7AD28" i],[style*="color:#E8B620" i],[style*="color:#d9a441" i],[style*="color:#B0821C" i]{color:var(--v-link) !important}
[style*="background:#111" i],[style*="background:#1A1A20" i],[style*="background:var(--navy)" i]{background:var(--v-surface-2) !important}
img{border-radius:inherit}

/* product-photo wells: S&S shots are on white — keep a light well behind them */
.shop-card .img,.v-blank .img,.gallery .main,.gallery .thumbs img,.thumbs button,.garment-preview img,.product .swatch,.cart-line img,.store-style img,.pick img{background:#fff !important}
.cart-badge{color:#0C0C0E !important;background:#F4F3F0 !important}

/* leftovers from the readability check (6 Oct): */
.tier-table th,.spec-table th{background:transparent !important}
.freeship,[class*="freeship"]{color:#0C0C0E !important}
.aif-eyebrow{color:#0C0C0E !important}
.ai-answer-first,.ai-answer-first *{color:var(--v-soft) !important}
.spec-table th,table th{color:var(--v-dim) !important}
/* grid children never grow past their column (an 800px product photo widened catalog pages on phones) */
.grid>*,[class*="grid"]>*{min-width:0}
.v-foot-bottom a{display:inline !important;padding:0 !important}
.v-tall .panel .t,.v-tall .t{color:var(--v-text) !important}

/* guides & comparisons (build-content.js, 7 Oct 2026) */
article.prose .ai-answer-first{margin:18px 0 26px;padding:16px 20px}
article.prose .ai-answer-first p{margin:0;font-size:1.06rem;line-height:1.6}
article.prose .tbl-wrap{overflow-x:auto;margin:14px 0 6px;-webkit-overflow-scrolling:touch}
article.prose table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:480px}
article.prose th,article.prose td{padding:10px 12px;border-bottom:1px solid var(--v-border);text-align:left;vertical-align:top;color:var(--v-body)}
article.prose th{font-family:var(--v-mono);font-size:12px;letter-spacing:.04em;font-weight:500;background:var(--v-surface-2);color:var(--v-soft2) !important}
article.prose td:first-child{color:var(--v-text);font-weight:600}
article.prose .table-note{font-size:.86rem;color:var(--v-dim);margin:6px 0 18px}
article.prose ul.related{list-style:none;margin-left:0;padding:0}
article.prose ul.related li{padding:10px 0;border-bottom:1px solid var(--v-border)}
article.prose h3{font-size:1.08rem}

/* top bar: four promises on desktop, three on phones (7 Oct 2026) */
@media(max-width:700px){.v-top>span:nth-child(n+6){display:none}}