/* ============================================================
   Home page layer — services masonry link, pillar row, hub grid
   (system styles live in playground.css)
   ============================================================ */

.services-more { margin-top: var(--gap); }

/* mobile: numbered services read 01→06 top-to-bottom */
@media (max-width: 899px) {
  .masonry .masonry-col { display: contents; }
  .masonry .card--purple { order: 1; }
  .masonry .card--amber { order: 2; }
  .masonry .card--green { order: 3; }
  .masonry .card--blue { order: 4; }
  .masonry .card--white { order: 5; }
  .masonry .card--orange { order: 6; }
}

/* AR mode: card content is English — tag pill stays on the text's side */
html[dir="rtl"] .masonry .block-card,
html[dir="rtl"] .pillar-row .block-card,
html[dir="rtl"] .hub-card { direction: ltr; }

/* why-us: four pillars in one row */
.pillar-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  align-items: stretch;
}
.pillar-row .block-card { display: flex; flex-direction: column; align-items: flex-start; }
@media (max-width: 1099px) { .pillar-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .pillar-row { grid-template-columns: 1fr; } }

/* (hub-grid/hub-card moved to playground.css — used on multiple pages) */

/* ---- trusted by: continuous logo marquee (left → right, edge fades) ---- */
.clients-strip {
  overflow: hidden;
  padding-block: 6px;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.clients-track {
  display: flex; width: max-content;
  animation: clients-scroll var(--dur, 36s) linear infinite;
}
.clients-strip:hover .clients-track,
.clients-strip:focus-within .clients-track { animation-play-state: paused; }
@keyframes clients-scroll {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
.clients-seq { display: flex; align-items: center; flex-shrink: 0; }
/* client marks arrive with mixed backgrounds (some white, some black), so each
   sits in an identical white tile — uniform size, one hairline, one radius */
.client-cell {
  display: flex; align-items: center; justify-content: center;
  width: 190px; height: 104px; flex-shrink: 0;
  padding: 16px; margin-inline-end: var(--gap);
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.client-cell:hover {
  border-color: rgba(255, 107, 0, 0.5);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}
.client-cell img {
  max-width: 100%; max-height: 72px; width: auto; height: auto;
  object-fit: contain; border-radius: 8px;
  /* client marks stay in full brand colour — the uniform white tile is what
     holds the row together, not desaturation */
  transition: transform 0.28s ease;
}
.client-cell:hover img { transform: scale(1.04); }
/* reduced motion: a calm wrapped grid, no duplicate set */
html.motion-off .clients-track { animation: none; width: auto; flex-wrap: wrap; gap: var(--gap); }
html.motion-off .clients-seq { flex-wrap: wrap; gap: var(--gap); }
html.motion-off .clients-seq[aria-hidden="true"] { display: none; }
@media (max-width: 599px) { .client-cell { width: 148px; height: 86px; padding: 12px; } }

/* ---- what clients say ---- */
.testimonials-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--gap); align-items: start;
}
.testimonial-card { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.testimonial-card blockquote { margin: 0; font-size: 1.02rem; line-height: 1.65; }
.testimonial-card figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.testimonial-card figcaption strong { font-size: 0.95rem; }
.testimonial-card figcaption span { font-size: 0.82rem; opacity: 0.75; }
@media (max-width: 1099px) { .testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 699px) { .testimonials-grid { grid-template-columns: 1fr; } }

/* the marquee track is intentionally wider than the viewport; make sure the
   strip clips it on the narrowest phones so the page never scrolls sideways */
.clients-strip { overflow: hidden; max-width: 100%; }
#clients { overflow: hidden; }


/* THE DEAL deck removed — the hero is now the pinned conveyor (end of file) */

/* ============================================================
   presentation pass — verified findings from the homepage audit
   ============================================================ */

/* Touch has neither :hover nor :focus-within, so the client marquee's 32s
   loop can never be stopped, examined or steered — WCAG 2.2.2, Level A.
   Once it only moves on a swipe it is no longer auto-moving content.
   (main.js carries a 2.2.2 pause handler for .marquee/.marquee-toggle, but
   that markup exists in zero HTML files — it was never built.) */
@media (hover: none) {
  .clients-strip {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    /* proximity, not mandatory — tiles are 148px here and mandatory
       snapping makes a fast flick feel stuck */
    scroll-snap-type: x proximity;
    mask-image: none; -webkit-mask-image: none;
  }
  .clients-track { animation: none; width: max-content; }
  .client-cell { scroll-snap-align: start; }
  .clients-seq[aria-hidden="true"] { display: none; }
}

/* Mobile: the services masonry runs 3,225px at 375px — 31% of the whole
   page, immediately after the hero. The blueprint frame is 44% of each card
   while the copy that sells is 36%, so the frame hugs its drawing instead of
   stretching card-wide. .bp-art is already margin-inline:auto, so the
   narrower frame reads deliberate rather than truncated. */
@media (max-width: 599px) {
  .masonry .blueprint--sm { max-width: 212px; padding: 8px 10px 4px; margin-bottom: 12px; }
  .masonry .block-card .card-tag { margin-bottom: 14px; }
}

/* "Why clients come back" is the flattest band on the page: no blueprint, no
   hue glow, and .card--white is the only hue with no paired .card-tag rule,
   so its numerals fell back to an outline 3.5x fainter than every other card.
   An ember rule gives the band the same "these are the studio's terms" signal
   the trust bar uses. Scoped to .pillar-row, so service card 05, the projects
   grid and the quote tool's card--white tiles are untouched. */
.pillar-row .block-card::before {
  content: ""; display: block;
  width: 22px; height: 2px; border-radius: 2px;
  background: var(--ember); margin-bottom: 14px;
}
.pillar-row .card-tag {
  color: var(--amber);
  border-color: rgba(255, 178, 30, 0.5);
  margin-bottom: 18px;
}
/* a quarter column cannot hold 15.2px body copy at 22 characters a line —
   step the type down with it. min-height on the h3 is load-bearing: it keeps
   all four paragraph tops aligned instead of splitting into two groups when
   a title wraps at ~1200px. */
.pillar-row .block-card { padding: clamp(20px, 2vw, 26px); }
.pillar-row .block-card h3 { font-size: clamp(1.1rem, 1.45vw, 1.35rem); min-height: 2.4em; }
.pillar-row .block-card p { font-size: 0.9rem; line-height: 1.6; }

/* ============================================================
   THE PAPER HERO — a white sheet on the dark canvas.
   Composition: the Monument (typography is the design). Motion:
   the interactive 3D field (hero-3d.js) floating over the sheet —
   the scroll dive was retired with it. The sheet itself gets one
   quiet entrance rise and then holds still.
   ============================================================ */
.paper-hero { position: relative; }
.ph-stage {
  min-height: calc(100dvh - 90px);
  display: grid; place-items: center; position: relative;
  padding: clamp(18px, 3vh, 40px) 0;
}

/* the sheet: local light-canvas tokens so nothing dark-side leaks in */
.ph-sheet {
  --ph-ink: #17120c;
  --ph-muted: #6d6457;
  --ph-line: rgba(23, 18, 12, 0.14);
  width: 100%;
  box-sizing: border-box;
  background: #faf8f4;
  border-radius: var(--radius);
  padding: clamp(34px, 6vh, 76px) clamp(26px, 5vw, 84px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  color: var(--ph-ink);
}
.ph-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ph-muted);
}
.ph-kicker::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ember);
}
.ph-title {
  font-family: var(--font-display);
  font-size: clamp(2.9rem, 7.6vw, 6.4rem);
  line-height: 0.98; letter-spacing: -0.035em; font-weight: 800;
  color: var(--ph-ink); margin-top: 26px;
}
.ph-line { display: block; }
.ph-accent { font-style: normal; color: var(--orange); }
.ph-sub {
  margin-top: 24px; color: var(--ph-muted);
  font-size: 1.05rem; line-height: 1.7; max-width: 56ch; font-weight: 480;
}
/* the typed rotator inherits dark-canvas colours — re-ink it for paper */
.ph-sheet .ph-type { margin-top: 14px; color: var(--ph-ink); }
.ph-sheet .ph-type .type-word { color: var(--orange); }
.ph-sheet .ph-type .type-caret { background: var(--orange); }
.ph-ctas { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 30px; }
.ph-ghost {
  display: inline-flex; align-items: center; min-height: 48px;
  padding: 0 26px; border-radius: var(--pill);
  border: 1.5px solid rgba(23, 18, 12, 0.3);
  color: var(--ph-ink); font-weight: 700; font-size: 0.92rem;
  text-decoration: none;
  transition: border-color var(--dur-ui) var(--ease-fluid), color var(--dur-ui) var(--ease-fluid);
}
.ph-ghost:hover { border-color: var(--orange); color: var(--orange); }
.ph-facts {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px 34px;
  margin-top: clamp(26px, 4.5vh, 46px); padding: 18px 0 0;
  border-top: 1px solid var(--ph-line);
}
.ph-facts li { font-size: 0.86rem; color: var(--ph-muted); }
.ph-facts b {
  font-family: var(--font-display); font-weight: 800;
  color: var(--ph-ink); margin-inline-end: 6px;
}
/* entrance: the sheet rises once on load — same beat as the ledger heroes */
/* no entrance motion on the sheet — the owner asked the home hero to hold
   still on load; the 3D field supplies the life */