/* ==========================================================================
   Prakasa Therapy - design system
   Palette from the client's swatches. Bold editorial blocks, large display
   type, soft organic shapes, one accent per section.
   ========================================================================== */

@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Quicksand"; src: url("../fonts/quicksand-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Quicksand"; src: url("../fonts/quicksand-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Quicksand"; src: url("../fonts/quicksand-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Quicksand"; src: url("../fonts/quicksand-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --canyon: #DF6D41;
  --canyon-deep: #C2532A;
  --butter: #F7D89A;
  --marigold: #FFC64F;
  --sky: #8DA6CC;
  --olive: #AAA648;
  --cream: #FFF9F0;
  --paper: #FFFDF8;
  /* The warm beige the client picked for word-bearing blocks. Every block that
     holds text uses this, so the text colour never changes from box to box. */
  --beige: #EFE5D2;
  --ink: #23211B;
  --ink-soft: #6E6354;
  --line: rgba(35, 33, 27, .12);
  /* The client does not want a black background anywhere. This warm espresso
     stands in wherever a dark ground is needed, so the footer and the dark
     buttons read as deep brown rather than black. */
  --espresso: #4A3B2F;

  --radius: 24px;
  --radius-lg: 34px;
  --shadow: 0 14px 34px rgba(90, 55, 25, .10);
  --shadow-lg: 0 26px 60px rgba(90, 55, 25, .16);

  --sans: "Quicksand", system-ui, -apple-system, sans-serif;
  --serif: "Fraunces", Georgia, serif;

  --wrap: min(1240px, 92vw);
  --gutter: clamp(20px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: 15px; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.62;
  color: var(--ink);
  background: var(--cream);
  /* clip, not hidden: overflow-x:hidden on the body silently disables
     position:sticky on the header in several browsers. */
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font-family: inherit; }

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0 0 .45em;
  /* Balance keeps a heading from dropping a single word onto its own line,
     which is what reads as a break that happened in the wrong place. */
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 5vw, 4.15rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.85rem); }
h3 { font-size: clamp(1.14rem, 1.8vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.16; }
h4 { font-size: 1.02rem; letter-spacing: -0.01em; }
/* pretty keeps the last line of a paragraph from being a single stranded word,
   which is what makes short paragraphs look like they broke at random. */
p { margin: 0 0 1.05em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Lists, quotes, buttons and cards wrap by the same rule, so a short last line
   never reads as a random break. Keys and addresses stay whole instead of
   splitting at their own hyphen. */
li, blockquote, .qa-q, .qa-a, .wb__panel > div, .helpline span,
.contact__inline a, .chip, .foot-col a, .btn, .card, .value, .res-card {
  text-wrap: pretty;
}
/* Phone numbers and email addresses read as one unit, so they never split at
   a hyphen or wrap mid-number. */
.helpline strong { text-wrap: nowrap; }

.wrap { width: var(--wrap); margin-inline: auto; }
.section { padding: clamp(56px, 7.5vw, 108px) 0; }
.section--tight { padding-top: 0; }
.center { text-align: center; }
.lead { font-size: clamp(1rem, 1.3vw, 1.14rem); color: var(--ink-soft); max-width: 54ch; line-height: 1.6; }
.muted { color: var(--ink-soft); }
.serif { font-family: var(--serif); font-weight: 500; }
.script { font-family: var(--serif); font-style: italic; font-weight: 500; }

/* ---------- Eyebrow label ---------- */
.eyebrow {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--canyon-deep);
  margin-bottom: 18px;
}
.eyebrow--chip {
  background: var(--butter);
  color: var(--ink);
  padding: 9px 18px;
  border-radius: 999px;
  letter-spacing: .14em;
}

/* ---------- Header ---------- */
.mast {
  height: 7px;
  background: linear-gradient(90deg, var(--canyon) 0 25%, var(--marigold) 25% 50%, var(--sky) 50% 75%, var(--olive) 75% 100%);
}
/* The header is injected into #header-slot, and a sticky element can never
   travel past its own parent's box. So the slot itself is the sticky unit:
   it spans the header and stays pinned for the whole page scroll. */
#header-slot {
  position: sticky;
  top: 0;
  z-index: 60;
}
.site-header {
  background: rgba(255, 249, 240, .93);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
/* Each page carries its own header tint so the nav feels part of the page it
   sits on. The tint is soft enough that the pills stay legible on top of it. */
.site-header[data-page="home"] { background: rgba(247, 216, 154, .70); }
.site-header[data-page="about"] { background: rgba(141, 166, 204, .66); }
.site-header[data-page="faq"] { background: rgba(170, 166, 72, .58); }
.site-header[data-page="resources"] { background: rgba(223, 109, 65, .62); }
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
}
.brand {
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
  text-decoration: none;
  white-space: nowrap;
}
.brand b { color: var(--canyon-deep); }
.site-header[data-page="about"] .brand b { color: #3E5C8A; }
.site-header[data-page="faq"] .brand b { color: #6C6A28; }
.site-header[data-page="resources"] .brand b { color: #8E3A18; }
.nav { display: flex; align-items: center; gap: 8px; }
.nav .pill {
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  padding: 11px 19px;
  border-radius: 999px;
  background: var(--paper);
  transition: background .18s, color .18s, transform .18s;
}
.nav .pill:hover { background: var(--marigold); transform: translateY(-1px); }
/* The current page is marked with colour rather than a black pill, and the
   colour belongs to the page it is on. */
.nav .pill[aria-current="page"] { background: var(--canyon); color: #fff; }
.site-header[data-page="about"] .nav .pill[aria-current="page"] { background: #4E6E9E; color: #fff; }
.site-header[data-page="faq"] .nav .pill[aria-current="page"] { background: var(--olive); color: #fff; }
.site-header[data-page="resources"] .nav .pill[aria-current="page"] { background: var(--canyon-deep); color: #fff; }

.reach { position: relative; }
.reach-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .95rem; font-weight: 700;
  color: #fff; background: var(--canyon);
  border: 0; padding: 12px 22px; border-radius: 999px; cursor: pointer;
  transition: background .18s, transform .18s;
}
.reach-btn:hover { background: var(--canyon-deep); transform: translateY(-1px); }
.reach-btn .chev { display: inline-flex; width: 15px; height: 15px; transition: transform .22s; }
.reach-btn .chev svg { width: 100%; height: 100%; }
.reach.open .reach-btn .chev { transform: rotate(180deg); }
.reach-menu {
  position: absolute; right: 0; top: calc(100% + 10px);
  width: 300px; background: var(--paper);
  border-radius: 22px; box-shadow: var(--shadow-lg);
  padding: 8px; display: none; z-index: 70;
}
.reach.open .reach-menu { display: block; }
.reach-menu a {
  display: flex; gap: 14px; align-items: center;
  padding: 13px 15px; border-radius: 16px; text-decoration: none;
  transition: background .16s;
}
.reach-menu a:hover { background: var(--butter); }
.reach-menu .ic {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
  background: var(--butter); display: grid; place-items: center; color: var(--canyon-deep);
}
.reach-menu .ic svg { width: 20px; height: 20px; }
.reach-menu a:last-child .ic { background: #DCE7D6; color: #3F6B3A; }
.reach-menu .tx { min-width: 0; }
.reach-menu b { display: block; font-size: .95rem; }
.reach-menu span.s {
  display: block; font-size: .82rem; color: var(--ink-soft); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.burger {
  display: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--espresso); border: 0; cursor: pointer; position: relative;
}
.burger span, .burger span::before, .burger span::after {
  position: absolute; left: 50%; width: 19px; height: 2px; background: var(--cream);
  border-radius: 2px; transform: translateX(-50%); transition: transform .22s, opacity .22s;
}
.burger span { top: 50%; margin-top: -1px; }
.burger span::before { content: ""; top: -6px; }
.burger span::after { content: ""; top: 6px; }
.nav-open .burger span { background: transparent; }
.nav-open .burger span::before { transform: translateX(-50%) translateY(6px) rotate(45deg); }
.nav-open .burger span::after { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 1rem; font-weight: 700; text-decoration: none;
  padding: 16px 30px; border-radius: 999px; border: 0; cursor: pointer;
  transition: transform .16s, background .18s, color .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn--ink { background: var(--espresso); color: var(--cream); }
.btn--ink:hover { background: var(--canyon-deep); }
.btn--canyon { background: var(--canyon); color: #fff; }
.btn--canyon:hover { background: var(--canyon-deep); }
.btn--cream { background: var(--cream); color: var(--ink); }
.btn--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn--outline:hover { background: var(--espresso); color: var(--cream); }
.btn .arw { transition: transform .18s; }
.btn:hover .arw { transform: translateX(3px); }

/* ---------- Wordmark ---------- */
.wordmark {
  font-size: clamp(2.4rem, 10vw, 8.6rem);
  line-height: .88;
  letter-spacing: -0.05em;
  margin: 0;
  font-weight: 700;
}
.wordmark em { font-family: var(--serif); font-style: italic; font-weight: 500; }

/* ---------- Hero ---------- */
.hero { padding: clamp(18px, 2.6vw, 34px) 0 0; }
.hero .kicker {
  display: flex; align-items: center; gap: 14px;
  font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 18px;
}
.hero .kicker::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* Deliberately smaller than a default h1, and broken into three short lines so
   the line breaks are the designer's, not the browser's. */
.hero h1 {
  font-size: clamp(1.7rem, 3.1vw, 2.6rem);
  line-height: 1.16;
  letter-spacing: -0.03em;
  max-width: 24ch;
}
/* "untangle" carries the invite, so it gets the serif italic plus a soft
   marigold wash behind it rather than being shouted in the same face. */
.hero h1 .hl {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
  background: linear-gradient(transparent 62%, var(--marigold) 62%);
  padding: 0 .06em;
  border-radius: 4px;
}

/* Point 3: the space to the right of the opening heading was bare. It is
   filled by a drawn sun-bloom, which also carries the meaning of the name:
   Prakasa is light. Two small marks echo the modality panels around it. */
.hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
}
.hero__deco {
  position: relative;
  display: grid; place-items: center;
  height: clamp(210px, 23vw, 290px);
}
.hero__bloom {
  width: clamp(180px, 19vw, 250px); height: auto;
  display: block;
}
.hero__deco .mark {
  position: absolute; z-index: 1;
  font-family: var(--serif); font-weight: 600; line-height: 1;
}
.hero__deco .mark--b { font-size: clamp(2.1rem, 3.6vw, 3.1rem); color: var(--sky); right: 10%; top: 4%; }
.hero__deco .mark--c { font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--olive); left: 7%; bottom: 8%; }
.hero__deco .dot-c {
  position: absolute; z-index: 1; border-radius: 50%;
  width: clamp(14px, 1.4vw, 20px); height: clamp(14px, 1.4vw, 20px);
  background: var(--sky); left: 16%; top: 10%;
}
@media (max-width: 900px) {
  .hero__top { grid-template-columns: minmax(0, 1fr); }
  .hero__deco { display: none; }
}

.tiles {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, .58fr);
  gap: 18px;
  margin-top: clamp(30px, 4vw, 52px);
}
.tile { border-radius: var(--radius-lg); overflow: hidden; position: relative; min-width: 0; }
.tile--copy {
  background: var(--butter); color: var(--ink);
  padding: clamp(30px, 4.4vw, 60px);
  min-height: 430px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.tile--copy h2 { color: var(--ink); font-size: clamp(1.55rem, 2.8vw, 2.35rem); max-width: 19ch; }
.tile--copy p { color: #5C4A2E; max-width: 34ch; margin: 0; }
.tile--copy .cta { margin-top: 30px; }
/* The decorative blobs sit behind the copy and the button, so a narrow tile
   never lets a shape cover the call to action. */
.tile--copy > div, .tile--copy > .cta { position: relative; z-index: 1; }
.blob {
  position: absolute; border-radius: 50%; pointer-events: none;
}
.blob--a { width: 210px; height: 210px; background: var(--marigold); right: -60px; bottom: -70px; }
.blob--b { width: 120px; height: 120px; background: rgba(255,255,255,.30); left: -30px; top: -30px; }
/* The portrait is a small bright accent now rather than half the hero, held in
   a multi-colour frame so it reads as illustration alongside the text. */
.tile--photo {
  background: linear-gradient(150deg, var(--marigold), var(--canyon) 58%, var(--sky));
  padding: 13px; min-height: 430px;
}
.tile--photo img {
  position: absolute; inset: 13px; width: calc(100% - 26px); height: calc(100% - 26px);
  object-fit: cover; object-position: 50% 30%;
  border-radius: calc(var(--radius-lg) - 13px);
}
.photo-tag {
  position: absolute; z-index: 2; left: 20px; bottom: 20px;
  background: var(--paper); border-radius: 999px; padding: 11px 20px;
  font-weight: 700; font-size: .9rem; box-shadow: var(--shadow);
}
.hero-note {
  margin-top: 22px; font-family: var(--serif); font-style: italic;
  color: var(--ink-soft); font-size: 1.05rem;
}

/* ---------- Section heading ---------- */
.sec-head { max-width: 900px; margin-bottom: clamp(30px, 4vw, 52px); }
.sec-head h2 { margin-bottom: .3em; }
.sec-head p { font-size: clamp(.95rem, 1.25vw, 1.06rem); color: var(--ink-soft); margin: 0; }

/* ---------- Card grids ---------- */
.grid { display: grid; gap: 18px; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card { border-radius: var(--radius); padding: 34px 32px 38px; min-height: 250px; display: flex; flex-direction: column; }
/* Every card that holds words uses the same warm beige, so the text colour is
   identical block to block. Colour is reserved for the illustration circles. */
/* Point 4: back to the colourful boxes she preferred, each a different colour.
   The 01 / 02 / 03 are replaced by the small serif marks used in the modality
   panels, so the two sections speak the same visual language. */
.card--butter { background: var(--butter); }
.card--sky { background: var(--sky); color: #fff; }
.card--olive { background: var(--olive); color: #fff; }
.card--paper { background: var(--paper); box-shadow: var(--shadow); }
.card--peach { background: #FBE3D6; }
.card--mist { background: #E6EDF6; }
.card--sage { background: #EDEEDB; }
.card h3 { margin-bottom: 12px; }
.card p { font-size: 1rem; margin: 0; color: var(--ink-soft); }
.card--sky h3, .card--olive h3 { color: #fff; }
.card--sky p, .card--olive p { color: rgba(255,255,255,.92); }
.card__num {
  font-family: var(--serif); font-size: .95rem; font-weight: 600;
  letter-spacing: .1em; opacity: .6; margin-bottom: 20px; display: block;
}
.card__ic {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--marigold); display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.5rem; font-weight: 600;
  color: var(--ink); margin-bottom: 20px;
}
.card--sky .card__ic { background: rgba(255,255,255,.92); color: #3E5C8A; }
.card--olive .card__ic { background: rgba(255,255,255,.92); color: #6C6A28; }
.card__spacer { flex: 1; }

/* ---------- Big alternating panels ---------- */
.panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-radius: var(--radius-lg); overflow: hidden;
  margin-bottom: 18px; min-height: 320px;
}
/* The copy side of every panel is the same beige with the same ink text. The
   colour lives in the art half, which is what the eye should read as picture. */
.panel__copy { padding: clamp(30px, 4.2vw, 58px); display: flex; flex-direction: column; justify-content: center; background: var(--beige); }
.panel__copy h3 { font-size: clamp(1.3rem, 2.1vw, 1.85rem); margin-bottom: 14px; }
.panel__copy p { max-width: 42ch; margin: 0; color: var(--ink-soft); }
.panel__art { position: relative; display: grid; place-items: center; overflow: hidden; }
.panel__art span { font-family: var(--serif); font-weight: 600; line-height: 1; font-size: clamp(4.2rem, 11vw, 9.5rem); opacity: .92; }
.panel--a .panel__art { background: var(--canyon); color: #fff; }
.panel--b .panel__art { background: var(--sky); color: #fff; }
.panel--c .panel__art { background: var(--olive); color: #fff; }
.panel--flip .panel__copy { order: 2; }
.panel--flip .panel__art { order: 1; }

/* ---------- Notice (crisis) ---------- */
.notice {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 56px);
  box-shadow: var(--shadow);
  border-top: 8px solid var(--canyon);
}
.notice__tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--canyon); color: #fff;
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 9px 18px; border-radius: 999px; margin-bottom: 20px;
}
.notice h2 { font-size: clamp(1.45rem, 2.7vw, 2.05rem); }
/* The sentence that matters most is highlighted rather than left to blend in
   with the rest of the paragraph. It fills the notice width rather than
   inheriting .lead's narrow measure, which was cutting the line short. */
.notice .urgent {
  background: #FBE3D6;
  box-shadow: inset 4px 0 0 var(--canyon-deep);
  border-radius: 14px;
  padding: 18px 22px;
  margin: 0 0 20px;
  max-width: none;
  text-wrap: pretty;
}
.notice .urgent b { color: var(--canyon-deep); }
.notice__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 216px), 1fr)); gap: 12px; margin: 26px 0 20px; }
/* Each help line gets its own colour so the boxes are told apart at a glance. */
.helpline { background: var(--beige); border-radius: 20px; padding: 20px; border-left: 6px solid var(--canyon); }
.helpline:nth-child(2) { border-left-color: var(--sky); }
.helpline:nth-child(3) { border-left-color: var(--olive); }
.helpline:nth-child(4) { border-left-color: var(--marigold); }
.helpline small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.helpline strong { display: block; font-family: var(--serif); font-size: 1.45rem; font-weight: 600; margin: 5px 0 3px; letter-spacing: -0.01em; }
.helpline span { display: block; font-size: .84rem; color: var(--ink-soft); line-height: 1.4; }
.notice__foot { font-family: var(--serif); font-style: italic; color: var(--ink-soft); font-size: .98rem; }

/* ---------- Word boxes (what brings you here) ---------- */
.words { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.wb { border-radius: 24px; overflow: hidden; background: var(--beige); transition: box-shadow .2s, transform .2s; }
.wb:hover { transform: translateY(-2px); }
.wb.open { box-shadow: inset 0 0 0 2px var(--canyon); }
.wb__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 26px 26px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.85rem); font-weight: 600;
  letter-spacing: -0.02em; color: var(--ink); line-height: 1.1;
}
.wb__ic {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--canyon); color: #fff; display: grid; place-items: center;
  font-size: 1.15rem; line-height: 1; transition: transform .24s, background .2s;
  font-family: var(--sans);
}
.wb.open .wb__ic { transform: rotate(45deg); background: var(--canyon-deep); }
.wb__panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.wb__panel > div { padding: 0 26px 26px; color: var(--ink-soft); font-size: 1rem; }
.wb__panel p:last-child { margin-bottom: 0; }

/* ---------- About split ---------- */
.split { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 76px); align-items: start; }
.portrait { position: relative; }
@media (min-width: 1001px) { .portrait { position: sticky; top: 96px; } }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 42%; border-radius: var(--radius-lg); }
.portrait::after {
  content: ""; position: absolute; width: 130px; height: 130px; border-radius: 50%;
  background: var(--marigold); right: -26px; bottom: -26px; z-index: -1;
}
.portrait__tag {
  position: absolute; left: 18px; bottom: 18px;
  background: var(--paper); border-radius: 999px; padding: 10px 18px;
  font-weight: 700; font-size: .88rem; box-shadow: var(--shadow);
}
/* Each paragraph in the about copy gets its own soft card, so the page reads as
   a set of blocks instead of one long column of text. */
.about-body > p {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 20px 24px;
  margin: 0 0 14px;
  color: var(--ink-soft);
}
.about-body > p.lead { background: var(--beige); border-color: transparent; color: var(--ink); padding: 24px 26px; }
.about-body > p strong { color: var(--ink); }
/* "Outside the therapy room" is the light, human close, so it gets the box the
   client pointed at rather than another plain card. */
.about-body > p.outside {
  background: var(--butter);
  border: 0;
  border-radius: 22px;
  padding: 22px 26px;
  font-family: var(--serif);
  font-style: italic;
  color: #5C4A2E;
  font-size: 1.05rem;
}
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.chip {
  background: var(--butter); border-radius: 999px; padding: 10px 18px;
  font-weight: 700; font-size: .9rem;
}
.chip--sky { background: #DFE8F4; }
.chip--sage { background: #E9EAD6; }

/* ---------- Credentials ---------- */
.creds { display: grid; gap: 12px; margin-top: 8px; }
.cred {
  background: var(--beige); border-radius: 20px; padding: 22px 24px;
  display: flex; gap: 16px; align-items: flex-start;
}
.cred .tick {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--olive); color: #fff; display: grid; place-items: center;
  font-size: .9rem; font-weight: 700; margin-top: 2px;
}
.cred p { margin: 0; font-size: 1rem; }
.cred a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cred:nth-child(2n) .tick { background: var(--canyon); }
.cred:nth-child(3n) .tick { background: var(--sky); }

/* ---------- Values ---------- */
.values { display: grid; gap: 16px; }
.value { border-radius: var(--radius); padding: 32px 34px; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; align-items: start; }
/* Same mark-in-a-circle as the offer cards, replacing the old 01 / 02 / 03. */
.value__n {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.88);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.4rem; font-weight: 600;
  color: var(--canyon-deep); margin-top: 2px;
}
.value h3 { font-size: 1.35rem; margin-bottom: 8px; }
.value p { margin: 0; color: var(--ink-soft); }
/* Point 4: each value block a different colour, matching the offer cards. */
.value--butter { background: var(--butter); }
.value--sky { background: var(--sky); color: #fff; }
.value--sky p { color: rgba(255,255,255,.94); }
.value--olive { background: var(--olive); color: #fff; }
.value--olive p { color: rgba(255,255,255,.94); }
.value--butter .value__n { color: var(--canyon-deep); }
.value--sky .value__n { color: #3E5C8A; }
.value--olive .value__n { color: #6C6A28; }

/* ---------- Page head ---------- */
.page-head { padding: clamp(34px, 5vw, 74px) 0 clamp(26px, 3vw, 44px); }
.page-head h1 { font-size: clamp(2.05rem, 6.6vw, 5rem); margin-bottom: .28em; }
.page-head p { font-size: clamp(.98rem, 1.3vw, 1.1rem); color: var(--ink-soft); max-width: 54ch; }
.page-head--center { text-align: center; }
.page-head--center p { margin-inline: auto; }

/* ---------- FAQ ---------- */
.faq-group { margin-bottom: clamp(38px, 4.5vw, 60px); }
.faq-group__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.faq-group__head .dot { width: 15px; height: 15px; border-radius: 50%; background: var(--canyon); flex: 0 0 15px; }
.faq-group__head h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 0; }
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.qa { border-radius: 22px; overflow: hidden; background: var(--beige); transition: box-shadow .2s; }
.qa.open { box-shadow: inset 0 0 0 2px var(--canyon); }
.qa-q {
  width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 22px 24px; background: none; border: 0; cursor: pointer;
  font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.35;
  color: var(--ink); text-align: left;
}
.qa-ic {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--espresso); color: var(--cream);
  display: grid; place-items: center; font-size: 1.15rem; line-height: 1;
  transition: transform .24s; margin-top: 1px;
}
.qa.open .qa-ic { transform: rotate(45deg); }
.qa-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.qa-a > div { padding: 0 24px 24px; color: var(--ink-soft); font-size: 1rem; }
.qa-a p:last-child { margin-bottom: 0; }

/* ---------- Resources ---------- */
.res-section { margin-bottom: clamp(40px, 5vw, 64px); }
.res-section__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.res-section__head .dot { width: 15px; height: 15px; border-radius: 50%; background: var(--olive); flex: 0 0 15px; }
.res-section__head h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 0; }
.res-section__intro { color: var(--ink-soft); max-width: 62ch; margin: -8px 0 22px; }
.res-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.res-card { border-radius: 24px; padding: 28px 30px; background: var(--beige); }
.res-card h3 { font-size: 1.2rem; margin-bottom: 4px; }
.res-card .meta { font-size: .88rem; font-weight: 700; color: var(--canyon-deep); margin-bottom: 10px; letter-spacing: .01em; }
.res-card p { color: var(--ink-soft); font-size: .98rem; }
.res-card ol { color: var(--ink-soft); font-size: .98rem; padding-left: 1.25em; margin: .3em 0 0; }
.res-card li { margin-bottom: 5px; }
.quote { font-family: var(--serif); font-size: clamp(1.12rem, 1.9vw, 1.5rem); font-style: italic; line-height: 1.32; margin: 0; }
.quote-by { display: block; margin-top: 12px; font-family: var(--sans); font-style: normal; font-size: .95rem; font-weight: 700; color: var(--ink-soft); }
.res-span { grid-column: 1 / -1; }

/* Closing note on the resources page. It sits above the enquiry block, which
   already carries the photograph, so this one stays typographic. */
.res-close {
  background: var(--sky); color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(34px, 4.6vw, 64px);
  display: flex; flex-direction: column; align-items: flex-start;
}
.res-close h2 { color: #fff; font-size: clamp(1.55rem, 2.8vw, 2.3rem); max-width: 22ch; }
.res-close p { color: #EDF2FA; max-width: 48ch; margin-bottom: 26px; }

/* ---------- Contact / enquiry ---------- */
.contact {
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--canyon); color: #fff;
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .45fr);
}
.contact__copy { padding: clamp(32px, 4.6vw, 64px); display: flex; flex-direction: column; justify-content: center; }
/* The flex column would stretch the inline-block chip to the full width and
   leave a band behind the heading, so it keeps its own size. */
.contact__copy .eyebrow { align-self: flex-start; }
.contact__copy h2 { color: #fff; font-size: clamp(1.55rem, 2.8vw, 2.3rem); }
.contact__copy p { color: #FFEEE2; }
.contact__copy .btn { align-self: flex-start; margin-top: 22px; }
.contact__photo { position: relative; min-height: 300px; background: linear-gradient(150deg, var(--marigold), var(--canyon)); }
.contact__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.contact__inline { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.contact__inline a {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.16); color: #fff; text-decoration: none;
  padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: .92rem;
  transition: background .18s;
}
.contact__inline a:hover { background: rgba(255,255,255,.28); }
.contact__inline .ic { display: inline-flex; width: 17px; height: 17px; }
.contact__inline .ic svg { width: 100%; height: 100%; }

.form-card { background: var(--paper); border-radius: var(--radius-lg); padding: clamp(26px, 3.6vw, 46px); box-shadow: var(--shadow); margin-top: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: .9rem; font-weight: 700; margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: 14px 16px; border-radius: 16px; border: 2px solid var(--line);
  background: var(--cream); transition: border-color .18s, background .18s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--canyon); background: #fff; }
.field--error input, .field--error textarea { border-color: var(--canyon-deep); }
.field__err { display: none; color: var(--canyon-deep); font-size: .84rem; font-weight: 700; margin-top: 6px; }
.field--error .field__err { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 16px 0 0; font-weight: 700; min-height: 1.4em; }
.form-status.ok { color: #5E7A2E; }
.form-status.err { color: var(--canyon-deep); }

/* ---------- Get in touch ---------- */
.git {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
  background: var(--butter);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 72px);
}
.git__lead h2 { font-size: clamp(1.5rem, 2.8vw, 2.3rem); max-width: 22ch; }
.git__lead p { color: #5C4A2E; max-width: 46ch; }
.git__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.git__cards { display: grid; gap: 12px; }
.git__card {
  background: var(--paper);
  border-radius: 22px;
  padding: 20px 22px;
  box-shadow: var(--shadow);
}
.git__card small {
  display: block; font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 6px;
}
.git__copy {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%; text-decoration: none; text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink);
  flex-wrap: wrap;
}
.git__value {
  font-family: var(--serif); font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 600; letter-spacing: -0.01em; word-break: break-word;
}
.git__hint {
  flex: 0 0 auto; background: var(--butter); border-radius: 999px;
  padding: 7px 14px; font-size: .78rem; font-weight: 700;
  transition: background .18s;
}
.git__copy:hover .git__hint { background: var(--marigold); }

/* ---------- Turning point cards ---------- */
/* Kept as a light reading block with ink text so it matches every other
   word-bearing block on the page; the colour lives in the word pills. */
.turn { background: var(--paper); border-radius: var(--radius-lg); padding: clamp(32px, 5vw, 72px); box-shadow: var(--shadow); }
.turn h2 { max-width: 22ch; }
.turn__hint { color: var(--ink-soft); margin: 14px 0 0; font-size: .98rem; }

/* ---------- Why Prakasa story ---------- */
/* Point 1: the photograph is gone from this block. "What Prakasa means to me"
   is now the headline, and the story itself is set small beneath it. */
.story {
  background: var(--beige); border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 66px);
}
.story__head {
  font-size: clamp(1.5rem, 2.7vw, 2.1rem);
  max-width: 22ch;
  margin: 0 0 20px;
}
.story__lead {
  font-size: clamp(.92rem, 1.15vw, 1rem);
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0;
  max-width: 80ch;
}
.turn__close {
  margin: 34px 0 0; font-family: var(--serif); font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem); line-height: 1.45; color: var(--ink);
  max-width: 46ch; text-wrap: balance;
}

/* ---------- Profile band ---------- */
.profile { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(24px, 4vw, 52px); align-items: center; }
.profile__photo { position: relative; }
.profile__photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 24%; border-radius: var(--radius-lg); }
.profile__photo::after {
  content: ""; position: absolute; inset: auto -18px -18px auto;
  width: 110px; height: 110px; border-radius: 50%; background: var(--marigold); z-index: -1;
}
.profile__body h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.profile__body .script { color: var(--canyon-deep); }
.profile__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.profile__card { border-radius: 22px; padding: 24px 26px; background: var(--beige); }
.profile__card h4 { margin-bottom: 6px; }
.profile__card p { margin: 0; font-size: .96rem; color: var(--ink-soft); }
/* Colour lives in the top edge, not the text, so both cards read the same. */
.profile__card--a { box-shadow: inset 0 4px 0 var(--marigold); }
.profile__card--b { box-shadow: inset 0 4px 0 var(--sky); }

/* ---------- Disclosure strip ---------- */
.disc { background: var(--butter); margin-top: clamp(48px, 6vw, 88px); padding: clamp(28px, 3.6vw, 44px) 0; }
.disc p { max-width: 92ch; margin: 0 auto; font-size: .96rem; color: #5C4A2E; text-align: center; }
.disc b { color: var(--ink); }
.disc a { color: var(--canyon-deep); font-weight: 700; }

/* ---------- Footer ---------- */
/* Full width and flush to the bottom, with only the top corners rounded so the
   cream page shows through the curve above it. */
.site-footer {
  background: var(--espresso); color: #EFE7DA;
  padding: clamp(58px, 7.2vw, 102px) 0 30px;
  margin-top: clamp(56px, 7vw, 104px);
  border-radius: clamp(36px, 6vw, 92px) clamp(36px, 6vw, 92px) 0 0;
}
.site-footer ::selection { background: var(--marigold); color: var(--ink); }

.foot-hero {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 5vw, 72px); align-items: end;
  padding-bottom: clamp(36px, 5vw, 60px);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.foot-mark {
  font-size: clamp(2.4rem, 7.2vw, 5.2rem);
  font-weight: 700; letter-spacing: -0.045em; line-height: .92;
  color: #fff;
}
/* Point 6: the wordmark uses the same face as the header, so the two ends of
   the page read as one brand rather than two. */
.foot-mark em { font-family: var(--sans); font-style: normal; font-weight: 700; color: var(--marigold); letter-spacing: -0.045em; }
.foot-hero-side { justify-self: end; max-width: 46ch; }
.foot-lede { color: #C9BCAA; font-size: 1rem; line-height: 1.65; margin: 0 0 22px; }
.foot-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn--butter { background: var(--butter); color: var(--ink); }
.btn--butter:hover { background: var(--marigold); }
.btn--ghost { background: transparent; color: #EFE7DA; box-shadow: inset 0 0 0 2px rgba(255,255,255,.32); }
.btn--ghost:hover { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px #fff; }

.foot-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(34px, 4.4vw, 52px) 0 clamp(30px, 3.6vw, 44px);
}
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.foot-col h5 {
  margin: 0 0 6px; font-size: .74rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--butter);
}
.foot-col a, .foot-copy {
  color: #E4D9C9; text-decoration: none; font-weight: 600;
  font-size: .98rem; line-height: 1.4; width: fit-content;
  transition: color .18s;
}
.foot-col a:hover { color: #fff; }
.foot-copy {
  display: flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font-family: inherit;
}
.foot-copy:hover { color: #fff; }
.foot-copy__hint {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--marigold); box-shadow: inset 0 0 0 1px rgba(255,198,79,.45);
  border-radius: 999px; padding: 3px 10px;
}

.foot-bot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .86rem; color: #A79885;
}

/* Touch devices need a full finger's height on their tap targets, at every
   screen size. This is keyed on the input, not the width, so a tablet in
   landscape gets it as well as a phone. */
@media (hover: none) {
  .foot-col { gap: 2px; }
  .foot-col h5 { margin-bottom: 10px; }
  .foot-col a, .foot-copy { padding: 9px 0; }
  .contact__inline a, .reach-menu a, .chip { min-height: 40px; }
  .contact__inline a, .reach-menu a { align-items: center; }
}

/* ---------- Reveal on scroll ---------- */
.js .rv { opacity: 0; transform: translateY(18px); }
.js .rv.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  /* Header on a phone: brand and menu button share one row, and the reach
     control sits directly beneath instead of wrapping to a third line. */
  .head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand burger"
      "reach reach";
    align-items: center;
    gap: 12px;
    padding: 13px 0 14px;
  }
  .brand { grid-area: brand; }
  .burger { grid-area: burger; display: block; }
  .reach { grid-area: reach; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 8px;
    background: var(--cream); padding: 14px var(--gutter) 24px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 40px rgba(90,55,25,.12);
  }
  .nav-open .nav { display: flex; }
  .nav .pill { padding: 15px 20px; }
  .reach-btn { width: 100%; justify-content: space-between; padding: 14px 20px; }
  .reach-menu { position: static; width: 100%; box-shadow: none; background: transparent; padding: 4px 0 0; }
  .reach-menu a { background: var(--paper); margin-bottom: 8px; }
  .site-header { position: sticky; }
  .head { position: relative; }

  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile--copy, .tile--photo { min-height: 400px; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .panel { grid-template-columns: minmax(0, 1fr); }
  .panel--flip .panel__copy, .panel--flip .panel__art { order: 0; }
  .panel__art { min-height: 210px; }
  .contact { grid-template-columns: minmax(0, 1fr); }
  .contact__photo { min-height: 260px; }
  .faq-grid, .res-grid { grid-template-columns: minmax(0, 1fr); }
  .words { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story { grid-template-columns: minmax(0, 1fr); }
  .foot-hero { grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start; }
  .foot-hero-side { justify-self: start; max-width: 54ch; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
  .git { grid-template-columns: minmax(0, 1fr); }
  .profile__cards { grid-template-columns: minmax(0, 1fr); }
  .profile { grid-template-columns: minmax(0, 1fr); }
}

/* Tablets and large phones: two columns are too cramped below this, so the
   grids that would otherwise squeeze go to a single column. */
@media (max-width: 760px) {
  .grid--3 { grid-template-columns: minmax(0, 1fr); }
  .faq-grid, .res-grid { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .profile { grid-template-columns: minmax(0, 1fr); }
  .creds { gap: 10px; }
}

@media (max-width: 620px) {
  body { font-size: .95rem; }
  .wordmark { font-size: clamp(2.2rem, 12vw, 3.4rem); }
  .grid--3 { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .btn { width: 100%; padding: 15px 24px; }
  .card, .value { min-height: 0; }
  .value { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tile--copy, .tile--photo { min-height: 320px; }
  .tile--copy { padding: 28px 24px; }

  /* Phone rhythm. Sections and panels lose the airy desktop padding so the
     page reads as one continuous scroll rather than a stack of tall blocks. */
  .section { padding: clamp(44px, 11vw, 62px) 0; }
  .sec-head { margin-bottom: 26px; }
  h1 { letter-spacing: -0.04em; }
  .page-head { padding: 26px 0 26px; }
  .page-head h1 { font-size: clamp(1.85rem, 10vw, 2.6rem); }
  .hero h1 { max-width: none; }
  .hero-note { margin-top: 18px; font-size: 1rem; }

  .panel { min-height: 0; margin-bottom: 14px; }
  .panel__copy { padding: 28px 24px; }
  .panel__art { min-height: 150px; }
  .panel__art span { font-size: clamp(3.6rem, 22vw, 5.5rem); }

  .card { padding: 26px 24px 30px; }
  .card__ic { width: 46px; height: 46px; font-size: 1.15rem; margin-bottom: 16px; }

  .tiles { gap: 14px; margin-top: 26px; }
  .tile { border-radius: 26px; }
  .blob--a { width: 150px; height: 150px; right: -52px; bottom: -52px; }
  .blob--b { width: 92px; height: 92px; }
  .tile--copy, .tile--photo { min-height: 320px; }
  .tile--photo { padding: 9px; }
  .tile--photo img { inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); border-radius: 20px; }
  .tile--copy h2 { font-size: clamp(1.45rem, 6.6vw, 1.9rem); }
  .photo-tag { left: 14px; bottom: 14px; padding: 10px 16px; font-size: .85rem; }

  .words { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 24px; }
  .wb__btn { padding: 22px; font-size: 1.6rem; }
  .wb__panel > div { padding: 0 22px 22px; }

  .turn { padding: 28px 22px; border-radius: 26px; }
  .turn__hint { font-size: .94rem; }
  .turn__close { margin-top: 26px; font-size: 1.15rem; }

  .notice { padding: 26px 22px; border-radius: 26px; }
  .notice__grid { gap: 10px; }
  .helpline { padding: 17px; border-radius: 17px; }
  .helpline strong { font-size: 1.3rem; }

  .contact { border-radius: 26px; }
  .contact__copy { padding: 30px 24px; }
  .contact__copy h2 { font-size: clamp(1.5rem, 7vw, 1.95rem); }
  .contact__photo { min-height: 300px; }
  .contact__inline { gap: 9px; margin-top: 20px; }
  .contact__inline a { padding: 11px 17px; font-size: .88rem; }

  .form-card { padding: 24px 20px; border-radius: 26px; }
  .field input, .field select, .field textarea { font-size: 16px; }

  .git { padding: 28px 20px; border-radius: 26px; }
  .git__lead h2 { font-size: clamp(1.5rem, 7vw, 1.95rem); }
  .git__actions { gap: 10px; margin-top: 22px; }
  .git__card { padding: 17px 18px; border-radius: 20px; }
  /* At phone width the address and the Copy control cannot share a line at a
     readable size, so they stack deliberately instead of wrapping mid-word. */
  .git__copy { flex-direction: column; align-items: flex-start; gap: 11px; }
  .git__value { font-size: .94rem; word-break: normal; }

  .disc { margin-top: 42px; padding: 26px 0; }
  .disc p { text-align: left; }

  .site-footer { border-radius: clamp(30px, 11vw, 44px) clamp(30px, 11vw, 44px) 0 0; }
  .foot-mark { font-size: clamp(2.2rem, 12vw, 3rem); }
  .foot-hero { padding-bottom: 30px; }
  .foot-cols { padding: 30px 0 26px; }
  .foot-bot { padding-top: 18px; font-size: .82rem; }

  .portrait::after { display: none; }
  .chips { gap: 8px; }
  .chip { padding: 9px 15px; font-size: .86rem; }

  .faq-nav { gap: 8px; }
  .qa-q { padding: 19px 20px; font-size: 1rem; }
  .qa-a > div { padding: 0 20px 22px; }
  .res-card { padding: 24px 22px; border-radius: 22px; }
  .quote { font-size: 1.15rem; }

  .foot-cols { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .foot-cta { flex-direction: column; align-items: stretch; }
  .foot-bot { flex-direction: column; }
}