:root{
  --bg:#F7FAFC;
  --bg2:#FFFDF8;

  --text:#0F172A;
  --muted: rgba(15,23,42,.68);

  --panel: rgba(255,255,255,.78);
  --panel2: rgba(255,255,255,.92);
  --stroke: rgba(15,23,42,.10);

  --shadow: 0 20px 60px rgba(15,23,42,.10);
  --shadow2: 0 10px 28px rgba(15,23,42,.08);

  --r:22px;
  --max:1200px;

  /* accents (keep your palette) */
  --a1:#9BB4C0;
  --a2:#E1D0B3;
  --a3:#A18D6D;
 /* --a4:#703B3B;*/
 --a4:#4B2A2A;

  /* spacing rhythm */
  --space-1: 10px;
  --space-2: 14px;
  --space-3: 18px;
  --space-4: 24px;
  --space-5: 34px;
  --space-6: 46px;
}

/* ===== Segoe UI Font ===== */

@font-face {
  font-family: 'SegoeUI';
  src: url('/assets/fonts/SegoeUI.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SegoeUI';
  src: url('/assets/fonts/SegoeUI-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SegoeUI';
  src: url('/assets/fonts/SegoeUI-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SegoeUI';
  src: url('/assets/fonts/SegoeUI-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
 /* font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue";*/
 font-family: "SegoeUI", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1000px 600px at 18% 12%, rgba(155,180,192,.22), transparent 60%),
    radial-gradient(900px 580px at 82% 16%, rgba(225,208,179,.22), transparent 60%),
    radial-gradient(900px 600px at 70% 92%, rgba(112,59,59,.10), transparent 65%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  background-attachment: fixed;
}

h1,h2,h3,h4{
  font-family: "SegoeUI", system-ui, sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
}

strong{
  font-weight:700;
}

a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}

.topbar{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(16px);
  background: rgba(247,250,252,.86);
  border-bottom: 1px solid var(--stroke);
}

.navwrap{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 0;
  gap: 16px;
}

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

.brand-logo{
  width:38px;
  height:38px;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(15,23,42,.10);
}

.brand-text{display:flex; flex-direction:column; line-height:1.05;}
.brand-name{font-weight:950; letter-spacing:-.2px; font-size:16px}
.brand-sub{font-size:12px; color:var(--muted); margin-top:2px}

.nav{
  display:flex;
  gap: 22px;
  align-items:center;
}

.nav a{
  color: rgba(15,23,42,.66);
  font-weight: 800;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 999px;
}

.nav a:hover{
  color: var(--text);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(15,23,42,.08);
}

.nav-cta{display:flex; gap:10px; align-items:center}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 16px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.64);
  color: var(--text);
  font-weight: 900;
  font-size: 14px;
  cursor:pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
  box-shadow: var(--shadow2);
}

.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(15,23,42,.16);
  box-shadow: var(--shadow);
}

.btn-primary{
  border-color: transparent;
  background: linear-gradient(135deg, var(--a4), var(--a1));
  color:#fff;
  box-shadow: 0 22px 60px rgba(112,59,59,.14);
}

.btn-ghost{background: rgba(255,255,255,.30)}

.pill{
  display:inline-flex; gap:8px; align-items:center;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(15,23,42,.10);
  color: rgba(15,23,42,.70);
  font-weight: 900;
  font-size: 13px;
}

.hero{padding: 64px 0 30px}

.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items:stretch;
}

.card{
  border: 1px solid var(--stroke);
  background: var(--panel);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.hero-card{padding: 30px}

.h1{
  font-size: 52px;
  line-height: 1.02;
  margin: 16px 0 12px;
  letter-spacing: -1px;
}

.sub{
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 20px;
}

.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top: 8px;}

.section{padding: 34px 0}
.section h2{
  margin: 0 0 10px;
  font-size: 28px;
  letter-spacing: -.4px;
}

.muted{color:var(--muted); line-height:1.55}

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

.feature{
  padding: 18px;
  border-radius: 20px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.70);
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.feature:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow);
}

.badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}

.badge{
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.80);
  border: 1px solid rgba(15,23,42,.12);
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.70);
}

.work-card{padding:16px; display:flex; flex-direction:column; gap:12px}

.work-card .thumb{
  height: 170px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 16px 45px rgba(15,23,42,.10);
  background-color: rgba(255,255,255,.70);
}

.work-title{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.work-title strong{font-size:16px}
.work-actions{display:flex; gap:10px; flex-wrap:wrap}

.cta{
  padding: 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
}

.cta strong{font-size:18px}
.cta .muted{margin-top:4px}

.footer{
  padding: 30px 0;
  border-top: 1px solid var(--stroke);
  background: rgba(255,255,255,.36);
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  gap: 16px;
}

.footer a{display:block; color:var(--muted); margin: 8px 0}
.footer a:hover{color:var(--text)}
.footer-title{font-weight:1000; margin-bottom:10px}
.footer-brand{font-weight:1000; margin-bottom:6px}
.footer-bottom{padding:14px 0 0}

.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  padding:10px 0;
  background: rgba(247,250,252,.92);
  border-top: 1px solid var(--stroke);
  backdrop-filter: blur(12px);
}

.consent-inner{display:flex; justify-content:space-between; align-items:center; gap:12px}
.hidden{display:none !important}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .nav{display:none}
  .h1{font-size: 40px}
  .footer-grid{grid-template-columns:1fr}
}






/* ===== HERO RIGHT: fill space with mini portfolio ===== */
.kpis-compact{
  padding: 0 16px 16px !important;
  grid-template-columns: 1fr 1fr 1fr;
}

.showcase-bottom{
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.55);
}

.showcase-bottom-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom: 12px;
}

.mini-work{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}

.mini-work-card{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.mini-work-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.88);
  box-shadow: 0 18px 55px rgba(15,23,42,.10);
}

.mini-thumb{
  width: 86px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background:
    linear-gradient(135deg, rgba(155,180,192,.22), rgba(112,59,59,.12)),
    rgba(255,255,255,.75);
  background-size: cover;
  background-position: center;
  flex: 0 0 auto;
}

.mini-title{
  font-weight: 950;
  font-size: 13px;
  line-height: 1.2;
  margin-bottom: 2px;
}

.showcase-cta{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(15,23,42,.14);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

@media (max-width: 980px){
  .kpis-compact{grid-template-columns:1fr}
}

/* ===== Glossy Liquid Section ===== */
.liquid-wrap{
  padding-top: 10px;
}

.liquid-card{
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--r) + 6px);
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.55);
  box-shadow: 0 22px 70px rgba(15,23,42,.14);
}

.liquid-bg{
  position:absolute;
  inset:-2px;
  overflow:hidden;
  pointer-events:none;
}

.liquid-content{
  position:relative;
  z-index:2;
  padding: 24px;
}

.liquid-row{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.liquid-stat{
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.62);
  box-shadow: 0 10px 30px rgba(15,23,42,.08);
}

.liquid-stat strong{display:block; font-size: 16px; font-weight: 950;}
.liquid-stat .muted{display:block; margin-top: 4px; font-size: 13px;}

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

/* Core liquid blobs */
.liquid-blob{
  position:absolute;
  width: 520px;
  height: 520px;
  border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
  filter: blur(18px) saturate(1.25);
  opacity: .72;
  mix-blend-mode: multiply;
  animation: liquidFloat 14s ease-in-out infinite;
}

/* tune to Theme D palette */
.liquid-blob.lb1{
  left: -140px;
  top: -190px;
  background:
    radial-gradient(circle at 30% 30%, rgba(155,180,192,.95), transparent 62%),
    radial-gradient(circle at 70% 70%, rgba(112,59,59,.70), transparent 62%),
    radial-gradient(circle at 50% 60%, rgba(255,255,255,.45), transparent 55%);
  animation-duration: 16s;
}

.liquid-blob.lb2{
  right: -160px;
  top: -120px;
  background:
    radial-gradient(circle at 35% 30%, rgba(225,208,179,.95), transparent 60%),
    radial-gradient(circle at 75% 65%, rgba(155,180,192,.85), transparent 62%),
    radial-gradient(circle at 45% 70%, rgba(255,255,255,.40), transparent 55%);
  opacity: .66;
  animation-duration: 18s;
  animation-direction: alternate;
}

.liquid-blob.lb3{
  left: 18%;
  bottom: -260px;
  background:
    radial-gradient(circle at 35% 25%, rgba(112,59,59,.55), transparent 62%),
    radial-gradient(circle at 70% 65%, rgba(225,208,179,.65), transparent 62%),
    radial-gradient(circle at 40% 80%, rgba(155,180,192,.70), transparent 60%);
  opacity: .62;
  animation-duration: 20s;
}

/* Motion */
@keyframes liquidFloat{
  0%   { transform: translate(0,0) scale(1.00); border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%; }
  25%  { transform: translate(60px,30px) scale(1.05); border-radius: 45% 55% 45% 55% / 55% 45% 55% 45%; }
  50%  { transform: translate(20px,70px) scale(1.02); border-radius: 58% 42% 52% 48% / 40% 60% 45% 55%; }
  75%  { transform: translate(-35px,40px) scale(1.06); border-radius: 42% 58% 62% 38% / 55% 45% 55% 45%; }
  100% { transform: translate(0,0) scale(1.00); border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%; }
}

/* Glossy “sheen” pass */
.liquid-sheen{
  position:absolute;
  inset:-40px;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.55) 0%,
      rgba(255,255,255,.20) 20%,
      rgba(255,255,255,.06) 45%,
      rgba(255,255,255,.22) 60%,
      rgba(255,255,255,.08) 100%);
  transform: rotate(-10deg);
  opacity: .85;
  mix-blend-mode: screen;
  filter: blur(0px);
  animation: sheenSweep 9s ease-in-out infinite;
}

@keyframes sheenSweep{
  0%   { transform: translateX(-6%) rotate(-10deg); opacity:.72; }
  50%  { transform: translateX(6%)  rotate(-10deg); opacity:.88; }
  100% { transform: translateX(-6%) rotate(-10deg); opacity:.72; }
}

/* Glass edge + vignette for “expensive” depth */
.liquid-card::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(800px 260px at 20% 0%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(820px 260px at 80% 0%, rgba(255,255,255,.42), transparent 62%),
    radial-gradient(900px 380px at 50% 110%, rgba(15,23,42,.10), transparent 60%);
  opacity: .90;
  z-index:1;
}

/* Tiny grain to avoid “flat gradient” look */
.liquid-grain{
  position:absolute;
  inset:0;
  opacity:.12;
  background-image:
    repeating-linear-gradient(0deg, rgba(15,23,42,.06), rgba(15,23,42,.06) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(15,23,42,.04), rgba(15,23,42,.04) 1px, transparent 1px, transparent 4px);
  mix-blend-mode: overlay;
}

.morph-stage{
  height: clamp(240px, 28vw, 340px);
}

.hero{ padding: 74px 0 36px; }
.section{ padding: 44px 0; } 

.card{ border: 1px solid rgba(15,23,42,.09); }
/* ===== PERF SAFETY ===== */

/* 1) Don’t force fixed background on mobile (expensive repaint) */
@media (max-width: 980px){
  body{ background-attachment: scroll; }
}

/* 2) Reduce motion support */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .morph-blob, .tag-chip, .liquid-blob, .liquid-sheen{ animation: none !important; }
}

/* 3) If blend-mode looks heavy on some browsers, tone it down */
@supports not (mix-blend-mode: screen){
  .liquid-sheen{ mix-blend-mode: normal; opacity: .55; }
}






/* Center the CTA row too */
.liquid-cta{
  justify-content:center;
}

.liquid-title{
  margin: 0;
  font-size: clamp(34px, 3.4vw, 54px);
  line-height: 1.02;
  letter-spacing: -1px;
  font-weight: 980;
  max-width: 22ch;
}


/* CTA neat */
.liquid-cta{ margin-top: 6px; }

/* ===== Orb: slow liquid drift + gentle bob (like right panel) ===== */
.liquid-orb{
  position:absolute;

  /* Bigger + more present */
  width: 160px;
  height: 160px;

  /* Start position */
  left: 12%;
  top: 28%;

  border-radius: 56% 44% 55% 45% / 48% 52% 48% 52%;

  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.95), rgba(255,255,255,.25) 28%, rgba(255,255,255,0) 58%),
    radial-gradient(circle at 65% 70%, rgba(225,208,179,.55), rgba(155,180,192,.30) 52%, rgba(112,59,59,.18) 78%),
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,0));

  box-shadow:
    0 30px 90px rgba(15,23,42,.18),
    inset 0 2px 14px rgba(255,255,255,.55),
    inset 0 -18px 30px rgba(15,23,42,.10);

  opacity: .78;

  /* Liquid feel: slow drift + shape morph */
  animation: orbDrift 14s ease-in-out infinite, orbMorph 10s ease-in-out infinite;
  will-change: transform, border-radius;
  filter: blur(.2px);
}

/* Optional: make it feel “behind glass” */
.liquid-orb{
  mix-blend-mode: multiply;
}

/* Slow travel path (no fast “ball bounce”) */
@keyframes orbDrift{
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  25%  { transform: translate(140px, 26px) rotate(8deg) scale(1.03); }
  50%  { transform: translate(280px, -10px) rotate(-6deg) scale(1.01); }
  75%  { transform: translate(160px, 34px) rotate(10deg) scale(1.04); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

/* Subtle liquid morphing like the right panel blobs */
@keyframes orbMorph{
  0%   { border-radius: 56% 44% 55% 45% / 48% 52% 48% 52%; }
  25%  { border-radius: 46% 54% 44% 56% / 52% 44% 56% 48%; }
  50%  { border-radius: 58% 42% 50% 50% / 40% 60% 45% 55%; }
  75%  { border-radius: 44% 56% 60% 40% / 55% 45% 55% 45%; }
  100% { border-radius: 56% 44% 55% 45% / 48% 52% 48% 52%; }
}

/* Mobile: keep orb slower + less travel */
@media (max-width: 980px){
  .liquid-orb{
    width: 140px; height: 140px;
    opacity: .70;
    animation-duration: 18s, 12s;
  }
}

/* NEW: caustics / shimmer “top effect” */
.liquid-caustics{
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(120px 70px at 20% 30%, rgba(255,255,255,.30), transparent 60%),
    radial-gradient(160px 90px at 60% 40%, rgba(255,255,255,.22), transparent 62%),
    radial-gradient(200px 110px at 78% 65%, rgba(255,255,255,.18), transparent 65%),
    linear-gradient(120deg, rgba(255,255,255,.08), rgba(255,255,255,0), rgba(255,255,255,.10));
  mix-blend-mode: screen;
  opacity: .70;
  filter: blur(1px);
  animation: causticsMove 7.5s ease-in-out infinite;
  pointer-events:none;
}

@keyframes causticsMove{
  0%   { transform: translateX(-3%) translateY(0) rotate(-2deg); opacity:.62; }
  50%  { transform: translateX(3%) translateY(-2%) rotate(2deg); opacity:.80; }
  100% { transform: translateX(-3%) translateY(0) rotate(-2deg); opacity:.62; }
}

/* Extra rim highlight (makes it feel “glassy”) */
.liquid-rim{
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 45%),
    radial-gradient(900px 320px at 50% 0%, rgba(255,255,255,.38), transparent 60%),
    radial-gradient(900px 380px at 50% 120%, rgba(15,23,42,.12), transparent 62%);
  opacity: .85;
} 


 /* ===== Typed line ===== */
.typed-line{
  margin-top: 6px;
  font-weight: 950;
  font-size: 16px;
  letter-spacing: -.2px;
  color: rgba(15,23,42,.88);
  display:flex;
  align-items:center;
  gap: 2px;
}


.typed-caret{
  width: 10px;
  height: 18px;
  margin-left: 2px;
  border-radius: 2px;
  background: rgba(112,59,59,.65);
  animation: caretBlink 1s steps(2,end) infinite;
}

@keyframes caretBlink{
  0%, 49%{ opacity: 1; }
  50%, 100%{ opacity: 0; }
}

 /* ===== HERO RIGHT PANEL (restore styling) ===== */
.hero-showcase{
  position: relative;
  padding: 18px;
  overflow: hidden;
}

.hero-showcase::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg,
    rgba(112,59,59,.22),
    rgba(155,180,192,.18),
    rgba(225,208,179,.22)
  );
  filter: blur(18px);
  opacity: .85;
  pointer-events:none;
}

.showcase-inner{
  position: relative;
  z-index: 1;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.62);
  box-shadow: 0 18px 55px rgba(15,23,42,.10);
  overflow: hidden;
}

.morph-stage{
  position: relative;
  background:
    radial-gradient(520px 320px at 20% 25%, rgba(155,180,192,.35), transparent 60%),
    radial-gradient(520px 320px at 78% 35%, rgba(225,208,179,.38), transparent 60%),
    radial-gradient(520px 320px at 58% 86%, rgba(112,59,59,.16), transparent 65%),
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.50));
  overflow:hidden;
}

.morph-blob{
  position:absolute;
  width: 320px;
  height: 320px;
  left: -70px;
  top: -90px;
  background: linear-gradient(135deg, rgba(112,59,59,.45), rgba(155,180,192,.45));
  opacity: .55;
  border-radius: 56% 44% 55% 45% / 48% 52% 48% 52%;
  animation: blobMorph 9s ease-in-out infinite;
}

.morph-blob.blob2{
  width: 340px;
  height: 340px;
  left: auto;
  right: -100px;
  top: 10px;
  background: linear-gradient(135deg, rgba(225,208,179,.55), rgba(155,180,192,.40));
  opacity: .50;
  animation-duration: 11s;
  animation-direction: alternate;
}

@keyframes blobMorph{
  0%   { transform: translate(0,0) scale(1); }
  25%  { transform: translate(35px,25px) scale(1.03); }
  50%  { transform: translate(14px,52px) scale(1.01); }
  75%  { transform: translate(-20px,34px) scale(1.04); }
  100% { transform: translate(0,0) scale(1); }
}

.showcase-ui{
  position:absolute;
  inset:0;
  padding: 16px;
  display:grid;
  align-content: end;
  gap: 10px;
}

.floating-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.tag-chip{
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
  box-shadow: 0 12px 30px rgba(15,23,42,.08);
}

.liquid-sheen{
  opacity: .92;
  filter: blur(.2px);
  animation-duration: 12s;
}

.liquid-caustics{
  opacity: .55;
  animation-duration: 11s;
}

.liquid-title{
  margin: 0;
  font-family: "Seogui", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-weight: 980;
  font-size: clamp(44px, 4.2vw, 72px);  /* bigger */
  line-height: 1.02;
  letter-spacing: -1.2px;
  max-width: 20ch;
}

.typed-caret{
  height: 1.05em;
}

/* ===== Glossy Liquid “Systems” Section ===== */
.liquid-section{
  position:relative;
  overflow:hidden;
  border-radius: calc(var(--r) + 10px);
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.50);
  box-shadow: 0 26px 85px rgba(15,23,42,.14);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.liquid-section .liquid-bg{
  position:absolute;
  inset:-2px;
  pointer-events:none;
  overflow:hidden;
  filter: saturate(1.15) contrast(1.04);
}

.liquid-section-inner{
  position:relative;
  z-index:2;
  padding: 34px;
}

.liquid-head{
  max-width: 78ch;
}

.liquid-h2{
  margin: 10px 0 8px;
  font-size: clamp(30px, 3.2vw, 44px);
  letter-spacing: -1px;
  line-height: 1.05;
  font-weight: 980;
}

.liquid-sub{
  margin: 0;
  font-size: 16px;
}

.liquid-split{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items:stretch;
}

.glass-card{
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.62);
  box-shadow: 0 18px 55px rgba(15,23,42,.10);
  padding: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.glass-title{
  font-weight: 980;
  letter-spacing: -.4px;
  margin-bottom: 8px;
}

.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* Feature grid */
.liquid-feature-grid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.liquid-feature{
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.58);
  box-shadow: 0 14px 40px rgba(15,23,42,.08);
}

.liquid-feature strong{
  display:block;
  font-weight: 980;
  margin-bottom: 4px;
}

.liquid-feature span{
  display:block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

/* CTA row */
.liquid-cta-row{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed rgba(15,23,42,.14);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  flex-wrap:wrap;
}

.liquid-cta-actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

/* Responsive */
@media (max-width: 980px){
  .liquid-section-inner{ padding: 22px; }
  .liquid-split{ grid-template-columns: 1fr; }
  .liquid-feature-grid{ grid-template-columns: 1fr; }
}



/* ===== HERO IMAGE INFUSION (inside liquid hero) ===== */
.liquid-hero{ position: relative; }

.liquid-hero .liquid-bg{ position:absolute; inset:-2px; overflow:hidden; }

/* Bigger hero image infusion */
/* ===== Bigger hero lady ===== */
.liquid-hero-figure{
  position:absolute;
  right: clamp(-10px, 1.5vw, 18px);
  bottom: -10px;
  width: clamp(440px, 46vw, 920px); /* BIGGER */
  z-index: 1;
  pointer-events:none;
  opacity: 1;
  filter: drop-shadow(0 28px 70px rgba(15,23,42,.18));
  animation: none; /* match mockup (stable) */
}

.liquid-hero-figure img{
  width:100%;
  height:auto;
  display:block;

  /* remove heavy blending */
  mix-blend-mode: normal;
  opacity: 1;

  /* gentle edge fade so it “sits” in wave */
  -webkit-mask-image: radial-gradient(circle at 65% 48%, #000 68%, transparent 88%);
  mask-image: radial-gradient(circle at 65% 48%, #000 68%, transparent 88%);
}

@media (max-width: 980px){
  .liquid-hero-figure{
    width: 360px;
    right: -18px;
    opacity: .95;
  }
}



/* ensure hero text stays on top */
.liquid-hero .liquid-content{ position: relative; z-index: 2; }



.liquid-hero-figure{
  animation: heroFloat 6.5s ease-in-out infinite;
  will-change: transform;
}
@keyframes heroFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}


/* ===== Contact Page (premium layout) ===== */
.contact-page .grid-2{
  align-items: start;
  gap: 18px;
}

/* wrap the form card */
.contact-card{
  padding: 22px;
}

/* form spacing */
.contact-form .form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.contact-form .form-group{
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.contact-form label{
  font-weight: 900;
  font-size: 13px;
  color: rgba(15,23,42,.78);
}

.input{
  width:100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}

.input:focus{
  border-color: rgba(112,59,59,.28);
  box-shadow: 0 18px 50px rgba(112,59,59,.10);
  background: rgba(255,255,255,.92);
}

textarea.input{ resize: vertical; min-height: 130px; }

/* honeypot hidden */
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
}

/* right side column */
.contact-side{
  position: sticky;
  top: 96px; /* keeps it visible under the sticky header */
  align-self: start;
}

.contact-side .card{
  padding: 18px;
}

.contact-side h3{
  margin: 0 0 8px;
}

/* nice list style */
.contact-list{
  margin-top: 10px;
  display:grid;
  gap: 10px;
}

.contact-list .row{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.62);
}

.contact-list .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  margin-top: 6px;
  background: linear-gradient(135deg, var(--a4), var(--a1));
  flex: 0 0 auto;
}

.contact-actions{
  display:grid;
  gap: 10px;
  margin-top: 12px;
}

/* responsive */
@media (max-width: 980px){
  .contact-form .form-row{ grid-template-columns: 1fr; }
  .contact-side{ position: static; top: auto; }
}


/* ===== Paper wave background behind Services ===== */

#services{
  position: relative;
  overflow: visible;
}



/* keep content above background */
#services .container{
  position:relative;
  z-index:1;
}







/* ===== HERO: simplify (remove glossy/liquid overlays) ===== */
.liquid-hero{
  background: transparent;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 22px 70px rgba(15,23,42,.10);
}

/* hide the liquid layers in hero only */
.liquid-hero .liquid-blob,
.liquid-hero .liquid-orb,
.liquid-hero .liquid-caustics,
.liquid-hero .liquid-sheen,
.liquid-hero .liquid-grain,
.liquid-hero .liquid-rim{
  display:none !important;
}

/* soften hero panel so wave shows through nicely */
.liquid-hero{
  background: rgba(255,255,255,.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}


/* ===== SERVICES: remove outer glass backing ===== */
.liquid-section{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* also remove its internal liquid bg effects */
.liquid-section .liquid-bg{
  display:none !important;
}

/* keep padding nice */
.liquid-section-inner{
  padding: 10px 0 !important;
}



.liquid-title{
  font-size: clamp(38px, 3.6vw, 62px);
}





/* ===== Headline should not wrap into awkward breaks ===== */
.liquid-title{
  max-width: 100%;
  white-space: nowrap;          /* key */
  display: inline-flex;         /* key */
  align-items: center;
  justify-content: center;
  gap: 10px;
}


/* caret color uses your darker brown */
.typed-caret{
  background: rgba(75,42,42,.75);
}

/* ===== HERO LADY: bigger, right-anchored, clean edges ===== */
.liquid-hero-figure{
  position:absolute;
  right: 0;
  bottom: -22px;
  width: clamp(520px, 52vw, 980px);
  z-index: 1;
  pointer-events:none;
  opacity: 1;
  filter: drop-shadow(0 26px 60px rgba(15,23,42,.16));
}

/* remove aggressive masking that causes “cropping weirdness” */
.liquid-hero-figure img{
  width:100%;
  height:auto;
  display:block;
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
}

/* on smaller screens, keep her present but not overpowering */
@media (max-width: 980px){
  .liquid-title{ white-space: normal; } /* allow wrap on mobile */
  .liquid-hero-figure{
    width: 380px;
    right: -18px;
    bottom: -10px;
    opacity: .96;
  }
}

/* ===== SERVICES: no outer backing, just content on wave ===== */
#services .liquid-section{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* remove internal liquid bg shapes */
#services .liquid-section .liquid-bg{
  display:none !important;
}

/* tighten top spacing so it feels like one continuous wave */
#services{
  margin-top: -10px;
}

/* cards should feel slightly “lifted” */
#services .glass-card,
#services .liquid-feature{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 55px rgba(15,23,42,.10);
}

#work{
  position: relative;
  background: linear-gradient(180deg, rgba(247,250,252,.92), rgba(255,253,248,.92));
} 



/* ================================
   FINAL OVERRIDES — KEEP AT BOTTOM
   (prevents duplicate-rule fights)
================================== */

/* 1) Overall spacing: less “airy” */
.navwrap{ padding: 12px 0; }
.section{ padding: 26px 0; }                 /* was 34/44 in multiple places */
.liquid-section-inner{ padding: 22px 0 !important; } /* was 10 then 34 etc */

/* 2) Wave: compact + controlled scaling (NOT cover) */
.wave-wrap{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: 54px;   /* reduce whitespace */
}

.wave-wrap::before{
  content:"";
  position:absolute;
  left:-6%;
  right:-6%;
  top:-160px;
  height: 640px;          /* FIXED wave canvas = “mockup” look */
  background-image: url("/assets/img/bg/services-wave.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: clamp(1100px, 92vw, 1500px) auto; /* compact control */
  opacity: .92;
  filter: saturate(1.06) contrast(1.05);
  pointer-events:none;
  z-index:0;
}

/* fade top nicely */
.wave-wrap::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(247,250,252,1), rgba(247,250,252,0));
  pointer-events:none;
  z-index:0;
}

.wave-wrap > section{
  position: relative;
  z-index: 1;
}

/* 3) Hero panel: match mock proportions + less card feel */
.liquid-card.liquid-hero{
  border-radius: 34px;
  border: 1px solid rgba(15,23,42,.07);
  background: rgba(255,255,255,.22);
  box-shadow: 0 22px 60px rgba(15,23,42,.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}

/* turn off liquid layers in hero (keep only figure) */
.liquid-hero .liquid-bg > :not(.liquid-hero-figure){
  display:none !important;
}

/* 4) Hero layout: tighter + reserve space for lady */
.liquid-hero-content{
  min-height: 240px;                 /* was 290 -> too tall */
  padding: 46px 34px;
  padding-right: clamp(260px, 38%, 520px); /* reserves space for figure */
  gap: 14px;
}

/* headline sizing: not oversized */
.liquid-title{
  font-size: clamp(34px, 3.1vw, 54px);
  line-height: 1.02;
  white-space: nowrap;
  display: inline-flex;
  gap: 10px;
}

/* typed pill */
.typed-dynamic{
  min-width: 200px;
  padding: 7px 14px 9px;
  text-align: center;
}
/* Typed word styling */
.typed-dynamic{
  font-weight: 980;
  transition: color .25s ease, text-shadow .25s ease;
  text-shadow: 0 10px 28px rgba(15,23,42,.10);
}
/* 5) Lady: bigger + consistent (single definition) */
.liquid-hero-figure{
  position:absolute;
  right: 12px;
  top: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: 60%;              /* bigger than your 52% */
  display:flex;
  align-items:flex-end;
  pointer-events:none;
  filter: drop-shadow(0 24px 55px rgba(15,23,42,.14));
  opacity: 1;
}

.liquid-hero-figure img{
  height: 100%;
  width: auto;
  display:block;
  object-fit: contain;
  object-position: right bottom;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* 6) Services section: keep it clean + compact */
#services{ margin-top: -8px; }
#services .liquid-section{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
#services .liquid-section .liquid-bg{ display:none !important; }

/* 7) Mobile adjustments */
@media (max-width: 980px){
  .liquid-title{ white-space: normal; }
  .liquid-hero-content{
    padding: 34px 18px;
    padding-right: 18px;
    min-height: 220px;
  }
  .liquid-hero-figure{
    max-width: 78%;
    right: -8px;
    opacity: .95;
  }
  .wave-wrap::before{
    height: 520px;
    background-size: 110% auto;
  }
}



/* ===== HERO CENTER FIX (paste at very bottom) ===== */

/* Make hero content truly centered */
.liquid-hero-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* remove the "push-left" reserve */
  padding-right: 34px !important;

  /* give the text a nice centered column like the mockup */
  max-width: 820px;
  margin: 0 auto;
}

/* Ensure the headline line centers as a unit */
.liquid-title{
  justify-content: center;
  width: 100%;
}

/* Center the CTA row too */
.liquid-cta,
.hero-actions,
.liquid-cta-actions{
  justify-content: center !important;
}

/* ===== HERO LADY BIGGER (paste at very bottom) ===== */
.liquid-hero-figure{
  max-width: 100% !important;     /* bigger */
  right: -1px !important;       /* push to edge */
  transform: scale(1.06);        /* subtle boost without breaking layout */
  transform-origin: right bottom;
}

/* =========================================
   HERO CENTER + GLOBAL LADY OVERLAY
   (paste at VERY bottom)
========================================= */

/* Make wave-wrap the positioning context */
.wave-wrap{
  position: relative;
  isolation: isolate;
}

/* Ensure hero content is truly centered */
.liquid-hero-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-right: 34px !important;  /* kill the reserve-space hacks */
}

/* Keep headline centered as a unit */
.liquid-title{
  width: 100%;
  justify-content: center;
}

/* Center CTA row */
.liquid-cta,
.hero-actions{
  justify-content:center !important;
}

/* ---- NEW global overlay lady ---- */
.wave-figure{
  position:absolute;
  right: -10px;              /* push to edge */
  top: 86px;                 /* below sticky nav; adjust slightly if needed */
  width: clamp(520px, 52vw, 980px);  /* BIG */
  z-index: 3;                /* above hero bg */
  pointer-events:none;
  filter: drop-shadow(0 24px 55px rgba(15,23,42,.14));
}

/* Keep image clean */
.wave-figure img{
  width:100%;
  height:auto;
  display:block;
}

/* Prevent her from covering the hero text too much:
   give the hero a little right breathing room */
.liquid-card.liquid-hero{
  padding-right: clamp(120px, 12vw, 240px);
}

/* Mobile: reduce size and reposition */
@media (max-width: 980px){
  .wave-figure{
    width: 380px;
    right: -18px;
    top: 120px;
    opacity: .95;
  }
  .liquid-card.liquid-hero{
    padding-right: 18px; /* don’t squeeze mobile */
  }
}

/* ===== Wave edge softening (bottom of CSS) ===== */
.wave-wrap::before{
  /* keep your existing settings... */

  /* Soft fade on left/right + bottom so edges are not obvious */
  -webkit-mask-image: radial-gradient(120% 95% at 50% 35%,
      rgba(0,0,0,1) 58%,
      rgba(0,0,0,.95) 66%,
      rgba(0,0,0,.70) 78%,
      rgba(0,0,0,.25) 90%,
      rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(120% 95% at 50% 35%,
      rgba(0,0,0,1) 58%,
      rgba(0,0,0,.95) 66%,
      rgba(0,0,0,.70) 78%,
      rgba(0,0,0,.25) 90%,
      rgba(0,0,0,0) 100%);
}

/* ===== Lady overlay: larger + closer ===== */
.wave-figure{
  right: 1px;                  /* move her in tighter */
  top: 64px;                     /* lift slightly */
  width: clamp(820px, 98vw, 1520px); /* bigger */
  z-index: 5;
}

.liquid-card.liquid-hero{
  /* reduce the reserved breathing room so she can come closer */
  padding-right: clamp(90px, 9vw, 180px) !important;
}

/* Desktop: keep as one line */
.liquid-title{
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap: 12px;
  text-align:center;
}

/* Mobile: force 2-line headline */
@media (max-width: 980px){
  .liquid-title{
    flex-direction: column;
    align-items: center;
    gap: 8px;
    white-space: normal; /* allow wrap */
  }
  .title-line1{ font-size: clamp(26px, 6vw, 34px); font-weight: 980; }
  .title-line2{ font-size: clamp(28px, 7vw, 38px); font-weight: 980; }
}

/* ===== Bouncing bubble capabilities ===== */
.bubble-cloud{
  margin-top: 16px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  justify-content:center;
}

.bubble{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 13px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.68);
  box-shadow: 0 18px 55px rgba(15,23,42,.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: bubbleFloat 5.6s ease-in-out infinite;
  will-change: transform;
}

.b1{ animation-duration: 5.4s; }
.b2{ animation-duration: 6.2s; }
.b3{ animation-duration: 5.8s; }
.b4{ animation-duration: 6.6s; }
.b5{ animation-duration: 5.9s; }
.b6{ animation-duration: 6.4s; }
.b7{ animation-duration: 5.7s; }
.b8{ animation-duration: 6.0s; }
.b9{ animation-duration: 5.4s; }
.b10{ animation-duration: 6.2s; }

@keyframes bubbleFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-7px); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .bubble{ animation: none !important; }
}

/* ===========================
   FINAL FIXES (bottom-most)
=========================== */

/* 1) Move lady UP + keep size */
.wave-figure{
  top: 18px !important;           /* was ~64–120; lifting her prevents covering cards */
  right: -10px !important;
  width: clamp(820px, 98vw, 1520px) !important;
  z-index: 5 !important;
  pointer-events: none;
}

/* Optional: if still overlapping the “card 2” top edge, lift a bit more */
@media (min-width: 981px){
  .wave-figure{ top: -210px !important; } /* try 6px–20px range */
}

/* On mobile, keep her present but higher */
@media (max-width: 980px){
  .wave-figure{
    top: 74px !important;         /* move up relative to your sticky nav */
    right: -18px !important;
    width: 380px !important;
    opacity: .96;
  }
}

/* 2) Wave background: fade edges + fade out at bottom */
.wave-wrap::before{
  /* keep your existing background settings; we only add masking */
  -webkit-mask-image:
    radial-gradient(130% 95% at 50% 30%,
      rgba(0,0,0,1) 52%,
      rgba(0,0,0,.92) 66%,
      rgba(0,0,0,.55) 80%,
      rgba(0,0,0,.18) 92%,
      rgba(0,0,0,0) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 70%,
      rgba(0,0,0,.55) 84%,
      rgba(0,0,0,0) 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(130% 95% at 50% 30%,
      rgba(0,0,0,1) 52%,
      rgba(0,0,0,.92) 66%,
      rgba(0,0,0,.55) 80%,
      rgba(0,0,0,.18) 92%,
      rgba(0,0,0,0) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 70%,
      rgba(0,0,0,.55) 84%,
      rgba(0,0,0,0) 100%);
  mask-composite: intersect;
}

/* ===== Premium Typed Theme ===== */
.typed-wrap{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.typed-dynamic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 14px 10px;
  border-radius: 999px;
  min-height: 46px;

  /* base glass */
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 55px rgba(15,23,42,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  font-weight: 980;
  letter-spacing: -.2px;

  /* animation hooks */
  will-change: transform, opacity, filter;
  transition:
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    transform .35s ease,
    opacity .35s ease,
    filter .35s ease;
}

/* subtle “pop” between phrases */
.typed-dynamic.is-switching{
  opacity: 0;
  transform: translateY(6px) scale(.985);
  filter: blur(1px);
}

/* Per-phrase themes via CSS variables */
.typed-dynamic{
  background:
    radial-gradient(120px 80px at 30% 30%, rgba(255,255,255,.75), transparent 60%),
    linear-gradient(135deg, var(--t1, rgba(155,180,192,.35)), var(--t2, rgba(225,208,179,.35))),
    rgba(255,255,255,.55);
  border-color: var(--tb, rgba(15,23,42,.10));
  box-shadow:
    0 18px 55px rgba(15,23,42,.10),
    0 18px 60px var(--ts, rgba(112,59,59,.10));
}

/* caret keeps your palette but a bit smoother */
.typed-caret{
  width: 10px;
  height: 1.05em;
  border-radius: 3px;
  background: rgba(75,42,42,.78);
  animation: caretBlink 1s steps(2,end) infinite;
}

@keyframes caretBlink{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}

/* Mobile: reduce padding so it doesn’t feel chunky */
@media (max-width: 980px){
  .typed-dynamic{ padding: 7px 12px 9px; min-height: 42px; }
}

/* 1) Lock the headline row so "I want" never moves */
.liquid-title{
  display:flex;
  align-items:center;         /* was baseline in some places */
  justify-content:center;
  gap: 12px;

  line-height: 1.05;          /* stable line box */
}

/* 2) Make both parts share the same line box */
.title-line1,
.title-line2{
  display:inline-flex;
  align-items:center;
  line-height: 1.05;
}

/* 3) Reserve a consistent height for the dynamic pill */
.typed-wrap{
  display:inline-flex;
  align-items:center;
}

.typed-dynamic{
  line-height: 1;             /* avoid emoji changing line metrics */
  height: 46px;               /* pick what looks right for your size */
  min-height: 46px;
  padding: 0 14px;            /* move vertical padding into height */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space: nowrap;
}

/* 4) Caret: give it a fixed height too */
.typed-caret{
  height: 46px;
  align-self: center;
}

/* Mobile tweak */
@media (max-width: 980px){
  .typed-dynamic{ height: 42px; min-height: 42px; }
  .typed-caret{ height: 42px; }
}

/* ===== MOBILE: dynamic phrase must fit (no clipping) ===== */
@media (max-width: 980px){

  /* stack "I want" over the dynamic line */
  .liquid-title{
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  .title-line1,
  .title-line2{
    width: 100%;
    justify-content: center;
  }

  /* dynamic pill: allow wrap + constrain width */
  .typed-wrap{
    width: 100%;
    justify-content: center;
  }

  .typed-dynamic{
    max-width: min(92vw, 520px) !important;
    width: auto !important;

    /* IMPORTANT: allow wrapping on mobile */
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;

    /* remove hard height that can cause clipping */
    height: auto !important;
    min-height: 42px !important;
    padding: 10px 14px !important;

    /* keeps it visually nice if it wraps */
    text-align: center;
    line-height: 1.15 !important;
  }

  .typed-caret{
    height: 1.1em !important; /* not 46px */
  }
}

/* Hide hero CTA buttons on mobile (home banner only) */
@media (max-width: 980px){
  .liquid-hero .hero-actions{
    display: none !important;
  }
}