/* ============================================================ PRIMAL PAINTING - palette overridden to the brand: red · white · light grey · black (light theme, no dark sections) Type / spacing / shadow / radius system kept from the source brief. ============================================================ */ :root { /* Brand palette */ --red: #cd1d23; /* action: banner, CTAs, links, accents */ --red-dark: #b01717; /* hover */ --grad-red: linear-gradient( to right, #d41c21 0%, #9c1518 100% ); /* red sweep: banner + card headers */ --ink: #191919; /* near-black headings */ --body: #3e3e3e; /* body grey */ --muted: #6b7280; /* muted labels */ --grey: #f4f4f2; /* light grey section fill */ --grey-2: #ebebe8; /* slightly deeper grey */ --line: #e3e3df; /* hairline borders */ --surface: #ffffff; --font: "Montserrat", sans-serif; --r-sm: 4px; --r-md: 6px; --r-lg: 12px; --r-pill: 30px; --r-circle: 100px; --sh-soft: rgba(0, 0, 0, 0.1) 1px 4px 10px 0px, rgba(0, 0, 0, 0.05) 0 0 2px 0px; --sh-strong: rgba(0, 0, 0, 0.18) 0 4px 18px 0px; --sh-btn: rgba(150, 20, 20, 0.22) 0 8px 16px 0px; --container: 1320px; --gutter: 20px; --section-pad: 96px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* Clip horizontal overflow at the ROOT (the layout viewport / ICB), not just on . overflow-x:hidden on body alone is bypassed by mobile-viewport emulation (an over-wide child expands the layout viewport and triggers shrink-to-fit). overflow-x:clip trims the over-wide box without creating a scroll container or scroll-anchor side effects, and applies to the viewport itself. */ overflow-x: clip; /* Reserve the scrollbar gutter so any vw-based math is scrollbar-aware and 100vw == content width (no scrollbar-width overshoot). */ scrollbar-gutter: stable; } body { font-family: var(--font); font-size: 16px; line-height: 1.5; font-weight: 400; color: var(--body); background: var(--surface); -webkit-font-smoothing: antialiased; /* clip, NOT hidden: hidden forces overflow-y to compute to `auto`, making a scroll container, which breaks the sticky header. html{overflow-x:clip} above already clips horizontally at the viewport; clip here keeps overflow-y visible so sticky still pins. */ overflow-x: clip; } img { max-width: 100%; display: block; } /* Replaced media (iframe/svg/video) do NOT inherit img{max-width:100%}; cap them so the Google Maps embed and any SVG can never exceed the viewport even if an explicit width is ever removed. */ iframe, svg, video { max-width: 100%; } /* Let long unbreakable tokens (e.g. the footer email address) wrap instead of holding a column/track wider than device-width. */ body { overflow-wrap: anywhere; } a { color: inherit; text-decoration: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); } section { padding-block: var(--section-pad); } /* ---- Typographic signature: tight uppercase display, airy body ---- */ h1, h2, h3 { font-family: var(--font); color: var(--ink); font-weight: 700; text-transform: uppercase; line-height: 1.04; letter-spacing: -0.01em; } h1 { font-size: clamp(2.2rem, 1.1rem + 4.6vw, 4rem); } h2 { font-size: clamp(1.7rem, 1.05rem + 2.6vw, 2.75rem); } h3 { font-size: 1.2rem; line-height: 1.18; letter-spacing: 0; } .eyebrow { font-size: 15px; line-height: 1; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--red); margin-bottom: 18px; display: inline-flex; gap: 9px; align-items: center; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--red); display: inline-block; } .lede { font-size: 1.05rem; line-height: 1.65; max-width: 60ch; color: var(--body); } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: var(--red); color: #fff; font-family: var(--font); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.03em; padding: 13px 30px; border: 0; border-radius: var(--r-sm); box-shadow: var(--sh-btn); cursor: pointer; transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } .btn:hover { background: var(--red-dark); transform: translateY(-2px); } .btn--ghost { background: transparent; color: #fff; box-shadow: none; border: 2px solid rgba(255, 255, 255, 0.8); } .btn--ghost:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-2px); } .btn--dark { background: var(--ink); box-shadow: rgba(0, 0, 0, 0.18) 0 8px 16px 0; } .btn--dark:hover { background: #000; } .arr { display: inline-block; flex: none; width: 1.25em; height: 1.25em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M20.364%2011.293C20.5514%2011.4805%2020.6567%2011.7348%2020.6567%2012C20.6567%2012.2652%2020.5514%2012.5195%2020.364%2012.707L14.707%2018.364C14.5183%2018.5462%2014.2657%2018.6469%2014.0036%2018.6447C13.7414%2018.6424%2013.4905%2018.5372%2013.3051%2018.3518C13.1197%2018.1664%2013.0146%2017.9156%2013.0123%2017.6534C13.01%2017.3912%2013.1108%2017.1386%2013.293%2016.95L17.243%2013H3.99995C3.73474%2013%203.48038%2012.8946%203.29284%2012.7071C3.10531%2012.5196%202.99995%2012.2652%202.99995%2012C2.99995%2011.7348%203.10531%2011.4804%203.29284%2011.2929C3.48038%2011.1054%203.73474%2011%203.99995%2011H17.243L13.293%207.05C13.1108%206.8614%2013.01%206.60879%2013.0123%206.3466C13.0146%206.0844%2013.1197%205.83359%2013.3051%205.64818C13.4905%205.46277%2013.7414%205.3576%2014.0036%205.35532C14.2657%205.35305%2014.5183%205.45384%2014.707%205.636L20.364%2011.293Z'%20fill='black'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M20.364%2011.293C20.5514%2011.4805%2020.6567%2011.7348%2020.6567%2012C20.6567%2012.2652%2020.5514%2012.5195%2020.364%2012.707L14.707%2018.364C14.5183%2018.5462%2014.2657%2018.6469%2014.0036%2018.6447C13.7414%2018.6424%2013.4905%2018.5372%2013.3051%2018.3518C13.1197%2018.1664%2013.0146%2017.9156%2013.0123%2017.6534C13.01%2017.3912%2013.1108%2017.1386%2013.293%2016.95L17.243%2013H3.99995C3.73474%2013%203.48038%2012.8946%203.29284%2012.7071C3.10531%2012.5196%202.99995%2012.2652%202.99995%2012C2.99995%2011.7348%203.10531%2011.4804%203.29284%2011.2929C3.48038%2011.1054%203.73474%2011%203.99995%2011H17.243L13.293%207.05C13.1108%206.8614%2013.01%206.60879%2013.0123%206.3466C13.0146%206.0844%2013.1197%205.83359%2013.3051%205.64818C13.4905%205.46277%2013.7414%205.3576%2014.0036%205.35532C14.2657%205.35305%2014.5183%205.45384%2014.707%205.636L20.364%2011.293Z'%20fill='black'/%3E%3C/svg%3E") no-repeat center / contain; } /* ---- Project photos (img.ph cover their slot); .ph = legacy placeholder styles ---- */ img.ph { display: block; object-fit: cover; padding: 0; } .ph { background: var(--grey-2); color: var(--muted); display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; padding: 16px; border-radius: var(--r-md); overflow: hidden; } .ph svg { width: 40px; height: 40px; opacity: 0.5; } .ph span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; } /* ============================================================ 01 · HEADER — angled red utility strip (top-right, 45° cut) ============================================================ */ .util-strip { grid-column: 2; grid-row: 1; height: 40px; /* Base values use NO vw unit: a flat -gutter margin + gutter padding reproduces the same red bar right edge (container-right) as the old 50vw math did at every width <=1320px, but without the scrollbar- counting 50vw that overshoots device-width in Chrome device-mode emulation. The true full-bleed past the container only matters above 1320px, where it is re-introduced in an @media(min-width:1321px) block below — so vw is never evaluated at mobile/tablet widths. */ margin-right: calc(-1 * var(--gutter)); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--grad-red); color: #fff; padding-left: 62px; padding-right: var(--gutter); align-self: start; clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 100%); font-size: 14px; } /* Only on screens wider than the container does the strip need to bleed past container-right to the window edge. Gating the 50vw math here guarantees it is never computed at mobile/tablet widths (where it would count the scrollbar gutter and push past device-width). */ @media (min-width: 1321px) { .util-strip { margin-right: calc(var(--container) / 2 - var(--gutter) - 50vw); padding-right: calc(50vw - var(--container) / 2 + var(--gutter)); } } .util-strip .util-left { font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; } .util-strip .util-right { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; } .util-strip .util-right a { font-weight: 800; color: #fff; } .util-strip .dot { opacity: 0.6; } /* ============================================================ 02 · NAV (sticky, light) ============================================================ */ .nav { position: sticky; top: 0; z-index: 60; background: #fff; box-shadow: var(--sh-soft); } .nav-grid { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 30px; row-gap: 15px; padding-block: 0 11px; } .nav-row { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; } /* center the link group in the space between logo and CTA */ .nav-row > nav { justify-self: center; } .nav-row .btn { padding-block: 11px; } .brand { grid-column: 1; grid-row: 1 / 3; display: inline-flex; align-items: center; /* center logo in full header — offsets the bottom-only padding (strip needs top:0 to stay flush, so balance it here) */ transform: translateY(6px); } .brand img { height: 54px; width: auto; } .brand .brand-logo { display: block; height: 54px; width: auto; } .nav-menu { display: flex; gap: 30px; list-style: none; } .nav-menu a { font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); } .nav-menu a:hover { color: var(--red); } .nav-cta { display: flex; align-items: center; gap: 22px; } .nav-phone { display: inline-flex; align-items: center; gap: 9px; transition: transform 0.18s ease; } .nav-phone:hover { transform: translateY(-1px); } .nav-phone:hover b { color: var(--red); } .nav-phone:hover .np-icon { animation: phone-ring 0.7s ease; } @keyframes phone-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-14deg); } 30% { transform: rotate(11deg); } 45% { transform: rotate(-8deg); } 60% { transform: rotate(5deg); } 75% { transform: rotate(-3deg); } } .nav-phone .np-icon { width: 20px; height: 20px; color: var(--red); flex: none; } .nav-phone .np-text { display: inline-flex; flex-direction: column; line-height: 1.1; } .nav-phone small { font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--muted); text-transform: none; } .nav-phone b { font-size: 16px; color: var(--ink); font-weight: 800; } .nav-toggle { display: none; place-items: center; width: 44px; height: 44px; background: none; border: 0; font-size: 26px; color: var(--ink); cursor: pointer; } .nav-toggle svg { width: 28px; height: 28px; display: block; } /* Round call button: hidden on desktop, shown far-left on mobile */ .nav-call { display: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--red); color: #fff; box-shadow: var(--sh-btn); transition: background 0.18s ease, transform 0.18s ease; } .nav-call svg { width: 19px; height: 19px; } .nav-call:hover { background: var(--red-dark); } .nav-call:active { transform: scale(0.94); } /* ============================================================ 03 · HERO ============================================================ */ .hero { position: relative; color: #fff; overflow: hidden; } .hero .bg-slot { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; background-image: url("assets/photos/hero.webp"); background-size: cover; background-position: center; background-color: #1c1c1e; } .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( to right, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.5) ); } .hero .container { position: relative; z-index: 2; display: grid; grid-template-columns: 1.25fr 0.85fr; gap: 48px; align-items: center; padding-block: 104px; } .hero .eyebrow { color: #fff; } .hero .eyebrow::before { background: var(--red); } .hero h1 { color: #fff; max-width: 15ch; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); } .hero .lede { color: rgba(255, 255, 255, 0.92); margin-block: 22px 30px; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); font-size: 1.18rem; font-weight: 500; } .trust-badges { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 36px; } .trust-badge { display: flex; align-items: center; gap: 13px; } .trust-badge .ico { flex: none; display: grid; place-items: center; } .trust-badge .ico img { height: 30px; width: auto; } .trust-badge b { display: block; font-size: 14px; text-transform: uppercase; letter-spacing: 0.03em; color: #fff; } .trust-badge span small { color: rgba(255, 255, 255, 0.78); font-size: 13px; } /* Badge subtext: short copy on desktop, longer copy on mobile/tablet (swapped at the <=980px hero-collapse breakpoint below). */ .trust-badge small .tb-m { display: none; } .rating-row { display: flex; flex-wrap: wrap; /* wrap at ALL widths: the two non-shrinkable rating chips were holding the hero column past device-width in the 981-1024px tablet band (above the 980px override). Wrapping lets them reflow instead. */ gap: 16px; margin-top: 26px; padding-top: 8px; } .rating-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(2px); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--r-md); padding: 12px 20px; display: flex; align-items: center; gap: 12px; } .rating-card .rc-logo { flex: none; display: grid; place-items: center; } .rating-card .rc-logo svg { width: 26px; height: 26px; } .rating-card .rc-body { display: flex; flex-direction: column; gap: 2px; } .rating-card .score { font-size: 21px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 8px; line-height: 1; } .rating-card .stars { color: #ffc83d; letter-spacing: 1px; font-size: 15px; } .rating-card small { color: rgba(255, 255, 255, 0.8); font-size: 13px; line-height: 1; padding-top: 2px; } /* Quote form */ .quote-card { background: #fff; border-radius: var(--r-md); box-shadow: var(--sh-strong); overflow: hidden; } .quote-card .head { background: var(--grad-red); color: #fff; text-align: center; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 18px; font-size: 1.05rem; } .quote-card .head small { display: block; font-weight: 600; font-size: 0.7rem; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.7); margin-top: 4px; text-transform: none; } .quote-card form { display: grid; gap: 11px; padding: 22px; } .quote-card label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: -5px; } .quote-card input, .quote-card select, .quote-card textarea { width: 100%; font-family: var(--font); font-size: 16px; /* >=16px so iOS Safari does not zoom on focus */ padding: 14px; /* ~44px tap height */ border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--body); background: #fff; } .quote-card textarea { min-height: 96px; resize: vertical; line-height: 1.45; } .quote-card input:focus, .quote-card select:focus, .quote-card textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(216, 30, 30, 0.12); } /* in-field icons on a WRAPPER (.qfield) ::before layer so browser autofill (which repaints the input) cannot erase them; the input is forced white via box-shadow. */ #qn, #qp, #qe, #qs { padding-left: 42px; } .qfield { position: relative; display: block; } .qfield::before { content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; background-repeat: no-repeat; background-size: 18px 18px; pointer-events: none; z-index: 2; } .qfield--user::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%239ca3af'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='8'%20r='4'/%3E%3Cpath%20d='M4%2021c0-4%203.6-6%208-6s8%202%208%206'/%3E%3C/svg%3E"); } .qfield--phone::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%239ca3af'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3%2019.5%2019.5%200%200%201-6-6%2019.8%2019.8%200%200%201-3-8.6A2%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1%201%20.4%201.9.7%202.8a2%202%200%200%201-.5%202.1L8.1%209.9a16%2016%200%200%200%206%206l1.3-1.3a2%202%200%200%201%202.1-.4c.9.3%201.8.6%202.8.7a2%202%200%200%201%201.7%202z'/%3E%3C/svg%3E"); } .qfield--mail::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%239ca3af'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='14'%20rx='2'/%3E%3Cpath%20d='m3%207%209%206%209-6'/%3E%3C/svg%3E"); } .qfield--service::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%239ca3af'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20width='16'%20height='6'%20x='2'%20y='2'%20rx='2'/%3E%3Cpath%20d='M10%2016v-2a2%202%200%200%201%202-2h8a2%202%200%200%200%202-2V7a2%202%200%200%200-2-2h-2'/%3E%3Crect%20width='4'%20height='6'%20x='8'%20y='16'%20rx='1'/%3E%3C/svg%3E"); } .quote-card input:-webkit-autofill, .quote-card input:-webkit-autofill:hover, .quote-card input:-webkit-autofill:active, .quote-card select:-webkit-autofill, .quote-card textarea:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fff inset !important; box-shadow: 0 0 0 1000px #fff inset !important; -webkit-text-fill-color: var(--body) !important; transition: background-color 9999s ease-in-out 0s; caret-color: var(--body); } .quote-card input:-webkit-autofill:focus, .quote-card select:-webkit-autofill:focus, .quote-card textarea:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #fff inset, 0 0 0 3px rgba(216, 30, 30, 0.12) !important; box-shadow: 0 0 0 1000px #fff inset, 0 0 0 3px rgba(216, 30, 30, 0.12) !important; } /* A2P SMS consent (optional, unchecked by default) */ .quote-card .consent { display: flex; gap: 9px; align-items: flex-start; margin: 2px 0; font-size: 11px; line-height: 1.45; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); } .quote-card .consent input { width: 18px; height: 18px; flex: none; margin-top: 1px; } .quote-card .btn { width: 100%; margin-top: 4px; } .quote-card .fineprint { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.5; } .quote-card .fineprint a { color: var(--red); font-weight: 700; } .quote-thanks { display: none; padding: 40px 26px; text-align: center; } .quote-thanks .check { width: 54px; height: 54px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; margin: 0 auto 16px; } .quote-thanks .qt-title { color: var(--ink); margin-bottom: 8px; font-size: 1.2rem; font-weight: 700; text-transform: uppercase; line-height: 1.18; } .quote-card.sent form { display: none; } .quote-card.sent .quote-thanks { display: block; } /* ============================================================ 04 · REVIEWS STRIP (light grey) ============================================================ */ .reviews { background: var(--grey); } .reviews .head { margin: 0 0 40px; } .reviews .head-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px 40px; flex-wrap: wrap; } .reviews .head-titles { flex: 1 1 340px; min-width: 0; max-width: 640px; } .reviews .lede { margin-top: 16px; max-width: 640px; } .reviews .review-actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .review-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .review-stat .rs-top { display: flex; align-items: center; gap: 8px; } .review-stat b { font-size: 1.7rem; font-weight: 800; color: var(--ink); line-height: 1; } .review-stat .stars { color: #ffb400; font-size: 15px; letter-spacing: 1px; } .review-stat small { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .review-cards { display: grid; grid-auto-flow: column; grid-auto-columns: calc(25% - 15px); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; /* Unconditional shrink + cap so the carousel never drives its grid track (and the page) past the viewport in the 981-1024px tablet band where the 980px min-width:0 helper has not yet fired. The overflow-x:auto then scrolls INTERNALLY instead of widening the layout viewport. */ min-width: 0; max-width: 100%; } .review-cards::-webkit-scrollbar { display: none; } .review-card { scroll-snap-align: start; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-soft); padding: 22px 24px; display: flex; flex-direction: column; } .review-card p { display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .review-card.rc-expanded p { -webkit-line-clamp: unset; line-clamp: unset; } .rc-more { align-self: flex-start; margin-top: 11px; background: none; border: 0; padding: 0; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--red); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; display: none; } .rc-more:hover { color: var(--red-dark); } .review-card .rc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; } .review-card .rc-who { display: flex; align-items: center; gap: 11px; } .review-card .rc-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; flex: none; } .review-card .rc-avatar svg { width: 20px; height: 20px; } .review-card .rc-name { font-weight: 700; color: var(--ink); font-size: 0.88rem; } .review-card .rc-date { font-size: 0.74rem; color: var(--muted); margin-top: 2px; } .review-card .rc-source { width: 22px; height: 22px; flex: none; } .review-card .rc-stars-row { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; } .review-card .rc-stars-row .stars { color: #ffb400; font-size: 14px; letter-spacing: 1px; } .review-card .rc-verified { width: 16px; height: 16px; flex: none; } .review-card p { font-size: 0.94rem; line-height: 1.55; color: var(--body); margin: 0; } .review-nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; } .review-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--body); display: grid; place-items: center; cursor: pointer; transition: all 0.18s ease; } .review-nav button:hover { background: var(--red); border-color: var(--red); color: #fff; } .review-nav svg { width: 20px; height: 20px; } /* ============================================================ 05 · ABOUT ============================================================ */ .about .container { display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: center; } .about .media-wrap { position: relative; border-radius: var(--r-sm); overflow: hidden; } .about .media-wrap .ph { width: 100%; height: 480px; border-radius: var(--r-sm); object-position: center 28%; } /* "Meet the owner" banner pinned to the bottom of the about photo */ .fb-banner { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; aspect-ratio: 640 / 136; } .fb-banner__shape { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25)); } .fb-banner__logo { position: absolute; left: 0; top: 0; bottom: 0; width: 33%; display: flex; align-items: center; justify-content: center; padding: 0 3%; box-sizing: border-box; } .fb-banner__logo img { max-height: 85%; max-width: 100%; object-fit: contain; display: block; } .fb-banner__meta { position: absolute; left: 40%; right: 4%; bottom: 0; height: 69%; display: flex; flex-direction: column; justify-content: center; color: #fff; } .fb-banner__name { font: 800 clamp(15px, 4vw, 24px) / 1.05 var(--font), sans-serif; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fb-banner__subtitle { font: 400 clamp(11px, 2.4vw, 14px) / 1.3 var(--font), sans-serif; opacity: 0.92; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .about h2 { margin-block: 6px 18px; } .about .lede + .lede { margin-top: 14px; } .about .signoff { margin-top: 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .about .owners { font-size: 0.9rem; color: var(--muted); display: flex; align-items: center; gap: 12px; } .about .owners .owner-badge { width: 46px; height: 46px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 0.8rem; flex: none; } .about .owners .owner-badge svg { width: 22px; height: 22px; } .about .owners b { color: var(--ink); display: block; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.85rem; } /* ============================================================ 06 · GALLERY (recent work) ============================================================ */ .gallery { background: var(--grey); text-align: center; } .gallery .head { max-width: 640px; margin: 0 auto 44px; } .ba-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } /* subtle framed tile — matches the original service-card look */ .ba-pair { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-soft); overflow: hidden; } .ba-pair__shots { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .ba-shot { position: relative; } .ba-shot img { width: 100%; height: 220px; object-fit: cover; display: block; } .ba-tag { position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #fff; padding: 4px 10px; border-radius: 4px; } .ba-tag--before { background: rgba(25, 25, 25, 0.82); } .ba-tag--after { background: var(--red); } .ba-pair__cap { padding: 12px 14px 14px; text-align: center; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); font-size: 13.5px; } /* ============================================================ 07 · SERVICES GRID ============================================================ */ .services { background: #fff; text-align: center; } .services .head { max-width: 660px; margin: 0 auto 48px; } .services .head .lede { margin: 14px auto 0; } .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .service-card { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-soft); overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease; display: flex; flex-direction: column; /* floor so a long token in h3/p can never out-size the 1fr track */ min-width: 0; } .service-card:hover { transform: translateY(-5px); box-shadow: var(--sh-strong); } .service-card .ph { width: 100%; height: 224px; border-radius: 0; } .service-card .svc-card__divider { display: block; width: 100%; height: 56px; margin-top: -34px; position: relative; z-index: 2; pointer-events: none; } .service-card .body { padding: 2px 24px 26px; margin-top: -1px; position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; } .service-card h3 { color: var(--ink); margin-bottom: 9px; } .service-card p { font-size: 0.95rem; color: var(--body); } .service-card .arrow { color: var(--red); font-weight: 800; text-transform: uppercase; font-size: 13px; letter-spacing: 0.05em; display: inline-flex; gap: 7px; align-items: center; margin-top: 16px; } .service-card .arrow .arr { transition: transform 0.18s ease; } .service-card:hover .arrow .arr { transform: translateX(4px); } /* ============================================================ 08 · PROCESS ============================================================ */ .process { background: var(--grey); text-align: center; } .process .head { max-width: 640px; margin: 0 auto; } .step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 52px; position: relative; } .step-grid::before { content: ""; position: absolute; top: 31px; left: 12.5%; right: 12.5%; border-top: 2px dashed #d2d1cb; z-index: 0; } .step { text-align: center; position: relative; } .step .num { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: var(--r-circle); background: var(--red); color: #fff; font-size: 24px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 8px var(--grey), var(--sh-btn); position: relative; z-index: 2; } .step h3 { color: var(--ink); margin-bottom: 9px; } .step p { font-size: 0.94rem; } /* ============================================================ 09 · WHY CHOOSE ============================================================ */ .why { background: #fff; } .why .container { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: center; } .why .story h2 { margin-block: 6px 18px; } .why .story .lede + .lede { margin-top: 14px; } .why-creds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; margin: 26px 0 30px; } .why-cred { display: flex; align-items: center; gap: 11px; font-weight: 600; color: var(--ink); font-size: 0.92rem; } .why-cred .ico { flex: none; color: var(--red); display: grid; place-items: center; } .why-cred .ico svg { width: 22px; height: 22px; } .why .media-wrap { position: relative; } .why .media-wrap img { width: 100%; height: 480px; object-fit: cover; border-radius: var(--r-sm); box-shadow: var(--sh-strong); } .why .stat-float { position: absolute; left: -14px; bottom: -22px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 22px; box-shadow: var(--sh-strong); } .why .stat-float b { font-size: 2rem; font-weight: 800; line-height: 1; display: block; color: var(--red); } .why .stat-float small { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--muted); } /* ============================================================ 10 · AREAS WE SERVE ============================================================ */ .areas { background: var(--grey); } .areas .container { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; } .area-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; margin-top: 8px; } .area-list li { list-style: none; display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); padding: 9px 0; border-bottom: 1px solid var(--line); } .area-list li svg { width: 16px; height: 16px; color: var(--red); flex: none; } .areas .note { margin-top: 18px; font-size: 0.9rem; color: var(--muted); } /* ============================================================ 11 · FAQ ============================================================ */ .faq { background: #fff; } .faq .head { text-align: center; margin-bottom: 44px; } .faq-list { max-width: 840px; margin: 0 auto; } .faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-soft); margin-bottom: 14px; padding: 2px 26px; } .faq summary { list-style: none; cursor: pointer; font-weight: 700; color: var(--ink); padding: 20px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; text-transform: uppercase; letter-spacing: 0.01em; font-size: 1rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--red); font-size: 26px; font-weight: 400; line-height: 1; flex: none; } .faq details[open] summary::after { content: "–"; } .faq details p { padding-bottom: 22px; max-width: 70ch; } /* ============================================================ 12 · CTA BAND (image bg + dark overlay) ============================================================ */ .cta-band { position: relative; color: #fff; text-align: center; overflow: hidden; } .cta-band .bg-slot { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; background-image: url("assets/photos/cta.webp"); background-size: cover; background-position: center; background-color: #1c1c1e; } .cta-band .ov { position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.65); } .cta-band .container { position: relative; z-index: 2; } .cta-band .eyebrow { color: #fff; justify-content: center; } .cta-band h2 { color: #fff; max-width: 18ch; margin: 0 auto 16px; } .cta-band .lede { color: rgba(255, 255, 255, 0.96); margin: 0 auto 30px; } .cta-band .actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .cta-band .phone-big { font-size: 1.05rem; font-weight: 800; margin-top: 22px; letter-spacing: 0.02em; } .cta-band .phone-big a { color: #fff; } /* ============================================================ 13 · FOOTER (light) ============================================================ */ .footer { background: #fff; color: var(--body); } .footer .grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 44px; padding-block: 64px 40px; } /* Let the footer columns shrink to their tracks; combined with the global overflow-wrap:anywhere this lets the long email token (primalpainting18@gmail.com) wrap instead of forcing the grid wider than .container at tablet 2-column widths. */ .footer .grid > * { min-width: 0; } .footer .brand img { height: 44px; width: auto; } .footer .blurb { margin-top: 16px; max-width: 34ch; font-size: 0.92rem; } .footer .socials { display: flex; gap: 10px; margin-top: 18px; } .footer .socials a { width: 44px; height: 44px; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); transition: all 0.18s ease; } .footer .socials a:hover { background: var(--red); color: #fff; border-color: var(--red); } .footer .socials svg { width: 18px; height: 18px; } .footer h4 { color: var(--ink); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 18px; font-weight: 800; } .footer ul { list-style: none; display: grid; gap: 11px; } .footer ul a, .footer .contact li { font-size: 0.92rem; } .footer ul a:hover { color: var(--red); } .footer .contact { display: grid; gap: 13px; } .footer .contact li { list-style: none; display: flex; gap: 11px; align-items: flex-start; } .footer .contact svg { width: 17px; height: 17px; min-width: 17px; /* explicit flex-basis (not 'none'/auto) so iOS Safari sizes the icon from this, not from the SVG's 24px viewBox — keeps it aligned on real iPhones */ flex: 0 0 17px; color: var(--red); margin-top: 2px; } .footer .contact b { color: var(--ink); } .footer .legal { border-top: 1px solid var(--line); padding-block: 22px; font-size: 12.5px; color: var(--muted); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .footer .legal a:hover { color: var(--red); } /* ============================================================ RESPONSIVE ============================================================ */ /* Tablet-band overflow safety (981-1024px). The structural grids still run their DESKTOP 2/3-column layouts here (the 980px collapse has not fired), and CSS grid/flex tracks default to min-width:auto, so a non-shrinkable child (rating chips, the service , whose min-content is set by its longest