:root {
      --carbon:#191b1d; --dark-silver:#4b4f54; --brushed:#aeb4ba;
      --mist:#bdc2c7; --pearl:#f4f4f4; --alloy:#e3e5e7;
      --impact:#3e5c6b; --white:#fff; --max:1180px;
    }
    * { box-sizing:border-box }
    html { scroll-behavior:smooth; scroll-padding-top:74px }
    body { margin:0; background:var(--pearl); color:var(--carbon); font-family:Montserrat,Arial,sans-serif; overflow-x:hidden }
    body.modal-open { overflow:hidden }
    a { color:inherit; text-decoration:none }
    button,input,textarea { font:inherit }
    button { color:inherit }
    .wrap { width:min(var(--max),calc(100% - 48px)); margin:auto }
    .h1 { font-size:clamp(50px,7vw,98px); line-height:.92; letter-spacing:-.058em; font-weight:700 }
    .h2 { font-size:clamp(36px,4.7vw,62px); line-height:1; letter-spacing:-.046em; font-weight:600 }
    .h3 { font-size:26px; line-height:1.08; letter-spacing:-.03em; font-weight:500 }
    .body { font-size:16px; line-height:1.72; font-weight:400 }
    .eyebrow { font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#777f84 }
    .btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border:1px solid; border-radius:999px; font-size:12px; font-weight:800; cursor:pointer }
    .btn.light { color:#fff; border-color:rgba(255,255,255,.85); background:rgba(0,0,0,.14) }
    .btn.dark { color:#fff; border-color:var(--carbon); background:var(--carbon) }
    .btn.impact { color:#fff; border-color:var(--impact); background:var(--impact) }
    .btn:hover,.btn:focus-visible { transform:translateY(-1px) }
    :focus-visible { outline:3px solid rgba(62,92,107,.5); outline-offset:3px }

    header { position:relative; z-index:20; background:#fff; border-bottom:1px solid #d7dbdd }
    .topbar { min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:28px }
    .logo { font-size:16px; font-weight:500; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap }
    .navlinks { display:flex; align-items:center; gap:28px; color:#52595e }
    .navlinks a { font-size:12px; font-weight:500 }
    .navlinks .active { color:#c77743; border-bottom:1px solid #c77743; padding-bottom:6px }
    .navlinks .cta-nav { min-height:36px; padding:0 18px; border-radius:999px; background:var(--carbon); color:#fff; display:inline-flex; align-items:center; font-weight:700 }
    .menu-toggle { display:none; width:42px; height:42px; border:0; background:transparent; font-size:25px; cursor:pointer }

    .hero { min-height:calc(100vh - 74px); display:grid; place-items:center; text-align:center; color:#fff; position:relative; overflow:hidden; background:linear-gradient(rgba(0,0,0,.44),rgba(0,0,0,.48)),url('/assets/images/home/home-hero.jpg') center center/cover no-repeat }
    .hero::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 44%,transparent 0 25%,rgba(10,12,13,.18) 72%,rgba(10,12,13,.34) 100%) }
    .hero-inner { position:relative; z-index:1; max-width:880px; padding:70px 20px }
    .hero h1 { margin:0 0 16px }
    .hero p { max-width:620px; margin:0 auto 28px }

    .difference { padding:86px 0; background:#fff }
    .difference-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:start }
    .difference h2 { margin:0 }
    .quote-side { display:flex; flex-direction:column; gap:18px }
    .quote-image,.purpose-image,.impact-image,.gallery-item,.modal-media { background:linear-gradient(135deg,#d7dbdd,#b9c0c5); position:relative; overflow:hidden }
    .quote-image { width:100%; max-width:520px; aspect-ratio:16/9; border-radius:18px }
    .quote-image::after,.purpose-image::after,.impact-image::after,.gallery-item::after,.modal-media::after { content:attr(data-placeholder); position:absolute; inset:0; display:grid; place-items:center; padding:18px; color:#667077; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; text-align:center }
    .quote-image.with-image::after,.purpose-image.with-image::after,.impact-image.with-image::after,.gallery-item.with-image::after { display:none }
    .quote-image img,.purpose-image img,.impact-image img,.gallery-item img { width:100%; height:100%; display:block; object-fit:cover }
    .difference p { margin:0; color:#5f676c }

    .purpose { padding:80px 0; background:var(--pearl); text-align:center }
    .purpose h2 { max-width:800px; margin:0 auto 14px }
    .purpose > .wrap > p { max-width:720px; margin:0 auto; color:#667076 }
    .purpose-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:38px; align-items:start }
    .purpose-thumb { border:0; padding:0; background:none; cursor:pointer; text-align:left }
    .purpose-image { height:220px; border-radius:18px }
    .purpose-label { margin-top:12px; font-size:17px; line-height:1.2; font-weight:600 }

    .capture-section { padding:88px 0; background:var(--alloy) }
    .capture-head { margin-bottom:40px }
    .capture-head h2 { max-width:900px; margin:8px 0 0 }
    .capture-head p { max-width:760px; margin:14px 0 0; color:#60696e }
    .capture-list { border-top:1px solid #c7ccd0 }
    .capture-row { display:grid; grid-template-columns:90px 1.05fr 1.35fr 26px; gap:22px; align-items:center; padding:26px 0; border-bottom:1px solid #c7ccd0 }
    .capture-row .num { font-size:12px; font-weight:600; color:#7d858a }
    .capture-row h3,.capture-row p { margin:0 }
    .capture-row p { color:#60696e }
    .capture-row .arrow { color:#7f878c; font-size:18px }

    .past { padding:88px 0; background:#fff }
    .past-head { margin-bottom:30px }
    .past-head h2 { margin:8px 0 0 }
    .past-head p { max-width:760px; margin:14px 0 0; color:#657075 }
    .gallery { display:grid; grid-template-columns:1.25fr 1fr 1fr; grid-auto-rows:220px; gap:12px }
    .gallery-item { border:0; border-radius:18px; cursor:pointer; width:100% }
    .gallery-item:first-child,.gallery-item:nth-child(5) { grid-row:span 2 }
    .past-cta { margin-top:24px }

    section.impact { padding:88px 0; background:#e8eef1 }
    .impact-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center }
    .impact .eyebrow { color:var(--impact) }
    .impact h2 { margin:8px 0 14px }
    .impact p { margin:0 0 24px; color:#586970 }
    .impact mark { background:var(--impact); color:#fff; padding:0 .08em }
    .impact-image { min-height:380px; border-radius:22px; background:linear-gradient(135deg,#7993a0,var(--impact)) }
    .impact-image::after { color:#fff }

    .questions { padding:90px 0; background:#fff }
    .questions h2 { margin:0; text-align:center }
    .questions-grid { display:grid; grid-template-columns:.78fr 1.22fr; gap:64px; margin-top:46px; align-items:start }
    .contact-card h3 { margin:0 0 10px }
    .contact-card p { color:#626c71 }
    .contact-list { margin-top:26px }
    .contact-list a { text-decoration:underline; text-underline-offset:3px }
    .reference-form { background:#fff }
    .field { margin-bottom:15px }
    .field > label { display:block; margin-bottom:6px; font-size:12px; line-height:1.35; font-weight:700 }
    input[type="text"],input[type="email"],textarea { width:100%; border:1px solid var(--brushed); border-radius:8px; background:#fff; padding:11px 12px; font-size:13px }
    textarea { min-height:130px; resize:vertical }
    .service-options { display:grid; grid-template-columns:1fr 1fr; gap:7px 28px; margin-top:4px }
    .check { display:flex; align-items:center; gap:8px; margin:0; font-size:13px; cursor:pointer }
    .check input { width:17px; height:17px; margin:0; accent-color:var(--carbon) }
    .reference-form .btn { width:100%; border-radius:8px; min-height:46px }
    .form-status { min-height:20px; margin:10px 0 0; font-size:12px; color:#5f676c }
    .form-status.success { color:#3f6b50 }
    .form-status.error { color:#a2443e }

    footer { padding:42px 0 28px; background:#111315; color:#979ea3 }
    .footergrid { display:grid; grid-template-columns:1.15fr .95fr 1.2fr 1.25fr; gap:34px; align-items:start }
    .footer-col h4 { margin:0 0 18px; color:#fff; font-size:18px; font-weight:700 }
    .footer-col p,.footer-col a,.footer-col li { margin:0; color:#c6cacf; font-size:12px; line-height:1.6 }
    .footer-col ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px }
    .footer-group { margin-top:16px }
    .footer-group:first-of-type { margin-top:0 }
    .news-input { width:100%; height:40px; margin:10px 0 18px; border:1px solid #585f64; border-radius:2px; background:transparent; padding:0 12px; color:#fff; font-size:12px }
    .news-btn { min-height:38px; padding:0 18px; border:1px solid #fff; border-radius:999px; background:transparent; color:#fff; font-size:12px; font-weight:800; cursor:pointer }
    .socials { display:flex; gap:14px; margin-top:18px }
    .socials a { width:28px; height:28px; border:1px solid #8f969b; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700 }
    .footer-bottom { margin-top:36px; text-align:center; color:#8d9499 }
    .footer-bottom .brand { display:block; margin-bottom:8px; font-size:18px; font-weight:700 }
    .footer-bottom p { margin:0; font-size:11px }

    .modal-overlay { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:28px; background:rgba(17,19,21,.76); backdrop-filter:blur(3px) }
    .modal-overlay.active { display:flex }
    .modal-card { position:relative; width:min(920px,100%); max-height:calc(100vh - 56px); overflow:auto; display:grid; grid-template-columns:1fr 1fr; border-radius:22px; background:#fff; box-shadow:0 20px 70px rgba(0,0,0,.34) }
    .modal-media { min-height:420px }
    #modal-1 .modal-media { background:url('/assets/images/home/home-purpose-all-in-one.jpg') center/cover no-repeat }
    #modal-2 .modal-media { background:url('/assets/images/home/home-purpose-customizable.jpg') center/cover no-repeat }
    #modal-3 .modal-media { background:url('/assets/images/home/home-purpose-studio-equipment.jpg') center/cover no-repeat }
    #modal-4 .modal-media { background:url('/assets/images/home/home-purpose-guest-session.jpg') center/cover no-repeat }
    #modal-1 .modal-media::after,#modal-2 .modal-media::after,#modal-3 .modal-media::after,#modal-4 .modal-media::after,#lightbox .modal-media.has-image::after { display:none }
    .modal-content { padding:46px 36px 36px }
    .modal-title { margin:0 0 14px; font-size:34px; line-height:1.03; letter-spacing:-.04em; font-weight:700 }
    .modal-copy { margin:0; color:#5d666b; font-size:15px; line-height:1.8 }
    .modal-close { position:absolute; top:16px; right:16px; z-index:2; width:40px; height:40px; border:0; border-radius:50%; background:rgba(25,27,29,.92); color:#fff; font-size:24px; cursor:pointer }

    @media (max-width:900px) {
      .difference-grid,.impact-grid,.questions-grid,.footergrid,.modal-card { grid-template-columns:1fr }
      .purpose-grid { grid-template-columns:1fr 1fr }
      .quote-image { max-width:none }
      .capture-row { grid-template-columns:50px 1fr 26px }
      .capture-row p { grid-column:2 }
      .capture-row .arrow { grid-column:3; grid-row:1 }
      .gallery { grid-template-columns:1fr 1fr }
      .gallery-item:first-child,.gallery-item:nth-child(5) { grid-row:auto }
      .modal-media { min-height:240px }
      .modal-content { padding:34px 28px 30px }
    }
    @media (max-width:720px) {
      .wrap { width:min(var(--max),calc(100% - 30px)) }
      .topbar { min-height:68px }
      .menu-toggle { display:block }
      .navlinks { position:absolute; top:68px; left:0; right:0; display:none; flex-direction:column; align-items:stretch; gap:0; padding:12px 15px 18px; border-bottom:1px solid #d7dbdd; background:#fff; box-shadow:0 12px 24px rgba(0,0,0,.08) }
      .navlinks.open { display:flex }
      .navlinks a { padding:13px 12px }
      .navlinks .active { border:0; padding-bottom:13px }
      .navlinks .cta-nav { justify-content:center; margin-top:6px }
      .hero { min-height:calc(100svh - 68px) }
      .difference,.purpose,.capture-section,.past,section.impact,.questions { padding:68px 0 }
      .difference-grid { gap:34px }
      .purpose-grid { grid-template-columns:1fr }
      .purpose-image { height:280px }
      .gallery { grid-template-columns:1fr; grid-auto-rows:260px }
      .gallery-item:nth-child(n+4) { display:none }
      .service-options { grid-template-columns:1fr }
      .modal-overlay { padding:14px }
      .modal-card { max-height:calc(100svh - 28px) }
      .modal-media { min-height:190px }
      .modal-title { font-size:28px }
      .footergrid { gap:34px }
    }
    @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto } * { transition:none!important } }