/* ============================================================
   ARADA WORLD — a deliberately separate visual language from the
   main Komari site. Palette is Arada's exact official brand hexes:
   #38706b (teal), #ffa100 (amber), #d5cd0b (yellow-gold).
   No black, no red — those belong to the Komari corporate system,
   not Arada. Loaded only on arada.html, and only takes effect
   inside .arada-world.
   ============================================================ */
.arada-world{
  --a-teal:      #38706b;
  --a-teal-deep: #1e3d3a;
  --a-teal-deeper:#132725;
  --a-amber:     #ffa100;
  --a-yellow:    #d5cd0b;
  --a-cream:     #f6efe0;
  background:var(--a-cream);
  color:var(--a-teal-deeper);
  scroll-snap-type:y mandatory;
  /* Arada-only typefaces (this page uses a different type system from the
     rest of the Komari site): Alergia Remix for headlines, Helvetica Neue
     for body copy. Neither is a free/embeddable web font, so the browser
     will fall back to the next name in the stack until real font files are
     supplied — same situation as Avenir on the main Komari site. */
  --display: "Alergia Remix", "Poppins", Arial, sans-serif;
  --body:    "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.arada-world .site-header{background:transparent;}
.arada-world .site-header.scrolled{background:var(--a-teal-deeper);border-bottom-color:rgba(255,255,255,.1);}
.arada-world .site-header.scrolled .nav-links > li > a:not(.btn),
.arada-world .site-header.scrolled .nav-links > li > button{color:#fff;}
.arada-world .site-header.scrolled .logo img{filter:brightness(0) invert(1);}
.arada-world .nav-links > li > a:not(.btn):hover,
.arada-world .nav-links > li > button:hover{color:var(--a-amber);}
.arada-world .site-header .btn-solid{background:var(--a-amber);border-color:var(--a-amber);color:var(--a-teal-deeper);}
.arada-world .site-header .btn-solid:hover{background:var(--a-yellow);border-color:var(--a-yellow);}

.arada-world section{padding:110px 0;}
.arada-world section.tone-white{
  min-height:100vh;display:flex;align-items:center;
  scroll-snap-align:start;
}
.arada-world section.tone-white .wrap{width:100%;}
.arada-world .eyebrow{
  color:var(--a-teal);font-weight:800;letter-spacing:.18em;font-size:.85rem;
}
.arada-world .eyebrow::before{color:var(--a-amber);}
.arada-world section.essence-dark{background:#0d0d0d;}
.arada-world section.essence-dark .eyebrow{color:var(--a-yellow);}
.arada-world section.essence-dark .eyebrow::before{color:var(--a-amber);}
.arada-world section.essence-dark h2{color:#fff;}
.arada-world section.essence-dark p{color:rgba(255,255,255,.75);}
.arada-world h1, .arada-world h2, .arada-world h3{
  font-weight:800;letter-spacing:-0.02em;
}
.arada-world h2{font-size:clamp(2.2rem,4.6vw,3.4rem);}
.arada-world .btn{border-radius:999px;}
.arada-world .btn-line{color:var(--a-teal-deeper);}
.arada-world .btn-line:hover{background:var(--a-teal-deeper);color:#fff;}

/* Full-bleed immersive hero — bold, energetic, 100vh, no black overlay */
.arada-hero{
  position:relative;height:100vh;min-height:600px;
  display:flex;align-items:flex-end;padding-bottom:56px;
  color:#fff;isolation:isolate;overflow:hidden;
  scroll-snap-align:start;
}
.arada-hero-video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center;
}
.arada-hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg, rgba(30,61,58,.75) 0%, rgba(30,61,58,.12) 55%, rgba(56,112,107,.2) 100%);
}
.arada-hero .wrap{width:100%;position:relative;z-index:2;}
.arada-hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;flex-wrap:wrap;}
.arada-hero-text{flex:1 1 480px;min-width:280px;}
.arada-hero .arada-logo-mark{height:190px;width:auto;flex-shrink:0;margin-left:auto;}
.arada-hero .eyebrow{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.6);}
.arada-hero .eyebrow::before{color:var(--a-amber);text-shadow:0 2px 12px rgba(0,0,0,.55);}
.arada-hero h1{
  font-size:clamp(3rem,8vw,6.4rem);color:#fff;line-height:.92;max-width:14ch;
  text-transform:uppercase;
}
.arada-hero p{font-size:1.2rem;color:rgba(255,255,255,.9);max-width:48ch;margin-top:.6em;}
.arada-hero .btn-solid{background:var(--a-amber);border-color:var(--a-amber);color:var(--a-teal-deeper);}
.arada-hero .btn-solid:hover{background:var(--a-yellow);border-color:var(--a-yellow);}
.arada-hero .btn-line-light:hover{color:var(--a-teal-deeper);}

/* Flavour strip — the three exact brand colours only */
.arada-flavour-strip{display:flex;gap:2px;}
.arada-flavour-strip .swatch{flex:1;height:140px;transition:flex-grow .45s cubic-bezier(.2,.8,.2,1);cursor:default;}
.arada-flavour-strip:hover .swatch{flex-grow:1;}
.arada-flavour-strip .swatch:hover{flex-grow:2.6 !important;}
.arada-flavour-strip .swatch.teal{background:var(--a-teal);}
.arada-flavour-strip .swatch.coral{background:var(--a-amber);}
.arada-flavour-strip .swatch.gold{background:var(--a-yellow);}
.arada-flavour-strip .swatch.ink{background:var(--a-teal-deep);}

/* Split showcase section — text on a solid brand-colour panel,
   full uncropped image alongside (no overlay, nothing hidden) */
.arada-split{display:grid;grid-template-columns:1fr 1.2fr;min-height:100vh;scroll-snap-align:start;}
.arada-split-text{
  display:flex;flex-direction:column;justify-content:center;
  padding:56px 64px;color:#fff;
}
.arada-split-text.tone-teal{background:var(--a-teal-deep);}
.arada-split-text.tone-teal2{background:var(--a-teal);}
.arada-split-text .eyebrow{color:var(--a-yellow);}
.arada-split-text .eyebrow::before{color:var(--a-amber);}
.arada-split-text h2{color:#fff;max-width:12ch;}
.arada-split-text p{color:rgba(255,255,255,.85);font-size:1.1rem;max-width:38ch;}
.arada-split-media{background:var(--a-teal-deeper);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.arada-split-media img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;}
@media(max-width:900px){
  .arada-split{grid-template-columns:1fr;min-height:auto;}
  .arada-split-text{padding:56px 28px;}
  .arada-split-media{height:50vh;}
}
.arada-split.reverse{direction:rtl;}
.arada-split.reverse > *{direction:ltr;}

/* Lifestyle gallery — full-width, stacked, uncropped and immersive */
.arada-gallery-immersive{display:flex;flex-direction:column;gap:6px;}
.arada-gallery-immersive img{width:100%;height:auto;display:block;}

/* Single full-width section — the picture is the section, full-bleed
   100vh cover-fit as part of the page's scroll-snap rhythm. No text overlay. */
.arada-bg-section{position:relative;overflow:hidden;height:100vh;scroll-snap-align:start;}
.arada-bg-section img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}

/* Flavour cards — bottle photo flush against the coloured card (no separate
   inset frame around the photo), name + description below within the same
   coloured box. No motion. */
.arada-flavours-section{padding:56px 0 !important;}
.arada-flavours-section h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-bottom:0;}
.flavour-cards{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;
  margin-top:28px;width:100%;
}
.flavour-card{
  border-radius:28px;overflow:hidden;
  box-shadow:0 20px 50px rgba(19,39,37,.15);
  display:flex;flex-direction:column;
}
.flavour-card-media{
  height:42vh;min-height:260px;
}
.flavour-card-media img{
  width:100%;height:100%;object-fit:contain;object-position:center;display:block;
}
.flavour-card-body{padding:20px 22px 26px;background:transparent;}
.flavour-card-body h3{font-family:var(--display);font-weight:700;font-size:1.35rem;color:#fff;margin:0 0 .3em;}
.flavour-card-body p{color:rgba(255,255,255,.92);font-size:.98rem;margin:0;}
@media(max-width:900px){
  .flavour-cards{grid-template-columns:1fr;gap:18px;}
  .flavour-card-media{height:34vh;}
}

/* Bold CTA band, Arada-flavoured — teal, not black */

.arada-cta{
  background-size:cover;background-position:center;
  color:#fff;text-align:left;padding:64px 0 56px;position:relative;overflow:hidden;
  min-height:100vh;display:flex;align-items:flex-end;
  scroll-snap-align:start;
}
.arada-cta::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(0deg, rgba(19,39,37,.68) 0%, rgba(19,39,37,.4) 40%, rgba(19,39,37,.12) 75%, rgba(19,39,37,0) 100%);
}
.arada-cta::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:url('images/komari-pattern.png');
  background-repeat:repeat;background-size:340px auto;
  opacity:.16;filter:invert(1);
}
.arada-cta .wrap{position:relative;z-index:1;width:100%;}
.arada-cta .eyebrow{color:var(--a-yellow);}
.arada-cta .eyebrow::before{color:var(--a-amber);}
.arada-cta h2{color:#fff;font-size:clamp(2rem,4.4vw,3rem);max-width:16ch;}
.arada-cta p{color:rgba(255,255,255,.85);max-width:52ch;font-size:1.1rem;}
.arada-cta .btn-solid{background:var(--a-amber);border-color:var(--a-amber);color:var(--a-teal-deeper);}
.arada-cta .btn-solid:hover{background:var(--a-yellow);border-color:var(--a-yellow);}

/* Parent-company connector strip (keeps a visible thread back to Komari) */
.arada-komari-link{
  position:relative;overflow:hidden;
  background:var(--a-teal-deeper);color:rgba(255,255,255,.75);
  padding:28px 0;text-align:left;font-size:.85rem;
}
.arada-komari-link::before{
  content:"";position:absolute;inset:0;
  background-image:url('images/komari-pattern.png');
  background-repeat:repeat;background-size:260px auto;
  opacity:.12;pointer-events:none;
}
.arada-komari-link span{position:relative;z-index:1;}
.arada-komari-link a{color:var(--a-yellow);text-decoration:underline;position:relative;z-index:1;}

@media(max-width:700px){
  .arada-world section{padding:70px 0;}
  .arada-hero-row{flex-direction:column;align-items:flex-start;}
  .arada-hero .arada-logo-mark{height:110px;margin:0 0 20px;order:-1;}
}