/* =========================================================
   PILLAR HR CONSULTANCY & RECRUITMENT
   Single-page site — vanilla CSS
   Brand: red #f50200 / grey #6a6a6a (sampled from logo)
   Rule: zero border-radius anywhere. Strict borders only.
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  --red:        #f50200;
  --red-deep:   #bf0200;
  --red-soft:   rgba(245,2,0,.14);

  --ink:        #141414;
  --charcoal:   #3c3c3c;
  --charcoal-2: #4a4a4a;
  --grey:       #6a6a6a;
  --grey-line:  #d6d6d6;
  --paper:      #f2f2f2;
  --white:      #ffffff;

  --txt:        #1c1c1c;
  --txt-soft:   #5a5a5a;
  --txt-invert: #f4f4f4;
  --txt-invert-soft: rgba(244,244,244,.66);

  --split-h:    clamp(46px, 7vw, 118px);
  --pad-y:      clamp(4.5rem, 8vw, 8rem);
  --wrap:       1220px;
  --gut:        clamp(1.25rem, 4vw, 3rem);
  --nav-h:      74px;

  --ff-head: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ff-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
*{border-radius:0 !important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); overflow-x:clip}
body{
  margin:0; overflow-x:clip;
  background:var(--ink); color:var(--txt);
  font-family:var(--ff-body); font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.72; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,video{display:block; max-width:100%}
img{height:auto}
h1,h2,h3,h4{margin:0; font-family:var(--ff-head); font-weight:800; line-height:1.03; letter-spacing:-.022em}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
ul,ol{margin:0; padding:0; list-style:none}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
cite{font-style:normal}
:focus-visible{outline:3px solid var(--red); outline-offset:3px}

.skip{
  position:fixed; top:-100px; left:1rem; z-index:999;
  background:var(--red); color:#fff; padding:.85rem 1.4rem;
  font-family:var(--ff-head); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.8rem;
  transition:top .2s var(--ease);
}
.skip:focus{top:1rem}

/* ---------- 3. LAYOUT PRIMITIVES ---------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); position:relative; z-index:1}

.section{
  position:relative;
  padding-block:calc(var(--split-h) + var(--pad-y)) var(--pad-y);
  isolation:isolate;
}
.section + .section{padding-bottom:calc(var(--pad-y) + var(--split-h) * .35)}

.section--paper   {background:var(--paper);    --split-fill:var(--paper)}
.section--white   {background:var(--white);    --split-fill:var(--white)}
.section--charcoal{background:var(--charcoal); --split-fill:var(--charcoal); color:var(--txt-invert)}
.section--ink     {background:var(--ink);      --split-fill:var(--ink);      color:var(--txt-invert)}
.section--charcoal p,.section--ink p{color:var(--txt-invert-soft)}

/* ---------- 4. TRIANGULAR SPLITS ---------- */
.split{
  position:absolute; left:0; width:100%; height:var(--split-h);
  bottom:100%; margin-bottom:-1px;
  pointer-events:none; z-index:3;
}
.split svg{width:100%; height:100%}
.split__fill{fill:var(--split-fill,#fff)}
.split__accent{fill:var(--red)}
.split__hair{
  fill:none; stroke:var(--white); stroke-width:2.5;
  vector-effect:non-scaling-stroke;
}
.split__hair--red{stroke:var(--red)}

/* ---------- 5. TYPE HELPERS ---------- */
.h2{
  font-size:clamp(2.1rem, 1.2rem + 4vw, 4.35rem);
  text-transform:uppercase; letter-spacing:-.03em;
}
.h2--light{color:var(--txt-invert)}
.hl{color:var(--red)}
.lead{
  font-size:clamp(1.1rem,1.02rem + .5vw,1.4rem); line-height:1.6;
  font-weight:400; color:var(--txt);
}
.section--charcoal .lead,.section--ink .lead{color:var(--txt-invert)}

.eyebrow{
  display:flex; align-items:center; gap:.7rem;
  margin:0 0 1.5rem;
  font-family:var(--ff-head); font-weight:700; font-size:.74rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--grey);
}
.eyebrow--light{color:rgba(244,244,244,.8)}
.eyebrow__tick{
  width:26px; height:0; flex:none;
  border-top:3px solid var(--red);
  transform:skewY(-14deg);
}
.rule{width:72px; height:4px; background:var(--red); margin-top:1.75rem}

.sec-head{max-width:940px; margin-bottom:clamp(2.75rem,5vw,4.5rem)}
.sec-head__note{
  margin-top:1.5rem; font-size:.82rem; letter-spacing:.14em;
  text-transform:uppercase; font-family:var(--ff-head); font-weight:600;
  color:rgba(244,244,244,.5);
}

/* ---------- 6. BUTTONS ---------- */
.btn{
  --b:var(--white);
  position:relative; display:inline-flex; align-items:center; gap:.7rem;
  padding:1.05rem 1.9rem; border:2px solid var(--b); background:transparent; color:var(--b);
  font-family:var(--ff-head); font-weight:700; font-size:.86rem;
  letter-spacing:.13em; text-transform:uppercase; cursor:pointer;
  overflow:hidden; transition:color .35s var(--ease), border-color .35s var(--ease);
}
.btn > *{position:relative; z-index:1}
.btn::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:var(--b);
  transform:translateX(-101%) skewX(-14deg) scaleX(1.25);
  transition:transform .42s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(0) skewX(-14deg) scaleX(1.25)}
.btn svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:square; transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(5px)}

.btn--red{--b:var(--red); background:var(--red); color:#fff; border-color:var(--red)}
.btn--red::before{background:var(--ink); transform:translateX(-101%) skewX(-14deg) scaleX(1.25)}
.btn--red:hover,.btn--red:focus-visible{color:#fff; border-color:var(--ink)}

.btn--ghost{--b:var(--white)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--ink)}

/* ---------- 7. NAV ---------- */
.progress{position:fixed; inset:0 0 auto 0; height:3px; z-index:120; background:transparent; pointer-events:none}
.progress__bar{display:block; height:100%; width:0; background:var(--red); transition:width .1s linear}

.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(20,20,20,0); backdrop-filter:blur(0px);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease);
}
.nav.is-stuck{
  background:rgba(20,20,20,.94); backdrop-filter:blur(12px) saturate(1.2);
  border-bottom-color:rgba(255,255,255,.1);
}
.nav__inner{
  max-width:var(--wrap); margin-inline:auto; padding:0 var(--gut);
  height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:1rem;
}

.brand{display:flex; align-items:center; gap:.7rem; flex:none}
.brand__mark{width:42px; height:42px; object-fit:contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.brand__text{display:flex; flex-direction:column; line-height:1; color:var(--red)}
.brand__text strong{
  font-family:var(--ff-head); font-weight:900; font-size:1.02rem;
  letter-spacing:.14em; color:var(--red);
}
.brand__hr{color:var(--red); margin-left:.18em}
.brand__text em{
  font-style:normal; font-size:.55rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin-top:.35rem;
}

.nav__links{display:flex; align-items:center; gap:.35rem}
.nav__link{
  position:relative; padding:.65rem .8rem;
  font-family:var(--ff-head); font-weight:600; font-size:.78rem;
  letter-spacing:.11em; text-transform:uppercase; color:rgba(255,255,255,.78);
  transition:color .25s var(--ease);
}
.nav__link::after{
  content:''; position:absolute; left:.8rem; right:.8rem; bottom:.35rem; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav__link:hover{color:#fff}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__link.is-active{color:#fff}
.nav__link--cta{
  margin-left:.65rem; border:2px solid var(--red); color:#fff; background:var(--red);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.nav__link--cta::after{display:none}
.nav__link--cta:hover{background:transparent; color:var(--red)}

.burger{
  display:none; width:46px; height:46px; border:2px solid rgba(255,255,255,.35);
  background:transparent; cursor:pointer; padding:0;
  place-items:center; gap:5px; flex-direction:column; justify-content:center;
}
.burger span{display:block; width:20px; height:2px; background:#fff; transition:transform .3s var(--ease), opacity .2s var(--ease)}
.burger[aria-expanded="true"]{border-color:var(--red); background:var(--red)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- 8. HERO ---------- */
/* bottom padding reserves room for the next section's diagonal split,
   so it slices the video rather than the stat rail */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--nav-h) + 2.5rem) 0 calc(var(--split-h) + .5rem);
  background:var(--ink); overflow:hidden;
}
.hero__media{position:absolute; inset:0; z-index:0}
.hero__poster,.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.hero__poster{transform:scale(1.04); filter:saturate(.85)}
.hero__video{opacity:0; transition:opacity 1.1s var(--ease)}
.hero__video.is-ready{opacity:1}

.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(105deg, rgba(10,10,10,.94) 0%, rgba(10,10,10,.78) 38%, rgba(10,10,10,.35) 68%, rgba(10,10,10,.6) 100%),
    linear-gradient(to top, rgba(10,10,10,.95) 0%, rgba(10,10,10,0) 45%);
}
.hero__grid{
  position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:88px 88px;
  mask-image:linear-gradient(115deg, #000 0%, transparent 62%);
  -webkit-mask-image:linear-gradient(115deg, #000 0%, transparent 62%);
}

.hero__body{
  position:relative; z-index:2;
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding-bottom:clamp(1.5rem, 3vh, 2.5rem);
}
/* the vh term keeps the headline inside the fold on short laptop screens */
.hero__title{
  color:#fff; text-transform:uppercase;
  font-size:min(clamp(2.5rem, 1rem + 6.6vw, 5.9rem), max(2.5rem, 10.4vh));
  letter-spacing:-.035em; margin-bottom:clamp(1rem, 2.2vh, 1.75rem);
}
.hero__title .line{display:block}
.hero__lede{
  max-width:52ch; color:rgba(255,255,255,.8);
  font-size:min(clamp(1rem,.95rem + .4vw,1.22rem), max(1rem, 2.5vh)); line-height:1.62;
  padding-left:1.25rem; border-left:3px solid var(--red);
}
.hero__actions{display:flex; flex-wrap:wrap; gap:1rem; margin-top:clamp(1.5rem, 3.4vh, 2.5rem)}

.hero__stats{
  position:relative; z-index:2;
  border-top:1px solid rgba(255,255,255,.16);
  background:linear-gradient(to top, rgba(10,10,10,.75), rgba(10,10,10,.25));
}
.stats{
  max-width:var(--wrap); margin-inline:auto; padding:0 var(--gut);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.stat{
  padding:clamp(.9rem,1.6vh,1.4rem) 1.25rem clamp(1rem,1.9vh,1.6rem);
  border-left:1px solid rgba(255,255,255,.13);
  position:relative;
}
.stat:first-child{border-left:0; padding-left:0}
.stat::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:3px; background:var(--red);
  transition:width .5s var(--ease);
}
.stat.is-seen::after{width:38px}
.stat__num{
  display:block; font-family:var(--ff-head); font-weight:900; color:#fff;
  font-size:clamp(1.9rem,1.2rem + 2.2vw,3.1rem); line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.stat__label{
  display:block; margin-top:.6rem; font-size:.76rem; line-height:1.45;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55);
}

.hero__cue{
  position:absolute; right:var(--gut); bottom:calc(1.5rem + 96px); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  color:rgba(255,255,255,.55);
  font-family:var(--ff-head); font-size:.62rem; letter-spacing:.32em; text-transform:uppercase;
  writing-mode:vertical-rl;
}
.hero__cue-line{width:1px; height:52px; background:rgba(255,255,255,.35); position:relative; overflow:hidden}
.hero__cue-line::after{
  content:''; position:absolute; inset:0; background:var(--red);
  animation:cue 2.1s var(--ease) infinite;
}
@keyframes cue{0%{transform:translateY(-100%)}55%{transform:translateY(100%)}100%{transform:translateY(100%)}}

/* ---------- 9. OVERVIEW ---------- */
.two-col{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,5rem)}
.two-col__aside{position:sticky; top:calc(var(--nav-h) + 2.5rem); align-self:start}
.two-col__main > p + p{margin-top:0}

.pill-row{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2.25rem}
.pill{
  border:1.5px solid var(--grey-line); padding:.55rem 1.05rem;
  font-family:var(--ff-head); font-weight:600; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--txt-soft);
  transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.pill:hover{border-color:var(--red); color:var(--red)}

/* ---------- 10. MISSION / VISION ---------- */
.purpose__grid{display:grid; grid-template-columns:1fr 1fr; gap:0; border:2px solid rgba(255,255,255,.14)}
.panel{position:relative; padding:clamp(2rem,4vw,3.5rem); overflow:hidden}
.panel + .panel{border-left:2px solid rgba(255,255,255,.14)}
.panel__index{
  position:absolute; right:-.08em; top:-.22em;
  font-family:var(--ff-head); font-weight:900; font-size:13rem; line-height:1;
  color:rgba(255,255,255,.045); pointer-events:none; user-select:none;
}
.panel__title{
  font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem); text-transform:uppercase;
  color:#fff; margin-bottom:1.35rem; padding-bottom:1.1rem;
  border-bottom:2px solid var(--red); display:inline-block;
}
.panel p{position:relative; color:rgba(244,244,244,.78)}
.panel strong{color:#fff; font-weight:600}
.panel--vision{background:linear-gradient(150deg, rgba(245,2,0,.14), transparent 62%)}
.panel--mission{background:linear-gradient(150deg, rgba(255,255,255,.05), transparent 62%)}

/* ---------- 11. VALUES ---------- */
.values{border-top:2px solid var(--ink)}
.value{
  position:relative; display:grid; grid-template-columns:auto 1fr; gap:clamp(1.25rem,4vw,3.5rem);
  align-items:start; padding:clamp(1.6rem,3vw,2.4rem) 0;
  border-bottom:1px solid var(--grey-line);
  transition:padding-left .4s var(--ease);
}
.value::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--red);
  transition:width .4s var(--ease);
}
.value:hover{padding-left:1.5rem}
.value:hover::before{width:5px}
.value__num{
  font-family:var(--ff-head); font-weight:900; line-height:.85;
  font-size:clamp(2.2rem,1.4rem + 3vw,4.2rem); color:var(--grey-line);
  letter-spacing:-.04em; transition:color .35s var(--ease);
}
.value:hover .value__num{color:var(--red)}
.value__body h3{
  font-size:clamp(1.2rem,1rem + .9vw,1.75rem); text-transform:uppercase;
  margin-bottom:.6rem;
}
.value__body p{color:var(--txt-soft); max-width:62ch}

/* ---------- 12. TICKER ---------- */
.ticker{
  position:absolute; top:calc(var(--split-h) * .55); left:-6%; width:112%;
  z-index:2; overflow:hidden; background:var(--red);
  transform:rotate(-2.6deg);
  border-block:2px solid rgba(0,0,0,.18);
}
.ticker__track{display:flex; width:max-content; animation:slide 26s linear infinite}
.ticker__set{
  display:inline-flex; align-items:center; gap:1.6rem; padding:.75rem 1.6rem .75rem 0;
  font-family:var(--ff-head); font-weight:800; font-size:clamp(.8rem,.72rem + .4vw,1.05rem);
  letter-spacing:.2em; text-transform:uppercase; color:#fff; white-space:nowrap;
}
.ticker__set i{font-style:normal; font-size:.55em; opacity:.6}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 13. SERVICES ---------- */
.svc{border-top:1px solid rgba(255,255,255,.18)}
.svc__h{margin:0; font-size:inherit; font-weight:inherit}
.svc__btn{
  position:relative; width:100%; display:flex; align-items:center; gap:clamp(1rem,3vw,2rem);
  padding:clamp(1.05rem,2vw,1.5rem) 0; text-align:left;
  background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.18);
  cursor:pointer; color:var(--txt-invert);
  transition:padding-left .4s var(--ease), color .3s var(--ease);
}
.svc__btn::before{
  content:''; position:absolute; left:0; top:0; bottom:1px; width:0; background:var(--red);
  transition:width .4s var(--ease);
}
.svc__btn:hover{padding-left:1.25rem}
.svc__btn:hover::before{width:4px}
.svc__no{
  flex:none; font-family:var(--ff-head); font-weight:800; font-size:.82rem;
  letter-spacing:.1em; color:var(--red); padding-top:.2em;
}
.svc__name{
  flex:1; font-family:var(--ff-head); font-weight:700;
  font-size:clamp(1.02rem,.9rem + .8vw,1.6rem); line-height:1.18;
  letter-spacing:-.015em; text-transform:uppercase;
}
.svc__ico{
  flex:none; position:relative; width:20px; height:20px; border:2px solid rgba(255,255,255,.4);
  transition:border-color .3s var(--ease), transform .35s var(--ease);
}
.svc__ico::before,.svc__ico::after{
  content:''; position:absolute; background:#fff; transition:transform .3s var(--ease), background .3s var(--ease);
}
.svc__ico::before{left:3px; right:3px; top:calc(50% - 1px); height:2px}
.svc__ico::after{top:3px; bottom:3px; left:calc(50% - 1px); width:2px}
.svc__btn[aria-expanded="true"] .svc__ico{border-color:var(--red); background:var(--red)}
.svc__btn[aria-expanded="true"] .svc__ico::after{transform:scaleY(0)}
.svc__btn[aria-expanded="true"] .svc__name{color:#fff}
.svc__btn[aria-expanded="true"]::before{width:4px}

.svc__panel{
  padding:clamp(1.4rem,3vw,2.25rem) 0 clamp(2rem,4vw,3rem);
  border-bottom:1px solid rgba(255,255,255,.18);
  animation:panelIn .45s var(--ease) both;
}
.svc__panel[hidden]{display:none}
@keyframes panelIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.svc__tag{
  font-family:var(--ff-head); font-weight:800; color:var(--red) !important;
  font-size:clamp(1rem,.92rem + .5vw,1.35rem); text-transform:uppercase;
  letter-spacing:-.01em; margin-bottom:1rem;
}
.svc__panel > p{max-width:66ch}

.ticks{margin-top:1.75rem; display:grid; gap:.7rem}
.ticks li{
  position:relative; padding-left:2rem; color:var(--txt-invert-soft);
  font-size:.95rem; line-height:1.6;
}
.ticks li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:11px; height:11px; background:var(--red);
  clip-path:polygon(0 0, 100% 0, 0 100%);
}

/* Desktop: the accordion becomes a two-column "service explorer".
   All headings stack in column 1; every panel is placed in column 2 spanning
   every row, and only the open one is rendered. Same DOM, same a11y semantics. */
@media (min-width:960px){
  .svc{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
    column-gap:clamp(2.25rem,4.5vw,4.5rem);
    align-items:start;
  }
  .svc__h{grid-column:1}
  .svc__panel{
    grid-column:2; grid-row:1 / span var(--n,8);
    align-self:start; position:sticky; top:calc(var(--nav-h) + 3rem);
    padding:.35rem 0 2rem clamp(2rem,3.5vw,3.25rem);
    border-bottom:0; border-left:1px solid rgba(255,255,255,.18);
  }
  .svc__panel > p{max-width:52ch}
}

/* ---------- 14. FOUNDER ---------- */
.founder__grid{
  display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.founder__figure{position:relative; margin:0; padding:0 0 3.25rem 0}
.founder__frame{
  position:absolute; left:1.5rem; top:1.5rem; right:-1.5rem; bottom:1.75rem;
  border:3px solid var(--red); z-index:0;
}
.founder__img{
  position:relative; z-index:1; width:100%;
  background:var(--charcoal);
  clip-path:polygon(0 0, 100% 0, 100% 92%, 0 100%);
  filter:grayscale(.12) contrast(1.04);
}
.founder__cap{
  position:relative; z-index:2; margin-top:-1.5rem; margin-left:0;
  display:inline-flex; flex-direction:column; gap:.2rem;
  background:var(--ink); color:#fff; padding:1rem 1.5rem;
  border-left:5px solid var(--red);
}
.founder__cap strong{font-family:var(--ff-head); font-weight:800; letter-spacing:.02em; font-size:1.05rem}
.founder__cap span{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6)}

.quote{position:relative; margin:0; padding-top:.5rem}
.quote__mark{
  display:block; font-family:var(--ff-head); font-weight:900;
  font-size:8rem; line-height:.6; color:var(--red); height:.5em; margin-bottom:.45rem;
}
.quote__text{
  font-family:var(--ff-head); font-weight:600;
  font-size:clamp(1.35rem,1rem + 2vw,2.5rem); line-height:1.24; letter-spacing:-.025em;
  color:var(--ink); margin-bottom:2rem;
}
.quote__rest{
  border-left:2px solid var(--grey-line); padding-left:clamp(1.25rem,2.5vw,2rem);
  color:var(--txt-soft); max-width:64ch;
}
.quote__rest p + p{margin-top:0}
.quote__by{margin-top:2.25rem; padding-top:1.5rem; border-top:2px solid var(--ink)}
.quote__sig{
  display:block; font-family:var(--ff-head); font-weight:800; font-size:1.35rem;
  letter-spacing:-.01em; color:var(--ink);
}
.quote__by cite{display:block; margin-top:.3rem; font-size:.76rem; letter-spacing:.15em; text-transform:uppercase; color:var(--grey)}

/* ---------- 15. WHY US ---------- */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid rgba(255,255,255,.16)}
.card{
  position:relative; padding:clamp(1.75rem,3vw,2.5rem);
  border-right:1px solid rgba(255,255,255,.16);
  border-bottom:1px solid rgba(255,255,255,.16);
  overflow:hidden; transition:background .35s var(--ease);
}
.card:nth-child(4),.card:last-child{border-right:0}
.card:nth-child(n+5){border-bottom:0}
.card--wide{grid-column:1 / -1; border-bottom:0}
.card::after{
  content:''; position:absolute; right:0; bottom:0; width:0; height:0;
  border-style:solid; border-width:0 0 54px 54px; border-color:transparent transparent var(--red) transparent;
  transform:translate(54px,54px); transition:transform .4s var(--ease);
}
.card:hover{background:rgba(255,255,255,.05)}
.card:hover::after{transform:translate(0,0)}
.card__no{
  display:block; font-family:var(--ff-head); font-weight:900; font-size:.82rem;
  letter-spacing:.16em; color:var(--red); margin-bottom:1.5rem;
}
.card h3{
  font-size:clamp(1.02rem,.94rem + .4vw,1.25rem); text-transform:uppercase;
  color:#fff; margin-bottom:.85rem; letter-spacing:-.005em;
}
.card p{font-size:.94rem; line-height:1.62}
.card--wide p{max-width:78ch}

/* ---------- 16. CONTACT ---------- */
.contact{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,4rem); align-items:start}
.contact__info{border-top:2px solid var(--ink)}
.info{
  position:relative; display:flex; flex-direction:column; gap:.25rem;
  padding:1.25rem 3rem 1.25rem 0; border-bottom:1px solid var(--grey-line);
  transition:padding-left .35s var(--ease);
}
.info::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--red);
  transition:width .35s var(--ease);
}
a.info::after{
  content:''; position:absolute; right:.5rem; top:50%; width:9px; height:9px;
  border-top:2px solid var(--grey); border-right:2px solid var(--grey);
  transform:translateY(-50%) rotate(45deg); transition:border-color .3s var(--ease), right .3s var(--ease);
}
a.info:hover{padding-left:1.1rem}
a.info:hover::before{width:4px}
a.info:hover::after{border-color:var(--red); right:.1rem}
.info__k{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--grey); font-family:var(--ff-head); font-weight:600}
.info__v{font-family:var(--ff-head); font-weight:700; font-size:clamp(1rem,.94rem + .35vw,1.2rem); color:var(--ink); letter-spacing:-.01em}

.form{
  display:grid; grid-template-columns:1fr 1fr; gap:1.25rem;
  border:2px solid var(--ink); padding:clamp(1.5rem,3vw,2.5rem); background:var(--paper);
}
.form__intro{grid-column:1/-1; margin:0; color:var(--txt-soft); font-size:.95rem}
.field{display:flex; flex-direction:column; gap:.5rem}
.field--full{grid-column:1/-1}
.field label{font-family:var(--ff-head); font-weight:600; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--grey)}
.field input,.field select,.field textarea{
  width:100%; padding:.85rem 1rem; background:#fff;
  border:1.5px solid var(--grey-line); color:var(--ink);
  font-family:var(--ff-body); font-size:1rem; transition:border-color .25s var(--ease);
  appearance:none;
}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--grey) 50%),linear-gradient(135deg,var(--grey) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:2.75rem}
.field textarea{resize:vertical; min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red); outline:none}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--red); background:var(--red-soft)}
.form__submit{grid-column:1/-1; justify-self:start}
.form__note{grid-column:1/-1; margin:0; font-size:.78rem; letter-spacing:.05em; color:var(--grey)}
.form__note.is-error{color:var(--red); font-weight:500}

/* ---------- 17. FOOTER ---------- */
.footer{
  position:relative; background:var(--ink); --split-fill:var(--ink); color:var(--txt-invert);
  padding-top:calc(var(--split-h) + clamp(3rem,6vw,5rem)); padding-bottom:2rem;
}
.footer__inner{
  display:grid; grid-template-columns:1.1fr 1fr 1.2fr; gap:clamp(2rem,4vw,3.5rem);
  padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.14);
}
.footer__brand img{width:64px; height:64px; object-fit:contain; margin-bottom:1.25rem}
.footer__tagline{
  font-family:var(--ff-head); font-weight:800; font-size:clamp(1.1rem,1rem + .7vw,1.5rem);
  line-height:1.15; text-transform:uppercase; color:#fff; letter-spacing:-.02em; margin:0;
}
.footer__nav{display:flex; flex-direction:column; gap:.6rem; align-items:flex-start}
.footer__nav a{
  font-family:var(--ff-head); font-weight:600; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6);
  border-bottom:1px solid transparent; transition:color .25s var(--ease), border-color .25s var(--ease);
}
.footer__nav a:hover{color:#fff; border-bottom-color:var(--red)}
.footer__meta p{margin:0 0 .6rem; color:rgba(255,255,255,.6); font-size:.92rem}
.footer__meta a:hover{color:var(--red)}
.footer__legal{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; padding-top:1.75rem;
}
.footer__legal p{margin:0; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.38)}

/* ---------- 18. BACK TO TOP ---------- */
.totop{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:90;
  width:52px; height:52px; border:2px solid var(--red); background:var(--red);
  display:grid; place-items:center; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background .25s var(--ease);
}
.totop.is-on{opacity:1; visibility:visible; transform:none}
.totop:hover{background:var(--ink); border-color:var(--ink)}
.totop svg{width:22px; height:22px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:square}

/* ---------- 19. REVEAL ---------- */
/* Scoped to .js so the page is fully legible if scripting is off or fails. */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js .reveal.is-in{opacity:1; transform:none; transition-delay:calc(var(--i,0) * 70ms)}

/* ---------- 20. RESPONSIVE ---------- */
@media (max-width:1080px){
  .nav__link{padding:.6rem .55rem; font-size:.72rem}
  .cards{grid-template-columns:repeat(2,1fr)}
  .card:nth-child(2n){border-right:0}
  .card:nth-child(n+3){border-bottom:1px solid rgba(255,255,255,.16)}
  .card--wide{border-bottom:0}
}

@media (max-width:920px){
  :root{--nav-h:66px}
  .burger{display:flex}

  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(16,16,16,.985); backdrop-filter:blur(14px);
    padding:1rem var(--gut) 2.25rem;
    border-bottom:3px solid var(--red);
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 46px));
    transform:translateY(-102%); opacity:0; visibility:hidden;
    transition:transform .45s var(--ease), opacity .3s var(--ease), visibility .45s;
    max-height:calc(100svh - var(--nav-h)); overflow-y:auto;
  }
  .nav__links.is-open{transform:none; opacity:1; visibility:visible}
  .nav__link{
    padding:1rem .25rem; font-size:.95rem; letter-spacing:.1em;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .nav__link::after{left:.25rem; right:auto; width:34px; bottom:.55rem}
  .nav__link--cta{
    margin:1.25rem 0 0; text-align:center; padding:1rem; border-bottom:2px solid var(--red);
  }

  .hero{min-height:auto; padding-top:calc(var(--nav-h) + 3.5rem)}
  .hero__body{padding-bottom:3.5rem; min-height:64svh}
  .hero__cue{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{padding:1.25rem 1rem 1.5rem}
  .stat:nth-child(odd){border-left:0; padding-left:0}
  .stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.13)}

  .two-col{grid-template-columns:1fr}
  .two-col__aside{position:static}
  .purpose__grid{grid-template-columns:1fr}
  .panel + .panel{border-left:0; border-top:2px solid rgba(255,255,255,.14)}
  .panel__index{font-size:9rem}

  .founder__grid{grid-template-columns:1fr; gap:2.5rem}
  .founder__figure{max-width:440px; padding-bottom:2.5rem}
  .founder__frame{left:1rem; top:1rem; right:-1rem}
  .quote__mark{font-size:6rem}

  .contact{grid-template-columns:1fr}
}

@media (max-width:640px){
  :root{--gut:1.15rem}
  .brand__mark{width:36px; height:36px}
  .brand__text strong{font-size:.9rem}
  .brand__text em{font-size:.5rem}

  .hero__lede{padding-left:1rem}
  .hero__actions{gap:.75rem}
  .btn{padding:.95rem 1.35rem; font-size:.78rem; flex:1 1 auto; justify-content:center}

  .stats{grid-template-columns:1fr}
  .stat{border-left:0 !important; padding:1.1rem 0 1.25rem}
  .stat + .stat{border-top:1px solid rgba(255,255,255,.13)}
  .stat__label{font-size:.7rem}

  .value{grid-template-columns:1fr; gap:.5rem}
  .value__num{font-size:2rem}

  .svc__btn{align-items:flex-start; gap:.9rem}
  .svc__no{padding-top:.35em}
  .svc__ico{margin-top:.2rem}

  .cards{grid-template-columns:1fr}
  .card{border-right:0 !important; border-bottom:1px solid rgba(255,255,255,.16) !important}
  .card:last-child{border-bottom:0 !important}

  .form{grid-template-columns:1fr; padding:1.35rem}
  .form__submit{justify-self:stretch}

  .footer__inner{grid-template-columns:1fr; gap:2.25rem}
  .footer__legal{flex-direction:column}

  .ticker{transform:rotate(-3.4deg); top:calc(var(--split-h) * .35)}
  .totop{width:46px; height:46px}
}

/* ---------- 21. MOTION / PRINT ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1; transform:none}
  .ticker__track{animation:none}
  .hero__cue-line::after{animation:none; opacity:.4}
}

@media print{
  .nav,.progress,.totop,.hero__media,.hero__cue,.ticker,.form{display:none !important}
  body{background:#fff; color:#000}
  .section{padding-block:2rem; background:#fff !important; color:#000 !important}
  .split{display:none}
  .svc__panel[hidden]{display:block !important}
}