:root {
  --accent: #a9c7ce;
  --deepest: #142127;
  --dark: #182b31;
  --masthead: #1e3238;
  --ink: #1c2e33;
  --light: #f4f6f6;
  --muted-light: #a9bcbf;
  --muted-dark: #5c6a6d;
  --mono-dark: #3f6d79;
  --border-light: #d8e0e1;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--deepest);
  color: var(--light);
  font-family: "Work Sans", sans-serif;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--accent);
}

::selection {
  background: var(--accent);
  color: var(--deepest);
}

.masthead {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  background: var(--masthead);
}

.masthead::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
  z-index: 1;
}

.hero-watermark {
  position: absolute;
  top: -15%;
  right: -4%;
  z-index: 0;
  width: auto;
  height: 130%;
  opacity: 0.07;
  filter: grayscale(1) brightness(1.6);
  pointer-events: none;
}

.navbar,
.hero {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1408px;
  margin: 0 auto;
  padding-right: 64px;
  padding-left: 64px;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  padding-bottom: 28px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-mark {
  display: block;
  width: auto;
  height: 26px;
}

.brand-name {
  color: var(--light);
  font-family: "Archivo", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  color: #cdd8da;
  font-size: 15px;
}

.btn-accent {
  display: inline-block;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 10px 24px -10px rgba(169, 199, 206, 0.45);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.btn-accent:hover {
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(169, 199, 206, 0.55);
}

.nav-contact {
  padding: 9px 20px;
}

.hero {
  padding-top: 110px;
  padding-bottom: 130px;
}

.hero h1 {
  max-width: 760px;
  margin: 0 0 24px;
  color: var(--light);
  font-family: "Archivo", sans-serif;
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  text-transform: uppercase;
}

.hero p {
  max-width: 520px;
  margin: 0 0 36px;
  color: var(--muted-light);
  font-size: 18px;
  line-height: 1.6;
}

.hero-contact,
.cta-contact {
  padding: 14px 30px;
}

.work-section {
  padding: 96px 64px 110px;
  background: var(--light);
}

.section-inner,
.cta-section,
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.work-title {
  margin: 0 0 48px;
  color: var(--ink);
  font-family: "Archivo", sans-serif;
  font-size: 32px;
  font-weight: 800;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px 48px;
}

/* ---- Project media carousel ---- */

.case-media {
  position: relative;
  margin-bottom: 22px;
}

.case-media-viewport {
  position: relative;
  overflow: hidden;
}

.case-media-track {
  display: flex;
  aspect-ratio: 16 / 10;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.case-media-track::-webkit-scrollbar {
  display: none;
}

.case-slide {
  display: flex;
  flex: 0 0 100%;
  align-items: center;
  justify-content: center;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: repeating-linear-gradient(
    135deg,
    #e3eaeb 0,
    #e3eaeb 16px,
    var(--light) 16px,
    var(--light) 32px
  );
}

/* Screenshots are shown whole — never cropped. Desktop captures share the
   frame's 16:10 ratio, so they fill it edge to edge. */
.case-slide img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Phone captures are far taller than the frame, so they sit side by side at
   full height. This slide drops the frame entirely — the phones read as objects
   resting on the page rather than art inside a card. */
.case-slide-devices {
  gap: 4%;
  padding: 2% 4%;
  border: 0;
  background: transparent;
}

/* iPhone bezel via a transparent-screen PNG overlay: the screenshot is
   positioned to fill the shell's screen cutout (measured from the source
   PNG's pixels, cropped tight to the phone body — see img/iphone.png), then
   the shell renders on top so its opaque frame, notch and buttons mask the
   screenshot's square edges. No radius on the shot itself: the bezel's own
   opaque corner material already covers the sliver between a square corner
   and the hole's true curve, and rounding it further just cuts a visible
   notch out of real screenshot content plus forces an extra corner-clip
   render pass on an already-scaled image. */
/* At desktop widths the slot is inert — the phone-frames stay direct flex
   children of the devices figure, exactly as if the wrapper weren't there.
   Only the phone breakpoint gives it a box, to promote each phone to its own
   carousel page. */
.phone-slot {
  display: contents;
}

.phone-frame {
  position: relative;
  height: 100%;
  aspect-ratio: 641 / 1314;
}

.phone-frame .phone-shot {
  position: absolute;
  top: 1.75%;
  left: 4.21%;
  width: 91.26%;
  height: 96.5%;
  border-radius: 20% / 3%;
  object-fit: cover;
}

.phone-frame .phone-shell {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* A desktop capture that's narrower than the 16:10 frame (so it would
   letterbox inside the striped card) sits frameless instead: no border or
   background competing with the empty space, just softened corners. Unlike
   case-slide-devices, this skips the phone-frame padding/gap so the image
   still fills the slide edge-to-edge like the other desktop screenshots. */
.case-slide-plain {
  border: 0;
  background: transparent;
}

.case-slide-plain img {
  border-radius: 12px;
}

.case-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(20, 33, 39, 0.62);
  backdrop-filter: blur(4px);
  color: var(--light);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.case-nav-prev {
  left: 14px;
}

.case-nav-next {
  right: 14px;
}

.case-nav svg {
  width: 15px;
  height: 15px;
}

.case-media:hover .case-nav,
.case-nav:focus-visible {
  opacity: 1;
}

.case-nav:hover {
  background: rgba(20, 33, 39, 0.85);
}

.case-media-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
}

.case-dots {
  display: flex;
  gap: 8px;
}

.case-dot {
  width: 22px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--border-light);
  cursor: pointer;
  transition: background 0.2s ease;
}

.case-dot[aria-current="true"] {
  background: var(--mono-dark);
}

.case-dot:hover {
  background: #9fb3b7;
}

.case-counter {
  margin: 0;
  color: var(--mono-dark);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.case-label {
  padding: 6px 12px;
  border: 1px solid var(--border-light);
  background: var(--light);
  color: #7c8b8e;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.case-card h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: "Archivo", sans-serif;
  font-size: 21px;
  font-weight: 700;
}

.case-stack {
  margin-bottom: 14px;
  color: var(--mono-dark);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.case-card p {
  max-width: 420px;
  margin: 0;
  color: var(--muted-dark);
  font-size: 15px;
  line-height: 1.6;
}

/* The feature card sets its media beside the copy so the wider frame has room
   without turning into a letterboxed band. */
.case-card-wide {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  margin-bottom: 64px;
}

.case-card-wide .case-media {
  margin-bottom: 0;
}

.case-card-wide h3 {
  font-size: 24px;
}

.case-card-wide p {
  max-width: 480px;
}

.services-section {
  padding: 104px 64px 112px;
  background: var(--dark);
}

.section-eyebrow {
  margin-bottom: 34px;
  color: var(--accent);
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.services-line {
  max-width: 960px;
  margin: 0;
  color: var(--light);
  font-family: "Archivo", sans-serif;
  font-size: clamp(26px, 2.9vw, 37px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.22;
}

.services-line span {
  white-space: nowrap;
  transition: color 0.25s ease;
}

.services-line span:hover {
  color: var(--accent);
}

.services-line i {
  padding: 0 0.14em;
  color: var(--accent);
  font-style: normal;
  font-weight: 500;
  opacity: 0.5;
}

.case-grid .case-card:nth-child(2) {
  transition-delay: 0.12s;
}

.cta-section p[data-reveal] {
  transition-delay: 0.08s;
}

.cta-section a[data-reveal] {
  transition-delay: 0.16s;
}

.services-line[data-reveal] { transition-delay: 0.08s; }

.closing-section,
.site-footer {
  background: var(--deepest);
}

.closing-section {
  padding: 110px 64px 0;
}

.cta-section {
  padding-bottom: 56px;
  border-bottom: 1px solid #2a3d43;
}

.cta-section h2 {
  margin: 0 0 16px;
  color: var(--light);
  font-family: "Archivo", sans-serif;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.2;
}

.cta-section p {
  margin: 0 0 32px;
  color: var(--muted-light);
  font-size: 17px;
  line-height: 1.6;
}

.site-footer {
  padding: 0 64px;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 32px 0;
}

.footer-inner span {
  color: #8fa3a6;
  font-family: "Archivo", sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.footer-inner a {
  color: #5f6f73;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
}

.footer-inner a:hover {
  color: var(--accent);
}

@media (max-width: 899px) {
  .navbar,
  .hero {
    padding-right: 24px;
    padding-left: 24px;
  }

  .navbar {
    flex-wrap: wrap;
    gap: 20px 28px;
  }

  .nav-links {
    gap: 20px;
  }

  .hero {
    padding-top: 80px;
    padding-bottom: 90px;
  }

  .hero h1 {
    font-size: clamp(38px, 8vw, 52px);
  }

  .work-section,
  .services-section,
  .closing-section,
  .site-footer {
    padding-right: 24px;
    padding-left: 24px;
  }

  .work-section {
    padding-top: 72px;
    padding-bottom: 80px;
  }

  .case-grid,
  .case-card-wide {
    grid-template-columns: 1fr;
  }

  .case-card-wide {
    gap: 22px;
  }

  .case-card-wide .case-media {
    margin-bottom: 0;
  }

  .services-line {
    font-size: clamp(20px, 4.8vw, 26px);
    line-height: 1.32;
  }

  /* Stacked without the slash separators the line reads as one block of
     text, so each service gets a marker and its own row of breathing room. */
  .services-line span {
    position: relative;
    display: block;
    padding: 0 0 16px 26px;
    white-space: normal;
  }

  .services-line span::before {
    content: '';
    position: absolute;
    top: 0.5em;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--accent);
  }

  .services-line span:last-of-type {
    padding-bottom: 0;
  }

  .services-line i {
    display: none;
  }

  .services-section {
    padding-top: 72px;
    padding-bottom: 76px;
  }

  .closing-section {
    padding-top: 80px;
  }
}

@media (max-width: 560px) {
  .navbar {
    align-items: flex-start;
  }

  .nav-links {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
  }

  .nav-contact {
    padding-right: 16px;
    padding-left: 16px;
  }

  .hero h1 {
    font-size: 36px;
  }

  /* On a phone screen, several mockups side by side leave each one only
     ~100px wide. The frame goes portrait so phones get real height, and each
     phone is promoted to its own carousel page so it also gets the full
     width. Desktop captures then sit centred in the taller frame, so their
     card chrome is dropped — the leftover space reads as page whitespace
     rather than a half-empty box. */
  .case-media-track {
    aspect-ratio: 1 / 1.2;
  }

  .case-slide {
    border: 0;
    background: transparent;
  }

  .case-slide > img {
    border-radius: 10px;
  }

  .case-slide-devices {
    display: contents;
  }

  .phone-slot {
    display: flex;
    flex: 0 0 100%;
    align-items: center;
    justify-content: center;
    padding: 3% 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .case-nav {
    display: none;
  }

  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}