/* ============================================================
   STELLAN — "Grove" (3rd option)
   Nature-forward and tactile: a full-bleed green hero, moss/sage
   as the one accent color, fabric and plant texture throughout,
   and a cursor "up close" fabric reveal. Brand stays Mrs Eaves + X.
   Loads AFTER option-a/css/styles.css (type, .reveal, .x-mark, footer).
   ============================================================ */

:root {
  --ink:        #23231e;          /* warm near-black */
  --ink-soft:   #55524b;          /* warm grey */
  --ink-faint:  #8b877d;          /* warm grey */
  --paper:      #fbfbf8;
  --paper-soft: #edebe6;          /* warm stone */
  --line:       #e2e0d9;
  --moss:       #34332d;          /* the one accent — warm slate, near-black (was moss green, per Erica: brand is B&W) */
  --moss-deep:  #201f1b;          /* deep slate for design panel + footer (was moss green) */
  --font-display: "Mrs Eaves", "EB Garamond", Georgia, serif;
  --font-body:    "Karla", system-ui, sans-serif;
  --edge: clamp(1.6rem, 5vw, 5rem);
}

body { background: var(--paper); color: var(--ink); }
body.menu-open { overflow: hidden; }
.show-mobile { display: none; }
@media (max-width: 860px) { .show-desktop { display: none; } .show-mobile { display: inline; } }

/* ---- Header ---- */
.ghead {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(1.1rem, 2.4vw, 1.9rem) var(--edge);
  transition: background 0.5s, padding 0.5s, box-shadow 0.5s;
}
.ghead.solid { background: rgba(251,251,248,0.92); backdrop-filter: blur(8px); padding-top: 0.9rem; padding-bottom: 0.9rem; box-shadow: 0 1px 0 var(--line); }
.gbrand { font-family: var(--font-display); font-size: 1.55rem; letter-spacing: 0.42em; padding-left: 0.42em; color: #fff; transition: color 0.5s; }
.ghead.solid .gbrand { color: var(--ink); }

/* Real STELLAN wordmark (custom-drawn logo, not a font). Masked so it recolors
   with the header/footer text color exactly like the old text did. The "STELLAN"
   text stays in the DOM (hidden) for SEO + screen readers. */
.gbrand, .footer .brand-block .brand {
  display: inline-block; width: 168px; height: 20px; max-width: 46vw;
  background-color: currentColor;
  -webkit-mask: url("../assets/img/brand/stellan-wordmark.svg") no-repeat left center / contain;
          mask: url("../assets/img/brand/stellan-wordmark.svg") no-repeat left center / contain;
  padding-left: 0; letter-spacing: normal; text-indent: -9999px; overflow: hidden; white-space: nowrap;
  transition: background-color 0.5s;
}
@media (max-width: 600px) { .gbrand, .footer .brand-block .brand { width: 140px; height: 17px; } }
.gnav { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.1rem); }
.gnav a { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.85); transition: color 0.4s; }
.ghead.solid .gnav a { color: var(--ink-soft); }
.gnav a:hover { color: #fff; }
.ghead.solid .gnav a:hover { color: var(--ink); }
.gnav .visit { border: 1px solid rgba(255,255,255,0.7); border-radius: 999px; padding: 0.5rem 1.2rem; color: #fff; }
.ghead.solid .gnav .visit { border-color: var(--moss); color: var(--moss); }
.gnav .visit:hover { background: #fff; color: var(--ink); }
.ghead.solid .gnav .visit:hover { background: var(--moss); color: #fff; }
.gnav-toggle { display: none; background: none; border: 0; width: 30px; height: 22px; position: relative; cursor: pointer; }
.gnav-toggle span { position: absolute; left: 0; right: 0; height: 1.5px; background: #fff; transition: 0.4s; }
.ghead.solid .gnav-toggle span { background: var(--ink); }
.gnav-toggle span:nth-child(1){top:2px}.gnav-toggle span:nth-child(2){top:10px}.gnav-toggle span:nth-child(3){top:18px}

/* ---- Buttons ---- */
.gbtn { display: inline-block; background: var(--moss); color: #fff; border: 1px solid var(--moss);
  font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; padding: 1rem 2.3rem;
  transition: background 0.4s, color 0.4s; }
.gbtn:hover { background: transparent; color: var(--moss); }
.gbtn--on-dark { background: rgba(255,255,255,0.95); color: var(--ink); border-color: #fff; }
.gbtn--on-dark:hover { background: transparent; color: #fff; }
.gbtn--ghost { background: transparent; color: var(--moss); }
.gbtn--ghost:hover { background: var(--moss); color: #fff; }

/* ---- Hero (full-bleed green) ---- */
.ghero { position: relative; min-height: 100svh; display: grid; align-items: center; justify-items: center; text-align: center; overflow: hidden; color: #fff; }
.ghero-media { position: absolute; inset: 0; overflow: hidden; }
.ghero-slides { position: absolute; inset: 0; }
.ghero-video, .ghero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ghero-slide { opacity: 0; transition: opacity 1.6s ease; animation: gkenburns 22s ease-in-out infinite alternate; transform-origin: 55% 45%; }
.ghero-slide.is-active { opacity: 1; }
.ghero-video { animation: gkenburns 28s ease-in-out infinite alternate; transform-origin: 55% 45%; }
/* Coastal-vintage grade — kept warm but LETS PHOTO COLOR THROUGH (brand kit: color comes from
   the photography, not the UI; Erica: not too monochromatic). Very light warmth, full saturation. */
.ghero .grade { filter: sepia(0.06) saturate(1.04) contrast(1.02) brightness(0.97); }
.ghero-grain { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px; }
.ghero::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,20,17,0.58), rgba(20,20,17,0.46) 45%, rgba(20,20,17,0.72)),
              radial-gradient(80% 55% at 50% 52%, rgba(20,20,17,0.34), transparent 70%); }
.ghero .inner h1, .ghero .inner p { text-shadow: 0 1px 24px rgba(0,0,0,0.55); }
.ghero .inner .eyebrow { text-shadow: 0 1px 12px rgba(0,0,0,0.6); }
@keyframes gkenburns { from { transform: scale(1.03); } to { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .ghero-video, .ghero-slide { animation: none; } }
.ghero .inner { position: relative; z-index: 2; padding: 7rem var(--edge) 0; max-width: 50rem; }
.ghero .eyebrow { font-size: 0.74rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 1.6rem; }
.ghero h1 { font-family: var(--font-display); font-weight: 400; line-height: 1.0; font-size: clamp(2.8rem, 7vw, 6rem); letter-spacing: -0.01em; margin: 0; }
.ghero h1 em { font-style: italic; }
.ghero p { margin: 1.6rem auto 0; max-width: 34rem; color: rgba(255,255,255,0.9); font-size: 1.12rem; }
.ghero .cta { margin-top: 2.4rem; display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }
.ghero .scroll-cue { position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%); z-index: 2; font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.7); }

/* ---- Section frame ---- */
.g-wrap { max-width: 80rem; margin-inline: auto; padding-inline: var(--edge); }
.g-sec { padding-block: clamp(4rem, 9vw, 8rem); }
.g-eyebrow { font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--moss); margin: 0 0 1rem; }
.g-h2 { font-family: var(--font-display); font-weight: 400; line-height: 1.08; font-size: clamp(2rem, 4.5vw, 3.3rem); margin: 0; }
.g-h2 em { font-style: italic; color: var(--moss); }
.g-lead { color: var(--ink-soft); max-width: 54ch; margin-top: 1.1rem; }
.g-center { text-align: center; } .g-center .g-lead { margin-inline: auto; }

/* X divider with moss */
.g-div { display: flex; align-items: center; gap: 1.4rem; color: var(--line); padding: 0 var(--edge); max-width: 80rem; margin: 0 auto; }
.g-div::before, .g-div::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.g-div .x-mark { width: 22px; height: 22px; color: var(--moss); opacity: 0.7; }

/* ---- Philosophy ---- */
.g-phil { text-align: center; max-width: 52rem; margin-inline: auto; padding-inline: var(--edge); }
.g-phil blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1.3; }
.g-phil blockquote .moss { color: var(--moss); font-style: italic; }

/* ---- Fabric "up close" reveal ---- */
.fabric { background: var(--paper-soft); }
.fabric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-top: clamp(2rem, 4vw, 3rem); }
.fabric-stage { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper); cursor: crosshair; }
.fabric-base, .fabric-top { position: absolute; inset: 0; width: 100%; height: 100%; }
.fabric-base { object-fit: cover; }
.fabric-top { background-size: 200%; background-position: center;
  -webkit-mask-image: radial-gradient(circle 180px at var(--mx,-999px) var(--my,-999px), #000 36%, rgba(0,0,0,0.5) 66%, transparent 100%);
          mask-image: radial-gradient(circle 180px at var(--mx,-999px) var(--my,-999px), #000 36%, rgba(0,0,0,0.5) 66%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.fabric-hint { position: absolute; left: 1rem; bottom: 1rem; z-index: 3; font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; background: rgba(20,24,16,0.45); padding: 0.45rem 0.8rem; pointer-events: none; transition: opacity 0.4s; }
.fabric-stage.on .fabric-hint { opacity: 0; }

/* ---- Shop categories (objects on a shelf) ---- */
.g-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.g-card figure { margin: 0 0 1rem; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-soft); }
.g-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(0.2,0.7,0.2,1); }
.g-card:hover img { transform: scale(1.05); }
.g-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin: 0 0 0.2rem; }
.g-card p { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 0.5rem; }
.g-card .go { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--moss); border-bottom: 1px solid var(--moss); padding-bottom: 2px; }

/* ---- Design feature ---- */
.g-design { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: stretch; }
.g-design figure { margin: 0; overflow: hidden; min-height: 32rem; }
.g-design figure img { width: 100%; height: 100%; object-fit: cover; }
.g-design .copy { background: var(--moss-deep); color: #fff; padding: clamp(2.5rem, 6vw, 5rem); align-self: center; }
.g-design .copy .g-eyebrow { color: rgba(255,255,255,0.7); }
.g-design .copy .g-h2 em { color: #c7cdb4; }
.g-design .copy p { color: rgba(255,255,255,0.82); margin-top: 1rem; max-width: 40ch; }
.g-design .copy .gbtn { margin-top: 1.7rem; background: #fff; color: var(--ink); border-color: #fff; }
.g-design .copy .gbtn:hover { background: transparent; color: #fff; }

/* ---- Visit ---- */
.g-visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2.4rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.g-visit-card { border: 1px solid var(--line); padding: clamp(1.8rem, 3vw, 2.6rem); background: var(--paper); }
.g-visit-card .place { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--moss); }
.g-visit-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; margin: 0.3rem 0 1rem; }
.g-visit-card address { font-style: normal; color: var(--ink-soft); line-height: 1.8; }
.g-visit-card address a { color: var(--ink); border-bottom: 1px solid var(--line); }
.g-visit-card .hours { margin-top: 1rem; font-size: 0.94rem; color: var(--ink-soft); }
.g-visit-card .links { margin-top: 1.4rem; }
.g-visit-card .links a { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--moss); border-bottom: 1px solid var(--moss); padding-bottom: 2px; }

/* ---- Footer tint (reuses base .footer markup) ---- */
.footer { background: var(--moss-deep); }
.footer .big-x { color: rgba(255,255,255,0.4); }

/* Footer signature — the X with both wordmarks (shop + studio) */
.footer-sig { position: relative; max-width: 620px; margin: 0 auto; height: 150px; }
.footer-sig svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.footer-sig .sig-door { position: absolute; top: 50%; transform: translateY(-50%); text-align: center; text-decoration: none; color: #fff; }
.footer-sig .sig-door.left { left: 8%; }
.footer-sig .sig-door.right { right: 5%; }
.footer-sig .sig-wm { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.3em; font-size: 1.15rem; line-height: 1; display: block; padding-left: 0.3em; }
.footer-sig .sig-rule { height: 1px; width: 62px; background: #fff; margin: 6px auto 0; }
.footer-sig .sig-sub { font-family: var(--font-display); letter-spacing: 0.3em; font-size: 0.62rem; display: block; margin-top: 5px; padding-left: 0.3em; }
.footer-sig .sig-go { display: block; font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-top: 10px; transition: color 0.3s; }
.footer-sig .sig-door:hover .sig-go { color: #fff; }
@media (max-width: 600px) { .footer-sig { height: 128px; max-width: 400px; } .footer-sig .sig-wm { font-size: 0.98rem; } }

@media (max-width: 860px) {
  /* backdrop-filter on the solid header makes fixed children anchor to the header,
     which collapses the menu panel after scrolling. Drop the blur on mobile. */
  .ghead.solid { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(251,251,248,0.97); }
  .gnav { position: fixed; inset: 0; width: 100%; height: 100%; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 1.6rem; background: var(--paper); padding: 6rem var(--edge) 2.5rem; transform: translateX(100%); transition: transform 0.45s cubic-bezier(0.2,0.7,0.2,1); overflow-y: auto; z-index: 45; }
  .gnav.open { transform: none; }
  .gnav a, .ghead .gnav a { color: var(--ink-soft); font-size: 1.2rem; letter-spacing: 0.16em; }
  .gnav .visit, .ghead .gnav .visit { border-color: var(--moss); color: var(--moss); padding: 0.55rem 1.4rem; margin-top: 0.4rem; }
  .gnav-toggle { display: block; z-index: 60; }
  body.menu-open .gbrand, body.menu-open .ghead .gbrand { color: var(--ink); }
  body.menu-open .gnav-toggle span { background: var(--ink); }
  body.menu-open .gnav-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  body.menu-open .gnav-toggle span:nth-child(2){opacity:0}
  body.menu-open .gnav-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .fabric-grid { grid-template-columns: 1fr; }
  .fabric-stage { cursor: default; }
  .fabric-top, .fabric-hint { display: none; }
  .g-grid3 { grid-template-columns: 1fr; }
  .g-design { grid-template-columns: 1fr; }
  .g-design .copy { margin-top: 0; }
  .g-visit-grid { grid-template-columns: 1fr; }
}

/* ---- Mission / story prose ---- */
.g-prose { max-width: 46rem; margin: clamp(2rem,4vw,3rem) auto 0; color: var(--ink-soft); }
.g-prose p + p { margin-top: 1.1rem; }
.g-prose .g-signoff { margin-top: 1.6rem; font-family: var(--font-display); font-style: italic; color: var(--ink); font-size: 1.2rem; }
.g-prose .gbtn { margin-top: 1.8rem; }

/* Legal / utility prose (privacy, accessibility) */
.g-legal { max-width: 46rem; margin: clamp(2rem, 4vw, 3rem) auto 0; color: var(--ink-soft); }
.g-legal h2 { font-family: var(--font-display); font-weight: 400; color: var(--ink); font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.2; margin: 2.4rem 0 0.6rem; }
.g-legal h2:first-child { margin-top: 0; }
.g-legal p { margin: 0.8rem 0 0; }
.g-legal ul { margin: 0.8rem 0 0; padding-left: 1.2rem; }
.g-legal li { margin: 0.35rem 0; }
.g-legal a { color: var(--moss); border-bottom: 1px solid var(--line); }
.g-legal .g-legal-meta { font-size: 0.85rem; color: var(--ink-faint); margin-bottom: 0.5rem; }

/* ---- FAQ ---- */
.g-faq { max-width: 50rem; margin: clamp(2rem,4vw,3rem) auto 0; }
.g-faq details { border-top: 1px solid var(--line); }
.g-faq details:last-child { border-bottom: 1px solid var(--line); }
.g-faq summary { list-style: none; cursor: pointer; padding: 1.4rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); }
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq .g-plus { position: relative; width: 16px; height: 16px; flex: 0 0 auto; }
.g-faq .g-plus::before, .g-faq .g-plus::after { content: ""; position: absolute; background: var(--moss); transition: transform 0.35s ease; }
.g-faq .g-plus::before { left: 0; right: 0; top: 7.5px; height: 1px; }
.g-faq .g-plus::after { top: 0; bottom: 0; left: 7.5px; width: 1px; }
.g-faq details[open] .g-plus::after { transform: scaleY(0); }
.g-faq details > p { color: var(--ink-soft); padding: 0 0 1.5rem; max-width: 62ch; }

/* ---- Instagram strip ---- */
.g-insta-follow { color: var(--moss); border-bottom: 1px solid var(--moss); padding-bottom: 2px; }
.g-insta { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(0.5rem,1.2vw,1rem); margin-top: clamp(2rem,4vw,3rem); }
.g-insta a { aspect-ratio: 1; overflow: hidden; display: block; background: var(--paper-soft); }
.g-insta img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.2,0.7,0.2,1); }
.g-insta a:hover img { transform: scale(1.06); }
@media (max-width: 860px) { .g-insta { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .g-insta { grid-template-columns: repeat(2, 1fr); } }

/* ============ Interior pages (design, about, locations, contact) ============ */
/* On interior pages the fixed header stays solid (set in markup); page-hero top padding clears it. */
.g-page-hero { padding: clamp(7rem, 12vw, 9.5rem) var(--edge) clamp(2.5rem, 5vw, 4rem); text-align: center; max-width: 60rem; margin-inline: auto; }
.g-page-hero .breadcrumb { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 1.2rem; }
.g-page-hero .breadcrumb a { color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.g-page-hero h1 { font-family: var(--font-display); font-weight: 400; line-height: 1.02; font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: -0.01em; margin: 0.4rem 0 0; }
.g-page-hero h1 em { font-style: italic; color: var(--moss); }
.g-page-hero .lede { margin: 1.5rem auto 0; max-width: 46ch; color: var(--ink-soft); font-size: 1.12rem; }
.g-page-hero .cta-row { margin-top: 2rem; display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }

.g-band-figure { margin: 0; width: 100%; aspect-ratio: 16 / 7; overflow: hidden; background: var(--paper-soft); }
.g-band-figure img { width: 100%; height: 100%; object-fit: cover; }

.g-prose-split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.g-prose-split h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.12; margin: 0; }
.g-prose-split h2 em { font-style: italic; color: var(--moss); }
.g-owners-photo { margin: clamp(1.4rem, 3vw, 2.2rem) 0 0; width: 100%; max-width: 340px; }
.g-owners-photo img { width: 100%; height: auto; display: block; }
.g-owners-photo figcaption { margin-top: 0.55rem; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 600px) { .g-owners-photo { max-width: 300px; } }
.g-prose-split .body p { color: var(--ink-soft); }
.g-prose-split .body p + p { margin-top: 1.1rem; }

/* Meet the designer */
.g-designer { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(1.6rem, 4vw, 4rem); align-items: center; }
.g-designer-photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-soft); }
.g-designer-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-designer-body h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.12; margin: 0 0 1.2rem; }
.g-designer-body h2 em { font-style: italic; color: var(--moss); }
.g-designer-body p { color: var(--ink-soft); }
.g-designer-body p + p { margin-top: 1.1rem; }
@media (max-width: 860px) { .g-designer { grid-template-columns: 1fr; gap: clamp(1.4rem, 5vw, 2rem); } .g-designer-photo { max-width: 20rem; } }

/* Team — name + hairline rule + role + bio (no photos) */
.g-team-photo { margin: clamp(2.2rem, 4vw, 3.2rem) auto 0; max-width: 880px; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-soft); }
.g-team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-team { display: flex; flex-direction: column; gap: clamp(2.6rem, 5vw, 4rem); margin-top: clamp(2.6rem, 5vw, 3.6rem); }
.g-team-row.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.g-tm-wide { display: block; }
.g-tm-wide .g-tm-body { max-width: 60ch; margin-inline: auto; }
.g-team-member { border-top: 1px solid var(--line); padding-top: 1.6rem; text-align: center; }
.g-tm-photo { display: block; width: 150px; max-width: 100%; aspect-ratio: 1 / 1; height: auto; border-radius: 50%; object-fit: cover; object-position: center; background: var(--paper-soft); margin: 0 auto 1.2rem; }
.g-tm-photo--pending { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 3rem; color: var(--ink-faint); }
.g-team-member p:not(.g-role) { text-align: left; }
@media (max-width: 760px) { .g-team-row.pair { grid-template-columns: 1fr; } }
.g-team-member h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1; margin: 0; }
.g-team-member .g-role { font-style: italic; color: var(--moss); font-size: 0.9rem; letter-spacing: 0.01em; margin: 0.4rem 0 1.1rem; }
.g-team-member p { color: var(--ink-soft); }
.g-team-member p + p { margin-top: 0.9rem; }
@media (max-width: 860px) { .g-team { gap: clamp(2rem, 6vw, 2.8rem); } }

.g-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.g-step { border-top: 1px solid var(--line); padding-top: 1.3rem; }
.g-step .n { font-family: var(--font-display); font-size: 1.9rem; color: var(--moss); display: block; }
.g-step h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; margin: 0.5rem 0; }
.g-step p { color: var(--ink-soft); font-size: 0.98rem; }

.g-svc-list { max-width: 62rem; margin: clamp(2rem, 4vw, 3rem) auto 0; }
.g-svc { border-top: 1px solid var(--line); padding: 1.5rem 0; display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: baseline; }
.g-svc:last-child { border-bottom: 1px solid var(--line); }
.g-svc .x-mark { width: 18px; height: 18px; color: var(--moss); opacity: 0.75; }
.g-svc h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; margin: 0 0 0.3rem; }
.g-svc p { color: var(--ink-soft); font-size: 0.98rem; margin: 0; }

.g-work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 2vw, 1.4rem); margin-top: clamp(2rem, 4vw, 3rem); }
.g-work-grid figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-soft); }
.g-work-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(0.2,0.7,0.2,1); }
.g-work-grid figure:hover img { transform: scale(1.05); }

.g-cta { background: var(--moss-deep); color: #fff; text-align: center; padding: clamp(3.5rem, 8vw, 6rem) var(--edge); }
.g-cta .g-eyebrow { color: rgba(255,255,255,0.7); }
.g-cta h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.08; margin: 0.4rem 0 0; }
.g-cta p { color: rgba(255,255,255,0.8); max-width: 46ch; margin: 1.1rem auto 0; }
.g-cta .cta-row { margin-top: 1.8rem; display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }
.g-cta .gbtn { background: #fff; color: var(--ink); border-color: #fff; }
.g-cta .gbtn:hover { background: transparent; color: #fff; }
.g-cta .gbtn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); }
.g-cta .gbtn--ghost:hover { background: #fff; color: var(--ink); }

@media (max-width: 860px) {
  .g-prose-split { grid-template-columns: 1fr; }
  .g-steps { grid-template-columns: 1fr; }
  .g-work-grid { grid-template-columns: 1fr 1fr; }
  .g-band-figure { aspect-ratio: 4 / 3; }
}

/* ---- Contact page ---- */
.g-contact-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.g-form { display: grid; gap: 1.2rem; }
.g-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.g-field { display: grid; gap: 0.45rem; }
.g-field label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.g-field input, .g-field select, .g-field textarea { font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); padding: 0.85rem 1rem; -webkit-appearance: none; appearance: none; transition: border-color 0.3s; }
.g-field input:focus, .g-field select:focus, .g-field textarea:focus { outline: none; border-color: var(--moss); }
.g-field textarea { min-height: 8rem; resize: vertical; }
.g-form-note { font-size: 0.9rem; color: var(--ink-faint); margin: 0; }
.g-form button { justify-self: start; }
.g-form-success { display: none; padding: clamp(1.4rem,3vw,2rem); border: 1px solid var(--moss); background: var(--paper-soft); }
.g-contact-info h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin: 0.3rem 0 0.6rem; }
.g-contact-info .place { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--moss); }
.g-contact-info address { font-style: normal; color: var(--ink-soft); line-height: 1.8; margin: 0; }
.g-contact-info address a { color: var(--ink); border-bottom: 1px solid var(--line); }
.g-contact-info .hours { font-size: 0.94rem; color: var(--ink-soft); margin: 0.7rem 0 0; }
.g-contact-block + .g-contact-block { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.g-contact-social { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.g-contact-social a { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--moss); margin-right: 1.2rem; border-bottom: 1px solid var(--moss); padding-bottom: 2px; }
@media (max-width: 860px) { .g-contact-grid { grid-template-columns: 1fr; } .g-form .row2 { grid-template-columns: 1fr; } }

/* ---- Journal post tag ---- */
.g-tag { display: inline-block; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--line); padding: 0.3rem 0.6rem; margin-bottom: 0.7rem; }

/* ---- Shop embed (Lightspeed eCom / E-Series mounts here) ---- */
.g-shop-embed { min-height: 60vh; }

/* ============ Lightspeed eCom (Ecwid) store — calming pass, themed to Grove ============
   All selectors scoped to #my-store-122624028 so they never touch the rest of the site.
   Ecwid injects its own CSS at runtime, so overrides need !important. Durable theming
   should also be set in the Lightspeed eCom Design panel (see notes). */
#my-store-122624028 { font-family: var(--font-body); color: var(--ink); }
#my-store-122624028 .ec-store, #my-store-122624028 .ec-store * { font-family: var(--font-body); }

/* Category section titles (Featured Products, Daily Rituals, Dwell, Wear) -> Grove serif,
   with clear separation so it reads as calm sections instead of one dense wall. */
#my-store-122624028 .page-title__name,
#my-store-122624028 .ec-header-h1 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink) !important;
}
/* Each category becomes a clearly separated, calm section instead of one dense wall. */
#my-store-122624028 .ec-page-title {
  margin-top: clamp(2.5rem, 5vw, 4rem) !important;
  padding-top: clamp(2rem, 4vw, 3rem) !important;
  border-top: 1px solid var(--line) !important;
}
#my-store-122624028 .ec-page-title__featured-products { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
#my-store-122624028 .grid__products { row-gap: clamp(1.6rem, 3vw, 2.6rem) !important; }

/* Product tiles: quieter type, calmer spacing */
#my-store-122624028 .grid-product__title,
#my-store-122624028 .grid-product__title-inner {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  color: var(--ink-soft) !important;
  letter-spacing: 0.01em !important;
}
#my-store-122624028 .grid-product__price,
#my-store-122624028 .grid-product__price-amount {
  font-family: var(--font-body) !important;
  color: var(--ink) !important;
  font-weight: 500 !important;
}
#my-store-122624028 .grid-product__image-wrap,
#my-store-122624028 .grid-product__image { background: var(--paper-soft) !important; }

/* Buttons -> Grove slate, square, letterspaced caps */
#my-store-122624028 .form-control__button,
#my-store-122624028 button.form-control__button,
#my-store-122624028 .ec-cart__button,
#my-store-122624028 .details-product-purchase__controls button {
  background: var(--moss) !important;
  border-color: var(--moss) !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}
#my-store-122624028 .form-control__button:hover { background: var(--moss-deep) !important; border-color: var(--moss-deep) !important; }

/* Links / accents -> slate (kills the default Ecwid blue) */
#my-store-122624028 a { color: var(--moss); }
#my-store-122624028 { --ecwid-toolkit-primary-color: #34332d; --color-link: #34332d; }

/* Inputs, search, toolbar, filters -> square + quiet */
#my-store-122624028 .form-control__text,
#my-store-122624028 input.form-control__text,
#my-store-122624028 .ec-store__toolbar input {
  border-radius: 0 !important;
  border-color: var(--line) !important;
  font-family: var(--font-body) !important;
}
#my-store-122624028 .ec-store__toolbar,
#my-store-122624028 .ec-filters,
#my-store-122624028 .ec-filter { border-color: var(--line) !important; }

/* ---- Locations page ---- */
.g-loc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.g-loc figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-soft); }
.g-loc figure img { width: 100%; height: 100%; object-fit: cover; }
.g-loc .g-visit-card { border: 0; padding: 0; background: transparent; }
.g-loc .g-visit-card h3 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.g-loc--reverse figure { order: 2; }
@media (max-width: 860px) { .g-loc { grid-template-columns: 1fr; } .g-loc--reverse figure { order: 0; } }

/* Succulents demoted to a faint background texture (not a focal hero). */
.phil-bg { position: relative; overflow: hidden; }
.phil-bg::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("../assets/img/succulents-green-sm.webp") center/cover no-repeat;
  opacity: 0.2;
}
.phil-bg > * { position: relative; z-index: 1; }

/* ---- Happenings: events + galleries + lightbox ---- */
.g-event { margin: 0 auto; }
.g-event + .g-div { margin: clamp(2.5rem,6vw,4.5rem) auto; }
.g-event-head { text-align: center; max-width: 60ch; margin: 0 auto clamp(1.6rem,3.5vw,2.6rem); }
.g-event-head .g-lead { margin-top: 0.7rem; }
.g-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.5rem,1.4vw,1rem); }
.g-shot { padding: 0; border: 0; margin: 0; background: var(--paper-soft); cursor: pointer; overflow: hidden; aspect-ratio: 1/1; display: block; }
.g-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.g-shot:hover img, .g-shot:focus-visible img { transform: scale(1.06); }
.g-shot:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.g-event-empty { text-align: center; padding: clamp(2.2rem,5vw,3.4rem); border: 1px solid var(--line); color: var(--ink-soft); font-family: var(--font-display); font-style: italic; font-size: 1.2rem; background: var(--paper-soft); }
@media (max-width: 860px) { .g-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .g-gallery { grid-template-columns: repeat(2, 1fr); } }

.g-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(20,19,17,0.92); padding: clamp(1rem,4vw,3rem); }
.g-lightbox.open { display: flex; }
.g-lb-img { max-width: 92vw; max-height: 88vh; object-fit: contain; box-shadow: 0 12px 60px rgba(0,0,0,0.5); }
.g-lb-btn { position: absolute; background: rgba(255,255,255,0.12); color: #fff; border: 0; cursor: pointer; width: 3rem; height: 3rem; border-radius: 50%; font-size: 1.6rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.g-lb-btn:hover { background: rgba(255,255,255,0.28); }
.g-lb-close { top: clamp(0.8rem,2.5vw,1.6rem); right: clamp(0.8rem,2.5vw,1.6rem); }
.g-lb-prev { left: clamp(0.5rem,2vw,1.6rem); top: 50%; transform: translateY(-50%); }
.g-lb-next { right: clamp(0.5rem,2vw,1.6rem); top: 50%; transform: translateY(-50%); }
@media (max-width: 520px) { .g-lb-prev { left: 0.4rem; } .g-lb-next { right: 0.4rem; } }

/* ---- Journal: coming-soon block ---- */
.g-comingsoon { text-align: center; max-width: 60ch; margin: 0 auto; padding: clamp(1rem,3vw,2rem) 0; }
.g-comingsoon .x-mark { display: inline-block; width: 30px; height: 30px; color: var(--moss); margin-bottom: 1rem; }
.g-comingsoon .g-lead { margin-top: 0.8rem; }

/* ---- About: hero triptych (3 slices that form one console image) ---- */
.g-triptych { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 30px); max-width: 1180px; margin: 0 auto; padding-inline: var(--edge); }
.g-triptych figure { margin: 0; aspect-ratio: 9 / 16; overflow: hidden; background: var(--paper-soft); }
.g-triptych img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Journal: article + index feature ---- */
.g-article-meta { color: var(--ink-soft); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 0.8rem; }
.g-article { max-width: 44rem; margin: clamp(2rem,5vw,3.5rem) auto 0; padding: 0 var(--edge); }
.g-article p { font-size: 1.1rem; line-height: 1.85; color: var(--ink); margin: 0 0 1.5rem; }
.g-article p strong { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: 1.18rem; color: var(--ink); }
.g-article .g-article-close { font-family: var(--font-display); font-size: clamp(1.2rem,2.4vw,1.5rem); line-height: 1.5; color: var(--ink); margin-top: 2.2rem; }
.g-article-back { margin-top: 2.8rem; font-size: 0.95rem; }
.g-article-back a { color: var(--moss); border-bottom: 1px solid var(--moss); padding-bottom: 1px; }
.g-journal-feature { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem,4vw,3.5rem); align-items: center; }
.g-journal-feature figure { margin: 0; aspect-ratio: 4/3; overflow: hidden; background: var(--paper-soft); }
.g-journal-feature img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.g-journal-feature:hover img { transform: scale(1.04); }
.g-journal-feature h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem,4vw,2.8rem); line-height: 1.08; margin: 0.5rem 0 0; }
.g-journal-feature h2 em { font-style: italic; color: var(--moss); }
.g-journal-feature p { color: var(--ink-soft); margin: 0.9rem 0 0; max-width: 42ch; }
.g-journal-feature .go { display: inline-block; margin-top: 1.2rem; font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
@media (max-width: 760px) { .g-journal-feature { grid-template-columns: 1fr; } }

/* ---- Nav dropdown (Interior Design → Portfolio / Mood Boards) ---- */
.gnav-item { position: relative; display: inline-flex; align-items: center; gap: 0.3rem; }
.gnav-item > a::after { content: ""; display: inline-block; width: 0.42em; height: 0.42em; margin-left: 0.15em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: 0.7; }
.gnav-sub { position: absolute; top: 100%; left: -0.9rem; display: flex; flex-direction: column; gap: 0.75rem; background: var(--paper); padding: 1rem 1.1rem; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,0.10); min-width: 160px; z-index: 60; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .22s, transform .22s, visibility .22s; }
.gnav-item:hover .gnav-sub, .gnav-item:focus-within .gnav-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.gnav-sub a { color: var(--ink-soft) !important; white-space: nowrap; font-size: 0.72rem; }
.gnav-sub a:hover { color: var(--ink) !important; }
@media (max-width: 860px) {
  .gnav-item { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .gnav-item > a::after { display: none; }
  .gnav-sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; padding: 0.2rem 0 0 1rem; min-width: 0; gap: 0.9rem; }
  .gnav-sub a { font-size: 0.95rem; }
}

/* ---- Project / portfolio ---- */
.g-project-intro { max-width: 44rem; margin: clamp(1.5rem,4vw,2.5rem) auto 0; padding: 0 var(--edge); }
.g-project-intro p { color: var(--ink-soft); font-size: 1.08rem; line-height: 1.8; margin: 0 0 1.2rem; }
.g-project-facts { display: flex; flex-wrap: wrap; gap: clamp(1.2rem,3vw,2.4rem); max-width: 44rem; margin: 1.6rem auto 0; padding: 1.4rem var(--edge) 0; border-top: 1px solid var(--line); }
.g-project-facts div { }
.g-project-facts dt { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--moss); margin: 0 0 0.3rem; }
.g-project-facts dd { margin: 0; font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }