/* home.css - the home page only.

   Linked from App.razor with every other page sheet (REDESIGN-PLAN 1.6),
   after 05-theme and 06-motion, so a rule here wins on order. Only what no
   other page composes: the hero bleed grid, the wall's overlap, the serving
   band, the reviews block and the FAQ split. Everything shared is in 05.
   Tokens only, no images, no motion (06). Budget 4,000 bytes brotli. */

/* HERO. Copy first in the DOM at every width. Under 860px one column in the
   container; from 860px a four-column grid whose outer tracks are the page
   margins, so the arch takes the photo column AND the right margin and
   bleeds to the edge without 100vw arithmetic. The chip hangs 2rem under
   the photo from 860px and 05 reserves that room under the arch. */

.home-hero {
    padding-block: var(--space-6) var(--space-8);
}

.home-hero__inner {
    width: var(--container);
    margin-inline: auto;
    display: grid;
    gap: var(--space-6);
}

.home-hero__copy > * + * {
    margin-top: var(--space-4);
}

.home-hero h1 {
    font-size: var(--fs-display);
}

/* The display line: the one sentence for somebody who has not decided. */
.home-hero__line {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    line-height: var(--lh-heading);
    color: var(--ink-strong);
    max-width: var(--measure-lead);
}

/* One primary action, the number beside it as text (DESIGN.md law 2, 3). */
.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.home-hero__phone {
    display: inline-block;
    padding-block: var(--space-3);
    font-weight: 600;
    color: var(--teal-text);
}

.home-hero .proof-row {
    margin-top: var(--space-6);
}

@media (max-width: 859.98px) {
    .home-hero .bloom {
        display: none;
    }
}

@media (min-width: 860px) {
    .home-hero {
        padding-block: var(--space-9);
    }

    .home-hero__inner {
        width: auto;
        grid-template-columns: minmax(1.25rem, 1fr) minmax(0, 630px) minmax(0, 570px) minmax(1.25rem, 1fr);
        column-gap: var(--space-7);
        align-items: center;
    }

    .home-hero__copy {
        grid-column: 2;
    }

    .home-hero__figure {
        grid-column: 3 / 5;
    }
}

/* INSURERS. The wrapper paints the sage ground and holds the petal (a bloom
   shows only through the ground of its own parent), so the strip goes
   transparent and keeps the tight padding of a strip, not a chapter. */

.home-insurers {
    background-color: var(--bg-sage);
}

.home-insurers .insurer-strip {
    background-color: transparent;
    padding-block: var(--space-7);
}

@media (min-width: 860px) {
    .home-insurers .insurer-strip {
        padding-block: var(--space-8);
    }
}

/* THE WALL. The band is 2:1 from 860px (04 says 24:9 sitewide) and keeps
   its 118% draw so the half-cut sign stays out of frame. The deep block
   rides 120px up into the photo's bottom-right corner, 32px full width on
   a phone; the copy sits in the right column on solid deep, and the
   scatter in the empty left column, off where the column would be under
   text. The h2 is the one heading louder than the page title. */

.statement {
    position: relative;
}

.statement::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -32px;
    height: 32px;
    background-color: var(--bg-deep);
}

.statement h2 {
    font-size: var(--fs-h1);
    margin-top: var(--space-3);
}

.statement p {
    margin-top: var(--space-4);
    max-width: var(--measure-lead);
}

.statement .bloom {
    display: none;
    left: 3%;
    bottom: 6%;
    width: min(38vw, 30rem);
}

/* Under 860px the 32px lip plus a full section's padding put about 130px of
   deep between the photograph and the eyebrow; 16px of padding makes it 48,
   once the eyebrow, a p, stops taking the paragraph margin below. */
@media (max-width: 859.98px) {
    .statement {
        padding-top: var(--space-4);
    }

    .statement .eyebrow {
        margin-top: 0;
    }
}

@media (min-width: 860px) {
    .wall .photo-band img {
        aspect-ratio: 2 / 1;
    }

    .statement::before {
        left: auto;
        top: -120px;
        width: 56%;
        height: 120px;
    }

    .statement__inner {
        display: grid;
        grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
        column-gap: var(--space-7);
    }

    .statement__copy {
        grid-column: 2;
    }

    .statement .bloom {
        display: block;
    }
}

/* THE PRACTICE. The entrance frame never wider than 720px (the sign's text
   must stay unreadable), cropped to keep the paper flower and the sign; a
   20px petal seated on the top of the pull quote's rule. */

.home-practice .media__figure {
    max-width: 720px;
}

.home-practice .arch img {
    object-position: 45% 50%;
}

.home-practice .pull-quote {
    position: relative;
}

.home-practice .pull-quote::before {
    content: "";
    position: absolute;
    left: -12px;
    top: -12px;
    width: 20px;
    height: 20px;
    border-radius: 100% 0;
    transform: rotate(45deg);
    background-color: var(--sage);
}

/* THE ROOMS. Each tile is a link and 06 scales its picture 2% on hover, so
   the picture box clips at the card radius. The therapy room neither
   scales nor centers: 60% keeps the teepee and leaves the shelf. */

.editorial-grid picture {
    overflow: clip;
    border-radius: var(--radius-card);
}

.editorial-grid img.photo--no-scale {
    object-position: 60% 50%;
}

/* On a phone the private office is one column at 3:2, which shows the wall
   art at the left edge; 4:3 anchored right keeps it out of the box. */
@media (max-width: 859.98px) {
    .editorial-grid img.photo--crop-left {
        aspect-ratio: 4 / 3;
        object-position: 100% 50%;
    }
}

/* SERVING. Copy on the left, the facts column on the right from 860px, the
   closing line under both. Two hour lines, not a table. */

.serving h2 {
    margin-bottom: var(--space-4);
}

.serving__side {
    margin-top: var(--space-6);
}

.serving__hours {
    display: block;
}

.serving__facts + p {
    margin-top: var(--space-4);
}

.serving__closing {
    margin-top: var(--space-6);
}

@media (min-width: 860px) {
    .serving {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        column-gap: var(--space-7);
        align-items: start;
    }

    .serving__side {
        margin-top: 0;
    }

    .serving__side > :first-child {
        margin-top: 0;
    }

    .serving__closing {
        grid-column: 1 / -1;
    }
}

/* HOW IT WORKS. Three notes pinned to a board.

   The owner sent 21st.dev's pinned-cards component as the shape he wanted
   (2026-09-20) and it earns its place: there is a cork board of cards and
   notices on the waiting-room wall, in our own photograph of it. The idea was
   copied and none of the code was.

   Each note is the card component, tilted about a degree, with a pin at its
   top edge and a dashed line behind the three at pin height. The tilt sits on
   the note and not the li: the li is the reveal target and a transform there
   is overwritten for the length of the reveal. Straightening on hover or
   focus is the interaction; reduced motion drops both the tilt and the
   straightening. Per step, three custom properties carry the difference: the
   petal colors off the logo, in the order the mark has them. */

.notes {
    list-style: none;
    counter-reset: step;
    display: grid;
    gap: var(--space-6) var(--gutter);
    grid-template-columns: minmax(0, 1fr);
    position: relative;
    isolation: isolate;
}

.notes li {
    counter-increment: step;
    max-width: none;
    padding-top: var(--space-3);
    --pin: var(--sage);
    --numeral: var(--sage-text);
    --tilt: -1.6deg;
}

.notes li:nth-child(2) {
    --pin: var(--teal);
    --numeral: var(--teal-text);
    --tilt: 1.3deg;
}

.notes li:nth-child(3) {
    --pin: var(--violet);
    --numeral: var(--violet);
    --tilt: -0.9deg;
}

.note {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    transform: rotate(var(--tilt));
}

/* The card's own lift, with the note straightened as it comes up. */
.note:hover,
.note:focus-within {
    transform: translateY(-2px);
}

/* The pin: a tack head pressed through the paper's top edge, with the halo a
   tack pushed into a board has around it. No stem: a stem drawn above the
   edge made a balloon on a string of it, which is what the first pass looked
   like on screen. */
.note__pin {
    position: absolute;
    top: -8px;
    left: 50%;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    border-radius: 50%;
    background-color: var(--pin);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pin) 16%, transparent);
}

/* The numeral is decoration and says so in the markup: the order is the ol's. */
.note__n {
    font-family: var(--font-display);
    font-size: 2.25rem;
    line-height: 1;
    margin-bottom: var(--space-3);
    color: var(--numeral);
}

.note__n::before {
    content: counter(step, decimal-leading-zero);
}

.note__icon {
    color: var(--teal);
    margin-right: var(--space-2);
    vertical-align: -0.15em;
}

/* The three actions land on one line across the row whatever the notes above
   them do, so they read as the three ways in that they are. */
.note .card__foot {
    margin-top: auto;
    padding-top: var(--space-4);
}

@media (min-width: 860px) {
    .notes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* The line the notes hang on, behind the paper: what shows of it is the
       two runs between them. */
    .notes::before {
        content: "";
        position: absolute;
        z-index: -1;
        left: 14%;
        right: 14%;
        top: var(--space-3);
        border-top: 2px dashed var(--rule-strong);
        transform-origin: left;
    }
}

/* Straight paper for anyone who asked for less, and on the printed page. */
@media (prefers-reduced-motion: reduce), print {
    .note {
        transform: none !important;
    }
}

.steps-note {
    margin-top: var(--space-6);
    color: var(--ink-muted);
}

/* THE QUESTIONS. Left aligned: a tile, an eyebrow, the heading. The
   questions split 4/7 from 1120px, the call-and-ask number a 44px target.
   The .home-reviews rules that used to sit here went with the band they
   styled, which is now the ReviewsBand component further down this file. */

.home-faq__intro .icon-tile {
    margin-bottom: var(--space-4);
}

.home-faq__intro h2 {
    margin-bottom: var(--space-4);
}

.home-faq__intro {
    margin-bottom: var(--space-6);
}

.home-faq__phone {
    display: inline-block;
    padding-block: var(--space-3);
    font-weight: 600;
}

@media (min-width: 1120px) {
    .home-faq {
        display: grid;
        grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
        gap: var(--space-7);
        align-items: start;
    }

    .home-faq__intro {
        margin-bottom: 0;
    }

    .home-faq .faq {
        max-width: none;
    }
}

/* THE CLOSING. The hours, quietly, under the lead. */

.home-cta__hours {
    margin-top: var(--space-4);
    font-size: var(--fs-small);
    color: var(--ink-muted);
}

/* ===========================================================================
   THE REVIEWS WALL. Three columns drifting upward at three speeds, made of one
   keyframe and a list printed twice. No library, no script.

   The brake matters as much as the motion: hovering or tabbing into a card stops
   it, and a visitor who asks for reduced motion never sees it move at all. Nothing is clipped mid-sentence,
   so a card is as tall as its words and the wall is what scrolls.
   =========================================================================== */

.reviews-band {
    background-color: var(--bg-sage);
}

.reviews-band__head {
    max-width: var(--measure);
    margin-bottom: var(--space-6);
}

.reviews-band__lead {
    margin-top: var(--space-3);
    color: var(--ink-muted);
}

/* The wall: a fixed window with the columns running through it, faded top and
   bottom so cards arrive and leave instead of being cut by an edge. */
.reviews-wall {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    height: 30rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
}

@media (min-width: 42rem) {
    .reviews-wall {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        height: 34rem;
    }
}

@media (min-width: 62rem) {
    .reviews-wall {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-5);
    }
}

/* Below the breakpoints the extra columns are not rendered smaller, they are
   not rendered at all: three narrow columns on a phone is three unreadable
   ones. */
@media (max-width: 61.99rem) {
    .reviews-column--3 { display: none; }
}

@media (max-width: 41.99rem) {
    .reviews-column--2 { display: none; }
}

.reviews-column {
    overflow: hidden;
}

.reviews-column__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    animation: reviews-drift 88s linear infinite;
    will-change: transform;
}

/* Three speeds, so the columns never line up into one moving block. */
.reviews-column--2 .reviews-column__track { animation-duration: 112s; }
.reviews-column--3 .reviews-column__track { animation-duration: 98s; }

/* The list is printed twice, so minus half the track is exactly one loop. */
@keyframes reviews-drift {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}

.reviews-wall:hover .reviews-column__track,
.reviews-wall:focus-within .reviews-column__track {
    animation-play-state: paused;
}

.review-card {
    padding: var(--space-5);
    border: 1px solid var(--rule);
    border-radius: var(--radius-card);
    background-color: var(--bg-raised);
    box-shadow: 0 1px 2px rgb(12 48 60 / 4%), 0 8px 24px -12px rgb(12 48 60 / 18%);
}

.review-card__stars {
    display: flex;
    gap: 2px;
    margin: 0 0 var(--space-3);
}

.review-star {
    width: 1rem;
    height: 1rem;
    fill: #D99B2E;
}

.review-card__quote {
    margin: 0;
}

.review-card__quote p {
    margin: 0;
}

.review-card__by {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
}

.review-card__monogram {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-weight: 600;
    color: var(--bg-raised);
    background-color: var(--sage);
}

.review-card__monogram--2 { background-color: var(--teal); }
.review-card__monogram--3 { background-color: var(--violet); }
.review-card__monogram--4 { background-color: var(--teal-deep); }

.review-card__who {
    display: flex;
    flex-direction: column;
    line-height: var(--lh-tight, 1.3);
}

.review-card__who cite {
    font-style: normal;
    font-weight: 600;
    color: var(--ink);
}

.review-card__source {
    font-size: var(--fs-small);
    color: var(--ink-muted);
}

.reviews-band__foot {
    margin-top: var(--space-5);
}

/* A PHONE DOES NOT GET THE WALL, AND NEITHER DOES REDUCED MOTION.

   One column inside a 30rem window means a card taller than the window, and a
   review cut off mid-sentence with no way to reach the rest is the exact thing
   the owner objected to about the first band (2026-09-20). A wall needs
   columns to read as a wall, and a phone has room for one.

   So below 42rem the wall stops moving and stops being a window: whole cards,
   stacked, each as tall as its words, with the Google link under them. Anyone
   who asked for reduced motion gets the same thing for a different reason.

   This is also what settles the pause question. The only visitors who see the
   wall move are the ones holding a pointer or a keyboard, and it stops for
   both of them; a touch device, which can do neither, is never handed moving
   text in the first place. */
@media (max-width: 41.99rem), (prefers-reduced-motion: reduce) {
    .reviews-column__track {
        animation: none;
    }

    .reviews-wall {
        height: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* The seamless-loop copies. Nothing is looping now, so they are just the
       same reviews printed a second time. */
    .review-card[aria-hidden="true"] {
        display: none;
    }
}

@media (max-width: 41.99rem) {
    .reviews-column__track > .review-card:nth-child(n + 4) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reviews-column__track > .review-card:nth-child(n + 3) {
        display: none;
    }
}