
:root{
  --green:#14241a; --green-2:#1f3a2a; --gold:#d6a93c; --gold-2:#f0d37a;
  --cream:#f6f1e4; --ink:#1a2a20; --copper:#b4703f; --muted:#5b6b5f;
  --display:'Cinzel','Trajan Pro',Georgia,serif; --body:'Jost','Segoe UI',Arial,sans-serif; --script:'Cormorant Garamond',Georgia,serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--cream);line-height:1.65;font-size:17px}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.gold{background:linear-gradient(180deg,var(--gold-2),var(--gold) 55%,#a97f1f);-webkit-background-clip:text;background-clip:text;color:transparent}

/* header */
header{position:sticky;top:0;z-index:20;background:rgba(20,36,26,.94);backdrop-filter:blur(8px);border-bottom:1px solid rgba(214,169,60,.35)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--gold-2);font-family:var(--display);font-weight:700;letter-spacing:.12em;font-size:15px}
.brand svg{width:40px;height:40px}
nav{display:flex;gap:26px;align-items:center}
nav a{color:#e9e2cc;text-decoration:none;font-size:15px}
nav a:hover{color:var(--gold-2)}
.btn{display:inline-block;padding:13px 26px;border-radius:2px;font-weight:500;text-decoration:none;letter-spacing:.04em;font-size:16px;transition:background .2s,color .2s,border-color .2s}
.btn-gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:var(--green)}
.btn-gold:hover{background:var(--gold-2)}
.btn-line{border:1px solid var(--gold);color:var(--gold-2)}
.btn-line:hover{background:rgba(214,169,60,.15)}
nav .btn{padding:9px 18px;font-size:14px}

/* hero */
.hero{background:radial-gradient(ellipse at 50% 35%,var(--green-2),var(--green) 70%);color:#f2ecd8;text-align:center;padding:84px 0 96px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(90deg,transparent,var(--gold),var(--copper),var(--gold),transparent)}
.mark{width:150px;margin:0 auto 18px;display:block;filter:drop-shadow(0 6px 16px rgba(0,0,0,.45));animation:rise 1.1s ease-out both}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
h1{font-family:var(--display);font-weight:700;font-size:clamp(38px,8vw,84px);letter-spacing:.04em;line-height:1.05}
.sub{font-family:var(--display);letter-spacing:.42em;color:var(--gold);font-size:clamp(13px,2.4vw,20px);margin:14px 0 4px;display:flex;align-items:center;justify-content:center;gap:16px}
.sub::before,.sub::after{content:"";height:1px;width:clamp(30px,8vw,90px);background:var(--gold)}
.tag{font-family:var(--script);font-style:italic;font-size:clamp(22px,3.6vw,30px);color:var(--gold-2);margin-bottom:34px}
.pill{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:6px 0;border:1px solid var(--gold);border-radius:60px;background:rgba(0,0,0,.25);padding:8px 8px;margin-bottom:38px}
.pill span{padding:2px 22px;font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.pill span+span{border-left:1px solid rgba(214,169,60,.5)}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* sections */
section{padding:84px 0}
h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,4.4vw,44px);color:var(--green);letter-spacing:.03em;line-height:1.15;margin-bottom:14px}
.lead{max-width:640px;color:var(--muted);font-size:18px}
.head{text-align:center;margin-bottom:46px}
.head .lead{margin:0 auto}
.rule{display:block;width:90px;height:3px;margin:18px auto 0;background:linear-gradient(90deg,var(--gold),var(--copper))}

/* brands */
.brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
.brand-tile{background:#fffdf6;border:1px solid #e3d9bd;border-radius:3px;min-height:92px;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;font-family:var(--display);font-weight:700;color:var(--green);letter-spacing:.08em;font-size:17px;transition:border-color .2s,transform .2s}
.brand-tile:hover{border-color:var(--gold);transform:translateY(-2px)}
.brand-tile small{display:block;font-family:var(--body);font-weight:400;font-size:11px;letter-spacing:.16em;color:var(--muted);text-transform:none;margin-top:3px}
.note{text-align:center;margin-top:26px;color:var(--muted);font-size:15px}

/* why */
.why{background:var(--green);color:#efe8d2}
.why h2{color:var(--gold-2)}
.why .lead{color:#c9c6b0}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;border-top:1px solid rgba(214,169,60,.4)}
.pillar{padding:34px 26px 8px 0}
.pillar+.pillar{padding-left:26px;border-left:1px solid rgba(214,169,60,.25)}
.pillar h3{font-family:var(--display);color:var(--gold);font-size:20px;letter-spacing:.06em;margin-bottom:8px}
.pillar p{color:#d5d2bd;font-size:16px}

/* visit */
.visit{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
.visit h2{margin-bottom:22px}
.addr{font-style:normal;font-size:19px;line-height:1.7;margin-bottom:24px;padding-left:18px;border-left:3px solid var(--gold)}
.addr strong{font-family:var(--display);letter-spacing:.06em;color:var(--green)}
.phones{list-style:none;padding:0;margin-bottom:28px}
.phones li{padding:9px 0;border-bottom:1px solid #e3d9bd;display:flex;justify-content:space-between;gap:12px}
.phones a{text-decoration:none;font-weight:500;color:var(--green)}
.phones a:hover{color:var(--copper)}
.card{background:#fffdf6;border:1px solid #e3d9bd;border-top:4px solid var(--gold);padding:30px}
.card h3{font-family:var(--display);color:var(--green);font-size:21px;margin-bottom:6px;letter-spacing:.05em}
.card p{color:var(--muted);margin-bottom:18px;font-size:16px}
.links{display:flex;flex-direction:column;gap:10px}
.links a{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border:1px solid #e3d9bd;background:var(--cream);text-decoration:none;font-weight:500;transition:border-color .2s,background .2s}
.links a:hover{border-color:var(--gold);background:#fff}
.links span{color:var(--muted);font-weight:400;font-size:14px}

/* footer */
footer{background:var(--green);color:#cfcab4;text-align:center;padding:44px 0 36px;border-top:6px solid var(--gold);font-size:15px}
footer .brand{justify-content:center;margin-bottom:10px}
footer p+p{margin-top:6px;opacity:.8}

@media(max-width:820px){
  nav a:not(.btn){display:none}
  .visit{grid-template-columns:1fr;gap:36px}
  .pillar+.pillar{border-left:0;padding-left:0}
  .pillar{border-bottom:1px solid rgba(214,169,60,.2);padding-right:0}
  section{padding:60px 0}
  .pill span+span{border-left:0}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

/* ---- PHP build additions ---- */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.brand img{height:42px;width:auto;display:block}
.mark{width:170px;height:auto}
.about{max-width:780px;margin:0 auto 40px;text-align:center;color:var(--muted);font-size:18px}
.brand-tile{padding:10px}
.brand-tile img{max-width:100%;max-height:74px;width:auto;height:auto;display:block}
.social{background:var(--green);color:#efe8d2}
.social h2{color:var(--gold-2)}
.social .lead{color:#c9c6b0}
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px}
.scard{background:#fffdf6;color:var(--ink);border-top:4px solid var(--gold);padding:22px 16px 20px;text-align:center}
.scard .ic{width:34px;height:34px;color:var(--green);display:block;margin:0 auto 8px}
.scard h3{font-family:var(--display);color:var(--green);font-size:18px;letter-spacing:.05em}
.scard .handle{color:var(--muted);font-size:14px;word-break:break-all}
.scard img{width:150px;height:150px;margin:14px auto 10px;display:block;border:1px solid #e3d9bd}
.scard .scan{font-size:13px;color:var(--muted);margin-bottom:12px}
.scard .go{display:inline-block;padding:9px 20px;background:var(--green);color:var(--gold-2);text-decoration:none;font-size:14px;letter-spacing:.05em}
.scard .go:hover{background:var(--green-2)}
.visit{align-items:start}
.formcard{background:#fffdf6;border:1px solid #e3d9bd;border-top:4px solid var(--gold);padding:30px}
.formcard h2{font-size:28px;margin-bottom:6px}
.formcard>p{color:var(--muted);margin-bottom:18px;font-size:16px}
.field{margin-bottom:14px}
.field label{display:block;font-size:14px;font-weight:500;margin-bottom:4px;color:var(--green)}
.field input,.field textarea{width:100%;font:inherit;padding:12px 14px;border:1px solid #cfc4a2;background:#fff;color:var(--ink);border-radius:2px}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--gold)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.alert{padding:12px 16px;margin-bottom:18px;border-left:4px solid;font-size:15px}
.alert.ok{background:#e8f3e6;border-color:#2e7d32;color:#1b4d1f}
.alert.err{background:#fbe9e7;border-color:#c62828;color:#7a1b17}
.alert ul{padding-left:18px}
button.btn{border:0;cursor:pointer;font-family:inherit}
.mapwrap{margin-top:56px}
.mapwrap iframe{width:100%;height:380px;border:1px solid #e3d9bd;display:block}
.mapwrap p{margin-top:10px;font-size:15px;color:var(--muted)}
footer nav{justify-content:center;margin:14px 0;flex-wrap:wrap}
@media(max-width:820px){.two{grid-template-columns:1fr}.mapwrap{margin-top:40px}}
@media(max-width:820px){footer nav a:not(.btn){display:inline}}
/* header WhatsApp button: keep text readable on hover */
nav a.btn-gold,nav a.btn-gold:hover,nav a.btn-gold:focus-visible{color:var(--green)}
nav a.btn-gold:hover{background:var(--gold-2)}
