:root {
--bone: #F6F2E8;
--bone-soft: #EFE9D9;
--paper: #FAF7EE;
--ink: #0B0F14;
--ink-soft: #232A33;
--ink-mute: #5E6772;
--ink-quiet: #8F96A0;
--navy: #0E2A47;
--navy-deep: #061629;
--navy-soft: #18375A;
--brass: #C9954B;
--brass-deep: #9A6F2D;
--brass-soft: #E3BB7E;
--rule: #DCD3BC;
--rule-strong: #B7AB8B;
--slate: #3A4250;
--success: #2F6F4C;
--signal: #B83E2D;
}
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
background: var(--paper);
color: var(--ink);
font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
font-size: 16px;
line-height: 1.55;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; }
.display { font-family: "Archivo", "Helvetica Neue", sans-serif; font-weight: 700; letter-spacing: -0.02em; line-height: 1.02; }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; letter-spacing: 0.02em; }
.eyebrow { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-deep); font-weight: 600; }
.shell { max-width: 1440px; margin: 0 auto; padding: 0 56px; }
@media (max-width: 720px) { .shell { padding: 0 20px; } }
/* ===== Cinematic Navbar (lifted from index) ===== */
.navbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
display: grid; grid-template-columns: auto 1fr auto; align-items: center;
gap: 36px; padding: 22px 56px;
transition: background 320ms ease, padding 320ms ease, border-color 320ms ease;
border-bottom: 1px solid transparent;
}
.navbar.is-scrolled { background: rgba(6,22,41,0.92); backdrop-filter: blur(16px); padding: 14px 56px; border-color: rgba(201,149,75,0.18); }
/* top scrim — darkens only the menu strip for nav contrast, fades out just below the menu */
.navbar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 165%; background: linear-gradient(180deg, rgba(6,22,41,0.58) 0%, rgba(6,22,41,0.30) 50%, rgba(6,22,41,0) 100%); pointer-events: none; z-index: -1; transition: opacity 320ms ease; }
.navbar.is-scrolled::before { opacity: 0; }
@media (max-width: 720px) { .navbar { padding: 16px 22px; gap: 12px; } .navbar.is-scrolled { padding: 12px 22px; } }
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.brand__mark img { width: 100%; height: 100%; object-fit: contain; }
.brand__name { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; line-height: 1.1; color: var(--bone); }
.brand__name small { display: block; font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-soft); font-weight: 500; margin-top: 2px; }
.navbar__links { display: flex; justify-content: center; gap: 28px; font-size: 13.5px; font-weight: 500; color: #fff; }
.navbar__links a { padding: 6px 0; position: relative; transition: color 200ms ease; }
.navbar__links a:hover, .navbar__links a.is-current { color: var(--bone); }
.navbar__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform 240ms ease; }
.navbar__links a:hover::after, .navbar__links a.is-current::after { transform: scaleX(1); }
.navbar__right { display: flex; align-items: center; gap: 16px; }
.navbar__phone { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--brass-soft); }
.navbar__cta { background: var(--brass); color: var(--navy-deep); border: none; padding: 11px 20px; font-family: "Archivo", sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; transition: background 220ms ease; }
.navbar__cta:hover { background: var(--brass-soft); }
/* ----- Services dropdown (desktop) ----- */
.navbar__item { position: relative; }
.navbar__item > a { display: inline-flex; align-items: center; gap: 6px; }
.navbar__caret { width: 10px; height: 6px; opacity: 0.65; transition: transform 240ms ease, opacity 200ms ease; }
.navbar__item:hover .navbar__caret, .navbar__item:focus-within .navbar__caret { transform: rotate(180deg); opacity: 1; }
.navbar__item > a::after { display: none; }
.navbar__dropdown {
position: absolute; top: 100%; left: 50%;
transform: translateX(-50%) translateY(10px);
margin-top: 12px; min-width: 264px; padding: 8px;
background: rgba(6,22,41,0.97); backdrop-filter: blur(18px);
border: 1px solid rgba(201,149,75,0.20); border-radius: 5px;
box-shadow: 0 24px 60px rgba(4,16,31,0.55);
display: flex; flex-direction: column; gap: 1px;
opacity: 0; visibility: hidden; pointer-events: none; z-index: 120;
transition: opacity 220ms ease, transform 240ms ease, visibility 240ms;
}
.navbar__dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.navbar__item:hover .navbar__dropdown, .navbar__item:focus-within .navbar__dropdown {
opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.navbar__dropdown a {
padding: 10px 14px; font-size: 13px; line-height: 1.3; color: #fff;
border-radius: 3px; white-space: nowrap; transition: background 180ms ease, color 180ms ease;
}
.navbar__dropdown a::after { display: none; }
.navbar__dropdown a:hover { background: rgba(201,149,75,0.14); color: var(--bone); }
.navbar__dropdown a.is-featured { color: var(--brass-soft); font-weight: 600; }
.navbar__dropdown a.is-featured:hover { background: rgba(201,149,75,0.22); }
/* ----- Mega menu (wide, with hover-preview image) ----- */
.navbar__mega {
width: min(660px, 74vw); left: 0; right: auto;
transform: translateX(0) translateY(10px);
padding: 16px; display: grid; grid-template-columns: 1fr 244px; gap: 18px;
}
.navbar__item:hover .navbar__mega, .navbar__item:focus-within .navbar__mega { transform: translateX(0) translateY(0); }
.navbar__mega-list { display: flex; flex-direction: column; gap: 1px; }
.navbar__mega-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.navbar__mega-arrow { flex-shrink: 0; opacity: 0; transform: translateX(-5px); transition: opacity 180ms ease, transform 180ms ease; color: var(--brass-soft); }
.navbar__mega-list a:hover .navbar__mega-arrow, .navbar__mega-list a:focus .navbar__mega-arrow { opacity: 1; transform: translateX(0); }
.navbar__mega-preview {
position: relative; border-radius: 5px; overflow: hidden;
background: rgba(246,242,232,0.05); border: 1px solid rgba(201,149,75,0.16); min-height: 250px;
}
.navbar__mega-img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transform: scale(1.03); transition: opacity 280ms ease, transform 7s ease;
}
.navbar__mega-preview:hover .navbar__mega-img { transform: scale(1.09); }
.navbar__mega-cap {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 13px 14px;
background: linear-gradient(to top, rgba(4,16,31,0.94) 8%, rgba(4,16,31,0) 100%);
color: var(--bone); font-family: "IBM Plex Mono", monospace;
font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
}
@media (max-width: 1000px) { .navbar__mega { width: min(560px, 70vw); grid-template-columns: 1fr 200px; } }
/* ----- Burger (mobile) ----- */
.navbar__burger {
display: none; flex-direction: column; justify-content: center; gap: 5px;
width: 44px; height: 44px; padding: 0; flex-shrink: 0;
border: 1px solid rgba(201,149,75,0.32); border-radius: 5px;
background: rgba(6,22,41,0.45);
}
.navbar__burger span { display: block; width: 20px; height: 2px; margin: 0 auto; background: var(--brass-soft); border-radius: 2px; transition: transform 300ms cubic-bezier(0.22,1,0.36,1), opacity 200ms ease; }
.navbar__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__burger.is-open span:nth-child(2) { opacity: 0; }
.navbar__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ----- Compact call icon (mobile only) ----- */
.navbar__call {
display: none; align-items: center; justify-content: center;
width: 44px; height: 44px; flex-shrink: 0;
border: 1px solid rgba(201,149,75,0.32); border-radius: 5px;
background: rgba(6,22,41,0.45); color: var(--brass-soft);
}
.navbar__call:hover { color: var(--bone); border-color: var(--brass-soft); }
/* ----- Mobile drawer ----- */
.mobile-menu {
position: fixed; inset: 0; z-index: 95;
background: linear-gradient(165deg, var(--navy-deep) 0%, #04101f 100%);
padding: 100px 28px 36px; display: flex; flex-direction: column;
transform: translateX(100%); transition: transform 380ms cubic-bezier(0.22,1,0.36,1);
overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu > a {
color: var(--bone); font-family: "Archivo", sans-serif; font-weight: 700;
font-size: 22px; letter-spacing: -0.01em; padding: 15px 0;
border-bottom: 1px solid rgba(201,149,75,0.12);
}
.mobile-menu__sub { display: flex; flex-direction: column; padding: 2px 0 8px; }
.mobile-menu__sub a {
color: #fff; font-size: 15.5px; font-weight: 500;
padding: 11px 0 11px 18px; border-bottom: 1px solid rgba(201,149,75,0.07);
}
.mobile-menu__sub a.is-featured { color: var(--brass-soft); font-weight: 600; }
.mobile-menu__foot { margin-top: auto; display: flex; flex-direction: column; gap: 16px; padding-top: 28px; }
.mobile-menu__foot .navbar__phone { display: block; font-size: 15px; }
.mobile-menu__foot .navbar__cta { width: 100%; padding: 16px; font-size: 13px; }
body.menu-open { overflow: hidden; }
@media (max-width: 900px) {
.navbar__links, .navbar__phone { display: none; }
.navbar__burger { display: flex; }
.navbar__call { display: inline-flex; }
.navbar__right { gap: 10px; }
/* tagline drops onto its own full-width line under the logo + name (mobile only — desktop stays original) */
.navbar .brand { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "mark name" "tag tag"; align-items: center; column-gap: 10px; row-gap: 2px; }
.navbar .brand__mark { grid-area: mark; }
.navbar .brand__name { display: contents; }
.navbar .brand__tag { grid-area: tag; align-self: start; margin-top: 0; white-space: nowrap; }
}
@media (max-width: 480px) {
.navbar .brand__name { font-size: 13.5px; }
.navbar .brand__tag { font-size: 8px; }
.navbar__right .navbar__cta { padding: 10px 13px; font-size: 11px; }
}
/* ===== Hero — service-specific ===== */
.hero {
background: var(--navy-deep);
color: var(--bone);
position: relative;
overflow: hidden;
padding: 120px 0 60px;
min-height: 0;
display: flex;
align-items: center;
}
.hero__bg {
position: absolute; inset: 0;
background-image: url("/assets/ext/miamifirstremodeling/kitchen-promo/a-3.webp");
background-size: cover; background-position: center 45%;
opacity: 1;
transform: scale(1.06);
filter: brightness(1.0) saturate(1.04) contrast(1.0);
animation: hero-pan 32s ease-in-out infinite alternate;
}
@keyframes hero-pan { from { transform: scale(1.06); } to { transform: scale(1.12) translateY(-1.5%); } }
.hero__bg::after {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(95deg, rgba(6,22,41,0.40) 0%, rgba(6,22,41,0.14) 45%, rgba(6,22,41,0) 74%, rgba(6,22,41,0.06) 100%),
linear-gradient(180deg, rgba(6,22,41,0.12) 0%, transparent 32%, transparent 66%, rgba(6,22,41,0.24) 100%);
}
.hero__grain {
position: absolute; inset: 0; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay;
background-image: radial-gradient(rgba(255,255,255,0.5) 0.5px, transparent 0.5px);
background-size: 3px 3px;
}
.hero__inner {
position: relative;
display: block;
width: 100%;
}
.hero__body { max-width: 880px; }
.hero__title { max-width: 18ch; }
.breadcrumb {
display: inline-flex; gap: 10px; align-items: center;
font-family: "IBM Plex Mono", monospace;
font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
color: #fff;
margin-bottom: 14px;
}
.breadcrumb a:hover { color: var(--brass-soft); }
.breadcrumb__sep { opacity: 0.5; }
.breadcrumb__current { color: var(--brass); }
.hero__eyebrow {
display: inline-flex; align-items: center; gap: 10px;
color: var(--brass-soft);
font-family: "IBM Plex Mono", monospace;
font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
margin-bottom: 14px;
padding-left: 10px;
border-left: 2px solid var(--brass);
}
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 0 rgba(201,149,75,0.7); animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(201,149,75,0.7); } 70% { box-shadow: 0 0 0 12px rgba(201,149,75,0); } 100% { box-shadow: 0 0 0 0 rgba(201,149,75,0); } }
.hero__title {
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: clamp(34px, 4.4vw, 60px);
line-height: 1;
letter-spacing: -0.028em;
color: var(--bone);
margin-bottom: 14px;
max-width: 22ch;
}
.hero__title .accent { color: var(--brass); font-style: normal; }
.hero__title em {
font-family: "Fraunces", serif;
font-weight: 300;
font-style: italic;
color: var(--brass-soft);
font-size: 0.9em;
}
.hero__sub {
font-size: 15px;
line-height: 1.55;
color: #fff;
max-width: 560px;
margin-bottom: 20px;
font-weight: 400;
}
.hero__ctas {
display: flex; gap: 14px; flex-wrap: wrap;
}
.btn-primary {
background: var(--brass);
color: var(--navy-deep);
border: none;
padding: 13px 22px;
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: 12.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: background 220ms ease;
display: inline-flex;
align-items: center;
gap: 10px;
}
.btn-primary:hover { background: var(--brass-soft); }
.btn-outline {
background: transparent;
color: var(--bone);
border: 1.5px solid rgba(246,242,232,0.34);
padding: 12px 20px;
font-family: "Archivo", sans-serif;
font-weight: 700;
font-size: 12.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: background 220ms ease, border-color 220ms ease;
display: inline-flex;
align-items: center;
gap: 10px;
}
.btn-outline:hover { background: rgba(246,242,232,0.08); border-color: var(--brass-soft); }
/* ===== V1 hero — V2-style navy panel on the full-bleed image ===== */
.hero--v1 .hero__body {
max-width: 640px;
background: linear-gradient(165deg, rgba(6,22,41,0.13) 0%, rgba(6,22,41,0.27) 100%);
backdrop-filter: blur(5px) saturate(1.05);
-webkit-backdrop-filter: blur(5px) saturate(1.05);
color: var(--bone);
padding: 38px 44px 42px 42px;
position: relative;
overflow: hidden;
border: 1px solid rgba(201,149,75,0.18);
box-shadow: 0 30px 70px -30px rgba(4,16,31,0.45);
}
.hero--v1 .hero__body::before {
content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px;
background: var(--brass);
}
/* mild shadow keeps copy crisp on the frosted plate */
.hero--v1 .breadcrumb,
.hero--v1 .hero__title,
.hero--v1 .hero__sub,
.hero--v1 .hero__spec,
.hero--v1 .hero__spec strong { text-shadow: 0 1px 12px rgba(4,16,31,0.72), 0 1px 2px rgba(4,16,31,0.55); }
.hero--v1 .breadcrumb { color: rgba(246,242,232,0.70); }
.hero--v1 .breadcrumb a:hover { color: var(--brass-soft); }
.hero--v1 .breadcrumb__current { color: var(--brass); }
.hero--v1 .hero__eyebrow { margin-bottom: 16px; }
.hero--v1 .hero__title { color: var(--bone); }
.hero--v1 .hero__title em { color: var(--brass-soft); }
.hero--v1 .hero__title .accent { color: var(--brass); }
.hero--v1 .hero__sub { color: #fff; }
.hero--v1 .hero__specs {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
padding: 20px 0; margin: 6px 0 26px;
border-top: 1px solid rgba(246,242,232,0.18);
border-bottom: 1px solid rgba(246,242,232,0.18);
}
.hero--v1 .hero__spec { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; line-height: 1.4; }
.hero--v1 .hero__spec strong { display: block; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: var(--brass); text-transform: none; margin-bottom: 4px; }
@media (max-width: 520px) {
.hero--v1 .hero__body { padding: 28px 22px 30px 24px; }
.hero--v1 .hero__specs { gap: 10px; }
}
/* ===== Hero Quiz ===== */
.quiz {
background: var(--bone);
color: var(--ink);
padding: 22px 24px 22px;
border-top: 5px solid var(--brass);
box-shadow: 0 30px 60px -24px rgba(6,22,41,0.55);
width: 100%;
display: flex;
flex-direction: column;
gap: 14px;
}
.quiz__head {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.quiz__head-l { display: flex; flex-direction: column; gap: 2px; }
.quiz__kicker {
font-family: "IBM Plex Mono", monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brass-deep);
font-weight: 700;
}
.quiz__title {
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: 18px;
letter-spacing: -0.015em;
color: var(--ink);
line-height: 1.15;
}
.quiz__stepnum {
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.1em;
color: var(--ink-mute);
text-transform: uppercase;
font-weight: 600;
}
.quiz__stepnum strong { color: var(--navy); font-weight: 700; }
.quiz__progress {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
}
.quiz__dot {
height: 3px;
background: var(--rule);
transition: background 280ms ease;
}
.quiz__dot.is-active { background: var(--brass); }
.quiz__dot.is-done { background: var(--navy); }
.quiz__body { display: flex; flex-direction: column; gap: 10px; min-height: 156px; }
.quiz__step { display: none; flex-direction: column; gap: 10px; }
.quiz__step.is-active { display: flex; }
.quiz__q {
font-family: "Archivo", sans-serif;
font-weight: 700;
font-size: 16px;
letter-spacing: -0.01em;
color: var(--ink);
line-height: 1.2;
}
.quiz__hint {
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.04em;
color: var(--ink-mute);
text-transform: uppercase;
margin-bottom: 2px;
}
.quiz__opts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.quiz__opt {
background: var(--paper);
border: 1.5px solid var(--rule);
padding: 10px 12px;
text-align: left;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 2px;
transition: all 180ms ease;
}
.quiz__opt:hover { border-color: var(--navy); background: var(--bone-soft); }
.quiz__opt.is-selected { border-color: var(--navy); background: var(--navy); color: var(--bone); }
.quiz__opt-name {
font-family: "Archivo", sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: -0.005em;
line-height: 1.2;
}
.quiz__opt-sub {
font-family: "IBM Plex Mono", monospace;
font-size: 10px;
letter-spacing: 0.06em;
color: var(--ink-mute);
text-transform: uppercase;
}
.quiz__opt.is-selected .quiz__opt-sub { color: var(--brass-soft); }
.quiz__slider { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 0; }
.quiz__slider-val { display: flex; align-items: baseline; gap: 8px; }
.quiz__slider-val strong {
font-family: "Archivo", sans-serif;
font-weight: 900;
font-size: 32px;
letter-spacing: -0.025em;
color: var(--navy);
line-height: 1;
}
.quiz__slider-val span {
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.08em;
color: var(--ink-mute);
text-transform: uppercase;
}
.quiz__range { width: 100%; -webkit-appearance: none; appearance: none; background: transparent; }
.quiz__range::-webkit-slider-runnable-track { height: 4px; background: var(--rule); }
.quiz__range::-moz-range-track { height: 4px; background: var(--rule); }
.quiz__range::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--brass);
border: 3px solid var(--bone);
box-shadow: 0 0 0 1.5px var(--brass-deep);
margin-top: -8px;
cursor: pointer;
}
.quiz__range::-moz-range-thumb {
width: 20px; height: 20px; border-radius: 50%;
background: var(--brass); border: 3px solid var(--bone);
box-shadow: 0 0 0 1.5px var(--brass-deep);
cursor: pointer;
}
.quiz__ticks { display: flex; justify-content: space-between; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.06em; color: var(--ink-quiet); }
.quiz__inputs { display: flex; flex-direction: column; gap: 6px; }
.quiz__input {
width: 100%;
background: var(--paper);
border: 1.5px solid var(--rule);
padding: 10px 12px;
font-family: "Manrope", sans-serif;
font-size: 13px;
color: var(--ink);
transition: border-color 200ms ease;
}
.quiz__input:focus { outline: none; border-color: var(--navy); }
.quiz__textarea { resize: vertical; min-height: 72px; line-height: 1.5; font-family: "Manrope", sans-serif; }
.quiz__estimate {
background: var(--navy-deep);
color: var(--bone);
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 4px;
}
.quiz__estimate-l {
font-family: "IBM Plex Mono", monospace;
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brass-soft);
font-weight: 600;
}
.quiz__estimate-v {
font-family: "Archivo", sans-serif;
font-weight: 900;
font-size: 22px;
letter-spacing: -0.025em;
color: var(--brass);
line-height: 1.1;
}
.quiz__estimate-v .em { color: var(--bone); margin: 0 4px; font-weight: 700; }
.quiz__estimate-meta { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.04em; color: #fff; }
.quiz__done {
display: none;
flex-direction: column;
gap: 6px;
padding: 12px 0;
}
.quiz__done.is-active { display: flex; }
.quiz__done-t {
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: 18px;
letter-spacing: -0.015em;
color: var(--ink);
line-height: 1.2;
}
.quiz__done-t .em { color: var(--brass-deep); font-family: "Fraunces", serif; font-style: italic; font-weight: 300; }
.quiz__done-sub { font-size: 13px; color: var(--ink-mute); line-height: 1.55; }
.quiz__foot {
display: grid;
grid-template-columns: auto 1fr;
gap: 8px;
padding-top: 10px;
border-top: 1px solid var(--rule);
}
.quiz__back {
background: transparent;
border: 1.5px solid var(--rule-strong);
color: var(--ink-soft);
padding: 10px 16px;
font-family: "Archivo", sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: all 200ms ease;
}
.quiz__back:hover { border-color: var(--navy); color: var(--navy); }
.quiz__back:disabled { opacity: 0.3; cursor: not-allowed; }
.quiz__next {
background: var(--navy);
color: var(--bone);
border: none;
padding: 10px 18px;
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: 11.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: background 200ms ease, gap 200ms ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.quiz__next:hover { background: var(--navy-soft); }
.quiz__next.is-final { background: var(--brass); color: var(--navy-deep); }
.quiz__next.is-final:hover { background: var(--brass-soft); }
.quiz__assurance {
font-family: "IBM Plex Mono", monospace;
font-size: 10px;
letter-spacing: 0.04em;
color: var(--ink-mute);
line-height: 1.5;
padding-top: 2px;
}
.quiz__assurance strong { color: var(--navy); font-weight: 700; }
@media (max-width: 1000px) {
.hero { padding: 90px 0 32px; min-height: auto; }
.hero__inner { grid-template-columns: 1fr; gap: 24px; }
}
/* ===== Quick-facts strip ===== */
.facts {
background: var(--navy-deep);
color: var(--bone);
border-top: 1px solid rgba(201,149,75,0.18);
border-bottom: 1px solid rgba(201,149,75,0.18);
}
.facts__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
.fact {
padding: 34px 28px;
border-right: 1px solid rgba(246,242,232,0.08);
display: flex;
flex-direction: column;
gap: 6px;
}
.fact:last-child { border-right: none; }
.fact__value {
font-family: "Archivo", sans-serif;
font-weight: 900;
font-size: 44px;
letter-spacing: -0.03em;
line-height: 1;
color: var(--brass);
}
.fact__value sub {
font-size: 18px;
color: var(--bone);
vertical-align: super;
margin-left: 2px;
font-weight: 700;
}
.fact__label {
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-quiet);
margin-top: 6px;
font-weight: 500;
}
.fact__meta { font-size: 12.5px; color: #fff; line-height: 1.45; }
@media (max-width: 900px) {
.facts__grid { grid-template-columns: repeat(2, 1fr); }
.fact { padding: 22px 18px; border-bottom: 1px solid rgba(246,242,232,0.08); }
.fact:nth-child(2n) { border-right: none; }
.fact__value { font-size: 34px; }
}
/* ===== Hero variants — chooser label ===== */
.variant-label {
background: var(--ink);
color: var(--brass);
padding: 10px 56px;
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
z-index: 5;
position: relative;
}
.variant-label__num { color: var(--brass); font-weight: 700; }
.variant-label__name { color: #fff; font-weight: 500; }
.variant-label__hint { color: var(--brass-soft); font-weight: 500; font-size: 10.5px; }
@media (max-width: 720px) {
.variant-label { padding: 9px 20px; font-size: 10px; flex-wrap: wrap; gap: 6px 12px; }
.variant-label__hint { display: none; }
}
/* ===== Hero — Variant 02: Editorial split ===== */
.hero--v2 {
background: var(--paper);
padding: 0;
min-height: 0;
display: block;
overflow: visible;
}
.hero--v2 .hero__bg, .hero--v2 .hero__grain { display: none; }
.hero--v2__inner {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 560px;
align-items: stretch;
}
.hero--v2__copy {
background: var(--navy-deep);
color: var(--bone);
padding: 130px 56px 50px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.hero--v2__copy::before {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0;
width: 5px;
background: var(--brass);
}
.hero--v2__title {
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: clamp(40px, 4.5vw, 68px);
line-height: 0.98;
letter-spacing: -0.03em;
color: var(--bone);
margin: 18px 0 20px;
max-width: 16ch;
}
.hero--v2__title em {
font-family: "Fraunces", serif;
font-style: italic;
font-weight: 300;
color: var(--brass-soft);
}
.hero--v2__title .accent { color: var(--brass); }
.hero--v2__specs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding: 20px 0;
margin: 22px 0 28px;
border-top: 1px solid rgba(246,242,232,0.18);
border-bottom: 1px solid rgba(246,242,232,0.18);
}
.hero--v2__spec {
font-family: "IBM Plex Mono", monospace;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff;
line-height: 1.4;
}
.hero--v2__spec strong {
display: block;
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: 22px;
letter-spacing: -0.02em;
color: var(--brass);
text-transform: none;
margin-bottom: 4px;
}
.hero--v2__media {
position: relative;
overflow: hidden;
background: #0b0f14;
}
.hero--v2__media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.hero--v2__caption {
position: absolute;
bottom: 20px; left: 20px;
background: rgba(11,15,20,0.82);
color: var(--brass);
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
letter-spacing: 0.08em;
padding: 7px 12px;
text-transform: uppercase;
font-weight: 600;
backdrop-filter: blur(6px);
}
@media (max-width: 900px) {
.hero--v2__inner { grid-template-columns: 1fr; min-height: 0; }
.hero--v2__copy { padding: 100px 24px 40px; }
.hero--v2__media { min-height: 320px; }
}
/* ===== Hero — Variant 03: Magazine plate ===== */
.hero--v3 {
position: relative;
padding: 0;
min-height: 680px;
background: var(--navy-deep);
display: block;
overflow: hidden;
align-items: stretch;
}
.hero--v3 .hero__bg, .hero--v3 .hero__grain { display: none; }
.hero--v3__bg {
position: absolute; inset: 0;
background-image: url("/assets/ext/miamifirstremodeling/ra-img/Julio13.webp");
background-size: cover;
background-position: center 35%;
filter: brightness(0.92) saturate(1.05);
}
.hero--v3__bg::after {
content: "";
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(6,22,41,0.5) 0%, transparent 28%, transparent 55%, rgba(6,22,41,0.65) 100%),
linear-gradient(95deg, rgba(6,22,41,0.35) 0%, transparent 35%);
}
.hero--v3__corner {
position: absolute;
top: 110px; right: 56px;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
font-family: "IBM Plex Mono", monospace;
color: var(--brass-soft);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
}
.hero--v3__corner-num {
font-family: "Fraunces", serif;
font-weight: 300;
font-style: italic;
font-size: 80px;
color: var(--brass);
line-height: 1;
letter-spacing: -0.04em;
}
.hero--v3__plate {
position: absolute;
left: 56px;
bottom: 56px;
width: min(640px, calc(100% - 112px));
background: var(--bone);
padding: 34px 38px 30px;
border-top: 5px solid var(--brass);
box-shadow: 0 36px 80px -30px rgba(0,0,0,0.55);
z-index: 2;
}
.hero--v3__plate .breadcrumb {
color: var(--ink-mute);
margin-bottom: 14px;
}
.hero--v3__plate .breadcrumb a { color: var(--ink-soft); }
.hero--v3__plate .breadcrumb a:hover { color: var(--brass-deep); }
.hero--v3__plate .breadcrumb__sep { color: var(--ink-quiet); }
.hero--v3__plate .breadcrumb__current { color: var(--brass-deep); }
.hero--v3__title {
font-family: "Archivo", sans-serif;
font-weight: 900;
font-size: clamp(36px, 4.6vw, 62px);
line-height: 0.95;
letter-spacing: -0.032em;
color: var(--ink);
margin-bottom: 16px;
}
.hero--v3__title em {
font-family: "Fraunces", serif;
font-style: italic;
font-weight: 300;
color: var(--brass-deep);
}
.hero--v3__sub {
font-size: 15px;
line-height: 1.55;
color: var(--ink-soft);
margin-bottom: 22px;
max-width: 540px;
}
.hero--v3__plate .hero__ctas .btn-primary { background: var(--navy); color: var(--bone); }
.hero--v3__plate .hero__ctas .btn-primary:hover { background: var(--navy-soft); }
.hero--v3__plate .hero__ctas .btn-outline { border-color: var(--rule-strong); color: var(--ink-soft); }
.hero--v3__plate .hero__ctas .btn-outline:hover { border-color: var(--navy); color: var(--navy); background: transparent; }
@media (max-width: 900px) {
.hero--v3 { min-height: 580px; }
.hero--v3__plate { left: 20px; right: 20px; bottom: 20px; width: auto; padding: 26px 24px; }
.hero--v3__corner { top: 80px; right: 20px; }
.hero--v3__corner-num { font-size: 60px; }
}
/* ===== Section common ===== */
.section { padding: 110px 0 100px; background: var(--paper); }
.section--bone { background: var(--bone); }
.section--navy { background: var(--navy); color: var(--bone); }
@media (max-width: 900px) { .section { padding: 64px 0 60px; } }
.section__head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: end;
margin-bottom: 56px;
}
/* SEO head aligns to the text column (1fr), ending at the form — matches .seo__layout */
.section__head--wide { grid-template-columns: 1fr 380px; gap: 56px; align-items: end; }
@media (max-width: 1000px) { .section__head--wide { grid-template-columns: 1fr; gap: 18px; } }
.section__title {
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: clamp(36px, 4.6vw, 64px);
line-height: 1.02;
letter-spacing: -0.025em;
color: var(--ink);
}
.section--navy .section__title { color: var(--bone); }
.section__title .accent { color: var(--brass-deep); }
.section--navy .section__title .accent { color: var(--brass); }
.section__title .underline { position: relative; display: inline-block; }
.section__title .underline::after {
content: ""; position: absolute;
bottom: -4px; left: 0; right: 0;
height: 4px; background: var(--brass);
}
.section__title em { font-family: "Fraunces", serif; font-style: italic; font-weight: 300; color: var(--brass-deep); }
.section--navy .section__title em { color: var(--brass-soft); }
.section__lede { font-size: 17px; color: var(--ink-soft); line-height: 1.55; max-width: 480px; padding-bottom: 8px; }
.section--navy .section__lede { color: #fff; }
@media (max-width: 900px) { .section__head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 36px; } }
/* ===== Scope cards (services-style from main) ===== */
.scope-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.scope-card {
background: var(--paper);
padding: 28px 26px 24px;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 240px;
transition: background 280ms ease, transform 280ms ease, box-shadow 280ms ease;
position: relative;
overflow: hidden;
border: 1px solid var(--rule);
isolation: isolate;
}
.scope-card::after {
content: "";
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: var(--brass);
transform: scaleX(0);
transform-origin: left;
transition: transform 320ms ease;
}
.scope-card:hover { background: var(--bone); transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(11,15,20,0.22); }
.scope-card:hover::after { transform: scaleX(1); }
.scope-card:hover .scope-card__icon { color: var(--brass-deep); opacity: 0.16; transform: translate(8%, -6%) rotate(-2deg); }
.scope-card__icon {
position: absolute;
top: -8%;
right: -8%;
width: 58%;
height: 58%;
color: var(--navy);
opacity: 0.07;
pointer-events: none;
z-index: 0;
transition: opacity 280ms ease, color 280ms ease, transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
display: block;
}
.scope-card__icon svg {
width: 100%; height: 100%;
stroke: currentColor; fill: none;
stroke-width: 1.25;
stroke-linecap: round;
stroke-linejoin: round;
}
.scope-card__num {
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.16em;
color: var(--brass-deep);
font-weight: 700;
text-transform: uppercase;
z-index: 1;
position: relative;
}
.scope-card__name {
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: 21px;
line-height: 1.1;
letter-spacing: -0.018em;
color: var(--ink);
z-index: 1;
position: relative;
max-width: 82%;
margin-top: 2px;
}
.scope-card__desc {
font-size: 13.5px;
color: var(--ink-mute);
line-height: 1.55;
flex: 1;
z-index: 1;
position: relative;
max-width: 95%;
margin-top: 2px;
}
.scope-card__tag {
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
color: var(--success);
font-weight: 700;
letter-spacing: 0.08em;
padding-top: 12px;
border-top: 1px solid var(--rule);
z-index: 1;
position: relative;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 6px;
}
.scope-card__tag::before {
content: "✓";
font-family: "Archivo";
font-weight: 900;
}
@media (max-width: 900px) { .scope-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
/* mobile: horizontal swipe row, next card peeks so it's clearly swipeable */
.scope-grid { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 14px; scrollbar-width: none; }
.scope-grid::-webkit-scrollbar { display: none; }
.scope-grid > .scope-card { flex: 0 0 80%; scroll-snap-align: start; }
}
/* ===== Credentials grid (matches main) ===== */
.creds__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.cred {
background: var(--paper);
padding: 28px 26px 24px;
display: flex;
flex-direction: column;
gap: 10px;
min-height: 240px;
transition: background 280ms ease, transform 280ms ease, box-shadow 280ms ease;
position: relative;
overflow: hidden;
border: 1px solid var(--rule);
isolation: isolate;
}
.cred::after {
content: "";
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: var(--brass);
transform: scaleX(0);
transform-origin: left;
transition: transform 320ms ease;
}
.cred:hover { background: var(--bone); transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(11,15,20,0.22); }
.cred:hover::after { transform: scaleX(1); }
.cred:hover .cred__icon { color: var(--brass-deep); opacity: 0.16; transform: translate(8%, -6%) rotate(-2deg); }
.cred__icon {
position: absolute;
top: -8%; right: -8%;
width: 60%; height: 60%;
color: var(--navy);
opacity: 0.07;
pointer-events: none;
z-index: 0;
transition: opacity 280ms ease, color 280ms ease, transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
display: block;
}
.cred__icon svg {
width: 100%; height: 100%;
stroke: currentColor; fill: none;
stroke-width: 1.25;
stroke-linecap: round;
stroke-linejoin: round;
}
.cred__label {
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--brass-deep);
font-weight: 700;
z-index: 1; position: relative;
}
.cred__name {
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: 19px;
line-height: 1.18;
letter-spacing: -0.015em;
color: var(--ink);
z-index: 1; position: relative;
max-width: 80%;
margin-top: 2px;
flex: 1;
}
.cred__name strong { font-family: "Archivo"; font-weight: 900; color: var(--navy); letter-spacing: -0.02em; }
.cred__verify {
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--rule);
font-family: "IBM Plex Mono", monospace;
font-size: 11.5px;
letter-spacing: 0.06em;
color: var(--navy);
font-weight: 700;
z-index: 1; position: relative;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 8px;
transition: gap 200ms ease, color 200ms ease;
}
.cred:hover .cred__verify { gap: 14px; color: var(--brass-deep); }
.cred__verify::before {
content: "↗";
color: var(--brass-deep);
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: 13px;
}
@media (max-width: 1100px) { .creds__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .creds__grid { grid-template-columns: 1fr 1fr; } }
/* ===== Legacy scope (replaced) ===== */
.scope {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--rule);
border: 1px solid var(--rule);
}
.scope__cell {
background: var(--paper);
padding: 30px 28px 26px;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 240px;
position: relative;
transition: background 280ms ease;
}
.scope__cell:hover { background: var(--bone-soft); }
.scope__num {
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.14em;
color: var(--brass-deep);
text-transform: uppercase;
font-weight: 700;
}
.scope__name {
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: 20px;
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--ink);
}
.scope__body {
font-size: 13.5px;
color: var(--ink-mute);
line-height: 1.55;
flex: 1;
}
.scope__check {
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.08em;
color: var(--success);
font-weight: 700;
text-transform: uppercase;
padding-top: 12px;
border-top: 1px solid var(--rule);
display: inline-flex;
align-items: center;
gap: 8px;
}
.scope__check::before {
content: "";
width: 14px; height: 14px;
background: var(--success);
color: var(--bone);
display: inline-block;
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
@media (max-width: 900px) { .scope { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .scope { grid-template-columns: 1fr; } }
/* ===== Not-included strip (transparent disclosure) ===== */
.notincluded {
margin-top: 28px;
background: var(--bone-soft);
border: 1px solid var(--rule);
padding: 22px 28px;
display: grid;
grid-template-columns: auto 1fr;
gap: 24px;
align-items: center;
}
.notincluded__l {
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--signal);
font-weight: 700;
white-space: nowrap;
}
.notincluded__r {
font-size: 14px;
color: var(--ink-soft);
line-height: 1.55;
}
.notincluded__r strong { color: var(--ink); font-weight: 600; }
@media (max-width: 700px) { .notincluded { grid-template-columns: 1fr; gap: 8px; } }
/* ===== Tiers ===== */
.tiers {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border: 1px solid var(--rule);
background: var(--rule);
}
.tier {
background: var(--paper);
padding: 36px 34px 32px;
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
transition: background 280ms ease;
}
.tier--mid { background: var(--bone); }
.tier--mid::before {
content: "Most chosen · 64% of kitchens";
position: absolute;
top: 0; left: 0; right: 0;
background: var(--brass);
color: var(--navy-deep);
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 700;
padding: 7px 12px;
text-align: center;
}
.tier--mid { padding-top: 60px; }
.tier__name {
font-family: "Archivo", sans-serif;
font-weight: 900;
font-size: 30px;
letter-spacing: -0.025em;
color: var(--ink);
line-height: 1;
}
.tier__name em { font-family: "Fraunces", serif; font-style: italic; font-weight: 300; color: var(--brass-deep); }
.tier__tag {
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-mute);
font-weight: 600;
margin-top: 4px;
}
.tier__price {
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: 18px;
letter-spacing: -0.005em;
color: var(--navy);
padding: 14px 0;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.tier__price small {
display: block;
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
color: var(--ink-mute);
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 500;
margin-top: 4px;
}
.tier__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.tier__list li {
font-size: 13.5px;
color: var(--ink-soft);
line-height: 1.5;
padding-left: 22px;
position: relative;
}
.tier__list li::before {
content: "";
position: absolute;
left: 0; top: 5px;
width: 12px; height: 12px;
background: var(--brass);
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.tier__list li strong { color: var(--ink); font-weight: 600; }
.tier__cta {
margin-top: auto;
padding: 14px 18px;
background: transparent;
color: var(--ink);
border: 1.5px solid var(--navy);
font-family: "Archivo", sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: all 200ms ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.tier__cta:hover { background: var(--navy); color: var(--bone); }
.tier--mid .tier__cta { background: var(--navy); color: var(--bone); border-color: var(--navy); }
.tier--mid .tier__cta:hover { background: var(--navy-soft); }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }
/* ===== Long-form SEO guide ===== */
.seo__layout {
display: grid;
grid-template-columns: 1fr 380px;
gap: 56px;
align-items: start;
}
.seo__aside {
position: sticky;
top: 110px;
}
@media (max-width: 1000px) {
.seo__layout { grid-template-columns: 1fr; gap: 40px; }
.seo__aside { position: static; max-width: 480px; margin: 0 auto; width: 100%; }
}
.longform {
max-width: none;
margin: 0;
}
.longform__inner {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.longform__inner > .longform__visible,
.longform__inner > .longform__hidden {
width: 100%;
}
.longform__lede {
font-family: "Fraunces", serif;
font-weight: 300;
font-style: italic;
font-size: 22px;
line-height: 1.45;
color: var(--ink);
margin: 0 0 32px;
padding-bottom: 24px;
border-bottom: 1px solid var(--rule);
}
.longform p {
font-size: 16px;
line-height: 1.7;
color: var(--ink-soft);
margin: 0 0 20px;
}
.longform p:last-child { margin-bottom: 0; }
.longform h3 {
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: 24px;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--ink);
margin: 36px 0 14px;
padding-top: 20px;
position: relative;
}
.longform h3::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 36px; height: 3px;
background: var(--brass);
}
.longform__hidden {
max-height: 0;
overflow: hidden;
transition: max-height 600ms ease;
}
.longform__inner:not(.is-expanded) .longform__visible {
position: relative;
}
.longform__inner:not(.is-expanded) .longform__visible::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 140px;
background: linear-gradient(180deg, rgba(246,242,232,0) 0%, var(--bone) 90%);
pointer-events: none;
}
.longform__inner.is-expanded .longform__hidden {
max-height: 12000px;
}
.longform__toggle {
margin: 28px auto 0;
display: inline-flex;
align-items: center;
gap: 12px;
background: transparent;
color: var(--navy);
border: 1.5px solid var(--navy);
padding: 14px 24px;
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: 12.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: background 200ms ease, color 200ms ease;
position: relative;
z-index: 2;
}
.longform__toggle:hover { background: var(--navy); color: var(--bone); }
.longform__toggle-arrow { transition: transform 320ms ease; display: inline-block; }
.longform__inner.is-expanded .longform__toggle-arrow { transform: rotate(180deg); }
@media (max-width: 720px) {
.longform__lede { font-size: 19px; }
.longform h3 { font-size: 21px; }
.longform p { font-size: 15px; }
}
/* ===== Materials lookbook ===== */
.materials {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
}
.mat-group {
background: var(--paper);
border: 1px solid var(--rule);
padding: 26px 26px 22px;
display: flex;
flex-direction: column;
gap: 18px;
}
.mat-group__head {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.mat-group__h {
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: 19px;
letter-spacing: -0.015em;
color: var(--ink);
}
.mat-group__count {
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
letter-spacing: 0.08em;
color: var(--ink-mute);
text-transform: uppercase;
}
.swatches {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.swatch { aspect-ratio: 1/1; position: relative; overflow: hidden; background: #ddd; transition: transform 280ms ease, outline 200ms ease; outline: 1px solid transparent; outline-offset: 2px; cursor: pointer; }
.swatch:hover { transform: translateY(-2px); outline-color: var(--brass); }
.swatch__label {
position: absolute; bottom: 0; left: 0; right: 0;
background: linear-gradient(180deg, transparent, rgba(11,15,20,0.85));
color: var(--bone);
font-family: "IBM Plex Mono", monospace;
font-size: 9.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 600;
padding: 18px 8px 8px;
line-height: 1.2;
}
.swatch--oak { background: linear-gradient(135deg, #C49B6B 0%, #8B6234 100%); }
.swatch--walnut { background: linear-gradient(135deg, #6B4329 0%, #2D1A0E 100%); }
.swatch--bone { background: linear-gradient(135deg, #F4ECDC 0%, #C9BB9D 100%); }
.swatch__label--dark { color: var(--ink); background: linear-gradient(180deg, transparent, rgba(246,242,232,0.92)); }
.swatch--ink { background: linear-gradient(135deg, #2B3340 0%, #0A0F15 100%); }
.swatch--brass { background: linear-gradient(135deg, #D8A968 0%, #8C6322 100%); }
.swatch--sage { background: linear-gradient(135deg, #8C9982 0%, #4D5847 100%); }
/* Counters */
.swatch--calacatta {
background:
radial-gradient(ellipse at 30% 20%, rgba(0,0,0,0.18) 0%, transparent 40%),
radial-gradient(ellipse at 70% 70%, rgba(180,140,90,0.4) 0%, transparent 35%),
linear-gradient(135deg, #F4ECDC 0%, #E8DFC8 100%);
}
.swatch--viola {
background:
radial-gradient(ellipse at 40% 30%, rgba(140,40,80,0.6) 0%, transparent 45%),
radial-gradient(ellipse at 70% 70%, rgba(50,20,40,0.5) 0%, transparent 35%),
linear-gradient(135deg, #E0C5CC 0%, #A26277 100%);
}
.swatch--soapstone {
background:
radial-gradient(ellipse at 20% 40%, rgba(255,255,255,0.18) 0%, transparent 35%),
linear-gradient(135deg, #4A5260 0%, #1A1F28 100%);
}
.swatch--statuario {
background:
radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.12) 0%, transparent 50%),
linear-gradient(135deg, #F0EAD8 0%, #D0C5A6 100%);
}
.swatch--terra {
background: linear-gradient(135deg, #C18A6F 0%, #7A4A35 100%);
}
.swatch--blanc { background: linear-gradient(135deg, #FAF7EE 0%, #D8CFB8 100%); }
/* Hardware */
.swatch--brass-pol { background: linear-gradient(135deg, #F1D188 0%, #A57820 100%); }
.swatch--brass-mat { background: linear-gradient(135deg, #B58F4E 0%, #6E5025 100%); }
.swatch--black-mat { background: linear-gradient(135deg, #2A2A2A 0%, #0A0A0A 100%); }
.swatch--nickel { background: linear-gradient(135deg, #D8D5CC 0%, #7C7A72 100%); }
.swatch--bronze { background: linear-gradient(135deg, #8C5F3E 0%, #3D2818 100%); }
.swatch--copper { background: linear-gradient(135deg, #C97A48 0%, #6A3A1C 100%); }
.mat-group__foot {
padding-top: 12px;
border-top: 1px solid var(--rule);
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
color: var(--ink-mute);
letter-spacing: 0.04em;
line-height: 1.5;
}
.mat-group__foot strong { color: var(--navy); font-weight: 600; }
@media (max-width: 900px) { .materials { grid-template-columns: 1fr; } }
/* ===== Process rail (matches main — animated brass fill on hover) ===== */
.process__rail {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 24px;
position: relative;
}
.process__rail::before {
content: ""; position: absolute;
left: 0; right: 0; top: 18px;
height: 1px; background: var(--rule-strong);
}
.process__rail::after {
content: "";
position: absolute;
left: 0; top: 17.5px;
height: 2px;
width: 0;
background: linear-gradient(90deg, var(--brass-soft) 0%, var(--brass) 60%, var(--brass-deep) 100%);
box-shadow: 0 0 10px rgba(201, 149, 75, 0.4);
border-radius: 2px;
transition: width 520ms cubic-bezier(.4, 0, .2, 1);
pointer-events: none;
z-index: 0;
}
.process__rail:has(.pstep:nth-child(1):hover)::after { width: calc((100% / 6) * 1 + 4px); }
.process__rail:has(.pstep:nth-child(2):hover)::after { width: calc((100% / 6) * 2 + 8px); }
.process__rail:has(.pstep:nth-child(3):hover)::after { width: calc((100% / 6) * 3 + 12px); }
.process__rail:has(.pstep:nth-child(4):hover)::after { width: calc((100% / 6) * 4 + 16px); }
.process__rail:has(.pstep:nth-child(5):hover)::after { width: calc((100% / 6) * 5 + 20px); }
.process__rail:has(.pstep:nth-child(6):hover)::after { width: 100%; }
.pstep { position: relative; padding-top: 48px; z-index: 2; cursor: default; }
.pstep__dot {
position: absolute; top: 12px; left: 0;
width: 12px; height: 12px;
background: var(--brass);
border: 4px solid var(--paper);
box-shadow: 0 0 0 1.5px var(--brass-deep);
border-radius: 50%;
transition: transform 320ms cubic-bezier(.4, 0, .2, 1), box-shadow 320ms ease;
z-index: 3;
}
.pstep:hover .pstep__dot {
transform: scale(1.35);
animation: pstep-pulse 1.8s ease-out infinite;
}
@keyframes pstep-pulse {
0% { box-shadow: 0 0 0 1.5px var(--brass-deep), 0 0 0 3px rgba(201, 149, 75, 0.55), 0 0 14px rgba(201, 149, 75, 0.55); }
70% { box-shadow: 0 0 0 1.5px var(--brass-deep), 0 0 0 16px rgba(201, 149, 75, 0), 0 0 14px rgba(201, 149, 75, 0); }
100% { box-shadow: 0 0 0 1.5px var(--brass-deep), 0 0 0 0 rgba(201, 149, 75, 0), 0 0 14px rgba(201, 149, 75, 0); }
}
.pstep__name { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 17px; line-height: 1.18; letter-spacing: -0.01em; margin-bottom: 10px; transition: color 280ms ease; }
.pstep:hover .pstep__name { color: var(--brass-deep); }
.pstep__num { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.12em; color: var(--brass-deep); margin-bottom: 6px; font-weight: 600; }
.pstep__week { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-mute); margin-bottom: 10px; text-transform: uppercase; }
.pstep__body { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 900px) {
.process__rail { grid-template-columns: 1fr; gap: 22px; }
.process__rail::before { left: 6px; top: 6px; bottom: 6px; right: auto; width: 1px; height: auto; }
.process__rail::after,
.process__rail:has(.pstep:hover)::after { left: 5px; top: 6px; width: 3px; height: 0; background: linear-gradient(180deg, var(--brass-soft) 0%, var(--brass) 60%, var(--brass-deep) 100%); transition: height 520ms cubic-bezier(.4, 0, .2, 1); }
.process__rail:has(.pstep:nth-child(1):hover)::after { height: calc((100% / 6) * 1 + 4px); width: 3px; }
.process__rail:has(.pstep:nth-child(2):hover)::after { height: calc((100% / 6) * 2 + 8px); width: 3px; }
.process__rail:has(.pstep:nth-child(3):hover)::after { height: calc((100% / 6) * 3 + 12px); width: 3px; }
.process__rail:has(.pstep:nth-child(4):hover)::after { height: calc((100% / 6) * 4 + 16px); width: 3px; }
.process__rail:has(.pstep:nth-child(5):hover)::after { height: calc((100% / 6) * 5 + 20px); width: 3px; }
.process__rail:has(.pstep:nth-child(6):hover)::after { height: 100%; width: 3px; }
.pstep { padding-top: 0; padding-left: 32px; padding-bottom: 8px; }
.pstep__dot { left: 0; top: 4px; }
}
/* ===== Featured case study ===== */
.case {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 56px;
align-items: stretch;
}
.case__media {
position: relative;
background: #0b0f14;
overflow: hidden;
aspect-ratio: 4/5;
}
.case__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms ease; }
.case__media:hover img { transform: scale(1.04); }
.case__media-badge {
position: absolute; top: 18px; left: 18px;
background: var(--navy-deep);
color: var(--brass);
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 700;
padding: 7px 12px;
}
.case__copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: 8px 0;
}
.case__kicker {
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--brass-deep);
font-weight: 700;
margin-bottom: 16px;
display: inline-flex;
align-items: center;
gap: 12px;
align-self: flex-start;
}
.case__kicker::before { content: ""; width: 28px; height: 1.5px; background: var(--brass-deep); }
.case__title {
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: clamp(28px, 3.8vw, 52px);
line-height: 1.02;
letter-spacing: -0.025em;
margin-bottom: 20px;
color: var(--ink);
}
.case__title em { font-family: "Fraunces", serif; font-style: italic; font-weight: 300; color: var(--brass-deep); }
.case__lede {
font-size: 16px;
line-height: 1.65;
color: var(--ink-soft);
margin-bottom: 24px;
}
.case__quote {
font-family: "Archivo", sans-serif;
font-weight: 500;
font-size: 17px;
line-height: 1.45;
color: var(--ink);
border-left: 3px solid var(--brass);
padding: 6px 0 6px 18px;
margin: 0 0 26px;
}
.case__quote cite {
display: block;
margin-top: 12px;
font-family: "IBM Plex Mono", monospace;
font-style: normal;
font-size: 11px;
letter-spacing: 0.06em;
color: var(--ink-mute);
font-weight: 600;
}
.case__specs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 24px;
padding-top: 22px;
border-top: 1px solid var(--rule);
margin-bottom: 22px;
}
.case__spec {
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.06em;
color: var(--ink-mute);
text-transform: uppercase;
line-height: 1.5;
}
.case__spec strong {
display: block;
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: 20px;
letter-spacing: -0.015em;
color: var(--navy);
text-transform: none;
margin-bottom: 2px;
}
.case__cta {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: "Archivo", sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--navy);
border-bottom: 2px solid var(--brass);
padding: 4px 0;
align-self: flex-start;
transition: color 200ms ease, gap 200ms ease;
}
.case__cta:hover { color: var(--brass-deep); }
@media (max-width: 900px) { .case { grid-template-columns: 1fr; gap: 32px; } }
/* ===== Kitchens gallery ===== */
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.gcard {
background: var(--paper);
border: 1px solid var(--rule);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 320ms ease, border-color 320ms ease;
cursor: pointer;
}
.gcard:hover { transform: translateY(-4px); border-color: var(--brass-deep); }
.gcard:hover .gcard__img { transform: scale(1.05); }
.gcard__media {
aspect-ratio: 4/3;
overflow: hidden;
background: var(--bone-soft);
position: relative;
}
.gcard__img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 700ms ease;
}
.gcard__chip {
position: absolute;
top: 14px; left: 14px;
background: rgba(11,15,20,0.78);
color: var(--brass);
padding: 5px 10px;
font-family: "IBM Plex Mono", monospace;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 700;
backdrop-filter: blur(4px);
}
.gcard__body { padding: 22px 22px 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.gcard__neigh { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--ink-mute); text-transform: uppercase; }
.gcard__name { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 17px; line-height: 1.2; letter-spacing: -0.01em; }
.gcard__meta {
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--rule);
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
letter-spacing: 0.04em;
color: var(--ink-mute);
}
.gcard__budget { color: var(--brass-deep); font-weight: 700; }
@media (max-width: 900px) { .gallery { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
/* mobile: horizontal swipe row, next card peeks so it's clearly swipeable */
.gallery { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 14px; scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.gallery > .gcard { flex: 0 0 80%; scroll-snap-align: start; }
}
.gallery__more {
margin-top: 40px;
display: flex;
justify-content: center;
}
.gallery__more a {
display: inline-flex;
align-items: center;
gap: 10px;
background: transparent;
color: var(--navy);
border: 1.5px solid var(--navy);
padding: 16px 26px;
font-family: "Archivo", sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: background 220ms ease, color 220ms ease;
}
.gallery__more a:hover { background: var(--navy); color: var(--bone); }
/* ===== FAQ ===== */
.faq__inner {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 64px;
align-items: start;
}
.faq__copy { position: sticky; top: 110px; }
.faq__title {
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: clamp(32px, 4.2vw, 56px);
line-height: 1.02;
letter-spacing: -0.025em;
color: var(--ink);
margin-bottom: 22px;
}
.faq__title em { font-family: "Fraunces", serif; font-style: italic; font-weight: 300; color: var(--brass-deep); }
.faq__lede {
font-size: 16px;
color: var(--ink-soft);
line-height: 1.65;
margin-bottom: 28px;
max-width: 440px;
}
.faq__direct {
padding: 22px 24px;
background: var(--bone);
border-left: 4px solid var(--brass);
}
.faq__direct-l {
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brass-deep);
font-weight: 700;
margin-bottom: 6px;
}
.faq__direct-v {
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: 22px;
letter-spacing: -0.01em;
color: var(--navy);
margin-bottom: 6px;
display: block;
}
.faq__direct-v:hover { color: var(--brass-deep); }
.faq__direct-sub {
font-size: 13px;
color: var(--ink-mute);
line-height: 1.5;
}
.faq__list { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid var(--rule); }
.faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-item__q {
width: 100%;
text-align: left;
background: none;
border: none;
padding: 24px 0;
cursor: pointer;
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: start;
font-family: "Archivo", sans-serif;
font-weight: 700;
font-size: 18px;
letter-spacing: -0.01em;
color: var(--ink);
line-height: 1.3;
transition: color 200ms ease;
}
.faq-item__q:hover { color: var(--brass-deep); }
.faq-item__icon {
width: 28px; height: 28px;
border: 1.5px solid var(--rule-strong);
color: var(--ink-mute);
flex-shrink: 0;
position: relative;
transition: all 240ms ease;
}
.faq-item__icon::before, .faq-item__icon::after {
content: "";
position: absolute;
background: currentColor;
transition: transform 240ms ease;
}
.faq-item__icon::before {
left: 6px; right: 6px; top: 50%;
height: 2px; transform: translateY(-50%);
}
.faq-item__icon::after {
top: 6px; bottom: 6px; left: 50%;
width: 2px; transform: translateX(-50%);
}
.faq-item.is-open .faq-item__icon { border-color: var(--brass); color: var(--brass-deep); background: var(--bone); }
.faq-item.is-open .faq-item__icon::after { transform: translateX(-50%) scaleY(0); }
.faq-item__a {
max-height: 0;
overflow: hidden;
transition: max-height 320ms ease, padding 320ms ease;
font-size: 15px;
line-height: 1.65;
color: var(--ink-soft);
padding-right: 40px;
}
.faq-item.is-open .faq-item__a { max-height: 600px; padding-bottom: 24px; }
.faq-item__a p { margin: 0 0 10px; }
.faq-item__a p:last-child { margin-bottom: 0; }
.faq-item__a strong { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) {
.faq__inner { grid-template-columns: 1fr; gap: 32px; }
.faq__copy { position: static; }
}
/* ===== Final CTA / Lead form ===== */
.lead { background: var(--navy); color: var(--bone); padding: 90px 0 88px; }
.lead__inner {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 72px;
align-items: start;
}
.lead__title {
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: clamp(36px, 4.5vw, 60px);
line-height: 1.0;
letter-spacing: -0.025em;
color: var(--bone);
margin-bottom: 24px;
}
.lead__title .accent { color: var(--brass); }
.lead__title em { font-family: "Fraunces", serif; font-style: italic; font-weight: 300; color: var(--brass-soft); }
.lead__body {
font-size: 16px;
line-height: 1.6;
color: #fff;
margin-bottom: 28px;
max-width: 460px;
}
.lead__bullets { display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; }
.lead__bullet {
display: grid;
grid-template-columns: auto 1fr;
gap: 14px;
font-size: 14px;
color: #fff;
line-height: 1.45;
}
.lead__bullet::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--brass);
margin-top: 7px;
box-shadow: 0 0 0 4px rgba(201,149,75,0.16);
}
.lead__direct {
padding-top: 24px;
border-top: 1px solid rgba(246,242,232,0.16);
display: flex; flex-direction: column; gap: 6px;
}
.lead__direct-label {
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brass-soft);
}
.lead__direct a {
font-family: "Archivo", sans-serif;
font-weight: 700;
font-size: 28px;
color: var(--bone);
letter-spacing: 0.01em;
transition: color 200ms ease;
}
.lead__direct a:hover { color: var(--brass); }
.form-card {
background: linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 100%);
color: var(--bone);
border-top: 5px solid var(--brass);
padding: 26px 26px 22px;
box-shadow: 0 30px 60px -26px rgba(6,22,41,0.55);
border: 1px solid rgba(201,149,75,0.22);
border-top-color: var(--brass);
}
.form-card__head { margin-bottom: 20px; }
.form-card__title { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 20px; letter-spacing: -0.015em; margin-bottom: 4px; line-height: 1.2; }
.form-card__sub { font-size: 12.5px; color: rgba(246,242,232,0.66); line-height: 1.45; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.form-input, .form-select, .form-textarea {
width: 100%;
background: #fff;
border: 1.5px solid transparent;
padding: 11px 14px;
font-family: "Manrope", sans-serif;
font-size: 13.5px;
color: var(--ink);
transition: border-color 200ms ease, box-shadow 200ms ease;
margin-bottom: 6px;
}
.form-textarea { min-height: 76px; resize: vertical; margin-bottom: 10px; }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(201,149,75,0.22); }
.form-input::placeholder, .form-textarea::placeholder { color: var(--ink-quiet); }
.form-label {
font-family: "IBM Plex Mono", monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(246,242,232,0.62);
font-weight: 700;
margin: 10px 0 8px;
display: block;
}
.form-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.form-chip {
background: #fff;
border: 1.5px solid transparent;
color: var(--navy);
padding: 7px 12px;
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.04em;
font-weight: 600;
transition: all 200ms ease;
text-transform: uppercase;
}
.form-chip:hover { border-color: var(--brass); color: var(--navy); }
.form-chip.is-selected { background: var(--brass); color: var(--navy-deep); border-color: var(--brass); font-weight: 700; }
.form-submit {
width: 100%;
background: var(--brass);
color: var(--navy-deep);
border: none;
padding: 14px 20px;
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: background 200ms ease, gap 200ms ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 8px;
}
.form-submit:hover { background: var(--brass-soft); }
.form-foot {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(246,242,232,0.14);
font-family: "IBM Plex Mono", monospace;
font-size: 10px;
letter-spacing: 0.04em;
color: rgba(246,242,232,0.55);
line-height: 1.55;
}
.form-foot strong { color: var(--brass-soft); font-weight: 700; }
.form-financing{ border:1px solid rgba(201,149,75,.35); border-radius:0; padding:14px 16px; margin-bottom:18px; background:rgba(201,149,75,.08); }
.form-financing__eyebrow{ font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); margin-bottom:5px; }
.form-financing__title{ font-family:"Archivo",sans-serif; font-weight:700; font-size:17.5px; color:var(--brass-soft); line-height:1.45; margin-bottom:6px; }
.form-financing__sub{ font-size:12.5px; color:rgba(246,242,232,.72); line-height:1.5; }
.form-financing__cta{ display:inline-flex; align-items:center; gap:7px; margin-top:11px; padding:8px 15px; border:1px solid rgba(201,149,75,.55); border-radius:0; background:rgba(201,149,75,.12); font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass-soft); text-decoration:none; transition:background .18s ease,border-color .18s ease,color .18s ease; }
.form-financing__cta:hover{ background:var(--brass); border-color:var(--brass); color:var(--navy-deep); }
.form-financing__cta svg{ width:13px; height:13px; }
@media (max-width: 900px) {
.lead { padding: 56px 0 56px; }
.lead__inner { grid-template-columns: 1fr; gap: 36px; }
.form-card { padding: 26px 22px 22px; }
.form-row { grid-template-columns: 1fr; }
}
/* ===== Reviews mini ===== */
.miniReviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.miniReview {
background: var(--paper);
border: 1px solid var(--rule);
padding: 24px 24px 20px;
display: flex;
flex-direction: column;
gap: 14px;
transition: border-color 200ms ease, transform 200ms ease;
}
.miniReview:hover { border-color: var(--brass-deep); transform: translateY(-2px); }
.miniReview__top {
display: flex;
justify-content: space-between;
align-items: center;
}
.miniReview__stars { color: var(--brass); font-size: 14px; letter-spacing: 0.06em; }
.miniReview__src {
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.08em;
color: var(--ink-mute);
text-transform: uppercase;
}
.miniReview__src strong { color: var(--navy); }
.miniReview__text { font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.miniReview__foot {
padding-top: 12px;
border-top: 1px solid var(--rule);
font-family: "IBM Plex Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.04em;
color: var(--ink-mute);
display: flex;
justify-content: space-between;
}
.miniReview__foot strong { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .miniReviews { grid-template-columns: 1fr; } }
/* ===== Footer (matches main) ===== */
.footer { background: var(--navy-deep); color: var(--bone); padding: 80px 0 32px; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(246,242,232,0.16); }
.footer__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.footer__brand .brand__mark { width: 52px; height: 52px; }
.footer__brand .brand__name { color: var(--bone); font-size: 20px; }
.footer__brand .brand__name small { color: var(--brass-soft); }
.footer__pitch { font-size: 14px; line-height: 1.6; color: #fff; max-width: 380px; margin-bottom: 24px; }
.footer__badges { display: flex; gap: 10px; flex-wrap: wrap; }
.footer__badge { background: rgba(246,242,232,0.06); color: var(--brass-soft); padding: 6px 12px; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; border: 1px solid rgba(201,149,75,0.18); }
.footer__col h4, .footer__col [data-h] { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); font-weight: 600; margin-bottom: 16px; }
.footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer__col a { color: #fff; font-size: 14px; transition: color 200ms ease; }
.footer__col a:hover { color: var(--brass-soft); }
.footer__bottom { margin-top: 32px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--ink-quiet); text-transform: uppercase; }
@media (max-width: 900px) { .footer__top { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 600px) { .footer__top { grid-template-columns: 1fr; } }
/* ===== Financing (matches main) ===== */
.financing { padding: 80px 0; background: var(--bone-soft); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.financing__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center; }
.financing__copy { max-width: 540px; }
.financing__kicker { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-deep); font-weight: 600; margin-bottom: 14px; }
.financing__title { font-family: "Archivo", sans-serif; font-weight: 900; font-size: clamp(40px, 5.4vw, 84px); line-height: 0.98; letter-spacing: -0.035em; margin-bottom: 22px; color: var(--ink); }
.financing__title em { font-style: normal; color: var(--brass-deep); font-weight: 900; }
.financing__title-stripe { display: inline-block; background: var(--brass); color: var(--navy-deep); padding: 2px 14px 6px; margin-top: 8px; }
.financing__lede { font-size: 16px; line-height: 1.65; color: var(--ink-soft); margin-bottom: 22px; }
.financing__lede em { font-style: italic; color: var(--ink-mute); }
.financing__partners { display: flex; gap: 22px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--rule); font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--ink-mute); text-transform: uppercase; }
.financing__partners strong { color: var(--navy); font-family: "Archivo"; font-size: 13px; letter-spacing: -0.005em; text-transform: none; margin-right: 4px; }
.financing__partners > div { display: flex; flex-direction: column; gap: 2px; }
.financing__card { background: var(--navy); color: var(--bone); padding: 32px 32px 28px; border-top: 5px solid var(--brass); box-shadow: 0 30px 60px -28px rgba(11,15,20,0.3); display: flex; flex-direction: column; gap: 14px; }
.financing__card-l { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-soft); font-weight: 600; }
.financing__card-v { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 76px; letter-spacing: -0.045em; line-height: 0.9; color: var(--brass); }
.financing__card-v small { font-family: "Archivo"; font-size: 22px; color: var(--bone); font-weight: 700; display: inline-block; margin-left: 4px; letter-spacing: -0.01em; text-transform: uppercase; }
.financing__card-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-top: 1px dashed rgba(246,242,232,0.18); font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.06em; color: #fff; text-transform: uppercase; }
.financing__card-row strong { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 17px; color: var(--bone); letter-spacing: -0.005em; text-transform: none; }
.financing__card-meta { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: #fff; letter-spacing: 0.04em; line-height: 1.55; padding-top: 14px; border-top: 1px solid rgba(246,242,232,0.16); }
.financing__card-cta { background: var(--brass); color: var(--navy-deep); border: none; padding: 14px 20px; font-family: "Archivo"; font-weight: 800; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 6px; display: flex; justify-content: space-between; align-items: center; transition: background 200ms ease; }
.financing__card-cta:hover { background: var(--brass-soft); }
@media (max-width: 900px) { .financing { padding: 56px 0; } .financing__inner { grid-template-columns: 1fr; gap: 32px; } .financing__card-v { font-size: 56px; } .financing__title-stripe { padding: 2px 10px 4px; } }
/* ===== Referral strip (matches main) ===== */
.referral { padding: 32px 0; background: var(--brass); color: var(--navy-deep); position: relative; }
.referral__inner { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; }
.referral__icon { font-family: "Archivo"; font-weight: 900; font-size: 24px; color: var(--brass); background: var(--navy-deep); width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: -0.02em; }
.referral__copy { line-height: 1.4; }
.referral__copy strong { display: block; font-family: "Archivo"; font-weight: 800; font-size: 18px; letter-spacing: -0.01em; color: var(--navy-deep); margin-bottom: 4px; }
.referral__copy span { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: 0.04em; color: rgba(6,22,41,0.78); }
.referral__copy span b { color: var(--navy-deep); font-weight: 700; }
.referral__cta { background: var(--navy-deep); color: var(--brass); border: none; padding: 13px 22px; font-family: "Archivo"; font-weight: 800; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; transition: all 200ms ease; }
.referral__cta:hover { background: #000; }
@media (max-width: 720px) { .referral__inner { grid-template-columns: 1fr; gap: 18px; text-align: left; } }
/* ===== Reveal ===== */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity 600ms ease-out, transform 600ms ease-out; }
.reveal.is-visible { opacity: 1; transform: none; }
/* ===== Sticky service quick-nav ===== */
.quickNav {
background: var(--bone);
border-bottom: 1px solid var(--rule);
position: sticky;
top: 70px;
z-index: 40;
}
.quickNav__inner {
display: flex;
gap: 6px;
overflow-x: auto;
padding: 12px 0;
scrollbar-width: none;
}
.quickNav__inner::-webkit-scrollbar { display: none; }
.quickNav a {
flex-shrink: 0;
padding: 8px 16px;
font-family: "IBM Plex Mono", monospace;
font-size: 11.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-mute);
font-weight: 600;
border: 1px solid transparent;
transition: all 200ms ease;
}
.quickNav a:hover { color: var(--navy); border-color: var(--rule); background: var(--paper); }
.quickNav a.is-active { color: var(--navy); border-color: var(--navy); background: var(--paper); }
/* ported work-by-type grid */
.work__filters {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 36px;
padding-bottom: 24px;
border-bottom: 1px solid var(--rule);
}
.chip {
background: transparent;
border: 1px solid var(--rule-strong);
color: var(--ink-soft);
padding: 9px 16px;
font-family: "IBM Plex Mono", monospace;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 500;
transition: all 200ms ease;
}
.chip:hover { border-color: var(--navy); color: var(--navy); }
.chip.is-active {
background: var(--navy);
color: var(--bone);
border-color: var(--navy);
}
.chip .count {
color: var(--brass-deep);
margin-left: 6px;
font-weight: 600;
}
.chip.is-active .count { color: var(--brass-soft); }
.work__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.work__card {
background: var(--paper);
border: 1px solid var(--rule);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 320ms ease, border-color 320ms ease, opacity 240ms ease;
cursor: pointer;
}
.work__card.is-hidden { display: none; }
.work__card:hover {
transform: translateY(-4px);
border-color: var(--brass-deep);
}
.work__card:hover .work__img { transform: scale(1.04); filter: saturate(0.95); }
.work__media {
aspect-ratio: 4/3;
overflow: hidden;
background: var(--bone-soft);
position: relative;
}
.work__img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 700ms ease, filter 400ms ease;
}
.work__type-chip {
position: absolute;
top: 14px; left: 14px;
background: rgba(11,15,20,0.78);
color: var(--brass);
padding: 5px 10px;
font-family: "IBM Plex Mono", monospace;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 600;
backdrop-filter: blur(4px);
}
.work__body { padding: 22px 22px 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.work__neigh {
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
letter-spacing: 0.08em;
color: var(--ink-mute);
text-transform: uppercase;
}
.work__name {
font-family: "Archivo", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 1.2;
letter-spacing: -0.01em;
}
.work__meta {
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--rule);
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: "IBM Plex Mono", monospace;
font-size: 11px;
letter-spacing: 0.04em;
color: var(--ink-mute);
}
.work__budget { color: var(--brass-deep); font-weight: 600; }
@media (max-width: 900px) { .work__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
.work__grid { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 14px; scrollbar-width: none; }
.work__grid::-webkit-scrollbar { display: none; }
.work__grid > .work__card { flex: 0 0 80%; scroll-snap-align: start; }
}
.subhero{ position:relative; background:var(--navy-deep); }
.subhero .vslider__badge{ top:74px; }
.subhero .vslider{ position:relative; }
.subhero .vslider__foot{ position:absolute; left:50%; transform:translateX(-50%); bottom:16px; z-index:8;
margin:0; padding:8px 15px; flex-direction:row; gap:13px; align-items:center;
background:rgba(6,22,41,.42); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,.14); border-radius:999px; }
.subhero .vslider__dot{ background:rgba(255,255,255,.5); }
.subhero .vslider__dot.is-active{ background:var(--brass); }
.subhero .vslider__hint{ color:rgba(255,255,255,.82); }
@media (max-width:560px){ .subhero .vslider__foot{ bottom:10px; padding:7px 12px; gap:10px; } }
/* shared atoms */
.sh-crumb{ font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; display:flex; gap:9px; align-items:center; }
.sh-crumb a{ color:inherit; opacity:.72; text-decoration:none; }
.sh-crumb a:hover{ opacity:1; color:var(--brass); }
.sh-crumb span{ opacity:.4; }
.sh-crumb b{ color:var(--brass); font-weight:600; }
.sh-eyebrow{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); }
.sh-title{ font-family:"Archivo",sans-serif; font-weight:800; letter-spacing:-.02em; line-height:1.03; font-size:clamp(30px,4.4vw,52px); margin:0; }
.sh-sub{ font-family:"Manrope",sans-serif; font-size:clamp(15px,1.5vw,18px); line-height:1.5; margin:0; }
.sh-chip{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
border:1px solid rgba(201,149,75,.5); color:var(--brass-soft,#E4C596); border-radius:999px; padding:7px 14px; }
/* V1 — tinted photo, centered */
.sh1{ position:relative; overflow:hidden; min-height:344px; display:flex; }
.sh1__bg{ position:absolute; inset:0; background:url("/assets/ext/miamifirstremodeling/kitchen-002/kitchen-001.webp") center/cover; }
.sh1__bg::after{ content:""; position:absolute; inset:0;
background:linear-gradient(180deg,rgba(6,22,41,.74),rgba(6,22,41,.60)); }
.sh1 .sh-crumb{ position:absolute; top:92px; left:56px; z-index:3; color:var(--bone); }
.sh1__in{ position:relative; z-index:2; width:100%; max-width:900px; margin:0 auto;
padding:132px 56px 44px; color:var(--bone); text-align:center;
display:flex; flex-direction:column; align-items:center; gap:15px; }
.sh1__in .sh-sub{ max-width:60ch; }
.sh1 .sh-chip{ align-self:center; }
/* V2 — solid navy, left band */
.sh2{ position:relative; overflow:hidden; background:var(--navy-deep); min-height:300px; display:flex; }
.sh2::after{ content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(120% 130% at 100% 0%, rgba(0,0,0,.38), transparent 60%); }
.sh2__in{ position:relative; z-index:2; width:100%; max-width:1440px; margin:0 auto;
padding:112px 56px 46px; color:var(--bone); display:flex; flex-direction:column; justify-content:center; gap:15px; }
.sh2__col{ max-width:760px; display:flex; flex-direction:column; gap:15px; }
.sh2__rule{ width:46px; height:2px; background:var(--brass); margin:3px 0 2px; }
/* V3 — split founder panel */
.sh3{ display:grid; grid-template-columns:1fr 1fr; min-height:400px; }
.sh3__text{ background:var(--paper); color:var(--navy-deep); padding:112px 56px 42px;
display:flex; flex-direction:column; justify-content:center; gap:14px; }
.sh3__text .sh-crumb a{ opacity:.65; }
.sh3__text .sh-sub{ color:var(--ink-mute); }
.sh3__text .sh-chip{ border-color:rgba(14,42,71,.28); color:var(--navy); }
.sh3__photo{ background:url("/assets/ext/miamifirstremodeling/kitchen-001/kitchen-004.webp") center 22%/cover; min-height:100%; }
/* V4 — ultra-compact bar */
.sh4{ background:var(--paper); color:var(--navy-deep); border-bottom:1px solid var(--rule); min-height:212px; display:flex; }
.sh4__in{ width:100%; max-width:1440px; margin:0 auto; padding:106px 56px 30px;
display:flex; flex-direction:column; justify-content:center; gap:13px; }
.sh4__in .sh-crumb a{ opacity:.6; }
.sh4__facts{ font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.04em;
color:var(--ink-mute); display:flex; gap:11px; flex-wrap:wrap; }
.sh4__facts span{ opacity:.45; }
/* V5 — scrim photo + floating stat chip */
.sh5{ position:relative; overflow:hidden; min-height:404px; display:flex; }
.sh5__bg{ position:absolute; inset:0; background:url("/assets/ext/miamifirstremodeling/kitchen-001/kitchen-003.webp") center 45%/cover; }
.sh5__bg::after{ content:""; position:absolute; inset:0;
background:linear-gradient(0deg,rgba(6,22,41,.90) 0%,rgba(6,22,41,.30) 52%,rgba(6,22,41,.50) 100%); }
.sh5 .sh-crumb{ position:absolute; top:92px; left:56px; z-index:3; color:var(--bone); }
.sh5__in{ position:relative; z-index:2; width:100%; max-width:1440px; margin:0 auto;
padding:104px 56px 42px; color:var(--bone); display:flex; flex-direction:column; justify-content:flex-end; gap:12px; }
.sh5__in .sh-sub{ max-width:52ch; }
.sh5__cta{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; margin-top:4px;
font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
color:var(--brass); text-decoration:none; }
.sh5__cta:hover{ color:var(--brass-soft,#E4C596); }
.sh5__cta span{ transition:transform .2s ease; }
.sh5__cta:hover span{ transform:translateX(4px); }
.sh5__stat{ position:absolute; right:56px; bottom:42px; z-index:3;
background:#fff; color:var(--navy-deep); border-radius:0; padding:15px 20px;
box-shadow:0 18px 40px rgba(6,22,41,.34); text-align:left; }
.sh5__stat b{ display:block; font-family:"Archivo",sans-serif; font-weight:900; font-size:30px; line-height:1; color:var(--brass); }
.sh5__stat small{ display:block; margin-top:6px; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); }
@media (max-width:860px){
.sh1 .sh-crumb, .sh5 .sh-crumb{ top:80px; left:22px; }
.sh1__in{ padding:118px 22px 38px; }
.sh2__in{ padding:100px 22px 40px; }
.sh3{ grid-template-columns:1fr; min-height:auto; }
.sh3__photo{ min-height:210px; order:-1; }
.sh3__text{ padding:34px 22px 34px; }
.sh4__in{ padding:96px 22px 26px; }
.sh5__in{ padding:150px 22px 34px; }
.sh5__stat{ position:static; align-self:flex-start; margin-top:6px; box-shadow:none; }
.subhero .vslider__badge{ top:66px; }
}
.gallery-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;}
.gallery-modal__overlay{position:absolute;inset:0;background:rgba(6,22,41,.94);backdrop-filter:blur(2px);}
.gallery-modal__container{position:relative;width:92%;max-width:1120px;max-height:92vh;z-index:10001;display:flex;flex-direction:column;gap:14px;}
.gallery-modal__close{position:absolute;top:8px;right:8px;width:42px;height:42px;border:none;border-radius:50%;background:rgba(6,22,41,.6);color:var(--bone);font-size:26px;line-height:42px;text-align:center;cursor:pointer;z-index:10003;transition:transform .2s,background .2s;}
.gallery-modal__close:hover{transform:scale(1.08);background:var(--brass);color:var(--navy-deep);}
.gallery-modal__cap{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--brass-soft);font-weight:600;padding-right:54px;}
.gallery-modal__image-wrapper{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;width:100%;}
.gallery-modal__image{max-width:100%;max-height:70vh;object-fit:contain;border:1px solid rgba(227,187,126,.25);user-select:none;-webkit-user-drag:none;transition:opacity .25s ease;}
.gallery-modal__image.is-swapping{opacity:0;}
.gallery-modal__thumbs{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;padding:2px 2px 4px;flex:0 0 auto;-ms-overflow-style:none;scrollbar-width:none;}
.gallery-modal__thumbs::-webkit-scrollbar{display:none;}
.gallery-modal__thumb{flex:0 0 calc((100% - 50px)/6);aspect-ratio:4/3;overflow:hidden;background:var(--navy-deep);border:2px solid transparent;padding:0;cursor:pointer;opacity:.5;transition:opacity .2s,border-color .2s,transform .2s;}
.gallery-modal__thumb img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
.gallery-modal__thumb:hover{opacity:.85;transform:translateY(-2px);}
.gallery-modal__thumb.active{opacity:1;border-color:var(--brass);}
@media(max-width:900px){.gallery-modal__thumb{flex:0 0 calc((100% - 30px)/4);}}
@media(max-width:768px){.gallery-modal__container{width:94%;max-height:94vh;}.gallery-modal__image{max-height:62vh;}.gallery-modal__thumb{flex:0 0 calc((100% - 20px)/3);}}
@media(max-width:520px){.gallery-modal__thumb{flex:0 0 calc((100% - 14px)/2.6);}}
.gcard{cursor:pointer;} .gcard:focus-visible{outline:2px solid var(--brass);outline-offset:3px;}
/* Contact "Tell us about your home" form — match the main site (frosted navy, 420px, right-aligned) */
.lead .quiz { background: rgba(6,22,41,0.32); backdrop-filter: blur(26px) saturate(1.1); -webkit-backdrop-filter: blur(26px) saturate(1.1); color: var(--bone); border: 1px solid rgba(201,149,75,0.32); border-top: 4px solid var(--brass); box-shadow: 0 32px 60px -28px rgba(6,22,41,0.7), 0 10px 24px -14px rgba(0,0,0,0.4); width: 100%; max-width: 420px; justify-self: end; overflow: hidden; padding: 0; gap: 0; }
.lead .quiz__head { padding: 16px 22px 14px; border-bottom: 1px solid rgba(246,242,232,0.14); display: flex; justify-content: space-between; align-items: flex-end; background: transparent; margin: 0; }
.lead .quiz__kicker { color: var(--brass); }
.lead .quiz__title { color: var(--bone); }
.lead .quiz__body { padding: 18px 22px 20px; }
.lead .quiz__q { color: var(--bone); }
.lead .quiz__hint { color: #fff; }
.lead .quiz__inputs { display: flex; flex-direction: column; gap: 8px; }
.lead .quiz__input { background: var(--bone); border: 1.5px solid rgba(246,242,232,0.2); color: var(--ink); }
.lead .quiz__input:focus { outline: none; border-color: var(--brass); background: #fff; }
.lead .quiz__input::placeholder { color: var(--ink-quiet); }
.lead .quiz__textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
.lead .quiz__foot { padding: 10px 22px 16px; border-top: 1px solid rgba(246,242,232,0.14); background: transparent; margin: 0; }
.lead .quiz__next { flex: 1; background: var(--brass); color: var(--navy-deep); }
.lead .quiz__next:hover { background: var(--brass-soft); }
.lead .quiz__assurance { padding: 10px 22px 14px; background: transparent; color: #fff; }
.lead .quiz__assurance strong { color: var(--brass-soft); }
@media (max-width: 1000px) { .lead .quiz { justify-self: center; max-width: 600px; } }
/* Item 8 — mobile logo tag: hide when it can't sit inline, instead of wrapping under the logo */
@media (max-width: 560px){ .navbar .brand__tag{ display:none !important; } }
.vslider{ position:relative; width:100%; }
.vslider__viewport{ overflow:hidden; height:auto; transition:height 420ms cubic-bezier(.4,0,.2,1); }
.vslider__track{ display:flex; align-items:flex-start; will-change:transform;
transition:transform 460ms cubic-bezier(.4,0,.2,1); }
.vslide{ flex:0 0 100%; width:100%; min-width:100%; }
.vslider.is-dragging .vslider__track{ transition:none; }
/* floating version badge — top-right of the block */
.vslider__badge{ position:absolute; top:18px; right:24px; z-index:8;
display:inline-flex; align-items:center; gap:8px; padding:7px 13px;
background:var(--navy-deep); color:var(--bone); border:1px solid rgba(201,149,75,.35);
border-radius:999px; font-family:"IBM Plex Mono",monospace; font-size:10.5px;
letter-spacing:.12em; text-transform:uppercase; box-shadow:0 6px 22px rgba(6,22,41,.22);
pointer-events:none; }
.vslider__badge b{ color:var(--brass-soft); font-weight:600; }
.vslider__badge .vslider__badge-name{ color:var(--brass-soft); }
@media (max-width:560px){ .vslider__badge{ top:10px; right:12px; font-size:9px; padding:5px 10px; } }
/* arrows */
.vslider__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:9;
width:46px; height:46px; border-radius:50%; border:1px solid rgba(201,149,75,.4);
background:rgba(6,22,41,.86); color:var(--brass-soft); backdrop-filter:blur(6px);
display:flex; align-items:center; justify-content:center; font-size:22px; line-height:1;
opacity:0; /* item8 — hidden until the block is hovered */
transition:background 200ms ease, transform 200ms ease, opacity 220ms ease; }
.vslider:hover .vslider__arrow{ opacity:1; }
.vslider:hover .vslider__arrow[disabled]{ opacity:.22; }
.vslider__arrow:hover{ background:var(--brass); color:var(--navy-deep); }
.vslider__arrow--prev{ left:14px; }
.vslider__arrow--next{ right:14px; }
.vslider__arrow[disabled]{ cursor:default; }
@media (max-width:900px){ .vslider__arrow{ width:38px; height:38px; font-size:18px; }
.vslider__arrow--prev{ left:6px; } .vslider__arrow--next{ right:6px; } }
/* touch devices have no hover — keep arrows lightly visible, swipe is primary */
@media (hover:none){ .vslider__arrow{ opacity:.5; } .vslider__arrow[disabled]{ opacity:.12; } }
/* item1+item9 — logo now cropped tight (no transparent padding), so box height = glyph height.
Sized just above the Free Estimate button so the mark reads as a proper logo. */
.navbar .brand__mark{ width:auto; height:42px; }
.navbar .brand__mark img{ width:auto; height:100%; object-fit:contain; }
@media (max-width:560px){ .navbar .brand__mark{ width:auto; height:36px; } }
@media (max-width:360px){ .navbar .brand__mark{ height:32px; } }
/* mobile header fix — keep the burger on-screen + clean brand name */
@media (max-width:560px){
.navbar{ padding:14px 14px; gap:10px; }
.navbar.is-scrolled{ padding:10px 14px; }
.navbar__right{ gap:8px; }
.navbar__right .navbar__cta{ padding:9px 12px; font-size:10.5px; }
.navbar__call{ width:38px; height:38px; }
/* undo the display:contents grid trick (tag is hidden here) — plain flex, readable name */
.navbar .brand{ display:flex; align-items:center; gap:9px; }
.navbar .brand__mark{ width:auto; height:36px; }
.navbar .brand__name{ display:block; font-size:15px; line-height:1.15; max-width:150px; }
.navbar .brand__tag{ display:none; }
}
@media (max-width:360px){
.navbar__right .navbar__cta{ padding:8px 10px; font-size:10px; }
.navbar .brand__name{ font-size:14px; max-width:120px; }
}
/* item10 — 6 category items: tighten nav on mid-width desktops so nothing wraps */
.navbar__links > .navbar__item > a, .navbar__links > a{ white-space:nowrap; }
@media (max-width:1300px){ .navbar__links{ gap:18px; font-size:12.5px; } .navbar{ gap:22px; } }
@media (max-width:1120px){ .navbar__links{ gap:13px; font-size:12px; } }
/* below 1024 the 6-item nav gets cramped — switch to the burger drawer early */
@media (max-width:1024px){
.navbar__links, .navbar__phone{ display:none !important; }
.navbar__burger{ display:flex !important; }
.navbar__call{ display:inline-flex !important; }
}
/* item2 — homepage-style stats band below the hero (variant 2) */
.hero-statsband{ background:var(--navy-deep); border-top:1px solid rgba(201,149,75,.18); margin-top:36px; }
.hero-statsband__grid{ display:grid; grid-template-columns:repeat(5,1fr); }
.hero-statsband .st{ padding:24px 20px; border-right:1px solid rgba(246,242,232,.08); }
.hero-statsband .st:last-child{ border-right:none; }
.hero-statsband .st__v{ font-family:"Archivo",sans-serif; font-weight:900; font-size:42px; letter-spacing:-.03em; line-height:1; color:var(--brass); }
.hero-statsband .st__v sub{ font-size:18px; color:var(--bone); vertical-align:super; letter-spacing:0; margin-left:2px; font-weight:700; }
.hero-statsband .st__l{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-quiet); margin-top:9px; }
.hero-statsband .st__m{ font-size:12.5px; color:rgba(246,242,232,.6); line-height:1.4; margin-top:4px; }
@media (max-width:900px){ .hero-statsband__grid{ grid-template-columns:repeat(2,1fr); }
.hero-statsband .st{ border-bottom:1px solid rgba(246,242,232,.08); padding:20px 18px; }
.hero-statsband .st:nth-child(2n){ border-right:none; } .hero-statsband .st__v{ font-size:34px; } }
/* item2 — slim credential ribbon below hero (variant 3) */
.hero-ribbon{ margin-top:30px; border-top:1px solid rgba(227,187,126,.28); border-bottom:1px solid rgba(227,187,126,.28); padding:16px 0; display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--brass-soft); }
.hero-ribbon b{ color:var(--bone); font-weight:600; }
.hero-ribbon .sep{ opacity:.4; }
/* item2 fix — pin the stats band flush to the very bottom of the hero on its slide */
section.hero .vslider__foot{ position:absolute; left:0; right:0; bottom:9px; z-index:6; margin:0; }
section.hero:has(.vslide[data-label="Stats band below"].is-active){ padding-bottom:0; }
section.hero .vslide[data-label="Stats band below"] .hero-statsband{ padding-bottom:24px; }
/* item4 — SEO guide v2: text + sticky TOC on the right; mobile = chips on top */
.guide2{ display:grid; grid-template-columns:1fr 240px; gap:56px; align-items:start; margin-top:8px; }
.guide2__body{ max-width:760px; }
.guide2__body h3{ font-family:"Archivo",sans-serif; font-size:22px; letter-spacing:-.01em; margin:30px 0 10px; scroll-margin-top:110px; }
.guide2__body > p:first-child{ font-size:19px; line-height:1.6; color:var(--ink-soft); }
.guide2__body p{ color:var(--ink-mute); line-height:1.7; margin:0 0 16px; }
.guide2__toc{ position:sticky; top:110px; align-self:start; border-left:2px solid var(--brass); padding-left:18px; display:flex; flex-direction:column; gap:11px; font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; }
.guide2__toc a{ color:var(--ink-soft); transition:color .2s; }
.guide2__toc a:hover{ color:var(--brass-deep); }
.guide2__toc-h{ font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-quiet); margin-bottom:4px; }
/* item12 — collapsible guide text on slide 2 (like slide 1) */
.guide2__hidden{ display:none; }
.guide2.is-open .guide2__hidden{ display:block; }
.guide2__toggle{ display:inline-flex; align-items:center; gap:10px; margin-top:20px; padding:12px 22px; background:none; border:1px solid var(--ink); border-radius:999px; font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); transition:background .2s ease, color .2s ease; }
.guide2__toggle:hover{ background:var(--ink); color:var(--bone); }
.guide2__toggle-arrow{ display:inline-block; transition:transform .3s ease; }
.guide2.is-open .guide2__toggle-arrow{ transform:rotate(180deg); }
.guide2__chips{ display:none; }
@media (max-width:900px){
.guide2{ grid-template-columns:1fr; gap:0; }
.guide2__toc{ display:none; }
.guide2__chips{ display:flex; gap:9px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:4px 0 18px; margin-bottom:8px; scrollbar-width:none; }
.guide2__chips::-webkit-scrollbar{ display:none; }
.guide2__chips a{ flex:0 0 auto; padding:8px 14px; border:1px solid var(--rule); border-radius:999px; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; }
}
/* item4 — SEO guide v3: collapsible subheadings with an expand icon on the right */
.guide3{ max-width:820px; margin-top:8px; border-top:1px solid var(--rule); }
.guide3__lede{ font-size:19px; line-height:1.6; color:var(--ink-soft); padding:22px 0; border-bottom:1px solid var(--rule); }
.guide3__item{ border-bottom:1px solid var(--rule); }
.guide3__item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0; font-family:"Archivo",sans-serif; font-size:19px; letter-spacing:-.01em; }
.guide3__item summary::-webkit-details-marker{ display:none; }
.guide3__ic{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:1px solid var(--rule-strong); position:relative; transition:transform .3s ease, background .2s; }
.guide3__ic::before,.guide3__ic::after{ content:""; position:absolute; background:var(--brass-deep); border-radius:2px; top:50%; left:50%; transform:translate(-50%,-50%); }
.guide3__ic::before{ width:12px; height:2px; }
.guide3__ic::after{ width:2px; height:12px; transition:opacity .3s ease; }
.guide3__item[open] .guide3__ic{ background:var(--brass); border-color:var(--brass); transform:rotate(180deg); }
.guide3__item[open] .guide3__ic::before,.guide3__item[open] .guide3__ic::after{ background:var(--navy-deep); }
.guide3__item[open] .guide3__ic::after{ opacity:0; }
.guide3__c{ padding:0 0 22px; }
.guide3__c p{ color:var(--ink-mute); line-height:1.7; margin:0 0 16px; max-width:720px; }
/* item5 — reviews: horizontal peek-carousel on mobile */
.reviews__more{ margin-top:30px; text-align:center; }
.reviews__more a{ display:inline-flex; align-items:center; gap:9px; padding:13px 26px; border:1px solid var(--ink); border-radius:999px; font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); transition:background .2s,color .2s; }
.reviews__more a:hover{ background:var(--ink); color:var(--bone); }
@media (max-width:760px){
.miniReviews{ display:flex !important; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; -webkit-overflow-scrolling:touch; margin:0 -20px; padding:4px 20px 14px; scrollbar-width:none; }
.miniReviews::-webkit-scrollbar{ display:none; }
.miniReviews .miniReview{ flex:0 0 84%; scroll-snap-align:start; }
}
/* item7 — review/accreditation logo wall */
.logowall{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:34px 54px; margin-top:8px; }
.logowall img{ height:34px; width:auto; opacity:.78; filter:grayscale(1); transition:opacity .25s ease, filter .25s ease; }
.logowall img:hover{ opacity:1; filter:none; }
@media (max-width:560px){ .logowall{ gap:24px 32px; } .logowall img{ height:26px; } }
/* reviews v3 — stacked review column (overrides the mobile carousel) */
.miniReviews--stack{ display:flex !important; flex-direction:column; gap:16px; overflow:visible !important; margin:0 !important; padding:0 !important; }
.miniReviews--stack .miniReview{ flex:none !important; }
/* hero v4 — floating spec card */
.hero-card{ background:rgba(6,22,41,.72); backdrop-filter:blur(10px); border:1px solid rgba(201,149,75,.3); border-radius:0; padding:26px 28px; max-width:300px; }
.hero-card__row{ display:flex; justify-content:space-between; align-items:baseline; padding:14px 0; border-bottom:1px solid rgba(227,187,126,.16); }
.hero-card__row:last-child{ border-bottom:none; }
.hero-card__v{ font-family:"Archivo",sans-serif; font-weight:800; font-size:22px; color:var(--brass-soft); }
.hero-card__l{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(246,242,232,.75); }
.hero__split{ display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; }
@media (max-width:900px){ .hero__split{ grid-template-columns:1fr; } .hero-card{ max-width:none; } }
/* explore v5 — numbered index */
.xlink-index{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 48px; margin-top:8px; }
.xlink-index a{ display:flex; align-items:baseline; gap:16px; padding:16px 0; border-bottom:1px solid var(--rule); color:var(--ink); transition:color .2s, padding-left .2s; }
.xlink-index a:hover{ color:var(--brass-deep); padding-left:8px; }
.xlink-index a .n{ font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--brass-deep); }
.xlink-index a .t{ font-family:"Archivo",sans-serif; font-weight:600; font-size:17px; }
@media (max-width:640px){ .xlink-index{ grid-template-columns:1fr; } }
/* scope v4 — horizontal image accordion */
.hacc{ display:flex; gap:10px; height:440px; margin-top:8px; }
.hacc__panel{ position:relative; flex:1; min-width:56px; border-radius:0; overflow:hidden; cursor:pointer; background-size:cover; background-position:center; transition:flex .55s cubic-bezier(.4,0,.2,1); }
.hacc__panel::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,22,41,.12) 20%,rgba(6,22,41,.9)); }
.hacc__panel.is-active{ flex:6; }
.hacc__num{ display:none; }
.hacc__label{ position:absolute; z-index:2; bottom:20px; left:0; right:0; text-align:center; color:var(--bone); font-family:"Archivo",sans-serif; font-weight:700; font-size:16px; writing-mode:vertical-rl; transform:rotate(180deg); margin:0 auto; white-space:nowrap; transition:opacity .3s; }
.hacc__panel.is-active .hacc__label{ opacity:0; }
.hacc__content{ position:absolute; z-index:2; left:26px; right:26px; bottom:26px; color:var(--bone); opacity:0; transform:translateY(10px); transition:opacity .4s .15s, transform .4s .15s; pointer-events:none; }
.hacc__panel.is-active .hacc__content{ opacity:1; transform:none; }
.hacc__content h3{ font-family:"Archivo",sans-serif; font-size:25px; margin-bottom:8px; }
.hacc__content p{ font-size:14px; line-height:1.6; color:rgba(246,242,232,.85); max-width:440px; }
@media (max-width:760px){ .hacc{ flex-direction:column; height:auto; }
.hacc__panel{ min-height:66px; } .hacc__panel.is-active{ min-height:340px; }
.hacc__label{ writing-mode:horizontal-tb; transform:none; bottom:auto; top:22px; left:22px; right:auto; text-align:left; }
.hacc__panel.is-active .hacc__content{ position:absolute; } }
/* scope v5 — vertical accordion with image */
.vacc{ border-top:1px solid var(--rule); margin-top:8px; }
.vacc__item{ border-bottom:1px solid var(--rule); }
.vacc__item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; font-family:"Archivo",sans-serif; font-size:21px; letter-spacing:-.01em; }
.vacc__item summary::-webkit-details-marker{ display:none; }
.vacc__num{ font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--brass-deep); margin-right:14px; }
.vacc__ic{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:1px solid var(--rule-strong); position:relative; transition:transform .3s, background .2s; }
.vacc__ic::before,.vacc__ic::after{ content:""; position:absolute; background:var(--brass-deep); top:50%; left:50%; transform:translate(-50%,-50%); border-radius:2px; }
.vacc__ic::before{ width:12px; height:2px; }
.vacc__ic::after{ width:2px; height:12px; transition:opacity .3s; }
.vacc__item[open] .vacc__ic{ background:var(--brass); border-color:var(--brass); transform:rotate(180deg); }
.vacc__item[open] .vacc__ic::before,.vacc__item[open] .vacc__ic::after{ background:var(--navy-deep); }
.vacc__item[open] .vacc__ic::after{ opacity:0; }
.vacc__body{ display:grid; grid-template-columns:1fr 380px; gap:34px; align-items:center; padding:2px 0 30px; }
.vacc__body p{ color:var(--ink-mute); line-height:1.7; margin:0; font-size:15.5px; }
.vacc__body img{ width:100%; height:230px; object-fit:cover; border-radius:0; }
@media (max-width:760px){ .vacc__body{ grid-template-columns:1fr; gap:18px; } .vacc__body img{ height:190px; } }
/* item11 — internal cross-link block (3 variants) */
.xlink-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-top:8px; }
.xlink-cards a{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 22px; border:1px solid var(--rule); border-radius:0; background:var(--bone); color:var(--ink); font-family:"Archivo",sans-serif; font-weight:600; font-size:16px; transition:border-color .2s, transform .2s, background .2s; }
.xlink-cards a:hover{ border-color:var(--brass); transform:translateY(-2px); }
.xlink-cards a span{ color:var(--brass-deep); transition:transform .2s; }
.xlink-cards a:hover span{ transform:translateX(4px); }
.xlink-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:8px; }
.xlink-tiles a{ position:relative; display:block; height:180px; border-radius:0; overflow:hidden; }
.xlink-tiles img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.xlink-tiles a:hover img{ transform:scale(1.06); }
.xlink-tiles__cap{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:18px; background:linear-gradient(180deg,transparent 40%,rgba(6,22,41,.78)); color:var(--bone); font-family:"Archivo",sans-serif; font-weight:700; font-size:17px; }
/* mobile: horizontal swipe with the next tile peeking */
@media (max-width:760px){
.xlink-tiles{ display:flex; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; gap:14px; margin:8px -20px 0; padding:0 20px 12px; scrollbar-width:none; }
.xlink-tiles::-webkit-scrollbar{ display:none; }
.xlink-tiles a{ flex:0 0 82%; scroll-snap-align:start; height:200px; }
}
.xlink-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.xlink-tags a{ display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border-radius:999px; background:var(--navy-deep); color:var(--bone); font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.04em; transition:background .2s, transform .15s; }
.xlink-tags a:hover{ background:var(--brass); color:var(--navy-deep); transform:translateY(-2px); }
.xlink-tags a.is-accent{ background:var(--brass); color:var(--navy-deep); }
.xlink-tags a.is-accent:hover{ background:var(--brass-soft); }
/* dots + hint */
.vslider__foot{ display:flex; flex-direction:column; align-items:center; gap:7px;
padding:16px 0 4px; }
.vslider__dots{ display:flex; gap:9px; }
.vslider__dot{ width:9px; height:9px; border-radius:50%; border:0; padding:0;
background:var(--rule-strong); transition:transform 200ms ease, background 200ms ease; }
.vslider__dot.is-active{ background:var(--brass); transform:scale(1.35); }
.vslider__hint{ font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.14em;
text-transform:uppercase; color:var(--ink-quiet); }
@media (hover:hover){ .vslider__hint--touch{ display:none; } }
@media (hover:none){ .vslider__hint--mouse{ display:none; } }
.guide2__toc a{ position:relative; transition:color .18s ease; }
.guide2__toc a.is-current{ color:var(--brass-deep); font-weight:600; }
.guide2__toc a.is-current::before{ content:""; position:absolute; left:-20px; top:50%; transform:translateY(-50%); width:2px; height:15px; background:var(--brass-deep); }
.guide2__chips a.is-current{ border-color:var(--brass); color:var(--brass-deep); background:rgba(201,149,75,.10); }
/* 07/09: shared boring stuff block — swipe on mobile (scope-grid pattern) */
@media (max-width: 600px) {
.creds__grid { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 14px; scrollbar-width: none; }
.creds__grid::-webkit-scrollbar { display: none; }
.creds__grid > .cred { flex: 0 0 80%; scroll-snap-align: start; }
}
/* 07/09: mega menu of the last items (About) must not overflow the right edge */
.navbar__item:nth-last-of-type(-n+2) .navbar__mega { left: auto; right: 0; }
/* 07/09: work grid (gallery/home) — swipe on mobile */
@media (max-width: 600px) {
.work__grid { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 14px; scrollbar-width: none; }
.work__grid::-webkit-scrollbar { display: none; }
.work__grid > .work__card { flex: 0 0 80%; scroll-snap-align: start; }
}