:root {
    --bg: #0b0b0d;
    --surface: #16161a;
    --ink: #f1ece0;
    --muted: #a39d8e;
    --accent: #d9a62e;
    --line: #34312a;
    color-scheme: dark;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: env(safe-area-inset-top, 0px); background: var(--bg); }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    line-height: 1.6;
  }
  .wrap { width: min(1080px, 100% - 2.5rem); margin-inline: auto; }

  header { padding: clamp(1.8rem, 5vw, 3.5rem) 0 0; text-align: center; }
  .logo { margin: 0; line-height: 0; }
  .logo img { width: min(560px, 88%); height: auto; }
  .sub .logo img { width: min(280px, 64%); }

  nav.main { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.8rem; margin-top: 1.5rem; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; }
  nav.main a { color: var(--muted); text-decoration: none; padding: .3rem 0; border-bottom: 2px solid transparent; }
  nav.main a:hover, nav.main a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

  .intro { padding: clamp(2rem, 6vw, 4rem) 0 clamp(2rem, 5vw, 3.5rem); text-align: center; }
  .intro p {
    margin: 0 auto;
    max-width: 24ch;
    font-size: clamp(1.6rem, 4.4vw, 2.8rem);
    line-height: 1.18;
    font-weight: 500;
    letter-spacing: -.02em;
  }
  .intro small {
    display: block;
    max-width: 52ch;
    margin: 1.3rem auto 0;
    color: var(--muted);
    font-size: 1.05rem;
  }

  .grid { display: grid; gap: 1.1rem; padding-bottom: clamp(3rem, 8vw, 5rem); }
  @media (min-width: 760px) { .grid { grid-template-columns: repeat(2, 1fr); } }

  figure { margin: 0; }
  .slot {
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1.5px dashed var(--line);
    border-radius: 14px;
    color: var(--muted);
    overflow: hidden;
  }
  .video .slot { aspect-ratio: 16 / 9; }
  .video video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; background: #000; }
  .photo .slot { aspect-ratio: 16 / 9; }
  .photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; }
  .slot svg { width: 56px; height: 56px; stroke: var(--accent); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .slot svg .fill { fill: var(--accent); stroke: none; }
  figcaption { margin-top: .6rem; font-size: .95rem; color: var(--muted); }

  a { color: var(--accent); text-underline-offset: 3px; }
  a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

  .services { padding: 0 0 clamp(3rem, 8vw, 5rem); }
  .services .wrap { display: grid; gap: 1.8rem 3rem; border-top: 1px solid var(--line); padding-top: clamp(1.8rem, 4vw, 2.8rem); }
  @media (min-width: 760px) { .services .wrap { grid-template-columns: 1fr 1fr; } }
  .services p { margin: 0; max-width: 46ch; font-size: 1.1rem; }
  .services p::before { content: ""; display: block; width: 2.2rem; height: 2px; background: var(--accent); margin-bottom: .9rem; }

  footer { border-top: 1px solid var(--line); padding: 1.6rem 0 2rem; font-size: .95rem; color: var(--muted); }
  footer .wrap { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }
  footer nav { display: flex; gap: 1.5rem; }
  footer nav a { color: var(--muted); }
  footer nav a:hover { color: var(--accent); }

  .page { padding: clamp(2rem, 6vw, 3.5rem) 0 clamp(3rem, 8vw, 5rem); }
  .page h1 { margin: 0 0 .6rem; font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 500; letter-spacing: -.02em; }
  .lead { margin: 0 0 2rem; max-width: 52ch; color: var(--muted); }
  .contact { display: grid; gap: 1rem; max-width: 760px; }
  @media (min-width: 640px) { .contact { grid-template-columns: 1fr 1fr; } .contact .wide { grid-column: 1 / -1; } }
  .card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem 1.5rem; }
  .card h2 { margin: 0 0 .5rem; font-size: .8rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
  .card p { margin: 0; }
  .card a { font-size: 1.15rem; }

  .legal { font-size: .8rem; line-height: 1.5; color: var(--muted); }
  .legal h1 { font-size: 1.5rem; color: var(--ink); }
  .legal h2 { margin: 1.1rem 0 .15rem; font-size: .85rem; font-weight: 500; color: var(--accent); }
  .legal p { margin: 0 0 .15rem; max-width: 90ch; }