/* ValuFlor — team page (/who-we-are/). Listed in that page's front matter: "css": ["/css/team.css"].
   The cards, group headings and grid live in site.css (.rule-head, .people, .person, .bento, .tile, .cta-std);
   this file adds to them. Bands down the page: hero + stats (page theme) → orange ticker → leadership (flip) →
   the team by group (page theme) → hiring (flip) → standard closing CTA (orange). */

/* ── hero: heading and lede beside a jobsite photo, then the stats bento ── */
.th{border-bottom:0}
.th__in{--py:clamp(44px,6vw,92px)}
.th__top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4.6vw,76px);align-items:stretch}
.th__copy{display:flex;flex-direction:column;justify-content:center}
.th__h{font-size:clamp(3rem,6.2vw,5.6rem);max-width:11ch}
.th__copy .lede--hero{max-width:52ch}
/* the first-screen image paints at once: no lazy load, no clip reveal, only a slow settle */
.th__media{position:relative;min-height:clamp(340px,36vw,540px)}
.th__ph{position:absolute;inset:0;margin:0}
.th__ph img{object-position:30% 50%}
@keyframes thSettle{from{transform:scale(1.08)}to{transform:scale(1.02)}}
.js .th__ph img{animation:thSettle 2.4s var(--ease-out) both}
html.rm .th__ph img{animation:none}
.th__seal{position:absolute;left:0;top:0;z-index:3;transform:translate(-44%,-36%);pointer-events:none}
.th__seal .spin{width:clamp(118px,10.5vw,156px)}
.th__bento{margin-top:clamp(40px,5vw,72px)}
.th__big{display:block;font:800 clamp(2.6rem,5vw,4.6rem)/.88 var(--head);letter-spacing:-.055em;color:var(--vfink)}
.tile--line{background:linear-gradient(150deg,var(--vfpanel2),var(--vfpanel));border-top:3px solid var(--vfrust)}
.th__bento .tile{transition:transform .5s var(--ease-out),border-color .3s ease,box-shadow .5s ease}
@media (hover:hover){
  .th__bento .tile:hover{transform:translateY(-6px);box-shadow:var(--vflift)}
  .th__bento .tile:not(.tile--acc):hover{border-color:color-mix(in srgb,var(--vfacc) 60%,var(--vfline))}
}
@media (max-width:760px){
  .th__top{grid-template-columns:1fr}
  .th__media{min-height:0;aspect-ratio:16/10}
  .th__seal{display:none}
}
/* tablets: the bento runs on 6 columns, so the last stat tile takes the full row instead of leaving a hole */
@media (min-width:561px) and (max-width:900px){.th__bento>.tile--line{grid-column:span 6}}
@media (max-width:560px){
  .th__bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .th__bento>.th__half{grid-column:span 1!important}
  .th__bento .tile{min-height:170px;gap:22px}
  .th__half .stat__l{letter-spacing:.1em}
}

/* ── orange ticker: the section around it keeps the band full width while the words drift ── */
.tt{position:relative;overflow:hidden;border-block:1px solid rgba(28,17,8,.18)}
.tt .ticker{border:0;margin-inline:-6vw}

/* ── people cards (shared by both sizes) ───────────────────────────────── */
.person__img{position:relative;overflow:hidden}
.person__img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--vfacc);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease-out)}
.person:hover .person__img::after,.person:focus-within .person__img::after{transform:none}
.person h3{transition:color .3s ease}
.person:hover h3,.person:focus-within h3{color:var(--vfacct)}
/* LinkedIn: a full 44px target at every size, text and arrow centred in it */
.person a{display:inline-flex;align-items:center;align-self:flex-start;gap:8px;min-height:44px}

/* no headshot: a text card on purpose, not an empty photo box. Brand mark and branch on top, the name set large
   at the foot. It sits in the same grid row as the photo cards, so it takes their height. */
.person--text{background:linear-gradient(165deg,var(--vfpanel2),var(--vfpanel) 62%)}
.person--text::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--vfrust)}
.person--text::after{content:"";position:absolute;width:78%;aspect-ratio:1;right:-26%;top:22%;border:1.5px solid var(--vfline2);transform:rotate(45deg);
  pointer-events:none;transition:border-color .5s ease,transform .9s var(--ease-out)}
.person__top{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:clamp(18px,1.8vw,24px) clamp(17px,1.6vw,22px) 0}
.person__mark{width:34px;height:34px;flex:none;color:var(--vfink);transition:transform .7s var(--ease-out)}
.person__branch{font:600 11px/1.35 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--vfacct);text-align:right;padding-top:2px}
.person--text .person__b{position:relative;background:transparent;justify-content:flex-end;padding-top:clamp(70px,9vw,140px)}
.person--text h3{font-size:clamp(1.7rem,2.5vw,2.4rem);line-height:.96;letter-spacing:-.045em}
.person--text .person__role{margin-top:4px}
.person--text:hover::after,.person--text:focus-within::after{border-color:var(--vfacc);transform:rotate(45deg) scale(1.06)}
.person--text:hover .person__mark,.person--text:focus-within .person__mark{transform:rotate(90deg)}

/* ── executive leadership: two large cards, photo beside the name ─────── */
.tl__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.person--lg{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);border-radius:var(--r-l);min-height:clamp(300px,30vw,440px)}
.person--lg .person__img{min-height:100%}
.person--lg img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
/* the name stays on one line: its size follows the width of the text column */
.person--lg .person__b{padding:clamp(22px,2.6vw,38px);gap:12px;justify-content:flex-end;container-type:inline-size}
.person--lg h3{font-size:clamp(1.5rem,13.4cqi,3.5rem);line-height:.92;letter-spacing:-.05em;white-space:nowrap}
.person--lg .person__role{font:600 11.5px/1.45 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--vfacct)}
.person--lg a{margin-top:16px;padding:0 18px;border:1px solid var(--vfline2);border-radius:999px;color:var(--vfink);
  transition:background-color .3s ease,border-color .3s ease,color .3s ease}
.person--lg a:hover,.person--lg a:focus-visible{background:var(--vfacc);border-color:var(--vfacc);color:var(--vfonacc)}
.person__n{position:absolute;top:clamp(18px,2.2vw,30px);right:clamp(18px,2.4vw,32px);font:800 clamp(3rem,5vw,4.8rem)/.8 var(--head);letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1.2px var(--vfline2);transition:color .5s var(--ease-out),-webkit-text-stroke-color .5s ease}
.person--lg:hover .person__n,.person--lg:focus-within .person__n{color:var(--vfacc);-webkit-text-stroke-color:var(--vfacc)}
@media (hover:hover){.person--lg:hover,.person--lg:focus-within{transform:translateY(-8px)}}
@media (max-width:1100px){.tl__grid{grid-template-columns:1fr}}
/* phones: the photo sits above the name, so the name gets the full card width */
@media (max-width:560px){
  .person--lg{grid-template-columns:1fr;min-height:0}
  .person--lg .person__img{min-height:0;aspect-ratio:5/4}
  .person--lg img{object-position:center 22%}
  .person--lg .person__b{padding:22px 22px 24px}
  .person--lg .person__role{font-size:11px}
  .person__n{display:none}
}

/* ── the team by group ─────────────────────────────────────────────────── */
.team__group{margin-top:clamp(48px,6vw,80px)}
.team__group:first-child{margin-top:0}
.tg .rule-head{gap:20px}
.tg .rule-head>:first-child{white-space:normal}
.tg__h{font:800 clamp(1.5rem,2.6vw,2.3rem)/1.04 var(--head);letter-spacing:-.035em;color:var(--vfink);margin:0}
.tg .people{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:22px}
.tg .person__b{padding:18px 18px 19px}
.tg .person--text .person__b{padding-top:clamp(70px,9vw,140px)}
/* Sales, Finance and the main line share one row, so no row ends in an empty column */
.tg__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(48px,6vw,80px);align-items:stretch}
.tg__row>.team__group{margin-top:0;display:flex;flex-direction:column}
.tg__row .people{grid-template-columns:1fr;flex:1}
.tg__wide{grid-column:span 2}
.tg__reach{flex:1;margin-top:22px;background:var(--vf-orange);border-color:var(--vf-orange);transition:transform .5s var(--ease-out),box-shadow .5s ease}
@media (hover:hover){.tg__reach:hover,.tg__reach:focus-within{transform:translateY(-8px);box-shadow:var(--vflift)}}
.tg__reach-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.tg__reach .spin{width:clamp(96px,9vw,132px);margin:-6px -6px 0 0}
.tg__reach .stat__l{color:#3A2412;margin-top:18px}
.tg__tel{display:block;font:800 clamp(2.2rem,4.6vw,4.4rem)/.92 var(--head);letter-spacing:-.05em;color:#1C1108;
  background:linear-gradient(#1C1108,#1C1108) left bottom/0 3px no-repeat;padding-block:6px;width:max-content;max-width:100%;transition:background-size .5s var(--ease-out)}
.tg__tel:hover,.tg__tel:focus-visible{color:#1C1108;background-size:100% 3px}
.tg__mail{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;font:600 13px/1 var(--mono);letter-spacing:.06em;color:#1C1108;text-decoration:underline;text-underline-offset:4px}
.tg__mail:hover{color:#3A2412}
@media (max-width:900px){
  .tg .people,.tg__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tg__row .people{grid-template-columns:1fr}
  .tg__wide{grid-column:1/-1}
  .tg__reach{min-height:200px}
}
@media (max-width:460px){
  .tg__row{gap:12px}
  .tg .person__b{padding:14px 13px 15px}
  .tg .person--text .person__b{padding-top:56px}
  .tg .person h3{font-size:1rem}
  .tg .person--text h3{font-size:1.45rem}
  .tg .person__role{font-size:11px}
  .person__top{padding:14px 13px 0}
  .person__mark{width:26px;height:26px}
}
/* phones: small mono caps never drop below 12px */
@media (max-width:700px){.person a,.person__branch,.person--lg .person__role{font-size:12px;letter-spacing:.1em}}

/* ── hiring: heading on the left, what we hire for and the two ways in on the right ── */
.tj{border-bottom:0}
.tj__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:end}
.tj__h{max-width:13ch}
.tj__side .sub{margin-top:0;max-width:50ch}
.tj__side .cta-row{margin-top:26px}
@media (max-width:860px){.tj__in{grid-template-columns:1fr;gap:24px}}