/* editorial.css */ /* Editorial theme — warm paper, ink and signal red. Loaded last on public pages; overrides the earlier navy layers. Admin is untouched. */ :root{ --paper:#f5f7fb;--paper-2:#e9eef7;--card:#ffffff;--ink:#0b1220;--ink-2:#1f2a3d;--muted:#55607a;--muted-2:#8a93a8; --red:#0b52c3;--red-deep:#083e96;--red-soft:#e7eefb;--rule:#0b1220;--hair:#0b122022; --f-display:'Inter Tight',Inter,system-ui,sans-serif;--f-body:Inter,system-ui,sans-serif; --f-serif:'Instrument Serif',Georgia,'Times New Roman',serif;--f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --font-heading:var(--f-display);--font-body:var(--f-body); --bg:var(--paper);--bg2:var(--paper-2);--panel:var(--card);--panel2:var(--card);--line:var(--hair);--text:var(--ink);--blue:var(--red);--cyan:var(--red); --ed-ease:cubic-bezier(.16,1,.3,1);--ed-shadow:6px 6px 0 var(--ink);--ed-shadow-lg:9px 9px 0 var(--ink); color-scheme:light } html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain} /* Note: no overflow clip while Lenis is stopped; it breaks the sticky header when the mobile menu opens. */ :root:root body:not(.login-body){ font-family:var(--f-body);color:var(--ink); background-color:var(--paper); background-image:radial-gradient(circle at 1px 1px,#0b122012 1px,transparent 1.4px); background-size:26px 26px;background-attachment:fixed } :root:root body:not(.login-body)::selection,:root:root body:not(.login-body) ::selection{background:var(--red);color:#fff} :root:root body :is(h1,h2,h3,h4){color:var(--ink);font-family:var(--f-display);-webkit-text-fill-color:currentColor;background:none} :root:root body p{color:var(--muted)} :root:root body a{color:inherit} :root:root body :focus-visible{outline:2px solid var(--red)!important;outline-offset:3px} .skip-link{background:var(--ink)!important;color:var(--paper)!important;border-radius:0!important} .scroll-progress{background:var(--red)!important;height:3px!important;box-shadow:none!important} /* Display type: grotesk + red serif italic accent */ :root:root body :is(h1,h2) em,:root:root body .inner-hero h1 span,:root:root body .muted-heading{ font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--red);-webkit-text-fill-color:var(--red); letter-spacing:-.01em;background:none;display:inline;padding:0 .04em 0 0 } :root:root body .section-head h2,:root:root body .work-intro h2,:root:root body .system-intro h2,:root:root body .about-copy h2,:root:root body .contact-title h2,:root:root body .inner-hero h1{ font-family:var(--f-display);font-weight:800;letter-spacing:-.05em;line-height:.95;color:var(--ink);text-wrap:balance } :root:root body .section-head h2,:root:root body .work-intro h2,:root:root body .system-intro h2,:root:root body .about-copy h2{font-size:clamp(40px,5.6vw,80px);margin:0} :root:root body .inner-hero h1{font-size:clamp(48px,7.4vw,112px);margin:14px 0 18px} :root:root body .section-head h2 em,:root:root body .work-intro h2 em,:root:root body .system-intro h2 em,:root:root body .about-copy h2 em,:root:root body .inner-hero h1 span{font-size:1.06em} :root:root body .section-head p,:root:root body .inner-hero p{color:var(--muted);font-size:17px} :root:root body .section-head{align-items:end;margin:10px 0 40px;gap:28px} /* Mono kicker: [ ■ LABEL ] */ :root:root body .section-kicker,:root:root body .eyebrow,:root:root body .breadcrumb,:root:root body .detail-category,:root:root body .pillar-connection{ font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink) } :root:root body .section-kicker{display:inline-flex;align-items:center;gap:10px} :root:root body .section-kicker i{width:9px;height:9px;border-radius:0;background:var(--red);box-shadow:none} :root:root body .breadcrumb{display:flex;gap:10px;align-items:center;color:var(--muted)} :root:root body .breadcrumb a:hover{color:var(--red)} :root:root body .breadcrumb strong{color:var(--ink);font-weight:600} /* Header */ :root:root body .site-header{background:transparent;border-bottom:1.5px solid transparent} :root:root body .site-header.scrolled{background:transparent;backdrop-filter:none;border-bottom-color:transparent;box-shadow:none} :root:root body .site-header .nav-wrap,:root:root body .site-header.scrolled .nav-wrap{background:#ffffffe8;border:1.5px solid var(--ink);border-radius:999px;box-shadow:4px 4px 0 var(--ink);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} :root:root body .site-header.scrolled .nav-wrap{box-shadow:5px 5px 0 var(--ink)} @media(max-width:760px){ :root:root body .site-header,:root:root body .site-header.scrolled{background:#f5f7fbf0;backdrop-filter:blur(12px);border-bottom:1.5px solid var(--ink)} :root:root body .site-header .nav-wrap,:root:root body .site-header.scrolled .nav-wrap{background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none} } :root:root body .brand strong{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;color:var(--ink);font-size:17px} :root:root body .brand-mark{border-radius:0;background:var(--ink);border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--red)} :root:root body .site-header nav>a,:root:root body .nav-dropdown-toggle{font-family:var(--f-display);font-weight:600;color:var(--ink-2);font-size:15px;background:none} :root:root body .site-header nav>a::after{display:none} :root:root body .site-header nav>a:hover,:root:root body .nav-dropdown-toggle:hover{color:var(--ink)} :root:root body .site-header nav>a.is-nav-highlight,:root:root body .nav-dropdown.is-nav-highlight>.nav-dropdown-toggle{color:var(--paper)} :root:root body .nav-marker{background:var(--ink);border:0;border-radius:999px;box-shadow:none} :root:root body .explore-trigger-icon svg,:root:root body .dropdown-chevron svg{stroke:currentColor;fill:none} :root:root body .nav-dropdown-menu{background:var(--card);border:1.5px solid var(--ink);border-radius:0;box-shadow:var(--ed-shadow)} :root:root body .dropdown-menu-head{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-bottom:1.5px solid var(--ink)} :root:root body .dropdown-menu-head i{background:var(--red);border-radius:0} :root:root body .dropdown-menu-items a{border-radius:0;color:var(--ink)} :root:root body .dropdown-menu-items a b{color:var(--ink);font-family:var(--f-display)} :root:root body .dropdown-menu-items a small{color:var(--muted)} :root:root body .dropdown-menu-items a:hover,:root:root body .dropdown-menu-items a.active{background:var(--red-soft)} :root:root body .dropdown-icon{background:var(--ink);color:var(--paper);border-radius:0;border:0} :root:root body .dropdown-icon svg{stroke:currentColor;fill:none} :root:root body .dropdown-menu-items em{color:var(--red)} :root:root body .menu-btn{background:var(--ink);border:0;border-radius:0} :root:root body .menu-btn span{background:var(--paper)} /* Buttons */ :root:root body .btn{font-family:var(--f-display);font-weight:700;letter-spacing:-.01em;border-radius:0;min-height:52px;padding:0 24px;gap:10px; border:1.5px solid var(--ink);transition:transform .35s var(--ed-ease),box-shadow .35s var(--ed-ease),background .25s ease,color .25s ease} :root:root body .btn.primary{background:var(--ink);color:var(--paper);box-shadow:5px 5px 0 var(--red)} :root:root body .btn.primary:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--red);background:var(--ink)} :root:root body .btn.secondary,:root:root body .btn.ghost{background:var(--card);color:var(--ink);box-shadow:5px 5px 0 var(--ink)} :root:root body .btn.secondary:hover,:root:root body .btn.ghost:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink);background:var(--card);color:var(--ink)} :root:root body .btn:active{transform:translate(2px,2px)!important;box-shadow:1px 1px 0 var(--ink)!important} :root:root body .btn span{transition:transform .35s var(--ed-ease)} :root:root body .btn:hover span{transform:translate(3px,-3px) rotate(45deg)} :root:root body .text-link{font-family:var(--f-mono);font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);border-bottom:1.5px solid var(--red);padding-bottom:3px} :root:root body .text-link:hover{color:var(--red)} :root:root body .nav-cta{min-height:44px;box-shadow:4px 4px 0 var(--red)} /* Generic editorial card */ :root:root body :is(.project-card,.service-card,.expertise-card,.process-card,.update-card,.review-card,.extension-card,.course-card,.story-card,.service-detail-panel,.faq-item,.project-info-card,.contact-info,.standalone-contact-form,.standalone-review-form,.review-submit-shell,.extension-info-card,.extension-features,.empty-state,.project-case-study,.article-content,.impact-card){ background:var(--card);border:1.5px solid var(--ink);border-radius:0;box-shadow:var(--ed-shadow);color:var(--ink) } :root:root body :is(.project-card,.service-card,.expertise-card,.process-card,.update-card,.extension-card,.course-card,.story-card){ transition:transform .5s var(--ed-ease),box-shadow .5s var(--ed-ease),background .3s ease } @media (hover:hover){ :root:root body :is(.project-card,.service-card,.expertise-card,.process-card,.update-card,.extension-card,.course-card,.story-card):hover{transform:translate(-5px,-5px);box-shadow:var(--ed-shadow-lg)} } :root:root body :is(.service-card,.expertise-card,.process-card,.update-card,.course-card,.story-card) p{color:var(--muted)} :root:root body :is(.service-card,.expertise-card,.process-card,.update-card,.review-card,.extension-card,.course-card,.story-card) h3{font-family:var(--f-display);font-weight:700;letter-spacing:-.025em;color:var(--ink)} .ed-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-bottom:14px;border-bottom:1.5px solid currentColor; font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1.45} .ed-card-head>b{flex:none;font-weight:600;background:var(--red);color:#fff;padding:5px 9px;font-size:10.5px;letter-spacing:.08em} .ed-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;border-top:1.5px dashed currentColor; font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.85} /* Hero */ :root:root body.home-page .ed-hero{padding:34px 0 40px;background:none} .ed-meta-row{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;padding:12px 0;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);margin-bottom:46px; font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)} .ed-meta-row span:last-child{text-align:right} .ed-meta-mid{color:var(--red)} :root:root body.home-page .ed-hero .hero-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:56px;align-items:center} :root:root body.home-page .ed-hero .availability{font-family:var(--f-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink); background:var(--card);border:1.5px solid var(--ink);border-radius:0;padding:7px 12px;box-shadow:3px 3px 0 var(--ink);margin-bottom:26px} :root:root body.home-page .ed-hero .availability i{background:#18a957;box-shadow:0 0 0 0 #18a95766;animation:edPulse 2s infinite} @keyframes edPulse{70%{box-shadow:0 0 0 8px #18a95700}100%{box-shadow:0 0 0 0 #18a95700}} :root:root body.home-page .ed-hero .eyebrow{color:var(--muted);margin:0 0 8px} :root:root body.home-page .ed-hero h1{font-family:var(--f-display);font-weight:800;font-size:clamp(66px,10.4vw,172px);line-height:.84;letter-spacing:-.065em;margin:0 0 22px;color:var(--ink)} :root:root body.home-page .ed-hero h1 span{display:inline;color:var(--ink);background:none;-webkit-text-fill-color:var(--ink);padding:0} :root:root body.home-page .ed-hero h1 .ed-dot{color:var(--red);font-weight:800} :root:root body.home-page .ed-hero .hero-positioning{font-family:var(--f-display);font-weight:600;font-size:clamp(24px,2.7vw,40px);letter-spacing:-.035em;line-height:1.05;color:var(--ink);margin:0 0 22px} :root:root body.home-page .ed-hero .hero-positioning em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--red);font-size:1.18em;letter-spacing:-.01em} :root:root body.home-page .ed-hero .typing-wrap{font-family:var(--f-mono);font-size:15px;color:var(--ink);display:inline-flex;align-items:center;gap:8px;min-height:38px; padding:6px 12px;background:var(--ink);color:var(--paper)} :root:root body.home-page .ed-hero .typing-prefix{color:#ffffffa0} :root:root body.home-page .ed-hero .typing-line{color:var(--paper);background:none;-webkit-text-fill-color:currentColor;font-weight:600} :root:root body.home-page .ed-hero .typing-caret{width:9px;height:18px;background:var(--red);border-radius:0;animation:edBlink 1s steps(1) infinite} @keyframes edBlink{50%{opacity:0}} :root:root body.home-page .ed-hero .hero-text{font-size:18px;line-height:1.55;color:var(--muted);max-width:520px;margin:22px 0 28px} :root:root body.home-page .ed-hero .hero-buttons{display:flex;flex-wrap:wrap;gap:16px} :root:root body.home-page .ed-hero .hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:38px;max-width:560px;border:1.5px solid var(--ink);background:var(--card)} :root:root body.home-page .ed-hero .hero-stats div{padding:14px 16px;border:0;border-left:1.5px solid var(--ink);margin:0} :root:root body.home-page .ed-hero .hero-stats div:first-child{border-left:0} :root:root body.home-page .ed-hero .hero-stats b{display:block;font-family:var(--f-display);font-weight:800;font-size:30px;letter-spacing:-.04em;color:var(--ink);background:none;-webkit-text-fill-color:currentColor} :root:root body.home-page .ed-hero .hero-stats div:last-child b{color:var(--red)} :root:root body.home-page .ed-hero .hero-stats span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} :root:root body.home-page .ed-hero .scroll-cue{font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);margin-top:26px} :root:root body.home-page .ed-hero .scroll-cue>span{border:1.5px solid var(--ink);border-radius:0;background:var(--card)} :root:root body.home-page .ed-hero .scroll-cue>span svg{stroke:var(--ink);animation:edNudge 1.8s var(--ed-ease) infinite} @keyframes edNudge{50%{transform:translateY(3px)}} :root:root body.home-page .ed-hero .hero-cv{font-family:var(--f-mono);font-size:12px;color:var(--red)} :root:root body.home-page .ed-hero .hero-visual{position:relative;height:auto;min-height:0;display:block;padding:18px 26px 30px 8px;overflow:visible} .ed-poster{position:relative;background:var(--red);color:#fff;border:1.5px solid var(--ink);box-shadow:10px 10px 0 var(--ink);padding:18px 20px 16px;display:flex;flex-direction:column; aspect-ratio:4/5;max-height:620px;width:100%;rotate:.6deg;transition:rotate .8s var(--ed-ease)} .ed-poster:hover{rotate:0deg} .ed-poster .ed-card-head{border-color:#ffffffcc} .ed-poster .ed-card-head>b{background:#fff;color:var(--red)} .ed-poster::before{content:"";position:absolute;inset:58px 20px 54px;background:repeating-linear-gradient(90deg,#ffffff1a 0 1px,transparent 1px 40px),repeating-linear-gradient(0deg,#ffffff1a 0 1px,transparent 1px 40px);pointer-events:none} :root:root body.home-page .ed-poster .hero-parallax{position:relative;inset:auto;flex:1;min-height:0;margin:10px 0 4px;translate:var(--parallax-x,0) var(--parallax-y,0);transition:translate .6s var(--ed-ease)} :root:root body.home-page .ed-poster .hero-character{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 18px 0 #0b122033);animation:none} .ed-poster .ed-card-foot{border-color:#ffffffcc;margin-top:0} :root:root body.home-page .ed-hero .skill-chip{position:absolute;z-index:6;display:inline-flex;align-items:center;gap:8px;min-height:0;padding:9px 12px;border:1.5px solid var(--ink);border-radius:0; background:var(--card);color:var(--ink);box-shadow:4px 4px 0 var(--ink);font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; animation:edFloat 6s ease-in-out infinite;transition:background .25s ease,color .25s ease,box-shadow .35s var(--ed-ease)} :root:root body.home-page .ed-hero .skill-chip i{font-style:normal;color:var(--red);background:none;width:auto;height:auto;font-size:13px;border-radius:0} :root:root body.home-page .ed-hero .skill-chip em{font-style:normal;opacity:0;width:0;overflow:hidden;transition:opacity .3s ease,width .3s ease} :root:root body.home-page .ed-hero .skill-chip:hover{background:var(--ink);color:var(--paper);box-shadow:6px 6px 0 var(--red)} :root:root body.home-page .ed-hero .skill-chip:hover em{opacity:1;width:1em} :root:root body.home-page .ed-hero .chip-a{top:12%;left:-34px;rotate:-4deg} :root:root body.home-page .ed-hero .chip-b{top:30%;right:-6px;left:auto;rotate:3deg;animation-delay:-1.5s} :root:root body.home-page .ed-hero .chip-c{bottom:22%;left:-46px;top:auto;rotate:2deg;animation-delay:-3s} :root:root body.home-page .ed-hero .chip-d{bottom:7%;right:0;top:auto;left:auto;rotate:-3deg;animation-delay:-4.5s} @keyframes edFloat{50%{transform:translateY(-8px)}} /* Kinetic marquee */ .ed-marquee{position:relative;padding:44px 0 56px;overflow:hidden;isolation:isolate} .ed-marquee-row{width:110%;margin-left:-5%;overflow:hidden;border-block:1.5px solid var(--ink)} .ed-marquee-track{display:flex;width:max-content;will-change:transform} .ed-marquee-track>span{display:inline-flex;align-items:center;gap:.4em;padding-right:.4em;white-space:nowrap} .ed-marquee-ink{background:var(--ink);color:var(--paper);rotate:-2.2deg;position:relative;z-index:2} .ed-marquee-ink span{font-family:var(--f-display);font-weight:800;font-size:clamp(38px,6vw,88px);letter-spacing:-.04em;line-height:1.15;text-transform:uppercase} .ed-marquee-ink em{font-family:var(--f-serif);font-style:italic;font-weight:400;text-transform:none;color:var(--red);letter-spacing:-.01em} .ed-marquee-ink i{font-style:normal;color:var(--red);font-size:.5em} .ed-marquee-red{background:var(--red);color:#fff;rotate:1.6deg;margin-top:-14px} .ed-marquee-red span{font-family:var(--f-mono);font-weight:600;font-size:clamp(13px,1.3vw,17px);letter-spacing:.12em;text-transform:uppercase;line-height:2.6} .no-js-marquee .ed-marquee-track,.ed-marquee-track.is-css{animation:edMarquee 38s linear infinite} .ed-marquee-track.is-css[data-velocity="-1"]{animation-direction:reverse} @keyframes edMarquee{to{transform:translate3d(-50%,0,0)}} /* Tools strip */ :root:root body .tools-strip{padding:10px 0 20px;background:none;border:0} :root:root body .tool-shell{background:var(--card);border:1.5px solid var(--ink);border-radius:0;box-shadow:var(--ed-shadow);padding:14px 18px} :root:root body .tool-title{font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink);font-weight:600} :root:root body .tool-title button{border:1.5px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink)} :root:root body .tool-entry{border:1.5px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);font-family:var(--f-display);font-weight:600;box-shadow:none} :root:root body .tool-entry:hover{background:var(--ink);color:var(--paper)} :root:root body .tool-logo-wrap{border-radius:0;background:#fff} :root:root body .tool-logo-wrap b{color:var(--red)} /* Sections */ :root:root body .section{padding-block:clamp(70px,9vw,130px)} :root:root body .work-section{padding-top:60px} :root:root body .work-intro{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px} :root:root body .filters{gap:8px} :root:root body .filters button,:root:root body .work-section .filters button{font-family:var(--f-mono);font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;border-radius:0; border:1.5px solid var(--ink);background:var(--card);color:var(--ink);padding:8px 12px;box-shadow:none;transition:background .2s ease,color .2s ease,box-shadow .3s var(--ed-ease),transform .3s var(--ed-ease)} :root:root body .filters button:hover{background:var(--paper-2);color:var(--ink);transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--ink)} :root:root body .filters button.active,:root:root body .filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:3px 3px 0 var(--red)} /* Project cards */ :root:root body .project-grid{gap:30px} :root:root body .project-card{overflow:hidden;display:flex;flex-direction:column} :root:root body .project-media{border-bottom:1.5px solid var(--ink);border-radius:0;background:var(--paper-2);overflow:hidden} :root:root body .project-media img{transition:transform 1s var(--ed-ease),filter .6s ease;filter:saturate(.9)} :root:root body .project-card:hover .project-media img{transform:scale(1.06);filter:saturate(1.1)} :root:root body .project-shade{display:none} :root:root body .project-media em{font-family:var(--f-mono);font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--red);color:#fff;border-radius:0;border:0;padding:5px 9px;box-shadow:none;backdrop-filter:none} :root:root body .project-body{background:var(--card);padding:18px 20px 20px} :root:root body .project-body small{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--red)} :root:root body .project-body h3{font-family:var(--f-display);font-weight:700;letter-spacing:-.025em;color:var(--ink);font-size:20px} :root:root body .project-type-badge{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink)} :root:root body .project-arrow{border:1.5px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);transition:background .25s ease,color .25s ease,transform .45s var(--ed-ease)} :root:root body .project-media.placeholder{background:var(--ink)} :root:root body .project-placeholder-icon{color:var(--red);font-family:var(--f-display)} /* Expertise pillars — reference card style */ :root:root body .expertise-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px} :root:root body .expertise-card{display:flex;flex-direction:column;padding:22px 22px 18px;min-height:340px} :root:root body .expertise-card .pillar-number,:root:root body .service-card .ed-num{display:block;font-family:var(--f-mono);font-weight:700;font-size:34px;letter-spacing:-.02em;color:var(--red);margin:26px 0 6px;background:none;border:0;width:auto;height:auto;-webkit-text-fill-color:currentColor} :root:root body .expertise-card h3{font-size:22px;line-height:1.15;margin:0 0 10px} :root:root body .expertise-card p{font-size:15px;line-height:1.55;margin:0 0 22px} :root:root body .expertise-card .pillar-connection{font-size:10.5px;color:inherit;padding:0;border:0;background:none;letter-spacing:.08em} :root:root body .expertise-card:first-child,:root:root body .service-card:first-child{background:var(--red);color:#fff} :root:root body .expertise-card:first-child :is(h3,p,.pillar-number),:root:root body .service-card:first-child :is(h3,p,.ed-num){color:#fff;-webkit-text-fill-color:#fff} :root:root body .expertise-card:first-child .ed-card-head>b,:root:root body .service-card:first-child .ed-card-head .service-icon{background:#fff;color:var(--red)} /* Marketing system: sticky intro + numbered rows */ :root:root body .marketing-system{background:none} :root:root body .system-shell{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:70px;align-items:start} :root:root body .system-intro{position:sticky;top:110px} :root:root body .system-intro>p{font-size:18px;color:var(--muted)} :root:root body .human-note{border:1.5px solid var(--ink);border-radius:0;background:var(--ink);color:var(--paper);box-shadow:5px 5px 0 var(--red)} :root:root body .human-note span{color:var(--red);background:none;border:0} :root:root body .human-note strong{color:var(--paper)} :root:root body .system-steps{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)} :root:root body .system-steps li{position:relative;display:grid;grid-template-columns:70px 1fr 30px;gap:18px;align-items:center;padding:22px 10px;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;background:none;box-shadow:none;isolation:isolate;overflow:hidden} :root:root body .system-steps li::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--red);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ed-ease)} :root:root body .system-steps li>span{font-family:var(--f-mono);font-size:28px;font-weight:700;color:var(--red);background:none;border:0;width:auto;height:auto} :root:root body .system-steps h3{font-family:var(--f-display);font-weight:800;font-size:clamp(24px,2.6vw,36px);letter-spacing:-.04em;margin:0;transition:color .35s ease} :root:root body .system-steps p{margin:4px 0 0;font-size:15px;transition:color .35s ease} :root:root body .system-steps li>i{font-style:normal;font-family:var(--f-mono);color:var(--ink);transition:color .35s ease,transform .5s var(--ed-ease)} @media (hover:hover){ :root:root body .system-steps li:hover::before{transform:scaleY(1)} :root:root body .system-steps li:hover :is(h3,i),:root:root body .system-steps li:hover>span{color:#fff} :root:root body .system-steps li:hover p{color:#ffffffe0} :root:root body .system-steps li:hover>i{transform:rotate(-90deg)} } /* Services */ :root:root body .service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px} :root:root body .service-card{display:flex;flex-direction:column;padding:22px 22px 18px;min-height:300px} :root:root body .service-card .ed-card-head .service-icon{flex:none;width:32px;height:32px;display:grid;place-items:center;background:var(--red);color:#fff;border:0;border-radius:0;box-shadow:none;margin:0} :root:root body .service-card .ed-card-head .service-icon svg{width:18px;height:18px;stroke:currentColor} :root:root body .service-card h3{font-size:21px;margin:0 0 8px} :root:root body .service-card p{font-size:15px;margin:0 0 20px} :root:root body .service-card .card-arrow{position:static;border:0;background:none;width:auto;height:auto;color:inherit;font-size:16px;transition:transform .45s var(--ed-ease)} :root:root body .service-card:hover .card-arrow{transform:translate(3px,-3px) rotate(45deg)} :root:root body .service-page-grid .service-card>.service-icon{width:44px;height:44px;background:var(--red);color:#fff;border-radius:0;border:0;box-shadow:none} /* Process: ink cards */ :root:root body .process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px} :root:root body .process-card{background:var(--ink);color:var(--paper);box-shadow:8px 8px 0 var(--red);padding:22px;min-height:240px;display:flex;flex-direction:column} :root:root body .process-card .ed-card-head{color:#ffffffc0;border-color:#ffffff55} :root:root body .process-card>span{font-family:var(--f-mono);font-weight:700;font-size:52px;color:var(--red);margin:22px 0 4px;background:none;border:0;width:auto;height:auto;-webkit-text-fill-color:currentColor} :root:root body .process-card h3{color:var(--paper);font-size:24px;margin:0 0 8px} :root:root body .process-card p{color:#ffffffa8;margin:0} @media (hover:hover){:root:root body .process-card:hover{box-shadow:12px 12px 0 var(--red)}} :root:root body .service-process-grid .process-card{background:var(--ink)} /* About */ :root:root body .about-shell{border-top:1.5px solid var(--ink);padding-top:50px;gap:40px} :root:root body .about-visual{border:1.5px solid var(--ink);background:var(--red);box-shadow:var(--ed-shadow);height:360px;overflow:hidden} :root:root body .about-ring{display:none} :root:root body .about-visual img{filter:drop-shadow(0 14px 0 #0b122030)} :root:root body .about-copy p{font-size:18px;color:var(--muted)} :root:root body .about-tags span{font-family:var(--f-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;border:1.5px solid var(--ink);border-radius:0;background:var(--card);color:var(--ink)} :root:root body .impact-card{background:var(--ink);color:var(--paper);box-shadow:8px 8px 0 var(--red)} :root:root body .impact-card strong{font-family:var(--f-display);font-weight:800;letter-spacing:-.04em;color:var(--paper);background:none;-webkit-text-fill-color:currentColor} :root:root body .impact-card span{color:var(--red)} :root:root body .impact-card svg{color:var(--red);opacity:1} /* Reviews / updates / extensions / courses */ :root:root body .review-card{padding:22px} :root:root body .review-quote{color:var(--ink-2);font-family:var(--f-serif);font-style:italic;font-size:22px;line-height:1.3} :root:root body .review-stars{color:var(--red)} :root:root body .review-avatar{border-radius:0;background:var(--ink);color:var(--paper);border:0} :root:root body .update-card,:root:root body .course-card,:root:root body .extension-card{overflow:hidden} :root:root body :is(.update-card,.course-card,.extension-card) img{border-bottom:1.5px solid var(--ink)} :root:root body :is(.update-card,.course-card) small,:root:root body .extension-meta span{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--red)} :root:root body .extension-card-visual{background:var(--paper-2);border-radius:0} :root:root body .extension-icon{border-radius:0;border:1.5px solid var(--ink)} /* Home contact block */ :root:root body .contact-section{padding:40px 0 110px} :root:root body .contact-shell{position:relative;background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);border-radius:0;box-shadow:14px 14px 0 var(--red);padding:clamp(34px,5vw,70px);min-height:0;display:flex;align-items:center;justify-content:space-between;gap:40px;overflow:hidden} :root:root body .contact-shell::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,#ffffff1f 1px,transparent 1.4px);background-size:26px 26px;pointer-events:none} :root:root body .contact-title{position:relative;align-items:flex-start;gap:24px} :root:root body .contact-title h2{color:var(--paper);font-size:clamp(40px,5.4vw,84px);margin:10px 0 14px} :root:root body .contact-title p{color:#ffffffa8;font-size:17px} :root:root body .contact-title .section-kicker{color:var(--paper)} :root:root body .mail-icon{border-radius:0;background:var(--red);color:#fff;border:0;box-shadow:none} :root:root body .contact-actions{position:relative;display:flex;align-items:center;gap:26px} :root:root body .contact-shell .btn.primary{background:var(--paper);color:var(--ink);border-color:var(--paper);box-shadow:5px 5px 0 var(--red)} .ed-orb{position:relative;flex:none;width:168px;height:168px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;text-align:center; font-family:var(--f-display);font-weight:800;font-size:24px;line-height:.95;letter-spacing:-.03em;translate:var(--orb-x,0) var(--orb-y,0);transition:translate .6s var(--ed-ease),background .3s ease} .ed-orb em{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:1.35em} .ed-orb i{position:absolute;top:22px;right:28px;font-style:normal;font-size:18px;transition:transform .5s var(--ed-ease)} .ed-orb:hover{background:var(--paper);color:var(--ink)} .ed-orb:hover em{color:var(--red)} .ed-orb:hover i{transform:rotate(45deg)} .ed-orb::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1.5px dashed #ffffff60;animation:edSpin 18s linear infinite} @keyframes edSpin{to{rotate:360deg}} /* Footer */ :root:root body .site-footer{background:var(--ink);color:var(--paper);border-top:0;padding-top:70px;margin-top:0;position:relative} :root:root body .site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--red)} :root:root body .site-footer :is(p,span,a){color:#ffffffb8} :root:root body .site-footer strong{font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--paper)} :root:root body .site-footer .brand strong{font-family:var(--f-display);font-size:18px;text-transform:none;letter-spacing:-.03em} :root:root body .site-footer .brand-mark{box-shadow:3px 3px 0 var(--red);border-color:var(--paper)} @media(hover:hover){:root:root body .site-footer a:hover{color:#5b95ff}} :root:root body .footer-links a{transition:color .2s ease,translate .3s var(--ed-ease)} @media(hover:hover){:root:root body .footer-links a:hover{translate:4px 0}} :root:root body .social-link{border-radius:0;background:transparent;border:1.5px solid #ffffff55;color:var(--paper)} :root:root body .social-link:hover{background:var(--red);border-color:var(--red);color:#fff} .ed-footer-word{font-family:var(--f-display);font-weight:800;font-size:clamp(56px,13.5vw,220px);letter-spacing:-.07em;line-height:.85;color:var(--paper); padding:60px 0 24px;margin-top:40px;border-top:1.5px solid #ffffff30;white-space:nowrap;overflow:hidden} .ed-footer-word em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--red);letter-spacing:-.02em} :root:root body .footer-bottom{border-top:1.5px solid #ffffff30;font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em} :root:root body .footer-bottom p{color:#ffffff80} /* Inner pages */ :root:root body .inner-hero{padding:70px 0 40px;background:none;border-bottom:1.5px solid var(--ink)} :root:root body .inner-hero::before,:root:root body .inner-hero::after{display:none} :root:root body .inner-main{background:none} :root:root body .courses-page{background:transparent} :root:root body .empty-state{padding:34px;text-align:center} :root:root body .empty-state strong{font-family:var(--f-display);color:var(--ink)} :root:root body .story-card,:root:root body .service-detail-panel,:root:root body .faq-item,:root:root body .project-info-card,:root:root body .contact-info,:root:root body .extension-info-card{padding:24px} :root:root body .faq-item summary{font-family:var(--f-display);font-weight:700;color:var(--ink)} :root:root body .faq-item[open]{box-shadow:8px 8px 0 var(--red)} :root:root body .service-check-list li::before{background:var(--red);border-radius:0;color:#fff} :root:root body .detail-cover,:root:root body .detail-gallery img,:root:root body .extension-detail-cover{border:1.5px solid var(--ink);border-radius:0;box-shadow:var(--ed-shadow)} :root:root body .detail-tags span,:root:root body .modal-tags span{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;border:1.5px solid var(--ink);border-radius:0;background:var(--card);color:var(--ink)} :root:root body .about-page-portrait{background:var(--red);border:1.5px solid var(--ink);box-shadow:var(--ed-shadow);border-radius:0} :root:root body .not-found-main span{font-family:var(--f-mono);color:var(--red)} /* Forms */ :root:root body :is(.standalone-contact-form,.standalone-review-form) :is(input,textarea,select){background:var(--paper);border:1.5px solid var(--ink);border-radius:0;color:var(--ink);font-family:var(--f-body);box-shadow:none} :root:root body :is(.standalone-contact-form,.standalone-review-form) label{font-family:var(--f-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink)} :root:root body :is(input,textarea)::placeholder{color:var(--muted-2)} :root:root body .form-error{color:var(--red-deep)} :root:root body .social-pill{border-radius:0;border:1.5px solid var(--ink);background:var(--card);color:var(--ink)} /* Floating UI */ :root:root body .back-to-top{border-radius:0;background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--red)} :root:root body .back-to-top svg{stroke:currentColor} :root:root body .modal-card,:root:root body .image-viewer{background:var(--card);border:1.5px solid var(--ink);border-radius:0;color:var(--ink)} /* Cursor: red dot that grows into a "View" disc over projects */ .pointer-halo>span{left:-7px;top:-7px;width:22px;height:22px;border:0;border-radius:50%;background:var(--red);transform:scale(.45);opacity:1;mix-blend-mode:multiply; transition:transform .45s var(--ed-ease),background .3s ease} .pointer-halo>span::after{display:none} .pointer-halo.is-interactive>span{transform:scale(1.6);background:#0b52c355} .pointer-halo.has-label>span{transform:scale(4.2);background:var(--red);mix-blend-mode:normal} .pointer-halo b{display:block;position:absolute;left:4px;top:4px;transform:translate(-50%,-50%) scale(0);font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff; transition:transform .4s var(--ed-ease);white-space:nowrap} .pointer-halo.has-label b{transform:translate(-50%,-50%) scale(1)} /* Split-line headline reveal */ .ed-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .08em .1em 0;margin:0 -.08em -.1em 0} .ed-w>span{display:inline-block;transform:translate3d(0,108%,0) rotate(4deg);transform-origin:0 100%;transition:transform 1.1s var(--ed-ease) calc(var(--i,0) * 55ms)} .is-split-in .ed-w>span{transform:none} /* Responsive */ @media(max-width:1100px){ :root:root body .expertise-grid,:root:root body .service-grid,:root:root body .process-grid{grid-template-columns:repeat(2,minmax(0,1fr))} :root:root body .system-shell{grid-template-columns:1fr;gap:34px} :root:root body .system-intro{position:static} :root:root body.home-page .ed-hero .hero-grid{gap:34px} } @media(max-width:900px){ :root:root body.home-page .ed-hero .hero-grid{grid-template-columns:1fr} :root:root body.home-page .ed-hero .hero-visual{max-width:460px;margin:20px auto 0;padding:10px 18px 24px} :root:root body .contact-shell{flex-direction:column;align-items:flex-start} .ed-meta-row{grid-template-columns:1fr 1fr}.ed-meta-mid{display:none} } @media(max-width:760px){ :root:root body .site-header nav{background:var(--card);border:1.5px solid var(--ink);border-radius:0;box-shadow:var(--ed-shadow)} :root:root body .site-header nav>a{color:var(--ink);border-radius:0;border-bottom:1px solid var(--hair)} :root:root body .site-header nav>a.active{background:var(--ink);color:var(--paper)} :root:root body .mobile-talk{background:var(--red)!important;color:#fff!important;border-radius:0!important} :root:root body .project-grid{gap:22px} :root:root body.home-page .ed-hero{padding-top:18px} .ed-meta-row{margin-bottom:28px;font-size:10px} :root:root body.home-page .ed-hero h1{font-size:clamp(58px,17vw,96px)} :root:root body.home-page .ed-hero .hero-stats b{font-size:24px} :root:root body.home-page .ed-hero .chip-a{left:-8px} :root:root body.home-page .ed-hero .chip-c{left:-10px} :root:root body.home-page .ed-hero .chip-b,:root:root body.home-page .ed-hero .chip-d{right:-4px} :root:root body.home-page .ed-hero .skill-chip{position:absolute;inset:auto;font-size:10px;padding:7px 9px} :root:root body.home-page .ed-hero .chip-a{top:14%;left:-8px} :root:root body.home-page .ed-hero .chip-b{top:34%;right:-4px} :root:root body.home-page .ed-hero .chip-c{bottom:24%;left:-10px} :root:root body.home-page .ed-hero .chip-d{bottom:8%;right:-4px} :root:root body.home-page .ed-hero .hero-visual{height:auto;display:block;overflow:visible} .ed-poster{box-shadow:9px 9px 0 var(--ink)} :root:root body .work-intro{flex-direction:column;align-items:flex-start} .ed-orb{width:128px;height:128px;font-size:19px} :root:root body .contact-actions{flex-wrap:wrap} :root{--ed-shadow:6px 6px 0 var(--ink);--ed-shadow-lg:8px 8px 0 var(--ink)} } @media(max-width:560px){ :root:root body .expertise-grid,:root:root body .service-grid,:root:root body .process-grid{grid-template-columns:1fr;gap:22px} :root:root body .expertise-card,:root:root body .service-card{min-height:0} :root:root body .system-steps li{grid-template-columns:48px 1fr 18px;gap:12px} :root:root body .system-steps li>span{font-size:20px} :root:root body.home-page .ed-hero .hero-stats div{padding:12px 10px} :root:root body.home-page .ed-hero .hero-buttons .btn{flex:1 1 auto;justify-content:center} } @media(prefers-reduced-motion:reduce){ .ed-w>span{transform:none!important;transition:none!important} .ed-marquee-track{animation:none!important;transform:none!important} .ed-poster{rotate:0deg} :root:root body.home-page .ed-hero .skill-chip,.ed-orb::after{animation:none!important} } /* Nav overrides at ID specificity (earlier layers target #navMenu) */ :root body .site-header #navMenu>a,:root body .site-header #navMenu.has-marker>a:not(.is-nav-highlight),:root body .site-header #navMenu.has-marker:has(>a:hover)>a.active:not(:hover){color:var(--ink-2)} :root body .site-header #navMenu.has-marker>a.is-nav-highlight,:root body .site-header #navMenu .is-nav-highlight .nav-dropdown-toggle{color:var(--paper)} :root body .site-header #navMenu>a:focus-visible{background:var(--ink);color:var(--paper);outline:2px solid var(--red)} @media(min-width:761px){:root body .site-header #navMenu>a{font-size:14px}} @media(max-width:760px){ :root body .site-header #navMenu{background:var(--card);border:1.5px solid var(--ink);border-radius:0;box-shadow:var(--ed-shadow)} :root body .site-header #navMenu>a{color:var(--ink);border-radius:0} :root body .site-header #navMenu>a.active,:root body .site-header #navMenu>a:hover{background:var(--ink);color:var(--paper)} :root body .site-header #navMenu .mobile-talk,:root body .site-header #navMenu .mobile-talk:is(:hover,:focus-visible){background:var(--red);color:#fff;border-radius:0} :root body .nav-dropdown-toggle{color:var(--ink)} } /* Marketing system shell: clean white panel */ :root:root body .system-shell{background:var(--card);border:1.5px solid var(--ink);border-radius:0;box-shadow:var(--ed-shadow);padding:clamp(28px,5vw,64px)} :root:root body .service-card .service-icon{background:var(--red)!important;color:#fff!important;border:0!important;border-radius:0!important;box-shadow:none!important} :root:root body .service-card .service-icon .icon-accent{stroke:#ffffffb0} :root:root body .service-card:first-child .service-icon{background:#fff!important;color:var(--red)!important} :root:root body .service-card:first-child .service-icon .icon-accent{stroke:var(--red)} :root:root body .ed-w,:root:root body .ed-w>span{color:inherit;-webkit-text-fill-color:inherit;background:none;font:inherit;letter-spacing:inherit} :root:root body :is(.section,.services-section,.process-section,.expertise-section,.work-section,.about-section,.contact-section,.tools-strip,.updates-preview-section,.reviews-preview-section,.extensions-preview-section,.courses-preview-section){background:none} :root:root body :is(.section,.services-section,.process-section,.expertise-section,.about-section)::before{display:none} :root:root body .process-card>span{text-align:left} .ed-footer-word{font-size:clamp(48px,11.2vw,184px)} /* Contact page */ :root:root body.contact-page .contact-info,:root:root body.contact-page .standalone-contact-form{background:var(--card);border:1.5px solid var(--ink);border-radius:0;box-shadow:var(--ed-shadow)} :root:root body.contact-page .contact-info :is(span,small){font-family:var(--f-mono);color:var(--muted);letter-spacing:.08em} :root:root body.contact-page .contact-info :is(strong,b,a,h2,h3){color:var(--ink)} :root:root body.contact-page .contact-info>a i{color:var(--red)} :root:root body.contact-page .contact-info>a:hover strong{color:var(--red)} :root:root body.contact-page .standalone-contact-form :is(input:not([type="hidden"]),textarea,select){background:var(--paper);border:1.5px solid var(--ink);border-radius:0;color:var(--ink)} :root:root body.contact-page .standalone-contact-form :is(h2,h3,.contact-form-heading *){color:var(--ink)} :root:root body.contact-page .form-helper,:root:root body.contact-page .form-status{color:var(--muted)} :root:root body.contact-page .form-status.is-success{background:var(--red-soft);border:1.5px solid var(--red);border-radius:0;color:var(--red-deep)} :root:root body.contact-page .contact-assistant{background:var(--red);border:1.5px solid var(--ink);border-radius:0;box-shadow:var(--ed-shadow)} :root:root body.contact-page .contact-assistant :is(p,span,small,strong){color:#fff} :root:root body.contact-page .robot-guide-label{font-family:var(--f-mono);color:#fff} :root:root body.contact-page .robot-guide-label i{background:#fff} :root:root body.contact-page .standalone-contact-form label,:root:root body.contact-page .standalone-contact-form label>span{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)} /* Detail pages: readable text inside light cards */ :root:root body :is(.project-info-card,.extension-info-card,.story-card,.service-detail-panel,.faq-item,.project-case-study,.article-content,.update-card,.course-card,.extension-card,.review-card) :is(strong,b,h2,h3,h4,dt,summary){color:var(--ink);-webkit-text-fill-color:currentColor} :root:root body :is(.project-info-card,.extension-info-card,.story-card,.service-detail-panel,.faq-item,.project-case-study,.article-content) :is(p,li,dd){color:var(--muted)} :root:root body .project-info-card small{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--red)} :root:root body .project-info-card>div{border-color:var(--hair)} :root:root body .detail-header :is(h1,h2){font-family:var(--f-display);font-weight:800;letter-spacing:-.045em;color:var(--ink)} :root:root body .detail-header p{color:var(--muted)} :root:root body .case-navigation a{font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;border:1.5px solid var(--ink);border-radius:0;background:var(--card);color:var(--ink);box-shadow:3px 3px 0 var(--ink)} :root:root body .case-navigation a:hover{background:var(--ink);color:var(--paper)} :root:root body :is(.project-gallery-section,.project-case-study) h2{color:var(--ink)} /* Courses */ :root:root body .course-thumb{border-bottom:1.5px solid var(--ink);border-radius:0;overflow:hidden;background:var(--ink)} :root:root body .course-thumb img{transition:transform 1s var(--ed-ease)} :root:root body .course-card:hover .course-thumb img{transform:scale(1.06)} :root:root body .course-thumb b{width:54px;height:54px;border-radius:50%;background:var(--red);color:#fff;border:1.5px solid #fff;box-shadow:none;transition:transform .45s var(--ed-ease)} :root:root body .course-card:hover .course-thumb b{transform:scale(1.12)} :root:root body .course-thumb em{font-family:var(--f-mono);font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.08em;background:var(--ink);color:#fff;border-radius:0;border:0;padding:5px 9px;box-shadow:none} :root:root body .course-thumb span{color:var(--red);font-family:var(--f-display)} :root:root body .course-body{background:var(--card)} :root:root body .course-body :is(h2,h3){font-family:var(--f-display);font-weight:700;letter-spacing:-.025em;color:var(--ink)} :root:root body .course-body>a,:root:root body .update-card span,:root:root body .extension-view{font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:none;border:0;border-bottom:1.5px solid var(--red);border-radius:0;padding:0 0 3px;width:auto;display:inline-flex;gap:6px;align-items:center} :root:root body .course-card:hover .course-body>a,:root:root body .update-card:hover span,:root:root body .extension-card:hover .extension-view{color:var(--red)} :root:root body .extension-view b{width:auto;height:auto;background:none;border:0;border-radius:0;color:inherit;transition:transform .45s var(--ed-ease)} :root:root body .extension-card:hover .extension-view b{transform:rotate(45deg)} /* Updates */ :root:root body .update-card{display:flex;flex-direction:column} :root:root body .update-card img{transition:transform 1s var(--ed-ease)} :root:root body .update-card:hover img{transform:scale(1.05)} :root:root body .update-card>div{background:var(--card)} :root:root body .update-card :is(h2,h3){font-family:var(--f-display);font-weight:700;letter-spacing:-.025em} /* Reviews */ :root:root body .review-card{display:flex;flex-direction:column} :root:root body .review-card blockquote{font-family:var(--f-serif);font-style:italic;font-size:24px;line-height:1.25;color:var(--ink);margin:14px 0 22px} :root:root body .review-card-top .review-quote{font-family:var(--f-serif);font-size:56px;line-height:.6;color:var(--red);opacity:1} :root:root body .review-stars{color:var(--red);letter-spacing:.1em} :root:root body .review-stars i{color:var(--hair);font-style:normal} :root:root body .review-client{margin-top:auto;padding-top:16px;border-top:1.5px dashed var(--ink);display:flex;align-items:center;gap:12px;flex-wrap:wrap} :root:root body .review-client>div{flex:1;min-width:120px} :root:root body .review-client strong{display:block;color:var(--ink);font-family:var(--f-display)} :root:root body .review-client small{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} :root:root body .review-client em{font-family:var(--f-mono);font-style:normal;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--red);color:#fff;border:0;border-radius:0;padding:5px 8px} :root:root body .review-avatar{width:42px;height:42px;display:grid;place-items:center;font-family:var(--f-mono);color:#fff} :root:root body .review-avatar b{color:#fff} :root:root body .review-submit-shell{padding:0;overflow:hidden;display:grid} :root:root body .review-submit-copy{background:var(--red);color:#fff;border-right:1.5px solid var(--ink)} :root:root body .review-submit-copy::after{color:#ffffff1f} :root:root body .review-submit-copy>span{font-family:var(--f-mono);color:#fff;font-weight:600;letter-spacing:.1em} :root:root body .review-submit-copy h2{color:#fff;font-family:var(--f-display);font-weight:800} :root:root body .review-submit-copy :is(p,div){color:#ffffffd0} :root:root body .review-submit-copy>div i{background:#fff;color:var(--red);border-radius:0} :root:root body .standalone-review-form{border:0;box-shadow:none;background:var(--card)} :root:root body .review-form-notice{border-radius:0;border:1.5px solid var(--ink)} :root:root body .review-form-notice.success{background:var(--red-soft);color:var(--red-deep)} /* Extensions */ :root:root body .extension-card-link{display:flex;flex-direction:column;height:100%;color:var(--ink)} :root:root body .extension-card-visual{background:var(--paper-2);background-image:radial-gradient(circle at 1px 1px,#0b122022 1px,transparent 1.4px);background-size:18px 18px;border-bottom:1.5px solid var(--ink)} :root:root body .extension-card-visual::before,:root:root body .extension-card-visual::after{display:none} :root:root body .extension-icon{background:var(--card);box-shadow:4px 4px 0 var(--ink);color:var(--ink)} :root:root body .extension-icon b{color:var(--red);font-family:var(--f-display)} :root:root body .extension-card-visual em{font-family:var(--f-mono);font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--red);color:#fff;border:0;border-radius:0;padding:5px 9px;box-shadow:none} :root:root body .extension-card-body{background:var(--card)} :root:root body .extension-card-body h2{font-family:var(--f-display);font-weight:700;letter-spacing:-.025em;color:var(--ink)} :root:root body .extension-card-body p{color:var(--muted)} :root:root body .extension-meta small{font-family:var(--f-mono);color:var(--muted)} :root:root body .extension-trust{font-family:var(--f-mono);font-size:12px;color:var(--muted)} :root:root body .extension-detail-icon{border:1.5px solid var(--ink);border-radius:0;background:var(--card);box-shadow:var(--ed-shadow)} :root:root body .extension-feature-grid>*{border:1.5px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink)} :root:root body .standalone-review-form :is(label,label>span,label small){font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)} :root:root body .standalone-review-form :is(p,.review-submit-action p){color:var(--muted)} /* Footer wordmark: solid colours avoid overlap seams between tight glyphs */ :root:root body .site-footer .ed-footer-word span{color:var(--paper);-webkit-text-fill-color:var(--paper)} :root:root body .site-footer .ed-footer-word em{color:#3b7bef;-webkit-text-fill-color:#3b7bef} .ed-footer-word{letter-spacing:-.055em} /* Project detail: goals, deliverables and case-study breakdown */ :root:root body :is(.project-scope-grid>article,.project-case-study){background:var(--card);border:1.5px solid var(--ink);border-radius:0;box-shadow:var(--ed-shadow);color:var(--ink)} :root:root body .project-scope-grid{gap:30px} :root:root body .project-scope-grid h2,:root:root body .project-case-study>h2{font-family:var(--f-display);font-weight:800;letter-spacing:-.035em;color:var(--ink)} :root:root body .project-scope-grid li{color:var(--ink-2);font-size:15px;padding:10px 0;border-bottom:1px dashed var(--hair);margin:0} :root:root body .project-scope-grid ul{gap:0} :root:root body .project-scope-grid li span{border-radius:0;background:var(--red);color:#fff;width:22px;height:22px;font-size:12px} :root:root body .project-scope-grid>article:nth-child(2) li span{background:var(--ink)} :root:root body .case-study-grid{gap:0;border:1.5px solid var(--ink)} :root:root body .case-study-grid article{background:var(--card);border:0;border-left:1.5px solid var(--ink);border-radius:0;padding:22px;min-height:0} :root:root body .case-study-grid article:first-child{border-left:0} :root:root body .case-study-grid article>span{font-family:var(--f-mono);font-size:28px;font-weight:700;color:var(--red)} :root:root body .case-study-grid h3{font-family:var(--f-display);font-weight:700;font-size:20px;color:var(--ink)} :root:root body .case-study-grid p{color:var(--muted)} @media(max-width:900px){:root:root body .case-study-grid{grid-template-columns:1fr 1fr}:root:root body .case-study-grid article:nth-child(3){border-left:0}:root:root body .case-study-grid article:nth-child(n+3){border-top:1.5px solid var(--ink)}} @media(max-width:560px){:root:root body .case-study-grid{grid-template-columns:1fr}:root:root body .case-study-grid article{border-left:0;border-top:1.5px solid var(--ink)}:root:root body .case-study-grid article:first-child{border-top:0}} /* Beyond marketing — big skill rows with cursor-following preview */ :root:root body .skill-stack{position:relative} .skill-list{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)} .skill-row{position:relative;display:grid;grid-template-columns:80px minmax(0,1fr) auto 56px;align-items:center;gap:24px;padding:28px 12px;border-bottom:1.5px solid var(--ink);color:var(--ink);isolation:isolate;overflow:hidden} .skill-row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ed-ease)} .skill-num{font-family:var(--f-mono);font-size:14px;font-weight:600;color:var(--red);letter-spacing:.06em} .skill-name{font-family:var(--f-display);font-weight:800;font-size:clamp(34px,5.4vw,84px);letter-spacing:-.05em;line-height:.95;transition:transform .6s var(--ed-ease),color .3s ease} .skill-name em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--red);letter-spacing:-.01em} .skill-tags{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:right;transition:color .3s ease} .skill-arrow{width:52px;height:52px;display:grid;place-items:center;border:1.5px solid var(--ink);font-size:20px;transition:transform .6s var(--ed-ease),background .3s ease,color .3s ease,border-color .3s ease} @media(hover:hover){ .skill-row:hover::before{transform:scaleY(1)} .skill-row:hover .skill-name{color:var(--paper);transform:translateX(18px)} .skill-row:hover .skill-name em{color:#5b95ff} .skill-row:hover .skill-tags{color:#ffffffb0} .skill-row:hover .skill-arrow{background:var(--red);border-color:var(--red);color:#fff;transform:rotate(45deg)} } .skill-preview{position:fixed;left:0;top:0;z-index:40;width:300px;aspect-ratio:4/3;pointer-events:none;border:1.5px solid var(--ink);box-shadow:8px 8px 0 var(--red);background:var(--paper-2);overflow:hidden; opacity:0;scale:.6;rotate:-6deg;transition:opacity .35s ease,scale .5s var(--ed-ease),rotate .5s var(--ed-ease);will-change:transform} .skill-preview.is-visible{opacity:1;scale:1;rotate:-3deg} .skill-preview img{width:100%;height:100%;object-fit:cover;display:block} @media(max-width:760px),(hover:none){ .skill-preview{display:none} .skill-row{grid-template-columns:40px minmax(0,1fr) 40px;gap:12px;padding:20px 4px} .skill-tags{grid-column:2/3;text-align:left;font-size:10.5px;margin-top:-6px} .skill-arrow{grid-row:1;grid-column:3;width:38px;height:38px;font-size:15px} } /* Cursor: lagging ring around the native pointer */ .ed-ring{position:fixed;left:0;top:0;z-index:109;width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid var(--ink);border-radius:50%;pointer-events:none;opacity:0; transition:opacity .25s ease,width .45s var(--ed-ease),height .45s var(--ed-ease),margin .45s var(--ed-ease),background .3s ease,border-color .3s ease;will-change:transform} .ed-ring.is-visible{opacity:1} .ed-ring.is-link{width:62px;height:62px;margin:-31px 0 0 -31px;border-color:var(--red);background:#0b52c314} .ed-ring.is-label{opacity:0} .ed-ring.is-down{width:26px;height:26px;margin:-13px 0 0 -13px} .ed-ring.on-dark{border-color:#fff} @media(max-width:760px),(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.ed-ring{display:none}} /* About portrait: blueprint pattern behind the character */ :root:root body .about-page-portrait{overflow:hidden;isolation:isolate; background-color:var(--red); background-image:linear-gradient(#ffffff1c 1px,transparent 1px),linear-gradient(90deg,#ffffff1c 1px,transparent 1px),radial-gradient(circle at 1px 1px,#ffffff40 1px,transparent 1.5px); background-size:44px 44px,44px 44px,11px 11px} .ab-pattern{position:absolute;inset:0;z-index:0;pointer-events:none} .ab-rings{position:absolute;left:50%;top:54%;width:150%;aspect-ratio:1;translate:-50% -50%;border-radius:50%; background:repeating-radial-gradient(circle,transparent 0 38px,#ffffff26 38px 39.5px);mask-image:radial-gradient(circle,#000 30%,transparent 68%);-webkit-mask-image:radial-gradient(circle,#000 30%,transparent 68%)} .ab-orbit{position:absolute;left:50%;top:52%;width:78%;aspect-ratio:1;translate:-50% -50%;border:1.5px dashed #ffffff80;border-radius:50%;animation:edSpin 40s linear infinite} .ab-orbit::before,.ab-orbit::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;border:1.5px solid var(--ink);top:-7px;left:50%;margin-left:-7px} .ab-orbit::after{top:auto;bottom:-7px;background:var(--ink);border-color:#fff} .ab-tag{position:absolute;z-index:3;font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--card);color:var(--ink);border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:7px 10px;animation:edFloat 6s ease-in-out infinite} .ab-t1{top:12%;left:7%;rotate:-4deg} .ab-t2{top:26%;right:6%;rotate:3deg;animation-delay:-1.5s} .ab-t3{bottom:30%;left:5%;rotate:3deg;animation-delay:-3s} .ab-t4{bottom:12%;right:7%;rotate:-3deg;animation-delay:-4.5s} .ab-code{position:absolute;top:14px;right:16px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:#ffffffc0} :root:root body .about-page-portrait img{z-index:2;filter:drop-shadow(0 16px 0 #0b122033)} @media(max-width:560px){.ab-tag{font-size:9.5px;padding:5px 7px}} @media(prefers-reduced-motion:reduce){.ab-orbit,.ab-tag{animation:none}} /* Contact hero */ .contact-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:end} .contact-big-mail{display:inline-grid;grid-template-columns:1fr auto;align-items:end;gap:4px 18px;margin-top:22px;padding:16px 0;border-bottom:2px solid var(--ink);color:var(--ink);max-width:100%} .contact-big-mail small{grid-column:1/-1;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .contact-big-mail span{font-family:var(--f-display);font-weight:800;font-size:clamp(22px,3.2vw,44px);letter-spacing:-.04em;overflow-wrap:anywhere;transition:color .3s ease} .contact-big-mail i{font-style:normal;font-size:26px;transition:transform .5s var(--ed-ease)} .contact-big-mail:hover span{color:var(--red)} .contact-big-mail:hover i{transform:rotate(45deg)} .contact-hero-side{background:var(--card);border:1.5px solid var(--ink);box-shadow:var(--ed-shadow);padding:20px} .topic-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 20px} .topic-chips button{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);padding:8px 10px;cursor:pointer;transition:background .2s ease,color .2s ease,transform .3s var(--ed-ease),box-shadow .3s var(--ed-ease)} .topic-chips button:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--ink)} .topic-chips button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff;box-shadow:3px 3px 0 var(--ink)} .contact-steps{list-style:none;margin:0;padding:16px 0 0;border-top:1.5px dashed var(--ink);display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .contact-steps li{display:grid;gap:4px} .contact-steps b{font-family:var(--f-mono);font-size:22px;color:var(--red)} .contact-steps span{font-family:var(--f-display);font-weight:700;font-size:14px;color:var(--ink)} @media(max-width:900px){.contact-hero-grid{grid-template-columns:1fr;gap:30px}} /* Project arrow: the square stays put; only colour and a small nudge change on hover */ :root:root body .project-card .project-arrow,:root:root body .work-section .project-card .project-arrow{position:static;flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center; border:1.5px solid var(--ink);border-radius:0;background:var(--card);color:var(--ink);font-size:17px;line-height:1;transform:none;rotate:0deg; transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .35s var(--ed-ease),translate .35s var(--ed-ease)} :root:root body .project-card:hover .project-arrow,:root:root body .work-section .project-card:hover .project-arrow{transform:none;rotate:0deg;background:var(--red);border-color:var(--ink);color:#fff; translate:-2px -2px;box-shadow:3px 3px 0 var(--ink)} :root:root body .project-title-row{display:flex;align-items:center;justify-content:space-between;gap:16px} /* No cursor labels or hover previews: the cursor stays a small dot + ring everywhere */ .pointer-halo b{display:none!important} .pointer-halo.has-label>span{transform:scale(1.6);background:#0b52c355;mix-blend-mode:multiply} .skill-preview{display:none!important} @media(hover:hover){.skill-row:hover .skill-arrow{transform:none;translate:-2px -2px;box-shadow:3px 3px 0 #fff}} /* Hero role ticker: label tab + serif prefix + bold typed role */ :root:root body.home-page .ed-hero .typing-wrap{display:inline-flex;align-items:stretch;gap:0;min-height:56px;min-width:min(100%,430px);padding:0; background:var(--card);color:var(--ink);border:1.5px solid var(--ink);box-shadow:5px 5px 0 var(--red);font-family:var(--f-display);overflow:hidden} .tw-label{display:inline-flex;align-items:center;gap:8px;padding:0 14px;background:var(--red);color:#fff;border-right:1.5px solid var(--ink); font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase} .tw-label i{width:7px;height:7px;border-radius:50%;background:#fff;animation:edPulseW 1.6s ease-in-out infinite} @keyframes edPulseW{50%{opacity:.3}} :root:root body.home-page .ed-hero .typing-prefix{display:inline-flex;align-items:center;padding:0 8px 0 16px;font-family:var(--f-serif);font-style:italic;font-size:22px;color:var(--muted)} :root:root body.home-page .ed-hero .typing-line{display:inline-flex;align-items:center;font-family:var(--f-display);font-weight:800;font-size:22px;letter-spacing:-.03em;color:var(--ink);-webkit-text-fill-color:var(--ink);white-space:nowrap} :root:root body.home-page .ed-hero .typing-caret{align-self:center;width:3px;height:26px;margin:0 16px 0 3px;background:var(--red);animation:edBlink 1s steps(1) infinite} @media(max-width:560px){ :root:root body.home-page .ed-hero .typing-wrap{min-width:0;width:100%;min-height:50px} .tw-label{padding:0 10px;font-size:10px} :root:root body.home-page .ed-hero :is(.typing-prefix,.typing-line){font-size:18px} :root:root body.home-page .ed-hero .typing-prefix{padding-left:12px} } /* Cleaner hero: calmer tracking, straight stickers, no tilt */ :root:root body.home-page .ed-hero h1{font-size:clamp(62px,8.6vw,146px);letter-spacing:-.048em;line-height:.9;margin-bottom:26px} :root:root body.home-page .ed-hero .hero-positioning{font-size:clamp(24px,2.5vw,38px);letter-spacing:-.03em;line-height:1.1;max-width:640px} :root:root body.home-page .ed-hero .hero-positioning em{font-size:1.12em;white-space:nowrap} :root:root body.home-page .ed-hero .hero-text{margin:20px 0 30px} :root:root body.home-page .ed-hero .hero-stats{max-width:520px} .ed-poster,.ed-poster:hover{rotate:0deg} :root:root body.home-page .ed-hero .skill-chip{rotate:0deg} :root:root body.home-page .ed-hero .hero-grid{align-items:center;gap:64px} /* "Human judgment" note: compact, vertically centred badge row */ :root:root body .human-note{display:inline-flex;align-items:center;gap:14px;margin-top:34px;padding:14px 20px 14px 14px;border:1.5px solid var(--ink)} :root:root body .human-note>span{flex:none;width:34px;height:34px;display:grid;place-items:center;background:var(--red);color:#fff;font-size:16px;line-height:1} :root:root body .human-note>div{display:flex;align-items:center} :root:root body .human-note strong{font-family:var(--f-display);font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.2;color:var(--paper)} /* Blue featured service card: every text element reads white */ :root:root body .service-card:first-child :is(h2,h3,p,li,.service-learn,.ed-num){color:#fff;-webkit-text-fill-color:#fff} :root:root body .service-card:first-child li::before{color:#fff} :root:root body .service-card:first-child li{opacity:.92} :root:root body .service-page-grid .service-card h2{font-family:var(--f-display);font-weight:700;letter-spacing:-.025em;color:var(--ink)} :root:root body .service-page-grid .service-card:first-child h2{color:#fff} :root:root body .service-page-grid .service-card li{color:var(--muted)} :root:root body .service-page-grid .service-card li::before{color:var(--red)} :root:root body .service-page-grid .service-card .service-learn{font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border-bottom:1.5px solid var(--red);padding-bottom:3px;align-self:flex-start} :root:root body .service-page-grid .service-card:first-child .service-learn{color:#fff;border-color:#fff} /* Service icons: one consistent 24px line set inside solid blue chips */ :root:root body .service-card .service-icon{display:grid!important;place-items:center;flex:none} :root:root body .service-card .ed-card-head .service-icon{width:38px!important;height:38px!important} :root:root body .service-card .ed-card-head .service-icon svg{width:21px!important;height:21px!important} :root:root body .service-page-grid .service-card>.service-icon{width:48px!important;height:48px!important;margin-bottom:18px;box-shadow:3px 3px 0 var(--ink)!important} :root:root body .service-page-grid .service-card>.service-icon svg{width:25px!important;height:25px!important} :root:root body .service-card .service-icon svg{stroke:currentColor;stroke-width:1.8;fill:none;overflow:visible} :root:root body .service-card .service-icon .icon-accent{stroke:#ffffffc8;stroke-width:1.8} :root:root body .service-card .service-icon circle.icon-accent{fill:#ffffffc8;stroke:none} :root:root body .service-card:first-child .service-icon .icon-accent{stroke:#6e9bea} :root:root body .service-card:first-child .service-icon circle.icon-accent{fill:#6e9bea} :root:root body .service-card:first-child .service-icon{box-shadow:3px 3px 0 var(--ink)!important} @media(hover:hover){:root:root body .service-card:hover .service-icon svg{animation:edIconPop .6s var(--ed-ease)}} @keyframes edIconPop{40%{transform:scale(1.18) rotate(-6deg)}} /* Project arrow v2: solid blue tile, SVG arrow that slides out and back in on hover */ :root:root body .project-title-row{align-items:flex-end;gap:18px} :root:root body .project-title-row h3{flex:1;min-width:0} :root:root body .project-card .project-arrow,:root:root body .work-section .project-card .project-arrow{position:relative;overflow:hidden;flex:0 0 44px;width:44px;height:44px;font-size:0;color:transparent; background:var(--red);border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);translate:0 0} :root:root body .project-card .project-arrow::before,:root:root body .project-card .project-arrow::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;background:#fff; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .55s var(--ed-ease)} :root:root body .project-card .project-arrow::after{transform:translate(-160%,160%)} :root:root body .project-card:hover .project-arrow,:root:root body .work-section .project-card:hover .project-arrow{background:var(--ink);color:transparent;translate:-2px -2px;box-shadow:5px 5px 0 var(--red)} :root:root body .project-card:hover .project-arrow::before{transform:translate(160%,-160%)} :root:root body .project-card:hover .project-arrow::after{transform:none} @media(prefers-reduced-motion:reduce){:root:root body .project-card .project-arrow::before,:root:root body .project-card .project-arrow::after{transition:none}} /* Tools strip v2: label panel + edge-faded marquee of logo pills */ :root:root body .tool-shell{display:grid;grid-template-columns:190px minmax(0,1fr);align-items:stretch;padding:0;overflow:hidden;border-radius:0} :root:root body .tool-title{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 18px;background:var(--ink);color:var(--paper);border-right:1.5px solid var(--ink);font-size:12px;letter-spacing:.12em} :root:root body .tool-title button{width:30px;height:30px;display:grid;place-items:center;border:1.5px solid #ffffff60;background:transparent;color:var(--paper);font-size:11px;border-radius:50%;cursor:pointer;transition:background .2s ease,border-color .2s ease} :root:root body .tool-title button:hover{background:var(--red);border-color:var(--red)} :root:root body .tool-collection{padding:14px 0;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} :root:root body .tools-group{gap:12px;padding-right:12px} :root:root body .tool-entry{flex:0 0 auto;flex-direction:row;gap:10px;min-height:0;padding:9px 16px 9px 9px;border:1.5px solid var(--ink);border-radius:999px;background:var(--card);color:var(--ink); font-family:var(--f-display);font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;box-shadow:none;transition:transform .35s var(--ed-ease),box-shadow .35s var(--ed-ease),background .2s ease,color .2s ease} :root:root body .tool-entry:hover{background:var(--card);color:var(--ink);transform:translateY(-3px);box-shadow:3px 3px 0 var(--red)} :root:root body .tool-entry .tool-logo-wrap{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--paper);border:1px solid var(--hair);overflow:hidden} :root:root body .tool-entry .tool-logo-wrap img{width:20px;height:20px;object-fit:contain;filter:none} :root:root body .tool-entry .tool-logo-wrap b{font-size:13px;color:var(--red)} @media(max-width:760px){:root:root body .tool-shell{grid-template-columns:1fr}:root:root body .tool-title{border-right:0;border-bottom:1.5px solid var(--ink);padding:12px 16px}} /* Blog */ .blog-filters{margin-bottom:30px} .blog-lead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);background:var(--card);border:1.5px solid var(--ink);box-shadow:var(--ed-shadow);margin-bottom:40px;color:var(--ink);transition:transform .5s var(--ed-ease),box-shadow .5s var(--ed-ease)} .blog-lead:hover{transform:translate(-4px,-4px);box-shadow:var(--ed-shadow-lg)} .blog-lead-media{position:relative;overflow:hidden;border-right:1.5px solid var(--ink);background:var(--ink);min-height:320px} .blog-lead-media img,.blog-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ed-ease)} .blog-lead:hover .blog-lead-media img,.blog-card:hover .blog-card-media img{transform:scale(1.05)} .blog-lead-media em{position:absolute;top:16px;left:16px;font-family:var(--f-mono);font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--red);color:#fff;padding:5px 9px} :is(.blog-lead-media,.blog-card-media)>span{display:grid;place-items:center;height:100%;font-family:var(--f-display);font-weight:800;font-size:48px;color:var(--red)} .blog-lead-body{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:16px} .blog-lead-body h2{margin:0;font-family:var(--f-display);font-weight:800;font-size:clamp(28px,3vw,44px);line-height:1.02;letter-spacing:-.04em;color:var(--ink)} .blog-lead-body p{margin:0;font-size:17px;line-height:1.6;color:var(--muted)} .blog-read{margin-top:auto;align-self:flex-start;font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-bottom:1.5px solid var(--red);padding-bottom:3px} .blog-read i{font-style:normal;display:inline-block;transition:transform .45s var(--ed-ease)} .blog-lead:hover .blog-read i{transform:translate(3px,-3px)} .blog-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .blog-meta b{background:var(--red-soft);color:var(--red);padding:4px 8px;font-weight:600} .blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px} .blog-card{display:flex;flex-direction:column;background:var(--card);border:1.5px solid var(--ink);box-shadow:var(--ed-shadow);color:var(--ink);transition:transform .5s var(--ed-ease),box-shadow .5s var(--ed-ease)} .blog-card[hidden],.blog-lead[hidden]{display:none} .blog-card:hover{transform:translate(-5px,-5px);box-shadow:var(--ed-shadow-lg)} .blog-card-media{aspect-ratio:16/10;overflow:hidden;border-bottom:1.5px solid var(--ink);background:var(--ink)} .blog-card-body{flex:1;display:flex;flex-direction:column;gap:12px;padding:20px} .blog-card-body h3{margin:0;font-family:var(--f-display);font-weight:700;font-size:21px;line-height:1.2;letter-spacing:-.025em;color:var(--ink)} .blog-card-body p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)} .blog-card-body .ed-card-foot{color:var(--ink)} :root:root body .blog-article{max-width:860px} :root:root body .blog-article .article-header h1{font-family:var(--f-display);font-weight:800;font-size:clamp(36px,5vw,64px);line-height:1;letter-spacing:-.045em;color:var(--ink)} .blog-byline{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:18px;border-top:1.5px dashed var(--ink)} .blog-byline b{display:block;font-family:var(--f-display);color:var(--ink)} .blog-byline small{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .blog-avatar{width:42px;height:42px;display:grid;place-items:center;background:var(--red);color:#fff;font-family:var(--f-display);font-weight:800;border:1.5px solid var(--ink)} :root:root body .blog-content{padding:clamp(24px,4vw,48px);font-size:18px;line-height:1.75} :root:root body .blog-content p{color:var(--ink-2);margin:0 0 20px} :root:root body .blog-content h2{font-family:var(--f-display);font-weight:800;font-size:28px;letter-spacing:-.03em;margin:34px 0 12px;color:var(--ink)} :root:root body .blog-content h2:first-child{margin-top:0} :root:root body .blog-content ul{margin:0 0 22px;padding:0;list-style:none;display:grid;gap:10px} :root:root body .blog-content li{position:relative;padding-left:28px;color:var(--ink-2)} :root:root body .blog-content li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:12px;background:var(--red)} .blog-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:44px 0;padding:clamp(24px,4vw,40px);background:var(--ink);color:var(--paper);box-shadow:8px 8px 0 var(--red)} .blog-cta h2{margin:10px 0 0;color:var(--paper);font-family:var(--f-display);font-weight:800;font-size:clamp(28px,3.4vw,44px);letter-spacing:-.04em} .blog-cta h2 em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:#5b95ff} .blog-cta .section-kicker{color:var(--paper)} .blog-cta .btn.primary{background:var(--paper);color:var(--ink);border-color:var(--paper)} .blog-related{margin:20px 0 30px} .blog-related .section-kicker{margin-bottom:20px} @media(max-width:1000px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){.blog-lead{grid-template-columns:1fr}.blog-lead-media{border-right:0;border-bottom:1.5px solid var(--ink);min-height:220px}} @media(max-width:560px){.blog-grid{grid-template-columns:1fr;gap:22px}} :root:root body .blog-content{white-space:normal} :root:root body .blog-cta h2,:root:root body .blog-cta .section-kicker{color:var(--paper);-webkit-text-fill-color:var(--paper)} :root:root body .blog-cta h2 em{color:#5b95ff;-webkit-text-fill-color:#5b95ff} :root:root body .blog-cta .btn.primary{background:var(--paper);color:var(--ink);border-color:var(--paper);box-shadow:5px 5px 0 var(--red)} /* Blog article header: left-aligned editorial layout with a tidy byline */ :root:root body .blog-article .article-header{text-align:left;max-width:none;margin:28px 0 30px;padding:0} :root:root body .blog-article .article-header .detail-category{display:inline-block;margin:0 0 18px;padding:6px 10px;border:0;border-radius:0;background:var(--red);color:#fff;font-size:11px;font-weight:600;letter-spacing:.1em} :root:root body .blog-article .article-header h1{margin:0 0 16px;letter-spacing:-.035em;line-height:1.04;text-wrap:balance} :root:root body .blog-article .article-header>p{margin:0;max-width:680px;font-size:19px;line-height:1.55;color:var(--muted)} :root:root body .blog-byline{display:flex;align-items:center;justify-content:flex-start;gap:14px;margin-top:26px;padding-top:20px} :root:root body .blog-byline>span:last-child{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left} :root:root body .blog-byline b{font-size:16px;line-height:1.2} :root:root body .blog-byline small{display:block;margin:0;padding:0;font-size:11px;line-height:1.3;color:var(--muted)} :root:root body .blog-avatar{flex:none;width:46px;height:46px;font-size:15px;box-shadow:3px 3px 0 var(--ink)} :root:root body .blog-article .detail-cover{width:100%;aspect-ratio:16/8;object-fit:cover;margin-bottom:34px} /* Service icons v3: duotone — light fill, crisp line, solid accent */ :root:root body .service-card .service-icon .icon-fill{fill:currentColor;stroke:none;opacity:.22} :root:root body .service-card .service-icon .icon-solid{fill:currentColor;stroke:none} :root:root body .service-card .service-icon svg{stroke-width:1.7} :root:root body .service-page-grid .service-card>.service-icon{width:56px!important;height:56px!important} :root:root body .service-page-grid .service-card>.service-icon svg{width:30px!important;height:30px!important} :root:root body .service-card .ed-card-head .service-icon{width:42px!important;height:42px!important} :root:root body .service-card .ed-card-head .service-icon svg{width:24px!important;height:24px!important} :root:root body .service-card .service-icon{background:linear-gradient(145deg,#1663e0,var(--red-deep))!important;transition:transform .45s var(--ed-ease),box-shadow .45s var(--ed-ease)} :root:root body .service-card:first-child .service-icon{background:#fff!important} @media(hover:hover){:root:root body .service-card:hover .service-icon{transform:translate(-2px,-2px) rotate(-4deg);box-shadow:5px 5px 0 var(--ink)!important}} /* Header v2: one consistent pill — soft shadow, rounded CTA, round logo mark */ @media(min-width:761px){ :root:root body .site-header .nav-wrap,:root:root body .site-header.scrolled .nav-wrap{height:66px;padding:0 10px 0 12px;border:1.5px solid var(--ink);border-radius:999px;background:#ffffffeb;box-shadow:0 10px 30px #0b122014,0 2px 0 var(--ink)} :root:root body .site-header.scrolled .nav-wrap{box-shadow:0 14px 40px #0b12201f,0 2px 0 var(--ink)} } :root:root body .site-header .brand{gap:10px} :root:root body .site-header .brand-mark{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--ink);box-shadow:none;background:#fff;overflow:hidden;display:grid;place-items:center} :root:root body .site-header .brand-mark img{width:100%;height:100%;object-fit:cover;border-radius:50%} :root:root body .site-header .brand strong{font-size:16px;letter-spacing:-.02em} :root:root body .site-header .nav-cta{min-height:46px;padding:0 20px;border-radius:999px;background:var(--ink);border:1.5px solid var(--ink);box-shadow:none;font-size:14px} :root:root body .site-header .nav-cta span{display:grid;place-items:center;width:24px;height:24px;margin-right:-8px;border-radius:50%;background:var(--red);color:#fff;font-size:12px} :root:root body .site-header .nav-cta:hover{transform:none;background:var(--red);border-color:var(--red);box-shadow:0 8px 20px #0b52c340} :root:root body .site-header .nav-cta:hover span{background:#fff;color:var(--red);transform:rotate(45deg)} :root:root body .site-header #navMenu>a,:root:root body .site-header .nav-dropdown-toggle{font-size:14.5px;font-weight:600;padding:9px 15px} :root:root body .nav-marker{border-radius:999px;background:var(--ink)} /* Hero backdrop: faded blueprint grid, glows, rings and small marks fill the side space */ :root:root body.home-page .ed-hero{position:relative;isolation:isolate;overflow:clip} :root:root body.home-page .ed-hero>.container{position:relative;z-index:1} .ed-hero-deco{position:absolute;inset:0;z-index:0;pointer-events:none} .deco-grid{position:absolute;inset:0;background-image:linear-gradient(#0b52c314 1px,transparent 1px),linear-gradient(90deg,#0b52c314 1px,transparent 1px);background-size:72px 72px; mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,transparent 30%,#000 75%);-webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,transparent 30%,#000 75%)} .deco-glow{position:absolute;width:520px;aspect-ratio:1;border-radius:50%;filter:blur(20px);opacity:.55} .deco-glow-a{left:-220px;top:10%;background:radial-gradient(circle,#0b52c330,transparent 65%)} .deco-glow-b{right:-200px;bottom:-10%;background:radial-gradient(circle,#3b7bef33,transparent 65%)} .deco-rings{position:absolute;right:-180px;top:50%;width:620px;aspect-ratio:1;margin-top:-310px} .deco-rings i{position:absolute;inset:0;border:1.5px dashed #0b52c340;border-radius:50%;animation:edSpin 60s linear infinite} .deco-rings i:nth-child(2){inset:70px;border-style:solid;border-color:#0b122014;animation-duration:90s;animation-direction:reverse} .deco-rings i:nth-child(3){inset:150px;border-color:#0b52c326;animation-duration:45s} .deco-rings i:nth-child(1)::after{content:"";position:absolute;top:50%;left:-7px;width:12px;height:12px;border-radius:50%;background:var(--red);box-shadow:0 0 0 5px #0b52c322} .deco-rings i:nth-child(3)::after{content:"";position:absolute;top:-6px;left:50%;width:10px;height:10px;background:var(--ink)} .deco-word{position:absolute;top:50%;font-family:var(--f-mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:#0b122040;white-space:nowrap} .deco-word-left{left:34px;transform:translateY(-50%) rotate(-90deg) translateX(-50%);transform-origin:left center} .deco-word-right{right:34px;transform:translateY(-50%) rotate(90deg) translateX(50%);transform-origin:right center} .deco-dots{position:absolute;left:5%;bottom:14%;width:120px;height:90px;background-image:radial-gradient(circle,#0b52c355 1.6px,transparent 2px);background-size:15px 15px} .deco-dots-b{left:auto;right:9%;top:12%;bottom:auto;width:90px;height:90px;background-image:radial-gradient(circle,#0b122030 1.6px,transparent 2px)} .deco-plus{position:absolute;font-family:var(--f-display);font-weight:300;font-size:30px;line-height:1;color:var(--red);opacity:.55} .deco-plus.p1{left:9%;top:22%}.deco-plus.p2{left:14%;bottom:20%;color:var(--ink);opacity:.25} .deco-plus.p3{right:12%;top:16%;color:var(--ink);opacity:.25}.deco-plus.p4{right:6%;bottom:24%} .deco-square{position:absolute;width:16px;height:16px;border:1.5px solid var(--ink);opacity:.35;animation:edFloat 7s ease-in-out infinite} .deco-square.s1{left:7%;top:58%;rotate:12deg}.deco-square.s2{right:16%;bottom:9%;background:var(--red);border-color:var(--red);opacity:.5;animation-delay:-3s} [data-depth]{translate:0 var(--deco-shift,0px);will-change:translate} @media(max-width:1100px){.deco-word{display:none}.deco-rings{right:-320px;opacity:.6}} @media(max-width:760px){.deco-rings,.deco-glow-b,.deco-dots-b,.deco-plus.p3,.deco-plus.p4,.deco-square{display:none}.deco-grid{mask-image:linear-gradient(#000,transparent 70%);-webkit-mask-image:linear-gradient(#000,transparent 70%);opacity:.6}} @media(prefers-reduced-motion:reduce){.deco-rings i,.deco-square{animation:none}} .deco-grid{background-image:linear-gradient(#0b52c31c 1px,transparent 1px),linear-gradient(90deg,#0b52c31c 1px,transparent 1px)} .deco-rings i{border-color:#0b52c35a} .deco-word{color:#0b122055} /* Tools label panel in brand blue */ :root:root body .tool-title{background:linear-gradient(150deg,#1663e0,var(--red-deep));color:#fff;border-right:1.5px solid var(--ink)} :root:root body .tool-title button{border-color:#ffffff80;color:#fff} :root:root body .tool-title button:hover{background:#fff;color:var(--red);border-color:#fff} :root:root body .tool-entry .tool-logo-wrap{background:#fff} :root:root body .tool-entry .tool-logo-wrap img{width:22px;height:22px} /* Calmer backdrop: lighter grid, fewer marks */ .deco-word{display:none} .deco-grid{background-image:linear-gradient(#0b52c312 1px,transparent 1px),linear-gradient(90deg,#0b52c312 1px,transparent 1px)} .deco-plus{opacity:.4} /* Minimal hero backdrop: two soft glows and one faint ring pair */ .deco-rings i{border-style:solid;border-color:#0b52c31f} .deco-rings i:nth-child(2){inset:90px;border-color:#0b122010} .deco-rings i:nth-child(1)::after{width:10px;height:10px;box-shadow:0 0 0 4px #0b52c31a} .deco-glow{opacity:.45} /* Marquee v2: two tapes crossing in an X, both fully readable */ .ed-marquee{display:grid;place-items:center;padding:0;height:clamp(170px,17vw,240px);overflow:hidden} .ed-marquee-row{grid-area:1/1;width:112%;margin:0;border-block:1.5px solid var(--ink)} .ed-marquee-ink{rotate:-2.5deg;z-index:2;box-shadow:0 14px 30px #0b122022} .ed-marquee-ink span{font-size:clamp(32px,4.6vw,68px);letter-spacing:-.025em;line-height:1.3;padding-block:4px} .ed-marquee-ink span em{padding-right:.06em} .ed-marquee-ink i{font-size:.45em;margin:0 .15em} .ed-marquee-red{rotate:2.5deg;margin:0;z-index:1;opacity:.95} .ed-marquee-red span{font-size:clamp(12px,1.1vw,15px);letter-spacing:.16em;line-height:3.2} @media(max-width:760px){.ed-marquee{height:150px}.ed-marquee-ink span{font-size:30px}} .ed-marquee-ink{translate:0 -18px} .ed-marquee-red{translate:0 34px} .ed-marquee{height:clamp(200px,19vw,270px)} .ed-marquee-red{translate:0 50px}.ed-marquee-ink{translate:0 -24px} /* Mobile: long card stacks become swipe carousels with snap and a dot indicator */ .ed-dots{display:none} @media(max-width:760px){ :root:root body :is(.expertise-grid,.home-service-grid,.process-grid,.blog-preview-section .blog-grid,.work-section:not(.listing-section) .project-grid,.courses-preview-section .course-grid,.updates-preview-section .update-grid,.reviews-preview-section .review-grid,.extensions-preview-section .extension-grid){ display:flex!important;grid-template-columns:none;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none; margin-inline:calc(50% - 50vw);padding:6px 20px 22px;scroll-padding-inline:20px} :root:root body :is(.expertise-grid,.home-service-grid,.process-grid,.blog-preview-section .blog-grid,.work-section:not(.listing-section) .project-grid,.courses-preview-section .course-grid,.updates-preview-section .update-grid,.reviews-preview-section .review-grid,.extensions-preview-section .extension-grid)::-webkit-scrollbar{display:none} :root:root body :is(.expertise-grid,.home-service-grid,.process-grid,.blog-preview-section .blog-grid,.work-section:not(.listing-section) .project-grid,.courses-preview-section .course-grid,.updates-preview-section .update-grid,.reviews-preview-section .review-grid,.extensions-preview-section .extension-grid)>*{flex:0 0 84%;scroll-snap-align:start;min-height:0} :root:root body :is(.expertise-grid,.home-service-grid,.process-grid)>*:hover{transform:none} .ed-dots{display:flex;justify-content:center;gap:6px;margin:4px 0 0} .ed-dots i{width:7px;height:7px;background:#0b122026;transition:width .35s var(--ed-ease),background .3s ease} .ed-dots i.on{width:22px;background:var(--red)} .ed-swipe-hint{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .ed-swipe-hint::after{content:"→";color:var(--red);animation:edNudgeX 1.6s var(--ed-ease) infinite} @keyframes edNudgeX{50%{transform:translateX(4px)}} /* Tighter mobile typography and spacing */ :root:root body .section{padding-block:64px} :root:root body .section-head{margin-bottom:24px;gap:14px} :root:root body .section-head h2,:root:root body .work-intro h2,:root:root body .system-intro h2,:root:root body .about-copy h2{font-size:clamp(34px,10vw,46px)} .skill-name{font-size:clamp(28px,8.6vw,40px);white-space:nowrap} :root:root body .system-steps li{padding:18px 4px} :root:root body .system-steps h3{font-size:24px} :root:root body .filters,:root:root body .work-section .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(50% - 50vw);padding:2px 20px 8px} :root:root body .filters::-webkit-scrollbar{display:none} :root:root body .filters button{flex:none} :root:root body .about-visual{height:300px} :root:root body .contact-shell{padding:30px 22px;box-shadow:8px 8px 0 var(--red)} :root:root body .contact-title{flex-direction:column;gap:14px} .ed-orb{width:112px;height:112px;font-size:17px} .ed-marquee{height:170px} } @media(prefers-reduced-motion:reduce){.ed-swipe-hint::after{animation:none}} /* Hamburger morphs into a close mark while the mobile menu is open */ :root:root body .menu-btn span{transition:transform .35s var(--ed-ease)} :root:root body .menu-btn.is-open span:first-child{transform:translateY(3.5px) rotate(45deg)} :root:root body .menu-btn.is-open span:last-child{transform:translateY(-3.5px) rotate(-45deg)} /* Mobile hero: stickers sit on the poster edges again (older layers forced them into the flow) */ @media(max-width:760px){ :root:root body.home-page .ed-hero .hero-visual{display:block!important;height:auto!important;max-width:400px;margin:26px auto 0;padding:0 14px 18px!important;overflow:visible!important} :root:root body.home-page .ed-hero .hero-visual .skill-chip{position:absolute!important;inset:auto!important;display:inline-flex!important;width:auto!important;min-height:0!important;padding:7px 10px!important;font-size:10px!important;gap:6px!important;z-index:6} :root:root body.home-page .ed-hero .hero-visual .skill-chip em{display:none} :root:root body.home-page .ed-hero .hero-visual .chip-a{top:16%!important;left:0!important} :root:root body.home-page .ed-hero .hero-visual .chip-b{top:38%!important;right:0!important} :root:root body.home-page .ed-hero .hero-visual .chip-c{bottom:30%!important;left:0!important} :root:root body.home-page .ed-hero .hero-visual .chip-d{bottom:13%!important;right:0!important} .ed-poster .ed-card-head{font-size:10px;letter-spacing:.06em;align-items:center} .ed-poster .ed-card-head>b{font-size:9.5px;padding:4px 7px} .ed-poster .ed-card-head>span{white-space:nowrap} .ed-poster .ed-card-foot{font-size:9.5px} } /* Mobile tools strip: slim label bar and smaller pills */ @media(max-width:760px){ :root:root body .tools-strip{padding:4px 0 10px} :root:root body .tool-shell{box-shadow:5px 5px 0 var(--ink)} :root:root body .tool-title{padding:9px 12px 9px 14px;font-size:10.5px;letter-spacing:.14em;border-bottom:1.5px solid var(--ink)} :root:root body .tool-title button{width:26px;height:26px;font-size:9px} :root:root body .tool-collection{padding:10px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} :root:root body .tools-group{gap:8px;padding-right:8px} :root:root body .tool-entry{padding:5px 12px 5px 5px;gap:8px;font-size:12.5px} :root:root body .tool-entry .tool-logo-wrap{width:28px;height:28px} :root:root body .tool-entry .tool-logo-wrap img{width:17px;height:17px} } :root:root body.home-page .ed-hero{padding-top:56px}@media(max-width:760px){:root:root body.home-page .ed-hero{padding-top:28px}} /* Hero poster polish: light behind the character, floor shadow, gentle scan line, chips clear of the footer */ .ed-poster{background-image:radial-gradient(ellipse 60% 48% at 50% 46%,#ffffff40,transparent 70%),linear-gradient(180deg,#1663e0,#0b52c3 55%,#083e96)} .ed-poster::after{content:"";position:absolute;left:20px;right:20px;top:58px;height:2px;background:linear-gradient(90deg,transparent,#ffffffb0,transparent);opacity:.7;animation:edScan 5s ease-in-out infinite;pointer-events:none} @keyframes edScan{0%,100%{transform:translateY(0);opacity:0}10%,90%{opacity:.7}50%{transform:translateY(min(420px,60vw))}} :root:root body.home-page .ed-poster .hero-parallax::after{content:"";position:absolute;left:30%;right:30%;bottom:2px;height:16px;border-radius:50%;background:radial-gradient(ellipse,#0b122066,transparent 70%);z-index:-1} :root:root body.home-page .ed-poster .hero-character{z-index:1} .ed-poster .ed-card-foot{position:relative;z-index:2} :root:root body.home-page .ed-hero .chip-d{bottom:15%} :root:root body.home-page .ed-hero .skill-chip{backdrop-filter:blur(6px)} @media(prefers-reduced-motion:reduce){.ed-poster::after{animation:none;opacity:0}} /* Serif accent words: real gaps between words and comfortable line spacing in big headings */ :root:root body :is(h1,h2) em,:root:root body .inner-hero h1 span{word-spacing:.14em;letter-spacing:0} :root:root body .inner-hero h1{line-height:1.02;letter-spacing:-.04em} :root:root body .inner-hero h1 span{line-height:1.05} :root:root body :is(.section-head,.work-intro,.system-intro,.about-copy,.contact-title) h2{line-height:1} /* About story cards: same language as the other editorial cards */ :root:root body .story-grid{gap:30px} :root:root body .story-card{display:flex;flex-direction:column;padding:22px 24px 24px} :root:root body .story-card small{display:block;font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--red);padding-bottom:12px;margin-bottom:18px;border-bottom:1.5px solid var(--ink)} :root:root body .story-card h2{font-family:var(--f-display);font-weight:700;font-size:22px;line-height:1.2;letter-spacing:-.025em;margin:0 0 12px;color:var(--ink)} :root:root body .story-card p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.65} :root:root body .story-card:first-child{background:var(--red);color:#fff} :root:root body .story-card:first-child small{color:#fff;border-color:#ffffffb0} :root:root body .story-card:first-child :is(h2,p){color:#fff;-webkit-text-fill-color:#fff} /* Ampersands inside serif accents use the upright grotesk so they read clearly */ .amp{font-family:var(--f-display);font-style:normal;font-weight:700;font-size:.72em;letter-spacing:0;vertical-align:.06em;margin:0 .04em} :root:root body .inner-hero h1{margin-bottom:26px;padding-bottom:.06em} /* Mobile section heads stack left-aligned; process numbers sit left */ @media(max-width:760px){ :root:root body .section-head{flex-direction:column;align-items:flex-start;text-align:left} :root:root body .section-head>div{text-align:left} } :root:root body .process-card>span{align-self:flex-start;text-align:left;display:block} /* Projects page: 3 x 3 grid on every screen; phones get compact square tiles */ :root:root body.projects-page .project-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px} @media(max-width:760px){ :root:root body.projects-page .project-grid{gap:10px} :root:root body.projects-page .project-card{box-shadow:3px 3px 0 var(--ink);border-width:1.5px} :root:root body.projects-page .project-media{aspect-ratio:1/1!important;height:auto!important;min-height:0!important} :root:root body.projects-page .project-media img{width:100%;height:100%;object-fit:cover} :root:root body.projects-page .project-media em{font-size:8px;padding:3px 5px;top:5px;left:5px} :root:root body.projects-page .project-body{padding:7px 7px 8px} :root:root body.projects-page .project-body :is(.project-type-badge,small){display:none} :root:root body.projects-page .project-title-row{gap:4px} :root:root body.projects-page .project-body :is(h2,h3){font-size:11.5px!important;margin:0;line-height:1.25;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} :root:root body.projects-page .project-card .project-arrow{display:none} } .pt-short{display:none} @media(max-width:760px){ :root:root body.projects-page .pt-full{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} :root:root body.projects-page .pt-short{display:inline} } /* Contact guide: seated male character working on a laptop (inline SVG) */ :root:root body.contact-page .contact-assistant .robot-stage{width:170px;height:170px;flex:none} :root:root body.contact-page .guide-svg{width:100%;height:100%;overflow:visible} .guide-hand-left,.guide-hand-right{transform-box:view-box} .contact-assistant:is([data-state="idle"],[data-state="watch"],[data-state="sending"]) .guide-hand-left{animation:edType .32s ease-in-out infinite alternate} .contact-assistant:is([data-state="idle"],[data-state="watch"],[data-state="sending"]) .guide-hand-right{animation:edType .32s ease-in-out -.16s infinite alternate} .contact-assistant[data-state="idle"] .guide-hand-left,.contact-assistant[data-state="idle"] .guide-hand-right{animation-duration:.6s} @keyframes edType{to{transform:translateY(-2.5px)}} .guide-eyes ellipse{transform-box:fill-box;transform-origin:center;animation:edBlink2 4.5s infinite} @keyframes edBlink2{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}} .guide-face-glow{animation:edGlow 2.6s ease-in-out infinite} @keyframes edGlow{50%{opacity:.45}} .guide-logo{transform-box:fill-box;transform-origin:center;animation:edPulseLogo 3s ease-in-out infinite} @keyframes edPulseLogo{50%{transform:scale(1.08)}} @media(prefers-reduced-motion:reduce){.guide-hand-left,.guide-hand-right,.guide-eyes ellipse,.guide-face-glow,.guide-logo{animation:none!important}} /* Hero poster v3: no text rows, a single corner tag, six evenly spaced skill stickers */ .ed-poster{padding:16px} .ed-poster::before{inset:16px} .ed-poster-tag{position:absolute;top:16px;right:16px;z-index:3;background:#fff;color:var(--red);font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px} :root:root body.home-page .ed-poster .hero-parallax{margin:22px 0 0} :root:root body.home-page .ed-hero .chip-a{top:10%;left:-34px;bottom:auto;right:auto} :root:root body.home-page .ed-hero .chip-e{top:40%;left:-46px;bottom:auto;right:auto;rotate:0deg;animation-delay:-2s} :root:root body.home-page .ed-hero .chip-c{top:auto;bottom:16%;left:-34px;right:auto} :root:root body.home-page .ed-hero .chip-b{top:22%;right:-8px;left:auto;bottom:auto} :root:root body.home-page .ed-hero .chip-f{top:52%;right:-22px;left:auto;bottom:auto;rotate:0deg;animation-delay:-3.5s} :root:root body.home-page .ed-hero .chip-d{top:auto;bottom:6%;right:-4px;left:auto} @media(max-width:760px){ :root:root body.home-page .ed-hero .hero-visual .chip-a{top:9%!important;left:0!important} :root:root body.home-page .ed-hero .hero-visual .chip-e{top:38%!important;left:0!important} :root:root body.home-page .ed-hero .hero-visual .chip-c{top:auto!important;bottom:16%!important;left:0!important} :root:root body.home-page .ed-hero .hero-visual .chip-b{top:22%!important;right:0!important} :root:root body.home-page .ed-hero .hero-visual .chip-f{top:52%!important;right:0!important} :root:root body.home-page .ed-hero .hero-visual .chip-d{top:auto!important;bottom:5%!important;right:0!important} } @media(max-width:760px){:root:root body.home-page .ed-hero .hero-visual .skill-chip{font-size:9px!important;padding:5px 7px!important;gap:4px!important;letter-spacing:.04em}:root:root body.home-page .ed-hero .hero-visual .chip-e{top:44%!important}:root:root body.home-page .ed-hero .hero-visual .chip-f{top:58%!important}} @media(max-width:760px){:root:root body.home-page .ed-hero .hero-visual :is(.chip-a,.chip-c,.chip-e){right:auto!important}:root:root body.home-page .ed-hero .hero-visual :is(.chip-b,.chip-d,.chip-f){left:auto!important}}:root:root body.home-page .ed-hero :is(.chip-a,.chip-c,.chip-e){right:auto}:root:root body.home-page .ed-hero :is(.chip-b,.chip-d,.chip-f){left:auto} :root:root body.home-page .ed-hero .hero-visual .skill-chip{min-width:0!important;grid-column:auto!important;justify-content:flex-start!important} /* Process cards: white like the other card sections, first card blue */ :root:root body .process-card{background:var(--card);color:var(--ink);box-shadow:var(--ed-shadow)} :root:root body .process-card .ed-card-head{color:var(--ink);border-color:var(--ink)} :root:root body .process-card>span{color:var(--red);-webkit-text-fill-color:var(--red)} :root:root body .process-card h3{color:var(--ink)} :root:root body .process-card p{color:var(--muted)} @media(hover:hover){:root:root body .process-card:hover{box-shadow:var(--ed-shadow-lg)}} :root:root body .process-card:first-child{background:var(--red);color:#fff} :root:root body .process-card:first-child .ed-card-head{color:#fff;border-color:#ffffffb0} :root:root body .process-card:first-child :is(h3,p),:root:root body .process-card:first-child>span{color:#fff;-webkit-text-fill-color:#fff} :root:root body .service-process-grid .process-card{background:var(--card)} :root:root body .service-process-grid .process-card:first-child{background:var(--red)} /* Skill rows v2: icon tile, tag pills, blue hover fill, solid arrow tile */ :root:root body .skill-stack .section-head p{margin-top:18px} .skill-row{grid-template-columns:44px 52px minmax(0,1fr) auto 50px;gap:22px;padding:24px 18px} .skill-row::before{background:var(--red)} .skill-num{font-size:13px} .skill-ico .service-icon{width:52px;height:52px;display:grid;place-items:center;background:var(--red);color:#fff;border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transition:background .3s ease,color .3s ease,transform .5s var(--ed-ease)} .skill-ico .service-icon svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.7;fill:none} .skill-ico .service-icon .icon-fill{fill:currentColor;stroke:none;opacity:.22} .skill-ico .service-icon .icon-solid{fill:currentColor;stroke:none} .skill-ico .service-icon .icon-accent{stroke:#ffffffc8} .skill-name{font-size:clamp(34px,4.8vw,72px)} .skill-tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:280px} .skill-tags b{font-weight:500;padding:5px 9px;border:1.5px solid var(--hair);background:var(--card);color:var(--muted);transition:border-color .3s ease,color .3s ease,background .3s ease} .skill-arrow{background:var(--red);color:#fff;border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)} @media(hover:hover){ .skill-row:hover .skill-name{color:#fff} .skill-row:hover .skill-name em{color:#cfe0ff} .skill-row:hover .skill-num{color:#fff} .skill-row:hover .skill-ico .service-icon{background:#fff;color:var(--red);transform:rotate(-6deg)} .skill-row:hover .skill-ico .service-icon .icon-accent{stroke:var(--red)} .skill-row:hover .skill-tags b{background:transparent;border-color:#ffffff70;color:#fff} .skill-row:hover .skill-arrow{background:#fff;color:var(--red);border-color:#fff;transform:none;translate:-2px -2px;box-shadow:4px 4px 0 var(--ink)} } @media(max-width:900px){.skill-row{grid-template-columns:36px 44px minmax(0,1fr) 44px}.skill-tags{grid-column:3/4;justify-content:flex-start;max-width:none;margin-top:-6px}.skill-arrow{grid-row:1;grid-column:4}.skill-ico .service-icon{width:44px;height:44px}} @media(max-width:760px){.skill-row{grid-template-columns:28px 40px minmax(0,1fr) 38px;gap:10px;padding:18px 4px}.skill-ico .service-icon{width:38px;height:38px}.skill-ico .service-icon svg{width:20px;height:20px}.skill-tags b{font-size:9.5px;padding:3px 6px}} :root:root body .skill-ico .service-icon{background:var(--red)!important;color:#fff!important;border:1.5px solid var(--ink)!important;border-radius:0!important;box-shadow:3px 3px 0 var(--ink)!important;margin:0!important}@media(hover:hover){:root:root body .skill-row:hover .skill-ico .service-icon{background:#fff!important;color:var(--red)!important}} @media(min-width:901px){.skill-tags{max-width:380px}} @media(max-width:760px){.skill-name{font-size:clamp(22px,6.6vw,30px)!important}} /* Footer v2: CTA band, soft glows and dot texture so the wide sides feel intentional */ :root:root body .site-footer{overflow:hidden;isolation:isolate;padding-top:72px; background-color:var(--ink);background-image:radial-gradient(ellipse 40% 60% at 0% 30%,#0b52c33d,transparent 70%),radial-gradient(ellipse 40% 60% at 100% 80%,#3b7bef2e,transparent 70%),radial-gradient(circle at 1px 1px,#ffffff12 1px,transparent 1.4px); background-size:auto,auto,26px 26px} .footer-cta{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-bottom:48px;margin-bottom:48px;border-bottom:1.5px solid #ffffff22} .footer-cta h2{margin:12px 0 0;font-family:var(--f-display);font-weight:800;font-size:clamp(36px,5vw,72px);line-height:1;letter-spacing:-.045em;color:var(--paper)!important;-webkit-text-fill-color:var(--paper)} .footer-cta h2 em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:#5b95ff;-webkit-text-fill-color:#5b95ff;letter-spacing:-.01em} .footer-cta-kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#ffffffb8!important} .footer-cta-kicker i{width:8px;height:8px;border-radius:50%;background:#18a957;box-shadow:0 0 0 0 #18a95766;animation:edPulse 2s infinite} .footer-cta-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap} :root:root body .site-footer .footer-cta-mail{font-family:var(--f-display);font-weight:700;font-size:18px;color:var(--paper);border-bottom:1.5px solid #5b95ff;padding-bottom:4px} :root:root body .site-footer .footer-cta-mail:hover{color:#5b95ff} :root:root body .site-footer .footer-cta .btn.primary{background:var(--red);border-color:var(--red);color:#fff;box-shadow:5px 5px 0 #fff} :root:root body .site-footer .footer-cta .btn.primary:hover{box-shadow:8px 8px 0 #fff} :root:root body .site-footer .footer-cta .btn.primary span{color:#fff} /* Back-to-top: brand blue so it stays visible over the dark footer */ :root:root body .back-to-top{width:46px;height:46px;border-radius:50%;background:var(--red);border:1.5px solid #fff;color:#fff;box-shadow:0 8px 24px #0b52c355;transition:transform .35s var(--ed-ease),box-shadow .35s var(--ed-ease)} :root:root body .back-to-top:hover{transform:translateY(-3px);box-shadow:0 12px 30px #0b52c377} @media(max-width:760px){.footer-cta{padding-bottom:34px;margin-bottom:34px}.footer-cta-actions{gap:16px}:root:root body .site-footer .footer-cta-mail{font-size:15px}} @media(prefers-reduced-motion:reduce){.footer-cta-kicker i{animation:none}} :root:root body:is(:has(.contact-section),.contact-page) .footer-cta{display:none} /* Mobile footer: tidy columns, contact block as a card, bottom bar clear of the back-to-top button */ @media(max-width:760px){ :root:root body .site-footer{padding-top:48px} :root:root body .footer-grid{grid-template-columns:1fr 1fr;gap:30px 18px} :root:root body .footer-brand-block,:root:root body .footer-contact{grid-column:1/-1} :root:root body .footer-links{gap:12px} :root:root body .footer-links a{font-size:14.5px} :root:root body .footer-contact{padding:18px;border:1.5px solid #ffffff26;background:#ffffff08} :root:root body .footer-contact a,:root:root body .footer-contact span{font-size:14px} :root:root body .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px;padding:22px 0 calc(34px + 56px);font-size:10.5px;letter-spacing:.08em} :root:root body .footer-bottom p{margin:0} :root:root body .back-to-top{right:16px;bottom:18px} } /* Marquee colours: brand-blue headline tape over a dark caption tape */ .ed-marquee-ink{background:linear-gradient(90deg,#083e96,#1663e0 50%,#083e96);color:#fff;border-color:#062f73;box-shadow:0 16px 34px #0b52c340} .ed-marquee-ink em{color:#cfe0ff} .ed-marquee-ink i{color:#9cc2ff} .ed-marquee-red{background:var(--ink);color:#e7eefb;border-color:var(--ink)} .ed-marquee-red span{color:#e7eefb} /* Marquee v3: two separate tapes with opposite gentle tilts, nothing hidden behind the other */ .ed-marquee{display:flex!important;flex-direction:column;gap:14px;height:auto!important;padding:34px 0 42px!important} .ed-marquee-row{grid-area:auto!important;translate:0 0!important;margin:0 0 0 -6%!important;width:112%} .ed-marquee-ink{rotate:-1.6deg!important} .ed-marquee-red{rotate:1.2deg!important;margin-top:0!important} @media(max-width:760px){.ed-marquee{gap:10px;padding:22px 0 28px!important}} /* Marquee v4 (style F): no tapes — oversized gradient type over a ruled step ticker */ .ed-marquee{gap:4px!important;padding:22px 0 32px!important} .ed-marquee-row{rotate:0deg!important;margin-left:0!important;width:100%!important;border:0!important;background:transparent!important;box-shadow:none!important} .ed-marquee-ink span{font-size:clamp(56px,8vw,120px)!important;line-height:1.05!important;background:linear-gradient(90deg,#0b1220,#0b52c3 40%,#5b95ff 60%,#0b1220);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent} .ed-marquee-ink em{color:transparent!important;-webkit-text-fill-color:transparent} .ed-marquee-ink i{-webkit-text-fill-color:#0b52c3;color:#0b52c3!important} .ed-marquee-red{background:transparent!important;border-top:1.5px solid var(--ink)!important;border-bottom:1.5px solid var(--ink)!important;margin-top:6px!important} .ed-marquee-red span{color:var(--ink)!important} @media(max-width:760px){.ed-marquee-ink span{font-size:44px!important}.ed-marquee{padding:14px 0 22px!important}} /* Style F sized to sit comfortably between hero and tools */ .ed-marquee-ink span{font-size:clamp(34px,4.4vw,64px)!important;line-height:1.15!important;letter-spacing:-.03em!important} .ed-marquee{padding:18px 0 26px!important} .ed-marquee-red span{font-size:clamp(11px,1vw,13px)!important;line-height:2.8!important} @media(max-width:760px){.ed-marquee-ink span{font-size:30px!important}.ed-marquee{padding:10px 0 18px!important}} .ed-marquee-ink span{font-size:clamp(26px,3vw,44px)!important;line-height:1.2!important} .ed-marquee{padding:14px 0 22px!important} .ed-marquee-red span{font-size:11px!important;line-height:2.6!important} @media(max-width:760px){.ed-marquee-ink span{font-size:24px!important}.ed-marquee-red span{font-size:10px!important}} /* Marquee finish: soft edge fades and breathing room between the two lines */ .ed-marquee{gap:12px!important;padding:24px 0 30px!important} .ed-marquee-row{mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .ed-marquee-ink span{line-height:1.25!important;letter-spacing:-.025em!important} .ed-marquee-ink i{font-size:.42em!important;margin:0 .35em!important} .ed-marquee-red{margin-top:0!important;border-color:#0b122030!important} .ed-marquee-red span{line-height:3!important;letter-spacing:.18em!important;color:var(--muted)!important} @media(max-width:760px){.ed-marquee{gap:8px!important;padding:16px 0 22px!important}} /* Rotating statement strip (replaces the marquee) */ .ed-statement{padding:42px 0;background:var(--card);border-block:1.5px solid var(--ink)} .ed-statement-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap} .ed-statement-line{margin:0;font-family:var(--f-display);font-weight:800;font-size:clamp(28px,3.4vw,50px);letter-spacing:-.04em;line-height:1.1;color:var(--ink)} .ed-rot{display:inline-grid;vertical-align:bottom;overflow:hidden;padding-bottom:.12em} .ed-rot>span{grid-area:1/1;font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--red);white-space:nowrap; background:linear-gradient(var(--red),var(--red)) 0 100%/0% 3px no-repeat;padding:0 .06em; transform:translateY(105%);opacity:0;transition:transform .7s var(--ed-ease),opacity .4s ease,background-size .8s var(--ed-ease) .25s} .ed-rot>span.is-on{transform:none;opacity:1;background-size:100% 3px} .ed-rot>span.is-out{transform:translateY(-105%);opacity:0} .ed-statement-chips{display:flex;flex-wrap:wrap;gap:8px} .ed-statement-chips a{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);transition:transform .35s var(--ed-ease),box-shadow .35s var(--ed-ease)} .ed-statement-chips a.is-on{background:var(--red);border-color:var(--red);color:#fff;transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--ink)} @media(hover:hover){.ed-statement-chips a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}} @media(max-width:760px){.ed-statement{padding:30px 0}.ed-statement-line{font-size:26px}.ed-statement-inner{gap:18px}.ed-statement-chips a{font-size:10px;padding:6px 9px}} @media(prefers-reduced-motion:reduce){.ed-rot>span{transition:none}} .ed-rot>span{justify-self:start}:root:root body .ed-statement-chips a.is-on{color:#fff}:root:root body .ed-statement-chips a{color:var(--ink)}:root:root body .ed-statement-chips a.is-on{color:#fff} :root:root body .ed-statement-line{color:var(--ink)} /* Statement strip: tighter vertical rhythm, readable tracking, ink headline */ :root:root body .ed-statement{padding:24px 0;margin:10px 0 6px} :root:root body .ed-statement-inner{gap:14px 28px} :root:root body .ed-statement-line{font-size:clamp(26px,2.8vw,40px);letter-spacing:-.025em;color:var(--ink);-webkit-text-fill-color:var(--ink)} :root:root body .ed-rot>span{-webkit-text-fill-color:var(--red)} @media(max-width:760px){:root:root body .ed-statement{padding:20px 0}:root:root body .ed-statement-line{font-size:24px}} :root:root body .ed-statement+.tools-strip{padding-top:22px} /* Project video: works for vertical reels and wide videos */ .project-video{margin:0 0 40px;padding:18px;background:var(--ink);border:1.5px solid var(--ink);box-shadow:var(--ed-shadow)} .project-video-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#fff} .project-video-head span{display:inline-flex;align-items:center;gap:8px} .project-video-head i{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(11,82,195,.35)} .project-video-head small{font-size:10px;color:rgba(255,255,255,.6)} .project-video-player{display:block;width:auto;max-width:100%;height:auto;max-height:min(72vh,640px);margin:0 auto;background:#000} .project-video-embed{position:relative;aspect-ratio:16/9;background:#000} .project-video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .project-video-badge{position:absolute;right:12px;bottom:12px;z-index:2;padding:5px 9px;background:#fff;color:var(--ink);border:1.5px solid var(--ink);font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase} @media(max-width:640px){.project-video{padding:10px}.project-video-player{max-height:70vh}} /* Header v3: light glass pill, segmented nav track, role under the name; looks the same while scrolling */ :root:root body .site-header .brand-text{display:flex;flex-direction:column;line-height:1.05} :root:root body .site-header .brand-text small{margin-top:3px;font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} @media(min-width:761px){ :root:root body .site-header{padding-top:14px;transition:padding .45s var(--ed-ease)} :root:root body .site-header .nav-wrap,:root:root body .site-header.scrolled .nav-wrap{height:64px;padding:0 8px 0 10px;border:1px solid #0b122021;border-radius:999px;background:#ffffffc7;-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);box-shadow:0 1px 0 #ffffff inset,0 12px 32px -12px #0b122026;transition:height .45s var(--ed-ease),max-width .45s var(--ed-ease),box-shadow .45s var(--ed-ease),background .45s var(--ed-ease)} :root:root body .site-header #navMenu{padding:4px;gap:2px;border-radius:999px;background:#0b12200a;border:1px solid #0b122012} :root:root body .site-header #navMenu>a,:root:root body .site-header .nav-dropdown-toggle{padding:8px 15px;font-size:14px;font-weight:600;color:#3d4657} :root:root body .site-header #navMenu>a:hover{color:var(--ink)} :root:root body .site-header #navMenu.has-marker>a.is-nav-highlight{color:#fff} :root:root body .nav-marker{background:var(--ink);box-shadow:0 6px 14px -6px #0b1220a0;transition:transform .45s var(--ed-ease),width .45s var(--ed-ease),height .45s var(--ed-ease),opacity .25s} :root:root body .site-header .nav-cta{min-height:44px;padding:0 8px 0 18px;gap:10px;background:var(--red);border-color:var(--red);box-shadow:0 8px 18px -8px #0b52c3b3} :root:root body .site-header .nav-cta span{margin-right:0;width:28px;height:28px;background:#fff;color:var(--red);transition:transform .4s var(--ed-ease)} :root:root body .site-header .nav-cta:hover{background:var(--ink);border-color:var(--ink);box-shadow:0 10px 22px -8px #0b1220b3} :root:root body .site-header .nav-cta:hover span{background:#fff;color:var(--ink);transform:rotate(45deg)} } @media(min-width:761px) and (max-width:1100px){:root:root body .site-header .brand-text small{display:none}} @media(max-width:760px){:root:root body .site-header .brand-text small{font-size:9px}} @media(max-width:360px){:root:root body .site-header .brand-text small{display:none}} /* Projects with both cuts: wide video on desktop, vertical on phones */ :root:root body .project-video-player.is-tall{display:none} @media(max-width:640px){:root:root body .project-video-player.is-wide{display:none}:root:root body .project-video-player.is-tall{display:block}} /* Blog article: table of contents, figures, callouts, tables, numbered lists */ :root:root body .blog-toc{margin:0 0 34px;padding:22px 24px;background:var(--card);border:1.5px solid var(--ink);box-shadow:var(--ed-shadow)} :root:root body .blog-toc ol{margin:14px 0 0;padding:0;list-style:none;counter-reset:toc;display:grid;gap:8px} :root:root body .blog-toc li{counter-increment:toc;display:flex;gap:12px;align-items:baseline} :root:root body .blog-toc li::before{content:counter(toc,decimal-leading-zero);font-family:var(--f-mono);font-size:11px;color:var(--red)} :root:root body .blog-toc a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid transparent} @media(hover:hover){:root:root body .blog-toc a:hover{border-bottom-color:var(--red)}} :root:root body .blog-content h2{scroll-margin-top:110px} :root:root body .blog-content h3{margin:30px 0 10px;font-family:var(--f-display);font-weight:700;font-size:21px;letter-spacing:-.02em;color:var(--ink);scroll-margin-top:110px} :root:root body .blog-content strong{color:var(--ink);font-weight:700} :root:root body .blog-content a{color:var(--red);font-weight:600;text-decoration:underline;text-underline-offset:3px} :root:root body .blog-content ol{margin:0 0 22px;padding-left:22px} :root:root body .blog-content ol li{margin:0 0 10px;padding-left:6px} :root:root body .blog-content ol li::marker{font-family:var(--f-mono);font-weight:600;color:var(--red)} :root:root body .blog-figure{margin:34px 0;padding:0} :root:root body .blog-figure img{display:block;width:100%;height:auto;border:1.5px solid var(--ink);box-shadow:var(--ed-shadow)} :root:root body .blog-figure figcaption{margin-top:12px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted)} :root:root body .blog-callout{margin:28px 0;padding:20px 22px;background:var(--red-soft);border-left:4px solid var(--red)} :root:root body .blog-callout p{margin:0 0 8px;font-size:17px;line-height:1.6;color:var(--ink)} :root:root body .blog-callout p:last-child{margin:0} :root:root body .blog-table{margin:28px 0;overflow-x:auto;border:1.5px solid var(--ink);box-shadow:var(--ed-shadow);background:var(--card)} :root:root body .blog-table table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px} :root:root body .blog-table th{padding:12px 14px;background:var(--ink);color:#fff;text-align:left;font-family:var(--f-display);font-weight:700} :root:root body .blog-table td{padding:12px 14px;border-top:1px solid var(--hair);vertical-align:top;color:var(--ink-2)} @media(max-width:640px){:root:root body .blog-toc{padding:18px}:root:root body .blog-callout p{font-size:16px}} /* Blog listing v2: search instead of categories; images keep their 2:1 shape */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} :root:root body .blog-search{position:relative;display:flex;align-items:center;gap:12px;max-width:760px;margin:0 0 14px;padding:8px 8px 8px 20px;background:var(--card);border:1.5px solid var(--ink);box-shadow:var(--ed-shadow);transition:box-shadow .35s var(--ed-ease),transform .35s var(--ed-ease)} :root:root body .blog-search:focus-within{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--red)} :root:root body .blog-search-icon{flex:none;width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round} :root:root body .blog-search input{flex:1;min-width:0;height:48px;border:0;outline:0;background:transparent;font:500 17px/1 var(--f-body);color:var(--ink)} :root:root body .blog-search input::placeholder{color:var(--muted-2)} :root:root body .blog-search input::-webkit-search-cancel-button{cursor:pointer} :root:root body .blog-search kbd{flex:none;display:grid;place-items:center;width:28px;height:28px;border:1.5px solid var(--hair);font-family:var(--f-mono);font-size:13px;color:var(--muted)} :root:root body .blog-search button{flex:none;height:48px;padding:0 22px;border:0;background:var(--ink);color:#fff;font-family:var(--f-display);font-weight:700;font-size:15px;cursor:pointer;transition:background .3s} @media(hover:hover){:root:root body .blog-search button:hover{background:var(--red)}} :root:root body .blog-search-status{margin:0 0 30px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} :root:root body .blog-search-empty{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:0 0 40px;padding:28px;background:var(--card);border:1.5px dashed var(--ink)} :root:root body .blog-search-empty[hidden]{display:none} :root:root body .blog-search-empty strong{font-family:var(--f-display);font-size:22px;color:var(--ink)} :root:root body .blog-search-empty span{color:var(--muted)} :root:root body .blog-lead{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:stretch} :root:root body .blog-lead-media{min-height:0;background:#f5f7fb;display:flex;align-items:center} :root:root body .blog-lead-media img{height:auto;aspect-ratio:2/1;object-fit:cover} :root:root body .blog-card-media{aspect-ratio:2/1;background:#f5f7fb} :root:root body .blog-lead-body{justify-content:center} @media(max-width:760px){:root:root body .blog-lead{grid-template-columns:1fr}:root:root body .blog-search kbd{display:none}:root:root body .blog-search{padding-left:14px}:root:root body .blog-search button{padding:0 16px}} @media(max-width:420px){:root:root body .blog-search button{display:none}} :root:root body .blog-lead-media em{top:auto;left:auto;right:12px;bottom:12px} /* Article cover keeps its 2:1 shape (the height attribute and an old max-height used to crop it) */ :root:root body .blog-article .detail-cover{height:auto;max-height:none} /* Numbered lists use their numbers, not the square bullet */ :root:root body .blog-content ol li::before{content:none;display:none} /* Mobile menu: the desktop sliding-pill colours must not apply (they hid "Blog" and "Home") */ @media(max-width:760px){ :root:root body .site-header #navMenu.has-marker>a{color:var(--ink);background:transparent} :root:root body .site-header #navMenu.has-marker>a.active{color:var(--paper);background:var(--ink)} } @media(max-width:760px) and (hover:hover){ :root:root body .site-header #navMenu.has-marker>a:not(.active):hover{color:var(--paper);background:var(--ink)} } /* Search input: no inner focus ring; the whole box shows focus instead */ :root:root body .blog-search input:is(:focus,:focus-visible){outline:none!important;box-shadow:none;border:0} /* Small mobile project tiles: the video badge covered most of the image */ @media(max-width:760px){:root:root body .project-grid .project-video-badge{display:none}} /* Header v4: brand-tinted glass, gradient hairline, ringed logo, open nav, glossy CTA */ :root:root body .site-header .brand-mark{width:42px;height:42px;padding:2px;border:0;background:conic-gradient(from 210deg,#0b52c3,#5b95ff,#0b1220,#0b52c3);box-shadow:0 4px 12px -4px #0b52c380} :root:root body .site-header .brand-mark img{border:2px solid #fff;background:#fff} :root:root body .site-header .brand strong{font-size:16.5px;font-weight:800;letter-spacing:-.025em} :root:root body .site-header .brand-text small{color:var(--red);opacity:.85} @media(min-width:761px){ :root:root body .site-header .nav-wrap,:root:root body .site-header.scrolled .nav-wrap{position:relative;height:66px;padding:0 9px 0 10px;border:1px solid #0b52c31f;background:linear-gradient(180deg,#ffffffe6,#f7faffd9);box-shadow:0 1px 0 #ffffff inset,0 0 0 4px #ffffff73,0 18px 40px -18px #0b52c35c,0 4px 12px -6px #0b122014} :root:root body .site-header .nav-wrap::after{content:"";position:absolute;left:12%;right:12%;bottom:-1px;height:1.5px;border-radius:2px;background:linear-gradient(90deg,transparent,#0b52c3,#5b95ff,transparent);opacity:.55;pointer-events:none} :root:root body .site-header #navMenu{padding:0;gap:4px;background:none;border:0} :root:root body .site-header #navMenu>a,:root:root body .site-header .nav-dropdown-toggle{padding:9px 16px;font-size:14.5px;font-weight:600;color:#2a3346} :root:root body .nav-marker{background:linear-gradient(180deg,#1b2436,#0b1220);box-shadow:0 1px 0 #ffffff26 inset,0 8px 16px -8px #0b1220b3} :root:root body .site-header .nav-cta{position:relative;overflow:hidden;min-height:46px;padding:0 7px 0 20px;background:linear-gradient(180deg,#2a6be0,#0b52c3);border:1px solid #0a49ad;box-shadow:0 1px 0 #ffffff40 inset,0 10px 22px -10px #0b52c3e6;font-weight:700} :root:root body .site-header .nav-cta::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,#ffffff59,transparent);transform:skewX(-20deg);transition:left .7s var(--ed-ease);pointer-events:none} :root:root body .site-header .nav-cta span{width:32px;height:32px;font-size:13px;box-shadow:0 2px 6px #0b122033} :root:root body .site-header .nav-cta:hover{background:linear-gradient(180deg,#1b2436,#0b1220);border-color:#0b1220;box-shadow:0 1px 0 #ffffff26 inset,0 12px 24px -10px #0b1220cc} :root:root body .site-header .nav-cta:hover::before{left:130%} } @media(max-width:760px){ :root:root body .site-header .brand-mark{width:38px;height:38px} } @media(prefers-reduced-motion:reduce){:root:root body .site-header .nav-cta::before{display:none}} /* Mobile menu: only the current page is dark and it never dims; a light tint only for real hover or keyboard focus */ @media(max-width:760px){ :root:root body .site-header #navMenu>a.active{color:var(--paper)!important;background:var(--ink)!important} :root:root body .site-header #navMenu>a:not(.active){color:var(--ink)!important;background:transparent} :root:root body .site-header #navMenu>a:not(.active):focus-visible{background:var(--red-soft);outline:2px solid var(--ink)!important;outline-offset:-2px} } @media(max-width:760px) and (hover:hover){ :root:root body .site-header #navMenu>a:not(.active):hover{background:var(--red-soft)} } /* Header: neutral border and shadow, no blue tint */ :root:root body .site-header .brand-mark{padding:0;background:#fff;border:1.5px solid #0b122026;box-shadow:none} :root:root body .site-header .brand-mark img{border:0} @media(min-width:761px){ :root:root body .site-header .nav-wrap,:root:root body .site-header.scrolled .nav-wrap{border:1px solid #0b12201a;background:#ffffffeb;box-shadow:0 1px 0 #ffffff inset,0 14px 34px -16px #0b122033,0 2px 8px -4px #0b12201a} :root:root body .site-header .nav-wrap::after{display:none} } /* Nav pill only on interaction: soft pill on hover, dark pill while clicking, blue dot marks the current page */ @media(min-width:761px){ :root:root body .site-header #navMenu>a{position:relative;transition:color .25s var(--ed-ease)} :root:root body .site-header .nav-marker{background:var(--red-soft);box-shadow:0 0 0 1px #0b52c314 inset;transition:transform .45s var(--ed-ease),width .45s var(--ed-ease),height .45s var(--ed-ease),opacity .25s,background-color .2s} :root:root body .site-header #navMenu:not(:hover):not(:focus-within) .nav-marker{opacity:0!important} :root:root body .site-header #navMenu.has-marker>a.is-nav-highlight{color:var(--ink)} :root:root body .site-header #navMenu:has(>a:active) .nav-marker{background:var(--ink)} :root:root body .site-header #navMenu.has-marker>a:active{color:#fff} :root:root body .site-header #navMenu>a.active{color:var(--ink);font-weight:700} :root:root body .site-header #navMenu>a.active::after{content:"";display:block;position:absolute;left:50%;right:auto;top:auto;bottom:1px;width:5px;height:5px;border-radius:50%;background:var(--red);transform:translateX(-50%);opacity:1;transition:transform .3s var(--ed-ease)} :root:root body .site-header #navMenu>a.active:hover::after{transform:translateX(-50%) scale(1.4)} } /* Header style J: brand blue band with grid texture, ink border and hard shadow */ :root:root body .site-header .brand strong{color:#fff} :root:root body .site-header .brand-text small{color:#cfe0ff;opacity:1} :root:root body .site-header .brand-mark{border:1.5px solid #ffffff80;background:#fff} @media(min-width:761px){ :root:root body .site-header .nav-wrap,:root:root body .site-header.scrolled .nav-wrap{height:68px;padding:0 10px 0 14px;border-radius:0;border:1.5px solid var(--ink);background-color:var(--red);background-image:linear-gradient(#ffffff12 1px,transparent 1px),linear-gradient(90deg,#ffffff12 1px,transparent 1px);background-size:24px 24px;box-shadow:5px 5px 0 var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none} :root:root body .site-header .nav-wrap::after{display:none} :root:root body .site-header .nav-marker{display:none!important} :root:root body .site-header #navMenu{gap:2px} :root:root body .site-header #navMenu>a{padding:9px 14px;border-radius:0;color:#dbe6ff!important;background:transparent;font-weight:600;transition:background .2s,color .2s} :root:root body .site-header #navMenu>a:hover,:root:root body .site-header #navMenu>a:focus-visible{color:#fff!important;background:#ffffff1f} :root:root body .site-header #navMenu>a:active{background:#ffffff33} :root:root body .site-header #navMenu>a.active{color:#fff!important;font-weight:700} :root:root body .site-header #navMenu>a.active::after{left:14px;right:14px;bottom:4px;width:auto;height:2px;border-radius:0;background:#fff;transform:none} :root:root body .site-header #navMenu>a.active:hover::after{transform:none} :root:root body .site-header .nav-cta{height:46px;min-height:46px;padding:0 8px 0 18px;border-radius:0;background:#fff;color:var(--ink);border:1.5px solid var(--ink);box-shadow:none;transition:transform .25s var(--ed-ease),box-shadow .25s var(--ed-ease)} :root:root body .site-header .nav-cta::before{display:none} :root:root body .site-header .nav-cta span{width:28px;height:28px;border-radius:0;background:var(--ink);color:#fff;box-shadow:none} :root:root body .site-header .nav-cta:hover{background:#fff;color:var(--ink);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink);transform:translate(-2px,-2px)} :root:root body .site-header .nav-cta:hover span{background:var(--ink);color:#fff;transform:rotate(45deg)} } @media(max-width:760px){ :root:root body .site-header,:root:root body .site-header.scrolled{background-color:var(--red);background-image:linear-gradient(#ffffff12 1px,transparent 1px),linear-gradient(90deg,#ffffff12 1px,transparent 1px);background-size:24px 24px;border-bottom:1.5px solid var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none} :root:root body .menu-btn{background:#fff;border:1.5px solid var(--ink)} :root:root body .menu-btn span{background:var(--ink)} } /* Header style J, glass version: see-through blue with blur, a soft top sheen and a faint grid */ @media(min-width:761px){ :root:root body .site-header .nav-wrap,:root:root body .site-header.scrolled .nav-wrap{ background-color:#0b52c3c7; background-image:linear-gradient(180deg,#ffffff2e 0%,#ffffff0a 45%,transparent 60%),linear-gradient(#ffffff0f 1px,transparent 1px),linear-gradient(90deg,#ffffff0f 1px,transparent 1px); background-size:100% 100%,24px 24px,24px 24px; -webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6); box-shadow:inset 0 1px 0 #ffffff59,inset 0 -1px 0 #ffffff14,5px 5px 0 var(--ink)} :root:root body .site-header #navMenu>a:hover,:root:root body .site-header #navMenu>a:focus-visible{background:#ffffff26;box-shadow:inset 0 0 0 1px #ffffff26} } @media(max-width:760px){ :root:root body .site-header,:root:root body .site-header.scrolled{ background-color:#0b52c3d1; background-image:linear-gradient(180deg,#ffffff26,transparent 60%),linear-gradient(#ffffff0f 1px,transparent 1px),linear-gradient(90deg,#ffffff0f 1px,transparent 1px); background-size:100% 100%,24px 24px,24px 24px; -webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6)} } /* Header style J, white glass: same shape, border and hard shadow, light background and dark text */ :root:root body .site-header .brand strong{color:var(--ink)} :root:root body .site-header .brand-text small{color:var(--red)} :root:root body .site-header .brand-mark{border:1.5px solid #0b122026} @media(min-width:761px){ :root:root body .site-header .nav-wrap,:root:root body .site-header.scrolled .nav-wrap{ background-color:#ffffffc2; background-image:linear-gradient(180deg,#ffffffa6 0%,#ffffff26 50%,transparent 70%),linear-gradient(#0b12200a 1px,transparent 1px),linear-gradient(90deg,#0b12200a 1px,transparent 1px); background-size:100% 100%,24px 24px,24px 24px; box-shadow:inset 0 1px 0 #ffffff,5px 5px 0 var(--ink)} :root:root body .site-header #navMenu>a{color:var(--ink-2)!important} :root:root body .site-header #navMenu>a:hover,:root:root body .site-header #navMenu>a:focus-visible{color:var(--ink)!important;background:var(--red-soft);box-shadow:none} :root:root body .site-header #navMenu>a:active{background:#d5e1f7} :root:root body .site-header #navMenu>a.active{color:var(--ink)!important} :root:root body .site-header #navMenu>a.active::after{background:var(--red)} :root:root body .site-header .nav-cta{background:var(--red);color:#fff;border-color:var(--ink)} :root:root body .site-header .nav-cta span{background:#fff;color:var(--red)} :root:root body .site-header .nav-cta:hover{background:var(--red);color:#fff} :root:root body .site-header .nav-cta:hover span{background:#fff;color:var(--red)} } @media(max-width:760px){ :root:root body .site-header,:root:root body .site-header.scrolled{ background-color:#ffffffd1; background-image:linear-gradient(180deg,#ffffffa6,transparent 60%),linear-gradient(#0b12200a 1px,transparent 1px),linear-gradient(90deg,#0b12200a 1px,transparent 1px); background-size:100% 100%,24px 24px,24px 24px} :root:root body .menu-btn{background:var(--ink);border:1.5px solid var(--ink)} :root:root body .menu-btn span{background:#fff} } /* Header final: the same blue underline slides in on hover and stays on the current page; sharper arrow box */ @media(min-width:761px){ :root:root body .site-header #navMenu>a:hover,:root:root body .site-header #navMenu>a:focus-visible,:root:root body .site-header #navMenu>a:active{background:transparent;box-shadow:none;color:var(--ink)!important} :root:root body .site-header #navMenu>a::after,:root:root body .site-header #navMenu>a.active::after{content:"";display:block;position:absolute;left:14px;right:14px;top:auto;bottom:5px;width:auto;height:3px;border-radius:0;background:var(--red);opacity:1;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ed-ease)} :root:root body .site-header #navMenu>a:hover::after,:root:root body .site-header #navMenu>a:focus-visible::after,:root:root body .site-header #navMenu>a.active::after,:root:root body .site-header #navMenu>a.active:hover::after{transform:scaleX(1)} :root:root body .site-header #navMenu>a.active{font-weight:700} :root:root body .site-header .nav-cta{gap:12px;padding:0 6px 0 18px} :root:root body .site-header .nav-cta span{display:grid;place-items:center;width:32px;height:32px;margin:0;border-radius:0;background:#fff;color:var(--ink);border:1.5px solid var(--ink);font-size:15px;font-weight:800;line-height:1;box-shadow:2px 2px 0 var(--ink);transition:transform .35s var(--ed-ease),background .25s,color .25s} :root:root body .site-header .nav-cta:hover span{background:var(--ink);color:#fff;transform:rotate(45deg)} } /* CTA hover: button and arrow box stay put; only the arrow nudges up-right and the colours deepen */ @media(min-width:761px){ :root:root body .site-header .nav-cta:hover{transform:none!important;box-shadow:none;background:var(--red-deep);border-color:var(--ink)} :root:root body .site-header .nav-cta span,:root:root body .site-header .nav-cta:hover span{transform:none;overflow:hidden} :root:root body .site-header .nav-cta span i{display:block;font-style:normal;transition:transform .35s var(--ed-ease)} :root:root body .site-header .nav-cta:hover span{background:var(--ink);color:#fff} :root:root body .site-header .nav-cta:hover span i{transform:translate(2px,-2px)} } /* New RK logo has its own blue ring, so the frame around it is removed */ :root:root body .site-header .brand-mark,:root:root body .site-footer .brand-mark{border:0;background:transparent;box-shadow:none;padding:0} :root:root body .site-header .brand-mark img,:root:root body .site-footer .brand-mark img{border:0;background:transparent;object-fit:contain} /* Home "Have an idea?" band: compact, one row, button and orb side by side */ :root:root body .contact-section{padding:24px 0 80px} :root:root body .contact-shell{padding:clamp(28px,3.4vw,44px) clamp(28px,4vw,56px);gap:40px;box-shadow:10px 10px 0 var(--red);overflow:hidden} :root:root body .contact-title h2{font-size:clamp(32px,3.6vw,54px);margin:10px 0 10px;line-height:1} :root:root body .contact-title p{font-size:16px;margin:0} :root:root body .contact-actions{flex-direction:row;align-items:center;gap:30px;flex-shrink:0;flex-wrap:nowrap} :root:root body .contact-shell .btn.primary{white-space:nowrap} :root:root body .contact-shell .ed-orb{width:120px;height:120px;font-size:18px} :root:root body .contact-shell .ed-orb i{top:16px;right:20px;font-size:15px} :root:root body .contact-shell .ed-orb::after{inset:-8px} @media(max-width:760px){ :root:root body .contact-shell{flex-direction:column;align-items:flex-start;gap:24px;padding:28px 22px;box-shadow:8px 8px 0 var(--red)} :root:root body .contact-actions{width:100%;justify-content:space-between;gap:16px} :root:root body .contact-shell .ed-orb{width:96px;height:96px;font-size:15px} } /* Footer compact: tighter spacing, shorter link lists, contact items with small icons */ @media(min-width:761px){ :root:root body .site-footer{padding-top:44px} :root:root body .site-footer::before{height:6px} :root:root body .footer-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,.9fr) minmax(0,1.1fr);gap:40px;padding-bottom:30px} :root:root body .footer-bottom{padding:18px 0 22px} } :root:root body .footer-brand-block p{max-width:330px;margin:14px 0 0;font-size:14.5px;line-height:1.6} :root:root body .footer-links,:root:root body .footer-contact{display:flex;flex-direction:column;gap:9px} :root:root body .footer-links strong,:root:root body .footer-contact strong{margin-bottom:6px;font-size:11px} :root:root body .footer-links a{font-size:14.5px;line-height:1.4} :root:root body .footer-contact :is(a,span){position:relative;padding-left:22px;font-size:14px;line-height:1.45} :root:root body .footer-contact :is(a,span)::before{content:"";position:absolute;left:0;top:3px;width:15px;height:15px;background:#8fb6ff;-webkit-mask:var(--fc-icon) center/contain no-repeat;mask:var(--fc-icon) center/contain no-repeat} :root:root body .footer-contact a[href^="mailto"]{--fc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")} :root:root body .footer-contact a[href^="tel"]{--fc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.5 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E")} :root:root body .footer-contact span{--fc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")} :root:root body .footer-bottom{font-size:11px} @media(min-width:761px){:root:root body .footer-links a,:root:root body .footer-contact :is(a,span){min-height:0}} /* Project cover shows at its own shape: no 720px cap and no dark side bars */ :root:root body.project-detail-page img.detail-cover{height:auto;max-height:none;object-fit:cover;background:transparent} /* Contact form: lighter fields, clear focus, heading with reply time, helper and button on one row */ :root:root body.contact-page .contact-form-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px;padding-bottom:22px;border-bottom:1.5px dashed #0b122033} :root:root body.contact-page .contact-form-heading h2{margin:8px 0 0;font-size:clamp(30px,3vw,40px)} :root:root body.contact-page .contact-form-kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} :root:root body.contact-page .contact-form-kicker i{display:block;width:9px;height:9px;background:var(--red)} :root:root body.contact-page .contact-form-reply{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1.5px solid var(--ink);font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);white-space:nowrap} :root:root body.contact-page .contact-form-reply b{display:block;width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px #22c55e33} :root:root body.contact-page .standalone-contact-form label>span{display:block;margin-bottom:8px;color:var(--muted)} :root:root body.contact-page .standalone-contact-form :is(input:not([type="hidden"]),select){height:54px;padding:0 16px} :root:root body.contact-page .standalone-contact-form :is(input:not([type="hidden"]),textarea,select){background:#fff;border:1.5px solid #0b122038;font-size:16px;transition:border-color .2s,box-shadow .25s var(--ed-ease)} :root:root body.contact-page .standalone-contact-form textarea{min-height:150px;padding:14px 16px;resize:vertical} @media(hover:hover){:root:root body.contact-page .standalone-contact-form :is(input:not([type="hidden"]),textarea,select):hover{border-color:#0b122080}} :root:root body.contact-page .standalone-contact-form ::placeholder{color:#8a93a8} :root:root body.contact-page .contact-form-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px;padding-top:20px;border-top:1.5px dashed #0b122033} :root:root body.contact-page .contact-form-foot .form-helper{margin:0;max-width:340px;font-size:13.5px;line-height:1.5;color:var(--muted)} :root:root body.contact-page .contact-form-foot .btn{flex:none} @media(max-width:560px){:root:root body.contact-page .contact-form-heading{flex-direction:column;align-items:flex-start}:root:root body.contact-page .contact-form-foot{flex-direction:column;align-items:stretch}:root:root body.contact-page .contact-form-foot .btn{justify-content:center}} /* Footer CTA: smaller heading, heading and actions on one row */ :root:root body .site-footer .footer-cta{align-items:center;flex-wrap:nowrap;gap:32px;padding-bottom:34px;margin-bottom:34px} :root:root body .site-footer .footer-cta h2{margin-top:10px;font-size:clamp(28px,3.2vw,46px)} :root:root body .site-footer .footer-cta-actions{flex-wrap:nowrap;gap:20px;flex:none} :root:root body .site-footer .footer-cta-mail{font-size:16px} :root:root body .site-footer .footer-cta .btn.primary{min-height:46px;padding:0 20px;font-size:14px;box-shadow:4px 4px 0 #fff} @media(max-width:900px){:root:root body .site-footer .footer-cta{flex-direction:column;align-items:flex-start;gap:20px}:root:root body .site-footer .footer-cta-actions{flex-wrap:wrap}} /* Form fields: no blue ring on click; the border turns ink and the field lifts softly */ :root:root body :is(.standalone-contact-form,.standalone-review-form) :is(input:not([type="hidden"]),textarea,select){transition:border-color .2s,box-shadow .2s} :root:root body :is(.standalone-contact-form,.standalone-review-form) :is(input:not([type="hidden"]),textarea,select):hover{border-color:#0b122066} :root:root body :is(.standalone-contact-form,.standalone-review-form) :is(input,textarea,select):is(:focus,:focus-visible){outline:none!important;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink),0 8px 18px -12px #0b122059} /* Contact form: dark header band, soft filled fields */ :root:root body.contact-page .standalone-contact-form{--form-pad:clamp(22px,3vw,36px);padding:0 var(--form-pad) var(--form-pad);overflow:hidden} :root:root body.contact-page .standalone-contact-form .contact-form-heading{align-items:center;margin:0 calc(var(--form-pad)*-1) 28px;padding:26px var(--form-pad);background:var(--ink);border-bottom:0} :root:root body.contact-page .standalone-contact-form .contact-form-heading h2{margin:6px 0 0;font-size:clamp(34px,3.6vw,48px);color:#fff} :root:root body.contact-page .standalone-contact-form .contact-form-kicker{color:#ffffffb3} :root:root body.contact-page .standalone-contact-form .contact-form-kicker i{background:#fff} :root:root body.contact-page .standalone-contact-form .contact-form-reply{border-color:#ffffff4d;color:#fff} :root:root body.contact-page .standalone-contact-form label>span{margin-bottom:9px;color:var(--ink);font-weight:600} :root:root body.contact-page .standalone-contact-form :is(input:not([type="hidden"]),textarea,select){background:#f4f6fa;border-color:#0b12201f} :root:root body.contact-page .standalone-contact-form :is(input:not([type="hidden"]),textarea,select):is(:focus,:focus-visible){background:#fff;border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)} :root:root body.contact-page .standalone-contact-form .contact-form-foot{border-top:0;padding-top:4px} :root:root body.contact-page .standalone-contact-form .contact-form-foot .btn{min-height:56px;padding-inline:30px;font-size:16px} @media(max-width:560px){:root:root body.contact-page .standalone-contact-form .contact-form-heading{align-items:flex-start}} :root:root body.contact-page .standalone-contact-form ::placeholder{color:#69728a} :root:root body.contact-page .standalone-contact-form .contact-form-foot .btn.primary{background:var(--red);border-color:var(--ink);color:#fff;box-shadow:5px 5px 0 var(--ink)} :root:root body.contact-page .standalone-contact-form .form-row{gap:15px!important} /* Compact footer: smaller call to action, links in two short columns */ :root:root body .site-footer{padding-top:36px} :root:root body .site-footer::before{height:4px} :root:root body .site-footer .footer-cta{padding-bottom:24px;margin-bottom:28px} :root:root body .site-footer .footer-cta h2{margin-top:8px;font-size:clamp(26px,2.6vw,36px)} :root:root body .site-footer .footer-cta .btn.primary{min-height:42px;box-shadow:3px 3px 0 #fff} :root:root body .footer-brand-block p{max-width:300px;margin-top:10px;font-size:13.5px;line-height:1.55} :root:root body .footer-links strong,:root:root body .footer-contact strong{margin-bottom:4px} @media(min-width:1024px){ :root:root body .footer-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr) minmax(0,1.05fr) minmax(0,1.15fr);gap:36px;padding-bottom:24px} :root:root body .footer-links{display:grid;grid-template-columns:auto 1fr;gap:8px 22px;align-content:start;justify-items:start} :root:root body .footer-links strong{grid-column:1/-1} :root:root body .footer-links a{font-size:13.5px} :root:root body .footer-contact :is(a,span){font-size:13.5px} } :root:root body .footer-bottom{padding:14px 0 16px} @media(max-width:760px){:root:root body .footer-bottom{padding:16px 0 calc(24px + 56px)}} @media(max-width:760px){ :root:root body .site-footer .footer-contact{padding:0;border:0;background:none} :root:root body .footer-grid{gap:24px 18px;padding-bottom:20px} :root:root body .footer-bottom{letter-spacing:.04em} } /* Service pages: links to related projects and guides */ .service-related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px} .service-related-grid a{display:grid;gap:8px;align-content:start;padding:18px 20px;background:var(--card);border:1.5px solid var(--ink);color:var(--ink);transition:box-shadow .2s,translate .2s} .service-related-grid small{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--red)} .service-related-grid strong{font-family:var(--f-display);font-size:17px;line-height:1.25;letter-spacing:-.02em} @media(hover:hover){.service-related-grid a:hover{box-shadow:4px 4px 0 var(--ink);translate:-2px -2px}} /* Footer social icons: always visible, clickable only once a link is saved */ :root:root body .footer-socials{margin-top:14px;gap:8px} :root:root body .footer-socials .social-link{width:34px;height:34px;border-radius:0;color:#fff} :root:root body .footer-socials .social-link svg{width:16px;height:16px;fill:currentColor} :root:root body .footer-socials .social-link.is-pending{cursor:default} :root:root body .footer-socials .social-link.is-pending:hover{transform:none;translate:none;box-shadow:none;background:transparent;border-color:#ffffff55;color:#fff} @media(max-width:760px){ :root:root body .footer-socials{justify-content:flex-start;margin-top:16px} :root:root body .footer-bottom p{font-size:10px;letter-spacing:.02em;white-space:nowrap} :root:root body .footer-links strong,:root:root body .footer-contact strong{margin-bottom:2px} } /* Final QA: readable accents on dark panels, button spacing, whole covers on phone tiles */ :root:root body :is(.contact-title h2 em,.footer-cta h2 em){color:#8fb6ff;-webkit-text-fill-color:#8fb6ff} :root:root body.inner-page .about-page-hero .hero-buttons{margin-top:26px} @media(max-width:760px){ :root:root body.projects-page .project-media{aspect-ratio:16/10!important} :root:root body.projects-page .project-media em{display:none} } /* combo.css */ /* "Choose or type" combobox used by contact and admin forms. */ .combo{position:relative;display:block;width:100%} .combo>input{width:100%;padding-right:48px!important} .combo-toggle{position:absolute;top:50%;right:8px;width:32px;height:32px;margin-top:-16px;display:grid;place-items:center;border:0;border-radius:0;background:transparent;color:#0b1220;cursor:pointer;transition:background .2s ease} .combo-toggle:hover{background:#e7eefb} .combo-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.16,1,.3,1)} .combo.is-open .combo-toggle svg{transform:rotate(180deg)} .combo.is-open>input{box-shadow:3px 3px 0 #0b52c3!important} .combo-list{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:60;max-height:260px;overflow:auto;margin:0;padding:6px;list-style:none;background:#fff;border:1.5px solid #0b1220;box-shadow:6px 6px 0 #0b1220; font-family:Inter,system-ui,sans-serif;font-size:14.5px;text-transform:none;letter-spacing:0;animation:comboIn .22s cubic-bezier(.16,1,.3,1);scrollbar-width:thin} .combo-list[hidden]{display:none} .combo-list li{display:flex;align-items:center;gap:10px;padding:10px 12px;color:#1f2a3d;cursor:pointer;border-radius:0;transition:background .15s ease,color .15s ease} .combo-list li::before{content:"";flex:none;width:7px;height:7px;background:#0b52c3;opacity:.35;transition:opacity .15s ease} .combo-list li:hover,.combo-list li.is-active{background:#0b1220;color:#fff} .combo-list li:hover::before,.combo-list li.is-active::before{opacity:1;background:#5b95ff} .combo-list li[aria-selected="true"]{font-weight:600;color:#0b52c3} .combo-list li[aria-selected="true"]:hover,.combo-list li[aria-selected="true"].is-active{color:#fff} .combo-list li.combo-custom{border-top:1.5px dashed #0b122030;margin-top:4px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.04em;color:#55607a} .combo-list li.combo-custom::before{content:"+";width:auto;height:auto;background:none;opacity:1;color:#0b52c3;font-size:14px} @keyframes comboIn{from{opacity:0;transform:translateY(-6px)}} @media(prefers-reduced-motion:reduce){.combo-list{animation:none}} /* Guard against page-level list, label and svg rules (admin.css styles these broadly). */ :root:root body .combo-list{display:block;background:#fff!important;border:1.5px solid #0b1220!important;box-shadow:6px 6px 0 #0b1220!important;opacity:1} :root:root body .combo-list[hidden]{display:none!important} :root:root body .combo-list li{background:transparent;border:0!important;margin:0;min-height:0;box-shadow:none;font-weight:500;font-size:14.5px;line-height:1.35} :root:root body .combo-list li:hover,:root:root body .combo-list li.is-active{background:#0b1220!important;color:#fff!important} :root:root body .combo-toggle{width:32px!important;height:32px!important;padding:0!important;min-height:0!important;box-shadow:none!important;border:0!important;background:transparent!important} :root:root body .combo-toggle:hover{background:#e7eefb!important} :root:root body .combo-toggle svg{display:block;width:16px!important;height:16px!important} :root:root body .combo-toggle svg path{fill:none!important;stroke:#0b1220!important;stroke-width:2} /* Lift the open combobox (and its wrappers) above the fields that follow it. */ .combo.is-open{z-index:80} :is(label,.form-grid,.form-row,.publish-row,.field):has(.combo.is-open){position:relative;z-index:80}