/* KIAC Refer a Family — values transcribed from
   design/Refer a Family.dc.html (locked; added 2026-08-10). DECISIONS system
   replaces the prototype's raw gutters/hovers: 56px --gutter rail + 1450px
   cap, motion tokens, arrow-as-::after, right-aligned section summaries,
   site.css form primitives. All classes r*-namespaced (nav-collision rule). */

/* ---------- Split hero ---------- */

/* Text column starts on the rail (padding-inline-start on the full-width
   container); the photo bleeds to the right viewport edge. Column ratio puts
   the seam at the prototype's x≈742 @1280 (1280 × 1.16/2) after the rail
   replaces the prototype's 52px inset: (742−56)/(1280−742) = 1.2768. */
.rhero { display: grid; grid-template-columns: 1.2768fr 1fr; min-height: 540px; background: var(--paper-light); padding-inline-start: var(--gutter); }
.rhero__copy { padding: 70px 52px 58px 0; display: flex; flex-direction: column; justify-content: center; }
.rhero__eyebrow { gap: 12px; margin-bottom: 24px; }
.rhero__eyebrow .rule { width: 34px; }
.rhero__eyebrow .label { color: var(--deep-teal); }
.rhero h1 { margin: 0; font-family: var(--font-condensed); font-weight: 700; font-size: clamp(58px, 4.8vw, 68px); line-height: .94; letter-spacing: -.015em; text-transform: uppercase; color: var(--ink); max-width: 600px; }
.rhero__h1-band { display: inline-block; align-self: flex-start; margin: 6px 0 0; padding: 2px 12px 6px; font-family: var(--font-condensed); font-weight: 700; font-size: clamp(58px, 4.8vw, 68px); line-height: .98; letter-spacing: -.015em; text-transform: uppercase; color: #fff; background: var(--deep-teal); }
.rhero__lede { margin: 24px 0 0; max-width: 620px; font: 400 17px/1.6 var(--font-serif); color: var(--ink); }
.rhero__lede--follow { margin-top: 14px; }
.rhero__ctas { display: flex; align-items: center; gap: 22px; margin-top: 32px; }
.rhero__meta { margin-top: 22px; font: 600 11px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(41, 42, 60, .7); }

.rhero__photo { position: relative; background: var(--photo-ink); }
/* hero photo stays B&W — no hover reveal (matches Home's hero) */
.rhero__img { position: absolute; inset: 0; background: url('/assets/img/KIAC-126-1920w.jpeg') 50% 38%/cover no-repeat; background-image: image-set(url('/assets/img/KIAC-126-1920w.webp') type('image/webp'), url('/assets/img/KIAC-126-1920w.jpeg') type('image/jpeg')); filter: var(--photo-filter); }
.rhero__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 64px 28px 20px; background: linear-gradient(to top, rgba(20, 21, 30, .9), rgba(20, 21, 30, 0)); font: 500 11px var(--font-sans); letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }

/* ---------- After resettlement ---------- */

.rafter { padding: 66px var(--gutter) 70px; background: #fff; border-top: 1px solid rgba(41, 42, 60, .12); }
.rafter__head { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; margin-bottom: 30px; }
.rafter h2 { margin: 0; font-family: var(--font-serif); font-weight: 300; font-size: 50px; line-height: 1.08; letter-spacing: -.02em; color: var(--ink); }
/* summary right-aligned per the section-header rule (docs/DECISIONS.md 2026-08-03) */
.rafter__summary { margin: 0; font: 400 17px/1.62 var(--font-serif); color: var(--ink); text-align: right; }
.rafter__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding-top: 26px; border-top: 1px solid rgba(41, 42, 60, .16); }
.rafter__cols p { margin: 0; font: 400 16.5px/1.6 var(--font-serif); color: rgba(41, 42, 60, .86); }

/* ---------- Services ---------- */

.rsvc { padding: 70px var(--gutter) 64px; background: var(--paper-alpha); border-top: 1px solid rgba(41, 42, 60, .12); }
.rsvc__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.rsvc h2 { margin: 0; font-family: var(--font-serif); font-weight: 300; font-size: 48px; line-height: 1.08; letter-spacing: -.02em; color: var(--ink); }
.rsvc__lede { margin: 18px 0 0; font: 400 17px/1.6 var(--font-serif); color: var(--ink); }
.rsvc__photo { aspect-ratio: 4/3; margin-top: 28px; }
.rsvc__img { background-image: url('/assets/img/kiac-133-ms9bzyy8-5qo2-1440w.jpeg'); background-image: image-set(url('/assets/img/kiac-133-ms9bzyy8-5qo2-1440w.webp') type('image/webp'), url('/assets/img/kiac-133-ms9bzyy8-5qo2-1440w.jpeg') type('image/jpeg')); background-position: 50% 30%; }
.rsvc__link { margin-top: 24px; }

.rsvc__row { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: baseline; padding: 18px 0; border-top: 1px solid rgba(41, 42, 60, .18); }
.rsvc__row:last-of-type { border-bottom: 1px solid rgba(41, 42, 60, .18); }
.rsvc__term { font: 600 17px var(--font-sans); color: var(--ink); }
.rsvc__def { font: 400 16px/1.55 var(--font-serif); color: rgba(41, 42, 60, .86); }

/* teal-wash check circle (also used by the steps header note) */
.rcheck { flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(47, 157, 143, .14); display: flex; align-items: center; justify-content: center; }
.rsvc__free { display: flex; align-items: center; gap: 11px; margin-top: 24px; }
.rsvc__free-text { font: 400 16px var(--font-serif); color: var(--ink); }
.rsvc__free-text strong { font: 700 15px var(--font-sans); }

/* ---------- "A complement to your work" ink band ---------- */

.rband { padding: 64px var(--gutter) 60px; background: var(--ink); }
.rband__grid { display: grid; grid-template-columns: 1fr 1.06fr; gap: 72px; align-items: start; }
.rband h2 { margin: 0; font-family: var(--font-serif); font-weight: 300; font-size: 46px; line-height: 1.1; letter-spacing: -.02em; color: #fff; }
.rband__body { margin: 22px 0 0; font: 400 17px/1.62 var(--font-serif); color: rgba(255, 255, 255, .86); }
.rband__body--follow { margin-top: 14px; }
.rband__langs { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .18); font: 400 16px/1.6 var(--font-serif); color: rgba(255, 255, 255, .86); }
.rband__langs strong { font: 600 14px var(--font-sans); letter-spacing: .06em; color: var(--light-teal); }

.rband__qs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; align-content: start; }
.rband__q { padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .18); font: italic 400 20px/1.4 var(--font-serif); color: #fff; }
.rband__q:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .18); }

/* ---------- How referrals work ---------- */

.rsteps { padding: 66px var(--gutter) 58px; background: var(--paper-alpha); border-top: 1px solid rgba(41, 42, 60, .12); }
.rsteps .section-header h2 { font-size: 50px; line-height: 1.08; letter-spacing: -.02em; }
.rsteps__note { display: flex; align-items: center; gap: 11px; }
.rsteps__note-text { font: 400 17px var(--font-serif); color: var(--ink); }

/* 1px-gap hack is fine inside a gutter-padded section (docs/DECISIONS.md) */
.rsteps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--grid-gap-ink); border: .5px solid #292A3C1A; }
.rstep { padding: 32px 28px 28px; border-top: 3px solid var(--ink); background: var(--paper-light); }
.rstep:last-child { border-top: 3px solid var(--teal); }
.rstep__num { font-family: var(--font-serif); font-weight: 500; font-size: 42px; line-height: .9; color: var(--ink); }
.rstep:last-child .rstep__num { color: var(--deep-teal); }
.rstep__title { margin-top: 14px; font-family: var(--font-condensed); font-weight: 700; font-size: 22px; line-height: 1; color: var(--ink); }
.rstep__body { margin: 10px 0 0; font: 400 15.5px/1.55 var(--font-serif); color: var(--ink); }

/* ---------- Referral form ---------- */

.rform { padding: 64px var(--gutter) 66px; background: #fff; border-top: 1px solid rgba(41, 42, 60, .12); }
.rform__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 72px; align-items: start; }

/* teal-keyline form sidebar grammar */
.rform__main { border-left: 2px solid var(--teal); padding-left: 34px; }
.rform__kicker { font: 600 11px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--deep-teal); margin-bottom: 16px; }
.rform h2 { margin: 0; font-family: var(--font-serif); font-weight: 300; font-size: 44px; line-height: 1.06; letter-spacing: -.02em; color: var(--ink); }
.rform__lede { margin: 14px 0 30px; max-width: 560px; font: 400 18px/1.55 var(--font-serif); color: rgba(41, 42, 60, .82); }

.rform__divider { font: 600 12px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); padding-bottom: 10px; border-bottom: 2px solid var(--ink); margin-bottom: 20px; }
.rform__divider--follow { margin-top: 34px; }
.rform__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; }
.rform__main > .chips { gap: 10px; }
.rform__note-field { margin-top: 26px; }

/* permission row: fcheck primitive on a bordered paper wash; the clay
   asterisk is the page's single clay accent (prototype-verbatim) */
.rform__permission { width: 100%; margin-top: 26px; padding: 16px 18px; background: var(--paper-alpha); border: 1px solid rgba(41, 42, 60, .16); gap: 12px; }
.rform__permission .fcheck__text { font: 400 15.5px/1.5 var(--font-serif); }
.rform__req { color: var(--clay); }

.rform__actions { display: flex; align-items: center; gap: 24px; margin-top: 26px; }
/* real but inert <button> (Get Help precedent) — no hover until wired */
.rform__submit { padding: 16px 44px; border: 0; border-radius: 0; background: var(--deep-teal); color: #fff; font-family: var(--font-condensed); font-weight: 700; font-size: 17px; text-transform: uppercase; cursor: pointer; }
.rform__fine { max-width: 340px; font: 400 13.5px/1.5 var(--font-serif); color: rgba(41, 42, 60, .66); }

/* ----- direct-handoff aside ----- */

.rform__aside h3 { margin: 0; font-family: var(--font-serif); font-weight: 300; font-size: 30px; line-height: 1.14; letter-spacing: -.015em; color: var(--ink); }
.rform__aside-body { margin: 14px 0 0; font: 400 16.5px/1.55 var(--font-serif); color: rgba(41, 42, 60, .86); }
.rform__aside-ctas { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 22px; }
.rform__share { padding: 13px 24px; font-size: 14px; }

.rcard { margin-top: 30px; border-top: 3px solid var(--deep-teal); background: var(--paper-alpha); padding: 26px 24px; }
.rcard__title { font-family: var(--font-condensed); font-weight: 700; font-size: 24px; line-height: 1; color: var(--ink); }
.rcard__grid { display: grid; grid-template-columns: 132px 1fr; gap: 20px; align-items: center; margin-top: 18px; }
.rcard__qr { position: relative; width: 132px; height: 132px; }
.rcard__body { font: 400 16px/1.5 var(--font-serif); color: var(--ink); }
.rcard__langs { margin-top: 10px; font: 600 11px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--deep-teal); }
.rcard__free { margin-top: 5px; font: 400 14.5px var(--font-serif); color: rgba(41, 42, 60, .74); }
.rcard__link { margin-top: 20px; }

/* ---------- Why KIAC (Aziz) ---------- */

.rwhy { padding: 66px var(--gutter) 62px; background: var(--paper); border-top: 1px solid rgba(41, 42, 60, .12); }
.rwhy__grid { display: grid; grid-template-columns: 1fr 1.06fr; gap: 56px; align-items: center; }
.rwhy h2 { margin: 0; font-family: var(--font-serif); font-weight: 300; font-size: 46px; line-height: 1.08; letter-spacing: -.02em; color: var(--ink); }
.rwhy__body { margin: 20px 0 0; font: 400 17px/1.62 var(--font-serif); color: var(--ink); }
.rwhy__body--follow { margin-top: 22px; }
.rwhy__quote { margin: 22px 0 0; font-family: var(--font-serif); font-weight: 300; font-style: italic; font-size: 26px; line-height: 1.3; color: var(--ink); border-left: 2px solid var(--teal); padding-left: 22px; }
.rwhy__link { margin-top: 26px; }
.rwhy__photo { aspect-ratio: 16/11; }
.rwhy__img { background-image: url('/assets/img/kiac-127-ms6vljjs-191c-1440w.jpeg'); background-image: image-set(url('/assets/img/kiac-127-ms6vljjs-191c-1440w.webp') type('image/webp'), url('/assets/img/kiac-127-ms6vljjs-191c-1440w.jpeg') type('image/jpeg')); background-position: 44% 24%; }
.rwhy__caption { padding: 54px 20px 18px; }

/* ---------- FAQ ---------- */

.rfaq { padding: 66px var(--gutter) 62px; background: #fff; border-top: 1px solid rgba(41, 42, 60, .12); }
.rfaq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; }
.rfaq__eyebrow .rule { background: var(--ink); }
.rfaq__eyebrow .label { color: rgba(41, 42, 60, .7); }
.rfaq h2 { margin: 0; font-family: var(--font-serif); font-weight: 300; font-size: 46px; line-height: 1.08; letter-spacing: -.02em; color: var(--ink); }
.rfaq__intro { margin: 20px 0 0; max-width: 340px; font: 400 16.5px/1.6 var(--font-serif); color: rgba(41, 42, 60, .8); }

.rfaq__item { padding: 18px 0; border-top: 1px solid rgba(41, 42, 60, .18); }
.rfaq__item:last-child { border-bottom: 1px solid rgba(41, 42, 60, .18); }
.rfaq__btn { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 24px; padding: 0; background: none; border: 0; cursor: pointer; text-align: left; }
.rfaq__q { font: 600 17px var(--font-sans); color: var(--ink); transition: color var(--t-fast) var(--ease); }
.rfaq__btn:hover .rfaq__q { color: var(--deep-teal); }
.rfaq__icon { flex: none; font-family: var(--font-serif); font-weight: 300; font-size: 24px; line-height: 1; color: var(--deep-teal); }
.rfaq__icon::before { content: "+"; }
.rfaq__item.is-open .rfaq__icon::before { content: "\2212"; }

/* No-JS ships every answer visible; JS arming collapses closed items
   (is-armed), then enables transitions a frame later (is-anim) so the
   initial collapse doesn't animate. Height animates via the 0fr → 1fr grid
   track + asymmetric opacity (nav-accordion recipe). */
.rfaq__list.is-armed .rfaq__panel { display: grid; grid-template-rows: 0fr; opacity: 0; }
.rfaq__list.is-armed .rfaq__item.is-open .rfaq__panel { grid-template-rows: 1fr; opacity: 1; }
.rfaq__list.is-anim .rfaq__panel { transition: grid-template-rows 240ms var(--ease-swift), opacity 180ms var(--ease); }
.rfaq__list.is-anim .rfaq__item.is-open .rfaq__panel { transition: grid-template-rows 240ms var(--ease-swift), opacity 220ms var(--ease) 60ms; }
.rfaq__panel-inner { overflow: hidden; min-height: 0; }
.rfaq__panel-inner p { margin: 10px 0 0; max-width: 640px; font: 400 16px/1.6 var(--font-serif); color: rgba(41, 42, 60, .86); }
.rfaq__panel-inner p:first-child { margin-top: 12px; }

/* ---------- Final CTA band ---------- */

.rcta { padding: 64px var(--gutter) 60px; background: var(--deep-teal); --focus-ring: var(--light-teal); }
.rcta__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; align-items: center; }
.rcta__eyebrow { margin-bottom: 18px; }
.rcta__eyebrow .rule { background: #fff; }
.rcta__eyebrow .label { color: rgba(255, 255, 255, .88); }
.rcta h2 { margin: 0; font-family: var(--font-serif); font-weight: 300; font-size: 44px; line-height: 1.12; letter-spacing: -.018em; color: #fff; }
.rcta__body { margin: 18px 0 0; max-width: 560px; font: 400 17px/1.6 var(--font-serif); color: rgba(255, 255, 255, .9); }

.rcta__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.rcta__btn { display: inline-block; padding: 16px 36px; background: #fff; color: var(--deep-teal); font-family: var(--font-condensed); font-weight: 700; font-size: 16px; line-height: normal; text-transform: uppercase; transition: background-color var(--t-fast) var(--ease); }
a.rcta__btn:hover { color: var(--deep-teal); background-color: var(--paper); }
a.rcta__btn:active { background-color: color-mix(in srgb, var(--paper) 96%, var(--ink)); transition-duration: 40ms; }
/* white text-link variant for the teal band */
.rcta__link { color: #fff; border-color: rgba(255, 255, 255, .6); }
a.rcta__link:hover, a.rcta__link:focus-visible { color: #fff; border-color: #fff; }
.rcta__contact { margin-top: 8px; font: 400 15px/1.6 var(--font-serif); color: rgba(255, 255, 255, .88); }
.rcta__contact a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .45); transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.rcta__contact a:hover { color: #fff; border-color: #fff; }

/* ==================== Responsive ====================
   Two breakpoints site-wide (docs/DECISIONS.md 2026-08-04). Display clamps
   live inside the tablet query with coefficients that reach the desktop max
   below 1032px — the ≥1100px locked reference renders from base rules only. */

@media (max-width: 1032px) {
   /* Hero → single column, text first; photo becomes a band below the copy */
   .rhero { grid-template-columns: 1fr; min-height: 0; padding-inline-start: 0; }
   .rhero__copy { padding: 56px var(--gutter) 44px; }
   /* max matches the fluid base clamp's floor (58px at 1033) — no size jump
      crossing the tablet boundary */
   .rhero h1, .rhero__h1-band { font-size: clamp(40px, 6.4vw, 58px); }
   .rhero__ctas { flex-wrap: wrap; }
   .rhero__photo { min-height: 400px; }

   .rafter__head { grid-template-columns: 1fr; gap: 14px; }
   .rafter__summary { text-align: left; }
   .rafter__cols { grid-template-columns: 1fr; gap: 20px; }
   .rafter h2, .rsteps .section-header h2 { font-size: clamp(34px, 4.85vw, 50px); }

   .rsvc__grid { grid-template-columns: 1fr; gap: 40px; }
   .rsvc h2 { font-size: clamp(34px, 4.66vw, 48px); }

   .rband__grid { grid-template-columns: 1fr; gap: 44px; }
   .rband h2, .rwhy h2, .rfaq h2 { font-size: clamp(33px, 4.46vw, 46px); }

   .rstep { padding: 22px 18px 20px; }
   .rstep__num { font-size: clamp(38px, 4.66vw, 48px); }

   /* form first, handoff aside after (README form-grid rule) */
   .rform__grid { grid-template-columns: 1fr; gap: 48px; }
   .rform h2, .rcta h2 { font-size: clamp(32px, 4.27vw, 44px); }
   .rform__aside h3 { font-size: clamp(26px, 2.91vw, 30px); }

   .rwhy__grid { grid-template-columns: 1fr; gap: 36px; }
   .rfaq__grid { grid-template-columns: 1fr; gap: 40px; }
   .rfaq__intro { max-width: none; }
   .rcta__grid { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 743px) {
   .rhero__copy { padding-block: 44px 40px; }
   .rhero__photo { min-height: 320px; }

   /* term/def rows stack (README needs-list intent) */
   .rsvc__row { grid-template-columns: 1fr; gap: 6px; }

   .rband__qs { grid-template-columns: 1fr; }
   .rband__q:nth-last-child(2) { border-bottom: 0; }

   .rsteps__grid { grid-template-columns: 1fr; }
   .rstep { padding: 24px 22px 22px; }

   .rform__main { padding-left: 18px; }
   .rform__fields { grid-template-columns: 1fr; }
   .rform__actions { flex-direction: column; align-items: stretch; gap: 14px; }
   .rform__submit { width: 100%; padding: 14px 16px; }
   .rform__fine { max-width: none; }

   /* ≥44px accordion targets; row padding rebalances so the rhythm holds */
   .rfaq__item { padding: 8px 0; }
   .rfaq__btn { padding: 10px 0; min-height: 44px; align-items: center; }

   .rcta__btn { align-self: stretch; text-align: center; padding: 14px 16px; }
}

/* Image pipeline (docs/DECISIONS.md 2026-08-11): phones take the 1080w tier;
   position/size stay inherited from the base rules above. */
@media (max-width: 743px) {
  .rhero__img { background-image: url('/assets/img/KIAC-126-1080w.jpeg'); background-image: image-set(url('/assets/img/KIAC-126-1080w.webp') type('image/webp'), url('/assets/img/KIAC-126-1080w.jpeg') type('image/jpeg')); }
  .rsvc__img { background-image: url('/assets/img/kiac-133-ms9bzyy8-5qo2-1080w.jpeg'); background-image: image-set(url('/assets/img/kiac-133-ms9bzyy8-5qo2-1080w.webp') type('image/webp'), url('/assets/img/kiac-133-ms9bzyy8-5qo2-1080w.jpeg') type('image/jpeg')); }
  .rwhy__img { background-image: url('/assets/img/kiac-127-ms6vljjs-191c-1080w.jpeg'); background-image: image-set(url('/assets/img/kiac-127-ms6vljjs-191c-1080w.webp') type('image/webp'), url('/assets/img/kiac-127-ms6vljjs-191c-1080w.jpeg') type('image/jpeg')); }
}