/* ============================================================
   Construction / trade vertical — Hidook Site Builder.
   Navy trust + orange-accent CTAs, dual Call / Estimate,
   project name/location captions, sticky call dock.
   Opacity/transform motion only. Local photos only.
   ============================================================ */

:root {
    --color-primary:       #ff4d00;
    --color-primary-light: #ff7a3d;
    --color-primary-dark:  #0f1720;
    --color-cream:         #eef1f4;

    --ink: #0f1720;
    --soft: rgba(15, 23, 32, 0.78);
    --mute: rgba(15, 23, 32, 0.65);
    --paper: var(--color-cream, #eef1f4);
    --snow: #ffffff;
    --navy: #0b3d91;
    --cta: var(--color-primary, #ff4d00);
    --accent: var(--color-primary, #ff4d00);
    /* Same reasoning as .ls-meter__n / .ls-punch__n::before below, applied the
       other direction: an owner can set the accent to any of the colour
       popover's presets (checked against all 6 — Indigo/Turcoaz/Violet/
       Portocaliu/Roz/Verde), and several of those (Turcoaz 3.74:1, Portocaliu
       3.56:1, Verde 3.30:1 white-on-fill; same numbers when used as text on
       white) sit under the 4.5:1 floor a plain var(--cta) fill/text can't
       guarantee. Mixed 80/20 toward black, the worst of the six clears
       4.88:1 while the accent stays visibly the owner's chosen hue. Used
       wherever --cta is either a text colour on a light card or a solid fill
       behind white text (bot/test/suite7-template-contract.test.js). */
    --cta-safe: color-mix(in srgb, var(--cta) 80%, black);
    --link: #0b3d91;
    --void: #0f1720;
    --font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --max: 1040px;
    --r: 12px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body.ls-body {
    font-family: var(--font);
    background: var(--paper);
    color: var(--ink);
    font-size: 17px; line-height: 1.5; letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 72px;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Utility strip — phone always visible */
.ls-util {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    min-height: 48px; padding: 0 18px;
    background: var(--void); color: #fff;
    font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
}
/* D2: plain white text on the navy bar blended into the chrome instead of
   reading as tappable. A solid cream/ink pill (the theme's own light
   background colour on its dark ink text — the same pairing the rest of the
   page uses for body copy) stands out on any accent/background combination
   and keeps the 44px touch target. */
.ls-util__phone {
    display: inline-flex; align-items: center; min-height: 44px;
    background: var(--paper); color: var(--ink); border-radius: var(--r);
    padding: 6px 12px; font-weight: 700;
}
.ls-util__name { color: #fff; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.ls-util__zone { color: rgba(255,255,255,0.55); display: none; }
@media (min-width: 720px) { .ls-util__zone { display: inline; } }
/* Touch-target floor: 44px.
   Measured across all five templates at 1440 and 390, every primary call to
   action on a generated site — the buttons that make a small business's phone
   ring — rendered between 34px and 42px tall. That clears WCAG 2.5.8 (Level
   AA, 24x24) and falls short of 2.5.5 (Level AAA, 44x44) and of the figure
   both the iOS and Android guidelines give for a thumb. Several of these rules
   already carried a min-height, set just under the mark.
   Locked by bot/test/waveB-touch-targets.test.js, which measures the rendered
   box rather than the declaration. */
.ls-util__cta {
    display: inline-flex; align-items: center; min-height: 44px;
    background: var(--cta-safe); color: #fff; border-radius: var(--r);
    padding: 8px 14px; font-size: 12px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    transition: transform 140ms var(--ease-out);
}
.ls-util__cta:active { transform: scale(0.97); }

.ls-hero { background: var(--void); color: #fff; }
.ls-hero__cut { position: relative; min-height: 74vh; display: grid; place-items: end start; }
.ls-hero__media { position: absolute; inset: 0; background-size: cover !important; background-position: center !important; }
/* Legibility haze — same reasoning as portfolio's veil.
   0.2 at the top rising to 0.78 at the very bottom meant the contrast behind
   the headline depended on where the copy block happened to land, and it
   lands high, in the thin end. With the dark photograph this template ships
   the tagline measures a comfortable 10.08:1 at the 10th percentile; with a
   light one the same pixels drop to 1.84:1, under the 3:1 AA floor. The
   template passes today because of its stock photo, which the editor invites
   the owner to replace on the first screen. */
.ls-hero__haze {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(12, 18, 26, 0.30) 0%,
        rgba(12, 18, 26, 0.70) 10%,
        rgba(12, 18, 26, 0.86) 26%,
        rgba(12, 18, 26, 0.90) 100%);
}
.ls-hero__copy { position: relative; z-index: 1; padding: clamp(3rem, 10vw, 6rem) 22px 3rem; max-width: var(--max); }
.ls-hero__name {
    font-family: var(--display); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em;
    font-size: clamp(2.1rem, 6vw, 3.4rem);
    overflow: visible;
}
/* Tagline keeps display scale but wraps inside the canvas so long RO seed lines
   (e.g. «Renovări interioare și finisaje premium») never clip horizontally. */
.ls-hero__tag, .hero-tagline {
    font-family: var(--display); font-weight: 700; line-height: 1.18; letter-spacing: -0.02em;
    font-size: clamp(2.1rem, 6vw, 3.4rem);
    max-width: min(18ch, 100%);
    overflow: visible;
    overflow-wrap: break-word;
    word-break: normal;
    white-space: normal;
}
/* Standard logo box shared across all 5 templates (max-height + width:auto +
   object-fit:contain, no fixed aspect-ratio) — a fixed 3:1 box let a square
   upload sit "contain"-ed and tiny, and let a square upload elsewhere render
   at up to 460px for the identical file. Reserving space before the image
   loads is handled upstream: build.js writes real width/height attributes
   onto every <img> from the uploaded file's own pixels, which the browser
   uses to size this box (via width:auto against the intrinsic ratio) before
   a single byte of image data has arrived. */
.ls-hero__logo { max-height: 40px; width: auto; object-fit: contain; object-position: left center; margin-bottom: 1rem; }
.ls-meters { display: flex; flex-wrap: wrap; gap: 1.75rem; margin: 1.5rem 0; }
/* Audit a11y #32: the owner-chosen accent (--cta) is arbitrary — the shipped
   "renovari-bucuresti" preset picks a navy (#0b3d91) that measures 1.8:1
   against this near-black hero, well under the 3:1 WCAG AA floor for bold
   21.6px text. Blending toward white guarantees >=4.5:1 for any accent a
   colour picker could reasonably produce (verified against navy/orange/a
   near-black worst case) while keeping a tint of the brand colour. */
.ls-meter__n { display: block; font-size: 1.35rem; font-weight: 700; color: color-mix(in srgb, var(--cta) 50%, white); }
.ls-meter__l { font-size: 12px; color: rgba(255,255,255,0.56); text-transform: uppercase; letter-spacing: 0.06em; }
.ls-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.25rem; }
.ls-btn, .hero-cta {
    display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px;
    border-radius: var(--r); font-size: 13px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
    transition: transform 140ms var(--ease-out);
}
.ls-btn:active, .hero-cta:active { transform: scale(0.97); }
.ls-btn--fill { background: var(--cta-safe); color: #fff; border: 1px solid var(--cta-safe); }
.ls-btn--ghost { border: 1px solid rgba(255,255,255,0.7); color: #fff; background: transparent; }
.ls-btn--ink { border-color: var(--ink); color: var(--ink); }
/* D2: the two "Sună · …" phone CTAs (hero + closing contact band) — same
   solid cream/ink treatment as .ls-util__phone and .ls-dock__call below, so
   the phone number reads as a button in all three places the client asked
   for, not just one. A dedicated modifier rather than restyling
   .ls-btn--ghost itself, because that class is also used by the Instagram
   follow button, which is not part of this request. */
.ls-btn--phone { background: var(--paper); color: var(--ink); border: 1px solid var(--paper); }
.ls-scroll, .scroll-indicator {
    width: 100%; border: 0; background: var(--void); color: rgba(255,255,255,0.48);
    padding: 0 0 1.5rem; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
}
.scroll-indicator__line {
    display: block; width: 1px; height: 22px; margin: 0.4rem auto 0; background: rgba(255,255,255,0.3);
}

.ls-main { background: var(--paper); }
.ls-wrap { max-width: var(--max); margin: 0 auto; padding: clamp(2.75rem, 7vw, 4.5rem) 22px; }
.ls-eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--mute); margin-bottom: 0.6rem;
}
.ls-eyebrow--hi { color: rgba(255,255,255,0.5); }
.ls-h {
    font-family: var(--display); font-size: clamp(1.85rem, 3.5vw, 2.4rem);
    font-weight: 700; line-height: 1.1; margin-bottom: 0.75rem; letter-spacing: -0.02em;
}
.ls-h--sm { font-size: 1.5rem; }
.ls-h--light { color: #fff; }
.ls-text { color: var(--soft); max-width: 38rem; }
.ls-badge { margin-top: 1.25rem; font-size: 14px; color: var(--mute); }
.ls-badge strong { display: block; font-size: 28px; color: var(--ink); }
.ls-zone { margin-top: 0.75rem; font-weight: 600; color: var(--navy); }
.ls-certs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; }
.ls-cert {
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 6px 10px; border: 1px solid rgba(15,23,32,0.14); border-radius: var(--r); color: var(--mute);
}

.ls-about {
    display: grid; gap: 2rem;
    /* Explicit minmax(0, 1fr) — not the "no explicit template" default — so
       the single mobile column clamps to the container's width instead of
       growing to the ".ls-lead" card's min-content (long unbroken phone
       numbers inside .ls-lead__row force that up), which otherwise causes
       horizontal overflow at high zoom levels ("grid blowout"). */
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 834px) {
    .ls-about { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; }
}
.ls-lead {
    background: var(--snow); border-radius: var(--r); padding: 1.5rem;
    border: 1px solid rgba(15,23,32,0.08); box-shadow: 0 8px 24px rgba(15,23,32,0.06);
    min-width: 0;
}
.ls-lead__list { display: flex; flex-direction: column; gap: 8px; margin-top: 1rem; min-width: 0; }
.ls-lead__row, .contact-item {
    display: flex; align-items: center; min-height: 44px; padding: 10px 12px; min-width: 0;
    border-radius: var(--r); border: 1px solid rgba(15,23,32,0.12);
    font-size: 14px; font-weight: 600; color: var(--ink);
}
.ls-lead__row span, .contact-item span { overflow-wrap: anywhere; }
.ls-lead__row:hover { border-color: var(--cta); }

.ls-block--dark, .ls-trust {
    background: var(--void); color: #fff;
}
.ls-block--dark .ls-text, .ls-trust .ls-text { color: rgba(255,255,255,0.68); }
.ls-punch { margin-top: 1rem; counter-reset: punch; }
.ls-punch__row, .service-card {
    counter-increment: punch;
    display: flex; align-items: center; gap: 1rem;
    padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.1);
    background: transparent; color: #fff;
}
.ls-punch__n::before {
    content: counter(punch, decimal-leading-zero);
    /* Same accent-on-dark risk as .ls-meter__n above, at an even smaller
       12px (needs the stricter 4.5:1, not just 3:1) — same fix. */
    font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--cta) 50%, white); letter-spacing: 0.06em;
}
.ls-punch__label { font-size: 1.05rem; font-weight: 600; }

.ls-flow {
    display: grid; gap: 1rem; margin-top: 1.25rem;
}
@media (min-width: 720px) { .ls-flow { grid-template-columns: repeat(3, 1fr); } }
.ls-flow__card {
    background: var(--snow); border-radius: var(--r); padding: 1.25rem;
    border: 1px solid rgba(15,23,32,0.08);
}
.ls-flow__n { display: block; font-size: 12px; font-weight: 700; color: var(--cta-safe); letter-spacing: 0.08em; margin-bottom: 0.5rem; }
.ls-flow__t { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.4rem; }

.ls-trust__grid {
    display: grid; gap: 1rem; margin-top: 1.25rem;
}
@media (min-width: 720px) { .ls-trust__grid { grid-template-columns: repeat(2, 1fr); } }
.ls-trust__card {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--r); padding: 1.25rem;
}
.ls-trust__t { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.4rem; color: #fff; }

.ls-work { margin: 2rem 0 2.5rem; }
.ls-work__t { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.35rem; }
.ls-shots {
    display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 1rem;
}
@media (min-width: 640px) { .ls-shots { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .ls-shots { grid-template-columns: repeat(3, 1fr); } }
.ls-shot, .photo-card {
    margin: 0; background: var(--snow); border-radius: var(--r); overflow: hidden;
    border: 1px solid rgba(15,23,32,0.08);
}
/* height:auto is load-bearing, not tidiness. build.js bakes real width/height
   HTML attributes onto every img from its source pixels (a CLS fix), and an
   explicit height attribute satisfies the box before aspect-ratio is ever
   consulted -- so the ratio below was silently ignored and these photos
   rendered at their full 960px source height inside a 322px-wide column,
   cropped to a sliver of blank wall. */
.ls-shot img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; }
.ls-shot__cap {
    padding: 0.65rem 0.85rem 0.85rem; font-size: 12px; font-weight: 600;
    color: var(--mute); letter-spacing: 0.02em;
}

.ls-ig { background: var(--paper); }
.ls-ighead {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.ls-ighead__h { color: var(--mute); margin-top: 0.25rem; }
.ls-embed { margin-bottom: 1.25rem; }
.instagram-embed-iframe {
    width: 100%; min-height: 480px; border: 0; border-radius: var(--r); background: var(--snow);
}

/* Instagram teaser (editor-preview-only "example" section) — see
   build.js renderHtml()'s cfg.instagram.showTeaser and this template's
   <!-- @if instagram.showTeaser --> block. Never renders on a published
   site (see bot/test/suite10-instagram-teaser-editmode.test.js).
   builder/edit-overlay.js toggles .is-revealed and un-hides the veil on
   interaction; the grid and the veil are stacked in the same grid cell so
   the veil always reads centred over the photos, whatever their count. */
.hb-ig-teaser {
    display: grid; grid-template-columns: 1fr; row-gap: 1rem;
    max-width: var(--max); margin: 0 auto; padding: clamp(2.75rem, 7vw, 4.5rem) 22px;
}
.hb-ig-teaser__badge {
    grid-row: 1; grid-column: 1; justify-self: start;
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink); background: var(--snow); border: 1px solid rgba(0,0,0,0.12);
    border-radius: var(--r); padding: 0.4rem 0.9rem;
}
.hb-ig-teaser__grid {
    grid-row: 2; grid-column: 1; list-style: none;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
    transition: filter 140ms var(--ease-out);
}
.hb-ig-teaser__grid li { aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--snow); }
.hb-ig-teaser__grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-ig-teaser.is-revealed .hb-ig-teaser__grid { filter: blur(6px); }
/* filter: blur() makes the grid a stacking context, which paints above the
   veil even though the veil comes later in the DOM — so once revealed, the
   blurred tiles swallowed clicks meant for the connect button. Caught by
   suite10-instagram-teaser-connect: the CTA was visible, enabled and stable,
   and still unclickable. Lift the veil out of that fight explicitly. */
.hb-ig-teaser__veil {
    position: relative; z-index: 1;
    grid-row: 2; grid-column: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1rem; text-align: center; padding: 1.5rem;
        /* The scrim has to guarantee the text on it, not merely tint whatever photo
       happens to be underneath. At 0.5–0.55 the lead text measured anywhere from
       3.4:1 to 4.5:1 and moved between runs, because a blurred bright tile can
       show through. 0.86 makes the reading independent of the photo, which is
       the only version of this that is actually testable. */
    background: rgba(15, 23, 32, 0.86); border-radius: var(--r);
}
.hb-ig-teaser__veil[hidden] { display: none; }
.hb-ig-teaser__lead { color: #fff; font-weight: 700; max-width: 26ch; }
.hb-ig-teaser__cta {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
    padding: 10px 16px; border: 0; border-radius: var(--r);
    background: var(--cta-safe); color: #fff; font-weight: 700; font-size: 13px;
    letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
    .hb-ig-teaser__grid { transition: none; }
}

.ls-band { background: var(--void); color: #fff; }
.ls-band .ls-text { color: rgba(255,255,255,0.68); }
.ls-band__inner {
    display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between;
}
.ls-band__acts { display: flex; flex-wrap: wrap; gap: 10px; }

/* Sticky call dock */
.ls-dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    display: flex; gap: 0; background: var(--void);
    border-top: 2px solid var(--cta);
    box-shadow: 0 -8px 24px rgba(15,23,32,0.2);
}
/* D2: this was a solid --cta (blue in the shipped preset) button — same
   "not cream/white" complaint as the other two phone spots. */
.ls-dock__call {
    flex: 1; text-align: center; padding: 14px 12px;
    background: var(--paper); color: var(--ink); font-weight: 800;
    font-size: 13px; letter-spacing: 0.06em;
}
.ls-dock__wa {
    padding: 12px 16px; background: #25D366; color: #fff;
    font-weight: 800; font-size: 13px; border-left: 1px solid rgba(255,255,255,0.12);
    display: grid; place-items: center;
}
.ls-dock__wa .wa-icon { display: block; }
@media (min-width: 900px) {
    .ls-dock { left: auto; right: 18px; bottom: 18px; width: auto; border-radius: var(--r); overflow: hidden; border-top: 0; border: 1px solid rgba(255,255,255,0.1); }
    .ls-dock__call { padding: 12px 18px; }
}

.ls-foot {
    background: var(--paper); color: var(--mute); font-size: 12px;
    border-top: 1px solid rgba(15,23,32,0.08);
}
.ls-foot__inner {
    display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between;
    padding-top: 2rem !important; padding-bottom: 3rem !important;
}
.ls-foot__logo { height: 28px; aspect-ratio: 3 / 1; object-fit: contain; object-position: left center; }
/* Audit a11y #31: the IG/FB links were bare "IG"/"FB" text with no padding —
   measured 13-18px wide targets, under the WCAG 2.5.8 24x24 CSS px minimum
   (the WhatsApp icon next to them measured 18x23, also short). Real SVG
   icons + a generous 44x44 hit area (the width/height set the visible icon
   box; padding pads that box out to the full target without changing the
   icon's own drawn size). */
.ls-foot__soc { display: flex; gap: 0.25rem; color: var(--link); font-weight: 700; }
.ls-foot__soc a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
}
.ls-foot__soc a:hover { background: rgba(15,23,32,0.06); }
.ls-foot__soc a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 44px;
}
.ls-foot__soc .soc-icon { display: block; }

.whatsapp-float {
    position: fixed; right: 18px; bottom: 78px; width: 48px; height: 48px; border-radius: 50%;
    background: #25D366; color: #fff; display: grid; place-items: center;
    z-index: 30; box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
}
.whatsapp-float .wa-icon { display: block; }
.hb-built-by {
    margin: 0.55rem 0 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--mute, #6b6b6b);
}
.hb-built-by a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 900px) { .whatsapp-float { bottom: 18px; } }

.wa-qr {
    position: fixed; inset: 0; z-index: 50;
    display: grid; place-items: center;
}
.wa-qr[hidden] { display: none !important; }
.wa-qr__backdrop { position: absolute; inset: 0; background: rgba(12, 18, 16, 0.62); backdrop-filter: blur(4px); }
.wa-qr__card {
    position: relative;
    background: var(--snow); color: var(--ink); border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 18px;
    padding: 2rem; width: min(92vw, 380px); text-align: center; box-shadow: 0 28px 72px rgba(12, 18, 16, 0.28);
}
.wa-qr__close { position: absolute; right: 12px; top: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(15, 29, 25, 0.07); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.wa-qr__title { margin: 0 2rem 1rem; font-size: 1.45rem; line-height: 1.2; }
.wa-qr__code { display: grid; place-items: center; min-height: 260px; padding: 10px; background: #fff; border: 1px solid rgba(15, 29, 25, 0.1); border-radius: 18px; }
.wa-qr__code img { display: block; max-width: 100%; height: auto; }
.wa-qr__code svg { display: block; max-width: 100%; height: auto; }
.wa-qr__open { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 1rem; padding: 0.7rem 1.15rem; background: #25D366; color: #fff; border-radius: 999px; font-weight: 700; text-align: center; box-shadow: 0 8px 20px rgba(37, 211, 102, 0.24); }

.lightbox[hidden] { display: none; }
.lightbox {
    position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.9);
    display: grid; place-items: center;
}
.lightbox__img { max-width: min(92vw, 1100px); max-height: 85vh; object-fit: contain; }
.lightbox__close, .lightbox__nav {
    position: absolute; border: 0; background: transparent; color: #fff;
    font-size: 2rem; cursor: pointer; padding: 0.5rem 0.75rem;
}
.lightbox__close { top: 12px; right: 16px; }
.lightbox__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 12px; top: 50%; transform: translateY(-50%); }

/* Editable-list add/remove controls (audit LS-02) — injected by
   initEditableLists() in script.js, only ever present inside the builder
   editor iframe (a published/exported site never has these). */
.hb-ls-remove {
    position: absolute; top: 6px; right: 6px; z-index: 4;
    width: 26px; height: 26px; min-width: 26px; min-height: 26px;
    display: grid; place-items: center;
    border: none; border-radius: 50%;
    background: rgba(15, 23, 32, 0.82); color: #fff;
    font-size: 16px; line-height: 1; cursor: pointer;
}
.hb-ls-remove:hover { background: var(--cta); }
.ls-cert { position: relative; padding-right: 30px; }
.ls-cert .hb-ls-remove { top: 3px; right: 3px; width: 22px; height: 22px; min-width: 22px; min-height: 22px; font-size: 13px; }

.hb-ls-add {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 44px; margin-top: 12px; padding: 10px 16px;
    border: 1.5px dashed rgba(15, 23, 32, 0.3); border-radius: var(--r);
    background: transparent; color: var(--ink);
    font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.hb-ls-add:hover { border-color: var(--cta); color: var(--cta); }
.ls-block--dark .hb-ls-add, .ls-trust .hb-ls-add {
    border-color: rgba(255, 255, 255, 0.35); color: #fff;
}
.ls-block--dark .hb-ls-add:hover, .ls-trust .hb-ls-add:hover {
    border-color: var(--cta); color: var(--cta);
}
.ls-certs .hb-ls-add { width: auto; min-height: 32px; padding: 6px 14px; margin-top: 0; }

.fade-in-section { animation: lsIn 420ms var(--ease-out) both; }
@keyframes lsIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .fade-in-section, .hero-content, .scroll-indicator, .service-card {
        animation: none !important; opacity: 1 !important; transform: none !important;
    }
}