/* ==========================================================================
   S3CONCEPTS - STUDIO LAYOUT
   A ground-up layout in the design language of s3concepts.com, executed to a
   higher standard. Everything here is `s3-` prefixed and the homepage body is
   <body class="s3"> (not .onyx), so none of main.css's template components
   apply - this is a real layout, not a re-skin.

   The source's DNA, kept:
     - full-bleed photograph with NO type on it
     - centred gold serif statements carrying the page
     - very large vertical whitespace between movements
     - images as plain rectangles with captions BELOW: no cards, no overlays,
       no rounded corners, no drop shadows
     - hairline gold rules as the only ornament
     - one solid gold panel (Get in Touch)
     - light footer closed by a gold bar

   What is fixed, because the source gets it wrong:
     - a real modular scale and a single 8px spacing rhythm instead of
       arbitrary gaps
     - balanced grids (the source strands two thumbnails in a full-width row)
     - gold that passes contrast: #D8C051 is 1.48:1 on white, so display gold
       is #9E8C3B and small accent text is #847531. Brand gold stays for
       SURFACES, where near-black on it is 12.14:1
     - buttons with a real target size and a visible edge on white
   ========================================================================== */

.s3 {
    --gold:         #D8C051;   /* brand gold - surfaces only */
    --gold-display: #9E8C3B;   /* large serif headings   3.57:1 on white */
    --gold-ink:     #847531;   /* small accent text      4.50:1 on white */
    --gold-deep:    #6E6229;   /* hover                  6.21:1 */
    --ink:          #171717;
    --copy:         #4E5359;
    --muted:        #7A8088;
    --paper:        #FFFFFF;
    --warm:         #F7F4EC;
    --line:         rgba(23,23,23,0.12);
    --hair:         rgba(23,23,23,0.08);

    --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --sans:  'Open Sans', -apple-system, Arial, sans-serif;

    /* one rhythm, used everywhere */
    --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px;
    --s6: 64px; --s7: 96px; --s8: 128px; --s9: 160px;

    /* one radius scale, used by every rounded thing on the site */
    --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;

    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16.5px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

.s3 *, .s3 *::before, .s3 *::after { box-sizing: border-box; }
.s3 img { max-width: 100%; display: block; }
.s3 a { color: inherit; text-decoration: none; }

.s3-wrap { width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 32px; }
.s3-wrap--narrow { max-width: 880px; }

/* ---------- type scale ---------------------------------------------------- */
.s3 h1, .s3 h2, .s3 h3 { font-family: var(--serif); font-weight: 700; margin: 0; }
.s3-display {
    font-family: var(--serif);
    font-weight: 700;
    color: var(--gold-display);
    font-size: clamp(34px, 5.0vw, 62px);
    line-height: 1.12;
    letter-spacing: 0.004em;
    text-wrap: balance;
}
.s3-display .ink { color: var(--ink); }
.s3-h2 {
    font-family: var(--serif);
    font-weight: 700;
    color: var(--gold-display);
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.18;
    text-wrap: balance;
}
.s3-h2 .ink { color: var(--ink); }
.s3-eyebrow {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-ink);
}
.s3-lede { font-size: 18px; line-height: 1.75; color: var(--copy); text-wrap: pretty; }
.s3-body { color: var(--copy); }

/* the one ornament */
.s3-rule { width: 88px; height: 2px; background: var(--gold); border: 0; margin: var(--s4) 0 0; }
.s3-rule--center { margin-left: auto; margin-right: auto; }

/* ---------- buttons ------------------------------------------------------- */
.s3-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--sans); font-size: 14.5px; font-weight: 700;
    letter-spacing: 0.02em;
    padding: 15px 30px; min-height: 50px;
    border-radius: 2px;                 /* near-square, like the source */
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.s3-btn--gold {
    background: var(--gold); color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--gold) 58%, var(--gold-deep));
}
.s3-btn--gold:hover { background: color-mix(in srgb, var(--gold) 82%, var(--gold-deep)); }
.s3-btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.s3-btn--ghost:hover { border-color: var(--ink); }
.s3-btn--onGold { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.s3-btn--onGold:hover { background: #000; }
.s3-link {
    font-family: var(--sans); font-size: 13.5px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink);
    display: inline-flex; align-items: center; gap: 9px;
    border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.s3-link:hover { color: var(--gold-deep); border-bottom-color: currentColor; }

/* ---------- top bar + nav ------------------------------------------------- */
.s3-topbar { background: var(--gold); color: var(--ink); font-size: 13px; }
.s3-topbar__in {
    max-width: 1220px; margin: 0 auto; padding: 9px 32px;
    display: flex; align-items: center; gap: 22px;
}
.s3-topbar__note { font-weight: 600; }
.s3-topbar__sp { flex: 1; }
.s3-topbar a { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.s3-topbar a:hover { text-decoration: underline; }

.s3-nav { position: sticky; top: 0; z-index: 60; background: var(--paper); border-bottom: 1px solid var(--hair); }
.s3-nav__in {
    max-width: 1220px; margin: 0 auto; padding: 0 32px;
    height: 104px; display: flex; align-items: center; gap: 28px;
}
.s3-nav__logo { flex-shrink: 0; }
.s3-nav__logo img { height: 76px; width: auto; }
.s3-nav__links { display: flex; align-items: center; gap: 30px; margin-left: auto; list-style: none; padding: 0; }
.s3-nav__links > li { position: relative; }
.s3-nav__links a, .s3-nav__links button {
    font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--ink);
    background: none; border: 0; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.s3-nav__links a:hover, .s3-nav__links button:hover { color: var(--gold-ink); }
.s3-nav__cta { margin-left: 6px; }
.s3-nav__tel { font-weight: 700; font-size: 15px; white-space: nowrap; }

.s3-drop {
    position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px);
    background: #fff; border: 1px solid var(--hair); box-shadow: 0 18px 50px rgba(23,23,23,.10);
    min-width: 290px; padding: 10px; opacity: 0; visibility: hidden; transition: all .18s ease; list-style: none;
}
.s3-nav__links > li:hover .s3-drop,
.s3-nav__links > li:focus-within .s3-drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.s3-drop a { display: block; padding: 10px 14px; font-size: 14px; font-weight: 600; }
.s3-drop a:hover { background: var(--warm); color: var(--gold-ink); }

.s3-burger { display: none; margin-left: auto; background: none; border: 0; padding: 10px; cursor: pointer; }
.s3-burger span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; }

/* ---------- hero: photograph only, no type ------------------------------- */
.s3-hero { position: relative; width: 100%; height: clamp(360px, 56vh, 620px); overflow: hidden; background: var(--warm); }
.s3-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%;   /* keeps the crew's heads in frame at this crop */ }

/* ---------- the statement that follows the photograph -------------------- */
.s3-statement { padding: var(--s8) 0 var(--s7); text-align: center; }
.s3-statement .s3-lede { max-width: 60ch; margin: var(--s3) auto 0; }
.s3-statement__cta { margin-top: var(--s5); display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Service / Satisfaction / Solutions --------------------------- */
.s3-triad { padding: var(--s6) 0 var(--s8); }
.s3-triad__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--hair); }
.s3-triad__cell { padding: var(--s5) var(--s4); text-align: center; border-right: 1px solid var(--hair); }
.s3-triad__cell:last-child { border-right: 0; }
.s3-triad__word {
    font-family: var(--serif); font-size: clamp(24px, 2.6vw, 32px); font-weight: 700;
    color: var(--ink); line-height: 1.1;
}
.s3-triad__word em { font-style: normal; color: var(--gold-display); }
.s3-triad__cell p { margin: var(--s2) 0 0; font-size: 15px; color: var(--copy); }

/* ---------- services: plain image, caption below ------------------------- */
.s3-services { padding: 0 0 var(--s8); }
.s3-sec-head { text-align: center; margin-bottom: var(--s6); }
.s3-sec-head .s3-lede { max-width: 58ch; margin: var(--s3) auto 0; }
.s3-grid { display: grid; gap: var(--s5) var(--s4); }
.s3-grid--4 { grid-template-columns: repeat(4, 1fr); }
.s3-grid--3 { grid-template-columns: repeat(3, 1fr); }
.s3-grid--2 { grid-template-columns: repeat(2, 1fr); }

.s3-tile { display: flex; flex-direction: column; }
.s3-tile__desc { flex: 1; }
/* display:block matters - this is a <span>, and aspect-ratio/overflow are
   ignored on inline boxes, which collapsed the grid rows into each other. */
.s3-tile__img { display: block; position: relative; overflow: hidden;
    background: var(--warm); aspect-ratio: 4 / 3; }
.s3-tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.s3-tile:hover .s3-tile__img img { transform: scale(1.04); }
.s3-tile__name {
    font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--ink);
    margin: var(--s3) 0 0; line-height: 1.25;
}
.s3-tile:hover .s3-tile__name { color: var(--gold-display); }
.s3-tile__desc { font-size: 14.5px; color: var(--copy); margin: var(--s1) 0 0; line-height: 1.65; }
.s3-tile__more {
    margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--gold-ink); display: inline-flex; gap: 8px; align-items: center;
}

/* ---------- feature split ------------------------------------------------ */
.s3-feature { padding: var(--s8) 0; }
.s3-feature + .s3-feature { padding-top: 0; }
.s3-feature__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: center; }
.s3-feature--flip .s3-feature__media { order: 2; }
.s3-feature__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.s3-feature__body .s3-lede { margin-top: var(--s3); }
.s3-feature__list { list-style: none; padding: 0; margin: var(--s4) 0 0; }
.s3-feature__list li {
    position: relative; padding-left: 26px; margin-bottom: 10px; font-size: 15.5px; color: var(--copy);
}
.s3-feature__list li::before {
    content: ""; position: absolute; left: 0; top: 11px; width: 12px; height: 1px; background: var(--gold-display);
}
.s3-feature__cta { margin-top: var(--s5); display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- capability columns (no cards) -------------------------------- */
.s3-cols { padding: var(--s8) 0; background: var(--warm); }
.s3-cols__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5) var(--s4); }
.s3-cols__item h3 { font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.s3-cols__item p { font-size: 14.5px; color: var(--copy); margin: 10px 0 0; }
.s3-cols__num {
    font-family: var(--serif); font-size: 30px; color: var(--gold-display); line-height: 1; display: block; margin-bottom: 14px;
}

/* ---------- areas -------------------------------------------------------- */
.s3-areas { padding: var(--s8) 0; text-align: center; }
.s3-areas__list {
    margin: var(--s5) auto 0; max-width: 940px;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0;
}
.s3-areas__list a { font-size: 15.5px; color: var(--copy); padding: 0 18px; border-right: 1px solid var(--line); line-height: 1.2; }
.s3-areas__list a:last-child { border-right: 0; }
.s3-areas__list a:hover { color: var(--gold-ink); }

/* ---------- testimonials ------------------------------------------------- */
.s3-quotes { padding: var(--s8) 0; background: var(--warm); }
.s3-quotes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6) var(--s5); }
.s3-quote__mark { font-family: var(--serif); font-size: 62px; line-height: .8; color: var(--gold); display: block; }
.s3-quote p { font-size: 15.5px; color: var(--copy); margin: var(--s2) 0 var(--s3); }
.s3-quote__who { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.s3-quote__role { font-size: 13px; color: var(--muted); }

/* ---------- get in touch: gold panel + form ------------------------------ */
.s3-contact { display: grid; grid-template-columns: 5fr 7fr; }
.s3-contact__panel { background: var(--gold); color: var(--ink); padding: var(--s8) var(--s6); }
.s3-contact__panel .s3-h2 { color: var(--ink); }
.s3-contact__panel p { color: rgba(23,23,23,.8); margin-top: var(--s3); max-width: 42ch; }
.s3-contact__facts { margin-top: var(--s5); display: grid; gap: 10px; }
.s3-contact__facts a { font-weight: 700; }
.s3-contact__facts a:hover { text-decoration: underline; }
.s3-contact__form { background: var(--paper); padding: var(--s8) var(--s6); }
.s3-form { display: grid; gap: var(--s3); grid-template-columns: 1fr 1fr; }
.s3-form label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.s3-form .full { grid-column: 1 / -1; }
.s3-form input, .s3-form select, .s3-form textarea {
    width: 100%; margin-top: 8px; padding: 12px 2px; font-family: var(--sans); font-size: 15.5px; color: var(--ink);
    background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
}
.s3-form input:focus, .s3-form select:focus, .s3-form textarea:focus { outline: 0; border-bottom-color: var(--gold-display); }
.s3-form textarea { resize: vertical; min-height: 90px; }
.s3-form button { grid-column: 1 / -1; width: 100%; }

/* ---------- footer ------------------------------------------------------- */
.s3-footer { background: var(--warm); padding: var(--s7) 0 0; }
.s3-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--s5); }
.s3-footer__logo img { height: 66px; width: auto; }
.s3-footer p { font-size: 14.5px; color: var(--copy); margin-top: var(--s3); max-width: 34ch; }
.s3-footer h4 { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin: 0 0 var(--s3); }
.s3-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.s3-footer li a, .s3-footer__facts a { font-size: 14.5px; color: var(--copy); }
.s3-footer li a:hover, .s3-footer__facts a:hover { color: var(--gold-ink); }
.s3-footer__facts { display: grid; gap: 9px; font-size: 14.5px; color: var(--copy); }
.s3-footer__bar { margin-top: var(--s7); background: var(--gold); color: var(--ink); }
.s3-footer__bar .s3-wrap { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; padding-top: 14px; padding-bottom: 14px; font-size: 13px; }
.s3-footer__bar a { font-weight: 600; }
.s3-footer__bar a:hover { text-decoration: underline; }

/* ---------- reveal ------------------------------------------------------- */
.s3-rise { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.s3-rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .s3-rise { opacity: 1; transform: none; transition: none; }
    .s3-tile__img img { transition: none; }
}

/* ---------- responsive --------------------------------------------------- */
@media (max-width: 1080px) {
    .s3-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .s3-cols__grid { grid-template-columns: repeat(2, 1fr); }
    .s3-feature__grid { gap: var(--s5); }
}
@media (max-width: 900px) {
    .s3-nav__links, .s3-nav__tel { display: none; }
    .s3-burger { display: block; }
    .s3-nav__in { height: 84px; }
    .s3-nav__logo img { height: 58px; }
    .s3-feature__grid { grid-template-columns: 1fr; }
    .s3-feature--flip .s3-feature__media { order: 0; }
    .s3-contact { grid-template-columns: 1fr; }
    .s3-quotes__grid { grid-template-columns: 1fr; gap: var(--s5); }
    .s3-triad__grid { grid-template-columns: 1fr; }
    .s3-triad__cell { border-right: 0; border-bottom: 1px solid var(--hair); }
    .s3-triad__cell:last-child { border-bottom: 0; }
    .s3-footer__grid { grid-template-columns: 1fr 1fr; }
    .s3-statement { padding: var(--s7) 0 var(--s6); }
    .s3-services, .s3-feature, .s3-cols, .s3-areas, .s3-quotes { padding-top: var(--s7); padding-bottom: var(--s7); }
}
@media (max-width: 620px) {
    .s3-wrap { padding: 0 20px; }
    .s3-grid--4, .s3-grid--3, .s3-grid--2 { grid-template-columns: 1fr; }
    .s3-cols__grid { grid-template-columns: 1fr; }
    .s3-footer__grid { grid-template-columns: 1fr; }
    .s3-form { grid-template-columns: 1fr; }
    .s3-contact__panel, .s3-contact__form { padding: var(--s6) 24px; }
    .s3-topbar__note { display: none; }
}

/* ---------- mobile drawer ------------------------------------------------ */
.s3-drawer {
    position: fixed; inset: 0 0 0 auto; width: min(88vw, 360px); background: #fff; z-index: 90;
    transform: translateX(100%); transition: transform .3s ease; padding: 28px 24px; overflow-y: auto;
    border-left: 1px solid var(--hair);
}
.s3-drawer.is-open { transform: none; }
.s3-drawer ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 4px; }
.s3-drawer a { display: block; padding: 11px 0; font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--hair); }
.s3-drawer__sub a { padding-left: 14px; font-size: 14.5px; font-weight: 500; color: var(--copy); }
.s3-scrim { position: fixed; inset: 0; background: rgba(23,23,23,.45); opacity: 0; visibility: hidden; transition: .3s; z-index: 80; }
.s3-scrim.is-open { opacity: 1; visibility: visible; }
.s3-drawer__x { position: absolute; top: 16px; right: 16px; background: none; border: 0; font-size: 26px; cursor: pointer; line-height: 1; }

/* ==========================================================================
   INTERIOR PAGES
   Interior pages still render their original .onyx sections, but they now sit
   between the new nav and footer, so they carry <body class="onyx s3">. This
   block reconciles the two: it strips the template's card chrome (radii,
   shadows, heavy fills) so the interior reads in the same flat, editorial
   language as the homepage, without rewriting every page's markup.
   ========================================================================== */
.onyx.s3 { background: var(--paper); }

/* the old nav is gone, so its top offset must go too */
.onyx.s3 .page-hero { margin-top: 0; }

/* flatten every card surface the template rounds or shadows */
.onyx.s3 .svc-card, .onyx.s3 .service-card, .onyx.s3 .area-hub-card,
.onyx.s3 .why-card, .onyx.s3 .review-card, .onyx.s3 .project-card,
.onyx.s3 .faq-item, .onyx.s3 .credential-badge, .onyx.s3 .process-step,
.onyx.s3 .contact-form, .onyx.s3 .lead-form, .onyx.s3 .svc-gallery__item,
.onyx.s3 .why-local__media, .onyx.s3 .about__media {
    border-radius: 2px !important;
    box-shadow: none !important;
}
.onyx.s3 .svc-card, .onyx.s3 .area-hub-card, .onyx.s3 .why-card,
.onyx.s3 .review-card, .onyx.s3 .faq-item, .onyx.s3 .credential-badge {
    border: 1px solid var(--hair) !important;
    background: #fff;
}
.onyx.s3 .svc-card:hover, .onyx.s3 .area-hub-card:hover { border-color: var(--gold) !important; }
.onyx.s3 img { border-radius: 0 !important; }

/* interior headings inherit the homepage voice */
.onyx.s3 h1, .onyx.s3 h2, .onyx.s3 h3 { font-family: var(--serif); text-transform: none; }
.onyx.s3 .page-hero h1 { color: #fff; }
.onyx.s3 .eyebrow { font-family: var(--sans); letter-spacing: .2em; }

/* buttons match the homepage exactly */
.onyx.s3 .btn { border-radius: 2px; text-transform: none; letter-spacing: .02em; font-weight: 700; }
.onyx.s3 .btn--primary {
    background: var(--gold); color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--gold) 58%, var(--gold-deep));
    box-shadow: none;
}
.onyx.s3 .btn--primary:hover { background: color-mix(in srgb, var(--gold) 82%, var(--gold-deep)); }

/* the template's dark closing block is replaced by the light footer, so the
   contact band above it becomes the gold panel instead of a second dark slab */
.onyx.s3 .ng-contact { background: var(--gold); }
.onyx.s3 .ng-contact h2, .onyx.s3 .ng-contact h3, .onyx.s3 .ng-contact .ng-h2 { color: var(--ink); }
.onyx.s3 .ng-contact .ng-h2 .hl, .onyx.s3 .ng-contact__sub .hl { color: #fff; }
.onyx.s3 .ng-contact__lede, .onyx.s3 .ng-contact p { color: rgba(23,23,23,.78); }
.onyx.s3 .ng-contact a, .onyx.s3 .ng-fact__label { color: var(--ink); }
.onyx.s3 .ng-contact .area-pill {
    background: rgba(23,23,23,.06); border-color: rgba(23,23,23,.16); color: var(--ink);
}
.onyx.s3 .ng-contact__arealink { color: var(--ink); }

/* the services band keeps the warm ground from the homepage */
.onyx.s3 .services.ng-dark { background: var(--warm); }
.onyx.s3 .cta-band { background: var(--warm); }
.onyx.s3 .cta-band h2 { color: var(--gold-display); }
.onyx.s3 .cta-band p { color: var(--copy); }

/* ==========================================================================
   HOMEPAGE v2 - sections added for Shannon's brief
   The page now runs: photo > positioning > S/S/S > who we serve > what we do
   > the Gold Standard > areas > testimonials > credentials > contact. The two
   "what" sections deliberately use different textures - facility types are
   photographic tiles, the ten programs are a ruled list - so consecutive
   movements never read as the same grid twice.
   ========================================================================== */

/* five facility types across the top row */
.s3-grid--5 { grid-template-columns: repeat(5, 1fr); gap: var(--s4) var(--s3); }
.s3-grid--5 .s3-tile__name { font-size: 17px; }
.s3-grid--5 .s3-tile__desc { font-size: 13.5px; }

/* the ten programs, as a ruled list rather than a second image grid */
.s3-list-sec { padding: var(--s8) 0; background: var(--warm); }
.s3-list { list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s7); border-top: 1px solid var(--line); }
.s3-list__row { border-bottom: 1px solid var(--line); }
.s3-list__row a {
    display: grid; grid-template-columns: 1fr auto; align-items: baseline;
    gap: 4px var(--s3); padding: var(--s3) 0; transition: padding .25s var(--ease, ease);
}
.s3-list__name { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--ink); }
.s3-list__desc { grid-column: 1 / -1; font-size: 14px; color: var(--copy); line-height: 1.6; }
.s3-list__go { color: var(--gold-ink); opacity: 0; transform: translateX(-6px); transition: .25s ease; }
.s3-list__row a:hover { padding-left: 10px; }
.s3-list__row a:hover .s3-list__name { color: var(--gold-display); }
.s3-list__row a:hover .s3-list__go { opacity: 1; transform: none; }

/* the Gold Standard, numbered */
.s3-goldstd { padding-top: var(--s8); }
.s3-gold { list-style: none; padding: 0; margin: var(--s5) 0 0; display: grid; gap: var(--s4); }
.s3-gold__item { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; }
.s3-gold__n { font-family: var(--serif); font-size: 22px; color: var(--gold-display); line-height: 1.2; }
.s3-gold__item h3 { font-family: var(--sans); font-size: 15.5px; font-weight: 700; color: var(--ink); }
.s3-gold__item p { font-size: 14.5px; color: var(--copy); margin: 6px 0 0; }

/* areas grouped by region instead of one long undifferentiated run */
.s3-areas__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5) var(--s4);
    margin-top: var(--s6); text-align: left; }
.s3-areas__region { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--gold-ink); padding-bottom: 12px; border-bottom: 1px solid var(--gold);
    margin-bottom: var(--s3); }
.s3-areas__cities { display: grid; gap: 9px; }
.s3-areas__cities a { font-size: 15.5px; color: var(--copy); }
.s3-areas__cities a:hover { color: var(--gold-ink); }

/* credentials - Shannon asked for ownership to sit here, as a credential */
.s3-creds { padding: var(--s8) 0; }
.s3-creds__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5) var(--s4); }
.s3-cred { border-top: 2px solid var(--gold); padding-top: var(--s3); }
.s3-cred h3 { font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--ink); }
.s3-cred p { font-size: 14px; color: var(--copy); margin: 8px 0 0; }

@media (max-width: 1080px) {
    .s3-grid--5 { grid-template-columns: repeat(3, 1fr); }
    .s3-areas__grid { grid-template-columns: repeat(2, 1fr); }
    .s3-creds__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .s3-list { grid-template-columns: 1fr; column-gap: 0; }
    .s3-list-sec, .s3-creds { padding: var(--s7) 0; }
}
@media (max-width: 620px) {
    .s3-grid--5, .s3-areas__grid, .s3-creds__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   GOOGLE REVIEWS - two rows sliding in opposite directions
   Ported from the React GoogleReviews/ReviewCard pair to vanilla. Each row
   renders its set twice so a -50% translate loops seamlessly; hovering a row
   pauses only that row. Edge fades mask the cut on both sides.
   ========================================================================== */
.gr { padding: var(--s8) 0; background: var(--warm); overflow: hidden; }
.gr__head { max-width: 560px; margin: 0 auto var(--s6); text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gr__brand { display: flex; align-items: center; gap: 12px; }
.gr__brand-txt { text-align: left; }
.gr__brand-txt strong { display: block; font-family: var(--serif); font-size: 18px; color: var(--ink); }
.gr__brand-txt span { font-size: 12px; color: var(--muted); }
.gr__score { display: flex; align-items: center; gap: 10px; }
.gr__score b { font-family: var(--serif); font-size: 32px; font-weight: 700; color: var(--ink); line-height: 1; }
.gr__score-col { display: flex; flex-direction: column; align-items: flex-start; }
.gr__count { margin-top: 3px; font-size: 12px; color: var(--muted); }
.gr-stars { color: #FBBC05; letter-spacing: 2px; line-height: 1;
    font-family: "Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2","DejaVu Sans",Arial,sans-serif; }

.gr__rows { position: relative; }
.gr__row { overflow: hidden; }
.gr__row + .gr__row { margin-top: 16px; }
.gr__track { display: flex; width: max-content; animation: gr-marquee 80s linear infinite; }
.gr__row:hover .gr__track { animation-play-state: paused; }
.gr__row--rev .gr__track { animation-direction: reverse; }
@keyframes gr-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.gr__cell { width: 340px; flex-shrink: 0; padding: 0 10px; }
.gr-card { position: relative; height: 100%; display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--hair); border-radius: var(--r-md);
    padding: 20px; transition: transform .3s var(--ease, ease), box-shadow .3s ease; }
.gr-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(23,23,23,.08); }
.gr-card__g { position: absolute; right: 18px; top: 18px; }
.gr-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.gr-avatar { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #fff;
    font-family: var(--serif); font-size: 18px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; }
.gr-card__name { display: block; font-weight: 700; font-size: 14.5px; color: var(--ink); }
.gr-card__meta { display: block; font-size: 12.5px; color: var(--muted); }
.gr-card__text { flex: 1; font-size: 13.5px; line-height: 1.62; color: var(--copy); margin: 10px 0 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gr-card__more { align-self: flex-start; margin-top: 12px; background: none; border: 0; padding: 0;
    font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--gold-ink); cursor: pointer; }
.gr-card__more:hover { color: var(--gold-deep); text-decoration: underline; }

.gr__fade { position: absolute; top: 0; bottom: 0; width: 110px; pointer-events: none; z-index: 2; }
.gr__fade--l { left: 0; background: linear-gradient(to right, var(--warm), transparent); }
.gr__fade--r { right: 0; background: linear-gradient(to left, var(--warm), transparent); }

.gr-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center;
    justify-content: center; padding: 20px; background: rgba(23,23,23,.7);
    opacity: 0; transition: opacity .2s ease; }
.gr-modal.is-open { opacity: 1; }
.gr-modal__card { position: relative; width: 100%; max-width: 520px; background: #fff;
    border-radius: var(--r-lg); padding: 28px; box-shadow: 0 30px 90px rgba(0,0,0,.3);
    transform: translateY(16px); transition: transform .25s cubic-bezier(.22,1,.36,1); }
.gr-modal.is-open .gr-modal__card { transform: none; }
.gr-modal__text { max-height: 58vh; overflow-y: auto; margin-top: 14px;
    font-size: 15px; line-height: 1.7; color: var(--copy); }
.gr-modal__x { position: absolute; top: 12px; right: 16px; background: none; border: 0;
    font-size: 28px; line-height: 1; color: var(--muted); cursor: pointer; }
.gr-modal__x:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) { .gr__track { animation: none; } }
@media (max-width: 620px) {
    .gr__cell { width: 290px; }
    .gr__fade { width: 48px; }
    .gr { padding: var(--s7) 0; }
}

/* ==========================================================================
   UNIVERSAL RADIUS + BUTTON SYSTEM
   Everything that rounds uses the --r-* scale, and every button - studio or
   inherited-template - resolves to the same shape, weight and motion, so the
   site reads as one system rather than two.
   ========================================================================== */
.s3 .s3-btn,
.onyx.s3 .btn {
    border-radius: var(--r-pill);
    font-family: var(--sans);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    padding: 15px 30px;
    min-height: 52px;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease,
                transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
    box-shadow: none;
}
.s3 .s3-btn:hover, .onyx.s3 .btn:hover { transform: translateY(-2px); }
.s3 .s3-btn:active, .onyx.s3 .btn:active { transform: translateY(0); }
.s3 .s3-btn--gold, .onyx.s3 .btn--primary {
    background: var(--gold); color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--gold) 58%, var(--gold-deep));
}
.s3 .s3-btn--gold:hover, .onyx.s3 .btn--primary:hover {
    background: color-mix(in srgb, var(--gold) 84%, var(--gold-deep));
    box-shadow: 0 8px 22px rgba(23,23,23,.12);
}
.s3 .s3-btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.s3 .s3-btn--ghost:hover { border-color: var(--ink); background: rgba(23,23,23,.03); }
.s3 .s3-btn--onGold { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.s3 .s3-btn--onGold:hover { background: #000; box-shadow: 0 8px 22px rgba(23,23,23,.24); }
/* on photography */
.s3 .s3-btn--glass {
    background: rgba(255,255,255,.14); color: #fff;
    border: 1px solid rgba(255,255,255,.55);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.s3 .s3-btn--glass:hover { background: rgba(255,255,255,.24); border-color: #fff; }

/* every rounded surface on the same scale */
.s3 .s3-tile__img, .s3 .s3-feature__media img, .s3-hero img { border-radius: var(--r-lg); }
.s3 .gr-card, .s3 .s3-cred { border-radius: var(--r-md); }
.s3 .s3-form input, .s3 .s3-form select, .s3 .s3-form textarea { border-radius: 0; }
.s3 .s3-drop { border-radius: var(--r-md); }
.s3 .s3-drop a { border-radius: var(--r-sm); }
.onyx.s3 .svc-card, .onyx.s3 .service-card, .onyx.s3 .area-hub-card, .onyx.s3 .why-card,
.onyx.s3 .review-card, .onyx.s3 .project-card, .onyx.s3 .faq-item, .onyx.s3 .process-step,
.onyx.s3 .contact-form, .onyx.s3 .lead-form, .onyx.s3 .svc-gallery__item,
.onyx.s3 .why-local__media, .onyx.s3 .about__media, .onyx.s3 .page-hero__bg {
    border-radius: var(--r-md) !important;
}
.onyx.s3 .credential-badge { border-radius: var(--r-pill) !important; }
.onyx.s3 .svc-card__media img, .onyx.s3 .service-intro__media img { border-radius: 0 !important; }
.onyx.s3 .svc-card__media { border-radius: var(--r-md) var(--r-md) 0 0; overflow: hidden; }

/* ==========================================================================
   HERO WITH TYPE OVER THE PHOTOGRAPH
   A single soft left-to-bottom scrim rather than a flat overlay, so the copy
   sits on the image instead of on a grey box laid over it.
   ========================================================================== */
.s3-hero { position: relative; width: 100%; min-height: clamp(520px, 78vh, 780px);
    display: flex; align-items: center; overflow: hidden; background: var(--warm); border-radius: 0; }
.s3-hero > img { position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 50%; border-radius: 0; }
.s3-hero__scrim { position: absolute; inset: 0;
    background:
      linear-gradient(100deg, rgba(12,14,18,.80) 0%, rgba(12,14,18,.62) 38%, rgba(12,14,18,.22) 68%, rgba(12,14,18,.06) 100%),
      linear-gradient(to top, rgba(12,14,18,.42) 0%, rgba(12,14,18,0) 42%); }
.s3-hero__in { position: relative; z-index: 2; width: 100%; max-width: 1220px;
    margin: 0 auto; padding: 0 32px; }
.s3-hero__copy { max-width: 640px; }
.s3-hero__eyebrow { display: inline-block; font-family: var(--sans); font-size: 11.5px; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
    padding-bottom: 14px; }
.s3-hero h1 { font-family: var(--serif); font-weight: 700; color: #fff;
    font-size: clamp(38px, 5.4vw, 68px); line-height: 1.08; letter-spacing: .002em; text-wrap: balance; }
.s3-hero h1 .gold { color: var(--gold); }
.s3-hero__sub { margin-top: 22px; max-width: 52ch; font-size: 17.5px; line-height: 1.7;
    color: rgba(255,255,255,.88); }
.s3-hero__cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 900px) {
    .s3-hero { min-height: 560px; }
    .s3-hero__scrim { background: linear-gradient(to top, rgba(12,14,18,.86) 0%, rgba(12,14,18,.52) 55%, rgba(12,14,18,.34) 100%); }
    .s3-hero__copy { max-width: none; }
}
@media (max-width: 620px) { .s3-hero__in { padding: 0 20px; } .s3-hero__cta .s3-btn { width: 100%; } }

/* ==========================================================================
   FLOATING GOOGLE BADGE (bottom-left) + reviews sheet
   Ported from ReviewBadge.tsx. The X dismisses the badge for the session; the
   pill opens a sheet listing all reviews in full.
   ========================================================================== */
.gr-badge { position: fixed; left: 20px; bottom: 20px; z-index: 90; }
@media print { .gr-badge { display: none; } }
.gr-badge__pill {
    display: flex; align-items: center; gap: 9px;
    background: #fff; border: 1px solid rgba(0,0,0,.10); border-radius: var(--r-pill, 999px);
    padding: 8px 15px 8px 8px; cursor: pointer;
    box-shadow: 0 12px 34px rgba(23,23,23,.22);
    transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease;
}
.gr-badge__pill:hover { transform: scale(1.03); box-shadow: 0 16px 40px rgba(23,23,23,.28); }
.gr-badge__g { width: 32px; height: 32px; border-radius: 50%; background: #fff;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gr-badge__txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.gr-badge__top { display: flex; align-items: center; gap: 5px; }
.gr-badge__top strong { font-size: 13px; font-weight: 700; color: #171717; }
.gr-badge__top .gr-stars { font-size: 11px; letter-spacing: 1px; }
.gr-badge__meta { margin-top: 3px; font-size: 10.5px; font-weight: 500; color: #7A8088; }
.gr-badge__x {
    position: absolute; top: -6px; right: -6px; width: 21px; height: 21px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: #7A8088; border: 1px solid rgba(0,0,0,.10); border-radius: 50%;
    box-shadow: 0 3px 10px rgba(23,23,23,.18); cursor: pointer;
    opacity: 0; transition: opacity .2s ease, color .2s ease;
}
.gr-badge__x svg { width: 11px; height: 11px; }
.gr-badge:hover .gr-badge__x, .gr-badge__x:focus-visible { opacity: 1; }
.gr-badge__x:hover { color: #171717; }
@media (max-width: 620px) { .gr-badge { left: 14px; bottom: 14px; } .gr-badge__x { opacity: 1; } }

/* the sheet the pill opens */
.gr-modal--list { align-items: flex-end; padding: 0; }
@media (min-width: 641px) { .gr-modal--list { align-items: center; padding: 24px; } }
.gr-sheet { display: flex; flex-direction: column; width: 100%; max-width: 720px;
    max-height: 90vh; overflow: hidden; background: var(--warm, #F7F4EC);
    border-radius: var(--r-lg, 20px) var(--r-lg, 20px) 0 0;
    box-shadow: 0 30px 90px rgba(0,0,0,.34);
    transform: translateY(28px); transition: transform .28s cubic-bezier(.22,1,.36,1); }
@media (min-width: 641px) { .gr-sheet { border-radius: var(--r-lg, 20px); } }
.gr-modal.is-open .gr-sheet { transform: none; }
.gr-sheet__head { display: flex; align-items: center; gap: 14px; padding: 16px 20px;
    background: #fff; border-bottom: 1px solid rgba(23,23,23,.08); }
.gr-sheet__title { flex: 1; display: flex; flex-direction: column; }
.gr-sheet__title strong { font-family: var(--serif, Georgia), serif; font-size: 17px; color: #171717; }
.gr-sheet__title span { font-size: 11.5px; color: #7A8088; }
.gr-sheet__score { display: flex; align-items: center; gap: 8px; }
.gr-sheet__score b { font-family: var(--serif, Georgia), serif; font-size: 22px; color: #171717; }
.gr-sheet__score > span { display: flex; flex-direction: column; line-height: 1; }
.gr-sheet__x { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center;
    justify-content: center; border: 0; background: none; color: #7A8088; border-radius: 50%; cursor: pointer; }
.gr-sheet__x svg { width: 18px; height: 18px; }
.gr-sheet__x:hover { background: rgba(23,23,23,.06); color: #171717; }
.gr-sheet__body { display: grid; gap: 14px; padding: 18px 20px; overflow-y: auto; }
@media (min-width: 641px) { .gr-sheet__body { grid-template-columns: 1fr 1fr; } }
.gr-card--flat { height: auto; }
.gr-card--flat:hover { transform: none; box-shadow: none; }
.gr-card__full { margin-top: 10px; font-size: 13.5px; line-height: 1.62; color: var(--copy, #4E5359); }
.gr-sheet__foot { padding: 14px 20px; background: #fff; text-align: center;
    border-top: 1px solid rgba(23,23,23,.08); }
.gr-sheet__foot .s3-btn { min-height: 46px; padding: 12px 26px; }

/* the hero copy now sits centred over the photograph */
.s3-hero { text-align: center; }
.s3-hero__copy { max-width: 780px; margin: 0 auto; }
.s3-hero__cta { justify-content: center; }
.s3-hero__sub { margin-left: auto; margin-right: auto; }
.s3-hero__scrim {
    background:
      linear-gradient(to bottom, rgba(12,14,18,.52) 0%, rgba(12,14,18,.40) 45%, rgba(12,14,18,.66) 100%),
      radial-gradient(120% 90% at 50% 50%, rgba(12,14,18,.30) 0%, rgba(12,14,18,.60) 100%);
}
@media (max-width: 900px) {
    .s3-hero__scrim {
      background: linear-gradient(to bottom, rgba(12,14,18,.55) 0%, rgba(12,14,18,.45) 40%, rgba(12,14,18,.75) 100%);
    }
}

/* ==========================================================================
   MOBILE
   Fixes found by measuring the rendered page at 390px rather than assuming:
   the nav CTA was wrapping to two lines (81px tall), the drawer's own CTA sat
   below the fold, 14 form controls were under 16px (which makes iOS zoom the
   page on focus), and several link rows were under the 44px touch target.
   ========================================================================== */
@media (max-width: 900px) {
    /* --- nav: logo | compact CTA | burger, all on one line --- */
    .s3-nav__in { gap: 10px; padding: 0 16px; height: 76px; }
    .s3-nav__logo img { height: 52px; }
    .s3-nav__cta {
        margin-left: auto;
        white-space: nowrap;
        padding: 11px 18px;
        min-height: 44px;
        font-size: 13.5px;
    }
    .s3-burger { margin-left: 0; padding: 10px 4px; }
    .s3-topbar__in { padding: 8px 16px; gap: 12px; justify-content: center; }
    .s3-topbar a { min-height: 32px; }

    /* --- drawer: the actions pin to the bottom instead of scrolling away --- */
    .s3-drawer { display: flex; flex-direction: column; padding-bottom: 0; }
    .s3-drawer > ul { flex: 0 0 auto; }
    .s3-drawer__foot {
        position: sticky; bottom: 0; z-index: 2; margin-top: auto;
        display: grid; gap: 10px; padding: 14px 0 22px;
        background: #fff; box-shadow: 0 -14px 18px 6px #fff;
    }
    .s3-drawer__foot .s3-btn { width: 100%; }
    .s3-drawer__tel {
        display: block; text-align: center; padding: 12px; min-height: 44px;
        font-size: 15px; font-weight: 700; color: var(--gold-ink);
    }
    .s3-drawer a { min-height: 44px; display: flex; align-items: center; }

    /* --- 16px minimum on every control, or iOS zooms the whole page --- */
    .s3 input, .s3 select, .s3 textarea,
    .onyx.s3 input, .onyx.s3 select, .onyx.s3 textarea { font-size: 16px; }

    /* --- touch targets --- */
    .s3-areas__cities a, .s3-footer li a, .s3-footer__facts a,
    .s3-list__row a, .s3-drop a { min-height: 44px; display: flex; align-items: center; }
    .s3-list__row a { display: grid; align-content: center; padding: 16px 0; }

    /* --- rhythm: the desktop 128px gaps are a lot of dead scrolling --- */
    .s3-statement { padding: 56px 0 40px; }
    .s3-triad { padding: 8px 0 48px; }
    .s3-services, .s3-list-sec, .s3-feature, .s3-areas, .s3-creds, .gr { padding: 56px 0; }
    .s3-goldstd { padding-top: 56px; }
    .s3-sec-head { margin-bottom: 36px; }
    .s3-hero { min-height: 520px; }
    .s3-hero__sub { font-size: 16px; }
    .s3-contact__panel, .s3-contact__form { padding: 48px 20px; }
}

@media (max-width: 620px) {
    /* the label is the first thing to give: keep the shape, drop the padding */
    .s3-nav__cta { padding: 11px 15px; font-size: 13px; }
    .s3-nav__logo img { height: 46px; }
    .s3-nav__in { height: 68px; gap: 8px; }
    .s3-hero h1 { font-size: clamp(30px, 8.6vw, 40px); }
    .s3-hero__cta { flex-direction: column; width: 100%; }
    .s3-hero__cta .s3-btn { width: 100%; }
    .s3-statement__cta { flex-direction: column; }
    .s3-statement__cta .s3-btn { width: 100%; }
    .s3-feature__cta .s3-btn, .onyx.s3 .page-hero__actions .btn,
    .onyx.s3 .cta-band__actions .btn { width: 100%; }
    /* the floating badge shrinks so it stops covering content on a phone */
    .gr-badge { left: 12px; bottom: 12px; transform: scale(.88); transform-origin: left bottom; }
    .s3-quotes__grid { gap: 32px; }
}

@media (max-width: 620px) {
    /* the desktop line breaks are set for a wide measure; on a phone they
       leave ragged orphans, so let the type wrap where it wants to */
    .s3-statement .s3-display br,
    .s3-h2 br { display: none; }
    .s3-statement .s3-display { font-size: clamp(28px, 8vw, 36px); }
}

/* The badge is fixed bottom-left and the drawer's pinned actions land in the
   same corner, so it was sitting on top of the phone number. The scrim is a
   body-level sibling that precedes the badge, so it can switch it off. */
.s3-drawer { z-index: 95; }
.s3-scrim { z-index: 94; }
.s3-scrim.is-open ~ .gr-badge { opacity: 0; pointer-events: none; }
.gr-badge { transition: opacity .2s ease, transform .22s cubic-bezier(.22,1,.36,1); }

/* ==========================================================================
   TILE TITLES + LOGO SIZE
   ========================================================================== */
/* Facility-type titles read gold at rest and deepen on hover, rather than
   only turning gold once you touch them (which no one sees on a phone). */
.s3 .s3-tile__name { color: var(--gold-display); }
.s3 .s3-tile:hover .s3-tile__name { color: var(--gold-deep); }

/* Bigger logo in the bar. The bar grows with it so the mark never crops. */
.s3 .s3-nav__in { height: 118px; }
.s3 .s3-nav__logo img { height: 92px; }
@media (max-width: 1080px) {
    .s3 .s3-nav__in { height: 104px; }
    .s3 .s3-nav__logo img { height: 80px; }
}
@media (max-width: 900px) {
    .s3 .s3-nav__in { height: 88px; }
    .s3 .s3-nav__logo img { height: 64px; }
}
@media (max-width: 620px) {
    .s3 .s3-nav__in { height: 78px; }
    .s3 .s3-nav__logo img { height: 56px; }
}

/* One of the five facility titles wraps to two lines, which pushed its
   description out of line with the rest of the row. Reserve two lines. */
@media (min-width: 621px) {
    .s3-grid--5 .s3-tile__name { min-height: 2.5em; }
}

/* ==========================================================================
   HOMEPAGE v3 - sections added from the site audit
   Trust bar, "why switch", review-derived proof, founder, and an on-page FAQ.
   ========================================================================== */

/* --- trust bar, immediately under the hero --------------------------------- */
.s3-trust { background: var(--ink); color: #fff; }
.s3-trust__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 10px 34px; padding-top: 18px; padding-bottom: 18px; }
.s3-trust__item { position: relative; font-size: 13px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: rgba(255,255,255,.86); white-space: nowrap; }
.s3-trust__item::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px;
    border-radius: 50%; background: var(--gold); vertical-align: middle; }

/* --- why switch ------------------------------------------------------------ */
.s3-switch { padding: var(--s8) 0; background: var(--warm); }
.s3-switch__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s7); align-items: start; }
.s3-switch__list { list-style: none; padding: 0; margin: var(--s4) 0 0; }
.s3-switch__list li { position: relative; padding-left: 34px; margin-bottom: 14px;
    font-size: 16px; color: var(--copy); line-height: 1.6; }
.s3-switch__list li::before {
    content: ""; position: absolute; left: 0; top: 6px; width: 18px; height: 18px; border-radius: 50%;
    background: rgba(23,23,23,.06); border: 1px solid rgba(23,23,23,.16);
}
.s3-switch__list li::after {
    content: ""; position: absolute; left: 5px; top: 11px; width: 8px; height: 8px;
    background: var(--gold-display);
    clip-path: polygon(20% 0,100% 80%,80% 100%,0 20%);
}
.s3-switch__card { background: #fff; border: 1px solid var(--hair); border-radius: var(--r-lg);
    padding: var(--s5); display: grid; gap: 14px; align-content: start; box-shadow: 0 14px 40px rgba(23,23,23,.06); }
.s3-switch__card h3 { font-family: var(--serif); font-size: 26px; color: var(--gold-display); }
.s3-switch__card p { font-size: 15.5px; color: var(--copy); }

/* --- proof, quoted straight from the Google reviews ------------------------ */
.s3-proofs { padding: var(--s8) 0; }
.s3-proofs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5) var(--s4); }
.s3-proof { margin: 0; padding-top: var(--s3); border-top: 2px solid var(--gold); }
.s3-proof h3 { font-family: var(--serif); font-size: 21px; color: var(--ink); margin-bottom: 14px; }
.s3-proof blockquote { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--copy); font-style: italic; }
.s3-proof figcaption { margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--gold-ink); }

/* --- founder --------------------------------------------------------------- */
.s3-founder { padding: var(--s8) 0; background: var(--warm); }
.s3-founder__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--s7); align-items: center; }
.s3-founder__media { position: relative; }
.s3-founder__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-lg); }
/* if no founder photo has been supplied yet, the frame becomes a quiet placeholder
   rather than a broken image */
.s3-founder__media.is-placeholder::before {
    content: "Founder photo"; display: flex; align-items: center; justify-content: center;
    aspect-ratio: 4/5; border: 1px dashed rgba(23,23,23,.22); border-radius: var(--r-lg);
    color: var(--muted); font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
    background: rgba(23,23,23,.03);
}
.s3-founder__badge { position: absolute; left: 18px; bottom: 18px; background: var(--gold); color: var(--ink);
    font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    padding: 8px 16px; border-radius: var(--r-pill); }
.s3-founder__media.is-placeholder .s3-founder__badge { display: none; }
.s3-founder__quote { margin-top: var(--s4); padding-left: 20px; border-left: 2px solid var(--gold);
    font-size: 16px; font-style: italic; color: var(--copy); line-height: 1.7; }
.s3-founder__quote span { display: block; margin-top: 8px; font-style: normal; font-size: 13px;
    font-weight: 700; color: var(--gold-ink); }
.s3-founder__cred { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--s4) 0 var(--s3); }
.s3-founder__cred span { font-size: 12.5px; font-weight: 600; color: var(--ink);
    background: rgba(23,23,23,.05); border: 1px solid var(--hair);
    padding: 8px 14px; border-radius: var(--r-pill); }

/* --- on-page FAQ ----------------------------------------------------------- */
.s3-faq { padding: var(--s8) 0; }
.s3-faq__list { border-top: 1px solid var(--line); }
.s3-faq__item { border-bottom: 1px solid var(--line); }
.s3-faq__item summary { cursor: pointer; list-style: none; padding: 22px 44px 22px 0; position: relative;
    font-family: var(--sans); font-size: 16.5px; font-weight: 700; color: var(--ink); }
.s3-faq__item summary::-webkit-details-marker { display: none; }
.s3-faq__item summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    font-size: 22px; font-weight: 400; color: var(--gold-display); transition: transform .2s ease; }
.s3-faq__item[open] summary::after { content: "\2013"; }
.s3-faq__item summary:hover { color: var(--gold-display); }
.s3-faq__item p { margin: 0 0 24px; padding-right: 44px; font-size: 15.5px; line-height: 1.75; color: var(--copy); }

.s3-form__note { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; color: var(--muted); line-height: 1.6; }

@media (max-width: 1080px) {
    .s3-proofs__grid { grid-template-columns: 1fr; gap: var(--s5); }
    .s3-switch__grid, .s3-founder__grid { grid-template-columns: 1fr; gap: var(--s5); }
    .s3-founder__media { max-width: 380px; }
}
@media (max-width: 900px) {
    .s3-switch, .s3-proofs, .s3-founder, .s3-faq { padding: 56px 0; }
    .s3-trust__in { gap: 8px 20px; padding-top: 14px; padding-bottom: 14px; }
    .s3-trust__item { font-size: 11.5px; }
    .s3-trust__item::before { width: 5px; height: 5px; margin-right: 7px; }
    .s3-switch__card .s3-btn { width: 100%; }
}

/* ==========================================================================
   CLIENT STORIES (projects page)
   Replaces "Recent Project 1/2/3". Each entry is a verified Google review, so
   the layout leads with the client's words rather than a stock photo.
   ========================================================================== */
.onyx.s3 .s3-stories { padding: 90px 0; background: var(--paper); }
.onyx.s3 .s3-story { display: grid; grid-template-columns: .85fr 1.15fr; gap: 44px;
    align-items: center; padding: 44px 0; border-bottom: 1px solid var(--hair); }
.onyx.s3 .s3-story:first-of-type { border-top: 1px solid var(--hair); }
.onyx.s3 .s3-story:nth-child(even) .s3-story__media { order: 2; }
.onyx.s3 .s3-story__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover;
    border-radius: var(--r-md) !important; }
.onyx.s3 .s3-story__tag { font-family: var(--sans); font-size: 11.5px; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
.onyx.s3 .s3-story__body h3 { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 30px);
    color: var(--gold-display); margin: 12px 0 14px; line-height: 1.22; }
.onyx.s3 .s3-story__lede { font-size: 16px; color: var(--copy); line-height: 1.7; }
.onyx.s3 .s3-story__points { list-style: none; padding: 0; margin: 20px 0; display: flex;
    flex-wrap: wrap; gap: 8px; }
.onyx.s3 .s3-story__points li { font-size: 12.5px; font-weight: 600; color: var(--ink);
    background: rgba(23,23,23,.05); border: 1px solid var(--hair);
    padding: 7px 14px; border-radius: var(--r-pill); }
.onyx.s3 .s3-story__quote { margin: 0; padding-left: 20px; border-left: 2px solid var(--gold);
    font-size: 15.5px; font-style: italic; line-height: 1.7; color: var(--copy); }
.onyx.s3 .s3-story__who { display: flex; align-items: center; gap: 8px; margin: 14px 0 0;
    font-size: 13px; font-weight: 700; color: var(--ink); }
@media (max-width: 900px) {
    .onyx.s3 .s3-story { grid-template-columns: 1fr; gap: 24px; padding: 34px 0; }
    .onyx.s3 .s3-story:nth-child(even) .s3-story__media { order: 0; }
    .onyx.s3 .s3-stories { padding: 56px 0; }
}

/* Wrapping the hero image in <picture> for the WebP source made the <img> a
   grandchild of .s3-hero, so the `> img` full-bleed rule stopped matching and
   the photo collapsed to its intrinsic box. Cover both shapes. */
.s3-hero > picture { position: absolute; inset: 0; display: block; }
.s3-hero > img,
.s3-hero > picture > img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 50%; border-radius: 0;
}

/* ==========================================================================
   "BUILT FOR YOUR KIND OF FACILITY" - staggered row
   The five tiles used to sit on one flat baseline. Offsetting every second
   card gives the row a rhythm and stops it reading as a spec sheet. The
   offset is real margin, not a transform, so the section grows to fit rather
   than letting the low cards run into what follows.
   ========================================================================== */
.s3 .s3-grid--5 { align-items: start; }
.s3 .s3-grid--5 > .s3-tile:nth-child(even) { margin-top: 72px; }
.s3 .s3-grid--5 > .s3-tile { transition: transform .35s cubic-bezier(.22,1,.36,1); }
.s3 .s3-grid--5 > .s3-tile:hover { transform: translateY(-6px); }

/* three across: the zigzag still lands on alternate cards, just tighter */
@media (max-width: 1080px) {
    .s3 .s3-grid--5 > .s3-tile:nth-child(even) { margin-top: 52px; }
}
/* single column - a stagger would just be dead space */
@media (max-width: 620px) {
    .s3 .s3-grid--5 > .s3-tile:nth-child(even) { margin-top: 0; }
}

/* The two-line min-height existed to align descriptions across a flat row.
   The row is staggered now, so it only leaves a gap under one-line titles. */
@media (min-width: 621px) {
    .s3 .s3-grid--5 .s3-tile__name { min-height: 0; }
}

/* ==========================================================================
   WHO WE SERVE - alternating full-width rows
   Each facility type gets its own row: photo one side, copy the other, and the
   sides swap on every second row. Replaces the five-across grid, which gave
   each sector a thumbnail and two lines and no room to say anything.
   ========================================================================== */
.s3-serve { padding: 0 0 var(--s8); }
.s3-serve__rows { display: grid; gap: var(--s8); }
.s3-serve__row {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--s7); align-items: center;
}
/* row 1 is text-left / photo-right, then it alternates down the page */
.s3-serve__row:nth-child(odd) .s3-serve__media { order: 2; }

.s3-serve__media { display: block; overflow: hidden; border-radius: 28px; background: var(--warm); }
.s3-serve__media img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: 28px;                     /* smooth corners on the photo itself */
    transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.s3-serve__media:hover img { transform: scale(1.035); }

/* .s3-serve__num removed: the facility rows no longer carry 01-05 markers */
.s3-serve__name {
    font-family: var(--serif); font-weight: 700; color: var(--gold-display);
    font-size: clamp(26px, 3.1vw, 40px); line-height: 1.16; margin: 10px 0 16px;
}
.s3-serve__desc { font-size: 16.5px; line-height: 1.75; color: var(--copy); max-width: 46ch; }
.s3-serve__points { list-style: none; padding: 0; margin: var(--s3) 0 var(--s4);
    display: flex; flex-wrap: wrap; gap: 8px; }
.s3-serve__points li {
    font-size: 12.5px; font-weight: 600; color: var(--ink);
    background: rgba(23,23,23,.05); border: 1px solid var(--hair);
    padding: 8px 15px; border-radius: var(--r-pill);
}

@media (max-width: 900px) {
    .s3-serve { padding-bottom: 56px; }
    .s3-serve__rows { gap: 56px; }
    .s3-serve__row { grid-template-columns: 1fr; gap: var(--s3); }
    /* stacked, the photo always leads */
    .s3-serve__row:nth-child(odd) .s3-serve__media { order: 0; }
    .s3-serve__media, .s3-serve__media img { border-radius: 20px; }
    .s3-serve__desc { max-width: none; }
}

/* ==========================================================================
   TYPOGRAPHY, SETTLED
   One rule, applied everywhere including the inherited interior pages:
     titles  -> Playfair Display, weight 700
     body/UI -> Open Sans
   Small letterspaced labels (eyebrows, region headers, tags, form labels) stay
   in Open Sans on purpose: Playfair is a high-contrast Didone, and tracking it
   out at 11-12px in caps thins the hairlines to the point of illegibility.
   ========================================================================== */
.s3 h1, .s3 h2, .s3 h3, .s3 h4, .s3 h5, .s3 h6,
.onyx.s3 h1, .onyx.s3 h2, .onyx.s3 h3, .onyx.s3 h4, .onyx.s3 h5, .onyx.s3 h6,
.s3 .s3-display, .s3 .s3-h2,
.s3 .s3-serve__name, .s3 .s3-list__name, .s3 .s3-tile__name,
.s3 .s3-triad__word, .s3 .s3-proof h3, .s3 .s3-switch__card h3,
.s3 .s3-gold__item h3, .s3 .s3-cred h3, .s3 .s3-cols__item h3,
.s3 .s3-faq__item summary, .s3 .s3-footer h4,
.s3 .gr__brand-txt strong, .s3 .gr-sheet__title strong,
.onyx.s3 .s3-story__body h3, .onyx.s3 .ng-h2, .onyx.s3 .contact-form__title,
.onyx.s3 .why-card h3, .onyx.s3 .svc-card__content h3, .onyx.s3 .faq-q > span:first-child,
.onyx.s3 .footer h4, .onyx.s3 .process-step h3, .onyx.s3 .about-stat__value {
    font-family: var(--serif) !important;
    font-weight: 700 !important;
}
/* the letterspaced caps that are labels, not titles */
.s3 .s3-eyebrow, .s3 .s3-hero__eyebrow, .s3 .s3-areas__region, .s3 .s3-serve__num,
.s3 .s3-footer h4, .s3 .s3-cols__item h3, .s3 .s3-trust__item,
.onyx.s3 .eyebrow, .onyx.s3 .s3-story__tag, .onyx.s3 .footer h4 {
    font-family: var(--sans) !important;
    letter-spacing: .16em;
}
.s3 .s3-footer h4, .onyx.s3 .footer h4 { font-weight: 700 !important; }

/* body, UI and controls all resolve to Open Sans */
.s3, .onyx.s3,
.s3 p, .s3 li, .s3 span, .s3 label, .s3 blockquote, .s3 figcaption,
.s3 input, .s3 select, .s3 textarea, .s3 button, .s3 .s3-btn, .s3 .s3-link,
.s3 .s3-nav__links a, .s3 .s3-nav__links button, .s3 .s3-drop a,
.onyx.s3 p, .onyx.s3 li, .onyx.s3 label, .onyx.s3 input, .onyx.s3 select,
.onyx.s3 textarea, .onyx.s3 .btn, .onyx.s3 .faq-a p {
    font-family: var(--font-body, 'Open Sans', Arial, sans-serif);
}
/* the serif keeps the numerals it was chosen for */
.s3 .s3-gold__n, .s3 .s3-quote__mark, .s3 .gr__score b, .s3 .gr-avatar,
.onyx.s3 .about-stat__value, .onyx.s3 .process-step__num {
    font-family: var(--serif) !important;
}

/* The footer column heads and the area-region heads are titles, not micro
   labels, so they belong in Playfair too. Dropping the 11px uppercase
   treatment is what makes that readable: set them at a real size in sentence
   case instead of tracking a Didone out into hairlines. */
.s3 .s3-footer h4, .onyx.s3 .footer h4 {
    font-family: var(--serif) !important;
    font-weight: 700 !important;
    font-size: 17px;
    letter-spacing: .005em;
    text-transform: none;
    color: var(--ink);
}
.s3 .s3-areas__region {
    font-family: var(--serif) !important;
    font-weight: 700 !important;
    font-size: 19px;
    letter-spacing: .005em;
    text-transform: none;
    color: var(--gold-display);
}
/* what genuinely stays in Open Sans: the micro labels */
.s3 .s3-eyebrow, .s3 .s3-hero__eyebrow, .s3 .s3-trust__item, .s3 .s3-serve__num,
.s3 .s3-form label, .s3 .s3-tile__more, .s3 .s3-link, .s3 .gr-badge__meta,
.onyx.s3 .eyebrow, .onyx.s3 .s3-story__tag {
    font-family: var(--sans) !important;
}

/* ==========================================================================
   TRUST BAR - auto-sliding
   The set is rendered twice and the track translates -50%, so the seam lands
   exactly where the second copy begins and the loop is invisible. Hovering
   pauses it; reduced-motion users get a static, centred row instead.
   ========================================================================== */
.s3-trust { background: var(--ink); color: #fff; overflow: hidden; }
.s3-trust__viewport { position: relative; overflow: hidden; padding: 16px 0; }
/* soften both cut edges into the bar colour */
.s3-trust__viewport::before,
.s3-trust__viewport::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.s3-trust__viewport::before { left: 0;  background: linear-gradient(to right, var(--ink), transparent); }
.s3-trust__viewport::after  { right: 0; background: linear-gradient(to left,  var(--ink), transparent); }

.s3-trust__track {
    display: flex; width: max-content; align-items: center;
    animation: s3-trust-slide 34s linear infinite;
}
.s3-trust:hover .s3-trust__track { animation-play-state: paused; }
@keyframes s3-trust-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.s3-trust__item {
    flex: 0 0 auto; padding: 0 30px; white-space: nowrap;
    font-family: var(--sans); font-size: 13px; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.88);
}
.s3-trust__item::before {
    content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 12px;
    border-radius: 50%; background: var(--gold); vertical-align: middle;
}

@media (max-width: 900px) {
    .s3-trust__viewport { padding: 13px 0; }
    .s3-trust__item { font-size: 11.5px; padding: 0 20px; }
    .s3-trust__item::before { width: 5px; height: 5px; margin-right: 9px; }
    .s3-trust__viewport::before, .s3-trust__viewport::after { width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .s3-trust__track { animation: none; width: 100%; justify-content: center; flex-wrap: wrap; gap: 6px 0; }
    /* the duplicate set is only there to make the loop seamless */
    .s3-trust__track .s3-trust__item:nth-child(n+7) { display: none; }
}

/* ==========================================================================
   LOGO LOCKUP - flame left, name and tagline stacked to its right
   Replaces the stacked PNG in the bar. Setting the wordmark as live text (not
   an image) means it stays crisp at any size, is selectable and readable to
   screen readers, and the tagline can say "Commercial Cleaning Services"
   without re-exporting artwork - the supplied logo still reads "COMMERCIAL &
   RESIDENTIAL", which contradicts the positioning.
   ========================================================================== */
.s3 .s3-nav__logo,
.s3 .s3-footer__logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.s3 .s3-nav__flame { height: 62px; width: auto; flex-shrink: 0; }

.s3 .s3-lockup { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.s3 .s3-lockup__brand {
    font-family: var(--serif); font-weight: 700; color: var(--ink);
    font-size: 31px; line-height: 1; letter-spacing: .015em; white-space: nowrap;
}
/* the tagline is tracked out to sit flush under the wordmark, as in the artwork */
.s3 .s3-lockup__tag {
    font-family: var(--serif); font-weight: 700; color: var(--ink);
    font-size: 9.5px; line-height: 1; letter-spacing: .173em;
    text-transform: uppercase; white-space: nowrap; margin-top: 6px;
}
/* on the warm footer the lockup keeps the same ink */
.s3 .s3-footer__logo .s3-lockup__brand { font-size: 26px; }
.s3 .s3-footer__logo .s3-lockup__tag { font-size: 8px; letter-spacing: .148em; }
.s3 .s3-footer__flame, .s3 .s3-footer__logo .s3-nav__flame { height: 52px; }

@media (max-width: 1080px) {
    .s3 .s3-nav__flame { height: 54px; }
    .s3 .s3-lockup__brand { font-size: 27px; }
    .s3 .s3-lockup__tag { font-size: 8.4px; letter-spacing: .168em; }
}
@media (max-width: 900px) {
    .s3 .s3-nav__logo { gap: 10px; }
    .s3 .s3-nav__flame { height: 44px; }
    .s3 .s3-lockup__brand { font-size: 22px; }
    .s3 .s3-lockup__tag { font-size: 6.9px; letter-spacing: .163em; }
}
@media (max-width: 620px) {
    .s3 .s3-nav__flame { height: 38px; }
    .s3 .s3-lockup__brand { font-size: 19px; }
    .s3 .s3-lockup__tag { font-size: 5.9px; letter-spacing: .162em; }
}

/* ==========================================================================
   METALLIC GOLD
   Same brand colour, but gold surfaces get a sheen instead of a flat fill: a
   highlight and a shadow struck off #D8C051 itself, so the hue never changes,
   it just catches light. Ink on the darkest stop still measures 6.38:1, so
   every gold surface stays readable.
   ========================================================================== */
.s3 {
    --gold-sheen: linear-gradient(135deg,
        #E5D58C 0%,      /* highlight */
        #D8C051 34%,     /* brand */
        #AD9A41 58%,     /* shadow  - ink on this is still 6.38:1 */
        #DECA6D 78%,     /* glint   */
        #D8C051 100%);
    --gold-sheen-soft: linear-gradient(135deg, #E2D076 0%, #D8C051 45%, #C0AA48 100%);
}

.s3 .s3-btn--gold,
.onyx.s3 .btn--primary {
    background-image: var(--gold-sheen);
    background-size: 180% 180%;
    background-position: 0% 50%;
    border-color: #B7A243;
    transition: background-position .55s ease, transform .25s cubic-bezier(.22,1,.36,1),
                box-shadow .25s ease, border-color .25s ease;
}
/* the highlight travels across the button on hover, which is what reads as metal */
.s3 .s3-btn--gold:hover,
.onyx.s3 .btn--primary:hover {
    background-image: var(--gold-sheen);
    background-position: 100% 50%;
    box-shadow: 0 8px 22px rgba(23,23,23,.16);
}

.s3 .s3-topbar { background-image: var(--gold-sheen-soft); }
.s3 .s3-contact__panel { background-image: var(--gold-sheen); background-size: 140% 140%; }
.s3 .s3-footer__bar { background-image: var(--gold-sheen-soft); }
.s3 .gr-avatar { background-image: var(--gold-sheen); }
.s3 .s3-founder__badge { background-image: var(--gold-sheen); }

/* the thin rules and bullets pick up the ramp too */
.s3 .s3-rule { background: var(--gold-sheen-soft); }
.s3 .s3-trust__item::before,
.s3 .s3-cred, .s3 .s3-proof { }
.s3 .s3-trust__item::before { background-image: var(--gold-sheen); }
.s3 .s3-areas__region { border-bottom-color: #C7B04A; }

/* ==========================================================================
   Flame sizing: an earlier `.s3 .s3-nav__logo img` rule (0,2,1) out-ranked the
   flame rules (0,2,0) and pinned it at 92px through every breakpoint. Match
   that specificity so the lockup scales down properly on smaller screens.
   ========================================================================== */
.s3 .s3-nav__logo img.s3-nav__flame { height: 74px; }
.s3 .s3-footer__logo img.s3-nav__flame { height: 58px; }
@media (max-width: 1080px) { .s3 .s3-nav__logo img.s3-nav__flame { height: 62px; } }
@media (max-width: 900px)  { .s3 .s3-nav__logo img.s3-nav__flame { height: 50px; } }
@media (max-width: 620px)  { .s3 .s3-nav__logo img.s3-nav__flame { height: 42px; } }

/* The lockup is much wider than the old stacked mark, and on a phone that
   pushed the burger past the viewport edge. Below 620px the tagline drops
   (it is unreadable at that size anyway) and the wordmark tightens, which
   buys back the width the burger needs. */
@media (max-width: 620px) {
    .s3 .s3-lockup__tag { display: none; }
    .s3 .s3-lockup__brand { font-size: 17px; letter-spacing: .01em; }
    .s3 .s3-nav__logo { gap: 8px; }
    .s3 .s3-nav__logo img.s3-nav__flame { height: 36px; }
    .s3 .s3-nav__in { gap: 6px; padding: 0 14px; }
    .s3 .s3-nav__cta { padding: 11px 13px; font-size: 12.5px; }
}
@media (max-width: 400px) {
    .s3 .s3-lockup__brand { font-size: 15.5px; }
    .s3 .s3-nav__logo img.s3-nav__flame { height: 32px; }
    .s3 .s3-nav__cta { padding: 10px 11px; font-size: 12px; }
}