/* ==========================================================================
   Trayee Business Solutions — brand-forward design system
   Palette from the logo mark. Photo-free by design; see PHOTO SLOTS below.

   PHOTO SLOTS (for later photography — drop in without redesigning):
     .hero__media          full-bleed, min 2400x1000, dark subject, focal right
     .band--photo          full-bleed band, min 2000x900, wide crop
     .team__photo          portrait tile, 800x800 square, head upper-third
   Until real photos exist these either use the light-trail image or stay
   as colour blocks. Nothing depends on an image to be legible.
   ========================================================================== */

:root{
  /* Brand */
  --orange:       #E8720C;
  --orange-deep:  #C55A05;
  --orange-light: #F5A200;
  --gold:         #FFC24A;
  --gold-pale:    #FFE3A8;

  --ink:          #191817;
  --ink-2:        #2E2E2E;
  --ink-soft:     #4A4A4A;
  --grey:         #6E6E6E;
  --grey-light:   #9A9A9A;

  --rule:         #E4E1DC;
  --bg:           #FFFFFF;
  --cream:        #FBF7F1;
  --sand:         #F3EDE3;
  --dark:         #171615;
  --dark-2:       #221F1D;

  /* Type */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --measure: 34rem;
  --wide: 74rem;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0; background:var(--bg); color:var(--ink-2);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--orange-deep); text-underline-offset:.15em; }
a:hover{ color:var(--ink); }
:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; }

h1,h2,h3,h4{
  font-family:var(--serif); font-weight:400; color:var(--ink);
  line-height:1.08; margin:0 0 .5em; letter-spacing:-.015em;
}
h1{ font-size:clamp(2.4rem, 1.5rem + 3.6vw, 4.6rem); }
h2{ font-size:clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem); }
h3{ font-size:clamp(1.2rem, 1.05rem + .6vw, 1.55rem); }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.wrap{ width:min(100% - var(--gutter)*2, var(--wide)); margin-inline:auto; }
.measure{ max-width:var(--measure); }

.skip{
  position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff;
  padding:.75rem 1.25rem; z-index:200;
}
.skip:focus{ left:.5rem; top:.5rem; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-head{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--rule);
}
.site-head__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding:.65rem 0;
}
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; flex-shrink:0; }
/* The mark carries fine hooked detail that turns to mush below ~40px. Larger,
   and pulled slightly out of the flow so the header bar does not grow with it. */
.brand img{
  height:52px; width:auto; display:block;
  margin:-6px 0;
}
.brand__name{
  font-family:var(--serif); font-size:1.9rem; color:var(--ink);
  letter-spacing:-.03em; line-height:1;
}
@media (max-width:40rem){
  .brand img{ height:42px; }
  .brand__name{ font-size:1.55rem; }
}

.nav{ display:flex; align-items:center; gap:.15rem; }
.nav a{
  font-size:.86rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none; padding:.55rem .75rem;
  white-space:nowrap; position:relative;
}
.nav a::after{
  content:""; position:absolute; left:.75rem; right:.75rem; bottom:.3rem;
  height:2px; background:var(--orange); transform:scaleX(0);
  transform-origin:left; transition:transform .2s ease;
}
.nav a:hover::after, .nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--ink); }
.nav .btn{ margin-left:.75rem; }
.nav .btn::after{ display:none; }

.btn{
  display:inline-block; background:var(--orange); color:#fff;
  padding:.8rem 1.6rem; text-decoration:none; border:2px solid var(--orange);
  font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover{ background:var(--orange-deep); border-color:var(--orange-deep); color:#fff; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
.btn--lg{ padding:1rem 2.2rem; font-size:.88rem; }

.nav-toggle{
  display:none; background:none; border:2px solid var(--ink); padding:.45rem .7rem;
  cursor:pointer; font-size:1.1rem; line-height:1; color:var(--ink);
}
@media (max-width:900px){
  .nav-toggle{ display:block; }
  .nav{
    position:absolute; inset:100% 0 auto 0; flex-direction:column; align-items:stretch;
    background:#fff; border-bottom:2px solid var(--orange);
    padding:.5rem var(--gutter) 1.25rem; gap:0; display:none;
    box-shadow:0 18px 40px rgba(0,0,0,.1);
  }
  .nav[data-open="true"]{ display:flex; }
  .nav a{ padding:.9rem .25rem; border-bottom:1px solid var(--rule); }
  .nav a::after{ display:none; }
  .nav .btn{ margin:1rem 0 0; text-align:center; }
}

/* ==========================================================================
   Hero — dark, full-bleed, oversized type
   ========================================================================== */
.hero{
  position:relative; background:var(--dark); color:#fff; overflow:hidden;
  border-bottom:6px solid var(--orange);
}
.hero__media{ position:absolute; inset:0; }        /* PHOTO SLOT */
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:70% center; opacity:.55;
}
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(102deg, rgba(15,14,13,.97) 0%, rgba(15,14,13,.88) 38%,
                                     rgba(15,14,13,.42) 72%, rgba(15,14,13,.25) 100%);
}
.hero__inner{ position:relative; padding:clamp(4.5rem, 12vw, 9rem) 0 clamp(4rem, 10vw, 7.5rem); }
.hero__kicker{
  font-size:.76rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1.6rem; display:flex; align-items:center; gap:.9rem;
}
.hero__kicker::before{ content:""; width:2.5rem; height:2px; background:var(--orange); }
.hero h1{ color:#fff; max-width:13ch; margin-bottom:1.3rem; }
.hero h1 em{ font-style:normal; color:var(--gold); }
.hero__lede{
  font-size:clamp(1.1rem, 1rem + .5vw, 1.35rem);
  color:rgba(255,255,255,.8); max-width:42ch; margin-bottom:2.4rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; }
.hero .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.5); }
.hero .btn--ghost:hover{ background:#fff; border-color:#fff; color:var(--ink); }

/* ==========================================================================
   Sections & bands
   ========================================================================== */
.section{ padding:clamp(4rem, 9vw, 7rem) 0; }
.section--cream{ background:var(--cream); }
.section--sand{ background:var(--sand); }
.section--dark{ background:var(--dark); color:rgba(255,255,255,.75); }
.section--dark h2,.section--dark h3{ color:#fff; }

.eyebrow{
  font-size:.74rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--orange); margin:0 0 1rem; font-weight:600;
  display:flex; align-items:center; gap:.8rem;
}
.eyebrow::before{ content:""; width:2rem; height:2px; background:var(--orange); flex:none; }
.section--dark .eyebrow{ color:var(--gold); }
.section--dark .eyebrow::before{ background:var(--gold); }

.section__head{ max-width:38rem; margin-bottom:clamp(2.5rem,5vw,4rem); }
.lede{ font-size:1.15rem; color:var(--ink-soft); }
.section--dark .lede{ color:rgba(255,255,255,.72); }

/* ---- Split: orange block beside a heading ---- */
.split{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:stretch; min-height:clamp(20rem,38vw,30rem);
}
@media (max-width:860px){ .split{ grid-template-columns:1fr; } }

.split__block{
  background:var(--orange); color:#fff;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(2.5rem,6vw,4rem); position:relative; overflow:hidden;
}
.split__block img{ width:min(78%, 19rem); position:relative; z-index:1; }
/* Concentric rings behind the mark. Circles rather than rotated squares: the
   mark is a six-pointed burst, and squares implied a fourfold geometry that
   fought it. */
.split__block::before,
.split__block::after{
  content:""; position:absolute; inset:14%;
  border:2px solid rgba(255,255,255,.28);
  border-radius:50%;
}
.split__block::before{ transform:scale(1.12); }
.split__block::after{ transform:scale(.82); opacity:.6; }

.split__body{
  background:var(--ink); color:rgba(255,255,255,.76);
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2.5rem,6vw,4.5rem);
}
.split__body h2{ color:#fff; }
.split__body .eyebrow{ color:var(--gold); }
.split__body .eyebrow::before{ background:var(--gold); }

/* ==========================================================================
   Numbered services — full-width rows, no cards
   ========================================================================== */
.rows{ border-top:2px solid var(--ink); }
.row{
  display:grid; grid-template-columns:auto auto minmax(0,13rem) minmax(0,1fr) auto;
  gap:clamp(1rem,2.5vw,2rem); align-items:baseline;
  padding:clamp(1.9rem,4vw,2.9rem) 0;
  border-bottom:1px solid var(--rule);
  text-decoration:none; color:inherit;
  transition:background .2s ease, padding-left .2s ease;
}
.row:hover{ background:var(--cream); padding-left:1rem; }
.row:hover .row__n{ color:var(--orange); }
.row:hover .row__go{ color:var(--orange); transform:translateX(4px); }
.row__n{
  font-family:var(--serif); font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);
  color:var(--grey-light); line-height:1; transition:color .2s ease;
}
.row__t{ font-family:var(--serif); font-size:clamp(1.4rem,1.1rem + 1.1vw,2rem); color:var(--ink); line-height:1.1; }
.row__d{ color:var(--grey); font-size:1rem; }
.row__go{ color:var(--grey-light); font-size:1.4rem; transition:color .2s ease, transform .2s ease; }

/* Line-art marks in the logo's idiom — heavy strokes, angular points. Stroke
   colour is inherited so the hover state moves the whole icon at once. */
.row__icon{
  width:clamp(3.4rem, 2.6rem + 2.4vw, 4.6rem); aspect-ratio:1; flex:none; align-self:center;
  fill:none; stroke:var(--ink); stroke-width:4;
  stroke-linecap:square; stroke-linejoin:miter;
  transition:stroke .2s ease;
}
.row__icon-fill{
  fill:var(--gold-pale); stroke:var(--ink); stroke-width:4;
  transition:fill .2s ease;
}
.row:hover .row__icon{ stroke:var(--orange-deep); }
.row:hover .row__icon-fill{ fill:var(--orange); }

@media (max-width:820px){
  .row{ grid-template-columns:auto auto 1fr; gap:.5rem 1.25rem; }
  .row__d{ grid-column:1 / -1; }
  .row__go{ display:none; }
  .row__icon{ width:2.4rem; }
}
@media (max-width:30rem){
  .row__icon{ display:none; }
}

/* ==========================================================================
   Three pillars — full-height colour columns
   ========================================================================== */
.triad{ display:grid; grid-template-columns:repeat(3,1fr); }
@media (max-width:860px){ .triad{ grid-template-columns:1fr; } }
.triad__col{
  padding:clamp(2.5rem,5vw,3.75rem) clamp(1.75rem,3vw,2.5rem);
  display:flex; flex-direction:column; min-height:clamp(18rem,26vw,24rem);
  position:relative; overflow:hidden;
}
.triad__col:nth-child(1){ background:var(--orange-deep); color:#fff; }
.triad__col:nth-child(2){ background:var(--orange); color:#fff; }
.triad__col:nth-child(3){ background:var(--orange-light); color:var(--ink); }
.triad__col:nth-child(1) h3,
.triad__col:nth-child(2) h3{ color:#fff; }
/* hairline separators so the columns read as three, not one gradient */
.triad__col + .triad__col{ box-shadow:inset 1px 0 0 rgba(255,255,255,.28); }
@media (max-width:860px){
  .triad__col + .triad__col{ box-shadow:inset 0 1px 0 rgba(255,255,255,.28); }
}
.triad__num{
  font-family:var(--serif); font-size:clamp(3.5rem,3rem + 3vw,5.5rem);
  line-height:.8; margin-bottom:1.25rem; letter-spacing:.02em;
  color:rgba(255,255,255,.85); display:block;
}
.triad__col:nth-child(3) .triad__num{ color:rgba(25,24,23,.6); }
.triad__num::after{
  content:""; display:block; width:2.5rem; height:3px; margin-top:1.1rem;
  background:currentColor; opacity:.5;
}
.triad__col h3{ font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem); margin-bottom:.6rem; }
.triad__col p{ font-size:1rem; opacity:.9; margin-top:auto; }

/* ==========================================================================
   Stat band — dark, big serif figures
   ========================================================================== */
.band{ background:var(--dark); color:#fff; padding:clamp(3rem,6vw,4.5rem) 0; }
.band__grid{
  display:grid; gap:clamp(1.5rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));
}
.band__item{ border-left:3px solid var(--orange); padding-left:1.25rem; }
.band__n{
  font-family:var(--serif); font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem);
  color:var(--gold); line-height:1.1; display:block; margin-bottom:.5rem;
  text-wrap:balance;
}
.band__l{ font-size:1rem; color:rgba(255,255,255,.78); letter-spacing:.03em; line-height:1.4; }

/* ==========================================================================
   CTA — orange full-bleed
   ========================================================================== */
.cta{
  background:var(--orange); color:#fff; text-align:center;
  padding:clamp(3.5rem,8vw,6rem) 0; position:relative; overflow:hidden;
}
/* When the CTA follows the triad, both are orange and the seam disappears.
   A dark rule restates the boundary without introducing a fourth colour. */
.triad + .cta{ border-top:6px solid var(--ink); }
.cta h2{ color:#fff; margin-bottom:.9rem; max-width:18ch; margin-inline:auto; }
.cta p{ color:rgba(255,255,255,.92); max-width:52ch; margin-inline:auto; margin-bottom:2.25rem; font-size:clamp(1.05rem,1rem + .35vw,1.2rem); }
.cta .btn{ background:#fff; color:var(--orange-deep); border-color:#fff; }
.cta .btn:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-foot{
  background:var(--dark); color:rgba(255,255,255,.62);
  padding:clamp(3.5rem,7vw,5rem) 0 2rem; font-size:.92rem;
  border-top:6px solid var(--orange);
}
.foot__grid{
  display:grid; gap:2.5rem; grid-template-columns:1.5fr 1fr 1fr;
  padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.12);
}
@media (max-width:760px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .foot__grid{ grid-template-columns:1fr; } }
.site-foot h4{
  color:#fff; font-family:var(--sans); font-size:.74rem; letter-spacing:.2em;
  text-transform:uppercase; margin-bottom:1.1rem;
}
.site-foot a{ color:rgba(255,255,255,.62); text-decoration:none; }
.site-foot a:hover{ color:var(--gold); }
.site-foot ul{ list-style:none; margin:0; padding:0; }
.site-foot li{ margin-bottom:.6rem; }
.foot__mark{ height:42px; width:auto; margin-bottom:1.25rem; }
.foot__iso{
  display:inline-block; margin-top:1.25rem; padding:.5rem .9rem;
  border:1px solid rgba(255,255,255,.25); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.78);
}
.foot__bottom{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  padding-top:1.5rem; font-size:.8rem; color:rgba(255,255,255,.42);
}
.foot__bottom a{ color:rgba(255,255,255,.42); }

/* ==========================================================================
   Page header (interior pages)
   ========================================================================== */
.phead{
  background:var(--dark); color:#fff; position:relative; overflow:hidden;
  border-bottom:6px solid var(--orange);
  padding:clamp(3.5rem,8vw,6rem) 0 clamp(3rem,6vw,4.5rem);
}
.phead::after{
  content:""; position:absolute; right:-6%; top:50%; width:min(36rem,52vw);
  aspect-ratio:1; transform:translateY(-50%); pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(232,114,12,.3) 0%, transparent 62%);
}
.phead .wrap{ position:relative; z-index:1; }
.phead h1{ color:#fff; max-width:18ch; margin-bottom:0; }
.phead__lede{
  color:rgba(255,255,255,.78); font-size:clamp(1.05rem,1rem + .4vw,1.25rem);
  max-width:48ch; margin-top:1.2rem;
}
.phead .eyebrow{ color:var(--gold); }
.phead .eyebrow::before{ background:var(--gold); }

.tri-mark{ color:var(--orange); width:100%; height:auto; display:block; }
.tri-mark--ghost{ color:rgba(255,255,255,.32); }

/* ==========================================================================
   Prose (policy pages, long-form)
   ========================================================================== */
.prose{ max-width:42rem; }
.prose h2{ font-size:clamp(1.4rem,1.15rem + 1vw,1.9rem); margin-top:2.75rem; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ margin-top:2rem; font-size:1.2rem; }
.prose ol,.prose ul{ padding-left:1.25rem; margin:0 0 1.1em; }
.prose li{ margin-bottom:.5rem; }
.prose strong{ color:var(--ink); }

/* ==========================================================================
   Feature: text + accent panel
   ========================================================================== */
.feature{
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); align-items:start;
}
@media (max-width:820px){ .feature{ grid-template-columns:1fr; } }
.panel{
  background:var(--ink); color:rgba(255,255,255,.8);
  padding:clamp(1.75rem,4vw,2.5rem); border-top:5px solid var(--orange);
}
.panel h3{ color:#fff; font-size:1.25rem; }
.panel--quote{
  background:var(--orange); color:#fff; border-top-color:var(--gold);
  font-family:var(--serif); font-size:clamp(1.2rem,1rem + .9vw,1.6rem); line-height:1.3;
}
.panel--quote p{ margin:0; }

/* Was max-width without a margin, which left it stranded to the left inside a
   centred wrap. Centred, on white so it lifts off the cream section behind it. */
.creed{
  background:#fff; border:2px solid var(--orange);
  padding:clamp(2rem,5vw,3.25rem); position:relative;
  max-width:48rem; margin-inline:auto;
  box-shadow:0 2px 0 0 var(--ink);
}
.creed::before{
  content:""; position:absolute; inset:.5rem; border:1px solid rgba(232,114,12,.35);
  pointer-events:none;
}
.creed p{
  font-family:var(--serif); font-size:clamp(1.1rem,1rem + .6vw,1.4rem);
  line-height:1.45; color:var(--ink); position:relative;
}
.creed p + p{ margin-top:1rem; }

/* ==========================================================================
   Workflow stages
   ========================================================================== */
/* Compressed service stages. The prose versions read like a procedure manual;
   these are cards so the sequence is scannable at a glance. */
.flow{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--rule);
  border:1px solid var(--rule); margin-top:2rem;
}
/* Seven steps split 4+3 under a 4-column grid, stranding one cell. A 12-column
   track lets the first four span 3 each and the last three span 4 each, so both
   rows fill completely. */
.flow--tight{ grid-template-columns:repeat(12,1fr); }
.flow--tight .step{ grid-column:span 3; }
.flow--tight .step:nth-child(n+5){ grid-column:span 4; }
.flow .step{
  background:#fff; padding:clamp(1.25rem,2.5vw,1.75rem);
  display:flex; flex-direction:column; counter-increment:step;
}
.flow{ counter-reset:step; }
.flow .step::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--serif); font-size:1.5rem; color:var(--orange);
  line-height:1; margin-bottom:.85rem;
}
.flow .step h3{ font-size:1.05rem; margin:0 0 .5rem; }
.flow .step p{ color:var(--ink-soft); font-size:.92rem; margin:0; }
.flow .step__tagline{
  margin-top:.75rem !important; font-size:.7rem !important; letter-spacing:.12em;
  text-transform:uppercase; color:var(--orange-deep) !important;
}
/* On cream sections the tiles need to stay white to read as tiles. */
.section--cream .flow .step{ background:#fff; }
@media (max-width:64rem){ .flow,.flow--tight{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:40rem){ .flow,.flow--tight{ grid-template-columns:1fr; } }

.svc{ scroll-margin-top:5rem; }
.svc + .svc{ margin-top:clamp(3.5rem,8vw,6rem); }
.svc__head{
  display:flex; align-items:baseline; gap:1.25rem; flex-wrap:wrap;
  padding-bottom:1.25rem; border-bottom:3px solid var(--ink); margin-bottom:1.75rem;
}
.svc__head h2{ margin:0; }
.svc__n{ font-family:var(--serif); font-size:1.6rem; color:var(--orange); }

/* ==========================================================================
   Team
   ========================================================================== */
/* Fixed 3 columns rather than auto-fit: with 4 non-lead members, auto-fit
   reflowed to leave one card stranded on its own row at some widths. */
.team{
  display:grid; gap:clamp(1.5rem,3vw,2.25rem);
  grid-template-columns:repeat(3,1fr);
  align-items:stretch;
}
@media (max-width:60rem){ .team{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:40rem){ .team{ grid-template-columns:1fr; } }
/* Bios differ a lot in length; without this the cards in a row end at
   different heights and the bottom edge looks accidental. */
.member{
  background:var(--cream); border-top:4px solid var(--orange);
  display:flex; flex-direction:column;
}
.member__body{ flex:1; }
.member__photo{ aspect-ratio:16/9; overflow:hidden; background:var(--sand); }
.member__photo img{ width:100%; height:100%; object-fit:cover; object-position:center 28%; }
.member__body{ padding:1.5rem 1.5rem 1.75rem; }
.member h3{ margin-bottom:.15rem; }
.member__role{
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange-deep); font-weight:600; margin-bottom:1rem; display:block;
}
.member p{ font-size:.95rem; color:var(--ink-soft); }
.member p + p{ margin-top:.8rem; }
.member--lead{ grid-column:1/-1; background:var(--sand); }
.member--lead .member__inner{
  display:grid; grid-template-columns:minmax(0,22rem) minmax(0,1fr); align-items:stretch;
}
@media (max-width:760px){ .member--lead .member__inner{ grid-template-columns:1fr; } }
.member--lead .member__photo{ aspect-ratio:auto; height:100%; min-height:15rem; }
.member--lead .member__body{ padding:clamp(1.75rem,3vw,2.5rem); }

/* ==========================================================================
   Forms
   ========================================================================== */
.form{ max-width:38rem; }
/* The application form has 12 fields; at 38rem the full-width ones stop
   halfway across a desktop page and the section reads as unfinished. */
.form--wide{ max-width:52rem; }
.field{ margin-bottom:1.35rem; }
.field label{
  display:block; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; color:var(--ink); margin-bottom:.45rem;
}
.field .req{ color:var(--orange-deep); }
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field input[type=date],
.field input[type=file],
.field select,
.field textarea{
  width:100%; padding:.8rem .9rem; font:inherit; font-size:1rem;
  border:2px solid var(--rule); background:#fff; color:var(--ink);
  border-radius:0; transition:border-color .15s ease;
}
.field textarea{ min-height:9rem; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--orange); outline:none;
}
.field__hint{ font-size:.82rem; color:var(--grey); margin-top:.4rem; }
.field--half{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.35rem; }
@media (max-width:600px){ .field--half{ grid-template-columns:1fr; } }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.notice{ padding:1rem 1.25rem; margin-bottom:2rem; border-left:5px solid; font-size:.98rem; }
.notice--ok{ background:#F1F8F1; border-color:#3E8E41; color:#245C28; }
.notice--err{ background:#FDF2F0; border-color:#C0392B; color:#8E2A1F; }
.notice ul{ margin:.5rem 0 0; padding-left:1.1rem; }
.notice p:first-child{ margin-bottom:0; }

.contacts{
  display:grid; gap:1.75rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  margin-top:2rem;
}
.contact-card{ border-left:4px solid var(--orange); padding-left:1.25rem; }
.contact-card h3{ font-size:1.15rem; margin-bottom:.1rem; }
.contact-card .role{
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--grey); display:block; margin-bottom:.75rem;
}
.contact-card a{ text-decoration:none; }
.contact-card a:hover{ text-decoration:underline; }

/* Job listings */
.jobs{ border-top:2px solid var(--ink); }
.job{ border-bottom:1px solid var(--rule); padding:clamp(1.5rem,3vw,2.25rem) 0; }
.job__top{ display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; align-items:baseline; }
.job__code{ font-family:var(--serif); color:var(--orange); font-size:1.1rem; letter-spacing:.05em; }
.job h3{ margin:0; }
.job__meta{ margin-left:auto; font-size:.85rem; color:var(--grey); }
.job__body{ margin-top:.9rem; color:var(--ink-soft); }
.job__body ul{ margin:.6rem 0 0; padding-left:1.15rem; }
.job__body li{ margin-bottom:.35rem; }

/* ==========================================================================
   Scale figures — the numbers from the company profile
   ========================================================================== */
/* Fixed 4 columns for 8 figures — auto-fit gave a 6+2 row that left four
   empty cells and a visibly unbalanced block. */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:2px solid var(--ink);
}
@media (max-width:64rem){ .stats{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:44rem){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stat{
  padding:clamp(1.6rem,3vw,2.4rem) clamp(1.1rem,2vw,1.6rem);
  border-bottom:1px solid var(--rule);
  border-right:1px solid var(--rule);
}
.stat:nth-child(4n){ border-right:0; }
@media (max-width:64rem){
  .stat:nth-child(4n){ border-right:1px solid var(--rule); }
  .stat:nth-child(3n){ border-right:0; }
}
@media (max-width:44rem){
  .stat:nth-child(3n),.stat:nth-child(4n){ border-right:1px solid var(--rule); }
  .stat:nth-child(2n){ border-right:0; }
}
.stat__n{
  display:block; font-family:var(--serif);
  font-size:clamp(2.6rem, 1.9rem + 2.6vw, 4rem); line-height:1;
  color:var(--orange-deep); letter-spacing:-.02em;
}
.stat__l{
  display:block; margin-top:.7rem; font-size:1.02rem; line-height:1.4;
  color:var(--ink-soft);
}
/* Which entity a number belongs to — Trayee is 23 years old, the group 34.
   Blurring the two would overstate Trayee, so each figure says which it is. */
.stat__src{
  display:block; margin-top:.5rem; font-size:.76rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--grey-light);
}
.section--dark .stats{ border-top-color:rgba(255,255,255,.3); }
.section--dark .stat{
  border-bottom-color:rgba(255,255,255,.14);
  border-right-color:rgba(255,255,255,.14);
}
/* The responsive border resets above name var(--rule); on the dark ground that
   would draw a pale line, so restate them in the dark palette. */
@media (max-width:64rem){
  .section--dark .stat:nth-child(4n){ border-right-color:rgba(255,255,255,.14); }
}
@media (max-width:44rem){
  .section--dark .stat:nth-child(3n),
  .section--dark .stat:nth-child(4n){ border-right-color:rgba(255,255,255,.14); }
}
.section--dark .stat__n{ color:var(--gold); }
.section--dark .stat__l{ color:rgba(255,255,255,.88); }
.section--dark .stat__src{ color:rgba(255,255,255,.55); }

/* ==========================================================================
   Clients
   ========================================================================== */
/* Client marks — one mixed field, no current/former split. Purely for visual
   weight, so the grid is fixed at 4 and the tiles are equal-height: a ragged
   last row reads as an incomplete list rather than a deliberate wall. */
/* ---- Client marquee ----------------------------------------------------
   Two rows scrolling in opposite directions. The opposing motion is what makes
   this read as designed rather than as a generic logo carousel, and it lets 19
   marks show at a comfortable size instead of being crushed into a 4-up grid.

   How the seamless loop works: each track contains its logos TWICE and the
   animation translates it by exactly -50%. At the end of the cycle the second
   copy sits precisely where the first began, so the reset is invisible. Any
   other distance, or an odd number of copies, gives a visible jump.

   The mask fades both edges so logos enter and leave rather than popping at a
   hard boundary. Hover pauses, so a visitor can actually look at a mark. */
.marquee{ display:flex; flex-direction:column; gap:clamp(.75rem,1.5vw,1.15rem); }
.marquee__row{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{
  display:flex; align-items:center;
  gap:clamp(.5rem,1.2vw,.9rem);
  list-style:none; margin:0; padding:0;
  width:max-content;
  animation:marquee-l 64s linear infinite;
}
.marquee__row--rev .marquee__track{ animation-name:marquee-r; }
.marquee__row:hover .marquee__track,
.marquee__track:focus-within{ animation-play-state:paused; }
@keyframes marquee-l{ from{ transform:translateX(0); }    to{ transform:translateX(-50%); } }
@keyframes marquee-r{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
/* Motion here is decorative — honour a reduced-motion preference by stopping it
   and letting the row sit still and scrollable, still perfectly readable. */
@media (prefers-reduced-motion:reduce){
  .marquee__track{ animation:none; transform:none; }
  .marquee__row{ overflow-x:auto; }
}
.brands li{
  background:#fff; border:1px solid var(--rule);
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(4.5rem,8vw,6rem);
  padding:1rem 1.5rem;
  flex:0 0 auto; width:13rem;
}
.brands li span{
  font-family:var(--serif); font-size:clamp(.95rem,.85rem + .45vw,1.25rem);
  color:var(--ink-soft); text-align:center; line-height:1.2;
}
/* Logo sizing. These 19 marks have genuinely different shapes — from a 6.4:1
   wordmark to a 1:1 seal — and no single max-width/max-height rule can make
   them look equally weighted, because "same height" and "same width" both
   mean "different apparent size" once the aspect ratios differ this much.
   So each is sized explicitly. The numbers are not hand-picked: every mark is
   solved from its own ratio to render at the same AREA (~4600 sq px), which is
   what the eye actually reads as "the same size", then clamped to the tile.
   Recompute rather than nudge these if a logo file is replaced. */
.brands li img{ object-fit:contain; }
.brands .b-airtel        { width:113px; height:41px; }
.brands .b-amex          { width: 64px; height:64px; }
.brands .b-aviva         { width:135px; height:34px; }
.brands .b-axis          { width:117px; height:39px; }
.brands .b-barclays      { width: 90px; height:51px; }
.brands .b-citi          { width: 93px; height:50px; }
.brands .b-dbs           { width:121px; height:38px; }
.brands .b-deutsche      { width:131px; height:35px; }
.brands .b-federal       { width:113px; height:41px; }
.brands .b-hdfc          { width:168px; height:26px; }
.brands .b-hsbc          { width:162px; height:28px; }
.brands .b-indusind      { width:117px; height:39px; }
.brands .b-ing           { width: 97px; height:47px; }
.brands .b-nia           { width: 64px; height:64px; }
.brands .b-phonepe       { width:126px; height:37px; }
.brands .b-scb           { width:117px; height:39px; }
.brands .b-scope         { width:117px; height:39px; }
.brands .b-utilityaid    { width:137px; height:34px; }
.brands .b-yes           { width:114px; height:40px; }

/* Narrow screens: smaller tiles so more than two marks stay on screen, and a
   faster cycle so the shorter track does not feel sluggish. */
@media (max-width:40rem){
  .brands li{ width:10.5rem; min-height:4.25rem; padding:.75rem 1rem; }
  .marquee__track{ animation-duration:44s; }
}

/* ==========================================================================
   Capability lists — the bulleted service detail from the profile
   ========================================================================== */
.caps{
  columns:2; column-gap:clamp(1.5rem,4vw,3rem);
  list-style:none; margin:1.25rem 0 0; padding:0;
}
@media (max-width:40rem){ .caps{ columns:1; } }
.caps li{
  break-inside:avoid; padding:.4rem 0 .4rem 1.35rem; position:relative;
  font-size:.95rem; color:var(--ink-soft);
}
.caps li::before{
  content:""; position:absolute; left:0; top:1.05em;
  width:.5rem; height:2px; background:var(--orange);
}

/* A short highlighted passage — used for the lifecycle sentence, which is
   the densest statement of coverage in the profile. */
.pullbox{
  background:var(--sand); border-left:4px solid var(--orange);
  padding:clamp(1.25rem,3vw,1.9rem) clamp(1.25rem,3vw,2rem);
  margin:1.75rem 0; font-size:1.02rem; line-height:1.6; color:var(--ink-2);
}
.pullbox strong{ color:var(--ink); }