/* ==========================================================
   Digital Pro — riso print homepage
   Change the three colours below to restyle the whole site.
   ========================================================== */
:root {
  --paper: #F3F1ED;   /* page background */
  --ink:   #6EC6EA;   /* Miami blue: headlines, bands, buttons */
  --text:  #17344D;   /* navy: body copy and small print */
  --ghost: #CBC7C1;   /* faded background words */
  --muted: #BDB8B1;   /* grey second line in headlines */
  --frame: #E2DFDA;   /* image placeholder fill */
  --max:   1360px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  overflow-x: hidden;
  position: relative;
}

/* Film / riso grain over the whole page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: url("../images/grain.svg");
  opacity: 0.18;
  mix-blend-mode: multiply;
  z-index: 50;
}

a { color: var(--text); }
a:hover { color: #2E8FBF; }

img { display: block; width: 100%; height: 100%; object-fit: cover; }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.caps { text-transform: uppercase; }
.small { font-size: 0.74rem; }
.center { text-align: center; }
.rel { position: relative; z-index: 2; }
.multiply { mix-blend-mode: multiply; }

/* ---------- Display type ---------- */
.display {
  color: var(--ink);
  font-weight: 800;
  font-stretch: 82%;
  text-transform: uppercase;
  line-height: 0.83;
  letter-spacing: -0.045em;
  margin: 0;
}
.display--xl  { font-size: clamp(3.2rem, 15.4vw, 14.6rem); }
.display--l   { font-size: clamp(3.2rem, 13.4vw, 12.6rem); }
.display--m   { font-size: clamp(2.6rem, 7.4vw, 7rem); line-height: 0.86; letter-spacing: -0.04em; }
.display--num { font-size: clamp(3.4rem, 10vw, 9rem); line-height: 0.85; }
.display .muted { color: var(--muted); }
.display sup { font-size: 0.14em; letter-spacing: 0; vertical-align: top; }

.ghost {
  position: absolute;
  left: 24px; right: 24px;
  color: var(--ghost);
  filter: blur(1.2px);
  font-weight: 800;
  font-stretch: 85%;
  text-transform: uppercase;
  line-height: 0.84;
  letter-spacing: -0.045em;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
.ghost .spread { display: flex; justify-content: space-between; gap: 0.2em; }

/* ---------- Pills & buttons ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 8px; text-transform: uppercase; font-size: 0.66rem; font-weight: 700; }
.pill { border: 1.5px solid var(--ink); border-radius: 999px; padding: 2px 10px; }
.pill--square { border-radius: 4px; }

.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--text);
  text-decoration: none;
  padding: 14px 28px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 48px;
}
.btn:hover { background: var(--text); color: var(--paper); }

/* ---------- Header ---------- */
.site-header {
  position: relative; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding-top: 18px; padding-bottom: 18px;
  text-transform: uppercase; font-size: 0.72rem;
}
.logo { text-decoration: none; font-weight: 800; font-stretch: 85%; font-size: 1.05rem; letter-spacing: -0.02em; }
.site-nav { display: flex; flex-wrap: wrap; gap: 20px; }
.site-nav a { text-decoration: none; }
.site-nav .pill { border-color: var(--ink); padding: 2px 12px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: 8px; padding-bottom: 64px; }
.hero .ghost { top: 30%; font-size: clamp(3rem, 13vw, 12.5rem); }
.blob {
  position: absolute; right: 2%; top: -2%;
  width: clamp(120px, 17vw, 250px); aspect-ratio: 1 / 1;
  border-radius: 47% 53% 42% 58% / 55% 41% 59% 45%;
  background: var(--ink);
  mix-blend-mode: multiply; opacity: 0.9; filter: blur(1.5px);
  z-index: 2;
}
.hero h1 { text-shadow: 3px 2px 0 rgba(23, 52, 77, 0.14); }
.hero-intro { max-width: 560px; margin: 36px auto 0; text-align: center; text-transform: uppercase; font-size: 0.74rem; line-height: 1.3; }
.hero-intro p { margin: 0 0 16px; }
.hero-spec { margin-top: 120px; text-align: center; }
.hero-spec .spec-main { margin: 10px 0 0; text-transform: uppercase; font-size: 1.15rem; line-height: 1.1; font-weight: 700; }
.hero-spec .spec-sub  { margin: 6px 0 0; text-transform: uppercase; font-size: 0.74rem; }
.hero-spec .pills { justify-content: center; margin-top: 22px; }
.hero-spec .btn { margin-top: 28px; }

/* ---------- Camera frames ---------- */
.cams { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; padding-top: 24px; }
.cam { position: relative; aspect-ratio: 4 / 5; background: var(--frame); overflow: hidden; }
.cam::after { content: ""; position: absolute; inset: 10px; border: 1.5px solid var(--ink); pointer-events: none; }
.cam--ink { background: var(--ink); }
.cam--ink::after { border-color: var(--paper); }
.cam-label, .cam-tc { position: absolute; margin: 0; font-size: 0.7rem; font-weight: 700; z-index: 2; }
.cam-label { top: 20px; left: 20px; text-transform: uppercase; }
.cam-tc { bottom: 20px; right: 20px; }

/* ---------- One call band ---------- */
.band { position: relative; z-index: 2; margin-top: 112px; background: var(--ink); color: var(--text); }
.band .inner { padding-top: 64px; padding-bottom: 56px; }
.band .display { color: var(--text); }
.band-row { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; }
.band-row p { margin: 0; max-width: 420px; text-transform: uppercase; font-size: 0.78rem; }
.steps { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; text-transform: uppercase; font-size: 0.72rem; font-weight: 700; }
.steps li { border: 1.5px solid var(--text); border-radius: 999px; padding: 4px 12px; }

/* ---------- Why ---------- */
.why { position: relative; padding-top: 120px; padding-bottom: 40px; }
.why .ghost { top: 90px; font-size: clamp(3rem, 15vw, 14rem); }
.three { margin-top: 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px 48px; text-transform: uppercase; font-size: 0.76rem; text-align: center; }
.three h3 { margin: 0 0 8px; font-weight: 800; font-size: 1.1rem; }
.three p { margin: 0; }

/* ---------- Kit ---------- */
.kit { padding-top: 120px; padding-bottom: 80px; }
.lede { margin: 28px 0 0; max-width: 460px; text-transform: uppercase; font-size: 0.78rem; }
.kit-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 2px solid var(--ink); }
.kit-item { padding: 20px 24px 32px 0; border-bottom: 1px solid var(--ink); }
.kit-item .num { margin: 0; color: var(--ink); font-weight: 800; font-stretch: 82%; font-size: 5.4rem; line-height: 0.9; letter-spacing: -0.05em; }
.kit-item h3 { margin: 6px 0 12px; text-transform: uppercase; font-weight: 800; font-size: 1rem; }
.kit-item p { margin: 0; text-transform: uppercase; font-size: 0.74rem; }

/* ---------- Process ---------- */
.process { padding-top: 40px; padding-bottom: 100px; }
.process > .display { margin-bottom: 48px; }
.takes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.take { border: 2px solid var(--ink); padding: 24px; }
.take .label { margin: 0 0 6px; text-transform: uppercase; font-size: 0.7rem; font-weight: 700; }
.take h3 { margin: 0 0 14px; color: var(--ink); font-weight: 800; font-stretch: 82%; text-transform: uppercase; font-size: 3rem; line-height: 0.9; letter-spacing: -0.04em; }
.take p { margin: 0; text-transform: uppercase; font-size: 0.74rem; }
.deliver { margin-top: 72px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px 72px; text-transform: uppercase; }
.deliver h3 { margin: 0 0 12px; color: var(--ink); font-weight: 800; font-stretch: 82%; font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 0.86; letter-spacing: -0.04em; }
.deliver p { margin: 0; font-size: 0.76rem; max-width: 380px; }
.deliver ul { margin: 0; padding: 0; list-style: none; font-size: 0.8rem; font-weight: 700; border-bottom: 1.5px solid var(--ink); }
.deliver li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1.5px solid var(--ink); }

/* ---------- Clients ---------- */
.clients { position: relative; padding-top: 40px; padding-bottom: 120px; }
.clients .ghost { position: static; padding: 0; font-size: clamp(2.8rem, 10vw, 9.4rem); line-height: 0.86; }
.clients-over { position: absolute; left: 0; right: 0; top: 34%; z-index: 2; text-align: center; }
.clients-over .spec-main { margin: 8px 0 0; text-transform: uppercase; font-size: 1.1rem; line-height: 1.1; font-weight: 700; }
.clients-over .spec-sub { margin: 6px auto 0; max-width: 420px; text-transform: uppercase; font-size: 0.72rem; }

/* ---------- Our show ---------- */
.show { padding-top: 40px; padding-bottom: 112px; }
.show-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px 72px; align-items: center; }
.show-still { position: relative; aspect-ratio: 4 / 5; }
.show-still .offset { position: absolute; inset: 0; transform: translate(10px, 10px); background: var(--ink); mix-blend-mode: multiply; }
.show-still .photo { position: absolute; inset: 0; background: #DCD8D2; }
.show-still .pill { position: absolute; top: 16px; left: 16px; margin: 0; background: var(--paper); text-transform: uppercase; font-size: 0.68rem; font-weight: 700; z-index: 2; }
.show .tag { display: inline-block; margin: 0 0 16px; text-transform: uppercase; font-size: 0.7rem; font-weight: 700; }
.show .display { font-size: clamp(3.2rem, 8.4vw, 8rem); }
.show .strap { margin: 24px 0 12px; text-transform: uppercase; font-weight: 800; font-size: 1.15rem; }
.show .body { margin: 0 0 12px; text-transform: uppercase; font-size: 0.76rem; }
.show .btn { margin-top: 16px; }

/* ---------- Enquire ---------- */
.enquire { padding-top: 40px; padding-bottom: 96px; }
.enquire .display { font-size: clamp(3.6rem, 17vw, 16rem); line-height: 0.82; letter-spacing: -0.05em; margin-bottom: 40px; }
.enquire-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px 80px; text-transform: uppercase; }
.enquire-grid .intro { margin: 0 0 28px; max-width: 420px; font-size: 0.82rem; }
.contact-big { margin: 0; font-weight: 800; font-size: 1.5rem; line-height: 1.15; }
.contact-big a { text-decoration: none; }
.contact-form { display: flex; flex-direction: column; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 0.7rem; font-weight: 700; }
.field input, .field textarea {
  border: 0; border-bottom: 2px solid var(--ink);
  padding: 10px 0; font: inherit; font-size: 1.1rem;
  background: transparent; color: var(--text); border-radius: 0;
}
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--text); }
.field textarea { resize: vertical; }
.contact-form .btn { align-self: flex-start; }

/* ---------- Footer ---------- */
.site-footer { position: relative; padding-bottom: 28px; }
.site-footer .ghost { position: static; padding: 0; font-size: clamp(3.6rem, 17.5vw, 16.4rem); line-height: 0.82; letter-spacing: -0.05em; }
.footer-bar {
  position: absolute; left: 24px; right: 24px; bottom: 28px; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: flex-end;
  text-transform: uppercase; font-size: 0.66rem; font-weight: 700;
}

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
  .hero .ghost { display: none; }
  .hero-spec { margin-top: 72px; }
  .band { margin-top: 72px; }
  .why, .kit { padding-top: 80px; }
  .clients-over { position: relative; top: auto; margin-top: -2em; }
  .footer-bar { position: static; margin-top: 16px; }
}