/* =========================================================
   RECOY INTERNATIONAL — Shared Stylesheet
   Distinct identity: warm ink, bone paper, copper accent.
   ========================================================= */

/* Aileron — the typeface used in the Field Day deck (extracted & self-hosted) */
@font-face {
  font-family: 'Aileron';
  src: url('fonts/aileron-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Aileron';
  src: url('fonts/aileron-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Aileron';
  src: url('fonts/aileron-heavy.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  --ink: #191512;          /* warm near-black */
  --ink-soft: #4a423b;     /* muted brown-grey text */
  --paper: #f6f2ea;        /* bone / ivory */
  --paper-2: #efe9dd;      /* slightly deeper bone */
  --line: #d8cfbf;         /* hairline */
  --copper: #b45b34;       /* signature accent */
  --copper-deep: #8f4526;
  --gold: #c4a057;         /* secondary accent */
  --white: #ffffff;

  /* Both display and body now use Aileron, matching the Field Day deck */
  --serif: 'Aileron', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Aileron', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1180px;
  --ease: cubic-bezier(.2,.6,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.wrap { width: min(var(--wrap), 92vw); margin-inline: auto; }

/* ---------- Type ---------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.06; letter-spacing: -0.02em; }
.eyebrow {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--copper);
}
.lead { font-size: 1.16rem; color: var(--ink-soft); max-width: 60ch; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246,242,234,.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.brand-mark {
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: .02em;
  font-weight: 500;
}
.brand-mark b { color: var(--copper); font-weight: 500; }
.brand-mark span { display:block; font-family: var(--sans); font-size:.56rem; letter-spacing:.34em; text-transform:uppercase; color: var(--ink-soft); margin-top: 1px; }
.nav-links { display: flex; gap: 2rem; align-items: center; }
.nav-links a {
  font-size: .82rem; letter-spacing: .04em; font-weight: 500;
  color: var(--ink-soft); transition: color .25s var(--ease);
  position: relative;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a.active::after {
  content:''; position:absolute; left:0; bottom:-6px; width:100%; height:2px; background: var(--copper);
}
.nav-toggle { display:none; background:none; border:0; font-size:1.4rem; cursor:pointer; color:var(--ink); }

/* ---------- Hero ---------- */
.hero { padding: clamp(4rem, 10vw, 8rem) 0 clamp(3rem,6vw,5rem); position: relative; }
.hero h1 { font-size: clamp(2.5rem, 6.8vw, 5.2rem); font-weight: 800; letter-spacing: -0.035em; text-transform: uppercase; line-height: .98; }
.hero h1 em { font-style: normal; color: var(--copper); }
.hero .lead { margin-top: 1.6rem; font-size: clamp(1.05rem,2vw,1.3rem); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--sans); font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  padding: .85rem 1.6rem; border-radius: 999px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  transition: all .28s var(--ease); cursor: pointer;
}
.btn:hover { background: var(--copper); border-color: var(--copper); transform: translateY(-2px); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.arrow { transition: transform .28s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Sections ---------- */
section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section-head { max-width: 62ch; margin-bottom: 3rem; }
.section-head h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-top: .8rem; font-weight: 400; }
.divider { height:1px; background: var(--line); border:0; }

/* ---------- About / two column ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
.stat-row { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-top: 2rem; }
.stat b { font-family: var(--serif); font-size: 2.4rem; display:block; line-height:1; }
.stat span { font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-soft); }

/* ---------- Divisions ---------- */
.divisions { display:grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.division {
  border: 1px solid var(--line); border-radius: 18px; padding: 2.5rem;
  background: var(--paper-2); transition: all .3s var(--ease);
}
.division:hover { border-color: var(--copper); transform: translateY(-4px); }
.division h3 { font-size: 1.7rem; margin: .6rem 0 .8rem; }
.division .tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem; }
.tag { font-size:.72rem; letter-spacing:.06em; padding:.35rem .8rem; border:1px solid var(--line); border-radius:999px; color: var(--ink-soft); }

/* ---------- Portfolio grid ---------- */
.grid-brands { display:grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
.brand-card {
  position: relative; display:block; border-radius: 18px; overflow: hidden;
  min-height: 340px; padding: 2.3rem; color: var(--paper);
  transition: transform .35s var(--ease); isolation: isolate;
}
.brand-card::before {
  content:''; position:absolute; inset:0; z-index:-1;
  transition: transform .6s var(--ease);
}
.brand-card:hover { transform: translateY(-5px); }
.brand-card:hover::before { transform: scale(1.05); }
.brand-card::before { background-size: cover; background-position: center; }
.bc-norda::before { background-image: linear-gradient(180deg, rgba(20,18,15,.15) 0%, rgba(20,18,15,.55) 55%, rgba(20,18,15,.9) 100%), url('img/norda-hero.jpg'); }
.bc-subu::before  { background-image: linear-gradient(180deg, rgba(20,18,15,.15) 0%, rgba(20,18,15,.5) 55%, rgba(20,18,15,.88) 100%), url('img/subu-hero.jpg'); }
.bc-thor::before  { background-image: linear-gradient(180deg, rgba(20,18,15,.2) 0%, rgba(20,18,15,.55) 55%, rgba(20,18,15,.9) 100%), url('img/thor-hero.jpg'); background-position: center 30%; }
.bc-nature::before{ background-image: linear-gradient(180deg, rgba(20,18,15,.1) 0%, rgba(20,18,15,.5) 55%, rgba(24,40,25,.9) 100%), url('img/nature-hero.jpg'); }
.brand-card .bc-kicker { font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; opacity:.85; }
.brand-card h3 { font-size: 2.3rem; margin:.5rem 0 .6rem; color: var(--paper); }
.brand-card p { font-size:.92rem; opacity:.9; max-width: 34ch; }
.brand-card .bc-go {
  position:absolute; left:2.3rem; bottom:2.1rem;
  font-size:.8rem; font-weight:600; letter-spacing:.05em;
  display:inline-flex; gap:.5rem; align-items:center;
}
.brand-card .bc-cat {
  position:absolute; right:2rem; top:2.1rem;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.3rem .7rem; border:1px solid rgba(255,255,255,.35); border-radius:999px;
}

/* ---------- Brand page hero ---------- */
.brand-hero { padding: clamp(3.5rem,8vw,6.5rem) 0 clamp(2.5rem,5vw,4rem); }
.brand-hero .eyebrow { color: var(--copper); }
.brand-hero h1 { font-size: clamp(3rem,9vw,6.5rem); font-weight:800; letter-spacing:-.04em; margin:.4rem 0; text-transform:uppercase; line-height:.95; }
.brand-hero .lead { margin-top: 1.2rem; }
.crumbs { font-size:.78rem; letter-spacing:.05em; color: var(--ink-soft); margin-bottom: 1.4rem; }
.crumbs a:hover { color: var(--copper); }

/* accent theming per brand page via body class */
.theme-norda { --copper:#4f6b58; --copper-deep:#3a5040; }
.theme-subu  { --copper:#9a6f3e; --copper-deep:#7a5730; }
.theme-thor  { --copper:#546069; --copper-deep:#3d474e; }
.theme-nature{ --copper:#5f7d43; --copper-deep:#496233; }

/* ---------- Feature rows ---------- */
.feature { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
.feature + .feature { margin-top: clamp(3rem,6vw,5rem); }
.feature.rev .fig { order: 2; }
.fig {
  aspect-ratio: 4/3; border-radius: 16px;
  display:flex; align-items:flex-end; padding:1.6rem;
  color:#fff; font-family:var(--serif); font-size:1.35rem; font-weight:700;
  background-size: cover; background-position: center;
  text-shadow: 0 1px 14px rgba(0,0,0,.4); line-height:1.15;
}
.pill-row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem; }
.pill { font-size:.74rem; letter-spacing:.05em; padding:.4rem .9rem; background: var(--paper-2); border:1px solid var(--line); border-radius:999px; }

/* ---------- Range cards (Nature Spell) ---------- */
.range-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1.4rem; }
.range-card {
  border:1px solid var(--line); border-radius:16px; padding:1.8rem;
  background: var(--white); transition: all .3s var(--ease);
}
.range-card:hover { border-color: var(--copper); transform: translateY(-4px); box-shadow: 0 14px 36px rgba(25,21,18,.07); }
.range-card .num { font-family:var(--serif); font-size:1rem; color:var(--copper); }
.range-card h3 { font-size:1.3rem; margin:.5rem 0 .6rem; }
.range-card p { font-size:.9rem; color:var(--ink-soft); }
.range-card ul { list-style:none; margin-top:1rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.range-card li { font-size:.72rem; padding:.3rem .7rem; background:var(--paper); border-radius:999px; color:var(--ink-soft); }

/* ---------- Info strip ---------- */
.strip { background: var(--ink); color: var(--paper); border-radius: 20px; padding: clamp(2rem,5vw,3.5rem); }
.strip .split { align-items: start; }
.strip h2 { color: var(--paper); }
.strip .lead { color: rgba(246,242,234,.75); }
.badge-row { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; }
.badge { font-size:.74rem; letter-spacing:.06em; padding:.45rem 1rem; border:1px solid rgba(246,242,234,.28); border-radius:999px; }

/* ---------- CTA ---------- */
.cta { text-align:center; }
.cta h2 { font-size: clamp(2rem,5vw,3.4rem); font-weight:400; }
.cta .lead { margin: 1.2rem auto 2rem; }

/* ---------- Footer ---------- */
footer { background: var(--ink); color: var(--paper); padding: 4rem 0 2.4rem; margin-top: 2rem; }
.foot-grid { display:grid; grid-template-columns: 2fr 1fr 1fr; gap:2.5rem; }
footer .brand-mark { color: var(--paper); }
footer a { color: rgba(246,242,234,.72); font-size:.88rem; transition: color .2s; display:block; padding:.2rem 0; }
footer a:hover { color: var(--copper); }
.foot-h { font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: rgba(246,242,234,.5); margin-bottom:.8rem; }
.foot-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-top:3rem; padding-top:1.6rem; border-top:1px solid rgba(246,242,234,.14); font-size:.78rem; color:rgba(246,242,234,.55); }

/* ---------- Reveal animation ---------- */
.reveal { opacity:0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .nav-links { position: fixed; inset: 68px 0 auto 0; background: var(--paper); flex-direction: column; gap: 0; padding: 1rem 6vw 2rem; border-bottom:1px solid var(--line); transform: translateY(-120%); transition: transform .35s var(--ease); }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { padding: .9rem 0; width:100%; border-bottom:1px solid var(--line); }
  .nav-toggle { display:block; }
  .split, .divisions, .grid-brands, .feature, .range-grid, .foot-grid { grid-template-columns: 1fr; }
  .feature.rev .fig { order: 0; }
}