/* Sivra Studios — page-specific css (site-src/css/pages/*.css concatenated by build.py; keep to overrides only) */
/* ===== 404.css ===== */
/* 404 — page-specific overrides only (the 404 Block itself lives in components.css). Concatenated into site/css/pages.css by build.py. */
.not-found_body { color: var(--muted); }
.not-found_title { max-width: 14ch; text-wrap: balance; }

/* ===== areas-tpl.css ===== */
/* Local SEO Area template — /areas/web-design-* (Figma 47:1955). No page-specific overrides: after the owner's 2026-10-07 pass
   (Logo Strip, Stats Row and Testimonials removed) every section uses the shared library rules; the Work Grid ("Our Work") uses
   the shared .bento-grid rules. */

/* ===== coming-soon.css ===== */
/* Coming Soon — /coming-soon/ (Figma 189:1447 desktop · 189:1487 mobile; motion spec: Webflow kit design-system/motion.md › Coming Soon).
   Standalone page (no Nav / Footer). Everything is scoped to .coming-soon_* / .is-coming-soon. The CSS is the FINAL state:
   js/coming-soon.js sets the intro's start state with gsap.set, so no-JS and reduced-motion visitors see the design as is.
   Marks are plain paper at NORMAL blend (Figma sign-off note); only the cursor dot uses difference. Intro: js/coming-soon.js
   (owner audit #4 — large logo letters rise on ink, gradient fades up, logo travels into the left cluster; no hairline). */
body:has(.is-coming-soon) { background: var(--sv-ink); }
.page-wrapper.is-coming-soon { background: var(--sv-ink); color: var(--sv-paper); }

.coming-soon_component {
  position: relative; height: 100vh; height: 100svh; min-height: 32rem; overflow: hidden;
  background: var(--sv-ink); color: var(--sv-paper);
}
.cs-js .coming-soon_bg, .cs-js .coming-soon_line { visibility: hidden; }   /* JS-added class only (released by coming-soon.js / 4 s) */

/* ---------- background: brand gradient (cover), rest scale 1.06 = 3% overscan per side for breathe + parallax ---------- */
.coming-soon_bg { position: absolute; inset: 0; clip-path: inset(0% 0% 0% 0%); }
.coming-soon_bg-picture, .coming-soon_bg-image { width: 100%; height: 100%; }
.coming-soon_bg-image { object-fit: cover; object-position: 50% 50%; transform: scale(1.06); will-change: transform; }

.coming-soon_grain {
  position: absolute; top: -256px; left: -256px; width: calc(100% + 512px); height: calc(100% + 512px);
  background: url("/img/coming-soon/cs-grain.png") repeat; background-size: 256px 256px;
  opacity: .06; pointer-events: none; will-change: transform;
}
.coming-soon_glow {
  position: absolute; top: 0; left: 0; width: 600px; height: 600px; margin: -300px 0 0 -300px; border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(83, 104, 120, .9) 0%, rgba(235, 241, 245, .38) 42%, rgba(235, 241, 245, 0) 100%);
  mix-blend-mode: screen; opacity: 0; pointer-events: none; will-change: transform, opacity;
}
.coming-soon_cursor {
  position: absolute; top: 0; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--sv-paper); mix-blend-mode: difference; opacity: 0; pointer-events: none; will-change: transform;
}
.coming-soon_component.is-fine { cursor: none; }

/* ---------- the line: one 20px band on the vertical centre (desktop x 64 / 50% / right 64) ---------- */
.coming-soon_line { position: absolute; inset: 0; pointer-events: none; }
.coming-soon_cluster {
  position: absolute; top: 50%; height: 20px; margin-top: -10px; display: flex; align-items: center; gap: 48px;
}
.coming-soon_cluster.is-left { left: 64px; }
.coming-soon_cluster.is-centre { left: 50%; transform: translateX(-50%); } /* the logo, dead centre (owner audit #5) */
.coming-soon_refuse { display: flex; align-items: center; gap: 14px; } /* bar + "Refuse to blend in", left end on desktop */
.coming-soon_cluster.is-right { right: 64px; }

.coming-soon_logo-wrap { display: flex; align-items: center; gap: 6px; }
.coming-soon_logo { width: auto; height: 24px; overflow: hidden; }
.coming-soon_logo.is-intro { position: absolute; top: 0; left: 0; z-index: 2; color: var(--sv-paper); pointer-events: none; will-change: transform; } /* the large intro clone (coming-soon.js) */
.coming-soon_logo-part { transform-box: fill-box; }
.coming-soon_mark { display: flex; align-items: center; gap: 6px; }
.coming-soon_monogram { width: auto; height: 20px; }
.coming-soon_slash { display: block; width: 2px; height: 22px; margin: 0 3.7px; background: currentColor; transform: rotate(20deg); }

.coming-soon_dots { display: flex; flex: none; }
.coming-soon_dot { width: 20px; height: 20px; border-radius: 50%; background: currentColor; }
.coming-soon_tick { flex: none; width: 2px; height: 20px; background: currentColor; }
.coming-soon_bar { flex: none; width: 40px; height: 20px; background: currentColor; transform-origin: 0 50%; }
.coming-soon_matrix { flex: none; width: 53px; height: 20px; }

.coming-soon_caption {
  display: flex; flex-direction: column; font-size: 11px; line-height: 13px; font-weight: var(--sv-weight-medium);
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.coming-soon_caption-line { display: block; overflow: hidden; }
.coming-soon_char { display: inline-block; }

/* ---------- tablet: tighter clusters so the centre cluster never collides ---------- */
@media screen and (max-width: 991px) {
  .coming-soon_cluster { gap: 24px; }
  .coming-soon_cluster.is-left { left: 32px; }
  .coming-soon_cluster.is-right { right: 32px; }
}

/* ---------- mobile (Figma 390x844): echo cluster top-right, Logo 32px above the line, line 148px off the bottom ---------- */
@media screen and (max-width: 767px) {
  .coming-soon_cluster { gap: 24px; }
  .coming-soon_cluster.is-left { left: 24px; right: 24px; top: auto; bottom: 148px; margin-top: 0; }
  .coming-soon_refuse { order: 3; margin-left: auto; } /* phones keep the old row: dots · tick · Coming Soon ... Refuse to blend in */
  .coming-soon_cluster.is-centre { left: 24px; transform: none; top: auto; bottom: 212px; margin-top: 0; height: auto; } /* logo above the row */
  .coming-soon_cluster.is-right { right: 24px; top: 56px; margin-top: 0; }
  .coming-soon_logo { height: 32px; }
  .coming-soon_logo-wrap .coming-soon_slash { display: none; }
}

/* ===== contact.css ===== */
/* Contact — page-specific overrides only (everything else lives in components.css). Concatenated into site/css/pages.css by build.py. */
/* Contact Card opens the page in its Tint surface (Figma 47:1700: ink @4% fill, no outline, paper inputs) — a component variant
   (.contact-card_component.is-tint, components.css), so nothing page-specific is needed here. */

/* ===== home.css ===== */
/* Home — page-specific overrides only (everything else lives in components.css). Concatenated into site/css/pages.css by build.py. */

/* ===== industries-tpl.css ===== */
/* Industry template (/industries/*) — page-specific overrides only. Concatenated into site/css/pages.css by build.py, so every
   rule is scoped to this template via the page combo .page-wrapper.is-industry. The Work Grid (Figma 104:4173 + 104:4181) is
   styled once in components.css (.work-grid_component). */

/* Statement Block and Stats Row removed (owner 2026-10-07) — no instance combos left on this template. */

/* ===== journal-tpl.css ===== */
/* Journal Article template (/journal/what-a-rebrand-actually-costs/, Figma 47:4040) — page-specific overrides only.
   Article Header to Cover (Media Full) to Article Body (Rich Text 720) to Author + Share to Keep Reading to Contact Card Ink. */

/* Article Body: the Rich Text section carries its own vertical rhythm (96 desktop · 64 ≤991 · 48 ≤767 via --sv-section-md) */
.section_article-body { padding-top: var(--sv-section-md); padding-bottom: var(--sv-section-md); }

/* Pull Quote embedded in the Rich Text (combo is-article, set in pages/journal_tpl.py): Heading/H3 quote (Figma 47:4114),
   Display/L mark, no extra blockquote padding. Bullets, h2 rhythm and the figure's 32px top margin are Rich Text tags: sivra.css §18 */
.pull-quote_component.is-article { padding: var(--sv-space-48) 0; margin-top: var(--sv-space-24); }
.pull-quote_text.is-article { padding: 0; font-size: var(--sv-text-h3); line-height: var(--sv-lh-h3); letter-spacing: var(--sv-ls-h3); }
.article-body_cta { padding-top: var(--sv-space-8); }

/* Author + Share row sits flush under the body (.padding-section-medium.is-flush-top); Keep Reading follows after the hairline */

@media screen and (max-width: 991px) {
  .article-footer_component { gap: var(--sv-space-32); }
}

@media screen and (max-width: 767px) {
  .pull-quote_component.is-article { padding: var(--sv-space-32) 0; }
  .article-footer_component { padding: var(--sv-space-32) 0; }
}

@media screen and (max-width: 479px) {
  .article-header_title { text-wrap: balance; }
  .pull-quote_text.is-article { font-size: var(--sv-text-h4); line-height: var(--sv-lh-h4); letter-spacing: var(--sv-ls-h4); }
  .button.is-full-mobile { width: 100%; justify-content: center; } /* article CTA · Work Load more */
  .article-footer_share-links { gap: var(--sv-space-16); }
}

/* ===== journal.css ===== */
/* Journal index (/journal/, Figma 47:2785) — page-specific overrides only. Hero Page to Featured Post to Post Grid to Newsletter Strip. */
.featured-post_component { display: block; }
/* Featured Post section: .padding-section-small.is-flush-top (the hero's bottom padding already provides the 96px gap) ·
   Post Grid: .padding-section-medium.is-top-64 (64 to 48 ≤767) — instance combos set in pages/journal.py, utilities.css.
   Journal Card Size=Feature (only used here) passes is-feature to its parts. */
.journal-card_image.is-feature { border-radius: var(--sv-radius-16); }
.journal-card_text.is-feature { padding-right: var(--sv-space-32); }

@media screen and (max-width: 991px) {
  .journal-card_text.is-feature { padding-right: 0; gap: var(--sv-space-16); }
  .journal-card_excerpt.is-feature { -webkit-line-clamp: 3; }
}

@media screen and (max-width: 767px) {
  .journal-grid_component { gap: var(--sv-space-40); }
}

@media screen and (max-width: 479px) {
  .journal-card_title.is-feature { font-size: var(--sv-text-h3); line-height: var(--sv-lh-h3); letter-spacing: var(--sv-ls-h3); }
  .journal-card_excerpt.is-feature { font-size: var(--sv-text-default); }
}

/* ===== results-tpl.css ===== */
/* Case Study template (/results/paramount-centre/, Figma 47:3807 + sheet 47:3268, restructured by owner audit #4 — content/audit-4.md §4).
   Overrides only — geometry from the Figma frame: Case Body = TOC column 264 + content column (gap 64) · section heads max 864 ·
   split = 4:5 sticky image | aside (equal halves, gap 32) · Gallery Sheet header 40/64, no filter pills. */

/* Case Body — 264 | content */
.case-body_component { grid-template-columns: minmax(0, 264px) minmax(0, 1fr); gap: var(--sv-space-64); }

/* Gallery Sheet — project name left, close right */
.sv-sheet_head { padding: var(--sv-space-40) var(--sv-space-64) var(--sv-space-24); }
.sv-sheet_stack { padding: var(--sv-space-8) var(--sv-space-64) var(--sv-space-64); gap: var(--sv-space-24); align-content: start; }

@media screen and (max-width: 991px) {
  .sv-sheet_head { padding: var(--sv-space-32) var(--sv-space-32) var(--sv-space-16); }
  .sv-sheet_stack { padding: var(--sv-space-8) var(--sv-space-32) var(--sv-space-32); }
}

@media screen and (max-width: 767px) {
  .sv-sheet_head { padding: var(--sv-space-16) var(--sv-space-24); }
  .sv-sheet_stack { padding: var(--sv-space-8) var(--sv-space-24) var(--sv-space-24); }
}

/* ===== results.css ===== */
/* Results index (/results/) — the paper "Read the case study" pill sits bottom-left of each Result Row cover, so result_row()
   gives the placeholder caption the combo .placeholder_label.is-top-wide (top-left corner, utilities.css). */

/* ===== service-4.css ===== */
/* Service pages (/services/web-design, brand-identity, packaging-design, graphic-motion-design) — Figma 47:1217 template.
   Overrides only: everything structural lives in components.css + sivra.css §10 (bento). Every rule is scoped to a
   section that only the service template renders, because build.py concatenates all page css into one site/css/pages.css. */

/* Work Grid (Section Header + Bento Grid Compact) is styled once in components.css (.work-grid_component). */

/* Hero Split flows straight into Deliverables (Media Full removed, owner trim): the Deliverables padding div carries the
   instance combo .padding-section-large.is-top-32 (pages/service_4.py, utilities.css). */

/* ===== studio.css ===== */
/* Studio — page-specific overrides only (everything else lives in components.css). Concatenated into site/css/pages.css by build.py. */
/* Founder portrait: the 16:9 front still cropped to 4:5 keeps the face in frame via .media_img.is-portrait (utilities.css).
   The Founder Block only renders on this page, so its tablet/mobile overrides use the plain part classes. */
/* Tablet: keep portrait + story side by side (5/7) instead of a full-width 4:5 portrait; the block stacks ≤767 (BUILD-SPEC §C.30). */
@media screen and (max-width: 991px) {
  .founder_component { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sv-space-40); align-items: start; }
  .founder_portrait { grid-column: 1; }
  .founder_copy { grid-column: 2; }
}
@media screen and (max-width: 767px) {
  .founder_component { grid-template-columns: minmax(0, 1fr); gap: var(--sv-space-32); }
  .founder_portrait, .founder_copy { grid-column: 1; }
  .founder_portrait { max-width: 480px; }
}
/* Stats Row (4 bracketed values): instance combos .stats_grid.is-4col.is-compact + .stats_value.is-compact (pages/studio.py,
   components.css) — Stat/Number scaled so "100%" fits a quarter of the container; 2 cols ≤991. */

/* ===== work-tpl.css ===== */
/* Project Showcase template (/work/*, Figma 47:3367) — page-specific overrides only. Concatenated into site/css/pages.css by
   build.py. Colours come from the page wrapper (.page-wrapper.is-client to --client / --on-client, tokens.css). */

/* Showcase Hero 47:3392: title centred over the full-bleed 16:9 media */
.showcase-hero_component { justify-items: center; text-align: center; }

/* Showcase Intro 47:3406: services as a plain H4 list (no hairlines), as drawn — .list-hairline_component.is-plain + .list-hairline_item.is-plain (utilities.css) */

/* Showcase Media, inset variant (47:3415 to 47:3498): every row sits in the 1312 content width with 24px gutters between items
   and rows (each row carries half the gutter above and below), radius 12 on every image including Full */
.section_showcase-media.is-inset { padding: var(--sv-space-12) 0; }
.showcase-media_component.is-inset { gap: var(--sv-space-24); } /* placeholders keep the default radius 12 */
.section_showcase-media.is-inset.is-flush-top { padding-top: 0; } /* first row, right under the Showcase Intro */

/* Story Nav (owner audit #5) closes the page: Previous project · Back to all projects · Next project (components.css) */

@media screen and (max-width: 767px) {
  .section_showcase-media.is-inset { padding: var(--sv-space-8) 0; }
  .showcase-media_component.is-inset { gap: var(--sv-space-16); }
  /* Pair keeps two 4:5 images side by side on phones; Trio stacks (components.css sets one column ≤767) */
  .showcase-media_component.is-inset.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 479px) {
  .showcase-media_component.is-inset.is-pair { grid-template-columns: minmax(0, 1fr); }
}

/* ===== work.css ===== */
/* Work index (/work/, Figma 47:722) — page-specific overrides only. Hero Page to Work Bento (Bento Grid Layout=Full 47:773 +
   Load more 47:955) to Contact Card Ink. Tile spans / hover pill live in sivra.css §10; tile fill in components.css. */

/* Full layout = 10 tiles in Figma order packing dense into six 320px rows (2x2+1x2 · 3×1x1 · 1x2+2x2 · 3×1x1) */
/* Instance combos set in pages/work.py: .padding-section-medium.is-flush-top (the hero's bottom padding already gives the gap),
   .load-more_component.is-large, .bento-title-wrap.is-tight, .button.is-full-mobile (journal-tpl.css) */
.work-bento_component { display: grid; }
.bento-grid.is-full { gap: var(--sv-grid-gap); } /* Layout=Full only renders in the Work Bento */
.load-more_component.is-large { padding-top: var(--sv-space-64); }

@media screen and (max-width: 991px) {
  /* 6 col × 260px rows: the large tiles take the full width, tall + small tiles pair up two per row */
  .load-more_component.is-large { padding-top: var(--sv-space-48); }
}

@media screen and (max-width: 767px) {
  /* one column: tiles 4:5, the 2x2 tiles 1:1, title pills always visible (sivra.css §10) */
  .bento-title-wrap.is-tight { top: var(--sv-space-16); left: var(--sv-space-16); margin-right: var(--sv-space-16); }
}