/* ============================================================
   STELLAN — "Refresh"
   An evolution of the current shopstellan.com: keeps the familiar
   DNA (announcement bar, simple white layout, product grid, linen
   and plant imagery) but drops the wavy container, reworks the nav
   so Interior Design and Visit Us lead, and adds real SEO copy.
   Loads AFTER option-a/css/styles.css (reuses type, .reveal, .x-mark,
   .footer). Palette overridden to a clean, friendly white.
   ============================================================ */

:root {
  --ink:        #232220;
  --ink-soft:   #5b574f;
  --ink-faint:  #9a958b;
  --paper:      #ffffff;
  --paper-soft: #f6f4f1;   /* a whisper warm, friendly, not tan */
  --line:       #e7e3db;
  --sage:       #6f7a63;   /* used sparingly for tiny accents only */
}

/* The STELLAN X background pattern — the signature grid of ✕ marks
   from the current site, on the white ground. */
body {
  background: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='118' height='126'%3E%3Cpath d='M53 57L65 69M65 57L53 69' fill='none' stroke='%23e0ddd6' stroke-width='0.9'/%3E%3C/svg%3E");
  background-position: center top;
}

/* ---- Announcement bar (kept from the current site) ---- */
.announce {
  background: var(--ink); color: var(--paper);
  text-align: center; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 0.6rem 1rem;
}
.announce span { opacity: 0.9; }
.announce .dot { margin: 0 0.9rem; opacity: 0.4; }

/* ---- Header / nav (reworked: Design + Visit Us prominent) ---- */
.rheader {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.rheader-inner {
  max-width: 84rem; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem clamp(1.25rem, 4vw, 3rem);
}
.rbrand {
  font-family: var(--font-display); font-size: 1.55rem; letter-spacing: 0.4em; padding-left: 0.4em; color: var(--ink);
}
.rnav { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.1rem); }
.rnav a {
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
  position: relative; padding: 0.4rem 0;
}
.rnav a:hover { color: var(--ink); }
.rnav a.lead { color: var(--ink); font-weight: 500; }      /* Interior Design emphasized */
.rnav a.lead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.4s;
}
.rnav a.lead:hover::after { transform: scaleX(1); }
.rnav .visit {
  border: 1px solid var(--ink); border-radius: 999px; padding: 0.55rem 1.3rem; color: var(--ink);
  transition: background 0.4s, color 0.4s;
}
.rnav .visit:hover { background: var(--ink); color: var(--paper); }
.rnav-toggle { display: none; background: none; border: 0; width: 30px; height: 22px; position: relative; cursor: pointer; }
.rnav-toggle span { position: absolute; left: 0; right: 0; height: 1.5px; background: var(--ink); transition: transform 0.4s, opacity 0.3s; }
.rnav-toggle span:nth-child(1) { top: 2px; } .rnav-toggle span:nth-child(2) { top: 10px; } .rnav-toggle span:nth-child(3) { top: 18px; }

/* ---- Buttons ---- */
.rbtn { display: inline-block; background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; padding: 0.95rem 2.1rem;
  transition: background 0.4s, color 0.4s; }
.rbtn:hover { background: transparent; color: var(--ink); }
.rbtn--ghost { background: transparent; color: var(--ink); }
.rbtn--ghost:hover { background: var(--ink); color: var(--paper); }
.rbtn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.rbtn--light:hover { background: transparent; color: var(--paper); }

/* ---- Section frame ---- */
.r-wrap { max-width: 84rem; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.r-sec { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.r-eyebrow { font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 1rem; }
.r-h2 { font-family: var(--font-display); font-weight: 400; line-height: 1.08; font-size: clamp(2rem, 4.4vw, 3.2rem); margin: 0; }
.r-h2 em { font-style: italic; }
.r-lead { color: var(--ink-soft); max-width: 52ch; margin-top: 1rem; }
.r-center { text-align: center; }
.r-center .r-lead { margin-inline: auto; }

/* ---- Hero (clean split: content on white + full-strength image) ---- */
.rhero { display: grid; grid-template-columns: 1fr 1fr; min-height: 82svh; align-items: center; }
.rhero-content { padding: clamp(2rem, 6vw, 5rem); max-width: 42rem; margin-left: auto; }
.rhero-content .r-eyebrow { color: var(--ink-soft); }
.rhero-content h1 { font-family: var(--font-display); font-weight: 400; line-height: 1.02; font-size: clamp(2.6rem, 5.2vw, 4.6rem); letter-spacing: -0.01em; margin: 0; }
.rhero-content h1 em { font-style: italic; }
.rhero-content p { color: var(--ink-soft); margin: 1.3rem 0 0; font-size: 1.1rem; max-width: 30rem; }
.rhero-cta { margin-top: 2rem; display: flex; gap: 0.9rem; flex-wrap: wrap; }
.rhero-figure { margin: 0; align-self: stretch; overflow: hidden; background: var(--paper-soft); }
.rhero-figure img { width: 100%; height: 100%; object-fit: cover; }

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

/* ---- Plant / greenery band (kept, but rectangular — NO wave) ---- */
.plant-band { position: relative; min-height: 76svh; display: grid; align-items: center; justify-items: center; text-align: center; overflow: hidden; color: var(--paper); }
.plant-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plant-band::after { content: ""; position: absolute; inset: 0; background: rgba(24,30,20,0.30); }
.plant-band .inner { position: relative; z-index: 2; padding: 3rem 1.5rem; max-width: 40rem; }
.plant-band h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 4vw, 3rem); }
.plant-band p { color: rgba(255,255,255,0.85); margin-top: 1rem; }

/* ---- Design feature (prominent) ---- */
.design-feature { background: var(--paper-soft); }
.design-feature .grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 0; align-items: stretch; }
.design-feature figure { margin: 0; overflow: hidden; min-height: 30rem; background: var(--paper-soft); }
.design-feature figure img { width: 100%; height: 100%; object-fit: cover; }
.design-feature .copy { padding: clamp(2.5rem, 6vw, 5rem); align-self: center; }
.design-feature .copy .r-lead { max-width: 42ch; }
.design-feature .copy .rbtn { margin-top: 1.8rem; }

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

/* ---- About strip ---- */
.about-strip { text-align: center; max-width: 46rem; margin-inline: auto; }
.about-strip blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.3; }
.about-strip .r-lead { margin: 1.4rem auto 0; }

/* ---- Mobile ---- */
@media (max-width: 880px) {
  .rnav { position: fixed; inset: 0 0 0 auto; width: min(80vw, 360px); flex-direction: column; justify-content: center; align-items: flex-start;
    background: var(--paper); padding: 2rem; transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1); box-shadow: -1px 0 0 var(--line); gap: 1.5rem; }
  .rnav.open { transform: none; }
  .rnav a { font-size: 1.05rem; }
  .rnav-toggle { display: block; z-index: 60; }
  body.menu-open .rnav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  body.menu-open .rnav-toggle span:nth-child(2) { opacity: 0; }
  body.menu-open .rnav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .cat-grid { grid-template-columns: 1fr; }
  .design-feature .grid { grid-template-columns: 1fr; }
  .design-feature figure { min-height: 22rem; }
  .visit-grid { grid-template-columns: 1fr; }
  .rhero { grid-template-columns: 1fr; min-height: auto; }
  .rhero-content { margin-left: 0; padding-block: clamp(2.5rem, 8vw, 4rem); order: 2; }
  .rhero-figure { aspect-ratio: 4 / 5; max-height: 56svh; order: 1; }
}

/* ---- Footer: light, with the X pattern (matches the current site) ---- */
.footer {
  background: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='118' height='126'%3E%3Cpath d='M53 57L65 69M65 57L53 69' fill='none' stroke='%23ddd9d2' stroke-width='0.9'/%3E%3C/svg%3E");
  border-top: 1px solid var(--line);
}
.footer .brand-block .brand,
.footer .brand { color: var(--ink); }
.footer .brand-block p { color: var(--ink-soft); }
.footer h4 { color: var(--ink-faint); }
.footer address, .footer address a, .footer-social a { color: var(--ink-soft); }
.footer address a:hover, .footer-social a:hover { color: var(--ink); }
.footer .hours-line { color: var(--ink-faint); }
.footer .big-x { color: var(--line); }
.footer-bottom { border-top-color: var(--line); color: var(--ink-faint); }