/* Brandbook fonts: Light is the "CoolveticaLt-Regular" cut used in the book. */
@font-face { font-family: "Coolvetica"; src: url("fonts/coolvetica-extralight.woff2") format("woff2"); font-weight: 200; font-display: swap; }
@font-face { font-family: "Coolvetica"; src: url("fonts/CoolveticaLt-Regular.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Coolvetica"; src: url("fonts/coolvetica-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Coolvetica"; src: url("fonts/coolvetica-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); font-weight: 300; font-size: 18px; line-height: 1.5; color: var(--text); background: #fff; -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
b, strong { font-weight: 700; }
.caps { text-transform: uppercase; font-size: 13px; letter-spacing: .01em; }
.caps b { font-weight: 700; }

/* arrows (05.2 Arrow Set; the glyph itself is in chrome.css) */
a:hover > .arrow, button:hover > .arrow, .link:hover .arrow { transform: translateX(4px); }
.link { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 400; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* buttons — pill, as on factoryod.com */
.pill { display: inline-flex; align-items: center; gap: 12px; height: 50px; padding: 0 26px; border-radius: 999px; font-size: 15px; font-weight: 700; transition: background .2s, color .2s, border-color .2s; }
.pill--blue { background: var(--blue); color: #fff; }
.pill--blue:hover { background: var(--black); }
.pill--line { border: 1px solid currentColor; }
.pill--line:hover { background: #fff; color: var(--black); border-color: #fff; }

/* plain badge */
.badge { display: inline-block; padding: 5px 8px 4px; background: #fff; color: var(--black); text-transform: uppercase; font-size: 11px; font-weight: 700; line-height: 1.2; }
.badge--blue { background: var(--blue); color: var(--smoke); }

/* ---------- hero ---------- */
.hero { position: relative; height: 100vh; min-height: 640px; overflow: hidden; background: var(--black); color: #fff; }
.hero video, .hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.05) 38%, rgba(0,0,0,.7)); }
.hero-mark { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-line { position: absolute; left: 50%; top: 50%; width: min(1000px, 80vw); height: auto; transform: translate(-50%, -50%); }
.hero-cta { position: absolute; left: 50%; top: calc(50% + clamp(110px, 12vw, 171px)); transform: translateX(-50%); pointer-events: auto; height: auto; padding: 12px 18px; font-size: 14px; font-weight: 600; text-transform: uppercase; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Sector pages: a shorter hero with just the sector's name and one button, centred. */
.hero--sector { height: 58vh; min-height: 400px; }
.hero--sector .hero-mark { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(20px, 2.4vw, 32px); padding: var(--header) var(--m) 0; }
.hero--sector .hero-cta { position: static; transform: none; }
.hero-title { max-width: 100%; text-align: center; font-size: clamp(38px, 5.4vw, 84px); line-height: .98; font-weight: 300; letter-spacing: -.02em; }

/* ---------- marquee (the site's orange strip) ---------- */
.marquee { background: var(--orange); color: #fff; overflow: hidden; height: 60px; display: flex; align-items: center; }
.marquee-track { display: flex; width: max-content; animation: slide 40s linear infinite; }
.marquee span { white-space: nowrap; font-size: 16px; font-weight: 700; padding-right: 64px; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- sections + simple heads (like "Factory OD Paleti / Ürünlere Git" on factoryod.com) ---------- */
/* One gap everywhere: every section, the footer band and the footer start --s below what precedes them. */
section.sec { padding: var(--s) 0 0; }
.head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 0 var(--m) 24px; }
.head h2 { font-size: 24px; font-weight: 400; line-height: 1.2; color: #333; }
.head .note { font-size: 15px; color: var(--muted); }
/* Section headings sit a little under the header's wordmark, at every width: the wordmark's letters are
   set at .78 of the logo's height, and the headings at nine tenths of that. */
.head--lg h2 { font-size: calc(var(--logo) * .7); line-height: 1.05; color: var(--black); }

/* ---------- manifesto / intro ---------- */
.manifesto { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 40px; padding: 0 var(--m); }
.manifesto h2 { grid-column: 1 / span 9; font-size: clamp(30px, 3.4vw, 52px); line-height: 1.08; font-weight: 700; letter-spacing: -.01em; }
.manifesto .body { grid-column: 1 / span 7; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.45; }
.manifesto .body p + p { margin-top: 1em; }
.manifesto ul { grid-column: 9 / span 4; list-style: none; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.6; align-self: end; }
.manifesto ul li::before { content: "-"; }

/* ---------- full-bleed photo tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: #fff; }
.tiles--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile { position: relative; aspect-ratio: 3 / 4; overflow: hidden; color: #fff; background: var(--silver); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.tile .label { position: absolute; top: 20px; left: 20px; z-index: 2; font-size: 14px; font-weight: 400; }
.tile .over { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; background: linear-gradient(transparent 62%, rgba(0,0,0,.7)); opacity: 0; transition: opacity .35s; }
.tile .over .go { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,.4); padding-top: 10px; font-size: 11px; text-transform: uppercase; font-weight: 400; }
.tile:hover img { transform: scale(1.05); }
.tile:hover .over { opacity: 1; }

/* ---------- drops (merch items) ---------- */
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 var(--m) var(--g); }
.bar[hidden] { display: none; }
.chip { height: 36px; padding: 0 14px; border: 1px solid var(--black); text-transform: uppercase; font-size: 12px; font-weight: 700; transition: background .2s, color .2s; }
.chip[hidden] { display: none; }
.chip:hover, .chip.is-active { background: var(--black); color: #fff; }

/* Edge to edge with hairline seams, like the photo tiles above and below it. */
.grid { --gap: 1px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }

/* Merchant card: a portrait tile with the sector tag in its top-left corner, and the name and store link under it.
   The tile is the white tee mockup as it is (tee-plain.jpg), laid over the page's light grey with multiply so
   its white paper disappears, with the logo printed on the chest in its own colours. No tint, no hover effect. */
.mcard { display: block; container-type: inline-size; }
.tee { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--smoke); }
.tee .badge { position: absolute; top: 20px; left: 20px; z-index: 2; }
.tee-stage { position: absolute; left: 50%; top: 52%; width: 108%; aspect-ratio: 1; transform: translate(-50%, -50%); mix-blend-mode: multiply; isolation: isolate; }
.tee-photo { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The print sits on the chest, a little higher for a short wordmark than for a tall emblem, the way prints are
   set a fixed drop below the collar. Three things make it read as ink rather than a pasted image: multiply
   puts it into the cloth, so the fabric's shading shows through; it is not fully opaque, so black prints as
   a soft charcoal; and print-knit.png (the tee's real knit, from a close-up) thins it along the weave. */
.print { position: absolute; left: 50%; top: calc(34.5% + var(--w) / var(--ratio) / 4); width: var(--w); aspect-ratio: var(--ratio); transform: translate(-50%, -50%); opacity: .9; mix-blend-mode: multiply;
  -webkit-mask: url("img/print-knit.png?v=1") 0 0 / 56px 56px; mask: url("img/print-knit.png?v=1") 0 0 / 56px 56px; }
/* Name and store link always share one line: a name too long for it is cut with an ellipsis, and on a
   narrow card the link drops its words and keeps the arrow. */
.mcard .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 20px 26px; }
.mcard .meta .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; line-height: 1.2; font-weight: 700; }
.mcard .meta .go { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; text-transform: uppercase; white-space: nowrap; }
@container (max-width: 300px) {
  .mcard .meta { align-items: center; }
  .mcard .meta .name { font-size: 17px; }
  .mcard .meta .go span { display: none; }
}
@container (max-width: 180px) {
  .mcard .meta .name { font-size: 14px; }
}
.mcard .meta .arrow { width: 15px; height: 15px; }
/* The only hover cue on a card: the store link turns blue and its arrow nudges out. */
.mcard .meta .go { transition: color .2s; }
.mcard:hover .meta .go { color: var(--blue); }
.mcard:hover .meta .arrow { transform: translate(3px, -3px); }
.mcard.is-hidden { display: none; }

/* "next" tile — smoke panel with the logomark pattern (05.1) */
/* Brand square and mockup tiles (sector pages). The mockups are packshots on white, laid over the
   page's light grey with multiply so the paper disappears and only the product sits on the tile. */
.brand { position: relative; display: grid; place-items: center; aspect-ratio: 1; align-self: start; background: var(--blue); color: #fff; container-type: inline-size; }
/* The brand's logo, in white on the blue, at one optical size whether it runs wide or stands tall. */
.brand .mark { width: min(64cqw, calc(42cqw * var(--ratio))); filter: brightness(0) invert(1); }
.brand .mark--art { filter: none; }
.brand h3 { font-size: 17cqw; line-height: .95; font-weight: 700; letter-spacing: -.02em; text-align: center; }
/* A brand with a store of its own: the square is the link, and an arrow in its corner says so. */
.brand > .arrow { position: absolute; top: 20px; right: 20px; width: 18px; height: 18px; }
.brand:hover > .arrow { transform: translate(3px, -3px); }
.mock { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--smoke); }
.mock img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .35s; }
.mock:hover img { transform: scale(1.05); }
/* A product with two sides turns round under the pointer: the other side lies over the first and the two crossfade. */
.mock .flip { position: absolute; inset: 0; opacity: 0; }
.mock:hover .flip { opacity: 1; }
.mock:has(.flip):hover img:not(.flip) { opacity: 0; }

/* It fills whatever is left of the last row (--span, set by layoutNext), at the height of one tile.
   --u is 1% of a column's width, so the type stays tile-sized however wide the tile gets. */
.next { grid-column: span var(--span, 1); align-self: start; display: block; background: var(--smoke); overflow: hidden; container-type: inline-size; }
.next-in { --u: calc((100cqw - (var(--span, 1) - 1) * var(--gap)) / var(--span, 1) / 100); position: relative; height: calc(100 * var(--u)); display: flex; flex-direction: column; justify-content: space-between; }
/* Beside merchant cards the tile is as tall as their portrait tiles. */
.grid:has(.mcard) .next-in { height: calc(100 * var(--u) * 4 / 3); }
.next .caps { padding: calc(7 * var(--u)) calc(7 * var(--u)) 0; }
.next .row { display: flex; justify-content: space-between; align-items: end; gap: 12px; padding: 0 calc(7 * var(--u)) calc(7 * var(--u)); }
.next h3 { font-size: calc(11.5 * var(--u)); line-height: .98; font-weight: 300; }
.next h3 b { font-weight: 700; }
.next .row .arrow { width: calc(9 * var(--u)); height: calc(9 * var(--u)); }
.next.is-hidden { display: none; }

/* ---------- photo band (brandbook p.08) ---------- */
.band { position: relative; overflow: hidden; color: #fff; background: var(--black); }
.band img { width: 100%; height: clamp(420px, 56vw, 780px); object-fit: cover; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.05) 70%); }
.band .copy { position: absolute; z-index: 1; left: var(--m); right: var(--m); bottom: clamp(36px, 5vw, 80px); }
.band .word { font-size: clamp(56px, 8vw, 132px); line-height: .9; font-weight: 300; letter-spacing: -.02em; }
.band .word b { font-weight: 700; }
.band p { margin-top: 18px; font-size: clamp(18px, 1.6vw, 24px); max-width: 44ch; }

/* ---------- process ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--g); padding: 0 var(--m); }
.step { border-top: 1px solid var(--black); padding-top: 22px; }
.step .top { display: flex; justify-content: space-between; align-items: start; }
.step .n { font-size: clamp(56px, 6vw, 96px); line-height: .85; font-weight: 200; letter-spacing: -.03em; transition: color .3s; }
.step .icon { width: 34px; height: 34px; fill: currentColor; }
.step .icon path { fill: none; }
.step h3 { font-size: 28px; line-height: 1.1; font-weight: 700; margin: 26px 0 10px; }
.step p { font-size: 18px; max-width: 30ch; }
.step:hover .n { color: var(--orange); }
.strip { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1px; margin-top: clamp(48px, 6vw, 88px); background: #fff; }
.strip figure { position: relative; height: clamp(260px, 30vw, 440px); overflow: hidden; }
.strip img { width: 100%; height: 100%; object-fit: cover; }
.strip figcaption { position: absolute; left: 16px; bottom: 16px; }

/* ---------- quotes ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--g); padding: 0 var(--m); }
.quote { border-top: 1px solid var(--black); padding-top: 24px; display: flex; flex-direction: column; gap: 32px; }
.quote blockquote { font-size: clamp(22px, 2vw, 30px); line-height: 1.2; font-weight: 300; }
.quote cite { margin-top: auto; font-style: normal; }

/* ---------- sector intro ---------- */

/* ---------- brief ---------- */
.brief-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 28px; padding: 0 var(--m); align-items: start; }
.brief-grid .lead-col { grid-column: 1 / span 5; }
.brief-grid h2 { font-size: clamp(38px, 4.2vw, 68px); line-height: .92; font-weight: 300; letter-spacing: -.02em; }
.brief-grid h2 b { font-weight: 700; }
.brief-grid .lead { margin-top: 16px; max-width: 34ch; font-size: 18px; }
form.form { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 16px; }
.form label.caps { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opt { height: 30px; padding: 0 11px; border: 1px solid var(--black); text-transform: uppercase; font-size: 11px; font-weight: 700; transition: background .2s, color .2s, border-color .2s; }
.opt:hover { background: var(--smoke); }
.opt.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }
.field { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--black); padding: 7px 0; outline: none; font-size: 16px; font-weight: 300; }
.field::placeholder { color: var(--muted); }
.field:focus { border-color: var(--blue); }
textarea.field { resize: vertical; height: 54px; min-height: 40px; }
.two { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--g); align-items: end; }
/* Same voice as the hero button: uppercase, no arrow. */
.two .send { height: 45px; padding: 0 20px; font-size: 14px; font-weight: 600; text-transform: uppercase; }

/* ---------- built for ---------- */
.built { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 var(--m); }
.built .caps { margin-right: 14px; font-weight: 700; }
.built span:not(.caps) { font-size: clamp(22px, 2.2vw, 34px); font-weight: 300; padding: 4px 16px 2px; border: 1px solid var(--black); transition: background .2s, color .2s; }
.built span:not(.caps):hover { background: var(--black); color: #fff; }

/* ---------- showroom (copied from factoryod.com/pages/showroom) ---------- */
/* No hero here, so the header is solid from the start and the page begins below it. */
.showroom { padding: calc(var(--header) + 48px) var(--m) 0; }
.slideshow { position: relative; color: #fff; }
.slides { display: flex; aspect-ratio: 3 / 2; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--smoke); }
.slides::-webkit-scrollbar { display: none; }
.slides img { flex: none; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; scroll-snap-stop: always; }
/* Arrows show while the pointer is over the photo; previous is the same arrow, mirrored. */
.slide-arrow { position: absolute; top: 50%; width: 48px; height: 44px; margin-top: -22px; display: grid; place-items: center; font-size: 32px; opacity: 0; transition: opacity .25s; }
.slide-arrow--prev { left: 0; transform: scaleX(-1); }
.slide-arrow--next { right: 0; }
.slide-arrow .arrow { stroke-width: 1; }
.slideshow:hover .slide-arrow, .slide-arrow:focus-visible { opacity: 1; }
.slide-controls { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; display: flex; justify-content: center; align-items: center; pointer-events: none; }
.slide-controls button { pointer-events: auto; }
.slide-toggle { width: 20px; height: 44px; margin-right: 12px; }
.slide-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.slide-dot { width: 17.6px; height: 30px; display: grid; place-items: center; }
.slide-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.3); transition: background .25s; }
.slide-dot[aria-current="true"]::after { background: #fff; }
.showroom-caption { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; font-size: 14px; line-height: 1.7; color: rgba(0,0,0,.81); }
.showroom-caption address { font-style: normal; text-align: right; }

/* ---------- about (copied from factoryod.com/pages/hakkimizda) ---------- */
/* Tapes hang past the posters, so the page clips sideways instead of scrolling. */
.about { overflow-x: clip; }
/* Intro: a full-screen counter that the page script pins and runs 00 → 100 while the colours trade places. */
.about-intro { position: relative; z-index: 1; height: 100vh; height: 100svh; display: grid; place-items: center; background: var(--blue); color: var(--orange); }
.about-intro.is-swapped { background: var(--orange); color: var(--blue); }
.about .pin-spacer { background: var(--blue); }
.about-counter { font-size: 35vw; font-weight: 700; line-height: 1; letter-spacing: -2vw; font-variant-numeric: tabular-nums; user-select: none; }
/* The first poster starts in the orange block and hangs well below it; the white block makes room. */
.about-orange { position: relative; z-index: 2; height: 50vh; padding-top: 28px; display: flex; justify-content: center; align-items: flex-start; background: var(--orange); }
.about-orange .taped { transform: translateY(120px); }
.about-orange .poster { height: 100vh; object-fit: cover; object-position: top center; }
.about-body { padding-top: 670px; }
.taped { position: relative; width: 100%; max-width: 768px; }
.taped .poster { width: 100%; }
.tape { position: absolute; top: -12px; left: -96px; z-index: 1; width: 420px; max-width: none; pointer-events: none; }
.tape-flip { position: absolute; right: -96px; bottom: -12px; z-index: 1; transform: rotate(180deg); }
.tape-flip .tape { position: static; }
.about-block { padding: 224px var(--m) 0; }
.about-block + .about-strip + .about-block { padding: 0 var(--m) 224px; }
.about-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 60px; }
.about-head h2 { font-size: clamp(13px, 2.4vw, 24px); font-weight: 400; line-height: 1; white-space: nowrap; }
.about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; }
.about-text { max-width: 576px; font-size: 18px; line-height: 1.7; }
.about-text p + p { margin-top: 2.7em; }
.about-grid img { width: 450px; justify-self: center; }
.about-strip { padding: 140px 0; pointer-events: none; }
.about-strip img { width: 100%; max-width: none; will-change: transform; }
.about-poster { display: flex; justify-content: center; margin: 150px 0 0; }

/* ---------- contact ---------- */
/* No hero: a large heading, each way to reach us as a full-width row, and the showroom beside them. */
.contact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: clamp(32px, 4vw, 64px); align-items: start; padding: calc(var(--header) + var(--s)) var(--m) 0; }
.contact h1 { grid-column: 1 / span 7; font-size: clamp(48px, 7vw, 112px); line-height: .92; font-weight: 300; letter-spacing: -.02em; }
.contact h1 b { font-weight: 700; }
.contact-list { grid-column: 1 / span 7; }
.contact .tile { grid-column: 9 / span 4; grid-row: 1 / span 2; }
/* The showroom photo is bright at the top, so its label gets a shade to sit on. */
.contact .tile::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 30%; background: linear-gradient(rgba(0,0,0,.4), transparent); pointer-events: none; }
.contact-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; column-gap: var(--g); align-items: baseline; padding: 20px 0; border-top: 1px solid var(--black); transition: color .2s; }
.contact-row:last-child { border-bottom: 1px solid var(--black); }
.contact-row .caps { font-size: 12px; font-weight: 700; }
.contact-row .value { font-size: clamp(20px, 2.1vw, 32px); line-height: 1.2; }
.contact-row .arrow { align-self: center; width: 20px; height: 20px; }
.contact-row:hover { color: var(--blue); }
.contact-row:hover .arrow { transform: translate(3px, -3px); }

/* ---------- footer (copied from factoryod.com) ---------- */
.foot-band { position: relative; margin: var(--s) 0 20px; background: url("img/footer-band.png") center / 100% 100% no-repeat; color: #fff; padding: 22px var(--m) 26px; overflow: hidden; }
.foot-band p { font-size: 14px; font-weight: 300; }
.foot-band img { display: block; margin-top: 14px; width: min(420px, 36vw); height: auto; }
/* One compact row: copyright, policy links, social icons. */
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; padding: 22px var(--m) 26px; color: rgba(0,0,0,.81); font-size: 14px; font-weight: 400; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.social { display: flex; gap: 11px; }
.social svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.social a:hover, .foot-links a:hover { color: var(--orange); }
.copy { font-size: 12px; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s, transform .7s; }
.reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manifesto h2, .manifesto .body, .manifesto ul, .brief-grid .lead-col, form.form { grid-column: 1 / -1; }
  .contact h1, .contact-list, .contact .tile { grid-column: 1 / -1; grid-row: auto; }
  .contact .tile { aspect-ratio: 3 / 2; }
  .manifesto ul { align-self: start; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
}
@media (max-width: 780px) {
  .tiles, .tiles--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-orange { height: 44vh; padding-top: 18px; }
  .about-orange .taped { transform: translateY(70px); }
  .about-orange .poster { height: 58vh; }
  .about-body { padding-top: 150px; }
  .tape { width: 320px; }
  .about-block { padding-top: 128px; }
  .about-block + .about-strip + .about-block { padding-bottom: 128px; }
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .about-text { font-size: 16px; }
  .about-grid img { width: 300px; }
  .about-strip { padding: 80px 0; }
  .about-poster { margin-top: 40px; }
  .showroom-caption { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .showroom-caption address { order: -1; text-align: left; }
  #sectorTiles .tile:last-child:nth-child(odd), #otherTiles .tile:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
  .tile .over { opacity: 1; background: linear-gradient(transparent 55%, rgba(0,0,0,.7)); }
  .tile .over .go { padding-top: 8px; font-size: 9px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip, .quotes { grid-template-columns: minmax(0, 1fr); }
  .quotes { row-gap: 32px; }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .contact-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .contact-row .caps { grid-column: 1 / -1; }
  .tape { left: -16px; width: 250px; }
  .tape-flip { right: -16px; }
  .about-head { margin-bottom: 40px; }
  .about-text { font-size: 14px; }
  .about-grid img { width: 250px; }
  .two { grid-template-columns: minmax(0, 1fr); }
  .foot { flex-direction: column; align-items: flex-start; }
  .foot-band img { width: 62vw; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}