:root{
  --bg:#060504;
  --bg2:#0c0a08;
  --panel:#15110d;
  --panel2:#1b1510;
  --gold:#d6ad5f;
  --gold2:#f1d89a;
  --gold3:#8b6526;
  --text:#f5ead5;
  --muted:#cbb38d;
  --line:rgba(214,173,95,.22);
  --shadow:0 22px 58px rgba(0,0,0,.36);
  --container:1180px;
  --gutter:clamp(16px,4vw,48px);
  --radius:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:auto;overflow-x:hidden}
body{
  margin:0;
  min-height:100vh;
  padding-bottom:58px;
  overflow-x:hidden;
  color:var(--text);
  background:
    radial-gradient(circle at 72% 18%, rgba(214,173,95,.12), transparent 30%),
    radial-gradient(circle at 18% 64%, rgba(143,101,38,.09), transparent 34%),
    linear-gradient(180deg,#050403 0%,#0b0907 52%,#050403 100%);
  font-family:Inter,Arial,sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    linear-gradient(115deg, transparent 0 18%, rgba(214,173,95,.025) 18.12%, transparent 18.34% 100%),
    linear-gradient(38deg, transparent 0 42%, rgba(214,173,95,.02) 42.12%, transparent 42.34% 100%),
    radial-gradient(circle at 14% 20%, rgba(243,217,153,.06) 0 1px, transparent 3px),
    radial-gradient(circle at 82% 36%, rgba(243,217,153,.07) 0 1px, transparent 3px),
    radial-gradient(circle at 52% 78%, rgba(214,173,95,.05) 0 1px, transparent 3px);
  opacity:.7;
}

a{color:var(--gold2);text-decoration:none}
img{max-width:100%;height:auto;display:block}
p{margin-top:0;color:var(--muted)}
.container{width:min(var(--container),calc(100% - var(--gutter)*2));margin-inline:auto}
.narrow{max-width:880px;text-align:center}
.centered{text-align:center}

/* Topbar */
.topbar{
  background:#030302;
  color:#d8c09a;
  font-size:.88rem;
  border-bottom:1px solid rgba(214,173,95,.16);
}
.topbar-inner{
  min-height:38px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px 22px;
  flex-wrap:wrap;
}
.topbar a{color:#e5cca3}

/* Header — clean static geometry */
.site-header{
  position:sticky;
  top:0;
  z-index:999;
  width:100%;
  background:linear-gradient(180deg,rgba(10,8,6,.97),rgba(5,4,3,.95));
  border-bottom:1px solid rgba(214,173,95,.22);
  box-shadow:0 14px 34px rgba(0,0,0,.36);
}

.nav-wrap{
  height:82px;
  display:grid;
  grid-template-columns:minmax(300px,auto) minmax(420px,1fr) auto;
  grid-template-areas:"brand menu lang";
  align-items:center;
  gap:16px;
  padding:0;
}

/* Brand */
.brand{
  grid-area:brand;
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  color:#fff5df;
  font-weight:700;
  line-height:1.15;
}
.brand:hover{color:#fff5df}
.brand-logo-wrap{
  width:56px;
  height:56px;
  min-width:56px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid rgba(243,217,153,.62);
  box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 22px rgba(214,173,95,.18);
}
.brand-logo{width:100%;height:100%;object-fit:cover}
.brand span:last-child{
  overflow-wrap:anywhere;
  font-size:1.05rem;
  text-shadow:0 0 14px rgba(214,173,95,.10);
}

/* Navigation — no transitions that affect geometry */
.main-nav{
  grid-area:menu;
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  gap:8px;
  height:38px;
  overflow:visible;
}

.main-nav a{
  width:96px;
  height:38px;
  min-width:96px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0;
  border:1px solid rgba(214,173,95,.18);
  border-radius:12px;
  background:rgba(255,255,255,.012);
  color:#d8c39a;
  font-size:14px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  text-align:center;
  outline:none;
}

.main-nav a:hover,
.main-nav a:focus,
.main-nav a.active,
.main-nav a[aria-current="page"]{
  color:#fff8e9;
  border-color:rgba(243,217,153,.72);
  background:rgba(214,173,95,.14);
  box-shadow:
    0 0 0 1px rgba(243,217,153,.20) inset,
    0 0 14px rgba(214,173,95,.26),
    0 0 26px rgba(214,173,95,.12);
  text-shadow:0 0 8px rgba(243,217,153,.48),0 0 14px rgba(214,173,95,.22);
}

/* Language switcher */
.lang-switch{
  grid-area:lang;
  justify-self:end;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  height:32px;
}
.lang-switch a{
  width:42px;
  height:32px;
  min-width:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid rgba(214,173,95,.22);
  border-radius:10px;
  background:rgba(255,255,255,.012);
  color:#bda77d;
  font-size:12px;
  font-weight:800;
  line-height:1;
  letter-spacing:.04em;
}
.lang-switch a:hover,
.lang-switch a:focus,
.lang-switch a.active,
.lang-switch a[aria-current="true"]{
  color:#fff8e9;
  border-color:rgba(243,217,153,.72);
  background:rgba(214,173,95,.14);
  box-shadow:
    0 0 0 1px rgba(243,217,153,.20) inset,
    0 0 14px rgba(214,173,95,.26),
    0 0 26px rgba(214,173,95,.12);
  text-shadow:0 0 8px rgba(243,217,153,.48),0 0 14px rgba(214,173,95,.22);
}

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
  padding:clamp(64px,8vw,118px) 0 clamp(56px,7vw,86px);
  background:
    radial-gradient(circle at 85% 15%, rgba(225,191,117,.12) 0, transparent 26%),
    radial-gradient(circle at 8% 24%, rgba(225,191,117,.08) 0, transparent 22%),
    linear-gradient(180deg,rgba(14,11,9,.88) 0%, rgba(7,6,5,1) 100%);
}
.hero::after{
  content:"";
  position:absolute;
  right:-180px;
  top:-120px;
  width:520px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(243,217,153,.12), transparent 68%);
  pointer-events:none;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
  gap:clamp(28px,5vw,70px);
  align-items:center;
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.78rem;
  font-weight:800;
  color:var(--gold2);
  margin:0 0 14px;
}
h1,h2,h3{
  font-family:"Cormorant Garamond", Georgia, serif;
  line-height:1.04;
  color:#fff8ee;
  margin-top:0;
}
h1{
  font-size:clamp(2.5rem,5.6vw,5.4rem);
  margin:0 0 20px;
  letter-spacing:-.045em;
  text-wrap:balance;
}
h2{
  font-size:clamp(2rem,3.4vw,3.25rem);
  margin:0 0 16px;
  letter-spacing:-.03em;
  text-wrap:balance;
}
h3{
  font-size:clamp(1.45rem,1.8vw,1.7rem);
  margin:0 0 12px;
}
.lead{
  font-size:clamp(1rem,1.28vw,1.18rem);
  max-width:720px;
}

/* Buttons */
.actions{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:32px;
}
.btn{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:12px 22px;
  border:1px solid transparent;
  font-weight:800;
  line-height:1;
}
.btn-primary{
  background:linear-gradient(180deg,#f0d08a 0%,#d1a454 100%);
  color:#0c0a07;
  border-color:rgba(255,238,194,.48);
  box-shadow:0 16px 34px rgba(214,173,95,.22);
}
.btn-primary:hover{
  color:#0c0a07;
  box-shadow:0 0 18px rgba(214,173,95,.32),0 18px 34px rgba(0,0,0,.24);
}
.btn-secondary{
  background:rgba(255,255,255,.02);
  color:#efd7aa;
  border-color:rgba(214,173,95,.26);
}
.btn-secondary:hover{
  color:#fff2d4;
  border-color:rgba(243,217,153,.48);
  box-shadow:0 0 22px rgba(214,173,95,.16);
}

/* Hero card */
.hero-card{
  min-height:clamp(360px,38vw,470px);
  border-radius:34px;
  background:
    linear-gradient(160deg,rgba(17,14,11,.94),rgba(32,25,17,.92)),
    radial-gradient(circle at 72% 8%, rgba(243,217,153,.20), transparent 34%);
  color:#fff;
  padding:clamp(30px,4vw,48px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  box-shadow:0 36px 90px rgba(0,0,0,.55);
  overflow:hidden;
  border:1px solid rgba(243,217,153,.24);
  position:relative;
}
.hero-card::before{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:26px;
  border:1px solid rgba(243,217,153,.16);
  pointer-events:none;
}
.hero-card > *{position:relative;z-index:1}
.hero-seal{
  width:140px;
  height:140px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(225,191,117,.5);
  box-shadow:0 18px 48px rgba(0,0,0,.46),0 0 28px rgba(214,173,95,.22);
  margin-bottom:28px;
}
.hero-badges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.hero-badges span{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(214,173,95,.13);
  border:1px solid rgba(243,217,153,.28);
  color:#ffe9b8;
  font-size:.88rem;
  font-weight:700;
}

/* Sections/cards */
.section{position:relative;padding:clamp(62px,7vw,100px) 0}
.section::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:min(1120px,calc(100% - 48px));
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgba(214,173,95,.22), transparent);
}
.muted{background:linear-gradient(180deg,rgba(20,16,13,.72),rgba(13,11,9,.94))}
.section-title{text-align:center}
.section-intro{
  text-align:center;
  max-width:780px;
  margin:0 auto clamp(26px,4vw,42px);
}
.cards{display:grid;gap:clamp(16px,2vw,24px)}
.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.card,.service-grid article,.contact-form,.contact-card,.cta-panel{
  background:linear-gradient(180deg,rgba(22,18,14,.96),rgba(12,10,8,.98));
  border:1px solid rgba(214,173,95,.20);
  border-radius:var(--radius);
  padding:clamp(22px,2.4vw,30px);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.035);
}
.card:hover,.service-grid article:hover{
  border-color:rgba(243,217,153,.38);
  box-shadow:0 0 28px rgba(214,173,95,.12),0 24px 64px rgba(0,0,0,.40);
}
.card p,.service-grid li,.contact-card p{color:#cfb793}
.card a{font-weight:800}
.card a:hover,.site-footer a:hover,.contact-card a:hover{
  color:#ffe6ac;
  text-shadow:0 0 14px rgba(214,173,95,.30);
}
.icon::before{
  content:"✦";
  display:inline-block;
  color:var(--gold2);
  margin-bottom:12px;
}

/* Band/statistics */
.band{
  padding:clamp(56px,6vw,78px) 0;
  background:linear-gradient(180deg,#0b0907 0%, #14100d 100%);
  border-top:1px solid rgba(214,173,95,.12);
  border-bottom:1px solid rgba(214,173,95,.12);
}
.band-grid{
  display:grid;
  grid-template-columns:minmax(260px,.78fr) minmax(0,1.22fr);
  gap:clamp(28px,4vw,48px);
  align-items:center;
}
.stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.stats div{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  border:1px solid rgba(243,217,153,.18);
  border-radius:20px;
  padding:clamp(18px,2vw,24px);
}
.stats strong{
  display:block;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(2rem,2.8vw,2.55rem);
  color:#f4d999;
  line-height:1;
  margin-bottom:6px;
  text-shadow:0 0 18px rgba(214,173,95,.22);
}
.stats span{font-size:.92rem;color:#d7c09a}
.testimonials strong,.testimonials span{display:block}
.testimonials strong{font-family:"Cormorant Garamond", Georgia, serif;font-size:1.25rem;color:#fff4e0}
.testimonials span{color:var(--gold2);font-size:.9rem}

/* Inner pages */
.page-hero{
  position:relative;
  overflow:hidden;
  padding:clamp(70px,8vw,108px) 0;
  background:
    radial-gradient(circle at center top, rgba(225,191,117,.14) 0, transparent 28%),
    linear-gradient(180deg,#15110d 0%, #090705 100%);
  color:#fff;
  border-bottom:1px solid rgba(214,173,95,.14);
}
.page-hero p{color:#e0c8a3}
.service-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,22px);
}
.service-grid h2{
  font-size:clamp(1.35rem,1.7vw,1.62rem);
  margin-bottom:10px;
  color:#fff1cf;
}
.service-grid ul{padding-left:20px;margin-bottom:0}
.service-grid li{margin:7px 0}
.cta-panel{margin-top:32px;text-align:center}
.centered-actions{justify-content:center}

/* Forms */
.contact-grid,.booking-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);
  gap:clamp(22px,3vw,36px);
  align-items:start;
}
.contact-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.contact-form label{
  display:grid;
  gap:8px;
  font-weight:700;
  color:#f1dec0;
}
.contact-form input,.contact-form textarea,.contact-form select{
  width:100%;
  min-width:0;
  border:1px solid rgba(214,173,95,.24);
  border-radius:14px;
  padding:13px 14px;
  background:#0b0907;
  color:#f5e7cf;
  font:inherit;
  outline:none;
}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{
  border-color:rgba(243,217,153,.62);
  box-shadow:0 0 20px rgba(214,173,95,.16);
}
.contact-form textarea,.contact-form button,.contact-form .full{grid-column:1/-1}
.contact-card{
  position:sticky;
  top:104px;
  overflow-wrap:anywhere;
}

/* Footer */
.site-footer{
  background:radial-gradient(circle at 50% 0%, rgba(214,173,95,.08), transparent 26%),#040302;
  color:#dcc4a2;
  padding:clamp(42px,5vw,60px) 0 clamp(64px,6vw,78px);
  border-top:1px solid rgba(214,173,95,.18);
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(180px,.75fr) minmax(240px,1fr);
  gap:clamp(26px,4vw,42px);
}
.footer-brand .brand-logo-wrap{width:64px;height:64px;min-width:64px}
.site-footer h3{color:#fff1cf;font-size:1.55rem;margin-bottom:10px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:9px 0}
.site-footer a{color:#e5cca3}
.footer-bottom,.scroll-top,.menu-toggle{display:none !important}

/* Fixed copyright only */
.legacy-fixed-copy{
  position:fixed;
  right:16px;
  bottom:12px;
  z-index:10000;
  max-width:min(420px,calc(100vw - 32px));
  padding:7px 13px;
  border:1px solid rgba(243,217,153,.30);
  border-radius:999px;
  background:rgba(6,5,4,.84);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:rgba(246,224,184,.88);
  font-size:12px;
  line-height:1.25;
  font-weight:600;
  letter-spacing:.015em;
  white-space:nowrap;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.34),0 0 20px rgba(214,173,95,.12);
  pointer-events:none;
}

/* Responsive */
@media (max-width:1100px){
  .nav-wrap{
    height:124px;
    grid-template-columns:minmax(260px,1fr) auto;
    grid-template-areas:
      "brand lang"
      "menu menu";
    row-gap:10px;
  }
  .main-nav{justify-self:center}
  .four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  .hero-grid,.band-grid,.contact-grid,.booking-grid,.footer-grid{grid-template-columns:1fr}
  .three,.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-card{order:-1;min-height:auto}
  .contact-card{position:static;top:auto}
}

@media (max-width:720px){
  .topbar-inner{justify-content:center;text-align:center;padding:8px 0}
  .nav-wrap{
    height:118px;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "brand lang"
      "menu menu";
    padding:8px 0;
    gap:8px;
  }
  .brand{gap:10px}
  .brand-logo-wrap{width:44px;height:44px;min-width:44px}
  .brand span:last-child{font-size:.84rem;line-height:1.12}
  .main-nav{
    width:100%;
    justify-self:stretch;
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:0 2px 2px;
    height:36px;
    gap:7px;
  }
  .main-nav::-webkit-scrollbar{display:none}
  .main-nav a{
    flex:0 0 auto;
    width:auto;
    min-width:76px;
    height:34px;
    min-height:34px;
    padding:0 12px;
    font-size:12px;
    border-radius:999px;
  }
  .lang-switch{height:28px;gap:5px}
  .lang-switch a{width:36px;height:28px;min-width:36px;font-size:10.5px}
  .three,.four,.service-grid,.contact-form{grid-template-columns:1fr}
  .actions .btn{flex:1 1 100%}
  .hero-seal{width:110px;height:110px}
  .legacy-fixed-copy{right:8px;bottom:8px;max-width:calc(100vw - 16px);padding:6px 10px;font-size:10.5px}
}

@media (max-width:420px){
  .nav-wrap{height:112px}
  .main-nav a{min-width:70px;height:32px;min-height:32px;padding:0 10px;font-size:11.5px}
  .brand span:last-child{font-size:.78rem}
}

/* Absolutely no click/hover movement anywhere */
a,button,.btn,.main-nav a,.lang-switch a{
  transform:none !important;
  translate:none !important;
  scale:1 !important;
  transition-property:color,background-color,border-color,box-shadow,text-shadow !important;
}
a:active,button:active,.btn:active,.main-nav a:active,.lang-switch a:active{
  transform:none !important;
  translate:none !important;
  scale:1 !important;
}



/* =========================
   LNOTARY V10 — ARAMION-style fixed frame / no page shift
   ========================= */

/*
  Real fix for the visible jump:
  - header is fixed, not sticky;
  - body always reserves exact header space;
  - vertical scrollbar space is always reserved;
  - menu strip has its own horizontal scroll on small screens;
  - page transitions no longer change viewport width/header geometry.
*/

:root{
  --legacy-header-space:120px;
}

html{
  overflow-y:scroll !important;
  scrollbar-gutter:stable both-edges !important;
  scroll-behavior:auto !important;
}

body{
  padding-top:var(--legacy-header-space) !important;
  padding-bottom:58px !important;
  overflow-x:hidden !important;
  min-height:100vh !important;
}

/* Fixed header like ARAMION: it does not participate in document flow. */
.site-header{
  position:fixed !important;
  top:38px !important; /* topbar height */
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:9999 !important;
  transform:none !important;
  translate:none !important;
}

.topbar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:10000 !important;
  min-height:38px !important;
}

.topbar-inner{
  height:38px !important;
  min-height:38px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  flex-wrap:nowrap !important;
  overflow:hidden !important;
}

/* Header has a fixed unchanging height. */
.nav-wrap{
  height:82px !important;
  min-height:82px !important;
  max-height:82px !important;
}

/* No element in header may change height due to hover/active/focus. */
.site-header *,
.topbar *{
  box-sizing:border-box !important;
}

/* Keep first content from jumping visually under fixed header. */
main{
  margin-top:0 !important;
}

/* Menu item exact metrics — not even a 1px border/padding difference. */
.main-nav,
.main-nav a,
.lang-switch,
.lang-switch a{
  box-sizing:border-box !important;
  flex-shrink:0 !important;
}

.main-nav{
  height:38px !important;
  min-height:38px !important;
  max-height:38px !important;
}

.main-nav a,
.main-nav a:hover,
.main-nav a:focus,
.main-nav a:active,
.main-nav a.active,
.main-nav a[aria-current="page"]{
  width:96px !important;
  min-width:96px !important;
  max-width:96px !important;
  height:38px !important;
  min-height:38px !important;
  max-height:38px !important;
  padding:0 !important;
  margin:0 !important;
  border-width:1px !important;
  line-height:1 !important;
  transform:none !important;
  translate:none !important;
  scale:1 !important;
}

/* Language buttons exact metrics */
.lang-switch{
  height:32px !important;
  min-height:32px !important;
  max-height:32px !important;
}

.lang-switch a,
.lang-switch a:hover,
.lang-switch a:focus,
.lang-switch a:active,
.lang-switch a.active,
.lang-switch a[aria-current="true"]{
  width:42px !important;
  min-width:42px !important;
  max-width:42px !important;
  height:32px !important;
  min-height:32px !important;
  max-height:32px !important;
  padding:0 !important;
  margin:0 !important;
  border-width:1px !important;
  line-height:1 !important;
  transform:none !important;
  translate:none !important;
  scale:1 !important;
}

/* Prevent browser focus scroll/outline from affecting apparent position */
.main-nav a:focus,
.lang-switch a:focus,
.btn:focus{
  outline:none !important;
}

/* Tablet: topbar + 124px header */
@media (max-width:1100px){
  :root{
    --legacy-header-space:162px;
  }

  .nav-wrap{
    height:124px !important;
    min-height:124px !important;
    max-height:124px !important;
  }
}

/* Mobile: fixed topbar + fixed compact two-row header */
@media (max-width:720px){
  :root{
    --legacy-header-space:156px;
  }

  .topbar-inner{
    font-size:11px !important;
    gap:8px !important;
  }

  .site-header{
    top:38px !important;
  }

  .nav-wrap{
    height:118px !important;
    min-height:118px !important;
    max-height:118px !important;
  }

  .main-nav{
    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .main-nav::-webkit-scrollbar{
    display:none !important;
  }

  .main-nav a,
  .main-nav a:hover,
  .main-nav a:focus,
  .main-nav a:active,
  .main-nav a.active,
  .main-nav a[aria-current="page"]{
    width:auto !important;
    min-width:76px !important;
    max-width:none !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    padding:0 12px !important;
  }

  .lang-switch{
    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;
  }

  .lang-switch a,
  .lang-switch a:hover,
  .lang-switch a:focus,
  .lang-switch a:active,
  .lang-switch a.active,
  .lang-switch a[aria-current="true"]{
    width:36px !important;
    min-width:36px !important;
    max-width:36px !important;
    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;
  }
}

@media (max-width:420px){
  :root{
    --legacy-header-space:150px;
  }

  .nav-wrap{
    height:112px !important;
    min-height:112px !important;
    max-height:112px !important;
  }

  .main-nav a,
  .main-nav a:hover,
  .main-nav a:focus,
  .main-nav a:active,
  .main-nav a.active,
  .main-nav a[aria-current="page"]{
    min-width:70px !important;
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
    padding:0 10px !important;
  }
}

/* For older browsers without scrollbar-gutter, force stable scrollbar anyway. */
@supports not (scrollbar-gutter: stable){
  html{
    overflow-y:scroll !important;
  }
}



/* =========================
   LNOTARY V11 — No font swap / no title pulse
   ========================= */

/*
  The remaining "jump" was caused by Google Fonts swapping in after page render.
  Headings such as "Schedule a notary or document-service appointment"
  briefly changed size because Cormorant Garamond/Inter loaded after initial paint.
  This version uses only local/system fonts, so text metrics are stable immediately.
*/

html,
body,
button,
input,
textarea,
select,
.main-nav a,
.lang-switch a,
.btn{
  font-family:Arial, Helvetica, sans-serif !important;
}

/* Use local serif fonts only. No webfont loading = no heading scale pulse. */
h1,
h2,
h3,
.stats strong,
.testimonials strong,
.site-footer h3{
  font-family:Georgia, "Times New Roman", Times, serif !important;
  font-synthesis:none !important;
}

/* Freeze heading metrics especially on page hero titles. */
.page-hero h1,
.hero h1,
h1{
  font-size:clamp(2.5rem,5.6vw,5.4rem) !important;
  line-height:1.04 !important;
  letter-spacing:-.045em !important;
  font-weight:700 !important;
  transform:none !important;
  transition:none !important;
  animation:none !important;
  text-rendering:geometricPrecision;
}

.page-hero h2,
.hero h2,
h2{
  line-height:1.04 !important;
  font-weight:700 !important;
  transform:none !important;
  transition:none !important;
  animation:none !important;
}

/* Links/buttons must not trigger any font-weight or metric changes on click/focus. */
a,
a:hover,
a:focus,
a:active,
button,
button:hover,
button:focus,
button:active,
.btn,
.btn:hover,
.btn:focus,
.btn:active,
.main-nav a,
.main-nav a:hover,
.main-nav a:focus,
.main-nav a:active,
.lang-switch a,
.lang-switch a:hover,
.lang-switch a:focus,
.lang-switch a:active{
  font-synthesis:none !important;
  transform:none !important;
  translate:none !important;
  scale:1 !important;
  transition-property:color,background-color,border-color,box-shadow,text-shadow !important;
}

/* Prevent browser scroll anchoring during fixed-header navigation. */
html{
  overflow-anchor:none !important;
}



/* =========================
   LNOTARY V12 — Text overflow / Armenian-safe layout
   ========================= */

/*
  Fixes:
  - Armenian navigation labels no longer overflow buttons.
  - Text inside cards, forms, service blocks, footer, badges and buttons can wrap safely.
  - Grid children use min-width:0 so long words do not force blocks wider.
  - Works for EN and HY pages.
*/

html,
body{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
}

body{
  overflow-wrap:break-word;
}

.container,
.hero-grid,
.band-grid,
.footer-grid,
.contact-grid,
.booking-grid,
.cards,
.card,
.service-grid,
.service-grid article,
.contact-form,
.contact-card,
.cta-panel,
.hero-card,
.stats,
.stats div,
.footer-grid > div,
main,
section{
  min-width:0 !important;
  max-width:100% !important;
}

p,
li,
h1,
h2,
h3,
span,
strong,
label,
input,
textarea,
select,
option,
.card,
.service-grid article,
.contact-card,
.site-footer,
.hero-card,
.cta-panel{
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  hyphens:auto !important;
}

/* Keep large titles elegant but prevent overflow on narrow screens and Armenian text. */
h1,
.page-hero h1,
.hero h1{
  max-width:100% !important;
  font-size:clamp(2.05rem,4.9vw,5.05rem) !important;
}

h2,
.page-hero h2,
.hero h2{
  max-width:100% !important;
  font-size:clamp(1.72rem,3vw,3rem) !important;
}

h3{
  max-width:100% !important;
}

/* Navigation: no fixed 96px width. Buttons grow with text and wrap only if needed. */
.main-nav{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:38px !important;
  max-height:none !important;
  overflow:visible !important;
}

.main-nav a,
.main-nav a:hover,
.main-nav a:focus,
.main-nav a:active,
.main-nav a.active,
.main-nav a[aria-current="page"]{
  width:auto !important;
  min-width:82px !important;
  max-width:170px !important;
  height:auto !important;
  min-height:38px !important;
  max-height:none !important;

  padding:0 12px !important;

  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  hyphens:auto !important;

  text-align:center !important;
  line-height:1.08 !important;
}

/* HY labels are longer. Give menu more breathing room when page is Armenian. */
html[lang="hy"] .main-nav a,
html[lang="hy"] .main-nav a:hover,
html[lang="hy"] .main-nav a:focus,
html[lang="hy"] .main-nav a:active,
html[lang="hy"] .main-nav a.active,
html[lang="hy"] .main-nav a[aria-current="page"]{
  min-width:96px !important;
  max-width:190px !important;
  padding:0 10px !important;
  font-size:13px !important;
  line-height:1.08 !important;
}

/* Header height can hold two-line Armenian menu labels without clipping. */
.nav-wrap{
  height:auto !important;
  min-height:82px !important;
  max-height:none !important;
  padding-top:10px !important;
  padding-bottom:10px !important;
}

.site-header{
  min-height:82px !important;
}

/* Stable fixed header reserve adjusted for possible two-line labels. */
:root{
  --legacy-header-space:132px;
}

@media (max-width:1100px){
  :root{
    --legacy-header-space:178px;
  }

  .nav-wrap{
    min-height:138px !important;
  }

  .main-nav{
    justify-content:center !important;
    flex-wrap:wrap !important;
    row-gap:8px !important;
  }
}

/* Mobile menu: horizontal scroll, Armenian labels stay inside their pills. */
@media (max-width:720px){
  :root{
    --legacy-header-space:166px;
  }

  .nav-wrap{
    min-height:128px !important;
  }

  .main-nav{
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    height:auto !important;
    min-height:40px !important;
    max-height:none !important;
    padding-bottom:3px !important;
  }

  .main-nav a,
  .main-nav a:hover,
  .main-nav a:focus,
  .main-nav a:active,
  .main-nav a.active,
  .main-nav a[aria-current="page"]{
    flex:0 0 auto !important;
    min-width:78px !important;
    max-width:140px !important;
    min-height:36px !important;
    padding:0 10px !important;
    font-size:11.5px !important;
    line-height:1.08 !important;
  }

  html[lang="hy"] .main-nav a,
  html[lang="hy"] .main-nav a:hover,
  html[lang="hy"] .main-nav a:focus,
  html[lang="hy"] .main-nav a:active,
  html[lang="hy"] .main-nav a.active,
  html[lang="hy"] .main-nav a[aria-current="page"]{
    min-width:96px !important;
    max-width:152px !important;
    font-size:10.8px !important;
    padding:0 8px !important;
  }
}

@media (max-width:420px){
  :root{
    --legacy-header-space:160px;
  }

  .nav-wrap{
    min-height:122px !important;
  }

  .main-nav a,
  .main-nav a:hover,
  .main-nav a:focus,
  .main-nav a:active,
  .main-nav a.active,
  .main-nav a[aria-current="page"]{
    min-width:74px !important;
    max-width:132px !important;
    font-size:10.8px !important;
    padding:0 8px !important;
  }

  html[lang="hy"] .main-nav a,
  html[lang="hy"] .main-nav a:hover,
  html[lang="hy"] .main-nav a:focus,
  html[lang="hy"] .main-nav a:active,
  html[lang="hy"] .main-nav a.active,
  html[lang="hy"] .main-nav a[aria-current="page"]{
    min-width:90px !important;
    max-width:146px !important;
    font-size:10.2px !important;
    padding:0 7px !important;
  }
}

/* Language switcher should remain compact, but never clip text. */
.lang-switch a,
.lang-switch a:hover,
.lang-switch a:focus,
.lang-switch a:active,
.lang-switch a.active,
.lang-switch a[aria-current="true"]{
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:clip !important;
}

/* Buttons and badges: allow multiline text. */
.btn,
.btn:hover,
.btn:focus,
.btn:active,
.hero-badges span,
.hero-badges span:hover{
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  line-height:1.18 !important;
  text-align:center !important;
}

/* Form controls with Armenian text / options */
.contact-form input,
.contact-form textarea,
.contact-form select{
  min-width:0 !important;
  max-width:100% !important;
}

.contact-form select{
  white-space:normal !important;
}

/* Footer brand and contact must not force horizontal scroll. */
.footer-brand,
.site-footer p,
.site-footer a,
.footer-grid li{
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}

.footer-brand{
  align-items:flex-start !important;
}

.footer-brand span:last-child{
  min-width:0 !important;
  max-width:100% !important;
}

/* Fixed copyright: keep readable on narrow screens, no horizontal overflow. */
.legacy-fixed-copy{
  white-space:normal !important;
  max-width:min(420px,calc(100vw - 20px)) !important;
  overflow-wrap:break-word !important;
}

@media (max-width:720px){
  .legacy-fixed-copy{
    max-width:calc(100vw - 16px) !important;
    line-height:1.25 !important;
  }
}

/* Cards and grids: long words must not widen columns. */
.cards > *,
.service-grid > *,
.stats > *{
  min-width:0 !important;
}

/* Small screens: reduce title sizes further to prevent overflow. */
@media (max-width:520px){
  h1,
  .page-hero h1,
  .hero h1{
    font-size:clamp(1.88rem,9vw,3.1rem) !important;
    line-height:1.08 !important;
  }

  h2,
  .page-hero h2,
  .hero h2{
    font-size:clamp(1.5rem,7.2vw,2.2rem) !important;
    line-height:1.08 !important;
  }

  .page-hero,
  .hero{
    padding-left:0 !important;
    padding-right:0 !important;
  }
}



/* =========================
   LNOTARY V13 — Professional footer contact + embedded map
   ========================= */

.footer-area-link{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  color:#e5cca3 !important;
  overflow-wrap:anywhere;
}

.footer-area-link::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  margin-right:8px;
  background:var(--gold);
  box-shadow:0 0 12px rgba(214,173,95,.38);
  flex:0 0 auto;
}

.map-section{
  padding-top:clamp(20px,4vw,42px) !important;
}

.map-panel{
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
  gap:clamp(20px,3vw,34px);
  align-items:stretch;
  min-width:0;
  padding:clamp(22px,3vw,34px);
  border:1px solid rgba(214,173,95,.22);
  border-radius:28px;
  background:
    linear-gradient(180deg,rgba(22,18,14,.96),rgba(12,10,8,.98));
  box-shadow:
    0 22px 58px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.035);
}

.map-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.map-copy h2{
  margin-bottom:14px;
}

.map-copy strong{
  color:#fff1cf;
  overflow-wrap:anywhere;
}

.map-open-link{
  width:max-content;
  max-width:100%;
  margin-top:12px;
}

.map-frame-wrap{
  min-width:0;
  min-height:360px;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(243,217,153,.24);
  background:#0b0907;
  box-shadow:
    0 0 0 1px rgba(243,217,153,.08) inset,
    0 18px 42px rgba(0,0,0,.32);
}

.map-frame-wrap iframe{
  display:block;
  width:100%;
  height:100%;
  min-height:360px;
  border:0;
  filter:saturate(.92) contrast(1.02);
}

.contact-card a[href="#map"]{
  color:#ffe0a3 !important;
  text-shadow:0 0 12px rgba(214,173,95,.22);
}

@media (max-width:900px){
  .map-panel{
    grid-template-columns:1fr;
  }

  .map-frame-wrap,
  .map-frame-wrap iframe{
    min-height:320px;
  }
}

@media (max-width:520px){
  .map-panel{
    padding:18px;
    border-radius:22px;
  }

  .map-frame-wrap{
    border-radius:18px;
  }

  .map-frame-wrap,
  .map-frame-wrap iframe{
    min-height:280px;
  }

  .map-open-link{
    width:100%;
  }
}



/* =========================
   LNOTARY V14 — Header cleanup + inline animated contact map
   ========================= */

/* Header/topbar: remove duplicated contact feel; use one professional service line. */
.topbar-single{
  justify-content:center !important;
  text-align:center !important;
  font-weight:700 !important;
  letter-spacing:.025em !important;
  color:#e7cf9e !important;
}

.topbar-single span{
  overflow-wrap:anywhere;
}

/* Old standalone map section is no longer used. */
.map-section{
  display:none !important;
}

/* Contact address becomes an elegant in-card map trigger. */
.contact-location-block{
  min-width:0;
}

.address-map-toggle{
  appearance:none;
  -webkit-appearance:none;
  display:inline;
  width:auto;
  max-width:100%;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  color:#ffe0a3;
  font:inherit;
  font-weight:800;
  line-height:1.45;
  text-align:left;
  cursor:pointer;
  overflow-wrap:anywhere;
  text-shadow:0 0 12px rgba(214,173,95,.22);
}

.address-map-toggle:hover,
.address-map-toggle:focus{
  color:#fff1c7;
  text-shadow:
    0 0 10px rgba(243,217,153,.38),
    0 0 20px rgba(214,173,95,.20);
  outline:0;
}

.address-map-toggle::after{
  content:"  ▾";
  color:#d6ad5f;
  font-size:.9em;
}

.address-map-toggle[aria-expanded="true"]::after{
  content:"  ▴";
}

/* Animated inline map directly below address and before E-Mail. */
.inline-map-panel{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform:translateY(-6px);
  transition:
    max-height .34s ease,
    opacity .24s ease,
    transform .24s ease,
    margin .24s ease,
    padding .24s ease,
    border-color .24s ease;
  margin:0;
  padding:0 14px;
  border:1px solid rgba(214,173,95,0);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(10,8,6,.96),rgba(6,5,4,.98));
  box-shadow:none;
}

.inline-map-panel.is-open{
  max-height:520px;
  opacity:1;
  transform:translateY(0);
  margin:12px 0 18px;
  padding:14px;
  border-color:rgba(214,173,95,.24);
  box-shadow:
    0 18px 46px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.035);
}

.inline-map-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  color:#f1d89a;
  font-size:.92rem;
  font-weight:800;
}

.inline-map-close{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  border:1px solid rgba(214,173,95,.22);
  border-radius:999px;
  background:rgba(255,255,255,.02);
  color:#e7cf9e;
  padding:6px 10px;
  font:inherit;
  font-size:.82rem;
  line-height:1;
  cursor:pointer;
}

.inline-map-close:hover,
.inline-map-close:focus{
  border-color:rgba(243,217,153,.58);
  color:#fff3d0;
  box-shadow:0 0 14px rgba(214,173,95,.16);
  outline:0;
}

.inline-map-frame{
  width:100%;
  min-height:260px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(243,217,153,.20);
  background:#0b0907;
  box-shadow:0 0 0 1px rgba(243,217,153,.06) inset;
}

.inline-map-frame iframe{
  display:block;
  width:100%;
  height:260px;
  border:0;
  filter:saturate(.92) contrast(1.02);
}

.inline-map-external{
  display:inline-flex;
  margin-top:10px;
  color:#e5cca3 !important;
  font-size:.88rem;
  font-weight:800;
}

.inline-map-external:hover{
  color:#ffe6ac !important;
  text-shadow:0 0 14px rgba(214,173,95,.30);
}

@media (max-width:720px){
  .topbar-single{
    font-size:11px !important;
    padding:0 8px !important;
  }

  .inline-map-panel.is-open{
    max-height:500px;
    padding:12px;
  }

  .inline-map-frame{
    min-height:220px;
  }

  .inline-map-frame iframe{
    height:220px;
  }

  .inline-map-toolbar{
    align-items:flex-start;
  }
}

@media (max-width:420px){
  .inline-map-frame{
    min-height:200px;
  }

  .inline-map-frame iframe{
    height:200px;
  }
}



/* =========================
   LNOTARY V15 — Contact form field rules
   ========================= */

/* Message field should not be manually resized by the browser. */
.contact-form textarea{
  resize:none !important;
}

/* Keep all form fields visually stable. */
.contact-form input,
.contact-form textarea,
.contact-form select{
  max-width:100% !important;
}

/* Small helper text below fields. */
.field-note{
  display:block;
  margin-top:-2px;
  color:#a99168;
  font-size:.78rem;
  font-weight:600;
  line-height:1.35;
}

/* HTML5 validation feedback, subtle and premium. */
.contact-form input:invalid:not(:placeholder-shown),
.contact-form textarea:invalid:not(:placeholder-shown){
  border-color:rgba(255,128,128,.55) !important;
  box-shadow:
    0 0 0 1px rgba(255,128,128,.14) inset,
    0 0 16px rgba(255,128,128,.10) !important;
}

.contact-form input:valid:not(:placeholder-shown),
.contact-form textarea:valid:not(:placeholder-shown){
  border-color:rgba(214,173,95,.36) !important;
}

/* Phone pattern can look invalid while typing; keep it softer. */
.contact-form input[type="tel"]:invalid:not(:placeholder-shown){
  border-color:rgba(214,173,95,.30) !important;
  box-shadow:none !important;
}



/* =========================
   LNOTARY V16 — Contact form layout, callback rule, file attachments
   ========================= */

/* Contact form now has left contact fields + right Message field. */
.contact-form-enhanced{
  grid-template-columns:minmax(240px,.72fr) minmax(300px,1.28fr) !important;
  align-items:start !important;
  gap:20px !important;
}

.contact-fields-left,
.contact-message-right,
.file-upload-block{
  min-width:0 !important;
}

.contact-fields-left{
  display:grid;
  gap:16px;
}

.contact-message-right label{
  height:100%;
}

.contact-message-right textarea{
  min-height:244px !important;
  height:244px !important;
  resize:none !important;
}

/* Phone should visually match Name and Email. */
.contact-form input[type="tel"]{
  min-height:46px !important;
  height:46px !important;
  padding:13px 14px !important;
}

/* Email and Phone are individually optional, but at least one is required by JS. */
.contact-method-error{
  display:none;
  margin-top:-4px;
  padding:10px 12px;
  border:1px solid rgba(255,128,128,.38);
  border-radius:14px;
  background:rgba(255,128,128,.07);
  color:#ffd0c8;
  font-size:.86rem;
  font-weight:700;
  line-height:1.45;
}

.contact-method-error.is-visible{
  display:block;
}

/* File upload block spans across the form. */
.file-upload-block{
  grid-column:1/-1;
  border:1px solid rgba(214,173,95,.18);
  border-radius:18px;
  padding:16px;
  background:rgba(255,255,255,.018);
}

.file-upload-block label{
  display:grid;
  gap:10px;
}

.file-upload-block input[type="file"]{
  min-height:46px;
  height:auto;
  padding:11px 12px;
  cursor:pointer;
}

.optional-label{
  color:#a99168;
  font-size:.82rem;
  font-weight:700;
}

.file-validation-message{
  display:none;
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  font-size:.86rem;
  font-weight:700;
  line-height:1.45;
}

.file-validation-message.is-error{
  display:block;
  border:1px solid rgba(255,128,128,.38);
  background:rgba(255,128,128,.07);
  color:#ffd0c8;
}

.file-validation-message.is-ok{
  display:block;
  border:1px solid rgba(214,173,95,.30);
  background:rgba(214,173,95,.07);
  color:#f4d999;
}

/* Submit button spans full form width. */
.contact-form-enhanced > button{
  grid-column:1/-1;
  width:max-content;
  min-width:180px;
}

/* Keep invalid phone soft while typing, because international formats vary. */
.contact-form input[type="tel"]:invalid:not(:placeholder-shown){
  border-color:rgba(214,173,95,.30) !important;
  box-shadow:none !important;
}

/* Email/phone contact-method validation highlight. */
.contact-form .contact-method-needed input{
  border-color:rgba(255,128,128,.55) !important;
  box-shadow:
    0 0 0 1px rgba(255,128,128,.14) inset,
    0 0 16px rgba(255,128,128,.10) !important;
}

@media (max-width:900px){
  .contact-form-enhanced{
    grid-template-columns:1fr !important;
  }

  .contact-message-right textarea{
    min-height:220px !important;
    height:220px !important;
  }

  .file-upload-block,
  .contact-form-enhanced > button{
    grid-column:1/-1;
  }
}

@media (max-width:520px){
  .contact-message-right textarea{
    min-height:200px !important;
    height:200px !important;
  }

  .contact-form-enhanced > button{
    width:100%;
  }
}



/* =========================
   LNOTARY V17 — Custom file upload + cleaner inline map
   ========================= */

/* File upload now belongs to the left column with Name / Email / Phone. */
.contact-fields-left .file-upload-block{
  grid-column:auto !important;
  margin-top:0;
}

/* Override old full-width file block behavior. */
.file-upload-block{
  grid-column:auto !important;
  padding:14px !important;
}

.file-upload-title{
  display:block;
  margin-bottom:10px;
  color:#f1dec0;
  font-weight:800;
  line-height:1.25;
}

/* Hide native browser file input text: "Choose files / No file chosen". */
.custom-file-trigger input[type="file"]{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
}

/* Custom premium file picker. */
.custom-file-trigger{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:10px;
  cursor:pointer;
  min-width:0;
}

.custom-file-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  border:1px solid rgba(214,173,95,.30);
  border-radius:999px;
  background:rgba(214,173,95,.08);
  color:#ffe0a3;
  font-weight:800;
  font-size:.9rem;
  line-height:1;
  white-space:nowrap;
  box-shadow:
    0 0 0 1px rgba(243,217,153,.06) inset,
    0 10px 24px rgba(0,0,0,.18);
}

.custom-file-trigger:hover .custom-file-button,
.custom-file-trigger:focus-within .custom-file-button{
  border-color:rgba(243,217,153,.58);
  color:#fff1c7;
  box-shadow:
    0 0 0 1px rgba(243,217,153,.14) inset,
    0 0 18px rgba(214,173,95,.18),
    0 10px 24px rgba(0,0,0,.20);
}

.custom-file-status{
  min-width:0;
  color:#bfa77f;
  font-size:.86rem;
  font-weight:700;
  line-height:1.35;
  overflow-wrap:anywhere;
}

/* Since file upload is now left, Message can be taller and visually balanced. */
.contact-message-right textarea{
  min-height:338px !important;
  height:338px !important;
}

/* Remove old map toolbar spacing. Map opens directly under address. */
.inline-map-toolbar{
  display:none !important;
}

.inline-map-panel.is-open{
  padding-top:14px !important;
}

.inline-map-frame{
  margin-top:0 !important;
}

/* Keep inline map clean without Close button; click address again to close. */
.address-map-toggle[aria-expanded="true"]{
  color:#fff1c7;
}

.address-map-toggle[aria-expanded="true"]::after{
  content:"  ▴";
}

/* Submit button remains clean full form action. */
.contact-form-enhanced > button{
  grid-column:1/-1 !important;
}

/* Mobile still stacks everything naturally. */
@media (max-width:900px){
  .contact-message-right textarea{
    min-height:240px !important;
    height:240px !important;
  }

  .custom-file-trigger{
    grid-template-columns:1fr;
  }

  .custom-file-button{
    width:100%;
  }
}

@media (max-width:520px){
  .contact-message-right textarea{
    min-height:220px !important;
    height:220px !important;
  }
}



/* =========================
   LNOTARY V18 — Contact form fit + file block typography
   ========================= */

/* Prevent the two-column contact form from overflowing the card at medium widths. */
.contact-form-enhanced{
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
  grid-template-columns:minmax(220px,.62fr) minmax(0,1.38fr) !important;
  column-gap:24px !important;
}

.contact-fields-left,
.contact-message-right{
  min-width:0 !important;
  max-width:100% !important;
}

.contact-message-right label,
.contact-message-right textarea{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}

/* Earlier switch to one column before the screenshot-width overflow happens. */
@media (max-width:1080px){
  .contact-grid{
    grid-template-columns:1fr !important;
  }

  .contact-card{
    position:static !important;
  }
}

@media (max-width:760px){
  .contact-form-enhanced{
    grid-template-columns:1fr !important;
  }
}

/* Message height aligned to the full left-column stack including Attach files. */
.contact-message-right textarea{
  min-height:392px !important;
  height:392px !important;
  resize:none !important;
}

@media (max-width:760px){
  .contact-message-right textarea{
    min-height:240px !important;
    height:240px !important;
  }
}

@media (max-width:520px){
  .contact-message-right textarea{
    min-height:220px !important;
    height:220px !important;
  }
}

/* Message counter text: smaller like optional. */
.contact-message-right .field-note{
  font-size:.78rem !important;
  color:#a99168 !important;
  font-weight:700 !important;
  line-height:1.35 !important;
  margin-top:8px !important;
}

/* Attach files layout: title, optional line, button line, status line. */
.file-upload-block{
  display:block !important;
  padding:16px 18px !important;
}

.file-upload-title{
  display:block !important;
  margin:0 0 2px !important;
  color:#f1dec0 !important;
  font-size:1.05rem !important;
  font-weight:900 !important;
  line-height:1.22 !important;
}

.optional-label{
  display:block !important;
  margin:0 0 12px !important;
  color:#a99168 !important;
  font-size:.78rem !important;
  font-weight:800 !important;
  line-height:1.25 !important;
}

.custom-file-trigger{
  display:block !important;
  width:max-content !important;
  max-width:100% !important;
  margin:0 0 10px !important;
}

.custom-file-button{
  min-height:40px !important;
  padding:0 16px !important;
  font-size:.9rem !important;
}

.custom-file-status{
  display:block !important;
  margin:0 0 10px !important;
  color:#a99168 !important;
  font-size:.78rem !important;
  font-weight:800 !important;
  line-height:1.35 !important;
  overflow-wrap:anywhere !important;
}

.file-upload-block .field-note{
  margin-top:0 !important;
  font-size:.78rem !important;
  line-height:1.42 !important;
}

/* Make the file upload block less cramped on narrow columns. */
@media (max-width:900px){
  .custom-file-trigger{
    width:100% !important;
  }

  .custom-file-button{
    width:100% !important;
  }
}

/* Contact form validation note should not expand layout horizontally. */
.file-validation-message,
.contact-method-error{
  max-width:100% !important;
  overflow-wrap:anywhere !important;
}



/* =========================
   LNOTARY V19 — Desktop contact alignment fix
   ========================= */

/*
  Fixes from screenshot:
  - Contact Information card must stay to the right of the form on desktop.
  - Message field must align better with the left column including Attach files.
  - Submit button must stay inside the form container, not drift to the page edge.
*/

/* Desktop contact layout: form left, contact card right. */
.contact-grid{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(320px, 410px) !important;
  gap:clamp(24px,3vw,38px) !important;
  align-items:start !important;
}

/* Undo the too-early V18 stacking breakpoint. */
@media (max-width:1080px){
  .contact-grid{
    grid-template-columns:minmax(0, 1fr) minmax(300px, 380px) !important;
  }

  .contact-card{
    position:sticky !important;
    top:104px !important;
  }
}

/* Stack only when the screen is genuinely tablet/mobile. */
@media (max-width:860px){
  .contact-grid{
    grid-template-columns:1fr !important;
  }

  .contact-card{
    position:static !important;
    top:auto !important;
  }
}

/* Form must always remain inside its own grid cell. */
.contact-form-enhanced{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:visible !important;
  grid-template-columns:minmax(230px, .62fr) minmax(0, 1.38fr) !important;
  column-gap:24px !important;
  row-gap:18px !important;
  align-items:start !important;
}

/* Keep the two-column form until narrower widths. */
@media (max-width:760px){
  .contact-form-enhanced{
    grid-template-columns:1fr !important;
  }
}

.contact-fields-left,
.contact-message-right,
.file-upload-block{
  min-width:0 !important;
  max-width:100% !important;
}

/* Message height should match the full left column including Attach files. */
.contact-message-right textarea{
  min-height:468px !important;
  height:468px !important;
  max-height:468px !important;
  width:100% !important;
  max-width:100% !important;
  resize:none !important;
}

/* On medium/narrow layouts reduce message height after form stacks. */
@media (max-width:860px){
  .contact-message-right textarea{
    min-height:260px !important;
    height:260px !important;
    max-height:260px !important;
  }
}

@media (max-width:520px){
  .contact-message-right textarea{
    min-height:220px !important;
    height:220px !important;
    max-height:220px !important;
  }
}

/* Submit button: inside form, aligned with form content, not outside the card. */
.contact-form-enhanced > button{
  grid-column:1 / -1 !important;
  justify-self:start !important;
  align-self:start !important;
  width:auto !important;
  min-width:180px !important;
  max-width:100% !important;
  margin:0 !important;
  position:static !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
}

@media (max-width:520px){
  .contact-form-enhanced > button{
    width:100% !important;
  }
}

/* Make sure the contact form card visually wraps all inner elements. */
.contact-form{
  position:relative !important;
  overflow:visible !important;
}

/* Contact card should align with top of form on desktop. */
.contact-card{
  align-self:start !important;
}

/* Prevent fixed header from covering content after anchor jumps. */
.contact-grid,
.contact-card,
.contact-form{
  scroll-margin-top:calc(var(--legacy-header-space, 132px) + 24px) !important;
}



/* =========================
   LNOTARY V20 — Verified contact desktop layout
   ========================= */

/* 1) Desktop Contact section: form and Contact Information side by side. */
.contact-grid{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) clamp(280px, 28vw, 390px) !important;
  gap:clamp(22px, 2.6vw, 38px) !important;
  align-items:start !important;
  width:100% !important;
  max-width:100% !important;
}

.contact-card{
  grid-column:2 !important;
  grid-row:1 !important;
  align-self:start !important;
  position:sticky !important;
  top:calc(var(--legacy-header-space, 132px) + 18px) !important;
  max-width:100% !important;
  min-width:0 !important;
}

.contact-form-enhanced{
  grid-column:1 !important;
  grid-row:1 !important;
  display:grid !important;
  grid-template-columns:minmax(210px, .58fr) minmax(280px, 1.42fr) !important;
  gap:18px 24px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  align-items:start !important;
}

/* Keep side-by-side desktop layout much longer.
   This fixes the Contact Information falling below while screen still has enough room. */
@media (max-width:780px){
  .contact-grid{
    grid-template-columns:1fr !important;
  }

  .contact-card{
    grid-column:1 !important;
    grid-row:auto !important;
    position:static !important;
    top:auto !important;
  }
}

@media (max-width:1040px){
  .contact-form-enhanced{
    grid-template-columns:minmax(190px, .56fr) minmax(240px, 1.44fr) !important;
    gap:16px 20px !important;
  }
}

/* Only the inner form becomes one column on truly narrow widths. */
@media (max-width:640px){
  .contact-form-enhanced{
    grid-template-columns:1fr !important;
  }
}

/* 2) Message height: aligned to left column stack. */
.contact-message-right{
  min-width:0 !important;
  max-width:100% !important;
}

.contact-message-right label{
  display:grid !important;
  grid-template-rows:auto 1fr auto !important;
  gap:8px !important;
  height:auto !important;
  min-width:0 !important;
  max-width:100% !important;
}

.contact-message-right textarea{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  min-height:444px !important;
  height:444px !important;
  max-height:444px !important;
  resize:none !important;
  box-sizing:border-box !important;
}

@media (max-width:1040px){
  .contact-message-right textarea{
    min-height:426px !important;
    height:426px !important;
    max-height:426px !important;
  }
}

@media (max-width:640px){
  .contact-message-right textarea{
    min-height:230px !important;
    height:230px !important;
    max-height:230px !important;
  }
}

/* 3) Attach files: notes are outside bordered block, like Message counter. */
.contact-fields-left{
  display:grid !important;
  gap:16px !important;
  min-width:0 !important;
  max-width:100% !important;
}

.contact-fields-left .file-upload-block{
  display:block !important;
  grid-column:auto !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  padding:16px 18px !important;
  margin:0 !important;
  border-radius:18px !important;
  box-sizing:border-box !important;
}

.file-upload-title{
  display:block !important;
  margin:0 0 2px !important;
  color:#f1dec0 !important;
  font-size:1.05rem !important;
  font-weight:900 !important;
  line-height:1.22 !important;
}

.optional-label{
  display:block !important;
  margin:0 0 12px !important;
  color:#a99168 !important;
  font-size:.78rem !important;
  font-weight:800 !important;
  line-height:1.25 !important;
}

.custom-file-trigger{
  display:block !important;
  width:max-content !important;
  max-width:100% !important;
  margin:0 !important;
  cursor:pointer !important;
}

.custom-file-trigger input[type="file"]{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
}

.custom-file-button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:40px !important;
  padding:0 16px !important;
  border:1px solid rgba(214,173,95,.30) !important;
  border-radius:999px !important;
  background:rgba(214,173,95,.08) !important;
  color:#ffe0a3 !important;
  font-size:.9rem !important;
  font-weight:800 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

.file-outside-note{
  display:block !important;
  margin:-8px 0 0 !important;
  padding:0 2px !important;
  color:#a99168 !important;
  font-size:.78rem !important;
  font-weight:800 !important;
  line-height:1.38 !important;
  max-width:100% !important;
  overflow-wrap:anywhere !important;
}

.file-validation-message.file-outside-note{
  margin-top:-4px !important;
  padding:10px 12px !important;
}

/* Message counter matches optional/file notes. */
.contact-message-right .field-note{
  display:block !important;
  margin:4px 0 0 !important;
  color:#a99168 !important;
  font-size:.78rem !important;
  font-weight:800 !important;
  line-height:1.35 !important;
}

/* 4) Submit button must stay inside the form card. */
.contact-form-enhanced > button{
  grid-column:1 / -1 !important;
  justify-self:start !important;
  align-self:start !important;
  position:static !important;
  width:auto !important;
  min-width:180px !important;
  max-width:100% !important;
  margin:2px 0 0 !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
}

@media (max-width:640px){
  .contact-form-enhanced > button{
    width:100% !important;
  }

  .custom-file-trigger{
    width:100% !important;
  }

  .custom-file-button{
    width:100% !important;
  }
}

/* 5) Neutralize old rules that forced early stacking or huge message mismatch. */
@media (max-width:1080px){
  .contact-grid{
    grid-template-columns:minmax(0, 1fr) clamp(280px, 28vw, 390px) !important;
  }
}

@media (max-width:780px){
  .contact-grid{
    grid-template-columns:1fr !important;
  }
}



/* =========================
   LNOTARY V21 — Corrected Contact form DOM/layout
   ========================= */

/* Desktop: two blocks at same top level — form left, contact info right. */
.contact-grid{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) clamp(300px, 28vw, 390px) !important;
  gap:clamp(24px, 2.6vw, 38px) !important;
  align-items:start !important;
  width:100% !important;
  max-width:100% !important;
}

.contact-form-enhanced{
  grid-column:1 !important;
  grid-row:1 !important;
  display:grid !important;
  grid-template-columns:minmax(220px, .62fr) minmax(280px, 1.38fr) !important;
  gap:18px 24px !important;
  align-items:start !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

.contact-card{
  grid-column:2 !important;
  grid-row:1 !important;
  align-self:start !important;
  position:sticky !important;
  top:calc(var(--legacy-header-space, 132px) + 18px) !important;
  min-width:0 !important;
  max-width:100% !important;
}

/* Keep desktop two-column page until genuinely narrow. */
@media (max-width:780px){
  .contact-grid{
    grid-template-columns:1fr !important;
  }
  .contact-card{
    grid-column:1 !important;
    grid-row:auto !important;
    position:static !important;
    top:auto !important;
  }
}

/* Inner form can reduce but remain stable. */
@media (max-width:1040px){
  .contact-form-enhanced{
    grid-template-columns:minmax(190px, .58fr) minmax(240px, 1.42fr) !important;
    gap:16px 20px !important;
  }
}

@media (max-width:640px){
  .contact-form-enhanced{
    grid-template-columns:1fr !important;
  }
}

/* Left column and Message column must not overflow. */
.contact-fields-left,
.contact-message-right,
.contact-message-right label,
.contact-message-right textarea{
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

.contact-fields-left{
  display:grid !important;
  gap:16px !important;
}

.contact-message-right label{
  display:grid !important;
  grid-template-rows:auto 1fr auto !important;
  gap:8px !important;
}

/* Message height aligned with full left stack. */
.contact-message-right textarea{
  width:100% !important;
  min-height:444px !important;
  height:444px !important;
  max-height:444px !important;
  resize:none !important;
}

@media (max-width:1040px){
  .contact-message-right textarea{
    min-height:426px !important;
    height:426px !important;
    max-height:426px !important;
  }
}

@media (max-width:640px){
  .contact-message-right textarea{
    min-height:230px !important;
    height:230px !important;
    max-height:230px !important;
  }
}

/* Attach files block contains only title / optional / button.
   Status and allowed formats sit outside, like Message counter. */
.contact-fields-left .file-upload-block{
  display:block !important;
  grid-column:auto !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  padding:16px 18px !important;
  margin:0 !important;
  border-radius:18px !important;
  box-sizing:border-box !important;
}

.file-upload-title{
  display:block !important;
  margin:0 0 2px !important;
  color:#f1dec0 !important;
  font-size:1.05rem !important;
  font-weight:900 !important;
  line-height:1.22 !important;
}

.optional-label{
  display:block !important;
  margin:0 0 12px !important;
  color:#a99168 !important;
  font-size:.78rem !important;
  font-weight:800 !important;
  line-height:1.25 !important;
}

.custom-file-trigger{
  display:block !important;
  width:max-content !important;
  max-width:100% !important;
  margin:0 !important;
  cursor:pointer !important;
}

.custom-file-trigger input[type="file"]{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
}

.custom-file-button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:40px !important;
  padding:0 16px !important;
  border:1px solid rgba(214,173,95,.30) !important;
  border-radius:999px !important;
  background:rgba(214,173,95,.08) !important;
  color:#ffe0a3 !important;
  font-size:.9rem !important;
  font-weight:800 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

.file-outside-note{
  display:block !important;
  margin:-8px 0 0 !important;
  padding:0 2px !important;
  color:#a99168 !important;
  font-size:.78rem !important;
  font-weight:800 !important;
  line-height:1.38 !important;
  max-width:100% !important;
  overflow-wrap:anywhere !important;
}

.file-validation-message.file-outside-note{
  margin-top:-4px !important;
  padding:10px 12px !important;
}

.contact-message-right .field-note{
  display:block !important;
  margin:4px 0 0 !important;
  color:#a99168 !important;
  font-size:.78rem !important;
  font-weight:800 !important;
  line-height:1.35 !important;
}

/* Submit must be a direct grid item inside the form. */
.contact-form-enhanced > button{
  grid-column:1 / -1 !important;
  justify-self:start !important;
  align-self:start !important;
  position:static !important;
  width:auto !important;
  min-width:180px !important;
  max-width:100% !important;
  margin:2px 0 0 !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
}

@media (max-width:640px){
  .contact-form-enhanced > button{
    width:100% !important;
  }
  .custom-file-trigger,
  .custom-file-button{
    width:100% !important;
  }
}

/* Override previous too-early stacking rules. */
@media (max-width:1080px){
  .contact-grid{
    grid-template-columns:minmax(0, 1fr) clamp(300px, 28vw, 390px) !important;
  }
}

@media (max-width:780px){
  .contact-grid{
    grid-template-columns:1fr !important;
  }
}



/* =========================
   LNOTARY V22 — Equal Contact blocks
   ========================= */

/*
  Contact page desktop layout:
  - left "write message" form card and right "Contact Information" card are equal width;
  - both cards align at the same top line;
  - both cards stretch to the same visual height;
  - mobile/tablet still stacks cleanly.
*/

.contact-grid{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
  gap:clamp(24px, 3vw, 42px) !important;
  align-items:stretch !important;
  width:100% !important;
  max-width:100% !important;
}

/* Override previous fixed/clamped right-card width rules. */
@media (max-width:1080px){
  .contact-grid{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}

.contact-form-enhanced,
.contact-card{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:100% !important;
  align-self:stretch !important;
  box-sizing:border-box !important;
}

/* Contact card must be equal, not narrow/sticky while the form is tall. */
.contact-card{
  grid-column:2 !important;
  grid-row:1 !important;
  position:relative !important;
  top:auto !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
}

/* Form remains a two-column inner grid, but inside a 50% outer card. */
.contact-form-enhanced{
  grid-column:1 !important;
  grid-row:1 !important;
  display:grid !important;
  grid-template-columns:minmax(190px, .58fr) minmax(0, 1.42fr) !important;
  gap:18px 22px !important;
  overflow:hidden !important;
}

/* In equal-width desktop cards, keep Message balanced and not oversized. */
.contact-message-right textarea{
  min-height:420px !important;
  height:420px !important;
  max-height:420px !important;
}

/* Make Contact Information breathe and fill the matching height gracefully. */
.contact-card h2{
  margin-bottom:22px !important;
}

.contact-card > div,
.contact-card > p,
.contact-card > a{
  flex:0 0 auto !important;
}

.contact-card::after{
  content:"";
  flex:1 1 auto;
  min-height:20px;
}

/* Stack only when there is no comfortable desktop width. */
@media (max-width:900px){
  .contact-grid{
    grid-template-columns:1fr !important;
    align-items:start !important;
  }

  .contact-form-enhanced,
  .contact-card{
    grid-column:1 !important;
    grid-row:auto !important;
    height:auto !important;
    align-self:start !important;
  }

  .contact-card{
    position:static !important;
  }
}

/* Inner form stacks a little earlier inside the now narrower 50% card. */
@media (max-width:1120px) and (min-width:901px){
  .contact-form-enhanced{
    grid-template-columns:1fr !important;
  }

  .contact-message-right textarea{
    min-height:250px !important;
    height:250px !important;
    max-height:250px !important;
  }
}

@media (max-width:640px){
  .contact-form-enhanced{
    grid-template-columns:1fr !important;
  }

  .contact-message-right textarea{
    min-height:230px !important;
    height:230px !important;
    max-height:230px !important;
  }
}



/* =========================
   LNOTARY V23 — Contact card edges + address update
   ========================= */

/* Give the Contact section more side breathing room so card borders do not visually merge with browser edges. */
.contact-grid{
  width:min(1120px, calc(100vw - 72px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
  gap:clamp(26px, 3vw, 44px) !important;
  align-items:stretch !important;
}

/* Make the two rounded cards visibly outlined, matching the stronger block language used elsewhere. */
.contact-form-enhanced,
.contact-card{
  border:1.5px solid rgba(243,217,153,.36) !important;
  background:
    linear-gradient(180deg, rgba(23,18,13,.98), rgba(10,8,6,.99)) !important;
  box-shadow:
    0 0 0 1px rgba(243,217,153,.08) inset,
    0 0 34px rgba(214,173,95,.10),
    0 24px 70px rgba(0,0,0,.42) !important;
  border-radius:28px !important;
}

/* A subtle inner outline makes left/right vertical lines readable on very dark backgrounds. */
.contact-form-enhanced::before,
.contact-card::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:22px;
  border:1px solid rgba(243,217,153,.07);
  pointer-events:none;
}

.contact-form-enhanced,
.contact-card{
  position:relative !important;
  overflow:hidden !important;
}

/* Preserve map dropdown inside the Contact card without clipping. */
.contact-card{
  overflow:visible !important;
}

/* Keep form internal elements above decorative outline. */
.contact-form-enhanced > *,
.contact-card > *{
  position:relative;
  z-index:1;
}

/* On narrower screens, maintain safe side padding but do not crowd the cards. */
@media (max-width:900px){
  .contact-grid{
    width:min(100%, calc(100vw - 36px)) !important;
    grid-template-columns:1fr !important;
  }

  .contact-form-enhanced,
  .contact-card{
    border-radius:24px !important;
  }
}

@media (max-width:520px){
  .contact-grid{
    width:min(100%, calc(100vw - 28px)) !important;
  }
}



/* =========================
   LNOTARY V24 — Professional Book Appointment
   ========================= */

.booking-section .container{
  width:min(1240px, calc(100% - var(--gutter)*2)) !important;
}

.booking-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(300px, 360px);
  gap:clamp(22px,3vw,38px);
  align-items:start;
}

.booking-pro-form{
  display:grid;
  gap:22px;
  min-width:0;
}

.booking-card{
  background:linear-gradient(180deg,rgba(22,18,14,.96),rgba(12,10,8,.98));
  border:1.5px solid rgba(243,217,153,.32);
  border-radius:28px;
  padding:clamp(22px,2.6vw,34px);
  box-shadow:
    0 0 0 1px rgba(243,217,153,.07) inset,
    0 0 34px rgba(214,173,95,.10),
    0 24px 70px rgba(0,0,0,.40);
  min-width:0;
  overflow:hidden;
}

.booking-card-head{
  margin-bottom:18px;
}

.booking-card-head h2,
.booking-summary-card h2{
  font-size:clamp(1.5rem,2vw,2.1rem) !important;
  margin-bottom:10px;
}

.appointment-type-grid{
  display:grid;
  gap:14px;
}

.appointment-type-card{
  position:relative;
  display:grid;
  grid-template-columns:10px minmax(0,1fr);
  grid-template-areas:
    "accent title"
    "accent duration";
  gap:4px 18px;
  align-items:center;
  min-width:0;
  padding:18px 18px 18px 0;
  border:1px solid rgba(214,173,95,.22);
  border-radius:18px;
  background:rgba(255,255,255,.018);
  cursor:pointer;
  overflow:hidden;
}

.appointment-type-card input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.appointment-accent{
  grid-area:accent;
  align-self:stretch;
  width:10px;
  background:linear-gradient(180deg,#f0d08a,#c78b2a);
  box-shadow:0 0 18px rgba(214,173,95,.20);
}

.appointment-title{
  grid-area:title;
  color:#fff1cf;
  font-size:clamp(1.05rem,1.5vw,1.45rem);
  font-weight:900;
  line-height:1.2;
  overflow-wrap:anywhere;
}

.appointment-duration{
  grid-area:duration;
  color:#a99168;
  font-size:.92rem;
  font-weight:800;
}

.appointment-type-card:hover,
.appointment-type-card:has(input:checked){
  border-color:rgba(243,217,153,.56);
  background:rgba(214,173,95,.08);
  box-shadow:
    0 0 0 1px rgba(243,217,153,.12) inset,
    0 0 24px rgba(214,173,95,.14);
}

.booking-schedule-grid,
.booking-contact-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:20px;
}

.booking-contact-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:0;
}

.booking-full{
  grid-column:1 / -1;
}

.booking-pro-form label{
  display:grid;
  gap:8px;
  color:#f1dec0;
  font-weight:800;
  min-width:0;
}

.booking-pro-form input,
.booking-pro-form select,
.booking-pro-form textarea{
  width:100%;
  min-width:0;
  border:1px solid rgba(214,173,95,.24);
  border-radius:14px;
  padding:13px 14px;
  background:#0b0907;
  color:#f5e7cf;
  font:inherit;
  outline:none;
}

.booking-pro-form textarea{
  resize:none;
  min-height:180px;
}

.booking-pro-form input:focus,
.booking-pro-form select:focus,
.booking-pro-form textarea:focus{
  border-color:rgba(243,217,153,.62);
  box-shadow:0 0 20px rgba(214,173,95,.16);
}

.booking-submit-row{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:18px;
}

.booking-disclaimer{
  flex:1 1 280px;
  margin:0;
  color:#a99168;
  font-size:.88rem;
  line-height:1.45;
}

.booking-summary-card{
  position:sticky;
  top:calc(var(--legacy-header-space, 132px) + 18px);
}

.booking-summary-list{
  display:grid;
  gap:12px;
  margin:18px 0 22px;
}

.booking-summary-list div{
  padding:12px 0;
  border-bottom:1px solid rgba(214,173,95,.14);
}

.booking-summary-list dt{
  color:#a99168;
  font-size:.82rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:3px;
}

.booking-summary-list dd{
  margin:0;
  color:#fff1cf;
  font-weight:800;
  overflow-wrap:anywhere;
}

.booking-note{
  padding:14px;
  border:1px solid rgba(214,173,95,.18);
  border-radius:16px;
  background:rgba(214,173,95,.06);
  color:#d8c09a;
}

@media (max-width:980px){
  .booking-layout{
    grid-template-columns:1fr;
  }

  .booking-summary-card{
    position:static;
  }

  .booking-schedule-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:720px){
  .booking-contact-grid{
    grid-template-columns:1fr;
  }

  .booking-submit-row .btn{
    width:100%;
  }
}



/* =========================
   LNOTARY V25 — Booking date + selectable appointment cards
   ========================= */

/* When one appointment type is selected, other options become visually muted. */
.appointment-type-grid.has-selection .appointment-type-card{
  opacity:.42;
  filter:saturate(.55);
  transition:
    opacity .18s ease,
    filter .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease,
    text-shadow .18s ease;
}

.appointment-type-grid.has-selection .appointment-type-card.is-selected{
  opacity:1;
  filter:none;
  border-color:rgba(243,217,153,.78) !important;
  background:rgba(214,173,95,.13) !important;
  box-shadow:
    0 0 0 1px rgba(243,217,153,.24) inset,
    0 0 20px rgba(214,173,95,.34),
    0 0 42px rgba(214,173,95,.16) !important;
}

.appointment-type-grid.has-selection .appointment-type-card.is-selected .appointment-title{
  color:#fff8e9 !important;
  text-shadow:
    0 0 9px rgba(243,217,153,.55),
    0 0 16px rgba(214,173,95,.25);
}

.appointment-type-grid.has-selection .appointment-type-card:not(.is-selected):hover{
  opacity:.72;
  filter:saturate(.8);
}

/* Small instruction below appointment choices. */
.appointment-type-help{
  margin:12px 0 0;
  color:#a99168;
  font-size:.86rem;
  font-weight:700;
  line-height:1.4;
}



/* =========================
   LNOTARY V26 — Fixed booking controls
   ========================= */

/* Appointment cards are now real buttons, not radio labels. */
.appointment-type-card{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:100% !important;
  font:inherit !important;
  text-align:left !important;
  color:inherit !important;
  cursor:pointer !important;
}

.appointment-type-card input{
  display:none !important;
}

/* Reset old :has(input:checked) dependency and use JS classes only. */
.appointment-type-card:has(input:checked){
  border-color:rgba(214,173,95,.22) !important;
  background:rgba(255,255,255,.018) !important;
  box-shadow:none !important;
}

.appointment-type-grid.has-selection .appointment-type-card{
  opacity:.36 !important;
  filter:saturate(.45) brightness(.78) !important;
}

.appointment-type-grid.has-selection .appointment-type-card.is-selected{
  opacity:1 !important;
  filter:none !important;
  border-color:rgba(243,217,153,.78) !important;
  background:rgba(214,173,95,.13) !important;
  box-shadow:
    0 0 0 1px rgba(243,217,153,.24) inset,
    0 0 20px rgba(214,173,95,.34),
    0 0 42px rgba(214,173,95,.16) !important;
}

.appointment-type-card.is-selected .appointment-title{
  color:#fff8e9 !important;
  text-shadow:
    0 0 9px rgba(243,217,153,.55),
    0 0 16px rgba(214,173,95,.25);
}

.appointment-type-card:focus-visible{
  outline:1px solid rgba(243,217,153,.75) !important;
  outline-offset:4px !important;
}

/* Date should feel clickable and open native calendar where supported. */
.booking-pro-form input[type="date"][data-date-picker]{
  cursor:pointer !important;
  color-scheme:dark;
}

.booking-pro-form input[type="date"][data-date-picker]::-webkit-calendar-picker-indicator{
  cursor:pointer;
  opacity:.95;
  filter:invert(84%) sepia(25%) saturate(877%) hue-rotate(357deg) brightness(99%);
}

/* Timezone is a plain information row, not a field/button. */
.timezone-row{
  display:grid;
  gap:8px;
  min-width:0;
}

.timezone-label{
  color:#f1dec0;
  font-weight:800;
}

.timezone-value{
  display:flex;
  align-items:center;
  min-height:46px;
  padding:13px 14px;
  border:1px solid rgba(214,173,95,.16);
  border-radius:14px;
  background:rgba(255,255,255,.015);
  color:#cbb38d;
  font-weight:800;
  cursor:default;
  user-select:text;
}

.timezone-value::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  margin-right:10px;
  background:#d6ad5f;
  box-shadow:0 0 12px rgba(214,173,95,.35);
  flex:0 0 auto;
}



/* =========================
   LNOTARY V27 — Booking database UI
   ========================= */

.booking-system-message{
  display:none;
  margin-top:18px;
  padding:13px 14px;
  border-radius:16px;
  font-size:.92rem;
  font-weight:800;
  line-height:1.45;
  overflow-wrap:anywhere;
}

.booking-system-message.is-info,
.booking-system-message.is-ok,
.booking-system-message.is-error{
  display:block;
}

.booking-system-message.is-info{
  border:1px solid rgba(214,173,95,.26);
  background:rgba(214,173,95,.07);
  color:#f1d89a;
}

.booking-system-message.is-ok{
  border:1px solid rgba(126,214,143,.34);
  background:rgba(126,214,143,.08);
  color:#c9f5d1;
}

.booking-system-message.is-error{
  border:1px solid rgba(255,128,128,.42);
  background:rgba(255,128,128,.08);
  color:#ffd0c8;
}

.booking-pro-form button[disabled]{
  opacity:.62;
  cursor:wait;
}

.booking-pro-form select:disabled{
  opacity:.65;
  cursor:not-allowed;
}



/* =========================
   LNOTARY V30 — Booking disclaimer
   ========================= */

.booking-confirmation-disclaimer{
  margin-top:18px;
  padding:13px 14px;
  border:1px solid rgba(214,173,95,.22);
  border-radius:16px;
  background:rgba(214,173,95,.055);
  color:#cbb38d;
  font-size:.9rem;
  font-weight:800;
  line-height:1.45;
}



/* =========================
   LNOTARY V31 — Home conversion structure + Notary Disclaimer
   ========================= */

.home-hero-pro{
  padding-top:clamp(72px,8vw,118px) !important;
}

.home-trust-card h2{
  font-size:clamp(1.65rem,2.4vw,2.35rem) !important;
}

.home-trust-strip-section{
  padding-top:clamp(34px,4vw,52px) !important;
  padding-bottom:clamp(34px,4vw,52px) !important;
}

.home-trust-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.home-trust-strip div{
  min-width:0;
  padding:18px;
  border:1px solid rgba(214,173,95,.20);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(22,18,14,.88),rgba(12,10,8,.96));
  box-shadow:0 18px 42px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035);
}

.home-trust-strip strong{
  display:block;
  color:#fff1cf;
  font-weight:900;
  margin-bottom:6px;
  overflow-wrap:anywhere;
}

.home-trust-strip span{
  display:block;
  color:#cbb38d;
  font-size:.92rem;
  font-weight:700;
  line-height:1.45;
  overflow-wrap:anywhere;
}

.home-service-preview .card{
  position:relative;
  overflow:hidden;
}

.home-mini-icon{
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
  border:1px solid rgba(243,217,153,.32);
  background:rgba(214,173,95,.09);
  color:#f1d89a;
  font-size:1.25rem;
  font-weight:900;
  box-shadow:0 0 18px rgba(214,173,95,.14);
}

.home-how-grid{
  align-items:start !important;
}

.home-steps{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  min-width:0;
}

.home-step{
  min-width:0;
  padding:20px;
  border:1px solid rgba(214,173,95,.20);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(22,18,14,.94),rgba(12,10,8,.98));
  box-shadow:0 18px 42px rgba(0,0,0,.22);
}

.home-step span{
  width:36px;
  height:36px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
  background:linear-gradient(180deg,#f0d08a,#c78b2a);
  color:#080604;
  font-weight:900;
}

.home-step strong{
  display:block;
  color:#fff1cf;
  font-size:1.08rem;
  margin-bottom:6px;
}

.home-step p{
  margin:0;
  color:#cbb38d;
}

.home-prep-layout{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);
  gap:clamp(20px,3vw,34px);
  align-items:stretch;
}

.home-prep-card,
.home-service-area-card{
  min-width:0;
  padding:clamp(22px,3vw,34px);
  border:1.5px solid rgba(243,217,153,.30);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(22,18,14,.96),rgba(12,10,8,.98));
  box-shadow:
    0 0 0 1px rgba(243,217,153,.06) inset,
    0 22px 58px rgba(0,0,0,.34);
}

.home-check-list{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:grid;
  gap:12px;
}

.home-check-list li{
  position:relative;
  padding-left:28px;
  color:#d8c09a;
  font-weight:700;
  overflow-wrap:anywhere;
}

.home-check-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:#f1d89a;
  font-weight:900;
  text-shadow:0 0 12px rgba(214,173,95,.28);
}

.home-area-tags{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}

.home-area-tags span{
  display:inline-flex;
  padding:8px 11px;
  border-radius:999px;
  border:1px solid rgba(214,173,95,.25);
  background:rgba(214,173,95,.07);
  color:#f1d89a;
  font-size:.86rem;
  font-weight:800;
}

.notary-disclaimer-block{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:20px;
  align-items:start;
  padding:clamp(22px,3vw,34px);
  border:1.5px solid rgba(243,217,153,.34);
  border-radius:28px;
  background:
    radial-gradient(circle at 92% 12%, rgba(214,173,95,.10), transparent 28%),
    linear-gradient(180deg,rgba(22,18,14,.96),rgba(10,8,6,.99));
  box-shadow:
    0 0 0 1px rgba(243,217,153,.06) inset,
    0 24px 70px rgba(0,0,0,.38);
}

.notary-disclaimer-block.compact{
  padding:clamp(20px,2.6vw,28px);
}

.notary-disclaimer-block h2{
  font-size:clamp(1.5rem,2.4vw,2.35rem) !important;
  margin-bottom:12px;
}

.notary-disclaimer-block p:last-child{
  margin-bottom:0;
}

.notary-disclaimer-mark{
  width:58px;
  height:58px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1.5px solid rgba(243,217,153,.42);
  background:rgba(214,173,95,.10);
  color:#f1d89a;
  font-size:1.5rem;
  font-weight:900;
  box-shadow:0 0 22px rgba(214,173,95,.16), inset 0 0 0 1px rgba(243,217,153,.08);
}

.compact-disclaimer-section{
  padding-top:clamp(32px,4vw,54px) !important;
}

.home-final-cta .actions{
  justify-content:center;
}

@media (max-width:980px){
  .home-trust-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .home-prep-layout,
  .home-how-grid{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:720px){
  .home-trust-strip,
  .home-steps{
    grid-template-columns:1fr;
  }

  .notary-disclaimer-block{
    grid-template-columns:1fr;
  }

  .notary-disclaimer-mark{
    width:48px;
    height:48px;
  }
}



/* =========================
   LNOTARY V32 — Home logo + Book Now time fix
   ========================= */

.home-trust-card .hero-seal{
  background:#070604;
  object-fit:cover;
}

/* If API fallback message appears during local/static testing, keep it polished. */
.booking-system-message.is-info{
  border-color:rgba(214,173,95,.24) !important;
  background:rgba(214,173,95,.065) !important;
  color:#f1d89a !important;
}



/* =========================
   LNOTARY V37 — Home photo slider + professional image feature
   ========================= */

.home-hero-slider{
  position:relative;
  min-height:clamp(620px,72vh,820px);
  display:flex;
  align-items:center;
  padding:clamp(86px,9vw,132px) 0 clamp(70px,8vw,108px) !important;
  background:#050403 !important;
  isolation:isolate;
}

.home-hero-slider::after{
  display:none;
}

.home-slider-bg,
.home-slider-shade{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.home-slider-bg{
  z-index:-3;
  background:#050403;
}

.home-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.035);
  animation:legacyHeroFade 21s infinite;
  filter:saturate(.98) contrast(1.04);
}

.home-slide-01{
  animation-delay:0s;
  object-position:center center;
}

.home-slide-02{
  animation-delay:7s;
  object-position:center center;
}

.home-slide-03{
  animation-delay:14s;
  object-position:center center;
}

.home-slider-shade{
  z-index:-2;
  background:
    linear-gradient(90deg,rgba(5,4,3,.96) 0%, rgba(5,4,3,.78) 34%, rgba(5,4,3,.42) 64%, rgba(5,4,3,.70) 100%),
    linear-gradient(180deg,rgba(5,4,3,.62) 0%, rgba(5,4,3,.12) 38%, rgba(5,4,3,.88) 100%);
}

.home-slider-shade::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 78% 20%, rgba(214,173,95,.18), transparent 30%),
    radial-gradient(circle at 12% 70%, rgba(214,173,95,.10), transparent 28%);
  pointer-events:none;
}

.hero-slider-content{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(300px,.78fr);
  gap:clamp(22px,4vw,56px);
  align-items:center;
  position:relative;
  z-index:2;
}

.hero-slider-copy{
  max-width:760px;
  padding:clamp(22px,3vw,34px);
  border:1px solid rgba(243,217,153,.18);
  border-radius:30px;
  background:linear-gradient(160deg,rgba(7,6,5,.72),rgba(18,14,10,.58));
  box-shadow:0 28px 80px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter:blur(8px);
}

.hero-slider-note{
  align-self:end;
  padding:clamp(20px,2.5vw,30px);
  border-radius:26px;
  border:1px solid rgba(243,217,153,.24);
  background:linear-gradient(160deg,rgba(10,8,6,.78),rgba(25,19,13,.62));
  box-shadow:0 26px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(8px);
}

.hero-slider-note h2{
  font-size:clamp(1.45rem,2.2vw,2.1rem) !important;
  margin:0 0 10px;
}

.hero-slider-note p{
  color:#d8c09a;
  margin:0 0 16px;
  font-weight:700;
}

@keyframes legacyHeroFade{
  0%{opacity:0;transform:scale(1.035);}
  7%{opacity:1;}
  30%{opacity:1;}
  38%{opacity:0;transform:scale(1.075);}
  100%{opacity:0;transform:scale(1.075);}
}

.home-professional-feature{
  padding-top:clamp(44px,5vw,72px) !important;
  padding-bottom:clamp(44px,5vw,72px) !important;
}

.home-professional-grid{
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.08fr);
  gap:clamp(24px,4vw,58px);
  align-items:center;
}

.home-professional-media{
  position:relative;
  min-width:0;
  border-radius:30px;
  overflow:hidden;
  border:1.5px solid rgba(243,217,153,.30);
  background:#0b0907;
  box-shadow:0 28px 70px rgba(0,0,0,.42), inset 0 0 0 1px rgba(243,217,153,.06);
}

.home-professional-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 58%,rgba(5,4,3,.48));
  pointer-events:none;
}

.home-professional-media img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center top;
}

.home-professional-copy{
  min-width:0;
  padding:clamp(22px,3vw,34px);
  border:1.5px solid rgba(243,217,153,.22);
  border-radius:28px;
  background:
    radial-gradient(circle at 92% 12%, rgba(214,173,95,.10), transparent 28%),
    linear-gradient(180deg,rgba(22,18,14,.88),rgba(12,10,8,.96));
  box-shadow:0 20px 58px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035);
}

.home-professional-copy p{
  color:#d8c09a;
  font-weight:700;
}

@media (prefers-reduced-motion:reduce){
  .home-slide{
    animation:none;
  }
  .home-slide-01{
    opacity:1;
  }
}

@media (max-width:980px){
  .home-hero-slider{
    min-height:auto;
  }

  .hero-slider-content,
  .home-professional-grid{
    grid-template-columns:1fr;
  }

  .hero-slider-note{
    align-self:auto;
  }

  .home-professional-media{
    max-width:520px;
    margin:0 auto;
  }
}

@media (max-width:720px){
  .home-hero-slider{
    padding-top:clamp(68px,15vw,92px) !important;
  }

  .home-slider-shade{
    background:
      linear-gradient(180deg,rgba(5,4,3,.90) 0%, rgba(5,4,3,.58) 45%, rgba(5,4,3,.92) 100%),
      linear-gradient(90deg,rgba(5,4,3,.88),rgba(5,4,3,.35));
  }

  .home-slide{
    object-position:center center;
  }

  .hero-slider-copy,
  .hero-slider-note{
    border-radius:22px;
  }
}



/* =========================
   LNOTARY V38 — Home slider removed, Services slider added
   ========================= */

/* Home: no large photo slider on the main hero anymore. */
.home-hero-slider,
.home-slider-bg,
.home-slider-shade,
.hero-slider-note{
  display:none !important;
}

/* Keep the single vertical portrait feature as the only Home photo block. */
.home-professional-feature{
  position:relative;
}

/* Services page: photo slider with no overlay blocking faces/elements. */
.services-photo-section{
  padding-top:clamp(42px,5vw,76px) !important;
  padding-bottom:clamp(38px,5vw,70px) !important;
}

.service-photo-slider{
  width:min(1120px,100%);
  margin:0 auto;
}

.service-photo-frame{
  position:relative;
  aspect-ratio:16 / 9;
  min-height:360px;
  overflow:hidden;
  border-radius:30px;
  border:1.5px solid rgba(243,217,153,.30);
  background:#080604;
  box-shadow:
    0 0 0 1px rgba(243,217,153,.07) inset,
    0 28px 80px rgba(0,0,0,.42);
}

.service-photo-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.10)),
    radial-gradient(circle at 82% 18%,rgba(214,173,95,.08),transparent 34%);
}

.service-photo-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0;
  transform:scale(1.015);
  animation:servicePhotoFade 21s infinite ease-in-out;
  will-change:opacity,transform;
}

.service-photo-slide-01{animation-delay:0s;}
.service-photo-slide-02{animation-delay:7s;}
.service-photo-slide-03{animation-delay:14s;}

@keyframes servicePhotoFade{
  0%{opacity:0;transform:scale(1.02);}
  6%{opacity:1;transform:scale(1.01);}
  29%{opacity:1;transform:scale(1.0);}
  35%{opacity:0;transform:scale(1.0);}
  100%{opacity:0;transform:scale(1.02);}
}

/* Caption is BELOW the image, not on top of the photo. */
.service-photo-caption-row{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}

.service-photo-caption-row span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(214,173,95,.22);
  background:rgba(214,173,95,.055);
  color:#f1d89a;
  font-size:.86rem;
  font-weight:800;
  line-height:1.25;
}

@media (max-width:760px){
  .service-photo-frame{
    min-height:260px;
    border-radius:22px;
  }

  .service-photo-caption-row span{
    font-size:.8rem;
  }
}

@media (prefers-reduced-motion:reduce){
  .service-photo-slide{
    animation:none;
    opacity:0;
    transform:none;
  }

  .service-photo-slide-01{
    opacity:1;
  }
}