/* resource-form.css - standalone FormBuilder pages (service-agreement, consult).
   TWO layouts on one template, keyed by a body modifier (rf-layout--{handle}):
   - service-agreement: single-column editorial flow (hero -> centered intro lede
     -> full-width terms grid -> centered sign card), elevated to the basic-page bar.
   - consult (default): the original 2-col body/form layout. A bespoke consultation
     layout is a separate design pass; until then it keeps its prior composition.
   Shared: the elevated hero (ported from basic-page.css), form field repairs, the
   checkbox-pill + file-upload treatments, dark card depth. All colors via tokens. */

/* =================================================================
   BASE + DEFAULT LAYOUT (consult): original 2-col body/form grid.
   ================================================================= */
.rf-layout { margin-block: var(--space-xl); }

.rf-grid {
  display: grid;
  gap: var(--space-xl);
  /* minmax(0,1fr), not 1fr: a 1fr track stretches to the FormBuilder card's
     min-content and overflows narrow viewports; the 0 floor lets it shrink. */
  grid-template-columns: minmax(0, 1fr);
}
.rf-grid > * { min-width: 0; }

.rf-intro { max-width: 60ch; }
.rf-intro.cms-content > p:first-of-type {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-heading);
}

@media (min-width: 60rem) {
  .rf-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
  }
  /* Pin both columns so the shorter one follows the taller instead of leaving a
     dead void beside it. Sticky no-ops on a column taller than the viewport.

     SCOPED TO `.rf-grid >` ON PURPOSE (2026-08-05). Unscoped, this also matched
     the consult column (`.rf-form.rfc-form.svc-form__body`), which lives in
     `.rfc-split`, not `.rf-grid`. The consult block overrode `position` but not
     the offset beside it, so the whole form column inherited --sticky-top and
     painted a full header-height below the row the grid had reserved for it: a
     dead band above the first field, and a submit row hanging ~100px over the
     closing "What happens next" copy. Keep the child combinator - it is what
     structurally excludes any future non-.rf-grid layout from this pin. */
  .rf-grid > .rf-intro,
  .rf-grid > .rf-form.svc-form__body { position: sticky; top: var(--sticky-top); }
}

/* =================================================================
   SERVICE-AGREEMENT LAYOUT (scoped): single-column editorial flow.
   ================================================================= */
.rf-layout--service-agreement { margin-block: clamp(1.5rem, 1rem + 2vw, 2.75rem) var(--space-2xl); }
.rf-layout--service-agreement .rf-grid { display: block; }
/* release the default 2-col sticky pins in the stacked flow */
.rf-layout--service-agreement .rf-intro,
.rf-layout--service-agreement .rf-form.svc-form__body { position: static; top: auto; }

/* Intro lede: centered editorial opener */
/* DOMINANT MOMENT: centered serif lede sets the calm document tone - .rf-intro > h2 */
.rf-layout--service-agreement .rf-intro { max-width: none; }
.rf-layout--service-agreement .rf-intro.cms-content > h2,
.rf-layout--service-agreement .rf-intro.cms-content > p {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}
.rf-layout--service-agreement .rf-intro.cms-content > h2 {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 340;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-heading);
  text-wrap: balance;
  margin: 0 0 0.75rem;
}
.rf-layout--service-agreement .rf-intro.cms-content > p {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0 auto;
}

/* Terms: full-width balanced multi-column editorial grid */
/* DOMINANT MOMENT: full-width 3-up terms grid over a hairline rule - .rf-intro > ul */
.rf-layout--service-agreement .rf-intro.cms-content > h3,
.rf-layout--service-agreement .rf-intro.cms-content > h4 {
  margin: clamp(2.5rem, 1.5rem + 4vw, 4rem) 0 0;
  padding-bottom: 1.25rem;
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 350;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.1;
  color: var(--color-heading);
  text-align: center;
  text-wrap: balance;
}
.rf-layout--service-agreement .rf-intro.cms-content > ul {
  /* override global .cms-content ul (display:flex; max-width:68ch) so multicol
     engages and the list spans full width. */
  display: block;
  max-width: none;
  list-style: none;
  margin: 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--color-border);
  columns: 1;
  column-gap: 3rem;
}
@media (min-width: 40rem) { .rf-layout--service-agreement .rf-intro.cms-content > ul { columns: 2; } }
@media (min-width: 64rem) { .rf-layout--service-agreement .rf-intro.cms-content > ul { columns: 3; } }
.rf-layout--service-agreement .rf-intro.cms-content > ul > li {
  list-style: none;
  break-inside: avoid;
  padding: 1.1rem 0;
  padding-left: 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-muted);
}
.rf-layout--service-agreement .rf-intro.cms-content > ul > li:first-child { border-top: 0; }
/* Only the LEADING term name becomes the block heading; a mid-sentence <strong>
   (e.g. a bold period) stays inline, not a stray bullet on its own line. */
.rf-layout--service-agreement .rf-intro.cms-content > ul > li > strong:first-child {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--color-heading);
  letter-spacing: 0.005em;
}
/* Kill the global rose-diamond bullet (::before) + any default marker on terms. */
.rf-layout--service-agreement .rf-intro.cms-content ul li::before { content: none; }
.rf-layout--service-agreement .rf-intro.cms-content ul li::marker { content: ""; }

/* Sign card: centered elevated card, the closing moment */
.rf-layout--service-agreement .rf-form.svc-form__body {
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  max-width: 44rem;
  margin-inline: auto;
}
.rf-layout--service-agreement .rf-form__head { margin-bottom: var(--space-lg); text-align: center; }
.rf-layout--service-agreement .rf-form__eyebrow {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-eyebrow);
}
.rf-layout--service-agreement .rf-form__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 350;
  font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-heading);
  text-wrap: balance;
}
.rf-layout--service-agreement .rf-form__lead {
  margin: 0 auto;
  max-width: 36ch;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-muted);
}
.rf-layout--service-agreement .rf-reassure {
  margin: var(--space-lg) auto 0;
  max-width: 46ch;
  text-align: center;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-muted);
}
.rf-layout--service-agreement .rf-reassure a { color: var(--color-accent); }
/* un-span email so First/Last + Email/Phone pair; agreement gets its own row */
@media (min-width: 40rem) {
  .rf-layout--service-agreement .rf-form .InputfieldForm .Inputfield_email_address { grid-column: auto !important; }
  .rf-layout--service-agreement .rf-form .InputfieldForm .Inputfield_terms_agreement { grid-column: 1 / -1 !important; }
}

/* =================================================================
   SHARED FORM FIELD REPAIRS (both pages)
   ================================================================= */
/* FormBuilder (Bootstrap5) emits an inline width:50% on each ColumnWidth field
   wrapper, which computes to 50% of the grid cell and shrinks inputs to stub
   underlines. The svc grid already owns columns, so neutralize the inline width. */
.rf-form .InputfieldForm .Inputfield[class*="InputfieldColumnWidth"] { width: 100% !important; }

/* Bootstrap column gutter (16px wrapper + ~26px .InputfieldContent padding-left)
   indents right-column inputs away from their labels. Zero it so every input
   left-aligns under its own label. */
.rf-form .InputfieldForm .Inputfield { padding-left: 0 !important; }
.rf-form .InputfieldForm .Inputfield > .InputfieldContent { padding-left: 0 !important; }

/* Agreement (service-agreement only field): hide the raw admin label; restyle the
   accept row as a refined rose-edged panel. */
.rf-form .Inputfield_terms_agreement > .InputfieldHeader {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.rf-form .Inputfield_terms_agreement .InputfieldContent.form-check {
  margin-top: 0 !important;
  padding: 1rem 1.1rem !important;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-rose-deep);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-rose-deep) 4%, var(--color-bg));
}
.rf-form .Inputfield_terms_agreement .form-check-label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--text-sm);
  color: var(--color-heading);
  cursor: pointer;
}
.rf-form .Inputfield_terms_agreement .form-check-input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}

/* Spam-trap fields (honeypot "comments" + "website"): hide off-screen. */
.rf-form .Inputfield_comments,
.rf-form .Inputfield_website {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  overflow: hidden !important;
}
.rf-form .Inputfield_cf-turnstile-response { display: none !important; }

/* Fluid form controls: FormBuilder defaults several inputs to a fixed pixel
   width that blows past the column on mobile. */
.rf-form .form-control,
.rf-form input[type="text"],
.rf-form input[type="email"],
.rf-form input[type="tel"],
.rf-form input[type="url"],
.rf-form input[type="number"],
.rf-form input[type="date"],
.rf-form textarea,
.rf-form select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* =================================================================
   Velvet Cinema HERO - ported from basic-page.css (shared by both pages).
   ================================================================= */
.bp-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(2rem, 5vw, 3.5rem);
}
[data-theme="dark"] .bp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 14% 0%, var(--color-accent-glow) 0%, transparent 55%);
  opacity: 0.15;
  pointer-events: none;
}
.bp-hero__eyebrow {
  display: block;
  margin-bottom: 1.1rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-eyebrow);
}
.bp-hero__eyebrow a {
  --hit-expander: 1;
  position: relative;
  color: inherit;
  text-decoration: none;
}
.bp-hero__eyebrow a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}
.bp-hero__title {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: clamp(2.4rem, 1.5rem + 4vw, 4.5rem);
  font-weight: 350;
  letter-spacing: -0.015em;
  line-height: 1.04;
  color: var(--color-heading);
  max-width: 20ch;
  text-wrap: balance;
}
.bp-hero__title em {
  font-style: italic;
  font-weight: 480;
  color: var(--color-rose-deep);
}
.bp-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  align-items: baseline;
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.bp-hero__meta strong { color: var(--color-heading); font-weight: var(--weight-semibold); }
.bp-hero__meta a {
  --hit-expander: 1;
  position: relative;
  color: inherit;
  text-decoration: none;
}
.bp-hero__meta a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}
@media (hover: hover) {
  .bp-hero__eyebrow a:hover,
  .bp-hero__meta a:hover { color: var(--color-heading); }
}

/* =================================================================
   DARK CARD DEPTH - lift the elevated form card off the deep field.
   ================================================================= */
[data-theme="dark"] .rf-form.svc-form__body {
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* =================================================================
   CHECKBOX GROUPS (consultation multi-select) - real selectable pill grid.
   ================================================================= */
.rf-form .InputfieldCheckboxesColumns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.5rem;
}
.rf-form .InputfieldCheckboxesColumns .form-check {
  width: auto !important; /* defeat inline 49% */
  margin: 0;
  padding: 0;
}
.rf-form .InputfieldCheckboxesColumns .form-check-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-heading);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.25;
  cursor: pointer;
  transition: border-color var(--transition-base), background var(--transition-base);
}
.rf-form .InputfieldCheckboxesColumns .form-check-input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}
.rf-form .InputfieldCheckboxesColumns .form-check-label:has(.form-check-input:checked) {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg));
}
@media (hover: hover) {
  .rf-form .InputfieldCheckboxesColumns .form-check-label:hover {
    border-color: var(--color-rose-deep);
  }
}
/* Checkbox + file groups: top-align content under their label. */
.rf-form.svc-form__body .InputfieldForm.FormBuilder .InputfieldCheckboxes > .InputfieldContent,
.rf-form.svc-form__body .InputfieldForm.FormBuilder .InputfieldFormBuilderFile > .InputfieldContent {
  margin-top: 0.4rem !important;
}

/* =================================================================
   FILE-UPLOAD DROPZONES (consultation) - bespoke dashed tile + affordance.
   ================================================================= */
.rf-form .InputfieldFormBuilderFile.InputfieldColumnWidth {
  width: 100% !important;
  margin-left: 0 !important;
}
.rf-form .InputfieldFormBuilderFileList,
.rf-form .InputfieldFormBuilderFileUpload,
.rf-form .InputfieldFormBuilderFile .card-body {
  list-style: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}
.rf-form input[type="file"] {
  display: block;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px dashed var(--color-border-hover);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--transition-base), background var(--transition-base);
}
.rf-form input[type="file"]::file-selector-button {
  margin-right: 0.9rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--color-btn-outline-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-btn-outline-text);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.rf-form input[type="file"]:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
@media (hover: hover) {
  .rf-form input[type="file"]:hover {
    border-color: var(--color-rose-deep);
    background: var(--color-bg-elevated);
  }
  .rf-form input[type="file"]:hover::file-selector-button {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
}

/* =================================================================
   CONSULT LAYOUT (scoped): the Concept D composition.
   Ben-approved 2026-07-23 from an interactive comp. Two devices:
   - >=64rem: a sticky editorial panel whose copy follows the section
     you are in, so the left column is never a dead void.
   - <64rem: the panel drops out and the form column becomes a single
     elevated card.
   The six selfie uploads are a HEAD at every width, with the example
   photo layered behind each upload control.

   MECHANISM: FormBuilder field order is never touched (reordering
   through its API corrupts the form). `display: contents` lifts every
   .Inputfield_<name> into the .rfc-form grid and grid-template-areas
   place them. See the resource-form.php docblock.
   ================================================================= */

.rf-layout--consult { margin-block: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0; }
.rfc-split { display: grid; gap: var(--space-xl); }
.rfc-split > * { min-width: 0; }

/* ---------- panel (>=64rem only) ---------- */
.rfc-panel { display: none; }

@media (min-width: 64rem) {
  .rfc-split {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
  .rfc-panel { display: block; }
}

/* The frame is DERIVED from its tallest slot, not declared (2026-08-05). It
   used to be `height: min(44rem, calc(100svh - var(--sticky-top) - 1rem))`,
   which is only safe while that number stays above the copy. It did not: the
   "photos" slot ran 268px, and on any viewport under ~760px tall the frame fell
   below it and `overflow: hidden` silently ate the last line, so the card read
   as broken - "For facial procedures, one clear close-up is..." with the rule
   and the phone number still sitting neatly underneath it.

   PINNING IS NOW GATED ON THERE BEING ROOM. min-height:46rem is the measured
   floor: the tallest slot plus the card's chrome needs ~512px, and
   46rem - var(--sticky-top) - 1rem clears that. Below it the panel simply flows
   with the page - a decorative column that scrolls away is honest, a pinned one
   that hides its own copy behind a scrollbar is not. A ceiling and a floor both
   expressed in svh would also fight here (min-height wins per spec and the card
   overruns the fold), which is why there is a cap and no floor. */
@media (min-width: 64rem) and (min-height: 46rem) {
  .rfc-panel {
    position: sticky;
    /* Was 5.5rem (88px) against a 157px header - 69px of the panel sat behind
       it. The cap has to move with the offset, so both read --sticky-top. */
    top: var(--sticky-top);
  }
  .rfc-panel__inner { max-height: calc(100svh - var(--sticky-top) - 1rem); }
}

/* DOMINANT MOMENT: the pinned panel that rewrites itself as you scroll - .rfc-panel__inner */
.rfc-panel__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2vw, 2rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--color-accent-glow) 12%, transparent) 0%, transparent 62%),
    var(--color-bg-elevated);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Short sections leave air at the foot of a fixed-height frame. The real KB
   monogram fills it as a theme-aware mask instead of it reading as a void.
   Kept fully inside the card and clear of the call rule - a mark clipped by an
   edge or bisected by a hairline reads as an accident, not a watermark. */
.rfc-panel__inner::before {
  content: "";
  position: absolute;
  right: 1.5rem;
  bottom: 6.5rem;
  width: 11rem;
  height: 11rem;
  background: var(--color-heading);
  -webkit-mask: url("../images/k-bella-kb-no-ring-mono.svg") no-repeat center / contain;
  mask: url("../images/k-bella-kb-no-ring-mono.svg") no-repeat center / contain;
  opacity: 0.05;
  pointer-events: none;
}

.rfc-panel__eyebrow {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-eyebrow);
}
.rfc-panel__title {
  margin: 0 0 1.25rem;
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 340;
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--color-heading);
  text-wrap: balance;
}

/* All five slots occupy ONE grid cell, so the stage measures the tallest of
   them and the frame can never be shorter than the copy it holds. That is what
   the old `position: absolute; inset: 1.25rem 0 0` could not do - an abspos
   slot contributes nothing to its parent's height, so the frame was sized by a
   hardcoded number instead and clipped whenever the number lost. The swap still
   happens in place: same cell, cross-faded, no reflow between sections.
   overflow-y is the escape valve for viewports too short even for this. */
.rfc-panel__stage {
  position: relative;
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  /* Vertical only. The resting slots below are offset with a transform, and a
     transform counts as scrollable overflow on BOTH axes - the Y side of that is
     already absorbed with padding-bottom further down. See .post-toc__sticky in
     inspiration.css for why naming overflow-x matters. */
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}
.rfc-slot {
  grid-area: 1 / 1;
  align-self: start;
  opacity: 0;
  visibility: hidden;
}
.rfc-slot.is-active { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .rfc-slot {
    transform: translateY(8px);
    transition: opacity 320ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1), visibility 320ms;
  }
  .rfc-slot.is-active { transform: none; }
  /* The four resting slots sit 8px low in the same grid cell, and a transform
     still counts as scrollable overflow even while the element is hidden - so
     the stage reported 8px to scroll and `overflow-y: auto` put a scrollbar on
     a card whose copy actually fits. Absorb exactly the reveal distance. Lives
     inside this query so it cannot outlive the transform that causes it. */
  .rfc-panel__stage { padding-bottom: 8px; }
}
/* 44ch, not 38ch. The stage is ~467px wide at 1440 and a 38ch measure used only
   about two thirds of it, so the copy wrapped early, ran tall, and drove up the
   very frame height that then clipped it. 44ch is still a comfortable measure
   and takes roughly 70px off the tallest slot. */
.rfc-slot p {
  max-width: 44ch;
  margin: 0 0 0.75rem;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-heading);
}
/* The trailing margin on the last line is real height in a scroll container -
   it is what made the stage report 8px of overflow on viewports that otherwise
   fit the copy exactly. */
.rfc-slot p:last-child { margin-bottom: 0; }
.rfc-slot__quiet { font-size: var(--text-sm); color: var(--color-muted); }

.rfc-panel__call {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.rfc-panel__call span {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.rfc-panel__call a {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 350;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  letter-spacing: -0.01em;
  color: var(--color-rose-deep);
  text-decoration: none;
}
@media (hover: hover) {
  .rfc-panel__call a:hover { text-decoration: underline; text-underline-offset: 4px; }
}

/* =================================================================
   FORM COLUMN: unwrap FormBuilder, then place every field by area.
   ================================================================= */

/* Mobile: the column IS the card. */
.rf-layout--consult .rf-form.rfc-form {
  max-width: none;
  margin: 0;
  padding: 0 clamp(1.25rem, 0.75rem + 2.5vw, 2rem) clamp(1.75rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--color-accent-glow) 9%, transparent) 0%, transparent 60%),
    var(--color-bg-elevated);
  box-shadow: var(--shadow-xl);
  position: static;
}

/* Lift the three FormBuilder wrappers out of the box tree so their children
   become grid items of .rfc-form. The !important overrides the style.css rule
   `.svc-form__body .InputfieldForm .Inputfields { display: grid !important }`. */
.rf-layout--consult .rfc-form .FormBuilder,
.rf-layout--consult .rfc-form .InputfieldForm,
.rf-layout--consult .rfc-form .InputfieldForm .Inputfields {
  display: contents !important;
}

.rf-layout--consult .rf-form.rfc-form {
  display: grid;
  /* containing block for the absolutely-positioned .rfc-eg example photos */
  position: relative;
  /* Belt-and-braces against the `.rf-grid >` pin above: `position: relative`
     here is load-bearing (it anchors .rfc-eg), so if that pin ever matches this
     column again an unreset `top` would silently offset the whole form. */
  top: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* THE GRID OWNS THE RHYTHM (2026-08-05). This was `row-gap: 0` plus a
     `.rf-layout--consult .rfc-form .Inputfield { margin-bottom }` rule - but
     that rule is (0,3,0) and style.css ships
     `.svc-form__body .InputfieldForm.FormBuilder .Inputfield { margin: 0 }` at
     (0,4,0), so it never won: every field, and every selfie tile row, computed
     to 0px of separation. Gap cannot be outspecified by FormBuilder's own CSS,
     so the rhythm lives here and each item's margin stays 0. */
  column-gap: clamp(0.9rem, 0.6rem + 1.2vw, 1.5rem);
  row-gap: clamp(1.15rem, 0.9rem + 1vw, 1.6rem);
  grid-template-areas:
    "lede    lede"
    "hyou    hyou"
    "fn      fn"
    "ln      ln"
    "em      em"
    "ph      ph"
    "status  status"
    "staff   staff"
    "hwhen   hwhen"
    "days    days"
    "times   times"
    "hphotos hphotos"
    "note    note"
    "tip1    tip1"
    "tip2    tip2"
    "tip3    tip3"
    "ttop    tleft"
    "tfront  tright"
    "tback   tface"
    "dnote   dnote"
    "tdes    tdes"
    "hclose  hclose"
    "msg     msg"
    "notice  notice"
    "turnstl turnstl"
    "submit  submit";
}

.rf-layout--consult .rfc-lede { grid-area: lede; }
.rf-layout--consult .rfc-head--you { grid-area: hyou; }
.rf-layout--consult .rfc-head--when { grid-area: hwhen; }
.rf-layout--consult .rfc-head--photos { grid-area: hphotos; }
.rf-layout--consult .rfc-note { grid-area: note; }
.rf-layout--consult .rfc-head--close { grid-area: hclose; }
.rf-layout--consult .rfc-tip--1 { grid-area: tip1; }
.rf-layout--consult .rfc-tip--2 { grid-area: tip2; }
.rf-layout--consult .rfc-tip--3 { grid-area: tip3; }
.rf-layout--consult .rfc-desired-note { grid-area: dnote; }

.rf-layout--consult .rfc-form .Inputfield_first_name { grid-area: fn; }
.rf-layout--consult .rfc-form .Inputfield_last_name { grid-area: ln; }
.rf-layout--consult .rfc-form .Inputfield_email_address { grid-area: em; }
.rf-layout--consult .rfc-form .Inputfield_phone_number { grid-area: ph; }
.rf-layout--consult .rfc-form .Inputfield_client_status { grid-area: status; }
.rf-layout--consult .rfc-form .Inputfield_regular_k_bella_staff { grid-area: staff; }
.rf-layout--consult .rfc-form .Inputfield_days_available { grid-area: days; }
.rf-layout--consult .rfc-form .Inputfield_times_available { grid-area: times; }
.rf-layout--consult .rfc-form .Inputfield_message { grid-area: msg; }
.rf-layout--consult .rfc-form .Inputfield_image_upload_notice { grid-area: notice; }
.rf-layout--consult .rfc-form .InputfieldSubmit { grid-area: submit; }

/* Turnstile. FormBuilder/hooks.php injects `<div class="FormBuilder-turnstile">`
   immediately before the submit row, but every OTHER item in this column is
   placed by name - so with no area of its own the widget was auto-placed into
   an implicit 18th row, i.e. BELOW the submit button and outside the section's
   reserved height, where it landed on top of the "What happens next" band.
   Naming its row puts it back above the submit, as the shared style.css block
   intends. `grid-area` also overrides the `grid-column: 1 / -1` that block sets
   for the flex/float layouts on other templates. The 73px min-height there
   still reserves the box before api.js paints, so this does not regress CLS.

   Environments with no TURNSTILE_SITE_KEY (local dev) emit no widget, so this
   row collapses to 0px but still consumes a gap either side - 51px above the
   submit instead of 26px. Harmless, and deliberately not worked around: every
   environment that actually serves the form has the key set, and a :has()
   fallback here would mean maintaining a fourth copy of the area map. */
.rf-layout--consult .rfc-form .FormBuilder-turnstile {
  grid-area: turnstl;
  margin-block: 0;
}

.rf-layout--consult .rfc-form .Inputfield_selfie_top,
.rf-layout--consult .rfc-eg--top { grid-area: ttop; }
.rf-layout--consult .rfc-form .Inputfield_selfie_left,
.rf-layout--consult .rfc-eg--left { grid-area: tleft; }
.rf-layout--consult .rfc-form .Inputfield_selfie_front,
.rf-layout--consult .rfc-eg--front { grid-area: tfront; }
.rf-layout--consult .rfc-form .Inputfield_selfie_right,
.rf-layout--consult .rfc-eg--right { grid-area: tright; }
.rf-layout--consult .rfc-form .Inputfield_selfie_back,
.rf-layout--consult .rfc-eg--back { grid-area: tback; }
.rf-layout--consult .rfc-form .Inputfield_selfie_face,
.rf-layout--consult .rfc-eg--face { grid-area: tface; }
.rf-layout--consult .rfc-form .Inputfield_desired_look,
.rf-layout--consult .rfc-eg--desired { grid-area: tdes; }

/* Honeypots stay in the DOM and in tab order - display:none lets bots skip them
   and the trap stops working. Offscreen, and out of grid flow. */
.rf-layout--consult .rfc-form .Inputfield_comments,
.rf-layout--consult .rfc-form .Inputfield_website {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.rf-layout--consult .rfc-form .Inputfield_cf-turnstile-response { display: none !important; }

/* Neutralise the inline width:50% FormBuilder puts on ColumnWidth wrappers. */
.rf-layout--consult .rfc-form .Inputfield[class*="InputfieldColumnWidth"] { width: 100% !important; }

/* The grid gap owns all separation now, so every item sits flush in its area.
   Stated at (0,4,0) so it ties style.css's `.svc-form__body .InputfieldForm
   .Inputfield { margin: 0 }` rather than losing to it - the two agree, and a
   tie that agrees is stable regardless of which stylesheet loads last
   (FormBuilder.css is injected inline by $form->styles, after this file). */
.rf-layout--consult .rfc-form .InputfieldForm .Inputfield { margin: 0; }

/* ---------- typography inside the column ---------- */
.rf-layout--consult .rfc-lede {
  max-width: none;
  margin: clamp(1.5rem, 1rem + 2vw, 2rem) 0 0;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-muted);
  text-wrap: pretty;
}
/* Section rule. The row gap already puts ~24px between the last field and the
   hairline; margin-top adds the extra top bias so the rule reads as belonging
   to the section it OPENS, and padding-top carries the air below it. Heading to
   its own first field is then just the row gap - close enough to bind them. */
.rf-layout--consult .rfc-head {
  margin: clamp(0.75rem, 0.5rem + 1vw, 1.25rem) 0 0;
  padding-top: clamp(1.5rem, 1rem + 2vw, 2rem);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 340;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--color-heading);
  text-wrap: balance;
}
/* First section: no rule. It still needs a lead-in here, though, because below
   64rem the lede paragraph sits directly above it inside the same card. The
   zero-margin case is the >=64rem one, where the lede is gone and this heading
   becomes grid row 1 - see that block. */
.rf-layout--consult .rfc-head--you {
  margin-top: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  padding-top: 0;
  border-top: 0;
}
.rf-layout--consult .rfc-note {
  max-width: 54ch;
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-muted);
}
.rf-layout--consult .rfc-tip {
  margin: 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-muted);
}
.rf-layout--consult .rfc-tip strong {
  display: block;
  margin-bottom: 0.1rem;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--color-heading);
}
.rf-layout--consult .rfc-desired-note {
  align-self: center;
  margin-bottom: 0;
}
.rf-layout--consult .rfc-desired-note h3 {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  text-wrap: balance;
}
.rf-layout--consult .rfc-desired-note p {
  max-width: 46ch;
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-muted);
}

/* =================================================================
   CONSULT: controls - chips, segmented status, tiles, notice, submit
   ================================================================= */

/* ---------- labels ---------- */
.rf-layout--consult .rfc-form .InputfieldHeader {
  display: block;
  margin-bottom: 0.3rem;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: var(--weight-regular);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ---------- checkbox groups become pills (days / times) ---------- */
/* DOMINANT MOMENT: availability as a single tight run of pills instead of 12 bordered boxes - .rfc-form .InputfieldCheckboxes */
.rf-layout--consult .rfc-form .InputfieldCheckboxes .InputfieldCheckboxesColumns {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rf-layout--consult .rfc-form .InputfieldCheckboxes .form-check {
  width: auto !important;
  margin: 0;
  padding: 0;
}
.rf-layout--consult .rfc-form .InputfieldCheckboxes .form-check::before { content: none; }
.rf-layout--consult .rfc-form .InputfieldCheckboxes .form-check-label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0 1.05rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-body);
  cursor: pointer;
}
.rf-layout--consult .rfc-form .InputfieldCheckboxes .form-check-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.rf-layout--consult .rfc-form .InputfieldCheckboxes .form-check-label:has(.form-check-input:checked) {
  background: var(--color-heading);
  border-color: var(--color-heading);
  color: var(--color-bg);
}
.rf-layout--consult .rfc-form .InputfieldCheckboxes .form-check-label:has(.form-check-input:focus-visible) {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
@media (hover: hover) {
  .rf-layout--consult .rfc-form .InputfieldCheckboxes .form-check-label:hover {
    border-color: var(--color-border-hover);
    transform: translateY(-1px);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .rf-layout--consult .rfc-form .InputfieldCheckboxes .form-check-label {
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease;
  }
}

/* Client Status is the one binary choice on the page - a segmented track reads
   as "pick one" where loose pills read as "pick any". */
.rf-layout--consult .rfc-form .Inputfield_client_status .InputfieldCheckboxesColumns {
  display: inline-flex !important;
  gap: 0;
  padding: 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg);
}
.rf-layout--consult .rfc-form .Inputfield_client_status .form-check-label {
  min-height: 40px;
  border: 0;
  background: transparent;
  color: var(--color-muted);
}
@media (hover: hover) {
  .rf-layout--consult .rfc-form .Inputfield_client_status .form-check-label:hover { transform: none; }
}

/* ---------- selfie tiles: the example photo IS the control ---------- */
/* The TILE owns the aspect ratio, not the image. Both sit in the same grid
   area, so letting the image size itself left the row taller than the field and
   the photo spilled past its own label. */
/* Absolutely positioned, but still assigned a grid-area: the grid container is
   its containing block, so it fills that area exactly while contributing
   NOTHING to row sizing. As a normal grid item its intrinsic 3:4 forced the row
   taller than the tile's 8/9 and the baked-in caption crept back into view. */
.rf-layout--consult .rfc-eg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* top anchoring crops the teal caption baked into the bottom of the example
     JPGs - the tile carries its own label and two labels fought. */
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-image);
  filter: grayscale(1) contrast(0.92);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}

.rf-layout--consult .rfc-form .Inputfield_selfie_top,
.rf-layout--consult .rfc-form .Inputfield_selfie_left,
.rf-layout--consult .rfc-form .Inputfield_selfie_front,
.rf-layout--consult .rfc-form .Inputfield_selfie_right,
.rf-layout--consult .rfc-form .Inputfield_selfie_back,
.rf-layout--consult .rfc-form .Inputfield_selfie_face,
.rf-layout--consult .rfc-form .Inputfield_desired_look {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 8 / 9;
  align-self: stretch;
  margin: 0;
  padding: 0.7rem;
  border-radius: var(--radius-image);
  overflow: hidden;
  isolation: isolate;
}

/* Scrim so the label stays legible over the photo, in both themes. */
.rf-layout--consult .rfc-form .Inputfield_selfie_top::before,
.rf-layout--consult .rfc-form .Inputfield_selfie_left::before,
.rf-layout--consult .rfc-form .Inputfield_selfie_front::before,
.rf-layout--consult .rfc-form .Inputfield_selfie_right::before,
.rf-layout--consult .rfc-form .Inputfield_selfie_back::before,
.rf-layout--consult .rfc-form .Inputfield_selfie_face::before,
.rf-layout--consult .rfc-form .Inputfield_desired_look::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-image);
  background: linear-gradient(to top, color-mix(in srgb, var(--color-bg) 90%, transparent) 0%, transparent 58%);
  pointer-events: none;
  z-index: -1;
}

/* The field label becomes the tile label. */
.rf-layout--consult .rfc-form .InputfieldFormBuilderFile > .InputfieldHeader {
  order: 2;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-heading);
}
.rf-layout--consult .rfc-form .InputfieldFormBuilderFile > .InputfieldContent {
  order: 3;
  margin: 0;
  padding: 0;
}

/* main.js builds .kb-upload inside each file field (Phase G). Inside a tile it
   collapses to a single cue line - the tile itself is the drop target. */
.rf-layout--consult .rfc-form .kb-upload__zone {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.rf-layout--consult .rfc-form .kb-upload__glyph,
.rf-layout--consult .rfc-form .kb-upload__hint,
.rf-layout--consult .rfc-form .kb-upload__btn,
.rf-layout--consult .rfc-form .kb-upload__size { display: none; }
.rf-layout--consult .rfc-form .kb-upload__prompt {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-rose-deep);
}
.rf-layout--consult .rfc-form .kb-upload__prompt em { display: none; }
.rf-layout--consult .rfc-form .kb-upload__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.rf-layout--consult .rfc-form .kb-upload.is-dragging { outline: 2px dashed var(--color-rose-deep); outline-offset: -4px; }

/* Filled: the client photo replaces the example entirely. */
.rf-layout--consult .rfc-form .kb-upload__preview { margin: 0; }
/* The base .kb-upload__thumb is an explicit 3rem square, and an explicit
   width/height beats `inset: 0` on an absolutely positioned box - so the
   client photo has to be sized to the tile, not just stretched to it. */
.rf-layout--consult .rfc-form .kb-upload__thumb--img {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-image);
  background: none;
}
.rf-layout--consult .rfc-form .kb-upload__thumb--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-image);
}
/* Filled preview fills the tile behind the label and the corner control. Base
   .kb-upload__preview is a flex ROW (thumb + meta + remove), which is what made
   Remove a full-width bar with its text shoved to the right; here it is just a
   positioning context that fills the tile. */
.rf-layout--consult .rfc-form .kb-upload__preview {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  background: none;
}
/* The metadata line (truncated filename + file size) says nothing the client
   needs and it was covering the angle label - drop it. The label ("Front") is
   the tile's identity and stays bottom-left, same as an empty tile. */
.rf-layout--consult .rfc-form .kb-upload__meta { display: none; }

/* Remove: a compact pill in the top-right corner. The X reads as "remove" on
   its own; the word stays for salon clients who should not have to decode an
   icon. Frosted dark chip so it holds over any photo, in both themes. */
.rf-layout--consult .rfc-form .kb-upload__remove {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0.34rem 0.66rem 0.34rem 0.52rem;
  border: 0;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-heading) 82%, transparent);
  color: var(--color-bg);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
}
@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
  .rf-layout--consult .rfc-form .kb-upload__remove {
    background: color-mix(in srgb, var(--color-heading) 52%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}
.rf-layout--consult .rfc-form .kb-upload__remove svg {
  width: 0.8rem;
  height: 0.8rem;
  flex: none;
}
@media (hover: hover) {
  .rf-layout--consult .rfc-form .kb-upload__remove:hover {
    background: color-mix(in srgb, var(--color-rose-deep) 90%, transparent);
    color: #fff;
    transform: translateY(-1px);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .rf-layout--consult .rfc-form .kb-upload__remove {
    transition: background 200ms ease, color 200ms ease, transform 200ms ease;
  }
}
.rf-layout--consult .rfc-form .Inputfield:has(.kb-upload.is-filled) { border-color: var(--color-rose-deep); }
/* Scoped from the GRID, not with a sibling combinator. `display: contents`
   changes layout only - in the real DOM the fields stay inside .Inputfields
   while .rfc-eg is a child of .rfc-form, so they are never siblings and a `~`
   selector silently never matched. :has() on the common ancestor is the only
   relationship that actually exists here. */
.rf-layout--consult .rfc-form:has(.Inputfield_selfie_top .kb-upload.is-filled) .rfc-eg--top,
.rf-layout--consult .rfc-form:has(.Inputfield_selfie_left .kb-upload.is-filled) .rfc-eg--left,
.rf-layout--consult .rfc-form:has(.Inputfield_selfie_front .kb-upload.is-filled) .rfc-eg--front,
.rf-layout--consult .rfc-form:has(.Inputfield_selfie_right .kb-upload.is-filled) .rfc-eg--right,
.rf-layout--consult .rfc-form:has(.Inputfield_selfie_back .kb-upload.is-filled) .rfc-eg--back,
.rf-layout--consult .rfc-form:has(.Inputfield_selfie_face .kb-upload.is-filled) .rfc-eg--face,
.rf-layout--consult .rfc-form:has(.Inputfield_desired_look .kb-upload.is-filled) .rfc-eg--desired {
  opacity: 0;
}

@media (hover: hover) {
  .rf-layout--consult .rfc-form:has(.Inputfield_selfie_top:hover) .rfc-eg--top,
  .rf-layout--consult .rfc-form:has(.Inputfield_selfie_left:hover) .rfc-eg--left,
  .rf-layout--consult .rfc-form:has(.Inputfield_selfie_front:hover) .rfc-eg--front,
  .rf-layout--consult .rfc-form:has(.Inputfield_selfie_right:hover) .rfc-eg--right,
  .rf-layout--consult .rfc-form:has(.Inputfield_selfie_back:hover) .rfc-eg--back,
  .rf-layout--consult .rfc-form:has(.Inputfield_selfie_face:hover) .rfc-eg--face,
  .rf-layout--consult .rfc-form:has(.Inputfield_desired_look:hover) .rfc-eg--desired {
    opacity: 0.8;
    filter: grayscale(0.35) contrast(1);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .rf-layout--consult .rfc-eg { transition: opacity 320ms ease, filter 320ms ease; }
}
.rf-layout--consult .rfc-form .Inputfield:has(.kb-upload__input:focus-visible) {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ---------- processing notice ---------- */
.rf-layout--consult .rfc-form .Inputfield_image_upload_notice > .InputfieldHeader { display: none; }
.rf-layout--consult .rfc-form .Inputfield_image_upload_notice .alert {
  margin: 0;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.65;
}
.rf-layout--consult .rfc-form .Inputfield_image_upload_notice .alert strong { color: var(--color-heading); }
/* Bootstrap ships a Font Awesome glyph here; the site is Phosphor-only, and FA
   is not loaded, so the <i> renders as dead space. */
.rf-layout--consult .rfc-form .Inputfield_image_upload_notice .alert i { display: none; }

/* ---------- submit ---------- */
.rf-layout--consult .rfc-form .InputfieldSubmit { margin-top: clamp(1.25rem, 1rem + 1.5vw, 1.75rem); }
.rf-layout--consult .rfc-form .InputfieldSubmit > .InputfieldHeader { display: none; }
.rf-layout--consult .rfc-form .InputfieldSubmit button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 2rem;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
@media (hover: hover) {
  .rf-layout--consult .rfc-form .InputfieldSubmit button[type="submit"]:hover {
    background: var(--color-cta-bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .rf-layout--consult .rfc-form .InputfieldSubmit button[type="submit"] {
    transition: background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
  }
}

/* =================================================================
   CONSULT: >=48rem - contact pairs up and the tiles become the head.
   Six columns so a 2-up row (spans of 3) and the 3-up compass (spans
   of 2) can share one grid.
   ================================================================= */
@media (min-width: 48rem) {
  .rf-layout--consult .rf-form.rfc-form {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "lede    lede    lede    lede    lede    lede"
      "hyou    hyou    hyou    hyou    hyou    hyou"
      "fn      fn      fn      ln      ln      ln"
      "em      em      em      ph      ph      ph"
      "status  status  status  staff   staff   staff"
      "hwhen   hwhen   hwhen   hwhen   hwhen   hwhen"
      "days    days    days    days    days    days"
      "times   times   times   times   times   times"
      "hphotos hphotos hphotos hphotos hphotos hphotos"
      "note    note    note    note    note    note"
      "tip1    tip1    ttop    ttop    tip2    tip2"
      "tleft   tleft   tfront  tfront  tright  tright"
      "tip3    tip3    tback   tback   tface   tface"
      "dnote   dnote   dnote   dnote   tdes    tdes"
      "hclose  hclose  hclose  hclose  hclose  hclose"
      "msg     msg     msg     msg     msg     msg"
      "notice  notice  notice  notice  notice  notice"
      "turnstl turnstl turnstl turnstl turnstl turnstl"
      "submit  submit  submit  submit  submit  submit";
    align-items: center;
  }
  /* only the tile rows want centring; everything else starts at the top */
  .rf-layout--consult .rfc-form > *:not(.rfc-tip):not(.rfc-desired-note) { align-self: stretch; }
  .rf-layout--consult .rfc-tip {
    margin: 0;
    padding: 0;
    border-top: 0;
    align-self: center;
  }
  .rf-layout--consult .rfc-tip--1,
  .rf-layout--consult .rfc-tip--3 { text-align: right; }
}

/* =================================================================
   CONSULT: >=64rem - the panel carries the lede, so the column drops
   its card chrome and the lede row with it.
   ================================================================= */
@media (min-width: 64rem) {
  .rf-layout--consult .rf-form.rfc-form {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    grid-template-areas:
      "hyou    hyou    hyou    hyou    hyou    hyou"
      "fn      fn      fn      ln      ln      ln"
      "em      em      em      ph      ph      ph"
      "status  status  status  staff   staff   staff"
      "hwhen   hwhen   hwhen   hwhen   hwhen   hwhen"
      "days    days    days    days    days    days"
      "times   times   times   times   times   times"
      "hphotos hphotos hphotos hphotos hphotos hphotos"
      "note    note    note    note    note    note"
      "tip1    tip1    ttop    ttop    tip2    tip2"
      "tleft   tleft   tfront  tfront  tright  tright"
      "tip3    tip3    tback   tback   tface   tface"
      "dnote   dnote   dnote   dnote   tdes    tdes"
      "hclose  hclose  hclose  hclose  hclose  hclose"
      "msg     msg     msg     msg     msg     msg"
      "notice  notice  notice  notice  notice  notice"
      "turnstl turnstl turnstl turnstl turnstl turnstl"
      "submit  submit  submit  submit  submit  submit";
  }
  /* The lede moves into the panel here, so "About you" becomes grid row 1 and a
     zero top margin is what levels the form column with the top edge of the
     panel card beside it. */
  .rf-layout--consult .rfc-lede { display: none; }
  .rf-layout--consult .rfc-head--you { margin-top: 0; }
  .rf-layout--consult .rfc-tip { font-size: var(--text-xs); }
  .rf-layout--consult .rfc-tip strong { font-size: var(--text-sm); }
}

/* =================================================================
   CONSULT: closing band
   ================================================================= */
.rfc-after {
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  padding-bottom: var(--space-section);
}
.rfc-after__title {
  margin: 0 0 1.25rem;
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 340;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--color-heading);
  text-wrap: balance;
}
.rfc-after__steps {
  display: grid;
  gap: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rfc-after__steps li {
  padding: 1.1rem 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-muted);
}
.rfc-after__steps li::before { content: none; }
.rfc-after__steps span {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 340;
  font-size: 1.35rem;
  line-height: 1;
  color: color-mix(in srgb, var(--color-rose-deep) 45%, transparent);
}
.rfc-after__steps strong {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--color-heading);
}
@media (min-width: 48rem) {
  .rfc-after__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
  }
}

/* A conditional field toggled by main.js. `hidden` alone loses to the
   .svc-form__body `.Inputfield { display: flex }` rule, so it is restated here.
   Also keeps the grid from reserving the row while the field is hidden. */
.rf-layout--consult .rfc-form .Inputfield[hidden] { display: none !important; }

/* The shared Bootstrap-gutter repair above is `padding-left: 0 !important` on
   every .Inputfield, which also flattened the tile inset and left the label
   sitting hard against the photo edge. Restore it for the upload tiles only. */
.rf-layout--consult .rfc-form .InputfieldFormBuilderFile { padding-left: 0.7rem !important; }

/* Phase G forces the real file input to true sr-only (1px) so it cannot shadow
   the zone or the Remove button, and main.js binds the click on .kb-upload__zone
   instead. Inside a tile the zone collapses to just its cue line, which would
   leave most of the photo dead to the touch - so stretch an invisible hit area
   over the whole tile from INSIDE the zone, where that click handler will see it. */
/* .kb-upload is position:relative by default and only as tall as its cue line,
   so it captured the containing block for BOTH the stretched hit area and the
   filled thumbnail - each sized to a 60px box inside a 221px tile. Making it
   static hands the containing block back to the tile. */
.rf-layout--consult .rfc-form .kb-upload,
.rf-layout--consult .rfc-form .kb-upload__zone { position: static; }
.rf-layout--consult .rfc-form .kb-upload__zone::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}
/* The filled-state Remove pill (positioned top-right, z-index 3) is defined in
   the "Filled" block above; it already sits above this hit area. */