/* ==========================================================================
   Patricia Life Design - static review site
   Direction: the verified Patricia Life Design social identity.
   Hand-written, mobile-first, no framework or invented brand artwork.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   Existing token names are retained for the hand-authored templates. Values
   now follow the navy lettering, blush ground, coral thread and foliage in
   Patricia's current Facebook and Instagram logo.
   -------------------------------------------------------------------------- */

:root {
  --linen: #fffaf7;
  --paper: #f7ece8;
  --sand: #fbd1d2;
  --sand-deep: #e9b7b9;

  --clay: #163554;
  --clay-deep: #0b2343;
  --clay-wash: #f7dfe0;
  --thread: #a9435b;

  --sage: #748365;
  --sage-deep: #4f6446;

  --walnut: #17334d;
  --walnut-deep: #0b2343;

  --ink: #142a43;
  --muted: #515d6b;
  --line: rgba(20, 42, 67, 0.17);
  --line-strong: rgba(20, 42, 67, 0.3);

  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: none;

  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;

  --serif: Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", Arial, sans-serif;

  --shell: 1400px;
  --gutter: 20px;
  --header-height: 76px;

  /* One vertical rhythm scale, used everywhere. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 88px;

  --ease: cubic-bezier(0.22, 0.72, 0.2, 1);
}

@media (min-width: 800px) {
  :root {
    --gutter: 40px;
    --header-height: 94px;
  }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
  margin: 0;
  background: var(--linen);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

img {
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.1rem, 6.2vw, 3.5rem);
}

h2 {
  font-size: clamp(1.65rem, 4.4vw, 2.5rem);
}

h3 {
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
}

h4 {
  font-size: 1.05rem;
}

p {
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--clay-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--clay);
}

ul,
ol {
  margin: 0 0 var(--space-4);
  padding-left: 1.15em;
}

li {
  margin-bottom: var(--space-2);
}

strong {
  font-weight: 600;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-6) 0;
}

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

/* Skip link ------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  z-index: 200;
  transform: translateY(-160%);
  background: var(--walnut-deep);
  color: var(--linen);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.18s var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--linen);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: calc(var(--shell) + (var(--gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell-narrow {
  max-width: 760px;
}

.band {
  padding-block: var(--space-8);
}

@media (min-width: 800px) {
  .band {
    padding-block: var(--space-9);
  }
}

.band-tight {
  padding-block: var(--space-7);
}

.band-paper {
  background: var(--paper);
}

.band-sand {
  background: var(--sand);
}

.band-walnut {
  background: var(--walnut);
  color: var(--linen);
}

.band-walnut h1,
.band-walnut h2,
.band-walnut h3,
.band-walnut h4 {
  color: var(--linen);
}

.band-walnut .lede,
.band-walnut p {
  color: rgba(250, 247, 242, 0.86);
}

.band-walnut .eyebrow {
  color: #e7b7a4;
}

.band-walnut a {
  color: #f0c4b2;
}

.stack > * + * {
  margin-top: var(--space-4);
}

.grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 620px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 860px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 620px) {
  .grid-2up {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Split: media beside copy. Copy first in the DOM, so it reads first on
   mobile and with assistive technology. */

.split {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 860px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .split-media-first > .split-media {
    order: -1;
  }
}

/* --------------------------------------------------------------------------
   4. Type helpers
   -------------------------------------------------------------------------- */

.eyebrow {
  display: block;
  margin: 0 0 var(--space-3);
  font-family: var(--serif);
  font-size: 1rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--thread);
}

.lede {
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  line-height: 1.6;
  color: var(--muted);
}

.section-head {
  max-width: 620px;
  margin-bottom: var(--space-6);
}

.section-head.center {
  margin-inline: 0;
  text-align: left;
}

.pull-quote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3.4vw, 1.85rem);
  line-height: 1.35;
  color: var(--ink);
}

.pull-quote cite {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Section spacing and background establish the rhythm. */

.stitch {
  display: none;
}

/* --------------------------------------------------------------------------
   5. Buttons
   StrandWeb CTA rule: labels stay on one line, letter spacing matches body
   text, and buttons stretch rather than wrapping their label.
   -------------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--clay);
  color: var(--linen);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.18s var(--ease),
    transform 0.18s var(--ease);
}

.button:hover {
  background: var(--clay-deep);
  color: var(--linen);
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
}

.button-secondary {
  background: var(--paper);
  color: var(--clay-deep);
}

.button-secondary:hover {
  background: var(--clay-wash);
  color: var(--clay-deep);
}

.button-on-dark {
  background: var(--linen);
  color: var(--walnut-deep);
}

.button-on-dark:hover {
  background: #fff;
  color: var(--walnut-deep);
}

.button-ghost-on-dark {
  background: rgba(250, 247, 242, 0.12);
  color: var(--linen);
}

.button-ghost-on-dark:hover {
  background: rgba(250, 247, 242, 0.2);
  color: var(--linen);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Below 380px a long label would overflow, so buttons go full width and the
   label still stays on one line. */
@media (max-width: 379px) {
  .button-row .button {
    width: 100%;
    padding-inline: var(--space-4);
  }
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  white-space: normal;
}

.text-link::after {
  content: none;
}

/* --------------------------------------------------------------------------
   6. Review banner
   Local review only. scripts/build-dist.cjs strips this for any built output.
   -------------------------------------------------------------------------- */

.review-banner {
  background: var(--walnut-deep);
  color: rgba(250, 247, 242, 0.9);
  font-size: 0.8rem;
  line-height: 1.45;
  text-align: center;
  padding: var(--space-2) var(--gutter);
}

.review-banner strong {
  color: #f0c4b2;
}

/* --------------------------------------------------------------------------
   7. Header
   Deliberately static rather than hide-on-scroll: part of this audience is
   not confident with websites, and a moving header is disorienting.
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fbd1d2;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

.cart-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.cart-link:hover {
  border-color: var(--clay);
  color: var(--clay-deep);
}

.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  min-height: 1.4em;
  padding: 0 0.35em;
  border-radius: 0;
  background: var(--clay);
  color: var(--linen);
  font-size: 0.72rem;
  font-weight: 700;
}

.cart-count[data-empty="true"] {
  background: var(--sand-deep);
  color: var(--walnut);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
  color: var(--ink);
}

.brand-art,
.footer-brand-art {
  position: relative;
  display: block;
  flex: none;
  width: 170px;
  height: 68px;
  overflow: hidden;
  background: #fbd1d2;
}

.brand-art img,
.footer-brand-art img {
  position: absolute;
  top: -42px;
  left: 0;
  width: 170px;
  max-width: none;
  height: auto;
}

.brand:hover .brand-art,
.brand:focus-visible .brand-art {
  background: #f7c5c8;
}

@media (min-width: 800px) {
  .brand-art,
  .footer-brand-art {
    width: 220px;
    height: 88px;
  }

  .brand-art img,
  .footer-brand-art img {
    top: -54px;
    width: 220px;
  }
}

.brand-name {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand-tag {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

@media (min-width: 800px) {
  .brand-name {
    font-size: 1.3rem;
  }

  .brand-tag {
    font-size: 0.66rem;
  }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

@media (max-width: 420px) {
  .brand-tag {
    display: none;
  }

  .cart-link-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .nav-toggle {
    font-size: 0;
    padding-inline: 12px;
  }
}

.nav-toggle:hover {
  color: var(--clay-deep);
}

.nav-toggle-bars {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.nav-toggle-bars::before {
  top: -6px;
}

.nav-toggle-bars::after {
  top: 6px;
}

.site-nav {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  flex-direction: column;
  background: var(--linen);
  padding: var(--space-4) var(--gutter) var(--space-8);
  overflow-y: auto;
}

.site-nav[data-open="true"] {
  display: flex;
}

.site-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.nav-close {
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list li {
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.nav-list a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: var(--space-2) 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

.nav-list a:hover {
  color: var(--clay-deep);
}

.nav-list a[aria-current="page"] {
  color: var(--clay-deep);
  font-weight: 600;
}

.nav-cta {
  margin-top: var(--space-6);
}

.nav-cta .button {
  width: 100%;
}

/* The horizontal nav only appears once it genuinely fits. Seven full-length
   labels plus the brand and the CTA need roughly 1030px of content width, so
   switching at 1000px overflowed the viewport. Labels are kept complete rather
   than abbreviated, because clarity matters more here than an earlier
   breakpoint. */
@media (min-width: 1180px) {
  .nav-toggle,
  .site-nav-head {
    display: none;
  }

  .site-nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    inset: auto;
    padding: 0;
    overflow: visible;
    background: transparent;
    order: 2;
    margin-left: auto;
  }

  .nav-list {
    display: flex;
    align-items: center;
    gap: 18px;
  }

  .nav-list li {
    border: 0;
  }

  .nav-list a {
    min-height: 44px;
    font-size: 0.9rem;
    white-space: nowrap;
  }

  .nav-list a[aria-current="page"] {
    box-shadow: inset 0 -2px 0 var(--clay);
  }

  .nav-cta {
    margin: 0;
  }

  .nav-cta .button {
    width: auto;
    min-height: 44px;
    padding-inline: var(--space-4);
  }

  .header-actions {
    order: 3;
    margin-left: 0;
  }
}

@media (min-width: 1320px) {
  .site-nav {
    gap: var(--space-5);
  }

  .nav-list {
    gap: var(--space-5);
  }

  .nav-list a {
    font-size: 0.94rem;
  }

  .nav-cta .button {
    padding-inline: var(--space-5);
  }
}

body[data-nav-open="true"] {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-block: var(--space-7) var(--space-8);
  background: var(--paper);
}

.hero-inner {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .hero {
    padding-block: var(--space-8) var(--space-9);
  }

  .hero-inner {
    grid-template-columns: 1.02fr 1fr;
    gap: var(--space-8);
    align-items: center;
  }
}

.hero h1 {
  margin-bottom: var(--space-4);
}

.hero-claim {
  font-family: var(--serif);
}

.hero-claim em {
  font-style: italic;
  color: var(--clay);
}

.hero .lede {
  max-width: 46ch;
}

.hero-actions {
  margin-top: var(--space-6);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--muted);
}

.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hero-meta span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage);
  flex: none;
}

.page-hero {
  padding-block: var(--space-7);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.page-hero .lede {
  max-width: 58ch;
}

.breadcrumb {
  margin-bottom: var(--space-4);
  font-size: 0.82rem;
  color: var(--muted);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb li {
  margin: 0;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--sand-deep);
}

/* --------------------------------------------------------------------------
   9. Media frames
   -------------------------------------------------------------------------- */

.frame {
  position: relative;
  overflow: hidden;
  background: var(--paper);
}

.frame img {
  width: 100%;
  display: block;
}

.frame-sm {
  background: var(--paper);
}

.frame-plain {
  background: transparent;
}

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
}

.card-media {
  background: var(--paper);
}

.card-media img {
  width: 100%;
}

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-3);
  padding: var(--space-5) 0 0;
}

.card-body h3 {
  margin: 0;
}

.card-body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.card-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
}

.card-list li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--sage);
}

.card-foot {
  margin-top: auto;
  padding-top: var(--space-3);
}

/* Feature: an icon-free numbered or titled block, used for process steps. */

.feature {
  padding: var(--space-3) 0;
  background: transparent;
}

.feature-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background: var(--clay-wash);
  color: var(--clay-deep);
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
}

.feature h3 {
  margin-bottom: var(--space-2);
  font-size: 1.1rem;
}

.feature p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--muted);
}

.band-walnut .feature {
  background: transparent;
}

.band-walnut .feature-step {
  background: rgba(250, 247, 242, 0.14);
  color: #f0c4b2;
}

/* Tag ------------------------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 3px var(--space-3);
  border-radius: 0;
  background: var(--clay-wash);
  color: var(--clay-deep);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tag-sage {
  background: #e6ece2;
  color: var(--sage-deep);
}

/* --------------------------------------------------------------------------
   11. Notices
   Used for honest gaps: "prices on request", "photography pending".
   -------------------------------------------------------------------------- */

.notice {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--clay-wash);
  font-size: 0.94rem;
  color: var(--ink);
}

.notice p {
  margin: 0;
}

.notice-sage {
  background: #e9efe5;
}

/* --------------------------------------------------------------------------
   12. Forms
   -------------------------------------------------------------------------- */

.form {
  display: grid;
  gap: var(--space-5);
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

.field-hint {
  font-size: 0.82rem;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--linen);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
}

.field textarea {
  min-height: 140px;
  resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--sand-deep);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #a3271b;
  background: #fdf3f1;
}

.field-error {
  font-size: 0.85rem;
  font-weight: 600;
  color: #8d2214;
}

.field-error:empty {
  display: none;
}

.form-status {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 0.94rem;
}

.form-status:empty {
  display: none;
}

.form-status[data-state="error"] {
  background: #fdf3f1;
  border-color: #e0b4ac;
  color: #7d1e12;
}

.form-status[data-state="ok"] {
  background: #e9efe5;
  border-color: #bcccb2;
  color: #33452b;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
  margin-bottom: var(--space-3);
  font-size: 0.9rem;
  font-weight: 600;
}

.choice-row {
  display: grid;
  gap: var(--space-2);
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--linen);
  font-size: 0.94rem;
  cursor: pointer;
}

.choice:hover {
  border-color: var(--clay);
  background: var(--clay-wash);
}

.choice input {
  width: auto;
  min-height: 0;
  margin-top: 0.3em;
  accent-color: var(--clay);
}

/* --------------------------------------------------------------------------
   13. Contact blocks
   -------------------------------------------------------------------------- */

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-list li {
  margin: 0;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}

.contact-list li:first-child {
  padding-top: 0;
}

.contact-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-1);
}

.contact-value {
  font-size: 1.02rem;
  font-weight: 500;
}

.pending {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--clay-deep);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--walnut-deep);
  color: rgba(250, 247, 242, 0.82);
  padding-block: var(--space-8) var(--space-5);
  font-size: 0.92rem;
}

.site-footer h2,
.site-footer h3 {
  color: var(--linen);
}

.footer-grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 700px) {
  .footer-grid {
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: var(--space-7);
  }
}

.footer-brand .brand-name {
  color: var(--linen);
  font-size: 1.3rem;
}

.footer-brand p {
  margin-top: var(--space-3);
  max-width: 34ch;
  color: rgba(250, 247, 242, 0.72);
}

.footer-title {
  margin: 0 0 var(--space-3);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.6);
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li {
  margin: 0 0 var(--space-1);
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: rgba(250, 247, 242, 0.86);
  text-decoration: none;
}

.footer-links a:hover {
  color: #f0c4b2;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(250, 247, 242, 0.16);
  font-size: 0.82rem;
  color: rgba(250, 247, 242, 0.6);
}

.footer-bottom p {
  margin: 0;
}

.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  color: rgba(250, 247, 242, 0.72);
  text-decoration: none;
  white-space: nowrap;
}

.footer-credit:hover {
  color: var(--linen);
}

/* --------------------------------------------------------------------------
   15. Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .card:hover,
  .card:focus-within,
  .button:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   17. Shop
   -------------------------------------------------------------------------- */

.price {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
}

.price-lg {
  font-size: clamp(1.6rem, 3vw, 2rem);
}

.price-note {
  margin-left: var(--space-2);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.buy-box {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-4);
}

.buy-box label {
  font-size: 0.9rem;
  font-weight: 600;
}

.qty-input {
  width: 5.5rem;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--linen);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
}

.card-price {
  margin: 0;
}

.text-button {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--clay-deep);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.text-button:hover {
  color: var(--clay);
}

.cart-table-wrap {
  overflow-x: auto;
}

.cart-table {
  width: 100%;
  border-collapse: collapse;
}

.cart-table th {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--muted);
}

.cart-table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.cart-line-product {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  min-width: 220px;
}

.cart-line-media {
  flex: none;
  width: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--paper);
}

.cart-line-media img {
  width: 72px;
  height: 72px;
  object-fit: cover;
}

.cart-summary {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.totals-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: 0.95rem;
}

.totals-row.total {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: 1.1rem;
  font-weight: 600;
}

.checkout-lines {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.checkout-lines li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}

.pay-grid {
  display: grid;
  gap: var(--space-2);
}

@media (max-width: 700px) {
  .cart-table thead {
    display: none;
  }

  .cart-table,
  .cart-table tbody,
  .cart-table tr,
  .cart-table td {
    display: block;
    width: 100%;
  }

  .cart-table tr {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--line);
  }

  .cart-table td {
    padding: var(--space-2) 0;
    border: 0;
  }

  .cart-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--space-1);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* Cushion catalogue and WhatsApp quote flow. */
.collection-card .card-media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.collection-layout {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}

.collection-media,
.order-panel {
  min-width: 0;
}

.featured-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.collection-media > .field-hint {
  margin-top: var(--space-3);
}

.photo-fieldset,
.option-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-5);
  min-width: 0;
}

.photo-fieldset legend,
.option-fieldset legend {
  display: block;
  margin-bottom: var(--space-3);
  font-weight: 600;
  color: var(--walnut-deep);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.photo-choice {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 0;
  background: #fff;
  cursor: pointer;
}

.photo-choice:hover,
.photo-choice:focus-within {
  background: var(--clay-wash);
}

.photo-choice:has(input:checked) {
  background: var(--clay-wash);
}

.photo-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.photo-choice input:focus-visible + img {
  outline: 3px solid var(--clay-deep);
  outline-offset: 2px;
}

.photo-choice img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--paper);
}

.photo-reference {
  font-size: 0.88rem;
  font-weight: 700;
}

.photo-fabric {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

.order-panel {
  padding: var(--space-5);
  background: var(--paper);
}

.order-panel h2 {
  margin-bottom: var(--space-4);
}

.fabric-summary {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.option-list {
  display: grid;
  gap: var(--space-2);
}

.option-choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: var(--linen);
  cursor: pointer;
}

.option-choice:has(input:checked),
.option-choice:focus-within {
  background: var(--clay-wash);
}

.option-choice input {
  width: 20px;
  height: 20px;
  accent-color: var(--clay-deep);
}

.order-panel .field {
  margin-bottom: var(--space-5);
}

.order-status {
  min-height: 1.5em;
  color: #8d2214;
  font-weight: 600;
}

.order-panel .notice {
  margin-top: var(--space-5);
}

@media (min-width: 620px) {
  .photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .collection-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
  }
  .order-panel {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
  }
}

/* Homepage: an editorial sequence built around Patricia's actual work. */
.home-intro {
  padding-block: clamp(40px, 7vw, 104px);
  background: var(--paper);
}

.home-intro-layout,
.home-workroom-layout,
.home-more-layout {
  display: grid;
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}

.home-kicker {
  margin: 0 0 var(--space-4);
  color: var(--thread);
  font: italic 1.1rem/1.4 var(--serif);
}

.home-intro h1 {
  max-width: 12ch;
  font-size: clamp(2.8rem, 6.8vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.home-lede {
  max-width: 48ch;
  margin-block: var(--space-5);
  font-size: clamp(1.07rem, 1.7vw, 1.3rem);
  line-height: 1.55;
}

.home-intro .button-row {
  align-items: center;
  gap: var(--space-4) var(--space-5);
}

.home-delivery {
  max-width: 55ch;
  margin: var(--space-5) 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.home-intro-image,
.home-workroom figure {
  min-width: 0;
  margin: 0;
}

.home-intro-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.home-intro-image figcaption,
.home-workroom figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-2);
  color: var(--muted);
  font-size: 0.8rem;
}

.home-collections,
.home-more {
  padding-block: clamp(64px, 9vw, 128px);
}

.home-section-heading {
  display: grid;
  gap: var(--space-4);
  align-items: end;
  margin-bottom: var(--space-7);
}

.home-section-heading h2,
.home-workroom h2,
.home-more h2 {
  max-width: 17ch;
  font-size: clamp(2.2rem, 4.5vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.home-section-heading > p {
  max-width: 42ch;
  margin: 0;
  color: var(--muted);
}

.home-collection-grid {
  display: grid;
  gap: var(--space-6);
}

.home-collection {
  display: block;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}

.home-collection:hover,
.home-collection:focus-visible {
  color: var(--clay-deep);
}

.home-collection img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.home-collection-caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px var(--space-4);
  padding-top: var(--space-3);
  border-top: 2px solid var(--ink);
}

.home-collection-caption strong {
  font: 500 clamp(1.4rem, 2.2vw, 2rem)/1.2 var(--serif);
}

.home-collection-caption small {
  color: var(--muted);
  font-size: 0.82rem;
}

.home-workroom {
  padding-block: clamp(64px, 9vw, 128px);
  background: var(--sand);
}

.home-workroom figure img {
  width: 100%;
  max-height: 720px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.home-workroom h2 {
  margin-bottom: var(--space-5);
}

.home-workroom p:not(.home-kicker),
.home-more p:not(.home-kicker) {
  max-width: 47ch;
}

.home-range-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}

.home-range-list li {
  border-bottom: 1px solid var(--line-strong);
}

.home-range-list a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-4);
  color: var(--ink);
  text-decoration: none;
}

.home-range-list a:hover,
.home-range-list a:focus-visible {
  color: var(--thread);
}

.home-range-list span:first-child {
  font: 500 clamp(1.25rem, 2vw, 1.7rem)/1.2 var(--serif);
}

.home-range-list span:last-child {
  color: var(--muted);
  font-size: 0.86rem;
}

@media (min-width: 800px) {
  .home-intro-layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }

  .home-section-heading {
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  }

  .home-collection-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    grid-template-rows: repeat(2, auto);
    gap: var(--space-6) var(--space-7);
  }

  .home-collection-protea {
    grid-row: span 2;
  }

  .home-collection-protea img {
    aspect-ratio: 4 / 5;
  }

  .home-collection-savannah img,
  .home-collection-mystic img {
    aspect-ratio: 16 / 9;
  }

  .home-workroom-layout,
  .home-more-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* 2026-10-19 — soft South African handmade direction. */
:root{--radius-sm:24px;--radius-md:28px;--radius-lg:40px;--ink:#17364b;--muted:#56636b;--linen:#fffcf8;--paper:#f9efea;--thread:#a65068;--shell:1400px;--sage:#71806c}
html{scroll-padding-top:110px}body{background:#fffcf8}h1,h2,h3{font-weight:400;letter-spacing:-.035em}h2{font-size:clamp(32px,3.7vw,54px);line-height:1.12}h3{font-size:28px;line-height:1.2}em{font-weight:400;color:#a65068}.button,button,input[type=submit],.option-choice,.gallery-view,.photo-choice,.catalogue-filter{border-radius:999px}.button{background:#17364b;color:white;border:1px solid #17364b;padding:15px 27px;min-height:50px;font-weight:500;font-size:14px;letter-spacing:.01em;box-shadow:none}.button:hover{background:#385849;border-color:#385849;color:white}.button-outline{background:transparent;color:#17364b}.button-light{background:#fffaf5;color:#17364b;border-color:#fffaf5}.text-link{font-size:14px;font-weight:500;text-underline-offset:5px}.eyebrow{font-family:var(--sans);font-style:normal;text-transform:uppercase;font-size:10px;letter-spacing:.18em;line-height:1.7;color:#6a795f;font-weight:600}.button-row{gap:24px;align-items:center;flex-wrap:wrap}.review-banner{font-size:10px;padding:5px 20px;background:#17364b;color:#fff2e9;text-align:center;letter-spacing:.08em}.site-header{top:0;background:#fff;box-shadow:0 4px 18px #17364b06;overflow:visible}.site-header .header-inner{min-height:136px;transition:min-height .2s}.site-header .brand{position:relative;width:380px;align-self:flex-start}.site-header .brand-art{position:relative;width:380px;height:136px;overflow:visible;background:transparent;pointer-events:none}.site-header .brand-art img{width:380px;height:auto;top:-4px;left:0;mix-blend-mode:multiply;transition:width .2s,top .2s}.site-header .brand:hover .brand-art{background:transparent}.site-header.is-compact .header-inner{min-height:78px}.site-header.is-compact .brand,.site-header.is-compact .brand-art{width:230px}.site-header.is-compact .brand-art{height:78px}.site-header.is-compact .brand-art img{width:230px;top:-8px}.site-nav .nav-list a{font-size:13px;font-weight:400}.site-nav .nav-cta .button{background:transparent;color:#17364b;padding:11px 22px;font-size:12px;border-color:#17364b40}.site-nav .nav-cta .button:hover{background:#f8e9e7}.nav-list a[aria-current=page]{box-shadow:none;border-bottom:1px solid #a65068}.nav-toggle,.nav-close{border-radius:999px}.welcome-hero{background:#fbefea;position:relative}.welcome-layout{display:grid;grid-template-columns:1.08fr 1fr;gap:55px;align-items:center;padding-top:65px;padding-bottom:70px}.welcome-copy{padding-left:65px;max-width:660px}.welcome-copy h1{font-size:clamp(40px,4.4vw,68px);line-height:1.08;letter-spacing:-.045em;margin:22px 0}.welcome-copy h1 em{font-style:italic;white-space:nowrap}.welcome-copy>p:not(.eyebrow){font-size:14px;line-height:1.85;max-width:490px}.welcome-copy .hero-intro{font-family:Georgia,serif;font-size:20px!important;line-height:1.55!important;color:#17364b}.hero-footnote{font-size:12px!important;color:#697467;margin:25px 0 0}.welcome-visual{position:relative;padding-right:20px}.hero-product{margin:0;background:white;border-radius:220px 220px 18px 18px;overflow:hidden;box-shadow:0 18px 40px #573e3510}.hero-product img{width:100%;height:470px;object-fit:contain;display:block;padding:30px 20px 0}.hero-product figcaption{padding:15px 22px 22px;text-align:center;font-family:Georgia,serif}.hero-product figcaption span{display:block;font:9px var(--sans);letter-spacing:.13em;text-transform:uppercase;color:#7a806f;margin-bottom:7px}.hero-product figcaption strong{font-weight:400;font-size:19px}.maker-seal{position:absolute;bottom:55px;left:-38px;width:105px;height:105px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:50%;background:#e2e7d9;border:4px solid #fbefea;font-size:9px;line-height:1.5;letter-spacing:.07em;text-align:center;transform:rotate(-9deg)}.maker-seal em{font-family:Georgia;font-size:19px;letter-spacing:0;color:#4c6650}.values-ribbon{background:#17364b;color:#ffede4;padding:18px 0}.values-ribbon .shell{display:flex;justify-content:space-around;gap:22px;align-items:center;font-size:12px;letter-spacing:.06em}.values-ribbon i{color:#dba9ab;font-size:17px}.band{padding-block:85px}.section-intro{max-width:620px;text-align:center;margin:0 auto 44px}.section-intro>p:last-child{font-size:14px;color:#667267;line-height:1.75;max-width:420px;margin:18px auto}.pillar-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.pillar-card{display:flex;flex-direction:column;gap:15px;padding:34px 30px;border-radius:24px;text-decoration:none;background:#f5ece4;color:#17364b}.pillar-card:nth-child(2){background:#edf0e5}.pillar-card:nth-child(3){background:#f7e4e2}.pillar-number{font-size:9px;letter-spacing:.15em;color:#647361}.pillar-card h3{font-size:31px;margin:0}.pillar-card p{font-size:13px;line-height:1.8;margin:0}.pillar-card .text-link{margin-top:auto;font-size:12px;text-decoration:underline}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:35px}.section-heading h2{font-size:40px;margin:0}.range-section{background:#f6f2ec}.range-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:27px}.range-card{text-decoration:none;color:#17364b}.range-image{position:relative;border-radius:150px 150px 18px 18px;background:#fff;overflow:hidden}.range-image img{height:340px;width:100%;object-fit:contain;transition:transform .3s;padding:18px}.range-card:hover img{transform:scale(1.03)}.range-index{position:absolute;left:20px;bottom:18px;background:#f5ece5;padding:7px 11px;border-radius:50%;font-size:10px}.range-caption{position:relative;padding:20px 0}.range-caption h3{font-size:25px;margin:0 0 8px}.range-caption p{font-size:12px;color:#677268}.range-caption>span{position:absolute;right:2px;top:20px;font-size:22px}.friendship-layout{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.friendship-photo{position:relative;max-width:480px}.friendship-photo img{width:100%;height:480px;object-fit:contain;background:#fff;border-radius:20px 180px 20px 20px}.photo-note{display:block;background:#eddfd0;color:#58684f;padding:20px 30px;position:absolute;bottom:-15px;right:-25px;border-radius:14px;font:italic 22px/1.3 Georgia;transform:rotate(3deg)}.friendship-copy p:not(.eyebrow){font-size:14px;line-height:1.9;color:#5c6970;max-width:440px}.beyond-section{background:#f9e9e7}.beyond-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:100px;align-items:center}.beyond-layout>div>p:not(.eyebrow){max-width:470px;font-size:14px;line-height:1.85}.beyond-note{background:#fffaf5;padding:40px;border-radius:100px 18px 100px 18px;border:1px solid #e7dcd0}.beyond-note>span{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#73806a}.beyond-note h3{font:36px/1.15 Georgia;margin:22px 0}.beyond-note p{font-size:13px!important}.purpose-close{background:#17364b;color:#fff5ee;text-align:center}.purpose-close h2{color:#fff5ee;font-size:40px}.purpose-close .eyebrow{color:#ddaea9}.purpose-close p:not(.eyebrow){color:#e1e5de;font-size:14px;line-height:1.9}.purpose-close .button{margin-top:16px}.site-footer{background:#fbf6f0;color:#17364b;padding-bottom:25px}.site-footer .footer-brand-art{width:230px;height:160px;overflow:hidden;background:transparent}.site-footer .footer-brand-art img{width:230px;top:0;mix-blend-mode:multiply}.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}.footer-title{font-size:10px;letter-spacing:.1em;color:#17364b}.footer-links a,.footer-brand p{font-size:12px;line-height:1.9;color:#58666a}.footer-bottom{font-size:10px;border-top:1px solid #17364b20}.pld-sticky-social{position:fixed;right:20px;bottom:20px;display:flex;gap:8px;z-index:90;background:#fffaf6dd;padding:7px;border:1px solid #d4dccc;border-radius:999px;box-shadow:0 6px 24px #17364b18;backdrop-filter:blur(10px)}.pld-sticky-social-link{display:flex;gap:7px;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;color:#17364b;background:white;text-decoration:none}.pld-sticky-social-link svg{width:20px;height:20px}.pld-sticky-social-link span{display:none}.pld-sticky-whatsapp{width:auto;padding:0 17px;background:#345e49;color:white;border-radius:999px}.pld-sticky-whatsapp span{display:block;font-size:12px}
.story-hero{background:#fbefea;padding:95px 0 65px}.story-hero .shell{max-width:1000px}.story-hero h1{font-size:clamp(42px,5vw,72px);line-height:1.05;max-width:850px}.story-hero .lede{max-width:650px}.story-signature{font:italic 20px Georgia;color:#a65068}.story-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:75px}.story-copy p{font-size:15px;line-height:1.9}.story-quote{background:#f4e5e1;text-align:center}.story-quote h2{font-size:42px}.craft-note{background:#edf0e5;border-radius:22px;padding:28px;line-height:1.8}.story-page .pillar-cards>article{border-radius:22px;background:#f2e7df;padding:28px}.story-page .pillar-cards h3{font-size:25px}
.catalogue-filters{display:flex;flex-wrap:wrap;gap:9px;align-items:center}.catalogue-filter{border:1px solid #d2d7cd;background:transparent;padding:11px 18px;font-size:12px;color:#17364b;cursor:pointer}.catalogue-filter[aria-pressed=true]{background:#17364b;color:white}.catalogue-search input{border:1px solid #d2d7cd;border-radius:999px;padding:13px 20px;width:100%;min-width:220px;background:white}.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 22px}.product-card{background:white;border:1px solid #eee7e0;border-radius:20px;overflow:hidden;padding:0;box-shadow:0 6px 20px #17364b03}.product-card a{text-decoration:none}.product-card img{width:100%;height:280px;object-fit:contain;background:white;padding:16px}.product-card h2,.product-card h3{font:22px/1.25 Georgia;margin:14px 18px 8px}.product-card p,.product-card .product-meta,.product-card .product-price{padding:0 18px;font-size:12px;line-height:1.7}.product-card .text-link{display:block;margin:18px;font-size:12px}.product-card[hidden]{display:none!important}.product-card .product-price{font-weight:600;color:#a65068}.collection-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:55px;align-items:start}.featured-photo{background:white;border-radius:26px;padding:20px;position:sticky;top:95px}.featured-photo img{width:100%;height:530px;object-fit:contain}.order-panel{border:1px solid #e2ded4;background:#fcf7f1;border-radius:25px;padding:30px}.order-panel h2{font-size:30px}.option-grid{display:flex;flex-wrap:wrap;gap:10px}.option-choice{display:flex;align-items:center;gap:8px;padding:10px 15px;border:1px solid #d8d6cc;background:#fff;font-size:12px}.option-choice:has(input:checked){border-color:#17364b;background:#edf0e5}.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.photo-choice{border-radius:14px;overflow:hidden;padding:5px;background:white;border:1px solid #e3dfd7;font-size:10px}.photo-choice img{width:100%;height:90px;object-fit:contain}.order-panel select,.order-panel input[type=number]{border:1px solid #c7cec4;border-radius:14px;background:white;padding:12px;max-width:100%;width:100%}.price-summary{background:#e7eddf;border-radius:14px;padding:18px;color:#244936;font-size:14px;margin-block:20px}.field-hint{font-size:12px;line-height:1.75;color:#637064}.gallery-view{padding:8px 15px;background:#fff;border:1px solid #c7cec4;color:#17364b;font-size:12px}.order-status{color:#a12e44}.collection-layout .gallery-controls{display:flex;flex-wrap:wrap;gap:8px}.breadcrumbs{font-size:12px}
@media(min-width:1180px){.site-header .nav-list{gap:22px}.site-header .site-nav{gap:25px}.header-actions{display:none}}
@media(max-width:1179px){.site-header .brand,.site-header .brand-art{width:300px}.site-header .brand-art img{width:300px}.site-header .brand-art{height:110px}.site-header .header-inner{min-height:110px}.welcome-copy{padding-left:25px}.welcome-layout{gap:30px}.welcome-copy h1{font-size:48px}.site-nav .nav-list a{font-size:22px}.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.welcome-layout{grid-template-columns:1fr;padding-top:75px;padding-bottom:45px}.welcome-copy{padding-left:10px}.welcome-copy h1{font-size:clamp(37px,7vw,54px)}.welcome-copy h1 em{white-space:normal}.welcome-copy>p:not(.eyebrow){max-width:550px}.welcome-visual{max-width:500px;width:100%;margin:15px auto 0;padding:0 15px}.hero-product img{height:380px}.maker-seal{left:0;width:90px;height:90px}.band{padding-block:55px}.pillar-cards,.range-grid{grid-template-columns:1fr;gap:24px}.pillar-card{padding:30px}.range-grid{grid-template-columns:repeat(3,1fr);gap:12px}.range-image img{height:220px;padding:7px}.range-caption h3{font-size:20px}.range-caption p{font-size:12px}.section-heading h2{font-size:34px}.section-heading>.text-link{font-size:12px}.friendship-layout,.beyond-layout{grid-template-columns:1fr;gap:45px}.friendship-photo{margin:auto;width:100%;max-width:440px}.friendship-copy{max-width:550px}.friendship-photo img{height:380px}.beyond-note{max-width:500px}.story-grid{grid-template-columns:1fr;gap:20px}.footer-grid{grid-template-columns:1fr 1fr;gap:30px}.footer-brand{grid-column:1/-1}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.product-card img{height:240px;padding:10px}.collection-layout{grid-template-columns:1fr;gap:25px}.featured-photo{position:static}.featured-photo img{height:440px}.values-ribbon .shell{flex-wrap:wrap;gap:10px;font-size:9px}.values-ribbon i{font-size:10px}}
@media(max-width:480px){.site-header .header-inner{min-height:92px}.site-header .brand,.site-header .brand-art{width:230px}.site-header .brand-art{height:92px}.site-header .brand-art img{width:230px;top:0}.site-header.is-compact .header-inner{min-height:70px}.site-header.is-compact .brand,.site-header.is-compact .brand-art{width:180px}.site-header.is-compact .brand-art{height:70px}.site-header.is-compact .brand-art img{width:180px;top:0}.welcome-copy{padding-left:0}.welcome-copy h1{font-size:40px}.welcome-copy .button-row{gap:18px}.welcome-copy .button{font-size:12px;padding:14px 22px}.hero-product img{height:340px}.hero-product{border-radius:150px 150px 16px 16px}.range-grid{grid-template-columns:1fr}.range-image img{height:340px;padding:18px}.range-caption h3{font-size:27px}.range-caption p{font-size:13px}.range-image{border-radius:120px 120px 18px 18px}.section-heading{display:block}.section-heading>.text-link{display:inline-block;margin-top:15px}.product-card img{height:190px}.product-card h2,.product-card h3{font-size:19px;margin:12px 12px 6px}.product-card p,.product-card .product-meta,.product-card .product-price{padding:0 12px;font-size:12px}.product-grid{gap:12px}.order-panel{padding:20px}.featured-photo img{height:360px}.photo-grid{grid-template-columns:repeat(3,1fr)}.pld-sticky-social{right:10px;bottom:10px;gap:3px;padding:5px}.pld-sticky-social-link{width:36px;height:36px}.pld-sticky-whatsapp{width:auto;padding:0 12px}.footer-bottom{padding-bottom:65px}.purpose-close h2{font-size:31px}.story-quote h2{font-size:31px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

.site-footer .footer-title{color:#17364b}.catalogue-toolbar{display:grid;gap:22px;margin-bottom:25px}.catalogue-toolbar>.field{max-width:420px}.catalogue-toolbar input{border-radius:999px;padding:13px 19px;background:#fff;border:1px solid #d3d9ce}.product-card .card-body{padding:15px 18px 20px}.product-card .card-body h3,.product-card .card-body p{margin-left:0;margin-right:0;padding:0}.product-card .card-body .eyebrow{font-size:8px;letter-spacing:.1em}.product-card .card-body .text-link{margin-left:0;margin-right:0}.product-card .card-media{aspect-ratio:auto}.page-hero{background:#fbefea;padding-block:75px 50px}.page-hero h1{font-size:clamp(38px,5vw,65px);max-width:950px}.page-hero .lede{font-size:16px;max-width:700px}.product-grid .card h3 a{color:#17364b}.catalogue-filters .catalogue-filter{padding:9px 16px;font-size:12px;min-height:40px;background:transparent;color:#17364b;border:1px solid #c4d0c0}.catalogue-filters .catalogue-filter[aria-pressed=true]{background:#17364b;color:#fff}.catalogue-filters .catalogue-filter:hover{background:#e8ece0}.catalogue-filters .catalogue-filter[aria-pressed=true]:hover{background:#17364b}
[hidden]{display:none!important}@media(max-width:480px){.pld-sticky-social-link{width:44px;height:44px}.pld-sticky-whatsapp{width:auto}.page-hero{padding-top:90px}}
@media(max-width:480px){.photo-note{right:10px;max-width:calc(100% - 20px)}.friendship-photo{min-width:0}.welcome-copy,.welcome-visual,.beyond-layout>div{min-width:0}}
/* Keep the wordmark inside the compact header while the vine can overhang. */
@media(min-width:1180px){.site-header .header-inner{min-height:146px}.site-header .brand-art{height:146px}.site-header .brand-art img{top:-18px}.site-header.is-compact .header-inner{min-height:78px}.site-header.is-compact .brand-art img{width:205px;top:-12px}}
@media(max-width:480px){.site-header .brand-art img{top:-8px}.site-header.is-compact .brand-art img{top:-8px}}

/* Stable document footprint: only the visible header contracts, never page flow. */
.site-header{--header-reserved:146px;--header-visible:146px;height:var(--header-reserved);min-height:var(--header-reserved);background:transparent;box-shadow:none;pointer-events:none;overflow:visible}
.site-header::before{content:"";position:absolute;inset:0 0 auto;height:var(--header-visible);background:#fff;box-shadow:0 4px 18px rgba(23,54,75,.07);z-index:-1;transition:height .2s}
.site-header.is-compact{--header-visible:78px}
.site-header .header-inner{pointer-events:auto}
.hero-product,.range-image,.friendship-photo>img,.featured-photo,.home-collection,.home-featured-card{box-shadow:0 16px 36px rgba(23,54,75,.10),0 3px 9px rgba(69,48,38,.06)}
.product-card{box-shadow:0 10px 26px rgba(23,54,75,.08),0 2px 6px rgba(69,48,38,.04)}
.product-card .card-media{box-shadow:inset 0 -1px 0 rgba(23,54,75,.04)}
@media(max-width:1179px){.site-header{--header-reserved:110px;--header-visible:110px}}
@media(max-width:480px){.site-header{--header-reserved:92px;--header-visible:92px}.site-header.is-compact{--header-visible:70px}.hero-product,.range-image,.featured-photo,.friendship-photo>img{box-shadow:0 10px 25px rgba(23,54,75,.10),0 2px 6px rgba(69,48,38,.04)}}
@media(prefers-reduced-motion:reduce){.site-header::before{transition:none}}


/* Collection previews: keep each gallery independent and controls accessible. */
.range-section .eyebrow{color:#d85f6a}
.range-card{min-width:0;color:#17364b}
.range-image>a{display:block;width:100%;height:100%}
.range-image [data-collection-slide][hidden]{display:none}
.range-image .collection-arrow{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:1px solid #17364b20;border-radius:50%;background:rgba(255,255,255,.94);color:#17364b;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 3px 12px #17364b12;z-index:1}
.range-image .collection-prev{left:12px}.range-image .collection-next{right:12px}
.range-image .collection-arrow:hover{background:#fbe5e5;border-color:#d85f6a}
.range-image .collection-arrow:focus-visible{outline:3px solid #d85f6a;outline-offset:3px}
.range-image .range-index{width:auto;min-width:44px;padding:0 10px;border-radius:999px}
.range-caption{text-align:center;display:block;position:static}
.range-caption h3 a{color:inherit;text-decoration:none}
.range-caption h3 a:hover{text-decoration:underline;text-underline-offset:5px}
.range-browse{text-align:center;margin-top:38px}

.range-caption p{color:#d85f6a}

/* Shared thread-pink accents and consistent interactive feedback. */
:root{--thread-pink:#d85f6a}
body .eyebrow,body .home-kicker,body .pillar-number,body .pld-pillar-grid>article>span{color:var(--thread-pink)}
body a:hover,body .text-link:hover,body .site-nav .nav-list a:hover,body .footer-links a:hover,body .range-caption h3 a:hover,body .product-grid .card h3 a:hover{color:var(--thread-pink)}
body .button:hover,body button:not(:disabled):hover,body input[type=submit]:hover,body .site-nav .nav-cta .button:hover,body .catalogue-filters .catalogue-filter:hover,body .catalogue-filters .catalogue-filter[aria-pressed=true]:hover,body .range-image .collection-arrow:hover,body .pld-sticky-social-link:hover{background:var(--thread-pink);border-color:var(--thread-pink);color:#102c3c}
body .hero-product figcaption>span{font-size:12px;font-weight:700;color:#4c6650;line-height:1.6}
body .maker-seal{gap:3px;padding:8px;text-align:center;line-height:1.35}
body .maker-seal>span{display:block;width:100%}
body .maker-seal em{display:block;line-height:1.2}
body main .eyebrow,body main .home-kicker,body main .pillar-number,body .purpose-close .eyebrow{color:var(--thread-pink)}

/* Readable supporting copy, matched to the photo caption green. */
body .welcome-copy .hero-footnote{font-size:12px!important;color:#4c6650;line-height:1.8}


/* Keep pillar hover feedback on the action itself. */
body main .eyebrow,body main .home-kicker{font-size:12px}
body main .pillar-card .pillar-number,body .pld-pillar-grid>article>span{font-size:11px;color:#4c6650}
.pillar-card .text-link{align-self:flex-start;color:#17364b}
.pillar-card .text-link:hover{color:var(--thread-pink)}

/* A quiet echo of the logo's flower behind the custom-piece note. */
.beyond-note{position:relative;isolation:isolate;overflow:hidden}
.beyond-note::before{content:"";position:absolute;right:-12px;top:0;width:280px;height:440px;background:url('../images/brand/patricia-floral-vine.webp') no-repeat left top/1050px auto;opacity:.16;pointer-events:none;z-index:-1;clip-path:polygon(0 0,100% 0,100% 25%,70% 39%,70% 100%,0 100%);transform:rotate(12deg);transform-origin:center}
.beyond-note>span{color:#4c6650}
@media(max-width:480px){.beyond-note::before{right:-35px;opacity:.13}}


/* Let the flower peek out behind the opaque card. */
.beyond-section{overflow:hidden}
.beyond-note{background:transparent;overflow:visible;border-color:transparent}
.beyond-note::after{content:"";position:absolute;inset:-1px;background:#fffaf5;border:1px solid #e7dcd0;border-radius:inherit;z-index:-1;pointer-events:none}
.beyond-note::before{right:-115px;top:-85px;width:310px;height:490px;opacity:.22;z-index:-2;transform:rotate(10deg)}
@media(max-width:480px){.beyond-note::before{right:-65px;top:-65px;width:250px;opacity:.18}}

/* Diagonal floral flow into and out of the card edges. */
.beyond-note::before{right:-65px;top:-120px;height:610px;transform:rotate(32deg);transform-origin:center}
@media(max-width:480px){.beyond-note::before{right:-50px;top:-90px;height:570px;transform:rotate(27deg)}}



/* Complete, uncropped ornament: all stems finish in leaves or buds. */
.beyond-section{padding-top:110px;padding-bottom:135px}
.beyond-note::before{background:url('../images/brand/floral-complete-v1.webp') no-repeat center/contain;clip-path:none;width:560px;height:560px;right:clamp(-110px,calc((1240px - 100vw)/2 + 70px),-10px);top:-85px;transform:rotate(15deg);opacity:.22}
@media(max-width:800px){.beyond-section{padding-top:110px;padding-bottom:110px}.beyond-note::before{width:450px;height:450px;right:0;top:-100px;transform:none;opacity:.18}}
@media(max-width:480px){.beyond-note::before{width:100%;height:440px;right:0;top:-100px}}

/* Reverse the floral flow and nudge the ornament right. */
.beyond-note::before{right:clamp(-134px,calc((1240px - 100vw)/2 + 46px),-34px);transform:rotate(-15deg) scaleX(-1)}
@media(max-width:800px){.beyond-note::before{right:-20px;transform:scaleX(-1)}}


/* Fine forest-green outline for the custom-piece card. */
.beyond-note::after{border:1px solid #4c6650}


/* Fine forest-green outline for collection photo frames. */
.range-image{border:1px solid #4c6650}



/* A quiet, starlit setting for the dream they share. */
.purpose-close{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,rgba(213,166,176,.11),transparent 58%),linear-gradient(125deg,#142f42,#23495a 52%,#17364b);padding-block:90px 95px}
.purpose-close>.shell{position:relative;z-index:1;max-width:860px}
.dream-ornament{display:flex;align-items:center;justify-content:center;gap:18px;color:#e2b3b8;margin:0 auto 22px}
.dream-ornament i{width:65px;height:1px;background:linear-gradient(90deg,transparent,#d7a6ad)}
.dream-ornament i:last-child{transform:scaleX(-1)}
.dream-ornament span{font-size:24px;line-height:1}
body .purpose-close .eyebrow{color:#e2b3b8;font-size:11px;letter-spacing:.24em;margin-bottom:25px}
.purpose-close h2{font-size:clamp(30px,3.1vw,44px);line-height:1.25;margin:0 auto 24px;letter-spacing:-.025em}
.purpose-close h2>span{display:block}
.purpose-close h2>em{display:block;color:#ebc5ca;font-size:.93em;line-height:1.35;margin-top:12px}
.purpose-close p:not(.eyebrow){max-width:620px;margin:0 auto 22px;color:#e1e7e5;line-height:1.95}
.purpose-close .button{margin-top:10px;box-shadow:0 5px 26px #0a233930}
.dream-stars{position:absolute;inset:0;pointer-events:none;z-index:0}
.dream-stars span{position:absolute;color:#e2b3b8;opacity:.4;font-size:20px}
.dream-stars span:nth-child(1){left:12%;top:24%;font-size:25px}
.dream-stars span:nth-child(2){left:23%;top:66%;font-size:13px;opacity:.25}
.dream-stars span:nth-child(3){left:8%;top:80%;font-size:11px;opacity:.2}
.dream-stars span:nth-child(4){right:12%;top:35%;font-size:29px}
.dream-stars span:nth-child(5){right:25%;top:16%;font-size:12px;opacity:.25}
.dream-stars span:nth-child(6){right:20%;top:81%;font-size:15px;opacity:.3}
@media(max-width:600px){.purpose-close{padding-block:65px 70px}.purpose-close h2{font-size:30px}.purpose-close h2>span{max-width:300px;margin:auto}.dream-stars span:nth-child(1){left:4%;top:11%}.dream-stars span:nth-child(4){right:4%;top:70%}.dream-stars span:nth-child(2),.dream-stars span:nth-child(5){display:none}}

/* Keep homepage card actions aligned while allowing long labels to wrap. */
.pillar-card .button{align-self:flex-start;margin-top:auto;max-width:100%;white-space:normal}