/* ===========================================
   LIPILANE — WARM EDITORIAL THEME
   Cream × Terracotta × Navy
   =========================================== */
:root {
  --cream: #faf6ef;
  --cream2: #f3ede2;
  --cream3: #ede4d4;
  --terra: #e8621a;
  --terra-d: #c04f12;
  --terra-l: #fce9de;
  --navy: #1d2d4a;
  --navy2: #263654;
  --gold: #d4a017;
  --dark: #2c2c2c;
  --mid: #6b6560;
  --light: #9a9390;
  --white: #fff;
  --bdr: rgba(29,45,74,.1);
  --bdr2: rgba(29,45,74,.06);
  --r: 14px;
  --rl: 22px;
  --sh: 0 4px 32px rgba(29,45,74,.10);
  --sh2: 0 16px 64px rgba(29,45,74,.15);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--dark);
  background: var(--cream);
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Playfair Display', serif;
  line-height: 1.15;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

/* === SCROLL PROGRESS === */
#spb {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--terra), var(--gold));
  z-index: 9999;
  width: 0%;
  pointer-events: none;
  transition: width .1s linear;
}

/* === BACK TO TOP === */
#btt {
  position: fixed;
  bottom: 2rem; right: 2rem;
  z-index: 900;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  transition: all .3s;
  box-shadow: var(--sh);
  border: none;
}
#btt.vis { opacity: 1; transform: translateY(0); }
#btt:hover { background: var(--terra); }

/* === PAGE WIPE OVERLAY === */
#wipe {
  position: fixed;
  inset: 0;
  z-index: 5000;
  pointer-events: none;
  display: none;
}

/* === HEADER === */
#hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: .85rem 0;
  transition: all .4s;
  background: rgba(15,22,40,.6);
  backdrop-filter: blur(14px);
}
#hdr.sc {
  background: rgba(250,246,239,.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--bdr);
  box-shadow: 0 2px 24px rgba(29,45,74,.08);
  padding: .6rem 0;
}
.hdr-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Logo */
.logo-wrap { display: flex; align-items: center; cursor: pointer; }
.logo-pill {

  border-radius: 8px;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  transition: all .35s;
}
#hdr.sc .logo-pill { background: transparent; padding: 2px 0; }
.logo-nav { height: 50px; width: auto; object-fit: contain; }
.logo-nav {
  height: 50px;
  width: auto;
  object-fit: contain;
  transition: opacity .35s ease, transform .35s ease;
  position: absolute;
}

/* Light logo: visible by default (dark header) */
.logo-light {
  opacity: 1;
  transform: translateY(0);
}

/* Dark logo: hidden by default */
.logo-dark {
  opacity: 0;
  transform: translateY(-6px);
}

/* When header is scrolled (.sc class added by JS) */
#hdr.sc .logo-light {
  opacity: 0;
  transform: translateY(6px);
}

#hdr.sc .logo-dark {
  opacity: 1;
  transform: translateY(0);
}

/* Wrapper needs position:relative for absolute children */
.logo-wrap {
  position: relative;
  width: 140px;
  height: 50px;
  cursor: pointer;
}
/* Nav links */
nav.mn { display: flex; align-items: center; gap: .2rem; }
nav.mn a {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: .85rem;
  padding: .42rem .82rem;
  border-radius: 8px;
  color: rgba(255,255,255,.9);
  transition: all .2s;
  cursor: pointer;
}
nav.mn a:hover { color: #fff; background: rgba(232,98,26,.65); }
nav.mn a.act {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--terra);
}
nav.mn a.cta {
  background: rgba(232,98,26,.9);
  color: #fff !important;
  margin-left: .4rem;
  padding: .44rem 1.1rem;
  border-radius: 9px;
  box-shadow: 0 4px 14px rgba(232,98,26,.3);
}
nav.mn a.cta:hover { background: var(--terra); transform: translateY(-1px); }

/* Scrolled state */
#hdr.sc nav.mn a { color: var(--navy); }
#hdr.sc nav.mn a:hover { color: var(--terra); background: var(--terra-l); }
#hdr.sc nav.mn a.act { color: var(--terra); }
#hdr.sc nav.mn a.cta { background: var(--navy); color: #fff !important; }
#hdr.sc nav.mn a.cta:hover { background: var(--terra); }

/* Hamburger */
.hbg {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  border: none;
  background: none;
}
.hbg span {
  display: block;
  width: 24px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: .3s;
}
#hdr.sc .hbg span { background: var(--navy); }
.hbg.op span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hbg.op span:nth-child(2) { opacity: 0; }
.hbg.op span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
#mm {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--cream);
  z-index: 998;
  padding: 6rem 2rem 2rem;
  flex-direction: column;
  gap: .5rem;
  overflow-y: auto;
}
#mm.op { display: flex; }
#mm a {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.5rem;
  padding: .65rem 0;
  color: var(--navy);
  border-bottom: 1px solid var(--bdr2);
  cursor: pointer;
}
#mm a:hover { color: var(--terra); }
#mm a.cta {
  margin-top: .75rem;
  background: var(--terra);
  color: #fff;
  text-align: center;
  border-radius: 12px;
  padding: .8rem;
  font-size: 1rem;
  border: none;
}

/* Pages */
.page { display: none; }
.page.act { display: block; }

/* === HERO SECTION === */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: var(--navy);
  padding: 100px 0 60px;
}
.hero::before {
  content: '';
  position: absolute;
  right: -4%; top: 0; bottom: 0;
  width: 46%;
  background: var(--terra);
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  z-index: 0;
}
.hero-deco { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hero-deco::before {
  content: '';
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.07);
  top: -60px; left: -40px;
}
.hero-deco::after {
  content: '';
  position: absolute;
  width: 140px; height: 140px;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 22px 22px;
  top: 12%; right: 54%;
}
.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 0 2rem;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 3rem;
  align-items: center;
}
.hero-tag {
  display: inline-block;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.88);
  padding: .28rem .85rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.hero h1 {
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 1.2rem;
  letter-spacing: -.02em;
}
.hero h1 em {
  font-style: italic;
  background: linear-gradient(135deg, #fce9de, var(--terra));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub {
  color: rgba(255,255,255,.68);
  font-size: 1rem;
  margin-bottom: 2.2rem;
  max-width: 460px;
  line-height: 1.75;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: .85rem; }

.btn-hw {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  color: var(--navy);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: .9rem;
  padding: .8rem 1.6rem;
  border-radius: 11px;
  border: none;
  cursor: pointer;
  transition: all .25s;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.btn-hw:hover { background: var(--cream); transform: translateY(-2px); }

.btn-ho {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.35);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: .9rem;
  padding: .8rem 1.6rem;
  border-radius: 11px;
  cursor: pointer;
  transition: all .25s;
}
.btn-ho:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }

/* Hero stats */
.hero-stats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-end;
}
.hstat {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r);
  padding: 1.3rem 2rem;
  text-align: center;
  min-width: 155px;
}
.hstat .val {
  font-family: 'Playfair Display', serif;
  font-size: 2.4rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.hstat .lbl { color: rgba(255,255,255,.58); font-size: .77rem; margin-top: .25rem; }
.hstat:nth-child(even) { transform: translateX(18px); }

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  color: rgba(255,255,255,.4);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  z-index: 2;
}
.hero-scroll-line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, rgba(255,255,255,.5), transparent);
  animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%, 100% { transform: scaleY(1); opacity: .5; }
  50% { transform: scaleY(.65); opacity: 1; }
}

/* === MARQUEE STRIP === */
.mstrip { background: var(--navy); padding: 1rem 0; overflow: hidden; }
.mtrack {
  display: flex;
  white-space: nowrap;
  animation: mScroll 28s linear infinite;
}
.mtrack:hover { animation-play-state: paused; }
.mi {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: 0 2rem;
  font-weight: 600;
  font-size: .88rem;
  color: rgba(255,255,255,.55);
  flex-shrink: 0;
}
.mi i { color: var(--terra); }
@keyframes mScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* === SECTION COMMON === */
.sec { padding: 6rem 0; position: relative; }
.slbl {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: .8rem;
}
.slbl::after {
  content: '';
  width: 36px; height: 1.5px;
  background: var(--terra);
  display: inline-block;
}
.stit { font-size: clamp(1.9rem, 3.8vw, 2.8rem); font-weight: 900; color: var(--navy); margin-bottom: .9rem; }
.ssub { color: var(--mid); font-size: 1rem; max-width: 540px; line-height: 1.75; }

/* === OFFERINGS === */
.off-sec { background: var(--cream2); }
.off-sec::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--terra), var(--gold), transparent);
}
.cgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.3rem; margin-top: 3rem; }
.ccard {
  background: var(--white);
  border-radius: var(--rl);
  padding: 1.9rem 1.75rem;
  border: 1px solid var(--bdr2);
  transition: all .3s;
  cursor: pointer;
}
.ccard:hover { transform: translateY(-7px); box-shadow: var(--sh2); }
.ccard:hover .ciw { background: var(--terra); color: #fff; }
.ciw {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--terra-l);
  color: var(--terra);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  margin-bottom: 1.25rem;
  transition: all .3s;
}
.ccard h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .5rem;
}
.ccard p { font-size: .84rem; color: var(--mid); line-height: 1.6; }

/* === WHY US === */
.why-wrap { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; }
.why-left {
  background: var(--cream);
  padding: 5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.why-ghost {
  position: absolute;
  bottom: 1.5rem; left: 0;
  font-family: 'Playfair Display', serif;
  font-size: 5rem;
  font-weight: 900;
  opacity: .04;
  color: var(--navy);
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}
.why-right {
  background: var(--navy);
  padding: 5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.why-cards { display: flex; flex-direction: column; gap: .9rem; }
.wcard {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r);
  padding: 1.2rem 1.4rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: .25s;
}
.wcard:hover { background: rgba(255,255,255,.11); transform: translateX(5px); }
.wci {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(232,98,26,.2);
  color: var(--terra);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.wcard h4 { font-weight: 700; font-size: .9rem; color: #fff; margin-bottom: .2rem; }
.wcard p { font-size: .8rem; color: rgba(255,255,255,.5); line-height: 1.5; }

/* === NUMBERS === */
.nums {
  background: var(--terra);
  padding: 4.5rem 0;
  position: relative;
  overflow: hidden;
}
.nums::before {
  content: 'LIPILANE';
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-size: 12rem;
  font-weight: 900;
  color: rgba(255,255,255,.05);
  letter-spacing: .05em;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  white-space: nowrap;
  pointer-events: none;
}
.ngrid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  position: relative;
  z-index: 1;
}
.ni {
  text-align: center;
  padding: 1.5rem 1rem;
  border-right: 1px solid rgba(255,255,255,.15);
}
.ni:last-child { border-right: none; }
.nv {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  margin-bottom: .4rem;
}
.nl { font-size: .8rem; color: rgba(255,255,255,.7); font-weight: 500; }

/* === CLIENTS === */
.cl-wrap { overflow: hidden; padding: 1.5rem 0; margin-top: 2.5rem; position: relative; }
.cl-wrap::before, .cl-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.cl-wrap::before { left: 0; background: linear-gradient(to right, var(--cream3), transparent); }
.cl-wrap::after { right: 0; background: linear-gradient(to left, var(--cream3), transparent); }
.cl-track {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  animation: clScroll 22s linear infinite;
  white-space: nowrap;
}
.cl-track:hover { animation-play-state: paused; }
@keyframes clScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.cl-item {
  flex-shrink: 0;
  background: var(--white);
  border: 1px solid var(--bdr2);
  border-radius: var(--r);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  min-height: 72px;
  transition: .25s;
}
.cl-item:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.cl-item img { max-height: 42px; max-width: 120px; object-fit: contain; }
.cl-item .cl-ph {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: .85rem;
  color: var(--mid);
  text-align: center;
  line-height: 1.3;
}
.cl-item:hover .cl-ph { color: var(--terra); }

/* === CTA BLOCK === */
.cta-blk {
  background: var(--navy);
  border-radius: 28px;
  padding: 4.5rem 3.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-blk::before {
  content: '';
  position: absolute;
  width: 350px; height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,98,26,.22), transparent 70%);
  top: -140px; right: -60px;
  pointer-events: none;
}
.cta-blk::after {
  content: '';
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,160,23,.14), transparent 70%);
  bottom: -100px; left: -40px;
  pointer-events: none;
}
.cta-tag {
  display: inline-block;
  background: rgba(232,98,26,.15);
  color: var(--terra);
  border: 1px solid rgba(232,98,26,.25);
  padding: .28rem .85rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  position: relative;
  z-index: 1;
}
.cta-blk h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: .85rem;
  position: relative;
  z-index: 1;
}
.cta-blk p {
  color: rgba(255,255,255,.6);
  max-width: 500px;
  margin: 0 auto 2rem;
  position: relative;
  z-index: 1;
  line-height: 1.75;
}
.cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.btn-cw {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  color: var(--navy);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: .92rem;
  padding: .82rem 1.7rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: .25s;
  box-shadow: 0 4px 18px rgba(0,0,0,.12);
}
.btn-cw:hover { background: var(--cream); transform: translateY(-2px); }
.btn-ct {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--terra);
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: .92rem;
  padding: .82rem 1.7rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: .25s;
  box-shadow: 0 4px 18px rgba(232,98,26,.3);
}
.btn-ct:hover { background: var(--terra-d); transform: translateY(-2px); }
.btn-cg {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  color: rgba(255,255,255,.82);
  border: 1.5px solid rgba(255,255,255,.25);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: .92rem;
  padding: .82rem 1.7rem;
  border-radius: 12px;
  cursor: pointer;
  transition: .25s;
}
.btn-cg:hover { background: rgba(255,255,255,.08); transform: translateY(-2px); }

/* === PAGE HEROES === */
.pgh { padding: 9rem 2rem 4rem; position: relative; overflow: hidden; }
.pgh-navy { background: var(--navy); }
.pgh-terra { background: var(--terra); }
.pgh-cream { background: var(--cream2); }
.pght {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  padding: .28rem .85rem;
  border-radius: 999px;
}
.pgh-navy .pght { background: rgba(232,98,26,.15); color: var(--terra); border: 1px solid rgba(232,98,26,.25); }
.pgh-terra .pght { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.pgh-cream .pght { background: var(--terra-l); color: var(--terra); border: 1px solid rgba(232,98,26,.15); }
.pgh h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 900; margin-bottom: .85rem; }
.pgh-navy h1, .pgh-terra h1 { color: #fff; }
.pgh-cream h1 { color: var(--navy); }
.pgh p { font-size: 1.02rem; max-width: 580px; line-height: 1.75; }
.pgh-navy p { color: rgba(255,255,255,.62); }
.pgh-terra p { color: rgba(255,255,255,.78); }
.pgh-cream p { color: var(--mid); }
.pghd {
  position: absolute;
  right: 4%; bottom: -10px;
  font-family: 'Playfair Display', serif;
  font-size: 9rem;
  font-weight: 900;
  opacity: .05;
  line-height: 1;
  pointer-events: none;
  color: #fff;
}
.pgh-cream .pghd { color: var(--navy); }
.pcont { padding: 3.5rem 0 5.5rem; background: var(--cream); }

/* === ABOUT === */
.agrid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: start; margin-bottom: 3.5rem; }
.atext h2 { font-size: 1.85rem; font-weight: 900; color: var(--navy); margin-bottom: 1rem; }
.atext p { color: var(--mid); line-height: 1.8; margin-bottom: .9rem; font-size: .96rem; }
.atags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.atag {
  padding: .28rem .8rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  background: var(--terra-l);
  color: var(--terra);
  border: 1px solid rgba(232,98,26,.12);
}
.astats { background: var(--navy); border-radius: var(--rl); overflow: hidden; }
.asgrid { display: grid; grid-template-columns: 1fr 1fr; }
.asc {
  padding: 2rem 1.5rem;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.asc:nth-child(2n) { border-right: none; }
.asc:nth-child(n+3) { border-bottom: none; }
.asc .av { font-family: 'Playfair Display', serif; font-size: 2.4rem; font-weight: 900; color: var(--terra); line-height: 1; }
.asc .al { font-size: .76rem; color: rgba(255,255,255,.5); margin-top: .35rem; }
.vgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.1rem; margin-bottom: 3.5rem; }
.vcard {
  background: var(--white);
  border: 1px solid var(--bdr2);
  border-radius: var(--r);
  padding: 1.4rem 1.2rem;
  transition: .25s;
}
.vcard:hover { border-color: rgba(232,98,26,.2); transform: translateY(-4px); box-shadow: var(--sh); }
.vcard h3 { font-weight: 700; color: var(--navy); margin-bottom: .35rem; font-size: .95rem; }
.vcard p { font-size: .83rem; color: var(--mid); }

/* === PRINT === */
.pitems { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: .85rem; margin-bottom: 2.5rem; }
.pi {
  background: var(--white);
  border: 2px solid var(--bdr2);
  border-radius: var(--r);
  padding: 1.2rem .9rem;
  text-align: center;
  cursor: pointer;
  transition: .22s;
  position: relative;
}
.pi:hover { border-color: var(--terra); transform: translateY(-3px); box-shadow: var(--sh); }
.pi.sel { border-color: var(--terra); background: var(--terra-l); }
.pi .em { font-size: 1.8rem; margin-bottom: .45rem; display: block; transition: .2s; }
.pi:hover .em { transform: scale(1.15) rotate(-8deg); }
.pi h4 { font-weight: 700; font-size: .83rem; color: var(--navy); }
.pi small { display: block; font-size: .71rem; color: var(--light); margin-top: .15rem; }

/* === BULK === */
.bperks { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-bottom: 2.5rem; }
.bp { background: var(--navy); border-radius: var(--r); padding: 1.4rem 1.2rem; transition: .25s; }
.bp:hover { transform: translateY(-3px); }
.bp i { font-size: 1.5rem; color: var(--terra); display: block; margin-bottom: .6rem; }
.bp h4 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: .94rem; color: #fff; margin-bottom: .3rem; }
.bp p { font-size: .8rem; color: rgba(255,255,255,.5); line-height: 1.5; }
.btabs { display: grid; grid-template-columns: repeat(3,1fr); gap: .9rem; margin-bottom: 2rem; }
.btab {
  background: var(--white);
  border: 2px solid var(--bdr2);
  border-radius: var(--r);
  padding: 1.2rem;
  text-align: center;
  cursor: pointer;
  transition: .22s;
}
.btab:hover, .btab.sel { border-color: var(--navy); background: var(--navy); transform: translateY(-2px); }
.btab i { font-size: 1.65rem; color: var(--terra); display: block; margin-bottom: .45rem; }
.btab span { font-weight: 700; font-size: .88rem; color: var(--navy); }
.btab.sel span, .btab:hover span { color: #fff; }

/* === CONTACT === */
.cogrid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 2.5rem; }
.cocard {
  background: var(--white);
  border: 1px solid var(--bdr2);
  border-radius: var(--r);
  padding: 1.2rem 1.4rem;
  margin-bottom: .8rem;
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  transition: .22s;
}
.cocard:hover { border-color: rgba(232,98,26,.18); transform: translateX(4px); }
.coic {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--terra-l);
  color: var(--terra);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: .2s;
}
.cocard:hover .coic { background: var(--terra); color: #fff; }
.cocard h4 { font-weight: 700; color: var(--navy); margin-bottom: .2rem; font-size: .88rem; }
.cocard p, .cocard a { font-size: .84rem; color: #e3611a; line-height: 1.6; }
.cocard a { color: var(--terra); font-weight: 600; }

/* === FORMS === */
.fbox {
  background: var(--white);
  border: 1px solid var(--bdr2);
  border-radius: var(--rl);
  padding: 2.25rem;
  box-shadow: var(--sh);
}
.fbox h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1.4rem;
  font-size: 1.2rem;
}
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fg { margin-bottom: .1rem; }
.fg.full { grid-column: 1 / -1; }
.fg label { display: block; font-weight: 600; font-size: .79rem; color: var(--dark); margin-bottom: .35rem; }
.req { color: var(--terra); }
.fc {
  display: block;
  width: 100%;
  padding: .68rem 1rem;
  border: 1.5px solid var(--bdr);
  border-radius: 9px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .89rem;
  color: var(--dark);
  background: var(--cream);
  transition: all .2s;
  outline: none;
}
.fc:focus { border-color: var(--terra); box-shadow: 0 0 0 3px rgba(232,98,26,.08); background: #fff; }
.fc::placeholder { color: var(--light); }
.fc.err { border-color: #e53e3e; }
textarea.fc { resize: vertical; min-height: 108px; }
select.fc {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b6560' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
}
.emsg { font-size: .75rem; color: #e53e3e; margin-top: .28rem; font-weight: 500; min-height: 1.1rem; }
.qbtns { display: flex; flex-wrap: wrap; gap: .5rem; }
.qbtn {
  padding: .4rem .9rem;
  border-radius: 8px;
  border: 1.5px solid var(--bdr);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .81rem;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  color: var(--mid);
  transition: .2s;
}
.qbtn.sel, .qbtn:hover { border-color: var(--terra); background: var(--terra-l); color: var(--terra); }
.fsrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.6rem;
  flex-wrap: wrap;
}
.btn-sub {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--navy);
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: .92rem;
  padding: .8rem 1.7rem;
  border-radius: 11px;
  border: none;
  cursor: pointer;
  transition: .25s;
}
.btn-sub:hover { background: var(--terra); transform: translateY(-2px); }
.sbox {
  text-align: center;
  padding: 3.5rem 2rem;
  background: var(--white);
  border-radius: var(--rl);
  border: 1px solid var(--bdr2);
}
.sico {
  width: 70px; height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.2rem;
  box-shadow: 0 8px 24px rgba(34,197,94,.28);
  animation: sPop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes sPop {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.sico i { font-size: 2rem; color: #fff; }
.sbox h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--navy);
  margin-bottom: .45rem;
}
.sbox p { color: var(--mid); font-size: .88rem; max-width: 340px; margin: 0 auto 1rem; }
.btn-rst {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--cream2);
  color: var(--navy);
  font-weight: 600;
  font-size: .88rem;
  padding: .65rem 1.35rem;
  border-radius: 10px;
  border: 1px solid var(--bdr);
  cursor: pointer;
  transition: .2s;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.btn-rst:hover { background: var(--cream3); }

/* === FOOTER === */
footer {
  background: var(--navy);
  padding: 4rem 0 0;
  position: relative;
  overflow: hidden;
}
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--terra), var(--gold), transparent);
}
.finn { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; }
.logo-ft {
  height: 50px; width: auto;
  object-fit: contain;
  margin-bottom: 1rem;
  background: rgba(255,255,255,.9);
  border-radius: 8px;
  padding: 5px 10px;
}
.fbp { font-size: .86rem; line-height: 1.8; color: rgba(255,255,255,.48); max-width: 300px; }
.fsoc { display: flex; gap: .55rem; margin-top: 1.2rem; }
.fsoc a {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  color: rgba(255,255,255,.48);
  transition: .2s;
}
.fsoc a:hover { background: rgba(232,98,26,.2); color: var(--terra); }
.fcol h4 { font-family: 'Playfair Display', serif; font-weight: 700; color: #fff; margin-bottom: 1rem; font-size: .98rem; }
.fcol ul { list-style: none; }
.fcol li { margin-bottom: .5rem; }
.fcol a { font-size: .84rem; color: rgba(255,255,255,.42); cursor: pointer; display: inline-block; transition: .2s; }
.fcol a:hover { color: var(--terra); transform: translateX(3px); }
.fco { font-size: .82rem; display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .65rem; color: rgba(255,255,255,.42); }
.fco i { color: var(--terra); margin-top: .15rem; flex-shrink: 0; }
.fco a { color: rgba(255,255,255,.42); transition: .2s; }
.fco a:hover { color: var(--terra); }
.fbot {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 1.4rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
}
.fbot p { font-size: .79rem; color: rgba(255,255,255,.28); }
.fpow { font-size: .79rem; color: rgba(255,255,255,.28); display: flex; align-items: center; gap: .3rem; }
.fpow a { color: var(--terra); font-weight: 600; }

/* === ANIMATIONS === */
.anim-up { animation: animUp .65s cubic-bezier(.16,1,.3,1) both; }
.anim-left { animation: animLeft .65s cubic-bezier(.16,1,.3,1) both; }
.anim-right { animation: animRight .65s cubic-bezier(.16,1,.3,1) both; }
.anim-scale { animation: animScale .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes animUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes animLeft { from { opacity:0; transform:translateX(-30px); } to { opacity:1; transform:translateX(0); } }
@keyframes animRight { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:translateX(0); } }
@keyframes animScale { from { opacity:0; transform:scale(.94); } to { opacity:1; transform:scale(1); } }
.d1{animation-delay:.1s} .d2{animation-delay:.18s} .d3{animation-delay:.27s}
.d4{animation-delay:.36s} .d5{animation-delay:.45s} .d6{animation-delay:.54s}

/* === PAGE TRANSITIONS === */
.wt-slide { animation: wtSlide .5s cubic-bezier(.77,0,.18,1) forwards; }
.wt-curtain { animation: wtCurtain .5s cubic-bezier(.77,0,.18,1) forwards; }
.wt-circle { animation: wtCircle .5s cubic-bezier(.77,0,.18,1) forwards; }
.wt-diag { animation: wtDiag .5s cubic-bezier(.77,0,.18,1) forwards; }
.wt-fade { animation: wtFade .35s ease forwards; }
.wo-slide { animation: woSlide .4s cubic-bezier(.77,0,.18,1) forwards; }
.wo-curtain { animation: woCurtain .4s cubic-bezier(.77,0,.18,1) forwards; }
.wo-circle { animation: woCircle .4s cubic-bezier(.77,0,.18,1) forwards; }
.wo-diag { animation: woDiag .4s cubic-bezier(.77,0,.18,1) forwards; }
.wo-fade { animation: woFade .3s ease forwards; }
@keyframes wtSlide { from{transform:translateX(-100%)} to{transform:translateX(0)} }
@keyframes wtCurtain { 0%{transform:scaleY(0);transform-origin:top} 100%{transform:scaleY(1);transform-origin:top} }
@keyframes wtCircle { from{clip-path:circle(0% at 50% 50%)} to{clip-path:circle(150% at 50% 50%)} }
@keyframes wtDiag { from{clip-path:polygon(0 0,0 0,0 100%,0 100%)} to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)} }
@keyframes wtFade { from{opacity:0} to{opacity:1} }
@keyframes woSlide { from{transform:translateX(0)} to{transform:translateX(100%)} }
@keyframes woCurtain { 0%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }
@keyframes woCircle { from{clip-path:circle(150% at 50% 50%)} to{clip-path:circle(0% at 50% 50%)} }
@keyframes woDiag { from{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)} to{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)} }
@keyframes woFade { from{opacity:1} to{opacity:0} }

/* === VALIDATION STYLES === */
.field-hint {
  font-size: .72rem;
  color: var(--mid);
  margin-top: .2rem;
  display: block;
}
.fc.valid { border-color: #22c55e; }
.char-count {
  font-size: .72rem;
  color: var(--light);
  text-align: right;
  margin-top: .2rem;
}
.char-count.warn { color: #f59e0b; }
.char-count.over { color: #e53e3e; }
.form-progress {
  height: 3px;
  background: var(--bdr);
  border-radius: 999px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.form-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--terra), var(--gold));
  border-radius: 999px;
  transition: width .4s ease;
}
.phone-hint { font-size: .72rem; color: var(--light); margin-top: .2rem; }

/* === RESPONSIVE === */
@media (max-width: 1024px) {
  .cgrid { grid-template-columns: repeat(2,1fr); }
  .bperks { grid-template-columns: repeat(2,1fr); }
  .vgrid { grid-template-columns: repeat(2,1fr); }
  .why-wrap { grid-template-columns: 1fr; }
  .why-left { padding: 4rem 2rem; }
  .why-right { padding: 4rem 2rem; }
  .agrid { grid-template-columns: 1fr; }
  .cogrid { grid-template-columns: 1fr; }
  .finn { grid-template-columns: 1fr 1fr; }
  .ngrid { grid-template-columns: repeat(2,1fr); }
  .ni:nth-child(2) { border-right: none; }
  .ni:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.1); }
}

@media (max-width: 640px) {
  nav.mn { display: none; }
  .hbg { display: flex; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-stats { display: none; }
  .cgrid, .vgrid { grid-template-columns: 1fr; }
  .bperks { grid-template-columns: 1fr 1fr; }
  .btabs { grid-template-columns: 1fr; }
  .finn { grid-template-columns: 1fr; }
  .fbot { flex-direction: column; text-align: center; }
  .pgh { padding: 7.5rem 1.5rem 3rem; }
  .fgrid { grid-template-columns: 1fr; }
  .why-left { padding: 3rem 1.5rem; }
  .why-right { padding: 3rem 1.5rem; }
  .cogrid { grid-template-columns: 1fr; }
  .cta-blk { padding: 3rem 1.5rem; }
}