/* Sayara Rent — Digital-first mobility brand with speed glass, orange navigation cues and flowing automotive lines. */
:root {
  --arabic: "Tajawal", "Noto Kufi Arabic", sans-serif;
  --serif: "Archivo", "Playfair Display", serif;
  --sans: "DM Sans", "Manrope", sans-serif;
  --radius: 26px;
  --glass: color-mix(in srgb, var(--surface) 72%, transparent);
  --glass-strong: color-mix(in srgb, var(--surface) 88%, transparent);
  --glass-line: color-mix(in srgb, white 42%, var(--ink) 10%);
  --soft-shadow: 0 32px 100px color-mix(in srgb, var(--ink) 13%, transparent);
}

body[data-design="mobility-flow"] {
  background:
    radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 30rem),
    radial-gradient(circle at 92% 34%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 36rem),
    var(--surface);
}

body[data-design="mobility-flow"] main { display: flex; flex-direction: column; }
body[data-design="mobility-flow"] .hero { order: -2; }
body[data-design="mobility-flow"] .marquee { order: -1; }
.signature-section{order:1}
.gallery-section{order:2}
.services{order:3}
.story{order:4}
.voices{order:5}
.statement{order:6}
.contact{order:7}

body[data-design="mobility-flow"] .site-header,
body[data-design="mobility-flow"] .hero-badge,
body[data-design="mobility-flow"] .testimonial,
body[data-design="mobility-flow"] .contact-card,
body[data-design="mobility-flow"] .signature-items article {
  border: 1px solid var(--glass-line);
  box-shadow: var(--soft-shadow), inset 0 1px 0 #ffffff66;
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}

body[data-design="mobility-flow"] .site-header { background: var(--glass); }
body[data-design="mobility-flow"] .brand-mark { border-radius: calc(var(--radius) * .46); }
body[data-design="mobility-flow"] .button,
body[data-design="mobility-flow"] .utility-button,
body[data-design="mobility-flow"] .header-cta { border-radius: calc(var(--radius) * .4); }
body[data-design="mobility-flow"] .hero-visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% -8% -5% 10%;
  border-radius: var(--radius);
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 42%, transparent), color-mix(in srgb, var(--primary) 10%, transparent));
  filter: blur(45px);
  opacity: .72;
}
body[data-design="mobility-flow"] .hero-image-wrap,
body[data-design="mobility-flow"] .story-image,
body[data-design="mobility-flow"] .gallery-item { box-shadow: var(--soft-shadow); }
body[data-design="mobility-flow"] .hero-image-wrap img,
body[data-design="mobility-flow"] .gallery-item img { filter: saturate(.92) contrast(1.02); }

.client-motif { position: absolute; z-index: 3; pointer-events: none; }
.client-motif i { position: absolute; display: block; border: 1px solid color-mix(in srgb, var(--accent) 76%, white); background: color-mix(in srgb, var(--surface) 42%, transparent); box-shadow: inset 0 1px 0 #fff8, 0 18px 45px #0002; backdrop-filter: blur(14px); }

.signature-section { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(260px,.75fr) minmax(0,1.25fr); gap: clamp(3rem,8vw,8rem); align-items: start; }
.signature-section::before { content: ""; position: absolute; width: 34rem; height: 34rem; inset-inline-end: -18rem; top: -14rem; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 50%; pointer-events: none; }
.signature-intro { position: sticky; top: 8rem; }
.signature-intro h2 { margin: 1.6rem 0 1.2rem; font: 500 clamp(2.8rem,5vw,5.5rem)/.98 var(--serif); letter-spacing: -.045em; text-wrap: balance; }
html[lang="ar"] .signature-intro h2 { font-family: var(--arabic); line-height: 1.22; }
.signature-intro > p { max-width: 560px; color: var(--muted); font-size: 1.06rem; }
.signature-items { display: grid; gap: 1rem; }
.signature-items article { min-height: 205px; padding: clamp(1.5rem,3vw,2.4rem); position: relative; overflow: hidden; border-radius: var(--radius); background: var(--glass); }
.signature-items article::after { content: ""; width: 8rem; height: 8rem; position: absolute; inset-inline-end: -4rem; bottom: -5rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 24%, transparent); }
.signature-items span { color: var(--accent); font: 700 .72rem/1 var(--sans); letter-spacing: .14em; }
.signature-items h3 { margin: 2.2rem 0 .7rem; font: 600 clamp(1.45rem,2.4vw,2.2rem)/1.1 var(--serif); }
html[lang="ar"] .signature-items h3 { font-family: var(--arabic); }
.signature-items p { max-width: 52ch; margin: 0; color: var(--muted); }

html[data-theme="dark"] body[data-design="mobility-flow"] {
  --glass: color-mix(in srgb, #151a19 72%, transparent);
  --glass-strong: color-mix(in srgb, #151a19 90%, transparent);
  --glass-line: #ffffff24;
  --soft-shadow: 0 34px 100px #0008;
}
html[data-theme="dark"] body[data-design="mobility-flow"] .signature-items article { background: var(--glass); }

/* 01 — rose atelier: sculpted portrait and pearl orbits */
body[data-hero="portrait-orbit"] .hero { grid-template-columns: .82fr 1.18fr; }
body[data-hero="portrait-orbit"] .hero-visual { transform: rotate(1.4deg); }
body[data-hero="portrait-orbit"] .hero-image-wrap { border-radius: 48% 48% 24px 24px; }
body[data-hero="portrait-orbit"] .client-motif { inset: 9% auto auto -3%; }
body[data-hero="portrait-orbit"] .client-motif i { border-radius: 50%; }
body[data-hero="portrait-orbit"] .client-motif i:nth-child(1) { width: 92px; height: 92px; }
body[data-hero="portrait-orbit"] .client-motif i:nth-child(2) { width: 36px; height: 36px; translate: 86px 86px; }
body[data-hero="portrait-orbit"] .client-motif i:nth-child(3) { width: 18px; height: 18px; translate: -12px 112px; }

/* 02 — botanical sanctuary: canopy composition */
body[data-hero="botanical-canopy"] .hero { grid-template-columns: 1.05fr .95fr; }
body[data-hero="botanical-canopy"] .hero-image-wrap { border-radius: 52% 10% 52% 10%; clip-path: ellipse(69% 60% at 62% 48%); }
body[data-hero="botanical-canopy"] .client-motif { inset: auto 8% 5% auto; rotate: -24deg; }
body[data-hero="botanical-canopy"] .client-motif i { width: 54px; height: 112px; border-radius: 100% 0 100% 0; transform-origin: bottom; }
body[data-hero="botanical-canopy"] .client-motif i:nth-child(2) { rotate: 42deg; }
body[data-hero="botanical-canopy"] .client-motif i:nth-child(3) { rotate: 82deg; }

/* 03 — Noor deco: cinematic symmetry and geometric frame */
body[data-hero="deco-mosaic"] .hero { text-align: center; grid-template-columns: 1fr; padding-inline: 8vw; }
body[data-hero="deco-mosaic"] .hero-copy { max-width: 920px; margin: 0 auto -11rem; z-index: 4; color: white; }
body[data-hero="deco-mosaic"] .hero-description, body[data-hero="deco-mosaic"] .hero-location { margin-inline: auto; color: #fffbd0; justify-content: center; }
body[data-hero="deco-mosaic"] .hero-visual { min-height: 78svh; width: 100%; }
body[data-hero="deco-mosaic"] .hero-image-wrap { border-radius: 240px 240px 24px 24px; }
body[data-hero="deco-mosaic"] .hero-image-wrap::after { content:""; position:absolute; inset:22px; border:1px solid #fff8; border-radius:220px 220px 14px 14px; }

/* 04 — tidal horizon: expansive panoramic resort */
body[data-hero="wide-horizon"] .hero { grid-template-columns: 1fr; padding-bottom: 2rem; }
body[data-hero="wide-horizon"] .hero-copy { max-width: 760px; padding: 2.3rem; border-radius: var(--radius); background: var(--glass); backdrop-filter: blur(25px); box-shadow: var(--soft-shadow); position: absolute; z-index: 5; inset-inline-start: max(5vw,calc((100vw - 1320px)/2)); bottom: 8rem; }
body[data-hero="wide-horizon"] .hero-visual { width: 100%; min-height: 78svh; }
body[data-hero="wide-horizon"] .hero-image-wrap { min-height: 78svh; border-radius: var(--radius); }
body[data-hero="wide-horizon"] .client-motif { inset: 10% 4% auto auto; width: 170px; }
body[data-hero="wide-horizon"] .client-motif i { width: 160px; height: 44px; border-width: 1px 0 0; border-radius: 50%; }
body[data-hero="wide-horizon"] .client-motif i:nth-child(2) { translate: 0 23px; }
body[data-hero="wide-horizon"] .client-motif i:nth-child(3) { translate: 0 46px; }

/* 05 — saffron ember: intimate cinematic table */
body[data-hero="cinematic-table"] .hero { color: #fff; grid-template-columns: 1fr; min-height: 100svh; }
body[data-hero="cinematic-table"] .hero-visual { position: absolute; inset: 0; min-height: 100%; z-index: -1; }
body[data-hero="cinematic-table"] .hero-image-wrap { min-height: 100%; border-radius: 0; }
body[data-hero="cinematic-table"] .hero-visual::before { content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(90deg,#160d08e8 12%,#2d120a6b 70%,transparent); }
body[data-hero="cinematic-table"] .hero-copy { max-width: 690px; }
body[data-hero="cinematic-table"] .hero-description, body[data-hero="cinematic-table"] .hero-location { color:#fffbd0; }

/* 06 — coastal majlis: round window to the water */
body[data-hero="coastal-window"] .hero-image-wrap { border-radius: 50% 50% 14px 14px; outline: 14px solid color-mix(in srgb,var(--accent) 18%,transparent); outline-offset: 12px; }
body[data-hero="coastal-window"] .hero-copy { align-self: end; padding-bottom: 8rem; }
body[data-hero="coastal-window"] .client-motif { inset: auto -2% 9% auto; }
body[data-hero="coastal-window"] .client-motif i { width: 90px; height: 45px; border-radius: 0 0 90px 90px; }
body[data-hero="coastal-window"] .client-motif i:nth-child(2) { translate: -48px -35px; rotate: 35deg; }

/* 07 — Qahwa Nine: kinetic typographic poster */
body[data-hero="kinetic-poster"] .hero { grid-template-columns: 1.1fr .9fr; }
body[data-hero="kinetic-poster"] .hero h1 { font-size:clamp(4.8rem,9vw,9.5rem); line-height:.82; }
body[data-hero="kinetic-poster"] .hero-image-wrap { clip-path:polygon(10% 0,100% 7%,91% 100%,0 91%); border-radius:8px; }
body[data-hero="kinetic-poster"] .hero-badge { rotate:-8deg; }
body[data-hero="kinetic-poster"] .client-motif { inset: 4% auto auto -8%; }
body[data-hero="kinetic-poster"] .client-motif::before { content:"09"; font:700 7rem/.8 var(--serif); color:color-mix(in srgb,var(--accent) 65%,transparent); }

/* 08 — Sikkat: deliberately quiet brew counter */
body[data-hero="quiet-counter"] .hero { grid-template-columns:1fr 1fr; gap:10vw; }
body[data-hero="quiet-counter"] .hero h1 { font-size:clamp(3rem,6vw,6.3rem); }
body[data-hero="quiet-counter"] .hero-image-wrap { min-height:520px; height:70%; border-radius:4px; }
body[data-hero="quiet-counter"] .hero-visual { display:grid; align-items:center; }
body[data-hero="quiet-counter"] .hero-orbit, body[data-hero="quiet-counter"] .hero-badge { display:none; }

/* 09 — Basma: reassuring aurora clinic */
body[data-hero="aurora-clinic"] .hero { border-radius:0 0 8vw 8vw; overflow:hidden; background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 18%,transparent),transparent 55%); }
body[data-hero="aurora-clinic"] .hero-image-wrap { border-radius:220px 220px var(--radius) var(--radius); }
body[data-hero="aurora-clinic"] .hero-visual::after { background:conic-gradient(from 180deg,var(--accent),#8ce9dd,var(--primary),var(--accent)); opacity:.42; }

/* 10 — Durar: precision pearl profile */
body[data-hero="pearl-profile"] .hero-image-wrap { border-radius:50%; aspect-ratio:1; min-height:0; margin-top:6rem; border:18px solid var(--glass); }
body[data-hero="pearl-profile"] .hero-visual { min-height:640px; display:grid; place-items:center; }
body[data-hero="pearl-profile"] .hero-badge { bottom:16%; }
body[data-hero="pearl-profile"] .client-motif { inset:10% 4% auto auto; }
body[data-hero="pearl-profile"] .client-motif i { width:34px;height:34px;border-radius:50%; }
body[data-hero="pearl-profile"] .client-motif i:nth-child(2){width:18px;height:18px;translate:-44px 58px}
body[data-hero="pearl-profile"] .client-motif i:nth-child(3){width:72px;height:72px;translate:28px 82px}

/* 11 — Rukn: strict architectural ledger */
body[data-hero="architect-grid"] .hero { background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:64px 64px; }
body[data-hero="architect-grid"] .hero-image-wrap { border-radius:0; clip-path:polygon(12% 0,100% 0,100% 88%,88% 100%,0 100%,0 12%); }
body[data-hero="architect-grid"] .hero-badge { border-radius:0; }

/* 12 — Dar Al Waha: low, sculpted desert villa */
body[data-hero="desert-villa"] .hero { grid-template-columns:1fr; padding-bottom:2rem; }
body[data-hero="desert-villa"] .hero-copy { max-width:800px; }
body[data-hero="desert-villa"] .hero-visual { min-height:64svh; }
body[data-hero="desert-villa"] .hero-image-wrap { min-height:64svh; border-radius:50% 50% var(--radius) var(--radius)/35% 35% var(--radius) var(--radius); }

/* 13 — Himma: neon athletic energy */
body[data-hero="kinetic-athlete"] .hero { background:#0b0d0c; color:#fff; }
body[data-hero="kinetic-athlete"] .hero h1 { font-size:clamp(4.2rem,9vw,9rem); line-height:.84; text-transform:uppercase; }
body[data-hero="kinetic-athlete"] .hero-description,body[data-hero="kinetic-athlete"] .hero-location{color:#ffffffa8}
body[data-hero="kinetic-athlete"] .hero-image-wrap { border-radius:0; clip-path:polygon(15% 0,100% 0,85% 100%,0 100%); filter:drop-shadow(24px 24px 0 var(--accent)); }

/* 14 — Nadi Al Qimma: measured performance split */
body[data-hero="performance-split"] .hero { grid-template-columns:.72fr 1.28fr; }
body[data-hero="performance-split"] .hero-copy { border-inline-start:6px solid var(--accent); }
body[data-hero="performance-split"] .hero-image-wrap { border-radius:var(--radius); clip-path:polygon(0 8%,100% 0,100% 92%,0 100%); }

/* 15 — Binaa: blueprint project site */
body[data-hero="blueprint-site"] .hero { background-color:color-mix(in srgb,var(--primary) 10%,var(--surface)); background-image:linear-gradient(color-mix(in srgb,var(--primary) 16%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--primary) 16%,transparent) 1px,transparent 1px);background-size:32px 32px;}
body[data-hero="blueprint-site"] .hero-image-wrap { border-radius:2px; border:1px solid var(--primary); padding:12px; }
body[data-hero="blueprint-site"] .hero-badge { border-radius:2px; }

/* 16 — Mada: bold material planes */
body[data-hero="material-planes"] .hero { grid-template-columns:1fr 1.25fr; }
body[data-hero="material-planes"] .hero-visual { transform:translateY(3rem); }
body[data-hero="material-planes"] .hero-image-wrap { border-radius:0 0 0 42%; clip-path:polygon(8% 0,100% 0,100% 100%,0 100%,0 8%); }
body[data-hero="material-planes"] .hero::before { border-radius:0; transform:rotate(22deg); }

/* 17 — Mizan: calm legal column */
body[data-hero="legal-column"] .hero { grid-template-columns:.9fr 1.1fr; }
body[data-hero="legal-column"] .hero-copy { padding-inline:clamp(1rem,5vw,5rem); border-inline:1px solid var(--line); }
body[data-hero="legal-column"] .hero-image-wrap { border-radius:300px 300px 0 0; filter:grayscale(.45) contrast(1.08); }

/* 18 — Ruwad: strategic signal dashboard */
body[data-hero="signal-dashboard"] .hero { grid-template-columns:1fr; text-align:center; }
body[data-hero="signal-dashboard"] .hero-copy { max-width:980px; margin:auto; }
body[data-hero="signal-dashboard"] .hero-description,body[data-hero="signal-dashboard"] .hero-location{margin-inline:auto;justify-content:center}
body[data-hero="signal-dashboard"] .hero-visual { min-height:480px; width:min(1100px,100%); margin:auto; }
body[data-hero="signal-dashboard"] .hero-image-wrap { min-height:480px; border-radius:var(--radius); clip-path:polygon(4% 0,96% 0,100% 12%,100% 88%,96% 100%,4% 100%,0 88%,0 12%); }

/* 19 — Sayara: motion along an open road */
body[data-hero="motion-road"] .hero { grid-template-columns:.7fr 1.3fr; }
body[data-hero="motion-road"] .hero-visual { transform:translateX(4vw); }
html[dir="rtl"] body[data-hero="motion-road"] .hero-visual{transform:translateX(-4vw)}
body[data-hero="motion-road"] .hero-image-wrap { border-radius:220px 0 0 220px; clip-path:polygon(8% 0,100% 0,100% 100%,0 100%); }

/* 20 — Masar: midnight showroom stage */
body[data-hero="showroom-stage"] .hero { background:linear-gradient(#080a0c,#13171c); color:white; grid-template-columns:1fr; text-align:center; }
body[data-hero="showroom-stage"] .hero-copy{max-width:900px;margin:auto auto -8rem;z-index:4}
body[data-hero="showroom-stage"] .hero-description,body[data-hero="showroom-stage"] .hero-location{color:#ffffffa8;margin-inline:auto;justify-content:center}
body[data-hero="showroom-stage"] .hero-visual{width:100%;min-height:68svh}
body[data-hero="showroom-stage"] .hero-image-wrap{min-height:68svh;border-radius:50% 50% 12px 12px/20% 20% 12px 12px}

/* 21 — Souq Ayla: fashion editorial product crop */
body[data-hero="editorial-product"] .hero { grid-template-columns:1fr .78fr; }
body[data-hero="editorial-product"] .hero-copy { z-index:4; }
body[data-hero="editorial-product"] .hero h1 { max-width:14ch; }
body[data-hero="editorial-product"] .hero-image-wrap { border-radius:50% 50% 0 0; transform:translateY(3rem); }
body[data-hero="editorial-product"] .hero-badge { inset:auto auto 12% -38%; rotate:-90deg; }

/* 22 — Nakhla Home: soft architectural window */
body[data-hero="interior-window"] .hero { grid-template-columns:.78fr 1.22fr; }
body[data-hero="interior-window"] .hero-image-wrap { border-radius:300px 300px var(--radius) var(--radius); padding:10px; background:var(--glass); }
body[data-hero="interior-window"] .hero-copy { align-self:end; padding-bottom:8rem; }

/* Client-specific service compositions */
body[data-services-style="floating-tiles"] .service-list,
body[data-services-style="concierge-grid"] .service-list,
body[data-services-style="roast-modules"] .service-list,
body[data-services-style="neighbourhood-cards"] .service-list,
body[data-services-style="performance-blocks"] .service-list,
body[data-services-style="phase-grid"] .service-list,
body[data-services-style="strategy-modules"] .service-list,
body[data-services-style="collection-cards"] .service-list,
body[data-services-style="room-cards"] .service-list { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; border:0; }
body[data-services-style="floating-tiles"] .service-card,body[data-services-style="concierge-grid"] .service-card,body[data-services-style="roast-modules"] .service-card,body[data-services-style="neighbourhood-cards"] .service-card,body[data-services-style="performance-blocks"] .service-card,body[data-services-style="phase-grid"] .service-card,body[data-services-style="strategy-modules"] .service-card,body[data-services-style="collection-cards"] .service-card,body[data-services-style="room-cards"] .service-card{display:flex;flex-direction:column;align-items:flex-start;border:1px solid var(--glass-line);border-radius:var(--radius);padding:2rem;background:var(--glass);box-shadow:inset 0 1px 0 #fff7}
body[data-services-style="floating-tiles"] .service-card:nth-child(2){transform:translateY(2.5rem)}
body[data-services-style="concierge-grid"] .service-card{border-radius:4px;background:linear-gradient(145deg,var(--glass),color-mix(in srgb,var(--accent) 10%,transparent))}
body[data-services-style="roast-modules"] .service-card{border-radius:6px;min-height:330px;justify-content:space-between}.service-card .service-arrow{margin-top:auto}
body[data-services-style="neighbourhood-cards"] .service-card:nth-child(1){grid-column:span 2}.service-card:nth-child(1){}
body[data-services-style="performance-blocks"] .service-card{background:#101312;color:#fff;border-color:#ffffff28}.service-card p{ }
body[data-services-style="phase-grid"] .service-card{border-radius:2px;border-top:5px solid var(--primary)}
body[data-services-style="strategy-modules"] .service-card{box-shadow:0 24px 80px color-mix(in srgb,var(--primary) 10%,transparent);}
body[data-services-style="collection-cards"] .service-card{min-height:380px;justify-content:flex-end;border-radius:50% 50% var(--radius) var(--radius)}
body[data-services-style="room-cards"] .service-card{min-height:320px;border-radius:120px 120px var(--radius) var(--radius);text-align:center;align-items:center}
body[data-services-style="organic-stack"] .service-card{margin-bottom:1rem;padding:2rem;border:0;border-radius:50px;background:color-mix(in srgb,var(--accent) 11%,var(--glass));}
body[data-services-style="organic-stack"] .service-card:nth-child(even){margin-inline-start:8vw}
body[data-services-style="tide-cards"] .service-list{display:flex;gap:1rem;overflow-x:auto;border:0;padding-bottom:1rem}.service-card{min-width:0}
body[data-services-style="tide-cards"] .service-card{min-width:min(76vw,420px);display:flex;flex-direction:column;align-items:flex-start;border:1px solid var(--line);border-radius:var(--radius);padding:2rem}
body[data-services-style="menu-ledger"] .service-card{grid-template-columns:54px 1fr 1.2fr 0;border-bottom:1px dashed var(--line)}
body[data-services-style="shared-plates"] .service-card{grid-template-columns:64px 1fr 1fr 52px;border-radius:999px;padding:1.4rem 2rem;margin:.8rem 0;background:var(--glass)}
body[data-services-style="minimal-notes"] .service-list{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem}.service-card{ }
body[data-services-style="minimal-notes"] .service-card{display:block;padding:2rem 0;border-bottom:0}.service-card p{ }
body[data-services-style="care-path"] .service-list{border-inline-start:2px solid var(--accent);margin-inline-start:2rem}.service-card{ }
body[data-services-style="care-path"] .service-card{position:relative;padding-inline-start:3rem}.service-card::before{ }
body[data-services-style="care-path"] .service-card::before{content:"";position:absolute;inset-inline-start:-9px;width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 8px var(--surface)}
body[data-services-style="precision-list"] .service-card{border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 2rem;margin:.8rem 0;background:var(--glass)}
body[data-services-style="property-ledger"] .service-list{border:1px solid var(--line)}.service-card{ }
body[data-services-style="property-ledger"] .service-card{padding-inline:1.5rem;background-image:linear-gradient(90deg,transparent 68%,color-mix(in srgb,var(--accent) 8%,transparent) 68%)}
body[data-services-style="metric-rails"] .service-card{grid-template-columns:54px .8fr 1.3fr 120px}.service-card::after{ }
body[data-services-style="metric-rails"] .service-card::after{content:"";height:8px;border-radius:99px;background:linear-gradient(90deg,var(--accent) var(--fill,68%),var(--line) var(--fill,68%))}
body[data-services-style="metric-rails"] .service-card:nth-child(2){--fill:84%}body[data-services-style="metric-rails"] .service-card:nth-child(3){--fill:76%}
body[data-services-style="specification-cards"] .service-card{border:0;border-radius:var(--radius);padding:2rem;margin:1rem 0;background:linear-gradient(105deg,color-mix(in srgb,var(--primary) 12%,var(--glass)),var(--glass))}
body[data-services-style="case-index"] .service-card{grid-template-columns:54px 1fr 1.2fr 48px;border-bottom:1px solid var(--ink)}
body[data-services-style="fleet-switcher"] .service-list{display:grid;grid-template-columns:1fr 1fr;gap:1rem;border:0}.service-card{ }
body[data-services-style="fleet-switcher"] .service-card{border:1px solid var(--line);border-radius:var(--radius);padding:2rem;background:var(--glass)}
body[data-services-style="spec-panels"] .service-card{padding:2rem;margin:.8rem 0;color:#fff;background:linear-gradient(90deg,#111820,#27313a);border:0;border-radius:var(--radius)}

/* Gallery treatments are deliberately different per client */
body[data-gallery-style="arched-editorial"] .gallery-item-wide{border-radius:260px 260px 24px 24px}
body[data-gallery-style="leaf-collage"] .gallery-item-wide{clip-path:ellipse(70% 58% at 60% 50%)}body[data-gallery-style="leaf-collage"] .gallery-item-tall{border-radius:100% 0 100% 0}
body[data-gallery-style="cinema-mosaic"] .gallery-grid{grid-template-columns:1fr 1.4fr 1fr}.gallery-item{ }.gallery-note{ }
body[data-gallery-style="cinema-mosaic"] .gallery-item{border-radius:4px}
body[data-gallery-style="panorama-strip"] .gallery-grid{grid-template-columns:2fr 1fr 1fr;grid-template-rows:2fr 1fr;min-height:620px}.gallery-item-wide{ }
body[data-gallery-style="film-frames"] .gallery-item{border:10px solid #160d08;border-radius:2px;filter:sepia(.18)}
body[data-gallery-style="wave-grid"] .gallery-item{border-radius:50% 12px 50% 12px}
body[data-gallery-style="contact-sheet"] .gallery-grid{gap:8px;background:#111;padding:8px}.gallery-item{ }
body[data-gallery-style="contact-sheet"] .gallery-item{border-radius:0;filter:contrast(1.08)}
body[data-gallery-style="material-grid"] .gallery-grid{gap:3rem}.gallery-item{ }
body[data-gallery-style="material-grid"] .gallery-item{border-radius:2px;box-shadow:none}
body[data-gallery-style="clean-cards"] .gallery-item{border-radius:var(--radius);padding:8px;background:#fff}
body[data-gallery-style="jewel-cases"] .gallery-item{border-radius:50%;padding:8px;background:linear-gradient(145deg,#fff7,var(--glass))}
body[data-gallery-style="floorplan-mosaic"] .gallery-grid{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px;padding:2rem}.gallery-item{ }
body[data-gallery-style="floorplan-mosaic"] .gallery-item{border-radius:0}
body[data-gallery-style="courtyard-grid"] .gallery-item-wide{border-radius:240px 240px 20px 20px}body[data-gallery-style="courtyard-grid"] .gallery-item-tall{transform:translateY(3rem)}
body[data-gallery-style="motion-strip"] .gallery-grid{transform:skewY(-2deg);gap:4px}.gallery-item{ }body[data-gallery-style="motion-strip"] .gallery-item{border-radius:0}
body[data-gallery-style="training-sequence"] .gallery-item{clip-path:polygon(5% 0,100% 0,95% 100%,0 100%);border-radius:0}
body[data-gallery-style="project-board"] .gallery-item{border-radius:2px;border:1px solid var(--primary);padding:6px;background:var(--surface)}
body[data-gallery-style="sample-wall"] .gallery-grid{grid-template-columns:repeat(4,1fr);grid-template-rows:1fr}.gallery-item{ }body[data-gallery-style="sample-wall"] .gallery-item{grid-area:auto;border-radius:0}.gallery-note{ }
body[data-gallery-style="archive-frames"] .gallery-item{filter:grayscale(.55);border-radius:0;border:1px solid var(--ink);padding:6px}
body[data-gallery-style="insight-wall"] .gallery-item{border-radius:var(--radius);box-shadow:12px 12px 0 color-mix(in srgb,var(--accent) 40%,transparent)}
body[data-gallery-style="road-reel"] .gallery-grid{grid-template-columns:1.8fr .6fr .6fr}.gallery-item{ }body[data-gallery-style="road-reel"] .gallery-item{border-radius:180px}
body[data-gallery-style="detail-reel"] .gallery-grid{background:#0c1015;padding:1rem}.gallery-item{ }body[data-gallery-style="detail-reel"] .gallery-item{border-radius:8px;filter:saturate(.7) contrast(1.15)}
body[data-gallery-style="lookbook-grid"] .gallery-item-wide{border-radius:0 180px 0 0}body[data-gallery-style="lookbook-grid"] .gallery-item-tall{border-radius:180px 0 0 0}
body[data-gallery-style="interior-collage"] .gallery-item{border-radius:120px 120px var(--radius) var(--radius)}

/* The unique business signature changes rhythm as well as copy */
body[data-signature="ritual"] .signature-items{grid-template-columns:repeat(3,1fr)}body[data-signature="ritual"] .signature-items article{border-radius:50% 50% var(--radius) var(--radius);min-height:360px}
body[data-signature="ingredients"] .signature-items article:nth-child(2){margin-inline-start:5vw}
body[data-signature="concierge"] .signature-items{grid-template-columns:repeat(3,1fr)}body[data-signature="concierge"] .signature-items article{min-height:360px;border-radius:4px}
body[data-signature="tides"] .signature-items{grid-template-columns:repeat(3,1fr)}body[data-signature="tides"] .signature-items article{border-radius:120px 120px var(--radius) var(--radius)}
body[data-signature="tasting"] .signature-items article{border-inline-start:4px solid var(--accent)}
body[data-signature="catch"] .signature-items{grid-template-columns:repeat(3,1fr)}body[data-signature="catch"] .signature-items article{border-radius:50%}
body[data-signature="roast"] .signature-items{grid-template-columns:repeat(3,1fr);transform:rotate(-1deg)}body[data-signature="roast"] .signature-items article{border-radius:4px}
body[data-signature="brew"] .signature-items article{box-shadow:none;background:transparent;border-width:1px 0 0;border-radius:0}
body[data-signature="comfort"] .signature-items article{border-radius:999px;padding-inline:3rem;min-height:160px}
body[data-signature="atelier"] .signature-items{grid-template-columns:repeat(3,1fr)}body[data-signature="atelier"] .signature-items article{border-radius:50% 50% var(--radius) var(--radius);min-height:340px}
body[data-signature="coordinates"] .signature-items article{border-radius:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:24px 24px}
body[data-signature="compass"] .signature-items{grid-template-columns:repeat(3,1fr)}body[data-signature="compass"] .signature-items article{border-radius:50%;aspect-ratio:1;display:flex;flex-direction:column;justify-content:center}
body[data-signature="intensity"] .signature-items{grid-template-columns:repeat(3,1fr)}body[data-signature="intensity"] .signature-items article{background:#101312;color:#fff;border-radius:2px}
body[data-signature="lab"] .signature-items article{display:grid;grid-template-columns:80px 1fr;align-items:center}body[data-signature="lab"] .signature-items article p{grid-column:2}
body[data-signature="phases"] .signature-items{grid-template-columns:repeat(3,1fr)}body[data-signature="phases"] .signature-items article{border-radius:0;border-top:6px solid var(--primary)}
body[data-signature="materials"] .signature-items{grid-template-columns:repeat(3,1fr)}body[data-signature="materials"] .signature-items article:nth-child(2){transform:translateY(3rem)}
body[data-signature="principles"] .signature-items article{border-radius:0;border-inline-start:1px solid var(--ink);box-shadow:none;background:transparent}
body[data-signature="framework"] .signature-items{grid-template-columns:repeat(3,1fr)}body[data-signature="framework"] .signature-items article{clip-path:polygon(8% 0,100% 0,100% 92%,92% 100%,0 100%,0 8%)}
body[data-signature="fleet"] .signature-items{display:flex;overflow-x:auto}.signature-items article{ }body[data-signature="fleet"] .signature-items article{min-width:min(76vw,400px)}
body[data-signature="details"] .signature-items{grid-template-columns:repeat(3,1fr)}body[data-signature="details"] .signature-items article{background:linear-gradient(145deg,#111820,#29313a);color:white;border-radius:8px}
body[data-signature="collection"] .signature-items{grid-template-columns:repeat(3,1fr)}body[data-signature="collection"] .signature-items article{border-radius:180px 180px 0 0;min-height:380px;text-align:center}
body[data-signature="moods"] .signature-items article{border-radius:120px;padding-inline:3rem}

@media (max-width: 1100px) {
  body[data-design="mobility-flow"] .hero, body[data-design="mobility-flow"][data-hero] .hero { grid-template-columns:1fr; text-align:start; }
  body[data-design="mobility-flow"][data-hero] .hero-copy { position:relative; inset:auto; margin:0; padding:1.5rem; max-width:none; color:inherit; background:transparent; box-shadow:none; backdrop-filter:none; }
  body[data-design="mobility-flow"][data-hero] .hero-description,body[data-design="mobility-flow"][data-hero] .hero-location{color:var(--muted);margin-inline:0;justify-content:flex-start}
  body[data-design="mobility-flow"][data-hero] .hero-visual{position:relative;inset:auto;width:100%;min-height:560px;transform:none;filter:none}
  body[data-design="mobility-flow"][data-hero] .hero-image-wrap{min-height:560px;height:100%;margin:0;border-radius:var(--radius);clip-path:none;transform:none;outline:0;padding:0}
  body[data-design="mobility-flow"][data-hero] .hero-image-wrap::after{display:none}
  body[data-design="mobility-flow"] .signature-section { grid-template-columns:1fr; }
  body[data-design="mobility-flow"] .signature-intro { position:static; }
  body[data-design="mobility-flow"] .service-list,body[data-design="mobility-flow"] .signature-items{grid-template-columns:1fr 1fr}
  body[data-design="mobility-flow"] .service-card,body[data-design="mobility-flow"] .signature-items article{transform:none!important;margin-inline:0!important;border-radius:calc(var(--radius) * .75)}
  body[data-design="mobility-flow"] .gallery-grid{transform:none;grid-template-columns:1.15fr .85fr;grid-template-rows:1fr 1fr 160px}
}

@media (max-width: 640px) {
  body[data-design="mobility-flow"] .hero-copy { padding-inline:0; }
  body[data-design="mobility-flow"][data-hero] .hero-visual,body[data-design="mobility-flow"][data-hero] .hero-image-wrap{min-height:440px}
  body[data-design="mobility-flow"] .service-list,body[data-design="mobility-flow"] .signature-items{display:grid;grid-template-columns:1fr;overflow:visible}
  body[data-design="mobility-flow"] .service-card,body[data-design="mobility-flow"] .signature-items article{min-width:0;min-height:0;display:block;padding:1.5rem}
  body[data-design="mobility-flow"] .signature-items h3{margin-top:1.2rem}
  body[data-design="mobility-flow"] .gallery-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:330px 230px 150px;padding:0;background:none;gap:.7rem}
  body[data-design="mobility-flow"] .gallery-item{transform:none;clip-path:none;border-radius:calc(var(--radius) * .6);padding:0}
  body[data-design="mobility-flow"] .gallery-item-wide{grid-column:1/3;grid-row:1}
  body[data-design="mobility-flow"] .gallery-item-tall{grid-column:1;grid-row:2}
  body[data-design="mobility-flow"] .gallery-item:not(.gallery-item-wide):not(.gallery-item-tall){grid-column:2;grid-row:2}
  body[data-design="mobility-flow"] .gallery-note{grid-column:1/3;grid-row:3}
}

@media (prefers-reduced-motion: reduce) {
  body[data-design="mobility-flow"] .client-motif { display:none; }
}