/* ==========================================================================
   [AGENCY NAME] — minimalist agency site
   Converted from the canvas design. Colors come from PHP-set CSS variables
   (see index.php, $site['ink'] / $site['accent']) so they can be edited
   in one place.
   ========================================================================== */

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

:root {
  --mute: #5B6270;
  --line: #E6E8EC;
  --soft: #F5F6F8;
  --gutter: clamp(24px, 6vw, 120px);
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #FFFFFF;
  color: var(--ink);
  font-family: 'DM Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
img, svg { display: block; max-width: 100%; }

.d { font-family: 'Bricolage Grotesque', system-ui, sans-serif; }

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* links with an animated underline */
.ul {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  padding-bottom: 3px;
  transition: background-size .3s ease;
}
.ul:hover, .ul:focus-visible { background-size: 100% 1px; }

/* pill / arrow buttons */
.btn {
  transition: transform .2s ease, background-color .2s ease;
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }
.btn svg { transition: transform .2s ease; }
.btn:hover svg, .btn:focus-visible svg { transform: translateX(4px); }

.btn-solid {
  height: 56px;
  padding: 0 28px;
  border-radius: 5px;
  background: var(--ink);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 500;
  border: 0;
}
.btn-outline {
  height: 44px;
  padding: 0 22px;
  border-radius: 5px;
  border: 1px solid var(--ink);
  display: inline-flex;
  align-items: center;
  font-weight: 500;
}

/* service rows */
.row { transition: padding-left .25s ease; border-top: 1px solid var(--line); }
.row:last-child { border-bottom: 1px solid var(--line); }
.row:hover { padding-left: 10px; }
.row a, .row > span {
  height: 52px;
  display: flex;
  align-items: center;
  font-size: 18px;
}

/* work cards */
.card .thumb { transition: transform .5s ease; }
.card:hover .thumb, .card:focus-visible .thumb { transform: scale(1.02); }

/* entrance animation for the hero */
.rise { animation: rise .9s cubic-bezier(.2,.8,.2,1) both; }
.r1 { animation-delay: .05s; }
.r2 { animation-delay: .15s; }
.r3 { animation-delay: .28s; }
.r4 { animation-delay: .4s; }
@keyframes rise {
  0%   { opacity: 0; transform: translateY(22px); }
  100% { opacity: 1; transform: translateY(0); }
}

.hero-dots {
  animation: dotsfade 1.1s ease .1s both;
  mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
}
@keyframes dotsfade { 0% { opacity: 0; } 100% { opacity: 1; } }
.hero-dots-accent { animation: dotsaccent 1.4s cubic-bezier(.2,.8,.2,1) .35s both; }
@keyframes dotsaccent {
  0%   { opacity: 0; transform: scale(.4); }
  100% { opacity: .55; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-dots, .hero-dots-accent { animation: none; }
  .hero-dots-accent { opacity: .55; transform: none; }
  .rise { animation: none; }
  .btn, .btn svg, .row, .card .thumb, .ul { transition: none; }
}

/* ==========================================================================
   Layout sections
   ========================================================================== */

.site-header {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.brand-name { font-weight: 600; font-size: 22px; letter-spacing: -.02em; }

.site-nav { display: flex; align-items: center; gap: 40px; font-size: 16px; }
.site-nav .nav-links { display: flex; align-items: center; gap: 40px; }

.hero {
  position: relative;
  min-height: 640px;
  display: grid;
  overflow: hidden;
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: 48px;
}
.hero-art {
  grid-area: 1 / 1;
  display: grid;
  overflow: hidden;
  pointer-events: none;
}
.hero-art svg { grid-area: 1 / 1; width: 100%; height: 100%; }
.hero-content {
  grid-area: 1 / 1;
  align-self: start; /* don't stretch to the full hero height — that's what
    let "justify-content: space-between" push a huge gap between the
    buttons and the "We build on" row; now it's just their natural,
    fixed gap below */
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--mute); }
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

.hero-title {
  margin-top: 28px;
  max-width: 1100px;
  font-weight: 500;
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: 1.03;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.accent { color: var(--accent); }

.hero-sub {
  margin-top: 32px;
  max-width: 560px;
  font-size: 20px;
  line-height: 1.55;
  color: var(--mute);
}

.hero-actions { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 32px; }

.hero-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.hero-stack > span {
  font-size: 15px;
  font-weight: 500;
  color: var(--mute);
  margin-right: 2px;
}
.hero-stack strong {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  border-radius: 19px;
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -.01em;
  transition: border-color .15s ease, background-color .15s ease;
}
.hero-stack strong:hover { border-color: var(--accent); background: #FFFFFF; }

section { border-top: 1px solid var(--line); }
.section-pad { padding: 96px 0; }
.eyebrow-label { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.section-title {
  font-weight: 500;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -.035em;
}

.clients { padding-top: 40px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 28px; }
.client-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.client-name { font-weight: 600; font-size: 24px; letter-spacing: -.02em; color: #8A90A0; }
.client-logo-img {
  height: 100px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .5;
  transition: opacity .15s ease, filter .15s ease;
}
.client-logo-img:hover { opacity: 1; filter: grayscale(0); }

.services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 96px; margin-top: 56px; }
.service h3 { font-weight: 500; font-size: 32px; letter-spacing: -.03em; }
.service p { margin-top: 12px; font-size: 17px; line-height: 1.6; color: var(--mute); max-width: 460px; }
.service-list { margin-top: 28px; display: flex; flex-direction: column; }
.service-cta { margin-top: 28px; }

.work-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.card { display: flex; flex-direction: column; gap: 20px; }
.thumb { aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; display: grid; position: relative; }
.thumb-tag {
  grid-area: 1 / 1;
  justify-self: start; align-self: start; margin: 20px;
  height: 28px; padding: 0 12px; border-radius: 14px; background: #FFFFFF;
  font-size: 13px; font-weight: 500; display: flex; align-items: center;
  z-index: 1;
}
.thumb-shape { grid-area: 1 / 1; }
.thumb-shape--circle {
  justify-self: center; align-self: center;
  width: 34%; aspect-ratio: 1; border-radius: 50%;
}
.thumb-shape--arch {
  justify-self: center; align-self: end;
  width: 38%; aspect-ratio: 2 / 3;
  border-radius: 999px 999px 0 0;
}
.thumb-shape--pills {
  justify-self: center; align-self: center;
  display: flex; flex-direction: column; gap: 12px;
}
.thumb-shape--pills span {
  height: 32px; border-radius: 16px;
}
.thumb-shape--pills span:nth-child(1) { width: 150px; }
.thumb-shape--pills span:nth-child(2) { width: 100px; }
.thumb-shape--pills span:nth-child(3) { width: 125px; }
.thumb img, .work-modal-thumb-image img, .work-modal-photo-thumb img {
  grid-area: 1 / 1;
  width: 100%; height: 100%;
  object-fit: cover;
}
.card-title { font-weight: 500; font-size: 22px; letter-spacing: -.02em; }
.card-meta { font-size: 15px; color: var(--mute); }

/* work cards are <button>s (they open the work popup via JS) styled
   to look exactly like the .card link they replaced */
button.card {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; margin: 0; padding: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  width: 100%;
}

.process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 56px; }
.process-step { border-top: 1px solid var(--ink); padding-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.process-num { font-size: 14px; color: var(--mute); }
.process-step h3 { font-weight: 500; font-size: 28px; letter-spacing: -.03em; }
.process-step p { font-size: 17px; line-height: 1.6; color: var(--mute); }

.testimonial { padding-top: 96px; padding-bottom: 96px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.testimonial-quote {
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.3;
  letter-spacing: -.02em;
  text-wrap: balance;
  max-width: 820px;
}
.testimonial-who { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 16px; text-align: left; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--soft); border: 1px solid var(--line); flex-shrink: 0; }

.cta { padding-top: 96px; padding-bottom: 96px; display: flex; flex-direction: column; align-items: flex-start; gap: 36px; }
.cta-title { font-weight: 500; font-size: clamp(32px, 4.5vw, 64px); line-height: 1.03; letter-spacing: -.04em; }
.cta-title .accent { margin-left: .06em; } /* offsets the tight tracking so the "?" doesn't touch the "d" */
.cta p { max-width: 520px; font-size: 20px; line-height: 1.55; color: var(--mute); }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }

.site-footer {
  padding-top: 48px;
  padding-bottom: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 32px; font-size: 15px; color: var(--mute); }
.footer-copy { font-size: 15px; color: var(--mute); }

/* ==========================================================================
   Contact / Start a project pages
   ========================================================================== */

.page-hero { padding-top: 72px; padding-bottom: 24px; }
.page-title {
  margin-top: 16px;
  max-width: 800px;
  font-weight: 500;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.page-sub { margin-top: 20px; max-width: 560px; font-size: 19px; line-height: 1.6; color: var(--mute); }

.contact-layout {
  padding-top: 56px;
  padding-bottom: 96px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 96px;
  align-items: start;
}
.contact-info { display: flex; flex-direction: column; gap: 36px; }
.contact-item { display: flex; flex-direction: column; gap: 6px; }
.contact-label { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.contact-value { font-size: 19px; font-weight: 500; }
.contact-social { display: flex; flex-wrap: wrap; gap: 6px; font-weight: 500; font-size: 19px; }
.dot-sep { color: var(--mute); margin: 0 8px; }

.next-steps { display: flex; flex-direction: column; gap: 36px; }
.next-step { display: flex; gap: 20px; }
.next-step-num { font-weight: 500; font-size: 20px; color: var(--accent); flex-shrink: 0; width: 36px; }
.next-step-title { font-weight: 500; font-size: 19px; }
.next-step-desc { margin-top: 6px; font-size: 16px; line-height: 1.55; color: var(--mute); }

/* ==========================================================================
   Lead form
   ========================================================================== */

.lead-form { display: flex; flex-direction: column; gap: 24px; }

.form-banner {
  padding: 16px 20px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.5;
}
.form-banner--ok { background: var(--soft); border: 1px solid var(--line); }
.form-banner--error { background: #FDF1EE; border: 1px solid #F3C9BE; }

.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.form-field { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.form-row .form-field { margin-top: 0; }
.form-field:first-child { margin-top: 0; }

.form-field label { font-size: 14px; font-weight: 500; }
.form-field .optional { font-weight: 400; color: var(--mute); }

.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 16px;
  width: 100%;
  transition: border-color .2s ease;
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.form-field--error input,
.form-field--error textarea { border-color: #E0553D; }
.field-error { font-size: 13px; color: #C23B25; }

.form-footer { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.form-note { font-size: 14px; color: var(--mute); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .services-grid, .work-grid { grid-template-columns: 1fr; gap: 48px; }
  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { min-height: auto; }
  .contact-layout { grid-template-columns: 1fr; gap: 56px; }
}

@media (max-width: 700px) {
  .site-nav .nav-links { display: none; }
  .process-grid { grid-template-columns: 1fr; }
  .section-pad, .testimonial, .cta, .contact-layout { padding-top: 40px; padding-bottom: 64px; }
  .hero-art { opacity: .6; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
}

/* ==========================================================================
   "View all work" popup
   ========================================================================== */

.work-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.work-modal[hidden] { display: none; }

.work-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 33, 61, .6);
  animation: work-modal-fade .2s ease both;
}

.work-modal-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1040px;
  height: min(760px, 92vh);
  background: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(20, 33, 61, .35);
  animation: work-modal-rise .25s cubic-bezier(.2, .8, .2, 1) both;
}
.work-modal-dialog:focus { outline: none; }

@keyframes work-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes work-modal-rise {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .work-modal-backdrop, .work-modal-dialog { animation: none; }
}

.work-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 2;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color .15s ease;
}
.work-modal-close:hover, .work-modal-close:focus-visible { background: var(--soft); }

.work-modal-main { flex: 1 1 auto; display: flex; flex-direction: column; overflow-y: auto; }

/* The main photo: always fills the full WIDTH of the available box,
   scaling up or down to match it, with its height following naturally
   from its own aspect ratio. A short/wide photo won't fill the height
   (the project's Bg color shows above/below it); a tall photo will
   often be taller than the box, and rather than shrinking it down to
   "fit" (which would waste horizontal width), this box scrolls
   vertically so the photo is still shown at full width. */
.work-modal-image {
  position: relative;
  flex: 1 1 0%;
  display: flex;
  align-items: flex-start;        /* fallback for browsers without "safe center" */
  align-items: safe center;       /* centers when it fits, pins to top (never hides the top) when it needs to scroll */
  justify-content: center;
  min-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  box-sizing: border-box;
}
.work-modal-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* this project's own photos (only rendered when there's more than one) */
.work-modal-photos {
  display: flex;
  gap: 8px;
  padding: 14px 32px 0;
  overflow-x: auto;
  flex-shrink: 0;
}
.work-modal-photos:empty { display: none; padding: 0; }
.work-modal-photo-thumb {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  display: grid;
  padding: 0;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color .15s ease, opacity .15s ease;
  opacity: .55;
}
.work-modal-photo-thumb:hover { opacity: .85; }
.work-modal-photo-thumb[aria-current="true"] {
  border-color: var(--accent);
  opacity: 1;
}

.work-modal-info {
  flex-shrink: 0;
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.work-modal-tag {
  font-size: 13px; font-weight: 500; color: var(--accent);
  text-transform: uppercase; letter-spacing: .06em;
}
.work-modal-title { font-weight: 500; font-size: 26px; letter-spacing: -.02em; }
.work-modal-meta { font-size: 15px; color: var(--mute); }
.work-modal-text { margin-top: 6px; font-size: 16px; line-height: 1.6; color: var(--mute); max-width: 60ch; }

body.work-modal-open { overflow: hidden; }

@media (max-width: 760px) {
  .work-modal-dialog {
    height: min(85vh, 720px);
  }
}