/* ===================================================================== Ling Jin Works — shared design system China Sourcing Consultant · precision machined, die-cast & extruded parts ===================================================================== */ /* Self-hosted fonts — inlined to remove the old @import latency (GDPR-safe, no Google CDN). Preloaded from each page so they download in parallel with the HTML and the swap flash disappears. */ @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2');} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500.woff2') format('woff2');} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600.woff2') format('woff2');} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-700.woff2') format('woff2');} @font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/inter-800.woff2') format('woff2');} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibmplexmono-500.woff2') format('woff2');} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibmplexmono-600.woff2') format('woff2');} :root{ --ink:#1b2129; --ink2:#232b35; --slate:#3e4c5e; --steel:#4d5c6e; --mist:#e8edf3; --paper:#f7f9fb; --white:#fff; --line:#dde4ec; --line2:#cbd5e1; --accent:#f97316; --accent-h:#ea6a0d; --accent-soft:rgba(249,115,22,.10); --grid:rgba(27,33,41,.033); --ok:#1f9d6b; --ok-soft:rgba(31,157,107,.10); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{overflow-x:hidden;font-family:'Inter','Helvetica Neue',Arial,'PingFang SC','Microsoft YaHei',sans-serif;color:var(--ink);background:var(--paper);line-height:1.7;-webkit-font-smoothing:antialiased} ::selection{background:rgba(249,115,22,.25)} .mono{font-family:'IBM Plex Mono',Consolas,monospace} .wrap{max-width:1120px;margin:0 auto;padding:0 28px} section{position:relative} /* ============ NAV ============ */ header.nav{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} .nav-in{display:flex;align-items:center;gap:34px;height:66px} .logo{display:flex;align-items:center;gap:12px;text-decoration:none} .logo .mark{flex-shrink:0;display:block} .logo .t{display:flex;flex-direction:column;gap:4px} .logo .n{font-weight:800;font-size:16.5px;color:var(--ink);letter-spacing:-.015em;line-height:1;display:block} .logo .rule{display:block;width:54px;height:1.5px;background:var(--line2)} .logo .w{display:block;font-weight:600;font-size:9px;color:var(--steel);letter-spacing:.34em;line-height:1} nav.links{display:flex;gap:26px;margin-left:8px} nav.links a{font-size:13.5px;font-weight:500;color:var(--slate);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent} nav.links a:hover,nav.links a.active{color:var(--ink);border-bottom-color:var(--accent)} .nav-cta{margin-left:auto;background:var(--accent);color:#fff;font-size:13px;font-weight:700;padding:10px 20px;border-radius:4px;text-decoration:none;transition:.15s} .nav-cta:hover{background:var(--accent-h)} @media(max-width:920px){.nav-in{height:auto;flex-wrap:wrap;gap:10px 16px;padding:9px 0}nav.links{order:3;width:100%;gap:12px 18px;margin-left:0;flex-wrap:wrap}nav.links a{font-size:13px;padding:2px 0}} /* ============ BANNER ============ */ .banner{min-height:600px;max-height:820px;height:auto;display:flex;align-items:center;color:#e6ebf2;overflow:hidden} .banner .bg{position:absolute;inset:0;z-index:0} .banner .bg img{width:100%;height:100%;object-fit:cover} .banner .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(20,26,34,.90) 0%,rgba(20,26,34,.78) 45%,rgba(20,26,34,.52) 100%)} .banner > .wrap{position:relative;z-index:2;width:100%;padding-top:80px;padding-bottom:150px} .eyebrow{font-family:'IBM Plex Mono',Consolas,monospace;font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--accent);margin-bottom:20px} .banner h1{font-size:clamp(34px,4.6vw,52px);font-weight:800;line-height:1.12;letter-spacing:-.025em;color:#fff;max-width:660px} .banner h1 .u{box-shadow:inset 0 -12px 0 rgba(249,115,22,.28)} .banner .sub{font-size:17px;color:#d7e0ea;margin-top:22px;max-width:580px;line-height:1.75} .banner .sub b{color:#fff;font-weight:700} .btn-row{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap} .btn{font-size:14.5px;font-weight:700;padding:14px 30px;border-radius:4px;text-decoration:none;letter-spacing:.01em;transition:.15s} .btn.primary{background:var(--accent);color:#fff;box-shadow:0 6px 20px rgba(249,115,22,.32)} .btn.primary:hover{background:var(--accent-h);transform:translateY(-1px)} .btn.ghost{border:1.5px solid #5b6b7e;color:#e6ebf2} .btn.ghost:hover{border-color:#8b99ab;background:rgba(255,255,255,.05)} .btrust{position:absolute;left:0;right:0;bottom:0;z-index:3;background:#131922;border-top:3px solid var(--accent)} .btrust-in{display:flex;align-items:stretch} .btrust-in .t{flex:1;padding:15px 16px;text-align:center;border-right:1px solid rgba(255,255,255,.08)} .btrust-in .t:last-child{border-right:none} .btrust-in .v{font-family:'IBM Plex Mono',Consolas,monospace;font-size:15px;font-weight:600;color:#fff;letter-spacing:.02em} .btrust-in .v em{color:var(--accent);font-style:normal} .btrust-in .k{font-size:11px;color:#9aa8ba;margin-top:3px;letter-spacing:.04em} @media(max-width:880px){.banner{height:auto;min-height:0;max-height:none;flex-direction:column;align-items:stretch}.banner > .wrap{padding-top:56px;padding-bottom:56px}.btrust{position:static;background:#141a22}.btrust-in{flex-wrap:wrap}.btrust-in .t{flex:1 1 50%}.btrust-in .t{border-bottom:1px solid rgba(255,255,255,.06)}} /* ============ SECTION HEAD ============ */ .sec{padding:58px 0} .sec.alt{background:var(--paper)} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px;flex-wrap:wrap;position:relative} .sec-head h2{font-size:clamp(25px,3vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.2} .sec-head .lead{font-size:15px;color:var(--steel);max-width:440px;padding-bottom:4px} .kicker{font-family:'IBM Plex Mono',Consolas,monospace;font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--accent);display:block;margin-bottom:10px} /* ============ CARD GRIDS ============ */ .cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .cards4 .card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px 22px;transition:.15s} .cards4 .card:hover{border-color:var(--line2);box-shadow:0 8px 24px rgba(27,33,41,.06);transform:translateY(-2px)} .cards4 .card .ic{width:38px;height:38px;border:1.5px solid var(--slate);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:16px;color:var(--slate)} .cards4 .card h3{font-size:15px;font-weight:700;margin-bottom:8px;letter-spacing:-.01em} .cards4 .card p{font-size:13px;color:var(--steel);line-height:1.65} @media(max-width:980px){.cards4{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.cards4{grid-template-columns:1fr}} .scen-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px} .scen-card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:18px 16px 15px;transition:.18s;position:relative} .scen-card::before{content:"";position:absolute;top:-1px;left:-1px;width:24px;height:24px;border-top:3px solid var(--accent);border-left:3px solid var(--accent);transition:.25s} .scen-card:hover::before{width:100%;height:4px;border-left-width:0} .scen-card:hover{border-color:var(--line2);box-shadow:0 8px 24px rgba(27,33,41,.06);transform:translateY(-2px)} .scen-card .st{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin-bottom:9px;display:flex;align-items:center;gap:10px} .scen-card .fix{font-size:14.5px;line-height:1.65;color:var(--ink);margin:0} .scen-card .fix b{color:var(--accent)} @media(max-width:880px){.scen-cards{grid-template-columns:1fr}} /* ============ WHY LIST (about) ============ */ .why-list{display:grid;gap:14px;margin:22px 0 8px} .why-list .w{display:flex;gap:14px;align-items:flex-start} .why-list .w .m{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;margin-top:2px} .why-list .w h4{font-size:14.5px;font-weight:700} .why-list .w p{font-size:13.5px;color:var(--slate);line-height:1.65} /* ============ ABOUT GRID ============ */ .about-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center} .about-grid .ph{order:2} .about-grid .txt{order:1} .about-grid .ph{border-radius:10px;overflow:hidden;border:1px solid var(--line)} .about-grid .ph img{width:100%;aspect-ratio:1/1.05;object-fit:cover;display:block} .about-grid h2{font-size:clamp(25px,3vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.25;margin-bottom:14px} .about-grid .bio{font-size:15.5px;color:#3d4a58;line-height:1.8;margin-bottom:22px} .about-grid .bio b{color:var(--ink);font-weight:600} .cred-row{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 4px} .cred{font-family:'IBM Plex Mono',Consolas,monospace;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--steel);border:1px solid var(--line2);border-radius:999px;padding:6px 13px;background:#fff} .cred b{color:var(--accent)} @media(max-width:880px){.about-grid{grid-template-columns:1fr;gap:34px}.about-grid .ph{max-width:420px}} /* ============ HEXBAND (capability showcase) ============ */ .hexband{position:relative;margin:0;padding:44px 0;background:linear-gradient(168deg,#171d27 0%,#0f141b 78%,#121821 100%);overflow:hidden} .hexgrid{position:relative;width:100%;max-width:860px;margin:36px auto 0;aspect-ratio:1000/866} .hex{position:absolute;width:40%;aspect-ratio:1/0.866;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);transform:scale(.965);transition:transform .25s ease,filter .25s ease;filter:drop-shadow(0 8px 18px rgba(27,33,41,.14))} .hex:hover{transform:scale(1);z-index:5;filter:drop-shadow(0 16px 34px rgba(27,33,41,.30))} .hex .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)} .hex:hover .bg{transform:scale(1.07)} .hex::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,19,25,.08) 24%,rgba(15,19,25,.50) 60%,rgba(15,19,25,.86) 100%);transition:.3s} .hex:hover::after{background:linear-gradient(180deg,rgba(15,19,25,.26) 12%,rgba(15,19,25,.64) 48%,rgba(15,19,25,.94) 100%)} .hex .info{position:absolute;left:0;right:0;bottom:12%;z-index:2;text-align:center;padding:0 14%} .hex .cat{display:block;font-family:'IBM Plex Mono',Consolas,monospace;font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--accent);margin-bottom:4px} .hex h3{font-size:17.5px;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.25} .hex .more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .38s ease,opacity .3s ease} .hex:hover .more{grid-template-rows:1fr;opacity:1} .hex .more>div{overflow:hidden} .hex .desc{font-size:13px;line-height:1.55;color:#e2e9f1;margin:8px 0} .hex .spec{font-family:'IBM Plex Mono',Consolas,monospace;font-size:10px;font-weight:600;letter-spacing:.09em;color:var(--accent)} .hex.h1{left:0;top:0}.hex.h2{left:30%;top:20%}.hex.h3{left:60%;top:0} .hex.h4{left:0;top:40%}.hex.h5{left:30%;top:60%}.hex.h6{left:60%;top:40%} @media(max-width:720px){ .hexgrid{aspect-ratio:1.75/3.031;max-width:430px} .hex{width:57.2%} .hex.h1{left:0;top:0}.hex.h2{left:42.8%;top:14.3%}.hex.h3{left:0;top:28.6%} .hex.h4{left:42.8%;top:42.9%}.hex.h5{left:0;top:57.2%}.hex.h6{left:42.8%;top:71.5%} .hex{transform:scale(.97)} .hex h3{font-size:14px} .hex .desc{font-size:10.5px;line-height:1.48;margin:4px 0} .hex .spec{display:none} .hex .cat{font-size:10px;margin-bottom:2px} .hex .info{bottom:14%;padding:0 9%} .hex .more{grid-template-rows:1fr;opacity:1} } /* ============ HOME · DARK HEXBAND (factory resources) ============ */ .hexband{margin:0} .hexband::before{content:"";position:absolute;top:-110px;right:-70px;width:400px;height:346px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86.6'%3E%3Cpolygon points='25,1 75,1 99,43.3 75,85.6 25,85.6 1,43.3' fill='none' stroke='%23ffffff' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center/contain;opacity:.055;pointer-events:none} .hexband::after{content:"";position:absolute;bottom:-90px;left:-60px;width:300px;height:260px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86.6'%3E%3Cpolygon points='25,1 75,1 99,43.3 75,85.6 25,85.6 1,43.3' fill='none' stroke='%23f97316' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center/contain;opacity:.075;pointer-events:none} .band-title{font-size:clamp(24px,3.1vw,34px);font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.22} .band-lead{font-size:15.5px;line-height:1.78;color:#a7b4c4;margin-top:14px} .hexband .hexgrid{margin-top:48px} .hexband .hex{filter:drop-shadow(0 12px 26px rgba(0,0,0,.5))} .hexband .hex:hover{filter:drop-shadow(0 18px 38px rgba(0,0,0,.62))} .hexband .hex::before{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,rgba(255,255,255,.09),transparent 20%);pointer-events:none;transition:.3s} .hexband .hex:hover::before{background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 24%)} @media(max-width:720px){.hexband{padding:46px 0 42px}.band-lead{font-size:14.5px}.hexband .hexgrid{margin-top:34px}} /* ============ VALUE LADDER ============ */ .ladder{display:grid;gap:10px;margin-top:8px} .ladder .r{display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-left:4px solid var(--line2);border-radius:8px;padding:16px 20px;transition:.15s} .ladder .r:hover{box-shadow:0 6px 18px rgba(27,33,41,.05);transform:translateX(2px)} .ladder .r.l5{border-left-color:var(--accent)} .ladder .r.l4{border-left-color:#e0a458} .ladder .lv{font-family:'IBM Plex Mono',Consolas,monospace;font-weight:700;font-size:13px;color:var(--steel)} .ladder .r.l5 .lv{color:var(--accent)} .ladder h4{font-size:15px;font-weight:700;margin-bottom:3px} .ladder p{font-size:13.5px;color:var(--slate);line-height:1.6} .ladder .tag{font-family:'IBM Plex Mono',Consolas,monospace;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--accent);margin-left:8px} /* ============ CLIENT GRID ============ */ .client-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px} .client-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 20px;transition:.15s} .client-card:hover{border-color:var(--line2);box-shadow:0 8px 24px rgba(27,33,41,.06);transform:translateY(-2px)} .client-card .ct{font-size:15px;font-weight:700;margin-bottom:6px;letter-spacing:-.01em} .client-card .cb{font-size:13.5px;color:var(--slate);line-height:1.65} .client-card .cw{font-size:12.5px;color:var(--ok);margin-top:10px;line-height:1.55} .client-card .cw::before{content:"✓ ";font-weight:800} @media(max-width:880px){.client-grid{grid-template-columns:1fr}} /* ============ DOMAIN CARDS (capabilities) ============ */ .dom-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:8px} .dom{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 24px;transition:.15s;position:relative;overflow:hidden} .dom:hover{border-color:var(--line2);box-shadow:0 10px 30px rgba(27,33,41,.07);transform:translateY(-2px)} .dom .dh{display:flex;align-items:center;gap:14px;margin-bottom:14px} .dom .di{width:44px;height:44px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0} .dom h3{font-size:18px;font-weight:800;letter-spacing:-.01em} .dom .dt{font-family:'IBM Plex Mono',Consolas,monospace;font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--steel);margin-top:2px} .dom p{font-size:14px;color:var(--slate);line-height:1.7;margin-bottom:14px} .dom ul{list-style:none;display:grid;gap:7px} .dom ul li{font-size:13px;color:var(--ink);line-height:1.55;padding-left:20px;position:relative} .dom ul li::before{content:"▹";position:absolute;left:0;color:var(--accent);font-weight:700} .dom.tech{background:linear-gradient(160deg,#fbfcfe,#f3f6fa);border-color:var(--line2)} .dom.tech .di{background:rgba(31,157,107,.12);color:var(--ok)} .dom.tech ul li::before{content:"◈";color:var(--ok)} @media(max-width:760px){.dom-grid{grid-template-columns:1fr}} /* ============ GATEKEEPING CHECKLIST ============ */ .gate{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:10px} .gate .g{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px 18px} .gate .g .n{flex-shrink:0;width:30px;height:30px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',Consolas,monospace;font-size:13px;font-weight:700} .gate .g h4{font-size:14.5px;font-weight:700;margin-bottom:4px} .gate .g p{font-size:13px;color:var(--slate);line-height:1.6} @media(max-width:760px){.gate{grid-template-columns:1fr}} /* ============ DELIVERY TABLE ============ */ .dtable{width:100%;border-collapse:collapse;margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden} .dtable th{background:var(--ink);color:#fff;font-size:12.5px;font-weight:700;text-align:left;padding:13px 16px;letter-spacing:.02em} .dtable td{padding:13px 16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--slate);line-height:1.6;vertical-align:top} .dtable td:first-child{font-weight:700;color:var(--ink);width:24%} .dtable tr:nth-child(even) td{background:var(--paper)} .dtable .ok{color:var(--ok);font-weight:700} /* ============ TIMELINE (how we work) ============ */ .timeline{display:grid;gap:0;margin-top:14px;position:relative} .tl{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:22px 0;border-top:1px solid var(--line)} .tl:first-child{border-top:none} .tl .ph{font-family:'IBM Plex Mono',Consolas,monospace;font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.04em;padding-top:2px} .tl .ph span{display:block;font-size:10px;color:var(--steel);font-weight:600;letter-spacing:.08em;margin-top:4px} .tl h4{font-size:16px;font-weight:700;margin-bottom:6px;letter-spacing:-.01em} .tl p{font-size:14px;color:var(--slate);line-height:1.7} .tl p b{color:var(--ink)} @media(max-width:680px){.tl{grid-template-columns:1fr;gap:6px}.tl .ph{margin-bottom:2px}} /* ============ RESPONSIBILITY GRID ============ */ .resp{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:10px} .resp .c{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 20px} .resp .c h4{font-size:15px;font-weight:800;margin-bottom:10px;letter-spacing:-.01em} .resp .c.yes h4{color:var(--ok)} .resp .c.no h4{color:var(--steel)} .resp .c ul{list-style:none;display:grid;gap:8px} .resp .c li{font-size:13px;color:var(--slate);line-height:1.6;padding-left:20px;position:relative} .resp .c.yes li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800} .resp .c.no li::before{content:"✕";position:absolute;left:0;color:#b4bdc8;font-weight:800} @media(max-width:820px){.resp{grid-template-columns:1fr}} /* ============ CASES ============ */ .cases{background:var(--paper)} .case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .case-grid .c{background:#fff;border:1px solid var(--line);border-radius:10px;padding:0;overflow:hidden;display:flex;flex-direction:column;transition:.15s} .case-grid .c:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(27,33,41,.10)} .c .ph{aspect-ratio:3/2;overflow:hidden;border-bottom:1px solid var(--line)} .c .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease} .c:hover .ph img{transform:scale(1.045)} .c .cb{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1} .case-grid .ind{font-family:'IBM Plex Mono',Consolas,monospace;font-size:10px;color:var(--steel);letter-spacing:.12em;margin-bottom:12px;display:block} .case-grid h3{font-size:16px;font-weight:700;line-height:1.4;letter-spacing:-.01em;margin-bottom:10px} .case-grid .prob{font-size:14px;color:var(--slate);line-height:1.7;flex:1} .case-grid .num{font-family:'IBM Plex Mono',Consolas,monospace;font-size:34px;font-weight:600;color:var(--ink);letter-spacing:-.02em;margin-top:18px;line-height:1} .case-grid .num em{color:var(--accent);font-style:normal} .case-grid .nl{font-size:12px;color:var(--steel);margin-top:5px} @media(max-width:880px){.case-grid{grid-template-columns:1fr}} /* ============ FAQ ============ */ .faq-list{max-width:1064px;counter-reset:q} .faq-list details{border:1px solid var(--line);border-radius:10px;margin-bottom:12px;background:#fff;overflow:hidden} .faq-list details[open]{border-color:var(--line2);box-shadow:0 6px 18px rgba(27,33,41,.05)} .faq-list summary{cursor:pointer;list-style:none;padding:18px 56px 18px 22px;font-size:15px;font-weight:600;position:relative;user-select:none} .faq-list summary::-webkit-details-marker{display:none} .faq-list summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:20px;font-weight:600;color:var(--accent);transition:.15s} .faq-list details[open] summary::after{transform:translateY(-50%) rotate(45deg)} .faq-list details p{padding:0 22px 20px;font-size:14.5px;color:var(--slate);line-height:1.8} .faq-list details p b{color:var(--ink)} /* ============ CTA STRIP ============ */ .ctastrip{background:var(--ink);color:#fff;border-top:3px solid var(--accent)} .ctastrip .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;padding-top:34px;padding-bottom:34px;flex-wrap:wrap} .ctastrip h2{font-size:clamp(19px,2.4vw,24px);font-weight:800;letter-spacing:-.015em} .ctastrip .free-tag{display:inline-block;margin-left:12px;padding:4px 14px;border-radius:999px;background:var(--accent);color:#fff;font-size:13px;font-weight:800;letter-spacing:.02em;vertical-align:3px;white-space:nowrap} .ctastrip p{font-size:13.5px;color:#9dabbf;margin-top:4px} .faq-related{background:#f5f7fa;border-top:1px solid #e6ebf1;border-bottom:1px solid #e6ebf1} .faq-related .wrap{padding-top:24px;padding-bottom:24px} .faq-related .label{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8a98ab;margin:0 0 8px} .faq-related a{color:#1b2129;font-weight:700;text-decoration:none;margin-right:24px;white-space:nowrap} .faq-related a:hover{color:var(--accent)} /* ============ FOOTER ============ */ footer{background:#141a22;color:#66768a;padding:44px 0;border-top:3px solid var(--accent)} .foot-in{display:flex;align-items:center;gap:30px;flex-wrap:wrap} .foot-in .f-logo{display:flex;align-items:center;gap:10px} .foot-in .f-logo .n{color:#c3ceda;font-weight:700;font-size:14px} .foot-in .f-logo .n .w{color:#66768a;font-weight:600} .foot-in .f-logo .d{font-family:'IBM Plex Mono',Consolas,monospace;font-size:9.5px;letter-spacing:.08em} .foot-links{display:flex;gap:20px;flex-wrap:wrap} .foot-links a{color:#66768a;font-size:12.5px;text-decoration:none} .foot-links a:hover{color:#c3ceda} .foot-copy{margin-left:auto;font-size:12px} @media(max-width:880px){.foot-copy{margin-left:0}} /* ============ MOBILE STICKY CTA ============ */ .mcta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:950;background:rgba(20,26,34,.97);backdrop-filter:blur(8px);padding:10px 16px;border-top:1px solid #2b3542} .mcta a{display:block;text-align:center;background:var(--accent);color:#fff;font-weight:700;font-size:14.5px;padding:12px;border-radius:7px;text-decoration:none} @media(max-width:640px){.mcta{display:block}body{padding-bottom:62px}} /* ============ SUB-PAGE HERO (ink + orange dual-color) ============ */ .pagehero{position:relative;background:radial-gradient(125% 150% at 82% -15%,#222c3f 0%,#141a22 52%,#0f141b 100%);color:#e6ebf2;padding:78px 0 64px;overflow:hidden} .pagehero .hexwm{position:absolute;right:30px;bottom:-26px;width:260px;height:auto;opacity:.10;pointer-events:none} .pagehero .wrap{position:relative;z-index:2} .pagehero .eyebrow{color:var(--accent)} .pagehero h1{font-size:clamp(30px,4vw,46px);font-weight:800;letter-spacing:-.025em;color:#fff;line-height:1.12;max-width:780px;margin-top:14px} .pagehero p{font-size:16px;color:#aebccd;margin-top:16px;max-width:640px;line-height:1.75} .pagehero .crumb{font-family:'IBM Plex Mono',Consolas,monospace;font-size:11px;letter-spacing:.14em;color:#7e8ca0} .pagehero .crumb a{color:#9dabbf;text-decoration:none} .pagehero .crumb a:hover{color:var(--accent)} /* ============ CASE ROWS (alternating) ============ */ .case-row{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:22px;background:#fff;transition:.15s} .case-row:hover{box-shadow:0 14px 34px rgba(27,33,41,.09)} .case-row .media{position:relative;min-height:310px} .case-row .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .case-row .media .tag{position:absolute;left:16px;top:16px;font-family:'IBM Plex Mono',Consolas,monospace;font-size:10px;letter-spacing:.12em;color:#fff;background:rgba(20,26,34,.66);padding:6px 12px;border-radius:999px;backdrop-filter:blur(4px)} .case-row .body{padding:34px 34px;display:flex;flex-direction:column} .case-row .ind{font-family:'IBM Plex Mono',Consolas,monospace;font-size:11px;letter-spacing:.12em;color:var(--accent);font-weight:600} .case-row h2{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:10px 0 12px;line-height:1.28} .case-row .prob{font-size:14.5px;color:var(--slate);line-height:1.78} .case-row .metric{display:flex;align-items:baseline;gap:14px;padding:16px 0 2px;margin-top:auto;border-top:1px solid var(--line)} .case-row .metric .big{font-family:'IBM Plex Mono',Consolas,monospace;font-size:32px;font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1} .case-row .metric .big em{color:var(--accent);font-style:normal} .case-row .metric .lbl{font-size:12.5px;color:var(--steel);max-width:200px;line-height:1.5} .case-row.rev .media{order:2} @media(max-width:820px){.case-row{grid-template-columns:1fr}.case-row .media{min-height:220px}.case-row.rev .media{order:0}.case-row .body{padding:26px 24px}} /* ============ METHOD STRIP ============ */ .method{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:10px} .method .m{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 20px;position:relative;overflow:hidden} .method .m::after{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--accent),transparent)} .method .m .n{font-family:'IBM Plex Mono',Consolas,monospace;font-size:13px;font-weight:700;color:var(--accent);margin-bottom:10px} .method .m h4{font-size:15px;font-weight:800;margin-bottom:6px;letter-spacing:-.01em} .method .m p{font-size:13px;color:var(--slate);line-height:1.62} @media(max-width:880px){.method{grid-template-columns:1fr 1fr}} @media(max-width:560px){.method{grid-template-columns:1fr}} /* ============ FAQ CATEGORIES ============ */ .faq-cat{margin-top:34px} .faq-cat .ch{font-family:'IBM Plex Mono',Consolas,monospace;font-size:12px;letter-spacing:.12em;color:var(--accent);font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:11px} .faq-cat .ch::before{content:"";width:24px;height:2px;background:var(--accent)} /* ============ CONTACT ============ */ .contact-2col{display:grid;grid-template-columns:0.82fr 1.18fr;gap:28px;align-items:start;margin-top:8px} .contact-info{display:grid;gap:16px} .ccard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 22px} .ccard .ic{width:42px;height:42px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:14px} .ccard h4{font-size:16px;font-weight:800;margin-bottom:7px;letter-spacing:-.01em} .ccard p{font-size:13.5px;color:var(--slate);line-height:1.72} .ccard a{color:var(--ink);font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--accent);padding-bottom:1px} .ccard a:hover{color:var(--accent)} .cform{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 26px} .cform .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .cform label{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin:0 0 7px;letter-spacing:.02em} .cform input,.cform textarea,.cform select{width:100%;border:1px solid var(--line2);border-radius:8px;padding:12px 13px;font-size:14px;font-family:inherit;color:var(--ink);background:#fbfcfe;margin-bottom:16px;transition:.15s} .cform input:focus,.cform textarea:focus,.cform select:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px var(--accent-soft)} .cform textarea{resize:vertical;min-height:118px} .cform .btn.primary{width:100%;border:none;cursor:pointer;margin-top:2px} .cform .hint{font-size:12px;color:var(--steel);margin-top:-6px;margin-bottom:14px} .cform .consent{display:flex;align-items:flex-start;gap:10px;font-size:12px;font-weight:500;color:var(--steel);line-height:1.5;margin:2px 0 14px} .cform .consent input{width:auto;margin:2px 0 0;accent-color:var(--accent)} .cform .consent a{color:var(--accent);text-decoration:underline} .cform .form-status{font-size:13px;font-weight:600;padding:11px 14px;border-radius:8px;margin-top:4px;background:var(--ok-soft);color:var(--ok)} .cform .form-status[hidden]{display:none} /* mailto contact panel (form removed — direct email) */ .contact-mail{display:flex;flex-direction:column} .contact-mail .cm-title{font-size:19px;font-weight:800;letter-spacing:-.01em;margin-bottom:10px} .contact-mail .cm-sub{font-size:13.5px;color:var(--slate);line-height:1.7;margin-bottom:18px} .contact-mail .cm-sub b{color:var(--ink)} .contact-mail .cm-btn{width:100%;text-align:center;margin-top:2px} .contact-mail .cm-note{font-size:12px;color:var(--steel);margin-top:14px;text-align:center} .legal{max-width:840px;margin:0 auto} .legal h2{font-size:21px;line-height:1.3;margin:34px 0 10px;letter-spacing:-.01em} .legal h2:first-child{margin-top:0} .legal p{margin:0 0 12px;color:var(--ink2);font-size:15px} .legal ul{margin:0 0 14px 20px;color:var(--ink2);font-size:15px} .legal li{margin:5px 0} .legal .updated{font-size:13px;color:var(--steel);margin-bottom:26px} .legal strong{color:var(--ink)} @media(max-width:820px){.contact-2col{grid-template-columns:1fr}.cform .row2{grid-template-columns:1fr}} /* ============ KPI band ============ */ .kpiband{background:var(--ink);color:#fff;border-top:3px solid var(--accent);border-bottom:3px solid var(--accent)} .kpiband .wrap{display:flex;flex-wrap:wrap;gap:14px;padding:30px 28px} .kpiband .k{flex:1;min-width:150px;text-align:center;padding:6px 10px} .kpiband .v{font-family:'IBM Plex Mono',Consolas,monospace;font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1} .kpiband .v em{color:var(--accent);font-style:normal} .kpiband .l{font-size:12px;color:#9dabbf;margin-top:8px;letter-spacing:.03em} .foot-more{font-size:11.5px;color:#5b6b7e;margin-top:12px;letter-spacing:.02em} .foot-more b{color:#7e8ca0;font-weight:600;margin-right:6px} .foot-more a{color:#66768a;text-decoration:none} .foot-more a:hover{color:#c3ceda} /* ============ HOME — COHESION (dark banner → light body) ============ */ /* one continuous light canvas so the body reads as a single surface */ .sec{background:transparent} .sec.alt{background:transparent} /* bottom-right "More" link back to the standalone page */ .btn-more{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;color:var(--ink);background:#fff;border:1.5px solid var(--line2);border-radius:999px;padding:12px 24px;text-decoration:none;transition:.18s ease;letter-spacing:.01em} .btn-more::after{content:"→";font-weight:700;transition:transform .18s ease} .btn-more:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);box-shadow:0 8px 20px rgba(249,115,22,.14)} .btn-more:hover::after{transform:translateX(3px)} /* ============ CASES — INTERACTIVE CARD STACK (home) ============ */ /* --slot is a SIGNED slot index written by JS: 0 = centre = the front card, +1/+2 = first and second card to the right, -1/-2 = to the left. The slot offset is applied to `left`, expressed as a share of the stage, so the five cards always span the panel frame exactly: card -2's outer edge sits on the frame's left line, card +2's on the right line, at every width. `left` (not transform) is used because a percentage inside transform would resolve against the card itself, not the stage. */ .deck-stage{position:relative;margin:0;padding:0} /* a soft pool of shadow under the whole stack, so the cards read as physical sheets resting on a surface instead of flat rectangles on white */ .deck-stage::after{content:"";position:absolute;left:5%;right:5%;bottom:-16px;height:90px;pointer-events:none;z-index:0; background:radial-gradient(ellipse at 50% 0,rgba(27,33,41,.20),rgba(27,33,41,.07) 46%,transparent 72%);filter:blur(8px)} .deck{position:relative;width:100%;height:480px;--cw:clamp(280px,34vw,420px)} .deck-card{position:absolute;top:0;left:calc(50% + var(--slot,0) * ((100% - var(--cw)) / 4));width:var(--cw);height:100%;display:flex;flex-direction:column;border:1px solid rgba(27,33,41,.09);border-radius:16px;overflow:hidden;cursor:pointer;transform-origin:50% 50%;background:linear-gradient(180deg,#fff 0%,#fcfdfe 100%); transform:translateX(-50%); z-index:var(--z,1);opacity:calc(1 - var(--d,0) * .03); transition:left .5s cubic-bezier(.22,.85,.3,1),transform .5s cubic-bezier(.22,.85,.3,1),opacity .35s ease,box-shadow .4s ease,border-color .3s ease,filter .4s ease} /* Depth = three stacked shadows (contact + mid + ambient) plus a slight sink and desaturation, so the stack reads as physical sheets. */ .deck-card[data-d="0"]{box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(27,33,41,.07),0 10px 20px -8px rgba(27,33,41,.14),0 34px 62px -18px rgba(27,33,41,.27)} .deck-card[data-d="1"]{transform:translateX(-50%) translateY(5px) scale(.988);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(27,33,41,.05),0 8px 16px -8px rgba(27,33,41,.11),0 24px 44px -20px rgba(27,33,41,.19);filter:saturate(.9)} .deck-card[data-d="2"]{transform:translateX(-50%) translateY(9px) scale(.976);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(27,33,41,.04),0 6px 14px -8px rgba(27,33,41,.09),0 16px 32px -20px rgba(27,33,41,.14);filter:saturate(.8)} .deck-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0f1319,#1a2331);opacity:calc(var(--d,0) * .07);pointer-events:none;z-index:4;transition:opacity .35s ease} .deck-card:hover,.deck-card:focus-visible{z-index:340;opacity:1;border-color:rgba(249,115,22,.42);outline:none;filter:saturate(1); transform:translateX(-50%) translateY(-14px) scale(1.028); box-shadow:0 2px 4px rgba(27,33,41,.06),0 18px 34px -10px rgba(27,33,41,.19),0 54px 92px -26px rgba(27,33,41,.34)} .deck-card:hover::before,.deck-card:focus-visible::before{opacity:0} .deck-card .ph{position:relative;height:200px;flex:0 0 auto;overflow:hidden;border-bottom:1px solid var(--line);background:#eef2f6} .deck-card .ph img{width:100%;height:100%;object-fit:cover;display:block} /* sheen + vignette: the photo reads as a lit surface rather than a flat fill */ .deck-card .ph::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(166deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 36%), linear-gradient(180deg,rgba(13,17,23,.24) 0%,rgba(13,17,23,0) 38%), linear-gradient(0deg,rgba(13,17,23,.15) 0%,rgba(13,17,23,0) 24%)} .deck-card .ph .tag{position:absolute;left:14px;top:14px;z-index:2;font-family:'IBM Plex Mono',Consolas,monospace;font-size:10px;letter-spacing:.12em;color:#fff;background:rgba(20,26,34,.62);padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px)} .deck-card .cb{padding:20px 24px 22px;display:flex;flex-direction:column;flex:1;min-height:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.9);opacity:calc(1 - var(--d,0) * 99);transition:opacity .3s ease} .deck-card:hover .cb,.deck-card:focus-visible .cb{opacity:1} /* the case number sits on whichever edge a stacked card actually exposes: with the deck mirrored, LEFT cards show their left edge, RIGHT cards the right */ .deck-card .edge{position:absolute;right:0;top:200px;bottom:0;width:62px;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:5;opacity:min(var(--d,0),1);transition:opacity .25s ease} .deck-card.s-left .edge{right:auto;left:0} .deck-card:hover .edge,.deck-card:focus-visible .edge{opacity:0} .deck-card .edge i{font-style:normal;writing-mode:vertical-rl;font-family:'IBM Plex Mono',Consolas,monospace;font-size:10.5px;font-weight:700;letter-spacing:.22em;color:var(--accent);white-space:nowrap} .deck-card .ind{font-family:'IBM Plex Mono',Consolas,monospace;font-size:10px;letter-spacing:.14em;color:var(--accent);font-weight:700;margin-bottom:9px} .deck-card h3{font-size:18px;font-weight:800;line-height:1.34;letter-spacing:-.01em;margin-bottom:9px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .deck-card .prob{font-size:13.5px;color:var(--slate);line-height:1.66;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .deck-card .metric{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:14px} .deck-card .metric .big{font-family:'IBM Plex Mono',Consolas,monospace;font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1;white-space:nowrap} .deck-card .metric .big em{color:var(--accent);font-style:normal} .deck-card .metric .lbl{font-size:12px;color:var(--steel);line-height:1.5} /* side arrows — glass discs, parked in the page gutter just outside the frame */ .deck-btn{position:absolute;top:50%;margin-top:-26px;width:52px;height:52px;border-radius:50%;border:1px solid rgba(27,33,41,.10);background:rgba(255,255,255,.72);backdrop-filter:blur(12px) saturate(1.5);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:340;font-family:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(27,33,41,.06),0 12px 28px -8px rgba(27,33,41,.20);transition:.22s ease} .deck-btn:hover{border-color:rgba(249,115,22,.5);color:var(--accent);background:rgba(255,255,255,.92);transform:translateY(-2px) scale(1.04);box-shadow:0 2px 4px rgba(27,33,41,.06),0 18px 34px -10px rgba(249,115,22,.34)} .deck-btn svg{width:20px;height:20px;display:block} .deck-prev{left:4px} .deck-next{right:4px} .deck-nav-mobile{display:none} @media(max-width:980px){.deck{height:462px}.deck-card .ph{height:186px}.deck-card .edge{top:186px}} @media(max-width:720px){ .deck{height:434px;--cw:min(62vw,250px)} .deck-card .ph{height:154px} .deck-card .edge{display:none} .deck-card h3{font-size:16.5px} .deck-card .cb{padding:17px 19px 19px} .deck-card .metric .big{font-size:25px} /* overlay arrows would sit on the card on phones -> move them under the deck */ .deck-stage .deck-btn{display:none} .deck-nav-mobile{display:flex;gap:10px;justify-content:center;margin-top:24px} .deck-nav-mobile .deck-btn{display:flex;position:static;margin:0;width:46px;height:46px;box-shadow:0 1px 2px rgba(27,33,41,.05),0 10px 22px -6px rgba(27,33,41,.18)} .deck-nav-mobile .deck-btn svg{width:18px;height:18px} } /* pagehero background photos (ink + orange dual-color, dark overlay for legibility) */ .pagehero.hero-cases,.pagehero.hero-faq,.pagehero.hero-contact{background-size:cover;background-position:center;background-repeat:no-repeat} .pagehero.hero-cases{background-image:linear-gradient(105deg,rgba(15,19,25,.93) 0%,rgba(15,19,25,.80) 46%,rgba(15,19,25,.52) 100%),url('img/hero_cases.jpg')} .pagehero.hero-faq{background-image:linear-gradient(105deg,rgba(15,19,25,.93) 0%,rgba(15,19,25,.80) 46%,rgba(15,19,25,.52) 100%),url('img/hero_faq.jpg')} .pagehero.hero-contact{background-image:linear-gradient(105deg,rgba(15,19,25,.93) 0%,rgba(15,19,25,.80) 46%,rgba(15,19,25,.52) 100%),url('img/hero_contact.jpg')} /* ============ 5 - FAQ - DARK CLOSED-LOOP PROCESS FLOW (home) ============ */ .faqflow{position:relative;padding:64px 0 70px;background:linear-gradient(168deg,#171d27 0%,#0f141b 76%,#121821 100%);color:#e6ebf2;overflow:hidden} .faqflow::before{content:"";position:absolute;top:-100px;right:-70px;width:400px;height:346px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86.6'%3E%3Cpolygon points='25,1 75,1 99,43.3 75,85.6 25,85.6 1,43.3' fill='none' stroke='%23ffffff' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center/contain;opacity:.05;pointer-events:none} .faqflow::after{content:"";position:absolute;bottom:-80px;left:-60px;width:300px;height:260px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86.6'%3E%3Cpolygon points='25,1 75,1 99,43.3 75,85.6 25,85.6 1,43.3' fill='none' stroke='%23f97316' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center/contain;opacity:.07;pointer-events:none} /* ---- flow rail: five phases, one row; the arrow between them shows the hand-off, the vertical tick between nodes the sequence ---- */ .flow{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:34px -15px 0} .ph-col{position:relative;padding:0 15px} .ph-h{position:relative;display:flex;align-items:baseline;padding-bottom:11px;margin-bottom:13px;border-bottom:1px solid rgba(255,255,255,.14)} .ph-t{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff} .ph-t::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:9px;vertical-align:1px} .ph-col:not(:last-child) .ph-h::after{content:"";position:absolute;right:-8px;top:2px;width:13px;height:13px;border-top:2px solid rgba(249,115,22,.6);border-right:2px solid rgba(249,115,22,.6);transform:rotate(45deg)} .ph-steps{display:grid;gap:8px} .fnode{position:relative;display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:8px;padding:9px 12px;transition:background .2s ease,border-color .2s ease,transform .2s ease} .fnode:hover{background:rgba(249,115,22,.10);border-color:rgba(249,115,22,.42);transform:translateX(3px)} .fnode + .fnode::before{content:"";position:absolute;left:22px;top:-8px;width:1px;height:8px;background:rgba(255,255,255,.16)} .fn{flex:0 0 auto;font-family:'IBM Plex Mono',Consolas,monospace;font-size:10.5px;font-weight:700;color:var(--accent);line-height:1.5;letter-spacing:.02em} .ft{font-size:13px;font-weight:600;color:#e8eef5;line-height:1.45;letter-spacing:-.005em} /* ---- loop-back bar ---- */ .flow-loop{position:relative;z-index:2;display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px;padding:15px 20px;border:1px dashed rgba(249,115,22,.5);border-radius:12px;background:rgba(249,115,22,.07)} .fl-n{flex:0 0 auto;font-family:'IBM Plex Mono',Consolas,monospace;font-size:15px;font-weight:700;color:var(--accent);line-height:1.2;border:1px solid rgba(249,115,22,.5);border-radius:8px;padding:5px 10px;background:rgba(249,115,22,.10)} .fl-k{flex:1 1 auto;min-width:0;font-size:13.5px;font-weight:700;letter-spacing:-.005em;color:#e8eef5} .fl-back{flex:0 0 auto;font-family:'IBM Plex Mono',Consolas,monospace;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px dashed rgba(249,115,22,.6);border-radius:999px;padding:9px 16px;white-space:nowrap} .btn-more-dark{background:transparent;border-color:rgba(255,255,255,.3);color:#e8eef5} .btn-more-dark:hover{border-color:var(--accent);color:#fff;background:rgba(249,115,22,.18);box-shadow:0 10px 26px rgba(249,115,22,.2)} /* keep five columns down to 921px: one row is far shorter than two */ @media(max-width:1024px){.flow{grid-template-columns:repeat(5,1fr);gap:22px 0}} @media(max-width:920px){ .flow{grid-template-columns:repeat(2,1fr)} .ph-col:not(:last-child) .ph-h::after{display:none} } @media(max-width:640px){ .flow{grid-template-columns:1fr;gap:20px;margin:26px 0 0} .ph-col{padding:0} .flow-loop{padding:17px 18px;gap:12px} } /* ===================================================================== HOME · PANEL SYSTEM --------------------------------------------------------------------- Every home panel is exactly one screen tall, and all of them share ONE frame: the same 1120px `.wrap` the nav and footer use. Nothing is wider and nothing is narrower, so headings, copy, media, the case deck and the honeycomb all start and end on the same two vertical lines. Sizing is driven by vh clamps instead of a table of height breakpoints, so a panel grows with the screen rather than being squeezed to fit it. ===================================================================== */ :root{--navh:67px;--screen:calc(100vh - var(--navh))} section[id]{scroll-margin-top:80px} body.home{ --h1:clamp(34px,6vh,60px); --h2:clamp(25px,4vh,38px); --lead:clamp(14.5px,1.78vh,17px); --body:clamp(14.5px,1.7vh,16.5px); --pady:clamp(26px,4.4vh,54px); --rhythm:clamp(18px,2.8vh,34px); --deckh:clamp(300px,calc(var(--screen) * .62),600px); --photoh:calc(var(--deckh) * .36); /* --- the honeycomb --------------------------------------------------- It is one fixed 860x745 figure, so it needs ONE width variable that both the box and its type are derived from -- otherwise the box shrinks to fit the column while the labels inside stay full size and spill out of the hexagons on hover. This replaces the old 16-step height table. The width is the narrower of: a) the space left in the panel's second grid column (1120 - 2*28 content, minus column 1, minus the gap), and b) whatever height the panel can spare, converted through 860/745. Type below is sized as calc(var(--hexw) * / 860) -- i.e. the original px size at the 860px design width, carried down to the width actually rendered. It has to be written out longhand like that: this engine rejects a length/length division, so a reusable `--hexk: calc(var(--hexw) / 860px)` ratio does NOT work. */ --hexcol:calc(min(calc(100vw - 56px),1064px) - clamp(290px,25vw,350px) - clamp(24px,3vw,38px)); --hexw:min(var(--hexcol),calc((var(--screen) - 2 * var(--pady) - 12px) * 1.1547)); } /* ---- one panel header for every content panel: kicker + h2 (+ lead) on the left, that panel's action on the right ---- */ body.home .phead{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(24px,3.4vw,56px)} body.home .phead-l{min-width:0} body.home .phead .kicker{margin-bottom:2px} body.home .phead h2{font-size:var(--h2);font-weight:800;letter-spacing:-.025em;line-height:1.16} body.home .phead .lead{font-size:var(--lead);color:var(--steel);line-height:1.66;margin-top:9px;max-width:620px} body.home .phead-act{flex:0 0 auto;margin-bottom:4px} body.home .phead-dark h2{color:#fff} body.home .phead-dark .lead{color:#9fadbe} /* ===================================================================== DESKTOP — each section is one screen, content optically centred ===================================================================== */ @media (min-width:921px){ html.home{scroll-snap-type:y proximity} body.home > section{min-height:var(--screen);scroll-snap-align:start;scroll-margin-top:var(--navh)} body.home > section > .wrap{width:100%} body.home #about-me, body.home #about-network, body.home #cases, body.home #faq{display:flex;flex-direction:column;justify-content:center; padding-top:var(--pady);padding-bottom:var(--pady)} /* ---------- 1 · banner ---------- */ /* the trust bar is a real flex item at the bottom rather than an overlay, so the headline is centred in exactly the space that is left above it */ body.home .banner{display:flex;flex-direction:column;height:var(--screen);min-height:0;max-height:none;padding-bottom:0} body.home .banner > .wrap{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0} body.home .btrust{position:static} body.home .banner .eyebrow{font-size:12px;letter-spacing:.2em;margin-bottom:clamp(12px,2vh,20px)} body.home .banner h1{font-size:var(--h1);line-height:1.07;letter-spacing:-.03em;max-width:780px} body.home .banner h1 .u{box-shadow:inset 0 -.2em 0 rgba(249,115,22,.28)} body.home .banner .sub{font-size:var(--lead);line-height:1.74;max-width:640px;margin-top:clamp(16px,2.4vh,26px)} body.home .banner .btn-row{margin-top:clamp(22px,3.6vh,38px)} body.home .banner .btn{padding:clamp(13px,1.9vh,17px) clamp(26px,2.4vw,34px);font-size:clamp(14px,1.75vh,15.5px)} body.home .btrust-in .t{padding:clamp(13px,1.9vh,19px) 16px} body.home .btrust-in .v{font-size:clamp(13.5px,1.72vh,16px)} body.home .btrust-in .k{font-size:clamp(10.5px,1.28vh,11.5px)} /* ---------- 2 · the engineer ---------- */ body.home #about-me .phead{margin-bottom:var(--rhythm)} body.home .am-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px); gap:clamp(28px,4vw,56px);align-items:center} body.home .am-grid .bio{font-size:var(--body);line-height:1.8;color:#3d4a58;margin-bottom:clamp(14px,2.2vh,22px)} body.home .am-grid .cred-row{gap:9px;margin:0} body.home .am-grid .ph{height:clamp(250px,46vh,430px);border-radius:12px;overflow:hidden;border:1px solid var(--line)} body.home .am-grid .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;display:block} /* the three reasons sit on their own line, spanning the frame edge to edge */ body.home .why-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px); margin-top:var(--rhythm);padding-top:clamp(18px,2.6vh,30px);border-top:1px solid var(--line)} body.home .why-row .w{display:flex;gap:12px;align-items:flex-start} body.home .why-row .m{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--accent-soft); color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;margin-top:3px} body.home .why-row h4{font-size:clamp(14px,1.72vh,15.5px);font-weight:700;margin-bottom:5px} body.home .why-row p{font-size:clamp(12.5px,1.55vh,14px);color:var(--slate);line-height:1.62} /* ---------- 3 · the network ---------- */ body.home .nb{display:grid;grid-template-columns:minmax(0,clamp(290px,25vw,350px)) minmax(0,1fr); gap:clamp(24px,3vw,38px);align-items:center} body.home .nb-txt{display:flex;flex-direction:column;gap:clamp(12px,1.9vh,20px)} body.home .nb-txt .band-title{font-size:clamp(23px,3.6vh,33px);line-height:1.2} body.home .nb-txt .band-lead{font-size:clamp(13.5px,1.62vh,15px);line-height:1.68;color:#a7b4c4} body.home .nb-note{font-size:clamp(13px,1.6vh,14.5px);line-height:1.6;color:#c9d4e0; padding-left:14px;border-left:3px solid var(--accent)} body.home .nb-note b{color:#fff;font-weight:700} body.home .nb-check{display:flex;flex-direction:column;gap:7px; padding-top:clamp(12px,1.8vh,18px);border-top:1px solid rgba(255,255,255,.14)} body.home .nb-check .il{font-family:'IBM Plex Mono',Consolas,monospace;font-size:10.5px;font-weight:700; letter-spacing:.18em;color:var(--accent);margin-bottom:2px} body.home .nb-check .ii{font-size:clamp(12.5px,1.55vh,14px);color:#c6d1dd} body.home .nb-check .ii::before{content:"\2713";color:var(--accent);font-weight:700;margin-right:9px} body.home .nb-more{display:flex} /* The honeycomb is one fixed 860x745 figure locked to its own aspect ratio, so it is capped by the usable panel height rather than by the column width: its width is derived from whatever height the panel can spare. Its type is carried down with it, so the labels keep their proportion to the hexagons at every size (and the hover reveal keeps fitting inside). */ body.home .hexband .hexgrid{margin-top:0;max-width:none;justify-self:center;width:var(--hexw)} body.home .hex .cat{font-size:calc(var(--hexw) * 10 / 860);margin-bottom:calc(var(--hexw) * 4 / 860)} body.home .hex h3{font-size:calc(var(--hexw) * 17.5 / 860)} body.home .hex .desc{font-size:calc(var(--hexw) * 13 / 860);margin:calc(var(--hexw) * 8 / 860) 0} body.home .hex .spec{font-size:calc(var(--hexw) * 10 / 860)} /* ---------- 4 · cases ---------- */ body.home #cases .phead{margin-bottom:var(--rhythm)} body.home .deck{height:var(--deckh)} body.home .deck-card .ph{height:var(--photoh)} body.home .deck-card .edge{top:var(--photoh)} body.home .deck-nav-mobile{display:none} /* ---------- 5 · process ---------- */ body.home #faq .phead{margin-bottom:0} body.home .flow{margin:var(--rhythm) 0 0;gap:clamp(12px,1vw,16px)} body.home .ph-col{background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.085); border-radius:12px;padding:clamp(14px,2vh,22px) clamp(12px,1.5vw,16px) clamp(16px,2.2vh,24px)} body.home .ph-h{padding-bottom:clamp(11px,1.5vh,16px);margin-bottom:clamp(12px,1.7vh,18px)} body.home .ph-t{font-size:clamp(11px,1.36vh,12.5px)} body.home .ph-col:not(:last-child) .ph-h::after{display:none} body.home .ph-steps{gap:clamp(9px,1.4vh,14px);align-content:start} body.home .fnode{padding:clamp(13px,2.4vh,23px) 14px;border-radius:9px} body.home .fn{font-size:clamp(10.5px,1.28vh,11.5px)} body.home .ft{font-size:clamp(12.5px,1.52vh,13.8px)} /* the hand-off chevron rides in the gutter between two phase cards */ body.home .flow-gap{position:absolute;top:50%;right:-9px;margin-top:-7px;width:13px;height:13px; border-top:2px solid rgba(249,115,22,.55);border-right:2px solid rgba(249,115,22,.55); transform:rotate(45deg);z-index:3} body.home .flow-loop{margin-top:clamp(22px,3.2vh,36px);padding:clamp(17px,2.4vh,24px) clamp(18px,1.8vw,24px)} body.home .fl-k{font-size:clamp(13px,1.68vh,14.5px)} body.home .fl-back{padding:clamp(8px,1.15vh,11px) 16px} } /* the discs park in the page gutter, just outside the frame — only where the gutter is genuinely wide enough to hold them (>=1300px viewport) */ @media (min-width:1300px){ body.home .deck-prev{left:-74px} body.home .deck-next{right:-74px} } /* 1280-class laptops: no room for the gutter discs, so the pair drops under the deck and the deck gives back the height they take. */ @media (min-width:921px) and (max-width:1299px){ body.home{--deckh:clamp(280px,calc(var(--screen) * .53),520px)} body.home .deck-stage .deck-btn{display:none} body.home .deck-nav-mobile{display:flex;gap:12px;justify-content:center;margin-top:clamp(16px,2.4vh,26px)} body.home .deck-nav-mobile .deck-btn{display:flex;position:static;margin:0;width:48px;height:48px} } /* Short desktop windows: the portrait panel is the one with fixed content above the fold, so it takes one squeeze notch (vh clamps handle the rest). */ @media (min-width:921px) and (max-height:790px){ body.home .am-grid .ph{height:clamp(210px,34vh,300px)} body.home .cred{gap:7px;font-size:10.5px;padding:5px 11px} body.home .why-row{padding-top:clamp(13px,2vh,20px)} body.home .why-row p{font-size:12.5px;line-height:1.55} } /* Very short desktop windows (<=700px of viewport): the process rail is the last panel still fighting the screen, so it takes one squeeze notch. */ @media (min-width:921px) and (max-height:700px){ body.home .ph-col{padding:11px 13px} body.home .ph-h{padding-bottom:9px;margin-bottom:10px} body.home .ph-steps{gap:7px} body.home .fnode{padding:8px 12px} body.home .ft{font-size:12.5px} body.home .flow-loop{margin-top:14px;padding:12px 18px} } /* ===================================================================== NARROW — below 921px the panels go back to natural flow ===================================================================== */ @media (max-width:920px){ body.home .phead{flex-direction:column;align-items:flex-start;gap:16px} body.home .phead-act{margin-bottom:0} body.home .phead{margin-bottom:26px} body.home .am-grid{display:grid;grid-template-columns:1fr;gap:26px} /* the portrait is a 960px-wide source: without an explicit width it renders at its intrinsic size and drags the whole page sideways on a phone */ body.home .am-grid .ph{order:-1;height:auto;aspect-ratio:1/1.08;max-width:420px; border-radius:12px;overflow:hidden;border:1px solid var(--line)} body.home .am-grid .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;display:block} body.home .why-row{grid-template-columns:1fr;gap:16px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)} body.home .nb{display:grid;grid-template-columns:1fr;gap:30px} body.home .nb-txt{order:1} body.home .nb-check{flex-direction:row;flex-wrap:wrap;gap:8px 20px;align-items:center} body.home .nb-check .il{width:100%;margin-bottom:0} body.home .flow{gap:14px} body.home .ph-col{background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.085);border-radius:12px;padding:14px} body.home .flow-gap{display:none} } @media (max-width:640px){ body.home .nb-check{flex-direction:column;align-items:flex-start;gap:7px} } /* ===================================================================== HOME · TRANSPARENT NAV OVER THE BANNER + WEAKENED PANEL PHOTOS --------------------------------------------------------------------- The home nav no longer sits on a white bar: over the banner it is fully transparent, and its marks/labels switch to light so the header reads as part of the banner. A 3px orange rule — the same accent as the footer's top border — draws itself in from left to right under the nav. Once the second panel arrives the nav turns into a translucent white bar with dark type. Every content panel also gains a weakened background photo now: the dark panels get a dark veil, the light panels a light wash — exactly the treatment the banner already used. ===================================================================== */ /* ---------- panel background photos (banner keeps its own) ---------- */ /* 2 · the engineer — light panel → light wash keeps the dark type legible */ body.home #about-me{ background-color:var(--paper); background-image:linear-gradient(180deg,rgba(247,249,251,.90) 0%,rgba(247,249,251,.94) 100%), url("img/bg_aboutme_963631.jpg"); background-size:cover,cover;background-position:center,center;background-repeat:no-repeat,no-repeat; } /* 4 · cases — light panel */ body.home #cases{ background-color:var(--paper); background-image:linear-gradient(180deg,rgba(247,249,251,.91) 0%,rgba(247,249,251,.95) 100%), url("img/bg_cases_19825178.jpg"); background-size:cover,cover;background-position:center,center;background-repeat:no-repeat,no-repeat; } /* 3 · the network — dark panel → dark veil, keeping the 168° brand tint */ body.home #about-network{ background-image:linear-gradient(168deg,rgba(15,19,25,.84) 0%,rgba(15,19,25,.90) 58%,rgba(18,24,33,.86) 100%), url("img/bg_network_15947586.jpg"); background-size:cover,cover;background-position:center,center;background-repeat:no-repeat,no-repeat; } /* 5 · process — dark panel */ body.home #faq{ background-image:linear-gradient(168deg,rgba(15,19,25,.86) 0%,rgba(15,19,25,.90) 56%,rgba(18,24,33,.88) 100%), url("img/bg_faq_10834810.jpg"); background-size:cover,cover;background-position:center,center;background-repeat:no-repeat,no-repeat; } /* ---------- nav: transparent over the banner, translucent once scrolled ---- */ /* 1px transparent border keeps the bar exactly --navh tall */ body.home header.nav{ background:transparent;border-bottom:1px solid transparent; -webkit-backdrop-filter:none;backdrop-filter:none; transition:background .35s ease,box-shadow .35s ease; } /* the orange rule — drawn left→right on load, matching the footer accent line */ body.home header.nav::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent); transform:scaleX(0);transform-origin:left center; animation:navRule .85s cubic-bezier(.22,.85,.3,1) .12s forwards; } @keyframes navRule{to{transform:scaleX(1)}} /* light-on-dark marks while the nav sits on the banner */ body.home header.nav .logo .n{color:#fff} body.home header.nav .logo .rule{background:rgba(255,255,255,.42)} body.home header.nav .logo .w{color:#c3ceda} body.home header.nav .logo .mark polygon:first-child{stroke:#e9eef4} body.home header.nav .logo .mark text{fill:#e9eef4} body.home header.nav nav.links a{color:rgba(255,255,255,.80)} body.home header.nav nav.links a:hover, body.home header.nav nav.links a.active{color:#fff;border-bottom-color:var(--accent)} /* a soft shadow keeps the light labels legible over a busy photo */ body.home header.nav:not(.scrolled) .nav-in{text-shadow:0 1px 10px rgba(10,14,20,.45)} body.home header.nav:not(.scrolled) .logo .mark{filter:drop-shadow(0 1px 5px rgba(10,14,20,.45))} /* scrolled to the second panel: translucent white bar, dark type (rule stays) */ body.home header.nav.scrolled{ background:rgba(255,255,255,.80); -webkit-backdrop-filter:blur(12px) saturate(1.5);backdrop-filter:blur(12px) saturate(1.5); box-shadow:0 1px 0 rgba(27,33,41,.06),0 10px 30px -18px rgba(27,33,41,.35); } body.home header.nav.scrolled .logo .n{color:var(--ink)} body.home header.nav.scrolled .logo .rule{background:var(--line2)} body.home header.nav.scrolled .logo .w{color:var(--steel)} body.home header.nav.scrolled .logo .mark polygon:first-child{stroke:var(--ink)} body.home header.nav.scrolled .logo .mark text{fill:var(--ink)} body.home header.nav.scrolled nav.links a{color:var(--slate)} body.home header.nav.scrolled nav.links a:hover, body.home header.nav.scrolled nav.links a.active{color:var(--ink);border-bottom-color:var(--accent)} /* desktop: the banner slides under the transparent nav so the two read as one */ @media (min-width:921px){ body.home .banner{margin-top:calc(-1 * var(--navh));height:100vh} } /* narrow screens can't overlay the wrapped header, so it keeps a dark translucent tint that still blends with the dark banner below it */ @media (max-width:920px){ body.home header.nav{background:rgba(19,25,34,.90);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} body.home header.nav.scrolled{background:rgba(255,255,255,.92)} } /* SEO: visually-hidden H1 (screen-reader only) */ .seo-h1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ===== Resources / article styles ===== */ .res-card{border:1px solid var(--line);border-radius:14px;padding:26px 28px;margin-bottom:20px;background:var(--white);transition:border-color .18s,box-shadow .18s} .res-card:hover{border-color:var(--line2);box-shadow:0 8px 26px rgba(27,33,41,.06)} .res-meta{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:10px} .res-card h2{font-size:clamp(19px,2.2vw,23px);line-height:1.28;margin:0 0 12px} .res-card h2 a{color:var(--ink);text-decoration:none} .res-card h2 a:hover{color:var(--accent)} .res-card p{margin:0 0 14px;color:var(--slate)} .res-link{font-weight:700;color:var(--accent);text-decoration:none} .res-link:hover{text-decoration:underline} .article{max-width:820px;margin:0 auto} .article h2{font-size:clamp(22px,2.6vw,28px);font-weight:800;letter-spacing:-.02em;line-height:1.25;margin:38px 0 14px} .article h3{font-size:19px;font-weight:800;margin:26px 0 10px;letter-spacing:-.01em} .article p{margin:0 0 16px;color:var(--slate);line-height:1.75} .article ul,.article ol{margin:0 0 18px;padding-left:22px;color:var(--slate);line-height:1.75} .article li{margin-bottom:8px} .article .lead{font-size:18px;color:var(--ink2);line-height:1.7} .article .note{border-left:3px solid var(--accent);background:var(--accent-soft);padding:14px 18px;border-radius:0 10px 10px 0;margin:22px 0;color:var(--ink2)} .article .back{display:inline-block;margin-top:8px;font-weight:700;color:var(--accent);text-decoration:none} /* ---- article figures & comparison tables ---- */ .article figure{margin:28px 0} .article figure img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--line)} .article .fig-2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .article .fig-2 img{aspect-ratio:4/3;object-fit:cover} .article .fig-narrow{max-width:440px;margin:28px auto} .article figcaption{font-size:13px;color:var(--steel);margin-top:10px;line-height:1.6} .article .tblwrap{margin:24px 0;overflow-x:auto;-webkit-overflow-scrolling:touch} .article .tblwrap table{margin:0} .article table.dtable{min-width:560px} .article .dtable td b{color:var(--ink)} @media(max-width:640px){ .article .fig-2{grid-template-columns:1fr} .article .fig-2 img{aspect-ratio:16/10} .article .fig-narrow{max-width:100%} }