.hero-banner{--hero-accent:#8c6eb2;--hero-tint:#ece2f7;position:relative;margin-top:34px;margin-bottom:30px;padding:24px 30px 30px;border:1px solid #d0ddec;border-radius:28px;background:radial-gradient(ellipse at 92% 20%,var(--hero-tint),transparent 65%),linear-gradient(125deg,#ffffffd9,#f4f9ff99);box-shadow:inset 0 1px 0 white,0 18px 45px #425d810b;transition:background .4s}
.hero-banner[data-hero-theme="1"]{--hero-accent:#487eb5;--hero-tint:#deedfb}.hero-banner[data-hero-theme="2"]{--hero-accent:#488f81;--hero-tint:#dcefe9}
.hero-banner-top{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--muted);margin-bottom:18px;letter-spacing:.025em}
.hero-banner-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:5px;border:1px solid #d5e0ed;border-radius:16px;background:#ffffff55}
.hero-banner-tabs button{display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--muted);font:inherit;font-size:14px;line-height:1.4;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}
.hero-banner-tabs button>span{font-size:10px;color:var(--hero-accent)}
.hero-banner-tabs button[aria-selected=true]{background:linear-gradient(130deg,#ffffffe6,#ffffff80);border-color:#cad7e8;color:var(--ink);box-shadow:inset 0 1px 0 white,0 4px 12px #304f7210}
.hero-banner-tabs button:hover{color:var(--ink);background:#ffffff70}.hero-banner-tabs button:focus-visible{outline:2px solid var(--hero-accent);outline-offset:2px}
.hero-banner-panels{display:grid}
.hero-banner-panel{grid-area:1/1;display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center;padding:34px 8px 10px;min-width:0}
.hero-banner-panel[hidden]{display:grid!important;visibility:hidden;pointer-events:none}
.hero-banner-kicker{display:block;font-size:12px;line-height:1.5;color:var(--hero-accent);margin-bottom:16px}
.v1 .hero-banner-copy h1,.v1 .hero-banner-copy h2{font-size:clamp(30px,3.1vw,43px);font-weight:550;line-height:1.17;letter-spacing:-.04em;color:var(--ink);margin:0 0 20px;max-width:21ch;text-wrap:balance}
.hero-banner-copy>p{font-size:16px;line-height:1.7;color:var(--muted);max-width:51ch;margin:0 0 24px}
.hero-banner-copy .actions{gap:22px;flex-wrap:wrap;margin:0}
.hero-banner-art{position:relative;min-height:330px;display:flex;flex-direction:column;gap:22px;justify-content:center;padding:24px 0 42px;isolation:isolate;min-width:0}
.banner-art-orbit{position:absolute;z-index:-1;width:290px;height:290px;max-width:100%;border:1px solid #b8c9df66;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 26px #ffffff24,0 0 0 27px #c4d3e826}
.banner-art-line{position:absolute;left:50%;top:45px;bottom:65px;width:1px;background:linear-gradient(transparent,var(--hero-accent),transparent);opacity:.35}
.banner-art-card{position:relative;width:86%;display:flex;align-items:center;gap:14px;padding:17px 18px;border:1px solid #cbd8e9;border-radius:17px;background:linear-gradient(125deg,#ffffffe6,#ffffff66);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 white,0 10px 26px #435a7d0b;animation:hero-card-breathe 7s ease-in-out infinite}
.art-card-0{align-self:flex-start}.art-card-1{align-self:flex-end;animation-delay:-2s}.art-card-2{align-self:center;animation-delay:-4s}
.art-step{width:38px;height:38px;flex:none;display:grid;place-items:center;border:1px solid #c6d6e7;border-radius:12px;font-size:24px;color:var(--hero-accent);background:linear-gradient(135deg,white,var(--hero-tint));box-shadow:inset 0 1px 0 white}
.banner-art-card small{display:block;font-size:9px;color:var(--hero-accent);margin-bottom:4px}.banner-art-card strong{font-size:14px;line-height:1.4;font-weight:550;color:var(--ink)}
.banner-art-card i{width:5px;height:5px;flex:none;margin-left:auto;border-radius:50%;background:var(--hero-accent);opacity:.45}
.banner-art-caption{position:absolute;bottom:5px;left:0;right:0;text-align:center;font-size:11px;color:var(--muted)}
@keyframes hero-card-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(max-width:1000px){.hero-banner{padding:22px;margin-top:26px}.hero-banner-panel{gap:22px;grid-template-columns:1.1fr 1fr;padding-inline:0}.hero-banner-tabs button{font-size:12px;padding:12px 10px}.hero-banner-copy>p{font-size:14px}.banner-art-card{padding:14px 12px;gap:10px;width:94%}.banner-art-card strong{font-size:12px}.art-step{width:30px;height:30px;font-size:20px}.v1 .hero-banner-copy h1,.v1 .hero-banner-copy h2{font-size:32px}}
@media(max-width:700px){.hero-banner{padding:18px;margin-top:20px;border-radius:22px}.hero-banner-top{font-size:10px}.hero-banner-tabs{grid-template-columns:1fr;gap:3px;padding:4px}.hero-banner-tabs button{font-size:13px;padding:10px 12px}.hero-banner-panel{grid-template-columns:minmax(0,1fr);gap:12px;padding-top:24px}.v1 .hero-banner-copy h1,.v1 .hero-banner-copy h2{font-size:30px}.hero-banner-copy>p{font-size:15px}.hero-banner-kicker{font-size:11px}.hero-banner-art{min-height:300px;padding-top:16px;gap:16px}.banner-art-card{width:91%}.banner-art-card strong{font-size:13px}.hero-banner-copy .actions{gap:16px}.hero-banner-copy .button{padding:14px 18px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.banner-art-card{animation:none}.hero-banner,.hero-banner-tabs button{transition:none}}
/* Three full-width banners with explicit carousel navigation. */
.hero-banner{width:100%;max-width:none;min-height:calc(100svh - 112px);margin:0;padding:34px max(40px,calc((100% - 1240px)/2)) 24px;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;background:radial-gradient(ellipse at 82% 38%,#dcc9f590,transparent 57%),linear-gradient(120deg,#fcfdff,#f0ebf9);overflow:hidden}
.hero-banner[data-hero-theme="1"]{background:radial-gradient(ellipse at 82% 40%,#b8d8f780,transparent 58%),linear-gradient(120deg,#fcfdff,#e7f0fb)}
.hero-banner[data-hero-theme="2"]{background:radial-gradient(ellipse at 82% 40%,#b9ded380,transparent 58%),linear-gradient(120deg,#fcfdff,#e6f3ed)}
.hero-banner-panels{flex:1;align-content:center;width:100%}
.hero-banner-panel{padding:26px 0;grid-template-columns:1.15fr 1fr;gap:50px}
.hero-banner-kicker{display:inline-block;border-left:3px solid var(--hero-accent);padding-left:12px;font-size:13px;font-weight:550;margin-bottom:20px}
.v1 .hero-banner-copy h1,.v1 .hero-banner-copy h2{font-size:clamp(36px,4.1vw,58px);line-height:1.1;max-width:22ch;letter-spacing:-.045em;margin-bottom:24px;text-wrap:initial}
.hero-banner-copy em{font-style:normal;color:var(--hero-accent)}
.hero-banner-copy>p{font-size:17px;max-width:49ch;margin-bottom:28px}
.hero-banner-art{min-height:370px;padding:28px 0 40px;gap:25px}
.banner-art-card{padding:22px;width:90%}.banner-art-card strong{font-size:16px}.art-step{width:44px;height:44px}
#hero-panel-1 .banner-art-orbit{border-radius:38px;transform:translate(-50%,-50%) rotate(-12deg)}
#hero-panel-1 .art-card-0{width:75%;align-self:center}#hero-panel-1 .art-card-1{width:86%;align-self:center}#hero-panel-1 .art-card-2{width:100%;align-self:center}
#hero-panel-2 .banner-art-orbit{border-radius:40% 60% 60% 40%;transform:translate(-50%,-50%) rotate(25deg)}
#hero-panel-2 .art-card-0{align-self:flex-end}#hero-panel-2 .art-card-1{align-self:flex-start}#hero-panel-2 .art-card-2{align-self:flex-end}
.hero-slider-bottom{display:flex;align-items:center;gap:30px;border-top:1px solid #b9cbe16b;padding-top:20px;margin-top:20px}
.hero-slider-arrows{display:flex;align-items:center;gap:14px;flex:none}.hero-slider-arrows button{width:46px;height:46px;border:1px solid #bbcbdf;border-radius:50%;background:#ffffffb8;color:var(--ink);font:24px/1 inherit;cursor:pointer;box-shadow:inset 0 1px 0 white;transition:background .2s,transform .2s}
.hero-slider-arrows button:hover{background:white;transform:translateY(-2px)}.hero-slider-count{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.hero-banner-tabs{flex:1;border:0;border-radius:0;padding:0;gap:16px;background:none}
.hero-banner-tabs button{padding:14px 12px;border:0;border-top:3px solid #b9cbe17a;border-radius:0;font-size:13px;background:none;box-shadow:none}
.hero-banner-tabs button[aria-selected=true]{border:0;border-top:3px solid var(--hero-accent);border-radius:0;background:#ffffff66;box-shadow:none;color:var(--ink);font-weight:600}
.hero-banner-tabs button>span{font-size:11px}
.hero-slider-arrows button:focus-visible{outline:2px solid var(--hero-accent);outline-offset:3px}
@media(max-width:1000px){.hero-banner{padding:24px;min-height:calc(100svh - 145px)}.hero-banner-panel{gap:28px}.v1 .hero-banner-copy h1,.v1 .hero-banner-copy h2{font-size:39px}.hero-banner-copy>p{font-size:15px}.banner-art-card{padding:17px 14px}.banner-art-card strong{font-size:13px}.hero-slider-bottom{gap:18px}.hero-banner-tabs{gap:8px}.hero-banner-tabs button{font-size:12px;padding:12px 6px}}
@media(max-width:700px){.hero-banner{padding:24px 18px;min-height:calc(100svh - 82px)}.hero-banner-panel{grid-template-columns:minmax(0,1fr);gap:12px;padding:10px 0}.v1 .hero-banner-copy h1,.v1 .hero-banner-copy h2{font-size:35px}.hero-banner-copy>p{font-size:15px}.hero-banner-art{min-height:260px;gap:12px;padding:15px 0 30px}.banner-art-card{padding:12px 14px;width:85%}.art-step{width:30px;height:30px}.banner-art-card strong{font-size:13px}.banner-art-orbit{width:220px;height:220px}.hero-slider-bottom{flex-direction:column;align-items:stretch;gap:16px}.hero-slider-arrows{justify-content:space-between}.hero-banner-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.hero-banner-tabs button{display:block;font-size:11px;line-height:1.4;padding:10px 4px}.hero-banner-tabs button>span{display:block;margin-bottom:6px}.hero-banner-kicker{font-size:12px}}
@media(prefers-reduced-motion:reduce){.hero-slider-arrows button{transition:none}}
/* Hero background extends behind the floating glass header. */
.hero-banner{margin-top:calc(-1 * var(--hero-header-offset,110px));min-height:100svh;padding-top:calc(var(--hero-header-offset,110px) + 30px)}
@media(max-width:1000px){.hero-banner{min-height:100svh;padding-top:calc(var(--hero-header-offset,145px) + 24px)}}
@media(max-width:700px){.hero-banner{min-height:100svh;padding-top:calc(var(--hero-header-offset,82px) + 24px)}}
/* Primary contact actions share the site's translucent glass treatment. */
.v1 a.button[href="#contact"],.studio-header a.button.header-cta{color:var(--ink);border:1px solid #bacde5;background:linear-gradient(125deg,#ffffffe6 0%,#eef5ffb8 48%,#e4eaf8a8 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #ffffff80,0 5px 18px #42658a12;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}
.v1 .hero-banner a.button[href="#contact"]{border-color:color-mix(in srgb,var(--hero-accent) 35%,white);background:linear-gradient(125deg,#ffffffe8,#ffffff9e 45%,color-mix(in srgb,var(--hero-tint) 80%,transparent));color:var(--ink)}
.v1 a.button[href="#contact"]:hover,.studio-header a.button.header-cta:hover{background:linear-gradient(125deg,#fff,#edf4ffdf);border-color:#91afd1;box-shadow:inset 0 1px 0 #fff,0 8px 22px #42658a20;transform:translateY(-1px);color:var(--ink)}
.v1 a.button[href="#contact"]:focus-visible,.studio-header a.button.header-cta:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.v1 a.button[href="#contact"],.studio-header a.button.header-cta{transition:none}}
/* The idea banner uses the studio's blue palette. */
.hero-banner[data-hero-theme="0"]{--hero-accent:#487eb5;--hero-tint:#deedfb;background:radial-gradient(ellipse at 82% 38%,#b8d8f790,transparent 57%),linear-gradient(120deg,#fcfdff,#e7f0fb)}

/* Original Codevern mark, recolored to the studio glass palette. */
.studio-header .brand,
.footer .wordmark { color: #344560; }
.studio-header .brand .mark,
.footer .wordmark .logo {
  color: #344560;
  background: linear-gradient(135deg, #c7e8ff 0%, #e4d5fa 52%, #c3e9e0 100%);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.95), inset 0 -1px 2px rgba(84,112,156,.12), 0 4px 12px rgba(76,110,151,.12);
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

/* Compact carousel: content sets the height instead of the viewport. */
.hero-banner {
  min-height: 0;
  padding-top: calc(var(--hero-header-offset,110px) + 16px);
  padding-bottom: 20px;
}
.hero-banner-panel { padding-block: 18px; }
.hero-banner-art { min-height: 310px; padding-block: 16px 30px; gap: 18px; }
.hero-banner .banner-art-card { padding-block: 17px; }
.hero-slider-bottom { margin-top: 10px; padding-top: 14px; }
@media(max-width:1000px) {
  .hero-banner { padding-top: calc(var(--hero-header-offset,145px) + 14px); }
}
@media(max-width:700px) {
  .hero-banner { padding-top: calc(var(--hero-header-offset,82px) + 14px); padding-bottom: 16px; }
  .hero-banner-panel { padding-block: 8px; }
  .hero-banner-art { min-height: 240px; gap: 10px; padding-block: 12px 26px; }
  .hero-banner .banner-art-card { padding-block: 10px; }
}

/* Shorter banner, retaining the full-width background. */
.hero-banner { padding-top: calc(var(--hero-header-offset,110px) + 8px); padding-bottom: 12px; }
.hero-banner-panel { padding-block: 8px; }
.hero-banner-kicker { margin-bottom: 12px; }
.v1 .hero-banner-copy h1,.v1 .hero-banner-copy h2 { margin-bottom: 16px; }
.hero-banner-copy>p { margin-bottom: 18px; }
.hero-banner-art { min-height: 260px; gap: 12px; padding-block: 10px 24px; }
.hero-banner .banner-art-card { padding-block: 12px; }
.hero-banner .banner-art-orbit { width: 230px; height: 230px; }
.hero-slider-bottom { margin-top: 6px; padding-top: 10px; }
.hero-banner-tabs button { padding-block: 10px; }
@media(max-width:1000px) { .hero-banner { padding-top: calc(var(--hero-header-offset,145px) + 8px); } }
@media(max-width:700px) {
 .hero-banner { padding-top: calc(var(--hero-header-offset,82px) + 8px); }
 .hero-banner-panel { padding-block: 4px; }
 .hero-banner-art { min-height: 220px; gap: 8px; padding-block: 8px 22px; }
 .hero-banner .banner-art-card { padding-block: 8px; }
 .hero-banner .banner-art-orbit { width: 190px; height: 190px; }
}

/* Distinct palette for the second carousel slide. */
.hero-banner[data-hero-theme="1"] {
  --hero-accent: #8c6eb2;
  --hero-tint: #ece2f7;
  background: radial-gradient(ellipse at 82% 40%, #dcc9f590, transparent 58%), linear-gradient(120deg, #fcfdff, #f0ebf9);
}