/* =========================================================================
   Brillen — COMPONENTS used on several pages (loaded on every page)
   1. Shared section parts (heads, arrows, slim buttons, progress, reveal)
   2. Before / after comparison (home slider + project pages)
   3. FAQ (one design for every FAQ of the site)
   4. CTA band above the footer + footer tweaks
   5. Our Projects (listing + project pages)
   6. Services + Industries pages (chapters, index, approach, steps)
   7. Project map (home, after before / after)
   8. About page (pillars, modular tiles, why us, delivery line)
   ========================================================================= */

/* ---------------------------------------------------------------------
   1. SHARED
   --------------------------------------------------------------------- */
.hp-sec { position: relative; isolation: isolate; overflow: hidden; padding: clamp(3.5rem, 7vw, 7.5rem) 1rem; }
@media (min-width: 768px) { .hp-sec { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .hp-sec { padding-inline: 2.5rem; } }
.hp-wrap { position: relative; max-width: 1400px; margin-inline: auto; width: 100%; }
.hp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; margin-bottom: clamp(1.75rem, 3.5vw, 3rem); }
.hp-eyebrow { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .9rem; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); }
.hp-eyebrow::before { content: ""; width: 1.6rem; height: 1.5px; background: currentColor; }
.hp-eyebrow--light { color: #fff; }
.hp-h2 { margin: 0; font-size: clamp(1.9rem, 3.6vw, 3.4rem); font-weight: 500; line-height: 1.02; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.hp-sub { max-width: 48ch; margin: .9rem 0 0; font-size: 1rem; line-height: 1.55; color: var(--muted); }
.hp-br { display: none; }
@media (min-width: 640px) { .hp-br { display: inline; } }
.hp-nav { display: flex; align-items: center; gap: .6rem; }
.hp-count { margin: 0 .6rem 0 0; font-family: var(--font-heading); font-size: 1rem; letter-spacing: .04em; color: var(--muted); }
.hp-count span { color: var(--ink); font-weight: 600; }
.hp-arrow { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--ease-out); }
.hp-arrow:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.hp-arrow:active { transform: scale(.94); }
.hp-arrow:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.hp-arrow.is-disabled { opacity: .35; pointer-events: none; }
.hp-progress { position: relative; height: 2px; margin-top: clamp(1.5rem, 3vw, 2.25rem); background: var(--line); border-radius: 2px; overflow: hidden; }
.hp-progress span { position: absolute; inset: 0; background: var(--brand); transform-origin: left; transform: scaleX(.2); transition: transform .6s var(--ease-out); }
/* slim buttons */
.sl-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.4rem; padding: 0 1rem; border-radius: 999px; border: 1px solid transparent; font: 700 .8rem/1 var(--font-body); letter-spacing: .01em; white-space: nowrap; text-decoration: none; transition: background-color .3s, color .3s, border-color .3s, gap .3s var(--ease-out); }
.sl-btn i { font-size: .72rem; transition: transform .35s var(--ease-out); }
.sl-btn:hover i { transform: translateX(3px); }
.sl-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.sl-btn--dark { background: var(--ink); color: #fff; }
.sl-btn--dark:hover { background: var(--brand); }
.sl-btn--brand { background: var(--brand); color: #fff; }
.sl-btn--brand:hover { background: var(--ink); }
.sl-btn--ghost { border-color: var(--line); color: var(--ink); background: #fff; }
.sl-btn--ghost:hover { border-color: var(--brand); color: var(--brand); }
/* reveal */
html.js .hp-sec:not(.is-in) .hp-head, html.js .hp-sec:not(.is-in) .swiper, html.js .ts:not(.is-in) .ts__grid > * { opacity: 0; transform: translateY(26px); }
.hp-sec .hp-head, .hp-sec .swiper, .ts .ts__grid > * { transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); }
.hp-sec .swiper, .ts .ts__stage { transition-delay: .12s; }


/* ---------------------------------------------------------------------
   2. BEFORE / AFTER
   --------------------------------------------------------------------- */
.ba { background: var(--paper); }
.ba-swiper { overflow: visible; }
.ba .hp-wrap { overflow: visible; }
.ba-slide { height: auto; display: flex; flex-direction: column; gap: .85rem; transition: opacity .5s; }
.ba-slide:not(.swiper-slide-visible) { opacity: .5; }
.ba-slide__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; min-height: 2.6em; }
.ba-slide__title { margin: 0; font-size: clamp(1.15rem, 1.6vw, 1.5rem); font-weight: 500; line-height: 1.12; letter-spacing: -.015em; color: var(--ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.ba-slide__head .sl-btn { flex: none; }
.ba-compare { --pos: 50%; position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: clamp(16px, 2vw, 26px); background: #ddd; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; isolation: isolate; box-shadow: 0 40px 80px -48px rgba(13,11,11,.55); }
.ba-compare picture, .ba-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ba-compare__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-compare__line { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2; width: 2px; translate: -50% 0; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 0 24px rgba(0,0,0,.35); pointer-events: none; }
.ba-compare__handle { position: absolute; top: 50%; left: var(--pos); z-index: 4; translate: -50% -50%; display: flex; align-items: center; justify-content: center; gap: .25rem; width: 3.1rem; height: 3.1rem; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--brand); font-size: .72rem; box-shadow: 0 10px 30px -6px rgba(0,0,0,.5), 0 0 0 6px rgba(255,255,255,.25); cursor: ew-resize; transition: transform .25s var(--ease-out), box-shadow .25s; }
.ba-compare.is-dragging .ba-compare__handle, .ba-compare__handle:hover { transform: scale(1.08); box-shadow: 0 10px 30px -6px rgba(0,0,0,.5), 0 0 0 10px rgba(255,255,255,.2); }
.ba-compare__handle:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.ba-tag { position: absolute; top: 1rem; z-index: 3; padding: .38rem .75rem; border-radius: 999px; font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(13,11,11,.45); border: 1px solid rgba(255,255,255,.25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: none; transition: opacity .3s, transform .3s; }
.ba-tag.is-hidden { opacity: 0; transform: translateY(-4px); }
.ba-tag--before { left: 1rem; }
.ba-tag--after { right: 1rem; background: rgba(137,11,0,.7); }
/* glass / liquid-glass description — above the images, never blocks the drag */
.ba-glass { position: absolute; left: clamp(.75rem, 1.6vw, 1.4rem); bottom: clamp(.75rem, 1.6vw, 1.4rem); z-index: 3; max-width: min(430px, calc(100% - 1.5rem)); padding: .85rem 1rem .9rem; border-radius: 18px; color: #fff; pointer-events: none;
  background: linear-gradient(140deg, rgba(255,255,255,.22), rgba(255,255,255,.04) 42%, rgba(255,255,255,.1)), rgba(18,12,11,.42);
  border: 1px solid rgba(255,255,255,.32);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.55), inset 0 -10px 24px rgba(255,255,255,.06), 0 20px 50px -22px rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(18px) saturate(170%) brightness(.8); backdrop-filter: blur(18px) saturate(170%) brightness(.8); }
.ba-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(90% 60% at 10% 0%, rgba(255,255,255,.28), transparent 60%); mix-blend-mode: soft-light; }
.ba-glass__meta { position: relative; display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: 0 0 .4rem; font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.88); }
.ba-glass__meta i { margin-right: .3rem; }
.ba-glass__text { position: relative; margin: 0; font-size: .84rem; line-height: 1.5; text-shadow: 0 1px 8px rgba(0,0,0,.35); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
/* the smaller home slides: a shorter glass box */
.ba-swiper .ba-glass { max-width: min(380px, calc(100% - 1.5rem)); padding: .7rem .85rem .75rem; border-radius: 15px; }
.ba-swiper .ba-glass__text { font-size: .78rem; -webkit-line-clamp: 3; line-clamp: 3; }
@media (max-width: 639px) {
  .ba-compare { aspect-ratio: 4 / 3; }
  .ba-glass { padding: .65rem .8rem; border-radius: 14px; }
  .ba-glass__text { font-size: .76rem; -webkit-line-clamp: 3; line-clamp: 3; }
  .ba-tag { top: .65rem; font-size: .58rem; padding: .3rem .6rem; }
  .ba-tag--before { left: .65rem; } .ba-tag--after { right: .65rem; }
  .ba-compare__handle { width: 2.6rem; height: 2.6rem; }
}
@media (max-width: 380px) { .ba-glass__text { -webkit-line-clamp: 2; line-clamp: 2; } }
.ba-note { display: flex; align-items: flex-start; gap: .5rem; margin: 1.25rem 0 0; font-size: .78rem; line-height: 1.45; color: var(--muted); }
.ba-note i { margin-top: .15rem; color: var(--brand); }


/* ---------------------------------------------------------------------
   3. FAQ
   --------------------------------------------------------------------- */
.fq { background: #F6F6F6; }
.fq-top { display: grid; gap: 1.25rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 1024px) { .fq-top { grid-template-columns: minmax(0, .38fr) minmax(0, 1fr); align-items: center; } }
.fq-pill { display: inline-flex; align-items: center; align-self: center; gap: .55rem; justify-self: start; margin: 0; padding: .5rem .95rem; border-radius: 999px; border: 1px solid #dcdcdc; background: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.fq-pill span { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
@media (min-width: 1024px) { .fq-title { position: relative; padding-left: clamp(1.5rem, 3vw, 3rem); } .fq-title::before { content: ""; position: absolute; left: 0; top: -1rem; bottom: -1rem; width: 1px; background: linear-gradient(transparent, #cfcfcf 40%, #cfcfcf); } }
.fq-title { margin: 0; font-size: clamp(2.1rem, 5vw, 4.5rem); font-weight: 500; line-height: 1; letter-spacing: -.035em; color: var(--ink); }
.fq-title em { font-style: normal; color: var(--brand); }
.fq-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) { .fq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 4rem; } }
@media (min-width: 1280px) { .fq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 330px); } }
.fq-list { border-top: 1.5px solid var(--ink); }
.fq-item { border-bottom: 1px solid #dcdcdc; }
.fq-q { margin: 0; }
.fq-btn { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 1.75rem; align-items: center; gap: .75rem; width: 100%; padding: 1.35rem 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink); }
.fq-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 6px; }
.fq-num { font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: #9a9a9a; }
.fq-text { font-size: clamp(1.1rem, 2vw, 1.65rem); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; transition: color .3s; }
.fq-icon { position: relative; justify-self: end; width: 1rem; height: 1rem; color: var(--ink); }
.fq-icon::before, .fq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 1.5px; background: currentColor; translate: -50% -50%; transition: rotate .4s var(--ease-out), opacity .3s; }
.fq-icon::after { rotate: 90deg; }
.fq-item.is-open .fq-text, .fq-btn:hover .fq-text { color: var(--brand); }
.fq-item.is-open .fq-icon { color: var(--brand); }
.fq-item.is-open .fq-icon::after { rotate: 0deg; opacity: 0; }
.fq-a { animation: fqOpen .45s var(--ease-out) both; }
.fq-a[hidden] { display: none; }
@keyframes fqOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.fq-a__inner { padding: 0 2.5rem 1.6rem 3.15rem; max-width: 760px; font-size: clamp(.95rem, 1.2vw, 1.05rem); line-height: 1.65; color: #4a4a4a; }
.fq-a__inner p { margin: 0 0 .5rem; }
.fq-a__inner ul { margin: .25rem 0 .75rem; padding-left: 1.15rem; list-style: disc; }
.fq-a__inner li { margin: .2rem 0; }
.fq-a__inner li::marker { color: var(--brand); }
@media (max-width: 639px) { .fq-btn { grid-template-columns: 1.9rem minmax(0, 1fr) 1.25rem; gap: .5rem; padding: 1.1rem 0; } .fq-a__inner { padding: 0 0 1.25rem 2.4rem; } }
.fq-side { display: grid; gap: 1rem; }
@media (min-width: 1024px) { .fq-side { position: sticky; top: 7rem; } }
@media (min-width: 640px) and (max-width: 1023px) { .fq-side { grid-template-columns: 240px minmax(0, 1fr); align-items: center; column-gap: 1.75rem; } .fq-side__media { grid-row: span 3; } }
.fq-side__media { overflow: hidden; border-radius: 22px; aspect-ratio: 4 / 4.2; background: var(--ink); }
.fq-side__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.fq-side:hover .fq-side__media img { transform: scale(1.04); }
.fq-side__title { margin: .35rem 0 0; font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); }
.fq-side__text { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--muted); }
.fq-side__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

@media (max-width: 639px) { .fq-side__media { aspect-ratio: 16 / 10; } }


/* ---------------------------------------------------------------------
   light slim buttons + light slider controls (dark / brand backgrounds)
   --------------------------------------------------------------------- */
.sl-btn--lg { height: 2.9rem; padding: 0 1.35rem; font-size: .88rem; }
.sl-btn--light { background: #fff; color: var(--ink); }
.sl-btn--light:hover { background: var(--ink); color: #fff; }
.sl-btn--outline-light { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.06); }
.sl-btn--outline-light:hover { background: #fff; border-color: #fff; color: var(--brand); }
.sl-btn--light:focus-visible, .sl-btn--outline-light:focus-visible { outline-color: #fff; }
.hp-nav--light .hp-arrow { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); color: #fff; }
.hp-nav--light .hp-arrow:hover { background: #fff; border-color: #fff; color: var(--brand); }
.hp-nav--light .hp-arrow:focus-visible { outline-color: #fff; }
.hp-nav--light .hp-count { color: rgba(255,255,255,.6); }
.hp-nav--light .hp-count span { color: #fff; }
.hp-progress--light { background: rgba(255,255,255,.22); }
.hp-progress--light span { background: #fff; }


/* ---------------------------------------------------------------------
   4. CTA BAND (every page, above the footer) + FOOTER TWEAKS
   --------------------------------------------------------------------- */
.cta-band { position: relative; isolation: isolate; overflow: hidden; padding: clamp(1.75rem, 3.2vw, 2.75rem) 1rem; color: #fff; background: #0D0B0B; }
@media (min-width: 768px) { .cta-band { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .cta-band { padding-inline: 2.5rem; } }
.cta-band__bg { position: absolute; inset: 0; z-index: -1; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.cta-band__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,11,11,.92) 0%, rgba(13,11,11,.74) 55%, rgba(137,11,0,.72) 100%); }
.cta-band__inner { max-width: 1400px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.1rem 2rem; }
.cta-band__copy { min-width: 0; }
.cta-band__title { margin: 0; font-size: clamp(1.5rem, 3vw, 2.6rem); font-weight: 500; line-height: 1.05; letter-spacing: -.025em; }
.cta-band__text { margin: .45rem 0 0; font-size: .95rem; color: rgba(255,255,255,.78); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 479px) { .cta-band__actions, .cta-band__actions .sl-btn { width: 100%; } }

/* footer: no newsletter column any more — brand block spans the row */
.ft-top { grid-template-columns: minmax(0, 1fr) !important; }
/* bottom row: copyright left · "Powered by The EBG Group" + back-to-top right */
.ft-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .85rem 2rem; }
.ft-copy { flex: 1 1 18rem; min-width: 0; margin: 0; }
.ft-bottom__end { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-left: auto; text-align: right; }
.ft-credits { margin: 0; white-space: nowrap; }
@media (min-width: 768px) { .ft-bottom { padding-right: 0 !important; } }
@media (max-width: 767px) { .ft-bottom__end { width: 100%; } }
/* the floating WhatsApp button steps up while the footer's last row is on screen */
.wa-float { transition: transform .45s var(--ease-out), background-color .3s, color .3s, box-shadow .3s; }
@media (min-width: 768px) {
  html.ft-end .wa-float { transform: translateY(calc(-1 * clamp(4.25rem, 6vw, 5rem))); }
  html.ft-end .wa-float:hover { transform: translateY(calc(-1 * clamp(4.25rem, 6vw, 5rem) - 3px)); }
}


/* ---------------------------------------------------------------------
   5. OUR PROJECTS — listing, cards, project page
   --------------------------------------------------------------------- */
.op { background: #fff; padding-top: clamp(2.5rem, 4.5vw, 4rem); }
.op-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; padding: .6rem; border-radius: 20px; background: var(--paper); }
@media (min-width: 640px) { .op-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .op-field--search { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .op-filters { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)) auto; align-items: center; } .op-field--search { grid-column: auto; } }
.op-field { position: relative; display: flex; align-items: center; min-width: 0; height: 3rem; border-radius: 14px; background: #fff; border: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.op-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(137,11,0,.12); }
.op-field > i { position: absolute; pointer-events: none; font-size: .78rem; color: #8a8a8a; }
.op-field--search > i { left: 1rem; }
.op-field select + i { right: 1rem; font-size: .66rem; }
.op-field input, .op-field select { width: 100%; height: 100%; min-width: 0; padding: 0 2.3rem 0 1rem; border: 0; border-radius: inherit; background: transparent; font: 500 .9rem/1 var(--font-body); color: var(--ink); -webkit-appearance: none; appearance: none; outline: 0; text-overflow: ellipsis; }
.op-field--search input { padding-left: 2.5rem; padding-right: 1rem; }
.op-reset { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 3rem; padding: 0 1.1rem; border: 0; border-radius: 14px; background: var(--ink); color: #fff; font: 700 .82rem/1 var(--font-body); cursor: pointer; }
.op-reset[hidden] { display: none; }
.op-reset:hover { background: var(--brand); }
.op-count { margin: 1.25rem 0 1.5rem; font-size: .85rem; font-weight: 600; color: var(--muted); }
.op-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1rem, 2vw, 1.75rem); }
@media (min-width: 640px) { .op-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .op-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .op-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.op-grid[hidden], .op-card[hidden] { display: none; }
.op-card { position: relative; display: flex; flex-direction: column; min-width: 0; animation: opIn .5s var(--ease-out) both; }
@keyframes opIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.op-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 20px; background: var(--paper); }
.op-card__media picture, .op-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.op-card:hover .op-card__media img { transform: scale(1.05); }
.op-card__go { position: absolute; right: .85rem; bottom: .85rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #fff; color: var(--brand); font-size: .8rem; box-shadow: 0 10px 24px -10px rgba(0,0,0,.45); transform: translateY(6px); opacity: 0; transition: opacity .35s, transform .45s var(--ease-out); }
.op-card:hover .op-card__go { opacity: 1; transform: none; }
.op-card__body { display: flex; flex-direction: column; flex: 1; gap: .5rem; padding-top: 1rem; }
.op-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.op-card__meta > i { width: 4px; height: 4px; border-radius: 50%; background: #c9c9c9; }
.op-card__meta span:last-child { color: var(--muted); }
.op-card__meta span i { margin-right: .3rem; }
.op-card__title { margin: 0; font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-weight: 500; line-height: 1.15; letter-spacing: -.015em; }
.op-card__title a { color: var(--ink); text-decoration: none; transition: color .3s; }
.op-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 20px; }
.op-card__title a:focus-visible { outline: none; }
.op-card__title a:focus-visible::after { outline: 2px solid var(--brand); outline-offset: 4px; }
.op-card:hover .op-card__title a { color: var(--brand); }
.op-card__text { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.op-card__more { display: inline-flex; align-items: center; gap: .45rem; margin-top: auto; padding-top: .5rem; font-size: .9rem; font-weight: 700; color: var(--brand); }
.op-card__more i { font-size: .7rem; transition: transform .35s var(--ease-out); }
.op-card:hover .op-card__more i { transform: translateX(4px); }
.op-grid--4 .op-card__title { font-size: clamp(1.15rem, 1.5vw, 1.35rem); }
.op-empty { display: grid; justify-items: center; gap: .85rem; padding: 3rem 1rem; border-radius: 22px; border: 1px dashed var(--line); text-align: center; color: var(--muted); }
.op-empty[hidden] { display: none; }
.op-empty p { margin: 0; }
.op-empty__icon { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--brand-50); color: var(--brand); }
.op-band { background-color: #890B00; color: #fff; padding: clamp(3rem, 6vw, 5.5rem) 1rem; }
@media (min-width: 768px) { .op-band { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .op-band { padding-inline: 2.5rem; } }
.op-band__inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.75rem 2rem; }
.op-band__title { margin: 0; font-size: clamp(1.9rem, 4vw, 3.6rem); font-weight: 500; line-height: 1.04; letter-spacing: -.03em; }
.op-band__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* project page */
.pd-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: min(92svh, 860px); padding: 7.5rem 1rem clamp(2.5rem, 5vw, 4.5rem); color: #fff; background: var(--ink); }
@media (min-width: 768px) { .pd-hero { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .pd-hero { padding-inline: 2.5rem; } }
.pd-hero__media { position: absolute; inset: 0; z-index: -1; }
.pd-hero__media picture, .pd-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.1) 35%, rgba(0,0,0,.82) 100%), linear-gradient(90deg, rgba(0,0,0,.45), transparent 60%); }
.pd-hero__inner { display: flex; flex-direction: column; gap: 1.5rem; }
.pd-hero .bx-crumbs { color: rgba(255,255,255,.8); }
.pd-hero__body { max-width: 820px; }
.pd-hero__cat { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin: 0 0 1rem; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.pd-hero__cat > i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.6); }
.pd-hero__cat span i { margin-right: .35rem; }
.pd-hero__title { margin: 0; font-size: clamp(2.5rem, 7vw, 6rem); font-weight: 400; line-height: 1; letter-spacing: -.035em; }
.pd-hero__tagline { margin: 1rem 0 0; max-width: 52ch; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.5; color: rgba(255,255,255,.88); }
.pd-hero__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; }
.pd-overview { background: #fff; }
.pd-overview__grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) { .pd-overview__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 5rem; } }
.pd-lead { margin: 1.25rem 0 0; max-width: 62ch; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.7; color: #4a4a4a; }
.pd-locations { padding: 1.5rem; border-radius: 22px; background: var(--paper); }
@media (min-width: 1024px) { .pd-locations { position: sticky; top: 7rem; } }
.pd-locations__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; margin-bottom: .5rem; border-bottom: 1px solid var(--line); }
.pd-locations__head h3 { margin: 0; font-size: 1.3rem; font-weight: 500; }
.pd-locations__count { font: 500 1.6rem/1 var(--font-heading); color: var(--brand); }
.pd-locations__list { margin: 0; padding: 0; list-style: none; max-height: 340px; overflow: auto; scrollbar-width: thin; }
.pd-locations__list li { display: flex; gap: .65rem; padding: .7rem 0; border-bottom: 1px dashed #d6d6d6; font-size: .92rem; line-height: 1.45; color: #3a3a3a; }
.pd-locations__list li:last-child { border-bottom: 0; }
.pd-locations__list i { margin-top: .25rem; font-size: .72rem; color: var(--brand); }
.pd-gallery { background: #0D0B0B; color: #fff; }
.pd-gallery .hp-h2 { color: #fff; }
.pd-gallery .hp-wrap { overflow: visible; }
.pd-swiper { overflow: visible; }
.pd-gallery .hp-progress { background: rgba(255,255,255,.2); }
.pd-gallery .hp-progress span { background: #fff; }
.pd-shot { margin: 0; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 20px; background: #222; }
.pd-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-ba { background: var(--paper); }
.pd-ba__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .pd-ba__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4rem; } }
.pd-approach { background: #fff; }
.pd-steps { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
@media (min-width: 640px) { .pd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pd-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pd-step { position: relative; display: flex; flex-direction: column; gap: .6rem; padding: 1.5rem 1.35rem 1.6rem; border-radius: 20px; background: var(--paper); transition: background-color .4s, color .4s, transform .5s var(--ease-out); }
.pd-step:hover { background: var(--brand); color: #fff; transform: translateY(-4px); }
.pd-step__num { font: 500 2.4rem/1 var(--font-heading); letter-spacing: -.03em; color: var(--brand); transition: color .4s; }
.pd-step:hover .pd-step__num { color: rgba(255,255,255,.5); }
.pd-step__title { margin: .75rem 0 0; font-size: 1.25rem; font-weight: 500; line-height: 1.2; }
.pd-step__text { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--muted); transition: color .4s; }
.pd-step:hover .pd-step__text { color: rgba(255,255,255,.85); }
.pd-impact { background-color: #890B00; color: #fff; padding: clamp(3.5rem, 7vw, 6.5rem) 1rem; }
@media (min-width: 768px) { .pd-impact { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .pd-impact { padding-inline: 2.5rem; } }
.pd-impact .hp-h2 { color: #fff; }
.pd-impact__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .pd-impact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; } }
.pd-impact__text { margin: 1rem 0 0; max-width: 52ch; font-size: 1.02rem; line-height: 1.6; color: rgba(255,255,255,.85); }
.pd-impact__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.25); }
.pd-impact__list li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; gap: .85rem; padding: 1.05rem 0; border-bottom: 1px solid rgba(255,255,255,.25); font-size: clamp(1rem, 1.4vw, 1.2rem); font-weight: 500; }
.pd-impact__num { font: 500 .85rem/1 var(--font-heading); letter-spacing: .06em; color: rgba(255,255,255,.6); }
.pd-impact__list i { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: #fff; color: var(--brand); font-size: .7rem; }
.pd-more { background: #fff; }


/* ---------------------------------------------------------------------
   6. SERVICES + INDUSTRIES — shared "chapter" layout (image alternates
      left / right), service index, interior + exterior split, steps
   --------------------------------------------------------------------- */
/* reveal-on-scroll for single blocks (class added by components.js) */
html.rv-on [data-rv]:not(.is-in) { opacity: 0; transform: translateY(28px); }
html.rv-on [data-rv] { transition: opacity .9s var(--ease-out) var(--rv-d, 0ms), transform 1s var(--ease-out) var(--rv-d, 0ms); }
@media (prefers-reduced-motion: reduce) { html.rv-on [data-rv] { opacity: 1 !important; transform: none !important; transition: none; } }

/* intro: heading + copy + numbers */
.sv-intro, .in-intro { background: #fff; padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.sv-intro__top { display: grid; gap: 1.5rem 4rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
@media (min-width: 1024px) { .sv-intro__top { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.sv-intro__copy > p { margin: 0; max-width: 56ch; font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.65; color: #4a4a4a; }
.sv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.sv-stats li { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1rem 1.05rem; border-radius: 18px; background: var(--paper); }
.sv-stats strong { font: 500 clamp(1.5rem, 2.4vw, 2.1rem)/1 var(--font-heading); letter-spacing: -.03em; color: var(--ink); white-space: nowrap; }
.sv-stats strong small { margin-left: .05em; font-size: .6em; color: var(--brand); }
.sv-stats span { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 420px) { .sv-stats { grid-template-columns: 1fr 1fr; } .sv-stats li:last-child { grid-column: 1 / -1; } }

/* service index cards */
.sv-index { display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; }
@media (min-width: 640px) { .sv-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sv-index { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sv-index__card { position: relative; display: flex; flex-direction: column; gap: .55rem; min-height: 13rem; padding: 1.35rem 1.35rem 1.4rem; border-radius: 22px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; overflow: hidden; isolation: isolate; transition: border-color .4s, color .4s, transform .5s var(--ease-out), box-shadow .5s; }
.sv-index__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 100% 0%, #b3180a 0%, var(--brand) 45%, #5c0700 100%); opacity: 0; transition: opacity .45s; }
.sv-index__card:hover, .sv-index__card:focus-visible { color: #fff; border-color: var(--brand); transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(137,11,0,.75); outline: none; }
.sv-index__card:hover::before, .sv-index__card:focus-visible::before { opacity: 1; }
.sv-index__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: auto; padding-bottom: 1.75rem; }
.sv-index__num { font: 500 .95rem/1 var(--font-heading); letter-spacing: .06em; color: var(--muted); transition: color .4s; }
.sv-index__top i { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 14px; background: var(--paper); color: var(--brand); font-size: 1.05rem; transition: background-color .4s, color .4s; }
.sv-index__kicker { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); transition: color .4s; }
.sv-index__title { font-size: clamp(1.15rem, 1.5vw, 1.35rem); font-weight: 500; line-height: 1.18; letter-spacing: -.015em; padding-right: 2.5rem; }
.sv-index__go { position: absolute; right: 1.1rem; bottom: 1.1rem; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--line); font-size: .7rem; transition: background-color .4s, color .4s, border-color .4s, transform .4s var(--ease-out); }
.sv-index__card:hover .sv-index__num, .sv-index__card:hover .sv-index__kicker, .sv-index__card:focus-visible .sv-index__num, .sv-index__card:focus-visible .sv-index__kicker { color: rgba(255,255,255,.8); }
.sv-index__card:hover .sv-index__top i, .sv-index__card:focus-visible .sv-index__top i { background: rgba(255,255,255,.14); color: #fff; }
.sv-index__card:hover .sv-index__go, .sv-index__card:focus-visible .sv-index__go { background: #fff; border-color: #fff; color: var(--brand); transform: translateY(2px); }

/* interior + exterior split (dark band, glass panels on photos) */
.sv-io { background: #0D0B0B; color: #fff; }
.sv-io .hp-h2 { color: #fff; }
.sv-io .hp-sub { color: rgba(255,255,255,.72); }
.sv-io__grid { display: grid; gap: 1rem; }
@media (min-width: 900px) { .sv-io__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
.sv-io__card { position: relative; display: flex; align-items: flex-end; min-height: clamp(30rem, 52vw, 40rem); overflow: hidden; border-radius: 28px; isolation: isolate; }
.sv-io__media { position: absolute; inset: 0; z-index: -1; }
.sv-io__media picture, .sv-io__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.sv-io__card:hover .sv-io__media img { transform: scale(1.05); }
.sv-io__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 25%, rgba(0,0,0,.55) 100%); }
.sv-io__glass { width: 100%; margin: clamp(.75rem, 1.6vw, 1.25rem); padding: clamp(1.15rem, 2vw, 1.6rem); border-radius: 22px; color: #fff;
  background: linear-gradient(150deg, rgba(255,255,255,.2), rgba(255,255,255,.06) 60%), rgba(18,10,9,.32);
  border: 1px solid rgba(255,255,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 30px 60px -30px rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
.sv-io__label { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.sv-io__label span { width: .5rem; height: .5rem; border-radius: 50%; background: #ff8a7a; box-shadow: 0 0 0 4px rgba(255,138,122,.2); }
.sv-io__title { margin: 0 0 1rem; font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 500; line-height: 1.08; letter-spacing: -.02em; }
.sv-io__list { display: grid; gap: .5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
@media (min-width: 560px) { .sv-io__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1rem; } }
.sv-io__list li { display: flex; gap: .55rem; font-size: .9rem; line-height: 1.4; color: rgba(255,255,255,.92); }
.sv-io__list i { margin-top: .2rem; font-size: .68rem; color: #ffb4aa; }

/* chapters — image + copy, alternating sides */
.sv-lines { background: #fff; }
.sv-lines .hp-wrap { display: grid; gap: clamp(4rem, 9vw, 8rem); }
.ch { display: grid; gap: clamp(1.75rem, 4vw, 4.5rem); align-items: center; scroll-margin-top: 7rem; }
@media (min-width: 1024px) {
  .ch { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ch--flip .ch__media { order: 2; }
}
.ch__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 28px; background: var(--paper); isolation: isolate; box-shadow: 0 40px 80px -50px rgba(13,11,11,.55); }
@media (min-width: 1024px) { .ch__media { aspect-ratio: 5 / 6; max-height: 720px; width: 100%; } }
.ch__media picture, .ch__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out); }
.ch:hover .ch__media img { transform: scale(1.045); }
.ch__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, transparent 26%, transparent 64%, rgba(0,0,0,.4) 100%); }
.ch__badge { position: absolute; left: 1rem; top: 1rem; z-index: 1; display: inline-flex; align-items: baseline; gap: .3rem; padding: .5rem .8rem; border-radius: 999px; color: #fff; font-family: var(--font-heading);
  background: rgba(13,11,11,.32); border: 1px solid rgba(255,255,255,.3); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ch__badge b { font-size: 1.05rem; font-weight: 600; }
.ch__badge span { font-size: .78rem; opacity: .75; }
.ch__chip { position: absolute; right: 1rem; top: 1rem; z-index: 1; display: inline-flex; align-items: center; gap: .45rem; max-width: calc(100% - 7.5rem); padding: .55rem .85rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.9); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
.ch__chip i { color: var(--brand); }
.ch__proj { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1; display: flex; align-items: center; gap: .8rem; max-width: 22rem; padding: .55rem .9rem .55rem .55rem; border-radius: 18px; color: #fff; text-decoration: none;
  background: linear-gradient(150deg, rgba(255,255,255,.22), rgba(255,255,255,.08)), rgba(13,11,11,.3); border: 1px solid rgba(255,255,255,.32);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); transition: background-color .35s, transform .45s var(--ease-out); }
.ch__proj:hover { transform: translateY(-3px); background-color: rgba(137,11,0,.45); }
.ch__proj:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ch__proj-thumb { flex: none; width: 3.4rem; height: 2.6rem; overflow: hidden; border-radius: 10px; }
.ch__proj-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ch__proj-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ch__proj-text small { font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.ch__proj-text strong { font-size: .9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch__proj > i { margin-left: auto; font-size: .75rem; }
.ch__body { min-width: 0; max-width: 620px; }
.ch--flip .ch__body { justify-self: end; }
@media (max-width: 1023px) { .ch--flip .ch__body { justify-self: start; } }
.ch__eyebrow { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.1rem; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ch__eyebrow span { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--brand); color: #fff; font: 600 .82rem/1 var(--font-heading); letter-spacing: .02em; box-shadow: 0 12px 26px -12px rgba(137,11,0,.8); }
.ch__title { margin: 0; font-size: clamp(1.9rem, 3.6vw, 3.25rem); font-weight: 500; line-height: 1.02; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.ch__lead { margin: 1rem 0 0; font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.45; color: var(--ink); font-weight: 500; text-wrap: pretty; }
.ch__text { margin: .85rem 0 0; font-size: 1rem; line-height: 1.7; color: #555; }
.ch__key { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.ch__key-title { margin: 0 0 .9rem; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.ch__list { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .ch__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem .9rem; } }
.ch__list li { display: flex; align-items: flex-start; gap: .65rem; padding: .7rem .85rem; border-radius: 14px; background: var(--paper); font-size: .9rem; font-weight: 600; line-height: 1.38; color: #2b2b2b; transition: background-color .3s, transform .35s var(--ease-out); }
.ch__list li:hover { background: #f6e9e7; transform: translateX(2px); }
.ch__list i { flex: none; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-top: .05rem; border-radius: 50%; background: var(--brand); color: #fff; font-size: .55rem; }
.ch__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1.75rem; }

/* industries — each chapter in its own band, tint alternates */
.in-band { background: #fff; padding-block: clamp(3rem, 6.5vw, 6.5rem); }
.in-band--tint { background: #F7F3F2; }
.in-band--tint .ch__list li { background: #fff; }
.in-band .ch { scroll-margin-top: 0; }
.in-band[id] { scroll-margin-top: 4.5rem; }
.in-chips { display: flex; gap: .55rem; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: .2rem .1rem .4rem; margin-inline: -.1rem; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.in-chips::-webkit-scrollbar { display: none; }
@media (min-width: 1100px) { .in-chips { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; } }
.in-chip { flex: none; display: inline-flex; align-items: center; gap: .6rem; padding: .45rem 1rem .45rem .45rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: .9rem; font-weight: 700; text-decoration: none; transition: border-color .3s, background-color .3s, color .3s, transform .35s var(--ease-out); }
.in-chip__icon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--paper); color: var(--brand); font-size: .82rem; transition: background-color .3s, color .3s; }
.in-chip:hover, .in-chip:focus-visible { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-2px); outline: none; }
.in-chip:hover .in-chip__icon, .in-chip:focus-visible .in-chip__icon { background: rgba(255,255,255,.16); color: #fff; }

/* how every project runs */
.sv-steps { background-color: #890B00; color: #fff; }
.sv-steps .hp-h2 { color: #fff; }
.sv-steps__grid { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .sv-steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sv-steps__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
.sv-steps__grid > li { display: flex; }
.sv-step { position: relative; display: flex; flex-direction: column; gap: .55rem; width: 100%; min-height: 12.5rem; padding: 1.4rem 1.4rem 1.5rem; border-radius: 22px; color: #fff; text-decoration: none;
  background: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.04) 60%), rgba(40,3,0,.18); border: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color .4s, border-color .4s, transform .5s var(--ease-out); }
.sv-step:hover, .sv-step:focus-visible { background-color: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); transform: translateY(-4px); outline: none; }
.sv-step__num { font: 500 2.6rem/1 var(--font-heading); letter-spacing: -.04em; color: rgba(255,255,255,.28); margin-bottom: auto; padding-bottom: 1.25rem; }
.sv-step__title { font-size: clamp(1.15rem, 1.5vw, 1.35rem); font-weight: 500; line-height: 1.15; padding-right: 2.75rem; }
.sv-step__text { font-size: .9rem; line-height: 1.5; color: rgba(255,255,255,.78); }
.sv-step__go { position: absolute; right: 1.2rem; top: 1.25rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #fff; color: var(--brand); font-size: .75rem; transition: transform .4s var(--ease-out); }
.sv-step:hover .sv-step__go { transform: rotate(-45deg); }

.sv-work { background: #fff; }
.sv-work .op-card { animation: none; }
@media (max-width: 639px) {
  .sv-index__card { min-height: 0; padding: 1.1rem 1.1rem 1.15rem; }
  .sv-index__top { padding-bottom: 1rem; }
  .sv-io__card { min-height: 27rem; }
  .ch__media { border-radius: 22px; }
  .ch__actions .btn { flex: 0 0 auto; }
}

/* ---------------------------------------------------------------------
   7. PROJECT MAP — edge-to-edge Google map, floating glass card
   --------------------------------------------------------------------- */
.pm { --pm-gutter: clamp(1rem, 3vw, 2.5rem); position: relative; isolation: isolate; height: clamp(34rem, 92svh, 56rem); background: #E9C6BF; overflow: hidden; }
@media (max-width: 1023px) { .pm { height: clamp(36rem, 86svh, 50rem); } }
@media (max-width: 639px) { .pm { height: clamp(34rem, 92svh, 46rem); } }
.pm__map { position: absolute; inset: 0; }
.pm::before, .pm::after { content: ""; position: absolute; left: 0; right: 0; z-index: 4; height: 4.5rem; pointer-events: none; }
.pm::before { top: 0; background: linear-gradient(rgba(246,246,246,.75), transparent); }
.pm::after { bottom: 0; background: linear-gradient(transparent, rgba(92,7,0,.18)); }
.pm__loading { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; transition: opacity .5s; }
.pm__loading.is-done { opacity: 0; }
.pm__loading span { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid #F0C7C0; border-top-color: var(--brand); animation: pmSpin .9s linear infinite; }
.pm__notice { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 6rem 1.5rem 1.5rem; text-align: center; background: radial-gradient(circle at 70% 40%, rgba(137,11,0,.12), transparent 60%), #F6EEEB; }
.pm__notice[hidden] { display: none; }
.pm__notice div { display: grid; justify-items: center; gap: .55rem; max-width: 26rem; padding: 1.5rem; border-radius: 20px; background: rgba(255,255,255,.8); box-shadow: 0 0 0 1px rgba(137,11,0,.12); }
.pm__notice i { font-size: 1.4rem; color: var(--brand); }
.pm__notice h3 { margin: 0; font: 500 1.15rem/1.2 var(--font-heading); color: var(--ink); }
.pm__notice p { margin: 0; font-size: .88rem; color: var(--muted); }

/* glass */
.pm-glass { background: rgba(255,255,255,.5); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.45), 0 0 0 1px rgba(137,11,0,.1), 0 24px 50px -24px rgba(92,7,0,.45); }

/* floating title card */
.pm-card { position: absolute; z-index: 10; left: var(--pm-gutter); top: clamp(1.25rem, 6vh, 4.5rem); width: min(27rem, calc(100% - 2 * var(--pm-gutter))); padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.15rem, 2vw, 1.7rem); border-radius: 24px; color: var(--ink); animation: pmFloat 7s ease-in-out infinite; }
.pm-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.15) 40%, rgba(137,11,0,.25)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.pm-card__eyebrow { display: inline-flex; align-items: center; gap: .55rem; margin: 0; padding: .38rem .75rem; border-radius: 999px; background: rgba(255,255,255,.6); font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); }
.pm-live { position: relative; width: .5rem; height: .5rem; border-radius: 50%; background: var(--brand); }
.pm-live::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: pmPing 2s var(--ease-out) infinite; }
.pm-card__title { margin: .8rem 0 0; font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); font-weight: 500; line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
.pm-card__title em { font-style: normal; color: var(--brand); }
.pm-card__count { margin: .75rem 0 0; font-size: .86rem; color: #5a4744; }
.pm-card__count b { color: var(--brand); font-variant-numeric: tabular-nums; }

/* zoom controls */
.pm-ctl { position: absolute; z-index: 10; right: var(--pm-gutter); top: 50%; translate: 0 -50%; display: grid; overflow: hidden; border-radius: 18px; }
.pm-ctl button { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border: 0; background: transparent; color: #5C0700; cursor: pointer; transition: background-color .25s, color .25s; }
.pm-ctl button + button { border-top: 1px solid rgba(137,11,0,.1); }
.pm-ctl button:hover { background: var(--brand); color: #fff; }
.pm-ctl button:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; }
@media (max-width: 1023px) { .pm-ctl { top: auto; bottom: 1.25rem; translate: none; } .pm-ctl button { width: 2.6rem; height: 2.6rem; } }

.pm-hint { position: absolute; z-index: 10; left: 50%; bottom: 1.5rem; translate: -50% 0; display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: .5rem 1rem; border-radius: 999px; font-size: .76rem; font-weight: 700; color: #5C0700; white-space: nowrap; pointer-events: none; transition: opacity .5s; }
.pm-hint.is-gone { opacity: 0; }

/* pins */
.pm-ov { position: absolute; translate: -50% -100%; }
.pm-pin { position: relative; width: 2.15rem; cursor: pointer; transform-origin: 50% 100%; transition: scale .22s cubic-bezier(.34,1.56,.64,1); filter: drop-shadow(0 6px 6px rgba(60,6,0,.35)); }
.pm-pin svg { width: 100%; height: auto; overflow: visible; display: block; }
.pm-pin::before { content: ""; position: absolute; left: 50%; bottom: -.2rem; width: 1rem; height: .35rem; translate: -50% 0; border-radius: 50%; background: rgba(137,11,0,.45); opacity: 0; }
.pm-pin:hover, .pm-pin.is-active { scale: 1.22; z-index: 2; }
.pm-pin:hover::before, .pm-pin.is-active::before { animation: pmPing 1.4s var(--ease-out) infinite; }
.pm-pin:focus-visible { outline: none; scale: 1.22; }
.pm-pin:focus-visible svg path { stroke: #E3998E; }
.pm-pin--hq { width: 2.9rem; }
.pm-pin.is-flying { animation: pmFly 1.1s cubic-bezier(.34,1.56,.64,1) both; animation-delay: var(--d, 0ms); }

/* project card */
.pm-tip { --x: 0px; --y: 0px; position: absolute; z-index: 15; left: var(--x); top: var(--y); width: min(19rem, calc(100vw - 2rem)); translate: -50% calc(-100% - .75rem); padding: .95rem 1rem .9rem; border-radius: 18px; color: var(--ink);
  background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 0 0 1px rgba(137,11,0,.16), 0 24px 50px -18px rgba(92,7,0,.5);
  opacity: 0; scale: .96; visibility: hidden; pointer-events: none; transform-origin: 50% 100%; transition: opacity .16s var(--ease-out), scale .2s var(--ease-out), visibility 0s .2s; }
.pm-tip.is-open { opacity: 1; scale: 1; visibility: visible; transition: opacity .16s var(--ease-out), scale .22s cubic-bezier(.34,1.56,.64,1), visibility 0s; }
.pm-tip.is-pinned { pointer-events: auto; }
.pm-tip.is-below { translate: -50% .75rem; transform-origin: 50% 0; }
.pm-tip__top { display: flex; align-items: flex-start; gap: .7rem; }
.pm-tip__b { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: var(--brand); color: #fff; font: 800 1rem/1 var(--font-heading); }
.pm-tip small { font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.pm-tip h3 { margin: .1rem 0 0; font: 500 1rem/1.25 var(--font-heading); }
.pm-tip__x { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; margin: -.3rem -.35rem 0 auto; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.pm-tip__x:hover { background: #FCF3F1; color: var(--brand); }
.pm-tip dl { display: grid; gap: .5rem; margin: .75rem 0 0; padding-top: .7rem; border-top: 1px solid rgba(137,11,0,.1); }
.pm-tip dl div { display: grid; grid-template-columns: 1.1rem 1fr; gap: .55rem; font-size: .82rem; line-height: 1.45; }
.pm-tip dl i { margin-top: .2rem; font-size: .78rem; color: var(--brand); }
.pm-url { font-weight: 700; color: var(--brand); }
@media (max-width: 639px) {
  .pm-card { top: 1rem; padding: 1rem 1.1rem; border-radius: 20px; }
  .pm-card__count { font-size: .8rem; }
  .pm-hint { bottom: 1.35rem; left: var(--pm-gutter); translate: none; }
  .pm-tip.is-pinned { left: .75rem; right: .75rem; top: auto; bottom: .75rem; width: auto; translate: none; }
}

@keyframes pmSpin { to { rotate: 360deg; } }
@keyframes pmPing { 0% { opacity: .55; scale: 1; } 80%, 100% { opacity: 0; scale: 2.4; } }
@keyframes pmFly { 0% { opacity: 0; translate: var(--fx, 0) var(--fy, -300px); scale: .3; } 60% { opacity: 1; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes pmFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .pm-card, .pm-live::after, .pm-pin.is-flying, .pm__loading span { animation: none; } }


/* ---------------------------------------------------------------------
   8. ABOUT — pillars, modular tiles, why us, delivery line
   --------------------------------------------------------------------- */
.ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .ab-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 420px) { .ab-stats li:last-child { grid-column: auto; } }
.ab-pillars { display: grid; gap: .85rem; }
@media (min-width: 768px) { .ab-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
.ab-pillar { position: relative; overflow: hidden; padding: 1.5rem 1.4rem 1.6rem; border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(160deg, #fff 40%, #FBF3F1); transition: transform .5s var(--ease-out), box-shadow .5s, border-color .4s; }
.ab-pillar:hover { transform: translateY(-4px); border-color: rgba(137,11,0,.3); box-shadow: 0 26px 50px -32px rgba(137,11,0,.6); }
.ab-pillar__icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1.4rem; border-radius: 14px; background: var(--brand); color: #fff; font-size: 1.1rem; box-shadow: 0 14px 28px -14px rgba(137,11,0,.9); }
.ab-pillar__title { margin: 0 0 .5rem; font-size: clamp(1.2rem, 1.6vw, 1.45rem); font-weight: 500; letter-spacing: -.015em; }
.ab-pillar p { margin: 0; font-size: .95rem; line-height: 1.6; color: #555; }

.ab-caps { background: #F7F3F2; }
.ab-caps .ch__list li { background: #fff; }
.ab-caps__head { margin-bottom: 0; }
.ab-mod { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); scroll-margin-top: 7rem; }
.ab-mod__head { max-width: 760px; }
.ab-mod__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .ab-mod__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
.ab-tile { position: relative; overflow: hidden; aspect-ratio: 4 / 3.4; border-radius: 22px; background: var(--paper); isolation: isolate; }
.ab-tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.ab-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.6)); }
.ab-tile:hover img { transform: scale(1.06); }
.ab-tile__num { position: absolute; left: .85rem; top: .85rem; padding: .35rem .6rem; border-radius: 999px; font: 600 .72rem/1 var(--font-heading); color: #fff; background: rgba(13,11,11,.3); border: 1px solid rgba(255,255,255,.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ab-tile__label { position: absolute; left: .7rem; right: .7rem; bottom: .7rem; padding: .7rem .85rem; border-radius: 14px; font-size: clamp(.78rem, 1.1vw, .92rem); font-weight: 700; line-height: 1.3; color: #fff;
  background: linear-gradient(150deg, rgba(255,255,255,.22), rgba(255,255,255,.06)), rgba(13,11,11,.25); border: 1px solid rgba(255,255,255,.3); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); }

.ab-why__grid { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .ab-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ab-why__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; } }
.ab-why__card { position: relative; display: flex; flex-direction: column; gap: .5rem; min-height: 14rem; padding: 1.4rem 1.3rem 1.5rem; border-radius: 22px; color: #fff;
  background: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.04) 60%), rgba(40,3,0,.18); border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .5s var(--ease-out), border-color .4s; }
.ab-why__card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.5); }
.ab-why__icon { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; margin-bottom: auto; border-radius: 14px; background: #fff; color: var(--brand); font-size: 1.05rem; }
.ab-why__num { position: absolute; right: 1.2rem; top: 1.2rem; font: 500 1.8rem/1 var(--font-heading); color: rgba(255,255,255,.25); }
.ab-why__title { margin: 1.5rem 0 0; font-size: 1.25rem; font-weight: 500; line-height: 1.15; }
.ab-why__card p { margin: 0; font-size: .88rem; line-height: 1.5; color: rgba(255,255,255,.8); }

.ab-steps { background: #fff; }
.ab-line { position: relative; display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 1024px) {
  .ab-line { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
  .ab-line::before { content: ""; position: absolute; left: 1.4rem; right: 1.4rem; top: 1.4rem; height: 2px; background: linear-gradient(90deg, var(--brand), rgba(137,11,0,.15)); }
}
.ab-line__item { position: relative; display: flex; flex-direction: column; gap: .5rem; height: 100%; color: var(--ink); text-decoration: none; }
@media (max-width: 1023px) { .ab-line__item { padding: 0 0 0 4rem; min-height: 3rem; } .ab-line__dot { position: absolute; left: 0; top: 0; } .ab-line > li { position: relative; } .ab-line > li:not(:last-child)::after { content: ""; position: absolute; left: 1.4rem; top: 3rem; bottom: -1rem; width: 2px; background: rgba(137,11,0,.2); } }
.ab-line__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: #fff; border: 2px solid var(--brand); color: var(--brand); font: 600 .85rem/1 var(--font-heading); transition: background-color .3s, color .3s; }
.ab-line__item:hover .ab-line__dot, .ab-line__item:focus-visible .ab-line__dot { background: var(--brand); color: #fff; }
.ab-line__item strong { margin-top: .6rem; font-size: 1.1rem; font-weight: 500; line-height: 1.2; }
@media (max-width: 1023px) { .ab-line__item strong { margin-top: .5rem; } }
.ab-line__item span:last-child { font-size: .88rem; line-height: 1.5; color: var(--muted); }
.ab-line__item:hover strong { color: var(--brand); }