@charset "UTF-8";

/* RWD — the chrome
   ==========================================================================
   The header, the Projects panel, the mobile drawer and the phone action bar,
   brought onto the same terms as the descent and the home page.

   The bar had three problems, all of them visible on any screenshot:

     The wrong white.  --paper is #F6F6F2, a cold white; the page under it is
       bone #F3F0E9. Close enough that it read as a mistake rather than as a
       contrast — a cold seam across the top of every screen. It is now
       #F7F5EF: the page's own paper, lifted half a step so the bar separates
       without becoming a different material.

     The green button.  A solid #76BC21 block was fine when green appeared in
       a dozen other places. All of those are gone, so "Enquire Now" had
       become the only saturated colour on the page and read as an
       advertisement pasted onto the design.

     The wrong type.  13.5px Archivo at .04em over a page set in Jost at .3em
       and Playfair. The bar looked like another site's chrome sitting on
       this one.

   The bar separated itself from the page with a gold hairline for a while.
   That line is gone as well: the bar is one brown plate meeting the page with
   no seam, and the colour is what does the separating.

   The RWD dots stay green and blue throughout. A brand mark is not a colour
   scheme, and the one thing on this page nobody gets to restyle is the logo.

   Loaded after hero.css and home.css; every rule is under `body>header`, the
   drawer, or the action bar, so nothing here reaches page content.
   ========================================================================= */

:root{
  /* home.css declares these on #page-home, which the header sits outside of.
     Same values, hoisted to the root so the bar can reach them. */
  --gold:#B08D57;
  --gold-lt:#CBAE80;

  --bark-bar:#2B211A;     /* the dark state: the cards' timber, not black */
  --bar:#F7F5EF;          /* bone, half a step up */
  --bar-ink:#5A554D;      /* nav labels at rest */
  --bar-on:#100F0E;       /* hover, current */
  --bar-rule:rgba(176,141,87,.34);
}


/* ---- The dark state -----------------------------------------------------
   `plate` is the bar over any band laid on ink — the stat band, the
   chairman, the testimony, the closing band, a project hero, the footer.

   It was #0B0B0C, a true black, which is the one colour nothing else on the
   site is any more. Bark instead: the same warm brown as the ongoing cards
   and the phone bar, and the same material as the building the whole hero
   descends. It sits a shade warmer and lighter than the ink band under it,
   so the bar reads as a plate lying on the page rather than as a hole
   punched through it.

   The frost over the descent warms with it. A cold grey veil over a plate
   that is mostly timber and evening light was the wrong temperature; nobody
   would name it, but it is the reason the bar looked stuck on.
------------------------------------------------------------------------- */

/* The bar no longer changes material under itself. It was frosted over the
   scroll film, bark over the dark bands and paper everywhere else; it is now
   bark from the top of the descent to the footer, on every page. One colour
   is stated here on the bare element rather than on `.plate`, so the bar is
   already brown in the first painted frame — before nav.js has run, and with
   no state left that could put paper or frost back.

   backdrop-filter goes with it. hero.css blurs what is behind the bar for the
   frosted state; behind an opaque plate that blur is invisible and still
   costs a composited pass on every scrolled frame. */

body>header,
body>header.plate,
body>header.solid{
  background:var(--bark-bar);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border-bottom-color:transparent;
}

/* ---- The bar arrives ----------------------------------------------------
   The key travels into the lock, the opening takes the screen, and only then
   is there a page for a header to sit on. For the length of that sequence the
   bar is held one height above the top edge; hero.js drops it as the
   threshold is crossed, and it comes down on the same curve the opening uses.

   Held by a class hero.js puts on <html>, not by a timer here, so the drop
   cannot drift from the moment it belongs to — and the bar is only ever
   hidden when the intro is actually going to play. A reduced-motion visit, a
   page with no keyhole in it, or a script that never arrives all leave the
   bar exactly where it has always been.
------------------------------------------------------------------------- */

body>header{
  transition:transform .78s cubic-bezier(.22,.61,.36,1);
}
html.key-intro body>header{
  transform:translateY(-100%);
  /* Nothing to click at while it is off screen, and nothing for a tab key to
     land on either. */
  pointer-events:none; visibility:hidden;
  transition:none;
}

/* hero.css slides this panel down from above as the paper state arrives, in
   --ink. There is no paper state any more, but an open drawer still shows it,
   so it is made of the same bark as the bar in front of it. */
body>header::after{ background:var(--bark-bar) }

/* The panel hangs off the bar, so it is made of the same thing. */
body>header:not(.solid) .sub{
  background:rgba(43,33,26,.88);
  border-color:rgba(203,174,128,.22);
  box-shadow:0 26px 64px rgba(0,0,0,.5);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body>header:not(.solid) .sub{ background:#2B211A }
}
body>header:not(.solid) .col + .col{ border-left-color:rgba(203,174,128,.18) }

body>header.plate .mobile-menu,
body>header:not(.solid) .mobile-menu{
  background:var(--bark-bar); border-top-color:rgba(203,174,128,.22);
}
body>header:not(.solid) .mobile-menu a{ border-bottom-color:rgba(203,174,128,.16) }
body>header:not(.solid) .mobile-menu a.active{ color:var(--gold-lt) }


/* ---- The light state ----------------------------------------------------
   `solid` is the state on paper — everywhere that is not the descent and not
   a dark band.
------------------------------------------------------------------------- */

body>header.solid .brand .wordmark{ color:var(--bar-on) }
body>header.solid .brand .lock-tag{ color:#8A857B }

/* ---- Nav labels ---------------------------------------------------------
   The same face and the same tracking as every section label on the page, so
   the bar reads as part of the document rather than as furniture around it.
------------------------------------------------------------------------- */

body>header nav.main a,
body>header .subtoggle{
  font:400 16px/1 var(--lux-sans);
  letter-spacing:.26em; text-transform:uppercase;
}
body>header.solid nav.main a,
body>header.solid .subtoggle{ color:var(--bar-ink) }
body>header.solid nav.main a:hover,
body>header.solid nav.main a.active,
body>header.solid .subtoggle:hover,
body>header.solid .subtoggle.active,
body>header.solid .has-sub.open .subtoggle{ color:var(--bar-on) }

/* One rule, in gold. The green-to-blue split was the logo's colours used as
   an underline, which made a nav item look like a second logo. */
body>header nav.main a.active::after{
  background:var(--gold);
  height:1px; bottom:-6px;
}

/* ---- The call to action -------------------------------------------------
   The same gesture as every other button on the site now: filled, inverting
   to its own outline. Nothing on this page needs to shout at a reader who
   has already arrived.
------------------------------------------------------------------------- */

/* `nav.main a` above is (0,1,4); a rule written as `.nav-cta` alone would be
   (0,1,2) and lose to it — the button would take the label colour and end up
   grey type on an ink fill. Every rule here names the same four elements so
   it outranks the label rule rather than tying with it. */
body>header nav.main a.nav-cta{
  font:400 16px/1 var(--lux-sans);
  letter-spacing:.22em; text-transform:uppercase;
  padding:13px 26px;
  border:1px solid transparent;
  transition:background .38s ease, color .38s ease, border-color .38s ease;
}
body>header.solid nav.main a.nav-cta{
  background:var(--bar-on); color:var(--bar); border-color:var(--bar-on);
}
body>header.solid nav.main a.nav-cta:hover{
  background:transparent; color:var(--bar-on); border-color:var(--bar-on);
}

/* On ink the same button reads the other way round. */
body>header.plate nav.main a.nav-cta{
  background:#F4F1EA; color:#100F0E; border-color:#F4F1EA;
}
body>header.plate nav.main a.nav-cta:hover{
  background:transparent; color:#F4F1EA; border-color:#F4F1EA;
}

body>header.solid .burger span{ background:var(--bar-on) }

/* Uppercase at .26em is materially wider than 13.5px Archivo at .04em was.
   34px between items pushed the row into the lockup on a narrow laptop. */
body>header nav.main{ gap:26px }


/* ---- The Projects panel -------------------------------------------------
   It hangs off the bar, so it is the bar's paper with the bar's rule.
------------------------------------------------------------------------- */

body>header.solid .sub{
  background:rgba(247,245,239,.97);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border-color:var(--bar-rule);
  box-shadow:0 28px 70px rgba(43,33,26,.16);
}
body>header.solid .col + .col{ border-left-color:rgba(16,15,14,.12) }

body>header .colhead{
  font:400 16px/1 var(--lux-sans);
  letter-spacing:.3em; text-transform:uppercase;
}
body>header.solid .colhead{
  color:var(--gold); border-bottom-color:var(--bar-rule);
}
body>header.plate .colhead,
body>header:not(.solid) .colhead{ color:var(--gold-lt) }

body>header .sub a{ font:400 16px/1.4 var(--lux-sans); letter-spacing:.01em }
body>header.solid .sub a{ color:var(--bar-ink) }
body>header.solid .sub a:hover{
  color:var(--bar-on); background:rgba(176,141,87,.09);
}
body>header:not(.solid) .sub a:hover{ background:rgba(203,174,128,.12) }


/* ---- The drawer --------------------------------------------------------- */

body>header.solid .mobile-menu{
  background:var(--bar); border-top-color:var(--bar-rule);
}
body>header.solid .mobile-menu a{
  color:var(--bar-ink); border-bottom-color:rgba(16,15,14,.10);
}
body>header.solid .mobile-menu a.active{ color:var(--gold) }
body>header .mobile-menu a{ font:400 16px/1 var(--lux-sans); letter-spacing:.2em; text-transform:uppercase }


/* ---- The phone action bar -----------------------------------------------
   Fixed to the bottom edge on phones, and until now the second green block
   on a page with no other green in it.
------------------------------------------------------------------------- */

@media (max-width:900px){
  .actionbar{
    background:#2B211A;
    border-top-color:rgba(203,174,128,.30);
  }
  .actionbar a{
    font:400 16px/1 var(--lux-sans);
    letter-spacing:.2em; text-transform:uppercase;
    color:#CFC8BC;
    border-left-color:rgba(203,174,128,.20);
  }
  .actionbar a:active{ background:rgba(203,174,128,.10) }
  .actionbar .ab-cta{
    background:#F4F1EA; color:#2B211A; font-weight:400;
  }
  .actionbar a:focus-visible{ outline:2px solid var(--gold); outline-offset:-3px }
}


/* ---- Labels over the picture --------------------------------------------
   Frosted, the labels were still the site's #C9C9C4 — a grey chosen for an
   ink bar. At 11px tracked to .26em over a bright sky it disappeared.

   White, and a tight shadow under it. The shadow is doing the work a heavier
   veil would otherwise have to do: darkening the whole bar enough to carry
   grey type would put a real smudge across the sky, whereas two pixels of
   shade under each letter is invisible and buys the same legibility.
------------------------------------------------------------------------- */

body>header:not(.solid) nav.main a,
body>header:not(.solid) .subtoggle{
  color:rgba(255,255,255,.93);
  text-shadow:0 1px 2px rgba(11,11,12,.55), 0 2px 16px rgba(11,11,12,.45);
}
body>header:not(.solid) nav.main a:hover,
body>header:not(.solid) nav.main a.active,
body>header:not(.solid) .subtoggle:hover,
body>header:not(.solid) .subtoggle.active,
body>header:not(.solid) .has-sub.open .subtoggle{ color:#fff }

body>header:not(.solid) .brand{
  text-shadow:0 1px 2px rgba(11,11,12,.5), 0 2px 16px rgba(11,11,12,.4);
}
body>header:not(.solid) .brand .lock-tag{ color:rgba(255,255,255,.72) }

/* The rule under the bar was 12% paper — invisible on ink, a hard edge on
   sky. Gold at a low alpha reads as an edge on both. */
body>header:not(.solid):not(.plate){
  border-bottom-color:rgba(203,174,128,.22);
}

/* ---- Logo to the edge ---------------------------------------------------
   The bar's contents were capped at 1360px and centred, which left the logo
   floating well in from the left on a wide screen. The bar now runs the full
   width, with a tighter gutter on the logo side.
------------------------------------------------------------------------- */
body>header .nav-inner{
  max-width:none;
  padding-left:clamp(24px,2.8vw,44px);
}

/* ---- Section heads: the name big, the line under it small ---------------
   Each section used to open on a tiny label ("Our Story") with its tagline
   set as the headline. The name is now the h2 and the tagline steps down to
   an italic line beneath it, the way The Portfolio already reads. The
   label keeps only its two dots.

   Low specificity on purpose: where a page already styles its h2s (about,
   the homepage block heads, careers) that wins; this covers the heads that
   never had an h2 before — the record bands and the chairman's message. */
body h2.sec-title{
  margin:clamp(14px,2vh,22px) 0 0;
  font:400 clamp(32px,3.8vw,60px)/1.06 var(--rwd-serif);
  letter-spacing:0; text-transform:none;
}
.stats h2.sec-title,
.ab-record h2.sec-title,
.band-dark h2.sec-title,
.cta-band h2.sec-title{ color:#F4F1EA }

body .sec-sub{
  margin:clamp(8px,1.1vh,14px) 0 0; max-width:36ch;
  font:italic 400 clamp(17px,1.5vw,24px)/1.35 var(--rwd-serif);
  letter-spacing:0; text-transform:none;
  color:inherit; opacity:.78;
}
body .sec-sub em,
body .sec-sub span{ font-style:inherit; color:inherit }
.stats .sec-sub,
.ab-record .sec-sub,
.band-dark .sec-sub,
.cta-band .sec-sub{ color:#F4F1EA }

/* The record bands and the chairman's message had nothing between the
   label and what follows; the new heading needs room under it. */
.stats h2.sec-title + .stat-band,
.ab-record h2.sec-title + .ab-figs{ margin-top:clamp(28px,4vh,48px) }

/* ---- Projects: groups on the left, the chosen group to their right ------
   The panel opens on the three groups. Choosing one opens that group's
   projects in a second column beside it; choosing it again, or another
   group, closes or swaps it. nav.js sets data-view on the panel; without
   the script every pane shows, stacked under the groups.
------------------------------------------------------------------------- */
body>header .sub-drill{ display:flex; align-items:stretch; width:max-content; padding:6px }
body>header .sub-drill .drill-root{ width:290px; flex:none }
body>header .sub-drill .drill-pane{
  width:330px; flex:none;
  border-left:1px solid rgba(203,174,128,.18);
}
html.js body>header .sub-drill .drill-pane{ display:none }
html.js body>header .sub-drill[data-view="ongoing"]   [data-pane="ongoing"],
html.js body>header .sub-drill[data-view="completed"] [data-pane="completed"],
html.js body>header .sub-drill[data-view="soon"]      [data-pane="soon"]{
  display:block; animation:drill-in .22s ease both;
}
@keyframes drill-in{ from{ opacity:0; transform:translateX(-10px) } to{ opacity:1; transform:none } }
/* Without the script the panes stack, so the panel goes back to a column. */
html:not(.js) body>header .sub-drill{ flex-direction:column }
html:not(.js) body>header .sub-drill .drill-pane{ border-left:0 }

/* The group rows: the same face as the links, with a count and an arrow. */
body>header .drill-go{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:12px 10px; background:none; border:0; cursor:pointer; text-align:left;
  font:400 16px/1.3 var(--lux-sans); letter-spacing:.01em; color:rgba(246,246,242,.88);
  transition:background .18s ease, color .18s ease;
}
body>header .drill-go > span:first-child{ flex:1 }
body>header .drill-go:hover,
body>header .drill-go:focus-visible{ color:#fff; background:rgba(203,174,128,.12) }
/* The open group stays lit, its arrow pointing at the column it opened. */
body>header .drill-go[aria-expanded="true"]{ color:#fff; background:rgba(203,174,128,.18) }
body>header .drill-go[aria-expanded="true"] .drill-chev{ opacity:1; color:var(--gold-lt) }
body>header .drill-go:focus-visible{ outline:2px solid var(--gold-lt); outline-offset:-2px }
body>header .drill-n{
  min-width:24px; padding:3px 7px; border-radius:999px;
  font:500 16px/1 var(--lux-sans); text-align:center;
  color:var(--gold-lt); background:rgba(203,174,128,.14);
}
body>header .drill-chev{
  width:12px; height:12px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.5; opacity:.7;
}
body>header .drill-root li + li{ border-top:1px solid rgba(203,174,128,.14) }
body>header .drill-all a{
  margin-top:4px; color:var(--gold-lt) !important;
  font-size:16px !important; letter-spacing:.2em !important;
}

/* The side column: the group's name, then its projects. The groups beside
   it already say where you are, so there is no Back. Long groups scroll
   inside the column rather than running off the screen. */
body>header .drill-back{ display:none }
body>header .drill-pane .colhead{ margin-bottom:8px }
body>header .drill-pane ul{ max-height:min(60vh,460px); overflow-y:auto; overscroll-behavior:contain }

@media (prefers-reduced-motion:reduce){
  html.js body>header .sub-drill .drill-pane{ animation:none !important }
}

/* The bar's label style (`nav.main a`: caps at .26em) outweighs `.sub a`
   and was setting every project name in tracked capitals. Names read as
   names. */
body>header nav.main .sub a{
  font:400 16px/1.4 var(--lux-sans); letter-spacing:.01em; text-transform:none;
}
body>header nav.main .drill-all a{ text-transform:uppercase }


/* ---- The Enquire tab ----------------------------------------------------
   Pinned to the right edge, a little below centre, on every page above phone
   width. Set on its side so it takes 44px of the edge, not a corner of the
   content. The header's bark, with its bone type, so the two read as one
   piece of chrome; on hover it turns over the way the header's button does.

   It arrives with the header: while html.key-intro holds the bar above the
   top edge, the tab is held past the right one, and both come in on the
   same curve when hero.js lifts the class.
------------------------------------------------------------------------- */
.enquire-tab{ display:none }

@media (min-width:901px){
  .enquire-tab{
    display:block;
    position:fixed; right:0; top:62%; z-index:96;
    transform:translateY(-50%) rotate(180deg);
    writing-mode:vertical-rl;
    padding:24px 14px;
    background:var(--bark-bar); color:#F4F1EA;
    border:1px solid var(--bar-rule); border-left:0; /* rotated: this is the screen edge */
    font:500 16px/1 var(--lux-sans);
    letter-spacing:.24em; text-transform:uppercase;
    box-shadow:0 6px 22px rgba(16,15,14,.18);
    transition:background .3s ease, color .3s ease, padding .3s ease,
                transform .78s cubic-bezier(.22,.61,.36,1);
  }
  .enquire-tab:hover{ background:#F4F1EA; color:var(--bark-bar); padding-right:18px }
  .enquire-tab:focus-visible{ outline:2px solid var(--gold); outline-offset:2px }
  html.key-intro .enquire-tab{
    transform:translate(100%,-50%) rotate(180deg);
    pointer-events:none; visibility:hidden;
    transition:none;
  }
}


/* ---- Contact as the bar's button ----------------------------------------
   Contact took the button's place when Enquire Now moved to the edge tab.
   On its own page it is also .active, and the label rule that turns an
   active item white comes later in this sheet than the button's — so it
   would be white type on the bone fill. Restated here, after it. */
body>header.plate nav.main a.nav-cta.active{ color:#100F0E }
body>header.plate nav.main a.nav-cta.active:hover{ color:#F4F1EA }
body>header nav.main a.nav-cta.active::after{ display:none }


/* ---- Social icons (Social.astro) ----------------------------------------
   Round icons, used on the enquiry panel and in the footer. Here because
   this sheet is on every page and the footer is too.
------------------------------------------------------------------------- */
.social{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px }
.social a{
  display:grid; place-items:center;
  width:46px; height:46px; border-radius:50%;
  background:#F4F1EA; color:#100F0E;
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.social a:hover{ background:var(--gold); color:#100F0E; transform:translateY(-2px) }
.social a:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }
.social svg{ width:20px; height:20px; fill:currentColor }

/* In the footer they lie in a row, a size down, drawn as gold-ringed
   outlines on the ink so they sit with the links rather than shout over
   them; pointing at one fills it in gold. */
body > footer .foot-icons{
  flex-direction:row; flex-wrap:wrap; gap:12px;
  margin-top:clamp(22px,3vh,30px);
}
body > footer .foot-icons a{
  width:40px; height:40px;
  background:transparent; color:#F4F1EA;
  border:1px solid rgba(203,174,128,.45);
}
body > footer .foot-icons a:hover{ background:var(--gold); border-color:var(--gold); color:#100F0E }
body > footer .foot-icons svg{ width:18px; height:18px }


/* ---- Footer: one row ----------------------------------------------------
   The brand and three groups — Explore, Reach Us, Corporate Office — on one
   row. The brand takes a little more width; the groups share the rest
   evenly, with one gap between all of them so the columns sit at an even
   rhythm instead of the brand's spare width opening a hole after it. The
   shell's own two-up layout still takes over at 1024px.
------------------------------------------------------------------------- */
@media (min-width:1025px){
  body > footer .foot-top{
    grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));
    column-gap:clamp(40px,5vw,96px);
  }
  body > footer .foot-brand p{ max-width:34ch }
}