/* =============================================================
   RÊVETALENT - SITE STYLESHEET
   -------------------------------------------------------------
   This file is organized into clearly labeled sections so you
   can find what you need without reading the whole thing:

     1. Design tokens (colors, fonts, spacing)  <-- most edits here
     2. Reset / base element styles
     3. Layout utilities
     4. Buttons
     5. Header / navigation
     6. Home: hero
     7. Home: marquee banner
     8. Home: intro + moodboard collage
     9. Accordion (shared component, used across pages)
     10. Home: "More than content ideas" section
     11. Footer
     12. Responsive adjustments

   To change a COLOR sitewide, edit the CSS variables in section 1.
   To change TEXT, go edit the HTML file directly - copy does not
   live in this file.
   ============================================================= */


/* =============================================================
   1. DESIGN TOKENS
   ============================================================= */

:root {
  /* ---- Brand colors -----------------------------------------
     Sampled from the Squarespace brand reference. If you add a
     new brand color later, add it here as a variable rather than
     hardcoding a hex value elsewhere in this file. */
  --color-cream: #FBF7F1;          /* primary page background */
  --color-cream-card: #FBECEF;     /* blush-tinted cream, used for small note cards */
  --color-lavender: #E1E6FA;       /* pale lavender section background */
  --color-lavender-accent: #EBDBFF;/* brighter lavender, used for accent circles */
  --color-blush: #DCA0A0;          /* secondary accent */
  --color-orange: #F0551B;         /* primary accent - buttons, circles */
  --color-rust: #7A1F06;           /* deep orange/rust - used for some display headings */
  --color-maroon: #58170A;         /* deep accent circle color */
  --color-navy: #14152B;           /* headings, solid buttons */
  --color-navy-soft: #33344F;      /* body copy color (softer than pure navy) */
  --color-white: #FFFFFF;

  /* Home page H1 only - a distinct navy from --color-navy above,
     used nowhere else on the site. */
  --color-hero-heading: #171d3a;

  /* ---- Typography --------------------------------------------
     Dela Gothic One = display/headline face only (used sparingly,
     large sizes). Work Sans = everything else. */
  --font-display: "Dela Gothic One", system-ui, sans-serif;
  --font-body: "Work Sans", system-ui, -apple-system, sans-serif;

  --fs-h1: clamp(2.25rem, 4vw + 1rem, 3.75rem);
  --fs-h2: clamp(1.75rem, 2.5vw + 1rem, 2.75rem);
  --fs-h3: clamp(1.125rem, 1vw + 0.75rem, 1.375rem);
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.8125rem; /* buttons, nav, uppercase labels */

  /* ---- Spacing scale ------------------------------------------- */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* ---- Shape / effects ------------------------------------------ */
  --radius-pill: 999px;
  --radius-soft: 4px;
  --shadow-soft: 0 12px 32px rgba(20, 21, 43, 0.08);
  --border-hairline: 1px solid rgba(20, 21, 43, 0.15);

  --content-max-width: 1200px;

  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0s;
    --transition-base: 0s;
  }
}


/* =============================================================
   2. RESET / BASE STYLES
   ============================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden; /* defensive: html is the root scrolling element in most browsers, so this (not just body's overflow-x) is what actually prevents horizontal page scroll */
}

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

body {
  margin: 0;
  overflow-x: hidden; /* defensive: prevents the rotated marquee's sub-pixel edge overflow from ever producing a horizontal scrollbar */
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600; /* body-copy weight, matched visually to the Squarespace reference */
  line-height: 1.6;
  color: var(--color-navy-soft);
  background-color: var(--color-cream);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--color-navy);
  line-height: 1.15;
  font-weight: 400; /* Dela Gothic One only has one weight */
}

p {
  margin: 0;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
}

/* Visible keyboard focus everywhere - required for WCAG 2.2 AA */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-orange);
  outline-offset: 3px;
  border-radius: var(--radius-soft);
}

/* Skip link - hidden until focused */
.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -100px;
  background: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-soft);
  font-family: var(--font-body);
  font-weight: 600;
  z-index: 1000;
  transition: top var(--transition-base);
}

.skip-link:focus {
  top: var(--space-sm);
}


/* =============================================================
   3. LAYOUT UTILITIES
   ============================================================= */

.wrapper {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.section {
  padding-block: var(--space-2xl);
}

.section--lavender {
  background-color: var(--color-lavender);
}

.section--cream {
  background-color: var(--color-cream);
}

/* Visually-hidden but screen-reader accessible */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-orange);
}


/* =============================================================
   4. BUTTONS
   ============================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn--solid {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.btn--solid:hover {
  background-color: #24254a;
}

/* Home hero CTA only - brand orange, scoped so no other button
   sitewide is affected. Navy text (not white) for WCAG AA contrast:
   white-on-orange measures ~3.4:1 (fails normal-text AA); navy-on-
   orange measures ~5.3:1 (passes comfortably). */
.btn--hero-orange {
  background-color: #f35916;
  color: var(--color-navy);
}

.btn--hero-orange:hover {
  background-color: #d94c0f;
}

.btn--outline {
  background-color: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
}

.btn--outline:hover {
  background-color: var(--color-navy);
  color: var(--color-white);
}


/* =============================================================
   5. HEADER / NAVIGATION
   ============================================================= */

.site-header {
  background-color: var(--color-cream);
  padding-block: var(--space-md);
  position: relative;
  z-index: 100;
}

/* Home page only - lets the hero background image show through the
   header instead of the usual solid cream, so nav and hero read as
   one continuous composition. Scoped to body.page-home so About,
   Services, and Contact keep their normal solid header untouched. */
.page-home .site-header {
  background-color: transparent;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.logo {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-navy);
  text-decoration: none;
  letter-spacing: 0.01em;
}

/* Hamburger toggle button - hidden by default (desktop/tablet).
   Made visible only inside the max-width:600px media query below,
   where its full styling lives. Desktop nav behavior is completely
   unaffected by this button's existence. */
.nav-toggle {
  display: none;
}

/* Primary nav - a plain, always-visible, wrapping list.
   No hamburger / JS toggle: with only four links plus one button,
   this set wraps cleanly on small screens without needing a
   collapsed-menu pattern, which keeps the header fully keyboard-
   and screen-reader-accessible with zero JavaScript. */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.nav__link {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-navy-soft);
  display: inline-block;
  /* padding-top grows the tappable area to meet the WCAG 2.2 AA
     24x24px minimum target size, without touching padding-bottom or
     border-bottom below - so the active-state underline stays in
     exactly the same visual position relative to the text. */
  padding-top: 10px;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.nav__link:hover {
  color: var(--color-navy);
}

.nav__link[aria-current="page"] {
  color: var(--color-navy);
  border-bottom-color: var(--color-orange);
}


/* =============================================================
   6. HOME: HERO
   ============================================================= */

.hero {
  /* Extends this box upward behind the header (see --hero-offset)
     so the background image forms one continuous area across both,
     rather than two separately-cropped instances of the same image
     that could visibly mismatch at the boundary. The negative
     margin-top pulls the box up by --hero-offset; padding-top adds
     the same amount back, so the H1/CTA content inside stays at
     exactly the same visual position as before this change, and
     elements after the hero are unaffected (the two offsets cancel
     out in the layout flow). --hero-offset approximates the
     header's rendered height, which changes when the nav wraps at
     narrow widths - see the media query below. */
  --hero-offset: 105px;
  margin-top: calc(-1 * var(--hero-offset));
  padding-top: calc(var(--space-xl) + var(--hero-offset));
  padding-bottom: var(--space-lg);
  background-image: url("../images/home-hero-bg-v2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.hero__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  max-width: 20ch;
  color: var(--color-hero-heading);
}

.hero__cta {
  flex-shrink: 0;
}


/* =============================================================
   7. HOME: MARQUEE BANNER
   ============================================================= */

/* Decorative rotated line of type, echoing the reference screenshot.
   Purely decorative - the same message is already conveyed by the
   hero heading, so this is hidden from assistive tech and marked
   as presentational. */
.marquee {
  overflow: hidden;
  padding-block: var(--space-lg);
  transform: rotate(-2deg);
  margin-block: var(--space-md);
}

.marquee__track {
  display: flex;
  gap: 2.5rem;
  white-space: nowrap;
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
}

.marquee__item {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw + 1rem, 3rem);
  color: var(--color-navy);
  opacity: 0.15;
}

/* Home-only seamless-loop structure: two identical, explicit groups
   sit back-to-back inside the track (not implicit "half the items"),
   and the whole track animates by exactly one group's width. Because
   both groups are pixel-identical, the moment group 1 fully exits,
   group 2 is already occupying the exact position group 1 started
   at - so the loop reset is invisible; there's always a full group's
   worth of content in view, with the next one already entering as
   the current one exits. New/additive only - .marquee__track's base
   rule (used as-is by Services' "Create With Direction" band) is
   untouched, so that component is completely unaffected. */
.marquee__track--grouped {
  gap: 0;
}

.marquee__group {
  display: flex;
  gap: 2.5rem;
  padding-right: 2.5rem;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}


/* =============================================================
   7b. HOME: MARQUEE SPEED OVERRIDE
   Home's restored slanted marquee runs faster than Services' "Create
   With Direction" band, which still uses the shared .marquee
   component's default 28s pace. Scoped via body.page-home so
   Services is completely unaffected.
   ============================================================= */

.page-home .marquee__track {
  animation-duration: 19s;
}


/* =============================================================
   8. HOME: INTRO + MOODBOARD COLLAGE
   ============================================================= */

.intro {
  position: relative;
  /* overflow:hidden forces the background and border-radius to clip
     together as one strict shape, rather than relying on the
     browser's anti-aliasing to blend a top-only border into rounded
     corners on its own - that ambiguity was the source of both the
     white gap on mobile and the corners not looking symmetrical on
     desktop. Background is now also set directly here (not only via
     the separate .section--lavender class) so there's no ambiguity
     about which box the radius/overflow/background all apply to -
     it's unambiguously the same box. */
  overflow: hidden;
  background-color: var(--color-lavender);
  border-top: 3px solid var(--color-navy);
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
}

.intro__inner {
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: var(--space-2xl);
  align-items: center;
}

.intro__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  margin-bottom: var(--space-md);
}

/* Keeps both heading lines - "You bring the creativity." and "We
   help shape the direction." - on a single line each at every
   desktop width. The grid column (see .intro__inner's 1.35fr/0.85fr
   ratio) handles most widths on its own; this narrower font-size
   just tunes the tightest part of that range (900px grid breakpoint
   up to ~1220px) where full --fs-h2 size doesn't quite fit. Below
   900px the grid stacks to full width; above ~1220px the column is
   wide enough at full size on its own. Sized with extra safety
   margin so it holds up even with real-world font-loading variance. */
@media (min-width: 901px) and (max-width: 1219px) {
  .intro__heading {
    font-size: clamp(1.7rem, 1.3vw + 0.9rem, 2.4rem);
  }
}

.intro__heading > span {
  display: block;
}

/* Hand-drawn-style underline beneath "direction." only. A single
   filled brush-stroke shape (varying thickness, soft rounded ends,
   gentle organic waviness) - not a repeating tiled pattern and not
   a uniform-width stroke, so it reads as drawn rather than geometric.
   Positioned as an absolutely-placed child SVG so it doesn't affect
   layout, word color, or position. Extends slightly beyond the word
   on both sides (see left/width below) and scales with it. */
.intro__heading-highlight {
  position: relative;
}

.intro__heading-highlight__swoosh {
  position: absolute;
  left: -4%;
  width: 108%;
  bottom: -0.22em;
  height: 0.3em;
  min-height: 14px;
  pointer-events: none;
}

/* Guarantees each sentence stays on one line at desktop widths -
   not just via careful font-size math (which should already fit,
   see the media query above), but structurally: nowrap makes a
   mid-sentence break impossible regardless of exact browser/font
   rendering differences. Reverts to normal wrapping below 900px,
   where the grid stacks to full width and the column is no longer
   the constraint - natural wrapping there is fine on small screens. */
@media (min-width: 901px) {
  .intro__heading span {
    white-space: nowrap;
  }
}

.intro__body {
  max-width: 46ch;
  margin-bottom: var(--space-lg);
}

/* Home intro moodboard - single image, natural sizing. No fixed
   height or aspect-ratio, so the full uploaded file always displays
   with zero cropping/distortion regardless of its exact proportions. */
.intro__moodboard {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.intro__body p + p {
  margin-top: var(--space-sm);
}

/* Moodboard collage: a small cluster of overlapping images with
   solid-color circle accents layered on top, echoing the brand
   moodboard. Positions are intentionally asymmetrical. */
.collage {
  position: relative;
  aspect-ratio: 4 / 5;
}

.collage__image {
  position: absolute;
  border-radius: var(--radius-soft);
  box-shadow: var(--shadow-soft);
  object-fit: cover;
  width: 100%;   /* overridden per-variant below; height derives from aspect-ratio */
  height: auto;
}

.collage__image--1 {
  width: 58%;
  aspect-ratio: 3 / 4;
  top: 0;
  left: 0;
  z-index: 2;
}

.collage__image--2 {
  width: 48%;
  aspect-ratio: 4 / 3;
  top: 12%;
  right: 0;
  z-index: 1;
}

.collage__image--3 {
  width: 50%;
  aspect-ratio: 4 / 5;
  bottom: 0;
  right: 6%;
  z-index: 2;
}

.collage__note {
  position: absolute;
  top: 4%;
  left: 46%;
  width: 34%;
  background-color: var(--color-cream-card);
  padding: var(--space-sm);
  border-radius: var(--radius-soft);
  box-shadow: var(--shadow-soft);
  z-index: 3;
  font-family: var(--font-display);
  color: var(--color-rust);
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: center;
}

/* Decorative circle accents - purely presentational */
.dot {
  position: absolute;
  border-radius: 50%;
  z-index: 4;
}

.dot--lavender {
  background-color: var(--color-lavender-accent);
}

.dot--orange {
  background-color: var(--color-orange);
}

.dot--blush {
  background-color: var(--color-blush);
}

.dot--maroon {
  background-color: var(--color-maroon);
}

.collage .dot--1 {
  width: 44px;
  height: 44px;
  top: -6%;
  left: 40%;
}

.collage .dot--2 {
  width: 56px;
  height: 56px;
  top: 38%;
  left: 32%;
}

.collage .dot--3 {
  width: 40px;
  height: 40px;
  bottom: 8%;
  left: 4%;
}

.collage .dot--4 {
  width: 64px;
  height: 64px;
  bottom: -4%;
  right: 24%;
}


/* =============================================================
   9. ACCORDION (shared component - used on Home + Services)
   ============================================================= */

/* Built on native <details>/<summary> so it works without any
   JavaScript, and is operable/announced correctly by default in
   screen readers and via keyboard. */

.accordion-group {
  border-top: var(--border-hairline);
}

.accordion {
  border-bottom: var(--border-hairline);
}

.accordion summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  cursor: pointer;
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion__title {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--color-navy);
}

.accordion__icon {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-navy);
  width: 1.5rem;
  text-align: center;
}

.accordion__icon::before {
  content: "+";
}

.accordion[open] .accordion__icon::before {
  content: "\2212"; /* minus sign */
}

.accordion__panel {
  padding-bottom: var(--space-md);
  max-width: 60ch;
}

.accordion__panel p + p {
  margin-top: var(--space-sm);
}

.accordion[open] .accordion__panel {
  animation: accordion-reveal var(--transition-base);
}

@keyframes accordion-reveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Smaller title variant of the same accordion component, used on
   Services' One-Off section to read as secondary to Monthly Creator
   Strategy without changing the accordion's structure or behavior. */
.accordion-group--compact .accordion__title {
  font-size: 1.0625rem;
}

/* Subtle clarifying note under an accordion panel (not a new content
   block - smaller, muted, slightly indented so it visually reads as
   a footnote rather than another paragraph of primary copy). */
.accordion__note {
  margin-top: var(--space-sm);
  padding-left: var(--space-sm);
  border-left: 2px solid rgba(20, 21, 43, 0.15);
  font-size: var(--fs-small);
  font-weight: 400; /* stays lighter than body copy on purpose - reads as a quiet footnote, not primary text */
  color: var(--color-navy-soft);
  opacity: 0.8;
}


/* =============================================================
   9b. SERVICES: PAGE INTRO
   ============================================================= */

.services-hero {
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Subtle abstract "cloud" texture behind the hero heading - soft,
   low-contrast light-gray shapes on the cream background, sampled
   from the Squarespace reference (values ranged roughly #E0E0E0 to
   pure white, heavier on the left, fading out toward the right).
   Pure CSS: layered radial-gradients + blur, no images required.
   Sits behind the text via z-index; text itself is unaffected. */
.services-hero::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse 45% 55% at 12% 25%, rgba(205, 205, 208, 0.55), transparent 65%),
    radial-gradient(ellipse 35% 45% at 30% 60%, rgba(215, 215, 217, 0.4), transparent 65%),
    radial-gradient(ellipse 40% 35% at 68% 20%, rgba(225, 225, 228, 0.35), transparent 65%),
    radial-gradient(ellipse 55% 40% at 55% 75%, rgba(235, 235, 235, 0.3), transparent 70%);
  filter: blur(38px);
  pointer-events: none;
  z-index: 0;
}

.services-hero > .wrapper {
  position: relative;
  z-index: 1;
}

.services-hero__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  color: var(--color-rust);
  margin-bottom: var(--space-sm);
}

.services-hero__subheading {
  font-size: var(--fs-body-lg);
  max-width: 46ch;
  margin-inline: auto;
}

/* Small decorative accents - deliberately subtle (smaller than the
   dots used in the collage/closing-cta), positioned clear of the
   text so they read as a light editorial touch, not a focal point. */
.services-hero .dot--1.services-hero__dot {
  width: 20px;
  height: 20px;
  top: 18%;
  left: 8%;
  z-index: 2;
}

.services-hero .dot--2.services-hero__dot {
  width: 28px;
  height: 28px;
  bottom: 12%;
  right: 10%;
  z-index: 2;
}


/* =============================================================
   9c. SERVICES: MONTHLY CREATOR STRATEGY (primary offering)
   ============================================================= */

.monthly__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

/* Single moodboard image (replaces the earlier 3-photo layered
   placeholder). Deliberately no fixed height or aspect-ratio, no
   border-radius, no shadow - width scales responsively and height
   follows the image's own natural ratio, so it can never be cropped
   or distorted, and nothing is visually altered from the source file. */
.monthly__moodboard {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.service-heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--color-rust);
  margin-bottom: var(--space-sm);
}

.service-subheading {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: var(--space-md);
}

.service-intro p + p {
  margin-top: var(--space-sm);
}

.service-intro {
  margin-bottom: var(--space-lg);
}


/* =============================================================
   9d. SERVICES: ONE-OFF SERVICES (secondary offering)
   ============================================================= */

.oneoff {
  /* Deliberately no collage/imagery and a tighter max-width than
     Monthly Creator Strategy - scale and color, not cards or icons,
     are what signal this is the lighter, secondary offering. */
}

.oneoff__inner {
  max-width: 720px;
}

.oneoff__heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  color: var(--color-rust);
  margin-bottom: var(--space-sm);
}

.oneoff__intro {
  max-width: 60ch;
  margin-bottom: var(--space-lg);
}


/* =============================================================
   9d-2. SERVICES: MORE WAYS WE CAN HELP (two-column section)
   Reuses .accordion-group/.accordion/.accordion__title/
   .accordion__icon/.accordion__panel exactly as defined above -
   no new accordion system, only new classes for the section
   chrome (heading, columns, divider, sparkle accent, note).
   ============================================================= */

.more-ways {
  position: relative;
}

.more-ways__intro {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.more-ways__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--color-rust);
  margin-bottom: var(--space-sm);
}

.more-ways__subheading {
  max-width: 60ch;
  margin-inline: auto;
  font-size: var(--fs-body-lg);
  color: var(--color-navy-soft);
}

.more-ways__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Row 1 = each column's header area (heading/intro), sized to
     whichever column's header content is tallest. Row 2 = the
     accordion list. Because both columns share these same row
     tracks via subgrid below, the accordion lists always start at
     the exact same Y position, with zero manual spacer margins.
     column-gap keeps the intentional spacing between the two
     columns; row-gap is deliberately much smaller - it's just the
     normal breathing room between a column's intro text and its
     first accordion, not a divider. */
  grid-template-rows: auto 1fr;
  column-gap: var(--space-2xl);
  row-gap: var(--space-md);
}

.more-ways__column {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
}

/* Subtle vertical divider between the two columns on desktop only -
   a hairline border, matching the thin-line language already used
   throughout the site's accordions/dividers. Removed on mobile via
   the responsive rules below, where columns stack instead. */
/* Divider intentionally removed - column widths, gap, and alignment
   are all controlled elsewhere (.more-ways__columns) and untouched.
   Class kept in the HTML/CSS in case a divider is wanted again later. */
.more-ways__column--right {
}

.more-ways__column-heading {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--color-rust);
  margin-bottom: var(--space-sm);
}

.more-ways__sparkle {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.more-ways__column-intro {
  color: var(--color-navy-soft);
  margin-bottom: var(--space-xs);
}

.more-ways__column-intro em {
  font-style: italic;
}

.more-ways .dot {
  z-index: 1;
}

.more-ways .dot--1.more-ways__dot {
  width: 20px;
  height: 20px;
  top: 6%;
  left: 4%;
}

.more-ways .dot--2.more-ways__dot {
  width: 28px;
  height: 28px;
  top: 8%;
  right: 6%;
}

@media (max-width: 600px) {
  .more-ways__dot {
    display: none;
  }
}

@media (max-width: 900px) {
  .more-ways__columns {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: var(--space-2xl);
  }

  .more-ways__column {
    display: block;
  }
}


/* =============================================================
   9e. CONTACT: "LET'S CHAT" TWO-COLUMN + FORM
   ============================================================= */

.contact__inner {
  display: grid;
  grid-template-columns: 0.9fr 1.2fr;
  gap: var(--space-2xl);
  align-items: start;
}

.contact-intro__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  margin-bottom: var(--space-md);
}

.contact-intro__body {
  max-width: 34ch;
  font-size: var(--fs-body-lg);
  font-weight: 600;
  color: var(--color-navy);
}

/* Form - integrated directly into the lavender page background:
   no card, no fill, no box-shadow around the form itself. */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.form-group__heading {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body-lg);
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
}

.form-row {
  display: flex;
  gap: var(--space-md);
}

.form-row .form-field {
  flex: 1;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.form-label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--color-navy);
}

.form-label__hint {
  font-weight: 500;
  color: var(--color-navy-soft);
  text-transform: none;
  letter-spacing: normal;
}

/* Pill-style single-line inputs - thin navy outline, no fill,
   fully rounded, matching the Squarespace reference. */
.form-input {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-navy);
  background-color: transparent;
  border: 2px solid var(--color-navy);
  border-radius: var(--radius-pill);
  padding: var(--space-sm) var(--space-md);
  width: 100%;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: rgba(20, 21, 43, 0.62); /* darkened from 0.45 to meet WCAG AA contrast (was 2.94:1, now ~4.8:1) */
}

/* Textarea can't be a pill without looking odd multi-line, so it
   gets a softer, still-rounded rectangle instead - same outline
   treatment, consistent with the rest of the form. */
.form-textarea {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-navy);
  background-color: transparent;
  border: 2px solid var(--color-navy);
  border-radius: 24px;
  padding: var(--space-md);
  width: 100%;
  min-height: 140px;
  resize: vertical;
}

/* "What are you interested in?" - a fieldset of radio options,
   restyled with accent-color rather than a custom-built control,
   so native keyboard/screen-reader behavior is preserved exactly. */
.form-fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.form-legend {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--color-navy);
  padding: 0;
  margin-bottom: var(--space-sm);
}

.form-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.form-radio-option {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.form-radio-option label {
  flex: 1;
  padding-block: 10px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-navy);
}

.form-radio-option input[type="radio"] {
  width: 1.15em;
  height: 1.15em;
  accent-color: var(--color-navy);
  flex-shrink: 0;
}

.form-submit {
  align-self: flex-start;
  border: none;
}

.form-required-note {
  font-size: var(--fs-small);
  color: var(--color-navy-soft);
}

/* Formspree honeypot field - deliberately hidden from sighted users.
   (The corresponding input also carries aria-hidden="true" and
   tabindex="-1" in the HTML, so it's fully excluded from screen
   readers and keyboard tab order too - real visitors never
   encounter this field at all, by design.) */
.honeypot-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -9999px;
}


/* =============================================================
   10. HOME: "MORE THAN CONTENT IDEAS" SECTION
   ============================================================= */

.more-ideas__inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-2xl);
  align-items: start;
}

.more-ideas__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  margin-bottom: var(--space-lg);
  max-width: 16ch;
}


/* =============================================================
   10a. ABOUT: PAGE HEADER
   Reuses the Services page hero's structure and styling (same cloud
   texture, same spacing/typography scale, same dot-accent pattern)
   via new about-hero classes, so .services-hero itself is untouched.
   Only the heading color differs: navy here vs. rust on Services,
   per the explicit brand-color requirement for this page.
   ============================================================= */

.about-hero {
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Same subtle cloud texture as the Services hero, copied exactly for
   visual consistency between the two page headers. */
.about-hero::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse 45% 55% at 12% 25%, rgba(205, 205, 208, 0.55), transparent 65%),
    radial-gradient(ellipse 35% 45% at 30% 60%, rgba(215, 215, 217, 0.4), transparent 65%),
    radial-gradient(ellipse 40% 35% at 68% 20%, rgba(225, 225, 228, 0.35), transparent 65%),
    radial-gradient(ellipse 55% 40% at 55% 75%, rgba(235, 235, 235, 0.3), transparent 70%);
  filter: blur(38px);
  pointer-events: none;
  z-index: 0;
}

.about-hero > .wrapper {
  position: relative;
  z-index: 1;
}

.about-hero__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
}

/* Same restrained dot-accent positions as the Services hero. */
.about-hero .dot--1.about-hero__dot {
  width: 20px;
  height: 20px;
  top: 18%;
  left: 8%;
  z-index: 2;
}

.about-hero .dot--2.about-hero__dot {
  width: 28px;
  height: 28px;
  bottom: 12%;
  right: 10%;
  z-index: 2;
}


/* =============================================================
   10b. ABOUT: FOUNDER SECTION
   ============================================================= */

.founder__inner {
  display: grid;
  grid-template-columns: 0.9fr 1.2fr;
  grid-template-rows: auto 1fr;
  gap: var(--space-2xl);
}

.founder__heading {
  grid-column: 2;
  grid-row: 1;
}

.founder__photo {
  grid-column: 1;
  /* Spans both rows (the full height of heading + bio combined) so
     it can be vertically centered within that whole area, rather
     than pinned to the top edge next to the heading. */
  grid-row: 1 / span 2;
  align-self: center;
  display: block;
  width: 85%;
  height: auto;      /* no fixed/forced height - sized by the photo's own ratio */
  max-width: 100%;
  object-fit: contain;
  /* Deliberately plain: sharp corners, no drop shadow - matches the
     reference (unlike the collage images, which use rounding + shadow). */
  border-radius: 0;
  box-shadow: none;
}

.founder__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--color-navy);
  margin-bottom: var(--space-lg);
  position: relative;
  padding-bottom: var(--space-sm);
}

/* Small, restrained orange accent - a thin underline beneath the
   whole heading, not a per-word treatment. Keeps the section mostly
   neutral/editorial per the brief; this is the only color accent
   in the founder section. */
.founder__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  background-color: #f35916;
  border-radius: 2px;
}

/* Hand-drawn-style circle accent around a single word, e.g. "Founder".
   Approximated with a rotated border-radius ellipse rather than a
   traced SVG path - close to the reference at this type size, and
   trivial to nudge (rotation/inset) if the word length changes. */
.circled-word {
  position: relative;
  display: inline-block;
  color: var(--color-navy);
}

.circled-word::after {
  content: "";
  position: absolute;
  inset: -0.22em -0.3em -0.3em -0.3em;
  border: 3px solid var(--color-navy);
  border-radius: 50%;
  transform: rotate(-4deg);
  pointer-events: none;
}

.founder__bio {
  grid-column: 2;
  grid-row: 2;
}

.founder__bio p + p {
  margin-top: var(--space-sm);
}


/* =============================================================
   10c. ABOUT: "WHAT DOES RÊVE MEAN?" QUOTE SECTION
   ============================================================= */

.quote-section {
  text-align: center;
  position: relative;
}

/* Bold full-width rust brand-statement treatment for this section
   only - deep rust background, light cream text for readability.
   Scoped to .quote-section so it can't leak into any other section
   that might reuse .section--rust in the future. */
.section--rust {
  background-color: #7a2500;
}

.quote-section.section--rust .quote-section__heading,
.quote-section.section--rust .quote-section__body {
  color: var(--color-cream);
}

/* One small, restrained bright-orange accent - a simple dot above
   the heading. Deliberately minimal per the brief. */
.quote-section__accent {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #f35916;
  margin-bottom: var(--space-md);
}

.quote-section__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  margin-bottom: var(--space-lg);
}

.quote-section__body {
  max-width: 56ch;
  margin-inline: auto;
  font-size: var(--fs-body-lg);
  font-weight: 600;
}

.quote-section__body p + p {
  margin-top: var(--space-md);
}


/* =============================================================
   10d. ABOUT: "WHY RÊVE?" SECTION
   ============================================================= */

.why-reve__inner {
  display: grid;
  grid-template-columns: 0.8fr 1.4fr;
  gap: var(--space-2xl);
  align-items: start;
}

.why-reve__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--color-navy);
}

.why-reve__body p + p {
  margin-top: var(--space-md);
}


/* =============================================================
   10d-2. ABOUT: WHY RÊVE - FOUR-CATEGORY GRID (new layout)
   ============================================================= */

.section--why-lavender {
  background-color: #eddcff;
}

.why-reve-v2 {
  text-align: center;
}

.why-reve-v2 .why-reve__heading {
  margin-bottom: var(--space-2xl);
}

.why-reve-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
  text-align: left;
}

.why-reve-category__accent {
  display: block;
  width: 32px;
  height: 3px;
  border-radius: 2px;
  margin-bottom: var(--space-sm);
}

/* Small rotation of existing brand colors across the four accents -
   restrained, not a full palette dump. */
.why-reve-category:nth-child(1) .why-reve-category__accent {
  background-color: #7a2500;
}

.why-reve-category:nth-child(2) .why-reve-category__accent {
  background-color: #f35916;
}

.why-reve-category:nth-child(3) .why-reve-category__accent {
  background-color: var(--color-blush);
}

.why-reve-category:nth-child(4) .why-reve-category__accent {
  background-color: var(--color-navy);
}

.why-reve-category__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body-lg);
  color: var(--color-navy);
  margin-bottom: var(--space-xs);
}

.why-reve-category__text {
  font-size: var(--fs-body);
  color: var(--color-navy-soft);
}

@media (max-width: 900px) {
  .why-reve-categories {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .why-reve-categories {
    grid-template-columns: 1fr;
  }
}


/* =============================================================
   10e. ABOUT: CLOSING CTA
   ============================================================= */

.closing-cta {
  position: relative;
  text-align: center;
  overflow: hidden;
}

/* TEST TREATMENT - Services page CTA only. Not applied to .closing-cta's
   base rule, so About's and the Thank You page's CTA sections, which
   also use .closing-cta, are completely unaffected. This replaces the
   earlier CSS-generated gradient-cloud test on this same section with
   the person's own uploaded image instead - only one of the two is
   active at a time. */

.closing-cta--atmospheric {
  background-image: url("../images/services-cta-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Thin rounded frame - same navy/radius language as the Home page's
     hero/intro separator, just applied on all four sides here since
     this section is a self-contained visual block rather than a
     transition between two sections. .closing-cta already has
     overflow:hidden, so the background-image's corners clip cleanly
     to match rather than sitting square inside a rounded line. */
  border: 2px solid var(--color-navy);
  border-radius: 28px;
}

/* Very subtle cream tint between the image and the text, purely for
   contrast/readability - not a filter or color change on the image
   itself. Remove this rule entirely if the image reads clearly enough
   on its own. */
.closing-cta--atmospheric::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(251, 247, 241, 0.35);
  pointer-events: none;
  z-index: 0;
}

.closing-cta__inner {
  position: relative;
  z-index: 2;
  max-width: 46ch;
  margin-inline: auto;
}

.closing-cta__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  margin-bottom: var(--space-md);
}

.closing-cta__body {
  margin-bottom: var(--space-lg);
}

.closing-cta .dot {
  z-index: 1;
}

.closing-cta .dot--1 {
  width: 48px;
  height: 48px;
  top: 6%;
  left: 12%;
}

.closing-cta .dot--2 {
  width: 32px;
  height: 32px;
  bottom: 14%;
  left: 20%;
}

.closing-cta .dot--3 {
  width: 40px;
  height: 40px;
  top: 12%;
  right: 14%;
}

.closing-cta .dot--4 {
  width: 56px;
  height: 56px;
  bottom: 8%;
  right: 10%;
}


/* =============================================================
   11. FOOTER
   ============================================================= */

.site-footer {
  background-color: var(--color-lavender);
  padding-block: var(--space-xl);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.site-footer__logo {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--color-navy);
  text-decoration: none;
}

.site-footer__email {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw + 1rem, 2rem);
  color: var(--color-navy);
  text-decoration: none;
}

.site-footer__email:hover {
  color: var(--color-orange);
}

.site-footer__meta {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(20, 21, 43, 0.15);
  font-size: var(--fs-small);
  color: var(--color-navy-soft);
}

.site-footer__meta a {
  display: inline-block;
  padding: 10px 2px;
  text-decoration: underline;
}


/* =============================================================
   12. RESPONSIVE ADJUSTMENTS
   ============================================================= */

@media (max-width: 900px) {
  .intro__inner,
  .more-ideas__inner,
  .founder__inner,
  .why-reve__inner,
  .monthly__inner,
  .contact__inner {
    grid-template-columns: 1fr;
  }

  .collage {
    max-width: 480px;
    margin-inline: auto;
  }

  .more-ideas__heading {
    max-width: none;
  }

  .founder__inner {
    row-gap: var(--space-md);
  }

  .founder__heading {
    grid-column: 1;
    grid-row: auto;
    order: 1;
  }

  .founder__bio {
    grid-column: 1;
    grid-row: auto;
    order: 2;
  }

  .founder__photo {
    grid-column: 1;
    grid-row: auto;
    order: 3;
    align-self: auto;
    width: 100%;
    max-width: 220px;
    margin-inline: auto;
  }
}

@media (max-width: 560px) {
  .form-row {
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .section {
    padding-block: var(--space-xl);
  }

  .hero {
    /* Header wraps to a taller multi-row layout below this width */
    --hero-offset: 226px;
  }

  .hero__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn {
    width: 100%;
  }

  .hero__cta {
    width: 100%;
  }

  /* Mobile-only logo: same ~16% size reduction as before
     (1.25rem -> 1.05rem). No longer centered - with the hamburger
     icon now on the right, logo-left/icon-right is the standard,
     balanced layout. Desktop's .logo rule (1.25rem) is untouched
     above this breakpoint. */
  .logo {
    font-size: 1.05rem;
  }

  /* Hamburger icon - visible only at this breakpoint. Desktop's
     .nav-toggle stays display:none (its default, set in the base
     ruleset). 44px square for a comfortable touch target. */
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    order: 2;
  }

  .nav-toggle__bar {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--color-navy);
    border-radius: 1px;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
  }

  /* Open state: three bars become an X */
  .nav-toggle--open .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle--open .nav-toggle__bar:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle--open .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* The nav panel - same <nav> element as desktop, just hidden by
     default and repositioned as a full-width dropdown below the
     header when opened. .site-header already has position:relative,
     so this anchors to the full header width (not the narrower
     .wrapper it lives inside), guaranteeing it can't cause
     horizontal overflow regardless of content length. An explicit
     background-color keeps it fully opaque even on the Home page,
     where the header itself is transparent over the hero image. */
  .nav {
    display: none;
    order: 3;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background-color: var(--color-cream);
    border-top: 1px solid rgba(20, 21, 43, 0.15);
    padding: var(--space-md);
  }

  .nav.is-open {
    display: flex;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .nav__link {
    display: block;
    width: 100%;
    padding-block: var(--space-sm);
  }
}