/* ==========================================================================
   Design Boost LLC — designboost.us
   Direction: "Human Hand in the Loop"

   The page is a set of white drawing sheets pinned to a warm board.
   #872dff appears only as hand annotation over those sheets — never as a
   flat UI fill, never with a glow or gradient. Ink is matte.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Color — only the five brief hexes. Warmth comes from the grain overlay
     and the brown-tinted shadows, never from shifting these values. */
  --ink: #872dff;
  --ink-deep: #6a1fd0;
  --ink-wash: rgba(135, 45, 255, 0.08);
  --ink-line: rgba(135, 45, 255, 0.34);

  --board: #e4e3f0;   /* the warm board sheets are pinned to */
  --sheet: #ffffff;   /* the drawing sheets themselves */
  --graphite: #030d1a;
  --black: #000000;

  --text: #030d1a;
  --text-soft: rgba(3, 13, 26, 0.66);
  --text-faint: rgba(3, 13, 26, 0.42);
  --rule: rgba(3, 13, 26, 0.14);

  --on-dark: #ffffff;
  --on-dark-soft: rgba(255, 255, 255, 0.68);
  --on-dark-faint: rgba(255, 255, 255, 0.38);
  --rule-dark: rgba(255, 255, 255, 0.16);

  /* Shadows are brown-tinted, not neutral grey — this is what makes the
     sheets read as paper rather than as floating UI cards. */
  --lift-sm: 3px 4px 0 rgba(48, 28, 8, 0.09);
  --lift: 7px 9px 0 rgba(48, 28, 8, 0.1);
  --lift-lg: 12px 15px 0 rgba(48, 28, 8, 0.11);

  /* Type */
  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "Azeret Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --t-hero: clamp(2.9rem, 7.2vw, 6.4rem);
  --t-h2: clamp(2rem, 3.6vw, 3.3rem);
  --t-h3: clamp(1.25rem, 1.5vw, 1.6rem);
  --t-lead: clamp(1.12rem, 1.35vw, 1.42rem);
  --t-body: clamp(1rem, 0.4vw + 0.92rem, 1.09rem);
  --t-mono: 0.72rem;

  /* Layout */
  --wrap: 1220px;
  --gutter: clamp(22px, 5vw, 68px);
  --pad-section: clamp(76px, 10vw, 148px);

  /* An irregular radius, so every block edge is slightly hand-cut rather
     than machine-true. Subtle on purpose — it should register as texture,
     not as a novelty shape. */
  --cut: 14px 4px 11px 5px / 5px 11px 4px 14px;
  --cut-sm: 8px 3px 7px 3px / 3px 7px 3px 8px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--board);
  color: var(--text);
  font-family: var(--body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   ACCESSIBILITY
   -------------------------------------------------------------------------- */

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

/* On dark card stock the ink outline loses contrast, so focus goes white. */
.is-dark :focus-visible { outline-color: var(--on-dark); }

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 3000;
  background: var(--graphite);
  color: var(--on-dark);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  padding: 0.85em 1.4em;
  text-decoration: none;
  transition: transform 0.2s var(--ease);
}

.skip-link:focus { transform: translate(-50%, 0); }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   PAPER GRAIN
   The single most important texture in the build: it is what stops the
   given hexes from reading as flat digital surfaces.
   -------------------------------------------------------------------------- */

/* SVG is a replaced element: without explicit width/height it falls back to
   its intrinsic 300x150 rather than stretching to the inset box. */
.grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 900;
  opacity: 0.44;
  mix-blend-mode: multiply;
}

.grain-local {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
}

/* --------------------------------------------------------------------------
   LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--pad-section);
}

.section--board { background: var(--board); }
.section--sheet { background: var(--sheet); }

.section--dark {
  background: var(--graphite);
  color: var(--on-dark);
}

.section--dark .eyebrow { color: var(--ink); }
.section--dark .section-title { color: var(--on-dark); }
.section--dark .section-intro { color: var(--on-dark-soft); }

/* Torn edge between a light section and the one below it. Sits flush at the
   boundary and is filled with the *next* section's colour. */
.deckle {
  display: block;
  width: 100%;
  height: 14px;
  position: relative;
  z-index: 2;
  margin-bottom: -1px;
}

.deckle svg { width: 100%; height: 100%; }

/* The strip sits on the *outgoing* section's colour; the jagged path is
   filled with the *incoming* one, so the next section tears into view. */
.deckle--to-sheet { background: var(--board); }
.deckle--to-sheet svg path { fill: var(--sheet); }

.deckle--to-board { background: var(--sheet); }
.deckle--to-board svg path { fill: var(--board); }

.deckle--to-dark { background: var(--sheet); }
.deckle--to-dark svg path { fill: var(--graphite); }

.section--tight { padding-top: 0; }

/* --------------------------------------------------------------------------
   TYPE ROLES
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  flex: none;
}

.section-head {
  max-width: 660px;
  margin-bottom: clamp(42px, 5.5vw, 76px);
}

.section-title {
  font-family: var(--display);
  font-weight: 640;
  font-size: var(--t-h2);
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin-top: 0.44em;
  color: var(--text);
}

.section-intro {
  margin-top: 0.9em;
  color: var(--text-soft);
  font-size: var(--t-lead);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   INK MARKS
   Every mark is a stroked SVG path that draws itself in. JS measures each
   path and writes its true length to --len so the trace reads as one
   continuous pen stroke rather than a generic fade.
   -------------------------------------------------------------------------- */

.mark {
  position: absolute;
  pointer-events: none;
  overflow: visible;
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mark path {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  transition: stroke-dashoffset 1.15s var(--ease);
}

.inview .mark path { stroke-dashoffset: 0; }

.mark path:nth-child(2) { transition-delay: 0.16s; }

@media (prefers-reduced-motion: reduce) {
  .mark path {
    transition: none;
    stroke-dashoffset: 0;
  }
}

.marked {
  position: relative;
  display: inline-block;
}

/* A hand-drawn rule, used wherever a divider is needed. Irregular by
   construction — it is a wobbling path, not a 1px border. */
.hand-rule {
  height: 6px;
  background-repeat: repeat-x;
  background-size: 400px 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 6' preserveAspectRatio='none'%3E%3Cpath d='M0,3.2 C58,1.4 116,4.6 196,3 C276,1.5 338,4.8 400,2.9' fill='none' stroke='%23030d1a' stroke-opacity='0.2' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1em 1.7em;
  border-radius: var(--cut-sm);
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--on-dark);
  box-shadow: var(--lift-sm);
  transform: rotate(-0.8deg);
  transition: transform 0.26s var(--ease), box-shadow 0.26s var(--ease),
              background-color 0.2s var(--ease);
}

.btn:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: var(--lift);
  background: var(--ink-deep);
  border-color: var(--ink-deep);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--graphite);
}

.btn--ghost:hover {
  background: var(--graphite);
  border-color: var(--graphite);
  color: var(--on-dark);
}

.btn--sm {
  padding: 0.72em 1.15em;
  font-size: 0.7rem;
}

.btn .arrow { transition: transform 0.26s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 800;
  background: rgba(228, 227, 240, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 15px;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.42em;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.14rem;
  letter-spacing: -0.024em;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}

.wordmark .llc {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  color: var(--ink);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
}

.nav a:not(.btn) {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-soft);
  padding-block: 4px;
  transition: color 0.18s var(--ease);
}

.nav a:not(.btn):hover { color: var(--ink); }

@media (max-width: 880px) {
  .nav a:not(.btn) { display: none; }
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-top: clamp(58px, 8vw, 104px);
  padding-bottom: clamp(70px, 9vw, 128px);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(24px, 4vw, 64px);
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.hero-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-hero);
  line-height: 0.94;
  letter-spacing: -0.038em;
  margin-top: 0.5em;
  color: var(--text);
}

.hero-title .line { display: block; }

/* The payoff line carries the only ink mark in the hero. */
.hero-title .marked { padding-bottom: 0.06em; }

.hero-underline {
  left: -1.5%;
  width: 103%;
  bottom: -0.16em;
  height: 0.34em;
}

.hero-lead {
  margin-top: 1.5em;
  max-width: 40ch;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--text-soft);
}

.hero-actions {
  margin-top: 2.4em;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Trust badge, set as a hand-stamped roundel rather than a pill. */
.stamp {
  position: relative;
  width: clamp(132px, 15vw, 172px);
  aspect-ratio: 1;
  flex: none;
  display: grid;
  place-items: center;
  text-align: center;
  transform: rotate(-7deg);
  color: var(--ink);
  justify-self: end;
  margin-top: clamp(0px, 3vw, 34px);
}

.stamp-ring {
  position: absolute;
  inset: 0;
  color: var(--ink);
}

.stamp-count {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 2.6vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.stamp-label {
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.5;
  margin-top: 0.5em;
  max-width: 8em;
}

@media (max-width: 900px) {
  .stamp {
    justify-self: start;
    margin-top: 8px;
  }
}

/* --------------------------------------------------------------------------
   ABOUT
   -------------------------------------------------------------------------- */

.about-inner { max-width: 900px; }

.about-statement {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.9vw, 2.55rem);
  line-height: 1.24;
  letter-spacing: -0.024em;
  margin-top: 0.6em;
  color: var(--text);
}

.about-statement .marked { padding-bottom: 0.02em; }

.about-underline {
  left: -1%;
  width: 102%;
  bottom: -0.1em;
  height: 0.3em;
}

/* --------------------------------------------------------------------------
   SERVICES — the two wings, and the brace that binds them
   -------------------------------------------------------------------------- */

.wings {
  position: relative;
  padding-top: clamp(52px, 7vw, 92px);
}

/* THE SIGNATURE. One hand-drawn brace spanning both wings — the studio's
   claim (digital + physical, one hand) made as a single mark. */
.brace {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(38px, 5vw, 62px);
  color: var(--ink);
  pointer-events: none;
  overflow: visible;
}

.brace svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.brace path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 2200);
  stroke-dashoffset: var(--len, 2200);
  transition: stroke-dashoffset 1.5s var(--ease);
}

.inview .brace path { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .brace path { transition: none; stroke-dashoffset: 0; }
}

.brace-note {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.wings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 4vw, 56px);
}

@media (max-width: 940px) {
  .wings-grid { grid-template-columns: 1fr; }
}

/* Each wing is a pinned sheet. */
.wing {
  background: var(--sheet);
  border-radius: var(--cut);
  box-shadow: var(--lift);
  padding: clamp(26px, 3vw, 40px) clamp(22px, 2.6vw, 36px) clamp(14px, 2vw, 22px);
}

.wing:first-child { transform: rotate(-0.55deg); }
.wing:last-child { transform: rotate(0.45deg); }

@media (max-width: 940px) {
  .wing:first-child,
  .wing:last-child { transform: none; }
}

.wing-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 1.1em;
}

.wing-name {
  font-family: var(--display);
  font-weight: 640;
  font-size: var(--t-h3);
  letter-spacing: -0.022em;
  color: var(--text);
}

.wing-count {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

/* The parts list. Each row carries its wing-prefixed index, which is real
   information — it says which side of the studio the work comes from. */
.parts { margin-top: 0.4em; }

.part {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  gap: 0 1rem;
  padding-block: clamp(15px, 1.6vw, 20px);
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 400px 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 6' preserveAspectRatio='none'%3E%3Cpath d='M0,3.2 C58,1.4 116,4.6 196,3 C276,1.5 338,4.8 400,2.9' fill='none' stroke='%23030d1a' stroke-opacity='0.18' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.part:last-child { background-image: none; }

.part-no {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  padding-top: 0.42em;
}

.part-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.03rem;
  letter-spacing: -0.014em;
  line-height: 1.3;
  color: var(--text);
}

.part-desc {
  grid-column: 2;
  margin-top: 0.28em;
  color: var(--text-soft);
  font-size: 0.97rem;
  line-height: 1.5;
}

@media (max-width: 420px) {
  .part { grid-template-columns: 2.9rem minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   SERVICE MODEL
   -------------------------------------------------------------------------- */

.models {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(22px, 3vw, 38px);
}

@media (max-width: 780px) {
  .models { grid-template-columns: 1fr; }
}

.model {
  position: relative;
  background: var(--board);
  border-radius: var(--cut);
  box-shadow: var(--lift);
  padding: clamp(30px, 3.4vw, 46px) clamp(24px, 3vw, 40px);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.model:first-child { transform: rotate(0.6deg); }
.model:last-child { transform: rotate(-0.5deg); }

.model:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: var(--lift-lg);
}

@media (prefers-reduced-motion: reduce) {
  .model, .model:hover { transform: none; }
}

.model-tag {
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
}

.model-name {
  font-family: var(--display);
  font-weight: 640;
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  letter-spacing: -0.026em;
  line-height: 1.1;
  margin-top: 0.55em;
  color: var(--text);
}

.model-desc {
  margin-top: 0.6em;
  color: var(--text-soft);
  font-size: 1.03rem;
}

/* --------------------------------------------------------------------------
   PROCESS — a real sequence, so it is genuinely numbered
   -------------------------------------------------------------------------- */

.process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.6vw, 34px);
}

@media (max-width: 980px) {
  .process { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .process { grid-template-columns: 1fr; }
}

.step { position: relative; }

.step-no {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 1.15em;
}

/* The step number sits inside a hand-drawn ring, not a perfect circle. */
.step-ring {
  position: absolute;
  inset: 0;
  color: var(--ink);
}

.step-name {
  font-family: var(--display);
  font-weight: 640;
  font-size: 1.13rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
}

.step-desc {
  margin-top: 0.55em;
  color: var(--text-soft);
  font-size: 0.98rem;
  line-height: 1.52;
}

/* --------------------------------------------------------------------------
   CLIENTS
   -------------------------------------------------------------------------- */

.clients {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
}

/* Logo plates. Fixed box so the row stays even regardless of lockup shape. */
.client {
  flex: 1 1 168px;
  min-width: 150px;
  height: 74px;
  display: grid;
  place-items: center;
  padding-inline: 14px;
  background: var(--sheet);
  border-radius: var(--cut-sm);
  box-shadow: var(--lift-sm);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.012em;
  color: rgba(3, 13, 26, 0.62);
  text-align: center;
}

.client:nth-child(odd) { transform: rotate(-0.7deg); }
.client:nth-child(even) { transform: rotate(0.6deg); }

.client { position: relative; }

/* The link fills the whole plate so the entire tile is the click target.
   inset:0 makes its padding box exactly equal to .client's padding box, which
   is what the absolutely-positioned logo sizes against — so wrapping the image
   in a link leaves the rendered logo pixel-identical. */
.client a {
  position: absolute;
  inset: 0;
  display: block;
}

/* Focus is a drawn ring, not a colour swap, matching the site-wide pattern. */
.client a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
  border-radius: var(--cut-sm);
}

/* The supplied artwork is square and width-normalised — every mark is 84% of
   its canvas width, with the differing lockup heights (a stacked mark vs. a
   wide wordmark) absorbed by transparent padding. So it is sized on WIDTH:
   fitting it to the plate's height instead would shrink every mark to the
   square's short side and throw the row out of optical balance.

   It is taken out of flow so the tall transparent canvas cannot feed its
   intrinsic size back into the flex row — left in flow it drags the plate
   height with it and forces the row to wrap. Out of flow, the plate keeps its
   exact box and the surplus transparent canvas overflows invisibly.
   The .client type rules above still style the alt text if an image fails. */
.client img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 84%;
  max-width: 148px;
  height: auto;
}

/* --------------------------------------------------------------------------
   VENTURES
   -------------------------------------------------------------------------- */

.ventures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 42px);
}

@media (max-width: 820px) {
  .ventures { grid-template-columns: 1fr; }
}

.venture {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--sheet);
  border-radius: var(--cut);
  box-shadow: var(--lift);
  padding: clamp(28px, 3.2vw, 42px) clamp(24px, 3vw, 38px) clamp(26px, 3vw, 36px);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.venture:first-child { transform: rotate(-0.5deg); }
.venture:last-child { transform: rotate(0.55deg); }

.venture:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: var(--lift-lg);
}

@media (prefers-reduced-motion: reduce) {
  .venture, .venture:hover { transform: none; }
}

.venture-tag {
  font-family: var(--mono);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
}

.venture-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.55rem, 2.3vw, 2.05rem);
  letter-spacing: -0.032em;
  line-height: 1.05;
  margin-top: 0.5em;
  color: var(--text);
}

.venture-desc {
  margin-top: 0.7em;
  color: var(--text-soft);
  font-size: 1.01rem;
  line-height: 1.55;
}

.venture-link {
  align-self: flex-start;
  margin-top: 1.5em;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink-line);
  padding-bottom: 3px;
  transition: border-color 0.2s var(--ease);
}

.venture-link:hover { border-bottom-color: var(--ink); }
.venture-link .arrow { transition: transform 0.24s var(--ease); }
.venture-link:hover .arrow { transform: translate(2px, -2px); }

/* --------------------------------------------------------------------------
   BOOKING
   -------------------------------------------------------------------------- */

.booking-head {
  max-width: 640px;
  margin-bottom: clamp(36px, 4.5vw, 60px);
}

/* Calendly renders its own white surface — which lands as one more white
   sheet pinned to dark card stock, so the metaphor holds. */
.calendly-shell {
  position: relative;
  background: var(--sheet);
  border-radius: var(--cut);
  box-shadow: var(--lift-lg);
  overflow: hidden;
  transform: rotate(-0.35deg);
}

@media (prefers-reduced-motion: reduce) {
  .calendly-shell { transform: none; }
}

.calendly-inline-widget {
  min-width: 100%;
  height: 700px;
}

@media (max-width: 700px) {
  .calendly-inline-widget { height: 940px; }
}

.booking-fallback {
  margin-top: 1.4em;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--on-dark-faint);
}

.booking-fallback a {
  color: var(--on-dark);
  text-decoration-color: var(--ink);
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   FOOTER — set as a drawing title block, which is the native way a studio
   that ships CAD and dielines signs its sheets.
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  background: var(--graphite);
  color: var(--on-dark-soft);
  padding-block: clamp(56px, 7vw, 88px) 30px;
}

.title-block {
  border: 1.5px solid var(--rule-dark);
  border-radius: var(--cut-sm);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  overflow: hidden;
}

@media (max-width: 860px) {
  .title-block { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .title-block { grid-template-columns: 1fr; }
}

.tb-cell {
  padding: clamp(20px, 2.4vw, 30px);
  border-right: 1.5px solid var(--rule-dark);
  border-bottom: 1.5px solid var(--rule-dark);
}

.tb-cell:last-child { border-right: none; }

@media (max-width: 860px) {
  .tb-cell:nth-child(2n) { border-right: none; }
}

@media (max-width: 560px) {
  .tb-cell { border-right: none; }
}

.tb-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  margin-bottom: 0.9em;
}

.tb-cell--brand .wordmark {
  color: var(--on-dark);
  font-size: 1.3rem;
}

.tb-address {
  margin-top: 0.85em;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--on-dark-soft);
  max-width: 26ch;
}

.tb-email {
  display: inline-block;
  margin-top: 0.7em;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--on-dark);
  text-decoration: none;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease);
}

.tb-email:hover { color: var(--ink); }

.tb-list li + li { margin-top: 0.62em; }

.tb-list a {
  font-family: var(--mono);
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--on-dark-soft);
  transition: color 0.18s var(--ease);
}

.tb-list a:hover { color: var(--ink); }

.tb-cell--span {
  grid-column: 1 / -1;
  border-right: none;
  border-bottom: none;
}

.accessibility-note {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--on-dark-faint);
  max-width: 68ch;
}

.accessibility-note a {
  color: var(--on-dark-soft);
  text-decoration-color: var(--ink);
  text-underline-offset: 3px;
}

.accessibility-note a:hover { color: var(--on-dark); }

.footer-base {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--on-dark-faint);
}

/* --------------------------------------------------------------------------
   REVEAL
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.72s var(--ease), transform 0.72s var(--ease);
}

.reveal.inview {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   LEGAL / CONTENT PAGES
   -------------------------------------------------------------------------- */

.doc {
  background: var(--sheet);
  border-radius: var(--cut);
  box-shadow: var(--lift);
  padding: clamp(32px, 5vw, 76px) clamp(26px, 5vw, 68px);
  max-width: 820px;
}

.doc-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  letter-spacing: -0.032em;
  line-height: 1.02;
  color: var(--text);
}

.doc-meta {
  margin-top: 1em;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.doc-body { margin-top: clamp(28px, 3.5vw, 44px); }

.doc-body > p {
  margin-bottom: 1.15em;
  color: var(--text-soft);
  line-height: 1.68;
}

.doc-body h2 {
  font-family: var(--display);
  font-weight: 640;
  font-size: clamp(1.15rem, 1.6vw, 1.38rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text);
  margin-top: 2.1em;
  margin-bottom: 0.7em;
}

.doc-body h2:first-child { margin-top: 0; }

.doc-body ul {
  list-style: none;
  margin-bottom: 1.3em;
}

.doc-body ul li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.6em;
  color: var(--text-soft);
  line-height: 1.6;
}

/* An inked tick rather than a bullet dot. */
.doc-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

.doc-body a {
  color: var(--text);
  text-decoration-color: var(--ink);
  text-underline-offset: 3px;
}

.doc-body a:hover { color: var(--ink); }

.doc-back {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin-top: clamp(30px, 4vw, 46px);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink-line);
  padding-bottom: 3px;
}

.doc-back:hover { border-bottom-color: var(--ink); }

/* --------------------------------------------------------------------------
   BLOG
   -------------------------------------------------------------------------- */

.post-list {
  display: grid;
  gap: clamp(20px, 2.6vw, 30px);
  max-width: 820px;
}

.post-card {
  display: block;
  position: relative;
  background: var(--sheet);
  border-radius: var(--cut);
  box-shadow: var(--lift);
  padding: clamp(26px, 3.2vw, 40px) clamp(24px, 3vw, 38px);
  text-decoration: none;
  color: inherit;
  transform: rotate(-0.4deg);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.post-card:nth-child(even) { transform: rotate(0.45deg); }

.post-card:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: var(--lift-lg);
}

@media (prefers-reduced-motion: reduce) {
  .post-card, .post-card:hover { transform: none; }
}

.post-card-meta {
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
}

.post-card-title {
  font-family: var(--display);
  font-weight: 640;
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  letter-spacing: -0.026em;
  line-height: 1.14;
  margin-top: 0.6em;
  color: var(--text);
}

.post-card-excerpt {
  margin-top: 0.7em;
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.55;
}

.post-card-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 1.3em;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink-line);
  padding-bottom: 3px;
}

.post-card:hover .post-card-more { border-bottom-color: var(--ink); }

/* Affiliate disclosure — must read as a plain statement of fact, so it is set
   quietly but at full legibility, never as fine print to be skimmed past. */
.disclosure {
  margin-top: clamp(34px, 4vw, 52px);
  padding: 1.1em 1.3em;
  background: var(--ink-wash);
  border-left: 3px solid var(--ink);
  border-radius: var(--cut-sm);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-soft);
}

.cta-stack {
  margin-top: clamp(24px, 3vw, 34px);
  display: grid;
  gap: clamp(18px, 2.2vw, 26px);
}

.cta-block {
  padding-top: clamp(16px, 2vw, 22px);
  background-repeat: repeat-x;
  background-position: 0 0;
  background-size: 400px 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 6' preserveAspectRatio='none'%3E%3Cpath d='M0,3.2 C58,1.4 116,4.6 196,3 C276,1.5 338,4.8 400,2.9' fill='none' stroke='%23030d1a' stroke-opacity='0.18' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.cta-block-label {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.03rem;
  letter-spacing: -0.014em;
  line-height: 1.35;
  color: var(--text);
  margin-bottom: 1em;
}

/* Empty-state page (blog index before the first post ships) */
.empty {
  max-width: 640px;
}

.empty-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  letter-spacing: -0.032em;
  line-height: 1.02;
  margin-top: 0.4em;
  color: var(--text);
}

.empty-body {
  margin-top: 1.1em;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--text-soft);
}

.empty-actions {
  margin-top: 2.2em;
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
}