:root {
  --bg: #050505;
  --fg: #f6f2ea;
  --muted: rgba(246,242,234,.62);
  --line: rgba(246,242,234,.18);
  --blue: #63c5ff;
  --blue-2: #87d5ff;
  --radius: 28px;
  --pad: clamp(20px, 4vw, 64px);
  --max: 1440px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.45;
  overflow-x: hidden;
  transition: color .22s ease;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background: var(--bg);
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
::selection { background: var(--blue); color: #07111a; }

.progress {
  position: fixed; z-index: 100; left: 0; right: 0; top: 0; height: 2px;
  background: transparent;
}
.progress span { display:block; height:100%; width:0; background: var(--blue); }
.noise {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.scroll-line {
  position: fixed; inset: 5vh -8vw auto auto; width: min(80vw, 1100px); height: 90vh; z-index: -1;
  pointer-events:none; opacity:.22;
}
.scroll-line path { fill:none; stroke: var(--blue); stroke-width:1.6; stroke-linecap:round; stroke-dasharray: 1800; stroke-dashoffset: 1800; }

.site-header {
  position: fixed; z-index: 50; top: 0; left: 0; right: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding: 18px var(--pad);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background .25s ease, border-color .25s ease, color .2s ease;
}
.site-header.scrolled { background: color-mix(in srgb, var(--bg) 78%, transparent); border-color: var(--line); }
.brand { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.19em; font-weight:700; }
.brand img { width: 27px; height:27px; object-fit:cover; border-radius: 50%; }
.site-header nav { display:flex; gap:30px; font-size:12px; }
.site-header nav a { opacity:.66; transition:opacity .2s ease; }
.site-header nav a:hover { opacity:1; }
.header-cta { justify-self:end; border:1px solid var(--line); border-radius:100px; padding:9px 15px; font-size:12px; transition:transform .2s, background .2s; }
.header-cta:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--fg) 9%, transparent); }

.section { width:min(100%, var(--max)); margin:0 auto; padding: clamp(92px, 12vw, 190px) var(--pad); position:relative; }
.section.compact { padding-top: 80px; padding-bottom:120px; }
.hero { min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-top:140px; }
.eyebrow, .kicker { text-transform:uppercase; letter-spacing:.18em; font-size:11px; font-weight:700; }
.eyebrow { display:flex; gap:9px; align-items:center; margin-bottom:34px; opacity:.7; }
.dot { width:7px; height:7px; background: var(--blue); border-radius:50%; box-shadow:0 0 0 6px color-mix(in srgb, var(--blue) 14%, transparent); }
.hero h1, .section h2 { margin:0; letter-spacing:-.06em; font-weight:550; line-height:.92; }
.hero h1 { font-size: clamp(82px, 15vw, 220px); max-width:1200px; }
.hero-subtitle {
  margin:30px 0 0;
  max-width:760px;
  font: inherit;
  font-size:clamp(18px,2vw,30px);
  line-height:1.25;
  letter-spacing:-.025em;
  color:var(--muted);
}
.hero h1 em, .contact h2 em { font-family: Georgia, "Times New Roman", serif; font-weight:400; letter-spacing:-.045em; }
.hero-bottom { margin-top:38px; display:grid; grid-template-columns:minmax(240px, 470px) auto; align-items:end; gap:40px; }
.hero-bottom p { margin:0; font-size:clamp(16px,1.55vw,23px); color:var(--muted); max-width:470px; }
.arrow-link { justify-self:end; display:flex; gap:20px; align-items:center; border-bottom:1px solid var(--line); padding-bottom:9px; font-size:13px; }
.arrow-link span { font-size:22px; }
.hero-orbit { position:absolute; right:var(--pad); bottom:7%; width:150px; height:150px; display:grid; place-items:center; opacity:.65; }
.orbit-ring { position:absolute; inset:22px; border:1px solid var(--line); border-radius:50%; animation: spin 18s linear infinite; }
.orbit-ring::after { content:""; position:absolute; width:8px; height:8px; background:var(--blue); border-radius:50%; top:-4px; left:50%; }
.orbit-dot { width:8px; height:8px; border-radius:50%; background:var(--fg); }
.hero-orbit span { position:absolute; inset:0; display:grid; place-items:start center; padding-top:5px; font-size:8px; letter-spacing:.17em; }
@keyframes spin { to { transform: rotate(360deg); } }

.statement { display:grid; grid-template-columns: 1fr 2.1fr; gap:clamp(40px,8vw,120px); align-items:start; }
.statement h2, .section-heading h2, .chart-copy h2, .contact h2 { font-size:clamp(52px,7.4vw,112px); }
.statement .kicker { margin:14px 0 0; }
.statement-copy { grid-column:2; max-width:580px; font-size:clamp(16px,1.6vw,24px); color:var(--muted); margin:32px 0 0; }

.section-heading { display:grid; grid-template-columns: 1fr 2.1fr; gap:clamp(40px,8vw,120px); align-items:start; margin-bottom:80px; }
.section-heading .kicker { margin:15px 0 0; }

/* Services headline: confident, airy two-line lockup */
.services-title {
  display:flex;
  flex-direction:column;
  gap:.12em;
  max-width:12.5ch;
  line-height:.86 !important;
}
.services-title span { display:block; }
.services-title-shift {
  margin-left:1.15ch;
  white-space:nowrap;
}

.services-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.service-card {
  grid-column: span 2; min-height:390px; padding:28px; border:1px solid var(--line); border-radius:var(--radius);
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  transition: transform .35s cubic-bezier(.2,.75,.2,1), background .3s, border-color .3s, box-shadow .35s ease;
  isolation:isolate;
}
.service-card::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.25; z-index:-1;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:34px 34px; mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 62%);
}
.service-card:hover { transform:translateY(-8px); background:color-mix(in srgb, var(--fg) 6%, var(--bg)); box-shadow:0 24px 70px rgba(0,0,0,.08); }
.service-card.wide { grid-column:span 3; min-height:330px; }
.service-card.featured { border-color: color-mix(in srgb, var(--blue) 76%, var(--line)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 14%, transparent); }
.service-card.featured::after { content:""; position:absolute; width:180px; height:180px; border-radius:50%; right:-55px; top:-55px; background:var(--blue); filter:blur(75px); opacity:.18; z-index:-1; }
.service-no { font-size:11px; opacity:.55; letter-spacing:.14em; position:relative; z-index:3; }
.service-card h3 { margin:auto 0 10px; font-size:clamp(27px,3vw,44px); letter-spacing:-.045em; font-weight:550; position:relative; z-index:3; }
.service-card p { margin:0; max-width:360px; color:var(--muted); font-size:14px; position:relative; z-index:3; }
.badge { position:absolute; top:22px; left:50%; transform:translateX(-50%); padding:7px 11px; border:1px solid color-mix(in srgb,var(--blue) 55%,var(--line)); border-radius:100px; font-size:10px; letter-spacing:.08em; background:color-mix(in srgb,var(--blue) 12%,var(--bg)); z-index:5; }

.service-visual { position:absolute; inset:64px 24px auto auto; width:58%; height:42%; min-height:120px; opacity:.72; pointer-events:none; transition:transform .5s cubic-bezier(.2,.75,.2,1), opacity .4s ease; }
.service-card:hover .service-visual { transform:translateY(-5px) scale(1.02); opacity:1; }
.branding-visual { border-left:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 18px; display:flex; align-items:flex-end; gap:12px; }
.branding-visual::before { content:""; position:absolute; left:34%; top:0; bottom:0; width:1px; background:var(--line); }
.branding-visual::after { content:""; position:absolute; left:0; right:0; top:38%; height:1px; background:var(--line); }
.type-big { font-family:Georgia,serif; font-size:clamp(44px,5vw,72px); line-height:.8; letter-spacing:-.08em; }
.type-small { position:absolute; right:0; bottom:6px; font-size:8px; letter-spacing:.2em; opacity:.6; }
.branding-visual i { position:absolute; width:7px; height:7px; border-radius:50%; border:1px solid var(--fg); background:var(--bg); }
.branding-visual i:nth-of-type(1){ left:34%; top:38%; transform:translate(-50%,-50%); }
.branding-visual i:nth-of-type(2){ left:12%; top:14%; }
.branding-visual i:nth-of-type(3){ right:8%; top:25%; background:var(--blue); border-color:var(--blue); box-shadow:0 0 0 6px color-mix(in srgb,var(--blue) 12%,transparent); }

.web-visual { border:1px solid var(--line); border-radius:12px; overflow:hidden; padding:12px; background:color-mix(in srgb,var(--bg) 82%,transparent); }
.browser-top { height:16px; display:flex; gap:5px; align-items:flex-start; border-bottom:1px solid var(--line); }
.browser-top i { width:5px; height:5px; border-radius:50%; background:var(--muted); }
.browser-hero { width:63%; height:22%; border-radius:5px; margin-top:14px; background:linear-gradient(90deg,var(--fg),color-mix(in srgb,var(--fg) 35%,transparent)); opacity:.8; }
.browser-lines { display:grid; gap:7px; margin-top:13px; }
.browser-lines i { display:block; height:3px; border-radius:5px; background:var(--line); }
.browser-lines i:nth-child(1){ width:82%; }.browser-lines i:nth-child(2){ width:67%; }.browser-lines i:nth-child(3){ width:45%; }
.web-cursor { position:absolute; right:18%; bottom:16%; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--blue); color:#07111a; font-size:16px; box-shadow:0 8px 30px color-mix(in srgb,var(--blue) 35%,transparent); animation:webFloat 3.6s ease-in-out infinite; }
@keyframes webFloat { 0%,100%{ transform:translate(0,0) rotate(-7deg); } 50%{ transform:translate(-10px,-8px) rotate(4deg); } }

.app-visual { overflow:visible; }
.app-panel { position:absolute; width:46%; height:64%; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb,var(--bg) 84%,transparent); box-shadow:0 12px 40px rgba(0,0,0,.07); }
.panel-a { left:8%; top:19%; transform:rotate(-8deg); }.panel-b { right:5%; top:2%; transform:rotate(7deg); border-color:color-mix(in srgb,var(--blue) 40%,var(--line)); }
.app-node { position:absolute; width:10px; height:10px; border-radius:50%; background:var(--blue); z-index:3; box-shadow:0 0 0 7px color-mix(in srgb,var(--blue) 12%,transparent); }
.node-a{ left:22%; top:64%; }.node-b{ right:18%; top:24%; }
.app-visual svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.app-visual path { fill:none; stroke:var(--blue); stroke-width:1.5; stroke-dasharray:5 7; animation:dashMove 5s linear infinite; }
@keyframes dashMove { to { stroke-dashoffset:-48; } }

.content-visual { width:48%; right:4%; top:46px; }
.content-ring { position:absolute; border:1px solid var(--line); border-radius:50%; }
.ring-a { width:112px; height:112px; right:22px; top:0; }.ring-b { width:68px; height:68px; right:44px; top:22px; border-color:color-mix(in srgb,var(--blue) 52%,var(--line)); }
.content-dot { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--fg); }
.dot-a{ right:72px; top:0; background:var(--blue); }.dot-b{ right:12px; top:72px; }.dot-c{ right:122px; top:101px; }
.content-line { position:absolute; height:1px; transform-origin:right center; background:var(--line); }
.line-a{ width:150px; right:74px; top:60px; transform:rotate(-14deg); }.line-b{ width:105px; right:20px; top:96px; transform:rotate(16deg); }
.service-content:hover .ring-a { animation:spin 10s linear infinite; }

.merch-visual { width:45%; right:5%; top:48px; }
.merch-tag { position:absolute; right:16px; top:10px; width:145px; height:82px; border:1px solid var(--line); border-radius:14px 14px 14px 24px; transform:rotate(-7deg); display:grid; place-items:center; background:color-mix(in srgb,var(--bg) 88%,transparent); }
.merch-tag span { font-family:Georgia,serif; letter-spacing:.08em; font-size:20px; }
.merch-tag i { position:absolute; width:9px; height:9px; border:1px solid var(--line); border-radius:50%; left:13px; top:13px; }
.merch-stitch { position:absolute; right:4px; top:2px; width:170px; height:104px; border:1px dashed color-mix(in srgb,var(--blue) 55%,var(--line)); border-radius:18px; transform:rotate(4deg); opacity:.7; }
.merch-spark { position:absolute; color:var(--blue); font-size:17px; animation:sparkPulse 2.8s ease-in-out infinite; }.spark-a{ left:13%; top:18%; }.spark-b{ left:30%; top:68%; animation-delay:-1.1s; font-size:10px; }
@keyframes sparkPulse { 0%,100%{ transform:scale(.7) rotate(0); opacity:.3;} 50%{ transform:scale(1.2) rotate(25deg); opacity:1;} }

.projects-title { margin-bottom:70px; }
.project-list { display:grid; gap:90px; }
.project-card { display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(280px,.72fr); gap:clamp(28px,5vw,75px); align-items:center; }
.project-card:nth-child(even) .project-media { order:2; }
.project-card:nth-child(even) .project-info { order:1; }
.project-media { min-height:clamp(420px,58vw,720px); border-radius:30px; overflow:hidden; display:grid; place-items:center; border:1px solid var(--line); position:relative; }
.project-media::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,transparent,rgba(99,197,255,.10)); pointer-events:none; }
.light-media { background:#f4f4f2; }
.dark-media { background:#292929; }
.wynns-media { background:#000; }
.wynns-logo { width:min(82%,760px); mix-blend-mode:normal; }
.doble-logo { width:min(68%,620px); }
.eschoyez-media { background:#f7f0e8; }
.eschoyez-logo { width:min(48%,380px); max-height:78%; object-fit:cover; object-position:center; box-shadow:0 30px 70px rgba(0,0,0,.12); }
.movimiento-media { background:#eaf7ff; border-color:color-mix(in srgb,var(--blue) 42%,var(--line)); }
.movimiento-logo { width:min(56%,480px); max-height:78%; object-fit:contain; }

.project-movimiento .project-index { color:var(--fg); opacity:.56; }
.project-movimiento .project-info h3 { color:var(--fg); }
.project-movimiento .project-status { background:rgba(255,255,255,.92); color:#111; border-color:rgba(17,17,17,.16); }
.project-status { position:absolute; left:24px; bottom:24px; z-index:2; padding:9px 13px; border:1px solid rgba(9,44,89,.18); border-radius:999px; background:rgba(255,255,255,.88); color:#0b3d75; font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.project-info { min-height:280px; display:flex; flex-direction:column; justify-content:space-between; gap:50px; }
.project-index { font-size:10px; letter-spacing:.18em; opacity:.56; }
.project-info h3 { font-size:clamp(36px,4vw,62px); line-height:.98; letter-spacing:-.05em; margin:16px 0 13px; font-weight:570; }
.project-info p { margin:0; max-width:410px; color:var(--muted); font-size:15px; }
.project-info > a, .project-actions a, .project-case-link { display:block; width:max-content; font-size:12px; border:0; border-bottom:1px solid var(--line); padding:0 0 7px; background:none; color:inherit; font-family:inherit; cursor:pointer; text-align:left; }
.project-actions { display:flex; flex-direction:column; gap:14px; }

/* Project case-study detail views */
.project-detail-layer {
  position:fixed; inset:0; z-index:115; overflow:auto; background:#f7f5f0; color:#111;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .32s ease, visibility .32s ease;
}
.project-detail-layer.open { opacity:1; visibility:visible; pointer-events:auto; }
.project-detail { display:none; width:min(100%,var(--max)); min-height:100%; margin:0 auto; padding:clamp(92px,10vw,148px) var(--pad) 90px; }
.project-detail.active { display:block; }
.project-detail-back { position:fixed; top:24px; left:var(--pad); z-index:3; appearance:none; border:0; border-bottom:1px solid rgba(17,17,17,.2); background:rgba(247,245,240,.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:#111; padding:8px 0; font-size:11px; cursor:pointer; }
.project-detail-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:30px; align-items:end; padding-bottom:42px; border-bottom:1px solid rgba(17,17,17,.14); }
.project-detail-head .kicker { color:#111; opacity:.5; margin-bottom:18px; }
.project-detail-head h2 { margin:0; max-width:12ch; font-size:clamp(52px,7vw,108px); line-height:.9; letter-spacing:-.06em; font-weight:560; }
.project-detail-tags { margin:22px 0 0; font-size:12px; letter-spacing:.04em; color:rgba(17,17,17,.55); }
.project-detail-visit { align-self:end; margin-bottom:7px; font-size:12px; border-bottom:1px solid rgba(17,17,17,.2); padding-bottom:7px; }
.project-detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:52px; background:rgba(17,17,17,.13); border:1px solid rgba(17,17,17,.13); }
.project-detail-grid article { background:#f7f5f0; padding:clamp(24px,3.4vw,46px); min-height:240px; }
.project-detail-grid span, .project-detail-status span { display:block; margin-bottom:23px; font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; opacity:.46; }
.project-detail-grid p { margin:0; font-size:clamp(16px,1.4vw,20px); line-height:1.5; letter-spacing:-.01em; color:rgba(17,17,17,.72); }
.project-detail-quote { margin:50px 0 0 auto; max-width:820px; padding:34px 0 0; border-top:1px solid rgba(17,17,17,.15); }
.project-detail-quote p { margin:0; font-family:Georgia,serif; font-size:clamp(21px,2.1vw,33px); line-height:1.32; letter-spacing:-.025em; }
.project-detail-quote footer { margin-top:23px; display:flex; flex-direction:column; gap:3px; font-size:11px; }
.project-detail-quote footer span { opacity:.5; }
.project-detail-status { margin-top:34px; display:flex; align-items:baseline; gap:18px; }
.project-detail-status span { margin:0; }
.project-detail-status strong { font-size:14px; font-weight:600; }
body.project-detail-open { overflow:hidden; }
@media (max-width:900px) {
  .project-detail-head { grid-template-columns:1fr; }
  .project-detail-visit { justify-self:start; }
  .project-detail-grid { grid-template-columns:1fr; }
  .project-detail-grid article { min-height:0; }
}
@media (max-width:620px) {
  .project-detail { padding-top:92px; }
  .project-detail-head h2 { font-size:clamp(46px,14vw,72px); }
  .project-detail-grid { margin-top:34px; }
  .project-detail-quote { margin-top:36px; }
}

.satisfaction-wrap { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(50px,7vw,110px); align-items:center; }
.chart-copy p:not(.kicker) { max-width:560px; color:var(--muted); font-size:17px; margin:32px 0 9px; }
.chart-copy small { display:block; max-width:560px; color:var(--muted); opacity:.7; }
.donut-shell { width:min(100%,560px); aspect-ratio:1; justify-self:end; position:relative; display:grid; place-items:center; border-radius:50%; isolation:isolate; }
.donut-shell::before { content:""; position:absolute; inset:1.5%; border:1px solid var(--line); border-radius:50%; opacity:.65; }
.donut-shell::after { content:""; position:absolute; inset:15%; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--blue) 12%,transparent),transparent 65%); filter:blur(10px); opacity:.4; z-index:-1; }
.donut-halo { position:absolute; inset:7%; border-radius:50%; background:conic-gradient(from -90deg,var(--blue) var(--donut-angle,0deg),transparent var(--donut-angle,0deg)); opacity:.10; filter:blur(16px); -webkit-mask:radial-gradient(circle,transparent 57%,#000 58% 67%,transparent 68%); mask:radial-gradient(circle,transparent 57%,#000 58% 67%,transparent 68%); }
.donut { width:88%; transform:rotate(-90deg); overflow:visible; position:relative; z-index:2; }
.donut-track, .donut-value { fill:none; stroke-width:14; }
.donut-track { stroke:color-mix(in srgb,var(--fg) 16%,transparent); }
.donut-value { stroke:var(--blue); stroke-linecap:round; stroke-dasharray:641; stroke-dashoffset:641; filter:drop-shadow(0 0 18px color-mix(in srgb,var(--blue) 34%,transparent)); }
.donut-center { position:absolute; z-index:4; display:flex; flex-direction:column; align-items:center; text-align:center; transform:translateY(-2px); }
.donut-figure { display:flex; align-items:flex-start; justify-content:center; font-size:clamp(82px,8.8vw,138px); line-height:.78; letter-spacing:-.075em; font-weight:620; font-variant-numeric:tabular-nums; }
.donut-figure #donutNumber { font-size:1em; line-height:inherit; margin:0; letter-spacing:inherit; opacity:1; text-transform:none; }
.donut-figure b { font-size:.47em; line-height:1; margin-left:7px; margin-top:4px; font-weight:620; }
.donut-label { margin-top:22px; font-size:11px; text-transform:uppercase; letter-spacing:.2em; opacity:.58; }
.donut-caption { position:absolute; right:4%; bottom:12%; display:flex; flex-direction:column; gap:2px; z-index:4; text-align:right; }
.donut-caption span { font-size:8px; text-transform:uppercase; letter-spacing:.18em; opacity:.45; }
.donut-caption strong { font-size:11px; letter-spacing:.08em; font-weight:600; }
.donut-orbit { position:absolute; border:1px solid var(--line); border-radius:50%; z-index:1; animation:orbitSpin 12s linear infinite; }
.donut-orbit i { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 7px color-mix(in srgb,var(--blue) 10%,transparent); }
.orbit-one { inset:1.5%; }.orbit-one i { top:18%; right:5%; }
.orbit-two { inset:10%; border-style:dashed; opacity:.5; animation-duration:20s; animation-direction:reverse; }.orbit-two i { left:6%; bottom:26%; width:5px; height:5px; }
@keyframes orbitSpin { to { transform:rotate(360deg); } }
.donut-shell.is-complete .donut-center { animation:donutBreathe 2.8s ease-in-out 1; }
@keyframes donutBreathe { 0%,100%{ transform:translateY(-2px) scale(1); } 45%{ transform:translateY(-2px) scale(1.035); } }
.reviews { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:90px; }
.review { min-height:390px; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(28px,4vw,54px); display:flex; flex-direction:column; }
.quote { font-family:Georgia,serif; font-size:70px; line-height:.75; color:var(--blue); }
.review > p { font-family:Georgia,serif; font-size:clamp(19px,1.75vw,28px); line-height:1.28; letter-spacing:-.02em; margin:18px 0 55px; }
.review footer { margin-top:auto; display:flex; flex-direction:column; gap:3px; }
.review footer strong { font-size:13px; }
.review footer span { font-size:11px; color:var(--muted); }

.visual-break { min-height:88vh; display:grid; place-items:center; overflow:hidden; }
.visual-word { position:absolute; font-size:clamp(110px,24vw,380px); letter-spacing:-.09em; font-weight:800; opacity:.035; white-space:nowrap; }
.visual-break img { width:min(43vw,510px); opacity:.16; filter:grayscale(1); transform:rotate(-5deg); mix-blend-mode:multiply; }
.visual-line { position:absolute; width:65vw; height:1px; background:linear-gradient(90deg,transparent,var(--blue),transparent); transform:rotate(-12deg); opacity:.5; }

.contact { padding-top:120px; padding-bottom:110px; }
.contact-top { display:flex; flex-direction:column; gap:28px; }
.contact-top .kicker { margin:0; }
.contact-actions { margin-top:80px; border-top:1px solid var(--line); }
.big-contact { display:grid; grid-template-columns:1fr auto; align-items:center; gap:30px; padding:28px 0; border-bottom:1px solid var(--line); transition:padding .25s ease; }
.big-contact:hover { padding-left:12px; padding-right:12px; }
.big-contact span { font-size:11px; text-transform:uppercase; letter-spacing:.16em; opacity:.5; }
.big-contact strong { font-size:clamp(18px,2.4vw,34px); letter-spacing:-.03em; font-weight:540; }
.site-footer { width:min(100%, var(--max)); margin:0 auto; padding:34px var(--pad) 46px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; border-top:1px solid var(--line); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.footer-brand { display:flex; align-items:center; gap:9px; font-weight:700; }
.footer-brand img { width:24px; height:24px; border-radius:50%; }
.site-footer p { opacity:.5; text-align:center; }
.site-footer > a { justify-self:end; }

[data-reveal], .reveal-card { opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.75,.2,1), transform .8s cubic-bezier(.2,.75,.2,1); }
[data-reveal].visible, .reveal-card.visible { opacity:1; transform:none; }


@media (max-width: 1120px) and (min-width: 901px) {
  .reviews { grid-template-columns:1fr 1fr; }
  .review:last-child { grid-column:1 / -1; min-height:300px; }
}

@media (max-width: 900px) {
  .site-header { grid-template-columns:1fr auto; }
  .site-header nav { display:none; }
  .hero { min-height:93svh; }
  .hero-bottom { grid-template-columns:1fr; }
  .arrow-link { justify-self:start; }
  .hero-orbit { display:none; }
  .statement, .section-heading { grid-template-columns:1fr; gap:22px; }
  .statement-copy { grid-column:1; margin-top:0; }
  .services-grid { grid-template-columns:1fr 1fr; }
  .service-card, .service-card.wide { grid-column:span 1; min-height:300px; }
  .service-card.featured { grid-column:span 2; }
  .project-card, .project-card:nth-child(even) { grid-template-columns:1fr; gap:28px; }
  .project-card:nth-child(even) .project-media, .project-card:nth-child(even) .project-info { order:initial; }
  .project-media { min-height:520px; }
  .project-info { min-height:0; }
  .satisfaction-wrap { grid-template-columns:1fr; }
  .donut-shell { justify-self:center; width:min(84vw,520px); }
  .reviews { grid-template-columns:1fr; }
  .site-footer { grid-template-columns:1fr auto; }
  .site-footer p { display:none; }
}

@media (max-width: 620px) {
  :root { --radius:22px; }
  .section { padding-top:90px; padding-bottom:90px; }
  .site-header { padding-top:14px; padding-bottom:14px; }
  .brand span { display:none; }
  .hero h1 { font-size:clamp(74px,24vw,128px); }
  .hero-subtitle { margin-top:22px; font-size:clamp(17px,5.3vw,23px); max-width:20ch; }
  .hero-bottom { margin-top:30px; }
  .services-grid { grid-template-columns:1fr; }
  .service-card, .service-card.wide, .service-card.featured { grid-column:1; min-height:275px; }
  .project-list { gap:70px; }
  .project-media { min-height:400px; border-radius:22px; }
  .eschoyez-logo { width:56%; }
  .review { min-height:0; }
  .review > p { margin-bottom:42px; }
  .big-contact { grid-template-columns:1fr; gap:8px; }
  .big-contact strong { overflow-wrap:anywhere; }
  .site-footer { font-size:9px; }
  .scroll-line { opacity:.13; width:120vw; right:-35vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  [data-reveal], .reveal-card { opacity:1 !important; transform:none !important; }
}

/* --- Services refinement: calmer main grid + focused detail views --- */
.services-title { max-width: 14ch; }
.services-title-shift { margin-left: .65ch; }
.service-card {
  min-height: 340px;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  box-shadow: none;
}
.service-card::before { opacity: .08; background-size: 42px 42px; }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 16px 45px rgba(0,0,0,.06); }
.service-visual { width: 45%; height: 32%; min-height: 92px; opacity: .42; inset: 70px 24px auto auto; }
.service-card:hover .service-visual { transform: translateY(-2px); opacity: .62; }
.service-card h3 { font-size: clamp(26px,2.5vw,38px); margin:auto 0 8px; }
.service-card p { padding-right: 72px; }
.service-more {
  appearance:none; border:0; background:none; color:inherit; padding:0 0 3px; margin-top:16px;
  width:max-content; border-bottom:1px solid var(--line); font-size:11px; letter-spacing:.08em; cursor:pointer;
  position:relative; z-index:4; opacity:.78; transition:opacity .2s ease, transform .2s ease;
}
.service-more:hover { opacity:1; transform:translateX(3px); }
.service-card.featured::after { opacity:.09; }
.service-card .badge { transform:translateX(-50%) scale(.92); }

/* Keep Branding and Merchandising expressive, simplify the others in the main grid. */
.service-card .web-visual { width:38%; height:27%; min-height:82px; padding:10px; }
.service-card .web-visual .browser-lines,
.service-card .web-visual .web-cursor { display:none; }
.service-card .web-visual .browser-hero { width:54%; height:30%; }
.service-card .app-visual { opacity:.34; transform:scale(.86); transform-origin:top right; }
.service-card .content-visual { display:none; }
.service-content::after {
  content:""; position:absolute; right:30px; top:82px; width:112px; height:80px; opacity:.42;
  background:
    radial-gradient(circle at 7px 8px,var(--blue) 0 3px,transparent 3.5px),
    linear-gradient(var(--line),var(--line)) 22px 6px/76px 1px no-repeat,
    linear-gradient(var(--line),var(--line)) 22px 29px/58px 1px no-repeat,
    linear-gradient(var(--line),var(--line)) 22px 52px/82px 1px no-repeat;
}

.service-detail-layer {
  position:fixed; inset:0; z-index:120; background:#f7f5f0; color:#111; overflow:auto;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .35s ease, visibility .35s ease;
}
.service-detail-layer.open { opacity:1; visibility:visible; pointer-events:auto; }
.service-detail {
  min-height:100svh; width:min(100%,var(--max)); margin:0 auto; padding:clamp(28px,4vw,64px) var(--pad) clamp(70px,9vw,130px);
  display:none; grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr); gap:clamp(48px,8vw,120px); align-items:center; position:relative;
}
.service-detail.active { display:grid; }
.service-back {
  position:absolute; top:clamp(28px,4vw,54px); left:var(--pad); border:0; background:none; color:#111; padding:7px 0;
  border-bottom:1px solid rgba(17,17,17,.22); cursor:pointer; font-size:12px;
}
.service-detail-copy { padding-top:76px; }
.service-detail-copy .kicker { color:#111; opacity:.56; }
.service-detail-copy h2 { font-size:clamp(54px,7.5vw,112px); line-height:.92; letter-spacing:-.06em; font-weight:550; max-width:9.5ch; margin:16px 0 28px; }
.service-detail-copy > p { font-size:clamp(17px,1.6vw,23px); color:rgba(17,17,17,.62); max-width:620px; }
.service-detail-copy ul { list-style:none; padding:0; margin:42px 0 44px; border-top:1px solid rgba(17,17,17,.16); max-width:620px; }
.service-detail-copy li { padding:14px 0; border-bottom:1px solid rgba(17,17,17,.16); font-size:14px; }
.detail-quote { display:inline-block; border:1px solid rgba(17,17,17,.22); border-radius:999px; padding:12px 17px; font-size:12px; transition:background .2s, color .2s, transform .2s; }
.detail-quote:hover { background:#111; color:#fff; transform:translateY(-2px); }
.service-detail-visual {
  position:relative !important; inset:auto !important; width:100% !important; height:auto !important; min-height:420px !important;
  opacity:1 !important; color:#111; border-color:rgba(17,17,17,.22); background:rgba(255,255,255,.28); border-radius:28px;
}
.service-detail-visual.branding-visual { align-self:stretch; padding:50px; }
.service-detail-visual.branding-visual::before,
.service-detail-visual.branding-visual::after { background:rgba(17,17,17,.16); }
.service-detail-visual.branding-visual i { border-color:#111; background:#f7f5f0; }
.service-detail-visual.web-visual { padding:32px; border:1px solid rgba(17,17,17,.18); }
.service-detail-visual.web-visual .browser-top { border-bottom-color:rgba(17,17,17,.18); }
.service-detail-visual.web-visual .browser-top i { background:rgba(17,17,17,.42); }
.service-detail-visual.web-visual .browser-hero { background:linear-gradient(90deg,#111,rgba(17,17,17,.26)); }
.service-detail-visual.web-visual .browser-lines i { background:rgba(17,17,17,.14); }
.service-detail-visual.app-visual { border:1px solid rgba(17,17,17,.16); overflow:hidden; }
.service-detail-visual.app-visual svg path { stroke:#63c5ff; }
.content-detail-visual { border:1px solid rgba(17,17,17,.16); display:grid; align-content:center; gap:24px; padding:52px; }
.content-detail-visual span { display:block; height:1px; background:rgba(17,17,17,.18); position:relative; }
.content-detail-visual span::before { content:""; position:absolute; left:0; top:-4px; width:9px; height:9px; border-radius:50%; background:#63c5ff; }
.content-detail-visual span:nth-child(1){ width:86%; }.content-detail-visual span:nth-child(2){ width:68%; }.content-detail-visual span:nth-child(3){ width:94%; }
.content-detail-visual i { position:absolute; border:1px solid rgba(17,17,17,.12); border-radius:50%; }
.content-detail-visual i:nth-of-type(1){ width:150px;height:150px;right:46px;top:48px; }
.content-detail-visual i:nth-of-type(2){ width:94px;height:94px;right:84px;top:86px;border-color:rgba(99,197,255,.6); }
.content-detail-visual i:nth-of-type(3){ width:10px;height:10px;right:124px;top:126px;background:#63c5ff;border:0; }
.service-detail-visual.merch-visual { border:1px solid rgba(17,17,17,.16); display:grid; place-items:center; }
body.service-detail-open { overflow:hidden; }

@media (max-width:900px) {
  .service-detail { grid-template-columns:1fr; padding-top:95px; }
  .service-detail-copy { padding-top:22px; }
  .service-detail-copy h2 { max-width:11ch; }
  .service-detail-visual { min-height:320px !important; }
}

@media (max-width:620px) {
  .service-card { min-height:255px !important; }
  .service-visual { width:38%; opacity:.34; }
  .service-card p { padding-right:0; max-width:78%; }
  .service-detail { padding-top:84px; }
  .service-detail-copy h2 { font-size:clamp(46px,14vw,72px); }
  .service-detail-visual { min-height:260px !important; border-radius:22px; }
}


/* --- 2026-09-18: Web + Branding priority --- */
@media (min-width: 901px) {
  .service-card.priority {
    grid-column: span 3;
    min-height: 390px;
  }
  .service-card.priority h3 {
    font-size: clamp(31px,3.2vw,49px);
  }
  .service-card.priority .service-visual {
    width: 51%;
    height: 38%;
    opacity: .58;
  }
}
.service-branding.priority {
  border-color: color-mix(in srgb, var(--fg) 31%, var(--line));
}
.service-branding.priority::after {
  content:"";
  position:absolute;
  width:160px;
  height:160px;
  border-radius:50%;
  right:-48px;
  top:-48px;
  background:var(--fg);
  filter:blur(86px);
  opacity:.055;
  z-index:-1;
}

/* --- Compact process section --- */
.process {
  padding-top: clamp(72px,8vw,112px);
  padding-bottom: clamp(86px,10vw,140px);
}
.process-heading { margin-bottom: clamp(42px,6vw,72px); }
.process-heading h2 { max-width: 9ch; }
.process-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);
}
.process-step {
  min-height:190px;
  padding:22px 24px 24px 0;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
}
.process-step + .process-step { padding-left:24px; }
.process-step:last-child { border-right:0; padding-right:0; }
.process-step > span {
  font-size:10px;
  letter-spacing:.18em;
  opacity:.5;
}
.process-step h3 {
  margin:auto 0 8px;
  font-size:clamp(22px,2.2vw,32px);
  line-height:1;
  letter-spacing:-.04em;
  font-weight:560;
}
.process-step p {
  margin:0;
  max-width:250px;
  color:var(--muted);
  font-size:13px;
}

@media (max-width:900px) {
  .service-card.priority { grid-column:span 1; }
  .service-card.priority.featured { grid-column:span 1; }
  .process-grid { grid-template-columns:1fr 1fr; }
  .process-step { border-bottom:1px solid var(--line); }
  .process-step:nth-child(2) { border-right:0; padding-right:0; }
  .process-step:nth-child(3) { padding-left:0; }
  .process-step:nth-child(3), .process-step:nth-child(4) { border-bottom:0; }
}
@media (max-width:620px) {
  .service-card.priority,
  .service-card.priority.featured { grid-column:1; }
  .process-grid { grid-template-columns:1fr; }
  .process-step,
  .process-step + .process-step {
    min-height:150px;
    padding:20px 0;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .process-step:last-child { border-bottom:0; }
  .process-step h3 { margin-top:42px; }
}

/* --- Language selection / bilingual experience --- */
body.language-pending { overflow: hidden; }

.language-gate {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 78% 18%, rgba(99,197,255,.14), transparent 28%),
    radial-gradient(circle at 18% 82%, rgba(99,197,255,.07), transparent 26%),
    #050505;
  color: #f6f2ea;
  opacity: 1;
  visibility: visible;
  transition: opacity .38s cubic-bezier(.2,.75,.2,1), visibility .38s ease;
}
.language-gate[hidden] { display: none !important; }
.language-gate.is-closing { opacity: 0; visibility: hidden; }
.language-gate::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .17;
  background-image:
    linear-gradient(rgba(246,242,234,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246,242,234,.10) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom right, rgba(0,0,0,.9), transparent 74%);
  pointer-events: none;
}
.language-gate-card {
  width: min(100%, 720px);
  position: relative;
  border: 1px solid rgba(246,242,234,.18);
  border-radius: 30px;
  padding: clamp(28px, 5vw, 58px);
  background: rgba(10,10,10,.76);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 100px rgba(0,0,0,.28);
}
.language-gate-brand { display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.19em; font-weight:700; }
.language-gate-brand img { width:29px; height:29px; object-fit:cover; border-radius:50%; }
.language-gate-kicker { margin:70px 0 18px; font-size:10px; font-weight:700; letter-spacing:.2em; opacity:.55; }
.language-gate h2 { margin:0; font-size:clamp(43px,7vw,82px); line-height:.94; letter-spacing:-.055em; font-weight:540; }
.language-gate h2 em { font-family:Georgia,"Times New Roman",serif; font-weight:400; color:#63c5ff; }
.language-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:52px; }
.language-choice {
  appearance:none;
  border:1px solid rgba(246,242,234,.20);
  border-radius:18px;
  background:transparent;
  color:inherit;
  min-height:84px;
  padding:20px 22px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:left;
  transition:transform .22s ease, background .22s ease, border-color .22s ease;
}
.language-choice span { font-size:clamp(18px,2vw,24px); letter-spacing:-.025em; }
.language-choice b { font-size:10px; letter-spacing:.18em; font-weight:700; opacity:.55; }
.language-choice:hover, .language-choice:focus-visible {
  transform:translateY(-3px);
  background:rgba(99,197,255,.09);
  border-color:rgba(99,197,255,.62);
  outline:none;
}

.header-actions { justify-self:end; display:flex; align-items:center; gap:12px; }
.language-switch {
  display:flex;
  align-items:center;
  gap:4px;
  border:1px solid var(--line);
  border-radius:100px;
  padding:4px 7px;
  font-size:9px;
  letter-spacing:.10em;
  background:color-mix(in srgb,var(--bg) 74%,transparent);
}
.language-switch button {
  appearance:none;
  border:0;
  background:none;
  color:inherit;
  padding:3px 4px;
  cursor:pointer;
  opacity:.42;
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  transition:opacity .18s ease, color .18s ease;
}
.language-switch button:hover { opacity:.8; }
.language-switch button.active { opacity:1; color:var(--blue); }
.language-switch > span { opacity:.26; }

@media (max-width: 620px) {
  .language-gate { padding:14px; }
  .language-gate-card { border-radius:24px; padding:27px 22px; }
  .language-gate-kicker { margin-top:50px; }
  .language-options { grid-template-columns:1fr; margin-top:38px; }
  .language-choice { min-height:68px; }
  .header-actions { gap:7px; }
  .language-switch { padding:4px 5px; }
  .header-cta { padding:8px 11px; }
}

/* Inés Pieres project */
.ines-media {
  background:linear-gradient(145deg,#f5f2ec,#e8edf0);
  color:#111;
}
.ines-browser {
  width:min(78%,720px);
  aspect-ratio:1.42;
  border:1px solid rgba(17,17,17,.18);
  border-radius:18px;
  background:#fff;
  box-shadow:0 28px 80px rgba(0,0,0,.10);
  overflow:hidden;
  transform:rotate(-1.5deg);
  transition:transform .45s cubic-bezier(.2,.75,.2,1), box-shadow .45s ease;
}
.project-ines:hover .ines-browser {
  transform:rotate(0deg) translateY(-5px);
  box-shadow:0 34px 90px rgba(0,0,0,.14);
}
.ines-browser-bar {
  height:42px; display:flex; align-items:center; gap:7px; padding:0 14px;
  border-bottom:1px solid rgba(17,17,17,.10); color:rgba(17,17,17,.42);
  font-size:9px; letter-spacing:.04em;
}
.ines-browser-bar i { width:7px; height:7px; border-radius:50%; background:rgba(17,17,17,.18); flex:0 0 auto; }
.ines-browser-bar span { margin-left:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ines-browser-body {
  height:calc(100% - 42px); padding:clamp(24px,4vw,58px); display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  background:radial-gradient(circle at 80% 25%,rgba(99,197,255,.14),transparent 34%),#fbfaf7;
}
.ines-browser-kicker { font-size:9px; letter-spacing:.22em; opacity:.42; margin-bottom:16px; }
.ines-browser-body strong { font-size:clamp(44px,7vw,92px); line-height:.78; letter-spacing:-.065em; font-weight:590; }
.ines-browser-line { margin-top:28px; width:56%; height:1px; background:rgba(17,17,17,.28); }
.ines-browser-line.short { margin-top:9px; width:34%; opacity:.6; }
@media (max-width:620px) {
  .ines-browser { width:84%; border-radius:14px; }
  .ines-browser-bar { height:34px; padding:0 10px; }
  .ines-browser-body { height:calc(100% - 34px); padding:26px; }
}


/* =========================================================
   OSTRA AI assistant
   ========================================================= */
.sr-only {
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
.ai-assistant { position:fixed; right:22px; bottom:22px; z-index:180; color:#111; font-family:inherit; }
.ai-launcher {
  border:1px solid rgba(255,255,255,.18); background:#0b0b0b; color:#f6f2ea; cursor:pointer;
  height:48px; padding:0 17px 0 14px; border-radius:999px; display:flex; align-items:center; gap:9px;
  font:600 12px/1 inherit; letter-spacing:-.01em; box-shadow:0 14px 42px rgba(0,0,0,.24);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.ai-launcher:hover { transform:translateY(-2px); border-color:rgba(99,197,255,.55); box-shadow:0 18px 48px rgba(0,0,0,.30); }
.ai-launcher-spark { color:#63c5ff; font-size:15px; animation:aiSpark 3.4s ease-in-out infinite; }
@keyframes aiSpark { 0%,100%{transform:rotate(0) scale(1);opacity:.8} 50%{transform:rotate(14deg) scale(1.14);opacity:1} }
.ai-panel {
  position:absolute; right:0; bottom:60px; width:min(390px,calc(100vw - 28px)); height:min(610px,calc(100vh - 105px));
  display:flex; flex-direction:column; overflow:hidden; border-radius:22px; border:1px solid rgba(20,20,20,.13);
  background:rgba(250,249,246,.97); box-shadow:0 30px 90px rgba(0,0,0,.25); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  opacity:0; transform:translateY(12px) scale(.985); visibility:hidden; pointer-events:none;
  transform-origin:bottom right; transition:opacity .22s ease, transform .22s cubic-bezier(.2,.75,.2,1), visibility .22s ease;
}
.ai-panel.is-open { opacity:1; transform:none; visibility:visible; pointer-events:auto; }
.ai-panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:19px 19px 16px; border-bottom:1px solid rgba(17,17,17,.10); }
.ai-panel-head > div { display:grid; gap:6px; }
.ai-status { display:flex; align-items:center; gap:7px; text-transform:uppercase; font-size:9px; font-weight:700; letter-spacing:.16em; color:rgba(17,17,17,.48); }
.ai-status i { width:6px; height:6px; border-radius:50%; background:#63c5ff; box-shadow:0 0 0 4px rgba(99,197,255,.12); }
.ai-panel-head strong { font-size:18px; line-height:1.05; letter-spacing:-.035em; font-weight:600; }
.ai-close { appearance:none; border:0; background:transparent; color:#111; font-size:25px; line-height:1; cursor:pointer; padding:0 2px; opacity:.48; }
.ai-close:hover { opacity:1; }
.ai-messages { flex:1; overflow:auto; padding:18px; display:flex; flex-direction:column; gap:11px; scroll-behavior:smooth; }
.ai-message { max-width:87%; padding:11px 13px; border-radius:15px; font-size:13px; line-height:1.48; white-space:pre-wrap; overflow-wrap:anywhere; }
.ai-message.assistant { align-self:flex-start; background:#fff; border:1px solid rgba(17,17,17,.09); color:#222; border-bottom-left-radius:5px; }
.ai-message.user { align-self:flex-end; background:#111; color:#f7f4ed; border-bottom-right-radius:5px; }
.ai-message.error { color:#8d2929; background:#fff4f2; border-color:rgba(141,41,41,.14); }
.ai-typing { display:inline-flex; gap:4px; align-items:center; min-height:18px; }
.ai-typing i { width:5px;height:5px;border-radius:50%;background:#777;animation:aiTyping 1s infinite ease-in-out; }
.ai-typing i:nth-child(2){animation-delay:.13s}.ai-typing i:nth-child(3){animation-delay:.26s}
@keyframes aiTyping { 0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-3px);opacity:1} }
.ai-quick-actions { display:flex; gap:7px; overflow-x:auto; padding:0 18px 13px; scrollbar-width:none; }
.ai-quick-actions::-webkit-scrollbar { display:none; }
.ai-quick {
  flex:0 0 auto; border:1px solid rgba(17,17,17,.12); background:transparent; color:#222; border-radius:999px;
  padding:8px 10px; font:600 10px/1 inherit; cursor:pointer; transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.ai-quick:hover { background:rgba(99,197,255,.10); border-color:rgba(99,197,255,.45); transform:translateY(-1px); }
.ai-form { margin:0 13px 10px; border:1px solid rgba(17,17,17,.13); border-radius:16px; background:#fff; display:flex; align-items:flex-end; gap:8px; padding:8px 8px 8px 12px; }
.ai-form:focus-within { border-color:rgba(99,197,255,.7); box-shadow:0 0 0 3px rgba(99,197,255,.10); }
.ai-form textarea { flex:1; min-height:27px; max-height:100px; resize:none; border:0; outline:0; background:transparent; color:#111; font:500 12px/1.45 inherit; padding:5px 0; }
.ai-form textarea::placeholder { color:rgba(17,17,17,.38); }
.ai-send { width:32px;height:32px;flex:0 0 32px;border-radius:50%;border:0;background:#111;color:#fff;cursor:pointer;font-size:15px; transition:transform .18s ease, opacity .18s ease; }
.ai-send:hover { transform:rotate(6deg) scale(1.04); }
.ai-send:disabled { opacity:.35; cursor:default; transform:none; }
.ai-contact-row { padding:0 18px 14px; display:flex; align-items:center; gap:7px; color:rgba(17,17,17,.48); font-size:9px; }
.ai-contact-row a { color:inherit; text-decoration:none; font-weight:650; }
.ai-contact-row a:hover { color:#111; }
.ai-note { margin-left:auto; }
@media (max-width:620px) {
  .ai-assistant { right:12px; bottom:12px; }
  .ai-launcher { height:45px; padding:0 14px; }
  .ai-panel { position:fixed; inset:10px 10px 66px; width:auto; height:auto; border-radius:20px; transform-origin:bottom center; }
  .ai-panel-head { padding:17px; }
  .ai-messages { padding:16px; }
  .ai-quick-actions { padding-left:16px; padding-right:16px; }
  .ai-note { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .ai-launcher-spark,.ai-typing i { animation:none!important; }
  .ai-panel,.ai-launcher,.ai-quick,.ai-send { transition:none!important; }
}


/* --- 2026-09-25: OSTRA Scan service funnel --- */
.service-scan {
  grid-column: 1 / -1;
  min-height: 310px;
  border-color: color-mix(in srgb, var(--blue) 40%, var(--line));
  background:
    radial-gradient(circle at 82% 28%, color-mix(in srgb,var(--blue) 13%,transparent), transparent 31%),
    color-mix(in srgb, var(--bg) 78%, transparent);
}
.service-scan::after {
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);
  opacity:.42;
}
.service-scan h3 {
  font-size:clamp(34px,4.5vw,66px);
  max-width:8ch;
}
.service-scan > p {
  max-width:510px;
  padding-right:0;
}
.scan-service-badge {
  position:absolute;
  top:26px;
  right:28px;
  z-index:5;
  padding:7px 11px;
  border:1px solid color-mix(in srgb,var(--blue) 50%,var(--line));
  border-radius:999px;
  background:color-mix(in srgb,var(--blue) 10%,var(--bg));
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.service-scan-link {
  width:max-content;
  margin-top:18px;
  padding:0 0 4px;
  border-bottom:1px solid color-mix(in srgb,var(--blue) 72%,var(--line));
  position:relative;
  z-index:6;
  font-size:11px;
  letter-spacing:.08em;
  opacity:.86;
  transition:opacity .2s ease, transform .2s ease, border-color .2s ease;
}
.service-scan-link:hover {
  opacity:1;
  transform:translateX(4px);
  border-color:var(--blue);
}
.service-scan .scan-visual {
  width:250px;
  height:210px;
  min-height:0;
  inset:48px 8% auto auto;
  opacity:.8;
  transform:none;
}
.service-scan:hover .scan-visual {
  transform:translateY(-4px) scale(1.015);
  opacity:1;
}
.scan-ring {
  position:absolute;
  border:1px solid color-mix(in srgb,var(--fg) 22%,transparent);
  border-radius:50%;
  inset:0;
}
.scan-ring-b { inset:17%; border-color:color-mix(in srgb,var(--blue) 52%,var(--line)); }
.scan-ring-c { inset:35%; border-color:color-mix(in srgb,var(--fg) 18%,transparent); }
.scan-core {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:9px;
  letter-spacing:.2em;
  opacity:.52;
}
.scan-pulse {
  position:absolute;
  width:8px;
  height:8px;
  left:50%;
  top:-4px;
  transform:translateX(-50%);
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 7px color-mix(in srgb,var(--blue) 12%,transparent),0 0 26px color-mix(in srgb,var(--blue) 55%,transparent);
  animation:scanPulse 3.4s ease-in-out infinite;
}
@keyframes scanPulse {
  0%,100% { transform:translate(-50%,0) scale(1); opacity:.7; }
  50% { transform:translate(-50%,12px) scale(1.12); opacity:1; }
}
@media (max-width: 900px) {
  .service-scan { grid-column:1 / -1; min-height:360px; }
  .service-scan .scan-visual { width:180px; height:150px; right:7%; top:64px; }
  .service-scan h3 { max-width:none; }
}
@media (max-width: 600px) {
  .service-scan { min-height:390px; }
  .scan-service-badge { top:22px; right:22px; }
  .service-scan .scan-visual { width:145px; height:122px; right:22px; top:76px; opacity:.62; }
  .service-scan > p { max-width:80%; }
}


/* =========================================================
   OSTRA Gallery layer — globe / social proof / meteors
   ========================================================= */
.statement-gallery {
  grid-template-columns:minmax(150px,.55fr) minmax(420px,1.28fr) minmax(280px,.82fr);
  align-items:center;
  gap:clamp(34px,5vw,82px);
}
.statement-gallery .kicker { align-self:start; }
.statement-copy-block { min-width:0; }
.statement-gallery .statement-copy { grid-column:auto; margin-top:32px; }
.statement-globe {
  width:min(100%,420px);
  aspect-ratio:1;
  justify-self:end;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:22px;
  border:1px solid var(--line);
  border-radius:50%;
  overflow:visible;
  background:radial-gradient(circle at 43% 39%, color-mix(in srgb,var(--blue) 10%,transparent), transparent 56%);
}
.globe-frame { position:relative; width:100%; aspect-ratio:1; display:grid; place-items:center; }
#ostraGlobe { width:100%; height:100%; display:block; filter:drop-shadow(0 20px 60px rgba(0,0,0,.08)); }
.globe-axis { position:absolute; left:4%; right:4%; top:50%; height:1px; background:linear-gradient(90deg,transparent,var(--blue),transparent); opacity:.34; transform-origin:center; }
.globe-axis-a { transform:rotate(22deg); }
.globe-axis-b { transform:rotate(-18deg); opacity:.16; }
.globe-pulse { position:absolute; width:9px; height:9px; border-radius:50%; background:var(--blue); top:23%; right:17%; box-shadow:0 0 0 8px color-mix(in srgb,var(--blue) 10%,transparent),0 0 24px color-mix(in srgb,var(--blue) 62%,transparent); animation:globePulse 2.8s ease-in-out infinite; }
.globe-meta { position:absolute; left:10%; right:10%; bottom:-28px; display:flex; align-items:center; gap:10px; font-size:8px; letter-spacing:.18em; opacity:.55; white-space:nowrap; }
.globe-meta i { height:1px; flex:1; background:var(--line); }
@keyframes globePulse { 50% { transform:scale(1.28); opacity:.62; } }

/* Reviews styled as editorial social posts, without imitating any platform branding. */
.reviews-social { align-items:start; }
.review-social {
  min-height:0;
  padding:18px;
  border-radius:22px;
  background:#fff;
  color:#151515;
  border:1px solid rgba(15,15,15,.13);
  box-shadow:0 22px 60px rgba(0,0,0,.06);
  overflow:hidden;
}
.review-social::before { display:none; }
.review-social-head { display:grid; grid-template-columns:46px 1fr 28px; gap:12px; align-items:center; }
.review-avatar { width:46px; height:46px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:#f2f0eb; border:1px solid rgba(15,15,15,.08); }
.review-avatar img { width:100%; height:100%; object-fit:cover; }
.review-avatar-eschoyez img { object-position:50% 64%; transform:scale(1.35); }
.review-avatar-wynns { background:#050505; }
.review-avatar-wynns img { object-fit:contain; padding:8px 4px; }
.review-avatar-movimiento img { object-fit:cover; transform:scale(1.24); }
.review-author { min-width:0; display:flex; flex-direction:column; gap:2px; }
.review-author-line { display:flex; align-items:center; gap:6px; min-width:0; }
.review-author-line strong { font-size:13px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.review-check { width:15px; height:15px; border-radius:50%; display:grid; place-items:center; background:var(--blue); color:#07111a; font-size:10px; font-weight:800; flex:none; }
.review-author>span { font-size:10px; color:rgba(15,15,15,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.review-ostra-mark { width:26px; height:26px; border-radius:50%; object-fit:cover; opacity:.75; }
.review-social>p { font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; font-size:clamp(15px,1.15vw,18px); line-height:1.55; letter-spacing:-.012em; margin:24px 2px 20px; color:#171717; }
.review-media { height:230px; border-radius:16px; overflow:hidden; border:1px solid rgba(15,15,15,.1); display:grid; place-items:center; position:relative; }
.review-media::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); border-radius:inherit; }
.review-media img { display:block; }
.review-media-eschoyez { background:#f4efe6; }
.review-media-eschoyez img { width:80%; height:160%; object-fit:contain; transform:translateY(17%); }
.review-media-wynns { background:#050505; }
.review-media-wynns img { width:84%; height:auto; object-fit:contain; }
.review-media-movimiento { background:#f7f7f4; }
.review-media-movimiento img { width:56%; height:118%; object-fit:cover; object-position:50% 36%; transform:translateY(4%); }
.review-meta { margin-top:13px; display:flex; align-items:center; gap:10px; color:rgba(15,15,15,.42); font-size:8px; letter-spacing:.18em; }
.review-meta i { flex:1; height:1px; background:rgba(15,15,15,.12); }

/* Contact becomes the final dark exhibition piece; meteors remain subtle. */
.contact-meteor {
  --fg:#f6f2ea;
  --muted:rgba(246,242,234,.62);
  --line:rgba(246,242,234,.18);
  color:var(--fg);
  background:#050505;
  border-radius:36px;
  overflow:hidden;
  isolation:isolate;
  margin-bottom:clamp(34px,5vw,72px);
  box-shadow:0 32px 90px rgba(0,0,0,.13);
}
.contact-meteor::before {
  content:"";
  position:absolute;
  inset:-20%;
  z-index:-2;
  background:
    radial-gradient(circle at 20% 30%, rgba(99,197,255,.10), transparent 28%),
    radial-gradient(circle at 80% 75%, rgba(99,197,255,.07), transparent 25%),
    linear-gradient(180deg,#101010,#050505 55%);
}
.contact-meteor .contact-top,.contact-meteor .contact-actions { position:relative; z-index:3; }
.contact-meteor .kicker { color:var(--blue); }
.contact-meteor .big-contact { border-color:var(--line); }
.contact-meteor .big-contact:hover { background:rgba(255,255,255,.035); }
.meteor-field { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.meteor {
  position:absolute;
  top:-18%;
  width:1px;
  height:clamp(70px,8vw,125px);
  background:linear-gradient(to bottom,transparent,rgba(246,242,234,.08) 22%,rgba(99,197,255,.78) 100%);
  transform:rotate(42deg);
  transform-origin:top center;
  opacity:0;
  filter:drop-shadow(0 0 7px rgba(99,197,255,.28));
  animation:ostraMeteor var(--meteor-duration,6s) linear var(--meteor-delay,0s) infinite;
}
.meteor::after { content:""; position:absolute; bottom:-2px; left:50%; width:4px; height:4px; transform:translateX(-50%); border-radius:50%; background:#dff5ff; box-shadow:0 0 12px rgba(99,197,255,.85); }
@keyframes ostraMeteor {
  0%,12% { opacity:0; transform:translate3d(0,-120px,0) rotate(42deg); }
  16% { opacity:.72; }
  52% { opacity:.45; }
  66%,100% { opacity:0; transform:translate3d(55vw,82vh,0) rotate(42deg); }
}

@media (max-width:1100px) {
  .statement-gallery { grid-template-columns:1fr 1.65fr; }
  .statement-gallery .kicker { grid-column:1; }
  .statement-copy-block { grid-column:2; }
  .statement-globe { grid-column:2; justify-self:start; width:min(72vw,380px); margin-top:26px; }
}
@media (max-width:760px) {
  .statement-gallery { grid-template-columns:1fr; gap:24px; }
  .statement-gallery .kicker,.statement-copy-block,.statement-globe { grid-column:1; }
  .statement-globe { justify-self:center; width:min(82vw,360px); margin-top:26px; }
  .globe-meta { bottom:-22px; font-size:7px; }
  .review-media { height:210px; }
  .contact-meteor { border-radius:26px; width:calc(100% - 24px); padding-left:22px; padding-right:22px; }
}
@media (prefers-reduced-motion:reduce) {
  .globe-pulse,.meteor { animation:none !important; }
  .meteor { display:none; }
}

/* =========================================================
   OSTRA Gallery v2 — dot globe + refined social-proof media
   ========================================================= */
.statement-globe {
  width:min(100%,470px);
  aspect-ratio:1.24 / 1;
  justify-self:end;
  position:relative;
  display:flex;
  flex-direction:column;
  padding:0;
  border:1px solid rgba(15,15,15,.11);
  border-radius:26px;
  overflow:hidden;
  background:linear-gradient(180deg,#fbfbfa 0%,#f6f5f1 68%,#eeede8 100%);
  box-shadow:0 28px 78px rgba(0,0,0,.07);
}
.globe-label {
  position:absolute;
  z-index:4;
  left:22px;
  right:22px;
  top:18px;
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(15,15,15,.5);
  font-size:8px;
  letter-spacing:.17em;
  white-space:nowrap;
}
.globe-label i { height:1px; flex:1; background:rgba(15,15,15,.12); }
.globe-label b { font-weight:500; color:rgba(15,15,15,.34); }
.globe-frame { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; display:block; }
#ostraGlobe { width:100%; height:100%; display:block; filter:none; }
.globe-bottom-fade {
  position:absolute;
  inset:auto 0 0;
  height:24%;
  background:linear-gradient(180deg,rgba(246,245,241,0),rgba(246,245,241,.42));
  pointer-events:none;
  z-index:2;
}
.globe-pulse { z-index:3; width:7px; height:7px; box-shadow:0 0 0 7px rgba(99,197,255,.09),0 0 22px rgba(99,197,255,.5); }
.globe-pulse-a { top:49%; right:22%; }
.globe-pulse-b { top:65%; right:43%; width:5px; height:5px; opacity:.66; animation-delay:1.2s; }

.review-avatar { position:relative; isolation:isolate; background:#e9e7e1; color:#12395a; font-size:10px; font-weight:700; letter-spacing:.06em; }
.review-avatar > span { position:absolute; inset:0; display:grid; place-items:center; z-index:0; }
.review-avatar > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.review-media { height:230px; }
.review-media-symbol { background:#f6f2ea; }
.review-media-symbol img { width:100%; height:100%; object-fit:cover; }
.review-media-wynns-site {
  background:linear-gradient(150deg,#f6f2ea 0%,#ecebe7 100%);
  padding:18px;
}
.review-media-wynns-site img {
  width:92%;
  max-height:92%;
  height:auto;
  object-fit:contain;
  border-radius:11px;
  box-shadow:0 14px 36px rgba(16,10,38,.16);
}

@media (max-width:1040px) {
  .statement-globe { width:min(76vw,430px); aspect-ratio:1.2 / 1; }
}
@media (max-width:700px) {
  .statement-globe { width:min(92vw,410px); aspect-ratio:1.14 / 1; border-radius:22px; }
  .globe-label { left:18px; right:18px; top:15px; }
  .review-media { height:205px; }
  .review-media-wynns-site { padding:12px; }
}

/* =========================================================
   OSTRA Gallery v3 — WebGL dotted globe
   Closer to the MagicUI-style reference: quiet, dimensional,
   cropped low in the frame, with the sphere doing the work.
   ========================================================= */
.statement-globe {
  width:min(100%,510px);
  aspect-ratio:1.32 / 1;
  justify-self:end;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(15,15,15,.09);
  border-radius:28px;
  background:
    radial-gradient(circle at 50% 118%, rgba(99,197,255,.10), transparent 38%),
    linear-gradient(180deg,#fcfcfb 0%,#f8f7f4 68%,#efeee9 100%);
  box-shadow:0 28px 78px rgba(0,0,0,.055);
}
.statement-globe::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
  background:radial-gradient(circle at 50% 120%,rgba(0,0,0,.11),rgba(255,255,255,0) 48%);
  mix-blend-mode:multiply;
  opacity:.32;
}
.globe-label {
  position:absolute;
  z-index:6;
  left:24px;
  right:24px;
  top:19px;
  display:flex;
  align-items:center;
  gap:11px;
  color:rgba(15,15,15,.47);
  font-size:8px;
  letter-spacing:.18em;
  white-space:nowrap;
}
.globe-label i { height:1px; flex:1; background:rgba(15,15,15,.11); }
.globe-label b { font-weight:500; color:rgba(15,15,15,.27); }
.globe-frame {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  display:block;
}
#ostraGlobe {
  position:absolute;
  z-index:2;
  width:105%;
  height:auto;
  aspect-ratio:1;
  left:50%;
  top:17%;
  transform:translateX(-50%);
  display:block;
  opacity:0;
  transition:opacity .7s ease;
  filter:drop-shadow(0 24px 34px rgba(18,24,28,.12));
}
.globe-horizon {
  position:absolute;
  z-index:1;
  width:86%;
  height:15%;
  left:7%;
  bottom:2%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(16,24,30,.15),rgba(16,24,30,0) 67%);
  filter:blur(15px);
  opacity:.52;
  pointer-events:none;
}
.globe-bottom-fade {
  position:absolute;
  z-index:3;
  inset:auto 0 0;
  height:27%;
  background:linear-gradient(180deg,rgba(244,243,239,0),rgba(244,243,239,.28) 46%,rgba(244,243,239,.78));
  pointer-events:none;
}

@media (max-width:1040px) {
  .statement-globe { width:min(78vw,470px); aspect-ratio:1.25 / 1; }
  #ostraGlobe { width:110%; top:19%; }
}
@media (max-width:700px) {
  .statement-globe { width:min(94vw,430px); aspect-ratio:1.16 / 1; border-radius:22px; }
  .globe-label { left:18px; right:18px; top:15px; }
  #ostraGlobe { width:118%; top:20%; }
}


/* =========================================================
   2026-10 — Interactive Web Experiences + Projects Hub
   ========================================================= */

.service-experience {
  border-color: color-mix(in srgb,var(--blue) 52%,var(--line));
  background:
    radial-gradient(circle at 82% 18%, color-mix(in srgb,var(--blue) 14%,transparent), transparent 31%),
    color-mix(in srgb,var(--bg) 78%,transparent);
}
.experience-service-badge {
  position:absolute;
  top:22px;
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  padding:7px 11px;
  border:1px solid color-mix(in srgb,var(--blue) 48%,var(--line));
  border-radius:999px;
  background:color-mix(in srgb,var(--blue) 10%,var(--bg));
  font-size:9px;
  letter-spacing:.13em;
  text-transform:uppercase;
  white-space:nowrap;
}
.service-experience h3 { max-width:9ch; font-size:clamp(29px,3vw,45px); }
.service-experience > p { max-width:340px; }
.experience-visual {
  width:58%;
  height:46%;
  right:2%;
  top:58px;
  perspective:680px;
  overflow:hidden;
  border-radius:16px;
  border:1px solid color-mix(in srgb,var(--blue) 26%,var(--line));
  background:
    linear-gradient(to bottom,color-mix(in srgb,var(--blue) 13%,transparent),transparent 46%),
    color-mix(in srgb,var(--bg) 78%,transparent);
}
.experience-gridline {
  position:absolute;inset:0;
  opacity:.34;
  background:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:27px 27px;
  transform:perspective(500px) rotateX(62deg) scale(1.45);
  transform-origin:50% 85%;
}
.experience-route {
  position:absolute;left:13%;right:9%;top:47%;height:1px;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);
  transform:rotate(-10deg);
  box-shadow:0 0 14px color-mix(in srgb,var(--blue) 32%,transparent);
}
.experience-route i {
  position:absolute;width:7px;height:7px;border-radius:50%;
  background:var(--blue);top:50%;transform:translate(-50%,-50%);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--blue) 12%,transparent);
}
.experience-route i:nth-child(1){left:12%}
.experience-route i:nth-child(2){left:51%}
.experience-route i:nth-child(3){left:88%}
.roof {
  position:absolute;
  width:92px;height:62px;
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--fg) 9%,var(--bg));
  clip-path:polygon(50% 0,100% 45%,84% 100%,16% 100%,0 45%);
  transform-style:preserve-3d;
}
.roof span {
  position:absolute;left:48%;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--blue) 45%,var(--line));
}
.roof-a {left:4%;bottom:8%;transform:rotate(-9deg) scale(.7);opacity:.55;animation:roofDriftA 7s ease-in-out infinite}
.roof-b {left:37%;bottom:16%;transform:rotate(3deg) scale(.95);animation:roofDriftB 6s ease-in-out infinite}
.roof-c {right:3%;bottom:31%;transform:rotate(11deg) scale(.73);opacity:.65;animation:roofDriftC 8s ease-in-out infinite}
.experience-frame {
  position:absolute;font-size:8px;letter-spacing:.14em;opacity:.48;
}
.frame-a{left:9%;top:18%}.frame-b{left:48%;top:12%}.frame-c{right:12%;top:23%}
.experience-scroll {
  position:absolute;right:10px;bottom:8px;
  font-size:7px;letter-spacing:.2em;opacity:.46;
}
@keyframes roofDriftA{50%{transform:translate(9px,-5px) rotate(-5deg) scale(.74)}}
@keyframes roofDriftB{50%{transform:translate(-7px,-8px) rotate(-1deg) scale(1.01)}}
@keyframes roofDriftC{50%{transform:translate(-10px,5px) rotate(7deg) scale(.78)}}

.experience-detail-visual {
  overflow:hidden;
  border:1px solid rgba(17,17,17,.16);
  background:linear-gradient(180deg,#e9f6fd 0 37%,#ece9e1 37% 100%);
  min-height:500px !important;
  perspective:900px;
}
.experience-detail-sky {
  position:absolute;inset:0 0 46%;
  background:
    radial-gradient(circle at 72% 24%,rgba(255,255,255,.85),transparent 18%),
    linear-gradient(180deg,rgba(99,197,255,.16),transparent);
}
.experience-detail-route {
  position:absolute;left:9%;right:7%;top:55%;height:2px;
  background:linear-gradient(90deg,transparent,#63c5ff 12% 88%,transparent);
  transform:rotate(-7deg);
}
.experience-detail-route i {
  position:absolute;top:50%;width:9px;height:9px;border-radius:50%;
  background:#63c5ff;transform:translate(-50%,-50%);
  box-shadow:0 0 0 7px rgba(99,197,255,.15);
}
.experience-detail-route i:nth-child(1){left:8%}
.experience-detail-route i:nth-child(2){left:37%}
.experience-detail-route i:nth-child(3){left:68%}
.experience-detail-route i:nth-child(4){left:94%}
.experience-detail-house {
  position:absolute;width:28%;height:24%;bottom:11%;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(17,17,17,.16);
  transform-style:preserve-3d;
  box-shadow:0 18px 40px rgba(17,17,17,.08);
}
.experience-detail-house .house-roof {
  position:absolute;left:-5%;right:-5%;height:54%;top:-39%;
  background:#313438;
  clip-path:polygon(50% 0,100% 78%,83% 100%,17% 100%,0 78%);
}
.experience-detail-house b {
  position:absolute;right:9px;bottom:8px;
  font-size:9px;letter-spacing:.16em;opacity:.38;
}
.house-one{left:4%;transform:perspective(800px) rotateY(14deg) scale(.78);opacity:.7}
.house-two{left:36%;bottom:7%;transform:scale(1.03);z-index:2}
.house-two .house-roof{background:#111}
.house-three{right:2%;bottom:19%;transform:perspective(800px) rotateY(-18deg) scale(.72);opacity:.75}
.experience-detail-copyline {
  position:absolute;
  padding:7px 10px;border-radius:999px;
  border:1px solid rgba(17,17,17,.16);
  background:rgba(247,245,240,.78);
  backdrop-filter:blur(9px);
  font-size:8px;letter-spacing:.14em;
}
.copy-one{left:5%;top:14%}
.copy-two{left:41%;top:22%}
.copy-three{right:5%;top:11%}

.project-portal { padding-top:clamp(55px,7vw,90px); padding-bottom:clamp(55px,7vw,90px); }
.project-portal-card {
  min-height:clamp(300px,34vw,430px);
  border:1px solid var(--line);
  border-radius:32px;
  padding:clamp(28px,5vw,60px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,.8fr);
  gap:clamp(30px,6vw,90px);
  align-items:center;
  overflow:hidden;
  position:relative;
  background:
    radial-gradient(circle at 86% 26%,color-mix(in srgb,var(--blue) 13%,transparent),transparent 28%),
    color-mix(in srgb,var(--bg) 77%,transparent);
}
.project-portal-card::after {
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);opacity:.3;
}
.project-portal-copy h2 {
  margin:10px 0 18px;
  max-width:8ch;
  font-size:clamp(48px,6vw,88px);
  line-height:.9;
  letter-spacing:-.06em;
  font-weight:560;
}
.project-portal-copy > p:not(.kicker) {
  max-width:520px;color:var(--muted);font-size:15px;line-height:1.55;
}
.project-portal-cta {
  display:inline-flex;gap:10px;align-items:center;
  margin-top:28px;padding-bottom:7px;
  border-bottom:1px solid var(--line);
  font-size:12px;letter-spacing:.06em;
  transition:transform .2s ease,border-color .2s;
}
.project-portal-cta:hover { transform:translateX(4px); border-color:var(--blue); }
.project-portal-stack {
  min-height:260px;position:relative;perspective:1000px;
}
.portal-tile {
  position:absolute;width:64%;aspect-ratio:1.7;
  border-radius:20px;border:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.11);
  transition:transform .45s cubic-bezier(.2,.75,.2,1);
}
.portal-tile img{max-width:72%;max-height:72%;object-fit:contain}
.tile-wynns{left:1%;top:11%;background:#050505;transform:rotate(-8deg) translateZ(-40px)}
.tile-eschoyez{left:21%;top:4%;background:#f4efe6;z-index:2;transform:rotate(2deg)}
.tile-eschoyez img{max-width:82%;max-height:82%;object-fit:contain;filter:contrast(1.02)}
.tile-doble{right:0;top:26%;background:#292929;z-index:3;transform:rotate(8deg) translateZ(28px)}
.project-portal-card:hover .tile-wynns{transform:translate(-7px,-5px) rotate(-11deg)}
.project-portal-card:hover .tile-eschoyez{transform:translateY(-11px) rotate(0)}
.project-portal-card:hover .tile-doble{transform:translate(8px,5px) rotate(11deg)}
.portal-index{position:absolute;right:3%;bottom:-4px;font-size:9px;letter-spacing:.18em;opacity:.48}

.projects-hub-layer {
  --bg:#f7f5f0;
  --fg:#111;
  --muted:rgba(17,17,17,.58);
  --line:rgba(17,17,17,.15);
  position:fixed;inset:0;z-index:110;
  overflow:auto;
  background:#f7f5f0;color:#111;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .34s ease,visibility .34s ease;
}
.projects-hub-layer.open {opacity:1;visibility:visible;pointer-events:auto}
.projects-hub-shell{min-height:100%}
.projects-hub-layer .projects{padding-top:clamp(110px,12vw,160px)}
.projects-hub-close {
  position:fixed;top:24px;left:var(--pad);z-index:4;
  appearance:none;border:0;border-bottom:1px solid rgba(17,17,17,.2);
  background:rgba(247,245,240,.88);backdrop-filter:blur(12px);
  color:#111;padding:8px 0;font-size:11px;cursor:pointer;
}
body.projects-hub-open{overflow:hidden}

@media (max-width:900px){
  .experience-service-badge{left:auto;right:22px;transform:none}
  .service-experience h3{max-width:12ch}
  .project-portal-card{grid-template-columns:1fr}
  .project-portal-stack{min-height:245px}
}
@media (max-width:620px){
  .experience-visual{width:50%;height:35%;top:72px;right:0;opacity:.58}
  .service-experience h3{max-width:10ch}
  .service-experience > p{max-width:82%}
  .project-portal-card{border-radius:24px;padding:26px;min-height:560px}
  .project-portal-copy h2{font-size:clamp(48px,14vw,72px)}
  .project-portal-stack{min-height:220px}
  .portal-tile{width:72%}
  .projects-hub-layer .projects{padding-top:96px}
}


/* =========================================================
   OSTRA — REAL FRAME-BY-FRAME INTERACTIVE EXPERIENCE
   ========================================================= */
.immersive-demo{position:relative;width:100vw;height:250vh;min-height:1850px;margin-left:calc(50% - 50vw);background:#04131d;color:#f6f2ea;z-index:4}
.immersive-demo-sticky{position:sticky;top:0;width:100%;height:100svh;min-height:620px;overflow:hidden;background:#04131d;isolation:isolate}
.experience-canvas{position:absolute;inset:-1.8% 0 0;z-index:1;width:100%;height:103.6%;display:block;background:#04131d;transform:scale(1.025);transform-origin:center top;will-change:filter}
.experience-top-shade{
  position:absolute;
  z-index:7;
  left:0;right:0;top:0;
  height:210px;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(2,7,10,1) 0%,
      rgba(2,7,10,.99) 20%,
      rgba(2,7,10,.94) 38%,
      rgba(2,7,10,.72) 56%,
      rgba(2,7,10,.36) 74%,
      rgba(2,7,10,.10) 89%,
      rgba(2,7,10,0) 100%
    );
}
.experience-vignette{position:absolute;z-index:3;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.06),transparent 24%,transparent 58%,rgba(0,0,0,.5)),radial-gradient(circle at 50% 45%,transparent 38%,rgba(0,0,0,.26) 100%)}
.experience-meta{position:absolute;z-index:8;top:92px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;gap:20px;font-size:8px;line-height:1.4;letter-spacing:.19em;color:rgba(246,242,234,.48);pointer-events:none}
.experience-progress{position:absolute;z-index:8;top:123px;left:var(--pad);width:min(260px,28vw);height:1px;background:rgba(246,242,234,.16)}
.experience-progress i{display:block;width:0%;height:100%;background:#63c5ff;box-shadow:0 0 16px rgba(99,197,255,.55);will-change:width}
.experience-copy{position:absolute;z-index:9;width:min(620px,43vw);opacity:0;transform:translate3d(0,24px,0);transition:opacity .35s ease,transform .55s cubic-bezier(.2,.75,.2,1);pointer-events:none;text-shadow:0 3px 24px rgba(0,0,0,.4)}
.experience-copy.is-active{opacity:1;transform:none}
.experience-copy>span{display:block;margin-bottom:14px;color:#63c5ff;font-size:9px;letter-spacing:.2em;font-weight:700}
.experience-copy h2{margin:0;max-width:10.8ch;font-size:clamp(46px,5.6vw,88px);line-height:.9;letter-spacing:-.06em;font-weight:560;color:#f6f2ea}
.experience-copy p{max-width:490px;margin:20px 0 0;color:rgba(246,242,234,.68);font-size:13px;line-height:1.58}
.experience-copy-a{left:var(--pad);bottom:9vh}
.experience-copy-b{right:var(--pad);bottom:10vh;text-align:right}
.experience-copy-b h2,.experience-copy-b p{margin-left:auto}
.experience-copy-c{left:var(--pad);top:24vh}
.experience-copy-d{left:var(--pad);bottom:10vh}
.experience-scroll-cue{position:absolute;z-index:9;right:var(--pad);bottom:34px;display:flex;align-items:center;gap:10px;color:rgba(246,242,234,.38);font-size:7px;letter-spacing:.16em;transition:opacity .35s ease;pointer-events:none}
.experience-scroll-cue i{width:32px;height:1px;background:rgba(99,197,255,.5)}
.experience-loader{position:absolute;z-index:12;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#04131d;color:rgba(246,242,234,.52);font-size:8px;letter-spacing:.18em;transition:opacity .6s ease,visibility .6s ease}
.experience-loader b{font-size:10px;color:#63c5ff;font-weight:600}
.experience-loader.is-ready{opacity:0;visibility:hidden}
.experience-whiteout{position:absolute;z-index:10;inset:0;opacity:0;background:rgba(248,246,241,1);backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);pointer-events:none;will-change:opacity,backdrop-filter}
.experience-transition-mark{position:absolute;z-index:11;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;color:#121212;pointer-events:none;transform:translateY(10px);will-change:opacity,transform}
.experience-transition-mark strong{font-size:clamp(92px,15vw,220px);line-height:.8;letter-spacing:-.075em;font-weight:560}
.experience-transition-mark span{margin-top:24px;font-size:8px;letter-spacing:.22em;font-weight:700}
.immersive-demo + .process{position:relative;z-index:5;background:#f8f6f1;color:#121212;width:100%;max-width:none;padding-left:max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)));padding-right:max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)))}
.immersive-demo + .process .kicker{color:rgba(18,18,18,.58)}
.immersive-demo + .process .process-step{border-color:rgba(18,18,18,.15)}
.immersive-demo + .process .process-step p{color:rgba(18,18,18,.58)}
@media(max-width:820px){
  .immersive-demo{height:225vh;min-height:1600px}
  .experience-meta{top:82px;left:20px;right:20px}.experience-meta span:first-child{max-width:56vw}
  .experience-progress{top:114px;left:20px;width:150px}
  .experience-copy{left:20px!important;right:20px!important;width:auto;bottom:74px!important;top:auto!important;text-align:left!important}
  .experience-copy h2{margin-left:0!important;font-size:clamp(42px,11vw,68px);max-width:10ch}
  .experience-copy p{margin-left:0!important;max-width:430px;font-size:12px}
  .experience-scroll-cue{right:20px;bottom:25px}
  .experience-transition-mark strong{font-size:clamp(80px,24vw,150px)}
}
@media(prefers-reduced-motion:reduce){
  .immersive-demo{height:auto;min-height:0}.immersive-demo-sticky{position:relative;height:100svh}
  .experience-copy:not(.experience-copy-a){display:none}
}

@media(max-width:820px){
  .experience-top-shade{height:230px}
}


/* =========================================================
   OSTRA IMMERSIVE — dedicated experience link
   Replaces the old underwater frame-by-frame demo.
   ========================================================= */
.immersive-portal{
  position:relative;
  color:var(--fg);
  padding-top:70px;
  padding-bottom:90px;
}
.immersive-portal-inner{
  position:relative;
  overflow:hidden;
  min-height:380px;
  border:1px solid var(--line);
  border-radius:32px;
  padding:clamp(26px,4.5vw,64px);
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(250px,.75fr);
  align-items:end;
  gap:42px;
  background:
    radial-gradient(circle at 84% 18%,rgba(99,197,255,.13),transparent 27%),
    radial-gradient(circle at 71% 78%,rgba(255,181,219,.09),transparent 25%),
    color-mix(in srgb,var(--bg) 92%,var(--fg) 8%);
}
.immersive-portal-inner::before{
  content:"";
  position:absolute;
  width:min(42vw,540px);
  aspect-ratio:1;
  right:-7%;
  top:-40%;
  border:1px solid color-mix(in srgb,var(--fg) 22%,transparent);
  border-radius:50%;
  opacity:.42;
}
.immersive-portal-inner::after{
  content:"";
  position:absolute;
  width:min(29vw,360px);
  aspect-ratio:1;
  right:9%;
  top:-12%;
  border:1px solid color-mix(in srgb,var(--fg) 13%,transparent);
  border-radius:50%;
  opacity:.48;
}
.immersive-portal-copy{
  position:relative;
  z-index:2;
}
.immersive-portal-copy h2{
  margin:14px 0 0;
  max-width:9.4ch;
  font-size:clamp(48px,6.2vw,94px);
  line-height:.88;
  letter-spacing:-.065em;
  font-weight:560;
}
.immersive-portal-copy h2 em{
  font-style:normal;
  color:#63c5ff;
}
.immersive-portal-copy>p:last-child{
  max-width:520px;
  margin:22px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
.immersive-portal-link{
  position:relative;
  z-index:3;
  justify-self:end;
  width:min(100%,340px);
  min-height:96px;
  padding:0 24px;
  border:1px solid var(--line);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  font-size:11px;
  line-height:1.3;
  letter-spacing:-.01em;
  transition:.35s cubic-bezier(.2,.75,.2,1);
  transition-property:transform,background,color,border-color;
}
.immersive-portal-link b{
  font-size:22px;
  font-weight:400;
}
.immersive-portal-link:hover{
  transform:translateY(-5px);
  background:var(--fg);
  color:var(--bg);
  border-color:var(--fg);
}

.experience-detail-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:28px;
}
.experience-detail-actions .detail-quote{
  margin-top:0;
}
.detail-demo-link{
  display:inline-flex;
  align-items:center;
  min-height:45px;
  padding:0 16px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:10px;
  transition:.28s ease;
}
.detail-demo-link:hover{
  background:var(--fg);
  color:var(--bg);
  border-color:var(--fg);
}

@media(max-width:720px){
  .immersive-portal{
    padding-top:50px;
    padding-bottom:70px;
  }
  .immersive-portal-inner{
    min-height:500px;
    grid-template-columns:1fr;
    align-content:space-between;
    gap:42px;
    border-radius:25px;
    padding:24px;
  }
  .immersive-portal-copy h2{
    font-size:clamp(45px,13vw,66px);
  }
  .immersive-portal-copy>p:last-child{
    max-width:31ch;
  }
  .immersive-portal-link{
    justify-self:stretch;
    width:100%;
    min-height:78px;
  }
  .experience-detail-actions{
    align-items:stretch;
    flex-direction:column;
  }
  .experience-detail-actions a{
    justify-content:center;
    width:100%;
  }
}


/* =========================================================
   2026-10-05 — Visual cleanup
   ========================================================= */

/* Interactive Web Experiences — clean layered media system */
.experience-visual{
  width:58%;
  height:47%;
  right:2%;
  top:58px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--blue) 26%,var(--line));
  background:
    radial-gradient(circle at 78% 18%,color-mix(in srgb,var(--blue) 22%,transparent),transparent 32%),
    linear-gradient(145deg,color-mix(in srgb,var(--fg) 5%,var(--bg)),color-mix(in srgb,var(--bg) 96%,transparent));
  perspective:900px;
}
.experience-ambient{
  position:absolute;
  width:160px;height:160px;
  right:-25px;top:-54px;
  border-radius:50%;
  background:var(--blue);
  opacity:.10;
  filter:blur(28px);
}
.experience-pane{
  position:absolute;
  width:39%;height:58%;
  border:1px solid color-mix(in srgb,var(--fg) 20%,transparent);
  border-radius:10px;
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--fg) 8%,var(--bg)),color-mix(in srgb,var(--bg) 95%,transparent));
  box-shadow:0 16px 35px rgba(0,0,0,.08);
  transform-style:preserve-3d;
  overflow:hidden;
}
.experience-pane::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 40%,color-mix(in srgb,var(--blue) 18%,transparent));
}
.experience-pane span{
  position:absolute;left:10px;top:9px;
  font-size:7px;letter-spacing:.17em;font-weight:700;opacity:.55;
}
.experience-pane i{
  position:absolute;left:10px;right:10px;bottom:11px;height:1px;
  background:linear-gradient(90deg,var(--blue),transparent);
}
.pane-a{left:6%;top:25%;transform:rotateY(18deg) rotateZ(-6deg);opacity:.62}
.pane-b{left:31%;top:11%;transform:translateZ(28px) rotateY(-4deg);z-index:2}
.pane-c{right:5%;top:30%;transform:rotateY(-20deg) rotateZ(7deg);opacity:.68}
.experience-pearl{
  position:absolute;
  z-index:4;
  width:34px;height:34px;
  left:55%;top:51%;
  border-radius:50%;
  background:
    radial-gradient(circle at 31% 27%,#fff 0 8%,#dbf3ff 21%,#a9d8ee 48%,#5c8ca6 72%,#27475b 100%);
  box-shadow:
    0 8px 24px rgba(0,0,0,.15),
    0 0 0 7px color-mix(in srgb,var(--blue) 9%,transparent);
}
.experience-thread{
  position:absolute;
  left:12%;right:10%;top:59%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--blue) 18% 82%,transparent);
  transform:rotate(-7deg);
  opacity:.65;
}
.experience-scroll{
  right:10px;bottom:9px;
  font-size:7px;letter-spacing:.18em;opacity:.48;
}

/* Expanded immersive-service artwork */
.experience-detail-visual{
  min-height:500px!important;
  overflow:hidden;
  border:1px solid rgba(17,17,17,.13);
  background:
    radial-gradient(circle at 78% 19%,rgba(99,197,255,.26),transparent 28%),
    linear-gradient(145deg,#f8f5ef,#e7edf0 62%,#eef5f8);
  perspective:1100px;
}
.experience-detail-glow{
  position:absolute;
  width:380px;height:380px;
  right:-80px;top:-120px;
  border-radius:50%;
  background:#63c5ff;
  opacity:.12;
  filter:blur(48px);
}
.experience-detail-grid{
  position:absolute;inset:0;
  opacity:.18;
  background:
    linear-gradient(rgba(17,17,17,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,17,17,.16) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(180deg,transparent 4%,#000 38%,#000 72%,transparent);
}
.experience-detail-pane{
  position:absolute;
  width:29%;
  height:47%;
  border:1px solid rgba(17,17,17,.15);
  border-radius:18px;
  background:rgba(255,255,255,.56);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 28px 70px rgba(17,17,17,.10);
  overflow:hidden;
}
.experience-detail-pane::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(145deg,transparent 42%,rgba(99,197,255,.20));
}
.experience-detail-pane span{
  position:absolute;left:17px;top:15px;
  font-size:8px;letter-spacing:.15em;opacity:.42;
}
.experience-detail-pane b{
  position:absolute;left:17px;bottom:20px;
  font-size:clamp(15px,1.4vw,20px);
  letter-spacing:.09em;font-weight:600;
}
.experience-detail-pane i{
  position:absolute;left:17px;right:17px;bottom:13px;height:1px;
  background:linear-gradient(90deg,#63c5ff,transparent);
}
.detail-pane-a{left:7%;top:28%;transform:rotateY(16deg) rotateZ(-5deg);opacity:.72}
.detail-pane-b{left:36%;top:18%;z-index:2;transform:translateZ(45px)}
.detail-pane-c{right:6%;top:30%;transform:rotateY(-17deg) rotateZ(5deg);opacity:.76}
.experience-detail-pearl{
  position:absolute;
  z-index:4;
  left:52%;top:56%;
  width:66px;height:66px;
  border-radius:50%;
  background:
    radial-gradient(circle at 31% 27%,#fff 0 8%,#e5f7ff 20%,#abdcee 45%,#6ca1bd 70%,#345a70 100%);
  box-shadow:0 20px 45px rgba(17,17,17,.16),0 0 0 12px rgba(99,197,255,.10);
}
.experience-detail-path{
  position:absolute;
  left:12%;right:10%;top:61%;
  height:1px;
  background:linear-gradient(90deg,transparent,#63c5ff 12% 88%,transparent);
  transform:rotate(-6deg);
  opacity:.75;
}
.experience-detail-path i{
  position:absolute;top:50%;
  width:8px;height:8px;border-radius:50%;
  background:#63c5ff;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 7px rgba(99,197,255,.12);
}
.experience-detail-path i:nth-child(1){left:13%}
.experience-detail-path i:nth-child(2){left:52%}
.experience-detail-path i:nth-child(3){left:88%}
.experience-detail-caption{
  position:absolute;right:22px;bottom:18px;
  font-size:8px;letter-spacing:.18em;opacity:.42;
}

/* OSTRA Scan — editorial diagnostic console, no radar circles */
.service-scan .scan-visual{
  width:330px;
  height:210px;
  min-height:0;
  inset:42px 6% auto auto;
  opacity:.92;
  transform:none;
}
.service-scan:hover .scan-visual{
  transform:translateY(-3px);
  opacity:1;
}
.scan-console{
  position:absolute;
  inset:0;
  border:1px solid color-mix(in srgb,var(--fg) 17%,var(--line));
  border-radius:20px;
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--fg) 4%,var(--bg)),color-mix(in srgb,var(--bg) 96%,transparent));
  box-shadow:0 20px 60px rgba(0,0,0,.06);
  padding:18px;
  overflow:hidden;
}
.scan-console::before{
  content:"";
  position:absolute;
  width:130px;height:130px;
  right:-40px;top:-58px;
  border-radius:50%;
  background:var(--blue);
  filter:blur(38px);
  opacity:.12;
}
.scan-console-head{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
  font-size:7px;letter-spacing:.16em;
  position:relative;z-index:2;
}
.scan-console-head span{font-weight:700}
.scan-console-head b{font-weight:500;color:var(--blue)}
.scan-console-row{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:10px;
  align-items:center;
  margin-top:13px;
  position:relative;z-index:2;
}
.scan-console-row>span{
  font-size:7px;
  letter-spacing:.13em;
  opacity:.5;
}
.scan-console-row>i{
  position:relative;
  display:block;
  height:3px;
  border-radius:99px;
  background:color-mix(in srgb,var(--fg) 9%,transparent);
  overflow:hidden;
}
.scan-console-row>i>b{
  position:absolute;
  inset:0 auto 0 0;
  width:var(--scan);
  border-radius:inherit;
  background:linear-gradient(90deg,var(--blue),color-mix(in srgb,var(--blue) 42%,var(--fg)));
}
.scan-console-foot{
  position:absolute;
  left:18px;right:18px;bottom:13px;
  display:flex;align-items:center;gap:9px;
  font-size:7px;letter-spacing:.14em;opacity:.48;
}
.scan-console-foot i{
  flex:1;height:1px;background:var(--line);
}
.scan-console-foot b{
  font-weight:600;letter-spacing:.18em;
}

/* Reviews: let the new editorial SVGs breathe */
.review-media-symbol{
  background:#f6f2ea;
}
.review-media-symbol img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Remove visual spacing assumptions left by the deleted process section */
.immersive-portal + .satisfaction{
  padding-top:clamp(72px,8vw,110px);
}

@media(max-width:720px){
  .service-experience .experience-visual{
    width:54%;
    height:41%;
    right:-2%;
    top:64px;
  }
  .experience-pane{
    width:43%;
    height:55%;
  }
  .experience-pearl{
    width:28px;height:28px;
  }
  .experience-detail-visual{
    min-height:330px!important;
  }
  .experience-detail-pane{
    width:35%;
    height:44%;
  }
  .detail-pane-a{left:3%;top:33%}
  .detail-pane-b{left:32%;top:20%}
  .detail-pane-c{right:2%;top:36%}
  .experience-detail-pearl{
    width:48px;height:48px;
  }
  .service-scan .scan-visual{
    width:235px;
    height:178px;
    right:10px;
    top:70px;
  }
  .scan-console{
    padding:14px;
    border-radius:16px;
  }
  .scan-console-row{
    grid-template-columns:58px 1fr;
    margin-top:10px;
  }
  .scan-console-foot{
    left:14px;right:14px;bottom:10px;
  }
}


/* =========================================================
   Reviews — no fake profile photos + premium editorial art
   ========================================================= */
.review-social-head{
  grid-template-columns:1fr 30px!important;
  gap:18px!important;
  min-height:46px;
}
.review-avatar{display:none!important}

.review-author{
  align-self:center;
}
.review-author-line{
  display:flex;
  align-items:center;
  gap:7px;
}
.review-author-line strong{
  font-size:15px;
  letter-spacing:-.02em;
}
.review-author>span{
  display:block;
  margin-top:4px;
  font-size:10px;
  letter-spacing:.02em;
  color:rgba(15,15,15,.50);
}
.review-check{
  width:15px;height:15px;
  display:inline-grid;
  place-items:center;
  border-radius:50%;
  background:#151515;
  color:#fff;
  font-size:9px;
  line-height:1;
}
.review-ostra-mark{
  width:28px!important;
  height:28px!important;
  opacity:.88!important;
  border:1px solid rgba(15,15,15,.09);
}

.review-media-symbol{
  background:#f5f1e9!important;
  border-color:rgba(15,15,15,.10)!important;
}
.review-media-symbol img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  transform:scale(1.001);
  transition:transform .65s cubic-bezier(.2,.75,.2,1);
}
.review-social:hover .review-media-symbol img{
  transform:scale(1.018);
}

@media(max-width:720px){
  .review-social-head{
    grid-template-columns:1fr 28px!important;
  }
  .review-author-line strong{
    font-size:14px;
  }
}


/* Text-only testimonial cards: no decorative artwork */
.review-text-only{
  display:flex;
  flex-direction:column;
}
.review-text-only > p{
  margin-bottom:28px;
}
.review-text-only .review-meta{
  margin-top:auto;
  padding-top:20px;
  border-top:1px solid rgba(15,15,15,.10);
}


/* =========================================================
   CREATIVE MOMENTS — dotted globe / immersive preview / astronaut
   ========================================================= */

/* 02 — true dark dotted-earth treatment */
.statement-globe{
  background:#111315!important;
  border-color:rgba(255,255,255,.10)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.16)!important;
}
.statement-globe::after{
  background:radial-gradient(circle at 50% 48%,transparent 30%,rgba(0,0,0,.36) 86%)!important;
  mix-blend-mode:normal!important;
  opacity:1!important;
}
.globe-label{
  color:rgba(255,255,255,.48)!important;
}
.globe-label i{
  background:rgba(255,255,255,.16)!important;
}
.globe-label b{
  color:rgba(255,255,255,.36)!important;
}
.globe-frame{
  overflow:hidden!important;
}
#ostraGlobe{
  width:92%!important;
  top:5%!important;
  opacity:0!important;
  transform:translateX(-50%) scale(.86)!important;
  filter:blur(8px) contrast(1.12)!important;
  transition:
    opacity 1.1s cubic-bezier(.2,.75,.2,1),
    transform 1.35s cubic-bezier(.16,.84,.2,1),
    filter 1.25s ease!important;
}
.statement-globe.globe-formed #ostraGlobe{
  opacity:1!important;
  transform:translateX(-50%) scale(1)!important;
  filter:blur(0) contrast(1.10)!important;
}
.globe-horizon{
  background:radial-gradient(ellipse at center,rgba(255,255,255,.12),rgba(255,255,255,0) 68%)!important;
  opacity:.28!important;
}
.globe-bottom-fade{
  height:18%!important;
  background:linear-gradient(180deg,rgba(17,19,21,0),rgba(17,19,21,.70))!important;
}

/* 04 — live preview of OSTRA Immersive */
.immersive-portal-inner{
  grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr)!important;
  grid-template-areas:
    "copy preview"
    "copy cta";
  align-items:center!important;
  min-height:470px!important;
}
.immersive-portal-copy{grid-area:copy}
.immersive-live-preview{
  grid-area:preview;
  position:relative;
  z-index:3;
  width:100%;
  aspect-ratio:1.45/1;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--fg) 17%,transparent);
  border-radius:24px;
  background:#111;
  box-shadow:0 24px 70px rgba(0,0,0,.13);
  transform:rotate(1.2deg);
  transition:.45s cubic-bezier(.2,.75,.2,1);
}
.immersive-portal-inner:hover .immersive-live-preview{
  transform:rotate(0deg) translateY(-4px);
}
.immersive-preview-bar{
  position:absolute;
  z-index:20;
  top:0;left:0;right:0;
  height:35px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,.43),rgba(0,0,0,0));
  font-size:6px;
  letter-spacing:.17em;
}
.immersive-preview-bar i{
  flex:1;height:1px;background:rgba(255,255,255,.28);
}
.immersive-preview-bar b{font-weight:500;opacity:.66}
.immersive-preview-stage{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.immersive-preview-scene{
  position:absolute;
  inset:-2%;
  opacity:0;
  overflow:hidden;
  animation:ostraPreviewScene 6.8s infinite both;
  animation-play-state:paused;
}
.preview-one{opacity:1;animation-delay:0s}
.preview-two{animation-delay:1.7s}
.preview-three{animation-delay:3.4s}
.preview-four{animation-delay:5.1s}
.immersive-portal-inner:hover .immersive-preview-scene,
.immersive-portal-inner:focus-within .immersive-preview-scene{
  animation-play-state:running;
}
@keyframes ostraPreviewScene{
  0%{opacity:0;transform:scale(1.05)}
  4%{opacity:1}
  22%{opacity:1;transform:scale(1)}
  27%,100%{opacity:0;transform:scale(1.035)}
}
.immersive-preview-scene img{
  position:absolute;
  display:block;
  pointer-events:none;
}
.preview-bg{
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
.preview-car{width:70%;left:47%;top:48%;transform:translate(-50%,-50%)}
.preview-land{width:115%;left:-8%;bottom:-5%}
.preview-people{width:25%;left:44%;bottom:9%}
.preview-planet{width:31%;right:4%;top:8%}
.preview-astronaut{width:38%;right:15%;top:9%}
.preview-field{width:118%;left:-9%;bottom:-2%}
.preview-ufo{width:27%;right:13%;top:9%}
.immersive-portal-link{
  grid-area:cta;
  justify-self:stretch!important;
  width:100%!important;
  min-height:72px!important;
}

/* Roaming astronaut */
.astronaut-stage{
  position:fixed;
  inset:0;
  z-index:24;
  pointer-events:none;
  overflow:hidden;
  transition:opacity .22s ease;
}
.travel-astronaut{
  position:absolute;
  left:0;top:0;
  width:clamp(118px,10.5vw,178px);
  height:auto;
  transform-origin:50% 48%;
  will-change:transform,opacity;
  filter:drop-shadow(0 22px 24px rgba(0,0,0,.22));
}
.astronaut-tether{
  position:absolute;
  top:0;
  width:1px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.72));
  transform-origin:top center;
  will-change:left,height,opacity,transform;
  transition:opacity .16s ease;
}
.service-detail-open .astronaut-stage,
.projects-hub-open .astronaut-stage,
.project-detail-open .astronaut-stage,
.language-pending .astronaut-stage{
  opacity:0!important;
}

/* Footer moon-walk loop */
.site-footer{
  position:relative;
  overflow:hidden;
  padding-bottom:150px!important;
}
.footer-astronaut-track{
  position:absolute;
  z-index:1;
  left:0;right:0;bottom:0;
  height:126px;
  overflow:hidden;
  pointer-events:none;
  border-top:1px solid color-mix(in srgb,var(--fg) 8%,transparent);
}
.footer-walker{
  position:absolute;
  left:-130px;
  bottom:-6px;
  width:95px;
  animation:footerAstronautWalk 15s linear infinite;
}
.footer-walker img{
  width:100%;
  height:auto;
  display:block;
  transform-origin:50% 100%;
  animation:footerAstronautStep .72s ease-in-out infinite alternate;
  filter:drop-shadow(0 10px 11px rgba(0,0,0,.18));
}
@keyframes footerAstronautWalk{
  from{transform:translateX(0)}
  to{transform:translateX(calc(100vw + 260px))}
}
@keyframes footerAstronautStep{
  0%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-5px) rotate(1deg)}
  100%{transform:translateY(0) rotate(2deg)}
}

@media(max-width:720px){
  #ostraGlobe{
    width:104%!important;
    top:10%!important;
  }
  .immersive-portal-inner{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "copy"
      "preview"
      "cta";
    min-height:0!important;
    gap:26px!important;
  }
  .immersive-live-preview{
    aspect-ratio:1.28/1;
    border-radius:19px;
    transform:none;
  }
  .immersive-preview-scene{
    animation-play-state:running;
  }
  .travel-astronaut{
    width:92px;
  }
  .site-footer{
    padding-bottom:112px!important;
  }
  .footer-astronaut-track{
    height:92px;
  }
  .footer-walker{
    width:68px;
    left:-90px;
    animation-duration:10.5s;
  }
}

@media(prefers-reduced-motion:reduce){
  .travel-astronaut{display:none}
  .footer-walker{animation:none;left:calc(50% - 42px)}
  .footer-walker img{animation:none}
  .immersive-preview-scene{animation:none!important}
  .preview-one{opacity:1!important}
  .preview-two,.preview-three,.preview-four{opacity:0!important}
}


/* =========================================================
   Globe + Immersive Preview — fixed, astronaut removed
   ========================================================= */

.astronaut-stage,
.footer-astronaut-track{
  display:none!important;
}

.statement-globe{
  background:#0d0f11!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:0 28px 85px rgba(0,0,0,.15)!important;
  overflow:hidden!important;
}
.statement-globe::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  pointer-events:none!important;
  opacity:1!important;
  background:radial-gradient(circle at 52% 50%,transparent 31%,rgba(0,0,0,.13) 70%,rgba(0,0,0,.48) 100%)!important;
  mix-blend-mode:normal!important;
}
.globe-frame{
  position:absolute!important;
  inset:0!important;
  overflow:hidden!important;
}
#ostraGlobe{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  display:block!important;
}
.statement-globe.globe-formed #ostraGlobe{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}
.globe-label{
  z-index:5!important;
  color:rgba(255,255,255,.48)!important;
}
.globe-label i{background:rgba(255,255,255,.16)!important}
.globe-label b{color:rgba(255,255,255,.36)!important}
.globe-horizon,
.globe-bottom-fade{
  opacity:.16!important;
}

/* The preview is controlled by JS, so it works on desktop and mobile. */
.immersive-preview-scene{
  animation:none!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:scale(1.04)!important;
  transition:
    opacity .42s cubic-bezier(.2,.75,.2,1),
    transform 1.25s cubic-bezier(.2,.75,.2,1)!important;
}
.immersive-preview-scene.is-active{
  opacity:1!important;
  visibility:visible!important;
  transform:scale(1)!important;
  z-index:4!important;
}
.immersive-preview-stage{
  background:
    radial-gradient(circle at 72% 22%,rgba(255,179,218,.32),transparent 27%),
    linear-gradient(145deg,#d9c8d1,#8da8b1 61%,#15191d)!important;
}
.immersive-live-preview{
  cursor:crosshair;
}
.immersive-live-preview::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:12;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11);
}
.immersive-preview-scene.is-active .preview-car{
  animation:previewCarFloat 2s ease-in-out infinite alternate!important;
}
.immersive-preview-scene.is-active .preview-astronaut{
  animation:previewAstronautFloat 2.2s ease-in-out infinite alternate!important;
}
.immersive-preview-scene.is-active .preview-ufo{
  animation:previewUfoFloat 2s ease-in-out infinite alternate!important;
}
@keyframes previewCarFloat{
  from{transform:translate(-50%,-50%) translateY(0) rotate(-1deg)}
  to{transform:translate(-50%,-50%) translateY(-7px) rotate(1deg)}
}
@keyframes previewAstronautFloat{
  from{transform:translateY(0) rotate(-2deg)}
  to{transform:translateY(-8px) rotate(2deg)}
}
@keyframes previewUfoFloat{
  from{transform:translateY(0) rotate(-2deg)}
  to{transform:translateY(-7px) rotate(2deg)}
}

.site-footer{
  padding-bottom:34px!important;
}

@media(max-width:720px){
  .immersive-live-preview{cursor:default}
}

@media(prefers-reduced-motion:reduce){
  .immersive-preview-scene img{
    animation:none!important;
  }
}




/* =========================================================
   MOBILE CLARITY PASS
   Service graphics occupy their own row instead of overlapping text.
   ========================================================= */
@media(max-width:720px){
  .services-grid{gap:14px!important;}
  .service-card,.service-card.wide,.service-card.featured,.service-scan{
    min-height:0!important;padding:20px!important;display:flex!important;flex-direction:column!important;
  }
  .service-card .service-no{min-height:18px;}
  .service-card .service-visual,
  .service-experience .experience-visual,
  .service-scan .scan-visual{
    position:relative!important;inset:auto!important;right:auto!important;left:auto!important;top:auto!important;bottom:auto!important;
    width:100%!important;max-width:none!important;height:132px!important;min-height:132px!important;
    margin:22px 0 24px!important;opacity:.58!important;transform:none!important;transform-origin:center!important;order:initial!important;
  }
  .service-card:hover .service-visual,
  .service-experience:hover .experience-visual,
  .service-scan:hover .scan-visual{transform:none!important;opacity:.72!important;}
  .service-card h3{margin:0 0 9px!important;max-width:none!important;font-size:clamp(30px,9vw,44px)!important;line-height:.94!important;}
  .service-card > p{max-width:100%!important;padding-right:0!important;font-size:13px!important;line-height:1.48!important;}
  .service-more,.service-scan-link{margin-top:18px!important;}
  .service-content::after{display:none!important;}
  .service-content .content-visual{display:block!important;}
  .branding-visual{padding:12px 14px!important;}
  .branding-visual .type-big{font-size:46px!important;}
  .service-card .web-visual{width:100%!important;height:132px!important;min-height:132px!important;padding:12px!important;}
  .service-card .app-visual{opacity:.48!important;transform:none!important;}
  .service-experience .experience-visual{height:146px!important;min-height:146px!important;}
  .service-experience .experience-pane{width:35%!important;height:62%!important;}
  .service-experience .experience-pearl{width:30px!important;height:30px!important;}
  .service-scan .scan-visual{height:172px!important;min-height:172px!important;}
  .scan-console{border-radius:16px!important;padding:14px!important;}
  .scan-console-row{grid-template-columns:62px 1fr!important;margin-top:10px!important;}
  .scan-console-foot{left:14px!important;right:14px!important;bottom:10px!important;}
  .scan-service-badge,.experience-service-badge{
    top:17px!important;right:18px!important;left:auto!important;max-width:48%;text-align:right;line-height:1.2;
  }
}

/* =========================================================
   IMMERSIVE PREVIEW — MOBILE COMPOSITION
   ========================================================= */
@media(max-width:720px){
  .immersive-portal{overflow:hidden;}
  .immersive-portal-inner{
    grid-template-columns:1fr!important;
    grid-template-areas:"copy" "preview" "cta"!important;
    gap:24px!important;min-height:0!important;
  }
  .immersive-live-preview{
    width:100%!important;aspect-ratio:4 / 5!important;max-height:none!important;border-radius:20px!important;
    transform:none!important;box-shadow:0 18px 48px rgba(0,0,0,.12)!important;cursor:default!important;
  }
  .immersive-preview-bar{height:38px!important;padding:0 11px!important;font-size:6px!important;}
  .immersive-preview-scene{inset:0!important;}
  .preview-bg{width:100%!important;height:100%!important;object-fit:cover!important;}
  .preview-one .preview-bg{object-position:52% 50%!important;}
  .preview-two .preview-bg{object-position:54% 50%!important;}
  .preview-three .preview-bg{object-position:55% 50%!important;}
  .preview-four .preview-bg{object-position:52% 50%!important;}
  .preview-car{width:92%!important;left:50%!important;top:58%!important;}
  .preview-land{width:158%!important;left:-28%!important;bottom:-2%!important;}
  .preview-people{width:35%!important;left:39%!important;bottom:13%!important;}
  .preview-planet{width:47%!important;right:-5%!important;top:10%!important;}
  .preview-astronaut{width:62%!important;right:2%!important;top:15%!important;}
  .preview-field{width:164%!important;left:-30%!important;bottom:-2%!important;}
  .preview-ufo{width:43%!important;right:2%!important;top:10%!important;}
  .immersive-portal-link{min-height:64px!important;}
}

/* =========================================================
   GLOBE INTERACTION
   ========================================================= */
.statement-globe{cursor:grab;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;}
.statement-globe.is-dragging{cursor:grabbing;}
.statement-globe.is-dragging #ostraGlobe{filter:brightness(1.08)!important;}

.site-footer .footer-note{
  grid-column:1 / -1;justify-self:center;margin-top:-3px;font-size:7px;line-height:1;letter-spacing:.12em;
  text-transform:lowercase;opacity:.16;white-space:nowrap;
}
@media(max-width:900px){
  .site-footer .footer-note{display:block!important;grid-column:1 / -1;font-size:6px;opacity:.14;margin-top:2px;}
}
@media(max-width:420px){.site-footer .footer-note{font-size:5.5px;letter-spacing:.09em;}}