/* =========================================================
       ROOT
    ========================================================= */

    :root {

      --green: #59BE7A;
      --green-2: #76C95A;
      --green-dark: #2E8F58;

      --forest: #102D30;
      --charcoal: #211F20;

      --ink: #172021;
      --muted: #66716D;

      --paper: #FFFFFF;
      --off: #F5F7F5;

      --light-green: #E8F5EC;

      --line: #DDE6E0;

      --radius: 22px;

      --shadow:
        0 18px 55px rgba(16, 45, 48, 0.10);

      --container: 1180px;
    }


    /* =========================================================
       RESET
    ========================================================= */

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


    html {
      scroll-behavior: smooth;
    }


    body {

      font-family: "DM Sans", sans-serif;

      color: var(--ink);

      background: #fff;

      line-height: 1.6;

      overflow-x: hidden;
    }


    a {
      text-decoration: none;
      color: inherit;
    }


    img {
      max-width: 100%;
      display: block;
    }


    button,
    input,
    textarea,
    select {
      font: inherit;
    }


    .container {

      width: min(
        var(--container),
        calc(100% - 40px)
      );

      margin: auto;
    }


    /* =========================================================
       BUTTONS
    ========================================================= */

    .btn {

      display: inline-flex;

      align-items: center;

      justify-content: center;

      gap: 9px;

      border: 0;

      cursor: pointer;

      padding: 13px 21px;

      border-radius: 12px;

      font-weight: 700;

      font-size: 14px;

      transition: .25s ease;
    }


    .btn-primary {

      background: var(--green);

      color: #fff;

      box-shadow:
        0 10px 25px rgba(89, 190, 122, .25);
    }


    .btn-primary:hover {

      transform: translateY(-2px);

      background: var(--green-dark);
    }


    .btn-dark {

      background: var(--forest);

      color: #fff;
    }


    .btn-dark:hover {

      transform: translateY(-2px);

      background: #183F43;
    }


    /* =========================================================
       HEADER
    ========================================================= */

    .header {

      position: fixed;

      top: 0;
      left: 0;
      right: 0;

      z-index: 1000;

      padding: 16px 0;

      transition: .3s ease;
    }


    .header.scrolled {

      background: rgba(255, 255, 255, .92);

      backdrop-filter: blur(18px);

      box-shadow:
        0 8px 30px rgba(16, 45, 48, .08);
    }


    .nav {

      display: flex;

      align-items: center;

      justify-content: space-between;

      min-height: 62px;
    }


    .brand img {
      width: 148px;
    }


    .nav-links {

      display: flex;

      align-items: center;

      gap: 32px;
    }


    .nav-links a {

      font-size: 14px;

      font-weight: 600;

      color: #384440;

      position: relative;
    }


    .nav-links a:not(.btn)::after {

      content: "";

      position: absolute;

      left: 0;

      bottom: -6px;

      width: 0;

      height: 2px;

      background: var(--green);

      transition: .25s;
    }


    .nav-links a:not(.btn):hover::after {

      width: 100%;
    }


    .menu-btn {

      display: none;

      background: none;

      border: 0;

      font-size: 25px;

      color: var(--forest);

      cursor: pointer;
    }


    /* =========================================================
       HERO
    ========================================================= */

    .hero {

      min-height: 850px;

      padding: 150px 0 100px;

      display: flex;

      align-items: center;

      position: relative;

      overflow: hidden;

      background:

        radial-gradient(
          circle at 75% 42%,
          rgba(89, 190, 122, .11),
          transparent 25%
        ),

        linear-gradient(
          180deg,
          #fff 0%,
          #fff 75%,
          #f7faf7 100%
        );
    }


    .hero-grid {

      display: grid;

      grid-template-columns: 1fr 1fr;

      align-items: center;

      gap: 70px;
    }


    .eyebrow,
    .section-label {

      display: inline-flex;

      align-items: center;

      gap: 9px;

      color: var(--green-dark);

      text-transform: uppercase;

      letter-spacing: .14em;

      font-size: 11px;

      font-weight: 800;

      margin-bottom: 18px;
    }


    .eyebrow::before,
    .section-label::before {

      content: "";

      width: 27px;

      height: 2px;

      background: var(--green);
    }


    .hero h1 {

      font-family: "Space Grotesk";

      font-size: clamp(48px, 6vw, 78px);

      line-height: .98;

      letter-spacing: -.055em;

      max-width: 650px;
    }


    .hero h1 span {

      color: var(--green-dark);
    }


    .hero-copy {

      max-width: 560px;

      margin: 25px 0 31px;

      color: var(--muted);

      font-size: 17px;
    }


    .hero-actions {

      display: flex;

      gap: 12px;

      flex-wrap: wrap;
    }


    .hero-note {

      display: flex;

      align-items: center;

      gap: 12px;

      margin-top: 28px;

      color: #68736f;

      font-size: 13px;
    }


    .hero-note i {

      width: 8px;

      height: 8px;

      border-radius: 50%;

      background: var(--green);

      box-shadow:
        0 0 0 7px var(--light-green);
    }


    /* HERO VISUAL */

    .hero-visual {

      position: relative;

      min-height: 540px;
    }


    .hero-paper {

      position: absolute;

      width: 420px;

      height: 510px;

      right: 30px;

      top: 10px;

      border-radius: 10px;

      background: #fff;

      box-shadow: var(--shadow);

      transform: rotate(3deg);

      border: 1px solid #edf2ee;
    }


    .hero-paper::before {

      content: "";

      position: absolute;

      inset: 0;

      background:
        linear-gradient(
          135deg,
          transparent 65%,
          rgba(89, 190, 122, .13)
        );
    }


    .hero-paper::after {

      content: "";

      position: absolute;

      left: 0;

      bottom: 0;

      right: 0;

      height: 12px;

      background: var(--green);
    }


    .paper-lines {

      position: absolute;

      left: 50px;

      right: 50px;

      top: 85px;

      bottom: 65px;

      background:
        repeating-linear-gradient(
          to bottom,
          transparent 0 33px,
          #e9efeb 34px 35px
        );
    }


    .paper-label {

      position: absolute;

      left: 50px;

      top: 45px;

      font-family: "Space Grotesk";

      font-size: 12px;

      font-weight: 700;

      color: var(--green-dark);

      letter-spacing: .12em;
    }


    .hero-diagram {

      position: absolute;

      width: 290px;

      height: 360px;

      left: 0;

      bottom: 5px;

      border-radius: 18px;

      background: var(--forest);

      box-shadow:
        0 28px 60px rgba(16, 45, 48, .2);

      transform: rotate(-7deg);

      overflow: hidden;
    }


    .hero-diagram::before {

      content: "";

      position: absolute;

      width: 180px;

      height: 500px;

      right: -70px;

      top: -50px;

      border: 3px solid var(--green);

      border-left: 0;

      border-radius: 50%;
    }


    .diary {

      position: absolute;

      width: 170px;

      height: 225px;

      left: 58px;

      top: 62px;

      background: #fff;

      border-radius: 8px;

      box-shadow:
        0 15px 30px rgba(0,0,0,.22);

      padding: 25px;
    }


    .diary::before {

      content: "PERIDOT";

      font-family: "Space Grotesk";

      font-weight: 700;

      font-size: 18px;

      color: var(--forest);
    }


    .diary::after {

      content: "DAILY DIARY";

      position: absolute;

      left: 25px;

      bottom: 25px;

      font-size: 9px;

      letter-spacing: .15em;

      color: var(--green-dark);

      font-weight: 800;
    }


    .curve {

      position: absolute;

      width: 520px;

      height: 520px;

      right: -290px;

      bottom: -330px;

      border: 3px solid var(--green);

      border-radius: 50%;

      opacity: .8;
    }


    /* =========================================================
       TRUST STRIP
    ========================================================= */

    .trust-strip {

      background: var(--forest);

      color: #fff;
    }


    .trust-grid {

      display: grid;

      grid-template-columns:
        repeat(4, 1fr);
    }


    .trust-item {

      padding: 27px 24px;

      border-right:
        1px solid rgba(255,255,255,.1);
    }


    .trust-item:last-child {

      border-right: 0;
    }


    .trust-item strong {

      display: block;

      font-family: "Space Grotesk";

      font-size: 15px;

      margin-bottom: 3px;
    }


    .trust-item span {

      font-size: 12px;

      color: #b8c7c2;
    }


    /* =========================================================
       GENERAL SECTION
    ========================================================= */

    .section {

      padding: 120px 0;
    }


    .section-head {

      display: flex;

      align-items: flex-end;

      justify-content: space-between;

      gap: 30px;

      margin-bottom: 55px;
    }


    .section-head h2 {

      font-family: "Space Grotesk";

      font-size: clamp(34px, 4vw, 53px);

      line-height: 1.05;

      letter-spacing: -.045em;

      max-width: 680px;
    }


    .section-head p {

      max-width: 430px;

      color: var(--muted);
    }


    /* =========================================================
       REVEAL
    ========================================================= */

    .reveal {

      opacity: 0;

      transform: translateY(25px);

      transition: .75s ease;
    }


    .reveal.visible {

      opacity: 1;

      transform: none;
    }


    /* =========================================================
       ABOUT
    ========================================================= */

    .about {

      background: var(--off);
    }


    .about-grid {

      display: grid;

      grid-template-columns: 1fr 1.1fr;

      gap: 80px;

      align-items: center;
    }


    .about-visual {

      min-height: 510px;

      background: var(--forest);

      border-radius: 30px;

      position: relative;

      overflow: hidden;
    }


    .about-visual .big-word {

      position: absolute;

      left: 35px;

      bottom: 30px;

      color: rgba(255,255,255,.08);

      font-family: "Space Grotesk";

      font-size: 100px;

      font-weight: 700;

      line-height: .8;
    }


    .about-card {

      position: absolute;

      width: 275px;

      height: 340px;

      top: 75px;

      left: 50%;

      transform:
        translateX(-50%)
        rotate(-5deg);

      background: #fff;

      border-radius: 12px;

      box-shadow:
        0 25px 60px rgba(0,0,0,.25);

      padding: 32px;
    }


.about-card:before {
  content: "";
  display: block;
  width: 65px;
  height: 65px;
  margin-bottom: 25px;
  background-image: url('peridot-logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}


    .about-card h3 {

      font-family: "Space Grotesk";

      font-size: 27px;

      line-height: 1.05;
    }


    .about-card p {

      margin-top: 12px;

      color: var(--muted);

      font-size: 13px;
    }


    .about-text h2 {

      font-family: "Space Grotesk";

      font-size: 48px;

      line-height: 1.04;

      letter-spacing: -.045em;
    }


    .about-text > p {

      color: var(--muted);

      margin: 23px 0;
    }


    .about-points {

      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 20px;

      margin-top: 30px;
    }


    .about-point {

      display: flex;

      gap: 12px;
    }


    .about-point b {

      width: 32px;

      height: 32px;

      flex: 0 0 32px;

      display: grid;

      place-items: center;

      background: var(--light-green);

      color: var(--green-dark);

      border-radius: 9px;

      font-size: 12px;
    }


    .about-point strong {

      display: block;

      font-size: 14px;
    }


    .about-point span {

      font-size: 12px;

      color: var(--muted);
    }


    /* =========================================================
       PRODUCTS
    ========================================================= */

    .products {

      background: #fff;
    }


    .product-grid {

      display: grid;

      grid-template-columns:
        repeat(3, 1fr);

      gap: 22px;
    }


    .product-card {

      border: 1px solid var(--line);

      border-radius: 26px;

      overflow: hidden;

      background: #fff;

      transition: .3s ease;
    }


    .product-card:hover {

      transform: translateY(-6px);

      box-shadow: var(--shadow);
    }


    .product-image {

      height: 350px;

      background: var(--off);

      position: relative;

      overflow: hidden;
    }


    .product-image::after {

      content: "";

      position: absolute;

      width: 420px;

      height: 420px;

      border: 2px solid rgba(89,190,122,.5);

      border-radius: 50%;

      right: -220px;

      bottom: -250px;
    }


    .product-number {

      position: absolute;

      top: 24px;

      right: 25px;

      font-family: "Space Grotesk";

      font-size: 13px;

      font-weight: 700;

      color: #78827e;

      z-index: 2;
    }


    /* NOTEBOOK */

    .notebook {

      position: absolute;

      width: 190px;

      height: 250px;

      top: 50px;

      left: 50%;

      transform:
        translateX(-50%)
        rotate(-4deg);

      border-radius: 8px;

      background:
        linear-gradient(
          145deg,
          #fff,
          #edf6ef
        );

      box-shadow:
        0 25px 40px rgba(16,45,48,.18);

      border-left:
        14px solid var(--forest);
    }


    .notebook::before {

      content:
        "PERIDOT\A SCHOOL\A NOTE BOOK";

      white-space: pre;

      position: absolute;

      left: 25px;

      top: 60px;

      font-family: "Space Grotesk";

      font-size: 16px;

      font-weight: 700;

      line-height: 1.15;

      color: var(--forest);
    }


    .notebook::after {

      content: "QUALITY PAPER";

      position: absolute;

      left: 25px;

      bottom: 25px;

      font-size: 7px;

      letter-spacing: .16em;

      color: var(--green-dark);

      font-weight: 800;
    }


    /* DIARY */

    .diary-product {

      position: absolute;

      width: 175px;

      height: 250px;

      top: 50px;

      left: 50%;

      transform:
        translateX(-50%)
        rotate(5deg);

      border-radius: 8px;

      background: var(--forest);

      box-shadow:
        0 25px 40px rgba(16,45,48,.25);

      border-left:
        10px solid var(--green);
    }


    .diary-product::before {

      content:
        "PERIDOT\A DAILY\A DIARY";

      white-space: pre;

      position: absolute;

      left: 25px;

      top: 60px;

      font-family: "Space Grotesk";

      font-size: 21px;

      font-weight: 700;

      line-height: 1.05;

      color: #fff;
    }


    .diary-product::after {

      content:
        "PLAN • WRITE • ORGANIZE";

      position: absolute;

      left: 25px;

      bottom: 27px;

      font-size: 6px;

      letter-spacing: .12em;

      color: #b9e8c7;

      font-weight: 700;
    }


    /* ANSWER SHEETS */

    .answer-sheet {

      position: absolute;

      width: 210px;

      height: 275px;

      top: 43px;

      left: 50%;

      transform:
        translateX(-50%)
        rotate(2deg);

      background: #fff;

      border-radius: 5px;

      box-shadow:
        0 25px 40px rgba(16,45,48,.17);

      border:
        1px solid #dce5df;

      padding: 25px;
    }


    .answer-sheet::before {

      content: "PERIDOT PAPER PRODUCTS";

      display: block;

      font-family: "Space Grotesk";

      font-size: 9px;

      font-weight: 700;

      color: var(--forest);

      padding-bottom: 12px;

      border-bottom:
        2px solid var(--green);

      margin-bottom: 15px;
    }


    .answer-sheet::after {

      content:
        "NAME: __________________\A\A ROLL NO: _______________\A\A SUBJECT: _______________\A\A DATE: __________________";

      white-space: pre;

      font-size: 8px;

      line-height: 2.2;

      color: #68736f;
    }


    .answer-lines {

      position: absolute;

      left: 25px;

      right: 25px;

      bottom: 25px;

      height: 90px;

      background:
        repeating-linear-gradient(
          to bottom,
          transparent 0 17px,
          #e2e9e4 18px 19px
        );
    }


    .product-content {

      padding: 25px 25px 28px;
    }


    .product-content h3 {

      font-family: "Space Grotesk";

      font-size: 25px;
    }


    .product-content p {

      color: var(--muted);

      font-size: 13px;

      margin: 7px 0 20px;

      min-height: 62px;
    }


    /* =========================================================
       MANUFACTURING VIDEOS
    ========================================================= */

    .manufacturing {

      background: var(--off);
    }


    .manufacturing-grid {

      display: grid;

      grid-template-columns:
        1.45fr .75fr;

      grid-template-areas:

        "landscape portrait"

        "portrait2 landscape2";

      gap: 18px;

      align-items: stretch;
    }


    .manufacturing-video {

      position: relative;

      overflow: hidden;

      border-radius: 24px;

      background: var(--forest);

      isolation: isolate;
    }


    .manufacturing-video.landscape {

      aspect-ratio: 16 / 9;
    }


    .manufacturing-video.portrait {

      aspect-ratio: 9 / 16;

      max-height: 560px;
    }


    .video-1 {
      grid-area: landscape;
    }


    .video-2 {
      grid-area: portrait;
    }


    .video-3 {
      grid-area: portrait2;

      width: 100%;

      max-width: 430px;

      justify-self: end;
    }


    .video-4 {
      grid-area: landscape2;
    }


    .manufacturing-video video {

      width: 100%;

      height: 100%;

      display: block;

      object-fit: cover;

      object-position: center;

      border: 0;

      transition: transform .7s ease;
    }


    .manufacturing-video:hover video {

      transform: scale(1.025);
    }


    .manufacturing-video::after {

      content: "";

      position: absolute;

      inset: 0;

      background:
        linear-gradient(
          to top,
          rgba(16,45,48,.72) 0%,
          rgba(16,45,48,.12) 35%,
          transparent 65%
        );

      pointer-events: none;

      z-index: 1;
    }


    .video-overlay {

      position: absolute;

      left: 22px;

      right: 22px;

      bottom: 20px;

      z-index: 2;

      color: #fff;

      display: flex;

      align-items: center;

      justify-content: space-between;
    }


    .video-overlay span {

      width: 34px;

      height: 34px;

      display: grid;

      place-items: center;

      border-radius: 10px;

      background: rgba(89,190,122,.92);

      font-size: 11px;

      font-weight: 800;
    }


    .video-overlay strong {

      font-family: "Space Grotesk";

      font-size: 14px;
    }


    /* =========================================================
       QUALITY
    ========================================================= */

    .quality {

      background: var(--forest);

      color: #fff;

      overflow: hidden;
    }


    .quality .section-label {

      color: #9de1b2;
    }


    .quality .section-label::before {

      background: var(--green);
    }


    .quality-grid {

      display: grid;

      grid-template-columns:
        1.1fr 1fr;

      gap: 80px;

      align-items: center;
    }


    .quality h2 {

      font-family: "Space Grotesk";

      font-size: clamp(40px,5vw,62px);

      line-height: 1;

      letter-spacing: -.05em;
    }


    .quality-intro {

      color: #b6c5c0;

      max-width: 560px;

      margin: 22px 0 35px;
    }


    .quality-list {

      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 16px;
    }


    .quality-item {

      padding: 22px;

      border:
        1px solid rgba(255,255,255,.11);

      border-radius: 17px;

      background:
        rgba(255,255,255,.035);
    }


    .quality-item span {

      color: var(--green);

      font-size: 11px;

      font-weight: 800;

      letter-spacing: .12em;
    }


    .quality-item strong {

      display: block;

      margin-top: 8px;

      font-family: "Space Grotesk";
    }


    .quality-item p {

      font-size: 12px;

      color: #9eafaa;

      margin-top: 4px;
    }


    .quality-visual {

      min-height: 500px;

      position: relative;

      border-radius: 28px;

      background:
        linear-gradient(
          145deg,
          #173c40,
          #0b2528
        );

      overflow: hidden;
    }


    .quality-visual::before,
    .quality-visual::after {

      content: "";

      position: absolute;

      border-radius: 50%;

      border:
        2px solid rgba(89,190,122,.55);
    }


    .quality-visual::before {

      width: 600px;

      height: 600px;

      right: -360px;

      top: -210px;
    }


    .quality-visual::after {

      width: 430px;

      height: 430px;

      left: -270px;

      bottom: -240px;
    }


    .stack {

      position: absolute;

      left: 50%;

      top: 50%;

      transform:
        translate(-50%,-50%)
        rotate(-6deg);

      width: 280px;

      height: 360px;

      background: #fff;

      border-radius: 9px;

      box-shadow:
        0 35px 60px rgba(0,0,0,.28);
    }


    .stack::before,
    .stack::after {

      content: "";

      position: absolute;

      inset: 12px;

      border:
        1px solid #dce8df;

      border-radius: 6px;
    }


    .stack::after {

      inset: auto 0 -12px 0;

      height: 25px;

      background: #e7efe9;

      border: 0;

      border-radius:
        0 0 8px 8px;

      z-index: -1;
    }


    .stack-label {

      position: absolute;

      left: 35px;

      top: 40px;

      font-family: "Space Grotesk";

      font-size: 25px;

      font-weight: 700;

      color: var(--forest);
    }


    .stack-green {

      position: absolute;

      left: 35px;

      bottom: 40px;

      width: 75px;

      height: 7px;

      background: var(--green);
    }


    /* =========================================================
       WHY PERIDOT
    ========================================================= */

    .why {

      background: var(--off);
    }


    .why-grid {

      display: grid;

      grid-template-columns:
        repeat(4,1fr);

      gap: 16px;
    }


    .why-card {

      background: #fff;

      border:
        1px solid var(--line);

      border-radius: 20px;

      padding: 28px;

      min-height: 210px;
    }


    .why-card .num {

      font-family: "Space Grotesk";

      font-size: 13px;

      color: var(--green-dark);

      font-weight: 700;
    }


    .why-card h3 {

      font-family: "Space Grotesk";

      font-size: 22px;

      margin-top: 55px;
    }


    .why-card p {

      font-size: 13px;

      color: var(--muted);

      margin-top: 6px;
    }


    /* =========================================================
       CTA
    ========================================================= */

    .cta {

      padding: 105px 0;
    }


    .cta-box {

      background: var(--green);

      border-radius: 30px;

      padding: 70px;

      color: #fff;

      position: relative;

      overflow: hidden;
    }


    .cta-box::after {

      content: "";

      position: absolute;

      width: 500px;

      height: 500px;

      border:
        2px solid rgba(255,255,255,.28);

      border-radius: 50%;

      right: -270px;

      top: -220px;
    }


    .cta-box h2 {

      font-family: "Space Grotesk";

      font-size: clamp(38px,5vw,60px);

      line-height: 1;

      max-width: 650px;

      letter-spacing: -.05em;
    }


    .cta-box p {

      max-width: 560px;

      margin: 20px 0 28px;

      color: #e8fff0;
    }


    .cta-box .btn {

      background: var(--forest);

      color: #fff;

      position: relative;

      z-index: 2;
    }


    /* =========================================================
       CONTACT
    ========================================================= */

    .contact {

      background: #fff;
    }


    .contact-grid {

      display: grid;

      grid-template-columns: .9fr 1.1fr;

      gap: 80px;
    }


    .contact h2 {

      font-family: "Space Grotesk";

      font-size: 50px;

      line-height: 1.03;

      letter-spacing: -.05em;
    }


    .contact-intro {

      color: var(--muted);

      margin: 18px 0 30px;
    }


    .contact-detail {

      display: flex;

      gap: 14px;

      margin: 20px 0;
    }


    .contact-icon {

      width: 42px;

      height: 42px;

      border-radius: 12px;

      background: var(--light-green);

      color: var(--green-dark);

      display: grid;

      place-items: center;

      font-weight: 800;

      font-size: 13px;

      flex: 0 0 42px;
    }


    .contact-detail strong {

      display: block;

      font-size: 14px;
    }


    .contact-detail span {

      display: block;

      font-size: 13px;

      color: var(--muted);
    }


    /* FORM */

    .form {

      background: var(--off);

      border:
        1px solid var(--line);

      border-radius: 25px;

      padding: 30px;
    }


    .form-grid {

      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 15px;
    }


    .field {

      margin-bottom: 15px;
    }


    .field.full {

      grid-column: 1 / -1;
    }


    .field label {

      display: block;

      font-size: 12px;

      font-weight: 700;

      margin-bottom: 7px;
    }


    .field input,
    .field textarea,
    .field select {

      width: 100%;

      border:
        1px solid var(--line);

      background: #fff;

      border-radius: 11px;

      padding: 13px 14px;

      outline: none;

      color: var(--ink);
    }


    .field textarea {

      min-height: 130px;

      resize: vertical;
    }


    .field input:focus,
    .field textarea:focus,
    .field select:focus {

      border-color: var(--green);
    }


    /* =========================================================
       FOOTER
    ========================================================= */

    .footer {

      background: var(--charcoal);

      color: #fff;

      padding: 65px 0 25px;
    }


    .footer-grid {

      display: grid;

      grid-template-columns:
        1.3fr 1fr 1fr;

      gap: 60px;

      padding-bottom: 50px;
    }


    .footer img {

      width: 160px;

      filter:
        brightness(0)
        invert(1);
    }


    .footer-brand p {

      color: #9fa8a5;

      max-width: 310px;

      font-size: 13px;

      margin-top: 16px;
    }


    .footer h4 {

      font-family: "Space Grotesk";

      font-size: 15px;

      margin-bottom: 17px;
    }


    .footer a,
    .footer span {

      display: block;

      color: #9fa8a5;

      font-size: 13px;

      margin: 9px 0;
    }


    .footer a:hover {

      color: var(--green);
    }


    .footer-bottom {

      padding-top: 22px;

      border-top:
        1px solid rgba(255,255,255,.1);

      color: #777f7d;

      font-size: 11px;

      display: flex;

      justify-content: space-between;

      gap: 20px;
    }


    /* =========================================================
       TABLET
    ========================================================= */

    @media (max-width: 1000px) {

      .nav-links {

        position: absolute;

        top: 78px;

        left: 20px;

        right: 20px;

        display: none;

        flex-direction: column;

        align-items: stretch;

        padding: 20px;

        background: #fff;

        border:
          1px solid var(--line);

        border-radius: 18px;

        box-shadow: var(--shadow);
      }


      .nav-links.open {

        display: flex;
      }


      .menu-btn {

        display: block;
      }


      .hero-grid,
      .about-grid,
      .quality-grid,
      .contact-grid {

        grid-template-columns: 1fr;
      }


      .product-grid {

        grid-template-columns:
          repeat(2, 1fr);
      }


      .why-grid {

        grid-template-columns:
          repeat(2, 1fr);
      }


      .trust-grid {

        grid-template-columns:
          repeat(2,1fr);
      }


      .trust-item:nth-child(2) {

        border-right: 0;
      }


      .footer-grid {

        grid-template-columns:
          1fr 1fr;
      }


      .manufacturing-grid {

        grid-template-columns: 1fr 1fr;

        grid-template-areas:

          "landscape landscape"

          "portrait portrait2"

          "landscape2 landscape2";
      }


      .manufacturing-video.portrait {

        width: 75%;

        justify-self: center;
      }

    }


    /* =========================================================
       MOBILE
    ========================================================= */

    @media (max-width: 600px) {

      .container {

        width:
          min(
            var(--container),
            calc(100% - 28px)
          );
      }


      .brand img {

        width: 125px;
      }


      .hero {

        min-height: auto;

        padding:
          145px 0 80px;
      }


      .hero h1 {

        font-size: 47px;
      }


      .hero-visual {

        min-height: 420px;

        transform: scale(.86);

        transform-origin:
          top center;

        margin-bottom: -50px;
      }


      .hero-paper {

        right: 0;

        width: 330px;

        height: 400px;
      }


      .hero-diagram {

        width: 230px;

        height: 290px;
      }


      .diary {

        width: 140px;

        height: 190px;

        left: 45px;

        top: 48px;
      }


      .trust-grid {

        grid-template-columns: 1fr;
      }


      .trust-item {

        border-right: 0;

        border-bottom:
          1px solid rgba(255,255,255,.1);
      }


      .trust-item:last-child {

        border-bottom: 0;
      }


      .section {

        padding: 90px 0;
      }


      .section-head {

        display: block;
      }


      .section-head p {

        margin-top: 15px;
      }


      .about-points,
      .quality-list {

        grid-template-columns: 1fr;
      }


      .about-visual {

        min-height: 430px;
      }


      .about-card {

        width: 235px;

        height: 300px;
      }


      .product-grid {

        grid-template-columns: 1fr;
      }


      .product-image {

        height: 370px;
      }


      .manufacturing-grid {

        display: grid;

        grid-template-columns: 1fr;

        grid-template-areas: none;

        gap: 16px;
      }


      .manufacturing-video {

        grid-area: auto !important;

        width: 100% !important;

        justify-self: stretch;

        max-height: none;
      }


      .manufacturing-video.landscape {

        aspect-ratio: 16 / 10;
      }


      .manufacturing-video.portrait {

        width: 72% !important;

        aspect-ratio: 9 / 16;

        justify-self: center;
      }


      .quality-visual {

        min-height: 420px;
      }


      .quality-list {

        grid-template-columns: 1fr;
      }


      .why-grid {

        grid-template-columns: 1fr;
      }


      .cta-box {

        padding: 45px 28px;
      }


      .contact h2 {

        font-size: 40px;
      }


      .form-grid {

        grid-template-columns: 1fr;
      }


      .field.full {

        grid-column: auto;
      }


      .footer-grid {

        grid-template-columns: 1fr;
      }


      .footer-bottom {

        display: block;
      }


      .footer-bottom span {

        margin-top: 8px;
      }

    }