/* =============================================================
   Léo Rossatti — POOTZ™  ·  landing page styles
   Built on pootz-tokens.css. Editorial, type-led, à la truus.co,
   but in Pootz fonts (Clash Display + General Sans + Fraunces
   italic for emphasis) and the Pootz palette.
   ============================================================= */
@import url("pootz-tokens.css");

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--fg); overflow-x: hidden; }

/* --accent is overridable per-page via the root style attr (Tweaks). */

/* ---------------- shared atoms ---------------- */
.lr-wrap { max-width: 1180px; margin: 0 auto; padding-inline: clamp(22px, 5vw, 64px); }
.lr-measure { max-width: 760px; }

/* emphasis word — accent, in the sans family (no serif anywhere) */
em, .em {
  font-style: normal;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--accent);
}

/* POOTZ™ as a signature mark in running text */
.tm {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  color: var(--accent);
  font-feature-settings: normal;
}
.tm sup {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  font-size: 0.5em;
  vertical-align: super;
  letter-spacing: 0.04em;
  margin-left: 0.04em;
}

.lr-eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-500);
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0;
}
.lr-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.lr-eyebrow--dark { color: var(--paper-300); }

/* buttons — dark fill / ghost, per brief + kit */
.lr-btn {
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 600; line-height: 1;
  padding: 16px 24px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft),
              transform 80ms var(--ease-soft);
}
.lr-btn:active { transform: scale(0.985); }
.lr-btn .arr { transition: transform var(--dur-base) var(--ease-soft); }
.lr-btn:hover .arr { transform: translateX(4px); }

.lr-btn--primary { background: var(--accent); color: var(--fg-on-accent); }
.lr-btn--primary:hover { background: var(--accent-hover); color: var(--fg-on-accent); }

.lr-btn--ghost { background: transparent; color: var(--ink-900); border-color: var(--border-strong); }
.lr-btn--ghost:hover { border-color: var(--ink-900); color: var(--accent); }

.lr-btn--text {
  background: none; border: none; padding: 16px 4px;
  color: var(--ink-700);
}
.lr-btn--text:hover { color: var(--accent); }

/* on dark surfaces */
.lr-btn--onDark.lr-btn--primary { background: var(--paper-50); color: var(--ink-900); }
.lr-btn--onDark.lr-btn--primary:hover { background: #fff; }
.lr-btn--onDark.lr-btn--ghost { color: var(--paper-onDark); border-color: var(--border-on-dark); }
.lr-btn--onDark.lr-btn--ghost:hover { border-color: var(--paper-onDark); color: var(--accent-on-dark); }

/* ---------------- top bar ---------------- */
.lr-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(22px, 5vw, 64px);
  background: rgba(248, 244, 232, 0.74);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--border);
}
.lr-topbar__brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink-900); text-decoration: none; }
.lr-topbar__brand .pmark { font-size: 20px; }
.lr-topbar__name {
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.02em; color: var(--ink-700);
  padding-left: 12px; border-left: 1px solid var(--border-strong);
}
.lr-topbar__right { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); }
.lr-topbar__nav { display: flex; gap: clamp(18px, 2.4vw, 30px); }
.lr-topbar__link {
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  color: var(--ink-900); text-decoration: none; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-soft);
}
.lr-topbar__link:hover { color: var(--accent); }
.lr-topbar__cta {
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  background: var(--accent); color: var(--fg-on-accent);
  padding: 11px 17px; border-radius: 10px; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-soft);
}
.lr-topbar__cta:hover { background: var(--accent-hover); color: var(--fg-on-accent); }
@media (max-width: 760px) {
  .lr-topbar__nav, .lr-topbar__name { display: none; }
}

/* ---------------- pootz wordmark + ™ ---------------- */
.pmark { display: inline-flex; align-items: flex-start; color: inherit; line-height: 1; }
.pmark__svg { height: 1em; width: auto; display: block; }
.pmark__tm {
  font-family: var(--font-sans); font-weight: 600;
  font-size: 0.24em; line-height: 1; letter-spacing: 0.02em;
  margin-left: 0.12em; margin-top: 0.06em; align-self: flex-start;
}
/* inline wordmark inside running text — same visual height as the text */
.pmark--inline { font-size: 1em; vertical-align: -0.12em; margin: 0 0.06em; }

/* ---------------- hero ---------------- */
.lr-hero { position: relative; padding-top: clamp(40px, 7vh, 80px); padding-bottom: clamp(56px, 9vw, 110px); }
.lr-hero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4.5vw, 72px); align-items: center;
}
.lr-hero[data-portrait="left"] .lr-hero__col { order: 2; }
.lr-hero[data-portrait="left"] .lr-hero__portrait { order: 1; }
.lr-hero__col { display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 28px); }
.lr-hero__name {
  font-family: var(--font-display-sans);
  font-weight: 600;
  font-size: clamp(58px, 9vw, 132px);
  line-height: 0.86;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}
.lr-hero__statement {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(21px, 2.3vw, 32px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 18ch;
}
.lr-hero__statement em {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
}
.lr-hero__lede {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 480px;
  margin: 0;
}
.lr-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 4px; }

.lr-hero__portrait {
  position: relative; margin: 0;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--paper-200);
}
.lr-hero__portrait img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1048 / 1571; object-fit: cover; object-position: 50% 50%;
}
.lr-hero__badge {
  position: absolute; left: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(248, 244, 232, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 16px; color: var(--ink-900);
}
.lr-hero__badge .pmark { font-size: 16px; }
.lr-hero__badge span {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500);
}
@media (max-width: 860px) {
  .lr-hero__grid { grid-template-columns: 1fr; gap: clamp(28px, 7vw, 44px); }
  .lr-hero[data-portrait="left"] .lr-hero__col,
  .lr-hero[data-portrait="left"] .lr-hero__portrait { order: 0; }
  .lr-hero__portrait { max-width: 460px; }
}

/* ---------------- generic section ---------------- */
.lr-section { padding-block: clamp(72px, 11vw, 156px); }
.lr-section--hair { border-top: 1px solid var(--border); }

.lr-sec-head { display: flex; flex-direction: column; gap: 18px; max-width: 860px; }
.lr-sec-title {
  font-family: var(--font-display-sans);
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 68px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

/* ---------------- about ---------------- */
.lr-about__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
  margin-top: clamp(40px, 5vw, 64px);
}
.lr-about__title {
  font-family: var(--font-display-sans);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin: 0;
  position: sticky; top: 96px;
  text-wrap: balance;
}
.lr-about__body { display: flex; flex-direction: column; gap: 22px; }
.lr-about__body p {
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.68;
  color: var(--ink-800);
  margin: 0;
  max-width: 600px;
}
.lr-about__pootz {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.35;
  color: var(--ink-900);
  border-left: 2px solid var(--accent);
  padding-left: 22px;
  margin: 6px 0;
  max-width: 560px;
}
@media (max-width: 880px) {
  .lr-about__grid { grid-template-columns: 1fr; gap: 28px; }
  .lr-about__title { position: static; }
}

/* ---------------- services — color-blocked cards ---------------- */
.lr-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(44px, 5vw, 72px);
}

/* card */
.lr-case {
  display: flex; flex-direction: column;
  background: var(--paper-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-base) var(--ease-soft);
}
.lr-case:hover { box-shadow: var(--shadow-2); }
.lr-case__block {
  height: clamp(180px, 19vw, 240px);
  display: flex; align-items: flex-end;
  padding: 0 clamp(20px, 1.8vw, 28px) clamp(14px, 1.4vw, 20px);
}
.lr-case--pink   .lr-case__block { background: var(--pink-500); }
.lr-case--blue   .lr-case__block { background: var(--blue-500); }
.lr-case--yellow .lr-case__block { background: var(--yellow-500); }
.lr-case__no {
  font-family: var(--font-display-sans); font-weight: 700;
  font-size: clamp(76px, 8vw, 124px); line-height: 0.78;
  letter-spacing: -0.04em; color: var(--ink-900); margin: 0;
}
.lr-case__body {
  display: flex; flex-direction: column;
  gap: clamp(10px, 1vw, 14px);
  padding: clamp(22px, 2vw, 28px) clamp(20px, 1.8vw, 28px) clamp(24px, 2vw, 30px);
  flex: 1;
}
.lr-case__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.lr-case__tag {
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-700);
  display: inline-flex; align-items: center; gap: 9px;
}
.lr-case__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.lr-case__fmt {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-300);
  white-space: nowrap;
}
.lr-case__title {
  font-family: var(--font-display-sans); font-weight: 500;
  font-size: clamp(22px, 1.65vw, 27px); line-height: 1.08;
  letter-spacing: -0.015em; color: var(--ink-900); margin: 2px 0 0;
  text-wrap: balance;
}
.lr-case__sub { font-family: var(--font-sans); font-size: 15px; line-height: 1.5; color: var(--ink-500); margin: 0; }
.lr-case__link {
  margin-top: auto; padding-top: 8px;
  font-family: var(--font-sans); font-weight: 600; font-size: 15px;
  color: var(--ink-900); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  transition: color var(--dur-fast) var(--ease-soft);
}
.lr-case__link:hover { color: var(--accent); }
.lr-case__link .arr { transition: transform var(--dur-base) var(--ease-soft); }
.lr-case__link:hover .arr { transform: translateX(4px); }

@media (max-width: 880px) {
  .lr-services__grid { grid-template-columns: 1fr; gap: 16px; }
  .lr-case__block { height: clamp(150px, 30vw, 220px); }
}

/* ---------------- quote (inverse, full-bleed dark) ---------------- */
.lr-quote { background: var(--ink-900); color: var(--paper-onDark); }
.lr-quote__inner {
  max-width: 1180px; margin: 0 auto;
  padding-block: clamp(64px, 9vw, 130px);
  padding-inline: clamp(22px, 5vw, 64px);
  display: grid; grid-template-columns: 1.4fr 0.85fr;
  gap: clamp(36px, 5vw, 72px); align-items: center;
}
.lr-quote__text { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); }
.lr-quote__photo {
  margin: 0; align-self: stretch;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--orange-800);
}
.lr-quote__photo img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 2 / 3; object-fit: cover; object-position: 50% 30%;
}
@media (max-width: 860px) {
  .lr-quote__inner { grid-template-columns: 1fr; gap: 40px; }
  .lr-quote__photo { max-width: 440px; }
  .lr-quote__photo img { aspect-ratio: 4 / 5; }
}
.lr-quote blockquote {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(26px, 3.5vw, 50px);
  line-height: 1.28;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--paper-onDark);
  text-wrap: pretty;
}
.lr-quote blockquote .tm { color: var(--accent-on-dark); }
.lr-quote__attr {
  font-family: var(--font-sans);
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--paper-300);
  display: flex; align-items: center; gap: 12px;
}
.lr-quote__attr::before { content: ""; width: 40px; height: 1px; background: var(--border-on-dark); }

/* ---------------- final CTA ---------------- */
.lr-final { text-align: center; }
.lr-final__inner { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.lr-final__title {
  font-family: var(--font-display-sans);
  font-weight: 600;
  font-size: clamp(40px, 6.5vw, 104px);
  line-height: 0.96; letter-spacing: -0.025em; margin: 0;
  text-wrap: balance;
}
.lr-final__mark { color: var(--accent); display: inline-flex; vertical-align: baseline; margin-right: -0.08em; }
.lr-final__mark .pmark { font-size: 0.82em; vertical-align: -0.04em; }
.lr-final__sub {
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6;
  color: var(--ink-700); max-width: 600px; margin: 0;
}
.lr-final__cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: center; }

/* ---------------- footer ---------------- */
.lr-footer { background: var(--paper-50); border-top: 1px solid var(--border); padding-block: clamp(56px, 7vw, 100px) 32px; }
.lr-footer__top { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(36px, 5vw, 72px); padding-bottom: 44px; border-bottom: 1px solid var(--border); }
.lr-footer__brand { display: flex; flex-direction: column; gap: 16px; max-width: 380px; }
.lr-footer__brand .pmark { font-size: 26px; }
.lr-footer__tag { font-family: var(--font-sans); font-size: 15px; line-height: 1.55; color: var(--ink-700); margin: 0; }
.lr-footer__joke {
  font-family: var(--font-sans);
  font-style: normal; font-weight: 500; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.4;
  color: var(--ink-900); margin: 4px 0 0; max-width: 420px;
}
.lr-footer__joke .tm { color: var(--accent); }
.lr-footer__links { display: grid; grid-template-columns: repeat(2, auto); gap: 28px 48px; align-content: start; justify-content: end; }
.lr-footer__col { display: flex; flex-direction: column; gap: 12px; }
.lr-footer__head { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--ink-500); margin: 0 0 4px; }
.lr-footer__col a { font-family: var(--font-sans); font-size: 15px; color: var(--ink-900); text-decoration: none; width: fit-content; transition: color var(--dur-fast) var(--ease-soft); }
.lr-footer__col a:hover { color: var(--accent); }
.lr-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; font-family: var(--font-sans); font-size: 12px; color: var(--ink-500); }
.lr-footer__copy { display: inline; }
.lr-footer__copy .pmark { font-size: 13px; margin-left: 0.34em; vertical-align: -0.16em; }
@media (max-width: 760px) {
  .lr-footer__top { grid-template-columns: 1fr; gap: 32px; }
  .lr-footer__links { justify-content: start; }
  .lr-footer__bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* =============================================================
   DARK THEME — page on ink, paper (cream) type
   ============================================================= */
body { background: var(--ink-900); color: var(--paper-onDark); }

.lr-topbar { background: rgba(0, 0, 0, 0.62); border-bottom-color: var(--border-on-dark); }
.lr-topbar__brand { color: var(--paper-onDark); }
.lr-topbar__name { color: var(--paper-300); border-left-color: var(--border-on-dark); }
.lr-topbar__link { color: var(--paper-onDark); }
.lr-topbar__link:hover { color: var(--accent); }

.lr-eyebrow { color: var(--paper-300); }
.lr-section--hair { border-top-color: var(--border-on-dark); }

.lr-btn--ghost { color: var(--paper-onDark); border-color: var(--border-on-dark); }
.lr-btn--ghost:hover { border-color: var(--paper-onDark); color: var(--accent); }
.lr-btn--text { color: var(--paper-300); }
.lr-btn--text:hover { color: var(--accent); }

.lr-hero__name { color: var(--paper-onDark); }
.lr-hero__statement { color: var(--paper-onDark); }
.lr-hero__lede { color: var(--paper-300); }
.lr-hero__portrait { background: var(--ink-800); }

.lr-sec-title, .lr-about__title { color: var(--paper-onDark); }
.lr-about__body p { color: var(--paper-300); }
.lr-about__pootz { color: var(--paper-onDark); border-left-color: var(--accent); }

.lr-case { background: var(--ink-800); border-color: var(--border-on-dark); box-shadow: none; }
.lr-case:hover { box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.8); }
.lr-case__title { color: var(--paper-onDark); }
.lr-case__tag { color: var(--paper-300); }
.lr-case__sub { color: var(--paper-400); }
.lr-case__fmt { color: var(--paper-400); }
.lr-case__link { color: var(--paper-onDark); }
.lr-case__link:hover { color: var(--accent); }

.lr-final__title { color: var(--paper-onDark); }
.lr-final__sub { color: var(--paper-300); }

.lr-footer { background: transparent; border-top-color: var(--border-on-dark); }
.lr-footer__top { border-bottom-color: var(--border-on-dark); }
.lr-footer__brand { color: var(--paper-onDark); }
.lr-footer__tag { color: var(--paper-300); }
.lr-footer__joke { color: var(--paper-onDark); }
.lr-footer__head { color: var(--paper-400); }
.lr-footer__col a { color: var(--paper-onDark); }
.lr-footer__col a:hover { color: var(--accent); }
.lr-footer__bottom { color: var(--paper-400); }

/* quote — burnt-orange brand block (deliberate color pop on the dark page) */
.lr-quote { background: var(--orange-600); color: var(--ink-900); }
.lr-quote blockquote { color: var(--ink-900); }
.lr-quote .lr-eyebrow--dark { color: rgba(0, 0, 0, 0.62); }
.lr-quote .lr-eyebrow--dark::before { background: rgba(0, 0, 0, 0.42); }
.lr-quote__attr { color: rgba(0, 0, 0, 0.6); }
.lr-quote__attr::before { background: rgba(0, 0, 0, 0.28); }