/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --lime:#B1DD26;
  --green:#006838;
  --green-deep:#004A27;
  --paper:#F1F1F2;
  --gray:#6D6E71;
  --ink:#404041;
  --white:#fff;

  --rule:rgba(64,64,65,.16);
  --rule-dark:rgba(177,221,38,.22);

  --rail:56px;
  --bar:4px;
  --pad:clamp(20px,3.2vw,44px);

  --display:"Roboto Condensed",Arial Narrow,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --step:clamp(56px,7vw,104px);
  --hero-h:clamp(600px,94svh,1000px);  /* raise past 100svh to lengthen the sticky travel */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--mono);font-size:13.5px;line-height:1.85;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
::selection{background-color:var(--lime);color:var(--green-deep)}

/* Type ------------------------------------------------------- */
.h1,.h2,.h3{font-family:var(--display);font-weight:700;letter-spacing:-.015em;margin:0}
.h1{font-size:clamp(40px,6.6vw,80px);line-height:.98;text-wrap:balance}
.h1 span{
  display:block;margin-top:.7em;color:var(--white);
  font-family:var(--mono);font-weight:500;font-size:.175em;
  line-height:1.6;letter-spacing:.26em;text-transform:uppercase;
}
.h2{font-size:clamp(26px,3.4vw,46px);line-height:1.1}
.h3{font-size:clamp(19px,1.9vw,25px);line-height:1.3}
p{margin:0 0 1.35em}
p:last-child{margin-bottom:0}
strong{font-weight:700}

.label{font-family:var(--mono);font-weight:500;font-size:10px;text-transform:uppercase;letter-spacing:.22em;line-height:1}

/* the mono spec line: EST. 2015 / HAYMARKET, VA / 30+ YEARS */
.barred{border-left:var(--bar) solid var(--lime);padding-left:calc(var(--pad) - var(--bar))}

/* ============================================================
   GRID — rail | col | col | rail
   ============================================================ */
.section{position:relative}
section[id]{scroll-margin-top:var(--rail)}
.grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:var(--rail) 1fr 1fr var(--rail);
  align-items:start;
}
.rules{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  /* no left hairline here — .railnav's own border-right is that line,
     and it runs the full height. Drawing it twice made a 2px rule. */
  background:
    linear-gradient(var(--rule),var(--rule)) 50% 0/1px 100% no-repeat,
    linear-gradient(var(--rule),var(--rule)) calc(100% - var(--rail)) 0/1px 100% no-repeat;
}
.on-dark{--rule:var(--rule-dark)}
/* lifts the hairlines over a section that has coloured panels in it */
.rules-over{z-index:3}

/* ============================================================
   HEADER
   ============================================================ */
.masthead{position:sticky;top:0;z-index:60;background:var(--white);border-bottom:1px solid var(--rule)}
.masthead .grid{align-items:stretch;min-height:var(--rail)}
.mark{grid-column:1;display:grid;place-items:center;background:var(--green);color:var(--white);aspect-ratio:1;width:100%}
.mark svg{width:62%;height:62%}
.wordmark{
  grid-column:2;display:flex;align-items:center;gap:.55em;
  padding-inline:var(--pad);text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:clamp(13px,1.35vw,16px);
  text-transform:uppercase;letter-spacing:.13em;white-space:nowrap;
}
.wordmark b{color:var(--green)}
.wordmark .wm-mid{color:var(--green);font-weight:500}
.wordmark .wm-llc{color:var(--gray);font-weight:500}
.masthead .spacer{grid-column:3;border-left:1px solid var(--rule)}
.contact-icon{
  grid-column:4;display:grid;place-items:center;border-left:1px solid var(--rule);
  color:var(--green);text-decoration:none;transition:background .2s,color .2s;
}
.contact-icon:hover{background:var(--green);color:var(--lime)}
.contact-icon svg{width:20px;height:20px}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--lime);color:var(--ink);padding:.6em 1em;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.skip:focus{left:0}

/* ============================================================
   RAIL NAV — signature element
   ============================================================ */
.railnav{
  position:fixed;left:0;top:var(--rail);bottom:0;width:var(--rail);z-index:50;
  display:flex;flex-direction:column;justify-content:center;overflow-y:auto;
  border-right:1px solid var(--rule);background:var(--white);
  scrollbar-width:none;
}
.railnav::-webkit-scrollbar{display:none}
/* one lime block slides between items rather than four bars growing */
.railnav-pill{
  position:absolute;top:0;left:0;right:0;height:0;z-index:0;
  background:var(--lime);opacity:0;
  transition:transform .45s cubic-bezier(.4,0,.2,1),
             height .45s cubic-bezier(.4,0,.2,1),
             opacity .3s ease;
}
.railnav a{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:.9em;
  padding:1.1em 0;text-decoration:none;color:var(--gray);
  writing-mode:vertical-rl;text-orientation:mixed;
  font:500 10px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;transition:color .3s;
}
.railnav a em{font-style:normal;color:rgba(64,64,65,.42);font-size:9px;letter-spacing:.1em;transition:color .3s}
.railnav a:hover{color:var(--ink)}
.railnav a[aria-current="true"]{color:var(--green-deep)}
.railnav a[aria-current="true"] em{color:var(--green)}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.85em;
  padding:1.05em 1.6em;text-decoration:none;
  font:700 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  border:1px solid transparent;transition:background .2s,color .2s,border-color .2s,translate .2s;
}
.btn svg{flex:none}
.btn-primary{background:var(--lime);color:var(--ink)}
.btn-primary:hover{background:var(--white);translate:0 -2px}
.btn-ghost{border-color:rgba(255,255,255,.42);color:var(--white)}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime);translate:0 -2px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.6em}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;background:var(--green);color:var(--white)}
/* one looping backdrop, used by the hero and the contact block.
   No overlay and no filter — the footage is already graded dark green.
   z-index:0 keeps it above the section's own background and below all
   content, without needing a stacking context on the parent. */
.bg-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
.hero .grid{width:100%;min-height:var(--hero-h);padding:var(--pad) 0 var(--step);align-items:start}
.hero-h{
  grid-column:2;padding-inline:var(--pad);
  align-self:start;position:sticky;top:calc(var(--rail) + var(--pad));
}
.hero-col{grid-column:3;padding-left:0;padding-right:var(--pad);align-self:end}
.hero .h1{color:var(--lime)}
.hero .lede{color:rgba(255,255,255,.88)}


/* ============================================================
   01 — WHO WE ARE
   ============================================================ */
.about{background:var(--white)}
.about .grid{align-items:stretch}
.about-copy{grid-column:2;padding:var(--step) var(--pad) var(--step) 0}
.about-copy .h2{color:var(--green)}
.about-copy .body{margin-top:2.2em;padding-left:var(--pad);color:var(--ink)}
.about-fig{grid-column:3;position:relative;min-height:clamp(360px,46vw,620px)}

/* ============================================================
   02 — WHAT WE DO  (spec table)
   ============================================================ */
.services{background:var(--paper)}
.services > .grid{padding-top:var(--step);padding-bottom:0}   /* > so the band's own .grid is untouched */
.services-head{grid-column:2/4;padding-left:0;padding-right:var(--pad);margin-bottom:3em}
.services-head .h2{color:var(--green)}
.services-head p{margin-top:1.5em;color:var(--ink);max-width:56ch;padding-left:var(--pad)}
/* the list re-declares the page grid so each row's split lands
   exactly on the centre hairline — cols 2 and 3 are equal, so an
   inner 1fr 1fr with zero gap reproduces the 50% boundary. */
.services-list{
  grid-column:1/-1;margin:0;padding:0;
  display:grid;grid-template-columns:var(--rail) 1fr 1fr var(--rail);
}
.svc{
  grid-column:2/4;display:grid;grid-template-columns:1fr 1fr;gap:0;
  align-items:baseline;padding:1.5em 0;
  border-top:1px solid var(--rule);position:relative;
}
.svc:last-of-type{border-bottom:1px solid var(--rule)}
.svc dt{
  padding-inline:var(--pad);
  font-family:var(--display);font-weight:700;font-size:clamp(16px,1.55vw,20px);
  line-height:1.25;color:var(--green);letter-spacing:-.005em;
}
.svc dd{margin:0;padding-left:0;color:var(--ink)}
.svc::before{content:"";position:absolute;left:0;top:-1px;width:0;height:1px;background:var(--lime);transition:width .35s ease}
.svc:hover::before{width:var(--pad)}

/* full-bleed lime band — separates What we do from Why Kerrydale */
/* The table's closing row. Same background, same 1fr 1fr split at zero gap
   and the same 1.5em block padding as .svc, so it continues the table rather
   than sitting under it. The whole band is the link; the pill inside is a
   span, since nested anchors are invalid. Hover floods it lime. */
.closer-band{
  display:block;background:var(--paper);text-decoration:none;
  transition:background .25s ease;
}
.closer-band:hover{background:var(--lime)}
/* full-bleed, so the ring is inset or it gets clipped at the viewport edge.
   Green rather than the global lime, which would vanish on paper. */
.closer-band:focus-visible{outline:2px solid var(--green);outline-offset:-8px}

.closer{
  grid-column:2/4;display:grid;grid-template-columns:1fr 1fr;gap:0;
  align-items:baseline;padding-block:1.5em 3em;
  border-bottom:1px solid var(--rule);
}
/* set identically to the .svc dt rows above it */
.closer-eyebrow{
  margin:0;padding-inline:var(--pad);
  font-family:var(--display);font-weight:700;font-size:clamp(16px,1.55vw,20px);
  line-height:1.25;letter-spacing:-.005em;color:var(--green);
}
.closer-body{padding-left:0}
.closer-text{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(20px,2.2vw,30px);line-height:1.26;color:var(--ink);
}
.closer .btn{margin-top:1.9em}
.closer .btn svg{transition:translate .25s ease}
.closer-band:hover .btn svg{translate:5px 0}
/* --green-deep, not --green: the pill's label is 11px, which counts as small
   text, and lime on --green is 4.4:1 — just under the 4.5:1 floor. On
   --green-deep it is 6.6:1, so the lime label survives. */
.btn-dark{background:var(--green-deep);color:var(--lime)}

/* ============================================================
   03 — WHY KERRYDALE  (mirrored split)
   ============================================================ */
.why{background:var(--white)}
.why .grid{align-items:stretch}
.why-visual{grid-column:2;background:var(--ink);position:relative;min-height:clamp(360px,46vw,620px)}
.why-copy{grid-column:3/5;background:var(--paper);padding:var(--step) var(--rail) var(--step) 0}
.why-copy .h2{color:var(--green)}
/* large lime identifiers, hung on the right hairline */
.why-list{margin:2.6em 0 0;padding-left:var(--pad)}
.why-list div{position:relative;padding:24px 0;border-top:1px solid var(--rule)}
.why-list div:last-child{border-bottom:1px solid var(--rule)}
.why-list dt,.why-list dd{padding-right:clamp(80px,9.6vw,132px)}
.why-list dt{
  font-family:var(--display);font-weight:700;font-size:clamp(16px,1.5vw,19px);
  color:var(--ink);margin-bottom:.45em;
}
.why-list dt::before{
  content:attr(data-n);position:absolute;right:0;
  top:50%;transform:translateY(-50%);
  font-family:var(--display);font-weight:200;
  font-size:clamp(58px,7.2vw,108px);line-height:1;letter-spacing:-.03em;
  color:var(--lime);
}
.why-list dd{margin:0;color:var(--ink)}

/* ============================================================
   PLATE PLACEHOLDERS — the comp's thin X, self-removing
   ============================================================ */
.frame{position:relative;background:var(--ink);overflow:hidden;aspect-ratio:4/3}
.frame.is-empty{
  background-image:
    linear-gradient(to bottom right,transparent calc(50% - .5px),rgba(255,255,255,.28) 50%,transparent calc(50% + .5px)),
    linear-gradient(to bottom left, transparent calc(50% - .5px),rgba(255,255,255,.28) 50%,transparent calc(50% + .5px));
  background-size:64% 64%;background-position:center;background-repeat:no-repeat;
}
.frame.is-empty::after{content:attr(data-plate);position:absolute;left:12px;bottom:10px;font:500 9px/1 var(--mono);letter-spacing:.2em;color:rgba(255,255,255,.5)}
.frame img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   REELS — the two tall image columns crossfade on their own.
   Grayscale at rest; hover holds the sequence and restores colour.
   ============================================================ */
.reel{
  position:absolute;inset:0;overflow:hidden;background:var(--ink);
  filter:grayscale(1) contrast(1.04);transition:filter .55s ease;
}
.reel:hover,.reel:focus-within{filter:grayscale(0) contrast(1)}
.reel-item{
  position:absolute;inset:0;margin:0;
  opacity:0;transition:opacity 1.2s ease;
}
.reel-item.is-live{opacity:1}
.reel .frame{position:absolute;inset:0;aspect-ratio:auto}

/* ============================================================
   05 — CONTACT + FOOTER
   ============================================================ */
.contact{position:relative;background:var(--green);color:var(--white)}
.contact .grid{padding-block:var(--step)}
.contact-head{grid-column:2;padding-inline:var(--pad)}
.contact-head .h2{color:var(--lime)}
.contact-head p{margin-top:1.5em;color:rgba(255,255,255,.88)}
.contact-head .btn{margin-top:2.6em}

.contact-details{grid-column:3;padding-inline:0}
.field{padding:1.6em 0;border-top:1px solid var(--rule-dark)}
.field:last-child{border-bottom:1px solid var(--rule-dark)}
.field .label{color:var(--lime);display:block;margin-bottom:.7em}
.field a,.field address{font-style:normal;font-size:15px;line-height:1.7;color:var(--white);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.field a:hover{border-bottom-color:var(--lime)}

.footer{position:relative;z-index:1;border-top:1px solid var(--rule-dark)}
.footer .grid{padding-block:1em}
.lockup{grid-column:2;display:flex;gap:1em;align-items:center;padding-inline:var(--pad);color:var(--white)}
.lockup svg{width:34px;height:34px;flex:none}
.lockup p{font:700 13px/1.2 var(--display);letter-spacing:.13em;text-transform:uppercase;margin:0;white-space:nowrap}
.legal{grid-column:3;padding-inline:0;align-self:center;text-align:left;font-size:10.5px;letter-spacing:.1em;color:var(--lime);text-transform:uppercase}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  :root{--rail:44px}
  /* the rail stays vertical — it only costs 44px */
  .railnav a{padding:.85em 0;letter-spacing:.2em}

  /* col 1 reserves the rail's width; cols 3–4 collapse. Content blocks sit
     flush to the rail so every lime bar and hairline starts on the nav border,
     and each block insets its own text instead. */
  .grid{grid-template-columns:var(--rail) 1fr 0 0}
  .rules{display:none}
  .hero-h,.hero-col,.about-copy,.about-fig,.services-head,.services-list,.closer,
  .contact-head,.contact-details,.why-visual,.why-copy,.lockup,.legal{
    grid-column:2
  }

  /* type scale — the desktop clamps bottom out far too small down here */
  .hero .h1{font-size:clamp(46px,13.5vw,74px)}
  .hero .h1 span{font-size:12.5px;letter-spacing:.2em;line-height:1.7;margin-top:1.5em}
  .h2{font-size:clamp(30px,8.5vw,44px)}
  .closer{grid-template-columns:1fr;padding-block:1.5em 2.6em;padding-inline:var(--pad)}
  .closer-eyebrow{padding-inline:0;margin-bottom:1.15em}
  .closer-text{font-size:clamp(22px,6.4vw,30px)}
  .svc dt,.why-list dt,.closer-eyebrow{font-size:clamp(17px,4.7vw,21px)}

  /* HERO — everything packed to the bottom of the hero */
  .hero .grid{align-content:end}
  .hero-h,.hero-col{position:static;align-self:end;padding-inline:var(--pad)}
  .hero-h{padding-bottom:1.4em}

  /* WHO WE ARE */
  .about .grid,.why .grid{grid-template-columns:var(--rail) 1fr}
  .about-fig{min-height:74vw}

  /* WHAT WE DO — row hairlines run rail edge to screen edge */
  .services-list{display:block}
  .svc{grid-column:auto;grid-template-columns:1fr;gap:.55em;padding:1.5em var(--pad)}
  .svc dt{padding-inline:0}
  .svc::before{display:none}

  /* WHY — same, borders full width, numeral inset from the screen edge */
  .why-visual{min-height:58vw}
  .why-copy{padding-right:0}
  .why-list{padding-left:0}
  .why-list div{padding:24px 0}
  .why-list dt,.why-list dd{
    padding-left:var(--pad);
    padding-right:calc(var(--pad) + clamp(56px,15vw,88px));
  }
  .why-list dt::before{right:var(--pad);font-size:clamp(50px,13vw,80px)}

  /* CONTACT — field borders full width */
  .contact-head{padding-inline:var(--pad)}
  .field{padding-inline:var(--pad)}
  .lockup,.legal{padding-inline:var(--pad)}
  .legal{margin-top:1.6em}

  .masthead .grid{grid-template-columns:var(--rail) 1fr var(--rail)}
  .masthead .spacer{display:none}
  .contact-icon{grid-column:3}
}
@media (max-width:600px){
  .wordmark{font-size:12px;letter-spacing:.1em;flex-wrap:wrap;gap:.35em}
  .btn{width:100%;justify-content:center}
  .lockup svg{width:30px;height:30px}
  .lockup p{font-size:11.5px;letter-spacing:.1em}
}

/* landscape phones — keep all four rail items reachable */
@media (max-height:640px){
  .railnav{justify-content:flex-start;padding-block:.5em}
  .railnav a{padding:.45em 0;letter-spacing:.14em}
}

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

/* ============================================================
   CAPABILITIES PAGE
   Hero is identical in behaviour to the home page. The table is the
   same .services-list / .svc device, grouped into production stages.
   ============================================================ */

/* eyebrow above the headline — the home page's h1 subtitle treatment,
   flipped to sit above. Selector outruns .hero .h1 span on purpose. */
.hero .h1 .eyebrow{
  display:block;margin:0 0 1.25em;color:var(--white);
  font-family:var(--mono);font-weight:500;font-size:.2em;
  line-height:1.6;letter-spacing:.26em;text-transform:uppercase;
}
/* the headline is a long list, so it runs smaller than the home page's */
.hero--sub .h1{font-size:clamp(32px,4.1vw,58px);line-height:1.04}

.capgroup{position:relative;background:var(--white)}
.capgroup--paper{background:var(--paper)}
.capgroup .grid{padding-top:var(--step);padding-bottom:0}
.capgroup .services-head{grid-column:2;grid-row:1;margin-bottom:2.6em}
.capgroup .services-head .h2{color:var(--green)}
.capgroup .services-list{grid-row:2}

/* running folio — huge, hairline, and behind the type. z-index:-1 puts it
   under the table text so the copy stays fully legible while the numeral
   reads as a watermark; .grid is a stacking context so -1 stays inside it. */
.capnum{
  grid-column:3;grid-row:1 / span 2;
  justify-self:end;align-self:start;
  position:sticky;top:calc(var(--rail) + var(--pad));
  z-index:-1;margin:0;pointer-events:none;
  font-family:var(--display);font-weight:200;
  font-size:clamp(130px,18vw,300px);line-height:.8;letter-spacing:-.03em;
  color:var(--lime);
}
/* capability rows carry no hover state — they are not interactive */

/* sourcing tags. Square, not rounded — there is no border-radius
   anywhere else on this site. */
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:.9em}
.pill{
  display:inline-flex;align-items:center;padding:.45em .7em;
  border:1px solid transparent;
  font:500 9px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;
}
.pill--in{background:var(--lime);color:var(--green-deep)}
.pill--aff{border-color:rgba(0,104,56,.4);color:var(--green)}

@media (max-width:960px){
  .hero .h1 .eyebrow{font-size:12.5px;letter-spacing:.2em;margin:0 0 1.5em}
  .hero--sub .h1{font-size:clamp(34px,9.5vw,52px)}
  /* folio sits alongside the heading rather than above it. position:relative
     rather than static so z-index:-1 still applies; top:auto cancels the
     sticky offset that would otherwise push it down. */
  .capnum{
    grid-column:2;grid-row:1;
    position:relative;top:auto;
    justify-self:end;padding-right:var(--pad);
    font-size:clamp(84px,25vw,148px);
  }
  .capgroup .services-head{grid-row:1;padding-left:0;padding-right:var(--pad)}
  .capgroup .services-list{grid-row:2}
}