/* ============================================================
   Tiempo — homepage
   The homepage is deliberately self-contained: it does not load
   components.css. Several of its components share a class name with
   the shared ones but are different variants — its FAQ carousel runs
   full-width cards where /product runs peeking ones, and .section-label
   is a sized heading here and a font-family reset there. Loading both
   would mean shipping a sheet only to override most of it.

   The nav, footer, reveal system and process diagram DO come from the
   shared modules.
   ============================================================ */

/* The homepage loosens body leading slightly on the smallest screens.
   This was a body rule inside a media query in the inline block, and
   base.css otherwise holds 1.85 all the way down. */
@media (max-width: 430px) {
  body { line-height: 1.7; }
}

    /* ── Calculator Section (cost of doing it yourself) ── */

.calc-section {
padding: var(--band) var(--pad-x) var(--band-2xl);
background-color: var(--crema);
    }

.calc-wrap {
display: grid;
grid-template-columns: 1fr 44%;
gap: 48px;
align-items: stretch;
    }

.calc-controls {
display: flex;
flex-direction: column;
gap: 32px;
    }

.calc-controls .section-header {
margin-bottom: 0;
    }

    /* Clockwork, not the tierrita every other --dark lede takes. Scoped to
 this section so the shared .section-header--dark rule keeps setting
 the ledes elsewhere on the page. 6.8:1 on crema. */

.calc-controls .section-header p {
color: var(--clockwork);
    }

.calc-field__row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
margin-bottom: 14px;
    }

.calc-field__label {
font-family: var(--font-body);
font-size: var(--fs-body);
color: var(--tierrita);
    }

.calc-field__value {
font-family: 'F37 Bobby', var(--font-body);
font-size: var(--fs-h2);
font-weight: 300;
letter-spacing: -0.02em;
color: var(--clockwork);
font-variant-numeric: tabular-nums;
white-space: nowrap;
    }

.calc-field__unit {
font-family: var(--font-body);
font-size: calc(var(--fs-body) * 0.95);
font-weight: 400;
letter-spacing: 0;
color: var(--golden);
margin-left: 5px;
    }

.calc-slider {
-webkit-appearance: none;
appearance: none;
display: block;
width: 100%;
height: 4px;
border-radius: var(--r-pill);
background: linear-gradient(to right, var(--clockwork) 0%, var(--clockwork) 50%, rgba(var(--clockwork-rgb), 0.15) 50%, rgba(var(--clockwork-rgb), 0.15) 100%);
outline: none;
cursor: pointer;
    }

.calc-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--clockwork);
border: 3px solid var(--crema);
box-shadow: 0 1px 6px rgba(var(--media-rgb), 0.25);
transition: transform 0.15s ease;
    }

.calc-slider::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--clockwork);
border: 3px solid var(--crema);
box-shadow: 0 1px 6px rgba(var(--media-rgb), 0.25);
    }

.calc-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }

.calc-slider:focus-visible { outline: 2px solid var(--clockwork); outline-offset: 6px; }

.calc-result {
background: var(--clockwork);
border-radius: 16px;
padding: 36px 32px;
color: var(--crema);
    }

.calc-result__label {
font-family: var(--font-body);
font-size: var(--fs-body);
color: rgba(var(--crema-rgb), 0.72);
margin-bottom: 6px;
    }

.calc-result__num {
font-family: 'F37 Bobby', var(--font-body);
font-weight: 300;
font-size: clamp(2.25rem, 3.4vw, 3.25rem);
letter-spacing: -0.02em;
line-height: 1.05;
color: var(--crema);
font-variant-numeric: tabular-nums;
    }

.calc-result__per {
font-family: var(--font-body);
font-size: var(--fs-body);
color: rgba(var(--crema-rgb), 0.65);
letter-spacing: 0;
margin-left: 6px;
    }

.calc-result__rows {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 24px;
    }

.calc-result__row {
display: flex;
align-items: baseline;
gap: 10px;
    }

.calc-result__row-num {
font-family: 'F37 Bobby', var(--font-body);
font-weight: 300;
font-size: var(--fs-h3);
color: var(--crema);
font-variant-numeric: tabular-nums;
white-space: nowrap;
    }

.calc-result__row-label {
font-family: var(--font-body);
font-size: var(--fs-body);
color: rgba(var(--crema-rgb), 0.7);
    }

.calc-result__divider {
height: 1px;
background: rgba(var(--crema-rgb), 0.18);
margin: 24px 0 20px;
    }

.calc-result__line {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.6;
color: rgba(var(--crema-rgb), 0.92);
    }

.calc-cta {
margin-top: 20px;
    }

.btn-primary.calc-cta {
background-color: var(--crema);
color: var(--clockwork);
    }

.btn-primary.calc-cta:hover {
background-color: #fffdf4;
    }

    /* People multi-select */

.calc-people {
display: flex;
flex-wrap: wrap;
gap: 10px;
    }

.calc-pill {
font-family: var(--font-body);
font-size: var(--fs-body);
color: var(--clockwork);
background: transparent;
border: 1.5px solid rgba(var(--clockwork-rgb), 0.22);
border-radius: var(--r-pill);
padding: 10px 18px 10px 14px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

.calc-pill:hover { border-color: var(--clockwork); background: rgba(var(--clockwork-rgb), 0.05); }

.calc-pill.is-selected {
background: var(--clockwork);
border-color: var(--clockwork);
color: var(--crema);
    }

.calc-pill.is-selected:hover { background: var(--clockwork); }

.calc-pill:focus-visible { outline: 2px solid var(--clockwork); outline-offset: 3px; }

    /* Icon takes the pill's text color via mask + currentColor */

.calc-pill__mark {
width: 15px;
height: 15px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask: url(/icons/plus-small.svg) center / contain no-repeat;
mask: url(/icons/plus-small.svg) center / contain no-repeat;
opacity: 0.85;
    }

.calc-pill.is-selected .calc-pill__mark {
-webkit-mask-image: url(/icons/check.svg);
mask-image: url(/icons/check.svg);
opacity: 1;
    }

.calc-people__hint {
font-family: var(--font-body);
font-size: calc(var(--fs-body) * 0.88);
color: var(--golden);
margin-top: 12px;
    }

    /* Hero */

.hero {
position: relative;
width: 100%;
height: var(--hero-h);
overflow: hidden;
    }

.hero img,
    .hero video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
    }

    /* Hero LCP pattern: the poster paints first as a plain <img>, the video
 fades in over it once the browser is idle. Both fill the hero box. */

.hero-poster,
    .hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
    }

.hero-video {
opacity: 0;
transition: opacity 0.6s ease;
    }

.hero-video.is-playing { opacity: 1; }

    /* Scrim. The old placeholder was a solid dark block, so the crema copy
 had contrast for free. Real footage is bright, so weight the left and
 bottom where the headline, lede and CTA sit. */

.hero::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
/* pooled into the bottom-left corner where the copy and CTA sit,
   falling off radially so the rest of the frame stays clean */
background:
  radial-gradient(95% 92% at 0% 100%,
    rgba(var(--media-rgb), 0.92) 0%,
    rgba(var(--media-rgb), 0.74) 26%,
    rgba(var(--media-rgb), 0.42) 50%,
    rgba(var(--media-rgb), 0.14) 72%,
    transparent 88%);
    }

.hero-content,
    .hero-secondary-cta { z-index: 2; }

.hero-content {
position: absolute;
bottom: 44px;
left: var(--pad-x);
right: var(--pad-x);
    }

.hero-content h1 {
font-size: var(--fs-hero);
font-weight: 400;
color: var(--white);
line-height: 1.1;
max-width: 620px;
letter-spacing: -0.02em;
    }

.hero-content h1 em {
font-style: italic;
    }

.hero-content p {
color: rgba(var(--crema-rgb), 0.72);
font-size: var(--fs-body);
margin-top: 12px;
max-width: 560px;
line-height: 1.5;
font-family: var(--font-body);
    }

/* Underlined words on this page: the lede's "human" and "Locally based" and
   "48 hours", and the process subhead's "48 hours". A default underline sits
   tight on the baseline and reads as a rendering artifact, so drop it clear
   of the type. 2px and 1px are the site's existing numbers, from
   .process-step-text p u and .pricing-card__bonus u, not a new pair.
   .process-subhead is styled in the shared process.css, but only the
   homepage underlines a word in it, so the rule belongs here. */
.hero-content p u,
.process-subhead u {
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* The hero button is .btn-primary from components.css. Only the margin is
   page business: a shared button should not carry layout spacing, so each
   context that wants the 24px sets it, the way about and work-with-us do. */
.hero-content .btn-primary,
.btn-primary.calc-cta { margin-top: 24px; }

.hero-secondary-cta {
position: absolute;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
color: rgba(var(--crema-rgb), 0.65);
font-size: var(--fs-body);
font-family: var(--font-body);
text-decoration: none;
transition: color 0.2s;
white-space: nowrap;
z-index: 5;
    }

.hero-secondary-cta:hover { color: rgba(var(--crema-rgb), 0.9); text-decoration: underline; }

    /* Image gallery */

.image-gallery {
padding: var(--band-flush) var(--pad-x) var(--band-xl);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
    }

.image-gallery img {
width: 100%;
height: 220px;
object-fit: cover;
border-radius: 10px;
    }

    /* Contact section */

.contact-section {
background-color: var(--cream-500);
padding: var(--band) var(--pad-x);
display: grid;
grid-template-columns: 1fr 0.5fr;
gap: 32px;
align-items: stretch;
min-height: 0;
height: 100%;
flex: 1;
position: relative;   /* containing block for the paper texture plate */
/* ~20% taller than the natural content height. The pain grid and the
   photo below absorb the extra so nothing floats in dead space. */
min-height: 520px;
    }

.contact-left {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 20px;
    }

.contact-left-top {
display: flex;
flex-direction: column;
gap: 10px;
    }

.contact-left h2 {
font-size: var(--fs-h1);
font-weight: 400;
color: var(--red);
line-height: 1.1;
letter-spacing: -0.02em;
    }

.contact-left p {
font-size: var(--fs-body);
color: var(--clockwork);
line-height: 1.6;
font-family: var(--font-body);
    }

.pain-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 10px;
align-items: stretch;
position: relative;
/* take the extra height the taller section gives the column, so the
   cards grow instead of leaving a gap under the copy */
flex: 1;
min-height: 0;
    }

    /* Inline WIP badge — flags any asset still in progress */

.wip-badge {
display: inline-block;
background: var(--alert);
color: #fff;
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 5px;
vertical-align: middle;
margin-left: 10px;
    }

.wip-media { position: relative; }

.wip-media > .wip-badge--media { position:absolute; top:10px; left:10px; margin-left:0; z-index:5; pointer-events:none; }

    /* Bold stat tiles — clockwork field, crema ink and crema chart marks */

.pain-card {
background: var(--clockwork);
border: 1px solid var(--clockwork);
border-radius: 16px;
padding: 22px 24px 24px;
display: flex;
flex-direction: column;
min-height: 250px;
    }

    /* Hours a week on high-leverage work, three ways of running the week.
 Bars grow from the baseline when the card scrolls in. The two
 non-Tiempo options share one muted ink: solid fill for doing it
 alone, hatched outline for overseas VAs. */

.hrs-chart {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
margin-top: 14px;
font-family: var(--font-body);
    }

.hrs-chart__plot {
flex: 1;
min-height: 0;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: 1fr auto;
column-gap: 10px;
row-gap: 7px;
    }

.hrs-chart__ylabs {
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 0.6rem;
line-height: 1;
color: rgba(var(--crema-rgb), 0.85);
font-variant-numeric: tabular-nums;
text-align: right;
    }

    /* stage: faint gridlines behind, bars on the baseline */

.hrs-chart__stage {
position: relative;
min-width: 0;
    }

.hrs-chart__grid {
position: absolute;
left: 0;
right: 0;
height: 1px;
background: rgba(var(--crema-rgb), 0.18);
    }

.hrs-chart__grid--base { background: rgba(var(--crema-rgb), 0.42); }

.hrs-chart__bars {
position: relative;
display: flex;
height: 100%;
    }

.hrs-chart__slot {
flex: 1;
display: flex;
justify-content: center;
align-items: flex-end;
    }

.hrs-chart__bar {
position: relative;
width: min(44px, 46%);
height: 0;
border-radius: 4px 4px 0 0;
transition: height 1s var(--ease-out-quart);
    }

.hrs-chart__slot:hover .hrs-chart__bar { filter: brightness(1.15); }

    /* a few points brighter than --honey so it separates from the clockwork
 card. No label sits on it, so nothing caps how light it can go. */

.hrs-chart__bar--hero { background: #E08105; }

.hrs-chart__bar--own { background: rgba(var(--crema-rgb), 0.30); }

.hrs-chart__bar--va {
border: 1.5px solid rgba(var(--crema-rgb), 0.5);
border-bottom: 0;
background: repeating-linear-gradient(45deg, rgba(var(--crema-rgb), 0.42) 0 1.5px, transparent 1.5px 6px);
    }

    /* direct value labels ride the top of each bar */

.hrs-chart__val {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 6px;
font-size: 0.64rem;
line-height: 1;
white-space: nowrap;
color: var(--crema);
font-variant-numeric: tabular-nums;
opacity: 0;
transition: opacity 0.4s ease;
    }

.hrs-chart__bar--hero .hrs-chart__val { font-weight: 600; }

    /* x axis: just the options */

.hrs-chart__cats {
grid-column: 2;
display: flex;
    }

.hrs-chart__cats span {
flex: 1;
text-align: center;
font-size: 0.62rem;
line-height: 1.25;
color: rgba(var(--crema-rgb), 0.85);
padding: 0 2px;
    }

    /* Chart axis label sits in the card header, in place of a pill */

.stat-tile__label {
font-family: var(--font-body);
font-size: 0.9rem;
line-height: 1.25;
color: var(--crema);
text-align: left;
    }

    /* load-in: bars rise one after another, then values fade in */

.pain-grid.is-filled .hrs-chart__bar { height: var(--h); }

.pain-grid.is-filled .hrs-chart__val { opacity: 1; }

/* ── The card lands before anything inside it ──────────────────
   reveal.js flips the grid to .is-filled once its own reveal has landed
   (data-fill on the grid). Everything the two cards
   hold waits for that: the label and its arrow, the axis numbers, the grid
   lines and the category names, then the bars on their own transitions
   above. The panel arrives empty and fills, rather than arriving already
   full and fading up as one flat picture.

   Hidden off .is-holding, which only JS adds, so a no-JS render still shows
   the labels. */
.pain-grid .stat-tile__top,
.pain-grid .hrs-chart__ylabs,
.pain-grid .hrs-chart__cats,
.pain-grid .hrs-chart__grid {
  transition: opacity var(--dur-4) var(--ease-out-quart);
}

.pain-grid .hrs-chart__grid { transition-delay: 0.10s; }

.pain-grid .hrs-chart__ylabs,
.pain-grid .hrs-chart__cats { transition-delay: 0.16s; }

.pain-grid.is-holding .stat-tile__top,
.pain-grid.is-holding .hrs-chart__ylabs,
.pain-grid.is-holding .hrs-chart__cats,
.pain-grid.is-holding .hrs-chart__grid { opacity: 0; }

/* The week track is the one thing in either card that paints on its own: a
   crema wash at 0.10 over the clockwork panel, which with no segments in it
   is a lighter rounded block sitting inside a darker one for the length of
   the hold. Its fill waits with the rest of the chrome, so the well appears
   and then fills rather than sitting there empty. Background, not opacity:
   the segments live inside it and grow on their own timing. */
.pain-grid .week-bar__track {
  transition: background-color var(--dur-4) var(--ease-out-quart);
  transition-delay: 0.10s;
}

.pain-grid.is-holding .week-bar__track { background: transparent; }

.hrs-chart__slot:nth-child(1) .hrs-chart__bar { transition-delay: 0.1s; }

.hrs-chart__slot:nth-child(2) .hrs-chart__bar { transition-delay: 0.25s; }

.hrs-chart__slot:nth-child(3) .hrs-chart__bar { transition-delay: 0.45s; }

.hrs-chart__slot:nth-child(1) .hrs-chart__val { transition-delay: 0.7s; }

.hrs-chart__slot:nth-child(2) .hrs-chart__val { transition-delay: 0.85s; }

.hrs-chart__slot:nth-child(3) .hrs-chart__val { transition-delay: 1.05s; }

@media (prefers-reduced-motion: reduce) {
  .hrs-chart__bar, .hrs-chart__val {transition: none !important;}
}

.stat-tile__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
    }

.stat-tile__right { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }

.stat-tile__arrow {
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid rgba(var(--crema-rgb), 0.45);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--crema);
font-size: 0.95rem;
line-height: 1;
    }

    /* Where a 40 hour week actually goes, read top to bottom. Bands fill the
 card and grow with the bars opposite. The honey band at the bottom is the
 same 5 hrs as the "On your own" bar in that card. */

.week-bar {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
margin-top: 20px;
    }

.week-bar__track {
display: flex;
flex-direction: column;
flex: 1;
min-height: 300px;
width: 100%;
border-radius: 8px;
overflow: hidden;
background: rgba(var(--crema-rgb), 0.10);
    }

.week-bar__seg {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex: 0 0 auto;
height: 0;
padding: 0 12px;
overflow: hidden;
white-space: nowrap;
font-family: var(--font-body);
font-size: 0.73rem;
line-height: 1;
color: var(--clockwork);
/* solid crema throughout: height already carries the magnitude, and a
   tint ramp has no rung between "too pale for clockwork ink" and "too dark
   to read as crema". Clockwork rules do the separating, inset so they cost
   no height. */
background: var(--crema);
box-shadow: inset 0 -2px 0 var(--clockwork);
transition: height 0.85s var(--ease-out-quart);
    }

.week-bar__seg:last-child { box-shadow: none; }

.week-bar__seg b { font-weight: 400; }

.week-bar__seg i { font-style: normal; font-variant-numeric: tabular-nums; }

    /* what is left. Same brightened honey as the hero bar opposite, so the two
 accents match. Note: crema on this honey sits at 2.7:1. Switch to
 color: var(--media) (6.7:1) if the band ever needs to pass contrast. */

.week-bar__seg--real { background: #E08105; color: var(--crema); }

.pain-grid.is-filled .week-bar__seg { height: var(--h); }

.week-bar__seg:nth-child(2) { transition-delay: 0.07s; }

.week-bar__seg:nth-child(3) { transition-delay: 0.14s; }

.week-bar__seg:nth-child(4) { transition-delay: 0.21s; }

.week-bar__seg:nth-child(5) { transition-delay: 0.28s; }

.week-bar__seg:nth-child(6) { transition-delay: 0.35s; }

.week-bar__seg:nth-child(7) { transition-delay: 0.42s; }

.week-bar__seg:nth-child(8) { transition-delay: 0.49s; }

@media (prefers-reduced-motion: reduce) {
  .week-bar__seg {transition: none !important;}
}

.contact-right {
display: flex;
flex-direction: column;
    }

.contact-photo {
flex: 1;
background: var(--clockwork);
border-radius: 12px;
min-height: 224px;
overflow: hidden;
/* containing block for the photo, which is taken out of flow below */
position: relative;
    }

.contact-photo img {
/* absolute so the portrait source cannot stretch the box to its own
   aspect ratio. The box keeps the height the column gives it and the
   photo crops into it. */
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* portrait source in a shorter box, so the crop is vertical.
   30% keeps the face in frame instead of centring on the torso. */
object-position: center 30%;
display: block;
border-radius: 12px;
    }

    /* Placeholder image block (replaces form) */

.contact-placeholder {
width: 100%;
border-radius: 10px;
overflow: hidden;
background-color: var(--clockwork);
align-self: stretch;
max-height: 100%;
    }

.contact-placeholder img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s var(--ease-out-expo);
    }

.contact-placeholder:hover img {
transform: scale(1.04);
    }

    /* ── Three-Column Feature Section ── */

.tcf-section {
background: var(--clockwork);
padding: var(--band) var(--pad-x);
    }

.tcf-header {
text-align: center;
margin-bottom: 28px;
    }

.tcf-title {
font-family: var(--font-display);
font-size: var(--fs-h1);
font-weight: 300;
color: var(--crema);
line-height: 1.1;
letter-spacing: -0.02em;
white-space: nowrap;
margin: 0 auto;
    }

.tcf-title em {
font-style: italic;
    }

.tcf-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
    }

.tcf-card {
position: relative;
border-radius: 12px;
overflow: hidden;
container-type: inline-size;
/* Title font scales with card width so it never wraps; 10 = measured
   width-to-font ratio of the longest title incl. WIP badge, 44px = label padding */
--tcf-fs: clamp(0.75rem, calc((100cqi - 44px) / 10), 1.4rem);
    }

.tcf-card__img {
width: 100%;
aspect-ratio: 8/10.8;
display: block;
    }

.tcf-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
transition: transform 0.5s cubic-bezier(0.33,1,0.68,1);
    }

.tcf-card:hover .tcf-card__img img {
transform: scale(1.04);
    }

    /* Drawer anchored at bottom — grows upward on hover.
 Closed height = padding + one title line, so the list never peeks. */

.tcf-card__label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: var(--crema);
padding: 14px 22px;
/* Closed = top pad + one title line + equal bottom pad */
max-height: calc(28px + var(--tcf-fs) * 1.15);
overflow: hidden;
transition: max-height 0.5s cubic-bezier(0.33,1,0.68,1);
    }

.tcf-card:hover .tcf-card__label {
max-height: 420px;
    }

    /* Hover hint — leftmost card nudges its drawer open a few times on load
 so visitors learn the cards reveal more. Hover cancels it. */

.tcf-card--hint .tcf-card__label {
animation: tcfHint 3s ease-in-out 1.4s 3;
    }

.tcf-card--hint:hover .tcf-card__label {
animation: none;
    }

@keyframes tcfHint {
0%, 100% { max-height: calc(28px + var(--tcf-fs) * 1.15); }
45%, 55% { max-height: calc(58px + var(--tcf-fs) * 1.15); }
    }

@media (prefers-reduced-motion: reduce) {
  .tcf-card--hint .tcf-card__label {animation: none;}
}

    /* Description sits above title — clipped in closed state */

.tcf-card__desc {
font-family: var(--font-body);
font-size: 1rem;
color: var(--clockwork);
opacity: 0.65;
line-height: 1.55;
margin: 10px 0 0 0;
    }

.tcf-card__title {
font-family: var(--font-display);
font-style: normal;
font-size: var(--tcf-fs);
font-weight: 300;
letter-spacing: -0.01em;
line-height: 1.15;
color: var(--clockwork);
white-space: nowrap;
    }

.tcf-card__title .wip-badge {
font-size: 0.5em;
padding: 0.15em 0.55em;
margin-left: 0.6em;
    }

    /* Section-foot link out to the granular list on /product. Same
 treatment as .handoff-cta so both cross-section links read alike. */

.tcf-cta { text-align: center; margin-top: 26px; }

.tcf-cta a {
font-family: var(--font-body); font-size: var(--fs-body); color: var(--crema);
text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: color 0.3s ease;
    }

/* Already full crema, so the hover reads as the underline and the arrow. */
.tcf-cta a:hover { text-decoration: underline; }

.tcf-cta a span { transition: transform 0.3s ease; }

.tcf-cta a:hover span { transform: translateX(6px); }

/* 767, not 768. tokens.css makes 768 the start of the tablet range
   (--pad-x drops to 32px there via min-width: 768px), so a max-width: 768px
   block left this grid single-column at exactly 768px while the gutters had
   already gone tablet — and one pixel wider it jumped to four columns. */
@media (max-width: 767px) {
  .tcf-section {padding: 36px var(--pad-x);}
  .tcf-title {white-space: normal;}
  .tcf-grid {grid-template-columns: 1fr; gap: 10px;}
  .tcf-card__desc {display: none;}
  .tcf-card__img {aspect-ratio: 4/3;}
  .tcf-cta {margin-top: 20px;}
}

    /* ── Services Section ── */
    /* ===== Hand-off section (request -> deliverable, tabbed) ===== */

.handoff-section {
background: var(--media);
padding: var(--band) var(--pad-x) var(--band-lg);
    }

.handoff-header { text-align: center; margin-bottom: 26px; }

.handoff-header h2 {
font-size: var(--fs-h1);
font-weight: 300;
color: var(--crema);
line-height: 1.1;
margin-bottom: 10px;
    }

.handoff-header p {
font-family: var(--font-body);
font-size: var(--fs-body);
color: rgba(var(--crema-rgb), 0.55);
max-width: 460px;
margin: 0 auto;
line-height: 1.6;
    }

    /* Tab group */

.handoff-tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 3px;
width: max-content;
max-width: 100%;
margin: 0 auto 40px;
padding: 5px;
background: rgba(var(--crema-rgb), 0.05);
border: 1px solid rgba(var(--crema-rgb), 0.10);
border-radius: var(--r-pill);
opacity: 0;
    }

.handoff-tabs.pills-visible {
animation: pillsFadeIn 0.8s cubic-bezier(0.16,1,0.3,1) both;
    }

.handoff-tab {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 15px;
border: none;
border-radius: var(--r-pill);
background: transparent;
color: rgba(var(--crema-rgb), 0.55);
font-family: var(--font-body);
font-size: var(--fs-xs);
cursor: pointer;
white-space: nowrap;
transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    }

.handoff-tab:hover { color: rgba(var(--crema-rgb), 0.9); }

.handoff-tab.active {
background: var(--honey);
color: var(--crema);
box-shadow: 0 4px 14px rgba(var(--honey-rgb), 0.35);
    }

.handoff-tab-ic {
width: 15px; height: 15px; flex-shrink: 0;
background: currentColor;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
    }

    /* Stage: panels stacked in one cell so height = tallest */

.handoff-stage {
max-width: var(--content-max);
margin: 0 auto;
display: grid;
    }

.handoff-panel {
grid-area: 1 / 1;
display: grid;
grid-template-columns: 1.55fr 1fr;
grid-template-areas: "deliverable meta";
gap: 22px 26px;
/* Row stretches to the stage height (= tallest tab) so every tab's
   cards are the same height. */
grid-template-rows: 1fr;
align-content: stretch;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
    }

.handoff-panel.active {
visibility: visible;
opacity: 1;
pointer-events: auto;
z-index: 1;
    }

.handoff-panel.active .deliverable {
animation: cardFadeIn 0.55s cubic-bezier(0.16,1,0.3,1) both;
    }

.handoff-panel.active .handoff-meta {
animation: cardFadeIn 0.55s cubic-bezier(0.16,1,0.3,1) 0.1s both;
    }

    /* Meta card: assistant + team + TiempOS hub diagram */

.handoff-meta {
grid-area: meta;
align-self: stretch;
display: flex; flex-direction: column; gap: 6px;
background: rgba(var(--crema-rgb), 0.05);
border: 1px solid rgba(var(--crema-rgb), 0.10);
border-radius: 14px;
padding: 16px 18px 12px;
transition: border-color 0.3s ease;
    }

.meta-top { display: flex; align-items: center; gap: 11px; }

.meta-text { display: flex; flex-direction: column; gap: 2px; }

.meta-title { font-family: var(--font-body); font-size: var(--fs-xs); color: rgba(var(--crema-rgb), 0.85); }

.meta-sub { font-family: var(--font-body); font-size: 0.75rem; color: rgba(var(--crema-rgb), 0.45); }

.meta-check {
margin-left: auto;
width: 26px; height: 26px; border-radius: 50%;
background: var(--honey); flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
    }

.meta-check::after {
content: ''; width: 13px; height: 13px; background: var(--crema);
-webkit-mask: url('/icons/check.svg') center / contain no-repeat;
mask: url('/icons/check.svg') center / contain no-repeat;
    }

.meta-diagram { position: relative; flex: 1 1 auto; min-height: 190px; }

    /* Outcome metrics + human-check line under the flow diagram */

.meta-foot {
margin-top: auto; padding-top: 13px;
border-top: 1px solid rgba(var(--crema-rgb), 0.08);
display: flex; flex-direction: column; gap: 10px;
    }

.meta-metrics { display: flex; gap: 7px; }

.mm {
flex: 1 1 0; min-width: 0;
display: flex; flex-direction: column; gap: 2px;
padding: 8px 10px;
background: rgba(var(--crema-rgb), 0.04);
border: 1px solid rgba(var(--crema-rgb), 0.08);
border-radius: 9px;
    }

.mm b {
font-family: var(--font-body); font-weight: 500;
font-size: 0.95rem; color: var(--honey); line-height: 1.1;
white-space: nowrap;
    }

.mm span {
font-family: var(--font-body); font-size: 0.68rem;
color: rgba(var(--crema-rgb), 0.5); line-height: 1.15;
    }

    /* Lines are HTML elements so they share the dot's exact positioning system */

.md-lh, .md-lv { position: absolute; background: rgba(var(--crema-rgb), 0.18); z-index: 0; }

.md-lh { height: 1.5px; transform: translateY(-50%); }

.md-lv { width: 1.5px; transform: translateX(-50%); }

.md-dotv {
position: absolute; width: 7px; height: 7px;
transform: translate(-50%, -50%);
border-radius: 50%; background: var(--honey);
box-shadow: 0 0 8px rgba(var(--honey-rgb), 0.55);
z-index: 0; opacity: 0;
    }

    /* Node = the circle itself; labels hang off it so line endpoints hit dead centre */

.md-node {
position: absolute; transform: translate(-50%, -50%);
z-index: 1;
transition: filter 0.25s ease;
    }

.md-node:hover { filter: brightness(1.15); }

.md-node img {
display: block;
width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
border: 1px solid rgba(var(--crema-rgb), 0.25); background: var(--media-warm);
transition: transform 0.25s ease;
    }

.md-node:hover img { transform: scale(1.08); }

.md-ava {
display: grid; place-items: center;
width: 32px; height: 32px; border-radius: 50%;
background: var(--bark);
border: 1px solid rgba(var(--crema-rgb), 0.22);
color: rgba(var(--crema-rgb), 0.85);
    }

.md-ava svg { width: 16px; height: 16px; }

.md-ic {
display: grid; place-items: center;
width: 34px; height: 34px; border-radius: 50%;
background: var(--bark);
border: 1px solid rgba(var(--crema-rgb), 0.22);
    }

.md-ic i {
width: 15px; height: 15px; background: rgba(var(--crema-rgb), 0.85);
-webkit-mask: var(--ic) center / contain no-repeat;
mask: var(--ic) center / contain no-repeat;
    }

.md-ic svg { width: 15px; height: 15px; fill: rgba(var(--crema-rgb), 0.85); }

.md-lab {
position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%);
font-family: var(--font-body); font-size: 0.6rem; line-height: 1.2;
color: rgba(var(--crema-rgb), 0.6); white-space: nowrap;
    }

.md-node.md-side .md-lab { top: 50%; left: calc(100% + 8px); transform: translateY(-50%); }

.md-asst {
display: flex; flex-direction: row; align-items: center; gap: 8px;
background: var(--honey); border-radius: 40px; padding: 5px 13px 5px 5px;
z-index: 2;
    }

.md-asst::after {
content: ''; position: absolute; inset: -5px; border-radius: 44px;
border: 1.5px solid rgba(var(--honey-rgb), 0.65);
animation: hoRing 2.6s ease-out infinite;
    }

.md-asst img { width: 30px; height: 30px; border-color: rgba(var(--crema-rgb), 0.5); }

.md-pill-ic {
width: 30px; height: 30px; border-radius: 50%;
background: rgba(var(--crema-rgb), 0.2);
display: grid; place-items: center; flex-shrink: 0;
    }

.md-pill-ic i {
width: 15px; height: 15px; background: var(--crema);
-webkit-mask: var(--ic) center / contain no-repeat;
mask: var(--ic) center / contain no-repeat;
    }

.md-asst .md-lab { position: static; transform: none; font-size: 0.72rem; color: var(--crema); font-weight: 500; }

@keyframes hoRing { 0% { transform: scale(0.92); opacity: 0.8; } 100% { transform: scale(1.4); opacity: 0; } }

    /* One relay pulse per route, eased, dwelling at each node */

@keyframes mdPipe4 {
0% { left: 8%; top: 44%; opacity: 0; }
7% { opacity: 1; }
20% { left: 36%; top: 44%; }
30% { left: 36%; top: 44%; }
50% { left: 68%; top: 44%; }
60% { left: 68%; top: 44%; }
78% { left: 92%; top: 44%; opacity: 1; }
84%, 100% { left: 92%; top: 44%; opacity: 0; }
    }

@keyframes mdChain3 {
0% { left: 50%; top: 12%; opacity: 0; }
7% { opacity: 1; }
26% { left: 50%; top: 50%; }
38% { left: 50%; top: 50%; }
64% { left: 50%; top: 88%; opacity: 1; }
70%, 100% { left: 50%; top: 88%; opacity: 0; }
    }

@keyframes mdChain4 {
0% { left: 50%; top: 10%; opacity: 0; }
7% { opacity: 1; }
20% { left: 50%; top: 36%; }
30% { left: 50%; top: 36%; }
48% { left: 50%; top: 63%; }
58% { left: 50%; top: 63%; }
76% { left: 50%; top: 88%; opacity: 1; }
82%, 100% { left: 50%; top: 88%; opacity: 0; }
    }

@keyframes mdDiaL {
0% { left: 50%; top: 10%; opacity: 0; }
7% { opacity: 1; }
16% { left: 50%; top: 52%; }
24% { left: 26%; top: 52%; }
32% { left: 26%; top: 64%; }
40% { left: 26%; top: 64%; }
48% { left: 26%; top: 78%; }
58% { left: 50%; top: 78%; }
70% { left: 50%; top: 88%; opacity: 1; }
76%, 100% { left: 50%; top: 88%; opacity: 0; }
    }

@keyframes mdDiaR {
0% { left: 50%; top: 10%; opacity: 0; }
7% { opacity: 1; }
16% { left: 50%; top: 52%; }
24% { left: 74%; top: 52%; }
32% { left: 74%; top: 64%; }
40% { left: 74%; top: 64%; }
48% { left: 74%; top: 78%; }
58% { left: 50%; top: 78%; }
70% { left: 50%; top: 88%; opacity: 1; }
76%, 100% { left: 50%; top: 88%; opacity: 0; }
    }

@keyframes mdProjT {
0% { left: 8%; top: 50%; opacity: 0; }
7% { opacity: 1; }
16% { left: 38%; top: 50%; }
26% { left: 38%; top: 50%; }
40% { left: 66%; top: 50%; }
54% { left: 66%; top: 16%; }
68% { left: 88%; top: 16%; opacity: 1; }
74%, 100% { left: 88%; top: 16%; opacity: 0; }
    }

@keyframes mdProjM {
0% { left: 8%; top: 50%; opacity: 0; }
7% { opacity: 1; }
16% { left: 38%; top: 50%; }
26% { left: 38%; top: 50%; }
40% { left: 66%; top: 50%; }
68% { left: 88%; top: 50%; opacity: 1; }
74%, 100% { left: 88%; top: 50%; opacity: 0; }
    }

@keyframes mdProjB {
0% { left: 8%; top: 50%; opacity: 0; }
7% { opacity: 1; }
16% { left: 38%; top: 50%; }
26% { left: 38%; top: 50%; }
40% { left: 66%; top: 50%; }
54% { left: 66%; top: 84%; }
68% { left: 88%; top: 84%; opacity: 1; }
74%, 100% { left: 88%; top: 84%; opacity: 0; }
    }

@keyframes mdLifeL {
0% { left: 50%; top: 10%; opacity: 0; }
7% { opacity: 1; }
18% { left: 50%; top: 44%; }
28% { left: 50%; top: 44%; }
40% { left: 50%; top: 62%; }
54% { left: 16%; top: 62%; }
68% { left: 16%; top: 82%; opacity: 1; }
74%, 100% { left: 16%; top: 82%; opacity: 0; }
    }

@keyframes mdLifeM {
0% { left: 50%; top: 10%; opacity: 0; }
7% { opacity: 1; }
18% { left: 50%; top: 44%; }
28% { left: 50%; top: 44%; }
40% { left: 50%; top: 62%; }
68% { left: 50%; top: 82%; opacity: 1; }
74%, 100% { left: 50%; top: 82%; opacity: 0; }
    }

@keyframes mdLifeR {
0% { left: 50%; top: 10%; opacity: 0; }
7% { opacity: 1; }
18% { left: 50%; top: 44%; }
28% { left: 50%; top: 44%; }
40% { left: 50%; top: 62%; }
54% { left: 84%; top: 62%; }
68% { left: 84%; top: 82%; opacity: 1; }
74%, 100% { left: 84%; top: 82%; opacity: 0; }
    }

    /* Deliverable base: DM Sans, clockwork on crema */

.deliverable {
grid-area: deliverable;
background: var(--crema);
border-radius: 18px;
box-shadow: 0 24px 60px rgba(0,0,0,0.42);
color: var(--clockwork);
overflow: hidden;
/* Fill the card: header stays put, the body list grows to fill height */
display: flex; flex-direction: column;
    }

.deliverable, .deliverable * { font-family: var(--font-body); }

    /* Fill-and-expand: each tab's main content region grows to fill the card,
 spreading its rows evenly so no tab leaves dead space. */

.mail-list, .trip-list, .stmt-bars, .doc-body {
flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between;
    }

.life-list { flex: 1 1 auto; display: flex; flex-direction: column; }

.life-item { flex: 1 1 0; }

.cal-wrap { flex: 1 1 auto; }

.cal-track { flex: 1 1 auto; height: auto; min-height: 288px; }

.app-bar {
display: flex; align-items: center; gap: 10px;
padding: 13px 18px;
border-bottom: 1px solid rgba(var(--clockwork-rgb), 0.12);
    }

.app-dots { display: flex; gap: 5px; }

.app-dots i { width: 8px; height: 8px; border-radius: 50%; }

    /* macOS traffic lights, left to right */

.app-dots i:nth-child(1) { background: #ED6A5E; }

.app-dots i:nth-child(2) { background: #F4BF4F; }

.app-dots i:nth-child(3) { background: #61C554; }

.app-title { font-size: 0.85rem; font-weight: 600; letter-spacing: -0.01em; }

.app-sub { font-size: 0.73rem; color: rgba(var(--clockwork-rgb), 0.6); }

.app-chip {
margin-left: auto; font-size: 0.7rem; font-weight: 500;
color: var(--clockwork); background: rgba(var(--clockwork-rgb), 0.1);
padding: 4px 11px; border-radius: var(--r-pill); white-space: nowrap;
transition: background 0.25s ease;
    }

.app-chip:hover { background: rgba(var(--clockwork-rgb), 0.18); }

.chip-live { display: inline-flex; align-items: center; gap: 6px; }

.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--clockwork); animation: hoPulse 2s ease infinite; flex-shrink: 0; }

@keyframes hoPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.55); opacity: 0.45; } }

    /* Shared tags */

.m-tag { font-size: 0.63rem; font-weight: 500; padding: 2px 8px; border-radius: var(--r-pill); flex-shrink: 0; white-space: nowrap; }

.tag-ready { color: var(--clockwork); background: rgba(var(--clockwork-rgb), 0.1); }

.tag-you { color: var(--crema); background: var(--clockwork); }

.tag-done { color: rgba(var(--clockwork-rgb), 0.6); background: rgba(var(--clockwork-rgb), 0.07); }

    /* --- Inbox: email client --- */

.mail-strip { display: flex; gap: 8px; padding: 14px 16px 0; }

.mail-pill {
flex: 1; background: rgba(var(--clockwork-rgb), 0.05); border-radius: 10px; padding: 10px 12px;
transition: transform 0.25s ease, background 0.25s ease;
    }

.mail-pill:hover { transform: translateY(-2px); background: rgba(var(--clockwork-rgb), 0.1); }

.mail-pill b { display: block; font-size: 1.3rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }

.mail-pill span { font-size: 0.68rem; color: rgba(var(--clockwork-rgb), 0.6); display: block; margin-top: 4px; }

.mail-list { padding: 8px 8px 10px; }

.mail-row {
display: flex; align-items: center; gap: 11px;
padding: 11px 10px 11px 16px; border-radius: 10px; position: relative;
transition: transform 0.25s ease, background 0.25s ease;
    }

.mail-row:hover { background: rgba(var(--clockwork-rgb), 0.06); }

.mail-row:not(.mail-new):hover { transform: translateX(3px); }

.m-dot { position: absolute; left: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--clockwork); }

.m-avatar {
width: 30px; height: 30px; border-radius: 50%;
background: rgba(var(--clockwork-rgb), 0.12); color: var(--clockwork);
display: flex; align-items: center; justify-content: center;
font-size: 0.66rem; font-weight: 500; flex-shrink: 0;
transition: transform 0.25s ease;
    }

.mail-row:hover .m-avatar { transform: scale(1.08); }

.m-body { flex: 1; min-width: 0; }

.m-line1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 0.78rem; }

.m-line1 b { font-weight: 600; }

.m-time { font-size: 0.68rem; color: rgba(var(--clockwork-rgb), 0.5); flex-shrink: 0; }

.m-line2 { display: flex; align-items: center; gap: 8px; font-size: 0.73rem; color: rgba(var(--clockwork-rgb), 0.65); margin-top: 2px; }

.m-line2 em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mail-row.filed { opacity: 0.55; }

.mail-new { background: rgba(var(--clockwork-rgb), 0.07); animation: hoMailIn 9s ease infinite; }

.mail-new .m-dot { animation: hoDotOff 9s ease infinite; }

.mail-new .m-tag { animation: hoTagIn 9s cubic-bezier(0.16,1,0.3,1) infinite; }

@keyframes hoMailIn {
0% { opacity: 0; transform: translateY(-10px); }
5%, 93% { opacity: 1; transform: none; }
100% { opacity: 0; transform: translateY(-10px); }
    }

@keyframes hoDotOff { 0%, 38% { opacity: 1; } 46%, 100% { opacity: 0; } }

@keyframes hoTagIn { 0%, 40% { opacity: 0; transform: scale(0.6); } 47%, 100% { opacity: 1; transform: scale(1); } }

    /* --- Calendar: day view with moving blocks --- */

.cal-wrap { display: flex; gap: 10px; padding: 16px 18px 18px; }

.cal-hours { display: flex; flex-direction: column; width: 32px; flex-shrink: 0; }

.cal-hours span { height: 36px; font-size: 0.62rem; color: rgba(var(--clockwork-rgb), 0.5); }

.cal-track {
position: relative; flex: 1; height: 288px;
background-image: repeating-linear-gradient(to bottom, rgba(var(--clockwork-rgb), 0.09) 0 1px, transparent 1px 36px);
    }

.cal-block {
position: absolute; left: 0; right: 0;
border-radius: 8px; padding: 5px 10px;
background: rgba(var(--clockwork-rgb), 0.1);
border-left: 3px solid var(--clockwork);
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    }

.cal-block:not(.cal-leave):hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(var(--media-rgb), 0.14);
background: rgba(var(--clockwork-rgb), 0.16);
z-index: 2;
    }

.cb-t { font-size: 0.7rem; font-weight: 600; line-height: 1.3; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.cb-s { font-size: 0.62rem; color: rgba(var(--clockwork-rgb), 0.65); margin-top: 1px; }

.cb-chip { font-size: 0.58rem; font-weight: 500; color: var(--clockwork); background: rgba(var(--clockwork-rgb), 0.13); padding: 1px 6px; border-radius: var(--r-pill); }

.cal-deep { background: rgba(var(--clockwork-rgb), 0.16); height: 66px; animation: hoDeepGrow 12s ease infinite; }

.cal-deep .cb-t::before {
content: ''; width: 10px; height: 10px; background: var(--clockwork); flex-shrink: 0;
-webkit-mask: url('/icons/lock.svg') center / contain no-repeat;
mask: url('/icons/lock.svg') center / contain no-repeat;
    }

.cal-deep .cb-s { animation: hoDeepSub 12s ease infinite; }

.cal-leave { animation: hoBlockLeave 12s ease infinite; }

.cal-ghost {
position: absolute; left: 0; right: 0;
border: 1.5px dashed rgba(var(--clockwork-rgb), 0.4); border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 0.62rem; color: rgba(var(--clockwork-rgb), 0.6);
opacity: 0;
animation: hoGhostIn 12s ease infinite;
    }

@keyframes hoDeepGrow { 0%, 26% { height: 30px; } 40%, 92% { height: 66px; } 100% { height: 30px; } }

@keyframes hoDeepSub { 0%, 36% { opacity: 0; } 46%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }

@keyframes hoBlockLeave {
0%, 16% { transform: none; opacity: 1; box-shadow: none; }
22% { transform: translateY(-4px) scale(1.02); opacity: 1; box-shadow: 0 10px 22px rgba(var(--media-rgb), 0.18); }
34%, 92% { transform: translate(70%, -4px); opacity: 0; box-shadow: none; }
95% { transform: none; opacity: 0; }
100% { transform: none; opacity: 1; }
    }

@keyframes hoGhostIn { 0%, 26% { opacity: 0; } 36%, 88% { opacity: 1; } 95%, 100% { opacity: 0; } }

    /* --- Travel: stepper + itinerary --- */

.trip-stepper { display: flex; align-items: flex-start; padding: 16px 20px 6px; }

.t-step { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 52px; flex-shrink: 0; }

.t-node { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(var(--clockwork-rgb), 0.35); position: relative; transition: transform 0.25s ease; }

.t-step:hover .t-node { transform: scale(1.15); }

.t-node::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--clockwork); transform: scale(1); }

.t-lbl { font-size: 0.62rem; color: rgba(var(--clockwork-rgb), 0.6); }

.t-line { flex: 1; height: 2px; background: rgba(var(--clockwork-rgb), 0.12); margin-top: 10px; overflow: hidden; }

.t-line::before { content: ''; display: block; height: 100%; background: var(--clockwork); transform: scaleX(1); transform-origin: left; }

.t-node.n1::after { animation: hoPopA 11s ease infinite; }

.t-line.l1::before { animation: hoFillA 11s ease infinite; }

.t-node.n2::after { animation: hoPopB 11s ease infinite; }

.t-line.l2::before { animation: hoFillB 11s ease infinite; }

.t-node.n3::after { animation: hoPopC 11s ease infinite; }

.t-line.l3::before { animation: hoFillC 11s ease infinite; }

.t-node.n4::after { animation: hoPopD 11s ease infinite; }

.trip-list { padding: 6px 8px 10px; }

.trip-row {
display: flex; align-items: flex-start; gap: 12px;
padding: 11px 12px; border-radius: 10px;
transition: background 0.25s ease;
    }

.trip-row:hover { background: rgba(var(--clockwork-rgb), 0.06); }

.trip-row + .trip-row { border-top: 1px solid rgba(var(--clockwork-rgb), 0.08); }

.trip-ic {
width: 30px; height: 30px; border-radius: 9px;
background: rgba(var(--clockwork-rgb), 0.1); flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
transition: transform 0.25s ease;
    }

.trip-row:hover .trip-ic { transform: scale(1.1) rotate(-4deg); }

.trip-ic i {
width: 14px; height: 14px; background: var(--clockwork);
-webkit-mask: var(--ic) center / contain no-repeat;
mask: var(--ic) center / contain no-repeat;
    }

.trip-main { flex: 1; min-width: 0; }

.tr-1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.8rem; font-weight: 600; }

.tr-2 { font-size: 0.73rem; color: rgba(var(--clockwork-rgb), 0.65); margin-top: 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; }

.t-old { text-decoration: line-through; text-decoration-color: rgba(var(--clockwork-rgb), 0.7); opacity: 0.45; animation: hoOldTime 12s ease infinite; }

.t-new { color: var(--clockwork); font-weight: 500; animation: hoNewIn 12s ease infinite; }

.t-newtag { animation: hoNewIn 12s ease infinite; }

@keyframes hoOldTime {
0%, 26% { opacity: 1; text-decoration-color: transparent; }
34%, 93% { opacity: 0.45; text-decoration-color: rgba(var(--clockwork-rgb), 0.7); }
100% { opacity: 1; text-decoration-color: transparent; }
    }

@keyframes hoNewIn {
0%, 30% { opacity: 0; transform: translateX(-3px); }
38%, 100% { opacity: 1; transform: none; }
    }

    /* --- Admin: expense statement --- */

.stmt-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px 4px; }

.stmt-total b { font-size: 1.6rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }

.stmt-total span { display: block; font-size: 0.7rem; color: rgba(var(--clockwork-rgb), 0.6); margin-top: 5px; }

.stmt-count { font-size: 0.7rem; color: rgba(var(--clockwork-rgb), 0.6); text-align: right; line-height: 1.6; flex-shrink: 0; }

.stmt-bars { display: flex; flex-direction: column; gap: 12px; padding: 14px 20px 6px; }

.stmt-bars > div { border-radius: 8px; transition: transform 0.25s ease; }

.stmt-bars > div:hover { transform: translateX(3px); }

.stmt-bars > div:hover .b-track { background: rgba(var(--clockwork-rgb), 0.16); }

.b-top { display: flex; justify-content: space-between; font-size: 0.78rem; color: rgba(var(--clockwork-rgb), 0.8); margin-bottom: 6px; }

.b-top b { font-weight: 600; color: var(--clockwork); }

.b-track { height: 7px; border-radius: var(--r-pill); background: rgba(var(--clockwork-rgb), 0.1); overflow: hidden; transition: background 0.25s ease; }

.b-fill { height: 100%; border-radius: var(--r-pill); background: var(--clockwork); transform-origin: left; }

.handoff-panel.active .b-fill { animation: hoBarX 0.9s cubic-bezier(0.16,1,0.3,1) both; }

.stmt-bars > div:nth-child(2) .b-fill { animation-delay: 0.08s; }

.stmt-bars > div:nth-child(3) .b-fill { animation-delay: 0.16s; }

.stmt-bars > div:nth-child(4) .b-fill { animation-delay: 0.24s; }

@keyframes hoBarX { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.stmt-file { padding: 8px 8px 0; }

.file-row {
display: flex; align-items: center; gap: 12px; padding: 10px 12px;
border-radius: 10px; background: rgba(var(--clockwork-rgb), 0.06);
animation: hoMailIn 9s ease infinite;
transition: background 0.25s ease;
    }

.file-row:hover { background: rgba(var(--clockwork-rgb), 0.11); }

.file-tag { animation: hoTagIn 9s cubic-bezier(0.16,1,0.3,1) infinite; }

.chase-row { display: flex; align-items: center; gap: 9px; padding: 12px 20px 16px; font-size: 0.73rem; color: rgba(var(--clockwork-rgb), 0.65); }

    /* --- Projects: Gantt-style timeline of concurrent threads --- */

.proj-list { --pgn: 158px; flex: 1 1 auto; display: flex; flex-direction: column; padding: 10px 20px 12px; }

    /* Week axis, aligned to the track area (col 2) */

.pg-axis { display: grid; grid-template-columns: var(--pgn) 1fr; gap: 10px; align-items: end; padding-bottom: 8px; border-bottom: 1px solid rgba(var(--clockwork-rgb), 0.1); }

.pg-weeks { display: grid; grid-template-columns: repeat(4, 1fr); }

.pg-weeks span { font-size: 0.6rem; color: rgba(var(--clockwork-rgb), 0.5); padding-left: 2px; }

.pg-corner { font-size: 0.6rem; color: rgba(var(--clockwork-rgb), 0.42); }

    /* Lanes fill the remaining height evenly; today marker overlays them */

.pg-lanes { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; }

    /* Full-height week gridlines turn the timeline area into a proper chart plane */

.pg-lanes::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--pgn) + 10px); right: 0; background: repeating-linear-gradient(to right, rgba(var(--clockwork-rgb), 0.09) 0 1px, transparent 1px 25%); pointer-events: none; }

.pg-today { position: absolute; top: 0; bottom: 0; left: calc(var(--pgn) + 10px + (100% - var(--pgn) - 10px) * 0.6); width: 1.5px; background: var(--honey); opacity: 0.75; z-index: 3; }

.pg-today::after { content: ''; position: absolute; top: -3px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--honey); transform: translateX(-50%); }

.pg-lane { flex: 1 1 0; display: grid; grid-template-columns: var(--pgn) 1fr; align-items: center; gap: 10px; border-top: 1px solid rgba(var(--clockwork-rgb), 0.08); transition: transform 0.25s ease; }

.pg-lane:first-child { border-top: none; }

.pg-lane:hover { transform: translateX(2px); }

.pg-info { min-width: 0; }

.pg-name { display: flex; align-items: center; gap: 7px; font-size: 0.74rem; font-weight: 600; line-height: 1.2; }

.pg-name .pulse-dot { flex-shrink: 0; }

.pg-sub { display: flex; align-items: center; gap: 6px; font-size: 0.63rem; color: rgba(var(--clockwork-rgb), 0.6); margin-top: 4px; }

    /* Track = the timeline area for one project; gridlines mark the 4 weeks */

.pg-track { position: relative; height: 12px; }

.pg-bar { position: absolute; top: 50%; transform: translateY(-50%); height: 10px; border-radius: var(--r-pill);
background: rgba(var(--clockwork-rgb), 0.15); overflow: hidden; transition: background 0.25s ease; }

.pg-lane:hover .pg-bar { background: rgba(var(--clockwork-rgb), 0.24); }

.pg-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: var(--r-pill); background: var(--clockwork); transform-origin: left; }

.handoff-panel.active .pg-fill { animation: hoBarX 0.9s cubic-bezier(0.16,1,0.3,1) both; }

.pg-lane:nth-child(2) .pg-fill { animation-delay: 0.08s; }

.pg-lane:nth-child(3) .pg-fill { animation-delay: 0.16s; }

.pg-lane:nth-child(4) .pg-fill { animation-delay: 0.24s; }

    /* At-risk thread reads in honey; delivered thread is fully filled */

.pg-bar.is-risk { background: rgba(var(--honey-rgb), 0.18); }

.pg-bar.is-risk .pg-fill { background: var(--honey); }

.tag-risk { color: var(--honey); background: rgba(var(--honey-rgb), 0.12); }

    /* --- Lifestyle: evening timeline --- */

.life-list { padding: 18px 20px; }

.life-item { position: relative; display: flex; gap: 13px; padding-bottom: 20px; transition: transform 0.25s ease; }

.life-item:hover { transform: translateX(3px); }

.life-item:last-child { padding-bottom: 0; }

.life-item::before {
content: ''; position: absolute; left: 10px; top: 24px; bottom: 2px;
width: 2px; background: rgba(var(--clockwork-rgb), 0.12);
    }

.life-item:last-child::before { display: none; }

.life-node { width: 22px; height: 22px; border-radius: 50%; background: rgba(var(--clockwork-rgb), 0.12); flex-shrink: 0; position: relative; z-index: 1; transition: transform 0.25s ease; }

.life-item:hover .life-node { transform: scale(1.12); }

.life-node i { position: absolute; inset: 0; border-radius: 50%; background: var(--clockwork); transform: scale(1); }

.life-node i::after {
content: ''; position: absolute; inset: 5px; background: var(--crema);
-webkit-mask: url('/icons/check.svg') center / contain no-repeat;
mask: url('/icons/check.svg') center / contain no-repeat;
    }

.life-item:nth-child(1) .life-node i { animation: hoPopA 11s ease infinite; }

.life-item:nth-child(2) .life-node i { animation: hoPopB 11s ease infinite; }

.life-item:nth-child(3) .life-node i { animation: hoPopC 11s ease infinite; }

.life-item:nth-child(4) .life-node i { animation: hoPopD 11s ease infinite; }

.life-time { width: 38px; flex-shrink: 0; font-size: 0.68rem; color: rgba(var(--clockwork-rgb), 0.55); margin-top: 4px; }

.life-t { font-size: 0.82rem; font-weight: 600; margin-top: 2px; }

.life-s { font-size: 0.72rem; color: rgba(var(--clockwork-rgb), 0.65); margin-top: 2px; }

    /* --- Reporting: client document --- */

.doc-head {
padding: 18px 22px 14px;
border-bottom: 2px solid var(--clockwork);
display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
    }

.doc-brand { font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clockwork); font-weight: 600; margin-bottom: 7px; }

.doc-title { font-size: 1.1rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }

.doc-sub { font-size: 0.72rem; color: rgba(var(--clockwork-rgb), 0.6); margin-top: 3px; }

.doc-meta { text-align: right; font-size: 0.68rem; color: rgba(var(--clockwork-rgb), 0.6); line-height: 1.7; flex-shrink: 0; }

.doc-body { padding: 10px 22px 4px; }

.doc-tr {
display: flex; align-items: baseline; gap: 10px;
padding: 10px 8px; margin: 0 -8px; border-radius: 8px;
border-bottom: 1px solid rgba(var(--clockwork-rgb), 0.1);
font-size: 0.78rem;
transition: background 0.25s ease;
    }

.doc-tr:hover { background: rgba(var(--clockwork-rgb), 0.06); }

.dt-l { flex: 1; color: rgba(var(--clockwork-rgb), 0.7); }

.dt-v { font-weight: 600; text-align: right; }

.dt-d { width: 128px; text-align: right; font-size: 0.68rem; color: var(--clockwork); flex-shrink: 0; }

.doc-chart { padding: 16px 0 8px; }

.doc-chart-lbl { font-size: 0.7rem; color: rgba(var(--clockwork-rgb), 0.6); margin-bottom: 9px; }

.dlv-spark { display: flex; align-items: flex-end; gap: 6px; height: 56px; }

.dlv-spark span { flex: 1; background: rgba(var(--clockwork-rgb), 0.28); border-radius: 3px 3px 0 0; transform-origin: bottom; transition: background 0.2s ease, transform 0.2s ease; }

    /* !important beats the load-in animation (per cascade) so hover grows without
 toggling the animation off — which was replaying the load-in on mouse-out. */

.dlv-spark span:hover { background: var(--clockwork); transform: scaleY(1.06) !important; }

.dlv-spark span.peak { background: var(--clockwork); }

.handoff-panel.active .dlv-spark span { animation: hoBarUp 0.7s cubic-bezier(0.16,1,0.3,1) both; }

.handoff-panel.active .dlv-spark span:nth-child(2) { animation-delay: 0.05s; }

.handoff-panel.active .dlv-spark span:nth-child(3) { animation-delay: 0.1s; }

.handoff-panel.active .dlv-spark span:nth-child(4) { animation-delay: 0.15s; }

.handoff-panel.active .dlv-spark span:nth-child(5) { animation-delay: 0.2s; }

.handoff-panel.active .dlv-spark span:nth-child(6) { animation-delay: 0.25s; }

.handoff-panel.active .dlv-spark span:nth-child(7) { animation-delay: 0.3s; }

.handoff-panel.active .dlv-spark span:nth-child(8) { animation: hoBarUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.35s both, hoPeak 4s ease 1.4s infinite; }

@keyframes hoBarUp { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@keyframes hoPeak { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }

.doc-foot {
display: flex; justify-content: space-between; gap: 10px;
padding: 10px 22px 16px; margin-top: 10px;
border-top: 1px solid rgba(var(--clockwork-rgb), 0.12);
font-size: 0.66rem; color: rgba(var(--clockwork-rgb), 0.6);
    }

    /* Shared sequential pop/fill windows (11s cycles) */

@keyframes hoPopA { 0%, 4% { transform: scale(0); } 10%, 91% { transform: scale(1); } 97%, 100% { transform: scale(0); } }

@keyframes hoPopB { 0%, 16% { transform: scale(0); } 22%, 91% { transform: scale(1); } 97%, 100% { transform: scale(0); } }

@keyframes hoPopC { 0%, 28% { transform: scale(0); } 34%, 91% { transform: scale(1); } 97%, 100% { transform: scale(0); } }

@keyframes hoPopD { 0%, 40% { transform: scale(0); } 46%, 91% { transform: scale(1); } 97%, 100% { transform: scale(0); } }

@keyframes hoFillA { 0%, 8% { transform: scaleX(0); } 16%, 91% { transform: scaleX(1); } 97%, 100% { transform: scaleX(0); } }

@keyframes hoFillB { 0%, 20% { transform: scaleX(0); } 28%, 91% { transform: scaleX(1); } 97%, 100% { transform: scaleX(0); } }

@keyframes hoFillC { 0%, 32% { transform: scaleX(0); } 40%, 91% { transform: scaleX(1); } 97%, 100% { transform: scaleX(0); } }

/* The question leads, the link answers it, so the two sit as one unit rather
   than a link with a caption under it. gap over a child margin because the
   pair reads as a pair whichever way round they end up. */
.handoff-cta { text-align: center; margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 2px; }

/* .hero-secondary-cta's treatment at body size, with an underline on hover
   rather than a colour change, but at full crema rather than its 0.65: this
   one closes a section instead of sitting quietly under a hero. */
.handoff-cta a {
font-family: var(--font-body); font-size: var(--fs-body); color: var(--crema);
text-decoration: none;
line-height: 1.35;
display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s;
    }

.handoff-cta a:hover { text-decoration: underline; }

.handoff-cta p { font-family: var(--font-body); font-size: var(--fs-body); color: rgba(var(--crema-rgb), 0.4); line-height: 1.35; }

@media (hover: hover) {
  .handoff-meta:hover {border-color: rgba(var(--crema-rgb), 0.22);}
}

@media (max-width: 900px) {
  .handoff-panel {grid-template-columns: 1fr;
  grid-template-areas: "deliverable" "meta";
  grid-template-rows: auto auto;
  align-content: start;
  gap: 16px;}
  .deliverable {box-shadow: 0 14px 36px rgba(0,0,0,0.35);}
}

@media (max-width: 767px) {
  .handoff-section {padding: var(--band) var(--pad-x);}
  .handoff-header h2 {font-size: var(--fs-h2);}
  .handoff-tabs {flex-wrap: wrap; border-radius: 22px;}
  .handoff-tab {padding: 7px 13px;}
  /* Collapse inactive panels so section height matches active content */
.handoff-panel:not(.active) {display: none;}
  .mail-strip {padding: 12px 12px 0;}
  .mail-pill {padding: 9px 10px;}
  .mail-pill b {font-size: 1rem;}
  .trip-stepper {padding: 14px 12px 4px;}
  .t-step {width: 46px;}
  .cal-wrap {padding: 14px 12px 16px;}
  .cal-hours {width: 26px;}
  .stmt-top {flex-direction: column; gap: 6px;}
  .stmt-count {text-align: left;}
  .doc-head {flex-direction: column;}
  .doc-meta {text-align: left;}
  .doc-tr .dt-d {width: auto;}
  .meta-diagram {height: 190px;}
}

@media (prefers-reduced-motion: reduce) {
  .handoff-section *,
.handoff-section *::before,
.handoff-section *::after {animation: none !important;}
  .handoff-tabs {opacity: 1;}
  .cal-ghost {opacity: 1;}
  .md-asst::after {display: none;}
  .md-dotv {display: none;}
}

    /* Services grid breakpoints handled in consolidated responsive block below */

    /* Dark values section */

.values-section {
background-color: var(--red);
padding: var(--band) var(--pad-x) var(--band);
    }

.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
    }

.values-card .card-media-wrap {
border-radius: 8px;
overflow: hidden;
margin-bottom: 16px;
position: relative;
aspect-ratio: 16 / 9;
border: 2px solid var(--cream-500);
    }

.values-card .card-media {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background-color: var(--media-mid);
transition: transform 0.5s var(--ease-out-expo);
    }

.values-card video.card-media {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s var(--ease-out-expo);
    }

.values-card .card-media-wrap:hover .card-media,
    .values-card .card-media-wrap:hover video.card-media {
transform: scale(1.05);
    }

.watch-cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 16px;
border: 1px solid rgba(var(--crema-rgb), 0.35);
border-radius: var(--r-pill);
color: var(--white);
font-size: var(--fs-xs);
font-family: var(--font-body);
letter-spacing: 0.02em;
text-decoration: none;
margin-top: 12px;
transition: background-color 0.3s ease, border-color 0.3s ease;
cursor: pointer;
background: transparent;
    }

.watch-cta:hover {
background-color: rgba(var(--crema-rgb), 0.1);
border-color: rgba(var(--crema-rgb), 0.55);
    }

.watch-cta svg {
width: 12px;
height: 12px;
fill: var(--white);
    }

.values-card h3 {
font-size: var(--fs-body);
font-weight: 500;
color: var(--white);
margin-bottom: 2px;
    }

.values-card .card-role {
font-size: var(--fs-xs);
color: rgba(var(--crema-rgb), 0.6);
font-family: var(--font-body);
margin-bottom: 0;
    }

.values-card p {
font-size: var(--fs-body);
color: var(--white);
line-height: 1.5;
font-family: var(--font-body);
opacity: 0.82;
    }

.values-card .card-quote {
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: 300;
line-height: 1.35;
color: var(--white);
opacity: 1;
margin-bottom: 10px;
letter-spacing: -0.01em;
    }

.card-bottom-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0;
    }

.card-bottom-row .watch-cta {
margin-top: 0;
    }

    /* Section header — reusable for Testimonials, Pricing, etc. */

.section-header {
margin-bottom: 32px;
    }

.section-header h2 {
font-family: 'F37 Bobby', var(--font-body);
font-weight: 300;
font-size: var(--fs-h1);
line-height: 1.1;
letter-spacing: -0.02em;
margin-bottom: 8px;
    }

.section-header p {
font-size: var(--fs-body);
line-height: 1.5;
font-family: var(--font-body);
max-width: 480px;
    }

    /* Light variant (on dark backgrounds) */

.section-header--light h2 { color: var(--crema); }

.section-header--light p  { color: rgba(var(--crema-rgb), 0.7); }

    /* Dark variant (on cream backgrounds) */

.section-header--dark h2 { color: var(--red); }

.section-header--dark p  { color: var(--grey-500); }

    /* ── Pricing section ──────────────────────────── */

.pricing-section {
background-color: var(--media);
padding: var(--band) var(--pad-x) var(--band);
border-top: 1px solid rgba(var(--crema-rgb), 0.15);
    }

.pricing-grid {
display: grid;
/* Three equal cards. minmax(0, …) and not a bare fr: an fr track will not
   shrink below its content's min-content width, so anything wide inside a
   card pushes its column out and the row stops being proportional. */
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
/* All cards same height */
align-items: stretch;
/* The card footers switch on this grid's own width rather than the
   viewport's, so the threshold tracks --content-max and --pad-x instead of
   restating them, and it is not a seventh site breakpoint. */
container-type: inline-size;
container-name: pricing;
    }

.pricing-card {
position: relative;
background-color: #3D1520;
border: 2px solid var(--honey);
border-radius: 16px;
padding: 30px 26px 28px;
display: flex;
flex-direction: column;
transition: transform 0.5s var(--ease-out-expo);
cursor: pointer;
    }

.pricing-card--popular {
border-width: 3px;
box-shadow: 0 0 0 1px rgba(var(--honey-rgb), 0.35), 0 18px 44px rgba(var(--media-rgb), 0.4);
    }

.pricing-card__badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background-color: var(--honey);
color: var(--crema);
font-family: var(--font-body);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.03em;
padding: 6px 18px;
border-radius: var(--r-pill);
white-space: nowrap;
box-shadow: 0 6px 18px rgba(var(--media-rgb), 0.4);
    }

.pricing-card:hover {
transform: scale(1.05);
z-index: 2;
position: relative;
    }

.pricing-card__title {
font-family: 'F37 Bobby', var(--font-body);
font-weight: 300;
font-size: var(--fs-h1);
color: var(--crema);
line-height: 1.0;
text-align: center;
margin-bottom: 10px;
    }

.pricing-card__desc {
font-family: var(--font-body);
font-size: var(--fs-body);
color: rgba(var(--crema-rgb), 0.65);
text-align: center;
line-height: 1.5;
margin-bottom: 22px;
max-width: 280px;
margin-left: auto;
margin-right: auto;
    }

/* Price. Sits in the footer's right slot, where the terms line used to, so
   the card ends on the ask and the number rather than on small print.
   --fs-h3, not --fs-h2: the row has to hold a pill button beside it at the
   768-1024 two-up, and the package title above still leads the card. */
.pricing-card__price {
font-family: 'F37 Bobby', var(--font-body);
font-weight: 300;
/* Half again on --fs-h3, which lands at 33px: between --fs-h2 and --fs-h1
   and so off the seven-step scale, but derived from it rather than typed
   as a literal. */
font-size: calc(var(--fs-h3) * 1.5);
color: var(--crema);
text-align: center;
line-height: 1;
/* No nowrap. The terms line it replaced could wrap when the row got tight,
   and between about 1025 and 1250 every card in this grid is already at its
   content minimum; an unbreakable price there widens this card at the
   Enterprise column's expense. The suffix drops to a second line instead. */
    }

/* The dirham symbol, masked rather than dropped in as an image so it takes
   the price's own colour and scales with it.

   Height is the numerals' own height, not a guess: F37 Bobby Light's digits
   measure 0.713em from baseline to top, taken from the font's ink extents
   rather than its line box, which is 23.53px at the 33px this price runs at.
   The symbol is an empty inline-block, so its bottom edge sits on the
   baseline, and matching that height puts its top exactly level with the
   tops of the digits. Width follows the file's 1000x870 viewBox, so the
   artwork is never stretched. Both in em, so the pair scale together. */
.pricing-card__aed {
display: inline-block;
height: 0.713em;
width: 0.8195em;
margin-right: 0.12em;
background-color: currentColor;
-webkit-mask: url('/icons/dirham.svg') no-repeat center / contain;
mask: url('/icons/dirham.svg') no-repeat center / contain;
    }

/* "/mo", not "/ month": the footer row is content-sized at 1100-1200, where
   every card is already at its minimum. A longer suffix made this card's
   minimum the widest of the three and pulled width out of the Enterprise
   column, which the grid deliberately sets wider at 1.35fr. */
.pricing-card__per {
font-family: var(--font-body);
font-size: var(--fs-sm);
color: rgba(var(--crema-rgb), 0.65);
margin-left: 4px;
    }

.pricing-card__features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
    }

.pricing-card__features li {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-body);
font-size: var(--fs-body);
font-weight: 500;
color: var(--crema);
line-height: 1.35;
    }

    /* Underline feature text to match original */

.pricing-card__features li span {
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
    }

.pricing-card__features li .check {
flex-shrink: 0;
margin-left: 12px;
width: 20px;
height: 20px;
opacity: 0.6;
    }

.pricing-card--alt {
background-color: var(--tierrita);
    }

/* A bigger arrival than the shared box kind, because these three are the
   decision on the page and they play one at a time on a 0.3s step rather than
   the 0.12s everything else uses. Only the escape-hatch properties tokens.css
   reserves for exactly this, so .reveal--box itself is untouched everywhere
   else. Three classes so it outranks motion.css's .reveal--box.is-visible
   rather than relying on file order. */
.pricing-grid .pricing-card.is-visible,
.pricing-grid .pricing-card.visible {
  --reveal-shift: 56px;
  --reveal-scale: 0.94;
  --reveal-dur: 1.35s;
}

.pricing-card__footer {
margin-top: auto;
padding-top: 20px;
display: flex;
/* Stacked and centred is the default, at every width where the button and
   the line beside it would not both fit. That also keeps this row's minimum
   width down to the wider of the two rather than their sum, which is what
   used to pull width out of the Enterprise column. */
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
    }

.pricing-card__cta {
display: inline-block;
padding: 10px 26px;
background-color: var(--crema);
color: var(--clockwork);
font-family: var(--font-body);
font-size: var(--fs-body);
font-weight: 500;
border-radius: var(--r-pill);
text-decoration: none;
white-space: nowrap;
transition: opacity 0.3s ease, scale 0.2s ease;
    }

.pricing-card__cta:hover {
scale: 1.04;
    }

/* The slot beside the button on a card with no figure. Sized and weighted
   well under .pricing-card__price, because it is a note about the price
   rather than one.

   The padding makes this slot exactly as tall as the price on the other two
   cards. Both run line-height 1, so the price's box is its own font size and
   this one's is its own; stacked, the footer is bottom-anchored by
   margin-top: auto, so the shorter slot was pushing this card's button 18px
   below the other two. Derived from the same two tokens the pair are sized
   from rather than typed as a pixel value, and split evenly so the text
   still sits centred in the taller box. Padding rather than a min-height and
   a flex centre, because text-align is what aligns this slot in the row
   layout above 1300px and flex items ignore it. */
.pricing-card__note {
font-family: var(--font-body);
font-size: var(--fs-body);
font-style: italic;
color: rgba(var(--crema-rgb), 0.72);
letter-spacing: 0.01em;
line-height: 1;
text-align: center;
padding: calc((var(--fs-h3) * 1.5 - var(--fs-body)) / 2) 0;
    }

/* ── Looking for more? ─────────────────────────────────────────
   Enterprise Launch, out of the card grid. A fourth card would have taken
   every card under 340px, where the button no longer fits beside the price,
   so the tier reads as a band under the three instead. */
.pricing-more {
max-width: var(--content-max);
margin: 24px auto 0;
padding: 26px 30px;
background-color: rgba(var(--crema-rgb), 0.05);
border: 1px solid rgba(var(--honey-rgb), 0.35);
border-radius: 16px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 30px;
    }

.pricing-more__text { flex: 1 1 420px; }

.pricing-more__title {
font-family: 'F37 Bobby', var(--font-body);
font-weight: 300;
font-size: var(--fs-h3);
color: var(--crema);
line-height: 1.1;
margin: 0 0 6px;
    }

.pricing-more__desc {
font-family: var(--font-body);
font-size: var(--fs-body);
color: rgba(var(--crema-rgb), 0.65);
line-height: 1.5;
margin: 0;
max-width: 720px;
    }

.pricing-more__cta {
display: inline-block;
flex: 0 0 auto;
padding: 10px 26px;
background-color: transparent;
border: 1px solid var(--crema);
color: var(--crema);
font-family: var(--font-body);
font-size: var(--fs-body);
font-weight: 500;
border-radius: var(--r-pill);
text-decoration: none;
white-space: nowrap;
transition: background-color var(--dur-3) ease, color var(--dur-3) ease;
    }

/* Outlined, not filled: the three cards each carry the filled pill, and a
   fourth of those would compete with them rather than sit under them. */
.pricing-more__cta:hover {
background-color: var(--crema);
color: var(--clockwork);
    }

/* Side by side once a card can hold the button and the price with room
   between them. Three equal 1fr cards make a track (width - 48px of gaps) / 3,
   so a 1300px grid gives each 417px, against the 341px the widest pair
   measures plus the card's own 56px of padding and border.

   Queried on the grid rather than the window, so it stays out of the site's
   six breakpoints and follows --content-max on its own. After the base rules
   on purpose: same specificity, so order decides. */
@container pricing (min-width: 1300px) {
  .pricing-card__footer {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  .pricing-card__price,
  .pricing-card__note { text-align: right; }
}

    /* ── Dashboard Section (product preview) ── */

.dash-section {
background: var(--clockwork);
padding: var(--band) var(--pad-x) var(--band-xl);
    }

    /* Two columns: copy + value lines on the left, live dashboard on the right */

.dash-body {
max-width: var(--content-max);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(340px, 430px) 1fr;
gap: clamp(48px, 6vw, 110px);
/* Columns stretch to one row height: the dashboard extends to the
   section's bottom padding, level with the last value line */
    }

.dash-header {
text-align: left;
margin-bottom: 26px;
    }

.dash-header h2 {
font-size: var(--fs-h1);
font-weight: 300;
color: var(--crema);
line-height: 1.1;
margin-bottom: 12px;
text-wrap: balance;
    }

.dash-header p {
font-family: var(--font-body);
font-size: var(--fs-body);
color: rgba(var(--crema-rgb), 0.75);
max-width: 460px;
line-height: 1.6;
    }

    /* The value points, as expandable lines under the header. One opens at a
 time; the open detail pushes the rows below it, but on desktop the list
 is pinned to its closed height (JS): whatever passes the bottom edge
 clips at the section's bottom padding instead of growing the section */

.dash-points {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
    }

.dash-points.measuring .dash-point__detail { transition: none !important; }

.dash-points li {
border-bottom: 1px solid rgba(var(--crema-rgb), 0.16);
    }

.dash-points li:last-child { border-bottom: none; }

.dash-point__row {
display: flex;
align-items: center;
gap: 13px;
width: 100%;
padding: 11px 0;
background: none;
border: none;
cursor: pointer;
text-align: left;
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 500;
color: rgba(var(--crema-rgb), 0.92);
line-height: 1.35;
    }

.dash-point__row:focus-visible { outline: 2px solid var(--crema); outline-offset: 2px; border-radius: 4px; }

.dash-points__ic {
width: 18px;
height: 18px;
flex-shrink: 0;
background-color: rgba(var(--crema-rgb), 0.7);
-webkit-mask: var(--dash-ic) center / contain no-repeat;
mask: var(--dash-ic) center / contain no-repeat;
    }

.dash-point__chev {
width: 16px;
height: 16px;
margin-left: auto;
flex-shrink: 0;
color: rgba(var(--crema-rgb), 0.55);
transition: transform 0.3s cubic-bezier(0.25,0.8,0.25,1), color 0.3s ease;
    }

.dash-point.open .dash-point__chev { transform: rotate(180deg); color: var(--crema); }

.dash-point__detail {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.34s cubic-bezier(0.25,0.8,0.25,1);
    }

.dash-point.open .dash-point__detail { grid-template-rows: 1fr; }

.dash-point__detail-in {
overflow: hidden;
min-height: 0;
    }

.dash-point__detail p {
padding: 0 24px 13px 31px; /* left edge aligns with the label past the icon */
font-family: var(--font-body);
font-size: 0.85rem;
color: rgba(var(--crema-rgb), 0.68);
line-height: 1.55;
    }

.dash-stage {
min-width: 0;
display: flex;
flex-direction: column;
    }

.dash-live {
width: 100%;
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
    }

    /* Crema deliverable-style card around the live preview. Flat by design:
 the crema-on-clockwork contrast does the separating, not a shadow. */

.dash-live__window {
border-radius: 20px;
overflow: hidden;
isolation: isolate; /* forces the radius to clip the scaled iframe */
background: var(--crema);
color: var(--clockwork); /* app-bar text inherits the deliverable palette */
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
    }

    /* Holds the live dashboard embed. Height is layout-driven: column-matched
 in two-col mode, a fixed slice below 1240px. The iframe is rendered at a
 1280px design width and scaled down by JS to fit whatever width this box
 ends up being. */

.dash-live__frame {
position: relative;
overflow: hidden;
background: var(--crema);
line-height: 0;
border-radius: 0 0 20px 20px;
flex: 1;
min-height: 260px;
    }

    /* Rendered at the design width, then scaled to fit by the JS below.
 Hidden until the embed has actually loaded a real document. */

.dash-live__frame iframe {
position: absolute;
top: 0;
left: 0;
width: 1280px;
height: 100%;
border: 0;
display: none;
transform-origin: 0 0;
background: var(--crema);
    }

.dash-live__fallback {
width: 100%;
height: auto;
display: block;
    }

@media (min-width: 768px) {
  .dash-live__fallback {height: 100%; object-fit: cover; object-position: top;}
}

@media (min-width: 768px) and (max-width: 1239px) {
  .dash-live__frame {aspect-ratio: 1280 / 540; flex: none;}
}

    /* Once live, the embed replaces the capture */

.dash-live.live .dash-live__frame iframe { display: block; }

.dash-live.live .dash-live__fallback { display: none; }

@media (max-width: 767px) {
  .dash-live.live .dash-live__frame iframe {display: none;}
  .dash-live.live .dash-live__fallback {display: block;}
}

@media (max-width: 1239px) {
  .dash-section {padding-top: 48px; padding-bottom: 52px;}
  .dash-body {display: block; max-width: 720px;}
  .dash-header {margin-bottom: 20px;}
  .dash-points {margin-bottom: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  align-items: start;}
  .dash-points li {border-bottom: none;}
  .dash-point__row {padding: 8px 0;}
}

@media (max-width: 599px) {
  .dash-points {grid-template-columns: 1fr;}
  /* Not enough room for the URL in the window bar; keep title + chip on one line */
.dash-live__window .app-sub {display: none;}
  .dash-live__window .app-title {white-space: nowrap;}
}

@media (prefers-reduced-motion: reduce) {
  .dash-point__chev, .dash-point__detail {transition: none;}
}

    /* ── Booking Section ── */

.booking-section .section-header,
    .booking-section .section-header h2,
    .booking-section .section-header p {
text-align: center;
max-width: none;
    }

.booking-section {
background-color: var(--media);
padding: var(--band) var(--pad-x) var(--band-sm);
border-top: 1px solid rgba(var(--crema-rgb), 0.15);
border-bottom: 1px solid rgba(var(--crema-rgb), 0.15);
scroll-margin-top: 80px;
    }

.booking-subhead {
color: rgba(var(--crema-rgb), 0.7);
font-family: var(--font-body);
font-size: var(--fs-body);
margin-top: 10px;
    }

.booking-trust {
color: var(--honey);
font-family: var(--font-body);
font-size: var(--fs-xs);
letter-spacing: 0.04em;
margin-top: 8px;
    }

.booking-mobile-fallback {
display: none;
text-align: center;
color: rgba(var(--crema-rgb), 0.6);
font-family: var(--font-body);
font-size: var(--fs-sm);
text-decoration: underline;
margin-top: 16px;
    }

@media (max-width: 640px) {
  .booking-mobile-fallback {display: block;}
}

.booking-embed {
width: 100%;
/* Cal lays its booker out at its own width and pins it to the left of
   whatever box it is given. Its three-column view stops growing at about
   900px, so a full-content-width box left it stranded with 500px of empty
   section beside it.

   900px is where it renders that view at 538px tall, which is what the
   min-height below reserves and what the crop is tuned against. Narrower
   and it collapses to a single tall column; wider and it just leaves a
   bigger gap. */
max-width: 900px;
margin-inline: auto;
/* reserve the embed's visible height so the section never jumps while
   Cal loads (its own height, less the cropped strip) */
min-height: 510px;
    }

    /* Crops the attribution strip off the bottom of the Cal embed.
 clip-path trims the last --cal-crop px of the frame without changing
 layout or making the box scrollable. The strip it leaves behind is the
 same var(--media) as the section, so nothing shifts and nothing shows.
 Off below 1024px: Cal's narrow layout renders no strip to crop. */

.booking-embed__crop {
width: 100%;
--cal-crop: 0px;
clip-path: inset(0 0 var(--cal-crop) 0);
/* the clipped strip still occupies space, so take it back */
margin-bottom: calc(var(--cal-crop) * -1);
    }

.booking-embed__crop cal-inline {
/* beat Cal's inline height:inherit so the frame hugs its own content
   and stays pinned to the top, or the crop lands in the wrong place */
height: auto !important;
min-height: 0 !important;
max-height: none !important;
align-content: flex-start !important;
align-items: flex-start !important;
    }

@media (min-width: 1024px) {
  .booking-embed__crop {--cal-crop: 60px;}
}

.booking-embed iframe {
border: none !important;
outline: none !important;
width: 100% !important;
display: block;
    }

    /* ── FAQ Section ── */

.faq-section {
background-color: var(--cream-500);
padding: var(--band) var(--pad-x);
overflow: visible;
/* Every card sits at --faq-card-h and opens to --faq-card-h-open.
   The track reserves the open height, so the section never reflows. */
--faq-card-h: 256px;
--faq-card-h-open: 512px;
    }

.faq-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 28px;
position: relative;
z-index: 3;
    }

.faq-header h2 {
font-size: var(--fs-h1);
font-weight: 300;
color: var(--red);
letter-spacing: -0.02em;
line-height: 1.1;
    }

.faq-track-wrap {
position: relative;
height: var(--faq-card-h-open);
z-index: 2;
display: flex;
align-items: center;
overflow-y: visible;
    }

.faq-nav {
display: flex;
gap: 8px;
    }

.faq-nav button {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--dark-grey-500);
background: transparent;
color: var(--red);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
font-size: var(--fs-body);
    }

.faq-nav button:hover:not(.disabled) {
background-color: var(--red);
border-color: var(--red);
color: var(--white);
transform: scale(1.05);
    }

.faq-nav button.disabled {
opacity: 0.3;
cursor: default;
pointer-events: none;
    }

.faq-track {
display: flex;
gap: 12px;
align-items: center;
transition: transform 0.5s var(--ease-out-expo);
width: 100%;
    }

.faq-card {
flex: 0 0 calc((100% - 4 * 12px) / 5.35);
height: var(--faq-card-h);
background-color: var(--red);
border-radius: 14px;
padding: 28px 22px 22px;
color: var(--white);
cursor: pointer;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
transition: all 0.8s var(--ease-out-expo);
/* The card is its own query container. The track hands it 160px at
   1025px and 283px at 1680px, so the copy has to size off the card
   rather than the viewport. */
container-type: inline-size;
    }

/* Clips itself rather than pushing the tag row out through the bottom
   edge, if copy ever outgrows the card again. */
.faq-card__q {
margin-bottom: 0;
overflow: hidden;
    }

.faq-card__q-label {
font-family: var(--font-display);
font-size: var(--fs-h2);
font-weight: 300;
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 6px;
    }

.faq-card__q-text {
font-family: var(--font-display);
/* 15px in the narrowest card, --fs-h3 once the card clears 224px of
   copy width. Held at 22px it ran to five lines in a 160px card. */
font-size: clamp(0.9375rem, 9.8cqi, var(--fs-h3));
font-weight: 400;
line-height: 1.4;
letter-spacing: -0.01em;
    }

.faq-card__divider {
width: 100%;
height: 1px;
background-color: rgba(var(--crema-rgb), 0.15);
margin: 12px 0 0;
transition: opacity 0.4s ease;
opacity: 0;
    }

.faq-card:hover {
height: var(--faq-card-h-open);
    }

.faq-card:hover .faq-card__divider {
opacity: 1;
    }

.faq-card__a-wrap {
max-height: 0;
overflow: hidden;
transition: max-height 1s var(--ease-out-expo);
    }

.faq-card:hover .faq-card__a-wrap {
/* 320, not 280: the narrowest card wraps the longest answer to 298px. */
max-height: 320px;
    }

.faq-card__a-label {
font-family: var(--font-display);
font-size: var(--fs-h2);
font-weight: 300;
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 6px;
margin-top: 12px;
opacity: 0;
transform: translateY(12px);
transition: opacity 0.6s ease 0.15s, transform 0.6s var(--ease-out-expo) 0.15s;
    }

.faq-card:hover .faq-card__a-label {
opacity: 1;
transform: translateY(0);
    }

.faq-card__a-text {
/* Scales with the card on the same principle as the question, so the
   open answer still lands inside --faq-card-h-open. */
font-size: clamp(0.875rem, 7.2cqi, var(--fs-body));
line-height: 1.5;
font-family: var(--font-body);
color: rgba(var(--crema-rgb), 0.85);
    }

.faq-card__a-text .a-line {
display: block;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.5s ease, transform 0.6s var(--ease-out-expo);
    }

.faq-card:hover .faq-card__a-text .a-line:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }

.faq-card:hover .faq-card__a-text .a-line:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.35s; }

.faq-card:hover .faq-card__a-text .a-line:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }

.faq-card:hover .faq-card__a-text .a-line:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.65s; }

.faq-card__bottom {
margin-top: auto;
padding-top: 14px;
display: flex;
justify-content: space-between;
align-items: center;
    }

.faq-card__tag {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(var(--crema-rgb), 0.5);
background: rgba(var(--crema-rgb), 0.08);
padding: 3px 10px;
border-radius: var(--r-pill);
    }

.faq-card__num {
font-family: var(--font-display);
font-size: var(--fs-body);
opacity: 0.3;
    }

    /* Use Cases cards */

.usecase-card {
background-color: var(--clockwork);
border-radius: 18px;
padding: 36px 32px 28px;
display: flex;
flex-direction: column;
transition: transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1),
            box-shadow 0.55s cubic-bezier(0.25, 0.8, 0.25, 1),
            opacity 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
cursor: pointer;
position: relative;
z-index: 2;
    }

.usecase-card:hover {
transform: translateY(-6px) scale(1.015);
box-shadow: 0 20px 50px rgba(var(--media-rgb), 0.25);
    }

    /* De-emphasized state */

.usecase-card.deemphasized {
transform: scale(0.98);
opacity: 0.55;
    }

.usecase-card__title {
font-family: 'F37 Bobby', var(--font-body);
font-weight: 300;
font-size: var(--fs-h2);
color: var(--crema);
line-height: 1.1;
white-space: nowrap;
    }

    /* Use-case background transition on card hover */

#tab-fitout > section {
position: relative;
background-color: transparent;
    }

    /* BG layers live inside #tabbed-section, cover it entirely */

.usecase-bg-layer {
position: absolute;
inset: 0;
z-index: 3;
opacity: 0;
transition: opacity 0.6s ease;
background-size: cover;
background-position: center;
pointer-events: none;
    }

.usecase-bg-layer.active {
opacity: 1;
    }

.usecase-bg-overlay {
position: absolute;
inset: 0;
z-index: 4;
background: linear-gradient(
  180deg,
  rgba(var(--media-rgb), 0.85) 0%,
  rgba(var(--media-rgb), 0.65) 35%,
  rgba(var(--media-rgb), 0.72) 100%
);
opacity: 0;
transition: opacity 0.6s ease;
pointer-events: none;
    }

.usecase-bg-overlay.active {
opacity: 1;
    }

#tab-fitout > section > * {
position: relative;
z-index: 5;
    }

a.footer-cta-btn {
display: inline-block;
background-color: var(--clockwork);
color: var(--crema);
padding: 10px 26px;
border-radius: var(--r-pill);
font-size: var(--fs-body);
font-family: var(--font-body);
text-decoration: none;
letter-spacing: 0.01em;
white-space: nowrap;
transition: transform 0.2s ease;
    }

    /* All panels stack in the same grid cell — tallest drives the height */

#tabbed-section {
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: minmax(0, 1fr);
position: relative;
overflow: hidden;
background-color: var(--cream-500);
    }

    /* Stagger load-in animation */

@keyframes wfStepIn {
from { opacity: 0; transform: translateY(12px); }
to   { opacity: 1; transform: translateY(0); }
    }

.compare-col {
border-radius: 16px;
padding: 28px 28px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

.compare-col:hover {
transform: scale(1.02);
box-shadow: 0 8px 28px rgba(var(--media-rgb), 0.12);
    }

@keyframes fadeIn {
from { opacity: 0; transform: translateY(6px); }
to   { opacity: 1; transform: translateY(0); }
    }

@keyframes tabFadeIn {
from { opacity: 0; transform: translateY(32px); }
to   { opacity: 1; transform: translateY(0);    }
    }

@keyframes cardFadeIn {
from { opacity: 0; transform: translateX(-24px); }
to   { opacity: 1; transform: translateX(0); }
    }

@keyframes pillsFadeIn {
from { opacity: 0; }
to   { opacity: 1; }
    }

    /* Social icon boxes */

.social-icon {
width: 30px;
height: 30px;
border: 1px solid rgba(var(--crema-rgb), 0.2);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: var(--fs-xs);
font-family: var(--font-body);
    }

    /* FAQ tapped state — mirrors :hover for touch devices */

.faq-card.tapped { height: var(--faq-card-h-open); }

.faq-card.tapped .faq-card__divider { opacity: 1; }

.faq-card.tapped .faq-card__a-wrap { max-height: 320px; }

.faq-card.tapped .faq-card__a-label { opacity: 1; transform: translateY(0); }

.faq-card.tapped .faq-card__a-text .a-line:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }

.faq-card.tapped .faq-card__a-text .a-line:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.35s; }

.faq-card.tapped .faq-card__a-text .a-line:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }

.faq-card.tapped .faq-card__a-text .a-line:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.65s; }

@media (min-width: 768px) and (max-width: 1024px) {
  .contact-section {grid-template-columns: 1fr 1fr; gap: 32px;}
  .image-gallery {grid-template-columns: repeat(2, 1fr);}
  .values-grid {grid-template-columns: 1fr 1fr;}
  .pricing-grid {grid-template-columns: 1fr 1fr;}
  .pricing-card:first-child {grid-column: 1 / -1;}
  .calc-wrap {grid-template-columns: 1fr; gap: 32px;}
  .usecase-card:nth-child(3) {grid-column: 1 / -1; max-width: 50%; margin: 0 auto;}
  .section-header h2, .process-heading, .faq-header h2, .dash-header h2 {font-size: var(--fs-h1);}
  .hero-content h1 {font-size: var(--fs-h1);}
  /* Fewer, wider FAQ cards so the uniform heights still fit the copy */
  .faq-card {flex: 0 0 calc((100% - 2 * 12px) / 3.35);}
}

@media (max-width: 767px) {
  /* Dashboard: pins already reflow to a stacked list at ≤1024px */

/* Nav */
.nav-center {display: none;}
  /* Hero */
  .hero-content h1 {font-size: var(--fs-h1);}
  .hero-content p {max-width: 100%;}
  .hero-secondary-cta {bottom: 8px;}

  /* Image gallery */
.image-gallery {grid-template-columns: 1fr;}
  .image-gallery img {height: 200px;}
  /* Contact */
.contact-section {grid-template-columns: 1fr; gap: 24px; padding: var(--band-sm) var(--pad-x); height: auto; flex: none;}
  .contact-left {height: auto;}
  .contact-photo {min-height: 220px;}
  /* Values */
.values-grid {grid-template-columns: 1fr; gap: 20px;}
  /* Pricing */
.pricing-grid {grid-template-columns: 1fr; gap: 20px;}
  .pricing-card__title {font-size: var(--fs-h1);}
  /* Dashboard section — stack everything, flow goes vertical */
.dash-header h2 {font-size: var(--fs-h2);}
  /* Usecase grid */
  .usecase-card {padding: 28px 24px 24px;}
  .usecase-bg-layer,
.usecase-bg-overlay {display: none !important;}
  .usecase-card.deemphasized {transform: none !important; opacity: 1 !important;}

  /* FAQ — horizontal scroll on mobile */
.faq-track-wrap {height: auto; min-height: auto; overflow: visible; display: flex; align-items: stretch;}
  .faq-track {flex-direction: row; gap: 10px; transform: none !important; transition: none; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x mandatory; padding: 4px 0 16px;}
  .faq-track::-webkit-scrollbar {display: none;}
  .faq-card {flex: 0 0 100%; height: auto; min-height: auto; scroll-snap-align: start;}
  .faq-card:hover, .faq-card.tapped {height: auto;}
  .faq-nav {display: none;}
  /* Process step text — prevent overflow at narrow widths */
.process-reveal {height: auto; min-height: 60px;}
  /* Calculator — stack result card under the sliders on mobile */
.calc-wrap {grid-template-columns: 1fr; gap: 32px;}
  .calc-result {padding: 28px 22px;}
  /* Pricing CTA — centered and stacked */
.pricing-card__footer {gap: 10px;}
  .pricing-card__cta {width: 100%; text-align: center; padding: 12px 24px; font-size: var(--fs-body);}
  /* Hide the section footer CTA on mobile */
.handoff-cta {display: none;}
  /* Footer */
.footer-columns {grid-template-columns: 1fr; gap: 24px;}
  /* Typography */
.section-header h2,
.process-heading,
.faq-header h2,
.dash-header h2 {font-size: var(--fs-h2);}
  .hero-content h1 {font-size: var(--fs-h1);}

}

@media (max-width: 600px) {
  .pain-grid {grid-template-columns: 1fr;}
}

@media (max-width: 359px) {
  .calc-field__value {font-size: var(--fs-h3);}
}

@media (max-width: 430px) {
  .hero-content h1 {font-size: var(--fs-h2);}
  .hero-content p {font-size: var(--fs-body);}
  /* Tighten section padding */
.contact-section {padding: var(--band-sm) var(--pad-x);}
  .handoff-section {padding: var(--band-sm) var(--pad-x);}
  .values-section {padding: var(--band-sm) var(--pad-x);}
  .pricing-section {padding: var(--band-sm) var(--pad-x);}
  .calc-section {padding: var(--band-sm) var(--pad-x) var(--band-md);}
  .faq-section {padding: var(--band-sm) var(--pad-x);}
  /* Tighten typography */
.section-header h2, .process-heading, .faq-header h2, .dash-header h2 {font-size: var(--fs-h2);}
  .section-header p {font-size: var(--fs-body);}
  .pricing-card__title {font-size: var(--fs-h2);}
  /* Fix process diagram on very small screens */
.process-reveal {min-height: 50px;}
  /* FAQ cards full-width: one per swipe, no clipped peek */
.faq-card {flex: 0 0 100%;}
  .pricing-card {padding: 22px 18px 20px;}
}

@media (hover: none) {
  .pricing-card:hover {transform: none;}
  .compare-col:hover {transform: none; box-shadow: none;}
  .usecase-card:hover {transform: none; box-shadow: none;}
  .btn-primary:hover {transform: none;}
}