/* ============================================================
   "About Zaika" / "Meet the Chef" two-block design, built to match
   a client-supplied reference image exactly. Shared by about.html
   (as its own page) and index.html (as the #about section of the
   single-page scroll) so both stay visually identical. Scoped under
   .zaika-about with its own palette and type tokens (distinct from
   the site-wide color/font tokens in styles.css) rather than reusing
   them, since matching the reference precisely was the point.
   ============================================================ */
.zaika-about {
  --za-cream: #f7eedc;
  --za-green: #042a1f;
  --za-green-deep: #021a13;
  --za-gold: #b8892f;
  --za-gold-2: #d8ad52;
  --za-ink: #171817;
  --za-white: #fff9ee;
  --za-maroon: #7b1824;
  --za-serif: "Cormorant Garamond", Georgia, serif;
  --za-sans: "DM Sans", Arial, sans-serif;
  --za-script: "Dancing Script", cursive;
  overflow: hidden;
  font-family: var(--za-sans);
  color: var(--za-ink);
}
.zaika-about *{box-sizing:border-box}
.zaika-block{position:relative;padding:clamp(78px,7vw,130px) 0}
.zaika-wrap{width:min(1500px,calc(100% - 96px));margin:auto;position:relative;z-index:2}

/* ---------- Cream block: About Zaika ---------- */
.zaika-company{
  background:var(--za-cream) url('../images/backgrounds/about-zaika-bg.jpg') center center / cover no-repeat;
  position:relative;overflow:hidden;
}
@supports (background-image: url('data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==')) {
  .zaika-company{background-image:url('../images/backgrounds/about-zaika-bg.webp')}
}
.company-grid{display:grid;grid-template-columns:1fr .95fr;gap:clamp(40px,4.5vw,90px);align-items:center}
.zaika-about .kicker{margin:0 0 12px;color:var(--za-gold);font-size:clamp(15px,0.95vw,18px);font-weight:600;font-style:italic;letter-spacing:3px;text-transform:uppercase;font-family:var(--za-sans)}
.zaika-about .company-title,.zaika-about .chef-title{font-family:var(--za-serif);font-weight:700;letter-spacing:-.8px;line-height:.94;margin:0;color:var(--za-ink)}
.zaika-about .company-title{font-size:clamp(68px,5.4vw,98px)}
.zaika-about .copy{max-width:640px;margin:22px 0 0;font-size:clamp(16px,1.15vw,19px);line-height:1.55;color:#393b37}
.zaika-about .copy+.copy{margin-top:16px}

.zaika-about .values{display:grid;grid-template-columns:repeat(4,1fr);max-width:680px;margin-top:32px}
.zaika-about .value{position:relative;text-align:center;padding:0 17px}
.zaika-about .value:first-child{padding-left:0}
.zaika-about .value:last-child{padding-right:0}
.zaika-about .value:not(:last-child):after{content:"";position:absolute;right:0;top:5px;width:1px;height:76px;background:rgba(184,137,47,.65)}
.zaika-about .icon{display:block;width:clamp(70px,5.2vw,88px);height:auto;margin:0 auto 8px}
.zaika-about .value-text{font-size:clamp(13px,0.85vw,15px);font-weight:600;line-height:1.2}
.zaika-about .menu-btn{display:inline-flex;gap:12px;align-items:center;margin-top:30px;padding:16px 32px;border-radius:999px;background:var(--za-green);color:var(--za-white);font-weight:600;font-size:clamp(15px,0.95vw,17px);text-decoration:none;font-family:var(--za-sans);transition:transform .2s ease,box-shadow .2s ease}
.zaika-about .menu-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(6,59,45,.35)}
.zaika-about .menu-btn span{font-size:20px}

.zaika-about .food-wrap{position:relative;max-width:clamp(420px,40vw,680px);margin-left:auto}
.zaika-about .food-photo{display:block;width:100%;height:auto;
  filter:drop-shadow(0 20px 35px rgba(6,59,45,.35))}
.zaika-about .food-note{position:absolute;right:-12px;bottom:13px;width:clamp(275px,20vw,360px);padding:20px 22px;background:#e8d4a8;
  clip-path:polygon(4% 8%,20% 0%,55% 4%,78% 1%,96% 6%,100% 30%,97% 55%,100% 78%,94% 96%,70% 100%,45% 97%,22% 100%,3% 94%,0% 68%,4% 40%);
  transform:rotate(-6deg);box-shadow:0 8px 20px rgba(0,0,0,.25);text-align:center;font-family:var(--za-script);font-size:clamp(22px,1.6vw,28px);line-height:1.15;color:#2a2420}
.zaika-about .heart{color:var(--za-maroon)}

/* ---------- Green block: Meet the Chef ---------- */
.zaika-chef{
  position:relative;
  background:var(--za-green) url('../images/backgrounds/about-chef-bg.jpg') center center / cover no-repeat;
  color:var(--za-white);padding:clamp(96px,8vw,150px) 0 clamp(88px,7vw,130px);
}
@supports (background-image: url('data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==')) {
  .zaika-chef{background-image:url('../images/backgrounds/about-chef-bg.webp')}
}
/* The section above (About Zaika) and this one are two independently
   generated background images - even both being "cream" at the seam,
   their exact tones don't match pixel-for-pixel, leaving a faint hard
   line where one image ends and the next begins. Fading this section's
   own top edge in from the previous section's measured ending tone
   (rather than its own slightly different cream) hides that seam. */
.zaika-chef::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:52px;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom, rgb(247,233,207) 0%, rgba(247,233,207,0) 100%);
}
.chef-grid{display:grid;grid-template-columns:1fr .95fr .4fr;gap:clamp(28px,3vw,56px);align-items:center}
.zaika-about .chef-title{font-size:clamp(70px,5.4vw,98px);color:var(--za-white)}
.zaika-about .chef-copy{max-width:640px;color:var(--za-white)}
.zaika-about .chef-copy .copy{color:rgba(255,249,238,.92)}
.zaika-about .signature-row{display:flex;align-items:flex-end;gap:22px;margin-top:30px}
.zaika-about .signature{font-family:var(--za-script);font-size:clamp(52px,4vw,68px);line-height:.9;color:var(--za-gold-2)}
.zaika-about .signature-rule{width:94px;height:2px;background:var(--za-gold-2);display:inline-block;margin:0 0 8px 18px;transform:rotate(-3deg)}
.zaika-about .chef-name{color:var(--za-gold-2);font-weight:600;font-size:clamp(15px,0.95vw,17px);font-family:var(--za-sans)}
.zaika-about .chef-role{font-size:clamp(12px,0.75vw,13px);letter-spacing:1.2px;text-transform:uppercase;margin-top:4px;color:rgba(255,249,238,.8);font-family:var(--za-sans)}

.zaika-about .chef-photo-wrap{position:relative;width:100%;max-width:clamp(300px,26vw,460px);margin:0 auto}
.zaika-about .chef-frame{padding:clamp(11px,0.9vw,16px);background:#e8d19d;transform:rotate(4deg);box-shadow:0 20px 44px rgba(0,0,0,.45)}
.zaika-about .chef-photo{display:block;width:100%;aspect-ratio:.75/1;object-fit:cover;object-position:center top}
.zaika-about .chef-side{position:relative;display:flex;flex-direction:column;align-items:center;gap:30px}
.zaika-about .chef-note{color:var(--za-white);font-family:var(--za-script);font-size:clamp(23px,1.7vw,30px);line-height:1.2;text-align:center;transform:rotate(-5deg)}
.zaika-about .chef-note .heart-outline{display:block;margin:6px auto 0;width:20px;height:20px}
.zaika-about .badge-stamp{display:block;width:clamp(140px,10vw,180px);height:auto}

@media(max-width:900px){
  .zaika-about .zaika-wrap{width:min(680px,calc(100% - 40px))}
  .zaika-about .company-grid{grid-template-columns:1fr;gap:48px}
  .zaika-about .chef-grid{grid-template-columns:1fr;gap:36px}
  .zaika-about .food-wrap{margin:auto}
  .zaika-about .chef-copy{order:1}
  .zaika-about .chef-photo-wrap{order:2;margin-top:10px}
  .zaika-about .chef-side{order:3;flex-direction:row;justify-content:center;margin-top:10px}
}
@media(max-width:600px){
  .zaika-about .zaika-block{padding:58px 0 64px}
  .zaika-about .zaika-wrap{width:calc(100% - 34px)}
  .zaika-about .company-title,.zaika-about .chef-title{font-size:49px}
  .zaika-about .copy{font-size:15px}
  .zaika-about .values{grid-template-columns:repeat(2,1fr);row-gap:22px}
  .zaika-about .value{padding:0 12px}
  .zaika-about .value:nth-child(2):after,.zaika-about .value:nth-child(4):after{display:none}
  .zaika-about .value:nth-child(1):after,.zaika-about .value:nth-child(3):after{display:block}
  .zaika-about .food-note{width:220px;font-size:19px}
  .zaika-about .chef-photo-wrap{width:min(360px,88vw)}
  .zaika-about .chef-side{display:none}
  .zaika-about .signature{font-size:45px}
}