/* AcornAI v2: an art-direction layer over styles.css (and each page's own CSS).
   Same content and widgets as v1. What changes: hard paper/ink contrast, a split hero with a
   growing Channels root system on every page, and stronger reveals. Sections say their tone in
   data-tone; ink bands wipe open as they arrive and the nav follows the band underneath it. */

.v2 { --nav-h: 68px; --accent: var(--forest); --wrap: 1360px; --section-top: clamp(3.5rem, 6.7vw, 6rem); } /* wider content, slimmer side margins */
.v2 body { background: var(--paper); color: var(--ink); }

/* ---------- Type: bigger, tighter headlines for more contrast ---------- */
.v2 h2 { font-size: var(--title-size); letter-spacing: -0.04em; line-height: 1; }
/* Homepage section titles match the hero tagline */
.home #main > .section h2 { font-size: clamp(2.15rem, 3.4vw, 2.85rem); letter-spacing: -0.04em; line-height: 1.08; }
.v2 .section-head h2 { max-width: 14ch; }
.v2 .section { padding: var(--section-top) 0 clamp(4.5rem, 7.8vw, 7rem); }

/* ---------- Section tones ---------- */
.v2 #main .section { box-shadow: none; }
.v2 #main > [data-tone="paper"] { background: var(--paper); color: var(--text); }
.v2 #main > [data-tone="ink"], .v2 .footer { background-color: var(--ink); color: var(--on-dark); }
.v2 #faq:not(.dark) { background-image: none; }

/* v1 components were drawn for dark sections. On paper, their "on dark" tokens turn to ink... */
.v2 #main > [data-tone="paper"] {
  --on-dark: var(--ink); --on-dark-muted: #3F4B44; --on-dark-faint: rgba(14, 37, 27, .58);
  --line-dark: rgba(14, 37, 27, .13); --surface-dark: rgba(14, 37, 27, .03);
}
/* ...except the product windows and cards, which stay dark: ink islands on paper, the Cohere move */
.v2 #main > [data-tone="paper"] :is(.demo-window, .trace, .palette, .table-scroll, .wheel-card[data-slot="0"], .readout, .plan-featured, .demo-form) {
  --on-dark: var(--paper); --on-dark-muted: rgba(247, 243, 234, .78); --on-dark-faint: rgba(247, 243, 234, .6);
  --line-dark: rgba(247, 243, 234, .14); --surface-dark: rgba(247, 243, 234, .04);
}
.v2 #main > [data-tone="paper"] :is(.demo-window, .trace, .palette, .table-scroll, .wheel-card[data-slot="0"], .demo-form) { color: var(--paper); }
/* The wheel's side cards turn light on paper, so the dark middle card stands out instead of greying out */
.v2 #main > [data-tone="paper"] .wheel-card:not([data-slot="0"]) { background: var(--white); opacity: .7; }
.v2 #main > [data-tone="paper"] .wheel-chips span { background: rgba(14, 37, 27, .05); }
.v2 #main > [data-tone="paper"] .wheel-card[data-slot="0"] .wheel-chips span { background: rgba(247, 243, 234, .07); }
/* Text fades with the card's background as it rolls between light and dark */
.v2 .wheel-card * { transition: color 700ms cubic-bezier(.65, 0, .35, 1), background-color 700ms cubic-bezier(.65, 0, .35, 1), border-color 700ms cubic-bezier(.65, 0, .35, 1); }
.v2 #main > [data-tone="paper"] .demo-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.v2 #main > [data-tone="paper"] :is(.more-work-head a, .spot-all, h2 .mint) { color: var(--forest); }
.v2 #main > [data-tone="paper"] .work-card { background: var(--white); }
.v2 #main > [data-tone="paper"] .work-tags span { background: rgba(14, 37, 27, .06); }
.v2 #main > [data-tone="paper"] .decode-glyph { color: rgba(18, 73, 46, .45); }
@media (hover: hover) and (pointer: fine) {
  .v2 #main > [data-tone="paper"] .work-card:hover { background: var(--white); border-color: var(--forest); }
}

/* Talk to Our Experts stays Mint everywhere; secondary buttons turn ink on paper */
.v2 #main > [data-tone="paper"] .btn-line { color: var(--ink); border-color: rgba(14, 37, 27, .3); background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .v2 #main > [data-tone="paper"] .btn-line:hover { border-color: var(--ink); }
}

/* ---------- Navigation: Fashion White from first paint, before scripts run ---------- */
.v2 .nav { background: var(--paper); color: var(--ink); border-bottom-color: rgba(14, 37, 27, .1); }
.v2 .nav .logo-drop { --acorn-mark: var(--forest); --acorn-word: var(--ink); }
.v2 .nav .nav-links a { color: var(--text-muted); }
.v2 .nav .nav-links a:hover, .v2 .nav .nav-links a[aria-current="page"] { color: var(--ink); }
.v2 .nav .cmdk-trigger { color: var(--ink); border-color: rgba(14, 37, 27, .18); background: transparent; }
.v2 .nav .cmdk-trigger kbd { color: var(--text-muted); border-color: rgba(14, 37, 27, .18); background: rgba(14, 37, 27, .04); }
.v2 .nav .nav-toggle { color: var(--ink); border-color: rgba(14, 37, 27, .18); }
/* Subpages use the lockup image: the light one on ink, the Forest Green one on paper */
.v2 .nav-logo .logo-on-paper { display: none; }
.v2 .nav .nav-logo .logo-on-ink { display: none; }
.v2 .nav .nav-logo .logo-on-paper { display: block; }
@media (max-width: 860px) {
  .v2 .nav .nav-links { background: var(--paper); border-bottom-color: rgba(14, 37, 27, .1); }
}

/* ---------- Hero: copy on the left, a Channels crop from the brand kit on the right ---------- */
.v2-hero {
  position: relative; overflow: hidden; display: grid; align-items: center;
  min-height: calc(100vh - var(--nav-h)); min-height: min(calc(100svh - var(--nav-h)), 920px);
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--paper); color: var(--ink);
  --root: var(--forest); --sap: var(--mint);
}
.v2-hero--page { min-height: clamp(520px, 72svh, 760px); }
/* The art: a crop of the kit's Channels master at its own size (1440 wide), centred on the hero, with
   the copy column inside the crop's clear type area. It is revealed row by row, as v1's hero was. */
.v2-kit-art {
  position: absolute; z-index: 2; top: 0; left: 50%; width: 1440px; margin-left: -720px; pointer-events: none; /* on top of the copy; clicks pass through */
  background: top center / 1440px auto no-repeat; clip-path: inset(0 0 100% 0);
}
.v2-roots3d { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.v2-kit-art.is-grown { clip-path: inset(0 0 0 0); transition: clip-path 2600ms steps(110, end); }
.v2-kit-art--home { height: 832px; background-image: url("../assets/graphics/v2-home-hero.svg"); }
.v2-kit-art--team { height: 648px; background-image: url("../assets/graphics/v2-team-rings.svg"); }
.v2-kit-art.is-rings { background-image: none; clip-path: none; }
.v2-kit-art.is-rings svg { display: block; }
/* Each ring grows out from the pith, inner rings first */
.v2-kit-art.is-rings #contours path { transform-box: fill-box; transform: scale(0); transition: transform 1400ms cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 60ms); }
.v2-kit-art.is-rings.is-grown #contours path { transform: scale(1); }
.v2-hero > .wrap { position: relative; z-index: 1; width: 100%; padding-left: calc(var(--gutter) + 5.5rem + 1rem); } /* one column in from the outside line */
/* Below the wide layout that inset is most of a column, so the headline sits too far from the logo. */
@media (max-width: 1360px) {
  .v2-hero > .wrap { padding-left: calc(var(--gutter) + 1.5rem); }
}
/* Home only: the headline sits 3rem nearer the outside line, further clear of the roots. */
@media (min-width: 1361px) {
  .v2-hero:has(.v2-tagline) > .wrap { padding-left: calc(var(--gutter) + 3.5rem); }
}
.v2-copy { display: grid; justify-items: start; gap: 1.5rem; max-width: min(52%, 640px); }
.v2-copy h1 { font-size: var(--title-size); line-height: 1.02; letter-spacing: -0.045em; max-width: 14ch; text-wrap: balance; }
.v2-hero--page .v2-copy h1 { font-size: var(--title-size); max-width: 12ch; }
.v2-hero--page .v2-copy h1.v2-title-sm { font-size: clamp(2.3rem, 4.4vw, 3.9rem); }   /* Our team keeps a larger title */
.v2-accent { color: var(--forest); }
/* The hero's payoff word pixelates in (v2.js): a canvas over the word's own box draws it, while the word itself waits transparent */
.v2-payoff { white-space: nowrap; }
[data-v2-pop] { position: relative; }
[data-v2-pop].is-popping { -webkit-text-fill-color: transparent; } /* not color, which the canvas reads to draw the word */
.v2-pop { position: absolute; pointer-events: none; }
/* Homepage tagline: left aligned, the second sentence kept on one line on desktop */
.v2-copy:has(.v2-tagline) { width: min(72%, 46rem); justify-items: stretch; }
.v2-copy h1.v2-tagline { font-size: clamp(2.15rem, 3.4vw, 2.85rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.08; color: #1c1c1c; max-width: none; margin-bottom: .35rem; }
.v2-copy:has(.v2-tagline) .v2-lede { max-width: none; width: 0; min-width: 100%; font-size: clamp(1.2rem, 1.55vw, 1.5rem); } /* match the title's line width */
/* The title multiplies onto the roots turning behind it. The copy can't sit in its own layer, or there is nothing under it to blend with. */
.v2-hero:has(.v2-roots3d) > .wrap { z-index: auto; }
.v2-copy h1.v2-tagline { mix-blend-mode: multiply; }
.v2-keep { white-space: nowrap; }
/* "compound." in Forest Green */
.v2-payoff { color: var(--forest); }
.v2-hero .decode-glyph { color: rgba(18, 73, 46, .45); }
.v2-hero .kicker { margin: 0; }
.v2-lede { font-size: clamp(0.95rem, 1.15vw, 1.075rem); line-height: 1.5; color: #3F4B44; max-width: 44ch; }
.v2-hero .actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.v2-cta-inner .actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }

/* ---------- Closing call to action on the subpages ---------- */
.v2-cta-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem 4rem; align-items: end; }
.v2-cta-inner h2 { max-width: 13ch; }
.v2-cta-inner .section-intro { margin-bottom: 1.5rem; }
.v2-cta-inner--form { align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.v2-cta-inner--form :is(h1, h2) { max-width: 10em; font-size: var(--title-size); letter-spacing: -0.04em; line-height: 1; }
.v2-cta-inner--form .section-intro { margin: 1.25rem 0 0; }
.v2 [data-tone="ink"] .v2-accent { color: var(--mint); }

/* ---------- Subpages ---------- */
/* v1 made each subpage one dark page; v2 lets the bands carry the tone */
.v2 .p-page { background: var(--paper); color: var(--ink); }
.v2 .p-page .section-intro { color: var(--on-dark-muted); }
/* Projects: v1's title block stays ink; the intro under it moves to paper */
.v2 .p-title { color: var(--paper); }
.v2 .p-title-word { font-size: clamp(3.25rem, 9vw, 8rem); }
.v2 .p-hero[data-tone="paper"] .lede { color: #3F4B44; }

/* ---------- Headlines fade up into the page (Cohere fadeInUp) ----------
   The whole heading rises 25% and fades in over 0.3s, ease-in-out.
   The line under a hero title uses the same motion and waits 0.1s.
   Section headings stay hidden until they enter the screen (.is-in, v2.js). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(25%); }
    to { opacity: 1; transform: translateY(0); }
  }
  .v2 #main > [data-tone] :is(h1, [data-sprout]):not([data-decode]) {
    animation: fadeInUp 0.3s ease-in-out both;
  }
  .v2 #main > [data-tone] :is(h1, [data-sprout]):not([data-decode]) + :is(.lede, .v2-lede, .ab-lead, .ip-lead, .team-banner-lede) {
    animation: fadeInUp 0.3s ease-in-out 0.1s both;
  }
  .v2 #main > [data-tone] :is(h2, [data-rise]):not([data-sprout]) { opacity: 0; }
  .v2 #main > [data-tone] :is(h2, [data-rise]):not([data-sprout]).is-in {
    animation: fadeInUp 0.3s ease-in-out forwards;
  }
  /* Sprout titles keep their word wraps; the fade above is the entrance, not the word rise. */
  .v2 .sprout-title .word > span,
  .v2 .sprout-title.is-grown .word > span { transform: none; transition: none; }
}

/* ---------- Small screens: roots above, words below ---------- */
@media (max-width: 760px) {
  .v2-hero { align-items: end; padding: 42vh 0 2.5rem; }
  .v2-hero--page { padding-top: 34vh; }
  .v2-copy { max-width: 100%; gap: 1.1rem; }
  .v2-copy h1.v2-title-sm { font-size: clamp(2.2rem, 9vw, 2.8rem); }
  .v2-hero > .wrap { padding-left: var(--gutter); }
  .v2-copy:has(.v2-tagline) { width: 100%; max-width: 100%; }
  .v2-copy h1.v2-tagline { font-size: clamp(1.75rem, 7.7vw, 2.15rem); }
  .v2-copy:has(.v2-tagline) .v2-lede { font-size: 1.05rem; }
  .home #main > .section h2 { font-size: clamp(1.6rem, 7vw, 2.15rem); }
  .v2-keep { white-space: normal; }
  .v2-cta-inner { grid-template-columns: 1fr; }
  /* Phone crops: the type area sits low, the roots above it */
  .v2-kit-art { left: 0; right: 0; width: auto; margin-left: 0; background-size: 390px auto; }
  .v2-kit-art--home { height: 776px; background-image: url("../assets/graphics/v2-home-hero-phone.svg"); }
  .v2-kit-art--team { height: 608px; background-image: url("../assets/graphics/v2-team-rings-phone.svg"); }

}

/* ---------- Reduced motion: no wipes or fades ---------- */
@media (prefers-reduced-motion: reduce) {
  .v2-kit-art { clip-path: none; }
  .v2-kit-art.is-rings #contours path { transform: none; transition: none; }
}

/* ---------- No underlines anywhere: links, the current page in the nav, or under titles ---------- */
.v2 a, .v2 a:hover { text-decoration: none; }
.v2 .nav-links a[aria-current="page"] { box-shadow: none; }
.v2 .sprout-title::after { display: none; }

/* Homepage: a shorter hero, so the partners bar sits well up the screen on load and the top of the next
   section's heading shows above the fold (--peek: that section's top padding, then 2rem of its first line) */
.v2-hero:has(+ .partners) {
  --partners-h: 80px; --peek: calc(var(--section-top) + 2rem);
  min-height: calc(100vh - var(--nav-h) - var(--partners-h) - var(--peek)); min-height: min(calc(100svh - var(--nav-h) - var(--partners-h) - var(--peek)), 720px);
  padding-block: clamp(1.5rem, 6svh, 5rem); /* tighter on short screens, so the words don't grow the hero past that height */
}
/* Homepage: the words stay on the left and sit in the vertical centre of the hero */
.v2-hero:has(+ .partners) { align-items: center; }
@media (max-width: 760px) {
  .v2-hero:has(+ .partners) { --partners-h: 94px; padding: 24svh 0 1.5rem; min-height: 0; align-items: end; }
  /* the roots fade out behind the words, so the title reads on its own */
  .v2-hero:has(+ .partners) .v2-copy { position: relative; isolation: isolate; }
  .v2-hero:has(+ .partners) .v2-copy::before {
    content: ""; position: absolute; z-index: -1; inset: -3.5rem calc(-1 * var(--gutter)) -1.5rem; pointer-events: none;
    background: linear-gradient(to bottom, rgba(247, 243, 234, 0), var(--paper) 3.5rem);
  }
}

/* ---------- Homepage security strip: heading, then four places spanning rail to rail ----------
   The boxes (.security-places) work on any ink section; .security-places--text holds a title and a line per box,
   and .security-places--tabs lists the titles down the left and shows the chosen one's line on the right. */
.v2 #security {
  padding: clamp(3rem, 5.5vw, 4.5rem) 0;
}
.v2 #security .security-head {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}
.v2 #security .security-head h2 {
  max-width: none;
  margin: 0 auto;
}
.v2 .security-places {
  --security-rule: rgba(247, 243, 234, .18);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: clamp(2rem, 4vw, 2.5rem) var(--rail-x) 0;
  border-top: 1px solid var(--security-rule);
  border-bottom: 1px solid var(--security-rule);
}
.v2 .security-places li {
  display: grid;
  place-items: center;
  min-height: 148px;
  padding: 24px 16px;
  border-right: 1px solid var(--security-rule);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
}
.v2 .security-places li:last-child { border-right: 0; }
@media (max-width: 760px) {
  .v2 .security-places { grid-template-columns: 1fr 1fr; }
  .v2 .security-places li { min-height: 96px; font-size: 1.15rem; }
  .v2 .security-places li:nth-child(2) { border-right: 0; }
  .v2 .security-places li:nth-child(-n + 2) { border-bottom: 1px solid var(--security-rule); }
}
@media (max-width: 600px) { .v2 .security-places { margin-inline: 0; } } /* the rails are hidden here */

/* Text boxes: three across, each a title and its line, top-left; the rules run between rows too */
.v2 .security-places--text { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v2 .security-places--text li {
  place-items: initial;
  align-content: start;
  gap: .55rem;
  min-height: 0;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  border-right: 1px solid var(--security-rule);
  border-bottom: 0;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: normal;
  text-align: left;
}
.v2 .security-places--text li:nth-child(3n) { border-right: 0; }
.v2 .security-places--text li:nth-child(-n + 3) { border-bottom: 1px solid var(--security-rule); }
.v2 .security-places--text h3 { margin: 0; font-size: 1.2rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
.v2 .security-places--text p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--on-dark-muted); }
@media (max-width: 960px) {
  .v2 .security-places--text { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2 .security-places--text li, .v2 .security-places--text li:nth-child(3n) { border-right: 1px solid var(--security-rule); border-bottom: 1px solid var(--security-rule); }
  .v2 .security-places--text li:nth-child(2n) { border-right: 0; }
  .v2 .security-places--text li:nth-last-child(-n + 2) { border-bottom: 0; }
}
@media (max-width: 560px) {
  .v2 .security-places--text { grid-template-columns: minmax(0, 1fr); }
  .v2 .security-places--text li, .v2 .security-places--text li:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--security-rule); }
  .v2 .security-places--text li:last-child { border-bottom: 0; }
}

/* Tabs: the titles run down the left under the section heading, and the chosen one's line sits on a Fashion White
   card on the right, under the intro (the same 1.1fr 1fr columns and 4rem gap as .section-head, with the rule in the
   middle of the gap). patterns.js does the switching. The rails sit 20px outside the text column, 8px from the edge
   below 700px, and are hidden below 600px; below 860px the card moves under the titles. */
.v2 .security-places--tabs {
  --tabs-inset: 20px;
  --tabs-pad: clamp(1.25rem, 2.2vw, 1.75rem);
  grid-template-columns: calc(20px + (100% - 40px - 4rem) * 1.1 / 2.1 + 2rem) minmax(0, 1fr);
}
.v2 .security-places--tabs [role="tablist"] { display: grid; align-content: start; border-right: 1px solid var(--security-rule); }
.v2 .security-places--tabs [role="tab"] {
  position: relative;
  width: 100%;
  padding: var(--tabs-pad) 2rem var(--tabs-pad) var(--tabs-inset);
  border: 0;
  border-bottom: 1px solid var(--security-rule);
  background: transparent;
  color: var(--on-dark-muted);
  font: inherit;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: background-color 200ms, color 200ms;
}
.v2 .security-places--tabs [role="tab"]:last-child { border-bottom: 0; }
.v2 .security-places--tabs [role="tab"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--mint);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 350ms var(--ease-out, ease-out);
}
.v2 .security-places--tabs [role="tab"]:hover,
.v2 .security-places--tabs [role="tab"][aria-selected="true"] { background: var(--surface-dark); color: var(--on-dark); }
.v2 .security-places--tabs [role="tab"][aria-selected="true"]::before { transform: scaleY(1); }
.v2 .security-places--tabs [role="tab"]:focus-visible { outline-offset: -2px; border-radius: 0; }
.v2 .security-places--tabs [role="tabpanel"] { grid-column: 2; grid-row: 1; padding: var(--tabs-pad) var(--tabs-inset) var(--tabs-pad) 2rem; }
.v2 .security-places--tabs [role="tabpanel"][hidden] { display: none; }
.v2 .security-places--tabs [role="tabpanel"] p {
  margin: 0;
  padding: 1.25rem 1.4rem;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
  animation: security-tab-in 350ms var(--ease-out, ease-out);
}
@keyframes security-tab-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .v2 .security-places--tabs [role="tab"], .v2 .security-places--tabs [role="tab"]::before { transition: none; }
  .v2 .security-places--tabs [role="tabpanel"] p { animation: none; }
}
@media (max-width: 860px) {
  .v2 .security-places--tabs { grid-template-columns: minmax(0, 1fr); }
  .v2 .security-places--tabs [role="tablist"] { border-right: 0; border-bottom: 1px solid var(--security-rule); }
  .v2 .security-places--tabs [role="tabpanel"] { grid-column: 1; grid-row: 2; padding-left: var(--tabs-inset); }
}
@media (max-width: 700px) { .v2 .security-places--tabs { --tabs-inset: calc(var(--gutter) - 8px); } }
@media (max-width: 600px) { .v2 .security-places--tabs { --tabs-inset: var(--gutter); } }

/* ---------- Page hero with roots: industry pages (industry-*.html) and service pages (centred) ----------
   The title block; on industry pages a stepper to the previous and next industry (with a dot for each) follows,
   in the same order as the menu. The ip- names come from the industry pages, where it started. */
.v2 #main > section.ip-head { padding-block: clamp(1.25rem, 2.5vw, 1.75rem) clamp(2rem, 4vw, 2.75rem); }
.ip-step { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.ip-step > a { display: inline-flex; align-items: center; gap: .75rem; color: var(--ink); text-decoration: none; font-weight: 500; }
.ip-step > a span { display: grid; }
.ip-step small { font-size: .75rem; font-weight: 400; color: var(--text-muted); }
.ip-step > a svg { flex: none; width: 2.25rem; height: 2.25rem; padding: .55rem; border: 1px solid var(--line); border-radius: 50%; background: var(--white); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transition: border-color .15s ease; }
.ip-step > a:hover svg { border-color: var(--forest); }
.ip-step-next { justify-self: end; text-align: right; }
.ip-dots { display: flex; gap: .4rem; }
.ip-dots a { width: 8px; height: 8px; border-radius: 50%; background: rgba(14, 37, 27, .18); transition: background-color .15s ease, width .2s ease; }
.ip-dots a:hover { background: var(--forest); }
.ip-dots a[aria-current="page"] { width: 22px; border-radius: 99px; background: var(--forest); }
/* the title block is the site's shared page hero (.p-hero in projects.css) */
.ip-head-copy { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.ip-head .p-hero-title { max-width: 16ch; }
/* The hero on Green Ink with Mint roots from the brand kit (Channels master 1, field level). The main root is
   not cut around the title: where it passes behind the type it is drawn quieter so the words stay in front. The
   stepper sits with the intro. Three crops: wide (1440, centred), mid (1200, anchored left) and, on phones, a band
   of roots across the top with the text below. The roots grow in row by row (industry-hero.js). */
.v2 #main > section.ip-rooted { position: relative; overflow: hidden; height: 560px; padding: 120px 0 0; background: var(--ink); }
.ip-rooted .wrap { position: relative; z-index: 1; }
.ip-rooted .ip-head-copy { margin-top: 0; max-width: 680px; }
.ip-rooted .ip-step { max-width: 660px; margin: 2rem 0 0; }
.ip-rooted-art { position: absolute; z-index: 0; top: 0; left: calc(50% - 720px); width: 1440px; height: 100%; pointer-events: none;
  background: url("../assets/graphics/industry-hero-roots.svg?v=main") top left / 1440px auto no-repeat; clip-path: inset(0 0 100% 0); }
.ip-rooted-art.is-grown { clip-path: inset(0 0 0 0); transition: clip-path 2600ms steps(110, end); }
@media (prefers-reduced-motion: reduce) { .ip-rooted-art { clip-path: none; } }
@media (max-width: 1439px) { .ip-rooted-art { left: 0; width: 1200px; background-image: url("../assets/graphics/industry-hero-roots-mid.svg?v=main"); background-size: 1200px auto; } }
@media (max-width: 999px) {
  .v2 #main > section.ip-rooted { height: auto; padding: 260px 0 2.5rem; }
  .ip-rooted-art { left: 50%; width: 600px; height: 240px; margin-left: -300px; background-image: url("../assets/graphics/industry-hero-roots-band.svg"); background-size: 600px 240px; }
}
/* type and stepper on the dark ground */
.ip-rooted .p-hero-title { color: var(--paper); }
.v2 .ip-rooted.p-hero .lede { color: rgba(247, 243, 234, .75); }
.ip-rooted .kicker { color: rgba(247, 243, 234, .75); }
.ip-rooted .kicker::before { color: var(--mint); }
.ip-rooted .ip-step > a { color: var(--paper); }
.ip-rooted .ip-step small { color: rgba(247, 243, 234, .6); }
.ip-rooted .ip-step > a svg { background: transparent; border-color: rgba(247, 243, 234, .25); }
.ip-rooted .ip-step > a:hover svg { border-color: var(--mint); }
.ip-rooted .ip-dots a { background: rgba(247, 243, 234, .25); }
.ip-rooted .ip-dots a:hover { background: var(--paper); }
.ip-rooted .ip-dots a[aria-current="page"] { background: var(--mint); }
@media (max-width: 900px) {
  .ip-step { grid-template-columns: auto 1fr auto; }
  .ip-step > a span { display: none; }
  .ip-dots { justify-content: center; }
}
/* Centred (service pages): the title block in the middle of a Fashion White band. The root art is off these heroes
   for now; the files stay in assets/graphics/service-roots/ and the rules below still place them when the markup returns. */
.v2 #main > section.ip-rooted--center { display: grid; align-content: center; height: auto; min-height: 0; padding: clamp(4.5rem, 8vw, 6.5rem) 0 clamp(3.5rem, 6vw, 5.5rem); background: var(--paper); }
.ip-rooted--center .ip-head-copy { max-width: 760px; margin: 0 auto; text-align: center; }
.ip-rooted--center .p-hero-title { max-width: 20ch; margin-inline: auto; color: var(--ink); }
.v2 .ip-rooted--center.p-hero .lede { margin-inline: auto; color: #3F4B44; }
.ip-rooted--center .kicker { color: var(--text-muted); }
.ip-rooted--center .kicker::before { color: var(--forest); }
.ip-rooted--center .actions { justify-content: center; }
.ip-rooted--center .ip-rooted-art { left: calc(50% - 1200px); width: 2400px; height: 560px; background: none; }
.ip-rooted--center .ip-rooted-art img { display: block; width: 100%; height: auto; }
/* The roots grow in as flashing pixels (industry-hero.js), drawn in a canvas over the art until they settle */
.ip-rooted--center .ip-rooted-art.is-grown { transition: none; }
.ip-rooted--center .ip-rooted-art.is-flashing img { visibility: hidden; }
.ip-rooted-flash { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 999px) {
  .v2 #main > section.ip-rooted--center { padding: clamp(3.25rem, 8vw, 4.5rem) 0 2.5rem; }
  .ip-rooted--center .ip-rooted-art { left: 50%; width: 600px; height: 240px; }
}

/* ---------- Homepage FAQ: heading on the left, one animated answer on the right ---------- */
.v2 #faq .faq-grid { grid-template-columns: 0.8fr 1.4fr; gap: 3rem 4rem; }
.v2 #faq .faq-copy h2 { max-width: 12ch; margin: 0; }
.v2 #faq .faq summary { font-size: 1.15rem; }
.v2 #faq .faq summary::after { transition: transform 300ms cubic-bezier(.32, .72, 0, 1); }
.v2 #faq .faq-panel { display: grid; grid-template-rows: 0fr; }
.v2 #faq details[open] .faq-panel { grid-template-rows: 1fr; }
.v2 #faq .faq-panel-inner { overflow: hidden; min-height: 0; visibility: hidden; }
.v2 #faq details[open] .faq-panel-inner { visibility: visible; }
.v2 #faq .faq-panel p {
  margin: 0;
  padding: 0 3rem 1.4rem 0;
  opacity: 0;
  transform: translateY(-6px);
}
.v2 #faq details[open] .faq-panel p { opacity: 1; transform: none; }
/* With JavaScript, .is-open drives the motion. The open attribute stays until the close finishes,
   because removing it cancels the height transition. */
.v2 #faq .faq-acc.is-ready .faq-panel { transition: grid-template-rows 340ms cubic-bezier(.32, .72, 0, 1); }
.v2 #faq .faq-acc.is-ready details[open]:not(.is-open) .faq-panel { grid-template-rows: 0fr; }
.v2 #faq .faq-acc.is-ready details.is-open .faq-panel { grid-template-rows: 1fr; }
.v2 #faq .faq-acc.is-ready .faq-panel-inner { visibility: hidden; transition: visibility 0s linear 340ms; }
.v2 #faq .faq-acc.is-ready details.is-open .faq-panel-inner { visibility: visible; transition: visibility 0s linear 0s; }
.v2 #faq .faq-acc.is-ready .faq-panel p { transition: opacity 150ms ease, transform 150ms ease; }
.v2 #faq .faq-acc.is-ready details[open]:not(.is-open) .faq-panel p { opacity: 0; transform: translateY(-6px); }
.v2 #faq .faq-acc.is-ready details.is-open .faq-panel p {
  opacity: 1;
  transform: none;
  transition: opacity 260ms ease 60ms, transform 340ms cubic-bezier(.32, .72, 0, 1) 40ms;
}
.v2 #faq .faq-acc.is-ready details[open]:not(.is-open) summary::after { transform: none; }
.v2 #faq .faq-acc.is-ready details.is-open summary::after { transform: rotate(45deg); }
.v2 #faq .faq a { color: var(--forest); font-weight: 500; }
@media (max-width: 860px) {
  .v2 #faq .faq-grid { grid-template-columns: 1fr; }
  .v2 #faq .faq-copy h2 { max-width: 12ch; }
}
@media (prefers-reduced-motion: reduce) {
  .v2 #faq .faq-panel,
  .v2 #faq .faq summary::after,
  .v2 #faq .faq-panel-inner,
  .v2 #faq .faq-panel p { transition: none; }
  .v2 #faq .faq-panel p { transform: none; }
}