/* ============================================================
   Iconic Link Digital
   Tokens follow the studio design system, with one change:
   the warm neutrals (paper #f7f4ef, clay #ede6dc, line #dfd8cc)
   are replaced with cool blue-greys. Everything else is as drawn.
   ============================================================ */

:root {
  /* Ground */
  --paper:      #edf0f6;
  --clay:       #e0e6f0;
  --white:      #ffffff;

  /* Ink */
  --ink:              #101114;
  --ink-soft:         #474d58;
  --ink-muted:        #5c626e;
  --on-ink:           #edf0f6;
  --ink-muted-on-ink: #a9aeb8;

  /* Action */
  --cobalt:       #1b4ff0;
  --cobalt-press: #1438c4;
  --cobalt-deep:  #0e2a94;
  --blue-tint:    #e2e8f7;
  --on-blue:      #ffffff;
  --on-blue-soft: #d8e0fb;

  /* Lines */
  --line:            #d5dbe6;
  --line-strong:     #7c8496;
  --line-ink:        #2e323a;
  --line-ink-strong: #5b616b;
  --focus:           #3b6aff;

  /* Form errors: 6.5:1 on white, 5.8:1 on its tint */
  --danger:      #b42318;
  --danger-tint: #fcebea;

  /* Families */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:    "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Spacing, 4px base */
  --s1:4px;   --s2:8px;   --s3:12px;  --s4:16px;
  --s5:24px;  --s6:32px;  --s7:40px;  --s8:56px;
  --s9:72px;  --s10:96px; --s11:128px;--s12:160px;

  /* Radius */
  --r-sm:4px; --r-md:8px; --r-lg:14px; --r-xl:24px; --r-pill:999px;

  /* Widths */
  --container: 1120px;
  --narrow:    720px;
  --measure:   66ch;
  --nav:       76px;

  /* Shadow */
  --shadow-card: 0 1px 2px rgba(16,17,20,.04), 0 8px 24px rgba(16,17,20,.06);
  --shadow-lift: 0 2px 4px rgba(16,17,20,.05), 0 18px 48px rgba(16,17,20,.10);

  /* Rhythm */
  --band:      clamp(72px, 9vw, 128px);
  --band-tall: clamp(80px, 12vw, 160px);

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Every paragraph's spacing is set explicitly by its own rule or by a
   flex gap. Zero the browser default so an unstyled <p> cannot inflate
   its box and break the alignment of the row it sits in. */
p { margin: 0; }

::selection { background: var(--cobalt); color: var(--on-blue); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---------- Layout primitives ---------- */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s5);
}

.band { padding-block: var(--band); }

.measure { max-width: var(--measure); }

/* Read by screen readers and search engines, not drawn. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Pages. One document, six routes. */
.page { display: none; }
.page.is-active { display: block; }

/* ---------- Type ---------- */

.eyebrow {
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-stretch: 112%;
  color: var(--cobalt);
}

.display, .h1, .h2, .h3, .h4 {
  font-family: var(--display);
  margin: 0;
  text-wrap: balance;
}

.display {
  font-size: clamp(40px, 7.1vw, 72px);
  line-height: .95;
  font-weight: 600;
  letter-spacing: -.02em;
}

.h1 {
  font-size: clamp(34px, 5.4vw, 56px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -.018em;
}

.h2 {
  font-size: clamp(27px, 4vw, 40px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -.014em;
}

.h3 {
  font-size: clamp(22px, 2.8vw, 28px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.01em;
}

.h4 { font-size: 21px; line-height: 1.3; font-weight: 600; }

.quote {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}

.lede {
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

.body   { font-size: 17px; line-height: 1.65; margin: 0; }
.body-sm{ font-size: 15px; line-height: 1.6;  margin: 0; }
.caption{ font-size: 13px; line-height: 1.5;  margin: 0; color: var(--ink-muted); }

.label {
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0;
}

/* ---------- The link rule: the recurring mark ----------
   Drawn with a background gradient so nothing needs to be
   absolutely positioned. Grows from the left on load or hover. */

.rule-mark {
  background-image: linear-gradient(var(--cobalt), var(--cobalt));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0% .09em;
  transition: background-size .95s var(--ease) .45s;
}
.is-loaded .rule-mark { background-size: 100% .09em; }

/* Inline text link, same motif at hairline weight. */
.link {
  color: var(--cobalt);
  text-decoration: none;
  background-image: linear-gradient(var(--cobalt), var(--cobalt));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: color .2s var(--ease);
}
.link:hover { color: var(--cobalt-press); }

/* The "go to the full page" link that closes a section. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 15px;
  font-weight: 600;
  color: var(--cobalt);
  text-decoration: none;
  background-image: linear-gradient(var(--cobalt), var(--cobalt));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  padding-bottom: 3px;
  transition: background-size .34s var(--ease), color .2s var(--ease);
}
.arrow-link:hover { background-size: 100% 2px; color: var(--cobalt-press); }
.arrow-link .arrow { transition: transform .3s var(--ease); }
.arrow-link:hover .arrow { transform: translateX(4px); }

.arrow-link-ink {
  color: var(--on-ink);
  background-image: linear-gradient(var(--on-ink), var(--on-ink));
}
.arrow-link-ink:hover { color: var(--white); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 17px 28px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .22s var(--ease),
              border-color .22s var(--ease),
              color .22s var(--ease),
              transform .22s var(--ease);
}

.btn-primary {
  background: var(--cobalt);
  color: var(--on-blue);
}
.btn-primary:hover { background: var(--cobalt-press); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { border-color: var(--ink); background: rgba(16,17,20,.035); }

.btn-on-ink {
  background: var(--on-ink);
  color: var(--ink);
}
.btn-on-ink:hover { background: var(--white); transform: translateY(-2px); }

.btn-ghost-ink {
  background: transparent;
  color: var(--on-ink);
  border-color: var(--line-ink-strong);
}
.btn-ghost-ink:hover { border-color: var(--on-ink); background: rgba(237,240,246,.06); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 40;
  background: rgba(237,240,246,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px rgba(16,17,20,.05);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: 64px;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .34em;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark-link {
  background-image: linear-gradient(var(--cobalt), var(--cobalt));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  padding-bottom: 1px;
}
/* "Digital" sits one step down the ink scale from "Iconic Link", not
   two, and one weight below it. Enough separation to read as
   secondary, close enough to read as one wordmark. */
.wordmark-tail { color: var(--ink-soft); font-weight: 500; }

.nav {
  display: flex;
  align-items: center;
  gap: var(--s7);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding-block: 4px;
  background-image: linear-gradient(var(--cobalt), var(--cobalt));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size .32s var(--ease), color .2s var(--ease);
}
.nav-link:hover { background-size: 100% 2px; color: var(--cobalt); }
.nav-link.is-current { color: var(--cobalt); background-size: 100% 2px; }

.menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
}
.nav-bar {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.menu-btn[aria-expanded="true"] .nav-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .nav-bar:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .nav-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-panel { display: none; border-top: 1px solid var(--line); }
.mobile-panel[data-open="true"] { display: block; }
.mobile-links {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: var(--s4) 0 var(--s5);
  gap: var(--s1);
}
.mobile-link {
  display: block;
  padding: var(--s3) 0;
  font-size: 21px;
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.mobile-link.is-current { color: var(--cobalt); }
.mobile-cta { margin-top: var(--s3); width: 100%; }

/* ---------- Media ----------
   Photography sits in a media box at radius-xl, cropped with
   object-fit so the source ratio never dictates the layout. */

.media {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--clay);
}
.media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-wide     { aspect-ratio: 3 / 2; }
.media-portrait { aspect-ratio: 4 / 5; }
.media-band     { aspect-ratio: 12 / 5; }
.media-sm       { border-radius: var(--r-lg); }

.figure { margin: 0; }
.figure-caption {
  margin-top: var(--s4);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 52ch;
}

/* ---------- Split: text beside an image ---------- */

.split {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s8) var(--s7);
  align-items: center;
}
.split-text  { flex: 1 1 420px; min-width: 0; }
.split-media { flex: 1 1 360px; min-width: 0; }
.split-top   { align-items: flex-start; }
.split-reverse .split-media { order: -1; }

/* ---------- Hero ---------- */

/* Home hero, set on photography. The layout, type scale, spacing and
   buttons are unchanged: only the ground changes, so every colour below
   switches to the on-ink token it already had a counterpart for.
   The scrim is weighted to the left, where the headline sits, and the
   cobalt glow stays on top so the brand accent survives the change. */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--band-tall) var(--band);
  color: var(--on-ink);
  background-color: var(--ink);
  background-image:
    radial-gradient(60% 58% at 80% 6%, rgba(27,79,240,.22), rgba(27,79,240,0) 70%),
    linear-gradient(to right,
      rgba(11,14,19,.93) 0%,
      rgba(11,14,19,.87) 32%,
      rgba(11,14,19,.64) 60%,
      rgba(11,14,19,.52) 100%),
    linear-gradient(to bottom,
      rgba(11,14,19,.38) 0%,
      rgba(11,14,19,.14) 45%,
      rgba(11,14,19,.42) 100%),
    url("../images/hero-session.jpg");
  background-size: cover;
  background-position: 50% center;
  background-repeat: no-repeat;
}

.hero .eyebrow { color: var(--on-blue-soft); }
.hero .display { color: var(--on-ink); }
.hero .lede    { color: var(--ink-muted-on-ink); }

/* This ghost button sits on photography rather than flat ink, where
   --line-ink-strong reads too faint. Lift the edge to sit between it
   and --ink-muted-on-ink. Hover still resolves to the full --on-ink,
   and every other ghost button on the site is untouched. */
.hero .btn-ghost-ink { border-color: #828892; }

/* The hero copy sits above the photograph's scrim layers. */
.hero > .wrap { position: relative; z-index: 2; }

.hero-eyebrow { margin-bottom: var(--s5); }

.hero-title { margin-bottom: var(--s6); max-width: 15ch; }

.hero-lede { max-width: 54ch; margin-bottom: var(--s8); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-bottom: var(--s10);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4) var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line-ink);
  list-style: none;
  margin: 0;
}
.hero-meta li {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  font-size: 15px;
  color: var(--ink-muted-on-ink);
}
.dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--cobalt);
  flex: 0 0 auto;
}
/* Pin the dot to the first line so a wrapped label at 320px keeps it aligned. */
.hero-meta .dot { margin-top: calc((1lh - 6px) / 2); }

/* Interior page hero. Same rhythm, one h1 instead of the display. */
.page-hero {
  padding-block: var(--band-tall) var(--band);
  background-image:
    radial-gradient(52% 48% at 86% 6%, rgba(27,79,240,.12), rgba(27,79,240,0) 72%),
    repeating-linear-gradient(to right, rgba(16,17,20,.05) 0 1px, transparent 1px 112px);
}
.page-hero .eyebrow { margin-bottom: var(--s5); }
.page-hero-title { margin-bottom: var(--s6); max-width: 17ch; }
.page-hero-lede { max-width: 56ch; }

/* ---------- Statement band on cobalt ---------- */

/* Architectural photograph under a cobalt wash. The flat cobalt layer
   sits at 80%, so a fifth of the building's own light and texture comes
   through: enough to read the curve and the glazing, not enough to
   fight the type. The soft top and bottom gradient adds depth and holds
   white body copy at 4.5:1 or better even over the brightest glass.
   The cobalt background-color stays as the fallback, so the band is
   exactly as it was if the photograph never loads. */
.statement {
  background-color: var(--cobalt);
  background-image:
    linear-gradient(to right,
      rgba(6,20,80,0)   0%,
      rgba(6,20,80,.25) 6%,
      rgba(6,20,80,.25) 94%,
      rgba(6,20,80,0)   100%),
    linear-gradient(to bottom,
      rgba(6,20,80,.16) 0%,
      rgba(6,20,80,.04) 46%,
      rgba(6,20,80,.20) 100%),
    linear-gradient(rgba(27,79,240,.68), rgba(27,79,240,.68)),
    url("../images/statement-arch.jpg");
  background-size: cover;
  background-position: center 46%;
  background-repeat: no-repeat;
  color: var(--on-blue);
  padding-block: var(--band);
}
.statement .eyebrow { color: var(--on-blue-soft); }

.statement-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s8) var(--s9);
}
.statement-lead { flex: 1 1 520px; min-width: 0; }
.statement-aside { flex: 1 1 330px; min-width: 0; }

.statement-quote {
  font-size: clamp(27px, 4vw, 40px);
  line-height: 1.22;
  letter-spacing: -.012em;
  margin-top: var(--s5);
  color: var(--on-blue);
}

.statement-body {
  color: var(--on-blue-soft);
  font-size: 17px;
  line-height: 1.75;
  max-width: 46ch;
}
.statement-body + .statement-body { margin-top: var(--s4); }

.statement-sign {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid rgba(216,224,251,.34);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--on-blue-soft);
}
.statement-link { margin-top: var(--s6); }


/* ---------- Section heading block ---------- */

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5) var(--s7);
  margin-bottom: var(--s8);
}
.section-head-text { flex: 1 1 420px; min-width: 0; }
.section-head .eyebrow { margin-bottom: var(--s4); }
.section-head-note {
  flex: 0 1 300px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.section-foot { margin-top: var(--s8); }

/* ---------- Services: one interactive list, no cards ---------- */

.services-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

/* This band follows the cobalt statement, whose bottom padding already
   supplies half the gap above the eyebrow. Step the top rhythm down one
   notch (--s11 to --s10, slope scaled to match) and pull the heading
   block closer to the divider, so heading, note, rule and services read
   as one group. Scoped to #services so the Work band keeps its rhythm. */
#services {
  padding-block: clamp(var(--s8), 6.75vw, var(--s10)) var(--band);
}
#services .section-head {
  margin-bottom: var(--s7);
}

.service {
  display: block;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--line);
  padding: var(--s6) 0;
  background-image: linear-gradient(var(--blue-tint), var(--blue-tint));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  transition: background-size .5s var(--ease), padding-inline .4s var(--ease);
}
.service:hover, .service:focus-visible {
  background-size: 100% 100%;
  padding-inline: var(--s5);
}

.service-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s4) var(--s6);
}

/* One outline mark per service. Drawn inline at a single 24px box and a
   single 1.6 stroke, coloured from the accent token, so the set reads as
   one family rather than seven borrowed glyphs. Aligned to the top of
   the row rather than the baseline, since an empty box has no useful
   baseline of its own. */
.service-icon {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 26px;
  height: 26px;
  margin-top: 3px;
  color: var(--cobalt);
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.service-icon svg { display: block; width: 100%; height: 100%; }
.service:hover .service-icon,
.service:focus-visible .service-icon { color: var(--cobalt-press); transform: translateY(-2px); }

.service-title {
  flex: 1 1 260px;
  min-width: 0;
  transition: color .3s var(--ease);
}
.service:hover .service-title,
.service:focus-visible .service-title { color: var(--cobalt); }

.service-copy {
  flex: 1 1 380px;
  min-width: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 52ch;
}

/* Always visible. --cobalt-press is 7.7:1 on --paper and 7.2:1 on the
   --blue-tint hover wash, so the link clears WCAG AA in every state. */
.service-arrow {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--cobalt-press);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  transition: color .3s var(--ease), text-decoration-color .3s var(--ease);
}
.service-arrow-mark {
  display: inline-block;
  transition: transform .3s var(--ease);
}
.service:hover .service-arrow,
.service:focus-visible .service-arrow {
  color: var(--cobalt-deep);
  text-decoration-color: currentColor;
}
.service:hover .service-arrow-mark,
.service:focus-visible .service-arrow-mark { transform: translateX(4px); }
.service:focus-visible {
  outline: 2px solid var(--cobalt-press);
  outline-offset: 2px;
}

.ticks {
  list-style: none;
  margin: var(--s5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.ticks li {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.tick {
  flex: 0 0 auto;
  width: 7px;
  height: 12px;
  margin-top: 4px;
  border-right: 2px solid var(--cobalt);
  border-bottom: 2px solid var(--cobalt);
  transform: rotate(45deg);
}
/* About "What to expect": bolder opening phrase, a little more air between items. */
.ticks-lead { gap: var(--s4); }
.ticks-lead li > span:last-child { min-width: 0; overflow-wrap: break-word; }
.ticks-lead strong { font-weight: 600; color: var(--ink); }

/* ---------- Work ---------- */

.work { background: var(--clay); }

/* Homepage Selected work: two equal project showcases. Each image slot
   takes one screenshot or photograph; replace the <img> src and alt to
   update it. Set --crop on the img to move the focal point. */
/* Pull the project images a step closer to the heading. Scoped to this
   section, as #services is, since .section-head is shared. */
#selected-work .section-head { margin-bottom: var(--s7); }

.showcase-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s9) var(--s6);
}
.showcase {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.showcase-media {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
}
.showcase-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--crop, center);
  transition: transform .8s var(--ease);
}
.showcase-media:hover img { transform: scale(1.025); }

.showcase-label { margin-top: var(--s5); }
.showcase-title { margin-top: var(--s3); }
.showcase-caps {
  margin-top: var(--s3);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.showcase-copy {
  margin-top: var(--s4);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 52ch;
}

/* Pushed to the foot of each column so both links share one baseline. */
.showcase-cta { margin-top: auto; padding-top: var(--s5); }

.chip {
  display: inline-block;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: var(--blue-tint);
  color: var(--cobalt-press);
  margin-bottom: var(--s4);
}
.chip-quiet {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-muted);
}

/* ---------- Portfolio page ----------
   Project cards reuse the homepage .showcase pieces. The cards are built
   from portfolioProjects in the script at the foot of the page. */
.page[data-page="portfolio"] .page-hero + .band { padding-top: 0; }
/* Tighter gap between the lede and the cards: 128px down to 72px on desktop. */
.page[data-page="portfolio"] .page-hero { padding-bottom: clamp(40px, 5vw, 72px); }
/* Unlinked concept cards stay still on hover; linked ones keep the zoom. */
.portfolio-grid div.showcase-media:hover img { transform: none; }

/* ---------- Prose blocks, About page ---------- */

.prose {
  display: flex;
  flex-direction: column;
  gap: var(--s10);
}
.prose-block {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5) var(--s7);
}
.prose-head { flex: 0 1 260px; min-width: 0; }
.prose-head .h3 { margin: 0; }
.prose-text { flex: 1 1 460px; min-width: 0; }
.prose-text .body { color: var(--ink-soft); max-width: 60ch; }
.prose-text .body + .body { margin-top: var(--s4); }

/* ---------- About page ---------- */

.about-title { margin-top: var(--s4); }
.about-copy { margin-top: var(--s6); }
.about-copy .body { color: var(--ink-soft); max-width: 58ch; }
.about-copy .body + .body { margin-top: var(--s4); }

/* A single line that carries the point of a section, set in the
   display italic like the homepage statement band. */
.about-pull {
  margin-top: var(--s6);
  padding-left: var(--s5);
  border-left: 2px solid var(--cobalt);
  font-size: clamp(21px, 2.2vw, 25px);
  line-height: 1.35;
  color: var(--ink);
  max-width: 30ch;
}

/* Why Iconic and Who we work with share the paper background and sit
   back to back, so the second drops its top padding to keep one gap. */
.page[data-page="about"] .band + .band { padding-top: 0; }

/* Divider between Why Iconic and Who we work with. It is pulled up into
   Why's bottom padding so the space either side matches and the total
   gap grows only slightly. */
.about-divider { margin-top: calc(var(--band) * -0.4); }
.about-divider-line {
  position: relative;
  display: block;
  height: 1px;
  background: var(--line);
}
.about-divider-line::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 2px;
  background: var(--cobalt);
  transform: translate(-50%, -50%);
}
.page[data-page="about"] .about-divider + .band { padding-top: calc(var(--band) * 0.6); }
@media (max-width: 600px) {
  .about-divider-line::after { width: 40px; }
}

/* Our approach: the four stages read left to right along one unbroken
   rule, each marked by a cobalt node. Below 960px the rule turns
   vertical into a timeline. */
.flow-band {
  padding-block: var(--band-tall);
  color: var(--on-ink);
  background-color: var(--ink);
  background-image:
    radial-gradient(50% 60% at 88% 0%, rgba(27,79,240,.18), rgba(27,79,240,0) 70%),
    repeating-linear-gradient(to right, rgba(237,240,246,.035) 0 1px, transparent 1px 112px);
}
.flow-band .eyebrow { color: var(--on-blue-soft); }
.flow-band .h2 { color: var(--on-ink); margin-top: var(--s4); max-width: 18ch; }
.flow-intro {
  margin-top: var(--s5);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-muted-on-ink);
  max-width: 56ch;
}

.flow {
  list-style: none;
  margin: var(--s9) 0 0;
  padding: 0;
  display: flex;
}
.flow-step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: var(--s7) var(--s5) 0 0;
  border-top: 1px solid var(--line-ink-strong);
}
.flow-step::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: var(--r-pill);
  background: var(--cobalt);
  box-shadow: 0 0 0 5px var(--ink);
}
.flow-name {
  margin: 0 0 var(--s4);
  font-family: var(--display);
  font-size: clamp(23px, 2.1vw, 30px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--on-ink);
  white-space: nowrap;
}
.flow-copy {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted-on-ink);
  max-width: 30ch;
}

@media (max-width: 960px) {
  .flow { flex-direction: column; margin-top: var(--s8); }
  .flow-step {
    padding: 0 0 var(--s8) var(--s6);
    border-top: 0;
    border-left: 1px solid var(--line-ink-strong);
  }
  .flow-step:last-child { padding-bottom: 0; border-left-color: transparent; }
  .flow-step::before { top: 2px; left: -6px; }
  .flow-name { white-space: normal; }
  .flow-copy { max-width: 46ch; }
}

/* ---------- Services page ---------- */

/* One section per service, alternating sides, separated by a hairline.
   Each carries an id so #/services/<id> lands on it below the header. */
.svc-section {
  padding-block: var(--s10);
  border-top: 1px solid rgba(16,17,20,.12);
  scroll-margin-top: calc(var(--nav) + var(--s5));
}
/* of-type, not child: a visually hidden h1 opens the wrapper. */
.svc-section:first-of-type { border-top: 0; padding-top: 0; }
.svc-section:last-of-type { padding-bottom: 0; }
/* Cobalt accent centred on each hairline, matching .about-divider-line.
   The border sits just above the padding box, so top: -0.5px is its
   centre line. */
.svc-section { position: relative; }
.svc-section:not(:first-of-type)::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.5px;
  width: 56px;
  height: 2px;
  background: var(--cobalt);
  transform: translate(-50%, -50%);
}
@media (max-width: 600px) {
  .svc-section:not(:first-of-type)::before { width: 40px; }
}

.svc-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s8) var(--s9);
}
.svc-text  { flex: 1 1 460px; min-width: 0; }
.svc-media {
  flex: 1 1 400px;
  min-width: 0;
  position: sticky;
  top: calc(var(--nav) + var(--s6));
}
.svc-section:nth-of-type(even) .svc-media { order: -1; }

.svc-title { margin-top: var(--s3); }
.svc-lede  { margin-top: var(--s5); color: var(--ink-soft); max-width: 46ch; }
.svc-label {
  margin-top: var(--s6);
  margin-bottom: var(--s2);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.svc-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 60ch;
}
.ticks-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3) var(--s5);
  margin-top: var(--s3);
}

/* The four 4:5 photographs: Business Automation & AI Solutions, Website
   Design & Development, Shopify & E-Commerce and Digital Marketing & Lead
   Generation, each beside a slightly
   wider text column. All four centre a static photo against their copy.
   Landscape once the columns stack. */
#business-automation-ai .svc-grid,
#website-design-development .svc-grid,
#shopify-ecommerce .svc-grid,
#digital-marketing-lead-generation .svc-grid  { align-items: center; }
#business-automation-ai .svc-text,
#website-design-development .svc-text,
#shopify-ecommerce .svc-text,
#digital-marketing-lead-generation .svc-text  { flex: 1.1 1 440px; }
#business-automation-ai .svc-media,
#website-design-development .svc-media,
#shopify-ecommerce .svc-media,
#digital-marketing-lead-generation .svc-media { flex: 1 1 380px; max-width: 520px; }
#business-automation-ai .svc-media,
#website-design-development .svc-media,
#shopify-ecommerce .svc-media,
#digital-marketing-lead-generation .svc-media { position: static; }
.svc-media .media-tall { aspect-ratio: 4 / 5; }
.svc-media .media-tall img { object-position: 62% 50%; }
#business-automation-ai .media-tall img { object-position: 55% 50%; }
#digital-marketing-lead-generation .media-tall img { object-position: 50% 50%; }
/* --ink-soft reads 7.4:1 on About's --paper but only 6.8:1 on this
   --clay band; #414752 is the same cool grey, deepened to restore the
   About page's 7.4:1 contrast. */
#website-design-development .svc-lede,
#website-design-development .svc-body { color: #414752; }

/* Business Systems & Integrations: a static photo that fills the right
   column at a fixed 640-700px height, top-aligned with the eyebrow so it
   balances the full text column. Landscape once the columns stack. */
#business-systems-integrations .svc-media,
#ongoing-support-optimization .svc-media { position: static; }
.media-integrations { height: clamp(640px, 50vw, 700px); }
.media-integrations img { object-position: 60% 50%; }
/* Ongoing Support shares the same tall frame; 74% keeps both people
   at the desk in view in the portrait crop. */
#ongoing-support-optimization .media-integrations img { object-position: 74% 50%; }
/* Rows a clear step apart, so a two-line item never reads as running
   into the next; balanced wrapping avoids a lone last word. */
#business-systems-integrations .ticks-2col,
#ongoing-support-optimization .ticks-2col { gap: var(--s4) var(--s5); }
#business-systems-integrations .ticks-2col li,
#ongoing-support-optimization .ticks-2col li { text-wrap: balance; }
#business-systems-integrations .about-pull,
#ongoing-support-optimization .about-pull { margin-top: var(--s7); }

@media (max-width: 1100px) {
  #business-automation-ai .svc-grid,
  #website-design-development .svc-grid,
  #shopify-ecommerce .svc-grid,
  #digital-marketing-lead-generation .svc-grid { gap: var(--s8) var(--s8); }
}
/* Wherever the columns sit side by side: a more compact Web Design text
   column, so its height stays close to the photograph beside it. The
   title keeps the shared .h2 size so all six service headings match.
   Stacked layouts keep the standard sizes. */
@media (min-width: 1021px) {
  #website-design-development .svc-lede  { margin-top: var(--s4); font-size: 18px; }
  #website-design-development .svc-label { margin-top: var(--s5); }
  #website-design-development .svc-body  { font-size: 15px; line-height: 1.6; }
  #website-design-development .ticks-2col { gap: var(--s2) var(--s5); }
  #website-design-development .about-pull { margin-top: var(--s5); font-size: 20px; max-width: 40ch; }
  /* Automation keeps its type sizes; only the spacing tightens. */
  #business-automation-ai .svc-lede  { margin-top: var(--s4); }
  #business-automation-ai .svc-label { margin-top: var(--s5); }
  #business-automation-ai .ticks-2col { gap: var(--s2) var(--s5); }
  #business-automation-ai .about-pull { margin-top: var(--s5); }
  /* Digital Marketing takes the same spacing as Automation. */
  #digital-marketing-lead-generation .svc-lede  { margin-top: var(--s4); }
  #digital-marketing-lead-generation .svc-label { margin-top: var(--s5); }
  #digital-marketing-lead-generation .ticks-2col { gap: var(--s2) var(--s5); }
  #digital-marketing-lead-generation .about-pull { margin-top: var(--s5); }
  /* Business Systems & Integrations takes the same spacing. */
  #business-systems-integrations .svc-lede  { margin-top: var(--s4); }
  #business-systems-integrations .svc-label { margin-top: var(--s5); }
  /* Ongoing Support & Optimization matches Business Systems. */
  #ongoing-support-optimization .svc-lede  { margin-top: var(--s4); }
  #ongoing-support-optimization .svc-label { margin-top: var(--s5); }
}
/* One stacking point for all six sections, so tablets never mix
   side-by-side and stacked services on the same page. Photo first,
   full width, landscape. */
@media (max-width: 1020px) {
  .svc-grid,
  #business-automation-ai .svc-grid,
  #website-design-development .svc-grid,
  #shopify-ecommerce .svc-grid,
  #digital-marketing-lead-generation .svc-grid { flex-direction: column; align-items: stretch; }
  .svc-text,
  .svc-media { flex: 0 0 auto; }
  .svc-media,
  .svc-section:nth-of-type(even) .svc-media { order: -1; position: static; }
  #business-automation-ai .svc-text,
  #website-design-development .svc-text,
  #shopify-ecommerce .svc-text,
  #digital-marketing-lead-generation .svc-text { flex: 0 0 auto; }
  #business-automation-ai .svc-media,
  #website-design-development .svc-media,
  #shopify-ecommerce .svc-media,
  #digital-marketing-lead-generation .svc-media { flex: 0 0 auto; max-width: none; }
  .svc-media .media-tall { aspect-ratio: 3 / 2; }
  .svc-media .media-tall img { object-position: 60% 30%; }
  #business-automation-ai .media-tall img { object-position: 55% 55%; }
  #digital-marketing-lead-generation .media-tall img { object-position: 50% 55%; }
  .media-integrations { height: auto; aspect-ratio: 3 / 2; }
}
@media (max-width: 860px) {
  .svc-section { padding-block: var(--s9); }
}
@media (max-width: 520px) {
  .ticks-2col { grid-template-columns: 1fr; }
}

/* ---------- Pricing ---------- */

.factors {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.factors li {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
}
.factors .dot { margin-top: 11px; }

.ph-panel {
  background: var(--white);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  padding: var(--s6);
}
.ph-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3) var(--s5);
  margin-bottom: var(--s5);
}
.ph-rows { list-style: none; margin: 0; padding: 0; }
.ph-rows li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  justify-content: space-between;
  align-items: baseline;
  padding-block: var(--s4);
  border-top: 1px solid var(--line);
}
.ph-rows li:first-child { border-top: 0; }
.ph-name { font-weight: 600; font-size: 17px; }
.ph-slot {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-muted);
  background: var(--paper);
  border-radius: var(--r-sm);
  padding: 5px 10px;
}
.ph-note { margin-top: var(--s5); font-size: 13px; line-height: 1.5; color: var(--ink-muted); }

/* ---------- Contact page ----------
   An introduction beside a white enquiry card. The two columns sit
   top-aligned from 961px and stack, introduction first, below that. */

.contact-band {
  padding-block: clamp(48px, 7vw, 104px) var(--band);
  background-image:
    radial-gradient(52% 48% at 86% 6%, rgba(27,79,240,.12), rgba(27,79,240,0) 72%),
    repeating-linear-gradient(to right, rgba(16,17,20,.05) 0 1px, transparent 1px 112px);
}
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s8) clamp(40px, 6vw, 88px);
  align-items: start;
}

.contact-intro { padding-top: var(--s2); max-width: 480px; }
.contact-intro .eyebrow { margin-bottom: var(--s5); }
.contact-title {
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.05;
  max-width: 14ch;
}
.contact-lede {
  margin-top: var(--s5);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 44ch;
}
.contact-rule {
  height: 1px;
  margin-block: var(--s7) var(--s6);
  background: var(--line);
}
.contact-touch { color: var(--ink); font-size: 12px; letter-spacing: .14em; font-weight: 700; }
.contact-email {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s4);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact-email svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--cobalt); }
a.contact-email span {
  background-image: linear-gradient(var(--cobalt), var(--cobalt));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size .32s var(--ease), color .2s var(--ease);
}
a.contact-email:hover span { color: var(--cobalt-press); background-size: 100% 1.5px; }
.contact-note { margin-top: var(--s3); font-size: 15px; line-height: 1.6; color: var(--ink-muted); }

.contact-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 3.4vw, 40px);
}
.contact-card-title { margin-bottom: var(--s5); }

/* Fields sit on a two-column grid. Each field spans three rows (label,
   control, message) through subgrid, so a label that wraps to two lines
   never pushes its control out of line with its neighbour's. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s4);
}
.field {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: var(--s2);
  min-width: 0;
}
.field-full { grid-column: 1 / -1; }

.field-label {
  align-self: end;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink);
}
.field-label .req { color: var(--cobalt-press); margin-left: 4px; }

/* Holds the field's error. Its bottom padding is the gap to the next row. */
.field-msg {
  min-height: 0;
  padding-bottom: var(--s5);
  font-size: 14px;
  line-height: 1.4;
  color: var(--danger);
}
.field-msg:empty { padding-bottom: var(--s4); }

/* The 1px edge, #878fa0, is the lightest cool grey that still holds the
   3:1 a form control needs against white. */
.input, .textarea, .select {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--white);
  border: 1px solid #878fa0;
  border-radius: var(--r-pill);
  padding: 13px 20px;
  min-height: 50px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-muted); opacity: 1; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--ink-soft); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--cobalt);
  box-shadow: 0 0 0 4px var(--blue-tint);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] {
  border-color: var(--danger);
}
.input[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus, .select[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 4px var(--danger-tint);
}
.textarea {
  display: block;
  min-height: 132px;
  border-radius: var(--r-lg);
  padding: 14px 20px;
  resize: vertical;
}

.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
  cursor: pointer;
}
.select.is-empty { color: var(--ink-muted); }
.select option { color: var(--ink); }
.select-wrap { display: flex; align-items: center; min-width: 0; }
.select-wrap .select { flex: 1 1 auto; }
.select-caret {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-left: -32px;
  margin-right: 23px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg) translate(-3px, -3px);
  pointer-events: none;
}

/* Off-screen trap for form-filling bots. People never see or reach it. */
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.btn-submit {
  position: relative;
  width: 100%;
  min-height: 56px;
  margin-top: var(--s2);
  font-size: 16px;
}
.btn-submit .btn-arrow { font-size: 15px; transition: transform .3s var(--ease); }
.btn-submit:hover .btn-arrow { transform: translate(2px, -2px); }
.btn-submit:focus-visible { outline: 2px solid var(--cobalt-press); outline-offset: 3px; }
.btn-submit:disabled { cursor: progress; transform: none; background: var(--cobalt-press); }
.btn-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: var(--white);
  border-radius: var(--r-pill);
  animation: spin .8s linear infinite;
}
.btn-submit.is-loading .btn-spinner { display: block; }
.btn-submit.is-loading .btn-arrow { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-note { margin-top: var(--s4); font-size: 13px; line-height: 1.5; color: var(--ink-muted); text-align: center; }

.form-error {
  margin-top: var(--s4);
  padding: var(--s4) var(--s5);
  border-radius: var(--r-md);
  background: var(--danger-tint);
  color: var(--danger);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
  scroll-margin-bottom: var(--s6);
}

/* Shown in place of the form once an enquiry is confirmed as sent. */
.form-success { text-align: center; padding-block: var(--s7); }
.form-success:focus { outline: none; }
.form-success-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--s5);
  border-radius: var(--r-pill);
  background: var(--blue-tint);
  color: var(--cobalt);
}
.form-success-mark svg { width: 26px; height: 26px; }
.form-success-text {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 36ch;
  margin-inline: auto;
}
.form-success .btn { margin-top: var(--s6); }

@media (max-width: 960px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .contact-intro { padding-top: 0; max-width: 620px; }
  .contact-title { max-width: 18ch; }
}

@media (max-width: 600px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-card { border-radius: var(--r-lg); }
  .contact-lede { font-size: 17px; }
  .contact-rule { margin-block: var(--s6) var(--s5); }
}

/* ---------- Closing call to action, on ink ---------- */

.cta {
  background: var(--ink);
  color: var(--on-ink);
  padding-block: var(--band-tall);
}
.cta .eyebrow { color: var(--on-blue-soft); }

.cta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s8) var(--s7);
  align-items: flex-start;
}
.cta-lead { flex: 1 1 520px; min-width: 0; }
.cta-side { flex: 1 1 300px; min-width: 0; }

.cta-title { margin-top: var(--s5); color: var(--on-ink); }
.cta-lede {
  margin-top: var(--s5);
  color: var(--ink-muted-on-ink);
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
  max-width: 48ch;
}
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s7); }

.cta-points { list-style: none; margin: 0; padding: 0; }
.cta-points li {
  display: flex;
  gap: var(--s3);
  padding-block: var(--s4);
  border-top: 1px solid var(--line-ink);
  color: var(--ink-muted-on-ink);
  font-size: 15px;
  line-height: 1.55;
}
.cta-points li:last-child { border-bottom: 1px solid var(--line-ink); }
.cta-points .dot { margin-top: 9px; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  color: var(--ink-muted-on-ink);
  padding-block: var(--s9) var(--s7);
  border-top: 1px solid var(--line-ink);
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s7);
  justify-content: space-between;
}
.footer-brand { flex: 1 1 280px; min-width: 0; }
.footer-brand .wordmark { color: var(--on-ink); font-size: 21px; }
.footer-brand .wordmark-tail { color: var(--ink-muted-on-ink); }
.footer-blurb {
  margin-top: var(--s4);
  font-size: 15px;
  line-height: 1.6;
  max-width: 34ch;
  color: var(--ink-muted-on-ink);
}
.footer-col { flex: 0 1 180px; min-width: 0; }
.footer-col-services { flex-basis: 230px; }
.footer-col .label { color: var(--on-ink); margin-bottom: var(--s4); }
/* Tighter lines plus a wider gap keep the single-line rhythm unchanged,
   while a long label that wraps still reads as one item. */
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s4); line-height: 1.4; }
.footer-link {
  font-size: 15px;
  color: var(--ink-muted-on-ink);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.footer-link:hover { color: var(--on-ink); }

/* Once all three no longer fit on one row, the brand takes its own row
   and the two link columns sit together beneath it. */
@media (max-width: 860px) {
  .footer-grid { justify-content: flex-start; }
  .footer-brand { flex-basis: 100%; }
}

.footer-legal {
  margin-top: var(--s9);
  padding-top: var(--s5);
  border-top: 1px solid var(--line-ink);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-muted-on-ink);
}

/* ---------- Reveal, only once JS is confirmed ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: .08s; }
.js .reveal[data-delay="2"] { transition-delay: .16s; }
.js .reveal[data-delay="3"] { transition-delay: .24s; }
.js .reveal[data-delay="4"] { transition-delay: .32s; }
.js .reveal[data-delay="5"] { transition-delay: .40s; }

/* ---------- Narrower widths ---------- */

@media (min-width: 700px) {
  .wrap { padding-inline: var(--s7); }
  .header-inner { min-height: var(--nav); }
}

/* Five nav items plus the button need more room than four did. The menu button takes over
   earlier so the header cannot overflow, with every header spacing value
   left as it was. The page layout rules keep their own 860px step below. */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav .btn { display: none; }
  .menu-btn { display: flex; }
}

@media (max-width: 860px) {
  .showcase { flex-basis: 100%; }
  .service-row { gap: var(--s3); }
  .service-arrow { flex-basis: 100%; margin-left: 0; }
  .split-reverse .split-media { order: 0; }
  .prose { gap: var(--s9); }
}

@media (max-width: 520px) {
  /* Keep the icon beside its title on the narrowest phones. */
  .service-title { flex-basis: 0; }
  .hero-actions .btn { width: 100%; }
  .cta-actions .btn { width: 100%; }
  .hero-title { max-width: none; }
}

/* On phones, `cover` blew the wide hero photo up to the height of the stacked
   copy, leaving only a dark slice of wall and window. Here the photo is sized
   to the width instead (240vw, so 91vw tall) and pinned bottom-right so all four
   people show. The extra bottom padding gives the scene room below the meta list.
   The copy above stays on solid ink, which fades into the photo through an
   eased ramp (many stops, so there is no visible edge). The meta labels sit on
   the darker top of that ramp, over wall and window rather than faces, and a
   soft shadow keeps them legible where the photo shows through. */
@media (max-width: 600px) {
  .hero {
    padding-bottom: 74vw;
    background-image:
      radial-gradient(60% 58% at 80% 6%, rgba(27,79,240,.22), rgba(27,79,240,0) 70%),
      linear-gradient(to bottom,
        rgba(11,14,19,1) calc(100% - 91vw),
        rgba(11,14,19,.93) calc(100% - 83vw),
        rgba(11,14,19,.8) calc(100% - 75vw),
        rgba(11,14,19,.6) calc(100% - 66vw),
        rgba(11,14,19,.4) calc(100% - 56vw),
        rgba(11,14,19,.26) calc(100% - 44vw),
        rgba(11,14,19,.22) calc(100% - 32vw),
        rgba(11,14,19,.6) 100%),
      url("../images/hero-session.jpg");
    background-size: cover, cover, 240vw auto;
    background-position: 50% 50%, 50% 50%, 95% 100%;
  }
  .hero-actions { margin-bottom: var(--s8); }
  .hero-meta { padding-left: 0; gap: var(--s3); }
  .hero-meta li { text-shadow: 0 1px 10px rgba(11,14,19,.85); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .rule-mark { background-size: 100% .09em; }
}