/* Self-hosted fonts. Marcellus (headlines) and General Sans (body) are the
   typefaces recommended in the Forepoint brand development deck of
   27 August 2026. Marcellus is open source from fonts.google.com and General
   Sans from fontshare.com, both served from this site. */
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/marcellus-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/marcellus-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'General Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/general-sans-400.woff2) format('woff2');
}
@font-face {
  font-family: 'General Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/general-sans-500.woff2) format('woff2');
}
@font-face {
  font-family: 'General Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/general-sans-600.woff2) format('woff2');
}

/* ============================================================
   Adliora website styles
   Layout, type scale, spacing, colour and motion.
   ============================================================ */

:root {
  /* Palette. Forepoint brand development deck v3 (27 August 2026), route 3A-2,
     colour scheme 3-2: Midnight Blue (Pantone 2768) and Sky Blue (Pantone 2985)
     on white. Sky Blue fails contrast as text on white, so accent text on light
     panels uses the deeper --sky-ink, 5.4 to 1 against white. */
  --paper:     #ffffff;   /* white page background */
  --paper-2:   #eef7fd;   /* alt band, pale sky tint */
  --ink:       #081d4d;   /* Midnight Blue, primary text and dark bands */
  --ink-soft:  #3f4d75;   /* muted midnight, secondary text */
  --line:      #d3e4f0;   /* cool hairline */
  --sky:       #5bc3f5;   /* Sky Blue, accents on midnight and graphic devices */
  --sky-ink:   #0b6aa8;   /* deep sky, legible accent text on white */
  --navy:      #081d4d;   /* dark band fill, Midnight Blue */
  --on-dark:   #ffffff;   /* white text on midnight */

  /* Type */
  --serif: "Marcellus", Georgia, "Times New Roman", serif;
  --sans:  "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Type scale */
  --fs-base:    clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.186), 1.13rem);
  --fs-small:   clamp(0.78rem, 0.75rem + ((1vw - 0.2rem) * 0.186), 0.88rem);
  --fs-medium:  clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 0.9), 1.55rem);
  --fs-large:   clamp(1.5rem, 1.5rem + ((1vw - 0.2rem) * 1.429), 2.4rem);
  --fs-xlarge:  clamp(2.1rem, 2.1rem + ((1vw - 0.2rem) * 1.671), 3.4rem);
  --fs-xxlarge: clamp(2.6rem, 2.6rem + ((1vw - 0.2rem) * 2.5), 4.6rem);

  /* Spacing scale */
  --sp-m:    clamp(1.5rem, 4vw, 2rem);
  --sp-l:    clamp(2rem, 5vw, 3rem);
  --sp-xl:   clamp(3rem, 7vw, 5rem);
  --sp-xxl:  clamp(2.75rem, 6vw, 5rem);
  --sp-xxxl: clamp(3.5rem, 8vw, 6rem);

  --wide: 1760px;
  --gut:  clamp(20px, 5vw, 60px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: 0; }
p { margin: 0 0 1.1em; }
a { color: inherit; text-decoration: none; }

.wrap {
  width: 100%; max-width: var(--wide);
  margin: 0 auto; padding: 0 var(--gut);
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-small);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sky-ink); font-weight: 600;
  margin: 0 0 1.6em;
}
/* Brand device: short dotted sky blue rule beneath each kicker. */
.eyebrow::after {
  content: ""; display: block;
  width: 100%; height: 2px;
  background-image: radial-gradient(circle, var(--sky) 0.7px, transparent 1px);
  background-size: 3px 2px; background-repeat: repeat-x; background-position: left center;
  margin-top: .85em;
}
.eyebrow-light, .contact .eyebrow { color: var(--sky); }

/* ---------- Button ---------- */
.btn {
  display: inline-block;
  background: var(--ink); color: var(--paper);
  font-size: var(--fs-small); font-weight: 500;
  padding: .85em 1.6em; border-radius: 999px;
  transition: background .25s ease, color .25s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--sky); color: var(--navy); }

/* ---------- Header: Sky Blue bar with the midnight wordmark (deck page 17) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--sky);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.site-header.is-scrolled { border-bottom-color: rgba(8,29,77,.22); }
/* Three-zone bar: wordmark left, menu centred, bordered CTA right. */
.header-inner { display: flex; justify-content: space-between; align-items: center; gap: 28px; height: 96px; }
/* The wordmark is 22px tall, so the link needs vertical padding of its own to
   reach a 44px tap target. Padding only, so nothing shifts in the bar. */
.brand { display: inline-flex; align-items: center; color: var(--navy); padding: 11px 0; }
/* The wordmark is the ITC Blair logotype from the Forepoint deck, route 3A-2,
   inlined as paths so it takes the colour of its parent. Fixed heights, not
   viewport based, so it never resizes on scroll or navigation. */
.brand-mark { display: block; height: 22px; width: auto; }
@media (min-width: 700px) { .brand-mark { height: 26px; } }
.footer-brand .brand-mark { height: 22px; }
/* Trade mark symbol beside the wordmark. Switch the character in every page to the registered symbol once the Adliora mark is registered. */
.nav { display: flex; gap: 38px; }
.nav a {
  font-size: var(--fs-small); letter-spacing: .04em; color: rgba(8,29,77,.88); font-weight: 500;
  background-image: linear-gradient(var(--navy), var(--navy));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px;
  padding-bottom: 6px;
  transition: color .2s ease, background-size .3s ease;
}
.nav a:hover, .nav a:focus { color: var(--navy); background-size: 100% 2px; }
.header-end { display: flex; align-items: center; gap: 22px; justify-self: end; }
.cta-link {
  font-size: var(--fs-small); font-weight: 500; color: var(--navy);
  border: 1px solid var(--navy); border-radius: 999px; padding: .65em 1.3em;
  transition: background .2s ease, color .2s ease;
}
.cta-link:hover { background: var(--navy); color: var(--sky); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 26px; height: 2px; background: var(--navy); transition: transform .25s ease, opacity .25s ease; }

/* ---------- Hero: full-width Midnight Blue block with the caret device (deck page 17) ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--navy); color: var(--on-dark);
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(4rem, 10vw, 7rem);
}
.hero-inner { position: relative; z-index: 2; }
.hero-bg {
  position: absolute; inset: 0; z-index: 1; display: block; pointer-events: none;
  /* The digitised caret from the deck's website mock (page 17): the crossbar-less
     A of the wordmark rendered as a field of coloured dots dissolving at its edges,
     drawn by tools/hero_caret.py from the caret path so it matches the wordmark. */
  background: url("assets/hero-caret-dots.webp") no-repeat right center / cover;
  opacity: .85;
}
.hero-title {
  font-size: var(--fs-xxlarge);
  line-height: 1.05;
  margin: .4em 0 .55em;
  max-width: 19ch;
  color: var(--on-dark);
}
.hero-title .accent { color: var(--sky); }
.hero-sub { font-size: var(--fs-medium); color: rgba(255,255,255,.82); max-width: 46ch; margin: 0 0 var(--sp-l); line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.hero .btn { background: var(--sky); color: var(--navy); }
.hero .btn:hover { background: var(--on-dark); color: var(--navy); }
.hero-ghost {
  display: inline-block; border: 1px solid rgba(255,255,255,.55); color: var(--on-dark);
  border-radius: 999px; padding: .85em 1.6em; font-size: var(--fs-small); font-weight: 500;
  transition: background .25s ease, color .25s ease, border-color .25s ease; white-space: nowrap;
}
.hero-ghost:hover { background: var(--on-dark); color: var(--navy); border-color: var(--on-dark); }
/* Phones: a narrow screen turns the diagonal into a vertical band that runs
   behind the headline and drops the contrast on every line it crosses, so the
   caret arrives as a faint corner device with no hard edge to it. */
@media (max-width: 760px) {
  .hero-bg {
    /* The caret leans in from the top right corner. At 340px tall it reached
       down over the kicker and the first two headline lines, which dropped the
       contrast on both. Held to 200px it finishes above the copy. */
    background: url("assets/hero-caret-dots.webp") no-repeat calc(100% + 110px) -34px / auto 200px;
    opacity: .55;
  }
}
/* Short landscape viewports, the common 13-inch laptop: scale the display
   type with viewport height and trim the vertical rhythm so the primary
   action stays above the fold. */
@media (min-width: 761px) and (max-height: 840px) {
  .hero-title { font-size: min(var(--fs-xxlarge), 6.7vh); margin: .35em 0 .45em; }
  .hero-sub { margin-bottom: 1.2rem; }
  .hero .eyebrow { margin-bottom: .8em; }
  .panel--first > .wrap { padding-top: 1rem; padding-bottom: 1rem; }
}
/* Phones: hold the whole hero inside the first screen. The display size drops
   so the headline runs to five lines rather than six, the rhythm tightens, and
   the two actions become full-width blocks that clear the floating cookie and
   question controls sitting in the bottom corners. */
@media (max-width: 760px) {
  .hero { padding: 2.2rem 0 2.6rem; }
  .hero .eyebrow { margin-bottom: 1.15em; }
  .hero-title { font-size: clamp(2.05rem, 8.6vw, 2.6rem); max-width: 17ch; margin: .3em 0 .45em; }
  .hero-sub { font-size: 1.06rem; line-height: 1.5; max-width: 42ch; margin-bottom: 1.7rem; }
  .hero-actions { gap: 12px; }
  .hero-actions .btn, .hero-actions .hero-ghost {
    display: block; width: 100%; text-align: center; padding: .95em 1.2em; white-space: normal;
  }
  .hero-inner { padding-bottom: 40px; }
}

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; border-bottom: 1px solid var(--line); padding: 1.2rem 0; }
.marquee-track {
  display: inline-flex; align-items: center; gap: 1.4rem;
  white-space: nowrap; will-change: transform;
  animation: marquee 38s linear infinite;
  font-family: var(--serif); font-weight: 400; font-size: var(--fs-large); color: var(--ink);
}
.marquee-track .dot { color: var(--sky); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Statement ---------- */
.statement { padding: var(--sp-xxxl) 0; }
.statement-grid {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-l); align-items: start;
}
.statement-lead { font-family: var(--serif); font-weight: 400; font-size: var(--fs-large); line-height: 1.22; margin: 0; max-width: 22ch; }
.statement-body { font-size: var(--fs-medium); color: var(--ink-soft); margin: 0; line-height: 1.5; }

/* ---------- Section heads ---------- */
.section-head {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-l);
  align-items: start; padding-bottom: var(--sp-l);
  border-bottom: 1px solid var(--line);
}
.section-title { font-size: var(--fs-xlarge); line-height: 1.2; margin: 0; }
.section-intro { font-size: var(--fs-base); color: var(--ink-soft); margin: 0; max-width: 46ch; }

/* ---------- Services as four photo cards ---------- */
.services { padding: var(--sp-xxxl) 0; }
.services .section-head { display: block; margin-bottom: var(--sp-xl); }
.services .section-intro { margin-top: .7em; max-width: none; white-space: nowrap; }
@media (max-width: 760px) { .services .section-intro { white-space: normal; } }
.dowork-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-l); }
.dowork-card { margin: 0; }
.dowork-thumb { aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: var(--sp-m); }
.dowork-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.dowork-card:hover .dowork-thumb img { transform: scale(1.05); }
.dowork-card h3 { font-size: var(--fs-medium); line-height: 1.18; margin: 0 0 .45em; transition: color .25s ease; }
.dowork-card:hover h3 { color: var(--sky-ink); }
.dowork-card p { color: var(--ink-soft); margin: 0; font-size: var(--fs-base); text-align: left; hyphens: manual; -webkit-hyphens: manual; }
@media (max-width: 900px) { .dowork-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-l) var(--sp-m); } }
@media (max-width: 560px) { .dowork-grid { grid-template-columns: 1fr; } }
.service-list { list-style: none; margin: 0; padding: 0; }
.service-row {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-l);
  padding: var(--sp-l) 0; border-bottom: 1px solid var(--line);
  align-items: start;
}
.service-row h3 { font-size: var(--fs-large); line-height: 1.15; margin: 0; }
.service-row p { color: var(--ink-soft); margin: 0; max-width: 50ch; }

/* ---------- Work ---------- */
.work { padding-bottom: var(--sp-xxxl); }
/* Match the work header to the image grid below so the intro starts at the right image's edge. */
.work .section-head { display: block; margin-bottom: var(--sp-xl); }
.work .section-intro { margin-top: .7em; max-width: none; white-space: nowrap; }
@media (max-width: 820px) { .work .section-intro { white-space: normal; } }
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-l); }
.work-item { display: block; grid-column: span 2; }
.work-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: var(--sp-m); }
.work-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.work-item:hover .work-media img { transform: scale(1.05); }
.work-tag {
  position: absolute; top: 16px; left: 16px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(8,29,77,.82); color: var(--on-dark);
  padding: 5px 11px; border-radius: 4px;
}
.work-client { font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; color: var(--sky-ink); margin: 0 0 .7em; }
.work-item h3 { font-size: var(--fs-large); line-height: 1.15; margin: 0 0 .5em; transition: color .25s ease; }
.work-item:hover h3 { color: var(--sky-ink); }
.work-desc { color: var(--ink-soft); margin: 0; }

/* ---------- Feature band ---------- */
.feature { padding: var(--sp-xxl) 0; }
.feature-frame {
  position: relative; min-height: clamp(320px, 44vw, 560px);
  display: flex; align-items: center; overflow: hidden;
  color: var(--on-dark);
  background: var(--navy) url("assets/feature.webp") center / cover no-repeat;
}
.feature-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.feature-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8,29,77,.82) 0%, rgba(8,29,77,.55) 42%, rgba(8,29,77,.08) 70%, rgba(8,29,77,0) 100%); }
.feature-content { position: relative; z-index: 2; padding: 0 clamp(28px, 6vw, 72px); }
.feature-line { font-family: var(--serif); font-weight: 400; font-size: var(--fs-xlarge); line-height: 1.14; max-width: 22ch; margin: 0; }

/* ---------- About ---------- */
.about { padding: var(--sp-xxxl) 0; background: var(--paper-2); }
.about-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--sp-xl); align-items: center; }
.about-figure { aspect-ratio: 3 / 4; overflow: hidden; }
.about-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-title { font-size: var(--fs-xlarge); line-height: 1.12; margin: 0 0 .7em; }
.about-main p { font-size: var(--fs-medium); color: var(--ink-soft); line-height: 1.5; }
.about-main p:last-child { margin-bottom: 0; }

/* ---------- Insights ---------- */
.insights { padding: var(--sp-xxxl) 0; }
.insights .section-head { display: block; margin-bottom: var(--sp-xl); }
.insights .section-intro { margin-top: .7em; max-width: none; white-space: nowrap; }
@media (max-width: 820px) { .insights .section-intro { white-space: normal; } }
.insight-more { margin-top: var(--sp-xl); padding-top: var(--sp-l); border-top: 1px solid var(--line); text-align: center; }
.more-link { display: inline-flex; align-items: center; gap: .5em; font-size: var(--fs-medium); font-family: var(--serif); color: var(--ink); border-bottom: 1px solid var(--sky); padding-bottom: 4px; transition: color .2s ease; }
.more-link span { transition: transform .2s ease; }
.more-link:hover { color: var(--sky-ink); }
.more-link:hover span { transform: translateX(4px); }
.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-l); }
.insight-item { display: block; }
.insight-thumb { aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: var(--sp-m); }
.insight-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.insight-item:hover .insight-thumb img { transform: scale(1.05); }
.insight-kind { font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; color: var(--sky-ink); }
.insight-item h3 { font-size: var(--fs-medium); line-height: 1.2; margin: .8em 0 .4em; transition: color .25s ease; }
.insight-item:hover h3 { color: var(--sky-ink); }
.insight-item p { color: var(--ink-soft); margin: 0; font-size: var(--fs-base); }

/* ---------- Contact ---------- */
.contact { background: var(--navy); color: var(--on-dark); padding: var(--sp-xxxl) 0; }
.contact .eyebrow { color: var(--sky); }
/* Equal columns with the same gap as the case/work image grids, so the right column starts at the image's left edge. */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0 var(--sp-l); align-items: start; }
.contact-title { font-size: var(--fs-xxlarge); line-height: 1.04; margin: -0.18em 0 0; color: var(--on-dark); max-width: 18ch; }
.contact-side p { font-size: var(--fs-medium); color: rgba(239,233,220,.78); line-height: 1.5; max-width: 54ch; }
.contact-meta { font-size: var(--fs-base) !important; color: rgba(239,233,220,.6) !important; }
.contact-side .btn { background: var(--sky); color: var(--navy); margin-top: .6em; }
.contact-side .btn:hover { background: var(--on-dark); color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer { padding: var(--sp-xl) 0; background: var(--navy); color: var(--on-dark); }
/* Footer: logo and strapline on one row (logo left, strapline beside), then nav/social, then copyright/legal. */
.footer-top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-l); flex-wrap: wrap; padding-bottom: var(--sp-m); border-bottom: 1px solid rgba(255,255,255,.16); }
.footer-news { max-width: 460px; }
.signup-inline { font-family: var(--serif); font-weight: 400; font-size: var(--fs-medium); line-height: 1.2; color: var(--on-dark); margin: 0 0 .6em; }
.footer-brand { flex: none; line-height: 0; }
.footer-brand .brand-mark { width: 52px; height: 52px; }
.footer-strap { font-family: var(--serif); font-weight: 400; font-size: var(--fs-medium); line-height: 1.2; color: var(--on-dark); margin: 0; white-space: nowrap; }
.footer-mid { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-l); flex-wrap: wrap; padding: var(--sp-l) 0; }
.footer-nav { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-l); }
.footer-nav a { font-size: var(--fs-small); color: rgba(255,255,255,.82); transition: color .2s ease; }
.footer-nav a:hover { color: var(--sky); }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sky); border: 1px solid rgba(91,195,245,.65);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.footer-social a:hover { background: var(--sky); color: var(--navy); border-color: var(--sky); transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; }
.footer-legalbar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-m) var(--sp-l); flex-wrap: wrap; }
.footer-brand { font-size: 1.7rem; }
.footer-word { font-family: var(--serif); font-weight: 400; color: var(--sky); }
.footer-end { display: flex; align-items: center; gap: var(--sp-m) var(--sp-l); flex-wrap: wrap; }
.footer-copy { margin: 0; font-size: var(--fs-small); color: rgba(255,255,255,.55); max-width: 62ch; line-height: 1.5; }
.footer-legal { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-m) var(--sp-l); }
.footer-legal a { font-size: var(--fs-small); color: rgba(255,255,255,.72); transition: color .2s ease; }
.footer-legal a:hover { color: var(--sky); }

/* ---------- Cap-top alignment for two-column heading/paragraph rows ----------
   Trims the leading above the first line to the cap height, so a large serif
   heading and a small sans paragraph line up at the top at every viewport. */
.section-title, .section-intro,
.service-row h3, .service-row p,
.statement-lead, .statement-body,
.case-body h2, .case-body > p:first-of-type {
  text-box-trim: trim-start;
  text-box-edge: cap alphabetic;
  text-box: trim-start cap alphabetic;
}

/* ---------- Active nav (current page) ---------- */
.nav a.is-active { color: var(--navy); font-weight: 600; background-size: 100% 2px; }

/* ---------- Inner page head ---------- */
.page-head { padding: calc(var(--sp-xxl) + 1rem) 0 var(--sp-xl); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: var(--fs-xxlarge); line-height: 1.04; margin: 0 0 .35em; max-width: 18ch; }
.page-lead { font-size: var(--fs-medium); color: var(--ink-soft); max-width: 54ch; margin: 0; line-height: 1.45; }

/* ---------- Work detail (case rows) ---------- */
.cases { padding: var(--sp-xxl) 0; }
.case-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-xl); align-items: center; padding: var(--sp-xl) 0; border-bottom: 1px solid var(--line); }
.case-row:last-of-type { border-bottom: 0; }
.case-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.case-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.case-row:hover .case-media img { transform: scale(1.04); }
.case-row:nth-child(even) .case-media { order: 2; }
.case-client { font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; color: var(--sky-ink); margin: 0 0 .7em; }
.case-body h2 { font-size: var(--fs-xlarge); line-height: 1.1; margin: 0 0 .5em; transition: color .25s ease; }
.case-row:hover .case-body h2 { color: var(--sky-ink); }
.case-body p { color: var(--ink-soft); margin: 0 0 1em; }
.case-body p:last-child { margin-bottom: 0; }

/* ---------- About page extras ---------- */
.about-page-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-l); align-items: start; padding-top: var(--sp-xxl); padding-bottom: var(--sp-xxl); }
/* About page contact band: match the principles columns so its text lines up with the blocks above. */
.contact--text .contact-grid { grid-template-columns: 1fr 1.2fr; gap: var(--sp-l); }
.principles { padding: var(--sp-xxl) 0; background: var(--paper-2); }

/* ---------- Contact page ---------- */
.contact-page { padding: var(--sp-xxl) 0; }
.contact-cols { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-xl); align-items: start; }
@media (max-width: 760px) { .contact-cols { grid-template-columns: 1fr; gap: var(--sp-l); } }
.contact-details { text-align: left; }
.contact-details p { color: var(--ink-soft); margin: 0 0 1.6em; max-width: 34ch; }
.contact-details .label { font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; color: var(--sky-ink); margin-bottom: .4em; }
.contact-details a.line { color: var(--ink); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color .2s ease; }
.contact-details a.line:hover { border-color: var(--sky); }
.contact-form { display: grid; gap: var(--sp-m); }
.field label { display: block; font-size: var(--fs-small); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .5em; }
.field input, .field textarea { width: 100%; font: inherit; color: var(--ink); padding: .8em 1em; background: #fff; border: 1px solid var(--line); border-radius: 5px; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--sky-ink); }
.form-note { font-size: var(--fs-small); color: var(--ink-soft); margin: 0; }
.form-status { font-size: var(--fs-small); line-height: 1.5; margin: 0; min-height: 1.4em; }
.form-status.ok { color: var(--sky-ink); }
.form-status.err { color: #a4302c; }
button.btn { border: 0; cursor: pointer; }
button.btn:disabled { opacity: .6; cursor: default; }
/* Consent row: the box holds its own column so the wrapped label lines up
   under itself rather than running back beneath the tick. */
.field-check { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.field-check input { width: 22px; height: 22px; min-width: 22px; margin: 1px 0 0; accent-color: var(--sky-ink); }
.field-check label { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.55; margin: 0; letter-spacing: 0; text-transform: none; }
.field-check a { color: var(--ink); border-bottom: 1px solid var(--sky); padding-bottom: 1px; }
.field-check a:hover { color: var(--sky-ink); }
/* Phones: the send control takes the full measure and a thumb-sized height. */
@media (max-width: 760px) {
  .contact-form button.btn { width: 100%; text-align: center; padding: 1.3em 1.4em; }
  .field input, .field textarea { padding: .85em 1em; }
  .field-check { gap: 14px; }
}

/* ---------- Services / packages ---------- */
.packages { padding: var(--sp-xxl) 0 var(--sp-xxxl); }
.package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-l); }
.package-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; padding: var(--sp-l); background: var(--paper); transition: border-color .25s ease, transform .25s ease; }
.package-card:hover { border-color: var(--sky); transform: translateY(-3px); }
.pk-num { font-family: var(--serif); font-size: var(--fs-small); color: var(--sky-ink); letter-spacing: .12em; }
.package-card h3 { font-size: var(--fs-medium); line-height: 1.18; margin: .5em 0 .5em; }
.package-card > p { color: var(--ink-soft); margin: 0 0 1.2em; flex: 1; text-align: left; hyphens: manual; -webkit-hyphens: manual; }
.package-card > .pk-price { flex: 0 0 auto; margin-top: auto; }
.pk-price { font-family: var(--serif); font-weight: 400; font-size: var(--fs-large); color: var(--ink); line-height: 1; }
.pk-price small { display: block; font-family: var(--sans); font-size: var(--fs-small); color: var(--sky-ink); letter-spacing: .08em; text-transform: uppercase; margin-top: .6em; }
.packages-note { font-size: var(--fs-small); color: var(--ink-soft); margin: var(--sp-l) 0 0; max-width: none; white-space: nowrap; }
/* The note sets on one line only where one line fits, which needs about 1,280px
   of viewport. Below that it wrapped nowhere and pushed tablets sideways. */
@media (max-width: 1300px) { .packages-note { white-space: normal; } }
.beyond { background: var(--paper-2); padding: var(--sp-xxl) 0; }
.beyond-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-l); align-items: start; }
.beyond-grid h2 { font-size: var(--fs-xlarge); line-height: 1.1; margin: 0; }
.beyond-grid p { color: var(--ink-soft); margin: 0 0 1em; }
@media (max-width: 900px) { .package-grid { grid-template-columns: 1fr 1fr; } .beyond-grid { grid-template-columns: 1fr; } .howwork-grid { grid-template-columns: 1fr; gap: var(--sp-l); } }
@media (max-width: 600px) { .package-grid { grid-template-columns: 1fr; } }

/* ---------- Services: trust line, package framing, how we work, FAQ ---------- */
.head-trust { font-size: var(--fs-base); color: var(--sky-ink); margin: var(--sp-m) 0 0; max-width: 64ch; line-height: 1.5; }
/* Services intro: widen the measure so the copy fills more of the page. */
.page-head--wide .page-lead { max-width: 80ch; }
.page-head--wide .head-trust { max-width: 80ch; }
.page-head--wide h1 { max-width: 22ch; }
/* Founder note: a signed first-person statement on the About page. */
.founder-note { padding: 0 0 var(--sp-xxl); }
.founder-quote { max-width: 62ch; margin: 0; border-left: 3px solid var(--sky); padding-left: var(--sp-l); }
.founder-quote p { font-family: var(--serif); font-size: var(--fs-medium); line-height: 1.5; color: var(--ink); margin: 0 0 1em; }
.founder-quote cite { display: block; margin-top: .5em; font-family: var(--sans); font-style: normal; font-weight: 600; font-size: var(--fs-base); letter-spacing: .02em; color: var(--sky-ink); }
.package-card .pk-for { flex: 0 0 auto; font-family: var(--serif); font-size: var(--fs-medium); color: var(--ink); margin: 0 0 .8em; line-height: 1.25; }
.howwork { padding: var(--sp-xxl) 0; }
.howwork-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-l); align-items: start; }
.howwork-head .section-intro { margin-top: .5em; max-width: none; }
.howwork-body { max-width: none; }
.howwork-body p { color: var(--ink-soft); margin: 0 0 1em; }
.howwork-body p:last-child { margin-bottom: 0; }
.faq { background: var(--paper-2); padding: var(--sp-xxl) 0; }
.faq-list { margin-top: var(--sp-l); display: grid; gap: var(--sp-l); max-width: none; }
.faq-item h3 { font-size: var(--fs-medium); line-height: 1.2; margin: 0 0 .4em; }
.faq-item p { color: var(--ink-soft); margin: 0; text-align: left; hyphens: manual; -webkit-hyphens: manual; }

/* ---------- Related reading on articles ---------- */
.related { padding: var(--sp-xl) 0 var(--sp-xxl); border-top: 1px solid var(--line); }
.related-title { font-size: var(--fs-large); line-height: 1.15; margin: 0 0 var(--sp-l); }
.related-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-l); }
.related-list a { font-family: var(--serif); font-size: var(--fs-medium); color: var(--ink); line-height: 1.2; display: inline-block; transition: color .25s ease; }
.related-list a:hover { color: var(--sky-ink); }
@media (max-width: 760px) { .related-list { grid-template-columns: 1fr; gap: var(--sp-m); } }

/* ---------- Article pages ---------- */
.article { padding: var(--sp-xl) 0 var(--sp-xxxl); }
.article-hero { height: clamp(240px, 40vw, 460px); overflow: hidden; margin-bottom: var(--sp-xl); }
.article-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-layout { display: grid; grid-template-columns: 0.85fr 1.55fr; gap: var(--sp-xl); align-items: start; }
.article-meta { }
.article-stand { font-family: var(--serif); font-weight: 400; font-size: var(--fs-large); line-height: 1.2; color: var(--ink); margin: 0 0 var(--sp-l); }
.article-date { font-size: var(--fs-small); color: var(--ink-soft); margin: 0 0 .35em; }
.article-topic { font-size: var(--fs-small); color: var(--ink-soft); margin: 0 0 var(--sp-l); }
.article-topic a { color: inherit; text-decoration: underline; }
.share-label { display: block; font-size: var(--fs-small); letter-spacing: .12em; text-transform: uppercase; color: var(--sky-ink); margin-bottom: .8em; }
.article-share { display: block; }
.share-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 10px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); transition: color .2s ease, border-color .2s ease; }
.share-ico:hover { color: var(--sky-ink); border-color: var(--sky); }
.article-body { max-width: 68ch; }
@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; gap: var(--sp-l); }
  .article-share { margin-bottom: var(--sp-l); }
}
.article-body h2 { font-size: var(--fs-large); line-height: 1.16; margin: 1.6em 0 .4em; }
.article-body h2:first-child { margin-top: 0; }
.article-body p { color: var(--ink-soft); margin: 0 0 1.1em; text-align: left; hyphens: manual; -webkit-hyphens: manual; }
.article-body p:first-child { font-size: var(--fs-medium); color: var(--ink); }
.article-body a { color: var(--ink); border-bottom: 1px solid var(--sky); }
.article-body a:hover { color: var(--sky-ink); }
/* Phones: a long read wants a larger face and a more open line than the
   interface text carries, since the measure is short and the reading is
   continuous. */
@media (max-width: 760px) {
  .article-body p, .article-body li { font-size: 1.06rem; line-height: 1.62; }
  .article-body h2 { line-height: 1.2; margin: 1.4em 0 .45em; }
}

/* ---------- Justified body copy ---------- */
.hero-sub, .page-lead, .statement-body, .section-intro,
.service-row p, .work-desc, .case-body p, .about-main p,
.insight-item p, .contact-side p,
.legal-body p, .legal-body li {
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* ---------- Legal / policy pages ---------- */
.legal { padding: var(--sp-xxl) 0 var(--sp-xxxl); }
/* Policy pages carry long unbroken strings, reference codes and addresses among
   them, which ran past the text column on a 320px screen. Let them break rather
   than widen the page. */
.legal-body { max-width: 74ch; overflow-wrap: anywhere; }
.legal-body h2 { font-size: var(--fs-large); line-height: 1.15; margin: 2em 0 .5em; }
.legal-body h4 { font-size: var(--fs-base); font-weight: 600; color: var(--ink); margin: 1.4em 0 .3em; }

/* Bundled legal page: sticky contents nav beside the policy sections. */
.legal-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-xl); align-items: start; }
.legal-toc { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 10px; }
.legal-toc a { font-size: var(--fs-small); color: var(--ink-soft); border-left: 2px solid var(--line); padding: 4px 0 4px 14px; transition: color .2s ease, border-color .2s ease; }
.legal-toc a:hover { color: var(--sky-ink); border-color: var(--sky); }
.legal-section { padding: var(--sp-xl) 0; border-top: 1px solid var(--line); scroll-margin-top: 100px; }
.legal-section:first-child { border-top: 0; padding-top: 0; }
.legal-section > h2 { font-size: var(--fs-xlarge); line-height: 1.1; margin: 0 0 .2em; }
.legal-section > .legal-meta { font-size: var(--fs-small); color: var(--sky-ink); letter-spacing: .04em; margin: 0 0 1.4em; }
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--sp-m); margin-bottom: var(--sp-l); }
  .legal-toc a { border-left: 0; border-bottom: 2px solid var(--line); padding: 4px 0; }
}
.legal-body h3 { font-size: var(--fs-medium); line-height: 1.2; margin: 1.6em 0 .4em; color: var(--ink); }
.legal-body h2:first-child, .legal-body h3:first-child { margin-top: 0; }
.legal-body p { color: var(--ink-soft); margin: 0 0 1.1em; }
.legal-body ul { color: var(--ink-soft); margin: 0 0 1.3em; padding-left: 1.2em; }
.legal-body li { margin: 0 0 .5em; }
.legal-body a { color: var(--ink); border-bottom: 1px solid var(--sky); }
.legal-body a:hover { color: var(--sky-ink); }
.ptable-wrap { overflow-x: auto; margin: 0 0 1.6em; }
.ptable { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.ptable th, .ptable td { text-align: left; vertical-align: top; padding: .7em .9em; border-bottom: 1px solid var(--line); }
.ptable th { color: var(--ink); font-weight: 600; background: var(--paper-2); }
.ptable td { color: var(--ink-soft); }

/* ---------- Logo concepts grid ---------- */
.logo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-l); }
.logo-card { margin: 0; }
.logo-swatches { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.logo-swatch { display: flex; align-items: center; justify-content: center; padding: var(--sp-l); }
.logo-swatch svg { width: 100%; height: auto; max-height: 96px; display: block; }
.logo-swatch.on-navy { background: var(--navy); }
.logo-swatch.on-cream { background: var(--paper); }
.logo-card figcaption { font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; color: var(--sky-ink); margin-top: .9em; }
@media (max-width: 700px) { .logo-grid { grid-template-columns: 1fr; } }
/* A grid track is auto sized to its content by default, so the typeface names
   set at 2.2rem held the pair of swatches wider than a phone screen and gave
   the page a sideways scroll. minmax(0, 1fr) lets the tracks shrink, and the
   names wrap inside them. */
.logo-swatches { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.logo-swatch { overflow-wrap: anywhere; text-align: center; }
@media (max-width: 560px) { .logo-swatch { padding: var(--sp-m); } }

/* ---------- Policies index ---------- */
.policy-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.policy-list li { border-bottom: 1px solid var(--line); }
.policy-list a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-l); padding: var(--sp-m) 0; transition: color .2s ease; }
.policy-list a:hover { color: var(--sky-ink); }
.policy-list h2 { font-size: var(--fs-large); line-height: 1.1; margin: 0; transition: color .2s ease; }
.policy-list a:hover h2 { color: var(--sky-ink); }
.policy-list .pl-note { color: var(--ink-soft); font-size: var(--fs-small); max-width: 36ch; text-align: right; }

/* ---------- Scroll-reveal motion ---------- */
/* Content is visible by default so the first paint carries the page. The script adds
   js-reveal to the html element before it starts observing, and only then are the
   elements below the fold held back for the reveal. */
.reveal { transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
.js-reveal .reveal:not(.is-in) { opacity: 0; transform: translateY(16px); }
.reveal.is-in { opacity: 1; transform: none; }
.service-row:nth-child(2) { transition-delay: .06s; }
.service-row:nth-child(3) { transition-delay: .12s; }
.service-row:nth-child(4) { transition-delay: .18s; }
.work-item:nth-child(2) { transition-delay: .1s; }
.insight-item:nth-child(2) { transition-delay: .08s; }
.insight-item:nth-child(3) { transition-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  /* Matches the specificity of the hiding rule above, so motion off keeps the
     content visible whatever order the script runs in. */
  .js-reveal .reveal:not(.is-in),
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  .work-media img, .insight-thumb img { transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .header-inner { display: flex; justify-content: space-between; align-items: center; height: 86px; }
  .nav, .header-end { display: none; }
  .nav-toggle { display: flex; }
  /* Open the panel flush with the bottom of the bar, so the first item is not
     clipped by the header sitting over it. */
  body.nav-open .nav {
    display: flex; flex-direction: column; gap: 0;
    position: fixed; inset: 86px 0 auto 0; background: var(--navy);
    border-bottom: 1px solid rgba(91,195,245,.28); padding: 4px var(--gut) 22px;
  }
  body.nav-open .nav a { padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.16); font-size: 1.1rem; color: var(--on-dark); }
  body.nav-open .nav a:last-child { border-bottom: none; }
  /* Give the burger a full 44px touch area without moving the rules that draw it. */
  /* A full 44px square for the burger, without moving the bars that draw it. */
  .nav-toggle { padding: 14px 9px; margin-right: -9px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* On a shorter phone the open menu reaches down to about 456px and the
     first-visit consent card starts at about 378px, so the card covered the
     last two links and, sitting on a higher layer, took their taps. The
     floating controls stand down while the menu is open and return with it. */
  body.nav-open .cookie-panel.is-compact,
  body.nav-open .cookie-fab,
  body.nav-open .assistant-fab,
  body.nav-open .assistant-panel { display: none; }

  .statement-grid, .section-head, .service-row, .about-grid, .contact-grid { grid-template-columns: 1fr; }
  /* The text-only contact band carries a more specific rule further up, which
     outranked the line above and held two columns down to phone widths. */
  .contact--text .contact-grid { grid-template-columns: 1fr; }
  .section-head { align-items: start; }
  .work-grid { grid-template-columns: 1fr; }
  .work-item { grid-column: auto; }
  .case-row { grid-template-columns: 1fr; gap: var(--sp-l); }
  .case-row:nth-child(even) .case-media { order: 0; }
  .insight-grid { grid-template-columns: 1fr; }
  .footer-top { flex-direction: column; align-items: flex-start; gap: var(--sp-m); }
  .hero-foot { flex-direction: column; align-items: flex-start; }
}

/* Below the width where the strapline fits on one line, let it wrap and shrink. */
@media (max-width: 760px) {
  .footer-top { flex-wrap: wrap; }
  .footer-strap { white-space: normal; }
}

/* Phones: seven policy links wrapping against a 32px gap leave a ragged block
   with tap targets under the 44px minimum. Set them in two aligned columns and
   give each one the height a thumb needs. */
@media (max-width: 620px) {
  .footer-legalbar { flex-direction: column; align-items: flex-start; gap: var(--sp-m); }
  .footer-end { flex-direction: column; align-items: flex-start; gap: var(--sp-m); width: 100%; }
  .footer-legal { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; width: 100%; }
  .footer-legal a { padding: 14px 0; line-height: 1.25; }
  .footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
  .footer-nav a { padding: 14px 0; line-height: 1.25; }
  .footer-mid { padding: var(--sp-m) 0; gap: var(--sp-m); }
  /* Clear the floating cookie control, which sits in the bottom left corner. */
  .site-footer { padding-bottom: calc(var(--sp-xl) + 24px); }
}

/* ---------- Section headings: sky blue underline grows left to right on hover ---------- */
.section-title, .dowork-card h3 {
  width: fit-content;
  max-width: 100%;
  background-image: linear-gradient(var(--sky), var(--sky));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  padding-bottom: 6px;
  transition: background-size .4s ease, color .25s ease;
}
.section-title:hover, .dowork-card:hover h3 {
  color: var(--sky-ink);
  background-size: 100% 2px;
}

/* ---------- Card headings: sky blue underline grows under every wrapped line ---------- */
.insight-item h3 .hl, .news-card h3 .hl, .work-item h3 .hl, .case-body h2 .hl {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(var(--sky), var(--sky));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  padding-bottom: 2px;
  transition: background-size .4s ease;
}
.insight-item:hover h3 .hl, .news-card:hover h3 .hl,
.work-item:hover h3 .hl, .case-row:hover .case-body h2 .hl {
  background-size: 100% 2px;
}
.news-card:hover h3 { color: var(--sky-ink); }

/* ---------- Insights pagination ---------- */
/* Eleven page buttons on one unwrapped row run past a phone screen and give the
   whole document a horizontal scroll. Let the row wrap and hold each button at
   its drawn size, so the set reflows into rows that fit. */
.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: var(--sp-xl); }
.pager button { flex: none; }
.pager button { font: inherit; font-size: var(--fs-small); cursor: pointer; background: none; color: var(--ink); transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease; }
.pager-num { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); }
.pager-num:hover { border-color: var(--sky); color: var(--sky-ink); }
.pager-num.is-current { background: var(--sky); border-color: var(--sky); color: var(--navy); }
.pager-step { height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--sky); color: var(--ink); }
.pager-step:hover:not(:disabled) { background: var(--sky); color: var(--navy); }
.pager-step:disabled { opacity: .35; cursor: default; border-color: var(--line); }

/* ---------- News from the firm ---------- */
.news { padding: var(--sp-xxl) 0 var(--sp-xxxl); border-top: 1px solid var(--line); }
.news .section-head { display: block; margin-bottom: var(--sp-xl); }
.news .section-intro { margin-top: .6em; max-width: none; white-space: nowrap; }
@media (max-width: 760px) { .news .section-intro { white-space: normal; } }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-l); }
.news-card { margin: 0; }
.news-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; margin-bottom: var(--sp-m); background: var(--navy); }
.news-media img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; }
.news-mark { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; }
.news-mark svg { width: 100%; height: 100%; display: block; }
.news-tag { position: absolute; left: 14px; bottom: 14px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; background: rgba(8,29,77,.82); color: var(--on-dark); padding: 5px 11px; border-radius: 4px; }
.news-card h3 { font-size: var(--fs-medium); line-height: 1.18; margin: 0 0 .4em; }
.news-card p { color: var(--ink-soft); margin: 0; }
@media (max-width: 900px) { .news-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; } }

/* ---------- Cookie consent ---------- */
.cookie-fab {
  position: fixed; left: 14px; bottom: 16px; z-index: 90;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy); border: 1.5px solid var(--sky); color: var(--sky);
  display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
  box-shadow: 0 6px 20px rgba(8,29,77,.28); transition: transform .2s ease;
}
.cookie-fab:hover { transform: translateY(-2px); }
.cookie-fab svg { width: 15px; height: 15px; display: block; }
.cookie-panel {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 95;
  /* 100% of the initial containing block, not 100vw, which counts the desktop
     scrollbar and pushes the drawer a few pixels past the right edge. */
  width: min(440px, 100%); height: 100%; overflow-y: auto;
  background: var(--navy); color: var(--on-dark);
  border-right: 1px solid rgba(91,195,245,.40);
  box-shadow: 0 0 60px rgba(0,0,0,.45);
  padding: var(--sp-xl) var(--sp-l);
  display: none;
}
.cookie-panel.is-open { display: block; }
.cookie-panel h2 { font-size: var(--fs-large); line-height: 1.18; margin: 0 0 .6em; color: var(--on-dark); }
.cookie-panel p { font-size: var(--fs-small); color: rgba(255,255,255,.78); margin: 0 0 1em; line-height: 1.55; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 var(--sp-l); }
.cookie-btn {
  font-size: var(--fs-small); font-weight: 500; padding: .8em 1.2em; border-radius: 5px;
  border: 1px solid var(--sky); background: var(--sky); color: var(--navy); cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cookie-btn.ghost { background: transparent; color: var(--on-dark); border-color: rgba(255,255,255,.45); }
.cookie-btn:hover { background: var(--on-dark); color: var(--navy); border-color: var(--on-dark); }
.cookie-cat {
  border-top: 1px solid rgba(255,255,255,.16); padding: var(--sp-m) 0;
  display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center;
}
.cookie-cat h3 { font-size: var(--fs-medium); margin: 0; color: var(--on-dark); }
.cookie-cat p { grid-column: 1 / -1; margin: 0; }
.cookie-state { font-size: var(--fs-small); letter-spacing: .08em; text-transform: uppercase; color: var(--sky); }
.cookie-control { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: 10px; }
.cookie-onoff { font-size: var(--fs-small); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.cookie-switch {
  width: 52px; height: 28px; border-radius: 14px; border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.18); position: relative; cursor: pointer; padding: 0; flex: none;
  transition: background .2s ease, border-color .2s ease;
}
.cookie-switch[aria-pressed="true"] { background: var(--sky); border-color: var(--sky); }
.cookie-switch .knob {
  position: absolute; top: 2px; left: 2px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; transition: transform .2s ease;
}
.cookie-switch[aria-pressed="true"] .knob { transform: translateX(24px); }
.cookie-save { margin-top: var(--sp-m); }
.cookie-foot { display: flex; gap: 18px; align-items: center; margin: 1em 0 0; }
.cookie-foot .cookie-manage, .cookie-foot .cookie-link { display: inline-block; padding: .55em .25em; min-height: 24px; line-height: 1.3; }
.cookie-manage {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: var(--fs-small); color: var(--sky); text-decoration: underline;
  display: none;
}
/* First visit: a compact card in the corner rather than a full-height wall.
   Same two decisions, nothing hidden, and Manage choices opens the drawer. */
.cookie-panel.is-compact {
  top: auto; bottom: 16px; left: 14px; height: auto;
  width: min(400px, calc(100% - 28px));
  border: 1px solid rgba(91,195,245,.40); border-radius: 10px;
  padding: var(--sp-m);
  box-shadow: 0 18px 50px rgba(0,0,0,.4);
}
.cookie-panel.is-compact h2 { font-size: var(--fs-medium); }
.cookie-panel.is-compact .cookie-cat,
.cookie-panel.is-compact .cookie-save { display: none; }
.cookie-panel.is-compact .cookie-actions { margin-bottom: 0; }
.cookie-panel.is-compact .cookie-manage { display: inline; }
/* Sky Blue on white measures 1.99 to 1, so the default for this link is the
   deeper sky, and the bright one comes back only on the navy surfaces where it
   belongs. The navy contact band carries no panel class of its own, and the
   text-only variant of it on the about page sits on white. */
.cookie-link { color: var(--sky-ink); text-decoration: underline; }
.cookie-panel .cookie-link,
.panel--navy .cookie-link,
.site-footer .cookie-link,
.contact:not(.panel):not(.contact--text) .cookie-link { color: var(--sky); }
.article-body a.cookie-link { color: var(--sky-ink); text-decoration: none; }
.article-body a.cookie-link:hover { color: var(--ink); }
@media (max-width: 560px) { .cookie-fab { left: 12px; bottom: 12px; } }
/* Touch screens: the two floating controls and the consent buttons were drawn
   between 28px and 36px, under the 44px a thumb needs. Grow the hit area only
   where a finger is doing the pointing, so the desktop drawing is untouched.
   The bottom offsets add the home indicator inset where the browser reports
   one, and env resolves to zero everywhere else. */
@media (pointer: coarse) {
  .cookie-fab {
    width: 44px; height: 44px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .assistant-fab {
    min-height: 44px; padding: .7em 1.25em;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .cookie-btn { min-height: 44px; }
  .cookie-switch { height: 44px; border-radius: 22px; }
  .cookie-switch .knob { top: 10px; }
  .cookie-foot .cookie-manage,
  .cookie-foot .cookie-link { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-social a { width: 44px; height: 44px; }
  .assistant-panel { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .cookie-panel.is-compact { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}
@media (pointer: coarse) and (max-width: 560px) {
  .cookie-fab { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .cookie-panel.is-compact { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
/* Phones: both floating controls slide off screen while the reader scrolls
   down the page, then return on a pause or an upward scroll. */
@media (max-width: 760px) {
  .cookie-fab, .assistant-fab { transition: transform .25s ease, opacity .25s ease; }
  body.fabs-away .cookie-fab,
  body.fabs-away .assistant-fab { transform: translateY(160%); opacity: 0; pointer-events: none; }
}

/* ---------- Keyboard focus ---------- */
/* Two-part ring so the indicator reads on navy and cream alike: a navy
   outline for light panels with a sky blue halo for dark ones. Mouse and touch
   focus stay unmarked; :focus-visible fires for keyboard use. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(91,195,245,.55);
  border-radius: 3px;
}

/* ---------- Skip link and screen-reader utility ---------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--sky); color: var(--navy); padding: .7em 1.2em; border-radius: 0 0 6px 0; font-size: var(--fs-small); font-weight: 600; }
.skip-link:focus { left: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Footer newsletter and company details ---------- */
.footer-signup { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-l); flex-wrap: wrap; padding: var(--sp-m) 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.signup-title { font-family: var(--serif); font-weight: 400; font-size: var(--fs-medium); color: var(--on-dark); margin: 0 0 .25em; }
.signup-note { font-size: var(--fs-small); color: rgba(255,255,255,.62); margin: 0; max-width: 48ch; }
.signup-form { display: flex; gap: 10px; flex-wrap: wrap; }
.signup-form input { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.3); color: var(--on-dark); border-radius: 5px; padding: .75em 1em; font: inherit; font-size: var(--fs-small); min-width: 240px; }
.signup-form input::placeholder { color: rgba(255,255,255,.62); }
/* iOS Safari zooms the page when a field under 16px takes focus, and it does not
   zoom back out. Hold the small fields at 16px on touch screens. */
@media (pointer: coarse) {
  .signup-form input { font-size: 16px; }
}
.signup-form .btn { background: var(--sky); color: var(--navy); }
.signup-form .btn:hover { background: var(--on-dark); color: var(--navy); }
.signup-done { font-size: var(--fs-small); color: var(--sky); margin: 0; }
.signup-done a { color: var(--on-dark); text-decoration: underline; }
.signup-done a:hover { color: var(--sky); }
.footer-company { margin: .6em 0 0; font-size: var(--fs-small); color: rgba(255,255,255,.5); max-width: 60ch; line-height: 1.5; }

/* ---------- Contact form: consent and spam trap ---------- */
.field-check { display: flex; gap: 12px; align-items: flex-start; }
.field-check input { margin-top: .1em; flex: none; width: 20px; height: 20px; accent-color: var(--sky); cursor: pointer; }
.field-check label { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.45; cursor: pointer; }
.field-check a { color: var(--sky-ink); text-decoration: underline; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Not found page ---------- */
.notfound { padding: var(--sp-xxxl) 0; }
.notfound .eyebrow { color: var(--sky-ink); }
.notfound h1 { font-size: var(--fs-xlarge); margin: 0 0 .5em; }
.notfound p { color: var(--ink-soft); max-width: 52ch; margin: 0 0 var(--sp-l); }

/* ---------- Cross-page transitions ----------
   Disabled: the navigation view transition scaled the header wordmark
   when the logo was clicked, which read as a glitch. */
@view-transition { navigation: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Extra staggered reveals ---------- */
.dowork-card:nth-child(2) { transition-delay: .06s; }
.dowork-card:nth-child(3) { transition-delay: .12s; }
.dowork-card:nth-child(4) { transition-delay: .18s; }
.package-card:nth-child(2) { transition-delay: .06s; }
.package-card:nth-child(3) { transition-delay: .12s; }
.faq-item:nth-child(2) { transition-delay: .05s; }
.faq-item:nth-child(3) { transition-delay: .1s; }

/* ---------- AI readiness assessment ---------- */
.assess-section { padding: var(--sp-l) 0 var(--sp-xxl); }
.assess-list { list-style: none; margin: 0 0 var(--sp-l); padding: 0; display: grid; gap: var(--sp-l); max-width: 760px; }
.assess-q { border-top: 1px solid var(--line); padding-top: var(--sp-m); }
.assess-qtext { font-family: var(--serif); font-size: var(--fs-medium); color: var(--ink); margin: 0 0 .8em; line-height: 1.25; }
.assess-opts { display: grid; gap: 10px; }
.assess-opt { display: flex; align-items: center; gap: 10px; font-size: var(--fs-base); color: var(--ink-soft); cursor: pointer; }
.assess-opt input { flex: none; width: 18px; height: 18px; accent-color: var(--sky-ink); }
.assess-result { max-width: 760px; margin-top: var(--sp-l); padding: var(--sp-l); border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2); }
.assess-result h2 { font-size: var(--fs-large); margin: 0 0 .3em; display: flex; align-items: center; gap: .5em; line-height: 1.15; }
.assess-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; display: inline-block; }
.assess-dot.early { background: #b4532e; }
.assess-dot.developing { background: var(--sky); }
.assess-dot.ready { background: #3f7a52; }
.assess-score { font-size: var(--fs-small); letter-spacing: .08em; text-transform: uppercase; color: var(--sky-ink); margin: 0 0 1em; }
.assess-result p { color: var(--ink-soft); margin: 0 0 1em; }
.assess-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--sp-m); }
.assess-actions .hero-ghost { border-color: var(--ink); color: var(--ink); }
.assess-actions .hero-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- Assistant widget ---------- */
.assistant-fab { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: inline-flex; align-items: center; gap: 8px; background: var(--sky); color: var(--navy); border: none; border-radius: 30px; padding: .7em 1.1em; font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer; box-shadow: 0 6px 20px rgba(8,29,77,.28); transition: transform .2s ease; }
.assistant-fab:hover { transform: translateY(-2px); }
.assistant-panel { position: fixed; right: 20px; bottom: 84px; z-index: 95; width: min(380px, calc(100% - 40px)); max-height: 72vh; display: none; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 50px rgba(8,29,77,.3); overflow: hidden; }
.assistant-panel.is-open { display: flex; }
.assistant-head { background: var(--navy); color: var(--on-dark); padding: var(--sp-m); }
.assistant-head h2 { font-size: var(--fs-medium); margin: 0 0 .2em; color: var(--on-dark); }
.assistant-head p { font-size: var(--fs-small); color: rgba(255,255,255,.72); margin: 0; }
.assistant-body { padding: var(--sp-m); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.assistant-msg { font-size: var(--fs-small); line-height: 1.5; padding: .7em .9em; border-radius: 10px; max-width: 90%; }
.assistant-msg.bot { background: var(--paper-2); color: var(--ink); align-self: flex-start; }
.assistant-msg.you { background: var(--navy); color: var(--on-dark); align-self: flex-end; }
/* Waiting on an answer. The dots are drawn in CSS so nothing extra loads. */
.assistant-msg.is-thinking { color: var(--ink-soft); font-style: italic; }
.assistant-msg.is-thinking::after {
  content: "..."; display: inline-block; width: 1.2em; text-align: left;
  animation: assistant-dots 1.2s steps(4, end) infinite;
  clip-path: inset(0 100% 0 0);
}
@keyframes assistant-dots { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  .assistant-msg.is-thinking::after { animation: none; clip-path: none; }
}
.assistant-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--sp-m) var(--sp-m); }
.assistant-chip { font-size: var(--fs-small); border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 20px; padding: .45em .9em; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.assistant-chip:hover { border-color: var(--sky); color: var(--sky-ink); }
.assistant-form { display: flex; gap: 8px; padding: 0 var(--sp-m) var(--sp-m); }
.assistant-form input {
  flex: 1; min-width: 0; font: inherit; font-size: var(--fs-small);
  border: 1px solid var(--line); border-radius: 20px; padding: .45em 1em;
  background: #fff; color: var(--ink);
}
.assistant-form input:focus { outline: none; border-color: var(--sky-ink); }
/* Same iOS focus zoom guard as the newsletter field. */
@media (pointer: coarse) {
  .assistant-form input { font-size: 16px; }
}
.assistant-send {
  font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer;
  border: 0; border-radius: 20px; padding: .45em 1.1em;
  background: var(--sky); color: var(--navy);
}
@media (max-width: 560px) { .assistant-panel { right: 12px; left: 12px; width: auto; } }

/* ---------- Readiness check call-to-action band ---------- */
.assess-cta { background: var(--paper-2); padding: var(--sp-xl) 0; }
.assess-cta-inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0 var(--sp-l); align-items: start; }
.assess-cta-inner > .eyebrow { grid-column: 1 / -1; }
.assess-cta-inner > .section-title { margin-top: 0.20em; }
.contact-grid > .eyebrow { grid-column: 1 / -1; }
.assess-cta-side p { color: var(--ink-soft); margin: 0 0 var(--sp-m); }
@media (max-width: 760px) { .assess-cta-inner { grid-template-columns: 1fr; } }

/* ---------- Services: stack section heads, two-column FAQ ---------- */
.howwork .section-head, .faq .section-head { display: block; margin-bottom: var(--sp-l); }
.howwork .section-intro, .faq .section-intro { margin-top: .6em; max-width: none; }
.faq-item { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-l); align-items: baseline; }
.faq-item h3 { margin: 0; }
@media (max-width: 760px) { .faq-item { grid-template-columns: 1fr; gap: .5em; } }

/* ---------- Newsletter band (Insights page) ---------- */
.newsletter-band { background: var(--paper-2); padding: var(--sp-xl) 0; }
.newsletter-band .section-title { margin: 0 0 .3em; }
.newsletter-note { color: var(--ink-soft); margin: 0 0 var(--sp-m); max-width: 58ch; }
.newsletter-band .signup-form input { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.newsletter-band .signup-form input::placeholder { color: var(--ink-soft); }
.newsletter-band .signup-done { color: var(--sky-ink); }

/* Free readiness-check package card */
.package-card.pk-free { border-color: var(--sky); }
.pk-price small { display: block; }

/* Footer brand roundel beside copyright */
.footer-id { display: flex; align-items: center; gap: 14px; }
.footer-brand { line-height: 0; display: inline-flex; }
.footer-brand .brand-mark { width: 46px; height: 46px; display: block; }

/* ---------- AI for law firms guide hub ---------- */
.guide-hub { padding: var(--sp-xxl) 0; }
.hub-section { margin-bottom: var(--sp-xl); }
.hub-section h2 { font-size: var(--fs-xlarge); line-height: 1.1; margin: 0 0 .4em; }
.hub-intro { color: var(--ink-soft); margin: 0 0 1.1em; max-width: 62ch; }
.hub-list { list-style: none; margin: 0 0 .5em; padding: 0; }
.hub-list li { padding: .55em 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); line-height: 1.55; }
.hub-list li:last-child { border-bottom: none; }
.hub-list a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--sky); padding-bottom: 1px; }
.hub-list a:hover { color: var(--sky-ink); }

/* Clickable section headings on the homepage */
.title-link { color: inherit; text-decoration: none; }
.title-link:hover { color: var(--sky-ink); }
.panel--navy .title-link:hover, .about .title-link:hover, .assess-cta .title-link:hover, .contact .title-link:hover { color: var(--sky); }
.eyebrow .title-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* keep aspect ratio when intrinsic dimensions are declared */
:where(img[width]) { height: auto; }

/* The fee guarantee sits between the prices and the scope note, framed so it
   reads as a commitment rather than another paragraph of explanation. */
.fee-guarantee {
  margin-top: var(--sp-l); max-width: 74ch;
  border: 1px solid var(--sky); border-radius: 10px;
  padding: var(--sp-m) var(--sp-m) calc(var(--sp-m) - .6em);
  background: rgba(91,195,245,.06);
}
.fee-guarantee h3 { font-size: var(--fs-medium); margin: 0 0 .45em; color: var(--ink); }
.fee-guarantee p { color: var(--ink-soft); margin: 0 0 .9em; }

/* Scope and boundary note under the packages grid. */
.packages-scope { margin-top: var(--sp-l); max-width: 74ch; }
.packages-scope h3 { font-size: var(--fs-medium); margin: 0 0 .4em; color: var(--ink); }
.packages-scope p { color: var(--ink-soft); margin: 0 0 .9em; font-size: var(--fs-base); }

/* Insight topic filters. */
.insight-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 var(--sp-l); }
.filter-chip { font: inherit; font-size: var(--fs-small); color: var(--ink-soft); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.filter-chip:hover { color: var(--sky-ink); border-color: var(--sky); }
.filter-chip.is-current { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Footer statutory particulars. */
.footer-company { max-width: 62ch; }
.footer-particulars { margin: .4em 0 0; font-size: var(--fs-small); color: rgba(255,255,255,.62); line-height: 1.5; }

/* Article author line. */
.article-author { font-size: var(--fs-small); color: var(--ink-soft); margin: .2em 0 0; }
.article-author a { color: inherit; text-decoration: underline; }

/* ---------- Bespoke pass, 11 August 2026: editorial details ---------- */
::selection { background: var(--sky); color: #fff; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }

/* Drop cap opens each article in the print manner */
.article-body > p:first-child::first-letter {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 3.1em;
  line-height: .82;
  float: left;
  padding: .05em .14em 0 0;
  color: var(--sky-ink);
}

/* Old-style figures where the face carries them */
.article-body p, .article-stand, .article-date, .article-topic { font-feature-settings: "onum" 1; }

/* One warm grade across the photography so mixed sources read as one set */
.insight-thumb img, .article-hero img { filter: saturate(.92) sepia(.05); }

/* The newest piece leads the insights page at editorial size */
@media (min-width: 761px) {
  .insight-grid[data-paginate] > .insight-item:first-child { grid-column: span 2; }
  .insight-grid[data-paginate] > .insight-item:first-child h3 { font-size: var(--fs-large); }
  .insight-grid[data-paginate] > .insight-item:first-child p { max-width: 58ch; }
}


/* ---------- Bespoke pass two, 12 August 2026: varied closes, quote pieces, colophon ---------- */
.article-after { padding: 1.2rem 0 4.6rem; }
.after-note { max-width: 58ch; margin: 0 auto; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .98rem; }
.after-note a { color: var(--sky-ink); }
/* Sign-up in the article afterword. The page is cream here, so the field takes
   the light treatment rather than the dark one the navy bands carry. */
.after-signup { max-width: 58ch; margin: 1.3rem auto .7rem; }
.after-signup input { background: #fff; border: 1px solid var(--line); color: var(--ink); flex: 1 1 220px; min-width: 0; }
.after-signup input::placeholder { color: var(--ink-soft); }
.after-signup .btn { background: var(--ink); color: var(--paper); }
.after-signup .btn:hover { background: var(--sky); color: var(--navy); }
.after-consent { max-width: 58ch; margin: 0 auto; font-size: .82rem; line-height: 1.5; color: var(--ink-soft); }
.after-consent a { color: var(--sky-ink); border-bottom: 1px solid var(--line); }
.article-after .signup-done { max-width: 58ch; margin: 1.3rem auto .7rem; color: var(--sky-ink); }
.article-after .signup-done a { color: var(--ink); }
@media (max-width: 560px) {
  .after-signup .btn { width: 100%; text-align: center; padding: .95em 1.2em; }
}
blockquote.article-pull { margin: 2.4rem 0; padding: .3rem 0 .3rem 1.3rem; border-left: 3px solid var(--sky); font-family: var(--serif); font-size: 1.55rem; line-height: 1.32; color: var(--ink); }
.insight-item--quote .insight-thumb { display: flex; align-items: center; background: var(--navy); }
.insight-item--quote .insight-thumb p { margin: 0; padding: 1.2rem 1.3rem; font-family: var(--serif); font-size: 1.08rem; line-height: 1.45; color: var(--on-dark); }
.colophon { margin-top: 2.8rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-soft); }

/* Featured lead crop, 12 August 2026: wide ratio so the top row sits near tile height */
.insight-grid[data-paginate] > .insight-item:first-child .insight-thumb { aspect-ratio: 21 / 9; }

/* Author box at the foot of every insight article, written by tools/build_author_boxes.py. */
.author-box { padding: var(--sp-xl) 0 0; }
.author-box-inner { display: grid; grid-template-columns: 150px 1fr; gap: var(--sp-l); align-items: start; max-width: 68ch; padding: var(--sp-l); border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); }
.author-box-photo { width: 150px; height: 200px; object-fit: cover; object-position: top; border-radius: 8px; display: block; }
.author-box-label { font-size: var(--fs-small); letter-spacing: .12em; text-transform: uppercase; color: var(--sky-ink); margin: 0 0 .5em; }
.author-box-name { font-family: var(--serif); font-size: var(--fs-medium); color: var(--ink); margin: 0 0 .6em; }
.author-box-name a { color: inherit; }
.author-box-text p { margin: 0 0 .8em; color: var(--ink-soft); }
.author-box-dates { font-size: var(--fs-small); }
.author-box-dates a { color: var(--sky-ink); }
@media (max-width: 600px) { .author-box-inner { grid-template-columns: 1fr; } .author-box-photo { width: 120px; height: 160px; } }
/* Contact page portrait. */
.contact-portrait { width: 180px; height: 240px; object-fit: cover; object-position: top; border-radius: 8px; display: block; margin: 0 0 var(--sp-l); }
/* Podcast episode page link under each episode. */
.episode-page-link { font-size: var(--fs-small); color: var(--ink-soft); margin: 0 0 1rem; }

/* ---------- Brand mark on photographs ---------- */
/* The mark used to be burnt into each picture file, where object-fit cover
   trimmed it off the edge on phones and on wide screens. Drawing it on the
   frame instead pins it to the corner the reader sees, whatever the crop.
   Frames only, so portraits in the author box and the logo and icon artwork
   stay unmarked. */
.insight-thumb,
.article-hero,
.news-media,
.dowork-thumb,
.work-media,
.about-figure,
.case-media,
.feature-frame { position: relative; }

.insight-thumb::after,
.article-hero::after,
.news-media::after,
.dowork-thumb::after,
.work-media::after,
.about-figure::after,
.case-media::after,
.feature-frame::after {
  content: "";
  position: absolute;
  top: 2.5%;
  right: 2.5%;
  width: clamp(26px, 5.5%, 64px);
  aspect-ratio: 1;
  background: url("/favicon.svg") no-repeat center / contain;
  pointer-events: none;
  z-index: 3;
}