/* GioLocated Brand ID 2.0 on the showcase (work.giolocated.com). build.py links it after the
   inline style.css and package.py copies it into giolocated-work.
   Starts from brand2/showcase-overrides.css (design-system.md, section 13.2) and uses the
   tokens.css v2 scale: one font (Montserrat 400), four sizes (display 48, label 20, body 16,
   small 14), no bold, no italics, square corners, hairlines, and a short dash under section labels.
   The Paper colors stay. The accent appears once: the second line of the H1.
   Loaded after the page's own <style>, so it only overrides. */

:root {
  --r: 0;
  --rule: #5d584c;                  /* hairlines and dashes: the secondary text color, 6.29:1 */
  --font: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --fs-display: 48px; --lh-display: 1.1;
  --fs-label: 20px;   --lh-label: 1.3;
  --fs-body: 16px;    --lh-body: 1.5;
  --fs-small: 14px;   --lh-small: 1.45;
  --dash-len: 40px; --dash-long: 64px; --dash-w: 2px;
}
@media (max-width: 760px) {
  :root { --fs-display: 30px; --lh-display: 1.15; --fs-label: 18px; --dash-len: 32px; --dash-long: 48px; }
}

/* ---- Type: Montserrat 400 only. Nothing is ever drawn bold or slanted. ---- */
html { font-synthesis: none; }
body { font: 400 var(--fs-body)/var(--lh-body) var(--font); letter-spacing: 0; }
h1, h2, h3, h4, b, strong, em, i, small, summary, button, .btn, .nav a, .kicker, .pill, .tags li,
.n, .herostats .n, .stats .n, .casebody aside .stats .n, .spotlist button .n, .also .n,
.afterhours summary, .afterhours summary small, .steps li::before {
  font-family: var(--font); font-weight: 400; font-style: normal; letter-spacing: 0;
}

/* ---- Hero: two-line H1, long dash, label-style subtitle, lede, stats on one hairline ---- */
.heroin { max-width: 1180px; text-align: left; padding: 56px 16px 48px; }
.hero h1 { font-size: var(--fs-display); line-height: var(--lh-display); text-transform: uppercase; color: var(--ink); }
.hero h1 span { display: block; }
.hero h1 .l2 { color: var(--accent); }          /* #9a4a2a on #f6f1e7, 5.51:1 */
.hero h1::after {
  content: ""; display: block; width: var(--dash-long); height: var(--dash-w); margin-top: 32px; background: var(--rule);
}
.heroin .subtitle {
  margin: 28px 0 8px; font-size: var(--fs-label); line-height: var(--lh-label); text-transform: uppercase; color: var(--ink);
}
.lede { font-size: var(--fs-body); line-height: var(--lh-body); max-width: 600px; margin: 0 0 40px; }
.heroin .lede { margin-left: 0; margin-right: 0; }
.herostats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; justify-content: start;
  max-width: none; border-top: 1px solid var(--rule);
}
.herostats > div { padding: 16px 28px 0 0; }
.herostats .n, .stats .n { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--ink); }
.herostats span, .stats span { font-size: var(--fs-small); line-height: var(--lh-small); }

/* ---- Nav: solid, no blur, one hairline under it ---- */
.nav { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; }
.navin { position: relative; }
.navin::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px; background: var(--rule); }
.nav a { font-size: 15px; color: var(--sub); }
.nav a:first-child { padding-left: 0; }
.nav a.navcta { padding-right: 0; }
.nav a:hover, .nav a.navcta { color: var(--ink); }

/* ---- Sections: left aligned, uppercase label, short dash ---- */
section { padding-top: 96px; }
.sechead { text-align: left; margin: 0 0 48px; max-width: 52rem; }
.sechead h2, .services h2, .contact h2 {
  font-size: var(--fs-label); line-height: var(--lh-label); text-transform: uppercase; font-style: normal; margin: 0;
}
.services h2 { margin-bottom: 24px; }   /* 24px from the dash to the first service row */
.sechead h2::after, .services h2::after, .contact h2::after, .casehead h3::after {
  content: ""; display: block; width: var(--dash-len); height: var(--dash-w); margin-top: 16px; background: var(--rule);
}
.blurb { max-width: 600px; }
.sechead .blurb { margin-top: 24px; }

/* Card, slide and story titles: label size, uppercase */
.casehead h3, .slidetext h3, .sbeat h3, .ah h3, .svc h3 {
  font-size: var(--fs-label); line-height: var(--lh-label); text-transform: uppercase;
}
.sbeat h3, .ah h3 { margin: 4px 0 12px; }

/* The tracked-caps kicker becomes a quiet meta line in sentence case */
.kicker { font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: 0; text-transform: none; color: var(--sub); }

.slidetext p, .sbeat p { color: var(--sub); }

/* Badges and chips become plain meta text */
.pill { display: inline; border: 0; border-radius: 0; padding: 0; background: none; color: var(--sub); font-size: var(--fs-small); }
.casebody aside > .pill { display: block; }
.tags { gap: 0; }
.tags li { background: none; border-radius: 0; padding: 0; font-size: var(--fs-small); color: var(--sub); }
.tags li:not(:last-child)::after { content: "\00b7"; margin: 0 8px; }

/* Stats: label size, ink (the accent stays on the H1), hairlines between */
.casebody aside .stats { gap: 0; margin: 20px 0; }
.casebody aside .stats .n { color: var(--ink); }
.casebody aside .stats { border-bottom: 1px solid var(--rule); }   /* one closing rule, stacked or in a row */
.casebody aside .stats > div { border-top: 1px solid var(--rule); padding: 12px 0; }

/* ---- Photos and screens: square, no shadow, no overlay, no filter ---- */
.stage { border-radius: 0; }
.stage.has-photo::before { filter: none; transform: none; inset: 0; }
.stage.has-photo::after { display: none; }
.stage.brand { background: #17403A; }
.phone, .wide, .flat, .svc-reel video, .rt-web { box-shadow: none; }
.wide, .flat, .rt-web, .gallery .clip, .rt-video, .rt-video video, .rt-posts img, .svc-reel video, .lightbox img { border-radius: 0; }
.gallery .flat { border-color: var(--line); }
.flat figcaption, .clip figcaption, .rt-web figcaption, .rt-posts p, .svc-reel p { font-size: var(--fs-small); }
.svc-reel p { text-align: left; }

/* ---- Services: hairline cells instead of rounded panels ---- */
.svc { gap: 0 28px; }
.svc li { background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: 24px 0 24px; }
.svc h3 { margin: 0 0 12px; }
.svc p { font-size: var(--fs-body); line-height: var(--lh-body); }
.svc .see { font-size: var(--fs-small); margin-top: 12px; }
.svc a { color: var(--ink); text-decoration: none; }
.svc a:hover, .svc a:focus-visible, footer a:hover {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}

/* ---- Carousel and spotlight variants (not on this page, kept square in case they return) ---- */
.slide { border-radius: 0; background: none; border: 0; border-top: 1px solid var(--rule); padding: 24px 0 0; }
.spotlist button, .spotlist button.on { border-radius: 0; background: none; border: 0; border-left: 1px solid transparent; }
.spotlist button.on { border-left-color: var(--rule); }
.cnav > button, .dots button, .dots button.on { border-radius: 0; }

/* ---- Process: hairline cells, "Step 1" in place of the 01 numerals ---- */
.steps { gap: 0 28px; }
.steps li { background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: 24px 0 8px; }
.steps li::before { content: "Step " counter(s); font-size: var(--fs-small); color: var(--sub); margin-bottom: 8px; }
.steps li .n { display: block; font-size: var(--fs-label); line-height: var(--lh-label); text-transform: uppercase; color: var(--ink); }
.steps p { font-size: var(--fs-body); line-height: var(--lh-body); margin-top: 12px; }

.also { text-align: left; margin: 40px 0 0; max-width: 600px; font-size: var(--fs-small); }
.also .n { color: var(--ink); }

/* ---- Buttons: square, ink fill (the heading color), no pill ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 28px;
  border: 1px solid var(--ink); border-radius: 0; background: var(--ink); color: var(--bg);
  font-size: var(--fs-body); line-height: 1.2; text-decoration: none;
}
.btn:hover { background: var(--sub); border-color: var(--sub); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btns { justify-content: flex-start; }
.todo { border: 0; border-radius: 0; padding: 0; color: var(--sub); font-size: var(--fs-small); }

/* ---- Closing section and footer ---- */
.contact { text-align: left; padding-top: 96px; }
.contact .blurb { margin: 24px 0 32px; }
.contact .email, .contact .socials { margin: 0; max-width: 600px; }
.contact .btns + .email { margin-top: 24px; }
.contact .email + .socials { margin-top: 12px; }
/* Read aloud by screen readers, never drawn: the "(opens in a new tab)" on the social links */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
footer { border-top: 0; padding-top: 0; color: var(--sub); font-size: var(--fs-small); }  /* #5d584c, 6.29:1 */
footer p { margin: 0; padding-top: 28px; border-top: 1px solid var(--rule); }
footer a { color: var(--ink); text-decoration: none; }

/* Links inside a sentence are underlined at rest: ink and the secondary text are only 2.38:1 apart,
   so color alone can't mark them (design-system.md section 7, WCAG 1.4.1). Nav links and buttons stay plain. */
footer a, .svc .see a, .contact .email a, .contact .socials a {
  color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}

@media (max-width: 860px) {
  .casebody { gap: 16px; }
}
/* Phones: the services section sits right under the nav, so its link steps aside and the other
   three fit on one line with no hidden sideways scroll. */
@media (max-width: 430px) {
  .nav a[href="#build"] { display: none; }
}
@media (max-width: 760px) {
  .navin { gap: 16px; justify-content: space-between; }
  .nav a, .nav a:first-child, .nav a.navcta { padding: 14px 0; font-size: var(--fs-small); margin-left: 0; }
  .heroin { padding-top: 40px; padding-bottom: 40px; }
  .hero h1::after { margin-top: 24px; }
  .heroin .subtitle { margin-top: 22px; }
  .lede { margin-bottom: 32px; }
  .herostats { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; border-top: 0; }
  .herostats > div { border-top: 1px solid var(--rule); padding: 12px 0 16px; }
  section { padding-top: 56px; }
  .sechead { margin-bottom: 32px; }
  .contact { padding-top: 56px; }
  .btn { width: 100%; }
}
/* The smallest phones (320px): the three links need a slightly smaller gap to stay on one line */
@media (max-width: 360px) {
  .navin { gap: 10px; }
}

/* =====================================================================================
   2026-10-05: ONE scroll story for every project, with parallax on the landscape photos.
   build.py writes one pinned stage per project (.pinned .pin) and one text beat per project
   (.sbeat, holding its own .mobilestage for narrow screens). The page script marks the active
   beat and its pin with .on and moves the .ph photo layers (transform only).
   ===================================================================================== */

/* ---- Hero photo: a real layer the script can move ---- */
.hero::before { content: none; }
.herophoto { position: relative; height: min(60vh, 620px); overflow: hidden; background: #2b2925; }
.herophoto .px { position: absolute; inset: 0; background: center / cover no-repeat; }
.js .herophoto .px { will-change: transform; }

/* ---- Stages: the photo is its own layer (.ph); the devices stand still in front of it ---- */
.stage.has-photo::before { content: none; }
.stage .ph { position: absolute; inset: 0; background: #222 center / cover no-repeat; }
.stage.dark { background: #2b2925; }
.reel, .post { flex: none; margin: 0; overflow: hidden; background: #000; }
.reel { aspect-ratio: 9 / 16; }
.post { aspect-ratio: 4 / 5; }
.reel video, .post img { width: 100%; height: 100%; object-fit: cover; }
.post img { cursor: zoom-in; }

/* ---- The story: pinned stage on the left, project text on the right ---- */
.scrolly { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; }
.pinned { top: 88px; height: min(calc(100vh - 120px), 680px); }
html:not(.js) .pin:first-child { opacity: 1; }
.pin .stage { height: 100%; min-height: 0; padding: 32px; container-type: size; }
.pin .ph { top: -80px; bottom: -80px; }           /* room for the parallax drift */
.pin.near .ph { will-change: transform; }

/* Devices are sized from the stage (container units), so they always fit the pinned height */
.pin .devices { height: 100%; flex-wrap: nowrap; gap: 24px; --h: min(100cqh, 580px); }
.pin .phone { width: auto; height: var(--h); }
.pin .lay-2 { --h: min(100cqh, 580px, calc((100cqw - 24px) * 1.08)); }      /* two phones side by side */
.pin .lay-pf { --h: min(100cqh, 580px, calc(100cqw * 1.1)); }               /* phone + image */
.pin .lay-pf .flat { flex: 1 1 0; min-width: 0; max-width: 300px; }
.pin .lay-w .wide { flex: 0 1 auto; width: 100%; }
.pin .lay-f .flat { flex: 0 1 auto; width: 100%; max-width: 520px; }
/* phone + desktop screen: the screen sits top left, the phone stands in front at the lower right */
.pin .lay-mix { display: grid; place-items: center; }
.pin .lay-mix > * { grid-area: 1 / 1; }
.pin .lay-mix .wide { width: 86%; justify-self: start; align-self: start; }
.pin .lay-mix .phone { --h: min(72cqh, 520px); justify-self: end; align-self: end; position: relative; z-index: 1; }
/* RTNNV: the captioned clip and one Safe at Home post */
.pin .lay-rt { --h: min(86cqh, 560px, calc((100cqw - 24px) * .98)); }
.pin .reel { width: auto; height: var(--h); }
.pin .post { width: auto; height: calc(var(--h) * .56); }

/* ---- Beats: kicker, title with the short dash, one line, status, up to three stats ---- */
.sbeat { min-height: min(52vh, 460px); padding: 32px 0; }
/* Room above the first and below the last beat, so each one can sit level with the middle of
   the pinned stage while the stage is still pinned.
   The pinned stage sits 88px down, a little below centre, so the bottom gets 32px more or the
   stage lets go and slides up while the last project is still the active one. */
.sbeats {
  padding: calc((min(100vh - 120px, 680px) - min(52vh, 460px)) / 2) 0
           calc((min(100vh - 120px, 680px) - min(52vh, 460px)) / 2 + 32px);
}
.sbeat h3 { margin: 4px 0 0; }
.sbeat h3::after { content: ""; display: block; width: var(--dash-len); height: var(--dash-w); margin-top: 16px; background: var(--rule); }
.sbeat .line { margin: 24px 0 0; max-width: 34rem; }
.sbeat .note { margin: 12px 0 0; max-width: 34rem; font-size: var(--fs-small); line-height: var(--lh-small); }
.sbeat .watch { margin: 12px 0 0; font-size: var(--fs-small); line-height: var(--lh-small); }
.sbeat .watch a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.sbeat .status { margin: 16px 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink); }
.sbeat .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; margin: 24px 0 0; max-width: 34rem; }
.sbeat .stats > div { border-top: 1px solid var(--rule); padding: 12px 0 0; }
.sbeat .stats .n { display: block; }
.mobilestage { display: none; }

/* On wide screens the beat that matches the stage is full strength; the others step back */
@media (min-width: 861px) {
  .js .sbeat { opacity: .4; transition: opacity .35s; }
  .js .sbeat.on { opacity: 1; }
}

/* ---- Lightbox: images, or the RTNNV reel with sound ---- */
.lightbox video { max-height: 92vh; max-width: 96vw; width: auto; background: #000; cursor: auto; }
.lightbox img[hidden], .lightbox video[hidden] { display: none; }

/* ---- Narrow screens: no pinning, no parallax; each project shows its stage above its text ---- */
@media (max-width: 860px) {
  .scrolly { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pinwrap { display: none; }
  .sbeats { padding: 0; }
  .sbeat { min-height: 0; padding: 0 0 56px; }
  .mobilestage { display: block; margin: 0 0 24px; }
  .mobilestage .stage { min-height: 0; padding: 24px 12px; }
  .mobilestage .lay-1 .phone { width: min(44vw, 200px); }
  /* phone + desktop screen: the same overlap as the pinned stage, sized for a phone */
  .mobilestage .lay-mix { display: block; position: relative; height: min(96vw, 420px); }
  .mobilestage .lay-mix .wide { position: absolute; left: 0; top: 0; width: 82%; }
  .mobilestage .lay-mix .phone { position: absolute; right: 0; bottom: 0; width: min(34vw, 150px); }
  .reel { width: min(44vw, 200px); }
  .post { width: min(36vw, 170px); }
  .sbeat .stats { gap: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pin, .js .sbeat { transition: none; }
}

/* 2026-10-06: phone frames match the phone screen (1080x2424) so clips are never stretched or trimmed;
   the status bar is covered by a black bar inside the clip instead of being cropped off. */
.phone { aspect-ratio: 1080 / 2424; background: #000; }
.phone img, .phone video { object-fit: contain; background: #000; }