/* ============================================================
   Professionals / Servicii profesionale — calm editorial.
   Paper / ink / brass-terracotta. No salon/restaurant/trade clone.
   Opacity/transform motion only. No third-party assets.
   ============================================================ */

:root {
    --color-primary:       #9A4030;
    --color-primary-light: #C4A574;
    --color-primary-dark:  #14120F;
    --color-cream:         #F3EFE8;

    --ink: var(--color-primary-dark, #14120F);
    --paper: var(--color-cream, #F3EFE8);
    --brass: var(--color-primary-light, #C4A574);
    --accent: var(--color-primary, #9A4030);
    --soft: rgba(20, 18, 15, 0.72);
    /* 0.48 measured 3.21:1 against --paper/--snow (WCAG AA needs 4.5:1 for
       this text's size) on .pr-kicker, .pr-hero__meta, .pr-scroll and
       .pr-copy--sm/.pr-ig-handle wherever they render on a light section —
       0.62 clears 4.5:1 on both backgrounds with margin. Dark-section (book)
       uses of these classes are already repainted by more specific
       .pr-sec--book overrides, so this only affects the light contexts. */
    --mute: rgba(20, 18, 15, 0.62);
    --line: rgba(20, 18, 15, 0.12);
    --cloud: #E7E9E5;
    --snow: #FBF9F5;
    --font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --ease: cubic-bezier(0.23, 1, 0.32, 1);
    --max: 1080px;
    --r: 4px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* WAVE8-03 [MEDIUM, horizontal overflow at 200% zoom]: the .pr-nav row
   (brand + nav-links-toggle + CTA + hamburger) is a non-wrapping flex row
   whose pieces are each already near their practical minimum width (see the
   .pr-nav__brand/.pr-nav__cta notes above for why). At the effective
   ~195px layout width 200% zoom produces on a 390px phone, that row can
   still be a few pixels short even after those fixes. overflow-x:hidden on
   both html and body is the standard, low-risk backstop for exactly this
   class of "a fixed-content row is a hair too wide" overflow — verified
   (see templates/portfolio/styles.css, which needed the same pair) to
   actually stop real sideways scrolling (checked via scrollTo()/wheel, not
   just the scrollWidth number, since a position:fixed/sticky descendant can
   still nudge that number independently of what a visitor can actually
   scroll to) without affecting the sticky header or any vertical scroll. */
html { scroll-behavior: smooth; overflow-x: hidden; }
body.pr-page {
    font-family: var(--font);
    background: var(--paper);
    color: var(--ink);
    font-size: 17px;
    line-height: 1.55;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

.pr-shell {
    width: min(100% - 2.5rem, var(--max));
    margin-inline: auto;
}

.pr-kicker {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 0.85rem;
}
.pr-display {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(2rem, 4.5vw, 3.35rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.pr-display--sec {
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    margin-bottom: 1.25rem;
}
.pr-lede {
    margin-top: 1.1rem;
    max-width: 34rem;
    font-size: 1.05rem;
    color: var(--soft);
}
.pr-copy {
    color: var(--soft);
    max-width: 38rem;
}
.pr-copy--lg { font-size: 1.05rem; line-height: 1.65; }
.pr-copy--sm { font-size: 0.9rem; color: var(--mute); }

/* Nav */
.pr-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    border-bottom: 1px solid var(--line);
}
.pr-nav__inner {
    width: min(100% - 2rem, 1120px);
    margin: 0 auto;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.pr-nav__brand {
    font-family: var(--display);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    /* WAVE8-02: a long, legitimate business name (law/consulting firm names
       routinely run 60-80 chars — schema.json's own maxLen for business.name)
       used to wrap onto several lines inside this flex row. Flex items default
       to min-width:auto, which refuses to shrink below the text's intrinsic
       width, so the wrap pushed .pr-nav__inner (and therefore the whole sticky
       <header class="pr-nav">, z-index:40) taller with every extra line. On a
       short viewport (a phone in landscape, or one with browser chrome eating
       vertical space) a 2-3 line name grew the header past 250px — enough to
       structurally overlap and swallow clicks meant for the fixed WhatsApp
       button (z-index:30) sitting near the bottom-right of the SAME short
       viewport. Truncating to one line with an ellipsis keeps the header at
       its intended ~59px in every case, so it can never grow into the
       WhatsApp button's territory this way again.
       min-width:0 is required here specifically because this is a flex child
       (.pr-nav__inner) — without it, text-overflow:ellipsis has no effect and
       the browser falls back to the old wrapping/overflow behaviour. */
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 60vw;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.pr-nav__logo { height: 22px; width: auto; }
.pr-nav__links {
    display: none;
    align-items: center;
    gap: 1.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--soft);
}
.pr-nav__links a {
    /* Text alone (12.5px/line-height) renders under the 24px WCAG 2.5.8
       target-size minimum — this padding makes the real hit area >=24px
       tall without changing the header's visual density (nav row already
       has room via min-height:58px). */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0;
}
.pr-nav__links a:hover { color: var(--ink); }
@media (min-width: 820px) { .pr-nav__links { display: flex; } }
.pr-nav__cta {
    display: inline-flex;
    align-items: center;
/* 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. */
    justify-content: center;
    min-height: 44px;
    padding: 0.55rem 1rem;
    background: var(--ink);
    color: var(--paper);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: var(--r);
    transition: transform 140ms var(--ease), opacity 140ms var(--ease);
}
.pr-nav__cta:active { transform: scale(0.98); }
@media (max-width: 340px) {
    /* WAVE8-03: below 820px the hamburger's own drawer already repeats this
       exact booking link as .pr-nav__mobile-cta, so hiding the header's
       inline copy here loses no functionality. .pr-nav__inner is a
       non-wrapping flex row (see the header-height note on .pr-nav__brand
       above for why it must stay non-wrapping); on a genuinely narrow
       viewport — or the ~195px effective layout width 200% zoom produces on
       a 390px phone — brand + links-toggle + cta + hamburger no longer all
       fit on that one line, and the row overflowed horizontally instead of
       shrinking further (every remaining piece is already at its practical
       minimum: an ellipsis-truncated brand, and a 44px touch-target
       hamburger that must not get smaller). Dropping the redundant CTA here
       is the only remaining slack. */
    .pr-nav__cta { display: none; }
}
.pr-nav__actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 auto;
}

/* Mobile nav toggle (hamburger) */
.pr-nav__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r);
    cursor: pointer;
    flex: 0 0 auto;
}
.pr-nav__toggle:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 2px;
}
.pr-nav__toggle-bars,
.pr-nav__toggle-bars::before,
.pr-nav__toggle-bars::after {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 160ms var(--ease), opacity 160ms var(--ease), background 160ms var(--ease);
}
.pr-nav__toggle-bars {
    position: relative;
}
.pr-nav__toggle-bars::before,
.pr-nav__toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
}
.pr-nav__toggle-bars::before { top: -6px; }
.pr-nav__toggle-bars::after { top: 6px; }
.pr-nav__toggle[aria-expanded="true"] .pr-nav__toggle-bars {
    background: transparent;
}
.pr-nav__toggle[aria-expanded="true"] .pr-nav__toggle-bars::before {
    top: 0;
    transform: rotate(45deg);
}
.pr-nav__toggle[aria-expanded="true"] .pr-nav__toggle-bars::after {
    top: 0;
    transform: rotate(-45deg);
}
@media (max-width: 819.98px) {
    .pr-nav__toggle { display: inline-flex; }
}

.pr-nav__mobile {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(20, 18, 15, 0.18);
    z-index: 39;
}
.pr-nav__mobile[hidden] { display: none !important; }
.pr-nav__mobile a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--soft);
    border-top: 1px solid var(--line);
}
.pr-nav__mobile a:first-child { border-top: 0; }
.pr-nav__mobile a:hover,
.pr-nav__mobile a:focus-visible {
    color: var(--ink);
    background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.pr-nav__mobile-cta { color: var(--accent); }
@media (min-width: 820px) {
    .pr-nav__mobile { display: none !important; }
}

/* Hero */
.pr-hero {
    position: relative;
    min-height: min(88vh, 760px);
    display: flex;
    align-items: flex-end;
    padding: 5rem 0 4.5rem;
    overflow: hidden;
}
.pr-hero__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, #F3EFE8 0%, #E8E2D6 48%, #D9D2C4 100%);
}
.pr-hero__veil {
    position: absolute;
    inset: 0;
    /* Purely atmospheric now — WCAG contrast for the hero text no longer
       depends on this gradient at all (see .pr-hero__card, which carries
       that job on its own near-opaque surface). This just keeps the photo's
       far edges from fighting the sticky header/scroll hint visually. */
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--paper) 22%, transparent) 0%, transparent 22%, transparent 78%, color-mix(in srgb, var(--paper) 30%, transparent) 100%),
        radial-gradient(ellipse 70% 50% at 80% 20%, color-mix(in srgb, var(--brass) 18%, transparent), transparent 60%);
    pointer-events: none;
}
.pr-hero__copy { position: relative; z-index: 1; padding-bottom: 1rem; }
/* The "paper on the desk" card: a near-opaque surface so hero text keeps a
   safe WCAG AA contrast against ANY photo an owner uploads (a busy, bright
   or low-contrast image no longer risks the headline/lede/meta text — see
   wave10-professionals-hero-contrast.test.js, which measures this on real
   rendered pixels, not the source colour values). Sized to content, not the
   full hero width, so it still reads as a considered object placed on the
   photo rather than a full-bleed panel. */
.pr-hero__card {
    max-width: 34rem;
    padding: 2rem 2.25rem;
    background: color-mix(in srgb, var(--paper) 90%, transparent);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid color-mix(in srgb, var(--paper) 60%, transparent);
    border-radius: 6px;
    box-shadow: 0 30px 70px rgba(20, 18, 15, 0.22);
}

/* Mobile hero density.
   The shared consent-card clearance in bot/site-legal.js works by adding
   padding BELOW the hero copy: on a hero that centres its content in a
   viewport-height box, that padding lifts the copy clear of the fixed card.
   This hero does not centre — it is content-driven and taller than a phone
   screen — so bottom padding lifts nothing, and the .pr-hero__card polish
   pushed the last line (the meta strip) under the consent card at 390px.

   Measured on the 390x844 canvas: masthead ends at y=59, the consent card
   starts at y=564, so the hero has a 505px band. The card's own content is
   431px and its padding 48px — it fits. What did not fit was the hero's 5rem
   top padding, which started the card at y=139 instead of ~91. So the fix is
   the honest one: a phone does not need 80px of air between a sticky mast and
   the hero, and the internal rhythm can tighten a little with it. That leaves
   ~30px of slack under the consent card and, unlike a clearance hack, it does
   not depend on :has() or on the banner being open at all. */
.pr-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}
.pr-hero__meta {
    margin-top: 1.5rem;
    font-size: 0.88rem;
    color: var(--mute);
    letter-spacing: 0.02em;
}
/* These density blocks sit AFTER the base rules on purpose.
   They used to sit before them, and at equal specificity the later rule wins:
   .pr-hero__actions and .pr-hero__meta kept their desktop margins on every
   viewport, so two of the five declarations in the mobile density pass were
   inert the whole time. The pass still worked — the savings came from the
   hero's top padding and the kicker/lede margins, whose base rules appear
   earlier in the file — but half of what it claimed to do, it did not do. */
@media (max-width: 899px) {
    .pr-hero { padding-top: 2rem; }
    .pr-kicker { margin-bottom: 0.5rem; }
    .pr-lede { margin-top: 0.75rem; }
    .pr-hero__actions { margin-top: 1.25rem; gap: 0.5rem; }
    .pr-hero__meta { margin-top: 1rem; }
}
@media (max-width: 560px) {
    .pr-hero__card { max-width: none; padding: 1.5rem 1.35rem 1.25rem; }
}
/* Short viewports. A laptop at 200% browser zoom reports about 720x450 CSS
   pixels, and there the hero's own copy is taller than the band between the
   masthead and the consent card — measured, the meta strip ran 16px under it.
   Width-scoped density does not help: 720px is a wide viewport by every
   breakpoint here. This is the height talking, so key off the height. */
/* 660px, not 560: the editor's own preview canvas on a phone is about 626px
   tall once the toolbar takes two rows, and the hero has to survive being
   previewed as well as being visited. */
@media (max-height: 660px) {
    .pr-hero { padding-top: 1.25rem; padding-bottom: 1.5rem; }
    .pr-hero__card { padding: 1rem 1.25rem 1rem; }
    .pr-kicker { margin-bottom: 0.35rem; }
    .pr-lede { margin-top: 0.5rem; }
    .pr-hero__actions { margin-top: 0.85rem; gap: 0.5rem; }
    .pr-hero__meta { margin-top: 0.7rem; }
}
.pr-scroll {
    position: absolute;
    right: max(1.25rem, calc((100% - var(--max)) / 2));
    bottom: 1.5rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mute);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    /* The rendered text column is ~17px wide — under the 24px WCAG 2.5.8
       minimum on the cross-axis. Physical left/right (not padding-inline,
       which follows the vertical-rl writing-mode above and would pad the
       wrong axis) widens the real hit area without moving the text. */
    padding-left: 6px;
    padding-right: 6px;
}

/* The consent card is fixed to the bottom of the viewport. The shared
   clearance in bot/site-legal.js lifts .pr-hero__copy, but this indicator is
   positioned against the hero box itself, so it is not lifted with it. Once
   the tap target was grown to meet WCAG 2.5.8 the two started overlapping at
   390px, which the AABB chrome contract rejects. Scoped to the same
   breakpoint as the mobile clearance so the desktop layout is untouched. */
@media (max-width: 899px) {
    html.hb-cookie-open .pr-scroll,
    body.hb-cookie-open .pr-scroll,
    body:has(#hb-cookie-banner:not([hidden])) .pr-scroll {
        /* Lifting it is not enough: the indicator is anchored to the hero box,
           which extends past the viewport bottom on a 390px screen, so no
           bottom offset reliably clears a viewport-fixed card. It is a purely
           decorative scroll hint with no action attached, and the consent card
           occupies exactly the space it points at, so it stands down while the
           card is up and returns the moment consent is given. */
        display: none;
    }
}

/* Buttons */
.pr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.7rem 1.25rem;
    border-radius: var(--r);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 140ms var(--ease), background 160ms var(--ease), color 160ms var(--ease);
}
.pr-btn:active { transform: scale(0.98); }
.pr-btn--primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.pr-btn--primary:hover { filter: brightness(1.05); }
.pr-btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line);
}
.pr-btn--ghost:hover { border-color: var(--ink); }
.pr-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* Strip */
.pr-strip {
    border-block: 1px solid var(--line);
    background: color-mix(in srgb, var(--cloud) 35%, var(--paper));
}
.pr-strip__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.1rem;
    padding: 1rem 0;
    font-size: 0.86rem;
    color: var(--soft);
}
.pr-strip__dot {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--brass);
}

/* Sections */
.pr-sec { padding: 4.5rem 0; }
.pr-sec--alt { background: color-mix(in srgb, var(--cloud) 28%, var(--paper)); }
.pr-sec--book {
    background: var(--ink);
    color: var(--paper);
}
.pr-sec--book .pr-kicker,
.pr-sec--book .pr-copy,
.pr-sec--book .pr-label,
.pr-sec--book .pr-privacy,
.pr-sec--book .pr-appt__hint,
.pr-sec--book .pr-appt__fallback,
.pr-sec--book .pr-opt { color: rgba(243, 239, 232, 0.72); }
.pr-sec--book .pr-display { color: var(--paper); }
.pr-sec--book .pr-warn {
    background: rgba(243, 239, 232, 0.08);
    border: 1px solid rgba(243, 239, 232, 0.18);
    color: rgba(243, 239, 232, 0.9);
}
.pr-sec--book .pr-input {
    background: rgba(243, 239, 232, 0.06);
    border-color: rgba(243, 239, 232, 0.2);
    color: var(--paper);
}
.pr-sec--book .pr-type {
    border-color: rgba(243, 239, 232, 0.18);
    background: rgba(243, 239, 232, 0.04);
}
.pr-sec--book .pr-type:has(input:checked) {
    border-color: var(--brass);
    background: rgba(196, 165, 116, 0.12);
}
.pr-sec--book .pr-type__label { color: var(--paper); }
.pr-sec--book .pr-type__meta { color: rgba(243, 239, 232, 0.55); }
.pr-sec--book .pr-btn--primary {
    background: var(--brass);
    border-color: var(--brass);
    color: var(--ink);
}
.pr-sec--book .pr-btn--ghost {
    color: var(--paper);
    border-color: rgba(243, 239, 232, 0.32);
}
.pr-sec--book .pr-btn--ghost:hover { border-color: var(--paper); }
.pr-sec--book .pr-appt-done {
    border-color: rgba(243, 239, 232, 0.22);
    background: rgba(243, 239, 232, 0.06);
}
.pr-sec--book .pr-appt-done__title { color: var(--paper); }
.pr-sec--book a { text-decoration: underline; text-underline-offset: 3px; }

.pr-svc {
    display: grid;
    gap: 1rem;
    margin-top: 0.5rem;
    counter-reset: prsvc;
}
@media (min-width: 720px) {
    .pr-svc { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
.pr-svc__card {
    padding: 1.6rem 1.5rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--snow);
    counter-increment: prsvc;
    transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.pr-svc__card:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
    box-shadow: 0 12px 28px rgba(20, 18, 15, 0.06);
}
/* A quiet case-file numeral rather than an icon — keeps the calm editorial
   register (no icon set exists for this vertical) while giving each card a
   distinct anchor point, echoing the numbered steps below it. */
.pr-svc__card::before {
    content: counter(prsvc, decimal-leading-zero);
    display: block;
    font-family: var(--display);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    /* --brass alone measures ~2.2:1 on --snow — nowhere near WCAG AA.
       Mixing it toward --ink keeps the warm accent hue while clearing 4.5:1
       (measured ~5.4:1) on real rendered pixels. */
    color: color-mix(in srgb, var(--brass) 55%, var(--ink));
    margin-bottom: 0.6rem;
}
.pr-svc__title {
    font-family: var(--display);
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 0.45rem;
}
/* A freshly-added service ("+ Adaugă") starts with an empty label/blurb
   (builder/app.js seeds list items with '' for text fields) — without this,
   the card renders as visibly blank until the owner fills it in, both in the
   editor and on a published site nobody has finished editing yet. */
.pr-svc__title:empty::before,
.pr-svc__title > [data-hb-edit]:empty::before {
    content: "Serviciu nou — adaugă un titlu";
    color: var(--mute);
    font-style: italic;
    font-weight: 400;
}

.pr-steps { display: grid; gap: 1.25rem; counter-reset: prstep; margin-top: 0.5rem; }
@media (min-width: 800px) { .pr-steps { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.pr-steps__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    counter-increment: prstep;
}
.pr-steps__num {
    width: 2rem; height: 2rem;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
}
.pr-steps__num::before { content: counter(prstep); }
.pr-steps__title {
    font-family: var(--display);
    font-size: 1.15rem;
    font-weight: 500;
    margin-bottom: 0.35rem;
}

.pr-about {
    display: grid;
    gap: 2rem;
}
@media (min-width: 860px) {
    .pr-about { grid-template-columns: 1.3fr 0.9fr; gap: 3rem; align-items: start; }
}
.pr-cred {
    padding: 1.75rem 1.5rem 1.5rem;
    border: 1px solid var(--line);
    /* A thin accent rule along the top — the one deliberate spot of colour
       in an otherwise quiet card — reads as "this is the proof, look here"
       without turning the card into a loud call-to-action box. */
    border-top: 3px solid var(--accent);
    background: var(--snow);
    border-radius: var(--r);
    box-shadow: 0 20px 45px rgba(20, 18, 15, 0.07);
}
.pr-cred__title {
    font-family: var(--display);
    font-size: 1.2rem;
    margin-bottom: 0.65rem;
}
.pr-cred__list {
    margin-top: 1rem;
    display: grid;
    gap: 0.55rem;
}
.pr-cred__list li {
    padding-left: 1rem;
    position: relative;
    font-size: 0.95rem;
    color: var(--soft);
}
.pr-cred__list li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.55em;
    width: 6px; height: 1px;
    background: var(--accent);
}

/* Appointment form */
.pr-warn {
    margin: 1rem 0 1.5rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    font-size: 0.9rem;
    max-width: 42rem;
}
.pr-appt { margin-top: 1.75rem; max-width: 42rem; }
.pr-booking-action { margin-top: 1.75rem; }
.pr-booking-link {
    min-width: 13rem;
    justify-content: center;
    text-decoration: none !important;
}
.pr-appt__fieldset { border: 0; margin: 0 0 1.25rem; padding: 0; }
.pr-appt__legend {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}
.pr-appt__types { display: grid; gap: 0.65rem; }
@media (min-width: 640px) { .pr-appt__types { grid-template-columns: repeat(3, 1fr); } }
.pr-type {
    display: block;
    cursor: pointer;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 0.85rem 0.9rem;
    transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.pr-type input { position: absolute; opacity: 0; pointer-events: none; }
.pr-type:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 2px; }
.pr-type:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.pr-type__label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}
.pr-type__meta { font-size: 0.8rem; color: var(--mute); }
.pr-appt__grid {
    display: grid;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}
@media (min-width: 560px) { .pr-appt__grid { grid-template-columns: 1fr 1fr; } }
.pr-field { display: grid; gap: 0.35rem; }
.pr-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.pr-opt { font-weight: 400; opacity: 0.75; }
.pr-input {
    min-height: 46px;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--snow);
    width: 100%;
}
.pr-input:focus {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 1px;
}
.pr-appt__hint { margin: 0.35rem 0 0.85rem; font-size: 0.9rem; }
.pr-privacy { font-size: 0.85rem; margin: 0.75rem 0 1rem; max-width: 40rem; }
.pr-appt__submit {
    margin-top: 0.25rem;
    /* WAVE8-03: min-width:12rem was a hard floor that always won over the
       form's actual available width — fine on any real phone (min-width
       12rem = 192px fits easily), but 200% zoom on a 390px viewport halves
       the effective layout width to ~195px, leaving less room than the
       floor demanded once shell padding is subtracted. width:min(...) keeps
       the same comfortable 12rem whenever there's room, but lets the button
       shrink to fit a narrower container instead of forcing an overflow. */
    width: min(100%, 12rem);
}
.pr-appt__fallback {
    margin-top: 1rem;
    font-size: 0.88rem;
    /* WAVE8-03: contact.email is one unbreakable token (no spaces/hyphens
       for the browser to wrap on). Plain inline text wrapping only breaks
       between words by default, so a long email inside this <a> could push
       past the form's width instead of wrapping — same overflow-at-200%-zoom
       mechanism fixed for .pr-contact__row above, just via inline flow
       instead of a grid column here. */
    overflow-wrap: break-word;
    word-break: break-word;
}
.pr-appt__fail {
    margin-top: 1.5rem;
    padding: 1.35rem 1.25rem;
    border: 1px solid rgba(243, 239, 232, 0.22);
    border-radius: var(--r);
    max-width: 42rem;
    background: rgba(243, 239, 232, 0.06);
}
.pr-appt__fail[hidden] { display: none !important; }
.pr-appt__fail-title {
    font-family: var(--display);
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--brass);
}
.pr-appt__fail .pr-copy { color: rgba(243, 239, 232, 0.82); }
.pr-appt__fail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1rem;
}
.pr-appt__fail-actions .pr-btn { text-decoration: none !important; }
.pr-appt-done {
    margin-top: 1.5rem;
    padding: 1.35rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    max-width: 42rem;
}
.pr-appt-done__title {
    font-family: var(--display);
    font-size: 1.35rem;
    font-weight: 500;
    margin-bottom: 0.65rem;
}

/* FAQ */
.pr-faq-wrap { max-width: 40rem; }
.pr-faq { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.pr-faq__item {
    border-bottom: 1px solid var(--line);
    padding: 0.85rem 0;
}
.pr-faq__q {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    padding-right: 1.5rem;
    position: relative;
}
.pr-faq__q::-webkit-details-marker { display: none; }
.pr-faq__q::after {
    content: "+";
    position: absolute;
    right: 0; top: 0;
    color: var(--accent);
    font-weight: 500;
}
.pr-faq__item[open] .pr-faq__q::after { content: "–"; }
.pr-faq__item .pr-copy { margin-top: 0.55rem; }

/* IG + contact */
.pr-ig-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.pr-ig-handle { color: var(--mute); margin-top: 0.25rem; }
.pr-ig-embed { margin-bottom: 1rem; }
.pr-ig-embed iframe {
    width: 100%;
    min-height: 420px;
    border: 0;
    border-radius: var(--r);
    background: var(--cloud);
}
.pr-ig-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
.pr-ig-cell {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--r);
    background: var(--cloud);
}
.pr-ig-cell img { width: 100%; height: 100%; object-fit: cover; }

.pr-contact {
    display: grid;
    gap: 2rem;
    /* WAVE8-03: a grid item's default min-width:auto refuses to shrink below
       its content's min-content size — see .pr-contact__list below for why
       that matters here. */
    min-width: 0;
}
@media (min-width: 720px) {
    .pr-contact { grid-template-columns: 1.1fr 0.9fr; gap: 3rem; }
}
.pr-contact__list {
    display: grid;
    gap: 0.55rem;
    /* Same reasoning one level up: .pr-contact__list is itself a grid item
       of .pr-contact (the 2-column layout at >=720px). */
    min-width: 0;
}
.pr-contact__row {
    display: block;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--snow);
    transition: border-color 140ms var(--ease);
    /* WAVE8-03 [MEDIUM, horizontal overflow at 200% zoom]: contact.email
       ("contact@cabinetjuridicionescu.ro") is one unbreakable token — no
       spaces to wrap on. .pr-contact__list's implicit auto grid column has
       default min-width:auto on its <li> items, which refuses to shrink a
       column below the widest unbreakable token in it; every row shares that
       one column, so the whole list (and the .pr-contact shell around it)
       was forced as wide as the email needed, however narrow the real
       viewport. At 100% zoom on a 390px phone there's just enough room for
       it to fit without visibly overflowing; 200% zoom halves the effective
       layout width, so the same email no longer fits and the page gained
       real horizontal scroll. overflow-wrap lets a long token break instead
       of forcing the column (and every sibling row) wider; min-width:0 on
       the <li> (below) is what actually lets the column shrink to use it. */
    overflow-wrap: break-word;
    word-break: break-word;
}
.pr-contact__list > li { min-width: 0; }
a.pr-contact__row:hover { border-color: var(--accent); }
.pr-contact__row--static { color: var(--soft); }

/* Footer */
.pr-foot {
    border-top: 1px solid var(--line);
    padding: 2.25rem 0 2.75rem;
    background: color-mix(in srgb, var(--cloud) 22%, var(--paper));
}
.pr-foot__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.25rem;
}
.pr-foot__name {
    font-family: var(--display);
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}
/* Previously unstyled: default inline <a> sizing left these links under the
   24px WCAG 2.5.8 target-size minimum (text-only height ~20px). */
.hb-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}
.hb-legal-links a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.25rem 0;
    font-size: 0.85rem;
    color: var(--soft);
}
.hb-legal-links a:hover { color: var(--ink); }

/* Reveal */
.pr-reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.pr-reveal.is-in { opacity: 1; transform: none; }
.js-loaded .pr-hero__copy {
    /* Opacity-only: a translateY/scale entrance here would move the hero's
       painted box on every animation frame, which the CLS Layout Instability
       metric counts as a real shift (transforms move the rendered rect even
       though they skip layout/reflow). Fading in place keeps the box's rect
       identical across frames, so this animation contributes 0 to CLS. */
    animation: prFade 0.9s var(--ease) both;
}
@keyframes prFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* WA float (optional) */
.whatsapp-float {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    /* WAVE8-02: this is the product's headline contact channel — a visitor
       who clicks it and gets nothing (no error, no feedback) silently costs
       the business an enquiry. z-index:30 used to sit BELOW .pr-nav (40) and
       .pr-nav__mobile (39): harmless while the header stays a normal ~59px
       strip, but on a short viewport a header that grows for any reason
       (long business name wrapping was the confirmed one — see
       .pr-nav__brand above, now fixed; there may be others we haven't found)
       silently wins every click at this button's screen position instead of
       opening WhatsApp. Sitting above the page chrome (41) makes that whole
       class of failure structurally impossible, not just the one trigger we
       found. Still below .wa-qr (50): the QR modal this button itself can
       open must stay on top of it.
       .pr-nav is only ~59px tall in the vast majority of real layouts, so
       this ordering change has no visible effect there — it only matters in
       the rare case something makes the header taller. */
    z-index: 41;
    width: 48px; height: 48px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: #25D366;
    color: #fff;
    box-shadow: 0 8px 24px 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; }
.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(20, 18, 15, 0.55);
    backdrop-filter: blur(4px);
}
.wa-qr__card {
    position: relative;
    background: var(--paper);
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 14px;
    width: min(92vw, 380px);
    text-align: center;
    box-shadow: 0 28px 72px rgba(20, 18, 15, 0.3);
}
.wa-qr__close {
    position: absolute; top: 0.65rem; right: 0.75rem; width: 36px; height: 36px;
    border: 0; border-radius: 50%; background: rgba(20, 18, 15, 0.07); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.wa-qr__title { margin: 0 2rem 1rem; font-family: var(--display); font-size: 1.55rem; line-height: 1.2; }
.wa-qr__code { display: grid; place-items: center; min-height: 260px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.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-size: 0.85rem; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .pr-reveal { opacity: 1; transform: none; }
}