/* ============================================================
   Shokher Bari Interior Design — "the measured house"

   Every surface this studio sells is quoted per square foot, so the
   square foot is the grid unit of this page, its vertical rhythm and
   its only ornament. Colours are the materials on the rate note:
   burma teak, gorjon, chalk on a slate drawing board, and the paper
   the rate sheet is printed on.
   ============================================================ */

:root{
  /* --- material palette --- */
  --ink:        #0B0B0A;   /* the slate plans are drawn on */
  --ink-2:      #121211;   /* raised panel */
  --rule:       #242421;   /* hairline + square-foot grid */
  --rule-soft:  #1A1A18;
  --chalk:      #E9E5DC;   /* chalk on slate — primary type */
  --chalk-dim:  #8B877D;   /* secondary type */
  --teak:       #C89246;   /* বার্মাটিক — the one accent */
  --gorjon:     #8A4032;   /* গর্জন — material swatch only */
  --paper:      #F2EFE8;   /* the printed rate sheet */
  --paper-ink:  #16160F;
  --paper-rule: #D5D0C4;
  --paper-dim:  #6A665B;

  /* --- one square foot of page --- */
  --sft: 46px;

  /* --- type --- */
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body:    "Instrument Sans", system-ui, -apple-system, sans-serif;
  --spec:    "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  --bangla:  "Hind Siliguri", "Nirmala UI", system-ui, sans-serif;

  --t-xs:  clamp(.68rem, .65rem + .12vw, .75rem);
  --t-sm:  clamp(.8rem,  .77rem + .15vw, .875rem);
  --t-base:clamp(.95rem, .91rem + .2vw,  1.06rem);
  --t-md:  clamp(1.1rem, 1rem + .5vw,    1.35rem);
  --t-lg:  clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --t-xl:  clamp(2rem,   1.4rem + 3vw,   3.75rem);
  --t-hero:clamp(2.9rem, 1rem + 9.2vw,   8.5rem);

  --gutter: clamp(1.15rem, .6rem + 2.6vw, 3.25rem);
  --maxw: 1560px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   Reset + base
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--chalk);
  font-family:var(--body);
  font-size:var(--t-base);
  line-height:1.58;
  -webkit-font-smoothing:antialiased;
  font-synthesis-weight:none;
}

img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

:focus-visible{
  outline:2px solid var(--teak);
  outline-offset:3px;
  border-radius:1px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--teak); color:var(--ink);
  padding:.7rem 1.1rem; font-family:var(--spec); font-size:var(--t-xs);
  letter-spacing:.1em; text-transform:uppercase;
}
.skip:focus{ left:.5rem; top:.5rem; }

.vh{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ============================================================
   Shared type roles
   ============================================================ */

.bn{ font-family:var(--bangla); font-weight:500; }

/* mono spec label — the drawing-sheet voice */
.spec{
  font-family:var(--spec);
  font-size:var(--t-xs);
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--chalk-dim);
}
.spec--teak{ color:var(--teak); }

/* big architectural title, set expanded */
.title{
  font-family:var(--display);
  font-weight:600;
  font-stretch:118%;
  font-size:var(--t-xl);
  line-height:.94;
  letter-spacing:-.02em;
  text-transform:uppercase;
  margin:0;
}

.lede{
  font-size:var(--t-md);
  line-height:1.45;
  color:var(--chalk);
  max-width:34ch;
  margin:0;
}

.prose{ color:var(--chalk-dim); max-width:62ch; }
.prose p{ margin:0 0 1em; }
.prose p:last-child{ margin-bottom:0; }

/* ============================================================
   Layout shell + the square-foot grid
   ============================================================ */

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* the graph-paper ground: one cell = one square foot */
.gridpaper{
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size:var(--sft) var(--sft);
  background-position:center top;
}

.band{ padding-block:clamp(3.5rem,2rem + 7vw,8rem); }
.band--tight{ padding-block:clamp(2.5rem,1.6rem + 4vw,4.5rem); }
.band + .band{ border-top:1px solid var(--rule); }

/* section title block, like the title block on a drawing sheet */
.titleblock{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.9rem;
  padding-bottom:clamp(1.75rem,1rem + 2.5vw,3.25rem);
}
.titleblock__rule{
  height:1px; background:var(--rule); margin-top:.4rem;
}
@media (min-width:920px){
  .titleblock{
    grid-template-columns:minmax(0,auto) minmax(0,30ch);
    align-items:end;
    column-gap:clamp(2rem,4vw,5rem);
  }
  .titleblock__rule{ grid-column:1 / -1; order:9; margin-top:1.4rem; }
}

/* ============================================================
   Masthead
   ============================================================ */

.masthead{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}

.masthead__bar{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  min-height:var(--sft);
  padding-block:.7rem;
}

.wordmark{ display:flex; align-items:center; gap:.65rem; }
.wordmark__mark{ height:2.35rem; width:auto; flex:none; }
.wordmark__text{ display:flex; align-items:baseline; gap:.6rem; }
.wordmark__bn{
  font-family:var(--bangla); font-weight:600;
  font-size:clamp(1.05rem,.95rem + .5vw,1.4rem);
  line-height:1; color:var(--chalk);
}
.wordmark__en{
  font-family:var(--spec); font-size:var(--t-xs);
  letter-spacing:.18em; text-transform:uppercase; color:var(--chalk-dim);
}
@media (max-width:560px){ .wordmark__en{ display:none; } }

.nav{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.2rem); }
.nav__link{
  font-family:var(--spec); font-size:var(--t-xs);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--chalk-dim);
  padding-block:.35rem;
  border-bottom:1px solid transparent;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.nav__link:hover,
.nav__link[aria-current="page"]{ color:var(--chalk); border-bottom-color:var(--teak); }

.navtoggle{
  display:none;
  background:none; border:1px solid var(--rule);
  padding:.5rem .8rem;
  font-family:var(--spec); font-size:var(--t-xs);
  letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer;
}

/* Six nav items plus the wordmark stop fitting well below this; the
   JS in site.js watches the same width, so change both together. */
@media (max-width:1040px){
  .navtoggle{ display:block; }
  /* Absolute positioning resolves against the bar's padding box, which
     is already full width — so this needs padding, not a bleed margin. */
  .nav{
    position:absolute; inset:100% 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink); border-bottom:1px solid var(--rule);
    padding:.5rem var(--gutter) 1.25rem;
  }
  .nav[hidden]{ display:none; }
  .nav__link{ padding-block:.85rem; border-bottom:1px solid var(--rule-soft); }
}

/* ============================================================
   Buttons
   ============================================================ */

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.4rem;
  font-family:var(--spec); font-size:var(--t-xs);
  letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--teak);
  background:transparent; color:var(--teak);
  cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover{ background:var(--teak); color:var(--ink); }
.btn--solid{ background:var(--teak); color:var(--ink); }
.btn--solid:hover{ background:var(--chalk); border-color:var(--chalk); color:var(--ink); }
.btn--ghost{ border-color:var(--rule); color:var(--chalk); }
.btn--ghost:hover{ background:var(--chalk); border-color:var(--chalk); color:var(--ink); }
.btn__wa{ width:1.05em; height:1.05em; fill:currentColor; flex:none; }

/* ============================================================
   Hero — the thesis: a measured drawing of the work
   ============================================================ */

.hero{
  position:relative;
  padding-top:clamp(2.5rem,1.5rem + 5vw,6rem);
  padding-bottom:clamp(2.5rem,1.5rem + 4vw,5rem);
  overflow:hidden;
}

.hero__grid{
  display:grid; gap:clamp(2.25rem,1rem + 5vw,4.5rem);
  grid-template-columns:minmax(0,1fr);
  align-items:center;
}
@media (min-width:1060px){
  .hero__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); }
  /* The headline now shares the row with the plan, so it is sized
     against its own column rather than the whole viewport — at the
     full-width scale every line wraps. */
  :root{ --t-hero:clamp(3rem, 1rem + 4.6vw, 6.5rem); }
}

.hero__eyebrow{ display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; margin-bottom:clamp(1.25rem,3vw,2.25rem); }

/* stacked-word headline (the zha.com device), set in expanded Archivo */
.hero__head{
  font-family:var(--display);
  font-weight:700;
  font-stretch:112%;
  font-size:var(--t-hero);
  line-height:.86;
  letter-spacing:-.035em;
  text-transform:uppercase;
  margin:0;
}
.hero__head span{ display:block; }
.hero__head em{ font-style:normal; color:var(--teak); }

.hero__bn{
  font-family:var(--bangla);
  font-size:clamp(1.05rem,.95rem + .7vw,1.5rem);
  font-weight:500;
  line-height:1.5;
  color:var(--chalk-dim);
  margin:clamp(1.25rem,3vw,2rem) 0 0;
  max-width:26ch;
}
.hero__bn b{ color:var(--teak); font-weight:600; }

.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:clamp(1.5rem,3vw,2.5rem); }

/* --- the plan --- */
.plan{ position:relative; }
.plan__frame{
  border:1px solid var(--rule);
  background:
    linear-gradient(var(--rule-soft) 1px, transparent 1px) center top / var(--sft) var(--sft),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px) center top / var(--sft) var(--sft),
    var(--ink-2);
  padding:clamp(.75rem,2vw,1.5rem);
}
.plan__svg{ width:100%; height:auto; }

/* the material key — real text, so it survives a phone screen */
.keys{
  list-style:none; margin:clamp(.9rem,2vw,1.5rem) 0 0; padding:0;
  border-top:1px solid var(--rule);
  display:grid; gap:1px; background:var(--rule);
}
@media (min-width:560px){ .keys{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.key{
  background:var(--ink-2);
  padding:.8rem .9rem;
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:.15rem .7rem;
  align-items:baseline;
  transition:background .25s var(--ease);
}
.key__no{
  grid-row:1 / span 2;
  width:1.5rem; height:1.5rem; align-self:center;
  border:1px solid var(--teak); border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--spec); font-size:var(--t-xs); color:var(--teak);
}
.key__name{ font-size:var(--t-sm); color:var(--chalk); line-height:1.3; }
.key__rate{
  font-family:var(--spec); font-size:var(--t-xs);
  letter-spacing:.04em; color:var(--teak);
}

/* hovering either half lights the other */
.key.is-lit{ background:var(--ink); }
.key.is-lit .key__no{ background:var(--teak); color:var(--ink); }
.pl-group.is-lit .pl-fill{ opacity:.13; }
.pl-group.is-lit .pl-rate{ fill:var(--chalk); }
.pl-group.is-lit .pl-lead{ stroke:var(--chalk); }

.plan__caption{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 1.5rem;
  border-top:1px solid var(--rule);
  margin-top:clamp(.75rem,2vw,1.5rem);
  padding-top:.9rem;
}

/* drawing strokes */
.pl-wall{ fill:none; stroke:var(--chalk); stroke-width:2.5; stroke-linecap:square; }
.pl-thin{ fill:none; stroke:var(--rule); stroke-width:1; }
.pl-dim{ fill:none; stroke:var(--chalk-dim); stroke-width:1; }
.pl-lead{ fill:none; stroke:var(--teak); stroke-width:1; }
.pl-fill{ fill:var(--chalk); opacity:.045; }
.pl-txt{
  font-family:var(--spec); font-size:11px; letter-spacing:.1em;
  fill:var(--chalk-dim); text-transform:uppercase;
}
.pl-rate{ font-family:var(--spec); font-size:11.5px; fill:var(--teak); letter-spacing:.04em; }
.pl-bn{ font-family:var(--bangla); font-size:13px; fill:var(--chalk); }

/* hoverable surfaces */
.pl-group{ cursor:pointer; }
.pl-hit{ fill:transparent; }
.pl-group .pl-fill{ transition:opacity .25s var(--ease); }
.pl-group .pl-rate{ transition:fill .25s var(--ease); }
.pl-group:hover .pl-fill,
.pl-group:focus-visible .pl-fill{ opacity:.13; }
.pl-group:hover .pl-rate,
.pl-group:focus-visible .pl-rate{ fill:var(--chalk); }

/* draw-in: walls, then dimensions, then callouts */
.plan--animate .pl-wall,
.plan--animate .pl-dim,
.plan--animate .pl-thin,
.plan--animate .pl-lead{
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  animation:draw 1.15s var(--ease) forwards;
}
.plan--animate .pl-dim,
.plan--animate .pl-thin{ animation-delay:.7s; animation-duration:.7s; }
.plan--animate .pl-lead{ animation-delay:1.1s; animation-duration:.5s; }
.plan--animate .pl-txt,
.plan--animate .pl-rate,
.plan--animate .pl-bn{ opacity:0; animation:fade .6s var(--ease) 1.25s forwards; }
.plan--animate .pl-fill{ opacity:0; animation:fade-fill .6s var(--ease) 1.25s forwards; }

@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fade{ to{ opacity:1; } }
@keyframes fade-fill{ to{ opacity:.045; } }

@media (prefers-reduced-motion:reduce){
  .plan--animate .pl-wall,
  .plan--animate .pl-dim,
  .plan--animate .pl-thin,
  .plan--animate .pl-lead{ stroke-dasharray:none; stroke-dashoffset:0; animation:none; }
  .plan--animate .pl-txt,
  .plan--animate .pl-rate,
  .plan--animate .pl-bn{ opacity:1; animation:none; }
  .plan--animate .pl-fill{ opacity:.045; animation:none; }
}

/* ============================================================
   Disciplines (interior / exterior / civil)
   ============================================================ */

.disciplines{
  display:grid; gap:1px;
  background:var(--rule);
  border-block:1px solid var(--rule);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:860px){ .disciplines{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.disc{
  background:var(--ink);
  padding:clamp(1.75rem,1rem + 2.5vw,3rem) clamp(1.25rem,1rem + 1.5vw,2.25rem);
  display:flex; flex-direction:column; gap:1rem;
  transition:background .25s var(--ease);
}
.disc:hover{ background:var(--ink-2); }
.disc__no{
  font-family:var(--spec); font-size:var(--t-xs); letter-spacing:.16em;
  color:var(--teak); text-transform:uppercase;
}
.disc__name{
  font-family:var(--display); font-weight:600; font-stretch:115%;
  font-size:var(--t-lg); line-height:1; letter-spacing:-.02em;
  text-transform:uppercase; margin:0;
}
.disc__bn{ font-family:var(--bangla); color:var(--chalk-dim); font-size:var(--t-sm); margin:-.5rem 0 0; }
.disc__text{ margin:0; font-size:var(--t-sm); color:var(--chalk-dim); }
.disc__list{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.disc__list li{
  font-size:var(--t-sm); color:var(--chalk-dim);
  padding-left:1.1rem; position:relative;
}
.disc__list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:.5rem; height:1px; background:var(--teak);
}
.disc__more{
  margin-top:auto; padding-top:.75rem;
  font-family:var(--spec); font-size:var(--t-xs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--chalk);
  border-bottom:1px solid var(--rule); align-self:flex-start;
  transition:border-color .2s var(--ease);
}
.disc__more:hover{ border-bottom-color:var(--teak); }

/* ============================================================
   Work grid (the big.dk device) — tiles carry NAME / PLACE / SPEC
   ============================================================ */

.filters{
  display:flex; flex-wrap:wrap; gap:.5rem;
  padding-bottom:clamp(1.5rem,3vw,2.5rem);
}
.filter{
  background:none; border:1px solid var(--rule);
  padding:.55rem 1rem;
  font-family:var(--spec); font-size:var(--t-xs);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--chalk-dim); cursor:pointer;
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.filter:hover{ color:var(--chalk); border-color:var(--chalk-dim); }
.filter[aria-pressed="true"]{ background:var(--chalk); border-color:var(--chalk); color:var(--ink); }

.work{
  display:grid; gap:clamp(1rem,2vw,1.75rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));
}

.tile{ display:flex; flex-direction:column; gap:.85rem; }
.tile[hidden]{ display:none; }

.tile__shot{
  position:relative; overflow:hidden;
  background:var(--ink-2);
  border:1px solid var(--rule);
  aspect-ratio:4/3;
}
.tile__shot--tall{ aspect-ratio:3/4; }
.tile__shot--wide{ aspect-ratio:16/10; }
.tile__shot img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease);
}
.tile:hover .tile__shot img{ transform:scale(1.03); }

/* placeholder: a plan fragment, not a grey box.
   Drop a real photo in as <img> and it covers this. */
.tile__plan{ position:absolute; inset:0; width:100%; height:100%; }
.tile__stamp{
  position:absolute; left:0; bottom:0;
  padding:.45rem .7rem;
  background:var(--ink);
  border-top:1px solid var(--rule); border-right:1px solid var(--rule);
  font-family:var(--spec); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--chalk-dim);
}

.tile__name{
  font-family:var(--display); font-weight:500; font-stretch:108%;
  font-size:var(--t-base); line-height:1.15; letter-spacing:-.005em;
  margin:0; color:var(--chalk);
}
.tile__meta{
  display:flex; flex-wrap:wrap; gap:.3rem .85rem;
  font-family:var(--spec); font-size:var(--t-xs);
  letter-spacing:.12em; text-transform:uppercase; color:var(--chalk-dim);
}
.tile__meta b{ color:var(--teak); font-weight:400; }

.work__empty{
  grid-column:1 / -1; padding:clamp(2rem,5vw,4rem) 0;
  border-top:1px solid var(--rule);
  color:var(--chalk-dim);
}
.work__empty[hidden]{ display:none; }

/* ============================================================
   Rate sheet — the page flips to printed paper
   ============================================================ */

.paper{
  background:var(--paper);
  color:var(--paper-ink);
  background-image:
    linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px);
  background-size:var(--sft) var(--sft);
}
.paper .spec{ color:var(--paper-dim); }
.paper .spec--teak{ color:var(--gorjon); }
.paper .titleblock__rule{ background:var(--paper-rule); }
.paper .prose{ color:var(--paper-dim); }
.paper .lede{ color:var(--paper-ink); }
.paper .title{ color:var(--paper-ink); }
.paper .band + .band{ border-top-color:var(--paper-rule); }
.paper .btn--ghost{ border-color:var(--paper-rule); color:var(--paper-ink); }
.paper .btn--ghost:hover{ background:var(--paper-ink); border-color:var(--paper-ink); color:var(--paper); }

/* the rate sheet is the one light surface, so the logo sits on it as a
   letterhead in its own colours rather than the dark variant */
.letterhead{
  width:min(100%,14rem); height:auto;
  margin-bottom:clamp(1.5rem,3vw,2.5rem);
}

.ratesheet{ display:grid; gap:clamp(2rem,1rem + 3vw,3.5rem); }
@media (min-width:1000px){ .ratesheet{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.rateblock__head{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.5rem .9rem;
  border-bottom:2px solid var(--paper-ink);
  padding-bottom:.6rem;
}
.rateblock__no{
  font-family:var(--spec); font-size:var(--t-xs); color:var(--gorjon);
  letter-spacing:.12em;
}
.rateblock__name{
  font-family:var(--display); font-weight:600; font-stretch:112%;
  font-size:var(--t-md); line-height:1; letter-spacing:-.015em;
  text-transform:uppercase; margin:0;
}
.rateblock__bn{ font-family:var(--bangla); font-weight:500; font-size:var(--t-sm); color:var(--paper-dim); }

.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

.rates{
  width:100%; border-collapse:collapse; min-width:28rem;
  font-size:var(--t-sm);
}
.rates th,.rates td{
  text-align:left; padding:.8rem .75rem;
  border-bottom:1px solid var(--paper-rule);
  vertical-align:baseline;
}
.rates th{
  font-family:var(--spec); font-size:var(--t-xs);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper-dim); font-weight:400;
}
.rates td:first-child{ font-weight:500; }
.rates .rate{
  font-family:var(--spec); font-size:var(--t-sm);
  white-space:nowrap; color:var(--paper-ink);
}
.rates .note{ color:var(--paper-dim); font-size:var(--t-xs); }
.rates tbody tr:last-child td{ border-bottom:0; }
.rates .swatch{
  display:inline-block; width:.55rem; height:.55rem; margin-right:.5rem;
  background:var(--gorjon);
}
.rates .swatch--teak{ background:var(--teak); }

.ratefoot{
  margin-top:clamp(2rem,4vw,3.5rem);
  padding-top:1.5rem;
  border-top:1px solid var(--paper-rule);
  display:grid; gap:1.5rem;
}
@media (min-width:860px){ .ratefoot{ grid-template-columns:minmax(0,1fr) auto; align-items:center; } }

/* quote-only disciplines, stated plainly rather than invented */
.noprice{
  display:grid; gap:1px; background:var(--paper-rule);
  border:1px solid var(--paper-rule); margin-top:clamp(2rem,4vw,3rem);
}
@media (min-width:760px){ .noprice{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.noprice__cell{ background:var(--paper); padding:clamp(1.25rem,2.5vw,2rem); }
.noprice__cell h3{
  font-family:var(--display); font-weight:600; font-stretch:112%;
  font-size:var(--t-base); text-transform:uppercase; letter-spacing:-.01em;
  margin:0 0 .5rem;
}
.noprice__cell p{ margin:0; color:var(--paper-dim); font-size:var(--t-sm); }

/* ============================================================
   Enquiry form → WhatsApp
   ============================================================ */

.enquiry{
  display:grid; gap:clamp(2rem,1rem + 4vw,4.5rem);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:1000px){ .enquiry{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); } }

.form{ display:grid; gap:1.25rem; }

.field{ display:grid; gap:.45rem; }
.field__label{
  font-family:var(--spec); font-size:var(--t-xs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--chalk-dim);
}
.field__label .req{ color:var(--teak); }

.field input,
.field select,
.field textarea{
  width:100%;
  background:var(--ink-2);
  border:1px solid var(--rule);
  color:var(--chalk);
  font-family:var(--body); font-size:var(--t-base);
  padding:.8rem .9rem;
  border-radius:0;
  transition:border-color .2s var(--ease);
}
.field textarea{ resize:vertical; min-height:6.5rem; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--chalk-dim); }
.field input::placeholder,.field textarea::placeholder{ color:#5E5B54; }
.field select{ appearance:none; cursor:pointer; }

.field__row{ display:grid; gap:1.25rem; grid-template-columns:minmax(0,1fr); }
@media (min-width:620px){ .field__row{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.field__hint{ font-size:var(--t-xs); color:var(--chalk-dim); }

.field__error{
  font-family:var(--spec); font-size:var(--t-xs); letter-spacing:.06em;
  color:var(--teak);
}
.field__error:empty{ display:none; }
.field--bad input,.field--bad select,.field--bad textarea{ border-color:var(--teak); }

/* which number to reach */
.choice{ display:grid; gap:.5rem; }
.choice__opts{ display:grid; gap:.5rem; }
@media (min-width:620px){ .choice__opts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.choice__opt{
  display:flex; align-items:center; gap:.65rem;
  border:1px solid var(--rule); padding:.75rem .9rem; cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.choice__opt:hover{ border-color:var(--chalk-dim); }
.choice__opt input{ accent-color:var(--teak); width:1rem; height:1rem; flex:none; }
.choice__opt span{ font-family:var(--spec); font-size:var(--t-xs); letter-spacing:.08em; }
.choice__opt:has(input:checked){ border-color:var(--teak); background:var(--ink-2); }

.form__send{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:.25rem; }
.form__note{ font-size:var(--t-xs); color:var(--chalk-dim); max-width:36ch; }

/* the preview of exactly what will be sent — no surprises */
.preview{
  border:1px solid var(--rule);
  background:var(--ink-2);
  padding:clamp(1.1rem,2.5vw,1.75rem);
  position:sticky; top:calc(var(--sft) + 2.5rem);
}
@media (max-width:999px){ .preview{ position:static; } }
.preview__head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border-bottom:1px solid var(--rule); padding-bottom:.75rem; margin-bottom:1rem;
}
.preview__body{
  font-family:var(--spec); font-size:var(--t-sm); line-height:1.85;
  white-space:pre-wrap; word-break:break-word; margin:0; color:var(--chalk);
}
.preview__body .ph{ color:#5E5B54; }

/* contact rail */
.rail{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (min-width:620px) and (max-width:999px){ .rail{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.rail__cell{ background:var(--ink); padding:clamp(1.1rem,2.5vw,1.6rem); display:grid; gap:.4rem; }
.rail__val{
  font-family:var(--display); font-weight:500; font-stretch:108%;
  font-size:var(--t-md); letter-spacing:-.01em;
}
.rail__val a:hover{ color:var(--teak); }

/* ============================================================
   Footer
   ============================================================ */

.foot{ border-top:1px solid var(--rule); padding-block:clamp(2.5rem,4vw,4rem); }
.foot__grid{
  display:grid; gap:2rem;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:820px){ .foot__grid{ grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr)); } }

.foot__logo{ width:min(100%,17rem); height:auto; margin-bottom:1.25rem; }

.foot__head{
  font-family:var(--display); font-weight:600; font-stretch:115%;
  font-size:var(--t-lg); line-height:1; letter-spacing:-.02em;
  text-transform:uppercase; margin:0 0 .75rem;
}
.foot__list{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.foot__list a,.foot__list span{ font-size:var(--t-sm); color:var(--chalk-dim); }
.foot__list a:hover{ color:var(--chalk); }

.foot__bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem 2rem;
  border-top:1px solid var(--rule); margin-top:clamp(2rem,4vw,3rem); padding-top:1.5rem;
}

.social{ display:flex; gap:.5rem; }
.social a{
  display:grid; place-items:center; width:2.4rem; height:2.4rem;
  border:1px solid var(--rule); color:var(--chalk-dim);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.social a:hover{ color:var(--teak); border-color:var(--teak); }
.social svg{ width:1.05rem; height:1.05rem; fill:currentColor; }

/* floating whatsapp — one tap from anywhere on a phone */
.wafab{
  position:fixed; right:1rem; bottom:1rem; z-index:55;
  display:grid; place-items:center; width:3.25rem; height:3.25rem;
  background:var(--teak); color:var(--ink);
  border:1px solid var(--teak);
  box-shadow:0 6px 24px rgba(0,0,0,.45);
  transition:transform .2s var(--ease);
}
.wafab:hover{ transform:translateY(-2px); }
.wafab svg{ width:1.55rem; height:1.55rem; fill:currentColor; }
@media (min-width:860px){ .wafab{ right:1.5rem; bottom:1.5rem; } }

/* ============================================================
   Interior pages
   ============================================================ */

.pagehead{ padding-top:clamp(2.5rem,1.5rem + 4vw,5rem); padding-bottom:clamp(2rem,1rem + 3vw,4rem); }
.pagehead__title{
  font-family:var(--display); font-weight:700; font-stretch:112%;
  font-size:clamp(2.4rem,1.2rem + 5.5vw,5.5rem);
  line-height:.9; letter-spacing:-.035em; text-transform:uppercase;
  margin:.75rem 0 0;
}
.pagehead .lede{ margin-top:1.5rem; max-width:46ch; }
.paper .pagehead__title{ color:var(--paper-ink); }

.service{
  display:grid; gap:clamp(1.75rem,1rem + 3vw,3.5rem);
  grid-template-columns:minmax(0,1fr);
  padding-block:clamp(2.5rem,1.5rem + 4vw,5rem);
}
.service + .service{ border-top:1px solid var(--rule); }
@media (min-width:960px){
  .service{ grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); }
}
.service__no{ font-family:var(--spec); font-size:var(--t-xs); letter-spacing:.16em; color:var(--teak); }
.service__name{
  font-family:var(--display); font-weight:600; font-stretch:115%;
  font-size:var(--t-xl); line-height:.95; letter-spacing:-.025em;
  text-transform:uppercase; margin:.5rem 0 0;
}
.service__bn{ font-family:var(--bangla); color:var(--chalk-dim); margin:.5rem 0 0; }

.scope{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:1.75rem; }
@media (min-width:680px){ .scope{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.scope__cell{ background:var(--ink); padding:1.15rem 1.25rem; display:grid; gap:.35rem; }
.scope__cell h4{
  font-family:var(--spec); font-size:var(--t-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--teak); margin:0; font-weight:400;
}
.scope__cell p{ margin:0; font-size:var(--t-sm); color:var(--chalk-dim); }

/* ============================================================
   The drawing — proof that a job is measured before it is built
   ============================================================ */

.drawing{
  display:grid; gap:clamp(1.75rem,1rem + 3vw,3.5rem);
  grid-template-columns:minmax(0,1fr);
  align-items:center;
}
@media (min-width:940px){
  .drawing{ grid-template-columns:minmax(0,1fr) minmax(0,.9fr); }
}

.drawing__sheet{
  border:1px solid var(--rule);
  background:var(--ink-2);
  padding:clamp(.6rem,1.5vw,1rem);
}
.drawing__sheet img{
  width:auto; max-width:100%;
  max-height:min(78vh,780px);
  margin-inline:auto;
}
.drawing__stamp{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 1.5rem;
  border-top:1px solid var(--rule);
  margin-top:clamp(.6rem,1.5vw,1rem); padding-top:.85rem;
}

/* ============================================================
   People — architect and visualiser
   ============================================================ */

.people{
  display:grid; gap:1px;
  background:var(--rule); border:1px solid var(--rule);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:880px){ .people{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.person{
  background:var(--ink);
  padding:clamp(1.75rem,1rem + 2.5vw,3rem) clamp(1.25rem,1rem + 1.5vw,2.5rem);
  display:flex; flex-direction:column; gap:1rem;
}

/* initials set like the keyed markers on the hero plan, rather than
   a stock portrait we do not have */
.person__key{
  width:4.5rem; height:4.5rem;
  border:1px solid var(--teak); border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--spec); font-size:var(--t-md);
  letter-spacing:.06em; color:var(--teak);
}
.person__name{
  font-family:var(--display); font-weight:600; font-stretch:115%;
  font-size:var(--t-lg); line-height:1; letter-spacing:-.02em;
  text-transform:uppercase; margin:0;
}
.person__role{
  font-family:var(--spec); font-size:var(--t-xs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--teak);
  margin:0;
}
.person__where{ font-family:var(--spec); font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--chalk-dim); margin:0; }
.person__text{ margin:0; font-size:var(--t-sm); color:var(--chalk-dim); }
.person__links{ margin-top:auto; padding-top:1rem; display:flex; flex-wrap:wrap; gap:.6rem; }

/* ============================================================
   Print
   ============================================================ */

@media print{
  .masthead,.wafab,.filters,.social,.skip{ display:none; }
  body{ background:#fff; color:#000; }
  .paper{ background:#fff; }
}