/* ══════════════════════════════════════════════════════════
   Matrix Composites — FRP and DMC mouldings, Chennai.
   Six colours, two families, two weights each. See style.md.
   ══════════════════════════════════════════════════════════ */

:root{
  --iron:#2B2A28;    /* nav, footer, headings, drawing outlines */
  --putty:#F6F3ED;   /* page background */
  --panel:#E6E1D7;   /* spec strips, image wells, table stripes */
  --line:#D3CCBF;    /* every border and rule */
  --oxide:#7A2E22;   /* the one accent — buttons, links, active state */
  --muted:#61594E;   /* secondary text, captions, sub-labels */

  --slab:"Zilla Slab",Georgia,serif;
  --sans:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --w:1120px;
  --gut:24px;
  --sect:72px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--putty);
  color:var(--iron);
  font:400 17px/1.6 var(--sans);
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,dl,dd,figure,fieldset{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}

/* headings — slab, tight, never below 16px */
h1,h2,h3,h4,.slab{font-family:var(--slab);font-weight:600;letter-spacing:-.015em;line-height:1.15}
h1{font-size:40px;font-weight:700}
h2{font-size:30px}
h3{font-size:22px}

/* Numbers and codes always sit in the sans, never the slab —
   a buyer scanning dimensions needs plain figures. */
.num{font-family:var(--sans);font-weight:600;letter-spacing:0}

.wrap{width:100%;max-width:var(--w);margin-inline:auto;padding-inline:var(--gut)}
/* every layout child opts out of min-width:auto, or one long unbreakable
   string (an email address) drags the whole page wider than the screen */
.split>*,.cards>*,.gal>*,.inst>*,.hero__in>*,.bar__in>*,.foot__in>*{min-width:0}
.cont dd,.cont dd a{overflow-wrap:anywhere}
.lede{font-size:17px;line-height:1.6;max-width:68ch;color:var(--muted)}
/* the bar is sticky, so an anchor target has to stop clear of it or the
   heading lands underneath the nav */
.sect,.hero{scroll-margin-top:80px}
.sect{padding-block:var(--sect)}
.sect + .sect{border-top:1px solid var(--line)}

:focus-visible{outline:2px solid var(--oxide);outline-offset:2px}
.bar :focus-visible,.foot :focus-visible{outline-color:var(--putty)}

.skip{position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--iron);color:var(--putty);padding:10px 16px;font-size:15px}
.skip:focus{left:8px;top:8px}

/* ── buttons ───────────────────────────────────────────────
   2px radius here, 0 on cards and panels — deliberately not
   the same value everywhere. No shadows anywhere on the site. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 20px;border-radius:2px;border:1px solid transparent;
  font:600 15px/1.2 var(--sans);text-decoration:none;cursor:pointer;
}
.btn--primary{background:var(--oxide);border-color:var(--oxide);color:var(--putty)}
.btn--primary:hover{background:var(--iron);border-color:var(--iron)}
.btn--secondary{background:transparent;border-color:var(--line);color:var(--iron)}
.btn--secondary:hover{border-color:var(--iron)}
/* on the dark bar the outline is oxide but the label stays putty —
   oxide on iron is nowhere near a readable contrast ratio */
.btn--onbar{background:transparent;border-color:var(--oxide);color:var(--putty)}
.btn--onbar:hover{background:var(--oxide)}

/* body links: oxide is only legible at 17px semibold and up */
/* oxide goes muddy below 17px, so a link that carries it is pinned to 17px
   semibold wherever it sits — including inside 15px panel copy */
.prose a,.lnk{color:var(--oxide);font-size:17px;font-weight:600;
  text-decoration:underline;text-underline-offset:3px}
.prose a:hover,.lnk:hover{text-decoration-thickness:2px}

/* ── top bar ───────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:40;background:var(--iron);color:var(--putty)}
.bar__in{display:flex;align-items:center;gap:24px;min-height:64px}
.logo{display:flex;align-items:baseline;gap:8px;text-decoration:none;margin-right:auto}
.logo__n{font:700 22px/1 var(--slab);letter-spacing:-.02em}
.logo__s{font:400 14px/1 var(--sans);color:var(--line)}
.menu{display:flex;align-items:center}
.menu__in{display:flex;align-items:center;gap:22px}
.menu a{font:400 15px/1 var(--sans);text-decoration:none;padding-block:6px;
  border-bottom:2px solid transparent}
.menu a:hover{border-bottom-color:var(--line)}
.menu a[aria-current="page"]{color:var(--putty);font-weight:600;border-bottom-color:var(--oxide)}
.bar .btn--onbar{margin-left:8px}
/* the number is shown, not hidden behind a label — buyers ring to confirm
   before they order, and a visible number gets rung */
.bar__tel{font:600 15px/1 var(--sans);color:var(--putty);text-decoration:none;white-space:nowrap}
.bar__tel:hover{text-decoration:underline;text-underline-offset:3px}

.burger{display:none;align-items:center;gap:8px;background:transparent;
  border:1px solid var(--line);border-radius:2px;padding:9px 12px;
  font:600 15px/1 var(--sans);color:var(--putty);cursor:pointer}
.burger__i{display:block;width:16px;height:10px;position:relative}
.burger__i::before,.burger__i::after{content:"";position:absolute;left:0;right:0;
  height:1.5px;background:var(--putty)}
.burger__i::before{top:0}
.burger__i::after{bottom:0}

/* ── hero ──────────────────────────────────────────────── */
.hero{padding-block:var(--sect);border-bottom:1px solid var(--line)}
.hero__in{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{max-width:16ch}
.hero__p{margin-top:16px;font-size:17px;line-height:1.6;max-width:60ch;color:var(--muted)}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ── how to order ──────────────────────────────────────────
   A single plain sentence under the hero, in the slot the standards
   strip used to hold. No buttons: the hero already carries an oxide
   one just above, and two together would spend the accent twice. */
.order{background:var(--panel);border-bottom:1px solid var(--line)}
.order__in{padding-block:18px}
.order__t{font-size:17px;line-height:1.55;max-width:70ch}
.order__t a{color:var(--oxide);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.order__t a:hover{text-decoration-thickness:2px}

/* ── image wells and line drawings ─────────────────────────
   Where a real photograph is missing we show a Panel block
   with a line drawing — never stock photography. */
.well{
  position:relative;background:var(--panel);border:1px solid var(--line);
  aspect-ratio:4 / 3;overflow:hidden;
}
.well__img{width:100%;height:100%;object-fit:contain;object-position:center}
.well.is-empty .well__img{display:none}
/* the placeholder: a plain Panel block naming the file it waits for.
   No drawing, no stock photograph — just the gap, honestly marked. */
.well__cap{display:none}
.well.is-empty .well__cap{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  position:absolute;inset:0;padding:16px;text-align:center;color:var(--muted);
}
.well__cap-l{font-size:14px;font-weight:600;line-height:1.3}
.well__cap-f{font-size:13px;line-height:1.4;word-break:break-all;
  padding:3px 8px;border:1px solid var(--line);background:var(--putty)}

/* ── colour gallery ────────────────────────────────────── */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.gal figure{margin:0}
.gal .well{aspect-ratio:16 / 9}
.gal figcaption{margin-top:8px;font-size:14px;color:var(--muted)}

/* ── installed work ────────────────────────────────────────
   Site photographs, two up so they read as evidence rather than
   thumbnails. These crop to fill: the framing varies from portrait
   to 16:9 and context matters more here than exact proportions,
   so each image carries its own focal point in --pos. */
.inst{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:24px}
.inst figure{margin:0}
.inst .well{aspect-ratio:16 / 9}
.inst .well__img{object-fit:cover;object-position:var(--pos,center)}
.inst>figure>figcaption{margin-top:8px;font-size:14px;line-height:1.45;color:var(--muted)}

/* ── product cards ─────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
/* a group with one or two patterns should not leave two thirds of the
   row empty; the filter sets this on the fly as well */
/* the container carries the Line colour as its own background, so it has
   to shrink with the column or it leaves an empty block beside the card */
.cards[data-count="1"]{grid-template-columns:minmax(0,380px);width:min(382px,100%)}
.cards[data-count="2"]{grid-template-columns:repeat(2,1fr)}
.card{background:var(--putty);display:flex;flex-direction:column;padding:0}
.card__well{border:0;border-bottom:1px solid var(--line)}
.card__b{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.card__n{font-size:22px}
.card__spec{margin-top:8px;font-size:14px;line-height:1.55;color:var(--muted)}
.card__spec b{font-weight:600;color:var(--iron)}
.card__lnk{margin-top:14px;align-self:start;
  font:600 17px/1.2 var(--sans);color:var(--oxide);
  text-decoration:underline;text-underline-offset:3px}
.card__lnk:hover{text-decoration-thickness:2px}
.card__lnk{margin-top:14px;align-self:start;
  font:600 17px/1.2 var(--sans);color:var(--oxide);
  text-decoration:underline;text-underline-offset:3px}
.card__lnk:hover{text-decoration-thickness:2px}

/* ── filter (home page only) ───────────────────────────── */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.filter button{
  padding:9px 16px;border:1px solid var(--line);border-radius:2px;
  background:transparent;font:400 15px/1.2 var(--sans);cursor:pointer;
}
.filter button:hover{border-color:var(--iron)}
.filter button[aria-pressed="true"]{
  border-color:var(--oxide);box-shadow:inset 0 -2px 0 var(--oxide);
  color:var(--iron);font-weight:600}

/* ── dimension table ───────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;font-size:15px;border:1px solid var(--line)}
.tbl caption{text-align:left;padding-bottom:10px;font-size:14px;color:var(--muted)}
.tbl th,.tbl td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:nth-child(odd){background:var(--panel)}
.tbl th{font-weight:400;color:var(--muted);width:44%}
.tbl td{font-weight:600}

/* ── accordion — one of only two moving things here ────── */
.acc{border-top:1px solid var(--line)}
.acc__i{border-bottom:1px solid var(--line)}
.acc__b{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;padding:18px 0;background:transparent;border:0;cursor:pointer;
  font:600 22px/1.25 var(--slab);letter-spacing:-.015em;text-align:left;
}
.acc__s{flex:none;width:14px;height:14px;position:relative}
.acc__s::before,.acc__s::after{content:"";position:absolute;background:var(--oxide)}
.acc__s::before{top:6px;left:0;right:0;height:1.5px}
.acc__s::after{left:6px;top:0;bottom:0;width:1.5px;transition:transform 160ms ease}
.acc__b[aria-expanded="true"] .acc__s::after{transform:scaleY(0)}
.acc__p{height:0;overflow:hidden;transition:height 200ms ease}
.acc__p p{padding-bottom:20px;max-width:70ch;color:var(--muted)}

/* ── colour row ────────────────────────────────────────── */
.cols{display:flex;flex-wrap:wrap;gap:20px;margin-top:16px}
.col{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted)}
.col__s{width:20px;height:20px;border:1px solid var(--line);background:var(--sw)}

/* ── two-column detail layout ──────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.split--wide{grid-template-columns:1.15fr .85fr}
.crumb{font-size:14px;color:var(--muted);margin-bottom:14px}
.crumb a{text-decoration:underline;text-underline-offset:3px}
.crumb span{padding-inline:6px}

/* ── forms ─────────────────────────────────────────────── */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;align-items:start}
.f{display:flex;flex-direction:column;gap:6px}
.f--wide{grid-column:1 / -1}
.f label{font-size:14px;font-weight:600;color:var(--muted)}
.f input,.f textarea,.f select{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:2px;
  background:var(--putty);color:var(--iron);font:400 17px/1.5 var(--sans);
}
.f input:focus,.f textarea:focus,.f select:focus{
  outline:2px solid var(--oxide);outline-offset:0;border-color:var(--oxide)}
.f textarea{resize:vertical;min-height:110px}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.note{font-size:15px;color:var(--muted)}
.note[data-state="ok"]{color:var(--oxide);font-weight:600;font-size:17px}
.note[data-state="error"]{color:var(--oxide);font-weight:600;font-size:17px}

/* ── contact block ─────────────────────────────────────── */
.cont{margin-top:24px;display:grid;gap:12px;font-size:17px}
.cont div{display:flex;gap:14px}
.cont dt{flex:none;width:88px;font-size:14px;color:var(--muted);padding-top:3px}
.cont dd{margin:0}

/* ── panel block ───────────────────────────────────────── */
.pan{background:var(--panel);border:1px solid var(--line);padding:24px}
.pan h3{margin-bottom:8px}
.pan p{font-size:15px;color:var(--muted);max-width:60ch}

/* ── fixed call bar, phones only ───────────────────────────
   Two taps that matter on a phone, always reachable. Separated by
   the 1px Line like everything else — no shadow, no float. */
.callbar{display:none}

/* ── footer ────────────────────────────────────────────── */
.foot{background:var(--iron);color:var(--putty);padding-block:44px;margin-top:0}
.foot__in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot h4{font-size:17px;font-family:var(--slab);font-weight:600;margin-bottom:12px}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline;text-underline-offset:3px}
.foot li{margin-bottom:8px;font-size:15px;color:var(--line)}
.foot__p{font-size:15px;line-height:1.6;color:var(--line);max-width:44ch}
.foot__end{margin-top:36px;padding-top:20px;border-top:1px solid var(--muted);
  font-size:14px;color:var(--line);display:flex;flex-wrap:wrap;gap:8px 24px}

/* ── responsive, down to 360px ─────────────────────────── */
@media (max-width:900px){
  :root{--sect:44px}
  h1{font-size:30px}
  h2{font-size:22px}
  .hero__in,.split,.split--wide{grid-template-columns:1fr;gap:28px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(2,1fr)}
  .foot__in{grid-template-columns:1fr 1fr}
  .form{grid-template-columns:1fr}

  /* the four links collapse behind a button; opening it is one of
     only two animations on the site */
  .burger{display:inline-flex}
  .bar__in{flex-wrap:wrap}
  .menu{
    order:3;flex-basis:100%;display:block;
    max-height:0;overflow:hidden;transition:max-height 220ms ease;
  }
  .bar.is-open .menu{max-height:340px}
  .menu__in{display:flex;flex-direction:column;align-items:stretch;gap:0;padding-block:8px 14px}
  .menu a{padding:11px 0;border-bottom:1px solid var(--muted)}
  .menu a[aria-current="page"]{border-bottom-color:var(--oxide)}
}
@media (max-width:620px){
  /* 44px minimum on anything you tap. The defaults sat at 35-42px, which
     is a miss on a phone. */
  .btn{padding:14px 20px}
  .burger{padding:14px 14px}
  .menu a{padding:14px 0}
  .filter button{padding:13px 16px}
  /* "Ask the price" is a standalone control and gets the full 44px.
     The two links inside the order sentence stay as inline prose links:
     padding them to 44px would make their hit areas overlap when the
     sentence wraps, and the fixed bar at the bottom of the screen already
     carries a full-size Call and WhatsApp at all times. */
  .card__lnk{display:inline-block;padding-block:12px;margin-top:6px}
  .cont dd a{display:inline-block;padding-block:9px}
  .foot li{margin-bottom:0}
  .foot li a{display:inline-block;padding-block:14px}
  .crumb a{display:inline-block;padding-block:13px}

  /* one header row: the fixed bar at the bottom already keeps WhatsApp and
     Call one tap away, so repeating the button here only costs 50px of a
     screen that has none to spare */
  .bar .btn--onbar{display:none}
  /* wrap stays on: the collapsed menu is flex-basis:100% and needs its own
     row to open into. With the quote button hidden, the mark and the menu
     button fit the first row on their own. */
  .bar__in{flex-wrap:wrap;padding-block:8px;gap:12px}
  /* the mark must not shrink, or min-width:0 lets it wrap onto two lines
     and collide with the menu button */
  .logo{flex-basis:auto;flex-shrink:0;margin-right:auto;padding-block:12px}
  .logo__n{font-size:19px;white-space:nowrap}
  .burger{margin-right:0;flex:none}

  /* a real photograph sets its own height rather than being letterboxed
     inside a 4:3 well — vertical space is the scarce thing on a phone.
     Installed work keeps its crop, since those vary from portrait to 16:9. */
  .hero__in .well.has-photo,.card__well.has-photo,.gal .well.has-photo{aspect-ratio:auto}
  .hero__in .well.has-photo .well__img,
  .card__well.has-photo .well__img,
  .gal .well.has-photo .well__img{height:auto}

  .callbar{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--line);border-top:1px solid var(--line);
  }
  .callbar a{
    display:flex;align-items:center;justify-content:center;
    padding:15px 12px calc(15px + env(safe-area-inset-bottom,0px));
    font:600 15px/1 var(--sans);text-decoration:none;
  }
  .callbar__call{background:var(--putty);color:var(--iron)}
  .callbar__wa{background:var(--oxide);color:var(--putty)}
  /* keep the fixed bar off the last of the footer */
  .foot{padding-bottom:calc(44px + 52px + env(safe-area-inset-bottom,0px))}
  .bar__tel{display:none}

  .cards{grid-template-columns:1fr}
  .gal,.inst{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr}
}
@media (max-width:400px){
  :root{--gut:16px}
  h1{font-size:26px}
  .logo__s{display:none}
  .hero__acts .btn{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
}