/* Private cinematic palette and approved display-font trial. */
@font-face {
  font-family: 'HNRX Bodoni Condensed C';
  src: url('/cinematic/BodoniCondC.otf') format('opentype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --font-display: 'HNRX Bodoni Condensed C', 'Bodoni MT', 'Times New Roman', serif;
  --bone-black: #071c1a;
  --umber: #102b27;
  --titanium: #f1ede3;
  --ash: #b8c7bd;
  --plum: #923b42;
  /* One approved interface red, including display and hover accents. */
  --accent-display: #923b42;
  --plum-light: #923b42;
  --accent-readable: #f1ede3;
  color-scheme: only dark;
  --line-hair: 1px solid rgba(184, 199, 189, .25);
}
body { isolation: isolate; background: var(--bone-black); }
/* The shared CTA row supplies its own heading gap. Do not offset only its
   button with the standalone closing-button margin, including when wrapped. */
.close-cta .hero__ctas > .btn { margin-top: 0; }
.brand-logo-crop { position: relative; display: block; width: min(100%, 640px); aspect-ratio: 1960 / 526; overflow: hidden; margin-block: var(--space-4); }
.brand-system-board__logo .brand-logo-crop img { position: absolute; left: -14.693878%; top: -181.749049%; width: 122.448980%; max-width: none; height: auto; margin: 0; }
.brand-swatches > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.brand-swatches > div:last-child:nth-child(odd) i { aspect-ratio: 32 / 6; }
h1, h2, h3, .display, .thesis__num { font-synthesis: none; }
/* Homepage-only hierarchy adjustment for the narrower Bodoni display face.
   Keep the animated divider above the content rather than through the markers. */
body[data-cinematic="motion"] .process__steps {
  padding-top: clamp(1.5rem, 2vw, 2rem);
  row-gap: 2.5rem;
}
body[data-cinematic="motion"] .process__steps::before { top: 0; }
body[data-cinematic="motion"] .step__num {
  display: block;
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  line-height: 1.2;
}
body[data-cinematic="motion"] .step h3 {
  font-size: clamp(1.875rem, 2.6vw, 2.625rem);
  line-height: 1.15;
  margin-block: .75rem 1rem;
}
body[data-cinematic="motion"] .tier h3 {
  font-size: clamp(2rem, 2.8vw, 2.875rem);
  line-height: 1.15;
}
body[data-cinematic="motion"] .tier p { margin-top: 1rem; }
.cinematic-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #071c1a url('/cinematic/burning-flowers-still.jpg') 50% 50% / cover no-repeat;
}
.cinematic-backdrop video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.cinematic-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 19, 17, .77) 0%, rgba(4, 19, 17, .48) 41%, rgba(4, 19, 17, .13) 74%, rgba(4, 19, 17, .18)), linear-gradient(0deg, rgba(7,28,26,.65), transparent 35%);
}
body[data-cinematic] .hero { background: transparent; }
.hero h1, .hero__sub { text-shadow: 0 2px 26px rgba(0, 8, 7, .68); }
/* Recraft trial: display the supplied original, without redrawing its letters.
   Crop its empty margins in CSS; screen removes the black paper over the film. */
.hero h1.hero__recraft { width: min(100%, 1000px); line-height: 0; }
.slogan-accessible { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.slogan-art { display: block; position: relative; width: 100%; aspect-ratio: 880 / 380; overflow: hidden; mix-blend-mode: screen; }
.slogan-art img { position: absolute; width: 116.363636%; max-width: none; height: auto; left: -8.636364%; top: -85.789474%; filter: grayscale(1) contrast(1.12); }
.hero h1.hero__recraft { position: relative; }
.slogan-ink { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.brands-underline { display: none; }
body[data-slogan-ink="red"]:not([data-slogan-layout="original"]) .slogan-art img { clip-path: polygon(0 0,100% 0,100% 50.585938%,59.960938% 50.585938%,59.960938% 68.945313%,100% 68.945313%,100% 100%,0 100%); }
body[data-slogan-ink="red"]:not([data-slogan-layout="original"]) .slogan-ink { display: block; }
body[data-slogan-layout="left"] .hero__recraft { width: min(560px, 43vw); }
body[data-slogan-layout="left"] .hero__sub { max-width: min(32ch, 43vw); }
body[data-slogan-layout="center"] .hero__content { text-align: center; }
body[data-slogan-layout="center"] .hero__recraft { width: min(650px, 65vw); margin-inline: auto; }
body[data-slogan-layout="center"] .hero__sub { margin-inline: auto; }
body[data-slogan-layout="center"] .hero__ctas { justify-content: center; }
body[data-slogan-layout="center"] .hero__meta { left: 50%; transform: translateX(-50%); white-space: nowrap; }










@media (max-width: 900px) {
  /* Mobile homepage hierarchy: Bodoni needs more scale than the old rounded face.
     Leave the image-based hero, desktop and secondary pages untouched. */
  body[data-cinematic="motion"] main > .section h2 {
    font-size: clamp(2.375rem, 7.7vw, 3.5rem);
    line-height: 1.08;
  }
  body[data-cinematic="motion"] [data-chrome-until] h2 {
    font-size: clamp(2.75rem, 10.5vw, 4rem);
    line-height: 1.06;
    text-align: center;
    text-wrap: balance;
    margin-top: .5rem;
  }
  body[data-cinematic="motion"] .band h3,
  body[data-cinematic="motion"] .motion-card h3,
  body[data-cinematic="motion"] .work-tile h3 {
    font-size: clamp(1.875rem, 6.5vw, 2.5rem);
    line-height: 1.12;
  }
  body[data-cinematic="motion"] .thesis__close {
    font-size: clamp(1.875rem, 6.5vw, 2.5rem);
    line-height: 1.15;
  }
  /* Approved mobile treatment: restore original ivory letter texture, retaining
     the oxblood CONTENT strike and adding a separate oxblood BRANDS underline. */
  body[data-slogan-ink="red"]:not([data-slogan-layout="original"]) .slogan-art img { clip-path: none; }
  .slogan-ink .brands-shadow { display: none; }
  .slogan-ink .brands-underline { display: block; }
  body[data-slogan-layout="left"] .hero__recraft,
  body[data-slogan-layout="center"] .hero__recraft { width: 84%; max-width: 520px; margin-inline: auto; }
  body[data-slogan-layout="left"] .hero__content { text-align: center; }
  body[data-slogan-layout="left"] .hero__sub { margin-inline: auto; }
  body[data-slogan-layout="left"] .hero__ctas { justify-content: center; }
  body[data-slogan-layout="left"] .hero__meta { left: 50%; transform: translateX(-50%); white-space: nowrap; }
  body[data-slogan-layout="left"] .hero__sub { max-width: 34ch; }
  
  
}
.hero__sub { color: #e0e7de; }
.hero h1 .accent-word,
.thesis__num em,
.band:hover h3,
.motion-card:hover h3,
.service-film h3 a:hover,
.work-tile:hover h3,
.rail__card:hover h3,
.case-film__copy .display,
.brand-position__statement span,
.brand-type-sample--accent { color: var(--accent-display); }
.btn--primary:hover { background: var(--plum); color: var(--titanium); box-shadow: inset 0 0 0 1px var(--titanium); }
.hero .meta { color: #d0d9ce; }
.nav { background: linear-gradient(rgba(4, 19, 17, .64), rgba(4, 19, 17, .04)); }
.nav.is-solid { background: rgba(7, 28, 26, .96); }
/* Use the exact supplied PNG. Crop only its transparent margins in layout:
   alpha bounds are x=288, y=956, width=1960, height=526 on a 2400px square. */
.nav__logo-crop {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  aspect-ratio: 1960 / 526;
  overflow: hidden;
}
.nav__logo-crop .nav__logo-img {
  inset: auto;
  left: -14.693878%;
  top: -181.749049%;
  width: 122.448980%;
  max-width: none;
  height: auto;
  filter: none;
}
.nav__links a, .nav__dd-btn { color: var(--titanium); }
.grain { opacity: .018; }
.marquee { background: rgba(7, 28, 26, .82); }
main > .section, main > .section--tight { background: rgba(7, 28, 26, .94); }
main > [data-chrome-until] { background: linear-gradient(rgba(7, 28, 26, .78), rgba(7, 28, 26, .96)); }
body[data-cinematic="still"] .cinematic-backdrop::after {
  background: linear-gradient(90deg, rgba(4,19,17,.91), rgba(4,19,17,.53)), linear-gradient(0deg, rgba(7,28,26,.98), transparent 85%);
}
body[data-cinematic="still"] .page-hero { text-shadow: 0 2px 25px rgba(0,0,0,.55); }
body[data-cinematic="service-motion"] .cinematic-backdrop::after {
  background: linear-gradient(90deg, rgba(4,19,17,.7), rgba(4,19,17,.32)), linear-gradient(0deg, rgba(7,28,26,.85), transparent 75%);
}
body[data-cinematic="service-motion"] .page-hero { text-shadow: 0 2px 25px rgba(0,0,0,.7); }
body[data-cinematic="service-motion"] .page-hero p.lede { color: var(--titanium); }
.concepts, .offer-strip, .offer-included, .offer-boundary, .callout { background-color: var(--umber); }
.tier { background: rgba(7,28,26,.58); }
.offer-final { background: linear-gradient(135deg, #102b27, #2c191e); }
.footer { background: #061715; padding-bottom: 6rem; }







@media (max-width: 900px) {
  .cinematic-backdrop, .cinematic-backdrop video { background-position: 49% 50%; object-position: 49% 50%; }
  .cinematic-backdrop::after { background: linear-gradient(90deg, rgba(4,19,17,.74), rgba(4,19,17,.4)), linear-gradient(0deg, rgba(7,28,26,.8), transparent 50%); }
  
  .hero__meta { max-width: 100%; }
  input, textarea, select { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .cinematic-backdrop video { opacity: 0; }
  html { scroll-behavior: auto; }
}
body[data-motion-override="play"] .cinematic-backdrop video { opacity: 1; }

/* Production readability and controls; preserve the approved art direction. */
:root { --accent-display: #f1ede3; --text-mono: .75rem; --text-h3: clamp(1.75rem, 2.6vw, 2.5rem); }
/* Oxblood stays on buttons, linework and the desktop slogan. Essential text
   uses ivory instead of an inaccessible red-on-forest combination. */
.band:hover h3, .motion-card:hover h3, .work-tile:hover h3,
.rail__card:hover h3, .brand-position__statement span {
  text-decoration: underline;
  text-decoration-color: #923b42;
  text-underline-offset: .16em;
  text-decoration-thickness: .04em;
}
.field input:focus-visible, .field textarea:focus-visible,
.q-option:focus-visible, .chat-input input:focus-visible {
  outline: 2px solid #f1ede3; outline-offset: 3px;
}
.nav__links a, .nav__dd-btn, .nav__burger, .btn,
.chat-input button, .chat-close, .chat-chip { font-size: max(.875rem, 14px); }
.q-step h2 { font-size: clamp(2rem, 4.5vw, 3.6rem); }
.brand-system-board h3, .offer-two-lists h3,
.offer-process h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.ambient-control { position: fixed; bottom: max(12px, env(safe-area-inset-bottom)); left: max(12px, env(safe-area-inset-left)); z-index: 100; }
.ambient-control button { min-height: 44px; padding: 10px 14px; border: 1px solid #b8c7bd; border-radius: 3px; background: #071c1a; color: #f1ede3; font-size: 14px; }
.ambient-control button:focus-visible { outline: 2px solid #f1ede3; outline-offset: 3px; }
body:has(.mobile-menu.is-open) .ambient-control,
body:has(.chat-panel.is-open) .ambient-control { visibility: hidden; }
.footer { padding-bottom: 6rem; }
@media (min-width: 901px) {
  /* Dark edge separates the approved oxblood letterforms from the film. */
  .brands-shadow { filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000); }
}
@media (max-width: 900px) {
  .page-hero h1 { overflow-wrap: anywhere; }
  .brand-position__statement { overflow-wrap: anywhere; }
  .chat-trigger { max-width: calc(100vw - 170px); font-size: .75rem; padding: .75rem; }
}
@media (max-width: 380px) {
  .hero__meta { font-size: .625rem; letter-spacing: .06em; }
  .hero__ctas { gap: 1rem; }
  .nav__logo--art { width: 155px; }
}

/* vertical YouTube Short embeds in case-study film blocks */
.case-film__embed--vertical { aspect-ratio: 9 / 16; }

/* YouTube covers become in-page players, preserving their landscape frame. */
.youtube-inline-player { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.service-film__media > .youtube-inline-player { height: 100%; aspect-ratio: inherit; }
.youtube-inline-player:focus-visible { outline: 2px solid #f1ede3; outline-offset: 4px; }

/* Video service gallery: portrait collections and one widescreen film per row. */
.film-library { --film-gap: 1.5rem; }
.film-library > .wrap { max-width: 1128px; }
.film-library__index { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin-top: 2rem; padding-block: 1.25rem; border-block: var(--line-hair); }
.film-library__index a { display: inline-flex; align-items: center; gap: 1rem; min-height: 44px; font-family: var(--font-mono); font-size: .8rem; text-decoration: none; }
.film-library__index a span { color: var(--ash); font-size: .65rem; }
.film-library__index a:hover { text-decoration: underline; text-underline-offset: .4em; }
.film-library__group { padding-top: clamp(3rem, 7vw, 6rem); scroll-margin-top: 7rem; }
.film-library__heading { margin-bottom: 2rem; }
.film-library__heading h2 { margin-top: .75rem; font-size: clamp(2rem, 3.8vw, 3.25rem); }
.film-library__portraits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 2.5rem var(--film-gap); max-width: 1080px; margin: 0 auto; }
.film-library__portraits--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 712px; }
.film-library .service-film { padding-top: 0; border-top: 0; }
.film-library .service-film__media { border: var(--line-hair); }
.film-library .service-film__media video { object-fit: contain; }
.film-library .instagram-reel-launch { width: 100%; height: 100%; aspect-ratio: inherit; box-shadow: none; }
.film-library .instagram-reel-launch img { object-fit: contain; display: block; }
.film-library .instagram-reel-launch__play { width: 64px; }
.film-library .instagram-reel-launch__label { font-size: .7rem; }
.film-library .film-library__copy > .meta { font-size: .65rem; letter-spacing: .08em; }
.film-library .service-film h3 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
.film-library .service-film p { font-size: .95rem; line-height: 1.65; }
.film-library__project { display: inline-block; margin-top: 1rem; padding-block: .5rem; font-size: .9rem; }
.film-library .film-library__playback { font-size: .75rem; margin-top: .25rem; }
.film-library__feature { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); max-width: 1080px; margin: 3rem auto; }
.film-library__feature .service-film__media { aspect-ratio: 16 / 9; }
.film-library__feature .film-library__copy > .meta { margin-top: 0; }
.film-library__feature .service-film__media + .film-library__copy h3 { font-size: clamp(2.25rem, 3.5vw, 3.25rem); }
.film-library :is(a, button):focus-visible { outline: 2px solid #f1ede3; outline-offset: 4px; }
.film-library .service-film-note { padding-top: 2rem; border-top: var(--line-hair); }
@media (max-width: 800px) {
  .film-library__feature { grid-template-columns: 1fr; gap: 1.25rem; }
  .film-library__feature .film-library__copy { max-width: 38rem; }
  .film-library__portraits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .film-library__portraits > :last-child:nth-child(odd) { grid-column: 1 / -1; width: calc((100% - var(--film-gap)) / 2); justify-self: center; }
}
@media (max-width: 540px) {
  .film-library__portraits { grid-template-columns: 1fr; max-width: 360px; }
  .film-library__portraits > :last-child:nth-child(odd) { grid-column: auto; width: 100%; }
  .film-library__index { gap: .25rem 1.5rem; }
  .film-library__index a { font-size: .75rem; }
  .film-library__feature { margin-block: 2.5rem; }
}