@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@300;400;500;600;700&display=swap");

/* REGENESIS — OA / AssociationLine — FULL WOW (compact, deploy-ready) */
:root{
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans",sans-serif;
  --serif:"Cormorant Garamond",ui-serif,Georgia,"Times New Roman",serif;

  --bg0:#070813; --bg1:#090a16;
  --text:rgba(255,255,255,.92); --muted:rgba(255,255,255,.74); --muted2:rgba(255,255,255,.58);
  --surface:rgba(255,255,255,.055); --surface2:rgba(255,255,255,.080);
  --stroke:rgba(255,255,255,.10); --stroke2:rgba(255,255,255,.16);

  --gold:#caa24b; --gold2:#f0d07a; --violet:#6d5efc; --aurora:#5eead4;
  --wa:#2ecc71; --mail:#62a9ff; --docs:#b28cff;

  --r-btn:12px; --r-card:20px; --shadow:0 18px 60px rgba(0,0,0,.55); --shadowSoft:0 12px 34px rgba(0,0,0,.35);
  --dur:180ms; --ease:cubic-bezier(.2,.8,.2,1);

  --container:min(1180px,calc(100% - 40px));
  --content:min(1040px,100%);

  --s1:6px; --s2:10px; --s3:14px;
  --s4:clamp(16px,1.6vw,22px); --s5:clamp(22px,2.2vw,32px); --s6:clamp(28px,3vw,44px);
  --padX:clamp(18px,2vw,30px); --padY:clamp(16px,1.8vw,26px);

  /* optional photo (no huge): add body.bg-galactic or body.bg-photo */
  --photoOpacity:.14;
  --photo1x:url("/assets/img/bg_navona_1280.webp");
  --photo2x:url("/assets/img/bg_navona_1920.webp");
  --grain:url("/assets/img/cosmic/grain_256.webp");
}
:is(html[data-theme="light"],html.theme-light){
  --bg0:#fbfaf8; --bg1:#f1efea;
  --text:rgba(15,18,22,.92); --muted:rgba(15,18,22,.72); --muted2:rgba(15,18,22,.56);
  --surface:rgba(10,10,20,.04); --surface2:rgba(10,10,20,.055);
  --stroke:rgba(15,18,22,.10); --stroke2:rgba(15,18,22,.16);
  --shadow:0 18px 60px rgba(15,18,22,.12); --shadowSoft:0 12px 34px rgba(15,18,22,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; overflow-x:hidden;
  font:16px/1.55 var(--sans); color:var(--text);
  background:
    radial-gradient(1100px 680px at 18% -12%, rgba(94,234,212,.10), transparent 55%),
    radial-gradient(980px 680px at 86% 12%,  rgba(109,94,252,.10), transparent 55%),
    radial-gradient(900px 700px at 42% 118%, rgba(202,162,75,.10), transparent 60%),
    linear-gradient(180deg,var(--bg0),var(--bg1));
}
body.bg-galactic::before,body.bg-photo::before,body.bg-navona::before,body.bg-marble::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:center/cover no-repeat image-set(var(--photo1x) 1x, var(--photo2x) 2x);
  opacity:var(--photoOpacity); filter:saturate(1.02) contrast(1.06) brightness(.94);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.62;
  background:
    radial-gradient(1200px 760px at 20% 10%, rgba(0,0,0,.10), rgba(0,0,0,.52) 62%, rgba(0,0,0,.70)),
    linear-gradient(to bottom, rgba(0,0,0,.32), rgba(0,0,0,.52));
}
:is(html[data-theme="light"],html.theme-light) body::after{
  opacity:.74;
  background:
    radial-gradient(1200px 760px at 20% 10%, rgba(255,255,255,.60), rgba(255,255,255,.86) 62%, rgba(255,255,255,.92)),
    linear-gradient(to bottom, rgba(255,255,255,.62), rgba(255,255,255,.86));
}
body.bg-grain::after{
  background:
    radial-gradient(1200px 760px at 20% 10%, rgba(0,0,0,.10), rgba(0,0,0,.52) 62%, rgba(0,0,0,.70)),
    linear-gradient(to bottom, rgba(0,0,0,.32), rgba(0,0,0,.52)),
    var(--grain);
  background-size:auto,auto,256px 256px; background-repeat:no-repeat,no-repeat,repeat;
}

a{color:inherit;text-decoration:none}
a.link{color:rgba(240,208,122,.92);text-decoration:underline;text-underline-offset:3px}
a.link:hover{filter:brightness(1.06)}
:focus-visible{outline:2px solid rgba(240,208,122,.55);outline-offset:2px}

/* Layout */
.container{width:var(--container);margin:0 auto}
.contentNarrow{max-width:var(--content);margin:0 auto}
main{padding:clamp(18px,2.8vw,34px) 0 clamp(56px,5.2vw,78px)}
.section{padding:clamp(28px,3.2vw,60px) 0}
.grid{display:grid;gap:var(--s6)}
.grid2{display:grid;gap:var(--s6);grid-template-columns:repeat(2,minmax(0,1fr))}
.grid3{display:grid;gap:var(--s6);grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.grid2,.grid3{grid-template-columns:1fr}}
.spanFull{grid-column:1/-1}

/* Type */
h1,h2,h3{margin:0;letter-spacing:-.02em}
h1{font:700 clamp(28px,3.2vw,44px)/1.08 var(--serif);margin:0 0 var(--s3)}
h2{font:700 clamp(18px,1.7vw,24px)/1.25 var(--serif);margin:0 0 var(--s2)}
h3{font:900 15px/1.25 var(--sans);letter-spacing:.2px;margin:0 0 var(--s1)}
p,li{margin:0;color:var(--muted);font-size:16.7px;line-height:1.75}
.prose{max-width:74ch}
.prose p + p{margin-top:var(--s2)}
li{margin:6px 0;line-height:1.68}
.kicker{font:900 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted2);margin:0 0 10px}
.note,.hint,.mini{color:var(--muted2);font-size:13px;line-height:1.7}

/* Surfaces */
.card,.panel,.mapPanel,.idCard,.actionRail{
  border:1px solid var(--stroke); border-radius:var(--r-card);
  background:linear-gradient(180deg,var(--surface2),var(--surface));
  box-shadow:var(--shadowSoft);
}
.card,.panel,.idCard{padding:var(--padY) var(--padX)}
:is(html[data-theme="light"],html.theme-light) :is(.card,.panel,.mapPanel,.idCard,.actionRail){
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.84));
  border-color:rgba(15,18,22,.10); box-shadow:0 18px 56px rgba(15,18,22,.10);
}
.card,.panel{transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.card:hover,.panel:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--gold) 24%,var(--stroke));
  box-shadow:var(--shadow);
}
.card > * + *, .panel > * + *, .idCard > * + *{margin-top:var(--s3)}
.title{display:flex;align-items:center;gap:10px;font:700 20px/1.2 var(--serif);margin:0}
.desc{color:var(--muted);margin-top:10px}
.meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}

/* Chips */
.chips,.badges{display:flex;flex-wrap:wrap;gap:10px;row-gap:10px;margin-top:var(--s2)}
.tag,.chip,.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(202,162,75,.10);
  color:var(--text);font-size:12px;font-weight:900;
}
:is(html[data-theme="light"],html.theme-light) :is(.tag,.chip,.pill){background:rgba(0,0,0,.03)}
.chip{cursor:pointer}
.chip:hover{border-color:rgba(202,162,75,.30)}
.chip.active{background:rgba(202,162,75,.18);border-color:rgba(202,162,75,.34)}

/* Buttons */
.actions,.btnRow,.ctaRow{display:flex;flex-wrap:wrap;gap:10px;row-gap:10px;margin-top:var(--s3)}
.btn{
  height:42px;padding:0 16px;border-radius:var(--r-btn);
  border:1px solid var(--stroke2);
  background:rgba(255,255,255,.05);
  color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:900;font-size:13px;letter-spacing:.2px;
  cursor:pointer;
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);
}
.btn:hover{transform:translateY(-1px);border-color:rgba(202,162,75,.34);box-shadow:var(--shadowSoft)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(135deg,var(--gold),var(--gold2));color:rgba(12,10,18,.96);border-color:rgba(240,208,122,.72)}
.btn.primary:hover{box-shadow:0 18px 55px rgba(202,162,75,.18)}
.btn.ghost{background:transparent;border-color:rgba(202,162,75,.22);color:var(--muted)}
.btn.ghost:hover{color:var(--text);background:rgba(202,162,75,.10)}
:is(html[data-theme="light"],html.theme-light) .btn{background:rgba(255,255,255,.88);border-color:rgba(15,18,22,.14);color:rgba(15,18,22,.92)}

/* Header / Nav */
header.site{
  position:sticky;top:0;z-index:1000;
  border-bottom:1px solid var(--stroke);
  background:rgba(10,10,18,.62);
}
:is(html[data-theme="light"],html.theme-light) header.site{background:rgba(255,255,255,.72)}
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){
  header.site{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brandMark{width:44px;height:44px;border-radius:12px;border:1px solid var(--stroke);background:rgba(255,255,255,.04);display:grid;place-items:center}
.brandTxt{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.brandTxt .name{font:700 18px/1 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brandTxt .role{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

nav.main{display:flex;align-items:center;gap:8px}
nav.main a[data-nav],.dropBtn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:13px;
  font-weight:900;font-size:13px;
  color:rgba(255,255,255,.82);
  border:1px solid transparent;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
:is(html[data-theme="light"],html.theme-light) :is(nav.main a[data-nav],.dropBtn){color:rgba(15,18,22,.78)}
nav.main a[data-nav]:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)}
:is(html[data-theme="light"],html.theme-light) nav.main a[data-nav]:hover{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.07)}
nav.main a.active{background:rgba(202,162,75,.16);border-color:rgba(202,162,75,.26);color:var(--text)}

.navDrop{position:relative}
.dropBtn{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.06)}
:is(html[data-theme="light"],html.theme-light) .dropBtn{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.08)}
.dropBtn::after{content:"▾";font-size:12px;opacity:.65;transform:translateY(1px);transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.navDrop.open .dropBtn::after{transform:rotate(180deg) translateY(-1px);opacity:.9}
.dropBtn:hover{background:transparent!important;border-color:rgba(202,162,75,.22)!important;box-shadow:0 0 0 1px rgba(202,162,75,.10),0 0 22px rgba(202,162,75,.12)}

.dropMenu{
  position:absolute;top:calc(100% + 10px);left:0;min-width:310px;
  padding:10px;border-radius:16px;border:1px solid var(--stroke);
  background:rgba(10,10,18,.62);display:none;box-shadow:var(--shadowSoft);
}
:is(html[data-theme="light"],html.theme-light) .dropMenu{background:rgba(255,255,255,.78)}
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){
  .dropMenu{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
}
.navDrop.open .dropMenu{display:block}
.dropMenu a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:12px;border:1px solid transparent;
  color:var(--text);opacity:.88;font-weight:900;font-size:13px;
}
.dropMenu a:hover{opacity:1;border-color:rgba(202,162,75,.24);box-shadow:0 0 0 1px rgba(202,162,75,.10),0 0 24px rgba(202,162,75,.14)}
.dropMenu a.active{background:rgba(202,162,75,.16);opacity:1}

/* Lang + theme */
.langPill{
  display:flex;align-items:center;gap:4px;padding:6px;border-radius:999px;
  border:1px solid var(--stroke);background:rgba(255,255,255,.04);
}
.langPill .dot{width:8px;height:8px;border-radius:999px;background:rgba(202,162,75,.75);margin:0 6px 0 4px}
.langPill button{border:0;background:transparent;color:var(--muted);font-weight:900;font-size:12px;cursor:pointer;padding:6px 12px;border-radius:999px}
.langPill button:hover{color:var(--text);background:rgba(255,255,255,.06)}
:is(html[data-theme="light"],html.theme-light) .langPill button:hover{background:rgba(0,0,0,.04)}
.langPill button[aria-current="true"],.langPill button.active{color:var(--text);background:rgba(202,162,75,.18)}
.themeToggle{
  height:40px;width:40px;border-radius:12px;cursor:pointer;
  border:1px solid rgba(202,162,75,.22);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));
  color:var(--text);
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.themeToggle:hover{transform:translateY(-1px);border-color:rgba(202,162,75,.46);box-shadow:var(--shadowSoft)}

/* Mobile nav (works with existing JS: body.nav-open + .navBackdrop.active) */
.navBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease);z-index:900}
.navBackdrop.active{opacity:1;pointer-events:auto}
.navToggle{display:none;height:40px;padding:0 14px;border-radius:12px;border:1px solid var(--stroke);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;font-weight:900}
@media (max-width:980px){
  .navToggle{display:inline-flex}
  nav.main{
    position:fixed;top:74px;left:0;right:0;padding:12px;display:grid;gap:8px;
    background:rgba(10,10,18,.66);border-bottom:1px solid var(--stroke);
    transform:translateY(-120%);transition:transform var(--dur) var(--ease);z-index:999;
  }
  :is(html[data-theme="light"],html.theme-light) nav.main{background:rgba(255,255,255,.82)}
  @supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){
    nav.main{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  }
  body.nav-open nav.main{transform:translateY(0)}
  nav.main a[data-nav],.dropBtn{justify-content:space-between}
  .dropMenu{position:static;margin-top:6px;display:none;box-shadow:none;background:rgba(255,255,255,.05)}
  :is(html[data-theme="light"],html.theme-light) .dropMenu{background:rgba(0,0,0,.03)}
  .navDrop.open .dropMenu{display:block}
  .brandTxt .role{display:none}
}

/* Action rail */
.actionRail{padding:16px}
.actionRail .railTitle{font:900 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted2);margin:0 0 10px}
.actionRail .railList{display:grid;gap:10px}
.aBtn{
  --a:var(--gold);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--a) 24%,var(--stroke));
  background:rgba(255,255,255,.05);color:var(--text);
  font-weight:900;font-size:13px;
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.aBtn small{color:color-mix(in srgb,var(--a) 60%,var(--muted2));font-size:12px;font-weight:800;opacity:.86}
.aBtn:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--a) 56%,var(--stroke2));box-shadow:var(--shadowSoft)}
.aBtn:active{transform:translateY(1px)}
.aBtn[data-action="wa"]{--a:var(--wa)}
.aBtn[data-action="email"]{--a:var(--mail)}
.aBtn[data-action="docs"]{--a:var(--docs)}

/* FAB */
.fabStack{
  position:fixed;
  right:max(18px, env(safe-area-inset-right));
  bottom:max(18px, env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:1200;
}
.fab{
  --fa:var(--gold);
  width:46px;height:46px;border-radius:14px;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--fa) 22%,var(--stroke));
  background:linear-gradient(180deg, rgba(14,16,20,.78), rgba(14,16,20,.58));
  color:var(--text);
  display:grid;place-items:center;
  box-shadow:var(--shadowSoft);
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);
}
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){
  .fab{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
}
:is(html[data-theme="light"],html.theme-light) .fab{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  border-color:rgba(15,18,22,.12);
}
.fab small{font-weight:900;font-size:11px;letter-spacing:.12em}
.fab:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--fa) 58%,var(--stroke2));box-shadow:var(--shadow)}
.fab:active{transform:translateY(1px)}
.fab[data-fab="wa"]{--fa:var(--wa)}
.fab[data-fab="email"],.fab[data-fab="contact"]{--fa:var(--mail)}
.fab[data-fab="docs"]{--fa:var(--docs)}
.fab[data-fab="top"]{--fa:rgba(255,255,255,.70)}


/* Footer */
footer.site{
  padding:52px 0 34px;border-top:1px solid var(--stroke);background:rgba(0,0,0,.08);
}
:is(html[data-theme="light"],html.theme-light) footer.site{background:rgba(255,255,255,.55);border-top-color:rgba(15,18,22,.10)}
.footerGrid{display:grid;gap:var(--s5);grid-template-columns:2fr 1fr 1fr}
@media (max-width:980px){.footerGrid{grid-template-columns:1fr}}
.footerFine{color:var(--muted2);font-size:12px;line-height:1.7;margin-top:var(--s4)}

.hidden{display:none!important}
.hr{height:1px;background:rgba(255,255,255,.12);border:0;margin:var(--s3) 0}
:is(html[data-theme="light"],html.theme-light) .hr{background:rgba(15,18,22,.10)}


/* ===========================
   SUPREME 2026 refinement
   (layout + readability + missing utility classes)
   =========================== */

:root{
  --shell1: rgba(10,12,15,.74);
  --shell2: rgba(10,12,15,.54);
  --shellStroke: rgba(255,255,255,.10);
  --card1: rgba(18,21,26,.92);
  --card2: rgba(12,14,18,.82);
  --photoOpacity: .14;
}

html[data-theme="light"]{
  --shell1: rgba(255,255,255,.88);
  --shell2: rgba(255,255,255,.68);
  --shellStroke: rgba(15,18,22,.12);
  --card1: rgba(255,255,255,.94);
  --card2: rgba(255,255,255,.88);
  --photoOpacity: .08;
}

/* Content mask to make cards pop over the photo (no blur) */
main{position:relative; z-index:0}
main::before{
  content:"";
  position:absolute;
  inset: 12px 8px;
  border-radius: 28px;
  background: linear-gradient(180deg, var(--shell1), var(--shell2));
  border: 1px solid var(--shellStroke);
  box-shadow: var(--shadow2);
  pointer-events:none;
  z-index:-1;
}

/* Panels/cards: slightly more opaque for readability */
.card,.panel,.idCard{
  background: linear-gradient(180deg, var(--card1), var(--card2));
}

/* Typography helpers */
.lead{font-size:17px; line-height:1.75; color:var(--text)}
.muted,.sub{color:var(--muted)}
.mini{font-size:13px; color:var(--muted)}
.h2{display:flex;flex-direction:column;gap:6px; margin-bottom: 6px}
.h2 h2{margin:0}
.sep{height:1px;background:var(--stroke);margin:14px 0}
.pad{padding:var(--padY) var(--padX)}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.clean{list-style:none;padding:0;margin:0}
.list{padding-left:18px}
.links{display:grid;gap:10px}

/* Kicker */
.bar{display:inline-block;width:10px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--gold),transparent)}
.kicker .bar{margin-right:10px;transform:translateY(-2px)}

/* Badges */
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size:12px;
}

/* Hero */
.hero{display:block;position:relative}
.hero.panel{padding:var(--padY) var(--padX)}
.hero.panel:hover{transform:none;border-color:var(--stroke);box-shadow:var(--shadowSoft)}
.hero.hasVisual .heroGrid{
  display:grid;
  gap:var(--s6);
  grid-template-columns:1.55fr .95fr;
  align-items:start;
}
.heroPanel{min-width:0}
.heroSide{display:grid;gap:var(--s4);align-content:start}
.heroVisual{
  border-radius: var(--r-card);
  overflow:hidden;
  border:1px solid var(--stroke);
  box-shadow: var(--shadowSoft);
  position:relative;
  aspect-ratio: 16 / 10;
  max-height: clamp(260px, 38vh, 430px);
}
.heroVisual img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.02);
  transition: transform .8s ease;
  filter: saturate(1.04) contrast(1.03);
}
.heroVisual:hover img{transform:scale(1.06)}
.hvCap{
  position:absolute;left:14px;bottom:14px;
  padding:10px 12px;border-radius:14px;
  background: linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.38));
  border:1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  font-size:12px;
  backdrop-filter: blur(10px);
}
.hvCap .label{display:block;font-weight:900;letter-spacing:.2px}
.hvCap .mini{display:block;color:rgba(255,255,255,.78)}
html[data-theme="light"] .hvCap{
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.58));
  border-color: rgba(15,18,22,.12);
  color: rgba(15,18,22,.92);
}
html[data-theme="light"] .hvCap .mini{color:rgba(15,18,22,.66)}
@media (max-width: 980px){
  .heroVisual{max-height:none}
}


/* Service cards with media */
.cardRow{display:grid;gap:14px;grid-template-columns: 1fr 1.15fr;align-items:stretch}
.cardMedia{
  position:relative;
  border-radius: 16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
.cardMedia img{width:100%;height:100%;min-height:160px;object-fit:cover;display:block;transform:scale(1.03);transition:transform .9s ease}
.cardMedia::after{
  content:"";
  position:absolute;inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.42));
  pointer-events:none;
}
.card:hover .cardMedia img{transform:scale(1.08)}
.cmTag{
  position:absolute;left:12px;top:12px;
  padding:6px 10px;border-radius:999px;
  background: rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  font-size:12px;
  backdrop-filter: blur(10px);
}
.title{font-family:var(--serif);font-size:22px;margin:0 0 6px}
.desc{color:var(--muted);line-height:1.75}

/* Grid modifiers used in pages */
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width: 980px){
  .hero.hasVisual .heroGrid{grid-template-columns:1fr}
  .cardRow{grid-template-columns:1fr}
  main::before{inset: 10px 6px}
}

/* Contact page helpers */
.contactWrap{display:grid;gap:var(--s6)}
.mark{width:120px;max-width:100%;height:auto;display:block}
.mapHdr{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.mapWrap{border-radius:18px;overflow:hidden;border:1px solid var(--stroke);box-shadow: var(--shadowSoft)}
.mapFrame{width:100%;height:380px;border:0;display:block}

/* Callout */
.callout{
  border:1px solid color-mix(in oklab, var(--gold), var(--stroke) 70%);
  background: linear-gradient(180deg, rgba(198,164,92,.10), rgba(0,0,0,0));
  padding: 14px 16px;
  border-radius: 18px;
  color: var(--text);
}
html[data-theme="light"] .callout{
  background: linear-gradient(180deg, rgba(198,164,92,.12), rgba(255,255,255,0));
}

/* FAQ accordions */
.faqAccordions{display:grid;gap:12px}
details.accordion{
  border:1px solid var(--stroke);
  border-radius: 18px;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
}
details.accordion summary{
  cursor:pointer;
  padding: 14px 16px;
  font-weight:700;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  user-select:none;
}
details.accordion summary::-webkit-details-marker{display:none}
details.accordion summary::after{
  content:"+";
  width:28px;height:28px;border-radius:10px;
  display:grid;place-items:center;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  flex:0 0 auto;
}
details.accordion[open] summary::after{content:"–"}
.accBody{padding: 0 16px 14px; color: var(--muted); line-height:1.75}

/* Breadcrumb + skip link */
.breadcrumb{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:13px;margin-bottom:12px}
.breadcrumb a{color:inherit}
.skip{
  position:absolute; left:-999px; top:10px;
  padding:10px 12px; border-radius:12px;
  background: var(--surface2);
  border:1px solid var(--stroke);
  z-index:9999;
}
.skip:focus{left:12px}

/* Quick-copy hint (inserted by JS) */
.copyHint{
  margin-left:auto;
  width:28px;height:28px;
  display:grid;place-items:center;
  border-radius:10px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  opacity:.75;
}
.aBtn:hover .copyHint{opacity:1;border-color: rgba(198,164,92,.35);color:rgba(255,255,255,.92)}
html[data-theme="light"] .aBtn:hover .copyHint{color:#111}
.copyHint:active{transform:scale(.96)}

/* Toast */
.oaToast{
  position:fixed;
  left:50%; bottom:18px;
  transform:translateX(-50%) translateY(8px);
  opacity:0;
  pointer-events:none;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  transition: opacity .22s ease, transform .22s ease;
  z-index: 99999;
}
html[data-theme="light"] .oaToast{
  border-color: rgba(15,18,22,.12);
  background: rgba(255,255,255,.78);
  color: #0b0c0d;
}
.oaToast.show{opacity:1; transform:translateX(-50%) translateY(0)}
