/* ==========================================================================
   Loop Recruitment: contact page stylesheet
   Section styles for contact-us.html only: page intro, contact (the IA's
   04.01 splitter, 04.02 client and 04.03 candidate merged into one, with
   the audience choice as the form's first field), team contacts, referral
   prompt. Shared styles (reset, base typography, nav, footer, buttons,
   .container, .loop-mark, .team-card) live in stylesheet.css. Must be
   linked AFTER stylesheet.css so these rules win ties.

   Rhythm follows the homepage: 80px section padding, 24px at mobile, a
   1440px container throughout, and a radius vocabulary of 12 / 20 / 100.

   Colour has one job each. Dark is the action, so the submit button is
   dark. Purple is interactive: what you can click, what you have chosen,
   what has focus. Dividers are grey hairlines. The four canvas colours
   appear only as each person's own tint in the team section.
   ========================================================================== */

/* No top padding on the wrapper. It had 61px to clear the fixed nav, but
   that band has no background of its own, so body white showed through it
   the moment the page was pulled down and the fixed nav stayed put. The
   nav offset is folded into the intro's own padding instead, so the dark
   section runs underneath the nav. Same approach as the homepage hero. */

/* Shared entrance. Same values the homepage uses on its own sections, so
   the two pages move the same way. Halted under reduced motion below. */
.reveal{opacity:0.35;transform:translateY(12px);transition:opacity 900ms cubic-bezier(0.25,1,0.5,1), transform 900ms cubic-bezier(0.25,1,0.5,1);}

.reveal.is-visible{opacity:1;transform:translateY(0);}

/* ── Load entrance ──────────────────────────────────────────────────────
   Resting state is plain visible CSS. The .entrance class, added by the head
   script and removed once the document is ready, supplies only the START
   state, so the transition runs toward the declared value instead of that
   value being owned by an animation's fill. Kill the transition and every
   element still lands visible. The head script explains what went wrong the
   other way round.

   Timings match the homepage: 2000ms ease for a fade, 1600ms for the rise,
   300ms between elements. The DELAYS do not. The homepage starts its hero at
   2100ms because it waits for the logo bloom to finish around 2000ms. There
   is no logo sequence here, so this chain starts immediately rather than
   holding an empty screen for two seconds. Order and stagger are unchanged. */
.c-intro-title{transition:opacity 2000ms ease 200ms;}

.c-intro-sub{transition:opacity 2000ms ease 500ms;}

.c-contact-main{transition:opacity 1600ms ease 700ms, transform 1600ms ease 700ms;}

.c-quick-links{transition:opacity 2000ms ease 1300ms;}

.entrance .c-intro-title,
.entrance .c-intro-sub,
.entrance .c-quick-links{opacity:0;}

/* The form is the one element that rises as well as fades. */
.entrance .c-contact-main{opacity:0;transform:translateY(8px);}

.accent{color:#c49aff;}

/* ── 04.01 AUDIENCE SPLITTER ── */

/* ── 04.01 PAGE INTRO ── */

.c-intro{background:var(--dark);padding:141px 52px 72px;}

.c-intro-title{font-size:clamp(2.25rem,4.5vw,3.5rem);font-weight:800;letter-spacing:-0.035em;line-height:1.05;color:#fff;max-width:17ch;margin-bottom:20px;}

.c-intro-sub{font-size:1.0625rem;line-height:1.7;color:rgba(255,255,255,0.62);max-width:560px;}

/* The operative sentence, lifted out of the dimmed paragraph around it.
   Follows the homepage's `.aud-highlight` pattern of brightening a span
   inside body copy rather than restyling the whole block. */
.c-intro-highlight{color:#fff;}

/* ── 04.02 / 04.03 CONTACT ── */

.c-contact{background:var(--light);padding:72px 52px 88px;}

/* Form left, quick routes right. The rail stops the wide gutter from
   being dead space, which is what it was when the form sat alone. */
.c-contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,290px);gap:clamp(40px,5vw,80px);align-items:start;}

/* Purple has exactly one job on this page: interactive. It marks what you
   can act on and what you have chosen. It is deliberately NOT the submit
   button, which is dark, so a state and a control never look alike. */
.c-contact-main{background:#fff;border-radius:20px;padding:40px;
  --accent:var(--purple);
  --accent-soft:rgba(123,79,224,0.18);
  --accent-wash:rgba(123,79,224,0.06);
  /* Not in the brand palette, which has no error colour. Darkened from the
     canvas coral #FF7A7A so it belongs, and dark enough to pass contrast as
     text on white at 5.1:1. Replace if Loop specifies one. */
  --error:#C43D3D;
  --error-soft:rgba(196,61,61,0.18);
  /* Audience markers, used on the chip only. #89C4FF is the bottom stop of
     the Loop mark gradient, so it is genuinely brand. #FF9B85 is not: it
     exists only in the homepage .aud component and is in no guideline.
     Awaiting Loop's sign-off, or swap for the canvas coral #FF7A7A. */
  --hiring:#89C4FF;
  --hiring-wash:rgba(137,196,255,0.13);
  --looking:#FF9B85;
  --looking-wash:rgba(255,155,133,0.13);}

/* Audience picker. Real radios, visually hidden, so keyboard and screen
   reader behaviour comes for free and the swap needs no JavaScript. */
.c-choice-group{border:none;padding:0;margin:0 0 26px;}

.c-choice-legend{font-size:0.8125rem;font-weight:600;color:var(--dark);padding:0;margin-bottom:14px;}

.c-choice-options{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* The radios are the anchor targets for #hiring and #looking, so a link from
   the homepage scrolls to a 1px box sitting 59px inside the panel, which
   buries the panel and its legend behind the fixed nav. The margin lands the
   panel's top edge about 24px below the nav instead. 144 = 61 nav + 24 gap
   + 59 from panel top to radio. */
.c-choice-input{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;margin:0;pointer-events:none;scroll-margin-top:156px;}

.c-choice{display:flex;align-items:flex-start;gap:14px;padding:18px;border-radius:14px;cursor:pointer;
  border:1.5px solid rgba(12,9,22,0.12);background:#fff;
  transition:border-color 200ms ease, background 200ms ease;}

.c-choice:hover{border-color:rgba(12,9,22,0.3);}

.c-choice-icon{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:rgba(12,9,22,0.05);color:var(--dark);transition:background 200ms ease;}

.c-choice-text{display:flex;flex-direction:column;gap:3px;}

.c-choice-name{font-size:0.9375rem;font-weight:800;color:var(--dark);letter-spacing:-0.02em;}

.c-choice-detail{font-size:0.8125rem;line-height:1.5;color:#6a6a6a;}

/* Selected. The whole card takes its audience colour: edge, wash and chip.
   No purple, which read as a second hue fighting the chip.

   These colours are light, so the 1.5px edge alone is under the 3:1 that a
   UI boundary needs. The state does not rest on it: the chip goes from grey
   to filled, the card takes a wash, and a 1px shadow doubles the edge
   without shifting layout. Three signals, one hue. */
#hiring:checked + .c-choice{border-color:var(--hiring);background:var(--hiring-wash);box-shadow:0 0 0 1px var(--hiring);}

#looking:checked + .c-choice{border-color:var(--looking);background:var(--looking-wash);box-shadow:0 0 0 1px var(--looking);}

/* The chip is the only place the audience colours go. As a border or as text
   on this white panel they measure 1.8:1 and 2.0:1, which is why the selected
   edge and wash stay purple. Filled, with a dark glyph, they read at 10:1. */
#hiring:checked + .c-choice .c-choice-icon{background:var(--hiring);color:var(--dark);}

#looking:checked + .c-choice .c-choice-icon{background:var(--looking);color:var(--dark);}

/* Focus has to be visible whether or not the card is selected, and it has to
   be distinguishable FROM selected. The audience colours cannot do it: on
   white they are 1.8:1 and 2.0:1, under the 3:1 a focus indicator needs, and
   an earlier version tinted the ring at 13% alpha which was invisible. A dark
   outline sits outside the card, reads as focus rather than choice, and holds
   contrast on any of these backgrounds. */
.c-choice-input:focus-visible + .c-choice{outline:2px solid var(--dark);outline-offset:2px;}

/* One card is checked in the markup, so the page always opens on a working
   form. An empty panel waiting for a click wastes the first screen and
   makes everyone pay an interaction before seeing anything. Switching is
   one click and the other card is right there.

   Both forms are visible by default, which is the fallback for any browser
   without :has. Where :has is supported only the checked one shows. */

.c-form-intro{font-size:0.9375rem;line-height:1.7;color:#6a6a6a;max-width:34em;}
/* 34em, not a ch value. The ch unit is the width of "0", and Inter's zero is
   far wider than its average lowercase, so 62ch resolved to 681px and never
   applied inside a 620px form. 34em lands at about 65 characters. */

/* Quick routes for anyone who would rather not fill a form in. */
.c-quick-links{display:flex;flex-direction:column;gap:30px;padding-top:6px;}

.c-quick-links-heading{font-size:1rem;font-weight:800;color:var(--dark);letter-spacing:-0.02em;margin-bottom:8px;}

.c-quick-links-link{font-size:0.875rem;font-weight:600;color:var(--purple);text-decoration:none;border-bottom:1px solid rgba(123,79,224,0.3);transition:border-color 200ms ease;word-break:break-word;}

.c-quick-links-link:hover{border-color:var(--purple);}

/* Form controls */

.c-form{display:flex;flex-direction:column;gap:22px;}

.c-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;}

.c-field{display:flex;flex-direction:column;gap:8px;min-width:0;}

.c-label{font-size:0.8125rem;font-weight:600;color:var(--dark);}

.c-optional{color:#8a8a8a;font-weight:500;}

.c-input,.c-select,.c-textarea{
  font-family:inherit;font-size:0.9375rem;color:var(--dark);
  padding:13px 16px;border-radius:12px;
  border:1px solid rgba(12,9,22,0.14);
  background:#fff;width:100%;
  transition:border-color 200ms ease, box-shadow 200ms ease;
}

.c-textarea{min-height:132px;resize:vertical;line-height:1.6;}

.c-input:focus,.c-select:focus,.c-textarea:focus{
  outline:none;border-color:var(--accent,var(--purple));
  box-shadow:0 0 0 3px var(--accent-soft,rgba(123,79,224,0.14));
}

/* #a8a8a8 measured 2.4:1 on white, which fails for text. These placeholders
   carry real guidance now, not just a hint, so they need to be readable.
   #767676 is 4.54:1 and still clearly lighter than an entered value. */
.c-input::placeholder,.c-textarea::placeholder{color:#767676;}

/* Prefixed field. The wrapper carries the border, radius and focus ring so
   the fixed prefix sits inside the same box as the input and the whole thing
   reads as one control. The input's own chrome is stripped. */
.c-prefixed-field{
  display:flex;align-items:center;width:100%;max-width:420px;
  border:1px solid rgba(12,9,22,0.14);border-radius:12px;background:#fff;
  transition:border-color 200ms ease, box-shadow 200ms ease;
}

.c-prefixed-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}

.c-prefix{
  padding:13px 0 13px 16px;font-size:0.9375rem;color:#767676;
  white-space:nowrap;user-select:none;
}

.c-input--prefixed{border:none;background:transparent;padding-left:1px;}

.c-input--prefixed:focus{border-color:transparent;box-shadow:none;}

/* Validation. The native bubble cannot be styled, so it is suppressed and
   replaced with an inline message. `novalidate` is set in JavaScript rather
   than in the markup, so with JavaScript off the browser still validates,
   just with its own bubble. */
.c-input[aria-invalid="true"],
.c-select[aria-invalid="true"],
.c-textarea[aria-invalid="true"]{border-color:var(--error);}

.c-input[aria-invalid="true"]:focus,
.c-select[aria-invalid="true"]:focus,
.c-textarea[aria-invalid="true"]:focus{border-color:var(--error);box-shadow:0 0 0 3px var(--error-soft);}

.c-error{font-size:0.8125rem;line-height:1.5;color:var(--error);}

.c-select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230C0916' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:42px;}

/* Reassurance sits on a hairline rule rather than in a tinted box, which
   is the treatment the homepage uses to separate a block of text. */
/* Sits under the button, where the hesitation actually is, rather than above
   it behind a rule. The rule was furniture: the button already separates
   this from the fields. Pulled up from the form's 22px gap so it reads as
   attached to the action rather than as another block. */
.c-reassure{
  font-size:0.8125rem;line-height:1.6;color:#6a6a6a;
  margin-top:-8px;max-width:52ch;
}

/* Clipped, not parked off-screen at left:-9999px.

   The old technique was the only thing on this page sitting outside the
   viewport, and it let the page scroll sideways on iOS Safari. Chrome shows
   nothing because it ignores leftward overflow; Safari does not always, so
   the emulator reported a clean 375px while a real iPhone scrolled.

   Clipping gives it no position outside the layout at all, so there is
   nothing to scroll to. It stays rendered rather than display:none, which
   matters: a honeypot that is not rendered is one some bots know to skip.
   The field still submits, and tabindex="-1" plus aria-hidden in the markup
   keep it away from keyboards and screen readers. */
.c-honeypot{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* Belt and braces for the same problem. Scoped to this file, which only the
   contact page loads, because the homepage has four position:sticky blocks
   and overflow-x on an ancestor turns them into scroll containers and breaks
   them. Nothing on this page is sticky, and nothing measured wider than the
   viewport at 320, 375 or 390, so this clips nothing that should be visible. */
html,body{overflow-x:hidden;}

.c-submit{
  align-self:flex-start;font-family:inherit;cursor:pointer;border:none;
  background:var(--dark);color:#fff;padding:14px 28px;border-radius:100px;
  font-size:0.9375rem;font-weight:700;letter-spacing:-0.01em;
  transition:opacity 200ms ease;
}

.c-submit:hover{opacity:0.85;}

/* Confirmation. This stands in place of the form, so it has to read as a
   finished thing rather than a notice tacked onto one. It was a single line
   of text under a hairline rule, which looked like the form had failed to
   clear rather than like anything had happened.

   The mark takes the audience colour the person chose, which is the one
   place those colours already carry meaning on this page. Same treatment as
   the selected picker chip: filled, with a dark glyph, which measures 10:1.
   As a border or as text these tints are 1.8:1 and 2.0:1 on white, so they
   stay out of the type. */
.c-success{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:4px 0;
}

/* Required because of the rule above. The hidden attribute works through a
   UA stylesheet rule, [hidden]{display:none}, which any author display
   declaration outranks. The old .c-success had no display of its own, so
   hidden worked; adding display:flex silently broke it and both
   confirmations rendered at once, one for each audience. */
.c-success[hidden]{display:none;}

/* Focused by the script so the confirmation is where the keyboard and any
   screen reader land. It is a container, not a control, so it takes no ring. */
.c-success:focus{outline:none;}

.c-success-mark{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--dark);
}

#sent-hiring .c-success-mark{background:var(--hiring);}

#sent-looking .c-success-mark{background:var(--looking);}

.c-success-title{
  font-size:1.375rem;font-weight:800;letter-spacing:-0.03em;
  line-height:1.15;color:var(--dark);
}

.c-success-body{
  font-size:0.9375rem;line-height:1.7;color:#6a6a6a;max-width:34em;
}

.c-success-link{
  font-size:0.875rem;font-weight:600;color:var(--purple);text-decoration:none;
  border-bottom:1px solid rgba(123,79,224,0.3);transition:border-color 200ms ease;
}

.c-success-link:hover{border-color:var(--purple);}

@supports selector(:has(*)){
  .c-form{display:none;}
  .c-contact-main:has(#hiring:checked) .c-form--hiring{display:flex;}
  .c-contact-main:has(#looking:checked) .c-form--looking{display:flex;}

  /* After a submission the confirmation stands in place of the form.

     These have to match the reveal rules above on ID, not just add an
     attribute. :has(#hiring:checked) carries that ID's specificity, so the
     reveal scores (1,3,0) while an attribute-plus-class version of this
     scored only (0,4,0) and quietly lost. The result was a confirmation
     sitting on top of a still-visible, still-submittable form. Matching the
     ID brings this to (1,4,0), and it wins. */
  .c-contact-main[data-sent]:has(#hiring:checked) .c-form--hiring,
  .c-contact-main[data-sent]:has(#looking:checked) .c-form--looking{display:none;}

  /* The picker goes too. Leaving "Which are you?" and two live cards above a
     confirmation offers a choice that no longer does anything, and makes the
     panel read as a form that failed to clear rather than one that is done. */
  .c-contact-main[data-sent] .c-choice-group{display:none;}
}

/* ── 04.04 TEAM CONTACTS ── */

.c-team{background:var(--dark);padding:80px 52px;overflow:hidden;}
/* overflow:hidden matches .s-team on the homepage. The parallax lags the
   inner container downward on entry, and this keeps that offset inside the
   section instead of letting it push toward the referral strip below. The
   clip is never visible: the offset is at its maximum only while the
   section's top is level with the bottom of the viewport, and it has
   decayed to almost nothing by the time the lower content is on screen. */

.c-team-head{max-width:600px;margin-bottom:48px;}

.c-team-title{font-size:clamp(2rem,3.5vw,3rem);font-weight:800;letter-spacing:-0.035em;line-height:1.08;color:#fff;margin-bottom:18px;}

.c-team-sub{font-size:1rem;line-height:1.75;color:rgba(255,255,255,0.6);max-width:520px;}

.c-team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}

/* Reuses .team-card and its photo/info primitives from stylesheet.css.
   This card is a container of links rather than a single link, so the
   pointer cursor is reset and the text is inverted for the dark ground. */
.c-person{cursor:default;}

/* The shared photo box carries a light lavender placeholder gradient, which
   is right on the homepage's light section and wrong on this dark one. It
   also showed: the rounded corner clip antialiases the bottom edge and bled
   a hairline of that gradient under each photo. Matching the section ground
   makes any bleed invisible, and a missing photo would read as a dark box
   rather than a light one. */
/* Square, not the shared 3/4 portrait.

   The homepage introduces these four people, so tall portraits earn their
   space there. This section is a directory: its job is the email, phone and
   LinkedIn under each name, and at 3/4 each card ran about 420px of photo
   before any of that appeared. Arriving from the homepage's "Talk to any of
   us" link, the first screen was almost entirely the same photos and names
   you had just scrolled past, with the contact rows at the very bottom edge
   and clipped off below a 900px viewport. Square pulls them up 105px per
   card and stops the two sections reading as the same component at the same
   scale, which was the other half of the problem.

   No crop is involved either way: the source files are 956x956, so the 3/4
   box was scaling them to fill the height and cutting 52px off each side.
   Square is their native ratio, so this shows more of each photo, not less.
   The 560px breakpoint below already squares them for the avatar row, so
   this only brings the wide layout into line with what the narrow one does.
   Its aspect-ratio declaration is now redundant, left in place so the rule
   stays readable on its own. */
.c-person .team-photo{background:var(--dark);aspect-ratio:1/1;}

/* The photo is a link to that person's LinkedIn, with the same badge the
   homepage cards use.

   The card itself is still a div, and contact.css already refuses to colour
   the name on hover because that implied the whole card was clickable. This
   does not reintroduce that problem: the badge appears on the photo, and
   the photo genuinely is a link now, so the affordance is honest. A badge
   over a dead photo would have been the lie.

   The anchor is tabindex="-1" and aria-hidden, because the same destination
   is already reachable from the properly named "LinkedIn profile for ..."
   link below. That is the redundant-clickable-region pattern: the mouse
   gets a bigger target, the keyboard and screen reader get one clean stop
   instead of two identical ones. */
.c-person-photo{display:block;text-decoration:none;}

.c-person .team-photo::before{
  content:'';
  position:absolute;
  bottom:14px;right:14px;
  width:24px;height:24px;
  z-index:2;
  pointer-events:none;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z'/%3E%3C/svg%3E") no-repeat center;
  background-size:contain;
  filter:drop-shadow(0 1px 3px rgba(12,9,22,0.5));
  opacity:0;
  transform:translateY(4px);
  transition:opacity 400ms ease, transform 400ms ease;
}

.c-person:hover .team-photo::before{opacity:1;transform:translateY(0);}

.c-person .team-name{color:#fff;}

/* The name carries the person's colour on hover. It used to stay white:
   the card is a div, and an earlier version turned the name the shared
   purple, which read as a second hue against the tint and implied the whole
   card was clickable. Both objections are gone. It takes the person's own
   colour now rather than a competing one, and the photo inside the card is
   a real link, so a hover response is honest.

   All four clear 4.5:1 on --dark: 5.07, 11.62, 7.80 and 6.81:1. The 300ms
   colour transition comes from .team-name in the shared layer. */
.c-person:hover .team-name{color:var(--tint,#c49aff);}

/* The shared .team-role purple is tuned for the light homepage section, so
   it is replaced here. The role holds this one value in both states: the
   hover colour moved up to the name, and colouring both meant two lines
   changing at once for a single pointer, which read as the card flashing
   rather than responding. 11.04:1 on --dark. */
.c-person .team-role{color:rgba(255,255,255,0.75);}

.c-person .team-spec{color:rgba(255,255,255,0.45);line-height:1.5;}

.c-person-links{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.08);}

/* Email is the action, so it leads. Phone and LinkedIn sit quieter. */
/* Email leads on size and weight, not on colour. All three links share one
   hover, grey to white, so nothing in the card needs its own behaviour.
   Scoped to beat `.c-person-links a`, which previously won on font-size and
   meant the email was never actually larger. */
.c-person-links a.c-person-email{font-size:0.8125rem;font-weight:600;}

.c-person-links a,.c-person-links span{font-size:0.75rem;color:rgba(255,255,255,0.5);text-decoration:none;transition:color 200ms ease;word-break:break-word;}

.c-person-links a:hover{color:#fff;}

.c-person-linkedin{display:inline-flex;align-items:center;gap:6px;}

.c-person-linkedin svg{flex-shrink:0;opacity:0.55;transition:opacity 200ms ease;}

.c-person-links a.c-person-linkedin:hover svg{opacity:1;}

/* ── 04.05 REFERRAL PROMPT ── */

/* A quiet strip above the footer, not a full height closer. The arc canvas
   is the homepage's closer and stays there. */
.c-page-end{background:var(--dark);}

.c-referral{background:var(--dark);padding:0 52px 96px;}

.c-referral-inner{
  max-width:1440px;margin:0 auto;
  border-top:1px solid rgba(255,255,255,0.08);padding-top:64px;
  display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;
}

.c-referral-title{font-size:clamp(1.5rem,2.5vw,2rem);font-weight:800;letter-spacing:-0.03em;color:#fff;margin-bottom:10px;}

.c-referral-sub{font-size:0.9375rem;line-height:1.7;color:rgba(255,255,255,0.55);max-width:520px;}

/* ── RESPONSIVE ── */

@media(max-width:1024px){
  /* Rail drops under the form rather than squeezing it. */
  .c-contact-grid{grid-template-columns:1fr;gap:44px;max-width:720px;}
  .c-team-grid{grid-template-columns:1fr 1fr;gap:32px;}
}

@media(max-width:768px){
  .c-intro{padding:125px 24px 56px;}
  .c-contact{padding:56px 24px 72px;}
  .c-contact-main{padding:28px 24px;border-radius:16px;}
  /* 61 nav + 16 gap + 59 from panel top to radio at this padding. Measured. */
  .c-choice-input{scroll-margin-top:136px;}
  .c-choice-options{grid-template-columns:1fr;}
  .c-team{padding:64px 24px;}
  .c-referral{padding:0 24px 72px;}
  .c-row{grid-template-columns:1fr;}
}

/* Below this the four portraits would fill the screen and bury the email
   addresses, which are the point of the section. The card turns into a
   compact row: small square avatar, details beside it. */
@media(max-width:560px){
  .c-team-grid{grid-template-columns:1fr;gap:24px;}
  .c-person{flex-direction:row;gap:16px;align-items:flex-start;}
  .c-person .team-photo{width:84px;flex-shrink:0;aspect-ratio:1/1;}
  .c-person .team-info{flex:1;min-width:0;}
}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;}
  /* Belt and braces. The head script already declines to add .entrance under
     reduced motion, so these four are never given a start state to be stuck
     in. Kept so the resting values are stated outright rather than depending
     on that script having run. */
  .c-intro-title,.c-intro-sub,.c-contact-main,.c-quick-links{opacity:1;transform:none;}
}