/* ============================================================
   HeavenlyCo Group - cinematic brand-house landing
   palette: charcoal · amber (#DB9204) · brand grey (#62656A)
   ============================================================ */

/* ---------- self-hosted fonts (latin subset, variable woff2) ----------
   Each woff2 is a single variable file that covers the full weight range,
   so one @font-face per family with a weight range. No italics are used. */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg:        #0B0B0D;
  --bg-1:      #0F0F12;
  --bg-2:      #141417;
  --surface:   #16171B;
  --surface-2: #1C1D22;
  --grey:      #62656A;   /* brand grey */
  --grey-soft: #8B8E94;

  --ink:       #F6F5F3;
  --ink-soft:  #ABADB2;
  --ink-faint: #82858C;   /* WCAG AA: 4.5+ on bg/surface for small meta text */

  --line:      rgba(255,255,255,0.09);
  --line-2:    rgba(255,255,255,0.045);

  --amber:     #DB9204;
  --amber-lit: #F2A718;
  --amber-deep:#A86E03;
  --amber-dim: rgba(219,146,4,0.14);
  --amber-glow:rgba(219,146,4,0.40);

  --maxw: 1240px;
  --gutter: clamp(22px, 5.5vw, 88px);

  --font:    "Space Grotesk", system-ui, -apple-system, sans-serif;
  --body:    "Inter", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  letter-spacing: -0.01em;
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--amber); color: #1a1200; }

/* ---------- language visibility ---------- */
.l  { display: none; }
span.l { display: none; }
body.is-en span.l.en { display: inline; }
body.is-pt span.l.pt { display: inline; }
.lb { display: none; }
body.is-en .lb.en { display: block; }
body.is-pt .lb.pt { display: block; }
/* hard guarantee: inactive language stays hidden regardless of other display rules */
body.is-en .l.pt, body.is-en .lb.pt,
body.is-pt .l.en, body.is-pt .lb.en { display: none; }

/* ============================================================
   FIXED CHROME - 3D canvas, grain, grid, wordmark, progress
   ============================================================ */
#stars {
  position: fixed; inset: 0; width: 100vw; height: 100svh;
  z-index: 0; pointer-events: none; display: block;
}

.grain {
  position: fixed; inset: -50%; z-index: 60; pointer-events: none;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.045; mix-blend-mode: screen;
  animation: grain 0.6s steps(2) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 50%{transform:translate(-3%,2%)} 100%{transform:translate(2%,-2%)} }

/* soft dot field (replaces the engineered blueprint grid) */
.grid-bg {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1.4px);
  background-size: 30px 30px;
  mask-image: radial-gradient(120% 90% at 50% 10%, black 0%, transparent 75%);
  opacity: var(--grid-op, 0.5);
  transition: opacity .6s linear;
}

/* ambient amber glow that follows the cursor (set by interactions.js),
   falls back to a gentle breathing centre behind the hero */
.aura {
  position: fixed; z-index: 0; pointer-events: none;
  left: var(--aura-x, 50%); top: var(--aura-y, 8%);
  width: min(820px, 86vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--amber-glow) 0%, transparent 60%);
  filter: blur(46px); opacity: 0.5;
  transition: left .5s var(--ease-out), top .5s var(--ease-out);
}

/* cursor glow - a soft amber comet that trails the pointer (fine pointers only) */
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 320px; height: 320px; z-index: 3;
  pointer-events: none; border-radius: 50%; opacity: 0; will-change: transform;
  background: radial-gradient(circle, rgba(242,167,24,0.12) 0%, transparent 62%);
  mix-blend-mode: screen; transition: opacity .4s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { body:hover .cursor-glow { opacity: 1; } }

.shell { position: relative; z-index: 2; }

/* progress bar */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--amber-deep), var(--amber-lit));
  z-index: 90; box-shadow: 0 0 12px var(--amber-glow);
}

/* wordmark */
.wordmark {
  position: fixed; top: 22px; left: var(--gutter); z-index: 70;
  display: flex; align-items: center; gap: 11px; color: var(--ink);
  font-family: var(--font); font-weight: 600; font-size: 16px; letter-spacing: -0.01em;
}
.wordmark .mark { width: 22px; height: 22px; display: block; }
.wordmark b { font-weight: 700; }
.wordmark .co { color: var(--amber); }
.wordmark .gp { color: var(--ink-soft); font-weight: 500; }

/* top-right: language toggle */
.topright {
  position: fixed; top: 20px; right: var(--gutter); z-index: 70;
  display: flex; align-items: center; gap: 14px;
}
.lang-toggle {
  display: inline-flex; border: 1px solid var(--line); border-radius: 999px;
  overflow: hidden; backdrop-filter: blur(8px); background: rgba(12,12,14,0.5);
}
.lang-toggle button {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  padding: 7px 12px; background: none; border: 0; color: var(--ink-faint);
  cursor: pointer; transition: color .25s, background .25s;
}
.lang-toggle button.active { color: #1a1200; background: var(--amber); }

/* side nav - clickable section dots (right edge) */
.sidenav {
  position: fixed; right: calc(var(--gutter) - 8px); top: 50%; transform: translateY(-50%);
  z-index: 70; display: flex; flex-direction: column; gap: 18px;
}
.sidenav a {
  display: flex; align-items: center; gap: 12px; justify-content: flex-end;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); cursor: pointer; transition: color .3s var(--ease-out);
}
.sidenav .label { opacity: 0; transform: translateX(6px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
.sidenav .tick { width: 22px; height: 2px; border-radius: 2px; background: var(--ink-faint); transition: width .35s var(--ease-out), background .35s var(--ease-out); }
.sidenav a:hover { color: var(--ink); }
.sidenav a:hover .label { opacity: 1; transform: translateX(0); }
.sidenav a:hover .tick { width: 30px; background: var(--ink-soft); }
.sidenav a.active { color: var(--amber); }
.sidenav a.active .tick { width: 38px; background: var(--amber); box-shadow: 0 0 10px var(--amber-glow); }
.sidenav a.active .label { opacity: 1; transform: translateX(0); color: var(--amber); }
@media (max-width: 860px) { .sidenav { display: none; } }

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
section { position: relative; padding: clamp(90px, 14vh, 180px) var(--gutter); }
.wrap { max-width: var(--maxw); margin: 0 auto; width: 100%; }

.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--amber);
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--amber); opacity: .7; }

/* line-clip reveal mechanism
   NOTE: .lines must NOT set `display` - language blocks carry both `lb` and
   `lines` classes, and a `.lines{display:block}` would override `.lb{display:none}`
   (equal specificity, later wins) and leak BOTH languages. h1/h2/div are block anyway. */
.line { display: block; overflow: hidden; }
.line > span { display: block; will-change: transform; }

h1, h2, h3 { font-family: var(--font); font-weight: 600; letter-spacing: -0.025em; line-height: 1.04; }

/* ============================================================
   HERO
   ============================================================ */
.hero { min-height: 100svh; display: flex; align-items: center; padding-top: 120px; }
.hero h1 {
  font-size: clamp(2.7rem, 8.5vw, 6.6rem); font-weight: 700;
  letter-spacing: -0.035em; max-width: 14ch;
}
/* highlighted words - animated amber sheen (driven by Motion; static gradient fallback) */
.am {
  background: linear-gradient(100deg, var(--amber) 0%, #ffe7ad 45%, var(--amber) 72%);
  background-size: 220% 100%; background-position: 0% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--amber);
}
.hero .hero-eyebrow { margin-bottom: 30px; }
.hero .hero-sub {
  margin-top: 30px; max-width: 56ch; font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  color: var(--ink-soft); line-height: 1.65;
}
.hero .hero-cta { margin-top: 44px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

.scroll-cue {
  position: absolute; bottom: 30px; left: var(--gutter);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--ink-faint); display: flex; align-items: center; gap: 10px;
}
.scroll-cue .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); animation: pulse 1.8s var(--ease) infinite; }
@keyframes pulse { 0%,100%{opacity:.3; transform:scale(1)} 50%{opacity:1; transform:scale(1.5)} }

/* ============================================================
   BUTTONS - flashy amber CTA
   ============================================================ */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font); font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  padding: 15px 26px; border-radius: 999px; cursor: pointer; border: 1px solid transparent;
  transition: box-shadow .35s var(--ease-out), background .35s, border-color .3s, color .3s;
  overflow: hidden; white-space: nowrap; will-change: transform;
}
.btn svg { width: 17px; height: 17px; transition: transform .3s var(--ease-out); }
.btn:active { transform: scale(0.97); }       /* no-JS press fallback */
.btn-primary {
  color: #1a1200; background: linear-gradient(120deg, var(--amber-lit), var(--amber));
  box-shadow: 0 8px 30px -8px var(--amber-glow), inset 0 0 0 1px rgba(255,255,255,0.15);
}
.btn-primary .shine {
  position: absolute; inset: 0; transform: translateX(-130%); pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
}
.btn-primary:hover { box-shadow: 0 18px 48px -10px var(--amber-glow), inset 0 0 0 1px rgba(255,255,255,0.28); }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-ghost {
  color: var(--ink); border-color: var(--line); background: rgba(255,255,255,0.02); backdrop-filter: blur(6px);
}
.btn-ghost:hover { border-color: var(--amber); color: var(--amber-lit); }

/* ============================================================
   VISION / MANIFESTO
   ============================================================ */
.vision .statement {
  font-family: var(--font); font-weight: 500; letter-spacing: -0.03em;
  font-size: clamp(1.8rem, 4.4vw, 3.6rem); line-height: 1.12; max-width: 20ch;
}
.vision .statement .mut { color: var(--ink-faint); }
.vision .lead { margin-top: 38px; max-width: 54ch; color: var(--ink-soft); font-size: 1.1rem; }

/* ============================================================
   BRANDS GRID
   ============================================================ */
.brands .head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: 56px; }
.brands h2 { font-size: clamp(2rem, 5vw, 3.4rem); }
.brands .head p { color: var(--ink-soft); max-width: 34ch; }

.brand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; }

.bcard {
  position: relative; display: flex; flex-direction: column;
  padding: 32px 30px 28px; border-radius: 20px;
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); min-height: 320px;
  transform-style: preserve-3d; will-change: transform;
  transition: border-color .32s var(--ease-out), box-shadow .32s var(--ease-out);
}
.bcard::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  transition: opacity .4s var(--ease-out); pointer-events: none;
  background: radial-gradient(120% 80% at 100% 0%, var(--amber-dim), transparent 60%);
}
/* cursor spotlight that tracks the pointer inside the card */
.bcard .spot {
  position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease-out); transform: translateZ(0);
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(242,167,24,0.16), transparent 60%);
}
.bcard:hover { border-color: rgba(219,146,4,0.45); box-shadow: 0 34px 70px -34px rgba(0,0,0,0.85); }
.bcard:hover::before, .bcard:hover .spot { opacity: 1; }
.bcard > *:not(.spot) { transform: translateZ(30px); }   /* content floats above the card plane */

.bcard .tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--amber); padding: 5px 10px; border: 1px solid var(--amber-dim); border-radius: 999px; align-self: flex-start;
}
.bcard h3 { font-size: 1.75rem; margin-top: 22px; }
.bcard .desc { color: var(--ink-soft); margin-top: 12px; font-size: 0.98rem; flex: 1; }
.bcard .go {
  margin-top: 22px; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink);
  transition: gap .3s, color .3s;
}
.bcard:hover .go { color: var(--amber-lit); gap: 14px; }
.bcard .go svg { width: 15px; height: 15px; }

.bcard.soon { border-style: dashed; background: transparent; }
.bcard.soon h3, .bcard.soon .tag { color: var(--ink-faint); border-color: var(--line); }
.bcard.soon:hover { transform: none; border-color: var(--line); box-shadow: none; }

/* ============================================================
   APPROACH - principles
   ============================================================ */
.approach .head { margin-bottom: 56px; }
.approach h2 { font-size: clamp(2rem, 5vw, 3.4rem); max-width: 16ch; }
.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.principle { position: relative; background: var(--bg-1); padding: 34px 28px; overflow: hidden; transition: background .4s var(--ease-out); }
.principle::after {
  content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .4s var(--ease-out);
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(242,167,24,0.12), transparent 55%);
}
.principle:hover { background: var(--bg-2); }
.principle:hover::after { opacity: 1; }
.principle .n { position: relative; font-family: var(--mono); font-size: 12px; color: var(--amber); letter-spacing: 0.1em; }
.principle h3 { position: relative; font-size: 1.3rem; margin: 16px 0 10px; }
.principle p { position: relative; color: var(--ink-soft); font-size: 0.95rem; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { text-align: center; }
.contact h2 { font-size: clamp(2.4rem, 6.5vw, 5rem); font-weight: 700; letter-spacing: -0.035em; max-width: 16ch; margin: 0 auto; }
.contact .lead { margin: 28px auto 40px; max-width: 48ch; color: var(--ink-soft); font-size: 1.15rem; }
/* contact method cards */
.contact-cards {
  margin: 52px auto 0; max-width: 920px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.ccard {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; padding: 28px 26px; border-radius: 18px;
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); transform-style: preserve-3d; will-change: transform;
  transition: border-color .32s var(--ease-out), box-shadow .32s var(--ease-out);
}
.ccard .spot {
  position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease-out); transform: translateZ(0);
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(242,167,24,0.16), transparent 60%);
}
.ccard > *:not(.spot) { transform: translateZ(22px); }
.ccard:hover { border-color: rgba(219,146,4,0.45); box-shadow: 0 30px 64px -34px rgba(0,0,0,0.85); }
.ccard:hover .spot { opacity: 1; }
.ccard .ic {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--amber-dim); color: var(--amber-lit); margin-bottom: 18px;
  transition: background .4s var(--ease-out), color .4s;
}
.ccard .ic svg { width: 22px; height: 22px; }
.ccard:hover .ic { background: var(--amber); color: #1a1200; }
.ccard .ck { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.ccard .cv { font-family: var(--font); font-weight: 600; font-size: 1.12rem; margin-top: 6px; color: var(--ink); }
.ccard .go {
  margin-top: 20px; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-soft);
  transition: gap .3s var(--ease-out), color .3s;
}
.ccard .go svg { width: 15px; height: 15px; }
.ccard:hover .go { color: var(--amber-lit); gap: 14px; }
@media (max-width: 720px) { .contact-cards { grid-template-columns: 1fr; max-width: 420px; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative; z-index: 2; padding: 60px var(--gutter) 48px;
  border-top: 1px solid var(--line); background: var(--bg-1);
}
.footer .frow { max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 26px; flex-wrap: wrap; }
.footer .fmark { display: flex; align-items: center; gap: 12px; }
.footer .fmark img { width: 26px; height: 26px; }
.footer .fmark b { font-family: var(--font); font-weight: 700; }
.footer .fmark .co { color: var(--amber); }
.footer .fmark .gp { color: var(--ink-soft); font-weight: 500; }
.footer .meta { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); text-align: right; }
.footer .meta a { color: var(--ink-soft); border-bottom: 1px solid var(--amber-dim); }
.footer .meta a:hover { color: var(--amber-lit); }

/* back to top */
.to-top {
  position: fixed; right: var(--gutter); bottom: 24px; z-index: 71;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(12,12,14,0.6); backdrop-filter: blur(8px); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; opacity: 0; pointer-events: none;
  transition: opacity .4s, transform .4s, border-color .3s, color .3s;
}
.to-top.show { opacity: 1; pointer-events: auto; }
.to-top:hover { border-color: var(--amber); color: var(--amber-lit); transform: translateY(-3px); }
.to-top svg { width: 18px; height: 18px; }

/* ============================================================
   MARQUEE - continuous text movement
   ============================================================ */
.marquee {
  position: relative; z-index: 2; overflow: hidden; padding: 24px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: rgba(10,10,12,0.35);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.mq-track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; }
.mq-track span {
  font-family: var(--font); font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase;
  font-size: clamp(1.3rem, 3.2vw, 2.3rem); color: var(--ink-faint); padding: 0 24px;
}
.mq-track .sep { color: var(--amber); -webkit-text-fill-color: currentColor; padding: 0 4px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
  .section-id { display: none; }
  .hero .hero-cta { gap: 12px; }
  .footer .frow { flex-direction: column; align-items: flex-start; }
  .footer .meta { text-align: left; }
}

/* progressive enhancement: only hide when JS can animate */
html.anim [data-lines] { opacity: 1; }