.tandem-page-main { overflow: clip; padding-top: 82px; } .tandem-page-hero { display: grid; min-height: min(680px, 74vh); padding-block: clamp(6rem, 9vw, 9rem); align-items: center; } .tandem-page-hero-inner { max-width: 1440px; } .tandem-page-hero h1 { max-width: 1120px; margin: 0; font-size: clamp(4.4rem, 8.3vw, 9rem); line-height: .92; letter-spacing: -.06em; text-wrap: balance; } .tandem-page-hero .lead { max-width: 650px; margin: clamp(2rem, 3vw, 3rem) 0 0; font-size: clamp(1.05rem, 1.3vw, 1.28rem); } .tandem-process{padding-block:clamp(2rem,4vw,4rem) clamp(7rem,10vw,10rem);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:var(--forest-950)} .tandem-system-wrap{max-width:1480px} .tandem-system-board{position:relative;width:min(100%,1280px);min-height:1040px;margin-inline:auto;padding:clamp(2rem,3.5vw,3.6rem)} .tandem-board-surface{position:absolute;inset:0;border:1px solid rgba(255,255,255,.62);border-radius:9px;background:radial-gradient(circle at 18% 12%,rgba(255,255,255,.64),transparent 23%),radial-gradient(circle at 82% 86%,rgba(128,111,88,.09),transparent 28%),linear-gradient(145deg,#F5F0E8 0%,#F2ECE2 52%,#E8DFD3 100%);box-shadow:0 28px 65px rgba(0,14,9,.28),inset 0 1px rgba(255,255,255,.88),inset 0 -2px rgba(111,92,67,.16)} .tandem-board-inner-frame{position:absolute;inset:18px;border:1px solid rgba(255,255,255,.52);border-radius:6px} .tandem-board-pin{position:absolute;width:9px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 25%,#e5e6e3,#979c96 38%,#3d423e 100%);box-shadow:0 1px 2px rgba(0,0,0,.26)} .tandem-board-pin--tl{top:30px;left:31px}.tandem-board-pin--tr{top:30px;right:31px}.tandem-board-pin--bl{bottom:30px;left:31px}.tandem-board-pin--br{bottom:30px;right:31px} .tandem-system-mechanism{position:absolute;z-index:3;left:4.5%;right:4.5%;top:4.5%;height:720px} .tandem-mechanism-svg{display:block;width:100%;height:100%;overflow:visible} .tandem-stage-labels{position:absolute;inset:0;pointer-events:none} .tandem-stage-label{position:absolute;color:#173427;font-size:clamp(1.35rem,1.75vw,1.9rem);font-weight:600;letter-spacing:-.025em;opacity:0} .tandem-stage-label--1{left:50%;top:13.6%;transform:translate(-50%,0)}.tandem-stage-label--2{right:7.5%;top:29%}.tandem-stage-label--3{right:13%;bottom:10%}.tandem-stage-label--4{left:13%;bottom:10%}.tandem-stage-label--5{left:7.5%;top:29%} .tandem-stage-details{position:absolute;z-index:5;left:clamp(2rem,3.5vw,3.6rem);right:clamp(2rem,3.5vw,3.6rem);bottom:clamp(2rem,3vw,2.8rem);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid rgba(118,80,31,.18);border-radius:7px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06)),rgba(224,217,205,.46);box-shadow:inset 0 1px rgba(255,255,255,.62)} .tandem-stage-detail{position:relative;min-width:0;min-height:132px;padding:1.15rem 1rem 1.05rem;border-right:1px solid rgba(118,80,31,.12);color:#173427}.tandem-stage-detail:last-child{border-right:0}.tandem-stage-detail h3{margin:0 0 .55rem;color:#173427;font-size:clamp(1rem,1.18vw,1.18rem)}.tandem-stage-detail p{margin:0;color:#516258;font-size:clamp(.77rem,.82vw,.88rem);line-height:1.48} /* 15-step choreography: mount builds, engine forms, stages reveal, then copy activates */ .js .tandem-board-surface{opacity:0;transform:translateY(38px) scale(.985)}.js .tandem-board-inner-frame{opacity:0;transform:scale(.992)}.js .tandem-board-pin{opacity:0;transform:scale(.55)} .js .sys-node{opacity:0;transform:translateY(-5px) scale(.82);transform-box:fill-box;transform-origin:center}.js .sys-bridge{stroke-dasharray:124;stroke-dashoffset:124}.js .sys-ring{stroke-dasharray:942;stroke-dashoffset:942}.js .sys-dome{opacity:0;transform:scale(.985);transform-box:fill-box;transform-origin:center} .js .sys-connector{stroke:url(#sysBrass);stroke-width:2.05;fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}.js .sys-dock{fill:#D59B3D;stroke:#FFF0C9;stroke-width:.8;opacity:0;transform:scale(.5);transform-box:fill-box;transform-origin:center}.js .sys-icon{opacity:0;transform:translateY(5px) scale(.92);transform-box:fill-box;transform-origin:center}.js .tandem-stage-label{opacity:0} .tandem-process.is-sequencing .tandem-board-surface{animation:boardBaseIn .7s .1s cubic-bezier(.18,.72,.22,1) forwards}.tandem-process.is-sequencing .tandem-board-inner-frame{animation:frameResolve .4s .68s ease forwards}.tandem-process.is-sequencing .tandem-board-pin{animation:pinSeat .34s 1s ease-out forwards}.tandem-process.is-sequencing .tandem-board-pin--tr{animation-delay:1.08s}.tandem-process.is-sequencing .tandem-board-pin--bl{animation-delay:1.16s}.tandem-process.is-sequencing .tandem-board-pin--br{animation-delay:1.24s} .tandem-process.is-sequencing .sys-node--human{animation:engineNodeIn .48s 1.56s forwards}.tandem-process.is-sequencing .sys-node--tools{animation:engineNodeIn .48s 1.96s forwards}.tandem-process.is-sequencing .sys-bridge{animation:bridgeDraw .52s 2.34s ease-out forwards}.tandem-process.is-sequencing .sys-ring{animation:ringDraw 1s 2.76s cubic-bezier(.42,0,.25,1) forwards}.tandem-process.is-sequencing .sys-dome{animation:domeResolve .55s 3.44s ease forwards} .tandem-process.is-sequencing .sys-stage--1 .sys-connector{animation:connectorDraw .58s 4.35s ease-out forwards}.tandem-process.is-sequencing .sys-stage--1 .sys-dock{animation:dockIn .28s 4.77s forwards}.tandem-process.is-sequencing .sys-stage--1 .sys-icon{animation:iconIn .46s 4.91s forwards}.tandem-process.is-sequencing .tandem-stage-label--1{animation:labelIn .34s 5.22s forwards} .tandem-process.is-sequencing .sys-stage--2 .sys-connector{animation:connectorDraw .58s 5.58s ease-out forwards}.tandem-process.is-sequencing .sys-stage--2 .sys-dock{animation:dockIn .28s 6s forwards}.tandem-process.is-sequencing .sys-stage--2 .sys-icon{animation:iconIn .46s 6.14s forwards}.tandem-process.is-sequencing .tandem-stage-label--2{animation:labelIn .34s 6.45s forwards} .tandem-process.is-sequencing .sys-stage--3 .sys-connector{animation:connectorDraw .58s 6.81s ease-out forwards}.tandem-process.is-sequencing .sys-stage--3 .sys-dock{animation:dockIn .28s 7.23s forwards}.tandem-process.is-sequencing .sys-stage--3 .sys-icon{animation:iconIn .46s 7.37s forwards}.tandem-process.is-sequencing .tandem-stage-label--3{animation:labelIn .34s 7.68s forwards} .tandem-process.is-sequencing .sys-stage--4 .sys-connector{animation:connectorDraw .58s 8.04s ease-out forwards}.tandem-process.is-sequencing .sys-stage--4 .sys-dock{animation:dockIn .28s 8.46s forwards}.tandem-process.is-sequencing .sys-stage--4 .sys-icon{animation:iconIn .46s 8.60s forwards}.tandem-process.is-sequencing .tandem-stage-label--4{animation:labelIn .34s 8.91s forwards} .tandem-process.is-sequencing .sys-stage--5 .sys-connector{animation:connectorDraw .58s 9.27s ease-out forwards}.tandem-process.is-sequencing .sys-stage--5 .sys-dock{animation:dockIn .28s 9.69s forwards}.tandem-process.is-sequencing .sys-stage--5 .sys-icon{animation:iconIn .46s 9.83s forwards}.tandem-process.is-sequencing .tandem-stage-label--5{animation:labelIn .34s 10.14s forwards} .tandem-process.is-sequencing .tandem-stage-detail--1{animation:detailPulse .72s 11.10s ease}.tandem-process.is-sequencing .tandem-stage-detail--2{animation:detailPulse .72s 11.82s ease}.tandem-process.is-sequencing .tandem-stage-detail--3{animation:detailPulse .72s 12.54s ease}.tandem-process.is-sequencing .tandem-stage-detail--4{animation:detailPulse .72s 13.26s ease}.tandem-process.is-sequencing .tandem-stage-detail--5{animation:detailPulse .72s 13.98s ease} @keyframes boardBaseIn{0%{opacity:0;transform:translateY(38px) scale(.985)}72%{opacity:1;transform:translateY(-3px) scale(1.002)}100%{opacity:1;transform:none}}@keyframes frameResolve{to{opacity:1;transform:none}}@keyframes pinSeat{0%{opacity:0;transform:scale(.55)}70%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}@keyframes engineNodeIn{0%{opacity:0;transform:translateY(-5px) scale(.82)}75%{opacity:1;transform:translateY(1px) scale(1.03)}100%{opacity:1;transform:none}}@keyframes bridgeDraw{to{stroke-dashoffset:0}}@keyframes ringDraw{to{stroke-dashoffset:0}}@keyframes domeResolve{to{opacity:1;transform:none}}@keyframes connectorDraw{0%{opacity:.18;stroke-dashoffset:1}70%{opacity:.95}100%{opacity:.72;stroke-dashoffset:0}}@keyframes dockIn{0%{opacity:0;transform:scale(.5)}70%{opacity:1;transform:scale(1.16)}100%{opacity:.9;transform:scale(1)}}@keyframes iconIn{0%{opacity:0;transform:translateY(5px) scale(.92)}70%{opacity:1;transform:translateY(-2px) scale(1.025)}100%{opacity:1;transform:none}}@keyframes labelIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@keyframes detailPulse{0%,100%{background-color:transparent;box-shadow:none}30%,72%{background-color:rgba(255,213,138,.12);box-shadow:inset 0 2px rgba(213,155,61,.52)}} .tandem-foundations{width:min(100%,1280px);margin:clamp(4rem,6vw,6rem) auto 0;padding-top:clamp(1.4rem,2vw,2rem);border-top:1px solid var(--line-soft)}.tandem-foundations>.eyebrow{margin-bottom:1.75rem}.tandem-foundations-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid rgba(214,161,75,.20);border-radius:10px;overflow:hidden}.tandem-foundation{min-width:0;padding:clamp(1.5rem,2.6vw,2.4rem) clamp(1rem,1.8vw,1.6rem);text-align:center;border-right:1px solid rgba(214,161,75,.14)}.tandem-foundation:last-child{border-right:0}.tandem-foundation svg{width:46px;height:46px;margin:0 auto 1rem;fill:none;stroke:#d6a14b;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}.tandem-foundation .foundation-dots{fill:#7fae9c;stroke:none}.tandem-foundation h3{margin:0 0 .55rem;color:var(--ivory-100);font-size:clamp(1.05rem,1.4vw,1.3rem)}.tandem-foundation p{max-width:190px;margin:0 auto;color:var(--stone-200);font-size:.9rem;line-height:1.55} @media(max-width:980px){.tandem-system-board{min-height:0;padding:2rem}.tandem-board-surface{position:relative;min-height:680px}.tandem-system-mechanism{position:absolute;left:4%;right:4%;top:4%;height:520px}.tandem-stage-labels{display:none}.tandem-stage-details{position:relative;left:auto;right:auto;bottom:auto;margin-top:1.5rem;grid-template-columns:repeat(2,minmax(0,1fr))}.tandem-foundations-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:620px){.tandem-system-board{padding:1rem}.tandem-board-surface{min-height:560px}.tandem-system-mechanism{height:420px}.tandem-stage-details{grid-template-columns:1fr}.tandem-foundations-grid{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){.js .tandem-board-surface,.js .tandem-board-inner-frame,.js .tandem-board-pin,.js .sys-node,.js .sys-dome,.js .sys-icon,.js .tandem-stage-label{opacity:1!important;transform:none!important;animation:none!important}.js .sys-ring,.js .sys-bridge,.js .sys-connector{stroke-dashoffset:0!important;opacity:.72!important;animation:none!important}.js .sys-dock{opacity:.9!important;transform:none!important;animation:none!important}} /* ========================================================= HIERARCHY + CURVED CONNECTION REFINEMENT ========================================================= */ /* Move the complete mechanism slightly lower on the mount. */ .tandem-system-mechanism { top: 8%; } /* Stage names around the mechanism have been removed from the HTML. These legacy selectors are neutralised in case of cached markup. */ .tandem-stage-labels, .tandem-stage-label { display: none !important; } /* Keep the brass outer ring authoritative, but make the inner glass lens slightly smaller so more of the brass structure is visible. */ .sys-dome { transform: scale(.91); transform-box: fill-box; transform-origin: center; } .js .sys-dome { transform: scale(.895); } .tandem-process.is-sequencing .sys-dome { animation: domeResolveRefined .55s 3.44s ease forwards; } @keyframes domeResolveRefined { to { opacity: 1; transform: scale(.91); } } /* Curves stay fine and elegant. */ .js .sys-connector { stroke-width: 1.65; stroke-linejoin: round; } /* Larger attached medallions create a clearer secondary hierarchy. */ .sys-icon { filter: drop-shadow(0 5px 7px rgba(74, 53, 25, .14)); } /* Lower band now carries the naming + explanatory role. */ .tandem-stage-detail__heading { display: flex; align-items: center; gap: .6rem; margin-bottom: .62rem; } .tandem-stage-detail__heading img { display: block; width: 32px; height: 32px; flex: 0 0 32px; } .tandem-stage-detail__heading h3 { margin: 0; } .tandem-stage-detail > p { margin: 0; } /* Slightly improve hierarchy within the five built-in descriptions. */ .tandem-stage-detail { padding-top: 1rem; } .tandem-stage-detail p { color: #56675d; } /* Sequence refinement: the mechanism completes first; the five connected medallions reveal; only after the full system has rested does the lower description band ask for attention. */ .tandem-process.is-sequencing .sys-stage--1 .sys-connector { animation-delay: 4.35s; } .tandem-process.is-sequencing .sys-stage--1 .sys-dock { animation-delay: 4.79s; } .tandem-process.is-sequencing .sys-stage--1 .sys-icon { animation-delay: 4.93s; } .tandem-process.is-sequencing .sys-stage--2 .sys-connector { animation-delay: 5.50s; } .tandem-process.is-sequencing .sys-stage--2 .sys-dock { animation-delay: 5.94s; } .tandem-process.is-sequencing .sys-stage--2 .sys-icon { animation-delay: 6.08s; } .tandem-process.is-sequencing .sys-stage--3 .sys-connector { animation-delay: 6.65s; } .tandem-process.is-sequencing .sys-stage--3 .sys-dock { animation-delay: 7.09s; } .tandem-process.is-sequencing .sys-stage--3 .sys-icon { animation-delay: 7.23s; } .tandem-process.is-sequencing .sys-stage--4 .sys-connector { animation-delay: 7.80s; } .tandem-process.is-sequencing .sys-stage--4 .sys-dock { animation-delay: 8.24s; } .tandem-process.is-sequencing .sys-stage--4 .sys-icon { animation-delay: 8.38s; } .tandem-process.is-sequencing .sys-stage--5 .sys-connector { animation-delay: 8.95s; } .tandem-process.is-sequencing .sys-stage--5 .sys-dock { animation-delay: 9.39s; } .tandem-process.is-sequencing .sys-stage--5 .sys-icon { animation-delay: 9.53s; } /* Full system now gets a deliberate quiet rest before sub-copy highlights. */ .tandem-process.is-sequencing .tandem-stage-detail--1 { animation-delay: 10.85s; } .tandem-process.is-sequencing .tandem-stage-detail--2 { animation-delay: 11.57s; } .tandem-process.is-sequencing .tandem-stage-detail--3 { animation-delay: 12.29s; } .tandem-process.is-sequencing .tandem-stage-detail--4 { animation-delay: 13.01s; } .tandem-process.is-sequencing .tandem-stage-detail--5 { animation-delay: 13.73s; } @media (max-width: 980px) { .tandem-system-mechanism { top: 7%; } .tandem-stage-detail__heading img { width: 30px; height: 30px; flex-basis: 30px; } } @media (max-width: 620px) { .tandem-stage-detail__heading img { width: 28px; height: 28px; flex-basis: 28px; } } /* ========================================================= FULL GLASS INNER PANEL Ivory mount -> full glass panel -> four pins -> engine. ========================================================= */ .tandem-board-surface { overflow: hidden; } /* The physical glass sheet. It sits inset from the ivory mount and is clearly distinct from the mount itself. */ .tandem-board-glass { position: absolute; z-index: 1; inset: 18px; border-radius: 7px; border: 1px solid rgba(255,255,255,.58); background: linear-gradient( 145deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.10) 26%, rgba(240,240,236,.055) 55%, rgba(255,255,255,.02) 100% ); box-shadow: inset 0 1px rgba(255,255,255,.76), inset 0 -1px rgba(115,102,84,.10), 0 10px 24px rgba(73,58,37,.08); backdrop-filter: blur(.7px); -webkit-backdrop-filter: blur(.7px); } /* Broad, restrained reflection across the whole sheet. */ .tandem-board-glass-highlight { position: absolute; z-index: 2; inset: 18px; border-radius: 7px; overflow: hidden; pointer-events: none; } .tandem-board-glass-highlight::before { content: ""; position: absolute; width: 64%; height: 78%; left: -12%; top: -26%; border-radius: 50%; transform: rotate(-14deg); background: radial-gradient( ellipse at center, rgba(255,255,255,.34) 0%, rgba(255,255,255,.15) 42%, rgba(255,255,255,.035) 67%, transparent 76% ); } /* Pins now sit above the glass and visually hold it in place. */ .tandem-board-pin { z-index: 5; } /* Remove legacy inset-frame treatment: the glass edge now provides the inset. */ .tandem-board-inner-frame { display: none !important; } /* Central ring sits directly on the full glass sheet. No separate circular lens/dome remains. */ .sys-dome { display: none !important; } /* Keep the brass engine visually proud of the glass. */ .sys-ring { filter: drop-shadow(0 8px 8px rgba(73,49,21,.16)); } /* ===== Revised opening choreography ===== 1 ivory mount arrives 2 full glass panel resolves 3 glass reflection catches 4 four pins seat 5 human node 6 tools node 7 bridge 8 brass ring draws 9 pause 10-14 five stage connections 15 supporting copy sequence */ .js .tandem-board-glass { opacity: 0; transform: scale(.992); transform-origin: center; } .js .tandem-board-glass-highlight { opacity: 0; } .tandem-process.is-sequencing .tandem-board-glass { animation: tandemGlassPanelIn .56s .72s ease forwards; } .tandem-process.is-sequencing .tandem-board-glass-highlight { animation: tandemGlassHighlightIn .44s 1.02s ease forwards; } /* Pins seat only after the glass is visibly in place. */ .tandem-process.is-sequencing .tandem-board-pin { animation-delay: 1.36s; } .tandem-process.is-sequencing .tandem-board-pin--tr { animation-delay: 1.44s; } .tandem-process.is-sequencing .tandem-board-pin--bl { animation-delay: 1.52s; } .tandem-process.is-sequencing .tandem-board-pin--br { animation-delay: 1.60s; } /* Shift engine formation later to honour the mount/glass/pin build. */ .tandem-process.is-sequencing .sys-node--human { animation-delay: 1.92s; } .tandem-process.is-sequencing .sys-node--tools { animation-delay: 2.32s; } .tandem-process.is-sequencing .sys-bridge { animation-delay: 2.70s; } .tandem-process.is-sequencing .sys-ring { animation-delay: 3.12s; } /* No central circular dome animation. */ .tandem-process.is-sequencing .sys-dome { animation: none !important; } /* Keep the stage sequence comfortably after the ring completes. */ .tandem-process.is-sequencing .sys-stage--1 .sys-connector { animation-delay: 4.72s; } .tandem-process.is-sequencing .sys-stage--1 .sys-dock { animation-delay: 5.16s; } .tandem-process.is-sequencing .sys-stage--1 .sys-icon { animation-delay: 5.30s; } .tandem-process.is-sequencing .sys-stage--2 .sys-connector { animation-delay: 5.87s; } .tandem-process.is-sequencing .sys-stage--2 .sys-dock { animation-delay: 6.31s; } .tandem-process.is-sequencing .sys-stage--2 .sys-icon { animation-delay: 6.45s; } .tandem-process.is-sequencing .sys-stage--3 .sys-connector { animation-delay: 7.02s; } .tandem-process.is-sequencing .sys-stage--3 .sys-dock { animation-delay: 7.46s; } .tandem-process.is-sequencing .sys-stage--3 .sys-icon { animation-delay: 7.60s; } .tandem-process.is-sequencing .sys-stage--4 .sys-connector { animation-delay: 8.17s; } .tandem-process.is-sequencing .sys-stage--4 .sys-dock { animation-delay: 8.61s; } .tandem-process.is-sequencing .sys-stage--4 .sys-icon { animation-delay: 8.75s; } .tandem-process.is-sequencing .sys-stage--5 .sys-connector { animation-delay: 9.32s; } .tandem-process.is-sequencing .sys-stage--5 .sys-dock { animation-delay: 9.76s; } .tandem-process.is-sequencing .sys-stage--5 .sys-icon { animation-delay: 9.90s; } /* Full visual system rests before the description band begins. */ .tandem-process.is-sequencing .tandem-stage-detail--1 { animation-delay: 11.22s; } .tandem-process.is-sequencing .tandem-stage-detail--2 { animation-delay: 11.94s; } .tandem-process.is-sequencing .tandem-stage-detail--3 { animation-delay: 12.66s; } .tandem-process.is-sequencing .tandem-stage-detail--4 { animation-delay: 13.38s; } .tandem-process.is-sequencing .tandem-stage-detail--5 { animation-delay: 14.10s; } @keyframes tandemGlassPanelIn { 0% { opacity: 0; transform: scale(.992); } 72% { opacity: 1; transform: scale(1.002); } 100% { opacity: 1; transform: none; } } @keyframes tandemGlassHighlightIn { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 980px) { .tandem-board-glass, .tandem-board-glass-highlight { inset: 14px; } } @media (max-width: 620px) { .tandem-board-glass, .tandem-board-glass-highlight { inset: 10px; } } @media (prefers-reduced-motion: reduce) { .js .tandem-board-glass, .js .tandem-board-glass-highlight { opacity: 1 !important; transform: none !important; animation: none !important; } } /* Desktop hierarchy: use the full mount more confidently while preserving the established mobile spacing. The approved centre resolves one step larger than the surrounding stage medallions. */ @media (min-width: 981px) { .tandem-mechanism-svg { transform: scale(1.07); transform-origin: 50% 50%; } } /* ========================================================= APPROVED CENTRE MARK + STRONGER FULL GLASS SHEET ========================================================= */ .tandem-board-glass { inset: 16px; border: 1px solid rgba(255,255,255,.82); background: linear-gradient(145deg, rgba(255,255,255,.36) 0%, rgba(255,255,255,.15) 20%, rgba(255,255,255,.055) 49%, rgba(215,218,214,.035) 76%, rgba(255,255,255,.12) 100%); box-shadow: inset 0 2px rgba(255,255,255,.86), inset 0 -2px rgba(104,94,80,.15), inset 2px 0 rgba(255,255,255,.28), inset -1px 0 rgba(95,86,74,.05), 0 11px 24px rgba(55,45,31,.12), 0 2px 4px rgba(255,255,255,.40); backdrop-filter: blur(1px) saturate(1.04); -webkit-backdrop-filter: blur(1px) saturate(1.04); } .tandem-board-glass::after { content:""; position:absolute; inset:5px; border-radius:5px; border:1px solid rgba(255,255,255,.34); box-shadow: inset 0 0 18px rgba(255,255,255,.09), inset 0 -1px rgba(88,78,64,.07); pointer-events:none; } .tandem-board-glass-highlight { inset:16px; } .tandem-board-glass-highlight::before { width:72%; height:88%; left:-16%; top:-34%; opacity:.94; background: radial-gradient(ellipse at center, rgba(255,255,255,.45) 0%, rgba(255,255,255,.20) 37%, rgba(255,255,255,.06) 62%, transparent 76%); } .tandem-board-glass-highlight::after { content:""; position:absolute; width:38%; height:76%; right:-8%; bottom:-28%; border-radius:50%; transform:rotate(16deg); background: radial-gradient(ellipse at center, rgba(255,255,255,.17) 0%, rgba(255,255,255,.055) 48%, transparent 73%); } /* Pins visually sit over and secure the glass sheet. */ .tandem-board-pin { z-index:6; box-shadow: 0 2px 3px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.28); } /* Centre mark now uses exact approved geometry/material. It is intentionally a little smaller than the previous recreation, restoring hierarchy with the five outer medallions. */ .sys-approved-mark { transform-box: fill-box; transform-origin: center; } /* Curves remain elegant and secondary. */ .js .sys-connector { stroke-width: 1.5; } /* Keep the outer medallions visually substantial. */ .sys-icon { filter: drop-shadow(0 5px 8px rgba(74,53,25,.16)); } @media (max-width:980px) { .tandem-board-glass, .tandem-board-glass-highlight { inset:13px; } } @media (max-width:620px) { .tandem-board-glass, .tandem-board-glass-highlight { inset:9px; } } /* ========================================================= FIVE-STAGE SOURCE OF TRUTH Icon material is unchanged. Only inner glyphs are sage. The mount is reduced and the mechanism re-proportioned around the approved central mark geometry. ========================================================= */ .tandem-system-board { width: min(100%, 1120px); min-height: 900px; } /* Tighten the unused field around the system while preserving room for the mounted copy band. */ .tandem-system-mechanism { left: 5.5%; right: 5.5%; top: 4.2%; height: 680px; } /* Copy remains part of the mount, but becomes quieter relative to the five working instruments. */ .tandem-stage-details { left: clamp(1.5rem, 2.8vw, 2.6rem); right: clamp(1.5rem, 2.8vw, 2.6rem); bottom: clamp(3.2rem, 3.6vw, 3.5rem); } .tandem-stage-detail { min-height: 118px; padding: .9rem .82rem .9rem; } .tandem-stage-detail__heading { gap: .5rem; margin-bottom: .48rem; } .tandem-stage-detail__heading img { width: 29px; height: 29px; flex-basis: 29px; } /* The outer instruments now carry more semantic weight. */ .sys-icon { filter: drop-shadow(0 5px 8px rgba(74,53,25,.17)); } /* Curves are rebuilt from the approved ring circumference and remain visually secondary to the stage medallions. */ .js .sys-connector { stroke-width: 1.5; } @media (max-width: 980px) { .tandem-system-board { width: min(100%, 860px); min-height: 0; } .tandem-system-mechanism { left: 4%; right: 4%; top: 5%; height: 520px; } } @media (max-width: 620px) { .tandem-system-board { width: 100%; } .tandem-system-mechanism { height: 420px; } } /* ========================================================= ORBIT SEQUENCE REBUILD — 2026-08-17 Preserve the working mount + glass + pin + approved mark reveal. Replace the five slow serial stage reveals with: rack reveal -> simultaneous fan -> near-simultaneous connector ripple -> full rest -> descriptor reveal -> quiet descriptor highlights. ========================================================= */ /* The mechanism has one exact centre and five mathematically spaced stage centres: 72 degrees apart. */ .sys-connector-layer { pointer-events: none; } .sys-stage-instrument-layer { pointer-events: none; } /* Connector paths are behind both the approved ring and stage instruments. Their first/last few pixels are deliberately hidden under the hardware. */ .js .sys-connector { stroke: url(#connectorBrass); stroke-width: 1.55; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; } .js .sys-dock { fill: #D59B3D; stroke: #FFF0C9; stroke-width: .7; opacity: 0; } /* The five instruments now appear together on a temporary lower rack, then travel as one coordinated system into their 72-degree positions. */ .js .sys-stage-orbit .sys-icon { opacity: 0; transform: translate(var(--stage-start-x), var(--stage-start-y)) scale(.86); transform-box: fill-box; transform-origin: center; will-change: transform, opacity; } /* Kill the older one-by-one stage animations. */ .tandem-process.is-sequencing .sys-stage--1 .sys-connector, .tandem-process.is-sequencing .sys-stage--2 .sys-connector, .tandem-process.is-sequencing .sys-stage--3 .sys-connector, .tandem-process.is-sequencing .sys-stage--4 .sys-connector, .tandem-process.is-sequencing .sys-stage--5 .sys-connector { animation: none; } .tandem-process.is-sequencing .sys-stage--1 .sys-dock, .tandem-process.is-sequencing .sys-stage--2 .sys-dock, .tandem-process.is-sequencing .sys-stage--3 .sys-dock, .tandem-process.is-sequencing .sys-stage--4 .sys-dock, .tandem-process.is-sequencing .sys-stage--5 .sys-dock { animation: none; } /* Ring completes at ~4.12s in the retained sequence. All five instruments arrive together immediately afterwards. */ .tandem-process.is-sequencing .sys-stage-orbit .sys-icon { animation: stageRackReveal .30s 4.18s ease-out forwards; } .tandem-process.is-sequencing .sys-stage-orbit--1 .sys-icon { animation: stageRackReveal .30s 4.18s ease-out forwards, stageRackToOrbit .98s 5.05s cubic-bezier(.2,.72,.22,1) forwards; } .tandem-process.is-sequencing .sys-stage-orbit--2 .sys-icon { animation: stageRackReveal .30s 4.18s ease-out forwards, stageRackToOrbit .98s 5.20s cubic-bezier(.2,.72,.22,1) forwards; } .tandem-process.is-sequencing .sys-stage-orbit--3 .sys-icon { animation: stageRackReveal .30s 4.18s ease-out forwards, stageRackToOrbit .98s 5.35s cubic-bezier(.2,.72,.22,1) forwards; } .tandem-process.is-sequencing .sys-stage-orbit--4 .sys-icon { animation: stageRackReveal .30s 4.18s ease-out forwards, stageRackToOrbit .98s 5.50s cubic-bezier(.2,.72,.22,1) forwards; } .tandem-process.is-sequencing .sys-stage-orbit--5 .sys-icon { animation: stageRackReveal .30s 4.18s ease-out forwards, stageRackToOrbit .98s 5.65s cubic-bezier(.2,.72,.22,1) forwards; } /* Connector ripple begins only once the fan movement is underway. The tiny offsets create motion around the wheel without making the user wait for five separate stages. */ .tandem-process.is-sequencing .sys-stage--1 .sys-connector { animation: connectorOrbitDraw .76s 5.08s ease-out forwards; } .tandem-process.is-sequencing .sys-stage--2 .sys-connector { animation: connectorOrbitDraw .76s 5.15s ease-out forwards; } .tandem-process.is-sequencing .sys-stage--3 .sys-connector { animation: connectorOrbitDraw .76s 5.22s ease-out forwards; } .tandem-process.is-sequencing .sys-stage--4 .sys-connector { animation: connectorOrbitDraw .76s 5.29s ease-out forwards; } .tandem-process.is-sequencing .sys-stage--5 .sys-connector { animation: connectorOrbitDraw .76s 5.36s ease-out forwards; } .tandem-process.is-sequencing .sys-stage--1 .sys-dock { animation: connectorDockResolve .22s 5.64s ease-out forwards; } .tandem-process.is-sequencing .sys-stage--2 .sys-dock { animation: connectorDockResolve .22s 5.71s ease-out forwards; } .tandem-process.is-sequencing .sys-stage--3 .sys-dock { animation: connectorDockResolve .22s 5.78s ease-out forwards; } .tandem-process.is-sequencing .sys-stage--4 .sys-dock { animation: connectorDockResolve .22s 5.85s ease-out forwards; } .tandem-process.is-sequencing .sys-stage--5 .sys-dock { animation: connectorDockResolve .22s 5.92s ease-out forwards; } /* Descriptor compartments remain physically part of the mount, but their actual content does not compete with the unfolding mechanism. */ .js .tandem-stage-detail__heading, .js .tandem-stage-detail > p { opacity: 0; transform: translateY(5px); } /* Neutralise the old early/sequential descriptor pulses. */ .tandem-process.is-sequencing .tandem-stage-detail--1, .tandem-process.is-sequencing .tandem-stage-detail--2, .tandem-process.is-sequencing .tandem-stage-detail--3, .tandem-process.is-sequencing .tandem-stage-detail--4, .tandem-process.is-sequencing .tandem-stage-detail--5 { animation: none; } /* Full mechanism rests first. Then all descriptor content resolves together. */ .tandem-process.is-sequencing .tandem-stage-detail__heading, .tandem-process.is-sequencing .tandem-stage-detail > p { animation: descriptorContentIn .48s 6.70s ease forwards; } /* After the content exists, the five compartments receive one quiet clockwise reading cue in the same order as the method. */ .tandem-process.is-sequencing .tandem-stage-detail--1 { animation: detailOrbitPulse .58s 7.28s ease; } .tandem-process.is-sequencing .tandem-stage-detail--2 { animation: detailOrbitPulse .58s 7.70s ease; } .tandem-process.is-sequencing .tandem-stage-detail--3 { animation: detailOrbitPulse .58s 8.12s ease; } .tandem-process.is-sequencing .tandem-stage-detail--4 { animation: detailOrbitPulse .58s 8.54s ease; } .tandem-process.is-sequencing .tandem-stage-detail--5 { animation: detailOrbitPulse .58s 8.96s ease; } @keyframes stageRackReveal { from { opacity: 0; } to { opacity: 1; } } @keyframes stageRackToOrbit { 0% { transform: translate(var(--stage-start-x), var(--stage-start-y)) scale(1); } 14% { transform: translate(var(--stage-start-x), var(--stage-start-y)) scale(1.07); } 100% { transform: translate(0, 0) scale(1); } } @keyframes connectorOrbitDraw { 0% { opacity: .12; stroke-dashoffset: 1; } 65% { opacity: .94; } 100% { opacity: .74; stroke-dashoffset: 0; } } @keyframes connectorDockResolve { 0% { opacity: 0; } 100% { opacity: .78; } } @keyframes descriptorContentIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } @keyframes detailOrbitPulse { 0%,100% { background-color: transparent; box-shadow: none; } 30%,72% { background-color: rgba(255,213,138,.11); box-shadow: inset 0 2px rgba(213,155,61,.48), inset 0 0 18px rgba(213,155,61,.04); } } /* If sequencing is not running, don't strand readable copy or instruments. */ html:not(.js) .sys-stage-orbit .sys-icon, html:not(.js) .tandem-stage-detail__heading, html:not(.js) .tandem-stage-detail > p { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .sys-stage-orbit .sys-icon, .js .tandem-stage-detail__heading, .js .tandem-stage-detail > p { opacity: 1 !important; transform: none !important; animation: none !important; } .js .sys-connector { opacity: .74 !important; stroke-dashoffset: 0 !important; animation: none !important; } .js .sys-dock { opacity: .78 !important; animation: none !important; } } /* ========================================================= DESCRIPTOR BAND REVEAL — ONE FIX ONLY Keep the complete five-step band out of view until the mechanism has finished and had its existing quiet rest. ========================================================= */ .js .tandem-stage-details { opacity: 0; visibility: hidden; transform: translateY(8px); } /* Existing mechanism: final connector/dock resolves at ~6.14s existing descriptor content begins at 6.70s -> reveal the complete physical band at the same 6.70s point. */ .tandem-process.is-sequencing .tandem-stage-details { animation: descriptorBandIn .42s 6.70s ease forwards; } @keyframes descriptorBandIn { 0% { opacity: 0; visibility: hidden; transform: translateY(8px); } 1% { visibility: visible; } 100% { opacity: 1; visibility: visible; transform: none; } } /* Accessibility / fallback: never leave the band hidden when motion is disabled or JavaScript is unavailable. */ html:not(.js) .tandem-stage-details { opacity: 1; visibility: visible; transform: none; } @media (prefers-reduced-motion: reduce) { .js .tandem-stage-details { opacity: 1 !important; visibility: visible !important; transform: none !important; animation: none !important; } } /* ========================================================= DESKTOP MOUNT SCALE TUNE — minus ~10% Tune desktop first only. Mobile/tablet breakpoints stay as-is. ========================================================= */ .tandem-system-board { width: min(100%, 1000px); min-height: 810px; } .tandem-system-mechanism { left: 6.2%; right: 6.2%; top: 4.6%; height: 612px; } .tandem-stage-details { left: clamp(1.35rem, 2.5vw, 2.3rem); right: clamp(1.35rem, 2.5vw, 2.3rem); bottom: clamp(2.3rem, 2.8vw, 2.6rem); } @media (max-width: 980px) { .tandem-system-board { width: min(100%, 860px); min-height: 0; } .tandem-system-mechanism { left: 4%; right: 4%; top: 5%; height: 520px; } } /* ========================================================= DESCRIPTORS BELOW MOUNT — 2026-08-17 The physical mount now contains only the mechanism. The five descriptors sit directly beneath it on an ivory strip. ========================================================= */ /* Remove the space that was previously reserved for the descriptor band inside the physical mount. */ .tandem-system-board { min-height: 760px; } /* The descriptor strip is now a separate supporting object beneath the mount. */ .tandem-stage-details { position: relative; z-index: 5; left: auto; right: auto; bottom: auto; width: min(100%, 1120px); margin: 1.5rem auto 0; background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.10)), #E8E1D6; border: 1px solid rgba(118,80,31,.18); border-radius: 7px; box-shadow: inset 0 1px rgba(255,255,255,.72), 0 12px 28px rgba(0,14,9,.10); } /* Keep the current centred copy treatment and compact height. */ .tandem-stage-detail { min-height: 96px; } /* Tablet/mobile keep the strip separate from the mount and simply reflow it. */ @media (max-width: 980px) { .tandem-system-board { min-height: 0; } .tandem-stage-details { width: min(100%, 860px); margin-top: 1.25rem; } } @media (max-width: 620px) { .tandem-stage-details { width: 100%; margin-top: 1rem; } } /* ========================================================= DESCRIPTORS — TRANSPARENT + IVORY COPY TEST ========================================================= */ .tandem-stage-details { background: transparent; border-color: rgba(214, 161, 75, .14); box-shadow: none; } .tandem-stage-detail, .tandem-stage-detail h3, .tandem-stage-detail__heading h3 { color: var(--ivory-100); } .tandem-stage-detail p { color: var(--stone-200); } /* ========================================================= DESCRIPTORS BACK ON MOUNT — FINAL OVERRIDE ========================================================= */ .tandem-system-board { min-height: 810px; } .tandem-stage-details { position: absolute; z-index: 5; left: clamp(1.35rem, 2.5vw, 2.3rem); right: clamp(1.35rem, 2.5vw, 2.3rem); bottom: clamp(3.2rem, 3.6vw, 3.5rem); width: auto; margin: 0; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06)), rgba(224,217,205,.46); border: 1px solid rgba(118,80,31,.18); border-radius: 7px; box-shadow: inset 0 1px rgba(255,255,255,.62); } .tandem-stage-detail, .tandem-stage-detail h3, .tandem-stage-detail__heading h3 { color: #173427; } .tandem-stage-detail p { color: #43695B; } /* Keep the existing tablet/mobile stacked behaviour. */ @media (max-width: 980px) { .tandem-system-board { min-height: 0; } .tandem-stage-details { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin-top: 1.5rem; } } @media (max-width: 620px) { .tandem-stage-details { margin-top: 1rem; } } .tandem-system-board { min-height: 770px; } .tandem-system-mechanism { transform: translateY(-20px); } .tandem-stage-details { bottom: 32px; } /* ========================================================= CENTRE BUILD + PHYSICAL SEAT — 2026-08-17 One sequence refinement only: quicker node start -> bridge -> ring -> centre seats -> ring settles. Stage rack/fan timings remain unchanged. ========================================================= */ /* Wrapper preserves the approved mark's exact SVG transform and geometry. */ .sys-approved-seat { transform-box: view-box; transform-origin: 500px 350px; } /* Start the Tandence idea sooner after the mount/glass/pins arrive. */ .tandem-process.is-sequencing .sys-node--human { animation: engineNodeIn .44s 1.46s ease-out forwards; } .tandem-process.is-sequencing .sys-node--tools { animation: engineNodeIn .44s 1.78s ease-out forwards; } .tandem-process.is-sequencing .sys-bridge { animation: bridgeDraw .48s 2.08s ease-out forwards; } .tandem-process.is-sequencing .sys-ring { animation: ringDraw .92s 2.42s cubic-bezier(.42,0,.25,1) forwards; } /* Once nodes + bridge + ring are formed, the complete centre object lowers a few pixels as if it seats onto the glass-mounted system. */ .tandem-process.is-sequencing .sys-approved-seat { animation: approvedMarkSeat .58s 3.34s cubic-bezier(.18,.72,.22,1) forwards; } @keyframes approvedMarkSeat { 0% { transform: translateY(0) scale(1); } 68% { transform: translateY(3px) scale(.996); } 100% { transform: translateY(0) scale(1); } } /* Reduced motion: keep the centre in its final seated position without the extra movement. */ @media (prefers-reduced-motion: reduce) { .sys-approved-seat { transform: none !important; animation: none !important; } .sys-ring { transform: none !important; } } /* ========================================================= EDITORIAL PAGE FLOW ========================================================= */ /* Why it works: statement left / supporting copy right. */ .tandem-why-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(320px, .68fr); column-gap: clamp(4rem, 9vw, 9rem); align-items: start; } .tandem-why-heading h2 { max-width: 620px; margin: 0; font-size: clamp(3.4rem, 6vw, 6.4rem); line-height: .94; letter-spacing: -.055em; } .tandem-why-copy { padding-top: clamp(4.2rem, 6vw, 6.2rem); } .tandem-why-copy p { max-width: 540px; margin: 0 0 1.4rem; color: var(--ivory-100); font-size: clamp(1.45rem, 1.9vw, 2rem); line-height: 1.28; letter-spacing: -.025em; } /* Outcome: centred page moment with sage final line. */ .tandem-page-invitation-inner { max-width: 1180px; margin-inline: auto; text-align: center; } .tandem-page-invitation-inner .eyebrow { text-align: center; } .tandem-page-invitation-inner h2 { max-width: 1180px; margin: 0 auto; text-align: center; font-size: clamp(3.6rem, 6.4vw, 7rem); line-height: .96; letter-spacing: -.055em; white-space: nowrap; } .tandem-page-invitation-inner h2 span { color: var(--sage-300, #93A58F); } /* ========================================================= APPROACH HERO Five Stages. One Approach. Supporting statement sits top-right with deliberate breathing room. ========================================================= */ .tandem-page-hero-inner { max-width: 1120px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .58fr); column-gap: clamp(4rem, 9vw, 9rem); align-items: start; } .tandem-page-hero-copy { min-width: 0; } .tandem-page-hero h1 { max-width: 760px; } .tandem-page-hero-support { padding-top: 1.8rem; padding-bottom: 0; } .tandem-page-hero-support p { margin: 0; color: var(--ivory-100); font-size: clamp(2rem, 2.7vw, 2.9rem); line-height: 1.18; letter-spacing: -.035em; } /* The old standalone intro has been removed from the HTML. */ .tandem-intro { display: none; } /* ========================================================= RESPONSIVE EDITORIAL FLOW ========================================================= */ @media (max-width: 820px) { .tandem-page-invitation-inner h2 { white-space: normal; } .tandem-page-hero-inner, .tandem-why-grid { grid-template-columns: minmax(0, .82fr) minmax(360px, .78fr); row-gap: 2.4rem; } .tandem-page-hero-support, .tandem-why-copy { padding-top: 0; } .tandem-why-heading h2, .tandem-why-copy p { text-wrap: pretty; max-width: 100%; } } /* ========================================================= FIVE STAGE DESCRIPTORS — FLOATING ON MOUNT Remove the card/band treatment only. ========================================================= */ .tandem-stage-details { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } .tandem-stage-detail { border-right: 0; background: transparent; } /* ========================================================= DESCRIPTORS — AUTHORITATIVE ALIGNMENT One source of truth. No centring/grid/translateX experiments. ========================================================= */ .tandem-system-board { width: min(100%, 940px); min-height: 690px; } .tandem-stage-details { bottom: 32px; } .tandem-stage-detail { min-height: 96px; padding: .72rem .82rem .68rem; text-align: left; } .tandem-stage-detail__heading { display: flex; align-items: center; justify-content: flex-start; gap: .55rem; min-height: 30px; margin-bottom: .32rem; padding-inline: 0; position: static; } .tandem-stage-detail__heading img { position: static; flex: 0 0 29px; width: 29px; height: 29px; margin: 0; } .tandem-stage-detail__heading h3 { margin: 0; text-align: left; transform: none; } /* Align each sentence under its heading text. margin-left is used instead of transform so the reveal animation cannot overwrite the optical alignment. */ .tandem-stage-detail > p { width: auto; margin: 0 0 0 36px; text-align: left; white-space: nowrap; transform: none; } /* Build uses the available gap to its right as one complete unit. */ .tandem-stage-detail--4 { transform: translateX(18px); } .tandem-stage-detail--4 > p { margin-left: 36px; } /* Empower heading stays put; only its sentence moves slightly right. */ .tandem-stage-detail--5 > p { margin-left: 56px; } /* ========================================================= DESCRIPTORS — CENTRED RESET Remove all per-item nudges and centre each stage cleanly. ========================================================= */ .tandem-stage-detail { transform: none; text-align: center; } .tandem-stage-detail__heading { display: flex; align-items: center; justify-content: center; gap: .55rem; padding-inline: 0; } .tandem-stage-detail__heading img { position: static; flex: 0 0 29px; width: 29px; height: 29px; margin: 0; } .tandem-stage-detail__heading h3 { margin: 0; text-align: center; transform: none; } .tandem-stage-detail > p, .tandem-stage-detail--4 > p, .tandem-stage-detail--5 > p { width: 100%; margin: 0 auto; text-align: center; white-space: normal; transform: none; } /* ========================================================= TIGHTER ORBIT + STRAIGHT CONNECTORS — 2026-08-17 Geometry is in the master SVG. Labels/descriptors remain untouched. ========================================================= */ .js .sys-connector { stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; } .sys-dock { display: none; } /* ========================================================= GLASS MATERIAL REFINEMENT — NODE MATERIAL LANGUAGE 2026-08-17 Glass only: borrow the same optical cues as the medallion nodes — bright crown highlight, darker refracted edge, inner ring and contact shadow. ========================================================= */ .tandem-board-glass { inset: 16px; border-radius: 7px; border: 1px solid rgba(255,255,255,.92); /* Keep the centre clear; let the edge construction sell the material. */ background: linear-gradient( 145deg, rgba(255,255,255,.115) 0%, rgba(245,250,248,.055) 34%, rgba(223,233,229,.028) 68%, rgba(255,255,255,.07) 100% ); /* Node-like optical depth: bright top/left crown + darker bottom/right refraction + raised contact shadow. */ box-shadow: inset 0 4px 0 rgba(255,255,255,.96), inset 4px 0 0 rgba(255,255,255,.54), inset 0 -3px 0 rgba(112,104,92,.20), inset -3px 0 0 rgba(105,98,87,.12), inset 0 0 0 2px rgba(255,255,255,.20), 0 2px 1px rgba(255,255,255,.72), 0 5px 7px rgba(72,58,39,.12), 0 14px 24px rgba(42,34,24,.11); backdrop-filter: saturate(1.035) contrast(1.015); -webkit-backdrop-filter: saturate(1.035) contrast(1.015); } /* Secondary inner refraction line — rectangular equivalent of the node's inner glass ring. */ .tandem-board-glass::after { content: ""; position: absolute; inset: 6px; border-radius: 5px; border: 1px solid rgba(255,255,255,.58); box-shadow: inset 0 2px 0 rgba(255,255,255,.48), inset 2px 0 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(95,89,79,.10), inset -1px 0 0 rgba(95,89,79,.06); pointer-events: none; } .tandem-board-glass-highlight { inset: 16px; } /* Concentrated glossy crown highlight, echoing the bright upper-left highlight on the nodes. */ .tandem-board-glass-highlight::before { content: ""; position: absolute; width: 48%; height: 34%; left: 4%; top: 2%; border-radius: 50%; transform: rotate(-12deg); opacity: .82; background: radial-gradient( ellipse at 34% 26%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.34) 18%, rgba(255,255,255,.12) 38%, rgba(255,255,255,.035) 58%, rgba(255,255,255,0) 76% ); } /* Fainter lower-right internal reflection gives the sheet body without frosting it. */ .tandem-board-glass-highlight::after { content: ""; position: absolute; width: 34%; height: 46%; right: 1%; bottom: 0; border-radius: 50%; transform: rotate(14deg); opacity: .48; background: radial-gradient( ellipse at 62% 60%, rgba(255,255,255,.22) 0%, rgba(255,255,255,.075) 34%, rgba(255,255,255,.018) 56%, rgba(255,255,255,0) 74% ); } /* ========================================================= DESCRIPTOR EMPHASIS — PREMIUM SAGE RESOLVE 2026-08-18 Stronger but still restrained: icon halo + clearer sage heading shift. Existing sequence timing and stagger are retained. ========================================================= */ /* Keep the old panel pulse fully neutralised. */ @keyframes detailOrbitPulse { 0%, 100% { background-color: transparent; box-shadow: none; } } /* Icon wakes first with a broader, softer sage aura. */ @keyframes descriptorIconResolve { 0%, 100% { transform: scale(1); filter: none; } 30%, 72% { transform: scale(1.075); filter: drop-shadow(0 2px 6px rgba(82,103,89,.24)) drop-shadow(0 0 10px rgba(147,165,143,.28)) brightness(1.045); } } /* Heading now moves clearly into the Tandence sage family, then returns. */ @keyframes descriptorHeadingResolve { 0%, 100% { color: #173427; text-shadow: none; } 30%, 72% { color: #526759; text-shadow: 0 1px 0 rgba(255,255,255,.18); } } /* Preserve the existing clockwise timing exactly. */ .tandem-process.is-sequencing .tandem-stage-detail--1 .tandem-stage-detail__heading img, .tandem-process.is-sequencing .tandem-stage-detail--1 .tandem-stage-detail__heading h3 { animation-delay: 7.28s; } .tandem-process.is-sequencing .tandem-stage-detail--2 .tandem-stage-detail__heading img, .tandem-process.is-sequencing .tandem-stage-detail--2 .tandem-stage-detail__heading h3 { animation-delay: 7.70s; } .tandem-process.is-sequencing .tandem-stage-detail--3 .tandem-stage-detail__heading img, .tandem-process.is-sequencing .tandem-stage-detail--3 .tandem-stage-detail__heading h3 { animation-delay: 8.12s; } .tandem-process.is-sequencing .tandem-stage-detail--4 .tandem-stage-detail__heading img, .tandem-process.is-sequencing .tandem-stage-detail--4 .tandem-stage-detail__heading h3 { animation-delay: 8.54s; } .tandem-process.is-sequencing .tandem-stage-detail--5 .tandem-stage-detail__heading img, .tandem-process.is-sequencing .tandem-stage-detail--5 .tandem-stage-detail__heading h3 { animation-delay: 8.96s; } .tandem-process.is-sequencing .tandem-stage-detail__heading img { animation-name: descriptorIconResolve; animation-duration: .72s; animation-timing-function: ease; } .tandem-process.is-sequencing .tandem-stage-detail__heading h3 { animation-name: descriptorHeadingResolve; animation-duration: .72s; animation-timing-function: ease; } @media (prefers-reduced-motion: reduce) { .tandem-process.is-sequencing .tandem-stage-detail__heading img, .tandem-process.is-sequencing .tandem-stage-detail__heading h3 { animation: none !important; } } /* ========================================================= MASTER INTEGRATED SVG REBUILD — 2026-08-18 Corrective pass: - smaller square mount - soft-square glass - centre-to-centre braid geometry in one SVG coordinate system - connectors hidden beneath centre + medallion hardware - connector reveal happens only after all five medallions have seated ========================================================= */ /* Keep the square idea, but return the object to the previous visual footprint. */ .tandem-system-board { width: min(100%, 820px); aspect-ratio: 1 / 1; min-height: 0; } .tandem-board-surface { border-radius: 7px; } .tandem-board-glass, .tandem-board-glass-highlight { inset: 16px; border-radius: 18px; } .tandem-board-glass::after { border-radius: 14px; } /* Mechanism is scaled to the smaller square rather than enlarging with it. */ .tandem-system-mechanism { left: 5.25%; right: 5.25%; top: 3.9%; height: 565px; transform: none; } /* Locked descriptor placement/treatment retained, only fitted to the smaller square. */ .tandem-stage-details { left: 22px; right: 22px; bottom: 72px; } /* One physical living-braid system. All paths use the same centre/stage coordinates as the hardware itself. */ .js .sys-connector { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; } .js .sys-connector-base--brass { stroke: #76501F; stroke-width: 1.86; } .js .sys-connector-wire--brass { stroke: url(#filamentBrass); stroke-width: 1.15; } .js .sys-connector-base--sage { stroke: #31493D; stroke-width: 1.72; } .js .sys-connector-wire--sage { stroke: url(#filamentSage); stroke-width: 1.06; } .sys-connector-layer { filter: drop-shadow(0 1.3px .9px rgba(24,49,39,.12)); } /* Remove legacy connector dock dots. */ .sys-dock { display: none !important; } /* IMPORTANT: The five medallions finish their staggered fan at ~6.63s. Only then does the braid resolve, so the animation reads as one system: centre -> medallions seat -> connections stitch the system together -> descriptors. */ .tandem-process.is-sequencing .sys-stage--1 .sys-connector { animation: connectorMasterDraw .66s 6.68s ease-out forwards; } .tandem-process.is-sequencing .sys-stage--2 .sys-connector { animation: connectorMasterDraw .66s 6.75s ease-out forwards; } .tandem-process.is-sequencing .sys-stage--3 .sys-connector { animation: connectorMasterDraw .66s 6.82s ease-out forwards; } .tandem-process.is-sequencing .sys-stage--4 .sys-connector { animation: connectorMasterDraw .66s 6.89s ease-out forwards; } .tandem-process.is-sequencing .sys-stage--5 .sys-connector { animation: connectorMasterDraw .66s 6.96s ease-out forwards; } @keyframes connectorMasterDraw { 0% { opacity:.08; stroke-dashoffset:1; } 62% { opacity:.96; } 100% { opacity:.92; stroke-dashoffset:0; } } /* Tandem jewel resolves after its own braid is present, then catches once. */ .js .sys-jewel-bud { opacity: 0; transform-box: fill-box; transform-origin: center; } .tandem-process.is-sequencing .sys-jewel-bud { animation: jewelBudResolve .30s 7.28s ease-out forwards; } .js .sys-jewel-glint { opacity: 0; transform-box: fill-box; transform-origin: center; } .tandem-process.is-sequencing .sys-jewel-glint { animation: jewelCatch .38s 7.43s ease-out forwards; } @keyframes jewelBudResolve { from { opacity:0; transform:scale(.68); } to { opacity:1; transform:scale(1); } } @keyframes jewelCatch { 0% { opacity:.10; transform:scale(.72); } 42% { opacity:1; transform:scale(1.35); } 100% { opacity:.92; transform:scale(1); } } /* Descriptor reveal follows the completed physical system. Visual treatment itself remains the locked Tandence sage emphasis. */ .tandem-process.is-sequencing .tandem-stage-details { animation: descriptorBandIn .42s 7.82s ease forwards; } .tandem-process.is-sequencing .tandem-stage-detail__heading, .tandem-process.is-sequencing .tandem-stage-detail > p { animation: descriptorContentIn .48s 7.82s ease forwards; } /* Preserve the locked clockwise emphasis, shifted only in time. */ .tandem-process.is-sequencing .tandem-stage-detail--1 .tandem-stage-detail__heading img, .tandem-process.is-sequencing .tandem-stage-detail--1 .tandem-stage-detail__heading h3 { animation-delay:8.40s; } .tandem-process.is-sequencing .tandem-stage-detail--2 .tandem-stage-detail__heading img, .tandem-process.is-sequencing .tandem-stage-detail--2 .tandem-stage-detail__heading h3 { animation-delay:8.82s; } .tandem-process.is-sequencing .tandem-stage-detail--3 .tandem-stage-detail__heading img, .tandem-process.is-sequencing .tandem-stage-detail--3 .tandem-stage-detail__heading h3 { animation-delay:9.24s; } .tandem-process.is-sequencing .tandem-stage-detail--4 .tandem-stage-detail__heading img, .tandem-process.is-sequencing .tandem-stage-detail--4 .tandem-stage-detail__heading h3 { animation-delay:9.66s; } .tandem-process.is-sequencing .tandem-stage-detail--5 .tandem-stage-detail__heading img, .tandem-process.is-sequencing .tandem-stage-detail--5 .tandem-stage-detail__heading h3 { animation-delay:10.08s; } @media (max-width:980px) { .tandem-system-board { width:min(100%,780px); aspect-ratio:auto; min-height:760px; } .tandem-system-mechanism { left:4%; right:4%; top:4%; height:520px; } } @media (max-width:620px) { .tandem-system-board { width:100%; aspect-ratio:auto; min-height:0; } .tandem-board-surface { position:relative; min-height:560px; } .tandem-system-mechanism { height:420px; } .tandem-stage-details { position:relative; left:auto; right:auto; bottom:auto; margin-top:1rem; } } @media (prefers-reduced-motion:reduce) { .js .sys-connector { opacity:.92 !important; stroke-dashoffset:0 !important; animation:none !important; } .js .sys-jewel-bud, .js .sys-jewel-glint { opacity:1 !important; transform:none !important; animation:none !important; } } /* ========================================================= VISIBLE JEWELLERY WEAVE — 2026-08-18 One refinement only: brass + sage now visibly alternate over/under at crossings. Existing mount, glass, animation timing, descriptors and endpoints retained. ========================================================= */ /* Slightly stronger visual separation between the two filaments. */ .js .sys-connector-base--brass { stroke-width: 1.92; } .js .sys-connector-wire--brass { stroke-width: 1.15; } .js .sys-connector-base--sage { stroke-width: 1.78; } .js .sys-connector-wire--sage { stroke-width: 1.06; } /* At each crossing, first clear a tiny visual channel through the strand underneath, then redraw the upper filament with a polished highlight. This creates a real jewellery over/under read instead of two parallel waves. */ .sys-weave-gap, .sys-weave-over { fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .sys-weave-gap { stroke: #F2ECE2; stroke-width: 3.15; opacity: .82; } .sys-weave-over--brass { stroke: url(#filamentBrass); stroke-width: 1.32; filter: drop-shadow(0 1px .7px rgba(84,52,18,.22)); } .sys-weave-over--sage { stroke: url(#filamentSage); stroke-width: 1.24; filter: drop-shadow(0 1px .7px rgba(35,58,48,.22)); } /* Tiny specular lift on the strand that is currently above. */ .sys-weave-over { opacity: .98; } /* Keep weave overlays hidden until their parent connector has resolved. They appear with the same stage timing rather than as a separate animation. */ .js .sys-weave-crossings { opacity: 0; } .tandem-process.is-sequencing .sys-stage--1 .sys-weave-crossings { animation: weaveCrossingsIn .12s 7.22s ease-out forwards; } .tandem-process.is-sequencing .sys-stage--2 .sys-weave-crossings { animation: weaveCrossingsIn .12s 7.29s ease-out forwards; } .tandem-process.is-sequencing .sys-stage--3 .sys-weave-crossings { animation: weaveCrossingsIn .12s 7.36s ease-out forwards; } .tandem-process.is-sequencing .sys-stage--4 .sys-weave-crossings { animation: weaveCrossingsIn .12s 7.43s ease-out forwards; } .tandem-process.is-sequencing .sys-stage--5 .sys-weave-crossings { animation: weaveCrossingsIn .12s 7.50s ease-out forwards; } @keyframes weaveCrossingsIn { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .js .sys-weave-crossings { opacity: 1 !important; animation: none !important; } } /* ========================================================= CLEAN MASTER MECHANISM — 2026-08-18 Isolated namespace: tm-* Mount, glass panel, board sizing and descriptor layout above remain untouched. Centre is permanently fixed. No seating transform. ========================================================= */ .tm-master-mechanism { overflow: visible; } /* ----- centre formation ----- */ .js .tm-node { opacity: 0; transform: translateY(-5px) scale(.82); transform-box: fill-box; transform-origin: center; } .js .tm-bridge-shadow, .js .tm-bridge-stroke, .js .tm-bridge-highlight, .js .tm-bridge-lowlight, .js .tm-ring-stroke { stroke-dasharray: 1; stroke-dashoffset: 1; } .js .tm-ring-shadow { opacity: 0; } .js .tm-studio-finish { opacity: 0; transform: scale(.985); transform-box: fill-box; transform-origin: center; filter: blur(1.25px); pointer-events: none; } .tandem-process.is-sequencing .tm-node--human { animation: tmNodeIn .44s 1.26s ease-out forwards, tmStudioVectorOut .42s 3.5s ease forwards; } .tandem-process.is-sequencing .tm-node--tools { animation: tmNodeIn .44s 1.78s ease-out forwards, tmStudioVectorOut .42s 3.5s ease forwards; } .tandem-process.is-sequencing .tm-bridge-shadow, .tandem-process.is-sequencing .tm-bridge-stroke, .tandem-process.is-sequencing .tm-bridge-highlight, .tandem-process.is-sequencing .tm-bridge-lowlight { animation: tmStrokeDraw .48s 2.08s ease-out forwards; } .tandem-process.is-sequencing .tm-ring-stroke { animation: tmStrokeDraw .92s 2.42s cubic-bezier(.42,0,.25,1) forwards; } .tandem-process.is-sequencing .tm-ring-shadow { animation: tmShadowIn .34s 3.00s ease forwards, tmStudioVectorOut .42s 3.5s ease forwards; } .tandem-process.is-sequencing .tm-ring-face, .tandem-process.is-sequencing .tm-bridge { animation: tmStudioVectorOut .42s 3.5s ease forwards; } .tandem-process.is-sequencing .tm-studio-finish { animation: tmStudioFinishIn .62s 3.42s cubic-bezier(.22,.61,.36,1) forwards; } @keyframes tmStudioFinishIn { from { opacity:0; transform:scale(.985); filter:blur(1.25px); } to { opacity:1; transform:scale(1); filter:blur(0); } } @keyframes tmStudioVectorOut { to { opacity:0; } } /* ----- fan / stage medallions ----- */ .tm-stage-layer { pointer-events: none; } .js .tm-stage-mover { opacity: 0; transform: translate(var(--tm-sx), var(--tm-sy)) scale(.86); transform-box: fill-box; transform-origin: center; will-change: transform, opacity; } .tm-stage-medallion { filter: drop-shadow(0 5px 8px rgba(74,53,25,.17)); } .tandem-process.is-sequencing .tm-stage-mover { animation: tmRackReveal .30s 4.18s ease-out forwards; } .tandem-process.is-sequencing .tm-stage-mover--1 { animation: tmRackReveal .30s 4.18s ease-out forwards, tmRackToOrbit .98s 5.05s cubic-bezier(.2,.72,.22,1) forwards; } .tandem-process.is-sequencing .tm-stage-mover--2 { animation: tmRackReveal .30s 4.18s ease-out forwards, tmRackToOrbit .98s 5.20s cubic-bezier(.2,.72,.22,1) forwards; } .tandem-process.is-sequencing .tm-stage-mover--3 { animation: tmRackReveal .30s 4.18s ease-out forwards, tmRackToOrbit .98s 5.35s cubic-bezier(.2,.72,.22,1) forwards; } .tandem-process.is-sequencing .tm-stage-mover--4 { animation: tmRackReveal .30s 4.18s ease-out forwards, tmRackToOrbit .98s 5.50s cubic-bezier(.2,.72,.22,1) forwards; } .tandem-process.is-sequencing .tm-stage-mover--5 { animation: tmRackReveal .30s 4.18s ease-out forwards, tmRackToOrbit .98s 5.65s cubic-bezier(.2,.72,.22,1) forwards; } /* ----- one physical jewellery connection system ----- */ .tm-connector-layer { pointer-events: none; filter: drop-shadow(0 1.3px .9px rgba(24,49,39,.12)); } .js .tm-wire { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; } .tm-wire-base--brass { stroke:#76501F; stroke-width:1.92; } .tm-wire-top--brass { stroke:url(#tmFilamentBrass); stroke-width:1.15; } .tm-wire-base--sage { stroke:#31493D; stroke-width:1.78; } .tm-wire-top--sage { stroke:url(#tmFilamentSage); stroke-width:1.06; } .tandem-process.is-sequencing .tm-connector--1 .tm-wire { animation:tmConnectorDraw .66s 6.68s ease-out forwards; } .tandem-process.is-sequencing .tm-connector--2 .tm-wire { animation:tmConnectorDraw .66s 6.75s ease-out forwards; } .tandem-process.is-sequencing .tm-connector--3 .tm-wire { animation:tmConnectorDraw .66s 6.82s ease-out forwards; } .tandem-process.is-sequencing .tm-connector--4 .tm-wire { animation:tmConnectorDraw .66s 6.89s ease-out forwards; } .tandem-process.is-sequencing .tm-connector--5 .tm-wire { animation:tmConnectorDraw .66s 6.96s ease-out forwards; } /* alternating over / under jewellery crossings */ .tm-weave-gap, .tm-weave-over { fill:none; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; } .tm-weave-gap { stroke:#F2ECE2; stroke-width:3.15; opacity:.82; } .tm-weave-over--brass { stroke:url(#tmFilamentBrass); stroke-width:1.32; filter:drop-shadow(0 1px .7px rgba(84,52,18,.22)); } .tm-weave-over--sage { stroke:url(#tmFilamentSage); stroke-width:1.24; filter:drop-shadow(0 1px .7px rgba(35,58,48,.22)); } .tm-weave-over { opacity:.98; } .js .tm-weave-crossings { opacity:0; } .tandem-process.is-sequencing .tm-connector--1 .tm-weave-crossings { animation:tmCrossingsIn .12s 7.22s ease-out forwards; } .tandem-process.is-sequencing .tm-connector--2 .tm-weave-crossings { animation:tmCrossingsIn .12s 7.29s ease-out forwards; } .tandem-process.is-sequencing .tm-connector--3 .tm-weave-crossings { animation:tmCrossingsIn .12s 7.36s ease-out forwards; } .tandem-process.is-sequencing .tm-connector--4 .tm-weave-crossings { animation:tmCrossingsIn .12s 7.43s ease-out forwards; } .tandem-process.is-sequencing .tm-connector--5 .tm-weave-crossings { animation:tmCrossingsIn .12s 7.50s ease-out forwards; } /* tiny Tandem jewel, one catch only */ .js .tm-jewel-bud { opacity:0; transform-box:fill-box; transform-origin:center; } .js .tm-jewel-glint { opacity:0; transform-box:fill-box; transform-origin:center; } .tandem-process.is-sequencing .tm-jewel-bud { animation:tmJewelResolve .30s 7.28s ease-out forwards; } .tandem-process.is-sequencing .tm-jewel-glint { animation:tmJewelCatch .38s 7.43s ease-out forwards; } /* ----- motion ----- */ @keyframes tmNodeIn { 0% { opacity:0; transform:translateY(-5px) scale(.82); } 75% { opacity:1; transform:translateY(1px) scale(1.03); } 100% { opacity:1; transform:none; } } @keyframes tmStrokeDraw { to { stroke-dashoffset:0; } } @keyframes tmShadowIn { to { opacity:1; } } @keyframes tmRackReveal { 0% { opacity:0; transform:translate(var(--tm-sx),var(--tm-sy)) scale(.86); } 100% { opacity:1; transform:translate(var(--tm-sx),var(--tm-sy)) scale(1); } } @keyframes tmRackToOrbit { 0% { opacity:1; transform:translate(var(--tm-sx),var(--tm-sy)) scale(1); } 76% { opacity:1; transform:translate(0,0) scale(1.035); } 100% { opacity:1; transform:none; } } @keyframes tmConnectorDraw { 0% { opacity:.08; stroke-dashoffset:1; } 62% { opacity:.96; } 100% { opacity:.92; stroke-dashoffset:0; } } @keyframes tmCrossingsIn { to { opacity:1; } } @keyframes tmJewelResolve { from { opacity:0; transform:scale(.68); } to { opacity:1; transform:scale(1); } } @keyframes tmJewelCatch { 0% { opacity:.10; transform:scale(.72); } 42% { opacity:1; transform:scale(1.35); } 100% { opacity:.92; transform:scale(1); } } @media (prefers-reduced-motion:reduce) { .js .tm-node, .js .tm-stage-mover, .js .tm-ring-shadow, .js .tm-jewel-bud, .js .tm-jewel-glint, .js .tm-weave-crossings { opacity:1 !important; transform:none !important; animation:none !important; } .js .tm-ring-stroke, .js .tm-bridge-shadow, .js .tm-bridge-stroke, .js .tm-bridge-highlight, .js .tm-bridge-lowlight, .js .tm-wire { opacity:.92 !important; stroke-dashoffset:0 !important; animation:none !important; } } /* ========================================================= RESPONSIVE GROWING MOUNT — TEST — 2026-08-18 The mechanism keeps its approved size and geometry. Only the physical mount/glass/pins scale around the centre mark, then expand as the five stage medallions join the system. Final state is the existing approved 820px mount. ========================================================= */ @media (min-width: 981px) { /* Keep the centre ring visually anchored while the mount changes size. 38.5% corresponds closely to the fixed centre mark's vertical position inside the approved 820px board. */ .js .tandem-board-surface { transform-origin: 50% 38.5%; will-change: transform, opacity; } /* Replace only the mount's old one-shot entrance animation. The mount arrives compact, stays compact while the centre idea forms, then makes room progressively as the five stages fan into place. */ .tandem-process.is-sequencing .tandem-board-surface { animation: tandemResponsiveMount 6.62s .10s linear forwards; } @keyframes tandemResponsiveMount { /* Physical mount arrives at a scale appropriate to the centre mark alone. */ 0% { opacity: 0; transform: translateY(28px) scale(.64); } 9% { opacity: 1; transform: translateY(0) scale(.64); } /* Human + tools + bridge + ring form while the mount stays intimate. */ 61% { opacity: 1; transform: translateY(0) scale(.64); } /* Five gentle expansions, timed to the staggered stage fan. */ 73% { transform: translateY(0) scale(.70); } 77% { transform: translateY(0) scale(.76); } 81% { transform: translateY(0) scale(.83); } 86% { transform: translateY(0) scale(.90); } 92% { transform: translateY(0) scale(.96); } /* All five stages are seated: return to the exact approved final mount. */ 100% { opacity: 1; transform: none; } } } /* Accessibility: motion-off users see the approved final state immediately. */ @media (prefers-reduced-motion: reduce) { .js .tandem-board-surface { opacity: 1 !important; transform: none !important; animation: none !important; } } /* ========================================================= APPROACH SECTION FLOW — remove horizontal chapter rules The other Tandence pages use open space rather than hard dividers. ========================================================= */ .tandem-process { border-top: 0; border-bottom: 0; } /* ========================================================= APPROACH — MOBILE-ONLY FINAL PASS — 2026-08-18 Desktop/tablet rules above remain untouched. Fixes: 1. hero and "Why it works" stack cleanly 2. mounted mechanism becomes a deliberate mobile object 3. stage descriptors become readable below the mount 4. mount grows subtly as the system is assembled ========================================================= */ @media (max-width: 620px) { /* ---------- HERO ---------- */ .tandem-page-main { overflow-x: clip; } .tandem-page-hero { min-height: auto; padding: 5.25rem 0 6.5rem; } .tandem-page-hero-inner { display: grid; grid-template-columns: 1fr; row-gap: 2.1rem; max-width: none; } .tandem-page-hero-copy, .tandem-page-hero-support { min-width: 0; width: 100%; } .tandem-page-hero h1 { max-width: 100%; font-size: clamp(4.15rem, 20.5vw, 5.65rem); line-height: .91; letter-spacing: -.06em; } .tandem-page-hero-support { padding: 0; } .tandem-page-hero-support p { max-width: 15ch; font-size: clamp(1.65rem, 8vw, 2.05rem); line-height: 1.16; } /* ---------- MOBILE MOUNT ---------- */ .tandem-process { padding-top: 1rem; padding-bottom: 5.5rem; } .tandem-system-wrap { width: 100%; } .tandem-system-board { width: min(calc(100vw - 40px), 390px); min-height: 0; margin-inline: auto; padding: 0; } /* Make the physical board a compact square instead of the tall desktop-derived panel. */ .tandem-board-surface { position: relative; width: 100%; min-height: 0 !important; aspect-ratio: 1 / 1; margin: 0 auto; transform-origin: 50% 50%; } .tandem-board-glass, .tandem-board-glass-highlight { inset: 10px; } .tandem-board-pin { width: 7px; } .tandem-board-pin--tl { top: 18px; left: 18px; } .tandem-board-pin--tr { top: 18px; right: 18px; } .tandem-board-pin--bl { bottom: 18px; left: 18px; } .tandem-board-pin--br { bottom: 18px; right: 18px; } /* Keep the approved 1000x700 mechanism intact; only fit its viewport comfortably inside the new mobile square. */ .tandem-system-mechanism { position: absolute; left: 5%; right: 5%; top: 7%; height: 62%; transform: none; } /* ---------- MOBILE DESCRIPTORS ---------- */ .tandem-stage-details { position: relative; left: auto; right: auto; bottom: auto; width: min(calc(100vw - 40px), 390px); margin: 1.75rem auto 0; display: grid; grid-template-columns: 1fr; gap: 0; background: transparent; border: 0; box-shadow: none; overflow: visible; } .tandem-stage-detail { min-height: 0; padding: .95rem 0 1rem; border-right: 0; border-bottom: 1px solid rgba(226,185,111,.12); text-align: left; } .tandem-stage-detail:last-child { border-bottom: 0; } .tandem-stage-detail__heading { gap: .7rem; margin-bottom: .32rem; } .tandem-stage-detail__heading img { width: 30px; height: 30px; flex-basis: 30px; } .tandem-stage-detail h3, .tandem-stage-detail__heading h3 { color: var(--ivory-100); font-size: 1.08rem; } .tandem-stage-detail p { margin-left: 2.55rem; color: #6F9184; font-size: .92rem; line-height: 1.48; } /* ---------- WHY IT WORKS ---------- */ .tandem-why-grid { display: grid; grid-template-columns: 1fr; row-gap: 2rem; column-gap: 0; } .tandem-why-heading, .tandem-why-copy { min-width: 0; width: 100%; } .tandem-why-heading h2 { max-width: 8.5ch; font-size: clamp(3.7rem, 17vw, 5.15rem); line-height: .92; } .tandem-why-copy { padding-top: 0; } .tandem-why-copy p { max-width: 28ch; margin-bottom: 1.15rem; font-size: clamp(1.28rem, 6.2vw, 1.65rem); line-height: 1.32; } /* ---------- MOBILE MOUNT GROWTH ---------- Desktop keeps its existing 64% -> 100% sequence. Mobile uses a quieter 82% -> 100% expansion so the object feels alive without swelling dramatically in a narrow viewport. */ .js .tandem-board-surface { transform-origin: 50% 50%; will-change: transform, opacity; } .tandem-process.is-sequencing .tandem-board-surface { animation: tandemResponsiveMountMobile 6.62s .10s linear forwards; } @keyframes tandemResponsiveMountMobile { 0% { opacity: 0; transform: translateY(18px) scale(.82); } 9% { opacity: 1; transform: translateY(0) scale(.82); } 61% { opacity: 1; transform: translateY(0) scale(.82); } 73% { transform: scale(.86); } 77% { transform: scale(.89); } 81% { transform: scale(.92); } 86% { transform: scale(.95); } 92% { transform: scale(.98); } 100% { opacity: 1; transform: none; } } } @media (max-width: 620px) and (prefers-reduced-motion: reduce) { .js .tandem-board-surface { opacity: 1 !important; transform: none !important; animation: none !important; } } /* ========================================================= APPROACH MOBILE — MECHANISM ANCHOR CORRECTION The descriptor list makes .tandem-system-board taller than the square mount. Percentage top/height values therefore positioned the mechanism against the combined board + descriptor height. Anchor the mechanism using the mount WIDTH instead. ========================================================= */ @media (max-width: 620px) { .tandem-system-mechanism { left: 0; right: 0; top: clamp(22px, 7vw, 28px); width: 100%; height: min(calc((100vw - 40px) * .70), 273px); transform: none; } .tandem-mechanism-svg { width: 100%; height: 100%; } } /* ========================================================= APPROACH — FINAL SPACING + MOBILE DESCRIPTOR ALIGNMENT 2026-08-18 ========================================================= */ /* Bring the process mount closer to the hero copy on larger screens too, without changing the locked hero or mount dimensions. */ .tandem-page-hero { padding-bottom: clamp(4.5rem, 7vw, 6.5rem); } .tandem-process { padding-top: clamp(1rem, 2vw, 1.75rem); } @media (max-width: 620px) { /* Mobile: close the large pause between supporting statement and mount. */ .tandem-page-hero { padding-bottom: 3.4rem; } .tandem-process { padding-top: .35rem; } /* Make the five descriptors more confident and consistently left-aligned. */ .tandem-stage-details { width: min(calc(100vw - 40px), 390px); margin-top: 1.55rem; } .tandem-stage-detail { padding: 1.1rem 0 1.15rem; } .tandem-stage-detail__heading { display: grid; grid-template-columns: 34px 1fr; column-gap: .72rem; align-items: center; margin-bottom: .42rem; } .tandem-stage-detail__heading img { width: 32px; height: 32px; flex-basis: auto; } .tandem-stage-detail h3, .tandem-stage-detail__heading h3 { margin: 0; font-size: 1.22rem; line-height: 1.15; } /* Text starts directly beneath the first letter of each title: 34px icon + .72rem gap = same left edge as heading text. */ .tandem-stage-detail p { margin: 0 0 0 calc(34px + .72rem); font-size: 1rem; line-height: 1.5; } } /* ========================================================= APPROACH MOBILE — COMPACT FIVE-STAGE ROWS + LARGER VISUAL 2026-08-18 Mobile only. Desktop remains untouched. ========================================================= */ @media (max-width: 620px) { /* Let the mechanism read a little larger inside the square mount. */ .tandem-system-mechanism { left: -3%; right: -3%; top: 5%; width: auto; height: min(calc((100vw - 40px) * .72), 281px); } /* Five stages are now supporting rows, not a second large section. */ .tandem-stage-details { margin-top: 1.2rem; } .tandem-stage-detail { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: .9rem; align-items: center; padding: .88rem .4rem .9rem; } /* Nudge icons right slightly and increase them again. */ .tandem-stage-detail__heading { display: contents; } .tandem-stage-detail__heading img { grid-column: 1; width: 36px; height: 36px; justify-self: end; } /* Title + descriptor become one compact editorial line. */ .tandem-stage-detail__heading h3 { grid-column: 2; grid-row: 1; display: inline; margin: 0; font-size: 1.16rem; line-height: 1.35; } .tandem-stage-detail > p { grid-column: 2; grid-row: 1; display: inline; margin: 0; padding-left: 0; font-size: 1rem; line-height: 1.35; color: #6F9184; } .tandem-stage-detail > p::before { content: " — "; color: rgba(226,185,111,.78); } /* Keep the combined line left aligned. */ .tandem-stage-detail { text-align: left; } } /* ========================================================= APPROACH MOBILE — FIVE-STAGE ALIGNMENT CORRECTION 2026-08-18 Mobile only. ========================================================= */ @media (max-width: 620px) { .tandem-stage-detail { display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 1rem; row-gap: .18rem; align-items: center; padding: .9rem .6rem .95rem; text-align: left; } /* Restore the heading wrapper as a real grid participant. The previous display:contents caused the title and descriptor to occupy the same grid cell and overlap. */ .tandem-stage-detail__heading { display: contents; } .tandem-stage-detail__heading img { grid-column: 1; grid-row: 1 / 3; width: 40px; height: 40px; justify-self: end; align-self: center; } .tandem-stage-detail__heading h3 { grid-column: 2; grid-row: 1; justify-self: start; width: 100%; margin: 0; color: var(--ivory-100); font-size: 1.2rem; line-height: 1.15; text-align: left; } .tandem-stage-detail > p { grid-column: 2; grid-row: 2; justify-self: start; width: 100%; margin: 0; padding: 0; color: var(--stone-200); font-size: .98rem; line-height: 1.38; text-align: left; } .tandem-stage-detail > p::before { content: none; } } /* ========================================================= APPROACH MOBILE — FINAL SCALE TUNE 2026-08-18 Mobile only. ========================================================= */ @media (max-width: 620px) { /* Give the mechanism a little more presence inside the mount without changing the mount itself. */ .tandem-system-mechanism { left: -7%; right: -7%; top: 3.5%; width: auto; height: min(calc((100vw - 40px) * .78), 304px); } /* Slightly stronger stage icons in the compact list. */ .tandem-stage-detail__heading img { width: 44px; height: 44px; } .tandem-stage-detail { grid-template-columns: 46px minmax(0, 1fr); column-gap: 1rem; } } /* ========================================================= APPROACH MOBILE — OUTCOME STATEMENT SCALE + WRAP 2026-08-18 Mobile only. ========================================================= */ @media (max-width: 620px) { .tandem-page-invitation-inner { width: 100%; max-width: 100%; padding-inline: .25rem; } .tandem-page-invitation-inner h2 { max-width: 10.5ch; margin-inline: auto; white-space: normal; font-size: clamp(3rem, 13.5vw, 4.15rem); line-height: .96; text-wrap: balance; } } /* ========================================================= APPROACH MOBILE — OUTCOME SCALE CORRECTION 2026-08-18 Reduce the closing statement further so it lands in ~3 lines, not 5, on typical mobile widths. ========================================================= */ @media (max-width: 620px) { .tandem-page-invitation-inner h2 { max-width: 12.5ch; font-size: clamp(2.45rem, 10.8vw, 3.35rem); line-height: 1; letter-spacing: -.045em; text-wrap: balance; } } /* ========================================================= APPROACH MOBILE — LOCK OUTCOME TO THREE THOUGHT-LINES ========================================================= */ .tandem-page-invitation-inner .outcome-line { display: block; } @media (max-width: 620px) { .tandem-page-invitation-inner h2 { max-width: none; font-size: clamp(2.15rem, 9.6vw, 2.95rem); line-height: 1.04; } .tandem-page-invitation-inner .outcome-line { white-space: nowrap; } } /* Outcome colour correction: first two lines stay ivory; only the final line is sage. */ .tandem-page-invitation-inner h2 .outcome-line { color: var(--ivory-100); } .tandem-page-invitation-inner h2 .outcome-line--accent { color: var(--sage-300, #93A58F); } /* ========================================================= APPROACH — FIVE-STAGE READING SEQUENCE 2026-08-18 Reveal each descriptor as a complete thought, one at a time. ========================================================= */ .js .tandem-stage-detail { opacity: 0; transform: translateY(8px); } /* The descriptor band itself can exist, but each stage now earns its own beat. */ .tandem-process.is-sequencing .tandem-stage-details { animation: descriptorBandIn .34s 7.82s ease forwards; } .tandem-process.is-sequencing .tandem-stage-detail { animation: tandemStageReadIn .44s ease-out forwards; } .tandem-process.is-sequencing .tandem-stage-detail--1 { animation-delay: 8.30s; } .tandem-process.is-sequencing .tandem-stage-detail--2 { animation-delay: 9.45s; } .tandem-process.is-sequencing .tandem-stage-detail--3 { animation-delay: 10.60s; } .tandem-process.is-sequencing .tandem-stage-detail--4 { animation-delay: 11.75s; } .tandem-process.is-sequencing .tandem-stage-detail--5 { animation-delay: 12.90s; } @keyframes tandemStageReadIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Do not separately animate the title/copy reveal anymore. The whole descriptor arrives together as one readable thought. */ .tandem-process.is-sequencing .tandem-stage-detail__heading, .tandem-process.is-sequencing .tandem-stage-detail > p { animation: none; } /* --------------------------------------------------------- MOBILE The previous sage/glow "resolve" is too visually busy at this size. Keep the physical system animation, but make descriptor arrival quiet. --------------------------------------------------------- */ @media (max-width: 620px) { .tandem-process.is-sequencing .tandem-stage-detail__heading img, .tandem-process.is-sequencing .tandem-stage-detail__heading h3 { animation: none !important; filter: none !important; text-shadow: none !important; } .tandem-stage-detail__heading img { filter: none; } .tandem-stage-detail__heading h3 { text-shadow: none; } } /* Reduced motion: show the completed information immediately. */ @media (prefers-reduced-motion: reduce) { .js .tandem-stage-detail, .tandem-process.is-sequencing .tandem-stage-detail { opacity: 1; transform: none; animation: none !important; } } /* ========================================================= APPROACH — DESCRIPTOR REVEAL FIX Desktop children were still held at opacity:0 by the earlier descriptor-content rules. Reveal the actual heading + copy together for each stage instead of animating only the article. ========================================================= */ /* Keep the stage containers structurally present. */ .js .tandem-stage-detail { opacity: 1; transform: none; } /* Actual readable content starts hidden. */ .js .tandem-stage-detail__heading, .js .tandem-stage-detail > p { opacity: 0; transform: translateY(5px); } /* Remove the article animation — content itself now owns the reveal. */ .tandem-process.is-sequencing .tandem-stage-detail { animation: none; } /* Reveal title/icon + sentence together, one stage at a time. */ .tandem-process.is-sequencing .tandem-stage-detail__heading, .tandem-process.is-sequencing .tandem-stage-detail > p { animation: tandemStageContentIn .42s ease-out forwards; } .tandem-process.is-sequencing .tandem-stage-detail--1 .tandem-stage-detail__heading, .tandem-process.is-sequencing .tandem-stage-detail--1 > p { animation-delay: 8.30s; } .tandem-process.is-sequencing .tandem-stage-detail--2 .tandem-stage-detail__heading, .tandem-process.is-sequencing .tandem-stage-detail--2 > p { animation-delay: 9.45s; } .tandem-process.is-sequencing .tandem-stage-detail--3 .tandem-stage-detail__heading, .tandem-process.is-sequencing .tandem-stage-detail--3 > p { animation-delay: 10.60s; } .tandem-process.is-sequencing .tandem-stage-detail--4 .tandem-stage-detail__heading, .tandem-process.is-sequencing .tandem-stage-detail--4 > p { animation-delay: 11.75s; } .tandem-process.is-sequencing .tandem-stage-detail--5 .tandem-stage-detail__heading, .tandem-process.is-sequencing .tandem-stage-detail--5 > p { animation-delay: 12.90s; } @keyframes tandemStageContentIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } /* Mobile: explicitly suppress the old flashy stage highlight/pulse. */ @media (max-width: 620px) { .tandem-process.is-sequencing .tandem-stage-detail, .tandem-process.is-sequencing .tandem-stage-detail--1, .tandem-process.is-sequencing .tandem-stage-detail--2, .tandem-process.is-sequencing .tandem-stage-detail--3, .tandem-process.is-sequencing .tandem-stage-detail--4, .tandem-process.is-sequencing .tandem-stage-detail--5 { background-color: transparent !important; box-shadow: none !important; } .tandem-stage-detail__heading img { filter: none !important; } } @media (prefers-reduced-motion: reduce) { .js .tandem-stage-detail__heading, .js .tandem-stage-detail > p { opacity: 1 !important; transform: none !important; animation: none !important; } } /* ========================================================= APPROACH MOBILE — REVEAL EACH STAGE AS ONE COMPLETE UNIT 2026-08-18 Icon + title + supporting sentence move together. ========================================================= */ @media (max-width: 620px) { /* On mobile the heading wrapper uses display:contents, so animate the complete article instead of its internal heading/p elements. */ .js .tandem-stage-detail { opacity: 0; transform: translateY(7px); } /* Children stay fully visible inside the article so the whole row arrives as one unit rather than the sentence appearing separately. */ .js .tandem-stage-detail__heading, .js .tandem-stage-detail__heading img, .js .tandem-stage-detail__heading h3, .js .tandem-stage-detail > p { opacity: 1 !important; transform: none !important; animation: none !important; } .tandem-process.is-sequencing .tandem-stage-detail { animation: tandemMobileStageIn .44s ease-out forwards; background-color: transparent !important; box-shadow: none !important; } .tandem-process.is-sequencing .tandem-stage-detail--1 { animation-delay: 8.30s; } .tandem-process.is-sequencing .tandem-stage-detail--2 { animation-delay: 9.45s; } .tandem-process.is-sequencing .tandem-stage-detail--3 { animation-delay: 10.60s; } .tandem-process.is-sequencing .tandem-stage-detail--4 { animation-delay: 11.75s; } .tandem-process.is-sequencing .tandem-stage-detail--5 { animation-delay: 12.90s; } @keyframes tandemMobileStageIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } } @media (max-width: 620px) and (prefers-reduced-motion: reduce) { .js .tandem-stage-detail { opacity: 1 !important; transform: none !important; animation: none !important; } } /* ========================================================= APPROACH — FINAL MECHANISM SCALE TUNE Reduce unused mount space by letting the complete mechanism occupy more of the physical canvas at its settled state. ========================================================= */ /* Desktop: enlarge carefully so the five descriptor compartments still have comfortable breathing room below the mechanism. */ @media (min-width: 981px) { .tandem-system-mechanism { left: 2.5%; right: 2.5%; top: 2.5%; height: 590px; } } /* Tablet: a modest increase without disturbing the descriptor band. */ @media (min-width: 621px) and (max-width: 980px) { .tandem-system-mechanism { left: 1.5%; right: 1.5%; top: 4.5%; height: 545px; } } /* Mobile: use more of the square mount — this is where the empty canvas was most noticeable. */ @media (max-width: 620px) { .tandem-system-mechanism { left: -10%; right: -10%; top: 1.5%; width: auto; height: min(calc((100vw - 40px) * .84), 328px); } } /* ========================================================= APPROACH MOBILE — MECHANISM SCALE ONLY Increase the objects inside the existing mount. Mount dimensions remain unchanged. ========================================================= */ @media (max-width: 620px) { .tandem-system-mechanism { left: -14%; right: -14%; top: 0; width: auto; height: min(calc((100vw - 40px) * .91), 355px); } } /* ========================================================= APPROACH MOBILE — TIGHTEN MOUNT BOTTOM ONLY 2026-08-18 Keep mount width and internal mechanism scale unchanged. Reduce only the unused lower canvas so the bottom edge sits closer to the lower stage icons, matching the tighter top edge. ========================================================= */ @media (max-width: 620px) { .tandem-board-surface { aspect-ratio: auto; height: min(calc(100vw - 40px), 390px); min-height: 0; } .tandem-system-board { aspect-ratio: auto; } } /* ========================================================= APPROACH MOBILE — ACTUAL MOUNT HEIGHT REDUCTION 2026-08-18 Previous pass accidentally kept the mount effectively square. This keeps the same width but shortens the physical canvas. ========================================================= */ @media (max-width: 620px) { .tandem-system-board { width: min(calc(100vw - 40px), 390px); aspect-ratio: auto; } .tandem-board-surface { width: 100%; height: min(calc((100vw - 40px) * .88), 343px); min-height: 0; aspect-ratio: auto; } } /* ========================================================= APPROACH DESKTOP — TIGHTER, FULLER MOUNT 2026-08-18 Keep width at the approved desktop size, but reduce unused vertical canvas and let the mechanism occupy more of it. Mobile remains untouched. ========================================================= */ @media (min-width: 981px) { .tandem-system-board { width: min(100%, 820px); aspect-ratio: auto; height: 720px; } .tandem-board-surface { width: 100%; height: 100%; aspect-ratio: auto; } .tandem-system-mechanism { left: 0; right: 0; top: 1.5%; width: 100%; height: 615px; } .tandem-stage-details { left: 22px; right: 22px; bottom: 48px; } /* ========================================================= TANDEM METHOD — HERO COPY TYPOGRAPHY ONLY Safe override for current Approach structure. No grid, mount, medallion, sequence, spacing-system or animation changes. ========================================================= */ .tandem-page-hero h1 span { color: var(--sage-300, #93A58F); } /* The current Approach CSS gives every paragraph in the support column the old oversized statement treatment. Reset only the two new body paragraphs, while keeping the opening line as the visual lead. */ .tandem-page-hero-support .tandem-method-lead { max-width: 17ch; margin: 0; color: var(--ivory-100); font-size: clamp(1.65rem, 2.1vw, 2.2rem); line-height: 1.16; letter-spacing: -.03em; } .tandem-page-hero-support .tandem-method-copy { max-width: 39ch; margin: 1.45rem 0 0; color: var(--stone-200); font-size: clamp(1rem, 1.08vw, 1.08rem); line-height: 1.62; letter-spacing: -.008em; } .tandem-page-hero-support .tandem-method-connected { max-width: 39ch; margin: 1.1rem 0 0; color: var(--sage-300, #93A58F); font-size: clamp(.94rem, 1vw, 1rem); line-height: 1.58; letter-spacing: 0; } @media (max-width: 620px) { .tandem-page-hero-support .tandem-method-lead, .tandem-page-hero-support .tandem-method-copy, .tandem-page-hero-support .tandem-method-connected { max-width: 100%; } .tandem-page-hero-support .tandem-method-lead { font-size: clamp(1.55rem, 7vw, 1.9rem); line-height: 1.15; } .tandem-page-hero-support .tandem-method-copy { margin-top: 1.2rem; font-size: .98rem; line-height: 1.6; } .tandem-page-hero-support .tandem-method-connected { margin-top: .95rem; font-size: .91rem; line-height: 1.55; } } /* ========================================================= TANDEM METHOD — HERO + WHY COPY HIERARCHY 2026-08-19 Copy spacing/hierarchy only. No structure, mount, sequence, medallion or animation changes. ========================================================= */ /* HERO Give the closing statement room to land after the explanatory copy. */ .tandem-page-hero-support .tandem-method-copy { margin: 0; } .tandem-page-hero-support .tandem-method-lead { margin-top: clamp(1.8rem, 2.6vw, 2.6rem); } /* WHY IT WORKS First paragraph carries the principle. Second paragraph becomes supporting explanation. */ .tandem-why-copy p:first-child { max-width: 520px; margin-bottom: 1.5rem; color: var(--ivory-100); font-size: clamp(1.45rem, 1.9vw, 2rem); line-height: 1.28; letter-spacing: -.025em; } .tandem-why-copy p:last-child { max-width: 500px; margin-bottom: 0; color: var(--stone-200); font-size: clamp(1rem, 1.2vw, 1.16rem); line-height: 1.62; letter-spacing: -.008em; } @media (max-width: 620px) { .tandem-page-hero-support .tandem-method-lead { margin-top: 1.55rem; } .tandem-why-copy p:first-child { font-size: clamp(1.28rem, 6.1vw, 1.55rem); line-height: 1.3; } .tandem-why-copy p:last-child { font-size: .98rem; line-height: 1.6; } } } /* Desktop only: keep existing mount/sequence/layout exactly as-is. Hide descriptor support copy and centre icon + heading only. */ @media (min-width: 981px) { .tandem-stage-detail > p { display: none !important; } .tandem-stage-detail__heading { margin-bottom: 0 !important; justify-content: center; text-align: center; } .tandem-stage-detail__heading h3 { margin: 0 !important; text-align: center; } } /* ========================================================= TANDEM METHOD — DESKTOP EXPLANATION LIST TEST 2026-08-19 Keeps current mount labels for comparison. Hidden on tablet/mobile so the existing mobile list stays unchanged. ========================================================= */ .tandem-method-desktop-list { display: none; } @media (min-width: 981px) { .tandem-method-desktop-list { width: min(100%, 1000px); margin: clamp(2.4rem, 4vw, 3.8rem) auto 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid rgba(214, 161, 75, .16); border-bottom: 1px solid rgba(214, 161, 75, .10); } .tandem-method-desktop-item { min-width: 0; padding: 1.35rem 1rem 1.45rem; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: .8rem; align-items: start; border-right: 1px solid rgba(214, 161, 75, .10); } .tandem-method-desktop-item:last-child { border-right: 0; } .tandem-method-desktop-item img { width: 30px; height: 30px; display: block; margin-top: .05rem; } .tandem-method-desktop-item h3 { margin: 0 0 .42rem; color: var(--ivory-100); font-size: clamp(1rem, 1.15vw, 1.16rem); line-height: 1.12; letter-spacing: -.02em; } .tandem-method-desktop-item p { margin: 0; color: var(--stone-200); font-size: clamp(.82rem, .88vw, .92rem); line-height: 1.48; } } /* ========================================================= TANDEM METHOD — REMOVE DESKTOP MOUNT LABELS 2026-08-19 Desktop only. Keeps the separate desktop method list below the mount. Mobile/tablet stacked list remains unchanged. No mount, mechanism, medallion, connector or animation changes. ========================================================= */ @media (min-width: 981px) { .tandem-stage-details { display: none !important; } } /* ========================================================= TANDEM METHOD — DESKTOP MOUNT PROPORTION 2026-08-19 Match mount width to the 1000px descriptor list beneath it, reduce the tall/square feeling, and let the mechanism fill the physical canvas more confidently. Desktop only. Mobile/tablet and sequence timing are untouched. ========================================================= */ @media (min-width: 981px) { .tandem-system-board { width: min(100%, 1000px); height: 700px; min-height: 0; aspect-ratio: auto; } .tandem-board-surface { width: 100%; height: 100%; aspect-ratio: auto; } .tandem-system-mechanism { left: 0; right: 0; top: 1%; width: 100%; height: 680px; transform: translateY(-6px); } } @media (min-width: 981px) { .tandem-method-desktop-item:last-child h3 { white-space: nowrap; font-size: clamp(.96rem, 1.05vw, 1.08rem); letter-spacing: -.025em; } } /* ========================================================= TANDEM METHOD — DESKTOP MOUNT GROWTH SPEED ONLY 2026-08-19 Keeps the existing mount animation exactly as-is. Only makes the desktop growth complete a little sooner. ========================================================= */ @media (min-width: 981px) { .tandem-process.is-sequencing .tandem-board-surface { animation-duration: 6.1s; } } /* ========================================================= TANDEM METHOD — DESKTOP METHOD LABEL REVEAL 2026-08-19 The mount + medallion animation finishes first. Then the five desktop method items drop in one at a time with a deliberate reading beat. Desktop only. Mobile/tablet remain unchanged. ========================================================= */ @media (min-width: 981px) { .js .tandem-method-desktop-item { opacity: 0; transform: translateY(-10px); } .tandem-process.is-sequencing .tandem-method-desktop-item { animation: tandemMethodItemDrop .42s cubic-bezier(.2,.72,.22,1) forwards; } /* Final outer medallion finishes seating at roughly 6.63s. Give the system a short rest, then reveal each principle. */ .tandem-process.is-sequencing .tandem-method-desktop-item:nth-child(1) { animation-delay: 6.90s; } .tandem-process.is-sequencing .tandem-method-desktop-item:nth-child(2) { animation-delay: 7.90s; } .tandem-process.is-sequencing .tandem-method-desktop-item:nth-child(3) { animation-delay: 8.90s; } .tandem-process.is-sequencing .tandem-method-desktop-item:nth-child(4) { animation-delay: 9.90s; } .tandem-process.is-sequencing .tandem-method-desktop-item:nth-child(5) { animation-delay: 10.90s; } @keyframes tandemMethodItemDrop { 0% { opacity: 0; transform: translateY(-10px); } 72% { opacity: 1; transform: translateY(2px); } 100% { opacity: 1; transform: none; } } } html:not(.js) .tandem-method-desktop-item { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .tandem-method-desktop-item { opacity: 1 !important; transform: none !important; animation: none !important; } } /* ========================================================= TANDEM APPROACH — HIGH-GLOSS PEARL GLASS PANEL 2026-08-19 Push the full inset panel into a distinctly high-gloss, polished medallion-face material. Geometry, mount, centre mark, ring, medallions and animation untouched. ========================================================= */ .tandem-board-glass { background: /* sharp upper-left specular bloom */ radial-gradient( ellipse at 22% 14%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.86) 9%, rgba(255,255,255,.38) 28%, rgba(255,255,255,.08) 48%, transparent 66% ), /* broad polished sweep */ linear-gradient( 118deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.28) 16%, rgba(255,255,255,.04) 34%, rgba(255,255,255,.26) 47%, rgba(255,255,255,.06) 59%, rgba(255,255,255,.32) 76%, rgba(255,255,255,.08) 100% ), /* pearl body */ radial-gradient( circle at 34% 24%, #FFFFFF 0%, #FBF6EE 24%, #E9E0D3 58%, #C9BCAE 100% ) !important; border: 1px solid rgba(255,255,255,.98) !important; box-shadow: inset 0 3px 0 rgba(255,255,255,1), inset 0 -3px 0 rgba(91,72,50,.22), inset 3px 0 0 rgba(255,255,255,.46), inset -2px 0 0 rgba(78,62,44,.10), inset 0 0 36px rgba(255,255,255,.16), 0 14px 34px rgba(38,28,18,.16) !important; } /* Crisp inner lip to sell a polished, moulded surface. */ .tandem-board-glass::after { inset: 6px !important; border: 1px solid rgba(255,255,255,.68) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.72), inset 0 -2px 0 rgba(105,86,63,.12), inset 0 0 18px rgba(255,255,255,.13) !important; } /* Pronounced high-gloss reflection. */ .tandem-board-glass-highlight::before { width: 82% !important; height: 92% !important; left: -18% !important; top: -31% !important; border-radius: 46% !important; transform: rotate(-12deg) !important; opacity: 1 !important; background: radial-gradient( ellipse at center, rgba(255,255,255,.98) 0%, rgba(255,255,255,.72) 22%, rgba(255,255,255,.28) 46%, rgba(255,255,255,.06) 64%, transparent 76% ) !important; filter: blur(.2px); } /* Secondary reflected catch on the opposite edge. */ .tandem-board-glass-highlight::after { content: ""; position: absolute; width: 34%; height: 68%; right: -5%; bottom: -24%; border-radius: 50%; transform: rotate(15deg); opacity: .8 !important; background: radial-gradient( ellipse at center, rgba(255,255,255,.40) 0%, rgba(255,255,255,.14) 44%, transparent 72% ) !important; } /* ========================================================= TANDEM APPROACH — GLASS MATERIAL ONLY Surgical override: no geometry, layout, timing or animation changes. Add at the VERY END of approach.css ========================================================= */ .tandem-board-surface > .tandem-board-glass { background: radial-gradient( ellipse at 24% 15%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.84) 10%, rgba(255,255,255,.38) 25%, rgba(255,255,255,.10) 42%, transparent 60% ), linear-gradient( 128deg, rgba(255,255,255,.64) 0%, rgba(255,255,255,.20) 18%, rgba(255,255,255,.04) 34%, rgba(255,255,255,.30) 48%, rgba(255,255,255,.06) 63%, rgba(255,255,255,.18) 78%, rgba(255,255,255,.03) 100% ), radial-gradient( circle at 36% 26%, #FFFFFF 0%, #FAF6EF 26%, #E7DED2 62%, #C7BBAE 100% ) !important; box-shadow: inset 0 3px 0 rgba(255,255,255,.98), inset 3px 0 0 rgba(255,255,255,.48), inset 0 -3px 0 rgba(94,76,56,.18), inset -2px 0 0 rgba(88,71,52,.10), inset 0 0 24px rgba(255,255,255,.13), 0 10px 24px rgba(55,45,31,.12) !important; } .tandem-board-surface > .tandem-board-glass-highlight::before { background: radial-gradient( ellipse at 34% 28%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.62) 18%, rgba(255,255,255,.22) 38%, rgba(255,255,255,.055) 58%, transparent 74% ) !important; opacity: 1 !important; } .tandem-board-surface > .tandem-board-glass-highlight::after { background: radial-gradient( ellipse at 62% 60%, rgba(255,255,255,.34) 0%, rgba(255,255,255,.12) 36%, rgba(255,255,255,.025) 58%, transparent 74% ) !important; opacity: .58 !important; } /* ========================================================= APPROACH — FINAL MOBILE COPY CORRECTION Tandem Method + Why It Works only. This block intentionally sits last and wins over legacy mobile rules. ========================================================= */ @media (max-width: 620px) { /* Hero emphasis: "possibility." must remain sage on mobile. */ .tandem-page-hero .tandem-page-hero-copy h1 span:not(.premium-word) { color: var(--sage-300, #93A58F) !important; -webkit-text-fill-color: var(--sage-300, #93A58F) !important; } /* Neutralise the old rule that makes every support paragraph large. */ .tandem-page-hero .tandem-page-hero-support p { max-width: none !important; } /* Explanatory paragraph = body copy, as on desktop. */ .tandem-page-hero .tandem-page-hero-support .tandem-method-copy { max-width: 39ch !important; margin: 0 !important; color: var(--stone-200) !important; font-size: 1rem !important; line-height: 1.62 !important; letter-spacing: -.008em !important; } /* Closing statement = the larger editorial line. */ .tandem-page-hero .tandem-page-hero-support .tandem-method-lead { max-width: 17ch !important; margin: 1.55rem 0 0 !important; color: var(--ivory-100) !important; font-size: clamp(1.55rem, 7vw, 1.9rem) !important; line-height: 1.15 !important; letter-spacing: -.03em !important; } /* Why It Works keeps the same lead/support hierarchy as desktop. */ .tandem-why .tandem-why-copy p:first-child, .tandem-why-copy p:first-child { max-width: 520px !important; margin-bottom: 1.5rem !important; color: var(--ivory-100) !important; font-size: clamp(1.28rem, 6.1vw, 1.55rem) !important; line-height: 1.3 !important; letter-spacing: -.025em !important; } .tandem-why .tandem-why-copy p:last-child, .tandem-why-copy p:last-child { max-width: 500px !important; margin-bottom: 0 !important; color: var(--stone-200) !important; font-size: .98rem !important; line-height: 1.6 !important; letter-spacing: -.008em !important; } } /* ========================================================= TANDEM METHOD — DESKTOP GRID REVEAL GUARD 2026-08-20 Keep the five-step grid itself hidden until the physical mount + medallion sequence has finished. The individual method items then continue their existing staggered reveal. Desktop only. ========================================================= */ @media (min-width: 981px) { .js .tandem-method-desktop-list { opacity: 0; visibility: hidden; } .tandem-process.is-sequencing .tandem-method-desktop-list { visibility: visible; animation: tandemMethodGridReveal .28s 6.72s ease-out forwards; } @keyframes tandemMethodGridReveal { from { opacity: 0; } to { opacity: 1; } } } @media (min-width: 981px) and (prefers-reduced-motion: reduce) { .js .tandem-method-desktop-list { opacity: 1; visibility: visible; animation: none !important; } } /* ========================================================= APPROVED STUDIO MATERIAL TRANSLATION Surface-only refinement; geometry and choreography remain unchanged. ========================================================= */ .tandem-board-surface { border: 0 !important; background: #E8DDCF url("../images/tandence-studio-mount-smooth-v3.webp") center / 100% 100% no-repeat !important; box-shadow: 0 28px 65px rgba(0,14,9,.25) !important; } .tandem-board-surface > .tandem-board-glass { border: 0 !important; background: radial-gradient(ellipse at 25% 14%, rgba(255,255,255,.24) 0%, rgba(255,255,255,.08) 28%, rgba(255,255,255,.02) 48%, transparent 68%) !important; box-shadow: none !important; } .tandem-board-surface > .tandem-board-glass-highlight::before { opacity: 0 !important; } .tandem-board-surface > .tandem-board-glass-highlight::after { opacity: 0 !important; } .tandem-board-pin { width: 11px; background: radial-gradient(circle at 32% 28%, #E3E3DE 0 7%, #8A8C86 23%, #41443F 56%, #191B18 88%) !important; box-shadow: 0 2.5px 4px rgba(0,0,0,.32), 0 0 0 1px rgba(226,227,221,.36), inset 0 1px .7px rgba(255,255,255,.32) !important; opacity: .96; } .tandem-board-pin--tl { top: 38px; left: 39px; } .tandem-board-pin--tr { top: 38px; right: 39px; } .tandem-board-pin--bl { bottom: 38px; left: 39px; } .tandem-board-pin--br { right: 39px; bottom: 38px; } @media (max-width: 620px) { .tandem-board-pin { width: 8px; } .tandem-board-pin--tl { top: 21px; left: 21px; } .tandem-board-pin--tr { top: 21px; right: 21px; } .tandem-board-pin--bl { bottom: 21px; left: 21px; } .tandem-board-pin--br { right: 21px; bottom: 21px; } } /* The approved studio mechanism is the completed material state. The live connectors and outer stage medallions remain independent around it. */ @media (prefers-reduced-motion: reduce) { .js .tm-studio-finish { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; } .js .tm-ring-face, .js .tm-bridge, .js .tm-ring-shadow, .js .tm-node { opacity: 0 !important; animation: none !important; } }