/* FORMATO / 2026. Editorial art direction, with the confirmed original brand mark. */
:root {
  --paper: #f1f0e9;
  --ink: #14171d;
  --muted: #64696b;
  --line: #cfceca;
  --accent: #39bce6;
  --accent-soft: #d8edf3;
  --studio-gutter: clamp(22px, 4.3vw, 78px);
  --coal: #101419;
  --chalk: #f5f4ee;
}
html { scroll-behavior: smooth; }
body { color: var(--ink); background: var(--paper); }
::selection { background: #39bce6; color: #101419; }
:is(a, button, input, textarea, select):focus-visible { outline-color: var(--accent); }
.button, .dock, .lead-form, .welcome-card, .work-card, .website-preview-dialog { border-radius: 0; }
.button { transition: background-color .25s, color .25s, transform .25s; }

/* 00 — Hero: an independent studio, not a generic agency template. */
.welcome-hero {
  position: relative;
  isolation: isolate;
  background: var(--coal);
  color: var(--chalk);
}
.welcome-hero::before {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0 0 0 auto;
  width: 43%;
  background: linear-gradient(90deg, transparent, rgba(57,188,230,.035)),
    repeating-linear-gradient(90deg, transparent 0 109px, rgba(255,255,255,.035) 110px);
  z-index: -1;
}
.identity-header {
  position: relative;
  min-height: 112px;
  padding: 23px var(--studio-gutter);
  border-bottom: 1px solid rgba(255,255,255,.16);
  max-width: none;
  gap: clamp(25px, 4vw, 70px);
}
.identity-header .brand-lockup { gap: 13px; }
.identity-header .brand-symbol { width: 78px; height: auto; }
.identity-header .wordmark { color: #fff; font-size: 29px; font-weight: 760; letter-spacing: -.067em; }
.identity-header>nav {
  gap: clamp(21px, 2.8vw, 49px);
  font-size: 12px;
  letter-spacing: -.02em;
}
.identity-header>nav a { opacity: .72; border-bottom: 1px solid transparent; }
.identity-header>nav a:hover { opacity: 1; border-color: var(--accent); }
.identity-whatsapp {
  border-bottom: 1px solid var(--accent);
  color: #fff;
  font-size: 12px;
  gap: 30px;
}
.identity-whatsapp:hover { color: var(--accent); }
.identity-whatsapp>span { color: var(--accent); font-size: 21px; }
.welcome-content {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: clamp(38px, 5vw, 110px);
  align-items: center;
  min-height: clamp(660px, 76svh, 990px);
  max-width: 2100px;
  padding: 73px var(--studio-gutter) 95px;
}
.welcome-copy { align-self: center; }
.welcome-location {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 11px;
  margin: 0 0 clamp(43px, 5.5vw, 84px);
  color: #dee5e9;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.welcome-location-end { color: #8396a0; }
.welcome-signal {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(57,188,230,.09);
  flex: none;
}
.welcome-copy h1 {
  font-size: clamp(52px, 5.25vw, 112px);
  line-height: 1.035;
  letter-spacing: -.072em;
  font-weight: 610;
  color: var(--chalk);
  margin: 0;
  text-wrap: balance;
}
.welcome-copy h1>span { color: var(--accent); white-space: nowrap; }
.hero-period { color: var(--chalk); }
.welcome-description {
  max-width: 540px;
  font-size: clamp(13px, 1.14vw, 16px);
  line-height: 1.8;
  letter-spacing: -.015em;
  margin: 40px 0 0;
  color: #b4c1c7;
}
.welcome-actions { margin-top: 33px; gap: 24px 34px; }
.welcome-actions .button {
  background: var(--accent);
  color: var(--coal);
  border: 1px solid var(--accent);
  border-radius: 0;
  min-height: 59px;
  padding-inline: 23px;
  font-size: 12px;
  font-weight: 720;
  gap: 33px;
}
.welcome-actions .button:hover { background: var(--chalk); border-color: var(--chalk); color: var(--coal); transform: translateY(-2px); }
.welcome-work-link { color: var(--chalk); font-size: 12px; gap: 25px; border-color: #84909755; }
.welcome-work-link:hover { color: var(--accent); border-color: var(--accent); }
.welcome-work-link>span { color: var(--accent); font-size: 23px; }
.welcome-signature {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 25px;
  max-width: 630px;
  margin-top: clamp(55px, 7vw, 110px);
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: 9px;
  color: #81929b;
  letter-spacing: .09em;
  line-height: 1.5;
}
.welcome-collage {
  position: relative;
  width: 100%;
  aspect-ratio: .95;
  margin: 0;
  background: #23323a;
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  box-shadow: 32px 32px 0 rgba(255,255,255,.025);
}
.welcome-collage::before {
  content: '';
  position: absolute;
  inset: 14px;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.07);
}
.welcome-collage::after {
  content: 'FORMATO / SELECTED WORK';
  position: absolute;
  bottom: 14px;
  left: 24px;
  font-size: 9px;
  letter-spacing: .15em;
  color: #d1e9ed;
  pointer-events: none;
}
.welcome-art-reference {
  position: absolute;
  top: 8%;
  left: 0;
  right: 0;
  height: 85%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  color: #39bce620;
  pointer-events: none;
}
.welcome-art-reference>span:first-child {
  font-size: clamp(240px, 31vw, 640px);
  line-height: .85;
  font-weight: 800;
  letter-spacing: -.15em;
  transform: translateX(-.08em);
}
.welcome-art-reference>span:last-child {
  position: absolute;
  top: 0;
  right: 7%;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
  color: #a2d8e6;
}
.welcome-art-heading {
  position: absolute;
  display: flex;
  justify-content: space-between;
  inset: 25px 25px auto;
  gap: 20px;
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: .12em;
  color: #d1e1e9;
}
.welcome-art-heading>span:last-child { color: #8fa2ad; text-align: right; }
.welcome-card {
  display: block;
  position: absolute;
  z-index: 1;
  overflow: hidden;
  border: 1px solid #ffffff3f;
  border-radius: 0;
  background: var(--chalk);
  transform-origin: center;
  box-shadow: 0 30px 65px #070f1580, 0 2px 8px #0004;
  transition: transform .5s cubic-bezier(.19,.75,.18,1), box-shadow .5s, filter .5s;
}
.welcome-card-primary { width: 88%; top: 17%; left: 5%; transform: rotate(-2deg); }
.welcome-card-secondary { width: 52%; right: -1%; bottom: 12%; z-index: 2; transform: rotate(4deg); }
.welcome-card img { width: 100%; height: auto; display: block; max-width: none; }
.welcome-card-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f5f4ee;
  color: #171a1f;
  padding: 10px 13px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: -.015em;
}
.welcome-card-label>span:last-child { font-size: 19px; color: #1581a4; }
.welcome-card:hover, .welcome-card:focus-visible {
  z-index: 3;
  transform: rotate(0deg) translateY(-8px);
  box-shadow: 0 39px 75px #070f15a0, 0 2px 8px #0005;
}
.welcome-collage-caption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  position: absolute;
  z-index: 4;
  inset: auto 24px 40px;
  padding-top: 12px;
  border-top: 1px solid #ffffff45;
  color: #9fb4be;
  font-size: 9px;
  line-height: 1.5;
  pointer-events: none;
}
.welcome-collage-caption>a { color: #fff; pointer-events: auto; }
.welcome-collage-caption>a:hover { color: var(--accent); }
.welcome-contacts {
  display: grid;
  grid-template-columns: 195px minmax(0, 1fr);
  gap: clamp(30px, 4vw, 78px);
  padding: 31px var(--studio-gutter) 39px;
  max-width: none;
  background: #1b232b;
  border-top: 1px solid rgba(255,255,255,.09);
}
.contact-location>p { color: #fff; font-size: 15px; font-weight: 550; }
.welcome-contacts .contact-location>span { color: #8d9ba5; font-size: 11px; }
.welcome-contacts .direct-links { grid-template-columns: 1.1fr 1.1fr 1.45fr .9fr 1.15fr; gap: clamp(16px, 2vw, 39px); }
.welcome-contacts .direct-links>a { border-color: #64727d60; }
.welcome-contacts .direct-links>a>span { color: #8d9ba5; font-size: 10px; }
.welcome-contacts .direct-links strong { color: #e5edf0; font-size: 11px; font-weight: 540; }
.welcome-contacts .direct-links>a:hover { border-color: var(--accent); }
.welcome-contacts .direct-links>a:hover strong { color: var(--accent); }
.welcome-contacts .direct-links strong>span { color: var(--accent); }

/* 01 — Work selection: oversized editorial type, recognisable actual work. */
.portfolio-start {
  padding: 96px var(--studio-gutter) 40px;
  max-width: none;
  background: var(--paper);
  border-top: 0;
  align-items: end;
}
.portfolio-eyebrow {
  color: #447c8d;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.6;
  letter-spacing: .1em;
  margin: 0 0 23px;
}
.portfolio-start h2 {
  font-size: clamp(42px, 5.3vw, 90px);
  letter-spacing: -.064em;
  line-height: 1.03;
  font-weight: 630;
}
.portfolio-start h2 span { color: #82929a; }
.portfolio-start>span { color: #6b7579; font-size: 11px; line-height: 1.7; text-align: right; }
#showcase-scroll.roulette-scroll,
#home-showcase.roulette-stage { background: #e7e9e5; }
#home-showcase.roulette-stage::before {
  content: 'F /';
  position: absolute;
  left: -3vw;
  top: 2%;
  color: #18212609;
  font-size: min(47vw, 720px);
  font-weight: 800;
  letter-spacing: -.12em;
  line-height: 1;
  pointer-events: none;
}
#home-showcase.roulette-stage::after {
  content: 'FORMATO     /     WEBSITES     /     2026';
  position: absolute;
  right: var(--studio-gutter);
  bottom: 18px;
  color: #647379;
  font-size: 9px;
  letter-spacing: .13em;
  pointer-events: none;
}
.roulette-stage.is-roulette-ready .roulette-card {
  border-color: #111a2230;
  box-shadow: 0 28px 65px -30px #1420255f;
}
.roulette-stage.is-roulette-ready .roulette-card.is-active {
  border-color: #172c35;
  box-shadow: 0 38px 80px -25px #10202a62;
}
.roulette-stage.is-roulette-ready .roulette-guide {
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 650;
  color: #56707b;
}
.roulette-stage.is-roulette-ready .roulette-guide>span:last-child { color: #126987; }
.roulette-current h2 { font-size: clamp(22px, 2vw, 30px); font-weight: 650; letter-spacing: -.055em; }
.roulette-current .roulette-objective { color: #556467; }
.roulette-project-actions a { border-color: #8d9b9d; }
.roulette-project-actions a:hover { color: #007da6; border-color: #007da6; }
.roulette-markers button>span { border-radius: 0; background: #aebec2; }
.roulette-markers button[aria-pressed=true]>span { background: #2097c1; }
.roulette-stage.is-roulette-ready .roulette-guide { z-index: 2; }
.roulette-open { background: var(--coal); color: #fff; border-color: var(--coal); }
.roulette-card-label { background: #fff; }
.roulette-stage.is-roulette-ready .roulette-deck { z-index: 1; }
.portfolio-more { max-width: none; padding: 23px var(--studio-gutter) 73px; background: var(--paper); }
.portfolio-more>span { color: #737b7f; }
.portfolio-more .all-projects {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(17px, 2.1vw, 30px);
  border-top: 1px solid var(--line);
  padding: 24px 0;
  margin-top: 12px;
}
.portfolio-more .all-projects:hover { color: #0087b2; }

/* 02 — Commercial method, treated as a strong branded editorial spread. */
.format-approach {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #0f2129;
  background: #46bde4;
}
.format-approach-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(55px, 12vw, 210px);
  padding: clamp(82px, 9vw, 155px) var(--studio-gutter);
  max-width: 2100px;
}
.format-approach-lead .kicker {
  color: #154457;
  font-size: 11px;
  letter-spacing: .12em;
}
.format-approach h2 {
  font-size: clamp(62px, 6.7vw, 114px);
  font-weight: 650;
  letter-spacing: -.075em;
  line-height: 1.02;
  margin: 52px 0 32px;
}
.format-approach h2>span { color: #fff; }
.format-approach-lead>p:not(.kicker) {
  font-size: 15px;
  line-height: 1.8;
  max-width: 535px;
}
.format-approach-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 55px;
  padding: 16px 0;
  margin-top: 35px;
  border-bottom: 1px solid #163f50;
  font-size: 12px;
  font-weight: 730;
}
.format-approach-link:hover { border-color: white; color: white; }
.format-approach-link span { font-size: 21px; }
.format-approach ol {
  align-self: center;
  padding: 0;
  margin: 0;
  list-style: none;
  border-top: 1px solid #15475c66;
}
.format-approach li {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: clamp(20px, 2.4vw, 32px) 0;
  border-bottom: 1px solid #15475c66;
}
.format-approach li>span:first-child { font-size: 11px; color: #235a70; }
.format-approach li strong {
  font-size: clamp(23px, 2.3vw, 39px);
  font-weight: 620;
  letter-spacing: -.04em;
  transition: transform .3s;
}
.format-approach li>span:last-child { font-size: 22px; color: #12536e; }
.format-approach li:hover strong { transform: translateX(7px); }
.format-approach-watermark {
  position: absolute;
  right: -1%;
  bottom: -29%;
  font-size: clamp(300px, 44vw, 730px);
  letter-spacing: -.16em;
  line-height: .9;
  font-weight: 800;
  color: #fff1;
  user-select: none;
  pointer-events: none;
}

/* 03 — A clear answer to 'what does this do for my business?'. */
.gallery-sales, body.has-featured-presentation .gallery-sales {
  max-width: none;
  background: #f1f0e9;
  padding: clamp(95px, 10vw, 175px) var(--studio-gutter);
  border-top: 1px solid #d2d2ca;
}
.gallery-sales>.kicker {
  color: #447c8d;
  font-size: 11px;
  font-weight: 680;
  letter-spacing: .13em;
}
.gallery-sales>div {
  max-width: 1900px;
  grid-template-columns: 1.22fr .78fr;
  align-items: end;
  gap: 7vw;
  margin-top: 28px;
}
.gallery-sales h2 {
  font-size: clamp(49px, 6.9vw, 116px);
  line-height: .99;
  letter-spacing: -.075em;
  font-weight: 650;
}
.gallery-sales>div>div { padding-bottom: 7px; }
.gallery-sales>div>div p { color: #4d5b60; font-size: 16px; line-height: 1.85; max-width: 590px; }
.gallery-sales .underlined {
  display: inline-flex;
  align-items: center;
  margin-top: 31px;
  color: #007eaa;
  font-size: 12px;
  font-weight: 700;
}
.gallery-sales .underlined:hover { color: var(--coal); }

/* 04 — Final contact: clear white form against nearly-black typography. */
.sales-contact {
  max-width: none;
  margin: 0;
  padding: clamp(95px, 8vw, 148px) var(--studio-gutter) clamp(100px, 9vw, 160px);
  gap: clamp(50px, 8vw, 170px);
  background: #141a21;
  color: var(--chalk);
  border: 0;
}
.sales-contact .kicker { color: #61c3e4; font-size: 11px; font-weight: 730; letter-spacing: .12em; }
.sales-contact :is(h1,h2) {
  margin: 34px 0 28px;
  font-size: clamp(51px, 5.6vw, 93px);
  line-height: 1.02;
  letter-spacing: -.066em;
  font-weight: 640;
}
.sales-contact :is(h1,h2)>span { color: var(--accent); }
.sales-contact-copy>p:not(.kicker) { color: #acbbc4; font-size: 15px; line-height: 1.8; }
.contact-person { gap: 21px; margin: 46px 0 38px; }
.contact-brand-symbol { width: 75px; max-width: 75px; height: auto; object-fit: contain; }
.contact-person strong { color: white; font-size: 18px; font-weight: 670; }
.contact-person div>span { color: #94a6b1; font-size: 11px; }
.contact-direct-heading { color: #d6e1e5 !important; font-size: 11px !important; font-weight: 710; text-transform: uppercase; letter-spacing: .09em; }
.direct-contact-list { border-color: #ffffff30; margin-top: 17px; }
.direct-contact-list li { border-color: #ffffff24; }
.direct-contact-text small { color: #8a9ca6; }
.direct-contact-text strong { color: #e5eff1; font-weight: 530; }
.direct-contact-list a>span:last-child { color: var(--accent); }
.direct-contact-list a:hover .direct-contact-text strong { color: var(--accent); }
.guided-contact.lead-form,.contact-dialog form.guided-contact {
  background: #f3f2eb;
  border: 0;
  border-radius: 0;
  padding: clamp(24px, 3vw, 50px);
  color: var(--coal);
  box-shadow: 16px 16px 0 #ffffff09;
}
.guided-contact.lead-form .form-heading { border-color: #cfd5d4; }
.guided-contact .intent-choice { border-radius: 0 !important; }
.guided-contact .intent-choice:has(input:checked) { background: #d6f0f7; border-color: #229ac2; }
.guided-contact .contact-progress-track { background: #d4dedf; }
.guided-contact .contact-progress-track>span { background: #269dc4; }
.guided-contact .intent-icon { color: #487b8d; }
.guided-contact .intent-choice strong { color: #1b2429; }
.guided-contact .intent-choice small { color: #66757a; }
.guided-contact .intent-choice:hover { background: #e4f2f5; border-color: #61adca; }
.guided-contact .intent-choice:has(input:checked) { background: #d9f0f6; border-color: #259ac2; box-shadow: inset 0 0 0 1px #259ac2; }
.guided-contact .intent-choice:has(input:checked) .intent-icon { color: #176b88; }
.guided-contact .intent-choice:has(input:checked) .intent-check { background: #197f9f; border-color: #197f9f; }
.guided-contact .intent-intro,
.guided-contact .contact-choice-note,
.guided-contact .contact-step-note,
.guided-contact .contact-details-hint { color: #65747a; }
.guided-contact .contact-next:disabled { background: #d6dfe0; color: #75868c; }
.guided-contact .contact-step-note a { color: #167b9c; border-color: #8ab0bb; }
.guided-contact .contact-draft pre { background: #e7f3f5; color: #394e57; border-color: #36b2db; }
.guided-contact input:not([type=radio]):focus,
.guided-contact textarea:focus { outline-color: #299abf; }
.guided-contact .contact-next,
.guided-contact .whatsapp-button {
  background: #161e25;
  border-radius: 0;
  color: white;
}
.guided-contact .contact-next:hover,
.guided-contact .whatsapp-button:hover { background: #0a7fa6; }
.guided-contact .email-option:hover { color: #007eaa; }

/* End matter and secondary routes inherit the same marks and restraint. */
.other-work-banner { margin-bottom: 0; padding: 45px var(--studio-gutter) 90px; background: #f1f0e9; }
.other-work-banner>a { border-top: 1px solid var(--line); }
.other-work-banner h2 { font-size: clamp(26px, 3.2vw, 48px); }
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  padding: 80px var(--studio-gutter) 23px;
  background: #090e12;
  color: #edf3f3;
}
.site-footer::after {
  content: 'FORMATO';
  display: block;
  width: 100%;
  margin-top: 65px;
  color: #ffffff12;
  font-size: 20.8vw;
  letter-spacing: -.102em;
  line-height: .76;
  font-weight: 800;
  white-space: nowrap;
  transform: translateX(-.024em);
  pointer-events: none;
}
.footer-identity { border-color: #ffffff30; padding-bottom: 46px; }
.footer-identity .brand-symbol { width: 108px; }
.footer-identity .wordmark { color: white; font-weight: 730; }
.footer-identity>p { color: #91a3ac; }
.footer-direct { border-top-color: #ffffff30; padding-top: 30px; }
.footer-direct>a { border-bottom-color: transparent; }
.footer-direct>a>span { color: #8397a0; }
.footer-direct strong { color: #dce7eb; }
.footer-direct>a:hover strong { color: var(--accent); }
.footer-last { border-color: #ffffff30; }
.footer-last a, .footer-last button { color: #abb9c0; }
.footer-last a:hover, .footer-last button:hover { color: var(--accent); }
.dock {
  z-index: 40;
  background: rgba(11,17,22,.95);
  border: 1px solid #ffffff4a;
  box-shadow: 0 15px 45px #0005;
  border-radius: 2px;
  backdrop-filter: blur(15px);
}
.dock .dock-live { background: var(--accent); color: #0a1820; font-weight: 700; }
.dock .dock-live:hover { background: #eaf4f6; }
.dock .dock-project { color: white; }
.dock>.menu-trigger { border-radius: 0; }
.site-header { background: var(--paper); }
.site-header .header-contact { border-bottom-color: #279fc6; }
.site-header .wordmark { font-weight: 730; }
.page-intro {
  max-width: none;
  background: var(--coal);
  color: var(--chalk);
  padding: clamp(85px, 8vw, 138px) var(--studio-gutter) clamp(95px, 9vw, 150px);
}
.page-intro h1 { font-size: clamp(73px, 8.5vw, 145px); line-height: .98; letter-spacing: -.08em; }
.page-intro>div>p { color: #bfccd0; font-size: 18px; }
.page-intro .kicker { color: var(--accent); }
.case-heading {
  max-width: none;
  padding: 55px var(--studio-gutter) 77px;
  background: var(--coal);
  color: white;
}
.case-heading h1 { font-size: clamp(64px, 8vw, 130px); letter-spacing: -.078em; }
.case-heading>div>p { color: #b8c7cb; }
.case-heading .button { background: var(--accent); color: var(--coal); }
.case-heading .back-link, .case-heading .underlined { color: #c5d2d7; }
.case-meta { border-color: #ffffff30; color: #9cabb1; }
.case-hero { margin-top: 0; }
.case-hero img { border-radius: 0; }
.contact-band {
  max-width: none;
  border-radius: 0;
  margin: 0;
  background: #3bbbe5;
  color: #101a22;
  padding: clamp(65px, 7vw, 125px) var(--studio-gutter);
}
.contact-band .kicker { color: #17566d; }
.contact-band h2 { font-size: clamp(52px, 6vw, 95px); letter-spacing: -.068em; }
.contact-band .button { background: var(--coal); color: white; }
.contact-band .button:hover { background: white; color: var(--coal); }
.menu-dialog {
  background: #111920;
  color: white;
  border-radius: 0;
  inset: 0;
  width: 100%;
  height: 100dvh;
  padding: clamp(24px, 3.2vw, 55px);
}
.menu-dialog::backdrop { background: #090e12b0; }
.menu-top .wordmark { color: #fff; }
.menu-body nav>a { border-color: #ffffff30; }
.menu-body nav>a>span:first-child, .menu-body nav>a>sup { color: #62bcda; }
.menu-body nav>a>span:last-child { color: var(--accent); }
.menu-body nav>a:hover { color: var(--accent); }
.menu-aside>p:first-child { color: #74b9d2; }
.menu-aside>p:nth-child(2) { color: #afbdc4; }
.menu-aside>a { color: #cbd6d9; }
.menu-aside>a:hover { color: var(--accent); }
.preview-topbar, .project-film-header { border-color: var(--line); }
.project-film-dialog :is(a,button):focus-visible { outline-color: var(--accent); }

@media (min-width: 1700px) {
  .welcome-content { min-height: 790px; }
  .welcome-copy h1 { font-size: clamp(84px, 5.1vw, 112px); }
}
@media (max-width: 1250px) and (min-width: 761px) {
  .welcome-content { gap: 3.4vw; }
  .welcome-copy h1 { font-size: 5.15vw; }
  .welcome-description { margin-top: 30px; }
  .welcome-signature { margin-top: 55px; }
  .welcome-art-heading>span:last-child { display: none; }
  .welcome-contacts { grid-template-columns: 1fr; gap: 20px; }
  .welcome-contacts .contact-location { display: flex; gap: 20px; align-items: baseline; }
}
@media (max-width: 760px) {
  :root { --studio-gutter: 21px; }
  .welcome-hero::before { width: 100%; opacity: .35; }
  .identity-header { min-height: 0; padding: 21px var(--studio-gutter) 0; gap: 13px; }
  .identity-header .brand-symbol { width: 57px; }
  .identity-header .wordmark { font-size: 23px; }
  .identity-whatsapp { font-size: 10px; gap: 9px; min-height: 38px; }
  .identity-whatsapp>span { font-size: 17px; }
  .identity-header>nav {
    width: 100%;
    order: 3;
    margin: 10px 0 0;
    justify-content: space-between;
    border-top: 1px solid #ffffff26;
    border-bottom: 0;
    gap: 14px;
    font-size: 11px;
  }
  .identity-header>nav a { padding: 15px 0; }
  .welcome-content { display: block; min-height: 0; padding: 55px var(--studio-gutter) 60px; }
  .welcome-location { margin-bottom: 42px; font-size: 9px; letter-spacing: .09em; }
  .welcome-copy h1 { font-size: clamp(37px, 9.1vw, 70px); line-height: 1.06; letter-spacing: -.075em; }
  .welcome-description { font-size: 14px; margin-top: 28px; max-width: 530px; }
  .welcome-actions { margin-top: 29px; gap: 15px 23px; }
  .welcome-actions .button { min-height: 53px; padding-inline: 17px; font-size: 11px; gap: 17px; }
  .welcome-work-link { gap: 13px; font-size: 11px; }
  .welcome-signature { margin-top: 42px; padding-top: 14px; font-size: 8px; }
  .welcome-collage { max-width: 650px; margin: 52px auto 0; aspect-ratio: .95; }
  .welcome-art-heading { inset: 18px 17px auto; font-size: 8px; }
  .welcome-art-reference>span:first-child { font-size: 70vw; }
  .welcome-card-primary { top: 18%; left: 5%; width: 88%; }
  .welcome-card-secondary { width: 52%; right: -1%; bottom: 14%; }
  .welcome-card-label { padding: 7px 9px; font-size: 9px; }
  .welcome-collage-caption { inset: auto 16px 31px; font-size: 8px; }
  .welcome-collage-caption>span { max-width: 55%; }
  .welcome-contacts { display: block; padding: 28px var(--studio-gutter) 36px; }
  .welcome-contacts .contact-location { display: block; margin-bottom: 27px; }
  .welcome-contacts .contact-location>span { display: block; margin-top: 5px; }
  .welcome-contacts .direct-links { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px 21px; }
  .welcome-contacts .direct-links>a { grid-column: auto; grid-row: auto; }
  .welcome-contacts .direct-links>a:nth-child(3) { grid-column: 1/-1; grid-row: auto; }
  .welcome-contacts .direct-links>a:nth-child(4),.welcome-contacts .direct-links>a:nth-child(5) { grid-column: auto; grid-row: auto; }
  .welcome-contacts .direct-links strong { font-size: 11px; }
  .portfolio-start { padding: 67px var(--studio-gutter) 29px; gap: 17px; }
  .portfolio-eyebrow { font-size: 9px; margin-bottom: 17px; }
  .portfolio-start h2 { font-size: clamp(40px, 9.6vw, 65px); }
  .portfolio-start>span { text-align: left; font-size: 10px; }
  #home-showcase.roulette-stage::before { font-size: 70vw; top: 19%; left: -9%; }
  #home-showcase.roulette-stage::after { font-size: 7px; left: 17px; right: auto; bottom: 16px; }
  .roulette-stage.is-roulette-ready .roulette-guide { font-size: 9px; }
  .roulette-current h2 { font-size: 19px; }
  .portfolio-more { padding: 12px var(--studio-gutter) 65px; }
  .portfolio-more .all-projects { font-size: 19px; }
  .format-approach-inner { display: block; padding: 80px var(--studio-gutter) 87px; }
  .format-approach-lead .kicker { font-size: 9px; }
  .format-approach h2 { font-size: clamp(48px, 11vw, 76px); margin: 36px 0 24px; }
  .format-approach-lead>p:not(.kicker) { font-size: 14px; }
  .format-approach-link { margin-top: 24px; font-size: 11px; }
  .format-approach ol { margin-top: 56px; }
  .format-approach li { grid-template-columns: 31px 1fr 26px; gap: 15px; padding: 20px 0; }
  .format-approach li strong { font-size: clamp(24px, 6vw, 36px); }
  .format-approach-watermark { font-size: 95vw; bottom: -7%; right: -20%; }
  .gallery-sales,body.has-featured-presentation .gallery-sales { padding: 83px var(--studio-gutter) 90px; }
  .gallery-sales>div { display: block; margin-top: 23px; }
  .gallery-sales h2 { font-size: clamp(46px, 10vw, 71px); }
  .gallery-sales>div>div { margin-top: 34px; }
  .gallery-sales>div>div p { font-size: 14px; }
  .sales-contact { display: block; padding: 75px var(--studio-gutter) 100px; }
  .sales-contact :is(h1,h2) { font-size: clamp(48px, 10.7vw, 75px); margin: 27px 0; }
  .sales-contact-copy>p:not(.kicker) { font-size: 14px; }
  .contact-brand-symbol { width: 60px; }
  .contact-person { margin: 33px 0 30px; gap: 16px; }
  .direct-contact-list { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .guided-contact.lead-form,.contact-dialog form.guided-contact { margin-top: 38px; padding: 25px 19px; box-shadow: 8px 8px 0 #ffffff09; }
  .other-work-banner { padding: 28px var(--studio-gutter) 75px; }
  .site-footer { padding: 60px var(--studio-gutter) 18px; }
  .site-footer::after { font-size: 21.5vw; margin-top: 65px; }
  .footer-direct>a { border-bottom: 1px solid #ffffff18; }
  .footer-identity .brand-symbol { width: 83px; }
  .footer-identity .wordmark { font-size: 29px; }
  .footer-identity>p { margin-top: 18px; }
  .page-intro { padding: 70px var(--studio-gutter) 88px; }
  .page-intro h1 { font-size: clamp(60px, 14vw, 94px); }
  .page-intro>div>p { font-size: 15px; }
  .case-heading { padding: 40px var(--studio-gutter) 60px; }
  .case-heading h1 { font-size: clamp(58px, 13vw, 92px); }
  .contact-band { padding: 63px var(--studio-gutter) 80px; }
  .contact-band h2 { font-size: clamp(46px, 10vw, 65px); }
  .menu-dialog { inset: 0; width: 100%; height: 100dvh; padding: 28px var(--studio-gutter); border-radius: 0; }
  .menu-body nav>a { border-color: #ffffff33; font-size: clamp(32px, 8vw, 54px); }
}
@media (max-width: 395px) {
  :root { --studio-gutter: 17px; }
  .identity-header .brand-symbol { width: 46px; }
  .identity-header .wordmark { font-size: 21px; }
  .identity-whatsapp { font-size: 9px; }
  .welcome-copy h1 { font-size: 9vw; }
  .welcome-location { font-size: 8px; }
  .welcome-description { font-size: 13px; }
  .welcome-actions .button { font-size: 10px; }
  .welcome-work-link { font-size: 10px; }
  .welcome-collage-caption { font-size: 7px; }
  .welcome-card-label { font-size: 8px; }
  .format-approach h2 { font-size: 10.7vw; }
  .sales-contact :is(h1,h2) { font-size: 10.6vw; }
}
@media (prefers-reduced-motion: no-preference) {
  .welcome-location { animation: formato-appear .55s .02s both; }
  .welcome-copy h1 { animation: formato-appear .72s .1s both; }
  .welcome-description { animation: formato-appear .66s .23s both; }
  .welcome-actions { animation: formato-appear .66s .3s both; }
  .welcome-card-primary { animation: formato-specimen .9s .22s both; }
  .welcome-card-secondary { animation: formato-specimen .85s .35s both; }
  @keyframes formato-appear { from { opacity: 0; transform: translateY(23px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes formato-specimen { from { opacity: 0; filter: blur(7px); translate: 0 40px; } to { opacity: 1; filter: blur(0); translate: 0 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-card, .format-approach li strong, .welcome-actions .button { transition: none !important; }
}