:root{
  --clr-primary:#124644;  /* green */
  --clr-dark:#0e2d2c;
  --clr-accent:#327880;
  --clr-gold:#d6b14d;     /* “orange” */
  --clr-bg:#0c2322;
  --clr-text:#e9f3f2;
  --clr-gold-strong:#caa33d;
  --container:1200px;
  --radius-2xl:1.25rem;
  --shadow-soft:0 10px 30px rgba(0,0,0,.25);
}

/* Reset & base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--clr-text);
  background:linear-gradient(120deg,var(--clr-dark) 0%, var(--clr-primary) 60%, var(--clr-accent) 100%);
  scroll-behavior:smooth;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible { outline: 3px solid var(--clr-gold); outline-offset: 3px; }
.container{width:min(100%,var(--container));margin-inline:auto;padding-inline:1rem}
.btn{display:inline-block;padding:.85rem 1.1rem;border-radius:999px;border:2px solid transparent;font-weight:600;transition:.25s transform,.25s background,.25s border-color,.25s color}
.btn:active{transform:translateY(2px)}
.btn-primary{background:var(--clr-gold);color:#1a1a1a}
.btn-primary:hover{filter:brightness(1.05); transform:translateY(-1px);}
.btn-outline{border-color:var(--clr-gold);color:var(--clr-text)}
.btn-outline:hover{background:rgba(214,177,77,.15); transform:translateY(-1px);}
.section{padding:clamp(3rem,6vw,5rem) 0}
.section-title{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;margin:0 0 1rem 0}
.section-sub{opacity:.85;margin:0 0 2rem 0;max-width:60ch}
.card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:0 14px 40px rgba(0,0,0,.35); }
.pad{padding:1.25rem}

/* Skip link */
.skip-link{ position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden; }
.skip-link:focus{ left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:#fff; color:#111; border-radius:.5rem; }

/* Header (gold bg, green text) */
header{
  position:sticky;top:0;z-index:50;
  background:var(--clr-gold);
  color:var(--clr-primary);
  border-bottom:1px solid rgba(0,0,0,.12);
  backdrop-filter:none;
}
.nav{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;
  padding:.6rem 0;
}
.brand{display:flex;align-items:center;gap:.75rem}
.brand img{width:42px;height:42px;object-fit:contain}
.brand .name{font-weight:800;letter-spacing:.3px;color:#083130}
.brand .tag{font-size:.8rem;opacity:.8;color:#083130}
.navlinks{display:flex;align-items:center;justify-content:center;gap:.25rem}
.navlinks a{
  position:relative;padding:.55rem .85rem;border-radius:999px;
  color:var(--clr-primary);font-weight:600;
  transition:.25s transform, .25s color, .25s background;
}
.navlinks a::after{
  content:"";position:absolute;left:12%;right:12%;bottom:.35rem;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:.25s transform;opacity:.7;
}
.navlinks a:hover{color:#083130;background:rgba(18,70,68,.08);transform:translateY(-1px)}
.navlinks a:hover::after{transform:scaleX(1)}
.burger{
  display:none;flex-direction:column;gap:5px;border:0;background:transparent;cursor:pointer;
  align-items:center;justify-content:center;justify-self:end; /* push fully right */
}
.burger span{width:26px;height:2px;background:var(--clr-primary)}

/* Mobile menu (robust: max-height + delayed interactivity) */
.mobile-menu{
  background:linear-gradient(180deg,var(--clr-gold), var(--clr-gold-strong));
  border-bottom:1px solid rgba(0,0,0,.12);
  max-height:0;
  opacity:0;
  overflow:hidden;
  pointer-events:none;                  /* not interactive by default */
  transition:max-height .35s ease, opacity .25s ease;
}
.mobile-menu.show{
  opacity:1;
  max-height:70vh;                      /* tall enough for small phones */
}
/* becomes clickable a moment after opening */
.mobile-menu.ready{ pointer-events:auto; }

.mobile-menu a{
  display:block; text-align:center; padding:.8rem 1rem; font-weight:700; color:var(--clr-primary);
  border-radius:.75rem; margin:.15rem auto; width:100%; max-width:480px;
  transition:.2s background,.2s transform;
}
.mobile-menu a:hover{ background:rgba(18,70,68,.12); transform:translateY(-1px); }

/* Festive banner spacing + responsive layout */
#festiveBanner{ padding-top:.9rem; padding-bottom:.4rem; }
.festive-banner{ display:grid; grid-auto-flow:column; align-items:center; justify-content:center; gap:.75rem; background:rgba(255,255,255,.12); }
.festive-emoji{ font-size:1.6rem; }
@media (max-width: 720px){
  .festive-banner{ grid-auto-flow:row; text-align:center; }
  .festive-emoji{ font-size:2rem; }
}
@media (min-width: 721px){
  .festive-emoji{ font-size:2rem; }
}


/* ===== Smart banner (replaces one-off festive strip) ===== */
.smart-banner{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:.9rem;
  background: rgba(255,255,255,.08);
  position:relative;
  overflow:hidden;
}
.smart-wave{
  width:120px; height:40px; opacity:.7;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.25));
}
.smart-msg{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
}
.smart-label{
  font-weight:800; letter-spacing:.2px; color:var(--clr-gold);
  background: rgba(214,177,77,.12);
  border:1px solid rgba(214,177,77,.28);
  padding:.3rem .6rem; border-radius:999px;
}
.smart-text{ opacity:.95 }

/* subtle line sweep across the card */
.smart-banner::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.12) 40%, transparent 70%);
  transform: translateX(-120%) skewX(-12deg);
  animation: smartGlint 6s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode: soft-light;
}
@keyframes smartGlint{
  0% { transform: translateX(-120%) skewX(-12deg) }
  45% { transform: translateX(0%)     skewX(-12deg) }
  100%{ transform: translateX(120%)   skewX(-12deg) }
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce){
  .smart-banner::after{ animation:none !important }
}

/* Mobile layout */
@media (max-width:720px){
  .smart-banner{ grid-template-columns:1fr; text-align:center }
  .smart-wave{ margin-inline:auto }
}

/* ===== Service cards text flow fixes ===== */
/* Let headings and paragraphs use full width; stop over-constraining */
.service-top { grid-template-columns:56px 1fr; align-items:center }
.service-top h3{
  margin:0;
  line-height:1.2;
  max-width:none;       /* override previous 22ch limit */
  word-break:normal;    /* prevent odd breaks */
}
.service-top p{
  margin:.25rem 0 0 0;
  opacity:.92;
}

/* Keep cards neat without forced equal heights; allow content to size naturally */
.services-grid{ align-items:stretch }
.service-card{ height:auto }
.service-list{ margin:.35rem 0 0 0 }

/* Tighten general text so cards don’t “grow” too tall on narrow screens */
@media (max-width:980px){
  .service-top h3{ line-height:1.15 }
  .service-top p{ font-size:.95rem }
}

/* Starry sky + moon (behind content) */
.sky{ position:fixed; inset:0; z-index:0; pointer-events:none; }
#moon{
  position:absolute; top:6vh; right:6vw; width:min(18vw,180px); aspect-ratio:1/1; border-radius:50%;
  background:
    radial-gradient(60% 60% at 40% 40%, #fff9, transparent 60%),
    radial-gradient(circle at 50% 50%, #f4f0e6, #d6b14d33 70%, transparent 72%);
  box-shadow:0 0 30px 8px rgba(214,177,77,.25), 0 0 120px 24px rgba(214,177,77,.15);
  animation:moonFloat 18s ease-in-out infinite;
}
@keyframes moonFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
.star{ position:absolute; background:#fff; border-radius:50%; opacity:.85; box-shadow:0 0 6px 2px rgba(255,255,255,.35); }
.star.twinkle{ animation:twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{opacity:.25} 50%{opacity:.95} }

/* Hero */
.hero{position:relative}
.hero-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.05;margin:.25rem 0 .75rem 0}
.hero .lead{font-size:clamp(1rem,1.7vw,1.15rem);opacity:.9;margin:0 0 1.2rem 0}
.pill{display:inline-flex;align-items:center;gap:.5rem;background:rgba(50,120,128,.35);border:1px solid rgba(255,255,255,.12);padding:.4rem .8rem;border-radius:999px;font-weight:600}
.hero-art{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius-2xl)}
.glow{
  position:absolute;top:50%;left:50%;width:140%;height:140%;transform:translate(-50%,-50%);
  pointer-events:none;z-index:-1;
  background:radial-gradient(circle at 30% 30%, rgba(214,177,77,.35), transparent 45%), radial-gradient(circle at 80% 30%, rgba(50,120,128,.35), transparent 55%);
}
.hero .cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.75rem}
.badge-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.badge{font-size:.8rem;opacity:.9;border:1px solid rgba(255,255,255,.15);padding:.35rem .6rem;border-radius:999px;transition:.2s transform,.2s background}
.badge:hover{transform:translateY(-2px);background:rgba(255,255,255,.18)}

@media (hover:hover) and (pointer:fine){
  .hero .btn{
    transform: translateZ(0);
    transition: transform .2s ease, box-shadow .25s ease;
  }
  .hero .btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,0,0,.35);
  }
}



/* Services */
.grid{display:grid;gap:1rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.service{padding:1.25rem}
.service h3{margin:.5rem 0 .25rem 0}
.service p{opacity:.9}
.icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:rgba(214,177,77,.12);border:1px solid rgba(214,177,77,.25)}

/* Portfolio */
.portfolio .grid-3{grid-template-columns:repeat(3,1fr)}
.work{overflow:hidden}
.work img{aspect-ratio:16/10;object-fit:cover;border-top-left-radius:var(--radius-2xl);border-top-right-radius:var(--radius-2xl)}
.work .meta{padding:1rem}
.work-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.chip{font-size:.75rem;padding:.25rem .6rem;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}

/* Process */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.step{padding:1.25rem;text-align:center}
.step .num{width:38px;height:38px;margin:0 auto .5rem auto;border-radius:999px;background:var(--clr-gold);color:#1b1b1b;font-weight:800;display:grid;place-items:center}

/* ===== Stacking-context guard (prevents rogue overlays from other sections) */
section { position: relative; isolation: isolate; }

/* ===== About redesign */
.about-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap:1.25rem }
.about-rail{ position: sticky; top: calc(72px + 1rem); align-self:start; display:grid; gap:1rem }
.about-stats{ list-style:none; padding:0; margin:.5rem 0 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem }
.about-stats li{ text-align:center; padding:.75rem; border:1px solid rgba(255,255,255,.12); border-radius:1rem; background:rgba(255,255,255,.04) }
.about-stats strong{ display:block; font-size:1.4rem }
.about-stats span{ font-size:.8rem; opacity:.85 }
.about-cta{ display:flex; gap:.5rem; flex-wrap:wrap }

/* Parallaxish ring (subtle, never blocks content) */
.about-ring{
  position:absolute; right:-28px; bottom:-28px; width:180px; height:180px;
  border-radius:50%; opacity:.28; pointer-events:none; z-index:-1;
  background: radial-gradient(circle at 50% 50%, rgba(214,177,77,.28), rgba(50,120,128,.12) 60%, transparent 62%);
  filter: blur(0.2px) drop-shadow(0 8px 24px rgba(0,0,0,.35));
  transform: translateZ(0);
}
@media (max-width:980px){ .about-grid{ grid-template-columns:1fr } .about-rail{ position:static } }

/* Stream cards */
.about-stream{ display:grid; gap:1rem; align-content:start }
.about-card h3{ margin:.25rem 0 .35rem 0 }
.about-card p{ margin:0 }

/* ===== Fix (rare) translucent panel clipping: ensure full fill */
.service-card, .about-card { overflow: hidden }

/* ===== About text: plain on desktop, card on mobile stays ===== */
@media (min-width: 981px){
  .about-card{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    /* nice reading measure */
    max-width: 62ch;
  }
  .about-card + .about-card{ margin-top: 1rem }

  /* subtle left accent instead of card */
  .about-card::before{
    content:"";
    display:block;
    width: 3px;
    height: 1.2em;
    margin: .25rem 0 .5rem 0;
    background: linear-gradient(180deg, var(--clr-gold), var(--clr-accent));
    border-radius: 2px;
  }

  .about-card h3{
    margin: 0 0 .4rem 0;
    line-height: 1.15;
    letter-spacing: .2px;
  }
  .about-card p{ margin: 0 }
}

/* keep mobile look exactly as is */
@media (max-width: 980px){
  .about-card{ /* your existing .card pad look remains */ }
}



/* Title underline sweep on view */
.section-title{
  position:relative;
}
.section-title::after{
  content:"";
  position:absolute; left:0; bottom:-6px; height:2px; width:0%;
  background: linear-gradient(90deg, var(--clr-gold), var(--clr-accent));
  border-radius:2px;
  opacity:.85;
  transition: width .7s cubic-bezier(.2,.65,.2,1);
}
.section-title.is-revealed::after{ width: 58% }









/* Estimator */
.estimator { overflow: hidden }
.est-form .extras { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem }
.est-form .extras label { display:flex; gap:.5rem; align-items:center; font-weight:600; opacity:.95 }
.est-output { margin-top:1rem; padding:1rem; border-radius:var(--radius-2xl); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08) }
.est-badges { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.75rem }
.est-numbers { display:grid; grid-template-columns:1fr 1fr; gap:.75rem }
.est-number { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); padding:.9rem; border-radius:1rem }
.scope-hints { display:flex; justify-content:space-between; font-size:.8rem; opacity:.8; margin-top:.35rem }
input[type="range"] { width:100% }
@media (max-width:720px){
  .est-form .extras { grid-template-columns:1fr 1fr }
  .est-numbers { grid-template-columns:1fr }
}

/* === Brand-gold slider */
input[type="range"]{
  /* keeps your width while adding gold theme + filled track support */
  --_val: 50%; /* JS updates this to keep track "filled" to thumb */
  -webkit-appearance:none; appearance:none;
  height:12px; background:transparent; cursor:pointer;
}

/* WebKit (Chrome/Safari/Edge) */
input[type="range"]::-webkit-slider-runnable-track{
  height:12px; border-radius:999px;
  background:
    linear-gradient(to right,
      var(--clr-gold) var(--_val),
      rgba(255,255,255,.18) var(--_val));
  border:1px solid rgba(255,255,255,.18);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; margin-top:-5px; /* centers thumb on 12px track */
  border-radius:50%;
  background: var(--clr-gold);
  border:2px solid #1b1b1b;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}

/* Firefox */
input[type="range"]::-moz-range-track{
  height:12px; border-radius:999px;
  background: rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.18);
}
input[type="range"]::-moz-range-progress{
  height:12px; border-radius:999px;
  background: var(--clr-gold);
}
input[type="range"]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background: var(--clr-gold);
  border:2px solid #1b1b1b;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}


input[type="range"]:focus-visible{
  outline: 3px solid var(--clr-gold);
  outline-offset: 3px;
}

/* Fix Copy Estimate (outline) button colors */
#copyEstimate.btn.btn-outline {
  border-color: var(--clr-gold);
  color: var(--clr-gold);
  background: transparent;
}

#copyEstimate.btn.btn-outline:hover {
  background: rgba(214,177,77,.15); /* soft gold background on hover */
  color: var(--clr-text);
  transform: translateY(-1px);
}

.est-form .extras input[type="checkbox"] {
  accent-color: var(--clr-gold);
  width: 18px;
  height: 18px;
  border-radius: 4px; /* slight rounding */
  cursor: pointer;
}


/* Contact */
form{display:grid;gap:.75rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}

/* Inputs with brand-aligned contrast */
input,textarea,select{
  width:100%;padding:.9rem;border-radius:.9rem;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(18,70,68,.14);
  color:var(--clr-text)
}
textarea{min-height:140px}

/* Select polish (arrow + states) */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:
    linear-gradient(transparent,transparent),
    url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23124644' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .8rem center;
  background-size:18px;
}
select:focus{outline:3px solid var(--clr-gold); outline-offset:2px; border-color:var(--clr-gold);}
select option{color:#0c2322; background:#ffffff;} /* dropdown list legible */

.contact-card{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1.25rem}
.contact-aside{border-left:1px solid rgba(255,255,255,.12);padding-left:1rem}
.socials{display:flex;gap:.5rem;margin-top:.5rem}
.muted{opacity:.8;margin-top:1rem}

/* ===== Themed selects (field + dropdown list) ===== */

/* Field appearance (closed state) */
select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:
    linear-gradient(180deg, rgba(18,70,68,.18), rgba(18,70,68,.10)),
    url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23d6b14d' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E")
      no-repeat right .8rem center / 18px; /* gold caret */
  border:1px solid rgba(214,177,77,.35);     /* subtle gold edge */
  color: var(--clr-text);
}
select:hover{
  border-color: rgba(214,177,77,.55);
  background-image:
    linear-gradient(180deg, rgba(18,70,68,.22), rgba(18,70,68,.12)),
    url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23d6b14d' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}
select:focus{
  outline:3px solid var(--clr-gold);
  outline-offset:2px;
  border-color: var(--clr-gold);
  box-shadow: 0 0 0 3px rgba(214,177,77,.18);
}

/* Opened list styling (best-effort cross-browser) */
select option{
  color: var(--clr-text);
  background: var(--clr-dark);            /* deep green */
}
select optgroup{
  color: var(--clr-gold);
  background: var(--clr-dark);
  font-weight: 700;
}

/* Placeholder option style */
select option[disabled][selected]{
  color: rgba(233,243,242,.6);
}

/* High-contrast mode hint for newer browsers */
@supports (color-scheme: light dark){
  select { color-scheme: dark; } /* nudges UA menus toward dark palette */
}

/* Budget dropdown inherits same theme */
#budget { /* nothing extra needed; included by rules above */ }

/* Mobile touch targets a bit taller */
@media (max-width:720px){
  select{ padding:.95rem 2.4rem .95rem .9rem }
}







/* Footer (gold bg, green text) */
footer{border-top:1px solid rgba(0,0,0,.12);padding:2rem 0;background:var(--clr-gold);color:var(--clr-primary)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem}
.footer-links{display:flex;flex-direction:column}
.footer-links a{padding:.3rem 0;font-weight:600;color:var(--clr-primary);border-radius:.5rem;transition:.25s background,.25s transform}
.footer-links a:hover{background:rgba(18,70,68,.12);transform:translateX(4px)}
.credits{opacity:.9;font-size:.9rem;margin-top:.5rem;color:#083130}

/* Utilities */
.mt-0{margin-top:0}
.center{text-align:center}
.accent{color:var(--clr-gold)}
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);margin:2.5rem 0}

/* Peacock + Feathers (festive) */
.peacock{position:absolute;right:-18px;bottom:-18px;width:min(22vw,180px);z-index:1;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));animation:bob 4.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.feather-field{position:fixed;inset:0;pointer-events:none;z-index:5}
.feather, .feather-eye{position:absolute;opacity:0;will-change:transform,opacity;}
.feather{width:32px;aspect-ratio:1/3;border-radius:999px}
.feather-eye{width:14px;height:14px;border-radius:999px;}
@keyframes drift{
  0%{ transform:translateY(-10vh) translateX(0) rotate(0deg); opacity:0; }
  10%{ opacity:.65; }
  50%{ transform:translateY(50vh) translateX(6vw) rotate(120deg); }
  100%{ transform:translateY(110vh) translateX(-6vw) rotate(240deg); opacity:0; }
}

/* Feather/Confetti burst */
.burst {
  position: fixed; inset: 0; pointer-events: none; z-index: 1000;
}
.burst__piece {
  position: absolute; width: 10px; height: 16px; border-radius: 6px;
  will-change: transform, opacity;
}
.burst__piece--feather {
  width: 12px; height: 26px; border-radius: 999px;
  background: radial-gradient(60% 60% at 50% 20%, var(--clr-gold), rgba(0,0,0,0));
  box-shadow: 0 0 10px rgba(0,0,0,.25);
}
@keyframes burst-fly {
  0%   { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; }
  80%  { opacity: .9; }
  100% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(.95); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .burst__piece { animation: none !important; opacity: 0 !important; }
}


/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
}

/* Responsive */
@media (max-width: 980px){
  .hero-wrap{grid-template-columns:1fr}
  .portfolio .grid-3{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .contact-card{grid-template-columns:1fr}
  .contact-aside{border-left:none;padding-left:0;border-top:1px solid rgba(255,255,255,.12);padding-top:1rem}
  .footer-grid{grid-template-columns: 1fr 1fr}
}
@media (max-width: 720px){
  .grid-3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .navlinks{display:none}
  .burger{display:flex}
  .two{grid-template-columns:1fr}
  .portfolio .grid-3{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  footer .brand{align-items:center}
  footer nav a{padding:.4rem 0}
}



/* ALWAYS AT THE END */
/* Admin stats overlay (only shown when enabled via ?admin=SECRET) */
.kp-stats-wrap {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(4px);
  display: grid; place-items: center;
}
.kp-stats {
  width: min(92vw, 480px);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-soft);
  color: var(--clr-text);
}
.kp-stats__head {
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1rem; border-bottom:1px solid rgba(255,255,255,.12);
}
.kp-stats__close {
  background: transparent; border: 0; color: var(--clr-text);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.kp-stats__list { padding:.5rem 1rem; max-height: 60vh; overflow:auto; }
.kp-stats__row {
  display:flex; justify-content:space-between; align-items:center;
  padding:.6rem 0; border-bottom:1px dashed rgba(255,255,255,.12);
}
.kp-stats__row:last-child { border-bottom:0 }
.kp-stats__empty { opacity:.85; padding:1rem; }
.kp-stats__actions { display:flex; gap:.5rem; justify-content:flex-end; padding:.75rem 1rem 1rem; }







/* ===== Premium Service Cards (3D tilt + Krishna motifs) — MERGED/ENHANCED ===== */
.services-grid { gap: 1.25rem }

.service-card {
  position: relative;
  overflow: visible;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.16);              /* slightly stronger edge for contrast */
  border-radius: calc(var(--radius-2xl) + 4px);
  padding: 0; /* inner handles spacing */
  --tilt: 6deg;
  --pop: 1.012;
  perspective: 1100px;                                   /* deeper perspective for 3D pop */
}

/* subtle animated border (conic shimmer) — stronger visibility */
.service-card::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  background:
    conic-gradient(from var(--shine, 0deg),
      rgba(214,177,77,.35), transparent 40%, rgba(50,120,128,.35), transparent 70%, rgba(214,177,77,.35));
  filter: blur(12px) saturate(120%);
  opacity: .28;
  z-index: -1;
  transition: opacity .3s ease;
}
.service-card:hover::before { opacity: .5 }

/* FULL-COVER hover glow that matches card size */
.service-card::after{
  content:"";
  position:absolute; inset:0;                             /* cover entire card */
  border-radius:inherit;
  background:
    radial-gradient(140% 100% at 50% -20%,
      rgba(255,255,255,.18),
      rgba(255,255,255,0) 60%);
  opacity:0;
  transition: opacity .28s ease;
  pointer-events:none;
  z-index:0;                                              /* below content */
}
.service-card:hover::after{ opacity:.9 }

/* 3D inner */
.service-3d {
  position: relative;
  display: grid;
  gap: .9rem;
  padding: 1.25rem;
  transform-style: preserve-3d;
  transition: transform .3s ease, box-shadow .3s ease;
  /* darker base so the white hover layer reads */
  background:
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(255,255,255,.03)),
    radial-gradient(120% 120% at 10% -10%, rgba(214,177,77,.08), transparent 55%);
}
.service-card:hover .service-3d {
  transform: translateZ(18px) scale(1.018);               /* clearer lift */
  box-shadow:
    0 22px 60px rgba(0,0,0,.45),
    0 6px 16px rgba(0,0,0,.35);
}

/* top row — improved alignment & measure */
.service-top {
  display: grid;
  grid-template-columns: 56px 1fr;                        /* icon column + content */
  gap: .85rem;
  align-items: center;
}
.service-top h3 {
  margin: 0;
  line-height: 1.15;
  text-align: left;                                       /* prevent right bias */
  max-width: 22ch;                                        /* avoid awkward 3-word stacking */
}
.service-top p { margin: .2rem 0 0 0; opacity: .92 }

/* richer lists */
.service-list { margin: .25rem 0 0 0; padding: 0; list-style: none; display: grid; gap: .35rem }
.service-list li {
  position: relative; padding-left: 1.2rem;
}
.service-list li::before {
  content: ""; position: absolute; left: 0; top: .5rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--clr-gold), #caa33d);
  box-shadow: 0 0 10px rgba(214,177,77,.5);
}

/* icon with halo */
.icon.halo {
  position: relative;
  background: radial-gradient(60% 60% at 50% 50%, rgba(214,177,77,.22), rgba(255,255,255,.04));
  border: 1px solid rgba(214,177,77,.35);
  box-shadow: 0 8px 24px rgba(214,177,77,.15), inset 0 0 20px rgba(214,177,77,.08);
  transform: translateZ(20px);
}
.icon.halo svg { transform: translateZ(28px) }

/* CTA row */
.service-cta {
  display: flex; justify-content: flex-end; align-items: center; margin-top: .2rem;
}

/* Buttons — designed, clickable, animated */
.btn-soft {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1rem;
  border-radius: 999px;
  border: 2px solid rgba(214,177,77,.55);                 /* slightly heavier border */
  background:
    linear-gradient(180deg, rgba(214,177,77,.28), rgba(214,177,77,.12));
  color: var(--clr-text);
  font-weight: 700;
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  will-change: transform;
  overflow: hidden;
  box-shadow:
    0 6px 16px rgba(214,177,77,.18),
    inset 0 0 0 0 rgba(255,255,255,0);
}
.btn-soft:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 28px rgba(214,177,77,.28),
    inset 0 0 0 1px rgba(233,243,242,.25);
}
.btn-soft:active { transform: translateY(0) scale(.98) }
.btn-soft:focus-visible{
  outline: 3px solid var(--clr-gold);
  outline-offset: 3px;
}

/* Sliding arrow indicator (no extra HTML) */
.btn-soft::after{
  content: "→";
  font-weight: 800;
  opacity: 0;
  transform: translateX(-6px);
  transition: transform .22s ease, opacity .22s ease;
}
.btn-soft:hover::after{
  opacity: .95;
  transform: translateX(4px);
}

/* glint made a touch brighter so it reads on darker base */
.btn-soft .btn-glint {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 25%, transparent 50%);
  transform: translateX(-120%) skewX(-20deg);
  animation: glint 2.4s ease-in-out infinite;
  pointer-events: none;
  opacity: .5;
}
@keyframes glint {
  0% { transform: translateX(-120%) skewX(-20deg); }
  50% { transform: translateX(0%)    skewX(-20deg); }
  100%{ transform: translateX(120%)  skewX(-20deg); }
}

/* Magical ornaments — slightly more visible for depth */
.peacock-feather, .lotus-ornament, .sparkles, .shimmer, .node-grid, .radar {
  position: absolute; pointer-events: none; inset: auto auto -10px -10px; width: 120px; height: 120px; opacity: .28; filter: drop-shadow(0 8px 16px rgba(0,0,0,.35));
  transform: translateZ(8px);
}
.lotus-ornament { right: -8px; left: auto; bottom: -6px; opacity: .28 }
.sparkles { right: -6px; left: auto; bottom: -8px }
.shimmer { right: -10px; left: auto; bottom: -12px; opacity: .28 }
.node-grid { left: -12px; bottom: -12px }
.radar { right: -8px; bottom: -8px }

/* Feather SVG */
.peacock-feather {
  background:
    radial-gradient(closest-side, #124644 0 38%, transparent 39% 100%) 62% 42%/28% 28% no-repeat,
    radial-gradient(closest-side, #327880 0 46%, transparent 47% 100%) 62% 42%/42% 42% no-repeat,
    radial-gradient(closest-side, #d6b14d, transparent 62%) 62% 42%/60% 60% no-repeat;
  mask:
    radial-gradient(120% 120% at 60% 60%, #000 55%, transparent 56%) top left/100% 100% no-repeat;
  border-radius: 50% 50% 45% 45%;
}

/* Lotus */
.lotus-ornament::before, .lotus-ornament::after {
  content: ""; position: absolute; inset: 0; background:
    radial-gradient(closest-side, rgba(214,177,77,.35), transparent 60%) 50% 70%/70% 70% no-repeat,
    radial-gradient(closest-side, rgba(50,120,128,.35), transparent 60%) 30% 55%/60% 60% no-repeat,
    radial-gradient(closest-side, rgba(233,243,242,.25), transparent 60%) 70% 55%/60% 60% no-repeat;
  filter: blur(1px);
}

/* Sparkles */
.sparkles {
  background:
    radial-gradient(circle, rgba(255,255,255,.8), transparent 60%) 20% 30%/6px 6px no-repeat,
    radial-gradient(circle, rgba(214,177,77,.8), transparent 60%) 60% 60%/8px 8px no-repeat,
    radial-gradient(circle, rgba(50,120,128,.8), transparent 60%) 80% 35%/7px 7px no-repeat;
  animation: floatSparkles 6s ease-in-out infinite;
}
@keyframes floatSparkles {
  0%,100% { transform: translateZ(8px) translateY(0) }
  50%     { transform: translateZ(8px) translateY(-6px) }
}

/* Node grid (automation) */
.node-grid {
  background-image:
    radial-gradient(circle at 10% 20%, rgba(214,177,77,.5) 2px, transparent 3px),
    radial-gradient(circle at 40% 60%, rgba(50,120,128,.5) 2px, transparent 3px),
    radial-gradient(circle at 70% 30%, rgba(233,243,242,.5) 2px, transparent 3px);
  background-size: 60px 60px;
  opacity: .22;
}

/* Radar (SEO) */
.radar {
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(214,177,77,.35), transparent 65%),
    conic-gradient(from 0deg, rgba(50,120,128,.45), transparent 120deg, rgba(50,120,128,.45));
  animation: sweep 4.2s linear infinite;
  mix-blend-mode: screen;
}
@keyframes sweep {
  0%   { --shine: 0deg }
  100% { --shine: 360deg }
}

/* Flute divider polish */
.with-ornament { position: relative; display: grid; gap: .6rem; align-items: center; }
.flute-divider { width: 190px; height: 20px }

/* Magnetic hover cursor hint */
@media (hover:hover) and (pointer:fine) {
  .service-card:hover { cursor: pointer }
}

/* Responsive refinements */
@media (max-width: 980px){
  .services-grid { grid-template-columns: 1fr 1fr }
}
@media (max-width: 720px){
  .services-grid { grid-template-columns: 1fr }
}

/* ===== Optional: hero polish (subtle noise for realism) ===== */
body::after{
  content:""; position:fixed; inset:-20%; pointer-events:none; z-index:-1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 .02 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.45; mix-blend-mode: soft-light;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .service-card::before, .sparkles, .radar, .btn-soft .btn-glint { animation: none !important }
  .service-3d, .service-card:hover .service-3d { transform: none !important }
  .service-card:hover::after { opacity: .12 !important; } /* static light layer */
}


/* Service card layout fix: keep text in the wide column */
.service-top{
  display:grid;
  grid-template-columns:56px 1fr;
  grid-auto-rows:auto;
  align-items:start;
}

.service-top .icon{
  grid-column:1;
  grid-row:1 / span 2; /* icon occupies the left column across title+para */
}

.service-top h3{
  grid-column:2 / -1;  /* title in the wide column */
}

.service-top p{
  grid-column:2 / -1;  /* paragraph in the wide column */
  margin:.25rem 0 0 0;
  text-align:start;     /* ensure no accidental justification */
  word-break:normal;
  overflow-wrap:normal;
  hyphens:auto;         /* nicer wraps when available */
}

/* Small screens: same intent, but keep things tight */
@media (max-width:720px){
  .service-top{ grid-template-columns:48px 1fr }
}



/* ===== Service cards: equal height + bottom-pinned CTA ===== */

/* 1) Ensure grid stretches children to equal height */
.services-grid { align-items: stretch }

/* 2) Make each card a flex container and clip inner glow to the card edges */
.service-card{
  display: flex;
  overflow: hidden;              /* keeps inner glow/ornaments inside edges */
}

/* 3) Let the inner panel fill the card and stack vertically */
.service-card .service-3d{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;                /* fill full height */
  min-height: 100%;
  height: 100%;
  border-radius: inherit;        /* seamless corners */
}

/* 4) Normal flow for header + list; CTA reserved for the bottom */
.service-card .service-top{ margin-bottom: .35rem }
.service-card .service-list{ margin-top: .35rem }

/* 5) Pin CTA to the bottom (consumes remaining space above) */
.service-card .service-cta{
  margin-top: auto;              /* pushes CTA to the bottom */
  padding-top: .25rem;           /* small breathing room */
}

/* 6) Ornaments stay visually layered but never affect layout */
.peacock-feather, .lotus-ornament, .sparkles, .shimmer, .node-grid, .radar {
  pointer-events: none;
  z-index: 0;
}

/* 7) Responsive polish so short cards don’t look sparse on mobile */
@media (max-width: 720px){
  .service-card .service-3d{ padding-bottom: 1.1rem } /* extra room above CTA */
}



/* Scroll progress rail */
.scroll-rail{
  position: fixed; right: 10px; top: 10vh; width: 2px; height: 80vh;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.15), transparent);
  z-index: 40; border-radius: 2px; pointer-events:none;
}
.scroll-rail__fill{
  position:absolute; left:0; bottom:0; width:100%; height:0%;
  background: linear-gradient(180deg, var(--clr-gold), var(--clr-accent));
  border-radius: 2px; opacity:.7;
}
@media (max-width:720px){ .scroll-rail{ right: 6px } }
@media (prefers-reduced-motion: reduce){ .scroll-rail__fill{ transition:none } }


/* Category cards: a touch more room on wide screens */
@media (min-width: 981px){
  #services .service-card .service-3d { padding: 1.4rem 1.35rem; }
  #services .service-card .service-list li { line-height: 1.35; }
}

/* ========== SERVICE CARD POLISH (drop-in overrides) ========== */

/* a little more room + consistent equal heights */
.services-grid { gap: 1.25rem; align-items: stretch; }
.service-card {
  min-height: 360px;                 /* makes each card feel substantial (desktop) */
}
@media (max-width: 980px){
  .service-card { min-height: unset; } /* let mobile shrink naturally */
}

/* bigger inner padding, tidy vertical rhythm */
.service-card .service-3d{
  padding: 1.4rem 1.35rem 1.15rem;
  gap: 1rem;                          /* more breathing room between blocks */
}

/* header layout: larger icon, tight title, short intro */
.service-top{
  grid-template-columns: 64px 1fr;    /* bigger, clearer icon column */
  gap: .9rem;
  align-items: start;
}
@media (max-width: 720px){
  .service-top{ grid-template-columns: 56px 1fr; gap: .8rem; }
}

/* icon “badge” look, keeps your halo but slightly bolder */
.service-top .icon{
  width: 64px; height: 64px; border-radius: 18px;
  display:grid; place-items:center;
  background: radial-gradient(60% 60% at 50% 45%, rgba(214,177,77,.26), rgba(255,255,255,.06));
  border: 1px solid rgba(214,177,77,.38);
  box-shadow: 0 10px 24px rgba(0,0,0,.28), inset 0 0 22px rgba(214,177,77,.12);
}
.service-top .icon svg { width: 26px; height: 26px; }

/* per-service accent so each card reads at a glance */
.service-card[data-key="branding"]   .icon{ background: radial-gradient(60% 60% at 50% 45%, rgba(214,177,77,.35), rgba(255,255,255,.06)); }
.service-card[data-key="web"]        .icon{ background: radial-gradient(60% 60% at 50% 45%, rgba(50,120,128,.35),  rgba(255,255,255,.06)); }
.service-card[data-key="social"]     .icon{ background: radial-gradient(60% 60% at 50% 45%, rgba(233,243,242,.26), rgba(255,255,255,.06)); }
.service-card[data-key="game"]       .icon{ background: radial-gradient(60% 60% at 50% 45%, rgba(18,70,68,.35),   rgba(255,255,255,.06)); }
.service-card[data-key="automation"] .icon{ background: radial-gradient(60% 60% at 50% 45%, rgba(120,180,170,.28),rgba(255,255,255,.06)); }
.service-card[data-key="seo"]        .icon{ background: radial-gradient(60% 60% at 50% 45%, rgba(214,177,77,.26), rgba(255,255,255,.06)); }

/* title/intro: optimal measure + clamped lines to avoid congestion */
.service-top h3{
  font-size: clamp(1.05rem, 1.2vw + .8rem, 1.35rem);
  line-height: 1.18;
  margin: 0;
  max-width: 26ch;                    /* keeps clean wraps on desktop */
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.service-top p{
  margin: .3rem 0 0 0;
  opacity: .92;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 980px){
  .service-top h3{ max-width: none; } /* allow full width on smaller screens */
  .service-top p{ -webkit-line-clamp: 3; line-clamp: 3; } /* a bit more room on mobile */
}

/* list: clearer spacing + subtle separators so it doesn’t blob together */
.service-list{
  margin: .2rem 0 0 0;
  padding-top: .4rem;
  display: grid; gap: .45rem;
  border-top: 1px dashed rgba(255,255,255,.12);
}
.service-list li{
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.36;
}
.service-list li::before{
  content: ""; position: absolute; left: 0; top: .55rem;
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--clr-gold), #caa33d);
  box-shadow: 0 0 8px rgba(214,177,77,.45);
}

/* CTA pinned to bottom as before, just nudge spacing */
.service-cta{ margin-top: auto; padding-top: .4rem; }

/* ornament positions stay decorative, but never collide with content */
.peacock-feather, .lotus-ornament, .sparkles, .shimmer, .node-grid, .radar{
  opacity: .26;
  transform: translateZ(0);           /* ensure they don't affect layout */
}

/* slightly bigger on large screens only */
@media (min-width: 1200px){
  .service-card .service-3d{ padding: 1.55rem 1.5rem 1.25rem; }
  .service-top h3{ font-size: 1.4rem; }
}



/* ===== PATCHES FOR CHROME BUGS ===== */


/* ===== Smart banner: cross-browser blend fix ===== */
.smart-banner { position: relative; }
.smart-banner::after{
  z-index: 0;
  /* default: Chrome-safe values; JS will override for non-Chrome */
  mix-blend-mode: var(--sb-blend, normal);
  opacity: var(--sb-op, .18);
}
.smart-wave, .smart-msg { position: relative; z-index: 1; }

/* About cards forced to vertical stack */
.about-stream {
  display: grid;
  grid-auto-flow: row;         /* force rows (fixes Chrome sideways flow) */
  grid-template-columns: 1fr;  /* single column stack */
  gap: 1rem;
}
.about-card { width: 100%; }   /* ensure card fills column */


/* ===== Smart banner mobile centering ===== */
@media (max-width: 720px) {
  .smart-banner {
    grid-template-columns: 1fr;   /* single column */
    text-align: center;
    justify-items: center;        /* center grid children */
  }

  .smart-msg {
    justify-content: center;      /* center label + text */
    text-align: center;
  }

  .smart-label {
    margin-inline: auto;          /* center the pill itself */
  }

  .smart-wave {
    margin-inline: auto;          /* keep the wave centered too */
  }
}


/* Smart wave visuals */
.smart-banner { overflow: visible; }               /* prevent clipping */
.smart-wave   { width: 100%; max-width: 420px; height: 70px; display:block; overflow:visible; filter:drop-shadow(0 3px 10px rgba(0,0,0,.25)); }
#wavePath     { will-change: stroke-dashoffset; }  /* only the animating prop */
.smart-feather{ pointer-events:none; filter:drop-shadow(0 6px 12px rgba(0,0,0,.35)); transform-origin:center; }

/* tiny “float” for the feather */
@keyframes featherBob{ 0%,100%{transform:translate(var(--fx,0),var(--fy,0))} 50%{transform:translate(calc(var(--fx,0) + .2px), calc(var(--fy,0) - .6px))} }
.smart-feather{ animation:featherBob 2.8s ease-in-out infinite; }

@media (max-width:720px){ .smart-wave{ margin-inline:auto } }

@media (prefers-reduced-motion:reduce){
  .smart-feather{ animation:none !important; }
}