/* ==========================================================================
   Layout — containers, section rhythm, the facet system, reveals.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--read { max-width: var(--container-read); }
.container--flush { padding-inline: 0; }

.section {
  padding-block: var(--section-y);
  position: relative;
}
.section--tight { padding-block: var(--section-y-tight); }

/* --- Rhythm ---------------------------------------------------------------
 * Every section previously carried identical padding, so the page measured as
 * ten equal blocks separated by exactly 269px each — a flat list of peers with
 * no section outranking any other.
 *
 * Rhythm here follows meaning rather than a decorative alternation: two
 * consecutive sections on the same ground are one movement and close up, while
 * a change of ground is a change of subject and gets the full interval. The
 * result is grouping the reader can feel without being told.
 * -------------------------------------------------------------------------- */

.section:not(.section--light) + .section:not(.section--light) {
  padding-block-start: var(--section-y-tight);
}
.section--light + .section--light {
  padding-block-start: var(--section-y-tight);
}

/* A ground change is a seam; give the incoming section a little more room so
   the switch reads as deliberate. */
.section--light + .section:not(.section--light),
.section:not(.section--light) + .section--light {
  padding-block-start: calc(var(--section-y) * 1.15);
}
.section--flush-top { padding-block-start: 0; }
.section--flush-bottom { padding-block-end: 0; }

/* Ground switches. The full token set for each ground lives in tokens.css, so the two
   cannot drift apart and a section's ground is authoritative over the page's. This only
   paints the surface. */
.section--navy   { background: var(--bg-raised); }
.section--deep   { background: var(--bg); }
.section--light  { background: var(--bg-page); }

/* --- The gold leaf rule ---------------------------------------------------
 * A separator whose gradient brightens toward one end, the way leaf catches
 * light across it. This is the section grammar — there are no uppercase
 * tracked eyebrows anywhere on this site.                                   */

.leaf-rule {
  height: 1px;
  border: 0;
  background: var(--leaf);
}

/*
 * The leaf rule becomes GRAMMAR, on the surface where it has a job.
 *
 * DESIGN.md names it motif #2 of four and specifies it as what replaces a tracked uppercase
 * eyebrow above a section heading. It was appearing in two sections out of fourteen, which
 * makes it an occasional flourish rather than a system — and a motif the documentation
 * claims and the site does not use is the same class of untruth as a CSS rule that matches
 * nothing.
 *
 * Light sections only, and that is the reason rather than a hedge. A navy section already
 * announces itself by changing the ground; adding a gold hairline there would be marking a
 * seam that is already marked. On the reading surface the heading has nothing but space
 * above it, and this is the one gold gesture that is legal at that scale — on near-white
 * gold cannot be ink, but it can be a lit edge.
 *
 * Drawn as a pseudo-element so ten templates do not each have to remember it.
 */
.section--light .section-head > h2::after,
.t-light .section-head > h2::after {
  content: "";
  display: block;
  width: min(9rem, 40%);
  height: 1px;
  margin-block-start: var(--s-sm);
  background: var(--leaf);
}

/* A section that already prints a real <hr class="leaf-rule"> must not get a second one. */
.section-head:has(> .leaf-rule) > h2::after { content: none; }
.leaf-rule--short { width: min(9rem, 40%); }
.leaf-rule--vertical {
  width: 1px;
  height: auto;
  align-self: stretch;
  background: linear-gradient(180deg,
    transparent, var(--gold) 40%, var(--gold-bright) 55%, transparent);
}

/* --- Section heading block ------------------------------------------------ */

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  max-width: 52ch;
}
.section-head--center { margin-inline: auto; text-align: center; align-items: center; }
.section-head--wide { max-width: 64ch; }

/* Six sections all opening with the same left-aligned 52ch heading made them
   read as interchangeable, and on a wide screen it left the right half of every
   one of them empty. The split variant puts the heading against the supporting
   copy and an action, so the width carries something. */
.section-head--split {
  max-width: none;
  display: grid;
  gap: var(--s-md);
}
@media (min-width: 68rem) {
  /* Proportional, not a ch cap. A 24ch column broke "What actually happens on
     your first visit." across six lines — a display face at 48px needs width,
     and a six-line heading is a wall, not a hierarchy. */
  .section-head--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--s-xl) var(--s-2xl);
    align-items: end;
  }
  .section-head--split > h2 { margin: 0; max-width: 16ch; }
}
@media (min-width: 100rem) {
  .section-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.section-head__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-md);
  max-width: 48ch;
}
.section-head__aside p {
  font-size: var(--t-lead);
  color: var(--ink-soft);
  line-height: 1.55;
}

.section-head p {
  font-size: var(--t-lead);
  color: var(--ink-soft);
  line-height: 1.55;
}

/* --- Grids ---------------------------------------------------------------- */

.grid { display: grid; gap: var(--s-lg); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }

/* Editorial split: type on one side, image on the other, deliberately uneven. */
.split {
  display: grid;
  gap: clamp(var(--s-lg), 4vw, var(--s-2xl));
  align-items: center;
}
@media (min-width: 56rem) {
  .split { grid-template-columns: 1fr 1.15fr; }
  .split--type-heavy { grid-template-columns: 1.2fr 1fr; }
  .split--reverse > :first-child { order: 2; }
}

.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-block-start: var(--flow, var(--s-md)); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
  align-items: center;
}

/* --- The facet: every photograph on the site is cut like a stone ---------- */

/*
 * `.facet` is a CONTAINER, never the <img> itself.
 *
 * For most of this build the facet classes were put directly on the <img>. The clip-path
 * worked, so it looked correct — but `<img>` is a replaced element and generates no
 * pseudo-elements, which meant `.facet-frame::after` (the gold edge-light, the brand's
 * signature material detail) had never once painted, and `.facet > img` below matched zero
 * elements. All image output now goes through da_facet_image(), which emits the wrapper.
 */
.facet {
  position: relative;
  overflow: clip;
  clip-path: var(--facet);
  background: var(--bg-raised-2);
  display: block;
}
.facet--flip  { clip-path: var(--facet-flip); }
.facet--crown { clip-path: var(--facet-crown); }
.facet--soft  { clip-path: var(--facet-soft); }

.facet > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ratio holders so images never cause layout shift. */
.ratio-portrait  { aspect-ratio: 4 / 5; }
.ratio-tall      { aspect-ratio: 3 / 4.4; }
.ratio-landscape { aspect-ratio: 3 / 2; }
.ratio-wide      { aspect-ratio: 16 / 9; }
.ratio-square    { aspect-ratio: 1; }

/* A hairline of gold along the cut edge — the leaf catching the facet.
   Sits above the image, below any content. */
.facet-frame { position: relative; }
.facet-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inherit;
  pointer-events: none;
  background: linear-gradient(140deg,
    color-mix(in oklch, var(--gold-bright) 55%, transparent) 0%,
    transparent 18%, transparent 82%,
    color-mix(in oklch, var(--gold) 40%, transparent) 100%);
  mix-blend-mode: screen;
  opacity: 0.75;
}

/* --- Reveals --------------------------------------------------------------
 * Content is visible by default and the reveal is an enhancement. A class is
 * only added once JS confirms it can animate, so a headless renderer, a
 * background tab, or a JS failure all ship the finished state rather than a
 * blank section.                                                            */

/*
 * There is deliberately NO rule here that hides [data-reveal].
 *
 * Three separate times in this build a CSS rule that set opacity:0 on reveal
 * targets shipped whole sections as blank rectangles with their markup intact —
 * the doctors, first-visit and testimonials bands, then the payment cards, then
 * the financing steps. Each time the page linted clean, returned 200, and
 * looked finished in the HTML. Only a screenshot caught it.
 *
 * The fix is structural: nothing in the stylesheet can hide content. reveal.js
 * sets opacity inline, only on elements that are genuinely below the fold when
 * it runs, and clears it on intersection or after a failsafe timeout. If the
 * script never runs, never fires, or throws, the page is simply fully visible.
 *
 * The scroll-driven transform in motion.css is a separate concern and animates
 * transform only, so it can never hide anything either.
 */
[data-reveal] {
  transition: opacity var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transition: none; }
}

/* --- Page shell ----------------------------------------------------------- */

.site {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
.site-main { flex: 1; }

/* The mobile action bar is fixed; the page reserves its height rather than
   letting it cover the last section. */
@media (max-width: 47.99rem) {
  .site { padding-block-end: var(--actionbar-h); }
}