/* =========================================================
   TELLO — home page sections
   Loaded after site.css. Every section is a chapter in one flat
   colour, butted against the next.
   ========================================================= */
/* =========================================================
   HERO — the ">" of the </> mark, cut by the right edge
   ========================================================= */
.hero {
  min-height: min(calc(100svh - 72px), 820px);
  padding-top: clamp(40px, 5vw, 80px);
  padding-bottom: clamp(40px, 5vw, 72px);
  overflow: hidden;
  grid-template-rows: 1fr auto;
}
.hero-mark {
  position: absolute;
  z-index: 0;
  width: min(92vh, 56vw);
  height: auto;
  right: max(-20vh, -12vw);
  top: 50%;
  transform: translateY(-50%);
  fill: var(--lime);
  animation: mark-in 1.1s var(--ease) both;
}
@keyframes mark-in {
  from { transform: translate(18%, -50%); opacity: 0; }
  to   { transform: translate(0, -50%); opacity: 1; }
}

.hero-copy {
  position: relative;
  z-index: 1;
  grid-column: 1 / span 7;
  align-self: center;
  padding-block: 32px 64px;
}
.hero-title { max-width: 11ch; }
.hero-sub {
  margin-top: 28px;
  max-width: 44ch;
  font-size: var(--t-lead);
  line-height: 1.4;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  margin-top: 40px;
}

.hero-facts {
  position: relative;
  z-index: 1;
  grid-column: 1 / span 8;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
.fact { padding-top: 20px; }
.fact dt { font-size: var(--t-lead); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.fact dd { margin-top: 6px; font-size: var(--t-small); line-height: 1.4; max-width: 20ch; }

/* =========================================================
   PROBLEM — ink; the same retyping, a century apart
   ========================================================= */
.problem { row-gap: 64px; }
.problem-text { grid-column: 1 / span 6; }
.problem-list { margin-top: 56px; display: grid; gap: 28px; }
.problem-list li {
  position: relative;
  padding-left: 36px;
  font-size: var(--t-lead);
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-width: 36ch;
}
.problem-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 14px;
  height: 14px;
  background: var(--lime);
  transition: transform 240ms var(--ease);
}
.problem-list li:hover::before { transform: scale(1.5) rotate(45deg); }

.problem-pics {
  grid-column: 7 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-content: start;
}
.pic img, .pic video { width: 100%; height: 100%; object-fit: cover; }
.pic figcaption { margin-top: 10px; font-size: var(--t-small); line-height: 1.4; }
.pic--main { grid-column: 1 / -1; }
.pic--main img { aspect-ratio: 4 / 3; filter: grayscale(1) contrast(1.05); }
.pic--side img, .pic--side video { aspect-ratio: 4 / 3; }
.pic--side img { filter: grayscale(1) contrast(1.05); }
.pic--side { margin-top: 16px; }

/* =========================================================
   HIDDEN HOURS — lime; the live calculator
   ========================================================= */
.hours { row-gap: 48px; align-content: center; }
.hours-head { grid-column: 1 / span 6; }
.hours-head .lead { margin-top: 28px; }

.hours-calc { grid-column: 1 / span 6; display: grid; gap: 8px; align-self: start; }
.hc-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px 16px;
  padding: 20px 24px 24px;
  background: var(--lime-2);
  cursor: pointer;
}
.hc-label { font-weight: 500; }
.hc-val { font-size: var(--t-lead); font-weight: 600; font-variant-numeric: tabular-nums; }
.hc-row input { grid-column: 1 / -1; }

.hours-result {
  grid-column: 7 / -1;
  grid-row: 1 / span 2;
  align-self: center;
  padding-left: clamp(0px, 3vw, 48px);
}
.hr-big { font-size: var(--t-display); font-weight: 600; line-height: 0.95; letter-spacing: -0.04em; }
.hr-big [data-out] { font-variant-numeric: tabular-nums; }
.hr-big [data-i18n] { display: block; font-size: var(--t-lead); letter-spacing: -0.01em; margin-top: 12px; }
.hr-small { margin-top: 28px; font-size: var(--t-lead); line-height: 1.3; max-width: 26ch; }
.hr-small [data-out] { font-weight: 600; font-variant-numeric: tabular-nums; }
.hr-note { margin-top: 20px; max-width: 44ch; font-size: var(--t-small); }
.hours-result .btn { margin-top: 32px; }

/* range input: a filled track and a square thumb */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 32px;
  margin: 8px 0 0;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 8px; background: var(--ink); }
input[type="range"]::-moz-range-track { height: 8px; background: var(--ink); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 32px; height: 32px;
  margin-top: -12px;
  background: var(--paper);
  border: 6px solid var(--ink);
  transition: transform 160ms var(--ease);
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px;
  background: var(--paper);
  border: 6px solid var(--ink);
  border-radius: 0;
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
input[type="range"]:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

/* =========================================================
   SERVICES — a board of filled tiles
   ========================================================= */
.board {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
}
.tile {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(20px, 2.4vw, 36px);
  min-height: 320px;
  transition: transform 260ms var(--ease);
}
.tile--head { grid-column: 1 / span 6; padding-left: 0; justify-content: space-between; }
.tile--head p { max-width: 38ch; }
.tile--a { grid-column: 7 / -1; }
.tile--b { grid-column: 1 / span 6; }
.tile--c { grid-column: 7 / -1; }
.tile--d { grid-column: 1 / span 6; min-height: 0; }
.tile--e { grid-column: 7 / -1; min-height: 0; }

.tile--lime { background: var(--lime); }
.tile--sky  { background: var(--sky); }
.tile--ink  { background: var(--ink); color: var(--paper); }
.tile--tone { background: var(--stone-2); }

.tile h3 { font-size: var(--t-lead); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; max-width: 22ch; }
.tile-lead { font-weight: 600; max-width: 40ch; }
.tile p { max-width: 58ch; }
.tile .link-under { margin-top: auto; align-self: flex-start; }
.tile:not(.tile--head):hover { transform: translateY(-4px); }

.service-tags, .ai-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.service-tags li, .ai-tags li {
  padding: 6px 12px;
  font-size: var(--t-small);
  font-weight: 500;
  background: rgba(18, 20, 16, 0.09);
}
.tile--ink .service-tags li, .ch--moss .ai-tags li { background: rgba(248, 249, 246, 0.12); }

.cta-row {
  margin-top: 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}
.cta-row .small { max-width: 44ch; }

/* =========================================================
   AI — moss; one list in three columns
   ========================================================= */
.ai-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 28px;
  align-items: end;
}
.ai-head .h-chapter { grid-column: 1 / span 6; }
.ai-head .lead { grid-column: 7 / -1; }
.ai-list {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px var(--gap);
}
.ai-item { display: grid; gap: 14px; align-content: start; }
.ai-item h3 { font-size: var(--t-lead); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; }
.ai-item h3::before {
  content: "";
  display: block;
  width: 40px;
  height: 8px;
  margin-bottom: 20px;
  background: var(--lime);
  transition: width 300ms var(--ease);
}
.ai-item:hover h3::before { width: 96px; }
.ai-foot {
  margin-top: 64px;
  padding: clamp(20px, 2.4vw, 36px);
  background: var(--moss-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
}

/* =========================================================
   PROCESS — the stages as one bar; widths follow durations
   ========================================================= */
.process { min-height: 0; }
.process .h-chapter { max-width: 20ch; }
.process-lead { margin-top: 24px; }
.stages {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 13fr 21fr 14fr 32fr 20fr;
  gap: 6px;
}
.stage { display: flex; flex-direction: column; gap: 14px; }
.stage-bar {
  height: clamp(110px, 16vh, 160px);
  padding: 20px;
  margin-bottom: 8px;
  transform-origin: left center;
}
.stage--1 .stage-bar { background: var(--lime); }
.stage--2 .stage-bar { background: var(--ink); color: var(--paper); }
.stage--3 .stage-bar { background: var(--paper); }
.stage--4 .stage-bar { background: var(--moss); color: var(--paper); }
.stage--5 .stage-bar { background: var(--stone); }
.step-time { display: block; font-size: var(--t-lead); font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; }
.stage h3 { font-size: var(--t-body); font-weight: 700; padding-right: 12px; }
.stage p { font-size: var(--t-small); line-height: 1.5; padding-right: 12px; max-width: 46ch; }

/* =========================================================
   WORK — ink; giant title, two case studies, the wall
   ========================================================= */
.work-top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: end;
}
.h-giant { grid-column: 1 / span 6; }
.work-top .lead { grid-column: 7 / -1; padding-bottom: 12px; }

.case {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 32px;
}
.case-pic { grid-column: 1 / -1; overflow: hidden; background: var(--ink-2); }
.case-pic img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; object-position: top center; transition: transform 900ms var(--ease); }
.case:hover .case-pic img { transform: scale(1.02); }
.case-body {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 32px;
}
.h-case { grid-column: 1 / span 4; font-size: var(--t-head); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.case-claim { grid-column: 5 / -1; font-size: var(--t-lead); line-height: 1.3; letter-spacing: -0.01em; max-width: 40ch; }
.case-meta { grid-column: 1 / span 4; display: grid; gap: 16px; align-content: start; }
.case-meta dt { font-size: var(--t-small); font-weight: 700; color: var(--lime); }
.case-meta dd { margin-top: 2px; font-size: var(--t-small); line-height: 1.45; }
.case-meta a { text-decoration: underline; text-underline-offset: 4px; }
.case-cols {
  grid-column: 5 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.case-cols h4 { font-size: var(--t-body); font-weight: 700; color: var(--lime); margin-bottom: 10px; }
.case-cols h4 + p, .case-cols p { font-size: var(--t-small); line-height: 1.55; }
.case-cols ul + h4 { margin-top: 24px; }
.case-results { display: grid; gap: 10px; }
.case-results li { font-size: var(--t-small); line-height: 1.5; padding-left: 18px; position: relative; }
.case-results li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; background: var(--lime); }
.case-body > .link-under { grid-column: 5 / -1; }

.wall {
  margin-top: 88px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
}
.wall-tile { display: block; }
.wall-tile:nth-child(1) { grid-column: 1 / span 7; }
.wall-tile:nth-child(2) { grid-column: 8 / -1; }
.wall-tile:nth-child(3) { grid-column: 1 / span 5; }
.wall-tile:nth-child(4) { grid-column: 6 / span 4; }
.wall-tile:nth-child(5) { grid-column: 10 / -1; }
.wall-tile img {
  width: 100%;
  height: clamp(180px, 22vw, 340px);
  object-fit: cover;
  object-position: top left;
  transition: opacity 240ms var(--ease);
}
.wall-tile:nth-child(n+3) img { height: clamp(150px, 16vw, 240px); }
.wall:hover .wall-tile img { opacity: 0.55; }
.wall .wall-tile:hover img { opacity: 1; }
.wall-cap { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: var(--t-small); }
.wall-cap span:last-child { opacity: 0.7; }

.work-strip {
  margin-top: 88px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}
.h-sub { grid-column: 1 / span 4; font-size: var(--t-lead); font-weight: 600; letter-spacing: -0.015em; }
.work-list { grid-column: 5 / -1; display: grid; gap: 4px; }
.work-row a {
  display: grid;
  grid-template-columns: 1.2fr 1.6fr 80px 24px;
  align-items: baseline;
  gap: 16px;
  padding: 18px 20px;
  background: var(--ink-2);
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.work-row a:hover { background: var(--lime); color: var(--ink); }
.work-num { display: none; }
.work-name { font-size: var(--t-lead); font-weight: 600; letter-spacing: -0.015em; }
.work-tag, .work-year { font-size: var(--t-small); }
.work-year { text-align: right; opacity: 0.75; }
.work-arrow { text-align: right; transition: transform 200ms var(--ease); }
.work-row a:hover .work-arrow { transform: translateX(4px); }
.work-links {
  grid-column: 5 / -1;
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
.services-foot { display: grid; gap: 10px; }
.services-foot p { font-size: var(--t-small); max-width: 44ch; }

/* =========================================================
   SECURITY — stone; heading held left, commitments right
   ========================================================= */
.sec-head { grid-column: 1 / span 5; align-self: start; position: sticky; top: 120px; }
.sec-head .lead { margin-top: 28px; }
.sec-list { grid-column: 7 / -1; display: grid; gap: 8px; }
.sec-list article { padding: 28px 32px; background: var(--paper); display: grid; gap: 10px; transition: background-color 200ms var(--ease); }
.sec-list article:hover { background: var(--lime); }
.sec-list h3 { font-size: var(--t-lead); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; }
.sec-list p { max-width: 52ch; }

/* =========================================================
   ABOUT — ink; the story set large in two columns
   ========================================================= */
.about .h-chapter { max-width: 18ch; }
.about-text {
  margin-top: 64px;
  columns: 2;
  column-gap: var(--gap);
  font-size: var(--t-lead);
  line-height: 1.32;
  letter-spacing: -0.01em;
}
.about-text p { break-inside: avoid; margin-bottom: 1em; }

/* =========================================================
   FAQ — a band per question, every answer visible
   ========================================================= */
.faq-band {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 16px;
  padding: 40px var(--m);
  background: var(--stone);
}
.faq-band:nth-of-type(odd) { background: var(--stone-2); }
.faq-band--head {
  min-height: 40svh;
  align-content: end;
  padding-top: var(--pad);
  background: var(--sky);
}
.faq-band--head h2 { grid-column: 1 / -1; max-width: 14ch; }
.faq-band h3 { grid-column: 1 / span 5; font-size: var(--t-lead); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; }
.faq-band p { grid-column: 7 / -1; max-width: 56ch; }
.faq-band--foot { background: var(--paper); }
.faq-band--foot .link-under { grid-column: 7 / -1; }

/* =========================================================
   CONTACT — lime; booking, then three cells
   ========================================================= */
.contact-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 28px;
  align-items: end;
}
.contact-head .h-chapter { grid-column: 1 / span 7; }
.contact-intro { grid-column: 8 / -1; display: grid; gap: 16px; }
.contact-status { font-weight: 600; }

.booking { margin-top: 64px; background: var(--ink); color: var(--paper); }
.booking-alt { margin-top: 24px; font-weight: 500; }

.cells {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.cell { display: grid; gap: 10px; align-content: start; padding: 28px; background: var(--lime-2); transition: background-color 200ms var(--ease); }
.cell:hover { background: var(--paper); }
.cell--ink, .cell--ink:hover { background: var(--ink); color: var(--paper); }
.cell-label { font-size: var(--t-small); font-weight: 700; }
.cell-big { font-size: var(--t-lead); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
a.cell-big:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 1024px) {
  .hero-copy { grid-column: 1 / span 9; }
  .hero-facts { grid-column: 1 / -1; }
  .problem-text, .problem-pics { grid-column: 1 / -1; }
  .hours-head, .hours-calc, .hours-result { grid-column: 1 / -1; grid-row: auto; }
  .hours-result { padding-left: 0; }
  .tile--head, .tile--a, .tile--b, .tile--c, .tile--d, .tile--e { grid-column: 1 / -1; }
  .tile { min-height: 0; }
  .tile--head { padding-bottom: 32px; }
  .ai-list { grid-template-columns: 1fr 1fr; }
  .ai-head .h-chapter, .ai-head .lead { grid-column: 1 / -1; }
  .stages { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 40px; }
  .stage--1, .stage--2, .stage--3, .stage--5 { grid-column: span 2; }
  .stage--4 { grid-column: span 4; }
  .h-case, .case-claim, .case-meta, .case-cols, .case-body > .link-under { grid-column: 1 / -1; }
  .case-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
  .h-sub, .work-list, .work-links { grid-column: 1 / -1; }
  .h-giant, .work-top .lead { grid-column: 1 / -1; }
  .work-top { row-gap: 24px; }
  .work-top .lead { max-width: 52ch; }
  .h-sub { margin-bottom: 24px; }
  .sec-head { grid-column: 1 / -1; position: static; margin-bottom: 56px; }
  .sec-list { grid-column: 1 / -1; }
  .contact-head .h-chapter, .contact-intro { grid-column: 1 / -1; }
}

/* =========================================================
   PHONE — its own composition
   ========================================================= */
@media (max-width: 720px) {
  .hero { min-height: calc(100svh - 68px); padding-top: 40px; padding-bottom: 0; grid-template-rows: auto auto 1fr; }
  .hero-copy { grid-row: 1; }
  .hero-facts { grid-row: 2; }
  .hero-copy { grid-column: 1 / -1; padding-block: 0 40px; }
  .hero-sub { margin-top: 28px; }
  .hero-actions { margin-top: 32px; gap: 20px; }
  .hero-actions .btn { width: 100%; }
  .hero-facts { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .hero-mark {
    position: relative;
    grid-column: 1 / -1;
    width: 96vw;
    max-width: none;
    right: auto; top: auto;
    grid-row: 3;
    margin: 16px 0 -30vw 8vw;
    transform: none;
    animation-name: mark-in-phone;
  }
  @keyframes mark-in-phone {
    from { transform: translateX(18%); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
  .problem-pics { grid-template-columns: 1fr 1fr; }
  .hc-row { padding: 16px 18px 20px; }
  .ai-list { grid-template-columns: 1fr; gap: 48px; margin-top: 56px; }
  .ai-foot { margin-top: 64px; }
  .ai-foot .btn { width: 100%; }
  .stages { grid-template-columns: 1fr; row-gap: 32px; }
  .stage--1, .stage--2, .stage--3, .stage--4, .stage--5 { grid-column: 1 / -1; }
  .stage-bar { height: auto; min-height: 72px; }
  .stage--2 .stage-bar { min-height: 120px; }
  .stage--4 .stage-bar { min-height: 200px; }
  .stage--5 .stage-bar { min-height: 120px; }
  .js .stage[data-reveal] .stage-bar { transform: scaleX(0.4); }
  .case { margin-top: 72px; }
  .case-pic img { aspect-ratio: 16 / 10; }
  .case-meta, .case-cols { grid-template-columns: 1fr; }
  .wall { margin-top: 80px; grid-template-columns: 62fr 38fr; }
  .wall-tile:nth-child(1) { grid-column: 1 / -1; }
  .wall-tile:nth-child(2) { grid-column: 1; }
  .wall-tile:nth-child(3) { grid-column: 2; }
  .wall-tile:nth-child(4) { grid-column: 1; }
  .wall-tile:nth-child(5) { grid-column: 2; }
  .wall-tile img, .wall-tile:nth-child(n+3) img { height: 150px; }
  .wall-tile:nth-child(1) img { height: 220px; }
  .wall-cap { flex-direction: column; gap: 0; }
  .work-strip { margin-top: 80px; }
  .work-row a { grid-template-columns: 1fr auto 20px; padding: 16px; }
  .work-tag { display: none; }
  .sec-list article { padding: 22px 20px; }
  .about-text { columns: 1; margin-top: 40px; }
  .faq-band { padding: 32px var(--m); }
  .faq-band h3, .faq-band p, .faq-band--foot .link-under { grid-column: 1 / -1; }
  .faq-band--head { min-height: 30svh; padding-top: var(--pad); }
  .cells { grid-template-columns: 1fr; }
  .cell { padding: 22px 20px; }
}