/* ==========================================================================
   Null Studio — stylesheet
   Class-first. No ID selectors, so nothing here depends on a unique element.
   Requires tokens.css to be loaded first.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img,
video {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: var(--color-text);
  text-decoration: none;
}

h1,
h2,
h3 {
  font-weight: 400;
  line-height: var(--lh-heading);
}

/* --------------------------------------------------------------------------
   2. Base typography
   -------------------------------------------------------------------------- */

.u-serif,
em {
  font-family: var(--font-serif);
  font-style: italic;
}

/* Section heading — the big uppercase display type used across pages. */
.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-title-lg);
  line-height: var(--lh-heading);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   3. Utilities
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* position:fixed (not absolute) so it cannot peek out of a positioned parent */
.skip-link {
  position: fixed;
  top: -100px;
  left: var(--sp-2);
  z-index: 10001;
  padding: var(--sp-1) var(--sp-2);
  background: var(--color-text);
  color: var(--color-bg);
  transition: top 0.15s var(--ease);
}

.skip-link:focus {
  top: var(--sp-2);
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* On the dark panels a blue ring disappears — switch to white. */
.menu :focus-visible,
.slider :focus-visible,
.clients :focus-visible,
.tile-panel--dark :focus-visible {
  outline-color: #ffffff;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  padding: var(--sp-4) var(--pad-x);
}

/* Full-bleed dark bands (team slider, clients) sit outside .container. */
.band {
  width: 100%;
  background: var(--color-text);
  padding: var(--sp-6) var(--pad-x);
}

.band .section-title {
  color: var(--color-bg);
  margin-bottom: var(--sp-5);
}

/* Two bands stacked so a dark section can run straight into the footer
   without a seam. */
.band--tight {
  padding-bottom: 0;
}

.band--flush {
  padding-top: 0;
}

/* --------------------------------------------------------------------------
   5. Site chrome — logo, menu, footer
   -------------------------------------------------------------------------- */

.site-logo {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-logo);
  font-weight: 500;
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

.menu-toggle {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  padding: 0 var(--pad-x);
  line-height: 1;
}

.menu-toggle__icon {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2rem + 5vw, 6rem);
  line-height: 1.1;
  color: var(--color-text);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon {
  transform: rotate(45deg);
  color: #ffffff;
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-1);
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(20px);
  opacity: 0;
  /* visibility (not just opacity) so the links leave the tab order when shut.
     It flips to `visible` instantly on open — otherwise focusing the first
     link right after opening silently fails — and is delayed on close so the
     fade-out is still visible. */
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}

.menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease), visibility 0s linear 0s;
}

/* Links rest 1.5rem to the right so they can slide left on hover; clip that
   overhang rather than let it push past the viewport edge. */
.menu {
  overflow: hidden;
}

/* JS-off fallback navigation (see the <noscript> block in each page). */
.nav-fallback {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  padding: var(--sp-2) var(--pad-x);
  border-bottom: 1px solid var(--color-line);
}

.nav-fallback a {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.menu__link {
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: var(--fs-menu);
  line-height: 1.05;
  color: var(--color-bg);
  transform: translateX(1.5rem);
  transition: transform var(--dur) var(--ease);
}

.menu__link::after {
  content: "+";
  padding-left: 0.5rem;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.menu__link:hover,
.menu__link:focus-visible {
  transform: translateX(-0.75rem);
}

.menu__link:hover::after,
.menu__link:focus-visible::after {
  opacity: 1;
}

.menu__link[aria-current="page"]::after {
  opacity: 1;
}

/* Stop the page scrolling behind the open overlay. */
body.is-menu-open {
  overflow: hidden;
}

.site-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-4);
  padding-top: var(--sp-5);
}

.site-foot p,
.site-foot a {
  font-size: var(--fs-sm);
  text-transform: uppercase;
}

.site-foot__mark {
  font-family: var(--font-display);
}

.site-foot a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-foot--light p,
.site-foot--light a {
  color: var(--color-bg);
}

@media (max-width: 900px) {
  .site-foot {
    flex-direction: column;
  }
}

/* --------------------------------------------------------------------------
   6. Article — the shared image + copy block (index, work, work-sample)
   -------------------------------------------------------------------------- */

.article {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: var(--sp-5);
}

.article-img {
  width: 100%;
  height: var(--h-hero);
}

.article-img img,
.article-img a {
  display: block;
  width: 100%;
  height: 100%;
}

.article-img img {
  object-fit: cover;
}

.article-img--tall {
  height: var(--h-feature);
}

.article-img--short {
  height: var(--h-short);
}

.article-copy {
  display: flex;
  gap: var(--sp-2);
  width: 85%;
  margin: var(--sp-2) 0;
}

.article-title {
  flex-shrink: 0;
  margin-right: var(--sp-5);
}

.article-title p {
  margin: var(--sp-2) 0 0.75rem;
}

.article-title a,
.article-title .article-title__text {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-article);
  line-height: var(--lh-heading);
  text-transform: uppercase;
}

.article-title span {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-body);
}

.article-text p {
  font-size: var(--fs-lead);
  margin: var(--sp-2) 0 0.75rem;
}

.article-link {
  display: inline-block;
  width: max-content;
  margin: var(--sp-2) 0;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: 2rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.article-link:hover,
.article-link:focus-visible {
  background: var(--color-text);
  color: var(--color-bg);
}

.article-row {
  display: flex;
  gap: var(--gap-col);
  width: 100%;
  margin: var(--sp-4) 0;
}

.article-col {
  flex: 1;
}

.article-col .article-copy {
  flex-direction: column;
  width: 100%;
}

@media (max-width: 900px) {
  .article-copy {
    width: 100%;
    flex-direction: column;
  }

  .article-title {
    margin-right: 0;
  }

  .article-row {
    flex-direction: column;
  }
}

/* --------------------------------------------------------------------------
   7. Home hero
   -------------------------------------------------------------------------- */

.hero {
  display: flex;
  gap: var(--sp-4);
  width: 75%;
  margin-bottom: var(--sp-4);
}

.hero__copy p {
  font-size: var(--fs-lead);
  font-weight: 500;
}

.hero__copy span {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: inherit;
}

@media (max-width: 900px) {
  .hero {
    width: 100%;
    flex-direction: column;
    gap: var(--sp-2);
    margin-bottom: var(--sp-6);
  }
}

/* --------------------------------------------------------------------------
   8. About — intro, services, clients
   -------------------------------------------------------------------------- */

.about-hero-img {
  width: 100%;
  height: var(--h-hero);
  margin: var(--sp-4) 0;
}

.about-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-copy {
  display: flex;
  gap: var(--gap-col);
  width: 100%;
  margin-bottom: var(--sp-5);
}

.about-copy > * {
  flex: 1;
}

.about-copy__text {
  padding-right: clamp(0rem, 8vw, 10rem);
}

.about-copy__text p + p {
  margin-top: var(--sp-2);
}

.about-copy__text p {
  font-size: var(--fs-lead);
}

.services {
  margin: var(--sp-4) 0 var(--sp-7);
}

.services-cols {
  display: flex;
  gap: var(--gap-col);
  width: 100%;
  margin: var(--sp-4) 0;
}

.services-cols > * {
  flex: 1;
}

.service h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-title-sm);
  margin: var(--sp-2) 0;
}

.service p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-sm);
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-col);
  width: 75%;
  margin: var(--sp-5) auto var(--sp-7);
}

.client {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  padding: var(--sp-4);
}

.client img {
  max-height: 100%;
  object-fit: contain;
}

@media (max-width: 900px) {
  .about-copy,
  .services-cols {
    flex-direction: column;
  }

  .about-copy__text {
    padding-right: 0;
  }

  .clients-grid {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   9. Team slider
   -------------------------------------------------------------------------- */

.slider {
  position: relative;
  width: 100%;
  padding: 0 0.5rem;
}

.slider__btn {
  position: absolute;
  top: calc(var(--h-card-img) / 2);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  color: #ffffff;
  transform: translateY(-50%);
  transition: transform 0.1s linear;
}

.slider__btn:active {
  transform: translateY(-50%) scale(0.85);
}

.slider__btn svg {
  width: 2.5rem;
  height: 2.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
}

.slider__btn--prev {
  left: 0;
}

.slider__btn--next {
  right: 0;
}

.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% / 4) - 12px);
  gap: var(--sp-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  list-style: none;
}

.carousel::-webkit-scrollbar {
  display: none;
}

/* Applied while JS repositions the scroll for the infinite loop. */
.carousel.no-transition {
  scroll-behavior: auto;
}

.carousel.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.carousel.is-dragging .team-card {
  cursor: grabbing;
  user-select: none;
}

.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: var(--h-card);
  padding-bottom: 15px;
  scroll-snap-align: start;
}

.team-card__img {
  width: 100%;
  height: var(--h-card-img);
}

.team-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card h3 {
  font-size: var(--fs-lead);
  margin: var(--sp-3) 0 var(--sp-1);
  color: var(--color-bg);
}

.team-card p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--color-bg);
}

@media (max-width: 900px) {
  .carousel {
    grid-auto-columns: calc((100% / 2) - 9px);
  }
}

@media (max-width: 600px) {
  .carousel {
    grid-auto-columns: 100%;
  }
}

/* --------------------------------------------------------------------------
   10. Careers — job disclosures
   -------------------------------------------------------------------------- */

.jobs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  margin: var(--sp-4) 0;
}

.job {
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--color-line);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.job:hover,
.job:focus-within {
  background: var(--color-text);
  color: var(--color-bg);
}

.job__toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 500px;
  padding: var(--sp-2);
  text-align: left;
}

.job__title {
  font-family: var(--font-display);
  font-size: var(--fs-title-md);
  line-height: var(--lh-heading);
  text-transform: uppercase;
}

.job__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-lead);
  font-weight: 500;
}

.job__sign {
  font-family: var(--font-display);
  transition: transform var(--dur) var(--ease);
}

.job__toggle[aria-expanded="true"] .job__sign {
  transform: rotate(45deg);
}

.job__panel {
  padding: 0 var(--sp-2) var(--sp-2);
}

.job__panel p {
  margin-bottom: var(--sp-2);
}

.job:hover .article-link,
.job:focus-within .article-link {
  border-color: var(--color-bg);
}

.job:hover .article-link:hover,
.job:focus-within .article-link:focus-visible {
  background: var(--color-bg);
  color: var(--color-text);
}

@media (max-width: 1100px) {
  .jobs {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .jobs {
    grid-template-columns: 1fr;
  }

  .job__toggle {
    min-height: 260px;
  }
}

/* --------------------------------------------------------------------------
   11. Contact tiles
   -------------------------------------------------------------------------- */

.tiles {
  display: flex;
  gap: var(--sp-2);
  width: 100%;
  margin: var(--sp-4) 0;
  min-height: calc(95vh - 10rem);
}

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}

.tile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-2);
  border: 1.5px solid var(--color-line);
}

.tile-panel h2 {
  font-family: var(--font-display);
  font-size: var(--fs-title-md);
  line-height: var(--lh-heading);
  text-transform: uppercase;
}

.tile-panel a {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.tile-panel--dark {
  background: var(--color-text);
  border-color: var(--color-text);
}

.tile-panel--dark h2,
.tile-panel--dark p,
.tile-panel--dark a {
  color: var(--color-bg);
}

.tile-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  align-items: flex-start;
}

@media (max-width: 900px) {
  .tiles {
    flex-direction: column;
    min-height: 0;
  }

  .tile > img {
    height: clamp(240px, 60vw, 420px);
  }

  .tile-panel {
    min-height: 260px;
  }
}

/* --------------------------------------------------------------------------
   12. Work sample — video, collapsible copy, image rows
   -------------------------------------------------------------------------- */

.video {
  position: relative;
  width: 100%;
  margin: var(--sp-4) auto;
}

.video video {
  width: 100%;
  height: auto;
  background: var(--color-text);
}

/* Sized to the icon, not the whole frame, so it never sits on top of the
   native video controls. */
.video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  transition: opacity var(--dur) var(--ease);
}

.video__play svg {
  width: clamp(50px, 10vw, 100px);
  height: clamp(50px, 10vw, 100px);
  fill: #ffffff;
}

.video.is-playing .video__play {
  opacity: 0;
  pointer-events: none;
}

.article-copy--work {
  width: 90%;
}

.article-text h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-title-sm);
  margin-bottom: var(--sp-2);
}

/* Collapsed only once JS says so — with JS off the full text stays readable. */
.collapsible.is-enhanced {
  position: relative;
  overflow: hidden;
  padding-bottom: 0.5em;
  transition: height 0.5s ease-out;
}

.project-images {
  margin-bottom: var(--sp-5);
}

.img-row {
  display: flex;
  gap: var(--gap-col);
  width: 100%;
  margin: var(--sp-4) 0;
}

.img-row > * {
  flex: 1;
}

.project-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-page {
  margin-bottom: var(--sp-6);
}

.work-page a {
  font-family: var(--font-display);
  font-size: var(--fs-title-lg);
  line-height: var(--lh-heading);
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .img-row {
    flex-direction: column;
  }
}