/* ==========================================================================
   KampGold UG Ltd — design system v2 ("private bullion house")
   Palette: vault green-black + ivory + ONE jade accent. Gold only appears
   in photographs. Type: Bodoni Moda (display) + Instrument Sans (text),
   both self-hosted in /assets/fonts.
   ========================================================================== */

@font-face{
  font-family:"Bodoni Moda";
  src:url("fonts/bodoni-moda-latin-standard-normal.woff2") format("woff2");
  font-weight:400 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Instrument Sans";
  src:url("fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}

:root{
  --bg:#09130F;
  --bg-2:#0D1A15;
  --panel:#11221B;
  --text:#ECE9DE;
  --muted:#A8B3AB;
  --faint:#7E8C84;
  --line:rgba(236,233,222,.12);
  --line-strong:rgba(236,233,222,.26);
  --jade:#6CBE9A;
  --jade-deep:#2D7558;
  --on-jade:#05100B;
  --paper:#EFEBDD;
  --paper-ink:#14201A;

  --serif:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);

  --wrap:1180px;
  --gutter:clamp(20px,4vw,40px);
  --r-xl:36px; --r-lg:28px; --r-md:20px; --r-sm:12px;

  --z-menu:90; --z-header:100; --z-grain:110;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg); scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:96px}
html.menu-open{overflow:hidden}
body{
  margin:0; min-height:100dvh; overflow-x:clip;
  color:var(--text); font:400 1.0625rem/1.65 var(--sans);
  background:
    radial-gradient(70% 50% at 88% -8%, rgba(45,117,88,.26), transparent 70%),
    radial-gradient(60% 40% at -10% 38%, rgba(45,117,88,.10), transparent 70%),
    var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}
/* film grain — fixed, non-interactive, never on scrolling content */
body::before{
  content:""; position:fixed; inset:0; z-index:var(--z-grain); pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none; touch-action:manipulation}
button{font:inherit; color:inherit; touch-action:manipulation}
h1,h2,h3,h4,p,dl,dd,figure,ul,ol{margin:0}
ul,ol{padding:0; list-style:none}
:focus-visible{outline:2px solid var(--jade); outline-offset:3px; border-radius:6px}

.wrap{width:100%; max-width:calc(var(--wrap) + var(--gutter)*2); margin-inline:auto; padding-inline:var(--gutter)}
.skip{position:fixed; left:16px; top:-80px; z-index:200; background:var(--jade); color:var(--on-jade); padding:12px 18px; border-radius:999px; font-weight:600; transition:top .2s var(--ease-out)}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}

/* icons */
.ic{width:1.25em; height:1.25em; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; flex:none}
.ic--fill{fill:currentColor; stroke:none}

/* ---------- type ---------- */
.display,.title,.h2,.h3{font-family:var(--serif); font-weight:500; letter-spacing:-.02em; text-wrap:balance}
.display{font-size:clamp(2.5rem,5.4vw,4.6rem); line-height:1.02}
.title{font-size:clamp(2.35rem,5.4vw,4.5rem); line-height:1.08; max-width:22ch}
.h2{font-size:clamp(2rem,4.1vw,3.4rem); line-height:1.08}
.h3{font-size:clamp(1.3rem,2vw,1.65rem); line-height:1.2; letter-spacing:-.01em; font-weight:600}
.lead{font-size:clamp(1.0625rem,1.5vw,1.25rem); line-height:1.6; color:var(--muted); max-width:56ch; text-wrap:pretty}
.muted{color:var(--muted)}
.prose{max-width:68ch}
.prose p{color:var(--muted); margin-bottom:1.15em; text-wrap:pretty}
.prose .h3{color:var(--text); margin:2.1em 0 .6em}
.prose ul{margin:0 0 1.4em; display:grid; gap:.6em}
.prose li{position:relative; padding-left:1.4em; color:var(--muted)}
.prose li::before{content:""; position:absolute; left:0; top:.78em; width:.5em; height:1px; background:var(--jade)}
.small{font-size:.875rem; color:var(--faint)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:14px; min-height:52px;
  padding:6px 6px 6px 24px; border-radius:999px; font-weight:600; font-size:.95rem; line-height:1;
  transition:transform .16s var(--ease-out), background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn:active{transform:scale(.98)}
.btn__icon{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; transition:transform .3s var(--ease-out)}
.btn--primary{background:var(--jade); color:var(--on-jade)}
.btn--primary .btn__icon{background:rgba(5,16,11,.13)}
.btn--ghost{padding:6px 22px 6px 18px; gap:10px; border:1px solid var(--line-strong); color:var(--text)}
.btn--ghost .ic{color:var(--jade)}
.btn--sm{min-height:44px; padding:4px 4px 4px 18px; font-size:.875rem; gap:10px}
.btn--sm .btn__icon{width:36px; height:36px}
.link{border-bottom:1px solid var(--line-strong); padding-bottom:2px; transition:border-color .2s ease,color .2s ease; font-weight:500}
.actions{display:flex; flex-wrap:wrap; gap:14px 14px; align-items:center}
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{background:#82cfae}
  .btn--primary:hover .btn__icon{transform:translate(2px,-2px)}
  .btn--ghost:hover{border-color:var(--jade)}
  .link:hover{color:var(--jade); border-color:var(--jade)}
}

/* ---------- floating nav ---------- */
.site-header{
  position:fixed; z-index:var(--z-header); left:0; right:0;
  top:calc(env(safe-area-inset-top,0px) + 14px);
  display:flex; justify-content:center; padding-inline:max(16px,env(safe-area-inset-left,0px)); pointer-events:none;
}
.nav-pill{
  pointer-events:auto; width:min(100%,1000px);
  display:flex; align-items:center; justify-content:space-between; gap:clamp(12px,3vw,36px);
  padding:8px 8px 8px 22px; border-radius:999px;
  background:rgba(13,26,21,.7); -webkit-backdrop-filter:blur(18px) saturate(1.15); backdrop-filter:blur(18px) saturate(1.15);
  border:1px solid var(--line);
  box-shadow:0 24px 50px -26px rgba(2,10,6,.9), inset 0 1px 0 rgba(255,255,255,.06);
}
.logo{display:flex; align-items:center; gap:11px; min-height:44px}
.logo .mark{width:30px; height:30px; color:var(--jade)}
.logo__word{font-family:var(--serif); font-weight:600; font-size:1.3rem; letter-spacing:-.01em; line-height:1}
.logo__sub{display:block; font:500 .6875rem/1 var(--sans); color:var(--faint); letter-spacing:.04em; margin-top:4px}
.nav-links{display:flex; align-items:center; gap:clamp(14px,2.4vw,30px)}
.nav-links a{font-size:.9rem; font-weight:500; color:var(--muted); padding:8px 2px; position:relative; transition:color .2s ease}
.nav-links a[aria-current="page"]{color:var(--text)}
.nav-links a[aria-current="page"]::after{content:""; position:absolute; left:2px; right:2px; bottom:2px; height:1px; background:var(--jade)}
@media (hover:hover) and (pointer:fine){.nav-links a:hover{color:var(--text)}}
.nav-cta{margin-left:4px}
.menu-btn{display:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:transparent; position:relative; cursor:pointer}
.menu-btn span{position:absolute; left:14px; right:14px; height:1.5px; background:var(--text); border-radius:2px; transition:transform .4s var(--ease-drawer), top .4s var(--ease-drawer)}
.menu-btn span:nth-child(1){top:17px} .menu-btn span:nth-child(2){top:25px}
html.menu-open .menu-btn span:nth-child(1){top:21px; transform:rotate(45deg)}
html.menu-open .menu-btn span:nth-child(2){top:21px; transform:rotate(-45deg)}

.menu{
  position:fixed; inset:0; z-index:var(--z-menu); display:flex; flex-direction:column; justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + 96px) var(--gutter) calc(env(safe-area-inset-bottom,0px) + 36px);
  background:rgba(7,15,11,.95); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease-drawer), visibility 0s linear .35s;
}
html.menu-open .menu{opacity:1; visibility:visible; transition-delay:0s}
.menu a.menu__link{
  display:block; font-family:var(--serif); font-size:clamp(2rem,9vw,3rem); font-weight:500; letter-spacing:-.02em; line-height:1.15; padding:.28em 0;
  border-bottom:1px solid var(--line); opacity:0; transform:translateY(22px);
  transition:opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
html.menu-open .menu a.menu__link{opacity:1; transform:none; transition-delay:calc(var(--i)*55ms + 90ms)}
.menu__foot{margin-top:28px; display:grid; gap:6px; color:var(--muted); font-size:.95rem}
.menu__foot a{color:var(--text)}
@media (max-width:900px){
  .nav-links,.nav-cta{display:none}
  .menu-btn{display:block}
  .nav-pill{padding-right:6px}
}
@media (min-width:901px){.menu{display:none}}

/* ---------- plates (double-bezel photo frames) ---------- */
.plate{
  padding:8px; border-radius:var(--r-lg); background:rgba(236,233,222,.045);
  border:1px solid var(--line);
  box-shadow:0 50px 90px -50px rgba(2,10,6,.95);
}
.plate__in{position:relative; overflow:hidden; border-radius:calc(var(--r-lg) - 8px); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); aspect-ratio:4/5; background:var(--bg-2)}
.plate__in img{width:100%; height:100%; object-fit:cover; filter:saturate(1.02) contrast(1.04) brightness(.98)}
.plate__in::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(9,19,15,0) 52%,rgba(9,19,15,.66) 100%)}
.plate__cap{position:absolute; left:20px; right:20px; bottom:18px; z-index:2; font-size:.9rem; line-height:1.4; color:var(--text); text-wrap:balance}
.plate--tall .plate__in{aspect-ratio:2/3}

/* ---------- sections ---------- */
.section{padding-block:clamp(64px,8.5vw,116px) clamp(72px,9.5vw,132px)}
.section--tight{padding-block:clamp(40px,5.5vw,76px) clamp(56px,7.5vw,104px)}
.rule{border-top:1px solid var(--line)}
.split{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(36px,7vw,110px); align-items:center}
.split--flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split .plate{max-width:460px; width:100%}
.split--flip .plate{justify-self:end}
@media (max-width:860px){
  .split,.split--flip{grid-template-columns:1fr}
  .split--flip .plate{justify-self:start; order:2}
}
.head{max-width:60ch; margin-bottom:clamp(36px,5vw,64px)}
.head .lead{margin-top:20px}

/* hero */
.hero{padding-top:calc(clamp(112px,14vw,176px) + env(safe-area-inset-top,0px)); padding-bottom:clamp(56px,8vw,112px)}
.hero__grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px,6vw,88px); align-items:end}
.hero .display .ln{display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em}
.hero .display .ln>span{display:block; transform:translateY(108%); animation:ln-in 1.15s var(--ease-out) forwards; animation-delay:calc(var(--i)*150ms + 140ms)}
.hero .display .ln:last-child>span{animation-delay:1.05s}
@keyframes ln-in{to{transform:none}}
@keyframes fade-in{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.hero__sub{margin-top:30px; animation:fade-in .9s var(--ease-out) 1.35s both}
.hero .actions{margin-top:34px; animation:fade-in .9s var(--ease-out) 1.5s both}
.facts{margin-top:clamp(40px,6vw,68px); display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); animation:fade-in .9s var(--ease-out) 1.65s both}
.facts>div{padding:20px 20px 0 0}
.facts>div+div{padding-left:20px; border-left:1px solid var(--line)}
.facts dt{font-family:var(--serif); font-weight:600; font-size:1.2rem; line-height:1.2; letter-spacing:-.01em}
.facts dd{margin-top:6px; font-size:.875rem; line-height:1.45; color:var(--muted)}
.hero__plate{animation:fade-in 1.2s var(--ease-out) .5s both; max-width:470px; width:100%; justify-self:end}
.hero__plate .plate__in{aspect-ratio:4/5}
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr; align-items:start}
  .hero__plate{justify-self:start; max-width:520px}
  .hero__plate .plate__in{aspect-ratio:5/4}
}
@media (max-width:560px){
  .facts{grid-template-columns:1fr}
  .facts>div,.facts>div+div{padding:16px 0; border-left:0}
  .facts>div+div{border-top:1px solid var(--line)}
}

/* rows (principles / definition lists) */
.rows{border-top:1px solid var(--line); margin-top:clamp(28px,4vw,44px)}
.rows>div{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:8px 28px; padding:20px 0; border-bottom:1px solid var(--line)}
.rows dt{font-family:var(--serif); font-weight:600; font-size:1.2rem; line-height:1.25; letter-spacing:-.01em}
.rows dd{color:var(--muted); font-size:.98rem; line-height:1.55}
@media (max-width:620px){.rows>div{grid-template-columns:1fr}}
.inline-links{display:flex; flex-wrap:wrap; gap:14px 30px; margin-top:34px}

/* catalogue */
.cat{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(32px,6vw,100px); align-items:start}
.cat__list{border-top:1px solid var(--line)}
.cat__row a{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 24px; align-items:center; padding:26px 0; border-bottom:1px solid var(--line); position:relative}
.cat__row a::after{content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%; background:var(--jade); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-out)}
.cat__row[data-active] a::after{transform:scaleX(1)}
.cat__name{font-family:var(--serif); font-weight:500; font-size:clamp(1.7rem,3.2vw,2.6rem); line-height:1.1; letter-spacing:-.02em; color:var(--muted); transition:color .3s ease}
.cat__row[data-active] .cat__name{color:var(--text)}
.cat__desc{grid-column:1; color:var(--faint); font-size:.95rem; max-width:44ch}
.cat__go{grid-column:2; grid-row:1/3; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); display:grid; place-items:center; color:var(--muted); transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.cat__row[data-active] .cat__go{background:var(--jade); border-color:var(--jade); color:var(--on-jade)}
.cat__thumb{display:none}
.cat__stage{position:sticky; top:104px}
.cat__stage .plate__in{aspect-ratio:4/5}
.cat__stage img{position:absolute; inset:0; opacity:0; transition:opacity .5s ease}
.cat__stage img[data-active]{opacity:1}
.cat__note{margin-top:28px; max-width:60ch}
@media (max-width:860px){
  .cat{grid-template-columns:1fr}
  .cat__stage{display:none}
  .cat__name{color:var(--text)}
  .cat__row a{grid-template-columns:minmax(0,1fr) auto}
  .cat__thumb{display:block; grid-column:1/-1; margin-top:16px; border-radius:var(--r-md); overflow:hidden; aspect-ratio:16/10}
  .cat__thumb img{width:100%; height:100%; object-fit:cover; filter:saturate(1.02) contrast(1.04) brightness(.98)}
  .cat__go{grid-row:1}
  .cat__row[data-active] .cat__go{background:transparent; border-color:var(--line-strong); color:var(--muted)}
  .cat__row a::after{display:none}
}

/* ordered steps */
.steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 clamp(20px,3vw,40px); counter-reset:s}
.steps>li{border-top:1px solid var(--line-strong); padding-top:20px; counter-increment:s}
.steps>li::before{content:counter(s); display:block; font-family:var(--serif); font-size:2.6rem; line-height:1; font-weight:400; color:var(--jade); margin-bottom:22px}
.steps h3,.steps h4{font-family:var(--serif); font-weight:600; font-size:1.3rem; line-height:1.2; letter-spacing:-.01em; margin-bottom:8px}
.steps p{color:var(--muted); font-size:.95rem; line-height:1.55}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:44px}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.steps--col{grid-template-columns:1fr; max-width:760px; gap:0}
.steps--col>li{display:grid; grid-template-columns:72px 1fr; gap:0 24px; padding:28px 0}
.steps--col>li::before{margin:0}
.steps--col>li>div h3{margin-top:2px}
.journey{margin-top:30px; border-top:1px solid var(--line)}
.journey li{display:grid; grid-template-columns:44px 1fr; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--line); color:var(--text)}
.journey li::before{counter-increment:j; content:counter(j); font-family:var(--serif); color:var(--jade); font-size:1.25rem}
.journey{counter-reset:j}

/* services */
.svc{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:16px clamp(28px,6vw,96px); padding:clamp(32px,4.5vw,56px) 0; border-top:1px solid var(--line)}
.svc:last-child{border-bottom:1px solid var(--line)}
.svc .h2{font-size:clamp(1.6rem,2.8vw,2.3rem)}
.svc p{color:var(--muted); text-wrap:pretty; max-width:62ch}
.svc ul{margin-top:18px; display:grid; gap:10px; max-width:62ch}
.svc li{position:relative; padding-left:1.4em; color:var(--text); font-size:.98rem}
.svc li::before{content:""; position:absolute; left:0; top:.8em; width:.5em; height:1px; background:var(--jade)}
@media (max-width:760px){.svc{grid-template-columns:1fr}}

/* certificate (the one light "paper" object, on the compliance page) */
.cert{background:var(--paper); color:var(--paper-ink); border-radius:8px; padding:12px; box-shadow:0 60px 90px -50px rgba(2,10,6,.95); max-width:880px}
.cert__in{border:1px solid rgba(20,32,26,.55); outline:1px solid rgba(20,32,26,.22); outline-offset:-7px; padding:clamp(28px,4.5vw,56px); position:relative}
.cert__head{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:22px; border-bottom:1px solid rgba(20,32,26,.25)}
.cert__title{font-family:var(--serif); font-weight:600; font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.1; letter-spacing:-.01em}
.cert__seal{width:64px; height:64px; color:var(--jade-deep); flex:none}
.cert__grid{display:grid; grid-template-columns:1fr 1fr; gap:0 36px; margin-top:6px}
.cert__item{padding:20px 0; border-bottom:1px solid rgba(20,32,26,.18)}
.cert__item dt{font-size:.8125rem; color:rgba(20,32,26,.62); margin-bottom:4px}
.cert__item dd{font-family:var(--serif); font-weight:600; font-size:1.15rem; line-height:1.3}
.cert__note{margin-top:24px; font-size:.875rem; color:rgba(20,32,26,.7); max-width:62ch; text-wrap:pretty}
@media (max-width:620px){.cert__grid{grid-template-columns:1fr}}

/* places */
.places{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(24px,5vw,72px); border-top:1px solid var(--line)}
.places li{display:flex; align-items:center; gap:14px; padding:18px 0; border-bottom:1px solid var(--line); font-weight:500}
.places .ic{color:var(--jade)}
@media (max-width:620px){.places{grid-template-columns:1fr}}

/* Q&A */
.qa{border-top:1px solid var(--line)}
.qa>div{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:10px clamp(24px,5vw,80px); padding:28px 0; border-bottom:1px solid var(--line)}
.qa dt{font-family:var(--serif); font-weight:600; font-size:1.3rem; line-height:1.25; letter-spacing:-.01em}
.qa dd{color:var(--muted); max-width:60ch; text-wrap:pretty}
@media (max-width:760px){.qa>div{grid-template-columns:1fr}}

/* contact */
.contact-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.contact-item{padding:32px 28px 32px 0; display:flex; flex-direction:column; gap:10px}
.contact-item+.contact-item{padding-left:28px; border-left:1px solid var(--line)}
.contact-item .ic{width:1.6em; height:1.6em; color:var(--jade)}
.contact-item__lbl{font-size:.875rem; color:var(--faint)}
.contact-item__val{font-family:var(--serif); font-weight:500; font-size:clamp(1.3rem,2.2vw,1.8rem); line-height:1.2; letter-spacing:-.01em; overflow-wrap:anywhere}
@media (hover:hover) and (pointer:fine){a.contact-item:hover .contact-item__val{color:var(--jade)}}
@media (max-width:860px){
  .contact-grid{grid-template-columns:1fr}
  .contact-item,.contact-item+.contact-item{padding:24px 0; border-left:0}
  .contact-item+.contact-item{border-top:1px solid var(--line)}
}
.two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(32px,6vw,88px); margin-top:clamp(48px,7vw,88px)}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.mapcard{display:flex; flex-direction:column; justify-content:space-between; gap:36px; min-height:260px; padding:clamp(24px,3vw,36px); border-radius:var(--r-lg); border:1px solid var(--line); background:linear-gradient(160deg,rgba(45,117,88,.24),transparent 62%),var(--panel); transition:border-color .25s ease}
.mapcard .ic{width:2em; height:2em; color:var(--jade)}
.mapcard__addr{font-family:var(--serif); font-weight:500; font-size:1.6rem; line-height:1.2; letter-spacing:-.01em}
.mapcard__go{display:inline-flex; align-items:center; gap:10px; color:var(--jade); font-weight:600; font-size:.95rem; margin-top:8px}
@media (hover:hover) and (pointer:fine){.mapcard:hover{border-color:var(--jade)}}

/* closing panel */
.cta{position:relative; overflow:hidden; border-radius:var(--r-xl); border:1px solid var(--line);
  padding:clamp(36px,7vw,96px); background:radial-gradient(90% 120% at 100% 0%,rgba(45,117,88,.55),transparent 62%), var(--panel)}
.cta .h2{max-width:20ch}
.cta .lead{margin-top:20px}
.cta .actions{margin-top:34px}

/* page hero (inner pages) */
.page-hero{padding-top:calc(clamp(120px,15vw,196px) + env(safe-area-inset-top,0px)); padding-bottom:clamp(40px,6vw,84px)}
.crumbs{display:flex; flex-wrap:wrap; gap:8px; font-size:.875rem; color:var(--faint); margin-bottom:28px}
.crumbs a{transition:color .2s ease}
.crumbs [aria-current]{color:var(--jade)}
@media (hover:hover) and (pointer:fine){.crumbs a:hover{color:var(--text)}}
.page-hero .lead{margin-top:26px}
.page-hero .actions{margin-top:32px}
.stack>*+*{margin-top:clamp(40px,6vw,72px)}

/* footer */
.site-footer{border-top:1px solid var(--line); padding:clamp(48px,7vw,88px) 0 calc(env(safe-area-inset-bottom,0px) + 32px)}
.footer-grid{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:40px clamp(24px,4vw,64px)}
.footer-brand .logo__word{font-size:1.6rem}
.footer-desc{margin-top:18px; color:var(--muted); font-size:.95rem; max-width:34ch}
.footer-col h2{font:600 .9rem/1.2 var(--sans); color:var(--text); margin-bottom:16px}
.footer-col a,.footer-col p{display:block; color:var(--muted); font-size:.95rem; padding:5px 0; transition:color .2s ease}
@media (hover:hover) and (pointer:fine){.footer-col a:hover{color:var(--jade)}}
.footer-bottom{margin-top:clamp(40px,6vw,72px); padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:.8125rem; color:var(--faint)}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr}}

/* floating WhatsApp */
.float-wa{position:fixed; z-index:80; right:max(16px,env(safe-area-inset-right,0px)); bottom:calc(env(safe-area-inset-bottom,0px) + 16px); width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:rgba(13,26,21,.8); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid var(--line-strong); color:var(--jade);
  box-shadow:0 18px 40px -18px rgba(2,10,6,.9); transition:transform .16s var(--ease-out), border-color .2s ease}
.float-wa .ic{width:26px; height:26px}
.float-wa:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.float-wa:hover{border-color:var(--jade)}}

/* scroll reveal — only when JS is present, never hides content for crawlers/no-JS */
.js [data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
.js [data-reveal].is-in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-delay:0s !important; transition-duration:.001ms !important; transition-delay:0s !important}
  .hero .display .ln>span{transform:none}
  .js [data-reveal]{opacity:1; transform:none}
}