/* =============================================================
   Sharp Engineers — Site 3
   Section-for-section reconstruction of the Leroux "Business Home"
   layout, built from measured metrics. Original CSS; content and
   photography are Sharp Engineers' own.

   Measured from the reference page:
     container 1440   nav 96
     h1 47/55.4   h2 37/45.8   h3 28/36.75   h4 22/30.8 (500)
     h5 18/27 (500)  h6 15/24 (500)   body Heebo 15
     pill: radius 25, padding 5/29, 14px
     dark #19272B, band #223035, heading #AFC1C5
   ============================================================= */

:root{
  --bg:#19272B;
  --band:#223035;
  --head:#AFC1C5;
  --white:#FFFFFF;
  --body:#8FA2A7;
  --faint:rgba(175,193,197,.42);
  --line:rgba(175,193,197,.15);
  --line2:rgba(175,193,197,.28);
  --gold:#C69A2D;
  --nav:96px;
  --max:1440px;
  --gut:clamp(20px,4.4vw,64px);
  --fh:"DM Sans",ui-sans-serif,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --fb:"Heebo",ui-sans-serif,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
[id]{scroll-margin-top:calc(var(--nav) + 14px)}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--fb);font-size:15px;line-height:1.86;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4,h5,h6{font-family:var(--fh);color:var(--head);margin:0;font-weight:400}
h1{font-size:clamp(32px,4.1vw,47px);line-height:1.178}
h2{font-size:clamp(27px,3.2vw,37px);line-height:1.238}
h3{font-size:clamp(22px,2.4vw,28px);line-height:1.3125}
h4{font-size:clamp(19px,1.9vw,22px);line-height:1.4;font-weight:500}
h5{font-size:18px;line-height:1.5;font-weight:500;color:var(--white)}
h6{font-size:15px;line-height:1.6;font-weight:500}
p{margin:0 0 20px}
p:last-child{margin-bottom:0}
.white{color:var(--white)}
.faint{color:var(--faint)}
.gold{color:var(--gold)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.band{background:var(--band)}
section{padding:clamp(56px,7.4vw,106px) 0}
.tight{padding-top:0}
.flush{padding-bottom:0}

/* ---------------- pill button (radius 25, pad 5/29, 14px) ------------- */
.pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:5px 29px;line-height:34px;border-radius:25px;font-size:14px;
  font-family:var(--fb);font-weight:400;
  background:rgba(255,255,255,.2);color:var(--white);border:1px solid transparent;
  transition:background .3s,color .3s,border-color .3s
}
.pill:hover{background:var(--gold);color:#15181C;border-color:var(--gold)}
.pill-gold{background:var(--gold);color:#15181C}
.pill-gold:hover{background:transparent;color:var(--gold);border-color:var(--gold)}
.arrow::after{content:"↗";font-size:12px;line-height:1}
.ulink{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--head);
  border-bottom:1px solid var(--line2);padding-bottom:4px;transition:color .3s,border-color .3s
}
.ulink:hover{color:var(--gold);border-color:var(--gold)}

/* ------------------------------ header -------------------------------- */
header{position:sticky;top:0;z-index:80;background:rgba(25,39,43,.92);backdrop-filter:blur(14px)}
.nav{display:flex;align-items:center;height:var(--nav);gap:24px}
.brand{flex:none}
.brand img{height:46px;width:auto}
.menu{display:flex;gap:clamp(20px,3.6vw,58px);list-style:none;margin:0 auto;padding:0}
.menu a{font-size:15px;color:var(--head);position:relative;padding:4px 0}
.menu a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .3s}
.menu a:hover{color:var(--white)}
.menu a:hover::after,.menu a[aria-current="page"]::after{width:100%}
.menu a[aria-current="page"]{color:var(--white)}
.burger{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;padding:10px;margin-left:auto}
.burger span{display:block;height:1.5px;background:var(--head);margin:5px 0;transition:.3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(max-width:1000px){
  .menu{position:fixed;inset:var(--nav) 0 auto;flex-direction:column;gap:0;background:var(--band);padding:6px 0;margin:0;display:none}
  .menu.open{display:flex}
  .menu a{display:block;padding:15px var(--gut);font-size:16px}
  .menu a::after{display:none}
  .burger{display:block}
  .navpill{display:none}
  .brand img{height:38px;width:auto}
}

/* ------------------------------- hero ---------------------------------
   Full-bleed photo filling the viewport below the header, copy overlaid on
   the left at mid height. svh is used so mobile browser chrome collapsing
   does not leave the hero taller than the screen; the vh line above it is
   the fallback for anything that does not know svh.                      */
.hero{
  position:relative;padding:0;overflow:hidden;display:flex;align-items:center;
  min-height:calc(100vh - var(--nav));
  min-height:calc(100svh - var(--nav))
}
.hero__bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:grayscale(.5) contrast(1.04)
}
/* Left-weighted scrim: the copy sits left, so the shading is heaviest there
   and clears toward the right where the building should still read. */
.hero::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(25,39,43,.92) 0%,rgba(25,39,43,.74) 34%,
                          rgba(25,39,43,.38) 66%,rgba(25,39,43,.24) 100%),
    linear-gradient(180deg,rgba(25,39,43,.42),transparent 26%)
}
.hero__inner{position:relative;z-index:2;width:100%}
.hero__copy{max-width:min(620px,56%)}
.hero__sub{
  margin:clamp(14px,1.7vw,22px) 0 0;
  font-family:var(--fh);font-weight:400;
  font-size:clamp(16px,1.55vw,21px);line-height:1.5;
  color:var(--white);max-width:46ch;text-wrap:balance
}

@media(max-width:900px){
  .hero__copy{max-width:none}
  /* A 90deg scrim leaves the right edge of a phone screen too light for
     white type that now runs the full width. */
  .hero::after{
    background:
      linear-gradient(90deg,rgba(25,39,43,.88),rgba(25,39,43,.68) 60%,rgba(25,39,43,.58)),
      linear-gradient(180deg,rgba(25,39,43,.4),transparent 30%)
  }
}

/* ------------------------------ grids --------------------------------- */
.two{display:grid;grid-template-columns:1fr 1.32fr;gap:clamp(28px,5.5vw,92px);align-items:start}
.even{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,66px);align-items:start}
@media(max-width:900px){.two,.even{grid-template-columns:1fr}}

/* three captioned cards, divided by rules like the reference */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.trio figure{margin:0;position:relative;overflow:hidden;aspect-ratio:16/11;padding:0 clamp(10px,1.6vw,22px)}
.trio figure + figure{border-left:1px solid var(--line)}
.trio .ph{position:absolute;inset:0 clamp(10px,1.6vw,22px);overflow:hidden}
.trio img{width:100%;height:100%;object-fit:cover;filter:grayscale(.55);transition:transform .8s,filter .5s}
.trio figure:hover img{transform:scale(1.05);filter:grayscale(0)}
.trio figcaption{position:absolute;left:clamp(22px,2.6vw,40px);bottom:24px;z-index:2}
.trio figcaption strong{display:block;font-family:var(--fh);font-size:18px;font-weight:500;color:var(--white)}
.trio figcaption span{font-size:13px;color:var(--gold)}
.trio .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(21,24,28,.85))}
@media(max-width:860px){.trio{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.trio{grid-template-columns:1fr}.trio figure + figure{border-left:0;border-top:1px solid var(--line)}}

/* ------------------------------ ticks --------------------------------- */
.ticks{list-style:none;margin:0 0 28px;padding:0}
.ticks li{position:relative;padding-left:30px;margin-bottom:12px;font-size:15px;color:var(--head)}
.ticks li::before{content:"";position:absolute;left:2px;top:.6em;width:11px;height:6px;border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg)}

/* ------------------------------ stats --------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,4vw,54px)}
.stats svg{stroke:var(--gold);margin-bottom:24px}
.stats .n{font-family:var(--fh);font-size:clamp(34px,4.4vw,52px);line-height:1;color:var(--head)}
.stats .l{font-size:14px;margin-top:11px;color:var(--body)}
@media(max-width:820px){.stats{grid-template-columns:1fr 1fr;gap:38px}}

/* ---- "About our work": curtain panels ---------------------------------
   Ported from the Ampus build. flex-grow animates reliably in every
   browser this has to run in; animating grid columns does not. Each panel
   owns its rail AND its content, which is what lets the open one widen in
   place rather than swapping a shared box.                              */
.aow{
  display:flex;align-items:stretch;
  min-height:clamp(420px,46vw,560px);
  border-top:1px solid var(--line)
}
.aow__panel{
  position:relative;flex:1 1 0;min-width:0;
  display:flex;align-items:stretch;
  padding:26px 0 0;border-left:1px solid var(--line);cursor:pointer;overflow:hidden;
  transition:flex-grow .55s cubic-bezier(.2,.7,.3,1),background .4s ease
}
.aow__panel:last-child{border-right:1px solid var(--line)}
.aow__panel:hover{background:rgba(255,255,255,.02)}
.aow__panel.is-active{flex-grow:5.6;background:rgba(255,255,255,.03)}

/* ---- the rail: arrow, vertical label, ghost numeral ---- */
.aow__rail{
  flex:none;width:clamp(64px,6vw,104px);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between
}
.aow__arrow{
  width:28px;height:28px;fill:none;stroke:var(--faint);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .35s ease,transform .45s cubic-bezier(.2,.7,.3,1)
}
.aow__panel.is-active .aow__arrow{stroke:var(--gold);transform:rotate(45deg)}
.aow__label{
  writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;
  font-family:var(--fh);font-size:clamp(15px,1.25vw,18px);letter-spacing:.02em;
  color:var(--faint);transition:color .35s ease
}
.aow__panel.is-active .aow__label{color:var(--gold)}
.aow__num{
  font-family:var(--fh);font-size:clamp(36px,4.7vw,82px);font-weight:500;
  line-height:.78;letter-spacing:-.04em;color:rgba(175,193,197,.13);
  /* Sized against the rail, not the panel: the rail sits hard against the
     panel's left edge, so anything wider than the rail crosses the divider.
     Two digits in DM Sans measure ~1.175em with this tracking, so the rail
     (64-104px) sets the ceiling at 4.7vw / 82px. Panel clips as a backstop.
     Deliberately running off the bottom edge - texture as much as a label. */
  margin-bottom:-.22em;user-select:none;transition:color .35s ease
}
.aow__panel.is-active .aow__num{color:rgba(198,154,45,.26)}

/* ---- the content that opens ---- */
.aow__content{
  flex:1 1 auto;min-width:0;
  display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(16px,2.2vw,36px);
  align-items:center;padding:0 clamp(14px,2.2vw,38px) 26px;
  opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility 0s linear .35s
}
.aow__panel.is-active .aow__content{
  opacity:1;visibility:visible;transition:opacity .45s ease .12s,visibility 0s
}
.aow__content img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(.55)}
.aow__content .ticks{margin-bottom:22px}

/* ---- Stacked on small screens ----
   A row of five narrow strips is unusable on a phone: there is no width to
   open into. Each becomes a full-width row, its label reading normally. */
@media(max-width:900px){
  .aow{flex-direction:column;min-height:0;border-bottom:1px solid var(--line)}
  .aow__panel{flex:none;display:block;padding:0;border-left:0;border-top:1px solid var(--line)}
  .aow__panel:first-child{border-top:0}
  .aow__panel:last-child{border-right:0}
  .aow__panel.is-active{flex-grow:0}
  .aow__rail{width:auto;flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;padding:18px var(--gut)}
  .aow__label{writing-mode:horizontal-tb;transform:none;font-size:17px;order:2}
  .aow__arrow{width:22px;height:22px;order:3;margin-left:auto}
  .aow__num{font-size:16px;line-height:1;margin:0;order:1;color:var(--faint)}
  .aow__panel.is-active .aow__num{color:var(--gold)}
  .aow__content{display:none;grid-template-columns:1fr;padding:0 var(--gut) 26px}
  .aow__panel.is-active .aow__content{display:grid}
}
@media(prefers-reduced-motion:reduce){
  .aow__panel,.aow__content,.aow__arrow{transition:none;transition-delay:0s !important}
}

/* --------------------------- centred band ------------------------------ */
.centre{text-align:center}
.centre h2{max-width:22ch;margin:0 auto 32px}

/* --------------------- media collage + floating stat ------------------- */
.collage{position:relative}
.collage .m{position:relative;overflow:hidden}
.collage .m img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:grayscale(.6)}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.45);display:grid;place-items:center;backdrop-filter:blur(3px)}
.play::after{content:"";border-left:15px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:5px}
.statcard{background:var(--band);padding:24px 28px;max-width:290px;margin-top:-56px;position:relative;z-index:2}
.statcard .k{font-size:14px;color:var(--body)}
.statcard .v{font-family:var(--fh);font-size:clamp(28px,3.2vw,38px);color:var(--faint);line-height:1.2;margin-top:4px}
@media(max-width:900px){.statcard{margin-top:18px;max-width:none}}

/* --------------------------- bordered quad ----------------------------- */
.quad{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}
.quad a{padding:clamp(22px,2.6vw,34px);border-right:1px solid var(--line);display:block;transition:background .3s}
.quad a:last-child{border-right:0}
.quad a:hover{background:rgba(175,193,197,.04)}
.quad .im{overflow:hidden;margin-bottom:18px}
.quad img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(.6);transition:transform .8s,filter .5s}
.quad a:hover img{transform:scale(1.05);filter:grayscale(0)}
.quad .t{font-size:13px;color:var(--gold)}
.quad h5{margin-top:7px}
@media(max-width:900px){
  .quad{grid-template-columns:1fr 1fr}
  .quad a:nth-child(2n){border-right:0}
  .quad a:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:560px){
  .quad{grid-template-columns:1fr}
  .quad a{border-right:0;border-bottom:1px solid var(--line)}
  .quad a:last-child{border-bottom:0}
}

/* ------------------------------ footer --------------------------------- */
.fstrip{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fstrip .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;padding-bottom:26px}
.fstrip nav{display:flex;gap:clamp(18px,2.6vw,40px);font-size:14px}
.fstrip .c{display:flex;gap:clamp(18px,2.6vw,38px);font-size:14px;color:var(--head)}
.fstrip a:hover{color:var(--gold)}
footer{background:var(--band)}
.fmain{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:clamp(26px,4vw,56px);padding:clamp(48px,6vw,80px) 0}
.fmain img.fl{height:58px;width:auto;margin-bottom:20px}
.fmain h6{color:var(--gold);margin-bottom:16px}
.fmain ul{list-style:none;margin:0;padding:0}
.fmain li{margin-bottom:10px;font-size:14px}
.fmain a:hover{color:var(--gold)}
.sub{display:flex;gap:10px;border-bottom:1px solid var(--line2);padding-bottom:6px;margin-top:22px}
.sub input{flex:1;background:none;border:0;color:var(--head);font-family:var(--fb);font-size:14px;padding:6px 0}
.sub input:focus{outline:none}
.sub button{flex:none;cursor:pointer}
.legal{border-top:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--faint)}
@media(max-width:900px){.fmain{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fmain{grid-template-columns:1fr}}

/* --------------------------- inner pages ------------------------------- */
.phead{padding:clamp(48px,6vw,92px) 0 clamp(34px,4vw,58px);border-bottom:1px solid var(--line)}
.phead .cr{font-size:13px;color:var(--gold);margin-bottom:14px}
.phead p{max-width:64ch;margin-top:18px}
.svclist{border-top:1px solid var(--line)}
.svcrow{display:grid;grid-template-columns:56px 1fr 1.25fr;gap:clamp(18px,3vw,48px);padding:clamp(26px,3.4vw,50px) 0;border-bottom:1px solid var(--line)}
.svcrow .n{font-family:var(--fh);font-size:15px;color:var(--gold)}
@media(max-width:820px){.svcrow{grid-template-columns:1fr}.svcrow .n{display:none}}
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.specs div{background:var(--bg);padding:clamp(20px,2.4vw,32px)}
.specs h4{margin-bottom:12px;color:var(--white)}
.specs ul{list-style:none;margin:0;padding:0}
.specs li{font-size:14px;padding:3px 0}
@media(max-width:1040px){.specs{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.specs{grid-template-columns:1fr}}
.infolist{list-style:none;margin:0;padding:0}
.infolist li{display:flex;gap:16px;padding:17px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--head)}
.infolist li:first-child{border-top:1px solid var(--line)}
.infolist strong{flex:none;width:92px;font-family:var(--fb);font-weight:400;font-size:13px;color:var(--gold)}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:600px){form .row{grid-template-columns:1fr}}
label{display:block;font-size:13px;color:var(--body);margin:0 0 7px}
input,textarea{width:100%;background:none;border:0;border-bottom:1px solid var(--line2);color:var(--white);font-family:var(--fb);font-size:15px;padding:10px 0 12px;margin-bottom:22px;transition:border-color .3s}
input:focus,textarea:focus{outline:none;border-color:var(--gold)}
textarea{resize:vertical;min-height:112px}
.formnote{font-size:13px;color:var(--faint);margin-top:12px}
.mapframe{border:1px solid var(--line);width:100%;height:420px;filter:grayscale(1) invert(.92) contrast(.86)}

/* ------------------------------ reveal --------------------------------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .85s cubic-bezier(.2,.7,.3,1),transform .85s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ----------------------------------------------------------------------
   Mobile pass
   ---------------------------------------------------------------------- */
@media(max-width:820px){
  :root{--nav:68px}
  .brand img{height:34px;width:auto}
  /* Menu rows and the burger both clear the 44px touch target. */
  .menu a{padding:16px var(--gut)}
  section{padding:clamp(48px,9vw,72px) 0}
  .two{gap:30px}
  .stats{gap:34px 24px}
  .stats svg{width:36px;height:36px;margin-bottom:16px}
  .quad a{padding:20px}
  .fstrip .wrap{flex-direction:column;gap:14px;align-items:flex-start}
  .fstrip .c{flex-direction:column;gap:8px}
  .legal{flex-direction:column;gap:8px}
  .mapframe{height:320px}
  /* Side-by-side inputs are unusably narrow on a phone. */
  form .row{grid-template-columns:1fr;gap:0}
}
@media(max-width:480px){
  .trio figure{aspect-ratio:3/2}
  .aow__content img{aspect-ratio:3/2}
  .pill{padding:5px 22px}
  .svcrow{gap:14px}
}