/* thor.co — production styles. Pixel reference: thorco-brand/website/website.html */

@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/IBMPlexSans-Regular.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/IBMPlexSans-Medium.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/IBMPlexSans-Bold.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/IBMPlexMono-Medium.woff2') format('woff2'); }

:root {
  /* site-only extensions to tokens.css */
  --thor-gray-ink: #45463F;
  --thor-line-dark: #4A4C4E;
  --thor-muted-dark: #B9BAB6;
  --thor-muted-dark-2: #8A8A85;
}

* { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--thor-paper);
  color: var(--thor-ink);
  font-family: var(--thor-font-sans);
  font-size: 17px;
  /* no global line-height: the pixel reference inherits `normal` everywhere
     and sets explicit values per copy block (which this file mirrors) --
     a global 1.65 inflated headings, rows, and buttons by 10-25% */
}
h1, h2, h3, p { margin: 0; }

a { color: inherit; text-decoration: none; transition: color 200ms ease-out, background-color 200ms ease-out; }
a:hover { color: var(--thor-oxide); }

.container { max-width: 1200px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
.mono { font-family: var(--thor-font-mono); }
.kicker { font-family: var(--thor-font-mono); font-size: 13px; color: var(--thor-oxide); }

.btn-outline { display: inline-block; border: 1px solid var(--thor-ink); padding: 8px 18px; }
.btn-outline:hover { background: var(--thor-ink); color: var(--thor-paper); }

/* nav */
.nav { position: sticky; top: 0; background: var(--thor-paper); border-bottom: 1px solid var(--thor-line); z-index: 10; }
.nav-inner { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; padding-bottom: 20px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand:hover { color: inherit; }
.brand svg { display: block; }
.wordmark { font-size: 19px; letter-spacing: -0.02em; }
.wordmark-thor { font-weight: 600; }
.wordmark-dot { display: inline-block; width: 3px; height: 3px; background: var(--thor-oxide); margin: 0 1px 0 3px; }
.wordmark-co { font-family: var(--thor-font-mono); font-size: 0.82em; }
.nav-links { display: flex; gap: 32px; align-items: center; font-family: var(--thor-font-mono); font-size: 13px; }
.nav-links .btn-outline:hover { color: var(--thor-paper); }

/* hero */
.hero { border-bottom: 1px solid var(--thor-line); }
.hero-inner { padding-top: 130px; padding-bottom: 110px; }
.hero h1 { font-weight: 600; font-size: 64px; letter-spacing: -0.02em; line-height: 1.12; max-width: 780px; text-wrap: pretty; }
.hero-sub { font-size: 20px; line-height: 1.6; color: var(--thor-gray-ink); max-width: 620px; margin-top: 26px; }
.datum { margin-top: 56px; max-width: 900px; height: 1px; background: var(--thor-ink); position: relative; }
.datum-tick { position: absolute; left: 18%; top: -5px; width: 1px; height: 11px; background: var(--thor-ink); }
.datum-tick-2 { left: 76%; }
.datum-square { position: absolute; left: 47%; top: -8px; width: 8px; height: 8px; background: var(--thor-oxide); }
.hero-meta { font-size: 13px; color: var(--thor-gray); margin-top: 16px; }

/* practices */
.practices { border-bottom: 1px solid var(--thor-line); }
.practices-inner { padding-top: 90px; padding-bottom: 90px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.practice { display: flex; flex-direction: column; gap: 18px; }
.practice h2 { font-weight: 600; font-size: 34px; letter-spacing: -0.015em; }
.practice-body { font-size: 17px; line-height: 1.65; color: var(--thor-gray-ink); }
.rows { list-style: none; margin: 8px 0 0; padding: 0; }
.row { padding: 14px 0; border-top: 1px solid var(--thor-line); display: flex; gap: 20px; align-items: baseline; }
.rows .row:last-child { border-bottom: 1px solid var(--thor-line); }
.row-letter { font-size: 12px; color: var(--thor-gray); width: 24px; flex-shrink: 0; }
.row-text { font-size: 16px; }

/* approach (ink background — oxide-bright only) */
.approach { background: var(--thor-ink); color: var(--thor-paper); }
.approach-inner { padding-top: 100px; padding-bottom: 100px; }
.kicker-dark { color: var(--thor-oxide-bright); }
.approach h2 { font-weight: 600; font-size: 40px; letter-spacing: -0.015em; margin-top: 16px; max-width: 700px; line-height: 1.2; }
.approach-sub { font-size: 18px; line-height: 1.65; color: var(--thor-muted-dark); max-width: 620px; margin-top: 18px; }
.approach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; margin-top: 70px; }
.step { display: flex; flex-direction: column; gap: 12px; }
.step-rule { height: 1px; background: var(--thor-line-dark); position: relative; }
.step-square { position: absolute; top: -4px; width: 8px; height: 8px; background: var(--thor-oxide-bright); }
.step-square-left { left: 0; }
.step-square-mid { left: 46%; }
.step-square-right { right: 0; }
.step h3 { font-weight: 600; font-size: 20px; }
.step p { font-size: 15.5px; line-height: 1.6; color: var(--thor-muted-dark); }

/* about */
.about { border-bottom: 1px solid var(--thor-line); }
.about-inner { padding-top: 100px; padding-bottom: 100px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; }
.about-text { display: flex; flex-direction: column; gap: 18px; }
.about-text h2 { font-weight: 600; font-size: 34px; letter-spacing: -0.015em; }
.about-text p:not(.kicker) { font-size: 17px; line-height: 1.7; color: var(--thor-gray-ink); text-wrap: pretty; }
.cred { list-style: none; margin: 0; padding: 0; align-self: center; }
.cred-row { padding: 16px 0; border-top: 1px solid var(--thor-line); display: flex; justify-content: space-between; align-items: baseline; }
.cred .cred-row:last-child { border-bottom: 1px solid var(--thor-line); }
.cred-name { font-size: 16px; font-weight: 500; }
.cred-role { font-size: 12px; color: var(--thor-gray); }

/* contact */
.contact-inner { padding-top: 110px; padding-bottom: 120px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.contact h2 { font-weight: 600; font-size: 44px; letter-spacing: -0.02em; line-height: 1.2; max-width: 640px; }
.btn-mail { font-size: 20px; border: 1px solid var(--thor-ink); padding: 16px 32px; margin-top: 8px; }
.btn-mail:hover { background: var(--thor-ink); color: var(--thor-paper); }

/* footer (ink background — oxide-bright only) */
.footer { background: var(--thor-ink); color: var(--thor-muted-dark-2); }
.footer-inner { padding-top: 36px; padding-bottom: 36px; display: flex; justify-content: space-between; align-items: center; }
.wordmark-footer { font-size: 16px; color: var(--thor-paper); letter-spacing: normal; }
.wordmark-dot-dark { width: 2.5px; height: 2.5px; background: var(--thor-oxide-bright); margin: 0 1px 0 2px; }
.footer-meta { font-size: 12px; display: flex; gap: 28px; }
.footer a { color: var(--thor-muted-dark-2); }
.footer a:hover { color: var(--thor-oxide-bright); }

/* sticky-nav anchor offset: without this, smooth-scrolled section headings land
   under the sticky nav (~80.5px desktop, ~88.5px mobile -- the contact button's
   line box + padding + border sets the bar height, not the 26px logo) */
html { scroll-padding-top: 88px; }

/* single breakpoint per spec: grids to one column, hero 40px, nav collapses to contact, hit targets >= 44px */
@media (max-width: 800px) {
  .container { padding-left: 24px; padding-right: 24px; }
  .nav-links a:not(.btn-outline) { display: none; }
  .nav-links .btn-outline { padding: 14px 18px; }   /* >= 44px tall at line-height normal */
  .hero-inner { padding-top: 90px; padding-bottom: 80px; }
  .hero h1 { font-size: 40px; }
  .practices-inner, .about-inner { grid-template-columns: 1fr; gap: 56px; }
  .approach-grid { grid-template-columns: 1fr; gap: 40px; }
  .practices-inner { padding-top: 70px; padding-bottom: 70px; }
  .approach-inner, .about-inner { padding-top: 70px; padding-bottom: 70px; }
  .contact-inner { padding-top: 80px; padding-bottom: 90px; }
  .contact h2 { font-size: 32px; }
  .approach h2 { font-size: 32px; }
  .btn-mail { font-size: 17px; padding: 14px 24px; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-meta { flex-wrap: wrap; gap: 12px 28px; }
}

/* motion — gated on html.js so a JS-less page is fully visible */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-settle] { opacity: 0; transform: translateY(12px); transition: opacity 240ms ease-out, transform 240ms ease-out; }
  html.js [data-settle].settled { opacity: 1; transform: none; }
  html.js .datum-square { left: 18%; transition: left 240ms ease-out; }
  html.js .datum-square.seated { left: 47%; }
}