/* Components — buttons, header, nav, tab bar, FABs, assistant, footer, cards, forms, lightbox, marquee */

/* Buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 48px; padding: 12px 24px; border-radius: var(--r-frame); font-family: var(--font-text); font-weight: 700; font-size: var(--t-small); line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--d-fast) var(--e-out), background-color var(--d-fast), border-color var(--d-fast), color var(--d-fast), box-shadow var(--d-base); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--gold-grad); color: var(--ink); border: 1px solid var(--gold-700); box-shadow: var(--sh-1); }
.btn--primary:hover { box-shadow: var(--sh-gold); }
.btn--ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn--ghost:hover { border-color: var(--gold-500); color: var(--gold-300); }
.on-paper .btn--ghost:hover { color: var(--plum-900); border-color: var(--gold-700); background: rgba(239, 212, 23, 0.14); }
.btn--lg { min-height: 56px; padding: 16px 32px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn__icon { width: 18px; height: 18px; flex: none; }

/* Inline text link that reads as a link without a glued arrow */
.link { display: inline-block; color: var(--text); font-weight: 600; text-decoration: none; padding-bottom: 2px; background-image: linear-gradient(var(--gold-500), var(--gold-500)); background-repeat: no-repeat; background-size: 0% 1px; background-position: left bottom; transition: background-size var(--d-base) var(--e-out), color var(--d-fast); }
.link:hover, .link:focus-visible { background-size: 100% 1px; color: var(--gold-300); }
.on-paper .link:hover, .on-paper .link:focus-visible { color: var(--plum-900); }

/* Chips (filters, quick replies) — round is correct here */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--r-chip); background: transparent; color: var(--text-muted); font-size: var(--t-small); font-weight: 600; cursor: pointer; transition: all var(--d-fast) var(--e-out); -webkit-tap-highlight-color: transparent; }
.chip:hover { border-color: var(--mauve-400); color: var(--text); }
.chip[aria-pressed="true"], .chip.is-active { background: var(--gold-grad); border-color: var(--gold-700); color: var(--ink); }

/* Header */
.header { position: fixed; inset: 0 0 auto 0; z-index: var(--z-header); transition: transform var(--d-slow) var(--e-out), background-color var(--d-base), border-color var(--d-base); border-bottom: 1px solid transparent; }
.header.is-stuck { background: rgba(35, 24, 33, 0.82); border-bottom-color: var(--line-soft); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
.header.is-hidden { transform: translate3d(0, -100%, 0); }

/* Utility row — collapses on scroll */
.header__utility { display: none; border-bottom: 1px solid var(--line-soft); font-size: var(--t-xs); color: var(--text-dim); overflow: hidden; height: 38px; transition: height var(--d-base) var(--e-out), opacity var(--d-fast); }
.header.is-stuck .header__utility { height: 0; opacity: 0; border-bottom-color: transparent; }
.header__utility-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); height: 38px; }
.header__utility a { text-decoration: none; }
.header__utility a:hover { color: var(--gold-300); }
/* Round 3: mauve on the utility bar measured 3.98:1 (R14). Silver clears AA,
   and upright matches the round-2 rule that supporting text is never italic grey. */
.header__slogan { font-style: normal; color: var(--silver-300); }

@media (min-width: 1024px) {
.header__utility { display: block; } }
.header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }

@media (min-width: 1024px) {
}
.brand__name { display: none; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; line-height: 1; color: var(--text); }

@media (min-width: 1280px) {
/* The logo artwork already contains the wordmark, so repeating it as text read as a duplicate. The accessible name still comes from the img alt and the link's aria-label. */
.brand__name { display: none !important; } }

/* Desktop nav */
.nav { display: none; }

@media (min-width: 1024px) {
.nav { display: flex; align-items: center; gap: var(--s-1); position: relative; }
}
.nav__link { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; font-size: var(--t-small); font-weight: 600; color: var(--text-muted); text-decoration: none; border-radius: var(--r-frame); transition: color var(--d-fast); background: none; border: 0; cursor: pointer; }
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--text); }
.nav__link[aria-current="page"] { color: var(--gold-300); }
.nav__caret { width: 10px; height: 10px; transition: transform var(--d-fast) var(--e-out); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

/* FLIP indicator */
.nav__indicator { position: absolute; bottom: 2px; left: 0; height: 2px; width: 0; background: var(--gold-grad); border-radius: 2px; opacity: 0; pointer-events: none; transition: transform var(--d-base) var(--e-out), width var(--d-base) var(--e-out), opacity var(--d-fast); }
.nav:hover .nav__indicator, .nav__indicator.is-on { opacity: 1; }
.header__cta { display: none; }

@media (min-width: 1024px) {
.header__cta { display: inline-flex; } }

/* Mega panel */
/* Desktop only. visibility:hidden still occupies layout, which overflowed 360px viewports, so it must be display:none on mobile. */
.mega { display: none; position: absolute; inset: 100% 0 auto 0; background: rgba(35, 24, 33, 0.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); box-shadow: var(--sh-3); opacity: 0; visibility: hidden; transform: translate3d(0, -8px, 0); transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out), visibility var(--d-base); }
@media (min-width: 1024px) {
.mega { display: block; } }
.mega.is-open { opacity: 1; visibility: visible; transform: none; }
.mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); padding-block: var(--s-8); }

@media (min-width: 1280px) {
.mega__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.mega__item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2); border-radius: var(--r-frame); text-decoration: none; color: var(--text-muted); border: 1px solid transparent; transition: background-color var(--d-fast), color var(--d-fast), border-color var(--d-fast); }
.mega__item:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); border-color: var(--line-soft); }
.mega__thumb { width: 56px; height: 44px; flex: none; object-fit: cover; border-radius: var(--r-frame); background: var(--surface-raised); }
.mega__label { font-size: var(--t-small); font-weight: 600; line-height: 1.25; }

/* Burger */
.burger { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-right: -10px; border-radius: var(--r-frame); color: var(--text); }

@media (min-width: 1024px) {
.burger { display: none; } }
.burger span { display: block; width: 22px; height: 2px; background: currentColor; position: relative; transition: background-color var(--d-fast); }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; transition: transform var(--d-base) var(--e-out); }
.burger span::before { top: -7px; }
.burger span::after { top: 7px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

/* Scrim (shared by mobile sheet + assistant sheet + lightbox) */
.scrim { position: fixed; inset: 0; background: rgba(10, 6, 12, 0.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; visibility: hidden; z-index: var(--z-sheet); transition: opacity var(--d-base) var(--e-out), visibility var(--d-base); }
.scrim.is-open { opacity: 1; visibility: visible; }

/* Mobile menu — full-height bottom sheet */
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-sheet) + 1); max-height: 92dvh; display: flex; flex-direction: column; background: var(--plum-800); border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; box-shadow: var(--sh-3); transform: translate3d(0, 100%, 0); visibility: hidden; transition: transform var(--d-slow) var(--e-out), visibility var(--d-slow); padding-bottom: env(safe-area-inset-bottom, 0px); }
.sheet.is-open { transform: none; visibility: visible; }
.sheet.is-dragging { transition: none; }
.sheet__handle { flex: none; padding: 10px 0 6px; display: flex; justify-content: center; cursor: grab; touch-action: none; }
.sheet__handle::before { content: ""; width: 44px; height: 4px; border-radius: 999px; background: var(--plum-600); }
.sheet__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: 0 var(--gutter) var(--s-4); border-bottom: 1px solid var(--line-soft); }
.sheet__body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--s-6) var(--gutter) var(--s-8); }
.sheet__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-chip); border: 1px solid var(--line); color: var(--text); }
.sheet__close:hover { border-color: var(--gold-500); color: var(--gold-300); }
.menu-list { display: grid; gap: 2px; }
.menu-list a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 12px 4px; font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--line-soft); }
.menu-list a[aria-current="page"] { color: var(--gold-300); }
.menu-list a:active { background: rgba(255, 255, 255, 0.04); }
.menu-sub { display: grid; gap: 2px; margin-top: var(--s-4); }
.menu-sub a { display: flex; align-items: center; gap: var(--s-3); min-height: 48px; padding: 8px 4px; font-size: var(--t-small); font-weight: 600; color: var(--text-muted); text-decoration: none; }
.menu-sub a:hover, .menu-sub a[aria-current="page"] { color: var(--gold-300); }
.menu-sub img { width: 44px; height: 34px; object-fit: cover; border-radius: var(--r-frame); flex: none; }
.menu-contact { margin-top: var(--s-8); display: grid; gap: var(--s-3); }

/* Mobile app tab bar */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabbar); height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; background: rgba(35, 24, 33, 0.92); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-top: 1px solid var(--line-soft); }

@media (min-width: 1024px) {
.tabbar { display: none; } }
.tabbar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: var(--tabbar-h); color: var(--text-dim); text-decoration: none; font-size: 10px; font-weight: 600; letter-spacing: 0.01em; transition: color var(--d-fast), transform var(--d-fast) var(--e-out); -webkit-tap-highlight-color: transparent; }
.tabbar__item:active { transform: scale(0.94); }
.tabbar__item svg { width: 22px; height: 22px; }
.tabbar__item[aria-current="page"] { color: var(--gold-500); }
.tabbar__call { position: relative; color: var(--ink); }
.tabbar__call .tabbar__disc { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-top: -22px; border-radius: var(--r-fab); background: var(--gold-grad); border: 3px solid var(--plum-900); box-shadow: var(--sh-gold); transition: transform var(--d-fast) var(--e-out); }
.tabbar__call svg { width: 24px; height: 24px; }
.tabbar__call span:last-child { color: var(--gold-500); }
.tabbar__call:active .tabbar__disc { transform: scale(0.94); }

/* Floating action buttons — AI (left) + back-to-top (right), same baseline */
.fab { position: fixed; bottom: var(--fab-bottom); z-index: var(--z-fab); width: var(--fab-size); height: var(--fab-size); display: flex; align-items: center; justify-content: center; border-radius: var(--r-fab); background: var(--plum-800); border: 1px solid var(--line); color: var(--text); box-shadow: var(--sh-2); transition: transform var(--d-base) var(--e-out), opacity var(--d-base) var(--e-out), border-color var(--d-fast), background-color var(--d-fast); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.fab:active { transform: scale(0.94); }
.fab svg { width: 24px; height: 24px; }
.fab--ai { left: var(--fab-inset); }
.fab--top { right: var(--fab-inset); }

/* gold ring on the assistant button + idle pulse */
.fab--ai::before { content: ""; position: absolute; inset: -2px; border-radius: var(--r-fab); background: var(--gold-grad); z-index: -1; }
.fab--ai::after { content: ""; position: absolute; inset: -2px; border-radius: var(--r-fab); border: 2px solid var(--gold-500); opacity: 0; animation: fabPulse 3.4s var(--e-out) infinite; }

@keyframes fabPulse {
0% { opacity: 0.6; transform: scale(1); }
60%, 100% { opacity: 0; transform: scale(1.35); }
}

@media (prefers-reduced-motion: reduce) {
.fab--ai::after { animation: none; } }

/* back-to-top: hidden until 600px, progress ring around it */
.fab--top { opacity: 0; visibility: hidden; transform: scale(0.8); }
.fab--top.is-visible { opacity: 1; visibility: visible; transform: none; }
.fab--top.is-hidden-by-panel { opacity: 0; visibility: hidden; pointer-events: none; }
.fab__ring { position: absolute; inset: -4px; width: calc(var(--fab-size) + 8px); height: calc(var(--fab-size) + 8px); transform: rotate(-90deg); pointer-events: none; }
.fab__ring circle { fill: none; stroke-width: 2; }
.fab__ring .track { stroke: var(--line); }
.fab__ring .bar { stroke: var(--gold-500); stroke-linecap: round; transition: stroke-dashoffset 90ms linear; }
.fab__arrow { transition: opacity var(--d-fast); }
.fab__target { position: absolute; opacity: 0; transition: opacity var(--d-fast); }
.fab--top:hover .fab__arrow { opacity: 0; }
.fab--top:hover .fab__target { opacity: 1; }

/* one-time assistant tooltip */
.fab__tip { position: fixed; left: var(--fab-inset); bottom: calc(var(--fab-bottom) + var(--fab-size) + 10px); z-index: var(--z-fab); max-width: min(260px, calc(100vw - 32px)); padding: 10px 14px; background: var(--paper-100); color: var(--plum-900); font-size: var(--t-xs); font-weight: 600; line-height: 1.35; border-radius: var(--r-card); box-shadow: var(--sh-2); opacity: 0; visibility: hidden; transform: translate3d(0, 6px, 0); transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out), visibility var(--d-base); }
.fab__tip.is-open { opacity: 1; visibility: visible; transform: none; }
.fab__tip::after { content: ""; position: absolute; left: 20px; bottom: -5px; width: 10px; height: 10px; background: var(--paper-100); transform: rotate(45deg); }

/* Assistant panel */
.ai { position: fixed; z-index: calc(var(--z-sheet) + 2); display: flex; flex-direction: column; background: var(--plum-800); border: 1px solid var(--line); box-shadow: var(--sh-3); overflow: hidden; visibility: hidden; /* mobile: full-height bottom sheet */ left: 0; right: 0; bottom: 0; height: 88dvh; border-radius: 16px 16px 0 0; transform: translate3d(0, 100%, 0); transition: transform var(--d-slow) var(--e-out), visibility var(--d-slow), opacity var(--d-base); padding-bottom: env(safe-area-inset-bottom, 0px); }
.ai.is-open { transform: none; visibility: visible; }

@media (min-width: 1024px) {
.ai { left: var(--fab-inset); right: auto; bottom: calc(var(--fab-bottom) + var(--fab-size) + 12px); width: 380px; height: 560px; max-height: calc(100dvh - 140px); border-radius: var(--r-card); transform: translate3d(0, 12px, 0) scale(0.98); opacity: 0; transform-origin: left bottom; }
.ai.is-open { transform: none; opacity: 1; }
}
.ai__head { flex: none; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line-soft); background: var(--plum-900); }
.ai__head img { width: 32px; height: 32px; object-fit: contain; flex: none; }
.ai__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; line-height: 1.1; }
.ai__sub { font-size: 11px; color: var(--text-dim); line-height: 1.2; }
.ai__head-actions { margin-left: auto; display: flex; gap: 4px; }
.ai__iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-chip); color: var(--text-muted); transition: background-color var(--d-fast), color var(--d-fast); }
.ai__iconbtn:hover { background: rgba(255, 255, 255, 0.07); color: var(--text); }
.ai__iconbtn svg { width: 18px; height: 18px; }
.ai__handle { display: flex; justify-content: center; padding: 8px 0 2px; touch-action: none; cursor: grab; }
.ai__handle::before { content: ""; width: 44px; height: 4px; border-radius: 999px; background: var(--plum-600); }

@media (min-width: 1024px) {
.ai__handle { display: none; } }
.ai__log { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); overscroll-behavior: contain; }
.msg { display: flex; flex-direction: column; max-width: 86%; }
.msg--bot { align-self: flex-start; }
.msg--user { align-self: flex-end; align-items: flex-end; }
.msg__bubble { padding: 10px 14px; border-radius: 14px; font-size: var(--t-small); line-height: 1.5; background: var(--surface-raised); border: 1px solid var(--line-soft); border-bottom-left-radius: 4px; }
.msg--user .msg__bubble { background: var(--gold-grad); color: var(--ink); border-color: var(--gold-700); border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; font-weight: 600; }
.msg__bubble p { margin-bottom: 0.5em; }
.msg__bubble p:last-child { margin-bottom: 0; }
.msg__bubble strong { color: var(--gold-300); }
.msg--user .msg__bubble strong { color: inherit; }
.msg__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.msg__action { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-chip); background: transparent; color: var(--text-muted); font-size: var(--t-xs); font-weight: 600; text-decoration: none; cursor: pointer; transition: all var(--d-fast); }
.msg__action:hover { border-color: var(--gold-500); color: var(--gold-300); }
.msg__action svg { width: 14px; height: 14px; }
.typing { display: inline-flex; gap: 4px; padding: 14px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--mauve-400); animation: typingDot 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: 0.16s; }
.typing i:nth-child(3) { animation-delay: 0.32s; }

@keyframes typingDot {
0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); } }
.ai__quick { flex: none; display: flex; gap: 6px; padding: var(--s-2) var(--s-4); overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--line-soft); }
.ai__quick::-webkit-scrollbar { display: none; }
.ai__quick .chip { min-height: 36px; padding: 6px 12px; font-size: var(--t-xs); white-space: nowrap; }
.ai__form { flex: none; display: flex; gap: var(--s-2); padding: var(--s-3) var(--s-4) var(--s-4); border-top: 1px solid var(--line-soft); background: var(--plum-900); }
.ai__input { flex: 1; min-height: 44px; padding: 10px 14px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-chip); color: var(--text); font-size: 16px; /* prevents iOS zoom */ }
.ai__input::placeholder { color: var(--text-dim); }
.ai__input:focus-visible { border-color: var(--gold-500); outline-offset: 1px; }
.ai__send { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-fab); background: var(--gold-grad); color: var(--ink); border: 1px solid var(--gold-700); transition: transform var(--d-fast) var(--e-out); }
.ai__send:active { transform: scale(0.94); }
.ai__send svg { width: 18px; height: 18px; }

/* quote summary card */
.quote-card { border: 1px solid var(--gold-700); border-radius: var(--r-card); padding: var(--s-3); background: rgba(239, 212, 23, 0.06); font-size: var(--t-xs); }
.quote-card dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; }
.quote-card dt { color: var(--text-dim); }
.quote-card dd { margin: 0; color: var(--text); font-weight: 600; }

/* Cards */
.card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-card); overflow: hidden; transition: border-color var(--d-base), transform var(--d-base) var(--e-out); }
.card__media { position: relative; overflow: hidden; background: var(--surface-raised); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-slow) var(--e-out); }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.card__title { font-size: var(--t-h4); font-family: var(--font-display); font-weight: 600; }
.card__text { font-size: var(--t-small); color: var(--text-muted); }

/* Forms */
.field { display: grid; gap: 6px; }
.field__label { font-size: var(--t-xs); font-weight: 700; color: var(--text-muted); }
.field__req { color: var(--gold-500); }
.field__hint { font-size: var(--t-xs); color: var(--text-dim); }
.input, .textarea, .select { width: 100%; min-height: 48px; padding: 12px 14px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-frame); color: var(--text); font-size: 16px; transition: border-color var(--d-fast), background-color var(--d-fast); }
.on-paper .input, .on-paper .textarea, .on-paper .select { background: #fff; }
.input::placeholder, .textarea::placeholder { color: var(--text-dim); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--mauve-400); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { border-color: var(--gold-500); }
.textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237c707e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 38px; }
.field.is-invalid .input, .field.is-invalid .textarea, .field.is-invalid .select { border-color: var(--danger); }
.field__error { display: none; align-items: center; gap: 5px; font-size: var(--t-xs); font-weight: 600; color: var(--danger); }
.field.is-invalid .field__error { display: flex; }
.field__error svg { width: 14px; height: 14px; flex: none; }
.form__status { display: none; padding: var(--s-4); border-radius: var(--r-card); font-size: var(--t-small); }
.form__status.is-on { display: block; }
.form__status--ok { background: rgba(125, 220, 138, 0.12); border: 1px solid rgba(125, 220, 138, 0.4); color: var(--ok); }
.form__status--err { background: rgba(255, 107, 107, 0.1); border: 1px solid rgba(255, 107, 107, 0.4); color: var(--danger); }
.on-paper .form__status--ok { color: #1c6b2a; }
.on-paper .form__status--err { color: #a31616; }
.form__status a { color: inherit; font-weight: 700; }
.honey { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

/* Toast */
.toast-host { position: fixed; left: 50%; bottom: calc(var(--fab-bottom) + var(--fab-size) + 12px); transform: translateX(-50%); z-index: calc(var(--z-fab) + 5); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.toast { padding: 10px 18px; background: var(--paper-100); color: var(--plum-900); border-radius: var(--r-chip); font-size: var(--t-small); font-weight: 700; box-shadow: var(--sh-2); animation: toastIn 220ms var(--e-out); }

@keyframes toastIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; } }

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: var(--z-lightbox); background: rgba(10, 6, 12, 0.96); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity var(--d-base) var(--e-out), visibility var(--d-base); }
.lb.is-open { opacity: 1; visibility: visible; }
.lb__bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--gutter); padding-top: calc(var(--s-3) + env(safe-area-inset-top, 0px)); color: var(--text-muted); font-size: var(--t-xs); }
.lb__stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.lb__img { -webkit-user-drag: none; user-select: none; }
.lb__img { max-width: calc(100vw - 32px); max-height: 100%; object-fit: contain; border-radius: var(--r-frame); will-change: transform; }
.lb__img.is-zoomed { transform: scale(2); cursor: zoom-out; }
.lb__cap { flex: none; padding: var(--s-3) var(--gutter); padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: var(--t-xs); color: var(--text-dim); min-height: 48px; }
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-fab); background: rgba(35, 24, 33, 0.8); border: 1px solid var(--line); color: var(--text); transition: background-color var(--d-fast), border-color var(--d-fast); }
.lb__nav:hover { border-color: var(--gold-500); }
.lb__nav[disabled] { opacity: 0.3; pointer-events: none; }
.lb__nav--prev { left: 12px; }
.lb__nav--next { right: 12px; }
.lb__nav svg { width: 20px; height: 20px; }

/* Marquee (clients) — pauses off-screen and on hover */
.marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; gap: clamp(32px, 5vw, 72px); will-change: transform; }
.marquee__item { font-family: var(--font-display); font-size: clamp(2.25rem, 6vw, 4.5rem); font-weight: 800; line-height: 1.1; color: transparent; -webkit-text-stroke: 1px var(--plum-600); white-space: nowrap; transition: -webkit-text-stroke-color var(--d-base), color var(--d-base); }
.marquee__item:hover { -webkit-text-stroke-color: var(--gold-500); }

@media (prefers-reduced-motion: reduce) {
.marquee { -webkit-mask-image: none; mask-image: none; }
.marquee__track { flex-wrap: wrap; width: auto; gap: var(--s-4) var(--s-8); justify-content: center; }
.marquee__item { font-size: clamp(1.5rem, 4vw, 2.25rem); }
}

/* Desktop cursor enhancer */
.cursor { position: fixed; top: 0; left: 0; width: 26px; height: 26px; border: 1px solid var(--gold-500); border-radius: var(--r-fab); pointer-events: none; z-index: 150; opacity: 0; display: none; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--ink); text-transform: none; will-change: transform; }
.cursor__label { opacity: 0; white-space: nowrap; }
.cursor.is-active { background: var(--gold-500); width: 72px; height: 72px; }
.cursor.is-active .cursor__label { opacity: 1; }

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
.cursor { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
.cursor { display: none !important; } }

/* Footer */
.footer { position: relative; background: var(--plum-800); border-top: 1px solid var(--line-soft); padding-top: clamp(56px, 7vw, 96px); overflow: hidden; /* diagonal cut echoing the logo triangle */ clip-path: polygon(0 clamp(20px, 3.5vw, 48px), 100% 0, 100% 100%, 0 100%); margin-top: calc(-1 * clamp(20px, 3.5vw, 48px)); }
.footer__wordmark { position: absolute; left: 50%; bottom: clamp(48px, 8vw, 90px); transform: translateX(-50%); width: min(1500px, 128%); pointer-events: none; opacity: 0.5; z-index: 0; }
.footer__wordmark text { fill: none; stroke: var(--plum-600); stroke-width: 0.6; font-family: var(--font-display); font-weight: 800; font-size: 58px; letter-spacing: -0.01em; }
.footer__in { position: relative; z-index: 1; }
.footer__top { display: grid; gap: var(--s-10); }

@media (min-width: 900px) {
.footer__top { grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr)); gap: var(--s-8); } }
.footer__slogan { margin-top: var(--s-4); font-style: normal; color: var(--silver-300); font-size: var(--t-small); max-width: 34ch; }
.footer__h { font-family: var(--font-text); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.04em; color: var(--text); margin-bottom: var(--s-4); }
.footer__list { display: grid; gap: 10px; }
.footer__list a { font-size: var(--t-small); color: var(--text-dim); text-decoration: none; transition: color var(--d-fast); }
.footer__list a:hover { color: var(--gold-300); }
.footer__contact { display: grid; gap: var(--s-3); font-size: var(--t-small); }
.footer__contact a { color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.footer__contact a:hover { color: var(--gold-300); }
.footer__contact svg { width: 16px; height: 16px; flex: none; color: var(--mauve-400); }
.footer__bottom { margin-top: clamp(40px, 6vw, 72px); padding: var(--s-5) 0; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); font-size: var(--t-xs); color: var(--text-dim); }
.footer__bottom a { color: var(--text-muted); text-decoration: none; }
.footer__bottom a:hover { color: var(--gold-300); }

/* Page transition wipe (JS fallback for @view-transition) */
.wipe {
position: fixed; inset: 0; z-index: var(--z-preloader); background: var(--plum-900); transform: scaleY(0); transform-origin: bottom; pointer-events: none; visibility: hidden; }
.wipe.is-on { visibility: visible; }

/* === ROUND 2 === */
/* --- transparent-over-hero header, glass after scroll --- */
.header { background: transparent; }
.header.is-stuck { background: rgba(35,24,33,.60); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom-color: rgba(255,255,255,.06); }
.header__progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform: scaleX(0); transform-origin: left center; background: var(--gold-grad); opacity: 0; transition: opacity var(--d-base); }
.header.is-stuck .header__progress { opacity: 1; }

/* --- logo: bigger, crisper, lifted off the plum with a soft halo --- */
.brand img { height: 44px; width: auto; filter: drop-shadow(0 0 14px rgba(197,196,197,.30)) drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
@media (min-width: 1024px) { .brand img { height: 60px; } }
.footer__brand img { height: 84px; filter: drop-shadow(0 0 18px rgba(197,196,197,.26)); }
.preloader__logo img { filter: drop-shadow(0 0 22px rgba(197,196,197,.28)); }
.nav__link { font-size: .9375rem; padding: 10px 16px; letter-spacing: .01em; }

/* --- glass secondary buttons + light sweep on primary --- */
.btn--ghost { background: rgba(255,255,255,.04); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: rgba(255,255,255,.16); }
.on-paper .btn--ghost { background: rgba(35,24,33,.04); border-color: rgba(35,24,33,.22); }
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(0); pointer-events: none;
}
.btn--primary:hover::after { animation: sweep 720ms var(--e-out); }
@keyframes sweep { to { transform: translateX(420%); } }
@media (prefers-reduced-motion: reduce) { .btn--primary:hover::after { animation: none; } }

/* --- lightbox chrome --- */
.lb__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); color: var(--text); background: rgba(35,24,33,.6); }
.lb__close:hover { border-color: var(--gold-500); color: var(--gold-300); }
.lb__close svg { width: 18px; height: 18px; }
.lb__spin { position: absolute; width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,.22); border-top-color: var(--gold-500); opacity: 0; }
.lb.is-loading .lb__spin { opacity: 1; animation: lbspin 760ms linear infinite; }
@keyframes lbspin { to { transform: rotate(360deg); } }
.lb__strip { display: none; }
@media (min-width: 1024px) {
.lb__strip { display: flex; gap: 8px; overflow-x: auto; padding: 10px var(--gutter) 16px; scrollbar-width: thin; }
.lb__thumb { flex: 0 0 76px; height: 56px; padding: 0; border: 1px solid transparent; border-radius: 2px; overflow: hidden; opacity: .5; background: none; cursor: pointer; transition: opacity var(--d-fast), border-color var(--d-fast); }
.lb__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lb__thumb:hover { opacity: .85; }
.lb__thumb.is-active { opacity: 1; border-color: var(--gold-500); }
}
.lb, .lb__strip { overscroll-behavior: contain; }

/* --- back-to-top: ring concentric with the button --- */
.fab--top .fab__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); transform-origin: 50% 50%; overflow: visible; }
.fab--ai { background: rgba(35,24,33,.72); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); }
.fab--top { background: rgba(35,24,33,.72); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); }

/* --- strengths become one spec band divided by hairlines (no boxes) --- */
.spec { display: grid; gap: 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
@media (min-width: 768px) { .spec { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .spec { grid-template-columns: repeat(4, 1fr); } }
.spec__item { display: grid; gap: var(--s-3); align-content: start; padding: clamp(24px, 3vw, 36px) clamp(16px, 2vw, 28px); border-top: 1px solid var(--line-soft); }
@media (min-width: 768px) { .spec__item { border-top: 0; border-left: 1px solid var(--line-soft); } .spec__item:first-child { border-left: 0; } }
@media (min-width: 768px) and (max-width: 1023px) { .spec__item:nth-child(odd) { border-left: 0; } .spec__item:nth-child(n+3) { border-top: 1px solid var(--line-soft); } }
.spec__icon { width: 30px; height: 30px; color: var(--gold-500); }
.on-paper .spec__icon { color: var(--gold-700); }
.spec__icon path, .spec__icon circle, .spec__icon rect, .spec__icon line, .spec__icon polyline { stroke: currentColor; stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* --text-muted, NOT --silver-300: the band also runs on .on-paper, where a
   hardcoded silver gives 1.53:1. The token is silver on dark and #4a3f4c on paper. */
.spec__t { font-size: .9375rem; font-weight: 600; line-height: 1.4; color: var(--text-muted); font-family: var(--font-text); }
/* === /ROUND 2 === */
/* === ROUND 3 === */

/* Runda 5 (3.3) — „cena po upitu“: jedan red u heru stranice usluge, ispod
   poziva na akciju. Tanka zlatna linija levo, bez dugmadi i bez ikonice.
   Blaga tamna podloga drzi kontrast (AA) nezavisno od fotografije iza. */
.price-note { margin-top: var(--s-5); max-width: 62ch; padding: 8px 14px; border-left: 2px solid var(--gold-500); border-radius: 0 var(--r-frame) var(--r-frame) 0; background: rgba(23, 16, 26, 0.62); color: var(--text); font-size: var(--t-small); line-height: 1.5; }
.price-note strong { color: var(--gold-300); font-weight: 700; }
@media (max-width: 767px) { .price-note { margin-top: var(--s-4); padding: 6px 12px; font-size: var(--t-xs); } }

/* 1.12 Service links under the shortened about text on onama.html */
.tag-list { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; }
.tag-list a { display: inline-block; padding: 7px 14px; border: 1px solid var(--line-soft); border-radius: var(--r-chip); font-size: var(--t-xs); font-weight: 600; color: var(--text-muted); text-decoration: none; transition: color var(--d-fast), border-color var(--d-fast); }
.tag-list a:hover, .tag-list a:focus-visible { color: var(--text); border-color: var(--gold-500); }

/* === ROUND 3 (section 4): mobile polish === */
/* The assistant button read as a dull dark circle next to the gold-ringed
   back-to-top. Cause: .fab sets z-index and so opens a stacking context, so
   .fab--ai::before (z-index:-1) painted BEHIND the button's own opaque
   background and the ring never showed. A gradient border-box cannot be
   hidden that way. */
.fab--ai { border: 2px solid transparent; background: linear-gradient(var(--plum-800), var(--plum-800)) padding-box, var(--gold-grad) border-box; box-shadow: var(--sh-2), 0 0 18px rgba(248, 233, 102, .32); }
.fab--ai::before { content: none; }
.fab--ai svg { color: var(--gold-300); }

/* The back-to-top outline was briefly lightened here on the strength of a
   screenshot measurement that turned out to be sampling the wrong radii — it
   read the button's dark interior rather than the ring, which is drawn OUTSIDE
   the button and whose progress arc is already gold. Both controls are plainly
   visible (see the C15 evidence screenshot), so this is reverted and the two
   buttons keep the weighting the client asked for in item 4. */

/* Floating buttons used to sit on top of the last link of a section
   ("Saznajte više o nama"). Give the page enough bottom clearance on phones. */
@media (max-width: 1023px) {
  .section:last-of-type, .cta-band { padding-bottom: calc(var(--section-y) + var(--fab-size) + 16px); }
}

/* Long body copy uses the body size on phones; display sizes stay for headings. */
@media (max-width: 640px) {
  .lead { font-size: var(--t-body); line-height: var(--lh-body); }
}

/* Galleries are long; let the browser skip off-screen work. */
.gallery { content-visibility: auto; contain-intrinsic-size: 1px 1200px; }

/* ---------------------------------------------------------------------------
   Runda 4 (4.2) — „Više o usluzi“ i „Česta pitanja“.
   Akordeon je native <details>/<summary>: radi sa tastature (Enter/Space),
   čitač ekrana ga čita kao dugme sa stanjem, a odgovor stoji u HTML-u i kada je
   zatvoren, pa ga pretraživač vidi. Bez ijedne linije JavaScript-a.
   --------------------------------------------------------------------------- */
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 var(--s-5); color: var(--text-muted); line-height: var(--lh-body); }
.prose p:last-child { margin-bottom: 0; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }

.faq { max-width: var(--measure); border-top: 1px solid var(--line-soft); }
.faq__item { border-bottom: 1px solid var(--line-soft); }
.faq__q {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5) var(--s-8) var(--s-5) 0;
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-h4);
  color: var(--text); cursor: pointer; list-style: none; position: relative;
}
.faq__q::-webkit-details-marker { display: none; }
/* Plus koji postaje minus — crta se iz dve linije, bez slike i bez ikone. */
.faq__q::after,
.faq__q::before {
  content: ""; position: absolute; right: 2px; top: 50%;
  width: 14px; height: 2px; background: var(--accent);
  transition: transform var(--d-fast) var(--e-out), opacity var(--d-fast) var(--e-out);
}
.faq__q::before { transform: translateY(-50%); }
.faq__q::after { transform: translateY(-50%) rotate(90deg); }
.faq__item[open] .faq__q::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.faq__q:hover { color: var(--accent); }
.faq__q:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.faq__a { padding: 0 var(--s-8) var(--s-6) 0; }
.faq__a p { margin: 0; color: var(--text-muted); line-height: var(--lh-body); }

/* Na svetloj (paper) podlozi zlatna bi pala ispod AA, pa linije idu u mastilo. */
.on-paper .faq__q { color: var(--ink); }
.on-paper .faq__q::before,
.on-paper .faq__q::after { background: var(--ink); }
.on-paper .prose p,
.on-paper .faq__a p { color: #3a3340; }

@media (prefers-reduced-motion: reduce) {
  .faq__q::before, .faq__q::after { transition: none; }
}