/* =====================================================
   ROOT VARIABLES
====================================================== */
:root {
    --orange: #fe6f01;
    --orange-dark: #cb5901;
    --orange-light: #ff9445;
    --yellow: #ff9445;
    --cream: #fffaf0;
    --cream-2: #fff6e5;
    --black: #171714;
    --black-2: #24231f;
    --gray: #706b61;

    --transition: 300ms cubic-bezier(.2, .8, .2, 1);

    /* Vertical rhythm between sections. Every section's top/bottom padding
       reads from this, so one number tunes the whole page. The gap you see
       between two sections is twice this value. */
    --section-pad: 44px;
    --header-gap: 30px;

    /* Corner radius on the first content section below the banner. */
    --page-lip: 34px;

    /* Height of the contact strip above the navbar. Published here because
       the sticky bars further down the page offset themselves by it. */
    --topbar-h: 36px;

    /* Breathing room between the banner and the sheet that rides over it.
       Subtracted from the lip below, so the sheet sits this much lower and
       a little more of the banner shows. Keep it under --page-lip or the
       rounded corners stop overlapping the banner and the curve goes flat. */
    --page-gap: 14px;
}

/* =====================================================
   BANNER + PAGE SHEET
   Every page opens with a banner — the photo hero on the home
   page, the orange one everywhere else — and the page sheet
   follows it down the document. The banner used to be sticky,
   holding still while the sheet scrolled up over it on a rounded
   lip; both banners scroll normally now, so the whole page moves
   as one. The z-index pair below is what keeps the sheet and the
   footer painting over the banner rather than under it.
====================================================== */
.hero~main,
.ph-hero~main {
    position: relative;
    z-index: 1;
    /* Square corners — the sheet meets the banner on a straight edge. */
    border-radius: 0;

    /* The sheet sits BELOW the banner and the gap reads as a cream strip
       against the orange. */
    margin-top: var(--page-gap);
}

/* Square now, so the first block must not round either. */
.hero~main> :first-child,
.ph-hero~main> :first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Unpositioned, the footer would paint UNDER the z-index:0 banner
   instead of over it. */
.hero~.footer,
.ph-hero~.footer {
    position: relative;
    z-index: 1;
}

/* The banner's own `position` is NOT set here. Both banner stylesheets load
   after this file, so any rule here loses the cascade and is dead weight —
   which is exactly how .hero ended up computing `relative` while this file
   claimed `sticky`. Each banner owns its positioning in its own file:
       .hero     -> sections/hero.css
       .ph-hero  -> sections/page-hero.css
   One declaration per element, no override. */

/* =====================================================
   RESET & BASE
====================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "DM Sans", sans-serif;
    color: var(--black);
    background: var(--cream);

    /* `clip`, not `hidden`. `overflow-x: hidden` forces overflow-y to compute
       as `auto`, which turns body into a scroll container — and a sticky child
       then sticks to THAT container, which never scrolls, so sticky silently
       does nothing. `clip` contains horizontal overflow the same way without
       creating a scroll container, which is what lets the banners stick. */
    overflow-x: clip;
}

h1,
h2,
h3,
h4 {
    font-family: "Manrope", sans-serif;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
    cursor: pointer;
}

/* =====================================================
   CUSTOM SCROLLBAR
====================================================== */
::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-track {
    background: #f7f1e5;
}

::-webkit-scrollbar-thumb {
    background: var(--orange);
    border-radius: 20px;
}

/* =====================================================
   TOP CONTACT BAR + NAVBAR

   The header used to be a zero-height box with a floating,
   inset, rounded navbar fixed over the page. It is now a
   single full-bleed sticky band: an orange contact strip on
   top, a solid white navbar under it, square edges, flush to
   both sides, sitting directly above the banner.

   The band is sticky rather than fixed so it occupies real
   space in the flow — that is what lets the banner start
   immediately below it instead of underneath it.
====================================================== */
.site-header {
    /* One number for the bar height; the mobile menu hangs off the
       header box itself, so it no longer needs the old geometry tokens. */
    --nav-h: 72px;

    position: sticky;
    top: 0;
    z-index: 3000;
    background: #ffffff;
    border-bottom: 1px solid #f0e9dc;
    transition: box-shadow var(--transition);
}

.site-header.scrolled {
    box-shadow: 0 6px 24px rgba(23, 23, 20, .07);
}

/* ---- Top contact bar ---- */
.topbar {
    width: 100%;
    background: var(--orange);
    color: #ffffff;
}

.topbar-inner {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 24px;
    min-height: var(--topbar-h, 36px);
    display: flex;
    align-items: center;
    /* Centred, so the three contact routes read as one group in the middle
       of the strip rather than hugging the right edge. */
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 26px;
}

.topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 0;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: opacity var(--transition);
}

.topbar-link:hover {
    opacity: .78;
}

.topbar-link i,
.topbar-link svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    font-size: 13px;
}

.topbar-value {
    font-weight: 500;
    opacity: .92;
}

/* ---- Navbar ---- */
.navbar {
    position: static;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 24px;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* =====================================================
   LOGO
====================================================== */
.logo {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}

/* Brand mark is a 2172x724 (3:1) image. The width/height attributes plus
   aspect-ratio reserve the exact box so nothing reflows once it loads. */
.logo-image {
    display: block;
    height: 44px;
    width: auto;
    aspect-ratio: 2172 / 724;
    object-fit: contain;
    transition: transform var(--transition);
}

.logo:hover .logo-image {
    transform: scale(1.03);
}

/* =====================================================
   DESKTOP NAV
====================================================== */
.desktop-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 100%;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    border-radius: 10px;
    color: #403e38;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.nav-link:hover {
    color: var(--orange-dark);
    background: #ffe6d6;
    transform: translateY(-1px);
}

.nav-link svg {
    width: 14px;
    height: 14px;
    transition: transform var(--transition);
}

.nav-item:hover .nav-link svg {
    transform: rotate(180deg);
}

.nav-link.active {
    color: var(--orange-dark);
    background: #ffe6d6;
}

/* =====================================================
   DROPDOWN — CARD STYLE (FIXED GAP)
====================================================== */
.dropdown-menu {
    position: absolute;
    top: calc(100% - 6px);
    left: 50%;
    min-width: 300px;
    padding: 10px 10px 8px 10px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 8px) scale(0.96);
    border-radius: 20px;
    background: rgba(255, 255, 255, .98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .13), 0 0 0 1px rgba(0, 0, 0, .04);
    transition: opacity 280ms ease, transform 280ms cubic-bezier(.16, 1, .3, 1), visibility 0s 280ms;
    z-index: 999;
}

.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 14px;
    background: transparent;
    pointer-events: none;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
    transition: opacity 220ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1), visibility 0s 0s;
}

/* Services carries nine entries. Stacked in one column that is a ~620px tall
   menu, so it opens as a two-column card instead. min() keeps it inside the
   viewport on the narrow end of the desktop range. */
.dropdown-menu.mega {
    min-width: min(600px, calc(100vw - 40px));
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 0 6px;
}

.dropdown-menu.mega .dropdown-heading {
    grid-column: 1 / -1;
}

.dropdown-menu.mega .dropdown-link {
    padding: 10px 12px;
}

.dropdown-menu.mega .dropdown-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.dropdown-heading {
    padding: 8px 12px 12px 12px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #a09888;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    margin-bottom: 6px;
}

.dropdown-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    transition: all 220ms ease;
    cursor: pointer;
    position: relative;
}

.dropdown-link:hover {
    background: var(--cream-2);
    transform: translateX(4px);
}

.dropdown-link:hover .dropdown-title {
    color: var(--orange-dark);
}

.dropdown-link:hover .dropdown-icon {
    background: var(--orange);
    color: #fff;
    transform: scale(1.05);
}

.dropdown-link:hover .dropdown-description {
    color: #5a554a;
}

.dropdown-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #ffe9db;
    color: var(--orange-dark);
    transition: all 280ms ease;
}

.dropdown-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.dropdown-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--black);
    transition: color 220ms ease;
}

.dropdown-description {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    color: var(--gray);
    transition: color 220ms ease;
}

/* =====================================================
   BOOK NOW BUTTON (desktop)
====================================================== */
.book-now-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
    padding: 10px 18px;
    border-radius: 12px;
    background: var(--black);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    transition: var(--transition);
    border: none;
}

.book-now-button:hover {
    background: var(--orange);
    color: var(--black);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(254, 111, 1, .22);
}

.book-now-button svg {
    width: 14px;
}

/* =====================================================
   MOBILE MENU
====================================================== */
/* Compact Get a Quote that rides beside the burger on mobile only. */
.header-quote {
    display: none;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--black);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transition: var(--transition);
}

.header-quote:hover {
    background: var(--orange-dark);
    transform: translateY(-1px);
}

.header-quote svg,
.header-quote i {
    width: 14px;
    height: 14px;
}

.mobile-menu-button {
    display: none;
    width: 43px;
    height: 43px;
    border: 0;
    border-radius: 12px;
    background: var(--black);
    color: white;
    cursor: pointer;
    place-items: center;
}

/* The header is now a positioned (sticky) full-width band, so the menu
   anchors to the header itself and spans its full width — no viewport
   tokens, no insets, and it can never drift out of line with the bar. */
.mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2900;
    max-height: calc(100dvh - 100%);
    padding: 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 0;
    border-bottom: 1px solid #f0e9dc;
    background: #ffffff;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .3s ease, transform .3s ease, visibility 0s .3s;
}

.mobile-menu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity .3s ease, transform .3s ease, visibility 0s, top var(--transition);
}

.mobile-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 10px;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    background: transparent;
    color: var(--black);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.mobile-link svg {
    width: 16px;
    transition: transform .3s ease;
}

/* A dropdown row is two targets, not one. The label is a link straight to the
   category page; the rest of the row — the blank space and the chevron —
   belongs to a button that opens the submenu. Tapping the words goes to the
   page, tapping anywhere else in the row opens the list. The row's padding
   moves onto the two children so each is a full-height tap target and the row
   keeps the same height as a plain .mobile-link. */
.mobile-dropdown-trigger {
    padding: 0;
    cursor: default;
}

.mobile-dropdown-label {
    flex: 0 0 auto;
    padding: 15px 10px;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.mobile-dropdown-label:hover {
    color: var(--orange-dark);
}

.mobile-dropdown-toggle {
    flex: 1 1 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 15px 10px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.mobile-dropdown-toggle:focus-visible,
.mobile-dropdown-label:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: -3px;
}

.mobile-submenu {
    display: none;
    padding: 5px 10px 10px 25px;
}

.mobile-submenu.open {
    display: block;
}

.mobile-submenu a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 0;
    color: var(--gray);
    font-size: 13px;
}

/* Small tinted tile, the mobile echo of .dropdown-icon on the desktop menu. */
.mobile-sub-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #ffe9db;
    color: var(--orange-dark);
    transition: all 220ms ease;
}

.mobile-sub-icon svg {
    width: 15px;
    height: 15px;
    stroke-width: 2;
}

.mobile-submenu a:hover {
    color: var(--orange-dark);
}

.mobile-submenu a:hover .mobile-sub-icon {
    background: var(--orange);
    color: #fff;
}

.mobile-book-now {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding: 14px;
    border-radius: 12px;
    background: var(--black);
    color: white;
    font-size: 13px;
    font-weight: 700;
}

.scroll-indicator {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transform: translateX(-50%);
    color: #8b8579;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
}

.scroll-line {
    width: 1px;
    height: 34px;
    overflow: hidden;
    background: rgba(0, 0, 0, .12);
}

.scroll-line span {
    display: block;
    width: 100%;
    height: 50%;
    background: var(--orange);
    animation: scrollLine 1.7s infinite;
}

/* =====================================================
   FOOTER
====================================================== */
.footer {
    padding: var(--section-pad) 24px 25px;
    color: white;
    background: #171714;
}

.footer-container {
    max-width: 1380px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.5fr .8fr .8fr .8fr 1.2fr;
    gap: 20px;
}

.footer-brand p {
    max-width: 280px;
    margin-top: 23px;
    color: #949087;
    font-size: 12px;
    line-height: 1.7;
}

.footer-brand .logo-image {
    height: 52px;
}

.footer-socials {
    display: flex;
    gap: 8px;
    margin-top: 23px;
}

.social {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #99948b;
    background: rgba(255, 255, 255, .06);
    transition: var(--transition);
    font-size: 15px;
    text-decoration: none;
}

.social-instagram:hover {
    color: white;
    background: #E4405F;
}

.social-facebook:hover {
    color: white;
    background: #1877F2;
}

.social-linkedin:hover {
    color: white;
    background: #0A66C2;
}

.social:hover {
    transform: translateY(-3px);
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.footer-column h4 {
    margin-bottom: 7px;
    color: white;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.footer-column a {
    width: fit-content;
    color: #88847b;
    font-size: 12px;
    transition: var(--transition);
}

.footer-column a:hover {
    color: var(--yellow);
    transform: translateX(4px);
}

.footer-contact {
    padding: 19px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 20px;
    background: linear-gradient(145deg, #292824, #1e1d1a);
}

.footer-label {
    color: var(--yellow);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;
}

.footer-contact h3 {
    margin-top: 9px;
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: -1px;
}

.footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 12px;
    padding: 11px 15px;
    border-radius: 9px;
    color: var(--black);
    background: var(--orange);
    font-size: 11px;
    font-weight: 800;
    transition: var(--transition);
}

.footer-cta:hover {
    background: var(--yellow);
    box-shadow: 0 10px 25px rgba(254, 111, 1, .20);
}

.footer-cta svg {
    width: 13px;
}

/* ---- Branch locations ---- */
.footer-locations {
    max-width: 1380px;
    margin: 55px auto 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 60px;
}

.footer-location {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.footer-locations .footer-location:nth-child(1) {
    border-right: 1px solid rgba(255, 255, 255, .07);
}

.footer-loc-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: rgba(254, 111, 1, .12);
    border: 1px solid rgba(254, 111, 1, .22);
    color: var(--yellow);
}

.footer-loc-icon svg {
    width: 15px;
    height: 15px;
}

.footer-loc-name {
    display: block;
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 5px;
}

.footer-loc-address {
    font-style: normal;
    color: #88847b;
    font-size: 12px;
    line-height: 1.6;
}

.footer-loc-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 8px;
}

.footer-loc-links a {
    color: #a6a199;
    font-size: 12px;
    transition: var(--transition);
}

.footer-loc-links a:hover {
    color: var(--yellow);
}

.footer-bottom {
    max-width: 1380px;
    margin: 20px auto 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #69655d;
    font-size: 9px;
}

.footer-bottom-links {
    display: flex;
    gap: 20px;
}

.footer-bottom-links a:hover {
    color: var(--yellow);
}

/* =====================================================
   FLOATING CONTACT BUTTONS
   A quiet glass rail down the right edge. The rail itself is
   almost colourless on purpose — the three buttons carry the
   colour, so the orange one reads as the site's own and the
   green one still reads as WhatsApp.

   Hovering a button turns its disc one full revolution on the
   spot, and a pill the same height as the disc slides out from
   behind it to the LEFT, carrying that button's own heading and
   real contact detail. Disc and pill share a right edge and a
   height, and the disc paints on top, so the pill genuinely
   emerges from under the button and the two read as one object.
   The turn lives on the inner disc, never on the link: rotating
   the link would carry the pill around with it. Nothing here
   changes the disc's position, so hovering causes no layout
   shift and no movement of the widget itself.
====================================================== */
.floating-contact {
    position: fixed;
    z-index: 2000;
    right: 4px;
    bottom: 210px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border-radius: 36px;
    background: rgba(255, 255, 255, .74);
    border: 1px solid rgba(23, 23, 20, .07);
    box-shadow:
        0 20px 44px rgba(23, 23, 20, .15),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

/* The link is only a frame; the disc inside it is the button. */
.contact-button {
    position: relative;
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    text-decoration: none;
}

.contact-icon {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    font-size: 21px;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(23, 23, 20, .18);
    transition:
        transform 420ms cubic-bezier(.2, .8, .2, 1),
        box-shadow 260ms ease;
}

.contact-icon i,
.contact-icon svg {
    width: 20px;
    height: 20px;
}

.contact-button.email .contact-icon {
    background: var(--black, #171714);
}

.contact-button.whatsapp .contact-icon {
    background: #25d366;
    color: #0c3319;
}

/* Was a flat browser blue; the site's orange belongs here. */
.contact-button.call .contact-icon {
    background: var(--orange, #fe6f01);
    color: #171714;
}

/* One turn on the spot with a hair of scale — transitioned, not animated, so
   leaving the button eases the disc back the way it came instead of cutting.
   Both are transforms, so the disc never shifts the layout around it. */
.contact-button:hover .contact-icon,
.contact-button:focus-visible .contact-icon,
.contact-button:focus-within .contact-icon {
    transform: rotate(360deg) scale(1.05);
    box-shadow: 0 10px 22px rgba(23, 23, 20, .24);
}

.contact-button:focus-visible {
    outline: 2px solid var(--orange, #fe6f01);
    outline-offset: 4px;
}

/* ---- The pill that slides out from behind the disc ---- */
/* It shares the button's right edge and its full height, and it opens by
   growing leftwards from exactly the disc's width — so at rest the whole pill
   is hidden behind the disc, and hovering slides its leading edge out about
   190px. Both widths are fixed numbers, which is what makes the travel smooth
   and the same length every time; a max-width against auto content would
   finish early and read as a pop.

   The text is pinned by its right edge, a disc-width in from the right, so it
   holds still and is uncovered by the moving edge rather than sliding about. */
.contact-tooltip {
    --pill-w: 240px;

    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    width: 48px;
    height: 100%;
    /* No resting padding on purpose. A border box cannot be narrower than its
       own padding, so padding here would hold the pill wider than the disc and
       it would flash into view the instant the hover began. The clearance for
       the disc is applied on hover, along with the width. */
    padding: 0;
    border-radius: 100px;
    background: #ffffff;
    border: 1px solid rgba(23, 23, 20, .08);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    transition:
        width 420ms cubic-bezier(.22, .78, .2, 1),
        padding 420ms cubic-bezier(.22, .78, .2, 1),
        box-shadow 300ms ease,
        visibility 0s linear 420ms;
}

.contact-button:hover .contact-tooltip,
.contact-button:focus-visible .contact-tooltip,
.contact-button:focus-within .contact-tooltip {
    width: var(--pill-w);
    padding: 0 58px 0 18px;
    box-shadow: 0 10px 26px rgba(23, 23, 20, .16);
    visibility: visible;
    transition:
        width 420ms cubic-bezier(.22, .78, .2, 1),
        padding 420ms cubic-bezier(.22, .78, .2, 1),
        box-shadow 300ms ease,
        visibility 0s;
}

/* The words ride out from behind the disc with the pill; a short fade keeps
   the first frames clean while they are still under it. */
.contact-tooltip-title,
.contact-tooltip-detail {
    opacity: 0;
    transition: opacity 180ms ease;
}

.contact-button:hover .contact-tooltip-title,
.contact-button:hover .contact-tooltip-detail,
.contact-button:focus-visible .contact-tooltip-title,
.contact-button:focus-visible .contact-tooltip-detail,
.contact-button:focus-within .contact-tooltip-title,
.contact-button:focus-within .contact-tooltip-detail {
    opacity: 1;
    transition: opacity 260ms ease 120ms;
}

.contact-tooltip-title {
    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -.2px;
    line-height: 1.2;
    color: var(--black, #171714);
}

.contact-tooltip-detail {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--gray, #706b61);
}

/* No room for the pill on a phone, where the rail sits in the corner — the
   aria-label still carries the same address or number. Keyed to width rather
   than to `hover: none`, which is also what a headless or misreporting
   browser claims, and that would drop the pill on a desktop. */
@media (max-width: 760px) {
    .contact-tooltip {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .contact-button:hover .contact-icon,
    .contact-button:focus-visible .contact-icon {
        transform: none;
    }

    .contact-tooltip,
    .contact-tooltip-title,
    .contact-tooltip-detail,
    .contact-icon {
        transition: none;
    }
}

/* =====================================================
   RESPONSIVE / POINTER-SAFETY HARDENING
====================================================== */
img,
video,
canvas,
svg {
    max-width: 100%;
}

/* Hero background layers are decorative and must never block controls. */
.hero-bg,
.hero-scrim,
.hero-grid-lines {
    pointer-events: none;
}

.hero-inner,
.hero-copy,
.hero-quote {
    position: relative;
    min-width: 0;
}

.hero-inner {
    z-index: 2;
}

a,
button,
input,
textarea,
select {
    touch-action: manipulation;
}

/* =====================================================
   ANIMATIONS
====================================================== */
@keyframes heroIn {
    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes visualIn {
    from {
        opacity: 0;
        transform: translateX(50px) scale(.94);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes floatingCard {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes boxFloat {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -7px;
    }
}

@keyframes pulseDot {

    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(254, 111, 1, .12);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(254, 111, 1, .04);
    }
}

@keyframes glowFloat {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-20px, 20px);
    }
}

@keyframes scrollLine {
    0% {
        transform: translateY(-100%);
    }

    50% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(200%);
    }
}

/* =====================================================
   RESPONSIVE
====================================================== */
@media (max-width: 1150px) {
    .desktop-nav {
        gap: 0;
    }

    .nav-link {
        padding: 9px 7px;
        font-size: 12px;
    }

    .footer-container {
        grid-template-columns: 1.5fr 1fr 1fr;
        row-gap: 45px;
    }

    .footer-contact {
        grid-column: span 2;
    }
}

@media (max-width: 900px) {
    :root {
        --section-pad: 34px;
        --header-gap: 24px;
        --page-lip: 26px;
    }

    .site-header {
        --nav-h: 64px;
    }

    .navbar {
        padding: 0 18px;
    }

    .topbar-inner {
        padding: 0 18px;
    }

    .desktop-nav {
        display: none;
    }

    .header-quote {
        display: inline-flex;
    }

    .mobile-menu-button {
        display: grid;
        place-items: center;
    }

    /* Keep the closed menu out of document flow while retaining animation. */
    .mobile-menu {
        display: block;
    }

    .hero-quote {
        width: min(100%, 620px);
        margin-inline: auto;
    }

    .footer-container {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand,
    .footer-contact {
        grid-column: span 2;
    }
}

@media (max-width: 600px) {
    :root {
        --topbar-h: 34px;
    }

    .site-header {
        --nav-h: 60px;
    }

    .navbar {
        padding: 0 14px;
    }

    /* Compact contact strip: the three items stay on one row and share the
       width evenly, so the labels read without wrapping or overflowing. */
    .topbar-inner {
        padding: 0 10px;
        min-height: var(--topbar-h, 34px);
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 4px;
    }

    .topbar-link {
        flex: 1 1 0;
        justify-content: center;
        gap: 5px;
        min-width: 0;
        font-size: 11px;
    }

    .topbar-link i,
    .topbar-link svg {
        width: 13px;
        height: 13px;
    }

    /* Phone number and email address are already one tap away on the link
       itself — dropping them keeps the strip to a single tidy row. */
    .topbar-value {
        display: none;
    }

    .logo-image {
        height: 36px;
    }

    .footer-brand .logo-image {
        height: 44px;
    }

    /* The menu's inset and height now follow the tokens above, so the
       hardcoded overrides that used to live here are no longer needed. */

    .hero-actions {
        width: 100%;
    }

    .hero-btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    .scroll-indicator {
        display: none;
    }

    .footer {
        padding: var(--section-pad) 20px 20px;
    }

    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 35px 20px;
    }

    .footer-brand,
    .footer-contact {
        grid-column: span 2;
    }

    .footer-locations {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 40px;
        padding-top: 28px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-top: 35px;
    }

    .floating-contact {
        right: 4px;
        bottom: 400px;
        gap: 7px;
        padding: 7px;
    }

    .contact-button {
        width: 44px;
        height: 44px;
    }

    .contact-icon {
        font-size: 19px;
    }
}

@media (max-width: 480px) {
    .footer-container {
        grid-template-columns: 1fr;
    }

    .footer-brand,
    .footer-contact {
        grid-column: auto;
    }

    .footer-bottom-links {
        flex-wrap: wrap;
    }
}