/* ======================================================================== Armour Asphalt Paving & Sealcoating · Gainesville, FL Locally owned & operated Design language v2, taken straight from the logo badge: - the PLATE: rounded black panel with an inset chrome keyline - the ARC: the gold curve of "Paving & Sealcoating" (curved underlines, arched media frames, elliptical seams) - CHROME: metallic gradient lettering and hairlines - GOLD: warm #D89A3C accents, pill-shaped controls Display: Archivo Black · UI: Saira Condensed · Body: Saira · Mono: IBM Plex Mono ======================================================================== */ /* ===== 1. RESET ===== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* NOTE: no overflow-x on . A non-visible overflow on an ancestor kills position: sticky (it was silently disabling the sticky about-page video). The root-level clip still guards against horizontal scroll. */ html { scroll-behavior: smooth; scroll-padding-top: 6rem; overflow-x: clip; } img, svg, video { display: block; max-width: 100%; height: auto; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } input, textarea, select { font: inherit; color: inherit; } /* ===== 2. CUSTOM PROPERTIES ===== */ :root { --coal: #0C0D0F; --coal-2: #141618; --coal-3: #1C1F22; --coal-4: #262A2E; --gold: #D89A3C; --gold-bright: #EFB253; --gold-deep: #A9741F; --gold-glow: rgba(216, 154, 60, 0.55); --gold-soft: rgba(216, 154, 60, 0.16); --silver: #EFF1F3; --silver-2: #E2E5E9; --chrome-hi: #F7F8F9; --chrome-mid: #C9CDD2; --chrome-lo: #8E959D; --steel: #6A7178; --steel-2: #99A0A8; --steel-3: #BFC4CA; --line: rgba(255,255,255,0.08); --line-strong: rgba(255,255,255,0.18); --line-gold: rgba(216,154,60,0.35); --line-dark: rgba(12,13,15,0.12); --line-dark-2: rgba(12,13,15,0.22); --max: 1320px; --max-narrow: 1080px; --pad-x: clamp(20px, 4vw, 36px); --section-pad: clamp(72px, 9vw, 130px); --font-display: 'Archivo Black', 'Arial Black', sans-serif; --font-ui: 'Saira Condensed', 'Arial Narrow', sans-serif; --font-body: 'Saira', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', 'Consolas', monospace; --chrome-text: linear-gradient(180deg, #FFFFFF 0%, #F2F3F5 38%, #B9BEC5 52%, #DFE2E6 66%, #878E96 100%); --gold-plate: linear-gradient(180deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep)); /* Badge-plate geometry (from the logo's rounded panel + inset keyline) */ --r-plate: 18px; --r-card: 14px; --r-pill: 999px; /* Flow space the floating navbar occupies (top gap + bar height + borders). Hero and page headers pull up by this much so their backgrounds run behind the floating plate, all the way to the utility bar. */ --nav-flow: 90px; --keyline: inset 0 0 0 1.5px rgba(233, 235, 237, 0.16); --keyline-dark: inset 0 0 0 1.5px rgba(12, 13, 15, 0.14); --keyline-gold: inset 0 0 0 1.5px rgba(216, 154, 60, 0.4); --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-snappy: cubic-bezier(0.2, 0.8, 0.2, 1); --t-fast: 0.18s var(--ease-snappy); --t-med: 0.32s var(--ease); --t-slow: 0.55s var(--ease); } /* ===== 3. BODY / GLOBAL CHROME ===== The whole site lives on the badge: dark coal panels, chrome text, gold accents. No white sections anywhere. */ body { font-family: var(--font-body); font-size: 17px; line-height: 1.55; color: var(--silver); background: var(--coal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Fine asphalt-grain texture over everything, very subtle */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9997; opacity: 0.035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } * { scrollbar-width: thin; scrollbar-color: var(--gold) var(--coal); } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--coal); } ::-webkit-scrollbar-thumb { background: var(--gold); border: 2px solid var(--coal); background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--gold-bright); border-color: var(--coal); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: var(--coal); } ::selection { background: var(--gold); color: var(--coal); } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* ===== 4. TYPOGRAPHY ===== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.005em; line-height: 1.02; text-transform: uppercase; color: inherit; } .mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; } .text-gold { color: var(--gold); } .text-silver { color: var(--silver); } .text-coal { color: var(--coal); } .text-mute { color: var(--steel); } /* Chrome-plated emphasis, echoing the logo's polished lettering: gradient text with the gold ARC of the logo's tagline curving underneath. */ em { font-style: normal; position: relative; color: var(--gold); } @supports (-webkit-background-clip: text) or (background-clip: text) { .section-title em, .page-header h1 em, .hero h1 em, .contact-hero-title em { background: var(--chrome-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--chrome-mid); filter: drop-shadow(0 2px 0 rgba(0,0,0,0.35)); } } /* The arc: a wide ellipse whose top edge curves under the word, exactly like the gold "Paving & Sealcoating" sweep on the badge. */ .section-title em::after, .page-header h1 em::after, .hero h1 em::after { content: ""; position: absolute; left: -1%; right: -1%; bottom: -0.34em; height: 0.62em; border-radius: 50%; border-top: 0.075em solid var(--gold); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); pointer-events: none; } /* Everything sits on dark now, so every emphasized word gets the chrome. */ .on-light em { color: inherit; } /* Balanced wrapping keeps big headlines from orphaning single words */ .hero h1, .section-title, .page-header h1, .contact-hero-title { text-wrap: balance; } /* ===== 5. LAYOUT UTILITIES ===== */ .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad-x); } .wrap-narrow { max-width: var(--max-narrow); margin: 0 auto; padding: 0 var(--pad-x); } section { padding: var(--section-pad) 0; position: relative; } .section-pad { padding: var(--section-pad) 0; } .section-pad-sm { padding: clamp(48px, 6vw, 84px) 0; } .skip-link { position: absolute; left: -9999px; top: 0.5rem; z-index: 9999; padding: 12px 18px; background: var(--gold); color: var(--coal); font-family: var(--font-ui); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .skip-link:focus { left: 0.5rem; } /* ===== 6. BADGE-PLATE PRIMITIVES ===== */ /* Plate seam: a slim black band with a chrome hairline and a gold center bar, like the gap between the two halves of the badge. */ .stripe-thick, .stripe-thin { height: 12px; background: var(--coal); position: relative; } .stripe-thick::before, .stripe-thin::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); background: linear-gradient(90deg, transparent 4%, rgba(201,205,210,0.5) 30%, rgba(247,248,249,0.8) 50%, rgba(201,205,210,0.5) 70%, transparent 96%); } .stripe-thick::after, .stripe-thin::after { content: ""; position: absolute; left: 50%; top: 50%; width: clamp(90px, 12vw, 170px); height: 3px; transform: translate(-50%, -50%); border-radius: var(--r-pill); background: var(--gold-plate); } /* Arc divider: the logo's gold sweep, drawn wide across a dark band */ .road-divider { background: var(--coal); height: 76px; position: relative; overflow: hidden; } .road-divider::before { content: ""; position: absolute; left: 50%; top: 26px; width: min(88vw, 1080px); height: 300px; transform: translateX(-50%); border-radius: 50%; border-top: 3px solid var(--gold); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%); opacity: 0.9; } .road-divider::after { content: ""; position: absolute; left: 50%; top: 34px; width: min(70vw, 820px); height: 300px; transform: translateX(-50%); border-radius: 50%; border-top: 1px solid rgba(201,205,210,0.35); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 25%, #000 75%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 25%, #000 75%, transparent 100%); } /* Chrome hairline for card tops */ .chrome-edge { background: linear-gradient(90deg, transparent, var(--chrome-mid), transparent); height: 1px; } /* ===== 7. NAV ===== */ .nav { display: contents; color: #fff; } .nav-top { background: #060708; color: var(--silver); font-family: var(--font-ui); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; font-size: 12.5px; } .nav-top .wrap { display: flex; justify-content: space-between; align-items: center; height: 38px; gap: 18px; } .nav-top .left { display: flex; gap: 22px; align-items: center; } .nav-top .left span { display: inline-flex; align-items: center; gap: 8px; } .nav-top .dot { width: 7px; height: 7px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 0 4px rgba(216,154,60,0.18); animation: dot-pulse 2.4s ease-in-out infinite; } .nav-top .right { display: flex; gap: 22px; align-items: center; } .nav-top a:hover { color: var(--gold); } @keyframes dot-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(216,154,60,0.18); } 50% { box-shadow: 0 0 0 7px rgba(216,154,60,0.05); } } /* Floating badge-plate nav: a rounded panel inset from the page edges with a chrome keyline, mirroring the logo's plate. Sticks with a small gap. */ .nav-main { position: sticky; top: 10px; z-index: 90; margin: 10px auto 0; width: min(calc(100% - 20px), calc(var(--max) - 8px)); background: rgba(14,16,18,0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(0,0,0,0.85); border-radius: var(--r-plate); box-shadow: var(--keyline), 0 14px 40px -12px rgba(0,0,0,0.6); } .nav-main .wrap { display: flex; align-items: center; height: 78px; gap: 28px; max-width: none; padding: 0 clamp(16px, 2.5vw, 26px); } .nav-logo { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .nav-logo img, .nav-logo svg { height: 56px; width: auto; transition: transform var(--t-fast), filter var(--t-fast); transform-origin: left center; filter: drop-shadow(0 2px 8px rgba(0,0,0,0)); } .nav-logo:hover img, .nav-logo:hover svg { transform: scale(1.04); filter: drop-shadow(0 4px 14px rgba(216,154,60,0.5)); } .nav-links { display: flex; gap: 6px; margin-left: auto; font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 15px; } .nav-links a { padding: 9px 13px; border-radius: var(--r-pill); position: relative; transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); } .nav-links a:hover { color: var(--gold-bright); background: rgba(255,255,255,0.05); } .nav-links a.active { color: var(--gold-bright); background: rgba(216,154,60,0.13); box-shadow: inset 0 0 0 1px rgba(216,154,60,0.35); } .nav-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--gold-plate); color: var(--coal); font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 13px 24px; font-size: 15px; border: 1px solid var(--gold-deep); border-radius: var(--r-pill); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 4px 14px -6px rgba(216,154,60,0.6); transition: filter var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); } .nav-cta:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 8px 20px -6px rgba(216,154,60,0.7); } .nav-cta svg { width: 16px; height: 16px; } .nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; margin-left: auto; flex-direction: column; } .nav-toggle-bar { display: block; width: 26px; height: 2.5px; background: var(--silver); margin: 3px 0; transition: var(--t-fast); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); background: var(--gold); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); background: var(--gold); } /* ===== 8. BUTTONS (pill controls, from the badge's rounded geometry) ===== */ .btn { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 16px 28px; font-size: 15.5px; border: 1.5px solid transparent; border-radius: var(--r-pill); cursor: pointer; transition: var(--t-fast); white-space: nowrap; text-align: center; line-height: 1; } .btn svg { width: 16px; height: 16px; flex-shrink: 0; } .btn-primary { background: var(--gold-plate); color: var(--coal); border-color: var(--gold-deep); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 6px 18px -8px rgba(216,154,60,0.65); } .btn-primary:hover { filter: brightness(1.07); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 14px 28px -10px rgba(216,154,60,0.65); } .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); } .btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); background: rgba(216,154,60,0.08); } /* ghost-dark is only used on the gold band now; everywhere else it matches ghost */ .btn-ghost-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); } .btn-ghost-dark:hover { border-color: var(--gold); color: var(--gold-bright); background: rgba(216,154,60,0.08); } .cta-map .btn-ghost-dark { color: var(--coal); border-color: var(--coal); } .cta-map .btn-ghost-dark:hover { background: var(--coal); color: var(--gold); } .btn-dark { background: var(--coal); color: var(--gold); border-color: var(--coal); box-shadow: var(--keyline), 0 6px 18px -8px rgba(12,13,15,0.55); } .btn-dark:hover { background: var(--coal-3); transform: translateY(-2px); } .btn-sm { padding: 10px 16px; font-size: 13px; gap: 8px; } .btn-lg { padding: 20px 32px; font-size: 17px; } /* ===== 9. HERO ===== */ .hero { background: var(--coal); color: #fff; position: relative; overflow: hidden; isolation: isolate; padding: 0; /* Extend the hero's backdrop up behind the floating navbar */ margin-top: calc(var(--nav-flow) * -1); padding-top: var(--nav-flow); } .hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 3px 3px, 7px 7px; background-position: 0 0, 1px 2px; opacity: 0.55; pointer-events: none; z-index: 0; } /* A faint chrome ellipse ring floating behind the hero, straight off the badge's oval, plus a soft gold glow. */ .hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 640px 300px at 74% 30%, transparent 63.6%, rgba(201,205,210,0.14) 64.4%, rgba(201,205,210,0.14) 65.2%, transparent 66%), radial-gradient(ellipse 780px 380px at 74% 30%, transparent 63.8%, rgba(216,154,60,0.16) 64.4%, transparent 65%), radial-gradient(circle at 85% 12%, rgba(216,154,60,0.10), transparent 45%); pointer-events: none; z-index: 0; } .hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.18fr 0.82fr; gap: clamp(40px, 4.5vw, 64px); padding-top: clamp(24px, 3vw, 44px); padding-bottom: clamp(32px, 4vw, 60px); align-items: start; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 14px; color: var(--gold); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 28px; } .hero-eyebrow .bar { width: 56px; height: 2px; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); } .hero h1 { font-size: clamp(34px, 4.2vw, 64px); letter-spacing: -0.005em; color: var(--silver); line-height: 1.06; } .hero-lede { max-width: 560px; margin-top: 30px; font-size: 19px; color: #fff; line-height: 1.6; font-weight: 400; } .hero-lede + .hero-lede { margin-top: 16px; font-size: 17px; color: #D9DCE0; } .hero-actions { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; } .hero-meta { margin-top: 52px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 460px; } .hero-meta > div, .hero-meta > a { background: var(--coal-2); border: 1px solid rgba(0,0,0,0.7); border-radius: var(--r-card); box-shadow: var(--keyline); padding: 18px 16px; transition: box-shadow var(--t-fast), transform var(--t-fast); } .hero-meta > a:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px rgba(216,154,60,0.4); } .hero-meta .num { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 36px); color: var(--gold); line-height: 1; } .hero-meta .num--word { font-size: clamp(15px, 1.5vw, 21px); letter-spacing: 0.03em; } .hero-meta .lbl { font-family: var(--font-ui); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; margin-top: 8px; font-weight: 500; } .hero-visual { position: relative; } /* Arched media frame: the top curves like the badge arc, the bottom stays a plate corner. Chrome keyline inside, gold arc kissing the top edge. */ .hero-media { position: relative; aspect-ratio: 4 / 5; border: 1px solid rgba(0,0,0,0.8); border-radius: clamp(90px, 12vw, 190px) clamp(90px, 12vw, 190px) var(--r-plate) var(--r-plate); background: var(--coal-2); overflow: hidden; box-shadow: var(--keyline), 0 30px 80px -20px rgba(0,0,0,0.65); } .hero-media::before { content: ""; position: absolute; inset: 6px; z-index: 3; border-radius: inherit; border: 1.5px solid rgba(233,235,237,0.22); border-bottom-color: rgba(233,235,237,0.10); pointer-events: none; } .hero-media video, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.95) contrast(1.04); } /* Photo carousel inside the arched frame */ .hero-media .hero-slide { opacity: 0; transition: opacity 1.1s var(--ease); z-index: 0; } .hero-media .hero-slide.is-active { opacity: 1; z-index: 1; } .hero-media::after { content: ""; position: absolute; left: 10%; right: 10%; top: 12px; height: 34%; z-index: 3; border-radius: 50% 50% 0 0 / 100% 100% 0 0; border-top: 3px solid var(--gold); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%); opacity: 0.85; pointer-events: none; } .hero-media-tag { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 4; white-space: nowrap; color: var(--silver); font-family: var(--font-body); font-style: italic; font-weight: 600; font-size: 12.5px; letter-spacing: 0.04em; background: rgba(12,13,15,0.72); backdrop-filter: blur(4px); padding: 7px 16px; border-radius: var(--r-pill); box-shadow: var(--keyline); display: inline-flex; align-items: center; gap: 8px; } .hero-media-tag .rec { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: dot-pulse 2s ease-in-out infinite; } .hero-card { position: absolute; bottom: -24px; left: -20px; background: var(--gold-plate); color: var(--coal); padding: 18px 24px 16px; max-width: 260px; border: 2px solid var(--coal); border-radius: var(--r-card); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), var(--keyline-dark), 0 30px 60px -20px rgba(0,0,0,0.55); z-index: 5; } .hero-card .label { font-family: var(--font-body); font-style: italic; font-weight: 600; font-size: 11.5px; letter-spacing: 0.03em; } .hero-card .quote { font-family: var(--font-display); font-size: 23px; margin-top: 5px; line-height: 1; text-transform: uppercase; } .hero-card .by { font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; margin-top: 7px; line-height: 1.3; } /* ===== 10. SECTION HEAD ===== */ .section-head { display: grid; grid-template-columns: auto 1fr; gap: clamp(40px, 6vw, 80px); align-items: end; margin-bottom: clamp(48px, 6vw, 80px); } /* Eyebrow = a small badge chip: black pill, gold number, italic label, trailed by a fading chrome hairline (the tagline arc in miniature). */ .section-eyebrow { font-family: var(--font-body); font-style: italic; font-weight: 600; font-size: 13.5px; letter-spacing: 0.05em; text-transform: none; color: var(--steel-2); display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; } .section-eyebrow .num { font-family: var(--font-ui); font-style: normal; background: var(--coal-3); color: var(--gold); padding: 5px 13px; font-weight: 700; letter-spacing: 0.1em; border-radius: var(--r-pill); box-shadow: var(--keyline); } .section-eyebrow .bar { width: 54px; height: 1px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--gold), rgba(201,205,210,0.55), transparent); } .section-title { font-size: clamp(34px, 4.4vw, 68px); line-height: 1.04; max-width: 860px; color: var(--silver); } .section-sub { max-width: 520px; font-size: 17px; color: #DFE2E6; line-height: 1.6; font-weight: 400; } .section-head--center { display: block; text-align: center; max-width: 880px; margin-left: auto; margin-right: auto; } .section-head--center .section-eyebrow { margin-bottom: 22px; justify-content: center; } .section-head--center .section-sub { margin: 24px auto 0; } .section-head--tight { margin-bottom: clamp(28px, 3.5vw, 44px); } .section-head--stack { display: block; max-width: 760px; } .section-head--stack .section-sub { margin-top: 22px; max-width: 640px; } .section-dark { background: var(--coal-2); color: #fff; } .section-dark .section-eyebrow { color: var(--steel-2); } .section-dark .section-eyebrow .num { background: var(--coal-3); } .section-dark .section-title { color: var(--silver); } .section-dark .section-sub { color: #E4E7EA; font-weight: 400; } .gallery .section-sub, .contact-section .section-sub { color: #fff; font-weight: 400; } .gallery .section-title, .contact-section .section-title { color: var(--silver); } .gallery .section-eyebrow, .contact-section .section-eyebrow { color: var(--steel-2); } .gallery .section-eyebrow .num, .contact-section .section-eyebrow .num { background: var(--coal-3); } .about .section-sub { color: #fff; font-weight: 500; font-size: 17.5px; } .about .section-eyebrow { color: var(--steel-2); } .about .section-eyebrow .num { background: var(--coal-3); } .about-copy p { color: #fff; font-weight: 400; } .about-copy p strong { color: #fff; font-weight: 600; } /* ===== 11. SERVICES GRID ===== */ .services { background: transparent; padding-bottom: clamp(48px, 6vw, 84px); } /* Services flows straight into About (same coal ground, no divider) with a tightened seam */ .services + .about { padding-top: clamp(28px, 4vw, 56px); } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* Each card is a small badge: rounded plate, chrome keyline, and a chrome sheen that sweeps across the photo on hover (polished metal, not tape). */ .service { position: relative; transition: var(--t-med); cursor: pointer; display: flex; flex-direction: column; text-decoration: none; color: var(--coal); background: var(--coal); isolation: isolate; overflow: hidden; border-radius: var(--r-card); box-shadow: var(--keyline), 0 1px 0 rgba(12,13,15,0.08), 0 18px 36px -22px rgba(12,13,15,0.3); } .service:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1.5px rgba(216,154,60,0.45), 0 1px 0 rgba(12,13,15,0.08), 0 28px 50px -22px rgba(12,13,15,0.5); } .service-img { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--coal-2); } .service-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); filter: brightness(0.96); } .service:hover .service-img img { transform: scale(1.06); filter: brightness(0.9); } .service-img::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -80%; width: 55%; background: linear-gradient(100deg, transparent 0%, rgba(247,248,249,0.0) 30%, rgba(247,248,249,0.22) 50%, rgba(247,248,249,0.0) 70%, transparent 100%); transform: skewX(-14deg); z-index: 2; pointer-events: none; transition: left 0.65s var(--ease); } .service:hover .service-img::after { left: 130%; } .service-body { background: var(--coal); color: var(--silver); padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; position: relative; isolation: isolate; } .service-body::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 4px 4px; opacity: 0.6; pointer-events: none; z-index: -1; } .service h3 { font-size: clamp(19px, 1.75vw, 24px); letter-spacing: 0.01em; color: var(--silver); line-height: 1.12; } .service-desc { font-size: 15px; color: #E4E1DA; margin-top: 12px; flex: 1; line-height: 1.6; font-weight: 400; transition: var(--t-med); } .service-read-more { align-self: flex-start; margin-top: 22px; display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-ui); font-weight: 700; font-size: 15.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); transition: gap var(--t-fast), color var(--t-fast); } .service-arrow { width: 22px; height: 22px; color: var(--gold); transition: transform var(--t-fast), color var(--t-fast); } .service:hover .service-read-more { color: var(--gold-bright); gap: 16px; } .service:hover .service-arrow { transform: translate(4px, -4px); color: var(--gold-bright); } /* ===== 12. ABOUT ===== */ .about { background: var(--coal); color: #fff; position: relative; padding-bottom: clamp(40px, 5vw, 72px); } .about + .section-dark { padding-top: clamp(40px, 5vw, 72px); } .about::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 80% 10%, rgba(216,154,60,0.10), transparent 50%); pointer-events: none; } .about .wrap { position: relative; } .about-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(36px, 5vw, 64px); align-items: start; } .about-grid--split { grid-template-columns: 1fr 1fr; align-items: start; position: relative; } .about-grid--split .about-left, .about-grid--split .about-right { display: flex; flex-direction: column; position: relative; z-index: 1; } /* In the split layout the image is static, so its arc would anchor to the section wrapper and draw over the points list. Suppress it there and sweep a soft arc across the section bottom, behind the content, as a flourish. */ .about-grid--split .about-img::after { display: none; } .about-grid--split::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -6px; height: 260px; border-radius: 0 0 50% 50% / 0 0 100% 100%; border-bottom: 2.5px solid rgba(216, 154, 60, 0.3); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%); pointer-events: none; z-index: 0; } .about-grid--split .about-img { position: static; aspect-ratio: 5/4; align-self: stretch; margin-bottom: clamp(28px, 4vw, 44px); } .about-grid--split .about-intro { max-width: 100%; margin-bottom: clamp(20px, 3vw, 32px); } .about-grid--split .about-copy { margin-top: clamp(8px, 2vw, 16px); } @media (max-width: 900px) { .about-grid--split { grid-template-columns: 1fr; } } .about-img { aspect-ratio: 4 / 3; background: var(--coal-2); border: 1px solid rgba(0,0,0,0.8); border-radius: var(--r-plate); overflow: hidden; align-self: start; position: sticky; top: 140px; margin-top: 0; box-shadow: var(--keyline), 0 24px 60px -24px rgba(0,0,0,0.55); } .about-img::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -1px; height: 30%; border-radius: 0 0 50% 50% / 0 0 100% 100%; border-bottom: 3px solid var(--gold); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%); opacity: 0.85; z-index: 2; pointer-events: none; } .about-img img, .about-img video { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.97) contrast(1.04); } /* Video frame: the player fills the frame edge to edge, sticks near the top of the section while the story scrolls beside it, and drops the gold arc that otherwise cuts across the footage. */ /* 16:9 matches the footage (no crop) and leaves real travel for the sticky pin, so the clip stays in view while the story scrolls past it. */ .about-img--video { position: sticky; top: calc(var(--nav-flow) + 18px); aspect-ratio: 16 / 9; } .about-img--video::after { display: none; } .about-img .vid-wrap { position: absolute; inset: 0; } .about-img .vid-wrap video { width: 100%; height: 100%; object-fit: cover; } .about-img .badge { position: absolute; top: 20px; left: 20px; background: var(--gold-plate); color: var(--coal); padding: 16px 18px 14px; font-family: var(--font-display); line-height: 1; z-index: 2; border: 2px solid var(--coal); border-radius: 50%; min-width: 84px; min-height: 84px; justify-content: center; display: inline-flex; flex-direction: column; align-items: center; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), var(--keyline-dark), 0 10px 24px -8px rgba(0,0,0,0.55); } .about-img .badge .badge-est { font-family: var(--font-body); font-style: italic; font-size: 10.5px; letter-spacing: 0.04em; margin-bottom: 3px; font-weight: 600; } .about-img .badge .badge-year { font-family: var(--font-display); font-size: 26px; line-height: 0.95; letter-spacing: 0.02em; } .about-copy h3 { font-size: clamp(26px, 2.8vw, 38px); margin-bottom: 22px; color: var(--silver); } .about-copy p { color: #fff; font-weight: 400; font-size: 17px; margin: 0 0 18px 0; line-height: 1.65; } .about-copy p strong { color: var(--silver); font-weight: 600; } .about-points { margin-top: 28px; border-top: 1px solid var(--line); } .about-points li { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 50px 1fr auto; gap: 18px; align-items: center; transition: padding-left var(--t-fast), color var(--t-fast); } .about-points li:hover { padding-left: 6px; } .about-points li:hover .pt-title { color: var(--gold); } .about-points li .pt-num { font-family: var(--font-mono); font-size: 12px; color: var(--gold); letter-spacing: 0.12em; } .about-points li .pt-title { font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 17.5px; } .about-points li .pt-tag { font-family: var(--font-mono); font-size: 11px; color: var(--steel-2); letter-spacing: 0.1em; text-transform: uppercase; } /* ===== 13. CTA / MAP / INFO ===== */ .cta-map { background: var(--gold-plate); color: var(--coal); padding: 0; position: relative; } .cta-map::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(247,248,249,0.8), transparent); z-index: 2; } /* On the gold band the emphasis word must be coal. Left as gold it renders gold-on-gold and effectively disappears. */ .cta-map em { color: var(--coal); -webkit-text-fill-color: var(--coal); background: none; } .cta-map em::after { content: ""; position: absolute; left: -1%; right: -1%; bottom: -0.32em; height: 0.6em; border-radius: 50%; border-top: 0.08em solid rgba(12, 13, 15, 0.55); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); pointer-events: none; } .cta-map-grid { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 600px; } .cta-map-left { padding: clamp(56px, 8vw, 96px) clamp(28px, 5vw, 64px); display: flex; flex-direction: column; justify-content: space-between; gap: 48px; } .cta-map-left h2, .cta-map-title { font-size: clamp(28px, 3.4vw, 52px); line-height: 1.02; max-width: 560px; margin-top: 24px; } .cta-map-left .lede { font-size: 18px; margin-top: 26px; max-width: 500px; line-height: 1.55; font-weight: 500; } .cta-map-actions { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; } .info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .info-grid > div, .info-grid > a.info-tile { padding: 20px 18px; background: rgba(12,13,15,0.08); border: 1px solid rgba(12,13,15,0.22); border-radius: var(--r-card); display: block; color: var(--coal); text-decoration: none; transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast); position: relative; } .info-grid > a.info-tile:hover { background: var(--coal); color: var(--gold); transform: translateY(-2px); } .info-grid > a.info-tile:hover .lbl { opacity: 1; color: var(--gold); } .info-grid > a.info-tile::after { content: "↗"; position: absolute; top: 16px; right: 14px; font-family: var(--font-ui); font-weight: 700; color: var(--coal); opacity: 0; transition: opacity var(--t-fast), transform var(--t-fast); font-size: 16px; } .info-grid > a.info-tile:hover::after { opacity: 1; color: var(--gold); transform: translate(2px, -2px); } .info-grid .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; } .info-grid .val { font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; font-size: 17.5px; margin-top: 8px; letter-spacing: 0.02em; line-height: 1.28; } .cta-map-right { background: var(--coal); position: relative; overflow: hidden; min-height: 480px; } .cta-map-right iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.35) contrast(1.05); } /* ===== 14. REVIEWS ===== */ .reviews { background: var(--coal-2); } .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .reviews-widget { min-height: 120px; } /* Reviews pagination. .review is display:flex, so it needs an explicit rule to honour [hidden] — the UA sheet's [hidden]{display:none} loses to the class. */ .reviews-grid .review[hidden] { display: none; } .reviews-pager { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .reviews-pager[hidden] { display: none; } .reviews-pager-count { font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel-2); margin: 0; } .reviews-pager-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .reviews-pager-btn { min-width: 44px; height: 44px; padding: 0 13px; border: none; border-radius: var(--r-pill); background: var(--coal-3); box-shadow: var(--keyline); color: var(--silver); font-family: var(--font-ui); font-weight: 700; font-size: 15px; line-height: 1; cursor: pointer; transition: var(--t-fast); } .reviews-pager-btn:hover:not(:disabled) { background: var(--coal-4); color: #fff; } .reviews-pager-btn[aria-current="page"] { background: var(--gold); color: var(--coal); box-shadow: var(--keyline-dark); } .reviews-pager-btn:disabled { opacity: 0.32; cursor: default; } .reviews-pager-btn.is-arrow { font-size: 21px; padding: 0 10px; } .reviews-pager-gap { align-self: center; padding: 0 2px; color: var(--steel); letter-spacing: 0.08em; } .review { background: var(--coal-3); padding: 36px 32px; border: 1px solid rgba(0,0,0,0.7); border-radius: var(--r-card); box-shadow: var(--keyline); display: flex; flex-direction: column; position: relative; transition: var(--t-med); } .review:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1.5px rgba(216,154,60,0.45), 0 22px 40px -16px rgba(0,0,0,0.4); } .review::before { content: ""; position: absolute; top: 10px; left: 20%; right: 20%; height: 26px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; border-top: 2px solid rgba(216,154,60,0.5); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 25%, #000 75%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 25%, #000 75%, transparent 100%); pointer-events: none; } .review-stars { color: var(--gold); font-size: 18px; letter-spacing: 2px; } .review-quote { font-family: var(--font-body); font-size: 17.5px; line-height: 1.55; margin: 20px 0 26px; color: #E8EAEC; } /* Long reviews: clamp the body, then main.js measures each card and reveals the toggle only where the text is genuinely truncated (playbook §5). */ .reviews-grid .review-quote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; flex: 0 1 auto; } .reviews-grid--teaser .review-quote { -webkit-line-clamp: 5; } .reviews-grid .review-quote.is-expanded { display: block; -webkit-line-clamp: unset; overflow: visible; } .review-more { align-self: flex-start; margin: -14px 0 20px; padding: 2px 0; background: none; border: 0; border-bottom: 1px solid rgba(216, 154, 60, 0.45); border-radius: 0; font-family: var(--font-ui); font-weight: 700; font-size: 13.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold); cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast); } .review-more:hover { color: var(--gold-bright); border-bottom-color: var(--gold-bright); } /* Beat any author-level display rule so [hidden] genuinely hides */ .review-more[hidden] { display: none; } .reviews-cta { margin-top: 40px; display: flex; justify-content: center; } .review-by { display: flex; align-items: center; gap: 14px; padding-top: 22px; margin-top: auto; border-top: 1px solid var(--line); } .review-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--coal); color: var(--gold); box-shadow: var(--keyline); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 17px; flex-shrink: 0; } .review-avatar--img { object-fit: cover; background: var(--coal-2); padding: 0; } .review-by .name { font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; font-size: 16px; letter-spacing: 0.04em; color: var(--silver); } .review-by .meta { font-family: var(--font-mono); font-size: 11px; color: var(--steel-2); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px; } .review-by .meta .review-src { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .review-by .meta a.review-src:hover { color: var(--gold-bright); } .reviews-summary { margin-top: 40px; display: flex; align-items: center; gap: 40px; padding: 28px 34px; background: var(--coal); color: #fff; border-radius: var(--r-plate); box-shadow: var(--keyline), 0 20px 46px -22px rgba(0,0,0,0.4); flex-wrap: wrap; } .reviews-summary .big { font-family: var(--font-display); font-size: 56px; color: var(--gold); line-height: 1; } .reviews-summary .stars { color: var(--gold); font-size: 22px; letter-spacing: 3px; } .reviews-summary .lbl { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.06em; color: var(--steel-2); font-size: 13px; margin-top: 4px; } .reviews-summary .sep { width: 1px; height: 60px; background: var(--line); } .reviews-summary .right { margin-left: auto; display: flex; align-items: center; gap: 18px; font-family: var(--font-ui); text-transform: uppercase; font-size: 14px; letter-spacing: 0.06em; } /* Review platform link-cards (used while card harvest is pending) */ .review-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 860px; margin: 0 auto; } .review-link-card { background: var(--coal-3); border: 1px solid rgba(0,0,0,0.7); border-radius: var(--r-card); box-shadow: var(--keyline); padding: 30px 28px; display: flex; align-items: center; gap: 18px; transition: var(--t-med); position: relative; } .review-link-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px rgba(216,154,60,0.45), 0 18px 36px -16px rgba(0,0,0,0.4); } .review-link-card .ic { width: 52px; height: 52px; border-radius: 50%; background: var(--coal); color: var(--gold); box-shadow: var(--keyline); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .review-link-card .ic svg { width: 24px; height: 24px; } .review-link-card .ttl { font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 18px; color: var(--silver); } .review-link-card .sub { font-family: var(--font-mono); font-size: 11.5px; color: var(--steel-2); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; } /* ===== 15. GALLERY / BEFORE-AFTER SLIDER ===== */ .gallery { background: var(--coal); color: #fff; } .ba-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .ba-grid--3 { grid-template-columns: repeat(3, 1fr); } .ba { position: relative; overflow: hidden; background: var(--coal-2); border: 1px solid rgba(0,0,0,0.7); border-radius: var(--r-card); box-shadow: var(--keyline); aspect-ratio: 4 / 3; user-select: none; cursor: ew-resize; touch-action: pan-y; } .ba-after, .ba-before { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; } .ba-before { clip-path: inset(0 50% 0 0); -webkit-clip-path: inset(0 50% 0 0); z-index: 1; } .ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--gold); box-shadow: 0 0 0 1px var(--coal), 0 0 18px rgba(216,154,60,0.55); z-index: 3; pointer-events: none; } .ba-handle::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep)); border: 3px solid var(--coal); box-shadow: 0 0 0 1px var(--gold), 0 6px 20px rgba(0,0,0,0.45); } .ba-handle::after { content: "↔"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--coal); font-weight: 900; font-size: 18px; z-index: 4; pointer-events: none; } .ba-label { position: absolute; top: 16px; font-family: var(--font-body); font-style: italic; font-weight: 600; font-size: 12px; letter-spacing: 0.04em; color: var(--silver); background: rgba(12,13,15,0.78); padding: 6px 14px; border-radius: var(--r-pill); z-index: 2; } .ba-label--before { left: 16px; } .ba-label--after { right: 16px; color: var(--coal); background: var(--gold-plate); font-style: normal; font-weight: 700; } .ba-caption { margin-top: 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .ba-caption .ttl { font-family: var(--font-display); font-size: 20px; line-height: 1.05; color: var(--silver); } .ba-caption .sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel-2); } .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 4px; } .gallery-item { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; cursor: zoom-in; transition: var(--t-med); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); } .gallery-item:hover { border-color: var(--gold); } .gallery-item:hover img { transform: scale(1.05); } .gallery-item .tag { position: absolute; top: 14px; left: 14px; color: var(--silver); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(12,13,15,0.68); padding: 5px 10px; z-index: 2; } .gallery-item .num { position: absolute; top: 14px; right: 14px; color: var(--gold); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; background: rgba(12,13,15,0.68); padding: 5px 8px; z-index: 2; } .gallery-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 18px; background: linear-gradient(to top, rgba(12,13,15,0.92), rgba(12,13,15,0)); color: #fff; transform: translateY(8px); opacity: 0.85; transition: var(--t-med); } .gallery-item:hover .gallery-meta { transform: translateY(0); opacity: 1; } .gallery-meta .ttl { font-family: var(--font-display); font-size: 19px; line-height: 1.05; } .gallery-meta .sub { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; margin-top: 6px; color: var(--steel-2); } .g-2x2 { grid-column: span 2; grid-row: span 2; } .g-2x1 { grid-column: span 2; } .g-1x2 { grid-row: span 2; } /* Lightbox modal */ .lightbox { position: fixed; inset: 0; background: rgba(8, 9, 10, 0.94); z-index: 9999; display: none; align-items: center; justify-content: center; padding: clamp(20px, 4vw, 60px); opacity: 0; transition: opacity 0.25s ease; } .lightbox.is-open { display: flex; opacity: 1; } .lightbox-stage { position: relative; max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; } .lightbox-img { max-width: 100%; max-height: 85vh; width: auto; height: auto; display: block; border: 2px solid var(--gold); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); } .lightbox-counter { position: absolute; bottom: -38px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 13px; color: var(--gold); letter-spacing: 0.12em; } .lightbox-close, .lightbox-nav { position: absolute; background: var(--coal); color: var(--gold); border: 2px solid var(--gold); border-radius: 50%; cursor: pointer; font-family: var(--font-display); z-index: 2; transition: var(--t-fast); display: flex; align-items: center; justify-content: center; } .lightbox-close { top: clamp(20px, 4vw, 40px); right: clamp(20px, 4vw, 40px); width: 48px; height: 48px; font-size: 28px; line-height: 1; } .lightbox-nav { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; font-size: 40px; line-height: 1; } .lightbox-prev { left: clamp(20px, 3vw, 40px); } .lightbox-next { right: clamp(20px, 3vw, 40px); } .lightbox-close:hover, .lightbox-nav:hover { background: var(--gold); color: var(--coal); } .lightbox-nav:disabled { opacity: 0.35; cursor: not-allowed; } @media (max-width: 700px) { .lightbox-nav { width: 44px; height: 44px; font-size: 30px; } .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; } } body.lightbox-open { overflow: hidden; } /* ===== 15b. VIDEO COMPONENTS ===== */ .video-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; /* Each card keeps its own height: without this, a portrait clip in the row stretches its landscape neighbours into oddly tall boxes. */ align-items: start; } .video-card { position: relative; background: var(--coal-3); border: 1px solid rgba(0,0,0,0.7); border-radius: var(--r-card); box-shadow: var(--keyline); overflow: hidden; transition: var(--t-med); } .video-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px rgba(216,154,60,0.4), 0 20px 44px -20px rgba(0,0,0,0.6); } .video-card video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; } .video-card--tall video { aspect-ratio: 9 / 16; } .video-card .video-cap { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line); } .video-card .video-cap .ttl { font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 14.5px; color: var(--silver); } .video-card .video-cap .len { font-family: var(--font-mono); font-size: 11px; color: var(--steel-2); letter-spacing: 0.08em; } /* Big feature video panel (home) */ .video-feature { position: relative; border: 1px solid rgba(0,0,0,0.7); border-radius: var(--r-plate); overflow: hidden; background: var(--coal-2); box-shadow: var(--keyline), 0 30px 70px -24px rgba(0,0,0,0.6); } .video-feature video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; } /* Play badge overlay for tap-to-play videos */ .vid-wrap { position: relative; cursor: pointer; } .vid-wrap .play-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; background: rgba(12,13,15,0.25); transition: var(--t-fast); pointer-events: none; } .vid-wrap .play-badge span { width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep)); border: 3px solid var(--coal); color: var(--coal); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,0.45); transition: var(--t-fast); } .vid-wrap .play-badge svg { width: 22px; height: 22px; margin-left: 3px; } .vid-wrap:hover .play-badge span { transform: scale(1.08); } .vid-wrap.is-playing .play-badge { opacity: 0; } /* ===== 16. AREAS ===== */ .areas { background: var(--coal-2); } .areas-controls { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; } .areas-search-input { flex: 1 1 320px; min-width: 0; padding: 14px 24px; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); background: var(--coal-3); font-family: var(--font-ui); font-weight: 600; font-size: 16px; letter-spacing: 0.02em; color: var(--silver); outline: none; transition: border-color var(--t-fast); } .areas-search-input::placeholder { color: var(--steel-2); font-weight: 500; } .areas-search-input:focus { border-color: var(--gold); } .areas-nav { display: flex; gap: 8px; } .areas-arrow { width: 48px; height: 48px; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--coal-3); color: var(--gold); font-size: 28px; line-height: 1; font-family: var(--font-display); cursor: pointer; transition: var(--t-fast); display: flex; align-items: center; justify-content: center; } .areas-arrow:hover { background: var(--gold); color: var(--coal); border-color: var(--gold-deep); } .areas-arrow:disabled { opacity: 0.35; cursor: not-allowed; } .areas-carousel-wrap { position: relative; } .areas-empty { font-family: var(--font-ui); font-weight: 600; text-align: center; padding: 30px 20px; color: var(--steel-2); border: 2px dashed var(--line-strong); border-radius: var(--r-card); margin: 16px 0 0; } .areas-viewport { border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); padding: 16px 0; transition: opacity 0.18s ease; } .areas-viewport.is-fading { opacity: 0; } .areas-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; flex-wrap: wrap; } .areas-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--steel); background: transparent; padding: 0; cursor: pointer; transition: var(--t-fast); } .areas-dot:hover { background: var(--steel); } .areas-dot.is-active { background: var(--gold); border-color: var(--gold-deep); width: 28px; border-radius: 6px; } /* ===== 17. PROCESS STEPS (individual plates with a gold rivet) ===== */ .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; } .process-step { padding: 34px 28px 36px; position: relative; background: var(--coal-3); border: 1px solid rgba(0,0,0,0.7); border-radius: var(--r-card); box-shadow: var(--keyline); transition: box-shadow var(--t-med), transform var(--t-med); cursor: default; isolation: isolate; } .process-step::before { content: ""; position: absolute; top: 16px; right: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-plate); box-shadow: 0 0 0 3px rgba(216,154,60,0.18); transition: box-shadow var(--t-med); } .process-step:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1.5px rgba(216,154,60,0.4), 0 18px 40px -18px rgba(0,0,0,0.55); } .process-step:hover::before { box-shadow: 0 0 0 5px rgba(216,154,60,0.28); } .process-step:hover .big-num { color: var(--gold); transform: translateX(4px); } .process-step:hover .icon { color: var(--gold-bright); transform: scale(1.1); } .process-step .num { font-family: var(--font-mono); font-size: 12px; color: var(--gold); letter-spacing: 0.14em; text-transform: uppercase; } .process-step .big-num { font-family: var(--font-display); font-size: 64px; color: var(--silver); line-height: 1; margin: 6px 0 14px; transition: color var(--t-med), transform var(--t-med); } .process-step h4 { font-size: 20px; margin-bottom: 12px; color: var(--silver); letter-spacing: 0.02em; } .process-step p { font-size: 15px; color: #fff; line-height: 1.6; font-weight: 400; } .process-step .icon { width: 32px; height: 32px; color: var(--gold); margin-bottom: 12px; transition: color var(--t-fast), transform var(--t-fast); } /* ===== 18. CONTACT FORM ===== */ .contact-section { background: var(--coal); color: #fff; position: relative; overflow: hidden; } .contact-hero { padding-top: calc(var(--nav-flow) + clamp(32px, 4vw, 56px)); padding-bottom: clamp(48px, 6vw, 88px); margin-top: calc(var(--nav-flow) * -1); } .contact-hero .crumbs { color: var(--steel-2); margin-bottom: 26px; } .contact-hero-title { font-family: var(--font-display); font-size: clamp(38px, 5vw, 78px); color: var(--silver); text-transform: uppercase; line-height: 1.02; letter-spacing: 0.01em; } .contact-hero-lede { color: #fff; font-weight: 400; font-size: 18px; margin-top: 22px; max-width: 560px; line-height: 1.55; } .contact-section::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 4px 4px; opacity: 0.6; pointer-events: none; } .contact-section .wrap { position: relative; } .contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 80px); align-items: start; grid-template-areas: "intro form" "stack form"; } .contact-grid .contact-side { grid-area: intro; } .contact-grid .form, .contact-grid .form-success { grid-area: form; } .contact-grid .contact-stack { grid-area: stack; } /* Sized to hold several words per line in the narrow contact column rather than breaking one word at a time */ .contact-side h2 { color: var(--silver); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; } .contact-side p { color: #fff; font-weight: 400; font-size: 17px; margin-top: 24px; max-width: 440px; line-height: 1.6; } .contact-stack { display: grid; gap: 0; } .contact-stack > div { display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); } .contact-stack > div:last-child { border-bottom: 1px solid var(--line); } .contact-stack .lbl { font-family: var(--font-mono); font-size: 11px; color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; padding-top: 4px; } .contact-stack .val { font-family: var(--font-ui); font-weight: 600; font-size: 18px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.35; } .contact-stack a:hover { color: var(--gold); } .form { background: var(--coal-2); border: 1px solid rgba(0,0,0,0.7); border-radius: var(--r-plate); box-shadow: var(--keyline), 0 26px 60px -28px rgba(0,0,0,0.6); padding: clamp(28px, 4vw, 48px); position: relative; } .form::before { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(216,154,60,0.7) 30%, var(--gold-bright) 50%, rgba(216,154,60,0.7) 70%, transparent); } .form-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1px solid var(--line); } .form-head .ttl { font-family: var(--font-display); font-size: 26px; text-transform: uppercase; color: var(--silver); } .form-head .id { font-family: var(--font-mono); font-size: 11px; color: var(--steel-2); letter-spacing: 0.12em; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; } .form-field { display: flex; flex-direction: column; } .form-field.full { grid-column: 1 / -1; } .form-field label { font-family: var(--font-mono); font-size: 11.5px; color: var(--gold); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 10px; font-weight: 500; } .form-input, .form-field input, .form-field select, .form-field textarea { background: transparent; border: 0; border-bottom: 1.5px solid var(--line-strong); color: #fff; padding: 12px 0; font-family: var(--font-body); font-size: 16px; outline: none; transition: border-color var(--t-fast); width: 100%; border-radius: 0; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-bottom-color: var(--gold); } .form-field input::placeholder, .form-field textarea::placeholder { color: rgba(255,255,255,0.72); font-weight: 300; opacity: 1; } .form-field select { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0 center; background-size: 12px; padding-right: 24px; } .form-field select option { background: var(--coal); } .form-field textarea { resize: vertical; min-height: 110px; } .form-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); flex-wrap: wrap; gap: 16px; } .form-foot .note { font-family: var(--font-mono); font-size: 11px; color: var(--steel-2); letter-spacing: 0.08em; } .form-honey { position: absolute; left: -9999px; } .form-success { display: none; text-align: center; padding: 36px; } .form-success.show { display: block; } .form-success-icon { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep)); color: var(--coal); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; } .form-success-title { font-size: 28px; color: var(--silver); margin-bottom: 12px; } .form-success-text { color: #fff; font-weight: 400; margin-bottom: 22px; } .form-error { color: var(--coal); background: var(--gold); padding: 12px 16px; margin: 14px 0; border-radius: 3px; font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 14px; } .form-field input.is-invalid, .form-field select.is-invalid, .form-field textarea.is-invalid { border-bottom-color: #ff6b6b; } .field-error { color: #ff8a8a; font-family: var(--font-ui); font-weight: 600; font-size: 13px; letter-spacing: 0.02em; margin-top: 8px; } /* ===== 19. OFFER RIBBON ===== A floating gold badge-plate pulled up over the section seam, rounded and keylined like the logo panel. */ .offer-strip { background: transparent; padding: 0 var(--pad-x); position: relative; z-index: 5; margin-top: -4px; transform: translateY(-30px); margin-bottom: -16px; } .offer-strip .wrap { background: var(--gold-plate); color: var(--coal); border: 2px solid var(--coal); border-radius: var(--r-plate); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), var(--keyline-dark), 0 22px 50px -18px rgba(0,0,0,0.5); padding: 18px clamp(20px, 3vw, 36px); display: flex; align-items: center; justify-content: center; gap: 22px; font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(14px, 1.5vw, 18px); flex-wrap: wrap; } .offer-strip .big { font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); color: var(--coal); } .offer-strip a { border: 2px solid var(--coal); border-radius: var(--r-pill); padding: 9px 20px; transition: var(--t-fast); } .offer-strip a:hover { background: var(--coal); color: var(--gold-bright); } /* ===== 20. FOOTER ===== */ footer.site-footer { background: #060708; color: var(--silver); padding: 90px 0 32px; position: relative; overflow: hidden; } /* A wide gold arc rising over the footer, the badge curve closing the page */ footer.site-footer::before { content: ""; position: absolute; left: 50%; top: -4px; width: min(120vw, 1500px); height: 420px; transform: translateX(-50%); border-radius: 50%; border-top: 3px solid var(--gold); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%); opacity: 0.75; pointer-events: none; } footer.site-footer::after { content: ""; position: absolute; left: 50%; top: 4px; width: min(96vw, 1180px); height: 420px; transform: translateX(-50%); border-radius: 50%; border-top: 1px solid rgba(201,205,210,0.3); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%); pointer-events: none; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 60px; } .footer-brand img, .footer-brand svg { height: 84px; width: auto; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4)); } .footer-brand p { color: var(--steel-2); font-size: 15px; max-width: 320px; margin: 22px 0 26px; line-height: 1.6; } .footer-social { display: flex; gap: 12px; } /* Roomier circles around the same 18px icons, so the glyphs sit in the middle of the badge instead of crowding its edge. */ .footer-social a { width: 54px; height: 54px; border: 1px solid var(--line); border-radius: 50%; box-shadow: var(--keyline); display: flex; align-items: center; justify-content: center; color: var(--silver); transition: var(--t-fast); } .footer-social a svg { width: 18px; height: 18px; flex: none; } .footer-social a:hover { background: var(--gold); color: var(--coal); border-color: var(--gold); } .footer-col h4 { font-family: var(--font-ui); font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); margin-bottom: 22px; font-weight: 700; } .footer-col ul { display: grid; gap: 12px; } .footer-col a, .footer-col li { color: var(--silver); font-size: 15px; transition: color var(--t-fast); } .footer-col a:hover { color: var(--gold); } .footer-col .accent { color: var(--gold); font-weight: 600; } .footer-bottom { margin-top: 80px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; font-family: var(--font-mono); font-size: 11px; color: var(--steel); letter-spacing: 0.1em; text-transform: uppercase; } .footer-bottom a:hover { color: var(--gold); } .footer-legal-links { display: flex; gap: 18px; } /* ===== 21. FLOATING / FIXED ===== */ .floating-cta { position: fixed; bottom: 24px; right: 24px; z-index: 80; background: var(--gold-plate); color: var(--coal); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 14px 36px rgba(0,0,0,0.5); border: 2px solid var(--coal); transition: var(--t-fast); } .floating-cta:hover { transform: scale(1.08); } .floating-cta svg { width: 24px; height: 24px; } .mobile-cta-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; background: var(--coal); border-top: 3px solid var(--gold); padding: 12px 16px; gap: 10px; } .mobile-cta-bar .btn { flex: 1; justify-content: center; padding: 14px 12px; font-size: 13px; } .mobile-cta-bar--hidden { transform: translateY(110%); } /* ===== 22. CITY SEARCH / GRID ===== */ .city-search { margin-bottom: 28px; position: relative; } .city-search input { width: 100%; background: var(--coal-3); border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); color: var(--silver); padding: 16px 20px 16px 52px; font-family: var(--font-ui); font-weight: 600; font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em; outline: none; transition: var(--t-fast); } .city-search input::placeholder { color: var(--steel-2); } .city-search input:focus { border-color: var(--gold); } .city-search::before { content: ""; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; background: url("data:image/svg+xml;utf8,") no-repeat; } .city-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .city-grid a { background: var(--coal-3); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 13px 20px; font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 14px; color: var(--silver); display: flex; justify-content: space-between; align-items: center; transition: var(--t-fast); } .city-grid a:hover { border-color: rgba(216,154,60,0.55); color: var(--gold-bright); background: rgba(216,154,60,0.08); } .city-grid a .arrow { color: var(--gold); font-size: 16px; transition: var(--t-fast); } .city-grid a:hover .arrow { color: var(--gold-bright); transform: translateX(3px); } .city-grid a.hidden, .city-grid a.is-hidden { display: none; } /* ===== 23. PAGE HEADER (interior pages) ===== */ .page-header { background: var(--coal); color: #fff; padding: calc(var(--nav-flow) + clamp(32px, 4vw, 60px)) 0 clamp(36px, 5vw, 72px); margin-top: calc(var(--nav-flow) * -1); position: relative; overflow: hidden; } .page-header::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 3px 3px, 7px 7px; opacity: 0.6; pointer-events: none; } .page-header::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 560px 260px at 80% 8%, transparent 63.5%, rgba(201,205,210,0.12) 64.4%, transparent 65.4%), radial-gradient(circle at 85% 0%, rgba(216,154,60,0.09), transparent 45%); pointer-events: none; } .page-header .wrap { position: relative; z-index: 1; } .page-header h1 { font-size: clamp(34px, 4.6vw, 70px); color: var(--silver); max-width: 960px; line-height: 1.04; } .page-header .lede { margin-top: 24px; font-size: 19px; color: #fff; font-weight: 400; max-width: 660px; line-height: 1.6; } /* Secondary-page heroes are centered. Service detail pages are excluded: their hero is a two-column grid paired with a photo, so it stays left-aligned. */ .page-header:not(.svc-page-header) .wrap { text-align: center; } .page-header:not(.svc-page-header) .crumbs { justify-content: center; } .page-header:not(.svc-page-header) h1, .page-header:not(.svc-page-header) .lede { margin-left: auto; margin-right: auto; } .page-header:not(.svc-page-header) .wrap > div[style*="display:flex"] { justify-content: center; } .contact-hero .wrap { text-align: center; } .contact-hero .crumbs { justify-content: center; } .contact-hero-title, .contact-hero-lede { margin-left: auto; margin-right: auto; } .crumbs { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--steel-2); text-transform: uppercase; margin-bottom: 32px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .crumbs a:hover { color: var(--gold); } .crumbs .sep { color: var(--gold); } /* ===== 24. ICONS / UTILS ===== */ .icon-inline { width: 18px; height: 18px; flex-shrink: 0; } .icon-lg { width: 32px; height: 32px; } /* ===== 25. SERVICE PAGES ===== */ .svc-page-header { padding-bottom: clamp(48px, 6vw, 80px); } .svc-hero-grid { display: grid; grid-template-columns: 1.1fr 0.95fr; gap: clamp(32px, 5vw, 64px); align-items: center; } .svc-hero-copy h1 { margin-top: 6px; line-height: 1.02; } .svc-hero-img { aspect-ratio: 4 / 3; overflow: hidden; position: relative; border: 1px solid rgba(0,0,0,0.8); border-radius: clamp(60px, 7vw, 110px) clamp(60px, 7vw, 110px) var(--r-plate) var(--r-plate); background: var(--coal-2); box-shadow: var(--keyline), 0 24px 60px -24px rgba(0,0,0,0.55); } .svc-hero-img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.96) contrast(1.04); } .svc-hero-img::after { content: ""; position: absolute; inset: 6px; pointer-events: none; z-index: 2; border-radius: inherit; border: 1.5px solid rgba(233,235,237,0.22); border-bottom-color: rgba(233,235,237,0.10); } @media (max-width: 1100px) { .svc-hero-grid { grid-template-columns: 1fr; } .svc-hero-img { aspect-ratio: 16 / 9; } } .svc-detail .wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: start; } .svc-detail h2 { font-size: clamp(34px, 3.8vw, 56px); margin-bottom: 20px; color: var(--silver); } .svc-detail h3 { font-size: clamp(21px, 1.9vw, 28px); margin: 36px 0 14px; color: var(--silver); } .svc-detail p { font-size: 17px; line-height: 1.7; margin-bottom: 16px; color: #D5D9DD; } .svc-detail ul { margin: 16px 0 24px; padding-left: 0; } .svc-detail ul li { padding: 10px 0 10px 30px; position: relative; font-size: 16px; color: #E4E7EA; border-bottom: 1px solid var(--line); } .svc-detail ul li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold-plate); box-shadow: 0 0 0 2.5px rgba(216,154,60,0.22); } .svc-sidebar { position: sticky; top: 130px; background: var(--coal-2); color: #fff; padding: 36px 32px; border-radius: var(--r-plate); border: 1px solid rgba(0,0,0,0.8); box-shadow: var(--keyline), 0 24px 56px -26px rgba(0,0,0,0.5); overflow: hidden; } .svc-sidebar::before { content: ""; position: absolute; left: 12%; right: 12%; top: 8px; height: 30px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; border-top: 2.5px solid var(--gold); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%); opacity: 0.85; pointer-events: none; } .svc-sidebar h4 { font-size: 22px; color: var(--silver); margin-bottom: 20px; } .svc-sidebar p { color: #fff; font-weight: 400; font-size: 15px; margin-bottom: 22px; line-height: 1.55; } .svc-sidebar .info { display: grid; gap: 14px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 22px; } .svc-sidebar .info div { display: flex; gap: 14px; align-items: flex-start; } .svc-sidebar .info .lbl { font-family: var(--font-mono); font-size: 11px; color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; min-width: 70px; } .svc-sidebar .info .val { font-family: var(--font-ui); font-weight: 600; font-size: 16px; } .svc-sidebar .btn { width: 100%; justify-content: center; margin-bottom: 10px; } /* The two sidebar CTAs sit side by side. Same specificity as the rule above, so it has to come after it. They share the row evenly and only stack again if the row itself drops under ~242px, which is the width the two labels genuinely need. At 375px the sidebar still gives 269px, so they stay paired. */ .svc-sidebar-cta { display: flex; flex-wrap: wrap; gap: 10px; } .svc-sidebar-cta .btn { flex: 1 1 116px; width: auto; margin-bottom: 0; padding-left: 18px; padding-right: 18px; white-space: nowrap; } .svc-services-also { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 60px; } .svc-services-also a { background: var(--coal-3); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 18px 24px; font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 15px; color: var(--silver); transition: var(--t-fast); display: flex; justify-content: space-between; align-items: center; gap: 10px; } .svc-services-also a:hover { border-color: rgba(216,154,60,0.55); color: var(--gold-bright); background: rgba(216,154,60,0.08); } /* ===== 26. FAQ ===== */ .faq-list { display: grid; gap: 10px; max-width: 920px; margin: 0 auto; } .faq-item { background: var(--coal-2); border: 1px solid rgba(0,0,0,0.7); border-radius: var(--r-card); box-shadow: var(--keyline); overflow: hidden; transition: box-shadow var(--t-fast); } .faq-item.open { box-shadow: inset 0 0 0 1.5px rgba(216,154,60,0.45); } .faq-q { width: 100%; text-align: left; padding: 22px 24px; font-family: var(--font-ui); font-weight: 600; font-size: 17px; text-transform: uppercase; letter-spacing: 0.03em; display: flex; justify-content: space-between; align-items: center; gap: 18px; background: none; border: none; cursor: pointer; color: var(--silver); } .faq-q .plus { position: relative; flex-shrink: 0; width: 30px; height: 30px; background: var(--coal-3); color: var(--gold); border-radius: 50%; box-shadow: var(--keyline); transition: var(--t-fast); /* The bars are drawn, not typed. A "+" glyph centres on its line box rather than on its own ink, so flex centring sat it visibly high, and rotating the circle 45deg swung that offset onto the diagonal where it read as crooked. Two absolutely centred bars rotate exactly about the circle's centre. */ font-size: 0; } .faq-q .plus::before, .faq-q .plus::after { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 1.6px; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%); } .faq-q .plus::after { transform: translate(-50%, -50%) rotate(90deg); } .faq-item.open .faq-q .plus { background: var(--gold); color: var(--coal); transform: rotate(45deg); } .faq-a { padding: 0 24px; max-height: 0; overflow: hidden; transition: max-height var(--t-med), padding var(--t-med); } .faq-item.open .faq-a { padding: 0 24px 24px; max-height: 600px; } .faq-a p { color: #D5D9DD; line-height: 1.7; font-size: 16px; margin-bottom: 10px; } /* ===== 27. ANIMATIONS ===== */ @keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.in { opacity: 1; transform: translateY(0); } /* ===== 28. RESPONSIVE ===== */ @media (max-width: 1100px) { .hero .wrap, .about-grid, .cta-map-grid, .contact-grid, .section-head, .svc-detail .wrap { grid-template-columns: 1fr; gap: 48px; } .contact-grid { grid-template-areas: "intro" "form" "stack"; } .contact-stack { margin-top: 8px; } .about-img { position: static; top: auto; } .services-grid, .reviews-grid { grid-template-columns: repeat(2, 1fr); } .gallery-grid { grid-template-columns: repeat(3, 1fr); } .process-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } .city-grid { grid-template-columns: repeat(3, 1fr); } .ba-grid--3 { grid-template-columns: repeat(2, 1fr); } .svc-services-also { grid-template-columns: repeat(2, 1fr); } .svc-sidebar { position: static; } .video-strip { grid-template-columns: repeat(2, 1fr); } .hero-media { aspect-ratio: 16 / 10; } } @media (max-width: 860px) { .nav-top .left span:nth-child(2) { display: none; } .nav-top .wrap { gap: 10px; flex-wrap: nowrap; } .nav-top .left, .nav-top .right { gap: 14px; flex-wrap: nowrap; } .nav-top .left span, .nav-top .right a { white-space: nowrap; } .nav-top .left span:first-child { font-size: 11px; } .nav-links { display: none; } .nav-toggle { display: flex; } /* The panel is position:fixed, so the navbar must not be its containing block. Any non-none backdrop-filter makes an element exactly that, which pinned the panel to the navbar's 66px box instead of the viewport. */ body.nav-open .nav-main { backdrop-filter: none; -webkit-backdrop-filter: none; } /* The panel is positioned with z-index 75, so it paints over its own static siblings no matter the DOM order. Without these the open panel covered the logo and the toggle itself, which is what made the menu impossible to close: the X was still there, just buried under the overlay. The panel's 100px top padding assumes exactly this, that the bar stays on top. */ .nav-toggle, .nav-logo { position: relative; z-index: 80; } .nav-links.open { position: fixed; top: 0; left: 0; right: 0; background: var(--coal); border-top: 3px solid var(--gold); padding: 100px 24px 32px; flex-direction: column; align-items: stretch; gap: 8px; height: 100vh; /* fallback for browsers without dvh */ height: 100dvh; /* so mobile browser chrome cannot clip the last link */ overflow-y: auto; display: flex; z-index: 75; font-size: 18px; margin-left: 0; } .nav-links.open a { padding: 14px 12px; border-bottom: 1px solid var(--line); } .nav-cta { display: none; } :root { --nav-flow: 74px; } .nav-main { top: 8px; margin: 8px auto 0; width: calc(100% - 16px); border-radius: 14px; } .nav-main .wrap { gap: 16px; height: 64px; padding: 0 14px; } .nav-logo img, .nav-logo svg { height: 42px; } .hero { padding-top: var(--nav-flow); } .hero .wrap { padding-top: 24px; padding-bottom: 42px; } .hero-media { border-radius: clamp(60px, 16vw, 110px) clamp(60px, 16vw, 110px) var(--r-card) var(--r-card); } /* The free-estimate card is desktop only. On a phone it sat on top of the hero carousel, covering the photos it was meant to sit beside. The same offer is already stated in the hero copy and on the CTA below it. */ .hero-card { display: none; } .hero-meta { gap: 8px; } .offer-strip { transform: translateY(-24px); margin-bottom: -8px; } .offer-strip .wrap { text-align: center; gap: 8px 14px; } .services-grid, .reviews-grid, .ba-grid, .ba-grid--3, .video-strip, .review-links { grid-template-columns: 1fr; } .gallery-grid { grid-template-columns: repeat(2, 1fr); } .gallery-grid .g-2x2, .gallery-grid .g-2x1, .gallery-grid .g-1x2 { grid-column: auto; grid-row: auto; } .process-grid { grid-template-columns: 1fr; } /* 64px is a desktop-column size. On a phone card it dominated the copy it is supposed to label, so it scales down with the layout. */ .process-step .big-num { font-size: 46px; } .process-step h4 { font-size: 18px; } .info-grid { grid-template-columns: 1fr; } .city-grid { grid-template-columns: repeat(2, 1fr); } .areas-controls { flex-direction: column; align-items: stretch; } .areas-nav { justify-content: flex-end; } .areas-search-input { flex: 0 0 auto; width: 100%; } .footer-grid { grid-template-columns: 1fr; gap: 40px; } .form-row { grid-template-columns: 1fr; } .mobile-cta-bar { display: none; } .floating-cta { display: none; } .section-head { display: block; } .section-head > div + p { margin-top: 18px; } .reviews-summary { gap: 20px; padding: 22px 20px; } .reviews-summary .sep { display: none; } .cta-map-grid { grid-template-columns: 1fr; } .cta-map-right { min-height: 360px; } .svc-services-also { grid-template-columns: 1fr; } .offer-strip { padding: 0 14px; } .offer-strip .wrap { gap: 6px 14px; padding: 16px 18px; text-align: center; } .offer-strip .big { font-size: 25px; } } @media (max-width: 480px) { body { font-size: 16px; } .hero h1 { font-size: clamp(31px, 8.4vw, 48px); } .hero-meta { grid-template-columns: 1fr; } .hero-meta > div, .hero-meta > a { padding: 14px 16px; } .btn { padding: 14px 20px; font-size: 14px; } .nav-top .wrap { gap: 8px; } .nav-top .left, .nav-top .right { gap: 10px; } .nav-top .left span:first-child, .nav-top .right a { font-size: 10px; letter-spacing: 0.04em; } .reviews-summary .right { width: 100%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } }