/* ==========================================================================
   CanaRockies — "Ledger" identity layer  (PREVIEW ONLY)
   Loads AFTER assets/shared.css. Same class names, new identity.

   Direction: a trade group that moves other people's money and goods should
   look like an institution, not a lifestyle brand. Cold navy, white paper,
   hairline rules, tabular structure, no gradients, no soft shadows, no
   rounded corners. Credibility over warmth.

   Differentiators vs. the other two sites in the portfolio:
     - the only cool/corporate palette; zero cream, zero orange
     - the only all-grotesk site (no serif display face anywhere)
     - square corners and 1px rules instead of pills and drop shadows
     - hero is a full-bleed dark band closed by a ruled fact strip
   ========================================================================== */

:root {
  --paper: #ffffff;
  --field: #ffffff;
  --stone: #eef2f6;          /* cool alternate band */
  --ink: #0b1b2b;            /* deep navy */
  --muted: #5c6b78;
  --line: rgba(11, 27, 43, 0.14);
  --rule: rgba(11, 27, 43, 0.1);

  /* Every hue in the base sheet is re-pointed into one cold family so no
     stray warm value survives in a rule this layer does not restate. */
  --pine: #17405f;
  --alpine: #2f6fb0;
  --sky: #2f6fb0;
  --moss: #2f6fb0;
  --gold: #8ec2ea;
  --sunset: #2f6fb0;
  --orange: #2f6fb0;
  --crimson: #2f6fb0;
  --accent: #2f6fb0;
  --clay: #8a94a0;
  --shadow: none;

  --font-display: "Archivo", "Inter", -apple-system, "Segoe UI", sans-serif;
}

body { background: var(--paper); }

/* ---------- Type: grotesk only, tight, no serif ------------------------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.028em;
}

body[data-lang="en"] .hero-copy h1 {
  max-width: 15ch;
  font-size: clamp(2.4rem, 4vw, 4rem);
  line-height: 1.02;
}

/* The base sheet gives the zh headline max-width:720px inside a ~494px
   column, so it overflows the hero by ~595px at 1440. Pre-existing, but
   glaring on a dark canvas — constrain it to the column. */
body[data-lang="zh"] .hero-copy h1 {
  max-width: 100%;
  font-size: clamp(2rem, 3.1vw, 3.2rem);
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.stacked-intro h2, .section-head h2, .contact-band h2 { letter-spacing: -0.03em; }

/* Eyebrows become bracketed file labels rather than editorial kickers */
.eyebrow {
  gap: 0.55em;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.eyebrow::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border: 1px solid currentColor;
  background: none;
  opacity: 1;
}

/* ---------- Header: white, hairline, square ----------------------------- */

.site-header {
  min-height: 62px;
  background: #ffffff;
  border-bottom: 1px solid var(--ink);
  backdrop-filter: none;
}

.nav a {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav a:hover { color: var(--accent); }

.lang-toggle { border-radius: 0; border-color: var(--line); background: #fff; }
.lang-toggle button { border-radius: 0; font-size: 0.76rem; }
.lang-toggle button[aria-pressed="true"] { background: var(--ink); }

.menu { border-radius: 0; }

/* ---------- Buttons: rectangular, solid, tracked ------------------------ */

.cta, .ghost {
  min-height: 46px;
  border-radius: 0;
  padding: 0.7rem 1.4rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cta {
  background: var(--accent);
  box-shadow: none;
  color: #fff;
}
.cta:hover, .cta:focus-visible { background: var(--ink); box-shadow: none; transform: none; }

.cta.hot { background: var(--ink); box-shadow: none; }

.ghost {
  padding-inline: 0;
  border-bottom: 1px solid currentColor;
  color: var(--accent);
}
.ghost:hover { color: var(--ink); text-decoration: none; }

/* ---------- Hero: full-bleed navy band, hairline grid ------------------- */

.hero {
  min-height: auto;
  padding: 74px 0 0;
  background: var(--ink);
  color: #fff;
}

/* Kill the alpine wash: contour rings and ridge silhouette both go. */
.hero::before {
  inset: 0;
  opacity: 1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 96px 96px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
}
.hero-ridge { display: none; }

.hero-grid { min-height: auto; padding-bottom: 56px; align-items: center; }

.hero-copy h1 { color: #fff; }
.hero-copy p { color: rgba(255, 255, 255, 0.68); }
.hero .eyebrow { color: #8ec2ea; }
.hero .ghost { color: #8ec2ea; }
.hero .ghost:hover { color: #fff; }
.hero .cta { background: #fff; color: var(--ink); }
.hero .cta:hover { background: #8ec2ea; color: var(--ink); }

/* The base sheet leaves 0px between the CTA row and the paragraph after it,
   so they render flush. Give the row room and demote the trailing line to a
   footnote — it is incorporation detail, not body copy. */
.hero-copy .hero-actions { gap: 20px; margin-bottom: 34px; }
.hero-copy .hero-actions + p {
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.82rem;
  line-height: 1.55;
}

/* Globe reads as a cold data object, not a sunrise */
.globe-stage::before { background: radial-gradient(circle, rgba(143, 194, 234, 0.2), transparent 62%); }
.globe-stage::after { opacity: 0.5; }
.hero .product-panel { background: transparent; box-shadow: none; border-radius: 0; }

/* Ruled fact strip closing the dark band — the ledger motif */
.hero .shell.hero-grid::after {
  content: "EST. 2016  ·  FEDERALLY INCORPORATED  ·  CALGARY, ALBERTA  ·  IMPORT / EXPORT  ·  BRAND REPRESENTATION  ·  B2B WHOLESALE";
  grid-column: 1 / -1;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
}
body[data-lang="zh"] .hero .shell.hero-grid::after {
  content: "2016 年成立 · 加拿大联邦注册 · 卡尔加里 · 进出口 · 品牌代理 · B2B 批发";
  letter-spacing: 0.08em;
  font-size: 0.74rem;
}

/* ---------- Bands, panels, cards: square and ruled ---------------------- */

.client-strip { padding: 0 0 64px; background: var(--paper); }
.client-rail {
  border-block: 1px solid var(--ink);
  background: var(--paper);
}
.client-pill,
.client-pill.logo-pill {
  border-radius: 0;
  border-color: var(--line);
  box-shadow: none;
  background: var(--paper);
}
.client-pill:hover, .client-pill:focus-visible {
  transform: none;
  border-color: var(--accent);
  box-shadow: none;
  background: var(--stone);
}
.client-pill.logo-pill small { border-radius: 0; background: var(--stone); color: var(--pine); }
.client-pill.logo-invert { background: var(--ink); }

.product-panel,
.metric,
.proof-card,
.feature-grid article,
.logo-box,
.mini-brand {
  border-radius: 0;
  background: var(--field);
  box-shadow: none;
  border: 1px solid var(--line);
}

.proof-card:hover { transform: none; box-shadow: none; border-color: var(--accent); }
.side { border-radius: 0; background: var(--stone); }
.side > span { border-radius: 0; }
.side .active { background: var(--ink); }

/* ---------- Sector / service stacks ------------------------------------- */

.stacked-brands, .service-stack { background: var(--stone); }
.service-stack .stacked-intro h2 { color: var(--ink); }

.fold-card,
.service-stack .fold-card {
  border-radius: 0;
  border: 1px solid var(--line);
  background: var(--field);
  box-shadow: none;
}
.fold-card-visual,
.service-stack .fold-card-visual { border-radius: 0; box-shadow: none; }
.fold-card-copy > span { color: var(--accent); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.7rem; }
.sector-emblem { border-radius: 0; border-color: var(--line); background: rgba(255, 255, 255, 0.94); box-shadow: none; }
.sector-emblem span { color: var(--accent); letter-spacing: 0.14em; text-transform: uppercase; }
.brand-index { color: rgba(11, 27, 43, 0.1); font-family: var(--font-display); }

/* ---------- Pillar rows: numbered ledger entries ------------------------ */

.pillar-group-label { color: var(--accent); font-family: var(--font-display); letter-spacing: 0.2em; }
.pillar-group-label::before, .pillar-group-label::after { background: var(--line); }
.pillar-visual { border-radius: 0; box-shadow: none; border: 1px solid var(--line); }
.pillar-num {
  top: 0;
  left: 0;
  border-radius: 0;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  letter-spacing: 0.14em;
  backdrop-filter: none;
}
.pillar-row { padding-bottom: 96px; margin-bottom: 0; border-bottom: 1px solid var(--rule); }
.pillar-row:last-child { border-bottom: 0; }
.pillar-row + .pillar-row { padding-top: 96px; }

/* ---------- Advisory / generic sections --------------------------------- */

.advisory-section { background: var(--stone); border-color: var(--line); }
.route-card { border-radius: 0; }
.network-map { filter: none; }
.network-map circle:nth-of-type(2),
.network-map circle:nth-of-type(3),
.network-map circle:nth-of-type(4) { fill: var(--accent); }

/* ---------- Contact band + footer: same navy as the hero ---------------- */

.contact-band { background: var(--ink); }
.band-ridge { display: none; }
.contact-band .eyebrow { color: #8ec2ea; }
.contact-band .cta { background: #fff; color: var(--ink); }
.contact-band .cta:hover { background: #8ec2ea; }
.contact-band input,
.contact-band textarea { border-radius: 0; }
.contact-band input:focus,
.contact-band textarea:focus { border-color: #8ec2ea; box-shadow: 0 0 0 2px rgba(142, 194, 234, 0.25); }

footer { background: var(--ink); border-top: 1px solid rgba(255, 255, 255, 0.16); }

.skip-link { border-radius: 0; }