/* ===== Base reset (the Tailwind "preflight" your Lovable CSS was written on top of).
   Zero specificity via :where() so every theme rule below still wins. ===== */
:where(body.sf-site) *,:where(body.sf-site) *::before,:where(body.sf-site) *::after{box-sizing:border-box;margin:0;padding:0;border:0 solid}
:where(html){line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}
:where(body.sf-site){line-height:inherit}
:where(body.sf-site) :is(h1,h2,h3,h4,h5,h6){font-size:inherit;font-weight:inherit}
:where(body.sf-site) a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit;background:transparent}
:where(body.sf-site) :is(b,strong){font-weight:bolder}
:where(body.sf-site) :is(img,svg,video,canvas,audio,iframe,embed,object){display:block;vertical-align:middle}
:where(body.sf-site) :is(img,video){max-width:100%;height:auto}
:where(body.sf-site) :is(button,input,select,optgroup,textarea){font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}
:where(body.sf-site) :is(ol,ul,menu){list-style:none}
:where(body.sf-site) button,:where(body.sf-site) :is([type=button],[type=reset],[type=submit]){-webkit-appearance:button;appearance:button;cursor:pointer}
:where(body.sf-site) textarea{resize:vertical}
:where(body.sf-site) table{border-collapse:collapse;text-indent:0;border-color:inherit}
:where(body.sf-site) ::placeholder{opacity:1;color:color-mix(in oklab,currentColor 50%,transparent)}
:where(body.sf-site) [hidden]:where(:not([hidden=until-found])){display:none!important}
:root {
  --radius: .25rem;
  --background: oklch(0.978 0.008 105);
  --foreground: oklch(0.225 0.03 145);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.225 0.03 145);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.225 0.03 145);
  --primary: oklch(0.59 0.165 141);
  --primary-foreground: oklch(1 0 0);
  --deep-green: oklch(0.41 0.122 148);
  --secondary: oklch(0.95 0.026 121);
  --secondary-foreground: oklch(0.36 0.095 145);
  --muted: oklch(0.95 0.012 105);
  --muted-foreground: oklch(0.49 0.022 145);
  --accent: oklch(0.88 0.175 96);
  --accent-foreground: oklch(0.25 0.03 145);
  --sun: oklch(0.88 0.185 96);
  --sun-foreground: oklch(0.25 0.03 145);
  --warm-yellow: oklch(0.82 0.17 91);
  --light-green: oklch(0.95 0.037 128);
  --destructive: oklch(0.58 0.22 27);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.87 0.022 115);
  --input: oklch(0.87 0.022 115);
  --ring: oklch(0.59 0.165 141);
  --store-green: oklch(0.48 0.11 151);
  --store-yellow: oklch(0.84 0.17 91);
  --store-cream: oklch(0.94 0.03 86);
}
@media all {
* { border-color: var(--border); }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); letter-spacing: 0; overflow-x: hidden; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--sun); color: var(--sun-foreground); }
}
.site-container { width: min(100% - 40px, 1240px); margin-inline: auto; }
.section { padding: 120px 0; }
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; height: 104px; background: var(--card); transition: height .35s ease, box-shadow .35s ease; }
.site-header-scrolled { height: 82px; box-shadow: 0 8px 30px color-mix(in oklab, var(--deep-green) 10%, transparent); }
.brand-stripe { height: 4px; background: linear-gradient(90deg, var(--primary) 0 62%, var(--sun) 62%); }
.header-inner { height: calc(100% - 4px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; }
.header-nav { display: flex; align-items: center; gap: 34px; }
.header-nav-right { justify-content: flex-end; }
.nav-link { position: relative; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 2px; background: var(--sun); transition: right .3s ease; }
.nav-link:hover::after, .nav-link-active::after { right: 0; }
.brand-logo { display: block; width: 142px; height: 72px; overflow: hidden; }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.brand-logo-inverse img { background: var(--card); border-radius: 2px; padding: 5px; mix-blend-mode: normal; }
.mobile-menu-button, .mobile-menu { display: none; }
.hero { position: relative; min-height: 760px; height: 92vh; max-height: 940px; display: flex; align-items: center; overflow: hidden; color: var(--primary-foreground); margin-top: 104px; }
.hero h1 { max-width: 760px; font: 400 clamp(56px, 6.2vw, 96px)/.96 var(--font-display); margin: 28px 0; letter-spacing: 0; animation: rise .8s .2s both; }
.hero h1 em { color: var(--sun); font-weight: 400; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; animation: rise .8s .4s both; }
.button-row svg { transition: transform .3s ease; }
.button-row a:hover svg { transform: translateX(5px); }
.eyebrow { display: block; color: var(--primary); text-transform: uppercase; font-size: 11px; line-height: 1.4; font-weight: 700; letter-spacing: .18em; margin-bottom: 20px; }
.eyebrow-light { color: var(--sun); }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal-visible { opacity: 1; transform: translateY(0); }
.showcases > .site-container > .section-heading { margin-bottom: 90px; }
.formats { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 34px; }
.formats span { min-width: 61px; padding: 10px 12px; background: var(--card); border: 1px solid var(--border); text-align: center; font-size: 11px; font-weight: 600; }
.enquiry-section { position: relative; min-height: 520px; display: flex; align-items: center; overflow: hidden; background: var(--deep-green); color: var(--primary-foreground); }
.enquiry-image { position: absolute; right: 0; inset-block: 0; width: 48%; }
.enquiry-image::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg,var(--deep-green),transparent 65%); }
.enquiry-image img { width: 100%; height: 100%; object-fit: cover; }
.enquiry-content { position: relative; z-index: 2; }
.enquiry-content h2 { max-width: 700px; font: 400 clamp(46px,5.5vw,76px)/1.02 var(--font-display); }
.enquiry-content p { max-width: 580px; margin-top: 24px; line-height: 1.8; color: color-mix(in oklab, var(--primary-foreground) 75%, transparent); }
.site-footer { position: relative; background: var(--sf-footer-bg); color: var(--primary-foreground); padding: 76px 0 24px; overflow: hidden; }
.footer-grid, .footer-bottom { position: relative; }
.footer-grid { display: grid; grid-template-columns: 1.6fr .7fr .7fr 1fr; gap: 60px; }
.footer-brand p { max-width: 340px; color: color-mix(in oklab, var(--primary-foreground) 68%, transparent); font-size: 13px; line-height: 1.8; margin: 24px 0; }
.socials { display: flex; gap: 10px; }
.socials a, .socials span { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid color-mix(in oklab, var(--primary-foreground) 20%, transparent); transition: background .3s, color .3s; }
.socials a:hover { background: var(--sun); color: var(--sun-foreground); }
.socials svg { width: 16px; }
.footer-grid > div:not(:first-child) { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-grid h3 { color: var(--sun); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; margin: 8px 0 12px; }
.footer-grid a, .footer-grid span { font-size: 12px; color: color-mix(in oklab, var(--primary-foreground) 68%, transparent); transition: color .2s; }
.footer-grid a:hover { color: var(--sun); }
.footer-bottom { display: flex; justify-content: space-between; border-top: 1px solid color-mix(in oklab, var(--primary-foreground) 14%, transparent); margin-top: 60px; padding-top: 24px; font-size: 10px; color: color-mix(in oklab, var(--primary-foreground) 50%, transparent); }
.storefront-home .site-header { top: 30px; height: 88px; }
.storefront-home .site-header-scrolled { height: 72px; }
.storefront-home .brand-stripe { display: none; }
.storefront-home .header-inner { height: 100%; }
.storefront-home .brand-logo { width: 126px; height: 66px; }
.storefront-home .nav-link { font-family: var(--font-sans); font-size: 12px; text-transform: none; letter-spacing: 0; }
.store-product-info .formats { margin: 22px 0; }
.store-product-info .formats span { border-radius: 4px; background: var(--store-cream); }
.store-bulk-inner > .reveal { position: relative; z-index: 2; width: 58%; padding: 66px 0; }
.store-bulk-inner > .reveal > span { display: flex; align-items: center; gap: 9px; color: var(--store-yellow); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.catalogue-shell { font-family: var(--font-sans); background: var(--card); }
.catalogue-shell h1, .catalogue-shell h2, .catalogue-shell h3 { font-family: var(--font-display); }
.contact-details > span, .contact-form-wrap > span { color: var(--sun); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.contact-details > span, .contact-form-wrap > span { color: var(--primary); }
.contact-main { padding: 110px 0 120px; }
.contact-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 90px; }
.contact-details h2, .contact-form-wrap h2 { margin: 10px 0 18px; font-size: 40px; line-height: 1.1; font-weight: 600; }
.contact-details > p { color: var(--muted-foreground); line-height: 1.7; }
.contact-list { margin-top: 40px; border-top: 1px solid var(--border); }
.contact-list > div { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--border); }
.contact-list svg { width: 20px; color: var(--primary); }
.contact-list span { color: var(--muted-foreground); font-size: 13px; }
.contact-list strong { display: block; margin-bottom: 4px; color: var(--foreground); font-size: 12px; text-transform: uppercase; }
.contact-social { margin-top: 38px; }
.contact-social h3 { font-size: 15px; }
.contact-social > div { display: flex; gap: 8px; margin: 14px 0 8px; }
.contact-social > div span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--border); color: var(--primary); }
.contact-social svg { width: 17px; }
.contact-social p { color: var(--muted-foreground); font-size: 11px; }
.contact-form-wrap { padding: 42px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); }
.contact-form { margin-top: 30px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: block; margin-bottom: 20px; }
.field > span { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--input); border-radius: 4px; background: var(--card); color: var(--foreground); font: 400 14px var(--font-sans); outline: none; transition: border-color .2s,box-shadow .2s; }
.field input, .field select { height: 48px; padding: 0 13px; }
.field textarea { resize: vertical; min-height: 140px; padding: 13px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab,var(--primary) 15%,transparent); }
.field [aria-invalid="true"] { border-color: var(--destructive); }
.field small { display: block; margin-top: 6px; color: var(--destructive); font-size: 11px; }
.form-disclaimer { margin-top: 14px; color: var(--muted-foreground); font-size: 11px; line-height: 1.5; }
.form-success { display: flex; min-height: 330px; flex-direction: column; align-items: flex-start; justify-content: center; }
.form-success > svg { width: 42px; height: 42px; color: var(--primary); }
.form-success h3 { margin: 20px 0 10px; font-size: 30px; }
.form-success p { max-width: 520px; margin-bottom: 24px; color: var(--muted-foreground); line-height: 1.7; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 960px) {
.site-container { width: min(100% - 32px, 760px); }
.section { padding: 90px 0; }
.header-nav { display: none; }
.header-inner { grid-template-columns: minmax(0,1fr) auto; }
.brand-logo { width: 125px; height: 64px; }
.mobile-menu-button { display: inline-flex; justify-self: end; }
.mobile-menu { display: flex; position: fixed; inset: 82px 0 auto; flex-direction: column; gap: 4px; padding: 28px 22px 34px; background: var(--card); box-shadow: 0 20px 35px color-mix(in oklab, var(--deep-green) 12%, transparent); transform: translateY(-130%); opacity: 0; visibility: hidden; transition: .35s ease; }
.mobile-menu-open { transform: translateY(0); opacity: 1; visibility: visible; }
.mobile-link, .mobile-menu .nav-link { padding: 13px 0; font-size: 13px; border-bottom: 1px solid var(--border); }
.hero { margin-top: 104px; min-height: 700px; height: calc(100svh - 104px); }
.footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
.footer-grid > div:last-child { grid-column: 1/-1; }
.storefront-home .mobile-menu { inset-block-start: 102px; }
.storefront-home .site-header-scrolled .mobile-menu { inset-block-start: 102px; }
.contact-grid { gap: 48px; }
}
@media (max-width: 640px) {
.site-container { width: min(100% - 28px, 520px); }
.section { padding: 72px 0; }
.site-header, .site-header-scrolled { height: 78px; }
.brand-logo { width: 105px; height: 58px; }
.mobile-menu { inset-block-start: 78px; }
.hero { margin-top: 78px; min-height: 650px; height: calc(100svh - 78px); align-items: flex-end; padding-bottom: 66px; }
.hero h1 { font-size: 48px; line-height: .98; margin: 22px 0; }
.button-row { align-items: stretch; flex-direction: column; }
.button-row > * { width: 100%; }
.showcases > .site-container > .section-heading { margin-bottom: 54px; }
.enquiry-section { min-height: 610px; align-items: flex-end; padding-bottom: 60px; }
.enquiry-image { width: 100%; height: 52%; inset: 0 0 auto; opacity: .62; }
.enquiry-image::before { background: linear-gradient(0deg,var(--deep-green),transparent); }
.enquiry-content h2 { font-size: 44px; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 45px 28px; }
.footer-brand, .footer-grid > div:last-child { grid-column: 1/-1; }
.footer-bottom { flex-direction: column; gap: 8px; }
.storefront-home .site-header, .storefront-home .site-header-scrolled { top: 28px; height: 72px; }
.storefront-home .mobile-menu, .storefront-home .site-header-scrolled .mobile-menu { inset-block-start: 100px; }
.storefront-home .brand-logo { width: 102px; height: 54px; }
.store-bulk-inner > .reveal { width: 100%; padding: 260px 0 58px; }
.contact-grid { grid-template-columns: 1fr; }
.contact-main { padding: 72px 0 80px; }
.contact-grid { gap: 52px; }
.contact-form-wrap { padding: 28px 20px; }
.form-row { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
.reveal { opacity: 1; transform: none; }
}
.info-heading { max-width: 640px; margin-bottom: 44px; }
.info-heading > span { color: var(--primary); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.info-heading h2 { margin: 12px 0 14px; font-size: clamp(32px,4vw,48px); line-height: 1.05; font-weight: 600; }
.info-heading p { color: var(--muted-foreground); line-height: 1.75; margin-bottom: 22px; }
.faq-list { display: grid; gap: 12px; min-width: 0; }
.faq-item { border: 1px solid var(--border); border-radius: 14px; background: var(--card); padding: 0 22px; }
.faq-item[open] { border-color: var(--primary); }
.faq-item summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 20px 0; cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { flex-shrink: 0; width: 20px; color: var(--primary); }
.faq-item summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
.faq-item p { padding-bottom: 20px; color: var(--muted-foreground); line-height: 1.7; }
:root { --ref-green: #3C9B3A; --ref-deep: #036701; --ref-yellow: #F8DC07; }
body { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; }
h1, h2, h3, h4 { font-family: var(--font-display) !important; letter-spacing: -0.02em; }
h1 em, h2 em { font-family: var(--font-accent); font-style: normal; color: var(--ref-yellow); }
main p { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; }
main h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.08; font-weight: 600; }
main h3 { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; font-weight: 600; }
.site-header, .storefront-home .site-header { position: fixed; top: 0; height: 128px; background: var(--card); }
.site-header-scrolled, .storefront-home .site-header-scrolled { height: 92px; box-shadow: 0 10px 30px -12px color-mix(in oklab, var(--ref-deep) 25%, transparent); }
.brand-stripe, .storefront-home .brand-stripe { display: block; height: 5px; background: linear-gradient(90deg, var(--ref-green) 0 65%, var(--ref-yellow) 65%); }
.header-inner, .storefront-home .header-inner { height: calc(100% - 5px); }
.header-nav { gap: 6px; }
.nav-link, .storefront-home .nav-link { font-family: var(--font-sans); font-size: 16px; font-weight: 500; text-transform: none; letter-spacing: 0; padding: 10px 18px; color: var(--foreground); transition: color .25s; }
.nav-link::after { left: 50%; right: 50%; bottom: 0; height: 2px; background: var(--ref-yellow); transition: left .3s ease, right .3s ease; }
.nav-link:hover { color: var(--ref-green); }
.nav-link:hover::after, .nav-link-active::after { left: 0; right: 0; }
.brand-logo, .storefront-home .brand-logo { width: 164px; height: 86px; transition: transform .35s ease, width .35s, height .35s; }
.site-header-scrolled .brand-logo { width: 130px; height: 68px; }
.brand-logo:hover { transform: rotate(-3deg) scale(1.04); }
.header-cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; margin-left: 18px; padding: 10px 24px; border-radius: 4px; background: var(--ref-green); color: var(--primary-foreground); font-size: 16px; font-weight: 500; text-transform: uppercase; transition: background .3s, transform .3s, box-shadow .3s; }
.header-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, color-mix(in oklab, var(--card) 45%, transparent) 50%, transparent 70%); transform: translateX(-100%); transition: transform .7s ease; }
.header-cta:hover { background: var(--ref-deep); transform: translateY(-2px); box-shadow: 0 10px 22px -10px var(--ref-deep); }
.header-cta:hover::before { transform: translateX(100%); }
.header-cta-block { justify-content: center; margin: 18px 0 0; padding: 14px; }
main { padding-top: 128px; }
.hero { margin-top: 0 !important; }
.site-footer { background: linear-gradient(180deg, oklch(0.96 0.004 250), oklch(0.9 0.006 250)); color: var(--foreground); padding: 64px 0 0; }
.footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; }
.footer-grid h3 { font-family: var(--font-display); color: var(--ref-green); font-size: 22px; font-weight: 600; letter-spacing: .02em; margin: 4px 0 14px; }
.footer-grid a, .footer-grid span { font-size: 16px; color: var(--foreground); }
.footer-grid > div:not(:first-child) a { position: relative; transition: color .25s, transform .25s; }
.footer-grid > div:not(:first-child) a:hover { color: var(--ref-green); transform: translateX(6px); }
.footer-brand p { color: var(--foreground); font-size: 16px; line-height: 1.55; max-width: 360px; }
.footer-brand .brand-logo { width: 160px; height: 90px; }
.socials span, .socials a { width: 36px; height: 36px; border: 0; border-radius: 3px; background: var(--ref-green); color: var(--ref-yellow); transition: transform .3s, background .3s; cursor: pointer; }
.socials span:hover, .socials a:hover { background: var(--ref-deep); transform: translateY(-4px); }
.footer-contact a, .footer-contact span { display: flex; align-items: center; gap: 14px; }
.footer-contact svg { width: 20px; color: var(--ref-green); flex: none; }
.footer-bottom { margin-top: 64px; padding: 14px 0; border: 0; background: var(--ref-green); color: var(--primary-foreground); font-size: 14px; }
.footer-bottom-inner { display: flex; justify-content: space-between; gap: 12px; }
.contact-list > a { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--border); transition: padding .3s, background .3s; }
.contact-list > a:hover { padding-left: 10px; background: color-mix(in oklab, var(--ref-green) 6%, transparent); }
.page-enter { animation: pageEnter .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes pageEnter { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; transform-origin: left; background: linear-gradient(90deg, var(--ref-green), var(--ref-yellow)); pointer-events: none; }
.back-to-top { position: fixed; right: 24px; bottom: 24px; z-index: 55; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ref-green); color: var(--primary-foreground); box-shadow: 0 12px 24px -10px var(--ref-deep); opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none; transition: .35s cubic-bezier(.2,.7,.2,1); }
.back-to-top-visible { opacity: 1; transform: none; pointer-events: auto; }
.back-to-top:hover { background: var(--ref-yellow); color: var(--ref-deep); transform: translateY(-4px); }
.reveal { transform: translateY(36px) scale(.985); transition: opacity .8s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.reveal-visible { transform: none; }
main img { transition: transform 1.1s cubic-bezier(.16,1,.3,1), filter .6s; }
main a:hover > img, main .reveal:hover > img, main div:hover > img:only-child { transform: scale(1.05); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 1180px) {
.nav-link, .storefront-home .nav-link { padding: 10px 10px; font-size: 15px; }
.header-cta { margin-left: 8px; padding: 9px 16px; font-size: 14px; }
}
@media (max-width: 960px) {
.site-header, .site-header-scrolled, .storefront-home .site-header, .storefront-home .site-header-scrolled { top: 0; height: 84px; }
.brand-logo, .site-header-scrolled .brand-logo, .storefront-home .brand-logo { width: 120px; height: 64px; }
.mobile-menu, .storefront-home .mobile-menu, .storefront-home .site-header-scrolled .mobile-menu { inset-block-start: 84px; }
.mobile-link { display: flex; justify-content: space-between; align-items: center; font-size: 17px; font-weight: 500; opacity: 0; transform: translateX(-16px); transition: opacity .35s, transform .35s, color .2s; }
.mobile-menu-open .mobile-link { opacity: 1; transform: none; }
.mobile-link:hover { color: var(--ref-green); }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.site-header, .site-header-scrolled, .storefront-home .site-header, .storefront-home .site-header-scrolled { height: 76px; }
.mobile-menu, .storefront-home .mobile-menu, .storefront-home .site-header-scrolled .mobile-menu { inset-block-start: 76px; }
.footer-grid { grid-template-columns: 1fr; gap: 36px; }
.footer-bottom-inner { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
.page-enter { animation: none; }
.reveal { transform: none; }
}
@media (max-width: 960px) {
main { padding-top: 84px; }
}
@media (max-width: 640px) {
main { padding-top: 76px; }
}
.nav-link, .header-cta { white-space: nowrap; }
@media (max-width: 1320px) {
.header-nav { gap: 0; }
.nav-link, .storefront-home .nav-link { padding: 10px 9px; font-size: 15px; }
.header-cta { margin-left: 6px; padding: 9px 14px; font-size: 14px; }
}
@media (max-width: 1100px) {
.nav-link, .storefront-home .nav-link { padding: 8px 6px; font-size: 14px; }
}
.brand-logo img, .brand-logo-inverse img { mix-blend-mode: normal; background: none; padding: 0; }
:root { --whatsapp: oklch(0.72 0.19 150); --whatsapp-foreground: oklch(1 0 0); }
.wa-button { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--whatsapp); color: var(--whatsapp-foreground); font-weight: 600; font-size: 15px; box-shadow: 0 10px 24px -12px var(--whatsapp); transition: transform .25s, box-shadow .25s, filter .25s; white-space: nowrap; }
.wa-button:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 30px -12px var(--whatsapp); }
.wa-button-block { width: 100%; justify-content: center; margin-top: 18px; }
.wa-float { position: fixed; right: 22px; bottom: 88px; z-index: 60; display: flex; align-items: center; gap: 0; height: 58px; padding: 0 15px; border-radius: 999px; background: var(--whatsapp); color: var(--whatsapp-foreground); box-shadow: 0 14px 30px -10px var(--whatsapp); overflow: hidden; transition: gap .3s, padding .3s; animation: wa-pulse 2.6s infinite; }
.wa-float span { max-width: 0; overflow: hidden; white-space: nowrap; font-weight: 600; transition: max-width .35s; }
.wa-float:hover { gap: 10px; padding-right: 22px; }
.wa-float:hover span { max-width: 140px; }
@keyframes wa-pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--whatsapp) 55%, transparent); } 60% { box-shadow: 0 0 0 16px transparent; } }
.side-rail { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 55; display: flex; flex-direction: column; background: var(--card); border-radius: 0 16px 16px 0; box-shadow: 0 12px 30px -14px color-mix(in oklab, var(--foreground) 35%, transparent); overflow: hidden; }
.side-rail > * { display: grid; place-items: center; width: 46px; height: 46px; color: var(--primary); cursor: pointer; transition: background .25s, color .25s, padding .25s; }
.side-rail > * svg { width: 19px; height: 19px; }
.side-rail > *:hover { background: var(--primary); color: var(--primary-foreground); padding-left: 8px; }
@media (max-width: 760px) {
.side-rail { display: none; }
.wa-float { right: 16px; bottom: 76px; height: 52px; }
}
.site-footer { border-radius: 40px 40px 0 0; margin-top: -40px; z-index: 2; box-shadow: 0 -18px 40px -24px color-mix(in oklab, var(--foreground) 35%, transparent); }
main { position: relative; z-index: 1; padding-bottom: 40px; }
@media (max-width: 640px) {
.site-footer { border-radius: 26px 26px 0 0; margin-top: -26px; }
}




.blog-hero { padding: 64px 0 40px; background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 10%, var(--background)), var(--background)); }
.blog-tag { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); background: color-mix(in oklab, var(--primary) 12%, transparent); padding: 7px 14px; border-radius: 999px; }
.blog-hero h1 { font-family: var(--font-display); font-size: clamp(40px, 6vw, 76px); line-height: 1.02; font-weight: 600; margin: 18px 0 16px; }
.blog-hero > .site-container > div > p { font-size: 19px; color: var(--muted-foreground); max-width: 560px; }
.blog-featured { margin-top: 44px; display: grid; grid-template-columns: 1.25fr 1fr; background: var(--card); border-radius: 30px; overflow: hidden; box-shadow: 0 30px 60px -36px color-mix(in oklab, var(--foreground) 40%, transparent); }
.blog-featured-image, .blog-card-image { display: block; overflow: hidden; position: relative; }
.blog-featured-image img, .blog-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.blog-featured:hover img, .blog-card:hover img { transform: scale(1.07); }
.blog-featured-image { min-height: 380px; }
.blog-featured-copy { padding: 44px; display: flex; flex-direction: column; gap: 16px; justify-content: center; align-items: flex-start; }
.blog-featured-copy h2 { font-family: var(--font-display); font-size: clamp(26px, 3vw, 38px); line-height: 1.12; font-weight: 600; }
.blog-featured-copy p, .blog-card-body p { color: var(--muted-foreground); }
.blog-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; color: var(--muted-foreground); }
.blog-meta span { display: inline-flex; align-items: center; gap: 6px; }
.blog-read { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--primary); }
.blog-read svg { transition: transform .25s; }
.blog-read:hover svg { transform: translateX(5px); }
.blog-list { padding: 40px 0 100px; }
.blog-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.blog-filter { padding: 10px 20px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--primary) 25%, transparent); font-weight: 500; transition: all .25s; }
.blog-filter:hover { border-color: var(--primary); }
.blog-filter-active { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.blog-card { background: var(--card); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; transition: transform .4s, box-shadow .4s; border: 1px solid color-mix(in oklab, var(--foreground) 7%, transparent); }
.blog-card:hover { transform: translateY(-8px); box-shadow: 0 28px 50px -30px color-mix(in oklab, var(--primary) 70%, transparent); }
.blog-card-image { aspect-ratio: 16/10; }
.blog-card-image span { position: absolute; left: 14px; top: 14px; background: var(--sun); color: var(--sun-foreground); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.blog-card-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.blog-card-body h3 { font-family: var(--font-display); font-size: 22px; line-height: 1.25; font-weight: 600; }
.blog-card-body h3 a:hover { color: var(--primary); }
.blog-card-body .blog-read { margin-top: auto; }
@media (max-width: 960px) {
.blog-grid { grid-template-columns: repeat(2, 1fr); }
.blog-featured { grid-template-columns: 1fr; }
.blog-featured-image { min-height: 260px; }
.blog-featured-copy { padding: 28px; }
}
@media (max-width: 620px) {
.blog-grid { grid-template-columns: 1fr; }
}
.post-hero { position: relative; min-height: 520px; display: flex; align-items: flex-end; overflow: hidden; }
.post-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: post-zoom 14s ease-out both; }
@keyframes post-zoom { from { transform: scale(1.15); } to { transform: scale(1); } }
.post-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, color-mix(in oklab, var(--foreground) 85%, transparent)); }
.post-hero-content { position: relative; padding-bottom: 56px; color: var(--primary-foreground); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.post-hero-content h1 { font-family: var(--font-display); font-size: clamp(34px, 5vw, 62px); line-height: 1.06; font-weight: 600; max-width: 900px; }
.post-hero-content .blog-meta { color: color-mix(in oklab, var(--primary-foreground) 85%, transparent); }
.post-hero-content .blog-tag { background: var(--sun); color: var(--sun-foreground); }
.post-back { display: inline-flex; gap: 8px; align-items: center; font-weight: 500; opacity: .9; }
.post-back:hover { opacity: 1; transform: translateX(-3px); }
.post-layout { display: grid; grid-template-columns: 80px minmax(0, 760px); gap: 48px; justify-content: center; padding: 64px 0 40px; }
.post-share { position: sticky; top: 160px; align-self: start; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.post-share > a, .post-share > span, .post-share > button { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--card); color: var(--primary); border: 1px solid color-mix(in oklab, var(--primary) 20%, transparent); transition: all .25s; cursor: pointer; }
.post-share > a:hover, .post-share > span:hover, .post-share > button:hover { background: var(--primary); color: var(--primary-foreground); transform: scale(1.08); }
.post-share small { font-size: 12px; color: var(--primary); }
.post-ring { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; padding: 4px; }
.post-ring span { width: 100%; height: 100%; border-radius: 50%; background: var(--background); display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.post-body { font-size: 19px; line-height: 1.75; }
.post-body h2 { font-family: var(--font-display); font-size: 30px; font-weight: 600; margin: 40px 0 12px; line-height: 1.2; }
.post-body p { margin-bottom: 18px; color: color-mix(in oklab, var(--foreground) 85%, transparent); }
.post-lead { font-size: 23px; line-height: 1.55; color: var(--foreground) !important; border-left: 4px solid var(--sun); padding-left: 22px; }
.post-tips { margin: 40px 0; padding: 30px; border-radius: 24px; background: color-mix(in oklab, var(--primary) 9%, var(--background)); }
.post-tips h3 { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin-bottom: 12px; }
.post-tips li { padding-left: 28px; position: relative; margin: 8px 0; }
.post-tips li::before { content: "✦"; position: absolute; left: 0; color: var(--primary); }
.post-cta { margin-top: 48px; padding: 32px; border-radius: 26px; background: var(--primary); color: var(--primary-foreground); display: flex; flex-direction: column; gap: 18px; }
.post-cta h3 { font-family: var(--font-display); font-size: 26px; font-weight: 600; }
.post-cta p { color: color-mix(in oklab, var(--primary-foreground) 85%, transparent) !important; margin: 0 !important; font-size: 17px; }
.post-cta-actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.post-cta .blog-read { color: var(--sun); }
.blog-related { background: color-mix(in oklab, var(--primary) 6%, var(--background)); padding-top: 72px; }
.blog-related .info-heading { margin-bottom: 30px; }
@media (max-width: 860px) {
.post-layout { grid-template-columns: 1fr; gap: 24px; padding-top: 40px; }
.post-share { position: static; flex-direction: row; order: 2; }
.post-hero { min-height: 420px; }
.post-body { font-size: 17px; }
}
.side-rail > * { width: 40px; height: 42px; }
.side-rail { opacity: .92; }
:root { --hh: 128px; }
@media (max-width: 960px) {
:root { --hh: 84px; }
}
@media (max-width: 640px) {
:root { --hh: 76px; }
}
.x-page { overflow-x: clip; }
.x-label { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); margin-bottom: 16px; }
.x-page h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 5vw, 64px); line-height: 1.04; letter-spacing: -.02em; }
.x-page em { font-style: normal; color: var(--sun); }
.split-word { display: inline-block; white-space: nowrap; }
.split-char { display: inline-block; opacity: 0; transform: translateY(70%) rotate(8deg); animation: char-up .8s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes char-up { to { opacity: 1; transform: none; } }
.tilt { position: relative; transform: perspective(1000px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); transition: transform .4s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; }
.tilt-glare { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), color-mix(in oklab, var(--card) 45%, transparent), transparent 55%); opacity: 0; transition: opacity .3s; }
.tilt:hover .tilt-glare { opacity: 1; }
.magnetic { display: inline-block; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.scroll-words { font-family: var(--font-display); font-size: clamp(28px, 4.2vw, 56px); line-height: 1.18; font-weight: 500; letter-spacing: -.015em; max-width: 1100px; }
.scroll-words span { transition: opacity .2s; }
.x-statement { padding: 120px 0; }
.x-hero { height: 220vh; position: relative; }
.x-hero-sticky { position: sticky; top: var(--hh); height: calc(100vh - var(--hh)); overflow: hidden; display: flex; align-items: center; background: var(--foreground); }
.x-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.x-hero-grain { position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 60%, color-mix(in oklab, var(--foreground) 70%, transparent), transparent 70%); }
.x-hero-content { position: relative; color: var(--primary-foreground); will-change: transform, opacity; }
.x-pill { display: inline-block; padding: 8px 16px; border-radius: 999px; background: color-mix(in oklab, var(--card) 15%, transparent); backdrop-filter: blur(8px); font-size: 14px; font-weight: 500; margin-bottom: 22px; border: 1px solid color-mix(in oklab, var(--card) 25%, transparent); }
.x-hero h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(46px, 8vw, 116px); line-height: .98; letter-spacing: -.03em; }
.x-hero-content > p { font-size: clamp(17px, 1.6vw, 20px); max-width: 520px; margin: 24px 0 32px; color: color-mix(in oklab, var(--primary-foreground) 85%, transparent); }
.x-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.x-scroll-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); color: var(--primary-foreground); display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; }
.x-scroll-cue svg { animation: cue 1.6s infinite; }
@keyframes cue { 50% { transform: translateY(8px); } }
.x-marquee { overflow: hidden; background: var(--primary); color: var(--primary-foreground); padding: 22px 0; transform: rotate(-1.5deg) scale(1.03); margin: 10px 0; }
.x-marquee > div { display: flex; white-space: nowrap; will-change: transform; }
.x-marquee b { font-family: var(--font-display); font-size: clamp(24px, 3vw, 40px); font-weight: 600; padding: 0 22px; }
.x-marquee i { font-style: normal; color: var(--sun); margin-left: 44px; }
.x-products { padding: 40px 0 120px; }
.x-section-head { margin-bottom: 48px; }
.x-section-head-row { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.x-product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.x-product { background: var(--card); border-radius: 32px; overflow: hidden; border: 1px solid color-mix(in oklab, var(--foreground) 7%, transparent); }
.x-product-img { display: block; aspect-ratio: 4/3; overflow: hidden; }
.x-product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.x-product:hover .x-product-img img { transform: scale(1.1) rotate(-2deg); }
.x-product-body { padding: 30px; display: flex; flex-direction: column; gap: 12px; transform: translateZ(30px); }
.x-product-body > span { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.x-product-body h3 { font-family: var(--font-display); font-size: 34px; font-weight: 600; }
.x-product-body p { color: var(--muted-foreground); }
.x-formats { display: flex; flex-wrap: wrap; gap: 8px; }
.x-formats em { color: var(--foreground); font-size: 14px; font-weight: 500; padding: 6px 14px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--primary) 25%, transparent); transition: all .35s; }
.x-product:hover .x-formats em { background: var(--primary); color: var(--primary-foreground); transform: translateY(-3px); }
.x-cta-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--primary); margin-top: 6px; }
.x-cta-link svg { transition: transform .3s; }
.x-cta-link:hover svg { transform: translateX(6px); }
@media (max-width: 800px) {
.x-product-grid { grid-template-columns: 1fr; }
}
.x-hscroll { position: relative; background: var(--foreground); color: var(--primary-foreground); }
.x-hscroll-sticky { position: sticky; top: var(--hh); height: calc(100vh - var(--hh)); overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 36px; }
.x-hscroll-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.x-hscroll-head .x-label { color: var(--sun); }
.x-hscroll-head h2 { font-size: clamp(30px, 4vw, 54px) !important; }
.x-hscroll-bar { width: 200px; height: 3px; background: color-mix(in oklab, var(--primary-foreground) 20%, transparent); border-radius: 2px; overflow: hidden; flex-shrink: 0; }
.x-hscroll-bar span { display: block; height: 100%; background: var(--sun); transform-origin: left; }
.x-hscroll-track { display: flex; gap: 28px; padding-left: max(20px, calc((100vw - 1240px) / 2)); width: max-content; will-change: transform; }
.x-hcard { position: relative; width: min(460px, 78vw); height: min(52vh, 460px); border-radius: 28px; overflow: hidden; flex-shrink: 0; transform: scale(.92); opacity: .55; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s; }
.x-hcard-active { transform: scale(1); opacity: 1; }
.x-hcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.x-hcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, color-mix(in oklab, var(--foreground) 88%, transparent)); }
.x-hcard-copy { position: absolute; z-index: 1; left: 28px; right: 28px; bottom: 26px; }
.x-hcard-copy span { font-family: var(--font-display); font-size: 54px; font-weight: 600; color: var(--sun); line-height: 1; }
.x-hcard-copy h3 { font-family: var(--font-display); font-size: 28px; font-weight: 600; margin: 8px 0 6px; }
.x-hcard-copy p { color: color-mix(in oklab, var(--primary-foreground) 82%, transparent); }
.x-hcard-link { display: inline-flex; gap: 6px; align-items: center; margin-top: 10px; color: var(--sun); font-weight: 600; }
@media (max-width: 640px) {
.x-hscroll-bar { display: none; }
}
.x-counts { padding: 100px 0; }
.x-counts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.x-count { border-top: 2px solid var(--primary); padding-top: 22px; }
.x-count strong { display: block; font-family: var(--font-display); font-size: clamp(44px, 5.5vw, 80px); font-weight: 600; line-height: 1; color: var(--primary); }
.x-count span { color: var(--muted-foreground); font-size: 16px; }
@media (max-width: 800px) {
.x-counts-grid { grid-template-columns: 1fr 1fr; }
}
.x-expand { height: 260vh; position: relative; }
.x-expand-sticky { position: sticky; top: var(--hh); height: calc(100vh - var(--hh)); overflow: hidden; display: grid; place-items: center; }
.x-expand-frame { position: absolute; inset: 0; will-change: clip-path; }
.x-expand-frame img { width: 100%; height: 100%; object-fit: cover; }
.x-expand-shade { position: absolute; inset: 0; background: var(--foreground); }
.x-expand-copy { position: relative; text-align: center; color: var(--primary-foreground); max-width: 820px; padding: 0 20px; }
.x-expand-copy span { color: var(--sun); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; }
.x-expand-copy h2 { margin: 14px 0; }
.x-expand-copy p { font-size: 19px; color: color-mix(in oklab, var(--primary-foreground) 85%, transparent); }
.x-why { padding: 120px 0 80px; }
.x-why-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: start; }
.x-why-head { position: sticky; top: calc(var(--hh) + 40px); display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.x-why-head p { color: var(--muted-foreground); font-size: 18px; }
@media (max-width: 900px) {
.x-why-grid { grid-template-columns: 1fr; }
.x-why-head { position: static; }
}
.x-blog { padding: 110px 0; }
.x-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.x-blog-card { display: flex; flex-direction: column; gap: 10px; }
.x-blog-card > div { aspect-ratio: 4/3; border-radius: 24px; overflow: hidden; }
.x-blog-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.x-blog-card:hover img { transform: scale(1.08); }
.x-blog-card span { font-size: 13px; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: .1em; margin-top: 8px; }
.x-blog-card h3 { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.25; }
.x-blog-card em { color: var(--primary) !important; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
@media (max-width: 860px) {
.x-blog-grid { grid-template-columns: 1fr; }
}
.x-about-hero { height: 200vh; position: relative; }
.x-about-sticky { position: sticky; top: var(--hh); height: calc(100vh - var(--hh)); overflow: hidden; }
.x-about-title { position: relative; z-index: 2; padding-top: 6vh; }
.x-about-title h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(44px, 7.5vw, 108px); line-height: 1; letter-spacing: -.03em; }
.x-about-title em { color: var(--primary) !important; }
.x-about-img { position: absolute; inset: 0; z-index: 1; will-change: clip-path; }
.x-about-img img { width: 100%; height: 100%; object-fit: cover; }
.x-timeline { position: relative; background: color-mix(in oklab, var(--primary) 7%, var(--background)); }
.x-timeline-sticky { position: sticky; top: var(--hh); height: calc(100vh - var(--hh)); display: flex; align-items: center; }
.x-timeline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.x-timeline-year { font-family: var(--font-display); font-size: clamp(70px, 11vw, 160px); font-weight: 600; color: var(--sun); line-height: 1; margin-top: 20px; animation: char-up .6s cubic-bezier(.2,.8,.2,1); -webkit-text-stroke: 2px var(--primary); }
.x-timeline-list { position: relative; padding-left: 40px; display: flex; flex-direction: column; gap: 30px; }
.x-timeline-line { position: absolute; left: 8px; top: 6px; bottom: 6px; width: 3px; background: color-mix(in oklab, var(--primary) 18%, transparent); border-radius: 2px; }
.x-timeline-line span { display: block; height: 100%; background: var(--primary); transform-origin: top; }
.x-timeline-item { opacity: .3; transform: translateX(20px); transition: all .6s cubic-bezier(.2,.8,.2,1); position: relative; }
.x-timeline-item::before { content: ""; position: absolute; left: -39px; top: 4px; width: 17px; height: 17px; border-radius: 50%; background: var(--background); border: 3px solid color-mix(in oklab, var(--primary) 30%, transparent); transition: all .4s; }
.x-timeline-on { opacity: 1; transform: none; }
.x-timeline-on::before { background: var(--sun); border-color: var(--primary); }
.x-timeline-item b { color: var(--primary); font-size: 14px; letter-spacing: .1em; }
.x-timeline-item h3 { font-family: var(--font-display); font-size: 26px; font-weight: 600; }
.x-timeline-item p { color: var(--muted-foreground); }
.x-values { position: relative; }
.x-values-sticky { position: sticky; top: var(--hh); height: calc(100vh - var(--hh)); display: flex; align-items: center; }
.x-values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.x-values-images { position: relative; aspect-ratio: 4/5; max-height: 70vh; border-radius: 32px; overflow: hidden; }
.x-values-images img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.15); clip-path: inset(100% 0 0 0); transition: all .9s cubic-bezier(.7,0,.2,1); }
.x-values-images img.x-on { opacity: 1; transform: scale(1); clip-path: inset(0); }
.x-values-images span { position: absolute; left: 20px; bottom: 20px; background: var(--sun); color: var(--sun-foreground); padding: 8px 16px; border-radius: 999px; font-weight: 600; }
.x-values-list { display: flex; flex-direction: column; }
.x-value { padding: 20px 0; border-bottom: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent); opacity: .3; transition: all .5s; }
.x-value h3 { font-family: var(--font-display); font-size: clamp(32px, 4vw, 52px); font-weight: 600; transition: color .5s, transform .5s; }
.x-value p { max-height: 0; overflow: hidden; color: var(--muted-foreground); transition: max-height .5s; }
.x-value-on { opacity: 1; }
.x-value-on h3 { color: var(--primary); transform: translateX(14px); }
.x-value-on p { max-height: 80px; }
@media (max-width: 860px) {
.x-timeline-grid, .x-values-grid { grid-template-columns: 1fr; gap: 24px; }
.x-values-images { max-height: 34vh; aspect-ratio: 16/10; }
.x-timeline-year { font-size: 64px; }
.x-value h3 { font-size: 28px; }
.x-timeline-list { gap: 16px; }
.x-timeline-item h3 { font-size: 20px; }
}
.x-pd { padding: 50px 0 90px; }
.x-pd-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; }
.x-pd-gallery { position: sticky; top: calc(var(--hh) + 24px); }
.x-pd-main { position: relative; aspect-ratio: 1/1; border-radius: 32px; overflow: hidden; cursor: zoom-in; background: var(--card); }
.x-pd-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .6s, transform .5s cubic-bezier(.2,.8,.2,1); }
.x-pd-main img.x-on { opacity: 1; transform: scale(1); }
.x-pd-badge { position: absolute; left: 18px; top: 18px; background: var(--sun); color: var(--sun-foreground); font-weight: 600; padding: 8px 16px; border-radius: 999px; font-size: 14px; }
.x-pd-hint { position: absolute; right: 18px; bottom: 18px; background: color-mix(in oklab, var(--foreground) 65%, transparent); color: var(--primary-foreground); padding: 6px 12px; border-radius: 999px; font-size: 12px; backdrop-filter: blur(6px); }
.x-pd-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.x-pd-thumbs button { border-radius: 16px; overflow: hidden; aspect-ratio: 1; border: 3px solid transparent; opacity: .6; transition: all .3s; }
.x-pd-thumbs button:hover { opacity: 1; transform: translateY(-3px); }
.x-pd-thumbs button.x-on { border-color: var(--primary); opacity: 1; }
.x-pd-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.x-pd-info { display: flex; flex-direction: column; gap: 18px; padding-top: 10px; }
.x-back { display: inline-flex; gap: 8px; align-items: center; color: var(--muted-foreground); font-weight: 500; transition: transform .3s, color .3s; }
.x-back:hover { color: var(--primary); transform: translateX(-4px); }
.x-pd-info .x-label { margin: 0; }
.x-pd-info h1 { font-family: var(--font-display); font-size: clamp(42px, 5.5vw, 74px); font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.x-pd-desc { font-size: 19px; color: var(--muted-foreground); }
.x-pd-formats > span { font-weight: 600; font-size: 15px; display: block; margin-bottom: 10px; }
.x-seg { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); background: color-mix(in oklab, var(--primary) 9%, var(--background)); border-radius: 999px; padding: 5px; }
.x-seg i { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / var(--n)); border-radius: 999px; background: var(--primary); transform: translateX(calc(var(--i) * 100%)); transition: transform .45s cubic-bezier(.3,1.4,.4,1); box-shadow: 0 8px 18px -8px var(--primary); }
.x-seg button { position: relative; z-index: 1; padding: 12px 6px; font-weight: 600; font-size: 15px; border-radius: 999px; transition: color .3s; }
.x-seg button[aria-pressed="true"] { color: var(--primary-foreground); }
.x-pd-fmt { margin-top: 12px; color: var(--primary); font-weight: 500; animation: char-up .5s cubic-bezier(.2,.8,.2,1); }
.x-pd-uses { display: flex; flex-wrap: wrap; gap: 8px; }
.x-pd-uses span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid color-mix(in oklab, var(--foreground) 8%, transparent); font-size: 14px; transition: all .3s; }
.x-pd-uses span:hover { background: var(--primary); color: var(--primary-foreground); transform: translateY(-3px); }
.x-pd-uses svg { color: var(--primary); }
.x-pd-uses span:hover svg { color: var(--sun); }
.x-pd-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 6px; }
.x-pd-note { font-size: 14px; color: var(--muted-foreground); }
@media (max-width: 900px) {
.x-pd-grid { grid-template-columns: 1fr; gap: 30px; }
.x-pd-gallery { position: static; }
}
.x-uses { padding: 40px 0 120px; }
.x-uses-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.x-flip { perspective: 1200px; height: 340px; outline: none; }
.x-flip-inner { position: relative; width: 100%; height: 100%; transition: transform .8s cubic-bezier(.3,1.2,.4,1); transform-style: preserve-3d; }
.x-flip:hover .x-flip-inner, .x-flip:focus .x-flip-inner { transform: rotateY(180deg); }
.x-flip-front, .x-flip-back { position: absolute; inset: 0; border-radius: 26px; overflow: hidden; backface-visibility: hidden; }
.x-flip-front img { width: 100%; height: 100%; object-fit: cover; }
.x-flip-front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, color-mix(in oklab, var(--foreground) 85%, transparent)); }
.x-flip-front h3 { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 20px; color: var(--primary-foreground); font-family: var(--font-display); font-size: 24px; font-weight: 600; }
.x-flip-back { transform: rotateY(180deg); background: var(--primary); color: var(--primary-foreground); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.x-flip-back span { font-family: var(--font-display); font-size: 48px; font-weight: 600; color: var(--sun); line-height: 1; margin-bottom: auto; }
.x-flip-back h3 { font-family: var(--font-display); font-size: 24px; font-weight: 600; }
.x-flip-back a { color: var(--sun); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
@media (max-width: 960px) {
.x-uses-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.x-uses-grid { grid-template-columns: 1fr; }
.x-flip { height: 260px; }
}
.x-other { padding: 0 0 120px; }
.x-other-link { position: relative; display: flex; align-items: center; gap: 24px; padding: 50px; border-radius: 32px; background: var(--foreground); color: var(--primary-foreground); overflow: hidden; }
.x-other-link .x-label { position: absolute; top: 28px; left: 50px; color: var(--sun); }
.x-other-link h2 { position: relative; z-index: 1; margin-top: 20px; transition: transform .5s; }
.x-other-link > svg { position: relative; z-index: 1; width: 48px; height: 48px; color: var(--sun); transition: transform .5s; }
.x-other-link img { position: absolute; right: -5%; top: 50%; width: 42%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; transform: translateY(-50%) scale(.8) rotate(-10deg); opacity: .6; transition: all .8s cubic-bezier(.2,.8,.2,1); }
.x-other-link:hover h2 { transform: translateX(14px); }
.x-other-link:hover > svg { transform: translateX(24px) rotate(-45deg); }
.x-other-link:hover img { transform: translateY(-50%) scale(1) rotate(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.split-char { animation: none; opacity: 1; transform: none; }
}
.x-timeline-sticky, .x-values-sticky { flex-direction: column; justify-content: center; align-items: stretch; }
.x-timeline-grid, .x-values-grid { width: min(100% - 40px, 1240px); }
@media (min-width: 961px) {
.site-container { width: min(100% - 140px, 1240px); }
.x-hscroll-track { padding-left: max(70px, calc((100vw - 1240px) / 2)); }
}
.x-hero { height: auto; }
.x-hero-sticky { position: relative; top: 0; height: auto; min-height: max(560px, calc(100vh - var(--hh))); padding: 56px 0 80px; }
.x-hero h1 { font-size: clamp(44px, 6.6vw, 96px); }
.x-why-grid { grid-template-columns: 1fr; gap: 40px; }
.x-why-head { position: static; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px 40px; }
.x-why-head .x-label, .x-why-head h2 { grid-column: 1; }
.x-why-head p { grid-column: 1; }
.x-why-head > a { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
.x-why-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.x-why-card { background: var(--card); border-radius: 24px; overflow: hidden; border: 1px solid color-mix(in oklab, var(--foreground) 7%, transparent); height: 100%; }
.x-why-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .8s; }
.x-why-card:hover img { transform: scale(1.05); }
.x-why-card > div { padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.x-why-card svg { width: 26px; height: 26px; color: var(--primary); }
.x-why-card h3 { font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.x-why-card p { color: var(--muted-foreground); font-size: 15px; }
@media (max-width: 960px) {
.x-why-cards { grid-template-columns: 1fr 1fr; }
.x-why-head { grid-template-columns: 1fr; }
.x-why-head > a { grid-column: 1; grid-row: auto; justify-self: start; }
}
@media (max-width: 560px) {
.x-why-cards { grid-template-columns: 1fr; }
}
.x-statement, .x-products, .x-counts, .x-why, .x-blog { padding-top: 96px; padding-bottom: 96px; }
.x-products { padding-top: 64px; }
.x-section-head h2, .x-why-head h2 { margin: 0; }
.x-expand { height: 200vh; }
.blog-hero h1 { font-family: var(--font-display) !important; font-weight: 600 !important; font-size: clamp(42px, 6vw, 84px) !important; line-height: 1.02 !important; letter-spacing: -.03em !important; }
.catalogue-shell h2, .info-heading h2 { font-family: var(--font-display) !important; font-weight: 600 !important; font-size: clamp(32px, 4.4vw, 58px) !important; line-height: 1.05 !important; letter-spacing: -.02em !important; }
.info-heading > span, .contact-details > span, .contact-form-wrap > span { font-size: 13px !important; font-weight: 600 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--primary) !important; background: none !important; padding: 0 !important; }
.blog-list, .contact-main { padding-top: 96px !important; padding-bottom: 96px !important; }
.blog-card, .faq-item { border-radius: 24px !important; }
:root { --deep: oklch(0.36 0.11 145); --deep-2: oklch(0.29 0.09 146); }
.x-hscroll, .x-other-link, .x-hero-sticky { background: var(--deep-2); }
.x-hcard::after, .x-flip-front::after, .post-hero-shade { background: linear-gradient(180deg, transparent 35%, color-mix(in oklab, var(--deep-2) 92%, transparent)); }
.x-expand-shade { background: var(--deep-2); }
.x-hero-grain { background: linear-gradient(90deg, color-mix(in oklab, var(--deep-2) 88%, transparent) 0%, color-mix(in oklab, var(--deep-2) 40%, transparent) 55%, transparent 100%); }
.x-flip-back, .post-cta { background: var(--deep); }
.x-marquee { background: var(--deep); }
.blog-hero, .x-timeline, .blog-related { background: color-mix(in oklab, var(--primary) 6%, var(--background)) !important; }
.x-timeline-year { color: var(--primary); -webkit-text-stroke: 0; }
@media (max-width: 860px) {
.x-about-hero { height: auto; }
.x-about-sticky { position: relative; top: 0; height: auto; overflow: visible; padding: 40px 0 0; }
.x-about-title { transform: none !important; opacity: 1 !important; padding: 0 0 28px; }
.x-about-img { position: relative; inset: auto; clip-path: none !important; height: 56vw; min-height: 260px; }
.x-about-img img { transform: none !important; }
.x-hero-sticky { min-height: auto; padding: 56px 0 72px; }
.x-hero-content > p { font-size: 16px; }
.x-statement, .x-products, .x-counts, .x-why, .x-blog { padding-top: 64px; padding-bottom: 64px; }
.scroll-words { font-size: clamp(24px, 6.4vw, 34px); }
.x-timeline, .x-values { height: auto !important; }
.x-timeline-sticky, .x-values-sticky { position: relative; top: 0; height: auto; padding: 64px 0; }
.x-timeline-item { opacity: 1; transform: none; }
.x-timeline-item::before { background: var(--sun); border-color: var(--primary); }
.x-timeline-line span { transform: none !important; }
.x-timeline-year { display: none; }
.x-values-images { display: none; }
.x-value { opacity: 1; }
.x-value h3 { color: var(--primary); transform: none; }
.x-value p { max-height: none; }
.x-hscroll { height: auto !important; }
.x-hscroll-sticky { position: relative; top: 0; height: auto; padding: 64px 0; }
.x-hscroll-track { transform: none !important; width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20px 10px; -webkit-overflow-scrolling: touch; }
.x-hcard { transform: none; opacity: 1; scroll-snap-align: start; height: 380px; }
.x-hcard img { transform: none !important; }
.x-expand { height: auto; }
.x-expand-sticky { position: relative; top: 0; height: 70vh; min-height: 420px; }
.x-expand-frame { clip-path: none !important; }
.x-expand-copy { opacity: 1 !important; transform: none !important; }
.x-expand-shade { opacity: .6 !important; }
.x-pd { padding-top: 28px; }
.x-seg button { font-size: 13px; padding: 10px 2px; }
.x-other-link { padding: 40px 24px; }
.x-other-link .x-label { left: 24px; }
.x-other-link img { width: 55%; opacity: .35; }
.side-rail { display: none; }
}
.x-hero-page .x-hero-sticky { min-height: max(520px, calc(88vh - var(--hh))); }
.x-blog-featured-wrap { padding: 72px 0 0 !important; background: var(--background) !important; }
.x-blog-featured-wrap .blog-featured { margin-top: 0; }
.x-page .contact-main { padding-top: 96px !important; }
.x-band { padding: 90px 0; background: var(--deep); color: var(--primary-foreground); }
.x-band-inner { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.x-band-inner svg { width: 40px; height: 40px; color: var(--sun); margin-bottom: 14px; }
.x-faq { padding: 96px 0; }
.x-faq-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: start; }
.x-faq-head { position: sticky !important; top: calc(var(--hh) + 40px); display: flex !important; flex-direction: column; }
.x-faq-list { display: flex; flex-direction: column; gap: 14px; }
.x-faq-item { background: var(--card); border-radius: 22px; border: 1px solid color-mix(in oklab, var(--foreground) 8%, transparent); overflow: hidden; transition: box-shadow .4s, border-color .4s; }
.x-faq-item button { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; text-align: left; padding: 22px 24px; font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.x-faq-item button span { color: var(--primary); font-size: 14px; }
.x-faq-item button svg { color: var(--primary); transition: transform .4s; }
.x-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.8,.2,1); }
.x-faq-a p { overflow: hidden; padding: 0 24px 0 60px; color: var(--muted-foreground); }
.x-faq-open { border-color: var(--primary); box-shadow: 0 20px 40px -28px var(--primary); }
.x-faq-open button svg { transform: rotate(45deg); }
.x-faq-open .x-faq-a { grid-template-rows: 1fr; }
.x-faq-open .x-faq-a p { padding-bottom: 22px; }
@media (max-width: 900px) {
.x-faq-grid { grid-template-columns: 1fr; gap: 30px; }
.x-faq-head { position: static !important; }
.x-faq-item button { font-size: 17px; padding: 18px; }
.x-faq-a p { padding-left: 18px; padding-right: 18px; }
.x-faq { padding: 64px 0; }
}
/* ===== WordPress / Hello Elementor additions ===== */
:root{--font-sans:"Figtree",sans-serif;--font-display:"Outfit",sans-serif;--font-accent:"DM Serif Display",serif;--sf-footer-bg:#0b3a1c;--hh:84px}
body.sf-site{margin:0;background:var(--background);color:var(--foreground);font-family:var(--font-sans);overflow-x:hidden}
html{scroll-behavior:auto}
.sf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;border-radius:2px;font-size:12px;font-weight:600;text-transform:uppercase;cursor:pointer;transition:background .3s,color .3s,transform .3s,border-color .3s;height:48px;padding:0 28px;border:1px solid transparent;font-family:var(--font-sans);letter-spacing:.04em}
.sf-btn svg{width:16px;height:16px;flex-shrink:0;pointer-events:none}
.sf-btn-sm{height:32px;padding:0 12px;border-radius:6px}
.sf-btn-brand{background:var(--primary);color:var(--primary-foreground)}
.sf-btn-brand:hover{background:var(--deep-green);transform:translateY(-2px)}
.sf-btn-sun{background:var(--sun);color:var(--sun-foreground)}
.sf-btn-sun:hover{background:var(--warm-yellow);transform:translateY(-2px)}
.sf-btn-onDark{border-color:rgba(255,255,255,.45);background:transparent;color:#fff}
.sf-btn-onDark:hover{background:#fff;color:var(--deep-green);transform:translateY(-2px)}
.sf-btn-outline{border-color:var(--input);background:var(--background);color:var(--foreground)}
.sf-btn-outline:hover{background:var(--accent)}
.mobile-menu-button{align-items:center;justify-content:center;width:42px;height:42px;border-radius:8px;color:var(--foreground)}
.mobile-menu-button svg{width:24px;height:24px}
body.admin-bar .site-header{top:32px}
@media(max-width:782px){body.admin-bar .site-header{top:46px}}
.sf-generic-page{padding:60px 0 80px}
.sf-generic-page h1{font-size:clamp(34px,5vw,56px);margin-bottom:24px;font-family:var(--font-display);font-weight:600}
.sf-prose{max-width:820px;line-height:1.8;font-size:17px}
.sf-prose p,.sf-prose ul,.sf-prose ol{margin-bottom:1.2em}
.sf-prose ul{list-style:disc;padding-left:1.4em}.sf-prose ol{list-style:decimal;padding-left:1.4em}
.sf-prose h2,.sf-prose h3{margin:1.6em 0 .6em;font-family:var(--font-display);font-weight:600}
.sf-prose img{border-radius:8px}
.sf-prose a{color:var(--primary);text-decoration:underline}
.sf-no-js .reveal{opacity:1;transform:none}
.sf-no-js .split-char{opacity:1;transform:none;animation:none}
.sf-no-js .scroll-words span{opacity:1!important}
.sf-hide-side-rail .side-rail,.sf-hide-wa-float .wa-float,.sf-hide-backtop .back-to-top,.sf-hide-progress .scroll-progress{display:none!important}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:10px;top:10px;z-index:99999;background:#fff;padding:10px 14px}
.screen-reader-text{clip:rect(1px,1px,1px,1px);position:absolute!important;height:1px;width:1px;overflow:hidden}
.sf-pagination{margin-top:48px}
.sf-pagination ul{list-style:none;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.sf-pagination a,.sf-pagination span{display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--border);border-radius:99px;font-weight:600}
.sf-pagination .current,.sf-pagination a:hover{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ======================================================================
   v2 fixes (header, hero cue, hover behaviour, timeline, blog, contact)
   ====================================================================== */
html{scroll-behavior:auto}
:root{--hh:80px}
@media(max-width:1100px){:root{--hh:72px}}
main{padding-top:var(--hh)}

/* ---- Header: compact, logo truly centred ---- */
.site-header,.storefront-home .site-header{height:var(--hh);top:0;background:var(--card);box-shadow:0 1px 0 color-mix(in oklab,var(--foreground) 6%,transparent)}
.site-header-scrolled,.storefront-home .site-header-scrolled{height:var(--hh);box-shadow:0 8px 28px -14px color-mix(in oklab,var(--deep-green) 28%,transparent)}
.brand-stripe,.storefront-home .brand-stripe{height:4px}
.header-inner,.storefront-home .header-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;height:calc(100% - 4px)}
.header-nav{display:flex;align-items:center;gap:2px;flex:1 1 0;min-width:0}
.header-nav-left{justify-content:flex-start}
.header-nav-right{justify-content:flex-end}
.brand-logo,.storefront-home .brand-logo{position:absolute;left:50%;top:50%;width:var(--sf-logo-w,112px);height:calc(var(--sf-logo-w,112px) * .507);transform:translate(-50%,-50%);transition:transform .35s ease}
.site-header-scrolled .brand-logo{width:var(--sf-logo-w,112px);height:calc(var(--sf-logo-w,112px) * .507)}
.brand-logo:hover{transform:translate(-50%,-50%) scale(1.04)}
.nav-link,.storefront-home .nav-link{font-size:14px;font-weight:500;padding:8px 14px;letter-spacing:0;text-transform:none}
.nav-link::after{bottom:-2px}
.header-cta{margin-left:12px;padding:11px 22px;border-radius:3px;font-size:12px;font-weight:600;letter-spacing:.06em;line-height:1;background:var(--primary);color:var(--primary-foreground)}
.header-cta:hover{background:var(--deep-green)}
.header-cta-block{display:flex;width:100%;margin:16px 0 0;padding:15px;justify-content:center;font-size:13px}
.footer-brand .brand-logo{position:relative;left:auto;top:auto;transform:none;width:150px;height:78px}
.footer-brand .brand-logo:hover{transform:none}
@media(max-width:1280px){.nav-link,.storefront-home .nav-link{padding:8px 10px;font-size:13.5px}.header-cta{padding:10px 16px;margin-left:6px}}
@media(max-width:1100px){
  .header-nav{display:none}
  .header-inner,.storefront-home .header-inner{justify-content:flex-end}
  .mobile-menu-button{display:inline-flex}
  .mobile-menu,.storefront-home .mobile-menu,.storefront-home .site-header-scrolled .mobile-menu{display:flex;position:fixed;inset:var(--hh) 0 auto;max-height:calc(100vh - var(--hh));overflow-y:auto;flex-direction:column;gap:2px;padding:20px 22px 28px;background:var(--card);box-shadow:0 24px 40px -20px color-mix(in oklab,var(--deep-green) 30%,transparent);transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity .3s ease,transform .3s ease,visibility .3s}
  .mobile-menu-open{transform:none!important;opacity:1;visibility:visible}
  .mobile-link{display:flex;align-items:center;justify-content:space-between;padding:14px 0;font-size:15px;border-bottom:1px solid var(--border)}
  .brand-logo,.storefront-home .brand-logo{width:calc(var(--sf-logo-w,112px) * .82);height:calc(var(--sf-logo-w,112px) * .82 * .507)}
  body.admin-bar .mobile-menu{inset-block-start:calc(var(--hh) + 46px)}
}

/* ---- Hero ---- */
.x-hero-content > p{margin:26px 0 34px}
.x-hero-actions{gap:14px}
.x-scroll-cue{gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.x-scroll-ring{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.08);backdrop-filter:blur(6px)}
.x-scroll-ring svg{width:18px;height:18px;animation:cue 1.6s ease-in-out infinite}
.x-scroll-cue span:not(.x-scroll-ring){font-weight:500}
@media(max-width:860px){.x-scroll-cue{display:none}}
.lucide{flex-shrink:0}

/* ---- Stop image "stretching"/zooming on hover (CTA + background images) ---- */
main img{transition:none}
main a:hover > img,main .reveal:hover > img,main div:hover > img:only-child{transform:none}
.x-why-card:hover img,.x-hcard:hover img{transform:none}
.enquiry-image img,.x-why-card img,.x-hcard img,.x-values-images img{transition:none}
.x-values-images img{transition:opacity .9s cubic-bezier(.7,0,.2,1),transform .9s cubic-bezier(.7,0,.2,1),clip-path .9s cubic-bezier(.7,0,.2,1)}

/* ---- Product cards: no tilt / hover animation ---- */
.tilt,.x-product{transform:none!important;transition:none}
.tilt-glare{display:none}
.x-product:hover .x-product-img img{transform:none}
.x-product:hover .x-formats em{background:transparent;color:var(--foreground);transform:none}
.x-product-img img,.x-formats em{transition:none}
.x-product-body{transform:none}
.x-product{box-shadow:0 18px 40px -28px color-mix(in oklab,var(--deep-green) 40%,transparent)}

/* ---- Floating widgets ---- */
.wa-float{background:var(--whatsapp);color:var(--whatsapp-foreground);width:58px;height:58px;padding:0;justify-content:center;gap:0}
.wa-float svg{width:28px;height:28px;flex-shrink:0}
.wa-float:hover{width:auto;padding:0 20px 0 15px;gap:10px}
.wa-float:hover span{max-width:140px}
.wa-button svg{width:18px;height:18px}
.back-to-top svg{width:20px;height:20px}
.side-rail > * svg{width:19px;height:19px}

/* ---- About: timeline fine-tune ---- */
.x-timeline-sticky{padding:20px 0}
.x-timeline-grid{align-items:center;gap:72px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.x-timeline-grid > div:first-child .x-label{display:block;margin-bottom:14px}
.x-timeline-year{font-size:clamp(72px,10vw,150px);margin-top:18px;letter-spacing:-.03em}
.x-timeline-list{gap:26px;padding-left:44px}
.x-timeline-line{left:8px;top:10px;bottom:10px}
.x-timeline-item{opacity:1;transform:none;transition:none}
.x-timeline-item > *{opacity:.32;transform:translateX(14px);transition:opacity .5s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1)}
.x-timeline-on > *{opacity:1;transform:none}
.x-timeline-item::before{left:-44px;top:3px;width:19px;height:19px;border:3px solid color-mix(in oklab,var(--primary) 35%,var(--background));background:var(--background);transition:background .4s,border-color .4s,transform .4s}
.x-timeline-on::before{background:var(--sun);border-color:var(--primary);transform:scale(1.1)}
.x-timeline-item b{display:block;margin-bottom:4px;font-size:13px;font-weight:700}
.x-timeline-item h3{font-size:clamp(20px,1.9vw,26px);line-height:1.2;margin-bottom:6px}
.x-timeline-item p{font-size:15.5px;line-height:1.55;max-width:520px}
@media(max-width:860px){.x-timeline-item > *{opacity:1;transform:none}.x-timeline-grid{gap:28px}}

/* ---- Blog article page ---- */
.post-share svg{width:19px;height:19px}
.post-share > a,.post-share > button{width:44px;height:44px}
.post-body h2{font-size:clamp(24px,2.4vw,30px)}
.post-body > ul,.post-body > ol{margin:0 0 22px;padding-left:1.4em}
.post-body > ul{list-style:disc}
.post-body > ol{list-style:decimal}
.post-body li{margin:6px 0;color:color-mix(in oklab,var(--foreground) 85%,transparent)}
.post-body p a,.post-body li a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.post-body blockquote{border-left:4px solid var(--sun);margin:1.6em 0;padding:6px 0 6px 22px;font-size:1.1em;color:var(--foreground)}
.post-body blockquote p{margin:0;font-style:italic}
.post-tips ul{list-style:none;padding:0}
.post-tips li{color:var(--foreground)}
.post-cta{gap:22px}
.post-cta-actions{gap:14px 22px}
.blog-meta svg{width:14px;height:14px}
.blog-read svg{width:16px;height:16px}

/* ---- Text blocks: breathing room inside banners ---- */
.x-section-head h2,.x-why-head h2,.x-faq-head h2{margin-top:12px}
.x-why-head p,.x-faq-head p{margin-top:16px}
.x-why-head .sf-btn,.x-faq-head .x-hero-actions{margin-top:28px}
.x-expand-copy h2{margin:14px 0 16px}
.enquiry-content h2{margin-top:14px}
.enquiry-content p{margin-top:22px}
.button-row{margin-top:34px;gap:14px 22px;align-items:center}
.x-band-inner .x-hero-actions{gap:14px}
.x-pd-info h1{margin:10px 0 16px}
.x-pd-desc{margin-bottom:26px}
.x-pd-actions{margin-top:28px;gap:14px}
.x-pd-note{margin-top:16px}
.info-heading{margin-bottom:34px}
.info-heading h2{margin-top:10px}

/* ======================================================================
   Contact page (rebuilt)
   ====================================================================== */
.sfc{padding:88px 0 40px;background:linear-gradient(180deg,var(--background),color-mix(in oklab,var(--primary) 5%,var(--background)))}
.sfc-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start}
.sfc-info{position:sticky;top:calc(var(--hh) + 24px);padding:44px 40px;border-radius:28px;background:linear-gradient(160deg,var(--deep-green),color-mix(in oklab,var(--deep-green) 78%,#000));color:#fff;overflow:hidden;isolation:isolate}
.sfc-info::after{content:"";position:absolute;right:-90px;top:-90px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,color-mix(in oklab,var(--sun) 35%,transparent),transparent 70%);z-index:-1}
.sfc-info .x-label{color:var(--sun)}
.sfc-info h2{margin:12px 0 14px;font-size:clamp(30px,3.2vw,40px);line-height:1.1;color:#fff}
.sfc-info > p{font-size:16px;line-height:1.7;color:rgba(255,255,255,.78)}
.sfc-list{display:flex;flex-direction:column;gap:12px;margin-top:30px}
.sfc-item{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);transition:background .25s,transform .25s}
a.sfc-item:hover{background:rgba(255,255,255,.15);transform:translateX(4px)}
.sfc-ico{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:12px;background:var(--sun);color:var(--sun-foreground)}
.sfc-ico svg{width:20px;height:20px}
.sfc-item small{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:2px}
.sfc-item b{display:block;font-size:16px;font-weight:600;line-height:1.35;word-break:break-word}
.sfc-wa{margin-top:22px;display:flex}
.sfc-wa .wa-button{width:100%;justify-content:center}
.sfc-social{display:flex;align-items:center;gap:10px;margin-top:26px;flex-wrap:wrap}
.sfc-social span{font-size:13px;color:rgba(255,255,255,.7);margin-right:6px}
.sfc-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.3);color:#fff;transition:background .25s,color .25s}
.sfc-social a:hover{background:var(--sun);color:var(--sun-foreground);border-color:var(--sun)}
.sfc-social svg{width:17px;height:17px}

.sfc-card{padding:48px 46px;border-radius:28px;background:var(--card);border:1px solid color-mix(in oklab,var(--foreground) 7%,transparent);box-shadow:0 30px 60px -40px color-mix(in oklab,var(--deep-green) 45%,transparent)}
.sfc-card h2{margin:12px 0 8px;font-size:clamp(28px,3vw,38px);line-height:1.1}
.sfc-card > p{color:var(--muted-foreground);font-size:16px}
.sfc-form{margin-top:30px;display:grid;gap:20px}
.sfc-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.sfc-field{display:block}
.sfc-field > span{display:block;margin-bottom:8px;font-size:13px;font-weight:600;color:var(--foreground)}
.sfc-field > span i{font-style:normal;color:var(--destructive)}
.sfc-field input,.sfc-field select,.sfc-field textarea{width:100%;border:1.5px solid color-mix(in oklab,var(--foreground) 14%,transparent);border-radius:14px;background:color-mix(in oklab,var(--background) 60%,var(--card));color:var(--foreground);font:400 15px var(--font-sans);outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.sfc-field input,.sfc-field select{height:54px;padding:0 16px}
.sfc-field select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23596459' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.sfc-field textarea{min-height:150px;padding:16px;resize:vertical;line-height:1.6}
.sfc-field input:focus,.sfc-field select:focus,.sfc-field textarea:focus{border-color:var(--primary);background:var(--card);box-shadow:0 0 0 4px color-mix(in oklab,var(--primary) 14%,transparent)}
.sfc-field [aria-invalid="true"]{border-color:var(--destructive)}
.sfc-field small{display:block;margin-top:6px;color:var(--destructive);font-size:12px}
.sfc-submit{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.sfc-submit .sf-btn{height:56px;padding:0 36px;border-radius:14px;font-size:13px}
.sfc-submit p{font-size:13px;color:var(--muted-foreground);max-width:300px;line-height:1.5}
.sfc-error{color:var(--destructive);font-size:14px}
.sfc-success{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:36px;margin-top:26px;border-radius:20px;background:color-mix(in oklab,var(--primary) 8%,var(--card));border:1px solid color-mix(in oklab,var(--primary) 25%,transparent)}
.sfc-success svg{width:44px;height:44px;color:var(--primary)}
.sfc-success h3{font-size:28px}
.sfc-success p{color:var(--muted-foreground);line-height:1.7}
.sfc-map{padding:40px 0 70px}
.sfc-map-frame{border-radius:28px;overflow:hidden;height:380px;border:1px solid color-mix(in oklab,var(--foreground) 8%,transparent);box-shadow:0 30px 60px -45px color-mix(in oklab,var(--deep-green) 45%,transparent)}
.sfc-map-frame iframe{width:100%;height:100%;border:0}
@media(max-width:1000px){.sfc-grid{grid-template-columns:1fr}.sfc-info{position:relative;top:0}}
@media(max-width:640px){.sfc{padding:56px 0 20px}.sfc-info{padding:32px 24px}.sfc-card{padding:30px 22px}.sfc-row{grid-template-columns:1fr}.sfc-submit .sf-btn{width:100%}.sfc-map-frame{height:300px}}

/* ======================================================================
   Product page extras
   ====================================================================== */
.sf-price{font-family:var(--font-display);font-size:30px;font-weight:600;color:var(--deep-green);margin-bottom:6px}
.sf-price small{font-size:14px;font-weight:500;color:var(--muted-foreground);margin-left:6px}
.x-specs{padding:70px 0 20px}
.x-specs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-top:30px}
.x-spec-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.x-spec-table caption{caption-side:top;text-align:left;font-family:var(--font-display);font-weight:600;font-size:18px;padding:0 0 10px}
.x-spec-table th,.x-spec-table td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--border);font-size:15px;vertical-align:top}
.x-spec-table th{width:40%;font-weight:600;color:var(--deep-green);background:color-mix(in oklab,var(--primary) 6%,var(--card))}
.x-spec-table tr:last-child th,.x-spec-table tr:last-child td{border-bottom:0}
.sf-video{border-radius:20px;overflow:hidden;aspect-ratio:16/9;background:#000}
.sf-video iframe,.sf-video video{width:100%;height:100%;border:0}

/* ---- Mobile alignment polish ---- */
@media(max-width:640px){
  .x-hero-actions,.button-row,.x-pd-actions,.x-band-inner .x-hero-actions,.post-cta-actions{flex-direction:column;align-items:stretch;width:100%}
  .x-hero-actions > *,.button-row > *,.x-pd-actions > *,.x-band-inner .x-hero-actions > *,.post-cta-actions > *{width:100%}
  .x-hero-actions .sf-btn,.button-row .sf-btn,.x-pd-actions .sf-btn,.x-hero-actions .wa-button,.button-row .wa-button,.x-pd-actions .wa-button,.x-band-inner .wa-button,.x-band-inner .sf-btn{width:100%;justify-content:center}
  .x-hero-actions .magnetic,.x-pd-actions .magnetic{display:block}
  .footer-bottom-inner{flex-direction:column;gap:6px;text-align:center}
  .wa-float{right:16px;bottom:16px}
  .back-to-top{right:16px;bottom:84px}
  .side-rail{display:none}
}
@media(max-width:860px){
  .x-timeline-grid{grid-template-columns:1fr}
  .x-timeline-year{font-size:clamp(64px,22vw,110px)}
}

/* ---- One product: wide card ---- */
.x-product-grid.x-product-grid-single{grid-template-columns:1fr}
.x-product-grid-single .x-product{display:grid;grid-template-columns:1.1fr 1fr;align-items:stretch}
.x-product-grid-single .x-product-img{aspect-ratio:auto;min-height:440px}
.x-product-grid-single .x-product-body{justify-content:center;padding:clamp(28px,4vw,56px);gap:16px}
.x-product-grid-single .x-product-body h3{font-size:clamp(34px,4vw,48px)}
@media(max-width:860px){
  .x-product-grid-single .x-product{grid-template-columns:1fr}
  .x-product-grid-single .x-product-img{aspect-ratio:4/3;min-height:0}
}