@font-face {
      font-family: "CaslonAntique";
      src: url("fonts/CaslonAntique.ttf") format("truetype");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    /* --- Font (italic) --- */
    @font-face {
      font-family: "CaslonAntique";
      src: url("fonts/CaslonAntique-Italic.ttf") format("truetype");
      font-weight: 400;
      font-style: italic;
      font-display: swap;
    }

    :root{
      --max-width: 1100px;
      --overlay: rgba(0,0,0,0.55);
      --overlay-2: rgba(0,0,0,0.35);
      --text: #ffffff;
      --shadow: 0 20px 60px rgba(0,0,0,0.35);
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }

    body{
      margin: 0;
      font-family: "CaslonAntique", serif;
      color: var(--text);
      background: #000;
      line-height: 1.35;
    }

    /* Shared */
    .section{
      position: relative;
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 72px 18px;
      overflow: hidden;
      isolation: isolate;
    }
    .bg{
      position: absolute;
      inset: 0;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center bottom;
      z-index: -2;
      transform: none;
    }
    .overlay{
      position: absolute;
      inset: 0;
      background: var(--overlay);
      z-index: -1;
    }
    .wrap{
      width: min(var(--max-width), 100%);
      margin: 0 auto;
      text-align: center;
    }

    /* HERO */
    .hero .bg{
      background-image: url("images/background-1.jpg");
      background-position: center 100%;
    }

    .logo{
      width: clamp(120px, 18vw, 220px);
      height: auto;
      display: block;
      margin: 0 auto 22px;
      filter: drop-shadow(0 10px 30px rgba(0,0,0,0.4));
    }

    .hero h1{
      margin: 0 0 14px;
      font-weight: 400;
      letter-spacing: 0.02em;
      font-size: clamp(40px, 5vw, 100px);
      text-shadow: 0 12px 36px rgba(0,0,0,0.55);
    }

    .hero p{
      margin: 0 auto 26px;
      max-width: 62ch;
      font-size: clamp(24px, 2.1vw, 48px);
      line-height: 1.5;
      opacity: 0.95;
      text-shadow: 0 12px 28px rgba(0,0,0,0.55);
    }

    /* === DIVIDER === */
    .divider{
      position: relative;
      height: 120px;
      margin-top: -60px;
      margin-bottom: -60px;
      z-index: 6;
      overflow: hidden;
      isolation: isolate;
      pointer-events: none;
    }
    .divider svg{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
    }
    @media (max-width: 600px){
      .divider{ height: 96px; margin-top: -48px; margin-bottom: -48px; }
    }

    /* SECOND SECTION */
    .feature .bg{
      background-image: url("images/background-2.jpg");
    }
    .feature .overlay{
      background: var(--overlay-2);
    }

    .cards{
      width: min(var(--max-width), 100%);
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      align-items: start;
      margin-top: 18px;
    }

    /* --- LABEL CARD --- */
    .label-card{
      position: relative;
      width: 100%;
      max-width: 520px;
      aspect-ratio: 1 / 1;

      display: grid;
      place-items: start center;

      padding-top: 28px;
      isolation: isolate;
    }

    .label-shape{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
      filter: drop-shadow(0 20px 50px rgba(0,0,0,0.35));
    }

    .label-content{
      position: relative;
      z-index: 1;
      width: 78%;
      text-align: center;
      color: #fff;
    }

    .label-mark{
      width: 300px;
      height: auto;
      display: block;
      margin: 0 auto;
    }

    .label-abv{
      margin-top: -10px;
      margin-bottom: 6px;
      line-height: 1.05;
      font-size: clamp(60px, 4vw, 84px);
      letter-spacing: 0.04em;
    }

    .label-desc{
      font-size: clamp(36px, 1.9vw, 36px);
      line-height: 1.45;
      opacity: 0.95;
      margin-bottom: 25px;
    }

    @media (max-width: 860px){
      .cards{
        grid-template-columns: 1fr;
        justify-items: center;
      }

      .label-card{
        width: min(520px, 92vw);
        aspect-ratio: 1 / 1;
        max-width: none;
      }

      .label-shape{
        display: block;
        width: 100%;
        height: 100%;
      }

      .label-content{
        width: 82%;
        padding-bottom: 18px;
      }

      .label-desc{
        max-width: 26ch;
        margin: 0 auto;
      }
    }


    @media (max-width: 430px){
      .label-card{
        height: clamp(420px, 58vh, 520px);
        padding-top: 18px;
      }

      .label-shape{
        height: 100%;
        width: 100%;
      }

      .label-mark{
        width: min(260px, 70vw);
      }

      .label-abv{
        font-size: clamp(44px, 9vw, 64px);
        margin-top: -6px;
        margin-bottom: 6px;
      }

      .label-desc{
        font-size: clamp(18px, 4.2vw, 24px);
        line-height: 1.25;
        margin-bottom: 0;
      }

      .label-content{
        width: 84%;
        padding-bottom: 18px;
      }
    }
    .divider{
      position: relative;
    }

    .divider-label{
      position: absolute;
      left: 50%;
      top: 32%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-family: "CaslonAntique";
      font-size: clamp(24px, 2.1vw, 48px);
      letter-spacing: 0.06em;
      text-align: center;
      pointer-events: none;
      text-shadow: 0 10px 24px rgba(0,0,0,0.45);
    }




    html{ scroll-behavior: smooth; }