@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Sans:wght@400;500&display=swap');

  :root{
    --bg: #FFFFFF;
    --ink: #201F1C;
    --ink-soft: #55534C;
    --line: #D9D6CE;
  }

  *{ box-sizing: border-box; margin:0; padding:0; }

  @keyframes reveal-in{
    from{ opacity: 0; transform: translateY(36px); }
    to{ opacity: 1; transform: translateY(0); }
  }

  .reveal{
    animation: reveal-in 0.8s ease both;
  }

  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity: 1; transform: none; animation: none; }
  }

  html{ scroll-behavior: smooth; }

  html{ overflow-x: hidden; }

  html,body{
    min-height:100%;
    background: var(--bg);
    color: var(--ink);
    font-family: 'IBM Plex Sans', sans-serif;
  }

  body{
    display:flex;
    min-height:100vh;
  }

  /* main content */
  .content{
    flex: 1;
    display:block;
  }

  .hero{
    display: grid;
    grid-template-columns: 56% 44%;
    min-height: 100vh;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
  }

  .hero-photo{
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: inset -1px 0 0 var(--line);
  }

  .hero-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding: 4rem;
  }

  .hero-text h1{
    font-family:'Space Grotesk', sans-serif;
    font-size: 5.5rem;
    font-weight: 700;
    line-height: 1.02;
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
  }

  .hero-text p{
    font-size: 1.7rem;
    line-height: 1.4;
    color: var(--ink-soft);
  }

  @media (max-width: 860px){
    body{ flex-direction: column; }

    .hero{ grid-template-columns: 1fr; min-height: auto; }
    .hero-photo{
      width: 100%;
      height: 260px;
    }
    .hero-text{
      align-items:center;
      text-align:center;
      padding: 2.5rem 1.75rem;
    }
    .hero-text h1{ font-size: 2.2rem; }
  }

  @media (max-width: 420px){
    .hero-text h1{ font-size: 1.8rem; }
    .hero-text p{ font-size: 1.3rem; }
  }