/* ==========================================================================
   Universal Networks — site stylesheet  v2
   Brand: navy #001C79, amber #FFC000, white (sampled from supplied logo).
   Contrast audited: navy/white 14.09 · white/navy 14.56 · navy/amber 8.87.
   Amber is a FILL only — 1.59 on white, never used as text on light ground.
   Type: Fraunces (display, WONK on) × Hanken Grotesk (body). No mono anywhere.
   ========================================================================== */

:root {
  /* --- brand --- */
  --navy:        #001C79;
  --navy-900:    #000F45;
  --navy-700:    #0A2C96;
  --navy-400:    #6C82CC;
  --navy-200:    #C3CDEE;
  --navy-50:     #EEF1FB;
  --amber:       #FFC000;
  --amber-600:   #E5A800;
  --amber-200:   #FFE9A8;
  --amber-50:    #FFF8E6;

  --white:   #FFFFFF;
  --paper:   #FDFDFE;
  --ink:     #0A1233;
  --ink-2:   #2B3457;
  --muted:   #5A6383;
  --line:    #E4E7F2;
  --line-2:  #F0F2F8;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Hanken Grotesk", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  /* bigger, friendlier scale — base 18px, ratio ~1.27 */
  --step--1: clamp(0.9rem, 0.88rem + 0.12vw, 0.975rem);
  --step-0:  clamp(1.075rem, 1.04rem + 0.18vw, 1.175rem);
  --step-1:  clamp(1.25rem, 1.18rem + 0.36vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.36rem + 0.7vw, 1.9rem);
  --step-3:  clamp(1.85rem, 1.6rem + 1.25vw, 2.55rem);
  --step-4:  clamp(2.3rem, 1.9rem + 2vw, 3.4rem);
  --step-5:  clamp(2.9rem, 2.2rem + 3.4vw, 4.6rem);
  --step-6:  clamp(3.4rem, 2.3rem + 5.4vw, 6.2rem);
  --step-7:  clamp(3.9rem, 2.1rem + 9vw, 8.4rem);

  --gut:   clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --sp-s:  clamp(1.5rem, 1.2rem + 1.3vw, 2.4rem);
  --sp-m:  clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem);
  --sp-l:  clamp(3rem, 2.4rem + 3vw, 5rem);

  --wide:   min(100% - (var(--gut) * 2), 1520px);
  --mid:    min(100% - (var(--gut) * 2), 1080px);

  --r-s:  14px;
  --r-m:  24px;
  --r-l:  36px;
  --r-pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-soft: 0 24px 60px -28px rgba(0, 28, 121, .28);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.un {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--font-body); font-size: var(--step-0); line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
.un img { max-width: 100%; display: block; }
.un a { color: inherit; text-decoration: none; }
.un h1, .un h2, .un h3 {
  font-family: var(--font-display); margin: 0; font-weight: 600;
  font-variation-settings: "SOFT" 20, "WONK" 1, "opsz" 100;
  letter-spacing: -0.022em; line-height: 1.02; text-wrap: balance;
}
.un h1 { font-variation-settings: "SOFT" 28, "WONK" 1, "opsz" 144; }
.un p { margin: 0 0 1em; max-width: 64ch; }
.un ::selection { background: var(--amber); color: var(--navy); }
.un-skip { position: absolute; left: -9999px; background: var(--navy); color: #fff; padding: .8rem 1.2rem; z-index: 999; }
.un-skip:focus { left: 0; }
.un :focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

/* ---------- atoms ---------- */
.un-label {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body); font-weight: 600; font-size: var(--step--1);
  color: var(--navy); background: var(--amber-50);
  padding: .45rem 1rem .5rem; border-radius: var(--r-pill);
}
.un-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; }
.un-lede { font-size: var(--step-1); line-height: 1.55; color: var(--muted); max-width: 44ch; }

/* amber highlight sweep behind a word — the brand's signature emphasis */
.un-hi { position: relative; display: inline-block; color: var(--navy); }
.un-hi::before {
  content: ""; position: absolute; z-index: -1;
  left: -.16em; right: -.16em; top: .14em; bottom: .08em;
  background: var(--amber); border-radius: .42em .55em .38em .6em;
  transform: rotate(-1.2deg) scaleX(0); transform-origin: left center;
}
.js-on .un-hi::before { transform: rotate(-1.2deg) scaleX(0); }
html:not(.js-on) .un-hi::before { transform: rotate(-1.2deg) scaleX(1); }

/* The label colour flips INSTANTLY once the amber panel has covered the button,
   instead of crossfading underneath it. The crossfade gave roughly 0.3s of
   navy-on-navy, which is what made the button text look wrong on hover. */
.un-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  background: var(--navy); color: #fff; border: 2px solid var(--navy);
  font-family: var(--font-body); font-weight: 700; font-size: var(--step-0);
  padding: .95rem 1.9rem 1rem; border-radius: var(--r-pill);
  position: relative; overflow: hidden; cursor: pointer; line-height: 1.2;
  text-decoration: none;
  transition: color 0s linear .12s, border-color .38s var(--ease);
}
.un-cta > span { position: relative; z-index: 2; }
.un-cta::after {
  content: ""; position: absolute; inset: -2px; background: var(--amber);
  transform: translateY(101%); z-index: 1; transition: transform .42s var(--ease);
}
.un-cta:hover::after, .un-cta:focus-visible::after { transform: translateY(0); }
.un-cta:hover, .un-cta:focus-visible {
  color: var(--navy); border-color: var(--amber);
  transition: color 0s linear .2s, border-color .38s var(--ease);
}
/* Ghost: navy label at rest, navy label on amber — the colour never changes,
   so there is no in-between state to get wrong. */
.un-cta--ghost { background: transparent; color: var(--navy); border-color: var(--navy-200); }
.un-cta--ghost:hover, .un-cta--ghost:focus-visible { color: var(--navy); border-color: var(--amber); }
/* On navy grounds: amber button, white panel, navy label throughout. */
.un-cta--light { background: var(--amber); color: var(--navy); border-color: var(--amber); }
.un-cta--light::after { background: #fff; }
.un-cta--light:hover, .un-cta--light:focus-visible { color: var(--navy); border-color: #fff; }
.un-arrow { display: inline-block; transition: transform .4s var(--ease); }
.un-cta:hover .un-arrow { transform: translate(4px, -4px); }

/* ---------- masthead ---------- */
.un-mast { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--line-2); }
.un-mast__in { width: var(--wide); margin-inline: auto; display: flex; align-items: center; gap: var(--sp-s); height: clamp(72px, 6vw, 92px); }
.un-logo { display: flex; align-items: center; gap: .7rem; margin-right: auto; }
.un-logo__mark { width: 40px; height: 40px; flex: none; }
.un-logo__word { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.02em; color: var(--navy); line-height: 1; }
.un-logo__word small { display: block; font-family: var(--font-body); font-size: .68rem; font-weight: 600; letter-spacing: .1em; color: var(--amber-600); margin-top: .18rem; }
.un-nav { display: flex; gap: clamp(1.2rem, 2.4vw, 2.4rem); align-items: center; }
.un-nav a { font-weight: 600; font-size: var(--step-0); color: var(--ink-2); position: relative; padding-block: .3rem; }
.un-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: var(--amber); transform: scaleX(0); transform-origin: right; transition: transform .38s var(--ease); }
.un-nav a:hover::after, .un-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 900px) { .un-nav { display: none; } }

/* ---------- hero ---------- */
.un-hero { position: relative; overflow: hidden; background: var(--white); }
/* Hero background photograph / artwork.
   Drop a file at /assets/img/hero-bg.jpg (and optionally hero-bg.webp) and it
   appears automatically. No image present = no broken layout, the colour wash
   below just shows on its own. */
.un-hero__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Save your image as EXACTLY this path and name:  assets/img/hero-bg.jpg
     Using a .png or .webp instead? Change the line below to match. */
  background-image: url("/assets/img/hero-bg.jpg");
  background-size: cover; background-position: 72% center; background-repeat: no-repeat;
}
/* Keeps the headline readable no matter how busy the artwork is. */
.un-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    #fff 0%, rgba(255,255,255,.96) 26%, rgba(255,255,255,.78) 46%,
    rgba(255,255,255,.34) 70%, rgba(255,255,255,.10) 100%);
}
@media (max-width: 1040px) {
  .un-hero__bg { background-position: 78% center; }
  .un-hero__bg::after { background: linear-gradient(170deg, #fff 0%, rgba(255,255,255,.9) 40%, rgba(255,255,255,.62) 100%); }
}
.un-hero__canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.un-hero__canvas canvas { width: 100% !important; height: 100% !important; display: block; }
.un-hero__blob { position: absolute; z-index: 1; right: -8%; top: -10%; width: min(62vw, 900px); aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,192,0,.55), rgba(255,192,0,0) 70%),
              radial-gradient(closest-side at 65% 60%, rgba(0,28,121,.30), rgba(0,28,121,0) 72%);
  filter: blur(6px); }
.un-hero__in { position: relative; z-index: 2; width: var(--wide); margin-inline: auto;
  padding-block: clamp(3.5rem, 3rem + 6vw, 7.5rem) clamp(2.5rem, 2rem + 3vw, 4rem);
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--sp-m); align-items: end; }
@media (max-width: 1040px) { .un-hero__in { grid-template-columns: 1fr; gap: var(--sp-s); } }
.un-hero__h { font-size: var(--step-7); margin-block: clamp(1.5rem, 3vw, 2.4rem) clamp(1.2rem, 2.5vw, 2rem); letter-spacing: -0.032em; }
.un-hero__h .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.un-hero__h .ln > span { display: block; }
.un-hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.un-hero__card { background: var(--navy); color: #fff; border-radius: var(--r-l); padding: clamp(1.6rem, 2.4vw, 2.3rem); box-shadow: var(--shadow-soft); }
.un-hero__card h3 { font-size: var(--step-2); color: #fff; margin-bottom: .9rem; }
.un-hero__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.un-hero__card li { display: flex; gap: .7rem; align-items: baseline; color: var(--navy-200); font-size: var(--step--1); line-height: 1.5; }
.un-hero__card li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none; transform: translateY(-2px); }
.un-facts { margin: 0; display: grid; gap: .95rem; }
.un-facts dt {
  font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--amber); margin-bottom: .18rem;
}
.un-facts dd { margin: 0; color: #fff; font-size: var(--step--1); line-height: 1.5; }
.un-status { position: relative; z-index: 2; border-top: 1px solid var(--line-2); }
.un-status__in { width: var(--wide); margin-inline: auto; display: flex; flex-wrap: wrap; gap: .6rem clamp(1.2rem, 3vw, 3rem); padding-block: 1.1rem; font-size: var(--step--1); color: var(--muted); font-weight: 500; }
.un-status__in span { display: inline-flex; align-items: center; gap: .55rem; }
.un-status__in b { color: var(--navy); font-weight: 700; }
.un-dot { width: 9px; height: 9px; background: var(--amber); border-radius: 50%; flex: none; }

/* ---------- marquee ---------- */
.un-proof { background: var(--navy); overflow: hidden; }
.un-proof__in { display: flex; width: max-content; will-change: transform; }
.un-proof__set { display: flex; align-items: center; padding-block: clamp(1.1rem, 2.2vw, 1.8rem); }
.un-proof__set b { font-family: var(--font-display); font-weight: 500; font-size: var(--step-3); color: #fff; padding-inline: clamp(1.2rem, 2.8vw, 2.6rem); white-space: nowrap; font-variation-settings: "SOFT" 40, "WONK" 1; }
.un-proof__set em { width: 10px; height: 10px; border-radius: 50%; background: var(--amber); flex: none; }

/* ---------- section chrome ---------- */
.un-sec { padding-block: var(--sp-l); }
.un-sec--tint { background: var(--navy-50); border-radius: clamp(24px, 4vw, 56px); width: var(--wide); margin-inline: auto; }
.un-sec__head { width: var(--wide); margin-inline: auto; display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-s);
  align-items: end; padding-bottom: var(--sp-s); }
.un-sec--tint .un-sec__head { width: min(100% - (var(--gut) * 2), 1400px); padding-top: var(--sp-m); padding-bottom: var(--sp-s); }
@media (max-width: 900px) { .un-sec__head { grid-template-columns: 1fr; } }
.un-sec__h { font-size: var(--step-6); margin-top: clamp(1rem, 2vw, 1.6rem); }

/* ---------- services ---------- */
.un-svc { width: var(--wide); margin-inline: auto; display: grid; gap: .5rem; }
.un-sec--tint .un-svc { width: min(100% - (var(--gut) * 2), 1400px); padding-bottom: var(--sp-m); }
.un-svc__row { position: relative; display: grid; align-items: center;
  grid-template-columns: clamp(48px, 5vw, 74px) minmax(0, 5fr) minmax(0, 6fr) 48px;
  gap: clamp(.8rem, 2vw, 2rem); padding: clamp(1.3rem, 2.4vw, 2rem) clamp(1.1rem, 2.2vw, 2rem);
  border-radius: var(--r-m); isolation: isolate; }
.un-svc__row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy); border-radius: var(--r-m); opacity: 0; transform: scale(.985); transition: opacity .42s var(--ease), transform .42s var(--ease); }
.un-svc__row:hover::before, .un-svc__row:focus-visible::before { opacity: 1; transform: scale(1); }
.un-svc__row::after { content: ""; position: absolute; left: clamp(1.1rem, 2.2vw, 2rem); right: clamp(1.1rem, 2.2vw, 2rem); bottom: 0; height: 1px; background: var(--line); }
.un-svc__row:last-child::after { display: none; }
.un-svc__row > * { transition: color .34s var(--ease); }
.un-svc__n { font-family: var(--font-display); font-size: var(--step-2); color: var(--amber-600); font-weight: 600; }
.un-svc__t { font-size: var(--step-3); color: var(--ink); }
.un-svc__d { color: var(--muted); margin: 0; font-size: var(--step-0); max-width: 52ch; }
.un-svc__go { width: 48px; height: 48px; border-radius: 50%; background: var(--navy-50); color: var(--navy); display: grid; place-items: center; font-size: 1.15rem; justify-self: end; transition: background .34s var(--ease), color .34s var(--ease), transform .34s var(--ease); }
.un-svc__row:hover .un-svc__t, .un-svc__row:hover .un-svc__d { color: #fff; }
.un-svc__row:hover .un-svc__n { color: var(--amber); }
.un-svc__row:hover .un-svc__go { background: var(--amber); color: var(--navy); transform: rotate(45deg); }
@media (max-width: 860px) {
  .un-svc__row { grid-template-columns: auto 1fr 48px; row-gap: .5rem; align-items: start; }
  .un-svc__d { grid-column: 2 / 4; }
}

/* ---------- approach ---------- */
.un-appr { width: var(--wide); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sp-m); }
@media (max-width: 1000px) { .un-appr { grid-template-columns: 1fr; gap: var(--sp-s); } }
.un-appr__rail { position: sticky; top: clamp(104px, 10vw, 140px); align-self: start; }
@media (max-width: 1000px) { .un-appr__rail { position: static; } }
.un-appr__h { font-size: var(--step-5); margin-block: 1.2rem 1.4rem; }
.un-appr__prog { height: 6px; border-radius: 6px; background: var(--line); margin-top: 2.2rem; overflow: hidden; }
.un-appr__prog i { display: block; height: 100%; width: 0; background: var(--amber); border-radius: 6px; }
.un-appr__steps { display: grid; gap: clamp(1rem, 2vw, 1.4rem); }
.un-appr__step { display: grid; grid-template-columns: clamp(62px, 7vw, 96px) 1fr; gap: clamp(1rem, 2vw, 2rem);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(1.5rem, 2.6vw, 2.4rem); }
.un-appr__step:nth-child(even) { background: var(--amber-50); border-color: var(--amber-200); }
.un-appr__k { font-family: var(--font-display); font-size: var(--step-4); color: var(--navy); font-weight: 600; line-height: 1; }
.un-appr__st { font-size: var(--step-2); margin-bottom: .6rem; }
.un-appr__step p { color: var(--muted); margin: 0; }
.un-stats { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: var(--sp-s); }
/* Note: `.un-stat span` used to be a DESCENDANT selector, so it also matched the
   number span inside the <b> and shrank it to label size. Every selector here is
   explicit about which element it means. */
.un-stat {
  display: flex; align-items: baseline; gap: clamp(.9rem, 2vw, 1.4rem);
  padding-block: clamp(.7rem, 1.6vw, 1rem);
  border-top: 1px solid var(--line);
}
.un-stat:last-child { border-bottom: 1px solid var(--line); }
.un-stat > b {
  flex: none; min-width: 3.4em; font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-4); color: var(--navy); line-height: 1; letter-spacing: -0.03em;
}
.un-stat > b > .js-count { font: inherit; color: inherit; letter-spacing: inherit; }
.un-stat > b > sup { font-size: .4em; vertical-align: super; color: var(--amber-600); line-height: 0; }
.un-stat > span {
  font-size: var(--step--1); color: var(--muted); font-weight: 500; line-height: 1.35;
}

/* ---------- work ---------- */
.un-work { width: var(--wide); margin-inline: auto; }
.un-work__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-s) var(--gut); }
.un-proj { grid-column: span 12; }
.un-proj:nth-child(1) { grid-column: 1 / span 7; }
.un-proj:nth-child(2) { grid-column: 9 / span 4; margin-top: clamp(2rem, 7vw, 6rem); }
.un-proj:nth-child(3) { grid-column: 2 / span 4; }
.un-proj:nth-child(4) { grid-column: 7 / span 6; margin-top: clamp(-4rem, -5vw, -1rem); }
.un-proj:nth-child(5) { grid-column: 1 / span 5; }
.un-proj:nth-child(6) { grid-column: 7 / span 3; margin-top: clamp(1.5rem, 4vw, 3.5rem); }
.un-proj:nth-child(7) { grid-column: 10 / span 3; }
@media (max-width: 940px) { .un-proj:nth-child(n) { grid-column: 1 / span 12; margin-top: 0; } }
.un-proj__plate { position: relative; overflow: hidden; border-radius: var(--r-l); aspect-ratio: 4 / 3; display: grid; place-items: center; }
.un-proj:nth-child(2) .un-proj__plate, .un-proj:nth-child(6) .un-proj__plate { aspect-ratio: 3 / 4; }
.un-proj__ghost { font-family: var(--font-display); font-weight: 600; font-size: clamp(5rem, 16vw, 12rem); line-height: 1; opacity: .22; user-select: none; transition: transform .7s var(--ease); }
.un-proj:hover .un-proj__ghost { transform: scale(1.06) rotate(-2deg); }
.un-proj__peek { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.2rem, 2.2vw, 2rem); background: linear-gradient(to top, rgba(0,15,69,.94), rgba(0,15,69,.55) 55%, rgba(0,15,69,0));
  opacity: 0; transition: opacity .45s var(--ease); }
.un-proj:hover .un-proj__peek, .un-proj:focus-within .un-proj__peek { opacity: 1; }
.un-proj__peek p { color: #fff; font-size: var(--step--1); margin: 0 0 .9rem; max-width: 38ch; }
.un-proj__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.un-proj__tags i { font-style: normal; font-size: .82rem; font-weight: 600; border-radius: var(--r-pill); padding: .3rem .8rem; background: rgba(255,255,255,.16); color: #fff; }
.un-proj__meta { display: flex; align-items: baseline; gap: .8rem; padding-top: 1rem; flex-wrap: wrap; }
.un-proj__n { font-size: var(--step-2); }
.un-proj__c { font-size: var(--step--1); color: var(--amber-600); font-weight: 700; margin-left: auto; }
.un-proj__s { font-size: var(--step--1); color: var(--muted); flex-basis: 100%; }

/* ---------- faq ---------- */
.un-faq { width: var(--mid); margin-inline: auto; display: grid; gap: .6rem; }
.un-q { border-radius: var(--r-m); background: var(--navy-50); overflow: hidden; transition: background .4s var(--ease); }
.un-q.is-open { background: var(--amber-50); }
.un-q__b { width: 100%; background: none; border: 0; text-align: left; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); color: var(--navy);
  padding: clamp(1.2rem, 2.2vw, 1.8rem) clamp(1.3rem, 2.4vw, 2rem); display: flex; gap: 1.2rem; align-items: center; line-height: 1.18; }
.un-q__b i { font-style: normal; margin-left: auto; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 1.3rem; font-family: var(--font-body);
  transition: transform .45s var(--ease), background .4s var(--ease); }
.un-q.is-open .un-q__b i { transform: rotate(45deg); background: var(--amber); color: var(--navy); }
.un-q__a { overflow: hidden; height: 0; }
.un-q__a > div { padding: 0 clamp(1.3rem, 2.4vw, 2rem) clamp(1.3rem, 2.4vw, 1.9rem); }
.un-q__a p { color: var(--ink-2); margin: 0; max-width: 72ch; }

/* ---------- contact ---------- */
.un-contact { background: var(--navy); color: #fff; border-radius: clamp(28px, 5vw, 64px) clamp(28px, 5vw, 64px) 0 0; margin-top: var(--sp-m); }
.un-contact__in { width: var(--wide); margin-inline: auto; padding-block: var(--sp-l); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-m); }
@media (max-width: 1000px) { .un-contact__in { grid-template-columns: 1fr; gap: var(--sp-s); } }
.un-contact h2 { color: #fff; font-size: var(--step-6); margin-block: 1.2rem 1.3rem; }
.un-contact .un-label { background: rgba(255,255,255,.1); color: #fff; }
.un-contact .un-lede { color: var(--navy-200); }
.un-form { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); margin-top: var(--sp-s); }
@media (max-width: 640px) { .un-form { grid-template-columns: 1fr; } }
.un-f { display: flex; flex-direction: column; gap: .45rem; }
.un-f--full { grid-column: 1 / -1; }
.un-f label { font-size: var(--step--1); font-weight: 600; color: var(--navy-200); }
.un-f input, .un-f select, .un-f textarea {
  background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.18);
  color: #fff; font-family: var(--font-body); font-size: var(--step-0);
  padding: .95rem 1.1rem; border-radius: var(--r-s); width: 100%;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.un-f select { appearance: none; cursor: pointer; }
.un-f select option { background: var(--navy-900); color: #fff; }
.un-f textarea { resize: vertical; min-height: 130px; }
.un-f input:focus, .un-f select:focus, .un-f textarea:focus { outline: 0; border-color: var(--amber); background: rgba(255,255,255,.12); }
.un-f input::placeholder, .un-f textarea::placeholder { color: rgba(255,255,255,.42); }
.un-f.is-bad input, .un-f.is-bad textarea, .un-f.is-bad select { border-color: var(--amber); }
.un-f small { font-size: .85rem; color: var(--amber); min-height: 1.1em; font-weight: 600; }
.un-form .un-cta { grid-column: 1 / -1; justify-self: start; }
.un-form__done { grid-column: 1 / -1; background: rgba(255,255,255,.1); border-radius: var(--r-m); padding: 1.8rem; display: none; color: #fff; }
.un-form__done a { color: var(--amber); font-weight: 700; }
.un-form.is-sent .un-f, .un-form.is-sent .un-cta { display: none; }
.un-form.is-sent .un-form__done { display: block; }
.un-side dl { display: grid; gap: 1.6rem; margin: var(--sp-s) 0 0; }
.un-side dt { font-size: var(--step--1); font-weight: 600; color: var(--navy-200); margin-bottom: .35rem; }
.un-side dd { margin: 0; font-size: var(--step-1); font-weight: 600; }
.un-side dd a:hover { color: var(--amber); }
.un-side__note { background: rgba(255,255,255,.08); border-radius: var(--r-m); margin-top: var(--sp-s); padding: 1.4rem 1.5rem; color: var(--navy-200); font-size: var(--step--1); }

/* ---------- footer ---------- */
.un-foot { background: var(--navy); color: var(--navy-200); }
.un-foot__in { width: var(--wide); margin-inline: auto; padding-block: var(--sp-s); display: flex; flex-wrap: wrap; gap: 1rem var(--sp-s); align-items: center; font-size: var(--step--1); border-top: 1px solid rgba(255,255,255,.12); }
.un-foot__in nav { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-left: auto; }
.un-foot a:hover { color: var(--amber); }

/* ---------- motion primitives ---------- */
.js-reveal-clip { clip-path: inset(0 0 0 0); }
.js-on .js-reveal-clip { clip-path: inset(0 0 100% 0); }
.js-on .js-lift > * { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .un *, .un *::before, .un *::after { animation: none !important; transition-duration: .01ms !important; }
  .js-on .js-reveal-clip { clip-path: inset(0 0 0 0); }
  .js-on .js-lift > * { opacity: 1; }
  .un-hero__h .ln > span { transform: none !important; }
  html.js-on .un-hi::before { transform: rotate(-1.2deg) scaleX(1); }
}

/* amber highlight sweep — triggered by JS class, animated purely in CSS so it
   still lands if GSAP fails to load */
.un-hi::before { transition: transform .85s cubic-bezier(0.22, 1, 0.36, 1); }
html.js-on .un-hi.is-hi::before { transform: rotate(-1.2deg) scaleX(1); }

/* ==========================================================================
   Portfolio page
   ========================================================================== */
.un-crumbs { width: min(100% - (var(--gut) * 2), 1280px); margin-inline: auto; padding-top: clamp(1.6rem, 3vw, 2.6rem); font-size: var(--step--1); color: var(--muted); }
.un-crumbs a { color: var(--navy); font-weight: 600; }
.un-crumbs a:hover { color: var(--amber-600); }
.un-crumbs span { padding-inline: .45rem; color: var(--navy-200); }

.un-filters { width: min(100% - (var(--gut) * 2), 1280px); margin-inline: auto; display: flex; flex-wrap: wrap; gap: .55rem; padding-bottom: var(--sp-s); }
.un-chip {
  border: 2px solid var(--navy-200); background: transparent; color: var(--navy);
  font-family: var(--font-body); font-weight: 600; font-size: var(--step--1);
  padding: .6rem 1.15rem; border-radius: var(--r-pill); cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.un-chip:hover { border-color: var(--navy); }
.un-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Capped well below --wide: at 1920px the old grid stretched cards to ~440px
   each, which made the page feel empty. 1280px keeps three or four readable
   columns on any large screen. */
.un-grid { width: min(100% - (var(--gut) * 2), 1280px); margin-inline: auto;
  display: grid; gap: var(--sp-s) var(--gut);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); }
.un-card { display: flex; flex-direction: column; }
.un-card[hidden] { display: none; }
.un-card__plate { position: relative; overflow: hidden; border-radius: var(--r-l); aspect-ratio: 4 / 3; display: grid; place-items: center; }
.un-card__ghost { font-family: var(--font-display); font-weight: 600; font-size: clamp(4rem, 9vw, 7rem); line-height: 1; opacity: .24; user-select: none; transition: transform .6s var(--ease); }
.un-card:hover .un-card__ghost { transform: scale(1.07) rotate(-2deg); }
.un-card__peek { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.1rem, 2vw, 1.7rem); background: linear-gradient(to top, rgba(0,15,69,.95), rgba(0,15,69,.55) 60%, rgba(0,15,69,0));
  opacity: 0; transition: opacity .4s var(--ease); }
.un-card:hover .un-card__peek, .un-card:focus-within .un-card__peek { opacity: 1; }
.un-card__peek p { color: #fff; font-size: var(--step--1); margin: 0 0 .8rem; }
.un-card__meta { padding-top: .9rem; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.un-card__n { font-size: var(--step-2); }
.un-card__n a:hover { color: var(--amber-600); }
.un-card__c { font-size: var(--step--1); color: var(--amber-600); font-weight: 700; margin-left: auto; }
.un-card__s { font-size: var(--step--1); color: var(--muted); flex-basis: 100%; }
.un-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.un-tags i { font-style: normal; font-size: .8rem; font-weight: 600; border-radius: var(--r-pill); padding: .28rem .75rem; background: rgba(255,255,255,.18); color: #fff; }
.un-count { width: min(100% - (var(--gut) * 2), 1280px); max-width: none; margin-inline: auto;
  padding-bottom: 1.25rem; font-size: var(--step--1); color: var(--muted); }

/* form status messaging for the PHP endpoint */
.un-form__status { grid-column: 1 / -1; font-weight: 600; font-size: var(--step--1); min-height: 1.2em; color: var(--amber); }
.un-cta[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* Sections that contain a card grid share the grid's narrower track, so the
   heading, the filters and the cards all line up on one left edge. */
.un-sec--narrow .un-sec__head,
.un-sec--narrow .un-work { width: min(100% - (var(--gut) * 2), 1280px); }

/* ==========================================================================
   Hero background image — a real <img>, not a CSS background.
   Reason: if the file is missing you get a visible clue instead of silence,
   and you can change the filename in the HTML you are already editing rather
   than digging through this stylesheet.
   ========================================================================== */
.un-hero__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 72% center;
  pointer-events: none; user-select: none;
}
.un-hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
    #fff 0%, rgba(255,255,255,.96) 26%, rgba(255,255,255,.78) 46%,
    rgba(255,255,255,.34) 70%, rgba(255,255,255,.10) 100%);
}
@media (max-width: 1040px) {
  .un-hero__img { object-position: 78% center; }
  .un-hero__veil { background: linear-gradient(172deg, #fff 0%, rgba(255,255,255,.92) 42%, rgba(255,255,255,.66) 100%); }
}
.un-hero__blob, .un-hero__canvas { z-index: 1; }
.un-hero__in { z-index: 3; }
.un-status { z-index: 3; }

/* ==========================================================================
   Mobile navigation. Below 900px the nav used to be display:none with no
   menu button, which left phones with no way to reach any section.
   ========================================================================== */
.un-burger {
  display: none; flex: none; width: 46px; height: 46px; padding: 0;
  border: 2px solid var(--navy-200); border-radius: var(--r-pill);
  background: transparent; cursor: pointer;
  align-items: center; justify-content: center; gap: 5px; flex-direction: column;
}
.un-burger span {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--navy);
  transition: transform .32s var(--ease), opacity .2s var(--ease);
}
.un-mast.is-open .un-burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.un-mast.is-open .un-burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .un-burger { display: flex; }
  .un-mast__in { gap: .7rem; }
  .un-nav {
    display: grid; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--white); border-bottom: 1px solid var(--line);
    padding: .5rem var(--gut) 1.1rem; gap: 0;
    box-shadow: 0 24px 40px -30px rgba(0,28,121,.4);
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .38s var(--ease), visibility 0s linear .38s;
  }
  .un-mast.is-open .un-nav {
    max-height: 60vh; visibility: visible; overflow-y: auto;
    transition: max-height .38s var(--ease), visibility 0s;
  }
  .un-nav a { padding-block: .95rem; border-bottom: 1px solid var(--line-2); font-size: var(--step-1); }
  .un-nav a::after { display: none; }
  .un-mast__in { position: relative; }
  .un-mast { position: sticky; }
}
@media (max-width: 560px) {
  .un-logo__word { font-size: .95rem; }
  .un-logo__word small { font-size: .58rem; }
  .un-mast .un-cta { padding: .7rem 1.1rem; font-size: var(--step--1); }
}
@media (max-width: 400px) {
  .un-mast .un-cta span:first-child { font-size: 0; }
  .un-mast .un-cta span:first-child::after { content: "Enquire"; font-size: var(--step--1); }
}

/* ==========================================================================
   Responsive hardening.
   Grid and flex children default to min-width:auto, which means a long word or
   a wide child refuses to shrink and pushes the layout sideways. body has
   overflow-x:hidden, so instead of a scrollbar you just silently lose content
   off the right edge. These declarations let every track actually shrink.
   ========================================================================== */
.un-hero__in > *,
.un-sec__head > *,
.un-appr > *,
.un-appr__step > *,
.un-appr__steps > *,
.un-contact__in > *,
.un-svc__row > *,
.un-grid > *,
.un-card__meta > *,
.un-form > * { min-width: 0; }

.un h1, .un h2, .un h3, .un p, .un dd, .un li { overflow-wrap: break-word; }
.un-logo { min-width: 0; }
.un-logo__word { min-width: 0; overflow-wrap: anywhere; }

/* Long service titles were the most likely thing to blow the row out. */
.un-svc__t, .un-card__n, .un-proj__n { overflow-wrap: break-word; hyphens: auto; }

@media (max-width: 700px) {
  .un-sec--tint { border-radius: 20px; }
  .un-hero__card { border-radius: var(--r-m); }
  .un-appr__step { border-radius: var(--r-m); padding: 1.25rem; }
  .un-proj__plate, .un-card__plate { border-radius: var(--r-m); }
  .un-contact { border-radius: 24px 24px 0 0; }
  .un-q__b { font-size: var(--step-1); }
  .un-q__b i { width: 34px; height: 34px; font-size: 1.1rem; }
}
@media (max-width: 480px) {
  .un-svc__row { grid-template-columns: auto 1fr; padding-inline: .85rem; }
  .un-svc__go { display: none; }
  .un-svc__d { grid-column: 1 / -1; }
  .un-status__in { gap: .45rem 1rem; }
  .un-foot__in nav { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   FIX: CTA label colour
   `.un a { color: inherit }` scores (0,1,1); `.un-cta { color:#fff }` scores
   (0,1,0). Specificity beats source order, so every button that is an <a> was
   inheriting dark body text instead of white. Raising these to (0,2,0) settles
   it. The form's <button> was never affected, which is why only the header and
   hero buttons looked wrong.
   ========================================================================== */
.un a.un-cta,
.un button.un-cta { color: #fff; }
.un a.un-cta:hover,
.un a.un-cta:focus-visible,
.un button.un-cta:hover,
.un button.un-cta:focus-visible { color: var(--navy); }

.un a.un-cta--ghost,
.un a.un-cta--ghost:hover,
.un a.un-cta--ghost:focus-visible { color: var(--navy); }

.un a.un-cta--light,
.un button.un-cta--light,
.un a.un-cta--light:hover,
.un button.un-cta--light:hover,
.un button.un-cta--light:focus-visible { color: var(--navy); }

/* ==========================================================================
   Project cards: real homepage thumbnails
   Drop a screenshot at /assets/img/work/<slug>.jpg and it replaces the letter
   plate. A missing file removes itself and the gradient shows instead, so the
   grid never breaks while you are still collecting screenshots.
   ========================================================================== */
.un-card__shot {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: transform .6s var(--ease);
}
.un-card:hover .un-card__shot { transform: scale(1.03); }
.un-card__plate:has(.un-card__shot) .un-card__ghost { display: none; }

/* ==========================================================================
   FIX: hover panel was clipping its own text
   The blurb sat in a flex-end column inside an overflow:hidden box, so a long
   description plus two rows of tags pushed the opening lines out of the top.
   Clamped to four lines, tags given a fixed floor.
   ========================================================================== */
.un-card__peek, .un-proj__peek { z-index: 2; gap: .7rem; }
.un-card__peek p, .un-proj__peek p {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden; margin: 0;
  font-size: clamp(.78rem, .74rem + .18vw, .875rem); line-height: 1.45;
}
.un-card__peek .un-tags, .un-proj__peek .un-tags { flex: none; }
.un-tags i { font-size: .72rem; padding: .22rem .6rem; }

/* ==========================================================================
   FIX: card footer alignment
   `margin-left:auto` shoved the URL to the right edge, away from the name it
   belongs to. Name, URL and categories now stack on one left edge.
   ========================================================================== */
.un-card__meta {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .3rem; padding-top: .9rem;
}
.un-card__meta .un-card__c { margin-left: 0; order: 2; }
.un-card__meta .un-card__s { order: 3; }
.un-card__c { word-break: break-word; }

/* ==========================================================================
   FIX: card footer — plain block stacking, no flexbox.
   The previous flex version relied on `order` and on a later rule beating an
   earlier one. With any stale or mixed stylesheet in play that let the
   category line sit beside the title and spill into the next card. Block
   layout cannot do that: each line is its own row, always, and the
   (0,3,0) specificity beats every older card rule.
   ========================================================================== */
.un .un-card .un-card__meta { display: block; padding-top: 1rem; }
.un .un-card .un-card__meta > * { display: block; margin: 0; max-width: 100%; }
.un .un-card .un-card__n { font-size: var(--step-2); line-height: 1.12; margin-bottom: .4rem; }
.un .un-card .un-card__c { font-size: var(--step--1); font-weight: 700; color: var(--amber-600); margin-bottom: .2rem; }
.un .un-card .un-card__s { font-size: var(--step--1); color: var(--muted); }