/* ==========================================================================
   Tanglaw Digital — static site stylesheet
   Original implementation. Layout structure follows a standard agency
   one-page-flow pattern (split hero, credibility strip, service grid,
   project showcase, numbered list, blog feed, multi-column footer).
   Palette: navy #001842 + amber #FEA305, both sampled from the torch logo —
   tanglaw = guiding light.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. tokens */

:root {
  /* ink scale — sampled from the Tanglaw torch logo (#001842) */
  --ink:        #001842;
  --ink-2:      #04214f;
  --ink-3:      #0b2d63;
  --ink-4:      #1a3c78;

  /* paper scale */
  --paper:      #ffffff;
  --paper-2:    #f6f7fa;
  --paper-3:    #ebeff6;

  /* text */
  --fg:         #0d1830;
  --fg-2:       #47536b;
  --fg-3:       #6b7793;
  --fg-on-ink:  #ffffff;
  --fg-on-ink-2:#a9b6ce;

  /* accent — sampled from the torch flame (#FEA305) */
  --accent:     #fea305;
  --accent-2:   #ffd37a;
  --accent-ink: #001842;

  --line:       #e0e5ef;
  --line-ink:   rgba(255, 255, 255, .14);

  /* type */
  --font-head: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* rhythm */
  --wrap: 1240px;
  --gut: 24px;
  --sec-y: clamp(72px, 9vw, 130px);
  --radius: 18px;
  --radius-sm: 10px;

  --shadow-sm: 0 2px 8px rgba(0, 24, 66, .07);
  --shadow:    0 18px 46px -18px rgba(0, 24, 66, .24);
  --shadow-lg: 0 40px 90px -30px rgba(0, 24, 66, .4);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ----------------------------------------------------------------- 2. base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

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

body.nav-open { overflow: hidden; }

img, svg { max-width: 100%; display: block; height: auto; }

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 .6em;
  color: var(--fg);
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5.1vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.9rem); }
h3 { font-size: clamp(1.45rem, 2.2vw, 1.95rem); }
h4 { font-size: 1.3rem; }
h5 { font-size: 1.14rem; letter-spacing: -0.015em; }

/* Card titles need h4/h5's *size* but a heading *level* that fits the document
   outline — a card under an h2 must be an h3, not an h4 or h5, or screen
   readers and search engines read a broken hierarchy. This decouples the two:
   pick the level for the outline, then add .h4 / .h5 for the size. */
.h4 { font-size: 1.3rem; }
.h5 { font-size: 1.14rem; letter-spacing: -0.015em; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.2em; padding-left: 1.2em; }
li { margin-bottom: .45em; }

strong { font-weight: 650; color: var(--fg); }

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff;
  padding: 12px 20px; z-index: 999; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------- 3. layout */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--narrow { max-width: 880px; }
.wrap--prose  { max-width: 760px; }

.sec { padding-block: var(--sec-y); position: relative; }
.sec--tight { padding-block: clamp(52px, 6vw, 84px); }
.sec--flush-t { padding-top: 0; }
.sec--flush-b { padding-bottom: 0; }

.sec--paper { background: var(--paper-2); }
.sec--ink {
  background: var(--ink);
  color: var(--fg-on-ink-2);
}
.sec--ink h1, .sec--ink h2, .sec--ink h3,
.sec--ink h4, .sec--ink h5 { color: var(--fg-on-ink); }

/* two-column split used by hero + every info band */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
.split--wide-l { grid-template-columns: 1.08fr .92fr; }
.split--wide-r { grid-template-columns: .92fr 1.08fr; }
.split__media--first { order: -1; }

.grid { display: grid; gap: 26px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.center { text-align: center; }
.center .sec-head { margin-inline: auto; }

/* ------------------------------------------------------- 4. section heading */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 18px;
}
.eyebrow::before {
  content: '';
  width: 26px; height: 2px;
  background: var(--accent);
  flex: none;
}
.center .eyebrow::after {
  content: '';
  width: 26px; height: 2px;
  background: var(--accent);
  flex: none;
}
.sec--ink .eyebrow { color: var(--accent-2); }

.sec-head { max-width: 700px; margin-bottom: clamp(36px, 4vw, 58px); }
.sec-head > :last-child { margin-bottom: 0; }
.sec-head p { color: var(--fg-2); font-size: 1.06rem; }
.sec--ink .sec-head p { color: var(--fg-on-ink-2); }

.lead {
  font-size: clamp(1.06rem, 1.5vw, 1.2rem);
  line-height: 1.68;
  color: var(--fg-2);
}
.sec--ink .lead { color: var(--fg-on-ink-2); }

/* -------------------------------------------------------------- 5. buttons */

/* label is duplicated in markup — the pair slides on hover */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-bg);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease),
              color .3s var(--ease), transform .3s var(--ease),
              box-shadow .3s var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -12px rgba(254, 163, 5, .6);
}

.btn__t {
  position: relative;
  display: block;
  overflow: hidden;
  height: 1.45em;
}
.btn__t span {
  display: block;
  transition: transform .38s var(--ease);
}
.btn:hover .btn__t span { transform: translateY(-100%); }

.btn svg { flex: none; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--fg);
  box-shadow: none;
}

.btn--ink { --btn-bg: var(--ink); --btn-fg: #fff; }
.btn--ink:hover { box-shadow: 0 14px 28px -14px rgba(0, 24, 66, .55); }

.btn--on-ink-ghost {
  --btn-bg: transparent;
  --btn-fg: #fff;
  border-color: var(--line-ink);
}
.btn--on-ink-ghost:hover { border-color: #fff; box-shadow: none; }

.btn--sm { padding: 12px 22px; font-size: .88rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 32px;
}
.center .btn-row { justify-content: center; }

/* inline text link with animated underline */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  font-size: .93rem;
  color: var(--fg);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size .35s var(--ease), color .25s var(--ease);
}
.tlink:hover { background-size: 100% 2px; }
.tlink svg { flex: none; transition: transform .3s var(--ease); }
.tlink:hover svg { transform: translateX(4px); }
.sec--ink .tlink { color: #fff; }

/* --------------------------------------------------------------- 6. header */

.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease),
              background .3s var(--ease);
}
.hdr.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 4px 22px -14px rgba(0, 24, 66, .3);
}

.hdr__in {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 84px;
}

/* Brand lockup — the torch as an image, the wordmark as live text. Text
   stays sharp at any size, recolours for the dark footer, and search
   engines can read the business name. "digital" tucks under "tanglaw"
   in amber, mirroring the logo's own arrangement. */
.brand {
  flex: none;
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.brand__mark {
  display: block;
  height: 42px;
  width: auto;   /* the mark is 96x160 — let the ratio set the width */
}
.brand__wm {
  display: grid;
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: .95;
  color: var(--ink);
  white-space: nowrap;
}
.brand__wm > span {
  justify-self: end;
  font-size: .56em;
  font-weight: 600;
  letter-spacing: .13em;
  color: var(--accent);
}
.brand--light .brand__wm { color: #fff; }

.nav { display: flex; align-items: center; gap: 4px; }

.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 15px;
  font-size: .95rem;
  font-weight: 550;
  color: var(--fg-2);
  border-radius: 8px;
  transition: color .22s var(--ease);
}
.nav__link:hover,
.nav__item:hover > .nav__link { color: var(--fg); }
.nav__link[aria-current] { color: var(--fg); font-weight: 650; }
.nav__link[aria-current]::after {
  content: '';
  position: absolute;
  left: 15px; right: 15px; bottom: 4px;
  height: 2px;
  background: var(--accent);
}

.nav__caret { transition: transform .25s var(--ease); }
.nav__item:hover .nav__caret { transform: rotate(180deg); }

.nav__sub {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 10px;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .24s var(--ease), transform .24s var(--ease),
              visibility .24s;
}
.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__sub li { margin: 0; }
.nav__sub a {
  display: block;
  padding: 11px 14px;
  border-radius: 9px;
  font-size: .92rem;
  font-weight: 550;
  color: var(--fg-2);
  transition: background .2s, color .2s;
}
.nav__sub a:hover { background: var(--paper-2); color: var(--fg); }

.hdr__cta { flex: none; }

.burger {
  display: none;
  flex: none;
  width: 46px; height: 46px;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.burger span {
  position: absolute;
  left: 13px;
  width: 20px; height: 2px;
  background: var(--fg);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s;
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 28px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* mobile drawer */
.drawer {
  position: fixed;
  inset: 84px 0 0;
  z-index: 99;
  background: var(--paper);
  padding: 26px var(--gut) 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .38s var(--ease);
  display: none;
}
.drawer.is-open { transform: translateX(0); }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer a {
  display: block;
  padding: 16px 2px;
  font-family: var(--font-head);
  font-size: 1.32rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--line);
}
.drawer .drawer__sub a {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--fg-2);
  padding-left: 18px;
}
/* Current page in the drawer. The amber bar echoes the underline the desktop
   nav uses, so "you are here" reads the same on both. */
.drawer ul a[aria-current] {
  color: var(--ink);
  box-shadow: inset 3px 0 0 var(--accent);
  padding-left: 12px;
}
.drawer .btn { width: 100%; justify-content: center; margin-top: 28px; }

/* Phone and hours at the foot of the drawer — on a phone, calling is
   usually what the visitor actually wants. */
.drawer__nap {
  margin: 30px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 3px;
}
.drawer__nap a {
  display: inline;
  padding: 0;
  border: 0;
  font-family: var(--font-head);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}
.drawer__nap span {
  font-size: .9rem;
  color: var(--fg-3);
}

/* ----------------------------------------------------------------- 7. hero */

.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(56px, 7vw, 104px) clamp(64px, 8vw, 116px);
  overflow: hidden;
  /* The homepage gets the light version of the banner art. The inner pages use
     the dark one under white text; here the text is dark on white, so a navy
     background would mean restyling the whole hero. Same artwork, light
     palette, and the fade below keeps it well clear of the headline. */
  background-image: url('/assets/img/banner-home.svg');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
.hero::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: -34%; right: -14%;
  width: 780px; height: 780px;
  background: radial-gradient(circle, rgba(254, 163, 5, .17) 0%, rgba(254, 163, 5, 0) 68%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, .94) 0%,
    rgba(255, 255, 255, .86) 44%,
    rgba(255, 255, 255, .55) 74%,
    rgba(255, 255, 255, .3) 100%);
  pointer-events: none;
}
.hero__in { position: relative; z-index: 2; }
.hero h1 { margin-bottom: .38em; }

/* copy column — sits above the decorative glow */
.hero__copy { position: relative; z-index: 1; }

/* rotating word line under the H1 */
.hero__rot {
  font-family: var(--font-head);
  font-size: clamp(1.2rem, 2.1vw, 1.62rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--fg);
  margin: 0 0 .85em;
}

/* rotating word */
.rotator {
  display: inline-grid;
  vertical-align: bottom;
  color: var(--accent);
  overflow: hidden;
}
.rotator > span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(60%);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.rotator > span.is-on { opacity: 1; transform: none; }

/* offset image pair */
.hero__media { position: relative; }
.hero__media img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 100%;
}
.hero__media--stack { padding: 0 0 76px 58px; }
.hero__media--stack .hero__img-2 {
  position: absolute;
  bottom: 0; left: 0;
  width: 47%;
  border: 6px solid var(--paper);
}

.hero__badge {
  position: absolute;
  top: 26px; left: -14px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--paper);
  border-radius: 14px;
  padding: 13px 20px 13px 15px;
  box-shadow: var(--shadow);
  z-index: 2;
}
.hero__badge b {
  font-family: var(--font-head);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--fg);
}
.hero__badge small {
  display: block;
  font-size: .74rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.hero__badge-mark {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--accent);
  display: grid;
  place-items: center;
  flex: none;
}

/* ------------------------------------------------- 8. credibility strip */

.credbar {
  border-block: 1px solid var(--line);
  background: var(--paper);
}
.credbar__in {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.cred {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 34px 30px;
  border-left: 1px solid var(--line);
}
.cred:first-child { border-left: 0; padding-left: 0; }
.cred:last-child { padding-right: 0; }
.cred__ico {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(254, 163, 5, .13);
  color: #a86a06;
  display: grid;
  place-items: center;
}
.cred b {
  display: block;
  font-family: var(--font-head);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 2px;
}
.cred span { font-size: .93rem; color: var(--fg-3); line-height: 1.5; }

/* ------------------------------------------------------- 9. media frames */

.frame { position: relative; }
.frame img {
  border-radius: var(--radius);
  width: 100%;
}
.frame--shadow img { box-shadow: var(--shadow); }
.frame--offset::after {
  content: '';
  position: absolute;
  inset: 22px -22px -22px 22px;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  z-index: -1;
}

/* --------------------------------------------------------- 10. icon cards */

.icards { display: grid; gap: 16px; margin-top: 34px; }
.icard {
  display: flex;
  gap: 16px;
  padding: 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 15px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease);
}
.icard:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.icard__ico {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--accent);
  display: grid;
  place-items: center;
}
.icard .h5 { margin-bottom: 5px; }
.icard p { font-size: .93rem; color: var(--fg-3); margin-bottom: 10px; }

/* ------------------------------------------------------- 11. check lists */

.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checks--2 { grid-template-columns: repeat(2, 1fr); gap: 12px 30px; }
.checks li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
  font-size: .98rem;
  color: var(--fg-2);
  line-height: 1.55;
}
.checks li::before {
  content: '';
  flex: none;
  width: 21px; height: 21px;
  margin-top: 3px;
  border-radius: 50%;
  background: rgba(254, 163, 5, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a86a06' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.sec--ink .checks li { color: var(--fg-on-ink-2); }
.sec--ink .checks li::before {
  background-color: rgba(254, 163, 5, .2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd37a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.crosses { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.crosses li {
  display: flex; gap: 12px; align-items: flex-start; margin: 0;
  font-size: .98rem; color: var(--fg-2); line-height: 1.55;
}
.crosses li::before {
  content: '';
  flex: none;
  width: 21px; height: 21px;
  margin-top: 3px;
  border-radius: 50%;
  background: rgba(200, 60, 60, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5423f' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* -------------------------------------------------------- 12. media cards */

.mcard {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease);
  height: 100%;
}
.mcard:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.mcard__media { position: relative; overflow: hidden; aspect-ratio: 16 / 11; }
.mcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.mcard:hover .mcard__media img { transform: scale(1.06); }

.mcard__num {
  position: absolute;
  top: 14px; left: 14px;
  background: var(--paper);
  color: var(--fg);
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 6px 12px;
  border-radius: 999px;
}

.mcard__body {
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.mcard__body .h5 { margin-bottom: 9px; }
.mcard__body p { font-size: .95rem; color: var(--fg-3); }
.mcard__body .tlink { margin-top: auto; padding-top: 16px; align-self: flex-start; }

/* blog card meta */
.pmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 12px;
}
.pmeta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.tag {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(254, 163, 5, .15);
  color: #a86c17;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.sec--ink .tag { background: rgba(254, 163, 5, .18); color: var(--accent-2); }

/* ------------------------------------------------------ 13. work showcase */

.works { display: grid; gap: clamp(46px, 6vw, 84px); }

.work {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 4.5vw, 66px);
  align-items: center;
}
.work:nth-child(even) .work__media { order: 2; }

.work__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.work__media img { width: 100%; transition: transform .8s var(--ease); }
.work:hover .work__media img { transform: scale(1.04); }

.work__url {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .88rem;
  font-weight: 650;
  color: var(--fg-3);
  margin-bottom: 14px;
}
.work h3 { margin-bottom: .5em; }
.work__body > p { color: var(--fg-2); }
.work__list { margin-top: 22px; }

/* ------------------------------------------------------ 14. numbered list */

.nlist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-ink);
}
.nrow {
  padding: 40px 34px 40px 0;
  border-left: 1px solid var(--line-ink);
  padding-left: 34px;
  display: flex;
  flex-direction: column;
}
.nrow:first-child { border-left: 0; padding-left: 0; }
.nrow__num {
  font-family: var(--font-head);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  margin-bottom: 20px;
  opacity: .9;
}
.nrow .h4 { color: var(--fg-on-ink); margin-bottom: 10px; }
.nrow p { font-size: .96rem; color: var(--fg-on-ink-2); }
.nrow .tlink { margin-top: auto; padding-top: 20px; align-self: flex-start; }

/* -------------------------------------------------------- 15. stat / info */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat {
  padding: 30px 26px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-ink);
}
.stat b {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(2rem, 3.2vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 10px;
}
.stat span { font-size: .93rem; color: var(--fg-on-ink-2); line-height: 1.5; }

/* reason cards on the light "why us" band */
.reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.reason {
  padding: 28px 26px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 15px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.reason:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.reason__ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(254, 163, 5, .14);
  color: #a86a06;
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.reason .h5 { margin-bottom: 7px; }
.reason p { font-size: .94rem; color: var(--fg-3); }

/* ------------------------------------------------------- 16. timeline */

.tl { position: relative; padding-left: 34px; }
.tl::before {
  content: '';
  position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), rgba(254, 163, 5, .12));
}
.tl__row { position: relative; padding-bottom: 34px; }
.tl__row:last-child { padding-bottom: 0; }
.tl__row::before {
  content: '';
  position: absolute;
  left: -34px; top: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--accent);
}
.tl__yr {
  display: inline-block;
  font-family: var(--font-head);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #a86c17;
  background: rgba(254, 163, 5, .14);
  padding: 5px 13px;
  border-radius: 999px;
  margin-bottom: 11px;
}
.tl__row p { color: var(--fg-2); font-size: .98rem; }

/* --------------------------------------------------------- 17. quote band */

.quote {
  position: relative;
  padding: clamp(38px, 4.5vw, 62px);
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  overflow: hidden;
}
.quote::before {
  content: '';
  position: absolute;
  top: -40%; left: -8%;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(254, 163, 5, .2) 0%, transparent 68%);
}
.quote__mark {
  position: relative;
  font-family: var(--font-head);
  font-size: 4.4rem;
  line-height: .7;
  color: var(--accent);
  margin-bottom: 14px;
}
.quote p {
  position: relative;
  font-family: var(--font-head);
  font-size: clamp(1.24rem, 2.3vw, 1.85rem);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}

/* -------------------------------------------------------- 18. big CTA band */

.cta {
  position: relative;
  background: var(--ink);
  color: var(--fg-on-ink-2);
  overflow: hidden;
}
.cta::before {
  content: '';
  position: absolute;
  bottom: -55%; left: 50%;
  transform: translateX(-50%);
  width: 1000px; height: 1000px;
  background: radial-gradient(circle, rgba(254, 163, 5, .16) 0%, transparent 62%);
  pointer-events: none;
}
.cta__in { position: relative; }
.cta h2 { color: #fff; }
.cta .lead { color: var(--fg-on-ink-2); }
.cta__note {
  margin-top: 20px;
  font-size: .88rem;
  color: rgba(255, 255, 255, .55);
}

/* ------------------------------------------------------- 19. page banner */

/* The dark strip at the top of every inner page. Three layers, bottom to top:
   the navy fill, the background artwork, then a navy gradient that darkens the
   left side where the heading sits. The gradient is what makes this safe — it
   means a background image can be swapped for anything, including a busy
   photograph, without white text becoming unreadable. */

.phero {
  position: relative;
  isolation: isolate;
  background-color: var(--ink);
  background-image: var(--phero-bg, none);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  color: var(--fg-on-ink-2);
  padding-block: clamp(58px, 7vw, 104px);
  overflow: hidden;
}
.phero::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: -46%; right: -8%;
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(254, 163, 5, .18) 0%, transparent 66%);
  pointer-events: none;
}

/* Readability overlay. Heaviest on the left, thinning to the right so the
   artwork still shows where there are no words. Tune these four percentages
   if a background ever fights the text — nothing else needs touching. */
.phero::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(0, 24, 66, .95) 0%,
    rgba(0, 24, 66, .88) 40%,
    rgba(0, 24, 66, .62) 72%,
    rgba(0, 24, 66, .44) 100%);
  pointer-events: none;
}

.phero__in { position: relative; z-index: 2; max-width: 860px; }
.phero h1 { color: #fff; }
.phero .lead { color: var(--fg-on-ink-2); }
.phero .eyebrow { color: var(--accent-2); }

/* ---------------------------------------------------------------------------
   Which background each page gets.

   This is the only list of it. To change a page's background you have two
   choices, and the first needs no code at all:

     1. Replace the file in html/assets/img/ keeping the same name. Nothing
        here changes.
     2. Put a new file in html/assets/img/ under any name and edit the one
        line below. A photograph works: url('/assets/img/banner-about.jpg').

   Privacy and terms share one, and all six articles share one, because they
   are the same kind of page and separate files would be weight for nothing.
   --------------------------------------------------------------------------- */
.phero--about     { --phero-bg: url('/assets/img/banner-about.svg'); }
.phero--services  { --phero-bg: url('/assets/img/banner-services.svg'); }
.phero--portfolio { --phero-bg: url('/assets/img/banner-portfolio.svg'); }
.phero--blog      { --phero-bg: url('/assets/img/banner-blog.svg'); }
.phero--contact   { --phero-bg: url('/assets/img/banner-contact.svg'); }
.phero--article   { --phero-bg: url('/assets/img/banner-article.svg'); }
.phero--legal     { --phero-bg: url('/assets/img/banner-legal.svg'); }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  font-size: .84rem;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 22px;
}
.crumbs a { color: rgba(255, 255, 255, .78); }
.crumbs a:hover { color: var(--accent-2); }
.crumbs span[aria-hidden] { opacity: .45; }

/* --------------------------------------------------- 20. service detail */

.svc {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(32px, 4.5vw, 64px);
  align-items: start;
  padding-block: clamp(48px, 5.5vw, 78px);
  border-top: 1px solid var(--line);
}
.svc:first-of-type { border-top: 0; padding-top: 0; }
.svc:nth-of-type(even) .svc__media { order: 2; }

.svc__media { position: sticky; top: 110px; }
.svc__media img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; }

.svc__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 13px;
  background: var(--ink);
  color: var(--accent);
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 700;
  margin-bottom: 18px;
}
.svc h2 { font-size: clamp(1.55rem, 2.5vw, 2.15rem); margin-bottom: .45em; }
.svc__sub {
  font-family: var(--font-head);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.01em;
  margin-bottom: .7em;
}
.svc__body > p { color: var(--fg-2); }

.subhead {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 30px 0 14px;
}

.forwho {
  margin-top: 26px;
  padding: 20px 22px;
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
}
.forwho b {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.forwho p { font-size: .96rem; color: var(--fg-2); }

.kws {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.kw {
  font-size: .78rem;
  font-weight: 600;
  color: var(--fg-3);
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 999px;
}

/* -------------------------------------------------------- 21. contact page */

.contact-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(32px, 4.5vw, 62px);
  align-items: start;
}

.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(26px, 3.4vw, 42px);
  box-shadow: var(--shadow-sm);
}

.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: .84rem;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--fg);
  margin-bottom: 8px;
}
.field label .opt { font-weight: 500; color: var(--fg-3); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: inherit;
  font-size: .97rem;
  color: var(--fg);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 11px;
  transition: border-color .22s, box-shadow .22s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field select {
  appearance: none;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7793' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat;
  padding-right: 42px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(254, 163, 5, .18);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* A field the server rejected. Marked on the field, not just summarised at
   the top, so the visitor can see which answer needs fixing. */
.field.has-err input,
.field.has-err select,
.field.has-err textarea { border-color: #c0392b; }
.field.has-err input:focus,
.field.has-err select:focus,
.field.has-err textarea:focus {
  border-color: #c0392b;
  box-shadow: 0 0 0 4px rgba(192, 57, 43, .14);
}
.field__err {
  display: block;
  margin-top: 7px;
  font-size: .84rem;
  font-weight: 550;
  color: #c0392b;
}

/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   inputs, and screen readers still get the "leave this empty" label. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note { font-size: .84rem; color: var(--fg-3); margin-top: 16px; }

.form-msg {
  display: none;
  margin-top: 20px;
  padding: 15px 18px;
  border-radius: 11px;
  font-size: .93rem;
  font-weight: 550;
}
.form-msg.is-on { display: block; }
.form-msg--ok  { background: rgba(38, 140, 92, .1);  color: #1d6b46; }
.form-msg--err { background: rgba(192, 57, 43, .09); color: #a5291c; }

.cinfo { display: grid; gap: 14px; }
.cinfo__row {
  display: flex;
  gap: 15px;
  padding: 20px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cinfo__row:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.cinfo__ico {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--accent);
  display: grid; place-items: center;
}
.cinfo__row b {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 4px;
}
.cinfo__row strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin-bottom: 3px;
}
.cinfo__row a strong:hover { color: #a86c17; }
.cinfo__row span { font-size: .87rem; color: var(--fg-3); line-height: 1.5; }

/* ------------------------------------------------------- 22. FAQ accordion */

.faq { display: grid; gap: 12px; }
.faq__item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 21px 24px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-head);
  font-size: 1.04rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.faq__q::after {
  content: '';
  flex: none;
  width: 22px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001842' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .32s var(--ease);
}
.faq__item.is-open .faq__q::after { transform: rotate(135deg); }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .34s var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  padding: 0 24px 23px;
  font-size: .97rem;
  color: var(--fg-2);
}

/* ---------------------------------------------------------- 23. blog / prose */

.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.post-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: .84rem;
  color: rgba(255, 255, 255, .62);
  margin-bottom: 20px;
}

.prose { font-size: 1.045rem; line-height: 1.8; color: var(--fg-2); }
.prose > :first-child { margin-top: 0; }
.prose h2 {
  font-size: clamp(1.45rem, 2.4vw, 1.95rem);
  color: var(--fg);
  margin: 2.1em 0 .6em;
}
.prose h3 {
  font-size: clamp(1.2rem, 1.9vw, 1.42rem);
  color: var(--fg);
  margin: 1.9em 0 .55em;
}
.prose p { margin: 0 0 1.25em; }
.prose strong { color: var(--fg); }
.prose > .checks, .prose > .crosses { margin: 1.5em 0 1.8em; }
.prose .kicker {
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  line-height: 1.62;
  color: var(--fg);
  font-weight: 500;
  margin-bottom: 1.4em;
  padding-left: 20px;
  border-left: 3px solid var(--accent);
}

.pricerows { display: grid; gap: 10px; margin: 1.6em 0 1.9em; }
.pricerow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 17px 20px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.pricerow b {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.pricerow span { font-size: .93rem; color: var(--fg-3); }
.pricerow--hi { background: rgba(254, 163, 5, .09); border-color: rgba(254, 163, 5, .35); }

.steps { counter-reset: s; display: grid; gap: 16px; margin: 1.6em 0 1.9em; }
.step {
  counter-increment: s;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.step::before {
  content: counter(s);
  flex: none;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--accent);
  font-family: var(--font-head);
  font-size: .93rem;
  font-weight: 700;
  display: grid; place-items: center;
}
.step > div { padding-top: 4px; }
.step b { display: block; color: var(--fg); font-weight: 650; margin-bottom: 3px; }
.step p { margin: 0; font-size: .98rem; }

.ctable { width: 100%; border-collapse: collapse; margin: 1.6em 0 1.9em; font-size: .96rem; }
.ctable th, .ctable td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.ctable th {
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
  background: var(--paper-2);
}
.ctable td:first-child { font-weight: 650; color: var(--fg); }

.inline-cta {
  margin: 2.2em 0 0;
  padding: 30px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.inline-cta h3 { margin-bottom: .5em; }
.inline-cta p { font-size: .99rem; }

.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: .88rem;
  color: var(--fg-3);
}
.share a {
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid; place-items: center;
  color: var(--fg-2);
  transition: background .22s, color .22s, border-color .22s;
}
.share a:hover { background: var(--ink); color: var(--accent); border-color: var(--ink); }

/* ----------------------------------------------------------- 24. legal page */

.legal { font-size: 1.01rem; line-height: 1.78; color: var(--fg-2); }
.legal h2 {
  font-size: 1.24rem;
  color: var(--fg);
  margin: 2.1em 0 .55em;
  padding-top: 1.6em;
  border-top: 1px solid var(--line);
}
.legal h2:first-of-type { padding-top: 0; border-top: 0; margin-top: 1.4em; }
.legal ul { margin: 0 0 1.2em; }
.legal li { color: var(--fg-2); }

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding: 20px 24px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: .9rem;
  color: var(--fg-3);
}
.legal-meta b { color: var(--fg); font-weight: 650; }

.toc {
  padding: 24px 26px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-top: 26px;
}
.toc b {
  display: block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 12px;
}
.toc ol { columns: 2; column-gap: 34px; margin: 0; padding-left: 1.3em; }
.toc li { font-size: .93rem; margin-bottom: 6px; }
.toc a:hover { color: #a86c17; }

/* --------------------------------------------------------------- 25. footer */

.ftr {
  background: var(--ink);
  color: var(--fg-on-ink-2);
  padding-top: clamp(56px, 6vw, 84px);
}

.ftr__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-ink);
}
.ftr__contacts { display: flex; flex-wrap: wrap; gap: 14px 42px; }
.ftr__contacts > div b {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  margin-bottom: 5px;
}
.ftr__contacts a, .ftr__contacts span {
  font-family: var(--font-head);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
}
.ftr__contacts a:hover { color: var(--accent); }

.socials { display: flex; gap: 10px; }
.socials a {
  width: 42px; height: 42px;
  border: 1px solid var(--line-ink);
  border-radius: 12px;
  display: grid; place-items: center;
  color: #fff;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.socials a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  transform: translateY(-2px);
}

.ftr__mid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-block: clamp(40px, 5vw, 62px);
}
/* The footer brand is the same lockup as the header, one step larger.
   Scoped to the block so it cannot fight .brand__mark's own sizing. */
.ftr__about .brand { margin: 0 0 20px; }
.ftr__about .brand__mark { height: 46px; }
.ftr__about .brand__wm { font-size: 1.42rem; }
.ftr__about p { font-size: .94rem; max-width: 330px; }

/* Postal address. <address> is italic by default, which reads as an aside
   rather than a fact worth trusting. */
.ftr__addr {
  font-style: normal;
  margin-top: 18px;
  max-width: 330px;   /* match the paragraph above it */
  font-size: .9rem;
  line-height: 1.8;
  color: var(--fg-on-ink-2);
}

.ftr__col b {
  display: block;
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
}
.ftr__col ul { list-style: none; margin: 0; padding: 0; }
.ftr__col li { margin-bottom: 11px; }
.ftr__col a {
  font-size: .94rem;
  color: var(--fg-on-ink-2);
  transition: color .22s, padding-left .22s;
}
.ftr__col a:hover { color: var(--accent); padding-left: 4px; }

.ftr__bot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 26px;
  border-top: 1px solid var(--line-ink);
  font-size: .87rem;
  color: rgba(255, 255, 255, .5);
}
.ftr__bot a { color: rgba(255, 255, 255, .7); }
.ftr__bot a:hover { color: var(--accent); }
.ftr__bot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* back to top */
.totop {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 90;
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--ink);
  color: var(--accent);
  border: 0;
  display: grid; place-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  box-shadow: var(--shadow);
}
.totop.is-on { opacity: 1; visibility: visible; transform: none; }
.totop:hover { background: var(--accent); color: var(--accent-ink); }

/* ------------------------------------------------------ 26. reveal on scroll */

.rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.rv.is-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; }
.rv-d2 { transition-delay: .16s; }
.rv-d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ----------------------------------------------------------- 27. responsive */

@media (max-width: 1080px) {
  .ftr__mid { grid-template-columns: 1fr 1fr 1fr; }
  .ftr__about { grid-column: 1 / -1; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .nav, .hdr__cta { display: none; }
  .burger, .drawer { display: block; }

  .split, .work, .svc, .contact-grid, .hero .split {
    grid-template-columns: 1fr;
  }
  .split__media--first, .work:nth-child(even) .work__media,
  .svc:nth-of-type(even) .svc__media { order: -1; }

  .svc__media { position: static; }
  .svc:first-of-type { padding-top: 0; }

  .hero__media--stack { padding: 0 0 62px 40px; max-width: 620px; }
  .hero__badge { left: 0; }

  .grid--3, .grid--4, .posts { grid-template-columns: repeat(2, 1fr); }

  .nlist { grid-template-columns: 1fr; }
  .nrow { border-left: 0; padding: 30px 0; border-top: 1px solid var(--line-ink); }
  .nrow:first-child { border-top: 0; padding-top: 0; }

  .credbar__in { grid-template-columns: 1fr; }
  .cred { border-left: 0; border-top: 1px solid var(--line); padding: 24px 0; }
  .cred:first-child { border-top: 0; }

  .toc ol { columns: 1; }
}

@media (max-width: 700px) {
  body { font-size: 16.5px; }
  .grid--2, .grid--3, .grid--4, .posts,
  .checks--2, .reasons, .stats, .field-row { grid-template-columns: 1fr; }
  .hero__media--stack { padding-bottom: 54px; padding-left: 28px; }
  .hero__badge { position: static; margin-bottom: 22px; display: inline-flex; }
  .ftr__mid { grid-template-columns: 1fr 1fr; }
  .ftr__bot { flex-direction: column; align-items: flex-start; }
  .ctable { font-size: .89rem; }
  .ctable th, .ctable td { padding: 11px 10px; }
}

@media (max-width: 460px) {
  .ftr__mid { grid-template-columns: 1fr; }
  .btn { width: 100%; justify-content: center; }
  .btn-row .btn { width: 100%; }
}

/* ------------------------------------------------------ 28. cookie consent */

/* Only ever in the page when Google Analytics is switched on — see
   inc/consent.php. Sits at the bottom rather than across the middle: a
   full-screen consent wall blocks the content someone arrived to read, which
   makes the answer a reflex instead of a choice. */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;              /* under the drawer (100), over the page */
  background: var(--ink);
  color: var(--fg-on-ink);
  border-top: 2px solid var(--accent);
  box-shadow: 0 -18px 46px -18px rgba(0, 24, 66, .5);

  /* Starts just off the bottom edge and slides up. */
  transform: translateY(100%);
  transition: transform .4s var(--ease);
}
.consent.is-on { transform: translateY(0); }

.consent__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 16px var(--gut);
  display: flex;
  align-items: center;
  gap: 20px 28px;
  flex-wrap: wrap;
}

.consent__text {
  margin: 0;
  flex: 1 1 420px;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--fg-on-ink-2);
}
.consent__text a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* Both buttons keep their real size. See inc/consent.php for why the decline
   button is not shrunk into small print. */
.consent__btns {
  display: flex;
  gap: 10px;
  flex: none;
}

@media (max-width: 560px) {
  .consent__inner { padding: 14px 18px; }
  .consent__btns { width: 100%; }
  .consent__btns .btn { flex: 1; justify-content: center; }
}

/* Someone who asked their browser to reduce motion gets the bar without the
   slide — it still needs to arrive, just not travel. */
@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; }
}

/* ------------------------------------------------------------- 29. printing */

@media print {
  .hdr, .drawer, .totop, .ftr__top, .socials, .btn, .share, .consent { display: none !important; }
  body { font-size: 11pt; }
  .sec--ink, .cta, .phero { background: #fff !important; color: #000 !important; }
  .phero h1, .cta h2 { color: #000 !important; }
  /* The banner artwork and the gradient that sits over it are decoration. On
     paper they cost ink and make the heading harder to read, so both go. */
  .hero { background-image: none !important; }
  .hero::before, .hero::after,
  .phero::before, .phero::after { display: none !important; }
}