/* ============================================================
   Concept 360 - WordPress preset alias layer
   ------------------------------------------------------------
   The ported Astro CSS below references design tokens by var()
   name (--color-*, --font-*, --text-*, --space-*, --radius, ...).
   This :root block maps every one of those names onto the
   WordPress theme.json presets (--wp--preset--*) so the ported
   CSS body stays byte-identical to src/styles/site.css while the
   brand-locked palette/typography/spacing flows from theme.json.
   ============================================================ */
:root {
  /* --- Color: design token -> WP preset --- */
  --color-bg:           var(--wp--preset--color--page);
  --color-surface:      var(--wp--preset--color--surface);
  --color-surface-2:    var(--wp--preset--color--surface-2);
  --color-surface-sunk: var(--wp--preset--color--surface-sunk);
  --color-text:         var(--wp--preset--color--ink);
  --color-text-muted:   var(--wp--preset--color--ink-muted);
  --color-text-faint:   var(--wp--preset--color--ink-faint);
  --color-brand:        var(--wp--preset--color--brand);
  --color-primary:      var(--wp--preset--color--brand);
  --color-accent:       var(--wp--preset--color--brand);
  --color-accent-hover: var(--wp--preset--color--brand-hover);
  --color-accent-press: var(--wp--preset--color--brand-press);
  --color-orange-ink:   var(--wp--preset--color--accent-ink);
  --color-accent-ink:   var(--wp--preset--color--accent-ink);
  --color-on-accent:    var(--wp--preset--color--on-accent);
  --color-on-media:     var(--wp--preset--color--on-media);
  --color-border:       var(--wp--preset--color--border);
  --color-border-strong:var(--wp--preset--color--border-strong);
  --color-success:      var(--wp--preset--color--success);
  --color-warning:      var(--wp--preset--color--warning);
  --color-danger:       var(--wp--preset--color--danger);

  /* --- Media treatment (over dark images) --- */
  --scrim-lightbox: rgba(8, 9, 11, 0.92);
  --scrim-poster:   linear-gradient(to top, rgba(8,9,11,0.85) 0%, rgba(8,9,11,0) 60%);

  /* --- Typography: design token -> WP preset --- */
  --font-display: var(--wp--preset--font-family--display);
  --font-body:    var(--wp--preset--font-family--body);
  --font-mono:    var(--wp--preset--font-family--mono);

  --weight-body:     400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --text-12: var(--wp--preset--font-size--12);
  --text-13: var(--wp--preset--font-size--13);
  --text-14: var(--wp--preset--font-size--14);
  --text-16: var(--wp--preset--font-size--16);
  --text-19: var(--wp--preset--font-size--19);
  --text-23: var(--wp--preset--font-size--23);
  --text-28: var(--wp--preset--font-size--28);
  --text-33: var(--wp--preset--font-size--33);
  --text-40: var(--wp--preset--font-size--40);
  --text-56: var(--wp--preset--font-size--56);
  --text-72: var(--wp--preset--font-size--72);

  --leading-display: 1.07;
  --leading-body:    1.5;
  --leading-tight:   1.2;
  --tracking-display: 0.04em;
  --tracking-display-wide: 0.08em;
  --tracking-mono:    0.06em;
  --tracking-normal:  0;
  --measure: 66ch;

  /* --- Spacing: design token -> WP preset --- */
  --space-1:  var(--wp--preset--spacing--10);
  --space-2:  var(--wp--preset--spacing--20);
  --space-3:  var(--wp--preset--spacing--30);
  --space-4:  var(--wp--preset--spacing--40);
  --space-6:  var(--wp--preset--spacing--50);
  --space-8:  var(--wp--preset--spacing--60);
  --space-12: var(--wp--preset--spacing--70);
  --space-16: var(--wp--preset--spacing--80);
  --space-24: var(--wp--preset--spacing--90);
  --space-32: var(--wp--preset--spacing--100);

  --content-max: 1320px;
  --gutter: var(--space-6);
  --gutter-mobile: var(--space-4);
  --radius: 2px;
  --section-y: var(--space-24);
  --section-y-mobile: var(--space-16);
  --touch-min: 44px;

  /* --- Effects / motion --- */
  --shadow-focus: 0 0 0 2px var(--color-accent-hover);
  --shadow-media: 0 24px 64px -32px rgba(0, 0, 0, 0.8);
  --border-hairline-w: 1px;
  --hairline: 1px solid var(--color-border);
  --control-line: 1px solid var(--color-border-strong);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 160ms;
  --dur-slow: 180ms;
  --dur-page: 300ms;
  --dur-crossfade: 140ms;
  --focus-offset: 2px;
}

/* ============================================================
   Webfonts loaded from CDN (Google Fonts + Fontshare), matching
   the original design tokens (src/styles/tokens/fonts.css):
   - Space Grotesk : display / headings (Google Fonts, 500 / 700)
   - Space Mono    : labels / data / timecode (Google Fonts, 400 / 700)
   - General Sans  : body / UI prose (Fontshare, 400 / 500 / 600)
   The Google Fonts stylesheets are enqueued in inc/enqueue.php; the
   General Sans faces are declared here so the face lives in THIS
   project's CSS (not hidden behind a remote @import).
   ============================================================ */

/* General Sans - 400 / 500 / 600 (body, UI) from Fontshare. */
@font-face {
  font-family: 'General Sans';
  src: url('https://cdn.fontshare.com/wf/MFQT7HFGCR2L5ULQTW6YXYZXXHMPKLJ3/YWQ244D6TACUX5JBKATPOW5I5MGJ3G73/7YY3ZAAE3TRV2LANYOLXNHTPHLXVWTKH.woff2') format('woff2'),
       url('https://cdn.fontshare.com/wf/MFQT7HFGCR2L5ULQTW6YXYZXXHMPKLJ3/YWQ244D6TACUX5JBKATPOW5I5MGJ3G73/7YY3ZAAE3TRV2LANYOLXNHTPHLXVWTKH.woff') format('woff');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'General Sans';
  src: url('https://cdn.fontshare.com/wf/3RZHWSNONLLWJK3RLPEKUZOMM56GO4LJ/BPDRY7AHVI3MCDXXVXTQQ76H3UXA63S3/SB2OEB6IKZPRR6JT4GFJ2TFT6HBB6AZN.woff2') format('woff2'),
       url('https://cdn.fontshare.com/wf/3RZHWSNONLLWJK3RLPEKUZOMM56GO4LJ/BPDRY7AHVI3MCDXXVXTQQ76H3UXA63S3/SB2OEB6IKZPRR6JT4GFJ2TFT6HBB6AZN.woff') format('woff');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'General Sans';
  src: url('https://cdn.fontshare.com/wf/K46YRH762FH3QJ25IQM3VAXAKCHEXXW4/ISLWQPUZHZF33LRIOTBMFOJL57GBGQ4B/3ZLMEXZEQPLTEPMHTQDAUXP5ZZXCZAEN.woff2') format('woff2'),
       url('https://cdn.fontshare.com/wf/K46YRH762FH3QJ25IQM3VAXAKCHEXXW4/ISLWQPUZHZF33LRIOTBMFOJL57GBGQ4B/3ZLMEXZEQPLTEPMHTQDAUXP5ZZXCZAEN.woff') format('woff');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}

/* ============================================================
   Base brand devices (ported from src/styles/tokens/base.css)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* Selection text sits on the brand-orange highlight, so it must stay light in
   both schemes; on-media is always-light (scheme-independent intent). */
::selection { background: var(--color-accent-press); color: var(--color-on-media); }

.c360-label {
  font-family: var(--font-mono);
  font-size: var(--text-13);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-muted);
}
.c360-label::before {
  content: '> ';
  color: var(--color-accent-ink);
}

.c360-accent-underline {
  position: relative;
  display: inline-block;
}
.c360-accent-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.18em;
  width: 100%;
  height: 2px;
  background: var(--color-brand);
}

.c360-display-caps {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-medium);
  line-height: var(--leading-display);
}

.c360-regmarks { position: relative; }
.c360-regmarks::before,
.c360-regmarks::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--color-on-media);
  opacity: 0.7;
  pointer-events: none;
}
.c360-regmarks::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.c360-regmarks::after  { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

/* ============================================================
   Concept 360 - Site + component CSS
   Ported faithfully from the design bundle:
     - ui_kits/website/index.html  -> site-level layout CSS
     - components/ * .jsx <style>   -> DS component CSS (deduped)
   Uses only the design tokens by var() name. 2px radius everywhere,
   flat-with-borders (no soft shadows beyond --shadow-focus / --shadow-media).
   ============================================================ */

/* ===========================================================
   DESIGN-SYSTEM COMPONENTS (ported from components/ * .jsx)
   =========================================================== */

/* ---- Button ---- */
.c360-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; user-select: none; white-space: nowrap; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.c360-btn:focus-visible { outline: 2px solid var(--color-accent-hover); outline-offset: var(--focus-offset); }
.c360-btn--sm { font-size: 12px; padding: 8px 14px; min-height: 34px; }
.c360-btn--md { font-size: 13px; padding: 12px 20px; min-height: 44px; }
.c360-btn--lg { font-size: 14px; padding: 14px 26px; min-height: 50px; }

.c360-btn--primary { background: var(--color-primary); color: var(--color-on-accent); }
.c360-btn--primary:hover { background: var(--color-accent-hover); }
.c360-btn--primary:active { background: var(--color-accent-press); transform: translateY(1px); }

.c360-btn--secondary { background: transparent; border-color: var(--color-border-strong); color: var(--color-text); }
.c360-btn--secondary:hover { border-color: var(--color-brand); color: var(--color-accent-ink); }
.c360-btn--secondary:active { background: var(--color-surface); }

.c360-btn--link { background: transparent; color: var(--color-accent-ink); padding-left: 0; padding-right: 0; min-height: 0; }
.c360-btn--link::before { content: '> '; }
.c360-btn--link:hover { text-decoration: underline; text-underline-offset: 3px; }

.c360-btn:disabled, .c360-btn[aria-disabled="true"] { cursor: not-allowed; pointer-events: none; }
.c360-btn--primary:disabled { background: var(--color-surface-2); color: var(--color-text-faint); }
.c360-btn--secondary:disabled { border-color: var(--color-border); color: var(--color-text-faint); }
.c360-btn--link:disabled { color: var(--color-text-faint); }
.c360-btn .c360-btn__icon { display: inline-flex; width: 1em; height: 1em; }
.c360-btn .c360-btn__icon svg { width: 100%; height: 100%; }

/* ---- Badge ---- */
.c360-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius);
  padding: 3px 8px; line-height: 1.2; background: transparent; white-space: nowrap;
}
.c360-badge--solid { background: var(--color-surface-2); border-color: var(--color-border); }
.c360-badge--accent { border-color: var(--color-brand); color: var(--color-accent-ink); }
.c360-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-brand); flex: none; }

/* ---- LiveIndicator (tally dot - the ONE allowed pulse) ---- */
.c360-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text);
}
.c360-live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-brand); flex: none;
  box-shadow: 0 0 0 0 rgba(240,144,24,0.55); animation: c360-tally 1.6s var(--ease-out) infinite; }
@keyframes c360-tally {
  0% { box-shadow: 0 0 0 0 rgba(240,144,24,0.5); }
  70% { box-shadow: 0 0 0 7px rgba(240,144,24,0); }
  100% { box-shadow: 0 0 0 0 rgba(240,144,24,0); }
}
@media (prefers-reduced-motion: reduce) { .c360-live__dot { animation: none; } }

/* ---- LangToggle (segmented RO | EN) ---- */
.c360-lang { display: inline-flex; border: 1px solid var(--color-border-strong); border-radius: var(--radius); overflow: hidden; }
.c360-lang__seg {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  background: transparent; color: var(--color-text-muted); border: 0; cursor: pointer; text-decoration: none;
  padding: 6px 12px; min-height: 34px; display: inline-flex; align-items: center;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.c360-lang__seg + .c360-lang__seg { border-left: 1px solid var(--color-border-strong); }
.c360-lang__seg:hover { color: var(--color-text); }
.c360-lang__seg[aria-pressed="true"] { color: var(--color-accent-ink); background: var(--color-surface-sunk); }
.c360-lang__seg:focus-visible { outline: 2px solid var(--color-accent-hover); outline-offset: -2px; }

/* ---- Tabs (work filters) ---- */
.c360-tabs { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.c360-tab {
  position: relative; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-text-muted); background: transparent; border: 0;
  cursor: pointer; padding: 8px 12px; min-height: 40px;
  transition: color var(--dur-fast) var(--ease-out);
}
.c360-tab::before { content: '>'; color: var(--color-accent-ink); margin-right: 7px; opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out); }
.c360-tab:hover { color: var(--color-text); }
.c360-tab:hover::before { opacity: .6; }
.c360-tab[aria-pressed="true"] { color: var(--color-accent-ink); }
.c360-tab[aria-pressed="true"]::before { opacity: 1; }
.c360-tab[aria-pressed="true"]::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--color-brand);
}
.c360-tab:focus-visible { outline: 2px solid var(--color-accent-hover); outline-offset: -2px; }

/* ---- ServicePanel (numbered pillar) ---- */
.c360-service {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 24px;
  transition: border-color var(--dur-base) var(--ease-out);
}
.c360-service:hover { border-color: var(--color-border-strong); }
.c360-service__num {
  font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1;
  color: var(--color-brand); letter-spacing: 0.02em;
}
.c360-service__title {
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-23);
  color: var(--color-text); letter-spacing: 0.01em;
}
.c360-service__body { font-family: var(--font-body); font-size: var(--text-16);
  line-height: 1.5; color: var(--color-text-muted); max-width: 46ch; margin: 0; }
.c360-service__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.c360-service__tag { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius); padding: 2px 7px; }
/* Native-block parity (v0.3.0): the service pillar children are now editable
   core paragraphs/headings instead of spans. The .c360-service flex column +
   gap is the single source of vertical rhythm, so neutralize the default WP
   block margins on the converted children (and the tag chips) to keep the
   rendered spacing identical to the previous span-based markup. */
.c360-service > .c360-service__num,
.c360-service > .c360-service__title,
.c360-service > .c360-service__body { margin: 0; }
.c360-service__tags > .c360-service__tag { margin: 0; }

/* ---- WorkTile (signature tile) ---- */
.c360-tile {
  position: relative; display: block; width: 100%;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  overflow: hidden; background: var(--color-surface); cursor: pointer;
  color: inherit; text-align: left; padding: 0; font: inherit;
  transition: border-color var(--dur-base) var(--ease-out);
}
.c360-tile:hover, .c360-tile:focus-visible { border-color: var(--color-border-strong); outline: none; }
.c360-tile:focus-visible { box-shadow: var(--shadow-focus); }
/* Media constant - scheme-independent: poster placeholder gradient behind the
   (dark) video poster; stays dark in both light and dark variations. */
.c360-tile__media { position: relative; width: 100%; display: block; background:
  linear-gradient(135deg, #1b1f24 0%, #0e1013 60%, #141619 100%); }
.c360-tile--16x9 .c360-tile__media { aspect-ratio: 16 / 9; }
.c360-tile--9x16 .c360-tile__media { aspect-ratio: 9 / 16; }
.c360-tile__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* The badge / duration / ratio / play / meta overlays below sit ON TOP of the
   (always-dark) video poster media, so their rgba scrims + light text are media
   constants - scheme-independent by design and intentionally left literal. */

/* registration corners */
.c360-tile__media::before, .c360-tile__media::after {
  content: ''; position: absolute; width: 16px; height: 16px;
  border: 1px solid var(--color-on-media); opacity: .6; pointer-events: none; z-index: 2;
  transition: border-color var(--dur-base) var(--ease-out);
}
.c360-tile__media::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.c360-tile__media::after  { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.c360-tile:hover .c360-tile__media::before, .c360-tile:hover .c360-tile__media::after { border-color: var(--color-border-strong); }

.c360-tile__badge { position: absolute; top: 10px; left: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-on-media); border: 1px solid rgba(237,238,240,.35); border-radius: var(--radius);
  padding: 3px 7px; background: rgba(11,12,14,.55); backdrop-filter: blur(2px); }
.c360-tile__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-brand); }

.c360-tile__dur { position: absolute; bottom: 10px; right: 10px; z-index: 3;
  font-family: var(--font-mono); font-size: 12px; color: var(--color-on-media); letter-spacing: .04em;
  background: rgba(11,12,14,.7); border-radius: var(--radius); padding: 2px 6px; }

.c360-tile__ratio { position: absolute; bottom: 10px; left: 10px; z-index: 3;
  font-family: var(--font-mono); font-size: 10px; color: rgba(237,238,240,.7); letter-spacing: .06em;
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.c360-tile:hover .c360-tile__ratio { opacity: 1; }

.c360-tile__play { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--dur-crossfade) var(--ease-out); pointer-events: none; }
.c360-tile:hover .c360-tile__play, .c360-tile:focus-visible .c360-tile__play { opacity: 1; }
.c360-tile__play span { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--color-on-media);
  background: rgba(11,12,14,.4); display: flex; align-items: center; justify-content: center; }
.c360-tile__play svg { width: 18px; height: 18px; fill: var(--color-on-media); margin-left: 2px; }

.c360-tile__meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  padding: 22px 12px 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em;
  color: var(--color-on-media); text-transform: uppercase;
  background: linear-gradient(to top, rgba(8,9,11,.92), rgba(8,9,11,0));
  transform: translateY(100%); opacity: 0;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.c360-tile:hover .c360-tile__meta, .c360-tile:focus-visible .c360-tile__meta { transform: translateY(0); opacity: 1; }
.c360-tile__meta .muted { color: rgba(237,238,240,.6); }
.c360-tile--9x16 .c360-tile__dur, .c360-tile--9x16 .c360-tile__ratio { bottom: 10px; }

@media (prefers-reduced-motion: reduce) {
  .c360-tile__meta, .c360-tile__play { transition: none; }
}

/* ---- Input (DS form field - ported for parity; not mounted on the page) ---- */
.c360-field { display: flex; flex-direction: column; gap: 6px; }
.c360-field__label {
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--color-text-muted);
}
.c360-field__req { color: var(--color-accent-ink); margin-left: 2px; }
.c360-field__control {
  font-family: var(--font-body); font-size: var(--text-16); color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius); padding: 11px 12px; width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out);
}
textarea.c360-field__control { resize: vertical; min-height: 96px; }
.c360-field__control::placeholder { color: var(--color-text-faint); }
.c360-field__control:focus { outline: none; border-color: var(--color-brand); }
.c360-field--error .c360-field__control { border-color: var(--color-danger); }
.c360-field--error .c360-field__help { color: var(--color-danger); }
.c360-field__control:disabled { background: var(--color-surface-sunk); color: var(--color-text-faint); cursor: not-allowed; }
.c360-field__help { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; color: var(--color-text-muted); }

/* ===========================================================
   SITE LAYOUT (ported from ui_kits/website/index.html)
   Static page (no fixed-height SPA shell); the document scrolls
   normally so anchor nav + sticky header behave for SSG.
   =========================================================== */

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  background: var(--color-surface); color: var(--color-accent-ink);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius); padding: 10px 14px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---- Header ---- */
/* The template-part wrapper div is exactly header-height, which gives the
   sticky header a zero stick range (it scrolled away with the page). Dissolve
   the wrapper from layout so the header sticks against the page itself. */
.wp-block-template-part:has(> .site-header) { display: contents; }
.site-header { position: sticky; top: 0; z-index: 30; background: transparent;
  border-bottom: 1px solid transparent; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.site-header.is-solid { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.site-header__inner { max-width: var(--content-max); margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; gap: 24px; }
.site-header__logo { display: flex; align-items: center; }
.site-header__logo img { height: 22px; width: auto; display: block; }
.site-nav { display: flex; gap: 2px; margin-left: 16px; }
.site-nav__item { position: relative; font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-text-muted); background: none; border: 0; cursor: pointer; padding: 8px 12px; text-decoration: none; }
.site-nav__item::before { content: '>'; color: var(--color-accent-ink); margin-right: 6px; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.site-nav__item:hover { color: var(--color-text); }
.site-nav__item:hover::before { opacity: .5; }
.site-nav__item.is-active { color: var(--color-accent-ink); }
.site-nav__item.is-active::before { opacity: 1; }
.site-nav__item.is-active::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--color-brand); }
.site-nav__item:focus-visible { outline: 2px solid var(--color-accent-hover); outline-offset: -2px; }
/* Two classes so WP core's flex-layout child margin reset (body .is-layout-flex
   > * { margin: 0 }) cannot flatten the auto margin that pushes the language
   switch + menu toggle flush right. */
.site-header__inner > .site-header__right,
.site-header__right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.site-nav-toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--color-border-strong); border-radius: var(--radius); color: var(--color-text);
  cursor: pointer; padding: 0; }
.site-nav-toggle:focus-visible { outline: 2px solid var(--color-accent-hover); outline-offset: 2px; }
.site-nav-toggle svg { width: 18px; height: 18px; display: block; }

/* ---- Hero ---- */
.hero { max-width: var(--content-max); margin: 0 auto; padding: 56px 24px 96px;
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; }
.hero__frame { position: relative; aspect-ratio: 16/9; border: 1px solid var(--color-border); border-radius: var(--radius);
  /* Media constant - scheme-independent: dark poster placeholder behind the hero poster. */
  background: radial-gradient(120% 90% at 65% 25%, #1d2127 0%, #101216 55%, #0a0c0e 100%);
  box-shadow: var(--shadow-media); cursor: pointer; overflow: hidden; padding: 0; width: 100%; color: var(--color-on-media); }
.hero__frame:focus-visible { outline: 2px solid var(--color-accent-hover); outline-offset: 3px; }
.hero__scrim { position: absolute; inset: 0; background: var(--scrim-poster); }
.hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.02); }
.hero__topline { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; align-items: center; justify-content: space-between; z-index: 2; }
.hero__tc { font-family: var(--font-mono); font-size: 12px; color: rgba(237,238,240,.75); letter-spacing: .04em; }
.hero__play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%;
  border: 1px solid var(--color-on-media); background: rgba(11,12,14,.35); color: var(--color-on-media);
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--dur-base) var(--ease-out); z-index: 2; }
.hero__frame:hover .hero__play, .hero__frame:focus-visible .hero__play { background: rgba(11,12,14,.55); }
.hero__play svg { width: 26px; height: 26px; margin-left: 3px; }
.hero__reel-tag { position: absolute; bottom: 16px; left: 16px; z-index: 2; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .08em; color: var(--color-on-media); text-transform: uppercase; }
.hero__topline .c360-live { color: var(--color-on-media); }

.hero__copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.hero__headline { font-size: clamp(40px, 8vw, 64px); color: var(--color-text); letter-spacing: .05em; margin: 4px 0; }
.hero__sub { font-family: var(--font-body); font-size: 19px; line-height: 1.5; color: var(--color-text-muted); max-width: 46ch; margin: 0; }
.hero__cta { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; }

/* ---- Section heads ---- */
.section-head { max-width: var(--content-max); margin: 0 auto 28px; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* ---- Work ---- */
.work-section { padding: 64px 0 32px; border-top: 1px solid var(--color-border); }
.work-grid { max-width: var(--content-max); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.work-grid__cell.is-portrait { grid-row: span 2; max-width: 280px; }
.empty { max-width: var(--content-max); margin: 0 auto; padding: 40px 24px; font-family: var(--font-mono);
  color: var(--color-text-muted); }

/* ---- Logo wall (v0.3.0 native refactor) ----
   Replaces the former inline-styled .work-grid row + client spans. A centered
   row of muted client names; the 7-column grid mirrors the previous layout and
   collapses on narrow viewports. Editable core paragraphs carry the names. */
.c360-logo-wall { max-width: var(--content-max); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 24px; align-items: center; }
.c360-logo-wall__name { font-family: var(--font-display); font-weight: 500; font-size: var(--text-23);
  text-align: center; color: var(--color-text-muted); margin: 0; letter-spacing: 0.01em; }
@media (max-width: 1024px) { .c360-logo-wall { grid-template-columns: repeat(4, 1fr); row-gap: 16px; } }
@media (max-width: 680px) { .c360-logo-wall { grid-template-columns: repeat(3, 1fr); } }

/* ---- Services ---- */
.services { padding: 96px 0 32px; }
.services__grid { max-width: var(--content-max); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ---- About ---- */
.about { max-width: var(--content-max); margin: 0 auto; padding: 96px 24px 32px;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; border-top: 1px solid var(--color-border); }
.about__head { font-size: clamp(28px, 5vw, 40px); color: var(--color-text); letter-spacing: .03em; margin: 14px 0 0; }
.about__body { font-family: var(--font-body); color: var(--color-text-muted); font-size: 17px; line-height: 1.6; margin: 18px 0 0; max-width: 56ch; }
.about__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; align-self: start; }
.about__stat { background: var(--color-surface); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.about__stat-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-faint); }
.about__stat-k::before { content: '> '; color: var(--color-accent-ink); }
.about__stat-v { font-family: var(--font-display); font-weight: 500; font-size: 23px; color: var(--color-text); letter-spacing: .02em; line-height: 1.1; }
/* Native-block parity (v0.3.0): the label + stat key/value are now editable
   core paragraphs. The .about__stat flex column gap drives the rhythm and the
   heading/body keep their own top margins, so neutralize the converted
   paragraphs' default WP block margins to keep spacing identical. */
.about > div > .c360-label { margin: 0; }
.about__stat > .about__stat-k,
.about__stat > .about__stat-v { margin: 0; }

/* ---- Contact ---- */
.contact { max-width: var(--content-max); margin: 0 auto; padding: 96px 24px; display: grid;
  grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; border-top: 1px solid var(--color-border); }
.contact__left { display: flex; flex-direction: column; align-items: flex-start; }
.contact__head { font-size: clamp(30px, 6vw, 40px); color: var(--color-text); letter-spacing: .04em; margin: 14px 0 0; }
.contact__note { font-family: var(--font-body); color: var(--color-text-muted); font-size: 16px; margin: 16px 0 22px; line-height: 1.55; max-width: 42ch; }
.contact__details { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.contact__item { background: var(--color-surface); padding: 26px 24px; display: flex; flex-direction: column; gap: 9px;
  text-decoration: none; transition: background var(--dur-base) var(--ease-out); }
/* v0.3.0 native refactor: the cards are divs now (the email is an inner link),
   so the whole-card affordance the old a.contact__item carried is restored on
   any card that CONTAINS a link - same hover background / focus ring / value
   color as the v0.2.0 anchor card. */
.contact__item:has(.contact__v a) { cursor: pointer; }
.contact__item:has(.contact__v a):hover { background: var(--color-surface-2); }
.contact__item:has(.contact__v a):focus-within { outline: 2px solid var(--color-accent-hover); outline-offset: -2px; }
.contact__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-faint); }
.contact__k::before { content: '> '; color: var(--color-accent-ink); }
.contact__v { font-family: var(--font-display); font-weight: 500; font-size: 21px; color: var(--color-text); letter-spacing: .01em; line-height: 1.2; }
.contact__item:has(.contact__v a):hover .contact__v { color: var(--color-accent-ink); }
.contact__sub { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-muted); letter-spacing: .03em; }

/* ---- Social line icons (contact) ----
   v0.3.0 native refactor: the section is now editable core blocks, so the icons
   are scheme-aware CSS mask icons painted on empty <a> elements (no inline SVG /
   no core/html). background:currentColor flips with the active style variation
   (ink in light, light ink in dark) and follows the hover color, preserving the
   original currentColor behavior. */
.contact__social { display: flex; align-items: center; gap: 14px; margin: 0; }
.contact__social-link { display: inline-flex; align-items: center; justify-content: center; color: var(--color-text);
  width: 20px; height: 20px;
  transition: color var(--dur-base) var(--ease-out); }
.contact__social-link:hover, .contact__social-link:focus-visible { color: var(--color-text); }
.contact__social-link:focus-visible { outline: 2px solid var(--color-accent-hover); outline-offset: 3px; border-radius: 2px; }
.contact__social-link svg { display: block; }
.contact__social-link::before {
  content: ''; width: 20px; height: 20px; display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.contact__social-link--youtube::before {
  -webkit-mask-image: url('../img/icon-youtube.svg'); mask-image: url('../img/icon-youtube.svg');
}
.contact__social-link--instagram::before {
  -webkit-mask-image: url('../img/icon-instagram.svg'); mask-image: url('../img/icon-instagram.svg');
}

/* Native-block parity (v0.3.0): the contact prose + detail items are now
   editable core paragraphs. The .contact__left + .contact__item flex columns
   drive the rhythm (the heading/note keep their own margins), so neutralize the
   converted paragraphs' default WP block margins to keep spacing identical. The
   email value is now an inner link styled to match the previous .contact__v. */
.contact__left > .c360-label,
.contact__item > .contact__k,
.contact__item > .contact__v,
.contact__item > .contact__sub { margin: 0; }
.contact__item > .contact__v a { color: inherit; text-decoration: none; }
.contact__item > .contact__v a:hover { color: var(--color-accent-ink); }
.contact__cta { margin-top: 22px; }
.contact__cta .wp-block-button { margin: 0; }
.contact__cta .wp-block-button__link {
  font-size: 14px; min-height: 50px; padding: 14px 26px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---- Footer ---- */
.site-footer { border-top: 1px solid var(--color-border); background: var(--color-surface); }
.site-footer__inner { max-width: var(--content-max); margin: 0 auto; padding: 56px 24px 32px; display: grid;
  grid-template-columns: 1fr 2fr; gap: 48px; }
.site-footer__brand img { height: 20px; width: auto; }
.site-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.site-footer__cols .footer-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-faint); display: block; margin-bottom: 12px; }
.site-footer__cols a, .site-footer__cols span.footer-link { display: block; font-family: var(--font-body); font-size: 14px; color: var(--color-text-muted);
  padding: 4px 0; cursor: pointer; text-decoration: none; }
.site-footer__cols a:hover { color: var(--color-accent-ink); }
/* Social icon links in the footer contact column. Reuse the contact section's
   .contact__social-link icon-button styling; the wrapper just lays the two
   icons out inline with the surrounding footer links. */
.site-footer__social { display: inline-flex; align-items: center; gap: 14px; padding: 4px 0; }
.site-footer__social .contact__social-link { color: var(--color-text-muted); }
.site-footer__social .contact__social-link:hover, .site-footer__social .contact__social-link:focus-visible { color: var(--color-text); }
.site-footer__legal { max-width: var(--content-max); margin: 0 auto; padding: 20px 24px; border-top: 1px solid var(--color-border);
  font-family: var(--font-mono); font-size: 12px; color: var(--color-text-muted); letter-spacing: .03em;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.site-footer__legal a { color: var(--color-brand); }
.site-footer__legal-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.site-footer__legal-links a { color: var(--color-text-muted); text-decoration: none; }
.site-footer__legal-links a:hover, .site-footer__legal-links a:focus-visible { color: var(--color-brand); }

/* ---- Legal pages (constrained reading column) ---- */
.c360-legal { max-width: 66ch; }
.c360-legal > * { max-width: 66ch; }
.c360-legal h2 { margin-top: 2.5rem; }
.c360-legal h3 { margin-top: 2rem; }
.c360-legal h2:first-child, .c360-legal > .c360-label:first-child { margin-top: 0; }
.c360-legal p, .c360-legal li { color: var(--color-text-muted); line-height: 1.65; }
.c360-legal a { color: var(--color-accent-ink); }
.c360-legal .c360-legal__updated { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  color: var(--color-text-faint); text-transform: uppercase; }
.c360-legal table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 1.5rem 0; }
.c360-legal th, .c360-legal td { border: 1px solid var(--color-border); padding: 8px 10px; text-align: left;
  vertical-align: top; color: var(--color-text-muted); }
/* Column headers (thead) carry the strong mono label treatment. */
.c360-legal thead th { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-text-faint); background: var(--color-surface-sunk); }
/* Row headers (tbody th[scope=row]) are accessible markers, not mono labels:
   keep body type so cookie names / category names read naturally. */
.c360-legal tbody th { font-family: var(--font-body); font-weight: 500; color: var(--color-text); }
/* Wide inventory/category tables scroll horizontally on small screens instead
   of overflowing the reading column. */
.c360-legal__table { overflow-x: auto; max-width: 100%; }

/* ---- Lightbox ---- */
.lightbox { position: fixed; inset: 0; z-index: 50; background: var(--scrim-lightbox);
  display: flex; align-items: center; justify-content: center; padding: 40px; }
.lightbox__panel { width: min(960px, 92vw); }
.lightbox__panel.is-portrait { width: min(420px, 70vh); }
.lightbox__player { position: relative; aspect-ratio: 16/9; border: 1px solid var(--color-border-strong); border-radius: var(--radius);
  /* Media constant - scheme-independent: dark player backdrop behind the video iframe. */
  background: radial-gradient(120% 90% at 60% 30%, #1b1f24, #0c0e11); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lightbox__panel.is-portrait .lightbox__player { aspect-ratio: 9/16; }
.lightbox__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lightbox__meta { display: flex; align-items: center; justify-content: space-between; padding: 14px 2px 0; gap: 16px; }
.lightbox__title { font-family: var(--font-display); font-weight: 500; font-size: 19px; color: var(--color-on-media); display: block; }
.lightbox__sub { font-family: var(--font-mono); font-size: 12px; color: rgba(237,238,240,.6); letter-spacing: .04em; text-transform: uppercase; }
.lightbox__right { display: flex; align-items: center; gap: 16px; }
.lightbox__dur { font-family: var(--font-mono); font-size: 13px; color: var(--color-on-media); }
.lightbox__close { font-family: var(--font-mono); font-size: 13px; color: rgba(237,238,240,.65); background: none; border: 0; cursor: pointer; letter-spacing: .04em; }
.lightbox__close:hover { color: var(--color-brand); }
.lightbox__close:focus-visible { outline: 2px solid var(--color-accent-hover); outline-offset: 2px; }

/* ---- Lightbox invalid-id fallback card (built by c360-video.js) ---- */
.consent { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 22px 24px; max-width: 420px; display: flex; flex-direction: column; gap: 12px; }
.consent__mono { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-muted); letter-spacing: .05em; }

/* ---- Privacy page "Cookies and embedded content" icon ---- */
/* Stroke cookie SVG in the section heading; accent-ink so it flips with the
   light/dark schemes and stays crisp at small sizes. */
.c360-legal__cookie-icon { flex-shrink: 0; color: var(--color-accent-ink); vertical-align: -2px; margin-right: 7px; }

/* ===========================================================
   RESPONSIVE (kit breakpoints)
   =========================================================== */
@media (max-width: 1024px) {
  .work-grid, .services__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 36px; padding: 36px 20px 64px; }
  .about { grid-template-columns: 1fr; gap: 32px; padding: 72px 20px 24px; }
  .contact { grid-template-columns: 1fr; gap: 32px; padding: 72px 20px; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 680px) {
  .site-header__inner { padding: 12px 16px; gap: 12px; }
  .site-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0;
    background: var(--color-surface); border-bottom: 1px solid var(--color-border);
    box-shadow: 0 12px 28px -18px rgba(0,0,0,.4); padding: 6px; display: none; }
  .site-nav.is-open { display: flex; }
  .site-nav__item { padding: 13px 14px; text-align: left; }
  .site-nav__item.is-active::after { display: none; }
  .site-nav-toggle { display: inline-flex; }
  .work-grid, .services__grid { grid-template-columns: 1fr; }
  .work-grid { max-width: 460px; }
  .work-grid__cell.is-portrait { grid-row: auto; max-width: none; margin: 0 auto; }
  .work-section { padding: 48px 0 24px; }
  .services { padding: 64px 0 24px; }
  .about__stats, .contact__details { grid-template-columns: 1fr; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; }
  .lightbox { padding: 16px; }
  .hero { padding: 28px 16px 56px; }
  .contact { padding: 56px 16px; }
  .about { padding: 56px 16px 24px; }
}
@media (max-width: 420px) {
  .site-footer__cols { grid-template-columns: 1fr; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta > * { width: 100%; }
}

/* ===========================================================
   WordPress block <-> ported class bridge
   Maps the design layout onto the markup the block templates +
   patterns emit, plus on-brand styling for core blocks, the
   work-grid core/query loop, and Contact Form 7.
   =========================================================== */

/* Strip default WP block margins inside our full-bleed sections so the ported
   layout padding is the single source of vertical rhythm. */
.c360-section { width: 100%; }
.c360-section > .wp-block-group__inner-container { width: 100%; }

/* Header / footer template parts use the ported chrome classes directly. */
.wp-site-blocks > header.site-header,
.wp-site-blocks > footer.site-footer { display: block; }

/* Primary nav rendered by core/navigation inside .site-nav. */
.site-nav .wp-block-navigation__container { display: contents; }
.site-nav .wp-block-navigation-item__content {
  position: relative; font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-text-muted); text-decoration: none; padding: 8px 12px;
}
.site-nav .wp-block-navigation-item__content::before { content: '>'; color: var(--color-accent-ink); margin-right: 6px; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.site-nav .wp-block-navigation-item__content:hover { color: var(--color-text); }
.site-nav .wp-block-navigation-item__content:hover::before { opacity: .5; }
.site-nav .current-menu-item .wp-block-navigation-item__content { color: var(--color-accent-ink); }
.site-nav .current-menu-item .wp-block-navigation-item__content::before { opacity: 1; }

/* Footer columns rendered by core/navigation. */
.site-footer__cols .wp-block-navigation__container { display: block; }
.site-footer__cols .wp-block-navigation-item__content {
  display: block; font-family: var(--font-body); font-size: 14px; color: var(--color-text-muted);
  padding: 4px 0; text-decoration: none;
}
.site-footer__cols .wp-block-navigation-item__content:hover { color: var(--color-accent-ink); }

/* Work grid powered by core/query over c360_project. */
.work-grid .wp-block-post-template {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start;
}
.work-grid .wp-block-post-template > li { margin: 0; }
.work-grid .wp-block-post-featured-image,
.work-grid .wp-block-post-featured-image img {
  width: 100%; display: block; border-radius: var(--radius);
}
.work-grid .wp-block-post-featured-image {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--color-border);
  /* Media constant - scheme-independent: dark poster placeholder behind the featured image. */
  background: linear-gradient(135deg, #1b1f24 0%, #0e1013 60%, #141619 100%);
}
.work-grid .wp-block-post-featured-image img { height: 100%; object-fit: cover; }
@media (max-width: 1024px) { .work-grid .wp-block-post-template { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .work-grid .wp-block-post-template { grid-template-columns: 1fr; } }

/* Section group full-bleed helper used by patterns. */
.c360-fullbleed { padding-top: 0; padding-bottom: 0; }

/* ---- Native-block layout-gap parity (v0.3.0 native refactor) ----
   The refactored sections are now core/group wrappers whose layout injects a
   flow block-gap. WP emits that gap through a low-specificity :where() selector
   (effectively 0,0,0) precisely so themes can override it, so these
   class-scoped rules (>= 0,1,0) win. For the GRID/FLEX containers the ported CSS
   owns the rhythm via its own `gap` and the children carry no intended margins,
   so the injected block-gap is neutralized to keep the spacing identical to
   v0.2.0. */
.hero > *,
.hero__copy > *,
.about > *,
.about__stats > *,
.contact > *,
.contact__details > *,
.services > *,
.services__grid > *,
.c360-service > *,
.section-head > * { margin-block-start: 0; margin-block-end: 0; }

/* Flow columns relied on explicit element margins (not a gap), so WP's layout
   reset would flatten them; restore the original asymmetric spacing. */
.about > div > .about__head { margin-block: 14px 0; }
.about > div > .about__body { margin-block: 18px 0; }
.contact__left > .contact__head { margin-block: 14px 0; }
.contact__left > .contact__note { margin-block: 16px 22px; }
/* Hero CTA keeps its small extra top offset above the flex-gap rhythm. */
.hero__copy > .hero__cta { margin-block-start: 10px; }

/* ---- Hero CTA: native core/buttons parity (v0.3.0 native refactor) ----
   The hero copy column is now editable native blocks; its CTA row uses
   core/buttons. theme.json already paints core buttons brand-orange / mono /
   2px-radius (the primary look) and the is-style-outline variation gives the
   secondary look. These rules restore the original --lg sizing and the exact
   secondary border/hover so the rendered CTAs stay visually identical. The
   .c360-hero-reel primary button opens the showreel via the JS hook. */
.hero__cta .wp-block-button { margin: 0; }
.hero__cta .wp-block-button__link {
  font-size: 14px; min-height: 50px; padding: 14px 26px;
  display: inline-flex; align-items: center; justify-content: center;
}
.hero__cta .is-style-outline > .wp-block-button__link {
  background: transparent; border: 1px solid var(--color-border-strong); color: var(--color-text);
}
.hero__cta .is-style-outline > .wp-block-button__link:hover {
  border-color: var(--color-brand); color: var(--color-accent-ink); background: transparent;
}
.c360-hero-reel > .wp-block-button__link { cursor: pointer; }

/* ---- Contact Form 7 on-brand styling ---- */
.wpcf7 { max-width: 560px; }
.wpcf7-form p { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.wpcf7-form label {
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--color-text-muted);
}
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-textarea,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  font-family: var(--font-body); font-size: var(--text-16); color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius); padding: 11px 12px; width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.wpcf7-form textarea { resize: vertical; min-height: 96px; }
.wpcf7-form input::placeholder, .wpcf7-form textarea::placeholder { color: var(--color-text-faint); }
.wpcf7-form input:focus, .wpcf7-form textarea:focus { outline: none; border-color: var(--color-brand); }
.wpcf7-form .wpcf7-submit {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--color-brand); color: var(--color-on-accent);
  border: 1px solid transparent; border-radius: var(--radius);
  padding: 12px 20px; min-height: 44px; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.wpcf7-form .wpcf7-submit:hover { background: var(--color-accent-hover); }
.wpcf7-form .wpcf7-submit:active { background: var(--color-accent-press); }
.wpcf7-form .wpcf7-submit:focus-visible { outline: 2px solid var(--color-accent-hover); outline-offset: 2px; }
.wpcf7-not-valid-tip { font-family: var(--font-mono); font-size: 12px; color: var(--color-danger); letter-spacing: .03em; }
.wpcf7-form-control.wpcf7-not-valid { border-color: var(--color-danger); }
.wpcf7-response-output {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .03em;
  border-radius: var(--radius); padding: 12px 14px; margin: 16px 0 0;
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--color-success); color: var(--color-success); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: var(--color-danger); color: var(--color-danger); }