/* ============================================================
   Anicio, anicio.ca
   Direction C "Warm Advisory" · deep aubergine leads, forest green accents
   ============================================================ */

:root {
  /* --- Brand --------------------------------------------- */
  --aubergine:       #36013f;   /* lead brand colour */
  --aubergine-deep:  #250029;   /* hero gradient end */
  --green:           #263d27;   /* accent (matches Carleton Prime) */
  --green-hover:     #315033;

  /* --- Surfaces ------------------------------------------ */
  --paper:      #f5f2f6;
  --paper-line: #e3dce6;

  /* --- Ink ----------------------------------------------- */
  --ink:       #2b1330;
  --ink-soft:  #4a3d50;
  --muted:     #6b5f6e;

  /* --- On the dark block --------------------------------- */
  --on-dark:      #f6eff8;
  --on-dark-mut:  rgba(246, 239, 248, 0.74);
  --on-green:     #f4f1e9;

  /* --- Type ----------------------------------------------
     Jost throughout, matching the Anicio logo (a Futura-style geometric sans).
     --cap is Jost's cap height as a fraction of font-size, measured in-browser;
     the logo mark is sized by it so the peak matches the NICIO capitals exactly. */
  --font-display: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cap: 0.70;

  /* --- Rhythm -------------------------------------------- */
  --pad:    clamp(1.15rem, 4vw, 3.5rem);
  --maxw:   1180px;
  --radius: 20px;

  /* Optical correction that lifts the green dots onto the cap-height centre of
     the text beside them. Measured at -0.07em, consistent across type sizes. */
  --dot-nudge: -0.07em;

  /* --- Motion -------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Layers -------------------------------------------- */
  --z-nav: 50;
  --z-menu: 45;
  --z-skip: 100;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
::selection { background: var(--aubergine); color: var(--on-dark); }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: var(--z-skip);
  background: var(--aubergine); color: var(--on-dark);
  padding: .7rem 1.2rem; border-radius: 0 0 10px 10px; font-weight: 600;
}
.skip:focus { transform: translate(-50%, 0); }

/* ============================================================
   Shared pieces
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px;
  padding: .8em 1.7em;
  border-radius: 100px;
  font-family: var(--font-body); font-weight: 700; font-size: .98rem;
  letter-spacing: -0.005em; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .3s var(--ease), color .3s var(--ease),
              transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn--green { background: var(--green); color: var(--on-green); }
.btn--green:hover { background: var(--green-hover); transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px rgba(38, 61, 39, 0.75); }
.btn--green:active { transform: translateY(0); }

.btn--quiet {
  background: transparent; color: var(--on-dark);
  border-color: rgba(246, 239, 248, 0.32);
}
.btn--quiet:hover { background: rgba(246, 239, 248, 0.10); border-color: rgba(246, 239, 248, 0.5); }

.btn--sm { min-height: 40px; padding: .55em 1.25em; font-size: .9rem; }
.btn--lg { min-height: 54px; padding: .95em 2.1em; font-size: 1.08rem; }

/* Marks a button that leaves the site, so a new tab is not a surprise. */
.btn__out { width: .82em; height: .82em; flex: none; margin-left: .15em; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Small green marks. Both sit in a flex row beside a text span and are centred
   against the text's cap height, not the full line box, so they read level with
   the capital letters. --dot-nudge is the measured optical correction. */
.dot {
  flex: none; display: block;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  margin-right: .7rem;
  transform: translateY(var(--dot-nudge, 0));
}

/* The three brand words, carried as the hero eyebrow now that they no longer sit
   under the wordmark. Dot separators echo the original tagline's. */
.eyebrow {
  display: inline-flex; align-items: center; flex-wrap: wrap;
  gap: .62rem;
  font-size: .82rem; font-weight: 600; line-height: 1.2;
  letter-spacing: .14em; text-transform: uppercase;
}
.eyebrow--on-dark { color: var(--on-dark-mut); }
/* Cancels the trailing letter-space so the gap each side of a dot reads even. */
.eyebrow__label { margin-right: -.14em; }
.eyebrow__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); flex: none;
  transform: translateY(var(--dot-nudge, 0));
}

.section-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.8rem, 3.8vw, 2.9rem);
  line-height: 1.1; letter-spacing: -0.028em; text-wrap: balance;
  color: var(--ink);
}
.section-sub {
  color: var(--muted); font-size: 1.06rem;
  margin-top: .9rem; max-width: 40ch;
}

/* the big aubergine colour blocks (hero + contact) */
.block {
  position: relative; overflow: hidden;
  background: linear-gradient(158deg, var(--aubergine) 0%, var(--aubergine-deep) 100%);
  color: var(--on-dark);
  border-radius: var(--radius);
}
.block__sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 70% at 82% 4%, rgba(255, 255, 255, 0.10), transparent 60%);
}

/* ============================================================
   Nav
   ============================================================ */

.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: rgba(245, 242, 246, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--paper-line); }

.nav__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: .9rem var(--pad);
  display: flex; align-items: center; gap: 1.25rem;
}

/* ---- Logo lockup -------------------------------------------------------
   Mirrors the LinkedIn banner: the peak mark stands in for the A, then NICIO,
   with the tagline beneath. The SVG viewBox is trimmed to the mark's exact
   bounds, so aligning on the baseline puts the peak's foot on the text
   baseline, and height:var(--cap)em makes it exactly cap height. */
.brand {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: .34em; color: var(--aubergine); text-decoration: none;
}
.brand__lock {
  display: inline-flex; align-items: baseline;
  /* The original's A-to-N ink gap measures 0.1917 x cap height. Jost's N carries
     0.075em of left sidebearing, so the CSS gap is the remainder. */
  gap: .059em;
  font-size: 1.5rem; line-height: 1;
}
.brand__mark {
  height: calc(var(--cap) * 1em); width: auto; display: block; flex: none;
  overflow: visible;
}
.brand__word {
  font-family: var(--font-display); font-weight: 400;
  letter-spacing: .016em; line-height: 1; color: var(--aubergine);
}
/* Tracking measured off the original tagline: 0.3666em. In the banner the
   tagline is only 14% of the wordmark's cap height, which at nav scale would be
   about 2px, so it is set to a legible minimum instead and the tracking carries
   the resemblance. The negative right margin removes the trailing letter-space
   so the lockup stays flush left. */
.brand__tag {
  font-family: var(--font-display); font-weight: 500;
  font-size: .56rem; letter-spacing: .366em; margin-right: -.366em;
  text-transform: uppercase; color: var(--green);
  line-height: 1; white-space: nowrap;
}
.brand--sm .brand__lock { font-size: 1.3rem; }
.brand--sm .brand__tag { font-size: .5rem; }

.nav__links { display: flex; gap: 2rem; margin-left: auto; }
.nav__links a {
  position: relative; color: var(--ink-soft);
  font-size: .97rem; font-weight: 600; padding: .25rem 0;
  transition: color .25s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 0; height: 2px; background: var(--green);
  transition: width .3s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { width: 100%; }

.burger {
  display: none; margin-left: auto;
  width: 44px; height: 44px; border: 1px solid var(--paper-line);
  border-radius: 10px; background: transparent; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--aubergine);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* ============================================================
   Hero
   ============================================================ */

.hero { padding: clamp(.6rem, 2vw, 1.1rem) var(--pad) 0; }
.hero__block {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(2.6rem, 7vw, 5.6rem) clamp(1.5rem, 5vw, 4.5rem) clamp(2.8rem, 7vw, 5.6rem);
}
.hero__content { position: relative; }

.hero__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.2rem, 6.3vw, 4.2rem);
  line-height: 1.05; letter-spacing: -0.034em;
  margin: 1.5rem 0 0; max-width: 15ch; text-wrap: balance;
}
.hero__lede {
  color: var(--on-dark-mut);
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  max-width: 48ch; margin-top: 1.5rem; text-wrap: pretty;
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: .85rem;
  margin-top: clamp(1.9rem, 4vw, 2.6rem);
}

/* ============================================================
   Proof strip
   ============================================================ */

.proof {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(2.6rem, 6vw, 4.5rem) var(--pad);
}
.proof__list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.proof__list h2 {
  display: flex; align-items: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.14rem; line-height: 1.3; letter-spacing: -0.012em; color: var(--ink);
  margin-bottom: .45rem;
}
.proof__list p { color: var(--muted); font-size: .98rem; max-width: 32ch; }

/* ============================================================
   Capabilities
   ============================================================ */

.caps {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem) var(--pad) clamp(3.5rem, 8vw, 6rem);
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.caps__intro { position: sticky; top: 6.5rem; }

.cap {
  padding: clamp(1.6rem, 3vw, 2.2rem) 0;
  border-top: 1px solid var(--paper-line);
  transition: padding-left .4s var(--ease);
}
.cap:last-child { border-bottom: 1px solid var(--paper-line); }
.cap:hover { padding-left: .7rem; }
.cap h3 {
  display: flex; align-items: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.22rem, 2.3vw, 1.65rem); line-height: 1.3;
  letter-spacing: -0.02em; color: var(--ink); margin-bottom: .55rem;
}
.cap p { color: var(--muted); font-size: 1.04rem; max-width: 50ch; }

/* ============================================================
   Approach statement
   ============================================================ */

.approach {
  max-width: 1000px; margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) var(--pad);
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
}
.approach__statement {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.7rem, 4.4vw, 3.1rem);
  line-height: 1.15; letter-spacing: -0.03em;
  color: var(--ink); text-wrap: balance; max-width: 18ch;
}
.approach__statement .accent { color: var(--green); }
.approach__support {
  color: var(--muted); font-size: clamp(1.02rem, 1.6vw, 1.15rem);
  max-width: 58ch; margin-top: 1.3rem; text-wrap: pretty;
}

/* ---------- Where we invest ----------
   The four sectors, separated by the same green dot the logo tagline used, so the
   brand line that sat under the wordmark now carries real content instead. */
.focus {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(2.8rem, 6vw, 4.5rem) var(--pad) clamp(1rem, 3vw, 2rem);
}
.focus__list {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem clamp(.9rem, 2vw, 1.5rem);
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
}
.focus__list span {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.35rem, 3.4vw, 2.3rem);
  letter-spacing: -0.025em; line-height: 1.15; color: var(--aubergine);
}
.focus__list i {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--green); display: inline-block;
}
.focus__note {
  color: var(--muted); font-size: 1.04rem;
  max-width: 52ch; margin-top: clamp(1.1rem, 2.5vw, 1.5rem);
}

/* ============================================================
   Contact
   ============================================================ */

.contact { padding: clamp(3rem, 7vw, 5.5rem) var(--pad) clamp(1rem, 3vw, 1.5rem); }
.contact__block {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(2.8rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
}
.contact__content { position: relative; }
.contact__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.85rem, 4.6vw, 3.1rem);
  line-height: 1.08; letter-spacing: -0.032em;
  max-width: 18ch; margin: 0 auto; text-wrap: balance;
}
.contact__sub {
  color: var(--on-dark-mut); font-size: 1.1rem;
  max-width: 42ch; margin: 1.1rem auto clamp(1.8rem, 4vw, 2.4rem);
}

/* ============================================================
   Footer
   ============================================================ */

.foot { padding: clamp(2rem, 5vw, 3rem) var(--pad) clamp(2.5rem, 5vw, 3.5rem); }
.foot__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding-top: 1.8rem; border-top: 1px solid var(--paper-line);
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 2rem;
  color: var(--muted); font-size: .93rem;
}
.foot__meta { margin-right: auto; }
.foot__social {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--muted); font-weight: 500;
  padding: .35rem 0; min-height: 44px;   /* 44px keeps it a comfortable tap target */
  transition: color .25s var(--ease);
}
.foot__social:hover { color: var(--green); }
.foot__icon { width: 1.1em; height: 1.1em; flex: none; }

/* ============================================================
   Motion
   ============================================================ */

/* Hero: a self-running load-in. Never gated on an observer, so the first
   paint above the fold always resolves to visible content. */
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.anim-ready .hero__content > * {
  animation: rise .75s var(--ease) both;
}
.anim-ready .hero__content > *:nth-child(1) { animation-delay: .05s; }
.anim-ready .hero__content > *:nth-child(2) { animation-delay: .14s; }
.anim-ready .hero__content > *:nth-child(3) { animation-delay: .23s; }
.anim-ready .hero__content > *:nth-child(4) { animation-delay: .32s; }

/* Below-the-fold reveals (opt-in via JS; content visible without JS) */
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(18px); }
.reveal-ready [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 900px) {
  .caps { grid-template-columns: 1fr; gap: 1.5rem; }
  .caps__intro { position: static; }
  .proof__list { grid-template-columns: 1fr; gap: 1.6rem; }
}

@media (max-width: 760px) {
  /* The tagline runs ~274px wide. On a phone that crowds the burger, so the
     nav keeps just the mark and name; the footer still carries the full lockup. */
  .nav .brand__tag { display: none; }
  .nav .brand { gap: 0; }
  .nav .brand__lock { font-size: 1.35rem; }

  .js .nav__links {
    position: absolute; left: 0; right: 0; top: 100%;
    z-index: var(--z-menu);
    flex-direction: column; gap: 0; margin: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--paper-line);
    padding: .5rem var(--pad) 1.1rem;
    display: none;
  }
  .js .nav__links.is-open { display: flex; }
  .js .nav__links a { padding: .85rem 0; font-size: 1.05rem; }
  .js .nav__links a::after { display: none; }

  .js .burger { display: flex; }
  .nav__cta { display: none; }
  .nav__inner { position: relative; }

  .hero__actions .btn { flex: 1 1 auto; }
}

/* Wrapped inline dots leave a separator dangling at the end of a line, so on
   narrow screens the sectors become a stacked list with a leading mark instead. */
@media (max-width: 620px) {
  .focus__list { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .focus__list i { display: none; }
  .focus__list span { display: flex; align-items: center; gap: .65rem; }
  .focus__list span::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
    background: var(--green); transform: translateY(var(--dot-nudge, 0));
  }
  .eyebrow { font-size: .72rem; gap: .5rem; }
}

@media (max-width: 420px) {
  .hero__title { font-size: clamp(1.95rem, 9vw, 2.5rem); }
  .foot__inner { flex-direction: column; align-items: flex-start; }
  .foot__meta { margin-right: 0; }
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal-ready [data-reveal] { opacity: 1; transform: none; }
  .hero__content > * { animation: none; opacity: 1; transform: none; }
  .cap:hover { padding-left: 0; }
}