/* /team/ — the whole operation, staffed. Editorial hero, one diagram, then a
   walk through the departments. Shares the scene cards with the role pages. */
.tm-page{--tm-gutter:1.25rem;--tm-ink:#343434;--tm-muted:#60665c;--tm-soft:#747c72;--tm-label:#5e655c;--tm-rule:#bac2b2;--tm-lime:#e0fe67;--tm-deep:#1f2a22;color:var(--tm-ink);background:#fff}
.tm-page *{box-sizing:border-box}
.tm-page h1,.tm-page h2,.tm-page h3,.tm-page p{margin:0;font-weight:400}
.tm-page a{color:inherit;text-decoration:none}
.tm-page button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tm-page button:focus-visible,.tm-page a:focus-visible{outline:2px solid #535b43;outline-offset:6px}
.tm-page svg{flex-shrink:0}
.tm-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Matches .oe-feature-eyebrow on the home page. */
.tm-eyebrow,.tm-department-label,.tm-proof>span{font:400 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--tm-label)}
.tm-text-link{display:inline-flex;align-items:center;gap:20px;padding:12px 0;font-size:16px;line-height:1.4}
.tm-text-link:hover{text-decoration:underline;text-underline-offset:5px}
.tm-page .tm-inline-link{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--tm-rule)}
.tm-page .tm-inline-link:hover{text-decoration-color:currentColor}
.tm-page .tm-button{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:15px 24px;border-radius:40px;background:#343434;color:#fff;font-size:16px;line-height:1.3;transition:background .2s}
.tm-button:hover{background:#181916}
.tm-button svg{width:20px;height:20px}

@media(min-width:768px){.tm-page{--tm-gutter:2rem}}

/* Hero */
.tm-hero{padding:clamp(56px,9vh,116px) var(--tm-gutter) clamp(48px,7vh,88px)}
.tm-hero h1{margin-top:22px;font-size:clamp(40px,4.3vw,78px);line-height:1.05;letter-spacing:-.045em;text-wrap:balance}
.tm-hero-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,80px);margin-top:clamp(40px,5vh,72px);max-width:1180px}
.tm-hero-lead{font-size:clamp(19px,1.5vw,25px);line-height:1.42;letter-spacing:-.02em;text-wrap:pretty}
.tm-hero-body>p:last-of-type{font-size:17px;line-height:1.6;color:var(--tm-muted);max-width:40em;text-wrap:pretty}

/* The nine, named, each with its own mark. */
.tm-band{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 20px;width:100%;margin:clamp(40px,5vh,68px) 0 0;padding:22px 0 0;border-top:1px solid var(--tm-rule);list-style:none}
.tm-band a{display:inline-flex;align-items:center;gap:9px;font-size:15px;line-height:1.3;color:var(--tm-muted);transition:color .2s}
.tm-band a:hover{color:var(--tm-ink)}
.tm-glyph{width:19px;height:19px;color:#8a9280;transition:color .2s}
.tm-band a:hover .tm-glyph{color:var(--tm-ink)}

/* The operation */
.tm-operation{padding:clamp(40px,6vh,80px) var(--tm-gutter) clamp(56px,8vh,104px)}
.tm-stage-copy h2,.tm-closing h2{font-size:clamp(33px,2.75vw,52px);line-height:1.12;letter-spacing:-.035em;text-wrap:balance}
.tm-stage-copy h2>span,.tm-department-head h2>span{color:#808080}

.tm-stage{position:relative;display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);align-items:center;gap:clamp(22px,2.4vw,48px);padding:clamp(14px,1.5vw,26px) clamp(24px,2.6vw,50px);min-height:0;border-radius:18px;background:#4b5240 var(--tm-stage-image,url('/_local/team-blurred.webp')) center bottom/cover;overflow:hidden;isolation:isolate}
.tm-stage>*{position:relative;z-index:1}
.tm-stage-copy{color:#fff;text-shadow:0 1px 16px #0d130c87;max-width:30em}
.tm-stage-copy h2{text-wrap:balance;max-width:none;margin-right:clamp(-48px,-3.2vw,-20px)}
.tm-stage-copy h2>span{color:#ffffffa6}
.tm-stage-copy p{margin-top:20px!important;font-size:16px;line-height:1.6;color:#e7ece0;text-wrap:pretty}
.tm-ring{position:relative;width:100%;aspect-ratio:1;margin-inline:auto;margin-block:-6.4% -10.6%}
.tm-stage-lines{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible}
.tm-lane{fill:none;stroke:#fff;stroke-opacity:.22;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:.6 2.2;stroke-linecap:round;transition:stroke .35s,stroke-opacity .35s}
.tm-lane.is-live{stroke:var(--tm-lime);stroke-opacity:.9}


/* The centre is a voice exchange: the orb, and what was said, transcribed. */
.tm-voice{position:absolute;inset:0;z-index:3;pointer-events:none}
.tm-orb{position:absolute;left:50%;top:50%;width:min(460px,43.7%);aspect-ratio:1;translate:-50% -50%;pointer-events:none;transition:scale .5s cubic-bezier(.22,1,.36,1)}
.tm-orb canvas{display:block;width:100%!important;height:100%!important}
.tm-voice[data-voice=asking] .tm-orb{scale:.96}
.tm-voice[data-voice=thinking] .tm-orb{scale:1}
.tm-voice[data-voice=answering] .tm-orb{animation:tm-talk 1.15s ease-in-out infinite}
@keyframes tm-talk{0%{scale:1.03}22%{scale:1.085}44%{scale:1.02}66%{scale:1.07}100%{scale:1.03}}
.tm-transcript{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(440px,46%);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:#fff;text-shadow:0 1px 14px #0e140d9e}
.tm-speaker{font:400 11.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.1em;color:#fff;opacity:.82}
.tm-transcript::before{content:'';position:absolute;inset:-30px -40px;z-index:-1;background:radial-gradient(ellipse at center,#0d130c9e 0%,#0d130c6b 45%,#0d130c00 72%)}
.tm-line{font-size:clamp(18px,1.5vw,24px);line-height:1.32;letter-spacing:-.022em;text-wrap:balance;min-height:2.64em}
/* Each word arrives as it is said. */
.tm-word{display:inline-block;opacity:0;filter:blur(6px);transform:translateY(3px);animation:tm-say .42s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--tm-delay,0ms)}
@keyframes tm-say{to{opacity:1;filter:blur(0);transform:none}}
.tm-consult{display:flex;align-items:center;gap:10px;font-size:13.8px;line-height:1.4;color:#dfe9cf;opacity:0;transition:opacity .3s ease}
.tm-transcript[data-stage="2"] .tm-consult{opacity:.9}
.tm-transcript[data-stage="3"] .tm-consult,.tm-transcript[data-stage="4"] .tm-consult{opacity:.45}
.tm-consult-dots{display:inline-flex;gap:3px}
.tm-consult-dots i{width:4px;height:4px;border-radius:50%;background:var(--tm-lime);animation:tm-pulse 1.1s ease-in-out infinite}
.tm-consult-dots i:nth-child(2){animation-delay:.16s}
.tm-consult-dots i:nth-child(3){animation-delay:.32s}
@keyframes tm-pulse{0%,100%{opacity:.3}50%{opacity:1}}
.tm-transcript[data-stage="3"] .tm-consult-dots i,.tm-transcript[data-stage="4"] .tm-consult-dots i{animation:none;opacity:.5}
.tm-offer{display:inline-flex;align-items:center;gap:7px;margin-top:4px;padding:7px 14px 7px 11px;border:0;border-radius:20px;background:#fffdf5;color:#232a20;white-space:nowrap;font-size:12px;line-height:1.3;letter-spacing:-.005em;text-shadow:none;box-shadow:0 6px 18px #0c120d3d;pointer-events:auto;opacity:0;transform:translateY(4px);transition:opacity .34s ease,transform .34s ease,background .2s}
.tm-offer:hover{background:#fff}
.tm-tick{width:14px;height:14px;color:#5f7042}
.tm-transcript[data-stage="4"] .tm-offer{opacity:1;transform:none}

.tm-chips{position:absolute;inset:0;z-index:2;margin:0;padding:0;list-style:none}
.tm-chip-slot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);will-change:transform}
.tm-chip-group{display:none}
.tm-chip{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border:1px solid #ffffff1c;border-radius:30px;background:#ffffff14;-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);color:#fff;font-size:15px;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;box-shadow:0 4px 18px #0c120d30;transition:background .25s,border-color .25s}
.tm-chip-dot{width:6px;height:6px;border-radius:50%;background:#fff;transition:background .25s,box-shadow .25s}
.tm-chip:hover{background:#ffffff24}
.tm-chip[aria-pressed=true]{background:#ffffff1f;border-color:#ffffff2e}
.tm-chip[aria-pressed=true] .tm-chip-dot{background:var(--tm-lime);box-shadow:0 0 0 5px #e0fe6740}


/* Departments: the grouping and a line of summary. The role pages do the rest. */
.tm-departments{padding:clamp(48px,7vh,96px) var(--tm-gutter) clamp(24px,4vh,56px)}
.tm-department{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(28px,4vw,80px);align-items:start;padding:clamp(48px,6.5vh,88px) 0;border-top:1px solid var(--tm-rule)}
.tm-department:first-child{border-top:0;padding-top:0}
.tm-department-head{position:sticky;top:104px}
.tm-department-head h2{margin-top:14px;font-size:clamp(27px,2.1vw,38px);line-height:1.14;letter-spacing:-.032em;text-wrap:balance}
.tm-department-head h2>span{color:#808080}
.tm-summary{margin-top:20px!important;font-size:17px;line-height:1.65;color:var(--tm-muted);max-width:34em;text-wrap:pretty}

.tm-roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.tm-roles--1{grid-template-columns:repeat(2,minmax(0,1fr))}
.tm-roles--1 .tm-role{grid-column:1}
.tm-roles--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tm-role>a{display:flex;flex-direction:column;gap:14px;height:100%;min-height:236px;padding:28px 26px 26px;border-radius:16px;background:#f4f5ef;transition:background .2s,transform .2s}
/* Names, descriptions and evidence line up across a row however each one wraps. */
@supports (grid-template-rows:subgrid){
  .tm-roles{grid-template-rows:auto}
  .tm-roles--2,.tm-roles--3{grid-template-rows:auto auto auto}
  .tm-roles--2 .tm-role,.tm-roles--3 .tm-role{display:grid;grid-row:span 3;grid-template-rows:subgrid}
  .tm-roles--2 .tm-role>a,.tm-roles--3 .tm-role>a{display:grid;grid-row:span 3;grid-template-rows:subgrid}
  /* The shared row already sets the band, so the evidence sits at its top. */
  .tm-roles--2 .tm-proof,.tm-roles--3 .tm-proof{margin-top:0;align-self:start}
}
.tm-role>a:hover{background:#eceee4;transform:translateY(-2px)}
.tm-role h3{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:20px;line-height:1.2;letter-spacing:-.025em}
.tm-role h3 svg{width:18px;height:18px;flex-shrink:0;color:#8a9280;transition:transform .2s}
.tm-role>a:hover h3 svg{transform:translateX(3px)}
.tm-role-owns{font-size:15px;line-height:1.55;color:var(--tm-muted);text-wrap:pretty}
.tm-proof{margin-top:auto;padding-top:18px;border-top:1px solid #dcdfd2}
.tm-proof>span{display:block;font-size:11px;color:#575f4f}
.tm-proof>p{margin-top:9px!important;font-size:15px;line-height:1.5;color:#2f362b;text-wrap:pretty}

.tm-department--leadership .tm-role>a{background:#343434;color:#fafbf5}
.tm-department--leadership .tm-role>a:hover{background:#2b2b2b}
.tm-department--leadership .tm-role-owns{color:#b7bfae}
.tm-department--leadership .tm-proof{border-top-color:#4e4e4b}
.tm-department--leadership .tm-proof>span{color:#a7b09c}
.tm-department--leadership .tm-proof>p{color:#fafbf5}
.tm-department--leadership .tm-role h3 svg{color:#b7bfae}

/* A statement row: the same two columns, no cards. */
.tm-department--statement{align-items:center}
.tm-department--statement .tm-summary{margin-top:0!important;max-width:36em}

/* Say-so + closing */
.tm-closing{display:flex;flex-direction:column;align-items:center;gap:22px;padding:clamp(72px,10vh,132px) var(--tm-gutter);text-align:center;color:#fff;background:#4b5240 var(--tm-closing-image) center/cover}
.tm-closing h2{text-shadow:0 1px 18px #0d130c8c}
.tm-closing p{font-size:17px;line-height:1.6;color:#e7ece0;max-width:44em;text-wrap:balance;text-shadow:0 1px 14px #0d130c87}
.tm-closing .tm-button{margin-top:10px}
/* On the photograph the button is the light thing, not the dark one. */
.tm-page .tm-closing .tm-button{background:#fffdf5;color:#232a20;box-shadow:0 8px 26px #0c120d3d}
.tm-page .tm-closing .tm-button:hover{background:#fff}

@media(max-width:1100px){
    .tm-stage{grid-template-columns:minmax(0,1fr);aspect-ratio:auto;gap:clamp(26px,4vh,44px)}
  .tm-department{grid-template-columns:minmax(0,1fr);gap:26px}
  .tm-department-head{position:static}
  .tm-roles--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .tm-hero-body{grid-template-columns:minmax(0,1fr)}
  .tm-stage{display:flex;flex-direction:column;gap:18px;padding:30px 22px 26px;aspect-ratio:auto}
  /* The tall phone crop lands on the light half of the photograph, so the
     panel earns its contrast back here rather than at desktop. */
  .tm-stage::before{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(#0d130c9c,#0d130c54 40%,#0d130c3d 66%,#0d130c66)}
  .tm-stage-copy h2{font-size:clamp(30px,8.5vw,38px)}
  .tm-stage-copy p{font-size:15.5px;line-height:1.6}
  /* Four names arced above the sphere, four below. */
  .tm-ring{aspect-ratio:350/540;margin-block:0}
  .tm-orb{width:min(150px,45%)}
  .tm-transcript{width:min(246px,75%)}
  .tm-line{font-size:14px;min-height:2.6em}
  .tm-speaker{font-size:10px}
  .tm-consult{font-size:12px}
  /* The same glass, drawn tight: a phone cannot carry the desktop padding. */
  .tm-chip{gap:5px;padding:4px 9px 4px 8px;border-radius:24px;font-size:10.5px;letter-spacing:.004em;box-shadow:0 3px 14px #0c120d3d;-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);text-shadow:none}
  .tm-chip-dot{width:4px;height:4px;box-shadow:none}
  .tm-chip[aria-pressed=true]{color:var(--tm-lime)}
  .tm-chip-group{display:none}
  .tm-roles,.tm-roles--3{grid-template-columns:minmax(0,1fr)}
}

@media(prefers-reduced-motion:reduce){
  .tm-lane,.tm-chip,.tm-orb,.tm-consult,.tm-offer{transition:none}
  .tm-word{animation:none;opacity:1;filter:none;transform:none}
  .tm-consult-dots i{animation:none}
}