/* PHOOLZA design system
Layout concept: editorial ivory pages, one forest-green "origin" band per page,
hairline rules instead of boxes, spec-sheet strips for product facts. */
:root {
/* Colour (brand-defined) */
--green: #033A2A; /* primary PHOOLZA green = logo ink */
--green-2: #173F35; /* secondary forest shade, depth only */
--green-ink: #033A2A;
--green-soft: #E3E7DD; /* green tinted into ivory, for quiet fills */
--ivory: #F7F2E8;
--ivory-deep: #EEE6D6; /* alternate section ground */
--charcoal: #202421;
--muted: #535A54; /* secondary text, green-biased grey, 6.6:1 on ivory */
--brass: #B08D57; /* rules, marks only. never body text */
--terra: #A6533B;
--white: #FFFFFF;
--line: rgba(3, 58, 42, .16);
--line-strong: rgba(3, 58, 42, .32);
--on-green: #F7F2E8;
--on-green-muted: #C9D2C8;
/* Type */
--font-display: "Manrope", "Avenir Next", "Segoe UI", system-ui, sans-serif;
--font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
--step--1: .8125rem;
--step-0: 1.0625rem;
--step-1: 1.25rem;
--step-2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
--step-3: clamp(2rem, 1.5rem + 2.2vw, 3rem);
--step-4: clamp(2.6rem, 1.6rem + 4.6vw, 5.25rem);
/* Space (8pt base) */
--s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem; --s6: 4.5rem; --s7: 7rem;
--gutter: clamp(1.25rem, 4vw, 3rem);
--max: 76rem;
--measure: 38rem;
--radius: 2px;
--ease: cubic-bezier(.2, .7, .2, 1);
color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--ivory);
color: var(--charcoal);
font-family: var(--font-body);
font-size: var(--step-0);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--green); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--terra); }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }
::selection { background: var(--green); color: var(--ivory); }
.skip { position: absolute; left: -999px; top: 0; background: var(--green); color: var(--ivory); padding: .75rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }
/* ---------- Typography ---------- */
h1, h2, h3, .display { font-family: var(--font-display); color: var(--green); margin: 0; text-wrap: balance; }
h1 { font-size: var(--step-4); font-weight: 600; line-height: 1.02; letter-spacing: -.025em; }
h2 { font-size: var(--step-3); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; }
h3 { font-size: var(--step-1); font-weight: 700; line-height: 1.3; letter-spacing: -.005em; }
p { margin: 0; max-width: var(--measure); }
.lead { font-size: var(--step-1); line-height: 1.55; color: var(--charcoal); }
.muted { color: var(--muted); }
.eyebrow {
font-family: var(--font-display);
font-size: var(--step--1);
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--green);
display: inline-flex; align-items: center; gap: .75rem;
}
.eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: var(--brass); }
.stack > * + * { margin-top: var(--s3); }
.stack-sm > * + * { margin-top: var(--s2); }
/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s7); }
.section--tight { padding-block: var(--s6); }
.section--deep { background: var(--ivory-deep); }
.section--green { background: var(--green); color: var(--on-green); }
.section--green h1, .section--green h2, .section--green h3 { color: var(--ivory); }
.section--green .eyebrow { color: var(--on-green); }
.section--green .muted { color: var(--on-green-muted); }
.section--green a:not(.btn) { color: var(--ivory); }
.split { display: grid; gap: var(--s5); align-items: center; }
.split > * { min-width: 0; }
@media (min-width: 900px) {
.split { grid-template-columns: 1fr 1fr; gap: var(--s6); }
.split--wide-left { grid-template-columns: 7fr 5fr; }
.split--wide-right { grid-template-columns: 5fr 7fr; }
.split--top { align-items: start; }
}
.section-head { display: grid; gap: var(--s3); margin-bottom: var(--s6); }
@media (min-width: 900px) { .section-head--row { grid-template-columns: 5fr 6fr; align-items: end; gap: var(--s6); } }
/* ---------- Buttons ---------- */
.btn {
--bg: var(--green); --fg: var(--ivory); --bd: var(--green);
display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
min-height: 3rem; padding: .8rem 1.5rem;
font-family: var(--font-display); font-size: .875rem; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
background: var(--bg); color: var(--fg); border: 1px solid var(--bd); border-radius: var(--radius);
cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { --bg: var(--green-ink); --bd: var(--green-ink); color: var(--fg); }
.btn--ghost { --bg: transparent; --fg: var(--green); --bd: var(--line-strong); }
.btn--ghost:hover { --bg: var(--green); --fg: var(--ivory); --bd: var(--green); }
.btn--light { --bg: var(--ivory); --fg: var(--green); --bd: var(--ivory); }
.btn--light:hover { --bg: var(--white); --bd: var(--white); --fg: var(--green); }
.btn--ghost-light { --bg: transparent; --fg: var(--ivory); --bd: rgba(247,242,232,.45); }
.btn--ghost-light:hover { --bg: var(--ivory); --fg: var(--green); --bd: var(--ivory); }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.textlink { font-family: var(--font-display); font-weight: 700; font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--brass); padding-bottom: .2rem; }
/* ---------- Header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(247, 242, 232, .94); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 4.5rem; }
.wordmark { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: .22em; color: var(--green); text-decoration: none; display: inline-flex; align-items: flex-start; }
.wordmark sup { font-size: .5em; letter-spacing: 0; margin-left: .15em; font-weight: 600; line-height: 1; top: 0; }
.wordmark:hover { color: var(--green); }
.nav { display: none; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(1rem, 2vw, 2rem); }
.nav a { font-size: .9375rem; color: var(--charcoal); text-decoration: none; padding-block: .5rem; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--green); border-bottom-color: var(--brass); }
.header-cta { display: none; }
.menu-toggle { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: 0 .25rem; background: none; border: 0; font: 700 .8125rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--green); cursor: pointer; }
.menu-toggle .bars { width: 1.25rem; height: .7rem; position: relative; }
.menu-toggle .bars::before, .menu-toggle .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease); }
.menu-toggle .bars::before { top: 0; } .menu-toggle .bars::after { top: calc(100% - 1.5px); }
.menu-toggle[aria-expanded="true"] .bars::before { top: 50%; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars::after { top: 50%; transform: rotate(-45deg); }
.mobile-nav { border-top: 1px solid var(--line); background: var(--ivory); }
.mobile-nav ul { list-style: none; margin: 0; padding: var(--s2) var(--gutter) var(--s4); }
.mobile-nav li a { display: block; padding: .9rem 0; font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; color: var(--green); text-decoration: none; border-bottom: 1px solid var(--line); }
.mobile-nav .btn { margin-top: var(--s3); width: 100%; }
@media (min-width: 1080px) {
.nav, .header-cta { display: block; }
.menu-toggle, .mobile-nav { display: none !important; }
}
/* ---------- Hero ---------- */
.hero { padding-block: var(--s5) var(--s6); }
.hero-grid { display: grid; gap: var(--s5); align-items: center; }
.hero-grid > * { min-width: 0; }
@media (min-width: 900px) { .hero { padding-block: var(--s6) var(--s7); } .hero-grid { grid-template-columns: 6fr 5fr; gap: var(--s6); } }
.hero h1 { margin-top: var(--s3); }
.hero .sub { font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; color: var(--terra); letter-spacing: -.01em; line-height: 1.2; }
.hero-figure { position: relative; margin: 0; }
.photo { position: relative; overflow: hidden; background: var(--ivory-deep); border-radius: var(--radius); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--hero { aspect-ratio: 4 / 5; max-width: 100%; }
.photo--wide { aspect-ratio: 16 / 10; }
.photo--square { aspect-ratio: 1; }
/* Spec strip: the product's identity as a trade spec line */
.spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.spec div { padding: .9rem 0; }
.spec div + div { padding-left: 1rem; border-left: 1px solid var(--line); }
.spec div:nth-child(3) { padding-left: 0; border-left: 0; }
.spec div:nth-child(n+3) { border-top: 1px solid var(--line); }
.spec dt { font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.spec dd { margin: .2rem 0 0; font-family: var(--font-display); font-weight: 700; color: var(--green); font-size: 1rem; }
@media (min-width: 640px) {
.spec { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.spec div:nth-child(3) { padding-left: 1rem; border-left: 1px solid var(--line); }
.spec div:nth-child(n+3) { border-top: 0; }
}
.section--green .spec { border-color: rgba(247,242,232,.35); }
.section--green .spec div { border-color: rgba(247,242,232,.18); }
.section--green .spec dt { color: var(--on-green-muted); }
.section--green .spec dd { color: var(--ivory); }
/* ---------- Pouch (CSS mockup, uses real brand type) ---------- */
.pouch-stage { background: var(--ivory-deep); padding: clamp(2rem, 6vw, 4.5rem) var(--s3); display: grid; place-items: center; border-radius: var(--radius); }
.pouch {
width: min(100%, 17.5rem); aspect-ratio: 7 / 10; position: relative;
background: linear-gradient(100deg, #F3EDE1 0%, #FBF8F2 38%, #F5EFE3 62%, #EDE5D5 100%);
border-radius: 10px 10px 4px 4px;
box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 30px 40px -24px rgba(32,36,33,.35), 0 10px 18px -12px rgba(32,36,33,.25);
display: flex; flex-direction: column; overflow: hidden;
}
.pouch::before { content: ""; position: absolute; inset: 0 0 auto; height: 7%; background: repeating-linear-gradient(90deg, rgba(3,58,42,.08) 0 2px, transparent 2px 5px); }
.pouch__band { margin-top: 13%; background: var(--green); color: var(--ivory); text-align: center; padding: 1.1rem .75rem 1rem; }
.pouch__mark { font-family: var(--font-display); font-weight: 800; letter-spacing: .26em; font-size: 1.15rem; padding-left: .26em; }
.pouch__mark sup { font-size: .45em; letter-spacing: 0; font-weight: 600; }
.pouch__tag { font-size: .5rem; letter-spacing: .24em; text-transform: uppercase; margin-top: .35rem; color: var(--on-green-muted); }
.pouch__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: .75rem 1rem 1.25rem; gap: .55rem; }
.pouch__name { font-family: var(--font-display); font-weight: 700; color: var(--green); font-size: 1.15rem; line-height: 1.15; }
.pouch__rule { width: 2.25rem; height: 1px; background: var(--brass); }
.pouch__grade { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--green); letter-spacing: .02em; line-height: 1; }
.pouch__meta { font-size: .5625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); line-height: 1.8; }
.pouch__dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--terra); }
.pouch-caption { margin-top: var(--s2); font-size: var(--step--1); color: var(--muted); text-align: center; }
/* ---------- Pillars (hairline, not boxed) ---------- */
.pillars { display: grid; gap: var(--s4) var(--s5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .pillars--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pillar { border-top: 1px solid var(--line-strong); padding-top: var(--s3); display: grid; gap: .6rem; align-content: start; }
.pillar h3 { font-size: .875rem; letter-spacing: .16em; text-transform: uppercase; }
.pillar p { color: var(--muted); }
.section--green .pillar { border-top-color: rgba(247,242,232,.3); }
.section--green .pillar p { color: var(--on-green-muted); }
.pillar .mark { width: 1.75rem; height: 1.75rem; color: var(--brass); }
/* Definition rows: label left, content right */
.rows { border-top: 1px solid var(--line-strong); }
.row { display: grid; gap: var(--s2); padding-block: var(--s4); border-bottom: 1px solid var(--line); }
.row > * { min-width: 0; }
@media (min-width: 900px) { .row { grid-template-columns: 4fr 8fr; gap: var(--s5); } }
.row h2, .row h3 { font-size: var(--step-1); }
.row .row__label { display: grid; gap: .5rem; align-content: start; }
/* Status pills: honest about what's confirmed */
.status { display: inline-flex; align-items: center; gap: .45rem; width: fit-content; font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: .3rem .6rem; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--green); background: var(--white); }
.status::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--green); }
.status--pending { color: var(--terra); border-color: rgba(166,83,59,.4); background: transparent; }
.status--pending::before { background: transparent; border: 1.5px solid var(--terra); }
/* Regions table (vision) */
.ledger { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.ledger th, .ledger td { text-align: left; padding: .95rem 1rem .95rem 0; border-bottom: 1px solid rgba(247,242,232,.2); vertical-align: top; }
.ledger th { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--on-green-muted); }
.ledger td:first-child { font-family: var(--font-display); font-weight: 700; color: var(--ivory); }
.ledger .later td { color: var(--on-green-muted); font-weight: 400; }
.ledger .later td:first-child { color: var(--on-green-muted); font-weight: 500; }
.table-scroll { overflow-x: auto; }
/* Process steps (a real sequence, so numbered) */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3rem 1fr; gap: var(--s2); padding-block: var(--s3); border-bottom: 1px solid var(--line); }
.steps li > div { min-width: 0; }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-weight: 700; color: var(--brass); font-size: .9375rem; padding-top: .15rem; }
.steps h3 { font-size: 1.0625rem; }
.steps p { color: var(--muted); margin-top: .3rem; }
.section--green .steps { border-top-color: rgba(247,242,232,.3); }
.section--green .steps li { border-bottom-color: rgba(247,242,232,.18); }
.section--green .steps p { color: var(--on-green-muted); }
/* Partner types */
.types { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line); }
.types li { padding: 1.25rem 1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight: 600; color: var(--green); font-size: 1rem; line-height: 1.3; min-width: 0; }
@media (min-width: 900px) { .types { grid-template-columns: repeat(4, minmax(0, 1fr)); } .types li { padding: 1.75rem 1.25rem; } }
/* Breadcrumbs */
.crumbs { font-size: var(--step--1); color: var(--muted); padding-top: var(--s3); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--brass); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--green); }
/* Page hero (inner pages) */
.page-hero { padding-block: var(--s4) var(--s6); }
.page-hero h1 { margin-top: var(--s3); max-width: 15ch; }
.page-hero .lead { margin-top: var(--s3); }
/* CTA band */
.cta-band { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .cta-band { grid-template-columns: 1fr auto; align-items: end; } }
/* FAQ */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 1.25rem 2.5rem 1.25rem 0; position: relative; font-family: var(--font-display); font-weight: 700; color: var(--green); font-size: 1.0625rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: 1.05rem; font-size: 1.4rem; font-weight: 400; color: var(--brass); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-bottom: 1.5rem; color: var(--muted); }
.faq { border-top: 1px solid var(--line-strong); }
/* ---------- Forms ---------- */
.form { display: grid; gap: var(--s3); }
.form-grid { display: grid; gap: var(--s3); }
@media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .field--full { grid-column: 1 / -1; } }
.field { display: grid; gap: .45rem; min-width: 0; }
.field label { font-size: .8125rem; font-weight: 600; letter-spacing: .04em; color: var(--green); }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
width: 100%; font: inherit; font-size: 1rem; color: var(--charcoal);
background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--radius);
padding: .85rem .9rem; min-height: 3rem; transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--green) 50%), linear-gradient(135deg, var(--green) 50%, transparent 50%); background-position: calc(100% - 1.15rem) 1.3rem, calc(100% - .8rem) 1.3rem; background-size: .35rem .35rem; background-repeat: no-repeat; padding-right: 2.5rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(3,58,42,.14); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--terra); }
.field .err { font-size: .8125rem; color: var(--terra); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: var(--step--1); color: var(--muted); }
.form-status { padding: 1rem 1.25rem; border-left: 2px solid var(--green); background: var(--green-soft); font-size: .9375rem; }
.form-status--warn { border-left-color: var(--terra); background: #F4E7DF; }
.form-panel { background: var(--white); padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--radius); border: 1px solid var(--line); }
/* Email block */
.email-line { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.email-line .addr { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); color: var(--green); letter-spacing: -.01em; user-select: all; word-break: break-all; }
.copy-btn { background: none; border: 1px solid var(--line-strong); border-radius: 999px; padding: .35rem .85rem; font: 600 .75rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--green); cursor: pointer; min-height: 2.25rem; }
.copy-btn:hover { background: var(--green); color: var(--ivory); border-color: var(--green); }
/* ---------- Footer ---------- */
.site-footer { background: var(--green-ink); color: var(--on-green-muted); padding-block: var(--s6) var(--s4); font-size: .9375rem; }
.site-footer a { color: var(--ivory); text-decoration: none; }
.site-footer a:hover { color: var(--brass); }
.footer-grid { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 5fr 3fr 4fr; } }
.site-footer .wordmark { color: var(--ivory); font-size: 1.5rem; }
.footer-tag { margin-top: var(--s2); font-family: var(--font-display); color: var(--ivory); font-weight: 600; font-size: 1.0625rem; line-height: 1.4; }
.footer-tag span { display: block; color: var(--on-green-muted); font-weight: 500; }
.footer-h { font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--brass); margin-bottom: var(--s2); }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-base { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid rgba(247,242,232,.14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); font-size: var(--step--1); }
/* ---------- Motion: visible at rest, gentle lift when JS runs ---------- */
@keyframes rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.reveal { animation: rise .9s var(--ease) both; }
.reveal-2 { animation: rise .9s .12s var(--ease) both; }
.reveal-3 { animation: rise .9s .24s var(--ease) both; }
.photo img { transition: transform 1.2s var(--ease); }
.photo:hover img { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal, .reveal-2, .reveal-3 { animation: none; }
.photo img, .btn, .btn .arrow { transition: none; }
}
/* Utilities */
.mt-1 { margin-top: var(--s2); } .mt-2 { margin-top: var(--s3); } .mt-3 { margin-top: var(--s4); } .mt-4 { margin-top: var(--s5); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rows--plain .row { grid-template-columns: 1fr; gap: .4rem; padding-block: var(--s3); }
.section--green .lead { color: var(--ivory); }
.sub-h { font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; color: var(--terra); letter-spacing: -.01em; line-height: 1.25; max-width: 22ch; }
.pouch-stage { margin: 0; }
.section { padding-block: clamp(4rem, 3rem + 5vw, 7rem); }
.section--tight { padding-block: clamp(3.5rem, 2.5rem + 3vw, 4.5rem); }
/* ---------- Refinement pass ---------- */
/* Photo slots: same frame whether it holds a real photo or a labelled fallback */
.slot { margin: 0; display: grid; gap: .6rem; min-width: 0; }
.slot .photo, .slot .pouch-stage { width: 100%; max-width: 100%; }
.slot .photo img, .slot .photo picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.slot .pouch-stage { padding: clamp(1.5rem, 5vw, 3rem); }
.slot .pouch { width: auto; height: 100%; max-height: 100%; max-width: 100%; }
.slot-cap { font-size: var(--step--1); color: var(--muted); }
.section--green .slot-cap { color: var(--on-green-muted); }
.pouch-caption { display: none; }
/* Back-of-pack mock-up */
.pouch--back { background: linear-gradient(100deg, #F3EDE1 0%, #FBF8F2 40%, #F1EADC 100%); }
.pback__band { margin-top: 13%; padding: .7rem 1rem; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); font: 800 .8rem var(--font-display); letter-spacing: .26em; color: var(--green); text-align: center; }
.pback__band sup { font-size: .5em; letter-spacing: 0; }
.pback__body { padding: .9rem 1.1rem; display: grid; gap: .5rem; align-content: start; flex: 1; }
.pback__intro { font-size: .6rem; line-height: 1.5; color: var(--charcoal); max-width: none; }
.pback__row { display: grid; gap: .25rem; }
.pback__row span { font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--green); }
.pback__row i { height: .3rem; border-radius: 1px; background: repeating-linear-gradient(90deg, rgba(3,58,42,.14) 0 70%, transparent 70% 100%); }
.pback__foot { margin-top: auto; font-size: .5rem; letter-spacing: .1em; color: var(--muted); }
/* Gallery */
.gallery { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
/* Pending value inside a spec strip */
.spec .pending { color: var(--terra); font-weight: 600; }
.section--green .spec .pending { color: #E6B9A6; }
/* Status summary + legend */
.ledger-note { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; font-size: .875rem; max-width: none; }
.legend { margin: 0; display: grid; gap: .6rem; }
.legend div { display: grid; grid-template-columns: 10.5rem 1fr; gap: .75rem; align-items: center; }
.legend dt, .legend dd { margin: 0; min-width: 0; }
.legend dd { font-size: .9375rem; color: var(--muted); }
@media (max-width: 480px) { .legend div { grid-template-columns: 1fr; gap: .3rem; } }
/* Partner types with a line of detail */
.types li span { display: block; margin-top: .4rem; font-family: var(--font-body); font-weight: 400; font-size: .875rem; color: var(--muted); line-height: 1.45; }
@media (max-width: 420px) { .types { grid-template-columns: 1fr; } }
.gallery .photo, .gallery .pouch-stage { aspect-ratio: 4 / 5 !important; }
/* ---------- Phase 2: grade portfolio + contact ---------- */
.ico { width: 1.1em; height: 1.1em; flex: none; }
.btn--sm { min-height: 2.6rem; padding: .6rem 1rem; font-size: .75rem; letter-spacing: .08em; }
.textlink--sm { font-size: .75rem; }
/* Range: three size families; columns on desktop, stacked groups below */
.grade-range { display: grid; gap: var(--s5); }
@media (min-width: 1024px) { .grade-range { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); align-items: start; } }
.grade-family { display: grid; gap: var(--s2); min-width: 0; }
.grade-family__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line-strong); }
.grade-family__head h3 { font-size: var(--step-2); font-weight: 600; letter-spacing: -.01em; }
.grade-family__head span { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.grade-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
@media (min-width: 640px) and (max-width: 1023px) { .grade-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grade-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.25rem 1.1rem; display: grid; gap: .35rem; min-width: 0; transition: border-color .25s var(--ease); }
.grade-card:hover { border-color: var(--line-strong); }
.grade-card__name { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; color: var(--green); letter-spacing: -.005em; line-height: 1.25; }
.grade-card__meta { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.grade-card__desc { font-size: .9375rem; color: var(--muted); }
.grade-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: .75rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.grade-note { margin-top: var(--s4); font-size: var(--step--1); color: var(--muted); max-width: none; }
.grade-range + .grade-note + .slot { margin-top: var(--s5); }
/* Home preview: names only, no cards */
.grade-preview { display: grid; gap: var(--s4); grid-template-columns: 1fr; border-top: 1px solid var(--line-strong); padding-top: var(--s3); }
@media (min-width: 640px) { .grade-preview { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grade-preview h3 { font-size: .875rem; letter-spacing: .16em; text-transform: uppercase; }
.grade-preview ul { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .4rem; }
.grade-preview li { font-family: var(--font-display); font-weight: 600; color: var(--charcoal); font-size: 1.0625rem; }
/* Contact list */
.contact-list { margin: 0; display: grid; border-top: 1px solid var(--line-strong); }
.contact-list div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; align-items: center; padding-block: .9rem; border-bottom: 1px solid var(--line); }
.contact-list dt { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.contact-list dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; min-width: 0; }
.addr-sm { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: var(--green); text-decoration: none; word-break: break-word; user-select: all; }
a.addr-sm:hover { color: var(--terra); }
@media (max-width: 400px) { .contact-list div { grid-template-columns: 1fr; gap: .25rem; } }
/* Floating WhatsApp: quiet, brand-coloured, clear of the safe area */
.wa-float {
position: fixed; z-index: 40;
right: max(1rem, env(safe-area-inset-right, 0px));
bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
display: inline-flex; align-items: center; gap: .5rem;
min-height: 3rem; padding: 0 1.1rem 0 1rem;
background: var(--green); color: var(--ivory); text-decoration: none;
border: 1px solid rgba(247,242,232,.25); border-radius: 999px;
font: 700 .75rem var(--font-display); letter-spacing: .12em; text-transform: uppercase;
box-shadow: 0 10px 24px -12px rgba(3,58,42,.55);
transition: background .25s var(--ease), transform .25s var(--ease);
}
.wa-float .ico { width: 1.25rem; height: 1.25rem; }
.wa-float:hover { background: var(--green-ink); color: var(--ivory); transform: translateY(-2px); }
@media (max-width: 639px) {
.wa-float { width: 3rem; padding: 0; justify-content: center; }
.wa-float span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.site-footer { padding-bottom: calc(var(--s4) + 4rem); }
}
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } .wa-float:hover { transform: none; } }
.site-footer .sep { color: var(--brass); margin-inline: .35rem; }
.stack > .contact-list { margin-top: var(--s4); }
/* =====================================================================
v3 — VISUAL EXPERIENCE
Contrast through rhythm: ivory → white → deep ivory → full-bleed dark image →
ivory → charcoal → deep ivory → green → ivory. Green is used twice, charcoal once.
===================================================================== */
:root {
--charcoal-2: #2A2F2B;
--on-dark-muted: #B9BFB8;
--shadow-1: 0 1px 2px rgba(32,36,33,.06), 0 8px 24px -12px rgba(32,36,33,.18);
--shadow-2: 0 2px 4px rgba(32,36,33,.06), 0 24px 48px -20px rgba(32,36,33,.32);
--step-5: clamp(3.1rem, 1.6rem + 6.2vw, 7rem);
--step-xl: clamp(2.2rem, 1.5rem + 3vw, 4rem);
}
/* Tactile grain over the whole page, very faint */
body::after {
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .05; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
}
/* Type */
.h-xl { font-size: var(--step-xl); font-weight: 600; letter-spacing: -.028em; line-height: 1.02; }
.h-xxl { font-size: clamp(2.6rem, 1.4rem + 5.4vw, 6.25rem); font-weight: 600; letter-spacing: -.035em; line-height: .98; }
.lead-sm { font-size: 1.125rem; line-height: 1.6; color: var(--muted); max-width: 34rem; }
.eyebrow--light { color: var(--ivory) !important; }
.section--charcoal { background: var(--charcoal); color: var(--ivory); }
.section--charcoal h2, .section--charcoal h3 { color: var(--ivory); }
.section--charcoal .lead-sm, .section--green .lead-sm { color: var(--on-green-muted); }
/* Icons */
.ico--md { width: 1.5rem; height: 1.5rem; }
.ico--lg { width: 2rem; height: 2rem; }
.ico--xl { width: 3rem; height: 3rem; }
.btn .ico { width: 1.1rem; height: 1.1rem; }
.btn--lg { min-height: 3.5rem; padding: 1rem 1.75rem; }
/* ---------- Header: elevated, compacts on scroll ---------- */
.header-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 5rem; transition: min-height .35s var(--ease); }
.site-header .wrap.header-bar { min-height: 5rem; }
.site-header.is-scrolled .wrap.header-bar { min-height: 3.75rem; }
.site-header.is-scrolled { box-shadow: 0 10px 30px -22px rgba(32,36,33,.45); background: rgba(247,242,232,.97); }
.wordmark { transition: font-size .35s var(--ease); }
.site-header.is-scrolled .wordmark { font-size: 1.1rem; }
.header-actions { display: flex; align-items: center; gap: .75rem; }
.header-wa { display: none; }
@media (min-width: 640px) { .header-wa { display: inline-flex; } }
@media (min-width: 1080px) { .header-cta { display: none; } }
.nav a { font-family: var(--font-display); font-weight: 600; font-size: .9375rem; letter-spacing: -.005em; }
/* Mobile menu: full-height sheet with big type and direct contact */
.mobile-nav { position: fixed; inset: 0; top: calc(env(safe-area-inset-top, 0px) + 3.75rem); background: var(--ivory); overflow-y: auto; display: flex; flex-direction: column; justify-content: space-between; padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.site-header:not(.is-scrolled) .mobile-nav { top: calc(env(safe-area-inset-top, 0px) + 5rem); }
.mobile-nav ul { padding: var(--s3) var(--gutter) 0; }
.mobile-nav li a { font-size: clamp(1.75rem, 1.2rem + 3vw, 2.5rem); letter-spacing: -.02em; padding: .7rem 0; }
.mobile-nav li a[aria-current="page"] { color: var(--terra); }
.mobile-nav__contact { display: grid; gap: .25rem; padding: var(--s4) var(--gutter) 0; }
.mobile-nav__contact a { display: inline-flex; align-items: center; gap: .75rem; padding: .6rem 0; color: var(--charcoal); text-decoration: none; font-weight: 500; }
.mobile-nav__contact .ico { color: var(--green); }
@media (prefers-reduced-motion: no-preference) {
.mobile-nav:not([hidden]) { animation: sheet .35s var(--ease); }
@keyframes sheet { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
}
/* ---------- 1. Hero ---------- */
.hero2 { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(4rem, 3rem + 4vw, 7rem); overflow: hidden; }
.hero2__grid { display: grid; gap: var(--s5); align-items: center; }
.hero2__grid > * { min-width: 0; }
@media (min-width: 960px) { .hero2__grid { grid-template-columns: 1.05fr 1fr; gap: var(--s5); } }
.hero2__title { font-size: var(--step-5); font-weight: 700; letter-spacing: -.045em; line-height: .9; margin-top: var(--s3); }
.hero2__title .ln { display: block; }
.hero2__title .ln:nth-child(3) { color: var(--terra); }
.hero2__lead { font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; letter-spacing: -.015em; line-height: 1.25; color: var(--charcoal); margin-block: var(--s4); max-width: 20ch; }
.hero2__media { position: relative; padding: 0 0 1.5rem 1.5rem; }
.hero2__frame { position: absolute; inset: 1.5rem 1.5rem 0 0; border: 1px solid var(--brass); border-radius: var(--radius); }
.hero2__media .slot { position: relative; }
.hero2__media .photo { box-shadow: var(--shadow-2); }
.hero2__media .slot-cap { display: none; }
.hero2__tag { position: absolute; left: 0; bottom: 0; display: flex; gap: 0; background: var(--ivory); box-shadow: var(--shadow-1); font: 700 .6875rem var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--green); max-width: none; }
.hero2__tag span { padding: .8rem 1.1rem; }
.hero2__tag span + span { border-left: 1px solid var(--line); color: var(--terra); }
.is-placeholder .photo::after { content: "Illustration"; position: absolute; top: .75rem; right: .75rem; font: 600 .625rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: rgba(247,242,232,.75); background: rgba(32,36,33,.45); padding: .3rem .55rem; border-radius: 2px; }
.is-placeholder .photo--diagram::after { content: none; }
@media (min-width: 960px) { .hero2__media { margin-right: calc(-1 * min(var(--gutter), 3rem)); } }
/* Load sequence: ends visible; plays once */
@media (prefers-reduced-motion: no-preference) {
.load-1, .load-2, .load-3, .load-4 { animation: rise .9s var(--ease) both; }
.load-2 { animation-delay: .1s; } .load-3 { animation-delay: .2s; } .load-4 { animation-delay: .35s; }
.load-media .photo img { animation: settle 1.6s var(--ease) both; }
.load-media .hero2__frame { animation: rise 1.2s .3s var(--ease) both; }
@keyframes settle { from { transform: scale(1.08); opacity: .3; } to { transform: none; opacity: 1; } }
}
/* ---------- 2. Product reveal ---------- */
.reveal-sec { position: relative; background: var(--white); padding-block: clamp(4rem, 3rem + 5vw, 8rem); overflow: hidden; }
.giant { position: absolute; left: 50%; top: clamp(1rem, 4vw, 3rem); transform: translateX(-50%); font: 800 clamp(5rem, 2rem + 16vw, 17rem) / .8 var(--font-display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(3,58,42,.13); white-space: nowrap; pointer-events: none; user-select: none; }
.reveal-sec__grid { position: relative; display: grid; gap: var(--s5); align-items: center; }
.reveal-sec__grid > * { min-width: 0; }
@media (min-width: 960px) { .reveal-sec__grid { grid-template-columns: 5fr 6fr; gap: var(--s6); } .reveal-sec__copy { padding-top: var(--s6); } }
.reveal-sec__copy { display: grid; gap: var(--s3); }
.reveal-sec__media .photo { box-shadow: var(--shadow-2); }
.reveal-sec__media .slot-cap { display: none; }
.facts { list-style: none; margin: var(--s2) 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.facts li { display: grid; gap: .3rem; padding: 1.1rem 1rem 1.1rem 0; min-width: 0; }
.facts li + li { padding-left: 1rem; border-left: 1px solid var(--line); }
.facts .ico { color: var(--brass); margin-bottom: .35rem; }
.facts__k { font-size: .625rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.facts__v { font-family: var(--font-display); font-weight: 700; color: var(--green); font-size: 1rem; line-height: 1.25; }
@media (max-width: 420px) { .facts { grid-template-columns: 1fr; } .facts li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } .facts li { grid-template-columns: auto 1fr; align-items: center; column-gap: .75rem; } .facts .ico { grid-row: span 2; margin: 0; } }
/* ---------- 3. Stages ---------- */
.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); position: relative; counter-reset: st; }
@media (min-width: 768px) { .stages { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.stages::before { content: ""; position: absolute; top: 2.25rem; left: 2.25rem; right: 12%; height: 1px; background: var(--brass); opacity: .6; } }
.stage { position: relative; display: grid; gap: .6rem; align-content: start; min-width: 0; counter-increment: st; }
.stage__icon { position: relative; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--ivory); border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--green); transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); }
.stage:hover .stage__icon { background: var(--green); color: var(--ivory); transform: translateY(-3px); }
.stage h3 { font-size: 1.25rem; margin-top: .4rem; }
.stage h3::before { content: counter(st, decimal-leading-zero); display: block; font: 700 .75rem var(--font-display); color: var(--brass); letter-spacing: .12em; margin-bottom: .35rem; }
.stage p { color: var(--muted); font-size: .9375rem; }
.stage:last-child .stage__icon { background: var(--green); color: var(--ivory); border-color: var(--green); }
/* ---------- 4. Full-bleed origin band ---------- */
.band { position: relative; min-height: clamp(32rem, 52vw, 46rem); display: grid; align-items: end; overflow: hidden; color: var(--ivory); background: #142E27; }
.band__media { position: absolute; inset: 0; }
.band__media .slot, .band__media .photo { height: 100%; }
.band__media .photo { aspect-ratio: auto !important; border-radius: 0; }
.band__media .photo img { width: 100%; height: 100%; object-fit: cover; }
.band__media .slot-cap { display: none; }
.band::after { content: ""; position: absolute; inset: 0; background: rgba(15,30,26,.35); pointer-events: none; }
.band__copy { position: relative; z-index: 1; padding-block: var(--s6); display: grid; gap: var(--s3); justify-items: start; }
.band__copy h2 { color: var(--ivory); max-width: 12ch; }
.band__lead { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; color: var(--ivory); max-width: 34rem; line-height: 1.45; }
.band--page .band__lead { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 400; color: #E4E8E0; }
/* ---------- 5. Standard tiles ---------- */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { position: relative; display: grid; align-content: start; gap: .9rem; min-height: 19rem; padding: clamp(1.5rem, 3vw, 2.25rem); border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); background: var(--ivory); overflow: hidden; transition: background .45s var(--ease), color .45s var(--ease); outline-offset: -3px; min-width: 0; }
.tile__icon { color: var(--brass); transition: transform .45s var(--ease), color .45s var(--ease); }
.tile__title { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); font-weight: 600; letter-spacing: -.02em; margin-top: auto; transition: color .45s var(--ease); }
.tile__copy { color: var(--muted); transition: color .45s var(--ease), opacity .45s var(--ease), transform .45s var(--ease); }
.tile::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease); pointer-events: none;
background-image: url("data:image/svg+xml;utf8,"); }
.tile > * { position: relative; }
@media (hover: hover) {
.tile { grid-template-rows: auto 1fr auto auto; }
.tile__copy { opacity: 0; transform: translateY(10px); }
.tile:hover, .tile:focus-visible, .tile:focus-within { background: var(--green); }
.tile:hover::before, .tile:focus-visible::before { opacity: 1; }
.tile:hover .tile__title, .tile:focus-visible .tile__title { color: var(--ivory); }
.tile:hover .tile__copy, .tile:focus-visible .tile__copy { opacity: 1; transform: none; color: var(--on-green-muted); }
.tile:hover .tile__icon, .tile:focus-visible .tile__icon { transform: translateY(-4px) scale(1.06); color: var(--ivory); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.tile:hover .tile__icon .ico, .tile:focus-visible .tile__icon .ico { stroke-dasharray: 80; animation: draw 1s var(--ease) both; }
@keyframes draw { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }
}
/* ---------- 6. Grade selector ---------- */
.grades { display: grid; gap: var(--s4); }
.gtabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(247,242,232,.2); border-bottom: 1px solid rgba(247,242,232,.2); }
.gtab { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: end; column-gap: .75rem; padding: 1.25rem .5rem 1.25rem 0; background: none; border: 0; color: var(--on-dark-muted); text-align: left; cursor: pointer; font: inherit; min-width: 0; }
.gtab + .gtab { padding-left: clamp(.75rem, 3vw, 2rem); border-left: 1px solid rgba(247,242,232,.12); }
.gtab__num { grid-row: span 2; font: 800 clamp(3.5rem, 2rem + 7vw, 8rem) / .82 var(--font-display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.2px rgba(247,242,232,.45); transition: color .4s var(--ease), -webkit-text-stroke-color .4s var(--ease); }
.gtab__lbl { font: 700 clamp(.9rem, .7rem + .8vw, 1.25rem) var(--font-display); color: var(--ivory); letter-spacing: -.01em; }
.gtab__cnt { font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.gtab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.gtab + .gtab::after { left: clamp(.75rem, 3vw, 2rem); }
.gtab[aria-selected="true"] .gtab__num, .gtab:hover .gtab__num { color: var(--ivory); -webkit-text-stroke-color: var(--ivory); }
.gtab[aria-selected="true"]::after { transform: scaleX(1); }
.gtab:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
@media (max-width: 480px) { .gtab { grid-template-columns: 1fr; } .gtab__num { grid-row: auto; } .gtab__lbl { margin-top: .4rem; } }
.gpanel:focus-visible { outline: 2px solid var(--brass); outline-offset: 6px; }
.gcards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .gcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gcard { position: relative; display: grid; gap: .6rem; align-content: start; padding: clamp(1.5rem, 3vw, 2rem); background: var(--charcoal-2); border: 1px solid rgba(247,242,232,.12); border-radius: var(--radius); min-width: 0; transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
.gcard:hover { transform: translateY(-4px); border-color: rgba(176,141,87,.6); box-shadow: 0 30px 50px -30px rgba(0,0,0,.7); }
.gcard__fam { font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--brass); }
.gcard__name { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; color: var(--ivory); }
.gcard__meta { display: inline-flex; align-items: center; gap: .45rem; font-size: .8125rem; color: var(--on-dark-muted); }
.gcard__meta .ico { width: 1rem; height: 1rem; color: var(--brass); }
.gcard__desc { font-size: .9375rem; color: var(--on-dark-muted); padding-bottom: .5rem; border-bottom: 1px solid rgba(247,242,232,.12); }
.gcard .btn { justify-self: start; margin-top: .5rem; }
.grade-note--dark { color: var(--on-dark-muted); margin-top: 0; }
@media (prefers-reduced-motion: no-preference) { .gpanel.is-entering .gcard { animation: rise .6s var(--ease) both; } .gpanel.is-entering .gcard:nth-child(2) { animation-delay: .07s; } .gpanel.is-entering .gcard:nth-child(3) { animation-delay: .14s; } }
/* ---------- 7. Compare ---------- */
.compare { display: grid; gap: var(--s5); }
@media (min-width: 960px) { .compare { grid-template-columns: 4fr 8fr; align-items: center; } }
.compare__head { display: grid; gap: var(--s3); }
.compare__frame { background: var(--white); padding: clamp(.75rem, 2vw, 1.25rem); box-shadow: var(--shadow-2); border-radius: var(--radius); min-width: 0; }
.photo--diagram { background: var(--ivory); display: grid; place-items: center; color: var(--green); border: 1px dashed var(--line-strong); }
.diagram { width: 88%; height: auto; }
.dg-num { font: 800 44px var(--font-display); fill: currentColor; letter-spacing: -.04em; }
.dg-lbl { font: 600 13px var(--font-body); fill: var(--muted); letter-spacing: .2em; }
.compare__frame .slot-cap { padding-top: .6rem; }
/* ---------- 8. Partners ---------- */
.partners { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(247,242,232,.22); border-left: 1px solid rgba(247,242,232,.22); }
@media (min-width: 900px) { .partners { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.partners li { display: grid; gap: 1rem; padding: clamp(1.25rem, 3vw, 2rem); border-right: 1px solid rgba(247,242,232,.22); border-bottom: 1px solid rgba(247,242,232,.22); min-width: 0; transition: background .35s var(--ease); }
.partners li:hover { background: rgba(247,242,232,.05); }
.partners .ico { color: var(--brass); transition: transform .35s var(--ease); }
.partners li:hover .ico { transform: translateY(-3px); }
.partners span { font: 600 clamp(1.05rem, .9rem + .6vw, 1.4rem) / 1.2 var(--font-display); color: var(--ivory); letter-spacing: -.01em; }
.partners-cta { margin-top: var(--s5); display: grid; gap: var(--s3); }
.partners-cta__line { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-family: var(--font-display); font-weight: 600; color: var(--on-green-muted); max-width: none; }
.partners-cta__line a { color: var(--ivory); text-decoration: none; }
.partners-cta__line a:hover { color: var(--brass); }
/* ---------- 9. Finale ---------- */
.finale { position: relative; padding-block: clamp(5rem, 4rem + 6vw, 10rem) 0; overflow: hidden; }
.finale__grid { display: grid; gap: var(--s4); align-items: end; }
@media (min-width: 960px) { .finale__grid { grid-template-columns: 7fr 5fr; gap: var(--s6); } }
.finale__side { display: grid; gap: var(--s3); }
.finale__mark { font: 800 clamp(4.5rem, 1rem + 19vw, 21rem) / .75 var(--font-display); letter-spacing: .02em; color: var(--green); opacity: .07; text-align: center; margin: clamp(2rem, 5vw, 5rem) 0 -.06em; white-space: nowrap; max-width: none; user-select: none; }
/* ---------- Timeline (Origin & Quality) ---------- */
.timeline { position: relative; }
.tls { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.tl { position: relative; display: grid; grid-template-columns: 4rem 1fr; grid-template-rows: auto auto; column-gap: 1.25rem; padding-bottom: var(--s4); min-width: 0; }
.tl__icon { grid-row: span 2; position: relative; z-index: 1; width: 4rem; height: 4rem; border-radius: 50%; background: var(--ivory); border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--green); }
.tl:last-child .tl__icon { background: var(--green); color: var(--ivory); border-color: var(--green); }
.tl h3 { font-size: 1.25rem; align-self: end; }
.tl__state { font-size: .875rem; color: var(--muted); }
.tl__state--open { color: var(--terra); }
.tl__state--open::before { content: ""; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; border: 1.5px solid var(--terra); margin-right: .45rem; vertical-align: .05em; }
.tl__state--ok::before { content: ""; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--green); margin-right: .45rem; vertical-align: .05em; }
.timeline__line { position: absolute; left: 2rem; top: 2rem; bottom: 4rem; width: 1px; background: var(--brass); transform-origin: top; }
@media (min-width: 900px) {
.tls { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s2); }
.tl { grid-template-columns: 1fr; grid-template-rows: auto auto auto; row-gap: .6rem; padding-bottom: 0; }
.tl__icon { grid-row: auto; margin-bottom: .6rem; }
.timeline__line { left: 2rem; right: calc(100% / 6 - 2rem); top: 2rem; bottom: auto; width: auto; height: 1px; transform-origin: left; }
}
/* ---------- Contact blocks ---------- */
.cblocks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
@media (min-width: 768px) { .cblocks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cblock { display: grid; gap: .5rem; align-content: start; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); min-width: 0; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.cblock:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.cblock__icon { color: var(--brass); margin-bottom: .75rem; }
.cblock__label { font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.cblock__value { font: 700 clamp(1.3rem, 1rem + 1vw, 1.65rem) var(--font-display); color: var(--green); letter-spacing: -.015em; word-break: break-word; user-select: all; }
.cblock__cta { margin-top: .75rem; display: inline-flex; align-items: center; gap: .5rem; font: 700 .8125rem var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--green); text-decoration: none; border-top: 1px solid var(--line); padding-top: 1rem; }
.cblock__cta .ico { width: 1rem; height: 1rem; transition: transform .3s var(--ease); }
.cblock:hover .cblock__cta .ico { transform: translateX(4px); }
.contact-hero { padding-bottom: var(--s6); }
/* Footer contact */
.footer-contact a { display: inline-flex; align-items: center; gap: .6rem; }
.footer-contact .ico { width: 1.05rem; height: 1.05rem; color: var(--brass); }
.footer-grid .wordmark { font-size: 1.75rem; }
/* Product grid cards (product page): hover lift */
.grade-card { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.grade-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); }
/* ---------- Scroll motion (progressive: only where the browser supports scroll timelines) ---------- */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.sr { animation: sr-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
@keyframes sr-in { from { transform: translateY(32px); } to { transform: none; } }
.parallax img { animation: px linear both; animation-timeline: view(); animation-range: cover; }
@keyframes px { from { transform: translateY(-5%) scale(1.12); } to { transform: translateY(5%) scale(1.12); } }
.timeline__line { animation: grow-y linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (min-width: 900px) { .timeline__line { animation-name: grow-x; } @keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } } }
.giant { animation: drift linear both; animation-timeline: view(); animation-range: cover; }
@keyframes drift { from { transform: translateX(-46%); } to { transform: translateX(-54%); } }
.reveal-sec__media .photo img { animation: zoom linear both; animation-timeline: view(); animation-range: cover; }
@keyframes zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
}
}
@media (prefers-reduced-motion: reduce) {
.gcard, .cblock, .tile, .tile * , .stage__icon, .partners .ico { transition: none !important; }
.gcard:hover, .cblock:hover { transform: none; }
}
@media (max-width: 639px) { .tile { min-height: 0; padding-block: 1.75rem; } .tile__title { margin-top: .25rem; } }
/* =====================================================================
v4 — PHOTOGRAPHY
Photographs carry the page. Dark panels hold the hero and the range;
light editorial spreads hold the product story. Copy overlaps images
at fixed, deliberate offsets; brass marks the edges.
===================================================================== */
.btn--brass { --bg: var(--brass); --fg: var(--charcoal); --bd: var(--brass); }
.btn--brass:hover { --bg: var(--ivory); --fg: var(--green); --bd: var(--ivory); color: var(--green); }
.h-md { font-size: var(--step-2); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.slot.is-photo .photo { background: #1d1a17; }
.section--charcoal .slot-cap, .section--green .slot-cap { color: var(--on-dark-muted); }
/* ---------- Hero ---------- */
.hero3 { position: relative; overflow: hidden; background: var(--charcoal); color: var(--ivory); isolation: isolate;
min-height: min(calc(100svh - 5rem), 52rem); display: grid; align-items: end; }
.hero3__media { position: absolute; inset: 0; z-index: -1; }
.hero3__media .slot, .hero3__media .photo { height: 100%; }
.hero3__media .photo { aspect-ratio: auto !important; border-radius: 0; background: var(--charcoal); }
.hero3__media .photo img { object-position: 50% 74%;
-webkit-mask-image: linear-gradient(to bottom, #000 38%, rgba(0,0,0,.35) 70%, transparent 96%);
mask-image: linear-gradient(to bottom, #000 38%, rgba(0,0,0,.35) 70%, transparent 96%); }
.hero3__inner { padding-block: 40svh var(--s5); }
.hero3__copy { display: grid; gap: var(--s3); max-width: 38rem; }
.hero3__label { display: inline-flex; width: fit-content; border: 1px solid rgba(176,141,87,.7); font: 700 .6875rem var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--ivory); max-width: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgba(32,36,33,.35); }
.hero3__label span { padding: .6rem .9rem; }
.hero3__label span + span { border-left: 1px solid rgba(176,141,87,.7); color: #E2C99F; }
.hero3__title { margin: 0; display: grid; gap: .5rem; color: var(--ivory); }
.hero3__mark { font: 800 clamp(3rem, 1.4rem + 5.6vw, 6.25rem) / .9 var(--font-display); letter-spacing: .08em; color: var(--ivory); }
.hero3__mark sup { font-size: .22em; letter-spacing: 0; vertical-align: top; position: relative; top: .4em; margin-left: .1em; font-weight: 600; }
.hero3__line { font: 600 clamp(1.5rem, 1rem + 2vw, 2.6rem) / 1.12 var(--font-display); letter-spacing: -.02em; color: var(--ivory); }
.hero3__line::after { content: ""; display: block; width: 3.5rem; height: 1px; background: var(--brass); margin-top: 1.1rem; }
.hero3__lead { color: #D5D9D2; font-size: 1.0625rem; max-width: 30rem; }
.hero3__credit { position: absolute; right: var(--gutter); bottom: .9rem; margin: 0; font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(247,242,232,.55); max-width: none; }
@media (min-width: 900px) {
.hero3 { align-items: center; min-height: clamp(36rem, 72vh, 50rem); }
.hero3__media { left: 38%; }
.hero3__media .photo img { object-position: 50% 62%;
-webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.55) 16%, #000 38%);
mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.55) 16%, #000 38%); }
.hero3__inner { padding-block: var(--s6); }
.hero3__copy { max-width: 36rem; }
}
@media (prefers-reduced-motion: no-preference) {
.hero3__media .photo img { animation: settle 1.8s var(--ease) both, drift-zoom 24s 1.8s ease-in-out infinite alternate; }
@keyframes drift-zoom { from { transform: scale(1); } to { transform: scale(1.05); } }
}
/* ---------- Product story: oversized photo, copy overlaps it ---------- */
.story { position: relative; background: var(--white); padding-block: clamp(4rem, 3rem + 6vw, 9rem); overflow: hidden; }
.story .giant { top: auto; bottom: clamp(1rem, 3vw, 2.5rem); }
.story__grid { position: relative; display: grid; align-items: center; }
.story__grid > * { min-width: 0; }
.story__media .photo { aspect-ratio: 16 / 10 !important; box-shadow: var(--shadow-2); }
.story__media .photo img { object-position: 46% 40%; }
.story__copy { position: relative; z-index: 1; display: grid; gap: var(--s3); background: var(--ivory); padding: clamp(1.75rem, 4vw, 3.25rem); margin: -3.5rem .75rem 0; box-shadow: var(--shadow-2); border-top: 2px solid var(--brass); }
@media (min-width: 1024px) {
.story__grid { grid-template-columns: 8fr 5fr; }
.story__media { margin-left: calc(-1 * var(--gutter)); }
.story__copy { margin: 0 0 0 -7rem; }
}
.slot-cap { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
/* ---------- What is makhana: photo with brass offset frame ---------- */
.texture__grid, .chapter__grid { display: grid; gap: var(--s5); align-items: center; }
.texture__grid > *, .chapter__grid > * { min-width: 0; }
@media (min-width: 960px) { .texture__grid, .chapter__grid { grid-template-columns: 5fr 6fr; gap: var(--s6); } }
.texture__media, .chapter__media { position: relative; padding: 0 1.25rem 1.25rem 0; }
.texture__media::before, .chapter__media::before { content: ""; position: absolute; inset: 1.25rem 0 0 1.25rem; border: 1px solid var(--brass); }
.texture__media .slot, .chapter__media .slot { position: relative; }
.texture__media .photo, .chapter__media .photo { box-shadow: var(--shadow-2); }
.texture__copy, .chapter__copy { display: grid; gap: var(--s3); }
.traits { margin: var(--s2) 0 0; display: grid; border-top: 1px solid var(--line-strong); }
.traits div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--line); }
.traits dt { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--green); padding-top: .2rem; }
.traits dd { margin: 0; color: var(--charcoal); min-width: 0; }
@media (max-width: 420px) { .traits div { grid-template-columns: 1fr; gap: .3rem; } }
/* ---------- Origin band: photo darkened for text ---------- */
.band::after { background: rgba(18,22,19,.58); }
.band__media .photo img { object-position: 50% 50%; }
.band .slot-cap { display: none; }
/* ---------- Range: photo panel beside the selector ---------- */
.range-split { display: grid; gap: var(--s4); }
.range-split > * { min-width: 0; }
.range-split__media { display: none; }
@media (min-width: 1024px) {
.range-split { grid-template-columns: 4fr 8fr; gap: var(--s5); align-items: stretch; }
.range-split__media { display: block; position: relative; }
.range-split__media .slot, .range-split__media .photo { height: 100%; }
.range-split__media .photo { aspect-ratio: auto !important; min-height: 32rem; opacity: .9; }
.range-split__media .photo img { object-position: 50% 70%; }
.range-split__media::after { content: ""; position: absolute; inset: .9rem; border: 1px solid rgba(176,141,87,.55); pointer-events: none; }
.range-split__media .slot-cap { display: none; }
}
.range-split .gcards { grid-template-columns: 1fr; gap: 0; border-top: 1px solid rgba(247,242,232,.12); }
.range-split .gcard { background: transparent; border: 0; border-bottom: 1px solid rgba(247,242,232,.12); border-radius: 0; padding: 1.4rem 0; box-shadow: none; }
.range-split .gcard:hover { transform: none; box-shadow: none; background: rgba(247,242,232,.03); }
@media (min-width: 640px) {
.range-split .gcard { grid-template-columns: 1fr auto; column-gap: 2rem; align-items: center; }
.range-split .gcard > :not(.gcard__actions) { grid-column: 1; }
.range-split .gcard__actions { grid-column: 2; grid-row: 1 / span 4; }
}
.range-split .gcard__desc { border-bottom: 0; padding-bottom: 0; }
.gcard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; }
.gcard__link { font: 700 .75rem var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ivory); text-decoration: none; border-bottom: 1px solid var(--brass); padding-bottom: .15rem; }
.gcard__link:hover { color: #E2C99F; }
.gcard .btn .arrow { margin-left: .1rem; }
/* ---------- Product page ---------- */
.phero { position: relative; overflow: hidden; isolation: isolate; color: var(--ivory); background: var(--charcoal); min-height: clamp(32rem, 74vh, 48rem); display: grid; align-items: end; margin-top: var(--s2); }
.phero__media { position: absolute; inset: 0; z-index: -1; }
.phero__media .slot, .phero__media .photo { height: 100%; }
.phero__media .photo { aspect-ratio: auto !important; border-radius: 0; }
.phero__media .photo img { object-position: 50% 45%; }
.phero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(18,22,19,.6); }
.phero__copy { display: grid; gap: var(--s3); padding-block: var(--s6); justify-items: start; }
.phero__copy h1 { color: var(--ivory); max-width: 11ch; }
.phero__lead { font: 500 var(--step-1) / 1.45 var(--font-display); color: #E4E8E0; max-width: 36rem; }
.phero .slot-cap { display: none; }
.chapter { padding-block: clamp(4.5rem, 3rem + 5vw, 8rem); }
.chapter--deep { background: var(--ivory-deep); }
.chapter__num { display: block; font: 800 clamp(3rem, 2rem + 4vw, 5.5rem) / .8 var(--font-display); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px var(--brass); margin-bottom: .6rem; }
.chapter__num--light { -webkit-text-stroke-color: rgba(226,201,159,.8); }
.making { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 560px) { .making { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .making { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.making li { display: grid; gap: .6rem; align-content: start; border-top: 1px solid var(--line-strong); padding-top: var(--s3); min-width: 0; }
.making .ico { color: var(--brass); margin-bottom: .5rem; transition: transform .35s var(--ease); }
.making li:hover .ico { transform: translateY(-3px); }
.making h3 { font-size: 1.25rem; }
.making p { color: var(--muted); font-size: .9375rem; }
.range-intro { display: grid; gap: var(--s4); align-items: center; }
.range-intro > * { min-width: 0; }
@media (min-width: 960px) { .range-intro { grid-template-columns: 4fr 7fr; gap: var(--s6); } }
.range-intro__count { display: grid; justify-items: start; line-height: 1; }
.range-intro__count span { font: 800 clamp(8rem, 4rem + 16vw, 20rem) / .78 var(--font-display); letter-spacing: -.07em; color: var(--green); }
.range-intro__count small { font: 700 .8125rem var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--terra); margin-top: .75rem; }
.compare--inline { padding-top: var(--s5); border-top: 1px solid var(--line-strong); }
.wholesale-cta__grid { display: grid; gap: var(--s4); align-items: end; }
@media (min-width: 960px) { .wholesale-cta__grid { grid-template-columns: 6fr 6fr; gap: var(--s6); } }
.wholesale-cta h2 { color: var(--ivory); }
/* ---------- Origin page photo strip: overlapping, asymmetric ---------- */
.strip { display: grid; gap: var(--s3); padding: 0 var(--gutter) var(--s6); max-width: 90rem; margin-inline: auto; }
.strip > * { min-width: 0; }
.strip__a .photo { aspect-ratio: 4 / 5 !important; }
.strip__b .photo { aspect-ratio: 16 / 10 !important; }
@media (min-width: 900px) {
.strip { grid-template-columns: 5fr 7fr; align-items: start; gap: var(--s4); }
.strip__b { margin-top: var(--s6); }
}
.strip .photo { box-shadow: var(--shadow-2); }
/* ---------- Image motion on scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.story__media .photo img, .texture__media .photo img, .chapter__media .photo img, .strip .photo img {
animation: zoom linear both; animation-timeline: view(); animation-range: cover; }
.phero__media .photo img { animation: px linear both; animation-timeline: view(); animation-range: exit; }
}
}
@media (prefers-reduced-motion: reduce) { .hero3__media .photo img { animation: none; } }
/* Caption sits on the photo where copy overlaps its lower edge */
.story .slot { position: relative; }
.story .slot-cap { position: absolute; top: .75rem; left: .75rem; color: rgba(247,242,232,.9); background: rgba(32,36,33,.5); padding: .3rem .55rem; border-radius: 2px; font-size: .625rem; }
/* ---------- v5: photography audit ---------- */
/* Panels only take a column when they hold a photo */
.range-split__media:empty, .making__photo:empty, .packs:empty { display: none !important; }
@media (min-width: 1024px) {
.range-split { grid-template-columns: 1fr; }
.range-split:has(> .range-split__media:not(:empty)) { grid-template-columns: 4fr 8fr; }
}
.making__photo { margin-bottom: var(--s5); }
.packs { display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: var(--s5); }
/* Bihar band without a verified photograph: typographic green panel */
.band__word { display: none; }
.band:has(.band__media:empty) { background: var(--green); min-height: clamp(26rem, 42vw, 36rem); }
.band:has(.band__media:empty)::after { content: none; }
.band:has(.band__media:empty) .band__word {
display: block; position: absolute; right: -0.04em; bottom: -0.2em; pointer-events: none; user-select: none;
font: 800 clamp(7rem, 3rem + 22vw, 24rem) / .8 var(--font-display); letter-spacing: -.05em;
color: transparent; -webkit-text-stroke: 1px rgba(226,201,159,.45); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.band__word { animation: drift-r linear both; animation-timeline: view(); animation-range: cover; }
@keyframes drift-r { from { transform: translateX(4%); } to { transform: translateX(-4%); } }
}
}
/* Hero photo is now bright: keep text side solidly dark */
.hero3__media .photo img { object-position: 50% 45%; }
@media (min-width: 900px) { .hero3__media .photo img { object-position: 50% 40%; } }
/* ---------- v6: typographic brand panels (temporary photography state) ---------- */
.tpanel { position: relative; overflow: hidden; display: grid; align-content: end; gap: .9rem; padding: clamp(1.5rem, 4vw, 2.75rem); border-radius: var(--radius); max-width: 100%; isolation: isolate; box-shadow: var(--shadow-2); }
.tpanel::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
background-image: url("data:image/svg+xml;utf8,"); }
.tpanel--green { background: var(--green); color: var(--ivory); }
.tpanel--ivory { background: var(--ivory-deep); color: var(--green); border: 1px solid var(--line); }
.tpanel--ivory::after { opacity: .6; filter: invert(1); }
.tpanel__label { position: absolute; top: clamp(1.5rem, 4vw, 2.75rem); left: clamp(1.5rem, 4vw, 2.75rem); font: 700 .6875rem var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: #E2C99F; display: inline-flex; align-items: center; gap: .7rem; }
.tpanel__label::before { content: ""; width: 1.75rem; height: 1px; background: var(--brass); }
.tpanel--ivory .tpanel__label { color: var(--terra); }
.tpanel__big { font: 600 clamp(2rem, 1.3rem + 2.6vw, 3.4rem) / 1.02 var(--font-display); letter-spacing: -.025em; max-width: 12ch; }
.tpanel--green .tpanel__big { color: var(--ivory); }
.tpanel__sub { font-size: .9375rem; line-height: 1.55; max-width: 26ch; color: var(--on-green-muted); border-top: 1px solid rgba(176,141,87,.55); padding-top: .9rem; }
.tpanel--ivory .tpanel__sub { color: var(--muted); }
.tpanel__mark { position: absolute; right: clamp(1.5rem, 4vw, 2.75rem); top: clamp(1.4rem, 4vw, 2.65rem); font: 800 .75rem var(--font-display); letter-spacing: .26em; opacity: .55; }
.tpanel__seed { position: absolute; z-index: -1; right: -18%; top: 12%; width: 78%; aspect-ratio: 1; border-radius: 47% 53% 50% 50% / 52% 46% 54% 48%; border: 1px solid rgba(226,201,159,.35); }
.tpanel__seed::before, .tpanel__seed::after { content: ""; position: absolute; border-radius: inherit; border: 1px solid rgba(226,201,159,.22); }
.tpanel__seed::before { inset: 11%; } .tpanel__seed::after { inset: 24%; border-color: rgba(226,201,159,.14); }
.tpanel__num { position: absolute; z-index: -1; right: -.04em; top: 18%; font: 800 clamp(9rem, 5rem + 12vw, 16rem) / .8 var(--font-display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px rgba(3,58,42,.22); }
@media (prefers-reduced-motion: no-preference) {
.tpanel__seed { animation: breathe 9s ease-in-out infinite alternate; }
@keyframes breathe { from { transform: rotate(0) scale(1); } to { transform: rotate(8deg) scale(1.04); } }
}
/* Makhana page hero without a PHOOLZA photograph: dark typographic panel */
.phero__word { display: none; }
.phero:has(.phero__media:empty) { background: var(--charcoal); min-height: clamp(28rem, 62vh, 40rem); }
.phero:has(.phero__media:empty)::after { content: none; }
.phero:has(.phero__media:empty) .phero__word {
display: block; position: absolute; z-index: -1; right: -.03em; bottom: -.18em; pointer-events: none; user-select: none;
font: 800 clamp(6rem, 2rem + 19vw, 21rem) / .8 var(--font-display); letter-spacing: -.05em; white-space: nowrap;
color: transparent; -webkit-text-stroke: 1px rgba(226,201,159,.32); }
.phero:has(.phero__media:empty) .phero__copy { padding-block: var(--s6) var(--s7); }
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.phero__word { animation: drift-r linear both; animation-timeline: view(); animation-range: cover; }
}
}
/* Making photo: wide editorial crop above the steps */
.making__photo .photo { box-shadow: var(--shadow-2); }
.making__photo .photo img { object-position: 50% 55%; }
/* Origin photo strip collapses until PHOOLZA photographs exist */
.strip:not(:has(.slot)) { display: none; }
/* =====================================================================
v7 — UX: journeys, signature story, interactions
===================================================================== */
:root { --hdr: 3.75rem; --dark: #033A2A; --line-dark: rgba(247,242,232,.16); }
.muted-light { color: var(--on-green-muted); font-size: .875rem; max-width: 34rem; }
.next-cue { display: inline-flex; align-items: center; gap: .5rem; font: 700 .8125rem var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--green); text-decoration: none; border-bottom: 1px solid var(--brass); padding-bottom: .2rem; }
.next-cue .ico { width: 1rem; height: 1rem; transition: transform .3s var(--ease); }
.next-cue:hover .ico { transform: translateX(4px); }
.next-cue--light { color: var(--ivory); }
.section--charcoal .next-cue, .section--green .next-cue { color: var(--ivory); }
/* ---------- Header: Enquire, progress, nav ---------- */
.header-enquire { display: none; }
@media (min-width: 640px) { .header-enquire { display: inline-flex; } }
.nav ul { gap: clamp(.9rem, 1.6vw, 1.75rem); }
.nav a { font-size: .875rem; }
.nav a[aria-current="page"] { color: var(--green); border-bottom: 2px solid var(--brass); }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--brass); transform: scaleX(0); transform-origin: left; }
.mobile-nav__actions { display: grid; gap: .75rem; padding: var(--s4) var(--gutter) 0; }
.mobile-nav__actions .btn { width: 100%; justify-content: flex-start; }
.mobile-nav li a[aria-current="page"]::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--terra); margin-right: .75rem; vertical-align: .2em; }
/* ---------- Mobile quick-action bar ---------- */
.mbar { display: none; }
@media (max-width: 767px) {
.mbar { display: grid; grid-template-columns: 1fr 1fr 1.3fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
background: var(--ivory); border-top: 1px solid var(--line-strong); padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -10px 30px -20px rgba(32,36,33,.5); }
.mbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; min-height: 3.6rem; text-decoration: none; color: var(--green); font: 700 .6875rem var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.mbar a + a { border-left: 1px solid var(--line); }
.mbar .ico { width: 1.25rem; height: 1.25rem; }
.mbar__cta { background: var(--green); color: var(--ivory) !important; }
.wa-float { display: none !important; }
body { padding-bottom: calc(3.6rem + env(safe-area-inset-bottom, 0px)); }
.site-footer { padding-bottom: var(--s4); }
}
/* ---------- Chapter navigation ---------- */
.chapnav { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--hdr)); z-index: 40; background: rgba(247,242,232,.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.chapnav ol { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.chapnav ol::-webkit-scrollbar { display: none; }
.chapnav li { flex: none; scroll-snap-align: start; }
.chapnav a { display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; padding: 0 .9rem; font: 600 .8125rem var(--font-display); color: var(--muted); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: color .25s, border-color .25s; }
.chapnav a span { font-size: .6875rem; color: var(--brass); letter-spacing: .08em; }
.chapnav a:hover, .chapnav a[aria-current] { color: var(--green); border-bottom-color: var(--brass); }
.chapnav li:first-child a { padding-left: 0; }
[id^="ch-"], #s1, #s2, #s3, #s4, #s5, #s6, #where, #harvest, #seed, #india, #journey, #quality, #markets, #xjourney, #export-form, #contact-form, #world, #range { scroll-margin-top: calc(var(--hdr) + 3.5rem); }
/* ---------- Signature: From water to world ---------- */
.world { position: relative; background: var(--dark); color: var(--ivory); padding-block: clamp(4.5rem, 3rem + 5vw, 8rem); }
.world__head { display: grid; gap: var(--s3); margin-bottom: var(--s5); }
.world__head h2 { color: var(--ivory); }
.world__head .lead-sm { color: var(--on-green-muted); max-width: 40rem; }
.world__grid { display: grid; gap: var(--s4); }
.world__grid > * { min-width: 0; }
.world__stage { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--hdr) + .5rem); z-index: 2; background: var(--green); border: 1px solid var(--line-dark); border-radius: var(--radius); padding: .75rem .75rem 1rem; height: min(46svh, 26rem); display: grid; grid-template-rows: 1fr auto; box-shadow: 0 30px 60px -40px rgba(0,0,0,.8); }
.world__scene { min-height: 0; display: grid; place-items: center; }
.scene { width: 100%; height: 100%; max-height: 100%; overflow: visible; }
.world__progress { position: relative; padding-top: .9rem; }
.world__progress::before, .world__bar { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--line-dark); }
.world__bar { background: var(--brass); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .6s var(--ease); }
.world__progress ol { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; gap: .25rem; }
.world__progress li { cursor: pointer; font: 600 .5625rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: rgba(247,242,232,.45); display: grid; justify-items: center; gap: .3rem; position: relative; }
.world__progress li::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; border: 1px solid rgba(247,242,232,.45); background: var(--green); margin-top: -1.17rem; transition: background .3s, border-color .3s, transform .3s; }
.world__progress li.is-past::before { background: var(--brass); border-color: var(--brass); }
.world__progress li.is-on::before { background: var(--ivory); border-color: var(--ivory); transform: scale(1.5); }
.world__progress li.is-on { color: var(--ivory); }
.world__progress li span { display: none; }
@media (min-width: 640px) { .world__progress li span { display: block; } }
.world__steps { list-style: none; margin: 0; padding: 0; }
.wstep { min-height: 62svh; display: grid; align-content: center; gap: .7rem; padding-block: var(--s4); opacity: .35; transition: opacity .5s var(--ease); }
.wstep.is-on { opacity: 1; }
.wstep__n { font: 700 .75rem var(--font-display); letter-spacing: .14em; color: var(--brass); }
.wstep__k { font: 700 .75rem var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: #E2C99F; }
.wstep__h { font: 600 clamp(2rem, 1.4rem + 2.6vw, 3.4rem) / 1.02 var(--font-display); letter-spacing: -.03em; color: var(--ivory); }
.wstep__p { font-size: 1.125rem; line-height: 1.6; color: #D5DCD4; max-width: 30rem; }
.wstep:last-child { min-height: 70svh; }
@media (min-width: 960px) {
.world__grid { grid-template-columns: 7fr 5fr; gap: var(--s6); align-items: start; }
.world__stage { height: calc(100svh - var(--hdr) - 4rem); max-height: 44rem; top: calc(var(--hdr) + 2rem); padding: 1.5rem 1.5rem 1.25rem; }
.wstep { min-height: 80svh; }
}
@media (max-width: 959px) {
.world__stage { margin-inline: calc(-1 * var(--gutter) / 2); }
.wstep { min-height: 52svh; }
.wstep__p { font-size: 1rem; }
}
/* Scenes: one SVG, layers shown per stage */
.scene .sc { opacity: 0; transition: opacity .7s var(--ease); }
[data-stage="1"] .sc-1, [data-stage="2"] .sc-2, [data-stage="3"] .sc-3, [data-stage="4"] .sc-4, [data-stage="5"] .sc-5,
[data-stage="6"] .sc-6, [data-stage="7"] .sc-7, [data-stage="8"] .sc-8, [data-stage="9"] .sc-9, [data-stage="10"] .sc-10 { opacity: 1; }
.scene { fill: none; stroke: #E9E2D2; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.scene text { stroke: none; fill: #E2C99F; font-family: var(--font-display); }
.scene .sc-cap { font-size: 15px; font-weight: 700; letter-spacing: .22em; fill: rgba(226,201,159,.85); }
.scene .sc-lbl { font-size: 14px; font-weight: 700; letter-spacing: .18em; fill: #E9E2D2; }
.scene .sc-num { font-size: 56px; font-weight: 800; fill: var(--ivory); }
.scene .sc-word { font-size: 64px; font-weight: 800; letter-spacing: .14em; fill: var(--ivory); }
.scene .wv { stroke: rgba(233,226,210,.7); }
.scene .wv--dim { stroke: rgba(233,226,210,.28); }
.scene .leaf { stroke: #E9E2D2; } .scene .leaf ellipse:first-child { fill: rgba(233,226,210,.06); }
.scene .leaf line { stroke: rgba(233,226,210,.45); stroke-width: 1.1; }
.scene .leaf .rim { stroke: rgba(233,226,210,.3); }
.scene .pr { fill: #E2C99F; stroke: none; }
.scene .leaf--sm { opacity: .7; }
.scene .stem { stroke: #E9E2D2; stroke-width: 2.4; }
.scene .flower path { fill: rgba(176,141,87,.22); stroke: #E2C99F; }
.scene .fruit circle:first-child { fill: rgba(233,226,210,.08); }
.scene .sd circle, .scene .sd-bed { fill: #1A1410; stroke: #E2C99F; }
.scene .bed { stroke: rgba(226,201,159,.6); stroke-dasharray: 2 6; }
.scene .pole { stroke-width: 3; }
.scene .basket { stroke: #E2C99F; }
.scene .ring { stroke: rgba(233,226,210,.4); fill: rgba(233,226,210,.04); }
.scene .u { color: #E9E2D2; }
.scene .link { stroke: rgba(226,201,159,.5); stroke-dasharray: 3 7; }
.scene .raw { fill: #1A1410; stroke: #E2C99F; stroke-width: 2; }
.scene .pop polygon { fill: #F4EDE0; stroke: none; }
.scene .pop .fleck { fill: #7A4A33; stroke: none; }
.scene .shell path { fill: #2A211B; stroke: #E2C99F; stroke-width: 1; }
.scene .arrow-l { stroke: #E2C99F; }
.scene .india .d, .routes .d { fill: rgba(233,226,210,.42); stroke: none; }
.scene .india .d-hot, .routes .d-hot { fill: #D9B57A; stroke: none; }
.scene .india__pin line { stroke: #E2C99F; }
.scene .india__pin text { font-size: 26px; font-weight: 800; letter-spacing: .18em; fill: var(--ivory); }
.scene .india__pin .pulse { fill: rgba(217,181,122,.18); stroke: #D9B57A; }
@media (prefers-reduced-motion: no-preference) {
.scene .wv { animation: wave 7s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1); }
@keyframes wave { from { transform: translateX(0); } to { transform: translateX(-60px); } }
[data-stage="4"] .sd { animation: sink 3.2s var(--ease) both; animation-delay: calc(var(--i) * .15s); }
@keyframes sink { from { transform: translateY(0); opacity: 1; } 70% { opacity: 1; } to { transform: translateY(150px); opacity: 0; } }
[data-stage="6"] .pstep { animation: rise .7s var(--ease) both; animation-delay: calc(var(--i) * .15s); }
[data-stage="7"] .pop { animation: popin .9s .4s var(--ease) both; transform-origin: 440px 280px; transform-box: view-box; }
@keyframes popin { from { transform: scale(.35); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } to { transform: scale(1); } }
.pulse { animation: pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulse { 0%, 100% { opacity: .9; transform: scale(1); } 50% { opacity: .35; transform: scale(1.25); } }
}
/* ---------- Where it begins (water) ---------- */
.water { position: relative; overflow: hidden; background: var(--dark); color: var(--ivory); padding-block: clamp(4.5rem, 3rem + 5vw, 8rem); }
.water__waves { position: absolute; left: 0; right: 0; bottom: 0; height: 14rem; pointer-events: none; opacity: .5; }
.water__waves svg { width: 100%; height: 100%; }
.water__waves path { fill: none; stroke: rgba(226,201,159,.35); stroke-width: 1.2; }
@media (prefers-reduced-motion: no-preference) {
.water__waves path { animation: drift-w 12s ease-in-out infinite alternate; }
.water__waves path:nth-child(2) { animation-duration: 15s; } .water__waves path:nth-child(3) { animation-duration: 18s; }
@keyframes drift-w { from { transform: translateX(-2%); } to { transform: translateX(2%); } }
}
.water__grid { position: relative; display: grid; gap: var(--s5); align-items: center; }
.water__grid > * { min-width: 0; }
@media (min-width: 960px) { .water__grid { grid-template-columns: 5fr 6fr; gap: var(--s6); } }
.water h2 { color: var(--ivory); }
.water__lead { font: 500 var(--step-1) / 1.45 var(--font-display); color: #E4E8E0; max-width: 32rem; }
.specimen { border-top: 1px solid rgba(176,141,87,.6); border-bottom: 1px solid var(--line-dark); padding-block: 1.25rem; display: grid; gap: .4rem; max-width: 30rem; }
.specimen__k { font: 700 .6875rem var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: #E2C99F; }
.specimen__name { font: 600 clamp(2rem, 1.4rem + 2.4vw, 3rem) / 1 var(--font-display); color: var(--ivory); letter-spacing: -.02em; }
.specimen__d { color: var(--on-green-muted); }
/* Plant / flower / seed tabs */
.grow { background: var(--green); border: 1px solid var(--line-dark); border-radius: var(--radius); padding: clamp(1rem, 3vw, 1.75rem); display: grid; gap: 1rem; }
.grow__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.gtab2 { display: grid; gap: .2rem; justify-items: start; padding: .75rem .9rem; min-height: 3.25rem; background: transparent; border: 1px solid var(--line-dark); border-radius: var(--radius); color: var(--on-green-muted); cursor: pointer; font: inherit; text-align: left; transition: background .3s, color .3s, border-color .3s; }
.gtab2__n { font: 700 .6875rem var(--font-display); letter-spacing: .14em; color: var(--brass); }
.gtab2__t { font: 700 1rem var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.gtab2[aria-selected="true"] { background: var(--ivory); color: var(--green); border-color: var(--ivory); }
.gtab2:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.grow__bar { height: 2px; background: var(--line-dark); position: relative; }
.grow__bar span { position: absolute; inset: 0; background: var(--brass); transform-origin: left; transform: scaleX(calc((var(--tab, 0) + 1) / 3)); transition: transform .5s var(--ease); }
.gpanel2 { display: grid; gap: 1rem; }
.gpanel2__scene { aspect-ratio: 1 / .82; display: grid; place-items: center; }
.gpanel2__scene .scene { max-height: 22rem; }
.gpanel2__p { color: #E4E8E0; max-width: 34rem; }
.gpanel2:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) { .gpanel2:not([hidden]) { animation: rise .5s var(--ease) both; } }
/* Harvest steps */
.hsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); position: relative; }
@media (min-width: 768px) { .hsteps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hsteps::before { content: ""; position: absolute; top: 2.5rem; left: 2.5rem; right: 30%; height: 1px; background: var(--brass); opacity: .6; } }
.hstep { position: relative; display: grid; gap: .5rem; align-content: start; padding: 0 0 var(--s3); min-width: 0; }
.hstep__icon { width: 5rem; height: 5rem; border-radius: 50%; display: grid; place-items: center; background: var(--ivory); border: 1px solid var(--line-strong); color: var(--green); transition: background .3s, color .3s, transform .3s var(--ease); }
.hstep:hover .hstep__icon { background: var(--green); color: var(--ivory); transform: translateY(-3px); }
.hstep__n { font: 700 .75rem var(--font-display); letter-spacing: .14em; color: var(--brass); margin-top: .75rem; }
.hstep h3 { font-size: 1.5rem; }
.hstep p { color: var(--muted); max-width: 22rem; }
/* Seed -> popped transformation */
.pt { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: clamp(1.25rem, 3vw, 2.25rem); display: grid; gap: 1.25rem; }
.pt__svg { width: 100%; height: auto; max-height: 16rem; overflow: visible; }
.pt__svg text { font: 700 12px var(--font-display); letter-spacing: .2em; fill: var(--muted); }
.pt__raw circle { fill: #1A1410; }
.pt__line { stroke: var(--brass); stroke-width: 1.5; stroke-dasharray: 4 6; fill: none; }
.pt__mid circle { fill: var(--ivory-deep); stroke: var(--brass); stroke-width: 1.5; }
.pt__pop polygon { fill: #F2EADC; stroke: rgba(32,36,33,.18); }
.pt__pop .fleck { fill: #7A4A33; }
.pt__shell path { fill: #2A211B; }
.pt__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pt__steps li { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border: 1px solid var(--line-strong); border-radius: 999px; font: 600 .8125rem var(--font-display); color: var(--green); }
.pt__steps .ico { color: var(--brass); width: 1.15rem; height: 1.15rem; }
.pt__foot { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 1rem; }
.pt__note { font-size: .8125rem; color: var(--muted); max-width: 36rem; }
@media (prefers-reduced-motion: no-preference) {
.pt.is-playing .pt__raw { animation: seed-go 2.6s var(--ease) both; }
.pt.is-playing .pt__line { animation: dash 2.6s linear both; }
.pt.is-playing .pt__mid circle { animation: heat 2.6s var(--ease) both; transform-box: fill-box; transform-origin: center; }
.pt.is-playing .pt__pop { animation: popin 1s 2s var(--ease) both; transform-box: fill-box; transform-origin: center; }
.pt.is-playing .pt__shell path { animation: shell 1s 2.1s var(--ease) both; }
.pt.is-playing .pt__steps li { animation: rise .5s var(--ease) both; }
.pt.is-playing .pt__steps li:nth-child(2) { animation-delay: .35s; } .pt.is-playing .pt__steps li:nth-child(3) { animation-delay: .7s; }
.pt.is-playing .pt__steps li:nth-child(4) { animation-delay: 1.05s; } .pt.is-playing .pt__steps li:nth-child(5) { animation-delay: 1.4s; }
@keyframes seed-go { 0% { transform: translateX(0); } 70% { transform: translateX(200px); opacity: 1; } 100% { transform: translateX(200px); opacity: 0; } }
@keyframes dash { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
@keyframes heat { 0%, 40% { fill: var(--ivory-deep); transform: scale(1); } 70% { fill: #E8C9A6; transform: scale(1.12); } 100% { fill: var(--ivory-deep); transform: scale(1); } }
@keyframes shell { from { opacity: 0; transform: translate(-30px, 0) rotate(-40deg); } to { opacity: 1; transform: none; } }
}
/* ---------- Grade experience with relative size ---------- */
.grades__body { display: grid; gap: var(--s4); }
.grades__body > * { min-width: 0; }
.gscale { display: grid; justify-items: center; align-content: center; gap: .6rem; padding: 1rem; border: 1px solid rgba(247,242,232,.12); border-radius: var(--radius); background: rgba(247,242,232,.03); }
.gscale svg { width: min(100%, 13rem); height: auto; overflow: visible; }
.gscale__pop { transform-box: fill-box; transform-origin: center; transform: scale(calc(.62 + var(--tab, 0) * .19)); transition: transform .7s var(--ease); }
.gscale__pop polygon { fill: #F2EADC; } .gscale__pop .fleck { fill: #7A4A33; }
.gscale__cap { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); }
@media (min-width: 1024px) { .grades__body { grid-template-columns: 3fr 9fr; align-items: start; } .gscale { position: sticky; top: calc(var(--hdr) + 4rem); min-height: 18rem; } }
@media (max-width: 1023px) { .gscale { grid-template-columns: auto 1fr; justify-items: start; align-items: center; } .gscale svg { width: 5.5rem; } }
@media (max-width: 767px) {
.grades--scale .gcards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .75rem; padding-bottom: .5rem; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: thin; }
.grades--scale .gcard { flex: 0 0 82%; scroll-snap-align: start; }
}
/* ---------- Finder ---------- */
.finder { display: grid; gap: var(--s4); }
.finder__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); }
.finder__steps li { display: flex; align-items: center; gap: .6rem; padding: .9rem 0; font: 700 .75rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: rgba(247,242,232,.45); border-top: 2px solid transparent; margin-top: -1px; transition: color .3s, border-color .3s; }
.finder__steps li span { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid currentColor; font-size: .75rem; }
.finder__steps li.is-on { color: var(--ivory); border-top-color: var(--brass); }
.finder__steps li.is-done span { background: var(--brass); border-color: var(--brass); color: var(--charcoal); }
.finder__step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 1rem; }
.finder__step legend { display: flex; align-items: center; gap: .75rem; font: 600 var(--step-1) var(--font-display); letter-spacing: -.015em; color: var(--ivory); margin-bottom: 1rem; padding: 0; }
.finder__n { font: 700 .75rem var(--font-display); letter-spacing: .14em; color: var(--brass); }
.finder__hint { color: var(--on-green-muted); font-size: .9375rem; }
.choices { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .choices--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) { .choices--grades { grid-template-columns: 1fr; } }
.choice { position: relative; display: grid; gap: .25rem; align-content: start; padding: 1rem 1.1rem; min-height: 4.5rem; border: 1px solid var(--line-dark); border-radius: var(--radius); cursor: pointer; transition: border-color .25s, background .25s, transform .25s var(--ease); min-width: 0; }
.choice:hover { border-color: rgba(226,201,159,.6); transform: translateY(-2px); }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.choice__t { font: 700 1.0625rem var(--font-display); color: var(--ivory); }
.choice__d { font-size: .8125rem; color: var(--on-green-muted); }
.choice__big { font: 800 2.6rem / .9 var(--font-display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(247,242,232,.6); }
.choice:has(input:checked) { background: var(--ivory); border-color: var(--ivory); }
.choice:has(input:checked) .choice__t { color: var(--green); }
.choice:has(input:checked) .choice__d { color: var(--muted); }
.choice:has(input:checked) .choice__big { color: var(--green); -webkit-text-stroke-color: var(--green); }
.choice:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 3px; }
.finder.is-js .choice--grade[hidden] { display: none; }
.finder__result { display: grid; gap: .6rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid rgba(176,141,87,.55); border-radius: var(--radius); background: rgba(3,58,42,.45); }
.finder__k { font: 700 .6875rem var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: #E2C99F; }
.finder__grade { font: 700 clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem) / 1.1 var(--font-display); color: rgba(247,242,232,.5); letter-spacing: -.02em; transition: color .3s; }
.finder.has-grade .finder__grade { color: var(--ivory); }
.finder__purpose { color: var(--on-green-muted); min-height: 1.5em; }
@media (min-width: 1024px) {
.finder { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s4); }
.finder__steps, .finder__result { grid-column: 1 / -1; }
.finder .choices--4, .finder .choices--3 { grid-template-columns: 1fr 1fr; }
.finder .choices--grades { grid-template-columns: 1fr; }
}
/* ---------- How can we help ---------- */
.helps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
@media (min-width: 900px) { .helps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.help { display: grid; grid-template-rows: auto auto 1fr auto; gap: .9rem; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); min-width: 0; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.help:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.help__icon { color: var(--brass); }
.help:hover .help__icon .ico { stroke-dasharray: 90; animation: draw 1s var(--ease) both; }
.help__t { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); font-weight: 600; letter-spacing: -.02em; }
.help__d { color: var(--muted); }
.help__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.help__wa { display: inline-flex; align-items: center; gap: .4rem; font: 700 .75rem var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--green); text-decoration: none; }
.help__wa .ico { width: 1rem; height: 1rem; color: var(--brass); }
/* ---------- Export routes ---------- */
.xr { display: grid; gap: var(--s4); }
.xr > * { min-width: 0; }
@media (min-width: 1024px) { .xr { grid-template-columns: 8fr 4fr; align-items: start; } }
.xr__map { background: var(--dark); border: 1px solid var(--line-dark); border-radius: var(--radius); padding: clamp(.5rem, 2vw, 1.25rem); overflow: hidden; }
.routes { width: 100%; height: auto; display: block; overflow: visible; }
.routes .route { fill: none; stroke: rgba(226,201,159,.35); stroke-width: 1.4; stroke-dasharray: 5 6; }
.routes .route.is-on { stroke: #E2C99F; stroke-width: 2.2; stroke-dasharray: none; }
.routes .origin circle:last-child { fill: #D9B57A; }
.routes .origin .pulse { fill: rgba(217,181,122,.2); stroke: #D9B57A; }
.routes text { font: 700 13px var(--font-display); letter-spacing: .12em; fill: #E9E2D2; }
.routes .origin text { fill: #E2C99F; font-size: 12px; letter-spacing: .2em; }
.routes .mk { cursor: pointer; }
.routes .mk__dot { fill: var(--ivory); }
.routes .mk__ring { fill: transparent; stroke: rgba(247,242,232,.35); }
.routes .mk.is-on .mk__dot { fill: #D9B57A; }
.routes .mk.is-on .mk__ring { stroke: #D9B57A; stroke-width: 2; }
@media (prefers-reduced-motion: no-preference) {
.xr .route { stroke-dashoffset: 400; }
.xr.is-drawn .route { animation: route-in 2.2s var(--ease) forwards; }
.xr.is-drawn .route:nth-of-type(2) { animation-delay: .15s; } .xr.is-drawn .route:nth-of-type(3) { animation-delay: .3s; }
.xr.is-drawn .route:nth-of-type(4) { animation-delay: .45s; } .xr.is-drawn .route:nth-of-type(5) { animation-delay: .6s; }
@keyframes route-in { to { stroke-dashoffset: 0; } }
}
.mkts { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line-dark); }
.mkt { width: 100%; display: grid; grid-template-columns: 2.25rem 1fr auto; align-items: center; gap: .75rem; padding: .95rem .25rem; background: none; border: 0; border-bottom: 1px solid var(--line-dark); color: var(--ivory); text-align: left; cursor: pointer; font: inherit; min-height: 3.25rem; transition: background .25s, padding .25s; }
.mkt__n { font: 700 .75rem var(--font-display); color: var(--brass); letter-spacing: .1em; }
.mkt__name { font: 600 1.15rem var(--font-display); }
.mkt .ico { width: 1rem; height: 1rem; opacity: .5; transition: transform .3s var(--ease), opacity .3s; }
.mkt:hover, .mkt[aria-pressed="true"] { background: rgba(247,242,232,.05); padding-left: .75rem; }
.mkt[aria-pressed="true"] .ico { opacity: 1; transform: translateX(4px); color: #E2C99F; }
.mkt:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
.xpanel { margin-top: 1.25rem; padding: 1.25rem; border: 1px solid rgba(176,141,87,.5); border-radius: var(--radius); display: grid; gap: .3rem; min-height: 9rem; align-content: start; }
.xpanel__hint { display: flex; gap: .75rem; align-items: center; color: var(--on-dark-muted); }
.xpanel__hint .ico { color: var(--brass); flex: none; }
.xpanel__k { font: 700 .625rem var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: #E2C99F; margin-top: .4rem; }
.xpanel__v { font: 600 1.25rem var(--font-display); color: var(--ivory); }
.xpanel__note { font-size: .875rem; color: var(--on-dark-muted); margin-block: .5rem .75rem; }
@media (prefers-reduced-motion: no-preference) { .xpanel > * { animation: rise .45s var(--ease) both; } }
/* ---------- India explorer ---------- */
.ix { display: grid; gap: var(--s4); align-items: center; }
.ix > * { min-width: 0; }
@media (min-width: 900px) { .ix { grid-template-columns: 7fr 5fr; gap: var(--s6); } }
.ix__map { position: relative; max-width: 34rem; width: 100%; margin-inline: auto; }
.ix__map .india { width: 100%; height: auto; display: block; overflow: visible; }
.india .d { fill: rgba(233,226,210,.36); }
.india .d-hot { fill: #D9B57A; transition: fill .4s; }
.india__pin line { stroke: #E2C99F; stroke-width: 1.4; }
.india__pin text { font: 800 22px var(--font-display); letter-spacing: .2em; fill: var(--ivory); }
.india__pin .pulse { fill: rgba(217,181,122,.18); stroke: #D9B57A; }
.ix.is-off .india .d-hot { fill: rgba(233,226,210,.36); }
.ix.is-off .ix__panel > :not(.ix__legend):not(.ix__note):not(.ix__k) { opacity: .35; }
.ix__hit { position: absolute; width: 3.25rem; height: 3.25rem; transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed rgba(226,201,159,.7); background: transparent; cursor: pointer; }
.ix__hit[aria-pressed="true"] { border-style: solid; }
.ix__hit:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; }
.ix__panel { display: grid; gap: .5rem; border-top: 1px solid rgba(176,141,87,.6); padding-top: 1.25rem; }
.ix__k { font: 700 .6875rem var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: #E2C99F; }
.ix__region { font: 700 clamp(3rem, 2rem + 4vw, 5rem) / .9 var(--font-display); letter-spacing: -.04em; color: var(--ivory); transition: opacity .3s; }
.ix__product { display: inline-flex; align-items: center; gap: .5rem; font: 700 1rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #E2C99F; }
.ix__line { font-size: 1.125rem; color: #E4E8E0; max-width: 26rem; }
.ix__legend { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .4rem; font-size: .875rem; color: var(--on-green-muted); }
.ix__legend li { display: flex; align-items: center; gap: .6rem; }
.sw { width: .7rem; height: .7rem; border-radius: 50%; background: rgba(233,226,210,.36); }
.sw--hot { background: #D9B57A; }
.ix__note { font-size: .75rem; color: var(--on-green-muted); opacity: .8; }
/* ---------- Exports hero ---------- */
.xhero { position: relative; overflow: hidden; background: var(--charcoal); color: var(--ivory); margin-top: var(--s2); }
.xhero__grid { position: relative; padding-block: var(--s6) var(--s7); }
.xhero h1 { color: var(--ivory); }
.xhero__lead { font: 500 var(--step-1) / 1.45 var(--font-display); color: #E4E8E0; max-width: 36rem; }
.xhero__word { position: absolute; right: -.04em; bottom: -.2em; font: 800 clamp(6rem, 2rem + 19vw, 21rem) / .8 var(--font-display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(226,201,159,.3); pointer-events: none; user-select: none; white-space: nowrap; }
.xhero .stack { position: relative; z-index: 1; }
/* ---------- Smart enquiry form ---------- */
.smart { gap: var(--s4); }
.smart__type { border: 0; margin: 0; padding: 0; min-width: 0; }
.smart__legend { font: 700 .75rem var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--green); margin-bottom: .9rem; padding: 0; }
.smart .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.smart .choice { border-color: var(--line-strong); background: var(--ivory); min-height: 4.25rem; }
.smart .choice__t { color: var(--green); font-size: 1rem; }
.smart .choice__d { color: var(--muted); }
.smart .choice:has(input:checked) { background: var(--green); border-color: var(--green); }
.smart .choice:has(input:checked) .choice__t { color: var(--ivory); }
.smart .choice:has(input:checked) .choice__d { color: var(--on-green-muted); }
.smart__set { border: 0; margin: 0; padding: 0; min-width: 0; }
@media (prefers-reduced-motion: no-preference) { .smart__set:not([hidden]) { animation: rise .45s var(--ease) both; } }
.smart__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
/* ---------- Journey chips (Our Story) ---------- */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.chip { display: inline-flex; align-items: center; gap: .6rem; min-height: 3rem; padding: .5rem 1.1rem; border: 1px solid var(--line-dark); border-radius: 999px; color: var(--ivory); text-decoration: none; font: 600 .9375rem var(--font-display); transition: background .25s, border-color .25s, transform .25s var(--ease); }
.chip span { font-size: .6875rem; color: var(--brass); letter-spacing: .1em; }
.chip:hover { background: var(--ivory); color: var(--green); border-color: var(--ivory); transform: translateY(-2px); }
/* ---------- Timelines with 7 steps; 5-step making ---------- */
@media (min-width: 900px) {
.timeline--7 .tls { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.timeline--7 .timeline__line { right: calc(100% / 7 - 2rem); }
.making--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 560px) and (max-width: 959px) { .making--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.making--5 .ico { width: 2rem; height: 2rem; }
.grow, .gpanel2, .gpanel2 > *, .grow__tabs > * { min-width: 0; }
.gpanel2__scene { width: 100%; }
.gpanel2__scene .scene { width: 100%; height: auto; max-width: 100%; }
@media (max-width: 480px) { .gtab2 { padding: .6rem .55rem; } .gtab2__t { font-size: .8125rem; } }
/* v7 fixes */
.world__stage, .grow { overflow: hidden; }
.gpanel2__scene { aspect-ratio: auto; }
.gpanel2__scene .scene { max-height: 19rem; }
.wstep__scene, .world__mprog { display: none; }
@media (max-width: 959px) {
.world__stage { display: none; }
.world__grid { display: block; }
.world__mprog { display: flex; align-items: center; gap: .75rem; position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--hdr)); z-index: 3; background: rgba(3,58,42,.94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: .7rem var(--gutter); border-bottom: 1px solid var(--line-dark); }
.world__mprog .world__bar { position: absolute; left: 0; right: auto; top: auto; bottom: -1px; width: 100%; height: 2px; }
.world__mlabel { font: 700 .6875rem var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: #E2C99F; }
.wstep { min-height: 0; opacity: 1; padding-block: var(--s4); border-bottom: 1px solid var(--line-dark); }
.wstep__scene { display: block; background: var(--green); border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden; aspect-ratio: 1 / .78; margin-bottom: .75rem; }
.wstep__scene .scene { width: 100%; height: 100%; }
.wstep:last-child { min-height: 0; }
}
/* Grade cards as editorial rows beside the size visual */
@media (min-width: 768px) {
.grades--scale .gcards { grid-template-columns: 1fr; gap: 0; border-top: 1px solid rgba(247,242,232,.12); }
.grades--scale .gcard { background: transparent; border: 0; border-bottom: 1px solid rgba(247,242,232,.12); border-radius: 0; padding: 1.4rem 0; grid-template-columns: 1fr auto; column-gap: 2rem; align-items: center; }
.grades--scale .gcard:hover { transform: none; box-shadow: none; background: rgba(247,242,232,.03); }
.grades--scale .gcard > :not(.gcard__actions) { grid-column: 1; }
.grades--scale .gcard__actions { grid-column: 2; grid-row: 1 / span 4; }
.grades--scale .gcard__desc { border-bottom: 0; padding-bottom: 0; }
}
/* A backdrop-filter makes the header the containing block for fixed children: drop it while the menu is open */
.site-header:has(.mobile-nav:not([hidden])) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--ivory); }
[hidden] { display: none !important; }
@media (min-width: 960px) { .water__grid { align-items: start; } .water__grid > .stack { position: sticky; top: calc(var(--hdr) + 4.5rem); } }
/* =====================================================================
v8 — story to supply
===================================================================== */
/* ---------- Hero: three routes + four-stage journey ---------- */
.hero3__ctas { gap: .75rem; }
.hero3__ctas { flex-wrap: wrap; }
@media (max-width: 899px) {
.hero3__media { bottom: auto; height: 54svh; }
.hero3__inner { padding-top: 38svh; }
}
@media (max-width: 559px) {
.hero3__ctas .btn { flex: 1 1 40%; justify-content: center; padding-inline: .6rem; font-size: .75rem; letter-spacing: .06em; }
.hero3__ctas .btn:first-child { flex-basis: 100%; }
.hero3__lead { font-size: 1rem; }
}
.hj { position: relative; margin-top: .5rem; max-width: 36rem; }
.hj ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.hj__line { position: absolute; left: .35rem; right: calc(25% - .35rem); top: .35rem; height: 1px; background: rgba(247,242,232,.25); }
.hj__line span { position: absolute; inset: 0; background: #D9B57A; transform-origin: left; transform: scaleX(1); }
.hj__stop { display: grid; gap: .3rem; justify-items: start; padding: 0 .4rem .4rem 0; color: var(--ivory); text-decoration: none; min-height: 2.75rem; position: relative; }
.hj__dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--charcoal); border: 1.5px solid #D9B57A; position: relative; z-index: 1; transition: background .3s, transform .3s var(--ease); }
.hj li:first-child .hj__dot { background: #D9B57A; }
.hj li:nth-child(2) .hj__dot { background: var(--ivory); border-color: var(--ivory); }
.hj__name { font: 700 .75rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.hj__role { font-size: .75rem; color: rgba(247,242,232,.62); line-height: 1.3; }
.hj__stop:hover .hj__dot, .hj__stop:focus-visible .hj__dot { transform: scale(1.4); }
.hj__stop:hover .hj__name { color: #E2C99F; }
.hj__stop:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
@media (max-width: 479px) { .hj__role { display: none; } .hj__name { font-size: .625rem; letter-spacing: .1em; } }
@media (prefers-reduced-motion: no-preference) {
.hj__line span { transform: scaleX(0); transition: transform 2.2s var(--ease) .6s; }
.hj.is-drawn .hj__line span { transform: scaleX(1); }
.hj li { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.hj.is-drawn li { opacity: 1; transform: none; }
.hj.is-drawn li:nth-child(2) { transition-delay: .9s; } .hj.is-drawn li:nth-child(3) { transition-delay: 1.4s; } .hj.is-drawn li:nth-child(4) { transition-delay: 1.9s; }
}
/* ---------- What are you looking for? ---------- */
.shortcut { background: var(--ivory); padding-block: clamp(2.5rem, 2rem + 2vw, 3.75rem); border-bottom: 1px solid var(--line); }
.shortcut__h { margin-bottom: 1.25rem; }
.scs { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
@media (min-width: 640px) { .scs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .scs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sc { position: relative; min-width: 0; }
.sc__main { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "i t g" "i d g"; column-gap: .9rem; row-gap: .15rem; align-items: center; padding: 1rem 3.4rem 1rem 1rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--charcoal); min-height: 4.75rem; transition: border-color .25s, transform .25s var(--ease), box-shadow .25s; }
.sc__main:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.sc__main:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.sc__icon { grid-area: i; color: var(--brass); }
.sc__t { grid-area: t; font: 700 1.0625rem var(--font-display); color: var(--green); }
.sc__d { grid-area: d; font-size: .8125rem; color: var(--muted); line-height: 1.4; }
.sc__go { grid-area: g; color: var(--green); }
.sc__go .ico { width: 1rem; height: 1rem; }
.sc__wa { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; color: var(--green); border: 1px solid var(--line); background: var(--ivory); }
.sc__wa:hover { background: var(--green); color: var(--ivory); }
.sc__wa .ico { width: 1.1rem; height: 1.1rem; }
.sc:has(.sc__wa) .sc__go { display: none; }
@media (min-width: 1024px) {
.sc__main { grid-template-columns: 1fr; grid-template-areas: "i" "t" "d"; row-gap: .5rem; padding: 1.25rem 1.25rem 1.25rem; min-height: 11rem; align-content: start; }
.sc__wa { top: auto; bottom: .9rem; transform: none; }
.sc__go { display: none; }
}
/* ---------- From origin to operations ---------- */
.sig { font: 600 var(--step-1) / 1.4 var(--font-display); color: var(--green); letter-spacing: -.01em; }
.ops { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.op { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "n name" "i role" "i d"; column-gap: 1.25rem; row-gap: .3rem; padding: 1.5rem 0 1.5rem 0; border-top: 1px solid var(--line-strong); min-width: 0; }
.op__n { grid-area: n; font: 700 .75rem var(--font-display); letter-spacing: .14em; color: var(--brass); align-self: center; }
.op__icon { grid-area: i; color: var(--green); align-self: start; }
.op__name { grid-area: name; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); font-weight: 700; letter-spacing: -.02em; }
.op__role { grid-area: role; font: 700 .75rem var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.op__d { grid-area: d; color: var(--muted); max-width: 30rem; }
#op-vizag .op__name::after { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--green); margin-left: .6rem; vertical-align: middle; }
@media (min-width: 900px) {
.ops { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); padding-top: 2.25rem; }
.ops__line { position: absolute; left: 0; right: 0; top: .35rem; height: 1px; background: var(--line-strong); }
.op { grid-template-columns: 1fr; grid-template-areas: "n" "i" "name" "role" "d"; border-top: 0; padding: 0; row-gap: .6rem; }
.op::before { content: ""; position: absolute; top: -2.25rem; left: 0; width: .75rem; height: .75rem; border-radius: 50%; background: var(--ivory); border: 1.5px solid var(--brass); }
#op-bihar::before { background: var(--brass); }
#op-vizag::before { background: var(--green); border-color: var(--green); }
#op-world::before { border-style: dashed; }
}
/* ---------- Shared map panel ---------- */
.mp { margin-top: 1rem; padding: 1.25rem; border: 1px solid rgba(176,141,87,.55); border-radius: var(--radius); display: grid; gap: .25rem; min-height: 10rem; align-content: start; background: rgba(3,58,42,.35); }
.mp__hint { display: flex; gap: .75rem; align-items: center; color: var(--on-green-muted); }
.mp__hint .ico { color: #D9B57A; flex: none; }
.mp__k { font: 700 .625rem var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: #E2C99F; margin-top: .4rem; }
.mp__city { font: 700 clamp(1.6rem, 1.3rem + 1vw, 2.1rem) / 1.05 var(--font-display); letter-spacing: -.02em; color: var(--ivory); }
.mp__note { font-size: .9375rem; color: var(--on-green-muted); margin-bottom: .75rem; }
.mp__status { display: inline-flex; align-items: center; gap: .45rem; width: fit-content; font: 700 .6875rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: #E2C99F; border: 1px dashed rgba(226,201,159,.7); border-radius: 999px; padding: .3rem .7rem; margin-block: .35rem .25rem; }
.mp__status .ico { width: .95rem; height: .95rem; }
.mp__select { width: 100%; min-height: 2.9rem; margin-bottom: .9rem; background: var(--ivory); color: var(--charcoal); border: 1px solid var(--ivory); border-radius: var(--radius); padding: .5rem .75rem; font: inherit; }
.mp .actions { gap: .6rem; }
@media (prefers-reduced-motion: no-preference) { .mp > * { animation: rise .45s var(--ease) both; } }
.sw { display: inline-block; flex: none; }
.sw--base { background: var(--ivory); box-shadow: 0 0 0 2px #D9B57A; }
.sw--city { background: transparent; border: 1.5px solid var(--ivory); }
.sw--dash { background: transparent; border: 1.5px dashed #E2C99F; }
/* ---------- India in motion ---------- */
.im { display: grid; gap: var(--s4); background: var(--green); color: var(--ivory); border-radius: var(--radius); padding: clamp(1rem, 3vw, 2.5rem); box-shadow: var(--shadow-2); }
.im > * { min-width: 0; }
@media (min-width: 960px) { .im { grid-template-columns: 7fr 5fr; gap: var(--s5); align-items: start; } }
.im__map { max-width: 34rem; width: 100%; margin-inline: auto; }
.india--motion { width: 100%; height: auto; display: block; overflow: visible; }
.im__legend { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .45rem; font-size: .875rem; color: var(--on-green-muted); }
.im__legend li { display: flex; align-items: center; gap: .65rem; }
.cities, .regions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); }
.city, .reg { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: .5rem; padding: .7rem .4rem; background: none; border: 0; border-bottom: 1px solid var(--line-dark); color: var(--ivory); text-align: left; cursor: pointer; font: inherit; min-height: 3.25rem; transition: background .25s; }
.cities li:nth-child(odd) .city, .regions li:nth-child(odd) .reg { border-right: 1px solid var(--line-dark); }
.city__name, .reg__name { font: 600 1rem var(--font-display); }
.city__k { grid-column: 1; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--on-green-muted); }
.city .ico, .reg .ico { grid-column: 2; grid-row: 1 / span 2; width: .95rem; height: .95rem; opacity: .45; transition: transform .3s var(--ease), opacity .3s; }
.city:hover, .reg:hover, .city[aria-pressed="true"], .reg[aria-pressed="true"] { background: rgba(247,242,232,.07); }
.city[aria-pressed="true"] .ico, .reg[aria-pressed="true"] .ico { opacity: 1; transform: translateX(3px); color: #E2C99F; }
.city[aria-pressed="true"] .city__name, .reg[aria-pressed="true"] .reg__name { color: #E2C99F; }
.city:focus-visible, .reg:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
.im__note { font-size: .75rem; color: var(--on-green-muted); opacity: .85; margin-top: .9rem; }
/* India map drawing (also used inside the story scenes) */
.india .d { fill: rgba(233,226,210,.3); stroke: none; }
.india .d-hot { fill: #D9B57A; stroke: none; }
.india .r-main { fill: none; stroke: #E2C99F; stroke-width: 2.6; stroke-dasharray: 7 7; }
.india .r-city { fill: none; stroke: rgba(226,201,159,.42); stroke-width: 1.6; stroke-dasharray: 3 6; transition: stroke .3s, stroke-width .3s; }
.india .r-city.is-on { stroke: var(--ivory); stroke-width: 2.6; stroke-dasharray: none; }
.india .cn { cursor: pointer; }
.india .cn__dot { fill: var(--ivory); stroke: none; }
.india .cn__ring { fill: transparent; stroke: rgba(247,242,232,.3); stroke-width: 1.2; }
.india .cn.is-on .cn__dot { fill: #E2C99F; }
.india .cn.is-on .cn__ring { stroke: #E2C99F; stroke-width: 2.4; }
.india text { font: 700 15px var(--font-display); letter-spacing: .1em; fill: #E9E2D2; stroke: none; }
.india .hub text { font-size: 17px; letter-spacing: .16em; fill: var(--ivory); }
.india .hub text.sub { font-size: 11px; letter-spacing: .2em; fill: #E2C99F; }
.india .hub circle:last-of-type { stroke: none; }
.india .hub--origin circle:not(.pulse) { fill: #D9B57A; }
.india .hub--base circle:not(.pulse) { fill: var(--ivory); stroke: #D9B57A; stroke-width: 3; }
.india .pulse { fill: rgba(217,181,122,.16); stroke: rgba(217,181,122,.7); stroke-width: 1.2; }
.india .mover { fill: var(--white); stroke: #D9B57A; stroke-width: 2; }
@media (max-width: 559px) { .im .cn text { display: none; } .im .india .hub text { font-size: 22px; } .im .india .hub text.sub { font-size: 14px; } }
@media (prefers-reduced-motion: no-preference) {
.india .r-main { animation: march 1.6s linear infinite; }
@keyframes march { to { stroke-dashoffset: -28; } }
.im .r-city, .im .cn { opacity: 0; transition: opacity .6s var(--ease), stroke .3s; }
.im.is-drawn .r-city, .im.is-drawn .cn { opacity: 1; transition-delay: calc(.4s + var(--i, 0) * .12s); }
.im.is-drawn .cn { transition-delay: .9s; }
}
@media (prefers-reduced-motion: reduce) { .india .mover { display: none; } }
/* ---------- Towards the world ---------- */
.wm { display: grid; gap: var(--s4); }
.wm > * { min-width: 0; }
@media (min-width: 1024px) { .wm { grid-template-columns: 8fr 4fr; align-items: start; } }
.wm__map { background: var(--dark); border: 1px solid var(--line-dark); border-radius: var(--radius); padding: clamp(.5rem, 2vw, 1.25rem); overflow: hidden; }
.wmap { width: 100%; height: auto; display: block; overflow: visible; }
.wmap .g { stroke: rgba(233,226,210,.08); stroke-width: 1; }
.wmap .d { fill: rgba(233,226,210,.35); stroke: none; }
.wmap .d-hot { fill: #D9B57A; stroke: none; }
.wmap .wr { fill: none; stroke: rgba(226,201,159,.4); stroke-width: 1.6; stroke-dasharray: 5 7; transition: stroke .3s, stroke-width .3s; }
.wmap .wr.is-on { stroke: #E2C99F; stroke-width: 2.6; }
.wmap .rn { cursor: pointer; }
.wmap .rn__dot { fill: transparent; stroke: var(--ivory); stroke-width: 2; }
.wmap .rn__ring { fill: transparent; stroke: rgba(247,242,232,.22); stroke-dasharray: 3 4; }
.wmap .rn.is-on .rn__dot { fill: #E2C99F; stroke: #E2C99F; }
.wmap .rn.is-on .rn__ring { stroke: #E2C99F; }
.wmap text { font: 700 19px var(--font-display); letter-spacing: .1em; fill: #E9E2D2; stroke: none; }
.wmap .worigin circle:not(.pulse) { fill: #D9B57A; stroke: none; }
.wmap .worigin text { fill: #E2C99F; letter-spacing: .24em; font-size: 17px; }
.wmap .pulse { fill: rgba(217,181,122,.16); stroke: rgba(217,181,122,.7); }
@media (max-width: 639px) { .wm .rn text { display: none; } }
.wm__status { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .8125rem; color: var(--on-dark-muted); margin-bottom: 1rem; }
.wm__status span { display: inline-flex; align-items: center; gap: .5rem; }
.wm__status i { width: .7rem; height: .7rem; border-radius: 50%; }
.wm__status .sw--dash { background: transparent; border: 1.5px dashed #E2C99F; }
.mp--dark { background: rgba(255,255,255,.02); }
@media (prefers-reduced-motion: no-preference) {
.wm .wr { stroke-dashoffset: 300; opacity: 0; }
.wm.is-drawn .wr { animation: wr-in 1.8s var(--ease) forwards; animation-delay: calc(var(--i) * .12s); }
@keyframes wr-in { to { stroke-dashoffset: 0; opacity: 1; } }
}
/* ---------- Story scenes: 14 chapters ---------- */
[data-stage="11"] .sc-11, [data-stage="12"] .sc-12, [data-stage="13"] .sc-13, [data-stage="14"] .sc-14 { opacity: 1; }
.wstep__scene .sc { opacity: 1; }
.scene .spiky { fill: rgba(233,226,210,.07); stroke: #E9E2D2; }
.scene .pk { stroke: rgba(233,226,210,.22); stroke-width: 1; }
.scene .flower .pv { fill: rgba(140,104,170,.45); stroke: #CDB6E2; }
.scene .flower .pw { fill: rgba(247,242,232,.18); stroke: #E9E2D2; }
.scene .sd circle { fill: #1A1410; stroke: #E2C99F; }
.scene .sd-up { fill: #1A1410; stroke: #E2C99F; }
.scene .mat { stroke: #E2C99F; stroke-width: 3; }
.scene .drop .u { color: rgba(226,201,159,.8); }
.scene .g4 polygon, .scene .g5 polygon, .scene .g6 polygon { fill: #F4EDE0; }
.scene .india--scene .r-main { stroke-width: 3.4; }
.scene .india--scene text { font-size: 19px; }
.scene .wmap--scene text { font-size: 24px; }
.world__progress li { cursor: default; }
.world__progress li button { position: absolute; left: 50%; top: -1.6rem; width: 1.6rem; height: 1.6rem; transform: translateX(-50%); background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; }
.world__progress li button:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.world__label { font: 700 .6875rem var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: #E2C99F; margin-bottom: .25rem; }
.world__stage { grid-template-rows: auto 1fr auto; }
.wstep__more { max-width: 30rem; border-top: 1px solid var(--line-dark); padding-top: .5rem; }
.wstep__more summary { cursor: pointer; font: 700 .75rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #E2C99F; padding-block: .4rem; min-height: 2.75rem; display: flex; align-items: center; gap: .5rem; list-style: none; }
.wstep__more summary::-webkit-details-marker { display: none; }
.wstep__more summary::before { content: "+"; font-size: 1rem; width: 1rem; }
.wstep__more[open] summary::before { content: "–"; }
.wstep__more p { color: #C9D2C8; font-size: .9375rem; max-width: 28rem; }
.wstep__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: .25rem; }
.wstep__next { font: 600 .8125rem var(--font-display); letter-spacing: .06em; color: rgba(247,242,232,.6); text-decoration: none; border-bottom: 1px solid transparent; }
.wstep__next:hover { color: var(--ivory); border-bottom-color: var(--brass); }
@media (min-width: 960px) { .wstep { min-height: 62svh; } .wstep:last-child { min-height: 70svh; } }
@media (prefers-reduced-motion: no-preference) {
[data-stage="4"] .sd, .wstep__scene .sc-4 .sd { animation: sink 3.2s var(--ease) both; animation-delay: calc(var(--i) * .15s); }
[data-stage="5"] .sd-up { animation: rise .8s var(--ease) both; animation-delay: calc(var(--i) * .12s); }
[data-stage="8"] .pstep { animation: rise .7s var(--ease) both; animation-delay: calc(var(--i) * .2s); }
[data-stage="9"] .pop { animation: popin .9s var(--ease) both; transform-box: fill-box; transform-origin: center; }
[data-stage="6"] .drop { animation: fall 2.4s ease-in infinite; animation-delay: calc(var(--i) * .3s); }
@keyframes fall { from { opacity: 0; translate: 0 -20px; } 30% { opacity: 1; } to { opacity: 0; translate: 0 90px; } }
}
/* ---------- Process scrubber ---------- */
.scrub__title { margin-bottom: 1.25rem; }
.scrub { display: grid; gap: var(--s4); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 3vw, 2.25rem); box-shadow: var(--shadow-1); }
.scrub > * { min-width: 0; }
@media (min-width: 900px) { .scrub { grid-template-columns: 6fr 5fr; align-items: center; gap: var(--s5); } }
.scrub__stage { background: var(--ivory); border-radius: var(--radius); }
.scrub__stage svg { width: 100%; height: auto; display: block; }
.scene--light { fill: none; stroke: var(--green); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.scene--light text { stroke: none; fill: var(--green); font-family: var(--font-display); }
.scene--light .sc-num { font-size: 52px; font-weight: 800; fill: var(--green); }
.scene--light .sc-word { font-size: 60px; font-weight: 800; letter-spacing: .14em; fill: var(--green); }
.scene--light .sc-lbl { font-size: 13px; font-weight: 700; letter-spacing: .16em; fill: var(--muted); }
.scene--light .raw { fill: #1A1410; stroke: none; }
.scene--light .ring { stroke: var(--line-strong); fill: var(--white); }
.scene--light .u { color: var(--green); }
.scene--light .pop polygon { fill: #F2EADC; stroke: rgba(32,36,33,.25); stroke-width: 1; }
.scene--light .pop .fleck { fill: #7A4A33; stroke: none; }
.scene--light .shell path { fill: #2A211B; stroke: none; }
.scene--light .arrow-l { stroke: var(--brass); }
.scrub .ps { transition: opacity .5s var(--ease); }
.scrub.is-js .ps { opacity: 0; }
.scrub:not(.is-js) .ps:not(.ps-3) { display: none; }
.scrub[data-state="1"] .ps-1, .scrub[data-state="2"] .ps-2, .scrub[data-state="3"] .ps-3, .scrub[data-state="4"] .ps-4, .scrub[data-state="5"] .ps-5 { opacity: 1; }
.scrub__body { display: grid; gap: 1rem; }
.scrub__range { width: 100%; accent-color: var(--green); min-height: 2.75rem; cursor: pointer; }
.scrub__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; }
.pstate { width: 100%; display: grid; gap: .15rem; justify-items: center; text-align: center; padding: .5rem .2rem; min-height: 3.25rem; background: none; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; font: inherit; color: var(--muted); transition: background .25s, color .25s, border-color .25s; }
.pstate__n { font: 700 .6875rem var(--font-display); color: var(--brass); letter-spacing: .1em; }
.pstate__t { font: 600 .75rem / 1.2 var(--font-display); }
.pstate[aria-pressed="true"] { background: var(--green); color: var(--ivory); }
.pstate[aria-pressed="true"] .pstate__n { color: #E2C99F; }
.pstate:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.scrub.is-js .ptext { display: none; }
.scrub[data-state="1"] .ptext[data-s="1"], .scrub[data-state="2"] .ptext[data-s="2"], .scrub[data-state="3"] .ptext[data-s="3"],
.scrub[data-state="4"] .ptext[data-s="4"], .scrub[data-state="5"] .ptext[data-s="5"] { display: grid; }
.scrub:not(.is-js) .scrub__range, .scrub:not(.is-js) .scrub__steps { display: none; }
.scrub:not(.is-js) .scrub__texts { display: grid; gap: 1rem; }
.ptext { gap: .35rem; min-height: 7.5rem; align-content: start; }
.ptext__k { font: 700 .6875rem var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.ptext__h { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); font-weight: 700; letter-spacing: -.02em; }
.ptext p:last-child { color: var(--muted); }
.scrub__note { font-size: .75rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: .75rem; }
@media (prefers-reduced-motion: no-preference) { .scrub.is-js .ptext { animation: rise .4s var(--ease) both; } }
@media (max-width: 479px) { .pstate__t { font-size: .625rem; } }
/* ---------- Finder additions ---------- */
.choice--help { border-style: dashed; }
.choice--help .choice__t { color: #E2C99F; }
.finder__note { color: var(--on-green-muted); font-size: .9375rem; max-width: 34rem; }
/* ---------- Roadmap ---------- */
.rm { display: grid; gap: var(--s3); }
@media (min-width: 900px) { .rm { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rm__card { display: grid; gap: .75rem; align-content: start; padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); min-width: 0; }
.rm__card--next { background: var(--green); border-color: var(--green); color: var(--ivory); }
.rm__card--next .eyebrow { color: #E2C99F; }
.rm__card--next .rm__h { color: var(--ivory); }
.rm__card--next .rm__p { color: var(--on-green-muted); }
.rm__h { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); font-weight: 700; letter-spacing: -.02em; }
.rm__p { color: var(--muted); max-width: 32rem; }
.rm__p--sm { font-size: .875rem; }
.mkps { list-style: none; margin: .25rem 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.mkp { display: grid; gap: .2rem; padding: .8rem .9rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.mkp__name { font: 700 1rem var(--font-display); color: var(--green); }
.mkp__tag { font: 700 .625rem var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line-strong); min-width: 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1.1rem 0; min-height: 3.25rem; font: 600 1.0625rem var(--font-display); color: var(--green); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--brass); flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.faq details > div { padding: 0 0 1.25rem; color: var(--muted); max-width: 40rem; }
/* ---------- Smart form additions ---------- */
.smart__preview textarea { min-height: 8.5rem; font-size: .9375rem; line-height: 1.5; background: var(--ivory); }
.linkbtn { justify-self: start; background: none; border: 0; padding: .4rem 0; min-height: 2.75rem; font: 600 .8125rem var(--font-display); color: var(--green); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: .2em; cursor: pointer; }
.linkbtn:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.smart__actions .btn { flex: 1 1 14rem; justify-content: center; }
@media (min-width: 900px) { .hero3__copy { max-width: 41rem; } .hero3__ctas { flex-wrap: nowrap; } .hero3__ctas .btn { padding-inline: 1.15rem; } .hero3__lead, .hj { max-width: 34rem; } }
@media (min-width: 900px) and (max-width: 1279px) {
.hero3__media { left: 46%; }
.hero3__copy { max-width: 31rem; }
.hero3__ctas { flex-wrap: wrap; }
}
/* Journey strip: columns sized to their names, connectors per stop */
.hj__line { display: none; }
.hj ol { grid-template-columns: repeat(4, auto); justify-content: start; column-gap: clamp(.9rem, 2.5vw, 1.75rem); }
.hj li { position: relative; min-width: 0; }
.hj li:not(:last-child)::after { content: ""; position: absolute; top: .35rem; left: .7rem; right: calc(-1 * clamp(.9rem, 2.5vw, 1.75rem)); height: 1px; background: #D9B57A; opacity: .8; transform-origin: left; }
.hj__role { max-width: 9.5rem; }
@media (prefers-reduced-motion: no-preference) {
.hj li:not(:last-child)::after { transform: scaleX(0); transition: transform .6s var(--ease); }
.hj.is-drawn li:not(:last-child)::after { transform: scaleX(1); }
.hj.is-drawn li:nth-child(1)::after { transition-delay: .5s; } .hj.is-drawn li:nth-child(2)::after { transition-delay: 1s; } .hj.is-drawn li:nth-child(3)::after { transition-delay: 1.5s; }
}
@media (max-width: 479px) { .hj ol { column-gap: .8rem; } .hj li:not(:last-child)::after { right: -.8rem; } }
.hj li { min-width: auto; }
@media (prefers-reduced-motion: no-preference) {
.hj.is-drawn li:nth-child(2) { transition-delay: .35s; } .hj.is-drawn li:nth-child(3) { transition-delay: .7s; } .hj.is-drawn li:nth-child(4) { transition-delay: 1.05s; }
.hj.is-drawn li:nth-child(1)::after { transition-delay: .15s; } .hj.is-drawn li:nth-child(2)::after { transition-delay: .5s; } .hj.is-drawn li:nth-child(3)::after { transition-delay: .85s; }
}
.scene .hole { fill: #033A2A; stroke: rgba(233,226,210,.5); }
.scene .flower .sepal, .scene .bud .sepal { fill: rgba(106,140,96,.55); stroke: #C9D8B8; }
.scene .flower .pv { fill: rgba(146,104,186,.75); stroke: #D9C3EE; }
#op-vizag .op__name::after { content: none; }
.op__name { font-size: clamp(1.5rem, 1.15rem + .9vw, 2rem); overflow-wrap: anywhere; }
#operations, #india-motion, #world-map, #find, #faq, #enquiry, #details { scroll-margin-top: calc(var(--hdr) + 1rem); }
.wstep { scroll-margin-top: calc(var(--hdr) + 3.5rem); }
/* Keep focused or scrolled-to elements clear of the phone action bar */
@media (max-width: 767px) { html { scroll-padding-bottom: 4.5rem; } }
@media (prefers-reduced-motion: reduce) { .wstep, .world__bar, .scene .sc, .scrub .ps, .gscale__pop { transition: none !important; } }
/* =====================================================================
v8.1 — precision pass
===================================================================== */
/* Story media: photograph when supplied, labelled illustration otherwise */
.world__scene { position: relative; }
.wphoto { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--ease); border-radius: var(--radius); overflow: hidden; }
.wphoto.is-on { opacity: 1; }
.wphoto .slot, .wphoto .photo { height: 100%; aspect-ratio: auto !important; margin: 0; }
.wphoto img, .wstep__scene--photo img { width: 100%; height: 100%; object-fit: cover; }
.wtag { position: absolute; left: .6rem; bottom: .6rem; z-index: 2; font: 700 .5625rem var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: rgba(247,242,232,.8); background: rgba(3,58,42,.72); border: 1px solid var(--line-dark); padding: .3rem .5rem; border-radius: 999px; }
.wstep__scene { position: relative; }
.wstep__scene--photo .slot, .wstep__scene--photo .photo { height: 100%; aspect-ratio: auto !important; margin: 0; }
@media (prefers-reduced-motion: no-preference) {
.wphoto.is-on img { animation: drift-zoom 14s ease-in-out infinite alternate; }
}
.world__scene { margin-bottom: .6rem; }
/* India: Visakhapatnam as the hub, flow, reach */
.india--motion { overflow: hidden; }
.india .reach circle { fill: none; stroke: rgba(226,201,159,.22); stroke-width: 1.2; stroke-dasharray: 2 7; }
.india .reach text { font-size: 13px; letter-spacing: .2em; fill: rgba(226,201,159,.75); }
.india .hub--base .base-ring { fill: rgba(247,242,232,.08); stroke: var(--ivory); stroke-width: 2; }
.india .hub--base .base-core { fill: var(--ivory); stroke: #D9B57A; stroke-width: 3; }
.india .hub--base .base-tag { fill: rgba(3,58,42,.9); stroke: #D9B57A; stroke-width: 1.2; }
.india .hub--base .base-name { font-size: 18px; letter-spacing: .14em; fill: var(--ivory); }
.india .hub--base .sub { font-size: 10.5px; }
.india .hub--base .pulse { fill: rgba(247,242,232,.06); stroke: rgba(247,242,232,.55); }
.india .mover--sm { fill: #E2C99F; stroke: none; }
.india .cn.hub--base.is-on .base-core { fill: #E2C99F; }
@media (prefers-reduced-motion: no-preference) {
.pulse--2 { animation-delay: -1.2s !important; }
.india .hub--base .pulse { animation-duration: 2.8s; }
}
.flow { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: 0; counter-reset: f; }
.flow li { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: .7rem; align-items: center; padding: .35rem 0 .35rem 0; }
.flow li .sw { grid-row: span 2; }
.flow b { font: 700 .9375rem var(--font-display); color: var(--ivory); }
.flow small { grid-column: 2; font-size: .75rem; color: var(--on-green-muted); letter-spacing: .02em; }
.flow li:not(:last-child)::after { content: ""; position: absolute; left: .33rem; top: 1.7rem; bottom: -.5rem; width: 1px; background: rgba(226,201,159,.5); }
.flow__base b { color: #E2C99F; font-size: 1.0625rem; }
.flow__base .sw { width: .9rem; height: .9rem; margin-left: -.1rem; }
.city--other .city__name { color: #E2C99F; }
.cities__other { grid-column: 1 / -1; }
.cities__other .city { border-right: 0 !important; }
/* World: intentional schematic */
.wmap .ring-d { fill: none; stroke: rgba(233,226,210,.07); stroke-width: 1; stroke-dasharray: 2 6; }
.wmap .halo { fill: rgba(226,201,159,.0); stroke: none; transition: fill .4s var(--ease); }
.wmap .halo.is-hover { fill: rgba(226,201,159,.07); }
.wmap .halo.is-on { fill: rgba(226,201,159,.13); }
.wmap .wr.is-hover { stroke: rgba(226,201,159,.8); }
.wmap .rn.is-hover .rn__ring, .wmap .rn:hover .rn__ring { stroke: #E2C99F; stroke-dasharray: none; }
.wmap .spark { fill: #E2C99F; stroke: none; opacity: .85; }
.wmap .wr-lbl { font-size: 11px; letter-spacing: .2em; fill: #E2C99F; opacity: 0; transition: opacity .4s; }
.wmap .wr-lbl.is-on { opacity: 1; }
.wmap .wnote { font-size: 11px; letter-spacing: .2em; fill: rgba(233,226,210,.35); }
.wmap .worigin .pulse--2 { animation-delay: -1.2s; }
@media (prefers-reduced-motion: reduce) { .wmap .spark { display: none; } }
@media (max-width: 639px) { .wmap .wr-lbl, .wmap .wnote { display: none; } }
.wm__stages { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
@media (min-width: 640px) { .wm__stages { grid-template-columns: 1fr 1fr; } }
.wm__stages li { display: grid; gap: .25rem; padding: 1rem 1.1rem; border: 1px dashed rgba(226,201,159,.45); border-radius: var(--radius); }
.wm__stages li.is-now { border-style: solid; border-color: #D9B57A; background: rgba(217,181,122,.07); }
.wm__stages b { font: 600 1.0625rem / 1.3 var(--font-display); color: var(--ivory); }
.wm__stages small { font-size: .8125rem; color: var(--on-dark-muted); }
.wm__k { font: 700 .625rem var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: #E2C99F; }
/* Compact enquiry line */
.cta-line { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; margin-top: var(--s4); padding-top: 1.1rem; border-top: 1px solid var(--line); }
.cta-line__q { font: 600 1rem var(--font-display); color: var(--green); margin: 0; }
.cta-line__go { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .55rem 1rem; background: var(--green); color: var(--ivory); text-decoration: none; font: 700 .75rem var(--font-display); letter-spacing: .1em; text-transform: uppercase; border-radius: var(--radius); }
.cta-line__go:hover { background: var(--charcoal); }
.cta-line__go .ico { width: 1rem; height: 1rem; }
.cta-line__wa { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; font: 700 .75rem var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--green); text-decoration: none; }
.cta-line__wa .ico { width: 1rem; height: 1rem; color: var(--brass); }
.cta-line__alt { font-size: .875rem; color: var(--muted); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: .2em; }
.cta-line--dark { border-top-color: var(--line-dark); }
.cta-line--dark .cta-line__q, .cta-line--dark .cta-line__wa { color: var(--ivory); }
.cta-line--dark .cta-line__go { background: var(--ivory); color: var(--green); }
.cta-line--dark .cta-line__go:hover { background: var(--white); }
.cta-line--dark .cta-line__alt { color: var(--on-green-muted); }
.cta-line a:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
/* Without JavaScript: show everything statically, never leave content invisible */
html:not(.js) .hj li { opacity: 1 !important; transform: none !important; }
html:not(.js) .hj li::after { transform: none !important; }
html:not(.js) .im .r-city, html:not(.js) .im .cn, html:not(.js) .wm .wr { opacity: 1 !important; stroke-dashoffset: 0 !important; animation: none !important; }
html:not(.js) .world__stage, html:not(.js) .world__mprog { display: none; }
html:not(.js) .world__grid { display: block; }
html:not(.js) .wstep { opacity: 1; min-height: 0; padding-block: var(--s4); border-bottom: 1px solid var(--line-dark); }
html:not(.js) .wstep__scene { display: block; background: var(--green); border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden; aspect-ratio: 1 / .78; max-width: 32rem; margin-bottom: .75rem; }
html:not(.js) .wstep__scene .scene { width: 100%; height: 100%; }
html:not(.js) .smart__type, html:not(.js) .smart__set, html:not(.js) .smart__preview, html:not(.js) .mp__hint { display: none !important; }
html:not(.js) .city, html:not(.js) .reg { pointer-events: none; cursor: default; }
html:not(.js) .city .ico, html:not(.js) .reg .ico { display: none; }
.wtag { bottom: auto; top: .6rem; }
html:not(.js) .smart .form-note { display: none; }
/* =====================================================================
v9 — art direction
===================================================================== */
:root { --terra: #A6533B; }
/* ---------- OO wordmark: the two Os as seed-like rings ---------- */
.wmk { display: inline-flex; align-items: baseline; }
.wmk > span { letter-spacing: inherit; }
.oo { width: .8em; height: .8em; margin-right: .22em; transform: translateY(.035em); overflow: visible; flex: none; }
.oo + .oo { margin-left: -.02em; }
.oo-r { fill: none; stroke: currentColor; stroke-width: 17; }
.oo-c { fill: none; stroke: currentColor; stroke-width: 2.4; opacity: .5; }
.oo-f { fill: currentColor; opacity: .55; }
.hero3__mark .oo-c { stroke-width: 1.6; opacity: .6; }
.hero3__mark .oo-f { opacity: .7; }
.hero3__mark .oo-c, .hero3__mark .oo-f { stroke: #E2C99F; }
.hero3__mark .oo-f { fill: #E2C99F; }
@media (prefers-reduced-motion: no-preference) {
.hero3__mark .oo-c { stroke-dasharray: 200; stroke-dashoffset: 200; animation: oo-draw 2.4s 1s var(--ease) forwards; }
.hero3__mark .oo + .oo .oo-c { animation-delay: 1.3s; }
@keyframes oo-draw { to { stroke-dashoffset: 0; } }
}
/* ---------- Header: large at top, refined on scroll ---------- */
.site-header .wordmark { font-size: 1.45rem; }
.site-header.is-scrolled .wordmark { font-size: 1.15rem; }
.nav ul { gap: clamp(1.25rem, 2.4vw, 2.6rem); }
.nav a { font: 700 .75rem var(--font-display); letter-spacing: .18em; text-transform: uppercase; }
.header-link { display: none; font: 700 .75rem var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--green); text-decoration: none; padding: .5rem .25rem; border-bottom: 1px solid transparent; }
.header-link:hover, .header-link[aria-current="page"] { border-bottom-color: var(--brass); color: var(--green); }
.header-wa { display: none; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--green); }
.header-wa:hover { background: var(--green); color: var(--ivory); }
.header-wa .ico { width: 1.15rem; height: 1.15rem; }
.header-enquire .arr { font-size: 1em; line-height: 1; }
@media (min-width: 640px) { .header-wa { display: grid; } }
@media (min-width: 1080px) { .header-link { display: inline-block; } }
@media (min-width: 1080px) and (max-width: 1239px) { .nav ul { gap: 1.1rem; } .nav a, .header-link { letter-spacing: .12em; } }
/* ---------- Mobile: full-screen menu ---------- */
.mobile-nav { top: 0 !important; z-index: 60; padding-top: calc(env(safe-area-inset-top, 0px) + 5rem); background: var(--ivory); }
.site-header:has(.mobile-nav:not([hidden])) .header-bar { position: relative; z-index: 61; }
.mn { list-style: none; margin: 0; padding: var(--s3) var(--gutter) 0; }
.mn li a { display: flex; align-items: baseline; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font: 700 clamp(1.7rem, 1.2rem + 3vw, 2.4rem) / 1.15 var(--font-display); letter-spacing: -.02em; color: var(--green); text-decoration: none; }
.mn__n { font: 700 .6875rem var(--font-display); letter-spacing: .14em; color: var(--brass); min-width: 1.6rem; }
.mn li a[aria-current="page"] { color: var(--terra); }
.mobile-nav__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: var(--s4) var(--gutter) 0; }
.mna { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.4rem; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--green); text-decoration: none; font: 700 .75rem var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.mna--wa { background: var(--green); color: var(--ivory); border-color: var(--green); }
.mna--enq { grid-column: 1 / -1; background: var(--charcoal); color: var(--ivory); border-color: var(--charcoal); }
.mobile-nav .btn { margin-top: 0; }
/* ---------- Footer ---------- */
.footer-links--row { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.footer-contact a { display: inline-flex; align-items: center; gap: .6rem; }
.wmk { gap: 0 !important; column-gap: 0 !important; }
.hero3__mark { display: inline-flex; align-items: flex-start; }
.hero3__mark sup { position: static; margin-top: .1em; }
.mn li a[aria-current="page"]::before { content: none; }
/* ---------- Cinematic hero ---------- */
.hero3__media .slot { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.hero3__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero3__fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero3__light { position: absolute; inset: -20%; background: radial-gradient(40% 35% at 30% 30%, rgba(255,236,200,.22), transparent 70%); mix-blend-mode: soft-light; }
.hero3__grain { position: absolute; inset: 0; opacity: .14; mix-blend-mode: overlay;
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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero3__dust i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: rgba(255,245,225,.75); filter: blur(.4px); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
.hero3__light { animation: light-move 16s ease-in-out infinite alternate; }
@keyframes light-move { from { transform: translate(-6%, -4%); } to { transform: translate(18%, 10%); } }
.hero3__grain { animation: grain 1.2s steps(4) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } 100% { transform: translate(0, 0); } }
.hero3__dust i { animation: dust 11s var(--d) ease-in-out infinite; }
@keyframes dust { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: .7; } 80% { opacity: .5; } 100% { opacity: 0; transform: translateY(-90px) translateX(16px); } }
}
@media (prefers-reduced-motion: reduce) { .hero3__video { display: none; } .hero3__dust { display: none; } }
/* ---------- Commercial paths: four distinct routes ---------- */
.shortcut { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.scs--v9 { gap: 0; border: 1px solid var(--line-strong); }
@media (min-width: 640px) { .scs--v9 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .scs--v9 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.scs--v9 .sc { position: relative; min-width: 0; }
.scs--v9 .sc + .sc { border-top: 1px solid var(--line-strong); }
@media (min-width: 640px) { .scs--v9 .sc + .sc { border-top: 0; } .scs--v9 .sc:nth-child(even) { border-left: 1px solid var(--line-strong); } .scs--v9 .sc:nth-child(n+3) { border-top: 1px solid var(--line-strong); } }
@media (min-width: 1024px) { .scs--v9 .sc:nth-child(n+2) { border-left: 1px solid var(--line-strong); border-top: 0; } }
.scs--v9 .sc__main { display: grid; grid-template-columns: 1fr; grid-template-areas: "i" "t" "d" "g"; gap: .4rem; padding: clamp(1.25rem, 2.5vw, 2rem); padding-right: 4rem; min-height: 0; border: 0; border-radius: 0; background: var(--bg, var(--white)); color: var(--fg, var(--green)); transition: background .35s var(--ease); box-shadow: none; transform: none; }
@media (min-width: 1024px) { .scs--v9 .sc__main { min-height: 15rem; padding-right: clamp(1.25rem, 2.5vw, 2rem); } }
.scs--v9 .sc__main:hover { transform: none; box-shadow: none; filter: brightness(1.04); }
.scs--v9 .sc__icon { color: var(--accent, var(--brass)); margin-bottom: .4rem; }
.scs--v9 .sc__t { font: 800 clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem) / 1 var(--font-display); letter-spacing: -.02em; color: inherit; }
.scs--v9 .sc__d { font-size: .9375rem; color: inherit; opacity: .78; }
.scs--v9 .sc__go { display: inline-flex !important; align-items: center; gap: .4rem; margin-top: .6rem; font: 700 .6875rem var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: inherit; }
.scs--v9 .sc__go .ico { width: .95rem; height: .95rem; transition: transform .3s var(--ease); }
.scs--v9 .sc__main:hover .sc__go .ico { transform: translateX(4px); }
.scs--v9 .sc__wa { top: 1rem; right: 1rem; bottom: auto !important; transform: none; background: transparent; border-color: currentColor; color: var(--fg, var(--green)); }
.sc--wholesale { --bg: var(--green); --fg: var(--ivory); --accent: #E2C99F; }
.sc--bulk { --bg: var(--charcoal); --fg: var(--ivory); --accent: #E2C99F; }
.sc--export { --bg: var(--ivory-deep); --fg: var(--green); --accent: var(--brass); }
.sc--general { --bg: var(--white); --fg: var(--charcoal); --accent: var(--terra); }
.sc--wholesale .sc__wa, .sc--bulk .sc__wa { color: var(--ivory); }
/* ---------- What is makhana? ---------- */
.wi { display: grid; gap: var(--s4); align-items: center; }
.wi > * { min-width: 0; }
@media (min-width: 900px) { .wi { grid-template-columns: 7fr 5fr; gap: var(--s6); } }
.wi__visual { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; background: var(--green); box-shadow: var(--shadow-2); }
.wi__layer { position: absolute; inset: 0; opacity: 0; transform: scale(1.08); transition: opacity .8s var(--ease), transform 1.4s var(--ease); display: grid; place-items: center; }
.wi__layer svg, .wi__layer img { width: 100%; height: 100%; object-fit: cover; }
.wi[data-wi="grows"] .wi__layer--grows, .wi[data-wi="produces"] .wi__layer--produces, .wi[data-wi="consume"] .wi__layer--consume { opacity: 1; transform: scale(1); }
.wi__layer--produces { background: radial-gradient(80% 70% at 40% 35%, #2B3A30, #13241D); }
.wi-svg .rs ellipse { fill: #191411; stroke: rgba(226,201,159,.35); stroke-width: 1.2; }
.wi-svg .rs-h { fill: none; stroke: rgba(255,240,220,.28); stroke-width: 3; stroke-linecap: round; }
.wi-svg .rs-m { fill: rgba(226,201,159,.55); }
.wi__latin { font-size: 1rem; color: var(--muted); margin-bottom: 1.25rem; }
.wi-pts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.wi-pt { width: 100%; display: grid; grid-template-columns: 2.25rem 1fr; grid-template-areas: "n t" "n k"; align-items: baseline; text-align: left; padding: 1rem 0; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; font: inherit; color: var(--charcoal); transition: padding .3s var(--ease); }
.wi-pt__n { grid-area: n; font: 700 .75rem var(--font-display); color: var(--brass); letter-spacing: .1em; }
.wi-pt__t { grid-area: t; font: 700 1.25rem var(--font-display); color: var(--green); letter-spacing: -.01em; }
.wi-pt__k { grid-area: k; font: 700 .6875rem var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.wi-pt[aria-selected="true"] { padding-left: .75rem; box-shadow: inset 3px 0 0 var(--terra); }
.wi-pt[aria-selected="true"] .wi-pt__t { color: var(--terra); }
.wi-pt:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.wi-ps { min-height: 5.5rem; padding-top: 1rem; }
.wi-p { color: var(--charcoal); font-size: 1.0625rem; max-width: 30rem; }
.wi.is-js .wi-p { display: none; }
.wi[data-wi="grows"] .wi-p[data-wi="grows"], .wi[data-wi="produces"] .wi-p[data-wi="produces"], .wi[data-wi="consume"] .wi-p[data-wi="consume"] { display: block; }
html:not(.js) .wi-p { display: block; margin-bottom: .6rem; }
@media (prefers-reduced-motion: reduce) { .wi__layer { transition: none; transform: none; } }
.wi-svg .rs polygon { fill: #1B1612; stroke: rgba(226,201,159,.22); stroke-width: 1; stroke-linejoin: round; }
.wi-svg .rs-h { stroke: rgba(255,240,220,.12); stroke-width: 2.4; }
.wi-svg .rs-m { fill: rgba(226,201,159,.4); }
@media (max-width: 639px) { .scs--v9 .sc__icon { display: none; } .scs--v9 .sc__main { padding-block: 1.1rem; } .scs--v9 .sc__t { font-size: 1.5rem; } .scs--v9 .sc__go { margin-top: .2rem; } }
/* ---------- From water to world: documentary layout (desktop) ---------- */
.world__num { display: none; }
@media (min-width: 960px) {
.world { padding-bottom: 0; }
.world__grid { display: grid; grid-template-columns: 1fr; max-width: none; padding-inline: 0; }
.world__stage { grid-area: 1 / 1; position: sticky; top: var(--hdr); height: calc(100svh - var(--hdr)); max-height: none; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; z-index: 0; display: block; overflow: hidden;
background: radial-gradient(70% 80% at 32% 50%, #173F35 0%, #033A2A 75%); }
.world__label { position: absolute; left: max(var(--gutter), calc(50% - 38rem + var(--gutter))); top: 1.5rem; z-index: 3; }
.world__scene { position: absolute; left: max(var(--gutter), calc(50% - 38rem)); width: min(56vw, 46rem); top: 3.5rem; bottom: 5.5rem; margin: 0; z-index: 2; }
.world__scene > svg { transform: scale(calc(1.02 + var(--t, 0) * .07)); transform-origin: 50% 55%; transition: transform .2s linear; }
.world__num { display: block; position: absolute; left: max(var(--gutter), calc(50% - 38rem + var(--gutter))); bottom: -.12em; z-index: 1; font: 800 clamp(10rem, 18vw, 18rem) / 1 var(--font-display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px rgba(226,201,159,.16); pointer-events: none; }
.world__progress { position: absolute; left: max(var(--gutter), calc(50% - 38rem + var(--gutter))); right: max(var(--gutter), calc(50% - 38rem + var(--gutter))); bottom: 1.75rem; z-index: 3; }
.wphoto { z-index: 1; border-radius: 0; }
.wphoto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,58,42,.15) 0%, rgba(3,58,42,.35) 55%, rgba(3,58,42,.92) 78%); }
.world.has-photo .world__scene { opacity: 0; }
.world__scene { transition: opacity .6s var(--ease); }
.world__steps { grid-area: 1 / 1; position: relative; z-index: 2; width: min(30rem, 36vw); margin-left: auto; margin-right: max(var(--gutter), calc(50% - 38rem + var(--gutter))); }
.wstep { min-height: 92svh; opacity: .25; }
.wstep.is-on { opacity: 1; }
.wstep > :not(.wstep__scene) { position: relative; }
.wstep .wstep__k, .wstep .wstep__h, .wstep .wstep__p { transform: translateY(26px); opacity: .5; transition: transform .8s var(--ease), opacity .8s var(--ease); }
.wstep.is-on .wstep__k, .wstep.is-on .wstep__h, .wstep.is-on .wstep__p { transform: none; opacity: 1; }
.wstep.is-on .wstep__h { transition-delay: .05s; } .wstep.is-on .wstep__p { transition-delay: .12s; }
.wstep__h { font-size: clamp(2.4rem, 1.6rem + 2.4vw, 4rem); }
.wstep:first-child { padding-top: 30svh; }
.wstep:last-child { min-height: 100svh; }
}
@media (min-width: 960px) and (prefers-reduced-motion: reduce) {
.wstep .wstep__k, .wstep .wstep__h, .wstep .wstep__p { transform: none; opacity: 1; transition: none; }
.world__scene > svg { transform: none; }
}
/* ---------- The popping moment ---------- */
.pop2 { position: relative; background: var(--charcoal); color: var(--ivory); height: 280vh; }
.pop2__sticky { position: sticky; top: var(--hdr); height: calc(100svh - var(--hdr)); display: grid; align-items: center; overflow: hidden; }
.pop2__grid { display: grid; gap: var(--s4); align-items: center; }
@media (min-width: 900px) { .pop2__grid { grid-template-columns: 5fr 7fr; } }
.pop2__copy h2 { color: var(--ivory); }
.pop2__steps { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: .25rem; }
.pop2__step { display: grid; grid-template-columns: 2.2rem 1fr; padding: .6rem 0; border-top: 1px solid var(--line-dark); opacity: .4; transition: opacity .4s; }
.pop2__step span { grid-row: span 2; font: 700 .75rem var(--font-display); color: var(--brass); letter-spacing: .1em; padding-top: .2rem; }
.pop2__step b { font: 700 1.25rem var(--font-display); }
.pop2__step small { color: var(--on-green-muted); font-size: .875rem; }
.pop2__step.is-on { opacity: 1; }
.pop2__step.is-on b { color: #E2C99F; }
.pop2__note { font-size: .8125rem; color: var(--on-green-muted); max-width: 26rem; }
.pop2__stage svg { width: 100%; max-width: 34rem; height: auto; display: block; margin-inline: auto; overflow: visible; }
.pop2__seed polygon { fill: #1B1612; stroke: rgba(226,201,159,.35); stroke-width: 1.5; }
.pop2__seed .rs-h { fill: none; stroke: rgba(255,240,220,.16); stroke-width: 4; stroke-linecap: round; }
.pop2__glow { fill: url(#none); fill: rgba(255,170,90,.0); }
.pop2 .pop--hero polygon { fill: #F4EDE0; }
.pop2 .pop--hero .fleck { fill: #7A4A33; }
.pop2__shell path { fill: #241B16; stroke: rgba(226,201,159,.3); }
/* scroll-driven states (JS sets --a seed, --g heat, --b popped) */
.pop2.is-js .pop2__seed { opacity: var(--a, 1); transform: scale(calc(1 + (1 - var(--a, 1)) * .35)); transform-origin: 300px 300px; filter: blur(calc((1 - var(--a, 1)) * 6px)); }
.pop2.is-js .pop2__glow { fill: rgba(255,186,110,1); opacity: calc(var(--g, 0) * .55); filter: blur(40px); transform-origin: 300px 300px; transform: scale(calc(.5 + var(--g, 0) * .7)); }
.pop2.is-js .pop2__popped { opacity: var(--b, 0); transform: scale(calc(.45 + var(--b, 0) * .55)); transform-origin: 300px 300px; clip-path: circle(calc(var(--b, 0) * 75%) at 50% 50%); }
.pop2.is-js .pop2__shell { opacity: calc(var(--b, 0) * (1 - var(--b, 0)) * 4); transform: scale(calc(.8 + var(--b, 0) * .6)); transform-origin: 300px 300px; }
.pop2__static { display: none; }
.pop2:not(.is-js) { height: auto; }
.pop2:not(.is-js) .pop2__sticky { position: static; height: auto; padding-block: var(--s6); }
.pop2:not(.is-js) .pop2__stage { display: none; }
.pop2:not(.is-js) .pop2__step { opacity: 1; }
.pop2:not(.is-js) .pop2__static { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 0 auto; padding: 0 var(--gutter) var(--s5); max-width: var(--max); width: 100%; }
.pop2__static li { display: grid; justify-items: center; gap: .5rem; text-align: center; }
.pop2__static svg { width: 100%; max-width: 12rem; height: auto; }
.pop2__static .pop2__glow { fill: rgba(255,186,110,.45); filter: blur(24px); }
@media (max-width: 899px) { .pop2 { height: 240vh; } .pop2__stage svg { max-width: 18rem; } .pop2__copy h2 { font-size: 3rem; } .pop2__steps { margin: .75rem 0; } .pop2__step { padding: .35rem 0; } .pop2__step small { display: none; } }
/* ---------- Finder: size visual ---------- */
.finder__size { display: flex; align-items: center; gap: 1rem; }
.finder__size svg { width: 5.5rem; height: 5.5rem; overflow: visible; }
.finder__size span { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-green-muted); }
.finder__pop { transform-box: fill-box; transform-origin: center; transform: scale(.55); transition: transform .7s var(--ease); }
.finder__pop polygon { fill: #F2EADC; } .finder__pop .fleck { fill: #7A4A33; }
.finder[data-family="4"] .finder__pop { transform: scale(.68); }
.finder[data-family="5"] .finder__pop { transform: scale(.84); }
.finder[data-family="6"] .finder__pop { transform: scale(1); }
.pf-c { fill: none; stroke: rgba(150,120,90,.35); stroke-width: 3; stroke-linecap: round; }
.pf-f { fill: #6E3F2C; }
.pop2__stage svg { filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); }
/* Story: keep the copy column readable over the full-bleed scene */
@media (min-width: 960px) {
.world__stage::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
background: linear-gradient(90deg, rgba(3,58,42,0) 44%, rgba(3,58,42,.78) 62%, rgba(3,58,42,.92) 100%); }
.world__label, .world__progress { z-index: 4; }
}
/* ---------- From origin to operations: route sequence ---------- */
.ops__line { overflow: visible; }
.ops__line i { position: absolute; display: block; }
.ops__note { margin-top: var(--s3); font-size: .8125rem; color: var(--muted); max-width: 40rem; }
.op__hq, .op__fan { display: none; }
@media (min-width: 900px) {
.ops__line { background: none !important; height: 2px; top: .3rem; }
.ops__solid { left: 0; width: 74%; height: 2px; background: var(--green); transform-origin: left; }
.ops__dash { left: 74%; right: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--brass) 0 8px, transparent 8px 16px); transform-origin: left; }
.op::before { top: -2.35rem; width: .85rem; height: .85rem; z-index: 1; }
#op-vizag::before { width: 1.35rem; height: 1.35rem; top: -2.6rem; left: -.25rem; background: var(--green); border: 3px solid var(--ivory); box-shadow: 0 0 0 1.5px var(--green); }
.op__hq { display: block; position: absolute; top: -2.6rem; left: -.25rem; width: 1.35rem; height: 1.35rem; pointer-events: none; }
.op__hq i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--green); opacity: 0; }
#op-vizag .op__role { color: var(--green); }
.op__fan { display: block; position: absolute; top: -2.85rem; left: .3rem; width: 8rem; height: 4rem; overflow: visible; pointer-events: none; }
.op__fan path { fill: none; stroke: var(--brass); stroke-width: 1.4; stroke-dasharray: 3 4; opacity: .8; }
}
@media (max-width: 899px) {
.ops { padding-left: 2rem; }
.ops__line { position: absolute; left: .55rem; top: 1.9rem; bottom: 2rem; width: 2px; }
.ops__solid { top: 0; left: 0; width: 2px; height: 74%; background: var(--green); transform-origin: top; }
.ops__dash { top: 74%; bottom: 0; left: 0; width: 2px; background: repeating-linear-gradient(180deg, var(--brass) 0 8px, transparent 8px 16px); transform-origin: top; }
.op { position: relative; }
.op::before { content: ""; position: absolute; left: -1.9rem; top: 1.85rem; width: .85rem; height: .85rem; border-radius: 50%; background: var(--ivory); border: 1.5px solid var(--brass); }
#op-bihar::before { background: var(--brass); }
#op-vizag::before { left: -2.1rem; top: 1.65rem; width: 1.25rem; height: 1.25rem; background: var(--green); border: 3px solid var(--ivory); box-shadow: 0 0 0 1.5px var(--green); }
#op-world::before { border-style: dashed; }
}
@media (prefers-reduced-motion: no-preference) {
html.js .ops .ops__solid { transform: scale(0); transition: transform 1.6s var(--ease) .2s; }
html.js .ops .ops__dash { transform: scale(0); transition: transform 1s var(--ease) 2.2s; }
html.js .ops.is-drawn .ops__solid, html.js .ops.is-drawn .ops__dash { transform: none; }
html.js .ops .op { opacity: .25; transform: translateY(10px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(.2s + var(--n) * .7s); }
html.js .ops.is-drawn .op { opacity: 1; transform: none; }
html.js .ops.is-drawn .op__hq i { animation: hq 2.6s ease-out 1.2s infinite; }
html.js .ops.is-drawn .op__hq i + i { animation-delay: 2.5s; }
@keyframes hq { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }
html.js .ops .op__fan path { opacity: 0; transition: opacity .6s var(--ease); transition-delay: calc(1.9s + var(--i) * .18s); }
html.js .ops.is-drawn .op__fan path { opacity: .8; }
}
.sig--light { color: #E2C99F; display: block; }
/* Plain today: abstract pack visual (no flavour names, no products for sale) */
.rm__card--next { position: relative; overflow: hidden; }
.rm__vis { width: min(100%, 22rem); height: auto; margin-bottom: .5rem; }
.pch path { stroke-width: 1.5; }
.pch--now path { fill: var(--ivory); stroke: var(--ivory); }
.pch--now .pch__b { fill: var(--ivory); }
.pch--now text { fill: var(--green); }
.pch--soon path { fill: none; stroke: rgba(226,201,159,.6); stroke-dasharray: 4 5; }
.pch--soon text { fill: rgba(226,201,159,.75); }
.pch text { font: 800 13px var(--font-display); letter-spacing: .22em; }
.rm__tag { position: absolute; top: 1.25rem; right: 1.25rem; font: 700 .625rem var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--ivory); background: var(--terra); padding: .35rem .6rem; border-radius: 999px; }
.mkp__tag { color: var(--terra); }
@media (prefers-reduced-motion: no-preference) {
.pch--soon { animation: pch 3.6s ease-in-out infinite alternate; }
.pch--soon + .pch--soon { animation-delay: -1.8s; }
@keyframes pch { from { opacity: .45; } to { opacity: 1; } }
}
/* Our Story opening */
.why__grid { display: grid; gap: var(--s5); align-items: end; }
@media (min-width: 900px) { .why__grid { grid-template-columns: 5fr 6fr; } }
.why__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.why__lines li { font: 700 clamp(1.6rem, 1.1rem + 2vw, 2.8rem) / 1.12 var(--font-display); letter-spacing: -.025em; color: var(--green); }
.why__lines li:not(.why__big) { color: rgba(3,58,42,.55); }
.why__lines li:last-child { color: var(--terra); }
.why__big { font-size: clamp(3rem, 2rem + 5vw, 6rem) !important; letter-spacing: -.045em !important; margin-bottom: .4rem; }
@media (prefers-reduced-motion: no-preference) {
.why__lines li { animation: rise .8s var(--ease) both; }
.why__lines li:nth-child(2) { animation-delay: .25s; } .why__lines li:nth-child(3) { animation-delay: .45s; }
.why__lines li:nth-child(4) { animation-delay: .65s; } .why__lines li:nth-child(5) { animation-delay: .85s; }
}
@media (prefers-reduced-motion: reduce) { .hero3__video { display: none; } }
/* Dot grids are drawn as round-capped strokes (one path per colour) */
svg path.d { fill: none !important; stroke: rgba(233,226,210,.34) !important; stroke-linecap: round; }
svg path.d-hot { fill: none !important; stroke: #D9B57A !important; stroke-linecap: round; }
.scene svg path.d { stroke: rgba(233,226,210,.42) !important; }
/* =====================================================================
v9.1 — approved PHOOLZA logo (raster artwork, never redrawn or stretched)
===================================================================== */
.logo { display: block; height: auto; max-width: 100%; }
.wordmark { display: inline-flex; align-items: center; line-height: 0; padding-block: .25rem; }
.wordmark picture { display: block; }
.logo--header { width: 172px; transition: width .35s var(--ease); }
.site-header.is-scrolled .logo--header { width: 156px; }
@media (min-width: 768px) and (max-width: 1079px) { .logo--header { width: 156px; } .site-header.is-scrolled .logo--header { width: 146px; } }
@media (max-width: 767px) { .logo--header, .site-header.is-scrolled .logo--header { width: 136px; } }
.site-header .wrap.header-bar { min-height: 5rem; }
.site-header.is-scrolled .wrap.header-bar { min-height: 4rem; }
@media (max-width: 767px) { .site-header .wrap.header-bar, .site-header.is-scrolled .wrap.header-bar { min-height: 3.75rem; } }
/* hero lockup: reversed logo with the approved tagline */
.hero3__mark { display: block; font: inherit; letter-spacing: 0; line-height: 0; }
.logo--hero { width: clamp(280px, 40vw, 560px); }
@media (max-width: 559px) { .logo--hero { width: min(86vw, 340px); } }
.hero3__line::after { display: none; }
.hero3__line { margin-top: .9rem; font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); }
@media (prefers-reduced-motion: no-preference) { .hero3__mark .logo { animation: logo-in 1.1s var(--ease) both; } @keyframes logo-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } }
/* footer and finale lockups */
.footer-logo { display: inline-block; line-height: 0; }
.logo--footer { width: 300px; }
@media (max-width: 479px) { .logo--footer { width: 250px; } }
.finale__mark { display: none; }
.finale__lockup { display: grid; justify-items: center; padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem); }
.logo--lockup { width: min(520px, 80vw); }
/* v9.1 — tighter rhythm: cinematic but commercially efficient */
.section { padding-block: clamp(3.25rem, 2.5rem + 3.5vw, 5.5rem); }
.story { padding-block: clamp(3.25rem, 2.5rem + 4vw, 6rem); }
.finale { padding-top: clamp(3.5rem, 3rem + 4vw, 6.5rem); }
.world { padding-top: clamp(3.25rem, 2.5rem + 3.5vw, 5.5rem); }
@media (min-width: 960px) {
.wstep { min-height: 62svh; }
.wstep:first-child { padding-top: 14svh; }
.wstep:last-child { min-height: 78svh; }
.wstep[data-step="12"], .wstep[data-step="13"] { min-height: 48svh; }
}
@media (max-width: 959px) {
.wstep { padding-block: var(--s3); }
.wstep__scene { aspect-ratio: 16 / 10; }
}
.pop2 { height: 200vh; }
@media (max-width: 899px) { .pop2 { height: 170vh; } }
@media (max-width: 959px) {
.wstep[data-step="12"] .wstep__scene, .wstep[data-step="13"] .wstep__scene, .wstep[data-step="14"] .wstep__scene { display: none; }
.wstep__h { font-size: clamp(1.7rem, 1.3rem + 2vw, 2.2rem); }
.wstep__next { display: none; }
.wstep__foot:empty { display: none; }
}
@media (max-width: 767px) {
.ops .op { padding-block: .9rem; }
.op__d { font-size: .9375rem; }
}
.finale { padding-bottom: clamp(3.5rem, 3rem + 4vw, 6rem); }
.why__lockup { margin-bottom: var(--s4); }
.why__lockup .logo--lockup { width: min(420px, 78vw); }
@media (min-width: 768px) { .site-footer { padding-bottom: 4.5rem; } }
/* =====================================================================
v9.3 — field photography and footage
===================================================================== */
.wvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--green); }
.wstep__scene--photo { position: relative; }
.wstep__scene .wvideo { position: absolute; }
.wcap { position: absolute; left: .6rem; right: .6rem; bottom: .6rem; z-index: 3; font-size: .75rem; line-height: 1.35; color: rgba(247,242,232,.92); text-shadow: 0 1px 6px rgba(0,0,0,.55); max-width: 30rem; }
@media (min-width: 960px) {
.wphoto .wtag { top: auto; bottom: 5.4rem; left: max(var(--gutter), calc(50% - 38rem + var(--gutter))); }
.wphoto .wcap { left: max(var(--gutter), calc(50% - 38rem + var(--gutter))); bottom: 4rem; right: auto; max-width: 34rem; }
.wphoto[data-kind="video"] .wvideo { object-position: 50% 45%; }
}
@media (prefers-reduced-motion: reduce) { .wphoto.is-on img { animation: none; } }
.origin-band { margin-block: var(--s4) 0; }
.origin-band .slot-cap { margin-top: .6rem; font-size: .8125rem; color: var(--muted); }
/* chapter 01: show the pond's horizon, not just leaf texture */
.wphoto[data-n="1"] img, .wstep[data-step="1"] .wstep__scene img { object-position: 50% 22%; }
/* field footage is low-resolution portrait video: frame it at near-native size instead of stretching it full-bleed */
@media (min-width: 960px) {
.wphoto[data-kind="video"] { inset: auto; top: 50%; left: max(var(--gutter), calc(50% - 38rem + var(--gutter))); transform: translateY(-50%);
height: min(72%, 34rem); aspect-ratio: 478 / 850; border-radius: var(--radius); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); overflow: visible; }
.wphoto[data-kind="video"] .wvideo { border-radius: var(--radius); }
.wphoto[data-kind="video"]::after { display: none; }
.wphoto[data-kind="video"] .wtag { top: -2rem; bottom: auto; left: 0; }
.wphoto[data-kind="video"] .wcap { left: calc(100% + 1.25rem); bottom: 0; width: 15rem; color: var(--on-green-muted); text-shadow: none; }
.world.has-photo .world__stage:has(.wphoto[data-kind="video"].is-on) .world__scene { opacity: 0; }
}
@media (max-width: 959px) {
.wstep__scene--photo:has(video) { aspect-ratio: 4 / 5; max-height: 72vh; }
}
@media (prefers-reduced-motion: reduce) { .wphoto, .world__scene { transition: none !important; } }