body {
      background:
        radial-gradient(circle at top right, rgba(94, 134, 166, 0.08), transparent 28%),
        linear-gradient(180deg, #fbfdff 0%, #f6f9fb 100%);
    }

    .hero{
      background-image: url(../assets/banner.jpg);
    }

    .section {
      padding: 84px 0;
    }

    .section-head {
      max-width: 720px;
      margin-bottom: 36px;
    }

    .section-head .tag {
      display: inline-block;
      margin-bottom: 14px;
      color: var(--blue-deep);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.14em;
    }

    .section-head h2 {
      margin: 0 0 14px;
      font-size: clamp(28px, 4vw, 42px);
      line-height: 1.25;
      color: var(--text);
    }

    .section-head p {
      margin: 0;
      color: var(--muted);
      font-size: 16px;
    }




    .story-grid {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 28px;
      align-items: stretch;
    }

    .card {
      background: var(--white);
      border: 1px solid rgba(53, 84, 109, 0.08);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow);
    }

    .story-card {
      padding: 36px;
    }

    .story-card p {
      margin: 0 0 18px;
      color: #33424e;
      font-size: 16px;
    }

    .story-card p:last-child {
      margin-bottom: 0;
    }

    .highlight-panel {
      display: grid;
      grid-template-rows: 1fr auto;
      overflow: hidden;
    }

    .highlight-visual {
      min-height: 300px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(27, 45, 58, 0.34) 100%),
        url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&w=1200&q=80') center/cover;
    }

    .highlight-copy {
      padding: 28px;
      background: linear-gradient(180deg, #ffffff 0%, #f5f9fc 100%);
    }

    .highlight-copy h3 {
      margin: 0 0 10px;
      font-size: 24px;
      color: var(--blue-deep);
    }

    .highlight-copy p {
      margin: 0;
      color: var(--muted);
    }






    .timeline {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 30px;
    }

    .timeline-item {
      padding: 28px 24px;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
    }

    .timeline-item .year {
      display: inline-block;
      margin-bottom: 12px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.12em;
      color: var(--blue);
    }

    .timeline-item h3 {
      margin: 0 0 10px;
      font-size: 22px;
      line-height: 1.35;
    }

    .timeline-item p {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
    }





     

    .philosophy {
      background: linear-gradient(180deg, #f1f6fa 0%, #f8fbfd 100%);
      border-top: 1px solid rgba(53, 84, 109, 0.06);
      border-bottom: 1px solid rgba(53, 84, 109, 0.06);
    }

    .philosophy-wrap {
      display: grid;
      grid-template-columns: 0.95fr 1.05fr;
      gap: 28px;
      align-items: center;
    }

    .quote-card {
      padding: 42px 34px;
      background: linear-gradient(145deg, var(--blue-deep), var(--blue));
      color: #fff;
      border-radius: var(--radius-xl);
      box-shadow: 0 24px 50px rgba(53, 84, 109, 0.22);
    }

    .quote-mark {
      font-size: 54px;
      line-height: 1;
      opacity: 0.38;
      margin-bottom: 10px;
    }

    .quote-card p {
      margin: 0;
      font-size: 23px;
      line-height: 1.7;
      font-weight: 500;
    }

    .quote-card span {
      display: block;
      margin-top: 18px;
      font-size: 14px;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,0.78);
    }

    .content-card {
      padding: 36px;
      background: var(--white);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow);
      border: 1px solid rgba(53, 84, 109, 0.08);
    }

    .content-card p {
      margin: 0 0 18px;
      color: #33424e;
    }

    .content-card p:last-child {
      margin-bottom: 0;
    }



    


    .promise-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      margin-top: 34px;
    }

    .promise-item {
      position: relative;
      padding: 28px 24px 24px 70px;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
    }

    .promise-item::before {
      content: "";
      position: absolute;
      left: 24px;
      top: 28px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--blue), var(--blue-deep));
      box-shadow: 0 8px 16px rgba(53, 84, 109, 0.18);
    }

    .promise-item::after {
      content: "";
      position: absolute;
      left: 35px;
      top: 38px;
      width: 8px;
      height: 8px;
      border-right: 2px solid #fff;
      border-bottom: 2px solid #fff;
      transform: rotate(45deg);
    }

    .promise-item h3 {
      margin: 0 0 8px;
      font-size: 20px;
      color: var(--text);
    }

    .promise-item p {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
    }







    .chef-message {
      position: relative;
    }

    .message-box {
      padding: 42px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
      border-radius: 32px;
      box-shadow: var(--shadow);
      border: 1px solid rgba(53, 84, 109, 0.08);
    }

    .message-box h2 {
      margin: 0 0 16px;
      font-size: clamp(28px, 4vw, 40px);
    }

    .message-box p {
      margin: 0 0 18px;
      color: #33424e;
      font-size: 16px;
    }

    .message-box p:last-of-type {
      margin-bottom: 0;
    }

    .signature {
      margin-top: 28px;
      padding-top: 22px;
      border-top: 1px solid var(--line);
      color: var(--blue-deep);
      font-weight: 700;
      letter-spacing: 0.08em;
    }



  
    .footer-cta {
      padding: 0 0 90px;
    }

    .cta-card {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 20px;
      align-items: center;
      padding: 34px 36px;
      background: linear-gradient(135deg, #2f4f68 0%, #6a90ae 100%);
      color: #fff;
      border-radius: 28px;
      box-shadow: 0 24px 50px rgba(53, 84, 109, 0.24);
    }

    .cta-card h3 {
      margin: 0 0 8px;
      font-size: clamp(24px, 3vw, 34px);
    }

    .cta-card p {
      margin: 0;
      color: rgba(255,255,255,0.86);
    }

    .cta-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 160px;
      padding: 14px 24px;
      border-radius: 999px;
      background: #fff;
      color: var(--blue-deep);
      font-weight: 700;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      box-shadow: 0 12px 24px rgba(0,0,0,0.12);
    }

    .cta-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 28px rgba(0,0,0,0.16);
    }

    .cta-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 14px 18px;
    }

    .cta-related-links {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 14px !important;
    }

    .cta-text-link {
      color: #fff;
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 4px;
    }





    @media (max-width: 980px) {
      .story-grid,
      .philosophy-wrap,
      .cta-card {
        grid-template-columns: 1fr;
      }

      .cta-actions {
        justify-content: flex-start;
      }


      .story-card{
        order:2;
      }
      .hightline-panel{
        order:1;
      }

      .timeline,
      .promise-grid {
        grid-template-columns: 1fr 1fr;
      }

    }

    @media (max-width: 680px) {

      .section {
        padding: 64px 0;
      }

      .story-card,
      .content-card,
      .message-box,
      .quote-card,
      .cta-card {
        padding: 28px 22px;
      }

      .timeline,
      .promise-grid {
        grid-template-columns: 1fr;
      }


      .quote-card p {
        font-size: 19px;
      }
    }