/* aronritok.com — WHEATPASTE (utcai plakát) dizájn-rendszer. Anton + Archivo + Caveat Brush.
   Papír + tinta + fluoro pink (#FF3EA5) + safety orange (#FF5A1F). Ragasztószalag, matricák, karikák, szemcse.
   Áron korábbi, jóváhagyott iránya (2026-09-25); visszahozva a statikus generátorba. */
/* ==========================================================================
   Áron Ritók-Filip — founder site
   Direction A · WHEATPASTE: a street poster pasted on a Fort Myers wall.
   Anton (poster headlines), Archivo (text + UI), Caveat Brush (hand notes).
   Paper, ink, fluoro pink, safety orange. Tape, stickers, marker circles.
   Pink and orange are surfaces and marks only, never text on paper.
   Components read semantic tokens (--c-*); section scopes redefine them.
   ========================================================================== */

:root {
  color-scheme: light;
  --k-paper: #EFE9DC;
  --k-paper-lt: #F8F4EA;
  --k-card: #FFFDF7;
  --k-kraft: #D9C9A8;
  --k-ink: #121212;
  --k-ink-2: #2E2B26;
  --k-muted: #57524A;       /* 6.4:1 on paper */
  --k-pink: #FF3EA5;        /* ink on pink 5.8:1 */
  --k-orange: #FF5A1F;      /* ink on orange 6.0:1 */
  --k-rust: #B8340A;        /* orange as text on paper, 4.9:1 */
  --k-tape: rgba(255, 244, 200, .74);

  --c-bg: var(--k-paper);
  --c-card: var(--k-card);
  --c-ink: var(--k-ink);
  --c-ink-2: var(--k-ink-2);
  --c-muted: var(--k-muted);
  --c-rule: var(--k-ink);
  --c-line: rgba(18,18,18,.16);
  --c-mark: var(--k-pink);
  --c-mark-ink: var(--k-ink);
  --c-hand: var(--k-rust);
  --c-btn: var(--k-ink);
  --c-btn-ink: var(--k-paper);
  --c-btn-hover: var(--k-pink);
  --c-shadow: var(--k-ink);
  --c-error: #B3261E;

  --f-poster: "Anton", "Impact", "Arial Narrow Bold", sans-serif;
  --f-sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-hand: "Caveat Brush", "Marker Felt", "Comic Sans MS", cursive;

  --s-1: .5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem; --s-6: 3rem; --s-8: 4rem; --s-12: 6rem;
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --gutter: clamp(1rem, 2.6vw, 2.5rem);
  --container: 84rem;
  --measure: 64ch;
  --ease: cubic-bezier(.2,.7,.2,1);
  --header-h: 4.5rem;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width: 47.99rem) { :root { --header-h: 4rem; } }

/* Section scopes */
.bg-paper { --c-bg: var(--k-paper-lt); background: var(--c-bg); color: var(--c-ink); }
.bg-accent { --c-bg: var(--k-pink); --c-muted: #2E1A24; --c-ink-2: #1F1A1C; --c-line: rgba(18,18,18,.25); --c-mark: var(--k-paper); --c-hand: var(--k-ink); --c-btn-hover: var(--k-orange); background: var(--c-bg); color: var(--c-ink); }
.bg-mark { --c-bg: var(--k-orange); --c-muted: #2E1A12; --c-ink-2: #1F1813; --c-line: rgba(18,18,18,.25); --c-mark: var(--k-paper); --c-hand: var(--k-ink); background: var(--c-bg); color: var(--c-ink); }
.bg-ink, .on-dark {
  --c-bg: var(--k-ink); --c-card: #1D1C1A; --c-ink: var(--k-paper); --c-ink-2: #D9D2C4; --c-muted: #B0A898;
  --c-rule: var(--k-paper); --c-line: rgba(239,233,220,.2); --c-mark: var(--k-pink); --c-hand: var(--k-pink);
  --c-btn: var(--k-pink); --c-btn-ink: var(--k-ink); --c-btn-hover: var(--k-orange); --c-shadow: var(--k-pink);
  color-scheme: dark; background: var(--c-bg); color: var(--c-ink);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0; background: var(--c-bg); color: var(--c-ink); overflow-x: clip;
  font-family: var(--f-sans); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; background: var(--grain); opacity: .32; mix-blend-mode: multiply; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--k-pink); color: var(--k-ink); }
:focus-visible { outline: 3px solid var(--k-orange); outline-offset: 3px; }
.bg-mark :focus-visible { outline-color: var(--k-ink); }
.skip-link { position: absolute; left: var(--gutter); top: -4rem; z-index: 100; background: var(--k-pink); color: var(--k-ink); padding: .75rem 1rem; font-weight: 800; text-decoration: none; }
.skip-link:focus { top: .75rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); position: relative; }
.section--flush-top { padding-top: 0; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-6); }
.grid > * { grid-column: 1 / -1; }
@media (min-width: 64rem) {
  [class*="col-"] { grid-column: auto / span var(--span, 12); }
  .col-3 { --span: 3; } .col-4 { --span: 4; } .col-5 { --span: 5; } .col-6 { --span: 6; }
  .col-7 { --span: 7; } .col-8 { --span: 8; } .col-9 { --span: 9; } .col-10 { --span: 10; }
  .start-2 { grid-column-start: 2; } .start-3 { grid-column-start: 3; } .start-5 { grid-column-start: 5; }
  .start-6 { grid-column-start: 6; } .start-7 { grid-column-start: 7; } .start-8 { grid-column-start: 8; }
  .start-9 { grid-column-start: 9; }
}
.stack > * + * { margin-top: var(--s-3); }
.stack-sm > * + * { margin-top: var(--s-2); }
.stack-lg > * + * { margin-top: var(--s-4); }

/* ---------- Type ---------- */
.display, .h1, .h2, .statement { font-family: var(--f-poster); font-weight: 400; text-transform: uppercase; letter-spacing: 0; }
.display { font-size: clamp(3.25rem, 10vw, 10rem); line-height: .86; }
.h1 { font-size: clamp(2.75rem, 7vw, 6.5rem); line-height: .9; }
.h2 { font-size: clamp(2.5rem, 5.6vw, 5.25rem); line-height: .9; }
.h3 { font-family: var(--f-sans); font-size: clamp(1.125rem, 1.5vw, 1.375rem); font-weight: 800; font-stretch: 85%; line-height: 1.2; letter-spacing: -0.005em; text-transform: uppercase; }
.lead { font-size: clamp(1.125rem, 1.7vw, 1.5rem); font-weight: 500; line-height: 1.4; max-width: 34ch; color: var(--c-ink); }
.body { max-width: var(--measure); color: var(--c-ink-2); }
.body p + p { margin-top: 1.1em; }
.small, .caption { font-size: .9375rem; line-height: 1.55; color: var(--c-muted); }
.muted { color: var(--c-muted); }
.hl, mark { background: var(--c-mark); color: var(--c-mark-ink); padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.display .hl, .h1 .hl, .h2 .hl, .quote .hl, .statement .hl { padding: 0 .06em; background: linear-gradient(transparent 16%, var(--c-mark) 16% 92%, transparent 92%); }
.hand { font-family: var(--f-hand); font-weight: 400; color: var(--c-hand); font-size: clamp(1.375rem, 2.2vw, 2rem); line-height: 1.1; display: inline-block; transform: rotate(-3deg); }

/* Marker circle and scribble underline (inline SVG inside) */
.circled { position: relative; display: inline-block; }
.circled svg { position: absolute; left: -6%; top: -14%; width: 112%; height: 128%; overflow: visible; pointer-events: none; }
.circled path, .scribble path { fill: none; stroke: var(--k-orange); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.bg-mark .circled path, .bg-mark .scribble path { stroke: var(--k-ink); }
.scribble { position: relative; display: inline-block; }
.scribble svg { position: absolute; left: -2%; bottom: -.12em; width: 104%; height: .3em; overflow: visible; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .circled path, .scribble path { stroke-dasharray: 2400; animation: draw 1.4s .3s cubic-bezier(.6,0,.2,1) both; }
}
@keyframes draw { from { stroke-dashoffset: 2400; } to { stroke-dashoffset: 0; } }

/* Tape and stickers */
.tape { position: absolute; z-index: 3; width: clamp(6rem, 12vw, 11rem); height: 2rem; background: var(--k-tape); box-shadow: 0 1px 2px rgba(0,0,0,.08); transform: rotate(-8deg); pointer-events: none; }
.sticker {
  position: absolute; z-index: 4; width: clamp(7rem, 12vw, 10.5rem); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; text-align: center; padding: 1rem;
  background: var(--k-orange); color: var(--k-ink); transform: rotate(12deg); box-shadow: 4px 6px 0 var(--k-ink);
  font: 900 clamp(.85rem, 1.3vw, 1.125rem)/1.05 var(--f-sans); font-stretch: 75%; text-transform: uppercase;
}
.sticker--pink { background: var(--k-pink); transform: rotate(-9deg); }

/* Small labels */
.eyebrow, .block__num, .service-card__num, .case-card__meta, .work-item__cat, .insight-card__topic, .insight-card__meta,
.steps__time, .timeline__when, .stat__src, .breadcrumbs, .form-steps, .footer__col h2, .snapshot dt, .word-note, .process__num {
  font-family: var(--f-sans); font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4;
}
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; color: var(--c-ink); }
.eyebrow::before { content: ""; width: .65rem; height: .65rem; background: var(--k-orange); flex: none; }
.bg-mark .eyebrow::before { background: var(--k-ink); }
.label {
  display: inline-flex; align-items: center; gap: .55rem; padding: .4rem .75rem .4rem .4rem;
  background: var(--c-ink); color: var(--c-bg); transform: rotate(-2deg);
  font: 800 .8125rem/1 var(--f-sans); letter-spacing: .08em; text-transform: uppercase;
}
.label:not(:has(.label__num)) { padding-left: .75rem; }
.label__num { background: var(--k-pink); color: var(--k-ink); padding: .25rem .4rem; }
.bg-accent .label__num { background: var(--k-paper); }
.section-head { display: grid; gap: var(--s-3); max-width: 66rem; justify-items: start; }
.section-head .label { margin-bottom: var(--s-1); }
.section-head + * { margin-top: clamp(2.5rem, 5vw, 4.5rem); }

/* ---------- Links & buttons ---------- */
.link { color: var(--c-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--k-pink); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.bg-accent .link { text-decoration-color: var(--k-ink); }
.link:hover { background: var(--c-mark); text-decoration: none; }
.arrow-link {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
  font: 800 .9375rem/1.2 var(--f-sans); font-stretch: 90%; text-transform: uppercase; letter-spacing: .03em; color: var(--c-ink);
  text-decoration: underline; text-decoration-color: var(--k-pink); text-decoration-thickness: 3px; text-underline-offset: 5px;
}
.bg-accent .arrow-link, .bg-mark .arrow-link { text-decoration-color: var(--k-ink); }
.arrow-link span[aria-hidden] { display: inline-block; transition: transform 200ms var(--ease); }
.arrow-link:hover { background: var(--c-mark); color: var(--c-mark-ink); text-decoration: none; }
.arrow-link:hover span[aria-hidden] { transform: translateX(4px); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: 60px; padding: 0 1.75rem; border: 0; cursor: pointer;
  background: var(--c-btn); color: var(--c-btn-ink); transform: rotate(-1.5deg);
  font: 800 1.0625rem/1 var(--f-sans); font-stretch: 85%; text-transform: uppercase; letter-spacing: .02em; text-decoration: none; white-space: nowrap;
  transition: transform 180ms var(--ease), background-color 180ms, color 180ms, box-shadow 180ms;
}
.btn:hover { transform: rotate(0) scale(1.04); background: var(--c-btn-hover); color: var(--k-ink); box-shadow: 5px 5px 0 var(--c-shadow); }
.btn:active { transform: scale(.98); box-shadow: none; }
.btn--on-dark { --c-btn: var(--k-pink); --c-btn-ink: var(--k-ink); --c-shadow: var(--k-paper); }
.btn--ghost { --c-btn: transparent; --c-btn-ink: var(--c-ink); box-shadow: inset 0 0 0 3px var(--c-ink); }
.btn--sm { min-height: 44px; padding: 0 1rem; font-size: .875rem; transform: rotate(-1deg); }
.btn--block { width: 100%; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }

/* ---------- Fact-to-verify marks (prototype only) ---------- */
.tbd { background: rgba(255,90,31,.14); outline: 2px dashed var(--k-rust); outline-offset: -1px; padding: 0 .2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bg-accent .tbd, .bg-mark .tbd { background: rgba(255,255,255,.35); outline-color: var(--k-ink); }
.bg-ink .tbd { background: rgba(255,62,165,.16); outline-color: var(--k-pink); }
html.hide-tbd .tbd { background: none; outline: 0; padding: 0; }
.proto-bar {
  position: fixed; right: var(--gutter); bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px)); z-index: 95;
  display: flex; align-items: center; gap: .5rem; padding: .4rem .4rem .4rem .8rem; max-width: calc(100% - var(--gutter) * 2);
  background: var(--k-ink); color: var(--k-paper); font: 800 .6875rem/1 var(--f-sans); letter-spacing: .06em; text-transform: uppercase; transform: rotate(-1deg);
}
.proto-bar button { min-height: 32px; padding: 0 .7rem; background: var(--k-pink); color: var(--k-ink); border: 0; cursor: pointer; font: inherit; letter-spacing: inherit; }
.proto-bar__count { color: var(--k-pink); font-variant-numeric: tabular-nums; }
@media (max-width: 47.99rem) { .proto-bar .proto-bar__label { display: none; } }

/* ---------- Header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--k-paper); border-bottom: 3px solid var(--k-ink); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--header-h); }
.wordmark { display: inline-flex; align-items: baseline; gap: .7rem; text-decoration: none; color: inherit; line-height: 1; }
.wordmark__name { font-family: var(--f-poster); font-size: 1.625rem; text-transform: uppercase; letter-spacing: .005em; }
.wordmark__role { font: 400 1.25rem/1 var(--f-hand); color: var(--k-rust); transform: rotate(-3deg); display: inline-block; }
.nav { display: flex; align-items: center; gap: var(--s-3); }
.nav__list { display: flex; gap: .25rem; list-style: none; }
.nav__list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .75rem; font: 800 .875rem/1 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.nav__list a:hover { background: var(--k-pink); }
.nav__list a[aria-current="page"] { background: var(--k-ink); color: var(--k-paper); }
.local-time { font: 400 1.125rem/1 var(--f-hand); color: var(--k-ink-2); white-space: nowrap; }
.local-time b { font-weight: 400; color: var(--k-rust); }
.local-time i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--k-orange); margin-right: .45rem; }
.nav-toggle { display: none; min-height: 44px; min-width: 44px; padding: 0 1rem; background: var(--k-ink); color: var(--k-paper); border: 0; cursor: pointer; font: 800 .875rem/1 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; }
.header-call { display: none; }
@media (max-width: 79.99rem) { .local-time { display: none; } }
@media (max-width: 63.99rem) {
  .nav__list, .nav > .btn:not(.header-call) { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav .header-call { display: inline-flex; }
  .wordmark__role { display: none; }
  .wordmark__name { font-size: 1.375rem; }
}
@media (max-width: 23rem) { .nav .header-call { display: none; } }
.mobile-menu {
  position: fixed; inset: 0; z-index: 96; background: var(--k-pink); color: var(--k-ink);
  padding: calc(env(safe-area-inset-top, 0px) + .25rem) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 2rem);
  display: flex; flex-direction: column; gap: var(--s-4); overflow-y: auto;
  --c-btn: var(--k-ink); --c-btn-ink: var(--k-pink); --c-btn-hover: var(--k-orange);
}
.mobile-menu .wordmark__role { display: none; }
.mobile-menu__top { display: flex; justify-content: space-between; align-items: center; min-height: var(--header-h); }
.mobile-menu__list { list-style: none; display: grid; }
.mobile-menu__list a { display: flex; justify-content: space-between; align-items: center; padding: .6rem 0; border-bottom: 3px solid var(--k-ink); font: 400 clamp(2.5rem, 12vw, 3.5rem)/1 var(--f-poster); text-transform: uppercase; text-decoration: none; }
.mobile-menu__foot { margin-top: auto; display: grid; gap: var(--s-2); }
main .mobile-menu__list a { border-bottom-color: var(--c-ink); }

/* ---------- Ticker: pasted fluoro band ---------- */
.ticker { position: relative; z-index: 4; background: var(--k-pink); color: var(--k-ink); border-block: 3px solid var(--k-ink); overflow: hidden; transform: rotate(-1.4deg) scale(1.04); margin-block: -.5rem .5rem; }
.ticker__track { display: flex; width: max-content; }
.ticker__group { display: flex; align-items: center; list-style: none; white-space: nowrap; }
.ticker__group li { padding: .85rem 1.25rem; font: 400 clamp(1.5rem, 3.2vw, 2.75rem)/1 var(--f-poster); text-transform: uppercase; }
.ticker__group li:nth-child(even) { color: var(--k-paper); -webkit-text-stroke: 1.5px var(--k-ink); }
@media (prefers-reduced-motion: no-preference) { .ticker__track { animation: ticker 36s linear infinite; } .ticker:hover .ticker__track { animation-play-state: paused; } }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { color: var(--c-muted); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.breadcrumbs li + li::before { content: "→"; margin-right: .5rem; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { background: var(--c-mark); color: var(--k-ink); }
.breadcrumbs [aria-current] { color: var(--c-ink); }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3.5rem, 7vw, 6rem); }
.hero > .wrap { position: relative; }
.hero__grid { align-items: start; }
.hero__text { display: grid; gap: var(--s-4); align-content: start; }
.hero__area { display: flex; gap: .7rem; align-items: center; font: 800 .8125rem/1.4 var(--f-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-2); }
.hero__area::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--k-orange); border: 2px solid var(--k-ink); flex: none; }
.hero--home { padding-top: clamp(1.5rem, 4vw, 3rem); }
.hero--home .display { position: relative; z-index: 2; font-size: clamp(4rem, 15vw, 15rem); line-height: .84; margin-top: clamp(1rem, 3vw, 2rem); }
.hero--home .display .row { display: block; }
.hero--home .display .pink { color: var(--k-pink); -webkit-text-stroke: 0; text-shadow: 3px 3px 0 var(--k-ink); }
.hero--home .sticker { right: clamp(0rem, 4vw, 4rem); top: clamp(6rem, 17vw, 14rem); }
@media (max-width: 47.99rem) { .hero--home .sticker { display: none; } .wordmark__name { font-size: 1.2rem; } }
.hero--home .hero__grid { margin-top: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 64rem) { .hero--home .hero__media { margin-top: -12rem; } }
.hero--inner { padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }
.hero--inner .hero__text { gap: var(--s-3); }
.hero--inner .display { font-size: clamp(3rem, 8.4vw, 8.5rem); }
.hero--inner .breadcrumbs { margin-bottom: var(--s-1); }
@media (min-width: 64rem) { .hero--inner .hero__text:only-child { grid-column: 1 / span 11; } }
.hero--inner .hero__media .photo { transform: rotate(2deg); }
.hero--inner .sticker { display: none; right: var(--gutter); top: 0; }
@media (min-width: 64rem) { .hero--inner .sticker { display: grid; } }

/* ---------- Photos: halftone polaroids until the shoot is done ---------- */
.photo {
  --tone: var(--k-pink);
  position: relative; aspect-ratio: 4 / 5; max-width: 100%;
  background: var(--k-ink); transform: rotate(2.5deg); box-shadow: 8px 10px 0 rgba(0,0,0,.16);
}
.photo::before { content: ""; position: absolute; inset: .6rem .6rem 2.8rem; background: var(--tone); }
.photo::after {
  content: ""; position: absolute; inset: .6rem .6rem 2.8rem;
  background: radial-gradient(circle, var(--k-ink) 42%, transparent 46%) 0 0 / 8px 8px;
  -webkit-mask: radial-gradient(circle at 50% 38%, #000 0 18%, transparent 18.5%), radial-gradient(ellipse 42% 34% at 50% 100%, #000 0 99%, transparent 100%);
          mask: radial-gradient(circle at 50% 38%, #000 0 18%, transparent 18.5%), radial-gradient(ellipse 42% 34% at 50% 100%, #000 0 99%, transparent 100%);
}
.photo__note { position: absolute; left: .9rem; right: .9rem; bottom: .55rem; z-index: 1; display: flex; justify-content: space-between; gap: .5rem; font: 400 1.125rem/1.1 var(--f-hand); color: var(--k-paper); }
.photo__note span:empty { display: none; }
.photo--portrait { aspect-ratio: 4 / 5; }
.photo--land { aspect-ratio: 3 / 2; --tone: var(--k-orange); transform: rotate(-1.5deg); }
.photo--wide { aspect-ratio: 16 / 9; --tone: var(--k-kraft); transform: rotate(-.6deg); }
.photo--square { aspect-ratio: 1 / 1; }
.photo--dark { --tone: var(--k-orange); }
.author .photo { transform: none; box-shadow: none; border-radius: 50%; overflow: hidden; }
.author .photo::before, .author .photo::after { inset: 0; }
.photo-img { display: block; width: 100%; height: auto; object-fit: cover; border: .6rem solid var(--k-ink); border-bottom-width: 2.8rem; transform: rotate(2deg); box-shadow: 8px 10px 0 rgba(0,0,0,.16); filter: contrast(1.05) saturate(1.05); }
.photo-img--portrait { aspect-ratio: 4 / 5; } .photo-img--land { aspect-ratio: 3 / 2; transform: rotate(-1.5deg); } .photo-img--wide { aspect-ratio: 16 / 9; transform: rotate(-.6deg); } .photo-img--square { aspect-ratio: 1 / 1; }

/* ---------- Project shots: screenshots taped to the wall ---------- */
.shot {
  --tone: var(--k-pink); --tone-ink: var(--k-ink); --tilt: -1deg;
  position: relative; margin: 0; display: grid; max-width: 100%;
  background: var(--k-ink); border: 3px solid var(--k-ink); transform: rotate(var(--tilt));
  box-shadow: 8px 10px 0 rgba(0,0,0,.16); transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.shot::before { content: ""; position: absolute; z-index: 3; top: -1rem; left: 50%; width: 7.5rem; height: 1.9rem; transform: translateX(-50%) rotate(-4deg); background: var(--k-tape); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.shot.tone-1 { --tone: var(--k-pink); --tone-ink: var(--k-ink); --tilt: -1.2deg; }
.shot.tone-2 { --tone: var(--k-orange); --tone-ink: var(--k-ink); --tilt: 1deg; }
.shot.tone-3 { --tone: var(--k-ink); --tone-ink: var(--k-paper); --tilt: -.6deg; }
.shot.tone-4 { --tone: var(--k-card); --tone-ink: var(--k-ink); --tilt: .8deg; }
.shot.tone-5 { --tone: var(--k-kraft); --tone-ink: var(--k-ink); --tilt: -1.4deg; }
.shot.tone-6 { --tone: var(--k-ink); --tone-ink: var(--k-pink); --tilt: 1.3deg; }
.shot__bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; color: var(--k-paper); }
.shot__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--k-paper); flex: none; }
.shot__bar i:nth-child(1) { background: var(--k-pink); } .shot__bar i:nth-child(2) { background: var(--k-orange); }
.shot__bar span { margin-left: 8px; font: 800 .6875rem/1 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shot__view { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--tone); }
.shot--wide .shot__view { aspect-ratio: 16 / 9; } .shot--portrait .shot__view { aspect-ratio: 4 / 5; } .shot--square .shot__view { aspect-ratio: 1 / 1; }
.shot__view img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.shot__ph { position: absolute; inset: 0; padding: 6% 7%; display: grid; grid-template-rows: auto 1fr auto auto; gap: 5%; color: var(--tone-ink); }
.shot.tone-4 .shot__ph { background: radial-gradient(circle, rgba(255,62,165,.55) 38%, transparent 42%) 0 0 / 10px 10px; }
.shot__nav { display: flex; gap: 6%; justify-content: flex-end; }
.shot__nav i { width: 11%; height: 5px; background: currentColor; }
.shot__title { align-self: end; font: 400 clamp(1.75rem, 4.2vw, 4rem)/.88 var(--f-poster); text-transform: uppercase; max-width: 92%; }
.shot__lines { display: grid; gap: 6px; max-width: 48%; }
.shot__lines i { height: 5px; background: currentColor; opacity: .5; }
.shot__lines i:nth-child(2) { width: 80%; } .shot__lines i:nth-child(3) { width: 55%; }
.shot__btn { width: 24%; min-width: 48px; height: 16px; background: currentColor; }
.shot--square .shot__title, .shot--portrait .shot__title { font-size: clamp(1.625rem, 3vw, 2.75rem); }
a:hover .shot, .work-item:hover .shot, .case-card:hover .shot { transform: rotate(0) translateY(-4px); box-shadow: 10px 12px 0 var(--k-pink); }

/* ---------- Proof strip ---------- */
.proof { position: relative; padding-block: clamp(2.5rem, 5vw, 4rem); }
.proof__grid { display: grid; gap: var(--s-4) var(--gutter); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 64rem) { .proof__grid { grid-template-columns: 5fr 7fr; } }
.proof__names { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
.proof__names li { padding: .45rem .8rem; background: var(--k-card); border: 3px solid var(--k-ink); font: 400 1.25rem/1 var(--f-poster); text-transform: uppercase; white-space: nowrap; }
.proof__names li:nth-child(odd) { transform: rotate(-1.5deg); } .proof__names li:nth-child(even) { transform: rotate(1.2deg); }
.proof__metrics { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gutter); }
.proof__metrics .stat__num { font-size: clamp(2.5rem, 4.4vw, 4rem); }
@media (max-width: 47.99rem) { .proof__metrics { grid-template-columns: 1fr; gap: var(--s-3); } }

/* ---------- Stats ---------- */
.stat { display: grid; gap: .45rem; align-content: start; }
.stat__num { font: 400 clamp(3.25rem, 6.4vw, 6rem)/.9 var(--f-poster); font-variant-numeric: tabular-nums; }
.stat__ctx { font-size: .9375rem; line-height: 1.45; font-weight: 500; color: var(--c-ink-2); }
.stat__src { color: var(--c-muted); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--gutter); }
.stats .stat { padding: var(--s-4) var(--s-3); background: var(--k-card); color: var(--k-ink); border: 3px solid var(--k-ink); --c-ink-2: var(--k-ink-2); --c-muted: var(--k-muted); }
.stats .stat:nth-child(odd) { transform: rotate(-1deg); } .stats .stat:nth-child(even) { transform: rotate(.8deg); }

/* ---------- Pasted cards (symptoms, features, insights) ---------- */
.statement { font-size: clamp(2.5rem, 5.6vw, 5.25rem); line-height: .9; }
.blocks, .features { display: grid; grid-template-columns: 1fr; gap: calc(var(--gutter) * 1.2); }
@media (min-width: 48rem) { .blocks--2, .blocks--3, .features { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 64rem) { .blocks--3, .features--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.block {
  position: relative; display: grid; gap: .75rem; align-content: start; padding: 1.75rem 1.5rem 2rem;
  background: var(--k-card); color: var(--k-ink); border: 3px solid var(--k-ink);
  --c-ink: var(--k-ink); --c-ink-2: var(--k-ink-2); --c-muted: var(--k-muted);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.block:nth-child(3n+1) { transform: rotate(-1deg); }
.block:nth-child(3n+2) { transform: rotate(.8deg); background: var(--k-orange); }
.block:nth-child(3n) { transform: rotate(-.5deg); }
.block:hover { transform: rotate(0) translateY(-3px); box-shadow: 6px 6px 0 var(--k-ink); }
.block__num { position: absolute; top: -1rem; right: 1rem; background: var(--k-ink); color: var(--k-paper); padding: .4rem .6rem; font: 400 1.125rem/1 var(--f-poster); letter-spacing: .02em; }
.block .h3 { font: 400 clamp(1.625rem, 2.6vw, 2.25rem)/.95 var(--f-poster); text-transform: uppercase; padding-right: 2.5rem; }
.block p { color: var(--k-ink-2); font-size: 1rem; line-height: 1.5; max-width: 46ch; }

/* ---------- Process: marker line with stickers ---------- */
.process { list-style: none; display: grid; position: relative; }
.process__step { position: relative; display: grid; gap: .5rem; align-content: start; }
.process__dot { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; background: var(--c-bg); border: 4px solid var(--c-ink); }
.process__step:first-child .process__dot { background: var(--k-pink); }
.process__step:first-child .process__dot::after { content: "start here!"; position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-30%) rotate(-6deg); font: 400 1.5rem/1 var(--f-hand); color: var(--c-hand); white-space: nowrap; }
.process__num { color: var(--c-muted); }
.process__step .h3 { font: 400 clamp(1.75rem, 3vw, 2.75rem)/.95 var(--f-poster); text-transform: uppercase; }
.process__step p { color: var(--c-ink-2); font-size: 1rem; max-width: 30ch; }
@media (min-width: 64rem) {
  .process { grid-template-columns: repeat(var(--steps, 4), minmax(0,1fr)); column-gap: var(--gutter); padding-top: 2.75rem; }
  .process::before { content: ""; position: absolute; left: 12px; right: 0; top: calc(2.75rem + 13px); height: 4px; background: repeating-linear-gradient(90deg, var(--c-ink) 0 18px, transparent 18px 28px); }
  .process__step { padding-right: var(--s-3); }
  .process__dot { margin-bottom: var(--s-3); }
}
@media (max-width: 63.99rem) {
  .process { padding-top: .5rem; }
  .process::before { content: ""; position: absolute; left: 13px; top: 1rem; bottom: 1rem; width: 4px; background: repeating-linear-gradient(180deg, var(--c-ink) 0 18px, transparent 18px 28px); }
  .process__step { grid-template-columns: 30px 1fr; column-gap: var(--s-3); padding-bottom: var(--s-6); }
  .process__step:last-child { padding-bottom: 0; }
  .process__step > :not(.process__dot) { grid-column: 2; }
  .process__dot { grid-row: 1 / span 3; }
  .process__step:first-child .process__dot::after { left: calc(100% + 3.5rem); bottom: auto; top: -.2rem; transform: rotate(-6deg); }
}

/* ---------- Service cards ---------- */
.services { display: grid; gap: calc(var(--gutter) * 1.3); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .services { grid-template-columns: repeat(2, minmax(0,1fr)); } .service-card--wide { grid-column: 1 / -1; } }
.service-card {
  position: relative; display: grid; gap: var(--s-3); align-content: start; padding: clamp(1.75rem, 3.2vw, 3rem);
  background: var(--k-card); color: var(--k-ink); border: 3px solid var(--k-ink);
  --c-ink: var(--k-ink); --c-ink-2: var(--k-ink-2); --c-muted: var(--k-muted); --c-mark: var(--k-pink);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.service-card::before { content: ""; position: absolute; top: -1rem; left: 2rem; width: 7rem; height: 1.9rem; background: var(--k-tape); transform: rotate(-5deg); }
.service-card:nth-child(2) { transform: rotate(-.8deg); } .service-card:nth-child(3) { transform: rotate(.8deg); background: var(--k-pink); }
.service-card:hover { transform: rotate(0) translateY(-3px); box-shadow: 8px 8px 0 var(--k-ink); }
.service-card--wide { background: var(--k-ink); color: var(--k-paper); --c-ink: var(--k-paper); --c-ink-2: #D9D2C4; --c-muted: #B0A898; transform: rotate(-.4deg); }
.service-card--wide:hover { box-shadow: 8px 8px 0 var(--k-pink); }
.service-card__num { display: inline-block; justify-self: start; background: var(--k-orange); color: var(--k-ink); padding: .35rem .6rem; font: 400 1.125rem/1 var(--f-poster); letter-spacing: .02em; }
.service-card__title { font: 400 clamp(2.25rem, 4.2vw, 3.75rem)/.9 var(--f-poster); text-transform: uppercase; }
.service-card__pos { color: var(--c-ink-2); max-width: 42ch; font-size: 1.125rem; font-weight: 500; }
.service-card ul { list-style: none; display: grid; gap: .55rem; padding-top: var(--s-2); border-top: 3px solid currentColor; }
.service-card li { display: flex; gap: .7rem; align-items: baseline; font-size: 1rem; font-weight: 500; color: var(--c-ink-2); }
.service-card li::before { content: "✓"; flex: none; display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; font-size: .75rem; font-weight: 900; background: var(--k-ink); color: var(--k-pink); transform: translateY(2px); }
.service-card--wide li::before { background: var(--k-pink); color: var(--k-ink); }
.service-card .arrow-link::after { content: ""; position: absolute; inset: 0; }
@media (min-width: 64rem) {
  .service-card--wide { grid-template-columns: 5fr 5fr 2fr; column-gap: var(--s-6); align-items: start; }
  .service-card--wide .service-card__head { display: grid; gap: var(--s-3); }
  .service-card--wide .arrow-link { justify-self: end; align-self: end; }
}

/* ---------- Work wall ---------- */
.work { display: grid; gap: calc(var(--s-6) + .5rem) calc(var(--gutter) * 1.2); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .work { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 64rem) {
  .work { grid-template-columns: repeat(12, minmax(0,1fr)); }
  .work-item { grid-column: span 4; }
  .work-item--lg { grid-column: span 7; }
  .work-item--md { grid-column: span 5; }
  .work-item--offset { margin-top: var(--s-12); }
}
.work-item { position: relative; display: grid; gap: 1.1rem; align-content: start; }
.work-item__meta { display: flex; justify-content: space-between; gap: var(--s-2); align-items: baseline; }
.work-item__name { font: 400 clamp(1.5rem, 2.2vw, 2rem)/1 var(--f-poster); text-transform: uppercase; }
.work-item__cat { color: var(--c-muted); text-align: right; }
.work-item a { text-decoration: none; }
.work-item a::after { content: ""; position: absolute; inset: 0; }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(17rem, 1fr); gap: calc(var(--gutter) * 1.2); overflow-x: auto; padding: 1.75rem 1rem 2rem; margin: -1rem -1rem 0; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.strip > * { scroll-snap-align: start; }

/* ---------- Case study cards ---------- */
.cases { display: grid; gap: calc(var(--s-6) + .5rem) calc(var(--gutter) * 1.2); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .cases { grid-template-columns: repeat(2, minmax(0,1fr)); } .case-card--featured { grid-column: 1 / -1; } }
.case-card { position: relative; display: grid; gap: .9rem; align-content: start; }
.case-card__meta { color: var(--c-muted); }
.case-card__title { font: 400 clamp(1.75rem, 3vw, 2.75rem)/.95 var(--f-poster); text-transform: uppercase; }
.case-card .arrow-link::after { content: ""; position: absolute; inset: 0; }
@media (min-width: 64rem) {
  .case-card--featured { grid-template-columns: 7fr 5fr; column-gap: calc(var(--gutter) * 2.5); align-items: center; }
  .case-card--featured .photo, .case-card--featured .shot { grid-row: 1 / span 5; }
  .case-card--featured .case-card__title { font-size: clamp(2.5rem, 4.4vw, 4.5rem); }
}
@media (max-width: 47.99rem) {
  .cases--scroll { grid-auto-flow: column; grid-auto-columns: 86%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding: 1.5rem 1rem 1.75rem; margin: -1rem -1rem 0; }
  .cases--scroll > * { scroll-snap-align: start; }
  .cases--scroll .case-card--featured { grid-column: auto; }
}

/* ---------- Founder ---------- */
.founder { align-items: center; }
.founder .label { margin-bottom: .75rem; }
.quote { margin: 0; font: 400 clamp(2.5rem, 5.6vw, 5.25rem)/.95 var(--f-poster); text-transform: uppercase; }
.quote::before { content: "“"; color: var(--k-pink); }
.quote::after { content: "”"; color: var(--k-pink); }

/* ---------- Fit ---------- */
.fit { display: grid; gap: calc(var(--gutter) * 1.3); }
@media (min-width: 48rem) { .fit { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.fit__col { display: grid; gap: var(--s-2); align-content: start; padding: clamp(1.5rem, 3vw, 2.5rem); border: 3px solid var(--k-ink); background: var(--k-card); color: var(--k-ink); --c-ink-2: var(--k-ink-2); --c-line: rgba(18,18,18,.16); transform: rotate(.6deg); }
.fit--yes.fit__col { background: var(--k-pink); transform: rotate(-.8deg); --c-line: rgba(18,18,18,.25); }
.fit__col h3 { font: 400 clamp(1.75rem, 3vw, 2.5rem)/.95 var(--f-poster); text-transform: uppercase; margin-bottom: var(--s-1); }
.fit ul { list-style: none; display: grid; }
.fit li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .8rem; align-items: start; padding: .8rem 0; border-top: 2px solid var(--c-line); color: var(--c-ink-2); font-weight: 500; }
.fit li::before { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; font-size: .8125rem; font-weight: 900; margin-top: .05rem; }
.fit--yes li::before { content: "✓"; background: var(--k-ink); color: var(--k-pink); }
.fit--no li::before { content: "✕"; background: var(--k-orange); color: var(--k-ink); }
ul.fit { display: block; }
ul.fit li:first-child { border-top: 0; }

/* ---------- Steps ---------- */
.steps { list-style: none; display: grid; gap: 0; border-top: 3px solid var(--c-rule); }
.steps li { display: grid; gap: .5rem var(--gutter); padding: clamp(1.25rem, 2.6vw, 2rem) 0; border-bottom: 3px solid var(--c-rule); transition: background-color 150ms; }
.steps li:hover { background: var(--c-mark); color: var(--k-ink); --c-ink-2: var(--k-ink-2); }
.steps__num { font: 400 clamp(4rem, 9vw, 8rem)/.8 var(--f-poster); color: transparent; -webkit-text-stroke: 2px var(--c-ink); font-variant-numeric: tabular-nums; }
.steps li:hover .steps__num { -webkit-text-stroke-color: var(--k-ink); color: var(--k-ink); }
.steps__time { display: inline-block; margin-top: .5rem; padding: .3rem .5rem; background: var(--k-ink); color: var(--k-paper); transform: rotate(-2deg); }
.steps p { color: var(--c-ink-2); max-width: 54ch; font-weight: 500; }
.steps .h3 { font: 400 clamp(1.75rem, 3vw, 2.75rem)/.95 var(--f-poster); text-transform: uppercase; }
@media (min-width: 48rem) { .steps li { grid-template-columns: 2fr 4fr 6fr; align-items: center; padding-inline: var(--s-2); } }

/* ---------- CTA bands ---------- */
.cta-band { display: grid; gap: var(--s-4); align-items: center; }
@media (min-width: 64rem) { .cta-band { grid-template-columns: 8fr 4fr; } .cta-band__action { justify-self: end; } }
.cta-band p { max-width: 52ch; color: var(--c-ink-2); font-size: 1.125rem; font-weight: 500; }
.final-cta { display: grid; gap: var(--s-4); max-width: 80rem; }
.final-cta .h2 { font-size: clamp(3rem, 9vw, 9rem); line-height: .86; }
.final-cta__alt { font: 400 1.5rem/1.2 var(--f-hand); color: var(--c-hand); transform: rotate(-2deg); display: inline-block; }
.final-cta__alt a { color: inherit; }

/* ---------- Insight cards ---------- */
.insights { display: grid; grid-template-columns: 1fr; gap: calc(var(--gutter) * 1.2); }
@media (min-width: 48rem) { .insights { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.insight-card {
  position: relative; display: grid; gap: .8rem; align-content: start; min-height: 15rem; padding: 1.75rem 1.5rem;
  background: var(--k-card); color: var(--k-ink); border: 3px solid var(--k-ink); --c-ink-2: var(--k-ink-2); --c-muted: var(--k-muted);
  transition: transform 200ms var(--ease), background-color 150ms, box-shadow 200ms;
}
.insight-card:nth-child(3n+1) { transform: rotate(-.8deg); } .insight-card:nth-child(3n+2) { transform: rotate(.6deg); } .insight-card:nth-child(3n) { transform: rotate(-.4deg); }
.insight-card:not(.insight-card--draft):hover { transform: rotate(0) translateY(-3px); background: var(--k-pink); box-shadow: 6px 6px 0 var(--k-ink); }
.insight-card__topic { justify-self: start; background: var(--k-ink); color: var(--k-paper); padding: .3rem .5rem; }
.insight-card__title { font: 400 clamp(1.625rem, 2.4vw, 2.25rem)/.95 var(--f-poster); text-transform: uppercase; }
.insight-card__title a { text-decoration: none; }
.insight-card__title a::after { content: ""; position: absolute; inset: 0; }
.insight-card p { color: var(--k-ink-2); font-size: .9375rem; font-weight: 500; }
.insight-card__meta { color: var(--k-muted); margin-top: auto; }
.insight-card--draft { background: transparent; border-style: dashed; color: var(--c-ink); }
.insight-card--draft .insight-card__title { opacity: .6; }
.insight-card--draft .insight-card__meta { color: var(--c-muted); }
.insight-card--draft .insight-card__meta::before { content: "✎ "; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: .75rem; }
.faq details { background: var(--k-card); color: var(--k-ink); border: 3px solid var(--k-ink); }
.faq details[open] { box-shadow: 6px 6px 0 var(--k-pink); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 44px; padding: 1.1rem 1.25rem; cursor: pointer; list-style: none; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); font-weight: 800; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; background: var(--k-ink); color: var(--k-paper); font: 400 1.5rem/1 var(--f-poster); transition: transform 250ms var(--ease), background-color 150ms; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--k-pink); color: var(--k-ink); }
.faq__a { padding: 0 1.25rem 1.35rem; max-width: 66ch; color: var(--k-ink-2); font-weight: 500; }

/* ---------- Timeline ---------- */
.timeline { list-style: none; display: grid; border-top: 3px solid var(--c-rule); }
.timeline li { display: grid; grid-template-columns: 9rem 16rem 1fr; gap: var(--gutter); padding: 1.25rem 0; border-bottom: 3px solid var(--c-rule); align-items: center; }
.timeline__when { justify-self: start; background: var(--k-ink); color: var(--k-paper); padding: .3rem .5rem; transform: rotate(-2deg); }
.timeline strong { font: 400 1.75rem/1 var(--f-poster); text-transform: uppercase; }
.timeline p { color: var(--c-ink-2); font-weight: 500; }
@media (max-width: 47.99rem) { .timeline li { grid-template-columns: 1fr; gap: .4rem; } }

/* ---------- Honest note ---------- */
.honest { position: relative; display: grid; gap: var(--s-3); justify-items: start; padding: clamp(1.75rem, 4.5vw, 4rem); background: var(--k-orange); color: var(--k-ink); border: 3px solid var(--k-ink); box-shadow: 10px 10px 0 var(--k-ink); transform: rotate(-1deg); --c-ink: var(--k-ink); --c-ink-2: #1F1813; --c-bg: var(--k-orange); }
.honest::before { content: ""; position: absolute; top: -1rem; right: 3rem; width: 8rem; height: 2rem; background: var(--k-tape); transform: rotate(6deg); }

/* ---------- Principles ---------- */
.principles { list-style: none; display: grid; counter-reset: pr; border-top: 3px solid var(--c-rule); }
.principles li { display: grid; gap: .5rem var(--gutter); padding: clamp(1.5rem, 3vw, 2.25rem) 0; border-bottom: 3px solid var(--c-rule); counter-increment: pr; }
.principles h3 { font: 400 clamp(2rem, 3.6vw, 3.25rem)/.92 var(--f-poster); text-transform: uppercase; }
.principles h3::before { content: counter(pr, decimal-leading-zero) " "; color: transparent; -webkit-text-stroke: 1.5px var(--c-ink); }
.principles p { color: var(--c-ink-2); max-width: 52ch; font-size: 1.125rem; font-weight: 500; }
@media (min-width: 48rem) { .principles li { grid-template-columns: 6fr 6fr; align-items: center; } }

/* ---------- Case study page ---------- */
.snapshot { display: grid; align-content: start; padding: var(--s-3); background: var(--k-card); color: var(--k-ink); border: 3px solid var(--k-ink); transform: rotate(-.8deg); --c-muted: var(--k-muted); }
.snapshot dl { margin: 0; display: grid; }
.snapshot dl > div { display: grid; gap: .15rem; padding: .75rem 0; border-bottom: 2px solid rgba(18,18,18,.12); }
.snapshot dl > div:last-child { border-bottom: 0; }
.snapshot dt { color: var(--c-muted); }
.snapshot dd { margin: 0; font-size: 1rem; font-weight: 700; }
@media (min-width: 64rem) { .snapshot { position: sticky; top: calc(var(--header-h) + 2rem); } }
.story h2 { font: 400 clamp(2rem, 3.8vw, 3.25rem)/.92 var(--f-poster); text-transform: uppercase; margin: var(--s-8) 0 var(--s-3); }
.story h2:first-child { margin-top: 0; }
.story p { color: var(--c-ink-2); max-width: var(--measure); }
.story p + p { margin-top: 1.1em; }
.story .word-note { display: block; margin-top: .5rem; color: var(--c-muted); }
.testimonial { display: grid; gap: var(--s-3); max-width: 64rem; margin: 0; }
.testimonial blockquote { margin: 0; font: 400 clamp(2rem, 4.4vw, 4rem)/.95 var(--f-poster); text-transform: uppercase; }
.testimonial figcaption { font: 400 1.5rem/1.1 var(--f-hand); color: var(--c-hand); }

/* ---------- Article ---------- */
.article-body { font-size: 1.125rem; line-height: 1.7; }
.article-body > * + * { margin-top: 1.25em; }
.article-body h2 { font: 400 clamp(2rem, 3.6vw, 3rem)/.92 var(--f-poster); text-transform: uppercase; margin-top: 1.8em; }
.article-body p, .article-body li { color: var(--c-ink-2); }
.article-body ul, .article-body ol { padding-left: 1.25rem; display: grid; gap: .5rem; }
.article-body strong { color: var(--c-ink); font-weight: 800; background: linear-gradient(transparent 55%, rgba(255,62,165,.55) 55%); }
.article-body a { color: var(--c-ink); font-weight: 700; text-decoration-color: var(--k-pink); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.article-body a:hover { background: var(--k-pink); }
.article-aside { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-4) var(--s-3); background: var(--k-card); border: 3px solid var(--k-ink); transform: rotate(1deg); }
@media (min-width: 64rem) { .article-aside { position: sticky; top: calc(var(--header-h) + 2rem); } }
.author { display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--s-2); align-items: center; }
.author p { font-size: .9375rem; }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--s-3); }
.field { display: grid; gap: .45rem; }
.field label, .field legend { font: 800 .8125rem/1.3 var(--f-sans); letter-spacing: .06em; text-transform: uppercase; padding: 0; }
.field .hint { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--c-muted); }
.input, .select { width: 100%; min-height: 56px; padding: 0 1rem; background: #FFFFFF; border: 3px solid var(--k-ink); border-radius: 0; color: var(--k-ink); font-size: 1.0625rem; font-weight: 500; transition: box-shadow 150ms; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 3rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 5.5l5 5 5-5' fill='none' stroke='%23121212' stroke-width='2.6' stroke-linecap='square'/%3E%3C/svg%3E");
  background-position: calc(100% - 1rem) 50%; background-size: 16px; background-repeat: no-repeat;
}
.input:focus, .select:focus { outline: 0; box-shadow: 6px 6px 0 var(--k-pink); }
.input::placeholder { color: #8A8378; }
.field.has-error .input, .field.has-error .select { border-color: var(--c-error); box-shadow: 6px 6px 0 var(--c-error); }
.field__error { font-size: .875rem; color: var(--c-error); font-weight: 700; }
.form-row { display: grid; gap: var(--s-3); }
@media (min-width: 48rem) { .form-row--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; color: var(--c-muted); }
.form-steps span { padding: .55rem .6rem; border: 2px dashed rgba(18,18,18,.35); text-align: center; }
.form-steps span.is-current { background: var(--k-ink); color: var(--k-pink); border: 2px solid var(--k-ink); transform: rotate(-1.5deg); }
@media (max-width: 47.99rem) { .form-steps { font-size: .625rem; letter-spacing: .04em; } }
.form-panel { position: relative; display: grid; gap: var(--s-4); padding: clamp(1.5rem, 3.5vw, 3rem); background: var(--k-card); color: var(--k-ink); border: 3px solid var(--k-ink); box-shadow: 12px 12px 0 var(--k-pink); --c-ink: var(--k-ink); --c-ink-2: var(--k-ink-2); --c-muted: var(--k-muted); --c-bg: var(--k-card); }
.form-panel::before { content: ""; position: absolute; top: -1rem; left: 2.5rem; width: 8rem; height: 2rem; background: var(--k-tape); transform: rotate(-4deg); }
.form-panel .h3 { font: 400 clamp(1.75rem, 3vw, 2.5rem)/.95 var(--f-poster); text-transform: uppercase; }
.form-note { font-size: .9375rem; color: var(--c-muted); font-weight: 500; }
.choice-group { border: 0; margin: 0; padding: 0; display: grid; gap: .5rem; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.chip span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 1.1rem; background: var(--k-card); color: var(--k-ink); border: 3px solid var(--k-ink); font: 800 .875rem/1 var(--f-sans); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background-color 120ms, transform 120ms; }
.chip:hover span { background: var(--k-pink); }
.chip input:checked + span { background: var(--k-ink); color: var(--k-pink); transform: rotate(-2deg); }
.chip input:focus-visible + span { outline: 3px solid var(--k-orange); outline-offset: 2px; }
.booking-facade { display: grid; gap: var(--s-3); place-items: start; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--k-pink); border: 3px solid var(--k-ink); transform: rotate(-.8deg); --c-ink-2: #1F1A1C; }
.booking-facade .h3 { font: 400 clamp(1.75rem, 3vw, 2.5rem)/.95 var(--f-poster); }
.side-panel { display: grid; gap: var(--s-3); align-content: start; }
.side-panel .photo { max-width: 19rem; }
.contact-lines { display: grid; gap: .25rem; font-size: 1.125rem; font-weight: 800; }
.contact-lines a { color: var(--c-ink); text-decoration: none; }

/* ---------- Scorecard ---------- */
.score-q { border: 3px solid var(--k-ink); margin: 0 0 1rem; padding: clamp(1.25rem, 2.6vw, 2rem); background: var(--k-card); color: var(--k-ink); display: grid; gap: var(--s-2); min-width: 0; }
.score-q:nth-child(odd) { transform: rotate(-.4deg); } .score-q:nth-child(even) { transform: rotate(.4deg); }
.score-q legend { float: left; width: 100%; padding: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.3; }
.score-q legend small { display: inline-block; margin-bottom: .6rem; padding: .25rem .45rem; background: var(--k-ink); color: var(--k-paper); font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.score-scale { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .5rem; }
.score-scale .chip span { width: 100%; justify-content: center; min-height: 52px; }
.score-progress { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); z-index: 5; background: var(--c-bg); padding: 1rem 0; display: grid; gap: .5rem; }
.score-progress__bar { height: 14px; border: 3px solid var(--k-ink); background: var(--k-card); }
.score-progress__bar i { display: block; height: 100%; width: 0; background: var(--k-pink); transition: width 300ms var(--ease); }
.score-progress__txt { font: 400 1.25rem/1 var(--f-hand); color: var(--c-hand); }
.score-results { display: grid; gap: var(--s-6); }
.score-bars { display: grid; gap: var(--s-3); }
.score-bar { display: grid; gap: .45rem; }
.score-bar__top { display: flex; justify-content: space-between; gap: 1rem; font: 800 .9375rem/1.2 var(--f-sans); text-transform: uppercase; letter-spacing: .04em; }
.score-bar__track { height: 22px; border: 3px solid var(--k-ink); background: var(--k-card); }
.score-bar__track i { display: block; height: 100%; background: var(--k-ink); }
.score-bar.is-weakest .score-bar__track i { background: var(--k-pink); }
.score-bar.is-weakest .score-bar__top span:first-child::after { content: " ← fix this first"; font: 400 1.25rem/1 var(--f-hand); color: var(--c-hand); text-transform: none; letter-spacing: 0; }
.score-total { font: 400 clamp(6rem, 14vw, 11rem)/.8 var(--f-poster); font-variant-numeric: tabular-nums; }
.score-total small { font-size: .3em; color: var(--c-muted); }

/* ---------- Legal ---------- */
.legal { max-width: 48rem; }
.legal h2 { font: 400 clamp(1.75rem, 3vw, 2.25rem)/.95 var(--f-poster); text-transform: uppercase; margin-top: 2em; }
.legal > * + * { margin-top: 1em; }
.legal p, .legal li { color: var(--c-ink-2); }
.legal ul { padding-left: 1.25rem; display: grid; gap: .4rem; }
.draft-note { padding: var(--s-2) var(--s-3); background: var(--k-orange); border: 3px solid var(--k-ink); font-weight: 700; transform: rotate(-.6deg); }

/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--k-ink); color: var(--k-paper); padding-top: clamp(4rem, 8vw, 7rem); overflow: hidden; --c-ink: var(--k-paper); --c-muted: #B0A898; }
.site-footer a { color: var(--k-paper); text-decoration: none; }
.site-footer a:hover { background: var(--k-pink); color: var(--k-ink); }
.footer__top { display: grid; gap: var(--s-6) var(--gutter); }
@media (min-width: 64rem) { .footer__top { grid-template-columns: 4fr 2fr 2fr 2fr 3fr; } }
.footer__brand { display: grid; gap: var(--s-3); align-content: start; }
.footer__brand .wordmark__role { color: var(--k-pink); }
.footer__brand p { color: #D9D2C4; max-width: 36ch; font-weight: 500; }
.footer__area { font: 400 1.5rem/1.15 var(--f-hand); color: var(--k-pink) !important; transform: rotate(-2deg); }
.footer__col { display: grid; gap: var(--s-2); align-content: start; font-weight: 600; }
.footer__col h2 { display: inline-block; justify-self: start; background: var(--k-pink); color: var(--k-ink); padding: .3rem .5rem; transform: rotate(-2deg); }
.footer__col ul { list-style: none; display: grid; gap: .2rem; }
.footer__col li, .footer__col address { color: #D9D2C4; font-style: normal; }
.footer__col a { display: inline-flex; min-height: 32px; align-items: center; }
.footer__giant { display: block; margin-top: clamp(3rem, 6vw, 5rem); font: 400 min(13.6vw, 13rem)/.82 var(--f-poster); text-transform: uppercase; white-space: nowrap; color: var(--k-paper); transform: rotate(-1.5deg); transform-origin: left bottom; }
.footer__giant span { color: var(--k-pink); }
.footer__bottom { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-4); padding-block: var(--s-3); margin-top: var(--s-3); border-top: 3px solid var(--k-paper); font: 800 .75rem/1.4 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: #B0A898; }
.footer__bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-3); }
.footer__bottom a { color: #B0A898; }

/* ---------- Utilities ---------- */
.mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); } .mt-12 { margin-top: var(--s-12); }
.rule { border: 0; border-top: 3px solid var(--c-rule); margin: 0; }
.nowrap { white-space: nowrap; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal-run { animation: paste 420ms var(--ease) both; }
}
@keyframes paste { from { opacity: 0; transform: translateY(16px) rotate(-2deg) scale(.98); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}


/* Mobil hero: tiszta, nem zsúfolt. A szalag ne essen a szövegre, a sorok ne érjenek össze/az eyebrow-ra. */
@media (max-width: 47.99rem) {
  .hero--home .tape { display: none; }
  .hero--home .eyebrow { line-height: 1.45; margin-bottom: 1.1rem; }
  .hero--home .display { margin-top: 1.4rem; font-size: clamp(3rem, 11.6vw, 15rem); line-height: 0.92; }
  .hero--home .circled svg { top: -6%; height: 118%; }
  .hero--home .hero__media { margin-top: 1.5rem; max-width: 20rem; }
}

/* ---------- SWFL helyi oldalak (/fort-myers/, /naples/, /cape-coral/) ----------
   Aláírás: utcatábla-oszlop valódi helyi utakkal + „Only three get the map” térkép-plakát. */
.hero--loc .display { font-size: clamp(3rem, 7.4vw, 7.25rem); }
.hero--loc .hero__grid { align-items: center; row-gap: var(--s-4); }
.signpost { position: relative; display: grid; justify-items: center; padding-block: 1rem 0; }
.signs { position: relative; list-style: none; display: grid; gap: .85rem; justify-items: center; padding: 0 0 3.5rem; }
.signs::before { content: ""; position: absolute; z-index: 0; left: 50%; top: -1rem; bottom: 0; width: 14px; margin-left: -7px; background: linear-gradient(90deg, #3a3833, #6b675e 45%, #2a2825); border: 2px solid var(--k-ink); }
.signs li {
  position: relative; z-index: 1; min-width: 17.5rem; padding: .85rem 2.2rem .85rem 1.2rem;
  background: var(--k-ink); color: var(--k-paper); font: 800 1.3125rem/1.1 var(--f-sans); font-stretch: 80%;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; text-align: left;
  clip-path: polygon(0 0, calc(100% - 1.15rem) 0, 100% 50%, calc(100% - 1.15rem) 100%, 0 100%);
  filter: drop-shadow(3px 4px 0 rgba(0,0,0,.18));
}
.signs li:nth-child(even) { padding: .85rem 1.2rem .85rem 2.2rem; text-align: right; clip-path: polygon(1.15rem 0, 100% 0, 100% 100%, 1.15rem 100%, 0 50%); }
.signs li:nth-child(1) { background: var(--k-pink); color: var(--k-ink); transform: rotate(-3deg) translateX(-.6rem); }
.signs li:nth-child(2) { transform: rotate(2deg) translateX(.8rem); }
.signs li:nth-child(3) { background: var(--k-orange); color: var(--k-ink); transform: rotate(-1.5deg) translateX(-.3rem); }
.signs li:nth-child(4) { transform: rotate(3deg) translateX(.5rem); }
.signs li:nth-child(5) { background: var(--k-card); color: var(--k-ink); border: 3px solid var(--k-ink); clip-path: none; text-align: center; padding-inline: 1.2rem; transform: rotate(-2deg); }
.signpost__note { justify-self: end; margin-top: .5rem; transform: rotate(-6deg); }
@media (max-width: 63.99rem) {
  .signpost { justify-items: start; padding: 0; }
  .signs { display: flex; flex-wrap: wrap; gap: .6rem .5rem; padding: 0; justify-items: start; }
  .signs::before { display: none; }
  .signs li { min-width: 0; font-size: .875rem; padding: .55rem 1.6rem .55rem .8rem; }
  .signs li:nth-child(even) { padding: .55rem .8rem .55rem 1.6rem; }
  .signs li:nth-child(5) { padding: .45rem .8rem; }
  .signs li:nth-child(1), .signs li:nth-child(2), .signs li:nth-child(3), .signs li:nth-child(4), .signs li:nth-child(5) { transform: rotate(var(--r, -1.5deg)); }
  .signs li:nth-child(even) { --r: 1.5deg; }
  .signpost__note { justify-self: start; margin-top: .9rem; }
}

/* Térkép-plakát */
.mappack-row { align-items: center; }
.mappack { position: relative; margin: 0; padding: 1rem 1rem 1.25rem; background: var(--k-card); color: var(--k-ink); border: 3px solid var(--k-ink); box-shadow: 10px 12px 0 var(--k-ink); transform: rotate(1.5deg); }
.mappack .tape { left: 50%; top: -1.1rem; margin-left: -4.5rem; transform: rotate(-4deg); }
.mappack__search { display: flex; align-items: center; gap: .7rem; padding: .75rem 1rem; border: 3px solid var(--k-ink); border-radius: 999px; font-weight: 700; font-size: 1.0625rem; }
.mappack__map {
  position: relative; height: clamp(8.5rem, 16vw, 11rem); margin-top: .9rem; border: 3px solid var(--k-ink); overflow: hidden;
  background:
    linear-gradient(118deg, transparent 46%, var(--k-paper-lt) 46% 51%, transparent 51%),
    linear-gradient(28deg, transparent 58%, var(--k-paper-lt) 58% 61%, transparent 61%),
    linear-gradient(90deg, transparent 31%, var(--k-paper-lt) 31% 33%, transparent 33%),
    linear-gradient(0deg, transparent 64%, var(--k-paper-lt) 64% 66%, transparent 66%),
    var(--k-kraft);
}
.mappack__map i { position: absolute; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--k-ink); color: var(--k-paper); font: 400 1rem/1 var(--f-poster); font-style: normal; border: 2px solid var(--k-paper); }
.mappack__map i span { transform: rotate(45deg); }
.mappack__map i:nth-child(1) { left: 22%; top: 24%; background: var(--k-pink); color: var(--k-ink); border-color: var(--k-ink); width: 2.6rem; height: 2.6rem; }
.mappack__map i:nth-child(2) { left: 58%; top: 46%; }
.mappack__map i:nth-child(3) { left: 76%; top: 14%; }
.mappack__list { list-style: none; display: grid; margin-top: .9rem; }
.mappack__list li { display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: .8rem; padding: .8rem .4rem; border-bottom: 2px solid var(--c-line); }
.mappack__list b { display: grid; place-items: center; width: 2rem; height: 2rem; background: var(--k-ink); color: var(--k-paper); font: 400 1.0625rem/1 var(--f-poster); }
.mappack__list .is-you { background: var(--k-pink); border-bottom-color: var(--k-ink); font: 400 clamp(1.4rem, 2.4vw, 1.9rem)/1 var(--f-poster); text-transform: uppercase; }
.mappack__line { display: block; height: .75rem; width: 70%; background: rgba(18,18,18,.14); }
.mappack__list li:nth-child(3) .mappack__line { width: 55%; }
.mappack__more { margin-top: .9rem; font: 700 .8125rem/1.3 var(--f-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--k-muted); }
.mappack__note { position: absolute; right: -1rem; top: 44%; transform: rotate(-8deg); background: var(--k-paper); padding: .2rem .5rem; }
@media (max-width: 47.99rem) { .mappack { transform: rotate(.8deg); box-shadow: 6px 8px 0 var(--k-ink); } .mappack__note { right: .25rem; top: 40%; font-size: 1.25rem; } }

/* „Kiknek” címkék, bizonyíték, további helyek */
.who { align-self: end; }
.who li { white-space: normal; font-size: clamp(1.125rem, 1.5vw, 1.375rem); }
.loc-proof .photo-img { object-position: 50% 18%; }
:not(.section-head) > .label + .h2 { margin-top: var(--s-2); }
@media (max-width: 47.99rem) {
  .hero--loc .display { font-size: clamp(2.9rem, 11vw, 4rem); line-height: .94; }
  .hero--loc .circled svg { top: -6%; height: 118%; }
}
.loc-proof .photo-img { border-color: var(--k-paper); box-shadow: 8px 10px 0 var(--k-pink); max-width: 22rem; }
.loc-proof__media { display: grid; justify-items: center; gap: 1rem; }
.loc-proof__media .hand { color: var(--k-pink); }
.places { list-style: none; display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; margin-top: var(--s-3); }
.places a { font: 400 clamp(2.25rem, 5vw, 4.25rem)/1 var(--f-poster); text-transform: uppercase; text-decoration: none; background: linear-gradient(transparent 62%, var(--k-pink) 62% 92%, transparent 92%) no-repeat 0 0 / 0 100%; transition: background-size 250ms var(--ease); }
.places a:hover, .places a:focus-visible { background-size: 100% 100%; }
.places a span { display: inline-block; transition: transform 200ms var(--ease); }
.places a:hover span { transform: translateX(6px); }

/* Munka-galéria (szolgáltatás- és helyi oldalak): 3 ferde, ragasztott képernyőkép, alatta név + kategória */
.shots { display: grid; grid-template-columns: 1fr; gap: calc(var(--s-6) + .25rem) calc(var(--gutter) * 1.2); margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 48rem) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .shots { grid-template-columns: repeat(3, minmax(0, 1fr)); } .shots .shot:nth-child(2) { margin-top: 2.5rem; } }
.shot__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .7rem .8rem .8rem; background: var(--k-card); color: var(--k-ink); border-top: 3px solid var(--k-ink); }
.shot__cap b { font: 400 clamp(1.25rem, 1.8vw, 1.6rem)/1 var(--f-poster); text-transform: uppercase; font-weight: 400; }
.shot__cap span { font: 800 .6875rem/1.3 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--k-muted); text-align: right; }
.shot:hover { transform: rotate(0) translateY(-4px); box-shadow: 10px 12px 0 rgba(0,0,0,.22); }
.on-dark .shot, .bg-ink .shot { box-shadow: 8px 10px 0 var(--k-pink); border-color: var(--k-paper); }
.contact-photo { display: grid; justify-items: center; gap: 1rem; }
.contact-photo .photo-img { max-width: 20rem; transform: rotate(-2.5deg); }
@media (max-width: 63.99rem) { .contact-photo { justify-items: start; } .contact-photo .photo-img { max-width: 16rem; } }
@media (max-width: 47.99rem) { .hero--inner .display { line-height: .94; } .hero--inner .circled svg { top: -6%; height: 118%; } }

/* Nyelvváltó (EN · HU · ES · DE) — fejléc és mobilmenü */
.lang-switch { list-style: none; display: flex; gap: .15rem; margin: 0; padding: 0; }
.lang-switch a { display: grid; place-items: center; min-width: 2rem; min-height: 2rem; padding: 0 .3rem; font: 800 .75rem/1 var(--f-sans); letter-spacing: .06em; text-decoration: none; color: var(--c-ink); }
.lang-switch a:hover { background: var(--k-pink); color: var(--k-ink); }
.lang-switch a[aria-current] { background: var(--k-ink); color: var(--k-paper); }
.site-header .lang-switch { margin-inline: .25rem .5rem; }
@media (max-width: 63.99rem) { .site-header .lang-switch { display: none; } }
.lang-switch--menu { margin-bottom: 1rem; }
.lang-switch--menu a { min-width: 2.75rem; min-height: 2.75rem; font-size: .9375rem; border: 2px solid var(--c-ink); }

/* Esettanulmány */
.case-hero__shot { align-self: center; }
.case-hero__shot .shot { transform: rotate(1.5deg); }
.case-situation { max-width: 44ch; }
.bg-ink .statement { color: var(--k-paper); max-width: 22ch; }
.case-stats .stat__num { font-size: clamp(2.5rem, 3.6vw, 3.75rem); white-space: nowrap; }

/* Szerző-doboz a cikkek végén (SEO-forgalomból is hívás) */
.author-box { display: grid; grid-template-columns: 6rem 1fr; gap: 1.25rem; align-items: start; margin-top: 3rem; padding: 1.5rem; background: var(--k-card); color: var(--k-ink); border: 3px solid var(--k-ink); box-shadow: 8px 10px 0 var(--k-pink); transform: rotate(-.5deg); }
.author-box img { width: 6rem; height: 6rem; object-fit: cover; object-position: 50% 30%; border: 3px solid var(--k-ink); filter: grayscale(1) contrast(1.05); }
.author-box p { font-size: 1rem; line-height: 1.5; margin: 0; }
.author-box__name { font: 400 1.75rem/1 var(--f-poster) !important; text-transform: uppercase; margin-bottom: .4rem !important; }
@media (max-width: 47.99rem) { .author-box { grid-template-columns: 4.5rem 1fr; padding: 1.1rem; } .author-box img { width: 4.5rem; height: 4.5rem; } }

/* Ékezetes nyelvek (HU / DE / ES): az Anton ékezetei (Í, Á, Ő, Ö, Ü, Ó) ne csússzanak a fölötte lévő sorba */
html:not([lang="en"]) .display { line-height: .98; }
html:not([lang="en"]) .h2, html:not([lang="en"]) .statement, html:not([lang="en"]) .quote, html:not([lang="en"]) .block .h3 { line-height: 1.02; }
html[lang="hu"] .display { line-height: 1.04; }
html:not([lang="en"]) .hero--home .display { font-size: clamp(3.25rem, 11.5vw, 12rem); }
@media (max-width: 47.99rem) { html:not([lang="en"]) .hero--home .display, html:not([lang="en"]) .hero--inner .display { line-height: 1.02; } }
@media (max-width: 47.99rem) { html[lang="hu"] .hero--home .display, html[lang="hu"] .hero--inner .display { line-height: 1.08; } }