/* byNadiaBlanco.com — hub styles */
@font-face { font-family: 'Cormorant Garamond'; src: url('/fonts/CormorantGaramond-VariableFont_wght.woff') format('woff'); font-weight: 300 700; font-style: normal; font-display: swap; }
    @font-face { font-family: 'Cormorant Garamond'; src: url('/fonts/CormorantGaramond-Italic-VariableFont_wght.woff') format('woff'); font-weight: 300 700; font-style: italic; font-display: swap; }
    @font-face { font-family: 'Jost'; src: url('/fonts/Jost-VariableFont_wght.woff') format('woff'); font-weight: 100 900; font-style: normal; font-display: swap; }

    :root {
      --black: #000000;
      --white: #FFFFFF;
      --grey-80: #C7C7C7;   /* secondary text on black */
      --grey-55: #8C8C8C;   /* tertiary text, meta */
      --grey-30: #4D4D4D;   /* strong rule */
      --line: rgba(255,255,255,0.16);
      --surface: #121212;   /* the only secondary surface */
      --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
      --sans: 'Jost', system-ui, -apple-system, sans-serif;
      --pad: 1.25rem;
      --nav-h: 64px;
      box-sizing: border-box;
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    *, *::before, *::after { box-sizing: inherit; }
    html { scroll-padding-top: env(safe-area-inset-top, 0px); -webkit-text-size-adjust: 100%; }
    body {
      margin: 0; background: var(--black); color: var(--white);
      font-family: var(--sans); font-weight: 300; font-size: 1rem; line-height: 1.6;
      -webkit-font-smoothing: antialiased; overflow-x: hidden;
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    a:focus-visible, button:focus-visible { outline: 1.5px solid var(--white); outline-offset: 4px; }
    .wrap { max-width: 1280px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

    /* ── Header ── */
    .hdr { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 50; height: var(--nav-h);
      display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad);
      background: linear-gradient(to bottom, rgba(0,0,0,0.85), rgba(0,0,0,0)); }
    .hdr-mark img { height: 30px; width: 30px; }
    .hdr-links { display: none; gap: 2rem; }
    .hdr-links a, .hdr-cta { font-size: 0.78rem; letter-spacing: 0.06em; color: var(--grey-80); white-space: nowrap; }
    .hdr-links a:hover, .hdr-links a[aria-current="page"] { color: var(--white); }
    .hdr-cta { color: var(--white); border-bottom: 1px solid var(--line); padding-bottom: 2px; }
    .menu-btn { display: inline-flex; align-items: center; gap: 0.6rem; background: none; border: 0; color: var(--white); font: inherit; font-size: 0.78rem; letter-spacing: 0.06em; padding: 0.6rem 0; cursor: pointer; }
    .menu-btn span { display: block; width: 18px; height: 1px; background: currentColor; box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor; }
    .menu { position: fixed; inset: 0; z-index: 60; background: var(--black); display: none; flex-direction: column; justify-content: center; padding: 2rem var(--pad); }
    .menu.open { display: flex; }
    .menu > a { font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 9vw, 3.2rem); line-height: 1.25; letter-spacing: -0.01em; padding: 0.15em 0; border-bottom: 1px solid var(--line); }
    .menu > a:last-of-type { border-bottom: 0; }
    .menu-close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 18px); right: var(--pad); background: none; border: 0; color: var(--grey-80); font: inherit; font-size: 0.78rem; letter-spacing: 0.06em; cursor: pointer; padding: 0.6rem 0; }
    .menu-foot { margin-top: 2.5rem; color: var(--grey-55); font-size: 0.8rem; display: flex; gap: 1.5rem; }
    @media (min-width: 1000px) {
      :root { --pad: 3rem; --nav-h: 76px; }
      .hdr-mark img { height: 34px; width: 34px; }
      .hdr-links { display: flex; }
      .menu-btn { display: none; }
    }

    /* ── Hero ── */
    .hero { padding-top: calc(var(--nav-h) + 2.5rem); }
    .hero-id { display: grid; gap: 0.6rem; padding-bottom: 1.6rem; }
    .name { font-family: var(--serif); font-weight: 300; font-size: clamp(3.4rem, 14vw, 9.5rem); line-height: 0.92; letter-spacing: -0.025em; margin: 0; }
    .roles { color: var(--grey-80); font-size: 0.86rem; letter-spacing: 0.04em; margin: 0; }
    @media (min-width: 1000px) {
      .hero { padding-top: calc(var(--nav-h) + 3rem); }
      .hero-id { grid-template-columns: 1fr auto; align-items: end; padding-bottom: 2rem; }
      .roles { font-size: 0.9rem; padding-bottom: 0.9rem; }
    }

    /* ── Reel container ── */
    .reel { position: relative; width: 100%; background: var(--surface); overflow: hidden; margin: 0 auto;
      aspect-ratio: 4 / 5; }
    @media (min-width: 760px) { .reel { aspect-ratio: 16 / 9; max-height: 78vh; } }

    .reel-line { padding: 1.4rem 0 0; display: grid; gap: 0.4rem; }
    .reel-line p { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(1.5rem, 4.6vw, 2.2rem); line-height: 1.25; letter-spacing: -0.01em; max-width: 26ch; }
    .reel-line small { color: var(--grey-55); font-size: 0.78rem; }
    @media (min-width: 1000px) { .reel-line { grid-template-columns: 1fr auto; align-items: end; padding-top: 1.75rem; } }


    /* ── Hero reel: 3:4 from 760px, two-column from 1000px ── */
    @media (min-width: 760px) {
      .hero-b .reel { aspect-ratio: 3 / 4; max-height: none; width: min(100%, 58.5vh); margin: 0 auto; }
    }
    @media (min-width: 1000px) {
      .hero-b .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) min(36vw, 58.5vh); grid-template-areas: "id reel" "line reel"; gap: 0 3rem; align-items: start; }
      .hero-b .hero-id { grid-area: id; grid-template-columns: 1fr; padding-bottom: 0; }
      .hero-b .reel { grid-area: reel; }
      .hero-b .reel-line { grid-area: line; align-self: end; }
      .hero-b .name { font-size: clamp(4rem, 8.6vw, 8.6rem); }
      .hero-b .hero-grid { max-width: 1280px; }
      .hero-b .roles { padding-bottom: 0; }
      .hero-b .reel { width: 100%; margin: 0; }
      .hero-b .reel-line { grid-template-columns: 1fr; padding-top: 0; }
      .hero-b .reel-line p { max-width: 20ch; font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
    }
    @media (max-width: 759px) { .hero-b .hero-grid { padding: 0; } .hero-b .hero-id, .hero-b .reel-line { padding-left: var(--pad); padding-right: var(--pad); } .hero-b .reel-line { padding-top: 1.4rem; } .hero-b .hero-id { padding-bottom: 1.6rem; } }

    /* ── Doors ── */
    .doors { padding: 4.5rem 0 0; }
    .door { display: grid; grid-template-columns: 1fr; gap: 0.2rem; padding: 2.2rem 0; border-top: 1px solid var(--line); }
    .door .go { justify-self: start; margin-top: 1.1rem; }
    .door:last-child { border-bottom: 1px solid var(--line); }
    .door h2 { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(2.4rem, 8.5vw, 5.4rem); line-height: 1; letter-spacing: -0.02em; }
    .door p { margin: 0.6rem 0 0; color: var(--grey-80); max-width: 42ch; font-size: 0.95rem; }
    .door .go { font-size: 0.82rem; letter-spacing: 0.06em; color: var(--white); border-bottom: 1px solid var(--white); padding-bottom: 3px; white-space: nowrap; transition: color 0.2s, border-color 0.2s; }
    .door:hover .go { color: var(--grey-80); border-color: var(--grey-80); }
    @media (min-width: 1000px) { .doors { padding-top: 6rem; } .door { padding: 3rem 0; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 1rem 2rem; } .door p { margin-top: 0; padding-bottom: 0.6rem; } .door .go { margin-top: 0; padding-bottom: 0.9rem; } }

    /* ── Films ── */
    .films { padding: 6rem 0 0; }
    .sec-lead { display: grid; gap: 0.6rem; margin-bottom: 2rem; }
    .sec-lead h2 { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.05; letter-spacing: -0.015em; }
    .sec-lead p { margin: 0; color: var(--grey-80); max-width: 52ch; }
    .film-grid { display: grid; gap: 2.5rem; }
    .film { display: grid; gap: 0.9rem; }
    .film-frame:not(.reel) { position: relative; aspect-ratio: 3 / 4; background: var(--surface); overflow: hidden; }
        .film-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
    .film-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.6s; z-index: 1; }
    .film-frame.playing .film-still { opacity: 0; pointer-events: none; }
    .film-play { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; display: none; background: rgba(0,0,0,0.6); color: var(--white); border: 1px solid var(--line); font: inherit; font-size: 0.78rem; letter-spacing: 0.06em; padding: 0.5rem 0.9rem; cursor: pointer; }
    .film-frame.needs-tap .film-play { display: block; }
    .film-frame.playing .film-play { display: none; }
    .film-meta { display: grid; gap: 0.15rem; }
    .film-meta h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.6rem; line-height: 1.1; letter-spacing: -0.01em; }
    .film-meta .kind { color: var(--grey-80); font-size: 0.9rem; }
    .film-meta .credits { color: var(--grey-55); font-size: 0.8rem; }
    .films .all { display: inline-block; margin-top: 2rem; font-size: 0.82rem; letter-spacing: 0.06em; border-bottom: 1px solid var(--line); padding-bottom: 3px; }
    @media (min-width: 760px) { .film-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
    @media (min-width: 1000px) { .films { padding-top: 8rem; } .sec-lead { grid-template-columns: 1fr 1fr; align-items: end; } .film-grid { gap: 3rem; } }

    /* ── Portfolio strip ── */
    .port { padding: 6rem 0; }
    .port .wrap { border-top: 1px solid var(--line); padding-top: 2.5rem; display: grid; gap: 1.5rem; }
    .port .big { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(1.7rem, 5.2vw, 3rem); line-height: 1.2; letter-spacing: -0.015em; max-width: 30ch; }
    .port .big b { font-weight: 400; }
    .port .names { margin: 0; color: var(--grey-80); max-width: 60ch; }
    .port .go { font-size: 0.82rem; letter-spacing: 0.06em; border-bottom: 1px solid var(--white); padding-bottom: 3px; justify-self: start; }
    @media (min-width: 1000px) { .port { padding: 8rem 0; } .port .wrap { grid-template-columns: 1.2fr 1fr; grid-template-rows: auto auto; padding-top: 3rem; } .port .big { grid-row: 1 / span 2; } }

    /* ── Footer ── */
    .ftr { border-top: 1px solid var(--line); padding: 3rem 0 3.5rem; color: var(--grey-55); font-size: 0.8rem; }
    .ftr .wrap { display: grid; gap: 1.6rem; }
    .ftr-nav { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; }
    .ftr-nav a:hover { color: var(--white); }
    .ftr-base { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; justify-content: space-between; }
    .ftr img { height: 26px; width: 26px; opacity: 0.8; }
    @media (min-width: 1000px) { .ftr .wrap { grid-template-columns: auto 1fr; align-items: center; } .ftr-nav { justify-content: flex-end; } .ftr-base { grid-column: 1 / -1; } }

/* ── Inner pages ── */
.page { padding-top: calc(var(--nav-h) + 2.5rem); }
.page-id { display: grid; gap: 1rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.page-id .kicker { margin: 0; color: var(--grey-55); font-size: 0.78rem; letter-spacing: 0.06em; }
.page-id h1 { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(3rem, 11vw, 7rem); line-height: 0.95; letter-spacing: -0.025em; }
.page-id .lede { margin: 0; color: var(--grey-80); max-width: 56ch; font-size: 1.05rem; }
.page-id .ctas { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 0.5rem; }
.btn { display: inline-block; font-size: 0.82rem; letter-spacing: 0.06em; padding: 0.85rem 1.4rem; border: 1px solid var(--white); color: var(--white); transition: background 0.2s, color 0.2s; }
.btn:hover { background: var(--white); color: var(--black); }
.lnk { display: inline-block; font-size: 0.82rem; letter-spacing: 0.06em; border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.lnk:hover { border-color: var(--white); }
.sec { padding: 5rem 0 0; }
.sec-head { display: grid; gap: 0.6rem; margin-bottom: 2rem; }
.sec-head .kicker { margin: 0; color: var(--grey-55); font-size: 0.78rem; letter-spacing: 0.06em; }
.sec-head h2 { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 7vw, 4rem); line-height: 1; letter-spacing: -0.02em; }
.sec-head p { margin: 0; color: var(--grey-80); max-width: 56ch; }
.steps { display: grid; border-top: 1px solid var(--line); }
.step { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.4rem 1rem; padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.step .n { color: var(--grey-55); font-size: 0.78rem; letter-spacing: 0.06em; padding-top: 0.5rem; }
.step h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.1; letter-spacing: -0.01em; }
.step p { margin: 0.3rem 0 0.8rem; color: var(--grey-80); max-width: 52ch; }
.step .lnk { justify-self: start; }
.step > :not(.n) { grid-column: 2; }
.step .n { grid-row: 1 / span 3; }
.split { display: grid; gap: 2rem; }
.spec { display: grid; border-top: 1px solid var(--line); align-self: start; }
.spec div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.spec dt { color: var(--grey-55); }
.spec dd { margin: 0; color: var(--white); }
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin: 1.4rem 0 0; padding: 0; list-style: none; color: var(--grey-80); font-size: 0.9rem; }
.tags li::before { content: "·"; margin-right: 0.6rem; color: var(--grey-30); }
.grid2 { display: grid; gap: 1.5rem 2rem; }
.card { display: grid; gap: 0.3rem; padding: 1.4rem 0; border-top: 1px solid var(--line); }
.card h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.1; }
.card p { margin: 0; color: var(--grey-80); font-size: 0.95rem; max-width: 46ch; }
.card .lnk { justify-self: start; margin-top: 0.5rem; }
.list { margin: 0; padding: 0; list-style: none; columns: 2; gap: 2rem; color: var(--grey-80); font-size: 0.95rem; }
.list li { padding: 0.35rem 0; break-inside: avoid; }
.founder { display: grid; gap: 1.2rem; padding: 2.5rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.founder h2 { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(1.8rem, 5.5vw, 2.8rem); line-height: 1.15; letter-spacing: -0.015em; max-width: 24ch; }
.founder p { margin: 0; color: var(--grey-80); max-width: 60ch; }
.end { padding: 5rem 0 6rem; display: grid; gap: 1.4rem; }
.end h2 { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(2.4rem, 8vw, 4.6rem); line-height: 1; letter-spacing: -0.02em; }
.end p { margin: 0; color: var(--grey-80); }
@media (min-width: 760px) { .grid2 { grid-template-columns: 1fr 1fr; } .split { grid-template-columns: 1.2fr 1fr; gap: 3rem; } .founder { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .page { padding-top: calc(var(--nav-h) + 3.5rem); } .sec { padding-top: 7rem; } .sec-head { grid-template-columns: 1fr 1fr; align-items: end; } .sec-head .kicker { grid-column: 1 / -1; } .grid2 { grid-template-columns: 1fr 1fr 1fr; } .end { padding: 8rem 0 9rem; } }

/* ── /ai ── */
.credits { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin: 1.6rem 0 0; padding: 0; list-style: none; color: var(--grey-80); font-size: 0.86rem; }
.credits li:last-child { color: var(--grey-55); }
.pkgs { display: grid; gap: 0; border-top: 1px solid var(--line); }
.pkg { display: grid; gap: 0.6rem; padding: 2.2rem 0; border-bottom: 1px solid var(--line); }
.pkg .for { margin: 0; color: var(--grey-55); font-size: 0.78rem; letter-spacing: 0.06em; }
.pkg h3 { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1; letter-spacing: -0.015em; }
.pkg .desc { margin: 0.3rem 0 0.6rem; color: var(--grey-80); max-width: 52ch; }
.pkg ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; color: var(--grey-80); font-size: 0.95rem; }
.pkg li::before { content: "·"; margin-right: 0.6rem; color: var(--grey-30); }
.pkg .lnk { justify-self: start; margin-top: 1rem; }
.note { margin: 2rem 0 0; color: var(--grey-55); font-size: 0.9rem; max-width: 60ch; }
.proc { display: grid; border-top: 1px solid var(--line); }
.proc div { display: grid; grid-template-columns: 3rem 1fr; gap: 0.2rem 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.proc .n { color: var(--grey-55); font-family: var(--serif); font-size: 1.3rem; grid-row: 1 / span 2; }
.proc h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.1; }
.proc p { margin: 0; color: var(--grey-80); max-width: 52ch; }
@media (min-width: 1000px) { .pkgs { grid-template-columns: 1fr 1fr 1fr; gap: 3rem; } .pkg { border-bottom: 0; padding: 2.5rem 0 0; } .pkgs { border-bottom: 1px solid var(--line); padding-bottom: 2.5rem; } .proc { grid-template-columns: 1fr 1fr; } .proc div { padding: 2rem 2rem 2rem 0; } }

/* ── Brief panel ── */
.brief { position: fixed; inset: 0; z-index: 70; background: var(--black); display: none; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.brief.open { display: block; }
.brief-in { max-width: 680px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 2rem) var(--pad) calc(env(safe-area-inset-bottom, 0px) + 4rem); }
.brief-head { display: grid; gap: 0.5rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); margin-bottom: 1.6rem; position: relative; }
.brief-head .kicker { margin: 0; color: var(--grey-55); font-size: 0.78rem; letter-spacing: 0.06em; }
.brief-head h2 { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 8vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em; padding-right: 3rem; }
.brief-head p { margin: 0; color: var(--grey-80); }
.brief-close { position: absolute; top: 0; right: 0; background: none; border: 1px solid var(--line); color: var(--grey-80); width: 40px; height: 40px; border-radius: 50%; font: inherit; font-size: 1.1rem; cursor: pointer; }
.brief-close:hover { color: var(--white); border-color: var(--white); }
.field { display: grid; gap: 0.5rem; margin-bottom: 1.4rem; }
.field label, .field .lab { color: var(--grey-55); font-size: 0.78rem; letter-spacing: 0.06em; }
.field input, .field select, .field textarea { width: 100%; background: var(--surface); color: var(--white); border: 1px solid var(--line); border-radius: 0; padding: 0.9rem 1rem; font: inherit; font-size: 1rem; -webkit-appearance: none; appearance: none; }
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--white); }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--grey-80) 50%), linear-gradient(135deg, var(--grey-80) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.6rem; }
.field .hint { color: var(--grey-55); font-size: 0.82rem; }
.field ::placeholder { color: var(--grey-55); }
.budget { display: grid; gap: 0.6rem; }
.budget .out { font-family: var(--serif); font-size: 1.9rem; line-height: 1; }
.budget input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: var(--grey-30); border: 0; padding: 0; margin: 0.6rem 0; }
.budget input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--white); border: 0; cursor: pointer; }
.budget input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--white); border: 0; cursor: pointer; }
.budget .ends { display: flex; justify-content: space-between; color: var(--grey-55); font-size: 0.78rem; }
.send { width: 100%; background: var(--white); color: var(--black); border: 0; padding: 1rem 1.4rem; font: inherit; font-size: 0.86rem; letter-spacing: 0.06em; cursor: pointer; margin-top: 0.4rem; }
.send:hover { background: var(--grey-80); }
.brief .after { color: var(--grey-55); font-size: 0.82rem; margin: 1rem 0 0; }
.thanks { display: none; padding: 3rem 0; }
.thanks h2 { margin: 0 0 0.6rem; font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 7vw, 3rem); line-height: 1.05; }
.thanks p { margin: 0; color: var(--grey-80); }
/* Browser autofill: keep fields dark */
.field input:-webkit-autofill, .field input:-webkit-autofill:hover, .field input:-webkit-autofill:focus, .field textarea:-webkit-autofill, .field select:-webkit-autofill {
  -webkit-text-fill-color: var(--white); -webkit-box-shadow: 0 0 0 1000px var(--surface) inset; box-shadow: 0 0 0 1000px var(--surface) inset; caret-color: var(--white); transition: background-color 9999s ease-out 0s; }
.field input:autofill { background: var(--surface); color: var(--white); }