/*
 * Buildingcase 2026 — base: token, tipografia, pulsanti, rail laterale, menu mobile, hero con skyline.
 * Identita' di buildingcase.it (blu, rosso, Istok Web) in chiave architettonica: spigoli netti, griglia di progetto.
 * Il portale impone colori con !important su p/li/span/label e titoli: ogni sezione ridefinisce --ink / --ink-strong.
 */

body[data-ms-layout="buildingcase2026"] {
  --bc-blue: #234ea2;
  --bc-blue-2: #2f63c9;
  --bc-deep: #14306e;
  --bc-night: #0d1f4a;
  --bc-red: #e91d25;
  --bc-red-d: #c4141b;
  --bc-paper: #f4f6fa;
  --bc-ink: #1b2438;
  --bc-muted: #55607a;
  --bc-line: rgba(35, 78, 162, 0.18);
  --bc-sans: "Istok Web", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bc-rail: 84px;

  /* Elenco e scheda immobile ereditano i colori della casa. */
  --brand: #234ea2;
  --brand-strong: #14306e;
  --brand-2: #14306e;
  --brand-soft: #2f63c9;
  --brand-rgb: 35, 78, 162;
  --brand-ghost: #e8eef9;
  --brand-wash: #f4f6fa;
  --accent: #e91d25;
  --bg: #f4f6fa;
  --surface: #fff;
  --surface-2: #f4f6fa;
  --card: #fff;
  --card-soft: #f4f6fa;
  --line: #d9e0ee;
  --muted: #55607a;
  --page-bg: #f4f6fa;
  --hero-bg: #f4f6fa;
  --footer-bg: #0d1f4a;
  --shadow-soft: 0 10px 30px rgba(20, 48, 110, 0.08);
  --shadow-strong: 0 18px 44px rgba(20, 48, 110, 0.18);
  --focus-ring: 0 0 0 3px rgba(233, 29, 37, 0.35);
  --text: #1b2438;
  --ink: #1b2438;
  --ink-strong: #1b2438;

  background: var(--bc-paper);
  color: var(--bc-ink);
  font-family: var(--bc-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Sezioni scure: testo chiaro. */
.bc-rail, .bc-topbar, .bc-menu, .bc-ticker, .bc-sede, .bc-cta, .bc-footer, .bc-phero, .bc-search, .bc-office,
.bc-hs-card--intro, .bc-svc-col--blue, .bc-ccard--red {
  --ink: #fff;
  --ink-strong: #fff;
}

.bc-hero, .bc-listing, .bc-hs-card:not(.bc-hs-card--intro), .bc-ccard:not(.bc-ccard--red), .bc-pillars article, .bc-list {
  --ink: #1b2438;
  --ink-strong: #1b2438;
}

/* Elementi con colore proprio: --ink locale, cosi' il portale non li ricolora. */
.bc-red-ink { --ink: #e91d25; --ink-strong: #e91d25; }

body[data-ms-layout="buildingcase2026"] .sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.bc-root { overflow-x: clip; }
.bc-wrap { width: min(1220px, 100% - 36px); margin-inline: auto; }
@media (min-width: 720px) { .bc-wrap { width: min(1220px, 100% - 64px); } }
@media (min-width: 1040px) { .bc-root, .bc-footer { margin-left: var(--bc-rail); } }

.bc-ico { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------ tipografia */
.bc-kicker {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px; font: 700 0.78rem/1 var(--bc-sans); letter-spacing: 0.2em; text-transform: uppercase;
  --ink: #e91d25; --ink-strong: #e91d25;
}
.bc-kicker::before { content: ""; width: 34px; height: 3px; background: currentColor; transform-origin: left; }
.bc-js .bc-kicker[data-reveal]::before { transform: scaleX(0); transition: transform 0.9s var(--bc-ease) 0.2s; }
.bc-js .bc-kicker.is-in::before { transform: none; }
.bc-sede .bc-kicker, .bc-phero .bc-kicker, .bc-svc-col--blue .bc-kicker, .bc-office .bc-kicker { --ink: #ffb0b4; --ink-strong: #ffb0b4; }
.bc-cta .bc-kicker { --ink: #fff; --ink-strong: #fff; }

.bc-display { margin: 0 0 24px; font: 700 clamp(2.9rem, min(1rem + 9.5vw, 11.5vh), 7.4rem) / 0.95 var(--bc-sans); letter-spacing: -0.035em; --ink: #14306e; --ink-strong: #14306e; }
.bc-display--page { font-size: clamp(2.3rem, 1rem + 6vw, 5rem); --ink: #fff; --ink-strong: #fff; }
.bc-display em { font-style: normal; color: transparent; -webkit-text-stroke: 2px var(--bc-red); -webkit-text-fill-color: transparent; }
.bc-line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.bc-line > span { display: block; }
.bc-js .bc-line > span { animation: bc-rise 1s var(--bc-ease) both; animation-delay: calc(0.15s + var(--l, 0) * 0.14s); }
@keyframes bc-rise { from { transform: translateY(110%); } }
.bc-pop { animation: bc-fade 0.8s var(--bc-ease) both; }
@keyframes bc-fade { from { opacity: 0; transform: translateY(14px); } }

.bc-h2 { margin: 0 0 18px; font: 700 clamp(1.8rem, 1rem + 3.4vw, 3.3rem) / 1.06 var(--bc-sans); letter-spacing: -0.025em; --ink: #14306e; --ink-strong: #14306e; }
.bc-sede .bc-h2, .bc-cta .bc-h2, .bc-office .bc-h2, .bc-svc-col--blue .bc-h2 { --ink: #fff; --ink-strong: #fff; }
.bc-lead { margin: 0; max-width: 38rem; font: 400 clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem) / 1.65 var(--bc-sans); color: var(--bc-muted); --ink: #55607a; }
.bc-phero .bc-lead { --ink: #dbe5fb; }
.bc-copy { margin: 0 0 24px; max-width: 32rem; font: 400 1.05rem / 1.75 var(--bc-sans); --ink: #55607a; }

.bc-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; }
.bc-w > span { display: inline-block; }
.bc-js [data-split]:not(.is-in) .bc-w > span { transform: translateY(110%); }
.bc-js [data-split] .bc-w > span { transition: transform 0.9s var(--bc-ease); transition-delay: calc(var(--d, 0ms) + var(--w, 0) * 70ms); }
.bc-js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--bc-ease), transform 0.8s var(--bc-ease); transition-delay: var(--d, 0ms); }
.bc-js [data-reveal="zoom"] { transform: scale(0.94); }
.bc-js [data-reveal].is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------ pulsanti: spigoli netti */
.bc-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border: 2px solid transparent; border-radius: 0;
  font: 700 0.95rem/1 var(--bc-sans); letter-spacing: 0.02em; text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate;
  transition: transform 0.35s var(--bc-ease), box-shadow 0.35s; will-change: transform;
}
.bc-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bc-night); transform: translateX(-101%); transition: transform 0.5s var(--bc-ease); }
.bc-btn:hover::before { transform: none; }
.bc-btn .bc-ico { transition: transform 0.35s var(--bc-ease); }
.bc-btn:hover .bc-ico { transform: translateX(4px); }
.bc-btn--red { background: var(--bc-red); color: #fff; }
.bc-btn--blue { background: var(--bc-blue); color: #fff; }
.bc-btn--white { background: #fff; color: var(--bc-deep); }
.bc-btn--white::before { background: var(--bc-red); }
.bc-btn--outline { border-color: var(--bc-deep); color: var(--bc-deep); }
.bc-btn--outline::before { background: var(--bc-deep); }
.bc-btn--outline:hover { color: #fff; }
.bc-btn--line { border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.bc-btn--line::before { background: #fff; }
.bc-btn--line:hover { color: var(--bc-deep); }
.bc-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.bc-center { display: flex; justify-content: center; margin-top: 34px; }

/* ------------------------------------------------------------ rail laterale (desktop) e barra superiore (mobile) */
.bc-header { position: relative; z-index: 60; }
.bc-rail { display: none; }
.bc-topbar { position: fixed; z-index: 60; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 16px; background: rgba(13, 31, 74, 0.94); backdrop-filter: blur(12px); }
.bc-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.bc-brand-mark { width: 38px; height: 38px; flex: 0 0 auto; }
.bc-brand-text { display: flex; flex-direction: column; line-height: 1; white-space: nowrap; }
.bc-brand-text b { font: 700 1.1rem/1 var(--bc-sans); letter-spacing: -0.01em; color: #fff; }
.bc-brand-text i { margin-top: 4px; font: 700 0.64rem/1 var(--bc-sans); font-style: normal; letter-spacing: 0.3em; text-transform: uppercase; color: #ffb0b4; }
.bc-burger { position: relative; width: 46px; height: 46px; border: 0; background: var(--bc-red); cursor: pointer; }
.bc-burger i { position: absolute; left: 12px; width: 22px; height: 2px; background: #fff; transition: transform 0.4s var(--bc-ease), opacity 0.3s; }
.bc-burger i:nth-child(1) { top: 15px; }
.bc-burger i:nth-child(2) { top: 22px; }
.bc-burger i:nth-child(3) { top: 29px; }
.bc-burger[aria-expanded="true"] i:nth-child(1) { top: 22px; transform: rotate(45deg); }
.bc-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.bc-burger[aria-expanded="true"] i:nth-child(3) { top: 22px; transform: rotate(-45deg); }
.bc-progress { position: fixed; z-index: 61; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; }
.bc-progress i { display: block; height: 100%; background: var(--bc-red); transform: scaleX(0); transform-origin: left; }

.bc-menu { position: fixed; z-index: 55; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 90px 28px 100px; background: var(--bc-night); clip-path: inset(0 0 100% 0); transition: clip-path 0.7s var(--bc-ease); }
.bc-menu.is-open { clip-path: inset(0); }
.bc-menu[hidden] { display: none; }
.bc-menu-nav { display: flex; flex-direction: column; }
.bc-menu-nav a { display: flex; align-items: baseline; gap: 14px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); font: 700 clamp(1.9rem, 8vw, 2.8rem) / 1.1 var(--bc-sans); letter-spacing: -0.02em; color: #fff; text-decoration: none; }
.bc-menu-nav small { font: 700 0.8rem/1 var(--bc-sans); letter-spacing: 0.12em; color: var(--bc-red); }
.bc-menu-back { margin-top: 22px; font: 700 0.95rem/1 var(--bc-sans); color: #ffb0b4; text-decoration: none; }
.bc-menu-foot { margin: 22px 0 0; font: 400 1rem/1.7 var(--bc-sans); color: #aab8dc; }
.bc-menu-foot a { color: #fff; font-weight: 700; }
body.bc-menu-open { overflow: hidden; }
body.bc-menu-open .bc-fab { display: none; }

.bc-fab { position: fixed; z-index: 58; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); display: grid; place-items: center; width: 58px; height: 58px; background: var(--bc-red); color: #fff; box-shadow: 0 10px 28px rgba(233, 29, 37, 0.45); animation: bc-pulse 2.6s ease-out infinite; }
.bc-fab .bc-ico { width: 24px; height: 24px; }
@keyframes bc-pulse { 0% { box-shadow: 0 10px 28px rgba(233, 29, 37, 0.45), 0 0 0 0 rgba(233, 29, 37, 0.5); } 70%, 100% { box-shadow: 0 10px 28px rgba(233, 29, 37, 0.45), 0 0 0 18px rgba(233, 29, 37, 0); } }

@media (min-width: 1040px) {
  .bc-topbar, .bc-fab, .bc-menu { display: none; }
  .bc-rail { position: fixed; z-index: 60; top: 0; left: 0; bottom: 0; display: flex; flex-direction: column; width: var(--bc-rail); padding: 18px 0; background: var(--bc-night); overflow: hidden; transition: width 0.5s var(--bc-ease), box-shadow 0.5s; }
  .bc-rail:hover, .bc-rail:focus-within { width: 250px; box-shadow: 18px 0 50px rgba(13, 31, 74, 0.35); }
  .bc-rail .bc-brand { padding: 0 23px; margin-bottom: 36px; }
  .bc-rail .bc-brand-text { opacity: 0; transform: translateX(-8px); transition: opacity 0.3s, transform 0.4s var(--bc-ease); }
  .bc-rail:hover .bc-brand-text, .bc-rail:focus-within .bc-brand-text { opacity: 1; transform: none; }
  .bc-nav { display: flex; flex-direction: column; gap: 4px; }
  .bc-nav a, .bc-rail-call, .bc-rail-back { position: relative; display: flex; align-items: center; gap: 18px; height: 52px; padding: 0 30px; font: 700 0.95rem/1 var(--bc-sans); color: #c7d3f0; text-decoration: none; white-space: nowrap; transition: background 0.3s, color 0.3s; }
  .bc-nav a span, .bc-rail-call span, .bc-rail-back span { opacity: 0; transform: translateX(-8px); transition: opacity 0.3s, transform 0.4s var(--bc-ease); }
  .bc-rail:hover .bc-nav a span, .bc-rail:hover .bc-rail-call span, .bc-rail:hover .bc-rail-back span, .bc-rail:focus-within .bc-nav a span, .bc-rail:focus-within .bc-rail-call span, .bc-rail:focus-within .bc-rail-back span { opacity: 1; transform: none; }
  .bc-nav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
  .bc-nav a.is-active { color: #fff; background: rgba(233, 29, 37, 0.18); }
  .bc-nav a.is-active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--bc-red); }
  .bc-rail-back { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .bc-rail-back:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
  .bc-rail-call { background: var(--bc-red); color: #fff; }
  .bc-progress { left: var(--bc-rail); }
}

/* ------------------------------------------------------------ griglia di progetto + faro del mouse */
.bc-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(35, 78, 162, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(35, 78, 162, 0.1) 1px, transparent 1px);
  background-size: 48px 48px; }
.bc-grid::after { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(233, 29, 37, 0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(233, 29, 37, 0.5) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(circle 190px at var(--mx, -400px) var(--my, -400px), #000 0%, transparent 100%);
  mask-image: radial-gradient(circle 190px at var(--mx, -400px) var(--my, -400px), #000 0%, transparent 100%); }
.bc-sede .bc-grid, .bc-phero .bc-grid, .bc-office .bc-grid { background-image: linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px); }

/* ------------------------------------------------------------ hero */
.bc-hero { position: relative; isolation: isolate; padding: 104px 0 44px; background: linear-gradient(180deg, #fff 0%, var(--bc-paper) 100%); }
@media (min-width: 1040px) { .bc-hero { padding: 70px 0 150px; min-height: 100vh; display: flex; align-items: center; } }
.bc-hero-inner { position: relative; z-index: 2; display: grid; gap: 30px; align-items: center; }
@media (min-width: 960px) { .bc-hero-inner { grid-template-columns: 1.05fr 0.95fr; } }
.bc-hero .bc-actions { margin-top: 28px; }
.bc-hero-search { position: relative; z-index: 3; margin-top: 28px; animation: bc-fade 0.9s var(--bc-ease) 0.9s both; }
@media (min-width: 960px) { .bc-hero-search { position: absolute; left: 0; right: 0; bottom: 30px; margin: 0 auto; } }

.bc-city { position: relative; }
.bc-city svg { display: block; width: 100%; height: auto; max-height: 520px; overflow: visible; }
.bc-b { transform-box: fill-box; transform-origin: bottom; animation: bc-build 1.4s var(--bc-ease) both; }
.bc-b1 { animation-delay: 0.3s; } .bc-b2 { animation-delay: 0.5s; } .bc-b3 { animation-delay: 0.7s; } .bc-b4 { animation-delay: 0.9s; }
.bc-bld rect:not(.bc-b) { transform-box: fill-box; transform-origin: bottom; animation: bc-build 1.4s var(--bc-ease) both; }
.bc-bld:nth-of-type(1) rect:not(.bc-b) { animation-delay: 0.3s; } .bc-bld:nth-of-type(2) rect:not(.bc-b) { animation-delay: 0.5s; }
.bc-bld:nth-of-type(3) rect:not(.bc-b) { animation-delay: 0.7s; } .bc-bld:nth-of-type(4) rect:not(.bc-b) { animation-delay: 0.9s; }
@keyframes bc-build { from { transform: scaleY(0); } }
.bc-w2 { animation: bc-build 1.4s var(--bc-ease) 0.5s both, bc-blink 4.5s ease-in-out 2s infinite !important; }
@keyframes bc-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.bc-ground { stroke: #14306e; stroke-width: 3; stroke-dasharray: 560; animation: bc-draw 1.6s var(--bc-ease) both; }
@keyframes bc-draw { from { stroke-dashoffset: 560; } }
.bc-crane path { fill: none; stroke: #14306e; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bc-crane rect { fill: #e91d25; }
.bc-jib { transform-box: fill-box; transform-origin: top center; animation: bc-sway 5s ease-in-out infinite; }
@keyframes bc-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.bc-tag { position: absolute; padding: 9px 14px; background: #fff; font: 700 0.78rem/1 var(--bc-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bc-deep); box-shadow: 0 10px 28px rgba(20, 48, 110, 0.18); --ink: #14306e; animation: bc-bob 5s ease-in-out infinite; }
.bc-tag--a { top: 8%; left: 0; border-left: 4px solid var(--bc-red); }
.bc-tag--b { bottom: 14%; right: 0; border-left: 4px solid var(--bc-blue); animation-delay: -2.2s; }
@keyframes bc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ------------------------------------------------------------ ricerca */
.bc-search { display: grid; gap: 10px; padding: 14px; background: var(--bc-deep); box-shadow: 0 26px 60px rgba(13, 31, 74, 0.35); border-top: 4px solid var(--bc-red); }
.bc-seg { display: flex; margin: 0; padding: 0; border: 0; }
.bc-seg label { flex: 1; }
.bc-seg input { position: absolute; opacity: 0; pointer-events: none; }
.bc-seg span { display: block; padding: 15px 8px; border: 1px solid rgba(255, 255, 255, 0.25); margin-left: -1px; text-align: center; font: 700 0.85rem/1 var(--bc-sans); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; cursor: pointer; transition: background 0.3s; }
.bc-seg input:checked + span { background: var(--bc-red); border-color: var(--bc-red); }
.bc-seg input:focus-visible + span { box-shadow: var(--focus-ring); }
.bc-field { display: flex; flex-direction: column; gap: 4px; padding: 9px 14px; background: rgba(255, 255, 255, 0.08); border-bottom: 2px solid rgba(255, 255, 255, 0.3); transition: border-color 0.3s, background 0.3s; }
.bc-field > span { font: 700 0.66rem/1 var(--bc-sans); letter-spacing: 0.16em; text-transform: uppercase; color: #ffb0b4; }
.bc-field:focus-within { border-bottom-color: var(--bc-red); background: rgba(255, 255, 255, 0.14); }
.bc-search .bc-btn { width: 100%; }
@media (min-width: 960px) { .bc-search { grid-template-columns: auto 1.4fr 1fr auto; align-items: stretch; } .bc-search .bc-btn { width: auto; min-height: 100%; } }