/* ============ Goli Soda Australia ============
   Light cream theme. Accent colours are taken from the brand logo
   (orange + green) and darkened where they carry text, so everything
   clears WCAG AA against the cream background.
   Type: Bebas Neue (display) / Cormorant Garamond (accent serif) / Outfit (body)
================================================ */

:root{
  --cream:#f8f3e9;      /* page base */
  --cream-2:#f1e9da;    /* alternate band */
  --cream-3:#e8dfcc;    /* deepest band (footer) */
  --white:#fff;

  --ink:#241f18;        /* headings */
  --body:#4b4237;       /* body copy */
  --muted:#6e6354;      /* secondary labels */

  --orange:#e08a2c;     /* decorative fills only */
  --orange-deep:#a34d09;/* accent text + primary buttons (AA on cream) */
  --orange-dark:#843d06; /* hover */
  --green:#3f7a47;
  --green-dark:#33633a;

  --line:rgba(36,31,24,.12);
  --radius:10px;
  --shadow:0 18px 40px -22px rgba(70,50,20,.35);
  --shadow-soft:0 10px 26px -18px rgba(70,50,20,.30);
  --wrap:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
}

body{
  font-family:'Outfit',system-ui,sans-serif;
  font-weight:300;
  color:var(--body);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--orange-deep);outline-offset:3px;border-radius:2px}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- shared ---------- */
.eyebrow{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;font-weight:600;
  letter-spacing:.35em;text-transform:uppercase;
  font-size:.85rem;color:var(--orange-deep);
}
.eyebrow.center{text-align:center}

.section-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2.4rem,5.5vw,3.6rem);
  letter-spacing:.06em;color:var(--ink);
  text-align:center;line-height:1.05;
}
.section-title.left{text-align:left}
.section-title.light{color:var(--ink)}

.gold-rule{display:flex;align-items:center;justify-content:center;gap:.8rem;margin:.9rem 0 0;color:var(--orange)}
.gold-rule::before,.gold-rule::after{content:"";height:1px;width:64px;background:linear-gradient(90deg,transparent,var(--orange));}
.gold-rule::after{background:linear-gradient(90deg,var(--orange),transparent)}
.gold-rule span{font-size:.7rem;letter-spacing:.3em}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:'Outfit',sans-serif;font-weight:500;
  font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.95rem 2rem;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--orange-deep);color:#fff8ee}
.btn-gold:hover{background:var(--orange-dark)}
.btn-line{border-color:rgba(36,31,24,.35);color:var(--ink)}
.btn-line:hover{border-color:var(--orange-deep);color:var(--orange-deep)}
.btn-dark{background:var(--ink);color:var(--cream)}
.btn-dark:hover{background:#3a3227}
.btn-green{background:var(--green);color:#f2f7f2}
.btn-green:hover{background:var(--green-dark)}
.btn-sm{padding:.7rem 1.4rem;font-size:.72rem}
.btn-full{width:100%}
.btn-view{
  border:1px solid rgba(36,31,24,.3);color:var(--ink);
  padding:.5rem 1.6rem;font-size:.7rem;
}
.btn-view:hover{background:var(--ink);color:var(--cream)}

/* reveal on scroll — hidden state only when JS is running (html.js) */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.js .reveal{opacity:1;transform:none}}

/* ---------- topbar ---------- */
.topbar{
  background:var(--orange-deep);color:#fdf3e6;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  text-align:center;padding:.55rem 1rem;
}
.topbar .sep{margin:0 .9rem;color:#fdf3e6;opacity:.5}
@media (max-width:720px){.topbar span:nth-child(n+4){display:none}}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(248,243,233,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  max-width:var(--wrap);margin:0 auto;
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:1rem;padding:.8rem 1.5rem;
}
.nav-left{display:flex;gap:2rem;justify-content:flex-end}
.nav-right{display:flex;gap:2rem;justify-content:flex-start}
.nav-link{
  color:var(--body);font-size:.78rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;
  padding:.4rem 0;position:relative;
}
.nav-link::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--orange-deep);transition:width .3s ease;
}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-link:hover,.nav-link.active{color:var(--orange-deep)}

.brand{display:flex;flex-direction:column;align-items:center;line-height:1;padding:0 1.5rem}
.brand-dots{display:flex;gap:4px;margin-bottom:4px}
.brand-dots i{width:4px;height:4px;border-radius:50%;background:var(--orange)}
.brand-dots i:nth-child(2){width:6px;height:6px;margin-top:-2px}
.brand-name{
  font-family:'Bebas Neue',sans-serif;font-size:1.7rem;
  letter-spacing:.12em;color:var(--ink);
}
.brand-sub{
  font-size:.6rem;letter-spacing:.52em;color:var(--orange-deep);
  text-transform:uppercase;margin-top:2px;text-indent:.52em;
}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.5rem;grid-column:3;justify-self:end}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;transition:transform .3s ease,opacity .3s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{display:none;flex-direction:column;background:var(--cream-2);border-top:1px solid var(--line)}
.mobile-menu a{
  color:var(--ink);padding:1rem 1.5rem;font-size:.85rem;
  letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid var(--line);
}
.mobile-menu.open{display:flex}

@media (max-width:960px){
  .nav{grid-template-columns:auto 1fr}
  .brand{grid-column:1;grid-row:1;padding:0;align-items:flex-start}
  .nav-left,.nav-right{display:none}
  .nav-toggle{display:block;grid-column:2;grid-row:1}
}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 78% 22%,rgba(224,138,44,.16),transparent 62%),
    radial-gradient(ellipse 60% 50% at 12% 88%,rgba(63,122,71,.09),transparent 66%),
    linear-gradient(165deg,#fdfaf3 0%,var(--cream) 55%,#f0e7d6 100%);
}
.hero-inner{
  max-width:var(--wrap);margin:0 auto;
  display:grid;grid-template-columns:1.15fr .85fr;
  align-items:center;gap:2rem;
  padding:5rem 1.5rem 6rem;min-height:72vh;
}
.hero-copy .eyebrow{margin-bottom:1.4rem}
.hero h1{display:flex;flex-direction:column}
.hero-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(4rem,10vw,7.5rem);
  line-height:.9;color:var(--ink);letter-spacing:.02em;
}
.hero-sub{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(1.8rem,4.5vw,3.2rem);
  letter-spacing:.42em;color:var(--orange-deep);margin-top:.4rem;text-indent:.42em;
}
.hero-tag{
  color:var(--body);max-width:34rem;
  font-size:1.05rem;margin:1.6rem 0 2.4rem;
}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap}

.hero-visual{position:relative;display:flex;justify-content:center}
.hero-art{
  position:relative;
  width:clamp(120px,14vw,170px);
  max-width:170px;
  flex:0 0 auto;
}
.hero-art::before{
  /* soft contact shadow so the bottle sits on the surface */
  content:"";position:absolute;left:-32%;right:-32%;bottom:-5%;height:14%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(90,62,22,.26),transparent 72%);
  filter:blur(7px);
  pointer-events:none;
}
.hero-art img{
  position:relative;width:100%;height:auto;display:block;
  filter:drop-shadow(0 16px 20px rgba(80,55,20,.25)) saturate(1.04);
}
.heritage-badge{
  position:absolute;right:-4%;bottom:6%;width:130px;
  transform:rotate(-12deg);
}


@media (max-width:860px){
  /* Keep the desktop side-by-side composition on phones, just scaled down,
     so the whole hero still reads in one screen. */
  .hero-inner{
    grid-template-columns:1.08fr .92fr;
    gap:.9rem;
    padding:2.2rem 1.1rem 2.8rem;
    min-height:auto;
  }
  .hero-copy .eyebrow{font-size:.6rem;letter-spacing:.24em;margin-bottom:.7rem}
  .hero-title{font-size:clamp(1.9rem,10vw,3.2rem)}
  .hero-sub{font-size:clamp(.8rem,3.4vw,1.4rem);letter-spacing:.3em;text-indent:.3em}
  .hero-tag{font-size:.82rem;margin:.9rem 0 1.3rem}
  .hero-ctas{gap:.55rem}
  .hero-ctas .btn{padding:.7rem 1.05rem;font-size:.62rem;letter-spacing:.1em}
  .hero-art{width:min(112px,26vw)}
  .heritage-badge{width:50px;right:-2%;bottom:-4%}
}
/* Narrow phones: one claim in the top bar instead of a wrapped pair */
@media (max-width:560px){
  .topbar p{font-size:.68rem}
  .topbar span:nth-child(n+2){display:none}
}

/* ---------- trust strip ---------- */
.trust{
  background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,1fr);
  max-width:100%;padding:1.6rem clamp(1.5rem,6vw,6rem);gap:1.5rem;
}
.trust-item{display:flex;align-items:center;gap:1rem;justify-content:center}
.trust-item svg{width:34px;height:34px;color:var(--orange-deep);flex-shrink:0}
.trust-item h3{
  font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);font-weight:600;
}
.trust-item p{font-size:.8rem;color:var(--muted)}
@media (max-width:720px){.trust{grid-template-columns:1fr;gap:1.2rem;padding-block:1.4rem}.trust-item{justify-content:flex-start}}

/* ---------- flavours ---------- */
.flavours{background:var(--cream);padding:5rem 1.5rem 5.5rem}
.flavour-grid{
  max-width:var(--wrap);margin:3.2rem auto 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.6rem;
}
.flavour-card{
  text-align:center;padding:1.6rem 1rem 1.8rem;border-radius:var(--radius);
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  transition:transform .3s ease,box-shadow .3s ease;
}
.flavour-card:hover{transform:translateY(-6px);box-shadow:0 24px 44px -20px rgba(70,50,20,.4)}
.flavour-img{
  height:300px;margin:0 auto 1.1rem;border-radius:8px;overflow:hidden;
  border-bottom:3px solid var(--fl);
  background:#fdfcfa;
}
.flavour-img img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .35s ease}
.flavour-card:hover .flavour-img img{transform:scale(1.05)}
.flavour-card h3{
  font-family:'Outfit',sans-serif;font-weight:600;
  font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);margin-bottom:.4rem;
}
.flavour-tag{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:.95rem;color:var(--muted);margin-bottom:1rem;
  padding:0 .5rem;
}

/* ---------- tiles ---------- */
.tiles{
  background:var(--cream);
  max-width:var(--wrap);margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.4rem;padding:0 1.5rem 5rem;
}
.tile{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:var(--white);min-height:340px;display:flex;flex-direction:column;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  transition:transform .3s ease,box-shadow .3s ease;
}
.tile:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.tile-media{
  flex:1;background-size:cover;background-position:center;
  min-height:190px;
  transition:opacity .3s ease;
}
.tile:hover .tile-media{opacity:.92}
.tile-body{
  padding:1.4rem 1.5rem 1.6rem;text-align:center;
  background:var(--white);
}
.tile-body h3{
  font-family:'Bebas Neue',sans-serif;font-size:1.5rem;
  letter-spacing:.08em;color:var(--ink);
}
.tile-body p{font-size:.82rem;color:var(--muted);margin:.3rem 0 1rem}

/* ---------- about ---------- */
.about{
  background:var(--cream-2);
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(2rem,5vw,4.5rem);
  padding:5rem clamp(1.5rem,6vw,6rem);
}
.about-media img{border-radius:var(--radius);box-shadow:var(--shadow);height:auto}
.about-copy .eyebrow{margin-bottom:.8rem}
.about-copy .section-title{margin-bottom:1.2rem}
.about-copy p{max-width:32rem;margin-bottom:1rem}
.about-copy .btn{margin-top:1rem}
@media (max-width:860px){.about{grid-template-columns:1fr}}

/* ---------- stats ---------- */
.stats{
  background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1.5rem;padding:2.6rem clamp(1.5rem,6vw,6rem);text-align:center;
}
.stat-num{
  display:block;font-family:'Bebas Neue',sans-serif;
  font-size:1.9rem;color:var(--orange-deep);letter-spacing:.05em;
}
.stat-label{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@media (max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- contact ---------- */
.contact{
  background:
    radial-gradient(ellipse 70% 60% at 88% 8%,rgba(224,138,44,.12),transparent 58%),
    var(--cream-2);
  padding:5.5rem 1.5rem;
}
.contact-inner{
  max-width:var(--wrap);margin:0 auto;
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);
}
.contact-copy{color:var(--body)}
.contact-copy .eyebrow{margin-bottom:.8rem}
.contact-copy .section-title{margin-bottom:1.2rem}
.contact-copy p{max-width:26rem}
.contact-list{list-style:none;margin-top:2rem}
.contact-list li{
  padding:.9rem 0;border-bottom:1px solid var(--line);
  font-size:.92rem;display:flex;gap:1rem;
}
.contact-list a{color:var(--orange-deep)}
.contact-list a:hover{text-decoration:underline}
.contact-list strong{
  color:var(--ink);font-weight:600;min-width:90px;
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  padding-top:.15rem;
}

.contact-form{
  background:var(--white);border-radius:var(--radius);
  border:1px solid var(--line);
  padding:clamp(1.5rem,3vw,2.5rem);box-shadow:var(--shadow);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:640px){.form-row{grid-template-columns:1fr}.contact-inner{grid-template-columns:1fr}}
@media (max-width:960px){.contact-inner{grid-template-columns:1fr}}
.field{margin-bottom:1.1rem;min-width:0}
.field label{
  display:block;font-size:.72rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--body);
  margin-bottom:.4rem;
}
.field .opt{color:var(--muted);text-transform:none;letter-spacing:0}
.field input,.field select,.field textarea{
  width:100%;padding:.8rem .95rem;
  font-family:'Outfit',sans-serif;font-size:.95rem;color:var(--ink);
  background:var(--cream);border:1px solid rgba(36,31,24,.18);border-radius:6px;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--orange-deep);outline:none;background:#fff;
  box-shadow:0 0 0 3px rgba(180,86,13,.15);
}
.field textarea{resize:vertical}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-status{display:none;padding:.9rem 1rem;border-radius:6px;margin-bottom:1.1rem;font-size:.9rem}
.form-status.ok{display:block;background:#e7f2e9;color:#2c5038;border:1px solid #9fc4aa}
.form-status.err{display:block;background:#f7e8e6;color:#8a3126;border:1px solid #d9a49c}

/* ---------- footer ---------- */
.footer{background:var(--cream-3);color:var(--body);padding:4rem 1.5rem 0;border-top:1px solid var(--line)}
.footer-grid{
  max-width:var(--wrap);margin:0 auto;
  display:grid;grid-template-columns:1.4fr 1fr 1.2fr;
  gap:2.5rem;padding-bottom:3rem;
}
.footer-logo{
  width:170px;height:auto;border-radius:6px;
  background:#fff;padding:.45rem .7rem;display:block;
  border:1px solid var(--line);
}
.footer-brand .brand-sub{display:block;margin:.5rem 0 1rem}
.footer-brand p{font-size:.85rem;max-width:22rem}
.footer-col h4{
  color:var(--ink);font-weight:600;font-size:.78rem;
  letter-spacing:.22em;text-transform:uppercase;margin-bottom:1.1rem;
}
.footer-col a{display:block;font-size:.85rem;padding:.28rem 0;transition:color .2s ease}
.footer-col a:hover{color:var(--orange-deep)}
.footer-note{font-size:.85rem;margin-bottom:1rem}
.newsletter{display:flex;border:1px solid rgba(36,31,24,.25);border-radius:999px;overflow:hidden;background:var(--white)}
.newsletter input{
  flex:1;min-width:0;background:transparent;border:0;color:var(--ink);
  padding:.75rem 1.1rem;font-family:'Outfit',sans-serif;font-size:.88rem;
}
.newsletter input::placeholder{color:var(--muted)}
.newsletter input:focus{outline:none}
.newsletter:focus-within{border-color:var(--orange-deep)}
.newsletter button{
  background:var(--orange-deep);border:0;color:#fff8ee;
  padding:0 1.2rem;font-size:1.1rem;cursor:pointer;
  transition:background .2s ease;
}
.newsletter button:hover{background:var(--orange-dark)}
.footer-bottom{
  border-top:1px solid var(--line);
  max-width:var(--wrap);margin:0 auto;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.4rem 0 1.6rem;font-size:.78rem;color:var(--body);
}
@media (max-width:960px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}