/*
Theme Name: Klaar
Theme URI: https://klaar.studio
Author: Klaar Studio
Author URI: https://klaar.studio
Description: Custom theme for Klaar — Business Growth & Digital Transformation Agency
Version: 1.0.0
License: Private
Text Domain: klaar
*/


/*
  DESIGN SYSTEM — KLAAR V3
  Philosophy: Calm authority. One dominant dark. Accents used sparingly with intent.
  Font: DM Serif Display (display headlines only) + Figtree (everything else — one clean sans)
  Palette E used as: Pistachio = primary accent | Azure = links/hover | Orchid = CTA warm | Peach = secondary warm | Matcha = subtle fills
*/
:root {
  /* Foundation */
  --bg:          #283A58;
  --bg-raised:   #1e2e47;
  --bg-card:     #172439;
  --bg-light:    #F7F4E9;   /* cream — light sections */

  /* Palette E accents */
  --pistachio:   #5C8E7D;
  --pistachio-l: #84b3a3;
  --matcha:      #8F9F7D;
  --matcha-l:    #b0c29e;
  --azure:       #89B3CF;
  --azure-l:     #b2cfe0;
  --orchid:      #F2899A;
  --orchid-l:    #f9b3be;
  --peach:       #F5B896;
  --peach-l:     #f9cbb5;

  /* Text */
  --text-primary:  #F2EDD6;
  --text-secondary: rgba(242,237,214,0.78);
  --text-tertiary:  rgba(242,237,214,0.48);

  /* On light bg */
  --text-dark:   #283A58;
  --text-dark-2: rgba(40,58,88,0.6);

  /* Type */
  --display: 'DM Serif Display', Georgia, serif;
  --body:    'Figtree', system-ui, sans-serif;

  /* Spacing rhythm */
  --section: 8rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--text-primary);
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}

/* ─── CURSOR ─── */
#cur {
  position: fixed; width: 6px; height: 6px;
  background: var(--text-primary);
  border-radius: 50%;
  top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .25s, height .25s, opacity .25s;
}
#cur-ring {
  position: fixed; width: 28px; height: 28px;
  border: 1px solid rgba(242,237,214,0.4);
  border-radius: 50%;
  top: 0; left: 0;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
}
body:has(a:hover) #cur,
body:has(button:hover) #cur { width: 12px; height: 12px; background: var(--orchid); }
body:has(a:hover) #cur-ring,
body:has(button:hover) #cur-ring { width: 44px; height: 44px; border-color: rgba(242,137,154,0.35); }

/* ─── NAV ─── */
nav {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  padding: 2rem 5vw;
  display: flex; align-items: center; justify-content: space-between;
  transition: background .5s, padding .4s, border-color .5s;
}
nav.stuck {
  background: rgba(40,58,88,0.97);
  backdrop-filter: blur(20px);
  padding: 1.1rem 5vw;
  border-bottom: 1px solid rgba(92,142,125,0.15);
}


nav ul { list-style: none; display: flex; gap: 2.5rem; align-items: center; }
nav a {
  font-family: var(--body);
  font-size: 1.05rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-secondary); text-decoration: none;
  transition: color .25s;
}
nav a:hover { color: var(--pistachio-l); }
.nav-btn {
  font-size: 0.82rem !important; font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  color: #1a2035 !important;
  background: #F5B896 !important;
  padding: 0.65rem 1.6rem;
  border-radius: 2px;
  transition: background .25s !important;
}
.nav-btn:hover { background: #f9cbb5 !important; color: #1a2035 !important; }

/* ─── HERO ─── */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 8rem 5vw 4rem;
  position: relative;
  overflow: hidden;
}

/* Mouse-tracking spotlight */
.hero-spotlight {
  position: absolute; width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(137,179,207,0.06) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
  transform: translate(-50%,-50%);
  transition: left .8s ease, top .8s ease;
}

/* Big ambient KLAAR watermark */
.hero-watermark {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 400;
  font-size: 28vw; letter-spacing: 0.05em;
  color: rgba(137,179,207,0.028);
  pointer-events: none; user-select: none;
  animation: breathe 7s ease-in-out infinite;
}

/* Orbs */
.hero-orb {
  position: absolute; border-radius: 50%;
  pointer-events: none; filter: blur(90px);
}
.hero-orb-1 {
  width: 45vw; height: 45vw; max-width: 600px; max-height: 600px;
  background: radial-gradient(circle, rgba(92,142,125,0.09) 0%, transparent 70%);
  right: -10vw; top: -5vw;
}
.hero-orb-2 {
  width: 30vw; height: 30vw; max-width: 400px; max-height: 400px;
  background: radial-gradient(circle, rgba(242,137,154,0.07) 0%, transparent 70%);
  right: 15vw; bottom: 5vw;
}

.hero-inner { position: relative; z-index: 1; }

.hero-label {
  font-size: 0.9rem; font-weight: 500; letter-spacing: 0.35em;
  text-transform: uppercase; color: var(--pistachio);
  display: flex; align-items: center; gap: 0.9rem;
  margin-bottom: 3rem;
  opacity: 0; animation: up .7s ease forwards .1s;
}
.hero-label::before { content: ''; width: 24px; height: 1px; background: var(--pistachio); flex-shrink: 0; }


/* Hero headline wrap */
.hero-headline-wrap { width: 100%; }
.hero-headline { width: 100%; }

/* Kinetic headline — each line slides in from a different direction */
.hero-headline { margin-bottom: 3rem; }

.hl-row {
  display: flex; align-items: baseline;
  overflow: hidden;
  line-height: 1.0;
}
.hl-row + .hl-row { margin-top: -0.05em; }

.hl-static {
  font-family: var(--display);
  font-size: clamp(5rem, 10.5vw, 12rem);
  font-weight: 400;
  color: var(--text-primary);
  opacity: 0;
  display: inline-block;
  white-space: nowrap;
}
.hl-row:nth-child(1) .hl-static { animation: slideRight .9s cubic-bezier(0.16,1,0.3,1) forwards .2s; }
.hl-row:nth-child(2) .hl-static { animation: slideRight .9s cubic-bezier(0.16,1,0.3,1) forwards .4s; }
.hl-row:nth-child(3) .hl-static { animation: slideRight .9s cubic-bezier(0.16,1,0.3,1) forwards .6s; }

.hl-accent {
  font-family: var(--display); font-style: italic;
  font-size: clamp(5rem, 10.5vw, 12rem);
  font-weight: 400;
  margin-left: 0.2em;
  opacity: 0;
  display: inline-block;
  white-space: nowrap;
}
.hl-row:nth-child(1) .hl-accent {
  animation: slideLeft .9s cubic-bezier(0.16,1,0.3,1) forwards .35s;
  background: linear-gradient(90deg, var(--pistachio-l) 0%, #d4f0e4 40%, var(--pistachio-l) 60%, #a8d4bc 100%);
  background-size: 250% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: slideLeft .9s cubic-bezier(0.16,1,0.3,1) forwards .35s, shimmer 3.5s linear infinite 1.5s;
}
.hl-row:nth-child(2) .hl-accent {
  background: linear-gradient(90deg, var(--azure-l) 0%, #e8f4ff 40%, var(--azure-l) 60%, #89B3CF 100%);
  background-size: 250% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: slideLeft .9s cubic-bezier(0.16,1,0.3,1) forwards .55s, shimmer 3.5s linear infinite 1.8s;
}
.hl-row:nth-child(3) .hl-accent {
  background: linear-gradient(90deg, var(--peach) 0%, #ffe8d6 40%, var(--peach) 60%, #e8956a 100%);
  background-size: 250% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: slideLeft .9s cubic-bezier(0.16,1,0.3,1) forwards .75s, shimmer 3.5s linear infinite 2.1s;
}
@keyframes shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* pill tags next to each headline word */
.hl-pill { display: none; }

/* Bottom row: desc + promise card side by side */
.hero-bottom {
  display: grid; grid-template-columns: 1fr 400px;
  gap: 3rem; align-items: end;
  border-top: 1px solid rgba(242,237,214,0.08);
  padding-top: 2rem; margin-top: 2rem;
  opacity: 0; animation: up .8s ease forwards 1s;
}
.hero-desc {
  font-size: 1.05rem; font-weight: 300; line-height: 1.9;
  color: var(--text-secondary); max-width: 480px;
}
.hero-actions {
  display: flex; gap: 1rem; align-items: center; margin-top: 2rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--body); font-size: 1.05rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.95rem 2rem; border-radius: 2px;
  text-decoration: none; cursor: none;
  transition: background .25s, color .25s, transform .2s, border-color .25s;
}
.btn-fill { background: var(--orchid); color: #1a2035; border: 1.5px solid var(--orchid); }
.btn-fill:hover { background: var(--peach); border-color: var(--peach); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--text-secondary); border: 1.5px solid rgba(242,237,214,0.2); }
.btn-outline:hover { border-color: rgba(242,237,214,0.5); color: var(--text-primary); }

/* Promise card — larger, anchored bottom-right */
.promise-card {
  background: rgba(22,36,58,0.92);
  border: 1px solid rgba(137,179,207,0.18);
  border-radius: 10px;
  padding: 2.75rem 3rem 3rem;
  width: 100%;
  backdrop-filter: blur(16px);
  box-shadow: 0 32px 64px rgba(0,0,0,0.25), 0 0 0 1px rgba(137,179,207,0.06);
  position: relative; overflow: hidden;
  align-self: end;
}
.promise-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--pistachio), var(--azure), var(--orchid), var(--peach));
}
.pc-label {
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--pistachio);
  margin-bottom: 1.25rem;
}
.pc-headline {
  font-family: var(--display);
  font-size: 3.8rem; font-weight: 400; line-height: 1.0;
  color: var(--text-primary);
  margin-bottom: 1.75rem;
}
.pc-divider {
  height: 1px;
  background: rgba(137,179,207,0.12);
  margin-bottom: 1.5rem;
}
.pc-sub {
  display: flex; flex-direction: column; gap: 0.65rem;
}
.pc-sub-item {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 1.05rem; font-weight: 400; letter-spacing: 0.05em;
  color: var(--text-secondary);
}
.pc-sub-item::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  flex-shrink: 0;
}
.pc-sub-item:nth-child(1)::before { background: var(--pistachio); }
.pc-sub-item:nth-child(2)::before { background: var(--azure); }
.pc-sub-item:nth-child(3)::before { background: var(--orchid); }
.pc-sub-item:nth-child(4)::before { background: var(--peach); }

/* Scroll cue */
.hero-scroll {
  position: absolute; bottom: 2.5rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  opacity: 0; animation: up .6s ease forwards 1.6s;
  z-index: 1;
}
.hero-scroll span {
  font-size: 0.9rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.scroll-chevron {
  width: 20px; height: 20px;
  border-right: 1px solid rgba(242,237,214,0.2);
  border-bottom: 1px solid rgba(242,237,214,0.2);
  transform: rotate(45deg);
  animation: bob 2s ease-in-out infinite 2s;
}
@keyframes bob { 0%,100% { transform: rotate(45deg) translateY(0); } 50% { transform: rotate(45deg) translateY(4px); } }
@keyframes slideRight { from { opacity:0; transform: translateX(-40px); } to { opacity:1; transform: translateX(0); } }
@keyframes slideLeft  { from { opacity:0; transform: translateX(40px);  } to { opacity:1; transform: translateX(0); } }
@keyframes fadeIn     { from { opacity:0; }                               to { opacity:1; } }

/* ─── MARQUEE ─── */
.marquee {
  border-top: 1px solid rgba(92,142,125,0.12);
  border-bottom: 1px solid rgba(92,142,125,0.12);
  background: rgba(0,0,0,0.15);
  padding: 0.95rem 0; overflow: hidden;
}
.marquee-inner {
  display: flex; gap: 0;
  animation: scroll 35s linear infinite;
  width: max-content;
}
.m-item {
  display: flex; align-items: center;
  font-size: 0.9rem; font-weight: 500; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--text-tertiary);
  padding: 0 2.5rem;
  white-space: nowrap;
}
.m-item::after {
  content: ''; width: 3px; height: 3px; border-radius: 50%;
  background: var(--pistachio); opacity: 0.5;
  margin-left: 2.5rem;
}

/* ─── SECTION BASE ─── */
.sec { padding: var(--section) 5vw; position: relative; }
.sec-label {
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--pistachio-l);
  display: flex; align-items: center; gap: 0.9rem;
  margin-bottom: 1.5rem;
}
.sec-label::before { content: ''; width: 22px; height: 1px; background: var(--pistachio); }
.sec-title {
  font-family: var(--display);
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 400; line-height: 1.15;
  color: var(--text-primary);
}
.sec-title i { font-style: italic; color: var(--pistachio-l); }

/* ─── ABOUT ─── */
.about { background: var(--bg-raised); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3vw; align-items: center; }
.about-body {
  font-size: 1.05rem; font-weight: 300; line-height: 1.95;
  color: var(--text-secondary); margin-top: 1.75rem;
}
.about-body p + p { margin-top: 1rem; }


/* ─── SERVICES ─── */
.services { background: var(--bg); }
.svc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 4rem;
  outline: 1px solid rgba(92,142,125,0.1);
}
.svc-card {
  padding: 2.5rem 2.25rem;
  border-right: 1px solid rgba(92,142,125,0.1);
  border-bottom: 1px solid rgba(92,142,125,0.1);
  position: relative; overflow: hidden;
  transition: background .35s;
}
.svc-card:nth-child(3n) { border-right: none; }
.svc-card:nth-last-child(-n+3) { border-bottom: none; }
.svc-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--pistachio);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s ease;
}
.svc-card:hover { background: var(--bg-raised); }
.svc-card:hover::after { transform: scaleX(1); }

.svc-n {
  font-family: var(--display); font-style: italic;
  font-size: 0.8rem; color: var(--pistachio); opacity: 0.6;
  display: block; margin-bottom: 1.25rem;
}
.svc-title {
  font-size: 1.05rem; font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4; margin-bottom: 0.75rem;
}
.svc-desc {
  font-size: 1.05rem; font-weight: 300; line-height: 1.85;
  color: var(--text-secondary);
}
.svc-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.5rem; }
.svc-tag {
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azure); opacity: 0.8;
  border: 1px solid rgba(137,179,207,0.25);
  padding: 0.2rem 0.6rem; border-radius: 2px;
}

/* ─── WHY ─── */
.why { background: var(--bg-light); }
.why .sec-label { color: var(--pistachio-l); }
.why .sec-label::before { background: var(--pistachio); }
.why .sec-title { color: var(--text-dark); }
.why .sec-title i { color: var(--pistachio); }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 4rem; }

.why-card {
  padding: 2.5rem 2.25rem;
  border-radius: 3px;
  position: relative;
  transition: transform .3s;
}
.why-card:hover { transform: translateY(-4px); }
.why-card:nth-child(1) { background: var(--bg); }
.why-card:nth-child(2) { background: #1e2e47; }
.why-card:nth-child(3) { background: var(--bg-raised); }

.why-n {
  font-family: var(--display); font-style: italic;
  font-size: 3rem; line-height: 1;
  margin-bottom: 1.25rem; display: block;
  opacity: 0.2;
}
.why-card:nth-child(1) .why-n { color: var(--azure); }
.why-card:nth-child(2) .why-n { color: var(--pistachio-l); opacity: 0.2; }
.why-card:nth-child(3) .why-n { color: var(--peach); }

.why-title {
  font-size: 1.05rem; font-weight: 600;
  line-height: 1.4; margin-bottom: 0.75rem;
}
.why-card:nth-child(1) .why-title { color: var(--azure-l); }
.why-card:nth-child(2) .why-title { color: var(--pistachio-l); }
.why-card:nth-child(3) .why-title { color: var(--peach-l); }

.why-desc {
  font-size: 1.05rem; font-weight: 300; line-height: 1.85;
}
.why-card:nth-child(1) .why-desc { color: var(--text-secondary); }
.why-card:nth-child(2) .why-desc { color: var(--text-secondary); }
.why-card:nth-child(3) .why-desc { color: var(--text-secondary); }


/* ─── LIVING CANVAS ─── */
.canvas-section {
  position: relative;
  height: 620px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: none;
}
.canvas-bg {
  position: absolute; inset: 0;
  z-index: 0; width: 100%; height: 100%; overflow: hidden;
}
#paintCanvas {
  position: absolute; top: 0; left: 0;
  width: 100% !important; height: 100% !important;
  display: block;
}
.canvas-overlay {
  position: absolute; inset: 0;
  background: rgba(22,36,58,0.18);
  z-index: 1;
}
.canvas-content {
  position: relative; z-index: 2;
  text-align: center;
  padding: 4rem 5vw;
  display: flex; flex-direction: column; align-items: center;
}
.canvas-eyebrow {
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.35em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
  margin-bottom: 2rem;
  opacity: 0; transform: translateY(12px);
  transition: opacity .8s ease, transform .8s ease;
}
.canvas-eyebrow.in { opacity: 1; transform: none; }

.canvas-motto {
  font-family: 'Caveat', cursive;
  font-size: clamp(4rem, 9vw, 9rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-shadow: 0 4px 40px rgba(0,0,0,0.35);
  /* SVG stroke draw-on effect via clip-path animation */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s cubic-bezier(0.16,1,0.3,1);
}
.canvas-motto.in { clip-path: inset(0 0% 0 0); }

.canvas-sub {
  font-family: var(--body);
  font-size: 1.05rem; font-weight: 300;
  color: rgba(255,255,255,0.75);
  margin-top: 1.75rem; letter-spacing: 0.04em;
  max-width: 480px; line-height: 1.7;
  opacity: 0; transform: translateY(16px);
  transition: opacity .9s ease .6s, transform .9s ease .6s;
}
.canvas-sub.in { opacity: 1; transform: none; }

.canvas-cta {
  margin-top: 2.5rem;
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--body); font-size: 1.05rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  border: 1.5px solid rgba(255,255,255,0.35);
  padding: 0.9rem 2rem; border-radius: 2px;
  text-decoration: none; cursor: none;
  opacity: 0; transform: translateY(12px);
  transition: opacity .8s ease .9s, transform .8s ease .9s, border-color .25s, background .25s;
}
.canvas-cta.in { opacity: 1; transform: none; }
.canvas-cta:hover { border-color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.08); }

/* ─── PROCESS — staggered zigzag layout ─── */
.process { background: var(--bg-raised); overflow: hidden; }
.process .sec-label { color: var(--pistachio-l); }
.process .sec-label::before { background: var(--pistachio); }
.process .sec-title { color: var(--text-primary); }
.process .sec-title i { color: var(--pistachio-l); }
.process-steps { margin-top: 5rem; display: flex; flex-direction: column; gap: 0; }
.ps-row { display: grid; grid-template-columns: 1fr 80px 1fr; align-items: center; min-height: 180px; }
.ps-row:nth-child(even) { direction: rtl; }
.ps-row:nth-child(even) > * { direction: ltr; }
.ps-card { padding: 2.5rem 3rem; border-radius: 4px; position: relative; transition: transform .3s; overflow: hidden; }
.ps-card:hover { transform: translateY(-3px); }
.ps-row:nth-child(1) .ps-card { background: rgba(137,179,207,0.07); border: 1px solid rgba(137,179,207,0.12); }
.ps-row:nth-child(2) .ps-card { background: rgba(242,137,154,0.07); border: 1px solid rgba(242,137,154,0.12); }
.ps-row:nth-child(3) .ps-card { background: rgba(92,142,125,0.07); border: 1px solid rgba(92,142,125,0.2); }
.ps-row:nth-child(4) .ps-card { background: rgba(245,184,150,0.07); border: 1px solid rgba(245,184,150,0.12); }
.ps-big-num { display: none; }
.ps-row:nth-child(1) .ps-big-num { color: var(--azure); }
.ps-row:nth-child(2) .ps-big-num { color: var(--orchid); }
.ps-row:nth-child(3) .ps-big-num { color: var(--pistachio); }
.ps-row:nth-child(4) .ps-big-num { color: var(--peach); }
.ps-step-label { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: 0.75rem; display: block; }
.ps-row:nth-child(1) .ps-step-label { color: var(--azure); }
.ps-row:nth-child(2) .ps-step-label { color: var(--orchid); }
.ps-row:nth-child(3) .ps-step-label { color: var(--pistachio-l); }
.ps-row:nth-child(4) .ps-step-label { color: var(--peach); }
.ps-title { font-family: var(--display); font-size: 1.7rem; font-weight: 400; line-height: 1.2; color: var(--text-primary); margin-bottom: 0.75rem; }
.ps-desc { font-size: 1.05rem; font-weight: 300; line-height: 1.85; color: var(--text-secondary); max-width: 360px; }
.ps-connector { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 0; position: relative; padding: 1rem 0; }
.ps-connector-line { width: 1px; flex: 1; background: linear-gradient(to bottom, transparent, rgba(137,179,207,0.2), transparent); min-height: 30px; }
.ps-connector-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; border: 2px solid; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
.ps-connector-dot::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.ps-row:nth-child(1) .ps-connector-dot { border-color: var(--azure); color: var(--azure); }
.ps-row:nth-child(2) .ps-connector-dot { border-color: var(--orchid); color: var(--orchid); }
.ps-row:nth-child(3) .ps-connector-dot { border-color: var(--pistachio-l); color: var(--pistachio-l); }
.ps-row:nth-child(4) .ps-connector-dot { border-color: var(--peach); color: var(--peach); }
.ps-empty { display: flex; align-items: center; justify-content: center; padding: 2rem; }
.ps-empty-num { display: none; }
.section-divider { height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(137,179,207,0.2) 20%, rgba(242,137,154,0.3) 50%, rgba(137,179,207,0.2) 80%, transparent 100%); margin: 0; }

/* ─── CASE STUDIES ─── */
.cases { background: var(--bg); }
.cases-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 4rem; }
.case-card {
  display: flex; flex-direction: column;
  border: 1px solid rgba(137,179,207,0.12);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  transition: border-color .35s, transform .3s;
}
.case-card:hover { border-color: rgba(242,137,154,0.25); transform: translateY(-3px); }

/* top content area */
.case-body {
  padding: 2.5rem 2.5rem 2rem;
  flex: 1;
  position: relative;
}
.case-body::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--orchid), var(--peach));
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s ease;
}
.case-card:hover .case-body::after { transform: scaleX(1); }

.case-tag {
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--orchid);
  display: block; margin-bottom: 1.25rem;
}
.case-title {
  font-family: var(--display); font-size: 1.5rem;
  font-weight: 400; line-height: 1.3;
  color: var(--text-primary); margin-bottom: 1rem;
}
.case-desc {
  font-size: 1.05rem; font-weight: 300; line-height: 1.85;
  color: var(--text-secondary);
}

/* metrics strip — always pinned to bottom */
.case-metrics {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--bg-raised);
  border-top: 1px solid rgba(137,179,207,0.1);
  margin-top: auto;
}
.cm-item {
  padding: 1.5rem 2rem;
  position: relative;
}
.cm-item:first-child {
  border-right: 1px solid rgba(137,179,207,0.1);
}
.cm-num {
  font-family: var(--display); font-style: italic;
  font-size: 2.6rem; line-height: 1;
  background: linear-gradient(135deg, var(--azure-l), var(--pistachio-l));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block; margin-bottom: 0.5rem;
}
.cm-label {
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-tertiary);
}

/* ─── CONTACT ─── */
.contact {
  background: var(--bg-raised);
  text-align: center;
  padding: var(--section) 5vw;
  position: relative; overflow: hidden;
}
.contact-bg-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 22vw; font-weight: 400;
  color: rgba(242,237,214,0.025); letter-spacing: 0.12em;
  white-space: nowrap; pointer-events: none; user-select: none;
  animation: breathe 8s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.03); opacity: 0.7; }
}
.contact .sec-label { justify-content: center; color: var(--orchid); }
.contact .sec-label::before { background: var(--orchid); }
.contact-title {
  font-family: var(--display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 400; line-height: 1.2;
  color: var(--text-primary); margin: 1.5rem auto;
  max-width: 680px;
}
.contact-title i { font-style: italic; color: var(--peach); }
.contact-sub {
  font-size: 1.05rem; font-weight: 300; line-height: 1.9;
  color: var(--text-secondary); max-width: 420px;
  margin: 0 auto 3rem;
}
.contact-form {
  display: flex; max-width: 460px; margin: 0 auto;
}
.contact-form input {
  flex: 1;
  font-family: var(--body); font-size: 1.05rem; font-weight: 300;
  background: rgba(242,237,214,0.05);
  border: 1px solid rgba(92,142,125,0.25);
  border-right: none;
  color: var(--text-primary);
  padding: 1rem 1.25rem;
  outline: none;
  transition: border-color .3s;
  border-radius: 2px 0 0 2px;
}
.contact-form input::placeholder { color: var(--text-tertiary); }
.contact-form input:focus { border-color: var(--pistachio); }
.contact-form button {
  font-family: var(--body); font-size: 0.95rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--orchid); color: #1a2035;
  border: 1px solid var(--orchid);
  padding: 1rem 1.75rem; cursor: none; white-space: nowrap;
  transition: background .3s, border-color .3s;
  border-radius: 0 2px 2px 0;
}
.contact-form button:hover { background: var(--peach); border-color: var(--peach); }
.contact-alt {
  margin-top: 1.75rem;
  font-size: 1.05rem; font-weight: 300;
  color: var(--text-tertiary);
}
.contact-alt a {
  color: var(--azure); text-decoration: none;
  transition: color .25s;
}
.contact-alt a:hover { color: var(--azure-l); }

/* ─── FOOTER ─── */







/* Social icons */

.social-links { display: flex; gap: 0.75rem; }
.social-link {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(92,142,125,0.2);
  border-radius: 3px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: border-color .25s, color .25s, background .25s;
}
.social-link:hover { border-color: var(--pistachio); color: var(--text-primary); background: rgba(92,142,125,0.1); }
.social-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }






/* ─── REVEAL ─── */
.r {
  opacity: 1; transform: none;
  transition: opacity .75s ease, transform .75s ease;
}
.r.animate-ready {
  opacity: 0; transform: translateY(30px);
}
.r.in { opacity: 1; transform: none; }
.r.d1 { transition-delay: .08s; }
.r.d2 { transition-delay: .16s; }
.r.d3 { transition-delay: .24s; }
.r.d4 { transition-delay: .32s; }

/* ─── ANIMATIONS ─── */
@keyframes up { to { opacity: 1; transform: translateY(0); } }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ─── MOBILE ─── */

@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Diagonal wave divider */
.wave-divider { position: relative; z-index: 2; line-height: 0; }

/* Quote divider strip */
.quote-strip {
  background: var(--bg-light);
  padding: 4rem 5vw;
  text-align: center;
  position: relative; overflow: hidden; z-index: 2;
}
.quote-strip::before {
  content: '"';
  position: absolute; left: 5vw; top: -1rem;
  font-family: var(--display); font-size: 12rem;
  color: rgba(40,58,88,0.06); line-height: 1;
  pointer-events: none;
}
.qs-text {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  color: var(--text-dark); line-height: 1.5;
  max-width: 700px; margin: 0 auto;
}
.qs-text em { color: var(--pistachio); font-style: normal; }
.qs-attr {
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--pistachio);
  margin-top: 1.5rem;
}

/* Number counter strip between why and canvas */
.counter-strip {
  background: var(--bg-raised);
  padding: 3rem 5vw;
  display: flex; justify-content: center; gap: 6rem;
  border-top: 1px solid rgba(92,142,125,0.1);
  position: relative; z-index: 2;
}
.counter-item { text-align: center; }
.counter-num {
  font-family: var(--display); font-size: 3.5rem; font-style: italic;
  line-height: 1; color: var(--orchid);
}
.counter-desc {
  font-size: 0.9rem; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-tertiary);
  margin-top: 0.5rem; max-width: 120px;
}



@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.about-graphic svg { width: 100%; height: 100%; }

/* Moving graphic elements */
.ag-orbit1 { animation: agOrbit1 12s linear infinite; transform-origin: 240px 210px; }
.ag-orbit2 { animation: agOrbit2 18s linear infinite reverse; transform-origin: 240px 210px; }
.ag-orbit3 { animation: agOrbit3 25s linear infinite; transform-origin: 240px 210px; }
@keyframes agOrbit1 { to { transform: rotate(360deg); } }
@keyframes agOrbit2 { to { transform: rotate(360deg); } }
@keyframes agOrbit3 { to { transform: rotate(360deg); } }

.ag-float { animation: agFloat 5s ease-in-out infinite; }
.af1 { animation-delay: 0s; }
.af2 { animation-delay: 1s; }
.af3 { animation-delay: 2s; }
.af4 { animation-delay: 3s; }
@keyframes agFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.ag-pulse { animation: agPulse 3s ease-in-out infinite; }
.ap1 { animation-delay: 0s; }
.ap2 { animation-delay: 1s; }
.ap3 { animation-delay: 2s; }
@keyframes agPulse { 0%,100%{opacity:.3;r:4} 50%{opacity:1;r:6} }

.ag-draw { stroke-dasharray: 400; stroke-dashoffset: 400; animation: agDraw 2s ease forwards .6s; }
@keyframes agDraw { to { stroke-dashoffset: 0; } }

.ag-word { animation: agWord .6s ease forwards; opacity: 0; }
.aw1{animation-delay:.8s} .aw2{animation-delay:1.1s} .aw3{animation-delay:1.4s} .aw4{animation-delay:1.7s}
@keyframes agWord { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

.ag-beam { animation: agBeam 4s ease-in-out infinite; }
.ab1{animation-delay:0s} .ab2{animation-delay:1.3s} .ab3{animation-delay:2.6s}
@keyframes agBeam { 0%,100%{opacity:.15} 50%{opacity:.4} }


/* ── ABOUT GRAPHIC ── */
.about-graphic-wrap {
  width: 100%; height: 440px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; animation: heroGraphicIn 1s ease forwards 0.5s;
}
@keyframes heroGraphicIn { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }
.about-graphic-wrap svg { width: 100%; height: 100%; }
/* inner SVG animations */
.ab-o1 { animation: abo1  8s linear infinite;         transform-origin: 240px 220px; }
.ab-o2 { animation: abo1 13s linear infinite reverse; transform-origin: 240px 220px; }
.ab-o3 { animation: abo1 20s linear infinite;         transform-origin: 240px 220px; }
@keyframes abo1 { to { transform: rotate(360deg); } }
.ab-pulse { animation: abPulse 3s ease-in-out infinite; }
.abp1{animation-delay:0s} .abp2{animation-delay:1s} .abp3{animation-delay:2s}
@keyframes abPulse { 0%,100%{opacity:.35} 50%{opacity:1} }
.ab-f1 { animation: abFloat 6s ease-in-out infinite 0s; }
.ab-f2 { animation: abFloat 6s ease-in-out infinite 2s; }
.ab-f3 { animation: abFloat 6s ease-in-out infinite 4s; }
@keyframes abFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.ab-dash { stroke-dasharray:6 6; animation: abDash 3s linear infinite; }
@keyframes abDash { to { stroke-dashoffset: -100; } }


/* ── WHO WE ARE GRAPHIC ── */
.wwa-graphic-col {
  width: 100%;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ── LOGO ── */
.logo {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.85rem !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  opacity: 1 !important;
  text-shadow: none !important;
}



/* ── MOBILE RESPONSIVE ── */
@media (max-width: 860px) {
  /* Nav */
  nav ul li:not(:last-child) { display: none; }
  nav { padding: 2rem 5vw; }

  /* Hero */
  .hero-layout { grid-template-columns: 1fr !important; }
  .hero-promise { display: none; }
  .hero-title { font-size: clamp(3rem,12vw,5rem) !important; }

  /* About */
  .about-grid { grid-template-columns: 1fr !important; gap: 3rem; }
  .wwa-graphic-col { min-height: 280px !important; }

  /* Services grid */
  .services-grid { grid-template-columns: 1fr !important; }

  /* Why cards */
  .why-grid { grid-template-columns: 1fr !important; }

  /* Stats */
  

  /* Counter strip */
  .counter-strip { flex-wrap: wrap; gap: 2rem; padding: 3rem 5vw; }
  .counter-num { font-size: 2.5rem !important; }

  /* Case studies */
  .cases-grid { grid-template-columns: 1fr !important; }
  .case-metrics { grid-template-columns: 1fr 1fr; }
  .cc-metrics { grid-template-columns: 1fr 1fr; }

  /* Contact */
  .contact-main { grid-template-columns: 1fr !important; }
  .contact-info { border-left: none !important; border-top: 1px solid rgba(92,142,125,0.15); }
  .form-row { grid-template-columns: 1fr !important; }

  /* Footer */
  
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .footer-nav { flex-wrap: wrap; gap: 1rem; }

  /* Graphics */
  .team-divider { display: none; }
  .hero-graphic { height: 260px !important; }

  /* Page hero inner pages */
  .page-hero { grid-template-columns: 1fr !important; padding: 9rem 5vw 4rem; }
  .hero-graphic { display: none; }

  /* Typography */
  body { cursor: auto; }
  #cur, #cur-ring { display: none; }
}

@media (max-width: 540px) {
  
  
  .counter-strip { gap: 1.5rem; }
  .why-grid { grid-template-columns: 1fr !important; }
  .hero-actions { flex-direction: column; }
  .hero-actions a { width: 100%; text-align: center; justify-content: center; }
}


/* ── FOOTER ── */
footer {
  background: #0d1825;
  border-top: 1px solid rgba(92,142,125,0.12);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.4fr 1fr;
  gap: 3rem;
  padding: 4rem 5vw 3rem;
  border-bottom: 1px solid rgba(242,237,214,0.05);
}
.footer-logo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #F2EDD6;
  text-decoration: none;
  display: block;
  margin-bottom: 0.75rem;
}
.footer-logo .dot { color: var(--orchid); letter-spacing: 0; }
.footer-tagline {
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--text-tertiary);
  line-height: 1.7;
  margin-bottom: 0.6rem;
}
.footer-email a {
  font-size: 0.85rem;
  color: var(--azure);
  text-decoration: none;
  transition: color .25s;
}
.footer-email a:hover { color: var(--azure-l); }
.footer-col-title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pistachio-l);
  margin-bottom: 1.25rem;
}
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.footer-col ul a {
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color .25s;
  font-family: var(--body);
  line-height: 1.5;
}
.footer-col ul a:hover { color: var(--text-primary); }
.footer-social-icons {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(92,142,125,0.22);
  border-radius: 3px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: border-color .25s, color .25s, background .25s;
}
.footer-social-link:hover {
  border-color: var(--pistachio);
  color: var(--pistachio-l);
  background: rgba(92,142,125,0.08);
}
.footer-social-link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footer-bottom {
  padding: 1.5rem 5vw;
  display: flex;
  justify-content: center;
}
.footer-copy {
  font-size: 0.72rem;
  color: var(--text-tertiary);
}
@media (max-width: 860px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 540px) {
  .footer-top { grid-template-columns: 1fr; }
}


/* ── SERVICE TICKER ── */
.service-ticker {
  background: var(--bg);
  padding: 1.5rem 0;
  border-top: 1px solid rgba(92,142,125,0.08);
  border-bottom: 1px solid rgba(92,142,125,0.08);
  overflow: hidden;
  position: relative; z-index: 2;
  white-space: nowrap;
}
.service-ticker-track {
  display: flex;
  gap: 0;
  animation: tickerScroll 25s linear infinite;
  width: max-content;
  white-space: nowrap;
}
.service-ticker-track:hover { animation-play-state: paused; }
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 2rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
  cursor: default;
  transition: color .25s;
  flex-shrink: 0;
}
.ticker-item:hover { color: var(--pistachio-l); }
.ticker-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--pistachio);
  opacity: 0.5;
  flex-shrink: 0;
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ── STAT STRIP ── */
.stat-strip {
  background: var(--bg-raised);
  padding: 2rem 5vw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  border-top: 1px solid rgba(92,142,125,0.1);
  border-bottom: 1px solid rgba(92,142,125,0.1);
  position: relative; z-index: 2;
}
.stat-item { text-align: center; }
.stat-num {
  font-family: var(--display);
  font-style: italic;
  font-size: 2.4rem;
  line-height: 1;
  background: linear-gradient(135deg, var(--pistachio-l), var(--azure-l));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
}
.stat-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: 0.4rem;
  display: block;
}



/* ══════════════════════════════
   TABLET 1024px
══════════════════════════════ */
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr 1fr !important; gap: 2rem; }
  .why-grid { grid-template-columns: 1fr 1fr !important; }
  .svc-grid { grid-template-columns: 1fr 1fr !important; }
  .hero-bottom { grid-template-columns: 1fr !important; }
  .hero-promise { display: none !important; }
}

/* ══════════════════════════════
   MOBILE 768px
══════════════════════════════ */
@media (max-width: 768px) {
  nav { padding: 1.1rem 5vw !important; }
  nav ul { display: none !important; }
  .hamburger { display: flex !important; }
  .sec { padding: 4rem 5vw !important; }
  .hero-inner { padding: 9rem 5vw 3rem !important; }
  .hero-bottom { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .hero-promise { display: none !important; }
  .hero-actions { flex-direction: column !important; gap: 1rem !important; }
  .hero-actions a { text-align: center !important; justify-content: center !important; }
  .page-hero { grid-template-columns: 1fr !important; padding: 8rem 5vw 3rem !important; }
  .hero-graphic { display: none !important; }
  .ph-title { font-size: clamp(2.2rem, 7vw, 3.5rem) !important; }
  .service-ticker { display: none !important; }
  .stat-ticker { display: none !important; }
  .about-grid { grid-template-columns: 1fr !important; }
  .wwa-graphic-col { display: none !important; }
  .svc-grid { grid-template-columns: 1fr !important; }
  .ss-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .ss-grid.flip { direction: ltr !important; }
  .why-grid { grid-template-columns: 1fr !important; }
  .ps-row { grid-template-columns: 1fr !important; }
  .ps-connector { display: none !important; }
  .ps-empty { display: none !important; }
  .counter-strip { flex-wrap: wrap !important; justify-content: center !important; gap: 1.5rem !important; padding: 3rem 5vw !important; }
  .counter-item { min-width: 130px; text-align: center; }
  .counter-num { font-size: 2.5rem !important; }
  .qs-text { font-size: clamp(1.2rem, 4vw, 1.6rem) !important; }
  .quote-strip { padding: 3rem 5vw !important; }
  .canvas-section { min-height: 60vh !important; }
  .cases-grid { grid-template-columns: 1fr !important; }
  .cc-metrics { grid-template-columns: 1fr 1fr !important; }
  .contact-alt { padding: 4rem 5vw !important; }
  .contact-main { grid-template-columns: 1fr !important; }
  .contact-form-wrap { padding: 3rem 5vw !important; }
  .contact-info { border-left: none !important; border-top: 1px solid rgba(92,142,125,0.15) !important; padding: 3rem 5vw !important; }
  .form-row { grid-template-columns: 1fr !important; gap: 0 !important; }
  .footer-top { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; padding: 3rem 5vw 2rem !important; }
  .team-divider { display: none !important; }
  
  .ty-right { display: none !important; }
  .filter-bar { flex-wrap: wrap !important; gap: 0.5rem !important; }
  .filter-btn { font-size: 0.65rem !important; padding: 0.35rem 0.75rem !important; }
  body { cursor: auto !important; }
  #cur, #cur-ring { display: none !important; }
}

@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr !important; }
  .logo { font-size: 1.1rem !important; }
  .sec { padding: 3rem 5vw !important; }
  .sec-title { font-size: clamp(1.8rem, 7vw, 2.5rem) !important; }
  .counter-num { font-size: 2rem !important; }
}

/* ── HAMBURGER ── */
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; background:none; border:none; z-index:300; }
.hamburger span { display:block; width:24px; height:2px; background:#F2EDD6; border-radius:2px; transition:all 0.3s ease; }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
.mobile-nav { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(30,46,71,0.98); backdrop-filter:blur(20px); z-index:250; flex-direction:column; align-items:center; justify-content:center; gap:2rem; }
.mobile-nav.open { display:flex; }
.mobile-nav a { font-family:var(--display); font-size:clamp(2rem,6vw,3rem); font-style:italic; color:var(--text-primary); text-decoration:none; letter-spacing:0.05em; transition:color 0.2s; }
.mobile-nav a:hover, .mobile-nav a.active { color:var(--pistachio-l); }
.mobile-nav .mobile-cta { font-family:var(--body); font-size:0.82rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:#1a2035 !important; background:#F5B896; padding:0.9rem 2.5rem; border-radius:2px; margin-top:1rem; font-style:normal; }
.mobile-nav .mobile-cta:hover { background:#f9cbb5; }

/* ── SCROLL TO TOP ── */
.scroll-top { position:fixed; bottom:2rem; right:2rem; width:44px; height:44px; background:rgba(92,142,125,0.15); border:1px solid rgba(92,142,125,0.35); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--pistachio-l); font-size:1.1rem; text-decoration:none; z-index:100; opacity:0; transform:translateY(10px); transition:opacity .3s,transform .3s,background .25s; }
.scroll-top.visible { opacity:1; transform:translateY(0); }
.scroll-top:hover { background:rgba(92,142,125,0.3); border-color:var(--pistachio); }


/* ══════════════════════════════
   PAGE-SPECIFIC CSS
══════════════════════════════ */

/* === FROM SERVICES HEAD === */


:root {
  --bg:          #283A58;
  --bg-raised:   #1e2e47;
  --bg-light:    #FAF8F4;
  --pistachio:   #5C8E7D;
  --pistachio-l: #84b3a3;
  --matcha:      #8F9F7D;
  --azure:       #89B3CF;
  --azure-l:     #b2cfe0;
  --orchid:      #F2899A;
  --orchid-l:    #f9b3be;
  --peach:       #F5B896;
  --cream:       #FAF8F4;
  --text-primary:   #F2EDD6;
  --text-secondary: rgba(242,237,214,0.78);
  --text-tertiary:  rgba(242,237,214,0.48);
  --display: 'DM Serif Display', Georgia, serif;
  --body:    'Figtree', system-ui, sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--body);background:var(--bg-raised);color:var(--text-primary);overflow-x:hidden;cursor:none;-webkit-font-smoothing:antialiased;}

#cur{position:fixed;width:6px;height:6px;background:var(--text-primary);border-radius:50%;top:0;left:0;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .25s,height .25s;}
#cur-ring{position:fixed;width:28px;height:28px;border:1px solid rgba(242,237,214,0.4);border-radius:50%;top:0;left:0;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);}
body:has(a:hover) #cur,body:has(button:hover) #cur{width:12px;height:12px;background:var(--orchid);}
body:has(a:hover) #cur-ring,body:has(button:hover) #cur-ring{width:44px;height:44px;border-color:rgba(242,137,154,0.35);}










/* PAGE HERO */
.page-hero{padding:12rem 5vw 6rem;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--bg-raised) 0%,#1a2840 100%);}
.page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 70% at 85% 40%,rgba(92,142,125,0.07) 0%,transparent 60%);pointer-events:none;}
.ph-label{font-size: 0.9rem;font-weight:600;letter-spacing:0.32em;text-transform:uppercase;color:var(--pistachio);display:flex;align-items:center;gap:0.9rem;margin-bottom:1.5rem;opacity:0;animation:up .7s ease forwards .1s;}
.ph-label::before{content:'';width:22px;height:1px;background:var(--pistachio);}
.ph-title{font-family:var(--display);font-size:clamp(3rem,6vw,6.5rem);font-weight:400;line-height:1.0;color:var(--text-primary);max-width:800px;opacity:0;animation:up .9s ease forwards .25s;}
.ph-title i{font-style:italic;color:var(--pistachio-l);}
.ph-sub{font-size: 1.05rem;font-weight:300;line-height:1.9;color:var(--text-secondary);max-width:550px;margin-top:1.75rem;opacity:0;animation:up .8s ease forwards .45s;}

/* SERVICE SECTIONS */
.service-section{padding:6rem 5vw;border-bottom:1px solid rgba(92,142,125,0.08);}
.service-section:nth-child(even){background:var(--bg);}
.service-section:nth-child(odd){background:var(--bg-raised);}

.ss-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:6vw;align-items:start;}
.ss-grid.flip{direction:rtl;}
.ss-grid.flip>*{direction:ltr;}

.ss-left{}
.ss-num{font-family:var(--display);font-style:italic;font-size: 1.05rem;color:var(--pistachio);opacity:0.6;display:block;margin-bottom:1rem;}
.ss-title{font-family:var(--display);font-size: clamp(2.8rem, 4.5vw, 4rem);font-weight:400;line-height:1.15;color:var(--text-primary);margin-bottom:1.25rem;}
.ss-title i{font-style:italic;}
.ss-desc{font-size: 1.05rem;font-weight:300;line-height:1.9;color:var(--text-secondary);margin-bottom:2rem;}
.ss-cta{display:inline-flex;align-items:center;gap:0.55rem;font-size: 1rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--bg);background:var(--pistachio);padding:0.85rem 1.75rem;border-radius:2px;text-decoration:none;transition:background .25s,transform .2s;}
.ss-cta:hover{background:var(--pistachio-l);transform:translateY(-2px);}

.ss-right{}
.ss-card{background:rgba(242,237,214,0.04);border:1px solid rgba(92,142,125,0.12);border-radius:4px;padding:2.5rem;margin-bottom:1rem;}
.ss-card-title{font-size: 0.95rem;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;margin-bottom:1.25rem;}
.deliverable-list{display:flex;flex-direction:column;gap:0.65rem;}
.dl-item{display:flex;align-items:flex-start;gap:0.75rem;font-size: 1.05rem;font-weight:300;color:var(--text-secondary);line-height:1.6;}
.dl-item::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0;margin-top:0.45em;}

/* ── SERVICE ACCENT COLORS ── */
/* Each service: num, card title, bullets, italic title, CTA button */

/* S1 — Brand Identity — Azure */
.s1 .ss-num,.s1 .ss-card-title{color:var(--azure);}
.s1 .dl-item::before{background:var(--azure);}
.s1 .ss-title i{color:var(--azure-l);}
.s1 .ss-cta{background:var(--azure);color:#1a2035;}
.s1 .ss-cta:hover{background:var(--azure-l);}

/* S2 — Website Design — Pistachio */
.s2 .ss-num,.s2 .ss-card-title{color:var(--pistachio-l);}
.s2 .dl-item::before{background:var(--pistachio);}
.s2 .ss-title i{color:var(--pistachio-l);}
.s2 .ss-cta{background:var(--pistachio);color:#1a2035;}
.s2 .ss-cta:hover{background:var(--pistachio-l);}

/* S3 — Marketing — Orchid */
.s3 .ss-num,.s3 .ss-card-title{color:var(--orchid);}
.s3 .dl-item::before{background:var(--orchid);}
.s3 .ss-title i{color:var(--orchid-l);}
.s3 .ss-cta{background:var(--orchid);color:#1a2035;}
.s3 .ss-cta:hover{background:var(--orchid-l);}

/* S4 — AI & Automation — Peach */
.s4 .ss-num,.s4 .ss-card-title{color:var(--peach);}
.s4 .dl-item::before{background:var(--peach);}
.s4 .ss-title i{color:var(--peach);}
.s4 .ss-cta{background:var(--peach);color:#1a2035;}
.s4 .ss-cta:hover{background:#f9cbb5;}

/* S5 — Social Media — Matcha (sage green, warm) */
.s5 .ss-num,.s5 .ss-card-title{color:#b0c29e;}
.s5 .dl-item::before{background:#8F9F7D;}
.s5 .ss-title i{color:#b0c29e;}
.s5 .ss-cta{background:#8F9F7D;color:#1a2035;}
.s5 .ss-cta:hover{background:#b0c29e;}

/* S6 — App Development — Cream/warm gold */
.s6 .ss-num,.s6 .ss-card-title{color:#F2EDD6;}
.s6 .dl-item::before{background:#d4c9a8;}
.s6 .ss-title i{color:#F2EDD6;}
.s6 .ss-cta{background:#d4c9a8;color:#1a2035;}
.s6 .ss-cta:hover{background:#F2EDD6;}


/* PRICING STRIP */
.pricing-strip{background:var(--bg-light);padding:5rem 5vw;}
.ps-title{font-family:var(--display);font-size: clamp(2.8rem, 4.5vw, 4rem);color:var(--bg-raised);margin-bottom:0.5rem;}
.ps-sub{font-size:0.9rem;font-weight:300;color:rgba(40,58,88,0.6);margin-bottom:3rem;max-width:500px;line-height:1.8;}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.pricing-card{background:white;border-radius:4px;padding:2.5rem 2rem;border-bottom:3px solid transparent;transition:transform .3s,border-color .3s;}
.pricing-card:hover{transform:translateY(-4px);}
.pricing-card:nth-child(1):hover{border-color:var(--azure);}
.pricing-card:nth-child(2):hover{border-color:var(--pistachio);}
.pricing-card:nth-child(2){background:var(--bg-raised);color:var(--text-primary);}
.pricing-card:nth-child(3):hover{border-color:var(--orchid);}
.pc-name{font-size: 0.9rem;font-weight:600;letter-spacing:0.25em;text-transform:uppercase;color:var(--pistachio);margin-bottom:0.75rem;}
.pricing-card:nth-child(2) .pc-name{color:var(--pistachio-l);}
.pc-price{font-family:var(--display);font-size:2.5rem;font-weight:400;color:var(--bg-raised);margin-bottom:0.4rem;line-height:1;}
.pricing-card:nth-child(2) .pc-price{color:var(--text-primary);}
.pc-period{font-size: 1rem;font-weight:300;color:rgba(40,58,88,0.5);margin-bottom:1.5rem;}
.pricing-card:nth-child(2) .pc-period{color:var(--text-secondary);}
.pc-desc{font-size: 1rem;font-weight:300;line-height:1.8;color:rgba(40,58,88,0.65);margin-bottom:1.5rem;}
.pricing-card:nth-child(2) .pc-desc{color:var(--text-secondary);}
.pc-features{display:flex;flex-direction:column;gap:0.6rem;margin-bottom:2rem;}
.pc-feat{display:flex;align-items:center;gap:0.6rem;font-size:0.8rem;font-weight:300;color:rgba(40,58,88,0.75);}
.pricing-card:nth-child(2) .pc-feat{color:var(--text-secondary);}
.pc-feat::before{content:'✓';color:var(--pistachio);font-weight:600;font-size: 1rem;flex-shrink:0;}
.pc-btn{display:block;text-align:center;font-size: 0.95rem;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;padding:0.85rem;border-radius:2px;text-decoration:none;transition:background .25s,color .25s;}
.pricing-card:nth-child(1) .pc-btn,.pricing-card:nth-child(3) .pc-btn{background:var(--bg-raised);color:var(--text-primary);}
.pricing-card:nth-child(1) .pc-btn:hover,.pricing-card:nth-child(3) .pc-btn:hover{background:var(--pistachio);color:var(--bg);}
.pricing-card:nth-child(2) .pc-btn{background:var(--orchid);color:#1a2035;}
.pricing-card:nth-child(2) .pc-btn:hover{background:var(--peach);}
.pricing-note{font-size: 1rem;font-weight:300;color:rgba(40,58,88,0.5);margin-top:1.5rem;text-align:center;}

/* CTA STRIP */
.cta-strip{background:var(--bg);padding:6rem 5vw;text-align:center;position:relative;overflow:hidden;}
.cta-strip::before{content:'KLAAR';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--display);font-size:22vw;color:rgba(242,237,214,0.025);pointer-events:none;white-space:nowrap;letter-spacing:0.15em;}
.cs-label{font-size: 0.9rem;font-weight:600;letter-spacing:0.3em;text-transform:uppercase;color:var(--orchid);display:flex;align-items:center;justify-content:center;gap:0.9rem;margin-bottom:1.5rem;}
.cs-label::before{content:'';width:22px;height:1px;background:var(--orchid);}
.cs-title{font-family:var(--display);font-size:clamp(2.2rem,4vw,4rem);font-weight:400;color:var(--text-primary);max-width:650px;margin:0 auto 1.5rem;line-height:1.2;}
.cs-title i{font-style:italic;color:var(--peach);}
.cs-sub{font-size: 1rem;font-weight:300;color:var(--text-secondary);max-width:420px;margin:0 auto 2.5rem;line-height:1.85;}
.cs-btn{display:inline-flex;align-items:center;gap:0.6rem;font-size: 1.05rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:#1a2035;background:var(--orchid);padding:1.05rem 2.5rem;border-radius:2px;text-decoration:none;transition:background .25s,transform .2s;}
.cs-btn:hover{background:var(--peach);transform:translateY(-2px);}


@media (max-width: 860px) {
  
  
}
@media (max-width: 540px) {
  
}

@media(max-width:860px){
  nav ul .hide-mob{display:none;}
  .ss-grid,.ss-grid.flip{grid-template-columns:1fr;direction:ltr;}
  .pricing-grid{grid-template-columns:1fr;}
  body{cursor:auto;}
  #cur,#cur-ring{display:none;}
}

@keyframes up { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }


.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; }


.footer-
.footer-
.footer-
.footer-icons { display: flex; gap: 0.6rem; }
.footer-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid rgba(92,142,125,0.18); border-radius: 3px; color: var(--text-tertiary); text-decoration: none; transition: border-color .25s, color .25s; }
.footer-icon:hover { border-color: var(--pistachio); color: var(--pistachio-l); }
.footer-icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }



.page-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2rem; }
.hero-text { max-width: 100%; }
.hero-graphic { width: 100%; height: 420px; display: flex; align-items: center; justify-content: center; opacity: 0; animation: heroGraphicIn 1s ease forwards 0.5s; }
@keyframes heroGraphicIn { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
@media (max-width: 860px) { .page-hero { grid-template-columns: 1fr; } .hero-graphic { height: 280px; } }



@media (max-width: 860px) {
  .ss-grid { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .ss-grid.flip { direction: ltr !important; }
  .page-hero { padding: 8rem 5vw 3.5rem !important; }
  nav ul li:not(:last-child) { display: none !important; }
  body { cursor: auto !important; }
  #cur, #cur-ring { display: none !important; }
}
@media (max-width: 540px) {
  .ss-title { font-size: clamp(2rem, 8vw, 2.8rem) !important; }
  .ph-title { font-size: clamp(2.2rem, 8vw, 3.5rem) !important; }
  
  
}



/* ── SCROLL TO TOP ── */
.scroll-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  background: rgba(92,142,125,0.15);
  border: 1px solid rgba(92,142,125,0.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--pistachio-l);
  font-size: 1rem;
  text-decoration: none;
  transition: background .25s, border-color .25s, transform .25s;
  z-index: 100;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s, transform .3s, background .25s;
}
.scroll-top.visible { opacity: 1; transform: translateY(0); }
.scroll-top:hover { background: rgba(92,142,125,0.3); border-color: var(--pistachio); }



/* === FROM SERVICES BODY === */

        .bar-1 { animation: growBar1 1.5s cubic-bezier(0.16,1,0.3,1) forwards 0.2s; opacity:0; }
        .bar-2 { animation: growBar2 1.5s cubic-bezier(0.16,1,0.3,1) forwards 0.4s; opacity:0; }
        .bar-3 { animation: growBar3 1.5s cubic-bezier(0.16,1,0.3,1) forwards 0.6s; opacity:0; }
        .bar-4 { animation: growBar4 1.5s cubic-bezier(0.16,1,0.3,1) forwards 0.8s; opacity:0; }
        .bar-5 { animation: growBar5 1.5s cubic-bezier(0.16,1,0.3,1) forwards 1.0s; opacity:0; }
        .bar-6 { animation: growBar6 1.5s cubic-bezier(0.16,1,0.3,1) forwards 1.2s; opacity:0; }
        @keyframes growBar1 { from { opacity:1; transform:scaleY(0); transform-origin:75px 380px; }  to { opacity:1; transform:scaleY(1); transform-origin:75px 380px; } }
        @keyframes growBar2 { from { opacity:1; transform:scaleY(0); transform-origin:135px 380px; } to { opacity:1; transform:scaleY(1); transform-origin:135px 380px; } }
        @keyframes growBar3 { from { opacity:1; transform:scaleY(0); transform-origin:195px 380px; } to { opacity:1; transform:scaleY(1); transform-origin:195px 380px; } }
        @keyframes growBar4 { from { opacity:1; transform:scaleY(0); transform-origin:255px 380px; } to { opacity:1; transform:scaleY(1); transform-origin:255px 380px; } }
        @keyframes growBar5 { from { opacity:1; transform:scaleY(0); transform-origin:315px 380px; } to { opacity:1; transform:scaleY(1); transform-origin:315px 380px; } }
        @keyframes growBar6 { from { opacity:1; transform:scaleY(0); transform-origin:375px 380px; } to { opacity:1; transform:scaleY(1); transform-origin:375px 380px; } }
        .dot-pop { animation: popIn 0.4s cubic-bezier(0.16,1,0.3,1) forwards; transform: scale(0); }
        .dp1 { animation-delay: 1.8s; }
        .dp2 { animation-delay: 1.9s; }
        .dp3 { animation-delay: 2.0s; }
        .dp4 { animation-delay: 2.1s; }
        .dp5 { animation-delay: 2.2s; }
        .dp6 { animation-delay: 2.3s; }
        @keyframes popIn { to { transform: scale(1); } }
        .trend-line { stroke-dasharray: 400; stroke-dashoffset: 400; animation: drawLine 1.2s ease forwards 2.2s; }
        @keyframes drawLine { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
        .float-label { animation: fadeUpIn 0.6s ease forwards; opacity: 0; }
        .fl1 { animation-delay: 2.5s; }
        .fl2 { animation-delay: 2.7s; }
        @keyframes fadeUpIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
        .shimmer { animation: shimmerMove 3s ease-in-out infinite 3s; }
        @keyframes shimmerMove { 0%,100% { opacity:0.5; } 50% { opacity:1; } }
      
@media(max-width:860px){}
@media(max-width:540px){}


/* ── NAV ── */
nav{position:fixed;inset:0 0 auto 0;z-index:200;padding:2rem 5vw;display:flex;align-items:center;justify-content:space-between;background:rgba(30,46,71,0.97);backdrop-filter:blur(20px);border-bottom:1px solid rgba(92,142,125,0.15);}
nav.stuck{padding:1.25rem 5vw;}
.logo{font-family:'Cormorant Garamond','DM Serif Display',Georgia,serif !important;font-size:1.75rem !important;font-weight:600 !important;font-style:normal !important;letter-spacing:0.28em !important;text-transform:uppercase !important;color:#FFFFFF !important;text-decoration:none !important;opacity:1 !important;}
.logo-dot{color:#FFFFFF;letter-spacing:0;font-weight:600;}
nav ul{list-style:none;display:flex;gap:2.5rem;align-items:center;}
nav a{font-family:var(--body);font-size:0.95rem;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-secondary);text-decoration:none;transition:color .25s;}
nav a:hover,nav a.active{color:var(--pistachio-l);}
.nav-btn{font-size:0.82rem !important;font-weight:600 !important;letter-spacing:0.14em !important;color:#1a2035 !important;background:#F5B896 !important;padding:0.65rem 1.6rem;border-radius:2px;transition:background .25s !important;}
.nav-btn:hover{background:#f9cbb5 !important;color:#1a2035 !important;}
/* ── FOOTER ── */
footer{background:#0d1825;border-top:1px solid rgba(92,142,125,0.12);}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1.4fr 1fr;gap:3rem;padding:4rem 5vw 3rem;border-bottom:1px solid rgba(242,237,214,0.05);}
.footer-logo{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.3rem;font-weight:500;letter-spacing:0.28em;text-transform:uppercase;color:#F2EDD6;text-decoration:none;display:block;margin-bottom:0.75rem;}
.footer-logo .dot{color:var(--orchid);letter-spacing:0;}
.footer-tagline{font-size:0.85rem;font-weight:300;color:var(--text-tertiary);line-height:1.7;margin-bottom:0.6rem;}
.footer-email a{font-size:0.88rem;color:var(--azure);text-decoration:none;transition:color .25s;}
.footer-email a:hover{color:var(--azure-l);}
.footer-col-title{font-size:0.72rem;font-weight:600;letter-spacing:0.28em;text-transform:uppercase;color:var(--pistachio-l);margin-bottom:1.25rem;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:0.65rem;}
.footer-col ul a{font-size:0.92rem;font-weight:300;color:var(--text-secondary);text-decoration:none;transition:color .25s;font-family:var(--body);}
.footer-col ul a:hover{color:var(--text-primary);}
.footer-social-icons{display:flex;gap:0.6rem;flex-wrap:wrap;}
.footer-social-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid rgba(92,142,125,0.22);border-radius:3px;color:var(--text-secondary);text-decoration:none;transition:border-color .25s,color .25s,background .25s;}
.footer-social-link:hover{border-color:var(--pistachio);color:var(--pistachio-l);background:rgba(92,142,125,0.08);}
.footer-social-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.footer-bottom{padding:1.5rem 5vw;display:flex;justify-content:center;}
.footer-copy{font-size:0.72rem;color:var(--text-tertiary);}
@media(max-width:860px){.footer-top{grid-template-columns:1fr 1fr;gap:2rem;}}
@media(max-width:540px){.footer-top{grid-template-columns:1fr;}}


/* === FROM CONTACT HEAD === */


/*
  DESIGN SYSTEM — KLAAR V3
  Philosophy: Calm authority. One dominant dark. Accents used sparingly with intent.
  Font: DM Serif Display (display headlines only) + Figtree (everything else — one clean sans)
  Palette E used as: Pistachio = primary accent | Azure = links/hover | Orchid = CTA warm | Peach = secondary warm | Matcha = subtle fills
*/
:root {
  /* Foundation */
  --bg:          #283A58;
  --bg-raised:   #1e2e47;
  --bg-card:     #172439;
  --bg-light:    #F7F4E9;   /* cream — light sections */

  /* Palette E accents */
  --pistachio:   #5C8E7D;
  --pistachio-l: #84b3a3;
  --matcha:      #8F9F7D;
  --matcha-l:    #b0c29e;
  --azure:       #89B3CF;
  --azure-l:     #b2cfe0;
  --orchid:      #F2899A;
  --orchid-l:    #f9b3be;
  --peach:       #F5B896;
  --peach-l:     #f9cbb5;

  /* Text */
  --text-primary:  #F2EDD6;
  --text-secondary: rgba(242,237,214,0.78);
  --text-tertiary:  rgba(242,237,214,0.48);

  /* On light bg */
  --text-dark:   #283A58;
  --text-dark-2: rgba(40,58,88,0.6);

  /* Type */
  --display: 'DM Serif Display', Georgia, serif;
  --body:    'Figtree', system-ui, sans-serif;

  /* Spacing rhythm */
  --section: 8rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--text-primary);
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}

/* ─── CURSOR ─── */
#cur {
  position: fixed; width: 6px; height: 6px;
  background: var(--text-primary);
  border-radius: 50%;
  top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .25s, height .25s, opacity .25s;
}
#cur-ring {
  position: fixed; width: 28px; height: 28px;
  border: 1px solid rgba(242,237,214,0.4);
  border-radius: 50%;
  top: 0; left: 0;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
}
body:has(a:hover) #cur,
body:has(button:hover) #cur { width: 12px; height: 12px; background: var(--orchid); }
body:has(a:hover) #cur-ring,
body:has(button:hover) #cur-ring { width: 44px; height: 44px; border-color: rgba(242,137,154,0.35); }

/* ─── NAV ─── */










/* ─── HERO ─── */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 8rem 5vw 4rem;
  position: relative;
  overflow: hidden;
}

/* Mouse-tracking spotlight */
.hero-spotlight {
  position: absolute; width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(137,179,207,0.06) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
  transform: translate(-50%,-50%);
  transition: left .8s ease, top .8s ease;
}

/* Big ambient KLAAR watermark */
.hero-watermark {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 400;
  font-size: 28vw; letter-spacing: 0.05em;
  color: rgba(137,179,207,0.028);
  pointer-events: none; user-select: none;
  animation: breathe 7s ease-in-out infinite;
}

/* Orbs */
.hero-orb {
  position: absolute; border-radius: 50%;
  pointer-events: none; filter: blur(90px);
}
.hero-orb-1 {
  width: 45vw; height: 45vw; max-width: 600px; max-height: 600px;
  background: radial-gradient(circle, rgba(92,142,125,0.09) 0%, transparent 70%);
  right: -10vw; top: -5vw;
}
.hero-orb-2 {
  width: 30vw; height: 30vw; max-width: 400px; max-height: 400px;
  background: radial-gradient(circle, rgba(242,137,154,0.07) 0%, transparent 70%);
  right: 15vw; bottom: 5vw;
}

.hero-inner { position: relative; z-index: 1; }

.hero-label {
  font-size: 0.9rem; font-weight: 500; letter-spacing: 0.35em;
  text-transform: uppercase; color: var(--pistachio);
  display: flex; align-items: center; gap: 0.9rem;
  margin-bottom: 3rem;
  opacity: 0; animation: up .7s ease forwards .1s;
}
.hero-label::before { content: ''; width: 24px; height: 1px; background: var(--pistachio); flex-shrink: 0; }


/* Hero headline wrap */
.hero-headline-wrap { width: 100%; }
.hero-headline { width: 100%; }

/* Kinetic headline — each line slides in from a different direction */
.hero-headline { margin-bottom: 3rem; }

.hl-row {
  display: flex; align-items: baseline;
  overflow: hidden;
  line-height: 1.0;
}
.hl-row + .hl-row { margin-top: -0.05em; }

.hl-static {
  font-family: var(--display);
  font-size: clamp(5rem, 10.5vw, 12rem);
  font-weight: 400;
  color: var(--text-primary);
  opacity: 0;
  display: inline-block;
  white-space: nowrap;
}
.hl-row:nth-child(1) .hl-static { animation: slideRight .9s cubic-bezier(0.16,1,0.3,1) forwards .2s; }
.hl-row:nth-child(2) .hl-static { animation: slideRight .9s cubic-bezier(0.16,1,0.3,1) forwards .4s; }
.hl-row:nth-child(3) .hl-static { animation: slideRight .9s cubic-bezier(0.16,1,0.3,1) forwards .6s; }

.hl-accent {
  font-family: var(--display); font-style: italic;
  font-size: clamp(5rem, 10.5vw, 12rem);
  font-weight: 400;
  margin-left: 0.2em;
  opacity: 0;
  display: inline-block;
  white-space: nowrap;
}
.hl-row:nth-child(1) .hl-accent {
  animation: slideLeft .9s cubic-bezier(0.16,1,0.3,1) forwards .35s;
  background: linear-gradient(90deg, var(--pistachio-l) 0%, #d4f0e4 40%, var(--pistachio-l) 60%, #a8d4bc 100%);
  background-size: 250% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: slideLeft .9s cubic-bezier(0.16,1,0.3,1) forwards .35s, shimmer 3.5s linear infinite 1.5s;
}
.hl-row:nth-child(2) .hl-accent {
  background: linear-gradient(90deg, var(--azure-l) 0%, #e8f4ff 40%, var(--azure-l) 60%, #89B3CF 100%);
  background-size: 250% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: slideLeft .9s cubic-bezier(0.16,1,0.3,1) forwards .55s, shimmer 3.5s linear infinite 1.8s;
}
.hl-row:nth-child(3) .hl-accent {
  background: linear-gradient(90deg, var(--peach) 0%, #ffe8d6 40%, var(--peach) 60%, #e8956a 100%);
  background-size: 250% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: slideLeft .9s cubic-bezier(0.16,1,0.3,1) forwards .75s, shimmer 3.5s linear infinite 2.1s;
}
@keyframes shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* pill tags next to each headline word */
.hl-pill { display: none; }

/* Bottom row: desc + promise card side by side */
.hero-bottom {
  display: grid; grid-template-columns: 1fr 400px;
  gap: 3rem; align-items: end;
  border-top: 1px solid rgba(242,237,214,0.08);
  padding-top: 2rem; margin-top: 2rem;
  opacity: 0; animation: up .8s ease forwards 1s;
}
.hero-desc {
  font-size: 1.05rem; font-weight: 300; line-height: 1.9;
  color: var(--text-secondary); max-width: 480px;
}
.hero-actions {
  display: flex; gap: 1rem; align-items: center; margin-top: 2rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--body); font-size: 1.05rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.95rem 2rem; border-radius: 2px;
  text-decoration: none; cursor: none;
  transition: background .25s, color .25s, transform .2s, border-color .25s;
}
.btn-fill { background: var(--orchid); color: #1a2035; border: 1.5px solid var(--orchid); }
.btn-fill:hover { background: var(--peach); border-color: var(--peach); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--text-secondary); border: 1.5px solid rgba(242,237,214,0.2); }
.btn-outline:hover { border-color: rgba(242,237,214,0.5); color: var(--text-primary); }

/* Promise card — larger, anchored bottom-right */
.promise-card {
  background: rgba(22,36,58,0.92);
  border: 1px solid rgba(137,179,207,0.18);
  border-radius: 10px;
  padding: 2.75rem 3rem 3rem;
  width: 100%;
  backdrop-filter: blur(16px);
  box-shadow: 0 32px 64px rgba(0,0,0,0.25), 0 0 0 1px rgba(137,179,207,0.06);
  position: relative; overflow: hidden;
  align-self: end;
}
.promise-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--pistachio), var(--azure), var(--orchid), var(--peach));
}
.pc-label {
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--pistachio);
  margin-bottom: 1.25rem;
}
.pc-headline {
  font-family: var(--display);
  font-size: 3.8rem; font-weight: 400; line-height: 1.0;
  color: var(--text-primary);
  margin-bottom: 1.75rem;
}
.pc-divider {
  height: 1px;
  background: rgba(137,179,207,0.12);
  margin-bottom: 1.5rem;
}
.pc-sub {
  display: flex; flex-direction: column; gap: 0.65rem;
}
.pc-sub-item {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 1.05rem; font-weight: 400; letter-spacing: 0.05em;
  color: var(--text-secondary);
}
.pc-sub-item::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  flex-shrink: 0;
}
.pc-sub-item:nth-child(1)::before { background: var(--pistachio); }
.pc-sub-item:nth-child(2)::before { background: var(--azure); }
.pc-sub-item:nth-child(3)::before { background: var(--orchid); }
.pc-sub-item:nth-child(4)::before { background: var(--peach); }

/* Scroll cue */
.hero-scroll {
  position: absolute; bottom: 2.5rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  opacity: 0; animation: up .6s ease forwards 1.6s;
  z-index: 1;
}
.hero-scroll span {
  font-size: 0.9rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.scroll-chevron {
  width: 20px; height: 20px;
  border-right: 1px solid rgba(242,237,214,0.2);
  border-bottom: 1px solid rgba(242,237,214,0.2);
  transform: rotate(45deg);
  animation: bob 2s ease-in-out infinite 2s;
}
@keyframes bob { 0%,100% { transform: rotate(45deg) translateY(0); } 50% { transform: rotate(45deg) translateY(4px); } }
@keyframes slideRight { from { opacity:0; transform: translateX(-40px); } to { opacity:1; transform: translateX(0); } }
@keyframes slideLeft  { from { opacity:0; transform: translateX(40px);  } to { opacity:1; transform: translateX(0); } }
@keyframes fadeIn     { from { opacity:0; }                               to { opacity:1; } }

/* ─── MARQUEE ─── */
.marquee {
  border-top: 1px solid rgba(92,142,125,0.12);
  border-bottom: 1px solid rgba(92,142,125,0.12);
  background: rgba(0,0,0,0.15);
  padding: 0.95rem 0; overflow: hidden;
}
.marquee-inner {
  display: flex; gap: 0;
  animation: scroll 35s linear infinite;
  width: max-content;
}
.m-item {
  display: flex; align-items: center;
  font-size: 0.9rem; font-weight: 500; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--text-tertiary);
  padding: 0 2.5rem;
  white-space: nowrap;
}
.m-item::after {
  content: ''; width: 3px; height: 3px; border-radius: 50%;
  background: var(--pistachio); opacity: 0.5;
  margin-left: 2.5rem;
}

/* ─── SECTION BASE ─── */
.sec { padding: var(--section) 5vw; position: relative; }
.sec-label {
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--pistachio-l);
  display: flex; align-items: center; gap: 0.9rem;
  margin-bottom: 1.5rem;
}
.sec-label::before { content: ''; width: 22px; height: 1px; background: var(--pistachio); }
.sec-title {
  font-family: var(--display);
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 400; line-height: 1.15;
  color: var(--text-primary);
}
.sec-title i { font-style: italic; color: var(--pistachio-l); }

/* ─── ABOUT ─── */
.about { background: var(--bg-raised); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3vw; align-items: center; }
.about-body {
  font-size: 1.05rem; font-weight: 300; line-height: 1.95;
  color: var(--text-secondary); margin-top: 1.75rem;
}
.about-body p + p { margin-top: 1rem; }


/* ─── SERVICES ─── */
.services { background: var(--bg); }
.svc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 4rem;
  outline: 1px solid rgba(92,142,125,0.1);
}
.svc-card {
  padding: 2.5rem 2.25rem;
  border-right: 1px solid rgba(92,142,125,0.1);
  border-bottom: 1px solid rgba(92,142,125,0.1);
  position: relative; overflow: hidden;
  transition: background .35s;
}
.svc-card:nth-child(3n) { border-right: none; }
.svc-card:nth-last-child(-n+3) { border-bottom: none; }
.svc-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--pistachio);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s ease;
}
.svc-card:hover { background: var(--bg-raised); }
.svc-card:hover::after { transform: scaleX(1); }

.svc-n {
  font-family: var(--display); font-style: italic;
  font-size: 0.8rem; color: var(--pistachio); opacity: 0.6;
  display: block; margin-bottom: 1.25rem;
}
.svc-title {
  font-size: 1.05rem; font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4; margin-bottom: 0.75rem;
}
.svc-desc {
  font-size: 1.05rem; font-weight: 300; line-height: 1.85;
  color: var(--text-secondary);
}
.svc-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.5rem; }
.svc-tag {
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azure); opacity: 0.8;
  border: 1px solid rgba(137,179,207,0.25);
  padding: 0.2rem 0.6rem; border-radius: 2px;
}

/* ─── WHY ─── */
.why { background: var(--bg-light); }
.why .sec-label { color: var(--pistachio-l); }
.why .sec-label::before { background: var(--pistachio); }
.why .sec-title { color: var(--text-dark); }
.why .sec-title i { color: var(--pistachio); }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 4rem; }

.why-card {
  padding: 2.5rem 2.25rem;
  border-radius: 3px;
  position: relative;
  transition: transform .3s;
}
.why-card:hover { transform: translateY(-4px); }
.why-card:nth-child(1) { background: var(--bg); }
.why-card:nth-child(2) { background: #1e2e47; }
.why-card:nth-child(3) { background: var(--bg-raised); }

.why-n {
  font-family: var(--display); font-style: italic;
  font-size: 3rem; line-height: 1;
  margin-bottom: 1.25rem; display: block;
  opacity: 0.2;
}
.why-card:nth-child(1) .why-n { color: var(--azure); }
.why-card:nth-child(2) .why-n { color: var(--pistachio-l); opacity: 0.2; }
.why-card:nth-child(3) .why-n { color: var(--peach); }

.why-title {
  font-size: 1.05rem; font-weight: 600;
  line-height: 1.4; margin-bottom: 0.75rem;
}
.why-card:nth-child(1) .why-title { color: var(--azure-l); }
.why-card:nth-child(2) .why-title { color: var(--pistachio-l); }
.why-card:nth-child(3) .why-title { color: var(--peach-l); }

.why-desc {
  font-size: 1.05rem; font-weight: 300; line-height: 1.85;
}
.why-card:nth-child(1) .why-desc { color: var(--text-secondary); }
.why-card:nth-child(2) .why-desc { color: var(--text-secondary); }
.why-card:nth-child(3) .why-desc { color: var(--text-secondary); }


/* ─── LIVING CANVAS ─── */
.canvas-section {
  position: relative;
  height: 620px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: none;
}
.canvas-bg {
  position: absolute; inset: 0;
  z-index: 0; width: 100%; height: 100%; overflow: hidden;
}
#paintCanvas {
  position: absolute; top: 0; left: 0;
  width: 100% !important; height: 100% !important;
  display: block;
}
.canvas-overlay {
  position: absolute; inset: 0;
  background: rgba(22,36,58,0.18);
  z-index: 1;
}
.canvas-content {
  position: relative; z-index: 2;
  text-align: center;
  padding: 4rem 5vw;
  display: flex; flex-direction: column; align-items: center;
}
.canvas-eyebrow {
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.35em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
  margin-bottom: 2rem;
  opacity: 0; transform: translateY(12px);
  transition: opacity .8s ease, transform .8s ease;
}
.canvas-eyebrow.in { opacity: 1; transform: none; }

.canvas-motto {
  font-family: 'Caveat', cursive;
  font-size: clamp(4rem, 9vw, 9rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-shadow: 0 4px 40px rgba(0,0,0,0.35);
  /* SVG stroke draw-on effect via clip-path animation */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s cubic-bezier(0.16,1,0.3,1);
}
.canvas-motto.in { clip-path: inset(0 0% 0 0); }

.canvas-sub {
  font-family: var(--body);
  font-size: 1.05rem; font-weight: 300;
  color: rgba(255,255,255,0.75);
  margin-top: 1.75rem; letter-spacing: 0.04em;
  max-width: 480px; line-height: 1.7;
  opacity: 0; transform: translateY(16px);
  transition: opacity .9s ease .6s, transform .9s ease .6s;
}
.canvas-sub.in { opacity: 1; transform: none; }

.canvas-cta {
  margin-top: 2.5rem;
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--body); font-size: 1.05rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  border: 1.5px solid rgba(255,255,255,0.35);
  padding: 0.9rem 2rem; border-radius: 2px;
  text-decoration: none; cursor: none;
  opacity: 0; transform: translateY(12px);
  transition: opacity .8s ease .9s, transform .8s ease .9s, border-color .25s, background .25s;
}
.canvas-cta.in { opacity: 1; transform: none; }
.canvas-cta:hover { border-color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.08); }

/* ─── PROCESS — staggered zigzag layout ─── */
.process { background: var(--bg-raised); overflow: hidden; }
.process .sec-label { color: var(--pistachio-l); }
.process .sec-label::before { background: var(--pistachio); }
.process .sec-title { color: var(--text-primary); }
.process .sec-title i { color: var(--pistachio-l); }
.process-steps { margin-top: 5rem; display: flex; flex-direction: column; gap: 0; }
.ps-row { display: grid; grid-template-columns: 1fr 80px 1fr; align-items: center; min-height: 180px; }
.ps-row:nth-child(even) { direction: rtl; }
.ps-row:nth-child(even) > * { direction: ltr; }
.ps-card { padding: 2.5rem 3rem; border-radius: 4px; position: relative; transition: transform .3s; overflow: hidden; }
.ps-card:hover { transform: translateY(-3px); }
.ps-row:nth-child(1) .ps-card { background: rgba(137,179,207,0.07); border: 1px solid rgba(137,179,207,0.12); }
.ps-row:nth-child(2) .ps-card { background: rgba(242,137,154,0.07); border: 1px solid rgba(242,137,154,0.12); }
.ps-row:nth-child(3) .ps-card { background: rgba(92,142,125,0.07); border: 1px solid rgba(92,142,125,0.2); }
.ps-row:nth-child(4) .ps-card { background: rgba(245,184,150,0.07); border: 1px solid rgba(245,184,150,0.12); }
.ps-big-num { display: none; }
.ps-row:nth-child(1) .ps-big-num { color: var(--azure); }
.ps-row:nth-child(2) .ps-big-num { color: var(--orchid); }
.ps-row:nth-child(3) .ps-big-num { color: var(--pistachio); }
.ps-row:nth-child(4) .ps-big-num { color: var(--peach); }
.ps-step-label { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: 0.75rem; display: block; }
.ps-row:nth-child(1) .ps-step-label { color: var(--azure); }
.ps-row:nth-child(2) .ps-step-label { color: var(--orchid); }
.ps-row:nth-child(3) .ps-step-label { color: var(--pistachio-l); }
.ps-row:nth-child(4) .ps-step-label { color: var(--peach); }
.ps-title { font-family: var(--display); font-size: 1.7rem; font-weight: 400; line-height: 1.2; color: var(--text-primary); margin-bottom: 0.75rem; }
.ps-desc { font-size: 1.05rem; font-weight: 300; line-height: 1.85; color: var(--text-secondary); max-width: 360px; }
.ps-connector { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 0; position: relative; padding: 1rem 0; }
.ps-connector-line { width: 1px; flex: 1; background: linear-gradient(to bottom, transparent, rgba(137,179,207,0.2), transparent); min-height: 30px; }
.ps-connector-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; border: 2px solid; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
.ps-connector-dot::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.ps-row:nth-child(1) .ps-connector-dot { border-color: var(--azure); color: var(--azure); }
.ps-row:nth-child(2) .ps-connector-dot { border-color: var(--orchid); color: var(--orchid); }
.ps-row:nth-child(3) .ps-connector-dot { border-color: var(--pistachio-l); color: var(--pistachio-l); }
.ps-row:nth-child(4) .ps-connector-dot { border-color: var(--peach); color: var(--peach); }
.ps-empty { display: flex; align-items: center; justify-content: center; padding: 2rem; }
.ps-empty-num { display: none; }
.section-divider { height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(137,179,207,0.2) 20%, rgba(242,137,154,0.3) 50%, rgba(137,179,207,0.2) 80%, transparent 100%); margin: 0; }

/* ─── CASE STUDIES ─── */
.cases { background: var(--bg); }
.cases-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 4rem; }
.case-card {
  display: flex; flex-direction: column;
  border: 1px solid rgba(137,179,207,0.12);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  transition: border-color .35s, transform .3s;
}
.case-card:hover { border-color: rgba(242,137,154,0.25); transform: translateY(-3px); }

/* top content area */
.case-body {
  padding: 2.5rem 2.5rem 2rem;
  flex: 1;
  position: relative;
}
.case-body::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--orchid), var(--peach));
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s ease;
}
.case-card:hover .case-body::after { transform: scaleX(1); }

.case-tag {
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--orchid);
  display: block; margin-bottom: 1.25rem;
}
.case-title {
  font-family: var(--display); font-size: 1.5rem;
  font-weight: 400; line-height: 1.3;
  color: var(--text-primary); margin-bottom: 1rem;
}
.case-desc {
  font-size: 1.05rem; font-weight: 300; line-height: 1.85;
  color: var(--text-secondary);
}

/* metrics strip — always pinned to bottom */
.case-metrics {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--bg-raised);
  border-top: 1px solid rgba(137,179,207,0.1);
  margin-top: auto;
}
.cm-item {
  padding: 1.5rem 2rem;
  position: relative;
}
.cm-item:first-child {
  border-right: 1px solid rgba(137,179,207,0.1);
}
.cm-num {
  font-family: var(--display); font-style: italic;
  font-size: 2.6rem; line-height: 1;
  background: linear-gradient(135deg, var(--azure-l), var(--pistachio-l));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block; margin-bottom: 0.5rem;
}
.cm-label {
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-tertiary);
}

/* ─── CONTACT ─── */
.contact {
  background: var(--bg-raised);
  text-align: center;
  padding: var(--section) 5vw;
  position: relative; overflow: hidden;
}
.contact-bg-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 22vw; font-weight: 400;
  color: rgba(242,237,214,0.025); letter-spacing: 0.12em;
  white-space: nowrap; pointer-events: none; user-select: none;
  animation: breathe 8s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.03); opacity: 0.7; }
}
.contact .sec-label { justify-content: center; color: var(--orchid); }
.contact .sec-label::before { background: var(--orchid); }
.contact-title {
  font-family: var(--display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 400; line-height: 1.2;
  color: var(--text-primary); margin: 1.5rem auto;
  max-width: 680px;
}
.contact-title i { font-style: italic; color: var(--peach); }
.contact-sub {
  font-size: 1.05rem; font-weight: 300; line-height: 1.9;
  color: var(--text-secondary); max-width: 420px;
  margin: 0 auto 3rem;
}
.contact-form {
  display: flex; max-width: 460px; margin: 0 auto;
}
.contact-form input {
  flex: 1;
  font-family: var(--body); font-size: 1.05rem; font-weight: 300;
  background: rgba(242,237,214,0.05);
  border: 1px solid rgba(92,142,125,0.25);
  border-right: none;
  color: var(--text-primary);
  padding: 1rem 1.25rem;
  outline: none;
  transition: border-color .3s;
  border-radius: 2px 0 0 2px;
}
.contact-form input::placeholder { color: var(--text-tertiary); }
.contact-form input:focus { border-color: var(--pistachio); }
.contact-form button {
  font-family: var(--body); font-size: 0.95rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--orchid); color: #1a2035;
  border: 1px solid var(--orchid);
  padding: 1rem 1.75rem; cursor: none; white-space: nowrap;
  transition: background .3s, border-color .3s;
  border-radius: 0 2px 2px 0;
}
.contact-form button:hover { background: var(--peach); border-color: var(--peach); }
.contact-alt {
  margin-top: 1.75rem;
  font-size: 1.05rem; font-weight: 300;
  color: var(--text-tertiary);
}
.contact-alt a {
  color: var(--azure); text-decoration: none;
  transition: color .25s;
}
.contact-alt a:hover { color: var(--azure-l); }

/* ─── FOOTER ─── */







/* Social icons */

.social-links { display: flex; gap: 0.75rem; }
.social-link {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(92,142,125,0.2);
  border-radius: 3px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: border-color .25s, color .25s, background .25s;
}
.social-link:hover { border-color: var(--pistachio); color: var(--text-primary); background: rgba(92,142,125,0.1); }
.social-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }






/* ─── REVEAL ─── */
.r {
  opacity: 1; transform: none;
  transition: opacity .75s ease, transform .75s ease;
}
.r.animate-ready {
  opacity: 0; transform: translateY(30px);
}
.r.in { opacity: 1; transform: none; }
.r.d1 { transition-delay: .08s; }
.r.d2 { transition-delay: .16s; }
.r.d3 { transition-delay: .24s; }
.r.d4 { transition-delay: .32s; }

/* ─── ANIMATIONS ─── */
@keyframes up { to { opacity: 1; transform: translateY(0); } }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ─── MOBILE ─── */

@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Diagonal wave divider */
.wave-divider { position: relative; z-index: 2; line-height: 0; }

/* Quote divider strip */
.quote-strip {
  background: var(--bg-light);
  padding: 4rem 5vw;
  text-align: center;
  position: relative; overflow: hidden; z-index: 2;
}
.quote-strip::before {
  content: '"';
  position: absolute; left: 5vw; top: -1rem;
  font-family: var(--display); font-size: 12rem;
  color: rgba(40,58,88,0.06); line-height: 1;
  pointer-events: none;
}
.qs-text {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  color: var(--text-dark); line-height: 1.5;
  max-width: 700px; margin: 0 auto;
}
.qs-text em { color: var(--pistachio); font-style: normal; }
.qs-attr {
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--pistachio);
  margin-top: 1.5rem;
}

/* Number counter strip between why and canvas */
.counter-strip {
  background: var(--bg-raised);
  padding: 3rem 5vw;
  display: flex; justify-content: center; gap: 6rem;
  border-top: 1px solid rgba(92,142,125,0.1);
  position: relative; z-index: 2;
}
.counter-item { text-align: center; }
.counter-num {
  font-family: var(--display); font-size: 3.5rem; 
  line-height: 1; color: var(--orchid);
}
.counter-desc {
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--text-secondary);
  margin-top: 0.6rem;
  max-width: 140px;
  line-height: 1.6;
  text-transform: none;
  letter-spacing: 0;
}



@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.about-graphic svg { width: 100%; height: 100%; }

/* Moving graphic elements */
.ag-orbit1 { animation: agOrbit1 12s linear infinite; transform-origin: 240px 210px; }
.ag-orbit2 { animation: agOrbit2 18s linear infinite reverse; transform-origin: 240px 210px; }
.ag-orbit3 { animation: agOrbit3 25s linear infinite; transform-origin: 240px 210px; }
@keyframes agOrbit1 { to { transform: rotate(360deg); } }
@keyframes agOrbit2 { to { transform: rotate(360deg); } }
@keyframes agOrbit3 { to { transform: rotate(360deg); } }

.ag-float { animation: agFloat 5s ease-in-out infinite; }
.af1 { animation-delay: 0s; }
.af2 { animation-delay: 1s; }
.af3 { animation-delay: 2s; }
.af4 { animation-delay: 3s; }
@keyframes agFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.ag-pulse { animation: agPulse 3s ease-in-out infinite; }
.ap1 { animation-delay: 0s; }
.ap2 { animation-delay: 1s; }
.ap3 { animation-delay: 2s; }
@keyframes agPulse { 0%,100%{opacity:.3;r:4} 50%{opacity:1;r:6} }

.ag-draw { stroke-dasharray: 400; stroke-dashoffset: 400; animation: agDraw 2s ease forwards .6s; }
@keyframes agDraw { to { stroke-dashoffset: 0; } }

.ag-word { animation: agWord .6s ease forwards; opacity: 0; }
.aw1{animation-delay:.8s} .aw2{animation-delay:1.1s} .aw3{animation-delay:1.4s} .aw4{animation-delay:1.7s}
@keyframes agWord { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

.ag-beam { animation: agBeam 4s ease-in-out infinite; }
.ab1{animation-delay:0s} .ab2{animation-delay:1.3s} .ab3{animation-delay:2.6s}
@keyframes agBeam { 0%,100%{opacity:.15} 50%{opacity:.4} }


/* ── ABOUT GRAPHIC ── */
.about-graphic-wrap {
  width: 100%; height: 440px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; animation: heroGraphicIn 1s ease forwards 0.5s;
}
@keyframes heroGraphicIn { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }
.about-graphic-wrap svg { width: 100%; height: 100%; }
/* inner SVG animations */
.ab-o1 { animation: abo1  8s linear infinite;         transform-origin: 240px 220px; }
.ab-o2 { animation: abo1 13s linear infinite reverse; transform-origin: 240px 220px; }
.ab-o3 { animation: abo1 20s linear infinite;         transform-origin: 240px 220px; }
@keyframes abo1 { to { transform: rotate(360deg); } }
.ab-pulse { animation: abPulse 3s ease-in-out infinite; }
.abp1{animation-delay:0s} .abp2{animation-delay:1s} .abp3{animation-delay:2s}
@keyframes abPulse { 0%,100%{opacity:.35} 50%{opacity:1} }
.ab-f1 { animation: abFloat 6s ease-in-out infinite 0s; }
.ab-f2 { animation: abFloat 6s ease-in-out infinite 2s; }
.ab-f3 { animation: abFloat 6s ease-in-out infinite 4s; }
@keyframes abFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.ab-dash { stroke-dasharray:6 6; animation: abDash 3s linear infinite; }
@keyframes abDash { to { stroke-dashoffset: -100; } }


/* ── WHO WE ARE GRAPHIC ── */
.wwa-graphic-col {
  width: 100%;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ── MOBILE RESPONSIVE ── */
@media (max-width: 860px) {
  /* Nav */
  nav ul li:not(:last-child) { display: none; }
  

  /* Hero */
  .hero-layout { grid-template-columns: 1fr !important; }
  .hero-promise { display: none; }
  .hero-title { font-size: clamp(3rem,12vw,5rem) !important; }

  /* About */
  .about-grid { grid-template-columns: 1fr !important; gap: 3rem; }
  .wwa-graphic-col { min-height: 280px !important; }

  /* Services grid */
  .services-grid { grid-template-columns: 1fr !important; }

  /* Why cards */
  .why-grid { grid-template-columns: 1fr !important; }

  /* Stats */
  

  /* Counter strip */
  .counter-strip { flex-wrap: wrap; gap: 2rem; padding: 3rem 5vw; }
  .counter-num { font-size: 2.5rem !important; }

  /* Case studies */
  .cases-grid { grid-template-columns: 1fr !important; }
  .case-metrics { grid-template-columns: 1fr 1fr; }
  .cc-metrics { grid-template-columns: 1fr 1fr; }

  /* Contact */
  .contact-main { grid-template-columns: 1fr !important; }
  .contact-info { border-left: none !important; border-top: 1px solid rgba(92,142,125,0.15); }
  .form-row { grid-template-columns: 1fr !important; }

  /* Footer */
  
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .footer-

  /* Graphics */
  .team-divider { display: none; }
  .hero-graphic { height: 260px !important; }

  /* Page hero inner pages */
  .page-hero { grid-template-columns: 1fr !important; padding: 9rem 5vw 4rem; }
  .hero-graphic { display: none; }

  /* Typography */
  body { cursor: auto; }
  #cur, #cur-ring { display: none; }
}

@media (max-width: 540px) {
  
  
  .counter-strip { gap: 1.5rem; }
  .why-grid { grid-template-columns: 1fr !important; }
  .hero-actions { flex-direction: column; }
  .hero-actions a { width: 100%; text-align: center; justify-content: center; }
}


@media (max-width: 860px) {
  
}
@media (max-width: 540px) {
  
}


/* ── SERVICE TICKER ── */
.service-ticker {
  background: var(--bg);
  padding: 1.5rem 0;
  border-top: 1px solid rgba(92,142,125,0.08);
  border-bottom: 1px solid rgba(92,142,125,0.08);
  overflow: hidden;
  position: relative; z-index: 2;
  white-space: nowrap;
}
.service-ticker-track {
  display: flex;
  gap: 0;
  animation: tickerScroll 25s linear infinite;
  width: max-content;
  white-space: nowrap;
}
.service-ticker-track:hover { animation-play-state: paused; }
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 2rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
  cursor: default;
  transition: color .25s;
  flex-shrink: 0;
}
.ticker-item:hover { color: var(--pistachio-l); }
.ticker-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--pistachio);
  opacity: 0.5;
  flex-shrink: 0;
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ── STAT STRIP ── */
.stat-strip {
  background: var(--bg-raised);
  padding: 2rem 5vw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  border-top: 1px solid rgba(92,142,125,0.1);
  border-bottom: 1px solid rgba(92,142,125,0.1);
  position: relative; z-index: 2;
}
.stat-item { text-align: center; }
.stat-num {
  font-family: var(--display);
  font-style: italic;
  font-size: 2.4rem;
  line-height: 1;
  background: linear-gradient(135deg, var(--pistachio-l), var(--azure-l));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
}
.stat-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: 0.4rem;
  display: block;
}


/* Page hero */
.page-hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:2rem;padding:13rem 5vw 6rem;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--bg-raised) 0%,#1a2840 100%);}
.page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 70% at 85% 40%,rgba(242,137,154,0.06) 0%,transparent 60%);pointer-events:none;}
.hero-text{max-width:100%;}
.ph-label{font-size:0.82rem;font-weight:600;letter-spacing:0.32em;text-transform:uppercase;color:var(--pistachio-l);display:flex;align-items:center;gap:0.9rem;margin-bottom:1.5rem;opacity:0;animation:up .7s ease forwards .1s;}
.ph-label::before{content:'';width:22px;height:1px;background:var(--pistachio-l);}
.ph-title{font-family:var(--display);font-size:clamp(2.8rem,5vw,5rem);font-weight:400;line-height:1.05;color:var(--text-primary);max-width:700px;opacity:0;animation:up .9s ease forwards .25s;}
.ph-title i{font-style:italic;color:var(--orchid-l);}
.ph-sub{font-size:1.05rem;font-weight:300;line-height:1.9;color:var(--text-secondary);max-width:500px;margin-top:1.5rem;opacity:0;animation:up .8s ease forwards .45s;}
.hero-graphic{width:100%;height:420px;display:flex;align-items:center;justify-content:center;opacity:0;animation:heroGraphicIn 1s ease forwards .5s;}
@keyframes heroGraphicIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@media(max-width:860px){.page-hero{grid-template-columns:1fr;padding:10rem 5vw 4rem;}.hero-graphic{display:none;}}


/* ── SCROLL TO TOP ── */
.scroll-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  background: rgba(92,142,125,0.15);
  border: 1px solid rgba(92,142,125,0.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--pistachio-l);
  font-size: 1rem;
  text-decoration: none;
  transition: background .25s, border-color .25s, transform .25s;
  z-index: 100;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s, transform .3s, background .25s;
}
.scroll-top.visible { opacity: 1; transform: translateY(0); }
.scroll-top:hover { background: rgba(92,142,125,0.3); border-color: var(--pistachio); }



/* === FROM CONTACT BODY === */

      .co1{animation:coOrb 8s linear infinite;transform-origin:240px 260px}
      .co2{animation:coOrb 12s linear infinite reverse;transform-origin:240px 260px}
      .co3{animation:coOrb 18s linear infinite reverse;transform-origin:240px 260px}
      @keyframes coOrb{to{transform:rotate(360deg)}}
      .cofl{animation:coFloat 6s ease-in-out infinite}.cof1{animation-delay:0s}.cof2{animation-delay:2s}.cof3{animation-delay:4s}
      @keyframes coFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
      .codash{stroke-dasharray:6 6;animation:coDash 3s linear infinite}
      @keyframes coDash{to{stroke-dashoffset:-100}}
      .copulse{animation:coPulse 3s ease-in-out infinite}
      @keyframes coPulse{0%,100%{opacity:.35}50%{opacity:1}}
    

/* === FROM CONTACT BODY === */

.contact-main{display:grid;grid-template-columns:1fr 1fr;width:100%;}
.contact-form-wrap{padding:5rem 5vw;background:var(--bg-raised);}
.contact-info{padding:5rem 4vw;background:var(--bg);border-left:1px solid rgba(92,142,125,0.15);}
.cf-title{font-family:var(--display);font-size:clamp(2rem,3vw,2.8rem);font-weight:400;color:var(--text-primary);margin-bottom:0.75rem;}
.cf-sub{font-size:1rem;font-weight:300;color:var(--text-secondary);margin-bottom:2rem;line-height:1.8;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;}
.form-group{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem;}
.form-group label{font-size:0.78rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--pistachio-l);}
.form-group input,.form-group select,.form-group textarea{background:rgba(255,255,255,0.05);border:1px solid rgba(92,142,125,0.2);border-radius:2px;padding:0.85rem 1rem;color:var(--text-primary);font-family:var(--body);font-size:1rem;font-weight:300;transition:border-color .25s;width:100%;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--pistachio);}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-tertiary);}
.form-group textarea{min-height:140px;resize:vertical;}
.form-group select option{background:var(--bg-raised);}
.submit-btn{display:inline-flex;align-items:center;gap:0.6rem;font-family:var(--body);font-size:0.78rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--bg);background:var(--pistachio);padding:1rem 2.25rem;border-radius:2px;border:none;cursor:none;transition:background .25s,transform .2s;}
.submit-btn:hover{background:var(--pistachio-l);transform:translateY(-2px);}
.form-note{font-size:0.82rem;font-weight:300;color:var(--text-tertiary);margin-top:1rem;}
.ci-section{margin-bottom:2rem;}
.ci-label{font-size:0.65rem;font-weight:600;letter-spacing:0.28em;text-transform:uppercase;color:var(--pistachio-l);margin-bottom:0.75rem;}
.ci-value{font-family:var(--display);font-size:1.4rem;color:var(--text-primary);margin-bottom:0.5rem;}
.ci-value a{color:var(--azure);text-decoration:none;}
.ci-value a:hover{color:var(--azure-l);}
.ci-desc{font-size:0.92rem;font-weight:300;color:var(--text-secondary);line-height:1.7;}
.ci-divider{height:1px;background:rgba(92,142,125,0.12);margin:2rem 0;}
.expect-item{display:flex;gap:1rem;margin-bottom:1.25rem;}
.expect-num{font-family:var(--display);font-style:italic;font-size:1.1rem;color:var(--orchid);flex-shrink:0;line-height:1.4;}
.expect-text{font-size:0.92rem;font-weight:300;line-height:1.75;color:var(--text-secondary);}
.expect-text strong{color:var(--text-primary);font-weight:500;display:block;margin-bottom:0.15rem;}
.social-links{display:flex;gap:0.75rem;margin-top:0.75rem;}
.social-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid rgba(92,142,125,0.22);border-radius:3px;color:var(--text-secondary);text-decoration:none;transition:border-color .25s,color .25s;}
.social-link:hover{border-color:var(--pistachio);color:var(--pistachio-l);}
@media(max-width:860px){
  .contact-main{grid-template-columns:1fr;}
  .contact-info{border-left:none;border-top:1px solid rgba(92,142,125,0.15);}
  .form-row{grid-template-columns:1fr;}
}

/* ══════════════════════════════════════
   TABLET — max-width: 1024px
══════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Hero layout: drop the 400px fixed column */
  .hero-layout { grid-template-columns: 1fr 1fr !important; gap: 3rem; }
  /* Footer: 2+2 columns */
  
  /* Why grid: 2 col */
  .why-grid { grid-template-columns: 1fr 1fr !important; }
  /* Stat strip: 2x2 */
  .stat-strip { grid-template-columns: 1fr 1fr !important; }
}

/* ══════════════════════════════════════
   MOBILE — max-width: 768px
══════════════════════════════════════ */
@media (max-width: 768px) {

  nav ul li:not(:last-child) { display: none !important; }
  

  /* ── HERO (homepage) ── */
  .hero-layout { grid-template-columns: 1fr !important; }
  .hero-promise { display: none !important; }
  .hero-title { font-size: clamp(2.6rem, 9vw, 4rem) !important; }
  .hero-actions { flex-direction: column !important; }
  .hero-actions a { width: 100% !important; text-align: center !important; justify-content: center !important; }
  .hero-desc { max-width: 100% !important; }

  /* ── PAGE HERO (inner pages) ── */
  .page-hero { grid-template-columns: 1fr !important; padding: 8rem 5vw 3.5rem !important; }
  .hero-graphic { display: none !important; }

  /* ── ABOUT SECTION ── */
  .about-grid { grid-template-columns: 1fr !important; gap: 3rem !important; }
  .wwa-graphic-col { display: none !important; }

  /* ── SERVICES ── */
  .services-grid { grid-template-columns: 1fr !important; }
  .svc-layout { grid-template-columns: 1fr !important; gap: 2.5rem !important; }

  /* ── WHY ── */
  .why-grid { grid-template-columns: 1fr !important; }
  .why-card:nth-child(2) { background: var(--bg-raised) !important; }

  /* ── PROCESS ── */
  .process-steps { grid-template-columns: 1fr !important; }

  /* ── CASE STUDIES ── */
  .cases-grid { grid-template-columns: 1fr !important; }
  .cc-metrics { grid-template-columns: 1fr 1fr !important; }

  /* ── CONTACT PAGE ── */
  .contact-main { grid-template-columns: 1fr !important; }
  .contact-form-wrap { padding: 3rem 5vw !important; }
  .contact-info { padding: 3rem 5vw !important; border-left: none !important; border-top: 1px solid rgba(92,142,125,0.15) !important; }
  .form-row { grid-template-columns: 1fr !important; gap: 0 !important; }

  /* ── STAT STRIP ── */
  .stat-strip { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; padding: 2rem 5vw !important; }

  /* ── COUNTER STRIP ── */
  .counter-strip { flex-wrap: wrap !important; gap: 1.5rem !important; justify-content: center !important; }
  .counter-item { min-width: 120px !important; text-align: center !important; }
  .counter-num { font-size: 2.8rem !important; }

  /* ── QUOTE STRIP ── */
  .qs-text { font-size: clamp(1.1rem, 3.5vw, 1.5rem) !important; }

  /* ── TEAM DIVIDER ── */
  .team-divider { display: none !important; }

  /* ── THANK YOU ── */
  main { grid-template-columns: 1fr !important; }
  .ty-right { display: none !important; }
  .ty-title { font-size: clamp(2.5rem, 8vw, 4rem) !important; }

  /* ── TYPOGRAPHY SCALE ── */
  .sec-title { font-size: clamp(2rem, 6vw, 3rem) !important; }
  .ph-title { font-size: clamp(2.2rem, 7vw, 3.5rem) !important; }
  .svc-title { font-size: clamp(1.9rem, 6vw, 2.8rem) !important; }

  /* ── CANVAS SECTION ── */
  #canvas { min-height: 60vh !important; }

  /* ── CURSOR ── */
  body { cursor: auto !important; }
  #cur, #cur-ring { display: none !important; }
}

/* ══════════════════════════════════════
   SMALL PHONE — max-width: 480px
══════════════════════════════════════ */
@media (max-width: 480px) {
  
  
  
  .stat-strip { grid-template-columns: 1fr 1fr !important; }
  .hero-title { font-size: clamp(2.2rem, 8vw, 3rem) !important; }
  .ph-title { font-size: clamp(2rem, 7vw, 2.8rem) !important; }
  .sec-title { font-size: clamp(1.8rem, 7vw, 2.5rem) !important; }
  .filter-bar { gap: 0.4rem !important; padding: 1.5rem 5vw !important; }
  .filter-btn { font-size: 0.6rem !important; padding: 0.3rem 0.65rem !important; }
  .counter-num { font-size: 2.4rem !important; }
  .ty-title { font-size: clamp(2rem, 8vw, 3rem) !important; }
  .ty-steps { margin-top: 2rem !important; }
  .ty-actions { flex-direction: column !important; }
  .ty-actions a { width: 100% !important; text-align: center !important; justify-content: center !important; }
}


/* ── NAV ── */
nav{position:fixed;inset:0 0 auto 0;z-index:200;padding:2rem 5vw;display:flex;align-items:center;justify-content:space-between;background:rgba(30,46,71,0.97);backdrop-filter:blur(20px);border-bottom:1px solid rgba(92,142,125,0.15);}
nav.stuck{padding:1.25rem 5vw;}
.logo{font-family:'Cormorant Garamond','DM Serif Display',Georgia,serif !important;font-size:1.75rem !important;font-weight:600 !important;font-style:normal !important;letter-spacing:0.28em !important;text-transform:uppercase !important;color:#FFFFFF !important;text-decoration:none !important;opacity:1 !important;}
.logo-dot{color:#FFFFFF;letter-spacing:0;font-weight:600;}
nav ul{list-style:none;display:flex;gap:2.5rem;align-items:center;}
nav a{font-family:var(--body);font-size:0.95rem;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-secondary);text-decoration:none;transition:color .25s;}
nav a:hover,nav a.active{color:var(--pistachio-l);}
.nav-btn{font-size:0.82rem !important;font-weight:600 !important;letter-spacing:0.14em !important;color:#1a2035 !important;background:#F5B896 !important;padding:0.65rem 1.6rem;border-radius:2px;transition:background .25s !important;}
.nav-btn:hover{background:#f9cbb5 !important;color:#1a2035 !important;}
/* ── FOOTER ── */
footer{background:#0d1825;border-top:1px solid rgba(92,142,125,0.12);}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1.4fr 1fr;gap:3rem;padding:4rem 5vw 3rem;border-bottom:1px solid rgba(242,237,214,0.05);}
.footer-logo{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.3rem;font-weight:500;letter-spacing:0.28em;text-transform:uppercase;color:#F2EDD6;text-decoration:none;display:block;margin-bottom:0.75rem;}
.footer-logo .dot{color:var(--orchid);letter-spacing:0;}
.footer-tagline{font-size:0.85rem;font-weight:300;color:var(--text-tertiary);line-height:1.7;margin-bottom:0.6rem;}
.footer-email a{font-size:0.88rem;color:var(--azure);text-decoration:none;transition:color .25s;}
.footer-email a:hover{color:var(--azure-l);}
.footer-col-title{font-size:0.72rem;font-weight:600;letter-spacing:0.28em;text-transform:uppercase;color:var(--pistachio-l);margin-bottom:1.25rem;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:0.65rem;}
.footer-col ul a{font-size:0.92rem;font-weight:300;color:var(--text-secondary);text-decoration:none;transition:color .25s;font-family:var(--body);}
.footer-col ul a:hover{color:var(--text-primary);}
.footer-social-icons{display:flex;gap:0.6rem;flex-wrap:wrap;}
.footer-social-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid rgba(92,142,125,0.22);border-radius:3px;color:var(--text-secondary);text-decoration:none;transition:border-color .25s,color .25s,background .25s;}
.footer-social-link:hover{border-color:var(--pistachio);color:var(--pistachio-l);background:rgba(92,142,125,0.08);}
.footer-social-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.footer-bottom{padding:1.5rem 5vw;display:flex;justify-content:center;}
.footer-copy{font-size:0.72rem;color:var(--text-tertiary);}
@media(max-width:860px){.footer-top{grid-template-columns:1fr 1fr;gap:2rem;}}
@media(max-width:540px){.footer-top{grid-template-columns:1fr;}}


/* === FROM CASE-STUDIES BODY === */

      .csp{animation:cspop .5s cubic-bezier(.16,1,.3,1) forwards;opacity:0;transform:scale(0)}
      .cp1{animation-delay:.3s;transform-origin:240px 140px}.cp2{animation-delay:.7s;transform-origin:120px 290px}
      .cp3{animation-delay:1.1s;transform-origin:360px 290px}.cp4{animation-delay:1.5s;transform-origin:168px 430px}
      .cp5{animation-delay:1.9s;transform-origin:312px 430px}
      @keyframes cspop{to{opacity:1;transform:scale(1)}}
      .csfl{animation:csFloat 4s ease-in-out infinite}
      .csf1{animation-delay:0s}.csf2{animation-delay:.8s}.csf3{animation-delay:1.6s}.csf4{animation-delay:2.4s}.csf5{animation-delay:3.2s}
      @keyframes csFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
      .csb{animation:csBeam 2s ease forwards;opacity:0}
      .csb1{animation-delay:.5s}.csb2{animation-delay:.8s}.csb3{animation-delay:1.1s}.csb4{animation-delay:1.4s}
      @keyframes csBeam{to{opacity:1}}
    

/* === FROM CASE-STUDIES BODY === */

.filter-bar{padding:2rem 5vw;border-bottom:1px solid rgba(92,142,125,0.1);display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
.filter-label{font-size:0.72rem;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:var(--text-tertiary);margin-right:.5rem;}
.filter-btn{font-size:0.72rem;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;padding:.45rem 1rem;border-radius:20px;border:1px solid rgba(92,142,125,0.2);color:var(--text-secondary);background:transparent;cursor:pointer;transition:all .25s;font-family:var(--body);}
.filter-btn:hover,.filter-btn.active{border-color:var(--pistachio);color:var(--pistachio-l);background:rgba(92,142,125,0.08);}
.cases-section{padding:5rem 5vw;}
.cases-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;align-items:stretch;}
.case-card{border:1px solid rgba(92,142,125,0.2);border-radius:4px;overflow:hidden;position:relative;transition:border-color .35s,transform .3s;cursor:none;display:flex;flex-direction:column;}
.case-card:hover{border-color:rgba(242,137,154,0.35);transform:translateY(-3px);}
.case-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--orchid),var(--peach));transform:scaleX(0);transform-origin:left;transition:transform .4s ease;}
.case-card:hover::before{transform:scaleX(1);}
.case-card-inner{padding:2.5rem;flex:1;}
.cc-tag{font-size:0.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--orchid);display:block;margin-bottom:1.25rem;}
.cc-title{font-family:var(--display);font-size:1.6rem;font-weight:400;line-height:1.3;color:var(--text-primary);margin-bottom:1rem;}
.cc-desc{font-size:1rem;font-weight:300;line-height:1.85;color:var(--text-secondary);margin-bottom:1.5rem;}
.cc-services{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.5rem;}
.cc-service-tag{font-size:0.65rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--azure);border:1px solid rgba(137,179,207,0.25);padding:.2rem .6rem;border-radius:2px;}
.cc-metrics{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid rgba(92,142,125,0.12);margin-top:auto;}
.cm-item{padding:1.25rem 1.5rem;border-right:1px solid rgba(92,142,125,0.1);}
.cm-item:last-child{border-right:none;}
.cm-num{font-family:var(--display);font-style:italic;font-size:2.2rem;line-height:1;background:linear-gradient(135deg,var(--azure-l),var(--pistachio-l));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block;margin-bottom:.4rem;}
.cm-label{font-size:0.65rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-tertiary);}
.case-card-soon{border:1px dashed rgba(92,142,125,0.15);border-radius:4px;padding:2.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:280px;}
.cs-icon{font-size:1.5rem;margin-bottom:1rem;opacity:.3;}
.cs-label{font-size:.65rem;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:.5rem;}
.cs-text{font-size:.9rem;font-weight:300;color:var(--text-tertiary);line-height:1.7;max-width:260px;}
.cs-cta{background:var(--bg-raised);text-align:center;padding:7rem 5vw;}
.cs-cta-sub{font-size:1.05rem;font-weight:300;color:var(--text-secondary);max-width:420px;margin:1rem auto 2.5rem;line-height:1.85;}
.cta-btn{display:inline-flex;align-items:center;gap:.6rem;font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#1a2035;background:var(--orchid);padding:1.05rem 2.5rem;border-radius:2px;text-decoration:none;transition:background .25s,transform .2s;}
.cta-btn:hover{background:var(--peach);transform:translateY(-2px);}
@media(max-width:860px){.cases-grid{grid-template-columns:1fr;}}

/* ══════════════════════════════════════
   TABLET — max-width: 1024px
══════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Hero layout: drop the 400px fixed column */
  .hero-layout { grid-template-columns: 1fr 1fr !important; gap: 3rem; }
  /* Footer: 2+2 columns */
  
  /* Why grid: 2 col */
  .why-grid { grid-template-columns: 1fr 1fr !important; }
  /* Stat strip: 2x2 */
  .stat-strip { grid-template-columns: 1fr 1fr !important; }
}

/* ══════════════════════════════════════
   MOBILE — max-width: 768px
══════════════════════════════════════ */
@media (max-width: 768px) {

  nav ul li:not(:last-child) { display: none !important; }
  

  /* ── HERO (homepage) ── */
  .hero-layout { grid-template-columns: 1fr !important; }
  .hero-promise { display: none !important; }
  .hero-title { font-size: clamp(2.6rem, 9vw, 4rem) !important; }
  .hero-actions { flex-direction: column !important; }
  .hero-actions a { width: 100% !important; text-align: center !important; justify-content: center !important; }
  .hero-desc { max-width: 100% !important; }

  /* ── PAGE HERO (inner pages) ── */
  .page-hero { grid-template-columns: 1fr !important; padding: 8rem 5vw 3.5rem !important; }
  .hero-graphic { display: none !important; }

  /* ── ABOUT SECTION ── */
  .about-grid { grid-template-columns: 1fr !important; gap: 3rem !important; }
  .wwa-graphic-col { display: none !important; }

  /* ── SERVICES ── */
  .services-grid { grid-template-columns: 1fr !important; }
  .svc-layout { grid-template-columns: 1fr !important; gap: 2.5rem !important; }

  /* ── WHY ── */
  .why-grid { grid-template-columns: 1fr !important; }
  .why-card:nth-child(2) { background: var(--bg-raised) !important; }

  /* ── PROCESS ── */
  .process-steps { grid-template-columns: 1fr !important; }

  /* ── CASE STUDIES ── */
  .cases-grid { grid-template-columns: 1fr !important; }
  .cc-metrics { grid-template-columns: 1fr 1fr !important; }

  /* ── CONTACT PAGE ── */
  .contact-main { grid-template-columns: 1fr !important; }
  .contact-form-wrap { padding: 3rem 5vw !important; }
  .contact-info { padding: 3rem 5vw !important; border-left: none !important; border-top: 1px solid rgba(92,142,125,0.15) !important; }
  .form-row { grid-template-columns: 1fr !important; gap: 0 !important; }

  /* ── STAT STRIP ── */
  .stat-strip { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; padding: 2rem 5vw !important; }

  /* ── COUNTER STRIP ── */
  .counter-strip { flex-wrap: wrap !important; gap: 1.5rem !important; justify-content: center !important; }
  .counter-item { min-width: 120px !important; text-align: center !important; }
  .counter-num { font-size: 2.8rem !important; }

  /* ── QUOTE STRIP ── */
  .qs-text { font-size: clamp(1.1rem, 3.5vw, 1.5rem) !important; }

  /* ── TEAM DIVIDER ── */
  .team-divider { display: none !important; }

  /* ── THANK YOU ── */
  main { grid-template-columns: 1fr !important; }
  .ty-right { display: none !important; }
  .ty-title { font-size: clamp(2.5rem, 8vw, 4rem) !important; }

  /* ── TYPOGRAPHY SCALE ── */
  .sec-title { font-size: clamp(2rem, 6vw, 3rem) !important; }
  .ph-title { font-size: clamp(2.2rem, 7vw, 3.5rem) !important; }
  .svc-title { font-size: clamp(1.9rem, 6vw, 2.8rem) !important; }

  /* ── CANVAS SECTION ── */
  #canvas { min-height: 60vh !important; }

  /* ── CURSOR ── */
  body { cursor: auto !important; }
  #cur, #cur-ring { display: none !important; }
}

/* ══════════════════════════════════════
   SMALL PHONE — max-width: 480px
══════════════════════════════════════ */
@media (max-width: 480px) {
  
  
  
  .stat-strip { grid-template-columns: 1fr 1fr !important; }
  .hero-title { font-size: clamp(2.2rem, 8vw, 3rem) !important; }
  .ph-title { font-size: clamp(2rem, 7vw, 2.8rem) !important; }
  .sec-title { font-size: clamp(1.8rem, 7vw, 2.5rem) !important; }
  .filter-bar { gap: 0.4rem !important; padding: 1.5rem 5vw !important; }
  .filter-btn { font-size: 0.6rem !important; padding: 0.3rem 0.65rem !important; }
  .counter-num { font-size: 2.4rem !important; }
  .ty-title { font-size: clamp(2rem, 8vw, 3rem) !important; }
  .ty-steps { margin-top: 2rem !important; }
  .ty-actions { flex-direction: column !important; }
  .ty-actions a { width: 100% !important; text-align: center !important; justify-content: center !important; }
}


/* ── NAV ── */
nav{position:fixed;inset:0 0 auto 0;z-index:200;padding:2rem 5vw;display:flex;align-items:center;justify-content:space-between;background:rgba(30,46,71,0.97);backdrop-filter:blur(20px);border-bottom:1px solid rgba(92,142,125,0.15);}
nav.stuck{padding:1.25rem 5vw;}
.logo{font-family:'Cormorant Garamond','DM Serif Display',Georgia,serif !important;font-size:1.75rem !important;font-weight:600 !important;font-style:normal !important;letter-spacing:0.28em !important;text-transform:uppercase !important;color:#FFFFFF !important;text-decoration:none !important;opacity:1 !important;}
.logo-dot{color:#FFFFFF;letter-spacing:0;font-weight:600;}
nav ul{list-style:none;display:flex;gap:2.5rem;align-items:center;}
nav a{font-family:var(--body);font-size:0.95rem;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-secondary);text-decoration:none;transition:color .25s;}
nav a:hover,nav a.active{color:var(--pistachio-l);}
.nav-btn{font-size:0.82rem !important;font-weight:600 !important;letter-spacing:0.14em !important;color:#1a2035 !important;background:#F5B896 !important;padding:0.65rem 1.6rem;border-radius:2px;transition:background .25s !important;}
.nav-btn:hover{background:#f9cbb5 !important;color:#1a2035 !important;}
/* ── FOOTER ── */
footer{background:#0d1825;border-top:1px solid rgba(92,142,125,0.12);}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1.4fr 1fr;gap:3rem;padding:4rem 5vw 3rem;border-bottom:1px solid rgba(242,237,214,0.05);}
.footer-logo{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.3rem;font-weight:500;letter-spacing:0.28em;text-transform:uppercase;color:#F2EDD6;text-decoration:none;display:block;margin-bottom:0.75rem;}
.footer-logo .dot{color:var(--orchid);letter-spacing:0;}
.footer-tagline{font-size:0.85rem;font-weight:300;color:var(--text-tertiary);line-height:1.7;margin-bottom:0.6rem;}
.footer-email a{font-size:0.88rem;color:var(--azure);text-decoration:none;transition:color .25s;}
.footer-email a:hover{color:var(--azure-l);}
.footer-col-title{font-size:0.72rem;font-weight:600;letter-spacing:0.28em;text-transform:uppercase;color:var(--pistachio-l);margin-bottom:1.25rem;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:0.65rem;}
.footer-col ul a{font-size:0.92rem;font-weight:300;color:var(--text-secondary);text-decoration:none;transition:color .25s;font-family:var(--body);}
.footer-col ul a:hover{color:var(--text-primary);}
.footer-social-icons{display:flex;gap:0.6rem;flex-wrap:wrap;}
.footer-social-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid rgba(92,142,125,0.22);border-radius:3px;color:var(--text-secondary);text-decoration:none;transition:border-color .25s,color .25s,background .25s;}
.footer-social-link:hover{border-color:var(--pistachio);color:var(--pistachio-l);background:rgba(92,142,125,0.08);}
.footer-social-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.footer-bottom{padding:1.5rem 5vw;display:flex;justify-content:center;}
.footer-copy{font-size:0.72rem;color:var(--text-tertiary);}
@media(max-width:860px){.footer-top{grid-template-columns:1fr 1fr;gap:2rem;}}
@media(max-width:540px){.footer-top{grid-template-columns:1fr;}}


/* === FROM THANK-YOU BODY === */

          .ck-draw { stroke-dasharray: 600; stroke-dashoffset: 600; animation: ckDraw 1.2s cubic-bezier(0.16,1,0.3,1) forwards 0.8s; }
          @keyframes ckDraw { to { stroke-dashoffset: 0; } }
          .ck-ring1 { animation: ckSpin 18s linear infinite; transform-origin: 210px 220px; }
          .ck-ring2 { animation: ckSpin 12s linear infinite reverse; transform-origin: 210px 220px; }
          @keyframes ckSpin { to { transform: rotate(360deg); } }
          .ck-dot { animation: ckPulse 2.5s ease-in-out infinite; }
          .cd1 { animation-delay: 0s; }
          .cd2 { animation-delay: 0.5s; }
          .cd3 { animation-delay: 1s; }
          @keyframes ckPulse { 0%,100% { opacity:0.5; transform:scale(1); } 50% { opacity:1; transform:scale(1.3); } }
          .ck-particle { animation: ckFloat 6s ease-in-out infinite; }
          .cp1 { animation-delay:0s; transform-origin:120px 120px; }
          .cp2 { animation-delay:1s; transform-origin:300px 100px; }
          .cp3 { animation-delay:2s; transform-origin:340px 320px; }
          .cp4 { animation-delay:3s; transform-origin:80px 320px; }
          @keyframes ckFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }
          .ck-word { animation: ckWordIn 0.5s ease forwards; opacity:0; }
          .cw1 { animation-delay:1.6s; }
          .cw2 { animation-delay:1.9s; }
          .cw3 { animation-delay:2.2s; }
          .cw4 { animation-delay:2.5s; }
          @keyframes ckWordIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
        
/* ══════════════════════════════════════
   TABLET — max-width: 1024px
══════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Hero layout: drop the 400px fixed column */
  .hero-layout { grid-template-columns: 1fr 1fr !important; gap: 3rem; }
  /* Footer: 2+2 columns */
  
  /* Why grid: 2 col */
  .why-grid { grid-template-columns: 1fr 1fr !important; }
  /* Stat strip: 2x2 */
  .stat-strip { grid-template-columns: 1fr 1fr !important; }
}

/* ══════════════════════════════════════
   MOBILE — max-width: 768px
══════════════════════════════════════ */
@media (max-width: 768px) {

  nav ul li:not(:last-child) { display: none !important; }
  

  /* ── HERO (homepage) ── */
  .hero-layout { grid-template-columns: 1fr !important; }
  .hero-promise { display: none !important; }
  .hero-title { font-size: clamp(2.6rem, 9vw, 4rem) !important; }
  .hero-actions { flex-direction: column !important; }
  .hero-actions a { width: 100% !important; text-align: center !important; justify-content: center !important; }
  .hero-desc { max-width: 100% !important; }

  /* ── PAGE HERO (inner pages) ── */
  .page-hero { grid-template-columns: 1fr !important; padding: 8rem 5vw 3.5rem !important; }
  .hero-graphic { display: none !important; }

  /* ── ABOUT SECTION ── */
  .about-grid { grid-template-columns: 1fr !important; gap: 3rem !important; }
  .wwa-graphic-col { display: none !important; }

  /* ── SERVICES ── */
  .services-grid { grid-template-columns: 1fr !important; }
  .svc-layout { grid-template-columns: 1fr !important; gap: 2.5rem !important; }

  /* ── WHY ── */
  .why-grid { grid-template-columns: 1fr !important; }
  .why-card:nth-child(2) { background: var(--bg-raised) !important; }

  /* ── PROCESS ── */
  .process-steps { grid-template-columns: 1fr !important; }

  /* ── CASE STUDIES ── */
  .cases-grid { grid-template-columns: 1fr !important; }
  .cc-metrics { grid-template-columns: 1fr 1fr !important; }

  /* ── CONTACT PAGE ── */
  .contact-main { grid-template-columns: 1fr !important; }
  .contact-form-wrap { padding: 3rem 5vw !important; }
  .contact-info { padding: 3rem 5vw !important; border-left: none !important; border-top: 1px solid rgba(92,142,125,0.15) !important; }
  .form-row { grid-template-columns: 1fr !important; gap: 0 !important; }

  /* ── STAT STRIP ── */
  .stat-strip { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; padding: 2rem 5vw !important; }

  /* ── COUNTER STRIP ── */
  .counter-strip { flex-wrap: wrap !important; gap: 1.5rem !important; justify-content: center !important; }
  .counter-item { min-width: 120px !important; text-align: center !important; }
  .counter-num { font-size: 2.8rem !important; }

  /* ── QUOTE STRIP ── */
  .qs-text { font-size: clamp(1.1rem, 3.5vw, 1.5rem) !important; }

  /* ── TEAM DIVIDER ── */
  .team-divider { display: none !important; }

  /* ── THANK YOU ── */
  main { grid-template-columns: 1fr !important; }
  .ty-right { display: none !important; }
  .ty-title { font-size: clamp(2.5rem, 8vw, 4rem) !important; }

  /* ── TYPOGRAPHY SCALE ── */
  .sec-title { font-size: clamp(2rem, 6vw, 3rem) !important; }
  .ph-title { font-size: clamp(2.2rem, 7vw, 3.5rem) !important; }
  .svc-title { font-size: clamp(1.9rem, 6vw, 2.8rem) !important; }

  /* ── CANVAS SECTION ── */
  #canvas { min-height: 60vh !important; }

  /* ── CURSOR ── */
  body { cursor: auto !important; }
  #cur, #cur-ring { display: none !important; }
}

/* ══════════════════════════════════════
   SMALL PHONE — max-width: 480px
══════════════════════════════════════ */
@media (max-width: 480px) {
  
  
  
  .stat-strip { grid-template-columns: 1fr 1fr !important; }
  .hero-title { font-size: clamp(2.2rem, 8vw, 3rem) !important; }
  .ph-title { font-size: clamp(2rem, 7vw, 2.8rem) !important; }
  .sec-title { font-size: clamp(1.8rem, 7vw, 2.5rem) !important; }
  .filter-bar { gap: 0.4rem !important; padding: 1.5rem 5vw !important; }
  .filter-btn { font-size: 0.6rem !important; padding: 0.3rem 0.65rem !important; }
  .counter-num { font-size: 2.4rem !important; }
  .ty-title { font-size: clamp(2rem, 8vw, 3rem) !important; }
  .ty-steps { margin-top: 2rem !important; }
  .ty-actions { flex-direction: column !important; }
  .ty-actions a { width: 100% !important; text-align: center !important; justify-content: center !important; }
}


/* ── NAV ── */
nav{position:fixed;inset:0 0 auto 0;z-index:200;padding:2rem 5vw;display:flex;align-items:center;justify-content:space-between;background:rgba(30,46,71,0.97);backdrop-filter:blur(20px);border-bottom:1px solid rgba(92,142,125,0.15);}
nav.stuck{padding:1.25rem 5vw;}
.logo{font-family:'Cormorant Garamond','DM Serif Display',Georgia,serif !important;font-size:1.75rem !important;font-weight:600 !important;font-style:normal !important;letter-spacing:0.28em !important;text-transform:uppercase !important;color:#FFFFFF !important;text-decoration:none !important;opacity:1 !important;}
.logo-dot{color:#FFFFFF;letter-spacing:0;font-weight:600;}
nav ul{list-style:none;display:flex;gap:2.5rem;align-items:center;}
nav a{font-family:var(--body);font-size:0.95rem;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-secondary);text-decoration:none;transition:color .25s;}
nav a:hover,nav a.active{color:var(--pistachio-l);}
.nav-btn{font-size:0.82rem !important;font-weight:600 !important;letter-spacing:0.14em !important;color:#1a2035 !important;background:#F5B896 !important;padding:0.65rem 1.6rem;border-radius:2px;transition:background .25s !important;}
.nav-btn:hover{background:#f9cbb5 !important;color:#1a2035 !important;}
/* ── FOOTER ── */
footer{background:#0d1825;border-top:1px solid rgba(92,142,125,0.12);}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1.4fr 1fr;gap:3rem;padding:4rem 5vw 3rem;border-bottom:1px solid rgba(242,237,214,0.05);}
.footer-logo{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.3rem;font-weight:500;letter-spacing:0.28em;text-transform:uppercase;color:#F2EDD6;text-decoration:none;display:block;margin-bottom:0.75rem;}
.footer-logo .dot{color:var(--orchid);letter-spacing:0;}
.footer-tagline{font-size:0.85rem;font-weight:300;color:var(--text-tertiary);line-height:1.7;margin-bottom:0.6rem;}
.footer-email a{font-size:0.88rem;color:var(--azure);text-decoration:none;transition:color .25s;}
.footer-email a:hover{color:var(--azure-l);}
.footer-col-title{font-size:0.72rem;font-weight:600;letter-spacing:0.28em;text-transform:uppercase;color:var(--pistachio-l);margin-bottom:1.25rem;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:0.65rem;}
.footer-col ul a{font-size:0.92rem;font-weight:300;color:var(--text-secondary);text-decoration:none;transition:color .25s;font-family:var(--body);}
.footer-col ul a:hover{color:var(--text-primary);}
.footer-social-icons{display:flex;gap:0.6rem;flex-wrap:wrap;}
.footer-social-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid rgba(92,142,125,0.22);border-radius:3px;color:var(--text-secondary);text-decoration:none;transition:border-color .25s,color .25s,background .25s;}
.footer-social-link:hover{border-color:var(--pistachio);color:var(--pistachio-l);background:rgba(92,142,125,0.08);}
.footer-social-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.footer-bottom{padding:1.5rem 5vw;display:flex;justify-content:center;}
.footer-copy{font-size:0.72rem;color:var(--text-tertiary);}
@media(max-width:860px){.footer-top{grid-template-columns:1fr 1fr;gap:2rem;}}
@media(max-width:540px){.footer-top{grid-template-columns:1fr;}}

/* ── DL CARD (Services deliverables) ── */
.dl-card{background:rgba(255,255,255,.04);border:1px solid rgba(92,142,125,.18);border-radius:4px;padding:1.75rem;margin-bottom:1rem;}
.dl-label{font-size:.72rem;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:var(--pistachio-l);margin-bottom:1.25rem;}
.dl-list{list-style:none;display:flex;flex-direction:column;gap:.7rem;}
.dl-item{font-size:1rem;font-weight:300;color:var(--text-secondary);padding-left:1.25rem;position:relative;line-height:1.6;}
.dl-item::before{content:'';position:absolute;left:0;top:.65em;width:5px;height:5px;border-radius:50%;background:var(--pistachio);opacity:.6;}

/* ── WORDPRESS BODY FIX ── */
body.wordpress, body { padding-top: 0 !important; margin-top: 0 !important; }
.wp-site-blocks, .entry-content, .wp-block-post-content { padding: 0 !important; margin: 0 !important; }
#wpadminbar ~ nav { top: 32px !important; }
@media screen and (max-width: 782px) { #wpadminbar ~ nav { top: 46px !important; } }

/* ── ABOUT GRID FORCE ── */
.about-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 5vw !important;
  align-items: center !important;
}

/* ── THANK YOU PAGE ── */
.main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.ty-left {
  padding: 10rem 5vw 6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.ty-right {
  position: relative;
  overflow: hidden;
  background: var(--bg-raised);
}
.ty-eyebrow {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--pistachio-l);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
}
.ty-eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--pistachio-l);
}
.ty-title {
  font-family: var(--display);
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
}
.ty-title i { color: var(--pistachio-l); }
.ty-desc {
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--text-secondary);
  max-width: 480px;
  margin-bottom: 2.5rem;
}
.ty-steps {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 3rem;
}
.ty-steps-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--pistachio-l);
  margin-bottom: 0.5rem;
}
.ty-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.ty-step-num {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--orchid);
  flex-shrink: 0;
  line-height: 1.4;
}
.ty-step-text {
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.7;
}
.ty-step-text strong {
  color: var(--text-primary);
  font-weight: 500;
  display: block;
}
.ty-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

/* ── PAGE HERO (inner pages) proper desktop ── */
.page-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3rem;
  padding: 12rem 5vw 6rem;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-raised) 0%, #1a2840 100%);
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 70% at 85% 40%, rgba(242,137,154,0.06) 0%, transparent 60%);
  pointer-events: none;
}

/* ── MOBILE FIXES ── */
@media (max-width: 768px) {
  .main { grid-template-columns: 1fr !important; }
  .ty-right { display: none !important; }
  .ty-left { padding: 9rem 5vw 4rem !important; }
  .page-hero { grid-template-columns: 1fr !important; padding: 9rem 5vw 3rem !important; }
  .hero-graphic { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   KLAAR — CONSOLIDATED RESPONSIVE CSS (replaces all above)
   Breakpoints: 1024px tablet | 768px mobile | 480px small
   ═══════════════════════════════════════════════════════════ */

/* ── VIEWPORT META (ensure correct rendering) ── */
html { -webkit-text-size-adjust: 100%; }

/* ══════════════════════════════════════
   TABLET — max-width: 1024px
══════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Hero */
  .hero-bottom { grid-template-columns: 1fr !important; }
  .promise-card { display: none !important; }

  /* Grids */
  .svc-grid { grid-template-columns: 1fr 1fr !important; }
  .why-grid { grid-template-columns: 1fr 1fr !important; }
  .stat-strip { grid-template-columns: 1fr 1fr !important; }
  .cases-grid { grid-template-columns: 1fr 1fr !important; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; }

  /* Services page */
  .ss-grid { grid-template-columns: 1fr !important; gap: 3rem !important; }
  .ss-grid.flip { direction: ltr !important; }
  .pricing-grid { grid-template-columns: 1fr 1fr !important; }

  /* Page hero */
  .page-hero { grid-template-columns: 1fr !important; padding: 10rem 5vw 4rem !important; }
  .hero-graphic { display: none !important; }
}

/* ══════════════════════════════════════
   MOBILE — max-width: 768px
══════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── NAV ── */
  nav ul { display: none !important; }
  .hamburger { display: flex !important; }
  nav { padding: 1.1rem 5vw !important; }

  /* ── SECTION SPACING ── */
  .sec { padding: 4rem 5vw !important; }
  :root { --section: 5rem; }

  /* ── HERO (homepage) ── */
  .hero { padding: 7rem 5vw 3rem !important; justify-content: flex-start !important; }
  .hero-inner { padding-top: 2rem; }
  .hero-bottom { grid-template-columns: 1fr !important; gap: 2rem !important; padding-top: 1.5rem !important; }
  .promise-card { display: none !important; }
  .hero-actions { flex-direction: column !important; gap: 0.85rem !important; }
  .hero-actions .btn { width: 100% !important; text-align: center !important; justify-content: center !important; }
  .hero-desc { max-width: 100% !important; font-size: 1rem !important; }
  .hl-static, .hl-accent { font-size: clamp(3rem, 11vw, 5.5rem) !important; }
  .hero-label { margin-bottom: 1.5rem !important; }
  .hero-headline { margin-bottom: 2rem !important; }
  .hero-scroll { display: none !important; }

  /* ── PAGE HERO (inner pages) ── */
  .page-hero { grid-template-columns: 1fr !important; padding: 8rem 5vw 3.5rem !important; }
  .hero-graphic { display: none !important; }
  .ph-title { font-size: clamp(2.2rem, 7vw, 3.5rem) !important; }

  /* ── TICKER ── */
  .service-ticker { display: none !important; }

  /* ── ABOUT ── */
  .about-grid { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .wwa-graphic-col { display: none !important; }
  .about-graphic-wrap { display: none !important; }

  /* ── SERVICES GRID (homepage) ── */
  .svc-grid { grid-template-columns: 1fr !important; outline: none !important; }
  .svc-card { border-right: none !important; border-bottom: 1px solid rgba(92,142,125,0.1) !important; }
  .svc-card:last-child { border-bottom: none !important; }

  /* ── WHY ── */
  .why-grid { grid-template-columns: 1fr !important; }

  /* ── COUNTER STRIP ── */
  .counter-strip { flex-wrap: wrap !important; gap: 2rem !important; justify-content: center !important; padding: 3rem 5vw !important; }
  .counter-item { min-width: 130px !important; text-align: center !important; }
  .counter-num { font-size: 2.6rem !important; }

  /* ── STAT STRIP ── */
  .stat-strip { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; padding: 2rem 5vw !important; }

  /* ── PROCESS (zigzag) ── */
  .ps-row { grid-template-columns: 1fr !important; min-height: auto !important; }
  .ps-row:nth-child(even) { direction: ltr !important; }
  .ps-connector { display: none !important; }
  .ps-empty { display: none !important; }
  .ps-card { padding: 2rem 1.75rem !important; }

  /* ── CANVAS ── */
  .canvas-section { height: auto !important; min-height: 55vh !important; }
  .canvas-motto { font-size: clamp(2.8rem, 9vw, 5rem) !important; }

  /* ── QUOTE STRIP ── */
  .quote-strip { padding: 3rem 5vw !important; }
  .qs-text { font-size: clamp(1.1rem, 3.5vw, 1.5rem) !important; }

  /* ── CASE STUDIES ── */
  .cases-grid { grid-template-columns: 1fr !important; }
  .cc-metrics { grid-template-columns: 1fr 1fr !important; }
  .cases-section { padding: 3rem 5vw !important; }
  .filter-bar { flex-wrap: wrap !important; gap: 0.5rem !important; padding: 1.5rem 5vw !important; }

  /* ── CONTACT PAGE ── */
  .contact-main { grid-template-columns: 1fr !important; }
  .contact-form-wrap { padding: 3rem 5vw !important; }
  .contact-info { border-left: none !important; border-top: 1px solid rgba(92,142,125,0.15) !important; padding: 3rem 5vw !important; }
  .form-row { grid-template-columns: 1fr !important; gap: 0 !important; }

  /* ── SERVICES PAGE ── */
  .ss-grid { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .ss-grid.flip { direction: ltr !important; }
  .service-section { padding: 4rem 5vw !important; }
  .pricing-grid { grid-template-columns: 1fr !important; }
  .pricing-strip { padding: 4rem 5vw !important; }
  .cta-strip { padding: 4rem 5vw !important; }

  /* ── THANK YOU ── */
  .main { grid-template-columns: 1fr !important; }
  .ty-right { display: none !important; }
  .ty-left { padding: 9rem 5vw 4rem !important; }
  .ty-actions { flex-direction: column !important; }
  .ty-actions a { width: 100% !important; text-align: center !important; justify-content: center !important; }

  /* ── TYPOGRAPHY ── */
  .sec-title { font-size: clamp(2rem, 6.5vw, 3rem) !important; }
  .ph-title { font-size: clamp(2.2rem, 7vw, 3.5rem) !important; }
  .ss-title { font-size: clamp(2rem, 7vw, 2.8rem) !important; }
  .cf-title { font-size: clamp(1.8rem, 6vw, 2.4rem) !important; }
  .canvas-sub { font-size: 0.95rem !important; }

  /* ── FOOTER ── */
  .footer-top { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; padding: 3rem 5vw 2rem !important; }

  /* ── CURSOR ── */
  body { cursor: auto !important; }
  #cur, #cur-ring { display: none !important; }
}

/* ══════════════════════════════════════
   SMALL PHONE — max-width: 480px
══════════════════════════════════════ */
@media (max-width: 480px) {
  /* Typography */
  .hl-static, .hl-accent { font-size: clamp(2.6rem, 10vw, 4rem) !important; }
  .sec-title { font-size: clamp(1.8rem, 7vw, 2.5rem) !important; }
  .ph-title { font-size: clamp(1.9rem, 7.5vw, 2.6rem) !important; }
  .counter-num { font-size: 2.2rem !important; }
  .logo { font-size: 1.1rem !important; letter-spacing: 0.2em !important; }

  /* Sections */
  .sec { padding: 3rem 5vw !important; }
  .hero { padding: 6rem 5vw 2.5rem !important; }

  /* Footer: single column */
  .footer-top { grid-template-columns: 1fr !important; }

  /* Stat strip: 2-col still works at 480 */
  .stat-strip { grid-template-columns: 1fr 1fr !important; gap: 1rem !important; }
  .stat-num { font-size: 2rem !important; }

  /* Filter */
  .filter-btn { font-size: 0.62rem !important; padding: 0.3rem 0.65rem !important; }

  /* Process */
  .ps-card { padding: 1.5rem 1.25rem !important; }
  .ps-title { font-size: 1.4rem !important; }

  /* Case metrics */
  .cm-num { font-size: 1.8rem !important; }

  /* Thank you */
  .ty-title { font-size: clamp(2rem, 8vw, 3rem) !important; }
  .ty-actions { gap: 0.75rem !important; }

  /* Services page pricing */
  .pricing-card { padding: 2rem 1.5rem !important; }
  .pc-price { font-size: 2rem !important; }

  /* Contact form */
  .submit-btn { width: 100% !important; justify-content: center !important; }
}

/* ═══════════════════════════════════════════════════════════
   TABLET FIX — 768px to 1024px
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 769px) and (max-width: 1024px) {

  /* ── NAV ── */
  nav { padding: 1.25rem 3vw !important; }
  nav ul { gap: 1.25rem !important; }
  nav a { font-size: 0.78rem !important; letter-spacing: 0.1em !important; }
  .nav-btn {
    font-size: 0.72rem !important;
    padding: 0.55rem 1rem !important;
    letter-spacing: 0.1em !important;
    white-space: nowrap !important;
  }
  .logo { font-size: 1.3rem !important; letter-spacing: 0.2em !important; }

  /* ── HERO HEADLINE ── */
  .hl-static,
  .hl-accent {
    font-size: clamp(3.5rem, 7.5vw, 6rem) !important;
    white-space: normal !important;
  }
  .hero { padding: 7rem 4vw 3rem !important; }
  .hero-bottom {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .promise-card { display: none !important; }
  .hero-actions { flex-wrap: wrap !important; }
  .hero-actions .btn { flex: 1 1 auto !important; min-width: 180px !important; max-width: 280px !important; text-align: center !important; justify-content: center !important; }

  /* ── ABOUT ── */
  .about-grid { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .wwa-graphic-col { display: none !important; }

  /* ── SERVICES GRID ── */
  .svc-grid { grid-template-columns: 1fr 1fr !important; }
  .svc-card:nth-child(2n) { border-right: none !important; }
  .svc-card:nth-child(3n) { border-right: 1px solid rgba(92,142,125,0.1) !important; }

  /* ── WHY ── */
  .why-grid { grid-template-columns: 1fr 1fr !important; gap: 1.25rem !important; }

  /* ── STAT STRIP ── */
  .stat-strip { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── COUNTER STRIP ── */
  .counter-strip { gap: 3rem !important; }

  /* ── PROCESS ── */
  .ps-row { grid-template-columns: 1fr 60px 1fr !important; }

  /* ── CASES GRID ── */
  .cases-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── SERVICES PAGE ── */
  .ss-grid { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .ss-grid.flip { direction: ltr !important; }
  .pricing-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .page-hero { grid-template-columns: 1fr !important; padding: 9rem 4vw 4rem !important; }
  .hero-graphic { display: none !important; }

  /* ── CONTACT ── */
  .contact-main { grid-template-columns: 1fr !important; }
  .contact-info { border-left: none !important; border-top: 1px solid rgba(92,142,125,0.15) !important; }
  .form-row { grid-template-columns: 1fr 1fr !important; }

  /* ── FOOTER ── */
  .footer-top { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; }

  /* ── SECTION PADDING ── */
  .sec { padding: 5rem 4vw !important; }
}