
:root{
  --bg:#ffffff; --text:#0f172a; --accent:#d4a373; --muted:#64748b;
}
*{box-sizing:border-box} body{margin:0;font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;background:#fff;color:var(--text)}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.nav{position:sticky;top:0;background:#fff;border-bottom:1px solid #e5e7eb;z-index:10}
.nav-inner{display:flex;justify-content:space-between;align-items:center;height:62px}
.brand{display:flex;gap:10px;align-items:center}
.logo-img{width:40px;height:40px;border-radius:8px;border:1px solid #e5e7eb;object-fit:contain;background:#fff}
.name{font-weight:700}
.menu{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.menu a{padding:8px 12px;border-radius:10px;text-decoration:none;color:var(--text)}
.menu a:hover{background:#f3f4f6}
.section{padding:28px 0}
.grid{display:grid;gap:12px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:14px}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;border:1px solid #16a34a;background:#22c55e;color:#fff;text-decoration:none}
.btn.secondary{background:#fff;color:#0f172a;border:1px solid #cbd5e1}
.btn.ghost{background:transparent;border:1px dashed #cbd5e1;color:#0f172a}
.notice{background:#fff;border:1px dashed #cbd5e1;color:#334155;padding:10px;border-radius:12px}
input,textarea,select{width:100%;padding:10px;border:1px solid #cbd5e1;border-radius:10px}
.thumb{height:160px;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:12px}
footer{border-top:1px solid #e5e7eb;padding:20px 0;color:#475569}
/* marble section */
.marble{
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.025) 0, rgba(0,0,0,0.025) 12px, rgba(0,0,0,0.015) 12px, rgba(0,0,0,0.015) 24px),
    radial-gradient(2000px 600px at -10% -20%, rgba(0,0,0,0.03), rgba(0,0,0,0) 60%),
    radial-gradient(1200px 800px at 120% 20%, rgba(0,0,0,0.03), rgba(0,0,0,0) 60%),
    #ffffff;
  border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb
}
.logo-hero{display:grid;place-items:center;gap:10px}
.logo-hero img{width:160px;height:160px;border-radius:24px;border:1px solid #e5e7eb;background:#fff;padding:10px}
.verse{text-align:center;color:#334155;font-size:18px;margin-top:6px}
.verse small{display:block;color:#64748b;margin-top:4px}


/* === Visual refresh to match reference style === */

/* Typography scale */
h1{font-size:36px;line-height:1.1;margin:0 0 10px;font-weight:800}
h2{font-size:28px;line-height:1.2;margin:0 0 8px;font-weight:700}
h3{font-size:20px;line-height:1.2;margin:0 0 6px;font-weight:700}

/* Section rhythm */
.section{padding:40px 0}
.hero.section{padding:56px 0}

/* Pill-style nav */
.menu a{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid transparent;
  transition:.15s ease-in-out;
}
.menu a:hover{background:#f3f4f6;border-color:#e5e7eb}
.menu a.active{
  background:#0f172a;color:#fff;border-color:#0f172a;
}

/* Buttons */
.btn{padding:12px 16px;border-radius:999px;font-weight:700;box-shadow:0 6px 16px rgba(16,185,129,.18)}
.btn.secondary{box-shadow:none}
.btn.ghost{border-style:solid;border-color:#e5e7eb}

/* Cards: softer, airy */
.card{
  border-radius:18px;
  border:1px solid #e5e7eb;
  box-shadow:0 6px 24px rgba(2,6,23,.06);
  padding:16px;
}
.kpi{border-radius:18px;box-shadow:0 6px 24px rgba(2,6,23,.06)}

/* Inputs: pillish, comfortable */
input,textarea,select{border-radius:12px;padding:12px}

/* Brand block in nav */
.brand .name{font-weight:800;text-transform:lowercase}
.brand .name::first-letter{text-transform:lowercase}

/* Utility */
.badge{display:inline-block;padding:2px 10px;border-radius:999px;background:#eef2ff;color:#3730a3;font-weight:700;font-size:12px}
.shadow-sm{box-shadow:0 8px 30px rgba(0,0,0,.06)}
.round-xl{border-radius:20px}


/* === Reference-inspired look === */
html,body{background:#ffffff}
.nav{background:#ffffffd9;backdrop-filter:saturate(180%) blur(8px);box-shadow:0 1px 0 #e5e7eb}
.nav-inner{height:66px}
.brand .name{text-transform:capitalize;font-weight:800}
.brand .avatar{width:36px;height:36px;border-radius:999px;display:inline-grid;place-items:center;
  background:#111827;color:#ffffff;font-weight:800;border:1px solid #0b1220}
.brand .logo-img{display:none} /* hide rectangular logo in header to match avatar look */

.hero.section{background:#f8fafc;border-bottom:1px solid #e5e7eb}
.hero h1{font-size:40px;line-height:1.1;font-weight:900;margin-bottom:8px}
.hero p{font-size:18px;color:#475569}

.menu a{padding:10px 14px;border-radius:999px}
.menu a.active{background:#111827;color:#fff;border-color:#111827}
.menu a:hover{background:#f3f4f6}

.btn{border-radius:999px;padding:12px 18px;font-weight:800}
.btn.primary-dark{background:#111827;border-color:#111827;color:#fff;box-shadow:0 8px 22px rgba(17,24,39,.18)}
.btn.outline-dark{background:#fff;border-color:#111827;color:#111827}

.card{border-radius:20px;border:1px solid #e5e7eb;box-shadow:0 10px 30px rgba(2,6,23,.06)}
.kpi{border-radius:20px;box-shadow:0 10px 30px rgba(2,6,23,.06)}

.feature-cards .card h3{margin:0 0 4px 0}
.feature-cards .card p{margin:0;color:#64748b}

/* ensure logo is visible in header */
.brand .logo-img{display:block}

/* push hero content lower */
.hero.section{padding-top:96px;padding-bottom:64px}

/* bubble group for CTAs */
.cta-bubbles{
  display:inline-flex;gap:10px;align-items:center;
  background:#ffffff;border:1px solid #e5e7eb;border-radius:999px;
  padding:10px 12px;box-shadow:0 10px 26px rgba(2,6,23,.08);
  margin-top:26px;
}
.cta-bubbles .btn{box-shadow:none}


/* --- NAV SPACING + BUBBLE LINKS --- */
.nav-inner{height:auto; padding:14px 0; align-items:center;}
.menu{gap:12px}
.menu a{
  padding:12px 16px !important;
  border-radius:999px !important;
  border:1px solid #e5e7eb !important;
  background:#ffffff !important;
}
.menu a:hover{background:#f8fafc !important}
.menu a.active{background:#0f172a !important; color:#ffffff !important; border-color:#0f172a !important}

/* --- LOWER THE HERO --- */
.hero.section{padding-top:140px !important; padding-bottom:72px !important}



/* === Subtle, tasteful upgrades === */
/* Headings with accent underline */
.h-underline{
  position:relative; display:inline-block; padding-bottom:6px;
}
.h-underline:after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg, rgba(212,163,115,.35), rgba(234,179,8,.25));
  border-radius:4px;
}

/* Softer alternating section */
.section.alt{background:#f8fafc}

/* Buttons: gentle gradient + hover */
.btn{background:linear-gradient(180deg, #f2c97b, #d4a373); border-color:#d4a373}
.btn:hover{filter:brightness(1.05)}
.btn.secondary:hover{background:#f8fafc}
.btn.outline-dark:hover{background:#111827;color:#fff}

/* Cards: tiny hover lift */
.card{transition:transform .15s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-2px); box-shadow:0 14px 36px rgba(2,6,23,.08)}

/* Icon circles */
.icon-circle{
  width:40px;height:40px;border-radius:999px;display:inline-grid;place-items:center;
  background:#fff8e6;border:1px solid #fde68a;color:#8b5e34;font-weight:800;
  margin-right:10px; flex:0 0 auto;
}

/* Service tiles */
.svc-tile{display:flex;align-items:flex-start;gap:10px}
.svc-tile h4{margin:0 0 4px 0}
.svc-tile p{margin:0;color:#64748b}

/* Testimonials */
.testi{max-width:800px;margin:0 auto;text-align:center}
.testi blockquote{font-size:18px;line-height:1.5;margin:0}
.testi cite{display:block;margin-top:8px;color:#64748b}


/* gold accent polish */
.menu a:hover{border-color:rgba(212,163,115,.45)}
.badge{background:#fff3d1;color:#8b5e34}

.hidden{display:none !important}


/* --- Prominent alert for Sunday closure --- */
.alert{background:#fff5f5;border:1px solid #fecaca;color:#991b1b;padding:12px;border-radius:12px;font-weight:700;display:flex;gap:8px;align-items:flex-start}
.alert .icon{background:#fee2e2;border-color:#fecaca;color:#b91c1c}
.hidden{display:none !important}
input.error{border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.15)}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
.shake{animation:shake .35s ease}



/* --- Mobile comfort & anti-zoom --- */
html{-webkit-text-size-adjust:100%} /* prevent iOS auto zoom */
img,video{max-width:100%;height:auto}
/* Ensure no layout overflow */
*{max-width:100%}
.hero.section{padding-top:84px;padding-bottom:52px}
/* Make bubble CTA responsive */
.cta-bubbles{flex-wrap:wrap;justify-content:center;width:100%}
.cta-bubbles .btn{font-size:16px;padding:10px 14px}
/* Smaller headings/buttons on narrow screens */
@media(max-width:540px){
  h1{font-size:28px;line-height:1.15}
  h2{font-size:22px}
  .nav-inner{padding:10px 0}
  .menu{gap:8px}
  .menu a{padding:8px 12px}
  .btn{font-size:16px;padding:10px 14px}
  .hero.section{padding-top:72px;padding-bottom:44px}
}
@media(max-width:380px){
  h1{font-size:24px}
  .btn{font-size:15px;padding:9px 12px}
}



/* --- Protect logo from nav pills on small screens --- */
@media(max-width: 820px){
  .nav-inner{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .brand{flex:1 0 100%; display:flex; align-items:center; gap:10px}
  .menu{flex:1 0 100%; display:flex; flex-wrap:wrap; justify-content:center; margin-top:6px}
  .menu a{padding:8px 12px; margin:2px 4px}
}
@media(max-width: 520px){
  .menu{gap:6px; margin-top:8px}
  .menu a{padding:7px 10px; font-size:14px}
  .nav{padding-bottom:6px}
}


/* cache 1760499556 */


/* fade transitions for testimonials */
#t-quote, #t-cite{transition:opacity .4s ease}
.fade-out{opacity:0}
.fade-in{opacity:1}


/* build 1760500963 */

/* build 1760501168 */

/* build 1760501168 */
