/* ============================================================
   Bolthole — BUILD-READY Platform
   styles.css — Complete design token system + all component styles
   ============================================================ */

/* ========== DESIGN TOKENS ========== */
:root {
  /* Brand colours */
  --teal: #5C8482;
  --turquoise: #93BBB9;
  --turquoise-light: rgba(147, 187, 185, 0.12);
  --copper: #D39565;
  --copper-dark: #c2885B;
  --terracotta: #C2533A;
  --charcoal: #3a3a3a;
  --charcoal-light: #5a5a5a;
  --beige: #F8F7F5;
  --blue-green: #F1F7F6;
  --white: #FFFFFF;

  /* Layout */
  --sidebar-width: 260px;
  --sidebar-collapsed: 68px;

  /* Typography */
  --font-heading: 'Lato', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;

  /* Misc */
  --radius: 4px;

  /* Category colours (used by progress bar + results) */
  /* Category colours — Spatial = teal, Decision = copper, Site = turquoise */
  --spatial: #6B9E9C;
  --spatial-light: rgba(107, 158, 156, 0.1);
  --decision: #d39565;
  --site: #C2533A;
  --site-light: rgba(194, 83, 58, 0.08);
}


/* ========== RESET ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--charcoal);
  background: var(--beige);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  height: 100vh;
  letter-spacing: 0.01em;
  line-height: 1.85;
}


/* ========== OTP CODE INPUT ========== */
.otp-inputs {
  display: flex; gap: 10px; justify-content: center; margin: 1.5rem 0;
}
.otp-digit {
  width: 48px; height: 56px; text-align: center;
  font-family: var(--font-body); font-size: 1.4rem; font-weight: 500;
  border: 1.5px solid #d8d5d0; border-radius: 6px;
  color: var(--charcoal); outline: none; transition: border-color 0.2s;
  background: var(--white);
}
.otp-digit:focus { border-color: var(--teal); }

.auth-error {
  color: var(--terracotta); font-size: 0.85rem; margin-bottom: 1rem;
  line-height: 1.5; text-align: center;
}

/* Remove old password gate — no longer used */
  background: transparent; color: var(--charcoal);
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 500;
  cursor: pointer; transition: all 0.25s; margin-top: 1rem;
}
.pw-btn:hover { background: var(--copper); color: white; border-color: var(--copper); }

.pw-error { color: var(--terracotta); font-size: 0.8rem; margin-top: 0.5rem; display: none; }


/* ========== APP SHELL ========== */
.app { display: flex; height: 100vh; opacity: 0; transition: opacity 0.5s; }
.app.visible { opacity: 1; }


/* ========== SIDEBAR ========== */
.sidebar {
  width: var(--sidebar-width); background: var(--white);
  border-right: 1px solid #eae8e4; display: flex; flex-direction: column;
  transition: width 0.3s ease; overflow: hidden; flex-shrink: 0;
}
.sidebar.collapsed { width: var(--sidebar-collapsed); }

/* Sidebar header */
.sh { padding: 1.25rem; display: flex; align-items: center; border-bottom: 1px solid #f0efed; min-height: 64px; }
.sh .wm { height: 22px; width: auto; transition: opacity 0.2s; }
.sh .cm { width: 32px; height: 32px; display: none; }
.sidebar.collapsed .sh .wm { display: none; }
.sidebar.collapsed .sh .cm { display: block; }

/* Sidebar toggle */
.sidebar-toggle {
  position: absolute; top: 18px; left: calc(var(--sidebar-width) - 18px);
  width: 36px; height: 36px; border-radius: 50%; background: var(--white);
  border: 1px solid #e0ddd8; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 10; transition: left 0.3s ease; box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  -webkit-tap-highlight-color: transparent;
}
.sidebar.collapsed ~ .sidebar-toggle { left: calc(var(--sidebar-collapsed) - 18px); }
.sidebar-toggle svg { width: 16px; height: 16px; stroke: var(--charcoal-light); fill: none; stroke-width: 2; transition: transform 0.3s; }
.sidebar.collapsed ~ .sidebar-toggle svg { transform: rotate(180deg); }

/* Sidebar nav */
.sn { flex: 1; padding: 1rem 0.75rem; overflow-y: auto; }

.nsl {
  font-family: var(--font-heading); font-weight: 400; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--turquoise);
  padding: 0.75rem 0.75rem 0.35rem; white-space: nowrap; overflow: hidden;
}
.sidebar.collapsed .nsl { opacity: 0; height: 0; padding: 0; }

.ni {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.75rem; border-radius: var(--radius); cursor: pointer;
  transition: background 0.15s; margin-bottom: 2px; text-decoration: none;
  color: var(--charcoal); white-space: nowrap; overflow: hidden;
}
.ni:hover { background: var(--blue-green); }
.ni.active { background: var(--turquoise-light); color: var(--teal); }
.ni.active .nic svg { stroke: var(--teal); }
.ni.dis { opacity: 0.35; cursor: default; pointer-events: none; }

.nic {
  width: 20px; height: 20px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.nic svg { width: 18px; height: 18px; stroke: var(--charcoal-light); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.nl { font-size: 0.85rem; font-weight: 400; transition: opacity 0.2s; }
.sidebar.collapsed .nl { opacity: 0; width: 0; }

.nb {
  font-size: 0.62rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--turquoise); background: var(--turquoise-light);
  padding: 0.15rem 0.45rem; border-radius: 3px; margin-left: auto; white-space: nowrap;
}
.sidebar.collapsed .nb { display: none; }

/* Sidebar profile */
.sp {
  padding: 0.75rem; border-top: 1px solid #f0efed;
  display: flex; align-items: center; gap: 0.65rem;
  cursor: pointer; transition: background 0.15s;
}
.sp:hover { background: var(--blue-green); }

.pa { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.pa svg { width: 34px; height: 34px; }

.pi { overflow: hidden; transition: opacity 0.2s; }
.sidebar.collapsed .pi { opacity: 0; width: 0; }
.pn { font-size: 0.82rem; font-weight: 500; color: var(--charcoal); white-space: nowrap; }
.pe { font-size: 0.7rem; color: var(--charcoal-light); white-space: nowrap; }


/* ========== MAIN CONTENT ========== */
.main { flex: 1; overflow-y: auto; }
.ms { min-height: 100%; }
.page { display: none; }
.page.active { display: block; }


/* ========== BUTTONS ========== */
.btn-primary {
  display: inline-block; padding: 0.85rem 2rem; border-radius: var(--radius);
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 500;
  cursor: pointer; border: 1px solid var(--copper); background: var(--copper);
  color: white; transition: all 0.25s; text-decoration: none;
}
.btn-primary:hover { background: var(--copper-dark); border-color: var(--copper-dark); }

.btn-o {
  display: inline-block; padding: 0.8rem 1.75rem; border-radius: var(--radius);
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 500;
  cursor: pointer; border: 1px solid var(--charcoal); background: transparent;
  color: var(--charcoal); transition: all 0.25s; text-decoration: none;
}
.btn-o:hover { background: var(--copper); color: white; border-color: var(--copper); }

.btn {
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 500;
  letter-spacing: 0.02em; padding: 0.85rem 2.2rem; cursor: pointer;
  transition: all 0.3s; display: inline-block; text-decoration: none;
  border: 1px solid var(--charcoal); border-radius: var(--radius);
  background: transparent; color: var(--charcoal);
}
.btn:hover { background: var(--copper); color: var(--white); border-color: var(--copper); }
.btn-copper { background: var(--copper); color: var(--white); border-color: var(--copper); }
.btn-copper:hover { background: var(--copper-dark); border-color: var(--copper-dark); }
.btn-full { width: 100%; text-align: center; }


/* ========== TYPOGRAPHY ========== */
/*
  DESIGN RULES:
  - No teal (#5C8482) backgrounds — teal is for text and accents only
  - Section backgrounds use white, beige, blue-green only
  - Never place two coloured backgrounds adjacent — always separate with white
  - Label + heading pattern for section openings (13px caps label above larger heading)
  - Alternate image left/right down the page
  - 4px border-radius on everything (cards, buttons, badges, images)
  - Buttons default to transparent with charcoal border, copper fill on hover
  - Heading spacing: generous gap after headings before body text (proportional to heading size)
  - BUILD-READY treatment: same weight, brand colour, 3px larger than surrounding text
*/
.br-h { color: var(--copper); }
.br-b { color: var(--teal); }

.h-hero { font-family: var(--font-heading); font-weight: 300; font-size: 60px; color: var(--charcoal); line-height: 1.1; margin-bottom: 2rem; }
.h-section-caps { font-family: var(--font-heading); font-weight: 300; font-size: 38px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--charcoal); line-height: 1.2; margin-bottom: 1.5rem; }
.h-section { font-family: var(--font-heading); font-weight: 300; font-size: 42px; color: var(--charcoal); line-height: 1.2; margin-bottom: 1.5rem; }
.h-content { font-family: var(--font-heading); font-weight: 300; font-size: 26px; color: var(--charcoal); line-height: 1.3; margin-bottom: 1.25rem; }
.h-content-caps { font-family: var(--font-heading); font-weight: 300; font-size: 26px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--charcoal); line-height: 1.3; margin-bottom: 1.25rem; }
.h-sub { font-family: var(--font-heading); font-weight: 300; font-size: 22px; color: var(--charcoal); line-height: 1.4; margin-bottom: 1rem; }
.h-label { font-family: var(--font-heading); font-weight: 400; font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; line-height: 1.3; }

.subtitle { font-family: var(--font-body); font-weight: 400; font-style: italic; font-size: 0.88rem; color: var(--copper); }
.body-p { font-family: var(--font-body); font-size: 17px; color: var(--charcoal); line-height: 1.85; letter-spacing: 0.01em; }
.body-s { font-family: var(--font-body); font-size: 17px; color: var(--charcoal-light); line-height: 1.85; letter-spacing: 0.01em; }


/* ========== LAYOUT HELPERS ========== */
.l-inner { max-width: 1140px; margin: 0 auto; }
.l-hero-top { text-align: center; padding-bottom: 1rem; }
.l-hero-top .wm-large { height: 32px; width: auto; margin-bottom: 0.75rem; }

.band { width: 100%; padding: 8.5rem 3rem; }
.band-hero { padding-top: 3.5rem; padding-bottom: 6rem; }
.band-white { background: var(--white); }
.band-beige { background: var(--beige); }
.band-blue { background: var(--blue-green); }


/* ========== LANDING PAGE COMPONENTS ========== */
.check-list { list-style: none; padding: 0; margin: 1.25rem 0; }
.check-list li { font-size: 0.95rem; color: var(--charcoal); padding-left: 1.5rem; position: relative; margin-bottom: 0.35rem; }
.check-list li::before { content: '✓'; position: absolute; left: 0; color: var(--copper); font-weight: 700; }

.img-text-row { display: flex; gap: 4rem; align-items: center; }
.img-text-row.reverse { flex-direction: row-reverse; }
.img-text-row .text-side { flex: 1; }
.img-text-row .img-side { flex: 0 0 420px; }

.img-placeholder {
  width: 100%; aspect-ratio: 4/3; border-radius: var(--radius);
  background: var(--blue-green); border: 2px dashed var(--turquoise);
  display: flex; align-items: center; justify-content: center;
  color: var(--turquoise); font-size: 0.8rem; font-family: var(--font-body);
}
.img-placeholder.tall { aspect-ratio: 3/4; }
.img-placeholder.square { aspect-ratio: 1/1; }

.icon-ph {
  width: 48px; height: 48px; border-radius: var(--radius);
  background: var(--blue-green); border: 2px dashed var(--turquoise);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.icon-ph.round { border-radius: 50%; }
.icon-ph.copper { background: rgba(211,149,101,0.1); border-color: var(--copper); }
.icon-ph.teal { background: rgba(92,132,130,0.1); border-color: var(--teal); }

/* Dimension cards */
.dim-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; }
.dim-card { background: var(--white); border-radius: var(--radius); padding: 2.25rem 2rem; border-top: 3px solid transparent; }
.dim-card.spatial { border-top-color: var(--spatial); }
.dim-card.decision { border-top-color: var(--copper); }
.dim-card.site { border-top-color: var(--terracotta); }
.dim-card .card-icon { margin-bottom: 1.25rem; }
.dim-card h3 { font-family: var(--font-heading); font-weight: 400; font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--charcoal); margin-bottom: 0.75rem; }
.dim-card p { font-size: 0.9rem; color: var(--charcoal); line-height: 1.75; }

/* Outcome cards */
.outcome-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 3rem; }
.outcome-card { background: var(--white); border-radius: var(--radius); padding: 2.5rem 2.25rem; border: 1px solid #eae8e4; }
.outcome-card .oc-icon { margin-bottom: 1.5rem; }
.outcome-card .oc-icon .icon-ph { width: 56px; height: 56px; }
.outcome-card h3 { font-family: var(--font-heading); font-weight: 400; font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--charcoal); margin-bottom: 0.75rem; }
.outcome-card p { font-size: 0.95rem; color: var(--charcoal); line-height: 1.8; }

/* About section */
.about-row { display: flex; gap: 4rem; align-items: flex-start; }
.about-text { flex: 1; }
.about-photo { width: 280px; min-width: 280px; height: 340px; border-radius: var(--radius); overflow: hidden; }

/* Site footer */
.site-footer { padding: 3rem; border-top: 1px solid #eae8e4; background: var(--white); text-align: center; }
.site-footer .footer-wm { height: 18px; width: auto; opacity: 0.35; margin-bottom: 0.75rem; }
.site-footer p { font-size: 0.78rem; color: var(--charcoal-light); }


/* ========== WELCOME CARDS (Home page) ========== */
.wc { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2rem; }
.wcd { background: var(--white); border-radius: 8px; padding: 2rem 1.75rem; border: 1px solid #eae8e4; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
.wcd:hover { border-color: var(--turquoise); box-shadow: 0 6px 24px rgba(92,132,130,0.1); transform: translateY(-2px); }
.wcd .ci { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; }
.wcd .ci svg { width: 18px; height: 18px; stroke: white; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wcd h3 { font-family: var(--font-heading); font-weight: 300; font-size: 1.5rem; color: var(--charcoal); margin-bottom: 0.5rem; letter-spacing: 0.01em; text-align: left; }
.wcd p { font-size: 0.88rem; color: var(--charcoal-light); line-height: 1.65; text-align: left; }

/* Graph placeholder */
.gph {
  background: var(--blue-green); border: 1px solid #eae8e4; border-radius: var(--radius);
  padding: 3rem; text-align: center; min-height: 200px;
  display: flex; align-items: center; justify-content: center;
  max-width: 600px; margin: 2rem auto 0;
}
.gph p { font-size: 0.85rem; color: var(--charcoal-light); }


/* ========== PROFILE PANEL ========== */
.pb {
  position: fixed; inset: 0; background: rgba(0,0,0,0.15); z-index: 50;
  opacity: 0; visibility: hidden; transition: all 0.3s;
}
.pb.open { opacity: 1; visibility: visible; }

.pp {
  position: fixed; top: 0; right: -360px; width: 340px; max-width: 90vw;
  height: 100vh; background: var(--white); z-index: 60;
  padding: 2rem 1.75rem; overflow-y: auto; transition: right 0.3s ease;
  box-shadow: -4px 0 30px rgba(0,0,0,0.08);
}
.pp.open { right: 0; }
.pp h2 { font-family: var(--font-heading); font-weight: 300; font-size: 26px; color: var(--charcoal); }

.pph { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.pcl { background: none; border: none; cursor: pointer; padding: 0.25rem; }
.pcl svg { width: 20px; height: 20px; stroke: var(--charcoal-light); fill: none; stroke-width: 2; }

.pal { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; margin-bottom: 1.5rem; }
.pal svg { width: 64px; height: 64px; }

.pf { margin-bottom: 1rem; }
.pf label { font-family: var(--font-heading); font-weight: 400; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--charcoal-light); margin-bottom: 0.25rem; display: block; }
.pf .v { font-size: 0.88rem; color: var(--charcoal); }

.psd { border-top: 1px solid #f0efed; margin: 1.5rem 0; }


/* ========== ASSESSMENT: SCREENS ========== */
.screen { display: none; }
.screen.active { display: block; }
.fade-in { animation: fadeIn 0.35s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }


/* ========== ASSESSMENT: EMAIL CAPTURE ========== */
.email-screen {
  display: flex; align-items: center; justify-content: center;
  min-height: 90vh; padding: 2rem; background: var(--beige);
}
.email-card {
  background: var(--white); padding: 3rem; max-width: 520px; width: 100%;
  box-shadow: 0 2px 20px rgba(0,0,0,0.04); border-radius: 8px;
}
.email-card h2 { font-family: var(--font-heading); font-weight: 400; font-size: 1.9rem; margin-bottom: 0.75rem; }
.email-card > p { color: var(--charcoal-light); margin-bottom: 2rem; font-size: 0.95rem; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block; font-family: var(--font-body); font-size: 0.8rem;
  font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase;
  margin-bottom: 0.4rem; color: var(--charcoal);
}
.form-group input {
  width: 100%; padding: 0.8rem 1rem; border: 1px solid #ddd;
  font-family: var(--font-body); font-size: 0.95rem; color: var(--charcoal);
  transition: border-color 0.3s; background: var(--white); border-radius: 4px;
}
.form-group input:focus { outline: none; border-color: var(--teal); }

.consent-group { display: flex; gap: 0.75rem; align-items: flex-start; margin: 1.5rem 0; }
.consent-group input[type="checkbox"] { margin-top: 0.2rem; width: 18px; height: 18px; accent-color: var(--teal); flex-shrink: 0; }
.consent-group label { font-size: 0.85rem; color: var(--charcoal-light); line-height: 1.5; }

.privacy-link { text-align: center; margin-top: 1.25rem; }
.privacy-link a { color: var(--charcoal-light); font-size: 0.8rem; text-decoration: none; border-bottom: 1px solid #ccc; }
.privacy-link a:hover { color: var(--charcoal); }


/* ========== ASSESSMENT: QUESTIONS ========== */
.assessment-container {
  max-width: 700px; margin: 0 auto; padding: 2rem 2rem 3rem;
  min-height: 80vh; display: flex; flex-direction: column; justify-content: center;
}
.progress-bar { display: flex; gap: 4px; margin-bottom: 2.5rem; }
.progress-segment { flex: 1; height: 3px; background: #e0dcd6; transition: background 0.4s; }
.progress-segment.done-spatial { background: var(--spatial); }
.progress-segment.done-decision { background: var(--decision); }
.progress-segment.done-site { background: var(--site); }
.progress-segment.done-other { background: var(--charcoal-light); }

.q-category {
  font-family: var(--font-heading); font-size: 0.7rem;
  letter-spacing: 0.15em; text-transform: uppercase; font-weight: 400; margin-bottom: 0.75rem;
}
.q-cat-spatial { color: var(--spatial); }
.q-cat-decision { color: var(--decision); }
.q-cat-site { color: var(--site); }
.q-cat-none, .q-cat-multi { color: var(--charcoal-light); }

.q-text {
  font-family: var(--font-heading); font-weight: 400; font-size: 1.65rem;
  line-height: 1.4; margin-bottom: 2rem; color: var(--charcoal);
}

.answer-opt {
  background: var(--white); border: 1.5px solid #e0dcd6;
  padding: 1rem 1.15rem; margin-bottom: 0.6rem; cursor: pointer;
  transition: all 0.2s; display: flex; align-items: center; gap: 0.9rem;
  font-size: 0.95rem; line-height: 1.5; border-radius: 6px;
}
.answer-opt:hover { border-color: var(--teal); background: var(--blue); }
.answer-opt.selected { border-color: var(--teal); background: var(--blue); }

.opt-radio, .opt-check {
  width: 20px; height: 20px; min-width: 20px;
  border: 1.5px solid #bbb;
  display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.opt-radio { border-radius: 50%; }
.opt-check { border-radius: 4px; }

.answer-opt.selected .opt-radio,
.answer-opt.selected .opt-check { border-color: var(--teal); background: var(--teal); }
.answer-opt.selected .opt-radio::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: white; }
.answer-opt.selected .opt-check::after { content: '\2713'; color: white; font-size: 0.7rem; font-weight: 700; }

.freetext-area {
  width: 100%; min-height: 130px; padding: 1rem;
  border: 1.5px solid #e0dcd6; font-family: var(--font-body); font-size: 0.95rem;
  line-height: 1.6; resize: vertical; color: var(--charcoal);
  transition: border-color 0.3s; border-radius: 6px;
}
.freetext-area:focus { outline: none; border-color: var(--teal); }
.freetext-helper { font-size: 0.9rem; color: var(--charcoal-light); margin-bottom: 1rem; line-height: 1.5; }

.q-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem; }

.btn-back {
  background: none; border: none; color: var(--charcoal-light);
  font-family: var(--font-body); font-size: 0.9rem; cursor: pointer;
}
.btn-back:hover { color: var(--charcoal); }

.btn-next {
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--copper); color: var(--white); border: none; border-radius: 6px;
  padding: 0.8rem 2.5rem; cursor: pointer; transition: background 0.15s;
}
.btn-next:hover { background: var(--copper-dark); }
.btn-next:disabled { opacity: 0.25; cursor: not-allowed; }


/* ========== RESULTS PAGE ========== */
.res-band { width: 100%; }
.res-band-white { background: var(--white); }
.res-band-beige { background: var(--beige); }
.res-band-blue { background: var(--blue-green); }
.res-band-teal { background: var(--teal); }
.res-inner { max-width: 1050px; margin: 0 auto; padding: 5rem 3rem; }

/* Thank you */
.res-thankyou { text-align: center; }
.res-thankyou h1 {
  font-family: var(--font-heading); font-weight: 300; font-size: 2.6rem;
  color: var(--charcoal); margin-bottom: 1.5rem; letter-spacing: 0.02em; line-height: 1.4;
}
.res-thankyou h1 span { color: var(--copper); font-weight: 300; }
.res-thankyou p {
  font-family: var(--font-body); font-size: 0.95rem; color: var(--charcoal-light);
  line-height: 1.85; max-width: 1050px; margin: 0 auto;
}

/* Reassurance band — photo + text side by side on blue-green background */
.res-reassure { display: flex; align-items: center; gap: 3.5rem; max-width: 860px; margin: 0 auto; }
.res-reassure img { width: 280px; min-width: 280px; border-radius: var(--radius); object-fit: cover; display: block; }
.res-reassure-text { flex: 1; }
.res-reassure-text h2 {
  font-family: var(--font-heading); font-weight: 300; font-size: 2rem;
  margin-bottom: 1.25rem; color: var(--teal); line-height: 1.3;
}
.res-reassure-text p {
  font-family: var(--font-body); font-size: 17px; line-height: 1.85;
  letter-spacing: 0.015em; color: var(--charcoal-light); margin-bottom: 0.85rem;
}

/* Score card */
.res-score-card {
  background: white; border-radius: 10px; box-shadow: 0 4px 30px rgba(0,0,0,0.06);
  overflow: hidden; max-width: 1050px; margin: 0 auto;
}
.res-score-top { padding: 3.5rem 4rem 3rem; }
.res-score-header { padding-bottom: 1.75rem; border-bottom: 1px solid #eee; margin-bottom: 2.5rem; }
.res-score-header h2 { font-family: var(--font-heading); font-weight: 300; font-size: 2.6rem; color: var(--charcoal); }
.res-score-header h2 span { color: var(--copper); font-weight: 300; }
.res-completed { font-family: var(--font-body); font-size: 0.82rem; color: var(--charcoal-light); margin-top: 0.5rem; }

.res-overall-row { display: flex; align-items: center; gap: 2rem; margin-bottom: 3rem; }
.res-ring { position: relative; width: 130px; height: 130px; flex-shrink: 0; }
.res-ring svg { width: 130px; height: 130px; transform: rotate(-90deg); }
.res-ring-bg { fill: none; stroke: #eae8e4; stroke-width: 8; opacity: 0.5; }
.res-ring-fill { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1s ease; }
.res-ring-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.res-ring-pct { font-family: var(--font-heading); font-size: 2.4rem; font-weight: 300; color: var(--charcoal); line-height: 1; }
.res-ring-label { font-family: var(--font-body); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--charcoal-light); margin-top: 3px; }
.res-overall-meta .title { font-family: var(--font-body); font-size: 1.1rem; color: var(--charcoal); margin-bottom: 0.5rem; }

.score-row { display: flex; align-items: center; margin-bottom: 1.15rem; gap: 1rem; }
.score-label { font-family: var(--font-heading); font-size: 0.75rem; color: var(--charcoal); width: 140px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 400; white-space: nowrap; }
.score-track { flex: 1; height: 8px; background: #f0efed; border-radius: 4px; overflow: hidden; }
.score-fill { height: 100%; border-radius: 4px; transition: width 0.8s ease; }
.score-pct { font-family: var(--font-heading); font-size: 0.95rem; color: var(--charcoal); width: 42px; text-align: right; }

.tier-badge {
  font-family: var(--font-body); font-size: 0.73rem; font-weight: 500;
  padding: 0.3rem 0.85rem; border-radius: 10px; display: inline-block; white-space: nowrap;
}
.tier-early { background: rgba(250,139,139,0.15); color: #c55; }
.tier-progress { background: rgba(133,183,181,0.2); color: #4a8280; }
.tier-ready { background: rgba(138,205,161,0.2); color: #3a7a50; }

/* Score interpretation */
.res-score-interp { background: var(--blue-green); padding: 2.5rem 4rem; }
.res-score-interp p { font-family: var(--font-body); font-size: 0.95rem; color: var(--charcoal); line-height: 1.85; letter-spacing: 0.015em; margin-bottom: 0.75rem; }

/* Focus heading */
.res-focus-heading { text-align: center; max-width: 1050px; margin: 0 auto; padding-bottom: 0; }
.res-focus-heading h2 { font-family: var(--font-heading); font-weight: 300; font-size: 2.6rem; color: white; margin-bottom: 0; }
.res-focus-heading p { font-family: var(--font-body); font-size: 0.92rem; color: rgba(255,255,255,0.85); line-height: 1.85; max-width: 1050px; margin: 0 auto; }

/* Category result cards */
.res-cats { max-width: 1050px; margin: 0 auto; }
.cat-result {
  background: white; border-radius: 10px; box-shadow: 0 2px 20px rgba(0,0,0,0.05);
  padding: 2.75rem 3.5rem; margin-bottom: 2rem; border-top: 4px solid transparent;
}
.cat-result.cat-spatial { border-top-color: var(--spatial); }
.cat-result.cat-decision { border-top-color: var(--decision); }
.cat-result.cat-site { border-top-color: var(--site); }
.cat-result-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; }
.cat-result-top h3 { font-family: var(--font-heading); font-weight: 400; font-size: 0.95rem; color: var(--charcoal); text-transform: uppercase; letter-spacing: 0.15em; }
.cat-result-top .subtitle { font-family: var(--font-body); font-size: 0.9rem; font-style: italic; color: var(--copper); margin-top: 0.25rem; }
.cat-score-right { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; padding-top: 0.25rem; }
.cat-score-right .cat-pct { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 400; color: var(--charcoal); }
.cat-result .body-intro p { font-family: var(--font-body); font-size: 0.95rem; color: var(--charcoal-light); line-height: 1.85; letter-spacing: 0.015em; margin-bottom: 0.75rem; }
.cat-result .body-feedback { border-left: 3px solid transparent; padding: 1.5rem 1.75rem; margin-top: 1.5rem; border-radius: 0 8px 8px 0; }
.cat-spatial .body-feedback { border-left-color: var(--spatial); background: rgba(107,158,156,0.06); }
.cat-decision .body-feedback { border-left-color: var(--decision); background: rgba(211,149,101,0.06); }
.cat-site .body-feedback { border-left-color: var(--site); background: rgba(194,83,58,0.05); }
.cat-result .body-feedback p { font-family: var(--font-body); font-size: 0.95rem; color: var(--charcoal); line-height: 1.85; letter-spacing: 0.015em; margin-bottom: 0.7rem; }

/* Category icons */
.cat-icon { width: 48px; height: 48px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cat-icon svg { width: 24px; height: 24px; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.cat-icon.spatial { background: rgba(107,158,156,0.12); border: 2px dashed var(--spatial); }
.cat-icon.spatial svg { stroke: var(--spatial); }
.cat-icon.decision { background: rgba(211,149,101,0.1); border: 2px dashed var(--copper); }
.cat-icon.decision svg { stroke: var(--copper); }
.cat-icon.site { background: rgba(194,83,58,0.08); border: 2px dashed var(--terracotta); }
.cat-icon.site svg { stroke: var(--terracotta); }

/* Why this matters */
.res-why-row { display: flex; gap: 4rem; align-items: center; max-width: 1050px; margin: 0 auto; }
.res-why-text { flex: 1; min-width: 300px; }
.res-why-text h3 { font-family: var(--font-heading); font-weight: 400; font-size: 1.85rem; color: var(--charcoal-light); margin-bottom: 0.35rem; line-height: 1.3; }
.res-why-text .why-sub { font-family: var(--font-body); font-size: 0.88rem; font-style: italic; color: var(--copper); margin-bottom: 1.5rem; }
.res-why-text p { font-family: var(--font-body); font-size: 17px; color: var(--charcoal); line-height: 1.85; letter-spacing: 0.015em; margin-bottom: 0.75rem; }
.res-why-photos { flex: 1.2; min-width: 340px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: hidden; }
.res-why-photos img { width: 100%; aspect-ratio: 1.15; object-fit: cover; display: block; border-radius: var(--radius); }

/* Next steps */
.step-row { display: flex; gap: 3rem; align-items: flex-start; margin-top: 3rem; }
.step-card { flex: 1; }
.step-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.step-num {
  width: 40px; height: 40px; border-radius: 50%; background: var(--turquoise-light);
  color: var(--teal); font-family: var(--font-heading); font-size: 1.1rem; font-weight: 400;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--turquoise); flex-shrink: 0;
}
.step-img { width: 100%; border-radius: var(--radius); margin-bottom: 1.25rem; }
.step-title { font-family: var(--font-heading); font-size: 1.1rem; color: var(--charcoal); margin-bottom: 0.5rem; font-weight: 400; }
.step-title span { color: var(--teal); font-weight: 600; }

/* Caroline + CTA */
.res-caroline { display: flex; align-items: flex-start; gap: 3.5rem; max-width: 1050px; margin: 0 auto; }
.res-caroline img { width: 380px; min-width: 380px; border-radius: var(--radius); object-fit: cover; }
.res-caroline-text p { font-family: var(--font-body); font-size: 17px; color: var(--charcoal); line-height: 1.85; letter-spacing: 0.015em; margin-bottom: 0.85rem; }
.res-social-links { margin-top: 1.25rem; display: flex; gap: 1.5rem; align-items: center; }
.res-social-links a { color: var(--teal); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.88rem; font-weight: 500; }
.res-social-links a:hover { text-decoration: underline; }
.res-social-links svg { width: 20px; height: 20px; fill: var(--teal); }


/* ========== ESSENTIALS PAGE ========== */

/* Section cards — mirrors cat-result from results page */
.ess-section-card {
  background: white; border-radius: 10px; box-shadow: 0 2px 20px rgba(0,0,0,0.05);
  padding: 2.75rem 3.5rem; border-top: 4px solid transparent;
}
.ess-card-spatial { border-top-color: var(--spatial); }
.ess-card-decision { border-top-color: var(--decision); }
.ess-card-site { border-top-color: var(--site); }

/* Card header — icon + label + heading */
.ess-card-header {
  display: flex; align-items: flex-start; gap: 1.25rem; margin-bottom: 2rem;
}

/* Note box */
.ess-note-box {
  padding: 1.5rem 2rem; border: 1px solid #e0ddd8; border-radius: var(--radius);
  background: var(--blue-green); text-align: left;
}

/* Intro block — coloured background for opening paragraphs */
.ess-intro-block {
  padding: 1.5rem 1.75rem; border-radius: 8px; margin-bottom: 2rem;
}
.ess-intro-spatial { background: rgba(107,158,156,0.08); }
.ess-intro-decision { background: rgba(211,149,101,0.06); }
.ess-intro-site { background: rgba(194,83,58,0.05); }

/* Two-column sub-topics layout */
.ess-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; }
.ess-col-left, .ess-col-right { display: flex; flex-direction: column; }

/* Sub-topics — indented with pillar-coloured headings */
.ess-subtopic {
  margin-bottom: 1.75rem; padding-left: 1.25rem;
  border-left: 2px solid rgba(211,149,101,0.25);
}
.ess-subtopic-heading {
  font-family: var(--font-heading); font-weight: 400; font-size: 0.88rem;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--copper);
  margin-bottom: 0.4rem;
}
.ess-card-spatial .ess-subtopic { border-left-color: rgba(107,158,156,0.3); }
.ess-card-spatial .ess-subtopic-heading { color: var(--spatial); }
.ess-card-decision .ess-subtopic { border-left-color: rgba(211,149,101,0.25); }
.ess-card-decision .ess-subtopic-heading { color: var(--decision); }
.ess-card-site .ess-subtopic { border-left-color: rgba(194,83,58,0.2); }
.ess-card-site .ess-subtopic-heading { color: var(--site); }

/* Key takeaway — coloured left-border box */
.ess-takeaway {
  border-left: 3px solid transparent; padding: 1.5rem 1.75rem;
  margin-top: auto; margin-bottom: 0.75rem; border-radius: 0 8px 8px 0;
}
.ess-takeaway p {
  font-family: var(--font-body); font-size: 0.95rem; color: var(--charcoal);
  line-height: 1.85; letter-spacing: 0.015em; font-weight: 500;
}
.ess-takeaway-spatial { border-left-color: var(--spatial); background: rgba(107,158,156,0.08); }
.ess-takeaway-decision { border-left-color: var(--decision); background: rgba(211,149,101,0.06); }
.ess-takeaway-site { border-left-color: var(--site); background: rgba(194,83,58,0.05); }

/* Case study — open by default */
.ess-casestudy { border-top: 1px solid #eae8e4; margin-top: 0.5rem; }

.ess-casestudy-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 1.25rem 0; background: transparent; border: none; cursor: pointer;
  font-family: var(--font-body); text-align: left; transition: opacity 0.2s;
}
.ess-casestudy-toggle:hover { opacity: 0.7; }

.ess-cs-label {
  font-family: 'Shadows Into Light Two', cursive; font-size: 1.3rem;
  color: var(--teal); letter-spacing: 0.01em;
}

.ess-cs-chevron {
  width: 20px; height: 20px; stroke: var(--charcoal-light); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.3s ease; flex-shrink: 0;
}
.ess-casestudy.open .ess-cs-chevron { transform: rotate(180deg); }

.ess-casestudy-body {
  max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0;
}
.ess-casestudy-body .body-p { color: var(--charcoal-light); }
.ess-casestudy.open .ess-casestudy-body {
  max-height: 1200px; padding: 0 0 1.75rem;
}

.ess-cs-images {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.5rem;
}

/* Gallery grid (End Result) */
.ess-gallery {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem;
}

/* Next steps cards — beige background */
.ess-nextsteps {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 4rem;
}
.ess-nextcard {
  background: var(--beige); border-radius: var(--radius); padding: 2.25rem 2rem;
}
.ess-nextcard .h-content { margin-bottom: 0.75rem; }

/* Social links */
.ess-social-links { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.ess-social-link {
  color: var(--teal); text-decoration: none; display: flex; align-items: center;
  gap: 0.5rem; font-family: var(--font-body); font-size: 0.88rem; font-weight: 500;
}
.ess-social-link:hover { text-decoration: underline; }

/* Caroline section (photo + overlay panel) */
.ess-caroline-section { margin-top: 1rem; }
.ess-caroline-row {
  display: flex; align-items: stretch; gap: 0; border-radius: var(--radius); overflow: hidden;
}
.ess-caroline-photo { flex: 0 0 380px; }
.ess-caroline-photo .img-placeholder { border-radius: 0; height: 100%; min-height: 400px; }
.ess-caroline-panel {
  flex: 1; background: rgba(147, 187, 185, 0.15); padding: 3rem;
  display: flex; flex-direction: column; justify-content: center;
}
.ess-caroline-panel .h-content { margin-bottom: 0.75rem; }

/* Essentials footer */
.ess-footer {
  text-align: center; padding: 3rem 2.5rem 2.5rem; background: var(--white);
  border-top: 1px solid #e8e4df;
}
.ess-footer p { color: var(--charcoal-light); font-size: 0.8rem; }


/* ========== FOOTER ========== */
.footer { text-align: center; padding: 4rem 2.5rem 2.5rem; background: var(--white); border-top: 1px solid #e8e4df; }
.footer p { color: var(--charcoal-light); font-size: 0.8rem; margin-top: 0.5rem; }
.footer a { color: var(--charcoal-light); }


/* ========== MOBILE NAV BAR (shown ≤768px) ========== */
.mobile-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: var(--white); border-top: 1px solid #eae8e4;
  padding: 0.5rem 0.25rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
  justify-content: space-around; align-items: center;
}
.mobile-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  text-decoration: none; color: var(--charcoal-light); font-size: 0.62rem;
  font-family: var(--font-body); letter-spacing: 0.02em; padding: 0.25rem 0.5rem;
  border-radius: var(--radius); transition: color 0.15s;
}
.mobile-nav a.active { color: var(--teal); }
.mobile-nav a svg {
  width: 20px; height: 20px; stroke: var(--charcoal-light); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.mobile-nav a.active svg { stroke: var(--teal); }


/* ========== RESPONSIVE: TABLET (≤1400px) ========== */
@media (max-width: 1400px) {
  .band { padding: 5rem 2rem; }
  .img-text-row { gap: 2.5rem; }
  .img-text-row .img-side { flex: 0 0 320px; }
  .about-photo { width: 260px; min-width: 260px; height: 320px; }
  .about-row { gap: 2.5rem; }
  .res-score-top { padding: 2.5rem 2.5rem 2rem; }
  .res-score-interp { padding: 2rem 2.5rem; }
  .cat-result { padding: 2.25rem 2.5rem; }
  .res-reassure img { width: 300px; min-width: 300px; }
  .res-reassure-text { padding: 2.5rem; }
  .res-why-row { gap: 2.5rem; }
  .res-caroline img { width: 320px; min-width: 320px; }
  .res-caroline { gap: 2.5rem; }

  /* Tablet/iPad: start sidebar collapsed */
  .sidebar { width: var(--sidebar-collapsed); }
  .sidebar .nl { opacity: 0; width: 0; }
  .sidebar .nsl { opacity: 0; height: 0; padding: 0; }
  .sidebar .nb { display: none; }
  .sidebar .pi { opacity: 0; width: 0; }
  .sidebar .sh .wm { display: none; }
  .sidebar .sh .cm { display: block; }
  .sidebar-toggle { left: calc(var(--sidebar-collapsed) - 18px); }
  .sidebar-toggle svg { transform: rotate(180deg); }

  /* When expanded on tablet/iPad */
  .sidebar.expanded { width: var(--sidebar-width); }
  .sidebar.expanded .nl { opacity: 1; width: auto; }
  .sidebar.expanded .nsl { opacity: 1; height: auto; padding: 0.75rem 0.75rem 0.35rem; }
  .sidebar.expanded .nb { display: inline-block; }
  .sidebar.expanded .pi { opacity: 1; width: auto; }
  .sidebar.expanded .sh .wm { display: block; }
  .sidebar.expanded .sh .cm { display: none; }
  .sidebar.expanded ~ .sidebar-toggle { left: calc(var(--sidebar-width) - 18px); }
  .sidebar.expanded ~ .sidebar-toggle svg { transform: rotate(0deg); }

  /* Essentials — tablet */
  .ess-section-card { padding: 2.25rem 2.5rem; }
  .ess-two-col { gap: 0 2rem; }
  .ess-caroline-photo { flex: 0 0 300px; }
  .ess-nextsteps { gap: 1.5rem; }
  .ess-caroline-panel { padding: 2.5rem; }
}


/* ========== RESPONSIVE: MOBILE (≤768px) ========== */
@media (max-width: 768px) {
  /* App shell — fix horizontal overflow */
  body { overflow-x: hidden; overflow-y: auto; height: auto; }
  .app { flex-direction: column; height: auto; min-height: 100vh; overflow: visible; }
  .sidebar, .sidebar-toggle { display: none; }
  .main { overflow: visible; overflow-x: hidden; }
  .ms, .page, .band, .l-inner { max-width: 100vw; overflow-x: hidden; }
  .mobile-nav { display: flex; }

  /* Add bottom padding so content isn't hidden behind mobile nav */
  .ms { padding-bottom: 4.5rem; }

  /* Landing page */
  .band { padding: 3rem 1.5rem !important; }
  .l-inner { padding-left: 0.5rem; padding-right: 0.5rem; }
  .h-hero { font-size: 30px; }
  .h-hero .br-h { font-size: 32px !important; }
  .h-section { font-size: 28px; }
  .h-section-caps { font-size: 22px; }
  .h-content { font-size: 20px; }
  .h-content-caps { font-size: 18px; }
  .h-sub { font-size: 17px; }
  .body-p, .body-s { font-size: 15px; }
  .dim-cards { grid-template-columns: 1fr; }
  .outcome-cards { grid-template-columns: 1fr; }
  .img-text-row, .img-text-row.reverse { flex-direction: column; gap: 2rem; }
  .img-text-row .img-side { flex: 0 0 auto; width: 100%; }
  .about-row { flex-direction: column; gap: 2rem; }
  .about-photo { width: 100%; min-width: unset; height: 280px; }
  .wc { grid-template-columns: 1fr; }
  .check-list li { font-size: 0.88rem; }
  .site-footer { padding: 2rem 1.5rem; }

  /* Hero section */
  .band.band-hero { padding-top: 0.75rem !important; padding-bottom: 2.5rem !important; }
  .l-hero-top { padding-bottom: 0; }
  .l-hero-top .wm-large { height: 22px !important; margin-bottom: 0.25rem !important; }
  .hero-subtitle { margin-bottom: 1.25rem !important; font-size: 11px !important; }

  /* SVG wordmarks — prevent overflow */
  svg { max-width: 100%; }

  /* Assessment — extra bottom padding so Continue is above mobile nav */
  .form-row { grid-template-columns: 1fr; }
  .email-screen { min-height: auto; padding: 1.5rem; align-items: flex-start; padding-top: 3rem; }
  .email-card { padding: 2rem 1.5rem; }
  .email-card h2 { font-size: 1.5rem; }
  .assessment-container { padding: 1.5rem 1.5rem 8rem; min-height: auto; justify-content: flex-start; }
  .q-text { font-size: 1.2rem; }
  .q-category { font-size: 0.65rem; }
  .answer-opt { padding: 0.85rem 1rem; font-size: 0.88rem; }
  .btn-next { padding: 0.75rem 2rem; font-size: 0.8rem; }
  .progress-bar { margin-bottom: 1.75rem; }
  .q-nav {
    position: fixed; bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
    left: 0; right: 0;
    margin: 0; padding: 0.85rem 1.5rem;
    background: var(--beige); z-index: 35;
    border-top: 1px solid #e0dcd6;
  }

  /* Results */
  .res-inner { padding: 2.5rem 1.5rem; }
  .res-thankyou h1 { font-size: 1.6rem; }
  .res-reassure { flex-direction: column; gap: 1.5rem; }
  .res-reassure img { width: 100%; min-width: auto; height: 220px; }
  .res-reassure-text h2 { font-size: 1.5rem; }
  .res-score-card { border-radius: 8px; }
  .res-score-top { padding: 1.75rem 1.5rem 1.5rem; }
  .res-score-header h2 { font-size: 1.8rem; }
  .res-score-interp { padding: 1.5rem; }
  .res-overall-row { flex-direction: column; gap: 1.25rem; text-align: center; }
  .res-ring { margin: 0 auto; }
  .res-overall-meta { text-align: center; }
  .res-overall-meta .title { font-size: 1rem; }
  .score-row { flex-wrap: wrap; gap: 0.5rem; }
  .score-label { width: 100%; font-size: 0.75rem; margin-bottom: -0.25rem; }
  .score-track { flex: 1; min-width: 0; }
  .score-pct { width: 36px; font-size: 0.85rem; }
  .tier-badge { font-size: 0.68rem; padding: 0.25rem 0.65rem; }
  .cat-result { padding: 1.75rem 1.5rem; margin-bottom: 1.25rem; }
  .cat-result-top { flex-direction: column; gap: 0.5rem; }
  .cat-result .body-feedback { padding: 1.25rem; }
  .res-focus-heading h2 { font-size: 1.6rem; }
  .res-why-row { flex-direction: column; gap: 1.5rem; }
  .res-why-text h3 { font-size: 1.4rem; }
  .res-why-photos { grid-template-columns: 1fr 1fr; gap: 4px; }
  .step-row { flex-direction: column; gap: 1.5rem; }
  .step-card { text-align: center; }
  .step-desc { margin: 0 auto; }
  .res-caroline { flex-direction: column; gap: 1.5rem; }
  .res-caroline img { width: 100%; max-width: 100%; min-width: auto; }
  .res-social-links { justify-content: center; flex-wrap: wrap; }

  /* Profile panel */
  .pp { width: 100%; max-width: 100%; right: -100%; }

  /* Essentials — mobile */
  .ess-section-card { padding: 1.75rem 1.5rem; }
  .ess-card-header { flex-direction: column; gap: 0.75rem; }
  .ess-two-col { grid-template-columns: 1fr; gap: 0; }
  .ess-note-box { padding: 1.25rem 1.5rem; }
  .ess-gallery { grid-template-columns: 1fr 1fr; }
  .ess-nextsteps { grid-template-columns: 1fr; }
  .ess-caroline-row { flex-direction: column; }
  .ess-caroline-photo { flex: 0 0 auto; }
  .ess-caroline-photo .img-placeholder { min-height: 280px; }
  .ess-caroline-panel { padding: 2rem 1.5rem; }
  .ess-cs-images { grid-template-columns: 1fr; }
  .ess-takeaway { padding: 1.25rem 1.5rem; }
  .ess-nextcard { padding: 1.75rem 1.5rem; }
}


/* ========== RESPONSIVE: SMALL PHONE (≤400px) ========== */
@media (max-width: 400px) {
  .band { padding: 2.5rem 1rem; }
  .h-hero { font-size: 26px; }
  .h-hero .br-h { font-size: 28px !important; }
  .h-section { font-size: 24px; }
  .email-card { padding: 1.5rem 1.25rem; }
  .assessment-container { padding: 1.25rem 1rem 8rem; }
  .q-text { font-size: 1.1rem; }
  .answer-opt { padding: 0.75rem 0.85rem; font-size: 0.85rem; }
  .res-inner { padding: 2rem 1rem; }
  .res-score-top { padding: 1.5rem 1rem; }
  .res-score-interp { padding: 1.25rem 1rem; }
  .cat-result { padding: 1.5rem 1rem; }
  .res-caroline-text p { font-size: 0.88rem; }
  .pw-card { padding: 2rem 1.5rem; }
  .pw-card h2 { font-size: 24px; }
}


/* ========== SIGN-IN BAR (landing page) ========== */
.signin-bar {
  text-align: right;
  margin-bottom: 1rem;
  padding-top: 0.5rem;
}
.signin-link {
  font-size: 0.85rem;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid var(--turquoise);
  padding-bottom: 1px;
  transition: color 0.2s;
}
.signin-link:hover {
  color: var(--copper);
  border-color: var(--copper);
}

/* ========== PRIVACY PAGE ========== */
.privacy-divider {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 2.5rem 0;
}
.privacy-details {
  background: var(--beige);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.privacy-details .body-p {
  margin-bottom: 0.35rem;
  font-size: 0.92rem;
}
.privacy-details .body-p:last-child {
  margin-bottom: 0;
}
.privacy-sub {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--charcoal);
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}