/* ==========================================================================
   ANNEX — ARCHITECTURAL EDITORIAL v2.1
   Homepage composition layer. Scoped to .home so the other 13 routes are
   untouched. Design System v2 tokens are inherited from site.css.
   ========================================================================== */

.home{
  --ae-pad: clamp(18px, 5vw, 72px);
  --ae-maxw: 1296px;
  --ae-rule: var(--annex-divider);
}

.home .ae{max-width:var(--ae-maxw);margin-inline:auto;padding-inline:var(--ae-pad)}
.home .ae-band{position:relative;width:100%}

/* ---- editorial type scale ------------------------------------------------ */
.home .ae-display{
  font-size:clamp(34px, 6.1vw, 86px);
  line-height:.94;letter-spacing:-.04em;font-weight:600;color:var(--annex-text);margin:0}
.home .ae-h2{
  font-size:clamp(29px, 3.8vw, 54px);
  line-height:1.04;letter-spacing:-.03em;font-weight:600;color:var(--annex-text);margin:0}
.home .ae-lead{font-size:clamp(16.5px,1.4vw,20px);line-height:1.55;color:var(--annex-text-secondary);margin:0}
.home .ae-body{font-size:clamp(15.5px,1.15vw,16.5px);line-height:1.62;color:var(--annex-text-secondary);margin:0}
/* technical metadata: legible at real scale, never microtext */
.home .ae-meta{
  font-size:clamp(11px,.9vw,12.5px);line-height:1.45;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--annex-text-secondary);margin:0}
.home .ae-meta--red{color:var(--annex-red)}
.home .ae-meta--light{color:var(--annex-text-light)}

/* ---- the single Annex motif: one 32° roof angle -------------------------- */
.home .ae-notch{display:block;width:64px;height:32px;position:relative;flex:none}
.home .ae-notch::before,.home .ae-notch::after{
  content:"";position:absolute;bottom:0;width:38px;height:2px;background:var(--annex-red)}
.home .ae-notch::before{left:0;transform:rotate(-32deg);transform-origin:0 100%}
.home .ae-notch::after{right:0;transform:rotate(32deg);transform-origin:100% 100%}
.home .ae-notch--sm{width:38px;height:19px}
.home .ae-notch--sm::before,.home .ae-notch--sm::after{width:23px;height:1px}
.home .ae-notch--lg{width:clamp(84px,8vw,120px);height:clamp(42px,4vw,60px)}
.home .ae-notch--lg::before,.home .ae-notch--lg::after{width:clamp(50px,4.8vw,71px)}
.home .ae-notch--light::before,.home .ae-notch--light::after{background:var(--annex-text-light)}

/* a rule interrupted by the motif — the connective device */
.home .ae-runline{display:flex;align-items:center;gap:20px}
.home .ae-runline__ln{flex:1;height:1px;background:var(--annex-text)}

/* oversized background typography */
.home .ae-ghost{
  position:absolute;font-weight:600;letter-spacing:-.06em;line-height:.72;
  color:var(--annex-divider);z-index:0;pointer-events:none;user-select:none;
  -webkit-user-select:none}

/* ==========================================================================
   01 HERO — approved Hero C
   Headline and photograph form one band; beneath them a proof rail carries the
   rating, its qualification and the action on a single axis. The rating and the
   qualification sit inside one evidence group bound by a 2px red rule, so the
   score cannot be read apart from its attribution.
   ========================================================================== */
.home .ae-hero{background:var(--annex-white);overflow:hidden;padding-bottom:clamp(30px,3.4vw,52px)}
.home .ae-hero__top{padding-top:clamp(26px,4vw,66px);position:relative}
.home .ae-hero__eyebrow{display:flex;align-items:center;gap:14px;
  margin-bottom:clamp(16px,2vw,28px)}
.home .ae-hero__tick{width:28px;height:1px;background:var(--annex-red);flex:none}

.home .ae-hero__band{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,0);align-items:end}
.home .ae-hero__h1{margin:0}
.home .ae-hero__l1,.home .ae-hero__l2{display:block}
.home .ae-hero__l2{padding-left:clamp(22px,3.6vw,56px)}
.home .ae-hero__l3{
  display:block;padding-left:clamp(22px,3.6vw,56px);
  font-size:clamp(19px,2.3vw,33px);font-weight:500;letter-spacing:-.02em;
  color:var(--annex-text-secondary);line-height:1.1;margin-top:clamp(10px,1.2vw,16px)}

.home .ae-hero__media{margin:0}
.home .ae-hero__media img{width:100%;height:auto;display:block}
.home .ae-hero__cap{display:flex;justify-content:space-between;gap:16px;margin-top:12px}

/* --- desktop: photograph bleeds to the viewport edge, bottom-aligned to H1 --- */
@media (min-width:1000px){
  .home .ae-hero__band{grid-template-columns:48% 52%;gap:0}
  .home .ae-hero__h1{padding-bottom:clamp(10px,1.4vw,22px)}
  .home .ae-hero__media{margin-right:calc((100vw - var(--ae-maxw)) / -2 - var(--ae-pad))}
  .home .ae-hero__cap{padding-right:clamp(0px,4vw,72px)}
}
@media (max-width:999px){
  .home .ae-hero__media{margin-inline:calc(var(--ae-pad) * -1)}
  .home .ae-hero__cap{padding-inline:var(--ae-pad)}
}

/* --- proof rail --- */
.home .ae-hero__rail{
  border-top:2px solid var(--annex-text);margin-top:clamp(26px,3.2vw,46px);
  display:grid;grid-template-columns:1fr;gap:clamp(20px,2vw,0)}
.home .ae-hero__rail > *{padding-top:clamp(18px,2vw,26px)}

.home .ae-hero__score{display:flex;align-items:baseline;gap:clamp(12px,1.4vw,20px);margin:0}
.home .ae-hero__score .n{
  font-size:clamp(58px,6.4vw,96px);line-height:.78;font-weight:600;letter-spacing:-.055em;
  color:var(--annex-text)}
.home .ae-hero__score .src{
  font-size:clamp(12.5px,1.1vw,14.5px);letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--annex-text);line-height:1.4}
.home .ae-hero__qual{margin:0}
.home .ae-hero__qual b{
  display:block;font-size:clamp(13px,1.1vw,15px);line-height:1.35;font-weight:600;
  color:var(--annex-text);margin-bottom:5px}
.home .ae-hero__qual span{
  display:block;font-size:clamp(12.5px,1vw,14px);line-height:1.45;
  color:var(--annex-text-secondary)}

.home .ae-hero__act{display:flex;flex-direction:column;align-items:flex-start;gap:16px}

/* --- the bound evidence group: one red rule under score and qualification --- */
@media (min-width:768px){
  .home .ae-hero__rail{grid-template-columns:auto 1fr;gap:clamp(28px,3.4vw,64px)}
  .home .ae-hero__evidence{
    display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2vw,30px);align-items:end;
    border-bottom:2px solid var(--annex-red);
    padding-bottom:clamp(12px,1.4vw,18px)}
  .home .ae-hero__evidence .ae-hero__score{padding-top:0}
  .home .ae-hero__evidence .ae-hero__qual{
    border-left:1px solid var(--annex-divider);
    padding:0 0 2px clamp(18px,2vw,30px);max-width:42ch}
  .home .ae-hero__act{align-items:flex-end;padding-top:clamp(18px,2vw,26px)}
}

/* --- 768–1080: the band is single-column and the hero grows tall, so the
       headline and spacing tighten to keep the whole proof group above the
       fold. The qualification type is never reduced to buy space. --- */
@media (min-width:768px) and (max-width:999px){
  .home .ae-hero__top{padding-top:clamp(20px,2.4vw,30px)}
  .home .ae-hero__h1{font-size:clamp(38px,5vw,58px)}
  .home .ae-hero__l3{font-size:clamp(19px,2.2vw,26px);margin-top:10px}
  .home .ae-hero__band{gap:clamp(18px,2.2vw,26px)}
  .home .ae-hero__rail{margin-top:clamp(20px,2.4vw,30px)}
  .home .ae-hero__rail > *{padding-top:18px}
  .home .ae-hero__score .n{font-size:clamp(52px,5.6vw,72px)}
  .home .ae-hero{padding-bottom:26px}
}

/* --- mobile: the approved stack, red rule between score and qualification --- */
@media (max-width:767px){
  .home .ae-hero__evidence{display:contents}
  .home .ae-hero__qual{border-top:2px solid var(--annex-red);padding:14px 0 0}
  .home .ae-hero__act .btn{width:100%;text-align:center}
}

/* ==========================================================================
   02 SERVICES
   ========================================================================== */
.home .ae-svc{background:var(--annex-light);padding-block:clamp(56px,7vw,96px) clamp(56px,7vw,90px);
  overflow:hidden}
.home .ae-sechead{margin-bottom:clamp(26px,3.4vw,48px)}
.home .ae-sechead__eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.home .ae-svc__grid{display:grid;grid-template-columns:1fr;gap:clamp(26px,3vw,0)}
@media (min-width:1081px){
  .home .ae-svc__grid{grid-template-columns:63% 39%;column-gap:0;align-items:start}
  .home .ae-svc__visual{margin-left:-2%;margin-top:-64px}
}
@media (min-width:768px) and (max-width:1080px){
  .home .ae-svc__grid{grid-template-columns:1fr 42%;gap:clamp(24px,3vw,40px);align-items:start}
}
.home .ae-svc__row{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;
  gap:clamp(10px,1.4vw,18px);
  padding-block:clamp(15px,1.7vw,22px);min-height:62px;
  border-bottom:1px solid var(--ae-rule);text-decoration:none;position:relative;
  transition:border-color .18s ease}
.home .ae-svc__row:first-child{border-top:1px solid var(--ae-rule)}
.home .ae-svc__i{
  width:clamp(44px,6vw,88px);font-size:clamp(20px,2.6vw,34px);line-height:1;font-weight:600;
  letter-spacing:-.04em;color:var(--annex-divider);transition:color .18s ease}
.home .ae-svc__n{
  font-size:clamp(19px,2.6vw,34px);line-height:1.06;font-weight:600;letter-spacing:-.03em;
  color:var(--annex-text)}
.home .ae-svc__m{
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--annex-text-secondary);
  text-align:right;opacity:0;transition:opacity .18s ease}
.home .ae-svc__a{font-size:19px;color:var(--annex-divider);transition:color .18s ease,transform .18s ease}
/* active state — set by JS, and present in markup so it survives JS failure */
.home .ae-svc__row.is-active{border-bottom:2px solid var(--annex-text)}
.home .ae-svc__row.is-active .ae-svc__i,
.home .ae-svc__row.is-active .ae-svc__a{color:var(--annex-red)}
.home .ae-svc__row.is-active .ae-svc__m{opacity:1}
.home .ae-svc__row:hover .ae-svc__a,
.home .ae-svc__row:focus-visible .ae-svc__a{color:var(--annex-red);transform:translateX(4px)}
.home .ae-svc__row:focus-visible{outline:2px solid var(--annex-red);outline-offset:3px}
/* the rule that runs from the active row toward the image */
@media (min-width:1081px){
  .home .ae-svc__row.is-active::after{
    content:"";position:absolute;left:100%;bottom:-2px;width:12%;height:2px;
    background:var(--annex-text)}
  .home .ae-svc__m{min-width:158px}
}
@media (max-width:1080px){ .home .ae-svc__m{display:none} }

.home .ae-svc__visual{position:relative}
.home .ae-svc__visual img{width:100%;height:auto;display:block}
.home .ae-svc__anchor{
  position:absolute;left:-26px;bottom:64px;z-index:4;
  font-size:clamp(26px,2.6vw,34px);font-weight:600;letter-spacing:-.04em;line-height:1;
  color:var(--annex-red)}
.home .ae-svc__cap{display:flex;justify-content:space-between;gap:16px;margin-top:14px}
@media (max-width:1080px){
  .home .ae-svc__cap{display:block}
  .home .ae-svc__cap .ae-meta + .ae-meta{margin-top:6px}
  .home .ae-svc__anchor{left:auto;right:8px;bottom:auto;top:-34px}
}
@media (max-width:767px){
  .home .ae-svc__visual{width:72%;margin-left:28%}
  .home .ae-svc__anchor{left:-14px;right:auto;top:auto;bottom:44px}
}
/* the two documented visual states */
.home .ae-svc__states{
  display:grid;grid-template-columns:1fr;gap:22px;
  margin-top:clamp(26px,3vw,44px);border-top:1px solid var(--ae-rule);
  padding-top:clamp(20px,2vw,26px)}
@media (min-width:1081px){
  .home .ae-svc__states{grid-template-columns:1fr 1fr;gap:0}
  .home .ae-svc__state:last-child{border-left:1px solid var(--ae-rule);padding-left:34px}
  .home .ae-svc__state:first-child{padding-right:46px}
}
.home .ae-svc__state p{margin-top:10px;max-width:44ch}

/* ==========================================================================
   03 PROJECTS
   ========================================================================== */
.home .ae-prj{padding-block:clamp(56px,7vw,110px) 0;overflow:hidden}
.home .ae-prj__item{position:relative;margin-top:clamp(40px,5vw,76px)}
.home .ae-prj__item img{width:100%;height:auto;display:block}
.home .ae-prj__num{
  font-size:clamp(52px,14vw,210px);line-height:.72;font-weight:600;letter-spacing:-.06em;
  color:var(--annex-divider);margin:0}
.home .ae-prj__city{
  font-size:clamp(21px,2.4vw,34px);font-weight:600;letter-spacing:-.025em;
  margin:10px 0 2px;color:var(--annex-text)}
.home .ae-prj__type{
  font-size:clamp(11.5px,1vw,12.5px);letter-spacing:.15em;text-transform:uppercase;
  color:var(--annex-text-secondary);margin:0}
/* lane keeps labels on the container grid while images bleed */
.home .ae-prj__lane{max-width:var(--ae-maxw);margin-inline:auto;padding-inline:var(--ae-pad)}
@media (min-width:1081px){
  .home .ae-prj__lane{position:absolute;inset:0 0 auto 0;z-index:3;pointer-events:none}
  .home .ae-prj--a .ae-prj__shot{margin-left:26%;width:74%}
  .home .ae-prj--a .ae-prj__label{width:300px;padding-top:44px}
  .home .ae-prj--b{margin-top:104px}
  .home .ae-prj--b .ae-prj__shot{margin-left:46%;width:28%}
  .home .ae-prj--b .ae-prj__label{width:340px;padding:120px 0 0 44px}
  .home .ae-prj--b .ae-prj__rule{
    position:absolute;left:var(--ae-pad);top:120px;height:340px;width:1px;
    background:var(--ae-rule)}
  .home .ae-prj--c{margin-top:104px}
  .home .ae-prj--c .ae-prj__shot{width:68%}
  .home .ae-prj--c .ae-prj__label{width:300px;margin-left:auto;text-align:right;padding-top:80px}
}
@media (min-width:768px) and (max-width:1080px){
  .home .ae-prj--a .ae-prj__shot{margin-left:20%;width:80%}
  .home .ae-prj--b .ae-prj__shot{margin-left:40%;width:44%}
  .home .ae-prj--c .ae-prj__shot{width:80%}
  .home .ae-prj__label{margin-bottom:18px}
  .home .ae-prj--b .ae-prj__rule{display:none}
}
@media (max-width:767px){
  .home .ae-prj--a .ae-prj__shot{width:100%}
  .home .ae-prj--b .ae-prj__shot{margin-left:26%;width:74%}
  .home .ae-prj--c .ae-prj__shot{width:88%}
  .home .ae-prj__label{margin-bottom:16px}
  .home .ae-prj--b .ae-prj__rule{
    position:absolute;left:var(--ae-pad);top:0;height:56px;width:1px;background:var(--ae-rule)}
}
.home .ae-prj__foot{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  border-top:1px solid var(--ae-rule);padding-top:clamp(22px,2.4vw,28px);
  margin-top:clamp(52px,7vw,88px)}
@media (max-width:767px){ .home .ae-prj__foot .btn{width:100%;text-align:center} }

/* ==========================================================================
   04 EXTERIOR — image crosses into the navy plane
   ========================================================================== */
.home .ae-ext{
  background:var(--annex-navy);color:var(--annex-text-light);position:relative;overflow:hidden;
  margin-top:clamp(64px,9vw,120px);padding-bottom:clamp(56px,7vw,104px)}
.home .ae-ext__media img{width:100%;height:auto;display:block}
.home .ae-ext__inner{position:relative;z-index:3;
  padding-top:clamp(34px,5vw,104px)}
.home .ae-ext__word{
  font-size:clamp(46px,9vw,130px);line-height:.86;letter-spacing:-.05em;font-weight:600;
  color:#fff;margin:10px 0 0;position:relative;left:-.02em}
.home .ae-ext__inner .ae-lead{color:var(--annex-text-light);max-width:34ch;margin-top:26px}
.home .ae-ext__links{margin-top:clamp(22px,2.6vw,34px);display:flex;flex-wrap:wrap;gap:12px 32px}
.home .ae-ext__links a{
  color:#fff;text-decoration:none;font-size:clamp(16px,1.3vw,17px);font-weight:600;
  border-bottom:1px solid var(--annex-red);padding-bottom:3px}
.home .ae-ext__links a:hover,.home .ae-ext__links a:focus-visible{border-bottom-color:#fff}
.home .ae-ext__hair{
  margin-top:clamp(28px,3vw,44px);border-top:1px solid rgba(255,255,255,.2);
  padding-top:16px;max-width:46ch}
@media (min-width:1081px){
  .home .ae-ext__media{position:absolute;left:0;top:-64px;width:44%;z-index:2}
  .home .ae-ext__copy{width:52%;margin-left:48%}
}
@media (min-width:768px) and (max-width:1080px){
  .home .ae-ext__media{position:absolute;left:0;top:-40px;width:40%;z-index:2}
  .home .ae-ext__copy{width:56%;margin-left:44%}
}
@media (max-width:767px){
  .home .ae-ext__media{margin-inline:calc(var(--ae-pad) * -1)}
}

/* ==========================================================================
   05 HISTORICAL REPUTATION
   ========================================================================== */
.home .ae-rep{background:var(--annex-light);margin-top:clamp(64px,8vw,118px);
  padding-block:clamp(56px,7vw,100px) clamp(60px,7vw,110px)}
.home .ae-rep__top{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0}
.home .ae-rep__score{
  font-size:clamp(84px,20vw,300px);line-height:.74;font-weight:600;letter-spacing:-.06em;
  color:var(--annex-text);margin:22px 0 0}
/* the qualifier shares the number's baseline — it cannot be missed */
.home .ae-rep__flag{border-left:2px solid var(--annex-red);margin-left:44px;padding:0 0 42px 44px}
.home .ae-rep__flag .ae-notch{margin-bottom:16px}
.home .ae-rep__flag-t{
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--annex-text-secondary);margin:0 0 8px}
.home .ae-rep__flag-s{
  font-size:clamp(20px,1.8vw,23px);line-height:1.2;font-weight:600;letter-spacing:-.02em;
  color:var(--annex-text);margin:0;max-width:16ch}
@media (max-width:767px){
  .home .ae-rep__top{display:block}
  .home .ae-rep__flag{
    border-left:0;border-top:2px solid var(--annex-red);margin:22px 0 0;padding:18px 0 0}
  .home .ae-rep__flag-s{max-width:none}
}
.home .ae-rep__under{margin-top:clamp(24px,3vw,34px);display:grid;grid-template-columns:1fr;gap:26px}
@media (min-width:1081px){
  .home .ae-rep__under{grid-template-columns:38% 62%;gap:0}
  .home .ae-rep__l{padding-right:48px}
  .home .ae-rep__r{border-left:1px solid var(--ae-rule);padding-left:44px}
}
.home .ae-rep__count{
  font-size:clamp(24px,3vw,44px);font-weight:600;letter-spacing:-.025em;margin:0;
  color:var(--annex-text)}
.home .ae-rep__quote{
  font-size:clamp(21px,2.2vw,31px);line-height:1.32;font-weight:500;letter-spacing:-.015em;
  color:var(--annex-text);margin:0 0 22px}
.home .ae-rep__warn{margin-top:clamp(24px,2.6vw,34px);border-top:1px solid var(--ae-rule);
  padding-top:16px;max-width:56ch}
@media (max-width:1080px){
  .home .ae-rep__r{border-top:1px solid var(--ae-rule);padding-top:26px}
}

/* ==========================================================================
   06 SERVICE AREAS — GTA sits on the matrix, cropped by the edge
   ========================================================================== */
.home .ae-areas{padding-block:clamp(56px,7vw,112px) clamp(60px,7vw,116px);
  position:relative;overflow:hidden}
.home .ae-areas__inner{position:relative;z-index:2}
.home .ae-areas__ghost{
  right:clamp(-22px,-2vw,-56px);bottom:118px;font-size:clamp(120px,19vw,260px)}
@media (max-width:767px){ .home .ae-areas__ghost{bottom:auto;top:38px;right:-22px} }
.home .ae-areas__grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  border-top:2px solid var(--annex-text);margin-top:clamp(26px,3vw,48px);
  position:relative;z-index:2}
@media (min-width:768px){ .home .ae-areas__grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1081px){ .home .ae-areas__grid{grid-template-columns:repeat(4,1fr)} }
.home .ae-area{
  border-bottom:1px solid var(--ae-rule);padding:clamp(14px,1.8vw,24px) clamp(10px,1.6vw,22px)
  clamp(16px,2vw,26px);position:relative}
.home .ae-area::after{
  content:"";position:absolute;right:0;top:22px;bottom:22px;width:1px;background:var(--ae-rule)}
.home .ae-area:nth-child(2n)::after{content:none}
@media (min-width:768px){
  .home .ae-area:nth-child(2n)::after{content:""}
  .home .ae-area:nth-child(3n)::after{content:none}
}
@media (min-width:1081px){
  .home .ae-area:nth-child(3n)::after{content:""}
  .home .ae-area:nth-child(4n)::after{content:none}
}
/* label colour: --annex-text-light is a navy-only colour and fails on light */
/* Area / NN removed with Client Revision Pass v1 */
.home .ae-area__k{
  font-size:clamp(10.5px,.9vw,11.5px);letter-spacing:.14em;text-transform:uppercase;
  color:var(--annex-text-secondary);margin:0 0 9px}
.home .ae-area__c{
  font-size:clamp(15.5px,1.8vw,25px);font-weight:600;letter-spacing:-.025em;
  color:var(--annex-text);margin:0}
.home .ae-areas__foot{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  margin-top:clamp(22px,2.4vw,32px)}
@media (max-width:767px){ .home .ae-areas__foot .btn{width:100%;text-align:center} }

/* ==========================================================================
   07 FINAL CTA — the hero motif returns
   ========================================================================== */
.home .ae-final{
  background:var(--annex-navy-deep);color:var(--annex-text-light);position:relative;
  overflow:hidden;padding-bottom:clamp(64px,8vw,120px)}
.home .ae-final__inner{position:relative;z-index:2;padding-top:clamp(56px,8vw,118px)}
.home .ae-final__ghost{
  left:clamp(-16px,-2vw,-40px);bottom:clamp(-18px,-3vw,-56px);
  font-size:clamp(110px,21vw,300px);color:rgba(255,255,255,.085)}
.home .ae-final h2{
  font-size:clamp(29px,5.4vw,80px);line-height:.98;letter-spacing:-.04em;font-weight:600;
  color:#fff;margin:clamp(16px,2vw,26px) 0 0;max-width:16ch}
.home .ae-final__row{
  display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between;
  margin-top:clamp(28px,4vw,52px)}
.home .ae-final__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
.home .ae-final__mail{
  display:block;width:100%;text-align:right;margin-top:18px;color:var(--annex-text-light);
  font-size:14.5px;text-decoration:none}
@media (max-width:767px){
  .home .ae-final__row{display:block}
  .home .ae-final__actions{margin-top:28px}
  .home .ae-final__actions .btn{width:100%;text-align:center}
  .home .ae-final__mail{text-align:left}
}

/* ==========================================================================
   FOOTER — numbered index, matching the page
   ========================================================================== */
.home .pf .pf-col h3{display:flex;align-items:baseline;gap:10px}
.home .pf .ae-pfn{font-size:11px;letter-spacing:.1em;color:var(--annex-red);font-weight:700}
.home .pf .pf-in{border-top:1px solid rgba(255,255,255,.16);padding-top:clamp(36px,4vw,52px)}

/* ==========================================================================
   MOTION — non-essential, and it fails open
   ========================================================================== */
.home .ae-reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .js .home .ae-reveal{opacity:0;transform:translateY(14px);
    transition:opacity .5s ease,transform .5s ease}
  .js .home .ae-reveal.is-in{opacity:1;transform:none}
}

/* ==========================================================================
   HERO — perspective grid planes
   The decorative background from the approved header prototype, ported to the
   locked palette. Two skewed plate-grids flanking the first screen, masked out
   at top and bottom so they fade rather than end on a hard edge.

   Purely decorative: drawn on pseudo-elements, so there is no extra markup and
   nothing for a screen reader to announce. Absolutely positioned inside the
   hero's existing stacking context, so it cannot shift a single element, and
   the hero's existing overflow:hidden clips it — the planes extend past the
   viewport edge by design and must never create a scrollbar.
   ========================================================================== */
.home .ae-hero{position:relative}

.home .ae-hero::before,
.home .ae-hero::after{
  content:"";
  position:absolute;
  /* The prototype hero was ~830px tall and sized these planes from the
     viewport width. This hero is ~610px, so a vw-derived height pushed the
     masked band past the section and the grid all but disappeared. Height is
     tied to the hero itself; the width keeps the prototype's proportion. */
  top:0;
  width:52vw;height:118%;
  z-index:0;
  pointer-events:none;
  opacity:.32;
  background-image:
    linear-gradient(rgba(6,36,82,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6,36,82,.14) 1px, transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 72%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 72%,transparent 100%)}

.home .ae-hero::before{
  left:-20vw;
  transform:perspective(900px) rotateX(58deg) rotateZ(22deg)}

.home .ae-hero::after{
  right:-20vw;
  transform:perspective(900px) rotateX(58deg) rotateZ(-22deg)}

/* hero content sits above the planes */
.home .ae-hero__top{position:relative;z-index:1}

@media (max-width:767px){
  .home .ae-hero::before,
  .home .ae-hero::after{opacity:.18;background-size:32px 32px}
}

/* the grid is a texture, not information — drop it where motion or contrast
   preferences suggest a plainer surface */
@media (prefers-contrast:more){
  .home .ae-hero::before,
  .home .ae-hero::after{display:none}
}

/* ==========================================================================
   SERVICES — UI Lab visual language
   Applied to the existing interactive block. The switching logic, the real
   project photography, the claim-safety states and the caption beneath the
   visual are untouched; only proportion, weight and movement change.
   CSS only — no markup or script change was needed.
   ========================================================================== */

/* the list dominates: 1fr .72fr with a real gutter instead of a 63/39 split */
@media (min-width:1081px){
  .home .ae-svc__grid{
    grid-template-columns:1fr .72fr;
    column-gap:clamp(40px,4.4vw,64px)}
  /* the pulled-up visual is kept; only the horizontal overlap gives way to the gutter */
  .home .ae-svc__visual{margin-left:0;margin-top:-64px}
  /* the active rule now crosses the gutter rather than a zero gap */
  .home .ae-svc__row.is-active::after{width:clamp(40px,4.4vw,64px)}
}
@media (min-width:768px) and (max-width:1080px){
  .home .ae-svc__grid{grid-template-columns:1fr .72fr;gap:clamp(28px,3.4vw,44px)}
}

/* numbers read as graphic metadata, and turn red when the row is live */
.home .ae-svc__i{
  font-size:clamp(21px,2.2vw,26px);
  font-weight:700;
  color:var(--annex-divider);
  transition:color .2s ease}

/* the name steps aside on hover, focus and active */
.home .ae-svc__n{
  transition:transform .25s ease,color .2s ease;
  will-change:transform}
.home .ae-svc__row:hover .ae-svc__n,
.home .ae-svc__row:focus-visible .ae-svc__n,
.home .ae-svc__row.is-active .ae-svc__n{transform:translateX(8px)}

.home .ae-svc__row:hover .ae-svc__i,
.home .ae-svc__row:focus-visible .ae-svc__i{color:var(--annex-red)}

/* the arrow fades in rather than only changing colour */
.home .ae-svc__a{
  opacity:0;
  color:var(--annex-red);
  transition:opacity .25s ease,transform .25s ease}
.home .ae-svc__row:hover .ae-svc__a,
.home .ae-svc__row:focus-visible .ae-svc__a,
.home .ae-svc__row.is-active .ae-svc__a{opacity:1;color:var(--annex-red);transform:none}

/* mobile keeps its mechanics; only the proportions follow the new scale */
@media (max-width:767px){
  .home .ae-svc__i{font-size:19px}
  .home .ae-svc__n{font-size:20px}
  .home .ae-svc__row{padding-block:17px;min-height:62px}
  .home .ae-svc__visual{margin-top:26px}
  /* touch has no hover: the arrow follows the tapped row only */
  .home .ae-svc__row:hover .ae-svc__a{opacity:0}
  .home .ae-svc__row.is-active .ae-svc__a{opacity:1}
  .home .ae-svc__row:hover .ae-svc__n{transform:none}
  .home .ae-svc__row.is-active .ae-svc__n{transform:translateX(8px)}
}

/* a pointer that cannot hover should never depend on hover styling */
@media (hover:none){
  .home .ae-svc__row:hover .ae-svc__a{opacity:0}
  .home .ae-svc__row:hover .ae-svc__n{transform:none}
  .home .ae-svc__row:hover .ae-svc__i{color:var(--annex-divider)}
  .home .ae-svc__row.is-active .ae-svc__a{opacity:1}
  .home .ae-svc__row.is-active .ae-svc__n{transform:translateX(8px)}
  .home .ae-svc__row.is-active .ae-svc__i{color:var(--annex-red)}
}

@media (prefers-reduced-motion:reduce){
  .home .ae-svc__n,.home .ae-svc__a,.home .ae-svc__i{transition:none}
  .home .ae-svc__row:hover .ae-svc__n,
  .home .ae-svc__row:focus-visible .ae-svc__n,
  .home .ae-svc__row.is-active .ae-svc__n{transform:none}
}

/* The narrower list column wrapped "Emergency Roof Repair" onto two lines at
   the old 34px. The UI Lab sets names at 25px; 27px keeps the six rows on one
   line each while the number column tightens to suit the smaller numerals. */
@media (min-width:1081px){
  .home .ae-svc__n{font-size:clamp(19px,2vw,27px)}
  .home .ae-svc__i{width:clamp(40px,3.4vw,56px)}
  .home .ae-svc__m{min-width:126px}
}

/* ==========================================================================
   SERVICES — second pass toward the UI Lab
   The first pass moved details; this one moves the proportions. The list is
   now the subject of the section and the photograph is itssupporting note.
   Still no cards, shadows, rounding or lab palette.
   ========================================================================== */
@media (min-width:1081px){
  /* the list takes the room: .58fr right column, wider gutter */
  .home .ae-svc__grid{
    grid-template-columns:1fr .58fr;
    column-gap:clamp(52px,5.4vw,78px)}

  /* numbers become graphic markers, not labels */
  .home .ae-svc__i{
    width:clamp(62px,5vw,78px);
    font-size:clamp(30px,2.9vw,38px);
    font-weight:700;
    letter-spacing:-.045em;
    font-variant-numeric:tabular-nums}

  .home .ae-svc__n{font-size:clamp(24px,2.3vw,30px)}

  /* air between rows */
  .home .ae-svc__row{
    min-height:100px;
    padding-block:clamp(22px,2.4vw,30px);
    gap:clamp(14px,1.8vw,24px)}

  /* a longer travel, so the movement is read rather than guessed */
  .home .ae-svc__row:hover .ae-svc__n,
  .home .ae-svc__row:focus-visible .ae-svc__n,
  .home .ae-svc__row.is-active .ae-svc__n{transform:translateX(14px)}

  .home .ae-svc__row.is-active::after{width:clamp(52px,5.4vw,78px)}

  /* the photograph steps back: narrower column, and it no longer runs to the
     full height of the list */
  .home .ae-svc__visual{margin-top:-48px}
  .home .ae-svc__visual img{max-height:520px;object-fit:cover;object-position:50% 40%}
}

/* active state carries a red axis instead of a card: the marker sits in the
   row's own left gutter, so no text moves when it appears */
.home .ae-svc__row{position:relative}
.home .ae-svc__row::before{
  content:"";position:absolute;left:-18px;top:50%;
  width:3px;height:0;background:var(--annex-red);
  transform:translateY(-50%);
  transition:height .25s ease}
.home .ae-svc__row.is-active::before{height:calc(100% - 24px)}
@media (max-width:767px){
  .home .ae-svc__row::before{left:-10px;width:2px}
}

/* the arrow travels as it appears */
.home .ae-svc__a{font-size:21px;transform:translateX(-6px)}
.home .ae-svc__row:hover .ae-svc__a,
.home .ae-svc__row:focus-visible .ae-svc__a,
.home .ae-svc__row.is-active .ae-svc__a{transform:translateX(0)}

/* mobile follows the same proportion at its own scale */
@media (max-width:767px){
  .home .ae-svc__i{font-size:24px;font-weight:700;width:52px;font-variant-numeric:tabular-nums}
  .home .ae-svc__n{font-size:21px}
  .home .ae-svc__row{min-height:76px;padding-block:21px}
  .home .ae-svc__row.is-active .ae-svc__n{transform:translateX(10px)}
}

@media (prefers-reduced-motion:reduce){
  .home .ae-svc__row::before,.home .ae-svc__a{transition:none}
  .home .ae-svc__row:hover .ae-svc__n,
  .home .ae-svc__row:focus-visible .ae-svc__n,
  .home .ae-svc__row.is-active .ae-svc__n{transform:none}
  .home .ae-svc__a{transform:none}
}

/* The index marker was positioned for the wider photograph; at the new column
   it landed on the image. It now sits at the frame's top-left corner, outside
   the picture, still tying the visual to the active row. */
@media (min-width:1081px){
  .home .ae-svc__anchor{
    left:-34px;top:-4px;bottom:auto;right:auto;
    font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
}

/* Same correction on mobile: the marker sat over the caption once the caption
   moved. It now uses the left gutter created by the visual's 28% offset. */
@media (max-width:767px){
  .home .ae-svc__anchor{
    left:-46px;top:0;bottom:auto;right:auto;
    font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
}

/* ==========================================================================
   SERVICES — matched to the measured UI Lab
   Values taken from rendering the reference, not estimated: rows 72px,
   numbers 23px/800, names 25px/750, grid 660/476 (≈1.39), gutter 64px,
   photograph 476×490. Inter Tight ships 400–700 here, so 700 stands in for
   the reference's 800 and 750 rather than letting the browser synthesise a
   heavier face.
   ========================================================================== */
@media (min-width:1081px){
  .home .ae-svc__grid{
    grid-template-columns:1fr .68fr;
    column-gap:64px}

  /* density, not air — the reference rows are 72px */
  .home .ae-svc__row{
    min-height:76px;
    padding-block:18px;
    gap:16px}

  /* smaller than my previous pass, and heavier: weight carries the list */
  .home .ae-svc__i{
    width:66px;
    font-size:24px;
    font-weight:700;
    letter-spacing:-.02em}
  .home .ae-svc__n{
    font-size:26px;
    font-weight:700;
    letter-spacing:-.02em}

  .home .ae-svc__row:hover .ae-svc__n,
  .home .ae-svc__row:focus-visible .ae-svc__n,
  .home .ae-svc__row.is-active .ae-svc__n{transform:translateX(10px)}

  .home .ae-svc__row.is-active::after{width:64px}
  .home .ae-svc__row::before{left:-16px;width:2px}
  .home .ae-svc__row.is-active::before{height:calc(100% - 18px)}

  /* the reference photograph is close to square and carries real weight */
  .home .ae-svc__visual{margin-top:-40px}
  .home .ae-svc__visual img{
    width:100%;
    aspect-ratio:476 / 490;
    max-height:none;
    height:auto;
    object-fit:cover;
    object-position:50% 42%}
  .home .ae-svc__anchor{left:-30px;top:-4px;font-size:20px}
}

/* mobile keeps the same character at its own scale */
@media (max-width:767px){
  .home .ae-svc__i{font-size:20px;font-weight:700;width:48px}
  .home .ae-svc__n{font-size:20px;font-weight:700}
  .home .ae-svc__row{min-height:68px;padding-block:17px}
  .home .ae-svc__row.is-active .ae-svc__n{transform:translateX(8px)}
}

/* Must stay last in the file: the breakpoint blocks above re-declare the
   transform, so an earlier reduced-motion rule was being overridden. */
@media (prefers-reduced-motion:reduce){
  .home .ae-svc__n,.home .ae-svc__a,.home .ae-svc__i,.home .ae-svc__row::before{transition:none}
  .home .ae-svc__row:hover .ae-svc__n,
  .home .ae-svc__row:focus-visible .ae-svc__n,
  .home .ae-svc__row.is-active .ae-svc__n{transform:none}
  .home .ae-svc__a{transform:none}
}


/* ==========================================================================
   Client Revision Pass v1 — the historical rating is secondary proof.
   One band, one attribution, a link to the full record. The roofing project
   grid above it is the primary evidence and now carries the weight.
   ========================================================================== */
.home .ae-rep--compact{background:var(--annex-light);margin-top:clamp(48px,6vw,84px);
  padding-block:clamp(30px,3.4vw,46px)}
.home .ae-rep__bar{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.4vw,34px);
  align-items:start}
@media (min-width:900px){
  .home .ae-rep__bar{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(34px,4vw,64px)}
  .home .ae-rep__side--q{border-left:1px solid var(--ae-rule);padding-left:clamp(28px,3vw,48px)}
}
.home .ae-rep__h{margin:10px 0 10px;font-size:clamp(24px,2.6vw,34px);line-height:1.08;
  font-weight:600;letter-spacing:-.03em;color:var(--annex-text)}
.home .ae-rep--compact .ae-rep__quote{margin:0 0 20px;font-size:clamp(16px,1.5vw,19px);
  line-height:1.5;color:var(--annex-text)}

/* ==========================================================================
   Final fixes — the homepage project field carries three cards.
   The third project used to be a hand-built band: a different composition,
   a decorative 003 label, and links that went to the catalogue rather than to
   the project. It is a normal Project System card now, so the field needs the
   same three-column treatment the service pages already use. Scoped to .home,
   so project-system.css and every other page are untouched.
   ========================================================================== */
@media (min-width:900px){
  .home .pjs-field{grid-template-columns:repeat(3,minmax(0,1fr))}
  .home .pjs-field > .pjx:nth-child(odd)::after{content:none}
  .home .pjs-field > .pjx::after{
    content:"";position:absolute;top:0;bottom:0;right:calc(var(--pjs-gap) * -1);
    width:1px;background:var(--annex-divider)}
  .home .pjs-field > .pjx:last-child::after{content:none}
}
/* the closing row keeps the note and the button the band used to carry */
.home .pjs-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-top:clamp(26px,3vw,44px)}
@media (max-width:767px){ .home .pjs-foot .btn{width:100%;text-align:center} }