/* RICH4PET — Premium B2B Creative Design V1.1 (isolated prototype, not the live site)
   Fonts: self-hosted WOFF2, SIL OFL 1.1 (licenses in /fonts/licenses). */
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Reem Kufi";src:url(../fonts/reem-kufi-arabic-wght-normal.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"IBM Plex Sans";src:url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --paper:#F4EDE4; --paper-2:#EBE0D2; --paper-3:#E0D2C0; --ink:#1D1210; --ink-2:#4A3A35; --mute:#6B5A52;
  --maroon:#6E1F1B; --maroon-2:#8E2A24; --night:#1A0B0A; --night-2:#2A1311; --gold:#B8924A; --gold-hi:#DDB872; --kraft:#C79F6B;
  --line:rgba(29,18,16,.16); --line-night:rgba(221,184,114,.28);
  --f-disp:"Bricolage Grotesque","IBM Plex Sans",system-ui,sans-serif;
  --f-body:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --t-hero:clamp(2.6rem,1rem + 5.4vw,6.6rem);
  --t-h2:clamp(2rem,1.2rem + 3.2vw,4.2rem);
  --t-h3:clamp(1.3rem,1.05rem + 1vw,1.9rem);
  --t-lead:clamp(1.05rem,.98rem + .4vw,1.3rem);
  --t-small:.875rem;
  --gut:clamp(18px,4vw,56px); --maxw:1360px; --ease:cubic-bezier(.2,.7,.1,1);
}
:lang(ar){--f-disp:"Reem Kufi","IBM Plex Sans Arabic",system-ui,sans-serif;--f-body:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif;
  --t-hero:clamp(2.5rem,1rem + 5.4vw,6.2rem);--t-h2:clamp(1.9rem,1.1rem + 2.8vw,3.6rem)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:lang(ar) body,:lang(ar){line-height:1.85}
:lang(ar) *{letter-spacing:0!important}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--f-disp);font-weight:700;line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3,:lang(ar) h4{line-height:1.5;font-weight:600}
p{margin:0}
.wrap{width:min(100% - 2*var(--gut),var(--maxw));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.mono{font-family:var(--f-mono);font-feature-settings:"zero"}
:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px;border-radius:2px}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--gold-hi);color:var(--night);padding:10px 16px;z-index:200;font-weight:600}
.skip:focus{top:10px}

/* ---------- buttons ---------- */
.btn{--b-bg:var(--gold-hi);--b-fg:var(--night);display:inline-flex;align-items:center;gap:.7em;min-height:52px;padding:.8em 1.5em;background:var(--b-bg);color:var(--b-fg);
  border:1.5px solid var(--b-bg);font-weight:600;text-decoration:none;cursor:pointer;border-radius:2px;position:relative;overflow:hidden;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
[dir=rtl] .btn:hover .arr{transform:translateX(-4px)}
[dir=rtl] .arr{transform:scaleX(-1)}
[dir=rtl] .btn:hover .arr{transform:scaleX(-1) translateX(4px)}
.btn:hover{background:#fff;border-color:#fff}
.btn.ghost{--b-bg:transparent;--b-fg:#fff;border-color:rgba(255,255,255,.55)}
.btn.ghost:hover{background:#fff;color:var(--night)}
.btn.dark{--b-bg:var(--maroon);--b-fg:#fff;border-color:var(--maroon)}
.btn.dark:hover{background:var(--night);border-color:var(--night)}
.btn.line{--b-bg:transparent;--b-fg:var(--ink);border-color:var(--ink)}
.btn.line:hover{background:var(--ink);color:#fff}
.btn.sm{min-height:44px;padding:.55em 1.1em;font-size:var(--t-small)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- header ---------- */
:root{--proto:28px}
.logo img,.ftr img{filter:brightness(0) invert(1)}
.hdr{position:fixed;inset:var(--proto) 0 auto 0;z-index:100;background:var(--night);color:#fff;border-bottom:1px solid var(--line-night);transition:transform .45s var(--ease)}
.hdr-in{display:flex;align-items:center;gap:clamp(12px,2vw,32px);height:76px;transition:height .35s var(--ease)}
.hdr.compact .hdr-in{height:60px}
.hdr.hide{transform:translateY(calc(-100% - var(--proto)))}
.logo img{height:36px;width:auto}
.nav{display:flex;gap:clamp(2px,1vw,10px);margin-inline-start:auto}
.nav a{position:relative;text-decoration:none;padding:.6em .9em;font-size:.95rem;font-weight:500;color:#F2E7DD}
.nav a::after{content:"";position:absolute;inset-inline:.9em;bottom:.25em;height:1.5px;background:var(--gold-hi);transform:scaleX(0);transform-origin:var(--o,left);transition:transform .35s var(--ease)}
[dir=rtl] .nav a::after{--o:right}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}
.hdr-act{display:flex;align-items:center;gap:10px}
.lang{display:inline-flex;border:1px solid var(--line-night);border-radius:2px}
.lang button{min-width:44px;min-height:40px;background:none;border:0;color:#D9C9BA;cursor:pointer;font-weight:600;font-size:.85rem}
.lang button[aria-pressed=true]{background:var(--gold-hi);color:var(--night)}
.qpill{display:inline-flex;align-items:center;gap:.6em;min-height:44px;padding:.4em 1em;background:var(--gold-hi);color:var(--night);text-decoration:none;font-weight:600;font-size:.9rem;border-radius:2px}
.qpill b{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:12px;background:var(--night);color:var(--gold-hi);font:500 .75rem var(--f-mono)}
.qpill.bump{animation:bump .4s var(--ease)}
@keyframes bump{40%{transform:scale(1.08)}}
.menu-btn{display:none;min-width:44px;min-height:44px;background:none;border:1px solid var(--line-night);color:#fff;border-radius:2px;cursor:pointer}
@media (max-width:960px){
  .menu-btn{display:inline-grid;place-items:center;margin-inline-start:auto}
  .nav{position:fixed;inset:calc(60px + var(--proto)) 0 auto 0;background:var(--night);flex-direction:column;padding:12px var(--gut) 24px;border-bottom:1px solid var(--line-night);margin:0;transform:translateY(-120%);transition:transform .4s var(--ease);visibility:hidden}
  .nav.open{transform:none;visibility:visible}
  .nav a{padding:1em 0;font-size:1.15rem;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav a::after{display:none}
  .hdr-act{margin-inline-start:0}
  .hdr-in{height:60px}
  .qpill span.t{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;background:var(--night);color:#fff;overflow:hidden;padding-top:calc(76px + var(--proto));display:grid;align-items:center;isolation:isolate}
.hero::before{content:"";position:absolute;inset-block:0;inset-inline-end:-6%;width:min(62vw,880px);background:radial-gradient(120% 90% at 30% 20%,var(--maroon-2),var(--maroon) 45%,#4a1411 100%);
  border-start-start-radius:50% 38%;border-end-start-radius:50% 38%;z-index:-1}
[dir=rtl] .hero::before{border-radius:0 50% 38% 0 / 0 38% 38% 0}
.hero::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 47px,rgba(221,184,114,.07) 47px 48px);z-index:-1;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,4vw,64px);align-items:center;padding-block:clamp(36px,6vw,88px)}
.eyebrow{display:flex;align-items:center;gap:14px;font:500 .78rem var(--f-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--gold-hi)}
:lang(ar) .eyebrow{font-family:var(--f-body);font-size:.92rem;text-transform:none}
.eyebrow::before{content:"";width:44px;height:1.5px;background:currentColor}
.hero h1{font-size:var(--t-hero);margin-block:clamp(18px,3vw,34px) clamp(18px,2.4vw,30px);font-weight:800}
.hero h1 .ln{display:block}
@media (min-width:901px){.hero h1{position:relative;z-index:3;width:max-content;max-width:calc(100vw - 2*var(--gut))}.hero h1 .ln{white-space:nowrap}.hero-art{position:relative;z-index:1}}
.hero h1 .ln:last-child{color:var(--gold-hi)}
.hero .lead{font-size:var(--t-lead);max-width:44ch;color:#EADFD3}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,40px)}
.hero-art{position:relative;aspect-ratio:1/1.08;width:min(100%,520px);justify-self:center}
.hero-art .pk{position:absolute;filter:drop-shadow(0 28px 30px rgba(0,0,0,.45));transition:transform .8s var(--ease)}
.hero-art .pk:nth-child(1){width:46%;inset-inline-start:2%;bottom:8%;transform:rotate(-6deg)}
.hero-art .pk:nth-child(2){width:50%;inset-inline-end:2%;bottom:14%;transform:rotate(5deg);z-index:2}
.hero-art .pk:nth-child(3){width:34%;inset-inline-start:30%;top:2%;transform:rotate(-2deg);z-index:1}
.hero-art:hover .pk:nth-child(1){transform:rotate(-9deg) translateY(-8px)}
.hero-art:hover .pk:nth-child(2){transform:rotate(8deg) translateY(-8px)}
.stamp{position:absolute;inset-inline-start:-4%;top:8%;width:clamp(96px,11vw,148px);z-index:3;color:var(--gold-hi)}
.stamp svg{animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.art-note{position:absolute;inset-inline:0;bottom:-4px;text-align:center;font:400 .72rem var(--f-mono);color:#CDB9A8}
:lang(ar) .art-note{font-family:var(--f-body);font-size:.82rem}
.ledger-row{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-night);background:rgba(26,11,10,.6)}
.ledger-row a{display:flex;align-items:baseline;gap:14px;padding:clamp(14px,2vw,24px) clamp(10px,1.6vw,22px);text-decoration:none;border-inline-end:1px solid var(--line-night);transition:background .3s}
.ledger-row a:last-child{border-inline-end:0}
.ledger-row a:hover{background:rgba(221,184,114,.12)}
.ledger-row .n{font:500 .8rem var(--f-mono);color:var(--gold-hi)}
.ledger-row .t{font:600 clamp(1rem,.9rem + .6vw,1.35rem) var(--f-disp)}
.hero-bottom{position:absolute;inset-inline:0;bottom:0}
@media (max-width:900px){
  .hero{padding-top:calc(60px + var(--proto));align-items:start}
  .hero-grid{grid-template-columns:1fr;padding-bottom:210px}
  .hero-art{width:min(86%,380px);order:-1;margin-top:8px}
  .hero::before{width:130vw;inset-inline-end:-30%;inset-block:0 auto;height:56%;border-radius:0 0 50% 50%/0 0 22% 22%}
  [dir=rtl] .hero::before{border-radius:0 0 50% 50%/0 0 22% 22%}
  .ledger-row{grid-template-columns:repeat(2,1fr)}
  .ledger-row a:nth-child(2){border-inline-end:0}
  .ledger-row a:nth-child(-n+2){border-bottom:1px solid var(--line-night)}
}

/* ---------- generic sections ---------- */
.sec{padding-block:clamp(72px,10vw,150px)}
.sec.alt{background:var(--paper-2)}
.sec.night{background:var(--night);color:#fff}
.kick{display:flex;align-items:center;gap:14px;font:500 .78rem var(--f-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--maroon)}
:lang(ar) .kick{font-family:var(--f-body);font-size:.95rem;text-transform:none;font-weight:600}
.night .kick{color:var(--gold-hi)}
.kick .idx{padding:2px 8px;border:1px solid currentColor;border-radius:2px}
h2.big{font-size:var(--t-h2);margin-top:18px;max-width:20ch}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* story */
.story-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(24px,3vw,48px);margin-top:clamp(36px,5vw,72px)}
.story-grid .stmt{grid-column:1/8;font:600 clamp(1.5rem,1rem + 2vw,2.7rem)/1.25 var(--f-disp);letter-spacing:-.015em;text-wrap:balance}
:lang(ar) .story-grid .stmt{line-height:1.6}
.story-grid .body{grid-column:9/13;color:var(--ink-2);display:grid;gap:1em;align-self:end}
.facts{margin-block:0;grid-column:1/-1;margin-top:clamp(24px,4vw,56px);border-top:2px solid var(--ink)}
.fact{display:grid;grid-template-columns:minmax(120px,1fr) 2fr minmax(140px,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.facts dd{margin:0}.fact .k{font:500 .78rem var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}
:lang(ar) .fact .k{font-family:var(--f-body);text-transform:none;font-size:.92rem}
.fact .v{font:600 clamp(1.1rem,1rem + .5vw,1.5rem) var(--f-disp)}
.fact .s{font-size:.82rem;justify-self:end;display:inline-flex;gap:8px;align-items:center;color:var(--ink-2)}
.fact .s::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--maroon)}
.fact.pend .v{color:var(--mute);font-weight:500;font-family:var(--f-body);font-size:1rem;border:1px dashed var(--mute);padding:4px 12px;justify-self:start;border-radius:2px}
.fact.pend .s::before{background:transparent;border:1.5px dashed var(--mute)}
@media (max-width:860px){
  .story-grid .stmt,.story-grid .body{grid-column:1/-1}
  .fact{grid-template-columns:1fr;gap:4px}.fact .s{justify-self:start}
}

/* product universe */
.uni{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,22px);margin-top:clamp(32px,5vw,64px)}
.tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:clamp(300px,34vw,460px);padding:clamp(18px,2vw,30px);text-decoration:none;overflow:hidden;isolation:isolate;border-radius:2px;transition:transform .5s var(--ease)}
.tile:hover{transform:translateY(-6px)}
.tile:nth-child(1){grid-column:span 7;background:var(--maroon);color:#fff}
.tile:nth-child(2){grid-column:span 5;background:var(--kraft);color:var(--night)}
.tile:nth-child(3){grid-column:span 5;background:var(--night);color:#fff}
.tile:nth-child(4){grid-column:span 7;background:var(--paper-3);color:var(--night)}
.tile .no{font:500 .8rem var(--f-mono);opacity:.8}
.tile h3{font-size:clamp(1.8rem,1.2rem + 2.4vw,3.4rem);margin-top:10px}
.tile .cnt{font-size:.92rem;margin-top:8px;opacity:.9}
.tile .go{margin-top:18px;font-weight:600;display:inline-flex;gap:.6em;align-items:center}
.tile .art{position:absolute;inset-block-end:-6%;inset-inline-end:4%;width:clamp(120px,22vw,300px);z-index:-1;transition:transform .7s var(--ease)}
.tile:hover .art{transform:translateY(-14px) rotate(3deg)}
.tile:nth-child(2) .art,.tile:nth-child(3) .art{width:clamp(110px,16vw,230px)}
@media (max-width:760px){.tile:nth-child(n){grid-column:1/-1;min-height:280px}}

/* passport storytelling */
.passport{position:relative;background:var(--paper)}
.pp-pin{position:relative}
.pp-steps{display:grid;gap:0}
.pp-step{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:clamp(24px,3vw,40px) 0;border-top:1px solid var(--line);opacity:.35;transition:opacity .5s var(--ease)}
.pp-step.on{opacity:1}
.pp-step .no{font:500 .85rem var(--f-mono);color:var(--maroon);padding-top:.4em}
.pp-step h3{font-size:var(--t-h3)}
.pp-step p{color:var(--ink-2);margin-top:.5em;max-width:46ch}
.pp-doc{position:relative;background:#FBF6EF;border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(29,18,16,.35);padding:clamp(18px,2.4vw,34px);border-radius:3px;aspect-ratio:4/5;max-height:76svh}
.pp-doc::before{content:"";position:absolute;inset:10px;border:1px dashed var(--line);pointer-events:none}
.pp-doc .hd{display:flex;justify-content:space-between;font:500 .72rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.pp-svg{width:100%;height:calc(100% - 28px)}
.route-bg{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:3 7}
.route-fg{fill:none;stroke:var(--maroon);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0))}
.node circle{fill:#FBF6EF;stroke:var(--mute);stroke-width:2;transition:fill .4s,stroke .4s,transform .5s var(--ease)}
.node text{font:500 11px var(--f-mono);fill:var(--mute);letter-spacing:.08em}
.node.on circle{fill:var(--maroon);stroke:var(--maroon)}
.node.on text{fill:var(--maroon)}
.pp-stamp{opacity:0;transform:scale(1.4) rotate(-14deg);transform-origin:center;transform-box:fill-box;transition:opacity .35s,transform .5s var(--ease)}
.pp-stamp.on{opacity:1;transform:scale(1) rotate(-8deg)}
.pp-stamp rect{fill:none;stroke:var(--maroon);stroke-width:2.5}
.pp-stamp text{font:700 15px var(--f-disp);fill:var(--maroon);letter-spacing:.14em}
.pp-note{margin-top:28px;font-size:.88rem;color:var(--mute);border-inline-start:2px solid var(--gold);padding-inline-start:14px}
.pp-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start}
.pp-motion .pp-track{height:380svh}
.pp-motion .pp-pin{position:sticky;top:calc(76px + var(--proto));height:calc(100svh - 76px - var(--proto));display:grid;align-content:center}
@media (max-width:899px){.pp-layout{grid-template-columns:1fr}.pp-doc{aspect-ratio:auto;height:340px;max-height:none;order:-1}.pp-step{opacity:1}}

/* OEM */
.oem{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center}
.oem .stage{position:relative;aspect-ratio:1/1;display:grid;place-items:center;background:radial-gradient(70% 60% at 50% 45%,#3b1b18,var(--night));border:1px solid var(--line-night);border-radius:2px}
.oem .stage .pk{width:min(64%,320px);filter:drop-shadow(0 34px 36px rgba(0,0,0,.55));transition:transform .6s var(--ease)}
.oem .stage:hover .pk{transform:rotate(-3deg) scale(1.03)}
.oem p.lead{color:#E3D5C7;max-width:48ch;margin-top:18px}
.ctl{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:24px;align-items:center}
.ctl .lbl{font:500 .75rem var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--gold-hi)}
:lang(ar) .ctl .lbl{font-family:var(--f-body);text-transform:none;font-size:.92rem}
.sw{display:flex;gap:8px}
.sw button{width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.35);cursor:pointer;padding:0}
.sw button[aria-pressed=true]{border-color:var(--gold-hi);box-shadow:0 0 0 3px var(--night),0 0 0 5px var(--gold-hi)}
.seg{display:inline-flex;border:1px solid var(--line-night)}
.seg button{min-height:44px;padding:.4em 1.1em;background:none;border:0;color:#fff;cursor:pointer;font-weight:500}
.seg button[aria-pressed=true]{background:var(--gold-hi);color:var(--night)}
.need{margin-top:28px;display:grid;gap:8px;list-style:none;padding:0;color:#E3D5C7}
.need li{display:flex;gap:12px;align-items:baseline;border-bottom:1px solid var(--line-night);padding-bottom:8px}
.need li::before{content:"+";color:var(--gold-hi);font:500 1rem var(--f-mono)}
.chip{display:inline-block;margin-top:22px;border:1px dashed var(--gold-hi);color:var(--gold-hi);padding:6px 14px;font-size:.85rem;border-radius:2px}
@media (max-width:860px){.oem{grid-template-columns:1fr}.oem .stage{aspect-ratio:4/3}}

/* inquiry */
.inq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start}
.card{background:#fff;border:1px solid var(--line);padding:clamp(18px,2.4vw,34px);border-radius:3px}
.field{display:grid;gap:6px;margin-bottom:16px}
.field label,.field .lbl{font-weight:600;font-size:.92rem}
.field .opt{font-weight:400;color:var(--mute);font-size:.82rem;margin-inline-start:6px}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:.7em .9em;background:#fff;border:1.5px solid #8b7b72;border-radius:2px}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--gold-hi);outline-offset:1px;border-color:var(--maroon)}
.field .err{color:#9a1b13;font-size:.85rem;min-height:1.2em}
.field input[aria-invalid=true],.field select[aria-invalid=true]{border-color:#9a1b13}
.fine{font-size:.82rem;color:var(--mute);margin-top:12px}

/* footer */
.ftr{background:var(--night);color:#E9DCCF;padding-block:clamp(48px,6vw,88px) 28px}
.ftr-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:clamp(20px,3vw,48px)}
.ftr .fh{font:500 .75rem var(--f-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--gold-hi);margin-bottom:14px}
:lang(ar) .ftr .fh{font-family:var(--f-body);text-transform:none;font-size:.95rem}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ftr a{text-decoration:none}.ftr a:hover{color:var(--gold-hi)}
.ftr .small{font-size:.85rem;color:#B9A898;margin-top:10px;max-width:40ch}
.ftr-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;border-top:1px solid var(--line-night);margin-top:36px;padding-top:18px;font-size:.82rem;color:#B9A898}
.proto{background:var(--gold-hi);color:var(--night);font:500 .7rem/var(--proto) var(--f-mono);height:var(--proto);text-align:center;padding:0 12px;position:fixed;inset:0 0 auto 0;z-index:101;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:lang(ar) .proto{font-family:var(--f-body);font-size:.8rem}
@media (max-width:860px){.ftr-grid{grid-template-columns:1fr 1fr}.ftr-grid>:first-child{grid-column:1/-1}}

/* page head (inner pages) */
.phead{background:var(--night);color:#fff;padding:calc(76px + var(--proto) + clamp(36px,5vw,72px)) 0 clamp(32px,4vw,56px);position:relative;overflow:hidden}
.phead::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 47px,rgba(221,184,114,.06) 47px 48px);pointer-events:none}
.phead h1{font-size:clamp(2.2rem,1.2rem + 4vw,5rem);margin-top:16px}
.phead p{max-width:56ch;color:#E3D5C7;margin-top:14px;font-size:var(--t-lead)}
@media (max-width:960px){.phead{padding-top:calc(60px + var(--proto) + 32px)}}

/* catalog */
.cat-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:start;padding-block:clamp(28px,4vw,56px) clamp(60px,8vw,120px)}
.filters{position:sticky;top:96px;background:#fff;border:1px solid var(--line);padding:20px;border-radius:3px}
.filters h3{font:600 1.05rem var(--f-disp);margin-bottom:14px}
.fgrp{border:0;border-top:1px solid var(--line);padding:14px 0;margin:0;min-width:0}
.fgrp legend{float:inline-start;width:100%;font:500 .75rem var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mute);padding:0;margin-bottom:8px}
:lang(ar) .fgrp legend{font-family:var(--f-body);text-transform:none;font-size:.92rem}
.fgrp legend+div{clear:both}
.fgrp label{display:flex;align-items:center;gap:10px;min-height:36px;cursor:pointer}
.fgrp input[type=checkbox]{width:20px;height:20px;accent-color:var(--maroon)}
.fgrp .c{margin-inline-start:auto;font:400 .75rem var(--f-mono);color:var(--mute)}
.fbar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:20px}
.fbar .search{flex:1;min-width:200px;position:relative}
.fbar input[type=search]{width:100%;min-height:50px;padding:.6em .9em;border:1.5px solid #8b7b72;background:#fff;border-radius:2px}
.fbtn{display:none}
.res-count{font:500 .85rem var(--f-mono);color:var(--mute)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(14px,1.6vw,24px)}
.pc{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;border-radius:3px;overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.pc:hover{transform:translateY(-5px);box-shadow:0 26px 40px -26px rgba(29,18,16,.45)}
.pc .ph{position:relative;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden}
.pc .ph .pk{width:56%;transition:transform .6s var(--ease)}
.pc:hover .ph .pk{transform:translateY(-8px) rotate(-3deg) scale(1.04)}
.pc .ph img.real{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.pc:hover .ph img.real{transform:scale(1.05)}
.pc .tag{position:absolute;inset-block-start:10px;inset-inline-start:10px;background:var(--night);color:var(--gold-hi);font:500 .68rem var(--f-mono);padding:3px 8px;letter-spacing:.08em;border-radius:2px}
.pc .illus{position:absolute;inset-block-end:8px;inset-inline-end:10px;font:400 .66rem var(--f-mono);color:rgba(29,18,16,.55)}
.pc .bd{padding:16px 18px 18px;display:grid;gap:8px;flex:1;align-content:start}
.pc .meta{font:500 .72rem var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--maroon)}
:lang(ar) .pc .meta{font-family:var(--f-body);text-transform:none;font-size:.85rem;font-weight:600}
.pc h3{font:600 1.05rem/1.3 var(--f-disp);letter-spacing:-.005em}
.pc h3 a{text-decoration:none}
.pc .sku{font:400 .75rem var(--f-mono);color:var(--mute)}
.pc .acts{display:flex;gap:8px;margin-top:auto;padding-top:10px;flex-wrap:wrap}
.pc .acts .btn{flex:1;justify-content:center}
.cmp{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:var(--ink-2);min-height:36px;cursor:pointer}
.cmp input{width:18px;height:18px;accent-color:var(--maroon)}
.empty{padding:60px 20px;text-align:center;color:var(--mute);border:1px dashed var(--mute);border-radius:3px}
.tray{position:fixed;inset-inline:0;bottom:0;background:var(--night);color:#fff;z-index:90;padding:12px var(--gut);display:flex;gap:12px;align-items:center;justify-content:space-between;transform:translateY(110%);transition:transform .45s var(--ease);border-top:1px solid var(--line-night)}
.tray.on{transform:none}
.dlg{border:0;padding:0;background:#fff;color:var(--ink);max-width:min(960px,94vw);width:100%;border-radius:4px}
.dlg::backdrop{background:rgba(26,11,10,.7)}
.dlg .in{padding:clamp(18px,3vw,34px);overflow:auto;max-height:86svh}
table.t{width:100%;border-collapse:collapse;font-size:.92rem}
table.t th,table.t td{text-align:start;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.t th{font:500 .75rem var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mute);background:var(--paper-2)}
:lang(ar) table.t th{font-family:var(--f-body);text-transform:none;font-size:.9rem}
@media (max-width:960px){
  .cat-layout{grid-template-columns:1fr}
  .fbtn{display:inline-flex}
  .filters{position:fixed;inset:0 0 0 auto;width:min(86vw,360px);z-index:150;overflow:auto;transform:translateX(105%);transition:transform .4s var(--ease);border-radius:0}
  [dir=rtl] .filters{inset:0 auto 0 0;transform:translateX(-105%)}
  .filters.open{transform:none}
  .scrim{position:fixed;inset:0;background:rgba(26,11,10,.6);z-index:140}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .pc .bd{padding:12px}.pc h3{font-size:.95rem}
}

/* product detail */
.pd{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);padding-block:calc(76px + clamp(28px,4vw,56px)) clamp(48px,6vw,96px);align-items:start}
.pd-media{position:sticky;top:100px;aspect-ratio:1/1;display:grid;place-items:center;border-radius:3px;overflow:hidden;border:1px solid var(--line)}
.pd-media .pk{width:min(58%,360px);filter:drop-shadow(0 30px 28px rgba(0,0,0,.3))}
.pd-media img.real{width:100%;height:100%;object-fit:cover}
.crumbs{font:400 .8rem var(--f-mono);color:var(--mute);margin-bottom:12px}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--maroon)}
.pd h1{font-size:clamp(1.8rem,1.1rem + 2.6vw,3.2rem)}
.pd .short{font-size:var(--t-lead);color:var(--ink-2);margin-top:16px;max-width:54ch}
.spec{margin-top:28px;border-top:2px solid var(--ink)}
.spec .r{display:grid;grid-template-columns:minmax(110px,1fr) 2fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.spec .k{font:500 .76rem var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}
:lang(ar) .spec .k{font-family:var(--f-body);text-transform:none;font-size:.92rem}
.pend-box{margin-top:24px;border:1px dashed var(--mute);padding:16px 18px;border-radius:3px;background:rgba(255,255,255,.5)}
.pend-box h3{font:600 1rem var(--f-disp);margin-bottom:8px}
.pend-box ul{margin:0;padding-inline-start:1.2em;color:var(--ink-2);display:grid;gap:4px}
.buy{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.buy .field{margin:0;min-width:110px}
@media (max-width:860px){.pd{grid-template-columns:1fr}.pd-media{position:relative;top:0}}
.sticky-q{position:fixed;inset-inline:0;bottom:0;background:var(--night);color:#fff;padding:10px var(--gut);display:none;gap:10px;align-items:center;justify-content:space-between;z-index:80;border-top:1px solid var(--line-night)}
@media (max-width:860px){.sticky-q{display:flex}}

/* rfq */
.rfq{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:clamp(20px,4vw,64px);padding-block:clamp(28px,4vw,56px) clamp(60px,8vw,120px);align-items:start}
.steps{display:flex;gap:0;margin-bottom:24px;counter-reset:s}
.steps li{flex:1;list-style:none;position:relative;padding-top:14px;font-size:.82rem;color:var(--mute);border-top:3px solid var(--line);counter-increment:s}
.steps li::before{content:"0" counter(s);font:500 .72rem var(--f-mono);display:block;margin-bottom:2px}
.steps li.on{color:var(--ink);border-color:var(--maroon);font-weight:600}
.steps li.done{border-color:var(--ink)}
.steps{padding:0;margin-inline:0}
.step[hidden]{display:none}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.qline{display:grid;grid-template-columns:56px minmax(0,1fr) 116px 124px 44px;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.qline .th{width:56px;height:56px;display:grid;place-items:center;border-radius:2px;overflow:hidden}
.qline .th .pk{width:70%}
.qline input,.qline select{min-height:44px;padding:.4em .6em;border:1.5px solid #8b7b72;border-radius:2px;width:100%;background:#fff}
.qline .rm{min-width:44px;min-height:44px;background:none;border:1px solid var(--line);cursor:pointer;border-radius:2px;font-size:1.1rem}
.nav-btns{display:flex;justify-content:space-between;gap:12px;margin-top:24px;flex-wrap:wrap}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:.3em 1em;border:1.5px solid #8b7b72;border-radius:2px;cursor:pointer;background:#fff}
.opts input{accent-color:var(--maroon);width:18px;height:18px}
.opts label:has(input:checked){border-color:var(--maroon);background:#f6e9e6}
.preview{background:var(--night);color:#F2E7DD;padding:20px;border-radius:3px;font:400 .85rem/1.6 var(--f-mono);white-space:pre-wrap;word-break:break-word;direction:ltr;text-align:left}
.notice{border:2px solid var(--maroon);background:#f6e9e6;padding:12px 16px;border-radius:3px;font-weight:600;margin-bottom:18px}
.aside .card{position:sticky;top:96px}
@media (max-width:860px){
  .rfq{grid-template-columns:1fr}.aside .card{position:static}
  .row2{grid-template-columns:1fr}
  .qline{grid-template-columns:48px minmax(0,1fr) 44px;grid-template-areas:"th nm rm" "q q q" "u u u"}
  .qline .th{grid-area:th;width:48px;height:48px}.qline .nm{grid-area:nm}.qline .rm{grid-area:rm}.qline .qq{grid-area:q}.qline .uu{grid-area:u}
}

/* packs */
.pk{overflow:visible}
.pk text{font-family:"Bricolage Grotesque","IBM Plex Sans Arabic","IBM Plex Sans",sans-serif}

/* reveal motion (only when JS enables it and motion is allowed) */
.mo [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.mo [data-reveal].in{opacity:1;transform:none}
/* hero text stays opaque (so it can paint immediately and be the LCP); only its position animates */
.mo .hero [data-reveal]{opacity:1;transition:transform .6s var(--ease);transition-delay:calc(var(--d,0s) * .45)}
.mo .hero #heroArt[data-reveal]{opacity:0;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.mo .hero #heroArt[data-reveal].in{opacity:1}
.mo [data-clip]{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease);transition-delay:var(--d,0s)}
.mo [data-clip].in{clip-path:inset(0)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .mo [data-reveal],.mo [data-clip]{opacity:1;transform:none;clip-path:none}
  .stamp svg{animation:none}
}
/* V1 QA fixes */
.stamp svg{direction:ltr}
:lang(ar) .hero h1{line-height:1.3}
:lang(ar){--t-hero:clamp(2.3rem,1rem + 4.4vw,5.4rem)}
.ftr a,.crumbs a{display:inline-block;padding-block:.5em}
.pc h3 a{display:block;padding-block:3px}
.pc .sku.ltr{display:block}
[dir=rtl] .pc h3 a.ltr,[dir=rtl] .pc .sku.ltr{text-align:right}
@media (max-width:900px){
  .hero-grid{padding-top:12px;gap:10px}
  .hero-art{width:min(58%,240px);margin-top:0}
  .hero-art{margin-bottom:30px}
  .art-note{font-size:.66rem;bottom:-26px;line-height:1.3}
  .hero h1{margin-block:14px}
  .stamp{width:84px;inset-inline-start:-14%}
}
/* ===== V1.1 refinement ===== */
:lang(ar) body{font-size:1.0625rem}
.pp-svg{direction:ltr}
.blk{display:block}
[dir=rtl] .blk.ltr{text-align:right}
/* hero: owner product images on a paper arch */
.hero-art .arch{position:absolute;inset:0 0 7% 0;background:linear-gradient(180deg,#FBF7F0,#E9DECD 82%,#DCCDB6);border-radius:999px 999px 6px 6px;overflow:hidden;box-shadow:0 44px 80px -34px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.4)}
.hero-art .arch img{position:absolute;height:auto;aspect-ratio:1/1;mix-blend-mode:multiply;object-fit:contain;transition:transform 1.4s var(--ease)}
.hero-art .arch .h3{width:92%;inset-inline-start:4%;bottom:-6%;z-index:1}
.hero-art .arch .h1{width:58%;inset-inline-start:-12%;bottom:-1%;z-index:2}
.hero-art .arch .h2{width:56%;inset-inline-end:-10%;bottom:0;z-index:2}
.mo .hero-art .arch img{transform:translateY(22px) scale(.96)}
.mo .hero-art.in .arch img{transform:none}
.hero-art:hover .arch .h1{transform:translateY(-6px) rotate(-2deg)}
.hero-art:hover .arch .h2{transform:translateY(-6px) rotate(2deg)}
.hero-art .stamp{top:3%;inset-inline-start:-6%}
.stamp svg circle:first-of-type{fill:#1A0B0A}
.hero-art .pk{display:none}
/* universe tiles: arches with owner images */
.tile .art{position:absolute;inset-block-end:0;inset-inline-end:clamp(14px,3vw,44px);width:clamp(150px,21vw,290px);aspect-ratio:3/4;background:linear-gradient(180deg,#FBF7F0,#E3D7C5);border-radius:999px 999px 0 0;overflow:hidden;z-index:-1;transition:transform .7s var(--ease)}
.tile:nth-child(2) .art,.tile:nth-child(3) .art{width:clamp(130px,17vw,240px)}
.tile .art img{width:130%;max-width:none;height:100%;margin-inline-start:-15%;object-fit:contain;mix-blend-mode:multiply}
.tile:hover .art{transform:translateY(-10px)}
/* catalog */
.dsn{background:#fff;border:1px dashed var(--mute);padding:12px 16px;border-radius:3px;font-size:.88rem;color:var(--ink-2);margin-bottom:18px}
.rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:20px}
.rail button{display:flex;align-items:center;gap:12px;min-height:72px;padding:8px 12px;background:#fff;border:1.5px solid var(--line);border-radius:3px;cursor:pointer;text-align:start;transition:border-color .25s,background .25s,transform .35s var(--ease)}
.rail button:hover{transform:translateY(-3px)}
.rail button[aria-pressed=true]{border-color:var(--maroon);background:#F6E9E6}
.rail .th{flex:none;width:46px;height:56px;border-radius:999px 999px 3px 3px;background:linear-gradient(180deg,#FBF7F0,#E3D7C5);overflow:hidden;display:block}
.rail .th img{width:150%;max-width:none;height:100%;margin-inline-start:-25%;object-fit:contain;mix-blend-mode:multiply}
.pc .ph{text-decoration:none}
.pc .ph img.real{object-fit:contain;mix-blend-mode:multiply;padding:3%}
.pc .ph .pk{width:50%;filter:drop-shadow(0 14px 12px rgba(40,25,15,.18))}
.pc .tag.concept{inset-inline-start:auto;inset-inline-end:10px;background:transparent;color:var(--mute);border:1px dashed var(--mute)}
.pc .more{position:absolute;inset-block-end:10px;inset-inline-end:10px;background:var(--night);color:var(--gold-hi);font-size:.7rem;padding:2px 7px;border-radius:2px}
.pc{content-visibility:auto;contain-intrinsic-size:auto 440px}
.tray{gap:16px;flex-wrap:wrap}
.tray .tq{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tray .tq[hidden]{display:none}
.tray .mono{font-size:.85rem}
body.has-tray{padding-bottom:84px}
@media (max-width:960px){.rail{grid-template-columns:repeat(2,minmax(0,1fr))}.rail button{min-height:64px}}
/* product detail */
.pd-left{position:sticky;top:calc(96px + var(--proto))}
.pd-media{position:relative;top:auto;aspect-ratio:1/1;background:#F6F1E9}
.pd-media .arch-bg{position:absolute;inset:6% 12% 0;background:linear-gradient(180deg,#FFFFFF,#EADFCE);border-radius:999px 999px 0 0;opacity:.9}
.pd-media img.real{position:relative;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:opacity .25s}
.pd-media .pk{position:relative;width:min(52%,320px);filter:drop-shadow(0 26px 22px rgba(40,25,15,.2))}
.pd-media .tag.concept{position:absolute;inset-block-start:12px;inset-inline-end:12px;background:transparent;color:var(--mute);border:1px dashed var(--mute);font:500 .7rem var(--f-mono);padding:3px 9px;border-radius:2px}
.thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.thumbs button{width:76px;height:76px;padding:4px;background:#F6F1E9;border:2px solid var(--line);border-radius:3px;cursor:pointer;transition:border-color .25s,transform .3s var(--ease)}
.thumbs button:hover{transform:translateY(-2px)}
.thumbs button[aria-current=true]{border-color:var(--maroon)}
.thumbs img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
@media (max-width:860px){.pd-left{position:relative;top:auto}}
.qline .th img,.qline .th .pk{mix-blend-mode:multiply;object-fit:contain;width:100%;height:100%}
.qline .th .pk{width:70%}
@media (prefers-reduced-motion:reduce){.mo .hero-art .arch img{transform:none}.thumbs button:hover,.rail button:hover,.tile:hover .art{transform:none}}
@media print{.hdr,.proto,.tray,.sticky-q{display:none}}
/* RTL: email and phone values are always left-to-right; keep the field start aligned to the reading side */
input[dir=ltr]{text-align:start}
[dir=rtl] input[dir=ltr]{text-align:right}
[dir=rtl] input[dir=ltr]::placeholder{direction:rtl}
/* V1.1 a11y: upcoming process steps are muted with a real colour (not opacity) so they stay readable */
.pp-step,.pp-step.on{opacity:1}
.pp-step:not(.on) h3,.pp-step:not(.on) p,.pp-step:not(.on) .no{color:var(--mute)}
.pp-step.on{border-top-color:var(--maroon)}
.pp-step.on h3{color:var(--ink)}
.filters .fh2,.pend-box h2{font:600 1.05rem var(--f-disp);margin-bottom:14px}
.pend-box h2{margin-bottom:8px}
/* V1.1 focus: ring colour follows the background (gold on paper measured 2.49:1, below the 3:1 non-text minimum) */
:focus-visible{outline:3px solid var(--maroon);outline-offset:3px}
.hdr :focus-visible,.hero :focus-visible,.night :focus-visible,.ftr :focus-visible,.phead :focus-visible,.tray :focus-visible,.sticky-q :focus-visible,.proto :focus-visible{outline-color:var(--gold-hi)}
.skip:focus-visible{outline-color:var(--night)}

#lines{min-height:120px}
/* V1.1 fixes found in visual review */
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--maroon);outline-offset:2px}
.field .opts input[type=checkbox],.field .opts input[type=radio]{width:20px;height:20px;min-height:0;padding:0;flex:none}
.opts label{min-height:48px}
/* V1.1 tablet and phone catalog cards: buttons stack instead of wrapping into narrow columns */
@media (max-width:960px){
  .pc .acts{flex-direction:column;align-items:stretch}
  .pc .acts .btn{flex:none;width:100%;justify-content:center}
}
@media (min-width:600px) and (max-width:960px){.grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}