/* Your own CSS goes here. This file is loaded after site.css on every page, so anything you write here wins. */

/* Rolling "Some of our clients" banner (logos) */
.marquee-clients .marquee-item { gap: 0; padding-right: clamp(40px, 5vw, 88px); }
.marquee-clients .marquee-item img {
  height: 56px; width: auto; max-width: none; flex: none; display: block;
  opacity: 0.55; filter: grayscale(1);
  transition: opacity 0.3s, filter 0.3s;
}
.marquee-clients .marquee-item:hover img { opacity: 1; filter: none; }
.marquee-clients .marquee-track { animation-duration: 60s; }
.clients-band { padding: 3rem 0; }
.clients-head { padding-bottom: 2rem; }
@media (min-width: 1024px) {
  .clients-band { padding: 4.5rem 0; }
  .clients-head { padding-bottom: 2.75rem; }
  .marquee-clients .marquee-item img { height: 84px; }
  .marquee-clients .marquee-item { padding-right: clamp(64px, 7vw, 120px); }
}

/* Homepage manifesto figure: capped height, aside aligned with the page container */
.manifesto-figure { aspect-ratio: 16 / 9; max-height: 520px; width: 100%; }
.manifesto-aside { padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width: 640px)  { .manifesto-aside { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .manifesto-aside { padding-left: max(3rem, calc((100vw - 1480px) / 2 + 3rem)); padding-right: 2.5rem; } }

/* No sideways scrolling on phones: clip anything that pokes past the viewport
   (ghost numbers, bleeding photos) and keep the off-screen drawer out of the scroll area. */
html, body { overflow-x: clip; }
.drawer:not(.is-open) { visibility: hidden; transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s 0.5s; }

/* Mobile drawer: bigger numbered links, contact details fill the space, actions pinned to the bottom */
.drawer > div { display: flex; flex-direction: column; height: 100%; }
.drawer-nav { padding: 1.5rem 1.25rem 0; }
.drawer-link { font-size: clamp(28px, 8.5vw, 40px); padding: 0.8rem 0; display: flex; align-items: baseline; gap: 0.9rem; }
.drawer-no { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.2em; color: #ff4d00; flex: none; }
.drawer-info { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; align-content: start; padding: 2rem 1.25rem; font-size: 14px; line-height: 1.5; color: #b8bdc3; overflow-y: auto; }
.drawer-info .label { margin-bottom: 0.4rem; }
.drawer-info a { color: #f3f1ec; word-break: break-word; }
.drawer-info a:hover { color: #ff4d00; }
.drawer-actions { margin-top: auto; }
@media (min-width: 640px) { .drawer-nav, .drawer-info { padding-left: 2rem; padding-right: 2rem; } }
@media (max-height: 640px) { .drawer-info { display: none; } .drawer-link { font-size: clamp(26px, 7vw, 32px); padding: 0.6rem 0; } }

/* The mobile drawer never shows at desktop width */
@media (min-width: 1024px) { .drawer { display: none !important; } }

/* Process / milestone timeline on phones: vertical line, marker, year + title on one row */
@media (max-width: 639px) {
  ol:has(> .process-step) { row-gap: 0; }
  .process-step { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.75rem;
                  padding: 0 0 1.5rem 1.5rem; border-left: 1px solid rgba(11, 15, 20, 0.25); }
  .process-step:last-child { padding-bottom: 0; }
  .process-step::before { left: -6px; top: 0.3em; width: 11px; height: 11px; }
  .process-step::after { display: none; }
  .process-step .step-no { font-size: 40px; line-height: 1; }
  .process-step h3 { font-size: 24px; margin-top: 0; }
  .process-step p { flex-basis: 100%; margin-top: 0.4rem; }
}

/* Services page on phones/tablets: photo first, titles wrap naturally, tighter spacing */
@media (max-width: 1023px) {
  main section[id] > .container-site > div:has(> figure.frame) { order: -1; }
  main section[id] > .container-site { row-gap: 1.75rem; }
  main section[id] h2 br { display: none; }
  main section[id] h2 { font-size: clamp(40px, 11vw, 64px); }
  main section[id] figure.frame { aspect-ratio: 16 / 10; }
  main section[id] figure.frame + .label { margin-top: 0.75rem; }
}
@media (max-width: 767px) {
  .clip-diag-br { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%); }
  .clip-diag-tl { clip-path: polygon(28px 0, 100% 0, 100% 100%, 0 100%, 0 28px); }
}

/* ==========================================================================
   Professional polish pass
   ========================================================================== */

/* Utility bar above the main header (desktop only) */
.topbar { display: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background: rgba(11, 15, 20, 0.55); }
.topbar-inner { display: flex; align-items: center; gap: 2rem; height: 34px; font-family: "IBM Plex Mono", ui-monospace, monospace;
                font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(243, 241, 236, 0.6); white-space: nowrap; }
.topbar-right { margin-left: auto; display: flex; gap: 0; }
.topbar-right > * { padding: 0 1rem; border-left: 1px solid rgba(255, 255, 255, 0.12); }
.topbar-right > *:last-child { padding-right: 0; }
.topbar a:hover { color: #ff4d00; }
.site-header.is-solid .topbar, .site-header.is-scrolled .topbar { background: rgba(11, 15, 20, 0.9); }
@media (min-width: 1024px) { .topbar { display: block; } }

/* Technical-drawing grid over hero photos: faint 12-column rules */
.hero-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.25));
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.25));
}

/* Section eyebrows: "01 / Section" followed by a short rule */
:is(section, header) p.label.text-signal:first-child:not(.hero-creds)::after {
  content: ""; display: inline-block; width: 40px; height: 1px; margin-left: 14px;
  background: currentColor; opacity: 0.7; vertical-align: middle;
}
.drawer-info p.label::after, .contact-channels p.label::after { display: none !important; }

/* Slightly restrained display sizes: still big, less shouty */
.display-hero { font-size: clamp(56px, 10vw, 132px); }
.display-1    { font-size: clamp(44px, 7vw, 104px); }
.stat-value, .step-no { font-variant-numeric: tabular-nums; }

/* Headlines get a hair more air from the eyebrow */
:is(section, header) p.label.text-signal + h1, :is(section, header) p.label.text-signal + h2 { margin-top: 1.5rem; }

/* Testimonials: client portrait beside the attribution */
.quote-footer { display: flex; align-items: center; gap: 1rem; }
.quote-avatar { width: 48px; height: 48px; object-fit: cover; flex: none; filter: grayscale(1); }

/* Body copy a touch darker for readability on paper */
.text-ink\/80 { color: rgba(11, 15, 20, 0.86); }
.text-ink\/75 { color: rgba(11, 15, 20, 0.8); }

/* Image frames get a hairline edge so photos sit on the page like plates */
.frame, .project-tile, .gallery-item, .news-card .frame { outline: 1px solid rgba(11, 15, 20, 0.12); outline-offset: -1px; }
.bg-ink .frame, .bg-ink .project-tile, .bg-ink .gallery-item { outline-color: rgba(255, 255, 255, 0.1); }

/* Buttons: sharper hover, arrow follows */
.btn { transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; }
.btn-primary:hover, .btn-primary-dark:hover { box-shadow: inset 0 0 0 1px #ff4d00; }

/* Header: a hairline under the bar even over the hero, once scrolled */
.site-header.is-scrolled { border-bottom-color: rgba(255, 255, 255, 0.12); }
@media (max-width: 1279px) { .topbar-mid { display: none; } }
@media (max-width: 639px) { .hero-creds { display: none; } }

/* Services list rows: hover band and bar sit outside the text column; bigger arrow */
@media (min-width: 1024px) {
  .service-row { padding-left: 1.5rem; padding-right: 1.5rem; margin-left: -1.5rem; margin-right: -1.5rem; }
}
.service-row > .label:last-child { font-size: 22px; line-height: 1; letter-spacing: 0; color: #7c838b;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s; }
.service-row:hover > .label:last-child { color: #ff4d00; transform: translateX(6px); }

/* Testimonials: three quote cards with a hairline grid */
.testimonials-quotes { display: grid; grid-template-columns: 1fr; border-top: 1px solid rgba(255,255,255,0.12); }
.quote { position: relative; padding: 2.25rem 0 2rem; border-bottom: 1px solid rgba(255,255,255,0.12); display: flex; flex-direction: column; }
.quote .quote-mark { font-size: 96px; line-height: 0.5; height: 0.5em; display: block; margin-bottom: 1.25rem; }
.quote .quote-text { font-size: 18px; line-height: 1.55; color: rgba(243,241,236,0.9); flex: 1; }
.quote .quote-footer { margin-top: 1.75rem; }
@media (min-width: 768px) {
  .testimonials-quotes { grid-template-columns: repeat(3, 1fr); column-gap: 0; border-top: none; }
  .quote { padding: 0 2rem 0 2rem; border-bottom: none; border-left: 1px solid rgba(255,255,255,0.12); }
  .quote:first-child { padding-left: 0; border-left: none; }
  .quote:last-child { padding-right: 0; }
  .quote .quote-text { font-size: 17px; }
}
@media (min-width: 1280px) { .quote .quote-text { font-size: 19px; } .quote { padding-left: 2.5rem; padding-right: 2.5rem; } }

/* Footer wordmark sized for the four-letter CICL mark */
.wordmark-giant { font-size: clamp(120px, 36vw, 600px); letter-spacing: 0.04em; }