/* ==========================================================================
   PROPOSAL 4: "Signal"
   Dark, immersive, motion-led. Floating glass navigation, full-height hero,
   two interactive business doors, services as an index on a dark slab,
   scroll reveals and page-to-page transitions.
   Same brand palette and Helvetica. Loaded after styles.css.
   ========================================================================== */
@view-transition { navigation: auto; }

html[data-option="4"] {
  --radius: 18px;
  --slab: 32px;
  --deep: #00222c;
  --glass: rgba(255, 255, 255, .07);
  --glass-line: rgba(255, 255, 255, .14);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --maxw: 78rem;
  --mist: #f1f5f6;
  --tint: #f1f5f6;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html[data-option="4"][data-division="mlr"] { --tint: #fbf1e2; }
html[data-option="4"] body { color: #1b2a30; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html[data-option="4"] .container { width: min(100% - 2.5rem, var(--maxw)); }

/* ---------- Type ---------- */
html[data-option="4"] h1, html[data-option="4"] h2 { text-wrap: balance; }
html[data-option="4"] h1 { font-size: clamp(2.7rem, 6.6vw, 5.75rem); line-height: .98; letter-spacing: -.04em; }
html[data-option="4"] h2 { font-size: clamp(1.9rem, 3.8vw, 3.25rem); line-height: 1.04; letter-spacing: -.035em; }
html[data-option="4"] h3 { letter-spacing: -.015em; }
html[data-option="4"] .kicker { font-size: .74rem; letter-spacing: .16em; gap: .6rem; color: var(--teal); margin-bottom: 1.1rem; }
html[data-option="4"] .kicker::before { width: .5rem; height: .5rem; border-radius: 50%; background: var(--yellow); }
html[data-option="4"] .kicker--lr, html[data-option="4"][data-division="mlr"] .kicker { color: var(--amber-deep); }
html[data-option="4"] .kicker--lr::before, html[data-option="4"][data-division="mlr"] .kicker::before { background: var(--amber); }
html[data-option="4"] .section-head { margin-bottom: 3rem; max-width: 52rem; }

/* ---------- Portal bar: light and slim ---------- */
html[data-option="4"] .portal-bar { background: #eef3f5; color: var(--ink); border-bottom: 0; }
html[data-option="4"] .portal-bar .portal-label { color: var(--muted); }
html[data-option="4"] .portal-links a { color: var(--ink); }
html[data-option="4"] .portal-links a span { color: var(--muted); }

/* ---------- Floating glass navigation ---------- */
html[data-option="4"] .site-header {
  position: sticky; top: .75rem; z-index: 60;
  width: min(100% - 1.5rem, calc(var(--maxw) + 2rem));
  margin: .75rem auto calc(-4.25rem - 2px - .75rem);
  background: rgba(0, 38, 50, .6); border: 1px solid var(--glass-line); border-radius: 2.2rem;
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 12px 40px rgba(0, 20, 28, .2);
  transition: background .3s, box-shadow .3s;
}
html[data-option="4"] .site-header.is-scrolled { background: rgba(0, 38, 50, .88); box-shadow: 0 16px 44px rgba(0, 20, 28, .3); }
html[data-option="4"] .site-header .container { width: 100%; min-height: 4.25rem; padding: 0 .6rem 0 1.5rem; }
html[data-option="4"] .brand img { height: 2.15rem; }
html[data-option="4"] .brand--lr img, html[data-option="4"] .brand:not(.brand--group) img { height: 2.5rem; }
html[data-option="4"] .nav-desktop { gap: .1rem; }
html[data-option="4"] .nav-desktop a { color: #e3eef0; font-size: .92rem; font-weight: 500; padding: .55rem .95rem; border-radius: 999px; border-bottom: 0; transition: background .2s, color .2s; }
html[data-option="4"] .nav-desktop a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
html[data-option="4"] .nav-desktop a[aria-current="page"] { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; }
html[data-option="4"] .nav-desktop .nav-cta a { margin-left: .5rem; background: var(--yellow); color: var(--ink); font-weight: 700; padding: .72rem 1.3rem; }
html[data-option="4"] .nav-desktop .nav-cta a:hover { background: #fff; color: var(--ink); }
html[data-option="4"][data-division="mlr"] .nav-desktop .nav-cta a { background: var(--amber); color: #fff; }
html[data-option="4"][data-division="mlr"] .nav-desktop .nav-cta a:hover { background: #fff; color: var(--ink); }
html[data-option="4"] .nav-desktop .drop {
  top: calc(100% + .9rem); left: -.6rem; min-width: 20rem; padding: .6rem;
  background: rgba(0, 30, 40, .95); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--glass-line); border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 20, 28, .45);
}
html[data-option="4"] .nav-desktop .drop::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }
html[data-option="4"] .nav-desktop .drop a { color: #dbe7ea; padding: .6rem .85rem; border-radius: 12px; font-weight: 500; }
html[data-option="4"] .nav-desktop .drop a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
html[data-option="4"] .nav-desktop .drop a[aria-current="page"] { background: rgba(255, 255, 255, .1); }
html[data-option="4"] .nav-desktop .drop .drop-head { color: var(--teal-soft); padding: .5rem .85rem .3rem; }
html[data-option="4"] .nav-desktop .drop--lr .drop-head { color: #f2c48f; }
html[data-option="4"] .nav-toggle { border: 0; background: rgba(255, 255, 255, .12); color: #fff; border-radius: 999px; padding: .65rem 1.1rem; }
html[data-option="4"] .nav-mobile { background: transparent; border-top: 1px solid var(--glass-line); }
html[data-option="4"] .nav-mobile a { color: #fff; border-bottom-color: rgba(255, 255, 255, .08); padding-left: 1.5rem; }
html[data-option="4"] .nav-mobile .nav-sub a { padding-left: 2.4rem; color: #cfe0e5; }
html[data-option="4"] .nav-mobile .nav-group { color: var(--teal-soft); padding-left: 1.5rem; }
html[data-option="4"] .nav-mobile .nav-group--lr { color: #f2c48f; }
html[data-option="4"] .site-header:has(.nav-mobile.is-open) { background: rgba(0, 30, 40, .97); max-height: calc(100svh - 1.5rem); overflow: auto; }

/* ---------- Buttons ---------- */
html[data-option="4"] .btn {
  border-radius: 999px; padding: .95rem 1.5rem; display: inline-flex; align-items: center; gap: .65rem;
  transition: transform .3s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .3s;
}
html[data-option="4"] .btn::after { content: ""; width: 1.05em; height: 1.05em; flex: none; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: transform .3s var(--ease); }
html[data-option="4"] .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 34, 44, .22); }
html[data-option="4"] .btn:hover::after { transform: translateX(4px); }
html[data-option="4"] .btn-primary { background: var(--yellow); border-color: var(--yellow); }

/* ---------- Hero ---------- */
html[data-option="4"] .hero--photo { min-height: min(100svh, 60rem); flex-direction: column; justify-content: flex-end; align-items: stretch; background: var(--deep); }
html[data-option="4"] .hero--photo .photo img { animation: m4-kenburns 24s var(--ease) both; transform-origin: 60% 40%; }
@keyframes m4-kenburns { from { transform: scale(1.14); } to { transform: scale(1); } }
html[data-option="4"] .hero--photo .photo::after, html[data-option="4"] .page-head--photo .photo::after {
  background:
    radial-gradient(60rem 34rem at 94% 6%, rgba(0, 138, 137, .32), transparent 60%),
    linear-gradient(90deg, rgba(0, 34, 44, .95) 0%, rgba(0, 34, 44, .8) 36%, rgba(0, 34, 44, .3) 74%, rgba(0, 34, 44, .38) 100%),
    linear-gradient(180deg, rgba(0, 34, 44, .55) 0%, rgba(0, 34, 44, 0) 28%, rgba(0, 34, 44, 0) 62%, rgba(0, 34, 44, .92) 100%);
}
html[data-option="4"] .hero--photo .container { max-width: none; margin-inline: auto; padding: 10rem 0 3.2rem; }
html[data-option="4"] .hero h1 { max-width: 15ch; margin-bottom: 1.6rem; }
html[data-option="4"] .hero h1 .hl { color: var(--yellow); }
html[data-option="4"] .hero .lede { max-width: 46rem; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: #d5e3e7; }
html[data-option="4"] .hero .actions { margin-top: 2.2rem; }
html[data-option="4"] .hero .btn-teal:hover, html[data-option="4"] .hero .btn-amber:hover { background: #fff; border-color: #fff; color: var(--ink); }
html[data-option="4"] .hero-facts {
  position: relative; z-index: 2; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  width: min(100% - 2.5rem, var(--maxw)); margin: 0 auto; padding: 1.4rem 0 2rem; border-top: 1px solid var(--glass-line);
  color: #a9c1c8; font-size: .92rem;
}
html[data-option="4"] .hero-facts strong { display: block; color: #fff; font-size: 1.02rem; letter-spacing: -.01em; }
@media (max-width: 700px) { html[data-option="4"] .hero-facts { grid-template-columns: 1fr; gap: .8rem; } html[data-option="4"] .hero--photo .container { padding-top: 8rem; } }

/* ---------- Two business doors ---------- */
html[data-option="4"] .doors { display: flex; background: var(--deep); }
html[data-option="4"] .door { position: relative; flex: 1 1 0; min-width: 0; min-height: 37rem; display: flex; align-items: stretch; overflow: hidden; isolation: isolate; color: #e3eef0; transition: flex-grow .7s var(--ease); }
html[data-option="4"] .door-photo { position: absolute; inset: 0; z-index: -2; }
html[data-option="4"] .door-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); transition: transform 1.4s var(--ease); }
html[data-option="4"] .door::before { content: ""; position: absolute; inset: 0; z-index: -1; transition: opacity .5s; }
html[data-option="4"] .door--uc::before { background: linear-gradient(180deg, rgba(0, 72, 85, .8) 0%, rgba(0, 44, 56, .97) 100%); }
html[data-option="4"] .door--lr::before { background: linear-gradient(180deg, rgba(215, 124, 25, .84) 0%, rgba(168, 86, 8, .97) 100%); }
html[data-option="4"] .door-inner { width: 100%; max-width: 44rem; padding: clamp(3.5rem, 6vw, 5.5rem) clamp(2rem, 5vw, 4.5rem) clamp(2.2rem, 4vw, 3.5rem); display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
html[data-option="4"] .door .logo { width: min(310px, 82%); height: auto; margin-bottom: .6rem; }
html[data-option="4"] .door h2 { color: #fff; font-size: clamp(1.8rem, 2.8vw, 2.7rem); }
html[data-option="4"] .door-p { font-size: 1.08rem; max-width: 34rem; color: #e9f1f3; }
html[data-option="4"] .door-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
html[data-option="4"] .door-list li { padding: .38rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, .13); font-size: .86rem; color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html[data-option="4"] .door-contact { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; font-size: .95rem; }
html[data-option="4"] .door-contact a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 4px; }
html[data-option="4"] .door-contact a:hover { text-decoration-color: #fff; }
html[data-option="4"] .door-cta { display: inline-flex; align-items: center; gap: .9rem; margin-top: auto; padding-top: 1.6rem; color: #fff; font-weight: 700; font-size: 1.08rem; text-decoration: none; }
html[data-option="4"] .door-cta::after { content: ""; position: absolute; inset: 0; z-index: 1; }
html[data-option="4"] .door-cta .arr { width: 2.9rem; height: 2.9rem; padding: .8rem; border-radius: 50%; background: #fff; color: var(--ink); transition: transform .4s var(--ease), background .2s; }
html[data-option="4"] .door .backdrop { position: absolute; right: -6%; top: -8%; width: 44%; opacity: .1; z-index: -1; pointer-events: none; }
@media (hover: hover) and (min-width: 801px) {
  html[data-option="4"] .door:hover { flex-grow: 1.2; }
  html[data-option="4"] .door:hover .door-photo img { transform: scale(1.07); }
  html[data-option="4"] .door:hover .door-cta .arr { transform: translateX(8px); background: var(--yellow); }
}
@media (max-width: 800px) { html[data-option="4"] .doors { flex-direction: column; } html[data-option="4"] .door { flex: 0 0 auto; min-height: 0; } html[data-option="4"] .door-inner { padding-top: 3.2rem; } }

/* ---------- Sections ---------- */
html[data-option="4"] .section { padding: clamp(4rem, 8vw, 7.5rem) 0; }
html[data-option="4"] .section--mist, html[data-option="4"] .section--cream, html[data-option="4"] .accred-x { margin: 0 .75rem; border-radius: var(--slab); }
html[data-option="4"] .section--mist, html[data-option="4"] .accred-x { background: var(--mist); }
html[data-option="4"] .section--cream { background: #fbf1e2; }

/* ---------- The Macvere standard ---------- */
html[data-option="4"] .statement { font-size: clamp(2rem, 4.4vw, 3.9rem); line-height: 1.05; max-width: 62rem; }
html[data-option="4"] .statement em { font-style: normal; color: var(--teal); }
html[data-option="4"] .standard-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 4rem; align-items: end; margin: 2.4rem 0 4rem; }
html[data-option="4"] .standard-body p { max-width: 64ch; font-size: 1.12rem; color: #3c4f56; }
html[data-option="4"] .pillars--row { grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
html[data-option="4"] .pillars--row .pillar { border-left: 0; padding: 1.6rem 1.8rem 0 0; }
html[data-option="4"] .pillars--row .pillar + .pillar { padding-left: 1.8rem; border-left: 1px solid var(--line); }
html[data-option="4"] .pillar .n { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .14em; color: var(--teal); margin-bottom: 2.4rem; }
html[data-option="4"] .pillar h3 { font-size: 1.4rem; margin-bottom: .5rem; }
html[data-option="4"] .pillar p { font-size: .98rem; }
@media (max-width: 900px) {
  html[data-option="4"] .standard-body { grid-template-columns: 1fr; }
  html[data-option="4"] .pillars--row { grid-template-columns: 1fr 1fr; }
  html[data-option="4"] .pillars--row .pillar, html[data-option="4"] .pillars--row .pillar + .pillar { padding: 1.4rem 1.2rem 1.6rem 0; border-left: 0; border-bottom: 1px solid var(--line); }
  html[data-option="4"] .pillar .n { margin-bottom: 1rem; }
}
@media (max-width: 560px) { html[data-option="4"] .pillars--row { grid-template-columns: 1fr; } }

/* ---------- Services index (dark slab) ---------- */
html[data-option="4"] .svc-index {
  margin: 0 .75rem; border-radius: var(--slab); color: #cfe0e5;
  background:
    radial-gradient(60rem 30rem at 6% 0%, rgba(0, 138, 137, .26), transparent 62%),
    radial-gradient(52rem 30rem at 98% 100%, rgba(215, 124, 25, .2), transparent 62%),
    var(--deep);
}
html[data-option="4"] .svc-index h2 { color: #fff; }
html[data-option="4"] .svc-index .kicker { color: var(--teal-soft); }
html[data-option="4"] .svc-index .kicker--lr { color: #f2c48f; }
html[data-option="4"] .svc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
html[data-option="4"] .svc-col { position: relative; background: var(--glass); border: 1px solid var(--glass-line); border-radius: 26px; padding: clamp(1.4rem, 2.6vw, 2.3rem); display: flex; flex-direction: column; }
html[data-option="4"] .svc-col-head h3 { color: #fff; font-size: clamp(1.3rem, 1.9vw, 1.6rem); margin-bottom: 1.4rem; }
html[data-option="4"] .svc-rows { list-style: none; padding: 0; margin: 0 0 1.8rem; }
html[data-option="4"] .svc-rows li { border-top: 1px solid rgba(255, 255, 255, .1); }
html[data-option="4"] .svc-rows a { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1.05rem .9rem; margin: 0 -.9rem; border-radius: 14px; color: inherit; text-decoration: none; transition: background .25s; }
html[data-option="4"] .svc-rows a:hover { background: rgba(255, 255, 255, .08); }
html[data-option="4"] .svc-rows .n { font-size: .78rem; font-weight: 700; letter-spacing: .1em; color: var(--teal-soft); }
html[data-option="4"] .svc-col--lr .svc-rows .n { color: #f2c48f; }
html[data-option="4"] .svc-rows strong { display: block; color: #fff; font-size: 1.08rem; font-weight: 600; }
html[data-option="4"] .svc-rows .t span { display: block; font-size: .9rem; color: #a9c1c8; margin-top: .15rem; }
html[data-option="4"] .svc-rows .arr { width: 1.3rem; height: 1.3rem; color: #fff; opacity: .45; transition: transform .3s var(--ease), opacity .2s; }
html[data-option="4"] .svc-rows a:hover .arr { transform: translateX(5px); opacity: 1; }
html[data-option="4"] .svc-col > .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 900px) { html[data-option="4"] .svc-cols { grid-template-columns: 1fr; } }

/* ---------- Clients and accreditations ---------- */
html[data-option="4"] .audiences > div { border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 24px; padding: 1.8rem; }
html[data-option="4"] .audiences h3 { font-size: 1.35rem; margin-bottom: 1rem; }
html[data-option="4"] .chips li { border: 0; background: var(--mist); padding: .5rem 1rem; }
html[data-option="4"] .audiences .aud--lr .chips li { background: #fbf1e2; }
html[data-option="4"] .carousel { margin-top: 3.5rem; }
html[data-option="4"] .carousel-track img { height: 3.2rem; opacity: .75; }
html[data-option="4"] .accred-x { padding: clamp(3rem, 5vw, 4.5rem) 0; margin-top: 0; }
html[data-option="4"] .accred-x-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; align-items: center; }
html[data-option="4"] .accred-x h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); margin-bottom: .8rem; }
html[data-option="4"] .accred-x .muted { max-width: 34rem; }
@media (max-width: 860px) { html[data-option="4"] .accred-x-inner { grid-template-columns: 1fr; } }

/* ---------- Contact band ---------- */
html[data-option="4"] .cta-band {
  margin: .75rem; border-radius: var(--slab); overflow: hidden;
  background: radial-gradient(52rem 28rem at 100% 0%, rgba(0, 138, 137, .4), transparent 62%), var(--deep);
}
html[data-option="4"][data-division="mlr"] .cta-band { background: radial-gradient(52rem 28rem at 100% 0%, rgba(215, 124, 25, .45), transparent 62%), var(--deep); }
html[data-option="4"] .cta-band .container { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 4rem; align-items: end; padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
html[data-option="4"] .cta-band .kicker { color: var(--teal-soft); }
html[data-option="4"][data-division="mlr"] .cta-band .kicker { color: #f2c48f; }
html[data-option="4"] .cta-x-head h2 { color: #fff; font-size: clamp(2.3rem, 5vw, 4.4rem); margin-bottom: 1.1rem; }
html[data-option="4"] .cta-x-head p:not(.kicker) { color: #b9cfd6; max-width: 34rem; font-size: 1.1rem; }
html[data-option="4"] .cta-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.2rem 0; border-top: 1px solid rgba(255, 255, 255, .14); color: #fff; text-decoration: none; }
html[data-option="4"] .cta-row:last-child { border-bottom: 1px solid rgba(255, 255, 255, .14); }
html[data-option="4"] .cta-row .l { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: #8fb0b9; font-weight: 700; }
html[data-option="4"] .cta-row .v { font-size: clamp(1.1rem, 1.9vw, 1.55rem); font-weight: 700; letter-spacing: -.015em; overflow-wrap: anywhere; transition: color .2s; }
html[data-option="4"] .cta-row .arr { width: 1.4rem; height: 1.4rem; opacity: .55; transition: transform .3s var(--ease), opacity .2s; }
html[data-option="4"] .cta-row:hover .v { color: var(--yellow); }
html[data-option="4"][data-division="mlr"] .cta-row:hover .v { color: #f2c48f; }
html[data-option="4"] .cta-row:hover .arr { transform: translateX(6px); opacity: 1; }
@media (max-width: 860px) { html[data-option="4"] .cta-band .container { grid-template-columns: 1fr; } }
@media (max-width: 520px) { html[data-option="4"] .cta-row { grid-template-columns: 1fr auto; } html[data-option="4"] .cta-row .l { grid-column: 1 / -1; margin-bottom: -.6rem; } }

/* ---------- Footer ---------- */
html[data-option="4"] .site-footer { position: relative; overflow: hidden; background: #fff; color: #5b6d74; border-top: 0; }
html[data-option="4"] .site-footer a { color: var(--ink); }
html[data-option="4"] .site-footer h2 { color: var(--teal); }
html[data-option="4"] .site-footer h2.h--lr { color: var(--amber-deep); }
html[data-option="4"] .footer-brand .group-logo { content: url("assets/logos/macvere-group-horizontal.svg"); height: 2.6rem; }
html[data-option="4"] .footer-legal { border-top-color: var(--line); position: relative; z-index: 1; }

/* ---------- Inner page heads ---------- */
html[data-option="4"] .page-head { background: var(--deep); }
html[data-option="4"] .page-head--photo { min-height: clamp(30rem, 66vh, 42rem); align-items: flex-end; }
html[data-option="4"] .page-head .container { padding: 10rem 0 3.6rem; }
html[data-option="4"] .page-head h1 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); max-width: 18ch; margin-bottom: 1.3rem; }
html[data-option="4"] .page-head p:not(.kicker) { max-width: 46rem; font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: #d5e3e7; }
html[data-option="4"] .page-head .kicker { color: var(--teal-soft); }
html[data-option="4"] .page-head .kicker--lr { color: #f2c48f; }
html[data-option="4"] .crumbs { display: inline-block; background: rgba(255, 255, 255, .1); border-radius: 999px; padding: .4rem 1rem; margin-bottom: 1.6rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (max-width: 700px) { html[data-option="4"] .page-head .container { padding-top: 8rem; } }

/* ---------- Cards (hubs and related services) ---------- */
html[data-option="4"] .grid { gap: 1.1rem; }
html[data-option="4"] .card { border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 24px; padding: 1.9rem 1.8rem 1.7rem; background: #fff; transition: transform .4s var(--ease), box-shadow .4s, border-color .2s; }
html[data-option="4"] a.card:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(0, 48, 62, .14); border-color: transparent; }
html[data-option="4"] .card .kicker { display: none; }
html[data-option="4"] .card h3 { font-size: 1.32rem; }
html[data-option="4"] .card .arrow { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); padding-top: 1.2rem; }
html[data-option="4"] .card .arrow::after { content: ""; width: 1.1em; height: 1.1em; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: transform .3s var(--ease); }
html[data-option="4"] a.card:hover .arrow { text-decoration: none; }
html[data-option="4"] a.card:hover .arrow::after { transform: translateX(5px); }
html[data-option="4"] .card--lr .arrow { color: var(--amber-deep); }

/* ---------- Service and hub page body ---------- */
html[data-option="4"] .service-layout { grid-template-columns: minmax(0, 1.65fr) minmax(17rem, .8fr); gap: 4.5rem; }
@media (max-width: 900px) { html[data-option="4"] .service-layout { grid-template-columns: 1fr; gap: 2.5rem; } }
html[data-option="4"] .prose { counter-reset: m4sec; }
html[data-option="4"] .prose > p:first-child:not(.kicker) { font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.45; color: var(--ink); letter-spacing: -.01em; max-width: 64ch; }
html[data-option="4"] .prose h2 { border-top: 0; padding-top: 0; margin: 4.2rem 0 1.4rem; font-size: clamp(1.7rem, 2.8vw, 2.5rem); }
html[data-option="4"] .prose h2:first-child { margin-top: 0; }
html[data-option="4"] .prose h2:not([style])::before { counter-increment: m4sec; content: counter(m4sec, decimal-leading-zero); display: block; font-size: .78rem; letter-spacing: .14em; font-weight: 700; color: var(--accent); margin-bottom: .9rem; }
html[data-option="4"] .delivs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.2rem 0; }
html[data-option="4"] .deliv { border: 1px solid var(--line); border-radius: 20px; padding: 1.5rem 1.5rem 1.4rem; background: #fff; transition: border-color .25s, transform .35s var(--ease), box-shadow .35s; }
html[data-option="4"] .deliv:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0, 48, 62, .09); }
html[data-option="4"] .deliv h3 { margin: 0 0 .45rem; font-size: 1.12rem; }
html[data-option="4"] .glossary .deliv h3 { color: var(--accent-deep); }
html[data-option="4"] .deliv p { font-size: .98rem; color: #4a5d64; }
html[data-option="4"] .deliv .arrow-link { margin: .7rem 0 0; }
@media (max-width: 640px) { html[data-option="4"] .delivs { grid-template-columns: 1fr; } }
html[data-option="4"] .prose figure { border-radius: 24px; margin: 2rem 0 2.4rem; }
html[data-option="4"] .aside-card { border-radius: 24px; padding: 1.9rem; background: var(--mist); }
html[data-option="4"][data-division="mlr"] .aside-card { background: #fbf1e2; }
html[data-option="4"] .aside-card--ink, html[data-option="4"][data-division="mlr"] .aside-card--ink { background: radial-gradient(22rem 14rem at 100% 0%, rgba(0, 138, 137, .45), transparent 65%), var(--deep); }
html[data-option="4"][data-division="mlr"] .aside-card--ink { background: radial-gradient(22rem 14rem at 100% 0%, rgba(215, 124, 25, .5), transparent 65%), var(--deep); }
html[data-option="4"] .service-aside { top: 6.5rem; }
html[data-option="4"] .faq { gap: 0; border-bottom: 1px solid var(--line); }
html[data-option="4"] .faq details { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
html[data-option="4"] .faq summary { padding: 1.35rem 0; font-size: 1.15rem; letter-spacing: -.01em; }
html[data-option="4"] .faq summary::after, html[data-option="4"] .faq details[open] summary::after { content: "+"; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1px solid var(--line); color: var(--ink); font-weight: 400; font-size: 1.3rem; transition: transform .35s var(--ease), background .2s, color .2s; }
html[data-option="4"] .faq details[open] summary::after { transform: rotate(45deg); background: var(--ink); color: #fff; border-color: var(--ink); }
html[data-option="4"] .faq details[open] summary { border-bottom: 0; }
html[data-option="4"] .faq .faq-a { padding: 0 3.5rem 1.5rem 0; }

/* ---------- People, about, contact ---------- */
html[data-option="4"] .person { border-radius: 24px; border-color: var(--line); transition: transform .4s var(--ease), box-shadow .4s; }
html[data-option="4"] .person:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(0, 48, 62, .13); }
html[data-option="4"] .person { padding: 1.6rem; }
html[data-option="4"] .person .photo { background: radial-gradient(5.5rem 4.5rem at 78% 8%, rgba(0, 138, 137, .65), transparent 72%), var(--deep); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--line); }
html[data-option="4"] .person--lr .photo { background: linear-gradient(160deg, #e08a2b, #b05a08); }
html[data-option="4"] .people-toggle { padding: .3rem; }
html[data-option="4"] .contact-card { border-radius: 26px; border: 1px solid var(--line); border-top: 1px solid var(--line); padding: 2.3rem; transition: transform .4s var(--ease), box-shadow .4s; }
html[data-option="4"] .contact-card:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(0, 48, 62, .12); }
html[data-option="4"] .split figure { border-radius: 24px !important; }

/* ---------- Motion ---------- */
html[data-option="4"].rvl-on .rvl { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
html[data-option="4"].rvl-on .rvl.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html[data-option="4"] .hero--photo .photo img { animation: none; }
  html[data-option="4"] .door, html[data-option="4"] .btn, html[data-option="4"] .card { transition: none; }
}

/* ---------- Small headings that must not inherit the display scale ---------- */
html[data-option="4"] .site-footer h2 { font-size: .74rem; letter-spacing: .18em; line-height: 1.4; }
html[data-option="4"] .contact-card h2 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); letter-spacing: -.02em; }

/* ---------- Phone legibility: keep small labels at 12px or above ---------- */
@media (max-width: 640px) {
  html[data-option="4"] .kicker, html[data-option="4"] .cta-row .l, html[data-option="4"] .pillar .n, html[data-option="4"] .svc-rows .n { font-size: .78rem; }
  html[data-option="4"] .hero-facts { font-size: .95rem; }
}