/* Five Pillars / photographic editorial. All styles intentionally section-scoped. */
#home-page .focus-atlas {
  --focus-cream: #eee9dd;
  --focus-olive: #c6cdae;
  --focus-parallax: 0px;
  background: #20291f;
  color: var(--focus-cream);
  padding: 72px clamp(22px, 4.6vw, 88px) 25px;
  scroll-margin-top: 116px;
  overflow: hidden;
}
.focus-atlas *, .focus-atlas *::before, .focus-atlas *::after { box-sizing: border-box; }
.focus-atlas-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:36px; margin-bottom:40px; }
.focus-eyebrow { display:flex; align-items:center; gap:12px; color:#c5cdb8; font-size:9px; letter-spacing:.22em; line-height:1.6; margin:0 0 24px; }
.focus-eyebrow > span { width:6px; height:6px; border-radius:50%; background:#c7d2ad; box-shadow:0 0 0 5px #c7d2ad12; }
.focus-atlas h2 { font-family:var(--font-voice); font-size:clamp(48px,5.9vw,100px); font-weight:300; line-height:.96; letter-spacing:-.04em; margin:0; color:var(--focus-cream); }
.focus-atlas h2 em { display:block; color:var(--focus-olive); font-weight:300; }
.focus-intro { flex:0 0 265px; padding-bottom:3px; font-size:12px; line-height:1.8; }
.focus-intro p { margin:0 0 6px; color:var(--focus-cream); }
.focus-intro > span { color:#b4bda9; font-size:10px; }
.focus-gallery { display:flex; gap:8px; height:clamp(420px,42vw,640px); isolation:isolate; touch-action:pan-y; }
.focus-card { position:relative; flex:1 1 0; min-width:0; height:100%; overflow:hidden; padding:0; border:0; border-radius:0; text-align:left; background:#394333; color:#fffbed; cursor:pointer; font-family:inherit; transition:flex-grow .85s cubic-bezier(.22,.68,.12,1), opacity .5s; -webkit-tap-highlight-color:transparent; }
.focus-card.is-active { flex-grow:3.7; }
.focus-card img { position:absolute; inset:-5% 0; width:100%; height:110%; object-fit:cover; object-position:center; filter:saturate(.55) contrast(.96); transform:translateY(var(--focus-parallax)) scale(1.08); transition:transform 1.3s cubic-bezier(.2,.65,.2,1),filter .8s; pointer-events:none; }
.focus-card.is-active img { filter:saturate(.72) contrast(1.02); transform:translateY(var(--focus-parallax)) scale(1); }
.focus-card[data-focus="energy"] img { object-position:45% 45%; }
.focus-card[data-focus="recovery"] img { inset:-35% -5%; width:110%; height:170%; }
.focus-card[data-focus="performance"] img { object-position:25% 45%; }
.focus-card[data-focus="aesthetics"] img { object-position:50% 38%; }
.focus-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(9,19,12,.42),rgba(9,19,12,.04) 35%,rgba(9,19,12,.22) 60%,rgba(9,19,12,.8)); pointer-events:none; }
.focus-card-top { position:absolute; z-index:2; top:23px; left:22px; right:22px; display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:10px; letter-spacing:.15em; text-transform:uppercase; }
.focus-card-category { opacity:0; transition:opacity .3s; white-space:nowrap; }
.focus-card.is-active .focus-card-category { opacity:1; transition-delay:.25s; }
.focus-card-symbol { position:absolute; right:0; top:32px; font-size:20px; opacity:.8; transition:transform .6s; }
.focus-card.is-active .focus-card-symbol { position:static; transform:rotate(45deg); }
.focus-card-vertical { position:absolute; z-index:2; left:50%; bottom:36px; writing-mode:vertical-rl; transform:translateX(-50%) rotate(180deg); font-family:var(--font-voice); font-size:clamp(24px,2.5vw,40px); letter-spacing:-.025em; transition:opacity .25s; }
.focus-card.is-active .focus-card-vertical { opacity:0; }
.focus-card-title { position:absolute; z-index:2; left:30px; bottom:38px; width:calc(100% - 60px); font-family:var(--font-voice); font-size:clamp(46px,4.9vw,78px); font-weight:300; line-height:.95; letter-spacing:-.035em; opacity:0; transform:translateY(20px); transition:opacity .22s,transform .25s; }
.focus-card-title em { font-weight:300; }
.focus-card.is-active .focus-card-title { opacity:1; transform:none; transition:opacity .7s .3s,transform .7s .3s; }
.focus-card-line { position:absolute; z-index:2; left:22px; right:22px; bottom:18px; height:1px; background:#eee9dd65; transform:scaleX(0); transform-origin:left; transition:transform .7s; }
.focus-card.is-active .focus-card-line { transform:scaleX(1); }
.focus-atlas button:focus-visible { outline:2px solid #f4f0dc; outline-offset:3px; z-index:3; }
.focus-detail { display:grid; grid-template-columns:1.05fr 1.2fr auto; gap:40px; align-items:center; padding:32px 0 30px; min-height:150px; }
.focus-detail-kicker { display:block; font-size:8px; line-height:1.6; letter-spacing:.21em; color:#bac5aa; margin-bottom:10px; }
.focus-detail h3 { font-family:var(--font-voice); font-size:clamp(26px,2.8vw,41px); line-height:1.05; font-weight:300; margin:0; color:var(--focus-cream); }
.focus-detail-copy { margin:0; max-width:440px; font-size:12px; line-height:1.85; color:#c2c9b9; }
.focus-detail.is-changing .focus-detail-heading,.focus-detail.is-changing .focus-detail-copy { animation:focusCopyEnter .65s both; }
.focus-controls { display:flex; gap:26px; align-items:center; }
.focus-count { white-space:nowrap; font-size:10px; letter-spacing:.08em; color:#a3ae96; font-variant-numeric:tabular-nums; }
.focus-count b { color:var(--focus-cream); font-weight:400; }
.focus-controls > div { display:flex; gap:7px; }
.focus-controls button { display:grid; place-items:center; width:44px; height:44px; border:1px solid #76806a; border-radius:50%; background:transparent; color:var(--focus-cream); font-size:20px; cursor:pointer; transition:background .25s,color .25s,transform .25s; }
.focus-progress { height:1px; background:#c5cdb830; }
.focus-progress > span { display:block; height:2px; width:20%; background:var(--focus-olive); transition:transform .8s cubic-bezier(.22,.68,.12,1); }
.focus-footer { display:flex; align-items:center; justify-content:space-between; gap:15px; padding-top:19px; color:#a7b39b; font-size:8px; line-height:1.6; letter-spacing:.17em; }
.focus-interaction-hint { color:#d0d7c4; }
.focus-interaction-hint > span { margin-left:10px; font-size:14px; }
.focus-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.focus-noscript { font-size:12px; line-height:1.8; padding-top:20px; }
@keyframes focusCopyEnter { from {opacity:0;transform:translateY(8px)} to {opacity:1;transform:none} }
@media(hover:hover) {
  .focus-card:not(.is-active):hover img { filter:saturate(.85) brightness(1.12); transform:translateY(var(--focus-parallax)) scale(1.02); }
  .focus-card:not(.is-active):hover .focus-card-symbol { transform:translate(3px,-3px); }
  .focus-controls button:hover { background:var(--focus-cream); color:#20291f; transform:translateY(-2px); }
}
@media(max-width:1050px) {
  .focus-atlas-heading { gap:24px; }
  .focus-intro { flex-basis:220px; }
  .focus-card.is-active { flex-grow:4.2; }
  .focus-card-top { left:15px;right:15px; }
  .focus-card-title { left:22px;width:calc(100% - 44px); font-size:48px; }
  .focus-detail { grid-template-columns:1fr 1.3fr;gap:20px; }
  .focus-controls { grid-column:1/-1; justify-content:flex-end; margin-top:-5px; }
}
@media(max-width:680px) {
  #home-page .focus-atlas { padding:46px 20px 22px;scroll-margin-top:106px; }
  .focus-atlas-heading { display:block;margin-bottom:26px; }
  .focus-eyebrow { font-size:7px;letter-spacing:.16em;margin-bottom:22px; }
  .focus-atlas h2 { font-size:56px; }
  .focus-intro { margin-top:22px;font-size:11px; }
  .focus-intro p { margin-bottom:2px; }
  .focus-gallery { gap:5px; height:460px; flex-wrap:wrap; }
  .focus-card { flex:1 1 0; height:68px; order:1; }
  .focus-card.is-active { flex:0 0 100%; height:387px; order:0; }
  .focus-card-top { top:12px;left:10px;right:10px;font-size:8px; }
  .focus-card.is-active .focus-card-top { top:21px;left:22px;right:22px;font-size:9px; }
  .focus-card-category { display:none; }
  .focus-card.is-active .focus-card-category { display:inline; }
  .focus-card-symbol { display:none; }
  .focus-card.is-active .focus-card-symbol { display:inline; }
  .focus-card-vertical { writing-mode:horizontal-tb;transform:none;left:10px;bottom:10px;font-family:inherit;font-size:8px;letter-spacing:0; }
  .focus-card-title { font-size:58px;bottom:34px; }
  .focus-card:not(.is-active) img { filter:saturate(.4) brightness(.72); }
  .focus-detail { grid-template-columns:1fr;gap:16px;padding:25px 0;min-height:260px; }
  .focus-detail h3 { font-size:32px; }
  .focus-detail-copy { font-size:11px;max-width:none; }
  .focus-controls { margin:0;justify-content:space-between; }
  .focus-footer { font-size:7px;letter-spacing:.1em; }
  .focus-footer > span:last-child { display:none; }
}
@media(max-width:360px) { .focus-atlas h2 {font-size:47px}.focus-card-title{font-size:50px}.focus-card-vertical{font-size:7px;left:6px} }
@media(prefers-reduced-motion:reduce) {
  .focus-atlas *, .focus-atlas *::before, .focus-atlas *::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }
  .focus-card img { transform:none!important; }
}

/* Same stone as the Insights section ("A deeper understanding"): texture and side shading */
#home-page .focus-atlas{background:linear-gradient(90deg,rgba(8,12,8,.52),rgba(8,12,8,.2) 55%,rgba(8,12,8,.42)),url('../home-philosophy-texture.jpg') center/cover no-repeat,#313a2b!important}