@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Libre+Franklin:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ============================================
   Sonostays — Design Tokens
   Warm, approachable, operations-minded partner
   for short-term rental owners.
   ============================================
   FILE STRUCTURE (search for these markers):
   - :root                    design tokens (color, type, layout)
   - Reset                    baseline resets + reduced-motion
   - Layout helpers           .wrap, .section, .eyebrow, section-head
   - Buttons                  .btn, .btn-primary, .btn-secondary
   - Sono Suite top strip     .suite-bar (cross-links to the other two Sono sites)
   - Header                   .sono-site-header, .nav-*, .sono-logo, .founder-strip
   - Hero                     .hero, .hero-grid, .hero-media (bg image/video)
   - Cards / Grids            .card, .grid, .grid-2/3/4/fit
   - Process steps            .process-list, .process-step, .process-num
   - Market cards             .market-card, .tag
   - Team / founder cards     .role-card, .founder-card, .founder-photo
   - Form                     .form-panel, .field
   - CTA band                 .cta-band
   - Footer                   .site-footer, .footer-grid, .footer-logo-badge, .suite-list
   - Page hero (interior)     .page-hero, .crumbs
   - About: owners stat/quote .owners-stat, .owners-quote
   - About: core beliefs      .belief-item
   - About: Sono Suite cards  .suite-card, .suite-icon, .suite-current-tag
   - Responsive               @media breakpoints at 980px / 720px / 480px
   ============================================ */

:root {
  /* Color */
  --color-bg: #F7F2E9;
  --color-bg-alt: #EFE7D6;
  --color-panel: #FFFDF8;
  --color-ink: #1E3A3B;
  --color-ink-soft: #2C4A4C;
  --color-text: #2A2620;
  --color-text-muted: #635A4C;
  --color-accent: #C1873C;
  --color-accent-soft: #E7CC9C;
  --color-clay: #AE5A3E;
  --color-sage: #758768;
  --color-sage-bright: #A9C298;
  --color-line: #DED2B7;
  --color-line-soft: #E9E0CB;

  /* The "Living" in SonoLivingMgmt's wordmark: sage reads fine on the
     light footer/card backgrounds it normally sits on, but needs a
     brighter tint to stay legible on the dark Sono Suite top strip
     (overridden there, see .suite-bar below). */
  --wm-living: var(--color-sage);

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body: "Libre Franklin", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Layout */
  --wrap: 1160px;
  --radius: 10px;
  --radius-lg: 18px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
}

/* ============ Reset ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; color: var(--color-ink); font-weight: 600; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
}

:focus-visible {
  outline: 2px solid var(--color-clay);
  outline-offset: 3px;
}

/* ============ Layout helpers ============ */
.wrap {
  max-width: var(--wrap) !important;
  margin: 0 auto !important;
  padding: 0 1.5rem;
}
.section {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}
.section--alt { background: var(--color-bg-alt); }
.section--ink {
  background: var(--color-ink);
  color: #EFE7D6;
}
.section--ink h1, .section--ink h2, .section--ink h3 { color: #FFFDF8; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--color-clay);
  margin-bottom: 0.9rem;
}

.section-head {
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

/* Desktop-only: let section-head h2/p use the full container width instead
   of a fixed 640px cap (same reasoning as .page-hero above). */
@media (min-width: 981px) {
  .section-head {
    max-width: 100%;
  }
}
.section-head h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.15;
}
.section-head p {
  margin-top: 0.9rem;
  color: var(--color-text-muted);
  font-size: 1.05rem;
}
.section--ink .section-head p { color: #C9BFA6; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--color-clay);
  color: #FFFDF8;
}
.btn-primary:hover { background: #963F29; }
.btn-secondary {
  background: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}
.btn-secondary:hover { background: var(--color-ink); color: #FFFDF8; }
.section--ink .btn-secondary { border-color: #EFE7D6; color: #EFE7D6; }
.section--ink .btn-secondary:hover { background: #EFE7D6; color: var(--color-ink); }

/* ============ Sono Suite top strip ============ */
.suite-bar {
  background: var(--color-ink);
  color: #C9BFA6;
  font-size: 0.82rem;
  --wm-living: var(--color-sage-bright);
}
.suite-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 1.5rem;
}
.suite-bar a { color: #FFFDF8; text-decoration: none; font-weight: 600; }
.suite-bar a:hover { color: var(--color-accent-soft); }
.suite-bar .sep { opacity: 0.4; margin: 0 0.6rem; }
.suite-bar-contact a { font-weight: 500; color: #C9BFA6; }
.suite-bar-contact a:hover { color: var(--color-accent-soft); }

/* ============ Header ============ */
.sono-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 242, 233, 0.97);
}
/* Full-width background without resizing the sticky element itself.
   An absolutely-positioned pseudo-element doesn't affect .sono-site-header's
   own box model, so it can't interfere with sticky positioning the way
   directly resizing .sono-site-header did in earlier attempts. */
.sono-site-header::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: rgba(247, 242, 233, 0.97);
  border-bottom: 1px solid var(--color-line);
  z-index: -1;
}
main {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
.sono-nav-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(1.5rem, 4vw, 3rem) !important;
  text-align: left !important;
  padding: 1.05rem 0;
}
.sono-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  text-align: left !important;
  margin: 0 auto 0 0 !important;
  flex-shrink: 0;
}
.sono-logo .sono-logo-accent { color: var(--color-clay); }
.sono-logo .nav-icon { width: 1.3em; height: 1.3em; color: var(--color-clay); flex-shrink: 0; }
.sono-logo-short { display: none; }

.footer-grid > div:first-child {
  text-align: center;
}

.footer-logo-badge {
  width: 100% !important;
  max-width: 130px !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

.about-badge {
  display: block;
  width: 200px !important;
  max-width: 60% !important;
  height: auto !important;
  margin: 0 auto 2rem;
}

.about-badge--hero {
  width: clamp(160px, 32vw, 320px) !important;
  max-width: 80% !important;
  margin: 0 auto 1.75rem;
}

.sono-nav-links {
  display: flex !important;
  gap: 2rem;
  align-items: center;
}
.sono-nav-links a {
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  transition: color 0.15s ease;
}
.sono-nav-links a:hover, .sono-nav-links a[aria-current="page"] { color: var(--color-clay); }

.sono-nav-actions { display: flex !important; align-items: center; gap: 1.1rem; margin-left: auto !important; }

.sono-nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.4rem;
}
.sono-nav-toggle:hover,
.sono-nav-toggle:focus,
.sono-nav-toggle:active,
.sono-nav-toggle:focus-visible {
  outline: none;
  background: none;
  box-shadow: none;
}
.sono-nav-toggle svg { width: 26px; height: 26px; color: var(--color-ink); }

/* Founder strip — signature element: personal, not a dashboard.
   Now sits as its own section at the top of the hero/page-hero area
   (not inside the sticky header), so it can safely go full-bleed using
   the same shadow-spread technique as the header background — no
   sticky-positioning conflicts to worry about here. */
.founder-strip {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-line);
}
.founder-strip .wrap {
  padding: 0.6rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--color-ink-soft);
}


/* ============ Hero ============ */
.hero {
  padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4rem);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
}
.hero p.lede {
  margin-top: 1.4rem;
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: 46ch;
}
.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.2rem;
}
.hero-panel {
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.2rem) !important;
  width: 100% !important;
  max-width: 100% !important;
}
.hero-panel img { border-radius: var(--radius); margin-bottom: 1.2rem; }
.hero-panel-list li {
  display: flex;
  gap: 0.7rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--color-line-soft);
  font-size: 0.95rem;
  color: var(--color-text-muted);
}
.hero-panel-list li:first-child { border-top: none; }
.hero-panel-list strong { color: var(--color-ink); }

/* Below 720px, the "What you get" card moves to a duplicate copy placed
   after the hero closes (see .hero-panel--mobile / .hero-panel-mobile-wrap
   further down) so the photo hero can be shorter. The in-hero copy is
   hidden on phones and shown again above 720px; the outside copy is the
   reverse. */
.hero-panel--mobile { display: none; }

/* Hero background media (image or video) with overlaid text */
.hero--media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Full-bleed fix: forces the hero to span the true viewport width even if
     an ancestor (e.g. an Elementor section/container set to "Boxed" width)
     is constraining it to a narrower centered column. */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, var(--color-ink) 0%, var(--color-clay) 100%);
}
.hero-media-fill {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
}
/* Phones get a still (.hero-media-mobile) instead of the video
   (.hero-media-video): a landscape clip cropped to a phone's narrow
   aspect loses most of the shot, and a human-picked photo crop looks
   more intentional than an auto-cropped video frame ever does. The
   object-position keeps the cactus and doorway in frame rather than
   defaulting to a dead-center crop that pushes the door out of view
   on very narrow phones. */
.hero-media-mobile { display: none; object-position: 50% 42%; }
@media (max-width: 720px) {
  .hero-media-video { display: none; }
  .hero-media-mobile { display: block; }
}
.hero-media-overlay {
  /* Shading removed — the video now plays at full brightness.
     Text legibility is instead handled by .hero-text-panel below. */
  position: absolute;
  inset: 0;
  background: none;
}
.hero--media .hero-grid {
  position: relative;
  z-index: 1;
}
.hero--media .eyebrow { color: var(--color-accent-soft); }
.hero--media h1 { color: #FFFFFF; }
.hero--media p.lede { color: rgba(255,255,255,0.88); }
.hero--media .btn-secondary { border-color: #FFFFFF; color: #FFFFFF; }
.hero--media .btn-secondary:hover { background: #FFFFFF; color: var(--color-ink); }
.hero-panel { box-shadow: 0 24px 60px rgba(0,0,0,0.18); }

/* Solid tint panel behind the hero text column, sitting on the video.
   Keeps the video itself at full brightness (no gradient overlay) while
   guaranteeing text contrast regardless of which video is active. */
.hero-text-panel {
  width: 100% !important;
  max-width: 100% !important;
  background: rgba(30, 58, 59, 0.62);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  box-shadow: 0 24px 60px rgba(0,0,0,0.18);
}

/* On phones the text card was covering almost the entire photo (it has to
   hold the full paragraph in one stacked column, so it grows to fill
   nearly the whole hero). Two changes, mobile-only -- desktop keeps the
   solid card and full paragraph as-is:
   1) a bottom-anchored gradient instead of a solid tinted card, so the
      top of the photo is fully visible and it only darkens toward the
      bottom where the text actually needs the contrast.
   2) the paragraph is clipped to 3 lines (text is unchanged in the
      markup, just visually truncated) so the panel itself is shorter
      and leaves more photo showing above the buttons. */
@media (max-width: 720px) {
  .hero-text-panel {
    background: linear-gradient(to bottom,
      rgba(30, 58, 59, 0) 0%,
      rgba(30, 58, 59, 0.32) 40%,
      rgba(30, 58, 59, 0.7) 72%,
      rgba(30, 58, 59, 0.86) 100%);
    box-shadow: none;
    border-radius: 0;
    padding: 4.25rem 1.5rem 1.5rem;
  }
  .hero--media h1,
  .hero--media p.lede {
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
  }
  /* The eyebrow sits right at the top of the panel, where the gradient is
     still fully transparent - it's sitting directly on the bright sky in
     the photo, not the darkened part lower down. Light text with a dark
     shadow disappears there, so on mobile it switches to dark ink with a
     soft light halo instead, which reads against both the sky and the
     house below it. */
  .hero--media .eyebrow {
    color: var(--color-ink);
    font-weight: 600;
    text-shadow:
      0 1px 3px rgba(255, 255, 255, 0.75),
      0 0 14px rgba(255, 255, 255, 0.55);
  }
  .hero--media p.lede {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .hero-actions { margin-top: 1.4rem; }
  /* The "What you get" card now renders as a separate block below the
     photo hero instead of stacked inside it - see .hero-panel--mobile. */
  .hero-panel--desktop { display: none; }
  .hero-panel--mobile {
    display: block;
    box-shadow: none;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .hero-panel-mobile-wrap {
    padding: 1.75rem 1.5rem 1.75rem;
  }
}

/* ============ Cards / Grids ============ */
.grid {
  display: grid !important;
  gap: var(--gap) !important;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-fit { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
}
.card p { color: var(--color-text-muted); font-size: 0.97rem; }
.card ul { margin-top: 0.9rem; }
.card ul li {
  position: relative;
  padding-left: 1.1rem;
  margin-top: 0.45rem;
  font-size: 0.93rem;
  color: var(--color-text-muted);
}
.card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ============ Process steps (real sequence — numbering earned) ============ */
.process-list { display: flex; flex-direction: column; }
.process-step {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: clamp(1.25rem, 4vw, 3rem);
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-top: 1px solid var(--color-line);
}
.process-step:last-child { border-bottom: 1px solid var(--color-line); }
.process-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 2.5rem;
  color: var(--color-accent-soft);
  line-height: 1;
}
.process-step h3 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}
.process-step .process-body {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.process-step p.lede-sm {
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

/* ============ Market cards ============ */
.market-card {
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.market-card .market-top {
  padding: 1.75rem 1.75rem 0;
}
.market-card .market-region {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-sage);
}
.market-card h3 { margin: 0.4rem 0 0.8rem; font-size: 1.35rem; }
.market-card .market-body { padding: 0 1.75rem 1.75rem; color: var(--color-text-muted); font-size: 0.96rem; }
.market-card .market-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 1.75rem 1.75rem;
}
.tag {
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
  border-radius: 100px;
  background: var(--color-bg-alt);
  color: var(--color-ink-soft);
  border: 1px solid var(--color-line);
}

/* ============ Team / role cards ============ */
.role-card { text-align: left; }
.role-card .role-title { font-size: 1.05rem; margin-bottom: 0.3rem; }
.role-card .role-desc { font-size: 0.92rem; color: var(--color-text-muted); }

.founder-card { text-align: left; }
.founder-photo {
  width: clamp(96px, 14vw, 160px) !important;
  height: clamp(96px, 14vw, 160px) !important;
  max-width: none !important;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1.1rem;
  border: 1px solid var(--color-line);
}

/* ============ Testimonial / placeholder note ============ */
.placeholder-note {
  border: 1px dashed var(--color-line);
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  margin-top: 1rem;
}

/* ============ Form ============ */
.form-panel {
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--color-ink); }
.field input, .field select, .field textarea {
  border: 1px solid var(--color-line);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: #FFFEFB;
  color: var(--color-text);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--color-clay);
  outline: none;
}
.field textarea { resize: vertical; min-height: 100px; }

/* ============ CTA band ============ */
.cta-band {
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--color-ink);
  color: #EFE7D6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.cta-band h3 { color: #FFFDF8; font-size: clamp(1.4rem, 3vw, 1.9rem); max-width: 30ch; }
.cta-band p { color: #C9BFA6; margin-top: 0.5rem; }

/* ============ Footer ============ */
.site-footer {
  border-top: 1px solid var(--color-line);
  padding: 3rem 0 2rem;
  background: var(--color-bg-alt);
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 2rem;
}
.footer-grid h4 {
  font-family: var(--font-body);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink);
  margin-bottom: 0.9rem;
}
.footer-grid a, .footer-grid li {
  font-size: 0.92rem;
  color: var(--color-text-muted);
}
.footer-grid li { margin-bottom: 0.55rem; }
.footer-grid a:hover { color: var(--color-clay); }

/* Sono Suite footer column: dot-marked list with a "you are here" tag on
   the current site and an external-link arrow on the other two. */
.suite-list { margin: 0; }
.suite-list li { display: flex; gap: 0.65rem; align-items: flex-start; margin-bottom: 0.9rem; }
.suite-list a { display: flex; gap: 0.65rem; align-items: flex-start; text-decoration: none; }
.suite-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 0.4rem; flex-shrink: 0; background: var(--color-clay); }
.suite-list li:nth-child(2) .suite-dot { background: var(--color-sage); }
.suite-list li:nth-child(3) .suite-dot { background: var(--color-accent); }
.suite-list .suite-name { display: block; color: var(--color-ink); font-weight: 600; font-size: 0.94rem; }
.suite-list a:hover .suite-name { color: var(--color-clay); }
.suite-list .suite-sub { display: block; font-size: 0.85rem; color: var(--color-text-muted); }
.suite-tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.5rem;
  border-radius: 20px;
  font-size: 0.68rem;
  background: rgba(174, 90, 62, 0.14);
  color: var(--color-clay);
}
.suite-list .ext-icon { font-size: 0.75rem; opacity: 0.6; }
.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* ============ Page hero (interior pages) ============ */
.page-hero {
  padding: clamp(2.75rem, 6vw, 4rem) 0 clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid var(--color-line);
}
.page-hero h1 { font-size: clamp(2rem, 4.5vw, 2.9rem); }
.page-hero p.lede { margin-top: 1.1rem; color: var(--color-text-muted); font-size: 1.08rem; }

/* On desktop, cap page-hero text at 80% of the container instead of a
   fixed character count — a fixed ch-width looks fine for a short line,
   but becomes an oddly narrow column once a hero has real paragraph
   content (e.g. the About page). Mobile is left uncapped (unaffected). */
@media (min-width: 981px) {
  .page-hero h1, .page-hero p.lede {
    max-width: 100%;
  }
}

/* Breadcrumb at the top of a page-hero */
.crumbs { font-size: 0.85rem; margin-bottom: 1rem; color: var(--color-text-muted); }
.crumbs a { color: var(--color-text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--color-clay); }
.crumbs span { opacity: 0.5; margin: 0 0.45rem; }

/* ============ About page: promise side panel ============ */
.side-card {
  background: linear-gradient(140deg, var(--color-ink) 0%, var(--color-ink-soft) 60%, var(--color-clay) 130%);
  color: #EFE7D6;
  border-radius: var(--radius-lg);
  padding: 2.2rem 2rem;
}

/* ============ About page: owners stat + quote ============ */
.owners-stat {
  background: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 55%, var(--color-clay) 130%);
  border-radius: var(--radius-lg);
  padding: 2.4rem 2.2rem;
  color: #EFE7D6;
}
.owners-stat .big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 4.4rem);
  line-height: 1;
  color: var(--color-accent-soft);
}
.owners-stat .names { font-family: var(--font-display); font-size: 1.35rem; color: #FFFDF8; margin-top: 0.5rem; }
.owners-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--color-ink);
  border-left: 4px solid var(--color-clay);
  padding-left: 1rem;
  margin: 1rem 0 1.25rem;
}

/* ============ About page: core beliefs ============ */
.belief-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--color-line);
}
.belief-item:last-child { border-bottom: 0; }
.belief-item .n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-clay);
  line-height: 1;
  min-width: 2.2rem;
}
.belief-item h3 { font-size: 1.05rem; margin-bottom: 0.25rem; }
.belief-item p { color: var(--color-text-muted); margin: 0; }

/* ============ About page: Sono Suite cards ============ */
.suite-card {
  position: relative;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 2.1rem 1.75rem 1.85rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.suite-card.is-current { border: 2px solid var(--color-clay); }
.suite-card .suite-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #FFFDF8;
  background: var(--card-accent, var(--color-ink));
  margin-bottom: 1.1rem;
}
.suite-card .suite-kicker {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-clay);
}
.suite-card .suite-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--color-ink);
  margin: 0.2rem 0 0.85rem;
}
.suite-card p { color: var(--color-text-muted); }
.suite-card .best-for {
  font-size: 0.9rem;
  background: var(--color-bg-alt);
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  color: var(--color-ink);
  margin: 0.75rem 0 1.25rem;
}
.suite-current-tag {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
  background: rgba(174, 90, 62, 0.12);
  color: var(--color-clay);
}
.suite-card .btn { margin-top: auto; align-self: flex-start; }

/* ============ Responsive ============ */
@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .process-step { grid-template-columns: 1fr; }
  .process-step .process-body { grid-template-columns: 1fr; }
  .suite-bar-contact { display: none; }
}

@media (max-width: 720px) {
  .suite-bar { display: none; }
  .sono-logo-full { display: none; }
  .sono-logo-short { display: inline; }
  .btn {
    white-space: normal;
    padding: 0.7rem 1.15rem;
    font-size: 0.88rem;
    text-align: center;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .sono-nav-links { 
    position: fixed;
    inset: var(--header-h, 108px) 0 0 0;
    z-index: 45;
    background: var(--color-bg);
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
    gap: 1.25rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.25s ease;
  }
  .sono-nav-links.open { transform: translateX(0); }
  .sono-nav-toggle { display: block; }
  .sono-nav-actions { gap: 0.5rem; }
  .sono-nav-row {
    padding: 0.15rem 0 !important;
    justify-content: space-between !important;
  }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid > div:first-child {
    grid-column: 1 / -1;
    margin-bottom: 0.5rem;
  }
  .cta-band { flex-direction: column; align-items: flex-start; }
}