/*
Theme Name: ATG Paint
Theme URI: https://atgpaint.com
Author: CV. Artha Makmur
Author URI: https://atgpaint.com
Description: Tema WordPress untuk ATG Paint (CV. Artha Makmur) — produsen cat industri. Bahasa visual "spec sheet" industri: kertas datasheet hangat, graphite gelap, dan fan deck warna cat sebagai elemen khas. Fokus pada Produk, Kategori, dan Solusi, dengan CTA WhatsApp di seluruh halaman.
Version: 2.1.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: atg-paint
*/

:root{
	--graphite:#15181b;
	--graphite-2:#20242a;
	--paper:#f6f0e2;
	--card:#fdfaf1;
	--ink:#1a1712;
	--ink-soft:#5a5245;
	--signal:#e14e1d;
	--signal-dark:#b93e14;
	--brass:#c69a2e;
	--steel:#4c7a8c;
	--line:#e2d6b8;
	--line-dark:#33383d;
	--radius:2px;
	--display:'Barlow Condensed',sans-serif;
	--body:'IBM Plex Sans',sans-serif;
	--mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.65;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{max-width:100%;height:auto}
.skip-link{position:fixed;top:8px;left:8px;z-index:99;padding:10px 14px;background:var(--card);transform:translateY(-150%)}
.skip-link:focus{transform:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--brass);outline-offset:3px}

/* Fan-deck strip: a genuine RAL-style color run, not a rainbow decoration */
.spectrum-ribbon{height:6px;display:grid;grid-template-columns:repeat(7,1fr);position:relative;z-index:21}
.spectrum-ribbon i:nth-child(1){background:#e14e1d}
.spectrum-ribbon i:nth-child(2){background:#c69a2e}
.spectrum-ribbon i:nth-child(3){background:#8c9a3c}
.spectrum-ribbon i:nth-child(4){background:#4c7a8c}
.spectrum-ribbon i:nth-child(5){background:#3e5a78}
.spectrum-ribbon i:nth-child(6){background:#5b4a6b}
.spectrum-ribbon i:nth-child(7){background:#8c4c2f}

/* ---------- Header ---------- */
.site-header{height:84px;padding:0 max(24px,4vw);display:flex;align-items:center;justify-content:space-between;background:rgba(246,240,226,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:12px}
.brand img,.brand .custom-logo{width:46px;height:46px;object-fit:cover;border-radius:1px}
.brand span{display:grid;line-height:1.15}
.brand strong{font-family:var(--display);font-size:23px;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.brand small{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft)}
.main-nav{display:flex;gap:2px;align-items:center;font-size:14px;font-weight:600}
.main-nav>a:not(.nav-cta){display:flex;align-items:center;height:84px;padding:0 16px;position:relative;transition:color .18s ease}
.main-nav>a:not(.nav-cta):before{content:"";position:absolute;left:16px;right:16px;bottom:0;height:2px;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.main-nav>a:not(.nav-cta):hover,.main-nav>a.active{color:var(--signal-dark)}
.main-nav>a:not(.nav-cta):hover:before,.main-nav>a.active:before{transform:scaleX(1)}
.nav-cta{padding:11px 18px;background:var(--signal);color:#fff;font-weight:700}
.nav-cta:hover{background:var(--signal-dark)}
.menu-button{display:none;background:none;border:0;padding:12px}
.menu-button span{display:block;width:22px;height:2px;background:var(--ink);margin:5px}
.search-trigger{width:40px;height:40px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;margin-left:6px;color:var(--ink)}
.search-trigger svg{width:19px;fill:none;stroke:currentColor;stroke-width:2}

/* ---------- Mega menu (Produk: by Solusi / by Kategori) ---------- */
.nav-item{position:relative}
.nav-mega-trigger{display:flex;align-items:center;gap:6px;height:84px;padding:0 16px;position:relative;background:none;border:0;font:inherit;font-weight:600;color:var(--ink);cursor:pointer;transition:color .18s ease}
.nav-mega-trigger:before{content:"";position:absolute;left:16px;right:16px;bottom:0;height:2px;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.nav-caret{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.5;transition:transform .2s ease}
.nav-item.open .nav-mega-trigger{color:var(--signal-dark)}
.nav-item.open .nav-mega-trigger:before{transform:scaleX(1)}
.nav-item.open .nav-caret{transform:rotate(180deg)}
.nav-mega{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:min(560px,90vw);background:var(--card);border:1px solid var(--line);box-shadow:0 24px 48px #0002;display:grid;grid-template-columns:1fr 1fr;gap:0;opacity:0;visibility:hidden;translate:0 -6px;transition:opacity .18s ease,visibility .18s ease,translate .18s ease;z-index:30}
.nav-item.open .nav-mega{opacity:1;visibility:visible;translate:0 0}
.nav-mega-col{padding:22px 24px;display:flex;flex-direction:column;gap:2px}
.nav-mega-col:first-child{border-right:1px solid var(--line)}
.nav-mega-label{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);margin-bottom:10px}
.nav-mega-col a{padding:7px 0;font-size:13.5px;font-weight:500;color:var(--ink)}
.nav-mega-col a:hover{color:var(--signal-dark)}
.nav-mega-all{margin-top:10px;padding-top:12px!important;border-top:1px dashed var(--line);font-family:var(--mono);font-size:11px!important;font-weight:600!important;text-transform:uppercase}
.nav-mega-empty{font-size:12.5px;color:var(--ink-soft);padding:6px 0}

/* ---------- Search panel ---------- */
body.search-open{overflow:hidden}
.search-panel{position:fixed;inset:0;z-index:90;background:rgba(21,24,27,.98);color:#fff;padding:clamp(80px,12vw,180px) max(24px,12vw);opacity:0;visibility:hidden;transition:.25s}
.search-panel.open{opacity:1;visibility:visible}
.search-panel>div{max-width:1000px;margin:auto}
.search-close{position:absolute;top:28px;right:5vw;border:0;background:none;color:#fff;font-size:44px;line-height:1;cursor:pointer}
.search-panel label{display:block;font:800 clamp(38px,6vw,80px)/1 var(--display);text-transform:uppercase;margin-bottom:28px}
.search-panel input{width:100%;border:0;border-bottom:2px solid #ffffff44;background:transparent;color:#fff;padding:16px 0;font-size:21px;font-family:var(--body)}
.search-panel input::placeholder{color:#8f8f86}
.search-results{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.search-results a{padding:9px 14px;border:1px solid #ffffff33;font-size:12px;font-family:var(--mono)}
.search-results p{color:#a7a89e;font-family:var(--body)}
.eyebrow{margin:0 0 16px;font-family:var(--mono);text-transform:uppercase;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--signal-dark)}
.eyebrow.light{color:var(--brass)}

/* ---------- Hero: fan-deck signature ---------- */
.hero{min-height:calc(100vh - 84px);display:grid;grid-template-columns:1.05fr .95fr;background:var(--graphite);color:#f2ede1;overflow:hidden}
.hero-copy{padding:clamp(64px,9vw,130px) 5vw 64px 8vw}
.hero h1{font-family:var(--display);text-transform:uppercase;line-height:.92;letter-spacing:-.01em;margin:0;font-size:clamp(58px,7vw,108px);max-width:800px;font-weight:800}
.hero h1 span{color:var(--signal)}
.hero-lead{font-size:clamp(16px,1.3vw,19px);max-width:620px;margin:30px 0;color:#c7c2b4}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:13px 22px;font-size:13px;font-weight:700;font-family:var(--body);transition:.2s ease;border:1px solid transparent;border-radius:var(--radius)}
.button-primary{background:var(--signal);color:#fff}
.button-primary:hover{background:var(--signal-dark);transform:translateY(-2px)}
.button-secondary{border-color:#cbbc94;color:var(--ink)}
.button-secondary:hover{border-color:var(--ink);background:var(--card)}
.hero .button-secondary,.color-lab .button-secondary,.sectors .button-secondary{border-color:#ffffff3d;color:#f2ede1}
.hero .button-secondary:hover,.color-lab .button-secondary:hover,.sectors .button-secondary:hover{border-color:#fff;background:#ffffff12}
.button-light{background:var(--paper);color:var(--ink)}
.button-light:hover{background:#fff}
.hero-proof{display:flex;margin:52px 0 0;padding:24px 0 0;border-top:1px solid var(--line-dark);gap:clamp(24px,5vw,64px)}
.hero-proof div{display:grid}
.hero-proof dt{font-family:var(--display);font-size:29px;font-weight:800;line-height:1;color:#fff}
.hero-proof dd{margin:6px 0 0;font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:#8b9096}

.hero-visual{position:relative;background:linear-gradient(160deg,#1c2024,#121517);min-height:600px}
.fan-deck{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:80px}
.fan-deck .chip{position:absolute;bottom:80px;left:50%;width:92px;height:340px;border-radius:6px 6px 60px 60px;transform-origin:50% 100%;box-shadow:0 18px 40px #0007;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:16px;opacity:0;animation:chipSettle .7s cubic-bezier(.2,.9,.25,1) forwards}
.fan-deck .chip span{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:#ffffffcc;background:#00000030;padding:3px 7px;border-radius:20px}
.fan-deck .chip:nth-child(1){--r:-30deg;background:#e14e1d;animation-delay:.05s}
.fan-deck .chip:nth-child(2){--r:-18deg;background:#c69a2e;animation-delay:.12s}
.fan-deck .chip:nth-child(3){--r:-6deg;background:#8c9a3c;animation-delay:.19s}
.fan-deck .chip:nth-child(4){--r:6deg;background:#4c7a8c;animation-delay:.26s}
.fan-deck .chip:nth-child(5){--r:18deg;background:#3e5a78;animation-delay:.33s}
.fan-deck .chip:nth-child(6){--r:30deg;background:#8c4c2f;animation-delay:.4s}
@keyframes chipSettle{from{opacity:0;transform:translateX(-50%) rotate(var(--r)) translateY(40px)}to{opacity:.97;transform:translateX(-50%) rotate(var(--r)) translateY(0)}}
.fan-deck-label{position:absolute;left:0;right:0;bottom:24px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8b9096}
.fan-deck-label span{display:inline-block;width:7px;height:7px;background:var(--signal);border-radius:50%;margin-right:8px;vertical-align:middle}

/* ---------- Trust strip ---------- */
.trust-strip{padding:20px 5vw;display:flex;align-items:center;justify-content:center;gap:clamp(20px,4vw,50px);background:var(--card);border-block:1px solid var(--line);overflow:hidden}
.trust-strip span{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft);white-space:nowrap}
.client-logo-track{display:flex;align-items:center;gap:32px;overflow:auto;scrollbar-width:none;min-width:0;max-width:100%;flex:1}
.client-logo-track::-webkit-scrollbar{display:none}
.client-logo-track figure{margin:0;min-width:110px;height:54px;display:grid;place-items:center}
.client-logo-track img{max-width:110px;max-height:40px;object-fit:contain;filter:grayscale(1);opacity:.7}
.client-logo-track figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ---------- Section shell ---------- */
.section{padding:clamp(70px,9vw,125px) max(24px,7vw)}
.section-head{display:grid;grid-template-columns:1.3fr .7fr;gap:8vw;align-items:end;margin-bottom:50px}
.section h2{font-family:var(--display);text-transform:uppercase;line-height:.94;letter-spacing:-.01em;margin:0;font-size:clamp(42px,5.4vw,74px);font-weight:800}
.section-head p:last-child{color:var(--ink-soft);margin:0;max-width:520px}
.center{text-align:center;margin-top:32px}
.text-button{border:0;background:none;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;padding:12px;color:var(--ink)}
.text-button:hover{color:var(--signal-dark)}
.text-button span{font-size:18px;margin-left:6px}

/* ---------- Product finder ---------- */
.finder{background:var(--paper)}
.finder-heading{text-align:center}
.finder-heading h2{font-size:clamp(42px,5vw,68px)}
.finder-tabs{display:inline-flex;margin-top:28px;border-bottom:1px solid var(--line);gap:28px}
.finder-tabs button{border:0;border-bottom:3px solid transparent;background:none;padding:10px 4px;font-weight:700;font-size:13px;cursor:pointer;color:var(--ink-soft)}
.finder-tabs button.active{color:var(--signal-dark);border-color:var(--signal)}
.finder-grid{display:grid;grid-template-columns:repeat(5,1fr);margin-top:50px;border:1px solid var(--line)}
.finder-grid>button{min-height:210px;border:0;border-right:1px solid var(--line);background:var(--card);padding:26px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:.2s}
.finder-grid>button:last-child{border-right:0}
.finder-grid>button:hover{background:var(--graphite);color:#fff;transform:translateY(-4px)}
.finder-grid strong{font-family:var(--display);font-size:25px;text-transform:uppercase;font-weight:800}
.finder-grid span{font-family:var(--mono);font-size:10px;color:var(--ink-soft)}
.finder-grid button:hover span{color:#b7bdc2}
.finder-index{font:600 40px var(--mono)!important;color:var(--signal)!important}
.finder-note{text-align:center;margin:26px 0 0;font-size:12px;color:var(--ink-soft)}
.finder-note a{font-weight:700;color:var(--signal-dark)}

/* ---------- Products: spec-sheet cards ---------- */
.products{background:var(--card)}
.product-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:12px}
.filter-chips{display:flex;gap:8px;flex-wrap:wrap}
.filter-chips button{padding:8px 14px;border:1px solid var(--line);background:transparent;font-family:var(--mono);font-size:11px;font-weight:600;cursor:pointer;border-radius:20px}
.filter-chips button.active{background:var(--graphite);color:#fff;border-color:var(--graphite)}
#productCount{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}

.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.product-card{position:relative;padding:26px 24px 26px;background:var(--card);min-height:460px;display:flex;flex-direction:column}
.product-card:before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.product-card:hover:before{transform:scaleX(1)}
.product-meta{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.product-meta .chip-dot{width:12px;height:12px;border-radius:3px;background:var(--accent);flex:none}
.product-code{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.05em;color:var(--ink-soft);text-transform:uppercase}
.product-thumb{height:145px;margin:0 -4px 22px;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);overflow:hidden}
.product-thumb img{width:100%;height:100%;object-fit:contain}
.product-card h3{font-family:var(--display);font-size:32px;line-height:1;font-weight:800;text-transform:uppercase;margin:0 0 14px}
.product-card p{font-size:13px;color:var(--ink-soft);margin:0}
.product-card ul{list-style:none;padding:0;margin:14px 0 22px}
.product-card li{font-size:11px;font-weight:600;padding:7px 0;border-bottom:1px dashed var(--line);color:var(--ink)}
.product-card li:before{content:"✓";color:var(--accent);margin-right:8px;font-weight:800}
.product-card a{font-family:var(--mono);font-size:11.5px;font-weight:600;margin-top:auto;padding-top:14px;border-top:1px dashed var(--line);text-transform:uppercase;letter-spacing:.03em}
.product-card a:hover{color:var(--signal-dark)}
.product-card.filtered-out{display:none}
.product-card.catalog-hidden{display:none}

/* ---------- Sectors: stamp codes, not a sequence ---------- */
.sectors{display:grid;grid-template-columns:1fr 1fr;background:var(--graphite);color:#f2ede1;padding-block:0;padding-right:0}
.sector-copy{padding:105px 7vw 105px 0}
.sector-copy p:not(.eyebrow){color:#b6b2a6;max-width:560px;margin:26px 0}
.sector-list{border-left:1px solid var(--line-dark)}
.sector-item{display:grid;grid-template-columns:64px 1fr auto;align-items:center;width:100%;min-height:120px;border:0;border-bottom:1px solid var(--line-dark);background:transparent;color:#f2ede1;text-align:left;padding:24px 7vw 24px 32px;font-family:var(--display);font-size:29px;font-weight:800;text-transform:uppercase;cursor:pointer;transition:.2s}
.sector-item .stamp{font-family:var(--mono);font-size:13px;font-weight:600;width:40px;height:40px;border:1px solid #ffffff3d;border-radius:4px;display:grid;place-items:center;color:#c7c2b4}
.sector-item small{display:block;font:500 10px/1.4 var(--body);text-transform:none;color:#a5a196;margin-top:4px}
.sector-item:hover,.sector-item.active{background:var(--sector-color,var(--signal))}
.sector-item:hover .stamp,.sector-item.active .stamp{border-color:transparent;background:#00000026;color:#fff}
.sector-item:hover small,.sector-item.active small{color:#ffffffd9}

/* ---------- Projects ---------- */
.projects{background:var(--paper)}
.project-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.project-item{position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;background:var(--graphite-2)}
.project-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.project-item:hover img{transform:scale(1.04)}
.project-item figcaption{position:absolute;inset:auto 0 0;padding:50px 16px 16px;color:#fff;background:linear-gradient(transparent,#0d0f10e6);display:grid}
.project-item figcaption span{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#c7c2b4}
.project-item figcaption strong{font-family:var(--display);font-size:19px;text-transform:uppercase;font-weight:800}
.project-item.project-hidden{display:none}

/* ---------- About ---------- */
.about{background:var(--card);display:grid;grid-template-columns:.7fr 1.3fr;gap:9vw;align-items:center}
.about-mark{position:relative;width:min(320px,100%);aspect-ratio:1;background:var(--brass);display:grid;place-items:center;overflow:hidden;border-radius:2px}
.about-mark span,.about-mark strong{position:absolute;font:800 clamp(100px,13vw,195px)/.8 var(--display)}
.about-mark span{left:-4px;top:6px;color:var(--graphite)}
.about-mark strong{right:-4px;bottom:2px;color:var(--graphite);opacity:.55}
.about-mark small{align-self:end;margin-bottom:22px;font-family:var(--mono);text-transform:uppercase;font-size:9px;font-weight:600;letter-spacing:.12em;z-index:2;color:var(--graphite)}
.about-copy>p:not(.eyebrow){font-size:17px;color:var(--ink-soft);max-width:700px}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:42px;border-top:1px solid var(--line)}
.values div{display:grid;padding:22px 20px 0 0}
.values strong{font-size:12px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em}
.values span{font-size:12px;color:var(--ink-soft);margin-top:8px}

/* ---------- Color lab: ambient hue drift (signature motion) ---------- */
.color-lab{position:relative;display:grid;grid-template-columns:.8fr 1.2fr;color:#f2ede1;gap:7vw;overflow:hidden;background:var(--graphite)}
.color-lab:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,#e14e1d,#c69a2e,#4c7a8c,#3e5a78,#8c4c2f,#e14e1d);background-size:400% 400%;opacity:.16;animation:hueDrift 22s ease infinite}
@keyframes hueDrift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.color-intro,.color-preview{position:relative;z-index:1}
.color-intro{padding:38px 0}
.color-intro p:not(.eyebrow){color:#b6b2a6;max-width:500px;margin:26px 0}
.color-preview{min-height:480px;background:#3e5a78;padding:42px;display:flex;flex-direction:column;justify-content:space-between;transition:background .35s ease;border:1px solid #ffffff1f}
.color-meta{display:grid}
.color-meta span{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em}
.color-meta strong{font:800 clamp(50px,6.4vw,92px)/.9 var(--display);text-transform:uppercase;max-width:600px}
.swatches{display:flex;gap:9px;flex-wrap:wrap}
.swatches button{width:46px;height:46px;background:var(--sw);border:4px solid transparent;cursor:pointer;border-radius:3px}
.swatches button.selected{border-color:#fff;outline:1px solid #0006}

/* ---------- CTA ---------- */
.cta-section{text-align:center;padding:115px 24px;max-width:1080px;margin:auto;background:var(--paper)}
.cta-section h2{font-family:var(--display);text-transform:uppercase;line-height:.94;font-weight:800;margin:auto;max-width:800px;font-size:clamp(42px,5.4vw,74px)}
.cta-section>p:not(.eyebrow){max-width:670px;margin:22px auto 32px;color:var(--ink-soft)}
.cta-section>div{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---------- Footer ---------- */
footer{display:grid;grid-template-columns:1.3fr .7fr 1fr;gap:46px;padding:60px 7vw 28px;background:var(--graphite);color:#c7c2b4;font-size:12px}
footer>div{display:flex;flex-direction:column;gap:8px}
footer strong{text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--brass);font-family:var(--mono)}
.footer-brand img{width:64px;height:64px;object-fit:cover}
.footer-brand p{color:#8b9096}
.copyright{grid-column:1/-1;border-top:1px solid var(--line-dark);padding-top:20px;color:#6b7176;font-size:10px;font-family:var(--mono)}

/* ---------- Motion & accessibility ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	.reveal{opacity:1;transform:none;transition:none}
	.button,.sector-item,.color-preview,.product-card:before{transition:none}
	.fan-deck .chip{animation:none;opacity:.97;transform:translateX(-50%) rotate(var(--r))}
	.color-lab:before{animation:none}
}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
	.main-nav{gap:0}
	.main-nav>a:first-child{display:none}
	.hero{grid-template-columns:1fr}
	.hero-visual{min-height:520px}
	.product-grid{grid-template-columns:1fr 1fr}
	.sectors{grid-template-columns:1fr;padding-left:7vw}
	.sector-list{border-top:1px solid var(--line-dark);border-left:0;margin-left:-7vw}
	.about{grid-template-columns:1fr}
	.about-mark{width:280px}
	.color-lab{grid-template-columns:1fr}
	.section-head{grid-template-columns:1fr}
	.trust-strip{justify-content:flex-start}
	.finder-grid{grid-template-columns:repeat(3,1fr)}
	.finder-grid>button{border-bottom:1px solid var(--line)}
	.project-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
	.site-header{height:68px}
	.brand small{display:none}
	.main-nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--paper);padding:20px 24px;flex-direction:column;align-items:stretch;border-bottom:1px solid var(--line)}
	.main-nav.open{display:flex}
	.main-nav>a:not(.nav-cta){height:auto;min-height:50px}
	.main-nav>a:first-child{display:flex}
	.search-trigger{margin:8px 0}
	.nav-mega-trigger{height:auto;min-height:50px;width:100%;justify-content:space-between}
	.nav-mega{position:static;transform:none;width:100%;box-shadow:none;border:0;border-top:1px solid var(--line);grid-template-columns:1fr;display:none;opacity:1;visibility:visible;translate:0}
	.nav-item.open .nav-mega{display:grid}
	.nav-mega-col:first-child{border-right:0;border-bottom:1px solid var(--line)}
	.menu-button{display:block}
	.hero{min-height:auto}
	.hero-copy{padding:64px 24px 50px}
	.hero h1{font-size:56px}
	.hero-visual{min-height:440px}
	.fan-deck .chip{width:64px;height:230px}
	.hero-proof{gap:18px}
	.trust-strip strong:nth-of-type(n+3){display:none}
	.product-grid{grid-template-columns:1fr}
	.product-card{min-height:auto}
	.section{padding:70px 24px}
	.sectors{padding:0 0 0 24px}
	.sector-copy{padding:70px 24px 70px 0}
	.sector-list{margin-left:-24px}
	.sector-item{grid-template-columns:44px 1fr;padding:20px 24px;font-size:23px}
	.sector-item small{grid-column:2}
	.values{grid-template-columns:1fr}
	.color-preview{min-height:400px;padding:26px}
	.swatches button{width:40px;height:40px}
	.about-mark{width:230px}
	.about-mark span,.about-mark strong{font-size:120px}
	.project-grid{grid-template-columns:1fr 1fr}
	.project-item figcaption{padding:32px 12px 12px}
	.project-item figcaption strong{font-size:15px}
	footer{grid-template-columns:1fr}
	.copyright{grid-column:auto}
	.product-toolbar{align-items:flex-start;flex-direction:column}
	.search-panel{padding-top:110px}
}

/* WordPress core alignment helpers */
.alignwide{max-width:1200px;margin-left:auto;margin-right:auto}
.alignfull{width:100%;max-width:none}
.wp-caption,.wp-block-image{max-width:100%}