/* Vinyl Alchemy refresh — 2026-11-06. Self-hosted Exo 2 (headlines) and Inter (body), both SIL Open Font License. */
@font-face{font-family:"Exo 2";font-style:normal;font-weight:600;font-display:swap;src:url(/media/fonts/exo-2-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Exo 2";font-style:normal;font-weight:700;font-display:swap;src:url(/media/fonts/exo-2-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Exo 2";font-style:normal;font-weight:800;font-display:swap;src:url(/media/fonts/exo-2-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Exo 2";font-style:italic;font-weight:800;font-display:swap;src:url(/media/fonts/exo-2-latin-800-italic.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/media/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(/media/fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(/media/fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(/media/fonts/inter-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:800;font-display:swap;src:url(/media/fonts/inter-latin-800-normal.woff2) format("woff2")}

/* Headlines in Exo 2, the monogram's typeface */
h1,h2,h3,blockquote p,.process-track p,.price-cards strong,.location-mark span,.page-hero-mark span,.accordion-list summary,.quote-form legend{font-family:"Exo 2",Arial Narrow,Roboto Condensed,ui-sans-serif,sans-serif}
h1,h2,h3{letter-spacing:-.012em;font-weight:700}
h1{font-weight:800}

/* ---------- Homepage hero: photo first ---------- */
.va-hero{position:relative;background:var(--navy-950);overflow:hidden}
.va-hero-media{margin:0;position:relative}
.va-hero-media img{display:block;width:100%;height:clamp(460px,70vh,700px);object-fit:cover;object-position:50% 58%}
.va-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#03122df2 0%,#03122dcc 34%,#03122d33 62%,#03122d00 80%),linear-gradient(0deg,#03122dcc 0%,#03122d00 38%)}
.va-hero-copy{position:absolute;inset:0;display:flex;align-items:center;z-index:1}
.va-hero-copy .shell{width:var(--shell)}
.va-hero-copy h1{max-width:15ch;margin-bottom:18px;font-size:clamp(2.2rem,4.2vw,4.1rem);line-height:1.04}
.va-hero-copy .lede{max-width:46ch;color:var(--silver-100);font-size:clamp(1.05rem,1.45vw,1.25rem)}
.va-hero-tag{position:absolute;right:clamp(14px,3vw,40px);bottom:clamp(14px,3vw,34px);z-index:1;background:#03122dcc;border:1px solid #f0dc7a59;border-radius:999px;padding:8px 14px;color:var(--silver-100);font-size:.78rem;font-weight:700;letter-spacing:.02em}
.va-hero-tag span{color:var(--gold-400);text-transform:uppercase;letter-spacing:.12em;font-size:.66rem;font-weight:900;margin-right:8px}
@media (max-width:760px){
  .va-hero-media img{height:280px;object-position:50% 60%}
  .va-hero-media::after{background:linear-gradient(0deg,#03122d 0%,#03122d00 45%)}
  .va-hero-copy{position:relative;inset:auto;display:block;padding:6px 0 34px}
  .va-hero-copy h1{font-size:clamp(2rem,8.6vw,2.6rem)}
  .va-hero-tag{top:12px;bottom:auto;right:12px;font-size:.7rem;padding:6px 11px}
}

/* ---------- Jump links ---------- */
.va-jump{background:#071a3b;border-block:1px solid #73edff24;position:relative;z-index:2}
.va-jump ul{list-style:none;margin:0 auto;padding:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-block:12px}
.va-jump ul::-webkit-scrollbar{display:none}
.va-jump a{display:inline-block;white-space:nowrap;padding:9px 16px;border-radius:999px;border:1px solid #73edff40;color:var(--silver-100);text-decoration:none;font-size:.86rem;font-weight:700}
.va-jump a:hover,.va-jump a:focus-visible{border-color:var(--gold-400);color:var(--gold-400)}
[id]{scroll-margin-top:96px}

/* ---------- Service doors (light section to break up the navy) ---------- */
.va-light{background:linear-gradient(180deg,#f8fbfd,#edf4fa);color:var(--ink)}
.va-light h2,.va-light h3{color:var(--navy-950)}
.va-light p{color:#31516b}
.va-light .eyebrow{color:#0756a6}
.va-doors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.va-door{display:flex;flex-direction:column;background:#fff;border:1px solid #d6e2ec;border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:0 14px 34px #071a3b14;transition:transform .18s,box-shadow .18s,border-color .18s}
.va-door:hover,.va-door:focus-visible{transform:translateY(-3px);border-color:var(--gold-500);box-shadow:0 20px 44px #071a3b24}
.va-door img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.va-door-art{aspect-ratio:4/3;display:grid;place-items:center;background:radial-gradient(circle at 80% 20%,#d2b25255,transparent 60%),linear-gradient(135deg,#071a3b,#0e2c5b);color:var(--gold-400);font-family:"Exo 2",sans-serif;font-style:italic;font-weight:800;font-size:clamp(1.6rem,2.4vw,2.2rem);letter-spacing:.01em;text-align:center;padding:16px}
.va-door-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.va-door .eyebrow{margin-bottom:2px}
.va-door h3{margin:0;font-size:1.28rem;line-height:1.18}
.va-door p{margin:0;font-size:.95rem;line-height:1.55}
.va-door .va-price{margin-top:auto;padding-top:12px;color:#705415;font-weight:850;font-size:.9rem}
.va-also{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-size:.95rem}
.va-also a{color:#0756a6;font-weight:800}
.va-promise{margin-top:28px;font-size:.95rem;color:#31516b;max-width:80ch}
@media (max-width:1100px){.va-doors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.va-doors{grid-template-columns:1fr}}

/* ---------- Recent work: 3 across ---------- */
.va-work-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;padding-bottom:0!important}
.va-work-grid .project-image img{aspect-ratio:4/3;object-fit:cover;height:auto}
#recent-work .arrow-link{display:inline-block;margin-top:10px;color:var(--cyan-300)}
#recent-work .arrow-link:hover{color:var(--gold-400)}
#recent-work .project-meta{color:var(--cyan-300)}
@media (max-width:980px){.va-work-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:620px){.va-work-grid{grid-template-columns:1fr!important}}

/* ---------- Before / after and mockup blocks on service pages ---------- */
.va-pair-title{margin:2.2rem 0 .9rem;font-size:1.25rem}
.va-pair{padding-bottom:12px!important}
.va-single{margin:1.4rem 0 0;max-width:980px}
.va-single img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid #cdd9e2}
.va-single figcaption{margin-top:10px;font-size:.92rem;color:#31516b}
.va-mockup-badge{display:inline-block;margin-bottom:10px;padding:4px 10px;border-radius:999px;background:#fff2a6;color:#705415;font-size:.7rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}

/* Fix: reviews and community grids pushed the phone layout 5px wide */
@media (max-width:900px){.gr-grid,.cm-grid{grid-template-columns:minmax(0,1fr)}.gr-intro,.cm-intro{min-width:0}}
@media (max-width:480px){.gr-controls{gap:6px}.gr-controls .gr-dot{width:18px}.gr-controls .gr-count{display:none}}
/* Safety net: never allow sideways page scroll on phones */
html,body{overflow-x:clip}