:root {
  --deep: #0E2A2D;
  --deep-2: #102326;
  --accent: #2AB7A9;
  --accent-soft: #9BE2DA;
  --paper: #F7F9F8;
  --white: #ffffff;
  --ink: #182022;
  --muted: #697476;
  --line: rgba(24, 32, 34, .13);
  --radius-lg: 32px;
  --radius-md: 22px;
  --shadow: 0 24px 70px rgba(14, 42, 45, .12);
  --container: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { max-width: 100%; display: block; }

.container { width: var(--container); margin: 0 auto; }

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  z-index: 20;
  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='.55'/%3E%3C/svg%3E");
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(18px);
  background: rgba(247,249,248,.82);
  border-bottom: 1px solid rgba(24,32,34,.07);
}

.nav-wrap {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand { display: inline-flex; align-items: center; gap: 12px; }

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--deep);
  color: var(--accent-soft);
  font-weight: 800;
  font-size: 20px;
  box-shadow: inset -10px -10px 24px rgba(42,183,169,.13);
}

.brand-copy { display: flex; align-items: baseline; gap: 6px; }
.brand-copy strong { font-size: 19px; letter-spacing: -.5px; }
.brand-copy small { font-size: 11px; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); }

.main-nav { display: flex; align-items: center; gap: 30px; }
.main-nav > a { font-size: 14px; font-weight: 600; color: #334043; }
.main-nav > a:not(.nav-cta):hover { color: var(--accent); }

.nav-cta {
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--deep);
  color: white !important;
}

.nav-toggle { display: none; border: 0; background: transparent; padding: 6px; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--ink); margin:5px; transition:.2s; }

.hero {
  min-height: calc(100vh - 78px);
  display: grid;
  align-items: center;
  padding: 70px 0 90px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  align-items: center;
  gap: 70px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .19em;
  font-weight: 700;
  color: var(--accent);
}

.eyebrow::before { content: ""; width: 30px; height: 1px; background: currentColor; }

.hero h1 {
  margin: 22px 0 24px;
  max-width: 720px;
  font-size: clamp(60px, 7.2vw, 108px);
  line-height: .93;
  letter-spacing: -.068em;
  font-weight: 600;
}

.hero h1 span {
  font-family: "Playfair Display", serif;
  font-style: italic;
  color: var(--accent);
  font-weight: 600;
}

.hero-lead {
  max-width: 670px;
  margin: 0;
  font-size: 18px;
  color: #536063;
}

.hero-actions { display: flex; gap: 14px; margin-top: 35px; flex-wrap: wrap; }

.btn {
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn-primary { background: var(--deep); color: white; box-shadow: 0 14px 30px rgba(14,42,45,.18); }
.btn-primary:hover { box-shadow: 0 18px 36px rgba(14,42,45,.24); }
.btn-ghost { border: 1px solid var(--line); background: rgba(255,255,255,.55); }

.hero-meta {
  display: flex;
  gap: 36px;
  margin-top: 50px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  max-width: 660px;
}

.hero-meta div { display: grid; gap: 2px; }
.hero-meta strong { font-size: 13px; }
.hero-meta span { font-size: 12px; color: var(--muted); }

.hero-visual {
  position: relative;
  min-height: 570px;
  display: grid;
  place-items: center;
}

.visual-card {
  width: min(100%, 470px);
  aspect-ratio: 4/5;
  border-radius: 38px;
  background:
    radial-gradient(circle at 73% 27%, rgba(42,183,169,.34), transparent 30%),
    linear-gradient(145deg, #163a3d 0%, #0b2326 65%, #081b1d 100%);
  box-shadow: var(--shadow);
  padding: 28px;
  color: white;
  position: relative;
  overflow: hidden;
}

.visual-card::after {
  content: "";
  position: absolute;
  width: 440px;
  height: 220px;
  border: 1px solid rgba(155,226,218,.22);
  border-radius: 50%;
  left: -80px;
  bottom: 70px;
  transform: rotate(-16deg);
}

.visual-label { font-size: 11px; text-transform: uppercase; letter-spacing: .18em; color: rgba(255,255,255,.62); }

.orbit {
  position: absolute;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  left: 50%;
  top: 47%;
  transform: translate(-50%,-50%);
  display: grid;
  place-items: center;
}

.orbit::before,
.orbit::after {
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.10);
}
.orbit::before { width: 205px; height:205px; }
.orbit::after { width: 145px; height:145px; }

.orbit-core {
  width: 96px;
  height: 96px;
  border-radius: 30px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--deep);
  font-size: 42px;
  font-weight: 800;
  box-shadow: 0 18px 40px rgba(42,183,169,.28);
  z-index: 1;
}

.orbit-dot {
  position: absolute;
  width: 12px;
  height:12px;
  border-radius: 50%;
  background: var(--accent-soft);
  box-shadow: 0 0 0 8px rgba(155,226,218,.08);
}
.dot-1 { top: 28px; left: 55px; }
.dot-2 { right: 20px; top: 130px; }
.dot-3 { bottom: 36px; left: 72px; }

.visual-bottom {
  position:absolute;
  left:28px;
  right:28px;
  bottom:28px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(255,255,255,.6);
  z-index:2;
}
.visual-bottom i { height:1px; flex:1; background:rgba(255,255,255,.18); }

.floating-pill {
  position:absolute;
  background:white;
  border:1px solid rgba(14,42,45,.09);
  box-shadow:0 14px 35px rgba(14,42,45,.10);
  border-radius:999px;
  padding:11px 16px;
  font-size:12px;
  font-weight:700;
}
.pill-one { left:-25px; top:120px; }
.pill-two { right:-18px; top:250px; }
.pill-three { left:10px; bottom:86px; }

.statement {
  padding: 40px 0 95px;
}
.statement-grid {
  display:grid;
  grid-template-columns:.8fr 1.6fr 1fr;
  gap:48px;
  align-items:start;
  border-top:1px solid var(--line);
  padding-top:50px;
}
.section-kicker {
  margin:0;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
}
.statement h2,
.section-head h2,
.takeover h2,
.about h2,
.contact h2 {
  margin:0;
  font-size:clamp(38px,5vw,66px);
  line-height:1.03;
  letter-spacing:-.045em;
  font-weight:600;
}
.statement h2 em {
  font-family:"Playfair Display", serif;
  color:var(--accent);
  font-weight:600;
}
.statement-grid > p:last-child { margin:0; color:var(--muted); font-size:16px; }

.section { padding: 105px 0; }

.section-head {
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:50px;
  align-items:end;
  margin-bottom:48px;
}
.section-head h2 { margin-top:14px; }
.section-head > p { margin:0; color:var(--muted); }

.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

.service-card {
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:30px;
  background:rgba(255,255,255,.5);
  min-height:410px;
  display:flex;
  flex-direction:column;
}
.service-card.featured {
  background:var(--deep);
  color:white;
}
.service-no { font-size:12px; color:var(--accent); letter-spacing:.12em; }
.service-card h3 { font-size:32px; letter-spacing:-.04em; margin:42px 0 10px; }
.service-card p { color:var(--muted); margin:0 0 26px; }
.service-card.featured p { color:rgba(255,255,255,.63); }
.service-card ul { margin:auto 0 0; padding:0; list-style:none; }
.service-card li { padding:10px 0; border-top:1px solid var(--line); font-size:14px; }
.service-card.featured li { border-color:rgba(255,255,255,.12); }

.dark-section { background:var(--deep); color:white; }
.section-head.light > p { color:rgba(255,255,255,.55); }

.work-grid {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:20px;
}
.project-card {
  border-radius:26px;
  overflow:hidden;
  background:#153437;
  border:1px solid rgba(255,255,255,.08);
}
.project-large { grid-row:span 2; }
.project-art {
  min-height:320px;
  position:relative;
  overflow:hidden;
}
.project-large .project-art { min-height:610px; }
.art-one {
  background:
    radial-gradient(circle at 30% 30%, rgba(42,183,169,.3), transparent 25%),
    linear-gradient(150deg,#163b3f,#0a2225);
}
.phone {
  position:absolute;
  width:190px;
  height:390px;
  border-radius:34px;
  background:#081719;
  padding:8px;
  box-shadow:0 25px 45px rgba(0,0,0,.28);
}
.phone-screen { height:100%; border-radius:27px; background:#f7f9f8; padding:20px; overflow:hidden; }
.phone-a { left:16%; top:80px; transform:rotate(-8deg); }
.phone-b { right:12%; top:120px; transform:rotate(8deg); }
.mini-bar { height:9px; width:55%; border-radius:20px; background:#d9e0df; }
.mini-title { margin-top:28px; height:44px; background:#0E2A2D; border-radius:11px; }
.mini-grid { display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:15px;}
.mini-grid i { display:block;height:95px;border-radius:12px;background:#e1e9e7; }
.mini-card { height:130px; margin-top:30px;border-radius:16px;background:#dce9e7; }
.mini-lines { margin-top:18px;height:120px;border-radius:16px;background:repeating-linear-gradient(#e1e8e7 0 8px, transparent 8px 19px); }

.art-two { padding:42px;background:linear-gradient(145deg,#112e31,#174649); }
.browser { width:100%;height:245px;background:#f7f9f8;border-radius:14px;box-shadow:0 22px 55px rgba(0,0,0,.22);overflow:hidden; }
.browser-top { height:30px;background:#e6eceb;display:flex;align-items:center;gap:5px;padding:0 10px; }
.browser-top i { width:6px;height:6px;border-radius:50%;background:#90a3a1; }
.browser-body { display:flex;height:calc(100% - 30px); }
.dash-side { width:23%;background:#12383b; }
.dash-main { flex:1;padding:16px; }
.dash-top { height:18px;width:45%;background:#cbd9d7;border-radius:5px; }
.dash-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px; }
.dash-cards i { height:55px;background:#dce8e6;border-radius:8px; }
.dash-chart { margin-top:12px;height:78px;border-radius:9px;background:linear-gradient(180deg,#b8dbd6,#e2ecea); }

.art-three { background:#e9efee;display:grid;place-items:center;padding:42px; }
.commerce-card { width:88%;height:230px;border-radius:18px;background:white;box-shadow:0 20px 45px rgba(14,42,45,.12);padding:20px; }
.commerce-top { height:55px;border-radius:10px;background:var(--deep); }
.commerce-products { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px; }
.commerce-products i { height:105px;background:#e4ecea;border-radius:10px; }

.project-info {
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 24px;
}
.project-info span { display:block;color:rgba(255,255,255,.5);font-size:11px;text-transform:uppercase;letter-spacing:.14em; }
.project-info h3 { margin:4px 0 0;font-size:21px; }
.project-info a {
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.15);
  display:grid;place-items:center;
}

.takeover-grid { display:grid;grid-template-columns:1fr 1fr;gap:80px; }
.takeover h2 { margin-top:15px; }
.takeover-copy p { margin:0 0 30px;color:var(--muted);font-size:17px; }
.takeover-options { display:flex;flex-wrap:wrap;gap:9px;margin-bottom:32px; }
.takeover-options span { padding:9px 13px;border-radius:999px;border:1px solid var(--line);font-size:12px;background:white; }
.text-link { font-weight:700;color:var(--deep);border-bottom:1px solid currentColor;padding-bottom:4px; }

.product-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:18px; }
.product-card {
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:26px;
  min-height:320px;
  background:white;
}
.product-status {
  position:absolute;right:18px;top:18px;
  font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:6px 9px;
}
.product-icon {
  width:70px;height:70px;border-radius:20px;background:var(--deep);color:var(--accent-soft);
  display:grid;place-items:center;font-size:22px;font-weight:800;margin-top:42px;
}
.product-card h3 { margin:26px 0 8px;font-size:24px; }
.product-card p { margin:0;color:var(--muted);font-size:14px; }

.about-grid { display:grid;grid-template-columns:.8fr 1.2fr;gap:80px; }
.about h2 { margin-top:15px; }
.principles article {
  display:grid;
  grid-template-columns:50px 1fr;
  gap:16px;
  padding:28px 0;
  border-top:1px solid var(--line);
}
.principles article:last-child { border-bottom:1px solid var(--line); }
.principles > article > span { font-size:11px;color:var(--accent); }
.principles h3 { margin:0 0 8px;font-size:21px; }
.principles p { margin:0;color:var(--muted); }

.contact { padding:110px 0; }
.contact-grid { display:grid;grid-template-columns:1.25fr .75fr;gap:80px;align-items:end; }
.contact h2 { margin-top:18px;max-width:820px; }
.contact-side p { color:rgba(255,255,255,.55);margin:0 0 28px; }
.btn-light { background:white;color:var(--deep); }
.contact-side small { display:block;margin-top:14px;color:rgba(255,255,255,.34);font-size:10px; }

.site-footer { background:#081b1d;color:white;padding:48px 0; }
.footer-grid { display:grid;grid-template-columns:1.1fr 1fr 1fr auto;gap:30px;align-items:center; }
.footer-brand .brand-mark { background:#12383b; }
.footer-brand .brand-copy small { color:rgba(255,255,255,.5); }
.footer-grid p { margin:0;font-size:12px;color:rgba(255,255,255,.5); }
.footer-grid p span { color:rgba(255,255,255,.8); }
.footer-links { display:flex;gap:20px;flex-wrap:wrap; }
.footer-links a { font-size:12px;color:rgba(255,255,255,.72); }
.copyright { text-align:right; }

@media (max-width: 980px) {
  .main-nav {
    display:none;
    position:absolute;
    top:78px;
    left:20px;
    right:20px;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:18px;
    padding:20px;
    box-shadow:var(--shadow);
    flex-direction:column;
    align-items:stretch;
    gap:14px;
  }
  .main-nav.open { display:flex; }
  .nav-toggle { display:block; }
  .hero-grid,
  .statement-grid,
  .section-head,
  .takeover-grid,
  .about-grid,
  .contact-grid { grid-template-columns:1fr; }
  .hero { padding-top:55px; }
  .hero-visual { min-height:530px; }
  .statement-grid { gap:24px; }
  .service-grid,
  .product-grid { grid-template-columns:1fr; }
  .service-card { min-height:auto; }
  .work-grid { grid-template-columns:1fr; }
  .project-large { grid-row:auto; }
  .project-large .project-art { min-height:520px; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .copyright { text-align:left; }
}

@media (max-width: 640px) {
  :root { --container: min(100% - 28px, 1180px); }
  .site-header { backdrop-filter: blur(14px); }
  .brand-copy strong { font-size:17px; }
  .brand-mark { width:38px;height:38px;border-radius:12px; }
  .hero { min-height:auto;padding:55px 0 70px; }
  .hero h1 { font-size:clamp(54px,17vw,76px); }
  .hero-lead { font-size:16px; }
  .hero-meta { display:grid;grid-template-columns:repeat(3,1fr);gap:12px; }
  .hero-visual { min-height:420px; margin-top:10px; }
  .visual-card { width:90%;border-radius:30px; }
  .orbit { width:220px;height:220px; }
  .orbit::before { width:170px;height:170px; }
  .orbit::after { width:120px;height:120px; }
  .orbit-core { width:82px;height:82px;border-radius:25px; }
  .floating-pill { font-size:10px;padding:9px 12px; }
  .pill-one { left:0;top:90px; }
  .pill-two { right:0;top:190px; }
  .pill-three { left:12px;bottom:66px; }
  .statement { padding-bottom:65px; }
  .section { padding:75px 0; }
  .statement h2,
  .section-head h2,
  .takeover h2,
  .about h2,
  .contact h2 { font-size:clamp(36px,11vw,52px); }
  .project-large .project-art { min-height:430px; }
  .phone { width:145px;height:310px; }
  .phone-a { left:9%;top:65px; }
  .phone-b { right:7%;top:90px; }
  .art-two,.art-three { padding:24px; }
  .takeover-grid,.about-grid,.contact-grid { gap:42px; }
  .footer-grid { grid-template-columns:1fr; }
}

/* ===== V2 refinements ===== */

.brand-mark-svg {
  padding: 6px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.brand-mark-svg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero-v2 {
  position: relative;
  overflow: hidden;
  padding-bottom: 36px;
}
.hero-glow {
  position: absolute;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  right: -230px;
  top: 70px;
  background: radial-gradient(circle, rgba(42,183,169,.15), rgba(42,183,169,0) 68%);
  filter: blur(6px);
  pointer-events: none;
}
.hero-visual-v2 {
  min-height: 620px;
}
.hero-brand-card {
  width: min(100%, 500px);
  aspect-ratio: 0.83;
  border-radius: 38px;
  background:
    radial-gradient(circle at 70% 24%, rgba(42,183,169,.34), transparent 26%),
    linear-gradient(145deg, #15383b 0%, #0a2427 66%, #071b1d 100%);
  color: white;
  padding: 28px;
  box-shadow: 0 34px 90px rgba(14,42,45,.22);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .2s ease-out;
}
.hero-card-top {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.17em;
  color:rgba(255,255,255,.46);
}
.hero-mark-wrap {
  position:absolute;
  left:50%;
  top:43%;
  width:290px;
  height:290px;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
}
.hero-logo {
  width:185px;
  height:auto;
  filter: drop-shadow(0 22px 30px rgba(0,0,0,.24));
  z-index:3;
}
.hero-mark-halo {
  position:absolute;
  border:1px solid rgba(155,226,218,.17);
  border-radius:50%;
}
.halo-1 { width:250px; height:250px; }
.halo-2 { width:340px; height:340px; }
.halo-2::before {
  content:"";
  position:absolute;
  width:10px;height:10px;border-radius:50%;
  background:#9BE2DA;
  box-shadow:0 0 0 8px rgba(155,226,218,.06);
  left:20px;top:88px;
}
.hero-card-message {
  position:absolute;
  left:28px;
  bottom:82px;
  z-index:4;
}
.tiny-label {
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#7cd4ca;
  margin-bottom:8px;
}
.hero-card-message strong {
  display:block;
  font-size:26px;
  line-height:1.05;
  letter-spacing:-.04em;
}
.lifecycle {
  position:absolute;
  left:28px;right:28px;bottom:25px;
  display:flex;align-items:center;gap:8px;
  font-size:9px;text-transform:uppercase;letter-spacing:.11em;
  color:rgba(255,255,255,.42);
}
.lifecycle i { height:1px;flex:1;background:rgba(255,255,255,.12); }

.floating-note {
  position:absolute;
  border-radius:999px;
  background:rgba(247,249,248,.95);
  border:1px solid rgba(14,42,45,.08);
  box-shadow:0 14px 38px rgba(14,42,45,.12);
  padding:10px 14px;
  font-size:11px;
  font-weight:700;
  color:var(--deep);
  backdrop-filter:blur(10px);
}
.note-a { left:-18px;top:120px; }
.note-b { right:-18px;top:260px; }
.note-c { left:8px;bottom:90px; }

.hero-marquee {
  width:100%;
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-top:20px;
  padding:13px 0;
  color:#5f6b6d;
  white-space:nowrap;
}
.hero-marquee div {
  width:max-content;
  display:flex;
  gap:18px;
  align-items:center;
  animation:marquee 28s linear infinite;
  font-size:10px;
  letter-spacing:.14em;
}
.hero-marquee b { color:var(--accent); }
@keyframes marquee { to { transform:translateX(-50%); } }

.section-soft {
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(241,246,245,.74));
}
.section-accent-wash {
  background:
    radial-gradient(circle at 12% 20%, rgba(42,183,169,.10), transparent 26%),
    var(--paper);
}

.service-card,
.product-card,
.project-card {
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.service-card:hover,
.product-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 48px rgba(14,42,45,.10);
  border-color: rgba(42,183,169,.28);
}
.project-card:hover { transform: translateY(-5px); }

.case-feature {
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  min-height:680px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(135deg,#123437,#0a2427);
  overflow:hidden;
  margin-bottom:22px;
}
.case-copy {
  padding:52px;
  display:flex;
  flex-direction:column;
}
.case-topline {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:rgba(255,255,255,.42);
  border-bottom:1px solid rgba(255,255,255,.09);
  padding-bottom:18px;
}
.case-copy h3 {
  margin:44px 0 12px;
  font-size:clamp(54px,6vw,88px);
  line-height:.9;
  letter-spacing:-.07em;
}
.case-lead {
  margin:0 0 28px;
  max-width:460px;
  font-size:18px;
  color:rgba(255,255,255,.72);
}
.case-tags { display:flex;flex-wrap:wrap;gap:8px; }
.case-tags span {
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  padding:7px 10px;
  font-size:10px;
  color:rgba(255,255,255,.72);
}
.case-desc {
  margin:30px 0 0;
  color:rgba(255,255,255,.48);
  font-size:14px;
  max-width:520px;
}
.case-link {
  margin-top:auto;
  width:max-content;
  border-bottom:1px solid rgba(255,255,255,.35);
  padding-bottom:4px;
  font-size:12px;
  font-weight:700;
}
.mawater-stage {
  position:relative;
  min-height:680px;
  background:
    radial-gradient(circle at 50% 42%, rgba(42,183,169,.25), transparent 28%),
    linear-gradient(155deg,#1b4f53,#0b292c);
  overflow:hidden;
}
.mawater-stage::after {
  content:"";
  position:absolute;
  inset:auto -80px -140px 10%;
  height:360px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.09);
  transform:rotate(-10deg);
}
.mawater-orbit {
  position:absolute;
  width:460px;height:460px;border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
  left:50%;top:48%;transform:translate(-50%,-50%);
}
.mawater-orbit::before,
.mawater-orbit::after {
  content:"";position:absolute;border-radius:50%;
  border:1px solid rgba(255,255,255,.065);
  inset:48px;
}
.mawater-orbit::after { inset:105px; }

.mawater-stage .phone { z-index:3; }
.phone-main {
  left:17%;
  top:112px;
  transform:rotate(-8deg);
  width:210px;height:430px;
}
.phone-side {
  right:13%;
  top:150px;
  transform:rotate(8deg);
  width:195px;height:400px;
}
.mawater-screen {
  background:#f8f9f9;
  padding:15px;
}
.mw-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px; }
.mw-dot { width:12px;height:12px;border-radius:4px;background:#7B0D2E; }
.mw-brand { font-size:8px;letter-spacing:.15em;font-weight:800;color:#243033; }
.mw-menu { color:#879292;font-size:11px; }
.mw-hero {
  height:72px;border-radius:15px;
  background:linear-gradient(135deg,#7B0D2E,#4f081e);
}
.mw-tabs { display:flex;gap:6px;margin:12px 0; }
.mw-tabs i { display:block;height:18px;flex:1;border-radius:999px;background:#e3e8e7; }
.mw-tabs i:first-child { background:#7B0D2E; }
.mw-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.mw-grid i {
  height:118px;border-radius:12px;
  background:linear-gradient(180deg,#d9e1df 0 62%,#f1f4f3 62%);
  border:1px solid #e0e5e4;
}
.mawater-detail { padding:0;background:#f7f8f8;overflow:hidden; }
.mw-photo { height:145px;background:linear-gradient(145deg,#d2dcda,#adbdb9); }
.mw-price { height:11px;width:38%;border-radius:6px;background:#7B0D2E;margin:18px 15px 8px; }
.mw-title { height:9px;width:70%;border-radius:6px;background:#aab6b4;margin:0 15px 16px; }
.mw-specs { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 15px; }
.mw-specs i { height:38px;border-radius:9px;background:#e1e7e6; }
.mw-copylines { margin:16px 15px;height:78px;border-radius:8px;background:repeating-linear-gradient(#dfe6e4 0 7px,transparent 7px 16px); }

.project-badge {
  position:absolute;
  z-index:5;
  padding:9px 12px;border-radius:999px;
  background:rgba(247,249,248,.96);
  color:#153336;
  font-size:10px;font-weight:700;
  box-shadow:0 13px 35px rgba(0,0,0,.18);
}
.badge-a { left:8%;top:82px; }
.badge-b { right:7%;top:92px; }
.badge-c { right:12%;bottom:86px; }

.work-secondary {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.reveal {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--delay,0ms);
}
.reveal.is-visible { opacity:1;transform:none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
}

@media (max-width: 980px) {
  .hero-visual-v2 { min-height:560px; }
  .case-feature { grid-template-columns:1fr; }
  .case-copy { min-height:540px; }
  .mawater-stage { min-height:620px; }
}
@media (max-width: 700px) {
  .hero-brand-card { width:92%; border-radius:30px; }
  .hero-visual-v2 { min-height:470px; }
  .hero-mark-wrap { width:230px;height:230px; }
  .hero-logo { width:145px; }
  .halo-1 { width:205px;height:205px; }
  .halo-2 { width:275px;height:275px; }
  .note-a { left:0;top:90px; }
  .note-b { right:0;top:205px; }
  .note-c { left:8px;bottom:68px; }
  .case-copy { padding:30px; min-height:500px; }
  .mawater-stage { min-height:520px; }
  .mawater-orbit { width:350px;height:350px; }
  .phone-main { width:150px;height:320px;left:11%;top:92px; }
  .phone-side { width:142px;height:300px;right:8%;top:128px; }
  .mw-grid i { height:80px; }
  .mw-photo { height:108px; }
  .work-secondary { grid-template-columns:1fr; }
  .badge-a { left:4%;top:58px; }
  .badge-b { right:3%;top:65px; }
  .badge-c { right:5%;bottom:52px; }
}

/* ===== V2.1 hero visual refinement ===== */

.hero-visual-v21 {
  min-height: 540px;
}

.hero-showcase {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 1.06 / 1;
  border-radius: 36px;
  overflow: hidden;
  color: white;
  background:
    radial-gradient(circle at 70% 28%, rgba(42,183,169,.28), transparent 27%),
    linear-gradient(145deg, #153a3d 0%, #0d2b2e 52%, #081d20 100%);
  box-shadow: 0 34px 90px rgba(14,42,45,.23);
  transform-style: preserve-3d;
  transition: transform .2s ease-out;
  isolation: isolate;
}

.hero-showcase::before {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  right: -150px;
  top: -120px;
  background: radial-gradient(circle, rgba(42,183,169,.17), transparent 68%);
  z-index: 0;
}

.showcase-grid {
  position: absolute;
  inset: 0;
  opacity: .08;
  background-image:
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), transparent 92%);
}

.showcase-top {
  position: absolute;
  left: 28px;
  right: 28px;
  top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(255,255,255,.45);
  z-index: 4;
}

.showcase-center {
  position: absolute;
  inset: 70px 26px 88px;
}

.mark-stage {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 250px;
  height: 250px;
  transform: translate(-50%,-50%);
  display: grid;
  place-items: center;
  z-index: 2;
}

.mark-stage::before,
.mark-stage::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
}

.mark-stage::before {
  width: 250px;
  height: 250px;
}

.mark-stage::after {
  width: 184px;
  height: 184px;
}

.mark-glow {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(42,183,169,.22), rgba(42,183,169,0) 72%);
  filter: blur(10px);
}

.hero-logo-v21 {
  width: 220px;
  z-index: 3;
  filter: brightness(1.23) saturate(1.08) drop-shadow(0 18px 30px rgba(0,0,0,.22));
}

.product-layer {
  position: absolute;
  z-index: 5;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(247,249,248,.08);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  border-radius: 18px;
  padding: 14px 16px;
}

.layer-label {
  display: block;
  font-size: 8px;
  letter-spacing: .18em;
  color: #83dacf;
  margin-bottom: 7px;
}

.product-layer strong {
  display: block;
  font-size: 14px;
  line-height: 1.16;
  letter-spacing: -.02em;
}

.layer-a {
  left: 0;
  top: 18%;
  width: 132px;
  transform: rotate(-3deg);
}
.layer-a i {
  display: block;
  height: 3px;
  border-radius: 99px;
  background: rgba(255,255,255,.16);
  margin-top: 8px;
}
.layer-a i:nth-child(2) { width: 72%; }
.layer-a i:nth-child(3) { width: 53%; }

.layer-b {
  right: -2px;
  top: 29%;
  width: 145px;
  transform: rotate(3deg);
}
.mini-ui {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 11px;
}
.mini-ui i {
  display: block;
  height: 24px;
  border-radius: 6px;
  background: rgba(155,226,218,.14);
  border: 1px solid rgba(155,226,218,.10);
}

.layer-c {
  right: 11%;
  bottom: 0;
  width: 158px;
  transform: rotate(-2deg);
}
.layer-c small {
  display: block;
  margin-top: 9px;
  color: rgba(255,255,255,.45);
  font-size: 8px;
}

.showcase-bottom {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 22px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  z-index: 6;
}

.showcase-bottom strong {
  display: block;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.04em;
}

.showcase-chip {
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.72);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.note-v21-a {
  left: -24px;
  top: 115px;
}

.note-v21-b {
  right: -26px;
  top: 300px;
}

@media (max-width: 980px) {
  .hero-visual-v21 { min-height: 520px; }
  .hero-showcase { width: min(92%, 560px); }
}

@media (max-width: 700px) {
  .hero-visual-v21 { min-height: 440px; }
  .hero-showcase { width: 94%; border-radius: 28px; }
  .showcase-center { inset: 64px 18px 82px; }
  .mark-stage { width: 200px; height: 200px; }
  .mark-stage::before { width: 200px; height: 200px; }
  .mark-stage::after { width: 145px; height: 145px; }
  .hero-logo-v21 { width: 168px; }
  .product-layer { padding: 11px 12px; border-radius: 14px; }
  .layer-a { width: 110px; left: -4px; top: 18%; }
  .layer-b { width: 120px; right: -4px; top: 28%; }
  .layer-c { width: 132px; right: 8%; bottom: 0; }
  .product-layer strong { font-size: 12px; }
  .showcase-bottom strong { font-size: 17px; }
  .showcase-chip { display: none; }
  .note-v21-a { left: 0; top: 92px; }
  .note-v21-b { right: 0; top: 250px; }
}

/* ===== V2.2: calmer logo accent + subtle orbit motion ===== */

.hero-logo-v21 {
  /* Remove the previous brightness boost that made the teal read too cyan. */
  filter: saturate(.96) contrast(1.03) drop-shadow(0 18px 30px rgba(0,0,0,.22));
}

/* Give the two circular guides a very restrained breathing movement. */
.mark-stage::before {
  animation: mantaRingBreathA 8s ease-in-out infinite;
  transform-origin: 50% 50%;
}

.mark-stage::after {
  animation: mantaRingBreathB 10s ease-in-out infinite;
  transform-origin: 50% 50%;
}

/* Small orbiting points make the motion readable without turning it into an infographic. */
.orbit-runner {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

.orbit-runner-a {
  width: 250px;
  height: 250px;
  margin-left: -125px;
  margin-top: -125px;
  animation: mantaOrbitA 18s linear infinite;
}

.orbit-runner-b {
  width: 184px;
  height: 184px;
  margin-left: -92px;
  margin-top: -92px;
  animation: mantaOrbitB 14s linear infinite reverse;
}

.orbit-runner i {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: #7FCBC3;
  box-shadow:
    0 0 0 5px rgba(127,203,195,.055),
    0 0 15px rgba(127,203,195,.22);
}

.orbit-runner-a i {
  width: 7px;
  height: 7px;
  left: 18px;
  top: 54px;
}

.orbit-runner-b i {
  width: 5px;
  height: 5px;
  right: 12px;
  bottom: 42px;
  opacity: .75;
}

@keyframes mantaRingBreathA {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.025); opacity: .72; }
}

@keyframes mantaRingBreathB {
  0%, 100% { transform: scale(1); opacity: .88; }
  50% { transform: scale(.975); opacity: .58; }
}

@keyframes mantaOrbitA {
  to { transform: rotate(360deg); }
}

@keyframes mantaOrbitB {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mark-stage::before,
  .mark-stage::after,
  .orbit-runner-a,
  .orbit-runner-b {
    animation: none !important;
  }
}

/* ===== V2.4: no M in hero; editorial core composition ===== */

.brand-wordmark-mark {
  background: #0E2A2D;
  color: #9BE2DA;
  box-shadow: none;
  font-size: 0;
}

.brand-wordmark-mark span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -.05em;
}

.mark-stage-v24 {
  width: 290px;
  height: 290px;
}

.mark-stage-v24::before {
  width: 290px;
  height: 290px;
}

.mark-stage-v24::after {
  width: 210px;
  height: 210px;
}

.mark-stage-v24 .orbit-runner-a {
  width: 290px;
  height: 290px;
  margin-left: -145px;
  margin-top: -145px;
}

.mark-stage-v24 .orbit-runner-b {
  width: 210px;
  height: 210px;
  margin-left: -105px;
  margin-top: -105px;
}

.core-composition {
  position: relative;
  z-index: 3;
  width: 190px;
  height: 190px;
  border-radius: 42px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.018)),
    rgba(7,27,29,.52);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 24px 55px rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
  transform: rotate(-2deg);
}

.core-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(155,226,218,.12);
}

.core-ring-a {
  width: 128px;
  height: 128px;
}

.core-ring-b {
  width: 86px;
  height: 86px;
}

.core-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7FCBC3;
  box-shadow: 0 0 0 6px rgba(127,203,195,.045);
}

.core-dot-a {
  top: 35px;
  right: 42px;
}

.core-dot-b {
  left: 34px;
  bottom: 42px;
  width: 5px;
  height: 5px;
  opacity: .72;
}

.core-label {
  position: relative;
  z-index: 2;
  text-align: left;
  width: 112px;
}

.core-label small {
  display: block;
  margin-bottom: 8px;
  font-size: 7px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: rgba(255,255,255,.42);
}

.core-label strong {
  display: block;
  font-size: 25px;
  line-height: .94;
  letter-spacing: -.055em;
  color: #F7F9F8;
}

.core-label em {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  color: #65C7BD;
}

@media (max-width: 700px) {
  .mark-stage-v24 {
    width: 230px;
    height: 230px;
  }

  .mark-stage-v24::before {
    width: 230px;
    height: 230px;
  }

  .mark-stage-v24::after {
    width: 170px;
    height: 170px;
  }

  .mark-stage-v24 .orbit-runner-a {
    width: 230px;
    height: 230px;
    margin-left: -115px;
    margin-top: -115px;
  }

  .mark-stage-v24 .orbit-runner-b {
    width: 170px;
    height: 170px;
    margin-left: -85px;
    margin-top: -85px;
  }

  .core-composition {
    width: 155px;
    height: 155px;
    border-radius: 34px;
  }

  .core-label {
    width: 94px;
  }

  .core-label strong {
    font-size: 21px;
  }

  .core-ring-a {
    width: 108px;
    height: 108px;
  }

  .core-ring-b {
    width: 70px;
    height: 70px;
  }
}

/* ===== V3: unified full-width hero banner ===== */
.hero-v3{padding:34px 0 46px;min-height:auto;position:relative}
.hero-banner{position:relative;min-height:720px;border-radius:38px;overflow:hidden;padding:34px 42px 28px;color:#F7F9F8;background:radial-gradient(circle at 78% 24%,rgba(42,183,169,.20),transparent 28%),radial-gradient(circle at 18% 84%,rgba(42,183,169,.10),transparent 25%),linear-gradient(135deg,#12383B 0%,#0D2A2D 54%,#081D20 100%);box-shadow:0 34px 90px rgba(14,42,45,.18);isolation:isolate}
.hero-banner-grid{position:absolute;inset:0;opacity:.055;background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 90%);z-index:0}
.hero-banner-glow{position:absolute;border-radius:50%;filter:blur(8px);pointer-events:none;z-index:0}
.glow-left{width:460px;height:460px;left:-180px;bottom:-240px;background:radial-gradient(circle,rgba(42,183,169,.12),transparent 70%)}
.glow-right{width:560px;height:560px;right:-180px;top:-180px;background:radial-gradient(circle,rgba(42,183,169,.18),transparent 70%)}
.hero-banner-top,.hero-banner-bottom,.hero-banner-content{position:relative;z-index:2}
.hero-banner-top{display:flex;align-items:center;justify-content:space-between;gap:24px}
.hero-eyebrow{color:#8ED9D0}
.hero-top-note{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.38)}
.hero-banner-content{min-height:585px;display:grid;grid-template-columns:1.03fr .97fr;gap:20px;align-items:center}
.hero-banner-copy{padding:52px 0 30px 12px;max-width:690px}
.hero-banner-copy h1{margin:0 0 26px;font-size:clamp(72px,8.5vw,128px);line-height:.86;letter-spacing:-.075em;font-weight:600}
.hero-banner-copy h1 span{display:inline-block;font-family:"Playfair Display",serif;font-style:italic;color:#65C7BD;font-weight:600}
.hero-banner-copy p{max-width:650px;margin:0;font-size:18px;line-height:1.7;color:rgba(255,255,255,.65)}
.hero-btn-primary{background:#F7F9F8;color:#0E2A2D}
.hero-btn-ghost{border:1px solid rgba(255,255,255,.16);color:#F7F9F8;background:rgba(255,255,255,.055)}
.hero-btn-ghost:hover{background:rgba(255,255,255,.09)}
.hero-proof{display:flex;gap:34px;margin-top:46px;padding-top:20px;border-top:1px solid rgba(255,255,255,.10);max-width:650px}
.hero-proof div{display:grid;gap:2px}.hero-proof strong{font-size:12px;color:#F7F9F8}.hero-proof span{font-size:11px;color:rgba(255,255,255,.38)}
.hero-scene{position:relative;min-height:530px;transform-style:preserve-3d;transition:transform .22s ease-out}
.hero-orbit{position:absolute;left:55%;top:48%;border-radius:50%;border:1px solid rgba(155,226,218,.11);transform:translate(-50%,-50%);animation:heroOrbitBreath 9s ease-in-out infinite}
.orbit-one{width:390px;height:390px}.orbit-two{width:285px;height:285px;animation-delay:-2s}.orbit-three{width:190px;height:190px;animation-delay:-4s}
.hero-scene .orbit-runner-a{width:390px;height:390px;margin-left:-195px;margin-top:-195px;left:55%;top:48%}
.hero-scene .orbit-runner-b{width:285px;height:285px;margin-left:-142.5px;margin-top:-142.5px;left:55%;top:48%}
.hero-core-card{position:absolute;left:55%;top:48%;transform:translate(-50%,-50%) rotate(-2deg);width:210px;min-height:190px;padding:26px;border-radius:34px;display:flex;flex-direction:column;justify-content:center;border:1px solid rgba(255,255,255,.11);background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),rgba(7,27,29,.58);backdrop-filter:blur(18px);box-shadow:0 26px 60px rgba(0,0,0,.22);z-index:4}
.hero-core-card small{font-size:8px;text-transform:uppercase;letter-spacing:.17em;color:#72CFC5;margin-bottom:14px}
.hero-core-card strong{font-size:30px;line-height:.96;letter-spacing:-.055em}
.hero-core-card span{margin-top:18px;font-size:9px;color:rgba(255,255,255,.40);text-transform:uppercase;letter-spacing:.11em}
.hero-scene .product-layer{z-index:5}.hero-scene .layer-a{left:5%;top:22%;width:142px}.hero-scene .layer-b{right:1%;top:24%;width:154px}.hero-scene .layer-c{right:8%;bottom:9%;width:164px}
.hero-pill{position:absolute;z-index:7;padding:11px 15px;border-radius:999px;background:#F7F9F8;color:#153336;font-size:11px;font-weight:700;box-shadow:0 14px 34px rgba(0,0,0,.15)}
.hero-pill-a{left:0;top:18%}.hero-pill-b{right:-2%;top:54%}
.hero-banner-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.10);font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:rgba(255,255,255,.38)}
@keyframes heroOrbitBreath{0%,100%{opacity:.72;transform:translate(-50%,-50%) scale(1)}50%{opacity:.42;transform:translate(-50%,-50%) scale(1.022)}}
@media (max-width:980px){.hero-banner{min-height:auto;padding:28px 28px 24px}.hero-banner-content{grid-template-columns:1fr;min-height:auto}.hero-banner-copy{padding-top:48px;max-width:800px}.hero-scene{min-height:500px}.hero-banner-top{align-items:flex-start}}
@media (max-width:700px){.hero-v3{padding-top:18px}.hero-banner{border-radius:28px;padding:22px 20px 20px}.hero-top-note{display:none}.hero-banner-copy{padding:36px 0 8px}.hero-banner-copy h1{font-size:clamp(60px,19vw,84px)}.hero-banner-copy p{font-size:15px}.hero-proof{gap:12px;display:grid;grid-template-columns:repeat(3,1fr)}.hero-scene{min-height:420px}.orbit-one{width:310px;height:310px}.orbit-two{width:225px;height:225px}.orbit-three{width:150px;height:150px}.hero-scene .orbit-runner-a{width:310px;height:310px;margin-left:-155px;margin-top:-155px}.hero-scene .orbit-runner-b{width:225px;height:225px;margin-left:-112.5px;margin-top:-112.5px}.hero-core-card{width:172px;min-height:160px;padding:22px;border-radius:28px}.hero-core-card strong{font-size:25px}.hero-scene .layer-a{width:112px;left:-3%;top:22%}.hero-scene .layer-b{width:120px;right:-2%;top:26%}.hero-scene .layer-c{width:132px;right:4%;bottom:7%}.hero-pill{font-size:9px;padding:9px 11px}.hero-pill-a{left:-1%;top:13%}.hero-pill-b{right:-2%;top:57%}.hero-banner-bottom{font-size:8px}}

/* ===== V3.1: full-width hero without outer padding ===== */
.hero-v3 {
  padding: 0 0 46px;
}

.hero-v3 > .container {
  width: 100%;
  max-width: none;
  margin: 0;
}

.hero-banner {
  border-radius: 0;
  min-height: 760px;
  padding-left: 56px;
  padding-right: 56px;
}

@media (max-width: 980px) {
  .hero-v3 {
    padding: 0 0 36px;
  }

  .hero-banner {
    padding-left: 28px;
    padding-right: 28px;
    min-height: auto;
  }
}

@media (max-width: 700px) {
  .hero-v3 {
    padding: 0 0 28px;
  }

  .hero-banner {
    border-radius: 0;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ===== V3.2: tighter hero, removed bottom strip ===== */
.hero-banner {
  min-height: 680px;
  padding-bottom: 22px;
}

.hero-banner-content {
  min-height: 535px;
}

.hero-banner-bottom {
  display: none !important;
}

@media (max-width: 980px) {
  .hero-banner {
    min-height: auto;
  }

  .hero-banner-content {
    min-height: auto;
  }
}

/* ===== V3.3: elegant hero motion system ===== */

/* Initial entrance states */
.hero-title-main,
.hero-title-accent,
.hero-copy-animated,
.hero-actions-animated,
.hero-proof-animated > div {
  opacity: 0;
  transform: translateY(18px);
}

/* Triggered after first paint by JS */
.hero-motion-ready .hero-title-main {
  animation: heroTextIn .82s cubic-bezier(.22,.75,.2,1) .08s forwards;
}

.hero-motion-ready .hero-title-accent {
  animation:
    heroTextIn .92s cubic-bezier(.22,.75,.2,1) .22s forwards,
    heroAccentGlow 1.6s ease-out 1.05s 1;
}

.hero-motion-ready .hero-copy-animated {
  animation: heroTextIn .78s cubic-bezier(.22,.75,.2,1) .38s forwards;
}

.hero-motion-ready .hero-actions-animated {
  opacity: 0;
  transform: translateY(14px);
  animation: heroTextIn .72s cubic-bezier(.22,.75,.2,1) .52s forwards;
}

.hero-motion-ready .hero-proof-animated > div:nth-child(1) {
  animation: heroTextIn .68s cubic-bezier(.22,.75,.2,1) .68s forwards;
}
.hero-motion-ready .hero-proof-animated > div:nth-child(2) {
  animation: heroTextIn .68s cubic-bezier(.22,.75,.2,1) .77s forwards;
}
.hero-motion-ready .hero-proof-animated > div:nth-child(3) {
  animation: heroTextIn .68s cubic-bezier(.22,.75,.2,1) .86s forwards;
}

/* Product cards: slow, low-amplitude movement */
.hero-scene .layer-a {
  animation: elegantFloatA 7.8s ease-in-out infinite;
}
.hero-scene .layer-b {
  animation: elegantFloatB 8.6s ease-in-out infinite;
}
.hero-scene .layer-c {
  animation: elegantFloatC 9.4s ease-in-out infinite;
}

/* Main lifecycle card breathes very subtly */
.hero-core-card {
  animation: elegantCoreBreath 8.8s ease-in-out infinite;
}

/* Pills float on a much smaller range than the cards */
.hero-pill-a {
  animation: elegantPillA 7.2s ease-in-out infinite;
}
.hero-pill-b {
  animation: elegantPillB 8s ease-in-out infinite;
}

/* Buttons feel alive on interaction, not constantly animated */
.hero-actions-animated .btn {
  transition:
    transform .28s cubic-bezier(.2,.7,.2,1),
    box-shadow .28s ease,
    background .28s ease,
    border-color .28s ease;
}
.hero-actions-animated .btn:hover {
  transform: translateY(-3px);
}

/* Very restrained one-time highlight for the editorial word */
.hero-title-accent {
  position: relative;
  text-shadow: 0 0 0 rgba(101,199,189,0);
}

@keyframes heroTextIn {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroAccentGlow {
  0%   { text-shadow: 0 0 0 rgba(101,199,189,0); }
  45%  { text-shadow: 0 0 24px rgba(101,199,189,.14); }
  100% { text-shadow: 0 0 0 rgba(101,199,189,0); }
}

@keyframes elegantFloatA {
  0%,100% { transform: rotate(-3deg) translate3d(0,0,0); }
  50%     { transform: rotate(-2.2deg) translate3d(0,-8px,0); }
}

@keyframes elegantFloatB {
  0%,100% { transform: rotate(3deg) translate3d(0,0,0); }
  50%     { transform: rotate(2.2deg) translate3d(5px,-6px,0); }
}

@keyframes elegantFloatC {
  0%,100% { transform: rotate(-2deg) translate3d(0,0,0); }
  50%     { transform: rotate(-1.3deg) translate3d(-4px,-7px,0); }
}

@keyframes elegantCoreBreath {
  0%,100% {
    transform: translate(-50%,-50%) rotate(-2deg) scale(1);
    box-shadow: 0 26px 60px rgba(0,0,0,.22);
  }
  50% {
    transform: translate(-50%,-50%) rotate(-1.6deg) scale(1.012);
    box-shadow: 0 30px 70px rgba(0,0,0,.25);
  }
}

@keyframes elegantPillA {
  0%,100% { transform: translate3d(0,0,0); }
  50%     { transform: translate3d(0,-4px,0); }
}

@keyframes elegantPillB {
  0%,100% { transform: translate3d(0,0,0); }
  50%     { transform: translate3d(3px,-3px,0); }
}

/* Protect the formal look on mobile: lower motion amplitude */
@media (max-width: 700px) {
  @keyframes elegantFloatA {
    0%,100% { transform: rotate(-3deg) translate3d(0,0,0); }
    50%     { transform: rotate(-2.5deg) translate3d(0,-4px,0); }
  }
  @keyframes elegantFloatB {
    0%,100% { transform: rotate(3deg) translate3d(0,0,0); }
    50%     { transform: rotate(2.5deg) translate3d(2px,-3px,0); }
  }
  @keyframes elegantFloatC {
    0%,100% { transform: rotate(-2deg) translate3d(0,0,0); }
    50%     { transform: rotate(-1.6deg) translate3d(-2px,-4px,0); }
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .hero-title-main,
  .hero-title-accent,
  .hero-copy-animated,
  .hero-actions-animated,
  .hero-proof-animated > div {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .hero-scene .layer-a,
  .hero-scene .layer-b,
  .hero-scene .layer-c,
  .hero-core-card,
  .hero-pill-a,
  .hero-pill-b {
    animation: none !important;
  }
}

/* ===== V3.4: headline color refinement ===== */
.hero-title-main {
  color: #F7F9F8 !important;
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

.hero-title-accent {
  color: #65C7BD !important;
  font-family: "Playfair Display", serif !important;
  font-style: italic !important;
  font-weight: 600 !important;
}

/* ===== V3.5: Concept B monogram in header/footer ===== */
.brand-concept-mark {
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.brand-concept-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.footer-brand .brand-concept-mark {
  background: transparent;
}

@media (max-width: 640px) {
  .brand-concept-mark {
    width: 40px;
    height: 40px;
  }
}

/* ===== V3.6: slower, more varied hero entrance timing ===== */

/* Main headline stays relatively crisp */
.hero-motion-ready .hero-title-main {
  animation: heroTextIn .95s cubic-bezier(.22,.75,.2,1) .10s forwards;
}

/* Accent word enters slower so the motion is more noticeable */
.hero-motion-ready .hero-title-accent {
  animation:
    heroTextIn 1.35s cubic-bezier(.22,.75,.2,1) .32s forwards,
    heroAccentGlow 2.2s ease-out 1.45s 1;
}

/* Copy is intentionally calmer/slower */
.hero-motion-ready .hero-copy-animated {
  animation: heroTextIn 1.15s cubic-bezier(.22,.75,.2,1) .62s forwards;
}

/* CTA group comes in after the copy */
.hero-motion-ready .hero-actions-animated {
  animation: heroTextIn .90s cubic-bezier(.22,.75,.2,1) 1.02s forwards;
}

/* Bottom proof items use a more visible stagger */
.hero-motion-ready .hero-proof-animated > div:nth-child(1) {
  animation: heroTextIn .85s cubic-bezier(.22,.75,.2,1) 1.28s forwards;
}
.hero-motion-ready .hero-proof-animated > div:nth-child(2) {
  animation: heroTextIn .95s cubic-bezier(.22,.75,.2,1) 1.48s forwards;
}
.hero-motion-ready .hero-proof-animated > div:nth-child(3) {
  animation: heroTextIn 1.05s cubic-bezier(.22,.75,.2,1) 1.70s forwards;
}

/* Slightly soften the starting movement so slower timing remains elegant */
.hero-title-main,
.hero-title-accent,
.hero-copy-animated,
.hero-actions-animated,
.hero-proof-animated > div {
  transform: translateY(22px);
}

/* ===== V3.7: What makes us different ===== */

.statement-v2 {
  padding: 88px 0 96px;
  background:
    linear-gradient(180deg, #F7F9F8 0%, #F3F7F6 100%);
}

.statement-v2 .statement-top {
  display: grid;
  grid-template-columns: .58fr 1.42fr;
  gap: 64px;
  align-items: start;
  padding-top: 0;
  border-top: 0;
}

.statement-v2 .section-kicker {
  position: relative;
  margin: 12px 0 0;
  padding-left: 45px;
}

.statement-v2 .section-kicker::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 28px;
  height: 1px;
  background: var(--accent);
}

.statement-title-wrap {
  display: grid;
  grid-template-columns: 1.28fr .72fr;
  gap: 48px;
  align-items: end;
}

.statement-v2 h2 {
  max-width: 700px;
}

.statement-copy {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
  max-width: 380px;
}

.journey-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 60px;
  padding: 34px 0 8px;
  border-top: 1px solid var(--line);
}

.journey-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 33px;
  height: 1px;
  background: rgba(14,42,45,.10);
  overflow: hidden;
}

.journey-progress {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--deep), var(--accent));
}

.reveal.is-visible .journey-progress {
  animation: journeyLineGrow 2.1s cubic-bezier(.2,.7,.2,1) .18s forwards;
}

.journey-step {
  position: relative;
  padding: 24px 28px 0 0;
}

.journey-step::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  top: -5px;
  left: 0;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid rgba(14,42,45,.28);
  box-shadow: 0 0 0 5px rgba(14,42,45,.035);
  transition: background .35s ease, border-color .35s ease, transform .35s ease;
}

.journey-step:hover::before {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.18);
}

.journey-no {
  display: block;
  margin-bottom: 10px;
  font-size: 9px;
  letter-spacing: .16em;
  color: var(--accent);
}

.journey-step strong {
  display: block;
  margin-bottom: 3px;
  font-size: 16px;
  letter-spacing: -.025em;
}

.journey-step small {
  display: block;
  max-width: 145px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.statement-note {
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: 100%;
  margin-top: 34px;
  padding: 11px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  border: 1px solid var(--line);
}

.statement-note-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(42,183,169,.08);
  flex: 0 0 auto;
}

.statement-note p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.statement-note strong {
  color: var(--ink);
}

@keyframes journeyLineGrow {
  from { width: 0; }
  to { width: 100%; }
}

@media (max-width: 980px) {
  .statement-v2 {
    padding: 72px 0 78px;
  }

  .statement-v2 .statement-top,
  .statement-title-wrap {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .statement-v2 .section-kicker {
    margin-top: 0;
  }

  .statement-copy {
    max-width: 620px;
  }

  .journey-rail {
    grid-template-columns: repeat(5, minmax(120px,1fr));
    overflow-x: auto;
    padding-bottom: 16px;
  }

  .journey-line {
    min-width: 700px;
  }
}

@media (max-width: 700px) {
  .statement-v2 {
    padding: 62px 0 66px;
  }

  .statement-title-wrap {
    gap: 18px;
  }

  .journey-rail {
    margin-top: 42px;
  }

  .statement-note {
    align-items: flex-start;
    border-radius: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-progress {
    width: 100% !important;
    animation: none !important;
  }
}

/* ===== V3.8: compact statement section, remove extra divider ===== */

.statement-v2 {
  padding: 66px 0 70px;
}

.statement-v2 .statement-top {
  gap: 46px;
}

.statement-title-wrap {
  gap: 34px;
}

.statement-v2 .section-kicker {
  margin-top: 8px;
}

/* Remove the unnecessary divider above the steps */
.journey-rail {
  margin-top: 38px;
  padding: 22px 0 4px;
  border-top: 0;
}

/* Keep only the actual journey line */
.journey-line {
  top: 21px;
}

.journey-step {
  padding-top: 20px;
}

.journey-step::before {
  top: -5px;
}

.statement-note {
  margin-top: 22px;
}

/* Slightly tighten the title block */
.statement-v2 h2 {
  max-width: 660px;
}

.statement-copy {
  max-width: 350px;
  line-height: 1.68;
}

@media (max-width: 980px) {
  .statement-v2 {
    padding: 58px 0 62px;
  }

  .journey-rail {
    margin-top: 32px;
  }
}

@media (max-width: 700px) {
  .statement-v2 {
    padding: 52px 0 56px;
  }

  .journey-rail {
    margin-top: 28px;
  }

  .statement-note {
    margin-top: 18px;
  }
}

/* ===== V3.9: structural compaction for statement section ===== */

.statement-v3 {
  padding: 52px 0 54px;
  background: linear-gradient(180deg, #F7F9F8 0%, #F4F7F6 100%);
}

.statement-v3 .statement-head {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 56px;
  align-items: end;
}

.statement-v3 .statement-main {
  max-width: 760px;
}

.statement-v3 .section-kicker {
  margin: 0 0 14px;
  padding-left: 42px;
  position: relative;
}

.statement-v3 .section-kicker::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 26px;
  height: 1px;
  background: var(--accent);
}

.statement-v3 h2 {
  margin: 0;
  max-width: 720px;
  font-size: clamp(42px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -.05em;
}

.statement-v3 .statement-copy {
  margin: 0 0 4px;
  max-width: 360px;
  font-size: 14px;
  line-height: 1.68;
  color: var(--muted);
}

.statement-v3 .journey-rail {
  margin-top: 30px;
  padding: 18px 0 0;
  border-top: 0;
}

.statement-v3 .journey-line {
  top: 17px;
}

.statement-v3 .journey-step {
  padding-top: 18px;
}

.statement-v3 .statement-note {
  margin-top: 18px;
}

@media (max-width: 980px) {
  .statement-v3 {
    padding: 46px 0 50px;
  }

  .statement-v3 .statement-head {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .statement-v3 .statement-copy {
    max-width: 620px;
  }

  .statement-v3 .journey-rail {
    margin-top: 26px;
  }
}

@media (max-width: 700px) {
  .statement-v3 {
    padding: 42px 0 44px;
  }

  .statement-v3 h2 {
    font-size: clamp(36px, 11vw, 50px);
  }

  .statement-v3 .journey-rail {
    margin-top: 22px;
  }

  .statement-v3 .statement-note {
    margin-top: 14px;
  }
}

/* ===== V3.10: subtle moving background dots in statement section ===== */

.statement-v3 {
  position: relative;
  overflow: hidden;
}

.statement-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.statement-v3 > .container {
  position: relative;
  z-index: 1;
}

.statement-particle {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: rgba(42, 183, 169, .58);
  box-shadow:
    0 0 0 8px rgba(42, 183, 169, .05),
    0 0 18px rgba(42, 183, 169, .12);
  opacity: .45;
}

.particle-1 {
  width: 7px;
  height: 7px;
  left: 10%;
  top: 20%;
  animation: statementDotFloatA 11s ease-in-out infinite;
}

.particle-2 {
  width: 5px;
  height: 5px;
  right: 16%;
  top: 24%;
  opacity: .35;
  animation: statementDotFloatB 13s ease-in-out infinite;
}

.particle-3 {
  width: 8px;
  height: 8px;
  left: 72%;
  bottom: 22%;
  opacity: .28;
  animation: statementDotFloatC 15s ease-in-out infinite;
}

.particle-4 {
  width: 4px;
  height: 4px;
  left: 33%;
  bottom: 18%;
  opacity: .32;
  animation: statementDotFloatD 12.5s ease-in-out infinite;
}

@keyframes statementDotFloatA {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(10px, -14px, 0); }
}

@keyframes statementDotFloatB {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-12px, 9px, 0); }
}

@keyframes statementDotFloatC {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(8px, -10px, 0); }
}

@keyframes statementDotFloatD {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-7px, -9px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .statement-particle {
    animation: none !important;
  }
}

/* ===== V3.11: remove hero gap + subtle orbital motion in statement ===== */

/* Remove the gray/empty strip under the full-width hero */
.hero-v3 {
  padding-bottom: 0 !important;
}

/* Keep statement attached cleanly to the hero */
.statement-v3 {
  margin-top: 0;
}

/* Replace weak floating-dot treatment with quiet orbital geometry */
.statement-orbit {
  position: absolute;
  display: block;
  border-radius: 50%;
  border: 1px solid rgba(42, 183, 169, .085);
  pointer-events: none;
}

.statement-orbit-a {
  width: 420px;
  height: 420px;
  right: 8%;
  top: -165px;
}

.statement-orbit-b {
  width: 280px;
  height: 280px;
  left: 4%;
  bottom: -145px;
  border-color: rgba(14, 42, 45, .055);
}

/* Moving points travelling around those soft circular paths */
.statement-orbit-runner {
  position: absolute;
  display: block;
  border-radius: 50%;
  pointer-events: none;
}

.statement-orbit-runner i {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: rgba(42, 183, 169, .72);
  box-shadow:
    0 0 0 6px rgba(42, 183, 169, .055),
    0 0 16px rgba(42, 183, 169, .16);
}

.runner-a {
  width: 420px;
  height: 420px;
  right: 8%;
  top: -165px;
  animation: statementOrbitSpinA 22s linear infinite;
}

.runner-a i {
  width: 7px;
  height: 7px;
  top: 61px;
  left: 56px;
}

.runner-b {
  width: 280px;
  height: 280px;
  left: 4%;
  bottom: -145px;
  animation: statementOrbitSpinB 18s linear infinite reverse;
}

.runner-b i {
  width: 6px;
  height: 6px;
  right: 30px;
  top: 64px;
  opacity: .68;
}

.runner-c {
  width: 330px;
  height: 330px;
  right: 28%;
  bottom: -210px;
  animation: statementOrbitSpinC 26s linear infinite;
}

.runner-c i {
  width: 5px;
  height: 5px;
  left: 20px;
  top: 95px;
  opacity: .52;
}

/* Keep two free particles, but make them a bit more visible */
.statement-v3 .particle-1 {
  width: 6px;
  height: 6px;
  left: 17%;
  top: 30%;
  opacity: .34;
  animation: statementDotFloatA 13s ease-in-out infinite;
}

.statement-v3 .particle-2 {
  width: 5px;
  height: 5px;
  right: 19%;
  top: 38%;
  opacity: .28;
  animation: statementDotFloatB 15s ease-in-out infinite;
}

@keyframes statementOrbitSpinA {
  to { transform: rotate(360deg); }
}

@keyframes statementOrbitSpinB {
  to { transform: rotate(360deg); }
}

@keyframes statementOrbitSpinC {
  to { transform: rotate(360deg); }
}

@media (max-width: 980px) {
  .statement-orbit-a,
  .runner-a {
    right: -120px;
  }

  .statement-orbit-b,
  .runner-b {
    left: -120px;
  }
}

@media (max-width: 700px) {
  .statement-orbit-a,
  .runner-a {
    width: 300px;
    height: 300px;
    top: -110px;
    right: -130px;
  }

  .statement-orbit-b,
  .runner-b {
    width: 220px;
    height: 220px;
    left: -110px;
    bottom: -120px;
  }

  .runner-c {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .statement-orbit-runner,
  .statement-particle {
    animation: none !important;
  }
}

/* ===== V3.12: Services + Maintenance & Consulting spotlights ===== */

.services-v2 .section-head {
  margin-bottom: 42px;
}

.service-spotlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}

.service-spotlight {
  position: relative;
  overflow: hidden;
  min-height: 285px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  padding: 26px 28px;
  background: rgba(255,255,255,.72);
  transition:
    transform .3s cubic-bezier(.2,.7,.2,1),
    box-shadow .3s ease,
    border-color .3s ease;
}

.service-spotlight::before {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  right: -90px;
  top: -115px;
  pointer-events: none;
}

.maintenance-spotlight::before {
  background: radial-gradient(circle, rgba(42,183,169,.14), transparent 68%);
}

.consulting-spotlight::before {
  background: radial-gradient(circle, rgba(14,42,45,.10), transparent 68%);
}

.service-spotlight:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(14,42,45,.10);
  border-color: rgba(42,183,169,.26);
}

.spotlight-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.spotlight-no {
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--accent);
}

.spotlight-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
}

.spotlight-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 32px;
  padding-top: 25px;
}

.service-spotlight h3 {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.045em;
}

.service-spotlight p {
  margin: 0;
  max-width: 440px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.service-spotlight ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-spotlight li {
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.service-spotlight li:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Slightly differentiate the two spotlights without making them loud */
.maintenance-spotlight {
  background:
    linear-gradient(145deg, rgba(42,183,169,.045), rgba(255,255,255,.78));
}

.consulting-spotlight {
  background:
    linear-gradient(145deg, rgba(14,42,45,.035), rgba(255,255,255,.78));
}

@media (max-width: 980px) {
  .service-spotlights {
    grid-template-columns: 1fr;
  }

  .service-spotlight {
    min-height: auto;
  }
}

@media (max-width: 700px) {
  .service-spotlight {
    padding: 22px;
  }

  .spotlight-body {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .service-spotlight h3 {
    font-size: 27px;
  }
}

/* ===== V3.13: Featured Work / real portfolio structure ===== */

.work-v2 {
  padding-top: 96px;
  padding-bottom: 96px;
}

.case-study-card {
  display: grid;
  grid-template-columns: .84fr 1.16fr;
  min-height: 650px;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.08);
  background: #0D2A2D;
}

.case-study-copy {
  padding: 42px 42px 38px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  background:
    radial-gradient(circle at 18% 15%, rgba(123,13,46,.12), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.025), rgba(255,255,255,0));
}

.case-study-topline {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(255,255,255,.38);
}

.case-study-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-top: 36px;
}

.case-type {
  display: block;
  margin-bottom: 8px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: #75D0C6;
}

.case-study-heading h3 {
  margin: 0;
  font-size: clamp(54px, 5.8vw, 82px);
  line-height: .9;
  letter-spacing: -.07em;
}

.case-status {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: rgba(255,255,255,.54);
  white-space: nowrap;
}

.case-study-lead {
  margin: 24px 0 28px;
  max-width: 520px;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,.66);
}

.case-study-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
}

.case-study-meta div {
  padding: 13px 14px;
  background: rgba(9,29,32,.92);
}

.case-study-meta span {
  display: block;
  margin-bottom: 4px;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.33);
}

.case-study-meta strong {
  font-size: 12px;
  font-weight: 600;
}

.case-study-features {
  margin-top: 28px;
}

.case-study-features > div {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

.case-study-features span {
  font-size: 9px;
  color: #65C7BD;
}

.case-study-features p {
  margin: 0;
  color: rgba(255,255,255,.48);
  font-size: 11px;
  line-height: 1.55;
}

.case-study-cta {
  width: max-content;
  margin-top: auto;
  padding-top: 26px;
  border-bottom: 1px solid rgba(255,255,255,.3);
  font-size: 11px;
  font-weight: 700;
}

.case-study-visual {
  position: relative;
  overflow: hidden;
  min-height: 650px;
  background:
    radial-gradient(circle at 54% 40%, rgba(123,13,46,.16), transparent 24%),
    radial-gradient(circle at 76% 18%, rgba(42,183,169,.16), transparent 24%),
    linear-gradient(145deg, #164246, #0B292C);
}

.case-visual-grid {
  position: absolute;
  inset: 0;
  opacity: .045;
  background-image:
    linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 44px 44px;
}

.case-orbit {
  position: absolute;
  left: 52%;
  top: 48%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.07);
  transform: translate(-50%,-50%);
}

.case-orbit-a { width: 470px; height: 470px; }
.case-orbit-b { width: 330px; height: 330px; }

.maw-phone {
  position: absolute;
  z-index: 3;
  border-radius: 34px;
  background: #081719;
  padding: 8px;
  box-shadow: 0 28px 55px rgba(0,0,0,.32);
}

.maw-phone-a {
  width: 205px;
  height: 425px;
  left: 17%;
  top: 118px;
  transform: rotate(-8deg);
}

.maw-phone-b {
  width: 188px;
  height: 392px;
  right: 15%;
  top: 150px;
  transform: rotate(8deg);
}

.maw-screen {
  height: 100%;
  border-radius: 27px;
  background: #F7F9F8;
  overflow: hidden;
  padding: 15px;
}

.maw-appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  color: #243033;
  font-size: 7px;
  letter-spacing: .1em;
}

.maw-logo-dot {
  width: 11px;
  height: 11px;
  border-radius: 4px;
  background: #7B0D2E;
}

.maw-banner {
  height: 68px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7B0D2E, #4D081D);
}

.maw-tabs {
  display: flex;
  gap: 5px;
  margin: 11px 0;
}

.maw-tabs i {
  height: 15px;
  flex: 1;
  border-radius: 999px;
  background: #E1E7E6;
}

.maw-tabs i:first-child { background: #7B0D2E; }

.maw-listing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.maw-listing-grid i {
  height: 108px;
  border-radius: 11px;
  background: linear-gradient(180deg, #D6DFDD 0 62%, #F0F3F2 62%);
  border: 1px solid #DFE5E4;
}

.maw-detail-photo {
  height: 135px;
  margin: -15px -15px 17px;
  background: linear-gradient(145deg, #CFD8D6, #A8B8B5);
}

.maw-detail-price {
  height: 10px;
  width: 38%;
  border-radius: 7px;
  background: #7B0D2E;
  margin-bottom: 8px;
}

.maw-detail-title {
  height: 8px;
  width: 72%;
  border-radius: 6px;
  background: #AAB6B4;
  margin-bottom: 15px;
}

.maw-detail-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.maw-detail-specs i {
  height: 36px;
  border-radius: 8px;
  background: #E0E6E5;
}

.maw-detail-copy {
  height: 76px;
  margin-top: 15px;
  border-radius: 8px;
  background: repeating-linear-gradient(#DDE4E2 0 6px, transparent 6px 15px);
}

.case-float-tag {
  position: absolute;
  z-index: 5;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(247,249,248,.96);
  color: #153336;
  font-size: 9px;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
}

.tag-a { left: 7%; top: 72px; }
.tag-b { right: 7%; top: 82px; }
.tag-c { right: 12%; bottom: 72px; }

.portfolio-previews {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}

.portfolio-preview {
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background: #123336;
  transition: transform .28s ease, border-color .28s ease;
}

.portfolio-preview:hover {
  transform: translateY(-5px);
  border-color: rgba(42,183,169,.24);
}

.preview-visual {
  position: relative;
  min-height: 285px;
  padding: 32px;
  overflow: hidden;
}

.serag-visual {
  background:
    radial-gradient(circle at 80% 20%, rgba(42,183,169,.18), transparent 24%),
    linear-gradient(145deg, #17464A, #102E31);
}

.topgomla-visual {
  background:
    radial-gradient(circle at 20% 20%, rgba(123,13,46,.12), transparent 24%),
    linear-gradient(145deg, #E9EFEE, #DDE7E5);
}

.preview-pill {
  position: absolute;
  right: 18px;
  top: 18px;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(247,249,248,.92);
  color: #153336;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .11em;
}

.preview-browser {
  height: 220px;
  background: #F7F9F8;
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 0 20px 46px rgba(0,0,0,.18);
}

.preview-browser-top {
  height: 28px;
  background: #E5ECEA;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
}

.preview-browser-top i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #93A4A1;
}

.serag-app {
  display: flex;
  height: calc(100% - 28px);
}

.serag-side {
  width: 22%;
  background: #173E42;
}

.serag-main {
  flex: 1;
  padding: 14px;
}

.serag-hero {
  height: 44px;
  border-radius: 8px;
  background: #D7E5E2;
}

.serag-cards {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 7px;
  margin-top: 10px;
}

.serag-cards i {
  height: 42px;
  border-radius: 7px;
  background: #E3ECEA;
}

.serag-map {
  height: 72px;
  margin-top: 10px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 35% 45%, #8CCFC7 0 4px, transparent 5px),
    linear-gradient(145deg, #C7DEDA, #E6EFED);
}

.commerce-shell {
  width: 88%;
  height: 220px;
  margin: 0 auto;
  padding: 18px;
  border-radius: 15px;
  background: white;
  box-shadow: 0 20px 45px rgba(14,42,45,.13);
}

.commerce-brandbar {
  height: 42px;
  border-radius: 9px;
  background: #0E2A2D;
}

.commerce-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  margin-top: 11px;
}

.commerce-grid i {
  height: 72px;
  border-radius: 8px;
  background: #E1E8E7;
}

.tier-card {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding: 8px;
  border-radius: 8px;
  background: #F2F5F4;
}

.tier-card span {
  height: 8px;
  flex: 1;
  border-radius: 99px;
  background: #C7D5D2;
}

.preview-copy {
  min-height: 128px;
  padding: 20px 22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.preview-type {
  display: block;
  margin-bottom: 5px;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.38);
}

.preview-copy h3 {
  margin: 0 0 6px;
  font-size: 20px;
}

.preview-copy p {
  margin: 0;
  max-width: 440px;
  color: rgba(255,255,255,.46);
  font-size: 11px;
  line-height: 1.55;
}

.preview-copy a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

@media (max-width: 980px) {
  .case-study-card {
    grid-template-columns: 1fr;
  }

  .case-study-visual {
    min-height: 590px;
  }

  .portfolio-previews {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .work-v2 {
    padding-top: 74px;
    padding-bottom: 74px;
  }

  .case-study-copy {
    padding: 30px 24px;
  }

  .case-study-heading {
    flex-direction: column;
  }

  .case-study-visual {
    min-height: 490px;
  }

  .case-orbit-a { width: 350px; height: 350px; }
  .case-orbit-b { width: 245px; height: 245px; }

  .maw-phone-a {
    width: 150px;
    height: 320px;
    left: 10%;
    top: 92px;
  }

  .maw-phone-b {
    width: 140px;
    height: 295px;
    right: 7%;
    top: 125px;
  }

  .preview-visual {
    padding: 24px;
  }
}

/* ===== V3.14: Design Layer V2 for Featured Work ===== */

.work-v2 {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 18%, rgba(44, 219, 200, .12), transparent 24%),
    radial-gradient(circle at 82% 72%, rgba(21, 105, 101, .18), transparent 27%),
    linear-gradient(180deg, #0B2427 0%, #0D2F32 48%, #0A2225 100%);
}

.work-v2::before,
.work-v2::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(4px);
}

.work-v2::before {
  width: 520px;
  height: 520px;
  left: -190px;
  top: 110px;
  background: radial-gradient(circle, rgba(52, 224, 205, .13), rgba(52, 224, 205, 0) 68%);
}

.work-v2::after {
  width: 620px;
  height: 620px;
  right: -240px;
  bottom: -220px;
  background: radial-gradient(circle, rgba(29, 130, 124, .14), rgba(29, 130, 124, 0) 70%);
}

.work-v2 > .container {
  position: relative;
  z-index: 2;
}

.work-v2 .section-head {
  position: relative;
}

.work-v2 .section-head::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 2px;
  left: 0;
  bottom: -18px;
  background: linear-gradient(90deg, #42E0CF, rgba(66,224,207,0));
  transform-origin: left;
  transform: scaleX(0);
}

.work-v2 .section-head.is-visible::after {
  animation: workAccentLine 1.4s cubic-bezier(.2,.7,.2,1) .25s forwards;
}

.work-v2 .eyebrow {
  color: #51E0CF;
}

.maw-case {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,0)),
    #0C292C;
  box-shadow: 0 28px 80px rgba(0,0,0,.20);
}

.maw-case::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(120deg, transparent 0 44%, rgba(63,224,207,.045) 49%, transparent 54%),
    radial-gradient(circle at 22% 18%, rgba(123,13,46,.12), transparent 22%);
}

.case-study-copy,
.case-study-visual {
  position: relative;
  z-index: 1;
}

.maw-case-visual {
  background:
    radial-gradient(circle at 58% 36%, rgba(123,13,46,.20), transparent 20%),
    radial-gradient(circle at 76% 18%, rgba(66,224,207,.22), transparent 22%),
    radial-gradient(circle at 22% 78%, rgba(30,119,113,.18), transparent 24%),
    linear-gradient(145deg, #17484C 0%, #0C3033 52%, #092326 100%);
}

.maw-case-visual::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  left: 50%;
  top: 45%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(66,224,207,.10), rgba(66,224,207,0) 68%);
  filter: blur(8px);
  pointer-events: none;
}

.case-orbit-a {
  border-color: rgba(81,224,207,.11);
  animation: caseOrbitBreathA 10s ease-in-out infinite;
}

.case-orbit-b {
  border-color: rgba(255,255,255,.07);
  animation: caseOrbitBreathB 12s ease-in-out infinite reverse;
}

.maw-phone {
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}

.maw-phone-a {
  animation: mawFloatA 8.5s ease-in-out infinite;
}

.maw-phone-b {
  animation: mawFloatB 9.3s ease-in-out infinite;
}

.case-float-tag {
  border: 1px solid rgba(14,42,45,.06);
  transition: transform .28s ease, box-shadow .28s ease;
}

.tag-a { animation: tagFloatA 7.5s ease-in-out infinite; }
.tag-b { animation: tagFloatB 8.2s ease-in-out infinite; }
.tag-c { animation: tagFloatC 9s ease-in-out infinite; }

.case-float-tag:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 34px rgba(0,0,0,.20);
}

.case-study-topline,
.case-study-heading,
.case-study-lead,
.case-study-meta,
.case-study-features,
.case-study-cta {
  opacity: 0;
  transform: translateY(18px);
}

.maw-case.is-visible .case-study-topline {
  animation: workRevealIn .72s cubic-bezier(.2,.7,.2,1) .08s forwards;
}
.maw-case.is-visible .case-study-heading {
  animation: workRevealIn .88s cubic-bezier(.2,.7,.2,1) .20s forwards;
}
.maw-case.is-visible .case-study-lead {
  animation: workRevealIn .92s cubic-bezier(.2,.7,.2,1) .36s forwards;
}
.maw-case.is-visible .case-study-meta {
  animation: workRevealIn .96s cubic-bezier(.2,.7,.2,1) .52s forwards;
}
.maw-case.is-visible .case-study-features {
  animation: workRevealIn 1s cubic-bezier(.2,.7,.2,1) .68s forwards;
}
.maw-case.is-visible .case-study-cta {
  animation: workRevealIn .85s cubic-bezier(.2,.7,.2,1) .88s forwards;
}

.portfolio-preview {
  position: relative;
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
}

.serag-visual {
  background:
    radial-gradient(circle at 78% 16%, rgba(74,228,211,.20), transparent 23%),
    radial-gradient(circle at 20% 80%, rgba(23,102,97,.16), transparent 26%),
    linear-gradient(145deg, #194D51, #0F3033);
}

.topgomla-visual {
  background:
    radial-gradient(circle at 18% 20%, rgba(123,13,46,.15), transparent 22%),
    radial-gradient(circle at 82% 80%, rgba(42,183,169,.10), transparent 22%),
    linear-gradient(145deg, #EDF3F2, #DCE7E5);
}

.portfolio-preview .preview-visual {
  transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .45s ease;
}

.portfolio-preview:hover .preview-visual {
  transform: scale(1.018);
  filter: saturate(1.06);
}

.portfolio-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(80,225,208,0);
  transition: border-color .3s ease;
}

.portfolio-preview:hover::after {
  border-color: rgba(80,225,208,.20);
}

@keyframes workAccentLine {
  to { transform: scaleX(1); }
}

@keyframes workRevealIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes caseOrbitBreathA {
  0%,100% { transform: translate(-50%,-50%) scale(1); opacity: .8; }
  50% { transform: translate(-50%,-50%) scale(1.025); opacity: .45; }
}

@keyframes caseOrbitBreathB {
  0%,100% { transform: translate(-50%,-50%) scale(1); opacity: .55; }
  50% { transform: translate(-50%,-50%) scale(.975); opacity: .28; }
}

@keyframes mawFloatA {
  0%,100% { transform: rotate(-8deg) translate3d(0,0,0); }
  50% { transform: rotate(-7deg) translate3d(0,-9px,0); }
}

@keyframes mawFloatB {
  0%,100% { transform: rotate(8deg) translate3d(0,0,0); }
  50% { transform: rotate(7deg) translate3d(5px,-7px,0); }
}

@keyframes tagFloatA {
  0%,100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-4px,0); }
}

@keyframes tagFloatB {
  0%,100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(4px,-3px,0); }
}

@keyframes tagFloatC {
  0%,100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(-3px,-4px,0); }
}

@media (max-width: 700px) {
  .work-v2::before,
  .work-v2::after {
    opacity: .65;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-v2 .section-head::after,
  .case-orbit-a,
  .case-orbit-b,
  .maw-phone-a,
  .maw-phone-b,
  .tag-a,
  .tag-b,
  .tag-c,
  .case-study-topline,
  .case-study-heading,
  .case-study-lead,
  .case-study-meta,
  .case-study-features,
  .case-study-cta {
    animation: none !important;
  }

  .case-study-topline,
  .case-study-heading,
  .case-study-lead,
  .case-study-meta,
  .case-study-features,
  .case-study-cta {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===== V3.15: stronger visible Featured Work treatment ===== */
.work-v2{
  background:
    radial-gradient(circle at 12% 18%,rgba(72,239,219,.18),transparent 22%),
    radial-gradient(circle at 86% 68%,rgba(34,141,133,.22),transparent 28%),
    linear-gradient(180deg,#092225 0%,#0B3033 48%,#082124 100%);
}
.work-v2 .section-head::after{
  width:170px;height:3px;
  background:linear-gradient(90deg,#52F0DE 0%,#29BCAE 55%,rgba(41,188,174,0) 100%);
  box-shadow:0 0 20px rgba(82,240,222,.18);
}
.work-color-orb{position:absolute;z-index:0;border-radius:50%;pointer-events:none;filter:blur(22px);opacity:.55}
.work-color-orb-a{
  width:360px;height:360px;right:12%;top:7%;
  background:radial-gradient(circle,rgba(83,241,222,.30),rgba(83,241,222,0) 68%);
  animation:workOrbDriftA 13s ease-in-out infinite;
}
.work-color-orb-b{
  width:300px;height:300px;right:34%;bottom:5%;
  background:radial-gradient(circle,rgba(20,119,113,.34),rgba(20,119,113,0) 70%);
  animation:workOrbDriftB 16s ease-in-out infinite;
}
.maw-case{
  border-color:rgba(86,235,218,.15);
  box-shadow:0 34px 90px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.03);
}
.maw-case-visual{
  background:
    radial-gradient(circle at 70% 20%,rgba(82,240,222,.30),transparent 22%),
    radial-gradient(circle at 52% 50%,rgba(123,13,46,.22),transparent 20%),
    radial-gradient(circle at 18% 80%,rgba(25,139,130,.24),transparent 24%),
    linear-gradient(145deg,#1B565A 0%,#0E3538 47%,#082427 100%);
}
.case-visual-grid{opacity:.075}
.case-orbit-a{border-color:rgba(92,243,225,.20);box-shadow:0 0 40px rgba(92,243,225,.05)}
.case-orbit-b{border-color:rgba(255,255,255,.10)}

.case-study-copy-motion{opacity:0;transform:translateX(-34px)}
.case-study-visual-motion{opacity:0;transform:translateX(38px) scale(.985)}
.maw-case.is-visible .case-study-copy-motion{animation:workPanelInLeft 1.05s cubic-bezier(.2,.75,.2,1) .06s forwards}
.maw-case.is-visible .case-study-visual-motion{animation:workPanelInRight 1.15s cubic-bezier(.2,.75,.2,1) .12s forwards}

.case-status{border-color:rgba(82,240,222,.22);color:#89E8DE;background:rgba(82,240,222,.05)}
.case-float-tag{
  background:rgba(247,249,248,.97);
  border:1px solid rgba(82,240,222,.12);
  box-shadow:0 14px 36px rgba(0,0,0,.18);
}
.case-float-tag::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  margin-right:6px;background:#36CDBE;box-shadow:0 0 0 4px rgba(54,205,190,.08);vertical-align:middle;
}

.portfolio-preview{
  border-color:rgba(82,240,222,.11);
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0)),#123336;
}
.portfolio-preview:hover{
  border-color:rgba(82,240,222,.34);
  box-shadow:0 28px 60px rgba(0,0,0,.18),0 0 0 1px rgba(82,240,222,.06);
}
.preview-visual{position:relative;overflow:hidden}
.portfolio-preview .preview-visual::after{
  content:"";position:absolute;inset:-20% -50%;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.07) 48%,transparent 61%);
  transform:translateX(-55%);transition:transform .9s cubic-bezier(.2,.7,.2,1);pointer-events:none;
}
.portfolio-preview:hover .preview-visual::after{transform:translateX(55%)}

.serag-visual{
  background:
    radial-gradient(circle at 80% 18%,rgba(80,239,221,.30),transparent 23%),
    radial-gradient(circle at 18% 82%,rgba(30,118,112,.22),transparent 24%),
    linear-gradient(145deg,#1C5559,#103236);
}
.topgomla-visual{
  background:
    radial-gradient(circle at 18% 18%,rgba(123,13,46,.18),transparent 22%),
    radial-gradient(circle at 84% 82%,rgba(47,201,187,.14),transparent 24%),
    linear-gradient(145deg,#F2F6F5,#D9E6E3);
}

@keyframes workOrbDriftA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-28px,24px,0) scale(1.08)}}
@keyframes workOrbDriftB{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(24px,-18px,0) scale(.94)}}
@keyframes workPanelInLeft{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:translateX(0)}}
@keyframes workPanelInRight{from{opacity:0;transform:translateX(38px) scale(.985)}to{opacity:1;transform:translateX(0) scale(1)}}

@media(max-width:980px){
  .case-study-copy-motion,.case-study-visual-motion{transform:translateY(24px)}
  .maw-case.is-visible .case-study-copy-motion,.maw-case.is-visible .case-study-visual-motion{animation-name:workPanelInMobile}
}
@keyframes workPanelInMobile{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

@media(prefers-reduced-motion:reduce){
  .work-color-orb-a,.work-color-orb-b,.case-study-copy-motion,.case-study-visual-motion{animation:none!important}
  .case-study-copy-motion,.case-study-visual-motion{opacity:1!important;transform:none!important}
}

/* ===== V3.16: Orbit portfolio section inspired by kinetic studio sites ===== */

.work-orbit-section {
  position: relative;
  height: 210vh;
  background: #EAF4F3;
}

.work-orbit-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background:
    linear-gradient(180deg, #87C9C1 0%, #CFE7E4 48%, #F5F8F7 82%, #F7F9F8 100%);
  isolation: isolate;
}

.work-orbit-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.work-orbit-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image:
    linear-gradient(rgba(255,255,255,.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.35), transparent 88%);
}

.work-orbit-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(18px);
}

.work-orbit-glow.glow-a {
  width: 560px;
  height: 560px;
  left: -180px;
  top: -190px;
  background: radial-gradient(circle, rgba(31,124,118,.22), rgba(31,124,118,0) 68%);
}

.work-orbit-glow.glow-b {
  width: 520px;
  height: 520px;
  right: -160px;
  top: 8%;
  background: radial-gradient(circle, rgba(78,226,208,.24), rgba(78,226,208,0) 68%);
}

.work-orbit-header {
  position: absolute;
  left: 7vw;
  top: 8vh;
  z-index: 6;
  max-width: 560px;
}

.work-orbit-header .eyebrow {
  color: #0F6D67;
}

.work-orbit-header h2 {
  margin: 12px 0 10px;
  font-size: clamp(42px, 5vw, 70px);
  line-height: .98;
  letter-spacing: -.055em;
  color: #102B2E;
}

.work-orbit-header p {
  max-width: 470px;
  margin: 0;
  color: rgba(16,43,46,.62);
  font-size: 14px;
  line-height: 1.7;
}

/* Big circular track */
.project-orbit-wrap {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 1380px;
  height: 1380px;
  transform: translate(-50%,-50%);
  z-index: 3;
  pointer-events: none;
}

.project-orbit-wrap::before,
.project-orbit-wrap::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}

.project-orbit-wrap::before {
  width: 1070px;
  height: 1070px;
  border: 1px solid rgba(13,64,66,.10);
}

.project-orbit-wrap::after {
  width: 900px;
  height: 900px;
  border: 1px solid rgba(13,64,66,.055);
}

.project-orbit-track {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform: rotate(-18deg);
  transition: transform .12s linear;
  will-change: transform;
}

/* Cards around circumference */
.orbit-project {
  --angle: 0deg;
  --card-rotate: 0deg;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 280px;
  transform:
    translate(-50%,-50%)
    rotate(var(--angle))
    translateY(-535px)
    rotate(calc(var(--angle) * -1))
    rotate(var(--card-rotate));
  transform-origin: center;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(15,71,70,.10);
  box-shadow: 0 24px 60px rgba(22,73,72,.14);
  pointer-events: auto;
  transition: box-shadow .3s ease, filter .3s ease;
}

.orbit-project:hover {
  box-shadow: 0 32px 75px rgba(18,70,68,.22);
  filter: saturate(1.07);
}

.orbit-project-1 { --angle: -78deg; --card-rotate: -7deg; }
.orbit-project-2 { --angle: -52deg; --card-rotate: -5deg; }
.orbit-project-3 { --angle: -27deg; --card-rotate: -2deg; }
.orbit-project-4 { --angle: 0deg;   --card-rotate: 1deg; }
.orbit-project-5 { --angle: 27deg;  --card-rotate: 3deg; }
.orbit-project-6 { --angle: 53deg;  --card-rotate: 5deg; }
.orbit-project-7 { --angle: 79deg;  --card-rotate: 7deg; }

.orbit-project-art {
  position: relative;
  height: 190px;
  overflow: hidden;
  background: #12383B;
}

.orbit-project-copy {
  min-height: 72px;
  padding: 13px 16px 15px;
  color: #142E31;
  background: rgba(255,255,255,.98);
}

.orbit-project-copy span {
  display: block;
  margin-bottom: 4px;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(20,46,49,.46);
}

.orbit-project-copy strong {
  font-size: 17px;
  letter-spacing: -.025em;
}

/* Project art variations */
.maw-art {
  background:
    radial-gradient(circle at 72% 22%, rgba(123,13,46,.24), transparent 26%),
    linear-gradient(145deg, #16484C, #0C2E31);
}

.orbit-phone {
  position: absolute;
  bottom: 16px;
  width: 72px;
  height: 138px;
  border-radius: 14px;
  padding: 6px;
  background: #0A1719;
  box-shadow: 0 12px 25px rgba(0,0,0,.24);
}

.orbit-phone::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 9px;
  background: #F7F9F8;
}

.op-a { left: 58px; transform: rotate(-8deg); }
.op-b { right: 48px; height: 130px; transform: rotate(7deg); }

.orbit-phone i {
  position: relative;
  z-index: 1;
  display: block;
  height: 18px;
  margin: 13px 8px 0;
  border-radius: 5px;
  background: #DCE5E3;
}
.op-a i:first-child { background: #7B0D2E; height: 28px; }

.serag-art {
  background:
    radial-gradient(circle at 76% 18%, rgba(65,225,207,.28), transparent 25%),
    linear-gradient(145deg, #1A5559, #0F3235);
}

.orbit-browser {
  position: absolute;
  inset: 28px 28px 24px;
  border-radius: 12px;
  background: #F7F9F8;
  box-shadow: 0 15px 30px rgba(0,0,0,.18);
  overflow: hidden;
}

.orbit-browser > b {
  display: block;
  height: 24px;
  background: #E5ECEA;
}

.serag-preview {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 7px;
  padding: 15px;
}

.serag-preview i {
  height: 74px;
  border-radius: 7px;
  background: linear-gradient(180deg, #CDE3DF 0 58%, #E8EFED 58%);
}

.topgomla-art {
  background: linear-gradient(145deg, #F4F7F6, #DDE8E6);
}

.commerce-preview {
  position: absolute;
  inset: 25px 25px 22px;
  border-radius: 12px;
  background: white;
  padding: 15px;
  box-shadow: 0 14px 30px rgba(14,42,45,.12);
}

.commerce-preview b {
  display: block;
  height: 32px;
  border-radius: 7px;
  background: #0E2A2D;
  margin-bottom: 10px;
}
.commerce-preview i {
  display: inline-block;
  width: 29%;
  height: 65px;
  margin-right: 4%;
  border-radius: 7px;
  background: #DFE7E5;
}
.commerce-preview span {
  display: block;
  margin-top: 9px;
  height: 10px;
  border-radius: 99px;
  background: #BFD2CE;
}

.system-art { background: linear-gradient(145deg, #173F43, #102C30); }

.system-preview {
  position: absolute;
  inset: 22px 24px;
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  background: #F6F8F8;
}
.system-preview aside { width: 24%; background: #0F3438; }
.system-preview main { flex:1; padding: 14px; }
.system-preview main > b { display:block;height:18px;width:54%;background:#C8D8D5;border-radius:5px;margin-bottom:12px;}
.system-preview main div { display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.system-preview main i {height:42px;border-radius:6px;background:#DFE8E6;}
.system-preview main span {display:block;height:50px;border-radius:7px;background:#D1E4E0;margin-top:8px;}

.ui-art {
  background:
    radial-gradient(circle at 78% 20%, rgba(89,235,217,.26), transparent 24%),
    linear-gradient(145deg,#1D5558,#113337);
}
.ui-preview {
  position:absolute;inset:30px 34px;border-radius:14px;background:#F7F9F8;padding:16px;
}
.ui-preview > span {display:block;height:36px;border-radius:8px;background:#15393C;margin-bottom:10px;}
.ui-preview div {display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.ui-preview i {height:55px;border-radius:8px;background:#DDE7E5;}
.ui-preview b {display:block;height:12px;border-radius:99px;background:#C3D4D1;margin-top:10px;}

.maintenance-art {
  background: linear-gradient(145deg,#10383B,#0B272A);
}
.maintenance-preview {
  position:absolute;inset:32px;border-radius:12px;border:1px solid rgba(255,255,255,.12);padding:18px;
}
.maintenance-preview > span {display:block;width:38px;height:38px;border-radius:10px;background:#45CFBF;margin-bottom:14px;}
.maintenance-preview > b {display:block;height:10px;width:68%;border-radius:99px;background:rgba(255,255,255,.55);margin-bottom:10px;}
.maintenance-preview div {display:flex;gap:7px;}
.maintenance-preview i {display:block;flex:1;height:45px;border-radius:7px;background:rgba(255,255,255,.08);}

.planning-art {
  background: linear-gradient(145deg,#EAF2F0,#D7E6E2);
}
.planning-preview {
  position:absolute;inset:26px;background:white;border-radius:12px;padding:18px;box-shadow:0 14px 30px rgba(14,42,45,.11);
}
.planning-preview b {display:block;height:22px;width:48%;border-radius:7px;background:#0F3437;margin-bottom:16px;}
.planning-preview span {display:block;height:10px;border-radius:99px;background:#D4E0DE;margin-top:10px;}
.planning-preview span:nth-of-type(2){width:83%}
.planning-preview span:nth-of-type(3){width:62%}

/* Center message */
.work-orbit-center {
  position: absolute;
  left: 50%;
  top: 59%;
  transform: translate(-50%,-50%);
  width: min(520px, 72vw);
  text-align: center;
  z-index: 5;
  color: #123033;
}

.work-orbit-kicker {
  display: block;
  margin-bottom: 11px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .17em;
  color: #17736D;
}

.work-orbit-center h3 {
  margin: 0 0 22px;
  font-size: clamp(36px, 4vw, 58px);
  line-height: .98;
  letter-spacing: -.055em;
}

.work-orbit-cta {
  background: #0E2A2D;
  color: white;
  box-shadow: 0 15px 34px rgba(14,42,45,.17);
}

.work-orbit-progress {
  position: absolute;
  left: 7vw;
  right: 7vw;
  bottom: 28px;
  height: 1px;
  background: rgba(14,42,45,.10);
  z-index: 7;
  overflow: hidden;
}

.work-orbit-progress span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg,#0E2A2D,#2AB7A9);
}

/* Responsive */
@media (max-width: 1100px) {
  .project-orbit-wrap {
    width: 1180px;
    height: 1180px;
  }
  .orbit-project {
    width: 250px;
    transform:
      translate(-50%,-50%)
      rotate(var(--angle))
      translateY(-455px)
      rotate(calc(var(--angle) * -1))
      rotate(var(--card-rotate));
  }
  .orbit-project-art { height: 170px; }
}

@media (max-width: 760px) {
  .work-orbit-section { height: 180vh; }
  .work-orbit-header {
    left: 20px;
    right: 20px;
    top: 7vh;
  }
  .work-orbit-header h2 { font-size: 42px; }
  .work-orbit-header p { font-size: 13px; max-width: 360px; }

  .project-orbit-wrap {
    width: 880px;
    height: 880px;
    top: 61%;
  }

  .orbit-project {
    width: 205px;
    transform:
      translate(-50%,-50%)
      rotate(var(--angle))
      translateY(-345px)
      rotate(calc(var(--angle) * -1))
      rotate(var(--card-rotate));
  }

  .orbit-project-art { height: 138px; }
  .orbit-project-copy { min-height:64px;padding:11px 13px; }
  .orbit-project-copy strong { font-size:15px; }

  .work-orbit-center {
    top: 63%;
    width: 76vw;
  }

  .work-orbit-center h3 {
    font-size: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-orbit-track {
    transition: none !important;
  }
}

/* ===== V3.17: rebuilt Work section with clean Halo-style arc composition ===== */

.work-showcase-section {
  position: relative;
  height: 205vh;
  background: #edf5f4;
}

.work-showcase-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, #78bdb7 0%, #add8d3 32%, #dcecea 63%, #f7f9f8 100%);
}

.work-showcase-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.work-showcase-bg::before {
  content:"";
  position:absolute;
  inset:0;
  opacity:.11;
  background-image:
    linear-gradient(rgba(255,255,255,.34) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.34) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.28),transparent 83%);
}

.work-bg-glow {
  position:absolute;
  border-radius:50%;
  filter:blur(26px);
}

.bg-glow-a {
  width:620px;height:620px;
  left:-180px;top:-200px;
  background:radial-gradient(circle,rgba(24,107,102,.24),rgba(24,107,102,0) 68%);
}

.bg-glow-b {
  width:620px;height:620px;
  right:-170px;top:5%;
  background:radial-gradient(circle,rgba(72,232,214,.28),rgba(72,232,214,0) 68%);
}

.work-showcase-head {
  position: relative;
  z-index: 8;
  padding-top: 6.5vh;
}

.work-showcase-head .eyebrow {
  color:#0d6963;
}

.work-head-grid {
  display:grid;
  grid-template-columns:1.1fr .55fr;
  align-items:end;
  gap:60px;
  margin-top:12px;
}

.work-head-grid h2 {
  margin:0;
  max-width:760px;
  color:#10292c;
  font-size:clamp(46px,5.2vw,76px);
  line-height:.95;
  letter-spacing:-.06em;
}

.work-head-grid p {
  margin:0 0 6px;
  max-width:390px;
  color:rgba(16,41,44,.62);
  font-size:14px;
  line-height:1.7;
}

/* The arc is deliberately centered BELOW the viewport.
   Only the upper part is visible, creating a clean Halo-like crown. */
.work-arc-stage {
  position:absolute;
  left:50%;
  top:112vh;
  width:1380px;
  height:1380px;
  transform:translate(-50%,-50%);
  z-index:3;
  pointer-events:none;
}

.work-arc-line {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
}

.arc-line-main {
  width:1080px;
  height:1080px;
  border:1px solid rgba(18,81,80,.13);
}

.arc-line-soft {
  width:930px;
  height:930px;
  border:1px solid rgba(18,81,80,.055);
}

/* Cards are positioned by JS around the visible upper arc */
.arc-project {
  position:absolute;
  width:270px;
  border-radius:18px;
  overflow:hidden;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(16,73,72,.09);
  box-shadow:0 24px 55px rgba(25,79,77,.14);
  pointer-events:auto;
  transform-origin:center;
  transition:
    box-shadow .3s ease,
    filter .3s ease,
    scale .3s ease;
}

.arc-project:hover {
  scale:1.025;
  filter:saturate(1.06);
  box-shadow:0 32px 72px rgba(19,74,72,.21);
}

.arc-project-visual {
  position:relative;
  height:180px;
  overflow:hidden;
}

.arc-project-meta {
  min-height:72px;
  padding:13px 16px 15px;
  background:rgba(255,255,255,.98);
  color:#112d30;
}

.arc-project-meta span {
  display:block;
  margin-bottom:4px;
  color:rgba(17,45,48,.45);
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.arc-project-meta strong {
  font-size:17px;
  letter-spacing:-.025em;
}

/* Mawater */
.maw-card-visual {
  background:
    radial-gradient(circle at 75% 20%,rgba(123,13,46,.24),transparent 27%),
    linear-gradient(145deg,#16484c,#0c2e31);
}
.mini-phone {
  position:absolute;
  bottom:14px;
  width:78px;
  height:145px;
  border-radius:15px;
  padding:6px;
  background:#081719;
  box-shadow:0 12px 25px rgba(0,0,0,.25);
}
.mini-phone::before {
  content:"";position:absolute;inset:6px;border-radius:10px;background:#f7f9f8;
}
.mini-phone-left {left:56px;transform:rotate(-8deg)}
.mini-phone-right {right:45px;transform:rotate(7deg);height:135px}
.mini-phone span,.mini-phone i {
  position:relative;z-index:1;display:block;border-radius:5px;margin:10px 8px 0;
}
.mini-phone span {height:27px;background:#7b0d2e}
.mini-phone i {height:18px;background:#dde6e4}

/* Serag */
.serag-card-visual {
  background:
    radial-gradient(circle at 78% 18%,rgba(66,228,210,.30),transparent 25%),
    linear-gradient(145deg,#1b5659,#103236);
}
.mini-dashboard {
  position:absolute;inset:26px;border-radius:12px;background:#f7f9f8;
  padding:14px;box-shadow:0 15px 30px rgba(0,0,0,.18);
}
.mini-dashboard b {
  display:block;height:24px;border-radius:7px;background:#153b3e;margin-bottom:10px;
}
.mini-dashboard div {display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.mini-dashboard i {height:60px;border-radius:7px;background:#dbe7e5}
.mini-dashboard span {
  display:block;height:9px;margin-top:10px;border-radius:99px;background:#b8d5d0;
}

/* TopGomla */
.commerce-card-visual {
  background:linear-gradient(145deg,#f2f6f5,#dce8e6);
}
.mini-commerce {
  position:absolute;inset:24px;border-radius:12px;background:#fff;padding:15px;
  box-shadow:0 15px 30px rgba(14,42,45,.12);
}
.mini-commerce b {display:block;height:30px;border-radius:7px;background:#0e2a2d;margin-bottom:10px}
.mini-commerce div {display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.mini-commerce i {height:64px;border-radius:7px;background:#dfe8e6}
.mini-commerce span {display:block;height:9px;margin-top:9px;border-radius:99px;background:#bfd3cf}

/* systems */
.system-card-visual {background:linear-gradient(145deg,#173f43,#102c30)}
.mini-system {
  position:absolute;inset:22px 24px;display:flex;border-radius:10px;overflow:hidden;background:#f6f8f8
}
.mini-system aside {width:24%;background:#0f3438}
.mini-system main {flex:1;padding:14px}
.mini-system main>b {display:block;height:17px;width:52%;border-radius:5px;background:#c8d8d5;margin-bottom:11px}
.mini-system main div {display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mini-system main i {height:40px;border-radius:6px;background:#dfe8e6}
.mini-system main span {display:block;height:45px;border-radius:7px;background:#d1e4e0;margin-top:8px}

/* design */
.design-card-visual {
  background:
    radial-gradient(circle at 78% 20%,rgba(89,235,217,.27),transparent 24%),
    linear-gradient(145deg,#1d5558,#113337);
}
.mini-design {
  position:absolute;inset:28px 32px;border-radius:13px;background:#f7f9f8;padding:15px
}
.mini-design>span {display:block;height:34px;border-radius:8px;background:#15393c;margin-bottom:9px}
.mini-design div {display:grid;grid-template-columns:1fr 1fr;gap:7px}
.mini-design i {height:53px;border-radius:8px;background:#dde7e5}
.mini-design b {display:block;height:11px;border-radius:99px;background:#c3d4d1;margin-top:9px}

/* maintenance */
.maintenance-card-visual {background:linear-gradient(145deg,#10383b,#0b272a)}
.mini-maintenance {
  position:absolute;inset:30px;border-radius:12px;border:1px solid rgba(255,255,255,.12);padding:17px
}
.mini-maintenance>span {display:block;width:37px;height:37px;border-radius:10px;background:#45cfbf;margin-bottom:13px}
.mini-maintenance>b {display:block;height:10px;width:68%;border-radius:99px;background:rgba(255,255,255,.55);margin-bottom:10px}
.mini-maintenance div {display:flex;gap:7px}
.mini-maintenance i {display:block;flex:1;height:43px;border-radius:7px;background:rgba(255,255,255,.08)}

/* Center CTA */
.work-showcase-center {
  position:absolute;
  left:50%;
  top:67%;
  transform:translate(-50%,-50%);
  z-index:7;
  width:min(520px,72vw);
  text-align:center;
  color:#102c2f;
}

.work-showcase-center>span {
  display:block;
  margin-bottom:10px;
  color:#126c66;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.17em;
}

.work-showcase-center h3 {
  margin:0 0 22px;
  font-size:clamp(36px,4vw,58px);
  line-height:.98;
  letter-spacing:-.055em;
}

.work-showcase-cta {
  background:#0e2a2d;
  color:#fff;
  box-shadow:0 15px 34px rgba(14,42,45,.17);
}

.work-scroll-progress {
  position:absolute;
  left:7vw;right:7vw;bottom:24px;height:1px;
  z-index:8;background:rgba(14,42,45,.10);overflow:hidden;
}

.work-scroll-progress span {
  display:block;width:0;height:100%;
  background:linear-gradient(90deg,#0e2a2d,#2ab7a9);
}

@media(max-width:1100px){
  .work-arc-stage{width:1180px;height:1180px;top:110vh}
  .arc-project{width:235px}
  .arc-project-visual{height:158px}
  .work-showcase-center{top:69%}
}

@media(max-width:760px){
  .work-showcase-section{height:185vh}
  .work-showcase-head{padding-top:5vh}
  .work-head-grid{grid-template-columns:1fr;gap:14px}
  .work-head-grid h2{font-size:40px}
  .work-head-grid p{max-width:360px}
  .work-arc-stage{width:900px;height:900px;top:110vh}
  .arc-project{width:195px}
  .arc-project-visual{height:130px}
  .arc-project-meta{min-height:62px;padding:10px 12px}
  .arc-project-meta strong{font-size:15px}
  .work-showcase-center{top:72%;width:78vw}
  .work-showcase-center h3{font-size:32px}
}

@media(prefers-reduced-motion:reduce){
  .arc-project{transition:none!important}
}

/* ===== V3.18: clean spacing / no text-card collisions ===== */

/* Reserve a true text zone at the top */
.work-showcase-head {
  padding-top: 5.5vh;
  max-width: 1320px;
}

.work-head-grid {
  grid-template-columns: 1fr .42fr;
  gap: 72px;
}

.work-head-grid h2 {
  max-width: 760px;
  font-size: clamp(44px, 4.7vw, 70px);
}

.work-head-grid p {
  max-width: 350px;
}

/* Push the project crown much lower so it never intersects the heading */
.work-arc-stage {
  top: 126vh;
  width: 1460px;
  height: 1460px;
}

/* Arc itself is slightly wider / calmer */
.arc-line-main {
  width: 1160px;
  height: 1160px;
}

.arc-line-soft {
  width: 1010px;
  height: 1010px;
}

/* Smaller cards = more breathing room */
.arc-project {
  width: 238px;
  border-radius: 16px;
}

.arc-project-visual {
  height: 158px;
}

.arc-project-meta {
  min-height: 66px;
  padding: 11px 14px 13px;
}

.arc-project-meta strong {
  font-size: 15px;
}

.arc-project-meta span {
  font-size: 7.5px;
}

/* Give the center message an actual protected zone */
.work-showcase-center {
  top: 70%;
  width: min(460px, 58vw);
  padding: 18px 24px;
  border-radius: 28px;
  background: rgba(247,249,248,.72);
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 45px rgba(29,85,82,.07);
}

.work-showcase-center h3 {
  font-size: clamp(31px, 3.2vw, 48px);
  line-height: 1;
  margin-bottom: 18px;
}

.work-showcase-center > span {
  margin-bottom: 8px;
}

.work-showcase-cta {
  padding: 13px 20px;
}

/* Progress line lower and quieter */
.work-scroll-progress {
  bottom: 18px;
  left: 10vw;
  right: 10vw;
}

/* Remove any possibility of cards sitting above the intended crown zone */
.arc-project {
  z-index: 2;
}

/* Responsive tightening */
@media (max-width: 1100px) {
  .work-arc-stage {
    top: 122vh;
    width: 1250px;
    height: 1250px;
  }

  .arc-line-main {
    width: 1000px;
    height: 1000px;
  }

  .arc-line-soft {
    width: 860px;
    height: 860px;
  }

  .arc-project {
    width: 215px;
  }

  .arc-project-visual {
    height: 145px;
  }

  .work-showcase-center {
    top: 72%;
  }
}

@media (max-width: 760px) {
  .work-showcase-section {
    height: 185vh;
  }

  .work-head-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .work-head-grid h2 {
    max-width: 100%;
    font-size: 38px;
  }

  .work-head-grid p {
    max-width: 330px;
  }

  .work-arc-stage {
    top: 118vh;
    width: 940px;
    height: 940px;
  }

  .arc-line-main {
    width: 760px;
    height: 760px;
  }

  .arc-line-soft {
    width: 650px;
    height: 650px;
  }

  .arc-project {
    width: 178px;
  }

  .arc-project-visual {
    height: 118px;
  }

  .arc-project-meta {
    min-height: 56px;
    padding: 9px 11px;
  }

  .arc-project-meta strong {
    font-size: 13px;
  }

  .work-showcase-center {
    top: 74%;
    width: 72vw;
    padding: 16px 18px;
  }

  .work-showcase-center h3 {
    font-size: 29px;
  }
}

/* ===== V3.19: true open-center project crown ===== */

.work-showcase-v3 {
  height: auto;
  background: #eef5f4;
}

/* Separate heading from the kinetic stage */
.work-intro-block {
  background: #f7f9f8;
  padding: 84px 0 62px;
}

.work-intro-inner .eyebrow {
  color: #178078;
}

.work-intro-grid {
  display: grid;
  grid-template-columns: 1.05fr .45fr;
  gap: 70px;
  align-items: end;
  margin-top: 12px;
}

.work-intro-grid h2 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(46px, 5vw, 74px);
  line-height: .96;
  letter-spacing: -.06em;
}

.work-intro-grid p {
  margin: 0 0 6px;
  max-width: 370px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

/* Scrollable kinetic area starts AFTER the title */
.work-stage-v3 {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #69AEB0 0%, #9BC9C8 34%, #CFDFE1 63%, #F3F5F5 100%);
}

.work-stage-v3::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 10%, rgba(31,111,108,.19), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(73,220,207,.18), transparent 26%);
}

/* This wrapper exists to provide scroll distance without moving the intro heading */
.work-showcase-v3 .work-stage-v3 {
  position: relative;
}

.work-showcase-v3 {
  position: relative;
}

.work-showcase-v3::after {
  content: "";
  display: block;
  height: 120vh;
  margin-top: -100vh;
  pointer-events: none;
}

/* Huge circle center far below viewport, like the Halo reference */
.work-arc-stage-v3 {
  position: absolute;
  left: 50%;
  top: 108%;
  width: 1680px;
  height: 1680px;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
}

.work-arc-stage-v3 .arc-line-main {
  width: 1320px;
  height: 1320px;
  border-color: rgba(17,76,78,.09);
}

.work-arc-stage-v3 .arc-line-soft {
  width: 1170px;
  height: 1170px;
  border-color: rgba(17,76,78,.045);
}

/* Cards are intentionally smaller and further apart */
.work-stage-v3 .arc-project {
  width: 226px;
  border-radius: 14px;
  box-shadow: 0 22px 50px rgba(28,77,78,.14);
}

.work-stage-v3 .arc-project-visual {
  height: 150px;
}

.work-stage-v3 .arc-project-meta {
  min-height: 62px;
  padding: 10px 13px 12px;
}

.work-stage-v3 .arc-project-meta strong {
  font-size: 14px;
}

.work-stage-v3 .arc-project-meta span {
  font-size: 7px;
}

/* One tiny CTA at the bottom, with a completely clean center */
.work-bottom-cta {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 8;
  background: #0E2A2D;
  color: white;
  box-shadow: 0 14px 32px rgba(14,42,45,.15);
}

/* Remove old center card/message entirely */
.work-showcase-center {
  display: none !important;
}

/* Planning card */
.planning-card-visual {
  background: linear-gradient(145deg, #EAF2F0, #D4E3E1);
}
.mini-planning {
  position: absolute;
  inset: 24px;
  padding: 16px;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(14,42,45,.11);
}
.mini-planning b {
  display: block;
  width: 50%;
  height: 22px;
  border-radius: 6px;
  background: #0E2A2D;
  margin-bottom: 15px;
}
.mini-planning span {
  display: block;
  height: 9px;
  margin-top: 9px;
  border-radius: 999px;
  background: #D4E0DE;
}
.mini-planning span:nth-of-type(2) { width: 78%; }
.mini-planning span:nth-of-type(3) { width: 58%; }

/* Keep progress indicator subtle */
.work-stage-v3 .work-scroll-progress {
  left: 8vw;
  right: 8vw;
  bottom: 12px;
  opacity: .52;
}

/* Responsive */
@media (max-width: 1100px) {
  .work-intro-grid {
    grid-template-columns: 1fr .48fr;
    gap: 48px;
  }

  .work-arc-stage-v3 {
    width: 1440px;
    height: 1440px;
    top: 109%;
  }

  .work-arc-stage-v3 .arc-line-main {
    width: 1130px;
    height: 1130px;
  }

  .work-arc-stage-v3 .arc-line-soft {
    width: 1000px;
    height: 1000px;
  }

  .work-stage-v3 .arc-project {
    width: 205px;
  }

  .work-stage-v3 .arc-project-visual {
    height: 136px;
  }
}

@media (max-width: 760px) {
  .work-intro-block {
    padding: 64px 0 46px;
  }

  .work-intro-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .work-intro-grid h2 {
    font-size: 40px;
  }

  .work-intro-grid p {
    max-width: 340px;
  }

  .work-stage-v3 {
    min-height: 650px;
  }

  .work-arc-stage-v3 {
    width: 1040px;
    height: 1040px;
    top: 108%;
  }

  .work-arc-stage-v3 .arc-line-main {
    width: 830px;
    height: 830px;
  }

  .work-arc-stage-v3 .arc-line-soft {
    width: 720px;
    height: 720px;
  }

  .work-stage-v3 .arc-project {
    width: 160px;
  }

  .work-stage-v3 .arc-project-visual {
    height: 105px;
  }

  .work-stage-v3 .arc-project-meta {
    min-height: 50px;
    padding: 8px 10px;
  }

  .work-stage-v3 .arc-project-meta strong {
    font-size: 12px;
  }

  .work-bottom-cta {
    bottom: 24px;
    padding: 12px 18px;
  }
}

/* ===== V3.20: richer mocks + continuous orbit + better text spacing ===== */

/* Text spacing fixes */
.arc-project-meta strong {
  letter-spacing: 0 !important;
  word-spacing: .12em;
  line-height: 1.25;
}

.arc-project-meta span {
  letter-spacing: .10em;
  word-spacing: .08em;
  line-height: 1.35;
}

/* Make each card feel more like a real project preview */
.arc-project-visual {
  background-color: #f6f8f8;
}

.rich-dashboard,
.rich-commerce,
.rich-design,
.rich-maintenance {
  position: absolute;
  inset: 18px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(14,42,45,.14);
}

/* dashboard mock */
.rich-dashboard {
  background: #f8faf9;
}

.mock-topbar {
  height: 22px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: #e6eceb;
}
.mock-topbar i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8fa5a2;
}
.mock-dashboard-body {
  display: grid;
  grid-template-columns: 22% 1fr;
  height: calc(100% - 22px);
}
.mock-dashboard-body aside {
  padding: 10px 7px;
  background: #15383c;
}
.mock-dashboard-body aside span {
  display: block;
  height: 7px;
  margin-bottom: 8px;
  border-radius: 99px;
  background: rgba(255,255,255,.18);
}
.mock-dashboard-body main {
  padding: 10px;
}
.mock-dashboard-body main > b {
  display: block;
  width: 48%;
  height: 9px;
  border-radius: 99px;
  background: #9fb7b4;
}
.mock-stat-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 5px;
  margin-top: 8px;
}
.mock-stat-row i {
  height: 32px;
  border-radius: 6px;
  background: #dbe6e4;
}
.mock-chart {
  position: relative;
  height: 48px;
  margin-top: 8px;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(42,183,169,.16), rgba(42,183,169,0)),
    repeating-linear-gradient(90deg, #e9efee 0 1px, transparent 1px 16px);
}
.mock-chart span {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 12px;
  height: 2px;
  transform: rotate(-8deg);
  background: #2ab7a9;
  box-shadow: 24px -8px 0 #2ab7a9, 48px -4px 0 #2ab7a9, 72px -15px 0 #2ab7a9;
}

/* commerce mock */
.rich-commerce {
  background: #fff;
  padding: 12px;
}
.mock-shopbar {
  height: 26px;
  border-radius: 7px;
  background: #0e2a2d;
  margin-bottom: 9px;
}
.mock-products {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6px;
}
.mock-products div {
  min-width: 0;
}
.mock-products i {
  display: block;
  height: 48px;
  border-radius: 7px;
  background: linear-gradient(180deg,#dce6e4 0 65%,#f1f4f3 65%);
}
.mock-products span {
  display: block;
  height: 6px;
  width: 70%;
  margin-top: 5px;
  border-radius: 99px;
  background: #c5d4d1;
}
.mock-tier-row {
  display: flex;
  gap: 5px;
  margin-top: 10px;
}
.mock-tier-row b {
  flex: 1;
  height: 8px;
  border-radius: 99px;
  background: #d8e3e1;
}
.mock-tier-row b:nth-child(2) {
  background: #9fd5cf;
}

/* design mock */
.rich-design {
  background: #f7f9f8;
  padding: 12px;
}
.design-hero {
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg,#173c40,#2ab7a9);
  margin-bottom: 8px;
}
.design-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 6px;
}
.design-grid i {
  height: 36px;
  border-radius: 7px;
  background: #dce6e4;
}
.design-lines span {
  display: block;
  height: 6px;
  border-radius: 99px;
  background: #c6d5d2;
  margin-top: 7px;
}
.design-lines span:last-child {
  width: 60%;
}

/* maintenance mock */
.rich-maintenance {
  padding: 13px;
  background:
    radial-gradient(circle at 80% 10%,rgba(48,215,198,.14),transparent 28%),
    #102f33;
}
.maint-head {
  display: flex;
  gap: 9px;
  align-items: center;
}
.maint-head span {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #45cfbf;
}
.maint-head b {
  width: 55%;
  height: 9px;
  border-radius: 99px;
  background: rgba(255,255,255,.58);
}
.maint-status {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6px;
  margin-top: 12px;
}
.maint-status i {
  height: 34px;
  border-radius: 7px;
  background: rgba(255,255,255,.08);
}
.maint-log {
  margin-top: 10px;
}
.maint-log span {
  display: block;
  height: 6px;
  border-radius: 99px;
  background: rgba(255,255,255,.16);
  margin-top: 6px;
}
.maint-log span:nth-child(2) { width: 78%; }
.maint-log span:nth-child(3) { width: 62%; }

/* Continuous orbit should feel slow and premium */
.work-arc-stage-v3 {
  will-change: transform;
}

/* cards stay crisp during motion */
.work-stage-v3 .arc-project {
  will-change: left, top, transform;
}

/* no fake scroll progress anymore */
.work-stage-v3 .work-scroll-progress {
  display: none;
}

/* ===== V3.21: seamless full-circle loop ===== */

/* Hide the lower half visually; the cards still travel through it and re-enter from the opposite edge. */
.work-stage-v3 {
  overflow: hidden;
}

/* Duplicated loop cards are real visual items but not interactive duplicates. */
.arc-project-clone {
  pointer-events: none;
}

/* Keep all cards equally crisp during continuous motion. */
.work-stage-v3 .arc-project {
  backface-visibility: hidden;
  transform-origin: center center;
}

/* Slightly reduce radius to ensure incoming edge cards are visible before outgoing ones disappear. */
.work-arc-stage-v3 {
  width: 1640px;
  height: 1640px;
  top: 108%;
}

@media (max-width: 1100px) {
  .work-arc-stage-v3 {
    width: 1400px;
    height: 1400px;
  }
}

@media (max-width: 760px) {
  .work-arc-stage-v3 {
    width: 1000px;
    height: 1000px;
  }
}

/* ===== V3.22: tighter card sequence + cloud depth + dark next section ===== */

/* Richer cloud-like background depth */
.work-stage-v3 {
  background:
    radial-gradient(circle at 18% 16%, rgba(47, 148, 143, .22), transparent 24%),
    radial-gradient(circle at 74% 14%, rgba(82, 224, 210, .18), transparent 22%),
    radial-gradient(circle at 50% 54%, rgba(255,255,255,.78), transparent 38%),
    radial-gradient(circle at 28% 68%, rgba(255,255,255,.45), transparent 26%),
    linear-gradient(180deg, #6FBBB8 0%, #95CDC8 28%, #C8E0DE 58%, #EEF4F3 100%);
}

.work-stage-v3::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse at 22% 46%, rgba(255,255,255,.42), transparent 30%),
    radial-gradient(ellipse at 58% 36%, rgba(255,255,255,.30), transparent 26%),
    radial-gradient(ellipse at 84% 52%, rgba(255,255,255,.34), transparent 28%);
  filter: blur(18px);
  opacity: .92;
}

.work-stage-v3 > * {
  position: relative;
  z-index: 2;
}

/* Slightly larger cards for a connected ribbon-like sequence */
.work-stage-v3 .arc-project {
  width: 238px;
  box-shadow: 0 22px 48px rgba(26,75,75,.13);
}

/* cleaner, softer white panels */
.work-stage-v3 .arc-project-meta {
  background: rgba(255,255,255,.985);
  border-top: 1px solid rgba(16,73,72,.055);
}

/* orbit line a little more visible so the sequence reads as one composition */
.work-arc-stage-v3 .arc-line-main {
  border-color: rgba(17,76,78,.115);
}

.work-arc-stage-v3 .arc-line-soft {
  border-color: rgba(17,76,78,.055);
}

/* Transition to the next section: intentionally dark */
.work-showcase-v3 + .support,
.work-showcase-v3 + section {
  background: #0B2427 !important;
  color: #F7F9F8;
}

/* If the next section has its own soft background class, override it here */
.work-showcase-v3 + .section-soft,
.work-showcase-v3 + .support.section-soft {
  background:
    radial-gradient(circle at 18% 18%, rgba(42,183,169,.08), transparent 24%),
    linear-gradient(180deg, #0B2427 0%, #0D2B2E 100%) !important;
}

.work-showcase-v3 + section h2,
.work-showcase-v3 + section h3,
.work-showcase-v3 + section strong {
  color: #F7F9F8;
}

.work-showcase-v3 + section p,
.work-showcase-v3 + section .muted,
.work-showcase-v3 + section .section-copy {
  color: rgba(247,249,248,.58);
}

/* soften transition seam */
.work-showcase-v3 {
  position: relative;
}

.work-showcase-v3::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 110px;
  pointer-events: none;
  z-index: 5;
  background: linear-gradient(180deg, rgba(11,36,39,0), rgba(11,36,39,.98));
}


/* ===== V3.23: connected half-arc rhythm ===== */

/* Make the visible card set feel more unified */
.work-stage-v3 .arc-project {
  width: 214px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 38px rgba(18, 52, 55, 0.14);
}

.work-stage-v3 .arc-project-visual {
  height: 136px;
}

.work-stage-v3 .arc-project-meta {
  min-height: 54px;
  padding: 10px 12px 12px;
}

.work-stage-v3 .arc-project-meta span {
  display: block;
  font-size: 7px;
  line-height: 1.2;
  letter-spacing: .12em;
  word-spacing: .05em;
  opacity: .72;
  margin-bottom: 5px;
}

.work-stage-v3 .arc-project-meta strong {
  display: block;
  font-size: 13px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  word-spacing: .08em;
}

/* More premium card visuals */
.arc-project-visual {
  background:
    radial-gradient(circle at 70% 18%, rgba(255,255,255,.18), transparent 28%),
    linear-gradient(145deg, #17393e 0%, #103237 60%, #0D2B2F 100%);
}

.arc-project .mini-phone,
.arc-project .mini-dashboard,
.arc-project .mini-commerce,
.arc-project .mini-design,
.arc-project .mini-maintenance,
.arc-project .mini-planning,
.arc-project .mini-system {
  filter: saturate(1.02);
}

/* strengthen the crown path very slightly */
.work-arc-stage-v3 .arc-line-main {
  border-width: 1.25px;
}

.work-arc-stage-v3 .arc-line-soft {
  border-width: 1px;
}

/* make the stage feel a bit more intentional and less empty */
.work-stage-v3 .work-bottom-cta {
  bottom: 24px;
  padding: 16px 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

@media (max-width: 1100px) {
  .work-stage-v3 .arc-project {
    width: 194px;
  }

  .work-stage-v3 .arc-project-visual {
    height: 124px;
  }
}

@media (max-width: 760px) {
  .work-stage-v3 .arc-project {
    width: 156px;
  }

  .work-stage-v3 .arc-project-visual {
    height: 100px;
  }

  .work-stage-v3 .arc-project-meta strong {
    font-size: 11px;
  }
}

/* ===== V3.24: shared real image in every orbit card for spacing review ===== */

.work-stage-v3 .arc-project-visual {
  background: #d9e5e3 !important;
  padding: 0 !important;
}

.orbit-shared-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Remove any old generated mock layers if still present */
.work-stage-v3 .arc-project-visual > *:not(.orbit-shared-image) {
  display: none !important;
}

/* spacing-review sizing */
.work-stage-v3 .arc-project {
  width: 218px;
}

.work-stage-v3 .arc-project-visual {
  height: 145px;
}

.work-stage-v3 .arc-project-meta {
  min-height: 58px;
  padding: 10px 12px 12px;
}

.work-stage-v3 .arc-project-meta span {
  font-size: 7px;
  line-height: 1.25;
  letter-spacing: .10em;
  word-spacing: .06em;
  margin-bottom: 5px;
}

.work-stage-v3 .arc-project-meta strong {
  font-size: 13px;
  line-height: 1.18;
  letter-spacing: 0;
  word-spacing: .10em;
}

/* tighter but cleaner crown rhythm */
.work-arc-stage-v3 {
  width: 1580px;
  height: 1580px;
}

@media (max-width: 1100px) {
  .work-stage-v3 .arc-project { width: 196px; }
  .work-stage-v3 .arc-project-visual { height: 130px; }
  .work-arc-stage-v3 { width: 1360px; height: 1360px; }
}

@media (max-width: 760px) {
  .work-stage-v3 .arc-project { width: 160px; }
  .work-stage-v3 .arc-project-visual { height: 105px; }
  .work-arc-stage-v3 { width: 980px; height: 980px; }
}

/* ===== V3.30: clean rebuild of Selected Work ===== */

.work-clean-section {
  position: relative;
  background: #f7f9f8;
}

.work-clean-intro {
  padding: 86px 0 62px;
  background: #f7f9f8;
}

.work-clean-intro .eyebrow {
  color: #178078;
}

.work-clean-stage {
  position: relative;
  height: 720px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 55%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.78) 21%, rgba(255,255,255,.26) 42%, rgba(255,255,255,0) 67%),
    radial-gradient(circle at 14% 12%, rgba(33,137,130,.23), transparent 27%),
    radial-gradient(circle at 82% 14%, rgba(78,225,212,.28), transparent 26%),
    linear-gradient(180deg, #77C4C3 0%, #A9DAD6 33%, #D8E9E7 63%, #F2F6F5 100%);
}

.work-clouds {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.cloud {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(42px);
  background: rgba(255,255,255,.62);
}

.cloud-a {
  width: 520px;
  height: 250px;
  left: 7%;
  top: 34%;
  transform: scaleX(1.5);
}

.cloud-b {
  width: 650px;
  height: 300px;
  left: 36%;
  top: 31%;
  transform: scaleX(1.65);
  opacity: .72;
}

.cloud-c {
  width: 520px;
  height: 240px;
  right: 3%;
  top: 38%;
  transform: scaleX(1.45);
  opacity: .58;
}

.work-clean-arc {
  position: absolute;
  left: 50%;
  top: 86%;
  width: 1320px;
  height: 790px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(15,76,78,.095);
  z-index: 1;
  pointer-events: none;
}

.work-clean-arc-soft {
  width: 1180px;
  height: 700px;
  border-color: rgba(15,76,78,.045);
}

.work-clean-track {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.work-clean-card {
  position: absolute;
  width: 235px;
  aspect-ratio: 1.42 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255,255,255,.6);
  box-shadow:
    0 22px 48px rgba(20,62,64,.16),
    0 0 0 1px rgba(12,53,55,.035);
  transform-origin: center center;
  will-change: left, top, transform, opacity;
}

.work-clean-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.work-clean-cta {
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  z-index: 6;
  background: #0D2B2F;
  color: #fff;
  box-shadow: 0 16px 34px rgba(13,43,47,.18);
}

/* Strong transition into the next section */
.work-clean-section + .takeover {
  background:
    radial-gradient(circle at 18% 0%, rgba(42,183,169,.10), transparent 25%),
    linear-gradient(180deg, #0B2427 0%, #0D2B2E 100%) !important;
  color: #F7F9F8;
}

.work-clean-section + .takeover h2,
.work-clean-section + .takeover .eyebrow,
.work-clean-section + .takeover .text-link {
  color: #F7F9F8;
}

.work-clean-section + .takeover p {
  color: rgba(247,249,248,.64);
}

.work-clean-section + .takeover .takeover-options span {
  color: rgba(247,249,248,.82);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
}

@media (max-width: 1100px) {
  .work-clean-stage {
    height: 650px;
  }

  .work-clean-card {
    width: 205px;
  }

  .work-clean-arc {
    width: 1160px;
    height: 690px;
  }

  .work-clean-arc-soft {
    width: 1040px;
    height: 620px;
  }
}

@media (max-width: 760px) {
  .work-clean-intro {
    padding: 64px 0 44px;
  }

  .work-clean-stage {
    height: 560px;
  }

  .work-clean-card {
    width: 155px;
    border-radius: 10px;
  }

  .work-clean-arc {
    width: 860px;
    height: 510px;
    top: 88%;
  }

  .work-clean-arc-soft {
    width: 760px;
    height: 450px;
  }

  .work-clean-cta {
    bottom: 24px;
    padding: 12px 18px;
  }
}

/* ===== V3.31: CSS-only stable orbit ===== */

/* Track becomes the coordinate system for CSS motion-path */
.work-clean-track {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* All cards use one continuous elliptical path.
   No JS is required for positioning. */
.work-clean-card {
  left: 0 !important;
  top: 0 !important;
  width: 215px;
  aspect-ratio: 1.42 / 1;
  opacity: 1 !important;
  scale: 1 !important;
  offset-path: ellipse(43% 54% at 50% 91%);
  offset-rotate: auto 0deg;
  animation: mantaOrbit 112s linear infinite;
  transform: translate(-50%, -50%);
}

/* Evenly distribute all 14 cards around the full invisible ellipse */
.work-clean-card-1  { offset-distance: 0%; }
.work-clean-card-2  { offset-distance: 7.142857%; }
.work-clean-card-3  { offset-distance: 14.285714%; }
.work-clean-card-4  { offset-distance: 21.428571%; }
.work-clean-card-5  { offset-distance: 28.571428%; }
.work-clean-card-6  { offset-distance: 35.714285%; }
.work-clean-card-7  { offset-distance: 42.857142%; }
.work-clean-card-8  { offset-distance: 50%; }
.work-clean-card-9  { offset-distance: 57.142857%; }
.work-clean-card-10 { offset-distance: 64.285714%; }
.work-clean-card-11 { offset-distance: 71.428571%; }
.work-clean-card-12 { offset-distance: 78.571428%; }
.work-clean-card-13 { offset-distance: 85.714285%; }
.work-clean-card-14 { offset-distance: 92.857142%; }

/* Same motion for every card, preserving each starting offset */
.work-clean-card-1  { animation-delay: 0s; }
.work-clean-card-2  { animation-delay: -8s; }
.work-clean-card-3  { animation-delay: -16s; }
.work-clean-card-4  { animation-delay: -24s; }
.work-clean-card-5  { animation-delay: -32s; }
.work-clean-card-6  { animation-delay: -40s; }
.work-clean-card-7  { animation-delay: -48s; }
.work-clean-card-8  { animation-delay: -56s; }
.work-clean-card-9  { animation-delay: -64s; }
.work-clean-card-10 { animation-delay: -72s; }
.work-clean-card-11 { animation-delay: -80s; }
.work-clean-card-12 { animation-delay: -88s; }
.work-clean-card-13 { animation-delay: -96s; }
.work-clean-card-14 { animation-delay: -104s; }

/* Since negative delays establish spacing, each card animates over the full path */
@keyframes mantaOrbit {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

/* Cleaner Halo-like image boards */
.work-clean-card {
  border-radius: 12px;
  background: #fff;
  border: 10px solid rgba(234,240,241,.88);
  box-shadow: 0 20px 44px rgba(17,56,58,.15);
}

.work-clean-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hide cards travelling along the lower half by placing a soft foreground veil.
   This preserves the full loop while only exposing the upper crown. */
.work-clean-stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(242,246,245,0), rgba(242,246,245,.92) 44%, rgba(242,246,245,1) 100%);
}

/* CTA must sit above veil */
.work-clean-cta {
  z-index: 7;
}

/* Transition into dark next section stays visible */
.work-clean-section + .takeover {
  position: relative;
  z-index: 8;
}

/* Browser fallback: if motion-path isn't supported, show a static crown instead of stacking */
@supports not (offset-path: ellipse(40% 50% at 50% 90%)) {
  .work-clean-card {
    animation: none !important;
    offset-path: none !important;
    transform: translate(-50%, -50%) !important;
  }

  .work-clean-card-1  { left: -4% !important;  top: 78% !important; rotate: -34deg; }
  .work-clean-card-2  { left: 7% !important;   top: 62% !important; rotate: -29deg; }
  .work-clean-card-3  { left: 18% !important;  top: 45% !important; rotate: -23deg; }
  .work-clean-card-4  { left: 30% !important;  top: 30% !important; rotate: -16deg; }
  .work-clean-card-5  { left: 41% !important;  top: 21% !important; rotate: -8deg; }
  .work-clean-card-6  { left: 50% !important;  top: 18% !important; rotate: 0deg; }
  .work-clean-card-7  { left: 59% !important;  top: 21% !important; rotate: 8deg; }
  .work-clean-card-8  { left: 70% !important;  top: 30% !important; rotate: 16deg; }
  .work-clean-card-9  { left: 82% !important;  top: 45% !important; rotate: 23deg; }
  .work-clean-card-10 { left: 93% !important;  top: 62% !important; rotate: 29deg; }
  .work-clean-card-11 { left: 104% !important; top: 78% !important; rotate: 34deg; }
  .work-clean-card-12,
  .work-clean-card-13,
  .work-clean-card-14 { display: none; }
}

@media (max-width: 1100px) {
  .work-clean-card {
    width: 192px;
    border-width: 8px;
    offset-path: ellipse(45% 53% at 50% 91%);
  }
}

@media (max-width: 760px) {
  .work-clean-card {
    width: 145px;
    border-width: 6px;
    offset-path: ellipse(52% 49% at 50% 91%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-clean-card {
    animation-play-state: paused !important;
  }
}

/* ===== V3.32: orientation fix only ===== */
.work-clean-card {
  border-width: 8px;
}

@media (max-width: 760px) {
  .work-clean-card {
    border-width: 5px;
  }
}

/* ===== V3.33: cards follow the INNER orbit only ===== */

/*
  The previous motion path was larger than the visible inner orbit,
  so cards appeared to jump visually between the outer and inner rings.
  This path now matches the INNER ellipse dimensions exactly.
*/
.work-clean-card {
  offset-path: ellipse(590px 350px at 50% 86%);
}

/* Keep the visible inner orbit aligned to the exact same geometry */
.work-clean-arc-soft {
  width: 1180px;
  height: 700px;
  top: 86%;
}

/* Outer orbit remains only as a secondary decorative line */
.work-clean-arc:not(.work-clean-arc-soft) {
  opacity: .42;
}

/* Inner orbit becomes the primary guide */
.work-clean-arc-soft {
  border-color: rgba(15,76,78,.10);
  opacity: .9;
}

@media (max-width: 1100px) {
  .work-clean-card {
    offset-path: ellipse(520px 310px at 50% 86%);
  }

  .work-clean-arc-soft {
    width: 1040px;
    height: 620px;
    top: 86%;
  }
}

@media (max-width: 760px) {
  .work-clean-card {
    offset-path: ellipse(380px 225px at 50% 88%);
  }

  .work-clean-arc-soft {
    width: 760px;
    height: 450px;
    top: 88%;
  }
}

/* ===== V3.34: Halo geometry replicated from DevTools values ===== */

.work-clean-stage {
  height: 720px;
  overflow: hidden;
}

/* True circular wheel, not ellipse */
.work-clean-track {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  --wheel-radius: 45rem;
}

/* place all shots at the same center, rotate by fixed angle, then push outward by one radius */
.halo-geom-card {
  position: absolute;
  left: 50%;
  top: 88%;
  width: 249.212px;
  height: 185.850px;
  aspect-ratio: auto;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  opacity: 1 !important;
  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translateY(calc(var(--wheel-radius) * -1));
  transform-origin: center center;
  will-change: transform;
  animation: mantaHaloWheel 120s linear infinite;
}

/* each shot's visual is counter-rotated so the image tile follows the same look as Halo */
.halo-card-inner {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 8px solid rgba(234,240,241,.88);
  box-shadow: 0 20px 44px rgba(17,56,58,.16);
  transform: rotate(calc(var(--angle) * -1));
  transform-origin: center center;
}

.halo-card-inner img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* animate the whole wheel by adding a shared rotation while preserving 22.5deg spacing */
@keyframes mantaHaloWheel {
  from {
    transform:
      translate(-50%, -50%)
      rotate(var(--angle))
      translateY(calc(var(--wheel-radius) * -1));
  }
  to {
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--angle) + 360deg))
      translateY(calc(var(--wheel-radius) * -1));
  }
}

/* inner preview should visually rotate with the wheel tangent rather than stay globally upright */
.halo-geom-card:nth-child(1)  .halo-card-inner { transform: rotate(0deg); }
.halo-geom-card:nth-child(2)  .halo-card-inner { transform: rotate(-22.5deg); }
.halo-geom-card:nth-child(3)  .halo-card-inner { transform: rotate(-45deg); }
.halo-geom-card:nth-child(4)  .halo-card-inner { transform: rotate(-67.5deg); }
.halo-geom-card:nth-child(5)  .halo-card-inner { transform: rotate(-90deg); }
.halo-geom-card:nth-child(6)  .halo-card-inner { transform: rotate(-112.5deg); }
.halo-geom-card:nth-child(7)  .halo-card-inner { transform: rotate(-135deg); }
.halo-geom-card:nth-child(8)  .halo-card-inner { transform: rotate(-157.5deg); }
.halo-geom-card:nth-child(9)  .halo-card-inner { transform: rotate(-180deg); }
.halo-geom-card:nth-child(10) .halo-card-inner { transform: rotate(-202.5deg); }
.halo-geom-card:nth-child(11) .halo-card-inner { transform: rotate(-225deg); }
.halo-geom-card:nth-child(12) .halo-card-inner { transform: rotate(-247.5deg); }
.halo-geom-card:nth-child(13) .halo-card-inner { transform: rotate(-270deg); }
.halo-geom-card:nth-child(14) .halo-card-inner { transform: rotate(-292.5deg); }
.halo-geom-card:nth-child(15) .halo-card-inner { transform: rotate(-315deg); }
.halo-geom-card:nth-child(16) .halo-card-inner { transform: rotate(-337.5deg); }

/* keep lower-half cards hidden behind a soft veil */
.work-clean-stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24%;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(242,246,245,0), rgba(242,246,245,.92) 46%, rgba(242,246,245,1) 100%);
}

.work-clean-cta {
  z-index: 7;
}

/* dark transition to the following section */
.work-clean-section + .takeover {
  background:
    radial-gradient(circle at 18% 0%, rgba(42,183,169,.10), transparent 25%),
    linear-gradient(180deg, #0B2427 0%, #0D2B2E 100%) !important;
  color: #F7F9F8;
}

@media (max-width: 1100px) {
  .work-clean-track {
    --wheel-radius: 39rem;
  }

  .halo-geom-card {
    width: 220px;
    height: 164px;
  }
}

@media (max-width: 760px) {
  .work-clean-stage {
    height: 560px;
  }

  .work-clean-track {
    --wheel-radius: 27rem;
  }

  .halo-geom-card {
    width: 160px;
    height: 119px;
    top: 90%;
  }

  .halo-card-inner {
    border-width: 5px;
    border-radius: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .halo-geom-card {
    animation-play-state: paused !important;
  }
}

/* ===== V3.35: corrected Halo wheel structure ===== */

/*
  Halo structure:
  - one wheel center
  - 16 shots spaced by 22.5deg
  - each shot: rotate(angle) -> translateY(-radius)
  - the wheel itself rotates continuously
  - NO counter-rotation on the inner image
*/

/* wheel = a single rotating origin */
.work-clean-track {
  position: absolute !important;
  left: 50% !important;
  top: 88% !important;
  right: auto !important;
  bottom: auto !important;
  width: 0 !important;
  height: 0 !important;
  z-index: 3;
  pointer-events: none;
  --wheel-radius: 45rem;
  transform-origin: 0 0;
  animation: mantaWheelSpin 120s linear infinite;
}

/* every card starts at the exact same wheel center */
.halo-geom-card {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 249.212px !important;
  height: 185.850px !important;
  opacity: 1 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  animation: none !important;
  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translateY(calc(var(--wheel-radius) * -1)) !important;
  transform-origin: center center;
}

/* critical fix: do not cancel the parent's angle */
.halo-card-inner {
  width: 100%;
  height: 100%;
  transform: none !important;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 8px solid rgba(234,240,241,.9);
  box-shadow: 0 20px 44px rgba(17,56,58,.16);
}

.halo-card-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* disable all old nth-child counter rotation overrides */
.halo-geom-card:nth-child(n) .halo-card-inner {
  transform: none !important;
}

/* rotate the entire wheel, exactly preserving the 22.5° gaps */
@keyframes mantaWheelSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* card geometry reference lines remain decorative only */
.work-clean-arc,
.work-clean-arc-soft {
  pointer-events: none;
}

/* keep lower return path out of view */
.work-clean-stage {
  overflow: hidden;
}

.work-clean-stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(242,246,245,0) 0%,
      rgba(242,246,245,.9) 48%,
      rgba(242,246,245,1) 100%
    );
}

.work-clean-cta {
  z-index: 7;
}

@media (max-width: 1100px) {
  .work-clean-track {
    --wheel-radius: 39rem;
  }

  .halo-geom-card {
    width: 220px !important;
    height: 164px !important;
  }
}

@media (max-width: 760px) {
  .work-clean-track {
    top: 90% !important;
    --wheel-radius: 27rem;
  }

  .halo-geom-card {
    width: 160px !important;
    height: 119px !important;
  }

  .halo-card-inner {
    border-width: 5px;
    border-radius: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-clean-track {
    animation-play-state: paused !important;
  }
}

/* ===== V3.36: remove legacy motion-path + correct image orientation ===== */

/* Critical cleanup:
   old V3.31/V3.33 motion-path rules were still affecting the same .work-clean-card class.
   Disable them completely so only the Halo geometry controls placement. */
.halo-geom-card {
  offset-path: none !important;
  offset-distance: 0 !important;
  offset-rotate: 0deg !important;
  rotate: 0deg !important;
  scale: 1 !important;
}

/* Halo geometry:
   outer shot controls circular position,
   inner visual is flipped 180deg so the project itself stays readable. */
.halo-card-inner {
  transform: rotate(180deg) !important;
}

/* Kill every older nth-child inner transform rule */
.halo-geom-card:nth-child(n) .halo-card-inner {
  transform: rotate(180deg) !important;
}

/* Keep all cards on exactly one radius */
.work-clean-track {
  --wheel-radius: 45rem;
}

/* Slightly softer frame so the project image reads more like Halo tiles */
.halo-card-inner {
  border: 6px solid rgba(235,240,241,.88);
  border-radius: 10px;
}

/* Make the image use the full board consistently */
.halo-card-inner img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Align the decorative inner ring with the actual 45rem card radius visually */
.work-clean-arc-soft {
  opacity: .72;
  border-color: rgba(15,76,78,.075);
}

@media (max-width: 1100px) {
  .work-clean-track {
    --wheel-radius: 39rem;
  }
}

@media (max-width: 760px) {
  .work-clean-track {
    --wheel-radius: 27rem;
  }

  .halo-card-inner {
    border-width: 4px;
    border-radius: 8px;
  }
}

/* ===== V3.37: lower the wheel + flip image only ===== */

/* Move the entire orbit lower so it no longer intrudes into the intro area */
.work-clean-track {
  top: 94% !important;
}

/* Keep the card box itself aligned naturally with the orbit */
.halo-card-inner,
.halo-geom-card:nth-child(n) .halo-card-inner {
  transform: none !important;
}

/* Flip only the actual screenshot image */
.halo-card-inner img {
  transform: rotate(180deg) !important;
  transform-origin: center center;
}

/* Maintain clean crop after image rotation */
.halo-card-inner {
  overflow: hidden;
}

/* Keep decorative rings visually aligned with the lowered wheel */
.work-clean-arc,
.work-clean-arc-soft {
  top: 92% !important;
}

@media (max-width: 1100px) {
  .work-clean-track {
    top: 94% !important;
  }

  .work-clean-arc,
  .work-clean-arc-soft {
    top: 92% !important;
  }
}

@media (max-width: 760px) {
  .work-clean-track {
    top: 96% !important;
  }

  .work-clean-arc,
  .work-clean-arc-soft {
    top: 94% !important;
  }
}

/* ===== V3.38: final polish for Selected Work ===== */

/* 1) Keep the card box untouched and show the screenshot in its natural orientation */
.halo-card-inner,
.halo-geom-card:nth-child(n) .halo-card-inner {
  transform: none !important;
}

.halo-card-inner img {
  transform: none !important;
  transform-origin: center center;
}

/* 2) Lower the full orbit slightly more (~25px on desktop) */
.work-clean-track {
  top: calc(94% + 25px) !important;
}

.work-clean-arc,
.work-clean-arc-soft {
  top: calc(92% + 25px) !important;
}

/* 3) Make CTA more proportional to the section */
.work-clean-cta {
  min-width: 156px;
  padding: 15px 24px !important;
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* 4) Outer orbit becomes very subtle; inner orbit remains the visual guide */
.work-clean-arc:not(.work-clean-arc-soft) {
  opacity: .18 !important;
  border-color: rgba(15,76,78,.04) !important;
}

.work-clean-arc-soft {
  opacity: .78 !important;
  border-color: rgba(15,76,78,.085) !important;
}

@media (max-width: 1100px) {
  .work-clean-track {
    top: calc(94% + 18px) !important;
  }

  .work-clean-arc,
  .work-clean-arc-soft {
    top: calc(92% + 18px) !important;
  }
}

@media (max-width: 760px) {
  .work-clean-track {
    top: calc(96% + 12px) !important;
  }

  .work-clean-arc,
  .work-clean-arc-soft {
    top: calc(94% + 12px) !important;
  }

  .work-clean-cta {
    min-width: 138px;
    padding: 13px 20px !important;
    font-size: 13px !important;
  }
}

/* ===== V3.39: center copy + user's final 150px orbit offset ===== */

/* Preserve the exact offset confirmed manually by the user */
.work-clean-track {
  top: calc(94% + 150px) !important;
}

.work-clean-arc,
.work-clean-arc-soft {
  top: calc(92% + 150px) !important;
}

/* Center content inspired by the reference composition */
.work-clean-center-copy {
  position: absolute;
  left: 50%;
  top: 54%;
  z-index: 6;
  width: min(620px, 72vw);
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.work-clean-center-eyebrow {
  display: inline-block;
  margin-bottom: 13px;
  color: #178078;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.work-clean-center-copy h3 {
  margin: 0;
  color: #10282c;
  font-size: clamp(38px, 4vw, 64px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.055em;
}

.work-clean-center-copy p {
  max-width: 500px;
  margin: 20px auto 0;
  color: rgba(16,40,44,.64);
  font-size: 15px;
  line-height: 1.55;
}

/* CTA sits below the center message */
.work-clean-cta {
  bottom: 38px !important;
}

/* Maintain the same confirmed offset at medium desktop/tablet sizes */
@media (max-width: 1100px) {
  .work-clean-track {
    top: calc(94% + 150px) !important;
  }

  .work-clean-arc,
  .work-clean-arc-soft {
    top: calc(92% + 150px) !important;
  }

  .work-clean-center-copy {
    top: 53%;
    width: min(560px, 76vw);
  }

  .work-clean-center-copy h3 {
    font-size: clamp(34px, 5vw, 54px);
  }
}

/* Mobile gets its own smaller offset so the orbit remains visible */
@media (max-width: 760px) {
  .work-clean-track {
    top: calc(96% + 70px) !important;
  }

  .work-clean-arc,
  .work-clean-arc-soft {
    top: calc(94% + 70px) !important;
  }

  .work-clean-center-copy {
    top: 50%;
    width: 84vw;
  }

  .work-clean-center-copy h3 {
    font-size: 32px;
  }

  .work-clean-center-copy p {
    margin-top: 14px;
    font-size: 13px;
  }
}

/* ===== V3.40: Existing Project Support refinement ===== */

.takeover-v2 {
  position: relative;
  overflow: hidden;
  padding-top: 96px;
  padding-bottom: 82px;
  background:
    radial-gradient(circle at 14% 22%, rgba(39,161,151,.15), transparent 27%),
    radial-gradient(circle at 86% 72%, rgba(47,207,193,.07), transparent 25%),
    linear-gradient(135deg, #0A272A 0%, #0B2226 52%, #0A1D21 100%) !important;
}

.takeover-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.takeover-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
}

.takeover-glow-a {
  width: 360px;
  height: 360px;
  left: -100px;
  top: -120px;
  background: rgba(44,191,178,.10);
}

.takeover-glow-b {
  width: 300px;
  height: 300px;
  right: -60px;
  bottom: -140px;
  background: rgba(56,222,204,.06);
}

.takeover-orbit {
  position: absolute;
  display: block;
  border: 1px solid rgba(121,222,211,.065);
  border-radius: 50%;
}

.takeover-orbit-a {
  width: 460px;
  height: 460px;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
}

.takeover-orbit-b {
  width: 330px;
  height: 330px;
  right: calc(6% + 65px);
  top: 50%;
  transform: translateY(-50%);
}

.takeover-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #72D7CC;
  box-shadow: 0 0 0 7px rgba(114,215,204,.07);
  animation: takeoverFloat 7s ease-in-out infinite alternate;
}

.takeover-dot-a {
  right: 18%;
  top: 29%;
}

.takeover-dot-b {
  right: 8%;
  bottom: 25%;
  width: 5px;
  height: 5px;
  animation-duration: 9s;
  animation-delay: -2s;
}

@keyframes takeoverFloat {
  from { transform: translate3d(0,0,0); opacity: .55; }
  to   { transform: translate3d(14px,-12px,0); opacity: 1; }
}

.takeover-grid-v2 {
  position: relative;
  z-index: 2;
  grid-template-columns: .92fr 1.08fr;
  align-items: start;
  gap: 94px;
}

.takeover-heading-block h2 {
  max-width: 560px;
  margin: 15px 0 0;
  color: #F7FAF9;
  font-size: clamp(52px, 5.2vw, 78px);
  line-height: .94;
  letter-spacing: -.065em;
}

.takeover-v2 .eyebrow {
  color: #72D7CC !important;
}

.takeover-mini-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  color: rgba(247,250,249,.58);
  font-size: 12px;
  background: rgba(255,255,255,.025);
}

.takeover-mini-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #55D0C2;
  box-shadow: 0 0 0 5px rgba(85,208,194,.08);
}

.takeover-copy-v2 {
  padding-top: 28px;
}

.takeover-copy-v2 .takeover-lead {
  max-width: 660px;
  margin: 0 0 34px;
  color: rgba(247,250,249,.68) !important;
  font-size: 17px;
  line-height: 1.72;
}

.takeover-options-v2 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 8px;
  margin-bottom: 34px;
}

.takeover-options-v2 span {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 82px;
  padding: 13px 14px 14px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.035) !important;
  color: #F7FAF9 !important;
  font-size: 12px !important;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.takeover-options-v2 span:hover {
  transform: translateY(-3px);
  border-color: rgba(114,215,204,.35) !important;
  background: rgba(114,215,204,.07) !important;
}

.takeover-options-v2 b {
  color: #65D2C6;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
}

.takeover-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 6px;
}

.takeover-primary-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #F7FAF9;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.takeover-primary-link span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #F7FAF9;
  color: #0B2427;
  transition: transform .25s ease;
}

.takeover-primary-link:hover span {
  transform: translate(3px,-3px);
}

.takeover-caption {
  color: rgba(247,250,249,.36);
  font-size: 11px;
}

.takeover-path {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 64px;
  color: rgba(247,250,249,.32);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .15em;
}

.takeover-path i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(114,215,204,.08), rgba(114,215,204,.35), rgba(114,215,204,.08));
}

@media (max-width: 1000px) {
  .takeover-grid-v2 {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .takeover-copy-v2 {
    padding-top: 0;
  }

  .takeover-options-v2 {
    grid-template-columns: repeat(3, 1fr);
  }

  .takeover-orbit-a,
  .takeover-orbit-b {
    right: -140px;
  }
}

@media (max-width: 640px) {
  .takeover-v2 {
    padding-top: 72px;
    padding-bottom: 64px;
  }

  .takeover-heading-block h2 {
    font-size: 48px;
  }

  .takeover-options-v2 {
    grid-template-columns: repeat(2,1fr);
  }

  .takeover-action-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .takeover-path {
    display: none;
  }
}

/* ===== V3.41: editorial Services section ===== */

.services-editorial {
  position: relative;
  overflow: hidden;
  padding: 0 0 112px;
  background:
    radial-gradient(circle at 88% 8%, rgba(74,215,202,.09), transparent 26%),
    #F6F7F7;
}

.services-marquee {
  overflow: hidden;
  border-top: 1px solid rgba(13,43,47,.08);
  border-bottom: 1px solid rgba(13,43,47,.08);
  background: rgba(255,255,255,.72);
}

.services-marquee-track {
  display: flex;
  align-items: center;
  gap: 24px;
  width: max-content;
  padding: 13px 0;
  color: rgba(13,43,47,.38);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  animation: servicesTicker 24s linear infinite;
}

.services-marquee-track span {
  white-space: nowrap;
}

.services-marquee-track i {
  color: #3BBEB0;
  font-style: normal;
}

@keyframes servicesTicker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.services-editorial-inner {
  padding-top: 88px;
}

.services-editorial-head {
  margin-bottom: 78px;
}

.services-editorial-head h2 {
  max-width: 720px;
}

.services-editorial-head p {
  max-width: 500px;
}

.services-editorial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 76px;
}

.service-column {
  min-width: 0;
}

.service-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(13,43,47,.28);
}

.service-column-head h3 {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(52px, 5vw, 82px);
  font-style: italic;
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.045em;
  color: #10282C;
}

.service-column-actions {
  display: flex;
  align-items: center;
}

.service-column-actions > span {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
}

.service-arrow {
  border: 1px solid rgba(13,43,47,.20);
  color: #0D2B2F;
  font-size: 26px;
}

.service-icon {
  margin-left: -6px;
  background: #0E3A3E;
  color: #70DED2;
  font-size: 26px;
  box-shadow: 0 12px 30px rgba(13,43,47,.12);
}

.service-icon-code {
  font-family: "Manrope", sans-serif;
  font-size: 17px;
  font-weight: 800;
}

.service-editorial-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  padding: 0 2px;
  border-bottom: 1px solid rgba(13,43,47,.18);
  color: #0C2226;
  text-decoration: none;
  transition:
    padding .3s ease,
    color .3s ease,
    border-color .3s ease;
}

.service-editorial-list a span {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.025em;
}

.service-editorial-list a b {
  color: rgba(13,43,47,.30);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
}

.service-editorial-list a:hover {
  padding-left: 12px;
  padding-right: 12px;
  color: #14988D;
  border-color: rgba(20,152,141,.35);
}

.service-editorial-list a:hover b {
  color: #14988D;
}

.services-support-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1px;
  margin-top: 72px;
  overflow: hidden;
  border: 1px solid rgba(13,43,47,.12);
  border-radius: 18px;
  background: rgba(13,43,47,.12);
}

.support-service {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
  min-height: 158px;
  padding: 30px 34px;
  background: rgba(255,255,255,.82);
  transition: background .3s ease;
}

.support-service:hover {
  background: #fff;
}

.support-service-no {
  align-self: start;
  color: #2CB6A8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
}

.support-service h4 {
  margin: 0 0 8px;
  color: #10282C;
  font-size: 25px;
  line-height: 1.1;
  letter-spacing: -.035em;
}

.support-service p {
  max-width: 480px;
  margin: 0;
  color: rgba(13,43,47,.54);
  font-size: 12px;
  line-height: 1.65;
}

.support-service > a {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(13,43,47,.16);
  border-radius: 50%;
  color: #0D2B2F;
  text-decoration: none;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}

.support-service:hover > a {
  transform: translate(3px,-3px);
  background: #0D2B2F;
  color: #fff;
}

/* slightly stagger rows when reveal class becomes active */
.reveal.is-visible .service-editorial-list a {
  animation: serviceRowIn .65s both;
}
.reveal.is-visible .service-editorial-list a:nth-child(2){animation-delay:.05s}
.reveal.is-visible .service-editorial-list a:nth-child(3){animation-delay:.10s}
.reveal.is-visible .service-editorial-list a:nth-child(4){animation-delay:.15s}
.reveal.is-visible .service-editorial-list a:nth-child(5){animation-delay:.20s}

@keyframes serviceRowIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 980px) {
  .services-editorial-grid {
    grid-template-columns: 1fr;
    gap: 64px;
  }

  .services-support-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .services-editorial {
    padding-bottom: 76px;
  }

  .services-editorial-inner {
    padding-top: 64px;
  }

  .services-editorial-head {
    margin-bottom: 54px;
  }

  .service-column-head h3 {
    font-size: 52px;
  }

  .service-column-actions > span {
    width: 48px;
    height: 48px;
  }

  .service-editorial-list a {
    min-height: 68px;
  }

  .service-editorial-list a span {
    font-size: 18px;
  }

  .support-service {
    grid-template-columns: auto 1fr;
    padding: 24px;
  }

  .support-service > a {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-marquee-track {
    animation: none;
  }

  .reveal.is-visible .service-editorial-list a {
    animation: none;
  }
}

/* ===== V3.42: stronger section color rhythm ===== */

/* Services: give the section its own soft teal identity instead of another white block */
.services-editorial {
  background:
    radial-gradient(circle at 86% 10%, rgba(52,196,184,.13), transparent 26%),
    radial-gradient(circle at 12% 76%, rgba(42,132,128,.07), transparent 30%),
    linear-gradient(180deg, #EEF6F5 0%, #E8F2F1 52%, #EFF6F5 100%) !important;
}

.services-marquee {
  background: rgba(255,255,255,.55) !important;
}

.service-column-head,
.service-editorial-list a {
  border-color: rgba(13,43,47,.16) !important;
}

.support-service {
  background: rgba(255,255,255,.68) !important;
}

.support-service:hover {
  background: rgba(255,255,255,.92) !important;
}

/* Selected Work intro: keep it clean/neutral so the teal orbit remains the hero */
.work-clean-intro {
  background: #F8FAF9 !important;
}

/* Start Faster: introduce a second soft tonal break after the dark support section */
.products,
.products.section,
.products.section-soft {
  background:
    radial-gradient(circle at 14% 20%, rgba(46,173,163,.08), transparent 28%),
    linear-gradient(180deg, #F1F6F5 0%, #ECF3F2 100%) !important;
}

/* Product cards remain clean white against the tinted background */
.products .product-card,
.products .digital-card,
.products .card {
  background: rgba(255,255,255,.92);
}

/* Why Manta returns to near-white for contrast against Start Faster */
.why,
.why-manta,
.why.section,
.why-manta.section {
  background: #FAFBFA !important;
}

/* Subtle separators between the light tonal sections */
.services-editorial,
.products,
.why,
.why-manta {
  border-top: 1px solid rgba(13,43,47,.045);
}

/* ===== V3.43: Start Faster premium product showcase ===== */

.products-v2 {
  position: relative;
  overflow: hidden;
  padding-top: 100px;
  padding-bottom: 112px;
  background:
    radial-gradient(circle at 10% 8%, rgba(43,171,160,.10), transparent 26%),
    radial-gradient(circle at 90% 86%, rgba(43,171,160,.06), transparent 26%),
    linear-gradient(180deg, #F0F6F5 0%, #EAF2F1 100%) !important;
}

.products-head {
  margin-bottom: 58px;
}

.products-head h2 {
  font-size: clamp(56px, 5vw, 78px);
  line-height: .96;
  letter-spacing: -.055em;
}

.product-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.product-showcase-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgba(13,43,47,.11);
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 22px 50px rgba(13,43,47,.055);
  transition:
    transform .35s cubic-bezier(.2,.75,.2,1),
    box-shadow .35s ease,
    border-color .35s ease;
}

.product-showcase-card:hover {
  transform: translateY(-7px);
  border-color: rgba(42,177,165,.25);
  box-shadow: 0 28px 64px rgba(13,43,47,.10);
}

.product-visual {
  position: relative;
  display: grid;
  place-items: center;
  height: 285px;
  overflow: hidden;
  border-bottom: 1px solid rgba(13,43,47,.08);
  background:
    radial-gradient(circle at 50% 35%, rgba(98,214,203,.20), transparent 28%),
    linear-gradient(145deg, #DCEDEC 0%, #EDF5F4 58%, #D9E9E7 100%);
}

.product-visual::before {
  content: "";
  position: absolute;
  width: 270px;
  height: 270px;
  border: 1px solid rgba(20,124,118,.08);
  border-radius: 50%;
}

.product-floating-label {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 8px 11px;
  border: 1px solid rgba(13,43,47,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  color: rgba(13,43,47,.60);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* UI kit visual */
.ui-kit-window {
  position: relative;
  z-index: 2;
  width: 76%;
  max-width: 290px;
  overflow: hidden;
  border: 1px solid rgba(13,43,47,.12);
  border-radius: 14px;
  background: #FDFEFE;
  box-shadow: 0 18px 38px rgba(13,43,47,.12);
  transform: rotate(-4deg);
  transition: transform .35s ease;
}

.product-ui:hover .ui-kit-window {
  transform: rotate(-1deg) translateY(-3px);
}

.ui-kit-topbar {
  display: flex;
  gap: 5px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(13,43,47,.07);
}

.ui-kit-topbar span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(13,43,47,.22);
}

.ui-kit-body {
  display: grid;
  grid-template-columns: 28% 72%;
  min-height: 142px;
}

.ui-kit-sidebar {
  background: #0D3034;
}

.ui-kit-main {
  padding: 18px;
}

.ui-kit-line {
  height: 7px;
  margin-bottom: 11px;
  border-radius: 999px;
  background: #DCE9E7;
}

.ui-kit-line-lg { width: 82%; background: #12383C; }
.ui-kit-line-sm { width: 58%; }

.ui-kit-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 7px;
  margin: 16px 0;
}

.ui-kit-row i {
  height: 54px;
  border-radius: 7px;
  background: #E1ECEA;
}

/* app templates visual */
.product-visual-template {
  background:
    radial-gradient(circle at 70% 20%, rgba(55,190,178,.18), transparent 30%),
    linear-gradient(145deg, #E8F1F0, #D7E8E6);
}

.code-frame {
  position: absolute;
  z-index: 2;
  width: 60%;
  max-width: 230px;
  min-height: 155px;
  padding: 20px;
  border-radius: 15px;
  background: #0D2F33;
  box-shadow: 0 22px 40px rgba(13,43,47,.18);
}

.code-frame-back {
  transform: translate(-34px,10px) rotate(-8deg);
  opacity: .50;
}

.code-frame-front {
  transform: translate(28px,-5px) rotate(5deg);
  transition: transform .35s ease;
}

.product-template:hover .code-frame-front {
  transform: translate(20px,-10px) rotate(2deg);
}

.code-frame span {
  color: rgba(255,255,255,.70);
  font-size: 11px;
  font-weight: 700;
}

.code-frame i {
  display: block;
  width: 80%;
  height: 5px;
  margin-top: 12px;
  border-radius: 999px;
  background: rgba(112,222,210,.17);
}

.code-frame i:nth-of-type(2) { width: 62%; }
.code-frame i:nth-of-type(3) { width: 88%; }
.code-frame i:nth-of-type(4) { width: 48%; }

.code-badge {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border-radius: 11px;
  background: #67D8CC;
  color: #0D3034;
  font-size: 13px;
  font-weight: 800;
}

/* ready-made solution visual */
.product-visual-solutions {
  background:
    radial-gradient(circle at 50% 50%, rgba(48,190,177,.20), transparent 28%),
    linear-gradient(145deg, #D8ECE9, #EFF6F5);
}

.solution-orbit {
  position: absolute;
  border: 1px solid rgba(13,82,80,.13);
  border-radius: 50%;
}

.solution-orbit-a {
  width: 205px;
  height: 205px;
}

.solution-orbit-b {
  width: 132px;
  height: 132px;
}

.solution-core {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 22px;
  background: #0D3034;
  color: #69D9CE;
  box-shadow: 0 18px 38px rgba(13,43,47,.18);
  font-size: 28px;
}

.solution-node {
  position: absolute;
  z-index: 2;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #57CDBF;
  box-shadow: 0 0 0 7px rgba(87,205,191,.10);
}

.node-a { transform: translate(-78px,-50px); }
.node-b { transform: translate(94px,15px); }
.node-c { transform: translate(-18px,92px); }

.product-showcase-content {
  padding: 24px 24px 26px;
}

.product-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.product-index {
  color: #31B7A9;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
}

.product-status-v2 {
  padding: 6px 9px;
  border: 1px solid rgba(13,43,47,.10);
  border-radius: 999px;
  color: rgba(13,43,47,.42);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.product-showcase-content h3 {
  margin: 0 0 12px;
  color: #10282C;
  font-size: 29px;
  line-height: 1.04;
  letter-spacing: -.04em;
}

.product-showcase-content p {
  min-height: 62px;
  margin: 0 0 26px;
  color: rgba(13,43,47,.54);
  font-size: 12px;
  line-height: 1.62;
}

.product-showcase-content > a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #0D3034;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.product-showcase-content > a span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(13,43,47,.16);
  border-radius: 50%;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}

.product-showcase-card:hover .product-showcase-content > a span {
  transform: translate(3px,-3px);
  background: #0D3034;
  color: #fff;
}

.products-footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
  color: rgba(13,43,47,.43);
  font-size: 10px;
}

.products-footnote p {
  margin: 0;
}

.products-footnote-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #43C2B5;
  box-shadow: 0 0 0 5px rgba(67,194,181,.09);
}

@media (max-width: 980px) {
  .product-showcase-grid {
    grid-template-columns: 1fr;
  }

  .product-showcase-card {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
  }

  .product-visual {
    height: auto;
    min-height: 280px;
    border-right: 1px solid rgba(13,43,47,.08);
    border-bottom: 0;
  }
}

@media (max-width: 640px) {
  .products-v2 {
    padding-top: 76px;
    padding-bottom: 82px;
  }

  .product-showcase-card {
    display: block;
  }

  .product-visual {
    height: 245px;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(13,43,47,.08);
  }

  .product-showcase-content h3 {
    font-size: 25px;
  }

  .product-showcase-content p {
    min-height: 0;
  }
}

/* ===== V3.44: Why Manta refinement ===== */

.about-v2 {
  position: relative;
  overflow: hidden;
  padding-top: 108px;
  padding-bottom: 112px;
  background:
    radial-gradient(circle at 8% 12%, rgba(59,180,168,.055), transparent 24%),
    #FBFCFB !important;
}

.about-v2::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -150px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(20,110,106,.055);
  border-radius: 50%;
  box-shadow:
    0 0 0 74px rgba(20,110,106,.025),
    0 0 0 148px rgba(20,110,106,.016);
  pointer-events: none;
}

.about-v2-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 110px;
  align-items: start;
}

.about-v2-intro {
  position: sticky;
  top: 120px;
}

.about-v2-intro h2 {
  max-width: 560px;
  margin: 16px 0 0;
  color: #10282C;
  font-size: clamp(58px, 5vw, 78px);
  line-height: .94;
  letter-spacing: -.065em;
}

.about-v2-intro > p {
  max-width: 500px;
  margin: 26px 0 0;
  color: rgba(13,43,47,.56);
  font-size: 15px;
  line-height: 1.72;
}

.about-v2-signature {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
  color: rgba(13,43,47,.45);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.about-v2-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #42C1B3;
  box-shadow: 0 0 0 6px rgba(66,193,179,.09);
}

.about-v2-principles {
  border-top: 1px solid rgba(13,43,47,.12);
}

.about-v2-card {
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 24px;
  align-items: start;
  min-height: 176px;
  padding: 28px 0 30px;
  border-bottom: 1px solid rgba(13,43,47,.12);
  transition:
    padding .3s ease,
    background .3s ease;
}

.about-v2-card::before {
  content: "";
  position: absolute;
  left: -18px;
  right: -18px;
  inset-block: 0;
  z-index: -1;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(65,190,178,.08), rgba(65,190,178,0));
  opacity: 0;
  transform: scaleX(.97);
  transform-origin: left;
  transition: opacity .3s ease, transform .3s ease;
}

.about-v2-card:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

.about-v2-no {
  padding-top: 4px;
  color: #38B9AC;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
}

.about-v2-card-body h3 {
  margin: 0 0 12px;
  color: #10282C;
  font-size: 25px;
  line-height: 1.12;
  letter-spacing: -.035em;
}

.about-v2-card-body p {
  max-width: 600px;
  margin: 0;
  color: rgba(13,43,47,.53);
  font-size: 13px;
  line-height: 1.7;
}

.about-v2-arrow {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-top: 2px;
  border: 1px solid rgba(13,43,47,.12);
  border-radius: 50%;
  color: rgba(13,43,47,.65);
  font-size: 15px;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}

.about-v2-card:hover .about-v2-arrow {
  transform: translate(3px,-3px);
  background: #0D3034;
  color: #fff;
}

@media (max-width: 980px) {
  .about-v2-grid {
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .about-v2-intro {
    position: static;
  }
}

@media (max-width: 640px) {
  .about-v2 {
    padding-top: 78px;
    padding-bottom: 82px;
  }

  .about-v2-intro h2 {
    font-size: 50px;
  }

  .about-v2-card {
    grid-template-columns: 42px 1fr;
    min-height: 0;
  }

  .about-v2-arrow {
    display: none;
  }
}

/* ===== V3.45: Final CTA refinement ===== */

.contact-v2 {
  position: relative;
  overflow: hidden;
  min-height: 590px;
  padding-top: 108px;
  padding-bottom: 72px;
  background:
    radial-gradient(circle at 15% 20%, rgba(48,187,174,.15), transparent 28%),
    radial-gradient(circle at 88% 74%, rgba(54,205,192,.08), transparent 24%),
    linear-gradient(135deg, #0B2A2D 0%, #0A2327 55%, #091D20 100%) !important;
}

.contact-v2-atmosphere {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.contact-v2-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(56px);
}

.contact-v2-glow-a {
  width: 380px;
  height: 380px;
  left: -120px;
  top: -100px;
  background: rgba(54,208,194,.10);
}

.contact-v2-glow-b {
  width: 300px;
  height: 300px;
  right: -90px;
  bottom: -120px;
  background: rgba(66,216,202,.06);
}

.contact-v2-ring {
  position: absolute;
  border: 1px solid rgba(110,219,208,.07);
  border-radius: 50%;
}

.contact-v2-ring-a {
  width: 470px;
  height: 470px;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
}

.contact-v2-ring-b {
  width: 325px;
  height: 325px;
  right: calc(4% + 72px);
  top: 50%;
  transform: translateY(-50%);
}

.contact-v2-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6EDBCE;
  box-shadow: 0 0 0 7px rgba(110,219,206,.07);
  animation: contactDotFloat 7s ease-in-out infinite alternate;
}

.contact-v2-dot-a {
  right: 20%;
  top: 30%;
}

.contact-v2-dot-b {
  right: 7%;
  bottom: 24%;
  width: 5px;
  height: 5px;
  animation-duration: 9s;
  animation-delay: -2s;
}

@keyframes contactDotFloat {
  from { transform: translate3d(0,0,0); opacity: .55; }
  to   { transform: translate3d(12px,-10px,0); opacity: 1; }
}

.contact-v2-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 110px;
  align-items: end;
}

.contact-v2 .eyebrow {
  color: #6EDBCE !important;
}

.contact-v2-main h2 {
  max-width: 820px;
  margin: 17px 0 0;
  color: #F7FAF9;
  font-size: clamp(58px, 6vw, 92px);
  line-height: .92;
  letter-spacing: -.07em;
}

.contact-v2-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 34px;
}

.contact-v2-meta span {
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  color: rgba(247,250,249,.52);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.contact-v2-side {
  padding-bottom: 4px;
}

.contact-v2-side > p {
  max-width: 470px;
  margin: 0 0 28px;
  color: rgba(247,250,249,.66);
  font-size: 16px;
  line-height: 1.7;
}

.contact-v2-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 74px;
  padding: 12px 14px 12px 24px;
  border-radius: 999px;
  background: #F7FAF9;
  color: #0C282C;
  text-decoration: none;
  box-shadow: 0 18px 44px rgba(0,0,0,.16);
  transition: transform .3s ease, box-shadow .3s ease;
}

.contact-v2-cta span {
  font-size: 15px;
  font-weight: 800;
}

.contact-v2-cta b {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #0C2D31;
  color: #71DBCF;
  font-size: 18px;
  transition: transform .25s ease;
}

.contact-v2-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 54px rgba(0,0,0,.22);
}

.contact-v2-cta:hover b {
  transform: translate(3px,-3px);
}

.contact-v2-direct {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.contact-v2-direct span {
  color: rgba(247,250,249,.34);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.contact-v2-direct a {
  color: rgba(247,250,249,.78);
  font-size: 12px;
  text-decoration: none;
}

.contact-v2-side small {
  display: block;
  margin-top: 12px;
  color: rgba(247,250,249,.22);
  font-size: 9px;
}

.contact-v2-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 68px;
  color: rgba(247,250,249,.27);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.contact-v2-bottom i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(110,219,206,.06), rgba(110,219,206,.28), rgba(110,219,206,.06));
}

@media (max-width: 980px) {
  .contact-v2-grid {
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .contact-v2-side {
    max-width: 560px;
  }

  .contact-v2-ring-a,
  .contact-v2-ring-b {
    right: -160px;
  }
}

@media (max-width: 640px) {
  .contact-v2 {
    min-height: auto;
    padding-top: 78px;
    padding-bottom: 58px;
  }

  .contact-v2-main h2 {
    font-size: 50px;
  }

  .contact-v2-direct {
    align-items: flex-start;
    flex-direction: column;
  }

  .contact-v2-bottom {
    display: none;
  }
}

/* ===== V3.46: Product philosophy / trust section ===== */

.philosophy-section {
  position: relative;
  overflow: hidden;
  padding: 118px 0 126px;
  background:
    radial-gradient(circle at 50% 16%, rgba(74,205,192,.12), transparent 28%),
    linear-gradient(180deg, #0A2430 0%, #0A1D28 100%);
}

.philosophy-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 85%);
}

.philosophy-wrap {
  position: relative;
  max-width: 1240px;
}

.philosophy-stack {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.philosophy-sheet {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% - 80px);
  height: calc(100% - 48px);
  border-radius: 28px;
  transform-origin: center;
}

.philosophy-sheet-back {
  background: #A9C5C9;
  transform: translate(-50%, -47%) rotate(-2.2deg);
  opacity: .72;
}

.philosophy-sheet-mid {
  background: #D7E7E7;
  transform: translate(-50%, -49%) rotate(1.6deg);
  opacity: .84;
}

.philosophy-card {
  position: relative;
  z-index: 2;
  min-height: 560px;
  padding: 72px 84px 54px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 12%, rgba(61,190,179,.08), transparent 24%),
    #FBFCFC;
  box-shadow: 0 34px 90px rgba(0,0,0,.18);
}

.philosophy-card .eyebrow {
  color: #15978D;
}

.philosophy-card h2 {
  max-width: 820px;
  margin: 18px auto 0;
  text-align: center;
  color: #0B2530;
  font-family: "Playfair Display", serif;
  font-size: clamp(54px, 5.6vw, 86px);
  font-style: italic;
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.05em;
}

.philosophy-lead {
  max-width: 760px;
  margin: 34px auto 0;
  text-align: center;
  color: rgba(11,37,48,.63);
  font-size: 17px;
  line-height: 1.7;
}

.philosophy-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 54px;
}

.philosophy-flow span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #0E3036;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.philosophy-flow span b {
  color: #2BB4A7;
  font-size: 9px;
  letter-spacing: .12em;
}

.philosophy-flow i {
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, rgba(13,43,47,.12), rgba(43,180,167,.46), rgba(13,43,47,.12));
}

.philosophy-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  margin-top: 58px;
  padding-top: 28px;
  border-top: 1px solid rgba(13,43,47,.12);
}

.philosophy-footer > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.philosophy-footer strong {
  color: #10282C;
  font-size: 14px;
}

.philosophy-footer small {
  color: rgba(13,43,47,.46);
  font-size: 11px;
}

.philosophy-link {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: #0D3034;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.philosophy-link span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0D3034;
  color: #6FDACC;
  transition: transform .25s ease;
}

.philosophy-link:hover span {
  transform: translate(3px,-3px);
}

@media (max-width: 900px) {
  .philosophy-card {
    padding: 58px 46px 44px;
  }

  .philosophy-flow {
    flex-wrap: wrap;
  }

  .philosophy-flow i {
    width: 24px;
  }
}

@media (max-width: 640px) {
  .philosophy-section {
    padding: 82px 0 88px;
  }

  .philosophy-card {
    min-height: 0;
    padding: 46px 24px 34px;
    border-radius: 20px;
  }

  .philosophy-sheet {
    width: calc(100% - 30px);
    border-radius: 20px;
  }

  .philosophy-card h2 {
    font-size: 48px;
  }

  .philosophy-lead {
    font-size: 14px;
  }

  .philosophy-flow {
    justify-content: flex-start;
    gap: 11px;
  }

  .philosophy-flow i {
    display: none;
  }

  .philosophy-flow span {
    padding: 8px 10px;
    border: 1px solid rgba(13,43,47,.10);
    border-radius: 999px;
  }

  .philosophy-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* ================================================================
   FINAL STATIC PASS
   Navigation / responsive / motion / footer / portfolio image system
   ================================================================ */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

section[id] {
  scroll-margin-top: 92px;
}

/* Header: sticky, calm, premium */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(248,250,249,.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(13,43,47,.065);
  transition:
    background .28s ease,
    box-shadow .28s ease,
    transform .28s ease;
}

.site-header.is-scrolled {
  background: rgba(248,250,249,.95);
  box-shadow: 0 10px 34px rgba(13,43,47,.065);
}

.site-header .nav-wrap {
  transition: min-height .28s ease, padding .28s ease;
}

.main-nav a:not(.nav-cta) {
  position: relative;
}

.main-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2DB7AA;
  opacity: 0;
  transform: translate(-50%, 5px) scale(.6);
  transition: opacity .22s ease, transform .22s ease;
}

.main-nav a:not(.nav-cta).is-active::after,
.main-nav a:not(.nav-cta):hover::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.main-nav a.is-active {
  color: #0A7770;
}

/* Work image handling */
.halo-card-inner {
  background: #E8F0EF;
}

.halo-card-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

/* Services titles must never clip during reveal */
.services-editorial,
.services-editorial-inner,
.services-editorial-grid,
.service-column,
.service-column-head {
  overflow: visible;
}

.service-column-head h3 {
  padding-block: .08em .12em;
}

/* Global interaction consistency */
.btn,
.nav-cta,
.service-editorial-list a,
.support-service,
.product-showcase-card,
.about-v2-card,
.philosophy-link,
.contact-v2-cta,
.footer-links a,
.footer-back-top {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid #37BDB0;
  outline-offset: 4px;
}

.reveal {
  transition:
    opacity .8s cubic-bezier(.2,.75,.2,1),
    transform .8s cubic-bezier(.2,.75,.2,1);
  transition-delay: var(--delay, 0ms);
}

/* Keep section rhythm clear */
.statement-v3,
.work-clean-intro,
.about-v2 {
  background-color: #FAFBFA;
}

.services-editorial {
  border-top: 1px solid rgba(13,43,47,.04);
  border-bottom: 1px solid rgba(13,43,47,.045);
}

.products-v2 {
  border-top: 1px solid rgba(13,43,47,.04);
  border-bottom: 1px solid rgba(13,43,47,.04);
}

/* Footer final */
.site-footer-v2 {
  padding: 0;
  background: #071B1E;
  color: #F6FAF9;
  border-top: 1px solid rgba(255,255,255,.06);
}

.footer-v2-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 48px;
  align-items: center;
  min-height: 132px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.footer-v2-top .brand {
  color: #F7FAF9;
}

.footer-statement {
  max-width: 520px;
  margin: 0;
  justify-self: center;
  color: rgba(247,250,249,.52);
  text-align: center;
  font-size: 13px;
  line-height: 1.65;
}

.footer-back-top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(247,250,249,.64);
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
}

.footer-back-top span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  transition: transform .22s ease, background .22s ease;
}

.footer-back-top:hover span {
  transform: translateY(-3px);
  background: rgba(255,255,255,.07);
}

.footer-v2-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 38px;
  align-items: center;
  min-height: 92px;
}

.footer-v2-tagline {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-v2-tagline span {
  color: rgba(247,250,249,.33);
  font-size: 9px;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.footer-v2-tagline strong {
  color: rgba(247,250,249,.72);
  font-size: 11px;
}

.site-footer-v2 .footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}

.site-footer-v2 .footer-links a {
  position: relative;
  color: rgba(247,250,249,.48);
  text-decoration: none;
  font-size: 10px;
  transition: color .2s ease;
}

.site-footer-v2 .footer-links a:hover {
  color: #77DDD2;
}

.site-footer-v2 .copyright {
  margin: 0;
  justify-self: end;
  color: rgba(247,250,249,.28);
  font-size: 9px;
}

/* Tablet */
@media (max-width: 1024px) {
  html {
    scroll-padding-top: 78px;
  }

  section[id] {
    scroll-margin-top: 78px;
  }

  .hero-banner-content,
  .takeover-grid-v2,
  .contact-v2-grid {
    gap: 54px;
  }

  .work-clean-stage {
    min-height: 650px;
  }

  .philosophy-card {
    min-height: auto;
  }

  .footer-v2-top {
    grid-template-columns: auto 1fr;
  }

  .footer-back-top {
    grid-column: 2;
    justify-self: end;
  }

  .footer-statement {
    justify-self: end;
    text-align: right;
  }

  .footer-v2-bottom {
    grid-template-columns: 1fr;
    padding-block: 28px;
    text-align: center;
  }

  .footer-v2-tagline,
  .site-footer-v2 .copyright {
    justify-self: center;
  }
}

/* Mobile navigation + section cleanup */
@media (max-width: 760px) {
  .site-header {
    backdrop-filter: blur(20px);
  }

  .main-nav {
    position: fixed;
    left: 14px;
    right: 14px;
    top: 72px;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 10px;
    border: 1px solid rgba(13,43,47,.09);
    border-radius: 18px;
    background: rgba(250,252,251,.98);
    box-shadow: 0 22px 50px rgba(13,43,47,.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }

  .main-nav.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .main-nav > a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 12px;
  }

  .main-nav > a:not(:last-child) {
    border-bottom: 1px solid rgba(13,43,47,.055);
  }

  .main-nav .nav-cta {
    justify-content: center;
    margin-top: 8px;
  }

  .main-nav a:not(.nav-cta)::after {
    display: none;
  }

  .services-editorial-head,
  .products-head,
  .work-intro-grid {
    gap: 26px;
  }

  .service-column-head h3 {
    font-size: 48px;
  }

  .services-support-strip {
    margin-top: 44px;
  }

  .work-clean-intro {
    padding-block: 64px 44px;
  }

  .work-clean-stage {
    height: 540px;
    min-height: 540px;
  }

  .work-clean-center-copy {
    width: 88vw;
  }

  .work-clean-center-copy h3 {
    font-size: 31px;
  }

  .takeover-v2,
  .products-v2,
  .about-v2,
  .philosophy-section,
  .contact-v2 {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .takeover-heading-block h2,
  .about-v2-intro h2,
  .contact-v2-main h2 {
    font-size: clamp(44px, 13vw, 56px);
  }

  .takeover-options-v2 {
    grid-template-columns: 1fr 1fr;
  }

  .product-showcase-grid {
    gap: 14px;
  }

  .philosophy-flow span {
    font-size: 11px;
  }

  .footer-v2-top {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-block: 32px;
    text-align: center;
  }

  .footer-v2-top .brand,
  .footer-statement,
  .footer-back-top {
    justify-self: center;
  }

  .footer-statement {
    text-align: center;
  }

  .footer-back-top {
    grid-column: auto;
  }

  .site-footer-v2 .footer-links {
    gap: 14px 18px;
  }
}

/* Reduced motion: preserve layout and accessibility */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ===== FINAL V2: animated philosophy section ===== */

.philosophy-v2 {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(45,188,176,.10), transparent 32%),
    linear-gradient(180deg, #0A2230 0%, #081A25 100%);
}

.philosophy-v2-orbits {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.philosophy-v2-ring {
  position: absolute;
  border: 1px solid rgba(101,217,205,.055);
  border-radius: 50%;
  animation: philosophyRingDrift 18s ease-in-out infinite alternate;
}

.philosophy-v2-ring.ring-a {
  width: 760px;
  height: 760px;
  left: -280px;
  top: -220px;
}

.philosophy-v2-ring.ring-b {
  width: 620px;
  height: 620px;
  right: -210px;
  bottom: -300px;
  animation-duration: 23s;
  animation-direction: alternate-reverse;
}

.philosophy-v2-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  animation: philosophyGlow 9s ease-in-out infinite alternate;
}

.philosophy-v2-glow.glow-a {
  width: 300px;
  height: 300px;
  left: 12%;
  top: 10%;
  background: rgba(60,205,192,.08);
}

.philosophy-v2-glow.glow-b {
  width: 260px;
  height: 260px;
  right: 10%;
  bottom: 12%;
  background: rgba(70,215,202,.055);
  animation-delay: -3s;
}

@keyframes philosophyRingDrift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(24px,-18px,0) scale(1.035); }
}

@keyframes philosophyGlow {
  from { transform: translate3d(0,0,0) scale(.95); opacity: .55; }
  to   { transform: translate3d(18px,-12px,0) scale(1.08); opacity: 1; }
}

.philosophy-v2 .philosophy-sheet-back {
  animation: philosophySheetBack 9s ease-in-out infinite alternate;
}

.philosophy-v2 .philosophy-sheet-mid {
  animation: philosophySheetMid 11s ease-in-out infinite alternate;
}

@keyframes philosophySheetBack {
  from { transform: translate(-50%, -47%) rotate(-2.2deg); }
  to   { transform: translate(-50%, -46%) rotate(-1.2deg); }
}

@keyframes philosophySheetMid {
  from { transform: translate(-50%, -49%) rotate(1.6deg); }
  to   { transform: translate(-50%, -50%) rotate(.6deg); }
}

.philosophy-card-v2 {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 8%, rgba(47,190,178,.10), transparent 25%),
    linear-gradient(135deg, #FBFCFC 0%, #F7FAF9 100%);
}

.philosophy-card-v2::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0 36%, rgba(255,255,255,.75) 46%, transparent 58%);
  transform: translateX(-120%);
  animation: philosophySheen 10s ease-in-out infinite;
}

@keyframes philosophySheen {
  0%, 66% { transform: translateX(-120%); }
  82%, 100% { transform: translateX(120%); }
}

.philosophy-v2-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.philosophy-v2-kicker {
  color: rgba(13,43,47,.38);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.philosophy-card-v2 h2 {
  position: relative;
  z-index: 2;
}

.ph-title-line {
  display: block;
  opacity: 0;
  transform: translateY(30px);
}

.philosophy-wrap.is-visible .ph-title-line {
  animation: philosophyTitleIn .9s cubic-bezier(.2,.75,.2,1) forwards;
}

.philosophy-wrap.is-visible .ph-title-line:nth-child(2) {
  animation-delay: .14s;
}

@keyframes philosophyTitleIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.philosophy-card-v2 .philosophy-lead {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(18px);
}

.philosophy-wrap.is-visible .philosophy-lead {
  animation: philosophyCopyIn .8s .28s cubic-bezier(.2,.75,.2,1) forwards;
}

@keyframes philosophyCopyIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* animated product journey */
.philosophy-flow-v2 {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 62px;
  padding-top: 24px;
}

.flow-progress {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 1px;
}

.flow-progress-line {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(44,180,167,.10),
      rgba(44,180,167,.36),
      rgba(44,180,167,.10));
}

.flow-progress-dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #35BBAE;
  box-shadow:
    0 0 0 6px rgba(53,187,174,.10),
    0 0 26px rgba(53,187,174,.35);
  transform: translate(-50%,-50%);
  animation: philosophyProgress 8s cubic-bezier(.45,0,.55,1) infinite;
}

@keyframes philosophyProgress {
  0%   { left: 0%; }
  20%  { left: 25%; }
  40%  { left: 50%; }
  60%  { left: 75%; }
  80%,100% { left: 100%; }
}

.flow-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: #0E3036;
  text-align: center;
  opacity: .46;
  transition: opacity .4s ease, transform .4s ease;
}

.flow-step::before {
  content: "";
  position: absolute;
  top: -29px;
  width: 8px;
  height: 8px;
  border: 2px solid #F8FBFA;
  border-radius: 50%;
  background: #A6C4C0;
  box-shadow: 0 0 0 1px rgba(13,43,47,.12);
}

.flow-step b {
  color: #2BB4A7;
  font-size: 9px;
  letter-spacing: .12em;
}

.flow-step em {
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
}

.philosophy-wrap.is-visible .flow-step {
  animation: flowStepPulse 8s ease-in-out infinite;
}

.philosophy-wrap.is-visible .flow-step:nth-of-type(2) { animation-delay: 0s; }
.philosophy-wrap.is-visible .flow-step:nth-of-type(3) { animation-delay: 1.6s; }
.philosophy-wrap.is-visible .flow-step:nth-of-type(4) { animation-delay: 3.2s; }
.philosophy-wrap.is-visible .flow-step:nth-of-type(5) { animation-delay: 4.8s; }
.philosophy-wrap.is-visible .flow-step:nth-of-type(6) { animation-delay: 6.4s; }

@keyframes flowStepPulse {
  0%, 14%, 100% {
    opacity: .46;
    transform: translateY(0);
  }
  4%, 10% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.philosophy-v2-points {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  margin-top: 48px;
  overflow: hidden;
  border: 1px solid rgba(13,43,47,.10);
  border-radius: 16px;
  background: rgba(13,43,47,.08);
}

.philosophy-v2-points > div {
  min-height: 112px;
  padding: 22px 24px;
  background: rgba(255,255,255,.64);
  transition: background .28s ease, transform .28s ease;
}

.philosophy-v2-points > div:hover {
  background: rgba(255,255,255,.94);
}

.philosophy-v2-points span {
  display: block;
  margin-bottom: 14px;
  color: #32B8AA;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
}

.philosophy-v2-points p {
  margin: 0;
  color: rgba(13,43,47,.62);
  font-size: 12px;
  line-height: 1.55;
}

.philosophy-card-v2 .philosophy-footer {
  position: relative;
  z-index: 2;
}

.philosophy-card-v2 .philosophy-link span {
  animation: philosophyCtaPulse 3.6s ease-in-out infinite;
}

@keyframes philosophyCtaPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(52,189,176,0); }
  50% { box-shadow: 0 0 0 8px rgba(52,189,176,.08); }
}

@media (max-width: 900px) {
  .philosophy-flow-v2 {
    gap: 10px;
  }

  .philosophy-v2-points {
    grid-template-columns: 1fr;
  }

  .philosophy-v2-points > div {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .philosophy-v2-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .philosophy-v2-kicker {
    display: none;
  }

  .philosophy-flow-v2 {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-top: 0;
  }

  .flow-progress {
    display: none;
  }

  .flow-step {
    align-items: flex-start;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(13,43,47,.09);
    border-radius: 999px;
    background: rgba(255,255,255,.6);
    text-align: left;
    opacity: .8;
  }

  .flow-step::before {
    display: none;
  }

  .philosophy-v2-points {
    margin-top: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .philosophy-v2-ring,
  .philosophy-v2-glow,
  .philosophy-sheet,
  .philosophy-card-v2::after,
  .flow-progress-dot,
  .flow-step,
  .philosophy-link span,
  .ph-title-line,
  .philosophy-lead {
    animation: none !important;
  }

  .ph-title-line,
  .philosophy-lead {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   FINAL V3 — concise homepage / animated Why Manta carousel
   ============================================================ */

.philosophy-section {
  display: none !important;
}

.about-carousel-section {
  position: relative;
  overflow: hidden;
  padding: 96px 0 104px;
  background:
    radial-gradient(circle at 82% 12%, rgba(55,190,178,.08), transparent 28%),
    #FAFBFA;
}

.about-carousel-shell {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 72px;
  align-items: center;
}

.about-carousel-head h2 {
  max-width: 500px;
  margin: 16px 0 0;
  color: #10282C;
  font-size: clamp(50px, 4.7vw, 70px);
  line-height: .94;
  letter-spacing: -.06em;
}

.about-carousel-head p {
  max-width: 400px;
  margin: 22px 0 0;
  color: rgba(13,43,47,.54);
  font-size: 14px;
  line-height: 1.65;
}

.about-carousel-stage {
  position: relative;
  min-height: 360px;
}

.about-stack {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.about-stack-sheet {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84%;
  height: 76%;
  border-radius: 22px;
  transform-origin: center;
  transition: transform .6s cubic-bezier(.2,.75,.2,1);
}

.about-stack-back {
  background: #A9C8C6;
  transform: translate(-50%,-47%) rotate(-3.2deg);
}

.about-stack-mid {
  background: #D6E6E4;
  transform: translate(-50%,-49%) rotate(2.2deg);
}

.about-carousel-stage:hover .about-stack-back {
  transform: translate(-50%,-46%) rotate(-4.1deg);
}

.about-carousel-stage:hover .about-stack-mid {
  transform: translate(-50%,-50%) rotate(3deg);
}

.about-slide {
  position: absolute;
  inset: 24px 54px 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 52px;
  border: 1px solid rgba(13,43,47,.08);
  border-radius: 22px;
  background:
    radial-gradient(circle at 86% 12%, rgba(50,188,176,.08), transparent 26%),
    #FCFDFD;
  box-shadow: 0 24px 58px rgba(13,43,47,.10);
  opacity: 0;
  visibility: hidden;
  transform: translateX(38px) scale(.985);
  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.2,.75,.2,1),
    visibility .55s;
}

.about-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1);
  z-index: 3;
}

.about-slide.is-exiting-left {
  opacity: 0;
  transform: translateX(-38px) scale(.985);
}

.about-slide-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 34px;
}

.about-slide-no {
  color: #2CB7AA;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}

.about-slide-label {
  color: rgba(13,43,47,.35);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.about-slide h3 {
  max-width: 650px;
  margin: 0;
  color: #0D2C31;
  font-family: "Playfair Display", serif;
  font-size: clamp(42px, 4.2vw, 62px);
  font-style: italic;
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.05em;
}

.about-slide p {
  max-width: 620px;
  margin: 22px 0 0;
  color: rgba(13,43,47,.60);
  font-size: 15px;
  line-height: 1.6;
}

.about-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(13,43,47,.14);
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: #0D3034;
  font-size: 23px;
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform .22s ease, background .22s ease, color .22s ease;
}

.about-arrow:hover {
  background: #0D3034;
  color: #fff;
}

.about-arrow-prev { left: 8px; }
.about-arrow-next { right: 8px; }
.about-arrow-prev:hover { transform: translate(-3px,-50%); }
.about-arrow-next:hover { transform: translate(3px,-50%); }

.about-carousel-dots {
  position: absolute;
  left: 50%;
  bottom: 5px;
  z-index: 6;
  display: flex;
  gap: 7px;
  transform: translateX(-50%);
}

.about-carousel-dots button {
  width: 18px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(13,43,47,.14);
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}

.about-carousel-dots button.is-active {
  width: 34px;
  background: #34BCAE;
}

/* Work stays visual-only */
.work-clean-card {
  pointer-events: none !important;
}

.work-clean-center-copy h3 {
  font-size: clamp(34px, 3vw, 50px);
}

/* Projects page */
.projects-page {
  margin: 0;
  background: #F7FAF9;
}

.projects-index-hero {
  padding: 120px 0 72px;
  background:
    radial-gradient(circle at 84% 12%, rgba(48,188,176,.12), transparent 28%),
    #F7FAF9;
}

.projects-index-hero h1 {
  max-width: 900px;
  margin: 18px 0 0;
  color: #10282C;
  font-size: clamp(64px, 7vw, 110px);
  line-height: .9;
  letter-spacing: -.07em;
}

.projects-index-hero p {
  margin: 26px 0 0;
  color: rgba(13,43,47,.54);
  font-size: 16px;
}

.projects-index-grid-section {
  padding: 0 0 120px;
}

.projects-index-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
}

.projects-index-card {
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(13,43,47,.08);
}

.projects-index-card img {
  width: 100%;
  aspect-ratio: 1.45;
  display: block;
  object-fit: cover;
}

.projects-index-card span {
  display: block;
  padding: 18px 20px;
  color: #10282C;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 980px) {
  .about-carousel-shell {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}

@media (max-width: 640px) {
  .about-carousel-section {
    padding: 72px 0 78px;
  }

  .about-carousel-stage {
    min-height: 360px;
  }

  .about-slide {
    inset: 18px 18px 42px;
    padding: 32px 28px;
  }

  .about-slide-top {
    margin-bottom: 28px;
  }

  .about-slide h3 {
    font-size: 42px;
  }

  .about-slide p {
    font-size: 14px;
  }

  .about-arrow {
    width: 38px;
    height: 38px;
  }

  .projects-index-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== FINAL V4: tighter stacked carousel ===== */
.about-carousel-stage {
  min-height: 330px !important;
}

.about-stack-sheet {
  width: 79% !important;
  height: 70% !important;
  border-radius: 20px !important;
}

.about-stack-back {
  transform: translate(-50%,-45%) rotate(-4deg) !important;
}

.about-stack-mid {
  transform: translate(-50%,-48%) rotate(2.8deg) !important;
}

.about-slide {
  inset: 22px 72px 40px !important;
  padding: 34px 48px !important;
  border-radius: 20px !important;
  box-shadow: 0 22px 52px rgba(13,43,47,.11) !important;
}

.about-slide h3 {
  font-size: clamp(40px, 4vw, 58px) !important;
}

.about-slide-top {
  margin-bottom: 28px !important;
}

.about-arrow-prev { left: 26px !important; }
.about-arrow-next { right: 26px !important; }

.about-carousel-stage.is-switching .about-stack-back {
  animation: stackBackFlip .58s cubic-bezier(.2,.75,.2,1);
}
.about-carousel-stage.is-switching .about-stack-mid {
  animation: stackMidFlip .58s cubic-bezier(.2,.75,.2,1);
}

@keyframes stackBackFlip {
  0% { transform: translate(-50%,-45%) rotate(-4deg); }
  50% { transform: translate(-52%,-43%) rotate(-6deg); }
  100% { transform: translate(-50%,-45%) rotate(-4deg); }
}
@keyframes stackMidFlip {
  0% { transform: translate(-50%,-48%) rotate(2.8deg); }
  50% { transform: translate(-48%,-46%) rotate(4.5deg); }
  100% { transform: translate(-50%,-48%) rotate(2.8deg); }
}

/* ===== Projects page ===== */
.projects-page {
  background: #F5F7F6;
  color: #10282C;
}

.projects-index-hero {
  padding: 108px 0 64px !important;
}

.projects-index-hero .projects-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.projects-index-hero h1 {
  max-width: 940px;
  font-size: clamp(62px, 7vw, 108px) !important;
}

.projects-index-hero .projects-sub {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: end;
  margin-top: 28px;
}

.projects-index-hero .projects-sub p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(13,43,47,.56);
}

.projects-filter-bar {
  position: sticky;
  top: 86px;
  z-index: 20;
  border-top: 1px solid rgba(13,43,47,.08);
  border-bottom: 1px solid rgba(13,43,47,.08);
  background: rgba(247,250,249,.92);
  backdrop-filter: blur(16px);
}

.projects-filter-inner {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 14px 0;
}

.projects-filter-inner button {
  flex: 0 0 auto;
  border: 1px solid rgba(13,43,47,.10);
  border-radius: 999px;
  padding: 9px 13px;
  background: #fff;
  color: rgba(13,43,47,.58);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.projects-filter-inner button.is-active {
  background: #0D3034;
  color: #fff;
  border-color: #0D3034;
}

.projects-index-grid-section {
  padding: 42px 0 120px !important;
}

.projects-index-grid {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 22px !important;
}

.projects-index-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px !important;
  background: #fff;
  border: 1px solid rgba(13,43,47,.08);
  transition: transform .35s ease, box-shadow .35s ease;
}

.projects-index-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(13,43,47,.10);
}

.projects-index-card a {
  color: inherit;
  text-decoration: none;
}

.projects-index-media {
  overflow: hidden;
  background: #E8EFEE;
}

.projects-index-media img {
  width: 100%;
  aspect-ratio: 1.42;
  display: block;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.2,.75,.2,1);
}

.projects-index-card:hover img {
  transform: scale(1.025);
}

.projects-index-info {
  padding: 20px 22px 24px;
}

.projects-index-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
}

.projects-index-meta span {
  padding: 6px 8px;
  border-radius: 999px;
  background: #EFF4F3;
  color: rgba(13,43,47,.55);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.projects-index-info h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.02;
  letter-spacing: -.04em;
}

.projects-index-info p {
  margin: 12px 0 0;
  color: rgba(13,43,47,.55);
  font-size: 12px;
  line-height: 1.6;
}

/* ===== Project detail ===== */
.case-page {
  margin: 0;
  background: #F6F8F7;
  color: #10282C;
}

.case-hero {
  padding: 110px 0 64px;
}

.case-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 70px;
  align-items: end;
}

.case-hero h1 {
  margin: 16px 0 0;
  max-width: 900px;
  font-size: clamp(66px, 7vw, 112px);
  line-height: .9;
  letter-spacing: -.07em;
}

.case-hero-copy {
  color: rgba(13,43,47,.58);
  font-size: 16px;
  line-height: 1.7;
}

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.case-tags span {
  padding: 8px 10px;
  border: 1px solid rgba(13,43,47,.10);
  border-radius: 999px;
  background: #fff;
  font-size: 9px;
  font-weight: 700;
  color: rgba(13,43,47,.60);
}

.case-cover {
  padding-bottom: 90px;
}
.case-cover img {
  width: 100%;
  border-radius: 24px;
  display: block;
  object-fit: cover;
  max-height: 820px;
}

.case-section {
  padding: 92px 0;
  border-top: 1px solid rgba(13,43,47,.08);
}

.case-two-col {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 90px;
}

.case-section h2 {
  margin: 0;
  font-size: clamp(46px,4.8vw,72px);
  line-height: .95;
  letter-spacing: -.05em;
}

.case-section p {
  margin: 0;
  color: rgba(13,43,47,.58);
  font-size: 15px;
  line-height: 1.8;
}

.case-gallery {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
  margin-top: 52px;
}

.case-gallery img {
  width: 100%;
  display: block;
  border-radius: 18px;
  background: #E8EFEE;
  object-fit: cover;
}

.case-next {
  margin-top: 90px;
  padding: 50px 0;
  border-top: 1px solid rgba(13,43,47,.08);
}
.case-next a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #10282C;
  text-decoration: none;
}
.case-next strong {
  font-size: clamp(38px,4vw,62px);
  letter-spacing: -.05em;
}
.case-next span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #0D3034;
  color: #fff;
}

@media (max-width: 900px) {
  .projects-index-hero .projects-sub,
  .case-hero-grid,
  .case-two-col {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .projects-index-grid {
    grid-template-columns: 1fr !important;
  }
  .case-gallery {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================
   V5 — rebuilt deck + editorial project index + full case study
   =================================================================== */

/* WHY MANTA DECK */
.manta-proof{
  padding:104px 0 122px;
  overflow:hidden;
  background:
    radial-gradient(circle at 80% 20%,rgba(53,192,179,.10),transparent 25%),
    linear-gradient(180deg,#0a2630 0%,#071d26 100%);
}
.manta-proof-head{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:72px;
  align-items:end;
  margin-bottom:42px;
}
.manta-proof-head .eyebrow{color:#6dd7cc}
.manta-proof-head h2{
  margin:0;color:#f7faf9;font-size:clamp(50px,5vw,78px);
  line-height:.93;letter-spacing:-.06em;
}
.manta-proof-head p{
  max-width:430px;margin:0 0 4px;color:rgba(247,250,249,.50);
  font-size:14px;line-height:1.7;
}
.manta-deck-wrap{max-width:1100px}
.manta-deck{
  position:relative;
  height:410px;
  margin:0 auto;
}
.manta-deck-sheet{
  position:absolute;left:50%;top:50%;
  width:78%;height:74%;
  border-radius:24px;
  transform-origin:center;
  transition:transform .55s cubic-bezier(.2,.75,.2,1),opacity .55s;
}
.manta-deck-sheet-3{
  background:#6c9d9a;opacity:.42;
  transform:translate(-50%,-42%) rotate(-4.6deg);
}
.manta-deck-sheet-2{
  background:#aac8c5;opacity:.72;
  transform:translate(-50%,-45%) rotate(3.8deg);
}
.manta-deck-sheet-1{
  background:#d9e8e6;opacity:.96;
  transform:translate(-50%,-48%) rotate(-2deg);
}
.manta-deck-card{
  position:absolute;
  left:50%;top:50%;z-index:3;
  width:72%;height:68%;
  box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;
  padding:38px 54px;
  border:1px solid rgba(13,43,47,.08);
  border-radius:24px;
  background:
    radial-gradient(circle at 86% 10%,rgba(49,190,177,.10),transparent 28%),
    #fcfdfd;
  box-shadow:0 28px 70px rgba(0,0,0,.20);
  opacity:0;visibility:hidden;
  transform:translate(-44%,-50%) rotate(4deg) scale(.96);
  transition:opacity .5s ease,transform .55s cubic-bezier(.2,.75,.2,1),visibility .5s;
}
.manta-deck-card.is-active{
  opacity:1;visibility:visible;
  transform:translate(-50%,-50%) rotate(0deg) scale(1);
}
.manta-deck-card.is-leaving-left{
  opacity:0;
  transform:translate(-58%,-50%) rotate(-4deg) scale(.97);
}
.manta-deck-card.is-entering-right{
  opacity:0;
  transform:translate(-42%,-50%) rotate(4deg) scale(.97);
}
.manta-deck-meta{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:34px;
}
.manta-deck-meta span{
  color:#28b8aa;font-size:10px;font-weight:800;letter-spacing:.14em;
}
.manta-deck-meta b{
  color:rgba(13,43,47,.33);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
}
.manta-deck-card h3{
  margin:0;color:#0d2c31;
  font-family:"Playfair Display",serif;
  font-size:clamp(44px,4.6vw,66px);
  font-style:italic;font-weight:500;line-height:.96;letter-spacing:-.05em;
}
.manta-deck-card p{
  max-width:660px;margin:20px 0 0;
  color:rgba(13,43,47,.61);font-size:15px;line-height:1.65;
}
.manta-deck-arrow{
  position:absolute;z-index:8;top:50%;
  width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.20);
  background:#f9fbfb;color:#0d3034;
  font-size:25px;cursor:pointer;
  transform:translateY(-50%);
  transition:transform .2s,background .2s,color .2s;
}
.manta-deck-prev{left:4%}
.manta-deck-next{right:4%}
.manta-deck-arrow:hover{background:#4bc9bc;color:#07292c}
.manta-deck-prev:hover{transform:translate(-3px,-50%)}
.manta-deck-next:hover{transform:translate(3px,-50%)}
.manta-deck-progress{
  position:absolute;left:50%;bottom:12px;z-index:8;
  display:flex;gap:8px;transform:translateX(-50%);
}
.manta-deck-progress button{
  width:22px;height:4px;padding:0;border:0;border-radius:99px;
  background:rgba(255,255,255,.22);cursor:pointer;transition:.25s;
}
.manta-deck-progress button.is-active{width:42px;background:#55cfc3}
.manta-deck.is-flipping .manta-deck-sheet-3{animation:mantaSheet3 .55s ease}
.manta-deck.is-flipping .manta-deck-sheet-2{animation:mantaSheet2 .55s ease}
.manta-deck.is-flipping .manta-deck-sheet-1{animation:mantaSheet1 .55s ease}
@keyframes mantaSheet3{50%{transform:translate(-53%,-40%) rotate(-6.5deg)}}
@keyframes mantaSheet2{50%{transform:translate(-47%,-44%) rotate(5.5deg)}}
@keyframes mantaSheet1{50%{transform:translate(-51%,-46%) rotate(-3deg)}}

/* PROJECT INDEX */
.manta-projects-page{margin:0;background:#f6f8f7;color:#10282c}
.work-index-hero{padding:108px 0 72px}
.work-index-kicker{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  color:rgba(13,43,47,.40);font-size:10px;text-transform:uppercase;letter-spacing:.12em;
}
.work-index-hero h1{
  max-width:1100px;margin:26px 0 0;
  font-size:clamp(72px,8vw,126px);line-height:.86;letter-spacing:-.075em;color:#10282c;
}
.work-index-intro{
  display:grid;grid-template-columns:1fr 420px;
  gap:60px;align-items:end;margin-top:42px;
}
.work-index-intro p{
  grid-column:2;margin:0;color:rgba(13,43,47,.58);font-size:16px;line-height:1.65;
}
.work-index-intro span{
  grid-column:1;grid-row:1;color:rgba(13,43,47,.36);font-size:10px;text-transform:uppercase;letter-spacing:.12em;
}
.work-filter-strip{
  position:sticky;top:86px;z-index:20;
  border-block:1px solid rgba(13,43,47,.08);
  background:rgba(246,248,247,.91);backdrop-filter:blur(18px);
}
.work-filter-row{display:flex;gap:8px;overflow:auto;padding:13px 0}
.work-filter-row button{
  flex:0 0 auto;padding:9px 13px;border-radius:999px;
  border:1px solid rgba(13,43,47,.10);background:#fff;
  color:rgba(13,43,47,.55);font-size:10px;font-weight:700;cursor:pointer;
}
.work-filter-row button.is-active{background:#0d3034;color:#fff;border-color:#0d3034}
.work-index-list{padding:44px 0 120px}
#projectsGrid{display:grid;grid-template-columns:repeat(12,1fr);gap:26px}
.work-case{grid-column:span 6}
.work-case-wide{grid-column:span 12}
.work-case a{display:block;color:inherit;text-decoration:none}
.work-case-media{
  position:relative;overflow:hidden;border-radius:24px;background:#e6eeed;
}
.work-case:not(.work-case-wide) .work-case-media{aspect-ratio:1.18}
.work-case-wide .work-case-media{aspect-ratio:2.05}
.work-case-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .65s cubic-bezier(.2,.75,.2,1);
}
.work-case:hover img{transform:scale(1.025)}
.work-case-open{
  position:absolute;right:18px;top:18px;
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.92);color:#0d3034;
  transition:transform .25s,background .25s,color .25s;
}
.work-case:hover .work-case-open{transform:translate(3px,-3px);background:#0d3034;color:#fff}
.work-case-copy{
  display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;
  padding:20px 2px 42px;border-bottom:1px solid rgba(13,43,47,.10);
}
.work-case-copy span{
  color:#25a99e;font-size:9px;text-transform:uppercase;letter-spacing:.12em;
}
.work-case-copy h2{
  margin:8px 0 0;font-size:38px;line-height:1;letter-spacing:-.05em;
}
.work-case-copy p{
  margin:0;color:rgba(13,43,47,.55);font-size:13px;line-height:1.65;
}
.work-index-cta{
  padding:100px 0 110px;background:#0b2a2e;color:#f7faf9;
}
.work-index-cta h2{
  margin:16px 0 28px;max-width:760px;
  font-size:clamp(54px,6vw,86px);line-height:.92;letter-spacing:-.065em;
}
.work-index-cta .eyebrow{color:#68d7cb}
.work-index-cta .btn{background:#fff;color:#0d3034}

/* CASE STUDY */
.manta-case-page{margin:0;background:#f7f9f8;color:#10282c}
.case-v2-hero{padding:110px 0 66px}
.case-v2-meta{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  color:rgba(13,43,47,.42);font-size:10px;text-transform:uppercase;letter-spacing:.12em;
}
.case-v2-title-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:end;margin-top:30px;
}
.case-v2-title-grid h1{
  margin:0;font-size:clamp(78px,9vw,140px);line-height:.84;letter-spacing:-.08em;
}
.case-v2-title-grid p{
  margin:0 0 10px;color:rgba(13,43,47,.60);font-size:17px;line-height:1.7;
}
.case-v2-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.case-v2-pills span,.case-v2-result-pills span{
  padding:8px 10px;border:1px solid rgba(13,43,47,.10);border-radius:999px;
  background:#fff;color:rgba(13,43,47,.58);font-size:9px;font-weight:700;
}
.case-v2-cover{padding-bottom:92px}
.case-v2-cover-frame{
  overflow:hidden;border-radius:28px;background:#e3ecea;
}
.case-v2-cover img{display:block;width:100%;max-height:820px;object-fit:cover}
.case-v2-facts{border-block:1px solid rgba(13,43,47,.08)}
.case-v2-facts-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.case-v2-facts-grid>div{padding:30px 26px;border-right:1px solid rgba(13,43,47,.08)}
.case-v2-facts-grid>div:last-child{border-right:0}
.case-v2-facts-grid span{
  display:block;margin-bottom:9px;color:#29afa4;font-size:9px;text-transform:uppercase;letter-spacing:.12em;
}
.case-v2-facts-grid strong{font-size:13px;font-weight:700;line-height:1.5}
.case-v2-section{padding:106px 0;border-bottom:1px solid rgba(13,43,47,.07)}
.case-v2-text-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:100px}
.case-v2-text-grid h2{
  margin:16px 0 0;font-size:clamp(50px,5vw,76px);line-height:.94;letter-spacing:-.06em;
}
.case-v2-text-grid p{
  margin:0;max-width:720px;color:rgba(13,43,47,.60);font-size:16px;line-height:1.85;
}
.case-v2-visual{padding:90px 0;background:#0a292d}
.case-v2-visual-inner{
  position:relative;min-height:640px;display:grid;place-items:center;overflow:hidden;
  border-radius:30px;background:
    radial-gradient(circle at 50% 50%,rgba(73,207,194,.18),transparent 28%),
    linear-gradient(135deg,#10383d,#0b2529);
}
.case-v2-device{
  position:absolute;width:min(620px,55%);border-radius:24px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.10);
}
.case-v2-device img{width:100%;display:block}
.case-v2-device-a{transform:translate(-20%,-2%) rotate(-6deg)}
.case-v2-device-b{transform:translate(28%,8%) rotate(6deg)}
.case-v2-floating-label{
  position:absolute;left:30px;bottom:28px;padding:9px 12px;border-radius:999px;
  background:#f7faf9;color:#0c2f33;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;
}
.case-v2-process{padding:110px 0;background:#edf4f3}
.case-v2-process-head{display:grid;grid-template-columns:.75fr 1.25fr;gap:80px;align-items:end}
.case-v2-process-head h2{
  margin:0;font-size:clamp(54px,5.5vw,82px);line-height:.92;letter-spacing:-.065em;
}
.case-v2-process-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:62px;
  background:rgba(13,43,47,.10);border:1px solid rgba(13,43,47,.10);border-radius:18px;overflow:hidden;
}
.case-v2-process-grid article{padding:28px 26px;background:rgba(255,255,255,.75)}
.case-v2-process-grid span{color:#28b2a6;font-size:9px;font-weight:800;letter-spacing:.12em}
.case-v2-process-grid h3{margin:28px 0 10px;font-size:25px;letter-spacing:-.04em}
.case-v2-process-grid p{margin:0;color:rgba(13,43,47,.54);font-size:12px;line-height:1.65}
.case-v2-gallery{padding:110px 0}
.case-v2-gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.case-v2-gallery figure{margin:0;overflow:hidden;border-radius:22px;background:#e8efee}
.case-v2-gallery figure.large{grid-column:1/-1}
.case-v2-gallery img{width:100%;display:block;aspect-ratio:1.45;object-fit:cover}
.case-v2-gallery figure.large img{aspect-ratio:2.2}
.case-v2-result{padding:118px 0;background:#0a292d;color:#f7faf9}
.case-v2-result .eyebrow{color:#68d7cb}
.case-v2-result blockquote{
  max-width:1050px;margin:24px 0 42px;
  font-family:"Playfair Display",serif;font-style:italic;font-weight:500;
  font-size:clamp(46px,5vw,74px);line-height:1;letter-spacing:-.05em;
}
.case-v2-result-pills{display:flex;flex-wrap:wrap;gap:8px}
.case-v2-result-pills span{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.62)}
.case-v2-next{padding:86px 0 104px}
.case-v2-next a{
  display:flex;align-items:center;justify-content:space-between;gap:40px;
  padding-top:34px;border-top:1px solid rgba(13,43,47,.10);
  color:#10282c;text-decoration:none;
}
.case-v2-next h2{margin:12px 0 0;font-size:clamp(54px,6vw,90px);letter-spacing:-.07em}
.case-v2-next-arrow{
  display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:#0d3034;color:#fff;font-size:22px;
}

@media(max-width:900px){
  .manta-proof-head,.work-index-intro,.case-v2-title-grid,.case-v2-text-grid,.case-v2-process-head{grid-template-columns:1fr}
  .work-index-intro p,.work-index-intro span{grid-column:auto;grid-row:auto}
  .case-v2-process-grid{grid-template-columns:1fr 1fr}
  .case-v2-facts-grid{grid-template-columns:1fr}
  .case-v2-facts-grid>div{border-right:0;border-bottom:1px solid rgba(13,43,47,.08)}
}
@media(max-width:640px){
  .manta-proof{padding:76px 0 88px}
  .manta-proof-head{gap:28px}
  .manta-deck{height:390px}
  .manta-deck-sheet{width:88%;height:70%}
  .manta-deck-card{width:82%;height:66%;padding:30px 28px}
  .manta-deck-card h3{font-size:40px}
  .manta-deck-prev{left:0}.manta-deck-next{right:0}
  #projectsGrid{display:block}
  .work-case{margin-bottom:44px}
  .work-case-copy{grid-template-columns:1fr;gap:14px}
  .case-v2-process-grid{grid-template-columns:1fr}
  .case-v2-gallery-grid{grid-template-columns:1fr}
  .case-v2-gallery figure.large{grid-column:auto}
  .case-v2-visual-inner{min-height:440px}
  .case-v2-device{width:74%}
}

/* ===================================================================
   V6 — Projects page: dark editorial 2 / 1 / 2 / 1 rhythm
   =================================================================== */

.manta-projects-dark {
  margin: 0;
  background:
    radial-gradient(circle at 80% 8%, rgba(52, 193, 181, .09), transparent 28%),
    linear-gradient(180deg, #082529 0%, #061c20 100%);
  color: #F4F8F7;
}

.projects-dark-header {
  background: rgba(7, 29, 33, .88) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.projects-dark-header .brand,
.projects-dark-header .main-nav a:not(.nav-cta) {
  color: #F4F8F7;
}

.projects-dark-header .brand-copy small {
  color: rgba(244,248,247,.46);
}

.projects-dark-header .main-nav a:not(.nav-cta).is-active {
  color: #70DCD1;
}

.projects-dark-header .nav-cta {
  background: #F3F8F7;
  color: #08272B;
}

.projects-dark-hero {
  position: relative;
  overflow: hidden;
  padding: 118px 0 88px;
}

.projects-dark-hero::after {
  content: "";
  position: absolute;
  width: 720px;
  height: 720px;
  right: -280px;
  top: -260px;
  border: 1px solid rgba(103,216,205,.06);
  border-radius: 50%;
  box-shadow:
    0 0 0 90px rgba(103,216,205,.025),
    0 0 0 180px rgba(103,216,205,.015);
  pointer-events: none;
}

.projects-dark-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.projects-dark-kicker .eyebrow {
  color: #67D6CB;
}

.projects-count {
  color: rgba(244,248,247,.32);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.projects-dark-hero h1 {
  max-width: 1180px;
  margin: 28px 0 0;
  color: #F6FAF9;
  font-size: clamp(72px, 8vw, 132px);
  line-height: .86;
  letter-spacing: -.075em;
}

.projects-dark-intro {
  display: grid;
  grid-template-columns: 1fr 470px;
  gap: 60px;
  align-items: end;
  margin-top: 52px;
}

.projects-dark-intro p {
  grid-column: 2;
  margin: 0;
  color: rgba(244,248,247,.56);
  font-size: 16px;
  line-height: 1.7;
}

.projects-dark-intro > span {
  grid-column: 1;
  grid-row: 1;
  color: rgba(244,248,247,.28);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.projects-dark-filter {
  position: sticky;
  top: 82px;
  z-index: 30;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(6, 28, 32, .88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.projects-dark-filter-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 14px 0;
  scrollbar-width: none;
}

.projects-dark-filter-row::-webkit-scrollbar {
  display: none;
}

.projects-dark-filter-row button {
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  color: rgba(244,248,247,.48);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: .25s ease;
}

.projects-dark-filter-row button:hover,
.projects-dark-filter-row button.is-active {
  border-color: #61D0C4;
  background: #61D0C4;
  color: #07282B;
}

.projects-dark-list {
  padding: 54px 0 130px;
}

.projects-dark-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 24px;
}

.project-dark-card.project-featured {
  grid-column: 1 / -1;
}

.project-dark-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.project-dark-media {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 40%, rgba(72,202,190,.16), transparent 28%),
    #0B3034;
}

.project-half .project-dark-media {
  aspect-ratio: 1.14;
}

.project-featured .project-dark-media {
  aspect-ratio: 2.0;
}

.project-dark-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.75,.2,1), filter .45s ease;
}

.project-dark-card:hover .project-dark-media img {
  transform: scale(1.025);
}

.project-dark-arrow {
  position: absolute;
  right: 18px;
  top: 18px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(248,251,250,.94);
  color: #082B2E;
  font-size: 17px;
  transition: transform .25s ease, background .25s ease;
}

.project-dark-card:hover .project-dark-arrow {
  transform: translate(3px,-3px);
  background: #69D8CD;
}

.project-dark-number {
  position: absolute;
  left: 18px;
  bottom: 16px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(7,29,33,.58);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.68);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
}

.project-dark-copy {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 34px;
  padding: 20px 2px 50px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.project-featured .project-dark-copy {
  grid-template-columns: .65fr 1.35fr;
}

.project-dark-title > span {
  color: #5BCBBF;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.project-dark-title h2 {
  margin: 8px 0 0;
  color: #F5F9F8;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -.045em;
}

.project-featured .project-dark-title h2 {
  font-size: clamp(38px, 4vw, 58px);
}

.project-dark-summary p {
  max-width: 650px;
  margin: 0;
  color: rgba(244,248,247,.50);
  font-size: 12px;
  line-height: 1.65;
}

.project-dark-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.project-dark-tags span {
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: rgba(244,248,247,.34);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.projects-dark-cta {
  padding: 110px 0 120px;
  border-top: 1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(circle at 20% 40%, rgba(55,194,181,.12), transparent 25%),
    #09272B;
}

.projects-dark-cta-inner .eyebrow {
  color: #65D4C8;
}

.projects-dark-cta h2 {
  max-width: 900px;
  margin: 18px 0 34px;
  color: #F5F9F8;
  font-size: clamp(58px, 6.5vw, 96px);
  line-height: .9;
  letter-spacing: -.07em;
}

.projects-dark-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #F5F9F8;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
}

.projects-dark-cta-link span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #F5F9F8;
  color: #09272B;
}

@media (max-width: 900px) {
  .projects-dark-intro {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .projects-dark-intro p,
  .projects-dark-intro > span {
    grid-column: auto;
    grid-row: auto;
  }
  .project-dark-copy,
  .project-featured .project-dark-copy {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 700px) {
  .projects-dark-grid {
    grid-template-columns: 1fr;
  }
  .project-dark-card,
  .project-dark-card.project-featured {
    grid-column: auto;
  }
  .project-half .project-dark-media,
  .project-featured .project-dark-media {
    aspect-ratio: 1.18;
  }
}

/* ===================================================================
   V6.1 — Project card proportion fixes
   =================================================================== */

/* Tighter overall rhythm */
.projects-dark-list {
  padding-top: 46px !important;
  padding-bottom: 108px !important;
}

.projects-dark-grid {
  gap: 18px 24px !important;
}

/* Two-up cards: image gets the visual priority, copy stacks naturally below */
.project-half .project-dark-media {
  aspect-ratio: auto !important;
  height: clamp(300px, 28vw, 410px);
}

.project-half .project-dark-copy {
  display: block !important;
  padding: 18px 2px 38px !important;
}

.project-half .project-dark-title {
  margin-bottom: 14px;
}

.project-half .project-dark-title h2 {
  max-width: 100%;
  font-size: clamp(31px, 3.1vw, 43px) !important;
}

.project-half .project-dark-summary {
  max-width: 92%;
}

.project-half .project-dark-summary p {
  max-width: 520px;
  font-size: 12.5px;
  line-height: 1.62;
}

.project-half .project-dark-tags {
  margin-top: 12px;
}

/* Full-width card: still special, but no oversized banner */
.project-featured {
  margin-block: 12px 8px;
}

.project-featured .project-dark-media {
  aspect-ratio: auto !important;
  height: clamp(390px, 36vw, 530px);
}

.project-featured .project-dark-media img {
  object-position: center center;
}

.project-featured .project-dark-copy {
  display: grid !important;
  grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr) !important;
  gap: 54px !important;
  padding: 22px 2px 46px !important;
}

.project-featured .project-dark-title h2 {
  font-size: clamp(40px, 4.2vw, 58px) !important;
}

.project-featured .project-dark-summary {
  max-width: 720px;
}

.project-featured .project-dark-summary p {
  font-size: 13px;
  line-height: 1.7;
}

/* Keep images from feeling too zoomed/cropped */
.project-dark-media img {
  object-fit: cover !important;
}

/* Slightly smaller floating controls */
.project-dark-arrow {
  width: 40px !important;
  height: 40px !important;
  right: 14px !important;
  top: 14px !important;
}

.project-dark-number {
  left: 14px !important;
  bottom: 13px !important;
}

/* Desktop container balance */
@media (min-width: 1180px) {
  .projects-dark-grid {
    column-gap: 28px !important;
  }

  .project-half .project-dark-media {
    height: 370px;
  }

  .project-featured .project-dark-media {
    height: 500px;
  }
}

/* Tablet: preserve hierarchy without squeezing */
@media (max-width: 980px) {
  .project-half .project-dark-media {
    height: 320px;
  }

  .project-featured .project-dark-media {
    height: 420px;
  }

  .project-featured .project-dark-copy {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* Mobile: single-column clean cards */
@media (max-width: 700px) {
  .project-half .project-dark-media,
  .project-featured .project-dark-media {
    height: 300px !important;
  }

  .project-half .project-dark-copy,
  .project-featured .project-dark-copy {
    padding-bottom: 34px !important;
  }

  .project-half .project-dark-summary {
    max-width: 100%;
  }
}

/* ===================================================================
   V6.2 — HARD FIX: Projects grid = 12 columns
   =================================================================== */

.projects-dark-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: none !important;
  align-items: start !important;
  column-gap: 24px !important;
  row-gap: 34px !important;
}

.project-dark-card.project-half {
  grid-column: span 6 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}

.project-dark-card.project-featured {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}

.project-dark-card,
.project-dark-card > a,
.project-dark-media,
.project-dark-copy {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

.project-half .project-dark-media {
  height: auto !important;
  aspect-ratio: 1.35 / 1 !important;
}

.project-featured .project-dark-media {
  height: auto !important;
  aspect-ratio: 2.15 / 1 !important;
  max-height: 560px !important;
}

.project-half .project-dark-copy {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  padding: 18px 0 38px !important;
}

.project-featured .project-dark-copy {
  display: grid !important;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr) !important;
  gap: 54px !important;
  padding: 20px 0 44px !important;
}

.project-half .project-dark-summary {
  max-width: 620px !important;
}

@media (max-width: 900px) {
  .project-dark-card.project-half,
  .project-dark-card.project-featured {
    grid-column: 1 / -1 !important;
  }

  .project-featured .project-dark-copy {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .project-half .project-dark-media,
  .project-featured .project-dark-media {
    aspect-ratio: 1.35 / 1 !important;
    max-height: none !important;
  }
}


/* ===================================================================
   V6.3 — Projects horizontal breathing space
   Add left/right margin rhythm so cards do not touch the viewport edges
   =================================================================== */

.projects-dark-grid {
  padding-left: clamp(20px, 3vw, 40px) !important;
  padding-right: clamp(20px, 3vw, 40px) !important;
  box-sizing: border-box !important;
}

/* keep the section content visually aligned */
.projects-dark-filters,
.projects-dark-cta-inner,
.projects-dark-hero .container,
.projects-dark-intro,
.projects-dark-grid-wrap {
  padding-left: clamp(20px, 3vw, 40px) !important;
  padding-right: clamp(20px, 3vw, 40px) !important;
  box-sizing: border-box !important;
}

/* do not over-pad on small screens */
@media (max-width: 768px) {
  .projects-dark-grid,
  .projects-dark-filters,
  .projects-dark-cta-inner,
  .projects-dark-hero .container,
  .projects-dark-intro,
  .projects-dark-grid-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ===================================================================
   V6.4 — Projects page HTML wrapper alignment
   =================================================================== */

.projects-page-inner {
  width: calc(100% - 96px) !important;
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Let the grid use the full width of the inner wrapper */
.projects-page-inner.projects-dark-grid {
  width: calc(100% - 96px) !important;
}

/* Same left/right alignment for the sticky filters */
.projects-page-inner.projects-dark-filter-row {
  width: calc(100% - 96px) !important;
}

/* Reset older extra inner padding so spacing isn't doubled */
.projects-dark-grid,
.projects-dark-filter-row,
.projects-dark-cta-inner,
.projects-dark-hero .projects-page-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 900px) {
  .projects-page-inner,
  .projects-page-inner.projects-dark-grid,
  .projects-page-inner.projects-dark-filter-row {
    width: calc(100% - 48px) !important;
  }
}

@media (max-width: 640px) {
  .projects-page-inner,
  .projects-page-inner.projects-dark-grid,
  .projects-page-inner.projects-dark-filter-row {
    width: calc(100% - 32px) !important;
  }
}

/* ===================================================================
   V7 — Dark editorial project detail
   Inspired by premium case-study structure, styled for Manta
   =================================================================== */

.manta-case-dark {
  margin: 0;
  background:
    radial-gradient(circle at 84% 4%, rgba(54,193,181,.08), transparent 28%),
    #071F23;
  color: #F4F8F7;
}

.case-dark-hero {
  position: relative;
  overflow: hidden;
  padding: 112px 0 76px;
}

.case-dark-hero::after {
  content: "";
  position: absolute;
  right: -260px;
  top: -300px;
  width: 760px;
  height: 760px;
  border: 1px solid rgba(101,216,205,.05);
  border-radius: 50%;
  box-shadow:
    0 0 0 92px rgba(101,216,205,.022),
    0 0 0 184px rgba(101,216,205,.012);
}

.case-dark-meta {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  color: rgba(244,248,247,.34);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.case-dark-meta .eyebrow {
  color: #62D2C7;
}

.case-dark-title-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 72px;
  align-items: end;
  margin-top: 30px;
}

.case-dark-title-grid h1 {
  margin: 0;
  color: #F6FAF9;
  font-size: clamp(78px, 9vw, 146px);
  line-height: .84;
  letter-spacing: -.08em;
}

.case-dark-summary p {
  margin: 0;
  color: rgba(244,248,247,.56);
  font-size: 16px;
  line-height: 1.72;
}

.case-dark-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 24px;
}

.case-dark-pills span,
.case-dark-result-pills span {
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  color: rgba(244,248,247,.42);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.case-dark-cover {
  padding-bottom: 84px;
}

.case-dark-cover-frame {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 26px;
  background: #0A3034;
}

.case-dark-cover-frame img {
  width: 100%;
  max-height: 780px;
  display: block;
  object-fit: cover;
}

.case-dark-facts {
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.case-dark-facts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.case-dark-facts-grid > div {
  padding: 28px 24px;
  border-right: 1px solid rgba(255,255,255,.07);
}

.case-dark-facts-grid > div:last-child {
  border-right: 0;
}

.case-dark-facts-grid span {
  display: block;
  margin-bottom: 9px;
  color: #5ACCBF;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.case-dark-facts-grid strong {
  color: rgba(244,248,247,.74);
  font-size: 12px;
  line-height: 1.55;
}

.case-dark-section {
  padding: 104px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.case-dark-section-soft {
  background:
    radial-gradient(circle at 12% 20%, rgba(55,194,181,.08), transparent 24%),
    #08262A;
}

.case-dark-text-grid {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 100px;
}

.case-dark-text-grid .eyebrow,
.case-dark-process .eyebrow,
.case-dark-gallery .eyebrow,
.case-dark-result .eyebrow,
.case-dark-next .eyebrow {
  color: #5DCEC2;
}

.case-dark-text-grid h2 {
  margin: 16px 0 0;
  color: #F6FAF9;
  font-size: clamp(48px, 5vw, 76px);
  line-height: .94;
  letter-spacing: -.06em;
}

.case-dark-text-grid p {
  margin: 0;
  color: rgba(244,248,247,.55);
  font-size: 16px;
  line-height: 1.85;
}

.case-dark-showcase {
  padding: 88px 0;
  background: #061A1E;
}

.case-dark-showcase-stage {
  position: relative;
  min-height: 610px;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(circle at 50% 46%, rgba(72,205,192,.17), transparent 26%),
    linear-gradient(135deg, #10383D 0%, #09272B 100%);
}

.case-dark-shot {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.30);
}

.case-dark-shot img {
  width: 100%;
  display: block;
}

.case-dark-shot.shot-a {
  width: 52%;
  left: 10%;
  top: 17%;
  transform: rotate(-7deg);
}

.case-dark-shot.shot-b {
  width: 46%;
  right: 8%;
  top: 24%;
  transform: rotate(6deg);
}

.case-dark-shot.shot-c {
  width: 34%;
  left: 34%;
  bottom: -12%;
  transform: rotate(1deg);
  opacity: .70;
}

.case-dark-showcase-label {
  position: absolute;
  left: 26px;
  bottom: 24px;
  padding: 8px 11px;
  border-radius: 999px;
  background: #F6FAF9;
  color: #09282C;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.case-dark-process {
  padding: 108px 0;
  background:
    radial-gradient(circle at 90% 20%, rgba(58,198,186,.08), transparent 25%),
    #0A2C30;
}

.case-dark-process-head {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 80px;
  align-items: end;
}

.case-dark-process-head h2 {
  margin: 0;
  color: #F6FAF9;
  font-size: clamp(54px, 5.6vw, 84px);
  line-height: .92;
  letter-spacing: -.065em;
}

.case-dark-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 58px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.08);
}

.case-dark-process-grid article {
  padding: 28px 24px 30px;
  background: rgba(255,255,255,.025);
}

.case-dark-process-grid article > span {
  color: #5DCEC2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}

.case-dark-process-grid h3 {
  margin: 28px 0 10px;
  color: #F4F8F7;
  font-size: 24px;
  letter-spacing: -.04em;
}

.case-dark-process-grid p {
  margin: 0;
  color: rgba(244,248,247,.46);
  font-size: 12px;
  line-height: 1.65;
}

.case-dark-gallery {
  padding: 108px 0;
  background: #071F23;
}

.case-dark-gallery-head {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 52px;
}

.case-dark-gallery-head h2 {
  margin: 0;
  color: #F6FAF9;
  font-size: clamp(50px, 5vw, 76px);
  line-height: .94;
  letter-spacing: -.06em;
}

.case-dark-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.case-dark-gallery-grid figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 22px;
  background: #0A3034;
}

.case-dark-gallery-grid figure.gallery-wide {
  grid-column: 1 / -1;
}

.case-dark-gallery-grid img {
  width: 100%;
  display: block;
  aspect-ratio: 1.4;
  object-fit: cover;
}

.case-dark-gallery-grid figure.gallery-wide img {
  aspect-ratio: 2.08;
}

.case-dark-result {
  padding: 116px 0;
  background:
    radial-gradient(circle at 18% 35%, rgba(61,202,190,.12), transparent 25%),
    #09282C;
}

.case-dark-result blockquote {
  max-width: 1040px;
  margin: 24px 0 38px;
  color: #F7FAF9;
  font-family: "Playfair Display", serif;
  font-size: clamp(46px, 5vw, 74px);
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.05em;
}

.case-dark-result-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.case-dark-next {
  padding: 84px 0 104px;
  background: #061B1F;
}

.case-dark-next a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: #F5F9F8;
  text-decoration: none;
}

.case-dark-next h2 {
  margin: 12px 0 0;
  font-size: clamp(54px, 6vw, 90px);
  line-height: .95;
  letter-spacing: -.07em;
}

.case-dark-next-arrow {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #F5F9F8;
  color: #08272B;
  font-size: 20px;
  transition: transform .25s ease;
}

.case-dark-next a:hover .case-dark-next-arrow {
  transform: translate(3px,-3px);
}

@media (max-width: 900px) {
  .case-dark-title-grid,
  .case-dark-text-grid,
  .case-dark-process-head,
  .case-dark-gallery-head {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .case-dark-facts-grid {
    grid-template-columns: 1fr;
  }

  .case-dark-facts-grid > div {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }

  .case-dark-process-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .case-dark-hero {
    padding-top: 86px;
  }

  .case-dark-title-grid h1 {
    font-size: clamp(62px, 20vw, 88px);
  }

  .case-dark-showcase-stage {
    min-height: 440px;
  }

  .case-dark-shot.shot-a {
    width: 72%;
    left: 4%;
  }

  .case-dark-shot.shot-b {
    width: 66%;
    right: 2%;
    top: 34%;
  }

  .case-dark-shot.shot-c {
    display: none;
  }

  .case-dark-process-grid,
  .case-dark-gallery-grid {
    grid-template-columns: 1fr;
  }

  .case-dark-gallery-grid figure.gallery-wide {
    grid-column: auto;
  }

  .case-dark-gallery-grid figure.gallery-wide img,
  .case-dark-gallery-grid img {
    aspect-ratio: 1.25;
  }
}

/* ===================================================================
   V7.1 — Compact project detail proportions
   Reduce oversized images and excessive vertical whitespace
   =================================================================== */

/* Hero: tighter and more immediate */
.case-dark-hero {
  padding-top: 82px !important;
  padding-bottom: 54px !important;
}

.case-dark-title-grid {
  margin-top: 22px !important;
  gap: 54px !important;
}

.case-dark-title-grid h1 {
  font-size: clamp(68px, 7.4vw, 118px) !important;
}

.case-dark-summary p {
  font-size: 15px !important;
  line-height: 1.62 !important;
}

.case-dark-pills {
  margin-top: 18px !important;
}

/* Main cover: no longer takes over the page */
.case-dark-cover {
  padding-bottom: 58px !important;
}

.case-dark-cover-frame {
  max-height: 520px !important;
}

.case-dark-cover-frame img {
  height: 520px !important;
  max-height: 520px !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Facts strip: tighter */
.case-dark-facts-grid > div {
  padding: 22px 20px !important;
}

/* General text sections: reduce empty space */
.case-dark-section {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

.case-dark-text-grid {
  gap: 72px !important;
}

.case-dark-text-grid h2 {
  font-size: clamp(44px, 4.5vw, 66px) !important;
}

.case-dark-text-grid p {
  font-size: 15px !important;
  line-height: 1.75 !important;
}

/* Visual showcase: compact and controlled */
.case-dark-showcase {
  padding-top: 62px !important;
  padding-bottom: 62px !important;
}

.case-dark-showcase-stage {
  min-height: 430px !important;
  max-height: 430px !important;
}

.case-dark-shot.shot-a {
  width: 43% !important;
  left: 14% !important;
  top: 16% !important;
}

.case-dark-shot.shot-b {
  width: 38% !important;
  right: 12% !important;
  top: 24% !important;
}

.case-dark-shot.shot-c {
  width: 28% !important;
  left: 36% !important;
  bottom: -16% !important;
}

/* Process section: less breathing room */
.case-dark-process {
  padding-top: 76px !important;
  padding-bottom: 82px !important;
}

.case-dark-process-head {
  gap: 58px !important;
}

.case-dark-process-head h2 {
  font-size: clamp(48px, 5vw, 72px) !important;
}

.case-dark-process-grid {
  margin-top: 42px !important;
}

.case-dark-process-grid article {
  padding: 22px 20px 24px !important;
}

.case-dark-process-grid h3 {
  margin-top: 22px !important;
}

/* Gallery: smaller assets and tighter rhythm */
.case-dark-gallery {
  padding-top: 78px !important;
  padding-bottom: 84px !important;
}

.case-dark-gallery-head {
  gap: 58px !important;
  margin-bottom: 36px !important;
}

.case-dark-gallery-head h2 {
  font-size: clamp(44px, 4.6vw, 66px) !important;
}

.case-dark-gallery-grid {
  gap: 14px !important;
}

.case-dark-gallery-grid img {
  aspect-ratio: 1.55 !important;
  max-height: 420px !important;
}

.case-dark-gallery-grid figure.gallery-wide img {
  aspect-ratio: 2.4 !important;
  max-height: 460px !important;
}

/* Result: reduce giant quote footprint */
.case-dark-result {
  padding-top: 82px !important;
  padding-bottom: 88px !important;
}

.case-dark-result blockquote {
  max-width: 920px !important;
  margin-top: 20px !important;
  margin-bottom: 30px !important;
  font-size: clamp(40px, 4.3vw, 62px) !important;
}

/* Next project: tighter ending */
.case-dark-next {
  padding-top: 64px !important;
  padding-bottom: 76px !important;
}

.case-dark-next h2 {
  font-size: clamp(48px, 5.2vw, 72px) !important;
}

/* Tablet */
@media (max-width: 900px) {
  .case-dark-cover-frame,
  .case-dark-cover-frame img {
    height: 420px !important;
    max-height: 420px !important;
  }

  .case-dark-showcase-stage {
    min-height: 380px !important;
    max-height: 380px !important;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .case-dark-hero {
    padding-top: 68px !important;
    padding-bottom: 42px !important;
  }

  .case-dark-cover {
    padding-bottom: 42px !important;
  }

  .case-dark-cover-frame,
  .case-dark-cover-frame img {
    height: 300px !important;
    max-height: 300px !important;
  }

  .case-dark-section,
  .case-dark-process,
  .case-dark-gallery,
  .case-dark-result,
  .case-dark-next {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .case-dark-showcase {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .case-dark-showcase-stage {
    min-height: 320px !important;
    max-height: 320px !important;
  }

  .case-dark-shot.shot-a {
    width: 66% !important;
    left: 4% !important;
  }

  .case-dark-shot.shot-b {
    width: 58% !important;
    right: 3% !important;
    top: 34% !important;
  }

  .case-dark-gallery-grid img,
  .case-dark-gallery-grid figure.gallery-wide img {
    max-height: 300px !important;
    aspect-ratio: 1.35 !important;
  }
}

/* ========================= V8 PROJECT DETAIL ========================= */
.manta-case-v8{margin:0;background:#071f23;color:#f5f9f8}
.v8-hero{padding:94px 0 54px;background:radial-gradient(circle at 86% 12%,rgba(55,194,181,.10),transparent 28%),#071f23}
.v8-hero-meta{display:flex;justify-content:space-between;gap:24px;color:rgba(245,249,248,.35);font-size:9px;text-transform:uppercase;letter-spacing:.13em}
.v8-hero-meta .eyebrow,.v8-story-title .eyebrow,.v8-challenge .eyebrow,.v8-process .eyebrow,.v8-split-copy .eyebrow,.v8-gallery .eyebrow,.v8-result .eyebrow,.v8-next .eyebrow{color:#63d3c7}
.v8-hero-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:70px;align-items:end;margin-top:26px}
.v8-hero-title h1{margin:0;color:#f7faf9;font-size:clamp(72px,8.4vw,136px);line-height:.84;letter-spacing:-.08em}
.v8-hero-tags,.v8-result-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:24px}
.v8-hero-tags span,.v8-result-tags span{padding:7px 9px;border:1px solid rgba(255,255,255,.10);border-radius:999px;color:rgba(245,249,248,.44);font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.v8-hero-copy p{margin:0;color:rgba(245,249,248,.58);font-size:16px;line-height:1.7}
.v8-hero-copy a{display:inline-block;margin-top:24px;color:#64d3c8;text-decoration:none;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.v8-hero-visual{padding:0 0 58px}
.v8-hero-frame{overflow:hidden;border-radius:26px;border:1px solid rgba(255,255,255,.07);background:#0b3135}
.v8-hero-frame img{width:100%;height:480px;display:block;object-fit:cover}
.v8-facts{border-block:1px solid rgba(255,255,255,.07)}
.v8-facts-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.v8-facts-grid>div{padding:22px 20px;border-right:1px solid rgba(255,255,255,.07)}
.v8-facts-grid>div:last-child{border-right:0}
.v8-facts-grid span{display:block;margin-bottom:8px;color:#5ccdbf;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.v8-facts-grid strong{color:rgba(245,249,248,.72);font-size:12px;line-height:1.5}
.v8-story{padding:80px 0}
.v8-story-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:92px;align-items:start}
.v8-story-title h2,.v8-challenge-card h2,.v8-process-head h2,.v8-split-copy h2{margin:14px 0 0;color:#f7faf9;font-size:clamp(46px,4.8vw,70px);line-height:.93;letter-spacing:-.06em}
.v8-story-copy p,.v8-challenge-card>p,.v8-split-copy p{margin:0;color:rgba(245,249,248,.56);font-size:15px;line-height:1.8}
.v8-composition{padding:24px 0 76px}
.v8-composition-stage{position:relative;min-height:480px;overflow:hidden;border:1px solid rgba(255,255,255,.06);border-radius:28px;background:radial-gradient(circle at 55% 40%,rgba(65,204,191,.15),transparent 28%),linear-gradient(135deg,#10363b 0%,#08252a 100%)}
.v8-composition figure{position:absolute;margin:0;overflow:hidden;border-radius:20px;border:1px solid rgba(255,255,255,.10);box-shadow:0 26px 70px rgba(0,0,0,.30)}
.v8-composition figure img{width:100%;display:block}
.v8-comp-main{width:54%;left:8%;top:11%;transform:rotate(-4deg)}
.v8-comp-side{width:34%;right:9%;top:23%;transform:rotate(5deg)}
.v8-comp-label{position:absolute;right:26px;bottom:22px;display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:999px;background:#f7faf9;color:#082a2e}
.v8-comp-label span{color:#34bbae;font-size:8px;font-weight:800}.v8-comp-label p{margin:0;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.v8-challenge{padding:70px 0;background:#08262a}
.v8-challenge-card{display:grid;grid-template-columns:.8fr 1.2fr;gap:84px;padding:44px 48px;border:1px solid rgba(255,255,255,.07);border-radius:22px;background:rgba(255,255,255,.02)}
.v8-process{padding:82px 0;background:radial-gradient(circle at 88% 16%,rgba(60,201,189,.08),transparent 24%),#0a2c30}
.v8-process-head{display:grid;grid-template-columns:.72fr 1.28fr;gap:70px;align-items:end}
.v8-process-track{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:44px;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.08)}
.v8-process-track article{padding:24px 22px;background:rgba(255,255,255,.025)}
.v8-process-track article>span{color:#5ccdbf;font-size:8px;font-weight:800;letter-spacing:.12em}.v8-process-track h3{margin:24px 0 8px;color:#f7faf9;font-size:23px;letter-spacing:-.04em}.v8-process-track p{margin:0;color:rgba(245,249,248,.45);font-size:11px;line-height:1.6}
.v8-split-visual{padding:82px 0}.v8-split-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}.v8-split-grid figure{margin:0;overflow:hidden;border-radius:22px;border:1px solid rgba(255,255,255,.07);background:#0a3034}.v8-split-grid figure img{width:100%;height:420px;display:block;object-fit:cover}
.v8-gallery{padding:76px 0 86px;background:#061b1f}.v8-gallery-head{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:34px}.v8-gallery-head p{max-width:420px;margin:0;color:rgba(245,249,248,.44);font-size:12px;line-height:1.6}.v8-gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.v8-gallery-grid figure{margin:0;overflow:hidden;border-radius:18px;border:1px solid rgba(255,255,255,.06);background:#0a3034}.v8-gallery-grid figure.v8-gallery-wide{grid-column:1/-1}.v8-gallery-grid img{width:100%;height:300px;display:block;object-fit:cover}.v8-gallery-wide img{height:420px}
.v8-result{padding:86px 0;background:radial-gradient(circle at 20% 40%,rgba(61,202,190,.12),transparent 24%),#09282c}.v8-result blockquote{max-width:980px;margin:22px 0 32px;color:#f7faf9;font-family:"Playfair Display",serif;font-size:clamp(42px,4.6vw,66px);font-style:italic;font-weight:500;line-height:1;letter-spacing:-.05em}
.v8-next{padding:70px 0 90px;background:#071f23}.v8-next-card{display:grid;grid-template-columns:1.08fr .92fr;overflow:hidden;border:1px solid rgba(255,255,255,.07);border-radius:24px;color:#f7faf9;text-decoration:none;background:#0a2b30}.v8-next-media{overflow:hidden}.v8-next-media img{width:100%;height:300px;display:block;object-fit:cover;transition:transform .45s ease}.v8-next-card:hover .v8-next-media img{transform:scale(1.025)}.v8-next-copy{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:36px 40px}.v8-next-copy h2{margin:12px 0 0;font-size:clamp(42px,4.5vw,64px);line-height:.96;letter-spacing:-.06em}.v8-next-arrow{display:grid;place-items:center;flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:#f7faf9;color:#082a2e;font-size:19px}
@media(max-width:900px){.v8-hero-grid,.v8-story-grid,.v8-challenge-card,.v8-process-head,.v8-split-grid,.v8-next-card{grid-template-columns:1fr;gap:30px}.v8-facts-grid{grid-template-columns:1fr}.v8-facts-grid>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}.v8-process-track{grid-template-columns:1fr 1fr}.v8-next-media img{height:260px}}
@media(max-width:640px){.v8-hero{padding-top:76px}.v8-hero-frame img{height:300px}.v8-story,.v8-composition,.v8-challenge,.v8-process,.v8-split-visual,.v8-gallery,.v8-result,.v8-next{padding-top:56px;padding-bottom:56px}.v8-composition-stage{min-height:340px}.v8-comp-main{width:68%;left:3%}.v8-comp-side{width:48%;right:2%;top:31%}.v8-process-track{grid-template-columns:1fr}.v8-split-grid figure img{height:300px}.v8-gallery-grid{grid-template-columns:1fr}.v8-gallery-grid figure.v8-gallery-wide{grid-column:auto}.v8-gallery-grid img,.v8-gallery-wide img{height:280px}.v8-next-copy{padding:28px 24px}}

/* ===================================================================
   V9 — Compact real-content project detail
   =================================================================== */

.manta-case-v9{
  margin:0;
  background:#071f23;
  color:#f5f9f8;
}

.v9-hero{
  padding:92px 0 58px;
  background:
    radial-gradient(circle at 87% 5%,rgba(64,204,191,.10),transparent 28%),
    #071f23;
}

.v9-kicker{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:26px;
}

.v9-kicker .eyebrow,
.v9-overview .eyebrow,
.v9-did .eyebrow,
.v9-next .eyebrow{
  color:#62d2c6;
}

.v9-kicker a{
  color:rgba(245,249,248,.42);
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  text-decoration:none;
  text-transform:uppercase;
}

.v9-hero-grid{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  align-items:end;
  gap:72px;
}

.v9-type{
  display:block;
  margin-bottom:12px;
  color:#5bcbbf;
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.v9-hero h1{
  margin:0;
  color:#f7faf9;
  font-size:clamp(64px,7.4vw,116px);
  line-height:.86;
  letter-spacing:-.075em;
}

.v9-summary p{
  margin:0;
  color:rgba(245,249,248,.56);
  font-size:15px;
  line-height:1.72;
}

.v9-pills{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:20px;
}

.v9-pills span{
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  color:rgba(245,249,248,.40);
  font-size:8px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.v9-cover{
  margin-top:44px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  border-radius:24px;
  background:#0a3034;
}

.v9-cover img{
  width:100%;
  height:auto;
  max-height:620px;
  display:block;
  object-fit:cover;
}

.v9-info{
  border-block:1px solid rgba(255,255,255,.07);
}

.v9-info-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}

.v9-info-grid>div{
  padding:23px 20px;
  border-right:1px solid rgba(255,255,255,.07);
}

.v9-info-grid>div:last-child{
  border-right:0;
}

.v9-info-grid span{
  display:block;
  margin-bottom:7px;
  color:#5ccdbf;
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.v9-info-grid strong{
  color:rgba(245,249,248,.70);
  font-size:12px;
  line-height:1.55;
}

.v9-overview{
  padding:78px 0 82px;
}

.v9-overview-intro{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:78px;
  padding-bottom:54px;
}

.v9-overview-intro p{
  margin:0;
  max-width:760px;
  color:rgba(245,249,248,.58);
  font-size:17px;
  line-height:1.8;
}

.v9-duo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.v9-duo article{
  min-height:275px;
  padding:32px 34px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:20px;
  background:rgba(255,255,255,.025);
}

.v9-duo article>span{
  color:#5ccdbf;
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.v9-duo h2{
  margin:16px 0 18px;
  color:#f7faf9;
  font-size:clamp(34px,3.2vw,48px);
  line-height:.98;
  letter-spacing:-.05em;
}

.v9-duo p{
  margin:0;
  color:rgba(245,249,248,.50);
  font-size:13px;
  line-height:1.72;
}

.v9-did{
  padding:72px 0 82px;
  background:
    radial-gradient(circle at 88% 18%,rgba(60,201,189,.08),transparent 25%),
    #09292d;
}

.v9-did-head{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:78px;
  align-items:end;
  margin-bottom:38px;
}

.v9-did-head h2{
  margin:0;
  color:#f7faf9;
  font-size:clamp(44px,4.8vw,68px);
  line-height:.94;
  letter-spacing:-.06em;
}

.v9-did-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:rgba(255,255,255,.08);
}

.v9-did-grid article{
  padding:26px 24px;
  background:#09292d;
}

.v9-did-grid article span{
  display:block;
  margin-bottom:38px;
  color:#5ccdbf;
  font-size:8px;
  font-weight:800;
}

.v9-did-grid article p{
  margin:0;
  color:rgba(245,249,248,.70);
  font-size:15px;
  line-height:1.45;
}

.v9-next{
  padding:70px 0 88px;
  background:#061b1f;
}

.v9-next-card{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  border-radius:22px;
  background:#0a2b30;
  color:#f7faf9;
  text-decoration:none;
}

.v9-next-image{
  overflow:hidden;
}

.v9-next-image img{
  width:100%;
  height:300px;
  display:block;
  object-fit:cover;
  transition:transform .45s ease;
}

.v9-next-card:hover .v9-next-image img{
  transform:scale(1.02);
}

.v9-next-copy{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:36px 40px;
}

.v9-next-copy h2{
  margin:12px 0 8px;
  font-size:clamp(40px,4.2vw,60px);
  line-height:.96;
  letter-spacing:-.06em;
}

.v9-next-copy p{
  margin:0;
  color:rgba(245,249,248,.42);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.v9-arrow{
  position:absolute;
  right:30px;
  bottom:30px;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:50%;
  background:#f7faf9;
  color:#082a2e;
}

@media(max-width:900px){
  .v9-hero-grid,
  .v9-overview-intro,
  .v9-did-head,
  .v9-next-card{
    grid-template-columns:1fr;
    gap:28px;
  }

  .v9-info-grid,
  .v9-did-grid{
    grid-template-columns:1fr;
  }

  .v9-info-grid>div{
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.07);
  }

  .v9-duo{
    grid-template-columns:1fr;
  }

  .v9-next-image img{
    height:260px;
  }
}

@media(max-width:640px){
  .v9-hero{
    padding-top:72px;
  }

  .v9-cover{
    margin-top:32px;
  }

  .v9-overview,
  .v9-did,
  .v9-next{
    padding-top:56px;
    padding-bottom:56px;
  }

  .v9-duo article{
    min-height:0;
    padding:26px 24px;
  }
}

/* ===================================================================
   V9.1 — Serag mockup comparison
   =================================================================== */

.project-mockup-card .project-dark-media {
  padding: 22px !important;
  background: rgba(255,255,255,.045) !important;
  box-sizing: border-box !important;
}

.project-mockup-card .project-dark-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 16px !important;
  background: #f5f7f6 !important;
  transform: none !important;
}

.project-mockup-card:hover .project-dark-media img {
  transform: none !important;
}

/* Project detail page: show the Serag mockup completely */
.manta-case-v9 .v9-cover img[src$="pro3.webp"] {
  object-fit: contain !important;
  background: #f5f7f6 !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}

/* ===================================================================
   V9.2 — Serag mockup refinement
   Transparent mockup on dark card, larger scale, tighter padding
   =================================================================== */

.project-mockup-card .project-dark-media {
  padding: 14px !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(92, 205, 191, .09), transparent 34%),
    #0b2b2f !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-sizing: border-box !important;
}

.project-mockup-card .project-dark-media img {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 0 !important;
  background: transparent !important;
  transform: scale(1.07) !important;
}

.project-mockup-card:hover .project-dark-media img {
  transform: scale(1.07) !important;
}

/* Serag detail page: transparent mockup on dark background */
.manta-case-v9 .v9-cover:has(img[src$="pro3.webp"]) {
  padding: 18px !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(92, 205, 191, .08), transparent 34%),
    #0b2b2f !important;
}

.manta-case-v9 .v9-cover img[src$="pro3.webp"] {
  width: 100% !important;
  height: auto !important;
  max-height: 560px !important;
  object-fit: contain !important;
  background: transparent !important;
  padding: 0 !important;
}

/* ===================================================================
   V9.3 — Editorial staggered 2-column projects layout
   =================================================================== */

/* Always two true 6-column project cards on desktop */
.projects-dark-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  column-gap: clamp(22px, 2.2vw, 34px) !important;
  row-gap: 24px !important;
  align-items: start !important;
}

.project-editorial-card,
.project-editorial-cta {
  grid-column: span 6 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* Stagger every second visual column */
.project-editorial-card:nth-child(even) {
  transform: translateY(70px);
}

.project-editorial-card:nth-child(odd) {
  transform: translateY(0);
}

/* Keep breathing room after staggered rows */
.project-editorial-card {
  position: relative;
  padding-bottom: 34px;
}

/* Large ghost numbering */
.project-editorial-number {
  position: absolute;
  right: 12px;
  top: -34px;
  z-index: 0;
  color: rgba(255,255,255,.035);
  font-size: clamp(64px, 7vw, 108px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.06em;
  pointer-events: none;
}

/* Media frame */
.project-editorial-media {
  position: relative;
  z-index: 1;
  height: auto !important;
  aspect-ratio: 1.34 / 1 !important;
  padding: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.085) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(88, 205, 191, .07), transparent 36%),
    rgba(255,255,255,.025) !important;
  box-sizing: border-box !important;
}

/* Alternating image proportions without breaking 6/6 */
.project-editorial-card:nth-child(4n + 2) .project-editorial-media,
.project-editorial-card:nth-child(4n + 3) .project-editorial-media {
  aspect-ratio: 1.18 / 1 !important;
}

/* Normal project screenshots: show the whole image */
.project-editorial-media img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 16px !important;
  background: #eef2f1 !important;
  transform: none !important;
  transition: transform .45s ease !important;
}

.project-editorial-card:hover .project-editorial-media img {
  transform: scale(1.015) !important;
}

/* Mockup cards stay transparent, floating on the dark frame */
.project-editorial-card.project-mockup-card .project-editorial-media {
  padding: 10px !important;
  background:
    radial-gradient(circle at 50% 46%, rgba(88, 205, 191, .10), transparent 38%),
    #0b2b2f !important;
}

.project-editorial-card.project-mockup-card .project-editorial-media img {
  background: transparent !important;
  border-radius: 0 !important;
  transform: scale(1.05) !important;
}

.project-editorial-card.project-mockup-card:hover .project-editorial-media img {
  transform: scale(1.05) !important;
}

/* Copy is intentionally simple and editorial */
.project-editorial-copy {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  padding: 18px 2px 24px !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

.project-editorial-copy .project-dark-title h2 {
  font-size: clamp(32px, 3vw, 46px) !important;
}

.project-editorial-copy .project-dark-summary {
  max-width: 620px !important;
}

.project-editorial-copy .project-dark-summary p {
  max-width: 560px !important;
  font-size: 12.5px !important;
  line-height: 1.68 !important;
}

/* Slightly calmer tags */
.project-editorial-copy .project-dark-tags span {
  color: rgba(244,248,247,.42) !important;
}

/* CTA fills the eighth slot so 7 projects still end as a balanced 2-column row */
.project-editorial-cta {
  align-self: stretch;
  min-height: 100%;
  padding-bottom: 34px;
  transform: translateY(70px);
}

.project-editorial-cta-inner {
  min-height: 430px;
  height: calc(100% - 58px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 38px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  background:
    radial-gradient(circle at 80% 15%, rgba(86,209,196,.14), transparent 30%),
    linear-gradient(145deg,#0d3337,#082529);
}

.project-editorial-cta .eyebrow {
  color: #62d2c6;
}

.project-editorial-cta h2 {
  margin: 14px 0 18px;
  color: #f7faf9;
  font-size: clamp(42px,4.2vw,64px);
  line-height: .94;
  letter-spacing: -.06em;
}

.project-editorial-cta p {
  max-width: 470px;
  margin: 0 0 26px;
  color: rgba(245,249,248,.48);
  font-size: 13px;
  line-height: 1.65;
}

.project-editorial-cta > .project-editorial-cta-inner > a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  color: #f7faf9;
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
}

.project-editorial-cta a span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f7faf9;
  color: #08282b;
}

/* Give staggered grid enough bottom room */
.projects-dark-list {
  padding-bottom: 170px !important;
}

@media (max-width: 900px) {
  .project-editorial-card,
  .project-editorial-cta {
    grid-column: 1 / -1 !important;
    transform: none !important;
  }

  .project-editorial-media,
  .project-editorial-card:nth-child(4n + 2) .project-editorial-media,
  .project-editorial-card:nth-child(4n + 3) .project-editorial-media {
    aspect-ratio: 1.34 / 1 !important;
  }

  .project-editorial-cta-inner {
    min-height: 340px;
    height: auto;
  }

  .projects-dark-list {
    padding-bottom: 100px !important;
  }
}

/* ===================================================================
   V9.5 — Projects stagger: RIGHT HIGH / LEFT LOW
   Based on V9.3 editorial 6/6 layout
   =================================================================== */

/* Reset all earlier stagger rules */
.project-editorial-card,
.project-editorial-card:nth-child(odd),
.project-editorial-card:nth-child(even),
.project-editorial-card:nth-child(4n + 2),
.project-editorial-card:nth-child(4n + 3) {
  transform: none !important;
}

/* Left column = cards 1,3,5,7 -> slightly lower */
.project-editorial-card:nth-child(odd) {
  transform: translateY(44px) !important;
}

/* Right column stays high */
.project-editorial-card:nth-child(even) {
  transform: translateY(0) !important;
}

/* CTA closes calmly; keep aligned high */
.project-editorial-cta {
  transform: none !important;
  margin-top: 0 !important;
}

/* Maintain balanced vertical rhythm */
.projects-dark-grid {
  row-gap: 34px !important;
}

.projects-dark-list {
  padding-bottom: 150px !important;
}

@media (max-width: 900px) {
  .project-editorial-card,
  .project-editorial-card:nth-child(odd),
  .project-editorial-card:nth-child(even),
  .project-editorial-cta {
    transform: none !important;
  }
}

/* ===================================================================
   V9.5 — Compact premium individual project page
   =================================================================== */

.manta-project-v95 {
  margin: 0;
  background: #071f23;
  color: #f5f9f8;
}

/* HERO */
.pv95-hero {
  padding: 82px 0 54px;
  background:
    radial-gradient(circle at 88% 4%, rgba(77, 205, 192, .10), transparent 28%),
    #071f23;
}

.pv95-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}

.pv95-topline .eyebrow,
.pv95-overview .eyebrow,
.pv95-work .eyebrow,
.pv95-next .eyebrow {
  color: #62d2c6;
}

.pv95-topline a {
  color: rgba(245,249,248,.42);
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.pv95-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 64px;
  align-items: end;
}

.pv95-type {
  display: block;
  margin-bottom: 10px;
  color: #5ccdbf;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pv95-title h1 {
  margin: 0;
  color: #f7faf9;
  font-size: clamp(58px, 6.7vw, 102px);
  line-height: .88;
  letter-spacing: -.072em;
}

.pv95-summary p {
  margin: 0;
  max-width: 560px;
  color: rgba(245,249,248,.58);
  font-size: 15px;
  line-height: 1.72;
}

.pv95-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}

.pv95-pills span {
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  color: rgba(245,249,248,.42);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* IMAGE — show full project image, never crop */
.pv95-visual {
  margin-top: 38px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 45%, rgba(83, 202, 190, .07), transparent 36%),
    #0a292e;
}

.pv95-visual-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  max-height: 520px;
  overflow: hidden;
  border-radius: 16px;
  background: #eef2f1;
}

.pv95-visual-inner img {
  width: 100%;
  height: 100%;
  max-height: 500px;
  display: block;
  object-fit: contain;
  object-position: center;
}

/* INFO STRIP */
.pv95-meta {
  border-block: 1px solid rgba(255,255,255,.07);
}

.pv95-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.pv95-meta-grid > div {
  padding: 20px 18px;
  border-right: 1px solid rgba(255,255,255,.07);
}

.pv95-meta-grid > div:last-child {
  border-right: 0;
}

.pv95-meta-grid span {
  display: block;
  margin-bottom: 7px;
  color: #5ccdbf;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pv95-meta-grid strong {
  color: rgba(245,249,248,.70);
  font-size: 12px;
  line-height: 1.5;
}

/* OVERVIEW */
.pv95-overview {
  padding: 68px 0 72px;
}

.pv95-overview-head {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 72px;
  margin-bottom: 42px;
}

.pv95-overview-head p {
  margin: 0;
  max-width: 760px;
  color: rgba(245,249,248,.58);
  font-size: 16px;
  line-height: 1.8;
}

.pv95-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.pv95-two article {
  padding: 28px 30px 30px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px;
  background: rgba(255,255,255,.022);
}

.pv95-two article > span {
  color: #5ccdbf;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pv95-two h2 {
  margin: 14px 0 16px;
  color: #f7faf9;
  font-size: clamp(30px, 2.8vw, 42px);
  line-height: .98;
  letter-spacing: -.05em;
}

.pv95-two p {
  margin: 0;
  color: rgba(245,249,248,.50);
  font-size: 13px;
  line-height: 1.72;
}

/* WHAT WE DID */
.pv95-work {
  padding: 66px 0 72px;
  background:
    radial-gradient(circle at 88% 18%, rgba(66, 202, 189, .08), transparent 24%),
    #09282c;
}

.pv95-work-head {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 72px;
  align-items: end;
  margin-bottom: 34px;
}

.pv95-work-head h2 {
  margin: 0;
  color: #f7faf9;
  font-size: clamp(40px, 4.2vw, 60px);
  line-height: .94;
  letter-spacing: -.058em;
}

.pv95-work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.08);
}

.pv95-work-grid article {
  padding: 24px 22px;
  background: #09282c;
}

.pv95-work-grid article span {
  display: block;
  margin-bottom: 32px;
  color: #5ccdbf;
  font-size: 8px;
  font-weight: 800;
}

.pv95-work-grid article p {
  margin: 0;
  color: rgba(245,249,248,.70);
  font-size: 14px;
  line-height: 1.48;
}

/* NEXT PROJECT */
.pv95-next {
  padding: 62px 0 78px;
  background: #061b1f;
}

.pv95-next-card {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 22px;
  background: #0a2b30;
  color: #f7faf9;
  text-decoration: none;
}

.pv95-next-media {
  overflow: hidden;
  background: #eef2f1;
}

.pv95-next-media img {
  width: 100%;
  height: 260px;
  display: block;
  object-fit: contain;
  object-position: center;
  transition: transform .35s ease;
}

.pv95-next-card:hover .pv95-next-media img {
  transform: scale(1.015);
}

.pv95-next-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 34px;
}

.pv95-next-copy h2 {
  margin: 10px 0 7px;
  font-size: clamp(36px, 3.8vw, 54px);
  line-height: .96;
  letter-spacing: -.06em;
}

.pv95-next-copy p {
  margin: 0;
  color: rgba(245,249,248,.40);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pv95-next-arrow {
  position: absolute;
  right: 28px;
  bottom: 28px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f7faf9;
  color: #082a2e;
}

@media (max-width: 900px) {
  .pv95-hero-grid,
  .pv95-overview-head,
  .pv95-work-head,
  .pv95-next-card {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .pv95-meta-grid,
  .pv95-work-grid {
    grid-template-columns: 1fr;
  }

  .pv95-meta-grid > div {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }

  .pv95-two {
    grid-template-columns: 1fr;
  }

  .pv95-visual-inner {
    min-height: 280px;
  }

  .pv95-next-media img {
    height: 230px;
  }
}

@media (max-width: 640px) {
  .pv95-hero {
    padding-top: 68px;
  }

  .pv95-overview,
  .pv95-work,
  .pv95-next {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .pv95-visual {
    padding: 10px;
  }

  .pv95-visual-inner {
    min-height: 230px;
  }

  .pv95-two article {
    padding: 24px 22px;
  }
}

/* ===================================================================
   V9.6 — Refined individual project page
   =================================================================== */

.manta-project-v96{margin:0;background:#071f23;color:#f5f9f8}
.pv96-hero{padding:74px 0 46px;background:radial-gradient(circle at 88% 2%,rgba(75,205,191,.09),transparent 26%),#071f23}
.pv96-topline{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:22px}
.pv96-topline .eyebrow,.pv96-story .eyebrow,.pv96-focus .eyebrow,.pv96-next .eyebrow{color:#62d2c6}
.pv96-topline a{color:rgba(245,249,248,.40);font-size:9px;font-weight:700;letter-spacing:.08em;text-decoration:none;text-transform:uppercase}
.pv96-title-row{display:grid;grid-template-columns:1.08fr .92fr;gap:58px;align-items:end}
.pv96-type{display:block;margin-bottom:9px;color:#5ccdbf;font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.pv96-title-row h1{margin:0;color:#f7faf9;font-size:clamp(56px,6.3vw,96px);line-height:.89;letter-spacing:-.07em}
.pv96-intro p{margin:0;max-width:560px;color:rgba(245,249,248,.58);font-size:15px;line-height:1.7}
.pv96-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:17px}
.pv96-pills span{padding:7px 9px;border:1px solid rgba(255,255,255,.10);border-radius:999px;color:rgba(245,249,248,.42);font-size:8px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}

.pv96-visual{margin-top:30px;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:radial-gradient(circle at 50% 45%,rgba(83,202,190,.07),transparent 34%),#0a292e}
.pv96-visual img{width:100%;height:auto;max-height:520px;display:block;object-fit:contain;object-position:center;border-radius:14px;background:#eef2f1}

.pv96-meta{border-block:1px solid rgba(255,255,255,.07)}
.pv96-meta-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.pv96-meta-grid>div{padding:18px 16px;border-right:1px solid rgba(255,255,255,.07)}
.pv96-meta-grid>div:last-child{border-right:0}
.pv96-meta-grid span{display:block;margin-bottom:6px;color:#5ccdbf;font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.pv96-meta-grid strong{color:rgba(245,249,248,.68);font-size:11px;line-height:1.5}

.pv96-story{padding:58px 0 62px}
.pv96-story-head{display:grid;grid-template-columns:.68fr 1.32fr;gap:64px;margin-bottom:32px}
.pv96-story-head p{margin:0;max-width:760px;color:rgba(245,249,248,.58);font-size:15px;line-height:1.76}
.pv96-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pv96-story-grid article{padding:24px 26px 26px;border:1px solid rgba(255,255,255,.07);border-radius:18px;background:rgba(255,255,255,.02)}
.pv96-story-grid article>span{color:#5ccdbf;font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.pv96-story-grid h2{margin:12px 0 14px;color:#f7faf9;font-size:clamp(28px,2.6vw,38px);line-height:.98;letter-spacing:-.045em}
.pv96-story-grid p{margin:0;color:rgba(245,249,248,.49);font-size:12.5px;line-height:1.68}

.pv96-focus{padding:56px 0 60px;background:#09282c}
.pv96-focus-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:54px;align-items:start}
.pv96-focus-title h2{margin:13px 0 0;color:#f7faf9;font-size:clamp(36px,3.7vw,54px);line-height:.95;letter-spacing:-.055em}
.pv96-focus-list{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid rgba(255,255,255,.08)}
.pv96-focus-list article{display:grid;grid-template-columns:70px 1fr;gap:18px;align-items:center;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.pv96-focus-list article span{color:#5ccdbf;font-size:8px;font-weight:800}
.pv96-focus-list article p{margin:0;color:rgba(245,249,248,.72);font-size:14px;line-height:1.5}

.pv96-next{padding:54px 0 68px;background:#061b1f}
.pv96-next-card{display:grid;grid-template-columns:.88fr 1.12fr;overflow:hidden;border:1px solid rgba(255,255,255,.07);border-radius:20px;background:#0a2b30;color:#f7faf9;text-decoration:none}
.pv96-next-media{display:flex;align-items:center;justify-content:center;padding:14px;background:#eef2f1}
.pv96-next-media img{width:100%;height:210px;display:block;object-fit:contain;object-position:center;transition:transform .3s ease}
.pv96-next-card:hover .pv96-next-media img{transform:scale(1.012)}
.pv96-next-copy{position:relative;display:flex;flex-direction:column;justify-content:center;padding:28px 32px}
.pv96-next-copy h2{margin:9px 0 6px;font-size:clamp(34px,3.5vw,48px);line-height:.97;letter-spacing:-.055em}
.pv96-next-copy p{margin:0;color:rgba(245,249,248,.40);font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.pv96-next-arrow{position:absolute;right:24px;bottom:24px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#f7faf9;color:#082a2e}

@media(max-width:900px){
  .pv96-title-row,.pv96-story-head,.pv96-focus-grid,.pv96-next-card{grid-template-columns:1fr;gap:26px}
  .pv96-meta-grid{grid-template-columns:1fr}
  .pv96-meta-grid>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}
  .pv96-story-grid{grid-template-columns:1fr}
  .pv96-next-media img{height:190px}
}
@media(max-width:640px){
  .pv96-hero{padding-top:62px}
  .pv96-visual{padding:10px}
  .pv96-story,.pv96-focus,.pv96-next{padding-top:48px;padding-bottom:48px}
}

/* ===================================================================
   V10 — Clearly different, compact split-layout project page
   =================================================================== */

.manta-project-v10 {
  margin: 0;
  background: #071f23;
  color: #f5f9f8;
}

/* HERO */
.p10-hero {
  padding: 68px 0 54px;
  background:
    radial-gradient(circle at 82% 12%, rgba(68,202,190,.09), transparent 26%),
    #071f23;
}

.p10-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
}

.p10-topline .eyebrow,
.p10-story .eyebrow,
.p10-work .eyebrow,
.p10-next .eyebrow {
  color: #62d2c6;
}

.p10-topline a {
  color: rgba(245,249,248,.42);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

.p10-hero-card {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 26px;
  background: #0a2b30;
}

.p10-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 46px 48px;
}

.p10-type {
  display: block;
  margin-bottom: 12px;
  color: #5ccdbf;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.p10-copy h1 {
  margin: 0;
  color: #f7faf9;
  font-size: clamp(52px, 5.6vw, 84px);
  line-height: .9;
  letter-spacing: -.068em;
}

.p10-summary {
  max-width: 520px;
  margin: 20px 0 0;
  color: rgba(245,249,248,.58);
  font-size: 14px;
  line-height: 1.72;
}

.p10-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 22px;
}

.p10-chips span {
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  color: rgba(245,249,248,.42);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.p10-mini-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.p10-mini-meta span {
  display: block;
  margin-bottom: 6px;
  color: #5ccdbf;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.p10-mini-meta strong {
  color: rgba(245,249,248,.68);
  font-size: 11px;
  line-height: 1.45;
}

.p10-media {
  padding: 16px;
  min-height: 440px;
  background:
    radial-gradient(circle at 50% 45%, rgba(85,203,191,.08), transparent 34%),
    #09262b;
}

.p10-media-inner {
  width: 100%;
  height: 100%;
  min-height: 408px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 18px;
  background: #eef2f1;
}

.p10-media-inner img {
  width: 100%;
  height: 100%;
  max-height: 408px;
  display: block;
  object-fit: contain;
  object-position: center;
}

/* STORY */
.p10-story {
  padding: 58px 0 62px;
}

.p10-story-intro {
  display: grid;
  grid-template-columns: .62fr 1.38fr;
  gap: 60px;
  margin-bottom: 30px;
}

.p10-story-intro p {
  margin: 0;
  max-width: 760px;
  color: rgba(245,249,248,.58);
  font-size: 15px;
  line-height: 1.76;
}

.p10-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.p10-story-grid article {
  padding: 24px 26px 26px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  background: rgba(255,255,255,.02);
}

.p10-story-grid article > span {
  color: #5ccdbf;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.p10-story-grid h2 {
  margin: 12px 0 14px;
  color: #f7faf9;
  font-size: clamp(28px,2.5vw,38px);
  line-height: .98;
  letter-spacing: -.045em;
}

.p10-story-grid p {
  margin: 0;
  color: rgba(245,249,248,.49);
  font-size: 12.5px;
  line-height: 1.68;
}

/* WORK */
.p10-work {
  padding: 54px 0 58px;
  background: #09282c;
}

.p10-work-head {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 58px;
  align-items: end;
  margin-bottom: 28px;
}

.p10-work-head h2 {
  margin: 0;
  color: #f7faf9;
  font-size: clamp(36px,3.7vw,54px);
  line-height: .95;
  letter-spacing: -.055em;
}

.p10-work-list {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.08);
}

.p10-work-list article {
  padding: 22px 20px;
  background: #09282c;
}

.p10-work-list article span {
  display: block;
  margin-bottom: 26px;
  color: #5ccdbf;
  font-size: 8px;
  font-weight: 800;
}

.p10-work-list article p {
  margin: 0;
  color: rgba(245,249,248,.72);
  font-size: 13px;
  line-height: 1.5;
}

/* NEXT */
.p10-next {
  padding: 46px 0 60px;
  background: #061b1f;
}

.p10-next-row {
  display: grid;
  grid-template-columns: 220px 1fr 52px;
  gap: 26px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  background: #0a2b30;
  color: #f7faf9;
  text-decoration: none;
}

.p10-next-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 132px;
  overflow: hidden;
  border-radius: 12px;
  background: #eef2f1;
}

.p10-next-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  transition: transform .3s ease;
}

.p10-next-row:hover .p10-next-thumb img {
  transform: scale(1.012);
}

.p10-next-info h2 {
  margin: 8px 0 5px;
  font-size: clamp(30px,3vw,44px);
  line-height: .98;
  letter-spacing: -.05em;
}

.p10-next-info p {
  margin: 0;
  color: rgba(245,249,248,.40);
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.p10-next-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f7faf9;
  color: #082a2e;
  font-size: 18px;
}

@media(max-width:900px) {
  .p10-hero-card,
  .p10-story-intro,
  .p10-work-head {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .p10-story-grid,
  .p10-work-list {
    grid-template-columns: 1fr;
  }

  .p10-copy {
    padding: 34px 30px;
  }

  .p10-media {
    min-height: 320px;
  }

  .p10-media-inner {
    min-height: 290px;
  }

  .p10-media-inner img {
    max-height: 290px;
  }

  .p10-next-row {
    grid-template-columns: 150px 1fr 44px;
  }
}

@media(max-width:640px) {
  .p10-hero {
    padding-top: 58px;
  }

  .p10-next-row {
    grid-template-columns: 1fr;
  }

  .p10-next-thumb {
    height: 180px;
  }

  .p10-next-arrow {
    display: none;
  }
}

/* ===================================================================
   V11 — Flexible project case study
   Optional live links; no empty link/video/gallery slots.
   =================================================================== */
.manta-project-v11{margin:0;background:#071f23;color:#f5f9f8}
.p11-hero{padding:62px 0 48px;background:radial-gradient(circle at 82% 10%,rgba(98,210,198,.09),transparent 28%),#071f23}
.p11-topline{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:42px}
.p11-topline .eyebrow,.p11-meta span,.p11-overview .eyebrow,.p11-work .eyebrow,.p11-detail .eyebrow,.p11-end .eyebrow,.p11-next .eyebrow{color:#62d2c6}
.p11-topline>a{color:rgba(245,249,248,.48);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.p11-heading{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:end;margin-bottom:42px}
.p11-type{display:block;margin-bottom:15px;color:#5ccdbf;font-size:8px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.p11-heading h1{margin:0;color:#f7faf9;font-size:clamp(64px,8vw,126px);line-height:.84;letter-spacing:-.075em}
.p11-heading-side{padding-bottom:7px}
.p11-heading-side>p{max-width:590px;margin:0;color:rgba(245,249,248,.6);font-size:15px;line-height:1.7}
.p11-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.p11-chips span{padding:7px 10px;border:1px solid rgba(255,255,255,.11);border-radius:999px;color:rgba(245,249,248,.48);font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.p11-live-link{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:10px 13px;border:1px solid rgba(98,210,198,.34);border-radius:999px;color:#eaf8f5;text-decoration:none;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.p11-live-link strong{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#f5f9f8;color:#082a2e;font-size:13px}
.p11-hero-media{padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:28px;background:#0a2b30}
.p11-image-frame{display:flex;align-items:center;justify-content:center;min-height:520px;overflow:hidden;border-radius:20px;background:#eef2f1}
.p11-image-frame img{display:block;width:100%;height:auto;max-height:720px;object-fit:contain;object-position:center}
.p11-meta{border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);background:#061b1f}
.p11-meta-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.p11-meta-grid>div{min-height:105px;padding:25px 24px;border-right:1px solid rgba(255,255,255,.07)}
.p11-meta-grid>div:last-child{border-right:0}
.p11-meta span{display:block;margin-bottom:9px;font-size:7px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.p11-meta strong{color:rgba(245,249,248,.7);font-size:11px;line-height:1.5}
.p11-overview{padding:76px 0 82px}
.p11-section-head{display:grid;grid-template-columns:.62fr 1.38fr;gap:70px;align-items:start;margin-bottom:34px}
.p11-section-head>p{margin:0;max-width:800px;color:rgba(245,249,248,.59);font-size:16px;line-height:1.8}
.p11-overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.p11-overview-grid article{padding:30px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:rgba(255,255,255,.025)}
.p11-overview-grid article>span{color:#5ccdbf;font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.p11-overview-grid h2{margin:13px 0 14px;color:#f7faf9;font-size:clamp(30px,3vw,46px);line-height:.95;letter-spacing:-.055em}
.p11-overview-grid p{margin:0;color:rgba(245,249,248,.5);font-size:13px;line-height:1.72}
.p11-work{padding:70px 0 78px;background:#09282c}
.p11-work-head{margin-bottom:32px}
.p11-work-head h2{margin:0;color:#f7faf9;font-size:clamp(38px,4.5vw,66px);line-height:.9;letter-spacing:-.065em}
.p11-work-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.08);border-radius:20px;overflow:hidden;background:rgba(255,255,255,.08);gap:1px}
.p11-work-grid article{min-height:185px;padding:24px;background:#09282c}
.p11-work-grid article span{display:block;margin-bottom:42px;color:#5ccdbf;font-size:8px;font-weight:800;letter-spacing:.1em}
.p11-work-grid article p{margin:0;color:rgba(245,249,248,.75);font-size:13px;line-height:1.55}
.p11-detail{padding:78px 0;background:#071f23}
.p11-detail>.container{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}
.p11-detail-copy h2{max-width:560px;margin:15px 0 20px;color:#f7faf9;font-size:clamp(40px,4vw,62px);line-height:.92;letter-spacing:-.06em}
.p11-detail-copy>p{max-width:560px;margin:0;color:rgba(245,249,248,.52);font-size:13px;line-height:1.75}
.p11-detail-points{display:grid;grid-template-columns:1fr 1fr;gap:1px;border:1px solid rgba(255,255,255,.08);border-radius:20px;overflow:hidden;background:rgba(255,255,255,.08)}
.p11-detail-points>div{padding:24px;background:#0a2b30}
.p11-detail-points span{display:block;margin-bottom:24px;color:#5ccdbf;font-size:8px;font-weight:800}
.p11-detail-points strong{display:block;margin-bottom:8px;color:#f7faf9;font-size:16px}
.p11-detail-points p{margin:0;color:rgba(245,249,248,.48);font-size:11px;line-height:1.65}
.p11-end{padding:70px 0;background:#09282c}
.p11-end-row{display:flex;align-items:center;justify-content:space-between;gap:50px;padding:36px 40px;border:1px solid rgba(255,255,255,.08);border-radius:24px;background:linear-gradient(120deg,#0a2b30,#0b3337)}
.p11-end-row h2{max-width:700px;margin:13px 0 10px;color:#f7faf9;font-size:clamp(34px,4vw,58px);line-height:.94;letter-spacing:-.06em}
.p11-end-row p{max-width:620px;margin:0;color:rgba(245,249,248,.46);font-size:12px;line-height:1.65}
.p11-end-row .p11-live-link{flex:0 0 auto;margin-top:0}
.p11-next{padding:52px 0 70px;background:#061b1f}
.p11-next-row{display:grid;grid-template-columns:240px 1fr 52px;gap:26px;align-items:center;padding:14px;border:1px solid rgba(255,255,255,.07);border-radius:20px;background:#0a2b30;color:#f7faf9;text-decoration:none}
.p11-next-thumb{display:flex;align-items:center;justify-content:center;height:145px;overflow:hidden;border-radius:14px;background:#eef2f1}
.p11-next-thumb img{width:100%;height:100%;display:block;object-fit:contain}
.p11-next-info h2{margin:8px 0 5px;font-size:clamp(32px,3vw,48px);line-height:.95;letter-spacing:-.055em}
.p11-next-info p{margin:0;color:rgba(245,249,248,.4);font-size:8px;letter-spacing:.08em;text-transform:uppercase}
.p11-next-arrow{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#f7faf9;color:#082a2e;font-size:18px}
@media(max-width:900px){
  .p11-heading,.p11-section-head,.p11-detail>.container{grid-template-columns:1fr;gap:28px}
  .p11-heading h1{font-size:clamp(58px,13vw,92px)}
  .p11-image-frame{min-height:360px}
  .p11-work-grid{grid-template-columns:1fr 1fr}
  .p11-detail-points{grid-template-columns:1fr}
  .p11-end-row{align-items:flex-start;flex-direction:column;padding:30px}
  .p11-next-row{grid-template-columns:150px 1fr 44px}
}
@media(max-width:640px){
  .p11-hero{padding-top:54px}
  .p11-topline{margin-bottom:32px}
  .p11-heading h1{font-size:58px}
  .p11-image-frame{min-height:250px}
  .p11-meta-grid,.p11-overview-grid,.p11-work-grid{grid-template-columns:1fr}
  .p11-meta-grid>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}
  .p11-meta-grid>div:last-child{border-bottom:0}
  .p11-next-row{grid-template-columns:1fr}
  .p11-next-thumb{height:190px}
  .p11-next-arrow{display:none}
}

/* ===== TopGomla hero showcase ===== */
.p11-topgomla-showcase{position:relative;min-height:590px;overflow:hidden;background:radial-gradient(circle at 50% 48%,rgba(99,211,199,.16),transparent 34%),linear-gradient(145deg,#f4f7f6 0%,#e7eeee 100%);isolation:isolate}
.p11-topgomla-showcase::before{content:"";position:absolute;inset:18px;border:1px solid rgba(8,42,46,.07);border-radius:18px;pointer-events:none}
.tg-glow{position:absolute;border-radius:50%;filter:blur(18px);pointer-events:none;z-index:0}
.tg-glow-a{width:360px;height:360px;left:17%;top:20%;background:rgba(92,205,191,.11)}
.tg-glow-b{width:320px;height:320px;right:14%;bottom:8%;background:rgba(7,31,35,.06)}
.tg-brand-mark{position:absolute;left:42px;top:34px;z-index:7;font-size:11px;font-weight:800;letter-spacing:.14em;color:#0a2b30;text-transform:uppercase}
.tg-brand-mark span{font-weight:500;opacity:.5;margin-left:5px}
.tg-phone{position:absolute;z-index:2;width:265px;height:500px;border-radius:34px;padding:8px;background:#101517;box-shadow:0 30px 70px rgba(7,30,34,.22),0 8px 18px rgba(7,30,34,.12);border:1px solid rgba(255,255,255,.55)}
.tg-phone::before{content:"";position:absolute;z-index:3;left:50%;top:9px;transform:translateX(-50%);width:76px;height:18px;border-radius:0 0 12px 12px;background:#0a0d0f}
.tg-phone img{display:block;width:100%;height:100%;object-fit:cover;border-radius:27px;background:white}
.tg-phone-back{left:18%;top:72px;transform:rotate(-8deg) scale(.91);opacity:.94}
.tg-phone-main{left:50%;top:48px;transform:translateX(-50%) rotate(1deg);z-index:4;width:285px;height:535px}
.tg-phone-front{right:16%;top:78px;transform:rotate(8deg) scale(.91);z-index:5}
.tg-caption{position:absolute;z-index:8;padding:9px 13px;border-radius:999px;background:#0a2b30;color:#f7faf9;font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;box-shadow:0 12px 28px rgba(7,30,34,.16)}
.tg-caption-a{left:12%;bottom:48px}.tg-caption-b{right:12%;bottom:78px}
@media (max-width:980px){.p11-topgomla-showcase{min-height:520px}.tg-phone{width:215px;height:410px;border-radius:29px}.tg-phone img{border-radius:22px}.tg-phone-main{width:235px;height:440px}.tg-brand-mark{left:28px;top:24px}.tg-caption{font-size:8px}.tg-caption-a{left:8%;bottom:34px}.tg-caption-b{right:8%;bottom:50px}}
@media (max-width:700px){.p11-topgomla-showcase{min-height:460px}.p11-topgomla-showcase::before{inset:12px}.tg-phone{width:155px;height:300px;border-radius:22px;padding:5px}.tg-phone img{border-radius:17px}.tg-phone::before{top:6px;width:48px;height:12px;border-radius:0 0 8px 8px}.tg-phone-back{left:4%;top:78px;transform:rotate(-8deg) scale(.9)}.tg-phone-main{left:50%;top:58px;width:175px;height:330px}.tg-phone-front{right:4%;top:78px;transform:rotate(8deg) scale(.9)}.tg-brand-mark{left:20px;top:20px;font-size:8px}.tg-caption{display:none}}

/* Manta Studio — simplified case study */
.manta-project-simple{background:#061b1f;color:#f5f9f8}
.ps-hero{padding:48px 0 34px;background:radial-gradient(circle at 82% 8%,rgba(98,210,198,.08),transparent 28%),#071f23}
.ps-topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px}
.ps-topline .eyebrow,.ps-overview .eyebrow,.ps-work .eyebrow,.ps-visuals .eyebrow,.ps-next .eyebrow{color:#62d2c6}
.ps-topline>a{color:rgba(245,249,248,.45);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.ps-heading{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:end;margin-bottom:34px}
.ps-type{display:block;margin-bottom:12px;color:#5ccdbf;font-size:8px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.ps-heading h1{margin:0;color:#f7faf9;font-size:clamp(58px,6.2vw,94px);line-height:.86;letter-spacing:-.075em}
.ps-heading-side{padding-bottom:4px}.ps-heading-side>p{max-width:560px;margin:0;color:rgba(245,249,248,.62);font-size:14px;line-height:1.65}
.ps-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}.ps-chips span{padding:6px 9px;border:1px solid rgba(255,255,255,.1);border-radius:999px;color:rgba(245,249,248,.48);font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.p-simple-live{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:8px 11px;border:1px solid rgba(98,210,198,.3);border-radius:999px;color:#eaf8f5;text-decoration:none;font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.p-simple-live strong{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#f5f9f8;color:#082a2e;font-size:12px}
.ps-hero-media{padding:10px;border:1px solid rgba(255,255,255,.07);border-radius:24px;background:#0a2b30}.ps-showcase{position:relative;min-height:390px;overflow:hidden;border-radius:18px;background:radial-gradient(circle at 50% 50%,rgba(98,210,198,.13),transparent 35%),linear-gradient(145deg,#f4f7f6,#e6eeee)}
.ps-showcase:before{content:"";position:absolute;inset:14px;border:1px solid rgba(8,42,46,.07);border-radius:15px}.ps-brand{position:absolute;z-index:8;top:25px;left:30px;color:#0a2b30;font-size:9px;font-weight:800;letter-spacing:.14em}.ps-brand span{opacity:.45;font-weight:500;margin-left:4px}
.ps-phone{position:absolute;width:185px;height:345px;padding:7px;border-radius:31px;background:#111719;border:1px solid rgba(255,255,255,.5);box-shadow:0 25px 55px rgba(7,30,34,.2),0 7px 15px rgba(7,30,34,.1);z-index:2}.ps-phone:before{content:"";position:absolute;z-index:3;left:50%;top:8px;transform:translateX(-50%);width:70px;height:16px;border-radius:0 0 11px 11px;background:#0a0d0f}.ps-phone img{width:100%;height:100%;object-fit:cover;border-radius:25px;display:block;background:#fff}.ps-phone-back{left:24%;top:45px;transform:rotate(-8deg) scale(.91)}.ps-phone-main{left:50%;top:24px;transform:translateX(-50%) rotate(1deg);width:205px;height:375px;z-index:4}.ps-phone-front{right:24%;top:47px;transform:rotate(8deg) scale(.91);z-index:5}
.ps-overview{padding:52px 0 56px;background:#061b1f}.ps-overview-intro{display:grid;grid-template-columns:.62fr 1.38fr;gap:60px;align-items:start;margin-bottom:28px}.ps-overview-intro p{margin:0;max-width:760px;color:rgba(245,249,248,.62);font-size:15px;line-height:1.75}.ps-facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:22px}.ps-facts>div{padding:18px 22px;border-right:1px solid rgba(255,255,255,.07)}.ps-facts>div:last-child{border-right:0}.ps-facts span{display:block;margin-bottom:7px;color:#62d2c6;font-size:7px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.ps-facts strong{color:rgba(245,249,248,.68);font-size:10px;line-height:1.45}
.ps-two-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ps-two-cards article{padding:25px 27px;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:rgba(255,255,255,.025)}.ps-two-cards article>span{color:#5ccdbf;font-size:7px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.ps-two-cards h2{margin:10px 0 10px;color:#f7faf9;font-size:clamp(27px,2.5vw,39px);line-height:.95;letter-spacing:-.055em}.ps-two-cards p{margin:0;color:rgba(245,249,248,.48);font-size:11px;line-height:1.65}
.ps-work{padding:50px 0 54px;background:#09282c}.ps-work-head{display:grid;grid-template-columns:.6fr 1.4fr;gap:50px;align-items:end;margin-bottom:26px}.ps-work-head h2{margin:0;color:#f7faf9;font-size:clamp(32px,3.4vw,50px);line-height:.92;letter-spacing:-.065em}.ps-work-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.07);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.07);gap:1px}.ps-work-grid article{min-height:105px;padding:18px 20px;background:#09282c}.ps-work-grid article span{display:block;margin-bottom:28px;color:#5ccdbf;font-size:7px;font-weight:800}.ps-work-grid article p{margin:0;color:rgba(245,249,248,.72);font-size:11px;line-height:1.5}
@media(max-width:980px){.ps-heading,.ps-overview-intro,.ps-work-head{grid-template-columns:1fr;gap:22px}.ps-showcase{min-height:470px}.ps-phone{width:205px;height:385px}.ps-phone-main{width:225px;height:415px}.ps-work-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.ps-hero{padding-top:44px}.ps-heading h1{font-size:58px}.ps-topline{margin-bottom:28px}.ps-showcase{min-height:390px}.ps-phone{width:145px;height:280px;padding:5px;border-radius:21px}.ps-phone img{border-radius:17px}.ps-phone-main{width:162px;height:305px}.ps-phone:before{top:5px;width:48px;height:11px}.ps-phone-back{left:3%;top:70px}.ps-phone-front{right:3%;top:73px}.ps-brand{left:20px;top:19px;font-size:7px}.ps-facts,.ps-two-cards,.ps-work-grid{grid-template-columns:1fr}.ps-facts>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}.ps-facts>div:last-child{border-bottom:0}.ps-work-grid article{min-height:105px}.ps-work-grid article span{margin-bottom:25px}.ps-next-row{grid-template-columns:1fr}.ps-next-thumb{height:170px}.ps-next-arrow{display:none}}


/* Manta Studio — V4 editorial case study */
.v4-container{width:min(1080px,calc(100% - 56px));}
.v4-hero{padding:34px 0 54px;background:#071f23;overflow:hidden}
.v4-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:48px}
.v4-top>a{font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:rgba(245,249,248,.4)}
.v4-hero-grid{display:grid;grid-template-columns:1.15fr .75fr .8fr;gap:45px;align-items:center;min-height:350px}
.v4-type{font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:#62d2c6;font-weight:800}
.v4-title h1{font-size:clamp(64px,8vw,112px);line-height:.83;letter-spacing:-.08em;color:#f7faf9;margin:10px 0 0;font-weight:600}
.v4-copy{align-self:center}.v4-copy>p{font-size:13px;line-height:1.65;color:rgba(245,249,248,.58);margin:0 0 18px}.v4-phones{height:330px;position:relative}
.v4-phone{position:absolute;width:155px;height:300px;padding:5px;background:#111719;border:1px solid rgba(255,255,255,.65);border-radius:25px;box-shadow:0 20px 35px rgba(0,0,0,.25)}
.v4-phone img{width:100%;height:100%;object-fit:cover;border-radius:20px;display:block;background:#fff}.v4-phone:before{content:"";position:absolute;z-index:2;left:50%;top:5px;transform:translateX(-50%);width:54px;height:12px;border-radius:0 0 8px 8px;background:#090c0e}
.v4-phone-left{left:12px;top:30px;transform:rotate(-7deg)}.v4-phone-main{right:28px;top:4px;transform:rotate(5deg);z-index:2}
.v4-section{padding:48px 0;background:#061b1f}.v4-intro{display:grid;grid-template-columns:.55fr 1.45fr;gap:60px;align-items:start}.v4-intro p{max-width:680px;color:rgba(245,249,248,.58);font-size:13px;line-height:1.75;margin:0}
.v4-meta{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);margin-top:34px}.v4-meta>div{padding:17px 20px;border-right:1px solid rgba(255,255,255,.07)}.v4-meta>div:last-child{border:0}.v4-meta span,.v4-context span{display:block;color:#62d2c6;font-size:7px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;margin-bottom:8px}.v4-meta strong{font-size:10px;color:rgba(245,249,248,.68)}
.v4-work-section{background:#09282c;padding:54px 0}.v4-section-title{display:grid;grid-template-columns:.55fr 1.45fr;gap:60px;align-items:end}.v4-section-title h2{margin:0;font-size:clamp(34px,4vw,54px);line-height:.92;letter-spacing:-.065em;color:#f7faf9}.v4-work-list{display:grid;grid-template-columns:repeat(4,1fr);margin-top:28px;border:1px solid rgba(255,255,255,.07);border-radius:14px;overflow:hidden}.v4-work-list article{padding:18px 20px;min-height:105px;border-right:1px solid rgba(255,255,255,.07)}.v4-work-list article:last-child{border:0}.v4-work-list article span{color:#62d2c6;font-size:7px;font-weight:800}.v4-work-list article p{color:rgba(245,249,248,.65);font-size:10px;line-height:1.5;margin:30px 0 0}.v4-context{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}.v4-context>div{padding:20px 22px;border-top:1px solid rgba(255,255,255,.08)}.v4-context p{margin:0;color:rgba(245,249,248,.45);font-size:10px;line-height:1.65}.v4-next{padding:28px 0 50px;background:#061b1f}.v4-next-row{display:flex;align-items:center;justify-content:space-between;padding:25px 28px;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:#0a2b30}.v4-next-row h2{font-size:38px;line-height:1;letter-spacing:-.06em;color:#f7faf9;margin:7px 0 3px}.v4-next-row p{font-size:8px;color:rgba(245,249,248,.38);margin:0;text-transform:uppercase}.v4-next-row>span{width:38px;height:38px;border-radius:50%;background:#f5f9f8;color:#082a2e;display:grid;place-items:center}
@media(max-width:850px){.v4-hero-grid{grid-template-columns:1fr 1fr}.v4-phones{grid-column:1/-1;max-width:420px;width:100%;margin:auto}.v4-intro,.v4-section-title{grid-template-columns:1fr;gap:20px}.v4-work-list{grid-template-columns:repeat(2,1fr)}.v4-work-list article:nth-child(2){border-right:0}.v4-work-list article{border-bottom:1px solid rgba(255,255,255,.07)}}
@media(max-width:600px){.v4-container{width:calc(100% - 32px)}.v4-hero-grid{grid-template-columns:1fr;gap:25px}.v4-title h1{font-size:62px}.v4-phones{height:290px}.v4-phone{width:132px;height:255px}.v4-phone-left{left:18%;}.v4-phone-main{right:18%}.v4-meta,.v4-context{grid-template-columns:1fr}.v4-meta>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}.v4-meta>div:last-child{border-bottom:0}.v4-work-list{grid-template-columns:1fr}.v4-work-list article{border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}.v4-work-list article:last-child{border-bottom:0}.v4-next-row h2{font-size:30px}}

/* =========================================================
   Manta Studio — V5 editorial project showcase
   ========================================================= */
.manta-project-v5{background:#061b1f;color:#f5f9f8}
.v5-container{width:min(1160px,calc(100% - 64px))}
.v5-hero{padding:42px 0 70px;background:radial-gradient(circle at 75% 28%,rgba(98,210,198,.055),transparent 30%),#071f23}
.v5-topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:62px}
.v5-topline>a{font-size:9px;color:rgba(245,249,248,.4);text-transform:uppercase;letter-spacing:.12em}
.v5-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center}
.v5-kicker{font-size:8px;font-weight:800;letter-spacing:.14em;color:#62d2c6;text-transform:uppercase}
.v5-title-block h1{font-size:clamp(66px,8vw,116px);line-height:.82;letter-spacing:-.085em;margin:12px 0 22px;font-weight:600;color:#f6faf9}
.v5-title-rule{width:55px;height:1px;background:#62d2c6;margin-bottom:23px;opacity:.75}
.v5-lead{max-width:480px;color:rgba(245,249,248,.56);font-size:14px;line-height:1.7;margin:0 0 18px}
.ps-chips{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 20px}
.ps-chips span{border:1px solid rgba(255,255,255,.1);border-radius:100px;padding:7px 11px;font-size:7px;color:rgba(245,249,248,.48);letter-spacing:.08em;text-transform:uppercase}
.v5-live{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(98,210,198,.32);border-radius:100px;padding:9px 12px;color:#f5f9f8;font-size:8px;text-transform:uppercase;letter-spacing:.09em}
.v5-live b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#62d2c6;color:#082a2e;font-size:10px}
.v5-art{height:470px;position:relative;display:flex;align-items:center;justify-content:center}
.v5-glow{position:absolute;width:310px;height:310px;border-radius:50%;background:rgba(98,210,198,.055);filter:blur(3px)}
.v5-phone{position:absolute;width:205px;height:405px;padding:6px;border-radius:31px;background:#101719;border:1px solid rgba(255,255,255,.6);box-shadow:0 30px 55px rgba(0,0,0,.24)}
.v5-phone img{display:block;width:100%;height:100%;object-fit:cover;border-radius:25px;background:#fff}
.v5-phone:before{content:"";position:absolute;z-index:2;top:7px;left:50%;transform:translateX(-50%);width:72px;height:15px;background:#090c0e;border-radius:0 0 10px 10px}
.v5-phone-back{transform:rotate(-9deg) translate(-70px,12px);opacity:.82}
.v5-phone-front{transform:rotate(4deg) translate(58px,-7px);z-index:3}
.v5-art-label{position:absolute;right:5px;bottom:34px;border:1px solid rgba(98,210,198,.18);background:#0b2b30;color:#62d2c6;border-radius:100px;padding:8px 12px;font-size:7px;letter-spacing:.12em;font-weight:800}
.v5-overview{padding:62px 0;background:#061b1f}
.v5-overview-grid{display:grid;grid-template-columns:.55fr 1.45fr;gap:70px;border-top:1px solid rgba(255,255,255,.08);padding-top:28px}
.v5-overview-copy{font-size:15px;line-height:1.75;color:rgba(245,249,248,.62);max-width:760px;margin:0}
.v5-facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:38px;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
.v5-facts>div{padding:17px 16px;border-right:1px solid rgba(255,255,255,.07)}
.v5-facts>div:last-child{border-right:0}
.v5-facts span,.v5-note-grid article>span{display:block;color:#62d2c6;font-size:7px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:9px}
.v5-facts strong{font-size:9px;font-weight:500;color:rgba(245,249,248,.62)}
.v5-work{padding:64px 0 70px;background:#09282c}
.v5-work-head{display:grid;grid-template-columns:.55fr 1.45fr;gap:70px;align-items:end;margin-bottom:28px}
.v5-work-head h2{font-size:clamp(34px,4vw,54px);line-height:.92;letter-spacing:-.065em;margin:0;max-width:680px}
.v5-work-list{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.v5-work-item{min-height:125px;padding:18px 20px;border-right:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;justify-content:space-between}
.v5-work-item:last-child{border-right:0}
.v5-work-item span{font-size:7px;color:#62d2c6;font-weight:800}
.v5-work-item strong{font-size:10px;line-height:1.45;color:rgba(245,249,248,.7);font-weight:500}
.v5-notes{padding:60px 0;background:#061b1f}
.v5-note-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.v5-note-grid article{padding:28px;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:rgba(255,255,255,.018)}
.v5-note-grid h3{font-size:29px;line-height:1;letter-spacing:-.055em;margin:0 0 12px}
.v5-note-grid p{font-size:10px;line-height:1.7;color:rgba(245,249,248,.42);margin:0}
.v5-next{padding:22px 0 55px;background:#061b1f}
.v5-next-row{display:flex;align-items:center;justify-content:space-between;padding:24px 28px;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:#0a2b30}
.v5-next-row h2{font-size:32px;line-height:1;margin:6px 0 4px;letter-spacing:-.055em}
.v5-next-row p{margin:0;color:rgba(245,249,248,.36);font-size:8px;text-transform:uppercase;letter-spacing:.1em}
.v5-next-arrow{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#f5f9f8;color:#082a2e}
@media(max-width:850px){.v5-hero-grid,.v5-overview-grid,.v5-work-head{grid-template-columns:1fr;gap:35px}.v5-art{height:390px}.v5-work-list{grid-template-columns:1fr 1fr}.v5-work-item:nth-child(2){border-right:0}.v5-work-item:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.08)}.v5-note-grid{grid-template-columns:1fr}}
@media(max-width:600px){.v5-container{width:min(100% - 32px,1160px)}.v5-hero{padding-bottom:40px}.v5-topline{margin-bottom:42px}.v5-title-block h1{font-size:64px}.v5-art{height:350px}.v5-phone{width:145px;height:285px;border-radius:23px}.v5-phone img{border-radius:18px}.v5-phone:before{width:52px;height:11px}.v5-phone-back{transform:rotate(-8deg) translate(-48px,9px)}.v5-phone-front{transform:rotate(4deg) translate(42px,-3px)}.v5-art-label{right:0;bottom:20px}.v5-facts{grid-template-columns:1fr}.v5-facts>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}.v5-facts>div:last-child{border-bottom:0}.v5-work-list{grid-template-columns:1fr}.v5-work-item{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}.v5-work-item:last-child{border-bottom:0}.v5-note-grid{gap:10px}.v5-note-grid article{padding:22px}.v5-next-row{padding:20px}.v5-next-row h2{font-size:26px}}

/* =========================================================
   V6 — Manta project showcase: lighter, larger, useful
   ========================================================= */
.manta-project-v6 { background:#f3f5f1; color:#09272a; }
.manta-project-v6 .site-header { background:#062226; border-bottom:1px solid rgba(255,255,255,.09); }
.manta-project-v6 .main-nav a { color:rgba(255,255,255,.78); }
.manta-project-v6 .main-nav .nav-cta { color:#08272a; background:#f5f8f5; }
.v6-container { width:min(1180px,calc(100% - 64px)); }
.v6-hero { background:#062226; color:#f6faf8; padding:54px 0 72px; }
.v6-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:58px; }
.v6-top > a { color:rgba(255,255,255,.45); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.v6-hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:center; }
.v6-kicker { color:#65d3c8; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.v6-copy h1 { margin:14px 0 22px; font-size:clamp(72px,8vw,122px); line-height:.83; letter-spacing:-.075em; font-weight:600; }
.v6-hero-lead { max-width:550px; margin:0 0 22px; color:rgba(255,255,255,.7); font-size:17px; line-height:1.65; }
.v6-meta { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:23px; }
.v6-meta span { padding:8px 11px; border:1px solid rgba(255,255,255,.16); border-radius:999px; color:rgba(255,255,255,.62); font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.v6-visual { position:relative; height:430px; border-radius:28px; background:#edf2ee; overflow:hidden; box-shadow:0 25px 70px rgba(0,0,0,.18); }
.v6-visual:before { content:""; position:absolute; width:300px; height:300px; border-radius:50%; background:#bfe6df; left:50%; top:55%; transform:translate(-50%,-50%); opacity:.6; }
.v6-visual-note { position:absolute; z-index:6; right:22px; top:22px; padding:9px 12px; border-radius:999px; background:#09272a; color:#f5faf8; font-size:8px; font-weight:800; letter-spacing:.11em; }
.v6-device { position:absolute; z-index:3; width:190px; height:360px; padding:6px; border-radius:28px; background:#11181a; box-shadow:0 30px 45px rgba(6,35,38,.2); }
.v6-device img { width:100%; height:100%; object-fit:cover; border-radius:22px; display:block; }
.v6-device-1 { left:20%; top:54px; transform:rotate(-7deg); }
.v6-device-2 { left:43%; top:32px; width:208px; height:382px; transform:rotate(3deg); z-index:4; }
.v6-intro { background:#f3f5f1; padding:78px 0 82px; }
.v6-intro-grid { display:grid; grid-template-columns:.65fr 1.35fr; gap:65px; }
.v6-big-copy { margin:0; max-width:820px; color:#153d40; font-size:23px; line-height:1.55; letter-spacing:-.02em; }
.v6-facts { display:grid; grid-template-columns:repeat(4,1fr); margin-top:45px; border-top:1px solid #cbd7d2; border-bottom:1px solid #cbd7d2; }
.v6-facts div { padding:19px 16px; border-right:1px solid #cbd7d2; }
.v6-facts div:last-child { border-right:0; }
.v6-facts span { display:block; margin-bottom:8px; color:#4d9e96; font-size:8px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.v6-facts strong { color:#123437; font-size:12px; line-height:1.45; }
.v6-delivery { background:#e4eeea; padding:78px 0 86px; }
.v6-section-head { display:grid; grid-template-columns:.65fr 1.35fr; gap:65px; align-items:end; margin-bottom:38px; }
.v6-section-head h2 { margin:0; max-width:780px; color:#09272a; font-size:clamp(40px,4.3vw,65px); line-height:.98; letter-spacing:-.065em; }
.v6-delivery-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #bdd0ca; border-bottom:1px solid #bdd0ca; }
.v6-delivery-grid article { min-height:205px; padding:23px 20px; border-right:1px solid #bdd0ca; }
.v6-delivery-grid article:last-child { border-right:0; }
.v6-delivery-grid article > span { color:#3f938b; font-size:9px; font-weight:800; }
.v6-delivery-grid h3 { margin:48px 0 11px; color:#09272a; font-size:19px; line-height:1.05; letter-spacing:-.025em; }
.v6-delivery-grid p { margin:0; color:#4e6665; font-size:12px; line-height:1.55; }
.v6-visual-break { background:#f3f5f1; padding:75px 0 82px; }
.v6-break-copy { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:26px; }
.v6-break-copy p { max-width:610px; margin:0; color:#4b6261; font-size:14px; line-height:1.6; }
.v6-break-stage { position:relative; height:420px; border-radius:25px; background:#dfe9e5; overflow:hidden; display:flex; align-items:flex-end; justify-content:center; gap:20px; }
.v6-break-stage:after { content:""; position:absolute; width:500px; height:150px; background:#b8ddd6; border-radius:50%; bottom:-70px; left:50%; transform:translateX(-50%); }
.v6-mini-phone { position:relative; z-index:2; width:180px; height:350px; padding:6px; border-radius:26px; background:#111719; box-shadow:0 24px 35px rgba(6,35,38,.16); transform:rotate(-5deg); }
.v6-mini-phone-main { width:205px; height:385px; transform:translateY(-2px); z-index:3; }
.v6-mini-phone:last-child { transform:rotate(5deg); }
.v6-mini-phone img { width:100%; height:100%; object-fit:cover; border-radius:20px; display:block; }
.v6-thinking { background:#062226; color:#f6faf8; padding:72px 0; }
.v6-thinking-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.v6-thinking article { padding:32px; border:1px solid rgba(255,255,255,.11); border-radius:18px; background:rgba(255,255,255,.035); }
.v6-thinking article > span { color:#65d3c8; font-size:8px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.v6-thinking h3 { margin:13px 0 12px; color:#f7faf8; font-size:31px; line-height:1; letter-spacing:-.045em; }
.v6-thinking p { margin:0; color:rgba(255,255,255,.62); font-size:13px; line-height:1.65; }
.v6-next { background:#062226; padding:0 0 70px; }
.v6-next-row { display:flex; justify-content:space-between; align-items:center; min-height:125px; padding:24px 30px; border:1px solid rgba(255,255,255,.1); border-radius:20px; background:#0b3034; }
.v6-next-row h2 { margin:9px 0 4px; color:#f7faf8; font-size:42px; line-height:.95; letter-spacing:-.05em; }
.v6-next-row p { margin:0; color:rgba(255,255,255,.4); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.v6-next-arrow { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:#f5f8f5; color:#09272a; font-size:17px; }
@media(max-width:900px){
 .v6-container{width:min(100% - 36px,1180px)} .v6-hero-grid,.v6-intro-grid,.v6-section-head{grid-template-columns:1fr;gap:30px}.v6-copy h1{font-size:78px}.v6-visual{max-width:620px}.v6-facts{grid-template-columns:repeat(2,1fr)}.v6-facts div:nth-child(2){border-right:0}.v6-delivery-grid{grid-template-columns:repeat(2,1fr)}.v6-delivery-grid article:nth-child(2){border-right:0}.v6-delivery-grid article:nth-child(-n+2){border-bottom:1px solid #bdd0ca}.v6-break-stage{height:390px}.v6-mini-phone{width:150px;height:300px}.v6-mini-phone-main{width:180px;height:340px}
}
@media(max-width:620px){
 .v6-hero{padding:35px 0 45px}.v6-top{margin-bottom:38px}.v6-copy h1{font-size:61px}.v6-hero-lead{font-size:15px}.v6-visual{height:330px}.v6-device{width:135px;height:260px}.v6-device-1{left:18%;top:58px}.v6-device-2{left:42%;top:37px;width:150px;height:282px}.v6-intro,.v6-delivery,.v6-visual-break{padding:52px 0}.v6-big-copy{font-size:19px}.v6-facts{grid-template-columns:1fr}.v6-facts div{border-right:0;border-bottom:1px solid #cbd7d2}.v6-facts div:last-child{border-bottom:0}.v6-delivery-grid{grid-template-columns:1fr}.v6-delivery-grid article{border-right:0!important;border-bottom:1px solid #bdd0ca}.v6-delivery-grid article:last-child{border-bottom:0}.v6-break-copy{display:block}.v6-break-copy p{margin-top:14px}.v6-break-stage{height:330px;gap:8px}.v6-mini-phone{width:105px;height:220px;border-radius:20px}.v6-mini-phone-main{width:122px;height:255px}.v6-mini-phone img{border-radius:15px}.v6-thinking{padding:52px 0}.v6-thinking-grid{grid-template-columns:1fr}.v6-thinking h3{font-size:27px}.v6-next-row{padding:20px}.v6-next-row h2{font-size:30px}.v6-next-arrow{width:38px;height:38px}
}


/* =========================================================
   V7 — refined Manta case-study: editorial, brighter, useful
   ========================================================= */
.manta-project-v6{background:#f5f6f2;color:#102f31}
.manta-project-v6 .site-header{background:#06272a;border-bottom:1px solid rgba(255,255,255,.09)}
.manta-project-v6 .main-nav a{color:rgba(255,255,255,.82)}
.manta-project-v6 .main-nav .nav-cta{background:#f5f8f4;color:#09272a}
.v7-container{width:min(1180px,calc(100% - 72px))}
.v7-hero{background:#06272a;color:#f6faf7;padding:58px 0 78px;overflow:hidden}
.v7-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:64px}
.v7-top>a{font-size:9px;color:rgba(255,255,255,.48);letter-spacing:.1em;text-transform:uppercase}
.v7-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:76px;align-items:center}
.v7-kicker{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#62d2c5}
.v7-copy h1{font-size:clamp(82px,8vw,126px);line-height:.82;letter-spacing:-.082em;font-weight:600;margin:15px 0 24px}
.v7-copy>p{max-width:560px;font-size:16px;line-height:1.65;color:rgba(255,255,255,.72);margin:0 0 20px}
.v7-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.v7-tags span{border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:8px 11px;font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.63)}
.v7-hero-art{height:410px;position:relative;border-radius:24px;background:#e9efeb;overflow:hidden}
.v7-hero-art:before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:#b9ded6;left:52%;top:56%;transform:translate(-50%,-50%)}
.v7-hero-art:after{content:"";position:absolute;width:150px;height:150px;border:1px solid rgba(8,44,46,.12);border-radius:50%;right:-55px;bottom:-55px}
.v7-ghost{position:absolute;right:20px;bottom:-12px;color:rgba(8,44,46,.055);font-size:180px;line-height:1;font-weight:600;letter-spacing:-.1em}
.v7-art-label{position:absolute;right:18px;top:18px;z-index:7;background:#092d30;color:#fff;border-radius:999px;padding:8px 11px;font-size:7px;font-weight:800;letter-spacing:.11em}
.v7-phone{position:absolute;z-index:3;width:170px;height:330px;padding:6px;border-radius:27px;background:#101719;box-shadow:0 26px 45px rgba(5,38,40,.2)}
.v7-phone img{display:block;width:100%;height:100%;object-fit:cover;border-radius:21px}
.v7-phone:before{content:"";position:absolute;z-index:4;left:50%;top:7px;transform:translateX(-50%);width:57px;height:12px;border-radius:0 0 8px 8px;background:#090d0e}
.v7-phone-back{left:24%;top:53px;transform:rotate(-8deg)}
.v7-phone-front{left:48%;top:27px;width:185px;height:354px;transform:rotate(4deg);z-index:4}
.v7-overview{background:#f5f6f2;padding:76px 0 78px}
.v7-overview-head{display:grid;grid-template-columns:.62fr 1.38fr;gap:60px;align-items:start}
.v7-overview-head>p{font-size:20px;line-height:1.6;letter-spacing:-.02em;color:#274c4d;max-width:820px;margin:0}
.v7-facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #cbd6d1;border-bottom:1px solid #cbd6d1;margin-top:44px}
.v7-facts>div{padding:21px 20px;border-right:1px solid #cbd6d1}
.v7-facts>div:last-child{border-right:0}
.v7-facts span{display:block;color:#4c9f95;font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:9px}
.v7-facts strong{font-size:12px;color:#14393a;line-height:1.4}
.v7-work{background:#e4efeb;padding:78px 0 82px}
.v7-work-head{display:grid;grid-template-columns:.62fr 1.38fr;gap:60px;align-items:end;margin-bottom:35px}
.v7-work-number{font-size:110px;line-height:.75;color:rgba(13,65,65,.09);letter-spacing:-.1em;margin-top:26px}
.v7-work-head h2{margin:0;max-width:820px;font-size:clamp(39px,4.5vw,66px);line-height:.96;letter-spacing:-.065em;color:#082b2e}
.v7-work-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #b8cfca;border-bottom:1px solid #b8cfca}
.v7-work-grid article{min-height:180px;padding:20px;border-right:1px solid #b8cfca}
.v7-work-grid article:last-child{border-right:0}
.v7-work-grid article>span{font-size:8px;font-weight:800;color:#4b9c93}
.v7-work-grid h3{font-size:20px;line-height:1.05;letter-spacing:-.03em;color:#092b2e;margin:44px 0 10px}
.v7-work-grid p{font-size:11px;line-height:1.6;color:#58706f;margin:0;max-width:210px}
.v7-experience{background:#f5f6f2;padding:78px 0 84px}
.v7-experience-copy{display:grid;grid-template-columns:.62fr 1fr .7fr;gap:40px;align-items:end;margin-bottom:30px}
.v7-experience-copy h2{margin:0;font-size:clamp(31px,3.5vw,51px);line-height:.98;letter-spacing:-.06em;color:#0a3032}
.v7-experience-copy p{margin:0;color:#5a706e;font-size:12px;line-height:1.7}
.v7-experience-stage{height:330px;position:relative;border-radius:22px;background:#dce8e3;overflow:hidden}
.v7-experience-stage:before{content:"";position:absolute;width:460px;height:180px;background:#b9ded6;border-radius:50%;left:50%;bottom:-95px;transform:translateX(-50%)}
.v7-mini{position:absolute;z-index:2;width:145px;height:280px;padding:5px;background:#101719;border-radius:24px;box-shadow:0 25px 35px rgba(7,41,43,.16)}
.v7-mini img{width:100%;height:100%;object-fit:cover;display:block;border-radius:19px}
.v7-mini-left{left:34%;bottom:10px;transform:rotate(-7deg)}
.v7-mini-main{left:50%;bottom:5px;transform:translateX(-50%);width:165px;height:310px;z-index:3}
.v7-mini-right{right:34%;bottom:10px;transform:rotate(7deg)}
.v7-approach{background:#f5f6f2;padding:0 0 78px}
.v7-approach-intro{display:grid;grid-template-columns:.62fr 1.38fr;gap:60px;padding:0 0 32px}
.v7-approach-intro p{margin:0;font-size:17px;line-height:1.6;color:#35595a;max-width:750px}
.v7-approach-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.v7-approach-grid article{padding:28px 30px;border:1px solid #cbd7d2;border-radius:16px;background:#eef2ee}
.v7-approach-grid article>span{font-size:8px;font-weight:800;color:#4b9c93;letter-spacing:.12em;text-transform:uppercase}
.v7-approach-grid h3{margin:12px 0 9px;color:#0a2e31;font-size:29px;line-height:1;letter-spacing:-.045em}
.v7-approach-grid p{margin:0;color:#5b706e;font-size:11px;line-height:1.65}
.v7-next{background:#06272a;padding:36px 0 58px}
.v7-next-row{display:flex;align-items:center;justify-content:space-between;min-height:118px;padding:23px 30px;border:1px solid rgba(255,255,255,.11);border-radius:18px;background:#0b3236}
.v7-next-row h2{margin:8px 0 3px;color:#f6faf8;font-size:40px;line-height:.95;letter-spacing:-.05em}
.v7-next-row p{margin:0;color:rgba(255,255,255,.42);font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.v7-next-arrow{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#f4f8f4;color:#082b2e;font-size:16px}
@media(max-width:900px){
 .v7-container{width:min(100% - 40px,1180px)} .v7-hero-grid,.v7-overview-head,.v7-work-head,.v7-approach-intro{grid-template-columns:1fr;gap:28px}.v7-copy h1{font-size:84px}.v7-hero-art{max-width:640px}.v7-work-grid{grid-template-columns:1fr 1fr}.v7-work-grid article:nth-child(2){border-right:0}.v7-work-grid article:nth-child(-n+2){border-bottom:1px solid #b8cfca}.v7-experience-copy{grid-template-columns:1fr 1fr}.v7-experience-copy p{grid-column:2}.v7-mini-left{left:28%}.v7-mini-right{right:28%}
}
@media(max-width:620px){
 .v7-container{width:min(100% - 30px,1180px)} .v7-hero{padding:38px 0 50px}.v7-top{margin-bottom:40px}.v7-copy h1{font-size:62px}.v7-copy>p{font-size:14px}.v7-hero-art{height:320px}.v7-phone{width:125px;height:245px;border-radius:20px;padding:4px}.v7-phone img{border-radius:16px}.v7-phone:before{width:43px;height:10px}.v7-phone-back{left:17%;top:55px}.v7-phone-front{left:42%;top:35px;width:140px;height:270px}.v7-ghost{font-size:120px}.v7-overview,.v7-work,.v7-experience{padding:52px 0}.v7-overview-head>p{font-size:18px}.v7-facts{grid-template-columns:1fr}.v7-facts>div{border-right:0;border-bottom:1px solid #cbd6d1}.v7-facts>div:last-child{border-bottom:0}.v7-work-grid{grid-template-columns:1fr}.v7-work-grid article{border-right:0!important;border-bottom:1px solid #b8cfca}.v7-work-grid article:last-child{border-bottom:0}.v7-work-number{font-size:85px}.v7-experience-copy{grid-template-columns:1fr;gap:18px}.v7-experience-copy p{grid-column:auto}.v7-experience-stage{height:300px}.v7-mini{width:100px;height:205px;border-radius:17px}.v7-mini img{border-radius:13px}.v7-mini-main{width:115px;height:230px}.v7-mini-left{left:18%}.v7-mini-right{right:18%}.v7-approach{padding-bottom:52px}.v7-approach-intro{gap:18px}.v7-approach-grid{grid-template-columns:1fr}.v7-next-row{padding:19px 20px}.v7-next-row h2{font-size:29px}.v7-next-arrow{width:37px;height:37px}
}

/* =========================================================
   v8 — clearer hierarchy, lighter rhythm, useful story
   ========================================================= */
.v7-hero{padding:54px 0 42px;background:radial-gradient(circle at 82% 8%,rgba(98,210,198,.10),transparent 28%),#071f23}
.v7-copy h1{font-size:clamp(68px,7vw,104px);letter-spacing:-.08em}
.v7-copy>p{max-width:540px;font-size:16px;line-height:1.65;color:rgba(245,249,248,.68)}
.v7-tags span{font-size:9px;padding:7px 11px}
.v7-hero-art{min-height:365px}

.v7-work{padding:66px 0 62px;background:#dfecea;color:#09272b}
.v8-section-head{display:grid;grid-template-columns:.55fr 1.45fr;column-gap:55px;align-items:end;margin-bottom:28px}
.v8-section-head .eyebrow{color:#2a8e84;align-self:start;padding-top:8px}
.v8-section-head h2{margin:0;color:#09272b;font-size:clamp(42px,4.6vw,67px);line-height:.92;letter-spacing:-.065em;max-width:780px}
.v8-section-head p{grid-column:2;margin:14px 0 0;max-width:650px;color:rgba(9,39,43,.62);font-size:14px;line-height:1.65}
.v7-work-grid{grid-template-columns:repeat(4,1fr);border:0;background:transparent;gap:0;border-top:1px solid rgba(9,39,43,.16);border-bottom:1px solid rgba(9,39,43,.16)}
.v7-work-grid article{min-height:132px;padding:20px 22px;background:transparent;border-right:1px solid rgba(9,39,43,.12)}
.v7-work-grid article:last-child{border-right:0}
.v7-work-grid article span{color:#2a8e84;font-size:8px;margin-bottom:30px}
.v7-work-grid article h3{font-size:16px;color:#09272b;margin:0 0 7px;letter-spacing:-.02em}
.v7-work-grid article p{color:rgba(9,39,43,.58);font-size:10px;line-height:1.55}

.v7-experience{padding:68px 0;background:#f6f8f5;color:#09272b}
.v8-product-copy{display:grid;grid-template-columns:.65fr 1.05fr .9fr;gap:35px;align-items:start;margin-bottom:28px}
.v8-product-copy .eyebrow{color:#2a8e84;padding-top:8px}
.v8-product-copy h2{margin:0;color:#09272b;font-size:clamp(38px,4.2vw,60px);line-height:.94;letter-spacing:-.065em}
.v8-product-copy p{margin:3px 0 0;color:rgba(9,39,43,.60);font-size:13px;line-height:1.7}
.v8-product-points{grid-column:2/4;display:flex;gap:10px;flex-wrap:wrap;margin-left:calc(.65fr + 35px);display:none}
.v8-product-visual{display:flex;justify-content:center;align-items:center;min-height:300px;border-radius:20px;background:#dfecea;overflow:hidden}
.v8-device{width:220px;padding:8px;border-radius:30px;background:#111719;box-shadow:0 22px 50px rgba(8,37,40,.18);transform:rotate(3deg)}
.v8-device img{display:block;width:100%;height:auto;border-radius:23px;background:#fff}

.v7-approach{padding:66px 0 70px;background:#071f23}
.v8-approach-intro{display:grid;grid-template-columns:.55fr 1.45fr;gap:55px;align-items:start;margin-bottom:28px}
.v8-approach-intro .eyebrow{color:#62d2c6;padding-top:8px}
.v8-approach-intro h2{margin:0;max-width:760px;color:#f7faf9;font-size:clamp(38px,4.2vw,60px);line-height:.94;letter-spacing:-.065em}
.v7-approach-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.v7-approach-grid article{padding:30px 30px 32px;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(255,255,255,.035)}
.v7-approach-grid article>span{font-size:8px;color:#62d2c6;letter-spacing:.14em;text-transform:uppercase;font-weight:800}
.v7-approach-grid h3{font-size:clamp(26px,2.5vw,37px);line-height:.98;letter-spacing:-.05em;color:#f7faf9;margin:12px 0 12px}
.v7-approach-grid p{font-size:12px;line-height:1.7;color:rgba(245,249,248,.58);max-width:600px}

@media(max-width:900px){
 .v8-section-head,.v8-approach-intro{grid-template-columns:1fr;gap:16px}
 .v8-section-head p{grid-column:auto}
 .v8-product-copy{grid-template-columns:1fr;gap:16px}
 .v7-work-grid{grid-template-columns:1fr 1fr}
 .v7-work-grid article:nth-child(2){border-right:0}
 .v7-work-grid article{border-bottom:1px solid rgba(9,39,43,.12)}
 .v8-product-visual{min-height:270px}
}
@media(max-width:650px){
 .v7-copy h1{font-size:58px}
 .v7-copy>p{font-size:13px}
 .v7-work-grid,.v7-approach-grid{grid-template-columns:1fr}
 .v7-work-grid article{border-right:0}
 .v7-work-grid article:last-child{border-bottom:0}
 .v8-section-head h2,.v8-product-copy h2,.v8-approach-intro h2{font-size:40px}
 .v8-device{width:190px}
}

/* =========================================================
   v9 — final polish: stronger hierarchy, less template feel
   ========================================================= */
.v7-hero{padding:72px 0 58px;background:radial-gradient(circle at 84% 10%,rgba(98,210,198,.13),transparent 30%),#071f23}
.v7-top{margin-bottom:42px}
.v7-hero-grid{grid-template-columns:1.08fr .92fr;gap:58px;align-items:center}
.v7-copy h1{font-size:clamp(78px,8vw,118px);line-height:.84;letter-spacing:-.085em}
.v7-copy>p{max-width:570px;font-size:17px;line-height:1.68;color:rgba(245,249,248,.72);margin-top:22px}
.v7-tags{margin-top:20px}
.v7-hero-art{min-height:410px;transform:translateY(2px)}
.v7-phone-back{transform:rotate(-7deg) translateY(12px);}
.v7-phone-front{transform:rotate(4deg);}

.v7-overview{padding:62px 0 66px;background:#f6f8f5}
.v7-overview-head{grid-template-columns:.55fr 1.45fr;gap:58px;align-items:start}
.v7-overview-head>p{margin:0;max-width:760px;font-size:15px;line-height:1.75;color:#35595a}
.v7-facts{margin-top:36px;border-top:1px solid #cbd7d2;border-bottom:1px solid #cbd7d2}
.v7-facts>div{padding:20px 22px}
.v7-facts strong{font-size:11px;color:#294d4d}

.v7-work{padding:72px 0 68px;background:#dfecea}
.v8-section-head{grid-template-columns:.48fr 1.52fr;column-gap:60px;margin-bottom:34px}
.v8-section-head h2{font-size:clamp(48px,5.2vw,74px);line-height:.9}
.v8-section-head p{font-size:13px;line-height:1.7;margin-top:16px}
.v7-work-grid{grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(9,39,43,.18);border-bottom:1px solid rgba(9,39,43,.18)}
.v7-work-grid article{min-height:150px;padding:22px 22px 20px}
.v7-work-grid article span{margin-bottom:34px}
.v7-work-grid article h3{font-size:18px;line-height:1.05;margin-bottom:8px}
.v7-work-grid article p{font-size:10.5px;line-height:1.55;max-width:220px}

.v7-experience{padding:78px 0 82px;background:#f6f8f5}
.v7-experience .v7-container{display:grid;grid-template-columns:.92fr 1.08fr;gap:62px;align-items:center}
.v8-product-copy{display:block;margin:0}
.v8-product-copy .eyebrow{display:block;margin-bottom:13px}
.v8-product-copy h2{font-size:clamp(42px,4.6vw,66px);line-height:.9;max-width:620px}
.v8-product-copy p{margin-top:20px;max-width:500px;font-size:13px;line-height:1.75}
.v8-product-points{display:flex;gap:7px;flex-wrap:wrap;margin:23px 0 0}
.v8-product-points span{padding:7px 10px;border:1px solid #c6d4cf;border-radius:999px;color:#426462;font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.v8-product-visual{min-height:360px;border-radius:22px;background:#dfecea;position:relative}
.v8-product-visual:after{content:"";position:absolute;width:240px;height:75px;bottom:-20px;left:50%;transform:translateX(-50%);border-radius:50%;background:#b9ded6;opacity:.75}
.v8-device{position:relative;z-index:2;width:235px;padding:8px;border-radius:31px;box-shadow:0 28px 60px rgba(8,37,40,.20);transform:rotate(3deg)}

.v7-approach{padding:70px 0 76px;background:#071f23}
.v8-approach-intro{grid-template-columns:.48fr 1.52fr;gap:60px;margin-bottom:32px}
.v8-approach-intro h2{font-size:clamp(43px,4.8vw,68px);line-height:.9}
.v7-approach-grid{gap:12px}
.v7-approach-grid article{padding:28px 28px 30px;border-radius:16px}
.v7-approach-grid h3{font-size:clamp(28px,2.6vw,39px)}
.v7-approach-grid p{font-size:11px;line-height:1.7}

.v7-next{padding:32px 0 58px;background:#071f23}
.v7-next-row{min-height:105px;padding:21px 28px}
.v7-next-row h2{font-size:38px}

@media(max-width:900px){
  .v7-hero{padding-top:58px}
  .v7-hero-grid{grid-template-columns:1fr;gap:25px}
  .v7-hero-art{max-width:620px;min-height:360px;margin:0 auto;width:100%}
  .v7-overview-head,.v8-section-head,.v8-approach-intro{grid-template-columns:1fr;gap:18px}
  .v8-section-head p{grid-column:auto}
  .v7-experience .v7-container{grid-template-columns:1fr;gap:28px}
  .v8-product-visual{min-height:330px}
}

@media(max-width:620px){
  .v7-hero{padding:42px 0 46px}
  .v7-copy h1{font-size:62px}
  .v7-copy>p{font-size:14px}
  .v7-hero-art{min-height:300px}
  .v7-overview,.v7-work,.v7-experience,.v7-approach{padding-top:52px;padding-bottom:54px}
  .v8-section-head h2,.v8-product-copy h2,.v8-approach-intro h2{font-size:42px}
  .v7-work-grid,.v7-approach-grid{grid-template-columns:1fr}
  .v7-work-grid article{border-right:0;border-bottom:1px solid rgba(9,39,43,.12)}
  .v7-work-grid article:last-child{border-bottom:0}
  .v8-product-visual{min-height:285px}
  .v8-device{width:195px}
}

/* TOPGOMLA REFERENCE-LED CASE STUDY */
body.top-case{margin:0;background:#f5f5ef;color:#092d30;font-family:inherit}.top-case .container{width:min(1180px,calc(100% - 80px));margin:auto}.top-header{background:#06282b!important;border-bottom:1px solid rgba(255,255,255,.08)!important;position:relative!important}.top-header .main-nav a{color:rgba(255,255,255,.72)}.top-header .main-nav a.is-active{color:#78d6c8}.hero{background:#06282b;color:#f6faf7;overflow:hidden}.hero-inner{padding:42px 0 76px}.crumb{font-size:10px;color:#78d6c8;letter-spacing:.08em;margin-bottom:62px}.hero-grid{display:grid;grid-template-columns:45% 55%;align-items:center;min-height:520px}.label{display:block;font-size:10px;letter-spacing:.16em;font-weight:800;color:#78d6c8;text-transform:uppercase}.dark-label{color:#438c84}.hero-copy h1{font-size:clamp(72px,9vw,132px);line-height:.84;letter-spacing:-.075em;margin:18px 0 14px;font-weight:700}.hero-copy h1 span{color:#78d6c8}.hero-copy h2{font-size:25px;font-weight:500;margin:0 0 20px}.hero-copy p{max-width:520px;font-size:15px;line-height:1.65;color:rgba(246,250,247,.65);margin:0 0 26px}.actions{display:flex;gap:12px}.btn{display:inline-flex;align-items:center;padding:13px 18px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.btn-mint{background:#78d6c8;color:#06282b}.btn-ghost{border:1px solid rgba(255,255,255,.28);color:#fff}.hero-meta{margin-top:30px;font-size:8px;letter-spacing:.13em;color:rgba(255,255,255,.4)}.hero-composition{position:relative;height:470px}.orbit{position:absolute;border:1px solid rgba(120,214,200,.24);border-radius:50%}.orbit-a{width:650px;height:650px;right:-70px;top:-80px}.orbit-b{width:370px;height:370px;right:130px;top:30px}.orbit-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:#78d6c8;right:210px;top:70px;box-shadow:0 0 0 8px rgba(120,214,200,.08)}.laptop{position:absolute;width:530px;height:325px;right:15px;top:68px;background:#172326;border-radius:16px 16px 8px 8px;padding:9px;transform:perspective(1000px) rotateY(-6deg);box-shadow:0 30px 70px rgba(0,0,0,.35)}.laptop:after{content:"";position:absolute;left:-8%;width:116%;height:18px;bottom:-18px;border-radius:0 0 18px 18px;background:#b6c3c1;box-shadow:0 9px 20px rgba(0,0,0,.3)}.screen{width:100%;height:100%;overflow:hidden;border-radius:10px;background:#fff}.screen img{width:100%;height:100%;object-fit:cover}.phone{position:absolute;width:178px;height:365px;right:30px;bottom:10px;background:#101718;border-radius:30px;padding:7px;z-index:3;transform:rotate(4deg);box-shadow:0 28px 60px rgba(0,0,0,.42)}.phone img{width:100%;height:100%;object-fit:cover;border-radius:24px}.light{background:#f5f5ef}.about{padding:86px 0}.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:90px}.two-col h2,.delivered h2{font-size:58px;line-height:.96;letter-spacing:-.065em;margin:14px 0 20px}.two-col p,.goal p,.challenge p,.next p{font-size:15px;line-height:1.7;color:#526d6d;max-width:610px}.facts{display:grid;grid-template-columns:1fr 1fr;border-left:1px solid rgba(9,45,48,.12)}.facts div{padding:22px 25px;border-bottom:1px solid rgba(9,45,48,.12)}.facts b{display:block;font-size:8px;letter-spacing:.13em;color:#6d8987;margin-bottom:9px}.facts strong{font-size:13px}.mint{background:#d9eeea}.goal{padding:90px 0;overflow:hidden}.goal-grid{display:grid;grid-template-columns:45% 55%;gap:50px;align-items:center}.goal h2{font-size:64px;line-height:.92;letter-spacing:-.065em;margin:16px 0}.context-art{border-radius:28px;overflow:hidden;position:relative;box-shadow:0 25px 60px rgba(6,40,43,.15)}.context-art img{display:block;width:100%;height:390px;object-fit:cover}.context-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(217,238,234,.12),rgba(6,40,43,.08));mix-blend-mode:multiply}.challenge{padding:78px 0}.split-copy{display:grid;grid-template-columns:1fr 1fr;gap:70px}.split-copy>div+div{border-left:1px solid rgba(9,45,48,.14);padding-left:70px}.split-copy h2{font-size:42px;line-height:1;letter-spacing:-.055em;margin:15px 0}.dark{background:#06282b;color:#f6faf7}.product{padding:86px 0}.product-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:38px}.product h2{font-size:60px;line-height:.94;letter-spacing:-.065em;margin:12px 0 8px}.product-head p{margin:0;color:rgba(246,250,247,.55);font-size:13px}.arrows{font-size:18px;color:#78d6c8}.gallery{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}.gallery figure{margin:0}.shot{height:380px;border-radius:17px;overflow:hidden;background:#dceae7;border:1px solid rgba(255,255,255,.12)}.shot img{width:100%;height:100%;object-fit:cover;object-position:top center}.gallery figcaption{padding:17px 2px}.gallery figcaption b{display:block;font-size:14px;margin-bottom:7px}.gallery figcaption span{font-size:11px;line-height:1.55;color:rgba(246,250,247,.52)}.delivered{padding:82px 0}.features{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(9,45,48,.12);margin-top:40px}.features>div{padding:25px 20px 20px;border-right:1px solid rgba(9,45,48,.1)}.features>div:last-child{border-right:0}.features i{font-style:normal;color:#438c84;font-size:9px;font-weight:800}.features h3{font-size:18px;margin:45px 0 9px;letter-spacing:-.03em}.features p{font-size:11px;line-height:1.6;color:#58706f}.next{padding:78px 0}.next-grid{display:grid;grid-template-columns:45% 55%;gap:50px;align-items:center}.next h2{font-size:58px;letter-spacing:-.065em;margin:15px 0}.next p{color:rgba(246,250,247,.56);max-width:440px}.next a{color:#78d6c8;font-size:12px;font-weight:700}.next-visual{height:300px;border-radius:20px;overflow:hidden}.next-visual img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.top-case .container{width:min(100% - 40px,1180px)}.hero-grid,.goal-grid,.two-col,.next-grid{grid-template-columns:1fr}.hero-copy{padding-top:10px}.hero-composition{height:400px}.laptop{width:520px;right:5%;}.phone{right:5%;}.facts{margin-top:30px}.split-copy{grid-template-columns:1fr;gap:45px}.split-copy>div+div{border-left:0;border-top:1px solid rgba(9,45,48,.14);padding-left:0;padding-top:40px}.gallery{grid-template-columns:1fr}.features{grid-template-columns:1fr 1fr}.features>div:nth-child(2){border-right:0}.features>div:nth-child(-n+2){border-bottom:1px solid rgba(9,45,48,.1)}}
@media(max-width:600px){.hero-inner{padding-bottom:45px}.hero-copy h1{font-size:68px}.hero-copy h2{font-size:20px}.hero-composition{height:330px}.laptop{width:360px;height:225px;top:55px;right:-10px}.phone{width:135px;height:275px;right:0;bottom:0}.orbit-a{width:430px;height:430px}.orbit-b{width:260px;height:260px;right:50px}.two-col h2,.delivered h2,.product h2,.next h2{font-size:42px}.goal h2{font-size:48px}.context-art img{height:270px}.gallery .shot{height:420px}.features{grid-template-columns:1fr}.features>div{border-right:0;border-bottom:1px solid rgba(9,45,48,.1)}.features>div:last-child{border-bottom:0}}
/* V16 — approved Hero + About refinement */
.site-nav{height:72px;background:#06282b;border-bottom:0}
.site-nav .wrap{position:relative;z-index:8}
.hero{min-height:650px;margin-top:0;background:#06282b}
.hero-grid{min-height:578px;grid-template-columns:46% 54%}
.hero-copy{padding-top:10px;max-width:560px}
.hero h1{font-size:clamp(78px,8.2vw,124px);margin-bottom:16px}
.hero h2{font-size:24px;margin-bottom:18px}
.hero p{font-size:15px;max-width:485px}
.hero-art{position:absolute;right:0;top:0;width:68vw;height:650px;z-index:1;overflow:hidden}
.hero-art:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#06282b 0%,#06282b 7%,rgba(6,40,43,.92) 16%,rgba(6,40,43,.48) 29%,rgba(6,40,43,.08) 47%,transparent 65%);z-index:3;pointer-events:none}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;border-radius:0;clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);box-shadow:none;transform:none}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center center}
.hero-photo:after{background:linear-gradient(90deg,rgba(6,40,43,.58) 0%,rgba(6,40,43,.22) 24%,transparent 50%,rgba(6,40,43,.05) 100%)}
.hero-art .halo{width:620px;height:620px;left:-5%;top:-80px;border-color:rgba(139,226,215,.13);z-index:4}
.hero-art .halo2{width:410px;height:410px;right:3%;bottom:-160px;border-color:rgba(139,226,215,.10);z-index:4}
.hero-meta{margin-top:27px}
.about-grid{grid-template-columns:1.08fr .92fr;gap:84px;align-items:center}
.about-copy h2{font-size:clamp(50px,5.2vw,72px);margin-top:12px}
.about-copy p{font-size:15px;line-height:1.72;max-width:620px}
.facts-icons{border-left:1px solid var(--line);grid-template-columns:1fr 1fr;column-gap:0;row-gap:0}
.facts-icons .fact{grid-template-columns:40px 1fr;gap:15px;min-height:120px;padding:8px 22px 24px;align-content:start}
.facts-icons .fact:nth-child(1),.facts-icons .fact:nth-child(2){padding-top:4px}
.facts-icons .fact:nth-child(odd){border-right:1px solid var(--line)}
.facts-icons .fact b{font-size:12px;margin-bottom:6px}
.facts-icons .fact strong{font-size:11px;line-height:1.55}
.fact-icon{width:32px;height:32px;transform:scale(1.08);transform-origin:left top}
@media(max-width:900px){
  .site-nav{height:68px}
  .hero{min-height:0}
  .hero-grid{grid-template-columns:1fr;min-height:0;padding-top:45px}
  .hero-copy{padding-top:0}
  .hero-art{position:relative;right:auto;top:auto;width:calc(100% + 44px);height:390px;margin-left:-22px;margin-top:-5px}
  .hero-photo{clip-path:none;border-radius:0}
  .hero-art:before{background:linear-gradient(180deg,#06282b 0%,rgba(6,40,43,.12) 28%,transparent 60%)}
  .about-grid{grid-template-columns:1fr;gap:50px}
  .facts-icons{border-left:0}
}
@media(max-width:600px){
  .hero-grid{padding-top:34px}
  .hero h1{font-size:64px}
  .hero h2{font-size:19px}
  .hero-art{height:285px}
  .hero-art .halo,.hero-art .halo2{display:none}
  .facts-icons{grid-template-columns:1fr 1fr}
  .facts-icons .fact{min-height:105px;grid-template-columns:30px 1fr;padding:12px 10px 17px}
  .fact-icon{transform:scale(.9)}
}

/* ===== Serag real app mockups ===== */
.serag-phone-scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:5;pointer-events:none}
.serag-phone{position:absolute;background:#101719;border:7px solid #101719;border-radius:32px;overflow:hidden;box-shadow:0 30px 55px rgba(0,0,0,.30),0 0 0 1px rgba(255,255,255,.12);aspect-ratio:393/852}
.serag-phone img{display:block;width:100%;height:100%;object-fit:cover}
.hero-phone-scene .phone-left{width:235px;left:10%;top:18%;transform:rotate(-9deg);opacity:.92;z-index:2}
.hero-phone-scene .phone-center{width:275px;left:37%;top:9%;transform:rotate(0deg);z-index:4}
.hero-phone-scene .phone-right{width:235px;right:3%;top:21%;transform:rotate(8deg);opacity:.9;z-index:2}
.hero-phone-scene:after{content:"";position:absolute;inset:12% 7% 5% 7%;background:radial-gradient(circle at 50% 45%,rgba(139,226,215,.20),transparent 52%);z-index:1;pointer-events:none}
.serag-goal-visual{position:relative;min-height:360px;overflow:hidden;background:linear-gradient(145deg,#e8f5e5,#cde5c8);display:flex;align-items:center;justify-content:center}
.goal-glow{position:absolute;width:330px;height:330px;border-radius:50%;background:rgba(255,255,255,.35);right:7%;top:10%;filter:blur(2px)}
.serag-goal-visual .goal-phone-main{position:absolute;width:190px;right:18%;top:12%;transform:rotate(4deg);z-index:3}
.serag-goal-visual .goal-phone-left{position:absolute;width:150px;left:20%;top:22%;transform:rotate(-9deg);z-index:2;opacity:.92}
.serag-shot{display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#dfeee0,#c6ddc7);padding:18px}
.serag-product-phone{height:100%;max-height:300px;aspect-ratio:393/852;background:#111718;border:5px solid #111718;border-radius:24px;overflow:hidden;box-shadow:0 15px 28px rgba(0,0,0,.22)}
.serag-product-phone img{object-fit:cover!important;border-radius:18px!important}
@media(max-width:900px){.hero-phone-scene .phone-left{width:190px;left:2%;top:20%}.hero-phone-scene .phone-center{width:225px;left:34%;top:9%}.hero-phone-scene .phone-right{width:190px;right:-2%;top:22%}.serag-goal-visual{min-height:320px}}
@media(max-width:600px){.hero-phone-scene .phone-left{width:145px;left:0;top:22%}.hero-phone-scene .phone-center{width:175px;left:29%;top:7%}.hero-phone-scene .phone-right{width:145px;right:-8%;top:23%}.serag-goal-visual{min-height:280px}.serag-goal-visual .goal-phone-main{width:145px;right:18%}.serag-goal-visual .goal-phone-left{width:115px;left:12%}.serag-product-phone{max-height:240px;border-width:4px;border-radius:20px}}

/* ===== Serag real app mockups ===== */
.serag-phone-scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:5;pointer-events:none}
.serag-phone{position:absolute;background:#101719;border:7px solid #101719;border-radius:32px;overflow:hidden;box-shadow:0 30px 55px rgba(0,0,0,.30),0 0 0 1px rgba(255,255,255,.12);aspect-ratio:393/852}
.serag-phone img{display:block;width:100%;height:100%;object-fit:cover}
.hero-phone-scene .phone-left{width:235px;left:10%;top:18%;transform:rotate(-9deg);opacity:.92;z-index:2}
.hero-phone-scene .phone-center{width:275px;left:37%;top:9%;transform:rotate(0deg);z-index:4}
.hero-phone-scene .phone-right{width:235px;right:3%;top:21%;transform:rotate(8deg);opacity:.9;z-index:2}
.hero-phone-scene:after{content:"";position:absolute;inset:12% 7% 5% 7%;background:radial-gradient(circle at 50% 45%,rgba(139,226,215,.20),transparent 52%);z-index:1;pointer-events:none}
.serag-goal-visual{position:relative;min-height:360px;overflow:hidden;background:linear-gradient(145deg,#e8f5e5,#cde5c8);display:flex;align-items:center;justify-content:center}
.goal-glow{position:absolute;width:330px;height:330px;border-radius:50%;background:rgba(255,255,255,.35);right:7%;top:10%;filter:blur(2px)}
.serag-goal-visual .goal-phone-main{position:absolute;width:190px;right:18%;top:12%;transform:rotate(4deg);z-index:3}
.serag-goal-visual .goal-phone-left{position:absolute;width:150px;left:20%;top:22%;transform:rotate(-9deg);z-index:2;opacity:.92}
.serag-shot{display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#dfeee0,#c6ddc7);padding:18px}
.serag-product-phone{height:100%;max-height:300px;aspect-ratio:393/852;background:#111718;border:5px solid #111718;border-radius:24px;overflow:hidden;box-shadow:0 15px 28px rgba(0,0,0,.22)}
.serag-product-phone img{object-fit:cover!important;border-radius:18px!important}
@media(max-width:900px){.hero-phone-scene .phone-left{width:190px;left:2%;top:20%}.hero-phone-scene .phone-center{width:225px;left:34%;top:9%}.hero-phone-scene .phone-right{width:190px;right:-2%;top:22%}.serag-goal-visual{min-height:320px}}
@media(max-width:600px){.hero-phone-scene .phone-left{width:145px;left:0;top:22%}.hero-phone-scene .phone-center{width:175px;left:29%;top:7%}.hero-phone-scene .phone-right{width:145px;right:-8%;top:23%}.serag-goal-visual{min-height:280px}.serag-goal-visual .goal-phone-main{width:145px;right:18%}.serag-goal-visual .goal-phone-left{width:115px;left:12%}.serag-product-phone{max-height:240px;border-width:4px;border-radius:20px}}

.serag-hero-composite{position:relative;width:100%;max-width:720px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 30px 45px rgba(0,0,0,.22));z-index:2}.serag-hero-composite img{display:block;width:112%;height:auto;object-fit:contain}.serag-hero-art{overflow:visible}.serag-hero-art .halo{z-index:0}.serag-hero-art .halo2{z-index:0}@media(max-width:900px){.serag-hero-composite img{width:100%}}

/* ===================================================================
   V8 — Projects index refresh
   ThemeForest-inspired information architecture, Manta visual language
   =================================================================== */

.manta-projects-v8 {
  background:
    radial-gradient(circle at 82% 7%, rgba(91, 203, 191, .08), transparent 27%),
    linear-gradient(180deg, #08272B 0%, #061D21 100%);
}

.manta-projects-v8 .projects-page-inner {
  width: min(1320px, calc(100% - 80px)) !important;
  max-width: none !important;
}

.projects-v8-hero {
  position: relative;
  overflow: hidden;
  padding: 116px 0 78px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.projects-v8-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 80px;
  align-items: end;
}

.projects-v8-eyebrow {
  display: inline-block;
  color: #69D8CD;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .20em;
}

.projects-v8-hero h1 {
  margin: 16px 0 18px;
  color: #F4F8F7;
  font-size: clamp(72px, 9vw, 136px);
  line-height: .86;
  letter-spacing: -.075em;
}

.projects-v8-lead {
  max-width: 640px;
  margin: 0;
  color: rgba(244,248,247,.54);
  font-size: 15px;
  line-height: 1.7;
}

.projects-v8-stats {
  display: flex;
  align-items: stretch;
  margin-bottom: 6px;
}

.projects-v8-stats > div {
  min-width: 126px;
  padding: 0 30px;
  border-left: 1px solid rgba(255,255,255,.12);
}

.projects-v8-stats > div:first-child {
  border-left: 0;
}

.projects-v8-stats strong {
  display: block;
  color: #F4F8F7;
  font-size: 31px;
  line-height: 1;
  letter-spacing: -.05em;
}

.projects-v8-stats > div:first-child strong,
.projects-v8-stats > div:last-child strong {
  color: #69D8CD;
}

.projects-v8-stats span {
  display: block;
  margin-top: 8px;
  color: rgba(244,248,247,.35);
  font-size: 9px;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.projects-v8-orbit {
  position: absolute;
  right: -70px;
  top: -250px;
  width: 680px;
  height: 680px;
  border: 1px dashed rgba(103,216,205,.10);
  border-radius: 50%;
  transform: rotate(-18deg);
  pointer-events: none;
}

.projects-v8-orbit span {
  position: absolute;
  inset: 80px;
  border: 1px dashed rgba(103,216,205,.07);
  border-radius: 50%;
}

.projects-v8-orbit span:nth-child(2) {
  inset: 170px;
}

.projects-v8-orbit i {
  position: absolute;
  left: 126px;
  bottom: 76px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #69D8CD;
  box-shadow: 0 0 0 9px rgba(105,216,205,.07);
}

.projects-v8-controls {
  position: sticky;
  top: 80px;
  z-index: 40;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(6,29,33,.90);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.projects-v8-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
}

.projects-v8-filters {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.projects-v8-filters::-webkit-scrollbar {
  display: none;
}

.projects-v8-filters button {
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  color: rgba(244,248,247,.47);
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .035em;
  cursor: pointer;
  transition: .22s ease;
}

.projects-v8-filters button:hover,
.projects-v8-filters button.is-active {
  border-color: #69D8CD;
  background: #69D8CD;
  color: #06272A;
}

.projects-v8-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.projects-v8-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(244,248,247,.36);
  font-size: 9px;
  white-space: nowrap;
}

.projects-v8-sort select {
  min-width: 94px;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  outline: 0;
  background: #0A2C30;
  color: rgba(244,248,247,.72);
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}

.projects-v8-view {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
}

.projects-v8-view button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(244,248,247,.36);
  font-size: 14px;
  cursor: pointer;
}

.projects-v8-view button.is-active {
  background: #69D8CD;
  color: #06272A;
}

.projects-v8-list {
  padding: 48px 0 126px;
}

.projects-v8-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 22px;
}

.projects-v8-card {
  min-width: 0;
  animation: projectsV8In .55s both;
  animation-delay: calc(var(--project-index) * 45ms);
}

@keyframes projectsV8In {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.projects-v8-card > a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.projects-v8-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.48 / 1;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 40%, rgba(73,204,191,.15), transparent 32%),
    #0A3034;
}

.projects-v8-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .65s cubic-bezier(.2,.75,.2,1), filter .35s ease;
}

.projects-v8-card:hover .projects-v8-media img {
  transform: scale(1.035);
}

.projects-v8-card-number {
  position: absolute;
  left: 14px;
  bottom: 13px;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  background: rgba(6,29,33,.62);
  backdrop-filter: blur(9px);
  color: rgba(255,255,255,.64);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
}

.projects-v8-arrow {
  position: absolute;
  right: 14px;
  top: 14px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(247,250,249,.95);
  color: #082B2E;
  font-size: 15px;
  transition: transform .22s ease, background .22s ease;
}

.projects-v8-card:hover .projects-v8-arrow {
  transform: translate(3px,-3px);
  background: #69D8CD;
}

.projects-v8-card-body {
  padding: 17px 2px 28px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.projects-v8-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.projects-v8-tags span {
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  color: rgba(244,248,247,.48);
  font-size: 8px;
  letter-spacing: .04em;
}

.projects-v8-card-content {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 18px;
  align-items: start;
}

.projects-v8-card-eyebrow {
  color: #5FCFC3;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.projects-v8-card h2 {
  margin: 7px 0 0;
  color: #F4F8F7;
  font-size: clamp(23px, 2.25vw, 34px);
  line-height: 1;
  letter-spacing: -.045em;
}

.projects-v8-card-content p {
  margin: 0;
  color: rgba(244,248,247,.45);
  font-size: 10.5px;
  line-height: 1.65;
}

.projects-v8-view-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 17px;
  color: rgba(244,248,247,.62);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  transition: color .2s ease;
}

.projects-v8-view-link b {
  color: #69D8CD;
  font-size: 14px;
  font-weight: 400;
  transition: transform .2s ease;
}

.projects-v8-card:hover .projects-v8-view-link {
  color: #F4F8F7;
}

.projects-v8-card:hover .projects-v8-view-link b {
  transform: translateX(3px);
}

.projects-v8-empty {
  grid-column: 1 / -1;
  padding: 90px 20px;
  border: 1px dashed rgba(255,255,255,.10);
  border-radius: 22px;
  text-align: center;
  color: rgba(244,248,247,.42);
}

/* Alternative list view */
.projects-v8-grid.is-list {
  grid-template-columns: 1fr;
  gap: 0;
}

.projects-v8-grid.is-list .projects-v8-card {
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.projects-v8-grid.is-list .projects-v8-card > a {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  padding: 20px 0;
}

.projects-v8-grid.is-list .projects-v8-media {
  aspect-ratio: 1.55 / 1;
  border-radius: 16px;
}

.projects-v8-grid.is-list .projects-v8-card-body {
  padding: 0;
  border: 0;
}

.projects-v8-grid.is-list .projects-v8-card-content {
  grid-template-columns: minmax(200px, .65fr) minmax(0, 1.35fr);
  gap: 36px;
}

.projects-v8-grid.is-list .projects-v8-card h2 {
  font-size: clamp(28px, 3vw, 44px);
}

.projects-v8-grid.is-list .projects-v8-view-link {
  margin-top: 16px;
}

.projects-v8-cta {
  border-top: 1px solid rgba(255,255,255,.07);
}

@media (max-width: 1080px) {
  .projects-v8-hero-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .projects-v8-stats {
    justify-content: flex-start;
  }

  .projects-v8-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .manta-projects-v8 .projects-page-inner {
    width: calc(100% - 40px) !important;
  }

  .projects-v8-controls {
    position: static;
  }

  .projects-v8-control-row {
    align-items: flex-start;
    flex-direction: column;
    padding: 14px 0;
  }

  .projects-v8-filters {
    width: 100%;
  }

  .projects-v8-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .projects-v8-grid.is-list .projects-v8-card > a {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .projects-v8-grid.is-list .projects-v8-card-content {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .manta-projects-v8 .projects-page-inner {
    width: calc(100% - 32px) !important;
  }

  .projects-v8-hero {
    padding: 82px 0 58px;
  }

  .projects-v8-hero h1 {
    font-size: clamp(62px, 20vw, 96px);
  }

  .projects-v8-stats {
    width: 100%;
  }

  .projects-v8-stats > div {
    flex: 1;
    min-width: 0;
    padding: 0 12px;
  }

  .projects-v8-stats strong {
    font-size: 25px;
  }

  .projects-v8-stats span {
    font-size: 8px;
  }

  .projects-v8-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .projects-v8-card-content,
  .projects-v8-grid.is-list .projects-v8-card-content {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .projects-v8-media {
    aspect-ratio: 1.32 / 1;
  }
}

/* ===================================================================
   V8.1 — Projects grid stability / final card layout
   Keep the Projects index isolated from legacy project-grid rules.
   =================================================================== */
.manta-projects-v8 .projects-v8-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 34px 24px !important;
  width: 100% !important;
  max-width: none !important;
  align-items: start !important;
}

.manta-projects-v8 .projects-v8-card {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  transform: none !important;
}

.manta-projects-v8 .projects-v8-card > a {
  width: 100% !important;
  display: block !important;
}

.manta-projects-v8 .projects-v8-media {
  width: 100% !important;
  aspect-ratio: 1.42 / 1 !important;
  min-height: 0 !important;
  height: auto !important;
}

.manta-projects-v8 .projects-v8-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.manta-projects-v8 .projects-v8-card-body {
  width: 100% !important;
  padding: 18px 2px 30px !important;
  box-sizing: border-box !important;
}

.manta-projects-v8 .projects-v8-card-content {
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
  gap: 20px !important;
  align-items: start !important;
}

.manta-projects-v8 .projects-v8-card h2 {
  font-size: clamp(26px, 2.5vw, 38px) !important;
  line-height: .98 !important;
  margin: 7px 0 0 !important;
}

.manta-projects-v8 .projects-v8-card-content p {
  max-width: 100% !important;
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.65 !important;
}

.manta-projects-v8 .projects-v8-tags {
  margin-bottom: 13px !important;
}

.manta-projects-v8 .projects-v8-view-link {
  margin-top: 18px !important;
}

/* A little more visual hierarchy on every third card */
@media (min-width: 1081px) {
  .manta-projects-v8 .projects-v8-card:nth-child(3n + 2) .projects-v8-media {
    aspect-ratio: 1.34 / 1 !important;
  }

  .manta-projects-v8 .projects-v8-card:nth-child(3n + 2) .projects-v8-card-body {
    padding-top: 20px !important;
  }
}

@media (max-width: 1080px) {
  .manta-projects-v8 .projects-v8-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  .manta-projects-v8 .projects-v8-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .manta-projects-v8 .projects-v8-card-content {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* List mode remains intentionally one-column. */
.manta-projects-v8 .projects-v8-grid.is-list {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

/* V8.2 — Refined card typography / cleaner editorial spacing */
.manta-projects-v8 .projects-v8-card-body {
  padding: 20px 2px 34px !important;
}

.manta-projects-v8 .projects-v8-tags {
  margin-bottom: 15px !important;
  gap: 8px !important;
}

.manta-projects-v8 .projects-v8-tags span {
  color: rgba(213, 228, 228, .62) !important;
  border-color: rgba(111, 176, 176, .20) !important;
  background: rgba(255, 255, 255, .015) !important;
}

.manta-projects-v8 .projects-v8-card-content {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
  gap: 30px !important;
}

.manta-projects-v8 .projects-v8-card-eyebrow {
  color: #61d4ce !important;
  letter-spacing: .11em !important;
  opacity: .9 !important;
}

.manta-projects-v8 .projects-v8-card h2 {
  color: #f2f6f5 !important;
  font-size: clamp(28px, 2.15vw, 34px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.025em !important;
  margin: 8px 0 0 !important;
  max-width: 10ch !important;
}

.manta-projects-v8 .projects-v8-card-content p {
  color: rgba(202, 218, 218, .66) !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
  max-width: 31ch !important;
  margin: 3px 0 0 !important;
}

.manta-projects-v8 .projects-v8-view-link {
  color: rgba(225, 239, 239, .72) !important;
  margin-top: 22px !important;
}

.manta-projects-v8 .projects-v8-view-link b {
  color: #61d4ce !important;
}

@media (max-width: 1080px) {
  .manta-projects-v8 .projects-v8-card-content {
    gap: 22px !important;
  }

  .manta-projects-v8 .projects-v8-card h2 {
    font-size: clamp(27px, 3vw, 32px) !important;
  }
}

@media (max-width: 700px) {
  .manta-projects-v8 .projects-v8-card-content {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .manta-projects-v8 .projects-v8-card h2,
  .manta-projects-v8 .projects-v8-card-content p {
    max-width: none !important;
  }
}