/* A scroll-led editorial chapter; the unenhanced layout remains a readable grid. */
@layer components {
  .experience-section { background:var(--ivory); }
  .experience-intro { display:flex; justify-content:space-between; align-items:flex-end; gap:45px; padding-block:95px 65px; }
  .experience-intro>div { max-width:100%; min-width:0; }
  .experience-intro .eyebrow { color:var(--forest); font-size:8px; margin-bottom:26px; }
  .experience-intro h2 { font-size:clamp(80px,8.7vw,134px); }
  .experience-intro>p { max-width:300px; font-size:12px; line-height:1.9; color:var(--muted); padding-bottom:6px; }
  .experience-stage { position:relative; background:var(--deep); color:var(--paper); overflow:hidden; isolation:isolate; }
  .experience-stage-label { display:flex; justify-content:space-between; gap:20px; padding:27px var(--gutter); font-size:8px; font-weight:700; letter-spacing:.18em; border-bottom:1px solid #d3b87d25; color:var(--gold); }
  .experience-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .experience-panel { position:relative; display:grid; grid-template-columns:minmax(110px,.85fr) minmax(0,1.15fr); align-items:center; gap:27px; padding:55px 45px; min-height:425px; overflow:hidden; border-bottom:1px solid #d3b87d33; }
  .experience-panel:nth-child(odd) { border-right:1px solid #d3b87d33; }
  .experience-value { position:relative; z-index:2; font-family:var(--display); font-weight:800; font-size:clamp(135px,14vw,220px); line-height:.9; letter-spacing:-.065em; color:var(--gold); }
  .experience-value>span { display:inline-block; font-size:.48em; vertical-align:top; margin-top:.2em; letter-spacing:-.06em; }
  .experience-region .experience-value { font-size:clamp(110px,11.6vw,176px); letter-spacing:-.045em; }
  .experience-panel-copy { position:relative; z-index:3; }
  .experience-overline { display:block; font-size:7px; font-weight:700; letter-spacing:.14em; line-height:1.7; color:var(--gold); margin-bottom:24px; }
  .experience-panel h3 { font-family:var(--display); text-transform:uppercase; font-weight:700; font-size:clamp(40px,4vw,60px); letter-spacing:-.02em; line-height:.98; margin-bottom:24px; }
  .experience-panel h3 em { display:inline-block; font-family:var(--serif); font-size:.95em; font-weight:400; text-transform:none; color:var(--paper); letter-spacing:-.025em; line-height:1.12; }
  .experience-panel-copy>p { max-width:365px; font-size:12px; color:#bfc7ba; line-height:1.85; }
  .experience-detail { display:block; color:var(--gold); font-size:7px; font-weight:700; letter-spacing:.14em; margin-top:30px; line-height:1.8; }
  .experience-sector-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:27px; }
  .experience-sector-tags span { border:1px solid #d3b87d55; padding:7px 10px; font-size:7px; font-weight:700; letter-spacing:.08em; }
  .experience-explore { color:var(--forest); margin-top:24px; font-size:10px; }
  .experience-ambient { display:none; position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:-1; }
  .ambient-word { position:absolute; left:-2%; bottom:-24px; color:transparent; -webkit-text-stroke:1px #d3b87d22; font-family:var(--display); font-weight:800; font-size:19vw; line-height:.9; letter-spacing:-.025em; white-space:nowrap; }
  .ambient-orbit { position:absolute; left:4%; top:-28%; width:800px; height:800px; border:1px solid #d3b87d1a; border-radius:50%; }
  .experience-art { position:absolute; left:2%; top:12%; width:300px; height:300px; opacity:.55; pointer-events:none; z-index:0; }
  .experience-orbit { position:absolute; inset:0; border:1px solid #d3b87d4d; border-radius:50%; perspective:650px; }
  .experience-orbit>span { display:block; position:absolute; inset:0; border:1px solid #d3b87d3d; border-radius:50%; }
  .experience-orbit>span:nth-child(1) { transform:rotateY(58deg); }
  .experience-orbit>span:nth-child(2) { transform:rotateX(58deg) rotateZ(24deg); }
  .experience-orbit>span:nth-child(3) { transform:rotateY(58deg) rotateZ(-48deg); }
  .orbit-point { position:absolute; width:10px; height:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 8px #d3b87d0c; }
  .point-one { left:3%; top:29%; }
  .point-two { right:17%; top:4%; }
  .point-three { right:0; bottom:33%; }
  .point-four { left:28%; bottom:3%; }
  .point-five { left:14%; bottom:19%; }
  .regional-grid { position:absolute; inset:12%; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; align-items:center; justify-items:center; transform:rotate(-18deg); }
  .regional-grid>span { width:18px; height:18px; border:1px solid #d3b87d99; transform:rotate(45deg); }
  .sector-plane { position:absolute; inset:10% 28%; border:1px solid #d3b87d99; background:linear-gradient(120deg,#d3b87d1a,transparent); }
  .plane-one { transform:rotate(-32deg) skewY(-15deg) translateX(-55px); }
  .plane-two { transform:rotate(32deg) skewY(15deg) translateX(55px); }
  .experience-rail,.experience-progress { display:none; }

  /* The desktop narrative is enabled only after GSAP has initialized successfully. */
  .experience-stage.is-kinetic { height:calc(100svh - 90px); min-height:570px; }
  .is-kinetic .experience-stage-label { position:absolute; top:0; left:0; right:0; z-index:6; }
  .is-kinetic .experience-ambient { display:block; }
  .is-kinetic .experience-panels { display:block; position:absolute; inset:65px 0 80px; }
  .is-kinetic .experience-panel { position:absolute; inset:0; border:0; min-height:0; grid-template-columns:1.13fr .87fr; column-gap:8%; padding:30px var(--gutter); }
  .is-kinetic .experience-value { font-size:clamp(270px,28vw,430px); line-height:.83; }
  .is-kinetic .experience-region .experience-value { font-size:clamp(205px,22vw,335px); }
  .is-kinetic .experience-sectors .experience-value,.is-kinetic .experience-practices .experience-value { font-size:clamp(330px,32vw,470px); padding-left:12%; }
  .is-kinetic .experience-panel-copy { max-width:440px; }
  .is-kinetic .experience-panel h3 { font-size:clamp(62px,6vw,91px); }
  .is-kinetic .experience-panel-copy>p { font-size:13px; }
  .is-kinetic .experience-art { width:440px; height:440px; left:8%; top:50%; margin-top:-220px; opacity:.65; }
  .is-kinetic .experience-rail { display:flex; position:absolute; left:var(--gutter); right:var(--gutter); bottom:22px; z-index:6; justify-content:space-between; gap:30px; }
  .rail-item { display:flex; gap:12px; font-size:8px; font-weight:500; letter-spacing:.1em; color:#758173; transition:color .25s; }
  .rail-item b { font-weight:700; }
  .rail-item.is-active { color:var(--gold); }
  .is-kinetic .experience-progress { display:block; position:absolute; bottom:0; left:0; right:0; height:3px; background:#d3b87d22; }
  .experience-progress>span { display:block; height:100%; background:var(--gold); transform-origin:left; }

  .experience-organizations { padding-block:90px 55px; }
  .experience-org-heading { display:grid; grid-template-columns:1fr 1fr; gap:22px 50px; align-items:end; }
  .experience-org-heading .eyebrow { grid-column:1/3; font-size:8px; color:var(--forest); }
  .experience-org-heading h3 { font-family:var(--display); font-size:clamp(54px,5.6vw,82px); font-weight:700; line-height:.98; text-transform:uppercase; letter-spacing:-.025em; }
  .experience-org-heading h3 em { font-family:var(--serif); font-weight:400; color:var(--forest); font-size:.95em; text-transform:none; }
  .experience-org-heading>p:last-child { justify-self:end; padding-bottom:8px; font-size:12px; line-height:1.8; color:var(--muted); }
  .institution-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:45px; margin-top:65px; }
  .institution { position:relative; text-align:center; border-top:1px solid #b8c2b2; padding-top:10px; overflow:clip; }
  .institution-mark { height:255px; display:grid; place-items:center; position:relative; }
  .institution-mark>img { width:175px; height:160px; object-fit:contain; mix-blend-mode:multiply; position:relative; z-index:2; }
  .institution:first-child .institution-mark>img { width:140px; height:140px; }
  .institution:last-child .institution-mark>img { width:180px; height:130px; }
  .institution-orbit { position:absolute; width:225px; height:225px; border:1px solid #d3b87d88; border-radius:50%; transform:rotate(-25deg) scaleY(.85); }
  .institution-orbit::before { content:''; position:absolute; inset:16px; border:1px solid #b7c8ac88; border-radius:50%; transform:rotate(60deg) scaleX(.8); }
  .institution figcaption { min-height:90px; padding-top:17px; }
  .institution figcaption>span { display:block; color:var(--muted); font-size:7px; font-weight:500; letter-spacing:.15em; margin-bottom:12px; }
  .institution figcaption>strong { display:block; font-family:var(--display); font-size:29px; font-weight:600; text-transform:uppercase; line-height:1.1; letter-spacing:-.01em; }

  @media(max-width:1099px) {
    .experience-intro { padding-block:75px 50px; }
    .experience-intro h2 { font-size:95px; }
    .experience-panel { padding:45px 30px; grid-template-columns:1fr 1.15fr; column-gap:22px; min-height:405px; }
    .experience-panel h3 { font-size:48px; }
    .experience-value { font-size:155px; }
    .experience-region .experience-value { font-size:120px; }
    .experience-panel-copy>p { font-size:11px; }
    .experience-art { width:260px; height:260px; }
    .institution-grid { gap:25px; }
    .institution-orbit { width:190px; height:190px; }
    .institution-mark>img { width:150px; }
  }
  @media(max-width:850px) {
    .experience-intro { gap:25px; }
    .experience-intro h2 { font-size:80px; }
    .experience-intro>p { font-size:11px; }
    .experience-panels { grid-template-columns:1fr; }
    .experience-panel { grid-template-columns:.8fr 1.2fr; padding:50px var(--gutter); min-height:330px; }
    .experience-panel:nth-child(odd) { border-right:0; }
    .experience-value { font-size:190px; }
    .experience-region .experience-value { font-size:140px; }
    .experience-panel h3 { font-size:58px; }
    .experience-panel-copy>p { font-size:12px; }
    .experience-art { left:3%; top:7%; width:290px; height:290px; }
    .experience-organizations { padding-block:65px 40px; }
    .experience-org-heading { gap:20px; }
    .experience-org-heading h3 { font-size:62px; }
    .institution-grid { gap:20px; margin-top:40px; }
    .institution-mark { height:215px; }
    .institution-orbit { width:165px; height:165px; }
    .institution-mark>img { width:135px; height:130px; }
    .institution:first-child .institution-mark>img { width:110px; height:110px; }
    .institution:last-child .institution-mark>img { width:145px; height:120px; }
    .institution figcaption>strong { font-size:23px; }
    .institution figcaption>span { font-size:6px; letter-spacing:.07em; }
  }
  @media(max-width:560px) {
    .experience-intro { flex-direction:column; align-items:flex-start; gap:24px; padding-block:55px 40px; }
    .experience-intro .eyebrow { font-size:7px; margin-bottom:18px; }
    .experience-intro h2 { font-size:clamp(52px,17vw,64px); }
    .experience-intro>p { font-size:11px; }
    .experience-intro>p br { display:none; }
    .experience-stage-label { padding:22px 23px; font-size:7px; letter-spacing:.13em; }
    .experience-panel { grid-template-columns:105px minmax(0,1fr); gap:20px; padding:40px 23px; align-items:start; min-height:315px; }
    .experience-value { font-size:92px; margin-top:43px; letter-spacing:-.06em; }
    .experience-region .experience-value { font-size:73px; letter-spacing:-.05em; }
    .experience-sectors .experience-value,.experience-practices .experience-value { font-size:130px; padding-left:15px; margin-top:27px; }
    .experience-overline { font-size:6px; letter-spacing:.09em; margin-bottom:17px; }
    .experience-panel h3 { font-size:40px; margin-bottom:18px; }
    .experience-panel h3 em { font-size:.88em; }
    .experience-panel-copy>p { font-size:11px; line-height:1.75; }
    .experience-detail { font-size:6px; letter-spacing:.07em; margin-top:21px; }
    .experience-sector-tags { gap:5px; margin-top:20px; }
    .experience-sector-tags span { font-size:6px; padding:6px; }
    .experience-explore { font-size:8px; gap:9px; }
    .experience-art { width:190px; height:190px; left:-38px; top:46px; opacity:.4; }
    .orbit-point { width:7px; height:7px; }
    .experience-organizations { padding-block:55px 20px; }
    .experience-org-heading { display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
    .experience-org-heading h3 { font-size:57px; }
    .experience-org-heading .eyebrow { font-size:7px; }
    .experience-org-heading>p:last-child { font-size:11px; }
    .institution-grid { grid-template-columns:1fr; gap:20px; margin-top:33px; }
    .institution { display:grid; grid-template-columns:44% 56%; text-align:left; align-items:center; padding:20px 0; }
    .institution-mark { height:155px; }
    .institution-orbit { width:135px; height:135px; }
    .institution-mark>img { width:110px; height:115px; }
    .institution:first-child .institution-mark>img { width:90px; height:100px; }
    .institution:last-child .institution-mark>img { width:125px; height:110px; }
    .institution figcaption { min-height:0; padding:0 0 0 20px; }
    .institution figcaption>strong { font-size:26px; }
    .institution figcaption>span { font-size:6px; line-height:1.7; margin-bottom:9px; }
  }
  @media(prefers-reduced-motion:reduce) { .rail-item { transition:none; } }
}