.page-intro{ padding-top:40px; }

/* Feature flip-cards — a distinct interaction from the eco-badge accordion
   and the team expand-panels: a real 3D card flip revealing more detail. */
.flip-card{ cursor:pointer; }
.flip-card-inner{
  position:relative; width:100%; height:300px; perspective:1400px;
  transform-style:preserve-3d; transition:transform 700ms var(--ease-clay), box-shadow 420ms var(--ease-clay);
}
.flip-card.is-flipped .flip-card-inner{ transform:rotateY(180deg); }
[data-motion="reduce"] .flip-card-inner{ transition:none; }
.flip-card-front, .flip-card-back{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  padding:28px 24px 56px; display:flex; flex-direction:column; text-align:left;
  transition:box-shadow 420ms var(--ease-clay);
}
.flip-card-back{ transform:rotateY(180deg); justify-content:center; padding-bottom:56px; }
.flip-card-front .icon{ width:52px; height:52px; border-radius:16px; background:linear-gradient(155deg, var(--gold-strong), var(--gold)); display:flex; align-items:center; justify-content:center; margin-bottom:16px; flex-shrink:0; }
.flip-card-back p{ font-size:.92rem; }
/* Anchored to a fixed spot regardless of how many lines the text above
   takes, so it lines up identically across every card. */
.flip-hint{ position:absolute; left:24px; right:24px; bottom:24px; font-size:.68rem; color:var(--gold-strong); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.flip-card:focus-visible{ outline:none; }
.flip-card:focus-visible .flip-card-front, .flip-card:focus-visible .flip-card-back{ outline:3px solid var(--teal); outline-offset:3px; border-radius:var(--radius-clay); }

/* Claymorphic hover + press feedback (the flip-card--> flip-card-front/back
   swap means the generic site-wide interactive-clay hover rule no longer
   matches this component, so it's restated here). */
.flip-card:hover .flip-card-front, .flip-card:hover .flip-card-back{
  box-shadow:-9px -9px 20px var(--clay-hi), 11px 11px 26px var(--clay-lo), 0 10px 24px -10px rgba(197,160,89,.35);
}
.flip-card:active .flip-card-inner{ transform:scale(.97); }
.flip-card.is-flipped:active .flip-card-inner{ transform:rotateY(180deg) scale(.97); }
[data-motion="reduce"] .flip-card:active .flip-card-inner{ transform:none; }
[data-motion="reduce"] .flip-card.is-flipped:active .flip-card-inner{ transform:rotateY(180deg); }
.history-block{ display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; }
.history-block img{ width:100%; height:340px; object-fit:cover; }
/* The family story: short paragraphs, comfortable line spacing, easy to read. */
.history-story p{ text-align:left; hyphens:none; line-height:1.85; font-size:1.04rem; max-width:58ch; margin-bottom:1.2em; }

/* Then & Now — before/after drag slider. The "Then" photo sits on top and
   is clipped at the divider position (--pos). */
.ba-slider{
  --pos:50%;
  position:relative; margin-top:28px; aspect-ratio:16/9; border-radius:var(--radius-clay); overflow:hidden;
  cursor:ew-resize; user-select:none; -webkit-user-select:none; touch-action:pan-y;
  box-shadow:-9px -9px 20px var(--clay-hi), 12px 12px 26px var(--clay-lo);
}
.ba-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ba-img--then{ clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.ba-label{ position:absolute; top:16px; z-index:2; padding:6px 14px; border-radius:var(--radius-pill); background:rgba(18,29,26,.72); color:#F4F1EA; font-size:var(--fs-12); font-weight:700; letter-spacing:.08em; text-transform:uppercase; pointer-events:none; }
.ba-label--then{ left:16px; }
.ba-label--now{ right:16px; }
.ba-handle{ position:absolute; top:0; bottom:0; left:var(--pos); z-index:3; width:4px; margin-left:-2px; background:#F9F6EE; box-shadow:0 0 0 1px rgba(18,29,26,.25); }
.ba-grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:700; letter-spacing:2px; color:#241d0f; white-space:nowrap;
  background:linear-gradient(155deg, var(--gold-strong), var(--gold)); box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.ba-handle:focus-visible{ outline:none; }
.ba-handle:focus-visible .ba-grip{ outline:3px solid var(--teal); outline-offset:3px; }
@media(max-width:620px){ .ba-slider{ aspect-ratio:4/3; } }
@media(max-width:800px){ .history-block{ grid-template-columns:1fr; } .history-block img{ order:-1; height:240px; } }

/* 5. Staff & Team — a clean row of expanding panels. Collapsed members
   show just their photo and name; clicking one expands it smoothly to
   reveal their full identity, role, and story, while the others settle
   into a tidy narrow strip alongside it (not a chaotic overlapping fan). */
.team-carousel{ margin-top:36px; }
.team-stack{
  display:flex; gap:12px; height:420px; border-radius:30px; overflow:hidden;
  box-shadow:-9px -9px 20px var(--clay-hi), 12px 12px 26px var(--clay-lo);
  transition:box-shadow 420ms var(--ease-clay);
}
.team-stack:hover{ box-shadow:-10px -10px 22px var(--clay-hi), 13px 13px 28px var(--clay-lo), 0 12px 30px -12px rgba(197,160,89,.3); }
.team-card{
  position:relative; flex:1 1 0; min-width:0; overflow:hidden; cursor:pointer; padding:0;
  transition:flex-grow 620ms var(--ease-clay), box-shadow 420ms var(--ease-clay), filter 420ms var(--ease-clay);
  border-radius:0; border:none;
}
.team-card:active{ filter:brightness(.94); }
[data-motion="reduce"] .team-card:active{ filter:none; }
/* Neutralize the generic clay hover-lift for this component — a card
   translating upward inside the row's own overflow:hidden mask clips
   oddly; the expand-on-click interaction is the primary affordance here. */
.team-card:hover{ transform:none; box-shadow:none; }
.team-card.is-front{ flex-grow:4.2; }
.team-card-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0; transition:transform 620ms var(--ease-clay), filter 420ms ease; }
.team-card-photo--empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding-bottom:90px; background:linear-gradient(160deg, #2F6F7A, #14211D); color:#EADFC4; font-size:var(--fs-12); font-weight:700; letter-spacing:.08em; text-transform:uppercase; text-align:center; }
.team-card:not(.is-front) .team-card-photo--empty span{ display:none; }
.team-card:not(.is-front) .team-card-photo{ filter:saturate(.82) brightness(.86); }
.team-card:not(.is-front):hover .team-card-photo{ transform:scale(1.06); filter:saturate(1) brightness(.95); }
.team-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(18,29,26,.88) 0%, rgba(18,29,26,.15) 55%, transparent 75%); pointer-events:none; }

.team-card-body{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:20px; color:#F9F6EE; }
.team-card-body h3{ color:#F9F6EE; font-size:1.05rem; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.team-card-role{ color:#EADFC4; font-weight:700; font-size:var(--fs-12); text-transform:uppercase; letter-spacing:.06em; display:none; align-items:center; gap:6px; white-space:nowrap; }
.team-card.is-front .team-card-role{ display:flex; }
.team-card-bio{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease-clay), opacity .35s ease; opacity:0; font-size:var(--fs-14); color:#F4F1EA; text-align:left; margin:0; }
.team-card.is-front .team-card-bio{ max-height:160px; opacity:1; margin-top:12px; }
.team-card:not(.is-front) .team-card-body h3{ font-size:.86rem; writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; height:110px; margin:0; }
.team-card:not(.is-front) .team-card-body{ padding:16px 0 16px 10px; display:flex; align-items:flex-end; }

/* A small "favorite spot" chip that expands into a tooltip — the micro-interaction the brief asks for. */
.team-spot{ position:absolute; top:14px; right:14px; z-index:2; width:32px; height:32px; border-radius:50%; background:rgba(249,246,238,.92); display:none; align-items:center; justify-content:center; cursor:help; border:none; }
.team-card.is-front .team-spot{ display:flex; }
.team-spot .tip{ position:absolute; top:40px; right:0; background:var(--text); color:var(--bg); font-size:.72rem; font-weight:600; padding:8px 12px; border-radius:10px; white-space:nowrap; opacity:0; transform:translateY(-4px); pointer-events:none; transition:all .2s ease; }
.team-spot:hover .tip, .team-spot:focus-visible .tip{ opacity:1; transform:translateY(0); }

.team-controls{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:18px; }
.team-dots{ display:flex; gap:8px; }
.team-dots button{ width:9px; height:9px; border-radius:50%; border:none; background:var(--border-soft); cursor:pointer; padding:0; transition:all 380ms var(--ease-clay); }
.team-dots button:hover{ background:var(--gold-strong); opacity:.6; }
.team-dots button[aria-selected="true"]{ background:var(--gold); width:22px; border-radius:6px; }
@media(max-width:700px){
  .team-stack{ height:auto; flex-direction:column; }
  .team-card{ height:70px; flex:none !important; }
  .team-card.is-front{ height:340px; }
  .team-card:not(.is-front) .team-card-body h3{ writing-mode:horizontal-tb; transform:none; height:auto; }
  .team-card:not(.is-front) .team-card-body{ padding:14px 18px; align-items:center; }
}

/* Ethos band */
.ethos-band{ background:linear-gradient(160deg, #1C2A26, #14211D); text-align:center; margin:0; }
.ethos-inner{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.ethos-icon{ font-size:2.4rem; color:var(--gold); margin-bottom:6px; }

/* Eco badges */
.eco-badges{ display:flex; flex-wrap:wrap; gap:14px; }
.eco-badge{ padding:16px 20px; min-width:190px; }
.eco-badge-head{ display:flex; align-items:center; gap:10px; font-weight:700; cursor:pointer; }
.eco-badge-explain{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease-clay); font-size:var(--fs-14); color:var(--text-muted); }
.eco-badge.is-open .eco-badge-explain{ max-height:100px; margin-top:8px; }

/* Tour teaser */
.tour-teaser{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:34px; }
.tour-video-wrap{ margin-top:16px; border-radius:var(--radius-clay-sm); overflow:hidden; aspect-ratio:16/9; background:#0e1613; display:flex; align-items:center; justify-content:center; }
.tour-video-wrap iframe{ width:100%; height:100%; border:0; }

/* Balanced About page typography and a medium-sized Then & Now feature. */
.page-intro .container{max-width:1120px}
.page-intro .container>p:not(.eyebrow){max-width:860px!important;text-align:justify;line-height:1.8}
#then-and-now .container{max-width:1120px}
#then-and-now h2{font-size:clamp(1.65rem,3vw,2.25rem);line-height:1.2;margin-bottom:10px}
#then-and-now .container>p.muted{max-width:760px!important;text-align:justify;line-height:1.7;margin-bottom:18px}
#then-now{width:100%;max-width:880px;aspect-ratio:16/8.5;margin-inline:auto;overflow:hidden;border-radius:24px}
#then-now .ba-img{width:100%;height:100%;object-fit:cover}
#then-now .ba-handle{touch-action:pan-y}
/* Justified reading copy across About sections, without affecting headings or labels. */
#main-content section p:not(.eyebrow):not(.muted.no-justify):not(.flip-hint){text-align:justify;text-justify:inter-word;line-height:1.7}
@media(max-width:700px){#then-now{aspect-ratio:4/3;border-radius:18px}.page-intro .container>p:not(.eyebrow){font-size:1rem!important}}