/* Arrow utility */
  .arrow { display: inline-block; width: clamp(22px, 2vw, 33px); height: 2px; background: currentColor; position: relative; }
  .arrow::before { content: ''; position: absolute; right: -1px; top: -4px; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
  /* Fluid container padding */
  .container-fluid { padding-left: clamp(1rem, 2.7vw, 3.5rem); padding-right: clamp(1rem, 2.7vw, 3.5rem); }
  /* Section labels (the dotted-rule "[01] Про компанію" style) */
  .sec-label { display: flex; align-items: center; gap: 0.75rem; font-weight: 500; letter-spacing: 0.122em; text-transform: uppercase; font-size: clamp(0.75rem, 0.879vw, 1.125rem); white-space: nowrap; }
  .sec-label .rule { flex: 1; height: 1px; }
  .sec-label > span:not([class]) { font-weight: 600; } /* label word = SemiBold; [NN] bracket stays Medium */
  /* Marquee scrolling */
  @keyframes mq-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .mq-track { display: inline-flex; align-items: center; gap: clamp(1rem, 3vw, 4rem); white-space: nowrap; animation: mq-scroll 40s linear infinite; will-change: transform; }
  /* Stroke outline text for "це архітектурна подія" */
  .text-stroke {
    -webkit-text-stroke: 2px #fff; color: transparent;
  }
  /* Orange news card banner shape (speech bubble-ish) */
  .news-banner { border-radius: 9999px; }

  /* Services list - interactive hover state.
     Slider sits as a real grid cell between title and description (xl+) and
     stretches to full row height (no top/bottom padding visible). Images are
     always shown and cross-fade on a 2.5s timer; the row's hover state only
     changes background, text colors, and arrow visibility. */
  .svc-list .svc-row {
    --bg-opacity: 0;
    --img-opacity: 0;
    --arrow-filter: none;
    --num-color: rgba(255,255,255,0.4);
    --title-color: rgba(255,255,255,0.9);
    --title-weight: 400;
    --cat-color: rgba(255,255,255,0.55);
    --desc-color: rgba(255,255,255,0.65);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.4s ease;
  }
  .svc-list .svc-row:hover {
    --bg-opacity: 1;
    --img-opacity: 1;
    --arrow-filter: brightness(0);
    --num-color: rgba(35,35,35,0.6);
    --title-color: #232323;
    --title-weight: 600;
    --cat-color: rgba(51,51,51,0.75);
    --desc-color: rgba(35,35,35,0.9);
    box-shadow: 0 0 40px rgba(255,69,1,0.3);
    z-index: 1;
  }
  .svc-row .row-bg-fill { opacity: var(--bg-opacity); transition: opacity 0.4s ease; }
  /* Image cell width as a CSS variable shared by the two flip cards: each card is
     half the cell minus half the gap, so the two tiles fit the cell with a small
     space between them (matches Figma; the orange card shows through the gap). */
  .svc-list { --img-cell-w: clamp(280px, 22vw, 400px); --img-gap: clamp(4px, 0.34vw, 7px); }
  .svc-row .row-imgs {
    position: relative;
    min-height: clamp(140px, 14vw, 200px);
    align-self: stretch;
    opacity: var(--img-opacity);
    transition: opacity 0.4s ease;
  }
  /* Billboard "flip" effect (replaces the old sliding marquee). On hover each card
     rotates around its vertical axis: front faces (images 1 & 2) hold ~2.4s, flip
     ~0.7s, then back faces (images 3 & 4) hold ~2.4s and flip back. The 2nd card
     starts a beat later for a gentle cascade. Perspective sits on the direct parent
     of the cards; the loop runs only while the row is hovered. */
  .svc-row .row-flip {
    display: flex;
    gap: var(--img-gap);
    height: 100%;
    perspective: 1400px;
  }
  .svc-row .row-flip-card {
    position: relative;
    flex: 0 0 calc((var(--img-cell-w) - var(--img-gap)) / 2);
    height: 100%;
    transform-style: preserve-3d;
    will-change: transform;
  }
  .svc-row:hover .row-flip-card { animation: row-flip 6.2s ease-in-out infinite; }
  .svc-row:hover .row-flip-card:nth-child(2) { animation-delay: 0.28s; }
  .svc-row .row-flip-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    background-size: cover;
    background-position: center;
  }
  .svc-row .row-flip-back { transform: rotateY(180deg); }
  @keyframes row-flip {
    0%, 38%  { transform: rotateY(0deg); }
    50%, 88% { transform: rotateY(180deg); }
    100%     { transform: rotateY(360deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .svc-row:hover .row-flip-card { animation: none; }
  }
  .svc-row .row-arrow { filter: var(--arrow-filter); transition: filter 0.3s ease; }

  /* Service category cards (6-up grid). Brand-orange fill slides up from bottom on
     hover; text flips to light, big bg number lightens, arrow flips to white +
     translates up-right. Same CSS-variable pattern as svc-row for consistency. */
  .svc-card {
    isolation: isolate;
    --card-bg-y: 101%;
    --num-color: rgba(51,51,51,0.4);
    --title-color: #333333;
    --cat-color: rgba(51,51,51,0.6);
    --bignum-color: rgba(0,0,0,0.03);
    --arrow-filter: none;
    --arrow-shift-x: 0px;
    --arrow-shift-y: 0px;
  }
  .svc-card:hover {
    --card-bg-y: 0%;
    --num-color: rgba(255,255,255,0.7);
    --title-color: #ffffff;
    --cat-color: rgba(255,255,255,0.85);
    --bignum-color: rgba(255,255,255,0.15);
    --arrow-filter: brightness(0) invert(1);
    --arrow-shift-x: 4px;
    --arrow-shift-y: -4px;
  }
  .svc-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #ff4501;
    z-index: -1;
    transform: translateY(var(--card-bg-y));
    transition: transform 0.55s cubic-bezier(0.4,0,0.2,1);
  }
  .svc-card > div:nth-of-type(1) { color: var(--num-color); transition: color 0.3s ease; }
  .svc-card h3 { color: var(--title-color); transition: color 0.3s ease; }
  .svc-card p { color: var(--cat-color); transition: color 0.3s ease; }
  .svc-card > div:nth-of-type(2) { color: var(--bignum-color); transition: color 0.4s ease; }
  .svc-card > div:nth-of-type(3) {
    filter: var(--arrow-filter);
    transform: translate(var(--arrow-shift-x), var(--arrow-shift-y));
    transition: filter 0.3s ease, transform 0.4s cubic-bezier(0.4,0,0.2,1);
  }

  /* Architecture section bg grid - random cross-fade between two layered images.
     JS picks a random cell on each tick, swaps which layer is active, after pre-loading
     a fresh random image into the inactive layer. Both layers are absolute siblings. */
  .arch-cell { position: relative; overflow: hidden; }
  .arch-cell .arch-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.9s ease;
  }
  .arch-cell .arch-img[data-active="true"] { opacity: 1; }
  /* About page "life" photo strip holds people photos in landscape frames, so
     anchor to the top to keep heads from being cropped. Scoped to the about
     grid (arch-grid + life-grid) so portfolio's building photos stay centered. */
  .arch-grid.life-grid .arch-img { background-position: top center; }
  /* Clients "друзі" cross-fade grid: keep people's heads in frame. */
  [data-clients-grid] .arch-img { background-position: top center; }

  /* News cards: subtle lift, brand-tinted border, image zoom, arrow color flip. */
  .news-card {
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  }
  .news-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255,69,1,0.35);
    box-shadow: 0 24px 48px rgba(0,0,0,0.08);
  }
  .news-card .news-card-img { transition: transform 0.7s ease; transform-origin: center; }
  .news-card:hover .news-card-img { transform: scale(1.05); }
  .news-card .news-arrow { transition: transform 0.4s ease, filter 0.4s ease; }
  .news-card:hover .news-arrow {
    transform: translate(4px, -4px);
    filter: invert(40%) sepia(89%) saturate(2820%) hue-rotate(0deg) brightness(105%) contrast(105%);
  }

  /* Sticky-pin transition (UNStudio-style, simplified).
     Wrap two sections in .stack-pin. Only the FIRST is sticky-pinned at top:0;
     the second flows naturally and slides up over the first because DOM order
     puts it later in the stack. JS scales + fades the pinned section based on
     the next sibling's top position. No padding-bottom hack - wrapper height
     = first.height + second.height, so no empty scroll-zone at the end. */
  .stack-pin { position: relative; }
  .stack-pin > .stack-pinned {
    position: sticky;
    top: 0;
    z-index: 0;
    transform-origin: center center;
    will-change: transform, opacity;
  }
  /* The section right after .stack-pinned must be in a higher stacking context
     than sticky's z-index:auto stacking context, otherwise sticky would render
     on top during its pinned phase. */
  .stack-pin > .stack-pinned + * {
    position: relative;
    z-index: 1;
  }

  /* FAQ accordion - `name="faq"` makes them mutually exclusive; `details[open]`
     drives open state. Hover (desktop) and open highlight the whole item with the
     brand orange + white text, per Figma 560:550. */
  .faq-item { border-top: 1px solid rgba(255,255,255,0.12); transition: background-color 0.25s ease; }
  .faq .faq-item:first-child { border-top: 0; }
  .faq-item .faq-summary { padding-left: clamp(0.75rem,1.5vw,1.5rem); padding-right: clamp(0.75rem,1.5vw,1.5rem); transition: color 0.25s ease; }
  .faq-item .faq-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s cubic-bezier(0.4,0,0.2,1);
  }
  .faq-item[open] .faq-content { grid-template-rows: 1fr; }
  .faq-item .faq-content > div { overflow: hidden; min-height: 0; transition: color 0.25s ease; }
  .faq-item .faq-toggle {
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease, filter 0.3s ease;
  }
  .faq-item[open] .faq-toggle { transform: rotate(45deg); opacity: 1; }
  .faq-item .faq-summary > span:nth-child(2) { transition: color 0.3s ease; }
  /* Orange highlight on hover + open */
  .faq-item:hover, .faq-item[open] { background-color: #ff4501; }
  .faq-item:hover .faq-summary > span:nth-child(1), .faq-item[open] .faq-summary > span:nth-child(1) { color: rgba(255,255,255,0.75); }
  .faq-item:hover .faq-summary > span:nth-child(2), .faq-item[open] .faq-summary > span:nth-child(2) { color: #fff; }
  .faq-item:hover .faq-toggle, .faq-item[open] .faq-toggle { opacity: 1; filter: brightness(0) invert(1); }
  .faq-item:hover .faq-content > div, .faq-item[open] .faq-content > div { color: #fff; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .svc-row .row-num { color: var(--num-color); transition: color 0.3s ease; }
  .svc-row .row-title { color: var(--title-color); font-weight: var(--title-weight); transition: color 0.3s ease, font-weight 0.3s ease; }
  .svc-row .row-cat { color: var(--cat-color); transition: color 0.3s ease; }
  .svc-row .row-desc {
    color: var(--desc-color);
    transition: color 0.3s ease;
  }

  /* Project gallery - autoplay marquee with hover-only active state */
  /* Carousel is a native horizontal scroll (finger-swipe friendly); JS in
     _partials.js drives the gentle autoplay and pauses on interaction. */
  .proj-marquee { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
  .proj-marquee::-webkit-scrollbar { display: none; }
  .proj-track {
    display: flex;
    gap: 0.5rem;
    width: max-content;
  }
  .proj-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s ease;
  }
  .proj-card .proj-dim {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.55);
    transition: opacity 0.4s ease;
  }
  .proj-card .proj-stripe {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 0;
    background: rgba(255,69,1,0.7);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .proj-card:hover { transform: scale(1.03); }
  .proj-card:hover .proj-dim { opacity: 0; }
  .proj-card:hover .proj-stripe { width: 53px; }

  /* Lightbox - fullscreen image viewer */
  .lb { position: fixed; inset: 0; z-index: 100; display: none; background: rgba(0,0,0,0.92); backdrop-filter: blur(8px); }
  .lb[data-open="true"] { display: flex; align-items: center; justify-content: center; animation: lb-fade 0.3s ease forwards; }
  @keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
  .lb-img { max-width: 90vw; max-height: 85vh; object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,0.6); animation: lb-zoom 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
  @keyframes lb-zoom { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
  /* Dark fill so the arrows stay visible over bright images. */
  .lb-btn { position: absolute; z-index: 2; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.25); color: #fff; cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease; user-select: none; }
  .lb-btn:hover { background: rgba(255,69,1,0.9); border-color: rgba(255,69,1,0.9); }
  .lb-close { top: 24px; right: 24px; }
  .lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
  .lb-next { right: 24px; top: 50%; transform: translateY(-50%); }
  .lb-counter { position: absolute; z-index: 2; top: 32px; left: 32px; color: rgba(255,255,255,0.7); font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; }
  /* Loading spinner — shown until the image decodes (prevents the "stuck on black" feel). */
  .lb[data-loading="true"]::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 3px solid rgba(255,255,255,0.25); border-top-color: #ff4501; border-radius: 50%; animation: lb-spin 0.8s linear infinite; }
  @keyframes lb-spin { to { transform: rotate(360deg); } }
  /* On phones, drop the prev/next to the bottom corners so they never hide behind the image. */
  @media (max-width: 640px) {
    .lb-btn { width: 48px; height: 48px; }
    .lb-close { top: 16px; right: 16px; }
    .lb-prev { left: 20px; right: auto; top: auto; bottom: 24px; transform: none; }
    .lb-next { right: 20px; left: auto; top: auto; bottom: 24px; transform: none; }
  }

  /* Video lightbox - plays a video in a fullscreen overlay (shares .lb-btn/.lb-close). */
  .vlb { position: fixed; inset: 0; z-index: 100; display: none; background: rgba(0,0,0,0.92); backdrop-filter: blur(8px); }
  .vlb[data-open="true"] { display: flex; align-items: center; justify-content: center; animation: lb-fade 0.3s ease forwards; }
  .vlb-frame { width: min(92vw, 1280px); aspect-ratio: 16 / 9; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,0.6); animation: lb-zoom 0.4s cubic-bezier(0.4,0,0.2,1) forwards; }
  .vlb-frame video { width: 100%; height: 100%; display: block; }

  /* === Fullscreen site search overlay ===
     Triggered by the ico-search button in <site-header>. Layered above everything
     (z-index 110 > scroll-top button z-index 90 > offcanvas z-index 90 but search
     should also win over the lightbox at z-index 100 if both ever stack). Light
     surface to match the site's white header rather than a dark image viewer. */
  .site-search {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .site-search[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
  }
  .search-close {
    position: absolute;
    top: clamp(16px, 2.5vw, 32px);
    right: clamp(16px, 2.5vw, 32px);
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,0,0,0.12);
    background: transparent;
    color: #333;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
  }
  .search-close:hover { background: #ff4501; border-color: #ff4501; color: #fff; transform: rotate(90deg); }
  .search-inner {
    width: min(960px, 92vw);
    margin: auto;
    padding: clamp(72px, 10vh, 120px) 0 clamp(40px, 6vh, 80px);
    transform: translateY(16px);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s, opacity 0.4s ease 0.05s;
  }
  .site-search[data-open="true"] .search-inner { transform: translateY(0); opacity: 1; }
  .search-eyebrow {
    margin: 0 0 clamp(16px, 2vh, 28px);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.5);
  }
  .search-form {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.5vw, 20px);
    padding-bottom: clamp(14px, 2vh, 22px);
    border-bottom: 2px solid rgba(0,0,0,0.12);
    transition: border-color 0.25s ease;
  }
  .search-form:focus-within { border-bottom-color: #ff4501; }
  .search-icon { color: rgba(0,0,0,0.45); flex-shrink: 0; transition: color 0.25s ease; }
  .search-form:focus-within .search-icon { color: #ff4501; }
  .search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #131313;
    font-size: clamp(1.4rem, 3.2vw, 2.4rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    padding: 0.25rem 0;
  }
  .search-input::placeholder { color: rgba(0,0,0,0.3); }
  /* Hide the native search clear "x" so it doesn't fight the custom UI. */
  .search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
  .search-submit {
    flex-shrink: 0;
    padding: 0.85rem clamp(1.25rem, 2.5vw, 2rem);
    background: #ff4501;
    color: #fff;
    border: 0;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
  }
  .search-submit:hover { background: #d93a00; transform: translateX(2px); }
  .search-status {
    margin: clamp(14px, 2vh, 22px) 0 0;
    min-height: 1.25em;
    font-size: 0.95rem;
    color: rgba(0,0,0,0.6);
  }
  .search-popular {
    margin-top: clamp(28px, 5vh, 56px);
  }
  .search-popular-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.45);
    margin-bottom: 1rem;
  }
  .search-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.6rem;
  }
  .search-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1rem;
    border: 1px solid rgba(0,0,0,0.12);
    background: #fff;
    color: #333;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
  }
  .search-chip:hover { background: #ff4501; border-color: #ff4501; color: #fff; transform: translateY(-2px); }
  @media (max-width: 640px) {
    .search-submit { padding: 0.75rem 1rem; font-size: 0.75rem; letter-spacing: 0.12em; }
    .search-close { width: 44px; height: 44px; }
  }

  /* Scroll-driven text reveal - gradient wipe via background-position scrub.
     A 200%-wide linear gradient with a hard 50% color stop is clipped to the text
     glyphs; GSAP scrubs background-position from 100% to 0 as the element scrolls
     into view. box-decoration-break: slice keeps each wrapped line correct.
     Override --reveal-from / --reveal-to per element for custom palettes. */
  .reveal-text {
    /* Reveal INTO the section's ink colour (white on dark, #333 on light) so the
       text reveals grey→white on dark sections instead of fading to grey. The
       --reveal-ink vars are set by the section bg class below; inline --reveal-to
       still overrides per element. */
    --reveal-from: var(--reveal-ink-from, rgba(255, 255, 255, 0.25));
    --reveal-to: var(--reveal-ink, #ffffff);
    display: inline;
    background-image: linear-gradient(to right, var(--reveal-to) 50%, var(--reveal-from) 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    -webkit-box-decoration-break: slice;
            box-decoration-break: slice;
    /* Hint to the browser that bg-position will animate so the gradient text
       gets composited onto its own GPU layer - without this, every scroll
       tick repaints the CPU layer and the text appears to flicker. */
    will-change: background-position;
    transform: translateZ(0);
    /* translateZ(0)/will-change promote this span to its own GPU layer sized to
       the (tight) line-box, which clips glyph descenders — e.g. the legs of «Д».
       A little bottom padding grows the layer so descenders paint in full.
       Vertical padding on an inline box doesn't affect line flow. */
    padding-bottom: 0.12em;
  }
  /* Light-background variant: follows the section ink (dark #333 on light bg,
     white on dark bg) so it reveals grey→white on dark sections too. */
  .reveal-text-light {
    --reveal-from: var(--reveal-ink-from, #cccccc);
    --reveal-to: var(--reveal-ink, #333333);
  }
  /* Section ink colour for reveal-text: white on dark backgrounds, #333 on light. */
  .bg-dark { --reveal-ink: #ffffff; --reveal-ink-from: rgba(255, 255, 255, 0.25); }
  .bg-white { --reveal-ink: #333333; --reveal-ink-from: #cccccc; }
  /* Brand-color variant: orange text revealed from faded brand. */
  .reveal-text-brand {
    --reveal-from: rgba(255, 69, 1, 0.3);
    --reveal-to: #ff4501;
  }
  /* Static (no-animation) state: the first content section of every page is
     marked .is-static by _partials.js so its heading shows the final colour
     immediately (no scroll reveal) and gallery cards skip the fade-up. */
  .reveal-text.is-static {
    background: none;
    color: inherit;
    -webkit-text-fill-color: currentColor;
            text-fill-color: currentColor;
  }
  /* Brand part stays orange regardless of the section's text colour. */
  .reveal-text-brand.is-static {
    color: #ff4501;
    -webkit-text-fill-color: #ff4501;
            text-fill-color: #ff4501;
  }
  .fade-up.is-static {
    opacity: 1;
    transform: none;
  }
  /* Brand name «АРМА ЕКСПЕРТ» (auto-applied in body content by the mu-plugin).
     АРМА is always orange; ЕКСПЕРТ + guillemets inherit the text colour
     (#333 on light sections, white on dark). */
  .arma-co { font-weight: 600; }
  .arma-co__a { color: #ff4400; }

  /* ---- Contact Form 7 lead form — styled to match the ARMA inputs. The block
     wrapper carries .arma-cf7 + a light/dark modifier; CF7 outputs the fields. */
  .arma-cf7 .wpcf7-form { display: flex; flex-direction: column; gap: clamp(1.5rem, 2.2vw, 2.25rem); }
  .arma-cf7 .arma-cf7-field { display: block; }
  .arma-cf7 .arma-cf7-label { display: block; font-size: clamp(0.75rem, 0.68vw, 0.875rem); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.75rem; }
  .arma-cf7 .wpcf7-form-control-wrap { display: block; }
  .arma-cf7 input.wpcf7-form-control { width: 100%; background: transparent; border: 0; border-bottom: 1px solid; border-radius: 0; padding: 0.5rem 0 0.85rem; font-size: clamp(1.0625rem, 0.9vw, 1.25rem); line-height: 1.2; outline: none; transition: border-color .2s; }
  .arma-cf7 input.wpcf7-form-control:focus { border-bottom-color: #ff4400; }
  .arma-cf7 .arma-cf7-actions { margin-top: 0.25rem; }
  .arma-cf7 input.wpcf7-submit { width: 100%; height: clamp(64px, 5vw, 80px); background: #ff4400; color: #fff; border: 0; border-radius: 0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.11em; font-size: clamp(0.8125rem, 0.8vw, 1rem); cursor: pointer; transition: filter .2s; }
  .arma-cf7 input.wpcf7-submit:hover { filter: brightness(1.1); }
  .arma-cf7 .arma-cf7-consent { font-size: clamp(0.75rem, 0.68vw, 0.8125rem); line-height: 1.55; margin: 0.25rem 0 0; }
  /* Light context (about / cases) */
  .arma-cf7--light .arma-cf7-label { color: rgba(51,51,51,.6); }
  .arma-cf7--light input.wpcf7-form-control { color: #333; border-bottom-color: rgba(51,51,51,.15); }
  .arma-cf7--light input.wpcf7-form-control::placeholder { color: rgba(51,51,51,.4); }
  .arma-cf7--light .arma-cf7-consent { color: rgba(51,51,51,.55); }
  /* Dark context (home / contacts) */
  .arma-cf7--dark .arma-cf7-label { color: rgba(255,255,255,.4); }
  .arma-cf7--dark input.wpcf7-form-control { color: #fff; border-bottom-color: rgba(255,255,255,.6); }
  .arma-cf7--dark input.wpcf7-form-control::placeholder { color: rgba(255,255,255,.7); }
  .arma-cf7--dark .arma-cf7-consent { color: rgba(255,255,255,.8); }
  /* Validation + response — on-brand instead of CF7's red defaults. */
  .arma-cf7 .wpcf7-not-valid-tip { color: #ff4400; font-size: 0.8125rem; margin-top: 0.4rem; }
  .arma-cf7 input.wpcf7-not-valid { border-bottom-color: #ff4400 !important; }
  .arma-cf7 .wpcf7-response-output { margin: 1rem 0 0 !important; padding: 0.7rem 1rem !important; border: 1px solid currentColor !important; border-radius: 0; font-size: 0.875rem; }
  .arma-cf7--light .wpcf7-response-output { color: #333; }
  .arma-cf7--dark .wpcf7-response-output { color: #fff; }
  /* Success is shown via the thank-you modal, so hide CF7's inline ok message
     (CF7 6.x marks success with the .sent class on the form). */
  .arma-cf7 form.sent .wpcf7-response-output { display: none !important; }
  .arma-cf7 .wpcf7-spinner { margin: 0 0 0 10px; }

  /* Thank-you modal (CF7 success) — Figma 560:610. Hidden until _partials.js adds .is-open. */
  .thankyou-modal { display: none; position: fixed; inset: 0; z-index: 200; align-items: center; justify-content: center; padding: clamp(0.75rem,2vh,1.5rem); }
  .thankyou-modal.is-open { display: flex; }
  body.modal-open { overflow: hidden; }
  .thankyou-backdrop { position: fixed; inset: 0; background: rgba(5,5,5,.75); }
  /* Vertical metrics use vh so the whole dialog scales down to fit short screens;
     max-height + internal scroll is the safety net. */
  .thankyou-dialog { position: relative; z-index: 1; width: 100%; max-width: 1280px; max-height: calc(100dvh - clamp(1.5rem,4vh,3rem)); overflow-y: auto; background: #fff; box-shadow: 0 40px 120px -20px rgba(51,51,51,.35); }
  .thankyou-topbar { display: flex; align-items: center; gap: clamp(1rem,2vw,2rem); padding: clamp(1.25rem,3vh,2.5rem) clamp(1.75rem,3.5vw,3rem) 0; }
  .thankyou-eyebrow-top { font-size: clamp(0.75rem,0.7vw,0.875rem); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: #333; white-space: nowrap; }
  .thankyou-rule { flex: 1; height: 1px; background: #e7e7e7; }
  .thankyou-close { position: absolute; top: clamp(1.25rem,2.5vh,2.2rem); right: clamp(1.5rem,3.9vw,3.3rem); width: clamp(44px,7vh,64px); height: clamp(44px,7vh,64px); border: 1px solid #e7e7e7; background: #fff; color: #333; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s, color .2s; }
  .thankyou-close:hover { border-color: #ff4400; color: #ff4400; }
  .thankyou-close svg { width: clamp(16px,2.2vh,22px); height: clamp(16px,2.2vh,22px); }
  .thankyou-body { text-align: center; padding: clamp(1.25rem,3.5vh,3.5rem) clamp(1.5rem,4vw,4rem); }
  .thankyou-check { width: clamp(64px,11vh,100px); height: clamp(64px,11vh,100px); background: #ff4400; display: flex; align-items: center; justify-content: center; margin: 0 auto clamp(1rem,2.5vh,2rem); }
  .thankyou-check svg { width: 50%; height: 50%; }
  .thankyou-eyebrow { font-size: clamp(0.75rem,0.7vw,0.875rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(51,51,51,.5); margin: 0 0 clamp(0.75rem,1.6vh,1.25rem); }
  .thankyou-title { font-weight: 600; text-transform: uppercase; line-height: 0.86; letter-spacing: -0.01em; font-size: clamp(2.25rem,8vh,5.5rem); margin: 0; }
  .thankyou-title-dark { display: block; color: #333; }
  .thankyou-title-brand { display: block; color: #ff4400; }
  .thankyou-text { max-width: 560px; margin: clamp(1rem,2.4vh,2rem) auto 0; font-size: clamp(0.95rem,0.9vw,1.0625rem); line-height: 1.55; color: rgba(51,51,51,.7); }
  .thankyou-text b { color: #ff4400; font-weight: 600; }
  .thankyou-actions { display: grid; grid-template-columns: 1fr; padding: 0 clamp(1.5rem,5vw,5rem) clamp(1.25rem,3.5vh,3.5rem); }
  .thankyou-btn { height: clamp(56px,9vh,78px); display: inline-flex; align-items: center; justify-content: center; gap: clamp(0.75rem,1.2vw,1.25rem); font-size: clamp(0.8125rem,0.8vw,1rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.11em; transition: filter .2s, background-color .2s, border-color .2s, color .2s; }
  .thankyou-btn--brand { background: #ff4400; color: #fff; }
  .thankyou-btn--brand:hover { filter: brightness(1.1); }
  .thankyou-btn--dark { background: #333; color: #fff; }
  .thankyou-btn--dark:hover { background: #1a1a1a; }
  .thankyou-btn--ghost { background: #fff; border: 1px solid rgba(51,51,51,.2); color: rgba(51,51,51,.7); }
  .thankyou-btn--ghost:hover { border-color: #ff4400; color: #ff4400; }
  @media (min-width: 640px) { .thankyou-actions { grid-template-columns: repeat(3, 1fr); } }

  /* «Реквізити» (legal-details): align a multi-line «Адреса:» so the value, its
     wrapped lines and the continuation rows share one column while the label hangs
     left. em-based so it tracks the «Адреса: » label width at any font size. */
  @media (min-width: 1024px) {
    .legal-row-cont { padding-left: 4.2em; }
    .legal-row-hang { padding-left: 4.2em; text-indent: -4.2em; }
  }

  /* Contact map scroll guard — captures wheel/drag so the embedded map can't
     hijack page scroll (zoom). Click sets .is-active to let the map through;
     _partials.js re-locks it on pointer leave. */
  .map-guard { position: absolute; inset: 0; cursor: pointer; }
  .map-guard.is-active { pointer-events: none; }

  /* Scroll-to-top button - fades in after scrolling, fades out near the top. */
  .scroll-top {
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease, filter 0.2s ease;
  }
  .scroll-top[data-visible="true"] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .scroll-top svg { transition: transform 0.3s ease; }
  .scroll-top:hover svg { transform: translateY(-2px); }

  /* Rating card glow: subtle radial orange aura behind the Google rating block
     on dark backgrounds. Rendered via a ::before pseudo-element so the card's
     own border/background stays crisp. */
  .rating-card { isolation: isolate; }
  .rating-card::before {
    content: '';
    position: absolute;
    inset: -20% -10%;
    background: radial-gradient(closest-side, rgba(255,69,1,0.32), rgba(255,69,1,0) 70%);
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }
  .rating-card:hover::before { opacity: 0.6; }
  /* Stack scroll-top above the messenger helper trigger */
  .scroll-top { bottom: calc(clamp(1rem, 1vw + 0.7rem, 2rem) + 72px); }
  @media (min-width: 1024px) {
    .scroll-top { bottom: calc(clamp(1rem, 1vw + 0.7rem, 2rem) + 80px); }
  }
  /* Hide the scroll-top while the messenger helper is open so the expanding
     links don't overlap it. Uses :has() to react to the helper's data-open. */
  body:has(.msg-helper[data-open="true"]) .scroll-top {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(8px) !important;
  }

  /* Once the footer scrolls into view, hide the floating sticky buttons
     (scroll-top + messenger helper) so they don't overlap footer content.
     Toggled via body[data-footer-visible] by an IntersectionObserver. */
  body[data-footer-visible="true"] .scroll-top {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
  }
  body[data-footer-visible="true"] .msg-helper {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
  }

  /* === Floating messenger helper ===
     Round chat trigger at bottom-right. On open, three round messenger circles
     fade up above it (each branded: Viber purple, Telegram blue, WhatsApp green).
     Tooltip "Залишити повідомлення менеджеру" appears on hover when collapsed. */
  .msg-helper {
    position: fixed;
    right: clamp(1rem, 1vw + 0.7rem, 2rem);
    bottom: clamp(1rem, 1vw + 0.7rem, 2rem);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    /* Container itself is click-through so it doesn't block other fixed elements
       (like scroll-top) sitting in the same screen area. Children opt back in. */
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    /* Hidden until the hero has been scrolled a bit - revealed via data-visible
       by a scroll handler, matching the scroll-top reveal. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
  }
  .msg-helper[data-visible="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .msg-trigger { pointer-events: auto; }
  .msg-link {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
    opacity: 0;
    transform: translateY(12px) scale(0.85);
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1),
                transform 0.35s cubic-bezier(0.4,0,0.2,1),
                box-shadow 0.25s ease;
    cursor: pointer;
  }
  .msg-helper[data-open="true"] .msg-link {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  .msg-helper[data-open="true"] .msg-link:nth-child(1) { transition-delay: 0.18s; }
  .msg-helper[data-open="true"] .msg-link:nth-child(2) { transition-delay: 0.10s; }
  .msg-helper[data-open="true"] .msg-link:nth-child(3) { transition-delay: 0.02s; }
  .msg-link:hover {
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,0.25);
  }
  .msg-link img { width: 22px; height: 22px; filter: brightness(0) invert(1); }
  .msg-viber { background: #7360f2; }
  .msg-telegram { background: #0088cc; }
  .msg-whatsapp { background: #25d366; }

  .msg-trigger {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #ff4501;
    color: #ffffff;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(255,69,1,0.40);
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease;
  }
  .msg-trigger:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255,69,1,0.50);
  }
  .msg-trigger .msg-icon-chat,
  .msg-trigger .msg-icon-close {
    position: absolute;
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease;
  }
  .msg-trigger .msg-icon-close { opacity: 0; transform: rotate(-90deg) scale(0.6); }
  .msg-helper[data-open="true"] .msg-trigger .msg-icon-chat {
    opacity: 0;
    transform: rotate(90deg) scale(0.6);
  }
  .msg-helper[data-open="true"] .msg-trigger .msg-icon-close {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }

  .msg-tip {
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    transform: translate(8px, -50%);
    background: #131313;
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 0.78rem;
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.4,0,0.2,1);
  }
  .msg-tip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #131313;
  }
  .msg-trigger:hover .msg-tip {
    opacity: 1;
    transform: translate(0, -50%);
  }
  .msg-helper[data-open="true"] .msg-tip { opacity: 0; }

  /* All custom interactive utilities get pointer cursor regardless of tag.
     Many <a> elements in this file lack href, so browser default cursor is text. */
  .btn,
  .icon-btn,
  .svc-row,
  .news-card,
  .scroll-top,
  .nav-dropdown-trigger,
  .offcanvas-link,
  .offcanvas-close,
  .offcanvas-back,
  .lb-btn,
  a[class*="btn-"] { cursor: pointer; }

  /* === Button hover system ===
     Each .btn has a ::before that slides in from the left on hover. Variant classes
     supply the fill color. Inner .arrow elements translate for a "pull" effect. */
  .btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: color 0.4s cubic-bezier(0.4,0,0.2,1), border-color 0.4s cubic-bezier(0.4,0,0.2,1);
  }
  .btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: translateX(-101%);
    transition: transform 0.55s cubic-bezier(0.65,0,0.35,1);
  }
  .btn:hover::before { transform: translateX(0); }
  .btn .arrow { transition: transform 0.45s cubic-bezier(0.65,0,0.35,1); }
  .btn:hover .arrow { transform: translateX(10px); }
  .btn-brand::before { background: rgba(255,255,255,0.14); }
  .btn-outline-light::before { background: #ff4501; }
  .btn-outline-light:hover { border-color: #ff4501; }
  .btn-outline-dark::before { background: #ff4501; }
  .btn-outline-dark:hover { color: #fff; border-color: #ff4501; }
  .btn-dark::before { background: rgba(255,255,255,0.14); }

  /* Square icon link - fills brand on hover, lifts 2px, inverts SVG to white */
  .icon-btn {
    position: relative;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  }
  .icon-btn:hover {
    background-color: #ff4501;
    border-color: #ff4501;
    transform: translateY(-2px);
  }
  .icon-btn img { transition: filter 0.3s ease; }
  .icon-btn:hover img { filter: brightness(0) invert(1); }

  /* Life grid: dark overlay on every photo by default; clear on hover.
     Combined with .arch-cell xfade pattern - the overlay lives on the cell
     wrapper so it sits above both layered .arch-img backgrounds. */
  .life-grid .arch-cell { cursor: pointer; }
  .life-grid .arch-cell::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    transition: background 0.45s ease;
    pointer-events: none;
    z-index: 1;
  }
  .life-grid .arch-cell:hover::after { background: rgba(0, 0, 0, 0); }

  /* Swiper: paired arrows visually dim when at the corresponding edge. */
  [data-swiper-prev].is-disabled,
  [data-swiper-next].is-disabled {
    opacity: 0.35;
    pointer-events: none;
  }
  /* Swiper container should clip overflow but allow vertical visibility for shadows. */
  .site-swiper { overflow: hidden; }
  .site-swiper .swiper-slide { height: auto; }

  /* === Nav link with bottom-border underline ===
     Padding lives on the link (not the nav) so the link's bottom edge sits exactly
     on the nav's border-b line; ::after at bottom: -1px then overlays the gray rule. */
  .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    cursor: pointer;
    transition: color 0.25s ease;
  }
  @media (min-width: 1024px) {
    .nav-link { padding-top: clamp(1.25rem, 2vw, 2.3rem); padding-bottom: clamp(1.25rem, 2vw, 2.3rem); }
  }
  .nav-link:not([data-active="true"]):hover { color: #ff4501; }
  .nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: #ff4501;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.65,0,0.35,1);
  }
  .nav-link:hover::after,
  .nav-link[data-active="true"]::after { transform: scaleX(1); }
  .nav-link[data-active="true"] {
    color: #ff4501;
    font-weight: 600;
  }

  /* === Desktop nav dropdown ===
     Wraps a trigger button + panel. Panel pops down anchored to the nav row's
     bottom border. Hover or click toggles open. Mirrors offcanvas item styling. */
  .nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: stretch;
  }
  .nav-dropdown-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    transition: color 0.25s ease;
  }
  @media (min-width: 1024px) {
    .nav-dropdown-trigger { padding-top: clamp(1.25rem, 2vw, 2.3rem); padding-bottom: clamp(1.25rem, 2vw, 2.3rem); }
  }
  .nav-dropdown-trigger::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: #ff4501;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.65,0,0.35,1);
  }
  .nav-dropdown:hover .nav-dropdown-trigger,
  .nav-dropdown[data-open="true"] .nav-dropdown-trigger { color: #ff4501; }
  .nav-dropdown:hover .nav-dropdown-trigger::after,
  .nav-dropdown[data-open="true"] .nav-dropdown-trigger::after { transform: scaleX(1); }
  .nav-chev { transition: transform 0.3s ease; flex-shrink: 0; }
  .nav-dropdown:hover .nav-chev,
  .nav-dropdown[data-open="true"] .nav-chev { transform: rotate(180deg); }

  /* Desktop mega-menu - exact match for Figma frame 141:266 'Послуги-МЕНЮ'.
     Full-viewport-width white panel anchored to nav row bottom, rendering 3
     columns (Послуги / Послуги у цьому розділі / Контакти) and a featured
     project bar at the bottom. */
  .nav-dropdown {
    position: static; /* anchor positioned by header instead of trigger */
  }
  .nav-dropdown-panel {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: #ffffff;
    color: #232323;
    /* The header nav sets uppercase + letter-spacing; the panel content is
       sentence-case in Figma, so reset both here (eyebrows/labels re-apply their own). */
    text-transform: none;
    letter-spacing: normal;
    z-index: 50;
    padding: 0;
    border-top: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 32px 64px rgba(0,0,0,0.10);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1),
                transform 0.35s cubic-bezier(0.4,0,0.2,1),
                visibility 0s linear 0.35s;
  }
  .nav-dropdown:hover .nav-dropdown-panel,
  .nav-dropdown[data-open="true"] .nav-dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1),
                transform 0.35s cubic-bezier(0.4,0,0.2,1),
                visibility 0s linear 0s;
  }

  /* 3-col grid: categories | sub-services | contacts. Figma column widths
     (out of 1953px frame): col1 ≈ 472px, col2 ≈ 494px, col3 ≈ 315px,
     gaps 120px between col1↔col2, ~237px to col3. */
  /* Figma 141:266 column geometry (out of 1638px content span): col1 472,
     gap 120, col2 494, gap 237, col3 315 - contacts is pushed right with a
     wide gap. Empty tracks 2 & 4 reproduce those uneven gaps proportionally. */
  .nav-dd-grid {
    display: grid;
    grid-template-columns: minmax(0,472fr) minmax(0,120fr) minmax(0,494fr) minmax(0,237fr) minmax(0,315fr);
    gap: 0;
    padding: 48px clamp(2rem, 4vw, 4.5rem) 44px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }
  .nav-dd-grid > .nav-dd-col:nth-child(1) { grid-column: 1; }
  .nav-dd-grid > .nav-dd-col:nth-child(2) { grid-column: 3; }
  .nav-dd-grid > .nav-dd-col:nth-child(3) { grid-column: 5; }
  /* Figma draws a left rule only on col1 (categories) + col3 (contacts);
     the sub-services column has no divider - just the gap track to its left. */
  .nav-dd-col {
    min-width: 0;
    border-left: 0.8px solid rgba(51,51,51,0.15);
    padding-left: clamp(1.5rem, 2.6vw, 2.55rem);
    padding-right: clamp(1rem, 2vw, 2rem);
  }
  .nav-dd-col--sub {
    border-left: 0;
    padding-left: 0;
  }

  /* Section eyebrow above each column - brand orange, letter-spaced (Figma).
     The sub-services column uses an empty one purely to align its list.
     Figma has no rule beneath the eyebrows - the label sits straight above
     the list with a 24px gap. */
  .nav-dd-eyebrow {
    font-family: 'Fixel Display', sans-serif;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ff4501;
    font-weight: 600;
    min-height: 14px;
    margin-bottom: 24px;
  }

  /* Column 1 - service categories. Default sentence-case; the active item (and
     the hovered item) turns brand orange + uppercase + bold, matching Figma. */
  .nav-dd-cats { display: flex; flex-direction: column; }
  .nav-dd-cats a {
    display: grid;
    grid-template-columns: 1fr 18px;
    gap: 12px;
    align-items: center;
    padding: 13px 0;
    color: #333333;
    font-family: 'Fixel Display', sans-serif;
    font-size: 18px;
    line-height: 1.2;
    transition: color 0.3s ease;
  }
  .nav-dd-cats a[data-active="true"],
  .nav-dd-cats a:hover {
    color: #ff4501;
    text-transform: uppercase;
    font-weight: 600;
  }
  /* While hovering the list, the default-active row reverts unless it is itself hovered. */
  .nav-dd-cats:hover a[data-active="true"]:not(:hover) {
    color: #232323;
    text-transform: none;
    font-weight: 400;
  }
  .nav-dd-arrow {
    color: rgba(35,35,35,0.4);
    transition: color 0.3s ease, transform 0.4s cubic-bezier(0.4,0,0.2,1);
  }
  .nav-dd-cats a[data-active="true"] .nav-dd-arrow,
  .nav-dd-cats a:hover .nav-dd-arrow {
    color: #ff4501;
    transform: rotate(90deg);
  }
  .nav-dd-cats:hover a[data-active="true"]:not(:hover) .nav-dd-arrow {
    color: rgba(35,35,35,0.4);
    transform: none;
  }

  /* Column 2 - sub-services. */
  .nav-dd-subs { display: flex; flex-direction: column; }
  .nav-dd-subs a {
    padding: 14px 0;
    color: #333333;
    font-family: 'Fixel Display', sans-serif;
    font-size: 18px;
    line-height: 1.25;
    transition: color 0.25s ease;
  }
  .nav-dd-subs a:hover { color: #ff4501; }

  /* Column 3 - contacts. A short brand accent floats in the gap to the left
     of the contacts divider (Figma: x1350, ~170px left of the col3 edge at
     x1520). -54% of the column width reproduces that offset and scales with
     the fluid grid. Vertically it sits beside the messengers block. */
  .nav-dd-col--contacts { position: relative; }
  .nav-dd-col--contacts::before {
    content: '';
    position: absolute;
    left: -54%;
    top: 66%;
    width: 2px;
    height: 86px;
    background: #ff4501;
  }
  .nav-dd-info { margin-bottom: 28px; }
  .nav-dd-info-label {
    display: block;
    font-family: 'Fixel Display', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    color: rgba(51,51,51,0.6);
    margin-bottom: 9px;
  }
  .nav-dd-info > a,
  .nav-dd-info > span:not(.nav-dd-info-label) {
    display: block;
    font-family: 'Fixel Display', sans-serif;
    font-size: 22px;
    line-height: 1.1;
    color: #333333;
    font-weight: 600;
  }
  .nav-dd-info > a:hover { color: #ff4501; }
  .nav-dd-msg { display: flex; gap: 9px; }
  .nav-dd-msg a {
    width: 60px; height: 60px;
    border: 1px solid rgba(10,10,10,0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, border-color 0.25s ease;
  }
  .nav-dd-msg a:hover {
    background: rgba(255,69,1,0.08);
    border-color: #ff4501;
  }

  /* === Hamburger that morphs to × === */
  .hamburger {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    border: 0;
  }
  .hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #333;
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease, background-color 0.2s ease;
    transform-origin: center;
  }
  .hamburger[data-active="true"] span { background: #fff; }
  .hamburger[data-active="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .hamburger[data-active="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .hamburger[data-active="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* === Offcanvas multilevel mobile menu ===
     Drawer slides in from right. Inside, each panel is absolutely positioned and slides
     based on a state attribute driven by a JS panel-stack: active/parent/hidden. */
  .offcanvas {
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear 0.5s;
  }
  .offcanvas[data-open="true"] {
    pointer-events: auto;
    visibility: visible;
    transition: visibility 0s linear 0s;
  }
  .offcanvas-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
    opacity: 0;
    transition: opacity 0.45s ease;
    cursor: pointer;
  }
  .offcanvas[data-open="true"] .offcanvas-overlay { opacity: 1; }
  .offcanvas-drawer {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(85vw, 420px);
    background: #131313;
    color: #fff;
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .offcanvas[data-open="true"] .offcanvas-drawer { transform: translateX(0); }
  .offcanvas-panels {
    position: relative;
    flex: 1;
    overflow: hidden;
  }
  .offcanvas-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #131313;
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1), opacity 0.4s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .offcanvas-panel[data-state="active"] { transform: translateX(0); opacity: 1; pointer-events: auto; }
  .offcanvas-panel[data-state="hidden"] { transform: translateX(100%); opacity: 1; pointer-events: none; }
  .offcanvas-panel[data-state="parent"] { transform: translateX(-22%); opacity: 0.35; pointer-events: none; }
  .offcanvas-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
  }
  .offcanvas-title {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.7);
  }
  .offcanvas-close,
  .offcanvas-back {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,0.15);
    background: transparent;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, border-color 0.25s;
    flex-shrink: 0;
  }
  .offcanvas-close:hover,
  .offcanvas-back:hover { background: #ff4501; border-color: #ff4501; }
  .offcanvas-close { margin-left: auto; }
  .offcanvas-list { list-style: none; padding: 0; margin: 0; }
  .offcanvas-list li { border-bottom: 1px solid rgba(255,255,255,0.06); }
  .offcanvas-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 1.15rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #fff;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    transition: background 0.3s ease, color 0.3s ease, padding-left 0.3s ease;
    position: relative;
  }
  .offcanvas-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #ff4501;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.3s ease;
  }
  .offcanvas-link:hover {
    background: rgba(255,69,1,0.06);
    color: #ff4501;
    padding-left: 2rem;
  }
  .offcanvas-link:hover::before { transform: scaleY(1); }
  .offcanvas-link svg { flex-shrink: 0; transition: transform 0.3s ease; }
  .offcanvas-link:hover svg { transform: translateX(4px); }
  .offcanvas-footer {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-shrink: 0;
  }
  .offcanvas-footer a {
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
    transition: color 0.2s;
  }
  .offcanvas-footer a:hover { color: #ff4501; }

  /* Mobile 2nd-level "Послуги" panel = the desktop services mega-menu, rendered
     as a WHITE panel and stacked into one column. Reuses .nav-dd-* so it is 1:1
     with the desktop dropdown (categories + sub-services + contacts). */
  .offcanvas-panel.offcanvas-panel--mega { background: #ffffff; color: #232323; }
  .offcanvas-panel--mega .offcanvas-header { border-bottom-color: rgba(0,0,0,0.08); }
  .offcanvas-panel--mega .offcanvas-title { color: rgba(35,35,35,0.6); }
  .offcanvas-panel--mega .offcanvas-back,
  .offcanvas-panel--mega .offcanvas-close {
    border-color: rgba(0,0,0,0.15);
    color: #232323;
  }
  .offcanvas-panel--mega .offcanvas-back:hover,
  .offcanvas-panel--mega .offcanvas-close:hover {
    background: #ff4501; border-color: #ff4501; color: #ffffff;
  }
  /* Collapse the 5-track desktop grid into a single stacked column */
  .offcanvas-mega .nav-dd-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 1.75rem 1.5rem 2.5rem;
    border-bottom: 0;
  }
  .offcanvas-mega .nav-dd-col {
    min-width: 0;
    border-left: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .offcanvas-mega .nav-dd-col + .nav-dd-col {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(0,0,0,0.08);
  }
  /* sub-services column carries only an empty alignment eyebrow on desktop */
  .offcanvas-mega .nav-dd-col--sub .nav-dd-eyebrow { display: none; }
  /* the floating brand accent is positioned for the desktop gap - drop it here */
  .offcanvas-mega .nav-dd-col--contacts::before { display: none; }

  /* Service category cards (services.html [01] grid).
     Per Figma 124:3644: 0.8px white/12% border, 40px padding, [NN] top-left,
     diagonal-arrow icon top-right (60×60), title at bottom, animated bottom
     orange line on hover. ON HOVER: card transitions to orange state - bg
     fades to brand orange, title cross-fades into description text, the hand
     pointer icon fades in at center-bottom. The Figma's [02] orange card is
     a *demonstration of hover state*, not a default-active variant. */
  .cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Figma 124:3646 height = 219px @ 2048 frame width.
       Scale by viewport: 1280→137, 1920→205, 2048→219, 2560→274. */
    min-height: clamp(200px, 11vw, 280px);
    padding: clamp(1.25rem, 2.1vw, 2.5rem);
    background: rgba(51,51,51,0.02);
    border: 0.8px solid rgba(255,255,255,0.12);
    overflow: hidden;
    cursor: default;
    transition: background 0.4s cubic-bezier(0.4,0,0.2,1), border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .cat-card[href] { cursor: pointer; }
  .cat-card:hover {
    border-color: #ff4501;
    box-shadow: 0 0 60px rgba(255,68,0,0.1);
    background: rgba(255,68,0,0.04);
  }
  .cat-card__num {
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0.044em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    font-weight: 400;
    transition: color 0.3s ease;
  }
  .cat-card:hover .cat-card__num { color: rgba(255,68,0,0.4); }
  .cat-card__icon {
    position: absolute;
    top: clamp(1.25rem, 2.1vw, 2.5rem);
    right: clamp(1.25rem, 2.1vw, 2.5rem);
    width: clamp(36px, 3.2vw, 60px);
    height: clamp(36px, 3.2vw, 60px);
    background: url('assets/icon-service-card.svg') no-repeat center / contain;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
  }
  .cat-card:hover .cat-card__icon { transform: translate(4px, -4px); }
  .cat-card__title,
  .cat-card__desc {
    font-family: 'Fixel Display', sans-serif;
    font-weight: 400;
    max-width: 80%;
    transition: opacity 0.3s ease;
  }
  /* Figma 124:3651: 30px / line-height 35 / letter-spacing -1.6px (-0.053em) */
  .cat-card__title {
    font-size: clamp(1.125rem, 1.5vw, 1.875rem);
    line-height: 1.167;
    letter-spacing: -0.0533em;
    text-transform: uppercase;
    color: #ffffff;
  }
  /* Figma 124:3659: 20px / line-height 30 / letter-spacing -1.6px (-0.08em) */
  .cat-card__desc {
    position: absolute;
    left: clamp(1.25rem, 2.1vw, 2.5rem);
    bottom: clamp(1.25rem, 2.1vw, 2.5rem);
    font-size: clamp(0.95rem, 1vw, 1.25rem);
    line-height: 1.5;
    letter-spacing: -0.08em;
    color: #ff4501;
    opacity: 0;
    pointer-events: none;
  }
  .cat-card:hover .cat-card__title { opacity: 0; }
  .cat-card:hover .cat-card__desc { opacity: 1; }
  .cat-card__line {
    position: absolute;
    left: 0; right: 100%;
    bottom: 0;
    height: 2px;
    background: #ff4501;
    transition: right 0.5s cubic-bezier(0.4,0,0.2,1);
  }
  .cat-card:hover .cat-card__line { right: 0; }

  /* Resource directory cards (useful-resources.html). White card with circular
     icon top-left, single-line label below, top-right diagonal arrow.
     Active variant inverts to brand orange. */
  /* Category bands (useful-info.html). Figma 124:5173 - 3 wide cards, brand orange bg,
     white centered title, diagonal arrow top-right. */
  .cat-band {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 649 / 217;
    background: #ff4501;
    border: 0.8px solid rgba(255,255,255,0.12);
    color: #ffffff;
    padding: clamp(1.5rem, 2.4vw, 2.5rem);
    transition: background-color 0.3s ease;
  }
  .cat-band:hover { background: #ff5a1f; }
  .cat-band__title {
    font-family: 'Fixel Display', sans-serif;
    font-size: clamp(1.125rem, 1.46vw, 1.875rem);
    font-weight: 600;
    letter-spacing: -0.053em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.17;
    color: #ffffff;
  }
  .cat-band__arrow {
    position: absolute;
    top: clamp(0.85rem, 1.2vw, 1.4rem);
    right: clamp(0.85rem, 1.2vw, 1.4rem);
    width: clamp(40px, 2.93vw, 60px);
    height: clamp(40px, 2.93vw, 60px);
    color: #ffffff;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
  }
  .cat-band:hover .cat-band__arrow {
    transform: translate(3px, -3px);
  }

  /* Partner cards (contacts.html [03]). Figma 124:329 - wide aspect cards with
     logo centered top, title + description below, [NN] top-left, arrow top-right. */
  .partner-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Min-height keeps the Figma proportion (636/290) when text is short, but
       lets the card grow so 2-line descriptions are never clipped. Grid stretch
       keeps all cards in a row equal height. */
    min-height: clamp(220px, 14vw, 290px);
    padding: clamp(1.5rem, 2.4vw, 2.5rem) clamp(1.5rem, 2.4vw, 3rem);
    background: rgba(51,51,51,0.03);
    border: 1px solid rgba(0,0,0,0.1);
    transition: background-color 0.3s ease, border-color 0.3s ease;
    cursor: default;
  }
  .partner-card__num {
    position: absolute;
    top: clamp(1rem, 1.4vw, 1.75rem);
    left: clamp(1rem, 1.4vw, 1.75rem);
    font-family: 'Fixel Display', sans-serif;
    font-size: clamp(0.85rem, 0.9vw, 1.125rem);
    font-weight: 400;
    letter-spacing: 0.044em;
    text-transform: uppercase;
    color: rgba(51,51,51,0.5);
  }
  .partner-card__logo {
    width: clamp(120px, 13vw, 230px);
    aspect-ratio: 265 / 79;
    background: transparent no-repeat center / contain;
    margin-top: clamp(1.25rem, 1.8vw, 2rem);
    margin-bottom: clamp(1rem, 1.4vw, 1.5rem);
  }
  .partner-card__title {
    font-family: 'Fixel Display', sans-serif;
    font-size: clamp(1.1rem, 1.07vw, 1.375rem);
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: clamp(0.5rem, 0.6vw, 0.75rem);
  }
  .partner-card__desc {
    font-family: 'Fixel Display', sans-serif;
    font-size: clamp(0.8rem, 0.78vw, 1rem);
    line-height: 1.4;
    text-align: center;
    color: rgba(51,51,51,0.6);
    max-width: 85%;
  }
  .partner-card__arrow {
    position: absolute;
    top: clamp(0.85rem, 1.2vw, 1.25rem);
    right: clamp(0.85rem, 1.2vw, 1.25rem);
    width: clamp(28px, 2.4vw, 44px);
    height: clamp(28px, 2.4vw, 44px);
    color: #ff4501;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
  }
  .partner-card:hover .partner-card__arrow {
    transform: translate(2px, -2px);
  }

  /* Resource cards (useful-resources.html). Figma 124:5511 - wide aspect cards
     with centered logo image, title below, [NN] index top-left, diagonal
     arrow top-right. Active state (orange bg, white content) on hover and
     on the .res-card--active variant. */
  .res-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 636 / 254;
    padding: clamp(1.5rem, 2.4vw, 2.5rem);
    background: rgba(51,51,51,0.03);
    border: 1px solid rgba(0,0,0,0.1);
    transition: background-color 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
    overflow: hidden;
  }
  .res-card:hover { background: #ff4501; border-color: #ff4501; }
  .res-card__num {
    position: absolute;
    top: clamp(1rem, 1.4vw, 1.75rem);
    left: clamp(1rem, 1.4vw, 1.75rem);
    font-family: 'Fixel Display', sans-serif;
    font-size: clamp(0.85rem, 0.9vw, 1.125rem);
    font-weight: 400;
    letter-spacing: 0.044em;
    text-transform: uppercase;
    color: rgba(51,51,51,0.5);
    transition: color 0.3s ease;
  }
  .res-card:hover .res-card__num { color: rgba(255,255,255,0.8); }
  .res-card__logo {
    width: clamp(96px, 9.5vw, 160px);
    aspect-ratio: 142 / 78;
    background: transparent no-repeat center / contain;
    margin-bottom: clamp(1rem, 1.6vw, 1.8rem);
    transition: background-color 0.3s ease;
  }
  .res-card__label {
    font-family: 'Fixel Display', sans-serif;
    font-size: clamp(0.95rem, 1vw, 1.25rem);
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
    color: #333;
    max-width: 78%;
    transition: color 0.3s ease;
  }
  .res-card:hover .res-card__label { color: #ffffff; }
  .res-card__arrow {
    position: absolute;
    top: clamp(0.85rem, 1.2vw, 1.4rem);
    right: clamp(0.85rem, 1.2vw, 1.4rem);
    width: clamp(28px, 2.5vw, 44px);
    height: clamp(28px, 2.5vw, 44px);
    color: #ff4501;
    transition: color 0.3s ease, transform 0.4s cubic-bezier(0.4,0,0.2,1);
    pointer-events: none;
  }
  .res-card:hover .res-card__arrow {
    color: #ffffff;
    transform: translate(3px, -3px);
  }
  /* Active variant: orange bg from the start (matches Figma card [02] ДІАМ) */
  .res-card--active { background: #ff4501; border-color: #ff4501; }
  .res-card--active:hover { background: #ff5a1f; border-color: #ff5a1f; }
  .res-card--active .res-card__num { color: rgba(255,255,255,0.8); }
  .res-card--active .res-card__label { color: #ffffff; }
  .res-card--active .res-card__arrow { color: #ffffff; }

  /* Footer nav expandable submenus (Послуги / Корисна інформація) */
  .footer-nav-trigger {
    display: inline-flex; align-items: center; gap: 0.4em;
    font: inherit; color: #333; text-transform: inherit; letter-spacing: inherit;
    background: none; border: 0; padding: 0; cursor: pointer;
    transition: color 0.2s ease;
  }
  .footer-nav-trigger:hover,
  .footer-nav-trigger[aria-expanded="true"] { color: #ff4501; }
  .footer-nav-chevron { transition: transform 0.3s ease; }
  .footer-nav-trigger[aria-expanded="true"] .footer-nav-chevron { transform: rotate(180deg); }

  /* grid-rows 0fr → 1fr gives a smooth height animation with no fixed max-height */
  .footer-subnav { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; }
  .footer-subnav[data-open="true"] { grid-template-rows: 1fr; }
  .footer-subnav__inner { overflow: hidden; min-height: 0; }
  .footer-subnav__main {
    display: inline-flex; align-items: center; gap: 0.5rem;
    margin-top: clamp(0.75rem, 1.5vw, 1.5rem);
    color: #ff4501; font-weight: 600;
    text-transform: none; letter-spacing: -0.01em;
    font-size: clamp(1rem, 0.8vw + 0.7rem, 1.125rem);
  }
  .footer-subnav__main:hover { text-decoration: underline; }
  .footer-subnav__main svg { width: clamp(11px, 0.8vw, 14px); height: auto; }
  .footer-subnav__grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.25rem, 0.4vw, 0.5rem) clamp(1.25rem, 1.5vw, 2.75rem);
    margin-top: clamp(0.5rem, 1vw, 0.875rem);
    padding-bottom: clamp(0.5rem, 1vw, 1rem);
    text-transform: none; letter-spacing: normal;
    font-size: clamp(0.8125rem, 0.6vw + 0.6rem, 0.95rem);
  }
  @media (min-width: 768px)  { .footer-subnav__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1280px) { .footer-subnav__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .footer-subnav__link { color: rgba(51, 51, 51, 0.8); transition: color 0.2s ease; }
  .footer-subnav__link:hover { color: #ff4501; }

/* Legal pages: two-column body headings (privacy/disclaimer/consent). */
.legal-cols h2 {
  font-size: clamp(1.75rem, 1.95vw, 2.5rem);
  line-height: 1.625;
  font-weight: 600;
  letter-spacing: -0.042em;
  color: #333;
  margin-top: clamp(2.5rem, 4vw + 1.1rem, 6rem);
  margin-bottom: clamp(1.25rem, 1.5vw + 0.8rem, 2.75rem);
}
.legal-cols > h2:first-child { margin-top: 0; }
.legal-cols p { color: #333; }
.legal-cols p + p { margin-top: clamp(0.75rem, 0.6vw + 0.6rem, 1.25rem); }