/* ============================================================
   Site chrome: masthead, mega menu, drawer, hero stage, project tiles,
   enquiry band and footer.

   This project's own stylesheet. Pairs with framework.css (Tailwind,
   Bootstrap, Swiper, Splide - all MIT licensed) and site.css (brochure
   reader, fact strip, unit tables).
   ============================================================ */

:root{
  --ink:#0a0a0a;
  --dim:rgba(255,255,255,.62);
  --hairline:rgba(255,255,255,.14);
  --bar:80px;
  --bar-sm:64px;
  --gut:clamp(1.25rem,5vw,4rem);
  --ease:cubic-bezier(.22,.7,.28,1);
}

.page{position:relative}
.homepage{overflow-x:clip}

/* ================================================================ masthead */
.masthead{
  position:fixed;inset:0 0 auto 0;z-index:100;color:#fff;
  background:linear-gradient(to bottom,rgba(0,0,0,.45),rgba(0,0,0,0));
  transition:background .35s var(--ease),box-shadow .35s var(--ease);
}
.masthead.is-solid{background:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.09)}
.masthead__inner{
  display:flex;align-items:center;gap:1.5rem;
  min-height:var(--bar);padding-inline:var(--gut);
}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:54px;width:auto;object-fit:contain;display:block}

.masthead__end{margin-left:auto;display:flex;align-items:center;gap:1rem;flex:0 0 auto}

/* ---- main navigation ---- */
.mainnav{flex:1 1 auto;display:flex;justify-content:center}
.mainnav__list{display:flex;align-items:center;gap:clamp(1.4rem,3vw,2.6rem);margin:0;padding:0;list-style:none}
.mainnav__item{position:relative}
.mainnav__link{
  display:inline-block;position:relative;padding-block:.7rem;
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;white-space:nowrap;transition:opacity .25s var(--ease);
}
.mainnav__link:hover{opacity:.78}
.mainnav__link::after{
  content:"";position:absolute;left:0;bottom:.15rem;height:2px;width:0;
  border-radius:2px;background:currentColor;opacity:.85;
  transition:width .3s var(--ease);
}
.mainnav__item:hover .mainnav__link::after,
.mainnav__item.is-current .mainnav__link::after{width:100%}

/* ---- mega menu ----
   Same behaviour as the original: the panel grows from zero height, each entry
   shows its name only, and hovering one expands its detail line while swapping
   the preview image alongside. */
.submenu{
  position:absolute;left:0;top:100%;transform:translate(-50%);
  width:50vw;height:0;overflow:hidden;
  background:#fff;border-radius:2px;
  box-shadow:0 1px 2px rgba(118,118,118,.33);
  transition:.3s ease-in-out;
}
.has-submenu:hover .submenu,.has-submenu:focus-within .submenu{height:max-content}
.submenu__notch{
  position:absolute;left:50%;top:100%;width:0;height:0;
  border:8px solid transparent;border-bottom-color:#fff;
  transform:translate(-50%,-14px);display:none;
}
.has-submenu:hover .submenu__notch{display:block}

.submenu__inner{display:flex;height:100%}
.submenu__list{
  flex:1;display:flex;flex-direction:column;justify-content:space-evenly;
  gap:1.15rem;list-style:none;margin:0;padding:2rem;color:#000;
}
.submenu__entry{overflow:hidden;cursor:pointer}
.submenu__entry > a{display:block;color:#000}
.submenu__name{
  display:block;font-family:'Heebo',system-ui,sans-serif;
  font-size:14px;font-weight:500;text-transform:capitalize;pointer-events:none;
}
.submenu__meta{
  display:block;font-family:'Quicksand',system-ui,sans-serif;
  font-size:12px;line-height:1.75;pointer-events:none;
  max-height:0;overflow:hidden;transition:max-height .3s ease-in-out;
}
.submenu__entry.is-active .submenu__meta{max-height:4rem}

.submenu__figure{flex:1;margin:0;padding:2rem;height:100%}
.submenu__preview{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block}

/* ---- outline button ---- */
.btn-line{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.72rem 1.6rem;border:1px solid rgba(255,255,255,.85);color:#fff;
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;transition:background .3s var(--ease),color .3s var(--ease);
}
.btn-line:hover,.btn-line:focus-visible{background:#fff;color:var(--ink)}

/* ---- burger + drawer ---- */
.burger{display:none;flex-direction:column;justify-content:space-between;
  width:26px;height:19px;padding:0;background:none;border:0;cursor:pointer}
.burger__bar{display:block;width:100%;height:2px;border-radius:2px;background:#fff;
  transition:transform .4s var(--ease),opacity .25s var(--ease)}
.masthead.is-open .burger__bar:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
.masthead.is-open .burger__bar:nth-child(2){opacity:0}
.masthead.is-open .burger__bar:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}

.drawer{
  position:fixed;left:0;top:-200vh;width:100%;
  max-height:calc(100dvh - var(--bar-sm));overflow-y:auto;z-index:-1;
  display:flex;flex-direction:column;gap:1rem;
  padding:1.6rem var(--gut) 2.4rem;background:var(--ink);
  transition:top .45s var(--ease);
}
.masthead.is-open .drawer{top:var(--bar-sm)}
.drawer__link{font-size:.95rem;letter-spacing:.08em;text-transform:capitalize;color:#fff}
.drawer__link--sub{opacity:.72;font-size:.88rem}
.drawer__cta{margin-top:.75rem;align-self:flex-start}

@media (max-width:991px){
  .masthead__inner{min-height:var(--bar-sm)}
  .brand img{height:40px}
  .mainnav{display:none}
  .masthead__end .btn-line{display:none}
  .burger{display:flex}
}

/* =============================================================== hero stage */
.stage{position:relative;display:flex;width:100%;height:100svh;min-height:600px;
  overflow:hidden;background:#0d0d0d;color:#fff;user-select:none}
.stage__viewport{position:relative;flex:1;height:100%;overflow:hidden}
.stage__slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.stage__slide.is-showing{opacity:1;z-index:2}
.stage__media{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;transform:scale(1.08)}
.stage__wash{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(0,0,0,.72),rgba(0,0,0,.45) 45%,rgba(0,0,0,.62))}
.stage__body{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:center;gap:1.4rem;padding:4rem clamp(2rem,7vw,7rem) 0;max-width:60rem}
.stage__eyebrow{margin:0;font-size:.7rem;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
.stage__title{margin:0;font-size:clamp(2.5rem,8vw,6rem);font-weight:700;line-height:.98;
  letter-spacing:-.02em;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.28)}
.stage__line{margin:0;font-size:clamp(.95rem,1.4vw,1.05rem);color:rgba(255,255,255,.82);max-width:36rem}
.stage__cta{display:inline-flex;align-items:center;gap:1rem;font-size:.78rem;font-weight:600;
  letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.stage__cta:hover{color:#fff}
.stage__rule{display:inline-block;width:5rem;height:1px;background:rgba(255,255,255,.7);
  transition:width .3s var(--ease),background .3s var(--ease)}
.stage__cta:hover .stage__rule{width:7.5rem;background:#fff}

.stage__controls{position:absolute;right:clamp(1.5rem,4vw,3rem);bottom:2rem;z-index:20;
  display:flex;align-items:center;gap:clamp(1rem,2vw,2rem);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.8rem;letter-spacing:.1em}
.stage__arrow{background:none;border:0;padding:.25rem;color:rgba(255,255,255,.7);
  cursor:pointer;font-size:1rem;transition:color .2s var(--ease)}
.stage__arrow:hover{color:#fff}
.stage__index{color:#fff;font-weight:500}
.stage__total{color:rgba(255,255,255,.7)}
.stage__track{position:relative;display:block;width:clamp(4rem,9vw,9rem);height:1px;
  background:rgba(255,255,255,.4);overflow:hidden}
.stage__fill{position:absolute;inset:0 auto 0 0;width:25%;background:#fff;
  transition:width .7s var(--ease)}

.stage__upnext{position:relative;flex:0 0 18%;min-width:140px;max-width:180px;height:100%;
  border-left:1px solid rgba(255,255,255,.2);overflow:hidden;cursor:pointer;
  background:none;padding:0;display:flex}
.stage__upnext-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease)}
.stage__upnext:hover .stage__upnext-img{transform:scale(1.1)}
.stage__upnext-veil{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.4) 55%,rgba(0,0,0,.55));
  transition:background .5s var(--ease)}
.stage__upnext:hover .stage__upnext-veil{background:rgba(0,0,0,.4)}
.stage__upnext-text{position:relative;z-index:2;display:flex;flex-direction:column;
  align-items:center;gap:.75rem;margin:auto auto 4rem;
  writing-mode:vertical-rl;transform:rotate(180deg)}
.stage__upnext-label{font-size:.65rem;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(255,255,255,.7)}
.stage__upnext-name{font-size:1.05rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:#fff;transition:color .3s var(--ease)}
.stage__upnext:hover .stage__upnext-name{color:#fde68a}

@media (max-width:1023px){ .stage__upnext{display:none} }
@media (max-width:640px){ .stage__controls{right:1.25rem;bottom:1.5rem;gap:.75rem} }

/* ============================================================ project tiles */
/* Deliberately a two-up. The renders are tall, detailed buildings - at three or
   four across they shrink to the point where the architecture stops reading. */
.tiles{display:grid;grid-template-columns:1fr;gap:2rem;
  margin:0;padding:0;list-style:none;align-items:start}
@media (min-width:640px){ .tiles{grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,3vw,3.25rem)} }
.tile__frame{display:block;overflow:hidden;background:#f5f5f5;
  border:1px solid rgba(0,0,0,.08);margin-bottom:1rem;line-height:0}
.tile__img{display:block;width:100%;height:auto;
  transition:transform .7s var(--ease)}
.tile a:hover .tile__img{transform:scale(1.05)}
.tile__name{display:block;font-size:.82rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:#262626;transition:color .2s var(--ease)}
.tile a:hover .tile__name{color:#000}
.tile__place{display:block;margin-top:.25rem;font-size:.7rem;color:#737373}

/* --------------------------------------------------------------- filters */
.product-tab-btn{font-size:.78rem;font-weight:700;letter-spacing:.1em;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.product-tab-btn:hover,.product-tab-btn:focus-visible,
.product-tab-btn.active{background-color:var(--ink);color:#fff;border-color:var(--ink)}

/* ============================================================ enquiry band */
.enquiry{position:relative;display:flex;align-items:center;width:100%;
  min-height:350px;padding-block:clamp(3rem,6vw,4rem);overflow:hidden;background:#171717}
.enquiry__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center;transform:scale(1.05)}
.enquiry__veil{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.enquiry__inner{position:relative;z-index:2;width:100%;max-width:80rem;
  margin-inline:auto;padding-inline:var(--gut);display:flex;justify-content:flex-end}
.enquiry__panel{width:100%;max-width:580px;padding:clamp(2rem,4vw,3.5rem);
  background:rgba(255,255,255,.88);backdrop-filter:blur(10px);
  box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.enquiry__title{margin:0 0 .5rem;font-size:clamp(1.5rem,3vw,1.9rem);font-weight:800;
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink);line-height:1.15}
.enquiry__note{margin:0 0 1.5rem;font-size:.78rem;color:#525252}
.enquiry__field{margin-bottom:.6rem}
.enquiry__submit{width:100%;margin-top:.3rem;padding:.85rem 2rem;border:0;
  background:var(--ink);color:#fff;font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  transition:background .3s var(--ease)}
.enquiry__submit:hover{background:#333}
.enquiry__fine{margin:.75rem 0 0;font-size:.68rem;color:#737373}
@media (max-width:1023px){ .enquiry__inner{justify-content:center} }

/* ================================================================= footer */
.foot{background:var(--ink);color:#fff}
.foot__inner{max-width:80rem;margin-inline:auto;padding:clamp(3rem,6vw,4.5rem) var(--gut) 0;
  display:grid;grid-template-columns:1.7fr 1fr 1.3fr 1.1fr;gap:2.5rem}
.foot__brand img{max-width:150px;height:auto;margin-bottom:1.1rem}
.foot__blurb{margin:0;font-size:.9rem;line-height:1.75;color:var(--dim);max-width:34ch}
.foot__title{margin:0 0 .9rem;font-size:1.05rem;font-weight:600;color:#fff;
  letter-spacing:.01em}
.foot__links{display:flex;flex-direction:column;gap:.5rem}
.foot__link{font-size:.9rem;color:var(--dim);transition:color .25s var(--ease)}
.foot__link:hover{color:#fff}
.foot__col p{margin:0 0 .7rem;font-size:.9rem;line-height:1.75;color:var(--dim)}
.foot__col a{color:var(--dim);transition:color .25s var(--ease)}
.foot__col a:hover{color:#fff}
.foot__col strong{color:#fff;font-weight:600}
.foot__bar{max-width:80rem;margin:clamp(2rem,4vw,3rem) auto 0;
  padding:1.4rem var(--gut);border-top:1px solid var(--hairline);
  font-size:.8rem;color:var(--dim)}

@media (max-width:1023px){ .foot__inner{grid-template-columns:1fr 1fr;gap:2.5rem} }
@media (max-width:600px){ .foot__inner{grid-template-columns:1fr} }

@media (prefers-reduced-motion:reduce){
  .masthead,.drawer,.burger__bar,.submenu,.submenu__preview,.mainnav__link::after,
  .stage__slide,.stage__upnext-img,.tile__img,.stage__fill{transition:none!important}
  .stage__media{transform:none}
}

/* ================================================================== loader */
/* Shown only while <html> carries .is-booting, so a script failure can never
   leave the page behind a curtain. Just the mark on a black ground. */
.loader{display:none}
.is-booting .loader{
  position:fixed;inset:0;z-index:9999;display:flex;
  align-items:center;justify-content:center;
  background:#0a0a0a;overflow:hidden;
  transition:transform .7s cubic-bezier(.7,0,.2,1);
}
.is-booting.is-lifting .loader{transform:translateY(-101%)}
.is-booting{overflow:hidden}

.loader__logo{
  position:relative;z-index:2;
  width:clamp(190px,26vw,330px);height:auto;display:block;
  animation:ldIn .9s cubic-bezier(.2,.75,.25,1) both;
  transition:opacity .4s ease,transform .5s cubic-bezier(.7,0,.2,1);
}
.is-booting.is-lifting .loader__logo{opacity:0;transform:translateY(-14px)}
@keyframes ldIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .loader__logo{animation:none;opacity:1;transform:none}
  .is-booting .loader{transition:none}
}

/* ---- brochure download ---- */
.dl{
  display:inline-flex;align-items:center;gap:.85rem;
  padding:.95rem 1.6rem;border:1px solid rgba(255,255,255,.45);
  color:#fff;font-size:.74rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;transition:background .3s var(--ease),color .3s var(--ease),
  border-color .3s var(--ease);
}
.dl:hover,.dl:focus-visible{background:#fff;color:var(--ink);border-color:#fff}
.dl__meta{font-size:.64rem;letter-spacing:.1em;opacity:.7;font-weight:500}
.dl--dark{border-color:rgba(0,0,0,.35);color:var(--ink)}
.dl--dark:hover,.dl--dark:focus-visible{background:var(--ink);color:#fff;border-color:var(--ink)}
@media (max-width:991px){ .dl{min-height:48px} }

/* ---- proprietor contact links ---- */
.owner-links{display:flex;flex-direction:column;gap:.55rem;margin-top:1.4rem}
.owner-links a{
  font-size:.88rem;color:#404040;width:fit-content;
  border-bottom:1px solid rgba(0,0,0,.18);padding-bottom:.15rem;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.owner-links a:hover{color:var(--ink);border-color:var(--ink)}
@media (max-width:991px){ .owner-links a{min-height:40px;display:flex;align-items:center} }

/* ---- 12-column spans ----
   The purged framework build carries grid-cols-12 but not the span utilities,
   so any two-column section silently stacked its children into one cell and
   they overlapped. Declared here in full so it cannot recur. */
.col-span-1{grid-column:span 1/span 1}
.col-span-2{grid-column:span 2/span 2}
.col-span-3{grid-column:span 3/span 3}
.col-span-4{grid-column:span 4/span 4}
.col-span-5{grid-column:span 5/span 5}
.col-span-6{grid-column:span 6/span 6}
.col-span-7{grid-column:span 7/span 7}
.col-span-8{grid-column:span 8/span 8}
.col-span-9{grid-column:span 9/span 9}
.col-span-10{grid-column:span 10/span 10}
.col-span-11{grid-column:span 11/span 11}
.col-span-12{grid-column:span 12/span 12}
@media (min-width:1024px){
  .lg\:col-span-1{grid-column:span 1/span 1}
  .lg\:col-span-2{grid-column:span 2/span 2}
  .lg\:col-span-3{grid-column:span 3/span 3}
  .lg\:col-span-4{grid-column:span 4/span 4}
  .lg\:col-span-5{grid-column:span 5/span 5}
  .lg\:col-span-6{grid-column:span 6/span 6}
  .lg\:col-span-7{grid-column:span 7/span 7}
  .lg\:col-span-8{grid-column:span 8/span 8}
  .lg\:col-span-9{grid-column:span 9/span 9}
  .lg\:col-span-10{grid-column:span 10/span 10}
  .lg\:col-span-11{grid-column:span 11/span 11}
  .lg\:col-span-12{grid-column:span 12/span 12}
}
.tracking-\[0\.22em\]{letter-spacing:.22em}

/* ---- leadership ---- */
.owner{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start}
@media (min-width:768px){ .owner{grid-template-columns:260px 1fr;gap:2.5rem} }
@media (min-width:1024px){ .owner{grid-template-columns:300px 1fr;gap:3.5rem} }
.owner__portrait{margin:0;overflow:hidden;background:#ebebeb;aspect-ratio:1;
  max-width:300px;border:1px solid rgba(0,0,0,.08)}
.owner__portrait img{width:100%;height:100%;object-fit:cover;display:block}
.owner__name{margin:0;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;
  letter-spacing:-.01em;text-transform:uppercase;color:var(--ink);line-height:1.1}
.owner__role{margin:.6rem 0 0;font-size:.72rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:#737373}
.owner__bio{margin:1.4rem 0 0;font-size:.92rem;line-height:1.8;color:#525252;max-width:62ch}