/* The business layer: hero actions, the capabilities suite and the photo tiles.
 *
 * Owner, 2026-09-30: keep the artistic site, but make it read like a business — say what we
 * sell up top, book a call from anywhere, list capabilities plainly with a photo each. The
 * structure follows Social Fancy's home page (capabilities suite, then photo tiles); the words
 * are ours. The capabilities first sat on a light "paper" band; owner, 2026-10-02: "blend the
 * white section, it looks really out of place". They now sit in the night palette and take the
 * page's travelling colours (--bg, --accent, --body-text from site.js) like every other section.
 */

/* ------------------------------------------------------------ hero actions */

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
/* .btn and .cap-actions moved to brand.css (shared by every page) 2026-10-01 */
.hero-call {
  margin-top: var(--space-4);
  font-size: 1rem;
  color: var(--body-text, #b4b7bb);
}
.hero-call a { color: var(--text); border-bottom: 1px solid var(--field); }
.hero-quiz { margin-top: var(--space-2); font-size: 1rem; color: var(--body-text, #b4b7bb); }
.hero-quiz a { color: var(--accent); border-bottom: 1px solid currentColor; }

/* Split hero (home pages). Owner, 2026-10-06: "clean up the hero, make the subheadings
   populate on scroll — they make the hero look cumbersome." The first screen holds only the
   place, the headline and the two buttons; the lede, the price, the phone line and the quiz
   line sit just under the fold (.hero-more) and rise in as the visitor scrolls (site.js,
   .rise-soft). They are always in the HTML and visible without JS: only the .js-anim class
   site.js adds can hold them back, and never under reduced motion.
   The first screen is exactly one viewport tall, so .hero-more never shows at first glance;
   the buttons end above the bottom pills and the consent banner (390x844: pills at ~612). */
.hero--split {
  flex-direction: column;
  align-items: stretch;
  padding-top: 0;
  padding-bottom: var(--space-8);
}
/* Owner, 2026-10-10: the home hero was a black screen on a phone (brightness 0.42 on a night
   clip, and the picture stopped at one viewport while the hero ran longer). The clip now runs
   the hero's full height, at 0.84 brightness (the walking clip measures ~12% darker than the old loop), with a shade only where the headline sits; the
   nav goes clear over it on phones (data-bleed, brand.css). The first screen still shows only
   place, headline and buttons. */
.hero--split .hero-img,
.hero--split .hero-fog { bottom: 0; height: auto; overflow: hidden; }
.hero--split .hero-img img,
.hero--split .hero-img video,
.hero--split .hero-img canvas { filter: brightness(0.84) contrast(1.08) saturate(0.95); object-position: 50% 42%; }
/* Depth scene (hero-scene.js, owner 2026-10-10: "more 3d like an entire scene"). The canvas
   draws the clip through its depth map and sits over the <video>, which keeps playing as the
   texture and goes transparent once the first frame is drawn. Same filter as the clip, so the
   brightness is the one measured above. */
.hero-scene-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.hero-img.is-scene video { opacity: 0; }
.hero--split .hero-img::after {
  background: linear-gradient(to top, var(--bg) 0%, rgba(5, 7, 10, 0.5) 30%, rgba(5, 7, 10, 0.12) 62%, rgba(5, 7, 10, 0.28) 100%);
}
@media (max-width: 760px) {
  .hero--split .hero-img img,
  .hero--split .hero-img video { object-position: 50% 48%; }
  .hero--split .hero-img::after {
    background: linear-gradient(to top, var(--bg) 0%, rgba(5, 7, 10, 0.62) 34%, rgba(5, 7, 10, 0.16) 64%, rgba(5, 7, 10, 0.3) 100%);
  }
}
/* The headline block ends ~96px (phone) / ~120px (wide) under the buttons, so the lede
   follows them closely once the visitor scrolls. The block is shorter than the viewport so the
   buttons stay clear of the bottom pills and the consent banner (pills at ~612px at 390x844);
   the lede waits just under it, held back by .rise-soft until it reaches 72% of the viewport
   (site.js), so the first screen still shows only place, headline and buttons. */
.hero--split .hero-type {
  min-height: calc(100svh - 12rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--pad) + 4.5rem) 0 5.25rem;
}
@media (min-width: 1280px) {
  .hero--split .hero-type { min-height: calc(100svh - 8rem); padding-bottom: 6.75rem; }
}
.hero--split h1 { font-size: clamp(2.55rem, 5.6vw, 4.8rem); line-height: 1.08; }
/* The French lines run ~30% longer; at the English size each one wraps in two on a phone. */
.hero--split h1:lang(fr) { font-size: clamp(2.05rem, 5.6vw, 4.8rem); }
.hero--split .hero-actions { margin-top: var(--space-6); }
.hero-more {
  position: relative;
  z-index: 2;
  margin-left: var(--rail);
  max-width: min(92%, 46rem);
}
.hero-more .hero-sub { margin-top: 0; }

/* ------------------------------------------------------- capabilities suite */

/* No background of its own: the page's colour, which shifts with the scroll, shows through,
   so the suite reads as part of the page rather than a block pasted onto it. */
.capabilities {
  color: var(--text);
  padding: var(--space-8) var(--pad);
  text-align: center;
}
.capabilities h2.cap-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0;
}
.cap-rule {
  width: 64px;
  height: 1px;
  background: var(--text);
  border: 0;
  margin: var(--space-5) auto;
}
.cap-intro {
  max-width: 40rem;
  margin: 0 auto;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.7;
  color: var(--body-text, #b4b7bb);
}
.cap-grid {
  list-style: none;
  padding: 0;
  margin: var(--space-7) auto 0;
  max-width: 72rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-7) var(--space-6);
}
.cap-grid li { display: flex; flex-direction: column; align-items: center; }
.cap-icon {
  width: 56px;
  height: 56px;
  stroke: var(--accent);
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cap-grid h3 {
  font-family: var(--caps);
  font-weight: 400;
  font-size: clamp(0.88rem, 0.82rem + 0.25vw, 1.02rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: var(--space-4) 0 var(--space-2);
  color: var(--text);
}
.cap-grid p {
  margin: 0;
  max-width: 22rem;
  line-height: 1.7;
  color: var(--body-text, #b4b7bb);
}
.cap-grid .cap-price {
  margin-top: var(--space-2);
  font-family: var(--caps);
  /* Michroma is wide: this line ("Site score free · Baseline Month $290 CAD") must fit one
     line on a 390px phone, where the two underlined lines used to overlap. */
  font-size: clamp(0.6rem, 2.5vw, 0.78rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cap-grid .cap-price a { display: inline-block; line-height: 1.6; color: var(--accent); border-bottom: 1px solid currentColor; padding: 0.6rem 0; }
/* Buttons and keyboard focus use the site-wide styles (brand.css). The ink overrides that
   were here only made sense on the paper band, and the focus rule pointed .tiles links at
   --ink-line, which is undefined outside .capabilities: no focus ring on the photo tiles. */

/* --------------------------------------------------------------- photo tiles */

.tiles {
  padding: var(--space-8) 0 var(--space-7);
  text-align: center;
}
.tiles h2.tiles-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.7rem, 1.3rem + 2vw, 2.6rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 var(--pad);
}
.tiles .cap-rule { background: var(--text); }
.tiles-intro { max-width: 38rem; margin: 0 auto var(--space-6); padding: 0 var(--pad); color: var(--body-text, #b4b7bb); line-height: 1.7; }
.tile-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.tile-row li { display: flex; flex-direction: column; }
.tile-row picture, .tile-row img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.tile-row h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  margin: var(--space-4) var(--space-4) var(--space-2);
  color: var(--text);
}
.tile-row p { margin: 0 var(--space-4); color: var(--body-text, #b4b7bb); line-height: 1.6; }
@media (max-width: 1000px) { .tile-row { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-6); } }
@media (max-width: 560px)  { .tile-row { grid-template-columns: 1fr; } }

.book-band {
  text-align: center;
  padding: var(--space-6) var(--pad) var(--space-8);
}
.book-band p { color: var(--body-text, #b4b7bb); margin: 0 auto var(--space-4); max-width: 36rem; line-height: 1.7; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* The fixed section rail sits in the left gutter on wide screens (--rail). The other sections
   indent past it; these two do the same so the rail never lies on top of content. */
.capabilities { padding-left: calc(var(--pad) + var(--rail)); }
.tiles .tile-row { margin-left: var(--rail); }
.tiles { padding-left: var(--rail); }
.tiles .tile-row { margin-left: 0; }

/* Seven capabilities: Analysis & Strategy leads on its own row (it comes before everything
   else we do), then the six services in rows of three, two or one. */
.cap-grid > li:first-child { grid-column: 1 / -1; }
.cap-grid > li:first-child p { max-width: 30rem; }

/* The hero is now long enough to reach the rail's height, so it indents past the rail like
   every other section (the rail is 0px wide on phones, so this only moves wide screens). */
.hero-type { margin-left: var(--rail); }

/* ------------------------------------------------------------------ our work
   A real client site, shown as it is live. Facts under it are re-measured before each
   change (score, alt text, live date); nothing here is a projected result. */
.work-case { padding: var(--space-8) var(--pad) var(--space-7) calc(var(--pad) + var(--rail)); }
.work-case h2.tiles-title { margin: 0; text-align: center; }
.work-case .cap-rule { background: var(--text); }
.case-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-6);
  align-items: center;
  max-width: 72rem;
  margin: 0 auto;
}
.case-shots { position: relative; }
.case-shots .shot-desk img { display: block; width: 100%; height: auto; border: 1px solid var(--field); }
.case-shots .shot-phone { position: absolute; right: -4%; bottom: -10%; width: 26%; }
.case-shots .shot-phone img { display: block; width: 100%; height: auto; border: 1px solid var(--field); border-radius: 18px; box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.case-body h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); margin: 0 0 var(--space-2); color: var(--text); }
.case-body .case-where { font-family: var(--caps); letter-spacing: .08em; font-size: .75rem; color: var(--muted); margin: 0 0 var(--space-4); text-transform: uppercase; }
.case-body ul { margin: 0 0 var(--space-5); padding-left: 1.1rem; color: var(--body-text, #b4b7bb); line-height: 1.7; }
.case-body li + li { margin-top: var(--space-2); }
@media (max-width: 900px) {
  .case-grid { grid-template-columns: 1fr; }
  .case-shots { margin-bottom: var(--space-6); }
}
.work-case h2.tiles-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.7rem, 1.3rem + 2vw, 2.6rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.work-case .tiles-intro { margin-bottom: var(--space-7); }