/* ===========================================
   Built for the family CEO

   Five moments as columns that rest dimmed and equal, then expand and light up
   on hover, focus or tap. Only one is ever open.

   Dropped in from exhale-benefits-section.html. Two things changed on the way
   in, both so it belongs to this page rather than sitting on it:

   1. Its palette was a parallel set of tokens (--bg, --cyan, --ink) that
      happened to match the page's. They are the page's own tokens now, so the
      section follows light mode and can't drift out of step with the rest.
      Careful with one: --cyan-deep here is #0D7377, the light-mode teal, not
      the mint the standalone file meant by that name. That is --cyan-light.
   2. Its type asked for DM Sans, a third family the page does not load. The
      page's two do the same job — Cormorant for the serif line, Inter for the
      kickers — and cost no extra request.

   Loaded after styles.css.
   =========================================== */
.benefits {
    position: relative;
    z-index: 1;
    padding: clamp(64px, 8vw, 128px) clamp(20px, 4vw, 56px);
    overflow: hidden;
    isolation: isolate;
}

/* Ambient glow behind the rack — the same cyan wash the capabilities deck and
   the FAQ carry, anchored to this section rather than to the viewport. */
.benefits::before {
    content: "";
    position: absolute;
    right: -6%;
    top: 50%;
    width: min(1200px, 90vw);
    height: 620px;
    transform: translateY(-50%);
    background: radial-gradient(ellipse at center,
        rgba(173, 251, 246, 0.06) 0%, rgba(10, 10, 10, 0) 70%);
    pointer-events: none;
    z-index: -1;
}

/* Pale cyan over an off-white ground is nothing at all; the deep teal is what
   reads as the same light on paper. Same swap the other section glows make. */
body.light-mode .benefits::before {
    background: radial-gradient(ellipse at center,
        rgba(13, 115, 119, 0.05) 0%, rgba(250, 250, 250, 0) 70%);
}

.benefits__inner {
    max-width: 1520px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(240px, 330px) 1fr;
    gap: clamp(28px, 4.5vw, 80px);
    align-items: center;
}

/* --- left rail ------------------------------------------------------------ */
.benefits__head { text-align: left; }

.benefits__title {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(34px, 3.5vw, 56px);
    line-height: 1.14;
    letter-spacing: 0.01em;
    color: var(--text-primary);
}

.benefits__title em {
    position: relative;
    display: inline-block;
    font-style: normal;
    color: var(--cyan-glow);
    letter-spacing: 0.06em;
    padding-left: 0.06em;
    text-shadow: 0 0 12px rgba(173, 251, 246, 0.55), 0 0 44px rgba(173, 251, 246, 0.3);
}

/* A glow is light, and light needs somewhere dark to be seen. On the pale
   ground it becomes ink instead: the deep teal, and no halo. */
body.light-mode .benefits__title em {
    color: var(--cyan-deep);
    text-shadow: none;
}

.benefits__title em::after {
    content: "";
    position: absolute;
    left: 0.06em;
    right: 0;
    bottom: -0.14em;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--cyan-glow) 20%, var(--cyan-light) 80%, transparent);
    box-shadow: 0 0 12px rgba(173, 251, 246, 0.7), 0 0 34px rgba(173, 251, 246, 0.4);
}

body.light-mode .benefits__title em::after {
    background: linear-gradient(90deg, transparent, var(--cyan-deep) 20%, var(--cyan-medium) 80%, transparent);
    box-shadow: none;
}

/* --- the rack ------------------------------------------------------------- */
.rack {
    display: flex;
    gap: 6px;
    height: clamp(430px, 58vh, 640px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.col {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    transition: flex-grow 760ms var(--ease-out);
}

/* Every column gives way once the rack has a focus of attention. */
.rack:hover .col,
.rack:focus-within .col { flex-grow: 0.78; }

/* ...and the one being attended to takes the room. Listed after the rule
   above so it wins the tie on equal specificity. */
.rack .col:hover,
.rack .col:focus-within,
.rack .col.is-open { flex-grow: 3.2; }

.col__frame {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 6px;
    overflow: hidden;
    background: linear-gradient(150deg, var(--tone-near) 0%, var(--tone-far) 72%);
    /* Overlay type is sized against the column, not the viewport, so it scales
       as the column opens and holds at every breakpoint. */
    container-type: size;
}

/* Media layer: filtered on its own so the type above stays crisp. */
.col__media {
    position: absolute;
    inset: 0;
    filter: grayscale(0.95) brightness(0.38) contrast(1.02);
    transform: scale(1.02);
    transition: filter 760ms var(--ease-out),
                transform 1400ms var(--ease-out);
}

.col:hover .col__media,
.col:focus-within .col__media,
.col.is-open .col__media {
    filter: grayscale(0.34) brightness(0.94) contrast(1.06);
    transform: scale(1.06);
}

/* Five near-black slabs are a hole in a pale page, so the resting grade comes
   up. The open state is the same in both themes — that one is a photograph. */
body.light-mode .col__media {
    filter: grayscale(0.7) brightness(0.62) contrast(1.02);
}

.col__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Cyan grade, grain, and the scrim the caption sits on. */
.col__grade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(10, 10, 15, 0) 40%, rgba(10, 10, 15, 0.52) 74%, rgba(8, 8, 12, 0.9) 100%),
        linear-gradient(180deg, rgba(92, 236, 211, 0.1) 0%, rgba(10, 10, 15, 0.3) 100%),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0 1px, rgba(0, 0, 0, 0) 1px 4px);
}

/* Vignette and hairline edge, brighter on the open column. */
.col__edge {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 6px;
    pointer-events: none;
    box-shadow:
        inset 0 0 90px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(173, 251, 246, 0.06);
    transition: box-shadow 760ms var(--ease-out);
}

.col:hover .col__edge,
.col:focus-within .col__edge,
.col.is-open .col__edge {
    box-shadow:
        inset 0 0 90px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(173, 251, 246, 0.3);
}

/* --- caption: the name is always there, the line unfolds on open ---------- */
.col__caption {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 max(16px, 6.5cqw) max(20px, 6cqh);
    text-align: left;
    pointer-events: none;
}

/* The column name, doubling as the resting label. */
.col__kicker {
    font-family: var(--font-sans);
    font-size: max(10px, 1.5cqw);
    font-weight: 500;
    letter-spacing: 0.16em;
    line-height: 1.5;
    text-transform: uppercase;
    color: rgba(232, 240, 238, 0.62);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9);
    transition: color 560ms var(--ease-out),
                letter-spacing 620ms var(--ease-out),
                text-shadow 560ms var(--ease-out);
}

.col:hover .col__kicker,
.col:focus-within .col__kicker,
.col.is-open .col__kicker {
    color: var(--cyan-glow);
    letter-spacing: 0.28em;
    text-shadow: 0 0 14px rgba(173, 251, 246, 0.5), 0 1px 12px rgba(0, 0, 0, 0.9);
}

/* 0fr to 1fr is the animatable way to open to the line's own height, so the
   name stays put instead of being shoved up by hidden text. Same disclosure
   the FAQ and the notification stack use. */
.col__reveal {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 660ms var(--ease-out);
}

.col__revealInner { overflow: hidden; min-height: 0; }

.col:hover .col__reveal,
.col:focus-within .col__reveal,
.col.is-open .col__reveal { grid-template-rows: 1fr; }

.col__line {
    padding-top: 2.6cqh;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: max(21px, 5.1cqw);
    line-height: 1.24;
    /* Literal, not --text-primary: this sits on a photograph in both themes,
       never on the page, so it stays near-white when the page goes pale. */
    color: #f2f2f2;
    max-width: 88%;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 440ms var(--ease-out), transform 560ms var(--ease-out);
}

.col:hover .col__line,
.col:focus-within .col__line,
.col.is-open .col__line {
    opacity: 1;
    transform: none;
    transition-delay: 220ms;   /* lets the column widen before the type lands */
}

/* --- the hit area: carries focus, click and the accessible name ----------- */
.col__hit {
    position: absolute;
    inset: 0;
    z-index: 5;
    width: 100%;
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    border-radius: 6px;
}

.col__hit:focus-visible { outline: 2px solid var(--cyan-glow); outline-offset: 3px; }

body.light-mode .col__hit:focus-visible { outline-color: var(--cyan-deep); }

/* The page has no screen-reader-only helper of its own; this one is scoped so
   it can't become an unowned global. */
.benefits .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- responsive: the rack turns on its side into a stack ------------------
   flex-grow drives height instead of width, so the same open and rest logic
   carries over without a second interaction model. */
@media (max-width: 900px) {
    .benefits__inner {
        grid-template-columns: 1fr;
        gap: clamp(32px, 6vw, 52px);
    }

    .benefits__head { max-width: 620px; }

    .rack {
        flex-direction: column;
        height: clamp(520px, 82vh, 700px);
        gap: 8px;
    }

    .col__caption { padding: 0 max(18px, 5cqw) max(18px, 5cqh); }
    .col__kicker { font-size: 10.5px; }
    .col__line { font-size: max(20px, 4.4cqw); max-width: 100%; padding-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .col,
    .col__media,
    .col__edge,
    .col__kicker,
    .col__reveal,
    .col__line { transition-duration: 1ms; }

    .col:hover .col__line,
    .col:focus-within .col__line,
    .col.is-open .col__line { transition-delay: 0ms; }

    .col__media,
    .col:hover .col__media,
    .col:focus-within .col__media,
    .col.is-open .col__media { transform: none; }
}