@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); }

/* 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;
}
.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);
}

/* ============ 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; }
}