/* Layout: sticky header, full-width dark bands with a centred 1180px column; gold used sparingly as the single accent.
   Colours and fonts are taken from the existing ArthaKara site and logo — single dark theme by design. */
:root{
  --bg:#111111;
  --surface:#171717;
  --surface-2:#1c1b18;
  --black:#000000;
  --gold:#D6AF32;
  --gold-hi:#F0CF6A;
  --gold-lo:#9C7B1F;
  --text:#F5F4EF;
  --muted:#BDBDB8;
  --line:rgba(214,175,50,.18);
  --line-soft:rgba(245,244,239,.08);
  --font-display:"Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-label:Cinzel, "Trajan Pro", Georgia, serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --header-h:72px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
::selection{background:var(--gold);color:var(--black)}

.wrap{max-width:1180px;margin-inline:auto;padding-left:max(20px, env(safe-area-inset-left,0px));padding-right:max(20px, env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.12;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,5.6vw,4.4rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:1.3rem}
p{margin:0}
.eyebrow{font-family:var(--font-label);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.lede{color:var(--muted);font-size:1.08rem;max-width:58ch}

/* scroll progress */
.progress{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:2px;z-index:70;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi),var(--gold))}

/* header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;transition:background .4s var(--ease),border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(17,17,17,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line-soft)}
.nav{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:42px;height:42px;overflow:hidden;flex:none;border-radius:50%;background:var(--black);box-shadow:0 0 0 1px var(--line)}
.brand-mark img{width:70px;max-width:none;margin:-8px 0 0 -14px;mix-blend-mode:lighten}
.brand-name{font-family:var(--font-display);font-size:1.32rem;font-weight:600;letter-spacing:.01em}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{position:relative;padding:8px 12px;font-size:.92rem;color:var(--muted);transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);transform-origin:left}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:transparent;border-radius:50%;cursor:pointer;position:relative}
.burger span{position:absolute;left:13px;right:13px;height:1.5px;background:var(--gold);transition:transform .4s var(--ease),opacity .3s}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:26px}
.menu-open .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0}
.menu-open .burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.mobile-menu{position:fixed;inset:0;z-index:45;background:var(--bg);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:calc(var(--header-h) + env(safe-area-inset-top,0px)) max(28px, env(safe-area-inset-right,0px)) 40px max(28px, env(safe-area-inset-left,0px));clip-path:circle(0% at calc(100% - 42px) 36px);transition:clip-path .7s var(--ease);pointer-events:none}
.menu-open .mobile-menu{clip-path:circle(150% at calc(100% - 42px) 36px);pointer-events:auto}
.mobile-menu a{font-family:var(--font-display);font-size:2.2rem;opacity:0;transform:translateY(24px);transition:opacity .5s,transform .6s var(--ease),color .3s}
.mobile-menu a:hover,.mobile-menu a.active{color:var(--gold)}
.menu-open .mobile-menu a{opacity:1;transform:none}
.menu-open .mobile-menu a:nth-child(1){transition-delay:.15s}.menu-open .mobile-menu a:nth-child(2){transition-delay:.21s}.menu-open .mobile-menu a:nth-child(3){transition-delay:.27s}.menu-open .mobile-menu a:nth-child(4){transition-delay:.33s}.menu-open .mobile-menu a:nth-child(5){transition-delay:.39s}.menu-open .mobile-menu a:nth-child(6){transition-delay:.45s}
.mobile-menu .btn{margin-top:28px;align-self:flex-start;font-family:var(--font-body);font-size:1rem}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;font-size:.94rem;font-weight:500;border:1px solid var(--gold);cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:color .4s var(--ease),transform .3s var(--ease),box-shadow .4s}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-gold{background:var(--gold);color:var(--black)}
.btn-gold::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease)}
.btn-gold:hover::before{transform:translateX(120%)}
.btn-gold:hover{box-shadow:0 10px 40px -10px rgba(214,175,50,.6)}
.btn-ghost{background:transparent;color:var(--gold)}
.btn-ghost::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gold);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease)}
.btn-ghost:hover{color:var(--black)}
.btn-ghost:hover::before{transform:scaleY(1)}
.btn-sm{padding:10px 18px;font-size:.88rem}

/* page transition curtain */
.curtain{position:fixed;inset:0;z-index:90;pointer-events:none;display:grid;place-items:center;background:var(--black);transform:translateY(101%)}
.curtain::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold-hi),transparent)}
.curtain img{width:120px;mix-blend-mode:lighten;opacity:0;transform:scale(.9);transition:opacity .3s,transform .5s var(--ease)}
.curtain.cover{animation:curtainIn .45s var(--ease) forwards}
.curtain.cover img{opacity:1;transform:none}
.curtain.uncover{animation:curtainOut .55s var(--ease) forwards}
@keyframes curtainIn{from{transform:translateY(101%)}to{transform:translateY(0)}}
@keyframes curtainOut{from{transform:translateY(0)}to{transform:translateY(-101%)}}

/* page entrance */
.page>section{animation:pageIn .8s var(--ease) both}
.page>section:nth-child(2){animation-delay:.08s}
.page>section:nth-child(3){animation-delay:.14s}
@keyframes pageIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* scroll-driven reveal (content stays visible where unsupported) */
@supports (animation-timeline: view()){
  .reveal{animation:revealUp linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  .reveal-stagger>*{animation:revealUp linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
}
@keyframes revealUp{from{opacity:0;transform:translateY(40px) scale(.98)}to{opacity:1;transform:none}}

section{padding-block:clamp(72px,10vw,128px)}
.section-head{display:flex;flex-direction:column;gap:16px;margin-bottom:52px;max-width:720px}

/* HERO */
.hero{position:relative;padding-block:clamp(56px,8vw,96px) clamp(72px,9vw,112px);overflow:hidden}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.75}
.hero::after{content:"";position:absolute;width:780px;height:780px;right:-220px;top:-200px;background:radial-gradient(closest-side,rgba(214,175,50,.12),transparent);pointer-events:none}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:26px;min-width:0}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.08em}
.hero h1 .w{display:inline-block;animation:wordUp 1s var(--ease) both;animation-delay:calc(var(--i) * 70ms + 200ms)}
@keyframes wordUp{from{transform:translateY(110%);opacity:0}to{transform:none;opacity:1}}
.shimmer{background:linear-gradient(100deg,var(--gold-lo) 0%,var(--gold) 30%,var(--gold-hi) 50%,var(--gold) 70%,var(--gold-lo) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wordUp 1s var(--ease) both, shimmer 6s linear infinite;animation-delay:calc(var(--i) * 70ms + 200ms), 1.4s}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-150% 0}}
.fade-up{animation:pageIn .9s var(--ease) both;animation-delay:var(--d,0s)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px}
.hero-meta{display:flex;flex-wrap:wrap;gap:28px;padding-top:10px;border-top:1px solid var(--line-soft);margin-top:6px}
.hero-meta div{display:flex;flex-direction:column;gap:2px}
.hero-meta strong{font-family:var(--font-display);font-size:2rem;font-weight:500;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1.1}
.hero-meta span{font-size:.84rem;color:var(--muted)}

/* cinematic emblem: iris-open reveal, light burst, glow, sheen sweep, slow push-in, 3D cursor parallax */
.emblem{position:relative;aspect-ratio:1;max-width:460px;width:100%;justify-self:center;perspective:1100px;animation:emblemIn 1.6s var(--ease) both .1s}
@keyframes emblemIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.em-halo{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(closest-side,rgba(240,207,106,.32),rgba(214,175,50,.1) 55%,transparent 75%);filter:blur(14px);animation:breathe 7s ease-in-out infinite;transform:translate(var(--hx,0),var(--hy,0))}
@keyframes breathe{0%,100%{opacity:.55;scale:.94}50%{opacity:1;scale:1.06}}
.em-stage{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.em-stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:translateZ(20px)}
.ring-draw{stroke-dasharray:1260;stroke-dashoffset:1260;animation:draw 2.6s cubic-bezier(.7,0,.2,1) forwards 1s}
.ring-dash{transform-origin:50% 50%;animation:spin 70s linear infinite}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}
.em-disc{position:absolute;inset:7%;border-radius:50%;overflow:hidden;background:var(--black);transform:translateZ(50px);box-shadow:0 40px 90px -25px rgba(0,0,0,.95),0 0 0 1px rgba(214,175,50,.25),0 0 70px rgba(214,175,50,.16);animation:iris 2.4s cubic-bezier(.76,0,.24,1) both .25s}
@keyframes iris{0%{clip-path:circle(0% at 50% 50%);filter:brightness(3) blur(10px)}55%{filter:brightness(1.5) blur(1px)}100%{clip-path:circle(50% at 50% 50%);filter:none}}
.em-disc img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;animation:pushIn 16s ease-in-out infinite alternate 2.6s}
@keyframes pushIn{from{transform:scale(1)}to{transform:scale(1.03)}}
.em-disc .sheen{position:absolute;inset:-10%;background:linear-gradient(112deg,transparent 38%,rgba(255,238,190,.08) 45%,rgba(255,242,205,.42) 50%,rgba(255,238,190,.08) 55%,transparent 62%);mix-blend-mode:screen;transform:translateX(-130%);animation:sheen 8s cubic-bezier(.65,0,.35,1) infinite 2.8s}
@keyframes sheen{0%{transform:translateX(-130%)}28%,100%{transform:translateX(130%)}}
.em-disc .vignette{position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,transparent 86%,rgba(0,0,0,.6));pointer-events:none}
.em-flare{position:absolute;left:50%;top:50%;width:0;height:0;transform:translateZ(90px);pointer-events:none}
.em-flare::after{content:"";position:absolute;left:0;top:0;width:140px;height:140px;margin:-70px 0 0 -70px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,246,220,.9),rgba(240,207,106,.35) 40%,transparent 70%);animation:flash 2.4s ease-out both .9s}
@keyframes flash{0%{opacity:0;transform:scale(.2)}25%{opacity:1;transform:scale(1.4)}100%{opacity:0;transform:scale(2.2)}}
.em-sparks{position:absolute;inset:0;transform:translateZ(70px);pointer-events:none}
.em-sparks i{position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);margin:calc(var(--s) / -2);border-radius:50%;background:var(--gold-hi);box-shadow:0 0 10px 2px rgba(240,207,106,.6);opacity:0;animation:spark var(--d) ease-out infinite var(--delay)}
@keyframes spark{0%{opacity:0;transform:rotate(var(--a)) translateX(30%) scale(.4)}15%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--r)) scale(1)}}

/* marquee */
.marquee{border-block:1px solid var(--line-soft);background:var(--surface);overflow:hidden;padding-block:20px;position:relative}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:1;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--surface),transparent)}
.marquee::after{right:0;background:linear-gradient(-90deg,var(--surface),transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 60s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--font-display);font-size:1.25rem;font-style:italic;color:var(--muted);white-space:nowrap;display:inline-flex;align-items:center;gap:28px;padding-right:28px}
.marquee-track span::after{content:"\2726";font-style:normal;font-size:.8rem;color:var(--gold)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* category cards */
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;perspective:1400px}
.card{position:relative;display:flex;flex-direction:column;gap:14px;padding:30px 28px 26px;background:var(--surface);border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;isolation:isolate;transform-style:preserve-3d;
  transition:scale .7s cubic-bezier(.34,1.56,.64,1),rotate .6s cubic-bezier(.22,1,.36,1),border-radius .7s cubic-bezier(.34,1.56,.64,1),border-color .5s,box-shadow .6s ease,background .5s,filter .6s ease}
/* glossy glass layer + soft white light that follows the cursor */
.card .bubbles{position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .5s;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.075),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01) 60%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
/* thin light tracing around the border */
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .5s;
  background:conic-gradient(from var(--ang),transparent 0deg 250deg,rgba(255,250,235,.0) 260deg,rgba(255,250,235,.55) 320deg,rgba(255,250,235,0) 350deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.card:hover{scale:1.045;border-radius:30px;border-color:rgba(255,255,255,.12);background:rgba(23,23,23,.35);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:2;box-shadow:0 30px 60px -30px rgba(0,0,0,.95)}
.card:hover .bubbles{opacity:1}
.card:hover::after{opacity:1;animation:trace 3.2s linear infinite}
@keyframes trace{to{--ang:360deg}}
.card:active{scale:.99;transition-duration:.15s}
/* focus: the other cards step back */
@media (hover:hover){.cards:has(.card:hover) .card:not(:hover){filter:brightness(.55) saturate(.7)}}
.ico{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--gold);transition:transform .7s cubic-bezier(.34,1.56,.64,1),border-color .5s}
.ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.card p{color:var(--muted);font-size:.95rem}
.card .meta{margin-top:auto;padding-top:14px;display:flex;justify-content:space-between;align-items:center;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border-top:1px solid var(--line-soft);transition:letter-spacing .6s cubic-bezier(.22,1,.36,1),border-color .5s}
/* content lifts in sequence, icon redraws */
.card h3,.card p,.card .meta{transition-property:transform,letter-spacing,border-color;transition-duration:.6s;transition-timing-function:cubic-bezier(.22,1,.36,1)}
.card:hover .ico{transform:translateZ(30px) translateY(-3px) scale(1.06);border-color:rgba(255,255,255,.22)}
.card:hover h3{transform:translateZ(24px) translateY(-3px);transition-delay:.05s}
.card:hover p{transform:translateZ(16px) translateY(-2px);transition-delay:.1s}
.card:hover .meta{transform:translateZ(10px);letter-spacing:.2em;border-color:rgba(255,255,255,.12);transition-delay:.15s}
.card .meta .arr{display:inline-block;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.card:hover .meta .arr{transform:translateX(6px)}
.card:hover .ico svg *{stroke-dasharray:1;animation:iconDraw 1.1s cubic-bezier(.65,0,.35,1) both}
@keyframes iconDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}


/* split / about teaser */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split>*{min-width:0}
.quote-panel{position:relative;padding:44px 40px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,var(--surface-2),var(--bg));overflow:hidden}
.quote-panel::before{content:"\201C";position:absolute;top:-30px;right:20px;font-family:var(--font-display);font-size:12rem;color:rgba(214,175,50,.08);line-height:1}
.quote-panel blockquote{margin:0;font-family:var(--font-display);font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.35}
.quote-panel .cred{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px}
.pill{font-size:.8rem;padding:7px 14px;border-radius:999px;border:1px solid var(--line);color:var(--gold);background:rgba(214,175,50,.05)}

.standards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.std{padding:30px 28px;border-radius:14px;border:1px solid var(--line-soft);background:var(--surface);display:flex;flex-direction:column;gap:12px;transition:border-color .4s,transform .5s var(--ease)}
.std:hover{border-color:var(--line);transform:translateY(-4px)}
.std p{color:var(--muted);font-size:.95rem}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;position:relative;counter-reset:step}
.steps::before{content:"";position:absolute;left:0;right:0;top:27px;height:1px;background:linear-gradient(90deg,var(--line),var(--gold),var(--line))}
.step{position:relative;padding-right:28px;display:flex;flex-direction:column;gap:12px}
.step .num{width:54px;height:54px;border-radius:50%;background:var(--bg);border:1px solid var(--gold);display:grid;place-items:center;font-family:var(--font-display);font-size:1.3rem;color:var(--gold);position:relative;z-index:1;transition:background .4s,color .4s}
.step:hover .num{background:var(--gold);color:var(--black)}
.step p{color:var(--muted);font-size:.95rem;max-width:32ch}

/* CTA band */
.cta-band{position:relative;overflow:hidden;background:var(--black);border-block:1px solid var(--line-soft)}
.cta-band .wrap{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px}
.cta-band h2{max-width:16ch}

/* inner page hero */
.page-hero{padding-block:clamp(56px,8vw,96px) clamp(40px,6vw,64px);position:relative;overflow:hidden;border-bottom:1px solid var(--line-soft)}
.page-hero .wrap{display:flex;flex-direction:column;gap:20px;position:relative;z-index:1}
.page-hero::after{content:"";position:absolute;width:640px;height:640px;left:-200px;top:-320px;background:radial-gradient(closest-side,rgba(214,175,50,.1),transparent);pointer-events:none}
.crumbs{font-size:.85rem;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a:hover{color:var(--gold)}
.cat-hero-top{display:flex;align-items:center;gap:18px}
.cat-hero-top .ico{width:64px;height:64px}
.cat-hero-top .ico svg{width:28px;height:28px}

/* service list */
.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.svc{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 4px;border-bottom:1px solid var(--line-soft);position:relative;cursor:pointer;text-align:left;background:none;border-left:0;border-right:0;border-top:0;width:100%}
.svc::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.svc:hover::after,.svc:focus-visible::after{transform:scaleX(1)}
.svc .name{font-family:var(--font-display);font-size:1.18rem;transition:color .3s,transform .5s var(--ease);min-width:0}
.svc:hover .name{color:var(--gold);transform:translateX(6px)}
.svc .go{flex:none;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px;transition:color .3s}
.svc .go .arr{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);transition:background .4s,color .4s,transform .5s var(--ease)}
.svc:hover .go{color:var(--gold)}
.svc:hover .go .arr{background:var(--gold);color:var(--black);transform:rotate(-45deg)}
.cat-nav{display:flex;justify-content:space-between;gap:20px;margin-top:64px;flex-wrap:wrap}
.cat-nav a{display:flex;flex-direction:column;gap:4px;padding:20px 24px;border:1px solid var(--line-soft);border-radius:12px;min-width:min(260px,100%);transition:border-color .4s,transform .4s var(--ease)}
.cat-nav a:hover{border-color:var(--gold);transform:translateY(-3px)}
.cat-nav small{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cat-nav span{font-family:var(--font-display);font-size:1.15rem;color:var(--gold)}
.cat-nav .next{margin-left:auto;text-align:right}

/* contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.contact-grid>*{min-width:0}
.channels{display:flex;flex-direction:column;gap:14px}
.channel{display:flex;gap:18px;align-items:flex-start;padding:22px 22px;border:1px solid var(--line-soft);border-radius:14px;background:var(--surface);transition:border-color .4s,transform .5s var(--ease)}
.channel:hover{border-color:var(--line);transform:translateX(4px)}
.channel .ico{flex:none}
.channel h3{font-size:1.1rem;margin-bottom:6px}
.channel .val{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-variant-numeric:tabular-nums}
.channel .val a{color:var(--text);border-bottom:1px solid var(--line);transition:color .3s,border-color .3s;word-break:break-all}
.channel .val a:hover{color:var(--gold);border-color:var(--gold)}
.copy{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;transition:color .3s,border-color .3s,background .3s}
.copy:hover{color:var(--gold);border-color:var(--gold)}
.copy.done{background:var(--gold);color:var(--black);border-color:var(--gold)}

.form-card{padding:36px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(170deg,var(--surface-2),var(--surface));position:relative}
.form-card h2{font-size:1.9rem;margin-bottom:8px}
.form-card .note{color:var(--muted);font-size:.9rem;margin-bottom:26px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:.8rem;letter-spacing:.06em;color:var(--muted)}
.field label b{color:var(--gold);font-weight:500}
.field input,.field select,.field textarea{width:100%;background:var(--bg);border:1px solid var(--line-soft);border-radius:10px;padding:13px 14px;transition:border-color .3s,box-shadow .3s;outline:none}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:38px}
.field select:disabled{opacity:.5}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(214,175,50,.12)}
.field.invalid input,.field.invalid select{border-color:#c4553f}
.field .err{font-size:.78rem;color:#e08470;min-height:0}
.consent{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;font-size:.86rem;color:var(--muted);cursor:pointer}
.consent input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;border:1px solid var(--gold);border-radius:5px;margin-top:2px;display:grid;place-items:center;cursor:pointer;transition:background .3s}
.consent input::after{content:"";width:10px;height:6px;border-left:2px solid var(--black);border-bottom:2px solid var(--black);transform:rotate(-45deg) scale(0);transition:transform .3s var(--ease);margin-top:-2px}
.consent input:checked{background:var(--gold)}
.consent input:checked::after{transform:rotate(-45deg) scale(1)}
.consent.invalid{color:#e08470}
.form-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:6px}
.success{display:flex;flex-direction:column;align-items:flex-start;gap:16px;animation:pageIn .7s var(--ease) both}
.success .check{width:64px;height:64px}
.success .check circle{stroke-dasharray:190;stroke-dashoffset:190;animation:draw .9s var(--ease) forwards}
.success .check path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s var(--ease) forwards .7s}
.success p{color:var(--muted)}

/* resources */
.soon{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;padding-block:20px}
.soon .loader{width:120px;height:120px;position:relative}
.soon .loader span{position:absolute;inset:0;border-radius:50%;border:1px solid var(--line)}
.soon .loader span:nth-child(1){border-top-color:var(--gold);animation:spin 2.4s linear infinite}
.soon .loader span:nth-child(2){inset:14px;border-right-color:var(--gold-hi);animation:spin 3.6s linear infinite reverse}
.soon .loader span:nth-child(3){inset:28px;border-bottom-color:var(--gold);animation:spin 1.8s linear infinite}
.soon .lede{margin-inline:auto}

/* footer */
.site-footer{background:var(--black);border-top:1px solid var(--line-soft);padding-block:72px 32px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:40px}
.foot-grid>*{min-width:0}
.foot-grid h4{font-family:var(--font-label);font-size:.76rem;letter-spacing:.22em;color:var(--gold);font-weight:500;margin:0 0 18px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot-grid li a,.foot-grid li span{color:var(--muted);font-size:.92rem;transition:color .3s;word-break:break-word}
.foot-grid li a:hover{color:var(--gold)}
.foot-brand p{color:var(--muted);font-size:.92rem;margin-top:16px;max-width:30ch}
.foot-base{margin-top:56px;padding-top:24px;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.84rem;color:var(--muted)}
.foot-ornament{display:flex;align-items:center;gap:14px;color:var(--gold)}
.foot-ornament::before,.foot-ornament::after{content:"";width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.foot-ornament::after{transform:scaleX(-1)}

/* floating whatsapp */
.wa-float{position:fixed;right:calc(22px + env(safe-area-inset-right,0px));bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:40;width:56px;height:56px;border-radius:50%;background:var(--gold);color:var(--black);display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(214,175,50,.7);transition:transform .4s var(--ease)}
.wa-float:hover{transform:scale(1.1) rotate(-8deg)}
.wa-float svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--gold);animation:ping 2.4s var(--ease) infinite}
@keyframes ping{from{transform:scale(1);opacity:.8}to{transform:scale(1.7);opacity:0}}

/* responsive */
@media (max-width:980px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav-links,.nav .btn{display:none}
  .burger{display:block;z-index:55}
  .hero-grid,.split,.contact-grid{grid-template-columns:1fr}
  .emblem{max-width:340px;order:-1}
  .standards,.steps{grid-template-columns:1fr}
  .steps{gap:32px}
  .steps::before{left:27px;right:auto;top:0;bottom:0;width:1px;height:auto;background:linear-gradient(180deg,var(--line),var(--gold),var(--line))}
  .step{flex-direction:row;align-items:flex-start;gap:20px;padding-right:0}
  .step .num{flex:none}
  .svc-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .cards,.fields,.foot-grid{grid-template-columns:1fr}
  .form-card{padding:26px 20px}
  .quote-panel{padding:32px 24px}
  .hero-meta{gap:20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .ring-draw{stroke-dashoffset:0}
}

/* Resources dropdown in the main navigation */
.nav-links a{padding:8px 10px}
.nav-dd{position:relative}
.nav-dd>a{display:inline-flex;align-items:center;gap:4px}
.dd-caret{font-size:.7em;color:var(--gold);transition:transform .3s}
.dd-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,8px);min-width:290px;padding:10px;border-radius:14px;background:rgba(17,17,17,.97);border:1px solid var(--line);box-shadow:0 24px 60px -20px rgba(0,0,0,.9);display:grid;gap:2px;opacity:0;visibility:hidden;transition:opacity .25s,transform .35s var(--ease),visibility .25s;z-index:60}
.dd-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-dd:hover .dd-menu,.nav-dd:has(:focus-visible) .dd-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav-dd:hover .dd-caret,.nav-dd:has(:focus-visible) .dd-caret{transform:rotate(180deg)}
.dd-menu a{padding:9px 12px!important;border-radius:8px;font-size:.88rem;color:var(--muted);white-space:nowrap}
.dd-menu a::after{display:none}
.dd-menu a:hover{background:rgba(214,175,50,.08);color:var(--gold)}
@media (max-width:1100px){.nav-links a{padding:8px 7px;font-size:.86rem}.nav .btn-sm{padding:9px 14px;font-size:.82rem}}
.dd-menu a.dd-all{color:var(--gold);border-top:1px solid var(--line-soft);margin-top:4px;padding-top:11px!important;border-radius:0 0 8px 8px}
.nav-dd.dd-closed .dd-menu{opacity:0!important;visibility:hidden!important}

/* Hero emblem: align with the heading block rather than the full column (stats row included) */
@media (min-width:861px){.hero-grid .emblem{align-self:start;margin-top:clamp(8px,2vw,32px);left:clamp(16px,3vw,56px)}}

/* Base reset (the artifact preview supplied this; the standalone site needs it explicitly) */
html,body{margin:0;padding:0}

/* Phones and tablets: draw the emblem flat and centred. The 3D depth layers scale and shift
   relative to the frame on small screens, so they are switched off below 861px and on touch devices. */
@media (max-width:860px),(hover:none){
  .emblem{perspective:1200px;left:0!important;margin-inline:auto;width:min(330px,76vw);max-width:none;justify-self:center}
  /* Tilt the whole (flat) emblem; JS in emblem-tilt.js drives --rx/--ry from touch, motion sensor or an idle sway */
  .em-stage{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:flat;transition:none;will-change:transform}
  .em-stage svg,.em-disc,.em-sparks,.em-flare{transform:none}
  .em-halo{transform:translate(var(--hx,0px),var(--hy,0px))!important}
  .em-sparks i{--r:min(var(--rr,46vw),46vw)!important}
}