/* ============================================================
   Meghan McGroary — digital experience & product leadership
   Ocean system: deep-navy ground, cool-white paper, sea-glass
   tint, teal for structure, turquoise reserved for emphasis.
   Type: Manrope for display and figures, Inter for body copy.
   ============================================================ */

:root {
  /* --- ocean palette -------------------------------------------------- */
  --navy:    #08192B;   /* deep navy — dark grounds, primary text */
  --navy-2:  #0E2A42;   /* raised navy surface */
  --teal:    #0A6B7C;   /* teal — accents, links and figures on light */
  --teal-d:  #07505E;   /* teal, pressed */
  --turq:    #3AD9C4;   /* turquoise — emphasis on dark, used sparingly */
  --turq-2:  #86ECDC;   /* turquoise, softened */
  --sea:     #D2E6E4;   /* sea glass — tints, hovers, quiet surfaces */
  --paper-2: #E9F1F3;   /* cool white, tinted */
  --paper:   #F6F9FA;   /* cool white — page ground */
  --slate:   #3D566B;   /* body copy on light */
  --slate-2: #4E6376;   /* labels and meta on light */

  --line:      rgba(8, 25, 43, 0.13);
  --line-soft: rgba(8, 25, 43, 0.07);
  --dline:      rgba(154, 214, 216, 0.24);
  --dline-soft: rgba(154, 214, 216, 0.13);
  --on-navy:   rgba(233, 241, 243, 0.74);
  --on-navy-2: rgba(233, 241, 243, 0.50);

  --display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1240px;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --rhythm: clamp(4.5rem, 10vw, 8.5rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
}


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.06rem);
  line-height: 1.64;
  font-feature-settings: "cv05" 1;   /* Inter: l with a tail, so l/I/1 stay distinct */
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: var(--turq); color: var(--navy); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}
h3, h4 { letter-spacing: -0.022em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
.dek a, .lede a, .csBlock__body p a, .about__grid p a {
  color: var(--teal); text-decoration: none;
  box-shadow: inset 0 -0.09em 0 var(--turq);
  transition: box-shadow .3s ease, color .3s ease;
}
.dek a:hover, .lede a:hover, .csBlock__body p a:hover, .about__grid p a:hover {
  color: var(--teal-d); box-shadow: inset 0 -0.5em 0 var(--sea);
}
.sec--dark .dek a, .sec--dark .lede a { color: var(--turq); box-shadow: inset 0 -0.09em 0 var(--turq); }
img, svg { max-width: 100%; display: block; }
ul { list-style: none; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.measure      { max-width: 38rem; }
.measure-wide { max-width: 50rem; }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 3px; }
.sec--dark :focus-visible, .hero :focus-visible { outline-color: var(--turq); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--navy); color: var(--paper);
  padding: 0.85rem 1.3rem; font-size: 0.85rem; letter-spacing: 0.04em;
}
.skip:focus { left: 0; }

/* ---------- type utilities ---------- */
.eyebrow {
  font-size: 0.69rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--slate-2); margin: 0 0 1.1rem;
  display: flex; align-items: center; gap: 0.7rem;
}
.eyebrow::before {
  content: ""; width: 1.6rem; height: 2px; flex: none; border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), var(--turq));
}

.h-xl { font-size: clamp(2.7rem, 6.6vw, 5.5rem); }
.h-lg { font-size: clamp(2.05rem, 4.4vw, 3.5rem); }
.h-md { font-size: clamp(1.6rem, 2.9vw, 2.35rem); }
.h-sm { font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.18; }

.lede { font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.54; color: var(--slate); }
.dek  { color: var(--slate); }
em.i {
  font-style: normal; color: var(--teal);
  background-image: linear-gradient(var(--turq), var(--turq));
  background-repeat: no-repeat;
  background-size: 100% 0.12em; background-position: 0 92%;
}

/* ---------- buttons ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.9rem 1.55rem; border-radius: 100px;
  font-size: 0.86rem; font-weight: 600; letter-spacing: 0.015em;
  text-decoration: none; border: 1px solid var(--navy); background: transparent;
  color: var(--navy); cursor: pointer;
  transition: transform .35s var(--ease), background-color .3s ease, color .3s ease, border-color .3s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--solid { background: var(--navy); color: var(--paper); }
.btn--solid:hover { background: var(--teal); border-color: var(--teal); }
.btn--ghost { border-color: var(--line); }
.btn--ghost:hover { border-color: var(--navy); }
.btn--light { background: var(--paper); color: var(--navy); border-color: var(--paper); }
.btn--light:hover { background: var(--turq); border-color: var(--turq); color: var(--navy); }
.btn--onDark { border-color: var(--dline); color: var(--paper); }
.btn--onDark:hover { background: var(--paper); color: var(--navy); border-color: var(--paper); }
.btn__arw { font-size: 0.95em; transition: transform .35s var(--ease); }
.btn:hover .btn__arw { transform: translateX(3px); }

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background-color .4s ease, border-color .4s ease, color .4s ease;
}
.hdr__in {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: 1rem;
}
.brand { text-decoration: none; display: flex; flex-direction: column; line-height: 1.12; }
.brand__n { font-family: var(--display); font-weight: 700; font-size: 1.06rem; letter-spacing: -0.028em; }
.brand__r { font-size: 0.6rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.19em; opacity: .66; margin-top: 4px; }
.nav { display: flex; align-items: center; gap: clamp(0.9rem, 2.2vw, 1.9rem); }
.nav a {
  text-decoration: none; font-size: 0.77rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; opacity: .74;
  transition: opacity .3s ease, color .3s ease;
}
.nav a:hover { opacity: 1; color: var(--teal); }
.js .hdr--over:not(.is-stuck) .nav a:hover { color: var(--turq); }
.nav .btn { padding: 0.58rem 1.1rem; font-size: 0.75rem; text-transform: none; letter-spacing: 0.01em; opacity: 1; }
@media (max-width: 920px) { .nav a:not(.btn) { display: none; } }

/* Homepage: header sits on the dark hero until scrolled. Falls back to the
   light treatment when JS is unavailable, so text is never invisible. */
.js .hdr--over { background: transparent; color: var(--paper); }
.js .hdr--over .nav .btn { border-color: var(--dline); color: var(--paper); }
.js .hdr--over .nav .btn:hover { background: var(--paper); color: var(--navy); border-color: var(--paper); }
.hdr, .hdr--over.is-stuck, html:not(.js) .hdr--over {
  background: rgba(246, 249, 250, 0.86);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  color: var(--navy);
}
.hdr--over.is-stuck, html:not(.js) .hdr--over { border-bottom-color: var(--line-soft); }
.hdr--over.is-stuck .nav .btn, html:not(.js) .hdr--over .nav .btn {
  background: var(--navy); color: var(--paper); border-color: var(--navy);
}
.hdr--light.is-stuck { border-bottom-color: var(--line-soft); }

/* ---------- hero ---------- */
.hero {
  background: var(--navy); color: var(--paper);
  margin-top: -73px; padding-top: 73px;
  position: relative; overflow: hidden;
}
/* One off-centre light source, the way sun reads through water. Decorative
   only — the layer sits behind content and never intercepts pointer events. */
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -30%;
  height: 130%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(58% 70% at 18% 12%, rgba(58, 217, 196, 0.16), transparent 62%),
    radial-gradient(46% 60% at 88% 78%, rgba(10, 107, 124, 0.32), transparent 66%);
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--turq), rgba(58, 217, 196, 0) 55%);
  pointer-events: none; z-index: 3;
}
.hero__in { padding-block: clamp(4rem, 11vw, 8rem) 0; position: relative; z-index: 2; }
.hero__cats {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.85rem;
  font-size: 0.67rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--on-navy-2); margin: 0 0 clamp(1.6rem, 3.5vw, 2.5rem);
}
.hero__cats .dot { color: var(--turq); }
.hero h1 { max-width: 16ch; margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); color: var(--paper); }
.hero h1 em.i { color: var(--turq); background-image: none; }

.hero__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, 370px);
    gap: clamp(2.5rem, 4vw, 3.5rem);
  }
}
.hero__support { font-size: clamp(1.05rem, 1.3vw, 1.22rem); line-height: 1.56; color: var(--on-navy); max-width: 40rem; }
.hero__cta { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

/* portrait — bottom-aligned against the text column so the headline keeps the top edge */
.hero__portrait { margin: 0; max-width: min(56vw, 230px); }
.hero__portrait img {
  width: 100%; height: auto; border-radius: 8px;
  border: 1px solid var(--dline);
  box-shadow: 0 26px 64px rgba(3, 12, 22, 0.55);
}
@media (min-width: 960px) {
  .hero__portrait { max-width: none; align-self: end; }
}

/* credential strip */
.creds {
  margin: clamp(3.5rem, 8vw, 6rem) 0 0; padding: clamp(1.75rem, 3.5vw, 2.5rem) 0;
  border-top: 1px solid var(--dline);
  display: grid; gap: 1.75rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.creds b {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: clamp(2.1rem, 4vw, 3.1rem); line-height: 1;
  letter-spacing: -0.045em; color: var(--turq); margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.creds span { font-size: 0.83rem; color: var(--on-navy); display: block; max-width: 20rem; }

/* ---------- specialization band (split out of the hero) ---------- */
.specs { background: var(--paper-2); border-bottom: 1px solid var(--line-soft); }
.specs__in { padding-block: clamp(2.5rem, 5.5vw, 3.75rem); display: grid; gap: 1.4rem 4rem; }
@media (min-width: 860px) {
  .specs__in { grid-template-columns: minmax(0, 0.3fr) minmax(0, 1fr); align-items: start; }
}
.specs__h { margin: 0; padding-top: 0.55rem; }
.specs__list {
  margin: 0; padding: 0;
  display: grid; gap: 0.05rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.specs__list li {
  font-size: 0.88rem; color: var(--slate);
  padding: 0.52rem 0; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: baseline; gap: 0.7rem;
}
.specs__list li::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--teal); flex: none; transform: translateY(-2px);
}

/* ---------- section shell ---------- */
.sec { padding-block: var(--rhythm); }
.sec--tint { background: var(--paper-2); }
.sec--dark {
  background: linear-gradient(168deg, var(--navy-2) 0%, var(--navy) 58%);
  color: var(--paper);
}
.sec--dark h2, .sec--dark h3 { color: var(--paper); }
.sec--dark .dek, .sec--dark .lede { color: var(--on-navy); }
.sec--dark .eyebrow { color: var(--on-navy-2); }
.sec--dark .eyebrow::before { background: linear-gradient(90deg, var(--turq), var(--turq-2)); }

.sec__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec__head--split { display: grid; gap: 1.5rem; }
@media (min-width: 960px) {
  .sec__head--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: end; gap: 4rem; }
}

/* ---------- executive intro ---------- */
.intro__grid { display: grid; gap: clamp(2.25rem, 5vw, 4rem); }
@media (min-width: 960px) { .intro__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 4.5rem; } }

.when { margin: 0; padding: 0; border-top: 1px solid var(--line); }
.when li {
  padding: 0.8rem 0; border-bottom: 1px solid var(--line-soft);
  display: grid; grid-template-columns: 2.1rem 1fr; gap: 0.6rem; align-items: baseline;
  font-size: 0.95rem; color: var(--slate);
}
.when li span {
  color: var(--teal); font-family: var(--display); font-variant-numeric: tabular-nums;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
}

.pull {
  margin: clamp(2rem, 4vw, 2.75rem) 0 0; padding: clamp(1.6rem, 3.2vw, 2.4rem);
  background: linear-gradient(150deg, var(--navy-2), var(--navy) 70%);
  color: var(--paper); border-radius: 8px;
  border-left: 2px solid var(--turq);
}
.pull p {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  line-height: 1.26; letter-spacing: -0.028em; margin: 0;
}
.pull .em { color: var(--turq); font-weight: 700; }

/* ---------- case studies ---------- */

/* Portfolio progression: the arc the collection traces, read as one continuous rail.
   Deliberately unnumbered — the cards below carry the case numbers, and they are
   ordered by scale of change rather than by this arc, so a second set of numerals
   running the other way would only compete with them. */
.prog { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.prog__cap {
  font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.17em;
  color: var(--slate-2); margin: 0 0 1.15rem;
}
.prog__list { margin: 0; padding: 0; list-style: none; }
.prog__list li {
  position: relative; padding: 0 0 0.9rem 1.6rem;
  border-left: 1px solid var(--line);
  display: grid; gap: 0.1rem 1.5rem; align-items: baseline;
}
@media (min-width: 780px) {
  .prog__list li { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); }
}
.prog__list li:last-child { padding-bottom: 0; border-left-color: transparent; }
.prog__list li::before {
  content: ""; position: absolute; left: -3.5px; top: 0.5rem;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--paper-2); border: 1.5px solid var(--teal);
}
.prog__list b {
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  letter-spacing: -0.024em; color: var(--navy);
}
.prog__list span { font-size: 0.9rem; color: var(--slate); }

.cases { display: grid; gap: clamp(1.1rem, 2.2vw, 1.6rem); }

.case {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 8px;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  background: var(--paper);
  position: relative; overflow: hidden;
  transition: border-color .4s ease, transform .5s var(--ease), box-shadow .4s ease;
}
.case:hover { border-color: var(--teal); transform: translateY(-3px); box-shadow: 0 20px 44px -26px rgba(8, 25, 43, .38); }
.case__top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: clamp(1.4rem, 2.8vw, 2rem);
  padding-bottom: 1rem; border-bottom: 1px solid var(--line-soft);
}
.case__num {
  font-family: var(--display); font-weight: 800; font-size: clamp(1.35rem, 2.5vw, 1.9rem);
  color: var(--teal); line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.case__theme {
  font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.19em; color: var(--slate-2); text-align: right;
}
.case__org { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--teal); margin-bottom: 0.65rem; }
.case h3 { margin-bottom: 0.85rem; }
.case__dek { color: var(--slate); max-width: 44rem; }
.case__foot {
  margin-top: clamp(1.4rem, 2.8vw, 2rem); padding-top: 1.15rem;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; justify-content: space-between;
}
.tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; }
.tags li {
  font-size: 0.69rem; letter-spacing: 0.04em; color: var(--slate);
  background: var(--sea); border: 1px solid transparent;
  border-radius: 100px; padding: 0.26rem 0.7rem;
}
.case__go { font-size: 0.79rem; font-weight: 600; color: var(--teal); white-space: nowrap; }
.case__go .a { display: inline-block; transition: transform .4s var(--ease); }
.case:hover .case__go { color: var(--teal-d); }
.case--dark:hover .case__go { color: var(--turq-2); }
.case:hover .case__go .a { transform: translateX(4px); }

/* variants — deliberately not the same visual weight */
.case--feature { border-color: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.case--feature:hover { box-shadow: inset 0 0 0 1px var(--teal), 0 20px 44px -26px rgba(8, 25, 43, .38); }
.case--feature h3 { font-size: clamp(1.8rem, 3.4vw, 2.85rem); }
.case--dark {
  background: linear-gradient(150deg, var(--navy-2) 0%, var(--navy) 62%);
  color: var(--paper);
  border-color: transparent; box-shadow: none;
}
.case--dark h3 { color: var(--paper); }
.case--dark .case__dek { color: var(--on-navy); }
.case--dark .case__org, .case--dark .case__num { color: var(--turq); }
.case--dark .case__theme { color: var(--on-navy-2); }
.case--dark .case__top, .case--dark .case__foot { border-color: var(--dline-soft); }
.case--dark .tags li { background: transparent; border-color: var(--dline); color: var(--on-navy); }
.case--dark .case__go { color: var(--turq); }
.case--dark:hover { border-color: var(--turq); box-shadow: 0 20px 50px -26px rgba(3, 12, 22, .85); }

.case__stat {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.2rem, 4.8vw, 3.8rem);
  line-height: 0.96; color: var(--teal); letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.case--dark .case__stat { color: var(--turq); }
.case__stat small {
  display: block; font-family: var(--body); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--slate-2); margin-top: 0.55rem;
}
.case--dark .case__stat small { color: var(--on-navy-2); }
.case__split { display: grid; gap: 1.6rem; }
@media (min-width: 820px) { .case__split { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 3rem; } }

.cases__pair { display: grid; gap: clamp(1.1rem, 2.2vw, 1.6rem); }
@media (min-width: 880px) { .cases__pair { grid-template-columns: 1fr 1fr; } }
.case--compact { padding: clamp(1.4rem, 2.5vw, 2rem); }
.case--compact h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); }
.case--compact .case__dek { font-size: 0.95em; }

.motif { position: absolute; right: -70px; top: -70px; width: 280px; height: 280px; opacity: .14; pointer-events: none; }
.motif circle, .motif path, .motif rect { fill: none; stroke: currentColor; stroke-width: 1; }
.case--dark .motif { color: var(--turq); opacity: .2; }

/* ---------- career journey ---------- */
.journey { display: grid; gap: clamp(2.25rem, 5vw, 4rem); }
@media (min-width: 960px) { .journey { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 4.5rem; } }

/* Agency foundation: the range of disciplines as one compact index. Horizontal
   rules only — with eleven items no column count divides evenly, and a ragged
   final row then reads as intentional instead of as a hole in a boxed grid. */
.disc__cap {
  font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.17em;
  color: var(--on-navy-2); margin: clamp(1.75rem, 3.5vw, 2.25rem) 0 0.35rem;
}
.disc {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  column-gap: clamp(1rem, 2.5vw, 2.25rem);
  border-top: 1px solid var(--dline);
}
.disc li {
  display: flex; align-items: baseline; gap: 0.55rem;
  padding: 0.72rem 0 0.68rem; border-bottom: 1px solid var(--dline-soft);
  font-family: var(--display); font-weight: 600; font-size: 0.88rem;
  letter-spacing: -0.016em; color: var(--paper);
  transition: color .3s ease;
}
.disc li:hover { color: var(--turq-2); }
.disc__n {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.13em;
  color: var(--on-navy-2); font-variant-numeric: tabular-nums;
  transition: color .3s ease;
}
.disc li:hover .disc__n { color: var(--turq); }

.arc { margin: 0; padding: 0; }
.arc li { position: relative; padding: 0 0 1.75rem 2.2rem; border-left: 1px solid var(--dline); }
.arc li:last-child { padding-bottom: 0; border-left-color: transparent; }
.arc li::before {
  content: ""; position: absolute; left: -4.5px; top: 0.5rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--navy); border: 1.5px solid var(--turq);
}
.arc strong {
  font-family: var(--display); font-weight: 700; font-size: 1.18rem;
  display: block; letter-spacing: -0.026em; color: var(--paper); margin-bottom: 0.25rem;
}
.arc span { font-size: 0.91rem; color: var(--on-navy); }

/* ---------- principles ---------- */
.prin { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); }
@media (min-width: 820px) { .prin { grid-template-columns: 1fr 1fr; column-gap: clamp(2.5rem, 5vw, 5rem); } }
.prin > div { border-top: 1px solid var(--line); padding-top: 1.4rem; }
@media (min-width: 820px) { .prin > div:nth-child(even) { transform: translateY(clamp(1rem, 3vw, 2.5rem)); } }
.prin__n {
  font-family: var(--display); font-weight: 800; font-size: 1.4rem;
  color: var(--teal); display: block; margin-bottom: 0.7rem; line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.prin h3 { margin-bottom: 0.6rem; }
.prin p { color: var(--slate); margin: 0; }

/* ---------- capabilities (grouped — no bars, no ratings) ---------- */
.caps { display: grid; gap: clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 700px)  { .caps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .caps { grid-template-columns: repeat(4, 1fr); } }
.caps__g h3 {
  font-family: var(--body); font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.19em; color: var(--slate-2);
  padding-bottom: 0.9rem; margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
}
.caps__g ul { margin: 0; padding: 0; }
.caps__g li {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1rem, 1.3vw, 1.16rem); letter-spacing: -0.022em;
  color: var(--navy); padding: 0.62rem 0; border-bottom: 1px solid var(--line-soft);
  line-height: 1.25; transition: color .3s ease;
}
.caps__g li:hover { color: var(--teal); }

/* ---------- technology ecosystem ---------- */
.stack {
  margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.stack li {
  padding: 1.05rem 1.1rem;
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
  font-size: 0.88rem; color: var(--slate);
  transition: background-color .3s ease, color .3s ease;
}
.stack li:hover { background: var(--sea); color: var(--teal-d); }

/* ---------- about ---------- */
.about__grid { display: grid; gap: clamp(2rem, 4vw, 4rem); }
@media (min-width: 960px) { .about__grid { grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); gap: 4.5rem; } }
.mono {
  font-family: var(--display); font-weight: 800; font-size: clamp(5rem, 12vw, 9rem);
  line-height: 0.82; letter-spacing: -0.07em;
  background: linear-gradient(105deg, var(--navy) 8%, var(--teal) 70%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  border-top: 2px solid var(--teal); padding-top: 1.25rem; margin-top: 1.75rem;
}
.mono small {
  display: block; font-family: var(--body); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.19em; text-transform: uppercase; color: var(--slate-2);
  -webkit-text-fill-color: currentColor;
  margin-top: 1.25rem; line-height: 1.5;
}

/* ---------- contact ---------- */
.contact__grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 960px) { .contact__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 5rem; align-items: start; } }
.contact__links { margin: 0; padding: 0; }
.contact__links li { border-top: 1px solid var(--dline); }
.contact__links li:last-child { border-bottom: 1px solid var(--dline); }
.contact__links a {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center;
  padding: 1.3rem 0; text-decoration: none;
  transition: color .3s ease, padding-left .4s var(--ease);
}
.contact__links a:hover { color: var(--turq); padding-left: 0.6rem; }
.contact__links li { transition: border-color .3s ease; }
.contact__links li:hover { border-color: var(--turq); }
.contact__links .k {
  display: block; font-size: 0.66rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.19em; color: var(--on-navy-2); margin-bottom: 0.4rem;
}
.contact__links .v {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.2rem, 2.1vw, 1.6rem); letter-spacing: -0.028em; word-break: break-word;
}
.contact__links .a { font-size: 1.1rem; color: var(--on-navy-2); transition: transform .4s var(--ease); }
.contact__links a:hover .a { transform: translateX(4px); color: var(--turq); }

/* Contact links sitting under the lede rather than in their own column. */
.contact__links--aside { margin-top: clamp(2rem, 4vw, 2.75rem); }

/* ---------- contact form ----------
   Deliberately mirrors the left column: labels use the same uppercase treatment and
   colour as .contact__links .k, and the action row is separated by the same hairline
   rule the link list uses, so both halves of the section read as one system. */
.contact__form { display: grid; gap: clamp(0.85rem, 1.6vw, 1.15rem); }
/* [hidden] is a UA-stylesheet display:none, which the grid above would otherwise beat. */
.contact__form[hidden] { display: none; }

/* Name + email share a row once there is width for it; message always spans. */
.contact__row { display: grid; gap: inherit; }
@media (min-width: 560px) { .contact__row { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 0.5rem; margin: 0; }
.field label {
  /* Matches .contact__links .k exactly — keep the two in step. */
  font-size: 0.66rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.19em; color: var(--on-navy-2);
}
.field input, .field textarea {
  font-family: inherit; font-size: 0.97rem; line-height: 1.5;
  color: var(--paper); width: 100%; padding: 0.8rem 0.95rem;
  background: rgba(246, 249, 250, 0.045);
  border: 1px solid var(--dline); border-radius: 8px;
  transition: border-color .3s ease, background-color .3s ease;
}
.field textarea { min-height: 9.5rem; resize: vertical; display: block; }
.field input:hover, .field textarea:hover { border-color: var(--turq); }
.field input:focus, .field textarea:focus { background: rgba(246, 249, 250, 0.08); }
.field input:invalid:not(:placeholder-shown) { border-color: rgba(255, 148, 138, 0.5); }

/* Action row: hairline above it echoes the rules bounding the contact link list. */
.contact__act {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.35rem;
  padding-top: clamp(0.9rem, 2vw, 1.3rem); border-top: 1px solid var(--dline-soft);
}
.contact__form .btn { flex: none; }
.contact__form .btn[disabled] { opacity: .55; cursor: default; transform: none; }
.contact__note {
  font-size: 0.76rem; line-height: 1.5; letter-spacing: 0.03em;
  color: var(--on-navy-2); max-width: 20rem;
}

.contact__ok, .contact__err {
  border-radius: 8px; padding: 1.05rem 1.2rem; font-size: 0.92rem; line-height: 1.55;
  margin: 0;
}
.contact__ok {
  border: 1px solid var(--turq); background: rgba(58, 217, 196, 0.09); color: var(--paper);
}
.contact__ok b {
  display: block; font-family: var(--display); font-size: 1.05rem; margin-bottom: 0.3rem;
}
.contact__err { border: 1px solid var(--dline); color: var(--on-navy); }

/* ---------- footer ---------- */
.foot {
  background: var(--navy); color: var(--on-navy-2);
  padding-block: 2.25rem 2.75rem; border-top: 1px solid var(--dline-soft);
}
.foot__in {
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: center;
  justify-content: space-between; font-size: 0.77rem; letter-spacing: 0.05em;
}
.foot a { color: var(--on-navy); text-decoration: none; }
.foot a:hover { color: var(--paper); }

/* ---------- case study article pages ---------- */
.csHero {
  background: linear-gradient(180deg, var(--sea) 0%, var(--paper-2) 72%);
  padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}
.csHero__meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center;
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.19em;
  color: var(--slate-2); margin-bottom: clamp(1.4rem, 3vw, 2rem);
}
.csHero__meta .n { color: var(--teal); }
.csHero h1 { max-width: 20ch; margin-bottom: 1.35rem; }
.csFacts {
  display: grid; gap: 1.4rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.6rem; border-top: 1px solid var(--line);
}
.csFacts dt { font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.17em; color: var(--slate-2); margin-bottom: 0.45rem; }
.csFacts dd { margin: 0; font-size: 0.92rem; color: var(--slate); }

.csBody { padding-block: clamp(3rem, 6vw, 5rem); }
.csBlock {
  display: grid; gap: 0.8rem;
  padding-block: clamp(1.9rem, 3.6vw, 2.9rem);
  border-top: 1px solid var(--line-soft);
}
.csBlock:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 960px) {
  .csBlock { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 0 3.5rem; }
  .csBlock__label { position: sticky; top: 6rem; align-self: start; }
}
.csBlock__label {
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.19em;
  color: var(--slate-2); display: flex; gap: 0.6rem; align-items: baseline;
}
.csBlock__label .n { color: var(--teal); font-variant-numeric: tabular-nums; }
.csBlock__body { max-width: 44rem; }
.csBlock__body h2 { font-size: clamp(1.45rem, 2.4vw, 1.95rem); margin-bottom: 0.9rem; }
.csBlock__body p { color: var(--slate); }

.csList { margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.csList li {
  display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: baseline;
  color: var(--slate); font-size: 0.96rem;
}
.csList li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--teal); transform: translateY(-2px); }

/* Journey figure: the single path the customer walks, sitting on top of the
   systems that make it possible. Chips wrap to as many rows as the width
   allows, so no horizontal scrolling on narrow screens. */
.csFlow {
  margin: 1.5rem 0 0; padding: clamp(1.1rem, 2.6vw, 1.5rem);
  background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 8px;
}
.csFlow .csFlow__cap {
  font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.17em;
  color: var(--slate-2); margin: 0 0 0.85rem;
}
.csFlow__steps, .csFlow__sys { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; }
.csFlow__steps { align-items: center; gap: 0.45rem 0.1rem; }
.csFlow__steps li { display: flex; align-items: center; }
.csFlow__steps li span {
  font-family: var(--display); font-weight: 700; font-size: 0.85rem; letter-spacing: -0.012em;
  color: var(--navy); background: var(--paper);
  border: 1px solid var(--line); border-radius: 100px; padding: 0.4rem 0.85rem;
}
.csFlow__steps li:not(:last-child)::after {
  content: "\2192"; color: var(--teal); font-weight: 600; padding: 0 0.3rem;
}
/* The systems layer stays deliberately quieter than the journey above it. */
.csFlow__base { margin-top: 1.15rem; padding-top: 1.05rem; border-top: 1px dashed var(--line); }
.csFlow__sys { gap: 0.3rem; }
.csFlow__sys li {
  font-size: 0.68rem; letter-spacing: 0.04em; color: var(--slate-2);
  border: 1px dashed var(--line); border-radius: 100px; padding: 0.24rem 0.65rem;
}

/* Pull quote: display type at case-study scale, a teal rule instead of quote marks. */
.csQuote { margin: 1.8rem 0 0; padding-left: clamp(1.1rem, 3vw, 1.75rem); border-left: 2px solid var(--teal); }
.csQuote p {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.03em;
  font-size: clamp(1.2rem, 2.5vw, 1.7rem); line-height: 1.24;
  color: var(--navy); margin: 0; text-wrap: balance;
}

.scope {
  background: var(--sea); border-left: 2px solid var(--teal);
  padding: 1.3rem 1.55rem; margin-top: 1.4rem; border-radius: 0 6px 6px 0;
}
.scope p { margin: 0; font-size: 0.93rem; color: var(--slate); }
.scope strong { color: var(--navy); }

.outcomes { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); margin-top: 1.6rem; }
.outcome { border-top: 2px solid var(--teal); padding-top: 0.95rem; }
.outcome b {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.02;
  letter-spacing: -0.045em; margin-bottom: 0.5rem;
  color: var(--teal); font-variant-numeric: tabular-nums;
}
.outcome span { font-size: 0.86rem; color: var(--slate); }

.csNav { border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 5vw, 3.5rem); background: var(--paper-2); }
.csNav__in { display: grid; gap: 1.5rem; }
@media (min-width: 780px) { .csNav__in { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.csNav__side { max-width: 26rem; }
.csNav__side .eyebrow { margin-bottom: 0.45rem; }
.csNav__side a {
  text-decoration: none; font-family: var(--display); font-weight: 700;
  font-size: clamp(1.1rem, 1.9vw, 1.4rem); letter-spacing: -0.028em;
  transition: color .3s ease;
}
.csNav__side a:hover { color: var(--teal); }

/* ---------- reveal (progressive enhancement: visible without JS) ---------- */
.js .rv { opacity: 0; transform: translateY(18px); }
.js .rv.in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .rv.in { opacity: 1; transform: none; transition: none; }
  .btn:hover, .case:hover { transform: none; }
}

/* ---------- mobile ---------- */
@media (max-width: 880px) {
  .hero { margin-top: -69px; padding-top: 69px; }
  .case__top { flex-direction: column; gap: 0.45rem; align-items: flex-start; }
  .case__theme { text-align: left; }
  .prin > div:nth-child(even) { transform: none; }
  .csNav__in { grid-template-columns: 1fr; }
}