/* =====================================================================
   SIVRA STUDIOS — Client-First utilities (one class = one Webflow style; combo classes only as is-* modifiers)
   Structure: page-wrapper › main-wrapper › section_[name] › padding-global › container-large › padding-section-[size] › [name]_component
   ===================================================================== */

/* ---------- structure ---------- */
.page-wrapper { position: relative; min-height: 100vh; overflow-x: clip; background: var(--bg-color); color: var(--txt-color); } /* clip (not hidden): the Brand Extensions carousel may bleed right without a page scrollbar, and sticky still works */
.main-wrapper { position: relative; }
.padding-global { padding-left: var(--sv-gutter); padding-right: var(--sv-gutter); }
.container-large { width: 100%; max-width: var(--sv-container); margin-left: auto; margin-right: auto; }
.container-medium { width: 100%; max-width: 864px; margin-left: auto; margin-right: auto; }
.container-small { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; }
.padding-section-large { padding-top: var(--sv-section-lg); padding-bottom: var(--sv-section-lg); }
.padding-section-medium { padding-top: var(--sv-section-md); padding-bottom: var(--sv-section-md); }
.padding-section-small { padding-top: var(--sv-section-sm); padding-bottom: var(--sv-section-sm); }
.padding-section-hero { padding-top: var(--sv-hero-top); padding-bottom: var(--sv-section-md); }
/* instance combos for page rhythm (the section above already provides the gap) */
.padding-section-small.is-flush-top, .padding-section-medium.is-flush-top { padding-top: 0; }
.padding-section-medium.is-top-64, .padding-section-large.is-top-64 { padding-top: var(--sv-space-64); }
.padding-section-large.is-top-32 { padding-top: var(--sv-space-32); }
.padding-top-none { padding-top: 0; } .padding-bottom-none { padding-bottom: 0; }
.spacer-small { height: var(--sv-space-24); } .spacer-medium { height: var(--sv-space-48); } .spacer-large { height: var(--sv-space-96); }
.hairline-top { border-top: 1px solid var(--hairline); } .hairline-bottom { border-bottom: 1px solid var(--hairline); }

/* ---------- 12-col grid ---------- */
.grid_12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sv-space-24) var(--sv-space-32); align-items: start; }
.grid_12.is-gap-small { gap: var(--sv-space-24); }
.grid_span-2 { grid-column: span 2; } .grid_span-3 { grid-column: span 3; } .grid_span-4 { grid-column: span 4; } .grid_span-5 { grid-column: span 5; }
.grid_span-6 { grid-column: span 6; } .grid_span-7 { grid-column: span 7; } .grid_span-8 { grid-column: span 8; } .grid_span-10 { grid-column: span 10; } .grid_span-12 { grid-column: span 12; }
.grid_start-6 { grid-column-start: 6; } .grid_start-7 { grid-column-start: 7; }

/* ---------- typography (1:1 with the Figma text styles, §D.1) ---------- */
.heading-style-display-xl { font-size: var(--sv-text-display-xl); line-height: var(--sv-lh-display-xl); letter-spacing: var(--sv-ls-display-xl); font-weight: var(--sv-weight-medium); }
.heading-style-display-l  { font-size: var(--sv-text-display-l);  line-height: var(--sv-lh-display-l);  letter-spacing: var(--sv-ls-display-l);  font-weight: var(--sv-weight-medium); }
.heading-style-h1 { font-size: var(--sv-text-h1); line-height: var(--sv-lh-h1); letter-spacing: var(--sv-ls-h1); font-weight: var(--sv-weight-medium); }
.heading-style-h2 { font-size: var(--sv-text-h2); line-height: var(--sv-lh-h2); letter-spacing: var(--sv-ls-h2); font-weight: var(--sv-weight-medium); }
.heading-style-h3 { font-size: var(--sv-text-h3); line-height: var(--sv-lh-h3); letter-spacing: var(--sv-ls-h3); font-weight: var(--sv-weight-medium); }
.heading-style-h4 { font-size: var(--sv-text-h4); line-height: var(--sv-lh-h4); letter-spacing: var(--sv-ls-h4); font-weight: var(--sv-weight-medium); }
.heading-style-h5 { font-size: var(--sv-text-large); line-height: 1.3; letter-spacing: -.01em; font-weight: var(--sv-weight-medium); }
.heading-style-h6 { font-size: var(--sv-text-body); line-height: 1.4; letter-spacing: 0; font-weight: var(--sv-weight-medium); }
.text-style-stat { font-size: var(--sv-text-stat); line-height: var(--sv-lh-stat); letter-spacing: var(--sv-ls-stat); font-weight: var(--sv-weight-medium); font-variant-numeric: tabular-nums; }
.text-size-large { font-size: var(--sv-text-large); line-height: var(--sv-lh-large); letter-spacing: var(--sv-ls-large); }
.text-size-regular { font-size: var(--sv-text-body); line-height: var(--sv-lh-body); letter-spacing: 0; }
.text-size-small { font-size: var(--sv-text-small); line-height: var(--sv-lh-small); letter-spacing: 0; }
.text-size-tiny { font-size: 12px; line-height: 1.4; }
.text-style-nav { font-size: var(--sv-text-nav); line-height: 1; font-weight: var(--sv-weight-medium); }
.text-style-button { font-size: var(--sv-text-button); line-height: 1; font-weight: var(--sv-weight-medium); }
.text-style-eyebrow { display: block; font-size: var(--sv-text-eyebrow); line-height: var(--sv-lh-eyebrow); letter-spacing: var(--sv-ls-eyebrow); text-transform: uppercase; font-weight: var(--sv-weight-medium); }
.text-style-allcaps { text-transform: uppercase; letter-spacing: .08em; }
.text-style-nowrap { white-space: nowrap; }
.text-style-balance { text-wrap: balance; }
.text-style-quote { quotes: "\201C" "\201D"; }
.text-weight-regular { font-weight: var(--sv-weight-regular); } .text-weight-medium { font-weight: var(--sv-weight-medium); } .text-weight-bold { font-weight: var(--sv-weight-bold); }
.text-align-left { text-align: left; } .text-align-center { text-align: center; } .text-align-right { text-align: right; }
.text-color-ink { color: var(--sv-ink); } .text-color-paper { color: var(--sv-paper); } .text-color-accent { color: var(--sv-accent); }
.text-color-muted { color: var(--muted); } .text-color-muted-55 { color: var(--muted-55); }
.text-opacity-80 { opacity: .8; } .text-opacity-66 { opacity: .66; } .text-opacity-55 { opacity: .55; } .text-opacity-40 { opacity: .4; }
/* .text-rich-text vertical rhythm (nested tags): sivra.css §18 */
.max-width-xlarge { max-width: 1088px; } .max-width-large { max-width: 920px; } .max-width-medium { max-width: 640px; } .max-width-small { max-width: 520px; } .max-width-xsmall { max-width: 420px; }
.max-width-full { max-width: none; }

/* ---------- colour surfaces (theme vars are swapped in tokens.css) ---------- */
.background-color-accent { background-color: var(--sv-accent); color: var(--sv-paper); }
.background-color-surface { background-color: var(--surface); }

/* ---------- layout helpers ---------- */
.flex-between { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sv-space-24); }
.flex-center { display: flex; justify-content: center; align-items: center; }
.flex-column { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.gap-8 { gap: var(--sv-space-8); } .gap-12 { gap: var(--sv-space-12); } .gap-16 { gap: var(--sv-space-16); } .gap-24 { gap: var(--sv-space-24); } .gap-32 { gap: var(--sv-space-32); }
.margin-bottom-small { margin-bottom: var(--sv-space-16); } .margin-bottom-medium { margin-bottom: var(--sv-space-32); } .margin-bottom-large { margin-bottom: var(--sv-space-48); }
.margin-top-small { margin-top: var(--sv-space-16); } .margin-top-medium { margin-top: var(--sv-space-32); } .margin-top-large { margin-top: var(--sv-space-48); }
.hide { display: none !important; } /* Client-First utility: built-but-hidden sections (e.g. Testimonial Card until a real quote exists) + Load-more items (sivra.js §17 removes it) */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.overflow-hidden { overflow: hidden; }
.aspect-16x9 { aspect-ratio: 16 / 9; } .aspect-4x5 { aspect-ratio: 4 / 5; } .aspect-3x2 { aspect-ratio: 3 / 2; } .aspect-4x3 { aspect-ratio: 4 / 3; } .aspect-1x1 { aspect-ratio: 1 / 1; } .aspect-5x3 { aspect-ratio: 5 / 3; } .aspect-16x10 { aspect-ratio: 16 / 10; } .aspect-2x3 { aspect-ratio: 2 / 3; }
.radius-12 { border-radius: var(--sv-radius-12); } .radius-24 { border-radius: var(--sv-radius-24); } .radius-pill { border-radius: var(--sv-radius-pill); }

/* ---------- Media Placeholder (Figma 5:33) — neutral box, fixed ratio, small caption label ---------- */
.placeholder { position: relative; display: block; width: 100%; background: var(--surface-media); border-radius: var(--sv-radius-12); overflow: hidden; aspect-ratio: 16 / 9; transition: transform .6s ease; } /* card hover zoom: sivra.css §10 / §12 */
.placeholder.is-16x9 { aspect-ratio: 16 / 9; } .placeholder.is-4x5 { aspect-ratio: 4 / 5; } .placeholder.is-3x2 { aspect-ratio: 3 / 2; } .placeholder.is-4x3 { aspect-ratio: 4 / 3; }
.placeholder.is-1x1 { aspect-ratio: 1 / 1; } .placeholder.is-5x3 { aspect-ratio: 5 / 3; } .placeholder.is-16x10 { aspect-ratio: 16 / 10; } .placeholder.is-2x3 { aspect-ratio: 2 / 3; }
.placeholder.is-fill { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border-radius: 0; }
.placeholder.is-radius-0 { border-radius: 0; } .placeholder.is-radius-24 { border-radius: var(--sv-radius-24); }
.placeholder_label { position: absolute; left: 16px; bottom: 14px; max-width: calc(100% - 32px); font-size: var(--sv-text-eyebrow); line-height: var(--sv-lh-eyebrow); letter-spacing: var(--sv-ls-eyebrow); text-transform: uppercase; font-weight: var(--sv-weight-medium); opacity: .55; pointer-events: none; }
.placeholder.is-dark { background: var(--sv-paper-10); color: var(--sv-paper); }
.placeholder_media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* an img/video dropped into a placeholder */
.placeholder_label.is-map { left: 16px; bottom: 14px; }             /* Location map: keeps its corner at every width */
.placeholder_label.is-top { top: 16px; bottom: auto; }               /* Story Block: the View Project pill owns the bottom-left corner */
.placeholder_label.is-top-wide { top: 20px; bottom: auto; left: 24px; } /* Result Row: the case-study pill owns the bottom-left corner */
.media { position: relative; display: block; width: 100%; overflow: hidden; border-radius: var(--sv-radius-12); background: var(--surface-media); }
.media.is-16x9 { aspect-ratio: 16 / 9; } .media.is-4x5 { aspect-ratio: 4 / 5; } .media.is-3x2 { aspect-ratio: 3 / 2; } .media.is-4x3 { aspect-ratio: 4 / 3; }
.media.is-1x1 { aspect-ratio: 1 / 1; } .media.is-5x3 { aspect-ratio: 5 / 3; } .media.is-16x10 { aspect-ratio: 16 / 10; } .media.is-2x3 { aspect-ratio: 2 / 3; }
.media.is-radius-24 { border-radius: var(--sv-radius-24); }
.media_img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- hairline list pattern reused everywhere ---------- */
.list-hairline_component { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--hairline); } /* closing rule under the last item */
.list-hairline_item { padding: var(--sv-space-12) 0; border-top: 1px solid var(--hairline); }
.list-hairline_component.is-plain { border-bottom: 0; }                              /* Showcase Intro services: plain H4 list, as drawn */
.list-hairline_item.is-plain { padding: var(--sv-space-4) 0; border: 0; }

/* ---------- responsive visibility (Webflow breakpoints only) ---------- */
@media screen and (max-width: 991px) {
  .hide-tablet { display: none !important; }
  .grid_12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grid_span-7, .grid_span-8, .grid_span-10, .grid_span-12 { grid-column: span 6; }
  .grid_span-3, .grid_span-4, .grid_span-5, .grid_span-6 { grid-column: span 6; }
  .grid_start-6, .grid_start-7 { grid-column-start: auto; }
}
@media screen and (max-width: 767px) {
  .hide-mobile-landscape, .hide-mobile { display: none !important; }
  .flex-between { flex-direction: column; align-items: flex-start; gap: var(--sv-space-16); }
  .grid_12 { grid-template-columns: minmax(0, 1fr); gap: var(--sv-space-24); }
  .grid_span-2, .grid_span-3, .grid_span-4, .grid_span-5, .grid_span-6, .grid_span-7, .grid_span-8, .grid_span-10, .grid_span-12 { grid-column: span 1; }
  .padding-section-medium.is-top-64 { padding-top: var(--sv-space-48); }
  .placeholder_label.is-top-wide { top: 12px; left: 12px; }
}
@media screen and (max-width: 479px) {
  .hide-mobile-portrait { display: none !important; }
  .placeholder_label { left: 12px; bottom: 10px; font-size: 11px; }
}
@media screen and (min-width: 1920px) {
  .padding-global { padding-left: var(--sv-gutter); padding-right: var(--sv-gutter); } /* container stays 1312; nothing scales further */
}