/*
Theme Name: The Pod Lab Wholesale
Theme URI: https://thepodlab.com.au
Author: The Pod Lab
Description: One-page wholesale site for The Pod Lab. Hero with audience switcher, why us, who we supply, enquiry form and footer. Edit the recipient email and ABN under Appearance > Customize > Pod Lab settings.
Version: 1.0.2
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: podlab
*/

:root{
  --ink:#1D2626;
  --ink-2:#2A3535;
  --body:#3E4A4A;
  --ground:#F6F4EF;
  --line:#E2DED4;
  --field:#C9C4B8;
  --teal:#36ABA8;
  --teal-dark:#1F7F7C;
  --teal-deep:#155C5A;
  --teal-tint:#DCEFEE;
  --teal-soft:#6FCFCB;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --sans:'DM Sans',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--teal-dark)}a:hover{color:var(--teal-deep)}
input,select,textarea,button{font:inherit}
.wrap{max-width:1200px;margin:0 auto;padding-left:24px;padding-right:24px}
.eyebrow{margin:0;font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-dark)}
.h2{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(34px,4.4vw,56px);line-height:1.04;letter-spacing:-.02em}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:16px 28px;border-radius:999px;font-weight:700;text-decoration:none;background:var(--teal-dark);color:#fff;border:0;cursor:pointer;transition:transform .2s,background-color .2s}
.btn:hover{transform:translateY(-2px);background:var(--teal-deep);color:#fff}
.btn--sm{padding:12px 20px;font-weight:500}
.btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink);font-weight:500;padding:16px 24px;transition:background-color .2s,color .2s}
.btn--ghost:hover{background:var(--ink);color:var(--ground);transform:none}

/* Header */
.site-header{position:sticky;top:0;z-index:10;background:rgba(246,244,239,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:16px}
.site-logo{display:flex;align-items:center;min-height:44px}
.site-logo img{height:44px;width:auto}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:28px;font-size:15px;font-weight:500}
.site-nav a:not(.btn){color:var(--ink);text-decoration:none}
@media (max-width:640px){.site-nav a:not(.btn){display:none}}

/* Hero */
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:56px;align-items:center;padding-top:80px;padding-bottom:88px}
.hero__copy{display:flex;flex-direction:column;gap:24px}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{font-size:14px;font-weight:700;padding:10px 18px;min-height:44px;border-radius:999px;cursor:pointer;border:1.5px solid var(--ink);background:transparent;color:var(--ink);transition:background-color .25s,color .25s}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.hero h1{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(44px,6vw,78px);line-height:1;letter-spacing:-.025em}
.hero h1 .line{display:inline-block;color:var(--teal-dark)}
.hero__sub{margin:0;font-size:19px;line-height:1.6;color:var(--body);max-width:520px}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;padding-top:8px}
.hero__media{position:relative;aspect-ratio:4/5;max-height:580px;border-radius:32px;background:var(--ink);overflow:hidden}
.hero__media > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.badge{position:absolute;left:6%;bottom:6%;width:30%;aspect-ratio:1}
.badge svg{position:absolute;inset:0;width:100%;height:100%}
.badge img{position:absolute;left:31%;top:41%;width:38%;height:auto}

/* Marquee */
.marquee{background:var(--teal);color:var(--ink);overflow:hidden;border-block:2px solid var(--ink)}
.marquee__track{display:flex;width:max-content;padding:22px 0;font-family:var(--display);font-weight:700;font-size:24px;white-space:nowrap}
.marquee__track span{display:inline-flex;align-items:center;gap:28px;padding-right:28px}
.marquee__track img{height:18px;width:auto}

/* Why */
.why{display:flex;flex-direction:column;gap:48px;padding-top:104px;padding-bottom:104px}
.why__head{display:flex;flex-direction:column;gap:14px;max-width:640px}
.why__head > img{width:64px;height:auto}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.card{background:#fff;border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:14px}
.card__num{font-family:var(--display);font-weight:800;font-size:15px;color:var(--teal-dark)}
.card h3{margin:0;font-family:var(--display);font-size:24px;font-weight:700}
.card p{margin:0;font-size:16px;line-height:1.6;color:var(--body)}
.certs{display:flex;align-items:center;gap:16px;margin-top:auto;padding-top:8px}
.certs img:first-child{height:48px;width:auto}
.certs img:last-child{height:56px;width:auto}
.lift{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.lift:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(29,38,38,.10)}

/* Who */
.who{background:var(--ink);color:var(--ground)}
.who .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:56px;align-items:start;padding-top:104px;padding-bottom:104px}
.who__intro{display:flex;flex-direction:column;gap:18px}
.who__intro .eyebrow{color:var(--teal-soft)}
.who__intro p:last-child{margin:0;font-size:17px;line-height:1.6;color:#C9D2D2;max-width:460px}
.who__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.who__list li{background:var(--ground);color:var(--ink);border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:10px}
.who__icon{width:44px;height:44px;border-radius:12px;background:var(--teal-tint);display:inline-flex;align-items:center;justify-content:center}
.who__list strong{font-family:var(--display);font-weight:700;font-size:20px}
.who__list span:last-child{font-size:15px;line-height:1.5;color:var(--body)}

/* Enquire */
.enquire{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:56px;align-items:start;padding-top:104px;padding-bottom:104px}
.enquire__intro{display:flex;flex-direction:column;gap:18px}
.enquire__intro p:last-child{margin:0;font-size:17px;line-height:1.6;color:var(--body)}
.panel{background:#fff;border-radius:28px;padding:32px;box-shadow:0 20px 50px rgba(29,38,38,.06)}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500}
.form .full{grid-column:1/-1}
.form input,.form select,.form textarea{border:1.5px solid var(--field);border-radius:12px;padding:12px 14px;min-height:44px;background:#fff;color:var(--ink);width:100%}
.form textarea{resize:vertical;min-height:120px}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--teal-dark);box-shadow:0 0 0 4px rgba(54,171,168,.18)}
.form .btn{grid-column:1/-1;justify-content:center;min-height:48px;font-size:16px}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:24px 0}
.notice__tick{width:56px;height:56px;border-radius:50%;background:var(--teal-tint);display:inline-flex;align-items:center;justify-content:center}
.notice h3{margin:0;font-family:var(--display);font-weight:800;font-size:28px}
.notice p{margin:0;font-size:16px;line-height:1.6;color:var(--body)}
.notice a{font-weight:700;padding:12px 0}
.error{grid-column:1/-1;margin:0;padding:12px 16px;border-radius:12px;background:#FBE9E4;color:#8A2E17;font-size:15px}

/* Footer */
.site-footer{background:var(--ink);color:#C9D2D2;overflow:hidden}
.site-footer .wrap.top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;padding-top:56px;padding-bottom:24px;font-size:14px;line-height:1.6}
.site-footer a{color:#9FDCD9}
.foot-brand{display:flex;flex-direction:column;gap:12px}
.foot-brand img{height:48px;width:auto}
.foot-meta{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.foot-links{display:flex;gap:18px}
.foot-meta small{max-width:420px;font-size:12px;color:#A9B4B4}
.foot-word{font-family:var(--display);font-weight:800;font-size:clamp(64px,15vw,220px);line-height:.8;letter-spacing:-.04em;color:var(--ink-2);white-space:nowrap;transform:translateY(14%)}

/* Motion */
@keyframes pl-spin{to{transform:rotate(360deg)}}
@keyframes pl-marquee{to{transform:translateX(-50%)}}
@keyframes pl-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes pl-swap{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pl-wiggle{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(-8deg)}88%{transform:rotate(7deg)}92%{transform:rotate(-4deg)}96%{transform:rotate(2deg)}}
@keyframes pl-zoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.spin{animation:pl-spin 22s linear infinite}
.marquee__track{animation:pl-marquee 28s linear infinite}
.rise{animation:pl-rise .9s cubic-bezier(.2,.7,.2,1) both}
.rise--late{animation-delay:.15s}
.swap{animation:pl-swap .5s cubic-bezier(.2,.7,.2,1) both}
.wiggle{animation:pl-wiggle 4s ease-in-out infinite;transform-origin:50% 60%}
.zoom{animation:pl-zoom 2.4s cubic-bezier(.2,.7,.2,1) both}
@supports (animation-timeline: view()){
  .reveal{animation:pl-rise linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .spin,.marquee__track,.rise,.swap,.wiggle,.zoom,.reveal{animation:none!important}
  .lift,.btn{transition:none}
}

/* Card numbers v2: oversized numeral behind the corner, icon in a tile */
.card{position:relative;overflow:hidden;padding-top:36px}
.card > *{position:relative;z-index:1}
.card .card__num{position:absolute;z-index:0;top:-22px;right:14px;font-family:var(--display);font-weight:800;font-size:132px;line-height:1;letter-spacing:-.05em;color:var(--teal-tint);pointer-events:none;user-select:none;transition:color .35s,transform .35s cubic-bezier(.2,.7,.2,1)}
.card:hover .card__num{color:#C3E6E4;transform:translateY(4px)}
.card > svg:first-of-type{width:56px;height:56px;padding:12px;border-radius:16px;background:var(--teal-tint);box-sizing:border-box;margin-bottom:6px}
@media (max-width:640px){.card .card__num{font-size:104px;top:-16px}}
@media (prefers-reduced-motion: reduce){.card .card__num{transition:none}}