/* =============================================================================
   AdriaGo — Design System
   Single source of truth for tokens, fonts, reset and typographic base.
   Never hardcode colors/spacing outside these tokens.
   ========================================================================== */

/* ----- Self-hosted fonts (woff2 in assets/fonts/, font-display: swap) ------ */
@font-face{font-family:"Satoshi";src:local("Satoshi-Regular"),url("../fonts/Satoshi-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:local("Satoshi-Medium"),url("../fonts/Satoshi-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:local("Satoshi-Bold"),url("../fonts/Satoshi-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:local("Satoshi-Black"),url("../fonts/Satoshi-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:local("Inter-Regular"),url("../fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:local("Inter-Medium"),url("../fonts/Inter-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:local("Inter-SemiBold"),url("../fonts/Inter-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:local("Inter-Bold"),url("../fonts/Inter-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
	/* Primary */
	--adria-orange:#F68B3C; --deep-black:#0B0B0B;
	/* Supporting */
	--soft-sand:#F6F1EA; --warm-gray:#D8D0CB; --charcoal:#242424; --white:#FFFFFF;
	/* States / derived */
	--orange-hover:#E2762A; --orange-tint:#FCEBDD; --orange-glow:rgba(246,139,60,.22);
	--text-on-dark:#F6F1EA; --text-on-dark-strong:#FFFFFF; --text-on-light:#0B0B0B; --text-muted:#6B6760;
	--border:#E4DCD2; --border-dark:rgba(255,255,255,.10);
	--grad-dark:linear-gradient(160deg,#0B0B0B 0%,#242424 100%);
	--grad-glow:radial-gradient(60% 80% at 70% 20%,var(--orange-glow) 0%,transparent 70%);
	--scrim:linear-gradient(180deg,transparent 0%,rgba(11,11,11,0) 35%,rgba(11,11,11,.65) 100%);
	/* Type */
	--font-display:"Satoshi","Space Grotesk",system-ui,sans-serif;
	--font-body:"Inter","Manrope",system-ui,sans-serif;
	--fs-display:clamp(2.5rem,1.6rem + 3.2vw,3.5rem);
	--fs-h2:clamp(1.75rem,1.3rem + 1.6vw,2.25rem);
	--fs-subhead:clamp(1.25rem,1.05rem + .6vw,1.5rem);
	--fs-h3:clamp(1.125rem,1rem + .4vw,1.25rem);
	--fs-body:clamp(.9375rem,.9rem + .2vw,1rem); --fs-small:.875rem; --fs-eyebrow:.75rem;
	--lh-tight:1.05; --lh-snug:1.25; --lh-body:1.6;
	--tracking-display:-.02em; --tracking-eyebrow:.14em;
	/* Spacing / section */
	--sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.5rem;--sp-6:2rem;--sp-7:3rem;--sp-8:4rem;--sp-9:6rem;--sp-10:8rem;
	--section-y:clamp(4rem,3rem + 6vw,8rem);
	/* Radii */
	--r-sm:10px;--r-md:16px;--r-lg:24px;--r-xl:32px;--r-pill:999px;
	/* Shadows (soft only) */
	--shadow-sm:0 1px 2px rgba(11,11,11,.05);--shadow-md:0 10px 30px rgba(11,11,11,.08);
	--shadow-lg:0 28px 64px rgba(11,11,11,.12);--shadow-glow:0 18px 50px var(--orange-glow);
	/* Motion */
	--ease-out-expo:cubic-bezier(.16,1,.3,1);--ease-out-soft:cubic-bezier(.22,.61,.36,1);
	--dur-fast:.25s;--dur-med:.45s;--dur-slow:.8s;
	/* Layout */
	--container:1240px;--container-narrow:820px;--gutter:clamp(1.25rem,1rem + 2vw,2.5rem);
	/* Header height (used for scroll offsets) */
	--header-h:76px;
}

/* ----------------------------- Modern reset ------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:auto}
html:focus-within{scroll-behavior:smooth}
body{min-height:100svh;line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}
ul[role="list"],ol[role="list"]{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
:where(svg){fill:currentColor}

/* --------------------------- Typographic base ----------------------------- */
body{
	font-family:var(--font-body);
	font-size:var(--fs-body);
	color:var(--text-on-light);
	background:var(--soft-sand);
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display);font-weight:700;line-height:var(--lh-snug);letter-spacing:var(--tracking-display)}
h1{font-size:var(--fs-display);line-height:var(--lh-tight)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:var(--lh-snug)}
.eyebrow{
	font-family:var(--font-body);font-weight:600;font-size:var(--fs-eyebrow);
	letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--adria-orange);
}
.subhead{font-size:var(--fs-subhead);line-height:var(--lh-snug);color:var(--text-muted)}
strong,b{font-weight:600}
small{font-size:var(--fs-small)}

/* ------------------------------- Layout ---------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container-narrow{width:100%;max-width:var(--container-narrow);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:var(--sp-8)}

/* ----------------------------- On-dark helpers ---------------------------- */
.on-dark{background:var(--deep-black);color:var(--text-on-dark)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--text-on-dark-strong)}
.on-dark .subhead{color:var(--warm-gray)}
.bg-sand{background:var(--soft-sand)}
.bg-white{background:var(--white)}

/* ------------------------------ Selection --------------------------------- */
::selection{background:var(--adria-orange);color:var(--deep-black)}

/* ---------------------------- Focus visible ------------------------------- */
:focus-visible{outline:2px solid var(--adria-orange);outline-offset:3px;border-radius:4px}
.on-dark :focus-visible{outline-color:var(--adria-orange)}

/* --------------------------- Custom scrollbar ----------------------------- */
@supports (scrollbar-color:auto){html{scrollbar-color:var(--warm-gray) transparent;scrollbar-width:thin}}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--warm-gray);border-radius:var(--r-pill);border:2px solid var(--soft-sand)}
::-webkit-scrollbar-thumb:hover{background:#c3b9b0}

/* --------------------------- Subtle grain util ---------------------------- */
.has-grain{position:relative;isolation:isolate}
.has-grain::after{
	content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.has-glow{position:relative;isolation:isolate}
.has-glow::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--grad-glow)}

/* -------------------- Motion hooks: content must stay visible ------------- */
.js [data-reveal]{opacity:1;will-change:transform,opacity}
.js [data-reveal-lines] .line{display:inline-block;overflow:hidden}

/* --------------------------- Reduced motion ------------------------------- */
@media (prefers-reduced-motion:reduce){
	html:focus-within{scroll-behavior:auto}
	*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
	.js [data-reveal]{opacity:1 !important;transform:none !important}
	[data-parallax]{transform:none !important}
}