:root {
      color-scheme: light;
      --paper: #f5f2e9;
      --paper-deep: #ebe6d9;
      --ink: #26332c;
      --ink-soft: #667168;
      --forest: #415c4b;
      --forest-dark: #26382e;
      --sage: #dce5d8;
      --clay: #bd7658;
      --line: rgba(38, 51, 44, .14);
      --white: #fffdf8;
      --serif: "Playfair Display", Georgia, serif;
      --sans: "DM Sans", "Segoe UI", sans-serif;
      --max: 1160px;
      --radius: 22px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font: 16px/1.65 var(--sans);
      -webkit-font-smoothing: antialiased;
    }
    img, video { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; }
    .wrap { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }
    .skip-link {
      position: fixed;
      z-index: 100;
      top: 12px;
      left: 12px;
      padding: 10px 16px;
      transform: translateY(-160%);
      border-radius: 999px;
      background: var(--white);
    }
    .skip-link:focus { transform: none; }
    :focus-visible { outline: 3px solid var(--clay); outline-offset: 4px; }

    .site-nav {
      position: sticky;
      z-index: 20;
      top: 0;
      border-bottom: 1px solid var(--line);
      background: rgba(245, 242, 233, .94);
      backdrop-filter: blur(14px);
    }
    .nav-inner {
      display: flex;
      min-height: 76px;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      font-weight: 700;
      letter-spacing: -.035em;
    }
    .brand-mark {
      display: inline-grid;
      width: 35px;
      height: 35px;
      place-items: center;
      border: 1px solid var(--forest);
      border-radius: 50%;
      color: var(--forest);
      font: 600 1.05rem var(--serif);
    }
    .brand-name { font-size: 1rem; }
    .brand-name span { display: block; color: var(--ink-soft); font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
    .nav-links { display: flex; align-items: center; gap: 28px; }
    .nav-links > a:not(.button) { color: var(--ink-soft); font-size: .91rem; transition: color .2s ease; }
    .nav-links > a:not(.button):hover { color: var(--forest-dark); }
    .menu-toggle {
      display: none;
      width: 44px;
      height: 44px;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: transparent;
      color: var(--ink);
      cursor: pointer;
    }
    .menu-toggle svg { width: 20px; height: 20px; }

    .button {
      display: inline-flex;
      min-height: 48px;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 12px 21px;
      border: 1px solid transparent;
      border-radius: 999px;
      background: var(--forest);
      color: var(--white);
      font-size: .92rem;
      font-weight: 600;
      line-height: 1.25;
      transition: background .2s ease, transform .2s ease, border-color .2s ease;
    }
    .button:hover { transform: translateY(-2px); background: var(--forest-dark); }
    .button-light { border-color: var(--line); background: transparent; color: var(--ink); }
    .button-light:hover { border-color: var(--forest); background: var(--white); color: var(--ink); }
    .button-arrow { font-size: 1.1rem; line-height: 1; }

    .hero {
      position: relative;
      overflow: hidden;
      padding: clamp(62px, 8vw, 112px) 0 76px;
      background:
        radial-gradient(ellipse at 86% 12%, rgba(220, 229, 216, .85), transparent 34%),
        var(--paper);
    }
    .hero-grid { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: clamp(36px, 6vw, 78px); }
    .eyebrow {
      margin: 0 0 18px;
      color: var(--forest);
      font-size: .73rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
    }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 { text-wrap: balance; }
    h1 {
      max-width: 620px;
      margin-bottom: 23px;
      font: 500 clamp(3.2rem, 6.5vw, 5.85rem)/.99 var(--serif);
      letter-spacing: -.055em;
    }
    h1 em { color: var(--forest); font-weight: 500; }
    .hero-copy > p:not(.eyebrow) { max-width: 510px; margin-bottom: 29px; color: var(--ink-soft); font-size: clamp(1.02rem, 1.5vw, 1.15rem); }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
    .hero-note { display: flex; align-items: center; gap: 10px; margin: 30px 0 0; color: var(--ink-soft); font-size: .85rem; }
    .hero-note::before { width: 26px; height: 1px; background: var(--clay); content: ""; }
    .hero-film { position: relative; }
    .hero-film::before {
      position: absolute;
      z-index: 0;
      inset: -14px 18px 18px -14px;
      border: 1px solid rgba(65, 92, 75, .24);
      border-radius: 26px;
      content: "";
    }
    .video-frame {
      position: relative;
      z-index: 1;
      overflow: hidden;
      border: 7px solid var(--white);
      border-radius: 22px;
      background: #d9d4c8;
      box-shadow: 0 22px 65px rgba(38, 51, 44, .12);
    }
    .video-frame video { width: 100%; aspect-ratio: 16 / 9; background: #242a25; object-fit: cover; }
    .video-caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 17px 12px; }
    .video-caption strong { font: 600 1.02rem var(--serif); }
    .video-caption span { color: var(--ink-soft); font-size: .75rem; }
    .hero-film .video-caption { background: var(--white); }

    .intro-strip { padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
    .intro-strip-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
    .intro-strip p { margin: 0; font: 500 clamp(1.12rem, 2vw, 1.45rem) var(--serif); }
    .strip-label { color: var(--ink-soft); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }

    section { padding: clamp(76px, 9vw, 120px) 0; scroll-margin-top: 82px; }
    .section-heading { max-width: 690px; margin-bottom: 44px; }
    .section-heading h2, .loop-copy h2, .about-copy h2, .contact-card h2 {
      margin-bottom: 16px;
      font: 500 clamp(2.4rem, 4.7vw, 4rem)/1.07 var(--serif);
      letter-spacing: -.045em;
    }
    .section-heading > p:not(.eyebrow) { max-width: 590px; margin-bottom: 0; color: var(--ink-soft); font-size: 1.05rem; }
    .work { background: var(--white); }
    .work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
    .work-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
    .work-card video { width: 100%; aspect-ratio: 16 / 9; background: #252b25; object-fit: cover; }
    .work-card-copy { padding: 24px 26px 26px; }
    .work-card-copy .eyebrow { margin-bottom: 9px; font-size: .66rem; }
    .work-card h3 { margin-bottom: 8px; font: 600 1.55rem/1.2 var(--serif); letter-spacing: -.02em; }
    .work-card p:last-child { max-width: 56ch; margin-bottom: 0; color: var(--ink-soft); font-size: .94rem; }
    .work-note { margin: 22px 0 0; color: var(--ink-soft); font-size: .83rem; }

    .loop-section { overflow: hidden; background: var(--forest-dark); color: var(--white); }
    .loop-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(40px, 7vw, 88px); }
    .loop-copy .eyebrow { color: #c3d6c3; }
    .loop-copy h2 { max-width: 560px; }
    .loop-copy > p:not(.eyebrow) { max-width: 510px; margin-bottom: 25px; color: rgba(255,255,255,.77); }
    .loop-list { display: grid; gap: 12px; margin: 28px 0 32px; padding: 0; list-style: none; }
    .loop-list li { display: flex; align-items: flex-start; gap: 12px; color: rgba(255,255,255,.9); font-size: .91rem; }
    .loop-list li::before { flex: 0 0 auto; width: 7px; height: 7px; margin-top: .55em; border-radius: 50%; background: #c3d6c3; content: ""; }
    .button-cream { background: var(--paper); color: var(--forest-dark); }
    .button-cream:hover { background: #fff; color: var(--forest-dark); }
    .display-wrap { padding: clamp(16px, 3vw, 28px); border: 1px solid rgba(255,255,255,.2); border-radius: 28px; background: rgba(255,255,255,.08); }
    .display-bezel { overflow: hidden; padding: 9px; border: 1px solid rgba(255,255,255,.24); border-radius: 18px; background: #161b17; box-shadow: 0 28px 70px rgba(0,0,0,.24); }
    .display-bezel video { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: #252b25; object-fit: cover; }
    .display-caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 17px 5px 2px; color: rgba(255,255,255,.82); font-size: .78rem; }
    .display-caption span:last-child { color: #c3d6c3; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }

    .services { background: var(--paper); }
    .service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
    .service-card { min-height: 248px; padding: 27px 26px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,253,248,.58); }
    .service-number { display: inline-grid; width: 38px; height: 38px; place-items: center; margin-bottom: 22px; border: 1px solid rgba(65,92,75,.3); border-radius: 50%; color: var(--forest); font: 600 .93rem var(--serif); }
    .service-card h3 { margin-bottom: 10px; font: 600 1.32rem var(--serif); }
    .service-card p { margin: 0; color: var(--ink-soft); font-size: .91rem; }

    .process { background: var(--paper-deep); }
    .process-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
    .process-step { padding-top: 20px; border-top: 1px solid rgba(38,51,44,.3); }
    .process-step .eyebrow { margin-bottom: 15px; }
    .process-step h3 { margin-bottom: 9px; font: 600 1.45rem var(--serif); }
    .process-step p { max-width: 34ch; margin: 0; color: var(--ink-soft); font-size: .93rem; }

    .packages { background: var(--white); }
    .package-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
    .package-card { padding: clamp(26px, 4vw, 40px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
    .package-card.featured { border-color: var(--forest); background: var(--sage); }
    .package-card .eyebrow { margin-bottom: 13px; }
    .package-card h3 { margin-bottom: 12px; font: 600 1.8rem var(--serif); letter-spacing: -.025em; }
    .package-price { margin-bottom: 14px; color: var(--forest); font: 600 1.18rem var(--serif); }
    .package-card > p:not(.eyebrow):not(.package-price) { max-width: 48ch; color: var(--ink-soft); font-size: .94rem; }
    .package-card ul { display: grid; gap: 9px; margin: 22px 0 26px; padding: 0; list-style: none; }
    .package-card li { display: flex; gap: 10px; font-size: .9rem; }
    .package-card li::before { color: var(--forest); content: "✓"; font-weight: 700; }
    .package-card .button { width: fit-content; }
    .pricing-note { margin: 22px 0 0; color: var(--ink-soft); font-size: .82rem; }

    .about { background: var(--paper); }
    .about-grid { display: grid; grid-template-columns: minmax(230px, .75fr) 1.25fr; align-items: center; gap: clamp(38px, 8vw, 100px); }
    .portrait { position: relative; overflow: hidden; border-radius: 180px 180px 18px 18px; background: var(--sage); }
    .portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 70% center; }
    .portrait-tag { position: absolute; right: 12px; bottom: 12px; left: 12px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.35); border-radius: 12px; background: rgba(38,51,44,.78); color: white; font-size: .82rem; backdrop-filter: blur(8px); }
    .about-copy h2 { max-width: 500px; }
    .about-copy > p:not(.eyebrow) { max-width: 54ch; color: var(--ink-soft); }
    .about-copy .button { margin-top: 8px; }

    .faq { background: var(--paper-deep); }
    .faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(35px, 7vw, 80px); }
    .faq .section-heading { margin-bottom: 0; }
    .faq-list details { padding: 19px 0; border-bottom: 1px solid var(--line); }
    .faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; font-weight: 600; list-style: none; }
    .faq-list summary::-webkit-details-marker { display: none; }
    .faq-list summary::after { color: var(--forest); content: "+"; font-size: 1.4rem; font-weight: 400; }
    .faq-list details[open] summary::after { content: "−"; }
    .faq-list details p { max-width: 62ch; margin: 12px 32px 0 0; color: var(--ink-soft); font-size: .91rem; }

    .contact { padding: clamp(70px, 8vw, 108px) 0; background: var(--clay); color: #fffdf8; }
    .contact-card { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
    .contact-card .eyebrow { color: rgba(255,255,255,.78); }
    .contact-card h2 { max-width: 680px; margin-bottom: 14px; }
    .contact-card p:not(.eyebrow) { max-width: 55ch; margin-bottom: 0; color: rgba(255,255,255,.85); }
    .contact-actions { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 10px; }
    .contact-actions .button { background: var(--white); color: var(--ink); }
    .contact-actions .button:hover { background: #fff; }
    .contact-email { color: rgba(255,255,255,.88); font-size: .86rem; text-decoration: underline; text-underline-offset: 3px; }

    footer { padding: 26px 0; background: var(--forest-dark); color: var(--white); }
    .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
    .footer-brand { font-size: .93rem; font-weight: 700; }
    .footer-brand span { display: block; color: rgba(255,255,255,.62); font-size: .74rem; font-weight: 400; }
    .footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
    .footer-links a, .copyright { color: rgba(255,255,255,.72); font-size: .78rem; }
    .copyright { margin: 0; }

    .js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }
    .js-reveal .reveal.in { opacity: 1; transform: none; }
    @media (max-width: 900px) {
      .hero-grid { grid-template-columns: 1fr; }
      .hero-copy { max-width: 720px; }
      .hero-film { max-width: 760px; }
      .loop-grid { grid-template-columns: 1fr; }
      .loop-copy { max-width: 700px; }
      .display-wrap { max-width: 760px; }
      .faq-grid { grid-template-columns: 1fr; }
      .faq .section-heading { max-width: 600px; }
      .contact-card { align-items: flex-start; flex-direction: column; }
      .contact-actions { flex-direction: row; align-items: center; flex-wrap: wrap; }
    }
    @media (max-width: 760px) {
      .wrap { width: min(var(--max), calc(100% - 36px)); }
      .menu-toggle { display: inline-flex; }
      .nav-links {
        position: absolute;
        top: calc(100% + 1px);
        right: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px 18px 18px;
        border-bottom: 1px solid var(--line);
        background: var(--paper);
      }
      .js-ready .nav-links { display: none; }
      .site-nav.menu-open .nav-links { display: flex; flex-direction: column; }
      .nav-links > a:not(.button) { padding: 13px 5px; border-bottom: 1px solid var(--line); }
      .nav-links .button { margin-top: 14px; }
      .hero { padding-top: 62px; }
      .work-grid, .package-grid { grid-template-columns: 1fr; }
      .service-grid { grid-template-columns: 1fr 1fr; }
      .process-grid { grid-template-columns: 1fr; gap: 24px; }
      .process-step p { max-width: 55ch; }
      .about-grid { grid-template-columns: minmax(180px, .75fr) 1fr; gap: 28px; }
      .portrait-tag { font-size: .74rem; }
    }
    @media (max-width: 540px) {
      .wrap { width: min(var(--max), calc(100% - 32px)); }
      .nav-inner { min-height: 68px; }
      h1 { font-size: clamp(3rem, 14vw, 4.3rem); }
      .hero-actions { flex-direction: column; align-items: stretch; }
      .hero-actions .button { width: 100%; }
      .hero-note { align-items: flex-start; }
      .hero-film::before { inset: -8px 9px 10px -8px; }
      .video-frame { border-width: 4px; border-radius: 16px; }
      .video-frame video { aspect-ratio: 4 / 3; }
      .video-caption { align-items: flex-start; flex-direction: column; gap: 1px; padding: 11px 12px; }
      .intro-strip-inner { align-items: flex-start; flex-direction: column; gap: 5px; }
      .service-grid { grid-template-columns: 1fr; }
      .service-card { min-height: unset; }
      .about-grid { grid-template-columns: 1fr; }
      .portrait { width: min(74%, 290px); }
      .about-copy { grid-row: 1; }
      .contact-actions { align-items: flex-start; flex-direction: column; }
      .contact-actions .button { width: 100%; }
      .footer-inner { align-items: flex-start; flex-direction: column; }
      .footer-links { gap: 12px 18px; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
      .js-reveal .reveal { opacity: 1; transform: none; }
    }
  
/* Version two: retained palette and typography, extended case study and website films. */
.hero-film{margin:0}.hero-grid{grid-template-columns:1fr 1.08fr}h1{font-size:clamp(3.2rem,5.6vw,5.1rem);line-height:1.04}.hero{padding-top:clamp(58px,6vw,92px)}
.nav-links{gap:23px}.nav-links>a:not(.button){font-size:.85rem}.video-frame video{object-fit:contain;aspect-ratio:16/9}
.case-feature{display:grid;grid-template-columns:1.05fr 1fr;overflow:hidden;border:1px solid var(--line);border-radius:24px;background:var(--paper)}
.case-feature-image{min-height:420px;height:100%;width:100%;object-fit:cover}.case-feature-copy{align-self:center;padding:clamp(28px,4vw,52px)}
.case-feature h3{font:500 clamp(2.1rem,3.5vw,3.25rem)/1.08 var(--serif);letter-spacing:-.04em;margin-bottom:20px}.case-feature p{color:var(--ink-soft)}
.format-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:24px 0 28px}.format-list li{border:1px solid var(--line);border-radius:50px;padding:6px 12px;font-size:.73rem;color:var(--forest-dark)}
.website-films{background:var(--paper-deep)}.website-lead{display:grid;grid-template-columns:.75fr 1.25fr;gap:48px;align-items:center;margin-bottom:72px}.website-lead h2{font:500 clamp(2.6rem,4.4vw,4rem)/1.08 var(--serif);letter-spacing:-.045em;margin-bottom:22px}.website-lead p:not(.eyebrow){color:var(--ink-soft)}
.browser-preview{margin:0;overflow:hidden;border:1px solid rgba(38,51,44,.2);border-radius:15px;background:var(--white);box-shadow:0 20px 50px rgba(38,51,44,.08)}
.browser-bar{display:flex;align-items:center;gap:6px;min-height:34px;padding:8px 13px;border-bottom:1px solid var(--line);background:var(--white)}.browser-bar i{width:6px;height:6px;display:block;border-radius:50%;background:#b9c0b5}.browser-address{flex:1;text-align:center;font-size:.66rem;letter-spacing:.03em;color:var(--ink-soft);padding-right:30px}
.loop-stage{position:relative;background:#1e2822;overflow:hidden}.loop-stage video{display:block;width:100%;height:auto;aspect-ratio:1280/556;object-fit:contain}.loop-stage.oca-stage video{aspect-ratio:16/9;object-fit:cover}
.loop-stage .preview-toggle{position:absolute;right:12px;bottom:12px;z-index:2;border:1px solid rgba(255,255,255,.5);border-radius:50px;padding:8px 12px;background:rgba(20,28,22,.82);color:white;font:500 .7rem var(--sans);cursor:pointer}.preview-toggle:focus-visible{outline:3px solid #fff;outline-offset:3px}
.browser-caption{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;padding:13px 16px;font-size:.77rem}.browser-caption a{text-decoration:underline;text-underline-offset:4px;color:var(--forest)}
.reference-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:28px}.reference-heading h3{font:500 2.1rem/1.12 var(--serif);letter-spacing:-.025em;margin-bottom:0}.reference-heading p{max-width:440px;margin:0;color:var(--ink-soft);font-size:.9rem}
.reference-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.reference-card{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--white)}.reference-card .browser-preview{border:0;border-radius:0;box-shadow:none}.reference-copy{padding:23px 25px 25px}.reference-copy h4{font:600 1.5rem/1.2 var(--serif);margin:0 0 8px}.reference-copy p{font-size:.89rem;color:var(--ink-soft);margin-bottom:16px}.reference-copy a{font-size:.83rem;font-weight:600;text-decoration:underline;text-underline-offset:5px}.reference-location{display:block;margin:0 0 11px;color:var(--forest);font-size:.65rem;letter-spacing:.13em;text-transform:uppercase}.reference-credit{font-size:.77rem;color:var(--ink-soft);margin:21px 0 0;max-width:800px}
.website-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:34px}.website-actions p{margin:0;color:var(--ink-soft);font-size:.84rem}
.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.service-card{min-height:unset}.package-note{margin:15px 0 0;font-size:.8rem;color:var(--ink-soft)}
.case-hero{padding:64px 0 72px;background:var(--paper)}.case-breadcrumb{display:inline-block;color:var(--ink-soft);font-size:.84rem;margin-bottom:36px}.case-title-row{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:end;margin-bottom:44px}.case-title-row h1{max-width:700px;margin-bottom:0}.case-title-row p:not(.eyebrow){color:var(--ink-soft);font-size:1.1rem;margin-bottom:0}.case-meta{display:flex;flex-wrap:wrap;gap:12px 30px;padding-top:23px;border-top:1px solid var(--line);font-size:.79rem;color:var(--ink-soft)}.case-meta strong{display:block;font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:4px;color:var(--forest)}
.case-main-film{margin:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--white)}.case-main-film video{width:100%;aspect-ratio:16/9;object-fit:contain;background:#17201a}.case-main-film figcaption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:17px 22px;font-size:.83rem;color:var(--ink-soft)}
.case-overview{background:var(--white);padding-top:66px;padding-bottom:66px}.case-overview-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}.case-overview h2{font:500 clamp(2rem,3.7vw,3rem)/1.14 var(--serif);letter-spacing:-.03em}.case-overview p{color:var(--ink-soft)}.case-overview .format-list{margin-bottom:0}
.case-films{background:var(--paper)}.case-films .work-card{background:var(--white)}.case-films .work-card video{object-fit:contain}.social-section{background:var(--white)}.social-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.social-card{padding:16px;border:1px solid var(--line);background:var(--paper);border-radius:20px;min-width:0}.social-card video{display:block;width:100%;aspect-ratio:606/1080;object-fit:contain;background:#885b50;border-radius:11px}.social-copy{padding:20px 7px 8px}.social-copy h3{font:600 1.45rem/1.2 var(--serif);margin-bottom:8px}.social-copy p{font-size:.87rem;color:var(--ink-soft);margin:0}.social-status{max-width:800px;margin:27px 0 0;padding:17px 20px;border-left:3px solid var(--clay);background:var(--paper);font-size:.83rem;color:var(--ink-soft)}
.supporting-work{background:var(--paper-deep)}.supporting-work> .wrap>details{border-block:1px solid var(--line);padding:22px 0}.supporting-work summary{cursor:pointer;font:500 1.55rem var(--serif)}.supporting-work .work-grid{margin-top:28px}.supporting-work .work-card{background:var(--white)}.case-background{padding-top:0}.case-cta{max-width:800px}.case-cta p{color:var(--ink-soft)}
@media(max-width:1050px){.nav-links{gap:17px}.hero-grid,.website-lead{grid-template-columns:1fr;gap:40px}.hero-copy{max-width:710px}.hero-copy h1{max-width:680px}.hero-film{max-width:760px}.case-feature{grid-template-columns:1fr 1fr}.case-feature-image{min-height:390px}.case-title-row{gap:36px}.website-lead{margin-bottom:56px}.website-lead>div{max-width:740px}}
@media(max-width:760px){.case-feature,.case-title-row,.case-overview-grid{grid-template-columns:1fr;gap:28px}.case-feature-image{min-height:0;aspect-ratio:16/9}.reference-heading{align-items:flex-start;flex-direction:column;gap:14px}.reference-grid{gap:20px}.reference-copy{padding:18px}.social-grid{gap:14px}.social-card{padding:10px}.social-copy{padding:17px 3px 7px}.social-copy h3{font-size:1.18rem}.case-hero{padding-top:40px}.case-title-row h1{font-size:clamp(3rem,8vw,4rem)}.case-overview-grid{gap:15px}.service-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){h1{font-size:clamp(3rem,12vw,4rem);line-height:1.04}.hero{padding-bottom:54px}.reference-grid,.social-grid,.service-grid{grid-template-columns:1fr}.social-card{max-width:350px;width:100%;margin-inline:auto;padding:15px}.social-copy h3{font-size:1.4rem}.case-meta{gap:20px}.browser-caption{font-size:.7rem}.reference-copy h4{font-size:1.5rem}.website-lead{gap:28px}.website-lead h2{font-size:2.65rem}.loop-stage .preview-toggle{font-size:.66rem;padding:7px 10px}.case-title-row{margin-bottom:30px}.case-main-film figcaption{padding:14px 16px}.case-feature-copy{padding:26px}.video-frame video{aspect-ratio:16/9}}

.supporting-work video[aria-label="Gabi in a vertical frame"]{aspect-ratio:606/1080;object-fit:contain;background:#885b50}

/* OCA is part of one continuous homepage. */
.integrated-case{background:var(--paper)}.integrated-overview{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start}.integrated-overview h2{font:500 clamp(2.5rem,4.4vw,4rem)/1.08 var(--serif);letter-spacing:-.045em}.integrated-overview p:not(.eyebrow){color:var(--ink-soft)}
.case-chapters{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 0;padding-bottom:34px;border-bottom:1px solid var(--line)}.case-chapters a{display:inline-flex;gap:16px;align-items:center;border:1px solid var(--line);border-radius:50px;padding:10px 17px;font-size:.8rem}.case-chapters a:hover{background:var(--forest);color:var(--white)}.case-chapters a:focus-visible{outline:2px solid var(--forest);outline-offset:4px}
.case-chapter{padding-top:56px;scroll-margin-top:100px}.case-chapter>.section-heading{margin-bottom:28px}.case-chapter>.section-heading h3{font:500 clamp(2rem,3.4vw,3rem)/1.12 var(--serif);letter-spacing:-.035em;margin-bottom:17px}.integrated-case .work-card{background:var(--white)}.integrated-case .work-card video{object-fit:contain}.case-social{margin-top:12px;padding-top:52px;border-top:1px solid var(--line)}.case-social .social-card{background:var(--white)}
.integrated-support{background:transparent;margin-top:42px}.integrated-support>details{padding:23px 0;border-block:1px solid var(--line)}.integrated-support summary{cursor:pointer;font:500 1.4rem var(--serif)}.integrated-support .work-grid{margin-top:26px}.case-next{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:28px}.case-next p{margin:0;color:var(--ink-soft);max-width:420px}.integrated-case video[aria-label="Gabi in a vertical frame"]{aspect-ratio:606/1080;object-fit:contain}
@media(max-width:760px){.integrated-overview{grid-template-columns:1fr;gap:20px}.case-next{align-items:flex-start;flex-direction:column}.case-chapters{gap:8px}.case-chapters a{padding:9px 13px;font-size:.75rem}.case-chapter{padding-top:38px}.case-social{margin-top:30px}}

/* Three film services; custom editorial covers for every vertical example. */
.service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.social-card video{background:var(--paper)}
@media(max-width:760px){.service-grid{grid-template-columns:1fr 1fr}}@media(max-width:540px){.service-grid{grid-template-columns:1fr}}