/* ============================================================
   TRISHOOL ENTERPRISES
   Navy / Royal blue text · White / off-white / gray surfaces
   Emerald green action buttons
   ============================================================ */

:root{
  /* brand */
  --navy:        #0B2A5B;
  --navy-soft:   #143B7A;
  --royal:       #1D4ED8;
  --royal-soft:  #3B82F6;
  --emerald:     #059669;
  --emerald-dark:#047857;
  --emerald-light:#D1FAE5;
  /* Buttons carry white text, which needs 4.5:1. #059669 only reaches 3.76:1,
     so filled buttons use the deeper emerald-700 instead. */
  --emerald-btn: #047857;
  --emerald-btn-hover: #065F46;

  /* neutrals */
  --white:  #FFFFFF;
  --off:    #F6F8FB;
  --gray:   #5F6E85;   /* 4.9:1 on --off, where #64748B fell just short */
  --gray-2: #94A3B8;
  --line:   #E2E8F0;
  --ink:    #0F172A;

  /* semantic */
  --amber: #B45309;

  --radius:   16px;
  --radius-sm: 10px;
  --shadow:    0 4px 20px rgba(11,42,91,.08);
  --shadow-lg: 0 18px 50px rgba(11,42,91,.16);

  --container: 1180px;
  --header-h: 76px;

  /* editorial serif, used for the founder's journey */
  --serif-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --serif-body:    'Lora', Georgia, 'Times New Roman', serif;
}

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

/* `clip` rather than `hidden`: hidden would make <html> a scroll container and
   silently break the sticky header. clip contains the off-canvas cart drawer
   without that side effect. */
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 12px); overflow-x:clip; }

body{
  margin:0;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Ubuntu,Arial,sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

body.no-scroll{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:var(--royal); text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5{ margin:0; line-height:1.2; color:var(--navy); font-weight:700; }
p{ margin:0; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:20px; }
.container.narrow{ max-width:820px; }

.tiny{ font-size:.82rem; color:var(--gray); line-height:1.55; }

/* ============================ BUTTONS ============================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:inherit; font-size:.95rem; font-weight:600;
  padding:12px 22px; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:.22s ease; text-align:center; line-height:1.2;
  white-space:nowrap;
}
.btn .ico{ width:19px; height:19px; fill:currentColor; flex:none; }

.btn-primary{
  background:var(--emerald-btn); color:#fff; position:relative; overflow:hidden;
  box-shadow:0 6px 18px rgba(5,150,105,.28);
}
/* Shine sweep. */
.btn-primary::after{
  content:''; position:absolute; top:0; left:0; width:55%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);
  transform:translateX(-130%); transition:transform .6s ease;
}
.btn-primary:hover::after{ transform:translateX(240%); }
.btn-primary:hover{
  background:var(--emerald-btn-hover); transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(5,150,105,.4);
}

.btn-outline{ background:var(--white); color:var(--navy); border-color:var(--navy); }
.btn-outline:hover{ background:var(--navy); color:#fff; transform:translateY(-2px); }

.btn-ghost{ background:transparent; color:var(--navy); border-color:transparent; }
.btn-ghost:hover{ color:var(--emerald); }

.btn-link{ background:none; color:var(--gray); border:none; padding:8px; font-size:.85rem; }
.btn-link:hover{ color:var(--navy); text-decoration:underline; }

.btn-lg{ padding:15px 30px; font-size:1.02rem; }
.btn-sm{ padding:8px 15px; font-size:.82rem; }
.btn-block{ display:flex; width:100%; }

.btn:focus-visible,.nav a:focus-visible,.summary:focus-visible,
.faq-list summary:focus-visible,.cart-close:focus-visible,
.cart-btn:focus-visible,.nav-toggle:focus-visible,.pay-opt input:focus-visible{
  outline:3px solid var(--royal-soft); outline-offset:2px;
}

/* ============================ HEADER ============================ */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  height:var(--header-h);
  display:flex; align-items:center; gap:20px;
}

.brand{ display:flex; align-items:center; gap:11px; flex:none; }
.brand-logo{ width:48px; height:47px; object-fit:contain; flex:none; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong{ font-size:1.06rem; font-weight:800; color:var(--navy); letter-spacing:.3px; }
.brand-text em{ font-style:normal; font-size:.7rem; font-weight:700; color:var(--royal); letter-spacing:2.2px; }
.brand-text small{ font-size:.6rem; color:var(--gray); letter-spacing:.4px; margin-top:2px; }

.nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav a{
  padding:9px 14px; border-radius:999px;
  color:var(--navy); font-size:.9rem; font-weight:500;
  transition:.2s;
}
.nav a:hover{ background:var(--off); color:var(--royal); }

/* Admin entry in the navigation. Always shown - it only opens the sign-in
   form - and set apart with a hairline so it reads as staff rather than as
   just another section. */
.nav a.nav-admin{
  margin-left:6px; border:1px solid var(--line);
  color:var(--emerald-dark); font-weight:600;
  background:var(--off);
}
.nav a.nav-admin:hover{
  background:var(--emerald-light); color:var(--emerald-dark);
  border-color:var(--emerald-btn);
}

/* The footer link is deliberately quiet - it is the way in when nobody is
   signed in yet. */
.foot-admin{
  color:inherit; text-decoration:underline;
  text-underline-offset:3px;
}
.foot-admin:hover{ color:var(--emerald-light); }

.header-actions{ display:flex; align-items:center; gap:8px; flex:none; }

.cart-btn{
  position:relative; width:44px; height:44px; flex:none;
  border-radius:50%; border:1px solid var(--line); background:var(--white);
  cursor:pointer; display:grid; place-items:center; transition:.2s;
}
.cart-btn:hover{ border-color:var(--emerald); background:var(--emerald-light); }
.cart-btn svg{ width:21px; height:21px; fill:none; stroke:var(--navy); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.cart-count{
  position:absolute; top:-4px; right:-4px;
  min-width:20px; height:20px; padding:0 5px;
  display:grid; place-items:center;
  background:var(--emerald-btn); color:#fff;
  font-size:.7rem; font-weight:700; border-radius:999px;
  border:2px solid #fff;
}
.cart-count[data-empty="true"]{ display:none; }

.nav-toggle{
  display:none; width:42px; height:42px; flex:none;
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  cursor:pointer; padding:11px 10px;
}
.nav-toggle span{ display:block; height:2px; background:var(--navy); border-radius:2px; transition:.25s; }
.nav-toggle span + span{ margin-top:4px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ============================ HERO ============================ */
.hero{ position:relative; padding:76px 0 84px; background:var(--off); overflow:hidden; }

/* Aurora mesh: three slow-drifting colour fields. Cheap, GPU-friendly, and
   far more modern than a flat tinted background. */
.hero-bg{
  position:absolute; inset:-20%;
  pointer-events:none;
  background:
    radial-gradient(46% 42% at 22% 26%, rgba(29,78,216,.20), transparent 62%),
    radial-gradient(42% 40% at 78% 22%, rgba(5,150,105,.20), transparent 60%),
    radial-gradient(52% 46% at 58% 88%, rgba(11,42,91,.16), transparent 64%);
  filter:blur(8px);
  animation:aurora 24s ease-in-out infinite alternate;
}
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 0%, transparent 40%, var(--off) 92%);
}
@keyframes aurora{
  0%   { transform:translate3d(0,0,0) scale(1); }
  50%  { transform:translate3d(3%,-2%,0) scale(1.08); }
  100% { transform:translate3d(-3%,2%,0) scale(1.04); }
}

/* Fine grain, so the large flat areas stop looking plasticky. */
.grain{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

.hero-inner{
  position:relative;
  display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:center;
}

.pill{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--white); border:1px solid var(--line);
  color:var(--navy); font-size:.82rem; font-weight:600;
  padding:7px 16px; border-radius:999px; box-shadow:var(--shadow);
}
.pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--emerald); box-shadow:0 0 0 3px rgba(5,150,105,.2); }

.hero h1{
  font-size:clamp(2.3rem,5.4vw,3.9rem); font-weight:800;
  margin:20px 0 18px; letter-spacing:-.035em; line-height:1.08;
}
.grad{
  background:linear-gradient(100deg,var(--royal) 0%,#0B2A5B 42%,var(--emerald) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:shimmer 9s ease-in-out infinite alternate;
}
@keyframes shimmer{ from{ background-position:0% 50% } to{ background-position:100% 50% } }

.lead{ font-size:1.06rem; color:var(--gray); max-width:52ch; }

.hero-since{
  display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin-top:18px; font-size:.87rem; color:var(--gray);
  background:rgba(255,255,255,.72); border:1px solid var(--line);
  padding:8px 16px; border-radius:999px; backdrop-filter:blur(6px);
}
.hero-since strong{ color:var(--navy); font-weight:700; }
.hero-since-dot{
  width:8px; height:8px; border-radius:50%; background:var(--emerald);
  box-shadow:0 0 0 0 rgba(5,150,105,.55); animation:ping 2.6s ease-out infinite;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(5,150,105,.5) }
  70%{ box-shadow:0 0 0 9px rgba(5,150,105,0) }
  100%{ box-shadow:0 0 0 0 rgba(5,150,105,0) }
}

.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 24px; }

.hero-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.hero-chips li{
  font-size:.82rem; font-weight:500; color:var(--navy);
  background:var(--white); border:1px solid var(--line);
  padding:6px 14px; border-radius:999px;
}

/* Frosted panel, so the aurora shows through instead of being cut off. */
.hero-card{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(18px) saturate(1.3);
  border-radius:22px; padding:28px; box-shadow:var(--shadow-lg);
}
.hero-card::before{
  content:''; display:block; height:1px; margin:-28px -28px 22px;
  background:linear-gradient(90deg,transparent,rgba(5,150,105,.5),transparent);
}

/* ============================ TICKER ============================ */
.ticker{
  background:var(--navy); color:#fff; overflow:hidden;
  /* Deliberately generous. This is the first thing on the page and its job
     is to be read, so it is sized like a banner rather than a caption. */
  padding:19px 0; border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.ticker-track{ display:flex; width:max-content; animation:slide 34s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-group{ display:flex; align-items:center; flex:none; }
.ticker-group span{
  font-size:1.02rem; font-weight:700; letter-spacing:1.3px;
  text-transform:uppercase; white-space:nowrap; color:rgba(255,255,255,.94);
  padding-inline:22px;
}
/* "Since 1997" is the reason the strip is trusted at all, so it is the one
   item picked out in colour rather than left as another list entry. */
.ticker-group span:first-child{ color:#fff; }
.ticker-group span:first-child::after{
  content:''; display:inline-block; vertical-align:middle;
  width:6px; height:6px; margin-left:12px; border-radius:50%;
  background:var(--emerald);
}
.ticker-group b{
  width:7px; height:7px; border-radius:50%;
  background:var(--emerald); flex:none;
  box-shadow:0 0 0 4px rgba(5,150,105,.18);
}
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.hero-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.hero-card-head h2{ font-size:1.16rem; }
.tag{
  background:var(--emerald-light); color:var(--emerald-dark);
  font-size:.7rem; font-weight:700; padding:5px 11px; border-radius:999px;
  letter-spacing:.4px; text-transform:uppercase;
}

.rate-list{ margin-bottom:20px; }
.rate-list li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 0; border-bottom:1px dashed var(--line); font-size:.93rem;
}
.rate-list li:last-child{ border-bottom:none; }
.rate-list b{ color:var(--navy); font-weight:600; }
.rate-list .price{ color:var(--emerald-dark); font-weight:700; white-space:nowrap; }
.hero-card .tiny{ text-align:center; margin-top:14px; }

/* ============================ TRUST STRIP ============================ */
.trust-strip{ background:var(--navy); color:#fff; padding:30px 0; }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
.trust-item strong{ display:block; font-size:1.5rem; font-weight:800; color:#fff; }
.trust-item span{ font-size:.84rem; color:rgba(255,255,255,.72); }

/* ============================ SECTIONS ============================ */
.section{ padding:84px 0; }
.section-alt{ background:var(--off); }

.section-head{ text-align:center; max-width:660px; margin:0 auto 46px; position:relative; }
.eyebrow{
  display:inline-block; font-size:.76rem; font-weight:700;
  color:var(--emerald-dark); background:var(--emerald-light);
  padding:6px 15px; border-radius:999px;
  letter-spacing:1.4px; text-transform:uppercase; margin-bottom:16px;
}
.section-head h2{
  font-size:clamp(1.6rem,3.2vw,2.3rem); font-weight:800;
  letter-spacing:-.025em; line-height:1.16;
}
/* Hand-drawn style flourish under each section heading. */
.section-head h2::after{
  content:''; display:block; width:66px; height:4px; margin:16px auto 0;
  border-radius:4px;
  background:linear-gradient(90deg,var(--royal),var(--emerald));
}
.section-head p{ color:var(--gray); margin-top:18px; font-size:1rem; }

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

/* ============================ PRODUCT CARDS ============================ */
/* Bento grid: an asymmetric 4-column layout rather than four equal tiles.
   This is the single biggest current-design signal on the page, and it also
   gives the most-booked service the visual weight it deserves. */
#servicesGrid{
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(0,auto);
}
.card--lead{ grid-column:span 2; grid-row:span 2; }
.card--wide{ grid-column:span 2; }
#servicesGrid .card--lead{ padding:32px; }
#servicesGrid .card--lead h3{ font-size:1.5rem; }
#servicesGrid .card--lead p{ font-size:.95rem; max-width:38ch; }
#servicesGrid .card--lead .card-ico{
  width:64px; height:64px; font-size:1.8rem; border-radius:18px; margin-bottom:20px;
}
#servicesGrid .card--lead .price .amt{ font-size:2.6rem; }

.card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px;
  display:flex; flex-direction:column;
  transition:.28s cubic-bezier(.2,.7,.3,1); position:relative; overflow:hidden;
}
.card::before{
  content:''; position:absolute; inset:0 auto 0 0; width:4px;
  background:var(--emerald); transform:scaleY(0); transform-origin:bottom; transition:.28s;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:#CBD5E1; }
.card:hover::before{ transform:scaleY(1); transform-origin:top; }

/* Sheen that wipes across on hover. */
.card::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 62%);
  transform:translateX(-115%); transition:transform .7s ease;
}
.card:hover::after{ transform:translateX(115%); }

.card-ico{
  width:52px; height:52px; border-radius:14px;
  display:grid; place-items:center; font-size:1.5rem;
  background:linear-gradient(135deg,var(--navy),var(--royal));
  color:#fff; margin-bottom:16px; flex:none;
  transition:transform .3s cubic-bezier(.2,.8,.3,1.4);
}
.card:hover .card-ico{ transform:translateY(-3px) rotate(-6deg) scale(1.06); }

/* Small tags inside the lead card */
.chip-row{ display:flex; flex-wrap:wrap; gap:7px; margin:18px 0 4px; }
.chip-row li{
  font-size:.73rem; font-weight:600; color:var(--navy);
  background:var(--off); border:1px solid var(--line);
  padding:5px 12px; border-radius:999px;
}
.card h3{ font-size:1.08rem; font-weight:700; margin-bottom:8px; }
.card p{ font-size:.9rem; color:var(--gray); flex:1; }

.card-meta{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:18px 0 16px; }
.price{ display:flex; flex-direction:column; }
.price .amt{ font-size:1.55rem; font-weight:800; color:var(--navy); line-height:1.1; }
.price .per{ font-size:.74rem; color:var(--gray); }
.price .amt.na{ font-size:1.1rem; color:var(--royal); }

.badge{
  position:absolute; top:16px; right:16px;
  font-size:.68rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  padding:5px 11px; border-radius:999px;
}
.badge-pop{ background:var(--emerald-light); color:var(--emerald-dark); }
.badge-best{ background:#DBEAFE; color:var(--royal); }
.badge-annual{ background:#EDE9FE; color:#6D28D9; }

/* ============================ AMC ============================ */
.amc-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px; position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
.amc-card.featured{ border-color:var(--emerald); box-shadow:0 0 0 3px rgba(5,150,105,.12), var(--shadow); }
.amc-card h3{ font-size:1.3rem; margin-bottom:6px; }
.amc-card .amc-sub{ font-size:.86rem; color:var(--gray); margin-bottom:20px; }
.amc-price{ display:flex; align-items:baseline; gap:7px; margin-bottom:6px; }
.amc-price .amt{ font-size:2.35rem; font-weight:800; color:var(--navy); line-height:1; }
.amc-price .per{ font-size:.9rem; color:var(--gray); }
/* Keep the "+ 18% GST" caption on the same baseline as the rest of the row. */
.amc-price .gst-note{ margin:0 0 0 2px; align-self:baseline; }
.amc-card .fine{ font-size:.8rem; color:var(--gray); margin-bottom:20px; }

.amc-list{ margin-bottom:24px; flex:1; }
.amc-list li{ display:flex; gap:10px; align-items:flex-start; font-size:.89rem; padding:5px 0; color:#334155; }
.amc-list svg{ width:17px; height:17px; fill:var(--emerald); flex:none; margin-top:3px; }
.amc-list .no{ fill:var(--gray-2); }

.amc-note{
  margin-top:26px; display:flex; gap:12px; align-items:flex-start;
  background:#FFFBEB; border:1px solid #FDE68A;
  border-radius:var(--radius-sm); padding:16px 20px;
}
.amc-note svg{ width:20px; height:20px; fill:var(--amber); flex:none; margin-top:2px; }
.amc-note p{ font-size:.89rem; color:#78350F; }

/* ============================ STEPS ============================ */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:s; }
.steps li{ position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; transition:.24s; }
.steps li:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.step-num{
  width:42px; height:42px; border-radius:12px;
  background:var(--emerald-btn); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:1.1rem;
  margin-bottom:16px;
}
.steps h3{ font-size:1.02rem; margin-bottom:8px; }
.steps p{ font-size:.88rem; color:var(--gray); }

/* ============================ FEATURES ============================ */
.feature{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:26px; transition:.24s; }
.feature:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:#CBD5E1; }
.feature-ico{
  width:48px; height:48px; border-radius:13px; display:grid; place-items:center;
  background:var(--emerald-light); color:var(--emerald-dark);
  font-size:1.25rem; font-weight:700; margin-bottom:15px;
}
.feature h3{ font-size:1.04rem; margin-bottom:8px; }
.feature p{ font-size:.89rem; color:var(--gray); }

/* ============================ JOURNEY ============================ */
.journey{
  background:
    radial-gradient(760px 420px at 88% 0%, rgba(5,150,105,.07), transparent 60%),
    var(--white);
  position:relative; overflow:hidden;
}
.journey::before{
  content:''; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg,var(--navy),var(--royal) 45%,var(--emerald));
}
.journey .section-head h2{ font-family:var(--serif-display); font-weight:800; }
.journey .section-head h2 em{ font-style:italic; color:var(--emerald-dark); }
.journey-lede{ font-family:var(--serif-body); font-size:1.08rem; }
.journey-lede strong{ color:var(--navy); }

/* ---------- language toggle ---------- */
.lang-toggle{
  display:flex; gap:6px; justify-content:center;
  background:var(--off); border:1px solid var(--line);
  padding:5px; border-radius:999px; width:fit-content;
  margin:0 auto 40px;
}
.lang-btn{
  font-family:inherit; font-size:.92rem; font-weight:600;
  padding:9px 26px; border-radius:999px; border:none;
  background:transparent; color:var(--gray); cursor:pointer;
  transition:.22s ease;
}
.lang-btn:hover{ color:var(--navy); }
.lang-btn.is-active{
  background:var(--navy); color:#fff;
  box-shadow:0 4px 12px rgba(11,42,91,.22);
}
.lang-btn:focus-visible{ outline:3px solid var(--royal-soft); outline-offset:2px; }

/* ---------- Devanagari overrides ----------
   Playfair Display and Lora have no Devanagari glyphs, so the Hindi panel
   swaps to Noto Sans Devanagari rather than falling back to a random system
   font mid-word. */
.journey[data-lang="hi"] .section-head h2,
.journey[data-lang="hi"] .origin-block h3,
.journey[data-lang="hi"] .origin-note h4,
.journey[data-lang="hi"] .tl-body h4,
.journey[data-lang="hi"] .founder-text h3,
.journey[data-lang="hi"] .founder-sig,
.journey[data-lang="hi"] .lstat strong,
.journey[data-lang="hi"] .founder-role{
  font-family:'Noto Sans Devanagari','Noto Sans',sans-serif;
  font-style:normal; letter-spacing:0;
}
.journey[data-lang="hi"] p,
.journey[data-lang="hi"] li,
.journey[data-lang="hi"] blockquote,
.journey[data-lang="hi"] span{
  font-family:'Noto Sans Devanagari','Noto Sans',sans-serif;
}
.journey[data-lang="hi"] .section-head h2 em{ font-style:normal; }
.journey[data-lang="hi"] .tl-body em,
.journey[data-lang="hi"] .origin-note em{ font-style:normal; color:#A7F3D0; }
.journey[data-lang="hi"] .kaptan-quote{ font-style:normal; }
.journey[data-lang="hi"] .origin-tag{ letter-spacing:.6px; }
.journey[data-lang="hi"] .eyebrow{ letter-spacing:.8px; }

/* ---------- scroll reveal ----------
   Scoped to html.js so that if scripting is unavailable the content is
   simply visible instead of stuck at opacity 0. */
html.js [data-reveal]{
  opacity:0; transform:translateY(24px);
  transition:opacity .65s ease, transform .65s ease;
}
html.js [data-reveal].is-visible{ opacity:1; transform:none; }
html.js .tl-item:nth-child(2) [data-reveal],
html.js .tl-item[data-reveal]:nth-child(2){ transition-delay:.08s; }
html.js .tl-item[data-reveal]:nth-child(3){ transition-delay:.16s; }
html.js .tl-item[data-reveal]:nth-child(4){ transition-delay:.24s; }
html.js .tl-item[data-reveal]:nth-child(5){ transition-delay:.32s; }

/* ---------- origin ---------- */
.origin{
  display:grid; grid-template-columns:1.05fr .95fr; gap:26px;
  margin-bottom:56px;
}
.origin-block,
.origin-note{
  background:var(--off); border:1px solid var(--line);
  border-radius:var(--radius); padding:32px;
}
.origin-note{
  background:linear-gradient(160deg,#0B2A5B,#143B7A);
  border-color:var(--navy); color:rgba(255,255,255,.86);
  position:relative; overflow:hidden;
}
.origin-note::after{
  content:''; position:absolute; right:-40px; bottom:-40px;
  width:150px; height:150px; border-radius:50%;
  background:rgba(5,150,105,.16);
}
.origin-note h4{
  color:#fff; font-family:var(--serif-display);
  font-size:1.35rem; margin-bottom:14px;
}
.origin-note strong{ color:#fff; }
.origin-note em{ color:#A7F3D0; font-style:italic; }

.origin-tag{
  display:inline-block; font-size:.72rem; font-weight:700;
  letter-spacing:1.4px; text-transform:uppercase;
  color:var(--emerald-dark); background:var(--emerald-light);
  padding:6px 14px; border-radius:999px; margin-bottom:16px;
}
.origin-block h3{
  font-family:var(--serif-display); font-size:1.5rem;
  margin-bottom:14px; line-height:1.25;
}
.origin-block p{
  font-family:var(--serif-body); font-size:1rem;
  color:#334155; margin-bottom:14px;
}
.origin-block p:last-child{ margin-bottom:0; }
.origin-block strong{ color:var(--navy); }

.kaptan-quote{
  margin:20px 0; padding:18px 22px;
  border-left:3px solid var(--emerald);
  background:rgba(255,255,255,.07);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-family:var(--serif-display); font-style:italic;
  font-size:1.12rem; line-height:1.5; color:#fff;
  position:relative; z-index:1;
}
.kaptan-quote strong{ color:#6EE7B7; font-style:normal; }
.origin-note p{ font-family:var(--serif-body); font-size:.96rem; position:relative; z-index:1; }

/* ---------- timeline ---------- */
.timeline{ position:relative; margin-bottom:56px; }
.timeline::before{
  content:''; position:absolute; left:104px; top:8px; bottom:8px;
  width:2px;
  background:linear-gradient(180deg,var(--emerald),var(--royal) 55%,var(--navy));
  border-radius:2px;
}
.tl-item{
  position:relative; display:grid;
  grid-template-columns:104px 1fr; gap:32px;
  padding-bottom:34px;
}
.tl-item:last-child{ padding-bottom:0; }
.tl-year{
  font-family:var(--serif-display); font-weight:800;
  font-size:1.12rem; color:var(--navy); text-align:right;
  padding-top:18px; letter-spacing:-.2px;
}
.tl-item.featured .tl-year{ color:var(--emerald-dark); }
.tl-body{
  position:relative;
  background:var(--off); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px 26px;
}
.tl-item.featured .tl-body{
  background:linear-gradient(150deg,#F0FDF4,var(--white));
  border-color:var(--emerald);
  box-shadow:0 0 0 3px rgba(5,150,105,.1), var(--shadow);
}
.tl-body::before{
  content:''; position:absolute; left:-39px; top:26px;
  width:14px; height:14px; border-radius:50%;
  background:var(--white); border:3px solid var(--royal);
}
.tl-item.featured .tl-body::before{ border-color:var(--emerald); background:var(--emerald); }
.tl-body h4{
  font-family:var(--serif-display); font-size:1.24rem;
  margin-bottom:9px; line-height:1.3;
}
.tl-body p{ font-family:var(--serif-body); font-size:.97rem; color:#334155; }
.tl-body p + p{ margin-top:10px; }
.tl-body strong{ color:var(--navy); }
.tl-body em{ color:var(--emerald-dark); font-style:italic; }

/* ---------- legacy stats ---------- */
.legacy-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  background:var(--navy); border-radius:var(--radius);
  padding:34px 28px; margin-bottom:48px; text-align:center;
}
.lstat strong{
  display:block; font-family:var(--serif-display);
  font-size:1.5rem; font-weight:800; color:#fff; margin-bottom:6px;
}
.lstat span{ font-size:.83rem; color:rgba(255,255,255,.68); line-height:1.45; }

/* ---------- founder ---------- */
.founder{
  display:flex; gap:26px; align-items:center;
  background:var(--off); border:1px solid var(--line);
  border-left:5px solid var(--emerald);
  border-radius:var(--radius); padding:30px 34px;
  max-width:760px; margin-inline:auto;
}
.founder-mark{
  width:78px; height:78px; flex:none; border-radius:50%;
  background:linear-gradient(135deg,var(--navy),var(--royal));
  color:#fff; display:grid; place-items:center;
  font-family:var(--serif-display); font-weight:800; font-size:1.6rem;
  letter-spacing:.5px;
}
.founder-text h3{ font-family:var(--serif-display); font-size:1.5rem; }
.founder-role{
  font-size:.84rem; color:var(--emerald-dark); font-weight:600;
  letter-spacing:.4px; margin-top:2px;
}
.founder-quote{
  font-family:var(--serif-body); font-style:italic;
  font-size:.98rem; color:#334155; margin-top:12px;
}
.founder-sig{
  font-family:var(--serif-display); font-style:italic;
  font-size:1.22rem; color:var(--navy); margin-top:14px;
  padding-top:12px; border-top:1px solid var(--line);
  display:inline-block;
}

/* ============================ FORM FIELDS ============================ */
.field{ display:block; margin-bottom:12px; }
.field > span{
  display:block; font-size:.8rem; font-weight:600;
  color:var(--navy); margin-bottom:5px;
}
.field input,
.field select,
.field textarea{
  width:100%; font-family:inherit; font-size:.92rem;
  padding:10px 13px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--white); color:var(--ink);
  resize:vertical;
}
.field input::placeholder,
.field textarea::placeholder{ color:var(--gray-2); }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:2px solid var(--royal-soft); outline-offset:1px; border-color:var(--royal-soft);
}
.cust-error{
  background:#FEF2F2; border:1px solid #FECACA; color:#B91C1C;
  font-size:.82rem; padding:9px 12px; border-radius:var(--radius-sm); margin:0 0 10px;
}
.cust-ok{
  background:var(--emerald-light); border:1px solid #A7F3D0; color:var(--emerald-dark);
  font-size:.82rem; padding:9px 12px; border-radius:var(--radius-sm); margin:0 0 10px;
}

/* ============================ REVIEWS ============================ */
/* Shown only until the first real approved review arrives. */
.reviews-empty{
  max-width:560px; margin:0 auto; text-align:center;
  background:var(--white); border:1px dashed var(--line);
  border-radius:var(--radius); padding:36px 30px;
}
.reviews-empty .re-star{ color:var(--line); font-size:1.5rem; letter-spacing:5px; margin-bottom:12px; }
.reviews-empty p{ font-size:.95rem; color:var(--gray); }
.reviews-empty .tiny{ margin-top:8px; }

.review-form-wrap{
  max-width:660px; margin:52px auto 0; text-align:left;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:30px 32px; box-shadow:var(--shadow);
}
/* Once real reviews exist the empty-state card is redundant. */
#reviewsGrid:not(:empty) ~ .reviews-empty{ display:none; }
.review-form-wrap h3{
  font-size:1.22rem; margin-bottom:6px;
}
.review-form-wrap > .tiny{ margin-bottom:20px; }
.rf-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.rf-stars{ border:none; padding:0; margin:0 0 14px; }
.rf-stars legend{
  font-size:.8rem; font-weight:600; color:var(--navy);
  padding:0; margin-bottom:6px;
}
.star-input{ display:inline-flex; flex-direction:row-reverse; gap:2px; }
.star-input input{ position:absolute; opacity:0; width:0; height:0; }
.star-input label{
  font-size:1.7rem; line-height:1; cursor:pointer;
  color:#CBD5E1; transition:.15s; padding:0 2px;
}
.star-input label:hover,
.star-input label:hover ~ label,
.star-input input:checked ~ label{ color:#F59E0B; }
.star-input input:focus-visible + label{
  outline:2px solid var(--royal-soft); outline-offset:2px; border-radius:4px;
}

.rf-actions{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.rf-alt{
  font-size:.85rem; font-weight:500; color:var(--royal);
  text-decoration:underline; text-underline-offset:3px;
}
.rf-alt:hover{ color:var(--emerald-dark); }
.rf-alt:focus-visible{ outline:3px solid var(--royal-soft); outline-offset:2px; border-radius:4px; }
.rf-note{ margin-top:12px; }

/* Cart: customer details, revealed when order records are switched on. */
.cust-block{
  margin-bottom:16px; padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.cust-block h4{ font-size:.86rem; margin-bottom:10px; }

/* ============================ BOOK / INQUIRE ============================ */
/* Reuses the same tokens as the review form so it looks native to the site. */
.inquire-wrap{
  max-width:680px; margin:0 auto;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
}

.inquire-tabs{
  display:flex; border-bottom:1px solid var(--line); background:var(--off);
}
.itab{
  flex:1; font-family:inherit; font-size:.93rem; font-weight:600;
  padding:15px 12px; border:none; background:transparent; color:var(--gray);
  cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-1px;
  transition:.2s;
}
.itab:hover{ color:var(--navy); }
.itab.is-active{
  color:var(--navy); background:var(--white); border-bottom-color:var(--emerald-btn);
}
.itab:focus-visible{ outline:3px solid var(--royal-soft); outline-offset:-3px; }

.inquire-form{ padding:28px 30px; }
/* The hint reads lighter than the label because of its normal weight.
   --gray-2 fails contrast at this size, so the hint uses --gray. */
.inquire-form .field em{
  font-style:normal; color:var(--gray); font-weight:400;
}
.inquire-form .field input[type="date"]{
  font-family:inherit; cursor:pointer;
}

/* The contact form is a full-width card rather than one of the three columns,
   so it is never squeezed. */
.contact-card-form{ grid-column:1 / -1; text-align:left; }
.contact-card-form h3{ text-align:center; }
.contact-form-lead{ text-align:center; margin-bottom:18px; }
.contact-form{ max-width:560px; margin-inline:auto; }
.contact-form .field > span em{
  font-style:normal; color:var(--gray); font-weight:400;
}
.contact-form .btn-block{ margin-top:4px; }
@media (min-width:901px){
  .contact-card-form{ padding:32px 36px; }
}

/* ---------- notice shown when Admin is clicked but nothing answers ---------- */
/* Deliberately persistent. The toast that used to do this job disappeared
   after 2.4s, so on a slow connection the button simply looked dead. */
.admin-notice-backdrop{
  position:fixed; inset:0; z-index:120;
  background:rgba(11,42,91,.45); backdrop-filter:blur(2px);
}
.admin-notice{
  position:fixed; z-index:121; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(440px,calc(100vw - 32px));
  background:var(--white); border-radius:var(--radius-md,14px);
  border:1px solid var(--line); box-shadow:0 24px 60px rgba(11,42,91,.28);
  padding:26px 26px 22px;
  max-height:calc(100vh - 48px); overflow:auto;
}
.admin-notice h2{
  margin:0 0 10px; font-size:1.12rem; line-height:1.35; color:var(--navy);
}
.admin-notice p{
  margin:0 0 14px; font-size:.92rem; line-height:1.6; color:var(--gray);
}
.admin-notice-steps{
  margin:0 0 14px; padding:14px 16px 14px 34px;
  background:#F8FAFC; border:1px solid var(--line); border-radius:10px;
  font-size:.9rem; line-height:1.7; color:var(--navy);
}
.admin-notice-steps li + li{ margin-top:2px; }
.admin-notice-steps code{
  font-family:ui-monospace,Consolas,monospace; font-size:.86em;
  background:var(--white); border:1px solid var(--line);
  border-radius:5px; padding:1px 6px;
}
.admin-notice-note{
  font-size:.84rem; line-height:1.55; color:var(--gray);
  border-left:3px solid var(--line); padding-left:12px; margin-bottom:16px;
}
.admin-notice-actions{
  display:flex; gap:10px; flex-wrap:wrap;
}
.admin-notice-actions .btn{ flex:1 1 auto; }

/* ---------- order receipt, shown in the cart after checkout ---------- */
.cart-receipt{
  margin-bottom:12px; padding:12px 14px;
  border-radius:var(--radius-sm); font-size:.86rem; line-height:1.55;
}
.cart-receipt p + p{ margin-top:8px; }
.cart-receipt b{ letter-spacing:.3px; }
.cart-receipt-ok{
  background:var(--emerald-light); border:1px solid #A7F3D0; color:var(--emerald-dark);
}
.cart-receipt-ok strong{ display:block; margin-bottom:3px; }
.cart-receipt-warn{
  background:#FEF3C7; border:1px solid #FCD34D; color:#7C2D12;
}
.cart-receipt-warn strong{ display:block; margin-bottom:3px; }

/* ---------- top strip: trust ticker plus a booking shortcut ----------
   Sits above the hero so the page opens on evidence of work done since
   1997, with the booking action beside it rather than buried further
   down. The ticker keeps its own styling; this only lays the row out. */
.top-strip{
  position:relative; z-index:5;
  display:flex; align-items:stretch; gap:0;
  background:var(--navy);
  /* A green rule under the whole strip so the band reads as a deliberate
     header rather than a strip squeezed between the nav and the hero. */
  border-bottom:3px solid var(--emerald-btn);
}
.top-strip .ticker{ flex:1 1 auto; min-width:0; }

.top-strip-book{
  flex:none;
  display:inline-flex; align-items:center; gap:10px;
  padding:0 30px;
  background:var(--emerald-btn); color:#fff;
  font-size:.95rem; font-weight:700; letter-spacing:.3px;
  text-decoration:none; white-space:nowrap;
  border-left:1px solid rgba(255,255,255,.16);
  transition:background .15s;
}
.top-strip-book:hover{ background:var(--emerald-btn-hover); }
.top-strip-book .ico{ width:19px; height:19px; fill:currentColor; flex:none; }

/* On narrow screens the ticker keeps the space it needs and the button
   wraps under it rather than squeezing the text into nothing. */
@media (max-width:760px){
  .top-strip{ flex-wrap:wrap; }
  .top-strip .ticker{ flex:1 0 100%; }
  .top-strip-book{
    flex:1 0 100%; justify-content:center;
    padding:13px 16px; border-left:0; border-top:1px solid rgba(255,255,255,.14);
  }
  /* Full-size lettering is a lot to read on a phone, so it steps down but
     stays well clear of the tiny caption size it started at. */
  .ticker{ padding:15px 0; }
  .ticker-group span{ font-size:.9rem; padding-inline:16px; }
  .ticker-group b{ width:6px; height:6px; box-shadow:none; }
}

/* ---------- "Book this service" on a service card ----------
   Deliberately quieter than the Add button above it: booking is an
   alternative to buying, not the main call to action. */
.btn-book{
  display:block; width:100%; margin-top:10px;
  font-family:inherit; font-size:.8rem; font-weight:700;
  color:var(--emerald-btn); background:transparent;
  border:1px dashed var(--emerald); border-radius:999px;
  padding:8px 12px; cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.btn-book:hover{ background:var(--emerald-light); border-style:solid; }
.btn-book:focus-visible{ outline:2px solid var(--emerald); outline-offset:2px; }

/* ============================ ADDRESS ============================ */
.addr{
  font-style:normal; font-family:var(--serif-body);
  font-size:1.02rem; color:#334155; line-height:1.7;
  margin-bottom:18px;
}
.addr strong{ color:var(--navy); font-weight:600; font-size:1.08rem; }

/* ============================ QUOTES ============================ */
.quote{ margin:0; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:26px; }
/* Amber-500 was only 2.14:1 on white; this bronze keeps the gold feel and passes. */
.stars{ color:var(--amber); letter-spacing:2px; font-size:1rem; margin-bottom:12px; }
.quote blockquote{ margin:0 0 16px; font-size:.93rem; color:#334155; font-style:italic; }
.quote figcaption strong{ display:block; font-size:.92rem; color:var(--navy); }
.quote figcaption span{ font-size:.8rem; color:var(--gray); }

/* ============================ FAQ ============================ */
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-list details{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-sm); overflow:hidden; transition:.2s;
}
.faq-list details[open]{ border-color:var(--emerald); box-shadow:var(--shadow); }
.faq-list summary{
  cursor:pointer; padding:17px 48px 17px 20px; position:relative;
  font-weight:600; color:var(--navy); font-size:.96rem; list-style:none;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{
  content:'+'; position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-size:1.4rem; font-weight:400; color:var(--emerald); transition:.2s; line-height:1;
}
.faq-list details[open] summary::after{ content:'\2212'; }
.faq-list details p{ padding:0 20px 19px; font-size:.9rem; color:var(--gray); }

/* ============================ CONTACT ============================ */
.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; }
.contact-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:28px; text-align:center; }
.contact-card h3{ font-size:1.12rem; margin-bottom:10px; }
.contact-big{ font-size:1.5rem; font-weight:800; color:var(--navy); margin-bottom:18px; letter-spacing:-.3px; }
.contact-big.small{ font-size:1.16rem; }
.contact-card .tiny{ margin-top:14px; }

.contact-list{ margin-top:20px; text-align:left; border-top:1px solid var(--line); padding-top:16px; }
.contact-list li{ display:flex; justify-content:space-between; gap:12px; font-size:.87rem; padding:5px 0; }
.contact-list span{ color:var(--gray); }
.contact-list strong{ color:var(--navy); font-weight:600; text-align:right; }

.payment-card .pay-note{ font-size:.9rem; color:var(--gray); margin-bottom:18px; }
.qr-wrap{
  display:inline-block; padding:12px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:14px;
}
.qr{ width:180px; height:180px; }
.qr-sm{ width:150px; height:150px; }
.upi-id{ font-size:.86rem; color:var(--gray); margin-bottom:16px; }
.upi-id strong{ color:var(--navy); display:inline-block; margin-top:3px; font-size:.95rem; word-break:break-all; }

/* ============================ CTA BANNER ============================ */
.cta-banner{ background:linear-gradient(120deg,var(--navy),var(--navy-soft) 55%,var(--royal)); color:#fff; padding:52px 0; }
.cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.cta-banner h2{ color:#fff; font-size:clamp(1.4rem,2.8vw,2rem); font-weight:800; }
.cta-banner p{ color:rgba(255,255,255,.78); margin-top:9px; }

/* ============================ FOOTER ============================ */
.site-footer{ background:var(--navy); color:rgba(255,255,255,.72); padding:60px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:38px; padding-bottom:44px; }
/* The logo artwork is dark navy, so it needs a light plate on the navy footer. */
.footer-logo{
  width:72px; height:70px; object-fit:contain;
  background:#fff; border-radius:13px; padding:6px; margin-bottom:14px;
}
.footer-name{ font-weight:800; color:#fff; font-size:1.02rem; letter-spacing:.5px; }
.footer-tag{ font-size:.8rem; color:rgba(255,255,255,.6); margin-top:4px; }
.site-footer .foot-h{ color:#fff; font-size:.92rem; margin-bottom:16px; letter-spacing:.6px; text-transform:uppercase; }
.site-footer ul li{ margin-bottom:9px; font-size:.88rem; }
.site-footer a{ color:rgba(255,255,255,.72); }
.site-footer a:hover{ color:var(--emerald-light); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.13); padding:20px 0;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:.82rem; color:rgba(255,255,255,.55);
}

/* ============================ WHATSAPP FLOAT ============================ */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:70;
  display:flex; align-items:center; gap:10px;
  background:#25D366; color:#fff;
  padding:13px 20px 13px 16px; border-radius:999px;
  box-shadow:0 10px 28px rgba(37,211,102,.42);
  font-weight:600; font-size:.92rem;
  transition:.24s ease;
}
.wa-float svg{ width:26px; height:26px; fill:#fff; flex:none; }
/* Navy label rather than white: white on WhatsApp green is only 1.98:1. */
.wa-float .wa-label{ color:var(--navy); }
.wa-float:hover{ transform:translateY(-3px) scale(1.03); background:#1EBE5A; }
.wa-float::before{
  content:''; position:absolute; inset:0; border-radius:999px;
  border:2px solid #25D366; animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{ 0%{ transform:scale(1); opacity:.7 } 100%{ transform:scale(1.35); opacity:0 } }

/* ============================ CART DRAWER ============================ */
.cart-overlay{
  position:fixed; inset:0; z-index:90;
  background:rgba(11,42,91,.5); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .28s;
}
.cart-overlay.show{ opacity:1; }

.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:100;
  width:min(420px,100%);
  background:var(--white);
  display:flex; flex-direction:column;
  box-shadow:-14px 0 46px rgba(11,42,91,.2);
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.cart-drawer.open{ transform:translateX(0); }

.cart-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px; border-bottom:1px solid var(--line); flex:none;
}
.cart-head h3{ font-size:1.14rem; }
.cart-close{
  width:36px; height:36px; border-radius:50%; border:none;
  background:var(--off); color:var(--navy); font-size:1.5rem;
  cursor:pointer; line-height:1; transition:.2s;
}
.cart-close:hover{ background:#FEE2E2; color:#B91C1C; }

.cart-body{ flex:1; overflow-y:auto; padding:18px 22px; }
.cart-items{ display:flex; flex-direction:column; gap:12px; }

.cart-item{
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:13px;
}
.cart-item-ico{
  width:42px; height:42px; border-radius:10px; flex:none;
  background:linear-gradient(135deg,var(--navy),var(--royal));
  color:#fff; display:grid; place-items:center; font-size:1.05rem;
}
.cart-item-info{ flex:1; min-width:0; }
.cart-item-info h4{ font-size:.93rem; font-weight:600; margin-bottom:2px; }
.cart-item-info .ci-price{ font-size:.83rem; color:var(--emerald-dark); font-weight:600; }
.cart-item-info .ci-price.na{ color:var(--royal); }
.cart-item-info .ci-gst{
  display:block; font-size:.72rem; color:var(--gray); margin-top:1px;
}

.qty{ display:flex; align-items:center; gap:2px; margin-top:9px; border:1px solid var(--line); border-radius:999px; width:fit-content; }
.qty button{
  width:28px; height:28px; border:none; background:transparent;
  color:var(--navy); font-size:1.05rem; cursor:pointer; border-radius:50%;
  display:grid; place-items:center; line-height:1; transition:.15s;
}
.qty button:hover{ background:var(--emerald-light); color:var(--emerald-dark); }
.qty span{ min-width:26px; text-align:center; font-size:.87rem; font-weight:700; color:var(--navy); }

.cart-item-total{ font-weight:700; color:var(--navy); font-size:.92rem; white-space:nowrap; align-self:center; }
.cart-remove{
  background:none; border:none; color:var(--gray-2); cursor:pointer;
  font-size:1.15rem; line-height:1; padding:2px 4px; border-radius:6px; transition:.15s;
}
.cart-remove:hover{ color:#DC2626; background:#FEF2F2; }

.cart-empty{ text-align:center; padding:56px 20px; color:var(--gray); }
.cart-empty svg{ width:64px; height:64px; fill:none; stroke:#CBD5E1; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; margin:0 auto 16px; }
.cart-empty strong{ display:block; color:var(--navy); font-size:1.02rem; margin-bottom:6px; }

.cart-foot{ border-top:1px solid var(--line); padding:18px 22px 22px; flex:none; background:var(--off); }

.pay-choice h4{ font-size:.86rem; margin-bottom:10px; }
.pay-options{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pay-opt{ position:relative; }
.pay-opt input{ position:absolute; opacity:0; width:0; height:0; }
.pay-opt span{
  display:block; text-align:center; cursor:pointer;
  padding:11px; border-radius:var(--radius-sm);
  border:2px solid var(--line); background:var(--white);
  font-weight:600; font-size:.9rem; color:var(--navy); transition:.18s;
}
.pay-opt input:checked + span{ border-color:var(--emerald); background:var(--emerald-light); color:var(--emerald-dark); }
.pay-opt input:checked + span::before{ content:'\2713  '; }

.cart-upi{
  display:flex; gap:14px; align-items:center;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:13px; margin-top:14px;
}
.cart-upi .btn{ margin-top:8px; }

/* ============================ GST ============================ */
.gst-note{
  display:block; font-size:.72rem; color:var(--gray);
  margin-top:3px; font-weight:500; letter-spacing:.2px;
}

.cart-summary{
  margin:18px 0 0; padding-top:14px;
  border-top:2px dashed var(--line);
}
.cart-summary .sum-row,
.sum-row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; font-size:.88rem; padding:4px 0; color:var(--gray);
}
.sum-row + .sum-row{ border-top:1px solid var(--line); }
.sum-row span:last-child{ color:var(--navy); font-weight:600; }
.gstin-row{
  font-size:.76rem; letter-spacing:.3px;
}
.gstin-row span:last-child{ font-weight:500; color:var(--gray); }

.cart-gst-note{
  margin:2px 0 12px; font-size:.74rem; text-align:right; margin-top:-8px;
}
.cart-enquiry-note{ margin-bottom:12px; color:var(--amber); }

.cart-total{
  display:flex; align-items:center; justify-content:space-between;
  margin:14px 0 4px; padding-top:14px; border-top:2px solid var(--line);
}
.cart-total span{ font-weight:600; color:var(--navy); }
.cart-total strong{ font-size:1.55rem; font-weight:800; color:var(--navy); }
.cart-foot .btn-block + .btn-block{ margin-top:4px; }

/* ============================ PWA INSTALL BAR ============================ */
.install-bar{
  position:fixed; left:50%; bottom:88px; transform:translateX(-50%);
  z-index:80; display:flex; align-items:center; gap:12px;
  background:var(--navy); color:#fff;
  padding:11px 12px 11px 20px; border-radius:999px;
  box-shadow:var(--shadow-lg); font-size:.88rem; font-weight:500;
  max-width:calc(100vw - 32px);
  animation:bar-in .35s cubic-bezier(.2,.8,.3,1.1);
}
@keyframes bar-in{
  from{ opacity:0; transform:translate(-50%,18px) }
  to  { opacity:1; transform:translate(-50%,0) }
}
.install-bar .btn-sm{ padding:8px 18px; }
.ib-close{
  width:28px; height:28px; border:none; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff;
  font-size:1.2rem; line-height:1; cursor:pointer; flex:none;
}
.ib-close:hover{ background:rgba(255,255,255,.28); }
@media (max-width:560px){
  .install-bar{ flex-wrap:wrap; justify-content:center; text-align:center; bottom:80px; }
}

/* ============================ TOAST ============================ */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,90px);
  z-index:120; background:var(--navy); color:#fff;
  padding:13px 24px; border-radius:999px;
  font-size:.9rem; font-weight:500; box-shadow:var(--shadow-lg);
  opacity:0; transition:.3s ease; pointer-events:none;
  max-width:calc(100vw - 40px); text-align:center;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ============================ SCROLL REVEAL ============================
   Native scroll-driven animations where the browser supports them
   (Chrome/Edge 115+, Safari 26+, Firefox 144+). No JS, no observer, and it
   runs off the compositor so it cannot jank. The `html.js` class makes the
   JS fallback below take over everywhere else. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* Native scroll-driven animation is used ONLY for elements that have no
       `opacity: 0` base state. If a range resolves oddly, the worst case is
       that they simply appear - they can never be stuck invisible.
       [data-reveal] elements deliberately stay on the JS observer, because
       their hidden state is real and permanent if the reveal never fires. */
    .card, .amc-card, .feature, .quote, .trust-item, .steps li{
      animation:reveal-in linear both;
      animation-timeline:view();
      animation-range:entry 5% cover 22%;
    }
    .steps li:nth-child(2){ animation-range:entry 10% cover 28%; }
    .steps li:nth-child(3){ animation-range:entry 15% cover 34%; }
    .steps li:nth-child(4){ animation-range:entry 20% cover 40%; }
  }
}
@keyframes reveal-in{
  from{ opacity:0; transform:translateY(26px) scale(.985); }
  to  { opacity:1; transform:none; }
}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1024px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .hero-inner{ grid-template-columns:1fr; gap:38px; }
  .hero-copy{ text-align:center; }
  .lead{ margin-inline:auto; }
  .hero-cta,.hero-chips{ justify-content:center; }
  .hero-card{ max-width:460px; margin-inline:auto; width:100%; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .trust-grid{ grid-template-columns:repeat(2,1fr); gap:26px; }
  .contact-grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:30px; }

  .origin{ grid-template-columns:1fr; }
  .legacy-stats{ grid-template-columns:repeat(2,1fr); }

  /* Bento collapses to a plain 2x2 when the wide layout gets cramped */
  #servicesGrid{ grid-template-columns:repeat(2,1fr); }
  .card--lead{ grid-column:span 2; grid-row:span 1; }
  .card--wide{ grid-column:span 2; }
  #servicesGrid .card--lead .card-ico{ width:52px; height:52px; font-size:1.5rem; border-radius:14px; }
  #servicesGrid .card--lead h3{ font-size:1.2rem; }
  #servicesGrid .card--lead .price .amt{ font-size:1.55rem; }
  #servicesGrid .card--lead p{ max-width:none; }
}

/* Nine links plus the brand and the cart do not fit on a narrow window, so the
   padding tightens first and only then the bar folds into the hamburger. This
   keeps every link - including Admin - visible on an ordinary laptop. */
@media (max-width:1240px){
  .nav{ gap:2px; }
  .nav a{ padding:9px 8px; font-size:.85rem; }
  .nav a.nav-admin{ padding:9px 9px; margin-left:4px; }
}

@media (max-width:1000px){
  /* Below this the links genuinely stop fitting, and an overflowing header
     pushes the cart badge past the viewport edge. */
  .nav{
    position:absolute; top:var(--header-h); left:0; right:0;
    background:var(--white); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; padding:10px 20px 18px;
    gap:2px; box-shadow:var(--shadow);
    display:none;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:12px 14px; border-radius:var(--radius-sm); }
  .nav-toggle{ display:block; }
}

@media (max-width:820px){
  .hide-sm{ display:none; }
  .grid-2,.grid-3{ grid-template-columns:1fr; }
  .section{ padding:62px 0; }
}

@media (max-width:560px){
  :root{ --header-h:68px; }
  .brand-text small{ display:none; }
  .brand-logo{ width:42px; height:41px; }
  .brand-text strong{ font-size:.95rem; }
  .grid-4{ grid-template-columns:1fr; }
  #servicesGrid{ grid-template-columns:1fr; }
  .card--lead, .card--wide{ grid-column:span 1; }
  #servicesGrid .card--lead{ padding:24px; }
  .rf-row{ grid-template-columns:1fr; gap:0; }
  .review-form-wrap{ padding:24px 20px; }
  .steps{ grid-template-columns:1fr; }
  .trust-grid{ grid-template-columns:1fr 1fr; }
  .trust-item strong{ font-size:1.22rem; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ justify-content:center; text-align:center; }
  .wa-float{ padding:12px; }
  .wa-float .wa-label{ display:none; }
  .cta-inner{ text-align:center; justify-content:center; }
  .hero{ padding:52px 0 60px; }
  .cart-drawer{ width:100%; }

  /* journey stacks into a single column */
  .origin-block,.origin-note{ padding:24px; }
  .timeline::before{ left:7px; }
  .tl-item{ grid-template-columns:1fr; gap:10px; padding-bottom:28px; }
  .tl-year{ text-align:left; padding-top:0; }
  .tl-body{ padding:20px; }
  .tl-body::before{ left:-2px; top:-6px; }
  .legacy-stats{ grid-template-columns:1fr; gap:24px; padding:28px 22px; }
  .founder{ flex-direction:column; text-align:center; padding:26px 22px; }
  .founder-sig{ display:block; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .aurora, .grad, .ticker-track, .hero-since-dot{ animation:none !important; }
  .ticker-track{ transform:none; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .card, .amc-card, .feature, .quote, .trust-item, .steps li{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
}

@media print{
  .site-header,.wa-float,.cart-drawer,.cart-overlay,.toast,.cta-banner{ display:none !important; }
}