/* ========================================================================== Al-Mu'tasim Central Premium โ€” main stylesheet Design system: DESIGN-SYSTEM-V3.md ยท Motion: MOTION-SYSTEM-V3.md Mobile-first. Logical properties everywhere so RTL (ar) and LTR (en) share one codebase. ========================================================================== */ /* ---------- Fonts (self-hosted, OFL) ---------- */ @font-face{font-family:"Plex Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/plex-arabic-arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC} @font-face{font-family:"Plex Arabic";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/plex-arabic-arabic-500.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC} @font-face{font-family:"Plex Arabic";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/plex-arabic-arabic-600.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC} @font-face{font-family:"Plex Arabic";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/plex-arabic-arabic-700.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC} @font-face{font-family:"Plex Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/plex-arabic-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Plex Arabic";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/plex-arabic-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Plex Arabic";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/plex-arabic-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Plex Arabic";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/plex-arabic-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-condensed-latin-500.woff2) format("woff2")} @font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-condensed-latin-600.woff2) format("woff2")} /* ---------- Tokens ---------- */ :root{ --ink:#0A1C2E; --ink-900:#061321; --navy-800:#0F2B47; --navy:#113B65; --navy-600:#1D4F82; --steel:#95B0CD; --steel-dark:#4E6E93; --steel-300:#BCCDE0; --steel-100:#E7EEF6; --concrete:#F4F2EE; --concrete-200:#E4DFD6; --graphite:#15191E; --text:#3F4852; --muted:#5E6771; --line:#DDE1E6; --white:#fff; --line-dark:rgba(255,255,255,.16); --font:"Plex Arabic","IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif; --font-num:"Barlow Condensed","Plex Arabic",Arial Narrow,sans-serif; --fs-display:clamp(2.6rem,1.4rem + 4.6vw,5.4rem); --fs-h1:clamp(2.2rem,1.5rem + 2.8vw,3.9rem); --fs-h2:clamp(1.85rem,1.3rem + 2vw,3.1rem); --fs-h3:clamp(1.2rem,1.05rem + .55vw,1.55rem); --fs-lead:clamp(1.06rem,1rem + .3vw,1.25rem); --fs-body:1.0625rem; --lh-body:1.95; --lh-head:1.25; --gutter:clamp(20px,4vw,48px); --container:1320px; --container-wide:1640px; --container-narrow:860px; --section:clamp(72px,4.5rem + 3.5vw,136px); --header-h:88px; --header-h-scrolled:72px; --ease-out:cubic-bezier(.16,1,.3,1); --ease:cubic-bezier(.2,.7,.2,1); --t-fast:180ms; --t-base:320ms; --t-slow:900ms; --t-image:1400ms; --dir:1; --scrim-dir:90deg; --shadow-float:0 30px 60px -30px rgba(10,28,46,.45); } [dir="rtl"]{--dir:-1;--scrim-dir:270deg} :lang(en){--lh-body:1.7;--lh-head:1.1} /* ---------- Base ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h-scrolled) + 24px)} @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} body{margin:0;font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text);background:var(--white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden} img,svg,video,iframe{display:block;max-width:100%} img{height:auto} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer;background:none;border:0;padding:0} h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0} ul,ol{padding:0;list-style:none} h1,h2,h3,h4{color:var(--graphite);font-weight:700;line-height:var(--lh-head)} [hidden]{display:none!important} abbr[title]{text-decoration:none} ::selection{background:var(--navy);color:#fff} :focus-visible{outline:2px solid var(--navy-600);outline-offset:3px} .brands-band :focus-visible,.cta-final :focus-visible,.site-footer :focus-visible,.hero :focus-visible,.page-hero :focus-visible,.commitment :focus-visible,.supply-audience :focus-visible{outline-color:var(--steel)} .site-main{display:block;outline:0} .header-solid .site-main{padding-top:var(--header-h)} .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip-link{position:fixed;inset-inline-start:16px;top:16px;transform:translateY(-300%);z-index:1000;background:var(--navy);color:#fff;padding:12px 18px;font-weight:600} .skip-link:focus{transform:none} .icon{width:20px;height:20px;flex:none} .icon--arrow,.icon--chevron,.icon--arrow-out{transform:scaleX(var(--dir))} /* ---------- Layout ---------- */ .container{width:min(100% - var(--gutter) * 2,var(--container));margin-inline:auto} .container--wide{width:min(100% - var(--gutter) * 2,var(--container-wide))} .container--narrow{width:min(100% - var(--gutter) * 2,var(--container-narrow))} .section{padding-block:var(--section)} .section--tight-top{padding-top:calc(var(--section) * .5)} .section--tight-bottom{padding-bottom:calc(var(--section) * .35)} .section--concrete{background:var(--concrete)} /* ---------- Type ---------- */ .h1{font-size:var(--fs-h1)} .h2{font-size:var(--fs-h2);letter-spacing:0} .h3{font-size:var(--fs-h3);line-height:1.45} :lang(en) .h1,:lang(en) .h2{letter-spacing:-.02em} .lead{font-size:var(--fs-lead);line-height:1.95;color:var(--text)} :lang(en) .lead{line-height:1.65} .eyebrow{display:flex;align-items:center;gap:14px;font-size:.8125rem;font-weight:600;line-height:1.6;color:var(--navy);margin-bottom:18px} .eyebrow::before{content:"";width:28px;height:2px;background:var(--steel);flex:none} :lang(en) .eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.75rem} .eyebrow__index{font-family:var(--font-num);font-weight:600;letter-spacing:.08em} .eyebrow--light{color:var(--steel-300)} .numeral{font-family:var(--font-num);font-weight:600;line-height:.8;letter-spacing:-.01em;direction:ltr;display:block} .numeral-sm{font-family:var(--font-num);font-weight:600;font-size:2.75rem;line-height:1;color:var(--steel-dark);display:block} .num{font-family:var(--font-num);font-weight:600;direction:ltr} .wordmark{font-family:var(--font-num);font-weight:600;letter-spacing:.04em;line-height:1;direction:ltr} .section-head{margin-bottom:clamp(36px,4vw,64px);max-width:760px} .section-head .h2{max-width:20ch} .section-head--split{display:grid;gap:24px;max-width:none} .section-head__aside{display:grid;gap:16px;align-content:end;justify-items:start;color:var(--muted);max-width:46ch} @media (min-width:900px){.section-head--split{grid-template-columns:1.2fr 1fr;align-items:end;gap:64px}.section-head__aside{justify-self:end}} /* ---------- Buttons ---------- */ .btn{--btn-bg:var(--navy);--btn-fg:#fff;--btn-fill:var(--ink);--btn-fg-hover:#fff;--btn-bd:transparent; position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:54px;padding:0 28px; background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);font-size:.9375rem;font-weight:600;line-height:1.2;white-space:nowrap; transition:color var(--t-base) var(--ease),border-color var(--t-base) var(--ease)} .btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--btn-fill);transform:scaleX(0);transform-origin:var(--origin-start,left center);transition:transform 480ms var(--ease-out)} [dir="rtl"] .btn::before{transform-origin:right center} .btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)} .btn:hover,.btn:focus-visible{color:var(--btn-fg-hover)} .btn .icon{width:18px;height:18px;transition:transform var(--t-base) var(--ease)} .btn:hover .icon--arrow{transform:translateX(calc(var(--dir) * 4px)) scaleX(var(--dir))} .btn .btn__lead{width:20px;height:20px} .btn--primary{--btn-bg:var(--navy);--btn-fill:var(--ink)} .btn--outline{--btn-bg:transparent;--btn-fg:var(--navy);--btn-bd:var(--navy);--btn-fill:var(--navy);--btn-fg-hover:#fff} .btn--light{--btn-bg:#fff;--btn-fg:var(--ink);--btn-fill:var(--steel);--btn-fg-hover:var(--ink)} .btn--outline-light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.55);--btn-fill:#fff;--btn-fg-hover:var(--ink)} .btn--lg{min-height:60px;padding:0 32px} .btn--text,.btn--text-light{min-height:auto;padding:6px 0;background:none;border:0;color:var(--navy);gap:10px} .btn--text::before,.btn--text-light::before{display:none} .btn--text .btn__label,.btn--text-light .btn__label{background:linear-gradient(currentColor,currentColor) no-repeat;background-size:100% 1px;background-position:0 100%;padding-bottom:4px;transition:background-size var(--t-base) var(--ease)} .btn--text:hover .btn__label,.btn--text-light:hover .btn__label{background-size:0 1px} [dir="rtl"] .btn--text .btn__label,[dir="rtl"] .btn--text-light .btn__label{background-position:100% 100%} .btn--text:hover,.btn--text:focus-visible{color:var(--navy)} .btn--text-light,.btn--text-light:hover{color:#fff} .btn--header{--btn-bg:transparent;--btn-fg:currentColor;--btn-bd:currentColor;--btn-fill:var(--navy);--btn-fg-hover:#fff;min-height:44px;padding:0 20px;font-size:.875rem} /* ---------- Header ---------- */ .site-header{position:fixed;inset-inline:0;top:0;z-index:100;height:var(--header-h);color:#fff;background:transparent;transition:background-color var(--t-base) var(--ease),color var(--t-base) var(--ease),height var(--t-base) var(--ease),transform 450ms var(--ease-out),box-shadow var(--t-base) var(--ease)} .header-solid .site-header,.site-header.is-scrolled,.menu-open .site-header{background:#fff;color:var(--graphite);box-shadow:0 1px 0 var(--line)} .site-header.is-scrolled{height:var(--header-h-scrolled)} .site-header.is-hidden{transform:translateY(-100%)} .menu-open .site-header{transform:none} .site-header__inner{width:min(100% - var(--gutter) * 2,var(--container-wide));margin-inline:auto;height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px} .brand{display:flex;align-items:center;gap:12px;flex:none} .brand__mark{width:54px;display:block} .brand__img{width:100%;height:auto} .brand__img--light{display:none} .header-overlay .site-header:not(.is-scrolled) .brand__img--dark{display:none} .header-overlay .site-header:not(.is-scrolled) .brand__img--light{display:block} .menu-open .site-header .brand__img--dark{display:block!important} .menu-open .site-header .brand__img--light{display:none!important} .brand__text{display:flex;flex-direction:column;line-height:1.15} .brand__text strong{font-size:1.1875rem;font-weight:700;letter-spacing:0} .brand__text small{font-size:.75rem;font-weight:500;opacity:.72;margin-top:3px} :lang(en) .brand__text strong{font-size:1rem;letter-spacing:.06em} :lang(en) .brand__text small{letter-spacing:.04em} .primary-nav{display:none} .primary-nav__list{display:flex;align-items:center;gap:clamp(16px,1.6vw,30px)} .primary-nav__list a{position:relative;display:block;padding-block:8px;font-size:.9375rem;font-weight:500;white-space:nowrap;opacity:.9;transition:opacity var(--t-fast)} .primary-nav__list a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--t-base) var(--ease-out)} [dir="rtl"] .primary-nav__list a::after{transform-origin:right} .primary-nav__list a:hover{opacity:1} .primary-nav__list a:hover::after,.primary-nav__list .is-current a::after,.primary-nav__list .current-menu-item a::after{transform:scaleX(1)} .primary-nav__list .is-current a{opacity:1;font-weight:600} .site-header.is-scrolled .primary-nav__list .is-current a,.header-solid .primary-nav__list .is-current a{color:var(--navy)} .site-header__actions{display:flex;align-items:center;gap:18px} .site-header__actions .btn--header{display:none} .lang-switch{display:flex;align-items:center;gap:10px;font-size:.8125rem;font-weight:600;letter-spacing:.08em;direction:ltr} .lang-switch__item{opacity:.6;padding:6px 2px;transition:opacity var(--t-fast)} a.lang-switch__item:hover{opacity:1} .lang-switch__item.is-active{opacity:1} .lang-switch__sep{width:1px;height:14px;background:currentColor;opacity:.35} .menu-toggle{width:44px;height:44px;display:grid;place-items:center;margin-inline-end:-10px} .menu-toggle__bars{position:relative;width:24px;height:14px;display:block} .menu-toggle__bars i{position:absolute;inset-inline-start:0;height:1.6px;width:100%;background:currentColor;transition:transform var(--t-base) var(--ease),opacity var(--t-fast),width var(--t-base)} .menu-toggle__bars i:nth-child(1){top:0} .menu-toggle__bars i:nth-child(2){top:6px;width:70%} .menu-toggle__bars i:nth-child(3){top:12px} .menu-toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)} .menu-toggle[aria-expanded="true"] i:nth-child(2){opacity:0} .menu-toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)} @media (min-width:900px){.site-header__actions .btn--header{display:inline-flex}} @media (min-width:1200px){.primary-nav{display:block}.menu-toggle{display:none}.site-header__actions .lang-switch--header{padding-inline-end:4px}} @media (max-width:599px){.lang-switch--header{display:none}.brand__mark{width:46px}.brand__text strong{font-size:1.0625rem}} /* Mobile menu */ .mobile-menu{position:fixed;inset:0;z-index:99;background:#fff;color:var(--graphite);padding-top:var(--header-h);overflow-y:auto;clip-path:inset(0 0 100% 0);transition:clip-path 600ms var(--ease-out)} .mobile-menu.is-open{clip-path:inset(0 0 0 0)} .mobile-menu__inner{width:min(100% - var(--gutter) * 2,640px);margin-inline:auto;padding:24px 0 48px;display:flex;flex-direction:column;min-height:100%} .mobile-menu__list li{border-bottom:1px solid var(--line);opacity:0;transform:translateY(16px);transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out);transition-delay:calc(var(--i,0) * 45ms + 120ms)} .mobile-menu.is-open .mobile-menu__list li{opacity:1;transform:none} .mobile-menu__list a{display:flex;align-items:center;justify-content:space-between;padding:16px 0;font-size:1.375rem;font-weight:600} .mobile-menu__list .is-current a{color:var(--navy)} .mobile-menu__list .is-current a::after{content:"";width:8px;height:8px;background:var(--steel)} .mobile-menu__foot{margin-top:32px;display:grid;gap:16px} .mobile-menu__foot .btn{width:100%;justify-content:space-between} .lang-switch--menu{font-size:1rem;gap:16px} .mobile-menu__channel{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line);font-weight:600} .mobile-menu__channel .icon{color:var(--navy);width:22px;height:22px} body.menu-open{overflow:hidden} /* ---------- Hero (home) ---------- */ .hero{position:relative;height:100vh;height:100svh;min-height:620px;max-height:1100px;color:#fff;background:var(--ink);overflow:hidden;isolation:isolate} .hero::after{content:"";position:absolute;inset-inline:0;bottom:0;height:4px;background:var(--steel);z-index:5} .hero__slides{position:absolute;inset:-6% 0 0;z-index:-2;will-change:transform} .hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1400ms var(--ease)} .hero__slide.is-active{opacity:1;z-index:1} .hero__img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transform-origin:50% 60%} .hero__slide.is-active .hero__img{animation:heroZoom 9s var(--ease) forwards} .hero__slide.is-leaving{opacity:0;z-index:0} .hero__slide.is-leaving .hero__img{transform:scale(1)} @keyframes heroZoom{from{transform:scale(1.12)}to{transform:scale(1)}} .hero__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--scrim-dir),rgba(10,28,46,.86) 0%,rgba(10,28,46,.58) 38%,rgba(10,28,46,.12) 72%,rgba(10,28,46,.05) 100%),linear-gradient(0deg,rgba(6,19,33,.92) 0%,rgba(6,19,33,0) 42%),linear-gradient(180deg,rgba(6,19,33,.55) 0%,rgba(6,19,33,0) 22%)} .hero__content{height:100%;display:flex;flex-direction:column;justify-content:center;padding-top:var(--header-h);padding-bottom:150px} .hero__eyebrow{display:flex;align-items:center;font-size:.9375rem;font-weight:500;color:var(--steel-300);overflow:hidden} .hero__eyebrow>span{display:inline-flex;align-items:center;flex-wrap:wrap} .hero__eyebrow b{font-weight:600;color:#fff;margin-inline-start:14px;padding-inline-start:14px;border-inline-start:1px solid rgba(255,255,255,.35);font-family:var(--font)} :lang(en) .hero__eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.8125rem} .hero__title{color:#fff;font-size:var(--fs-display);line-height:1.2;margin:22px 0 24px;max-width:13ch} :lang(en) .hero__title{line-height:1.04;letter-spacing:-.025em;max-width:15ch} .hero__title .line{display:block;overflow:hidden;padding-bottom:.08em} .hero__title .line>span{display:inline-block} .hero__title .line:nth-child(2)>span{color:var(--steel)} .hero__lead{max-width:560px;font-size:var(--fs-lead);line-height:1.9;color:rgba(255,255,255,.84)} :lang(en) .hero__lead{line-height:1.6} .hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px} .hero__foot{position:absolute;inset-inline:0;bottom:4px;z-index:3;border-top:1px solid var(--line-dark)} .hero__foot-inner{display:flex;align-items:stretch;justify-content:space-between;gap:24px} .hero__tabs{display:flex;align-items:center;flex:1;gap:0} .hero__tab{flex:1;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:baseline;text-align:start;padding:20px 0 18px;margin-inline-end:28px;color:#fff;max-width:230px} .hero__tab-index{font-family:var(--font-num);font-weight:600;font-size:.9375rem;letter-spacing:.08em;color:var(--steel)} .hero__tab-label{font-size:.8125rem;font-weight:500;opacity:.62;transition:opacity var(--t-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hero__tab.is-active .hero__tab-label,.hero__tab:hover .hero__tab-label{opacity:1} .hero__tab-bar{grid-column:1/-1;position:relative;height:2px;background:rgba(255,255,255,.2);margin-top:14px;overflow:hidden} .hero__tab-bar i{position:absolute;inset-block:0;inset-inline-start:0;width:100%;background:#fff;transform:scaleX(0);transform-origin:left} [dir="rtl"] .hero__tab-bar i{transform-origin:right} .hero__tab.is-active .hero__tab-bar i{animation:tabProgress var(--slide-ms,7000ms) linear forwards} .hero.is-paused .hero__tab.is-active .hero__tab-bar i{animation-play-state:paused} @keyframes tabProgress{to{transform:scaleX(1)}} .hero__pause{width:40px;height:40px;flex:none;display:grid;place-items:center;border:1px solid rgba(255,255,255,.3);color:#fff;transition:background var(--t-fast),color var(--t-fast)} .hero__pause:hover{background:#fff;color:var(--ink)} .hero__pause .icon{width:16px;height:16px} .hero__pause .i-play,.hero.is-paused .hero__pause .i-pause{display:none} .hero.is-paused .hero__pause .i-play{display:block} .hero__facts{display:none} @media (min-width:1360px){ .hero__facts{display:flex} .hero__facts li{padding:20px 0 20px;padding-inline-start:28px;margin-inline-start:28px;border-inline-start:1px solid var(--line-dark);display:flex;flex-direction:column;justify-content:center} .hero__facts strong{font-size:.9375rem;font-weight:600;color:#fff;line-height:1.4;white-space:nowrap} .hero__facts li:first-child strong{font-family:var(--font-num);font-size:1.25rem;letter-spacing:.04em} .hero__facts span{font-size:.8125rem;color:var(--steel-300);line-height:1.5} } @media (max-width:599px){ .hero{min-height:600px} .hero__content{padding-bottom:120px;justify-content:flex-end} .hero__title{margin:16px 0 18px} .hero__lead{font-size:1rem} .hero__actions{margin-top:26px} .hero__actions .btn{flex:1 1 100%;justify-content:space-between} .hero__tab{margin-inline-end:16px} .hero__tab-label{display:none} } /* ---------- Page hero (inner pages) ---------- */ .page-hero{position:relative;display:flex;align-items:flex-end;min-height:clamp(420px,62vh,620px);padding-top:var(--header-h);color:#fff;background:var(--ink);overflow:hidden;isolation:isolate} .page-hero--lg{min-height:clamp(480px,78vh,780px)} .page-hero--sm{min-height:clamp(340px,44vh,440px)} .page-hero::after{content:"";position:absolute;inset-inline:0;bottom:0;height:4px;background:var(--steel)} .page-hero__media{position:absolute;inset:-8% 0 0;z-index:-2;will-change:transform} .page-hero__img{width:100%;height:100%;object-fit:cover;animation:bannerIn 1800ms var(--ease-out) both} @keyframes bannerIn{from{transform:scale(1.08)}to{transform:scale(1)}} .page-hero__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(6,19,33,.92) 0%,rgba(6,19,33,.55) 45%,rgba(6,19,33,.25) 100%),linear-gradient(var(--scrim-dir),rgba(10,28,46,.6),rgba(10,28,46,0) 70%)} .page-hero__content{position:relative;padding-bottom:clamp(44px,6vw,88px)} .page-hero__eyebrow{margin-top:22px;font-size:.9375rem;font-weight:600;color:var(--steel-300);overflow:hidden} :lang(en) .page-hero__eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.8125rem} .page-hero__title{color:#fff;font-size:var(--fs-h1);margin-top:14px;max-width:20ch;overflow:hidden;padding-bottom:.06em} .page-hero__title>span,.page-hero__eyebrow>span{display:inline-block} .page-hero__sub{margin-top:14px;max-width:62ch;font-size:var(--fs-lead);line-height:1.85;color:rgba(255,255,255,.82)} :lang(en) .page-hero__sub{line-height:1.6} .crumbs ol{display:flex;flex-wrap:wrap;gap:8px;font-size:.8125rem;line-height:1.6} .crumbs li{display:flex;gap:8px;align-items:center} .crumbs li+li::before{content:"/";opacity:.45} .crumbs a{opacity:.72;transition:opacity var(--t-fast)} .crumbs a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px} .crumbs [aria-current]{font-weight:600} /* ---------- Legacy / 1999 ---------- */ .legacy{background:var(--concrete);overflow:hidden} .legacy__numeral{margin-bottom:clamp(28px,4vw,56px);border-bottom:1px solid var(--concrete-200);padding-bottom:clamp(12px,2vw,24px)} .legacy__year{display:block;font-family:var(--font-num);font-weight:600;font-size:clamp(7rem,1.5rem + 22vw,21rem);line-height:.78;letter-spacing:-.02em;direction:ltr;text-align:start;color:var(--navy);background:var(--fill) center 40%/cover;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} [dir="rtl"] .legacy__year{text-align:right} @supports not ((-webkit-background-clip:text) or (background-clip:text)){.legacy__year{-webkit-text-fill-color:currentColor;background:none}} .legacy__grid{display:grid;gap:48px} .legacy__copy .h2{max-width:18ch;margin-bottom:24px} .legacy__copy .lead{max-width:60ch;margin-bottom:28px} .legacy__facts{border-top:1px solid var(--graphite)} .legacy__facts div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:20px 0;border-bottom:1px solid var(--concrete-200)} .legacy__facts dt{font-size:.9375rem;color:var(--text)} .legacy__facts dd{font-size:clamp(2.2rem,1.6rem + 1.5vw,3rem);line-height:1;color:var(--navy)} @media (min-width:900px){.legacy__grid{grid-template-columns:7fr 4fr;gap:clamp(48px,7vw,120px);align-items:end}} /* ---------- Category mosaic ---------- */ .categories{background:#fff} .mosaic{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,78%);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:var(--steel) transparent} .tile{position:relative;display:block;min-height:420px;overflow:hidden;color:#fff;background:var(--ink);scroll-snap-align:start;isolation:isolate} .tile__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform var(--t-image) var(--ease-out)} .tile__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(6,19,33,.88) 0%,rgba(6,19,33,.35) 45%,rgba(6,19,33,.08) 100%);transition:opacity var(--t-base)} .tile::after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--steel);transform:scaleX(0);transform-origin:left;transition:transform 600ms var(--ease-out)} [dir="rtl"] .tile::after{transform-origin:right} .tile__index{position:absolute;top:20px;inset-inline-start:22px;font-family:var(--font-num);font-weight:600;font-size:1rem;letter-spacing:.1em;display:flex;align-items:center;gap:10px} .tile__index::after{content:"";width:24px;height:1px;background:currentColor;opacity:.6} .tile__body{position:absolute;bottom:22px;inset-inline:22px;padding-inline-end:60px;display:flex;flex-direction:column;gap:4px} .tile__name{font-size:clamp(1.25rem,1rem + .7vw,1.7rem);font-weight:700;line-height:1.3} .tile__alt{font-size:.8125rem;opacity:.7;line-height:1.4} .tile__alt:lang(en){text-transform:uppercase;letter-spacing:.12em;font-size:.6875rem} .tile__arrow{position:absolute;bottom:22px;inset-inline-end:22px;width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.45);transition:background var(--t-base),color var(--t-base),border-color var(--t-base)} .tile__arrow .icon{width:18px;height:18px} .tile:hover .tile__img,.tile:focus-visible .tile__img{transform:scale(1.06)} .tile:hover::after,.tile:focus-visible::after{transform:scaleX(1)} .tile:hover .tile__arrow,.tile:focus-visible .tile__arrow{background:#fff;color:var(--ink);border-color:#fff} .tile--cta{display:flex;flex-direction:column;justify-content:space-between;padding:28px;background:var(--navy);transition:background var(--t-base)} .tile--cta:hover{background:var(--ink)} .tile__cta-label{font-size:.8125rem;font-weight:600;color:var(--steel)} :lang(en) .tile__cta-label{text-transform:uppercase;letter-spacing:.14em} .tile__cta-title{font-size:clamp(1.5rem,1.2rem + .8vw,2rem);font-weight:700;line-height:1.3;max-width:10ch;margin-top:auto;margin-bottom:64px} @media (min-width:900px){ .mosaic{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,clamp(230px,19vw,310px));padding-bottom:0} .tile{min-height:0} .tile--1{grid-column:1/span 2;grid-row:1/span 2} .tile--1 .tile__name{font-size:clamp(1.8rem,1.2rem + 1.4vw,2.6rem)} .tile--2{grid-column:3;grid-row:1} .tile--3{grid-column:4;grid-row:1} .tile--4{grid-column:3;grid-row:2/span 2} .tile--5{grid-column:4;grid-row:2} .tile--6{grid-column:1;grid-row:3} .tile--7{grid-column:2;grid-row:3} .tile--cta{grid-column:4;grid-row:3} .tile:nth-child(n+8):not(.tile--cta){grid-column:auto;grid-row:auto} } /* ---------- Brands band ---------- */ .brands-band{background:var(--ink);color:rgba(255,255,255,.75);padding-block:var(--section);overflow:hidden} .brands-band .h2{color:#fff} .brands-band .eyebrow{color:var(--steel)} .brands-band .lead{color:rgba(255,255,255,.72);max-width:52ch;margin-top:20px} .brands-band__grid{display:grid;gap:56px;align-items:center} .brand-list{margin:40px 0 32px;border-top:1px solid var(--line-dark)} .brand-list li{border-bottom:1px solid var(--line-dark)} .brand-list__item{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name go" "focus go";align-items:center;column-gap:24px;row-gap:6px;padding:26px 0;transition:padding var(--t-base) var(--ease)} .brand-list__name{grid-area:name} .brand-list__name .wordmark{font-size:clamp(2.6rem,1.6rem + 3vw,4.25rem);color:#fff;transition:color var(--t-base)} .brand-list__logo{max-height:56px;width:auto} .brand-list__focus{grid-area:focus;font-size:.875rem;color:var(--steel-300)} .brand-list__go{grid-area:go;display:flex;align-items:center;gap:10px;font-size:.8125rem;font-weight:600;color:#fff;opacity:.7;transition:opacity var(--t-base)} .brand-list__go .icon{width:18px;height:18px} .brand-list__item:hover .wordmark{color:var(--steel)} .brand-list__item:hover .brand-list__go{opacity:1} .brands-band__media{position:relative;aspect-ratio:4/5;overflow:hidden} .brands-band__media img{width:100%;height:100%;object-fit:cover} @media (min-width:900px){.brands-band__grid{grid-template-columns:1fr 1fr;gap:clamp(56px,7vw,120px)}.brands-band__media{aspect-ratio:4/5}} @media (max-width:899px){.brands-band__media{aspect-ratio:16/10}} /* ---------- Why ---------- */ .why__grid{display:grid;gap:48px} .why__intro .h2{max-width:14ch} .why__media{margin-top:40px;aspect-ratio:4/3;overflow:hidden} .why__media img{width:100%;height:100%;object-fit:cover} .why__list{border-top:1px solid var(--graphite)} .why__item{position:relative;display:grid;grid-template-columns:64px 1fr;gap:20px;padding:30px 0;border-bottom:1px solid var(--line)} .why__item::before{content:"";position:absolute;top:-1px;inset-inline-start:0;width:100%;height:1px;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform 600ms var(--ease-out)} [dir="rtl"] .why__item::before{transform-origin:right} .why__item:hover::before{transform:scaleX(1)} .why__num{font-family:var(--font-num);font-weight:600;font-size:1.125rem;letter-spacing:.1em;color:var(--steel-dark);padding-top:4px} .why__title{font-size:clamp(1.2rem,1.05rem + .5vw,1.45rem);margin-bottom:8px} .why__item p{max-width:52ch;color:var(--text)} @media (min-width:900px){.why__grid{grid-template-columns:5fr 7fr;gap:clamp(56px,8vw,128px)}.why__sticky{position:sticky;top:120px}.why__item{grid-template-columns:96px 1fr;padding:36px 0}} /* ---------- Supply band ---------- */ .supply-band{position:relative;overflow:hidden;background:var(--ink);isolation:isolate} .supply-band__media{position:absolute;inset:-8% 0;z-index:-1;will-change:transform} .supply-band__img{width:100%;height:100%;object-fit:cover} .supply-band__media::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--scrim-dir),rgba(10,28,46,.55),rgba(10,28,46,.1) 70%)} .supply-band__inner{padding-block:clamp(96px,10vw,160px)} .supply-band__panel{position:relative;background:#fff;max-width:640px;padding:clamp(28px,4vw,64px);border-top:4px solid var(--steel)} .supply-band__panel .h2{margin-bottom:18px} .steps{display:grid;gap:0;margin:32px 0 36px;counter-reset:s} .steps li{display:flex;gap:16px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line);font-weight:600;color:var(--graphite);font-size:.9375rem} .steps__n{font-family:var(--font-num);font-weight:600;color:var(--steel-dark);letter-spacing:.08em;flex:none} .supply-band__actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px} @media (min-width:600px){.steps{grid-template-columns:1fr 1fr;column-gap:32px}} @media (max-width:599px){.supply-band__inner{padding-block:260px 0}.supply-band__media{inset:0 0 auto;height:320px}.supply-band__panel{margin-inline:calc(var(--gutter) * -1);border-top-width:4px}} /* ---------- Product cards / grids ---------- */ .product-grid{display:grid;gap:32px 20px;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))} @media (min-width:600px){.product-grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:900px){.product-grid{grid-template-columns:repeat(3,1fr)}} @media (min-width:1200px){.product-grid{grid-template-columns:repeat(4,1fr);gap:40px 24px}} @media (max-width:599px){.product-grid--rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:76%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}.product-grid--rail>*{scroll-snap-align:start}} .product-card{position:relative;background:#fff} .product-card__link{display:flex;flex-direction:column;height:100%} .product-card__media{position:relative;aspect-ratio:1;background:var(--concrete);overflow:hidden} .product-card__media::after{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform 600ms var(--ease-out)} [dir="rtl"] .product-card__media::after{transform-origin:right} .product-card__img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-image) var(--ease-out)} .product-card__placeholder{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted)} .product-card__placeholder .icon{width:40px;height:40px} .product-card__brand{position:absolute;top:14px;inset-inline-start:14px;background:#fff;color:var(--ink);font-family:var(--font-num);font-weight:600;font-size:.8125rem;letter-spacing:.1em;padding:4px 10px;line-height:1.4} .product-card__body{padding-top:18px;display:flex;flex-direction:column;flex:1} .product-card__cat{font-size:.75rem;font-weight:600;color:var(--navy);line-height:1.5} :lang(en) .product-card__cat{text-transform:uppercase;letter-spacing:.12em;font-size:.6875rem} .product-card__title{font-size:1.125rem;font-weight:600;line-height:1.5;margin:6px 0 14px} .product-card__cta{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:.875rem;font-weight:600;color:var(--navy)} .product-card__cta .icon{width:16px;height:16px;transition:transform var(--t-base) var(--ease)} .product-card:hover .product-card__img{transform:scale(1.05)} .product-card:hover .product-card__media::after{transform:scaleX(1)} .product-card:hover .product-card__cta .icon--arrow{transform:translateX(calc(var(--dir) * 4px)) scaleX(var(--dir))} /* ---------- Projects ---------- */ .project-grid{display:grid;gap:32px 24px} @media (min-width:600px){.project-grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:900px){.project-grid{grid-template-columns:repeat(3,1fr)}} .project-card__media{aspect-ratio:4/3;overflow:hidden;background:var(--concrete)} .project-card__img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-image) var(--ease-out)} .project-card:hover .project-card__img{transform:scale(1.05)} .project-card__body{padding-top:16px} .project-card__meta{font-size:.8125rem;font-weight:600;color:var(--navy)} .project-card__title{font-size:1.25rem;margin-top:6px} .stage-cards{display:grid;gap:40px 24px} @media (min-width:900px){.stage-cards{grid-template-columns:repeat(3,1fr)}} .stage-card__media{aspect-ratio:4/3;overflow:hidden;margin-bottom:22px} .stage-card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-image) var(--ease-out)} .stage-card:hover .stage-card__media img{transform:scale(1.05)} .stage-card__n{font-family:var(--font-num);font-weight:600;color:var(--steel-dark);letter-spacing:.1em;display:block;margin-bottom:8px} .stage-card .h3{margin-bottom:8px} .stage-card p{color:var(--text)} .stage-note{margin-top:28px;font-size:.8125rem;color:var(--muted)} .project-detail{display:grid;gap:40px} @media (min-width:900px){.project-detail{grid-template-columns:4fr 8fr;gap:80px}} .project-detail__facts div{padding:16px 0;border-bottom:1px solid var(--line)} .project-detail__facts dt{font-size:.8125rem;color:var(--muted)} .project-detail__facts dd{font-weight:600;color:var(--graphite)} .gallery{display:grid;gap:16px;margin-top:64px} @media (min-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}} .gallery__item{overflow:hidden;aspect-ratio:3/2} .gallery__item img{width:100%;height:100%;object-fit:cover} /* ---------- Branches ---------- */ .branches{background:var(--concrete)} .branches--page{background:#fff} .branch-grid{display:grid;gap:20px} @media (min-width:900px){.branch-grid{grid-template-columns:repeat(2,1fr);gap:24px}} .branch{position:relative;background:#fff;padding:clamp(28px,3.5vw,52px);border-top:4px solid var(--navy);display:flex;flex-direction:column} .branches--page .branch{background:var(--concrete)} .branch__photo{margin:calc(clamp(28px,3.5vw,52px) * -1);margin-bottom:32px;aspect-ratio:16/9;overflow:hidden} .branch__photo img{width:100%;height:100%;object-fit:cover} .branch__head{display:flex;gap:clamp(18px,2.5vw,32px);align-items:flex-start} .branch__index{font-family:var(--font-num);font-weight:600;font-size:clamp(3.2rem,2rem + 3vw,5.2rem);line-height:.78;color:var(--steel-dark);direction:ltr} .branch__label{font-size:.8125rem;font-weight:600;color:var(--navy)} :lang(en) .branch__label{text-transform:uppercase;letter-spacing:.14em;font-size:.75rem} .branch__name{font-size:clamp(1.75rem,1.2rem + 1.8vw,2.75rem);line-height:1.2;margin:4px 0 6px} .branch__city{color:var(--muted);font-size:.9375rem} .branch__rows{margin:32px 0 28px} .branch__rows>div{display:grid;gap:4px;padding:14px 0;border-top:1px solid var(--line)} .branches--page .branch__rows>div{border-color:var(--concrete-200)} .branch__rows dt{display:flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--muted)} .branch__rows dt .icon{width:16px;height:16px;color:var(--navy)} .branch__rows dd{color:var(--graphite)} .branch__note dd{color:var(--text)} @media (min-width:600px){.branch__rows>div:not(.branch__note){grid-template-columns:150px 1fr;gap:16px}} .branch__map{aspect-ratio:16/9;margin-bottom:24px;background:var(--concrete-200)} .branch__map iframe{width:100%;height:100%;border:0} .branch__actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:12px} /* ---------- Final CTA ---------- */ .cta-final{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding-block:clamp(96px,10vw,168px);isolation:isolate} .cta-final__media{position:absolute;inset:-10% 0;z-index:-1;opacity:.4;will-change:transform} .cta-final__img{width:100%;height:100%;object-fit:cover} .cta-final::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--scrim-dir),rgba(10,28,46,.94) 20%,rgba(10,28,46,.55))} .cta-final__inner{display:grid;gap:40px;align-items:end} .cta-final__title{color:#fff;font-size:clamp(2.2rem,1.4rem + 3vw,4.2rem);line-height:1.2;overflow:hidden;padding-bottom:.08em} .cta-final__title>span{display:inline-block} :lang(en) .cta-final__title{line-height:1.06;letter-spacing:-.02em} .cta-final__text{margin-top:20px;max-width:50ch;color:rgba(255,255,255,.76);font-size:var(--fs-lead);line-height:1.85} .cta-final__actions{display:grid;gap:12px} .cta-final__actions .btn{justify-content:space-between} .cta-final__phone{display:inline-flex;align-items:center;gap:10px;margin-top:8px;color:rgba(255,255,255,.8);font-weight:600} .cta-final__phone .icon{color:var(--steel)} @media (min-width:900px){.cta-final__inner{grid-template-columns:7fr 4fr;gap:clamp(48px,8vw,140px)}} /* ---------- About ---------- */ .story__grid{display:grid;gap:40px;align-items:center} .story__year .numeral{font-size:clamp(6rem,2.5rem + 12vw,15rem);color:transparent;-webkit-text-stroke:1.5px var(--navy);text-align:start} [dir="rtl"] .story__year .numeral{text-align:right} .story__year-label{display:block;margin-top:20px;padding-top:14px;border-top:1px solid var(--line);font-size:.875rem;color:var(--muted)} .story__copy .h2{margin-bottom:24px} .story__copy .lead{margin-bottom:18px;color:var(--graphite)} .story__copy p{max-width:62ch} @media (min-width:900px){.story__grid{grid-template-columns:5fr 7fr;gap:clamp(48px,8vw,128px)}} .index-list{border-top:1px solid var(--graphite)} .index-list li{border-bottom:1px solid var(--concrete-200)} .index-list__row{display:grid;grid-template-columns:48px 1fr 24px;align-items:center;gap:16px;padding:22px 0;transition:padding var(--t-base) var(--ease),background var(--t-base)} .index-list__n{font-family:var(--font-num);font-weight:600;color:var(--steel-dark);letter-spacing:.1em} .index-list__name{font-size:1.25rem;font-weight:700;color:var(--graphite)} .index-list__desc,.index-list__thumb{display:none} .index-list__arrow{width:20px;height:20px;color:var(--navy)} .index-list__row:hover{background:#fff;padding-inline:16px} @media (min-width:900px){.index-list__row{grid-template-columns:64px 1.1fr 2fr 128px 28px;gap:28px}.index-list__desc{display:block;color:var(--muted);font-size:.9375rem;line-height:1.7}.index-list__thumb{display:block;aspect-ratio:16/10;overflow:hidden}.index-list__thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter var(--t-base)}.index-list__row:hover .index-list__thumb img{filter:none}} .approach__grid{display:grid;gap:40px} @media (min-width:900px){.approach__grid{grid-template-columns:repeat(3,1fr);gap:48px}} .approach__item{border-top:2px solid var(--navy);padding-top:28px} .approach__n{margin-bottom:28px} .approach__item .h3{margin-bottom:10px} .audience__grid{display:grid;gap:48px;align-items:center} .audience__media{aspect-ratio:4/5;overflow:hidden} .audience__media img{width:100%;height:100%;object-fit:cover} .audience__list{display:grid;margin-top:28px;border-top:1px solid var(--graphite)} .audience__list li{display:flex;align-items:center;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);font-size:1.1875rem;font-weight:600;color:var(--graphite)} .audience__list li::before{content:"";width:8px;height:8px;background:var(--steel);flex:none} @media (min-width:600px){.audience__list{grid-template-columns:1fr 1fr;column-gap:32px}} @media (min-width:900px){.audience__grid{grid-template-columns:5fr 7fr;gap:clamp(48px,8vw,120px)}.audience__media{max-height:640px}} .commitment{background:var(--navy);color:#fff;padding-block:clamp(96px,10vw,160px);text-align:center;position:relative;overflow:hidden} .commitment::before{content:"";position:absolute;inset-block:0;inset-inline-start:50%;width:1px;background:rgba(255,255,255,.1)} .commitment__inner{position:relative;display:flex;flex-direction:column;align-items:center} .commitment .eyebrow{justify-content:center} .commitment__quote{color:#fff;font-size:clamp(2.3rem,1.3rem + 4.2vw,5.2rem);line-height:1.2;max-width:16ch;overflow:hidden;padding-bottom:.08em} .commitment__quote>span{display:inline-block} .commitment__text{margin-top:28px;max-width:56ch;color:rgba(255,255,255,.8);font-size:var(--fs-lead);line-height:1.85} /* ---------- Brands page ---------- */ .brand-row{display:grid;gap:40px;align-items:center;margin-bottom:clamp(72px,9vw,140px)} .brand-row__visual{position:relative;aspect-ratio:5/4;background:var(--ink);overflow:hidden;display:grid;place-items:center;isolation:isolate} .brand-row__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35;z-index:-1} .brand-row__mark{padding:40px;text-align:center} .brand-row__mark img{max-width:min(70%,360px);margin-inline:auto;height:auto} .wordmark--xl{font-size:clamp(3.5rem,2rem + 6vw,7.5rem);color:#fff} .brand-row__index{position:absolute;top:24px;inset-inline-start:24px;font-family:var(--font-num);font-weight:600;color:var(--steel);letter-spacing:.1em} .brand-row__visual::after{content:"";position:absolute;inset-inline:0;bottom:0;height:4px;background:var(--steel)} .brand-row__copy .h2{margin-bottom:20px} .tags{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 8px} .tags li{padding:7px 14px;border:1px solid var(--line);font-size:.875rem;color:var(--graphite)} .brand-row__actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:32px} @media (min-width:900px){.brand-row{grid-template-columns:1fr 1fr;gap:clamp(48px,7vw,112px)}.brand-row--flip .brand-row__visual{order:2}} .brand-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:clamp(28px,4vw,48px);border:1px solid var(--line);border-top:4px solid var(--navy)} .brand-more p{color:var(--muted);max-width:60ch;margin-top:6px} /* ---------- Supply page ---------- */ .split{display:grid;gap:48px;align-items:center} .split__copy .h2{margin-bottom:20px} .split__copy .lead{margin-bottom:20px} .split__copy .prose{margin-bottom:28px} .split__media{aspect-ratio:4/5;overflow:hidden;max-height:720px} .split__media img{width:100%;height:100%;object-fit:cover} @media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:clamp(48px,8vw,128px)}} .mini-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} @media (min-width:900px){.mini-tiles{grid-template-columns:repeat(4,1fr)}} .mini-tile{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;color:#fff;isolation:isolate;background:var(--ink)} .mini-tile__media{position:absolute;inset:0;z-index:-2} .mini-tile__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-image) var(--ease-out)} .mini-tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(6,19,33,.85),rgba(6,19,33,.05) 70%)} .mini-tile__name{position:absolute;bottom:14px;inset-inline:16px 44px;font-weight:700;font-size:clamp(.95rem,.9rem + .3vw,1.125rem);line-height:1.35} .mini-tile__arrow{position:absolute;bottom:16px;inset-inline-end:16px;width:18px;height:18px} .mini-tile:hover img{transform:scale(1.06)} .process{display:grid;gap:36px} @media (min-width:600px){.process{grid-template-columns:repeat(2,1fr)}} @media (min-width:1100px){.process{grid-template-columns:repeat(4,1fr);gap:40px}} .process__step{position:relative;border-top:1px solid var(--line);padding-top:28px} .process__step::before{content:"";position:absolute;top:-1px;inset-inline-start:0;width:48px;height:2px;background:var(--navy)} .process__n{margin-bottom:20px} .process__step .h3{margin-bottom:8px} .supply-audience{background:var(--navy);color:#fff;padding-block:44px} .supply-audience__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px} .supply-audience .h3{color:#fff} .supply-audience ul{display:flex;flex-wrap:wrap;gap:16px 40px} .supply-audience li{display:flex;align-items:center;gap:12px;font-weight:600;font-size:1.0625rem} .supply-audience li .icon{color:var(--steel);width:24px;height:24px} /* ---------- Inquiry / forms ---------- */ .inquiry{display:grid;gap:48px;align-items:start} .inquiry__aside .h2{margin-bottom:18px;max-width:18ch} .inquiry__aside>p{color:var(--text);max-width:52ch} .inquiry__extra{margin-top:28px} @media (min-width:1024px){.inquiry{grid-template-columns:5fr 7fr;gap:clamp(48px,6vw,96px)}.inquiry__aside{position:sticky;top:110px}} .channels{display:grid;gap:10px;margin-top:32px} .channel{display:grid;grid-template-columns:28px 1fr 20px;align-items:center;gap:16px;padding:18px 20px;border:1px solid var(--line);color:var(--graphite);transition:border-color var(--t-base),background var(--t-base),color var(--t-base)} .channel .icon{width:24px;height:24px;color:var(--navy)} .channel strong{display:block;font-weight:700;line-height:1.4} .channel small{display:block;font-size:.875rem;color:var(--muted);line-height:1.5} [dir="rtl"] .channel small[dir="ltr"]{text-align:right} .channel .channel__arrow{width:18px;height:18px} .channel:hover{border-color:var(--navy);background:var(--concrete)} .channel--primary{background:var(--ink);border-color:var(--ink);color:#fff} .channel--primary .icon{color:#fff} .channel--primary small{color:rgba(255,255,255,.7)} .channel--primary:hover{background:var(--navy);border-color:var(--navy)} .inquiry__form{background:var(--concrete);padding:clamp(24px,4vw,52px);border-top:4px solid var(--navy)} .form{position:relative;scroll-margin-top:110px} .form__types{border:0;padding:0;margin:0 0 28px;min-width:0} .form__label{font-size:.875rem;font-weight:600;color:var(--graphite);margin-bottom:12px;padding:0} .segmented{display:flex;flex-wrap:wrap;gap:8px} .segmented__item{position:relative} .segmented__item input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer} .segmented__item span{display:block;padding:10px 16px;border:1px solid #CBD2D9;background:#fff;font-size:.875rem;font-weight:500;cursor:pointer;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)} .segmented__item input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff} .segmented__item input:focus-visible+span{outline:2px solid var(--navy-600);outline-offset:2px} .form__grid{display:grid;gap:20px} @media (min-width:600px){.form__grid{grid-template-columns:1fr 1fr}} .field--full{grid-column:1/-1} .field label{display:block;font-size:.875rem;font-weight:600;color:var(--graphite);margin-bottom:8px;line-height:1.5} .req{color:var(--navy)} .field input,.field select,.field textarea{width:100%;min-height:54px;padding:0 16px;border:1px solid #CBD2D9;border-radius:0;background:#fff;color:var(--graphite);font-size:1rem;transition:border-color var(--t-fast),box-shadow var(--t-fast);-webkit-appearance:none;appearance:none} .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23113B65' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:18px;background-position:right 14px center;padding-inline-end:44px} [dir="rtl"] .field select{background-position:left 14px center} .field textarea{padding:14px 16px;min-height:150px;resize:vertical;line-height:1.7} .field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(29,79,130,.18)} .field input[readonly]{background:var(--steel-100)} [dir="rtl"] .field input[dir="ltr"]{text-align:right} .field input::placeholder,.field textarea::placeholder{color:#8C949C} .field.is-invalid input,.field.is-invalid textarea{border-color:#B3261E} .field__error{display:block;margin-top:6px;font-size:.8125rem;color:#B3261E} .form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:28px} .form__privacy{font-size:.8125rem;color:var(--muted)} .form__notice{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;margin-bottom:24px;outline:0} .form__notice .icon{width:22px;height:22px;flex:none;margin-top:3px} .form__notice strong{display:block;color:var(--graphite)} .form__notice p{font-size:.9375rem} .form__notice--ok{background:#E6F1EA;border-inline-start:3px solid #2F7D4F} .form__notice--ok .icon{color:#2F7D4F} .form__notice--error{background:#FBEAEA;border-inline-start:3px solid #B3261E} .form__notice--error .icon{color:#B3261E} .form__trap{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden} /* ---------- FAQ ---------- */ .faq__grid{display:grid;gap:40px} @media (min-width:900px){.faq__grid{grid-template-columns:4fr 8fr;gap:clamp(48px,7vw,112px)}} .accordion{border-top:1px solid var(--graphite)} .accordion__item{border-bottom:1px solid var(--concrete-200)} .accordion__item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;cursor:pointer;font-size:clamp(1.05rem,1rem + .25vw,1.1875rem);font-weight:600;color:var(--graphite)} .accordion__item summary::-webkit-details-marker{display:none} .accordion__icon{width:22px;height:22px;color:var(--navy);transition:transform var(--t-base) var(--ease)} .accordion__item[open] .accordion__icon{transform:rotate(45deg)} .accordion__body{padding-bottom:26px;max-width:70ch} /* ---------- Catalog ---------- */ .catalog{padding-top:0} .catalog-bar{position:relative;z-index:2;margin-top:-44px;display:grid;gap:10px;background:#fff;padding:14px;box-shadow:var(--shadow-float)} .catalog-bar__search{position:relative} .catalog-bar__search .icon{position:absolute;top:50%;inset-inline-start:18px;transform:translateY(-50%);color:var(--navy);pointer-events:none} .catalog-bar__search input{width:100%;min-height:56px;padding-inline:52px 16px;border:1px solid var(--line);background:var(--concrete);font-size:1rem;border-radius:0;-webkit-appearance:none;appearance:none} .catalog-bar__search input:focus,.catalog-bar__select select:focus{outline:0;border-color:var(--navy);background:#fff;box-shadow:0 0 0 3px rgba(29,79,130,.15)} .catalog-bar__select{position:relative} .catalog-bar__select label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} .catalog-bar__select select{width:100%;min-height:56px;padding-inline:16px 44px;border:1px solid var(--line);background:#fff;border-radius:0;-webkit-appearance:none;appearance:none;font-size:.9375rem;cursor:pointer} .catalog-bar__select .icon{position:absolute;top:50%;inset-inline-end:14px;transform:translateY(-50%);pointer-events:none;color:var(--navy);width:18px;height:18px} .catalog-bar__submit{min-height:56px} @media (min-width:900px){.catalog-bar{grid-template-columns:1fr 240px auto;padding:16px}} .chips{display:flex;gap:8px;margin-top:28px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)} .chips::-webkit-scrollbar{display:none} @media (min-width:900px){.chips{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0}} .chip{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1px solid var(--line);font-size:.875rem;font-weight:500;white-space:nowrap;color:var(--text);transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast)} .chip:hover{border-color:var(--navy);color:var(--navy)} .chip.is-active{background:var(--navy);border-color:var(--navy);color:#fff} .chip__count{font-family:var(--font-num);font-weight:600;font-size:.8125rem;opacity:.6} .catalog__meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin:28px 0 32px;padding-bottom:16px;border-bottom:1px solid var(--line)} .catalog__meta p{font-size:.9375rem;color:var(--muted)} .catalog__filter{display:inline-block;margin-inline-start:10px;padding:2px 10px;background:var(--steel-100);color:var(--navy);font-size:.8125rem;font-weight:600} .link-clear{display:inline-flex;align-items:center;gap:6px;font-size:.875rem;font-weight:600;color:var(--navy)} .link-clear .icon{width:16px;height:16px} .empty{text-align:center;padding:72px 24px;border:1px dashed #C7CDD4;display:grid;justify-items:center;gap:14px} .empty>.icon{width:40px;height:40px;color:var(--steel)} .empty p{max-width:54ch;color:var(--muted);margin-bottom:8px} .navigation.pagination{margin-top:64px} .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px} .page-numbers{min-width:46px;height:46px;display:inline-grid;place-items:center;padding:0 10px;border:1px solid var(--line);font-family:var(--font-num);font-weight:600;font-size:1rem;transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast)} a.page-numbers:hover{border-color:var(--navy);color:var(--navy)} .page-numbers.current{background:var(--navy);border-color:var(--navy);color:#fff} .page-numbers .icon{width:18px;height:18px} .page-numbers .icon.is-prev{transform:scaleX(calc(var(--dir) * -1))} .ask-strip{background:var(--concrete);padding-block:clamp(44px,5vw,64px)} .ask-strip__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px} .ask-strip p{color:var(--muted);max-width:62ch;margin-top:6px} .ask-strip__actions{display:flex;flex-wrap:wrap;gap:12px} /* ---------- Product detail ---------- */ .product-top{background:var(--concrete);padding-block:22px;color:var(--text)} .product-top .crumbs a{opacity:1;color:var(--muted)} .product-top .crumbs [aria-current]{color:var(--graphite)} .product{padding-block:clamp(40px,5vw,72px) var(--section)} .product__grid{display:grid;gap:40px;align-items:start} @media (min-width:900px){.product__grid{grid-template-columns:7fr 5fr;gap:clamp(40px,6vw,96px)}.product__info{position:sticky;top:104px}} .product__stage{position:relative;aspect-ratio:1;background:var(--concrete);overflow:hidden} .product__figure{position:absolute;inset:0;opacity:0;transition:opacity 500ms var(--ease)} .product__figure.is-active{opacity:1} .product__figure img{width:100%;height:100%;object-fit:cover} .product__thumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto} .product__thumb{width:76px;height:76px;flex:none;border:2px solid transparent;opacity:.7;transition:opacity var(--t-fast),border-color var(--t-fast)} .product__thumb img{width:100%;height:100%;object-fit:cover} .product__thumb.is-active,.product__thumb:hover{opacity:1;border-color:var(--navy)} .product__cat{display:inline-flex;align-items:center;gap:12px;font-size:.8125rem;font-weight:600;color:var(--navy)} .product__cat::before{content:"";width:28px;height:2px;background:var(--steel)} :lang(en) .product__cat{text-transform:uppercase;letter-spacing:.14em;font-size:.75rem} .product__title{font-size:clamp(2rem,1.4rem + 2vw,3rem);margin:14px 0 18px} :lang(en) .product__title{letter-spacing:-.02em} .product__brand{display:flex;align-items:baseline;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line)} .product__brand span{font-size:.8125rem;color:var(--muted)} .product__brand a{font-family:var(--font-num);font-weight:600;font-size:1.375rem;letter-spacing:.08em;color:var(--navy)} .product__brand a:hover{text-decoration:underline;text-underline-offset:4px} .product__lead{margin:22px 0 28px;font-size:var(--fs-lead);line-height:1.9;color:var(--graphite)} .product__actions{display:grid;gap:10px;margin-top:24px} .product__actions .btn{justify-content:space-between;width:100%} .product__note{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:.875rem;color:var(--muted);line-height:1.7} .product__note .icon{width:18px;height:18px;flex:none;margin-top:3px;color:var(--navy)} .product__block{margin-top:40px} .product__h{font-size:1rem;font-weight:700;color:var(--graphite);padding-bottom:12px;border-bottom:1px solid var(--graphite);margin-bottom:4px} .checklist li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)} .checklist .icon{width:20px;height:20px;color:var(--navy);flex:none;margin-top:4px} .specs{width:100%;border-collapse:collapse} .specs th,.specs td{padding:13px 0;border-bottom:1px solid var(--line);text-align:start;vertical-align:top;font-size:.9375rem} .specs th{font-weight:500;color:var(--muted);width:45%;padding-inline-end:16px} .specs td{color:var(--graphite);font-weight:600} .product__warranty{display:flex;gap:12px;align-items:flex-start;margin-top:32px;padding:16px 18px;background:var(--steel-100)} .product__warranty .icon{color:var(--navy);flex:none;margin-top:3px} .product__desc{margin-top:clamp(56px,6vw,96px);max-width:var(--container)} .product__desc .prose{max-width:72ch;margin-top:20px} /* ---------- Prose ---------- */ .prose>*+*{margin-top:1.1em} .prose h2{font-size:1.625rem;margin-top:1.8em} .prose h3{font-size:1.25rem;margin-top:1.6em} .prose ul{list-style:square;padding-inline-start:1.3em} .prose ol{list-style:decimal;padding-inline-start:1.3em} .prose li+li{margin-top:.4em} .prose a{color:var(--navy);text-decoration:underline;text-underline-offset:3px} .prose img{margin-block:1.6em} .prose blockquote{border-inline-start:3px solid var(--steel);padding-inline-start:20px;color:var(--graphite);font-size:1.125rem} /* ---------- Footer ---------- */ .site-footer{background:var(--ink-900);color:rgba(255,255,255,.7);padding-top:clamp(72px,8vw,112px);font-size:.9375rem;border-top:1px solid rgba(255,255,255,.08)} .site-footer__top{display:grid;gap:48px} .site-footer .brand{color:#fff} .site-footer .brand__mark{width:64px} .site-footer .brand__img--dark{display:none} .site-footer .brand__img--light{display:block} .site-footer__tagline{margin-top:28px;font-size:1.25rem;font-weight:600;color:#fff;line-height:1.5} .site-footer__since{margin-top:6px;font-size:.875rem} .site-footer__title{font-size:.8125rem;font-weight:600;color:var(--steel);margin-bottom:18px;line-height:1.5} :lang(en) .site-footer__title{text-transform:uppercase;letter-spacing:.14em;font-size:.75rem} .site-footer__list li{margin-bottom:10px;line-height:1.6} .site-footer__list a{transition:color var(--t-fast)} .site-footer__list a:hover{color:#fff} .site-footer__list--contact li{display:flex;gap:12px;align-items:flex-start} .site-footer__list--contact .icon{width:18px;height:18px;color:var(--steel);flex:none;margin-top:4px} .site-footer__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:clamp(56px,6vw,88px);padding-block:26px;border-top:1px solid rgba(255,255,255,.1)} .site-footer__copy{font-size:.8125rem} .site-footer__meta{display:flex;align-items:center;gap:20px;color:#fff} .socials{display:flex;gap:8px} .socials a{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);color:#fff;transition:background var(--t-fast),color var(--t-fast)} .socials a:hover{background:#fff;color:var(--ink)} .socials .icon{width:18px;height:18px} .to-top{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.25);color:#fff;transition:background var(--t-fast),color var(--t-fast)} .to-top:hover{background:#fff;color:var(--ink)} @media (min-width:600px){.site-footer__top{grid-template-columns:1fr 1fr}.site-footer__brand{grid-column:1/-1}} @media (min-width:1024px){.site-footer__top{grid-template-columns:4fr 2fr 2.4fr 3fr;gap:clamp(32px,4vw,72px)}.site-footer__brand{grid-column:auto}} /* ---------- Contact bar (mobile) + WhatsApp float ---------- */ .contact-bar{position:fixed;inset-inline:0;bottom:0;z-index:90;display:grid;grid-template-columns:1fr 1fr;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);transform:translateY(0);transition:transform 450ms var(--ease-out)} .js .contact-bar{transform:translateY(110%)} .js .contact-bar.is-visible{transform:none} .contact-bar__item{display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;font-size:.9375rem;font-weight:600;color:var(--graphite)} .contact-bar__item .icon{width:20px;height:20px;color:var(--navy)} .contact-bar__item--primary{background:var(--navy);color:#fff} .contact-bar__item--primary .icon{color:#fff} @media (max-width:899px){.site-footer{padding-bottom:calc(58px + env(safe-area-inset-bottom))}} @media (min-width:900px){.contact-bar{display:none}} .wa-float{display:none} @media (min-width:900px){ .wa-float{position:fixed;bottom:28px;inset-inline-end:28px;z-index:90;width:56px;height:56px;display:grid;place-items:center;background:var(--navy);color:#fff;box-shadow:var(--shadow-float);transition:background var(--t-base),transform 450ms var(--ease-out),opacity var(--t-base)} .wa-float .icon{width:26px;height:26px} .wa-float:hover{background:var(--ink)} .js .wa-float{opacity:0;transform:translateY(16px);pointer-events:none} .js .wa-float.is-visible{opacity:1;transform:none;pointer-events:auto} } /* ---------- Misc pages ---------- */ .notfound{padding-block:clamp(72px,10vw,140px)} .notfound__inner{display:grid;gap:40px;align-items:center} .notfound .numeral{font-size:clamp(7rem,4rem + 12vw,16rem);color:transparent;-webkit-text-stroke:1.5px var(--navy)} .notfound .lead{margin:16px 0 28px} .notfound__links{display:grid;gap:0 32px;border-top:1px solid var(--graphite)} .notfound__links a{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-weight:600} .notfound__links a:hover{color:var(--navy)} .notfound__links .icon{width:18px;height:18px;color:var(--navy)} @media (min-width:600px){.notfound__links{grid-template-columns:1fr 1fr}} @media (min-width:900px){.notfound__inner{grid-template-columns:auto 1fr;gap:96px}} .search-list{margin-top:32px;border-top:1px solid var(--graphite)} .search-list a{display:grid;gap:4px;padding:20px 0;border-bottom:1px solid var(--line)} .search-list strong{color:var(--graphite);font-size:1.125rem} .search-list span{color:var(--muted);font-size:.9375rem} .entry-title{margin-bottom:12px} .entry-meta{color:var(--muted);margin-bottom:32px} .entry-media{margin-bottom:40px} /* ========================================================================== Motion โ€” reveal states apply only once main.js confirms it is running (html.motion-ready); a head failsafe removes .js if it never does. ========================================================================== */ .motion-ready [data-reveal="line"]>span,.motion-ready .hero__title .line>span{transform:translateY(108%);transition:transform var(--t-slow) var(--ease-out)} .motion-ready [data-reveal="line"].is-in>span,.motion-ready .hero__title .line.is-in>span{transform:none} .motion-ready [data-reveal="fade"]{opacity:0;transform:translateY(18px);transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)} .motion-ready [data-reveal="fade"].is-in{opacity:1;transform:none} .motion-ready [data-reveal="rise"]{opacity:0;transform:translateY(40px);transition:opacity 1000ms var(--ease-out),transform 1000ms var(--ease-out)} .motion-ready [data-reveal="rise"].is-in{opacity:1;transform:none} .motion-ready [data-reveal="mask"]{clip-path:inset(0 100% 0 0);transition:clip-path 1300ms var(--ease-out)} [dir="rtl"].motion-ready [data-reveal="mask"],.motion-ready [dir="rtl"] [data-reveal="mask"]{clip-path:inset(0 0 0 100%)} .motion-ready [data-reveal="mask"] img{transform:scale(1.15);transition:transform 1800ms var(--ease-out)} .motion-ready [data-reveal="mask"].is-in{clip-path:inset(0 0 0 0)} .motion-ready [data-reveal="mask"].is-in img{transform:scale(1)} .motion-ready [data-reveal="panel"]{clip-path:inset(100% 0 0 0);transition:clip-path 1100ms var(--ease-out)} .motion-ready [data-reveal="panel"].is-in{clip-path:inset(0 0 0 0)} .motion-ready [data-stagger] [data-stagger-item]{opacity:0;transform:translateY(28px);transition:opacity 800ms var(--ease-out),transform 800ms var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)} .motion-ready [data-stagger].is-in [data-stagger-item]{opacity:1;transform:none} .motion-ready .hero__eyebrow>span{transform:translateY(110%);transition:transform var(--t-slow) var(--ease-out)} .motion-ready .hero__eyebrow.is-in>span{transform:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} .hero__img,.page-hero__img{transform:none!important;animation:none!important} .motion-ready [data-reveal],.motion-ready [data-reveal]>span,.motion-ready [data-stagger-item],.motion-ready .hero__title .line>span,.motion-ready .hero__eyebrow>span{opacity:1!important;transform:none!important;clip-path:none!important} } @media print{.site-header,.mobile-menu,.contact-bar,.wa-float,.hero__foot,.cta-final{display:none!important}.header-solid .site-main{padding-top:0}} /* ---------- Refinements ---------- */ .order-steps{margin-top:32px;border-top:1px solid var(--graphite)} .order-steps li{display:flex;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);font-size:.9375rem;color:var(--graphite)} .order-steps__n{font-family:var(--font-num);font-weight:600;color:var(--steel-dark);letter-spacing:.08em;flex:none} .mini-tile--cta{background:var(--navy);transition:background var(--t-base)} .mini-tile--cta::after{display:none} .mini-tile--cta:hover{background:var(--ink)} .brand-row__photo{filter:grayscale(.35)} @media (max-width:599px){ .product-grid:not(.product-grid--rail){grid-template-columns:repeat(2,1fr);gap:28px 12px} .product-grid:not(.product-grid--rail) .product-card__title{font-size:.9375rem;margin:4px 0 10px} .product-grid:not(.product-grid--rail) .product-card__cta{font-size:.8125rem} .product-grid:not(.product-grid--rail) .product-card__brand{top:8px;inset-inline-start:8px;font-size:.6875rem;padding:2px 7px} } [dir="rtl"] .lang-switch--menu{justify-content:flex-end} /* ========================================================================== V3.1 ART DIRECTION LAYER Brand-derived motifs: the L-corner of the logo (frame brackets) and its 2x2 window (pattern). Surfaces: concrete texture, ink + architectural grid, photography. No decorative gradients. ========================================================================== */ :root{ --tex:url(../img/tex-concrete.webp); --window:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='%23113B65' fill-opacity='.04'%3E%3Crect x='40' y='40' width='7' height='7'/%3E%3Crect x='49' y='40' width='7' height='7'/%3E%3Crect x='40' y='49' width='7' height='7'/%3E%3Crect x='49' y='49' width='7' height='7'/%3E%3C/g%3E%3C/svg%3E"); --window-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='%23ffffff' fill-opacity='.022'%3E%3Crect x='40' y='40' width='7' height='7'/%3E%3Crect x='49' y='40' width='7' height='7'/%3E%3Crect x='40' y='49' width='7' height='7'/%3E%3Crect x='49' y='49' width='7' height='7'/%3E%3C/g%3E%3C/svg%3E"); --frame-gap:clamp(10px,1.4vw,18px); --bleed:calc((100vw - min(100vw - var(--gutter) * 2,var(--container))) / 2); --col6:calc(min(100vw - var(--gutter) * 2,var(--container)) / 6); } /* ---------- Surfaces ---------- */ .surface-concrete{position:relative;isolation:isolate;background-color:var(--concrete)} .surface-concrete::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--tex);background-size:420px;opacity:.16;mix-blend-mode:multiply;pointer-events:none} .surface-ink{position:relative;isolation:isolate;background-color:var(--ink);background-image:var(--window-light);background-size:96px;color:rgba(255,255,255,.76)} .surface-ink::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--tex);background-size:420px;mix-blend-mode:soft-light;opacity:.55;pointer-events:none} .surface-ink h1,.surface-ink h2,.surface-ink h3{color:#fff} .surface-ink .eyebrow{color:var(--steel)} .surface-ink .lead{color:rgba(255,255,255,.74)} .grid-lines{position:relative;isolation:isolate} .grid-lines::after,.page-hero__lines,.hero__lines{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(to right,rgba(17,59,101,.07) 1px,transparent 1px);background-size:var(--col6) 100%;background-position:var(--bleed) 0} .surface-ink.grid-lines::after,.page-hero__lines,.hero__lines{background-image:linear-gradient(to right,rgba(255,255,255,.06) 1px,transparent 1px)} .page-hero__lines{z-index:0} .hero__lines{z-index:0} /* Oversized ghost typography */ .ghost{position:absolute;z-index:-1;pointer-events:none;font-family:var(--font-num);font-weight:600;line-height:.8;letter-spacing:-.02em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(17,59,101,.13);direction:ltr;user-select:none} .surface-ink .ghost,.ghost--light{-webkit-text-stroke:1px rgba(255,255,255,.1)} .ghost--xl{font-size:clamp(9rem,4rem + 22vw,26rem)} .ghost--lg{font-size:clamp(6rem,3rem + 12vw,15rem)} /* ---------- Frames (logo-derived L brackets) ---------- */ .frame{position:relative} .frame>img{width:100%;height:100%;object-fit:cover;display:block} .frame--brackets::before,.frame--brackets::after{content:"";position:absolute;width:clamp(36px,4vw,64px);height:clamp(36px,4vw,64px);pointer-events:none;z-index:2;border:0 solid var(--steel)} .frame--brackets::before{top:calc(var(--frame-gap) * -1);inset-inline-start:calc(var(--frame-gap) * -1);border-top-width:2px;border-inline-start-width:2px} .frame--brackets::after{bottom:calc(var(--frame-gap) * -1);inset-inline-end:calc(var(--frame-gap) * -1);border-bottom-width:2px;border-inline-end-width:2px} /* Caption plate floating over imagery */ .plate{position:absolute;z-index:3;display:flex;align-items:center;gap:14px;background:var(--ink);color:#fff;padding:14px 18px;font-size:.8125rem;font-weight:600;line-height:1.4;max-width:min(80%,320px);box-shadow:var(--shadow-float)} .plate b{font-family:var(--font-num);font-weight:600;font-size:1.25rem;color:var(--steel);letter-spacing:.06em;direction:ltr} .plate--light{background:#fff;color:var(--graphite)} .plate--light b{color:var(--navy)} /* Layered image stack: main + inset */ .stack{position:relative;padding-bottom:clamp(40px,6vw,80px);padding-inline-end:clamp(28px,5vw,72px)} .stack__main{aspect-ratio:4/5;margin:0} .stack__main img{width:100%;height:100%;object-fit:cover} .stack__inset{position:absolute;bottom:0;inset-inline-end:0;width:44%;aspect-ratio:1;border:clamp(6px,.8vw,10px) solid #fff;background:#fff;overflow:hidden;z-index:3;box-shadow:var(--shadow-float);margin:0} .surface-ink .stack__inset{border-color:var(--ink);background:var(--ink)} .surface-concrete .stack__inset{border-color:var(--concrete)} .stack__inset img{width:100%;height:100%;object-fit:cover} .stack .plate{top:clamp(20px,3vw,40px);inset-inline-start:calc(clamp(12px,2vw,28px) * -1)} .stack--wide .stack__main{aspect-ratio:5/4} @media (max-width:599px){.stack{padding-inline-end:24px;padding-bottom:48px}.stack__inset{width:46%}.stack .plate{inset-inline-start:0}} /* ---------- Slider (custom, scroll-snap based) ---------- */ .slider{position:relative} .slider__track{display:grid;grid-auto-flow:column;grid-auto-columns:var(--slide-w,78%);gap:var(--slide-gap,20px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;outline:0;padding-bottom:4px} .slider__track::-webkit-scrollbar{display:none} .slider__track.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none} .slider__track.is-dragging a,.slider__track.is-dragging img{pointer-events:none} .slider__track:focus-visible{outline:2px solid var(--navy-600);outline-offset:6px} .slider__track>*{scroll-snap-align:start;min-width:0} .slider__nav{display:flex;align-items:center;gap:20px;margin-top:28px} .slider__count{font-family:var(--font-num);font-weight:600;font-size:1rem;letter-spacing:.08em;color:var(--muted);direction:ltr;white-space:nowrap} .slider__count b{color:var(--graphite);font-weight:600;font-size:1.375rem} .slider__progress{position:relative;flex:1;height:2px;background:var(--line);overflow:hidden} .slider__progress i{position:absolute;inset-block:0;inset-inline-start:0;width:100%;background:var(--navy);transform-origin:left;transform:scaleX(var(--p,.2));transition:transform 500ms var(--ease-out)} [dir="rtl"] .slider__progress i{transform-origin:right} .slider__btns{display:flex;gap:8px} .slider__btn{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--line);color:var(--navy);background:#fff;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),opacity var(--t-fast)} .slider__btn:hover{background:var(--navy);border-color:var(--navy);color:#fff} .slider__btn[disabled]{opacity:.35;pointer-events:none} .slider__btn .icon{width:18px;height:18px} .slider__btn--prev .icon{transform:scaleX(calc(var(--dir) * -1))} .surface-ink .slider__count{color:rgba(255,255,255,.55)} .surface-ink .slider__count b{color:#fff} .surface-ink .slider__progress{background:rgba(255,255,255,.18)} .surface-ink .slider__progress i{background:var(--steel)} .surface-ink .slider__btn{background:transparent;border-color:rgba(255,255,255,.3);color:#fff} .surface-ink .slider__btn:hover{background:#fff;color:var(--ink);border-color:#fff} .slider--products .slider__track{--slide-w:72%} @media (min-width:600px){.slider--products .slider__track{--slide-w:calc((100% - 20px) / 2)}} @media (min-width:900px){.slider--products .slider__track{--slide-w:calc((100% - 48px) / 3);--slide-gap:24px}} @media (min-width:1200px){.slider--products .slider__track{--slide-w:calc((100% - 72px) / 4)}} .slider--bleed .slider__track{margin-inline-end:calc(var(--bleed) * -1);padding-inline-end:var(--gutter)} .bleed-wrap{overflow:hidden} /* Large visual slides (stages / projects / history) */ .vslide{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;color:#fff;background:var(--ink);isolation:isolate;margin:0} .vslide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.06);transition:transform 1600ms var(--ease-out)} .vslide::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(6,19,33,.9) 0%,rgba(6,19,33,.2) 55%,rgba(6,19,33,0) 100%)} .vslide:hover>img,.vslide.is-current>img{transform:scale(1)} .vslide__body{position:absolute;inset-inline:clamp(20px,3vw,40px);bottom:clamp(20px,3vw,40px);display:grid;gap:8px;max-width:560px} .vslide__n{font-family:var(--font-num);font-weight:600;font-size:clamp(2.5rem,1.6rem + 2.5vw,4.5rem);line-height:.8;color:var(--steel);direction:ltr;text-align:start} [dir="rtl"] .vslide__n{text-align:right} .vslide__title{color:#fff;font-size:clamp(1.35rem,1.1rem + 1vw,2.1rem);line-height:1.3} .vslide__text{color:rgba(255,255,255,.8);font-size:.9375rem;max-width:48ch} .vslide__meta{font-size:.8125rem;font-weight:600;color:var(--steel-300)} .vslide__go{display:inline-flex;align-items:center;gap:8px;font-size:.875rem;font-weight:600;color:#fff;margin-top:6px} .vslide__go .icon{width:16px;height:16px} .slider--visual .slider__track{--slide-w:86%;--slide-gap:14px} @media (min-width:900px){.slider--visual .slider__track{--slide-w:70%;--slide-gap:24px}.vslide{aspect-ratio:16/9}} @media (max-width:599px){.vslide{aspect-ratio:4/5}} /* Marquee of brand wordmarks */ .marquee{position:relative;overflow:hidden;border-top:1px solid var(--line-dark);padding-block:clamp(18px,2.5vw,32px);direction:ltr;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)} .marquee__track{display:flex;width:max-content;gap:clamp(40px,6vw,96px);animation:marquee 40s linear infinite} .marquee span{font-family:var(--font-num);font-weight:600;font-size:clamp(3rem,2rem + 4vw,6.5rem);line-height:1;letter-spacing:.04em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.3);white-space:nowrap} .marquee span:nth-child(odd){-webkit-text-stroke:0;color:rgba(255,255,255,.9)} .marquee:hover .marquee__track{animation-play-state:paused} @keyframes marquee{to{transform:translateX(-50%)}} /* ---------- Page hero variants ---------- */ .page-hero__lines{position:absolute;inset:0} .page-hero__ghost{position:absolute;z-index:0;bottom:-.1em;inset-inline-end:-.03em;font-family:var(--font-num);font-weight:600;font-size:clamp(7rem,3rem + 16vw,20rem);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.12);direction:ltr;pointer-events:none;white-space:nowrap} .page-hero__index{font-family:var(--font-num);font-weight:600;letter-spacing:.1em;color:#fff;margin-inline-end:14px;padding-inline-end:14px;border-inline-end:1px solid rgba(255,255,255,.3)} .page-hero--split,.page-hero--frame{display:block;min-height:0;padding-top:calc(var(--header-h) + clamp(36px,5vw,72px));padding-bottom:clamp(56px,6vw,104px)} .page-hero--split::after,.page-hero--frame::after{z-index:2} .page-hero__grid{position:relative;z-index:1;display:grid;gap:clamp(36px,5vw,64px);align-items:center} .page-hero--split .page-hero__content,.page-hero--frame .page-hero__content{padding-bottom:0} .page-hero__figure{aspect-ratio:4/3;margin:0} .page-hero__figure img{width:100%;height:100%;object-fit:cover;animation:bannerIn 1800ms var(--ease-out) both} .page-hero--frame .stack{max-width:540px;width:100%;justify-self:end} .page-hero--frame .stack__main{aspect-ratio:4/5;max-height:560px} @media (min-width:900px){ .page-hero--split .page-hero__grid{grid-template-columns:5fr 7fr} .page-hero--split .page-hero__figure{margin-inline-end:calc(var(--bleed) * -1);aspect-ratio:auto;height:clamp(420px,60vh,620px)} .page-hero--split .page-hero__figure.frame--brackets::after{display:none} .page-hero--frame .page-hero__grid{grid-template-columns:7fr 5fr} .page-hero--split .page-hero__title,.page-hero--frame .page-hero__title{font-size:clamp(2.6rem,1.6rem + 3.2vw,4.6rem)} } @media (max-width:899px){.page-hero--split .page-hero__figure{margin-inline:calc(var(--gutter) * -1);aspect-ratio:16/10}.page-hero--split .frame--brackets::before,.page-hero--split .frame--brackets::after{display:none}.page-hero--frame .stack{justify-self:stretch;max-width:none}.page-hero--frame .stack__main{aspect-ratio:16/11}} /* ---------- Hero: directional mask transition + lines ---------- */ .hero.is-running .hero__slide{opacity:0} .hero.is-running .hero__slide.is-active{opacity:1;z-index:2;animation:slideWipeLTR 1400ms var(--ease-out) both} [dir="rtl"] .hero.is-running .hero__slide.is-active{animation-name:slideWipeRTL} .hero.is-running .hero__slide.is-leaving{opacity:1;z-index:1} @keyframes slideWipeLTR{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} @keyframes slideWipeRTL{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}} .hero__scroll{position:absolute;z-index:3;inset-inline-end:var(--gutter);top:44%;display:none;flex-direction:column;align-items:center;gap:14px;font-family:var(--font-num);font-weight:600;font-size:.75rem;letter-spacing:.2em;color:rgba(255,255,255,.6);writing-mode:vertical-rl} .hero__scroll::after{content:"";width:1px;height:72px;background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,0));animation:scrollCue 2.4s var(--ease) infinite} @keyframes scrollCue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} @media (min-width:1200px){.hero__scroll{display:flex}} /* ---------- Home: legacy (1999) ---------- */ .legacy2{overflow:hidden;padding-block:var(--section)} .legacy2__grid{display:grid;gap:clamp(48px,6vw,96px);align-items:center} .legacy2 .legacy__year{font-size:clamp(6rem,2rem + 11vw,13rem);margin-bottom:clamp(12px,2vw,24px)} .legacy2__copy .h2{max-width:18ch;margin-bottom:20px} .legacy2__copy .lead{max-width:56ch;margin-bottom:28px} .legacy2 .ghost{top:clamp(24px,4vw,56px);inset-inline-end:-.04em} .facts-band{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(48px,5vw,80px);border-top:1px solid var(--graphite);border-bottom:1px solid var(--concrete-200)} .facts-band>div{padding:22px 0;padding-inline-end:16px} .facts-band>div+div{padding-inline-start:clamp(14px,2.5vw,32px);border-inline-start:1px solid var(--concrete-200)} .facts-band dd{font-family:var(--font-num);font-weight:600;font-size:clamp(2.4rem,1.6rem + 2vw,3.6rem);line-height:1;color:var(--navy);direction:ltr} [dir="rtl"] .facts-band dd{text-align:right} .facts-band dt{font-size:.875rem;color:var(--text);margin-top:10px} @media (min-width:900px){.legacy2__grid{grid-template-columns:5fr 6fr}} /* ---------- Home: categories ---------- */ .categories{position:relative;isolation:isolate;overflow:hidden} .categories .ghost{top:clamp(48px,5vw,96px);inset-inline-end:-.03em} .mosaic{gap:clamp(10px,1vw,14px)} .tile::before{content:"";position:absolute;inset:14px;z-index:1;border:1px solid rgba(255,255,255,.55);opacity:0;transform:scale(1.03);transition:opacity var(--t-base),transform 700ms var(--ease-out);pointer-events:none} .tile:hover::before,.tile:focus-visible::before{opacity:1;transform:none} .tile:hover .tile__img,.tile:focus-visible .tile__img{transform:scale(1.07) translateX(calc(var(--dir) * -1.5%))} .tile__index{font-size:1.125rem;z-index:2} .tile--1 .tile__index{font-size:1.5rem} .tile__count{position:absolute;top:18px;inset-inline-end:20px;z-index:2;font-family:var(--font-num);font-weight:600;font-size:.8125rem;letter-spacing:.1em;padding:3px 9px;border:1px solid rgba(255,255,255,.4);direction:ltr} .tile__body,.tile__arrow{z-index:2} .tile--cta{background-image:var(--window-light);background-size:96px} /* ---------- Home: brands showcase ---------- */ .brands2{overflow:hidden;padding-top:var(--section)} .brands2__bg{position:absolute;inset-block:0;inset-inline-start:0;width:60%;z-index:-1;opacity:.14;margin:0} .brands2__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)} .brands2__grid{display:grid;gap:56px;align-items:center;padding-bottom:clamp(56px,6vw,96px)} .brands2 .lead{max-width:52ch;margin-top:20px} .brands2 .brand-list{margin:36px 0 28px} @media (min-width:900px){.brands2__grid{grid-template-columns:6fr 5fr;gap:clamp(56px,7vw,112px)}} /* ---------- Home: why ---------- */ .why2 .stack{margin-top:40px} /* ---------- Visual feature (stages / projects slider) ---------- */ .visual-feature{padding-block:var(--section);overflow:hidden} .visual-feature .section-head__aside{color:rgba(255,255,255,.65)} .visual-note{margin-top:18px;font-size:.8125rem;color:rgba(255,255,255,.5)} /* ---------- Home: supply band ---------- */ .supply-band{min-height:clamp(640px,88vh,880px);display:flex;align-items:center} .supply-band .supply-band__inner{width:min(100% - var(--gutter) * 2,var(--container))} .supply-band__frag{display:none} @media (min-width:1100px){ .supply-band__frag{display:block;position:absolute;z-index:1;inset-inline-end:var(--bleed);bottom:clamp(48px,6vw,96px);width:clamp(220px,19vw,300px);aspect-ratio:4/5;border:10px solid #fff;box-shadow:var(--shadow-float);margin:0} .supply-band__frag img{width:100%;height:100%;object-fit:cover} .supply-band__frag .plate{bottom:-10px;top:auto;inset-inline-start:-10px;max-width:none;width:calc(100% + 20px);box-shadow:none} } /* ---------- Branches โ€” signage plates ---------- */ .branch{padding:0;border-top:0;background:#fff;overflow:hidden} .branch__sign{position:relative;isolation:isolate;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;min-height:clamp(210px,20vw,270px);padding:clamp(24px,3vw,40px);background:var(--ink);color:#fff;overflow:hidden} .branch__sign::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--window-light),linear-gradient(to right,rgba(255,255,255,.06) 1px,transparent 1px);background-size:96px,calc(100% / 6) 100%} .branch__sign::after{content:"";position:absolute;inset-inline:0;bottom:0;height:4px;background:var(--steel)} .branch__sign .branch__index{color:var(--steel);position:absolute;top:clamp(20px,2.5vw,32px);inset-inline-end:clamp(24px,3vw,40px)} .branch__sign .branch__label{color:var(--steel-300)} .branch__sign .branch__name{color:#fff;font-size:clamp(2rem,1.3rem + 2.2vw,3.25rem);margin:6px 0 4px} .branch__sign .branch__city{color:rgba(255,255,255,.7)} .branch__sign-pin{width:52px;height:52px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.3);flex:none} .branch__sign-pin .icon{width:22px;height:22px;color:var(--steel)} .branch__sign--photo{min-height:clamp(260px,26vw,340px)} .branch__sign--photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .branch__sign--photo::before{background:linear-gradient(0deg,rgba(6,19,33,.92),rgba(6,19,33,.1) 70%)} .branch__body{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;flex:1} .branch__body .branch__rows{margin:0 0 28px} .branch__body .branch__map{margin:0 0 24px} .branches--page .branch{box-shadow:0 0 0 1px var(--line)} /* ---------- Final CTA ---------- */ .cta-final__media{opacity:.6} .cta-final::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(to right,rgba(255,255,255,.06) 1px,transparent 1px);background-size:var(--col6) 100%;background-position:var(--bleed) 0} .cta-final__frame{display:none} @media (min-width:1100px){.cta-final__frame{display:block;position:absolute;inset-inline-end:var(--bleed);top:clamp(40px,5vw,72px);width:clamp(180px,14vw,240px);aspect-ratio:3/4;margin:0;opacity:.95}.cta-final__frame img{width:100%;height:100%;object-fit:cover}.cta-final__inner{position:relative;z-index:1}} /* ---------- Catalog ---------- */ .cat-intro{display:grid;gap:clamp(32px,5vw,72px);align-items:center;margin-top:clamp(40px,5vw,64px)} .cat-intro__figure{aspect-ratio:16/10;margin:0} .cat-intro .lead{max-width:56ch} @media (min-width:900px){.cat-intro{grid-template-columns:5fr 6fr}} .dept-rail{padding-block:var(--section);overflow:hidden} .dept-rail .slider__track{--slide-w:72%} @media (min-width:600px){.dept-rail .slider__track{--slide-w:44%}} @media (min-width:1100px){.dept-rail .slider__track{--slide-w:30%}} .dept-card{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;color:#fff;background:var(--ink);isolation:isolate} .dept-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform var(--t-image) var(--ease-out)} .dept-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(6,19,33,.9),rgba(6,19,33,.05) 60%)} .dept-card::before{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.5);opacity:0;transition:opacity var(--t-base);z-index:1} .dept-card:hover::before{opacity:1} .dept-card__n{position:absolute;top:22px;inset-inline-start:24px;font-family:var(--font-num);font-weight:600;font-size:1.125rem;letter-spacing:.1em;z-index:2} .dept-card__body{position:absolute;inset-inline:24px;bottom:24px;display:grid;gap:6px;z-index:2} .dept-card__name{font-size:1.5rem;font-weight:700;line-height:1.3} .dept-card__meta{font-size:.8125rem;color:var(--steel-300);display:flex;align-items:center;gap:8px} .dept-card__meta .icon{width:16px;height:16px} .dept-card:hover img{transform:scale(1.06)} .highlight{padding-block:var(--section);overflow:hidden} /* ---------- Product detail ---------- */ .product__stagewrap{position:relative;isolation:isolate} .product__stagewrap .frame__back{position:absolute;inset:0;transform:translate(calc(var(--dir) * -22px),22px);background:var(--steel-100);z-index:-1} .product__gallery .slider__track{--slide-w:100%;--slide-gap:0px} .gallery-slide{position:relative;aspect-ratio:1;background:var(--concrete);overflow:hidden;margin:0} .gallery-slide img{width:100%;height:100%;object-fit:cover} .product__gallery .slider__nav{margin-top:40px} .brand-panel{position:relative;isolation:isolate;display:grid;gap:14px 22px;align-items:center;margin-top:36px;padding:24px 26px;background:var(--ink);color:rgba(255,255,255,.75);overflow:hidden} .brand-panel::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--window-light);background-size:96px} .brand-panel::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--steel)} .brand-panel .wordmark{font-size:2.25rem;color:#fff} .brand-panel p{font-size:.875rem;line-height:1.7} @media (min-width:600px){.brand-panel{grid-template-columns:auto 1fr auto}} .product-band{margin-top:clamp(56px,6vw,96px);padding-block:clamp(56px,6vw,96px)} .product-band__grid{display:grid;gap:40px} .product-band .product__desc{margin-top:0} @media (min-width:900px){.product-band__grid{grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,96px)}} /* ---------- About ---------- */ .story2{padding-block:var(--section);overflow:hidden} .story2__grid{display:grid;gap:clamp(40px,6vw,96px);align-items:center} .story2 .legacy__year{font-size:clamp(6rem,2.5rem + 11vw,13rem)} .story2 .story__copy .lead{color:#fff} .story2 .story__copy p{color:rgba(255,255,255,.72)} @media (min-width:900px){.story2__grid{grid-template-columns:6fr 5fr}} .history{padding-block:var(--section);overflow:hidden} .provide2__grid{display:grid;gap:40px;align-items:start} .provide2__preview{display:none;margin:0} @media (min-width:1100px){ .provide2__grid{grid-template-columns:7fr 4fr;gap:72px} .provide2__preview{display:block;position:sticky;top:120px;aspect-ratio:4/5} .provide2__preview img{width:100%;height:100%;object-fit:cover;transition:opacity 350ms var(--ease)} .provide2__preview img.is-swapping{opacity:0} .provide2 .index-list__row{grid-template-columns:64px 1fr 2fr 28px} .provide2 .index-list__thumb{display:none!important} .provide2 .index-list__row.is-hot{background:#fff;padding-inline:16px} } .approach2{padding-block:var(--section)} .approach2 .approach__item{border-top-color:var(--steel)} .approach2 .approach__item p{color:rgba(255,255,255,.72)} .commitment__media{position:absolute;inset:0;z-index:0;opacity:.3;margin:0} .commitment__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)} .commitment::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,59,101,.6),rgba(17,59,101,.92));z-index:0} .commitment__inner{z-index:2} .commitment::before{z-index:1} /* ---------- Brands page ---------- */ .brand-feature{overflow:hidden;padding-block:var(--section)} .brand-feature+.brand-feature{border-top:1px solid var(--line-dark)} .brand-feature__bg{position:absolute;inset:0;z-index:-1;margin:0} .brand-feature__bg img{width:100%;height:100%;object-fit:cover;opacity:.2;filter:grayscale(.5)} .brand-feature__grid{display:grid;gap:40px;align-items:center} .brand-feature .wordmark--xl{display:block;margin-bottom:8px} .brand-feature .prose{color:rgba(255,255,255,.8);max-width:56ch} .brand-feature .tags li{border-color:rgba(255,255,255,.25);color:#fff} .brand-feature__products{margin-top:clamp(40px,5vw,64px)} .brand-feature__products .product-card{background:transparent} .brand-feature__products .product-card__title{color:#fff} .brand-feature__products .product-card__cat{color:var(--steel)} .brand-feature__products .product-card__cta{color:var(--steel-300)} .brand-feature .btn--text{color:#fff} @media (min-width:900px){.brand-feature__grid{grid-template-columns:6fr 5fr;gap:clamp(48px,7vw,112px)}.brand-feature--flip .brand-feature__grid>:first-child{order:2}} /* ---------- Projects page ---------- */ .asym-grid{display:grid;gap:clamp(12px,1.4vw,20px)} @media (min-width:900px){.asym-grid{grid-template-columns:repeat(12,1fr)}.asym-grid>:nth-child(4n+1){grid-column:span 7}.asym-grid>:nth-child(4n+2){grid-column:span 5}.asym-grid>:nth-child(4n+3){grid-column:span 5}.asym-grid>:nth-child(4n+4){grid-column:span 7}} .asym-grid .vslide{aspect-ratio:auto;min-height:clamp(300px,32vw,460px)} @media (max-width:599px){.asym-grid .vslide{min-height:360px}} .proj-count{font-family:var(--font-num);font-weight:600;font-size:clamp(4rem,2rem + 6vw,8rem);line-height:.8;color:var(--steel);direction:ltr} /* ---------- Supply page ---------- */ .process-band{position:relative;isolation:isolate;padding-top:clamp(260px,32vw,440px);padding-bottom:var(--section);overflow:hidden;background:var(--ink)} .process-band__media{position:absolute;inset:0 0 auto;height:clamp(460px,52vw,700px);z-index:-1;margin:0} .process-band__media img{width:100%;height:100%;object-fit:cover} .process-band__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,28,46,.2),rgba(10,28,46,.8) 70%,var(--ink))} .process-band .section-head .h2{color:#fff} .process-band .eyebrow{color:var(--steel)} .process-band .process__step{background:#fff;padding:28px;border-top:0} .process-band .process__step::before{top:0;width:100%;height:3px;background:var(--steel)} .process-band .process__step p{color:var(--text)} .materials-band{padding-block:var(--section)} .materials-band .mini-tile--cta{background-image:var(--window-light);background-size:96px} @media (min-width:900px){.materials-band .mini-tiles{grid-auto-rows:clamp(170px,15vw,230px)}.materials-band .mini-tile{aspect-ratio:auto}.materials-band .mini-tile:nth-child(1){grid-row:span 2;grid-column:span 2}.materials-band .mini-tile--cta{grid-column:span 2}} /* ---------- Contact / inquiry split ---------- */ .inquiry-split{display:grid;background:var(--concrete)} .inquiry-split__visual{position:relative;isolation:isolate;min-height:460px;color:#fff;overflow:hidden;padding:clamp(28px,5vw,72px) var(--gutter);display:flex;flex-direction:column;justify-content:flex-end} .inquiry-split__visual>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .inquiry-split__visual::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(6,19,33,.95) 30%,rgba(6,19,33,.4))} .inquiry-split__visual .h2{color:#fff;max-width:16ch;margin-bottom:16px} .inquiry-split__visual .eyebrow{color:var(--steel)} .inquiry-split__visual>p{color:rgba(255,255,255,.78);max-width:48ch} .inquiry-split__visual .channels{margin-top:28px} .inquiry-split__visual .channel{border-color:rgba(255,255,255,.22);color:#fff;background:rgba(6,19,33,.4)} .inquiry-split__visual .channel .icon{color:var(--steel)} .inquiry-split__visual .channel small{color:rgba(255,255,255,.68)} .inquiry-split__visual .channel:hover{background:#fff;color:var(--graphite);border-color:#fff} .inquiry-split__visual .channel:hover small{color:var(--muted)} .inquiry-split__visual .channel:hover .icon{color:var(--navy)} .inquiry-split__visual .channel--primary{background:var(--navy);border-color:var(--navy)} .inquiry-split__visual .channel--primary .icon{color:#fff} .inquiry-split__form{padding:clamp(36px,5vw,80px) var(--gutter)} .inquiry-split__form .inquiry__form{border-top:0;background:#fff;box-shadow:0 0 0 1px var(--line);max-width:760px} .inquiry-split__form .eyebrow{margin-bottom:12px} .inquiry-split__form .h3{margin-bottom:24px} @media (min-width:1024px){ .inquiry-split{grid-template-columns:5fr 7fr} .inquiry-split__visual{padding-inline-start:max(var(--gutter),calc((100vw - var(--container)) / 2));padding-inline-end:clamp(32px,4vw,64px);min-height:760px} .inquiry-split__form{padding-inline:clamp(40px,5vw,96px) max(var(--gutter),calc((100vw - var(--container)) / 2))} } .form__notice--ok{padding:24px;gap:18px} .form__notice--ok .icon{width:30px;height:30px;padding:5px;border:1.5px solid #2F7D4F} /* ---------- Mobile safety for art layer ---------- */ @media (max-width:599px){ .frame--brackets::before,.frame--brackets::after{width:28px;height:28px} .ghost--xl{font-size:clamp(7rem,40vw,10rem)} .slider__nav{gap:14px} .slider__btn{width:44px;height:44px} .facts-band dd{font-size:2rem} .facts-band dt{font-size:.8125rem} .brands2__bg{width:100%;opacity:.08} .process-band .process__step{padding:22px} .page-hero__ghost{font-size:34vw} } @media (prefers-reduced-motion:reduce){.marquee__track{animation:none}.hero__scroll::after{animation:none}.hero.is-running .hero__slide.is-active{animation:none}} .branch__sign .branch__index{direction:inherit} .branch__body .branch__rows>div:first-child{border-top:0;padding-top:0} .commitment__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px} .story2 .legacy__year{background:none;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.5px var(--steel);color:transparent} @media (min-width:1200px){.catalog .product-grid{grid-template-columns:repeat(3,1fr);gap:48px 28px}} .product{padding-bottom:0} .slider.is-static .slider__nav{display:none} .brand-mini{display:grid;gap:10px;margin-top:28px;max-width:460px} .brand-mini a{display:grid;grid-template-columns:64px 1fr 20px;align-items:center;gap:16px;padding:10px;border:1px solid rgba(255,255,255,.18);color:#fff;transition:background var(--t-fast),border-color var(--t-fast)} .brand-mini a:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.4)} .brand-mini img{width:64px;height:64px;object-fit:cover} .brand-mini small{display:block;font-size:.75rem;color:var(--steel-300)} .brand-mini .icon{width:18px;height:18px;color:var(--steel)} .branches--page .branch{background:#fff} @media (max-width:599px){.facts-band{grid-template-columns:1fr}.facts-band>div,.facts-band>div+div{display:flex;align-items:baseline;gap:18px;padding:16px 0;border-inline-start:0;padding-inline-start:0}.facts-band>div+div{border-top:1px solid var(--concrete-200)}.facts-band dd{min-width:64px}.facts-band dt{margin-top:0}} .page-hero__index{unicode-bidi:isolate;display:inline-block} .page-hero__index{margin:0 14px 0 0;padding:0 14px 0 0;border:0;border-right:1px solid rgba(255,255,255,.3)} [dir="rtl"] .page-hero__index{margin:0 0 0 14px;padding:0 0 0 14px;border-right:0;border-left:1px solid rgba(255,255,255,.3)}