/* Page layout for the wslr one-pager. Values come from the design-system tokens. */

html { scroll-behavior: smooth; scroll-snap-type: y proximity; scroll-padding-top: 65px; }

/* Section labels are real h2s (for screen readers and search engines) that keep the small label look. */
h2.label { line-height: var(--leading-body); }
/* Content headings one level down that keep the h2 size. */
.h2 { font-size: var(--text-h2); }
/* Sections focused after a nav jump (for keyboard and screen-reader users) need no outline. */
section[tabindex="-1"]:focus { outline: none; }

.page { min-height: 100vh; background: var(--page-bg); color: var(--text-body-color); font-family: var(--font-body); display: flex; flex-direction: column; }
/* Short pages (legal, 404) keep the footer at the bottom of the window. */
.page > main { flex: 1; width: 100%; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-24); box-sizing: border-box; }

/* ---- Header ---- */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--color-surface-base); border-bottom: 1px solid var(--border-default); }
.hdr { max-width: 1080px; margin: 0 auto; padding: var(--space-16) var(--space-24); display: flex; align-items: center; gap: var(--space-24); }
.hdr .brand { display: flex; align-items: center; text-decoration: none; }
.hdr .brand img { height: 26px; width: auto; display: block; }
.hdr .spacer { flex: 1; }
.navlinks { display: flex; gap: var(--space-24); }
.navlinks a, .navlinks a:visited { font-size: var(--text-small); font-weight: 500; text-decoration: none; padding-bottom: var(--space-4); color: var(--text-muted); border-bottom: 2px solid transparent; transition: color 120ms linear, border-color 120ms linear; }
.navlinks a:hover { color: var(--text-body-color); }
.navlinks a.active { color: var(--color-accent); border-bottom-color: var(--color-brand); }

/* Buttons rendered as links: keep the button colours over base.css link states. */
a.ds-btn--primary, a.ds-btn--primary:visited, a.ds-btn--primary:hover { color: var(--color-text-inverse); }
a.ds-btn--secondary, a.ds-btn--secondary:visited, a.ds-btn--secondary:hover { color: var(--color-text-primary); }

/* ---- Grids ---- */
.g2, .g3 { display: grid; gap: var(--space-48); }
.g3 { gap: var(--space-24); grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: 1fr 1fr; }
.g2.hero { grid-template-columns: 1.2fr 1fr; align-items: center; width: 100%; margin: auto 0; padding-top: var(--space-24); }
.g2.contact { grid-template-columns: 1.2fr 1fr; align-items: end; }

/* ---- Sections ---- */
.hero-sec { min-height: calc(100vh - 65px - 60px); display: flex; flex-direction: column; scroll-snap-align: start; }
.hero-sec h1 { margin-top: var(--space-16); max-width: 18ch; }
.hero-sec .lede { margin-top: var(--space-16); max-width: 52ch; color: var(--text-muted); }
.hero-sec .lede strong { font-weight: 500; color: var(--text-body-color); }
.hero-sec .ctas { display: flex; gap: var(--space-8); margin-top: var(--space-24); }

.sec { display: flex; flex-direction: column; border-top: 1px solid var(--border-strong); min-height: calc(100vh - 65px - 120px); scroll-snap-align: center; }
.body { margin: auto 0; }
.stick { position: sticky; top: 65px; z-index: 2; background: var(--page-bg); padding: var(--space-12) 0 var(--space-24); }
.stick.split { display: flex; justify-content: space-between; align-items: baseline; }
.stick .sub { font-size: var(--text-small); color: var(--text-muted); }

/* ---- Pixel art ---- */
@keyframes wslr-px { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
.px-grid { display: grid; }
.px-grid > div { transform-origin: center; }
.px-icon { display: block; }
.hero-art { display: flex; justify-content: flex-end; }
.hero-art .big { display: block; min-width: 358px; min-height: 328px; }
.hero-art .small { display: none; }
.mini { height: 60px; flex-shrink: 0; display: flex; align-items: flex-end; padding-bottom: var(--space-12); box-sizing: border-box; opacity: 0; transition: opacity 240ms linear; }
.mini.on { opacity: 1; }

/* ---- Services ---- */
.service .ic { width: 48px; height: 48px; }
.service h3 { margin-top: var(--space-16); }
.service p { margin-top: var(--space-8); font-size: var(--text-small); color: var(--text-muted); max-width: 36ch; }

/* ---- Selected work ---- */
.cases { gap: var(--space-24); }
.case { display: flex; flex-direction: column; }
.case h3 { margin-top: var(--space-8); }
.case p { margin-top: var(--space-8); font-size: var(--text-small); color: var(--text-muted); max-width: 60ch; }
.case .ds-kpi { margin-top: auto; padding-top: var(--space-24); }
.case .ds-kpi__label { border-top: 1px solid var(--border-default); padding-top: var(--space-16); }

/* ---- Background ---- */
.about-copy .h2 { max-width: 20ch; }
.about-copy p { margin-top: var(--space-16); max-width: 54ch; color: var(--text-muted); }
.facts { display: flex; flex-direction: column; }
.fact { display: grid; grid-template-columns: 32px 1fr auto; gap: var(--space-16); align-items: center; padding: var(--space-12) 0; border-bottom: 1px solid var(--border-default); font-size: var(--text-small); }
.fact .ic { width: 24px; height: 24px; }
.fact .num { color: var(--text-muted); }

/* ---- Showcases ---- */
.shot { margin-top: var(--space-8); aspect-ratio: 16 / 9; border: 1px solid var(--border-default); background: var(--surface-inset); overflow: hidden; position: relative; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.shot .pending { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.showcase h3 { margin-top: var(--space-16); }

/* ---- Contact + footer ---- */
.lastwrap { min-height: calc(100vh - 65px - 60px); display: flex; flex-direction: column; scroll-snap-align: end; }
.contact-sec { flex: 1; width: 100%; padding-bottom: var(--space-48); border-top: 1px solid var(--border-strong); display: flex; flex-direction: column; }
.contact-sec .h2 { max-width: 22ch; }
.contact-list { display: flex; flex-direction: column; gap: var(--space-8); font-size: var(--text-small); }
.contact-list > span { display: flex; gap: var(--space-8); align-items: center; }
.contact-list .muted { color: var(--text-muted); }
.contact-list svg { width: 16px; height: 16px; flex: none; }
.site-footer { border-top: 1px solid var(--border-default); background: var(--color-surface-base); width: 100%; }
.site-footer .inner { max-width: 1080px; margin: 0 auto; padding: var(--space-24); display: flex; flex-wrap: wrap; gap: var(--space-12) var(--space-24); align-items: center; }
.site-footer img { height: 22px; width: auto; display: block; }
.site-footer span { font-size: var(--text-label); color: var(--text-muted); }
.site-footer .legal { margin-left: auto; display: flex; gap: var(--space-16); font-size: var(--text-label); }
.site-footer .legal a, .site-footer .legal a:visited { color: var(--text-muted); }
.site-footer .legal a:hover { color: var(--color-accent); }

/* ---- Legal pages ---- */
.doc { padding-top: var(--space-48); padding-bottom: var(--space-48); }
.doc h1 { font-size: var(--text-h2); line-height: var(--leading-heading); margin-top: var(--space-16); }
.doc .intro { margin-top: var(--space-16); max-width: 64ch; color: var(--text-muted); }
.doc section { max-width: 68ch; margin-top: var(--space-32); padding-top: var(--space-24); border-top: 1px solid var(--border-default); }
.doc h2 { font-size: var(--text-h3); }
.doc p, .doc ul, .doc dl { margin-top: var(--space-12); }
.doc ul { padding-left: var(--space-24); }
.doc dl { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: var(--space-8) var(--space-24); }
.doc dt { color: var(--text-muted); font-size: var(--text-small); padding-top: 2px; }
.doc dd { margin: 0; }
/* Placeholder that still needs real content. Search the file for "TODO" and replace every one before going live. */
.todo { background: var(--surface-brand-tint); color: var(--text-on-brand-tint); padding: 0 var(--space-4); }
@media (max-width: 720px) { .doc dl { grid-template-columns: 1fr; gap: var(--space-4); } .doc dd { margin-bottom: var(--space-8); } }

/* ---- Reveal on scroll (only when JS runs, so content never stays hidden) ---- */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity 600ms linear, transform 700ms cubic-bezier(.2,.6,.2,1); }
.js .rv.in { opacity: 1; transform: none; }

/* ---- Mobile ---- */
@media (max-width: 720px) {
  /* Each section fills one phone screen (below the 57px header) and snaps to the top.
     Proximity, not mandatory, so sections taller than the screen can still be read freely.
     svh ignores the browser's collapsing address bar; vh is the fallback for older browsers. */
  html { scroll-snap-type: y proximity; scroll-padding-top: 57px; }
  .hero-sec, .sec, .lastwrap { min-height: calc(100vh - 57px); min-height: calc(100svh - 57px); scroll-snap-align: start; }
  .g2, .g3, .g2.hero, .g2.contact { grid-template-columns: 1fr; gap: var(--space-32); }
  .sec { padding-bottom: var(--space-48); }
  .stick { top: 57px; padding-bottom: var(--space-16); }
  .navlinks { display: none; }
  /* Small chart above the headline instead of a large one below the text. */
  .g2.hero { gap: var(--space-24); padding-top: 0; }
  .hero-art { order: -1; justify-content: flex-start; }
  .hero-art .big { display: none; }
  .hero-art .small { display: block; min-width: 142px; min-height: 130px; }
  .hero-sec { padding-bottom: var(--space-48); }
  .hero-sec h1 { font-size: 36px; line-height: 1.1; }
  .mini { display: none; }
  .hdr { padding: var(--space-12) var(--space-16); gap: var(--space-16); }
  .hdr .brand img { height: 22px; }
  .stick .sub { display: none; }
  .h2 { font-size: 32px; }
  .site-footer .legal { margin-left: 0; width: 100%; }
}

/* Very short phones (e.g. iPhone SE): drop the hero chart so headline, intro and buttons fit on the first screen. */
@media (max-width: 720px) and (max-height: 640px) {
  .hero-art { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; transition: none; }
}