/* Original Raw Elements identity, refined. Loaded after the established styles. */
:root {
  --gutter: clamp(1.25rem, 4.2vw, 4.5rem);
  --max: 1280px;
  --sand: #eee5d3;
  --stone: #c1b7a4;
  --muted: #a49985;
  --radius: 20px;
  --font-display: var(--serif);
  --cream: var(--sand);
}
html { scroll-padding-top: 7rem; }
body { line-height: 1.75; }
body::before { opacity: .045; }
h1, h2, h3 { line-height: 1.04; letter-spacing: -.025em; text-wrap: balance; }
h2 { font-size: clamp(2.4rem, 4.3vw, 4.6rem); }
p { color: var(--stone); }
a, button, summary, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, video:focus-visible {
  outline: 2px solid #e5c788;
  outline-offset: 5px;
}
.skip-link {
  position: fixed; top: .8rem; left: var(--gutter); z-index: 100;
  padding: .7rem 1rem; border-radius: 12px; background: var(--sand); color: var(--black);
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }
.site-header { padding-block: 1rem; }
.site-header.is-scrolled { background: rgba(8, 16, 12, .92); }
.brand-logo-frame { border-color: rgba(195, 164, 106, .25); border-radius: 14px; }
.brand-mark { min-height: 44px; }
.primary-nav { gap: .8rem; }
.primary-nav a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.primary-nav .nav-cta {
  padding: .8rem 1.25rem; color: #11170f; background: #c8ac76;
  border: 1px solid #c8ac76; border-radius: 999px;
}
.primary-nav .nav-cta:hover { background: #dfc38b; border-color: #dfc38b; }
.button { min-height: 52px; padding: 1rem 1.5rem; letter-spacing: .1em; font-size: .76rem; }
.button.primary { background: linear-gradient(125deg, #d8bd86, #bd9d63); box-shadow: 0 8px 32px rgba(195, 164, 106, .12); }
.button.primary:hover { box-shadow: 0 12px 38px rgba(195, 164, 106, .2); }
.text-link { min-height: 44px; align-items: center; letter-spacing: .08em; line-height: 1.5; }
.eyebrow { letter-spacing: .16em; line-height: 1.6; margin-bottom: 1rem; }
.section { padding-block: clamp(4.5rem, 8vw, 8rem); }
.cinematic-copy { max-width: 49rem; }
.cinematic-hero { --hero-image-brightness: 1.02; }
.cinematic-copy h1 { max-width: 14ch; font-size: clamp(3.2rem, 5.5vw, 5.8rem); line-height: .98; }
.cinematic-copy .hero-lede { max-width: 32rem; font-size: clamp(1rem, 1.25vw, 1.13rem); line-height: 1.8; }
.cinematic-brand { margin-bottom: 1rem; }
.cinematic-copy .eyebrow { max-width: 32rem; }
.cinematic-visual { clip-path: inset(var(--hero-frame-y) 0 var(--hero-frame-y) round var(--hero-radius)); }
.cinematic-image { filter: saturate(.92) contrast(1.03) brightness(var(--hero-image-brightness)); }
.cinematic-vignette {
  background: linear-gradient(90deg, rgba(4, 10, 7, .85), rgba(4, 10, 7, .65) 31%, rgba(4, 10, 7, .08) 65%, rgba(4, 10, 7, .12)),
    linear-gradient(180deg, rgba(4, 10, 7, .28), transparent 40%, rgba(4, 10, 7, .8)),
    radial-gradient(ellipse at 65% 35%, rgba(195, 164, 106, .03), transparent 65%);
}
.cinematic-scroll-story h2 { max-width: 12ch; font-size: clamp(3rem, 5.6vw, 6rem); line-height: .98; }
.cinematic-scroll-story p { max-width: 29rem; }
.cinematic-proof-item { padding-block: 1.25rem; }
.featured-film::before, .strategy-board::before, .strategy-board::after { display: none; }
.featured-film { grid-template-columns: minmax(18rem, .65fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5.5rem); }
.featured-film-copy h2, .visual-index-copy h2, .service-proof-copy h2, .contact-moodboard-copy h2 { max-width: 15ch; font-size: clamp(2.6rem, 4vw, 4.3rem); }
.featured-film-points { gap: .6rem; }
.featured-film-points span { padding: .55rem .75rem; border-radius: 999px; font-size: .63rem; letter-spacing: .08em; }
.featured-film-dossier { border-radius: 16px; box-shadow: none; }
.featured-film-player, .production-system-media { border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0, 0, 0, .2); }
.featured-film-player::before, .production-system-media::before { display: none; }
.featured-film-player video, .production-system-video { object-fit: contain; display: block; }
.featured-film-player figcaption { font-size: .78rem; line-height: 1.65; padding: .9rem 1.2rem; }
.featured-film-assets { display: none; } /* Its three points are already shown beside the film. */
.strategy-board { background: radial-gradient(ellipse at 12% 20%, #172c21, transparent 60%), #0b1711; }
.strategy-board-shell { grid-template-areas: 'copy visual' 'rail visual'; row-gap: 2.5rem; align-items: center; }
.strategy-board-copy h2 { max-width: 12ch; font-size: clamp(3rem, 5.2vw, 5.5rem); }
.strategy-board-copy p:not(.eyebrow) { max-width: 31rem; line-height: 1.8; }
.strategy-outcomes { display: none; } /* The hero already explains these outcomes. */
.strategy-visual-system { min-height: 35rem; gap: 1rem; }
.strategy-visual-card { border-radius: var(--radius); border: 0; box-shadow: 0 20px 55px rgba(0, 0, 0, .2); }
.strategy-visual-card::before { display: none; }
.strategy-visual-card figcaption { inset-inline: 1.3rem; bottom: 1.3rem; }
.strategy-visual-card figcaption strong { font-size: 1.65rem; line-height: 1.1; max-width: 15ch; }
.strategy-delivery-rail { border: 0; padding: 0; gap: .7rem 1.25rem; flex-wrap: wrap; justify-content: flex-start; }
.strategy-delivery-rail span { font-size: .65rem; letter-spacing: .12em; }
.visual-index { align-items: center; grid-template-columns: minmax(17rem, .4fr) minmax(0, 1fr); }
.visual-card, .media-panel, .portfolio-cell, .service-media,
.industry-tile, .case-study-frame, .case-study-image, .landing-media { border-radius: var(--radius); }
.visual-card, .industry-tile { border-color: rgba(232, 222, 201, .1); }
.visual-card img { filter: none; }
.media-panel, .portfolio-cell, .service-media { box-shadow: 0 20px 55px rgba(0, 0, 0, .22); }
.industry-marquee { gap: 1.25rem; background: transparent; padding: 0; overflow: visible; }
.industry-tile { transform: none; transition: border-color 250ms ease, transform 350ms ease; }
.industry-tile:hover { transform: translateY(-5px); border-color: rgba(195, 164, 106, .45); }
.industry-tile-media { transition: transform 700ms cubic-bezier(.2,.7,.2,1); }
.industry-tile-media { filter: saturate(.96) contrast(1.03) brightness(.94); }
.industry-tile::before { background: linear-gradient(180deg, rgba(4,10,7,.65), rgba(4,10,7,.08) 42%, rgba(4,10,7,.86)); }
.industry-tile:hover::before { opacity: 1; }
.industry-tile:hover .industry-tile-media { transform: scale(1.04); }
.industry-tile span { line-height: 1.1; }
.industry-tile p { color: #eee5d3; font-size: .9rem; line-height: 1.65; }
.story-copy h2, .portfolio-copy h2 { font-size: clamp(2.6rem, 4.3vw, 4.6rem); }
.portfolio-grid { gap: 1rem; }
.proof-columns, .process-steps, .regional-grid {
  background: none; border: 0; gap: 1.5rem;
}
.proof-item, .process-steps article, .regional-grid article {
  background: rgba(232, 222, 201, .025); border: 1px solid rgba(232, 222, 201, .1);
  border-radius: 18px; padding: clamp(1.4rem, 2.5vw, 2.4rem);
}
.service-copy h2 { font-size: clamp(2.4rem, 4vw, 4.2rem); }
.service-block { scroll-margin-top: 5.5rem; }
.service-block + .service-block { border-top-color: rgba(232, 222, 201, .08); }
.deliverables { gap: .55rem 1.25rem; font-size: .9rem; }
.service-menu-grid, .landing-link-grid { gap: 1rem; background: transparent; }
.service-menu-grid a, .landing-link-grid a { border-radius: 14px; }
.page-hero { min-height: 72svh; padding-top: 9rem; }
.page-hero h1 { max-width: 15ch; line-height: 1.02; }
.page-hero p:not(.eyebrow) { max-width: 34rem; line-height: 1.8; font-size: 1.05rem; }
.page-hero .hero-actions { margin-top: 1.8rem; }
.contact-layout { align-items: start; gap: clamp(2.5rem, 6vw, 6rem); }
.contact-aside h2 { font-size: clamp(2.6rem, 4vw, 4rem); }
#project-inquiry { scroll-margin-top: 1rem; }
.inquiry-form { border-radius: 24px; padding: clamp(1.4rem, 3vw, 2.5rem); box-shadow: 0 20px 65px rgba(0, 0, 0, .2); }
.form-grid { gap: 1.3rem 1.1rem; }
input, select, textarea { border-radius: 10px; border-color: #6d6b58; min-height: 50px; padding: .9rem 1rem; }
label span, legend { color: #ded5c2; letter-spacing: .06em; font-weight: 600; font-size: .73rem; }
.services-needed { border-radius: 12px; border-color: rgba(232, 222, 201, .25); gap: .3rem .9rem; }
.services-needed label { min-height: 44px; cursor: pointer; }
.services-needed input { min-height: 20px; width: 20px; height: 20px; flex: 0 0 auto; }
.form-optional-label { display: inline; font-size: .75rem; color: #b5ac98; letter-spacing: 0; text-transform: none; font-weight: 400; }
.form-optional { border-block: 1px solid var(--line); }
.form-optional summary { min-height: 52px; padding: 1rem 1.5rem 1rem 0; font-size: .85rem; line-height: 1.6; }
.form-optional .form-grid { padding-bottom: 1.4rem; }
.form-required-note { margin: 0 0 1.4rem; font-size: .76rem; }
.local-preview-note { display: none; }
.is-local-preview .local-preview-note { display: block; padding: .8rem 1rem; margin: 0 0 1.2rem; border-radius: 10px; background: rgba(195, 164, 106, .08); border: 1px solid rgba(195, 164, 106, .2); font-size: .76rem; }
.form-note a { text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.faq-list details { border-color: rgba(232, 222, 201, .16); }
.faq-list summary { line-height: 1.45; padding-block: 1.5rem; font-size: clamp(1.3rem, 2vw, 1.8rem); }
.final-cta { padding-block: clamp(5rem, 10vw, 10rem); }
.cta-inner h2 { max-width: 17ch; margin-inline: auto; }
.cta-inner p:not(.eyebrow) { max-width: 34rem; }
.site-footer { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .85fr); gap: 2rem; padding-block: 3.5rem; }
.footer-links { letter-spacing: .05em; }
.motion-toggle { border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: none; color: var(--stone); font: inherit; letter-spacing: inherit; text-transform: uppercase; cursor: pointer; min-height: 44px; padding: .3rem 0; }
.motion-toggle[hidden] { display: none; }
.motion-paused .raw-focus-object { animation-play-state: paused; }
html:not(.js-reveals) .raw-focus-object { animation: none; }
.construction-film .section-heading { margin-bottom: 2rem; }
.production-system-video-frame { border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.production-system-video-frame video { object-fit: contain; }
.landing-proof-panel { border-radius: var(--radius); box-shadow: none; }
.landing-link-grid { border: 0; }
.landing-link-grid strong { line-height: 1.12; }
.landing-intro-copy h2 { max-width: 15ch; }
.footer-links a { overflow-wrap: anywhere; }
.footer-local-links { letter-spacing: .04em; font-size: .7rem; }
.site-footer a { padding-block: .3rem; }
.reveal { opacity: 1; transform: none; }
.js-reveals .reveal:not(.is-visible) { opacity: 0; transform: translateY(20px); }
.js-reveals .reveal:focus-within { opacity: 1; transform: none; }
html:not(.js-reveals) .cinematic-hero { height: auto; min-height: 100svh; }
html:not(.js-reveals) .cinematic-sticky { position: relative; }
html:not(.js-reveals) .cinematic-scroll-story { display: none; }
html:not(.js-reveals) .cinematic-copy > * { animation: none; }
@media (min-width: 1600px) {
  .featured-film, .visual-index, .service-proof-reel, .contact-moodboard { padding-inline: max(var(--gutter), calc((100vw - 1440px) / 2)); }
}
@media (max-width: 1100px) {
  .featured-film { grid-template-columns: minmax(15rem, .65fr) minmax(0, 1fr); gap: 2.5rem; }
  .strategy-board-shell { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 2rem; }
  .strategy-visual-system { min-height: 30rem; }
}
@media (max-width: 980px) {
  .nav-toggle { width: 44px; height: 44px; border-radius: 12px; }
  .primary-nav { border-radius: 18px; visibility: hidden; gap: .2rem; }
  .primary-nav.is-open { visibility: visible; }
  .primary-nav a { justify-content: flex-start; padding: .9rem 1rem; }
  .primary-nav .nav-cta { justify-content: center; }
  html:not(.js-nav) .nav-toggle { display: none; }
  html:not(.js-nav) .site-header { position: absolute; flex-wrap: wrap; gap: .6rem; }
  html:not(.js-nav) .primary-nav { position: static; display: flex; flex-wrap: wrap; visibility: visible; opacity: 1; transform: none; pointer-events: auto; padding: .25rem; background: #0c1811; }
  html:not(.js-nav) .cinematic-sticky { padding-top: 14rem; height: auto; min-height: 100svh; }
  .featured-film, .visual-index, .service-proof-reel, .contact-moodboard { grid-template-columns: 1fr; }
  .featured-film-copy, .visual-index-copy, .service-proof-copy, .contact-moodboard-copy { max-width: 38rem; }
  .featured-film-copy h2, .visual-index-copy h2, .service-proof-copy h2, .contact-moodboard-copy h2 { max-width: 20ch; }
  .strategy-board-shell { grid-template-columns: 1fr; grid-template-areas: 'copy' 'visual' 'rail'; gap: 2.5rem; }
  .strategy-board-copy h2 { max-width: 16ch; }
  .strategy-visual-system { min-height: 32rem; grid-template-columns: 1.4fr 1fr; }
  .contact-aside { position: static; }
  .site-footer { grid-template-columns: 1fr 1.3fr; }
  .footer-links { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 640px) {
  :root { --gutter: 1.25rem; --radius: 16px; }
  .brand-name { font-size: 1.05rem; }
  .brand-logo-frame { width: 2.7rem; height: 2.5rem; }
  .site-header { padding-block: .75rem; }
  .cinematic-sticky { padding: 6.7rem var(--gutter) 4rem; }
  .cinematic-copy h1 { font-size: clamp(2.6rem, 11vw, 3.7rem); max-width: 13ch; }
  .cinematic-copy .eyebrow { font-size: .6rem; max-width: 26rem; }
  .cinematic-brand { font-size: 1.4rem; }
  .cinematic-copy .hero-lede { max-width: 28rem; font-size: .95rem; margin-top: 1.15rem; }
  .cinematic-copy .hero-actions { gap: .7rem; margin-top: 1.5rem; }
  .cinematic-copy .button { padding-inline: 1.1rem; font-size: .65rem; min-height: 48px; }
  .cinematic-vignette { background: linear-gradient(90deg, rgba(4,10,7,.82), rgba(4,10,7,.4)), linear-gradient(180deg, rgba(4,10,7,.2), transparent 40%, rgba(4,10,7,.8)); }
  .cinematic-scroll-story h2 { max-width: 11ch; font-size: clamp(2.7rem, 12vw, 4rem); }
  .cinematic-scroll-story p { font-size: .95rem; }
  .featured-film { padding-top: 4rem; }
  .featured-film-dossier strong { font-size: .95rem; line-height: 1.35; }
  .featured-film-dossier span { font-size: .56rem; letter-spacing: .08em; }
  .featured-film-points span { font-size: .58rem; }
  .strategy-visual-system { min-height: 27rem; grid-template-rows: minmax(15rem, 1fr) minmax(10rem, .6fr); gap: .75rem; }
  .strategy-visual-card figcaption { inset-inline: .9rem; bottom: 1rem; }
  .strategy-visual-card figcaption strong { font-size: 1.35rem; }
  .strategy-visual-card figcaption span { font-size: .56rem; }
  .industry-marquee { gap: 1rem; }
  .page-hero { min-height: 38rem; padding-top: 8rem; padding-bottom: 4.5rem; }
  .page-hero h1 { font-size: clamp(2.6rem, 10.5vw, 4rem); }
  .page-hero p:not(.eyebrow) { font-size: .96rem; }
  .page-hero-rail { font-size: .55rem; }
  .form-grid { grid-template-columns: 1fr; }
  .inquiry-form { border-radius: 20px; padding: 1.25rem; }
  .services-needed { grid-template-columns: 1fr; }
  input, select, textarea { font-size: 16px; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-links { grid-column: auto; }
  .faq-list summary { font-size: 1.25rem; padding-right: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveals .reveal:not(.is-visible) { opacity: 1; transform: none; }
  .industry-tile:hover, .industry-tile:hover .industry-tile-media { transform: none; }
}

/* Dimensional hover is a small continuation of the photographic focus motif. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .industry-tile:hover { transform: perspective(1000px) translateY(-4px) rotateX(1deg) rotateY(-1deg); }
}
.cinematic-copy > * { animation-duration: 550ms; }
.reveal { transition-duration: 450ms; }
.delay-1 { transition-delay: 60ms; }
.delay-2 { transition-delay: 100ms; }
.delay-3 { transition-delay: 140ms; }
.form-optional .services-needed { margin-block: .25rem 1.5rem; }
@media (max-width: 640px) { .cinematic-copy { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .cinematic-copy > * { animation: none; }
  .reveal, .industry-tile, .industry-tile-media { transition: none; }
}