/* Taj Enterprise: styles shared by every page (header, footer, buttons, product cards, quote list, compare, forms).
   Homepage sections are in home.css. Colours come from the Taj logo: deep emerald and copper on warm paper. */
@font-face{font-family:'Serif Fallback';src:local('Georgia'),local('Times New Roman');size-adjust:90%;}
:root{
  --paper:#FBF9F3; --paper-2:#F1E9D8; --white:#FFFFFF;
  --ink:#16241C; --ink-2:#1E3327;
  --text:#1E2B22; --text-dim:#46564A; --muted:#566A5B;
  --cream:#F6F1E4; --cream-dim:#D8D2BE; --muted-dark:#A9B8AD;
  --emerald:#2E7D52; --emerald-text:#1F5B3B; --emerald-light:#7FC4A0;
  --copper:#C1652F; --copper-text:#9C4A1E; --copper-light:#E2985F;
  --line:rgba(30,43,34,0.14); --line-strong:rgba(30,43,34,0.28); --line-dark:rgba(246,241,228,0.16);
  --whatsapp:#3BA55C;
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --f-head:'Marcellus','Serif Fallback',Georgia,serif;
  --f-body:'EB Garamond','Serif Fallback',Georgia,serif;
  --f-ui:'Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;
  --header-h:70px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%;scroll-padding-top:calc(var(--header-h) + 12px);}
body{background:var(--paper);color:var(--text);font-family:var(--f-body);font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100%;}
h1,h2,h3{font-family:var(--f-head);font-weight:400;line-height:1.15;color:var(--text);letter-spacing:0.01em;text-wrap:balance;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button,input,select,textarea{font:inherit;color:inherit;}
[hidden]{display:none !important;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
.label{font-family:var(--f-ui);font-weight:600;text-transform:uppercase;letter-spacing:0.12em;font-size:13px;color:var(--copper-text);}
.vh{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip{position:absolute;left:12px;top:-60px;z-index:400;background:var(--ink);color:var(--cream);padding:12px 18px;border-radius:var(--r-sm);font-family:var(--f-ui);}
.skip:focus{top:12px;}
:focus-visible{outline:2px solid var(--emerald);outline-offset:2px;}

/* Bangla: one family for everything, a little larger */
body.lang-bn{--f-ui:'Hind Siliguri','Nirmala UI','Noto Sans Bengali',Vrinda,sans-serif;font-family:var(--f-ui);font-size:17px;}
body.lang-bn h1,body.lang-bn h2,body.lang-bn h3{font-family:var(--f-ui);font-weight:700;letter-spacing:0;}
body.lang-bn .label{text-transform:none;letter-spacing:0.02em;font-size:14px;}
html[lang="en"] [lang="bn"]{font-family:'Nirmala UI','Noto Sans Bengali',Vrinda,'Shonar Bangla',sans-serif;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f-ui);font-weight:600;font-size:15px;letter-spacing:0.04em;padding:14px 26px;min-height:48px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;transition:background .2s,border-color .2s,color .2s;text-align:center;line-height:1.2;}
.btn-primary{background:var(--copper-text);color:#fff;}
.btn-primary:hover{background:#823C16;}
.btn-green{background:var(--emerald);color:#fff;}
.btn-green:hover{background:var(--emerald-text);}
.btn-ghost{border-color:var(--line-strong);color:var(--text);background:transparent;}
.btn-ghost:hover{border-color:var(--emerald);color:var(--emerald-text);}
.btn-light{border-color:var(--line-dark);color:var(--cream);background:transparent;}
.btn-light:hover{border-color:var(--emerald-light);color:var(--emerald-light);}
.btn-block{width:100%;}
.btn:disabled{opacity:0.55;cursor:default;}
.link-arrow{display:inline-flex;align-items:center;min-height:44px;font-family:var(--f-ui);font-weight:600;font-size:15px;color:var(--emerald-text);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;}
.link-arrow:hover{color:var(--copper-text);}

/* ---------- Top bar and header ---------- */
.topbar{background:var(--ink);border-bottom:1px solid var(--line-dark);font-family:var(--f-ui);font-size:14px;color:var(--muted-dark);}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:8px 20px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px;}
.tb-left{display:flex;gap:6px 22px;flex-wrap:wrap;}
.tb-right{display:flex;gap:6px 18px;flex-wrap:wrap;}
.topbar a{color:var(--cream-dim);display:inline-flex;align-items:center;min-height:32px;}
.topbar a:hover{color:var(--emerald-light);}
.site-header{position:sticky;top:0;z-index:100;background:rgba(22,36,28,0.97);border-bottom:1px solid var(--line-dark);}
@supports (backdrop-filter:blur(8px)){.site-header{background:rgba(22,36,28,0.92);backdrop-filter:blur(8px);}}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--header-h);}
.logo-brand{display:flex;align-items:center;gap:12px;white-space:nowrap;min-height:44px;}
.logo-brand img{width:46px;height:auto;flex-shrink:0;}
.logo-text{font-family:var(--f-head);font-size:20px;line-height:1.1;color:var(--cream);letter-spacing:0.02em;}
.logo-text small{display:block;font-family:var(--f-ui);font-size:12px;font-weight:500;letter-spacing:0.1em;color:var(--emerald-light);margin-top:3px;}
body.lang-bn .logo-text small{letter-spacing:0.01em;}
.navlinks{display:flex;gap:4px 22px;font-family:var(--f-ui);font-weight:500;font-size:15px;}
.navlinks a{color:var(--cream-dim);padding:10px 0;transition:color .2s;}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--emerald-light);}
.nav-right{display:flex;align-items:center;gap:10px;}
.lang-toggle{display:flex;border:1px solid var(--line-dark);border-radius:var(--r-sm);overflow:hidden;flex-shrink:0;}
.lang-toggle a,.lang-toggle button{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:40px;padding:0 10px;background:none;border:none;color:var(--cream-dim);font-family:var(--f-ui);font-size:14px;font-weight:600;cursor:pointer;}
.lang-toggle .bn{font-family:'Nirmala UI','Noto Sans Bengali','Vrinda','Shonar Bangla',sans-serif;font-weight:600;}
.lang-toggle [aria-current="true"],.lang-toggle .active{background:var(--copper-light);color:var(--ink);}
.navcta{display:inline-flex;align-items:center;min-height:44px;font-family:var(--f-ui);font-weight:600;font-size:14px;letter-spacing:0.04em;border:1px solid var(--copper-light);color:var(--copper-light);padding:0 16px;border-radius:var(--r-sm);white-space:nowrap;transition:all .2s;}
.navcta:hover{background:var(--copper-light);color:var(--ink);}
.nav-call{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line-dark);border-radius:var(--r-sm);color:var(--cream);}
.nav-call:hover{border-color:var(--emerald-light);color:var(--emerald-light);}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:1px solid var(--line-dark);border-radius:var(--r-sm);cursor:pointer;flex-shrink:0;}
.hamburger span{display:block;width:18px;height:2px;background:var(--cream);margin:0 auto;transition:transform .25s,opacity .25s;}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
/* Quote list count in the header (common.js): a list button with the number on phones and tablets, a number on
   "Get a Quote" on computers. Shown once the list has something in it; the number bounces when an item is added. */
.nav-ql{display:none;position:relative;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line-dark);border-radius:var(--r-sm);color:var(--cream);flex-shrink:0;}
.nav-ql:hover{border-color:var(--emerald-light);color:var(--emerald-light);}
.ql-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--copper-light);color:var(--ink);font-family:var(--f-ui);font-size:12px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;}
.nav-ql .ql-n{position:absolute;top:-8px;right:-8px;box-shadow:0 0 0 2px var(--ink);}
.navlinks .ql-n{margin-left:6px;vertical-align:1px;}
.ql-n.bump{animation:ql-bump .55s ease;}
@keyframes ql-bump{0%{transform:scale(1);}30%{transform:scale(1.45);}55%{transform:scale(0.9);}80%{transform:scale(1.08);}100%{transform:scale(1);}}
.mobile-menu{display:none;background:var(--ink);border-top:1px solid var(--line-dark);max-height:calc(100vh - var(--header-h));overflow-y:auto;}
.mobile-menu.open{display:block;}
.mobile-menu .wrap{display:flex;flex-direction:column;padding-top:6px;padding-bottom:16px;}
.mobile-menu a{font-family:var(--f-ui);font-size:17px;font-weight:500;color:var(--cream-dim);padding:13px 0;border-bottom:1px solid var(--line-dark);}
.mobile-menu a:last-child{border-bottom:none;}
.mobile-menu a:hover{color:var(--emerald-light);}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:var(--muted-dark);border-top:1px solid var(--line-dark);padding:56px 0 40px;font-family:var(--f-ui);font-size:15px;line-height:1.6;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;}
.foot-grid h2{font-family:var(--f-ui);font-size:14px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--copper-light);margin-bottom:10px;}
body.lang-bn .foot-grid h2{text-transform:none;letter-spacing:0.02em;}
.foot-grid ul{list-style:none;}
.foot-grid li a{display:inline-block;padding:7px 0;color:var(--cream-dim);}
.foot-grid a:hover{color:var(--emerald-light);}
.foot-brand .logo-text{font-size:19px;}
.foot-brand p{margin-top:14px;}
.foot-brand a{color:var(--cream-dim);display:inline-block;padding:6px 0;}
.foot-copy{margin-top:36px;padding-top:20px;border-top:1px solid var(--line-dark);font-size:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}

/* ---------- Floating buttons ---------- */
.wa-float{position:fixed;bottom:20px;right:20px;z-index:90;background:var(--whatsapp);width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,0.28);transition:transform .2s,opacity .2s;}
.wa-float:hover{transform:scale(1.06);}
.wa-float.wa-away{opacity:0;visibility:hidden;transform:scale(0.6);transition:opacity .2s,transform .2s,visibility 0s .2s;}   /* product pages on phones (pages.js) */
.ql-pill{position:fixed;left:20px;bottom:20px;z-index:90;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:24px;background:var(--ink);color:var(--cream);font-family:var(--f-ui);font-weight:600;font-size:15px;box-shadow:0 6px 20px rgba(0,0,0,0.25);border:1px solid var(--copper-light);}
.ql-pill:hover{background:var(--ink-2);}
.ql-pill b{background:var(--copper-light);color:var(--ink);border-radius:12px;padding:0 8px;font-variant-numeric:tabular-nums;}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:300;background:var(--ink);color:var(--cream);font-family:var(--f-ui);font-size:15px;padding:12px 16px;border-radius:var(--r-md);box-shadow:0 10px 30px rgba(0,0,0,0.3);display:flex;gap:14px;align-items:center;max-width:calc(100vw - 32px);}
.toast a{color:var(--copper-light);font-weight:600;text-decoration:underline;padding:6px 0;}

/* ---------- Product card: the whole card opens the product page ---------- */
.pc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
.pc{position:relative;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s;}
.pc:hover{border-color:var(--emerald);box-shadow:0 6px 18px rgba(22,36,28,0.10);}
/* Square box: most product photos are square; taller or wider photos shrink to fit instead of stretching the card */
.pc-ph{aspect-ratio:1/1;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;padding:10px;border-bottom:1px solid var(--line);}
.pc-ph picture{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.pc-ph img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .3s ease;}
/* Cards rise a little under the mouse, and while a finger presses them (not while a button inside is pressed) */
@media (hover:hover) and (pointer:fine){
  .pc:hover,.mc:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(22,36,28,0.16);}
  .pc:hover .pc-ph img,.mc:hover .mc-ph img{transform:scale(1.06);}
}
@media (hover:none){
  .mc:active{transform:translateY(-3px);border-color:var(--emerald);box-shadow:0 12px 26px rgba(22,36,28,0.16);}
  .pc:active:not(:has(.pc-actions:active,.pc-var:active,.pc-cmp:active)){transform:translateY(-3px);border-color:var(--emerald);box-shadow:0 12px 26px rgba(22,36,28,0.16);}
}
.pc-body{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px;flex:1;background:var(--paper);}
.pc-brand{font-family:var(--f-ui);font-size:13px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--copper-text);}
.pc-name{font-family:var(--f-head);font-size:17px;line-height:1.3;color:var(--text);}
body.lang-bn .pc-name{font-family:var(--f-ui);font-weight:600;font-size:16px;}
.pc-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r-md);}
.pc-link:focus-visible{outline:none;}
.pc-link:focus-visible::after{outline:2px solid var(--emerald);outline-offset:-2px;}
.pc-meta{font-family:var(--f-ui);font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:0 8px;font-variant-numeric:tabular-nums;}
.pc-meta .pc-code{letter-spacing:0.02em;}
.pc-meta .pc-spec{color:var(--text-dim);font-weight:600;}
.pc-cap{font-family:var(--f-ui);font-size:12.5px;color:var(--muted);}
.pc-var,.pc-actions,.pc-cmp{position:relative;z-index:2;}
.pc-var{width:100%;min-height:40px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--white);font-family:var(--f-ui);font-size:14px;padding:6px 8px;cursor:pointer;}
.pc-grow{flex:1;}
.pc-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px;}
.pc-actions a,.pc-actions button{display:flex;align-items:center;justify-content:center;min-height:42px;border-radius:var(--r-sm);font-family:var(--f-ui);font-size:14px;font-weight:600;cursor:pointer;text-align:center;line-height:1.15;padding:4px 6px;}
.pc-buy{background:var(--emerald);color:#fff;border:1px solid var(--emerald);}
.pc-buy:hover{background:var(--emerald-text);}
.pc-add{background:var(--white);border:1px solid var(--line-strong);color:var(--text);}
.pc-add:hover,.pc-add.on{border-color:var(--emerald);color:var(--emerald-text);}
.pc-cmp{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:36px;font-family:var(--f-ui);font-size:14px;color:var(--text-dim);cursor:pointer;}
.pc-cmp input{width:18px;height:18px;accent-color:var(--emerald);}
.pc-onreq{border-style:dashed;border-color:var(--copper-text);}
.pc-onreq .pc-body{background:var(--paper-2);}
.pc-onreq .pc-actions{grid-template-columns:1fr;}
.pc-onreq p{font-size:15px;color:var(--text-dim);line-height:1.5;}

/* ---------- Chips ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px;border-radius:20px;border:1px solid var(--line-strong);background:var(--white);color:var(--text);font-family:var(--f-ui);font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;}
.chip:hover{border-color:var(--emerald);}
.chip.on{background:var(--emerald);border-color:var(--emerald);color:#fff;}
.chip .n{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:400;}
.chip.on .n{color:#fff;}

/* ---------- Forms (quote list, finder) ---------- */
.field{display:grid;gap:6px;margin-bottom:16px;}
.field label,.field .flabel{font-family:var(--f-ui);font-size:14px;font-weight:600;color:var(--text);}
.field input,.field textarea,.field select{width:100%;background:var(--white);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:12px 14px;font-family:var(--f-ui);font-size:16px;color:var(--text);min-height:48px;}
.field textarea{resize:vertical;min-height:110px;line-height:1.5;}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--emerald);outline-offset:0;border-color:var(--emerald);}
.field .err{font-family:var(--f-ui);font-size:14px;color:#A12A1A;}
.field input[aria-invalid="true"]{border-color:#A12A1A;}
.check{display:flex;align-items:center;gap:12px;min-height:44px;font-family:var(--f-ui);font-size:15.5px;cursor:pointer;margin-bottom:6px;}
.check input{width:20px;height:20px;accent-color:var(--emerald);flex-shrink:0;}
.form-note{font-family:var(--f-ui);font-size:14px;color:var(--muted);}

/* Quote list */
.ql{font-family:var(--f-ui);}
.ql-items{list-style:none;display:grid;gap:8px;margin-bottom:18px;}
.ql-item{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 10px;}
.ql-item img{width:52px;height:52px;object-fit:contain;background:#fff;}
.ql-item .ph0{width:52px;height:52px;border-radius:var(--r-sm);background:var(--paper-2);}
.ql-item .t{font-size:15px;line-height:1.35;}
.ql-item .t small{display:block;color:var(--muted);font-size:13px;}
.ql-item .t a{text-decoration:underline;text-underline-offset:3px;}
.ql-ctrl{display:flex;align-items:center;gap:6px;}
.qty{display:flex;align-items:center;border:1px solid var(--line-strong);border-radius:var(--r-sm);overflow:hidden;}
.qty button{width:36px;height:40px;background:var(--paper-2);border:none;font-size:18px;cursor:pointer;}
.qty input{width:52px;height:40px;border:none;text-align:center;font-size:16px;-moz-appearance:textfield;}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.ql-rm{width:40px;height:40px;border:1px solid var(--line);border-radius:var(--r-sm);background:none;cursor:pointer;font-size:18px;color:var(--muted);}
.ql-empty{padding:14px;border:1px dashed var(--line-strong);border-radius:var(--r-md);color:var(--muted);font-size:15px;margin-bottom:18px;}
.ql-sugg{margin:-4px 0 16px;display:grid;gap:10px;}
.ql-sugg h4{font-size:15px;font-weight:600;}
.ql-sline{background:var(--paper-2);border-radius:var(--r-md);padding:10px 12px;display:grid;gap:6px;}
.ql-sline .q{font-weight:600;font-size:14.5px;}
.ql-sline .opts{display:flex;flex-wrap:wrap;gap:6px;}
.ql-sline .opts button{border:1px solid var(--line-strong);background:var(--white);border-radius:16px;padding:6px 12px;font-size:14px;cursor:pointer;min-height:36px;text-align:left;}
.ql-sline .opts button.on{background:var(--emerald);color:#fff;border-color:var(--emerald);}
.ql-sline .none{font-size:14px;color:var(--muted);}
.ql-actions{display:grid;gap:10px;margin-top:8px;}
.ql-done{margin-top:16px;border:1px solid var(--emerald);background:#EEF6F0;border-radius:var(--r-md);padding:16px;}
.ql-done h4{font-size:17px;margin-bottom:6px;color:var(--emerald-text);}
.ql-done p{font-size:15px;}
.ql-status{font-size:14px;color:var(--text-dim);margin-top:6px;}

/* Compare tray */
.cmp-tray{color:var(--text);position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:95;display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--emerald);border-radius:28px;padding:6px 8px 6px 16px;box-shadow:0 10px 30px rgba(0,0,0,0.2);font-family:var(--f-ui);font-size:15px;max-width:calc(100vw - 180px);}
.cmp-tray b{white-space:nowrap;}
.cmp-tray a{background:var(--emerald);color:#fff;border-radius:22px;padding:0 16px;min-height:44px;display:flex;align-items:center;font-weight:600;white-space:nowrap;}
.cmp-tray button{background:none;border:none;color:var(--muted);text-decoration:underline;cursor:pointer;min-height:44px;padding:0 8px;}

/* Spec table */
.spec-table{width:100%;border-collapse:collapse;font-size:16px;}
.spec-table th,.spec-table td{text-align:left;vertical-align:top;padding:9px 12px;border-bottom:1px solid var(--line);}
.spec-table th{font-family:var(--f-ui);font-weight:600;font-size:14.5px;color:var(--text);width:38%;background:var(--paper-2);}
.spec-table td{color:var(--text-dim);}
.spec-table tr.feat td{padding-left:12px;}
.spec-table tr.feat td::before{content:"";display:inline-block;width:6px;height:6px;background:var(--copper);transform:rotate(45deg);margin:0 10px 2px 0;}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-md);}
.table-wrap table{min-width:0;}

/* ---------- Dialogs ---------- */
.dialog-backdrop{position:fixed;inset:0;z-index:220;background:rgba(10,15,12,0.62);display:flex;align-items:center;justify-content:center;padding:16px;}
.dialog{background:var(--paper);border-radius:var(--r-lg);padding:28px;max-width:460px;width:100%;position:relative;max-height:88vh;overflow-y:auto;}
.close-x{width:44px;height:44px;border-radius:50%;border:none;background:var(--paper-2);font-size:24px;line-height:1;cursor:pointer;color:var(--text);flex-shrink:0;}
.close-x:hover{background:var(--line);}

/* Photo placeholders: until a photo has arrived its box is warm paper with a soft light sweeping across, instead of
   blank white (common.js adds ph-js to the page and ph-done to each box when its photo has loaded) */
.ph-js :is(.pc-ph,.mc-ph,.ct-ph,.cat-card-ph,.pp-photo):not(.ph-done){position:relative;overflow:hidden;background:#EFE8D8;}
.ph-js :is(.pc-ph,.mc-ph,.ct-ph,.cat-card-ph,.pp-photo):not(.ph-done)::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,0.6) 50%,transparent 75%);transform:translateX(-100%);animation:ph-sweep 1.4s ease-in-out infinite;}
@keyframes ph-sweep{to{transform:translateX(100%);}}

/* Sections and cards rise gently into place the first time they scroll into view. common.js adds the classes only
   to things still below the screen, so nothing visible jumps, and nothing is hidden without JavaScript. */
.rv{opacity:0;transform:translateY(26px);}
.rv.rv-in{opacity:1;transform:none;transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.3,1);}
@media print{.rv{opacity:1 !important;transform:none !important;}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{transition:none !important;animation:none !important;}}

@media (max-width:1060px){
  .navlinks{display:none;}
  .hamburger{display:flex;}
  .nav-call{display:flex;}
  .nav-ql{display:flex;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .wrap{padding:0 16px;}
  body{font-size:17px;}
  :root{--header-h:62px;}
  .topbar{font-size:13px;}
  .topbar .wrap{justify-content:center;}
  .tb-left{gap:2px 14px;}
  .tb-left span:first-child,.tb-right{display:none;}
  .logo-brand{gap:9px;}
  .logo-brand img{width:38px;}
  .logo-text{font-size:17px;}
  .logo-text small{display:none;}
  .navcta{display:none;}
  .nav-right{gap:6px;}
  .foot-grid{grid-template-columns:1fr;gap:24px;}
  .pc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .pc-body{padding:10px 10px 12px;gap:5px;}
  .pc-name{font-size:15.5px;}
  .pc-actions{grid-template-columns:1fr;gap:6px;}
  .pc-meta{font-size:13px;}
  .wa-float{width:52px;height:52px;bottom:14px;right:14px;}
  .ql-pill{left:14px;bottom:14px;}
  .cmp-tray{bottom:76px;max-width:calc(100vw - 24px);}
  .dialog{padding:22px 18px;}
  .ql-item{grid-template-columns:44px 1fr;}
  .ql-item img,.ql-item .ph0{width:44px;height:44px;}
  .ql-ctrl{grid-column:1/-1;justify-content:flex-end;}
  .site-footer{padding-bottom:96px;}
}
/* Small phones: the language switch shows only the other language, so logo, switch, call and menu all fit */
@media (max-width:420px){
  .lang-toggle [aria-current="true"],.lang-toggle .active{display:none;}
  .lang-toggle a,.lang-toggle button{min-width:44px;}
}
@media (max-width:360px){
  .wrap{padding:0 12px;}
  .nav{gap:6px;}
  .logo-brand{gap:7px;}
  .logo-brand img{width:34px;}
  .logo-text{font-size:15px;}
  .nav-call,.hamburger{width:42px;height:42px;}
  .pc-grid{gap:6px;}
}
/* Small tablets: the logo keeps its subtitle, so the header buttons sit a little closer together */
@media (min-width:641px) and (max-width:760px){ .nav{gap:10px;} .nav-right{gap:6px;} }
/* With the quote list button showing, larger phones and small tablets also show only the other language on the switch */
@media (min-width:421px) and (max-width:760px){
  .nav.has-ql .lang-toggle [aria-current="true"],.nav.has-ql .lang-toggle .active{display:none;}
}
/* Phones with the quote list button showing: four slightly smaller header buttons, so they still fit beside the logo */
@media (max-width:420px){
  .nav.has-ql{gap:8px;}
  .nav.has-ql .nav-right{gap:4px;}
  .nav.has-ql .nav-call,.nav.has-ql .nav-ql,.nav.has-ql .hamburger{width:40px;height:40px;}
  .nav.has-ql .lang-toggle a,.nav.has-ql .lang-toggle button{min-width:40px;padding:0 6px;}
}
@media (max-width:374px){
  .nav.has-ql .nav-call,.nav.has-ql .nav-ql,.nav.has-ql .hamburger{width:38px;height:38px;}
  .nav.has-ql .lang-toggle a,.nav.has-ql .lang-toggle button{min-width:38px;}
}
@media (max-width:339px){ .logo-text{display:none;} }
@media (max-width:330px){ .pc-grid{grid-template-columns:1fr;} }

/* ---------- Section blocks used on the homepage and on the information pages ---------- */
.frame{position:relative;border:1px solid var(--line);}
.frame::before,.frame::after{content:"";position:absolute;width:22px;height:22px;border:1px solid var(--copper);pointer-events:none;}
.frame::before{top:-1px;left:-1px;border-right:none;border-bottom:none;}
.frame::after{bottom:-1px;right:-1px;border-left:none;border-top:none;}
.about-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin-top:32px;border:1px solid var(--line);}
.stat{background:var(--paper);padding:20px 22px;}
.stat .num{font-family:var(--f-ui);font-weight:700;font-size:26px;color:var(--emerald-text);font-variant-numeric:lining-nums;}
.stat .label{margin-top:4px;display:block;}
.about-copy p{color:var(--text-dim);margin-bottom:16px;font-size:17.5px;}
.ticks{margin-top:22px;display:grid;gap:10px;list-style:none;}
.ticks li{display:flex;gap:12px;align-items:baseline;font-size:16.5px;color:var(--text);}
.ticks li::before{content:"";width:7px;height:7px;background:var(--emerald);transform:rotate(45deg);flex-shrink:0;position:relative;top:-2px;}
/* ---------- Brands: one tile style, logos at tuned heights ---------- */
.brands{background:var(--paper);}
.brands-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.brand-badge{background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:118px;padding:18px 14px;text-align:center;transition:background .2s;position:relative;}
.brand-badge:hover{background:var(--paper-2);}
.brand-badge img{width:auto;max-width:82%;transition:transform .25s;}
.brand-badge picture,.brand-logo picture{display:contents;}   /* the logo's <img> lays out as if the <picture> weren't there */
.brand-badge:hover img{transform:scale(1.04);}
.brand-badge .tag{font-family:var(--f-ui);font-size:13.5px;font-weight:500;color:var(--muted);}
.brand-badge .tag.ask{color:var(--emerald-text);}
.brand-badge .word{font-family:var(--f-head);font-size:26px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text);line-height:1;}
/* Powcen: black wordmark on its own yellow, as on the machines (the logo image carries the same yellow) */
.brand-badge.featured{grid-column:span 2;background:#F6DC00;}
.brand-badge.featured:hover{background:#F6DC00;}
.brand-badge.featured img{height:auto;width:min(82%,316px);}
.brand-badge.featured .tag{color:#2e2800;font-weight:600;}
.brand-badge.brand-deli{background:#f4bf33;} .brand-badge.brand-deli:hover{background:#e6ae1f;} .brand-badge.brand-deli .tag{color:#3b2e05;}
.brand-badge.brand-workpro{background:#e71d0f;} .brand-badge.brand-workpro:hover{background:#c8170b;} .brand-badge.brand-workpro .tag{color:#fff;}
.brand-badge.other{grid-column:span var(--span4,2);background:var(--paper-2);}
.brand-badge.other .tag{font-size:15.5px;color:var(--emerald-text);font-weight:600;}
.logo-ingco{height:32px;} .logo-total{height:24px;} .logo-riland{height:26px;} .logo-jadever{height:34px;} .logo-wadfow{height:40px;}
.logo-yamato{height:30px;} .logo-weldro{height:46px;} .logo-murex{height:24px;} .logo-uweld{height:28px;} .logo-deli{height:34px;} .logo-workpro{height:16px;} .logo-bsrm{height:30px;} .logo-leo{height:32px;} .logo-orion{height:30px;}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.service{padding:28px 22px 28px 0;border-top:3px solid var(--copper);border-bottom:1px solid var(--line);}
.svc-ico{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:rgba(193,101,47,0.10);margin-bottom:14px;}
.svc-ico svg{width:24px;height:24px;fill:none;stroke:var(--copper-text);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.service:not(:last-child){border-right:1px solid var(--line);margin-right:22px;}
.service .label{display:block;margin-bottom:10px;}
.service h3{font-size:19px;margin-bottom:8px;}
.service p{color:var(--muted);font-size:16px;}
.as-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.as-block{background:var(--paper);padding:28px 24px;}
.as-block h3,.as-block h2{font-size:21px;margin-bottom:12px;}
.as-block ul{list-style:none;display:grid;gap:10px;}
.as-block li{position:relative;padding-left:18px;color:var(--text-dim);font-size:16px;line-height:1.55;}
.as-block li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--copper);transform:rotate(45deg);}
.as-times{margin-top:18px;font-family:var(--f-ui);font-size:15.5px;color:var(--text);}
.social-links{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:18px;}
.social-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--emerald-light);font-family:var(--f-ui);font-weight:600;text-decoration:underline;text-underline-offset:4px;}
.map-box{margin-top:24px;border:1px solid var(--line-dark);border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/10;background:var(--ink-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;color:var(--cream-dim);font-family:var(--f-ui);font-size:14.5px;}
.map-box iframe{width:100%;height:100%;border:0;display:block;}
.map-box:has(iframe){padding:0;}
.cta-box{background:var(--paper);border:1px solid var(--line);padding:28px;}
.cta-box .row{padding:12px 0;border-bottom:1px solid var(--line);}
.cta-box .row:last-of-type{border-bottom:none;}
.cta-box .k{display:block;margin-bottom:4px;}
.cta-box .v{font-size:17px;color:var(--text);word-break:break-word;}
.cta-box .v a{color:var(--emerald-text);display:inline-flex;align-items:center;min-height:40px;text-decoration:underline;text-underline-offset:3px;}
.cta-box .v small{display:block;font-family:var(--f-ui);font-size:14px;color:var(--muted);}
.cta-box .btn{margin-top:14px;}
.quote-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:40px;max-width:760px;margin:0 auto;}
.quote-card h2{font-size:clamp(28px,4vw,38px);margin:8px 0 10px;}
.qc-sub{color:var(--text-dim);font-size:17px;margin-bottom:26px;}
.ql-title,.quote-card .ql-title{font-size:21px;margin:0 0 12px;}
@media (max-width:1060px){ .as-grid,.services-grid{grid-template-columns:1fr 1fr;} .service:nth-child(2n){border-right:none;margin-right:0;} }
@media (max-width:640px){ .brands-grid{grid-template-columns:1fr 1fr;} .brand-badge{min-height:100px;} .brand-badge.other{grid-column:span var(--span2,2);} .as-grid{grid-template-columns:1fr;} .cta-box{padding:22px 18px;} .quote-card{padding:26px 18px;border-radius:var(--r-md);} .about-stats{grid-template-columns:1fr 1fr;} }