/* QLS v3 "Plant Floor". Documentary. Photo-led, forest and navy in alternation, a full-bleed hero loop and full-bleed stills with the copy set into the image,
   a horizontal "who we place" strip, the talent form on a champagne panel that rises over a still. */
:root{
  --focus:var(--gold-d);
  --ink:#F1E8D0;
  --ink-soft:rgba(241,232,208,.84);
  --line:rgba(241,232,208,.22);
  --gutter:clamp(20px,4.5vw,72px);
  --max:1360px;
  --top-h:72px;
}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:var(--top-h);background:var(--navy)}
body{background:var(--navy);color:var(--ink-soft);font-size:1.2rem;line-height:1.62;overflow-x:clip}
.nowrap{white-space:nowrap}
a{color:inherit}
p{margin:0 0 1em}p:last-child{margin-bottom:0}
em{font-family:var(--serif);font-style:italic}

/* ---------- type ---------- */
.cap{font-family:var(--serif);font-weight:400;font-size:.8rem;letter-spacing:var(--track);text-transform:uppercase;color:var(--ink);margin:0 0 18px}
.cap--gold{color:var(--gold-d)}
.h2{font-size:clamp(2rem,1.2rem + 3vw,3.8rem);line-height:1.04;letter-spacing:-.008em;color:var(--ink);max-width:18ch;text-wrap:balance}
.intro{font-size:clamp(1.22rem,1rem + .45vw,1.3rem);line-height:1.55;max-width:52ch;margin:22px 0 0}

/* ---------- top bar ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--top-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);transition:background .7s var(--ease)}
.top.is-solid{background:var(--navy);box-shadow:0 1px 0 var(--line)}
/* functional scrim: the links sit over sky at the top of the loop */
.top::before{content:"";position:absolute;left:0;right:0;top:0;height:140px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(11,31,58,.9) 0%,rgba(11,31,58,.74) 32%,rgba(11,31,58,0) 100%);transition:opacity .7s var(--ease)}
.top.is-solid::before{opacity:0}
/* monogram at 28px: the Q is about .79 of the monogram height, so the 72px bar leaves a Q of clear space above and below it */
.top__mark{display:inline-flex;height:28px;margin-left:max(0px,calc(28px * .79 - var(--gutter)))}
.top__mark img{height:28px;width:auto}
.top__nav{display:flex;gap:clamp(18px,3vw,40px)}
.top__nav a{font-family:var(--sans);font-weight:600;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:8px 0;border-bottom:1px solid transparent;transition:border-color .5s var(--ease)}
.top__nav a:hover,.top__nav a:focus-visible{border-bottom-color:var(--gold-d)}
@media (max-width:760px){
  /* phones: the four links live in a slate at the bottom of the screen, in thumb reach */
  .top__nav{position:fixed;left:0;right:0;bottom:0;height:56px;background:rgba(11,31,58,.97);border-top:1px solid var(--line);justify-content:space-around;align-items:center;gap:0;padding:0 8px;z-index:60}
  .top__nav a{font-size:.62rem;letter-spacing:.12em;padding:12px 4px;border-bottom:0}
  body{padding-bottom:56px}
  /* a focused field scrolls clear of the slate */
  html{scroll-padding-bottom:80px}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 26px 13px;font-family:var(--sans);font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;line-height:1;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease)}
.btn--champagne{background:var(--champagne);color:var(--pine);border-color:var(--champagne)}
.btn--champagne:hover{background:var(--pale);border-color:var(--pale)}
.btn--line{background:rgba(11,31,58,.35);color:var(--ink);border-color:rgba(241,232,208,.6)}
.btn--line:hover{border-color:var(--ink);background:rgba(11,31,58,.6)}
.btn--navy{background:var(--navy);color:var(--white);border-color:var(--navy)}
.btn--navy:hover{background:rgba(11,31,58,.84)}
.btn--block{width:100%;margin-top:8px}

/* ---------- hero ---------- */
/* --mw is the Interlock width; its Q is .24 of that, and the clear space above, left and below the mark is tied to it */
.hero{--mw:min(260px,52vw);position:relative;min-height:100svh;display:grid;grid-template-rows:auto 1fr;padding:calc(var(--top-h) + var(--mw) * .24) var(--gutter) 28px;isolation:isolate;overflow:hidden}
.hero__pic{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--navy)}
/* 55% holds both the coordinator and the driver whole at every width down to 761px. A 390 frame is only about a quarter
   of the loop's width, so it cannot hold both; it holds the coordinator on the radio, which is the frame the client kept. */
.hero__video{width:100%;height:100%;object-fit:cover;object-position:0% 45%}
@media (max-width:760px){.hero__video{object-position:47% 45%}}
/* functional legibility scrim only: one soft light source from the right of the loop, deepened down the page and across
   the copy column. The horizontal ramp now reaches past the tagline, which sits further right than the old copy block did. */
.hero__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,31,58,.45) 0%,rgba(11,31,58,.2) 24%,rgba(11,31,58,.72) 54%,rgba(11,31,58,.96) 100%),linear-gradient(270deg,rgba(11,31,58,.64) 0%,rgba(11,31,58,.46) 52%,rgba(11,31,58,.16) 80%,rgba(11,31,58,0) 100%)}
@media (max-width:760px){.hero__scrim{background:linear-gradient(180deg,rgba(11,31,58,.5) 0%,rgba(11,31,58,.26) 16%,rgba(11,31,58,.66) 30%,rgba(11,31,58,.86) 46%,rgba(11,31,58,.93) 64%,rgba(11,31,58,.97) 100%)}}
.hero__mark{width:var(--mw);margin:0 0 0 max(0px,calc(var(--mw) * .24 - var(--gutter)))}
.hero__mark img{width:100%;height:auto}
.hero__copy{align-self:end;max-width:1120px;padding:clamp(calc(var(--mw) * .24),6.5vh,88px) 0 0}
.hero__head{display:grid;grid-template-columns:1fr;gap:16px 0;margin:0 0 26px}
.hero__title{font-size:clamp(2.8rem,1.4rem + 6vw,6.4rem);line-height:.98;letter-spacing:-.015em;color:var(--white);max-width:11ch;margin:0;text-shadow:0 2px 24px rgba(11,31,58,.35)}
/* the second tagline, with weight: Garamond italic at about half the H1, champagne against the white H1 */
.hero__tag{margin:0;font-size:clamp(1.75rem,1rem + 2.2vw,3.2rem);line-height:1.12;color:var(--champagne);text-shadow:0 2px 20px rgba(11,31,58,.45)}
.hero__lede{font-size:clamp(1.1rem,1rem + .5vw,1.3rem);line-height:1.5;max-width:52ch;color:var(--ink);margin:0 0 26px}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px}
/* one quiet Pause/Play control: a small ringed icon in the hero's lower right, shown by main.js only once the loop is playing */
.hero__pause{position:absolute;right:var(--gutter);bottom:34px;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid rgba(241,232,208,.45);border-radius:50%;background:rgba(11,31,58,.4);color:var(--gold-d);cursor:pointer;transition:border-color .5s var(--ease),background .5s var(--ease)}
.hero__pause:hover,.hero__pause:focus-visible{border-color:var(--gold-d);background:rgba(11,31,58,.65)}
.hero__pause-ico{display:block;width:8px;height:11px;border-left:2px solid currentColor;border-right:2px solid currentColor}
.hero__pause[aria-pressed="true"] .hero__pause-ico{width:0;height:0;border:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
@media (max-width:760px){.hero__pause{bottom:112px}}
@media (min-width:1000px){
  .hero__head{grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:0 clamp(28px,3.4vw,60px);align-items:end}
  .hero__tag{max-width:15ch;text-wrap:balance;padding-bottom:.18em}
}
.js-motion [data-in]{animation:rise 1.2s var(--ease) both}
.js-motion .hero .cap[data-in]{animation-delay:.3s}
.js-motion .hero__head[data-in]{animation-delay:.45s}
.js-motion .hero__lede[data-in]{animation-delay:.65s}
.js-motion .hero__actions[data-in]{animation-delay:.8s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------- strip (forest) ---------- */
.strip{background:var(--forest);padding:clamp(52px,7vw,96px) var(--gutter);text-align:center}
.strip__line{font-family:var(--serif);font-style:normal;font-size:clamp(1.6rem,1rem + 2.4vw,2.7rem);line-height:1.25;color:var(--ink);margin:0 0 20px;text-wrap:balance}
.strip__services{margin:0;font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap}
.tick{display:inline-block;width:1px;height:14px;background:var(--gold-d)}

/* ---------- services (navy): still left, list right ---------- */
.services{display:grid;grid-template-columns:1fr;background:var(--navy)}
.services__pic{margin:0;position:relative;overflow:hidden;min-height:56vw;background:var(--navy)}
/* 30% keeps the pair on the near half of the walkway; a tighter crop would push them toward the far end */
.services__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.services__body{padding:clamp(56px,8vw,120px) var(--gutter)}
.svc{list-style:none;margin:clamp(36px,5vw,56px) 0 0;padding:0}
.svc li{padding:26px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr;gap:8px 32px}
.svc li:last-child{border-bottom:1px solid var(--line)}
.svc h3{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.15;color:var(--ink);margin:0}
.svc p{margin:0;max-width:52ch}
.soon{display:inline-block;vertical-align:middle;margin-left:12px;font-family:var(--sans);font-weight:600;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d);border:1px solid rgba(201,169,97,.45);padding:6px 9px 5px;transform:translateY(-4px);white-space:nowrap}
@media (min-width:960px){
  .services{grid-template-columns:1fr 1fr}
  .services__pic{min-height:0}
  /* the 980px ceiling keeps the 16:9 source inside its own pixels on tall desktop windows */
  .services__pic{position:sticky;top:0;height:min(100vh,980px);align-self:start}
  .services__body{padding:clamp(72px,9vw,140px) clamp(40px,5vw,96px)}
}

/* ---------- roles (forest): a still that fades into the forest, the copy below it, then the strip ---------- */
.roles{background:var(--forest)}
/* Round four: two readers found the head hard to read where it was set over the office frame, on phones and while
   scrolling. The still now stands on its own and ramps to solid forest at its foot, and every word sits below it. */
.roles__lead{padding:0 0 clamp(48px,5vw,84px)}
.roles__pic{position:relative;margin:0;height:clamp(320px,50vw,680px);overflow:hidden;background:var(--forest)}
/* 110% and -5% give the scroll drift in main.js (yPercent -4 to 4) room without showing an edge */
.roles__pic img{position:absolute;left:0;top:-5%;width:100%;height:110%;object-fit:cover;object-position:center 0%}
.roles__pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,58,47,0) 58%,rgba(30,58,47,.55) 80%,rgba(30,58,47,1) 100%)}
@media (max-width:760px){
  .roles__pic{height:62vw}
  /* phones get no drift, so the frame sits flush and keeps the top of his head */
  .roles__pic img{top:0;height:100%;object-position:53% 0%}
}
.roles__set{max-width:calc(720px + 2 * var(--gutter));padding:clamp(4px,1vw,16px) var(--gutter) 0}
.roles__pin{padding:clamp(40px,6vw,80px) 0 clamp(56px,8vw,120px)}
.roles__track{list-style:none;margin:0;padding:0 var(--gutter);scroll-padding-left:var(--gutter);display:flex;gap:clamp(16px,2.5vw,32px);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.roles__track::-webkit-scrollbar{display:none}
.role{flex:0 0 78vw;max-width:520px;scroll-snap-align:start}
.role figure{margin:0}
/* the four cards are square: every source in the strip is 3:2, and a taller card would cut a head out of the pair */
.role img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:var(--forest)}
/* one object-position per card, in track order: the electricians, the schedule review, the counter, the desk */
.role:nth-child(1) img{object-position:55% 50%}
.role:nth-child(2) img{object-position:52% 50%}
.role:nth-child(3) img{object-position:60% 50%}
.role:nth-child(4) img{object-position:50% 50%}
.role figcaption{font-family:var(--serif);font-size:clamp(1.35rem,1.1rem + .9vw,1.8rem);line-height:1.2;color:var(--ink);padding:16px 0 0;border-top:1px solid var(--gold-d);margin-top:14px}
@media (min-width:960px){
  .role{flex:0 0 clamp(300px,26vw,420px)}
  /* motion on: the strip is pinned and pulled sideways by the scroll; motion off: it is a plain four-up row */
  html:not(.has-scrub) .roles__track{overflow:visible;display:grid;grid-template-columns:repeat(4,1fr)}
  html:not(.has-scrub) .role{flex:none;max-width:none}
  .has-scrub .roles__track{overflow:visible;padding-right:var(--gutter);width:max-content;min-width:100%}
  .has-scrub .roles__pin{overflow:hidden}
}

/* ---------- process (navy) ---------- */
.process{padding:clamp(72px,9vw,140px) var(--gutter);max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto}
.process__head{margin-bottom:clamp(36px,5vw,64px)}
.process__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,56px) clamp(24px,3vw,48px)}
.step{position:relative}
.step__pic{margin:0 0 20px;overflow:hidden}
/* 45% keeps the colleague at the left edge of the third frame whole; every source here is wider than the 3:2 card */
.step__pic img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:45% 50%;background:var(--navy)}
.step__n{display:block;font-family:var(--serif);font-size:1rem;color:var(--gold-d);letter-spacing:.2em;margin-bottom:10px}
.step h3{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.15;color:var(--ink);margin:0 0 10px}
.step p:last-child{max-width:40ch}
@media (min-width:860px){.process__steps{grid-template-columns:repeat(3,1fr)}}

/* ---------- talent: a still, then the champagne panel rises over its bottom edge ---------- */
.talent{position:relative;background:var(--forest);padding-bottom:clamp(56px,8vw,120px)}
.talent__pic{margin:0;height:min(62vh,640px);overflow:hidden;background:var(--forest)}
.talent__pic img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
/* at 390 the frame only fits two of the three at the table, so it holds the administrator and the man beside her whole */
@media (max-width:760px){.talent__pic img{object-position:18% 50%}}
.talent__panel{--focus:var(--navy);position:relative;z-index:2;background:var(--champagne);color:var(--pine);margin:-96px var(--gutter) 0;padding:clamp(28px,4vw,56px);display:grid;grid-template-columns:1fr;gap:32px clamp(32px,5vw,72px);max-width:var(--max);box-shadow:0 40px 80px -40px rgba(11,31,58,.5)}
@media (min-width:1360px){.talent__panel{margin-left:auto;margin-right:auto}}
.js-motion .talent__panel{transform:translateY(64px);opacity:0;transition:transform 1.2s var(--ease),opacity 1.2s var(--ease)}
.js-motion .talent__panel.is-up{transform:none;opacity:1}
.talent__panel .cap{color:var(--navy)}
.talent__panel .h2{color:var(--navy)}
.talent__panel .intro{color:var(--pine)}
.talent__support{margin:0;padding-top:24px;border-top:1px solid rgba(11,31,58,.2);max-width:52ch;color:var(--pine)}
.talent__support p{margin:0}
.talent__support p + p{margin-top:14px}
@media (min-width:1000px){
  .talent__panel{grid-template-columns:.9fr 1.1fr;grid-template-areas:"head form" "support form";align-items:start}
  .talent__head{grid-area:head}.talent__form{grid-area:form}.talent__support{grid-area:support}
}

/* ---------- forms ---------- */
.form{background:var(--white);padding:clamp(22px,3vw,36px);border:1px solid rgba(11,31,58,.12)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:560px){.form__row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;margin-bottom:16px}
.field label{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pine);margin-bottom:8px}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;line-height:1.3;color:var(--pine);background:var(--pale);border:1px solid rgba(21,33,27,.52);border-radius:0;padding:13px 14px;min-height:52px;width:100%;transition:border-color .4s var(--ease),background .4s var(--ease)}
.field input::placeholder,.field textarea::placeholder{color:rgba(21,33,27,.68)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy);background:var(--white)}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%230B1F3A' stroke-width='1.5'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.field textarea{resize:vertical;min-height:110px}
.field--file input{padding:11px 12px;border-style:dashed;cursor:pointer}
.field--file input::file-selector-button{font:inherit;font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--white);background:var(--navy);border:0;padding:9px 12px;margin-right:12px;cursor:pointer}
.field__file{font-size:.9rem;color:var(--pine);margin-top:6px;min-height:1.2em}
.fine{font-size:.98rem;line-height:1.5;color:rgba(21,33,27,.8);margin:16px 0 0}
.success{background:var(--white);border:1px solid rgba(11,31,58,.12);border-left:3px solid var(--gold);padding:clamp(26px,3vw,40px)}
.success p{font-family:var(--serif);font-size:clamp(1.3rem,1.1rem + .9vw,1.75rem);line-height:1.35;color:var(--navy);margin:0}
.success:focus-visible{outline:2px solid var(--navy)}
.form--dark{background:transparent;border:1px solid var(--line)}
.form--dark .field label{color:var(--ink)}
.form--dark .field input,.form--dark .field select,.form--dark .field textarea{background:var(--white);border-color:rgba(255,255,255,.3)}
.form--dark .field input:focus-visible,.form--dark .field select:focus-visible,.form--dark .field textarea:focus-visible{outline-color:var(--gold-d);border-color:var(--gold-d)}
.success--dark{background:transparent;border-color:var(--line);border-left-color:var(--gold-d)}
.success--dark p{color:var(--ink)}
.success--dark:focus-visible{outline-color:var(--gold-d)}

/* ---------- about (navy) ---------- */
.about{background:var(--navy);padding:clamp(72px,9vw,140px) var(--gutter) 0}
.about__inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,40px)}
.about .h2{max-width:none;text-wrap:wrap}
.about__cred{font-size:.5em;font-weight:400;letter-spacing:var(--track);white-space:nowrap;color:var(--gold-d)}
@media (min-width:1000px){.about__cred{display:block;margin-top:.35em}.about__cred-sep{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.about__title{margin:10px 0 10px;color:var(--gold-d)}
.about__body p{max-width:60ch}
@media (min-width:1000px){.about__inner{grid-template-columns:.9fr 1.1fr;gap:clamp(40px,5vw,88px);align-items:start}}
/* her line and her picture run across a forest band, edge to edge */
.about__band{background:var(--forest);margin:clamp(52px,7vw,104px) calc(-1 * var(--gutter)) 0;padding:clamp(40px,5vw,76px) var(--gutter);border-bottom:1px solid var(--line)}
.about__bandinner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,64px);align-items:center}
.about__pic{margin:0;width:min(280px,64vw);background:var(--champagne);padding:12px 12px 36px}
.about__pic img{width:100%;height:auto}
.quote{margin:0;max-width:900px}
.quote p{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,1rem + 2vw,2.6rem);line-height:1.3;color:var(--ink);margin:0;text-wrap:balance}
@media (min-width:900px){.about__bandinner{grid-template-columns:clamp(240px,21vw,304px) minmax(0,1fr)}.about__pic{width:100%}}

/* ---------- contact (forest) ---------- */
.contact{background:var(--forest);padding:clamp(72px,9vw,140px) var(--gutter)}
.contact__inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,80px)}
.contact .h2{font-size:clamp(1.7rem,1.1rem + 2vw,2.9rem);max-width:24ch}
.facts{margin:36px 0 0;display:grid;gap:18px}
.facts div{margin:0}
.facts dt{margin:0 0 6px;color:var(--gold-d)}
.facts dd{margin:0;font-family:var(--serif);font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem);color:var(--ink)}
.facts dd a{text-decoration:none;border-bottom:1px solid rgba(201,169,97,.45)}
.facts dd a:hover{border-color:var(--gold-d)}
.contact__pics{margin:44px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px)}
.contact__pic{margin:0;overflow:hidden}
.contact__pic img{width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover}
@media (min-width:1000px){.contact__inner{grid-template-columns:1fr 1fr;align-items:start}}
@media (max-width:560px){.contact__pics{grid-template-columns:1fr}}

/* ---------- footer (navy) ---------- */
.footer{--fmw:min(320px,70vw);background:var(--navy);padding:max(clamp(48px,6vw,80px),calc(var(--fmw) * .24)) var(--gutter) 36px;display:grid;gap:14px;justify-items:center;text-align:center;font-size:.9rem;color:rgba(241,232,208,.72);border-top:1px solid var(--line)}
.footer__mark{width:var(--fmw);height:auto;margin-bottom:calc(var(--fmw) * .24)}
.footer p{margin:0}
.footer a{text-decoration:none;border-bottom:1px solid rgba(241,232,208,.25)}
.footer a:hover{border-color:var(--gold-d)}

/* ---------- reveals and still fades ---------- */
.js-motion [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js-motion [data-reveal].is-in{opacity:1;transform:none}
.js-motion [data-wipe]{opacity:0;transition:opacity 1.2s var(--ease)}
.js-motion [data-wipe].is-in{opacity:1}

@media (max-width:480px){
  .cap{font-size:.74rem}
  .strip__services{font-size:.66rem;letter-spacing:.14em}
  .btn{font-size:.72rem;letter-spacing:.14em;padding-left:20px;padding-right:20px}
  .hero{--mw:min(200px,52vw)}
  .talent__panel{margin-top:-56px;padding:24px 18px}
}

/* phones: the copy block is tightened so the eyebrow line clears the coordinator's face in the loop */
@media (max-width:760px){
  .hero{padding-bottom:80px}
  .hero__head{gap:10px 0;margin-bottom:18px}
  .hero__lede{margin-bottom:20px}
}

/* pull quote attribution */
.quote__by{font-family:var(--serif);font-size:.8rem;letter-spacing:var(--track);text-transform:uppercase;color:var(--gold-d);margin:20px 0 0}

/* LinkedIn under the title: a small caps link, gold on dark, hairline underline */
.about__link{margin:0 0 28px}
.about__link a{font-family:var(--serif);font-size:.92rem;letter-spacing:var(--track);text-transform:uppercase;color:var(--gold-d);text-decoration:none;border-bottom:1px solid var(--gold-d);padding-bottom:4px;transition:border-color .5s var(--ease)}
.about__link a:hover,.about__link a:focus-visible{border-color:var(--gold-d)}

/* industries line under Who we place */
.roles__industries{margin:22px 0 0;max-width:52ch}
.roles__industries .label,.roles__industries .cap{display:block;margin:0 0 6px}

/* who we place: the five roles as hairline rows in the lead, ahead of the strip */
.roles__list{list-style:none;margin:28px 0 0;padding:0;font-family:var(--serif);font-size:clamp(1.3rem,1.05rem + 1vw,1.8rem);line-height:1.2;color:var(--ink);max-width:560px}
.roles__list li{display:flex;gap:16px;align-items:baseline;padding:12px 0;border-top:1px solid var(--line)}
.roles__list li:last-child{border-bottom:1px solid var(--line)}
.roles__list li::before{content:"";flex:none;width:22px;height:1px;background:var(--gold-d);transform:translateY(-.3em)}
.roles__industries{color:var(--ink-soft)}

/* wide screens: copy on the right over the quiet side of the loop, mark stays top left, pause moves to the lower left */
@media (min-width:1000px){
  .hero__copy{margin-left:auto;max-width:760px}
  .hero__pause{right:auto;left:var(--gutter)}
}

/* phones: the two faces sit too far apart for any tall crop of a 16:9 loop, so the loop becomes a band above the copy
   and both people stay in frame, as Kristina asked; the copy sits on navy beneath it */
@media (max-width:760px){
  .hero{min-height:0;display:block;padding:var(--top-h) 0 96px}
  .hero__pic{position:relative;inset:auto;height:62vw;margin:0;z-index:0}
  .hero__video{object-position:50% 45%}
  .hero__scrim{display:none}
  .hero__mark{width:min(200px,52vw);margin:24px var(--gutter) 0}
  .hero__copy{padding:18px var(--gutter) 0}
  .hero__title{text-shadow:none}
  .hero__pause{right:12px;bottom:auto;top:calc(var(--top-h) + 62vw - 48px)}
}
@media (max-width:760px){
  .hero__pic{height:52vw}
  .hero__mark{width:min(160px,42vw);margin-top:18px}
  .hero__copy{padding-top:12px}
  .hero .cap{font-size:.62rem;letter-spacing:.14em;margin-bottom:12px}
  .hero__title{font-size:2.55rem}
  .hero__tag{text-shadow:none;font-size:1.5rem}
  .hero__lede{margin-bottom:20px}
  .hero__pause{top:calc(var(--top-h) + 52vw - 48px)}
}

/* ---------- Cookie notice, Oct 21 ---------- */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:70;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;max-width:640px;margin:0 auto;padding:12px 16px;background:rgba(11,31,58,.97);border:1px solid rgba(201,169,97,.45);color:var(--ink);font-family:var(--sans);font-size:.84rem;line-height:1.4;box-shadow:0 10px 30px rgba(11,31,58,.35)}
.consent[hidden]{display:none}
.consent p{margin:0;flex:1 1 220px}
.consent__btns{display:flex;gap:8px}
.consent__btn{font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;border:1px solid rgba(241,232,208,.5);background:transparent;color:var(--ink);cursor:pointer;transition:border-color .5s var(--ease)}
.consent__btn:hover,.consent__btn:focus-visible{border-color:var(--gold-d)}
.consent__btn--yes{background:var(--champagne);color:var(--navy);border-color:var(--champagne)}
@media (max-width:760px){.consent{bottom:68px}}

/* ---------- Talent network handoff to Breezy, Oct 25 ---------- */
.register{display:grid;gap:18px;padding:clamp(22px,3vw,34px);border:1px solid var(--line);background:rgba(11,31,58,.04)}
.register__lead{margin:0;font-size:1.05rem;line-height:1.55}
.register .fine{margin:0}
.job--note{grid-template-columns:1fr;border-style:dashed}
.job--note .meta a{color:inherit;text-decoration:underline;text-underline-offset:3px}