/* ========================================================================= WEBNATIVE: design system Tokens are colours and fonts only. Spacing is literal px per breakpoint. Breakpoints: 1024px (tablet), 767px (mobile). ========================================================================= */ @font-face{font-family:"Instrument Sans";src:url(../fonts/instrument-sans-normal.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap} @font-face{font-family:"Instrument Sans";src:url(../fonts/instrument-sans-italic.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap} @font-face{font-family:"Plus Jakarta Sans";src:url(../fonts/plus-jakarta-sans-normal.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap} @font-face{font-family:"Plus Jakarta Sans";src:url(../fonts/plus-jakarta-sans-italic.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap} :root{ --ink:#07002A; --text:#5C5169; --accent:#E0004D; --accent-hover:#E92165; --bg:#FFFFFF; --wash:#FDF2F6; --hero-end:#FDF2F6; --hero-glow:rgba(224,0,77,.12); --header-tint:rgba(253,242,246,.92); --line:rgba(26,14,42,.1); --line-strong:rgba(26,14,42,.18); --tint:rgba(224,0,77,.08); --display:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif; } /* Reset (zero specificity so every component rule wins) */ :where(*,*::before,*::after){box-sizing:border-box} :where(html){-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px} :where(body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ol,ul){margin:0} :where(ol,ul)[class]{list-style:none;padding:0} :where(img,svg,video){display:block;max-width:100%} :where(img){height:auto} :where(button,input,select,textarea){font:inherit;color:inherit} :where(a){color:inherit} @media (prefers-reduced-motion:reduce){:where(html){scroll-behavior:auto}} body{ background:var(--bg); color:var(--text); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* Menu open: lock the page on so the sticky header keeps working */ html.panel-open{overflow:hidden} /* Nothing may widen the page sideways (decorative glows extend past their boxes) */ html,body{overflow-x:clip} .site-main,.closing-band,.site-footer{overflow-x:clip} h1,h2,h3,h4{color:var(--ink);font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:-.025em} h1 em,h2 em,h3 em,.section-title em,.blog-cta__title em{font-style:normal;color:var(--accent)} .container{width:100%;max-width:1328px;margin:0 auto;padding:0 24px} .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap} .skip-link{position:absolute;left:16px;top:-60px;z-index:1000;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none} .skip-link:focus{top:16px} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* Buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border-radius:100px;border:1px solid transparent;font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease} .btn:active{transform:translateY(1px)} .btn--primary{background:var(--accent);color:#fff} .btn--primary:hover{background:var(--accent-hover);color:#fff} .btn--outline{background:transparent;color:var(--ink);border-color:var(--line-strong)} .btn--outline:hover{background:var(--ink);border-color:var(--ink);color:#fff} .btn--lg{padding:17px 32px;font-size:16px} .btn--sm{padding:11px 20px;font-size:14px} .btn__arrow{transition:transform .2s ease} .btn:hover .btn__arrow{transform:translateX(3px)} .btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px} .link-arrow{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:600;font-size:15px;text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:4px;transition:color .2s ease,border-color .2s ease} .link-arrow svg{transition:transform .2s ease} .link-arrow:hover{color:var(--accent);border-color:var(--accent)} .link-arrow:hover svg{transform:translateX(3px)} /* Eyebrow */ .eyebrow{display:block;color:var(--accent);font-family:var(--sans);font-size:13px;font-weight:700;line-height:1.4;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:16px} /* Sections */ .section{padding:100px 0} .section--tight{padding:72px 0} .section--wash{background:var(--wash)} .section-head{max-width:760px;margin-bottom:56px} .section-head--center{margin-left:auto;margin-right:auto;text-align:center} .section-title{font-size:48px;line-height:1.1} .section-intro{margin-top:20px;max-width:640px;font-size:18px} .section-head--center .section-intro{margin-left:auto;margin-right:auto} .section-intro p+p,.prose-sm p+p{margin-top:16px} .section-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:56px} .section-bar .section-head{margin-bottom:0} .section-bar__side{display:flex;align-items:center;gap:16px;flex-shrink:0} .prose-sm{max-width:640px} .prose-sm p{font-size:17px} /* Header */ .site-header{position:sticky;top:0;z-index:100;background:var(--header-tint);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .25s ease,background-color .25s ease} .admin-bar .site-header{top:32px} .site-header.is-stuck{background:rgba(255,255,255,.94);border-bottom-color:var(--line)} /* Home: header is transparent over the hero gradient until the page scrolls */ .has-rich-hero .site-header:not(.is-stuck){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent} .panel-open .site-header,.panel-open .has-rich-hero .site-header:not(.is-stuck){background:#fff;border-bottom-color:var(--line);-webkit-backdrop-filter:none;backdrop-filter:none} .site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:32px;height:84px} .brand{display:inline-flex;align-items:center;text-decoration:none;flex-shrink:0} .brand__img{width:auto;height:54px} .brand__word{font-family:var(--display);font-weight:700;font-size:26px;color:var(--ink)} .primary-nav{flex:1;display:flex;justify-content:center} .nav-menu{display:flex;align-items:center;gap:6px} .nav-menu>li{position:relative} .nav-menu a{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:100px;color:var(--ink);font-size:16px;font-weight:600;text-decoration:none;transition:color .2s ease,background-color .2s ease} .nav-menu a:hover,.nav-menu .current-menu-item>a,.nav-menu .current-menu-ancestor>a,.nav-menu .current-page-ancestor>a{color:var(--accent)} .nav-menu .menu-item-has-children>a::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);margin-left:2px} .nav-menu .sub-menu{position:absolute;top:100%;left:0;min-width:280px;padding:10px;margin-top:8px;background:#fff;border:1px solid var(--line);border-radius:16px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease,visibility .2s;list-style:none} .nav-menu .sub-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px} .nav-menu li:hover>.sub-menu,.nav-menu li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none} .nav-menu .sub-menu a{display:flex;padding:12px 16px;border-radius:10px;font-size:15px;font-weight:500} .nav-menu .sub-menu a:hover{background:var(--wash)} .site-header__actions{display:flex;align-items:center;gap:12px} .site-header__btn{padding:15px 28px;font-size:16px} .nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line-strong);border-radius:100px;background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0} .nav-toggle span{display:block;width:18px;height:1.5px;background:var(--ink);transition:transform .25s ease,opacity .2s ease} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)} .mobile-panel{position:fixed;inset:84px 0 0;z-index:99;background:#fff;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} .admin-bar .mobile-panel{top:130px} .mobile-panel__inner{padding:24px 24px 48px;display:flex;flex-direction:column;gap:24px} .mobile-menu>li{border-bottom:1px solid var(--line)} .mobile-menu a{display:block;padding:16px 0;font-family:var(--display);font-weight:600;font-size:24px;line-height:1.2;color:var(--ink);text-decoration:none} .mobile-menu .sub-menu{list-style:none;padding:0 0 12px 16px} .mobile-menu .sub-menu a{font-family:var(--sans);font-size:16px;padding:8px 0;color:var(--text)} .mobile-panel__btn{align-self:flex-start} /* Socials */ .socials{display:flex;gap:10px} .socials a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:100px;border:1px solid currentColor;transition:background-color .2s ease,color .2s ease,border-color .2s ease} .socials--ink a{color:var(--ink);border-color:var(--line-strong)} .socials--ink a:hover{background:var(--accent);border-color:var(--accent);color:#fff} .socials--light a{color:#fff;border-color:rgba(255,255,255,.2)} .socials--light a:hover{background:var(--accent);border-color:var(--accent)} /* Closing band */ /* Closing band: a navy panel that sits across the end of the page and the top of the footer */ .closing-band{--band-top:var(--bg);background:linear-gradient(to bottom,var(--band-top) 0,var(--band-top) 50%,#050020 50%,#050020 100%)} .site-main:has(>:last-child.section--wash)+.closing-band{--band-top:var(--wash)} .closing-band__panel{position:relative;isolation:isolate;padding:80px;border-radius:24px;border:1.5px solid transparent;background:radial-gradient(640px 440px at 100% 100%,rgba(224,0,77,.2),rgba(224,0,77,0) 68%) padding-box,radial-gradient(420px 300px at 0% 0%,rgba(224,0,77,.07),rgba(224,0,77,0) 70%) padding-box,linear-gradient(#07002A,#07002A) padding-box,conic-gradient(from var(--wn-angle),rgba(255,92,143,.18) 0%,rgba(255,92,143,.18) 55%,#FF5C8F 70%,#FFFFFF 76%,#FF5C8F 82%,rgba(255,92,143,.18) 95%) border-box;color:rgba(255,255,255,.74);animation:wn-border-spin 6s linear infinite} /* Moving glow behind the panel, in step with the border highlight */ .closing-band>.container{position:relative} .closing-band>.container::before{content:"";position:absolute;top:-48px;bottom:-48px;left:-24px;right:-24px;z-index:0;padding:48px;border-radius:72px;background:conic-gradient(from var(--wn-angle),rgba(255,92,143,.18) 0%,rgba(255,92,143,.18) 55%,#FF5C8F 70%,#FFFFFF 76%,#FF5C8F 82%,rgba(255,92,143,.18) 95%) content-box;filter:blur(22px);opacity:.6;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 55%,#000 82%);mask-image:linear-gradient(to bottom,transparent 0%,transparent 55%,#000 82%);animation:wn-border-spin 6s linear infinite;pointer-events:none} .closing-band__panel{z-index:1} @property --wn-angle{syntax:"";initial-value:0deg;inherits:false} @keyframes wn-border-spin{to{--wn-angle:360deg}} @media (prefers-reduced-motion:reduce){.closing-band__panel,.closing-band>.container::before{animation:none}} .closing-band__panel::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-image:radial-gradient(rgba(255,255,255,.14) 1.2px,transparent 1.6px);background-size:26px 26px;-webkit-mask-image:radial-gradient(60% 90% at 100% 50%,#000 0%,transparent 70%);mask-image:radial-gradient(60% 90% at 100% 50%,#000 0%,transparent 70%)} .closing-band__inner{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:64px} .closing-band .eyebrow{display:inline-block;margin-bottom:24px;padding:8px 14px;border-radius:100px;background:rgba(224,0,77,.18);color:#FF6B9A} .closing-band__title{color:#fff;font-size:44px;line-height:1.08;max-width:680px} .closing-band__text{margin-top:20px;max-width:560px;font-size:18px} .closing-band__action{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding-left:48px;border-left:1px solid rgba(255,255,255,.12)} .btn--wa{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff} .btn--wa .btn__wa-icon{color:#25D366;transition:color .2s ease} .btn--wa:hover{background:#25D366;border-color:#25D366;color:#07002A} .btn--wa:hover .btn__wa-icon{color:#07002A} @media (max-width:1024px){ .closing-band__panel{padding:64px 48px} .closing-band__inner{grid-template-columns:1fr;gap:40px} .closing-band__title{font-size:38px} .closing-band__action{padding:32px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.12);flex-direction:row;flex-wrap:wrap;align-items:center} } @media (max-width:767px){ .closing-band__panel{padding:48px 24px;border-radius:20px} .closing-band>.container::before{left:-28px;right:-28px;border-radius:68px} .closing-band__title{font-size:30px} .closing-band__text{font-size:16px} } /* Footer */ .site-footer{background:#050020;color:rgba(255,255,255,.64);padding:88px 0 0;font-size:15px} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:48px;padding-bottom:64px} .footer-brand .brand__img{height:52px} .footer-brand p{margin:20px 0 24px;max-width:340px} .footer-col__title{color:#fff;font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:20px} .footer-menu{display:flex;flex-direction:column;gap:12px} .footer-menu a,.footer-menu span{display:inline-flex;align-items:center;gap:10px;color:rgba(255,255,255,.72);text-decoration:none;transition:color .2s ease} .footer-menu a:hover{color:#fff} .footer-contact svg{color:var(--accent);flex-shrink:0} .footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0 32px;border-top:1px solid rgba(255,255,255,.1);font-size:14px} .footer-legal{display:flex;gap:24px} .footer-legal a{color:rgba(255,255,255,.64);text-decoration:none} .footer-legal a:hover{color:#fff} /* Heroes (light) */ .page-hero{background:var(--wash);padding:88px 0 96px;border-bottom:1px solid var(--line)} .page-hero__inner{max-width:900px} .page-hero__title{font-size:64px;line-height:1.05} .page-hero__eyebrow{font-size:13px} .page-hero__lead{margin-top:24px;max-width:660px;font-size:19px;line-height:1.6;text-wrap:pretty} .page-hero--simple{padding:72px 0 64px} .page-hero--simple .page-hero__title{font-size:52px} .home-hero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:844px;margin-top:-84px;padding:204px 0 140px;background:radial-gradient(820px 600px at 84% 40%,var(--hero-glow),rgba(224,0,77,0) 65%),linear-gradient(180deg,#FFFFFF 0%,var(--hero-end) 100%);border-bottom:1px solid var(--line)} .home-hero>.container,.page-hero--rich>.container{position:relative;z-index:1;width:100%} .page-hero--rich{position:relative;overflow:hidden;margin-top:-84px;padding:172px 0 112px;background:radial-gradient(820px 600px at 84% 40%,var(--hero-glow),rgba(224,0,77,0) 65%),linear-gradient(180deg,#FFFFFF 0%,var(--hero-end) 100%)} /* Contour lines, fading in from the right behind the image */ .home-hero::before,.page-hero--rich::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23E0004D' stroke-opacity='.07' stroke-width='1' vector-effect='non-scaling-stroke'%3E%3Cpath d='M-40 -60 C 120 -90, 240 -30, 360 -60 S 600 -90, 720 -60 S 960 -30, 1080 -60 S 1320 -90, 1480 -60'/%3E%3Cpath d='M-40 -20 C 120 -50, 240 10, 360 -20 S 600 -50, 720 -20 S 960 10, 1080 -20 S 1320 -50, 1480 -20'/%3E%3Cpath d='M-40 20 C 120 -10, 240 50, 360 20 S 600 -10, 720 20 S 960 50, 1080 20 S 1320 -10, 1480 20'/%3E%3Cpath d='M-40 60 C 120 30, 240 90, 360 60 S 600 30, 720 60 S 960 90, 1080 60 S 1320 30, 1480 60'/%3E%3Cpath d='M-40 100 C 120 70, 240 130, 360 100 S 600 70, 720 100 S 960 130, 1080 100 S 1320 70, 1480 100'/%3E%3Cpath d='M-40 140 C 120 110, 240 170, 360 140 S 600 110, 720 140 S 960 170, 1080 140 S 1320 110, 1480 140'/%3E%3Cpath d='M-40 180 C 120 150, 240 210, 360 180 S 600 150, 720 180 S 960 210, 1080 180 S 1320 150, 1480 180'/%3E%3Cpath d='M-40 220 C 120 190, 240 250, 360 220 S 600 190, 720 220 S 960 250, 1080 220 S 1320 190, 1480 220'/%3E%3Cpath d='M-40 260 C 120 230, 240 290, 360 260 S 600 230, 720 260 S 960 290, 1080 260 S 1320 230, 1480 260'/%3E%3Cpath d='M-40 300 C 120 270, 240 330, 360 300 S 600 270, 720 300 S 960 330, 1080 300 S 1320 270, 1480 300'/%3E%3Cpath d='M-40 340 C 120 310, 240 370, 360 340 S 600 310, 720 340 S 960 370, 1080 340 S 1320 310, 1480 340'/%3E%3Cpath d='M-40 380 C 120 350, 240 410, 360 380 S 600 350, 720 380 S 960 410, 1080 380 S 1320 350, 1480 380'/%3E%3Cpath d='M-40 420 C 120 390, 240 450, 360 420 S 600 390, 720 420 S 960 450, 1080 420 S 1320 390, 1480 420'/%3E%3Cpath d='M-40 460 C 120 430, 240 490, 360 460 S 600 430, 720 460 S 960 490, 1080 460 S 1320 430, 1480 460'/%3E%3Cpath d='M-40 500 C 120 470, 240 530, 360 500 S 600 470, 720 500 S 960 530, 1080 500 S 1320 470, 1480 500'/%3E%3Cpath d='M-40 540 C 120 510, 240 570, 360 540 S 600 510, 720 540 S 960 570, 1080 540 S 1320 510, 1480 540'/%3E%3Cpath d='M-40 580 C 120 550, 240 610, 360 580 S 600 550, 720 580 S 960 610, 1080 580 S 1320 550, 1480 580'/%3E%3Cpath d='M-40 620 C 120 590, 240 650, 360 620 S 600 590, 720 620 S 960 650, 1080 620 S 1320 590, 1480 620'/%3E%3Cpath d='M-40 660 C 120 630, 240 690, 360 660 S 600 630, 720 660 S 960 690, 1080 660 S 1320 630, 1480 660'/%3E%3Cpath d='M-40 700 C 120 670, 240 730, 360 700 S 600 670, 720 700 S 960 730, 1080 700 S 1320 670, 1480 700'/%3E%3Cpath d='M-40 740 C 120 710, 240 770, 360 740 S 600 710, 720 740 S 960 770, 1080 740 S 1320 710, 1480 740'/%3E%3Cpath d='M-40 780 C 120 750, 240 810, 360 780 S 600 750, 720 780 S 960 810, 1080 780 S 1320 750, 1480 780'/%3E%3Cpath d='M-40 820 C 120 790, 240 850, 360 820 S 600 790, 720 820 S 960 850, 1080 820 S 1320 790, 1480 820'/%3E%3Cpath d='M-40 860 C 120 830, 240 890, 360 860 S 600 830, 720 860 S 960 890, 1080 860 S 1320 830, 1480 860'/%3E%3Cpath d='M-40 900 C 120 870, 240 930, 360 900 S 600 870, 720 900 S 960 930, 1080 900 S 1320 870, 1480 900'/%3E%3Cpath d='M-40 940 C 120 910, 240 970, 360 940 S 600 910, 720 940 S 960 970, 1080 940 S 1320 910, 1480 940'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 22%,rgba(0,0,0,.6) 58%,#000 100%);mask-image:linear-gradient(90deg,transparent 22%,rgba(0,0,0,.6) 58%,#000 100%)} .home-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) 500px;gap:40px;align-items:center} .home-hero__title{font-size:60px;line-height:1.06;text-wrap:balance} .home-hero__lead{margin-top:24px;max-width:620px;font-size:17px;line-height:1.65} .home-hero__media{justify-self:end;width:100%;max-width:500px} .home-hero__media img{width:100%;height:auto} /* Larger hero image: it grows into the free space right of the container, so the heading keeps its two lines */ @media (min-width:1360px){.home-hero__media{max-width:none;width:calc(100% + 90px);margin-right:-90px}} @media (min-width:1520px){.home-hero__media{width:calc(100% + 180px);margin-right:-180px}} .trust-note{display:inline-flex;align-items:center;gap:10px;margin-top:36px;color:var(--ink);font-size:14px;font-weight:600} .trust-note__icon{flex-shrink:0;color:var(--accent)} /* SVG icons from the Media Library, drawn as masks */ .mask-icon{display:inline-block;width:20px;height:20px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat} .svc-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:48px;height:48px;border-radius:100px;background:var(--tint);color:var(--accent);transition:background-color .4s ease,color .4s ease} .trust-note .mask-icon{width:18px;height:18px} /* Stats */ .stats__grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)} .stat{padding:40px 32px 8px 0} .stat+.stat{padding-left:32px;border-left:1px solid var(--line)} .stat__num{font-family:var(--display);font-weight:600;font-size:56px;line-height:1;letter-spacing:-.03em;color:var(--ink)} .stat__suffix{color:var(--accent)} .stat__label{margin-top:16px;font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:0;line-height:1.3} .stat__text{margin-top:8px;font-size:15px} /* Sliders */ .slider-nav{display:flex;gap:8px} .slider-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:100px;border:1px solid var(--line-strong);background:#fff;color:var(--ink);cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease,opacity .2s ease} .slider-btn:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:#fff} .slider-btn:disabled{opacity:.35;cursor:default} [data-slider].is-static .slider-nav,[data-slider].is-static .slider-foot{display:none} .slider-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:20px} .slider-dots{display:flex;align-items:center;gap:8px} .slider-dot{appearance:none;width:40px;height:5px;padding:0;border:0;border-radius:0;background:rgba(7,0,42,.16);cursor:pointer;transition:width .3s ease,background-color .3s ease} .slider-dot:hover{background:rgba(7,0,42,.32)} .slider-dot.is-active{width:60px;background:var(--accent)} .slider-track{display:grid;grid-auto-flow:column;gap:24px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y} .slider-track::-webkit-scrollbar{display:none} .slider-track>*{scroll-snap-align:start} /* Featured work */ .cs-slides{grid-auto-columns:100%} .cs-slide{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center;padding:0;background:#fff;border-radius:16px;overflow:hidden} .cs-slide__body{display:flex;flex-direction:column;align-items:flex-start;padding:48px 0 48px 56px} .cs-slide__tag{display:inline-block;padding:10px 16px;border-radius:8px;background:var(--tint);color:var(--accent);font-size:13px;font-weight:700;letter-spacing:1.2px;line-height:1.3;text-transform:uppercase} .cs-slide__title{margin-top:20px;font-size:32px} .cs-slide__title a{text-decoration:none} .cs-slide__title a:hover{color:var(--accent)} .cs-slide__text{margin-top:16px;font-size:17px} .cs-slide .cs-meta{margin:24px 0 32px;padding-top:0;border-top:0} .cs-slide__link{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:600;font-size:16px;text-decoration:none} .cs-slide__link svg{transition:transform .2s ease} .cs-slide__link:hover svg{transform:translateX(4px)} .cs-slide__media{display:block;align-self:stretch;aspect-ratio:3/2;overflow:hidden;background:var(--wash)} .cs-slide__media img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .6s ease} .cs-slide:hover .cs-slide__media img{transform:scale(1.03)} .cs-meta{display:flex;flex-wrap:wrap;gap:12px 40px;margin:28px 0 32px;padding-top:24px;border-top:1px solid var(--line);width:100%} .cs-meta dt{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--text)} .cs-meta dd{margin-top:4px;color:var(--ink);font-weight:600;font-size:15px} /* Split layouts */ .split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start} .split--sticky{grid-template-columns:.85fr 1.15fr} .split--sticky .split__side{position:sticky;top:124px} .split__side .section-head{margin-bottom:32px} .story .section-head{margin-bottom:28px} .prose-sm+.btn,.prose-sm+.btn-row{margin-top:36px} .split--media{align-items:center} .split__media img{width:100%;border-radius:16px} /* Accordion */ .accordion{border-top:1px solid var(--line)} .accordion__item{border-bottom:1px solid var(--line)} .accordion__q{display:flex;align-items:center;gap:20px;padding:24px 0;cursor:pointer;list-style:none;color:var(--ink);font-size:20px;font-weight:600;line-height:1.35} .accordion__q::-webkit-details-marker{display:none} .accordion__q>span:first-child:not(.svc-icon),.accordion__label{flex:1} .accordion__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:100px;border:1px solid var(--line-strong);transition:transform .45s cubic-bezier(.25,.7,.25,1),border-color .3s ease,color .3s ease} .accordion__item.is-closing .accordion__icon{transform:none;border-color:var(--line-strong);color:inherit} .accordion__item:hover .accordion__icon{border-color:var(--accent);color:var(--accent)} .accordion__item[open] .accordion__icon{transform:rotate(45deg);border-color:var(--accent);color:var(--accent)} .accordion__a{padding:0 60px 28px 0} .accordion__a p+p{margin-top:12px} .accordion__a a:not(.link-arrow){color:var(--accent)} .accordion__a .link-arrow{margin-top:20px} .accordion--services .accordion__a{padding-left:68px} .accordion--services .accordion__item:hover .svc-icon,.accordion--services .accordion__item[open]:not(.is-closing) .svc-icon{background:var(--accent);color:#fff} /* Testimonials */ .tcards{grid-auto-columns:calc((100% - 48px) / 3)} .tcard{display:flex;flex-direction:column;padding:36px;background:#fff;border:1px solid var(--line);border-radius:16px} .tcard__mark{display:block;color:var(--accent);margin-bottom:24px;line-height:0} .tcard__quote{color:var(--ink);font-size:17px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden} .tcard__quote.is-open{display:block;-webkit-line-clamp:unset} .tcard__more{align-self:flex-start;margin-top:12px;padding:0;border:0;background:none;color:var(--accent);font-size:14px;font-weight:700;cursor:pointer} .tcard__who{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:24px;border-top:1px solid var(--line)} .tcard>:nth-last-child(2){margin-bottom:28px} .tcard__avatar{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:100px;background:var(--ink);color:#fff;font-size:14px;font-weight:700;letter-spacing:.5px;flex-shrink:0} .tcard__who strong{display:block;color:var(--ink);font-size:16px} .tcard__who span span{display:block;font-size:14px} /* Client logos */ .clients .section-head{margin-bottom:40px} .marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marquee__track{display:flex;align-items:center;gap:72px;width:max-content;animation:wn-marquee 50s linear infinite} .marquee:hover .marquee__track{animation-play-state:paused} .marquee__item img{width:120px;height:70px;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .3s ease,opacity .3s ease} .marquee__item img:hover{filter:none;opacity:1} @keyframes wn-marquee{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.marquee__track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:40px}.marquee__track>[aria-hidden]{display:none}.marquee{-webkit-mask-image:none;mask-image:none}} /* Why us */ .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .pillar{padding:32px;background:#fff;border:1px solid var(--line);border-radius:16px} .pillar__num{font-family:var(--display);font-weight:600;font-size:32px;line-height:1;color:var(--accent)} .pillar__title{margin-top:24px;font-family:var(--sans);font-size:19px;font-weight:700;letter-spacing:0;line-height:1.3} .pillar__text{margin-top:10px;font-size:15px} .why__cta{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-top:56px;padding-top:48px;border-top:1px solid var(--line)} .why__cta-title{font-size:38px} /* Steps */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:none} .step{position:relative;padding:36px 32px 0 0;border-top:1px solid var(--line-strong)} .step::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--accent)} .step__num{display:block;font-size:13px;font-weight:700;letter-spacing:1.5px;color:var(--accent)} .step__title{margin-top:12px;font-size:24px;line-height:1.2} .step__text{margin-top:12px;font-size:15px} /* Card grids */ .card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .post-card,.cs-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden} .post-card__media,.cs-card__media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--wash)} .post-card__media img,.cs-card__media img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .6s ease} .post-card:hover .post-card__media img,.cs-card:hover .cs-card__media img{transform:scale(1.04)} .post-card__ph{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--wash),rgba(224,0,77,.12))} .post-card__body,.cs-card__body{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:28px} .cs-card__tag{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent)} .post-card{position:relative} .post-card__media{aspect-ratio:16/9} .post-card__tag{position:absolute;top:16px;left:16px;z-index:1;margin:0;padding:7px 12px;border-radius:100px;background:#fff;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:1px;line-height:1.2;text-transform:uppercase;text-decoration:none;transition:background-color .2s ease,color .2s ease} .post-card__tag:hover{background:var(--accent);color:#fff} .post-hero__cats a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease} .post-hero__cats a:hover{border-bottom-color:currentColor} .post-card .post-card__title{margin-top:0} .post-card__title,.cs-card__title{margin-top:10px;font-size:22px;line-height:1.25} .post-card__title a,.cs-card__title a{text-decoration:none} .post-card__title a:hover,.cs-card__title a:hover{color:var(--accent)} .post-card__excerpt,.cs-card__text{margin:12px 0 24px;font-size:15px} .post-card .link-arrow{margin-top:auto} .cs-card__media{border-bottom:1px solid var(--line)} .cs-card__text{margin-bottom:24px} .cs-card__text p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.6} .cs-card__text p+p,.cs-card__text ul{display:none} .cs-card__foot{width:100%;margin-top:auto;padding-top:20px;border-top:1px solid var(--line)} .work-grid__more{margin-top:48px;text-align:center} .card-grid>[hidden]{display:none} /* Service Hub */ .hub__grid{display:grid;grid-template-columns:300px 1fr;gap:72px;align-items:start} .hub__index{position:sticky;top:124px} .hub__index ol{display:flex;flex-direction:column;border-left:1px solid var(--line)} .hub__index a{display:flex;gap:14px;align-items:baseline;padding:12px 0 12px 20px;margin-left:-1px;border-left:2px solid transparent;color:var(--text);font-weight:600;font-size:15px;text-decoration:none;transition:color .2s ease,border-color .2s ease} .hub__index a:hover,.hub__index a.is-active{color:var(--ink);border-left-color:var(--accent)} .hub__index-num{font-size:12px;color:var(--accent);letter-spacing:1px} .hub__list{display:flex;flex-direction:column} .hub-item{padding:48px 0;border-top:1px solid var(--line);scroll-margin-top:110px} .hub-item:first-child{padding-top:0;border-top:0} .hub-item__top{display:flex;align-items:center;justify-content:space-between} .hub-item__num{font-family:var(--display);font-weight:600;font-size:36px;line-height:1;color:var(--accent)} .hub-item__title{margin-top:20px;font-size:36px} .hub-item__title a{text-decoration:none} .hub-item__title a:hover{color:var(--accent)} .hub-item__text{margin-top:12px;font-size:18px;max-width:620px} .checklist{display:grid;grid-template-columns:1fr 1fr;gap:12px 32px;margin:28px 0 32px;padding:24px 28px;background:var(--wash);border-radius:16px} .checklist--compact{margin:20px 0 0;padding:20px 24px} .checklist li{display:flex;align-items:flex-start;gap:10px;color:var(--ink);font-size:15px;font-weight:500} .checklist svg{flex-shrink:0;margin-top:3px;color:var(--accent)} .hub-cta__box{padding:72px 48px;background:var(--wash);border:1px solid var(--line);border-radius:16px;text-align:center} .hub-cta__box .section-head{margin-bottom:32px} /* Service: problem and solution */ .problem__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:end;margin-bottom:64px} .problem__head .section-head{margin-bottom:0} .problem__text{max-width:none;margin-bottom:0} .problem__list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .problem-item{padding:32px;border:1px solid var(--line);border-radius:16px;background:#fff} .problem-item__title{margin-top:24px;font-size:22px;line-height:1.25} .problem-item__text{margin-top:10px;font-size:15px} .includes{display:grid;grid-template-columns:1fr 1fr;column-gap:72px} .include{display:flex;gap:24px;padding:32px 0;border-top:1px solid var(--line)} .include__num{flex-shrink:0;width:48px;font-family:var(--display);font-weight:600;font-size:28px;line-height:1;color:var(--accent)} .include__title{font-family:var(--sans);font-size:19px;font-weight:700;letter-spacing:0;line-height:1.35} .include__text{margin-top:8px;font-size:15px} .faq__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:start} .faq__head{position:sticky;top:124px} .faq__head .section-head{margin-bottom:32px} .clients--joined{padding-top:0} .clients--strip{padding:44px 0 0} .clients--strip .marquee__item img{height:56px} .card-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} /* About: team */ .team__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .person{display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden} .person__photo{aspect-ratio:1/1;overflow:hidden;background:var(--wash)} .person__photo img{width:100%;height:100%;object-fit:cover} .person figcaption{padding:22px 16px 26px;text-align:center} .person__name{margin:0;font-family:var(--sans);font-size:18px;font-weight:700;letter-spacing:0;line-height:1.3} .person__role{margin-top:6px;color:var(--accent);font-size:13px;font-weight:600;letter-spacing:1px;line-height:1.4;text-transform:uppercase} /* Contact */ .contact__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:start} .contact__info .section-head{margin-bottom:32px} .contact__details{display:grid;grid-template-columns:1fr;gap:24px} .contact__detail{display:flex;gap:14px} .contact__ico{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;border-radius:100px;background:var(--tint);color:var(--accent)} .contact__detail dt{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase} .contact__detail dd{margin-top:4px;color:var(--ink);font-weight:600} .contact__detail a{text-decoration:none} .contact__detail a:hover{color:var(--accent)} .form-shell{padding:48px;background:#fff;border:1px solid var(--line);border-radius:16px} .cf7-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px} .cf7-field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px} .cf7-row .cf7-field{margin-bottom:0} .cf7-field label{color:var(--ink);font-size:14px;font-weight:600} .cf7-field .req{color:var(--accent)} .form-shell input[type=text],.form-shell input[type=email],.form-shell input[type=tel],.form-shell select,.form-shell textarea{width:100%;padding:14px 16px;background:#FDFCFE;border:1px solid var(--line-strong);border-radius:8px;color:var(--ink);font-size:16px;line-height:1.4;transition:border-color .2s ease,box-shadow .2s ease} .form-shell textarea{height:120px;min-height:96px;resize:vertical} .form-shell select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:44px} .form-shell input:focus,.form-shell select:focus,.form-shell textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(224,0,77,.12)} .form-shell ::placeholder{color:#8B8397} .form-shell .wpcf7-submit{display:inline-flex;align-items:center;padding:16px 32px;border:0;border-radius:100px;background:var(--accent);color:#fff;font-weight:600;font-size:16px;cursor:pointer;transition:background-color .2s ease} .form-shell .wpcf7-submit:hover{background:var(--accent-hover)} .form-shell .wpcf7-spinner{margin:0 0 0 12px} .form-shell .wpcf7-not-valid-tip{margin-top:6px;font-size:13px;color:var(--accent)} .form-shell .wpcf7-response-output{margin:20px 0 0!important;padding:14px 16px!important;border-radius:8px;border:1px solid var(--line-strong)!important;font-size:15px;color:var(--ink)} .form-shell .wpcf7 form.sent .wpcf7-response-output{border-color:#1f8a5b!important;background:#effaf5} .form-shell .wpcf7 form.invalid .wpcf7-response-output,.form-shell .wpcf7 form.failed .wpcf7-response-output{border-color:var(--accent)!important;background:#fff4f7} /* Case study single: browser and phone frames (hover scrolls the screenshot) */ .cs-hero.page-hero--rich{padding-bottom:120px} .cs-hero__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center} .cs-hero__title{font-size:54px} .cs-meta--hero{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 40px;margin:32px 0 0;padding-top:0;border-top:0;max-width:560px} .cs-meta--hero dd{font-size:17px} .cs-hero .btn-row{margin-top:32px} .device-stage{position:relative;padding-bottom:40px} .device--desktop{position:relative;padding-top:40px;background:#1C1530;border-radius:12px;overflow:hidden;border:1px solid var(--line)} .device--desktop::before{content:"";position:absolute;top:15px;left:18px;width:10px;height:10px;border-radius:50%;background:#FF5F57;box-shadow:18px 0 0 #FEBC2E,36px 0 0 #28C840} .device--desktop::after{content:attr(data-url);position:absolute;top:10px;left:50%;transform:translateX(-50%);min-width:180px;max-width:52%;padding:4px 16px;border-radius:100px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);font-size:12px;line-height:1.5;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .device__screen{container-type:size;overflow:hidden;background:#fff} .device--desktop .device__screen{aspect-ratio:16/10} .device__screen img{width:100%;height:auto;transition:transform 2.8s cubic-bezier(.3,0,.3,1)} .device:hover .device__screen img{transform:translateY(calc(-100% + 100cqh))} .device--phone{position:absolute;right:32px;bottom:0;width:24%;max-width:190px;padding:8px;background:#1C1530;border-radius:26px} .device--phone .device__screen{aspect-ratio:9/19;border-radius:18px} @supports not (height:100cqh){.device__screen img{height:100%;object-fit:cover;object-position:top}.device:hover .device__screen img{transform:none}} @media (prefers-reduced-motion:reduce){.device__screen img,.device:hover .device__screen img{transition:none;transform:none}} /* Prose (case study write-up, blog posts, legal pages) */ .prose{max-width:720px;color:var(--text);font-size:18px;line-height:1.75} .prose>*+*{margin-top:22px} .prose h2{margin-top:56px;font-size:34px;line-height:1.15} .prose h3{margin-top:40px;font-size:26px;line-height:1.25} .prose h4{margin-top:32px;font-family:var(--sans);font-size:19px;font-weight:700} .prose h2+*,.prose h3+*,.prose h4+*{margin-top:14px} .prose a{color:var(--accent);text-underline-offset:3px} .prose strong{color:var(--ink)} .prose ul,.prose ol{padding-left:22px} .prose li+li{margin-top:8px} .prose li::marker{color:var(--accent)} .prose img,.prose figure{border-radius:16px} .prose figure img{border-radius:16px} .prose figcaption{margin-top:8px;font-size:14px} .prose blockquote{padding:4px 0 4px 24px;border-left:3px solid var(--accent);color:var(--ink);font-family:var(--display);font-size:22px;line-height:1.4} .prose table{width:100%;border-collapse:collapse;font-size:16px} .prose th,.prose td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} .prose th{color:var(--ink);background:var(--wash)} .prose .wp-block-table{overflow-x:auto} .prose--page{max-width:800px} .cs-work .prose{max-width:none} /* Blog single */ .post-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center} .post-hero__title{font-size:46px;line-height:1.08} .byline{display:flex;align-items:center;gap:16px;margin-top:32px;padding-top:28px;border-top:1px solid var(--line)} .byline__avatar{width:56px;height:56px;border-radius:100px;object-fit:cover} .byline{flex-wrap:wrap;row-gap:16px} .byline__who strong{display:block;color:var(--ink);font-size:16px;line-height:1.3} .byline__who span{display:block;margin-top:2px;font-size:14px} .byline__meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 0 auto;padding:0;list-style:none} .byline__meta li{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:100px;background:#fff;border:1px solid var(--line);color:var(--ink);font-size:13px;font-weight:500;white-space:nowrap} .byline__meta svg{color:var(--accent)} .post-hero__media{margin:0} .post-hero__media img{width:100%;border-radius:16px;aspect-ratio:16/9;object-fit:cover} .post-body{padding-top:72px} .post-body__grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:72px} .post-body__grid:not(:has(.toc)){grid-template-columns:minmax(0,1fr)} .post-body .prose{max-width:none} .toc{position:sticky;top:124px;align-self:start;max-height:calc(100vh - 160px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent} .toc__title{margin-bottom:12px;color:var(--ink);font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase} .toc ol{list-style:none;padding:0;border-left:1px solid var(--line)} .toc a{display:block;padding:8px 0 8px 16px;margin-left:-1px;border-left:2px solid transparent;color:var(--text);font-size:14px;line-height:1.4;text-decoration:none} .toc a:hover,.toc a.is-active{color:var(--ink);border-left-color:var(--accent)} .share{display:flex;align-items:center;gap:10px;margin-top:56px;padding-top:32px;border-top:1px solid var(--line)} .share__label{margin-right:8px;color:var(--ink);font-weight:700;font-size:14px} .share a,.share button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line-strong);border-radius:100px;background:#fff;color:var(--ink);cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease} .share a:hover,.share button:hover,.share button.is-done{background:var(--accent);border-color:var(--accent);color:#fff} .author-box{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:56px;padding:24px 28px;background:var(--wash);border-radius:16px} .author-box__who{flex:1;min-width:180px} .author-box .share{margin:0;padding:0;border-top:0} .author-box__avatar{width:72px;height:72px;border-radius:100px;object-fit:cover} .author-box__name{font-size:22px} .author-box p{font-size:15px} .blog-cta{margin:40px 0;padding:36px;background:var(--wash);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:16px} .blog-cta__title{font-family:var(--display);font-weight:600;font-size:26px;line-height:1.15;color:var(--ink)} .blog-cta__text{margin-top:10px;font-size:16px} .blog-cta .btn-row{margin-top:24px} .prose .blog-cta a.btn{text-decoration:none} .prose .blog-cta a.btn--primary{color:#fff} .prose .blog-cta a.btn--outline{color:var(--ink)} .prose .blog-cta a.btn--outline:hover{color:#fff} /* Pagination and search */ .pagination{margin-top:56px} .pagination .nav-links{display:flex;justify-content:center;gap:8px} .pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 14px;border:1px solid var(--line-strong);border-radius:100px;color:var(--ink);text-decoration:none;font-weight:600} .pagination .page-numbers.current,.pagination .page-numbers:hover{background:var(--ink);border-color:var(--ink);color:#fff} .search-form{display:flex;gap:10px;max-width:560px;margin-top:28px} .search-form input{flex:1;padding:14px 18px;border:1px solid var(--line-strong);border-radius:100px;background:#fff} /* Reveal (only when JS runs and motion is allowed) */ .js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease} .js .reveal.is-in{opacity:1;transform:none} /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width:1280px){ .home-hero__grid{grid-template-columns:minmax(0,1fr) 36%} .home-hero__media{max-width:none} .home-hero__title{font-size:50px} .page-hero__title{font-size:58px} .section-title{font-size:44px} .stat__num{font-size:52px} .nav-menu a{padding:10px 11px;font-size:15px} .brand__img{height:48px} .cs-slide{gap:36px} .cs-slide__body{padding:40px 0 40px 40px} } @media (max-width:1024px){ .section{padding:80px 0} .section--tight{padding:56px 0} .section-head{margin-bottom:44px} .section-title{font-size:40px} .section-bar{flex-direction:column;align-items:flex-start;margin-bottom:44px} .primary-nav,.site-header__btn{display:none} .nav-toggle{display:inline-flex} .site-header__inner{height:76px} .mobile-panel{top:76px} .brand__img{height:46px} .home-hero{min-height:0;margin-top:-76px;padding:164px 0 100px} .page-hero.page-hero--rich{margin-top:-76px;padding:148px 0 88px} .home-hero__grid{grid-template-columns:1fr;gap:40px} .home-hero__title{font-size:50px} .home-hero__media{justify-self:start;max-width:520px} .home-hero::before{-webkit-mask-image:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.5) 65%,#000 100%);mask-image:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.5) 65%,#000 100%)} .page-hero{padding:72px 0 80px} .page-hero__title{font-size:50px} .page-hero--simple .page-hero__title{font-size:44px} .stats__grid{grid-template-columns:repeat(2,1fr)} .stat,.stat+.stat{padding:32px 24px 32px 0;border-left:0} .stat:nth-child(even){padding-left:24px;border-left:1px solid var(--line)} .stat:nth-child(n+3){border-top:1px solid var(--line)} .stat__num{font-size:48px} .cs-slide{grid-template-columns:1fr;gap:0} .cs-slide__media{order:-1} .cs-slide__body{padding:32px 32px 36px} .cs-slide__title{font-size:28px} .tcards{grid-auto-columns:calc((100% - 24px) / 2)} .split,.split--sticky,.faq__grid,.contact__grid,.hub__grid{grid-template-columns:1fr;gap:48px} .split--sticky .split__side,.faq__head{position:static} .hub__index{display:none} .accordion--services .accordion__a{padding-left:0} .pillars{grid-template-columns:repeat(2,1fr)} .why__cta{flex-direction:column;align-items:flex-start} .why__cta-title{font-size:32px} .steps{grid-template-columns:repeat(2,1fr);row-gap:40px} .card-grid{grid-template-columns:repeat(2,1fr);gap:24px} .problem__list{grid-template-columns:1fr 1fr} .problem__head{grid-template-columns:1fr;gap:24px;margin-bottom:48px} .includes{column-gap:40px} .team__grid{grid-template-columns:repeat(2,1fr)} .cs-hero__grid{grid-template-columns:1fr;gap:48px} .cs-hero__title{font-size:46px} .post-hero__title{font-size:40px} .post-hero__grid{grid-template-columns:1fr;gap:40px} .post-body__grid{grid-template-columns:minmax(0,1fr);gap:0} .toc{position:static;max-height:none;overflow:visible;margin:0 0 36px;border:1px solid var(--line);border-radius:12px;background:#fff} .toc .toc__title{padding:16px 18px;cursor:pointer} .toc__chevron{display:block} .toc .toc__list{display:none;margin:0 18px 16px} .toc.is-open .toc__list{display:block} .toc.is-open .toc__chevron{transform:rotate(180deg)} .footer-grid{grid-template-columns:1fr 1fr;gap:40px} .footer-brand{grid-column:1/-1} } @media (max-width:767px){ body{font-size:16px} .container{padding:0 20px} .section{padding:64px 0} .section--tight{padding:48px 0} .section-head{margin-bottom:36px} .section-title{font-size:32px} .section-intro{font-size:16px} .eyebrow{font-size:12px;letter-spacing:1.2px} .btn{padding:14px 22px} .btn--lg{padding:16px 26px;font-size:15px} .btn-row{margin-top:28px} .admin-bar .site-header{top:46px} .site-header__inner{height:68px} .mobile-panel{top:68px} .admin-bar .mobile-panel{top:114px} .brand__img{height:40px} .home-hero{margin-top:-68px;padding:124px 0 72px} .page-hero.page-hero--rich{margin-top:-68px;padding:124px 0 64px} .home-hero__title{font-size:38px} .home-hero__lead{font-size:16px} .page-hero__lead{font-size:17px} .trust-note{align-items:flex-start} .page-hero{padding:56px 0 64px} .page-hero__title{font-size:38px} .page-hero--simple .page-hero__title{font-size:34px} .stats__grid{grid-template-columns:1fr} .stat,.stat+.stat,.stat:nth-child(even){padding:28px 0;border-left:0;border-top:1px solid var(--line)} .stat:first-child{border-top:0} .stat__num{font-size:44px} .section-bar__side{flex-wrap:wrap} .slider-dots{display:none} .slider-foot{justify-content:flex-end;margin-top:16px} .cs-slide__body{padding:24px 20px 28px} .cs-slide__tag{font-size:12px;padding:8px 12px} .cs-slide__title{font-size:24px} .cs-meta{gap:12px 28px} .tcards{grid-auto-columns:100%} .tcard{padding:28px 24px} .marquee__track{gap:48px} .marquee__item img{width:100px;height:56px} .accordion__q{font-size:17px;gap:14px;padding:20px 0} .accordion__a{padding-right:0} .svc-icon{width:40px;height:40px} .card-grid--2{grid-template-columns:1fr} .pillars,.steps,.card-grid,.problem__list,.includes,.contact__details,.checklist{grid-template-columns:1fr} .pillar,.problem-item{padding:28px 24px} .why__cta-title{font-size:28px} .step{padding-right:0} .step__title{font-size:22px} .hub-item{padding:40px 0} .hub-item__title{font-size:30px} .checklist{padding:20px} .hub-cta__box{padding:48px 24px} .team__grid{gap:20px 16px} .person__name{font-size:16px} .person figcaption{padding:16px 10px 20px} .person__role{font-size:11px;letter-spacing:.8px} .form-shell{padding:28px 20px} .cf7-row{grid-template-columns:1fr;gap:20px} .cs-hero.page-hero--rich{padding-bottom:88px} .cs-meta--hero{gap:16px 24px} .cs-meta--hero dd{font-size:15px} .cs-hero__title,.post-hero__title{font-size:34px} .device--desktop{padding-top:30px} .device--desktop::before{top:11px;left:14px;width:8px;height:8px;box-shadow:14px 0 0 #FEBC2E,28px 0 0 #28C840} .device--desktop::after{top:7px;font-size:10px;min-width:120px;padding:3px 12px} .device--phone{right:12px;width:26%;padding:5px;border-radius:16px} .device--phone .device__screen{border-radius:12px} .prose{font-size:17px} .prose h2{font-size:28px;margin-top:44px} .prose h3{font-size:22px} .post-hero__grid{gap:32px} .byline__meta{margin-left:0;width:100%} .post-body{padding-top:48px} .blog-cta{padding:24px 16px} .blog-cta .btn-row{flex-wrap:nowrap;gap:8px} .blog-cta .btn{flex:1 1 0;min-width:0;padding:13px 10px;font-size:12px;line-height:1.25;white-space:normal;text-align:center} .author-box .share{width:100%;padding-top:16px;border-top:1px solid var(--line)} .site-footer{padding-top:64px} .footer-grid{grid-template-columns:1fr;gap:36px;padding-bottom:48px} .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px} } /* Floating WhatsApp button (all pages) */ .wa-float{position:fixed;right:24px;bottom:24px;z-index:95;display:flex;align-items:center;gap:12px;text-decoration:none} .wa-float__btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:#25D366;color:#fff;box-shadow:0 10px 30px -8px rgba(7,0,42,.45);transition:transform .25s ease,box-shadow .25s ease} .wa-float__btn::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25D366;opacity:.45;z-index:-1;animation:wn-wa-pulse 2.4s ease-out infinite} .wa-float__label{padding:10px 16px;border-radius:100px;background:#fff;color:var(--ink);font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 10px 30px -10px rgba(7,0,42,.35);opacity:0;transform:translateX(8px);transition:opacity .25s ease,transform .25s ease;pointer-events:none} .wa-float:hover .wa-float__btn,.wa-float:focus-visible .wa-float__btn{transform:scale(1.06);box-shadow:0 14px 36px -8px rgba(7,0,42,.5)} .wa-float:hover .wa-float__label,.wa-float:focus-visible .wa-float__label{opacity:1;transform:none} .panel-open .wa-float{display:none} @keyframes wn-wa-pulse{0%{transform:scale(1);opacity:.45}70%{transform:scale(1.6);opacity:0}100%{transform:scale(1.6);opacity:0}} @media (prefers-reduced-motion:reduce){.wa-float__btn::before{animation:none;opacity:0}} @media (max-width:767px){.wa-float{right:16px;bottom:16px}.wa-float__btn{width:54px;height:54px}.wa-float__label{display:none}} /* Custom dropdown (enhances form selects) */ .wn-dd{position:relative} .wn-dd__native{position:absolute!important;inset:0;width:100%!important;height:100%!important;opacity:0;pointer-events:none} .wn-dd__btn{position:relative;display:flex;align-items:center;width:100%;min-height:52px;padding:14px 48px 14px 16px;background:#FDFCFE;border:1px solid var(--line-strong);border-radius:8px;color:var(--ink);font-size:16px;line-height:1.4;text-align:left;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease} .wn-dd__btn::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;border-right:1.75px solid var(--ink);border-bottom:1.75px solid var(--ink);transform:translateY(-70%) rotate(45deg);transition:transform .25s ease} .wn-dd.is-open .wn-dd__btn::after{transform:translateY(-25%) rotate(-135deg)} .wn-dd__btn:hover{border-color:var(--ink)} .wn-dd.is-open .wn-dd__btn,.wn-dd__btn:focus-visible{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(224,0,77,.12)} .wn-dd__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wn-dd__list{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;max-height:300px;margin:0;padding:6px;overflow-y:auto;list-style:none;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 44px -14px rgba(7,0,42,.28);animation:wn-dd-in .18s ease-out} .wn-dd__list:focus{outline:0} .wn-dd__opt{position:relative;padding:11px 14px 11px 38px;border-radius:8px;color:var(--ink);font-size:15px;line-height:1.35;cursor:pointer} .wn-dd__opt.is-active{background:var(--wash)} .wn-dd__opt[aria-selected="true"]{color:var(--accent);font-weight:600} .wn-dd__opt[aria-selected="true"]::before{content:"";position:absolute;left:16px;top:50%;width:5px;height:10px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:translateY(-65%) rotate(45deg)} @keyframes wn-dd-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.wn-dd__list{animation:none}} /* Table of contents: H2s with foldable H3s */ .toc__row{display:flex;align-items:flex-start;justify-content:space-between;gap:6px} .toc__row a{flex:1} .toc__toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;margin-top:4px;padding:0;border:0;border-radius:6px;background:none;color:var(--text);cursor:pointer;transition:transform .25s ease,background-color .2s ease,color .2s ease} .toc__toggle:hover{background:var(--wash);color:var(--ink)} .toc__item.is-open .toc__toggle{transform:rotate(180deg)} .toc .toc__sub{margin:0 0 6px;border-left:0} .toc .toc__sub a{padding:6px 0 6px 30px;font-size:13px} .is-enhanced .toc__item:not(.is-open) .toc__sub{display:none} .toc__item:not(.is-open):has(.toc__sub a.is-active)>.toc__row a{color:var(--ink);border-left-color:var(--accent)} /* Blog article: rhythm and graphic touches so long posts don't read as a wall of text */ .post-body .prose{counter-reset:wn-sec} .post-body .prose>p:first-child{color:var(--ink);font-size:21px;line-height:1.65} .post-body .prose h2{counter-increment:wn-sec;position:relative;margin-top:72px;padding-top:56px;border-top:1px solid var(--line)} .post-body .prose h2::before{content:counter(wn-sec,decimal-leading-zero);display:inline-flex;align-items:center;justify-content:center;position:absolute;top:-17px;left:0;min-width:48px;height:34px;padding:0 12px;border-radius:100px;background:var(--accent);color:#fff;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:1px} .post-body .prose h3{position:relative;margin-top:44px;padding-left:20px} .post-body .prose h3::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:4px;border-radius:4px;background:var(--accent)} .post-body .prose ul{list-style:none;padding:24px 28px;background:var(--wash);border-radius:16px} .post-body .prose ul li{position:relative;padding-left:32px;color:var(--ink)} .post-body .prose ul li+li{margin-top:12px} .post-body .prose ul li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat} .post-body .prose ol{padding-left:0;list-style:none;counter-reset:wn-ol} .post-body .prose ol>li{counter-increment:wn-ol;position:relative;padding-left:44px} .post-body .prose ol>li::before{content:counter(wn-ol);position:absolute;left:0;top:0;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--tint);color:var(--accent);font-size:14px;font-weight:700} .post-body .prose .wp-block-table{border:1px solid var(--line);border-radius:16px;overflow:hidden} .post-body .prose .wp-block-table table{margin:0} .post-body .prose .wp-block-table th{background:var(--wash);font-weight:700} .post-body .prose .wp-block-table tr:last-child td{border-bottom:0} .post-body .prose .wp-block-image img{border:1px solid var(--line);border-radius:16px} .post-body .prose strong{font-weight:700} /* Reading progress bar under the header on posts */ .read-progress{position:absolute;left:0;bottom:-1px;height:3px;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);pointer-events:none} @media (max-width:767px){ .post-body .prose>p:first-child{font-size:18px} .post-body .prose h2{margin-top:56px;padding-top:44px} .post-body .prose ul{padding:20px} } /* Home story: founder card plus a stack linking to the full team */ .story__people{display:flex;flex-direction:column;align-items:center;gap:20px} .story__lead{width:100%;max-width:300px;border:1px solid var(--line)} .team-stack{display:inline-flex;align-items:center;gap:14px;padding:8px 18px 8px 8px;border:1px solid var(--line);border-radius:100px;background:#fff;color:var(--ink);font-size:15px;font-weight:600;text-decoration:none;transition:border-color .2s ease,color .2s ease} .team-stack:hover{border-color:var(--accent);color:var(--accent)} .team-stack__faces{display:flex} .team-stack__face{width:40px;height:40px;border-radius:50%;overflow:hidden;border:2px solid #fff;background:var(--wash)} .team-stack__face+.team-stack__face{margin-left:-12px} .team-stack__face img{width:100%;height:100%;object-fit:cover} .team-stack__label{display:inline-flex;align-items:center;gap:8px} .team-stack__label svg{transition:transform .2s ease} .team-stack:hover .team-stack__label svg{transform:translateX(3px)} /* About: story timeline, sign-off, facts strip, promises */ .timeline{position:relative;margin:0;padding:0;list-style:none} .timeline::before{content:"";position:absolute;left:7px;top:13px;bottom:13px;width:2px;background:linear-gradient(180deg,var(--accent) 0%,rgba(224,0,77,.15) 100%)} .timeline__item{position:relative;padding:0 0 44px 48px} .timeline__item:last-child{padding-bottom:0} .timeline__item::before{content:"";box-sizing:border-box;position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--accent)} .timeline__item:last-child::before{background:var(--accent)} .timeline__label{margin:0 0 10px;color:var(--accent);font-size:13px;font-weight:700;letter-spacing:1.5px;line-height:1.4;text-transform:uppercase} .timeline__text p{color:var(--ink);font-size:19px;line-height:1.65} .signoff{display:flex;align-items:center;gap:14px;margin:40px 0 0 48px;padding-top:28px;border-top:1px solid var(--line)} .signoff__photo{width:56px;height:56px;border-radius:50%;object-fit:cover} .signoff strong{display:block;color:var(--ink);font-family:var(--display);font-size:20px;font-weight:600;line-height:1.2} .signoff span{display:block;margin-top:2px;font-size:14px} .facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:80px 0 0;padding:0;list-style:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .facts li{padding:28px 24px;color:var(--ink);font-family:var(--display);font-size:22px;font-weight:600;line-height:1.25;letter-spacing:-.01em} .facts li+li{border-left:1px solid var(--line)} .facts li em{font-style:normal;color:var(--accent)} .promise-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} .promise{padding:32px;background:#fff;border-radius:16px} .promise__icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:var(--tint);color:var(--accent)} .promise__title{margin-top:20px;font-size:22px;line-height:1.2} .promise__text{margin-top:8px;font-size:15px} .team:not(.section--wash) .person{border:1px solid var(--line)} @media (max-width:1024px){ .facts{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:56px} .facts li:nth-child(3){border-left:0} .facts li:nth-child(n+3){border-top:1px solid var(--line)} .promise-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:767px){ .timeline__item{padding-left:36px} .timeline__text p{font-size:17px} .signoff{margin-left:36px} .facts li{padding:20px 16px;font-size:18px} .promise-grid{grid-template-columns:1fr} .promise{padding:24px} } /* Table of contents title doubles as the phone/tablet toggle */ button.toc__title{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:0 0 12px;padding:0;border:0;background:none;text-align:left;cursor:default} .toc__chevron{display:none;flex-shrink:0;color:var(--accent);transition:transform .25s ease} @media (max-width:1024px){button.toc__title{margin:0}} /* Pricing block on service pages */ .price__grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:64px;align-items:stretch} .price__intro .section-head{margin-bottom:24px} .price__text{max-width:520px;font-size:17px} .price__notes{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin:32px 0 0;padding:0} .price__notes li{display:flex;align-items:flex-start;gap:10px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:12px;font-size:14px;line-height:1.5;color:var(--text)} .price__notes svg{flex-shrink:0;margin-top:4px;color:var(--accent)} .price__notes strong{display:block;color:var(--ink);font-weight:700;font-size:15px} .price__card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:44px 40px;border-radius:24px;background:radial-gradient(520px 360px at 100% 100%,rgba(224,0,77,.55),rgba(224,0,77,0) 62%),linear-gradient(150deg,#160A45 0%,#0B0233 60%);color:rgba(255,255,255,.72);text-align:left} .price__card::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.16) 1.1px,transparent 1.5px);background-size:22px 22px;-webkit-mask-image:radial-gradient(70% 70% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(70% 70% at 50% 0%,#000,transparent 75%)} .price__label{display:inline-block;margin:0;padding:8px 14px;border-radius:100px;background:rgba(224,0,77,.18);font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#FF6B9A} .price__figure{margin:20px 0 0;font-family:var(--display);font-weight:600;font-size:30px;line-height:1.2;letter-spacing:-.02em;color:#fff;text-wrap:balance} .price__card .btn{width:auto;margin-top:28px} .price__card .btn--primary{background:#fff;color:var(--ink)} .price__card .btn--primary .btn__arrow{color:var(--accent);transition:transform .2s ease,color .2s ease} .price__card .btn--primary:hover{background:var(--accent);color:#fff} .price__card .btn--primary:hover .btn__arrow{color:#fff} .price__foot{margin:14px 0 0;font-size:14px;color:rgba(255,255,255,.6)} @media (max-width:1024px){ .price__grid{grid-template-columns:1fr;gap:40px} .price__card{max-width:none} } @media (max-width:767px){ .price__notes{grid-template-columns:1fr} .price__card{padding:36px 24px;border-radius:20px} .price__figure{font-size:26px} } /* Optional feature block on service pages */ .feature__link{margin-top:24px} .feature .split__media img{border:1px solid var(--line)} /* Our Work: client type filter */ .work-filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 40px} .work-filter__btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border:1px solid var(--line-strong);border-radius:100px;background:#fff;color:var(--ink);font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.2;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease} .work-filter__btn span{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:100px;background:var(--tint);color:var(--accent);font-size:12px;font-weight:700;transition:background-color .2s ease,color .2s ease} .work-filter__btn:hover{border-color:var(--ink)} .work-filter__btn.is-active{background:var(--ink);border-color:var(--ink);color:#fff} .work-filter__btn.is-active span{background:var(--accent);color:#fff} .work-grid__item[hidden]{display:none} .work-grid__empty{margin:0;color:var(--text)} @media (max-width:767px){.work-filter{gap:8px;margin-bottom:28px}.work-filter__btn{padding:9px 14px;font-size:14px}} /* Blog card date */ .post-card__date{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;color:var(--text);font-size:13px;font-weight:500} .post-card__date svg{color:var(--accent)} /* Careers */ .role__head{display:flex;flex-direction:column;gap:6px;flex:1} .role__title{font-size:20px;font-weight:600;line-height:1.35;color:var(--ink)} .role__meta{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--accent)} .role__meta span+span::before{content:"\00B7";margin-right:8px;color:var(--text)} .role__label{margin:24px 0 12px;font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink)} .role__points{display:grid;gap:10px;margin:0;padding:0;list-style:none} .role__points li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.55} .role__points svg{flex-shrink:0;margin-top:4px;color:var(--accent)} .roles__empty{padding:40px;background:var(--wash);border:1px solid var(--line);border-radius:16px} .roles__empty-title{margin-top:20px;font-size:24px;line-height:1.2} .roles__empty-text{margin-top:10px;font-size:16px} .apply-steps{display:grid;gap:28px;margin:0 0 32px;padding:0;list-style:none} .apply-step{display:flex;gap:16px;align-items:flex-start} .apply-step__num{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:100px;background:var(--tint);color:var(--accent);font-family:var(--display);font-size:14px;font-weight:700} .apply-step__title{margin:0;font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:0;line-height:1.35} .apply-step__text{margin-top:6px;font-size:15px} .apply-alt{font-size:15px;color:var(--ink);font-weight:600} .apply-alt a{color:var(--accent);text-decoration:none} .form-shell input[type=file]{width:100%;padding:12px 14px;background:#FDFCFE;border:1px dashed var(--line-strong);border-radius:8px;color:var(--text);font-size:14px} .form-shell input[type=file]::file-selector-button{margin-right:12px;padding:8px 14px;border:0;border-radius:100px;background:var(--ink);color:#fff;font-weight:600;font-size:13px;cursor:pointer} .cf7-hint{font-size:13px;color:var(--text)} @media (max-width:640px){ .roles__empty{padding:28px 20px} .roles__empty-title{font-size:20px} .role__title{font-size:18px} } /* Careers: role cards + pop-up */ .roles__bar{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:48px;padding-bottom:28px;border-bottom:1px solid var(--line)} .roles__bar .section-head{margin-bottom:0} .roles__count{flex-shrink:0;margin:0 0 6px;padding:8px 14px;border-radius:100px;background:var(--tint);color:var(--accent);font-size:13px;font-weight:700;letter-spacing:.5px;white-space:nowrap} .role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} .role-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:36px;background:#fff;border:1px solid var(--line);border-radius:20px;text-align:left;font:inherit;color:var(--text);cursor:pointer;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease} .role-card::before{content:"";position:absolute;left:36px;top:0;width:48px;height:3px;border-radius:0 0 3px 3px;background:var(--accent);opacity:0;transition:opacity .25s ease} .role-card:hover{border-color:rgba(224,0,77,.35);box-shadow:0 20px 48px rgba(7,0,42,.08);transform:translateY(-3px)} .role-card:hover::before{opacity:1} .role-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .role-card .role__meta{margin:0} .role-card__title{display:block;margin-top:14px;font-family:var(--display);font-size:28px;font-weight:600;line-height:1.15;letter-spacing:-.01em;color:var(--ink)} .role-card__text{display:block;margin-top:12px;font-size:15px;line-height:1.6;max-width:44ch} .role-card__cta{display:inline-flex;align-items:center;gap:8px;margin-top:28px;color:var(--ink);font-size:15px;font-weight:600} .role-card__cta svg{color:var(--accent);transition:transform .2s ease} .role-card:hover .role-card__cta svg{transform:translateX(4px)} .role-modal{width:min(680px,calc(100% - 32px));max-height:calc(100vh - 48px);margin:auto;padding:0;border:0;border-radius:20px;background:#fff;color:var(--text);box-shadow:0 32px 80px rgba(7,0,42,.28);overflow:auto} .role-modal::backdrop{background:rgba(7,0,42,.6);backdrop-filter:blur(4px)} .role-modal[open]{animation:roleIn .3s cubic-bezier(.25,.7,.25,1)} @keyframes roleIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .role-modal__box{position:relative;padding:48px} .role-modal__close{position:absolute;top:20px;right:20px;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--line-strong);border-radius:100px;background:#fff;color:var(--ink);cursor:pointer;transform:rotate(45deg);transition:border-color .2s ease,color .2s ease} .role-modal__close:hover{border-color:var(--accent);color:var(--accent)} .role-modal__title{margin-top:12px;font-size:32px;line-height:1.15} .role-modal__text{margin-top:16px;font-size:16px} .role-modal__text p+p{margin-top:12px} .role-modal__actions{margin-top:32px} .has-modal{overflow:hidden} @media (max-width:900px){ .role-grid{grid-template-columns:1fr} } @media (max-width:640px){ .roles__bar{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:32px;padding-bottom:20px} .role-card{padding:26px 22px} .role-card::before{left:22px} .role-card__title{font-size:24px} .role-modal__box{padding:56px 22px 28px} .role-modal__title{font-size:26px} }