.elementor-kit-15{--e-global-color-primary:#15233B;--e-global-color-secondary:#B4532A;--e-global-color-text:#3E4757;--e-global-color-accent:#7E9483;--e-global-color-paper:#F6F4F0;--e-global-color-sand:#ECE7DF;--e-global-color-line:#DDD7CD;--e-global-color-muted:#6F7580;--e-global-color-brickdk:#97431F;--e-global-color-white:#FFFFFF;--e-global-typography-primary-font-family:"Plus Jakarta Sans";--e-global-typography-primary-font-weight:800;--e-global-typography-secondary-font-family:"Plus Jakarta Sans";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Plus Jakarta Sans";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"IBM Plex Mono";--e-global-typography-accent-font-weight:500;background-color:#F6F4F0;}.elementor-kit-15 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1240px;}.e-con{--container-max-width:1240px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* WordPress pre-layer: return Astra/WooCommerce element defaults to browser defaults at the same specificity. It sits before the template CSS, so every template rule still wins as in the static samples. */ .woocommerce-js h2{margin-bottom:0} table,td,th{border:revert} table{border-collapse:revert;border-spacing:revert;margin:revert;border-width:revert} fieldset{border:revert;margin:revert;padding:revert} fieldset legend{margin-bottom:revert;padding:revert} blockquote{border-left:revert;padding:revert;font-size:revert;font-style:revert;margin:revert} hr{background-color:revert;border:revert;height:revert;margin-bottom:revert} label,legend{color:inherit;font-size:inherit;font-weight:inherit;line-height:inherit} input:is([type=text],[type=email],[type=number],[type=url],[type=password],[type=search],[type=tel],[type=date],[type=month],[type=file]),select,textarea{all:revert;box-sizing:border-box} input[type=radio]:checked,input[type=checkbox]:checked,input[type=checkbox]:hover:checked,input[type=checkbox]:focus:checked{border-color:revert;background-color:revert;box-shadow:revert} button{all:revert} button:hover,button:focus{background-color:revert;border-color:revert;color:inherit;box-shadow:none} ::selection{background-color:var(--brick-tint);color:var(--ink)} address,dd,dl,dt,figure,h5,h6,iframe,pre{margin:revert;padding:revert} code,kbd,tt,var,pre,samp{font:revert} ::before,::after,.elementor ::before,.elementor ::after{box-sizing:content-box} a{text-decoration:revert} a:focus,a:hover,a:visited{text-decoration:revert} .content-area .elementor-widget-theme-post-content :is(h1,h2,h3,h4,h5,h6){margin:0} .ast-article-single figure,.ast-article-single img:not(figure img){box-shadow:none} /* Layout: "factory spec sheet" — a light paper page on a 12-col grid; product formats drawn as numbered technical sheets, navy bands for process and manufacturing, brick reserved for the two global CTAs and live highlights. Single light look. */ :root{ color-scheme:light; --navy:#15233B; --navy-2:#1E3050; --brick:#B4532A; --brick-dk:#97431F; --brick-tint:#F3DCCD; --paper:#F6F4F0; --white:#FFFFFF; --sand:#ECE7DF; --line:#DDD7CD; --line-dk:#2C3D5C; --ink:#15233B; --text:#3E4757; --muted:#6F7580; --on-navy:#C9D0DC; --on-navy-dim:#8D98AB; --good:#2F7A55; --cm-display:"Plus Jakarta Sans","Segoe UI",Arial,sans-serif; --body:"Plus Jakarta Sans","Segoe UI",Arial,sans-serif; --mono:"IBM Plex Mono",Consolas,"Courier New",monospace; --wrap:1240px; --r:2px; --hdr:76px; } :root *{box-sizing:border-box} html:root{scroll-behavior:smooth} :root body{background:var(--paper);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} :root body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--white)} :root h1,:root h2,:root h3,:root h4{font-family:var(--cm-display);color:var(--ink);margin:0;text-wrap:balance;line-height:1.12} :root h2{font-size:clamp(28px,3.4vw,44px);font-weight:800;letter-spacing:-.02em} :root h3{font-size:19px;font-weight:700;letter-spacing:-.005em} :root p{margin:0} :root a{color:inherit} :root ul,:root ol{margin:0;padding:0;list-style:none} :root button{font:inherit;color:inherit;cursor:pointer} :root :focus-visible{outline:2px solid var(--brick);outline-offset:3px} :root .wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))} @media(min-width:760px){:root .wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}} :root .eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--brick)} :root .lede{font-size:18px;color:var(--text);max-width:62ch} :root .sec{padding-block:clamp(64px,9vw,120px)} :root .sec-head{display:grid;gap:16px;max-width:760px;margin-bottom:clamp(32px,4.5vw,56px)} :root .sec-head.split{max-width:none;grid-template-columns:1fr;align-items:end} @media(min-width:960px){:root .sec-head.split{grid-template-columns:1.1fr .9fr;gap:48px}} /* buttons */ :root .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--r);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;border:1.5px solid transparent;transition:background .2s,color .2s,border-color .2s,transform .2s} :root .btn svg{width:16px;height:16px;transition:transform .2s} :root .btn:hover svg{transform:translateX(3px)} :root .btn-p{background:var(--brick);color:#fff} :root .btn-p:hover{background:var(--brick-dk)} :root .btn-o{border-color:var(--navy);color:var(--navy);background:transparent} :root .btn-o:hover{background:var(--navy);color:#fff} :root .btn-w{border-color:rgba(255,255,255,.5);color:#fff} :root .btn-w:hover{background:#fff;color:var(--navy)} :root .link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--navy);text-decoration:none;letter-spacing:.02em;border-bottom:1.5px solid currentColor;padding-bottom:2px} :root .link svg{width:14px;height:14px;transition:transform .2s} :root .link:hover{color:var(--brick)} :root .link:hover svg{transform:translateX(3px)} /* ---------- header ---------- */ :root .top{background:var(--navy);color:var(--on-navy);font-size:13px} :root .top .wrap{display:flex;justify-content:space-between;gap:16px;min-height:38px;align-items:center} :root .top a{text-decoration:none;color:#fff} :root .top .r{display:flex;gap:18px;align-items:center;white-space:nowrap} :root .top .r span{color:var(--on-navy-dim)} @media(max-width:860px){:root .top .l{display:none}:root .top .wrap{justify-content:center}} :root .hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--white);border-bottom:1px solid var(--line);transition:box-shadow .25s} :root .hdr.small{box-shadow:0 6px 24px rgba(21,35,59,.08)} :root .hdr>.wrap,:root .top>.wrap{max-width:1440px} :root .hdr>.wrap{display:flex;align-items:center;gap:28px;height:var(--hdr);transition:height .25s} :root .hdr.small>.wrap{height:62px} :root .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy);font-weight:800;letter-spacing:.24em;font-size:19px;flex:none} :root .logo svg{width:30px;height:30px;color:var(--brick)} :root .nav{display:flex;align-items:stretch;height:100%;gap:2px;margin-left:8px} :root .nav>li{position:relative;display:flex;align-items:center} :root .nav>li.mega-host{position:static} :root .nav-a{display:flex;align-items:center;gap:6px;height:100%;padding:0 12px;background:none;border:0;text-decoration:none;font-size:14.5px;font-weight:600;color:var(--navy);white-space:nowrap;position:relative} :root .nav-a::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--brick);transform:scaleX(0);transform-origin:left;transition:transform .25s} :root .nav>li:hover>.nav-a::after,:root .nav>li.open>.nav-a::after{transform:scaleX(1)} :root .nav-a .car{width:10px;height:10px;transition:transform .2s;color:var(--muted)} :root .nav>li:hover .car,:root .nav>li.open .car{transform:rotate(180deg)} :root .hdr-cta{margin-left:auto;display:flex;align-items:center;gap:10px} :root .icon-btn{width:44px;height:44px;display:grid;place-items:center;border:0;background:none;color:var(--navy);border-radius:var(--r)} :root .icon-btn:hover{background:var(--sand)} :root .icon-btn svg{width:20px;height:20px} :root .hdr .btn{min-height:42px;padding:0 16px;font-size:12.5px} :root .burger{display:none} @media(max-width:1380px){:root .hdr .btn-o{display:none}:root .nav-a{padding:0 10px}} @media(max-width:1180px){:root .nav,:root .hdr .btn-o,:root .hdr .btn-p.desk{display:none}:root .burger{display:grid}:root .hdr>.wrap{gap:8px}:root .hdr-cta{gap:4px}} /* dropdowns */ :root .dd{position:absolute;top:100%;left:0;min-width:260px;background:var(--white);border:1px solid var(--line);border-top:2px solid var(--brick);box-shadow:0 24px 48px rgba(21,35,59,.12);padding:22px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s,transform .18s,visibility .18s;display:grid;gap:28px;grid-auto-flow:column} :root .nav>li:hover>.dd,:root .nav>li.open>.dd,:root .nav>li:focus-within>.dd{opacity:1;visibility:visible;transform:none} :root .dd h4,:root .mega h4{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px} :root .dd a,:root .mega a{display:block;padding:6px 0;text-decoration:none;color:var(--navy);font-size:14.5px;font-weight:500;white-space:nowrap;transition:color .15s,transform .15s} :root .dd a:hover,:root .mega a:hover{color:var(--brick);transform:translateX(3px)} :root .dd .all{font-weight:700;margin-top:4px;border-top:1px solid var(--line);padding-top:10px} :root .mega{position:absolute;top:100%;left:0;right:0;background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 30px 60px rgba(21,35,59,.12);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s,transform .18s,visibility .18s} :root .nav>li:hover>.mega,:root .nav>li.open>.mega,:root .nav>li:focus-within>.mega{opacity:1;visibility:visible;transform:none} :root .mega-in{display:grid;grid-template-columns:repeat(4,1fr) 290px;gap:32px;padding-block:32px} :root .mega-foot{grid-column:1/5;display:flex;gap:28px;border-top:1px solid var(--line);padding-top:16px} :root .mega-foot a{font-weight:700;display:inline-flex} :root .mega-card{grid-column:5;grid-row:1/3;background:var(--paper);border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:12px} :root .mega-card .pic{aspect-ratio:4/3;background:var(--sand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M20 0H0V20' fill='none' stroke='%23DDD7CD'/%3E%3C/svg%3E");display:grid;place-items:center;color:var(--navy)} :root .mega-card .pic svg{width:58%;height:auto} :root .mega-card b{color:var(--navy);font-size:16px} :root .mega-card p{font-size:14px} :root .mega-card a.btn{color:#fff;padding:0 16px;font-size:12px;white-space:nowrap} :root .mega-card a.btn:hover{color:#fff;transform:none} /* drawer */ :root .scrim{position:fixed;inset:0;background:rgba(21,35,59,.4);z-index:70;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s} :root .drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--white);z-index:80;transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-right:env(safe-area-inset-right,0px)} :root body.menu-open .scrim{opacity:1;visibility:visible} :root body.menu-open .drawer{transform:none} :root body.menu-open{overflow:hidden} :root .drawer-top{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 12px 0 20px;border-bottom:1px solid var(--line)} :root .drawer-search{margin:16px 20px 4px;display:flex;align-items:center;gap:10px;border:1px solid var(--line);padding:0 12px;height:46px;border-radius:var(--r)} :root .drawer-search svg{width:18px;height:18px;color:var(--muted);flex:none} :root .drawer-search input{border:0;outline:0;font:inherit;font-size:15px;width:100%;background:transparent;color:var(--ink)} :root .drawer-body{flex:1;overflow-y:auto;padding:8px 20px 20px} :root .acc>button,:root .acc>a{display:flex;width:100%;justify-content:space-between;align-items:center;padding:15px 0;border:0;border-bottom:1px solid var(--line);background:none;font-weight:700;font-size:16px;color:var(--navy);text-decoration:none;text-align:left} :root .acc>button svg{width:12px;height:12px;transition:transform .2s} :root .acc.open>button svg{transform:rotate(180deg)} :root .acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s} :root .acc.open>.acc-panel{grid-template-rows:1fr} :root .acc-panel>div{overflow:hidden} :root .acc-panel a{display:block;padding:9px 0 9px 12px;text-decoration:none;color:var(--text);font-size:15px} :root .acc-panel h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:14px 0 4px 12px;font-weight:500} :root .acc-panel .sub>button{display:flex;width:100%;justify-content:space-between;align-items:center;border:0;background:none;padding:11px 0 11px 12px;font-weight:600;font-size:15px;color:var(--navy)} :root .acc-panel .sub>button svg{width:10px;height:10px;transition:transform .2s} :root .acc-panel .sub.open>button svg{transform:rotate(180deg)} :root .acc-panel .sub .acc-panel a{padding-left:24px} :root .acc-panel>div>:last-child{margin-bottom:10px} :root .drawer-cta{display:grid;gap:10px;padding:16px 20px;border-top:1px solid var(--line)} /* bottom bar (mobile) */ :root .mbar{display:none} @media(max-width:760px){ :root .mbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--white);border-top:1px solid var(--line);padding:8px max(12px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));gap:8px;box-shadow:0 -6px 20px rgba(21,35,59,.08)} :root .mbar .btn{min-height:46px;font-size:13px} :root .mbar .wa{background:#1F7A4D;color:#fff} :root body{padding-bottom:72px} } /* ---------- hero ---------- */ :root .hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden} :root .hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:40px 40px;opacity:.35;mask-image:linear-gradient(90deg,transparent 0,#000 55%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 55%);pointer-events:none} :root .hero .wrap{position:relative;display:grid;gap:48px;padding-block:clamp(48px,7vw,96px) clamp(48px,6vw,80px);grid-template-columns:1fr} @media(min-width:1000px){:root .hero .wrap{grid-template-columns:1.02fr .98fr;align-items:center;gap:56px}} :root .hero-copy{display:grid;gap:24px;min-width:0} :root .hero h1{font-size:clamp(40px,5.6vw,76px);font-weight:800;letter-spacing:-.035em;line-height:1.02} :root .hero h1 em{font-style:normal;color:var(--brick);position:relative;white-space:nowrap} :root .hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.09em;background:var(--brick);transform-origin:left;animation:ul 1s .5s cubic-bezier(.6,0,.2,1) both} @keyframes ul{from{transform:scaleX(0)}to{transform:scaleX(1)}} :root .hero .lede{font-size:clamp(17px,1.4vw,19px)} :root .hero-btns{display:flex;flex-wrap:wrap;gap:12px} :root .trust{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;max-width:560px} :root .trust svg{width:18px;height:18px;color:var(--good);flex:none} :root .board{min-width:0;display:grid;gap:0} :root .tabs{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;border:1px solid var(--navy);border-bottom:0;background:var(--white)} :root .tabs::-webkit-scrollbar{display:none} :root .tab{flex:1 0 auto;border:0;border-right:1px solid var(--line);background:none;padding:12px 14px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);position:relative;white-space:nowrap} :root .tab:last-child{border-right:0} :root .tab[aria-selected="true"]{color:var(--navy);background:var(--paper);font-weight:600} :root .tab .bar{position:absolute;left:0;right:0;top:0;height:2px;background:var(--brick);transform:scaleX(0);transform-origin:left} :root .tab[aria-selected="true"] .bar{transform:scaleX(1)} :root .board.auto .tab[aria-selected="true"] .bar{animation:tick 4.5s linear both} @keyframes tick{from{transform:scaleX(0)}to{transform:scaleX(1)}} :root .sheet{background:var(--white);border:1px solid var(--navy);box-shadow:10px 10px 0 var(--navy);position:relative} :root .sheet-head{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);padding:10px 14px;border-bottom:1px solid var(--navy)} :root .sheet-head span:nth-child(2){color:var(--muted)} :root .sheet-art{position:relative;aspect-ratio:16/10.5;background-image:linear-gradient(#EEEAE3 1px,transparent 1px),linear-gradient(90deg,#EEEAE3 1px,transparent 1px);background-size:20px 20px;background-position:-1px -1px;color:var(--navy);overflow:hidden} :root .sheet-art svg.fig{position:absolute;inset:6% 0 0;margin:auto;height:88%;width:100%;transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.2,1)} :root .sheet-art svg.fig.out{opacity:0;transform:translateY(10px) scale(.97)} :root .dim{position:absolute;font-family:var(--mono);font-size:11px;color:var(--brick);letter-spacing:.06em} :root .dim.d1{left:14px;top:12px} :root .dim.d2{right:14px;bottom:12px;color:var(--muted)} :root .cross{position:absolute;width:14px;height:14px;color:var(--muted)} :root .cross.c1{right:12px;top:12px}:root .cross.c2{left:12px;bottom:12px} :root .parts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--navy)} :root .parts li{display:flex;gap:10px;padding:12px 14px;font-size:13px;line-height:1.4;color:var(--navy);border-right:1px solid var(--line);min-width:0} :root .parts li:last-child{border-right:0} :root .parts b{flex:none;width:20px;height:20px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:500} :root .parts span{transition:opacity .3s} :root .parts small{display:block;color:var(--muted);font-size:12px} @media(max-width:560px){:root .parts{grid-template-columns:1fr}:root .parts li{border-right:0;border-bottom:1px solid var(--line)}:root .parts li:last-child{border-bottom:0}:root .sheet{box-shadow:6px 6px 0 var(--navy)}} /* ticker */ :root .ticker{background:var(--navy);color:var(--on-navy);overflow:hidden;border-bottom:1px solid var(--navy)} :root .ticker-track{display:flex;width:max-content;animation:tk 55s linear infinite} :root .ticker:hover .ticker-track{animation-play-state:paused} :root .ticker ul{display:flex;flex:none} :root .ticker li{display:flex;align-items:center;gap:14px;padding:16px 0 16px 28px;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap} :root .ticker li::after{content:"";width:6px;height:6px;background:var(--brick);transform:rotate(45deg)} :root .ticker li span{color:var(--on-navy-dim)} @keyframes tk{to{transform:translateX(-50%)}} /* ---------- routes ---------- */ :root .routes{display:grid;gap:20px;grid-template-columns:1fr} @media(min-width:900px){:root .routes{grid-template-columns:repeat(3,1fr)}} :root .route{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);text-decoration:none;color:inherit;transition:border-color .25s,transform .25s,box-shadow .25s;min-width:0} :root .route:hover{border-color:var(--navy);transform:translateY(-4px);box-shadow:0 18px 40px rgba(21,35,59,.1)} :root .route .pic{position:relative;aspect-ratio:16/10;background:var(--sand);display:grid;place-items:center;color:var(--navy);overflow:hidden;border-bottom:1px solid var(--line)} :root .route .pic svg{width:86%;height:86%;transition:transform .5s cubic-bezier(.2,.7,.2,1)} :root .route:hover .pic svg{transform:scale(1.04)} :root .route .who{position:absolute;left:14px;top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:var(--white);color:var(--navy);padding:5px 8px;border:1px solid var(--line)} :root .route .body{display:grid;gap:12px;padding:26px 24px 24px;flex:1;align-content:start} :root .route h3{font-size:22px} :root .route p{font-size:15px} :root .route .link{margin-top:auto;justify-self:start} :root .route .body>:last-child{margin-top:8px} :root .aside-line{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:15px;padding:16px 20px;border:1px dashed var(--line);background:rgba(255,255,255,.5)} :root .aside-line .link{font-size:14px} /* ---------- formats ---------- */ :root .formats{background:var(--white);border-block:1px solid var(--line)} :root .fgrid{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)} @media(min-width:640px){:root .fgrid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){:root .fgrid{grid-template-columns:repeat(3,1fr)}} :root .fcard{position:relative;display:flex;flex-direction:column;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 24px 26px;gap:14px;min-width:0;transition:background .25s} :root .fcard:hover{background:var(--paper)} :root .fcard .no{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase} :root .fcard .no b{color:var(--brick);font-weight:500} :root .fcard .pic{aspect-ratio:5/3.4;display:grid;place-items:center;color:var(--navy);position:relative} :root .fcard .pic::before{content:"";position:absolute;inset:8% 18%;border-radius:50%;background:radial-gradient(closest-side,var(--sand),transparent);transition:transform .4s} :root .fcard:hover .pic::before{transform:scale(1.15)} :root .fcard .pic svg{position:relative;height:100%;width:auto;max-width:100%;transition:transform .45s cubic-bezier(.2,.7,.2,1)} :root .fcard:hover .pic svg{transform:translateY(-6px) rotate(-3deg)} :root .fcard p{font-size:15px} :root .fcard .links{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:auto;padding-top:6px} :root .fgrid-foot{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:32px;align-items:center} :root .fgrid-foot .btn{white-space:normal;text-align:center;padding-block:10px} /* ---------- mix ---------- */ :root .mix{display:grid;gap:40px;grid-template-columns:1fr;align-items:center} @media(min-width:960px){:root .mix{grid-template-columns:.9fr 1.1fr;gap:64px}} :root .mix-copy{display:grid;gap:20px;min-width:0} :root .chips{display:flex;flex-wrap:wrap;gap:8px} :root .chip{border:1px solid var(--line);background:var(--white);padding:8px 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--navy);transition:all .2s} :root .chip:hover{border-color:var(--navy)} :root .chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff} :root .shelf{background:var(--white);border:1px solid var(--line);min-width:0} :root .shelf-head{display:flex;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} :root .shelf-head b{color:var(--navy);font-weight:600} :root .tier{display:grid;grid-template-columns:118px 1fr;border-bottom:1px solid var(--line);min-height:108px} :root .tier:last-child{border-bottom:0} :root .tier .lab{padding:16px 18px;border-right:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;justify-content:space-between} :root .tier .lab b{display:block;color:var(--navy);font-family:var(--body);font-size:15px;letter-spacing:0;text-transform:none;font-weight:700;margin-top:4px} :root .tier .lab i{font-style:normal;display:flex;gap:3px} :root .tier .lab i::before,:root .tier .lab i::after{content:""} :root .tier .lab .lv{display:flex;gap:3px} :root .tier .lab .lv s{width:14px;height:4px;background:var(--line);text-decoration:none} :root .tier .lab .lv s.on{background:var(--brick)} :root .tier .items{display:flex;align-items:center;gap:14px;padding:14px 18px;flex-wrap:wrap} :root .item{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);padding:6px 12px 6px 6px;font-size:14px;font-weight:600;color:var(--navy);animation:pop .4s cubic-bezier(.2,.7,.2,1) both} :root .item svg{width:38px;height:38px;background:var(--white);border:1px solid var(--line);padding:3px} @keyframes pop{from{opacity:.001;transform:translateY(6px)}to{opacity:1;transform:none}} @media(max-width:520px){:root .tier{grid-template-columns:1fr}:root .tier .lab{border-right:0;border-bottom:1px dashed var(--line);flex-direction:row;align-items:center}} /* ---------- spec builder ---------- */ :root .spec{background:var(--sand);border-block:1px solid var(--line)} :root .spec-grid{display:grid;gap:24px;grid-template-columns:1fr} @media(min-width:1000px){:root .spec-grid{grid-template-columns:repeat(3,1fr) 1.05fr;gap:0}} :root .pillar{background:var(--white);border:1px solid var(--line);padding:26px 24px;display:grid;gap:14px;align-content:start;min-width:0} @media(min-width:1000px){:root .pillar{border-right:0}} :root .pillar .k{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brick)} :root .pillar .k svg{width:22px;height:22px;color:var(--navy)} :root .pillar p{font-size:15px} :root .pillar .chips{gap:6px} :root .pillar .chip{font-size:13px;padding:6px 12px} :root .out{background:var(--navy);color:var(--on-navy);padding:26px 24px;display:flex;flex-direction:column;gap:16px;min-width:0;position:relative} :root .out .k{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-navy-dim);display:flex;justify-content:space-between} :root .out .ref{padding-right:78px;font-family:var(--mono);font-size:clamp(18px,1.8vw,22px);color:#fff;letter-spacing:.04em;word-break:break-word} :root .out dl{margin:0;display:grid;gap:0;border-top:1px solid var(--line-dk)} :root .out dl div{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-dk);font-size:14.5px} :root .out dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-navy-dim);padding-top:2px} :root .out dd{margin:0;color:#fff;font-weight:600} :root .out .note{font-size:14px;line-height:1.55;color:var(--on-navy);border-left:2px solid var(--brick);padding-left:12px} :root .out .stamp{position:absolute;right:18px;top:54px;width:70px;height:70px;border:1.5px solid var(--brick);border-radius:50%;display:grid;place-items:center;text-align:center;font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:#E08B63;transform:rotate(-12deg);line-height:1.3} :root .out .flash{animation:fl .5s} @keyframes fl{from{color:#E08B63}to{color:#fff}} :root .out .link{color:#fff;align-self:flex-start;margin-top:auto} :root .out .link:hover{color:#E08B63} /* ---------- process ---------- */ :root .dark{background:var(--navy);color:var(--on-navy)} :root .dark h2,:root .dark h3{color:#fff} :root .dark .lede{color:var(--on-navy)} :root .dark .eyebrow{color:#E08B63} :root .steps{position:relative;display:grid;gap:0;grid-template-columns:1fr;counter-reset:s} @media(min-width:1000px){:root .steps{grid-template-columns:repeat(5,1fr)}} :root .rail{position:absolute;background:var(--line-dk)} :root .rail i{position:absolute;inset:0;background:#E08B63;transform-origin:left top} @media(min-width:1000px){:root .rail{left:0;right:0;top:21px;height:2px}:root .rail i{transform:scaleX(var(--p,0))}} @media(max-width:999px){:root .rail{left:21px;top:0;bottom:0;width:2px}:root .rail i{transform:scaleY(var(--p,0))}} :root .step{position:relative;display:grid;gap:12px;padding:0 24px 36px 0;align-content:start} @media(max-width:999px){:root .step{padding:0 0 32px 64px}} :root .step .dot{width:44px;height:44px;border-radius:50%;border:2px solid var(--line-dk);background:var(--navy);display:grid;place-items:center;font-family:var(--mono);font-size:14px;color:var(--on-navy-dim);transition:all .3s;position:relative;z-index:1} @media(max-width:999px){:root .step .dot{position:absolute;left:0;top:-4px}} :root .step.on .dot{border-color:#E08B63;background:#E08B63;color:var(--navy);font-weight:600} :root .step h3{font-size:18px} :root .step p{font-size:14.5px;color:var(--on-navy)} :root .process-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px} /* ---------- manufacturing ---------- */ :root .mfg{display:grid;gap:40px;grid-template-columns:1fr} @media(min-width:1000px){:root .mfg{grid-template-columns:1fr 1fr;gap:64px;align-items:start}} :root .mfg-copy{display:grid;gap:22px;min-width:0} :root .stages{display:flex;flex-wrap:wrap;gap:8px} :root .stages li{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);padding:7px 10px;background:var(--white);color:var(--navy)} :root .qc{background:var(--white);border:1px solid var(--line)} :root .qc-head{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:12px 18px;border-bottom:1px solid var(--line)} :root .qc table{width:100%;border-collapse:collapse;font-size:14.5px} :root .qc td{padding:13px 18px;border-bottom:1px solid var(--line);color:var(--navy);vertical-align:top} :root .qc tr:last-child td{border-bottom:0} :root .qc td:first-child{font-family:var(--mono);font-size:12px;color:var(--muted);width:64px;white-space:nowrap} :root .qc td:last-child{text-align:right;white-space:nowrap} :root .qc td small{display:block;color:var(--muted);font-size:13px} :root .ok{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--good);border:1px solid currentColor;padding:3px 8px;opacity:.25;transition:opacity .4s} :root .ok.in{opacity:1} :root .ok svg{width:12px;height:12px} :root .photos{display:grid;grid-template-columns:1.25fr 1fr;gap:12px;margin-bottom:12px} :root .ph{aspect-ratio:4/3;position:relative;overflow:hidden;color:var(--navy);display:grid;place-items:center;border:1px solid var(--line)} :root .ph.a{background:linear-gradient(160deg,#E4DED4,#D3CBBE)} :root .ph.b{background:linear-gradient(160deg,#EAE5DD,#DCD4C8)} :root .ph svg{width:100%;height:100%} :root .ph .cap{position:absolute;left:10px;bottom:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.85);padding:4px 7px;color:var(--navy)} :root .links-row{display:flex;flex-wrap:wrap;gap:10px 22px} /* ---------- market ---------- */ :root .market{background:var(--white);border-block:1px solid var(--line)} :root .mgrid{display:grid;gap:0;grid-template-columns:1fr;border:1px solid var(--line)} @media(min-width:700px){:root .mgrid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1100px){:root .mgrid{grid-template-columns:repeat(4,1fr)}} :root .mitem{padding:26px 24px 28px;display:grid;gap:12px;align-content:start;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0;background:var(--white);transition:background .2s} :root .mitem:hover{background:var(--paper)} @media(min-width:1100px){:root .mitem{border-bottom:0}:root .mitem:last-child{border-right:0}} @media(min-width:700px) and (max-width:1099px){:root .mitem:nth-child(2n){border-right:0}:root .mitem:nth-child(n+3){border-bottom:0}} @media(max-width:699px){:root .mitem{border-right:0}:root .mitem:last-child{border-bottom:0}} :root .mitem .ic{width:52px;height:52px;border:1px solid var(--line);display:grid;place-items:center;color:var(--brick);background:var(--paper)} :root .mitem .ic svg{width:26px;height:26px} :root .mitem p{font-size:15px} :root .mitem code{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em} /* ---------- coman range ---------- */ :root .range{background:var(--brick);color:#FBEDE5;position:relative;overflow:hidden} :root .range .wrap{display:grid;gap:28px;grid-template-columns:1fr;padding-block:clamp(48px,6vw,72px);align-items:center;position:relative} @media(min-width:900px){:root .range .wrap{grid-template-columns:1.2fr .8fr}} :root .range h2{color:#fff} :root .range .eyebrow{color:#FFD2BD} :root .range p{font-size:17px;max-width:58ch} :root .range .packs{display:flex;justify-content:center;gap:10px;color:#fff} :root .range .packs svg{width:31%;max-width:150px;height:auto} :root .range .btn{background:#fff;color:var(--brick)} :root .range .btn:hover{background:var(--navy);color:#fff} :root .range::after{content:"COMAN";position:absolute;right:-2%;bottom:-.24em;font-weight:800;font-size:clamp(120px,18vw,260px);letter-spacing:.06em;color:rgba(255,255,255,.07);line-height:1;pointer-events:none} /* ---------- faq ---------- */ :root .faq-wrap{display:grid;gap:40px;grid-template-columns:1fr} @media(min-width:960px){:root .faq-wrap{grid-template-columns:.8fr 1.2fr;gap:64px}} :root .faq-side{display:grid;gap:18px;align-content:start} @media(min-width:960px){:root .faq-side{position:sticky;top:110px}} :root .faq{border-top:1px solid var(--navy)} :root .faq details{border-bottom:1px solid var(--line)} :root .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-weight:700;font-size:18px;color:var(--navy);align-items:center} :root .faq summary::-webkit-details-marker{display:none} :root .faq summary .pm{flex:none;width:28px;height:28px;border:1px solid var(--line);display:grid;place-items:center;position:relative;transition:background .2s,border-color .2s} :root .faq summary .pm::before,:root .faq summary .pm::after{content:"";position:absolute;width:12px;height:1.5px;background:var(--navy);transition:transform .25s} :root .faq summary .pm::after{transform:rotate(90deg)} :root .faq details[open] summary .pm{background:var(--navy);border-color:var(--navy)} :root .faq details[open] summary .pm::before,:root .faq details[open] summary .pm::after{background:#fff} :root .faq details[open] summary .pm::after{transform:rotate(0)} :root .faq summary:hover{color:var(--brick)} :root .faq .ans{padding:0 48px 24px 0;display:grid;gap:12px;font-size:16px} :root .faq .ans .link{justify-self:start;font-size:13.5px} /* ---------- guides ---------- */ :root .guides{display:grid;gap:20px;grid-template-columns:1fr} @media(min-width:800px){:root .guides{grid-template-columns:repeat(3,1fr)}} :root .guide{display:flex;flex-direction:column;gap:14px;border-top:2px solid var(--navy);padding-top:18px;text-decoration:none;color:inherit} :root .guide .meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} :root .guide .meta b{color:var(--brick);font-weight:500} :root .guide h3{font-size:21px;transition:color .2s} :root .guide:hover h3{color:var(--brick)} :root .guide p{font-size:15px} :root .guide .pic{aspect-ratio:16/9;background:var(--sand);display:grid;place-items:center;color:var(--navy);overflow:hidden} :root .guide .pic svg{width:60%;height:80%;transition:transform .4s} :root .guide:hover .pic svg{transform:scale(1.05)} :root .guides-foot{margin-top:32px} /* ---------- inquiry ---------- */ :root .inq{background:var(--navy);color:var(--on-navy);position:relative;overflow:hidden} :root .inq::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:40px 40px;pointer-events:none} :root .inq .wrap{position:relative;display:grid;gap:40px;grid-template-columns:1fr;padding-block:clamp(64px,8vw,110px)} @media(min-width:1000px){:root .inq .wrap{grid-template-columns:.85fr 1.15fr;gap:72px;align-items:start}} :root .inq h2{color:#fff;font-size:clamp(32px,4vw,52px)} :root .inq .eyebrow{color:#E08B63} :root .inq .lede{color:var(--on-navy)} :root [hidden]{display:none!important} :root .inq-copy{display:grid;gap:22px;align-content:start} :root .next{display:grid;gap:0;border-top:1px solid var(--line-dk);margin-top:8px} :root .next li{display:grid;grid-template-columns:36px 1fr;padding:13px 0;border-bottom:1px solid var(--line-dk);font-size:15px} :root .next li span{font-family:var(--mono);font-size:12px;color:#E08B63;padding-top:2px} :root .inq-copy .link{color:#fff;justify-self:start} :root .inq-copy .link:hover{color:#E08B63} :root form.card{background:var(--white);color:var(--text);padding:clamp(22px,3vw,36px);border-top:3px solid var(--brick);display:grid;gap:18px;grid-template-columns:1fr 1fr;position:relative;min-width:0} @media(max-width:620px){:root form.card{grid-template-columns:1fr}} :root .f{display:grid;gap:7px;min-width:0} :root .f.full{grid-column:1/-1} :root .f label{font-size:13px;font-weight:700;color:var(--navy);letter-spacing:.02em} :root .f label i{font-style:normal;color:var(--brick)} :root .f label small{font-weight:500;color:var(--muted)} :root .f input,:root .f select,:root .f textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px 13px;transition:border-color .2s,background .2s;min-height:48px} :root .f textarea{min-height:110px;resize:vertical} :root .f input:focus,:root .f select:focus,:root .f textarea:focus{outline:0;border-color:var(--navy);background:var(--white)} :root .f.bad input,:root .f.bad select{border-color:#C0392B;background:#FDF3F1} :root .f .err{font-size:12.5px;color:#B03A2E;display:none} :root .f.bad .err{display:block} :root .drop{display:flex;align-items:center;gap:12px;border:1.5px dashed var(--line);padding:14px;border-radius:var(--r);background:var(--paper);cursor:pointer;font-size:14px;transition:border-color .2s} :root .drop:hover,:root .drop.over{border-color:var(--navy)} :root .drop svg{width:22px;height:22px;color:var(--muted);flex:none} :root .drop input{position:absolute;width:1px;height:1px;opacity:0} :root .drop b{color:var(--navy)} :root .form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px} :root .form-foot small{font-size:13px;color:var(--muted);max-width:42ch} :root .done{position:absolute;inset:0;background:var(--white);display:grid;place-content:center;justify-items:center;text-align:center;gap:14px;padding:32px} :root .done .tick{width:64px;height:64px;border-radius:50%;background:#E5F1EA;color:var(--good);display:grid;place-items:center} :root .done .tick svg{width:30px;height:30px} :root .done h3{font-size:24px} :root .done p{max-width:40ch} /* ---------- footer ---------- */ :root .foot{background:#0F1A2D;color:var(--on-navy-dim);font-size:14.5px} :root .foot .wrap{padding-block:64px 0} :root .fcols{display:grid;gap:36px;grid-template-columns:1.5fr repeat(4,1fr)} :root .fcols h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;font-weight:500;margin-bottom:14px} :root .fcols a{color:var(--on-navy);text-decoration:none;display:block;padding:5px 0;transition:color .15s} :root .fcols a:hover{color:#E08B63} :root .fbrand{display:grid;gap:16px;align-content:start} :root .fbrand .logo{color:#fff} :root .fbrand p{max-width:36ch;color:var(--on-navy)} :root .contact-list{display:grid;gap:8px} :root .contact-list div{display:flex;gap:10px;align-items:center;color:var(--on-navy)} :root .contact-list svg{width:16px;height:16px;color:#E08B63;flex:none} :root .copy-btn{border:1px solid var(--line-dk);background:none;color:var(--on-navy-dim);font-size:11px;font-family:var(--mono);padding:2px 7px;letter-spacing:.06em} :root .copy-btn:hover{color:#fff;border-color:#fff} :root .fcol>button{display:none} :root .fbottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;border-top:1px solid var(--line-dk);margin-top:56px;padding-block:22px calc(22px + env(safe-area-inset-bottom,0px));font-size:13px} :root .fbottom nav{display:flex;flex-wrap:wrap;gap:6px 18px} :root .fbottom a,:root .fbottom button{color:var(--on-navy-dim);text-decoration:none;background:none;border:0;padding:0;font-size:13px} :root .fbottom a:hover,:root .fbottom button:hover{color:#fff} @media(max-width:1000px){:root .fcols{grid-template-columns:repeat(2,1fr)}:root .fbrand{grid-column:1/-1}} @media(max-width:640px){ :root .fcols{grid-template-columns:1fr;gap:0} :root .fbrand{padding-bottom:28px} :root .fcol{border-top:1px solid var(--line-dk)} :root .fcol>h4{display:none} :root .fcol>button{display:flex;width:100%;justify-content:space-between;align-items:center;background:none;border:0;padding:16px 0;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff} :root .fcol>button svg{width:11px;height:11px;transition:transform .2s} :root .fcol.open>button svg{transform:rotate(180deg)} :root .fcol .acc-panel>div{padding-bottom:0} :root .fcol.open .acc-panel{grid-template-rows:1fr} :root .fcol.open .acc-panel>div{padding-bottom:14px} } @media(min-width:641px){:root .fcol .acc-panel{display:block}} /* toast */ :root .toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--navy);color:#fff;font-size:13.5px;padding:10px 16px;border-radius:var(--r);z-index:90;opacity:0;visibility:hidden;transition:all .25s;display:flex;gap:10px;align-items:center;max-width:calc(100% - 32px);box-shadow:0 10px 30px rgba(0,0,0,.2)} :root .toast code{font-family:var(--mono);color:#E08B63} :root .toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)} @media(max-width:760px){:root .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}} @media(prefers-reduced-motion:reduce){:root *,:root *::before,:root *::after{animation:none!important;transition:none!important}html:root{scroll-behavior:auto}} /* ================= v2: product-led layer (photography stand-ins, lighter technical marks) ================= */ :root{--stage-hi:#FBF8F3;--stage-wall:#ECE5DA;--stage-floor:#DED3C3;--studio-shadow:rgba(59,46,34,.18)} :root .hero::before{display:none} :root .hero{background:linear-gradient(180deg,var(--paper),#F1EDE6)} :root .hero .wrap{padding-block:clamp(36px,5vw,72px) clamp(40px,5vw,72px)} @media(min-width:1000px){:root .hero .wrap{grid-template-columns:.9fr 1.1fr;gap:56px}} :root .hero h1{font-size:clamp(40px,5.2vw,70px)} :root .hero h1 em::after{bottom:.02em} /* studio stage = where product photos go */ :root .stage{position:relative;overflow:hidden;background: radial-gradient(60% 55% at 32% 18%,var(--stage-hi) 0,rgba(251,248,243,0) 70%), linear-gradient(180deg,var(--stage-wall) 0,var(--stage-wall) 64%,var(--stage-floor) 64%,#E7DED1 100%);max-width:100%} :root .stage::after{content:"";position:absolute;left:0;right:0;top:64%;height:1px;background:linear-gradient(90deg,transparent,rgba(59,46,34,.12),transparent)} :root .stage>svg{display:block;width:100%;height:100%} :root .stage.dark{background:radial-gradient(60% 60% at 70% 20%,#2A3A58 0,rgba(42,58,88,0) 70%),linear-gradient(180deg,#1B2A45 0,#1B2A45 66%,#15223A 66%)} :root .hero-stage{display:grid;gap:14px;min-width:0} :root .hero-stage .stage{aspect-ratio:5/4;border-radius:var(--r);box-shadow:0 30px 60px -30px rgba(21,35,59,.35)} :root .scene{transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1);transform-origin:50% 80%} :root .scene.off{opacity:0;transform:scale(.96);pointer-events:none} :root .scene-one{transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)} :root .cap-card{position:absolute;left:16px;bottom:16px;right:16px;max-width:300px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:14px 16px;display:grid;gap:4px;border-radius:var(--r);box-shadow:0 10px 30px rgba(21,35,59,.12);transition:opacity .3s} :root .cap-card b{color:var(--navy);font-size:16px} :root .cap-card span{font-size:14px;color:var(--text)} :root .cap-card a{justify-self:start;margin-top:6px;font-size:13px} :root .pills{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px} :root .pills::-webkit-scrollbar{display:none} :root .pill{flex:none;border:1px solid var(--line);background:var(--white);color:var(--navy);font-weight:600;font-size:14px;padding:9px 15px;border-radius:999px;transition:all .2s} :root .pill:hover{border-color:var(--navy)} :root .pill[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff} /* product cards */ :root .formats{background:var(--paper);border:0} :root .pgrid{display:grid;gap:20px;grid-template-columns:1fr} @media(min-width:640px){:root .pgrid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){:root .pgrid{grid-template-columns:repeat(3,1fr);gap:24px}} :root .pcard{display:flex;flex-direction:column;background:var(--white);min-width:0;text-decoration:none;color:inherit;transition:transform .3s,box-shadow .3s} :root .pcard:hover{transform:translateY(-4px);box-shadow:0 24px 50px -24px rgba(21,35,59,.3)} :root .pcard .stage{aspect-ratio:4/3} :root .pcard .stage>svg{transition:transform .6s cubic-bezier(.2,.7,.2,1)} :root .pcard:hover .stage>svg{transform:scale(1.05)} :root .pcard .tag{position:absolute;left:14px;top:14px;font-size:12px;font-weight:600;color:var(--navy);background:rgba(255,255,255,.8);padding:4px 10px;border-radius:999px} :root .pcard .body{display:grid;gap:10px;padding:22px 22px 24px;flex:1;align-content:start} :root .pcard h3{font-size:20px} :root .pcard p{font-size:15px} :root .pcard .links{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:auto;padding-top:6px} :root .formats-foot{display:grid;gap:24px;margin-top:28px;grid-template-columns:1fr} :root .formats-foot .row{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center} :root .mixnote{display:grid;gap:12px;background:var(--white);border-left:3px solid var(--brick);padding:20px 22px;grid-template-columns:1fr} @media(min-width:760px){:root .mixnote{grid-template-columns:1fr auto;align-items:center;gap:24px}} :root .mixnote b{color:var(--navy);font-size:17px;display:block;margin-bottom:4px} :root .mixnote p{font-size:15px;max-width:70ch} /* compact routes */ :root .routes2{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:1000px){:root .routes2{grid-template-columns:repeat(3,1fr)}} :root .r2{display:grid;grid-template-columns:132px 1fr;background:var(--white);border:1px solid var(--line);text-decoration:none;color:inherit;transition:border-color .2s,transform .2s;min-width:0} :root .r2:hover{border-color:var(--navy);transform:translateY(-3px)} :root .r2 .stage{height:100%;min-height:150px} :root .r2 .body{padding:18px 18px 20px;display:grid;gap:8px;align-content:start;min-width:0} :root .r2 .who{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brick)} :root .r2 h3{font-size:18px} :root .r2 p{font-size:14.5px} :root .r2 .link{justify-self:start;margin-top:4px;font-size:13.5px} @media(max-width:480px){:root .r2{grid-template-columns:96px 1fr}} /* builder */ :root .spec{background:var(--white)} :root .builder{display:grid;gap:28px;grid-template-columns:1fr;align-items:start} @media(min-width:1000px){:root .builder{grid-template-columns:.95fr 1.05fr;gap:48px}} :root .bsteps{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-bottom:0} :root .bstep{border:0;border-right:1px solid var(--line);background:var(--paper);text-align:left;padding:12px 14px;display:grid;gap:2px;min-width:0} :root .bstep:last-child{border-right:0} :root .bstep small{font-size:12px;color:var(--muted);font-weight:600} :root .bstep span{font-weight:700;color:var(--navy);font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :root .bstep[aria-selected="true"]{background:var(--white);box-shadow:inset 0 3px 0 var(--brick)} :root .bpanel{border:1px solid var(--line);padding:24px;display:grid;gap:16px;background:var(--white);min-height:300px;align-content:start} :root .bpanel h3{font-size:22px} :root .bpanel p{font-size:15px} :root .chip[disabled]{opacity:.45;border-style:dashed;cursor:not-allowed} :root .chip .sw{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:0} :root .bnav{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:16px} :root .bnav .btn{min-height:42px} :root .bnote{font-size:13.5px;color:var(--good);min-height:1.2em} :root .preview{display:grid;gap:0;min-width:0} :root .preview .stage{aspect-ratio:13/10} :root .preview .stage .lbl{position:absolute;left:14px;top:14px;font-size:12px;font-weight:600;background:rgba(255,255,255,.85);color:var(--navy);padding:4px 10px;border-radius:999px} :root .pv-g{transition:opacity .3s,transform .45s cubic-bezier(.2,.7,.2,1)} :root .pv-g.swap{opacity:0;transform:translateY(8px)} :root .psum{background:var(--navy);color:var(--on-navy);padding:20px 22px;display:grid;gap:14px} :root .psum dl{margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px} :root .psum dt{font-size:12px;color:var(--on-navy-dim);font-weight:600} :root .psum dd{margin:0;color:#fff;font-weight:700;font-size:15px} :root .psum p{font-size:14px;color:var(--on-navy)} :root .psum .row{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center} :root .psum .link{color:#fff} :root .psum .link:hover{color:#E08B63} @media(max-width:480px){:root .psum dl{grid-template-columns:1fr}} /* factory */ :root .mfg2{display:grid;gap:40px;grid-template-columns:1fr} @media(min-width:1000px){:root .mfg2{grid-template-columns:1.25fr .75fr;gap:56px;align-items:start}} :root .shots{display:grid;gap:12px;grid-template-columns:1fr 1fr} :root .shots .big{grid-column:1/-1;aspect-ratio:16/9} :root .shots .sm{aspect-ratio:4/3} :root .shots .stage .cap{position:absolute;left:12px;bottom:12px;font-size:12.5px;font-weight:600;background:rgba(255,255,255,.9);color:var(--navy);padding:5px 10px;border-radius:999px} :root .mfg2-copy{display:grid;gap:20px;min-width:0} :root .checks{display:grid;gap:0;border-top:1px solid var(--line)} :root .checks li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line);color:var(--navy);font-weight:600;font-size:15px} :root .checks li svg{width:18px;height:18px;color:var(--good);flex:none;margin-top:3px} :root .checks li small{display:block;font-weight:500;color:var(--muted);font-size:13.5px} :root .stages li{font-family:var(--body);font-size:13px;letter-spacing:0;text-transform:none;font-weight:600;border-radius:999px;padding:6px 12px} /* market lighter */ :root .market{background:var(--paper);border:0} :root .mgrid{border:0;gap:28px} :root .mitem{border:0!important;border-top:2px solid var(--navy)!important;padding:20px 0 0;background:transparent} :root .mitem:hover{background:transparent} :root .mitem .ic{border:0;background:var(--white);border-radius:50%} /* range band packs */ :root .range .packs svg{width:33%;max-width:170px} /* inquiry */ :root .inq .wrap{padding-block:clamp(56px,7vw,96px)} :root .cap-card{top:16px;bottom:auto} @media(max-width:999px){ :root .hero .wrap{gap:20px} :root .hero-copy{display:contents} :root .hero .eyebrow{order:1}:root .hero h1{order:2}:root .hero-stage{order:3}:root .hero .lede{order:4}:root .hero-btns{order:5}:root .trust{order:6} :root .hero-stage .stage{aspect-ratio:4/3} :root .cap-card{left:10px;right:10px;top:10px;padding:10px 12px;max-width:260px} :root .cap-card span{font-size:13px} } @media(max-width:999px){:root .cap-card span{display:none}} /* ================= v3: photography + brand motif (sun and layered hills from the pack artwork) ================= */ :root{--sage:#7E9483;--sage-dk:#5E7464;--sage-tint:#E3E8E1;--stone:#E9E2D6;--stone-dk:#D9CFBF} :root h1,:root h2{font-weight:700;letter-spacing:-.025em} :root .hero h1{font-weight:700;letter-spacing:-.035em} :root .eyebrow{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.18em;display:inline-flex;align-items:center;gap:10px} :root .eyebrow::before{content:"";width:22px;height:12px;flex:none;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Ccircle cx='16' cy='4' r='3' fill='%23B4532A'/%3E%3Cpath d='M0 12c3-5 6-7 9-5s5 1 7-1 4-1 6 1v5z' fill='%237E9483'/%3E%3Cpath d='M0 12c4-3 8-3 12-1s7 0 10-1v2z' fill='%2315233B'/%3E%3C/svg%3E")} :root .dark .eyebrow::before,:root .inq .eyebrow::before,:root .range .eyebrow::before{filter:brightness(1.6) saturate(.6)} /* photos */ :root .ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} :root .stage.photo{background:var(--stone)} :root .stage.photo::after{display:none} /* hero */ :root .hero{background:linear-gradient(180deg,#F7F4EE 0,#F1ECE3 100%);position:relative} :root .hero .motif{position:absolute;left:0;width:100%;bottom:-1px;height:clamp(70px,9vw,140px);pointer-events:none;z-index:0} :root .hero .wrap{position:relative;z-index:1;padding-block:clamp(36px,5vw,72px) clamp(80px,9vw,140px)} @media(min-width:1000px){:root .hero .wrap{grid-template-columns:.82fr 1.18fr;gap:56px}} :root .hero-stage .stage{aspect-ratio:5/4;box-shadow:0 40px 80px -40px rgba(21,35,59,.45)} :root .hero-stage .ph-img{transition:opacity .35s ease} :root .hero-stage .ph-img.fade{opacity:0} :root .hero-meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline} :root .hero-meta b{color:var(--navy);font-size:15px} :root .hero-meta span{font-size:14px;color:var(--muted)} :root .hero-meta .link{font-size:13px} :root .pill[aria-pressed="true"]{background:var(--navy)} :root .trust svg{color:var(--sage-dk)} /* audience strip */ :root .made-for{background:var(--navy);color:var(--on-navy)} :root .made-for .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding-block:20px} :root .made-for b{color:#fff;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700} :root .made-for ul{display:flex;flex-wrap:wrap;gap:8px 26px} :root .made-for li{display:flex;align-items:center;gap:10px;font-size:15px} :root .made-for li::before{content:"";width:6px;height:6px;border-radius:50%;background:#E08B63} /* format bento */ :root .bento{display:grid;gap:20px;grid-template-columns:1fr} @media(min-width:700px){:root .bento{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){:root .bento{grid-template-columns:repeat(3,1fr);gap:24px} :root .bento .pcard.wide{grid-column:span 2} :root .bento .pcard.wide .stage{aspect-ratio:16/9} :root .bento .pcard.band{grid-column:1/-1;flex-direction:row} :root .bento .pcard.band .stage{flex:0 0 58%;aspect-ratio:auto;min-height:340px} :root .bento .pcard.band .body{padding:36px 40px;align-content:center} :root .bento .pcard.band h3{font-size:26px} } @media(min-width:700px) and (max-width:999px){:root .bento .pcard.band{grid-column:1/-1}} :root .pcard{border-radius:2px;overflow:hidden} :root .pcard .stage{aspect-ratio:4/3} :root .pcard .ph-img{transition:transform .8s cubic-bezier(.2,.7,.2,1)} :root .pcard:hover .ph-img{transform:scale(1.045)} :root .pcard .tag{background:rgba(255,255,255,.88);color:var(--sage-dk);font-weight:700;letter-spacing:.02em} :root .pcard .num{display:none} :root .mixnote{border-left-color:var(--sage)} /* routes with photos */ :root .r2 .stage{min-height:180px} @media(max-width:480px){:root .r2{grid-template-columns:110px 1fr}} /* builder */ :root .preview .stage{aspect-ratio:4/3} :root .pv-pack{position:absolute;right:14px;bottom:14px;z-index:2;background:rgba(255,255,255,.92);color:var(--navy);font-size:13px;font-weight:600;padding:7px 12px;border-radius:999px;display:flex;align-items:center;gap:8px} :root .pv-pack i{width:10px;height:10px;border-radius:50%;display:inline-block} :root .preview .ph-img{transition:opacity .3s} :root .preview .ph-img.fade{opacity:0} :root .bstep[aria-selected="true"]{box-shadow:inset 0 3px 0 var(--sage)} :root .chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy)} /* factory */ :root .shots .stage{border-radius:2px} :root .checks li svg{color:var(--sage-dk)} :root .stages li{background:var(--sage-tint);border-color:transparent;color:var(--sage-dk)} /* process: motif */ :root .dark{position:relative;overflow:hidden} :root .dark .motif{position:absolute;left:0;width:100%;bottom:-1px;height:90px;opacity:.18;pointer-events:none} /* market */ :root .mitem{border-top-color:var(--sage)!important} :root .mitem .ic{color:var(--sage-dk)} /* range band: photo panel */ :root .range .wrap{grid-template-columns:1fr;gap:32px} @media(min-width:900px){:root .range .wrap{grid-template-columns:1fr 1fr;gap:56px}} :root .range .packs{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:2px;box-shadow:0 30px 60px -30px rgba(0,0,0,.45)} :root .range::after{color:rgba(255,255,255,.06)} /* guides */ :root .guide .pic{position:relative;aspect-ratio:16/10} :root .guide .pic .ph-img{transition:transform .6s} :root .guide:hover .pic .ph-img{transform:scale(1.04)} :root .guide{border-top-color:var(--sage)} /* footer motif + wordmark */ :root .foot{position:relative;overflow:hidden} :root .foot .motif{display:block;width:100%;height:70px;margin-bottom:-1px;background:var(--navy)} :root .foot .wrap{position:relative;z-index:1} :root .foot::after{content:"COMAN";position:absolute;left:50%;bottom:40px;transform:translateX(-50%);font-weight:800;letter-spacing:.3em;font-size:clamp(80px,14vw,200px);color:rgba(255,255,255,.025);pointer-events:none;white-space:nowrap} :root .mega-card .pic{position:relative;overflow:hidden;background:var(--stone)} /* ================= page templates: shared components for inner pages (category, product, article) ================= */ :root{--hh:76px} :root .nav>li.cur>.nav-a::after{transform:scaleX(1)} /* breadcrumb */ :root .crumb{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:18px} :root .crumb a{text-decoration:none;color:var(--text)} :root .crumb a:hover{color:var(--brick)} :root .crumb li{display:flex;align-items:center;gap:8px} :root .crumb li+li::before{content:"";width:5px;height:5px;border-top:1.5px solid var(--stone-dk);border-right:1.5px solid var(--stone-dk);transform:rotate(45deg)} :root .crumb [aria-current]{color:var(--navy);font-weight:600} /* page hero */ :root .phero{background:linear-gradient(180deg,#F7F4EE 0,#F1ECE3 100%);position:relative;overflow:hidden;border-bottom:1px solid var(--line)} :root .phero .motif{position:absolute;left:0;width:100%;bottom:-1px;height:clamp(56px,7vw,110px);pointer-events:none} :root .phero>.wrap{position:relative;z-index:1;display:grid;gap:36px;grid-template-columns:1fr;padding-block:clamp(24px,3.4vw,44px) clamp(72px,8vw,120px)} @media(min-width:1000px){:root .phero>.wrap{grid-template-columns:1fr 1fr;gap:56px;align-items:center}} :root .phero-copy{display:grid;gap:20px;align-content:start;min-width:0} :root .phero h1{font-size:clamp(34px,4.4vw,58px);letter-spacing:-.03em;line-height:1.04} :root .phero .lede{font-size:clamp(16.5px,1.3vw,18px)} :root .phero-media .stage{aspect-ratio:4/3;border-radius:2px;box-shadow:0 40px 80px -40px rgba(21,35,59,.45)} :root .phero-media .stage .cap{position:absolute;left:14px;bottom:14px;font-size:12.5px;font-weight:600;background:rgba(255,255,255,.9);color:var(--navy);padding:6px 11px;border-radius:999px} :root .facts{display:flex;flex-wrap:wrap;gap:8px} :root .facts li{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.75);border:1px solid var(--line);padding:7px 12px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--navy)} :root .facts li svg{width:14px;height:14px;color:var(--sage-dk)} /* sticky on-page nav */ :root .subnav{position:sticky;top:var(--hh);z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line);transition:top .25s} :root .subnav .wrap{display:flex;align-items:center;gap:20px} :root .subnav ul{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0} :root .subnav ul::-webkit-scrollbar{display:none} :root .subnav a{display:block;padding:15px 12px;font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap;position:relative} :root .subnav a::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--brick);transform:scaleX(0);transform-origin:left;transition:transform .25s} :root .subnav a:hover{color:var(--navy)} :root .subnav a.on{color:var(--navy)} :root .subnav a.on::after{transform:scaleX(1)} :root .subnav .btn,:root .subnav a.btn{display:inline-flex;min-height:38px;padding:0 14px;font-size:12px;flex:none} :root .subnav a.btn::after{display:none} @media(max-width:760px){:root .subnav .btn{display:none}} :root [id]{scroll-margin-top:calc(var(--hh) + 64px)} :root .sec.tight{padding-block:clamp(52px,7vw,96px)} :root .sec.alt{background:var(--white);border-block:1px solid var(--line)} :root .sec.stone{background:var(--stone)} :root .sub-h{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:8px} :root .note-line{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:24px;font-size:14.5px;color:var(--muted)} /* exploded diagram + part cards */ :root .anatomy{display:grid;gap:32px;grid-template-columns:1fr;align-items:center} @media(min-width:1000px){:root .anatomy{grid-template-columns:1.05fr .95fr;gap:56px}} :root .diagram{background:var(--white);border:1px solid var(--line);position:relative;aspect-ratio:5/4;background-image:linear-gradient(#F0ECE5 1px,transparent 1px),linear-gradient(90deg,#F0ECE5 1px,transparent 1px);background-size:24px 24px} :root .diagram svg{position:absolute;inset:0;width:100%;height:100%} :root .diagram .lbl{position:absolute;left:14px;top:12px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} :root .diagram [data-part]{transition:opacity .3s,transform .4s cubic-bezier(.2,.7,.2,1)} :root .diagram.focus [data-part]{opacity:.22} :root .diagram.focus [data-part].hl{opacity:1} :root .diagram .tagdot{cursor:pointer} :root .plist{display:grid;gap:0;border-top:1px solid var(--line)} :root .plist li{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:18px 8px 18px 0;border-bottom:1px solid var(--line);cursor:default;transition:background .2s} :root .plist li:hover,:root .plist li.hl{background:linear-gradient(90deg,var(--sage-tint),transparent)} :root .plist .n{width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;margin-left:6px} :root .plist li.hl .n{background:var(--brick)} :root .plist b{display:block;color:var(--navy);font-size:17px;margin-bottom:3px} :root .plist p{font-size:15px} /* spec-sheet tables (stack into cards on phones) */ :root .tbl-wrap{background:var(--white);border:1px solid var(--line);overflow:hidden} :root .tbl-head{display:flex;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} :root .tbl{width:100%;border-collapse:collapse;font-size:15px} :root .tbl th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:12px 18px;background:var(--paper);border-bottom:1px solid var(--line)} :root .tbl td{padding:15px 18px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--text)} :root .tbl tr:last-child td{border-bottom:0} :root .tbl td:first-child{font-weight:700;color:var(--navy)} :root .tbl tbody tr{transition:background .2s} :root .tbl tbody tr:hover{background:#FBFAF7} :root .tbl .ico{display:inline-flex;vertical-align:-6px;width:26px;height:26px;margin-right:10px;color:var(--brick)} :root .tbl .ico svg{width:26px;height:26px} @media(max-width:760px){ :root .tbl thead{display:none} :root .tbl,:root .tbl tbody,:root .tbl tr,:root .tbl td{display:block;width:100%} :root .tbl tr{padding:14px 16px;border-bottom:1px solid var(--line)} :root .tbl tr:last-child{border-bottom:0} :root .tbl td{border:0;padding:4px 0} :root .tbl td[data-l]::before{content:attr(data-l);display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:6px} :root .tbl td:first-child{font-size:17px} } :root .two{display:grid;gap:28px;grid-template-columns:1fr;margin-top:28px} @media(min-width:900px){:root .two{grid-template-columns:1fr 1fr;gap:40px}} :root .tipcard{background:var(--white);border-left:3px solid var(--sage);padding:20px 22px;display:grid;gap:8px} :root .tipcard b{color:var(--navy);font-size:16.5px} :root .tipcard p{font-size:15px} /* style tiles */ :root .tiles{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:640px){:root .tiles{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){:root .tiles{grid-template-columns:repeat(3,1fr);gap:20px}} @media(min-width:1000px){:root .tiles.t2{grid-template-columns:repeat(2,1fr)}} :root .tile{background:var(--white);border:1px solid var(--line);padding:22px;display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:start;transition:border-color .2s,transform .2s} :root .tile:hover{border-color:var(--navy);transform:translateY(-3px)} :root .tile .sw{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--navy);border:1px solid var(--line)} :root .tile .sw svg{width:40px;height:40px} :root .tile h3{font-size:17px;margin-bottom:6px} :root .tile p{font-size:14.5px} :root .tile a{font-weight:700;color:var(--navy)} /* navy feature band */ :root .band{background:var(--navy);color:var(--on-navy);position:relative;overflow:hidden} :root .band h2,:root .band h3{color:#fff} :root .band .eyebrow{color:#E08B63} :root .band .eyebrow::before{filter:brightness(1.6) saturate(.6)} :root .band .motif{position:absolute;left:0;width:100%;bottom:-1px;height:80px;opacity:.16;pointer-events:none} :root .band-in{display:grid;gap:40px;grid-template-columns:1fr;align-items:center;position:relative} @media(min-width:1000px){:root .band-in{grid-template-columns:1fr 1fr;gap:64px}} :root .band .stage{aspect-ratio:4/3;border-radius:2px} :root .ticks{display:grid;gap:0;border-top:1px solid var(--line-dk)} :root .ticks li{display:grid;grid-template-columns:30px 1fr;padding:14px 0;border-bottom:1px solid var(--line-dk);font-size:15.5px} :root .ticks li svg{width:18px;height:18px;color:#E08B63;margin-top:3px} :root .band .lede{color:var(--on-navy)} :root .band .link{color:#fff} :root .band .link:hover{color:#E08B63} /* model grid */ :root .mfilter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:24px} :root .mfilter span{font-size:13px;font-weight:700;color:var(--muted);margin-right:6px} :root .models{display:grid;gap:20px;grid-template-columns:1fr} @media(min-width:620px){:root .models{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){:root .models{grid-template-columns:repeat(3,1fr)}} :root .model{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);text-decoration:none;color:inherit;transition:transform .3s,box-shadow .3s,opacity .3s;min-width:0} :root .model:hover{transform:translateY(-4px);box-shadow:0 24px 50px -24px rgba(21,35,59,.3)} :root .model[hidden]{display:none} :root .model .stage{aspect-ratio:4/3} :root .model .stage .ph-img{transition:transform .8s cubic-bezier(.2,.7,.2,1)} :root .model:hover .stage .ph-img{transform:scale(1.05)} :root .model .code{position:absolute;left:12px;top:12px;font-family:var(--mono);font-size:12px;font-weight:600;background:rgba(255,255,255,.92);color:var(--navy);padding:4px 9px;border-radius:999px} :root .model .body{padding:18px 20px 20px;display:grid;gap:10px;flex:1;align-content:start} :root .model h3{font-size:18px} :root .model dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:14px} :root .model dt{color:var(--muted)} :root .model dd{margin:0;color:var(--navy);font-weight:600} :root .model .link{margin-top:auto;justify-self:start;font-size:13.5px} :root .empty-note{padding:28px;border:1px dashed var(--line);text-align:center;color:var(--muted)} /* spec checklist */ :root .checklist{display:flex;flex-wrap:wrap;gap:8px} :root .checklist li{background:var(--white);border:1px solid var(--line);padding:8px 12px;font-size:14px;font-weight:600;color:var(--navy);display:flex;gap:8px;align-items:center} :root .checklist li svg{width:14px;height:14px;color:var(--sage-dk)} :root .packs3{display:grid;gap:14px;grid-template-columns:1fr} @media(min-width:700px){:root .packs3{grid-template-columns:repeat(2,1fr)}} :root .packs3 li{background:var(--white);border:1px solid var(--line);padding:18px;display:grid;gap:4px} :root .packs3 b{color:var(--navy)} :root .packs3 span{font-size:14.5px} /* cta strip */ :root .cta-strip{display:grid;gap:18px;grid-template-columns:1fr;align-items:center;background:var(--white);border:1px solid var(--line);border-left:3px solid var(--brick);padding:24px 26px;margin-top:40px} @media(min-width:860px){:root .cta-strip{grid-template-columns:1fr auto;gap:32px}} :root .cta-strip b{display:block;color:var(--navy);font-size:19px;margin-bottom:4px} :root .cta-strip p{font-size:15px} :root .cta-strip .row{display:flex;flex-wrap:wrap;gap:10px} /* ---------- product detail ---------- */ :root .pd{padding-block:clamp(20px,3vw,36px) clamp(56px,7vw,96px);background:linear-gradient(180deg,#F7F4EE 0,var(--paper) 100%)} :root .pd-grid{display:grid;gap:36px;grid-template-columns:1fr} @media(min-width:1000px){:root .pd-grid{grid-template-columns:1.08fr .92fr;gap:56px;align-items:start}} :root .gal{display:grid;gap:12px;min-width:0} @media(min-width:1000px){:root .gal{position:sticky;top:calc(var(--hh) + 20px)}} :root .gal-main{aspect-ratio:1/1;position:relative;background:var(--stone);overflow:hidden;border-radius:2px} :root .gal-main .ph-img{transition:opacity .3s} :root .gal-main .ph-img.fade{opacity:0} :root .gal-main .view{position:absolute;left:14px;bottom:14px;font-size:12.5px;font-weight:600;background:rgba(255,255,255,.92);color:var(--navy);padding:6px 11px;border-radius:999px} :root .gal-main .zoom{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.92);border:0;display:grid;place-items:center;color:var(--navy)} :root .gal-main .zoom svg{width:18px;height:18px} :root .gal-main.zoomed .ph-img{transform:scale(1.8);cursor:zoom-out} :root .gal-main .ph-img{transition:opacity .3s,transform .4s} :root .thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px} :root .thumb{aspect-ratio:1/1;position:relative;border:1.5px solid transparent;padding:0;background:var(--stone);overflow:hidden;border-radius:2px} :root .thumb[aria-pressed="true"]{border-color:var(--navy)} :root .thumb .ph-img{transition:transform .4s} :root .thumb:hover .ph-img{transform:scale(1.06)} :root .thumb svg{width:100%;height:100%} :root .pd-info{display:grid;gap:22px;min-width:0} :root .mcode{display:flex;flex-wrap:wrap;align-items:center;gap:10px} :root .mcode code{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--navy);background:var(--white);border:1px solid var(--line);padding:5px 10px} :root .mcode .tagx{font-size:12.5px;font-weight:700;color:var(--sage-dk);background:var(--sage-tint);padding:5px 10px;border-radius:999px} :root .pd-info h1{font-size:clamp(30px,3.4vw,44px);letter-spacing:-.025em;line-height:1.08} :root .pd-info .sum{font-size:17.5px;color:var(--text)} :root .kv{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line);background:var(--white)} :root .kv div{padding:14px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:2px;min-width:0} :root .kv dt{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} :root .kv dd{margin:0;color:var(--navy);font-weight:700;font-size:15px} :root .optrow{display:grid;gap:10px} :root .optrow .h{display:flex;justify-content:space-between;gap:12px;font-size:14px;font-weight:700;color:var(--navy)} :root .optrow .h span{font-weight:500;color:var(--muted)} :root .swatches{display:flex;flex-wrap:wrap;gap:10px} :root .swatch{width:38px;height:38px;border-radius:50%;border:2px solid var(--white);box-shadow:0 0 0 1px var(--line);padding:0;position:relative} :root .swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--navy)} :root .swatch.custom{background:conic-gradient(#B4532A,#E0A526,#7E9483,#3E7FB4,#15233B,#B4532A)} :root .pd-btns{display:flex;flex-wrap:wrap;gap:10px} :root .pd-btns .btn{flex:1 1 auto} :root .addbtn[aria-pressed="true"]{background:var(--sage-tint);border-color:var(--sage-dk);color:var(--sage-dk)} :root .pd-trust{display:grid;gap:8px;font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px} :root .pd-trust div{display:flex;gap:10px;align-items:flex-start} :root .pd-trust svg{width:16px;height:16px;color:var(--sage-dk);flex:none;margin-top:3px} :root .inqbadge{position:absolute;top:4px;right:2px;min-width:18px;height:18px;border-radius:999px;background:var(--brick);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px;transform:scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)} :root .inqbadge.on{transform:scale(1)} :root .icon-btn{position:relative} :root .specs{display:grid;gap:28px;grid-template-columns:1fr} @media(min-width:1000px){:root .specs{grid-template-columns:1.25fr .75fr;gap:48px;align-items:start}} :root .stbl{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line);font-size:15px} :root .stbl th,:root .stbl td{padding:13px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} :root .stbl th{width:38%;font-weight:600;color:var(--muted);font-size:14px;background:#FBFAF7} :root .stbl td{color:var(--navy);font-weight:600} :root .stbl tr:last-child th,:root .stbl tr:last-child td{border-bottom:0} @media(max-width:520px){:root .stbl th{width:44%;padding:12px}:root .stbl td{padding:12px}} :root .aside-card{background:var(--navy);color:var(--on-navy);padding:26px;display:grid;gap:14px} :root .aside-card h3{color:#fff;font-size:20px} :root .aside-card p{font-size:15px} :root .aside-card .btn{justify-self:start} @media(min-width:1000px){:root .aside-card{position:sticky;top:calc(var(--hh) + 80px)}} :root .how{display:grid;gap:32px;grid-template-columns:1fr;align-items:start} @media(min-width:1000px){:root .how{grid-template-columns:1fr 1fr;gap:56px}} :root .howsteps{display:grid;gap:22px} :root .howsteps h3{font-size:18px;margin-bottom:10px} :root .ol{display:grid;gap:0;counter-reset:o;border-top:1px solid var(--line)} :root .ol li{counter-increment:o;display:grid;grid-template-columns:40px 1fr;padding:13px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--navy);font-weight:600} :root .ol li::before{content:counter(o);width:26px;height:26px;border-radius:50%;border:1.5px solid var(--sage-dk);color:var(--sage-dk);display:grid;place-items:center;font-size:13px;font-weight:700} :root .ol li small{display:block;font-weight:500;color:var(--muted);font-size:14px} :root .opts{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:760px){:root .opts{grid-template-columns:repeat(2,1fr)}} @media(min-width:1100px){:root .opts{grid-template-columns:repeat(3,1fr)}} :root .opt{background:var(--white);border:1px solid var(--line);padding:20px 22px;display:grid;gap:12px;align-content:start} :root .opt h3{font-size:17px} :root .opt ul{display:grid;gap:0} :root .opt li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--navy)} :root .badge{flex:none;font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap} :root .badge.std{background:var(--sage-tint);color:var(--sage-dk)} :root .badge.mto{background:var(--brick-tint);color:var(--brick-dk)} :root .legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--muted);margin-top:16px;align-items:center} :root .order3{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:900px){:root .order3{grid-template-columns:repeat(3,1fr)}} :root .ocard{background:var(--white);border:1px solid var(--line);border-top:2px solid var(--navy);padding:22px;display:grid;gap:10px;align-content:start} :root .ocard .k{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brick)} :root .ocard h3{font-size:18px} :root .ocard p{font-size:15px} :root .ocard .big{font-family:var(--cm-display);font-size:26px;font-weight:700;color:var(--navy);letter-spacing:-.01em} :root .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:6px} :root .flow li{position:relative;padding-top:22px;font-size:13px;font-weight:600;color:var(--navy);line-height:1.3} :root .flow li::before{content:"";position:absolute;top:5px;left:0;width:12px;height:12px;border-radius:50%;background:var(--white);border:2px solid var(--sage-dk);z-index:1} :root .flow li::after{content:"";position:absolute;top:10px;left:12px;right:0;height:2px;background:var(--sage-tint)} :root .flow li:last-child::after{display:none} :root .flow li:first-child::before{background:var(--brick);border-color:var(--brick)} :root .docs{display:grid;gap:0;border-top:1px solid var(--line)} :root .docs li{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)} :root .docs .di{width:44px;height:44px;background:var(--white);border:1px solid var(--line);display:grid;place-items:center;color:var(--sage-dk)} :root .docs .di svg{width:22px;height:22px} :root .docs b{display:block;color:var(--navy)} :root .docs span{font-size:14px;color:var(--muted)} :root .docs .pill2{font-size:12.5px;font-weight:700;color:var(--sage-dk);background:var(--sage-tint);padding:5px 10px;border-radius:999px;white-space:nowrap} @media(max-width:520px){:root .docs li{grid-template-columns:44px 1fr}:root .docs .pill2{grid-column:2;justify-self:start}} :root .rel{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:760px){:root .rel{grid-template-columns:repeat(3,1fr)}} :root .relc{display:grid;grid-template-columns:96px 1fr;gap:16px;background:var(--white);border:1px solid var(--line);padding:14px;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s;align-items:center} :root .relc:hover{border-color:var(--navy);transform:translateY(-3px)} :root .relc .stage{aspect-ratio:1/1} :root .relc .k{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brick)} :root .relc b{display:block;color:var(--navy);font-size:16px;margin:2px 0 4px;line-height:1.3} :root .relc p{font-size:14px} /* ---------- article ---------- */ :root .readbar{position:fixed;left:0;top:0;height:3px;width:100%;z-index:65;background:transparent;pointer-events:none} :root .readbar i{display:block;height:100%;background:var(--brick);transform-origin:left;transform:scaleX(0)} :root .ahero{background:linear-gradient(180deg,#F7F4EE 0,#F1ECE3 100%);position:relative;overflow:hidden} :root .ahero .motif{position:absolute;left:0;width:100%;bottom:-1px;height:clamp(56px,7vw,110px);pointer-events:none} :root .ahero>.wrap{position:relative;z-index:1;padding-block:clamp(24px,3.4vw,44px) clamp(40px,5vw,64px);max-width:1080px} :root .ahero h1{font-size:clamp(34px,4.6vw,60px);letter-spacing:-.03em;line-height:1.04;max-width:20ch;margin-top:14px} :root .ameta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:20px;font-size:14px;color:var(--muted)} :root .ameta .cat{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--sage-dk);padding:5px 10px;border-radius:999px;text-decoration:none} :root .ameta b{color:var(--navy);font-weight:600} :root .ameta i{width:4px;height:4px;border-radius:50%;background:var(--stone-dk)} :root .feat{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px))} @media(min-width:760px){:root .feat{padding-inline:32px}} :root .feat .stage{aspect-ratio:21/9;border-radius:2px;box-shadow:0 40px 80px -40px rgba(21,35,59,.45)} @media(max-width:700px){:root .feat .stage{aspect-ratio:4/3}} :root .ahero.has-feat>.wrap{padding-bottom:28px} :root .ahero.has-feat{padding-bottom:clamp(60px,7vw,110px)} :root .ahero.has-feat .feat{margin-bottom:-1px} :root .art{padding-block:clamp(40px,5vw,72px) clamp(64px,8vw,110px)} :root .art-grid{display:grid;gap:40px;grid-template-columns:1fr;max-width:1180px;margin:0 auto} @media(min-width:1080px){:root .art-grid{grid-template-columns:250px minmax(0,720px);gap:72px;justify-content:center}} :root .toc{min-width:0} @media(min-width:1080px){:root .toc{position:sticky;top:calc(var(--hh) + 28px);align-self:start;max-height:calc(100vh - var(--hh) - 56px);overflow:auto}} :root .toc-h{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:0;padding:0;text-align:left} :root .toc-h svg{width:11px;height:11px;display:none} :root .toc ol{display:grid;gap:0;border-left:1px solid var(--line)} :root .toc a{display:block;padding:7px 0 7px 16px;margin-left:-1px;border-left:2px solid transparent;font-size:14px;line-height:1.4;color:var(--text);text-decoration:none;transition:color .2s,border-color .2s} :root .toc a:hover{color:var(--navy)} :root .toc a.on{color:var(--navy);font-weight:700;border-left-color:var(--brick)} :root .toc-cta{margin-top:24px;background:var(--white);border:1px solid var(--line);padding:18px;display:grid;gap:10px} :root .toc-cta b{color:var(--navy);font-size:15px;line-height:1.35} :root .toc-cta p{font-size:13.5px} :root .toc-cta .btn{min-height:40px;font-size:12px} @media(max-width:1079px){ :root .toc{background:var(--white);border:1px solid var(--line);padding:14px 16px} :root .toc-h{margin:0;cursor:pointer;font-size:13px;color:var(--navy)} :root .toc-h svg{display:block;transition:transform .2s} :root .toc.open .toc-h svg{transform:rotate(180deg)} :root .toc ol{display:none;margin-top:12px} :root .toc.open ol{display:grid} :root .toc-cta{display:none} } :root .prose{font-size:17.5px;line-height:1.75;color:#333B4A;min-width:0} :root .prose>*+*{margin-top:1.15em} :root .prose h2{font-size:clamp(25px,2.4vw,32px);margin-top:2.2em;padding-top:.2em;letter-spacing:-.02em} :root .prose h2 .no{display:inline-block;font-size:.55em;vertical-align:.35em;color:var(--brick);font-weight:700;letter-spacing:.08em;margin-right:10px} :root .prose h3{font-size:19px;margin-top:1.8em} :root .prose p strong,:root .prose li strong{color:var(--navy)} :root .prose a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--brick);text-underline-offset:3px;text-decoration-thickness:1.5px} :root .prose a:hover{color:var(--brick)} :root .prose ul.dots{display:grid;gap:10px;padding-left:4px} :root .prose ul.dots li{position:relative;padding-left:24px} :root .prose ul.dots li::before{content:"";position:absolute;left:2px;top:.72em;width:8px;height:8px;border-radius:50%;background:var(--sage)} :root .prose .lead{font-size:20px;line-height:1.6;color:var(--ink)} :root .short{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--sage);padding:22px 24px;display:grid;gap:8px} :root .short b{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-dk)} :root .short p{font-size:17px;line-height:1.6;color:var(--ink)} :root .callout{display:grid;grid-template-columns:40px 1fr;gap:14px;background:var(--sage-tint);padding:18px 20px;border-radius:2px;font-size:16px;line-height:1.6} :root .callout svg{width:28px;height:28px;color:var(--sage-dk)} :root .callout b{color:var(--navy)} :root .prose .tbl-wrap{margin-top:1.6em} :root .prose .tbl{font-size:15px;line-height:1.5} :root .prose .tbl td:first-child{white-space:nowrap} @media(max-width:760px){:root .prose .tbl td:first-child{white-space:normal}} :root .stagemap{display:grid;gap:0;grid-template-columns:1fr;border:1px solid var(--line);background:var(--white);counter-reset:sm} :root .stagemap li{display:grid;grid-template-columns:52px 1fr;gap:4px 14px;padding:16px 18px 16px 14px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5;position:relative} :root .stagemap li:last-child{border-bottom:0} :root .stagemap .n{grid-row:1/3;width:38px;height:38px;border-radius:50%;background:var(--paper);border:1.5px solid var(--navy);color:var(--navy);display:grid;place-items:center;font-weight:700;font-size:15px;position:relative;z-index:1} :root .stagemap li:not(:last-child)::after{content:"";position:absolute;left:32px;top:54px;bottom:-16px;width:1.5px;background:var(--line)} :root .stagemap b{color:var(--navy);font-size:16px} :root .stagemap span{color:var(--muted)} :root .stagemap em{font-style:normal;color:var(--sage-dk);font-weight:600} :root .stagemap a{text-decoration:none;color:inherit} :root .stagemap li:hover .n{background:var(--navy);color:#fff} :root .figure{margin:1.8em 0 0} :root .figure .stage{aspect-ratio:16/9;border-radius:2px} :root .figure figcaption{font-size:14px;color:var(--muted);margin-top:10px;padding-left:12px;border-left:2px solid var(--sage)} :root .incta{display:grid;grid-template-columns:1fr;gap:16px;background:var(--navy);color:var(--on-navy);padding:26px 26px;margin-top:2em!important;position:relative;overflow:hidden} @media(min-width:640px){:root .incta{grid-template-columns:1fr auto;align-items:center}} :root .incta b{display:block;color:#fff;font-size:20px;line-height:1.3;margin-bottom:6px;font-family:var(--cm-display)} :root .incta p{font-size:15px;line-height:1.55} :root .incta .btn{position:relative} :root .incta::after{content:"";position:absolute;right:-30px;bottom:-40px;width:180px;height:100px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Ccircle cx='16' cy='4' r='3' fill='%23B4532A'/%3E%3Cpath d='M0 12c3-5 6-7 9-5s5 1 7-1 4-1 6 1v5z' fill='%237E9483'/%3E%3C/svg%3E");opacity:.18;pointer-events:none} :root .mist td:first-child{color:var(--text);font-weight:500} :root .mist .x,:root .mist .v{display:inline-flex;width:20px;height:20px;border-radius:50%;align-items:center;justify-content:center;margin-right:8px;font-size:12px;font-weight:800;vertical-align:1px} :root .mist .x{background:#F6E0D6;color:var(--brick-dk)} :root .mist .v{background:var(--sage-tint);color:var(--sage-dk)} :root .mist td:last-child{color:var(--navy);font-weight:600} :root .afaq{border-top:1px solid var(--navy);margin-top:1.4em!important} :root .afaq details{border-bottom:1px solid var(--line)} :root .afaq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-weight:700;font-size:17.5px;color:var(--navy);align-items:center;font-family:var(--cm-display);line-height:1.35} :root .afaq summary::-webkit-details-marker{display:none} :root .afaq summary .pm{flex:none;width:26px;height:26px;border:1px solid var(--line);display:grid;place-items:center;position:relative} :root .afaq summary .pm::before,:root .afaq summary .pm::after{content:"";position:absolute;width:11px;height:1.5px;background:var(--navy);transition:transform .25s} :root .afaq summary .pm::after{transform:rotate(90deg)} :root .afaq details[open] .pm::after{transform:rotate(0)} :root .afaq .ans{padding:0 40px 20px 0;font-size:16.5px} :root .author{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;margin-top:2.6em!important} :root .author .av{width:56px;height:56px;border-radius:50%;background:var(--navy);display:grid;place-items:center;color:#fff} :root .author .av svg{width:28px;height:28px;color:#E08B63} :root .author b{display:block;color:var(--navy);font-size:16px;font-family:var(--cm-display)} :root .author p{font-size:14.5px;line-height:1.55;color:var(--muted)} :root .share{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:14px;color:var(--muted)} :root .share button{border:1px solid var(--line);background:var(--white);padding:7px 12px;font-size:13px;font-weight:600;color:var(--navy);border-radius:999px} :root .share button:hover{border-color:var(--navy)} :root .endcta{padding-block:0 clamp(64px,8vw,110px)} /* mobile quote bar on product pages */ @media(max-width:760px){:root .mbar.pdbar{grid-template-columns:auto 1fr}} /* print-friendly article */ @media print{:root .top,:root .hdr,:root .subnav,:root .toc,:root .mbar,:root .foot,:root .inq,:root .readbar,:root .endcta{display:none!important}:root .art-grid{display:block}} /* photo crops: --z zoom, --dx/--dy shift the point of interest to the centre */ :root .ph-img.z{transform:scale(var(--z,1)) translate(var(--dx,0%),var(--dy,0%))} :root .model:hover .ph-img.z{transform:scale(calc(var(--z,1)*1.05)) translate(var(--dx,0%),var(--dy,0%))} :root .gal-main.zoomed .ph-img{transform:scale(calc(var(--z,1)*1.8)) translate(var(--dx,0%),var(--dy,0%))} :root .thumb:hover .ph-img.z{transform:scale(calc(var(--z,1)*1.06)) translate(var(--dx,0%),var(--dy,0%))} :root .subnav a.btn,:root .subnav a.btn:hover{color:#fff;padding:0 14px} :root .subnav a.btn::after{display:none} @media(max-width:999px){ :root .phero>.wrap{gap:18px} :root .phero-copy{display:contents} :root .phero .crumb{order:1;margin-bottom:0}:root .phero .eyebrow{order:2}:root .phero h1{order:3}:root .phero-media{order:4}:root .phero .lede{order:5}:root .phero .hero-btns{order:6}:root .phero .facts{order:7}:root .phero .bsearch{order:6} :root .phero-media .stage{aspect-ratio:16/10} } :root .opt li{align-items:center} :root .badge{align-self:center} :root .prose a.btn,:root .prose a.btn:hover{color:#fff;text-decoration:none} :root .toc a.btn,:root .toc a.btn:hover{color:#fff;border-left:0;margin:0;padding:0 14px;font-weight:700} :root .prose .mist td:first-child{white-space:normal;width:50%} @media(max-width:760px){:root .prose .mist td:first-child{width:100%}} /* ================= batch 2: service, solutions, company, blog list, contact ================= */ /* audience cards */ :root .who5{display:grid;gap:14px;grid-template-columns:1fr} @media(min-width:700px){:root .who5{grid-template-columns:repeat(2,1fr)}} @media(min-width:1100px){:root .who5{grid-template-columns:repeat(5,1fr)}} :root .who5 li{background:var(--white);border:1px solid var(--line);border-top:2px solid var(--sage);padding:20px;display:grid;gap:8px;align-content:start} :root .who5 .ic{width:40px;height:40px;border-radius:50%;background:var(--sage-tint);color:var(--sage-dk);display:grid;place-items:center} :root .who5 .ic svg{width:20px;height:20px} :root .who5 b{color:var(--navy);font-size:16px;line-height:1.3} :root .who5 p{font-size:14.5px} /* route cards */ :root .routes3{display:grid;gap:20px;grid-template-columns:1fr} @media(min-width:1000px){:root .routes3{grid-template-columns:repeat(3,1fr)}} :root .rcard{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;min-width:0;transition:transform .3s,box-shadow .3s} :root .rcard:hover{transform:translateY(-4px);box-shadow:0 24px 50px -24px rgba(21,35,59,.3)} :root .rcard .stage{aspect-ratio:16/10} :root .rcard .rn{position:absolute;left:14px;top:14px;background:var(--navy);color:#fff;font-size:12px;font-weight:700;letter-spacing:.12em;padding:6px 10px;border-radius:999px} :root .rcard .body{padding:24px;display:grid;gap:12px;flex:1;align-content:start} :root .rcard h3{font-size:21px} :root .rcard p{font-size:15px} :root .rcard dl{margin:6px 0 0;display:grid;gap:10px;border-top:1px solid var(--line);padding-top:14px} :root .rcard dt{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brick)} :root .rcard dd{margin:2px 0 0;font-size:14.5px;color:var(--navy);font-weight:600} /* two-column responsibility table */ :root .resp td:nth-child(2){color:var(--navy)} :root .resp th:nth-child(2){color:var(--brick)} :root .resp th:nth-child(3){color:var(--sage-dk)} /* trio */ :root .trio{display:grid;gap:0;grid-template-columns:1fr;border:1px solid var(--line);background:var(--white)} @media(min-width:900px){:root .trio{grid-template-columns:repeat(3,1fr)}} :root .trio li{padding:26px 24px;display:grid;gap:10px;align-content:start;border-bottom:1px solid var(--line);position:relative} @media(min-width:900px){:root .trio li{border-bottom:0;border-right:1px solid var(--line)}:root .trio li:last-child{border-right:0}} :root .trio li:last-child{border-bottom:0} :root .trio .ic{width:48px;height:48px;color:var(--brick)} :root .trio b{color:var(--navy);font-size:18px;font-family:var(--cm-display)} :root .trio p{font-size:15px} /* horizontal stage rail */ :root .srail{display:grid;gap:0;grid-template-columns:1fr;counter-reset:sr} @media(min-width:1100px){:root .srail{grid-template-columns:repeat(var(--n,7),1fr)}} :root .srail li{position:relative;padding:0 18px 26px 56px;display:grid;gap:6px;align-content:start} @media(min-width:1100px){:root .srail li{padding:58px 16px 0 0}} :root .srail li::before{counter-increment:sr;content:counter(sr);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700;z-index:1} :root .srail li::after{content:"";position:absolute;background:var(--line-dk)} @media(max-width:1099px){:root .srail li::after{left:19px;top:40px;bottom:0;width:2px}} @media(min-width:1100px){:root .srail li::after{left:40px;right:0;top:19px;height:2px}} :root .srail li:last-child::after{display:none} :root .srail b{color:#fff;font-size:16.5px;font-family:var(--cm-display)} :root .srail p{font-size:14px;color:var(--on-navy)} :root .srail small{display:block;font-size:13px;color:#E08B63;font-weight:600;margin-top:4px} :root .srail.light li::before{background:var(--white);color:var(--navy);border:1.5px solid var(--navy)} :root .srail.light li::after{background:var(--line)} :root .srail.light b{color:var(--navy)} :root .srail.light p{color:var(--text)} :root .srail.light small{color:var(--sage-dk)} /* feature list cards */ :root .fl{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:800px){:root .fl{grid-template-columns:repeat(2,1fr)}} :root .fl>div{background:var(--white);border:1px solid var(--line);padding:24px;display:grid;gap:12px;align-content:start} :root .fl h3{font-size:19px} :root .fl ul{display:grid;gap:10px} :root .fl li{display:grid;grid-template-columns:22px 1fr;font-size:15px} :root .fl li svg{width:16px;height:16px;color:var(--sage-dk);margin-top:4px} :root .fl li b{color:var(--navy)} /* other solutions strip */ :root .osol{display:flex;flex-wrap:wrap;gap:8px} :root .osol a{display:inline-flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--line);padding:10px 14px;border-radius:999px;text-decoration:none;font-size:14px;font-weight:600;color:var(--navy);transition:border-color .2s} :root .osol a:hover{border-color:var(--navy)} :root .osol a[aria-current]{background:var(--navy);color:#fff;border-color:var(--navy)} /* launch range cards */ :root .lrange{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:640px){:root .lrange{grid-template-columns:repeat(2,1fr)}} @media(min-width:1100px){:root .lrange{grid-template-columns:repeat(4,1fr)}} :root .lr{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column} :root .lr .stage{aspect-ratio:4/3} :root .lr .role{position:absolute;left:12px;top:12px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--brick);color:#fff;padding:5px 10px;border-radius:999px} :root .lr .body{padding:18px 20px 20px;display:grid;gap:8px} :root .lr h3{font-size:17px} :root .lr p{font-size:14.5px} /* process tabs (factory) */ :root .ptabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px} :root .ppanel{background:var(--white);border:1px solid var(--line);padding:28px 24px} :root .flowline{display:flex;flex-wrap:wrap;gap:10px 6px;align-items:center} :root .flowline li{display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;color:var(--navy)} :root .flowline li span{background:var(--paper);border:1px solid var(--line);padding:9px 13px;border-radius:2px;animation:pop .35s cubic-bezier(.2,.7,.2,1) both} :root .flowline li.q span{background:var(--sage-tint);border-color:var(--sage);color:var(--sage-dk)} :root .flowline li:not(:last-child)::after{content:"";width:14px;height:2px;background:var(--stone-dk);margin-left:4px} :root .ppanel .note{margin-top:18px;font-size:14px;color:var(--muted);display:flex;gap:8px;align-items:center} :root .ppanel .note i{width:14px;height:14px;background:var(--sage-tint);border:1px solid var(--sage);display:inline-block} /* stage grid (factory) */ :root .sgrid{display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)} @media(min-width:700px){:root .sgrid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1100px){:root .sgrid{grid-template-columns:repeat(4,1fr)}} :root .sgrid li{background:var(--white);border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px;display:grid;gap:8px;align-content:start;transition:background .2s} :root .sgrid li:hover{background:#FBFAF7} :root .sgrid .no{font-family:var(--mono);font-size:12px;color:var(--brick);font-weight:600} :root .sgrid b{color:var(--navy);font-size:17px;font-family:var(--cm-display)} :root .sgrid p{font-size:14.5px} :root .sgrid small{font-size:12.5px;color:var(--sage-dk);font-weight:600} /* quality checkpoints */ :root .qpoints{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:900px){:root .qpoints{grid-template-columns:repeat(4,1fr)}} :root .qpoints li{border-top:3px solid var(--sage);background:var(--white);padding:20px;display:grid;gap:8px;align-content:start} :root .qpoints .k{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-dk)} :root .qpoints p{font-size:14.5px;color:var(--navy)} /* blog list */ :root .bsearch{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line);padding:0 14px;height:54px;max-width:560px;border-radius:2px;box-shadow:0 10px 30px -18px rgba(21,35,59,.3)} :root .bsearch svg{width:20px;height:20px;color:var(--muted);flex:none} :root .bsearch input{border:0;outline:0;font:inherit;font-size:16px;width:100%;background:transparent;color:var(--ink)} :root .cats6{display:grid;gap:14px;grid-template-columns:1fr} @media(min-width:640px){:root .cats6{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){:root .cats6{grid-template-columns:repeat(3,1fr)}} :root .cat6{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;background:var(--white);border:1px solid var(--line);padding:18px;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s} :root .cat6:hover{border-color:var(--navy);transform:translateY(-3px)} :root .cat6 .ic{width:52px;height:52px;border-radius:50%;background:var(--paper);display:grid;place-items:center;color:var(--brick)} :root .cat6 .ic svg{width:24px;height:24px} :root .cat6 small{display:block;font-size:13px;color:var(--muted);font-weight:600} :root .cat6 b{color:var(--navy);font-size:16.5px;line-height:1.3;display:block} :root .cat6 .cnt{font-family:var(--mono);font-size:12px;color:var(--muted)} :root .ess{display:grid;gap:24px;grid-template-columns:1fr} @media(min-width:1000px){:root .ess{grid-template-columns:1.1fr .9fr;gap:40px}} :root .ess-main{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);text-decoration:none;color:inherit} :root .ess-main .stage{aspect-ratio:16/9} @media(min-width:1000px){:root .ess-main .stage{flex:1;aspect-ratio:auto;min-height:280px}} :root .ess-main .body{padding:24px 26px 26px;display:grid;gap:10px} :root .ess-main h3{font-size:26px;letter-spacing:-.015em;transition:color .2s} :root .ess-main:hover h3{color:var(--brick)} :root .tagc{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brick)} :root .esslist{display:grid;border-top:1px solid var(--navy)} :root .esslist a{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:15px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit} :root .esslist .n{font-family:var(--mono);font-size:13px;color:var(--brick);padding-top:3px} :root .esslist b{display:block;color:var(--navy);font-size:16px;line-height:1.35;transition:color .2s} :root .esslist a:hover b{color:var(--brick)} :root .esslist span{font-size:14px;color:var(--muted)} :root .agrid{display:grid;gap:24px;grid-template-columns:1fr} @media(min-width:640px){:root .agrid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){:root .agrid{grid-template-columns:repeat(3,1fr)}} :root .acard{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;animation:pop .35s cubic-bezier(.2,.7,.2,1) both} :root .acard[hidden]{display:none} :root .acard .stage{aspect-ratio:16/10;border-radius:2px} :root .acard .stage .ph-img{transition:transform .6s} :root .acard:hover .stage .ph-img{transform:scale(1.04)} :root .acard .meta{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brick)} :root .acard .meta span{color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:none} :root .acard h3{font-size:19px;line-height:1.3;transition:color .2s} :root .acard:hover h3{color:var(--brick)} :root .acard p{font-size:14.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} :root .bfilter{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;margin-bottom:28px} :root .bfilter::-webkit-scrollbar{display:none} :root .bfilter .chip{flex:none} :root .more{display:flex;justify-content:center;margin-top:36px} :root .tools5{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px} :root .tools5 li{border:1px solid var(--line-dk);color:#fff;padding:8px 12px;font-size:14px;font-weight:600;display:flex;gap:8px;align-items:center} :root .tools5 li svg{width:15px;height:15px;color:#E08B63} /* contact */ :root .cgrid{display:grid;gap:32px;grid-template-columns:1fr;align-items:start} @media(min-width:1000px){:root .cgrid{grid-template-columns:1.3fr .7fr;gap:48px}} :root .cform{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--brick);padding:clamp(22px,3vw,36px);display:grid;gap:26px;position:relative} :root .cform fieldset{border:0;margin:0;padding:0;display:grid;gap:12px;min-width:0} :root .cform legend{font-weight:700;color:var(--navy);font-size:16px;margin-bottom:10px;display:flex;gap:10px;align-items:center;padding:0} :root .cform legend .n{width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:13px} :root .cform legend i{font-style:normal;color:var(--brick)} :root .intent{display:flex;flex-wrap:wrap;gap:8px} :root .intent label{position:relative} :root .intent input{position:absolute;opacity:0;inset:0} :root .intent span{display:inline-block;border:1px solid var(--line);background:var(--paper);padding:9px 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--navy);cursor:pointer;transition:all .2s} :root .intent input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff} :root .intent input:focus-visible+span{outline:2px solid var(--brick);outline-offset:2px} :root .intent.bad span{border-color:#C0392B} :root .prows{display:grid;gap:10px} :root .prow{display:grid;gap:8px;grid-template-columns:1.3fr 1fr .8fr 1.2fr 36px;align-items:end;animation:pop .3s both} :root .prow .f label{font-size:12px} :root .prow .rm{width:36px;height:48px;border:1px solid var(--line);background:var(--white);color:var(--muted);display:grid;place-items:center;border-radius:var(--r)} :root .prow .rm:hover{color:var(--brick);border-color:var(--brick)} :root .prow:first-child .rm{visibility:hidden} :root .prow:not(:first-child) .f label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} @media(max-width:760px){:root .prow{grid-template-columns:1fr 1fr;padding:12px;border:1px dashed var(--line)}:root .prow .rm{grid-column:2;justify-self:end;visibility:visible!important}:root .prow:first-child .rm{display:none}:root .prow:not(:first-child) .f label{position:static;width:auto;height:auto;clip:auto}} :root .addrow{justify-self:start;background:none;border:1px dashed var(--navy);color:var(--navy);font-weight:700;font-size:14px;padding:10px 14px;border-radius:var(--r)} :root .addrow:hover{background:var(--paper)} :root .hint{font-size:13.5px;color:var(--muted)} :root .g2{display:grid;gap:16px;grid-template-columns:1fr 1fr} @media(max-width:620px){:root .g2{grid-template-columns:1fr}} :root .cside{display:grid;gap:20px} @media(min-width:1000px){:root .cside{position:sticky;top:calc(var(--hh) + 20px)}} :root .cbox{background:var(--white);border:1px solid var(--line);padding:22px;display:grid;gap:14px} :root .cbox h3{font-size:18px} :root .cways{display:grid;gap:0;border-top:1px solid var(--line)} :root .cways li{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)} :root .cways .ic{width:40px;height:40px;border-radius:50%;background:var(--paper);display:grid;place-items:center;color:var(--brick)} :root .cways .ic svg{width:18px;height:18px} :root .cways b{display:block;color:var(--navy);font-size:15px} :root .cways span{font-size:13.5px;color:var(--muted)} :root .cways .copy-btn{border-color:var(--line);color:var(--navy)} :root .cbox.navy{background:var(--navy);border-color:var(--navy);color:var(--on-navy)} :root .cbox.navy h3{color:#fff} :root .cbox.navy .next{margin-top:0} :root .cbox.navy .next li{font-size:14.5px} :root .docs2 td:last-child{color:var(--sage-dk);font-weight:600} @media(min-width:761px){:root .docs2 td:first-child{width:56%}} :root form.card.cform{grid-template-columns:1fr} /* ---- review fixes 2026-10-28 ---- */ :root .hstyles{display:grid;gap:8px;grid-template-columns:1fr} @media(min-width:560px){:root .hstyles{grid-template-columns:1fr 1fr}} :root .hstyles li{background:var(--white);border:1px solid var(--line);padding:12px 14px;font-size:13.5px;color:var(--muted);display:grid;gap:2px} :root .hstyles b{color:var(--navy);font-size:14.5px} @media(max-width:759px){:root .phero-media .stage .cap,:root .stage .cap{left:10px;bottom:10px;font-size:11px;padding:4px 9px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}} :root .qrow select{height:44px;border:1px solid var(--line);background:var(--white);padding:0 12px;font:inherit;font-size:14.5px;color:var(--navy);border-radius:var(--r)} /* header: make room once the inquiry icon is present */ @media(max-width:1460px){:root .hdr .btn-o{display:none}:root .nav-a{padding:0 10px}} /* inquiry drawer */ :root .idrawer{position:fixed;inset:0;z-index:200} :root .idrawer[hidden]{display:none} :root .idrawer-bg{position:absolute;inset:0;background:rgba(21,35,59,.45);animation:fade .2s both} :root .idrawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--paper);display:flex;flex-direction:column;gap:14px;padding:22px 22px 18px;box-shadow:-20px 0 50px -20px rgba(21,35,59,.35);animation:slidein .25s both} @keyframes slidein{from{transform:translateX(40px);opacity:0}} @keyframes fade{from{opacity:0}} :root .idrawer-h{display:flex;justify-content:space-between;align-items:center;gap:12px} :root .idrawer-h h2{font-size:24px} :root .idrawer-sub{font-size:14.5px;color:var(--muted)} :root .ilist{display:grid;gap:10px;overflow-y:auto;flex:1;align-content:start;margin:0 -4px;padding:0 4px} :root .ilist li{background:var(--white);border:1px solid var(--line);padding:14px;display:grid;grid-template-columns:1fr 36px;gap:10px 12px;align-items:start} :root .ilist .it{display:grid;gap:2px} :root .ilist .it b{font-family:var(--mono);font-size:14px;color:var(--navy)} :root .ilist .it span{font-size:14.5px;font-weight:600;color:var(--navy)} :root .ilist .it small{font-size:13px;color:var(--muted)} :root .ilist .iq{grid-column:1;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--navy)} :root .ilist .iq input{width:120px;height:38px;border:1px solid var(--line);background:var(--paper);padding:0 10px;font:inherit;font-size:14px} :root .ilist .rm{grid-column:2;grid-row:1;width:36px;height:36px;border:1px solid var(--line);background:var(--white);color:var(--muted);display:grid;place-items:center;border-radius:var(--r)} :root .ilist .rm:hover{color:var(--brick);border-color:var(--brick)} :root .iempty{padding:22px;border:1px dashed var(--line);text-align:center;color:var(--muted);font-size:14.5px} :root .idrawer-f{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px} :root .idrawer-f .off{opacity:.5} :root body.inq-open{overflow:hidden} :root .fromlist{background:#EEF2EC;border-left:3px solid var(--sage-dk);padding:10px 14px;font-size:14px;color:var(--navy)} :root .idrawer-f .btn{flex:1 1 auto;justify-content:center} /* article: make the deliverable of each stage stand out */ :root .stagemap em{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-top:8px;padding:7px 10px;background:#EEF2EC;border-left:2px solid var(--sage-dk);color:var(--navy);font-weight:600;font-size:.95em} :root .stagemap em b{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-dk)} /* article: lighter cover on phones so the text starts sooner */ @media(max-width:759px){ :root .ahero.has-feat>.wrap{padding-block:16px 18px} :root .ahero h1{font-size:30px;margin-top:10px} :root .ahero .ameta{font-size:12.5px} :root .ahero.has-feat{padding-bottom:36px} :root .ahero.has-feat .feat .stage{aspect-ratio:2/1} } /* blog search feedback */ :root .bhint{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:14.5px;font-weight:600;color:var(--navy)} :root .bhint[hidden],:root .bactive[hidden]{display:none} :root .bactive{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-6px 0 18px;font-size:15px;color:var(--muted)} :root .bactive b{color:var(--navy)} :root .bactive .chip{display:inline-flex;align-items:center;gap:8px} :root body.searching .bmid{display:none} /* contact: shorter top, quick contact on phones, fields per request type */ :root .chero>.wrap{padding-block:clamp(18px,2.6vw,32px) clamp(18px,2.4vw,28px)} :root .chero h1{font-size:clamp(30px,3.6vw,46px);margin-top:10px} :root .chero .lede{margin-top:10px;font-size:17px} :root .cquick{display:flex;gap:10px;margin-bottom:-18px} :root .cquick .btn{flex:1;justify-content:center;min-height:44px;font-size:12.5px} :root .btn-wa{background:#1F7A4D;color:#fff;border:1px solid #1F7A4D} @media(min-width:1000px){:root .cquick{display:none}} :root [data-for][hidden]{display:none!important} /* OEM: route entry links and compact customer row */ :root .rcard .rgo{justify-self:start;margin-top:4px} :root .whorow{padding-top:0} :root .whorow .wrap{border-top:1px solid var(--line);padding-top:clamp(28px,3.4vw,44px);display:grid;gap:16px} :root .whorow ul{display:grid;gap:10px;grid-template-columns:1fr} @media(min-width:640px){:root .whorow ul{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){:root .whorow ul{grid-template-columns:repeat(5,1fr)}} :root .whorow li{display:grid;gap:4px;padding:14px 16px;background:var(--white);border:1px solid var(--line);font-size:13.5px;color:var(--muted)} :root .whorow b{color:var(--navy);font-size:14.5px;line-height:1.3} :root .skutbl code{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--navy);white-space:nowrap} @media(max-width:759px){:root .intent{gap:6px}:root .intent span{padding:7px 11px;font-size:13px}:root .chero .lede{font-size:15.5px}:root .cform{gap:22px}} /* ===== WordPress layer: lets Elementor and Astra wrappers step aside so the template markup lays out as in the samples ===== */ body:not(.elementor-editor-active) .elementor-location-header, body:not(.elementor-editor-active) .elementor-location-footer, body:not(.elementor-editor-active) .cm-doc, body:not(.elementor-editor-active) .cm-sec, body:not(.elementor-editor-active) .cm-sec>.e-con-inner, body:not(.elementor-editor-active) .cm-sec .elementor-widget-html, body:not(.elementor-editor-active) .cm-sec .elementor-widget-shortcode, body:not(.elementor-editor-active) .cm-sec .elementor-widget-theme-post-content, body:not(.elementor-editor-active) .cm-sec .elementor-widget-woocommerce-product-content, body:not(.elementor-editor-active) .cm-sec .elementor-widget-container, body:not(.elementor-editor-active) .cm-sec .elementor-shortcode{display:contents} /* Astra page shell */ #page,#content,.site-content,.site-content>.ast-container,#primary,#main,.site-main{display:block;max-width:none;width:auto;margin:0;padding:0;background:transparent;border:0} .site-content>.ast-container{padding:0!important;max-width:none!important} #primary,#secondary{margin:0!important;padding:0!important;width:auto!important;float:none!important;border:0!important} #secondary{display:none!important} .elementor-location-single,.elementor-location-archive,.ast-separate-container .elementor-location-single{padding:0!important;margin:0!important;background:transparent!important;box-shadow:none!important;border:0!important} body.ast-page-builder-template .site-content>.ast-container{max-width:none} html body{background:var(--paper);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.6} body h1,body h2,body h3,body h4{font-family:var(--cm-display);color:var(--ink)} body a{text-decoration-thickness:1px} body button:focus,body a:focus{outline-offset:2px} .cm-sec input,.cm-sec select,.cm-sec textarea{font-family:var(--body);box-shadow:none} /* Astra/Woo leftovers we never show */ .woocommerce-breadcrumb,.woocommerce .price,.single_add_to_cart_button,.ast-site-header-cart,.woocommerce-store-notice{display:none!important} /* site search dialog */ .sdlg{position:fixed;inset:0;z-index:120;display:grid;place-items:start center;padding:clamp(70px,14vh,140px) 16px 16px} .sdlg[hidden]{display:none} .sdlg-bg{position:absolute;inset:0;background:rgba(21,35,59,.45)} .sdlg-box{position:relative;display:flex;align-items:center;gap:10px;width:min(640px,100%);background:var(--white);border:1px solid var(--line);padding:10px 10px 10px 16px;box-shadow:0 20px 50px rgba(21,35,59,.22)} .sdlg-box svg{width:20px;height:20px;color:var(--muted);flex:none} .sdlg-box input{flex:1;min-width:0;border:0;outline:0;font:500 17px var(--body);color:var(--ink);background:transparent;padding:8px 0} .sdlg-box .btn{min-height:42px} /* forms */ form .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0} form.sending button[type=submit]{opacity:.6;cursor:progress} .done .ref{font-family:var(--mono);font-size:13px;color:var(--ink)} /* Elementor resets figure margins with a long :not() chain (0,4,1); restore the template's article figure spacing */ .elementor .elementor-widget.elementor-widget-html figure.figure{margin:1.8em 0 0}/* End custom CSS */