/* ============================================================
   Meet the Team — compressed editorial layout
   Arch-top portraits (matching Before & After), inline-expanding
   bios, staggered team grid. Depends on :root tokens in site.css;
   entrance motion rides the .reveal system in depth-motion.css.
   ============================================================ */

/* ---------- hero (tightened ~30%) ---------- */
.about-hero{background:var(--c-ivory);padding:90px 0 66px}
@media (max-width:767px){.about-hero{padding:56px 0 44px}}
.about-hero-inner{max-width:880px;margin:0 auto;padding:0 80px;text-align:center}
@media (max-width:767px){.about-hero-inner{padding:0 24px}}
.about-hero .eyebrow{justify-content:center;margin-bottom:24px}
.about-hero h1{max-width:16ch;margin:0 auto 24px}
.about-hero .lead{max-width:56ch;margin:0 auto;color:var(--c-slate)}

/* ---------- shared frame treatment ----------
   One arch-top frame family for all six portraits. The warm-neutral
   backdrop (blush pulled toward ivory) sits behind every photo; the
   studio-white staff shots multiply onto it so their backgrounds take
   the same warm tint as the outdoor founder portraits' frame. */
.tm-frame{position:relative;overflow:hidden;border-radius:50% 50% 12px 12px / 30% 30% 12px 12px;background:color-mix(in oklab,var(--c-blush) 62%,var(--c-ivory));box-shadow:0 1px 2px rgba(15,79,87,0.06)}
.tm-frame img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(0.95) hue-rotate(-2deg)}
.tm-frame--studio img{mix-blend-mode:multiply}

/* ---------- read-more toggle ---------- */
.tm-more{appearance:none;background:none;border:0;padding:0;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-weight:600;font-size:14px;line-height:1;color:var(--c-sea-text);cursor:pointer;transition:color 200ms var(--ease-out)}
.tm-more .chev{transition:transform 250ms var(--ease-out)}
.tm-more[aria-expanded="true"] .chev{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){.tm-more:hover{color:var(--c-deep)}}
.tm-more:focus-visible{outline:2px solid var(--c-deep);outline-offset:3px}

/* ---------- inline bio expansion (founders) ---------- */
.tm-bio{display:grid;grid-template-rows:0fr;transition:grid-template-rows 250ms var(--ease-out)}
.tm-bio.open{grid-template-rows:1fr}
.tm-bio-inner{overflow:hidden;min-height:0;opacity:0;transform:translateY(8px);transition:opacity 250ms var(--ease-out),transform 250ms var(--ease-out)}
.tm-bio.open .tm-bio-inner{opacity:1;transform:none}
.tm-bio-inner p{font-family:var(--font-sans);font-size:16px;line-height:1.65;color:var(--c-ink);max-width:56ch;margin:16px 0 0}
.tm-bio-inner p:first-child{margin-top:20px}

/* ---------- co-owners ---------- */
.tm-founders{background:var(--c-pearl);padding:96px 0 104px}
@media (max-width:767px){.tm-founders{padding:72px 0 80px}}
.tm-founders-inner{max-width:var(--maxw);margin:0 auto;padding:0 80px}
@media (max-width:1023px){.tm-founders-inner{padding:0 48px}}
@media (max-width:767px){.tm-founders-inner{padding:0 24px}}
.tm-founders-head{margin:0 0 52px}
.tm-founders-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:72px;align-items:start}
.tm-founder .tm-frame{aspect-ratio:3/4;max-width:440px;margin-bottom:28px}
.tm-founder--offset{margin-top:96px}
.tm-founder--offset .tm-frame{max-width:404px}
.tm-name{font-family:var(--font-display);font-weight:400;font-size:34px;line-height:1.15;color:var(--c-deep);margin:0 0 8px}
@media (max-width:767px){.tm-name{font-size:28px}}
.tm-title{font-family:var(--font-sans);font-weight:600;font-size:15px;color:var(--c-slate);margin:0 0 18px}
.tm-hook{font-family:var(--font-sans);font-size:17px;line-height:1.6;color:var(--c-ink);max-width:46ch;margin:0 0 16px}
@media (max-width:1023px){
.tm-founders-grid{grid-template-columns:1fr;row-gap:64px}
.tm-founder--offset{margin-top:0}
.tm-founder--offset .tm-frame{max-width:440px}
}
@media (max-width:767px){.tm-founder .tm-frame{max-width:100%;aspect-ratio:4/5}}

/* ---------- team grid (staggered, varied frames) ---------- */
.team-inner{max-width:var(--maxw);margin:0 auto;padding:0 80px}
@media (max-width:1023px){.team-inner{padding:0 48px}}
@media (max-width:767px){.team-inner{padding:0 24px}}
.tm-team{padding-top:96px}
.team-header{max-width:760px;margin:0 0 72px}
@media (max-width:767px){.team-header{margin-bottom:48px}}
.team-header .eyebrow{margin-bottom:20px}
.team-header h2{max-width:28ch;margin:0}
.tm-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:32px;row-gap:40px}
.tm-card{display:flex;flex-direction:column;align-items:flex-start}
.tm-card .tm-frame{width:100%;margin-bottom:18px;border-radius:50% 50% 10px 10px / 24% 24% 10px 10px}
.tm-card .eyebrow{margin-bottom:8px}
.tm-tname{font-family:var(--font-sans);font-weight:600;font-size:19px;line-height:1.3;color:var(--c-ink);margin:0 0 10px}
.tm-hook--dim{font-family:var(--font-sans);font-size:15px;line-height:1.55;color:color-mix(in srgb,var(--c-ink) 60%,transparent);max-width:30ch;margin:0 0 12px;transition:color 200ms var(--ease-out)}
@media (min-width:1024px){
.tm-g0{grid-column:1/span 3}.tm-g0 .tm-frame{aspect-ratio:3/4}
.tm-g1{grid-column:4/span 3;margin-top:72px}.tm-g1 .tm-frame{aspect-ratio:4/5}
.tm-g2{grid-column:7/span 3;margin-top:28px}.tm-g2 .tm-frame{aspect-ratio:3/4}
.tm-g3{grid-column:10/span 3;margin-top:96px}.tm-g3 .tm-frame{aspect-ratio:4/5}
}
@media (min-width:640px) and (max-width:1023px){
.tm-grid{column-gap:24px;row-gap:56px}
.tm-g0{grid-column:1/span 6}.tm-g0 .tm-frame{aspect-ratio:3/4}
.tm-g1{grid-column:7/span 6;margin-top:48px}.tm-g1 .tm-frame{aspect-ratio:4/5}
.tm-g2{grid-column:1/span 6}.tm-g2 .tm-frame{aspect-ratio:3/4}
.tm-g3{grid-column:7/span 6;margin-top:48px}.tm-g3 .tm-frame{aspect-ratio:4/5}
}
@media (max-width:639px){
.tm-grid{grid-template-columns:1fr;row-gap:48px}
.tm-card{grid-column:1/-1;margin-top:0}
.tm-card .tm-frame{aspect-ratio:4/5}
}
@media (hover:hover) and (pointer:fine){
.tm-card .tm-frame img{transition:transform 200ms cubic-bezier(0.23,1,0.32,1)}
.tm-card:hover .tm-frame img{transform:scale(1.03)}
.tm-card:hover .tm-hook--dim{color:var(--c-ink)}
}

/* ---------- shared full-bio panel below the grid ---------- */
.tm-panel{grid-column:1/-1;display:grid;grid-template-rows:0fr;transition:grid-template-rows 250ms var(--ease-out)}
.tm-panel.open{grid-template-rows:1fr}
.tm-panel-inner{overflow:hidden;min-height:0;opacity:0;transform:translateY(8px);transition:opacity 250ms var(--ease-out),transform 250ms var(--ease-out)}
.tm-panel.open .tm-panel-inner{opacity:1;transform:none}
.tm-panel-body{border-top:1px solid var(--c-stone);padding:36px 0 8px}
.tm-panel-head{margin:0 0 20px}
.tm-panel-head .eyebrow{margin-bottom:6px}
.tm-panel-cols{column-count:2;column-gap:64px;max-width:1100px}
@media (max-width:767px){.tm-panel-cols{column-count:1}}
.tm-panel-cols p{font-family:var(--font-sans);font-size:16px;line-height:1.65;color:var(--c-ink);margin:0 0 16px;break-inside:avoid}

/* ---------- closing CTA band ---------- */
.tm-cta{background:var(--c-deep);padding:104px 32px 112px;text-align:center;position:relative;overflow:hidden;isolation:isolate}
@media (max-width:767px){.tm-cta{padding:76px 24px 84px}}
.tm-cta::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(120% 80% at 25% 0%,rgba(127,192,196,0.10) 0%,rgba(127,192,196,0) 55%);background-repeat:no-repeat}
.tm-cta h2{font-family:var(--font-display);font-weight:400;font-size:clamp(32px,4vw,44px);line-height:1.12;color:var(--c-ivory);margin:0 0 36px}
.tm-cta .btn-book{display:inline-flex;align-items:center;gap:8px;background:var(--c-sea);color:var(--c-ivory);font-family:var(--font-sans);font-weight:600;font-size:15px;padding:16px 30px;border-radius:999px;text-decoration:none;transition:transform 220ms var(--ease-out),box-shadow 220ms var(--ease-out),background-color 220ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.tm-cta .btn-book:hover{background:var(--c-sea-hover);transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,0.28)}.tm-cta .btn-book:hover .arrow{transform:translateX(3px)}}
.tm-cta .btn-book .arrow{transition:transform 220ms var(--ease-out)}
.tm-cta .btn-book:focus-visible{outline:2px solid var(--c-ivory);outline-offset:3px}

/* ---------- reduced motion: opacity only, no movement ---------- */
@media (prefers-reduced-motion:reduce){
.tm-bio,.tm-panel{transition:none}
.tm-bio-inner,.tm-panel-inner{transform:none;transition:opacity 200ms ease-out}
.tm-more .chev{transition:none}
.tm-card .tm-frame img{transition:none}
.tm-card:hover .tm-frame img{transform:none}
.tm-cta .btn-book{transition:none}
.tm-cta .btn-book:hover{transform:none}
}

/* Reciprocal link between the two About pages. Sits under the booking
   button so it never competes with it. .tm-cta is Deep Teal, so this
   uses light-on-dark values: Seafoam 6.71:1 and Ivory 8.54:1. */
.tm-cta-alt {
  margin: 20px 0 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-seafoam);
}
.tm-cta-alt a {
  color: var(--c-ivory);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .tm-cta-alt a:hover { color: var(--c-seafoam); }
}

/* ---------- Links out to the co-owners' own pages ----------
   Added when /team/<slug>/ shipped. The portrait, the name and an
   explicit text link all point at the same page; the portrait link
   carries an aria-label because the img alt describes the photograph
   rather than naming the destination. */
.tm-frame-link { display: block; text-decoration: none; }
.tm-frame-link:focus-visible { outline: 3px solid var(--c-deep); outline-offset: 4px; }
/* A portrait that navigates is a pressable element and has to answer to a
   press. 0.985 rather than the 0.97 used on buttons: the frame is ~440px
   tall, and the same ratio that reads as a click on a 52px button reads as
   a lurch on something that size. */
.tm-frame-link .tm-frame { transition: transform var(--d-press) var(--ease-out); }
.tm-frame-link:active .tm-frame { transform: scale(0.985); }
.tm-name-link { text-decoration: none; color: inherit; transition: color 200ms var(--ease-out); }
.tm-profile { margin: 16px 0 0; }
.tm-profile a {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 600; font-size: 14px; line-height: 1;
  color: var(--c-sea-text);                 /* 5.10:1 on Pearl */
  text-decoration: none;
  transition: color 200ms var(--ease-out);
}
.tm-profile .arrow { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .tm-name-link:hover { color: var(--c-sea-text); }
  .tm-frame-link:hover + .tm-name .tm-name-link { color: var(--c-sea-text); }
  .tm-profile a:hover { color: var(--c-deep); }
  .tm-profile a:hover .arrow { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .tm-name-link, .tm-profile a, .tm-profile .arrow { transition: none; }
  .tm-profile a:hover .arrow { transform: none; }
  /* The press feedback goes too: it is movement, and movement is what
     reduced motion asks us to drop. Colour feedback stays. */
  .tm-frame-link .tm-frame { transition: none; }
  .tm-frame-link:active .tm-frame { transform: none; }
}