/* Sanicat Essential Oils — root portal (sanicatessentialoils.com/).
   Shares the UK/IT V33 visual language: Sanicat teal, rounded sans, nested-bezel surfaces.
   Brand font: official VAG Rounded, self-hosted WOFF2. No third-party requests. */
@font-face{font-family:VAG;font-weight:300;src:url('assets/fonts/vag-rounded-light.woff2') format('woff2');font-display:swap}
@font-face{font-family:VAG;font-weight:400 600;src:url('assets/fonts/vag-rounded-regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:VAG;font-weight:700 900;src:url('assets/fonts/vag-rounded-bold.woff2') format('woff2');font-display:swap}
@font-face{font-family:VAGBold;font-weight:100 900;src:url('assets/fonts/vag-rounded-bold.woff2') format('woff2');font-display:swap}

:root{
 --teal:#087c73;--teal-bright:#12a79f;--ink:#123f42;--ink-soft:#4d6668;--mint:#e8f6f3;
 --paper:#fbf8f1;--white:#fff;--amber:244,169,74;--ink-a:18,63,66;
 --ease:cubic-bezier(.32,.72,0,1);
 --shell:rgba(255,255,255,.62);
 --bezel:0 0 0 1px rgba(var(--ink-a),.06),0 0 0 7px var(--shell),0 0 0 8px rgba(var(--ink-a),.07),0 36px 70px -36px rgba(var(--ink-a),.34),0 10px 24px -18px rgba(var(--ink-a),.18),inset 0 1px 0 rgba(255,255,255,.9);
 /* z-index scale */
 --z-grain:70;--z-header:80;--z-skip:100;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:VAG,'Arial Rounded MT Bold',Arial,sans-serif;font-weight:500;-webkit-font-smoothing:antialiased;line-height:1.5}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:800;text-wrap:balance;margin:0}
p{margin:0;text-wrap:pretty}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid #a86718;outline-offset:4px;border-radius:12px}
.skip-link{position:fixed;left:16px;top:-80px;z-index:var(--z-skip);background:#fff;color:var(--ink);border-radius:12px;padding:12px 18px;box-shadow:0 0 0 2px var(--ink)}
.skip-link:focus{top:14px}

/* Grain: fixed, non-interactive. */
body::after{content:'';position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;opacity:.045;mix-blend-mode:multiply;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Ambient light: soft teal and amber pools that fade out completely (no viewport-sized seams). */
main{position:relative;isolation:isolate}
main::before{content:'';position:absolute;left:0;right:0;top:-120px;height:1500px;z-index:-1;pointer-events:none;
 background:radial-gradient(900px 720px at 88% 0%,rgba(18,167,159,.13),transparent 68%),radial-gradient(820px 620px at 0% 72%,rgba(var(--amber),.13),transparent 68%)}

/* Floating island header. */
.island{position:sticky;top:14px;z-index:var(--z-header);display:flex;align-items:center;justify-content:space-between;gap:16px;
 width:calc(100% - 40px);max-width:1240px;height:64px;margin:14px auto 0;padding:0 8px 0 24px;border-radius:999px;
 background:rgba(251,248,241,.74);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
 box-shadow:0 0 0 1px rgba(var(--ink-a),.08),0 14px 34px -18px rgba(var(--ink-a),.35),inset 0 1px 0 rgba(255,255,255,.8)}
@media(prefers-reduced-transparency:reduce){.island{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}}
.island-brand img{width:132px}
.island-nav{display:flex;gap:6px}
.island-nav a{display:inline-grid;place-items:center;min-width:48px;height:48px;padding:0 14px;border-radius:999px;font-weight:800;font-size:14px;letter-spacing:.06em;color:var(--ink);
 box-shadow:inset 0 0 0 1px rgba(var(--ink-a),.14);transition:background-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.island-nav a:hover{background:var(--teal);color:#fff;box-shadow:inset 0 0 0 1px var(--teal)}
.island-nav a:active{transform:scale(.96)}

/* Hero: split, fits the first viewport. */
.hero{max-width:1240px;margin:0 auto;padding:56px 28px 72px;min-height:calc(100dvh - 78px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border-radius:999px;background:rgba(18,167,159,.1);box-shadow:inset 0 0 0 1px rgba(18,167,159,.16);color:#0a756e;font-weight:800;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.pill-sep{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6}
.hero h1{margin-top:22px;font-size:clamp(46px,6vw,86px);line-height:.98;letter-spacing:-.008em}
.hero h1 span{display:block;color:var(--teal)}
.hero-sub{margin-top:24px;max-width:46ch;font-size:18px;color:var(--ink-soft);display:grid;gap:4px}
.hero-sub span:first-child{color:var(--ink);font-weight:800}

/* Market doors: the page's only decision. */
.doors{margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:560px}
.door{position:relative;display:grid;gap:4px;padding:22px 22px 24px;border-radius:28px;background:#fff;box-shadow:var(--bezel);
 transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.door-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.door-code{font-weight:800;font-size:44px;line-height:1;letter-spacing:0;color:var(--teal)}
.door-arrow{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--teal);color:#fff;font-family:Arial,sans-serif;font-size:18px;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 18px -10px rgba(8,124,115,.8);transition:transform .6s var(--ease),background-color .3s var(--ease)}
.door-name{font-weight:800;font-size:20px;line-height:1.15}
.door-lang{font-size:15px;color:var(--ink-soft)}
.door-hint{position:absolute;top:-12px;left:22px;padding:4px 10px;border-radius:999px;background:var(--ink);color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em}
.door:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(var(--ink-a),.06),0 0 0 7px var(--shell),0 0 0 8px rgba(18,167,159,.25),0 48px 80px -40px rgba(var(--ink-a),.45),inset 0 1px 0 rgba(255,255,255,.9)}
.door:hover .door-arrow{transform:translateX(4px) scale(1.06);background:var(--ink)}
.door:active{transform:translateY(-1px) scale(.985)}
.door.is-suggested{box-shadow:0 0 0 2px var(--teal-bright),0 0 0 8px var(--shell),0 0 0 9px rgba(18,167,159,.25),0 36px 70px -36px rgba(var(--ink-a),.34)}

/* Product stage: three packs in a shallow Z-axis fan. */
.stage{position:relative;border-radius:44px;padding:8px;background:rgba(var(--ink-a),.035);box-shadow:0 0 0 1px rgba(var(--ink-a),.07)}
.stage-core{position:relative;aspect-ratio:1/1.02;border-radius:36px;overflow:hidden;
 background:radial-gradient(70% 60% at 50% 38%,#fff 0%,rgba(255,255,255,0) 70%),radial-gradient(80% 70% at 80% 100%,rgba(var(--amber),.28),transparent 60%),linear-gradient(160deg,#eaf7f4 0%,#dff0ec 100%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.stage-core:after{content:'';position:absolute;left:12%;right:12%;bottom:10%;height:8%;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--ink-a),.28),transparent);filter:blur(6px)}
.pack{position:absolute;z-index:1;bottom:13%;width:42%;filter:drop-shadow(0 22px 22px rgba(var(--ink-a),.22));transition:transform .9s var(--ease)}
.pack-left{left:5%;transform:rotate(-9deg) translateY(2%) scale(.9)}
.pack-right{right:5%;transform:rotate(9deg) translateY(2%) scale(.9)}
.pack-front{left:50%;width:52%;z-index:2;transform:translateX(-50%);filter:drop-shadow(0 30px 30px rgba(var(--ink-a),.3))}
.stage:hover .pack-left{transform:rotate(-12deg) translate(-6%,0) scale(.9)}
.stage:hover .pack-right{transform:rotate(12deg) translate(6%,0) scale(.9)}
.stage:hover .pack-front{transform:translateX(-50%) translateY(-3%)}

/* Benefits bento: exactly three cells. */
.why{max-width:1240px;margin:0 auto;padding:112px 28px 128px}
.why>h2{font-size:clamp(34px,4.2vw,58px);line-height:1.02;letter-spacing:-.008em;max-width:18ch}
.why>h2 span{display:block;margin-top:12px;font-size:.42em;letter-spacing:0;line-height:1.25;color:var(--ink-soft);font-weight:500}
.bento{margin-top:56px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(0,auto);gap:30px}
.tile{position:relative;border-radius:30px;overflow:hidden;background:#fff;box-shadow:var(--bezel);display:flex;flex-direction:column}
.tile h3{font-size:26px;line-height:1.1;letter-spacing:0}
.tile h3+p{margin-top:4px;font-size:17px;color:var(--teal);font-weight:800}
.tile-note{margin-top:14px;font-size:15px;color:var(--ink-soft);max-width:44ch}
.tile-note span{display:block}
.tile-body{padding:28px 30px 30px}
.tile-film{grid-column:1/8;grid-row:1/3}
.tile-film img{width:100%;aspect-ratio:1122/622;object-fit:cover;transition:transform 1.2s var(--ease)}
.tile-film:hover img{transform:scale(1.03)}
.tile-film .tile-body{margin-top:auto}
.tile-clump{grid-column:8/13;background:radial-gradient(90% 90% at 100% 0%,rgba(18,167,159,.16),transparent 60%),linear-gradient(180deg,#f3fbf9,#fff)}
.tile-award{grid-column:8/13;background:radial-gradient(90% 90% at 0% 100%,rgba(var(--amber),.22),transparent 60%),#fbf6ec}
.tile-clump,.tile-award{flex-direction:row;align-items:center;gap:6px;padding-left:24px}
.tile-clump img,.tile-award img{width:104px;height:104px;object-fit:contain;flex:0 0 auto}
.tile-clump .tile-body,.tile-award .tile-body{padding:28px 28px 28px 14px}

/* Footer. */
.foot{max-width:1240px;margin:0 auto;padding:40px 28px 48px;display:grid;grid-template-columns:auto 1fr;gap:18px 32px;align-items:center;border-top:1px solid rgba(var(--ink-a),.1);font-size:13px;color:var(--ink-soft)}
.foot-logo img{width:118px}
.foot-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px 22px}
.foot-links a{padding:6px 0;transition:color .25s var(--ease)}
.foot-links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.foot-note,.foot small{grid-column:1/-1}
.foot-note span{display:block}

/* Motion: hero enters in sequence on load; bento reveals on scroll (portal.js). */
@media(prefers-reduced-motion:no-preference){
 .enter{animation:rise 1s var(--ease) both;animation-delay:calc(var(--i,0)*110ms + 80ms)}
 .js-reveal .reveal-item{opacity:0;translate:0 40px}
 .js-reveal-armed .reveal-item{transition:opacity .9s var(--ease) var(--d,0ms),translate 1.2s var(--ease) var(--d,0ms)}
 .js-reveal .reveal-item.is-in{opacity:1;translate:0 0}
}
@keyframes rise{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
@media print{body::after{display:none}.reveal-item{opacity:1!important;translate:none!important}.island{position:static}}

/* Tablet */
@media(max-width:1080px){
 .hero{grid-template-columns:1fr;gap:48px;min-height:0;padding-top:48px}
 .stage{max-width:560px;width:100%;justify-self:center}
 .tile-film{grid-column:1/-1;grid-row:auto}
 .tile-clump{grid-column:1/7}.tile-award{grid-column:7/13}
}
/* Mobile: strict single column, doors stay above the fold. */
@media(max-width:760px){
 .island{top:8px;width:calc(100% - 20px);height:58px;margin-top:8px;padding:0 6px 0 16px}
 .island-brand img{width:112px}
 .island-nav a{min-width:44px;height:44px;padding:0 12px}
 .hero{padding:32px 16px 56px;gap:36px}
 .hero h1{margin-top:16px;font-size:44px}
 .hero-sub{margin-top:16px;font-size:16px}
 .doors{margin-top:28px;gap:16px}
 .door{padding:18px 16px 18px;border-radius:24px}
 .door-top{margin-bottom:12px}
 .door-code{font-size:34px}
 .door-arrow{width:38px;height:38px;font-size:16px}
 .door-name{font-size:17px}
 .door-lang{font-size:13px}
 .door-hint{left:14px}
 .stage{border-radius:34px}.stage-core{border-radius:28px;aspect-ratio:1/.86}
 .why{padding:64px 16px 80px}
 .bento{margin-top:32px;grid-template-columns:1fr;gap:26px}
 .tile-film,.tile-clump,.tile-award{grid-column:auto;grid-row:auto}
 .tile-clump,.tile-award{padding-left:16px}
 .tile-clump img,.tile-award img{width:80px;height:80px}
 .tile-body,.tile-clump .tile-body,.tile-award .tile-body{padding:22px 22px 24px}
 .tile-clump .tile-body,.tile-award .tile-body{padding-left:10px}
 .tile h3{font-size:22px}
 .foot{grid-template-columns:1fr;padding:32px 16px 40px}
 .foot-links{justify-content:flex-start}
}
@media(max-width:350px){.door-hint{left:10px;font-size:10px;padding:3px 8px}.door{padding-left:14px;padding-right:12px}.door-code{font-size:28px}.door-name{font-size:15px}.hero h1{font-size:38px}}

/* Footer "Cookie settings" button (opens Didomi preferences). */
.foot-link-button{font:inherit;color:inherit;background:none;border:0;padding:6px 0;cursor:pointer;transition:color .25s var(--ease)}
.foot-link-button:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}