/*
  GraphyQBI Gardens – Styles
  Approach: Mobile-first, CSS Grid + Flexbox, restrained palette.
*/

:root {
  --bg:#f5f8f6; --ink:#0c1c14; --muted:#5a6b62;
  --brand:#1e7a53; --brand-ink:#0e2a1e; --accent:#8fd3a5;
  --card:#ffffff; --line:#e1ebe4;
}

* { box-sizing:border-box }
html, body { margin:0; padding:0; }
body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--ink); background:var(--bg); line-height:1.6 }
img { max-width:100%; height:auto; display:block }
a { color:var(--brand); text-decoration:none }
a:hover { text-decoration:underline }

.container { width:100%; max-width:1160px; padding:0 16px; margin:0 auto }

/* Header */
.site-header { position:sticky; top:0; z-index:50; border-bottom:1px solid rgba(255,255,255,.08) }
.header-grid { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:14px 0 }
.brand a { color:#e9f5ee; font-weight:800; letter-spacing:.4px; font-size:1.25rem }
.brand .accent { color:var(--accent) }
.brand-sub { font-size:.75rem; color:#cfe7db }
.primary-nav ul { list-style:none; margin:0; padding:0; display:flex; gap:18px }
.primary-nav a { color:#e9f5ee; font-weight:500 }

.nav-toggle{ background:transparent; border:0; width:44px; height:36px; display:flex; flex-direction:column; justify-content:center; gap:5px; cursor:pointer }
.nav-toggle .hamb{ height:2px; background:#e9f5ee; width:24px; display:block }
@media (min-width: 921px) {
  .nav-toggle { display: none; }
}

/* Mobile menu behavior */
@media (max-width: 920px){
  .primary-nav{ position:fixed; inset:auto 0 0 0; top:56px; background:var(--brand-ink); transform:translateY(100%); transition:transform .28s ease; padding:16px; max-width:100vw; display:none }
  .primary-nav ul{ flex-direction:column; gap:12px }
  .primary-nav.open{ display:block; transform:translateY(0) }
}

/* Hero */
.hero{ color:#fff; background-size:cover; background-position:center; position:relative }
.hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,42,30,.6), rgba(14,42,30,.75)) }
.hero-inner{ position:relative; z-index:1; padding:72px 0 }
.hero-copy{ max-width:640px }
.hero h1{ font-family:"EB Garamond", serif; font-weight:600; font-size:2rem; margin:.25rem 0 1rem }
.hero-cta{ display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 6px }
.hero-bullets{ margin:8px 0 0; padding-left:18px }

/* Sections */
.section{ padding:56px 0 }
.section-head h2, .section h2{ font-family:"EB Garamond", serif; font-weight:600; margin:0 0 8px }
.muted{ color:var(--muted) }

/* Services */
.services-grid{ display:grid; grid-template-columns:1fr; gap:16px }
.card{ background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; display:grid; grid-template-rows:160px auto }
.card-media{ background-size:cover; background-position:center }
.card-body{ padding:16px }
.card h3{ margin:0 0 6px }

@media(min-width:768px){ .services-grid{ grid-template-columns:repeat(3, 1fr) } .card{ grid-template-rows:180px auto } }

/* About */
.about-grid{ display:grid; grid-template-columns:1fr; gap:18px; align-items:center }
.about-copy blockquote{ background:#f1f6f3; border-left:4px solid var(--accent); margin:10px 0; padding:12px }
.about-stats{ display:flex; gap:14px }
.about-stats div{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px 12px; text-align:center }
.about-stats strong{ font-size:1.2rem; display:block }
@media(min-width:900px){ .about-grid{ grid-template-columns:1.1fr .9fr } }

/* Process */
.process-steps{ counter-reset:step; list-style:none; padding:0; margin:0; display:grid; gap:12px }
.process-steps li{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px }
.process-steps h3{ margin:.2rem 0 .4rem }

/* Gallery */
.gallery-grid{ display:grid; grid-template-columns:1fr; gap:14px }
.gallery-grid figure{ margin:0; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden }
.gallery-grid figcaption{ padding:10px; color:var(--muted) }
@media(min-width:768px){ .gallery-grid{ grid-template-columns:repeat(3, 1fr) } }

/* Pricing table responsiveness (MANDATORY base) */
.table-responsive { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100vw; box-sizing:border-box; scrollbar-width:thin; scrollbar-color:#ccc transparent }
.table-responsive::-webkit-scrollbar{ height:8px }
.table-responsive::-webkit-scrollbar-thumb{ background:#ccc; border-radius:4px }
table{ width:100%; border-collapse:collapse; margin:0 }
thead th, td, th{ border-bottom:1px solid var(--line); padding:10px; text-align:left }
tbody tr:nth-child(odd){ background:#fafcfb }
@media (max-width:768px){ .table-large table{ min-width:700px } }
@media (max-width:640px){ .table-medium table{ min-width:500px } }
@media (max-width:480px){ .table-simple table{ min-width:auto !important } }

/* Mobile cards layout */
@media (max-width:640px){
  .table-mobile-cards table, .table-mobile-cards thead, .table-mobile-cards tbody, .table-mobile-cards th, .table-mobile-cards td, .table-mobile-cards tr{ display:block }
  .table-mobile-cards thead{ position:absolute; top:-9999px; left:-9999px }
  .table-mobile-cards tr{ border:1px solid var(--line); margin-bottom:10px; padding:15px; border-radius:8px; background:#fff }
  .table-mobile-cards td{ border:none; position:relative; padding:8px 0 8px 120px !important; text-align:left !important; min-height:30px; display:flex; align-items:center }
  .table-mobile-cards td:before{ content:attr(data-label); position:absolute; left:0; width:110px; padding-right:10px; white-space:nowrap; font-weight:600; font-size:.9em; color:#555 }
}

/* Contact */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:16px }
.order-form{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px }
.order-form label{ font-size:.9rem; display:block; margin:0 0 10px }
.order-form input, .order-form select, .order-form textarea{ width:100%; padding:10px 12px; border-radius:8px; border:1px solid #d6e5dc; background:#f7fbf8 }
.grid-two{ display:grid; grid-template-columns:1fr; gap:10px }
@media(min-width:720px){ .grid-two{ grid-template-columns:1fr 1fr } }
.form-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:999px; font-weight:600; cursor:pointer; border:1px solid transparent }
.btn-primary{ background:var(--brand); color:#fff; border-color:var(--brand) }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6) }
.btn-primary:hover{ filter:brightness(.95) }

/* Map */
.map-embed iframe{ width:100%; height:320px; border:0; border-radius:10px; background:#e8efe9 }

/* Footer */
.site-footer{ background:#0f1f18; color:#cfe7db; margin-top:30px; padding:26px 0 16px }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:16px; align-items:center }
.footer-nav, .legal{ display:flex; gap:14px; flex-wrap:wrap }
.brand-sm{ font-weight:800 }
.tiny{ padding-top:6px }

/* Cookie banner (no horizontal overflow) */
.cookie-banner{ position:fixed; left:0; right:0; bottom:0; background:#0e2a1e; color:#e9f5ee; box-shadow:0 -6px 20px rgba(0,0,0,.18); max-width:100vw; box-sizing:border-box; z-index:60; transform:translateY(8px); opacity:0; transition:transform .25s ease, opacity .25s ease }
.cookie-banner.show{ transform:translateY(0); opacity:1 }
.cookie-inner{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding:12px 16px; flex-wrap:wrap }
.cookie-inner p{ margin:0; max-width:720px }
.cookie-inner a{ color:#a3e7c1; text-decoration:underline }

/* Utilities */
.header-spacer{ height:56px }