/* ==========================================================================
   Bhardwaj Infrastructure — page pieces
   Everything that belongs to one or two pages rather than the whole site.
   ========================================================================== */

/* --- Division cards (home) ----------------------------------------------- */

.divisions{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px;overflow:hidden}
@media(min-width:820px){.divisions{grid-template-columns:repeat(3,1fr)}}
.division{
  background:var(--ink-2);padding:clamp(22px,3vw,30px);
  display:flex;flex-direction:column;
  transition:background .44s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .division:hover{background:var(--ink-3)}
}
.division-canvas{margin:20px 0 22px;aspect-ratio:16/10;background:rgba(0,0,0,.16);border-radius:2px;overflow:hidden}
.division-canvas canvas{width:100%;height:100%}
.division h3{margin:0 0 11px}
.division p{font-size:.95rem;color:var(--on-ink-muted);margin:0}
.division .arrow-link{margin-top:auto;padding-top:20px}

/* --- Category cards (construction tenders) ------------------------------- */

.cats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px;overflow:hidden}
@media(min-width:860px){.cats{grid-template-columns:repeat(3,1fr)}}
.cat{background:var(--ink-2);padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;transition:background .44s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cat:hover{background:var(--ink-3)}
}
.cat .label{margin-bottom:16px}
.cat h3{margin:0 0 12px}
.cat p{font-size:.92rem;color:var(--on-ink-muted);margin:0 0 16px}
.cat ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.92rem;color:var(--on-ink-muted)}
.cat li{padding-left:16px;position:relative;line-height:1.5}
.cat li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--gold)}
.cat .arrow-link{margin-top:auto;padding-top:22px}

/* --- Index lists --------------------------------------------------------- */

.idx{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.idx li{display:flex;gap:clamp(16px,3vw,34px);padding:clamp(20px,2.6vw,28px) 2px;background:var(--ink)}
.paper .idx{background:var(--line-paper);border-color:var(--line-paper)}
.paper .idx li{background:var(--vault)}
.idx b{
  font-family:var(--mono);font-size:.72rem;font-weight:400;letter-spacing:.14em;
  color:var(--gold);flex:none;width:26px;padding-top:5px;
}
.paper .idx b{color:var(--gold-deep)}
.idx strong{display:block;font-family:var(--body);font-size:1.04rem;font-weight:700;letter-spacing:0;margin-bottom:7px}
.idx p{margin:0;font-size:.92rem;color:var(--on-ink-muted);max-width:62ch}
.paper .idx p{color:var(--paper-muted)}

/* --- Steps --------------------------------------------------------------- */

.steps{display:grid;gap:1px;background:var(--line-paper);border:1px solid var(--line-paper);border-radius:2px;overflow:hidden}
@media(min-width:700px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.steps{grid-template-columns:repeat(4,1fr)}}
.band:not(.paper) .steps{background:var(--line);border-color:var(--line)}
.step{background:var(--ink-2);padding:clamp(22px,2.6vw,28px)}
.band:not(.paper) .step{background:var(--ink-2)}
.step-n{
  display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  color:var(--gold-deep);margin-bottom:16px;
}
.band:not(.paper) .step-n{color:var(--gold)}
.step h4{font-family:var(--body);font-size:1.02rem;font-weight:700;letter-spacing:0;margin:0 0 10px;line-height:1.35}
.step p{margin:0;font-size:.93rem;color:var(--paper-muted);line-height:1.62}
.band:not(.paper) .step p{color:var(--on-ink-muted)}
.steps-6 .step{}
@media(min-width:1060px){.steps-6{grid-template-columns:repeat(3,1fr)}}

/* --- Statistics ---------------------------------------------------------- */

.stats{display:grid;gap:clamp(24px,3vw,40px);grid-template-columns:repeat(2,1fr)}
@media(min-width:880px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{border-top:1px solid var(--line-strong);padding-top:18px}
.stat .num{
  display:block;font-family:var(--body);font-weight:500;font-variant-numeric:tabular-nums lining-nums;
  font-size:clamp(2.2rem,4.7vw,3.2rem);line-height:1.1;letter-spacing:-.01em;color:var(--gold);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.stat span{display:block;margin-top:12px;font-size:.89rem;color:var(--on-ink-muted);line-height:1.5}

/* --- Ticker -------------------------------------------------------------- */

.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:flex;gap:44px;width:max-content;animation:slide 46s linear infinite}
.ticker-track span{font-size:.9rem;color:var(--on-ink-muted);white-space:nowrap;display:flex;align-items:center;gap:44px}
.ticker-track span::after{content:"";width:3px;height:3px;border-radius:50%;background:var(--gold);opacity:.6}
.ticker-track span em{font-family:var(--mono);font-style:normal;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* --- Specification table ------------------------------------------------- */

.spec{width:100%;border-collapse:collapse;font-size:.95rem}
.spec tr{border-bottom:1px solid var(--line-paper)}
.spec tr:first-child{border-top:1px solid var(--line-paper)}
.spec th{
  text-align:left;font-family:var(--mono);font-size:.7rem;font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);
  padding:15px 20px 15px 0;vertical-align:top;width:min(42%,300px);
}
.spec td{padding:15px 0;color:var(--paper-text);vertical-align:top}

/* --- Tags ---------------------------------------------------------------- */

.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;
  padding:7px 13px;border:1px solid var(--line-strong);border-radius:2px;
  color:var(--on-ink-muted);transition:border-color .3s var(--ease),color .3s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .tags span:hover{border-color:var(--gold);color:var(--gold)}
}
.paper .tags span{border-color:var(--line-paper);color:var(--paper-muted)}
@media (hover:hover) and (pointer:fine){
  .paper .tags span:hover{border-color:var(--gold-deep);color:var(--gold-deep)}
}

/* --- Chainage cards (roadways) ------------------------------------------- */

.chainage{
  display:flex;gap:16px;overflow-x:auto;padding:4px var(--gutter) 20px;
  scroll-snap-type:x mandatory;scrollbar-width:thin;
}
.chainage article{
  flex:0 0 min(310px,78vw);scroll-snap-align:start;
  border:1px solid var(--line);border-radius:2px;padding:24px;background:var(--ink-2);
  transition:border-color .36s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .chainage article:hover{border-color:var(--gold)}
}
.chainage span{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;color:var(--gold)}
.chainage h4{font-family:var(--body);font-size:1.02rem;font-weight:700;margin:15px 0 9px;letter-spacing:0}
.chainage p{margin:0;font-size:.92rem;color:var(--on-ink-muted);line-height:1.6}

/* --- Cross section (roadways) -------------------------------------------- */

.xsection{display:grid;gap:clamp(24px,3vw,40px)}
@media(min-width:900px){.xsection{grid-template-columns:1.35fr .65fr;align-items:center}}
.xsection-canvas{aspect-ratio:16/9;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:rgba(215,183,120,.02)}
.xsection-canvas canvas{width:100%;height:100%}
.xsection-key{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.xsection-key li{display:grid;grid-template-columns:14px 1fr;gap:12px;align-items:start}
.xsection-key i{width:14px;height:14px;border-radius:2px;margin-top:3px}
.xsection-key b{display:block;font-size:.92rem;font-weight:600;color:var(--paper-text)}
.xsection-key span{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--paper-muted);margin-top:3px}

/* --- Before and after (redevelopment) ------------------------------------ */

.beforeafter{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px;overflow:hidden}
@media(min-width:820px){.beforeafter{grid-template-columns:1fr 1fr}}
.beforeafter>div{background:var(--ink-2);padding:clamp(24px,3vw,34px)}
.beforeafter>div:last-child{background:var(--ink-3)}
.beforeafter h4{margin:0 0 18px}
.beforeafter ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.beforeafter li{padding-left:20px;position:relative;font-size:.94rem;color:var(--on-ink-muted);line-height:1.55}
.beforeafter li::before{content:"";position:absolute;left:0;top:.65em;width:10px;height:1px;background:var(--gold)}

/* --- Assurance cards ----------------------------------------------------- */

.assurance{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px;overflow:hidden}
@media(min-width:700px){.assurance{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.assurance{grid-template-columns:repeat(4,1fr)}}
.assurance article{background:var(--ink-2);padding:clamp(22px,2.6vw,28px)}
.assurance h4{font-family:var(--body);font-size:1.01rem;font-weight:700;margin:0 0 11px;letter-spacing:0;line-height:1.38}
.assurance p{margin:0;font-size:.93rem;color:var(--on-ink-muted);line-height:1.62}

/* --- Sub-tender band ----------------------------------------------------- */

.sub-band{border:1px solid var(--gold);border-radius:3px;padding:clamp(28px,4vw,46px);background:linear-gradient(160deg,rgba(215,183,120,.08),rgba(215,183,120,0) 62%)}
.sub-grid{display:grid;gap:clamp(24px,4vw,52px);align-items:center}
@media(min-width:900px){.sub-grid{grid-template-columns:1.1fr .9fr}}
.sub-grid .d2{margin-top:18px}
.sub-grid .lede{margin-top:20px}
.sub-list{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.sub-list li{background:var(--ink-2);padding:16px 19px;display:flex;gap:14px;align-items:baseline}
.sub-list em{font-family:var(--mono);font-style:normal;font-size:.66rem;letter-spacing:.14em;color:var(--gold);flex:none}
.sub-list p{margin:0;font-size:.93rem;color:var(--on-ink-muted);line-height:1.6}
.sub-list strong{display:block;color:var(--on-ink);font-weight:600;font-size:.95rem;margin-bottom:4px}

/* --- Contact page -------------------------------------------------------- */

.contact-grid{display:grid;gap:clamp(38px,6vw,72px)}
@media(min-width:920px){.contact-grid{grid-template-columns:.82fr 1.18fr}}
.contact-block{padding:22px 0;border-top:1px solid var(--line)}
.contact-block:first-child{border-top:0;padding-top:0}
.contact-block h4{margin:0 0 12px}
.contact-block p{margin:0 0 5px;font-size:.93rem;color:var(--on-ink-muted)}
.contact-block a{color:var(--gold);transition:opacity .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .contact-block a:hover{opacity:.75}
}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.checklist li{padding-left:20px;position:relative;font-size:.94rem;color:var(--on-ink-muted)}
.checklist li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--gold)}

.offices{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px;overflow:hidden}
@media(min-width:700px){.offices{grid-template-columns:1fr 1fr}}
.offices>div{background:var(--ink-2);padding:clamp(22px,3vw,30px)}
.offices .label{margin-bottom:14px}
.offices h4{margin:0 0 12px}
.offices p{margin:0 0 5px;font-size:.92rem;color:var(--on-ink-muted)}
.offices a{color:var(--gold)}

/* --- Closing band -------------------------------------------------------- */

.cta-band{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.cta-band canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.5}
.cta-band .wrap{position:relative;z-index:1}

/* Specification table on an ink section. */
.spec-dark tr{border-bottom-color:var(--line)}
.spec-dark tr:first-child{border-top-color:var(--line)}
.spec-dark th{color:var(--gold)}
.spec-dark td{color:var(--on-ink)}

/* NHAI panel. */
.nhai{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px;overflow:hidden}
@media(min-width:700px){.nhai{grid-template-columns:repeat(2,1fr)}}
.nhai>div{background:var(--ink-2);padding:clamp(22px,3vw,30px)}
.nhai h4{font-family:var(--body);font-size:1.02rem;font-weight:700;margin:0 0 10px;letter-spacing:0}
.nhai p{margin:0;font-size:.94rem;color:var(--on-ink-muted);line-height:1.62}
.nhai .label{margin-bottom:14px}

/* --- Certifications and registrations ------------------------------------ */

.certs{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px;overflow:hidden}
@media(min-width:720px){.certs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.certs{grid-template-columns:repeat(4,1fr)}}
.certs>div{background:var(--ink-2);padding:clamp(22px,2.6vw,28px)}
.certs .label{margin-bottom:16px}
.certs ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.certs li{padding-left:17px;position:relative;font-size:.93rem;color:var(--on-ink-muted);line-height:1.55}
.certs li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--gold)}
.certs li b{display:block;color:var(--on-ink);font-weight:500}
.paper .certs{background:var(--line-paper);border-color:var(--line-paper)}
.paper .certs>div{background:var(--ink-2)}
.paper .certs li{color:var(--paper-muted)}
.paper .certs li b{color:var(--paper-text)}
.paper .certs li::before{background:var(--gold-deep)}

/* --- Self-performed scope ------------------------------------------------ */

.selfperform{display:grid;gap:14px}
@media(min-width:640px){.selfperform{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.selfperform{grid-template-columns:repeat(4,1fr)}}
.selfperform div{border-top:1px solid var(--line-strong);padding-top:15px}
.selfperform b{display:block;font-size:.94rem;font-weight:600;color:var(--on-ink);margin-bottom:6px}
.selfperform span{display:block;font-size:.9rem;color:var(--on-ink-muted);line-height:1.55}

/* --- Themes row ---------------------------------------------------------- */
/* Same rhythm as the statistics row it replaces, carrying a position instead
   of a number. */

.themes{display:grid;gap:clamp(22px,3vw,38px);grid-template-columns:1fr}
@media(min-width:560px){.themes{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.themes{grid-template-columns:repeat(4,1fr)}}
.theme{border-top:1px solid var(--line-strong);padding-top:18px}
.theme em{
  display:block;font-family:var(--mono);font-style:normal;font-size:.68rem;
  letter-spacing:.16em;color:var(--gold);margin-bottom:14px;
}
.theme b{
  display:block;font-family:var(--display);font-weight:400;letter-spacing:.004em;
  font-size:clamp(1.2rem,1rem + .55vw,1.45rem);line-height:1.28;color:var(--on-ink);
  margin-bottom:10px;text-wrap:balance;
}
.theme span{display:block;font-size:.93rem;color:var(--on-ink-muted);line-height:1.6;text-wrap:pretty}
.paper .theme{border-top-color:var(--line-paper)}
.paper .theme em{color:var(--gold-deep)}
.paper .theme b{color:var(--paper-text)}
.paper .theme span{color:var(--paper-muted)}

/* ==========================================================================
   The house details
   Three things carry the luxury register: struck gold on the display type,
   a drawn meander between sections, and a ledger that flips like a board.
   ========================================================================== */

/* --- Foil ---------------------------------------------------------------- */
/* Real foil catches light as you move past it. This does the same: a gold
   gradient clipped to the letterforms, with the highlight travelling across
   as the page scrolls and as the pointer moves. Falls back to flat gold
   wherever background-clip:text is not supported. */

.foil{
  color:var(--gold);
  background-image:var(--foil);
  background-size:280% 100%;
  background-position:var(--foil-x,32%) 0;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  transition:background-position .5s cubic-bezier(.22,.61,.36,1);
  padding-bottom:.06em;   /* didone descenders need the room once clipped */
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .foil{color:var(--gold);-webkit-text-fill-color:currentColor}
}
@media (prefers-reduced-motion:reduce){
  .foil{transition:none;background-position:44% 0}
}

/* --- Meander ------------------------------------------------------------- */
/* A Greek key, drawn in gold, that runs itself out as the section arrives.
   Classical rather than decorative: it is the oldest border in architecture
   and it belongs on a building company's page more than a gradient does. */

.meander{
  display:block;width:100%;height:16px;overflow:hidden;
  margin:clamp(30px,5vw,56px) 0;
  opacity:.9;
}
.meander svg{width:100%;height:100%;display:block}
.meander rect{fill:none;stroke:var(--gold);stroke-width:1.4}
.meander .mline{
  stroke-dasharray:var(--len,2400);
  stroke-dashoffset:var(--len,2400);
  transition:stroke-dashoffset 1.9s cubic-bezier(.16,1,.3,1);
}
.meander.is-in .mline{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
  .meander .mline{stroke-dashoffset:0;transition:none}
}

/* --- The ledger ---------------------------------------------------------- */
/* Split-flap, like a departure board. The numbers the client asked to lead
   with deserve an entrance, and a counter that merely ticks up is something
   every template does. */

.ledger{
  display:grid;gap:clamp(24px,4vw,44px);
  grid-template-columns:1fr;
  align-items:end;
}
@media(min-width:700px){.ledger{grid-template-columns:repeat(2,1fr)}}
.ledger-item{border-top:1px solid var(--line-strong);padding-top:22px}
.flap{
  display:flex;gap:4px;align-items:flex-end;
  font-family:var(--body);font-weight:500;font-variant-numeric:tabular-nums lining-nums;
  font-size:clamp(2.7rem,1.85rem + 5.4vw,5.8rem);line-height:1;
  letter-spacing:-.01em;
}
.flap i{
  font-style:normal;position:relative;display:inline-block;
  min-width:.68em;text-align:center;
  background:linear-gradient(180deg,var(--ink-3) 0%,var(--ink-2) 49%,var(--ink) 51%,var(--ink-2) 100%);
  border:1px solid var(--line);border-radius:3px;
  padding:.06em .04em .1em;
  color:var(--gold);
  overflow:hidden;
}
/* The hinge every split-flap board has across the middle of the character. */
.flap i::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:rgba(0,0,0,.6);box-shadow:0 1px 0 rgba(215,183,120,.1);
}
.flap em{
  font-style:normal;color:var(--gold);align-self:flex-end;
  font-size:.52em;line-height:1;padding-bottom:.18em;
}
.ledger-item span{
  display:block;margin-top:18px;font-size:.92rem;color:var(--on-ink-muted);
  line-height:1.55;max-width:34ch;
}
.ledger-item b{
  display:block;font-family:var(--body);font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;font-size:.66rem;
  color:var(--gold);margin-bottom:16px;
}

/* --- Monogram field ------------------------------------------------------ */
/* The mark, tiled at very low opacity. Every house has a monogram; this one
   already had a mark and had never used it as one. */

.monogram{position:relative;isolation:isolate}
.monogram::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("../img/logo-mark.svg");
  background-repeat:repeat;
  background-size:78px auto;
  opacity:.035;
}
@media(max-width:640px){.monogram::before{background-size:56px auto;opacity:.028}}

/* --- The three doors ----------------------------------------------------- */

.doors{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px;overflow:hidden}
@media(min-width:900px){.doors{grid-template-columns:repeat(3,1fr)}}
.door{background:var(--ink-2);padding:clamp(26px,3vw,36px);display:flex;flex-direction:column}
.door .label{margin-bottom:18px}
.door h3{margin:0 0 14px}
.door p{font-size:.94rem;color:var(--on-ink-muted);margin:0 0 20px}
.door ul{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:9px}
.door li{padding-left:17px;position:relative;font-size:.93rem;color:var(--on-ink-muted);line-height:1.56}
.door li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--gold)}
.door .btn{margin-top:auto;width:100%;justify-content:center}

/* --- Dubai page ---------------------------------------------------------- */

.devs{display:flex;flex-wrap:wrap;gap:10px}
.devs span{
  font-family:var(--body);font-size:.82rem;letter-spacing:.06em;
  padding:11px 18px;border:1px solid var(--line-strong);border-radius:2px;
  color:var(--gold);transition:background .34s var(--ease),color .34s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .devs span:hover{background:var(--gold);color:var(--ink)}
}
.figs{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px;overflow:hidden}
@media(min-width:640px){.figs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.figs{grid-template-columns:repeat(4,1fr)}}
.figs>div{background:var(--ink-2);padding:clamp(22px,2.6vw,30px)}
.figs b{
  display:block;font-family:var(--body);font-weight:600;font-variant-numeric:tabular-nums lining-nums;
  font-size:clamp(1.72rem,1.2rem + 1.85vw,2.45rem);line-height:1.14;letter-spacing:-.01em;color:var(--gold);
  margin-bottom:14px;letter-spacing:-.01em;
}
.figs span{display:block;font-size:.91rem;color:var(--on-ink-muted);line-height:1.6}
.figs i{
  display:block;font-style:normal;margin-top:12px;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);
}