@font-face{font-family:"Schibsted Grotesk";src:url(/fonts/schibsted-grotesk-latin.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-400-latin.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  /* Materials: flacon glass, perfumer's blotter, oud heartwood, labdanum resin, vetiver root */
  --glass:#D6E2DC;
  --blotter:#FAFAF7;
  --oud:#1F1813;
  --resin:#A4550C;
  --resin-light:#E9A64A;
  --vetiver:#4A5646;
  --line:rgba(31,24,19,.14);
  --on-oud-muted:#BDB4AA;
  --sans:"Schibsted Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --gutter:clamp(20px,5vw,64px);
  --max:1240px;
  --edge:max(var(--gutter),calc((100% - var(--max)) / 2));
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;overflow-x:clip;background:var(--blotter);color:var(--oud);font:400 1rem/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,dl,dd,ol,ul,figure{margin:0}
ol,ul{list-style:none;padding:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--oud);outline-offset:3px;border-radius:2px}
.contact :focus-visible{outline-color:var(--resin-light)}
.skip-link{position:absolute;left:12px;top:-60px;z-index:10;background:var(--oud);color:var(--blotter);padding:10px 14px;text-decoration:none}
.skip-link:focus{top:12px}
[id]{scroll-margin-top:16px}

/* Buttons */
.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 26px;border-radius:999px;font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;text-align:center;transition:background-color .2s,color .2s,border-color .2s}
.button--resin{background:var(--resin);color:var(--blotter)}
.button--resin:hover{background:#8A4609}
.button--light{background:var(--blotter);color:var(--oud)}
.button--light:hover{background:var(--glass)}

/* Header */
.site-header{position:relative;z-index:20;background:var(--glass);display:flex;align-items:center;gap:32px;padding:12px var(--edge);padding-top:max(12px,env(safe-area-inset-top))}
.wordmark{font-weight:700;font-size:1.3rem;letter-spacing:-.02em;text-decoration:none;margin-right:auto;display:inline-flex;align-items:center;min-height:44px}
.site-header nav{display:flex;gap:28px}
.site-header nav a{text-decoration:none;font-weight:500;color:var(--vetiver);white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
.site-header nav .nav-contact{display:none}
.wordmark,.header-cta{white-space:nowrap}
.site-header nav a:hover{color:var(--oud)}
.header-cta{font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px;display:inline-flex;align-items:center;min-height:44px}
.menu-toggle{display:none}

/* Mobile menu: a panel under the header, opened by the Menu button (app.js). */
@media (max-width:880px){
  .site-header{gap:20px}
  .site-header nav{display:none}
  .js .menu-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;margin-right:-8px;padding:0 8px;border:0;background:none;color:var(--oud);font:600 1rem var(--sans);cursor:pointer}
  .menu-icon{position:relative;width:18px;height:2px;background:currentColor;transition:background-color .2s}
  .menu-icon::before,.menu-icon::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;transition:transform .2s}
  .menu-icon::before{transform:translateY(-6px)}
  .menu-icon::after{transform:translateY(6px)}
  .menu-open .menu-icon{background:transparent}
  .menu-open .menu-icon::before{transform:rotate(45deg)}
  .menu-open .menu-icon::after{transform:rotate(-45deg)}
  .menu-open nav{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;padding:4px var(--edge) 20px;background:var(--glass);border-bottom:1px solid var(--line);box-shadow:0 16px 24px -16px rgba(31,24,19,.25)}
  .menu-open nav a{min-height:56px;font-size:1.25rem;color:var(--oud);border-top:1px solid var(--line)}
  .menu-open nav .nav-contact{display:inline-flex}
}

/* Hero: the one bold moment */
.hero{background:var(--glass);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:end;gap:40px;padding:clamp(40px,6vw,80px) var(--edge) clamp(48px,6vw,80px);overflow:hidden}
.hero h1{font-size:clamp(2.3rem,5.5vw,5rem);line-height:.98;font-weight:650;letter-spacing:-.04em}
.hero h1 .line{display:block}
@media (min-width:961px){.hero h1 .line{white-space:nowrap}}
.hero-lead{max-width:40ch;margin-top:clamp(24px,3vw,36px);font-size:clamp(1.05rem,1.4vw,1.2rem);color:#2E3A2F}
.hero-cta{margin-top:32px}
.hero-vessel{justify-self:end;width:min(100%,500px);margin-bottom:calc(-1 * clamp(48px,6vw,80px) - 1px)}
.vessel .cap{fill:var(--oud)}
.vessel .neck{fill:rgba(255,255,255,.45);stroke:var(--oud);stroke-width:1.5}
.vessel .glass{fill:rgba(255,255,255,.4)}
.vessel .outline{fill:none;stroke:var(--oud);stroke-width:1.5}
.vessel .mark line{stroke:var(--resin);stroke-width:1.5}
.vessel .mark text{font:400 14px var(--mono);fill:var(--oud)}

@media (prefers-reduced-motion:no-preference){
  .hero h1 .line,.hero-lead,.hero-cta{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
  .hero h1 .line:nth-child(2){animation-delay:.07s}
  .hero h1 .line:nth-child(3){animation-delay:.14s}
  .hero h1 .line:nth-child(4){animation-delay:.21s}
  .hero h1 .line:nth-child(5){animation-delay:.28s}
  .hero-lead{animation-delay:.42s}
  .hero-cta{animation-delay:.55s}
  .vessel .liquid{animation:fill 2s cubic-bezier(.45,.05,.3,1) .45s both}
  .vessel .mark line{animation:tick .35s ease-out both;animation-delay:calc(.8s + var(--i) * .29s)}
  .vessel .mark text{animation:label .5s ease-out both;animation-delay:calc(.8s + var(--i) * .29s)}
}
@keyframes rise{from{opacity:0;transform:translateY(.45em)}}
@keyframes fill{from{transform:translateY(258px)}}
@keyframes tick{from{stroke:rgba(31,24,19,.3)}}
@keyframes label{from{fill:rgba(31,24,19,.3)}}

/* Proof strip */
.proof{border-top:1px solid var(--oud);border-bottom:1px solid var(--line);padding:0 var(--edge)}
.proof-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-right:1px solid var(--line)}
/* Every cell carries the same divider and padding, so all six read as equal columns. */
.proof-list div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;padding:32px 20px 30px;border-left:1px solid var(--line)}
.proof-list dd{font:400 clamp(2rem,3.6vw,3.1rem)/1 var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.proof-list dt{color:var(--vetiver);font-size:1rem}

/* Sections */
.section{max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:clamp(64px,10vw,128px) var(--gutter)}
.section+.section{border-top:1px solid;border-image:linear-gradient(var(--line),var(--line)) 1 / 1px 0 0 / 0 100vw}
@media (min-width:961px){.markets .section-head{position:sticky;top:40px}}
.section-head h2{font-size:clamp(1.75rem,3.4vw,2.75rem);line-height:1.08;font-weight:650;letter-spacing:-.03em;max-width:18ch}
.section-head p{margin-top:16px;color:var(--vetiver);max-width:40ch;font-size:1.05rem}
.markets{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.photo{margin-top:40px;aspect-ratio:4/5;overflow:hidden;background:var(--glass);border-radius:4px}
.photo img{width:100%;height:100%;object-fit:cover}

/* Brands */
.brands .section-head{display:flex;justify-content:space-between;align-items:end;gap:24px 48px;flex-wrap:wrap}
.brands .section-head p{margin-top:0}
.brand-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:clamp(32px,5vw,56px)}
.brand{background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);height:clamp(140px,16vw,210px);display:flex;align-items:center;justify-content:center;min-width:0}
.brand img{object-fit:contain;width:70%;height:42%;mix-blend-mode:multiply}
.brand--emblem img{width:55%;height:66%}
.brand--portrait img{width:40%;height:70%}


/* Markets */
.regions div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px;padding:22px 0;border-top:1px solid var(--line)}
.regions div:last-child{border-bottom:1px solid var(--line)}
.regions dt{color:var(--vetiver);padding-top:4px}
.regions dd{font-size:clamp(1.3rem,2.2vw,1.65rem);font-weight:500;letter-spacing:-.02em;line-height:1.3}
.logo-fallback{font-weight:600;color:var(--vetiver);text-align:center;line-height:1.2}

/* Partner logos: two slow marquee bars moving in opposite directions.
   Default is a static wrapped row; motion is added only when the visitor allows it. */
.partners{padding:clamp(64px,9vw,112px) 0;border-top:1px solid;border-image:linear-gradient(var(--line),var(--line)) 1 / 1px 0 0 / 0 100vw}
.partners-head,.bar-label{padding:0 var(--edge)}
.bar-label{color:var(--vetiver);margin:clamp(40px,5vw,56px) 0 clamp(12px,2vw,20px)}
.marquee{--h:28px;--space:clamp(36px,4.5vw,64px);overflow:hidden}
.marquee-track{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;row-gap:24px;padding:0 var(--edge)}
.logo{flex:none;display:flex;align-items:center;justify-content:center;height:calc(var(--h) * 2);padding:0 var(--space)}
/* "scale" in content/site.json evens out optical size; brightness(0) renders every logo in one ink tone. */
.logo img{height:calc(var(--h) * var(--scale,1));width:auto;max-width:none;filter:brightness(0);opacity:.62}
.logo--grey img{filter:grayscale(1) contrast(1.4);opacity:.72}
.logo-wordmark{font-size:calc(var(--h) * var(--scale,1) * .95);font-weight:500;letter-spacing:.01em;line-height:1;color:#000;opacity:.62;white-space:nowrap}
.is-repeat{display:none}
@media (prefers-reduced-motion:no-preference){
  .marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
  .marquee-track{flex-wrap:nowrap;justify-content:flex-start;width:max-content;padding:0;animation:marquee var(--duration) linear infinite;will-change:transform}
  .marquee--reverse .marquee-track{animation-direction:reverse}
  .marquee:hover .marquee-track{animation-play-state:paused}
  .is-repeat{display:flex}
}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}

/* Contact */
.contact{background:var(--oud);color:var(--blotter);padding:clamp(72px,11vw,140px) var(--edge)}
.contact h2{font-size:clamp(2.1rem,5.4vw,4.25rem);line-height:1;font-weight:650;letter-spacing:-.04em}
.contact p{margin-top:20px;color:var(--on-oud-muted);font-size:1.1rem}
.contact p{max-width:46ch}
.contact .event-note{color:var(--resin-light);margin-top:12px}
.contact-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.contact-actions .button{overflow-wrap:anywhere}

/* Footer */
.site-footer{background:var(--oud);color:var(--on-oud-muted);font-size:1rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;padding:24px var(--edge);padding-bottom:max(24px,env(safe-area-inset-bottom));border-top:1px solid rgba(250,250,247,.12)}

/* Tablet */
@media (max-width:960px){
  .hero{grid-template-columns:minmax(0,1fr) 300px}
  .hero h1{font-size:clamp(2.3rem,5vw,5rem)}
  .proof-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .proof-list div:nth-child(n+4){border-top:1px solid var(--line)}
  .markets{grid-template-columns:minmax(0,1fr)}
  .photo{aspect-ratio:16/10}
}

/* Phone: the QR-code audience */
@media (max-width:640px){
  .hero{grid-template-columns:minmax(0,1fr);gap:8px;padding-top:28px}
  .hero-cta{display:flex;width:100%}
  .hero-vessel{justify-self:start;width:100%;max-width:330px;margin:28px 0 calc(-1 * clamp(48px,6vw,80px) - 1px) -22px}
  .proof-list{grid-template-columns:repeat(2,minmax(0,1fr));border-right:0}
  .proof-list div{padding:20px 16px 20px 0;border-left:0;border-top:1px solid var(--line)}
  .proof-list div:nth-child(even){padding-left:16px;border-left:1px solid var(--line)}
  .proof-list div:nth-child(-n+2){border-top:0}
  .proof-list dd{font-size:2rem}
  .brand-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brand img{width:78%}
  .brand--emblem img{width:66%}
  .brand--portrait img{width:48%}
  .regions div{grid-template-columns:minmax(0,1fr)}
  .regions dt{padding-top:0}
  .marquee{--h:21px;--space:24px}
  .contact-actions{flex-direction:column}
  .contact-actions .button{width:100%}
}