/* ==========================================================================
   MosStone Property — design system
   Warm, locally rooted, mobile-first. No web fonts, no third-party requests.
   ========================================================================== */

/* --- Tokens -------------------------------------------------------------
   Every colour below is taken from the MosStone logo. The logo is 3.1% navy,
   2.2% sage, 0.7% red and 0.7% gold on cream — so the site follows the same
   proportions: navy carries the structure, sage and gold mark the two
   audiences, and red is used sparingly as the focal accent, exactly the way
   the middle house is the one that catches your eye.
   ------------------------------------------------------------------------ */
:root {
  /* Straight from the logo file */
  --paper:      #FDF9F3;   /* logo background cream */
  --navy:       #0D2546;   /* logo navy — wordmark, window panes */
  --sage:       #858961;   /* logo sage — right-hand house */
  --red:        #D71920;   /* logo red — centre house */
  --gold:       #AF931E;   /* logo gold — left-hand house */

  /* Derived, contrast-checked against cream and sand */
  --sand:       #F4EDE1;   /* alternating section background */
  --sand-deep:  #E7DCC8;   /* borders, rules */
  --ink:        #0D2546;   /* headings, dark sections */
  --ink-soft:   #1B3557;
  --body:       #414F63;   /* body copy */
  --muted:      #5A6779;   /* captions, meta */

  --navy-deep:  #071A33;   /* button hover */
  --action:     #0D2546;   /* primary buttons — the dominant logo colour */
  --action-deep:#071A33;

  --red-text:   #C8161C;   /* red at text-safe contrast: links, eyebrows */
  --red-tint:   #FBE7E7;
  --gold-text:  #846800;   /* gold at text-safe contrast */
  --gold-tint:  #F8F0D6;
  --sage-text:  #6A6E46;   /* sage at text-safe contrast */
  --sage-tint:  #ECEEE1;
  --sage-deep:  #4E5238;   /* CTA band background */

  --white:      #FFFFFF;

  /* On navy */
  --on-navy:      #C5D0DE;
  --on-navy-mute: #93A3B8;
  --on-navy-gold: #D9BC4A;

  /* Type */
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Spacing scale */
  --s1: 0.5rem;  --s2: 0.75rem; --s3: 1rem;   --s4: 1.5rem;
  --s5: 2rem;    --s6: 3rem;    --s7: 4rem;   --s8: 6rem;

  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(13,37,70,.06), 0 2px 8px rgba(13,37,70,.05);
  --shadow-md: 0 2px 4px rgba(13,37,70,.07), 0 10px 30px rgba(13,37,70,.10);
  --maxw: 1120px;
  --measure: 68ch;
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 1.0625rem;      /* 17px — comfortable on mobile */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 var(--s3);
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.1rem, 6.2vw, 3.4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 4.2vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 2.6vw, 1.4rem); line-height: 1.25; }
h4 { font-size: 1.0625rem; font-family: var(--sans); font-weight: 700; letter-spacing: 0; }
p { margin: 0 0 var(--s3); max-width: var(--measure); }
a { color: var(--red-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: #A01216; }
:focus-visible {
  outline: 3px solid var(--sage-deep);
  outline-offset: 2px;
  border-radius: 3px;
}
hr { border: 0; border-top: 1px solid var(--sand-deep); margin: var(--s6) 0; }

/* --- Layout ------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s4); }
.wrap--narrow { max-width: 760px; }
.section { padding-block: var(--s7); }
@media (min-width: 800px) { .section { padding-block: var(--s8); } }
.section--sand { background: var(--sand); }
.section--ink  { background: var(--ink); color: var(--on-navy); }
.section--ink h2, .section--ink h3, .section--ink h4 { color: var(--white); }
.section--tight { padding-block: var(--s6); }

.eyebrow {
  font-size: .8125rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--red-text); margin: 0 0 var(--s2);
}
.section--ink .eyebrow { color: var(--on-navy-gold); }
.lede { font-size: clamp(1.1rem, 2.4vw, 1.3rem); line-height: 1.55; color: var(--ink-soft); }
.section--ink .lede { color: #B4C2D3; }
.center { text-align: center; }
.center p { margin-inline: auto; }

.grid { display: grid; gap: var(--s4); }
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 620px) and (max-width: 899px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }

/* --- Skip link ---------------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--white); padding: var(--s2) var(--s3);
}
.skip:focus { left: var(--s3); top: var(--s3); }

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,248,243,.92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--sand-deep);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); min-height: 74px;
}
@media (min-width: 900px) { .site-header__inner { min-height: 90px; } }
.logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.logo img { height: 46px; width: auto; display: block; }
@media (min-width: 900px) { .logo img { height: 58px; } }
.site-footer .logo img { height: 62px; }
.logo__mark { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.logo__sub { font-size: .625rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--action); }

.nav-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 1px solid var(--sand-deep); border-radius: var(--radius);
  padding: .5rem .85rem; font: inherit; font-size: .9375rem; color: var(--ink);
  cursor: pointer; min-height: 44px;
}
.nav-toggle:hover { background: var(--sand); }
.nav-toggle__bars { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink);
}
.nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; }

.nav { display: none; }
.nav[data-open="true"] {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-bottom: 1px solid var(--sand-deep);
  box-shadow: var(--shadow-md); padding: var(--s3) var(--s4) var(--s4);
}
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: block; padding: .7rem .25rem; color: var(--ink); text-decoration: none;
  font-weight: 500; border-bottom: 1px solid var(--sand-deep);
}
.nav a:hover { color: var(--red-text); }
.nav a[aria-current="page"] { color: var(--navy); font-weight: 700; }
/* .nav a would otherwise out-specify .btn--primary and hide the label */
.nav a.btn--primary { color: var(--white); }
.nav a.btn--primary:hover { color: var(--white); }
.nav a.btn--ghost { color: var(--ink); }
.nav a.btn--ghost:hover { color: var(--white); }
.nav a.btn[aria-current="page"] { color: var(--white); box-shadow: none; }
.nav .nav__cta { margin-top: var(--s3); }

/* Seven nav links plus the CTA need ~1100px to sit on one row. Below that the
   hamburger is cleaner than a nav that wraps onto two lines. */
@media (min-width: 1100px) {
  .nav-toggle { display: none; }
  .nav, .nav[data-open="true"] {
    display: block; position: static; background: none; border: 0;
    box-shadow: none; padding: 0;
  }
  .nav ul { flex-direction: row; align-items: center; gap: var(--s4); }
  .nav a { border-bottom: 0; padding: .25rem 0; font-size: .9375rem; }
  .nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--red); }
  .nav .nav__cta { margin-top: 0; }
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: var(--radius); border: 1.5px solid transparent;
  font: inherit; font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
  min-height: 48px;  /* comfortable tap target */
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--action); color: var(--white); }
.btn--primary:hover { background: var(--action-deep); color: var(--white); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--white); }
.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--sand); color: var(--ink); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* --- Hero --------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(120% 90% at 85% 0%, #F8F1DE 0%, rgba(248,241,222,0) 60%),
    linear-gradient(180deg, var(--sand) 0%, var(--paper) 100%);
  padding-block: var(--s6) var(--s5);
  border-bottom: 1px solid var(--sand-deep);
}
@media (min-width: 800px) { .hero { padding-block: var(--s8) var(--s7); } }
.hero h1 { max-width: 16ch; }
.hero .lede { max-width: 54ch; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-top: var(--s4);
  font-size: .875rem; color: var(--muted); list-style: none; padding: 0;
}
.hero__meta li { display: flex; align-items: center; gap: .4rem; }

.page-head { background: var(--sand); border-bottom: 1px solid var(--sand-deep); padding-block: var(--s6); }
.page-head h1 { margin-bottom: var(--s3); }

/* --- Path cards (the audience split) ------------------------------------ */
.paths { display: grid; gap: var(--s4); margin-top: var(--s5); }
@media (min-width: 820px) { .paths { grid-template-columns: 1fr 1fr; gap: var(--s5); } }
.path {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--sand-deep); border-radius: var(--radius-lg);
  padding: var(--s5); box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative; overflow: hidden;
}
.path::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--gold);
}
.path--seller::before { background: var(--sage); }
.path:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #D9CCB4; }
.path h2 { font-size: clamp(1.4rem, 3.4vw, 1.75rem); margin-bottom: var(--s2); }
.path__for { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); margin-bottom: var(--s2); }
.path--seller .path__for { color: var(--sage-text); }
.path ul { list-style: none; padding: 0; margin: 0 0 var(--s4); }
.path li { padding-left: 1.5rem; position: relative; margin-bottom: .45rem; }
.path li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--gold-tint); border: 2px solid var(--gold);
}
.path--seller li::before { background: var(--sage-tint); border-color: var(--sage); }
.path .btn { margin-top: auto; }

/* --- Cards -------------------------------------------------------------- */
.card {
  background: var(--white); border: 1px solid var(--sand-deep); border-radius: var(--radius);
  padding: var(--s4); box-shadow: var(--shadow-sm); height: 100%;
}
.section--sand .card { border-color: #DBCEB5; }
.card h3 { margin-bottom: var(--s2); }
.card p:last-child { margin-bottom: 0; }
.card__tag {
  display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sage-text); background: var(--sage-tint);
  padding: .25rem .5rem; border-radius: 4px; margin-bottom: var(--s2);
}
/* Three cards in a row echo the logo's three houses: gold, red, sage */
.grid > *:nth-child(3n+1) .card__tag { color: var(--gold-text); background: var(--gold-tint); }
.grid > *:nth-child(3n+2) .card__tag { color: var(--red-text);  background: var(--red-tint); }

/* Numbered process steps */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s4); }
@media (min-width: 760px) { .steps--row { grid-template-columns: repeat(2, 1fr); } }
.steps li {
  counter-increment: step; position: relative; padding-left: 3.25rem;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--serif); font-size: 1.15rem; color: var(--gold-text);
  background: var(--gold-tint); width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center; border-radius: 50%;
}
.steps h3 { font-size: 1.0625rem; font-family: var(--sans); font-weight: 700; letter-spacing: 0; margin-bottom: .25rem; }
.steps p { margin-bottom: 0; }

/* --- Trust / compliance ------------------------------------------------- */
.trust-strip {
  background: var(--white); border-block: 1px solid var(--sand-deep);
  padding-block: var(--s4);
}
.trust-strip ul {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: var(--s2) var(--s5); justify-content: center; align-items: center;
  font-size: .875rem; font-weight: 600; color: var(--ink-soft);
}
.trust-strip li { display: flex; align-items: center; gap: .5rem; }
.trust-strip svg { flex: none; color: var(--sage-deep); }

.credential {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); padding: var(--s4); height: 100%;
}
.credential h3 { font-size: 1.0625rem; font-family: var(--sans); font-weight: 700; letter-spacing: 0; margin-bottom: .4rem; color: var(--white); }
.credential p { color: var(--on-navy); font-size: .9375rem; margin-bottom: 0; }
.credential__icon { color: var(--on-navy-gold); margin-bottom: var(--s2); }
.credential__ref { display: block; margin-top: var(--s2); font-size: .8125rem; color: var(--on-navy-mute); font-variant-numeric: tabular-nums; }

/* --- Partner cards ------------------------------------------------------ */
.partner {
  background: var(--white); border: 1px solid var(--sand-deep); border-radius: var(--radius-lg);
  padding: var(--s5); box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.partner__badge {
  display: inline-flex; align-self: flex-start; align-items: center; gap: .4rem;
  background: var(--red-tint); color: var(--action-deep); font-size: .8125rem; font-weight: 700;
  padding: .3rem .65rem; border-radius: 999px; margin-bottom: var(--s3);
}
.partner__meta {
  margin: var(--s3) 0 0; padding-top: var(--s3); border-top: 1px solid var(--sand-deep);
  font-size: .875rem; color: var(--muted); list-style: none;
}
.partner__meta li { margin-bottom: .3rem; }
.partner__meta strong { color: var(--ink-soft); }
.partner .btn { margin-top: var(--s4); align-self: flex-start; }

/* --- Sam / portrait block ----------------------------------------------- */
.bio { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 860px) { .bio { grid-template-columns: 320px 1fr; gap: var(--s6); } }
.portrait {
  border-radius: var(--radius-lg); overflow: hidden; background: var(--sand);
  border: 1px solid var(--sand-deep); box-shadow: var(--shadow-sm);
}
.portrait picture { display: block; }
/* Sam's photo is a cut-out with a transparent background, so it sits inside the
   sand panel rather than being cropped to fill it — nothing gets sliced off. */
.portrait img {
  width: 100%; aspect-ratio: 9 / 10;
  object-fit: contain; object-position: center bottom;
}
.portrait figcaption { padding: var(--s2) var(--s3); font-size: .8125rem; color: var(--muted); background: var(--white); }

.pull {
  border-left: 4px solid var(--red); padding: var(--s1) 0 var(--s1) var(--s4);
  margin: var(--s5) 0; font-family: var(--serif); font-size: clamp(1.15rem, 2.8vw, 1.45rem);
  line-height: 1.4; color: var(--ink);
}
.pull p { margin-bottom: 0; }
.pull cite { display: block; margin-top: var(--s2); font: 500 .875rem/1.4 var(--sans); font-style: normal; color: var(--muted); }

/* --- Stats -------------------------------------------------------------- */
.stat { text-align: left; }
.stat__num { font-family: var(--serif); font-size: clamp(2rem, 5vw, 2.75rem); color: var(--action); line-height: 1; display: block; }
.stat__label { display: block; margin-top: var(--s2); font-size: .9375rem; color: var(--body); }
.section--ink .stat__num { color: var(--on-navy-gold); }
.section--ink .stat__label { color: var(--on-navy); }

/* --- Forms -------------------------------------------------------------- */
.form { display: grid; gap: var(--s4); max-width: 640px; }
.field { display: grid; gap: .4rem; }
.field label { font-weight: 600; color: var(--ink); font-size: .9375rem; }
.field .hint { font-size: .8125rem; color: var(--muted); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--white);
  border: 1.5px solid var(--sand-deep); border-radius: var(--radius);
  padding: .75rem .85rem; width: 100%; min-height: 48px;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #D9CCB4; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--sage-deep); outline: 2px solid var(--sage-tint); outline-offset: 0; }
.field--error input, .field--error select, .field--error textarea { border-color: var(--red); }
.field__error { font-size: .8125rem; color: #A81216; font-weight: 600; }
.field--check { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .65rem; }
.field--check .field__error { flex-basis: 100%; margin: 0; }
.field--check input { width: 20px; height: 20px; min-height: 0; flex: none; margin-top: .2rem; accent-color: var(--navy); }
.field--check label { font-weight: 400; font-size: .9375rem; color: var(--body); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: .875rem; color: var(--muted); max-width: 640px; }

.form-status {
  border-radius: var(--radius); padding: var(--s4); margin-bottom: var(--s4);
  border: 1.5px solid var(--sage-deep); background: var(--sage-tint); color: var(--ink);
}
.form-status h3 { margin-bottom: var(--s2); }
.form-status p:last-child { margin-bottom: 0; }
.form-status--error { border-color: var(--red); background: var(--red-tint); }
.form-status ol { margin: var(--s2) 0 0; padding-left: 1.2rem; }
.form-status li { margin-bottom: .35rem; }
[hidden] { display: none !important; }

/* --- Insights ----------------------------------------------------------- */
.post-card {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--sand-deep); border-radius: var(--radius);
  padding: var(--s4); box-shadow: var(--shadow-sm); height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.post-card__meta { font-size: .8125rem; color: var(--muted); margin-bottom: var(--s2); display: flex; flex-wrap: wrap; gap: .5rem; }
.post-card__meta span::after { content: "·"; margin-left: .5rem; color: var(--sand-deep); }
.post-card__meta span:last-child::after { content: ""; margin: 0; }
.post-card h3 { margin-bottom: var(--s2); }
.post-card h3 a { color: var(--ink); text-decoration: none; }
.post-card h3 a:hover { color: var(--red-text); }
.post-card p { flex: 1; }
.post-card__more { font-weight: 600; font-size: .9375rem; text-decoration: none; }
.post-card__more:hover { text-decoration: underline; }

.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--s6); }
.prose h3 { margin-top: var(--s5); }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 var(--s3); }
.prose li { margin-bottom: .5rem; }
.prose > p:first-of-type { font-size: 1.15rem; color: var(--ink-soft); }
.article-meta { font-size: .875rem; color: var(--muted); margin-bottom: var(--s3); }
.callout {
  background: var(--sage-tint); border-left: 4px solid var(--sage-deep);
  border-radius: 0 var(--radius) var(--radius) 0; padding: var(--s4); margin: var(--s5) 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout h3 { margin-top: 0; font-size: 1.0625rem; font-family: var(--sans); font-weight: 700; letter-spacing: 0; }

/* --- FAQ / details ------------------------------------------------------ */
.faq { border-top: 1px solid var(--sand-deep); }
.faq details { border-bottom: 1px solid var(--sand-deep); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s4) 2.5rem var(--s4) 0;
  font-weight: 600; color: var(--ink); position: relative; font-size: 1.0625rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; color: var(--red-text); font-family: var(--serif); line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding-bottom: var(--s4); }
.faq p:last-child { margin-bottom: 0; }

/* --- Risk / legal note -------------------------------------------------- */
.risk-note {
  border: 1px solid var(--sand-deep); border-radius: var(--radius);
  background: var(--white); padding: var(--s4);
  font-size: .875rem; color: var(--muted);
}
.risk-note strong { color: var(--ink-soft); }
.risk-note p { max-width: none; }
.risk-note p:last-child { margin-bottom: 0; }

/* --- CTA band ----------------------------------------------------------- */
.cta-band { background: var(--sage-deep); color: #E4E7D7; }
.cta-band h2, .cta-band h3 { color: var(--white); }
.cta-band .lede { color: #D8DCC7; }
.cta-band a:not(.btn) { color: var(--white); }

/* --- Contact tiles ------------------------------------------------------ */
.contact-tile {
  display: flex; gap: var(--s3); align-items: flex-start;
  background: var(--white); border: 1px solid var(--sand-deep);
  border-radius: var(--radius); padding: var(--s4); text-decoration: none; color: var(--body);
  box-shadow: var(--shadow-sm); height: 100%;
}
.contact-tile:hover { border-color: var(--navy); color: var(--body); }
.contact-tile__icon { color: var(--red-text); flex: none; margin-top: 2px; }
.contact-tile strong { display: block; color: var(--ink); font-size: 1.0625rem; margin-bottom: .15rem; }
.contact-tile span { font-size: .9375rem; }

/* --- Footer ------------------------------------------------------------- */
.site-footer { background: var(--ink); color: #A8B6C7; padding-block: var(--s7) var(--s5); font-size: .9375rem; }
.site-footer a { color: #DCE4EE; text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer h4 { color: var(--white); font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--s3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .55rem; }
.footer-grid { display: grid; gap: var(--s5); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s5); } }
.site-footer .logo__mark { color: var(--white); }
.site-footer .logo__sub { color: var(--on-navy-gold); }
.footer-bottom {
  margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); justify-content: space-between;
  font-size: .8125rem; color: #93A3B8;
}
.footer-bottom p { margin: 0; max-width: none; }

/* --- Cookie notice ------------------------------------------------------ */
.cookie {
  position: fixed; left: var(--s3); right: var(--s3); bottom: var(--s3); z-index: 100;
  background: var(--white); border: 1px solid var(--sand-deep); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: var(--s4);
  display: flex; flex-direction: column; gap: var(--s3);
}
@media (min-width: 760px) {
  .cookie { left: auto; max-width: 420px; flex-direction: column; }
}
.cookie p { font-size: .875rem; margin: 0; }

/* --- Utilities ---------------------------------------------------------- */
.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;
}
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--s4); } .mt-5 { margin-top: var(--s5); } .mt-6 { margin-top: var(--s6); }
.stack > * + * { margin-top: var(--s4); }

/* --- Solution finder (quiz) ---------------------------------------------
   Stepped question flow on solutions.html. Works as a plain form if the
   script fails: every step is visible and the submit button still posts.
   ------------------------------------------------------------------------ */
.quiz {
  background: var(--white); border: 1px solid var(--sand-deep);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: var(--s4); max-width: 760px;
}
@media (min-width: 720px) { .quiz { padding: var(--s5); } }

.quiz__bar { height: 5px; background: var(--sand); border-radius: 999px; overflow: hidden; margin-bottom: var(--s2); }
.quiz__bar span { display: block; height: 100%; width: 0; background: var(--red); transition: width .3s ease; }
.quiz__count { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s4); }

.quiz__step[hidden] { display: none !important; }
.quiz fieldset { border: 0; margin: 0; padding: 0; }
.quiz legend {
  font-family: var(--serif); font-size: clamp(1.25rem, 3.2vw, 1.6rem); color: var(--ink);
  line-height: 1.2; margin-bottom: var(--s2); padding: 0;
}
.quiz__hint { font-size: .9375rem; color: var(--muted); margin-bottom: var(--s4); }

.quiz__options { display: grid; gap: .6rem; margin-bottom: var(--s4); }
.quiz__option { position: relative; display: block; }
.quiz__option input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
.quiz__option span {
  display: block; padding: .9rem 1rem .9rem 3rem; min-height: 48px;
  border: 1.5px solid var(--sand-deep); border-radius: var(--radius);
  background: var(--paper); cursor: pointer; font-size: 1rem; color: var(--ink);
  transition: border-color .15s ease, background-color .15s ease;
}
.quiz__option span::before {
  content: ""; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #BCAF97; background: var(--white);
}
.quiz__option span:hover { border-color: #C9BAA1; background: var(--sand); }
.quiz__option input:checked + span { border-color: var(--navy); background: var(--sage-tint); font-weight: 600; }
.quiz__option input:checked + span::before { border-color: var(--navy); background: var(--navy); box-shadow: inset 0 0 0 4px var(--white); }
.quiz__option input:focus-visible + span { outline: 3px solid var(--sage-deep); outline-offset: 2px; }

.quiz__nav { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.quiz__back {
  background: none; border: 0; font: inherit; font-size: .9375rem; font-weight: 600;
  color: var(--muted); cursor: pointer; padding: .75rem .25rem; min-height: 44px;
}
.quiz__back:hover { color: var(--ink); text-decoration: underline; }
.quiz__error { color: #A81216; font-weight: 600; font-size: .9375rem; margin: 0 0 var(--s3); }

/* Result */
.quiz__result { border-top: 1px solid var(--sand-deep); padding-top: var(--s4); }
.solution {
  border: 1.5px solid var(--sand-deep); border-left: 5px solid var(--gold);
  border-radius: var(--radius); padding: var(--s4); margin-bottom: var(--s3);
  background: var(--paper);
}
.solution:first-of-type { border-left-color: var(--red); }
.solution h4 {
  font-family: var(--serif); font-size: 1.2rem; font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink); margin-bottom: .4rem;
}
.solution p:last-child { margin-bottom: 0; }
.solution__why {
  font-size: .875rem; color: var(--muted); margin-top: var(--s2);
  padding-top: var(--s2); border-top: 1px dashed var(--sand-deep);
}
.quiz__answers { font-size: .875rem; color: var(--muted); }
.quiz__answers dt { font-weight: 600; color: var(--ink-soft); margin-top: .5rem; }
.quiz__answers dd { margin: 0; }

/* Toolkit grid */
.tool { border-top: 3px solid var(--sand-deep); padding-top: var(--s3); }
.tool:nth-child(3n+1) { border-top-color: var(--gold); }
.tool:nth-child(3n+2) { border-top-color: var(--red); }
.tool:nth-child(3n+3) { border-top-color: var(--sage); }
.tool h3 { font-size: 1.0625rem; font-family: var(--sans); font-weight: 700; letter-spacing: 0; margin-bottom: .35rem; }
.tool p { font-size: .9375rem; margin-bottom: 0; }