/* ============================================================ Salient Engineering Contracting L.L.C. shared stylesheet Crimson design system · light + dark themes · EN/AR (RTL) ============================================================ */ :root{ --ink:#1E1C1B; --ink-2:#2C2926; --dark:#171412; --dark-2:#211D1A; --bone:#F7F5F1; --bone-2:#EFEBE3; --paper:#FFFFFF; --accent:#981C26; --accent-2:#B4232F; --accent-deep:#6E141B; --accent-tint:#E7B9BC; --line:#E4DED3; --muted:#6B6459; --muted-d:#B7AEA1; --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,sans-serif; --radius:2px; } /* Dark theme: majority black/crimson. Applied via html.theme-dark (set inline in before paint; default is dark). */ html.theme-dark{ --bone:#171412; --bone-2:#1E1B18; --paper:#211D1A; --ink:#F2EEE8; --ink-2:#DDD6CC; --line:#332E28; --muted:#A69C8F; --accent-deep:#D98B93; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--sans);color:var(--ink);background:var(--bone);line-height:1.6;font-size:16px} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ul{list-style:none} button{font-family:inherit} .wrap{max-width:1180px;margin:0 auto;padding:0 24px} section{position:relative} /* ---------- type ---------- */ .eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-deep)} .eyebrow::before{content:'';width:36px;height:2px;background:var(--accent);flex:none} .on-dark .eyebrow{color:var(--accent-tint)} .on-dark .eyebrow::before{background:var(--accent-2)} h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.15} h2{font-size:clamp(28px,4vw,42px);margin:18px 0 0} .lede{font-size:clamp(17px,2vw,20px);color:var(--ink-2);max-width:720px} /* ---------- reveal ---------- */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} .belt-track{animation:none !important} .skyline .b,.skyline .crane-arm,.skyline .blink{animation:none !important;transform:none !important;opacity:1 !important} } /* ---------- nav ---------- */ header.site{position:sticky;top:0;z-index:50;background:var(--bone);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 24px;max-width:1240px;margin:0 auto} .brand{display:flex;align-items:center;gap:12px;flex:none} .brand img{width:40px;height:40px;object-fit:contain} html.theme-dark .brand img{background:#fff;padding:3px;border-radius:var(--radius)} .brand .wordmark{line-height:1.2} .brand .wordmark b{display:block;font-family:var(--serif);font-weight:600;font-size:14.5px;letter-spacing:.06em} .brand .wordmark span{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .nav-links{display:flex;align-items:center;gap:20px;font-size:13px;font-weight:500;letter-spacing:.03em} .nav-links a{padding:6px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;white-space:nowrap} .nav-links a:hover{color:var(--accent-deep);border-color:var(--accent)} .nav-links a[aria-current="page"]{color:var(--accent-deep);border-color:var(--accent)} .nav-links a.nav-cta{background:var(--accent);color:#fff;padding:9px 18px;border-radius:var(--radius);border-bottom:none;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase} .nav-links a.nav-cta:hover{background:var(--accent-2);color:#fff;border-color:transparent} .nav-tools{display:flex;align-items:center;gap:10px} .lang-btn,.theme-btn{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.06em;background:none;border:1px solid var(--ink);border-radius:var(--radius);padding:7px 14px;cursor:pointer;color:var(--ink);transition:background .2s,color .2s} .lang-btn:hover,.theme-btn:hover{background:var(--ink);color:var(--bone)} .burger{display:none;background:none;border:none;cursor:pointer;padding:8px} .burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:transform .25s,opacity .25s} @media (max-width: 1200px){ .burger{display:block} .nav-links{position:absolute;top:100%;inset-inline:0;background:var(--bone);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px 16px;display:none} .nav-links.open{display:flex} .nav-links a{width:100%;padding:12px 0;border-bottom:1px solid var(--line)} .nav-links a:last-of-type{border-bottom:none} .nav-links a.nav-cta{width:auto;align-self:flex-start;margin:14px 0 4px;padding:11px 22px;border-bottom:none} body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} body.menu-open .burger span:nth-child(2){opacity:0} body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} } /* ---------- buttons ---------- */ .btn{display:inline-block;font-size:13.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:14px 28px;border-radius:var(--radius);transition:background .2s,color .2s,border-color .2s;border:1px solid transparent;cursor:pointer;background:none} .btn-solid{background:var(--accent);color:#fff} .btn-solid:hover{background:var(--accent-2)} .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff} .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)} .btn-dark{border-color:var(--ink);color:var(--ink)} .btn-dark:hover{background:var(--ink);color:var(--bone)} /* ---------- hero (dark, cinematic, same in both themes) ---------- */ .hero{background:var(--dark);color:#fff;overflow:hidden} html.theme-dark .hero{border-bottom:1px solid rgba(255,255,255,.08)} .hero .bg{position:absolute;inset:0;background:center/cover no-repeat;opacity:.38} /* pixel scenes stay clear edge to edge: no side fade; a soft text shadow keeps the hero copy readable over the animation instead */ .hero .shade{display:none} .hero .wrap{text-shadow:0 2px 18px rgba(8,12,20,.78),0 1px 5px rgba(8,12,20,.6)} .hero-day .wrap,html.theme-light .hero:has(.px-scene) .wrap{text-shadow:0 1px 14px rgba(247,245,241,.78),0 1px 4px rgba(247,245,241,.6)} .hero:has(.px-scene) .sub{color:#E9E4DA} .hero:has(.px-scene) .btn-ghost{background:rgba(10,16,28,.42)} .hero-day .btn-ghost,html.theme-light .hero:has(.px-scene) .btn-ghost{background:rgba(247,245,241,.55)} .hero .wrap{position:relative;z-index:2;padding-top:clamp(80px,12vh,140px);padding-bottom:clamp(80px,12vh,140px)} .hero h1{font-size:clamp(38px,5.6vw,64px);max-width:16ch;margin:22px 0 0} .hero h1 em{color:var(--accent-tint);font-style:italic} .hero .sub{margin:24px 0 0;max-width:600px;font-size:clamp(16px,1.8vw,18.5px);color:var(--muted-d)} .hero .tag{margin:26px 0 0;font-family:var(--serif);font-style:italic;font-size:clamp(17px,2vw,21px);color:var(--accent-tint)} .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px} /* page-hero: shorter hero for inner pages */ .page-hero .wrap{padding-top:clamp(60px,9vh,100px);padding-bottom:clamp(60px,9vh,100px)} .page-hero h1{font-size:clamp(32px,4.6vw,54px)} /* ---------- animated skyline (home hero) ---------- */ .skyline{position:absolute;bottom:-2px;inset-inline:0;z-index:1;pointer-events:none} .skyline svg{display:block;width:100%;height:clamp(90px,16vw,180px)} .skyline .b{transform-origin:bottom;transform-box:fill-box;transform:scaleY(0);animation:rise 1.1s cubic-bezier(.2,.7,.25,1) forwards} .skyline .b:nth-of-type(1){animation-delay:.15s} .skyline .b:nth-of-type(2){animation-delay:.4s} .skyline .b:nth-of-type(3){animation-delay:.05s} .skyline .b:nth-of-type(4){animation-delay:.65s} .skyline .b:nth-of-type(5){animation-delay:.3s} .skyline .b:nth-of-type(6){animation-delay:.85s} .skyline .b:nth-of-type(7){animation-delay:.55s} .skyline .b:nth-of-type(8){animation-delay:1s} @keyframes rise{to{transform:scaleY(1)}} .skyline .crane-arm{transform-origin:172px 26px;transform-box:view-box;animation:swing 9s ease-in-out infinite alternate} @keyframes swing{from{transform:rotate(-4deg)}to{transform:rotate(5deg)}} .skyline .blink{animation:blink 2.4s steps(1) infinite} @keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.15}} /* ---------- stat strip ---------- */ .stats{background:var(--accent);color:#fff} .stats .grid{display:grid;grid-template-columns:repeat(4,1fr);max-width:1180px;margin:0 auto} .stats .cell{padding:32px 22px;text-align:center;border-inline-start:1px solid rgba(255,255,255,.18)} .stats .cell:first-child{border-inline-start:none} .stats .num{font-family:var(--serif);font-size:clamp(26px,3.4vw,42px);font-weight:600;line-height:1.1} .stats .lbl{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-tint);margin-top:6px} @media (max-width:760px){ .stats .grid{grid-template-columns:1fr 1fr} .stats .cell{border-inline-start:none;border-top:1px solid rgba(255,255,255,.18)} .stats .cell:nth-child(-n+2){border-top:none} } /* ---------- generic sections ---------- */ .sec{padding:clamp(66px,9vw,104px) 0} .sec-alt{background:var(--bone-2)} .sec-dark{background:var(--dark);color:#fff} html.theme-dark .sec-dark{border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)} .sec .body{margin-top:18px;max-width:720px;color:var(--muted)} .sec .lede{margin-top:26px} /* ---------- pillars ---------- */ .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:56px} .pillar{border-top:2px solid var(--accent);padding-top:18px} .pillar h3{font-size:19px} .pillar p{font-size:14px;color:var(--muted);margin-top:8px} @media (max-width:920px){.pillars{grid-template-columns:1fr 1fr}} @media (max-width:540px){.pillars{grid-template-columns:1fr}} /* ---------- service / role cards ---------- */ .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px} .svc{background:var(--paper);border:1px solid var(--line);border-top:2px solid var(--accent);border-radius:var(--radius);padding:30px 26px;position:relative} .svc h3{font-size:20px;padding-inline-end:70px} .svc p{font-size:14.5px;color:var(--muted);margin-top:12px} .spec{position:absolute;top:18px;inset-inline-end:18px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);border:1px solid var(--accent);border-radius:var(--radius);padding:4px 9px} @media (max-width:920px){.svc-grid{grid-template-columns:1fr 1fr}} @media (max-width:600px){.svc-grid{grid-template-columns:1fr}} /* ---------- project cards ---------- */ .proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px} .proj-grid.two{grid-template-columns:1fr 1fr} .proj{background:var(--dark-2);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column} .proj .ph{position:relative;aspect-ratio:16/10;overflow:hidden} .proj .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .proj:hover .ph img{transform:scale(1.04)} .tag-status{position:absolute;top:14px;inset-inline-start:14px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;border-radius:var(--radius);padding:5px 10px} .tag-done{background:var(--accent)} .tag-ongoing{background:#C4801E} .tag-first{background:#fff;color:var(--accent);position:static;display:inline-block;margin-bottom:14px} .proj .info{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1} .proj h3{font-size:18.5px;line-height:1.3} .proj .meta{font-size:13px;color:var(--muted-d);margin-top:8px} .proj .desc{font-size:14px;color:rgba(255,255,255,.75);margin-top:12px;flex:1} .proj .val{font-family:var(--serif);font-size:22px;color:var(--accent-tint);margin-top:16px} .proj .links{margin-top:14px;display:flex;gap:18px;flex-wrap:wrap} .proj .links a{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-tint);border-bottom:1px solid var(--accent-tint)} .proj .links a:hover{color:#fff;border-color:#fff} .proj.text-card .info{padding-top:28px} .proj.text-card .tag-status{position:static;align-self:flex-start;margin-bottom:16px} @media (max-width:920px){.proj-grid,.proj-grid.two{grid-template-columns:1fr 1fr}} @media (max-width:600px){.proj-grid,.proj-grid.two{grid-template-columns:1fr}} /* ---------- featured carousel ---------- */ .carousel{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:34px;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:var(--accent) transparent} .carousel .proj{flex:0 0 min(340px,82vw);scroll-snap-align:start} .car-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:22px} .car-prev,.car-next{width:44px;height:44px;border-radius:50%;background:none;border:1px solid rgba(255,255,255,.35);color:#fff;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s;font-family:var(--sans)} .car-prev:hover,.car-next:hover{background:var(--accent);border-color:var(--accent)} /* ---------- photo collage belt ---------- */ .collage{background:var(--dark);overflow:hidden;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.1)} .collage-track{display:flex;gap:10px;width:max-content;animation:belt 55s linear infinite} .collage:hover .collage-track{animation-play-state:paused} .collage-track a{display:block;width:240px;height:160px;flex:none;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.12)} .collage-track a img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease} .collage-track a:hover img{transform:scale(1.08)} [dir="rtl"] .collage-track{animation-name:belt-rtl} @media (prefers-reduced-motion: reduce){.collage-track{animation:none !important}} /* ---------- pixel construction scene (canvas diorama engine) ---------- Every .px-scene gets one low-res upscaled with image-rendering:pixelated, so pixels stay chunky and DPR is capped. Scenes are drawn by js/site.js: per-page Abu Dhabi construction dioramas (2.5-D buildings, palms, roads, parallax crane skyline). Palette: the engine reads the --px-* variables below, so the other group sites can swap the crimson accent for gold or amber. */ .px-scene{position:absolute;inset:0;z-index:0;overflow:hidden; --px-accent:var(--accent,#981C26); --px-accent-2:var(--accent-2,#B4232F); --px-glow:#F5E9C8; background:linear-gradient(180deg,#0B1B31 0%,#10263F 55%,#23293E 82%,#3A3448 100%)} .px-scene canvas{position:absolute;left:0;top:0;image-rendering:pixelated;image-rendering:crisp-edges} .px-scene::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:6; background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 8px), repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 8px)} /* mini variant injected into every .cta-band by site.js */ .px-mini{background:none;pointer-events:none;opacity:.5} .px-mini::after{display:none} .cta-band{overflow:hidden} .cta-band .wrap{position:relative;z-index:2} .hero .shade{z-index:1} .hero .px-replay{position:absolute;z-index:3;bottom:18px;inset-inline-start:24px;background:rgba(11,27,49,.7);border:1px solid rgba(245,233,200,.35);color:#F5E9C8;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;border-radius:var(--radius);cursor:pointer;transition:background .2s,border-color .2s} .hero .px-replay:hover{background:var(--accent);border-color:var(--accent)} /* day and night switch (contact hero) */ .px-daynight{position:absolute;z-index:3;bottom:18px;inset-inline-end:24px;display:inline-flex;gap:6px;align-items:center;background:rgba(11,27,49,.7);border:1px solid rgba(245,233,200,.35);color:#F5E9C8;font:600 13px/1 var(--sans);padding:8px 12px;border-radius:var(--radius);cursor:pointer;transition:background .2s,border-color .2s,color .2s} .px-daynight:hover{border-color:var(--accent)} .px-daynight span{opacity:.3;transition:opacity .3s} .px-daynight span.on{opacity:1} .hero-day .px-daynight{background:rgba(255,255,255,.78);border-color:rgba(30,28,27,.3);color:#1E1C1B} /* project hotspot tooltip (home hero showcase links to case studies) */ .px-tip{position:absolute;z-index:5;display:none;transform:translate(-50%,-100%);background:rgba(11,27,49,.94);border:1px solid rgba(245,233,200,.4);color:#F5E9C8;font:600 11px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:7px 11px;border-radius:var(--radius);pointer-events:auto;white-space:nowrap;text-decoration:none} .px-tip span{display:block;margin-top:3px;font-size:9.5px;color:#E7B9BC;letter-spacing:.12em} .px-tip.show{display:block} .px-tip:hover{border-color:var(--accent)} .hero-day .px-tip{background:rgba(255,255,255,.94);border-color:rgba(30,28,27,.3);color:#1E1C1B} .hero-day .px-tip span{color:#6E141B} /* the canvas takes hover for hotspots; hero controls re-enable themselves */ .hero .shade{pointer-events:none} .hero .wrap{pointer-events:none} .hero .wrap a,.hero .wrap button,.hero .wrap input,.hero .wrap select,.hero .wrap textarea{pointer-events:auto} @media (prefers-reduced-motion: reduce){.px-replay,.hero .px-replay{display:none}} /* ---------- clients belt (marquee) ---------- */ .belt{background:var(--dark);color:#fff;overflow:hidden;padding:34px 0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)} .belt .lbl{text-align:center;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-d);margin-bottom:22px} .belt-track{display:flex;align-items:center;gap:64px;width:max-content;animation:belt 60s linear infinite} .belt:hover .belt-track{animation-play-state:paused} .belt-track span{font-family:var(--serif);font-size:clamp(17px,2vw,22px);color:rgba(255,255,255,.72);white-space:nowrap} .belt-track i{width:6px;height:6px;background:var(--accent);border-radius:50%;flex:none} .belt-item{display:inline-flex;align-items:center;gap:14px} .belt-item img{height:96px;width:auto;max-width:310px;object-fit:contain;background:#fff;padding:12px 20px;border-radius:var(--radius);box-sizing:content-box} @keyframes belt{to{transform:translateX(-50%)}} [dir="rtl"] .belt-track{animation-name:belt-rtl} @keyframes belt-rtl{to{transform:translateX(50%)}} /* ---------- projects filter bar (dark section) ---------- */ .filter-bar{display:flex;flex-direction:column;gap:14px;margin-bottom:44px} .filter-group{display:flex;flex-wrap:wrap;align-items:center;gap:10px} .filter-group .fk{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-d);margin-inline-end:8px;min-width:64px} .filter-btn{background:var(--dark-2);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);color:rgba(255,255,255,.85);font-size:13px;font-weight:500;padding:8px 16px;cursor:pointer;transition:border-color .2s,background .2s,color .2s} .filter-btn:hover{border-color:var(--accent-2);background:rgba(152,28,38,.18)} .filter-btn.on{border-color:var(--accent);background:var(--accent);color:#fff} .f-hide{display:none !important} /* ---------- firsts band photo cluster ---------- */ .firsts-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center} .firsts-photos{position:relative;display:block;margin-bottom:26px} .firsts-photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);border:1px solid rgba(255,255,255,.14)} .firsts-photos img.over{position:absolute;width:58%;bottom:-26px;inset-inline-start:-34px;aspect-ratio:16/10;border:3px solid var(--dark);box-shadow:0 18px 40px rgba(0,0,0,.5)} .firsts-photos .fp-cap{position:absolute;top:14px;inset-inline-end:14px;font:600 10.5px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;background:rgba(23,20,18,.78);color:#fff;padding:6px 10px;border-radius:var(--radius)} .firsts-photos:hover img{opacity:.93} @media (max-width:880px){.firsts-grid{grid-template-columns:1fr}.firsts-photos img.over{inset-inline-start:auto;inset-inline-end:-6px}} /* sectors line under the services grid */ .sector-line{margin:34px 0 0;text-align:center;font-size:13.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} /* clickable service cards */ a.svc{display:block;transition:border-color .2s,transform .2s} a.svc:hover{border-color:var(--accent);transform:translateY(-2px)} a.svc:hover h3{color:var(--accent-deep)} /* news cards with media */ .news-card{padding:0;overflow:hidden;display:flex;flex-direction:column} .news-card .thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--dark-2)} .news-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .news-card:hover .thumb img{transform:scale(1.04)} .news-card .inner{padding:22px 26px 26px;display:flex;flex-direction:column;flex:1} .nlinks{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:auto;padding-top:16px} .nlinks a{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep);border-bottom:1px solid var(--accent)} .nlinks a:hover{color:var(--ink)} /* ---------- case study v2 (editorial layout, from case-study-reference) ---------- */ .cs-crumb{position:sticky;top:66px;z-index:30;background:rgba(23,20,18,.9);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08);color:#fff} .cs-crumb .in{max-width:1180px;margin:0 auto;padding:9px 24px;font-size:12.5px;color:var(--muted-d)} .cs-crumb a:hover{color:#fff} .cs-crumb b{color:#fff;font-weight:600} .cs-hero{position:relative;min-height:76vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--dark)} .cs-hero.nophoto{min-height:44vh} .cs-hero img.bg{position:absolute;inset:0;width:100%;height:118%;object-fit:cover;opacity:.62;will-change:transform} .cs-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,11,9,.35) 0%,rgba(15,11,9,.15) 40%,rgba(15,11,9,.9) 100%)} .cs-hero .in{position:relative;z-index:2;max-width:1180px;margin:0 auto;width:100%;padding:60px 24px 46px} .cs-pills{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px} .cs-pill{font:600 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:var(--radius);background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.22)} .cs-pill.done{background:var(--accent);border-color:var(--accent)} .cs-pill.ongoing{background:#C4801E;border-color:#C4801E} .cs-hero h1{color:#fff;font-size:clamp(34px,5vw,60px);max-width:18ch;letter-spacing:-.01em} .cs-specbar{display:flex;flex-wrap:wrap;gap:26px 44px;margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.2)} .cs-specbar .k{font:600 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-tint);margin-bottom:6px} .cs-specbar .v{font-family:var(--serif);font-size:19px;color:#fff} .cs-prestige{background:var(--dark-2);color:#fff;padding:60px 0} .cs-prestige .eyebrow{color:var(--accent-tint)} .cs-prestige .eyebrow::before{background:var(--accent-2)} .cs-prestige p.big{font-family:var(--serif);font-size:clamp(22px,2.8vw,32px);line-height:1.3;max-width:30ch;margin:16px 0 0;color:#fff} .cs-prestige .attr{font-size:13.5px;color:var(--muted-d);margin-top:16px} .cs-todo{display:inline-block;background:rgba(212,175,55,.16);color:#E7CC72;border:1px dashed #8A6D1E;border-radius:3px;padding:2px 8px;font:600 11px/1.4 var(--sans);letter-spacing:.04em} .cs-body{padding:76px 0} .cs-grid{display:grid;grid-template-columns:1fr 320px;gap:56px;align-items:start} .cs-lede{font-family:var(--serif);font-size:clamp(19px,2vw,23px);line-height:1.5;color:var(--ink);margin:16px 0 18px} .cs-grid .txt p{color:var(--muted);margin:0 0 16px;max-width:60ch} .cs-chips{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 0} .cs-chip{font:600 11.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep);border:1px solid rgba(152,28,38,.45);border-radius:20px;padding:8px 14px} .cs-rail{position:sticky;top:118px;background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:24px} .cs-rail h4{font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-deep);margin:0 0 12px} .cs-rail .row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid var(--line);font-size:13.5px} .cs-rail .row:first-of-type{border-top:0} .cs-rail .k{color:var(--muted)} .cs-rail .v{color:var(--ink);text-align:end;font-weight:500;max-width:60%} .cs-rail .big{font-family:var(--serif);font-size:28px;color:var(--accent-deep);line-height:1.1} .cs-gallery{background:var(--dark);color:#fff;padding:74px 0} .cs-gallery .wrap{max-width:1380px} .cs-gallery .eyebrow{color:var(--accent-tint)} .cs-gallery .eyebrow::before{background:var(--accent-2)} .cs-gallery h2{color:#fff;font-size:clamp(26px,3.2vw,38px);margin:12px 0 34px} .cs-ph{cursor:zoom-in;overflow:hidden;border-radius:4px;position:relative} .cs-ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .cs-ph:hover img{transform:scale(1.03)} .cs-glead{aspect-ratio:16/8} .cs-grow{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px} .cs-grow.solo{grid-template-columns:1fr} .cs-grow .cs-ph{aspect-ratio:16/10} .cs-grow.solo .cs-ph{aspect-ratio:16/7} .cs-video{margin-top:18px} .cs-video video{width:100%;border-radius:4px;border:1px solid rgba(255,255,255,.12);background:#000} .cs-video .vlabel{font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-d);margin-top:8px} .cs-pull{background:var(--accent);color:#fff;text-align:center;padding:60px 24px} .cs-pull .big{font-family:var(--serif);font-size:clamp(32px,5vw,54px);line-height:1.1} .cs-pull .sub{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-top:12px} .cs-timeline{padding:56px 0;background:var(--bone-2)} .cs-tl{display:flex;align-items:center;justify-content:center;max-width:640px;margin:0 auto} .cs-tl .end{text-align:center} .cs-tl .end .d{font-family:var(--serif);font-size:22px;color:var(--ink)} .cs-tl .end .l{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px} .cs-tl .bar{flex:1;height:2px;background:var(--accent);position:relative;margin:0 18px} .cs-tl .bar span{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--bone-2);padding:0 10px;font:600 12px/1 var(--sans);letter-spacing:.08em;color:var(--accent-deep);white-space:nowrap} .cs-tl .bar::before,.cs-tl .bar::after{content:'';position:absolute;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--accent)} .cs-tl .bar::before{inset-inline-start:-4px} .cs-tl .bar::after{inset-inline-end:-4px} .cs-more{padding:74px 0} .cs-more h2{font-size:clamp(24px,3vw,34px);margin:0 0 30px} .cs-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .cs-mcard{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--paper);display:block} .cs-mcard .im{aspect-ratio:3/2;overflow:hidden;background:var(--dark-2)} .cs-mcard img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .cs-mcard:hover img{transform:scale(1.05)} .cs-mcard .b{padding:16px 18px} .cs-mcard h3{font-size:18px} .cs-mcard .c{font-size:12.5px;color:var(--muted);margin-top:6px} .cs-mcard .val{font-family:var(--serif);color:var(--accent-deep);font-size:17px;margin-top:10px} @media (max-width:900px){.cs-grid{grid-template-columns:1fr}.cs-rail{position:static}.cs-grow{grid-template-columns:1fr}.cs-more-grid{grid-template-columns:1fr}} /* ---------- prestige callout ---------- */ .prestige{display:flex;align-items:flex-start;gap:14px;border:1px solid var(--accent);border-inline-start:4px solid var(--accent);border-radius:var(--radius);background:rgba(152,28,38,.07);padding:20px 24px;margin:34px 0 6px;max-width:860px} .prestige svg{width:22px;height:22px;flex:none;fill:var(--accent-deep);margin-top:3px} .prestige p{font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.9vw,19px);color:var(--ink);line-height:1.5} .on-dark .prestige p,.sec-dark .prestige p{color:#F2EEE8} .on-dark .prestige svg,.sec-dark .prestige svg{fill:var(--accent-tint)} /* ---------- project photo lightbox ---------- */ .proj .ph{cursor:zoom-in} .ph-count{position:absolute;bottom:12px;inset-inline-end:12px;display:flex;align-items:center;gap:7px;background:rgba(23,20,18,.78);color:#fff;font-size:12px;font-weight:600;letter-spacing:.05em;padding:5px 10px;border-radius:var(--radius);pointer-events:none} .ph-count svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:1.8} .lightbox{position:fixed;inset:0;z-index:100;background:rgba(12,10,9,.94);display:none;align-items:center;justify-content:center;padding:24px} .lightbox.open{display:flex} .lightbox figure{max-width:min(1100px,94vw);margin:0} .lightbox figure img{max-width:100%;max-height:76vh;object-fit:contain;margin:0 auto;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);background:#0C0A09} .lightbox figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-top:14px} .lightbox .lb-cap{font-family:var(--serif);font-size:16px;color:#F2EEE8} .lightbox .lb-n{font-size:12.5px;letter-spacing:.12em;color:#B7AEA1;white-space:nowrap} .lb-x,.lb-prev,.lb-next{position:fixed;z-index:101;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);color:#fff;width:46px;height:46px;border-radius:50%;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s;font-family:var(--sans)} .lb-x:hover,.lb-prev:hover,.lb-next:hover{background:var(--accent);border-color:var(--accent)} .lb-x{top:22px;inset-inline-end:22px} .lb-prev{inset-inline-start:18px;top:50%;transform:translateY(-50%)} .lb-next{inset-inline-end:18px;top:50%;transform:translateY(-50%)} .lightbox.single .lb-prev,.lightbox.single .lb-next,.lightbox.single .lb-n{display:none} @media (max-width:640px){.lb-prev{inset-inline-start:8px}.lb-next{inset-inline-end:8px}.lightbox{padding:14px}} /* ---------- certifications ---------- */ .cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:50px} .cert{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px 24px;text-align:center} .cert .big{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--accent-deep)} .cert .sub{font-size:13px;color:var(--muted);margin-top:8px} .cred-line{margin-top:36px;font-size:14.5px;color:var(--muted);border-inline-start:3px solid var(--accent);padding-inline-start:16px;max-width:720px} @media (max-width:920px){.cert-grid{grid-template-columns:1fr 1fr}} @media (max-width:480px){.cert-grid{grid-template-columns:1fr}} /* ---------- CTA band ---------- */ .cta-band{background:var(--dark);color:#fff;text-align:center} .cta-band .wrap{padding-top:clamp(60px,8vw,90px);padding-bottom:clamp(60px,8vw,90px)} .cta-band h2{font-size:clamp(26px,3.6vw,40px)} .cta-band p{color:var(--muted-d);max-width:560px;margin:16px auto 0} .cta-band .cta-row{justify-content:center} /* ---------- contact ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;margin-top:50px;align-items:start} .c-item{padding:18px 0;border-bottom:1px solid var(--line)} .c-item:first-child{border-top:1px solid var(--line)} .c-item .k{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .c-item .v{font-size:18px;margin-top:5px;font-weight:500} .c-item .v a:hover{color:var(--accent-deep)} .c-item .note{font-size:13px;color:var(--muted)} .map{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper)} .map iframe{display:block;width:100%;height:420px;border:0} @media (max-width:880px){.contact-grid{grid-template-columns:1fr}} /* ---------- forms ---------- */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;margin-top:34px} .form-grid .full{grid-column:1/-1} .field label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px} .field label em{font-style:italic;text-transform:none;letter-spacing:0;color:var(--muted);font-weight:400} .field input,.field select,.field textarea{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:13px 14px;font-family:var(--sans);font-size:15px;color:var(--ink);transition:border-color .2s} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)} .field textarea{min-height:120px;resize:vertical} .field input[type="file"]{padding:10px;font-size:13.5px;cursor:pointer} .field input[type="file"]::file-selector-button{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);padding:9px 14px;margin-inline-end:12px;cursor:pointer} .check{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--muted)} .check input{width:16px;height:16px;margin-top:3px;accent-color:var(--accent)} .hidden-field{position:absolute;left:-9999px;opacity:0} .form-note{font-size:13px;color:var(--muted);margin-top:14px} .form-success{display:none;background:var(--paper);border:1px solid var(--line);border-inline-start:3px solid var(--accent);border-radius:var(--radius);padding:30px;margin-top:30px} .form-success h3{font-size:22px} .form-success p{color:var(--muted);margin-top:10px;font-size:14.5px} .form-success.show{display:block} @media (max-width:680px){.form-grid{grid-template-columns:1fr}} /* ---------- quiz (project dossier) ---------- */ .quiz-shell{max-width:820px;margin:0 auto;padding:0 24px} .quiz-progress{display:flex;gap:6px;margin-bottom:40px} .qp-seg{height:3px;flex:1;background:var(--line);border-radius:2px;transition:background .3s} .sec-dark .qp-seg{background:rgba(255,255,255,.15)} .qp-seg.on{background:var(--accent)} .quiz-step{display:none} .quiz-step.active{display:block;animation:qfade .35s ease} @keyframes qfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .quiz-step h2{font-size:clamp(24px,3.2vw,34px)} .quiz-hint{color:var(--muted-d);margin-top:12px;font-size:15px} .sec-dark .quiz-hint{color:var(--muted-d)} .quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px} .quiz-opt{text-align:start;background:var(--dark-2);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);color:#fff;font-size:15.5px;font-weight:500;padding:18px 20px;cursor:pointer;transition:border-color .2s,background .2s} .quiz-opt:hover{border-color:var(--accent-2);background:rgba(152,28,38,.18)} .quiz-opt.sel{border-color:var(--accent);background:rgba(152,28,38,.28)} .quiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:30px;min-height:24px} .quiz-nav button{background:none;border:none;color:var(--muted-d);font-size:14px;cursor:pointer;padding:6px 0} .quiz-nav button:hover{color:#fff} .quiz-fields{display:grid;gap:18px;margin-top:30px} .quiz-fields .field input,.quiz-fields .field select{background:var(--dark-2);border-color:rgba(255,255,255,.16);color:#fff} .quiz-fields .field label{color:var(--muted-d)} .qs-card{background:var(--dark-2);border:1px solid rgba(255,255,255,.1);border-top:2px solid var(--accent);border-radius:var(--radius);padding:38px 34px;margin-top:10px} .qs-card h2 em{color:var(--accent-tint);font-style:italic} .qs-card p{color:rgba(255,255,255,.8);margin-top:14px} .qs-plan{margin-top:22px;display:grid;gap:12px} .qs-plan li{padding-inline-start:26px;position:relative;color:rgba(255,255,255,.85);font-size:15px} .qs-plan li::before{content:'';position:absolute;inset-inline-start:0;top:9px;width:12px;height:2px;background:var(--accent-2)} .quiz-summary{display:none} .quiz-summary.show{display:block} @media (max-width:640px){.quiz-opts{grid-template-columns:1fr}} /* ---------- careers ---------- */ .role-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:50px} .role-grid.cols-3{grid-template-columns:repeat(3,1fr)} @media (max-width:920px){.role-grid.cols-3{grid-template-columns:1fr 1fr}} @media (max-width:640px){.role-grid.cols-3{grid-template-columns:1fr}} .role{background:var(--paper);border:1px solid var(--line);border-top:2px solid var(--accent);border-radius:var(--radius);padding:30px 28px} .role h3{font-size:21px} .role .rmeta{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep);margin-top:6px} .role p{font-size:14.5px;color:var(--muted);margin-top:14px} .role ul{margin-top:14px;display:grid;gap:8px} .role ul li{font-size:14px;color:var(--muted);padding-inline-start:22px;position:relative} .role ul li::before{content:'';position:absolute;inset-inline-start:0;top:9px;width:10px;height:2px;background:var(--accent)} .role .btn{margin-top:22px} @media (max-width:820px){.role-grid{grid-template-columns:1fr}} /* ---------- FAQ ---------- */ .faq-list{max-width:820px;margin-top:44px} .faq-list details{border-bottom:1px solid var(--line);padding:6px 0} .faq-list details:first-child{border-top:1px solid var(--line)} .faq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-family:var(--serif);font-size:clamp(17px,2vw,21px);font-weight:500} .faq-list summary::-webkit-details-marker{display:none} .faq-list summary::after{content:'+';font-family:var(--sans);font-size:22px;color:var(--accent);flex:none;transition:transform .25s} .faq-list details[open] summary::after{transform:rotate(45deg)} .faq-list .a{padding:0 0 22px;color:var(--muted);font-size:15px;max-width:64ch} /* ---------- owner page ---------- */ .owner-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:50px;margin-top:50px;align-items:start} .owner-grid .photo{background:var(--dark);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)} .owner-grid .photo img{width:100%;height:100%;object-fit:cover;opacity:.9} .statement{font-family:var(--serif);font-style:italic;font-size:clamp(22px,3vw,30px);line-height:1.4;color:var(--ink);border-inline-start:3px solid var(--accent);padding-inline-start:24px;max-width:760px;margin:56px 0 0} .firsts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px} .first-card{background:var(--paper);border:1px solid var(--line);border-top:2px solid var(--accent);border-radius:var(--radius);padding:28px 24px} .first-card .fk{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--accent);display:inline-block;padding:4px 9px;border-radius:var(--radius)} .first-card h3{font-size:18px;margin-top:16px} .first-card p{font-size:13.5px;color:var(--muted);margin-top:10px} @media (max-width:880px){.owner-grid{grid-template-columns:1fr}.firsts{grid-template-columns:1fr}} .timeline{margin-top:50px;border-inline-start:2px solid var(--line);padding-inline-start:34px;display:grid;gap:34px;max-width:720px} .tl{position:relative} .tl::before{content:'';position:absolute;inset-inline-start:-41px;top:6px;width:12px;height:12px;background:var(--accent);border-radius:50%} .tl h3{font-size:19px} .tl p{font-size:14.5px;color:var(--muted);margin-top:8px} .tl.pending h3,.tl.pending p{color:var(--muted)} .tl.pending::before{background:var(--line)} /* ---------- footer ---------- */ footer.site{background:var(--dark);color:#fff;padding:clamp(60px,8vw,90px) 0 0} html.theme-dark footer.site{border-top:1px solid rgba(255,255,255,.08)} .f-top{display:grid;grid-template-columns:1.3fr .9fr .9fr .9fr;gap:40px} .f-brand{display:flex;align-items:flex-start;gap:16px} .chip{background:#fff;border-radius:var(--radius);padding:8px;flex:none} .chip img{width:44px;height:44px;object-fit:contain} .f-brand b{display:block;font-family:var(--serif);font-weight:600;font-size:17px;letter-spacing:.05em} .f-brand span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d);margin-top:3px} .f-brand p{font-size:13.5px;color:var(--muted-d);margin-top:14px;max-width:32ch} .f-col .h{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-d);margin-bottom:16px} .f-col a{display:block;font-size:14.5px;padding:5px 0;color:rgba(255,255,255,.85)} .f-col a:hover{color:var(--accent-tint)} .f-col .plain{display:block;font-size:14.5px;padding:5px 0;color:rgba(255,255,255,.85)} .group-strip{border-top:1px solid rgba(255,255,255,.12);margin-top:clamp(44px,6vw,60px);padding:34px 0} .group-strip .h{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-tint)} .group-strip .row{display:flex;flex-wrap:wrap;gap:10px 40px;margin-top:16px;font-size:14px;color:rgba(255,255,255,.8)} .group-strip .row a:hover{color:var(--accent-tint)} .group-strip .row b{color:#fff;font-weight:600} .legal{border-top:1px solid rgba(255,255,255,.12);padding:24px 0 30px;display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between;font-size:12.5px;color:var(--muted-d)} .legal .tg{font-family:var(--serif);font-style:italic;color:var(--accent-tint)} @media (max-width:880px){.f-top{grid-template-columns:1fr;gap:34px}} /* ---------- whatsapp float ---------- */ .wa-float{position:fixed;bottom:26px;inset-inline-end:26px;z-index:60;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.28);transition:transform .2s} .wa-float:hover{transform:scale(1.08)} .wa-float svg{width:30px;height:30px;fill:#fff} /* ---------- Ashur (Canadian affiliate) page override: navy + gold ---------- */ body.ashur-page{ --accent:#D4AF37; --accent-2:#E3C766; --accent-deep:#A8862A; --accent-tint:#EBDBA4; --dark:#070F1C; --dark-2:#0C1626; } html.theme-dark body.ashur-page{ --bone:#070F1C; --bone-2:#0C1626; --paper:#101B2E; --line:#1E2C42; --muted:#93A0B5; --accent-deep:#E3C766; } body.ashur-page .tag-done{background:#0C1626;border:1px solid var(--accent)} body.ashur-page .stats{color:#0C1626} body.ashur-page .stats .lbl{color:rgba(12,22,38,.75)} body.ashur-page .wa-float{background:var(--accent)} body.ashur-page .wa-float svg{fill:#0C1626} /* ---------- rtl ---------- */ [dir="rtl"] body{font-family:'Inter','Segoe UI',Tahoma,sans-serif} [dir="rtl"] .hero h1{max-width:20ch} /* ---------- utilities ---------- */ .mt-40{margin-top:40px} .center{text-align:center} /* ============================================================ LIGHT THEME: cinematic bands become light so the toggle visibly applies everywhere (heroes and stat strip stay brand-dark). ============================================================ */ html.theme-light .sec-dark{background:var(--bone-2);color:var(--ink);border:none} html.theme-light .sec-dark h2{color:var(--ink)} html.theme-light .on-dark .eyebrow{color:var(--accent-deep)} html.theme-light .on-dark .eyebrow::before{background:var(--accent)} html.theme-light .sec-dark .body,html.theme-light .sec-dark p.body{color:var(--muted)} html.theme-light .proj{background:var(--paper);border-color:var(--line)} html.theme-light .proj h3{color:var(--ink)} html.theme-light .proj .meta{color:var(--muted)} html.theme-light .proj .desc{color:var(--ink-2)} html.theme-light .proj .val{color:var(--accent-deep)} html.theme-light .proj .links a{color:var(--accent-deep);border-color:var(--accent)} html.theme-light .proj .links a:hover{color:var(--ink);border-color:var(--ink)} html.theme-light .tag-first{background:var(--accent);color:#fff} html.theme-light .filter-group .fk{color:var(--muted)} html.theme-light .filter-btn{background:var(--paper);border-color:var(--line);color:var(--ink)} html.theme-light .filter-btn:hover{border-color:var(--accent-2);background:rgba(152,28,38,.08)} html.theme-light .filter-btn.on{background:var(--accent);border-color:var(--accent);color:#fff} html.theme-light .car-prev,html.theme-light .car-next{border-color:var(--ink);color:var(--ink)} html.theme-light .car-prev:hover,html.theme-light .car-next:hover{background:var(--accent);border-color:var(--accent);color:#fff} html.theme-light .belt{background:var(--bone-2);border-color:var(--line)} html.theme-light .belt .lbl{color:var(--muted)} html.theme-light .belt-track span{color:var(--ink-2)} html.theme-light .collage{background:var(--bone-2);border-color:var(--line)} html.theme-light .cta-band{background:var(--bone-2);color:var(--ink)} html.theme-light .cta-band h2{color:var(--ink)} html.theme-light .cta-band p{color:var(--muted)} html.theme-light .cta-band .btn-ghost{border-color:var(--ink);color:var(--ink)} html.theme-light .cta-band .btn-ghost:hover{background:var(--ink);color:var(--bone)} html.theme-light .cta-band .px-mini{opacity:.45} html.theme-light .prestige p{color:var(--ink)} html.theme-light .prestige svg{fill:var(--accent-deep)} html.theme-light .cs-prestige{background:var(--paper);color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} html.theme-light .cs-prestige p.big{color:var(--ink)} html.theme-light .cs-prestige .eyebrow{color:var(--accent-deep)} html.theme-light .cs-prestige .eyebrow::before{background:var(--accent)} html.theme-light .cs-prestige .attr{color:var(--muted)} html.theme-light .cs-todo{background:rgba(138,109,30,.12);color:#8A6D1E;border-color:#8A6D1E} html.theme-light .cs-gallery{background:var(--bone-2);color:var(--ink)} html.theme-light .cs-gallery h2{color:var(--ink)} html.theme-light .cs-gallery .eyebrow{color:var(--accent-deep)} html.theme-light .cs-gallery .eyebrow::before{background:var(--accent)} html.theme-light .cs-gallery .cs-ph{border:1px solid var(--line)} html.theme-light .cs-video video{border-color:var(--line)} html.theme-light .cs-video .vlabel{color:var(--muted)} html.theme-light .cs-crumb{background:rgba(247,245,241,.92);border-bottom:1px solid var(--line);color:var(--muted)} html.theme-light .cs-crumb b{color:var(--ink)} html.theme-light .cs-crumb a:hover{color:var(--ink)} html.theme-light .quiz-opt{background:var(--paper);border-color:var(--line);color:var(--ink)} html.theme-light .quiz-opt:hover{border-color:var(--accent-2);background:rgba(152,28,38,.08)} html.theme-light .quiz-opt.sel{border-color:var(--accent);background:rgba(152,28,38,.14)} html.theme-light .quiz-hint,html.theme-light .sec-dark .quiz-hint{color:var(--muted)} html.theme-light .quiz-nav button{color:var(--muted)} html.theme-light .quiz-nav button:hover{color:var(--ink)} html.theme-light .sec-dark .qp-seg{background:var(--line)} html.theme-light .qp-seg.on{background:var(--accent)} html.theme-light .quiz-fields .field input,html.theme-light .quiz-fields .field select{background:var(--paper);border-color:var(--line);color:var(--ink)} html.theme-light .quiz-fields .field label{color:var(--muted)} html.theme-light .qs-card{background:var(--paper);border-color:var(--line)} html.theme-light .qs-card p,html.theme-light .qs-plan li{color:var(--ink-2)} html.theme-light footer.site{background:var(--bone-2);color:var(--ink);border-top:1px solid var(--line)} html.theme-light footer.site .chip{background:#fff;border:1px solid var(--line)} html.theme-light .f-brand span,html.theme-light .f-brand p{color:var(--muted)} html.theme-light .f-col .h{color:var(--muted)} html.theme-light .f-col a,html.theme-light .f-col .plain{color:var(--ink-2)} html.theme-light .f-col a:hover{color:var(--accent-deep)} html.theme-light .group-strip{border-color:var(--line)} html.theme-light .group-strip .h{color:var(--accent-deep)} html.theme-light .group-strip .row{color:var(--ink-2)} html.theme-light .group-strip .row b{color:var(--ink)} html.theme-light .group-strip .row a:hover{color:var(--accent-deep)} html.theme-light .legal{border-color:var(--line);color:var(--muted)} html.theme-light .legal .tg{color:var(--accent-deep)} html.theme-light .proj-grid .text-card .tag-status.tag-done{background:var(--accent)} /* hero text flips to ink when its pixel scene is in day mode */ html.theme-light .hero:has(.px-scene),.hero-day{color:#1E1C1B;background:#BFD9EA} html.theme-light .hero:has(.px-scene) .shade,.hero-day .shade{background:linear-gradient(to right,rgba(247,245,241,.9) 0%,rgba(247,245,241,.5) 42%,rgba(247,245,241,.05) 100%)} [dir="rtl"] html.theme-light .hero:has(.px-scene) .shade,[dir="rtl"] .hero-day .shade{background:linear-gradient(to left,rgba(247,245,241,.9) 0%,rgba(247,245,241,.5) 42%,rgba(247,245,241,.05) 100%)} html.theme-light .hero:has(.px-scene) h1 em,.hero-day h1 em{color:#6E141B} html.theme-light .hero:has(.px-scene) .sub,.hero-day .sub{color:#6B6459} html.theme-light .hero:has(.px-scene) .tag,.hero-day .tag{color:#6E141B} html.theme-light .hero:has(.px-scene) .eyebrow,.hero-day .eyebrow{color:#6E141B} html.theme-light .hero:has(.px-scene) .eyebrow::before,.hero-day .eyebrow::before{background:var(--accent)} html.theme-light .hero:has(.px-scene) .btn-ghost,.hero-day .btn-ghost{border-color:#1E1C1B;color:#1E1C1B} html.theme-light .hero:has(.px-scene) .btn-ghost:hover,.hero-day .btn-ghost:hover{background:#1E1C1B;color:#F7F5F1} html.theme-light .hero .px-replay{background:rgba(255,255,255,.8);border-color:var(--line);color:var(--ink)}