/* What We Do only. Colors and typography inherit the shared theme. */
.company-page { --company-ease: cubic-bezier(.22,.61,.36,1); }
/* Corporate Structure uses the shared typography, theme and container. */
.structure-page { padding-block: clamp(48px, 6vw, 88px); }
.structure-page h1 { margin-bottom: clamp(32px, 4vw, 56px); color: var(--ink); text-align: center; font-size: clamp(2rem, 5vw, 4.75rem); overflow-wrap: anywhere; }
.structure-page img { width: 100%; height: auto; margin-inline: auto; }
.company-hero { overflow: hidden; isolation: isolate; padding-block: clamp(80px,10vw,150px) clamp(60px,7vw,100px); background: var(--forest-deep); }
.company-hero-depth, .company-hero-image { position: absolute; inset: -20px; z-index: -1; }
.company-hero-depth { transform: translateY(var(--depth-y,0px)); }
.company-hero-image { background: linear-gradient(120deg,rgba(12,40,26,.86),rgba(12,40,26,.65)),url('../images/about/plantation.jpg') center / cover; }
.company-section { padding: clamp(56px,7vw,108px) 0; }
.company-tinted { background: var(--off-white); border-block: 1px solid var(--line); }
.company-split { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center; gap: clamp(2rem,5vw,5rem); }
.company-photo-frame { overflow: hidden; border-radius: 4px; aspect-ratio: 4 / 3; background: var(--beige); box-shadow: var(--shadow-soft); }
.company-photo { width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--depth-y,0px)) scale(1.035); }
.company-copy h2 { margin-bottom: 1.5rem; font-size: clamp(2rem,3.5vw,3rem); line-height: 1.2; }
.company-copy h2::before { content: ''; display: block; width: 44px; height: 2px; background: var(--gold); margin-bottom: 1.5rem; transform-origin: left; }
.company-page h2, .company-page h3 { color: var(--ink); }
.company-copy p { line-height: 1.9; max-width: 65ch; }
.company-phases { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem; margin: 3rem 0 4rem; }
.company-panel { min-width: 0; padding: clamp(1.5rem,3vw,2.5rem); border: 1px solid var(--line); border-top: 2px solid var(--gold); background: var(--paper); border-radius: 4px; box-shadow: var(--shadow-soft); }
.company-panel h3 { position: relative; font-size: clamp(1.3rem,2vw,1.7rem); line-height: 1.35; margin: .75rem 0 1rem; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.company-panel p { line-height: 1.8; }
.company-panel .eyebrow { display: block; color: var(--ink-soft); }
/* Each item occupies its own row, preserving the original reading order. */
.company-timeline { --timeline-progress: 1; position: relative; display: grid; grid-template-columns: minmax(0,1fr); gap: 1.5rem; list-style: none; padding-left: 1.5rem; }
.company-timeline::before, .company-timeline::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--line); }
.company-timeline::after { background: var(--gold); transform: scaleY(var(--timeline-progress)); transform-origin: top; }
.company-timeline li { position: relative; }
.company-timeline li::before { content: ''; position: absolute; top: 2rem; left: -1.5rem; width: 1.5rem; height: 1px; background: var(--line); }
.company-timeline li::after { content: ''; position: absolute; top: calc(2rem - 6px); left: calc(-1.5rem - 5px); width: 12px; height: 12px; border: 2px solid var(--gold); border-radius: 50%; background: var(--paper); z-index: 1; transition: background .25s ease, box-shadow .25s ease; }
.company-timeline li.is-active::after { background: var(--gold); box-shadow: 0 0 0 5px var(--beige); }
.company-timeline li.is-active::before { background: var(--gold); }
.company-icon { width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 4px; padding: 10px; margin-bottom: 1rem; transition: transform .3s var(--company-ease); }
/* The unchanged translated heading remains the accessible, layout-stable source. */
.company-page h3.is-counting { color: transparent; }
.company-counter-display { position: absolute; inset: 0; color: var(--ink); pointer-events: none; }
.company-values { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem; margin-top: 3rem; }
.company-value { position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 3 / 4; background: var(--forest-deep); }
.company-value img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--company-ease); }
.company-value::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 25%,rgba(7,27,17,.92)); transition: opacity .4s ease; }
.company-page .company-value h3 { position: absolute; bottom: 1.75rem; left: 1.75rem; right: 1.75rem; color: #fff; z-index: 1; font-size: clamp(1.8rem,3vw,2.5rem); transition: transform .4s var(--company-ease); }
.company-value h3::after { content: ''; display: block; width: 40px; height: 2px; background: var(--gold-light); margin-top: .75rem; transform: scaleX(.5); transform-origin: left; transition: transform .4s var(--company-ease); }
.company-map { display: block; background: #fff; padding: clamp(.5rem,2vw,1.5rem); border: 1px solid var(--line); border-bottom: 3px solid var(--gold); border-radius: 4px; box-shadow: var(--shadow-soft); }
.company-map img { width: 100%; height: auto; object-fit: contain; }
.company-page main a:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
.company-hero a:focus-visible { outline-color: #fff !important; }
.company-hero a { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: transparent; transition: color .2s ease, text-decoration-color .2s ease; }
.company-hero a:hover { text-decoration-color: currentColor; }
/* Progressive enhancement: content stays visible if JavaScript is unavailable. */
.company-page main .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .company-motion main .reveal { transition: opacity .65s var(--company-ease), transform .65s var(--company-ease); }
  .company-motion main .reveal:not(.in) { opacity: 0; transform: translateY(16px); }
  .company-motion .company-hero .container.reveal { opacity: 1; transform: none; }
  .company-motion .company-hero .eyebrow, .company-motion .company-hero h1, .company-motion .company-hero .board-breadcrumb { animation: company-enter .75s var(--company-ease) both; }
  .company-motion .company-hero h1 { animation-delay: .12s; }
  .company-motion .company-hero .board-breadcrumb { animation-delay: .24s; }
  .company-motion .company-hero-image { animation: company-settle 1.5s var(--company-ease) both; }
  .company-motion .company-photo-frame { clip-path: inset(0); transition: clip-path .9s var(--company-ease), opacity .7s ease, transform .7s var(--company-ease); }
  .company-motion .company-photo-frame:not(.in) { clip-path: inset(0 0 12% 0); }
  .company-motion .company-photo-frame.in .company-photo { animation: company-photo-settle 1.1s var(--company-ease) both; }
  .company-motion .company-copy.in h2 { animation: company-enter .65s var(--company-ease) both; }
  .company-motion .company-copy.in p { animation: company-enter .65s .12s var(--company-ease) both; }
  .company-motion .company-copy.in h2::before { animation: company-line .8s .15s var(--company-ease) both; }
  .company-motion .company-timeline .in .company-icon { animation: company-enter .55s .12s var(--company-ease) backwards; }
  .company-motion .company-values > :nth-child(2) { transition-delay: .09s; }
  .company-motion .company-values > :nth-child(3) { transition-delay: .18s; }
  .company-motion .company-map:not(.in) { transform: translateY(16px) scale(.985); }
  .company-motion main .reveal:focus-within { opacity: 1; transform: none; }
}
@keyframes company-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes company-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes company-photo-settle { from { scale: 1.06; } to { scale: 1; } }
@keyframes company-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (hover: hover) and (pointer: fine) {
  .company-panel:hover { border-color: var(--gold); }
  .company-panel:hover .company-icon { transform: translateY(-2px); }
  .company-value:hover img { transform: scale(1.035); }
  .company-value:hover::after { opacity: .85; }
  .company-value:hover h3 { transform: translateY(-4px); }
  .company-value:hover h3::after { transform: scaleX(1); }
  .company-map:hover { border-color: var(--gold); }
}
@media (min-width:801px) {
  .company-timeline { grid-template-columns: repeat(2,minmax(0,1fr)); padding-left: 0; column-gap: 5rem; row-gap: 1rem; }
  .company-timeline::before, .company-timeline::after { left: calc(50% - 1px); }
  .company-timeline li:nth-child(odd) { grid-column: 1; }
  .company-timeline li:nth-child(even) { grid-column: 2; }
  .company-timeline li:nth-child(1) { grid-row: 1; }
  .company-timeline li:nth-child(2) { grid-row: 2; }
  .company-timeline li:nth-child(3) { grid-row: 3; }
  .company-timeline li:nth-child(4) { grid-row: 4; }
  .company-timeline li:nth-child(5) { grid-row: 5; }
  .company-timeline li:nth-child(6) { grid-row: 6; }
  .company-timeline li::before { left: auto; right: -2.5rem; width: 2.5rem; }
  .company-timeline li::after { left: auto; right: calc(-2.5rem - 6px); }
  .company-timeline li:nth-child(even)::before { left: -2.5rem; right: auto; }
  .company-timeline li:nth-child(even)::after { left: calc(-2.5rem - 6px); right: auto; }
}
@media (min-width:801px) and (prefers-reduced-motion:no-preference) {
  .company-motion .company-timeline li:nth-child(odd):not(.in), .company-motion .company-tinted .company-copy:not(.in) { transform: translateX(-16px); }
  .company-motion .company-timeline li:nth-child(even):not(.in), .company-motion .company-tinted .company-photo-frame:not(.in) { transform: translateX(16px); }
}
@media (max-width:800px) {
  .company-split { grid-template-columns: minmax(0,1fr); }
  .company-phases, .company-values { gap: 1rem; }
  .company-photo { transform: none; }
  .company-hero { padding-block: 64px 48px; }
}
@media (max-width:600px) {
  .company-phases, .company-values { grid-template-columns: minmax(0,1fr); }
  .company-value { aspect-ratio: 4 / 3; }
  .company-panel { padding: 1.25rem; }
}
@media (prefers-reduced-motion:reduce) {
  .company-page main .reveal, .company-page .company-photo, .company-page .company-hero-depth, .company-page .company-value img, .company-page .company-value h3, .company-page .company-icon { opacity: 1; transform: none; clip-path: none; animation: none; transition: none; }
  .company-timeline::after { transform: scaleY(1); }
}