/* Shared navigation, contact design and vector arrows. */
html { scroll-padding-top:7rem; }
body .header {
  position:sticky;
  top:0;
  width:100%;
  margin:0;
  padding-inline:var(--gutter);
  background:var(--paper);
  z-index:40;
}
.contact-page .header { background:#111;color:#fff;border-bottom-color:#ffffff30; }
.contact-page .header .wordmark img { filter:none; }
.bb-arrow {
  display:inline-block;
  width:1em;
  height:1em;
  flex:0 0 auto;
  vertical-align:-.12em;
}
.bb-arrow::before {
  content:'';
  display:block;
  width:100%;
  height:100%;
  background:currentColor;
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-position:center;
  mask-repeat:no-repeat;
  mask-size:contain;
}
.bb-arrow-ne::before {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19 19 5M9 5h10v10' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19 19 5M9 5h10v10' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.bb-arrow-right::before {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.bb-arrow-left::before {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12H4m6-6-6 6 6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12H4m6-6-6 6 6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.bb-arrow-down::before {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v16m-6-6 6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v16m-6-6 6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.index-arrow .bb-arrow,
.work-card-arrow .bb-arrow,
.work-card-open .bb-arrow {
  width:1.05em;
  height:1.05em;
}

@media(max-width:650px) {
  body.menu-open .header {
    position:fixed;
    inset:0 0 auto;
    width:100%;
    min-height:90px;
    margin:0!important;
    padding-inline:var(--gutter)!important;
    background:var(--red)!important;
    color:#fff!important;
    border-bottom-color:#ffffff70!important;
    z-index:50;
  }
  body.menu-open .header .wordmark img { filter:none!important; }
  body.menu-open .menu-toggle {
    appearance:none!important;
    -webkit-appearance:none!important;
    background:transparent!important;
    color:#fff!important;
    border:0!important;
    box-shadow:none!important;
  }
  .mobile-menu {
    inset:0;
    width:100%;
    height:100dvh;
    min-height:100svh;
    padding:calc(90px + 1.5rem) var(--gutter) max(1.5rem,env(safe-area-inset-bottom));
    background:var(--red)!important;
    color:#fff!important;
    z-index:45;
  }
  .mobile-menu[hidden] { display:none!important; }
  .mobile-menu:not([hidden]) { display:flex!important; }
  .mobile-menu nav :is(a,button) {
    appearance:none!important;
    -webkit-appearance:none!important;
    width:100%!important;
    background:transparent!important;
    color:#fff!important;
    border:0!important;
    border-bottom:1px solid #ffffff70!important;
    border-radius:0!important;
    box-shadow:none!important;
    text-transform:none!important;
  }
  .mobile-menu nav :is(a,button):is(:focus,:active,:hover) {
    background:transparent!important;
    color:#fff!important;
  }
  .mobile-menu nav :is(a,button):focus-visible {
    outline:2px solid #fff;
    outline-offset:-3px;
  }
}

.boom-contact {
  padding:clamp(3.5rem,7vw,7rem) var(--gutter);
  background:#fff;
  color:#111;
}
.boom-contact-card {
  width:min(100%,68rem);
  margin:0 auto;
  padding:clamp(2rem,4.2vw,4rem);
  background:#111;
  color:#fff;
}
.boom-contact-intro {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(2rem,4vw,4rem);
  align-items:end;
}
.boom-contact h2 {
  margin:0;
  color:#fff;
  font-size:clamp(2.5rem,4.8vw,4.5rem);
  line-height:1;
  letter-spacing:-.055em;
  font-weight:550;
}
.boom-contact h2 > span { display:block; }
.boom-contact h2 strong { color:var(--red);font-weight:840; }
.boom-contact-copy { max-width:25rem; }
.boom-contact-copy p { margin:0;color:#c5c5c2;font-size:1rem;line-height:1.6;letter-spacing:-.015em; }
.boom-contact-copy p+p { margin-top:1.25rem;color:#fff; }
.boom-contact-copy strong { font-weight:650; }
.boom-contact-button {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:2.5rem;
  padding:0 0 .65rem;
  border:0;
  border-bottom:1px solid #ffffff50;
  background:transparent;
  color:#fff!important;
  font-size:.78rem;
  font-weight:650;
  line-height:1.3;
  letter-spacing:.055em;
  transition:border-color .45s ease;
}
.boom-contact-button-icon {
  display:grid;
  place-items:center;
  width:3rem;
  height:3rem;
  flex:0 0 auto;
  background:var(--red);
  color:#fff;
}
.boom-contact-button .bb-arrow { width:1.4rem;height:1.4rem;transition:transform .5s cubic-bezier(.22,.68,0,1); }
.boom-contact-button:is(:hover,:focus-visible) { border-bottom-color:#fff; }
.boom-contact-button:is(:hover,:focus-visible) .bb-arrow { transform:translateX(3px); }

/* A real page footer: its black background reaches both viewport edges. */
.boom-footer {
  width:100%;
  margin:0;
  padding:clamp(2.75rem,4.2vw,4rem) var(--gutter);
  background:#111;
  color:#fff;
}
.boom-footer-inner {
  width:min(100%,68rem);
  margin:0 auto;
  padding-inline:clamp(2rem,4.2vw,4rem);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:2rem;
  align-items:center;
}
.boom-footer-meta { display:grid;gap:.15rem; }
.boom-footer-meta :is(a,p) {
  display:flex;
  align-items:center;
  gap:.85rem;
  width:fit-content;
  min-height:2.5rem;
  margin:0;
  color:#d0d0cc!important;
  font-size:.9rem;
  line-height:1.4;
}
.boom-footer-meta a { text-underline-offset:.25em; }
.boom-footer-meta a:is(:hover,:focus-visible) { color:#fff!important;text-decoration:underline; }
.boom-footer-meta svg {
  width:1.15rem;
  height:1.15rem;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.boom-footer-meta svg .icon-dot { fill:currentColor;stroke:none; }
.boom-footer-brand { text-align:right; }
.boom-footer-brand a { display:inline-block; }
.boom-footer-brand img { display:block;width:clamp(10rem,17vw,13rem);height:auto; }
.boom-footer-brand p { margin:1rem 0 0;color:#bcbcb8;font-size:.75rem;line-height:1.5;letter-spacing:.015em; }

@media(max-width:700px) {
  .boom-contact { padding:3rem var(--gutter); }
  .boom-contact-card { padding:2.5rem 1.5rem 2rem; }
  .boom-contact-intro { grid-template-columns:1fr;gap:2rem; }
  .boom-contact h2 { font-size:clamp(2rem,8.9vw,3.8rem); }
  .boom-contact-copy { max-width:none; }
  .boom-contact-copy p { max-width:32rem;font-size:1rem; }
  .boom-contact-button { margin-top:2rem; }
  .boom-footer { padding-block:2.5rem; }
  .boom-footer-inner { grid-template-columns:1fr;gap:2.25rem;padding-inline:1.5rem; }
  .boom-footer-meta :is(a,p) { min-height:2.75rem;font-size:.875rem; }
  .boom-footer-brand {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.25rem;
    flex-wrap:wrap;
    padding-top:1.75rem;
    border-top:1px solid #ffffff30;
    text-align:right;
  }
  .boom-footer-brand img { width:9rem; }
  .boom-footer-brand p { margin:0;font-size:.7rem; }
}

.contact-page { background:#fff;color:#111; }
.contact-preview-notice { display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.25rem 0;margin:0 0 2.5rem;border-block:1px solid #d7d7d7; }
.contact-preview-notice p { max-width:42rem;margin:0;font-size:1rem;line-height:1.5; }
.contact-preview-notice a { display:inline-flex;align-items:center;gap:.75rem;min-height:44px;flex-shrink:0;font-size:.875rem;font-weight:650;text-decoration:underline;text-underline-offset:.3em; }
@media(max-width:760px) { .contact-preview-notice { align-items:flex-start;flex-direction:column;gap:.75rem; } }
.contact-main { max-width:85rem;margin:0 auto;padding:clamp(3rem,6vw,6rem) var(--gutter) clamp(4rem,8vw,8rem); }
.contact-heading { padding-bottom:clamp(2.5rem,5vw,5rem);border-bottom:1px solid #111; }
.contact-heading .section-eyebrow { color:#666;font-size:.7rem;letter-spacing:.075em; }
.contact-heading h1 { margin:2rem 0 0;color:#111;font-size:clamp(2.7rem,6.7vw,6rem);line-height:1.02;letter-spacing:-.065em;font-weight:550; }
.contact-heading h1 strong { color:var(--red);font-weight:800; }
.contact-conversation { display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(2.5rem,6vw,6rem);padding-top:clamp(2.5rem,4.5vw,4rem); }
.contact-aside p { max-width:20rem;font-size:1.05rem;line-height:1.55;letter-spacing:-.015em; }
.contact-aside p:first-child { color:#111;font-size:1.25rem;line-height:1.4; }
.contact-aside p+p { margin-top:1.25rem;color:#656562; }
.contact-aside a { display:inline-flex;align-items:center;gap:.65rem;min-height:44px;margin-top:1.5rem;font-size:.9rem;text-underline-offset:.3em; }
.contact-aside a:hover { text-decoration:underline; }
.boom-form { min-width:0;margin:0; }
.boom-form-row { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem; }
.boom-form label { display:block;min-width:0;margin:0 0 2.2rem;font-size:.8rem;font-weight:550;line-height:1.4; }
.boom-form label > span { color:#666;font-weight:400; }
.boom-form :is(input,select,textarea) { display:block;width:100%;min-height:3.25rem;margin:.55rem 0 0;padding:.8rem 0;border:0;border-bottom:1px solid #b6b6b2;border-radius:0;background:transparent;box-shadow:none;color:#111;font:400 1rem/1.5 var(--font); }
.boom-form textarea { resize:vertical;min-height:8rem;max-height:24rem; }
.boom-form :is(input,textarea)::placeholder { color:#747470;opacity:1; }
.boom-form :is(input,select,textarea):focus-visible { outline:2px solid #111;outline-offset:5px;border-bottom-color:#111; }
.boom-form :is(input,select,textarea)[aria-invalid="true"] { border-bottom:2px solid var(--red); }
.boom-form select { padding-right:1.5rem;text-overflow:ellipsis; }
.boom-form-trap { position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
.boom-form-send { display:flex;align-items:center;justify-content:space-between;gap:1.5rem; }
.boom-form-send p { max-width:17rem;color:#656562;font-size:.75rem;line-height:1.5; }
.boom-form-submit { display:inline-flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:3.4rem;padding:.35rem .35rem .35rem 1.1rem;border:1px solid #111;background:#111;color:#fff;cursor:pointer;font:650 .72rem/1.3 var(--font);letter-spacing:.035em; }
.boom-form-submit .boom-contact-button-icon { width:2.7rem;height:2.7rem; }
.boom-form-submit .bb-arrow { width:1.3rem;height:1.3rem;transition:transform .4s ease; }
.boom-form-submit:is(:hover,:focus-visible) .bb-arrow { transform:translateX(3px); }
.boom-form-submit:disabled { opacity:.6;cursor:wait; }
.boom-form-status { margin-top:1.5rem;padding:1rem 0;border-top:1px solid #b6b6b2;color:#111;font-size:.9rem;line-height:1.5; }
.boom-form-status[hidden] { display:none; }
.boom-form-status[data-state="error"] { border-color:var(--red); }
@media(max-width:800px) {
  .contact-conversation { grid-template-columns:1fr; }
  .contact-aside { max-width:32rem; }
  .contact-aside p { max-width:none; }
}

/* One typographic hierarchy; space follows the content, not removed labels. */
.project-index-shell { grid-template-rows:96px minmax(0,1fr); }
.project-index-top { grid-template-columns:1fr auto; }
.index-project { grid-template-columns:minmax(0,1fr) minmax(9rem,.62fr) 1.5rem; }
.index-meta { font-size:.8125rem;letter-spacing:0;text-transform:none; }
.home-page .hero-kinetic { padding-top:0; }
.home-page .hero-kinetic h1 { padding-block:clamp(2.5rem,5vw,5rem); }
.home-page .hero-bottom > p { max-width:33rem;font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.5; }
.work-card-title { grid-template-columns:minmax(0,1fr) 1.25rem;gap:1rem; }
.work-card-title h3 { font-size:clamp(1.25rem,1.7vw,1.75rem); }
.home-page .work-card-link > p { padding-left:0;font-size:.875rem;line-height:1.5;margin-top:.5rem; }
.work-selector-foot { justify-content:flex-end;padding-top:1.6rem; }
.archive-link { font-size:1rem; }
.home-page .services { gap:clamp(2.5rem,7vw,7rem);padding-block:clamp(3.5rem,7vw,7rem); }
.home-page .services-intro { display:block; }
.home-page .services-intro h2 { margin:0;font-size:clamp(2.6rem,4.8vw,5rem);line-height:1.05;letter-spacing:-.055em; }
.home-page .services-intro > p { max-width:24rem;margin:1.5rem 0 0;font-size:1.125rem;line-height:1.6; }
.service-list summary { grid-template-columns:minmax(0,1fr) 1.5rem;gap:1rem;padding-block:1.6rem;font-size:clamp(1.2rem,1.8vw,1.8rem);line-height:1.25; }
.service-list details > p { padding-left:0;font-size:1.0625rem; }
.about-concise .about-hero h1 { margin-block:clamp(1.75rem,4.5vw,4.5rem) 2.5rem; }
.about-concise .about-hero-bottom { display:block; }
.about-concise .about-hero-bottom > p { margin-left:auto;max-width:38rem;font-size:clamp(1.15rem,1.6vw,1.5rem); }
.about-origin h2,.difference-heading h2 { margin-top:0; }
.difference-principles article { display:block;padding-top:1.5rem; }
.difference-principles h3 { margin:0 0 1rem; }
.about-concise .about-bombi h2 { margin-top:0; }
.case-kicker { display:block;border-top:0;padding-top:0;font-size:.9375rem;text-transform:none;letter-spacing:0; }
.case-lead { display:block; }
.case-lead > p { max-width:45rem;margin-left:auto;font-size:clamp(1.15rem,2vw,1.75rem);line-height:1.4; }
.case-story { display:block; }
.case-story-copy { max-width:64rem;margin-inline:auto; }
.case-story-copy > h2 { max-width:24ch;text-wrap:balance; }
.case-story-copy > h2+p { max-width:52rem;line-height:1.65; }
.case-fact > span { font-size:.9375rem;letter-spacing:0;text-transform:none; }
.case-gallery figcaption { display:block;font-size:.9375rem;line-height:1.5; }
.case-development { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2.5rem,7vw,7rem); }
.development-heading h2 { margin:0; }
.case-chapter { margin:0;font-size:clamp(1.45rem,2vw,1.85rem);line-height:1.2;letter-spacing:-.035em;font-weight:600;color:#111; }
.development-copy article > p { margin-top:1rem; }
.process-steps h4 { margin:0;font-size:1.35rem;font-weight:550;line-height:1.25;letter-spacing:-.03em;color:#111; }
.step-number { font-size:.9375rem; }
.case-results { padding:clamp(2rem,4vw,4rem); }
.result-body { margin-top:0;gap:clamp(2rem,5vw,5rem); }
.result-evidence p { font-size:1rem; }
.boom-contact h2,.about-concise h2 { text-wrap:balance; }
.boom-contact-button { font-size:.9rem;letter-spacing:.015em; }
.boom-footer-brand p { font-size:.875rem; }

/* Contact controls have their own layout, including theme resets on mobile. */
.contact-page .contact-main { width:100%;margin:0 auto; }
.contact-heading h1 { margin-top:0;text-wrap:balance; }
.contact-aside a { font-size:1rem;overflow-wrap:anywhere; }
.contact-page .boom-form { display:grid;gap:1.75rem;align-content:start; }
.contact-page .boom-form label { margin:0;font-size:1rem;font-weight:500; }
.contact-page .boom-form :is(input,select,textarea) { box-sizing:border-box;min-width:0;max-width:100%;font-size:16px;line-height:1.5;padding:.85rem .15rem; }
.contact-page .boom-form input[type="hidden"] { display:none; }
.contact-page .boom-form select { appearance:none;-webkit-appearance:none;padding-right:2rem;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 8 5 5 5-5' fill='none' stroke='%23111' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right center/1.25rem; }
.contact-page .boom-form textarea { min-height:10rem; }
.contact-page .boom-form-send { display:flex;flex-direction:column;align-items:stretch;gap:1rem; }
.contact-page .boom-form-send p { order:2;max-width:none;margin:0;font-size:.875rem;line-height:1.5; }
.contact-page .boom-form-submit { width:100%;min-height:3.75rem;margin:0;padding:.4rem .4rem .4rem 1.2rem;border-radius:0;font-size:.9375rem;line-height:1.3;letter-spacing:0;text-align:left; }
.contact-page .boom-form-submit > [data-submit-label] { white-space:nowrap; }
.contact-page .boom-form-status { margin:0;overflow-wrap:anywhere;font-size:1rem; }
@media(max-width:760px) {
  .contact-page .contact-main { padding:2.5rem var(--gutter) 4rem; }
  .contact-heading { padding-bottom:2rem; }
  .contact-heading h1 { font-size:clamp(2.1rem,8.4vw,3.8rem);letter-spacing:-.055em; }
  .contact-conversation { grid-template-columns:minmax(0,1fr);gap:2.5rem;padding-top:2rem; }
  .contact-aside { max-width:none; }
  .contact-aside a { margin-top:.65rem; }
  .contact-page .boom-form-row { grid-template-columns:minmax(0,1fr);gap:1.75rem; }
  .contact-page .boom-form-submit { gap:.75rem; }
}
@media(max-width:650px) {
  .project-index-shell { grid-template-rows:90px minmax(0,1fr); }
  .index-project { grid-template-columns:minmax(0,1fr) 1.5rem; }
  .home-page .services-intro > p { max-width:29rem;font-size:1.0625rem; }
  .home-page .work-card-title h3 { font-size:1.3rem; }
  .about-concise .about-hero-bottom > p { margin-left:0;font-size:1.125rem; }
  .difference-principles article { display:block; }
  .case-development { display:block; }
  .development-heading { margin-bottom:2.5rem; }
  .case-chapter { font-size:1.45rem; }
  .case-results { padding:2rem 1.5rem; }
  .result-body { margin-top:0; }
  .boom-footer-brand p { font-size:.8rem; }
}
@media(max-width:500px) {
  .boom-form-row { grid-template-columns:1fr;gap:0; }
  .boom-form-send { flex-direction:column;align-items:stretch; }
  .boom-form-send p { max-width:none; }
  .boom-form-submit { width:100%; }
}

@media(prefers-reduced-motion:reduce) {
  .boom-form-submit .bb-arrow { transition:none;transform:none!important; }
  .boom-contact-button,
  .boom-contact-button .bb-arrow { transition:none; }
  .boom-contact-button:is(:hover,:focus-visible) .bb-arrow { transform:none; }
}

@media(forced-colors:active) {
  .boom-contact-card,
  .boom-contact-button,
  .boom-contact-button-icon { border:1px solid CanvasText; }
}

/* New cases use the established layout and the supplied brand artwork. */
.editorial-case .case-cover.branx-cover { display:grid;place-items:center;background:#faf7f1;aspect-ratio:16/9; }
.editorial-case .case-cover.branx-cover img { width:min(70%,42rem);height:auto;object-fit:contain; }
.editorial-case .case-cover.svador-cover { background:#edeae3; }
.editorial-case .case-cover.eyewear-cover { background:#f3f2ef; }
.work-card-link[href*="branx"] .work-card-image { background:#faf7f1; }
.work-card-link[href*="branx"] .work-card-image img { object-fit:contain;padding:1.5rem; }
.index-preview img[data-preview-image="branx"] { object-fit:contain;background:#faf7f1; }
.case-development[hidden] { display:none!important; }