/* Iteration 2 (after Vooma): black and white sections, turquoise-green accent, drawings carry the story.
   Small, quiet type (Hanken Grotesk), few words, generous space. */
html[data-it="2"] { --t: var(--i2a); --k: #050607; --w: #ffffff; --w2: #f3f4f3; }
html[data-it="2"] body { background: var(--k); }
.i2 { display: block; }
.i2-dark { background: var(--k); color: #fff; }
.i2-light { background: var(--w); color: var(--k); }
.i2-sec { padding: clamp(4.5rem, 9vw, 7rem) 0; }
.i2-h1 { max-width: 16ch; font: 500 clamp(2.3rem, 4.6vw, 3.9rem)/1.04 var(--f-h); letter-spacing: -.04em; text-wrap: balance; }
.i2-h1 span { color: var(--t); }
.i2-h2 { max-width: 22ch; font: 500 clamp(1.6rem, 2.7vw, 2.4rem)/1.12 var(--f-h); letter-spacing: -.03em; text-wrap: balance; }
.i2-mute { color: rgba(255,255,255,.42); } .i2-light .i2-mute { color: rgba(5,6,7,.38); }
.i2-sub { margin-top: 1rem; font-size: 16px; color: rgba(255,255,255,.62); } .i2-sub--d { color: rgba(5,6,7,.55); }
.i2-n { font-size: 11px; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.35); }
.i2-light .i2-n { color: rgba(5,6,7,.35); }

/* Header */
.hdr--i2 { background: rgba(5,6,7,.8); border-bottom-color: rgba(255,255,255,.07); }
.hdr--i2 .hdr__n { font-size: 14px; } .hdr--i2 .hdr__n a { color: rgba(255,255,255,.62); } .hdr--i2 .hdr__n a:hover { color: #fff; }
/* Buttons */
.i2-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.2rem; border-radius: 8px; font: 600 14px/1 var(--f-t); text-decoration: none; white-space: nowrap; transition: background-color .2s, box-shadow .2s; }
.i2-btn--t { background: var(--t); color: var(--k); } .i2-btn--t:hover { background: #63e4cb; }
.i2-btn--o { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.26); } .i2-btn--o:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.hdr--i2 .i2-btn { min-height: 38px; padding: 0 1rem; font-size: 13.5px; }
.i2-cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; }

/* Hero: words on top, the terminal panorama full width beneath */
.i2-hero { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2.5rem, 5vw, 3.5rem); overflow: hidden; }
.i2-hero__art { margin: clamp(2rem, 5vw, 3rem) auto 0; max-width: 112rem; padding-inline: clamp(0px, 2vw, 2rem); }
.i2-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: clamp(2rem, 5vw, 3rem); padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); }
.i2-figs b { display: block; font: 400 clamp(1.5rem, 3vw, 2.2rem)/1 var(--f-t); letter-spacing: -.03em; }
.i2-figs span { display: block; margin-top: .4rem; font-size: 13px; color: rgba(255,255,255,.5); }

/* Network */
.i2-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; }
.i2-seg { margin-top: 0; background: var(--w2); border-color: rgba(5,6,7,.07); }
.i2-seg .seg__ind { background: var(--k); }
.i2-seg button { min-height: 38px; font-size: 13.5px; }
#i2-net[data-state="with"] .seg__ind { transform: translateX(100%); }
#i2-net[data-state="with"] .seg button[data-netv="with"], #i2-net:not([data-state="with"]) .seg button[data-netv="today"] { color: #fff; }
.i2-net__art { margin: clamp(2rem, 5vw, 3rem) 0 0; }
.i2-cap { display: grid; margin-top: 1.25rem; font-size: 14.5px; color: rgba(5,6,7,.6); }
.i2-cap span { grid-area: 1 / 1; transition: opacity .4s; }
#i2-net:not([data-state="with"]) .i2-cap--with, #i2-net[data-state="with"] .i2-cap--today { opacity: 0; visibility: hidden; }

/* Product: tabs drive which scene shows */
.i2-prod { display: grid; gap: 2rem; margin-top: clamp(2rem, 5vw, 3rem); }
.i2-tabs { border-top: 1px solid rgba(255,255,255,.1); }
.i2-tabs li { border-bottom: 1px solid rgba(255,255,255,.1); }
.i2-tabs button { display: grid; grid-template-columns: 2rem 1fr; align-items: baseline; row-gap: .3rem; width: 100%; padding: .95rem .2rem; border: 0; background: none; color: rgba(255,255,255,.5); font: 500 15px var(--f-t); text-align: left; cursor: pointer; transition: color .25s; }
.i2-tabs .i2-td { grid-column: 2; font: 400 13.5px/1.45 var(--f-t); color: rgba(255,255,255,.5); }
.i2-tabs button[aria-pressed="false"] .i2-td { display: none; }
.i2-tabs button:hover, .i2-tabs button[aria-pressed="true"] { color: #fff; }
.i2-tabs button[aria-pressed="true"] .i2-n { color: var(--t); }
.i2-prod__art { display: grid; margin: 0; }
.i2-cap-art { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .45s; }
.i2-prod[data-on="est"] [data-k="est"], .i2-prod[data-on="bunk"] [data-k="bunk"], .i2-prod[data-on="port"] [data-k="port"], .i2-prod[data-on="frt"] [data-k="frt"], .i2-prod[data-on="berth"] [data-k="berth"], .i2-prod[data-on="clm"] [data-k="clm"] { visibility: visible; opacity: 1; }

/* Does / never */
.i2-does { display: grid; gap: 1.5rem 3rem; margin-top: clamp(2rem, 5vw, 3rem); }
.i2-does ul { border-top: 1px solid rgba(5,6,7,.1); }
.i2-does li { display: flex; align-items: center; gap: .8rem; padding: .85rem 0; border-bottom: 1px solid rgba(5,6,7,.1); font-size: 15px; }
.i2-does i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.i2-does svg { width: 14px; height: 14px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.i2-yes i { background: var(--t); } .i2-yes svg { stroke: var(--k); }
.i2-no i { box-shadow: inset 0 0 0 1.3px rgba(5,6,7,.45); } .i2-no svg { stroke: rgba(5,6,7,.6); } .i2-no li { color: rgba(5,6,7,.62); }

/* Privacy */
.i2-split { display: grid; gap: 2.5rem; align-items: center; }
.i2-pts { margin-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.1); }
.i2-pts li { display: flex; align-items: center; gap: .75rem; padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 15px; color: rgba(255,255,255,.8); }
.i2-pts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--t); }
.i2-vault { margin: 0; }

/* Mission, vision, values */
.i2-vals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid rgba(5,6,7,.1); }
.i2-vals li { display: grid; align-content: start; gap: .3rem; padding: 1.2rem 1rem 1.2rem 0; border-bottom: 1px solid rgba(5,6,7,.1); }
.i2-vals b { margin-top: .5rem; font-weight: 500; font-size: 15px; } .i2-vals p { font-size: 13.5px; color: rgba(5,6,7,.55); }

/* People */
.i2-roles { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 2rem; }
.i2-roles li { padding: .5rem .9rem; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); font-size: 13.5px; color: rgba(255,255,255,.78); }
.i2-z42 { display: flex; align-items: center; gap: .5rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); font-size: 13.5px; color: rgba(255,255,255,.5); }
.i2-z42 img { height: 16px; width: auto; }

/* Footer in iteration 2 */
html[data-it="2"] .cf { background: var(--k); }
html[data-it="2"] .cf::before { background: radial-gradient(60% 50% at 85% 0%, rgba(var(--i2a-rgb), .1), transparent 70%); }
html[data-it="2"] .cf a.pill--light { background: var(--t); color: var(--k); }
html[data-it="2"] .opt__r--1 { display: none; }

@media (min-width: 48rem) {
  .i2-does { grid-template-columns: 1fr 1fr; }
  .i2-vals { grid-template-columns: repeat(5, 1fr); }
  .i2-vals li { padding-right: 1.25rem; }
}
@media (min-width: 64rem) {
  .i2-prod { grid-template-columns: minmax(0, 3.4fr) minmax(0, 8.6fr); gap: 3.5rem; align-items: center; }
  .i2-split { grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); gap: 4rem; }
}
/* One description slot under the tabs: every description shares it, so heights never change */
.i2-tdesc { display: grid; margin-top: 1rem; }
.i2-tdesc p { grid-area: 1 / 1; visibility: hidden; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.55); }
.i2-prod[data-on="est"] .i2-tdesc [data-k="est"], .i2-prod[data-on="bunk"] .i2-tdesc [data-k="bunk"], .i2-prod[data-on="port"] .i2-tdesc [data-k="port"], .i2-prod[data-on="frt"] .i2-tdesc [data-k="frt"], .i2-prod[data-on="berth"] .i2-tdesc [data-k="berth"], .i2-prod[data-on="clm"] .i2-tdesc [data-k="clm"] { visibility: visible; }
.i2-tabs button { grid-template-columns: 2rem 1fr; }

/* Iteration 2b feedback: hero centred, headline and labels white, every primary button white */
.i2-hero__t { text-align: center; }
.i2-hero__t .i2-h1 { margin-inline: auto; }
.i2-hero__t .i2-cta { justify-content: center; }
.i2-h1 span { color: #fff; }
.i2-btn--t, html[data-it="2"] .cf a.pill--light { background: #fff; color: var(--k); }
.i2-btn--t:hover, html[data-it="2"] .cf a.pill--light:hover { background: #e6e8e7; }
.i2-dark .ia-tag, .i2-dark .ia-tag--i2a { color: #fff; background: rgba(255,255,255,.1); }

/* Iteration 2c: every section heading centred */
.i2-sec .i2-h2, .i2-sub { margin-inline: auto; text-align: center; }
.i2-sub { max-width: 40rem; }
.i2-head { flex-direction: column; align-items: center; text-align: center; }
.i2-cap { justify-items: center; text-align: center; }
.i2-figs li { text-align: center; }
#i2-privacy .i2-split { margin-top: clamp(2rem, 5vw, 3rem); }
.i2-pts { margin-top: 0; }
.i2-vals li { justify-items: center; text-align: center; padding-inline: .75rem; }
.i2-roles, .i2-z42 { justify-content: center; }
/* Leftover turquoise text goes white */
.i2-tabs button[aria-pressed="true"] .i2-n { color: #fff; }

/* Labels on drawings: solid backing so lines never run through the words */
.i2-sec .ia-tag, .i2-hero .ia-tag { padding: .32rem .6rem; border-radius: 5px; font-size: 11px; font-weight: 600; letter-spacing: .05em; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.i2-dark .ia-tag, .i2-dark .ia-tag--i2a { color: #fff; background: rgba(5,6,7,.88); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.i2-light .ia-tag, .i2-light .ia-tag--i2a, .ia--network[data-state="with"] .nw-tag:not(.nw-tag--core) { color: #050607; background: rgba(255,255,255,.94); box-shadow: inset 0 0 0 1px rgba(5,6,7,.16), 0 1px 2px rgba(5,6,7,.06); }
.i2-sec .ia-tag--i2a, .ia--network[data-state="with"] .nw-tag { box-shadow: inset 0 0 0 1px rgba(var(--i2a-rgb), .75); }
@container (max-width: 640px) { .ia--network .nw-tag { font-size: 9px; padding: .18rem .38rem; letter-spacing: .03em; } }
@media (max-width: 47.99rem) { .i2-sec .ia-tag { font-size: 10px; padding: .26rem .5rem; } }
@container (max-width: 900px) { .ia--network .nw-tag:first-of-type { transform: translate(-50%, 30%); } }
html[data-it="2"] .cf__cta { grid-template-columns: 1fr !important; justify-items: center; text-align: center; } html[data-it="2"] .cf__cta .pill { justify-self: center; }

/* Accent colour (Options, Iteration 2). Line art is white; only highlights take the accent. */
:root { --i2a: #2fd4b4; --i2a-rgb: 47, 212, 180; --i2a-h: 168; }
html[data-acc="blue"] { --i2a: #4d8dff; --i2a-rgb: 77, 141, 255; --i2a-h: 218; }
html[data-acc="amber"] { --i2a: #f5b03c; --i2a-rgb: 245, 176, 60; --i2a-h: 38; }
html[data-acc="coral"] { --i2a: #ff6a55; --i2a-rgb: 255, 106, 85; --i2a-h: 7; }
html[data-acc="violet"] { --i2a: #9d7dff; --i2a-rgb: 157, 125, 255; --i2a-h: 255; }
html[data-acc="lime"] { --i2a: #b4e83a; --i2a-rgb: 180, 232, 58; --i2a-h: 78; }
.opt__r--2 { display: none; } html[data-it="2"] .opt__r--2 { display: flex; }
.i2-seg button { color: rgba(5,6,7,.55); }
.ia-wrap.ia--network[data-state="with"] .nw-tag:not(.nw-tag--core) { background: rgba(255,255,255,.94); }

/* Iteration 2f: subtext under every heading, aligned lists, More or Less text */
.i2-sec .i2-sub { margin-top: .9rem; max-width: 36rem; font-size: 15.5px; line-height: 1.5; }
.i2-light .i2-sub { color: rgba(5,6,7,.55); }
.i2-does { max-width: 54rem; margin-inline: auto; column-gap: 2.5rem; }
.i2-does ul + ul { margin-top: 0; }
@media (max-width: 47.99rem) { .i2-does { row-gap: 2rem; } }
html[data-it="2"][data-copy="less"] .i2-more { display: none !important; }
html[data-it="2"][data-copy="less"] .i2-vals li { padding-block: 1rem; }
.i2-sub, .i2-cap span, .i2-tdesc p { text-wrap: balance; }
html[data-it="2"] .cf::before { display: none; }

/* Iteration 2g: keyboard focus in the accent, rounded; toggle stays clean on click */
html[data-it="2"] :focus-visible { outline: 2px solid var(--t); outline-offset: 3px; border-radius: 8px; }
html[data-it="2"] .seg button:focus { outline: none; }
html[data-it="2"] .seg:has(button:focus-visible) { box-shadow: 0 0 0 2px var(--w), 0 0 0 4px var(--t); }
/* Footer: a faint line drawing of the terminal instead of a glow */
html[data-it="2"] .cf__art { position: absolute; z-index: -1; top: 0; left: 50%; width: max(1100px, 110%); transform: translateX(-50%); opacity: .3; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 55%, transparent 85%); mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 55%, transparent 85%); }
html[data-it="2"] .cf__art .ia-tag { display: none; }
.cf__art { display: none; } html[data-it="2"] .cf__art { display: block; }
@media (max-width: 47.99rem) { html[data-it="2"] .cf__art { width: 220%; opacity: .25; } }
html[data-it="2"] .cf__art { left: 0; width: 100%; transform: none; }
@media (max-width: 47.99rem) { html[data-it="2"] .cf__art { width: 100%; top: 1.5rem; } }
@container (max-width: 340px) { .ia--network .nw-tag--core { transform: translate(-50%, -40%); } }
html[data-it="2"] .cf__art { opacity: .18; } @media (max-width: 47.99rem) { html[data-it="2"] .cf__art { opacity: .2; } }

/* Iteration 2h: "does / never" rows centred; ticks pass contrast on white (OpenDesigner check, WCAG 1.4.11):
   on light sections the circle uses a deeper shade of the accent, >= 4.5:1 against white, with a white tick */
:root { --i2a-ink: #1d8370; }
html[data-acc="blue"] { --i2a-ink: #3f74d1; }
html[data-acc="amber"] { --i2a-ink: #986d25; }
html[data-acc="coral"] { --i2a-ink: #c45241; }
html[data-acc="violet"] { --i2a-ink: #7f65cf; }
html[data-acc="lime"] { --i2a-ink: #638020; }
.i2-light .i2-yes i { background: var(--i2a-ink); }
.i2-light .i2-yes svg { stroke: #fff; }
.i2-does li { justify-content: center; text-align: center; }
/* Centre the block, keep icons in one column: every row shares the same centred track */
.i2-does ul { display: grid; grid-template-columns: 1fr auto max-content 1fr; }
.i2-does li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; justify-content: initial; text-align: left; column-gap: 0; }
.i2-does li > i { grid-column: 2; margin-right: .8rem; }

/* Iteration 2i: photos in black and white, colour on hover (Emil Kowalski motion rules):
   the black-and-white copy never animates; only the colour copy's opacity changes (GPU-friendly, interruptible).
   Hover is a colour change, so plain ease; frequent, so kept short. Hover only on real pointers; touch gets colour mid-screen. */
.i2-ph { position: relative; display: block; margin: 0; overflow: hidden; border-radius: 10px; background: #111; aspect-ratio: 4 / 3; }
.i2-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.i2-ph__bw { filter: grayscale(1) contrast(1.08) brightness(.92); }
.i2-ph__c { opacity: 0; transition: opacity 260ms ease; }
.i2-ph.is-c .i2-ph__c { opacity: 1; transition-duration: 600ms; }
@media (hover: hover) and (pointer: fine) {
  .i2-ph:hover .i2-ph__c, .i2-story li:hover .i2-ph__c { opacity: 1; }
}
.i2-ph:focus-within .i2-ph__c { opacity: 1; }

/* Story band under the hero: sea, hold, terminal, desk */
.i2-story { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-top: clamp(2rem, 5vw, 3rem); }
.i2-story li { display: grid; gap: .6rem; }
.i2-story .i2-ph { aspect-ratio: 4 / 5; }
.i2-story span { font-size: 13px; letter-spacing: .02em; color: rgba(255,255,255,.55); text-align: center; transition: color 260ms ease; }
@media (hover: hover) and (pointer: fine) { .i2-story li:hover span { color: #fff; } }
@media (max-width: 47.99rem) { .i2-story { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Values: one wide bridge view above the five values */
.i2-wide { margin-top: clamp(2rem, 5vw, 3rem); }
.i2-wide .i2-ph { aspect-ratio: 21 / 8; }
@media (max-width: 47.99rem) { .i2-wide .i2-ph { aspect-ratio: 16 / 9; } }

/* People: two desk scenes */
.i2-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; max-width: 56rem; margin: 2rem auto 0; }
.i2-pair .i2-ph { aspect-ratio: 4 / 3; }

/* Imagery off: every photo block goes, the line art stays */
html[data-img="off"] .i2-img { display: none; }
/* Privacy: one photo of the servers under the three points */
.i2-side { margin-top: 1.5rem; }
.i2-side .i2-ph { aspect-ratio: 16 / 10; }
.i2-wide .i2-ph img { object-position: 50% 60%; }

/* Iteration 2k: photos only where they explain something; Mixed version adds photo details beside the line art */
.i2-mix { display: none !important; }
html[data-v2="mix"] .i2-mix { display: revert !important; }
html[data-v2="mix"] .i2-roleph, html[data-v2="mix"] .i2-tph { display: grid !important; }
html[data-v2="mix"] .i2-ptph { display: block !important; }
html[data-img="off"] .i2-img { display: none !important; }

/* Figures, now in the problem section with what each one measures */
.i2-light .i2-figs { border-top-color: rgba(5,6,7,.1); }
.i2-light .i2-figs span { color: rgba(5,6,7,.5); }
.i2-figs p { max-width: 22ch; margin: .5rem auto 0; font-size: 13.5px; line-height: 1.45; color: rgba(5,6,7,.55); text-wrap: balance; }

/* Mixed: the six places as photos under the network */
.i2-roleph { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; margin-top: 1.5rem; }
.i2-roleph li { display: grid; gap: .45rem; text-align: center; font-size: 12.5px; color: rgba(5,6,7,.6); }
.i2-roleph .i2-ph { aspect-ratio: 1; border-radius: 8px; }
@media (max-width: 63.99rem) { .i2-roleph { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Mixed: a photo above the selected tab's description (stacked, so height never changes) */
.i2-tph { margin-top: 1.25rem; }
.i2-tph > div { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity 250ms ease; }
.i2-tph .i2-ph { aspect-ratio: 16 / 10; border-radius: 8px; }
.i2-prod[data-on="est"] .i2-tph [data-k="est"], .i2-prod[data-on="bunk"] .i2-tph [data-k="bunk"], .i2-prod[data-on="port"] .i2-tph [data-k="port"], .i2-prod[data-on="frt"] .i2-tph [data-k="frt"], .i2-prod[data-on="berth"] .i2-tph [data-k="berth"], .i2-prod[data-on="clm"] .i2-tph [data-k="clm"] { visibility: visible; opacity: 1; }

/* Mixed: a small photo beside each privacy point */
.i2-pts li { gap: .9rem; }
html[data-v2="mix"] .i2-pts li::before { display: none; }
.i2-ptph { flex: none; width: 52px; }
.i2-ptph .i2-ph { aspect-ratio: 1; border-radius: 8px; }

/* Values: a photo for each value */
.i2-valph { display: block; width: 100%; margin-bottom: .75rem; }
.i2-valph .i2-ph { aspect-ratio: 4 / 3; border-radius: 8px; }
.i2-vals li { padding-top: 1.25rem; }

/* Carousel: one voyage, sea to silo. Transform-only movement on an iOS-style curve; no transition while dragging */
.i2-car { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.i2-car__view { overflow: hidden; border-radius: 10px; }
.i2-car__track { display: flex; gap: .75rem; touch-action: pan-y; user-select: none; cursor: grab; will-change: transform; }
.i2-car__track.is-drag { cursor: grabbing; }
.i2-car__track li { flex: 0 0 calc((100% - 1.5rem) / 2.6); display: grid; gap: .6rem; }
.i2-car__track img { pointer-events: none; -webkit-user-drag: none; }
.i2-car__track .i2-ph { aspect-ratio: 4 / 3; }
.i2-car__track span { font-size: 13px; color: rgba(255,255,255,.55); }
@media (max-width: 47.99rem) { .i2-car__track li { flex-basis: 82%; } }
.i2-car__nav { display: flex; justify-content: center; gap: .5rem; margin-top: 1.25rem; }
.i2-car__nav button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); color: #fff; cursor: pointer; transition: transform 160ms ease-out, opacity 200ms ease, box-shadow 200ms ease; }
.i2-car__nav button:active { transform: scale(.97); }
.i2-car__nav button:disabled { opacity: .3; cursor: default; }
@media (hover: hover) and (pointer: fine) { .i2-car__nav button:not(:disabled):hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); } }
.i2-car__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Iteration 2l: does / never as two rows of four; icon above text, everything centred; one even divider grid */
.i2-does { display: grid; grid-template-columns: 1fr !important; gap: 0 !important; max-width: 64rem; }
.i2-does ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(5,6,7,.1); }
.i2-does ul + ul { border-bottom: 1px solid rgba(5,6,7,.1); }
.i2-does li { grid-column: auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .75rem; padding: 1.5rem 1rem; border-bottom: 0; text-align: center; text-wrap: balance; }
.i2-does li + li { border-left: 1px solid rgba(5,6,7,.1); }
.i2-does li > i { grid-column: auto; margin: 0; width: 28px; height: 28px; }
.i2-does svg { width: 16px; height: 16px; }
@media (max-width: 47.99rem) {
  .i2-does ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .i2-does li + li { border-left: 0; }
  .i2-does li:nth-child(2n) { border-left: 1px solid rgba(5,6,7,.1); }
  .i2-does li:nth-child(n + 3) { border-top: 1px solid rgba(5,6,7,.1); }
}

/* Iteration 2m: CTAs with rounded edges, not full pills (owner frame: radius about 15% of height) */
.i2-btn, html[data-it="2"] .cf a.pill { border-radius: 8px; }
.hdr--i2 .i2-btn { border-radius: 7px; }
.i2-car__nav button { border-radius: 8px; }
.i2-roles li { border-radius: 8px; }

/* Square crops keep the person in frame */
.i2-ph img[src$="operator-desk.jpg"] { object-position: 78% 50%; }

/* Privacy points: Z42-style icon badges (line glyph in two concentric circles), in the accent */
.i2-pts li::before, html[data-v2="mix"] .i2-pts li::before { display: none; }
.i2-ico { flex: none; width: 44px; height: 44px; }
.i2-ico__o { fill: rgba(var(--i2a-rgb), .08); }
.i2-ico__i { fill: rgba(var(--i2a-rgb), .18); }
.i2-ico g { fill: none; stroke: var(--i2a); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Voyage carousel runs edge to edge; the first slide lines up with the text column */
.i2-car { --edge: max(var(--g), calc((100% - var(--wmax)) / 2 + var(--g))); }
.i2-car__view { border-radius: 0; padding-inline: var(--edge); }

/* Iteration 2n — "After" layout (Options → Layout), after tryprofound.com.
   Dashed rails run down the page at the content edges, hairlines run full width between sections,
   content sits in ruled cells, and photos of people show in full colour. "Before" is untouched. */
.i2-g { display: none !important; }
html[data-grid="after"] .i2-g { display: block !important; }
html[data-grid="after"] .i2-car.i2-g { display: flex !important; }
html[data-img="off"] .i2-g.i2-img { display: none !important; }
html[data-grid="after"] .i2 { --ln: rgba(255,255,255,.11); --in: clamp(1rem, 2.4vw, 1.75rem); --rail: calc(min(100%, var(--wmax)) - 2 * var(--g)); }
html[data-grid="after"] .i2 .i2-light { --ln: rgba(5,6,7,.11); }
html[data-grid="after"] .i2 > section { position: relative; isolation: isolate; }
html[data-grid="after"] .i2 > section + section { border-top: 1px solid var(--ln); }
html[data-grid="after"] .i2 > section::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: var(--rail); transform: translateX(-50%); border-inline: 1px dashed var(--ln); pointer-events: none; z-index: -1; }
html[data-grid="after"][data-it="2"] .cf { border-top: 1px solid rgba(255,255,255,.11); }
/* Text sits a step inside the rails; ruled blocks reach out to them */
html[data-grid="after"] .i2 .wrap { padding-inline: calc(var(--g) + var(--in)); }
html[data-grid="after"] :is(.i2-roles, .i2-prod, .i2-does, .i2-split, .i2-vals, .i2-figs) { margin-inline: calc(-1 * var(--in)); max-width: none; }

/* Ruled cells: a 1px gap over a line-coloured ground draws every divider evenly, at any column count */
html[data-grid="after"] :is(.i2-roles, .i2-vals, .i2-figs) { display: grid; gap: 1px; padding: 0; background: var(--ln); border-block: 1px solid var(--ln); }
html[data-grid="after"] .i2-dark :is(.i2-roles, .i2-vals, .i2-figs) > li { background: var(--k); }
html[data-grid="after"] .i2-light :is(.i2-roles, .i2-vals, .i2-figs) > li { background: var(--w); }
html[data-grid="after"] .i2-roles { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; }
html[data-grid="after"] .i2-roles li { display: grid; place-items: center; min-height: 5.5rem; padding: 1rem; border-radius: 0; box-shadow: none; text-align: center; font-size: 14.5px; }
html[data-grid="after"] .i2-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-grid="after"] .i2-figs li { padding: 1.5rem var(--in); }
html[data-grid="after"]:not([data-img="off"]) .i2-figs { display: none; }
html[data-grid="after"] .i2-vals li { padding: 1.5rem var(--in); border: 0; }
@media (max-width: 47.99rem) {
  html[data-grid="after"] .i2-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-grid="after"] .i2-roles li { min-height: 4.5rem; font-size: 13.5px; }
  html[data-grid="after"] .i2-figs { grid-template-columns: 1fr; }
  html[data-grid="after"] .i2-vals li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  html[data-grid="after"] .i2-vals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-grid="after"] .i2-vals li:nth-child(4) { grid-column: span 1; }
  html[data-grid="after"] .i2-vals li:last-child { grid-column: span 2; }
}

/* Two-cell panels: product (tabs | scene) and privacy (points | vault) */
html[data-grid="after"] :is(.i2-prod, .i2-split) { gap: 0; align-items: stretch; border-block: 1px solid var(--ln); }
html[data-grid="after"] :is(.i2-prod, .i2-split) > * { padding: var(--in); }
html[data-grid="after"] :is(.i2-prod, .i2-split) > * + * { border-top: 1px solid var(--ln); }
html[data-grid="after"] .i2-prod > * { display: grid; align-content: center; }
html[data-grid="after"] .i2-split > * { display: grid; align-content: center; margin: 0; }
@media (min-width: 64rem) {
  html[data-grid="after"] :is(.i2-prod, .i2-split) > * + * { border-top: 0; border-left: 1px solid var(--ln); }
}
html[data-grid="after"] .i2-does ul { border-color: var(--ln); }
html[data-grid="after"] .i2-does li { border-color: var(--ln) !important; }

/* Photos in full colour: people first, not greyscale */
html[data-grid="after"] .i2-ph__c { opacity: 1; }

/* Carousels: arrows sit above, at the right rail; slides are square-cornered panels with the caption on the photo */
html[data-grid="after"] .i2-car { display: flex; flex-direction: column; }
html[data-grid="after"] .i2-car__nav { order: -1; justify-content: flex-end; margin: 0 0 1rem; padding-inline: var(--edge); }
html[data-grid="after"] .i2-car__nav button { width: 36px; height: 36px; border-radius: 6px; }
html[data-grid="after"] .i2-car .i2-ph { border-radius: 0; }
html[data-grid="after"] .i2-car .i2-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 55%); pointer-events: none; }
html[data-grid="after"] .i2-car__track li { position: relative; }
html[data-grid="after"] .i2-car:not(.i2-car--st) .i2-car__track li { flex-basis: calc((100% - .75rem) / 2); }
html[data-grid="after"] .i2-car:not(.i2-car--st) .i2-car__track li > span { position: absolute; left: var(--in); bottom: var(--in); z-index: 1; font-size: 15px; font-weight: 500; color: #fff; }
@media (max-width: 47.99rem) { html[data-grid="after"] .i2-car:not(.i2-car--st) .i2-car__track li { flex-basis: 86%; } }

/* The figures carousel: one wide photo per slide, the figure set large on it (Profound's customer-story pattern) */
.i2-car--st { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.i2-car--st .i2-car__track li { flex: 0 0 100%; }
.i2-st { position: relative; margin: 0; }
.i2-st .i2-ph { aspect-ratio: 2 / 1; }
.i2-st figcaption { position: absolute; left: clamp(1.25rem, 3vw, 2.25rem); right: clamp(1.25rem, 3vw, 2.25rem); bottom: clamp(1.25rem, 3vw, 2.25rem); z-index: 1; display: grid; justify-items: start; color: #fff; text-align: left; }
.i2-st b { font: 400 clamp(3rem, 7.5vw, 5.5rem)/.95 var(--f-t); letter-spacing: -.045em; }
.i2-st span { margin-top: .5rem; font-size: 16px; font-weight: 500; }
.i2-st p { margin-top: .35rem; max-width: 30rem; font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,.78); text-wrap: balance; }
.i2-st .i2-ph img[src$="operator-desk.jpg"] { object-position: 70% 40%; }
.i2-st .i2-ph img[src$="broker-phone.jpg"] { object-position: 50% 30%; }
.i2-st .i2-ph img[src$="port-crew.jpg"] { object-position: 50% 35%; }
.i2-light .i2-car--st .i2-car__nav button { color: var(--k); box-shadow: inset 0 0 0 1px rgba(5,6,7,.2); }
@media (hover: hover) and (pointer: fine) { .i2-light .i2-car--st .i2-car__nav button:not(:disabled):hover { box-shadow: inset 0 0 0 1px rgba(5,6,7,.5); } }
@media (max-width: 47.99rem) {
  .i2-car--st .i2-car__track li { flex-basis: 88%; }
  .i2-st .i2-ph { aspect-ratio: 4 / 5; }
}
html[data-grid="after"] .i2-net__art { margin-inline: calc(-1 * var(--in)); }
html[data-grid="after"] .i2-split .i2-pts { margin-top: 0; border-top: 0; }
html[data-grid="after"] .i2-split .i2-pts li:last-child { border-bottom: 0; }

/* Figures carousel caption: one colour, two sizes only (the figure, then one plain line), on a deeper shade so it reads */
.i2-figsec .i2-car--st { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
html[data-grid="after"] .i2-car--st .i2-ph::after { background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 70%); }
.i2-st figcaption { gap: .6rem; }
.i2-st b { font: 500 clamp(3.25rem, 7.5vw, 5.75rem)/.95 var(--f-t); letter-spacing: -.045em; color: #fff; }
.i2-st p { margin: 0; max-width: 34rem; font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 400; line-height: 1.4; color: #fff; text-wrap: balance; }

/* Iteration 2 text colours: two levels per background, nothing in between.
   Dark: white, and one grey (64% white, about 8:1). Light: near-black, and one grey (62% black, about 6:1). */
html[data-it="2"] { --tx2-d: rgba(255,255,255,.64); --tx2-l: rgba(5,6,7,.62); }
html[data-it="2"] :is(.i2-mute, .i2-n, .i2-sub, .i2-figs span, .i2-tabs button, .i2-tabs .i2-td, .i2-tdesc p, .i2-z42, .i2-story span, .i2-car__track span),
html[data-it="2"] .hdr--i2 .hdr__n a,
html[data-it="2"] .cf :is(p, span, a, .cf__k, .cf__b, .cf__z span, .cf__l a) { color: var(--tx2-d); }
html[data-it="2"] :is(.i2-tabs button:hover, .i2-tabs button[aria-pressed="true"], .hdr--i2 .hdr__n a:hover, .cf a:hover) { color: #fff; }
html[data-it="2"] .i2-tabs button[aria-pressed="true"] .i2-n { color: #fff; }
html[data-it="2"] :is(.i2-roles li, .i2-pts li, .i2-pts li span) { color: #fff; }
html[data-it="2"] .cf .cf__cta :is(a.pill, a.i2-btn) { color: var(--k); }
html[data-it="2"] .i2-light :is(.i2-mute, .i2-n, .i2-sub, .i2-cap, .i2-cap span, .i2-figs span, .i2-figs p, .i2-vals p, .i2-roleph li, .i2-no li, .seg button[aria-selected="false"]) { color: var(--tx2-l); }
html[data-it="2"] .i2-light :is(.i2-vals b, .i2-yes li, .i2-figs b) { color: var(--k); }
html[data-grid="after"] .i2-car:not(.i2-car--st) .i2-car__track li > span { color: #fff; }

/* Ticks: one fixed green for every accent, so "does" reads at a glance.
   #16a34a with a white tick: 3.3:1 against white and against the tick, above the 3:1 floor for icons. */
html[data-it="2"] .i2-yes i { background: #16a34a; }
html[data-it="2"] .i2-yes svg { stroke: #fff; }

/* Iteration 2p — After layout, cleaned up (owner: closed grids, square photos, generous space, distinct sections) */
/* Every ruled block is a closed box: lines on all four sides, sitting on the rails */
html[data-grid="after"] :is(.i2-roles, .i2-vals, .i2-figs, .i2-prod, .i2-split) { border: 1px solid var(--ln); }
html[data-grid="after"] .i2-does ul { border-inline: 1px solid var(--ln); }
/* Square corners on every photo, like the carousels */
html[data-grid="after"] .i2-ph { border-radius: 0 !important; }
/* Breathing room: more space around sections and between a heading and its block */
html[data-grid="after"] .i2-sec { padding-block: clamp(5.5rem, 11vw, 9rem); }
html[data-grid="after"] :is(.i2-roles, .i2-prod, .i2-does, .i2-split, .i2-vals, .i2-figs, .i2-net__art) { margin-top: clamp(3rem, 6vw, 4.5rem); }
html[data-grid="after"] .i2-figsec .i2-car--st, html[data-grid="after"] .i2-people .i2-car { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
html[data-grid="after"] .i2-z42 { margin-top: clamp(3.5rem, 7vw, 5rem); }
/* The figures section gets a soft grey ground, so it reads as its own section after the white network one */
html[data-grid="after"] .i2-figsec { background: var(--w2); }

/* Values as a bento: two wide cells, then three; each photo runs edge to edge at the top of its cell */
html[data-grid="after"] .i2-vals { grid-template-columns: repeat(6, minmax(0, 1fr)); }
html[data-grid="after"] .i2-vals li { grid-column: span 2; display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: 0 var(--in) clamp(1.75rem, 3vw, 2.25rem); text-align: center; }
html[data-grid="after"] .i2-vals li:nth-child(-n + 2) { grid-column: span 3; }
html[data-grid="after"] .i2-valph { width: calc(100% + 2 * var(--in)); margin: 0 calc(-1 * var(--in)) clamp(1.25rem, 2.5vw, 1.75rem); }
html[data-grid="after"] .i2-valph .i2-ph { aspect-ratio: 16 / 10; }
html[data-grid="after"] .i2-vals li:nth-child(-n + 2) .i2-valph .i2-ph { aspect-ratio: 16 / 9; }
html[data-grid="after"] .i2-vals b { margin-top: .15rem; font-size: 17px; }
html[data-grid="after"] .i2-vals p { font-size: 15px; line-height: 1.5; max-width: 22rem; }
html[data-grid="after"][data-img="off"] .i2-vals li { padding-top: clamp(1.75rem, 3vw, 2.25rem); }
@media (min-width: 48rem) and (max-width: 63.99rem) {
  html[data-grid="after"] .i2-vals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-grid="after"] .i2-vals li, html[data-grid="after"] .i2-vals li:nth-child(-n + 2) { grid-column: span 1; }
  html[data-grid="after"] .i2-vals li:last-child { grid-column: 1 / -1; }
  html[data-grid="after"] .i2-vals li:last-child .i2-valph .i2-ph { aspect-ratio: 21 / 9; }
}
@media (max-width: 47.99rem) {
  html[data-grid="after"] .i2-vals { grid-template-columns: 1fr; }
  html[data-grid="after"] .i2-vals li, html[data-grid="after"] .i2-vals li:nth-child(-n + 2), html[data-grid="after"] .i2-vals li:last-child:nth-child(odd) { grid-column: auto; }
  html[data-grid="after"] .i2-vals .i2-valph .i2-ph { aspect-ratio: 16 / 9; }
}
/* Roles: taller cells with more air */
html[data-grid="after"] .i2-roles li { min-height: 6.5rem; font-size: 15px; }
@media (max-width: 47.99rem) { html[data-grid="after"] .i2-roles li { min-height: 5rem; font-size: 14px; } }
html[data-grid="after"] .i2-does li { padding: clamp(1.75rem, 3vw, 2.25rem) 1rem; }

/* Line art 2 (Iteration 3 in Options) — one line, everywhere.
   Every grid line, rail, box edge, row divider and footer rule is 1px, solid, and the same opaque colour,
   so lines that meet or overlap never darken. Loose dividers became rows of the grid or were removed. */
html[data-grid="after"] { --ln-d: #222324; --ln-l: #e3e4e4; --ln: var(--ln-d); --in: clamp(1rem, 2.4vw, 1.75rem); --rail: calc(min(100%, var(--wmax)) - 2 * var(--g)); }
html[data-grid="after"] .i2 { --ln: var(--ln-d); }
html[data-grid="after"] .i2 .i2-light { --ln: var(--ln-l); }
html[data-grid="after"] .i2 > section::before { border-inline-style: solid; border-color: var(--ln); }
html[data-grid="after"] .hdr--i2 { border-bottom-color: var(--ln-d); }
html[data-grid="after"] .i2-seg { border-color: var(--ln); }
/* Product: the six tabs are rows of the left panel, edge to edge; the active tab's note is the last row */
html[data-grid="after"] .i2-prod > .i2-tabwrap { display: flex; flex-direction: column; align-content: stretch; padding: 0; }
html[data-grid="after"] .i2-tabs { flex: 1; display: grid; grid-auto-rows: 1fr; border-top: 0; }
html[data-grid="after"] .i2-tabs li { display: grid; border-bottom: 1px solid var(--ln); }
html[data-grid="after"] .i2-tabs button { align-items: center; padding: 1rem var(--in); }
html[data-grid="after"] .i2-tabwrap > :not(.i2-tabs) { padding: var(--in); }
html[data-grid="after"] .i2-tph { margin-top: 0; padding-bottom: 0 !important; }
/* Privacy: the three points are rows of the left panel, sharing its height */
html[data-grid="after"] .i2-split > div:first-child { padding: 0; }
html[data-grid="after"] .i2-split .i2-pts { height: 100%; display: grid; grid-auto-rows: 1fr; }
html[data-grid="after"] .i2-split .i2-pts li { padding: 1.25rem var(--in); border-bottom: 0; }
html[data-grid="after"] .i2-split .i2-pts li + li { border-top: 1px solid var(--ln); }
/* Built by Z42: space, not another rule */
html[data-grid="after"] .i2-z42 { border-top: 0; padding-top: 0; }
/* Footer joins the grid: the same rails, and its two rules run rail to rail */
html[data-grid="after"][data-it="2"] .cf { position: relative; isolation: isolate; border-top-color: var(--ln-d); }
html[data-grid="after"][data-it="2"] .cf::before { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 50%; width: var(--rail); transform: translateX(-50%); border-inline: 1px solid var(--ln-d); background: none; pointer-events: none; z-index: -1; }
html[data-grid="after"][data-it="2"] .cf .wrap { padding-inline: calc(var(--g) + var(--in)); }
html[data-grid="after"][data-it="2"] .cf :is(.cf__cta, .cf__b) { margin-inline: calc(-1 * var(--in)); padding-inline: var(--in); border-color: var(--ln-d); }
html[data-grid="after"] .i2-split > div:first-child { align-content: stretch; }