/* One page per industry (industry-*.html): a centered title block, three featured use cases beside images,
   the rest in a short list, and a closing band. Light grounds, plain type, no animation. Grey boxes (.ip-img)
   mark where images will go. */

.v2 #main > section.ip-sec { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); }
.v2 #main > section.ip-hero { padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 3.5rem); }
.ip-hero .wrap { position: relative; z-index: 1; max-width: 46rem; text-align: center; }
/* Brand-kit roots framing the title: one crop made with the title kept clear, shown twice (the second mirrored),
   each copy clipped to its right half so the two never overlap */
.v2 #main > section.ip-hero { position: relative; overflow: hidden; }
.ip-roots { position: absolute; left: 50%; top: 0; width: 1440px; height: 400px; transform: translateX(-50%); clip-path: inset(0 0 0 50%); pointer-events: none; }
.ip-roots--mirror { transform: translateX(-50%) scaleX(-1); }
@media (max-width: 1000px) { .ip-roots { display: none; } }
.ip-hero h1 { margin: 0 auto; font-size: var(--title-size); font-weight: 500; letter-spacing: -0.04em; line-height: 1.02; max-width: 16ch; }
.ip-lead { max-width: 40rem; margin: 1.1rem auto 1.5rem; font-size: 1.12rem; line-height: 1.6; color: var(--text-muted); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--forest); }

/* The title block with the stepper (.ip-head, .ip-rooted, .ip-step) is shared with the service pages, in v2/v2.css. */
.ip-sec h2 { margin: 0 0 1.75rem; font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 500; letter-spacing: -0.03em; }
.v2 #main > section.ip-tint { background: var(--white); }
.ip-small { margin: 0 0 .6rem; font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--forest); }

/* Image placeholders: replace each with an <img> when the photography is ready */
.ip-img { display: grid; place-content: center; justify-items: center; gap: .5rem; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; border: 1px dashed rgba(14, 37, 27, .25); border-radius: 12px; background: repeating-linear-gradient(135deg, rgba(14, 37, 27, .035) 0 12px, transparent 12px 24px), #ECE8DE; color: rgba(14, 37, 27, .55); font-size: .85rem; text-align: center; }
.ip-img svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Featured use cases: image and text side by side, alternating */
.ip-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.ip-feature + .ip-feature { margin-top: clamp(2.5rem, 5vw, 4rem); }
.ip-feature.is-flip > :first-child { order: 2; }
.ip-feature h2 { margin-bottom: .9rem; }
.ip-feature p { margin: 0; line-height: 1.6; color: var(--text-muted); }
.ip-work { margin-top: .75rem !important; padding-left: .85rem; border-left: 2px solid var(--mint); font-size: .92rem; }
.ip-work b { color: var(--ink); font-weight: 500; }
.ip-work a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* The rest of the use cases, on Fashion White (industry-more.js): the same rail-to-rail grid as the service pages.
   Titles run down the left under the heading; the chosen one's white card sits on the right. On the card the use
   case's name is the kicker and its first sentence, the benefit, is the title. The rails sit 20px outside the
   text column, 8px from the edge below 700px, and are hidden below 600px. */
.v2 #main > section.ip-pick-sec { background: var(--paper); }
.ip-pick {
  --pick-inset: 20px;
  --pick-pad: clamp(1.15rem, 2vw, 1.55rem);
  display: grid;
  grid-template-columns: calc(20px + (100% - 40px - 4rem) * 1.1 / 2.1 + 2rem) minmax(0, 1fr);
  align-items: start;
  margin: 0 var(--rail-x);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ip-pick-list { list-style: none; margin: 0; padding: 0; border-right: 1px solid var(--line); }
.ip-pick-list button {
  position: relative; display: flex; align-items: baseline; gap: .9rem; width: 100%;
  padding: var(--pick-pad) 2rem var(--pick-pad) var(--pick-inset);
  border: 0; border-bottom: 1px solid var(--line); background: none;
  font: inherit; font-size: 1.05rem; font-weight: 500; text-align: left; color: var(--text-muted); cursor: pointer;
  transition: background-color 200ms, color 200ms;
}
.ip-pick-list button::before {
  content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px; background: var(--forest);
  transform: scaleY(0); transform-origin: top; transition: transform 350ms var(--ease-out, ease-out);
}
.ip-pick-list li:last-child button { border-bottom: 0; }
.ip-pick-list button:hover,
.ip-pick-list button[aria-pressed="true"] { background: var(--surface-dark); color: var(--ink); }
.ip-pick-list button[aria-pressed="true"]::before { transform: scaleY(1); }
.ip-pick-list button:focus-visible { outline-offset: -2px; border-radius: 0; }
.ip-pick-n { font-size: .78rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--forest); }
.ip-pick-detail { position: sticky; top: 6rem; padding: var(--pick-pad) var(--pick-inset) var(--pick-pad) 2rem; }
.ip-pick-card { display: grid; gap: 1rem; padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--line); border-radius: 18px; background: var(--white); animation: ip-detail .3s ease-out; }
.ip-pick-card[hidden] { display: none; }
.ip-pick-card h3 { margin: 0; font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.22; text-wrap: pretty; }
.ip-pick-card p { margin: 0; line-height: 1.6; color: var(--text-muted); }
.ip-pick-card .ip-pick-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .75rem; margin-bottom: -.35rem; font-size: .92rem; font-weight: 500; line-height: 1.4; }

/* An industry whose use cases aren't written up yet */
.ip-soon { display: grid; gap: .75rem; justify-items: center; max-width: 36rem; margin: 0 auto; padding: clamp(1.75rem, 3vw, 2.5rem); border: 1px dashed rgba(14, 37, 27, .25); border-radius: 12px; text-align: center; }
.ip-soon h2 { margin: 0; font-size: 1.4rem; }
.ip-soon p { margin: 0; line-height: 1.6; color: var(--text-muted); }
.ip-soon .btn { margin-top: .5rem; }

/* Closing band */
.v2 #main > section.ip-cta { padding-block: clamp(3rem, 6vw, 4.5rem); background: var(--ink); color: var(--paper); }
.ip-cta-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: end; }
.ip-cta h2 { margin: 0; font-size: var(--title-size); font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; max-width: 14ch; color: var(--paper); }
.ip-cta p { margin: 0 0 1.25rem; color: var(--on-dark-muted); line-height: 1.6; }

@media (max-width: 860px) {
  .ip-feature, .ip-cta-inner { grid-template-columns: minmax(0, 1fr); }
  .ip-feature.is-flip > :first-child { order: 0; }
  .ip-pick { grid-template-columns: minmax(0, 1fr); }
  .ip-pick-list { border-right: 0; border-bottom: 1px solid var(--line); }
  .ip-pick-detail { position: static; padding-left: var(--pick-inset); }
}
@media (max-width: 700px) { .ip-pick { --pick-inset: calc(var(--gutter) - 8px); } }
@media (max-width: 600px) { .ip-pick { --pick-inset: var(--gutter); margin-inline: 0; } }

/* An animated graphic in a featured slot (industry-graphics.js) */
.ip-graphic { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.ip-graphic canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 12px; }

/* Featured use cases as one switcher (industry-tabs.js): a card with the use cases listed on the left and the
   chosen one's graphic on the right. The ring beside the open item is the auto-advance timer. */
.ip-tabs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.ip-tabs-copy { display: flex; flex-direction: column; min-width: 0; }
.ip-tabs-head { display: flex; align-items: center; gap: .75rem; padding: .8rem clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--line); }
.ip-tabs-head p { margin: 0; font-weight: 500; }
.ip-tabs-icon { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(204, 246, 100, .45); color: var(--forest); }
.ip-tabs-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ip-tabs-body { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 34rem; }
.ip-tabs-body h2 { margin: 0; font-size: clamp(1.9rem, 3.6vw, 2.9rem); letter-spacing: -0.04em; line-height: 1.05; }
.ip-tabs-lead { margin: 1rem 0 0; line-height: 1.6; color: var(--text-muted); }
.ip-tabs-list { display: grid; gap: .35rem; margin-top: 2rem; }
.ip-tab-btn { display: flex; align-items: flex-start; gap: .85rem; width: 100%; padding: .45rem 0; border: 0; background: none; font: inherit; font-size: 1.08rem; font-weight: 500; text-align: left; color: var(--text-muted); cursor: pointer; transition: color var(--dur-fast, .15s) ease; }
.ip-tab-btn:hover, .ip-tab.is-active .ip-tab-btn { color: var(--ink); }
.ip-ring { flex: none; width: 20px; height: 20px; margin-top: .15em; transform: rotate(-90deg); fill: none; color: var(--forest); visibility: hidden; }
.ip-ring circle { stroke: currentColor; stroke-width: 1.3; opacity: .2; }
.ip-ring .ip-ring-run { stroke-width: 1.8; opacity: 1; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.ip-tab.is-active .ip-ring { visibility: visible; }
/* the timer, as on syncly.us: the ring fills over --ip-dur, then industry-tabs.js opens the next item. Choosing
   an item removes .is-auto for good, which stops the timer and leaves the ring full */
.ip-tabs.is-auto .ip-tab.is-active .ip-ring-run { animation: ip-ring var(--ip-dur, 4.5s) linear forwards; }
@keyframes ip-ring { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.ip-tab-detail { padding: .15rem 0 .9rem calc(20px + .85rem); }
.ip-tab-detail p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--text-muted); }
.ip-tab.is-active .ip-tab-detail { animation: ip-detail .35s var(--ease-out, ease-out); }
@keyframes ip-detail { from { opacity: 0; transform: translateY(-4px); } }

/* The visual: a deep green ground with a mint glow and grain, the graphic on top */
.ip-tabs-visual { position: relative; isolation: isolate; display: grid; align-items: center; min-height: 34rem; padding: clamp(1.5rem, 3.5vw, 3rem); overflow: hidden; border-radius: 12px;
  background: radial-gradient(120% 90% at 10% 100%, rgba(204, 246, 100, .28), transparent 55%), radial-gradient(80% 70% at 95% 5%, rgba(204, 246, 100, .12), transparent 60%), linear-gradient(140deg, #0E251B 0%, #12492E 55%, #0B1F16 100%); }
.ip-tabs-visual::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* the whole featured band is white, like the "More of what we do" band */
.v2 #main > section.ip-tabs-sec { background: var(--white); }
.ip-panel { grid-area: 1 / 1; opacity: 0; transform: translateY(10px) scale(.985); visibility: hidden; transition: opacity .45s ease, transform .55s var(--ease-out, cubic-bezier(.2, .8, .2, 1)), visibility 0s linear .45s; }
.ip-panel.is-active { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.ip-panel-card { overflow: hidden; border-radius: 16px; background: var(--white); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08); }
.ip-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); }
.ip-panel-head b { font-weight: 500; font-size: .95rem; }
.ip-panel-head span { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem; border-radius: 99px; background: rgba(204, 246, 100, .45); color: var(--forest); font-size: .72rem; font-weight: 500; }
.ip-panel-head span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--forest); }
.ip-panel-card .ip-graphic { border-radius: 0; box-shadow: none; }
.ip-panel-card .ip-graphic canvas { border-radius: 0; }
/* on the industry pages the graphic sits straight on the green, with no frame of its own */
.ip-tabs .ip-panel-card { border-radius: 8px; background: none; box-shadow: none; }

@media (max-width: 960px) {
  .ip-tabs { grid-template-columns: minmax(0, 1fr); }
  .ip-tabs-body { max-width: none; }
  .ip-tabs-visual { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ip-panel, .ip-tab.is-active .ip-tab-detail { transition: none; animation: none; transform: none; }
  .ip-pick-card, .ip-pick-list button, .ip-pick-list button::before { transition: none; }
  .ip-pick-card { animation: none; }
  .ip-tab.is-active .ip-ring-run { stroke-dashoffset: 0; }
}