/* Brick Maker — public website. Same brand as the system: navy + Brick Maker blue, Cairo / Montserrat.
   The idea: a manufacturer's catalogue — every product shown as a technical drawing on a concrete-grey sheet, no prices. */
:root{
  --navy:#032759; --blue:#0b4d8e; --blue-2:#083a6c; --ink:#0e1b2c; --graphite:#4f5b6b; --muted:#6b7686;
  --concrete:#dde2e7; --slab:#eef1f4; --paper:#ffffff; --line:#cfd6de; --signal:#e39a12;
  --r:10px; --wrap:1180px; --gut:clamp(16px,4vw,32px);
  --font:"Cairo","Montserrat",system-ui,sans-serif;
}
*{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(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.75}
html[lang=en] body{font-family:"Montserrat","Cairo",system-ui,sans-serif;font-size:16px;line-height:1.65}
img,svg{max-width:100%;display:block}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;inset-inline-start:-999px;top:8px;background:var(--navy);color:#fff;padding:8px 14px;border-radius:8px;z-index:50}.skip:focus{inset-inline-start:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h1,h2,h3{line-height:1.3;margin:0 0 .5em;color:var(--navy);font-weight:800}
h1{font-size:clamp(1.9rem,4.4vw,3.1rem);letter-spacing:-.01em}
h2{font-size:clamp(1.4rem,2.6vw,1.9rem)}
h3{font-size:1.1rem}
p{margin:0 0 1em}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--r);background:var(--blue);color:#fff;font:inherit;font-weight:700;text-decoration:none;border:2px solid var(--blue);cursor:pointer;transition:background .15s,border-color .15s}
.btn:hover{background:var(--blue-2);border-color:var(--blue-2)}
.btn.ghost{background:transparent;color:var(--blue)}.btn.ghost:hover{background:var(--slab)}
.btn.sm{min-height:40px;padding:0 16px;font-size:.95em}
.btn.wa{background:#1f8f4e;border-color:#1f8f4e;width:100%}.btn.wa:hover{background:#17733e;border-color:#17733e}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(6px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.logo img{height:46px;width:auto}
.nav{display:flex;align-items:center;gap:6px}
.nav a{padding:8px 12px;border-radius:8px;color:var(--ink);text-decoration:none;font-weight:600}
.nav a:hover{background:var(--slab)}
.nav a[aria-current=page]:not(.btn){color:var(--blue);box-shadow:inset 0 -3px 0 var(--blue);border-radius:0}
.nav .btn{color:#fff;margin-inline-start:6px}.nav .btn:hover{background:var(--blue-2)}
.nav .lng{font-weight:700;color:var(--graphite)}
.menu-b{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;position:relative}
.menu-b span:first-child,.menu-b span:first-child::before,.menu-b span:first-child::after{position:absolute;left:11px;right:11px;height:2px;background:var(--navy);content:"";border-radius:2px;transition:transform .2s}
.menu-b span:first-child{top:21px}.menu-b span:first-child::before{top:-7px;left:0;right:0}.menu-b span:first-child::after{top:7px;left:0;right:0}
.menu-b[aria-expanded=true] span:first-child{background:transparent}.menu-b[aria-expanded=true] span:first-child::before{transform:translateY(7px) rotate(45deg)}.menu-b[aria-expanded=true] span:first-child::after{transform:translateY(-7px) rotate(-45deg)}
@media (max-width:860px){
  .menu-b{display:block}
  .nav{display:none;position:absolute;top:100%;inset-inline:0;flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--line);padding:10px var(--gut) 16px;box-shadow:0 12px 24px rgba(3,39,89,.08)}
  .nav.open{display:flex}.nav a{padding:12px}.nav .btn{margin:6px 0 0}
  .nav a[aria-current=page]:not(.btn){box-shadow:inset -3px 0 0 var(--blue)}html[dir=ltr] .nav a[aria-current=page]:not(.btn){box-shadow:inset 3px 0 0 var(--blue)}
}

/* hero: the paver field is the one moment of motion on the page */
.hero{background:var(--navy);color:#fff;overflow:hidden}
.hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding-top:clamp(40px,7vw,88px);padding-bottom:clamp(40px,7vw,88px)}
.hero h1{color:#fff;max-width:18ch}
.hero p{color:#c9d6e6;font-size:1.08em;max-width:52ch}
.hero .btn{background:#fff;color:var(--navy);border-color:#fff}.hero .btn:hover{background:var(--concrete);border-color:var(--concrete)}
.hero .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}.hero .btn.ghost:hover{background:rgba(255,255,255,.08)}
.hero-v{border-radius:14px;overflow:hidden;aspect-ratio:14/9;background:#0a2f62;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hero-v svg{width:100%;height:100%}
.pv{stroke:rgba(3,39,89,.35);stroke-width:1}
.pv.t0{fill:#c9cfd6}.pv.t1{fill:#b7bec7}.pv.t2{fill:#d6dbe0}.pv.t3{fill:#aeb6c0}.pv.b{fill:#2f74c0}
@media (prefers-reduced-motion:no-preference){
  .pv{animation:lay .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 55ms + 150ms)}
  @keyframes lay{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
}
@media (max-width:860px){.hero-in{grid-template-columns:1fr}.hero-v{aspect-ratio:16/8}}

/* sections */
section{padding:clamp(44px,6vw,80px) 0}
.ph{padding:clamp(32px,5vw,56px) 0 20px;background:var(--slab);border-bottom:1px solid var(--line)}
.ph p{color:var(--graphite);max-width:62ch}
.ph.done{text-align:center}.ph.done p{margin-inline:auto}.ph.done .btns{justify-content:center}

/* categories: four sheets, each with its drawing */
.cat-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.cat{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:var(--slab);border:1px solid var(--line);border-radius:12px;padding:18px;transition:border-color .15s}
.cat:hover{border-color:var(--blue)}
.cat-fig{color:var(--navy);background:var(--paper);border:1px solid var(--line);border-radius:8px;margin-bottom:14px;padding:6px;background-image:linear-gradient(var(--slab) 1px,transparent 1px),linear-gradient(90deg,var(--slab) 1px,transparent 1px);background-size:16px 16px}
.cat p{color:var(--graphite);font-size:.93em;flex:1}
.cat-n{font-weight:700;color:var(--blue);font-size:.9em}
@media (max-width:980px){.cat-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.cat-g{grid-template-columns:1fr}}

/* the drawings */
.dwg{width:100%;height:auto}
.dwg .f1{fill:#fff}.dwg .f2{fill:#e8ecf0}.dwg .f3{fill:#d3dae1}.dwg .hole{fill:#7d8896;stroke-width:1}
.dwg .gr{stroke-dasharray:4 4;opacity:.5}
.dwg .dm line{stroke:var(--signal);stroke-width:1.2}
.dwg .dm text{fill:var(--graphite);stroke:none;font:600 13px "Montserrat",sans-serif}

/* why */
.why{background:var(--navy);color:#fff}
.why h2{color:#fff}
.why-l{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:24px 0 0}
.why-l>div{padding:6px 22px;border-inline-start:3px solid #2f74c0}
.why-l dt{font-weight:800;font-size:1.25em;margin-bottom:4px}
.why-l dd{margin:0;color:#c9d6e6;font-size:.95em}
@media (max-width:860px){.why-l{grid-template-columns:1fr 1fr;gap:22px 0}}
@media (max-width:480px){.why-l{grid-template-columns:1fr}}

/* how to order: a real sequence, so it's numbered */
.steps ol{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:22px;border:1px solid var(--line);border-radius:12px}
.steps li::before{content:counter(s);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;font:800 1rem "Montserrat",sans-serif;margin-bottom:12px}
.steps p{color:var(--graphite);margin:0}
@media (max-width:760px){.steps ol{grid-template-columns:1fr}}

.cta{background:var(--slab);border-top:1px solid var(--line)}
.cta-in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cta p{font-size:clamp(1.15rem,2.2vw,1.45rem);font-weight:800;color:var(--navy);margin:0;max-width:34ch}
.cta .btns{margin:0}

/* product list */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tabs a{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;font-weight:600;font-size:.93em}
.tabs a[aria-current=page]{background:var(--navy);border-color:var(--navy);color:#fff}
.pl-h{margin:36px 0 14px}.pl-h:first-child{margin-top:0}.pl-h a{color:var(--navy);text-decoration:none}.pl-h a:hover{text-decoration:underline}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.pc{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--ink);background:#fff;transition:border-color .15s}
.pc:hover{border-color:var(--blue)}
.pc-fig{color:var(--navy);background:var(--slab);padding:10px;border-bottom:1px solid var(--line);aspect-ratio:5/4;display:grid;place-items:center}
.pc-fig.has-img{padding:0}.pc-fig img{width:100%;height:100%;object-fit:cover}
.pc-b{padding:14px 16px 16px}
.pc-b h3{margin:0 0 4px}
.pc-size{font:700 .92rem "Montserrat",sans-serif;color:var(--blue);margin:0 0 6px}
.pc-sum{color:var(--graphite);font-size:.92em;margin:0}

/* product page */
.crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:.92em;margin-bottom:18px;color:var(--muted)}
.crumbs a{color:var(--graphite)}
.pd{padding-top:28px}
.pd-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:start}
.sheet{margin:0;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;background-image:linear-gradient(var(--slab) 1px,transparent 1px),linear-gradient(90deg,var(--slab) 1px,transparent 1px);background-size:20px 20px;position:sticky;top:92px}
.sheet figcaption{font-size:.82em;color:var(--muted);border-top:1px dashed var(--line);padding-top:8px;margin-top:6px}
.pd-imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.pd-imgs img{aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.lead{font-size:1.12em;color:var(--ink)}
.pd-t h2{font-size:1.2rem;margin-top:26px}
.spec{width:100%;border-collapse:collapse;font-size:.96em;table-layout:fixed;overflow-wrap:anywhere}
.spec th,.spec td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
.spec th{width:38%;color:var(--graphite);font-weight:700;background:var(--slab)}
.uses{padding-inline-start:20px;columns:2;column-gap:28px;margin:0}
.uses li{break-inside:avoid;margin-bottom:4px}
.rel{background:var(--slab);border-top:1px solid var(--line)}
@media (max-width:860px){.pd-g{grid-template-columns:1fr}.sheet{position:static}.uses{columns:1}}

/* forms: one card, two numbered steps (products → your details), the contact details beside it */
.form-s{padding-top:32px}
.form-g{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(20px,3vw,36px);align-items:start}
.fcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(18px,3vw,30px);box-shadow:0 1px 2px rgba(3,39,89,.05)}
.wform{display:grid;gap:0}
.fsec{display:grid;gap:14px;padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.fh{display:flex;align-items:center;gap:10px;font-size:1.15rem;margin:0 0 2px}
.fn{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font:800 .9rem "Montserrat",sans-serif;flex:none}
.wform label{display:grid;gap:6px;font-weight:700;color:var(--ink);font-size:.92em}
.wform input,.wform select,.wform textarea{font:inherit;font-size:1rem;font-weight:500;color:var(--ink);background:#fff;border:1px solid #b9c3ce;border-radius:9px;padding:0 12px;height:48px;width:100%;transition:border-color .15s}
.wform textarea{height:auto;padding:10px 12px;resize:vertical;min-height:96px}
.wform select{padding-inline-end:8px;cursor:pointer}
.wform input::placeholder,.wform textarea::placeholder{color:#97a2af}
.wform input:hover,.wform select:hover,.wform textarea:hover{border-color:#8d99a7}
.wform input:focus,.wform select:focus,.wform textarea:focus{border-color:var(--blue);outline:3px solid rgba(11,77,142,.16);outline-offset:0}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
/* product rows: same columns for the header and every row, so everything lines up */
.qhead,.qrow{display:grid;grid-template-columns:minmax(0,1fr) 170px 48px;gap:10px;align-items:center}
.qhead{font-weight:700;font-size:.92em;color:var(--ink);margin-bottom:-6px}
.qrows{display:grid;gap:10px}
.qq{position:relative}
.qq input{padding-inline-end:84px}
.qu{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);font-size:.82em;color:var(--muted);pointer-events:none;max-width:76px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qx{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--muted);cursor:pointer}
.qx:hover{border-color:#c0392b;color:#c0392b;background:#fdf1f0}
.qx[hidden]{display:grid;visibility:hidden}
.qadd{justify-self:start;background:none;border:1px dashed #9fb3c8;color:var(--blue);font:inherit;font-weight:700;font-size:.95em;border-radius:9px;padding:9px 16px;cursor:pointer}
.qadd:hover{background:var(--slab);border-style:solid}
.fsend{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.fsend .btn{min-width:200px;min-height:52px;font-size:1.05em}
.fsend p{margin:0;color:var(--muted);font-size:.9em}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ferr{border:1px solid #e5a8a3;background:#fdf1f0;color:#8e2219;border-radius:10px;padding:10px 16px;margin-bottom:20px}.ferr ul{margin:0;padding-inline-start:18px}
/* contact card */
.cbox{background:var(--navy);color:#dbe5f1;border-radius:14px;padding:22px;position:sticky;top:92px}
.cbox h2{color:#fff;font-size:1.1rem;margin-bottom:14px}
.clist{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:14px}
.clist li{display:flex;gap:12px;align-items:flex-start}
.ci{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.1);color:#fff}
.clist div{display:grid;gap:1px;font-size:.93em;min-width:0}
.clist small{color:#93a6be;font-size:.8em;font-weight:600}
.clist a{color:#fff;text-decoration:none;overflow-wrap:anywhere}.clist a:hover{text-decoration:underline}
.clist div a+span,.clist div span+a{margin-top:2px}
.cbox .btn.wa{width:100%}
@media (max-width:960px){.form-g{grid-template-columns:1fr}.cbox{position:static}}
@media (max-width:560px){.f2{grid-template-columns:1fr}.qhead{display:none}.qhead,.qrow{grid-template-columns:minmax(0,1fr) 48px}.qrow select{grid-column:1/-1}.qq{grid-column:1}.fsend .btn{width:100%}}

/* about */
.about-g{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center}
.prose{max-width:62ch}
.about-v{color:var(--navy);background:var(--slab);border:1px solid var(--line);border-radius:12px;padding:16px}
@media (max-width:860px){.about-g{grid-template-columns:1fr}}

/* footer */
.foot{background:var(--navy);color:#c9d6e6;padding:48px 0 18px;font-size:.95em}
.foot-g{display:grid;grid-template-columns:1.3fr 1fr 1.2fr 1fr;gap:28px}
.foot img{height:44px;width:auto;margin-bottom:12px}
.foot h2{color:#fff;font-size:1rem;margin-bottom:10px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot a{color:#fff;text-decoration:none}.foot a:hover{text-decoration:underline}
.copy{border-top:1px solid rgba(255,255,255,.14);margin-top:32px;padding-top:16px;font-size:.88em;color:#93a6be}
@media (max-width:860px){.foot-g{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot-g{grid-template-columns:1fr}}

.wa-f{position:fixed;bottom:18px;inset-inline-end:18px;z-index:30;width:56px;height:56px;border-radius:50%;background:#1f8f4e;color:#fff;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.wa-f:hover{background:#17733e}
@media print{.top,.foot,.wa-f,.btns,.cta{display:none}}