/* Garnet Health — website prototype styles */
:root{
  --garnet:#6E1F2A; --garnet-deep:#5A1822; --gold:#C8A86B; --gold-lt:#D9C193; --gold-deep:#A8884B;
  --ivory:#F8F6F2; --ivory-2:#F5EFE7; --stone:#D8D0C7; --stone-deep:#B7A392; --charcoal:#222;
  --ink-60:rgba(34,34,34,.64); --ink-40:rgba(34,34,34,.42);
  --serif:"Cormorant Garamond",Georgia,serif; --sans:"Montserrat","Helvetica Neue",Arial,sans-serif;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--ivory); color:var(--charcoal); font-family:var(--sans); font-weight:300; -webkit-font-smoothing:antialiased; }
.gh-app{ min-height:100vh; }
.wrap{ max-width:1240px; margin:0 auto; padding:0 40px; }
.eyebrow{ font-family:var(--sans); font-weight:500; text-transform:uppercase; letter-spacing:.34em; font-size:11.5px; color:var(--gold-deep); }
.serif{ font-family:var(--serif); }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--sans); font-weight:500; font-size:12.5px;
      letter-spacing:.16em; text-transform:uppercase; padding:16px 30px; border:1px solid transparent; cursor:pointer;
      transition:.35s cubic-bezier(.2,.7,.3,1); background:var(--garnet); color:#fff; white-space:nowrap; }
.btn:hover{ background:var(--garnet-deep); transform:translateY(-1px); }
.btn.gold{ background:var(--gold); color:#3a2c12; }
.btn.gold:hover{ background:var(--gold-deep); color:#fff; }
.btn.ghost{ background:transparent; border-color:var(--garnet); color:var(--garnet); }
.btn.ghost:hover{ background:var(--garnet); color:#fff; }
.btn.ghost-gold{ background:transparent; border-color:rgba(255,255,255,.4); color:#fff; }
.btn.ghost-gold:hover{ border-color:var(--gold); color:var(--gold-lt); }
.btn.lg{ padding:19px 40px; }
.link-ar{ font-family:var(--sans); font-weight:500; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
          color:var(--garnet); cursor:pointer; display:inline-flex; align-items:center; gap:.5em; background:none; border:none; padding:0; transition:.25s; }
.link-ar:hover{ gap:.9em; color:var(--gold-deep); }

/* nav */
.nav{ position:sticky; top:0; z-index:50; background:rgba(248,246,242,.82); backdrop-filter:blur(14px);
      border-bottom:1px solid rgba(110,31,42,.10); transition:.3s; }
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:84px; gap:24px; }
.nav-links .btn{ padding:14px 22px; background:var(--garnet); color:#fff; }
.nav-links .btn:hover{ background:var(--garnet-deep); }
.nav-links{ display:flex; gap:22px; align-items:center; }
.nav-links button{ background:none; border:none; cursor:pointer; font-family:var(--sans); font-weight:400; font-size:12px;
      letter-spacing:.12em; text-transform:uppercase; color:#4a3f3f; padding:6px 0; position:relative; transition:.25s; }
.nav-links button:hover{ color:var(--garnet); }
.nav-links button.active{ color:var(--garnet); }
.nav-links button.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--gold); }

/* heading helpers */
.h-display{ font-family:var(--serif); font-weight:500; color:var(--garnet); line-height:1.02; letter-spacing:.005em; }
.h-sec{ font-family:var(--serif); font-weight:500; color:var(--garnet); font-size:46px; line-height:1.08; margin:0; }
.body-t{ font-size:15px; line-height:1.9; color:var(--ink-60); font-weight:300; }

/* image placeholder */
.imgph{ position:relative; overflow:hidden; background:linear-gradient(135deg,#e7ded2,#d8cfc4 60%,#cdbfb0); }
.imgph.garnet{ background:linear-gradient(150deg,#7a2330,#5a1822); }
.imgph.stone{ background:linear-gradient(150deg,#c9bdad,#b0a08d); }
.imgph::after{ content:attr(data-label); position:absolute; left:0; right:0; bottom:14px; text-align:center;
      font-family:var(--sans); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.imgph.light::after{ color:rgba(80,60,55,.5); }
.imgph .ic{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:.5; }

/* cards */
.card{ background:#fff; border:1px solid #efe7da; transition:.4s cubic-bezier(.2,.7,.3,1); }
.card:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -30px rgba(110,31,42,.34); border-color:#e6d8c2; }

/* service mini cards */
.svc-mini{ background:#fff; padding:38px 34px 42px; cursor:pointer; transition:.4s cubic-bezier(.2,.7,.3,1); height:100%; }
.svc-mini:hover{ background:var(--ivory); }
.svc-mini .num{ font-size:15px; color:var(--gold-deep); font-style:italic; }
.svc-mini .nm{ font-size:27px; color:var(--garnet); margin-top:14px; line-height:1.15; }
.svc-mini .tg{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--stone-deep); margin-top:10px; }

/* reveal: visible by default (preview env may pause animations); kept as layout wrapper */
.fade-up{ opacity:1; transform:none; }
.fade-up.in{ opacity:1; transform:none; }

footer.site{ background:var(--garnet); color:#e9d9c8; }
.divider{ height:1px; background:#eadfce; }

/* ============================================================
   RESPONSIVE  —  mobile + tablet
   ============================================================ */
html,body{ overflow-x:hidden; }

/* hamburger (hidden on desktop) */
.nav-burger{ display:none; }
.nav-drawer{ display:none; }

@media(max-width:980px){
  .wrap{ padding:0 24px; }
  .nav-links{ display:none; }

  /* burger button */
  .nav-burger{ display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:46px; height:46px; padding:0; background:none; border:none; cursor:pointer; }
  .nav-burger span{ display:block; width:24px; height:1.5px; background:var(--garnet);
    transition:transform .3s ease, opacity .2s ease; }
  .nav-burger.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .nav-burger.open span:nth-child(2){ opacity:0; }
  .nav-burger.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

  /* slide-down drawer */
  .nav-drawer{ display:block; overflow:hidden; max-height:0;
    background:rgba(248,246,242,.99); backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(110,31,42,.12);
    transition:max-height .42s cubic-bezier(.4,0,.2,1); }
  .nav-drawer.open{ max-height:430px; }
  .nav-drawer button{ display:block; width:100%; text-align:left; background:none; border:none;
    padding:17px 24px; font-family:var(--sans); font-weight:400; font-size:12.5px;
    letter-spacing:.16em; text-transform:uppercase; color:#4a3f3f; cursor:pointer;
    border-top:1px solid rgba(110,31,42,.08); }
  .nav-drawer button.active{ color:var(--garnet); }
  .nav-drawer .drawer-cta{ width:auto; display:flex; justify-content:center; text-align:center;
    color:#fff; margin:14px 24px 20px; border-top:none; }

  /* collapse every inline multi-column grid to a single column */
  [style*="grid-template-columns"]{ grid-template-columns:1fr !important; gap:36px !important; }

  /* rein in the largest display headings */
  .h-display{ font-size:46px !important; }
  .h-sec{ font-size:32px !important; }

  /* floating overlap cards → sit inside the frame */
  .float-card{ position:static !important; left:auto !important; right:auto !important;
    bottom:auto !important; margin-top:-30px !important; margin-left:18px !important;
    margin-right:18px !important; max-width:none !important; }
}

@media(max-width:600px){
  .wrap{ padding:0 20px; }

  /* trim the big editorial section paddings */
  [style*="104px 48px"]{ padding:62px 20px !important; }
  [style*="100px 48px"]{ padding:62px 20px !important; }
  [style*="92px 48px"]{ padding:58px 20px !important; }
  [style*="88px 48px 96px"]{ padding:44px 20px 56px !important; }
  [style*="76px 48px 70px"]{ padding:52px 20px 46px !important; }
  [style*="76px 48px 40px"]{ padding:54px 20px 34px !important; }
  [style*="70px 48px 90px"], [style*="70px 48px 96px"]{ padding:48px 20px 64px !important; }
  [style*="30px 48px 60px"]{ padding:24px 20px 40px !important; }
  [style*="20px 48px 90px"]{ padding:18px 20px 64px !important; }
  [style*="26px 48px"]{ padding:22px 20px !important; }

  /* type scale-down for phones */
  .h-display{ font-size:38px !important; }
  .h-sec{ font-size:27px !important; }
  .qt{ font-size:27px !important; line-height:1.4 !important; }
  .svc-row h3{ font-size:30px !important; }

  /* image frames a touch shorter */
  [style*="height: 560"]{ height:380px !important; }
  [style*="height: 540"]{ height:430px !important; }
  [style*="height: 480"]{ height:320px !important; }

  /* stats wrap instead of overflowing */
  .stat-row{ flex-wrap:wrap !important; gap:24px 30px !important; }

  /* buttons sit a little tighter */
  .btn{ font-size:11.5px; padding:14px 22px; }
  .btn.lg{ padding:16px 26px; }
}