:root{ --paper:#FDFDFD; --ink:#0A0A0A; --stone:#EDEBE7; --line:#0A0A0A; --soft:rgba(10,10,10,.14); --muted:#6B6862; --blue:#0038FF; --red:#FF2D00; --yellow:#FFD100; --clay:#CFC7BC; --fog:#C5C9C8; --bark:#8F877C; --moss:#6F7466; --night:#2E302D; --bg:var(--paper); --fg:var(--ink); --sans:'DM Sans','Helvetica Neue',Arial,sans-serif; --serif:'Cormorant',Georgia,serif; --g:clamp(16px,2.4vw,32px); } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0B0B0A;--fg:#F2F0EC;--line:#F2F0EC;--soft:rgba(242,240,236,.16);--stone:#1A1A18;--muted:#A19D96;color-scheme:dark}} :root[data-theme="dark"]{--bg:#0B0B0A;--fg:#F2F0EC;--line:#F2F0EC;--soft:rgba(242,240,236,.16);--stone:#1A1A18;--muted:#A19D96;color-scheme:dark} *{box-sizing:border-box} [hidden]{display:none!important} body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-weight:400;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} h1,h2,h3,p{margin:0} :focus-visible{outline:2px solid var(--blue);outline-offset:2px} @media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}} /* type: small and uppercase for everything that isn't a headline */ .cap{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase} .cap-l{font-size:13px;font-weight:500;letter-spacing:.05em;text-transform:uppercase} .muted{color:var(--muted)} .headline{font-weight:300;font-size:clamp(34px,5.4vw,76px);line-height:1;letter-spacing:-.035em;text-wrap:balance} .sub{font-weight:300;font-size:clamp(22px,2.6vw,34px);line-height:1.1;letter-spacing:-.02em;text-wrap:balance} .u{border-bottom:1px solid currentColor;padding-bottom:2px} .u:hover{opacity:.7} /* wordmark with the two worlds */ .wm{font-family:var(--serif);font-style:italic;font-weight:300;letter-spacing:-.03em;white-space:nowrap;line-height:1} .o{display:inline-block} .o svg{display:inline-block;width:1.04ex;height:1.04ex;vertical-align:-.015em;margin:0 .03em 0 .05em;transform:skewX(-9deg);overflow:visible} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* announcement */ .announce{background:var(--blue);color:#fff;text-align:center;padding:9px var(--g)} .announce a{border-bottom:1px solid currentColor} /* header: nav left, wordmark center, utilities right */ .hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--bg);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:14px var(--g);border-bottom:1px solid var(--soft)} .hdr nav{display:flex;gap:22px} .hdr .right{display:flex;gap:22px;justify-content:flex-end;align-items:center} .hdr .wm{font-size:30px} .hdr a:hover{opacity:.6} .icon-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:var(--fg);cursor:pointer;padding:0;margin:-12px -10px -12px 0} .icon-btn svg{width:18px;height:18px} .theme .sun{display:none} :root[data-theme="dark"] .theme .sun{display:block}:root[data-theme="dark"] .theme .moon{display:none} .menu{display:none} .drawer{padding:8px var(--g) 20px;border-bottom:1px solid var(--soft);background:var(--bg)} .drawer a{display:block;padding:14px 0;border-bottom:1px solid var(--soft)} @media (max-width:900px){ .hdr{grid-template-columns:auto 1fr auto} .hdr nav,.hdr .right .hide-m{display:none} .menu{display:inline-flex} .hdr .wm{font-size:26px;justify-self:center} } /* photo placeholders in muted tones; drop an inside to replace */ /* Placeholder "photographs": soft light, a horizon, and film grain, in muted tones. To use a real photo, put an inside the .ph element; it covers the placeholder. */ .ph{position:relative;overflow:hidden;background-color:var(--clay); background-image:radial-gradient(ellipse 70% 55% at 28% 22%,rgba(255,255,255,.42),transparent 62%),linear-gradient(172deg,#DCD5CA 0%,#C6BCAF 48%,#9E958A 100%)} .ph::before{content:"";position:absolute;inset:0;opacity:.22;mix-blend-mode:overlay;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .ph.fog{background-color:var(--fog);background-image:radial-gradient(ellipse 80% 50% at 70% 18%,rgba(255,255,255,.5),transparent 60%),linear-gradient(180deg,#D5D9D8 0%,#BFC4C3 55%,#8E9493 100%)} .ph.bark{background-color:var(--bark);background-image:radial-gradient(ellipse 60% 45% at 75% 30%,rgba(255,236,210,.35),transparent 60%),linear-gradient(165deg,#A79E92 0%,#857C71 50%,#4E4943 100%)} .ph.moss{background-color:var(--moss);background-image:radial-gradient(ellipse 65% 50% at 22% 70%,rgba(230,236,210,.28),transparent 62%),linear-gradient(190deg,#8A8F80 0%,#6A6F61 50%,#3C3F37 100%)} .ph.night{background-color:var(--night);background-image:radial-gradient(ellipse 40% 30% at 68% 38%,rgba(255,214,150,.30),transparent 60%),radial-gradient(ellipse 90% 60% at 50% 110%,rgba(90,100,120,.45),transparent 70%),linear-gradient(180deg,#1E2022 0%,#2E302D 55%,#181917 100%)} .ph.sea{background-color:#6E7C84;background-image:radial-gradient(ellipse 90% 35% at 50% 34%,rgba(255,255,255,.4),transparent 62%),linear-gradient(180deg,#B9C2C6 0%,#94A2A9 42%,#56646C 43%,#3E4A51 100%)} .ph.sand{background-color:#D8C9B3;background-image:radial-gradient(ellipse 70% 50% at 50% 10%,rgba(255,255,255,.5),transparent 60%),linear-gradient(180deg,#E8DECF 0%,#D8C9B3 56%,#B9A68B 57%,#9C8A70 100%)} .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;z-index:0;filter:grayscale(1) contrast(1.04)} .ph:has(img) .note{display:none} .ph .note{position:absolute;top:14px;left:14px;right:14px;color:rgba(10,10,10,.55);z-index:1} .ph.bark .note,.ph.moss .note,.ph.night .note,.ph.sea .note{color:rgba(242,240,236,.75)} .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.28) 100%);pointer-events:none} /* extra image layouts */ .three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px} .three .tile{aspect-ratio:3/4} .mosaic{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:2px;height:clamp(520px,64vw,860px)} .mosaic .ph:first-child{grid-row:span 2} .mosaic .ph::after{display:none} .strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px} .strip .ph{aspect-ratio:1} .strip .ph::after{display:none} .wide{height:clamp(300px,42vw,560px);margin-top:2px} @media (max-width:700px){.three{grid-template-columns:1fr}.mosaic{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto}.mosaic .ph{aspect-ratio:1}.mosaic .ph:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:4/5}.strip{grid-template-columns:repeat(3,minmax(0,1fr))}} /* hero */ .hero{height:clamp(520px,82vh,860px)} .hero .over{position:absolute;left:var(--g);right:var(--g);bottom:clamp(24px,4vw,48px);z-index:1;color:#F2F0EC;display:flex;flex-direction:column;gap:18px;max-width:900px} .hero .links{display:flex;gap:24px;flex-wrap:wrap} /* two-up campaign tiles */ .two{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:2px} .tile{display:block;aspect-ratio:4/5;color:#F2F0EC} .tile .over{position:absolute;left:20px;right:20px;bottom:20px;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:12px} .tile .over .sub{color:#F2F0EC} .tile:hover .u{opacity:.7} @media (max-width:700px){.two{grid-template-columns:1fr}.tile{aspect-ratio:4/5}} /* section heads */ .head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:clamp(40px,6vw,80px) var(--g) 18px} /* product grid: services as a collection */ .grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px 2px;padding:0 0 8px} .card{display:flex;flex-direction:column;gap:10px} .card .ph{aspect-ratio:3/4} .card .ph::after{display:none} .card .meta{padding:0 12px;display:flex;flex-direction:column;gap:4px} .card .row{display:flex;justify-content:space-between;gap:10px} .sw{display:flex;gap:6px;margin-top:4px} .sw i{width:10px;height:10px;border-radius:50%;display:block;outline:1px solid var(--soft);outline-offset:2px} .sw .b{background:var(--blue)}.sw .y{background:var(--yellow)}.sw .k{background:var(--fg)}.sw .r{background:var(--red)} .card:hover .ph{filter:brightness(.94)} .filters{display:flex;gap:8px;flex-wrap:wrap} .chip{border:1px solid var(--soft);background:none;color:var(--fg);padding:9px 14px;min-height:36px;border-radius:999px;cursor:pointer;font:inherit} .chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)} @media (max-width:1100px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:700px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.head{flex-direction:column;align-items:flex-start}} /* statement band */ .statement{height:clamp(420px,70vh,720px);margin-top:clamp(40px,6vw,80px)} .statement .over{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;color:#F2F0EC;padding:0 var(--g)} /* carousel: selected work */ .rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(240px,28vw,420px);gap:2px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px} .rail::-webkit-scrollbar{display:none} .rail .card{scroll-snap-align:start} .rail-ctl{display:flex;gap:8px} .rail-ctl button{width:44px;height:44px;border:1px solid var(--soft);background:none;color:var(--fg);border-radius:50%;cursor:pointer;font:inherit;font-size:16px} .rail-ctl button:hover{border-color:var(--fg)} /* numbers */ .nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--soft);border-bottom:1px solid var(--soft);margin-top:clamp(40px,6vw,80px)} .nums > div{padding:28px var(--g);display:flex;flex-direction:column;gap:6px} .nums > div + div{border-left:1px solid var(--soft)} .nums .n{font-weight:300;font-size:clamp(36px,4vw,56px);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums} @media (max-width:700px){.nums{grid-template-columns:1fr 1fr}.nums > div:nth-child(3){border-left:0}.nums > div:nth-child(n+3){border-top:1px solid var(--soft)}} /* Forefield */ .ni{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:clamp(40px,6vw,80px)} .ni .ph{min-height:560px} .ni .side{background:var(--stone);padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:space-between;gap:28px} .ni .dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--red);margin-right:8px;vertical-align:1px} form{display:flex;flex-direction:column;gap:14px} .fields{display:grid;grid-template-columns:1fr 1fr;gap:14px} .field{display:flex;flex-direction:column;gap:6px} input{font:inherit;font-size:15px;font-weight:300;padding:12px 0;min-height:44px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--fg);border-radius:0;width:100%} input:focus{outline:none;border-bottom-width:2px} .btn{align-self:flex-start;min-height:44px;padding:12px 26px;border-radius:999px;border:1px solid var(--fg);background:var(--fg);color:var(--bg);font:inherit;font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:12px;cursor:pointer} .btn:hover{background:transparent;color:var(--fg)} .toast{font-size:13px;color:var(--muted)} @media (max-width:800px){.ni{grid-template-columns:1fr}.ni .ph{min-height:360px}} @media (max-width:480px){.fields{grid-template-columns:1fr}} /* footer */ footer{padding:clamp(48px,6vw,80px) var(--g) 20px;display:flex;flex-direction:column;gap:clamp(40px,6vw,72px)} .fcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px} .fcols div{display:flex;flex-direction:column;gap:10px} .fcols a:hover{opacity:.6} .fmark{display:flex;align-items:stretch;gap:clamp(12px,2vw,28px);border-bottom:1px solid var(--soft);padding-bottom:clamp(20px,3vw,40px)} .fsym{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));width:clamp(24px,5.5vw,84px);flex-shrink:0} .fsym .b{background:var(--blue)}.fsym .y{background:var(--yellow)}.fsym .r{background:var(--red)} .fword{flex:1;min-width:0;font-size:16vw;padding-bottom:.12em} .fword > span{display:inline-block;padding-right:.06em} .legal{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--soft);padding-top:14px} @media (max-width:700px){.fcols{grid-template-columns:1fr 1fr}} /* ---------- primary colors ---------- Advise is blue, Build is yellow, Grow is red, Learn uses all three. The photographs stay black and white, so color arrives only as flat blocks, bars, and buttons. */ [data-p="advise"],.c-blue{--c:var(--blue);--on:#fff} [data-p="build"],.c-yellow{--c:var(--yellow);--on:#0A0A0A} [data-p="grow"],.c-red{--c:var(--red);--on:#fff} [data-p="learn"],.c-ink{--c:#0A0A0A;--on:#fff} .tri{display:grid;grid-template-columns:repeat(3,1fr);height:10px} .tri i{display:block}.tri i:nth-child(1){background:var(--blue)}.tri i:nth-child(2){background:var(--yellow)}.tri i:nth-child(3){background:var(--red)} .pill{display:inline-flex;align-items:center;min-height:44px;padding:12px 24px;border-radius:999px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:12px} .pill.yellow{background:var(--yellow);color:#0A0A0A}.pill.yellow:hover{background:#fff;color:#0A0A0A} .pill.white{background:#fff;color:#0A0A0A}.pill.white:hover{background:var(--yellow);color:#0A0A0A} .plate{background:var(--c);color:var(--on);padding:14px 18px 16px;display:flex;flex-direction:column;gap:6px;min-width:min(260px,70%)} .tile .over .plate .sub{color:var(--on)} .plate .dots{display:flex;gap:6px}.plate .dots i{width:12px;height:12px;display:block} .plate .dots i:nth-child(1){background:var(--blue)}.plate .dots i:nth-child(2){background:var(--yellow)}.plate .dots i:nth-child(3){background:var(--red)} .card .ph::after{display:block;top:auto;bottom:0;height:6px;background:var(--c,transparent);z-index:1} .card[data-p="learn"] .ph::after{background:linear-gradient(90deg,var(--blue) 0 33.3%,var(--yellow) 33.3% 66.6%,var(--red) 66.6%)} .card .meta > .cap:first-child > span:first-child::before{content:"";display:inline-block;width:8px;height:8px;background:var(--c,transparent);margin-right:8px;vertical-align:1px} .card[data-p="learn"] .meta > .cap:first-child > span:first-child::before{background:linear-gradient(90deg,var(--blue) 0 33%,var(--yellow) 33% 66%,var(--red) 66%)} .chip[aria-pressed="true"][data-f="advise"]{background:var(--blue);border-color:var(--blue);color:#fff} .chip[aria-pressed="true"][data-f="build"]{background:var(--yellow);border-color:var(--yellow);color:#0A0A0A} .chip[aria-pressed="true"][data-f="grow"]{background:var(--red);border-color:var(--red);color:#fff} .split{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(40px,6vw,80px);min-height:clamp(420px,60vh,680px)} .split .panel{background:var(--blue);color:#fff;padding:clamp(28px,5vw,72px);display:flex;flex-direction:column;justify-content:space-between;gap:24px} .split .ph::after{display:none} @media (max-width:800px){.split{grid-template-columns:1fr}.split .ph{min-height:360px}} .nums > div{border-top:6px solid var(--c)} .mosaic .solid{background:var(--yellow);color:#0A0A0A;padding:clamp(18px,2.4vw,28px);display:flex;flex-direction:column;justify-content:space-between;gap:12px} .mosaic .solid .sub{font-size:clamp(20px,2.2vw,30px)} .mosaic .solid a{align-self:flex-start;border-bottom:1px solid currentColor} .strip .solid{aspect-ratio:1;display:flex;flex-direction:column;justify-content:space-between;padding:14px;background:var(--c);color:var(--on)} .ni .side{background:var(--red);color:#fff} .ni .side input{border-bottom-color:rgba(255,255,255,.8);color:#fff} .ni .side input:focus{border-bottom-color:#fff} .ni .side .btn{background:#fff;color:#0A0A0A;border-color:#fff} .ni .side .btn:hover{background:var(--yellow);border-color:var(--yellow);color:#0A0A0A} .ni .side .toast{color:#fff} .ni .dot{background:#fff} .ni .side :focus-visible{outline-color:#fff} .u:hover{opacity:1;color:var(--blue)} .tile .u:hover,.hero .u:hover{color:var(--yellow)} /* ---------- shared page patterns for the full site ---------- */ .crumbs{padding:14px var(--g);display:flex;gap:8px;flex-wrap:wrap;color:var(--muted)} .crumbs a:hover{color:var(--fg)} .crumbs span[aria-current]{color:var(--fg)} /* page hero: a photo with a color plate */ .phero{height:clamp(440px,72vh,780px)} .phero .over{position:absolute;left:var(--g);right:var(--g);bottom:clamp(20px,3vw,40px);z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap} .phero .plate{min-width:min(520px,100%);max-width:760px;padding:clamp(18px,2.4vw,30px)} .phero .plate .headline{color:var(--on)} .phero .side-link{color:#F2F0EC} /* intro: statement left, detail right */ .intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);padding:clamp(40px,6vw,80px) var(--g)} .intro .lede{font-weight:300;font-size:clamp(17px,1.5vw,20px);line-height:1.5;max-width:56ch} .intro .meta3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .intro .meta3 > div{border-top:1px solid var(--soft);padding-top:10px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)} .intro .meta3 .cap{color:var(--fg)} @media (max-width:800px){.intro{grid-template-columns:1fr}.intro .meta3{grid-template-columns:1fr}} /* colored pill buttons */ .pill.c{background:var(--c);color:var(--on)}.pill.c:hover{filter:brightness(1.08);color:var(--on)} .pill.ink{background:var(--fg);color:var(--bg)}.pill.ink:hover{background:var(--blue);color:#fff} .pill.ghost{border:1px solid var(--soft);color:var(--fg)}.pill.ghost:hover{border-color:var(--fg)} .pill.red{background:var(--red);color:#fff}.pill.red:hover{background:#D82500;color:#fff} /* steps: four numbered stages */ .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:0} .step{background:var(--stone);padding:22px var(--g) 26px;border-top:6px solid var(--c,var(--fg));display:flex;flex-direction:column;gap:10px;min-height:190px} .step .n{font-weight:300;font-size:40px;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums} @media (max-width:900px){.steps{grid-template-columns:1fr 1fr}} @media (max-width:520px){.steps{grid-template-columns:1fr}} /* service detail, laid out like a product page */ .pdp{display:grid;grid-template-columns:7fr 5fr;border-top:1px solid var(--soft)} .gallery{display:grid;grid-template-columns:1fr 1fr;gap:2px} .gallery .ph{aspect-ratio:4/5} .gallery .ph:first-child{grid-column:span 2;aspect-ratio:16/11} .gallery .ph::after{display:none} .info{position:sticky;top:calc(env(safe-area-inset-top,0px) + 72px);align-self:start;padding:clamp(24px,3vw,44px) var(--g) 48px;display:flex;flex-direction:column;gap:18px} .info .title{font-weight:300;font-size:clamp(30px,3.4vw,48px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance} .info .tag{display:inline-flex;align-items:center;gap:8px} .info .tag i{width:10px;height:10px;display:block;background:var(--c)} .facts > div{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--soft);padding:12px 0;font-size:13px} .facts > div:last-child{border-bottom:1px solid var(--soft)} .facts dt{color:var(--muted);margin:0}.facts dd{margin:0;text-align:right} .cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center} details{border-top:1px solid var(--soft)} details:last-of-type{border-bottom:1px solid var(--soft)} summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:52px;padding:6px 0} summary::-webkit-details-marker{display:none} summary::after{content:"+";font-size:20px;font-weight:300} details[open] summary::after{content:"\2212"} .acc{padding:0 0 22px;display:flex;flex-direction:column;gap:12px;font-size:14px;line-height:1.55} .acc b{font-weight:500} @media (max-width:900px){.pdp{grid-template-columns:1fr}.info{position:static}} /* case studies: big image beside the story */ .case{display:grid;grid-template-columns:1fr 1fr;margin-top:2px} .case .ph{min-height:clamp(380px,48vw,640px)} .case .ph::after{display:none} .case .body{padding:clamp(28px,4vw,64px) var(--g);display:flex;flex-direction:column;justify-content:space-between;gap:24px;border-top:6px solid var(--c)} .case .body p{font-size:15px;line-height:1.55;max-width:52ch} .case .body b{font-weight:500} .case.rev .ph{order:2} .kpis{display:flex;gap:32px;flex-wrap:wrap} .kpis .n{font-weight:300;font-size:clamp(34px,3.6vw,48px);letter-spacing:-.04em;line-height:1;display:block} @media (max-width:800px){.case{grid-template-columns:1fr}.case.rev .ph{order:0}} /* text grid for small facts */ .tgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px} .tcell{background:var(--stone);padding:22px var(--g) 26px;display:flex;flex-direction:column;gap:10px;min-height:200px} .tcell.bar{border-top:6px solid var(--c)} .tcell p{font-size:13px;line-height:1.5;color:var(--muted)} .tcell .sub{font-size:clamp(20px,2vw,26px)} @media (max-width:900px){.tgrid{grid-template-columns:1fr 1fr}} @media (max-width:520px){.tgrid{grid-template-columns:1fr}} /* list of weeks or items */ .rows > div{display:grid;grid-template-columns:80px 1fr 2fr;gap:16px;align-items:baseline;border-top:1px solid var(--soft);padding:16px 0} .rows > div:last-child{border-bottom:1px solid var(--soft)} .rows .k{font-variant-numeric:tabular-nums} .rows p{color:var(--muted);font-size:14px} @media (max-width:700px){.rows > div{grid-template-columns:60px 1fr}.rows p{grid-column:2}} .pad{padding:0 var(--g)} /* generic forms */ .form{display:flex;flex-direction:column;gap:18px} .form .fields{display:grid;grid-template-columns:1fr 1fr;gap:18px} .form .full{grid-column:1 / -1} textarea{font:inherit;font-size:15px;font-weight:300;padding:12px 0;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--fg);border-radius:0;width:100%;resize:vertical;min-height:88px} textarea:focus{outline:none;border-bottom-width:2px} @media (max-width:520px){.form .fields{grid-template-columns:1fr}} /* split: photo beside a panel (general) */ .duo{display:grid;grid-template-columns:1fr 1fr;margin-top:2px} .duo .ph{min-height:clamp(380px,50vw,700px)} .duo .ph::after{display:none} .duo .panel{padding:clamp(28px,4vw,64px) var(--g);display:flex;flex-direction:column;justify-content:center;gap:22px} .duo .panel.c{background:var(--c);color:var(--on)} .duo .panel.stone{background:var(--stone)} @media (max-width:800px){.duo{grid-template-columns:1fr}.duo .ph{min-height:360px}} /* Forefield block above the footer */ .niblock{background:var(--red);color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);padding:clamp(36px,5vw,72px) var(--g);margin-top:clamp(40px,6vw,80px);align-items:end} .niblock .headline{color:#fff} .niblock p{max-width:44ch;font-weight:300;font-size:16px} .niblock input{border-bottom-color:rgba(255,255,255,.8);color:#fff} .niblock .btn{background:#fff;color:#0A0A0A;border-color:#fff} .niblock .btn:hover{background:var(--yellow);border-color:var(--yellow);color:#0A0A0A} .niblock .toast{color:#fff} .niblock :focus-visible{outline-color:#fff} @media (max-width:800px){.niblock{grid-template-columns:1fr;align-items:start}} /* validator */ .score{font-weight:300;font-size:clamp(84px,12vw,140px);line-height:.8;letter-spacing:-.05em;font-variant-numeric:tabular-nums} .dim{display:grid;grid-template-columns:120px 1fr 44px;gap:12px;align-items:center;border-top:1px solid var(--soft);padding:12px 0} .dim .bar{display:flex;gap:4px;height:10px} .dim .bar i{flex:1;border:1px solid var(--soft)} .dim .bar i.on{background:var(--yellow);border-color:var(--yellow)} .dim .n{text-align:right;font-variant-numeric:tabular-nums;font-size:12px} .strong{font-weight:500} .callout{background:var(--yellow);color:#0A0A0A;padding:22px 24px;display:flex;flex-direction:column;gap:10px} .callout .u:hover{color:#0A0A0A;opacity:.7} @media (max-width:520px){.dim{grid-template-columns:90px 1fr 36px}} /* ventures and small cards reuse .card; spacing for sections */ .sec{margin-top:clamp(40px,6vw,80px)} .center{text-align:center;align-items:center} footer .copy{background:none;border:0;padding:0;color:inherit;text-align:left;cursor:pointer;min-height:24px;font:inherit;letter-spacing:inherit;text-transform:inherit} .copy.u{background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit} .lede{font-weight:300;font-size:clamp(17px,1.5vw,20px);line-height:1.5;max-width:56ch} .hdr nav a[aria-current],.hdr .right a[aria-current],.drawer a[aria-current]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px} .phero .over .headline{font-size:clamp(40px,6.4vw,96px)} .pdp .gallery .ph img{width:100%;height:100%;object-fit:cover} @media (max-width:900px){.grid[style*="repeat(3"],.grid[style*="repeat(4"],.tgrid[style*="repeat(3"]{grid-template-columns:1fr 1fr!important}} @media (max-width:520px){.grid[style*="repeat(3"],.grid[style*="repeat(4"],.tgrid[style*="repeat(3"]{grid-template-columns:1fr!important}} /* ---------- polish pass: rhythm, targets, legibility ---------- */ :root{--s:clamp(48px,6.5vw,96px);--s2:clamp(24px,3vw,48px)} html{scroll-behavior:smooth} [id]{scroll-margin-top:calc(env(safe-area-inset-top,0px) + 96px)} .skip{position:absolute;left:var(--g);top:-60px;z-index:100;background:var(--fg);color:var(--bg);padding:12px 18px;border-radius:999px} .skip:focus{top:12px} body{font-size:15px} .cap{font-size:12px} .head,.intro{padding-top:var(--s)} .head{padding-bottom:20px} .intro{padding-bottom:var(--s)} .sec,.split,.nums,.ni,.statement{margin-top:var(--s)} .niblock{margin-top:var(--s);padding-top:clamp(32px,4vw,56px);padding-bottom:clamp(32px,4vw,56px)} footer{padding-top:var(--s)} .sec > .head{padding-top:0} .hdr nav a,.hdr .right a{padding:12px 0;display:inline-flex;align-items:center} .fcols a{padding:5px 0;display:inline-block} .crumbs a{padding:6px 0;display:inline-block} .chip{min-height:40px} @media (pointer:coarse){.chip{min-height:44px;padding:10px 16px}.u{padding:10px 0}} .tile .over{left:var(--g);right:var(--g);bottom:var(--g)} .ni .side,.split .panel{padding:clamp(28px,4vw,64px) var(--g)} .c-ink,[data-p="learn"]{--c:var(--fg);--on:var(--bg)} .plate.c-ink .dots i:nth-child(1){background:var(--blue)} .acc,.case .body p,.duo .panel p,.tcell p,.rows p{font-size:15px;line-height:1.55} .tcell p{font-size:14px} .muted{font-size:inherit} .info > p:nth-of-type(2){font-size:16px!important;line-height:1.55} .form .field label{color:var(--muted)} .niblock .form .field label,.ni .side .field label{color:rgba(255,255,255,.85)} .toast{margin-top:4px} .four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin-top:2px} .four .tile{aspect-ratio:3/4} .four .tile .over{left:16px;right:16px;bottom:16px} .four .plate{min-width:0;width:100%;padding:12px 14px 14px} .four .plate .sub{font-size:clamp(18px,1.8vw,24px)} @media (max-width:900px){.four{grid-template-columns:1fr 1fr}} .two.short .tile{aspect-ratio:16/9} @media (max-width:700px){.two.short .tile{aspect-ratio:4/3}} .grid.rel{grid-template-columns:repeat(4,minmax(0,1fr))} .grid.rel .card .ph{aspect-ratio:4/3} @media (max-width:900px){.grid.rel{grid-template-columns:1fr 1fr}} @media (max-width:520px){.grid.rel{grid-template-columns:1fr}} .seats{display:flex;gap:6px;height:12px} .seats i{flex:1;display:block;border:1px solid #0A0A0A} .seats i.on{background:#0A0A0A} .steps{margin-top:0} .pdp .info{gap:20px} .pdp .info .cta-row{margin-top:4px} details summary{gap:16px} .case .body{gap:var(--s2)} .phero + .tri + .intro{padding-top:var(--s2)} @media (max-width:800px){.intro{gap:20px;padding-top:var(--s2);padding-bottom:var(--s2)}.head{padding-top:var(--s2)}.sec,.split,.nums,.ni{margin-top:var(--s2)}} .announce{line-height:1.4} @media (max-width:700px){.m-hide{display:none}} .four .over .u{display:none} .four .over{flex-direction:column;align-items:stretch} .card .row{flex-wrap:wrap;row-gap:2px} .card .row span:last-child{color:var(--muted)} @media (max-width:420px){.grid{grid-template-columns:1fr 1fr}.card .meta{padding:0 8px}} .three > div{display:flex;flex-direction:column} .three .tile{aspect-ratio:3/4} .dots{display:inline-flex;gap:5px} .dots i{width:9px;height:9px;display:block;border-radius:1px} .dots i:nth-child(1){background:var(--blue)} .dots i:nth-child(2){background:var(--yellow)} .dots i:nth-child(3){background:var(--red)} .chks{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px} .chks legend{margin-bottom:10px;padding:0} .chk{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border:1px solid rgba(255,255,255,.7);border-radius:999px;cursor:pointer;font-size:13px} .chk input{width:16px;height:16px;min-height:0;margin:0;accent-color:#fff} .chk:has(input:checked){background:#fff;color:#0A0A0A} .chk:has(input:checked) input{accent-color:#0A0A0A} /* Mirror */ .mdemo{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,4vw,64px);padding:0 var(--g);align-items:center} .mdemo-stage{display:flex;flex-direction:column;gap:14px;align-items:center} .mphone{width:min(340px,100%);aspect-ratio:9/16;border-radius:28px;padding:22px 22px 18px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:background .35s ease,color .35s ease;box-shadow:0 0 0 1px var(--soft)} .mtop{display:flex;justify-content:space-between;opacity:.85} .mbody{display:flex;flex-direction:column;gap:12px} .mbig{font-weight:300;font-size:clamp(64px,9vw,104px);line-height:.9;letter-spacing:-.05em} .mbody p{font-size:20px;line-height:1.25;font-weight:300;max-width:18ch} .mctl{display:flex;align-items:center;justify-content:space-between;gap:10px} .mctl > button{width:44px;height:44px;border-radius:50%;border:1px solid currentColor;background:none;color:inherit;font:inherit;font-size:16px;cursor:pointer} .mdots{display:flex;gap:6px} .mdots button{width:8px;height:8px;min-height:0;padding:0;border-radius:50%;border:1px solid currentColor;background:none;cursor:pointer;opacity:.7} .mdots button[aria-current="true"]{background:currentColor;opacity:1} .mdemo-info{display:flex;flex-direction:column;gap:28px} .mev{border-top:1px solid var(--soft)} .mev .row{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--soft);font-size:15px;line-height:1.5} .tcell .price{font-weight:300;font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;line-height:1} .callout.founding{margin:2px 0 0;padding:26px var(--g)} @media (max-width:800px){.mdemo{grid-template-columns:1fr}.mev .row{grid-template-columns:1fr;gap:4px}} [data-p="learn"] .row span:first-child{} /* ---------- block rhythm: full-bleed blocks stack on the 2px gutter; white space lives inside text sections ---------- */ .sec,.split,.nums,.ni,.statement,.niblock,.mdemo{margin-top:2px} .grid,.rail{padding-bottom:clamp(32px,4vw,56px)} .mdemo{padding-top:var(--s);padding-bottom:var(--s)} @media (max-width:800px){.sec,.split,.nums,.ni,.statement,.niblock,.mdemo{margin-top:2px}.mdemo{padding-top:var(--s2);padding-bottom:var(--s2)}} /* ---------- footer with gravity ---------- */ .foot{--fbg:#0A0A0A;--ffg:#F2F0EC;--fmu:rgba(242,240,236,.62);--frule:rgba(242,240,236,.16); background:var(--fbg);color:var(--ffg);margin-top:2px;padding:clamp(40px,5vw,72px) var(--g) 24px;gap:clamp(40px,5vw,72px)} :root[data-theme="dark"] .foot{--fbg:#171715;border-top:1px solid var(--frule)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .foot{--fbg:#171715;border-top:1px solid var(--frule)}} .foot .fmark{border-bottom:1px solid var(--frule);color:var(--ffg)} .foot .fword{color:var(--ffg)} .fgrid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,96px);align-items:start} .fcta{display:flex;flex-direction:column;gap:16px;max-width:30rem} .fcta .sub{color:var(--ffg);font-size:clamp(26px,2.6vw,36px)} .fcta p{color:var(--fmu);font-size:16px;line-height:1.5;font-weight:300} .fcta .cta-row{margin-top:8px;gap:20px} .flink{font-size:14px;color:var(--ffg);border-bottom:1px solid var(--frule);padding:10px 0 4px} .flink:hover{border-bottom-color:var(--ffg)} .foot .fcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px} .foot .fcols > div{display:flex;flex-direction:column;gap:14px} .fh{color:var(--fmu);font-weight:500;margin:0} .foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} .foot ul a{display:inline-block;padding:6px 0;font-size:15px;color:var(--ffg);opacity:1;text-decoration:none;text-underline-offset:4px} .foot ul a:hover{text-decoration:underline;opacity:1} .foot a:focus-visible{outline:2px solid var(--ffg);outline-offset:3px} .foot .legal{border-top:1px solid var(--frule);padding-top:18px;color:var(--fmu);gap:12px 24px} .totop{color:var(--ffg);margin-left:auto} .totop:hover{text-decoration:underline;text-underline-offset:4px} @media (max-width:900px){.fgrid{grid-template-columns:1fr}} @media (max-width:560px){.foot .fcols{grid-template-columns:1fr 1fr}.foot .legal{flex-direction:column;align-items:flex-start}.totop{margin-left:0}} /* ---------- footer, option A: one block ---------- */ .fsub{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:end;padding-bottom:clamp(40px,5vw,72px);border-bottom:1px solid var(--frule)} .fsub-copy{display:flex;flex-direction:column;gap:14px} .fsub-copy .cap{color:var(--ffg)}.fsub-copy .cap a:hover{text-decoration:underline;text-underline-offset:4px} .fsub .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--red);margin-right:8px;vertical-align:1px} .fsub .headline,.fcta .headline{color:var(--ffg);font-size:clamp(34px,4.4vw,64px)} .fsub-copy p{max-width:46ch;color:var(--fmu);font-weight:300;font-size:16px;line-height:1.5} .fsub input{color:var(--ffg);border-bottom-color:rgba(242,240,236,.55)} .fsub input:focus{border-bottom-color:var(--ffg)} .fsub label{color:var(--fmu)!important} .fsub .pill{align-self:flex-start;border:0;cursor:pointer} .fsub .toast{color:var(--ffg)} .foot > .fsub + .fmark{margin-top:0} .fcta{max-width:34rem} @media (max-width:800px){.fsub{grid-template-columns:1fr;align-items:start}} /* ---------- legal pages ---------- */ .ldoc{display:grid;grid-template-columns:minmax(200px,3fr) 9fr;gap:clamp(24px,5vw,96px);padding:var(--s) var(--g)} .ltoc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 80px);align-self:start;display:flex;flex-direction:column;gap:10px} .ltoc ol{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:2px;font-size:14px} .ltoc ol a,.lother a{display:inline-block;padding:5px 0;color:var(--fg)} .ltoc ol a:hover,.lother a:hover{text-decoration:underline;text-underline-offset:4px} .lother{display:flex;flex-direction:column;font-size:14px} .lbody{max-width:70ch;display:flex;flex-direction:column;gap:clamp(32px,4vw,48px)} .lbody section{display:flex;flex-direction:column;gap:14px;scroll-margin-top:96px} .lbody h2{font-size:clamp(22px,2.2vw,28px);display:flex;gap:14px;align-items:baseline} .lbody h2 .n{font-size:13px;letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums} .lbody p{font-size:16px;line-height:1.65} .lbody a,.fine a,.lnote a{text-decoration:underline;text-underline-offset:3px} .lbody b{font-weight:500} .lnote{font-size:13px;color:var(--muted);border-left:3px solid var(--yellow);padding-left:12px} .fine{font-size:12px;line-height:1.5;opacity:.75;max-width:52ch;margin:0} .fine a{color:inherit} .llinks{display:flex;flex-wrap:wrap;gap:6px 18px} .llinks a{color:var(--ffg,inherit)} .llinks a:hover{text-decoration:underline;text-underline-offset:4px} @media (max-width:800px){.ldoc{grid-template-columns:1fr}.ltoc{position:static}} /* photos: slight overscan so no scan edge can ever show inside a frame, at any size */ .ph{overflow:hidden} .ph img{transform:scale(1.04);transform-origin:50% 50%} .hero .over .cap{text-shadow:0 1px 12px rgba(0,0,0,.55),0 0 2px rgba(0,0,0,.4)} /* header wordmark in dark mode: heavier stroke and a brighter globe so it holds up on near-black */ :root[data-theme="dark"] .hdr .wm{font-weight:500;color:#F7F5F1} :root[data-theme="dark"] .hdr .o svg g[stroke="#0038FF"]{stroke:#7C95FF;stroke-width:9} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .hdr .wm{font-weight:500;color:#F7F5F1} :root:not([data-theme="light"]) .hdr .o svg g[stroke="#0038FF"]{stroke:#7C95FF;stroke-width:9} } /* stats: color bar sits at the bottom of each stat; the all-pillars stat gets the tri bar */ .nums > div{border-top:0;position:relative;padding-bottom:calc(28px + 6px)} @media (max-width:700px){.nums > div:nth-child(n+3){border-top:1px solid var(--soft)}} .nums > div::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--c)} .nums > div.c-ink::after{background:linear-gradient(90deg,var(--blue) 0 33.33%,var(--yellow) 33.33% 66.66%,var(--red) 66.66%)} .nums{border-bottom:0} .hero img[src$="n-flight.jpg"]{object-position:60% 30%} .hero::after{background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.62) 100%),linear-gradient(90deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,0) 60%)} .hero .over .headline{text-shadow:0 2px 24px rgba(0,0,0,.35)} @media (max-width:700px){.hero::after{background:linear-gradient(180deg,rgba(0,0,0,0) 20%,rgba(0,0,0,.72) 100%)}.hero img[src$="n-flight.jpg"]{object-position:70% 20%}} .phero img[src$="n-swim.jpg"]{object-position:100% 22%} .phero img[src$="n-ladies.jpg"]{object-position:50% 25%} /* service pages on phones and tablets: copy first, photos after as one swipeable strip */ @media (max-width:900px){ .pdp{display:flex;flex-direction:column} .pdp .info{order:1;padding-top:20px} .pdp .gallery{order:2;display:grid;grid-auto-flow:column;grid-auto-columns:78%;grid-template-columns:none;gap:2px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px} .pdp .gallery::-webkit-scrollbar{display:none} .pdp .gallery .ph,.pdp .gallery .ph:first-child{grid-column:auto;aspect-ratio:4/3;scroll-snap-align:start} } @media (max-width:520px){.grid.rel{grid-template-columns:1fr 1fr}.grid.rel .card .ph{aspect-ratio:1}.grid.rel .card .row{font-size:11px}} /* ---------- phone rhythm: fewer full-screen photos, text reached sooner ---------- */ @media (max-width:700px){ .two:not(.short){grid-template-columns:1fr 1fr} .two:not(.short) .tile{aspect-ratio:3/4} .two:not(.short) .tile .over,.four .tile .over{left:10px;right:10px;bottom:10px;flex-direction:column;align-items:stretch} .two .tile .over .u,.four .tile .over .u{display:none} .tile .plate{min-width:0;padding:10px 12px 12px} .tile .plate .sub{font-size:20px} .tile .plate .cap{font-size:10px} .three{display:grid;grid-auto-flow:column;grid-auto-columns:78%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none} .three::-webkit-scrollbar{display:none} .three > *{scroll-snap-align:start} .three .tile{aspect-ratio:4/5} .mosaic .ph:nth-child(3),.mosaic .ph:nth-child(4){display:none} .mosaic .ph:nth-child(2){aspect-ratio:1} .wide{height:200px} .step{min-height:0;padding-top:18px;padding-bottom:20px} .tcell{min-height:0} .case .ph{min-height:260px;max-height:340px} .duo .ph{min-height:260px;max-height:340px} } @media (max-width:520px){ .grid[style*="repeat(3"] .card .ph{aspect-ratio:16/10} } @media (max-width:520px){.grid.rel .card .row{font-size:12px}} @media (max-width:700px){.two.short{grid-template-columns:1fr 1fr}.two.short .tile{aspect-ratio:1}.two.short .tile .over{left:10px;right:10px;bottom:10px;flex-direction:column;align-items:stretch}} .phero img[src$="n-race.jpg"]{object-position:60% 55%} .phero img[src$="n-race.jpg"]{object-position:50% 88%} .hero img[src$="n-race.jpg"]{object-position:62% 80%} @media (max-width:700px){.hero img[src$="n-race.jpg"]{transform:scale(1.7);transform-origin:68% 78%}} .tile img[src$="n-poise.jpg"]{object-position:50% 30%} /* ---------- color cards: links to other pages carry color, not a repeated photo ---------- */ .swatch{background:var(--c,var(--fg))!important;color:var(--on,var(--bg));display:flex;flex-direction:column;justify-content:space-between;padding:clamp(14px,1.6vw,22px)} .swatch::after{display:none!important} .swatch .sn{font-weight:300;font-size:clamp(24px,2.3vw,36px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance} .swatch .dots{margin-right:8px;vertical-align:1px;display:inline-flex} .card:hover .swatch{filter:brightness(1.08)} .card[data-p="learn"] .swatch{background-color:#0A0A0A!important;color:#fff} .ctile{background:var(--c)!important;color:var(--on)!important;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(16px,2vw,28px)} .ctile::after{display:none!important} .ctile .ctop{display:flex;align-items:center;gap:10px} .ctile .cbot{display:flex;justify-content:space-between;align-items:flex-end;gap:12px} .ctile .sn{font-weight:300;font-size:clamp(34px,4.4vw,72px);line-height:.95;letter-spacing:-.04em} .ctile .u{color:inherit} .ctile:hover{filter:brightness(1.08)} .ctile.c-ink{background:#0A0A0A!important;color:#fff!important} .two.short .ctile{aspect-ratio:16/7} .mirror-band{background:#0A0A0A;color:#fff;margin-top:2px} .mirror-band .panel{padding:clamp(40px,5vw,80px) var(--g);display:flex;flex-direction:column;gap:22px;max-width:980px} .mirror-band .headline{color:#fff} @media (max-width:700px){.ctile .sn{font-size:28px}.two.short .ctile{aspect-ratio:1}} /* two-photo galleries (no-repeat pass) */ @media (min-width:901px){ .pdp .gallery{grid-template-columns:1fr} .pdp .gallery .ph,.pdp .gallery .ph:first-child{grid-column:auto;aspect-ratio:4/3} } @media (max-width:900px){ .pdp .gallery{grid-auto-columns:86%} } @media (min-width:701px){ .grid.rel{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .grid.rel .card .ph.swatch{aspect-ratio:16/8} } img[src$="n-golf.jpg"],img[src$="n-pitcher.jpg"],img[src$="n-tandem.jpg"]{object-position:50% 18%} img[src$="n-needle.jpg"]{object-position:50% 30%} /* wordmark motion on hover: the globe spins, the planet swings on its ring, the footer bars step */ .o svg .mer{transform-box:fill-box;transform-origin:center} .o svg .m2{opacity:0} @keyframes sw-spin{0%{transform:scaleX(0)}100%{transform:scaleX(2.5)}} @keyframes sw-spin-fade{0%{opacity:0}15%{opacity:1}80%{opacity:1}100%{opacity:0}} @keyframes sw-orbit{0%,100%{transform:skewX(-9deg) rotate(0) translateY(0)}50%{transform:skewX(-9deg) rotate(24deg) translateY(-8%)}} @keyframes sw-bar{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.45)}} .o svg.pl{transform-origin:50% 50%} .fsym i{transform-origin:left center} @media (hover:hover) and (prefers-reduced-motion:no-preference){ .wm:hover .o svg .mer,.fmark:hover .o svg .mer,.wm:focus-visible .o svg .mer,.fmark:focus-visible .o svg .mer{animation:sw-spin 1.1s linear infinite,sw-spin-fade 1.1s linear infinite} .wm:hover .o svg .m2,.fmark:hover .o svg .m2,.wm:focus-visible .o svg .m2,.fmark:focus-visible .o svg .m2{animation-delay:-.55s} .wm:hover .o svg.pl,.fmark:hover .o svg.pl,.wm:focus-visible .o svg.pl,.fmark:focus-visible .o svg.pl{animation:sw-orbit 1.6s cubic-bezier(.45,0,.25,1) infinite} .fmark:hover .fsym i,.fmark:focus-visible .fsym i{animation:sw-bar 1.2s cubic-bezier(.45,0,.25,1) infinite} .fmark:hover .fsym .y,.fmark:focus-visible .fsym .y{animation-delay:.15s} .fmark:hover .fsym .r,.fmark:focus-visible .fsym .r{animation-delay:.3s} } .hdr a.wm:hover{opacity:1} /* venture photo tiles: color line along the bottom, like the cards */ .tile.vbar::before{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--c);z-index:2} .tile.vbar.c-ink::before{background:linear-gradient(90deg,var(--blue) 0 33.3%,var(--yellow) 33.3% 66.6%,var(--red) 66.6%)} .tile.vbar::before{top:auto;inset:auto 0 0 0;opacity:1;mix-blend-mode:normal} .tile.vbar::after{background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.6) 100%)} .tile.vbar .over .cap,.tile.vbar .over .sub{text-shadow:0 1px 14px rgba(0,0,0,.5)} img[src$="n-lipstick.jpg"]{object-position:18% 50%} img[src$="n-drive.jpg"]{object-position:50% 35%} img[src$="n-safari.jpg"]{object-position:42% 40%} img[src$="n-bar.jpg"]{object-position:50% 25%} img[src$="n-reverie.jpg"]{object-position:38% 55%} img[src$="n-gallery.jpg"]{object-position:28% 50%} img[src$="n-escalator.jpg"]{object-position:62% 55%} img[src$="n-spiral.jpg"]{object-position:70% 40%} img[src$="n-silhouette.jpg"]{object-position:50% 58%} img[src$="n-lookout.jpg"]{object-position:35% 45%} img[src$="n-stacks.jpg"]{object-position:40% 45%} img[src$="n-socrates.jpg"]{object-position:30% 45%} img[src$="n-sea.jpg"]{object-position:50% 50%} img[src$="n-tree.jpg"]{object-position:60% 60%} img[src$="n-cliff.jpg"]{object-position:50% 70%} img[src$="n-backpack.jpg"]{object-position:45% 40%} img[src$="n-writer.jpg"]{object-position:45% 35%} img[src$="n-stylist.jpg"]{object-position:55% 40%} img[src$="n-reflect.jpg"]{object-position:50% 60%} img[src$="n-falls.jpg"]{object-position:40% 60%} img[src$="n-cave.jpg"]{object-position:50% 50%} img[src$="n-coat.jpg"]{object-position:50% 45%} img[src$="n-storm.jpg"]{object-position:40% 55%} .hero img[src$="n-dive.jpg"]{object-position:50% 30%} @media (max-width:700px){.hero img[src$="n-dive.jpg"]{object-position:40% 30%}} img[src$="n-sprint.jpg"]{object-position:50% 55%} img[src$="n-ballet.jpg"]{object-position:62% 60%} img[src$="n-pushup.jpg"]{object-position:50% 30%} img[src$="n-stretch.jpg"]{object-position:50% 35%} img[src$="n-ropes.jpg"]{object-position:40% 40%} img[src$="n-dunk.jpg"]{object-position:45% 40%} img[src$="n-glacier.jpg"]{object-position:60% 70%} img[src$="n-temple.jpg"]{object-position:40% 45%} .phero img[src$="n-glacier.jpg"]{object-position:62% 88%} @media (max-width:700px){.phero img[src$="n-glacier.jpg"]{object-position:66% 60%}} img[src$="n-tulle.jpg"]{object-position:50% 45%} img[src$="n-arch-lace.jpg"]{object-position:50% 40%} img[src$="n-pier.jpg"]{object-position:75% 55%} img[src$="n-capri.jpg"]{object-position:50% 45%} img[src$="n-hknight.jpg"]{object-position:50% 60%} /* ---------- pillar duotone: photos take their pillar color ---------- */ :is(.ph.c-blue, .ph:has(.plate.c-blue), .pdp.c-blue .ph, .case.c-blue .ph, [data-p="advise"] .ph:not(.swatch), .duo:has(> .panel.c-blue) > .ph){--tint:var(--blue)} :is(.ph.c-yellow, .ph:has(.plate.c-yellow), .pdp.c-yellow .ph, .case.c-yellow .ph, [data-p="build"] .ph:not(.swatch), .duo:has(> .panel.c-yellow) > .ph){--tint:var(--yellow)} :is(.ph.c-red, .ph:has(.plate.c-red), .pdp.c-red .ph, .case.c-red .ph, [data-p="grow"] .ph:not(.swatch), .duo:has(> .panel.c-red) > .ph){--tint:var(--red)} .ph{--tint:none} :is(.ph.c-blue,.ph:has(.plate.c-blue),.pdp.c-blue .ph,.case.c-blue .ph,[data-p="advise"] .ph:not(.swatch),.duo:has(> .panel.c-blue) > .ph, .ph.c-yellow,.ph:has(.plate.c-yellow),.pdp.c-yellow .ph,.case.c-yellow .ph,[data-p="build"] .ph:not(.swatch),.duo:has(> .panel.c-yellow) > .ph, .ph.c-red,.ph:has(.plate.c-red),.pdp.c-red .ph,.case.c-red .ph,[data-p="grow"] .ph:not(.swatch),.duo:has(> .panel.c-red) > .ph){background:var(--tint);isolation:isolate} :is(.ph.c-blue,.ph:has(.plate.c-blue),.pdp.c-blue .ph,.case.c-blue .ph,[data-p="advise"] .ph:not(.swatch),.duo:has(> .panel.c-blue) > .ph, .ph.c-yellow,.ph:has(.plate.c-yellow),.pdp.c-yellow .ph,.case.c-yellow .ph,[data-p="build"] .ph:not(.swatch),.duo:has(> .panel.c-yellow) > .ph, .ph.c-red,.ph:has(.plate.c-red),.pdp.c-red .ph,.case.c-red .ph,[data-p="grow"] .ph:not(.swatch),.duo:has(> .panel.c-red) > .ph) > img{mix-blend-mode:multiply;filter:grayscale(1) contrast(1.05) brightness(1.12)} :is(.ph.c-blue,.ph:has(.plate.c-blue),.pdp.c-blue .ph,.case.c-blue .ph,[data-p="advise"] .ph:not(.swatch),.duo:has(> .panel.c-blue) > .ph) > img{filter:grayscale(1) contrast(1.1) brightness(1.4)} img[src$="n-athlete.jpg"]{object-position:50% 22%} img[src$="n-balcony.jpg"]{object-position:50% 60%} img[src$="n-rooftop.jpg"]{object-position:45% 55%} img[src$="n-lounge.jpg"]{object-position:55% 60%} img[src$="n-surfcliff.jpg"]{object-position:55% 55%} img[src$="n-surfwinter.jpg"]{object-position:70% 60%} img[src$="n-surfwalk.jpg"]{object-position:66% 50%} img[src$="n-laugh.jpg"]{object-position:50% 30%} img[src$="n-champagne.jpg"]{object-position:48% 45%} img[src$="n-dancepair.jpg"]{object-position:50% 40%} img[src$="n-dancebow.jpg"],img[src$="n-dancepose.jpg"]{object-position:50% 35%} img[src$="n-angel.jpg"]{object-position:65% 30%} img[src$="n-paris.jpg"]{object-position:60% 50%} img[src$="n-martini.jpg"]{object-position:55% 60%} .mosaic img[src$="n-dancepair.jpg"]{object-position:40% 0%} .mosaic img[src$="n-dancebow.jpg"],.mosaic img[src$="n-dancepose.jpg"]{object-position:50% 15%} .mosaic img[src$="n-seine.jpg"]{object-position:15% 70%} img[src$="n-skate2.jpg"]{object-position:60% 50%} img[src$="n-boombox.jpg"]{object-position:50% 45%} img[src$="n-concert.jpg"]{object-position:55% 60%} img[src$="n-trombone.jpg"]{object-position:40% 45%} img[src$="n-tower.jpg"]{object-position:40% 30%} img[src$="n-barre.jpg"]{object-position:55% 60%} img[src$="n-lathe.jpg"]{object-position:55% 35%} img[src$="n-reading.jpg"]{object-position:28% 50%} img[src$="n-table.jpg"]{object-position:55% 55%} img[src$="n-whiskey.jpg"]{object-position:40% 50%} img[src$="n-straw.jpg"]{object-position:62% 40%} img[src$="n-freedive.jpg"]{object-position:40% 50%} img[src$="n-sailboat.jpg"]{object-position:50% 60%} img[src$="lauren.jpg"]{object-position:38% 30%} img[src$="n-chess.jpg"]{object-position:45% 40%} img[src$="n-bikecolumn.jpg"]{object-position:45% 55%} img[src$="n-handstand.jpg"]{object-position:45% 50%} img[src$="n-slam.jpg"]{object-position:35% 45%} img[src$="n-float.jpg"]{object-position:50% 55%} img[src$="n-splash.jpg"]{object-position:35% 55%} /* client logos inside color cards */ .swatch.has-logo{position:relative;overflow:hidden} .swatch .lg{position:absolute;left:10%;right:10%;top:22%;bottom:18%;background:currentColor;-webkit-mask:var(--lg) center/contain no-repeat;mask:var(--lg) center/contain no-repeat;opacity:.88;transition:transform .5s cubic-bezier(.2,.7,.2,1)} .swatch.has-logo .cap{position:relative;z-index:1} .card:hover .swatch .lg{transform:scale(1.04)} .swatch img.lg{position:absolute;left:10%;top:50%;width:80%;height:auto;max-height:56%;object-fit:contain;transform:translateY(-44%);background:none;-webkit-mask:none;mask:none;filter:brightness(0);opacity:.9} [data-p="advise"] .swatch img.lg,[data-p="grow"] .swatch img.lg,[data-p="learn"] .swatch img.lg{filter:brightness(0) invert(1)} .card:hover .swatch img.lg{transform:translateY(-44%) scale(1.04)} /* Forefield heartbeat: one soft pulse on load, then once every 2 minutes 32 seconds */ .hdr .pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);position:relative;margin-right:7px;vertical-align:1px} .hdr .pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--red);opacity:0;animation:ni-beat 152s ease-out infinite} @keyframes ni-beat{0%{transform:scale(1);opacity:.6}1.6%{transform:scale(3);opacity:0}100%{transform:scale(3);opacity:0}} /* planets on text links: each link gets a different world that pops in on hover */ a.u{position:relative} a.u .orb{position:absolute;right:-24px;top:50%;width:17px;height:17px;margin-top:-9px;opacity:0;transform:scale(.4) rotate(-40deg);transition:opacity .25s,transform .45s cubic-bezier(.3,1.6,.5,1);pointer-events:none} a.u .orb svg{width:100%;height:100%;display:block;overflow:visible} a.u:hover .orb,a.u:focus-visible .orb{opacity:1;transform:scale(1) rotate(0)} a.u:hover .orb svg,a.u:focus-visible .orb svg{animation:orb-wob 1.6s ease-in-out infinite} @keyframes orb-wob{0%,100%{transform:rotate(0)}50%{transform:rotate(18deg)}} @media (prefers-reduced-motion:reduce){.hdr .pulse::after,a.u .orb svg{animation:none!important}a.u .orb{transition:none}} /* wordmark turn: once per visit, the globe spins and the planet swings, then both settle */ @keyframes wm-spin{from{transform:skewX(-9deg) rotateY(0)}to{transform:skewX(-9deg) rotateY(360deg)}} @keyframes wm-swing{0%{transform:skewX(-9deg) rotate(0)}40%{transform:skewX(-9deg) rotate(-28deg)}75%{transform:skewX(-9deg) rotate(8deg)}100%{transform:skewX(-9deg) rotate(0)}} @media (prefers-reduced-motion:reduce){.wm-go .hdr .wm .o svg{animation:none!important}} /* linked photos: the color drains down into the color line on hover */ :is(a.ph, a .ph):not(.swatch){background-image:linear-gradient(var(--bgpaper,#FDFDFD),var(--bgpaper,#FDFDFD))!important;background-repeat:no-repeat!important;background-position:50% 0!important;background-size:100% 0%!important;transition:background-size .65s cubic-bezier(.3,.6,.2,1)} :is(a.ph:hover, a:hover .ph, a.ph:focus-visible, a:focus-visible .ph):not(.swatch){background-size:100% 100%!important} :is(a.ph, a .ph):not(.swatch) > img{transition:filter .65s ease} :is(a.ph:hover, a:hover .ph, a.ph:focus-visible, a:focus-visible .ph):not(.swatch) > img{filter:grayscale(1) contrast(1.05)!important} @media (prefers-reduced-motion:reduce){:is(a.ph, a .ph):not(.swatch),:is(a.ph, a .ph):not(.swatch) > img{transition:none}} /* buttons: a new color wipes up from the bottom on hover, same motion as the photo drain */ .pill{position:relative;overflow:hidden;isolation:isolate;transition:color .45s ease} .pill::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fill,#0A0A0A);transform:scaleY(0);transform-origin:50% 100%;transition:transform .45s cubic-bezier(.3,.6,.2,1)} .pill:hover::before,.pill:focus-visible::before{transform:scaleY(1)} .pill.yellow,.pill.white,.pill.red,.pill.c{--fill:#0A0A0A} .pill.yellow:hover,.pill.white:hover,.pill.red:hover,.pill.c:hover,.pill.yellow:focus-visible,.pill.white:focus-visible,.pill.red:focus-visible,.pill.c:focus-visible{color:#fff!important;filter:none} .pill.yellow:hover{background:var(--yellow)}.pill.white:hover{background:#fff}.pill.red:hover{background:var(--red)} .pill.ink{--fill:var(--c,var(--blue))} .pill.ink:hover,.pill.ink:focus-visible{background:var(--fg);color:var(--on,#fff)} .c-yellow .pill.ink:hover,[data-p="build"] .pill.ink:hover{color:#0A0A0A} @media (prefers-reduced-motion:reduce){.pill::before{transition:none}} img[src$="n-chalkboard.jpg"]{object-position:50% 40%} /* client logos */ .clients{display:flex;flex-direction:column;align-items:center;gap:14px;padding:clamp(28px,4vw,48px) var(--g) clamp(20px,3vw,32px)} .cstrip,.cwall{list-style:none;margin:0;padding:0} .cstrip{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));width:100%;border-top:1px solid var(--soft);border-bottom:1px solid var(--soft)} .clg{display:flex;align-items:center;justify-content:center;text-align:center;min-height:88px;padding:16px 10px;color:var(--fg);opacity:.72;transition:color .35s,opacity .35s;font-size:clamp(14px,1.3vw,18px);letter-spacing:.02em;line-height:1.1} .clg:hover{opacity:1;color:var(--c)} .clg img{max-width:78%;max-height:34px;object-fit:contain;filter:brightness(0);opacity:.85;transition:filter .35s,opacity .35s} :root[data-theme="dark"] .clg img{filter:brightness(0) invert(1)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .clg img{filter:brightness(0) invert(1)}} .clg.s1{font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(11px,.95vw,13px)} .clg.s2{font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.9vw,26px)} .clg.s3{font-weight:300;letter-spacing:-.03em;font-size:clamp(17px,1.6vw,22px)} .cwall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px} .cwall .clg{background:var(--stone,#F3F3F5);min-height:84px;font-size:clamp(12px,1vw,15px)} @media (max-width:1100px){.cstrip{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (max-width:700px){.cstrip{grid-template-columns:repeat(2,minmax(0,1fr))}.cwall{grid-template-columns:repeat(3,minmax(0,1fr))}} /* three dots bounce on hover */ @keyframes dot-hop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}} :is(a:hover,a:focus-visible,.cap:hover,.plate:hover,.panel:hover,.tile:hover) .dots i{animation:dot-hop .6s cubic-bezier(.3,0,.3,1) infinite} :is(a:hover,a:focus-visible,.cap:hover,.plate:hover,.panel:hover,.tile:hover) .dots i:nth-child(2){animation-delay:.1s} :is(a:hover,a:focus-visible,.cap:hover,.plate:hover,.panel:hover,.tile:hover) .dots i:nth-child(3){animation-delay:.2s} @media (prefers-reduced-motion:reduce){.dots i{animation:none!important}} /* one button system: every button wipes up from the bottom; the script picks a fill that contrasts with the button and what sits behind it */ .pill,.btn,.chip,.rail-ctl button{position:relative;overflow:hidden;isolation:isolate;transition:color .45s ease,border-color .45s ease} .pill::before,.btn::before,.chip::before,.rail-ctl button::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fill,#0A0A0A);transform:scaleY(0);transform-origin:50% 100%;transition:transform .45s cubic-bezier(.3,.6,.2,1);border-radius:inherit} :is(.pill,.btn,.chip,.rail-ctl button):is(:hover,:focus-visible)::before{transform:scaleY(1)} :is(.pill,.btn,.chip,.rail-ctl button):is(:hover,:focus-visible){color:var(--fill-on,#fff)!important;border-color:var(--fill,#0A0A0A)!important;filter:none!important} :is(.pill,.btn)[style*="--rest-bg"]:is(:hover,:focus-visible){background:var(--rest-bg)!important} @media (prefers-reduced-motion:reduce){.pill::before,.btn::before,.chip::before,.rail-ctl button::before{transition:none}} /* steps rise like piano keys: in sequence when they scroll into view, and a key lifts on hover */ .steps{align-items:end} .step{transition:transform .45s cubic-bezier(.3,.6,.2,1),border-top-width .45s ease} .step:hover,.step.up,.keys > .bar:hover,.keys > .bar.up{transform:translateY(-10px);border-top-width:10px} .keys{align-items:end}.keys > .bar{transition:transform .45s cubic-bezier(.3,.6,.2,1),border-top-width .45s ease} @media (prefers-reduced-motion:reduce){.step,.keys > .bar{transition:none}.step:hover,.step.up,.keys > .bar:hover,.keys > .bar.up{transform:none}} /* solid color tiles drain like the photos; the big title takes the pillar color, small labels go ink */ a .ph.swatch{background-image:linear-gradient(#FDFDFD,#FDFDFD)!important;background-repeat:no-repeat!important;background-position:50% 0!important;background-size:100% 0%!important;transition:background-size .65s cubic-bezier(.3,.6,.2,1)} a:is(:hover,:focus-visible) .ph.swatch{background-size:100% 100%!important;filter:none!important} .ctile,.swatch{transition:background-size .65s cubic-bezier(.3,.6,.2,1)} .ctile *,.swatch *{transition:color .45s ease,border-color .45s ease} .ctile.c-blue{--hot:var(--blue)}.ctile.c-red{--hot:var(--red)}.ctile.c-yellow,.ctile.c-ink{--hot:#0A0A0A} .card[data-p="advise"] .swatch{--hot:var(--blue)}.card[data-p="grow"] .swatch{--hot:var(--red)}.card[data-p="build"] .swatch,.card[data-p="learn"] .swatch{--hot:#0A0A0A} .ctile:is(:hover,:focus-visible) *,a:is(:hover,:focus-visible) .swatch *{color:#0A0A0A!important;border-color:#0A0A0A!important} .ctile:is(:hover,:focus-visible) .sn,a:is(:hover,:focus-visible) .swatch .sn{color:var(--hot)!important} @media (prefers-reduced-motion:reduce){a .ph.swatch,.ctile{transition:none}} /* Forefield dot in the footer sign-up beats in time with the header */ .fsub .dot,.niblock .ni .dot,.ni .dot{position:relative} .fsub .dot::after,.ni .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;opacity:0;animation:ni-beat 152s ease-out infinite} @media (prefers-reduced-motion:reduce){.fsub .dot::after,.ni .dot::after{animation:none}} .ctile,a .ph.swatch{transition:background-size .65s cubic-bezier(.3,.6,.2,1),box-shadow .65s cubic-bezier(.3,.6,.2,1)} .ctile:is(:hover,:focus-visible),a:is(:hover,:focus-visible) .ph.swatch{box-shadow:inset 0 -6px 0 var(--c,var(--fg))} .card[data-p="learn"] a .ph.swatch,a.card[data-p="learn"]:is(:hover,:focus-visible) .ph.swatch{box-shadow:inset 0 -6px 0 transparent,inset 0 -6px 0 0 #0A0A0A} /* flat fill edge: the rounded button clips a straight rising edge */ .pill::before,.btn::before,.chip::before,.rail-ctl button::before{border-radius:0!important} /* Forefield dot: keeps pulsing while the link (header) or the whole sign-up section (footer) is hovered */ @keyframes ni-hover{0%{transform:scale(1);opacity:.6}70%{transform:scale(3);opacity:0}100%{transform:scale(3);opacity:0}} .hdr a:is(:hover,:focus-visible) .pulse::after,.fsub:is(:hover,:focus-within) .dot::after{animation:ni-hover 1.2s ease-out infinite} @media (prefers-reduced-motion:reduce){.hdr a:hover .pulse::after,.fsub:hover .dot::after,.fsub:focus-within .dot::after{animation:none}} /* founder hour band */ .founder{display:flex;align-items:center;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;padding:clamp(28px,4vw,48px) var(--g);border-top:1px solid var(--soft);border-bottom:1px solid var(--soft);margin:clamp(40px,5vw,72px) 0 0} .fo-copy{display:flex;flex-direction:column;gap:10px;max-width:62ch} .fo-copy p{font-weight:300;font-size:16px;line-height:1.5} .founder .pill{flex:none} /* technical: planets never push the page sideways on touch screens */ html,body{overflow-x:clip} @media (hover:none){a.u .orb{display:none}} /* mirror demo dots: 44px tap target around an 8px dot */ .mdots{gap:0} .mdots button{width:40px;height:44px;border:0!important;background:none!important;opacity:1;position:relative} .mdots button::before{display:none!important} .mdots button::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;border:1px solid currentColor;opacity:.7} .mdots button[aria-current="true"]::after{background:currentColor;opacity:1} /* Build Lab card: three columns of color pour down into the blue, yellow and red segments, one after another */ .card[data-p="learn"] .ph:not(.swatch){background-image:none!important} .card[data-p="learn"] .ph:not(.swatch) > img{filter:none!important} .tcols{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr 1fr;pointer-events:none;z-index:1;mix-blend-mode:multiply} .tcols i{display:block;background:var(--k);transform:scaleY(0);transform-origin:50% 0;transition:transform .6s cubic-bezier(.3,.6,.2,1)} .tcols i:nth-child(1){--k:var(--blue);transition-delay:.24s} .tcols i:nth-child(2){--k:var(--yellow);transition-delay:.12s} .tcols i:nth-child(3){--k:var(--red);transition-delay:0s} a:is(:hover,:focus-visible) .tcols i{transform:scaleY(1)} a:is(:hover,:focus-visible) .tcols i:nth-child(1){transition-delay:0s} a:is(:hover,:focus-visible) .tcols i:nth-child(2){transition-delay:.12s} a:is(:hover,:focus-visible) .tcols i:nth-child(3){transition-delay:.24s} @media (prefers-reduced-motion:reduce){.tcols i{transition:none!important}} /* client strip: a soft stone band instead of a white box with rules */ .clients{background:var(--stone);flex-direction:row;align-items:center;gap:clamp(16px,3vw,40px);padding:clamp(18px,2.4vw,28px) var(--g)} .clients > .cap{flex:none;white-space:nowrap} .cstrip{border:0} .clients .clg{min-height:48px;padding:8px 10px} @media (max-width:1100px){.clients{flex-direction:column;gap:10px}.clients .clg{min-height:44px}} /* Advise labels turn blue with the name on hover; red and yellow labels stay ink because red and yellow text at label size is too faint on white */ .ctile.c-blue:is(:hover,:focus-visible) .cap,a.card[data-p="advise"]:is(:hover,:focus-visible) .swatch .cap{color:var(--blue)!important} /* buttons pour down from the top, same direction as the photo and tile drain */ .pill::before,.btn::before,.chip::before,.rail-ctl button::before{transform-origin:50% 0!important} /* mirror demo controls: round arrows that never squash, dots in the card's text color */ .mctl{gap:6px} .mctl > button{flex:none;width:44px;height:44px;padding:0;display:grid;place-items:center;transition:background-color .3s ease,color .3s ease} .mctl > button:is(:hover,:focus-visible){background:#fff;color:#0A0A0A;border-color:#fff} .mdots{flex:1 1 auto;justify-content:center;min-width:0} .mdots button{width:26px;color:inherit;flex:none} /* evidence table: labels and values share one baseline and one size */ .mev .row{align-items:baseline} .mev .row > .cap{font-size:12px} #mlvl{color:var(--fg);font-weight:500} /* selected and found text use the brand blue instead of the browser's default colors */ ::selection{background:var(--blue);color:#fff} ::search-text{background:rgba(0,56,255,.18);color:inherit} ::search-text:current{background:var(--blue);color:#fff} .tile.vbar.c-ink{background-image:none!important} /* breadcrumbs: links, slashes and the current page share one baseline and one size */ .crumbs{align-items:baseline;gap:10px} .crumbs > *{display:inline-block;padding:6px 0;font:inherit;letter-spacing:inherit;line-height:1.2} .crumbs > span[aria-hidden]{color:var(--soft);color:var(--muted);opacity:.6} /* ===== Services mega menu: four groups on the left, a live photo preview on the right ===== */ .mm-btn{font:inherit;color:inherit;background:none;border:0;padding:12px 0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;letter-spacing:inherit;text-transform:inherit} .mm-btn svg{width:9px;height:9px;transition:transform .3s ease} .mm-btn[aria-expanded="true"] svg{transform:rotate(180deg)} .mm-btn.cur,.mm-btn[aria-expanded="true"]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px} .mega{position:absolute;left:0;right:0;top:100%;z-index:2;background:var(--bg);border-top:1px solid var(--soft);border-bottom:1px solid var(--soft);max-height:calc(100vh - 80px);overflow:auto;text-transform:none;letter-spacing:normal;animation:mega-in .28s cubic-bezier(.3,.6,.2,1)} @keyframes mega-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .mscrim{position:absolute;left:0;right:0;top:100%;height:100vh;background:rgba(10,10,10,.28);z-index:1} .mwrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);min-height:min(600px,calc(100vh - 160px))} .mlist{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;align-content:center;gap:clamp(56px,7vw,112px) clamp(32px,4vw,64px);padding:clamp(32px,4vw,56px) var(--g)} .mgrp{display:grid;grid-auto-rows:auto;min-width:0} .mgrp[data-p="advise"]{--c:var(--blue);--ct:var(--blue)} .mgrp[data-p="build"]{--c:var(--yellow);--ct:#8A6D00} .mgrp[data-p="grow"]{--c:var(--red);--ct:var(--red)} .mgrp[data-p="learn"]{--c:linear-gradient(90deg,var(--blue) 0 33.3%,var(--yellow) 33.3% 66.6%,var(--red) 66.6%);--ct:var(--fg)} :root[data-theme="dark"] .mgrp[data-p="build"]{--ct:var(--yellow)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mgrp[data-p="build"]{--ct:var(--yellow)}} .mlab{display:flex;align-items:center;gap:10px;padding-bottom:14px;color:var(--muted);font-size:12px} .mlab::before{content:"";width:11px;height:11px;background:var(--c)} .mit{display:flex;align-items:center;gap:16px;padding:13px 0;border-top:1px solid var(--soft);position:relative;color:var(--fg);font-size:clamp(18px,1.7vw,25px);letter-spacing:-.02em;line-height:1.15;font-weight:400;text-decoration:none!important} .mit .mic{width:26px;height:26px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;color:var(--muted);transition:color .3s} .mit::after{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:0;background:var(--c);transition:width .45s cubic-bezier(.3,.6,.2,1);z-index:1} .mit[aria-current="true"]::after,.mit:focus-visible::after{width:100%} .mit[aria-current="true"] .mic,.mit:focus-visible .mic{color:var(--ct)} .mprev{position:relative;background:#0A0A0A;color:#F2F0EC;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end} .mprev .mph{position:absolute;inset:0;background:var(--pc,#FDFDFD)} .mprev .mph img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05);mix-blend-mode:multiply} .mprev::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.72));pointer-events:none} .mprev .mtx{position:relative;z-index:1;padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;gap:10px} .mprev .mn{font-weight:300;font-size:clamp(30px,3vw,46px);letter-spacing:-.05em;line-height:1} .mprev .md{margin:0;max-width:46ch;font-weight:300;font-size:15px;color:#E5E2DC} .mprev .mgo{align-self:flex-start;background:#FDFDFD;color:#0A0A0A;border-radius:99px;padding:10px 18px;margin-top:6px} .mprev .mbar{position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--pb,var(--fg));z-index:2} .mprev[data-p="advise"]{--pc:var(--blue);--pb:var(--blue)} .mprev[data-p="build"]{--pc:var(--yellow);--pb:var(--yellow)} .mprev[data-p="grow"]{--pc:var(--red);--pb:var(--red)} .mprev[data-p="learn"]{--pc:#FDFDFD;--pb:linear-gradient(90deg,var(--blue) 0 33.3%,var(--yellow) 33.3% 66.6%,var(--red) 66.6%)} .mfoot{display:flex;align-items:center;gap:10px 28px;flex-wrap:wrap;padding:14px var(--g);border-top:1px solid var(--soft);font-size:15px} .mfoot .pill{margin-left:auto} .mfoot a.u .orb{display:none} @media (max-width:1200px){.mwrap{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}.mlist{gap:clamp(40px,5vw,64px) 28px}.mit{font-size:clamp(16px,1.7vw,20px);gap:12px}.mit .mic{width:22px;height:22px}.mprev .mn{font-size:clamp(26px,3vw,36px)}} @media (max-width:900px){.mega,.mscrim{display:none!important}} @media (prefers-reduced-motion:reduce){.mega{animation:none}.mit::after,.mit .mic,.mm-btn svg{transition:none}} .mega .mit:hover,.mega .mit:focus-visible{opacity:1!important;color:var(--fg)!important} .mega .mit:focus-visible{outline:2px solid var(--blue);outline-offset:4px} .mega a:hover{opacity:1} /* Build Lab schedule: date column wide enough for the class days, and the holiday week set apart */ #weeks .rows > div{grid-template-columns:minmax(150px,190px) 1fr 2fr} #weeks .rows > div.brk{background:repeating-linear-gradient(135deg,transparent 0 10px,var(--soft) 10px 11px)} #weeks .rows > div.brk .sub{color:var(--muted)} @media (max-width:700px){#weeks .rows > div{grid-template-columns:1fr}} /* footer Forefield sign-up: story on the left, one calm form card on the right */ .fsub{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(32px,6vw,96px)} .fsub-copy{gap:16px} .fsub-copy > p{font-size:17px;max-width:40ch} .fsub-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;max-width:440px} .fsub-list li{display:flex;align-items:baseline;gap:18px;padding:13px 0;border-top:1px solid var(--frule);font-size:16px;color:var(--ffg);font-weight:300} .fsub-list li:last-child{border-bottom:1px solid var(--frule)} .fsub-list .cap{color:var(--fmu);font-variant-numeric:tabular-nums;min-width:22px} .fsub-card{border:1px solid var(--frule);padding:clamp(22px,2.6vw,36px);gap:22px;background:rgba(242,240,236,.03)} .fsub-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--frule)} .fsub-top .cap{color:var(--ffg)} .fsub-top .fsub-free{color:var(--fmu)} .fsub-card .fields{gap:18px 20px} .fsub-card .field{gap:4px} .fsub-card .field.full{grid-column:1 / -1} .fsub-card label{display:flex;justify-content:space-between;gap:8px} .fsub-card .opt{text-transform:none;letter-spacing:0;font-size:12px;opacity:.8} .fsub-card input{min-height:40px;padding:8px 0;font-size:16px} .fsub-card .pill{align-self:stretch;justify-content:center;text-align:center} .fsub-card .fine{max-width:none;color:var(--fmu);opacity:1} .fsub-card .fine a{color:var(--ffg)} @media (max-width:800px){.fsub{grid-template-columns:1fr;align-items:start}} @media (max-width:480px){.fsub-card .fields{grid-template-columns:1fr}} /* Forefield list: each line slides right on hover */ .fsub-list li{transition:padding-left .4s cubic-bezier(.3,.6,.2,1),color .3s} .fsub-list li:hover{padding-left:16px} .fsub-list li .cap{transition:color .3s} .fsub-list li:hover .cap{color:var(--red)} /* Forefield dot on hover: a bigger, double ring that keeps pulsing */ @keyframes ni-hover-xl{0%{transform:scale(1);opacity:.85}60%{transform:scale(5);opacity:0}100%{transform:scale(5);opacity:0}} @keyframes ni-dot-throb{0%,100%{transform:scale(1)}30%{transform:scale(1.45)}} .hdr a:is(:hover,:focus-visible) .pulse,.fsub:is(:hover,:focus-within) .dot{animation:ni-dot-throb 1s cubic-bezier(.3,.6,.2,1) infinite} .hdr a:is(:hover,:focus-visible) .pulse::after,.fsub:is(:hover,:focus-within) .dot::after{animation:ni-hover-xl 1s ease-out infinite} .hdr a:is(:hover,:focus-visible) .pulse::before,.fsub:is(:hover,:focus-within) .dot::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--red);animation:ni-hover-xl 1s ease-out .35s infinite} @media (prefers-reduced-motion:reduce){.fsub-list li{transition:none}.fsub-list li:hover{padding-left:0}.hdr a .pulse,.hdr a .pulse::before,.hdr a .pulse::after,.fsub .dot,.fsub .dot::before,.fsub .dot::after{animation:none!important}} /* Forefield list numbers in the three brand colors */ .fsub-list li .cap{font-weight:500} .fsub-list li .cap{color:var(--ffg);transition:color .35s ease} .fsub-list li:nth-child(1):hover .cap{color:var(--blue)} .fsub-list li:nth-child(2):hover .cap{color:var(--yellow)} .fsub-list li:nth-child(3):hover .cap{color:var(--red)} /* buttons: the wordmark planet rolls in from the left on hover and the label makes room */ .btn{display:inline-flex;align-items:center;justify-content:center} .pill .bpl,.btn .bpl{display:inline-block;flex:none;width:0;height:16px;margin-right:0;opacity:0;transform:translateX(-14px) rotate(-120deg);transition:width .45s cubic-bezier(.3,.6,.2,1),margin-right .45s cubic-bezier(.3,.6,.2,1),opacity .3s ease,transform .6s cubic-bezier(.3,1.4,.5,1);pointer-events:none} .bpl svg{width:16px;height:16px;display:block;overflow:visible} @media (hover:hover){ :is(.pill,.btn):is(:hover,:focus-visible) .bpl{width:16px;margin-right:10px;opacity:1;transform:none} } @media (hover:none){.bpl{display:none!important}} @media (prefers-reduced-motion:reduce){.bpl{transition:none!important;transform:none!important}} /* homepage hero: one line that says what we do */ .hero .over .hsub{margin:0;max-width:52ch;font-size:clamp(16px,1.5vw,20px);font-weight:300;line-height:1.45;color:#F2F0EC;text-shadow:0 1px 14px rgba(0,0,0,.55)} .field label .opt{text-transform:none;letter-spacing:0;font-size:12px;opacity:.8;margin-left:6px} /* Forefield in red: black text on the brand red, set apart from the black footer */ .fsub{--ffg:#0A0A0A;--fmu:rgba(10,10,10,.72);--frule:rgba(10,10,10,.24);background:var(--red);color:#0A0A0A;margin:calc(-1 * clamp(40px,5vw,72px)) calc(-1 * var(--g)) 0;padding:clamp(40px,5vw,72px) var(--g);border-bottom:0} .fsub .dot{background:#0A0A0A!important} .fsub .dot::after,.fsub .dot::before{background:#0A0A0A!important} .fsub-copy .cap a{color:#0A0A0A} .fsub-list li .cap{color:#0A0A0A!important} .fsub-list li:hover .cap{color:#FFFFFF!important} .fsub-card{background:rgba(255,255,255,.1);border-color:rgba(10,10,10,.3)} .fsub input{color:#0A0A0A;border-bottom-color:rgba(10,10,10,.55)} .fsub input:focus{border-bottom-color:#0A0A0A} .fsub label{color:rgba(10,10,10,.75)!important} .fsub .pill{background:#0A0A0A!important;color:#FFFFFF!important} .fsub .fine a{color:#0A0A0A} .fsub :focus-visible{outline-color:#0A0A0A} .foot > .fsub + .fmark{margin-top:clamp(40px,5vw,72px)} /* homepage Forefield panel: same treatment */ .ni .side{color:#0A0A0A} .ni .side .cap,.ni .side p,.ni .side .headline{color:#0A0A0A} .ni .dot{background:#0A0A0A!important} .ni .dot::after{background:#0A0A0A!important} .niblock .form .field label,.ni .side .field label{color:rgba(10,10,10,.8)!important} .ni .side input{border-bottom-color:rgba(10,10,10,.6);color:#0A0A0A} .ni .side input:focus{border-bottom-color:#0A0A0A} .ni .side .btn{background:#0A0A0A;color:#FFFFFF;border-color:#0A0A0A} .ni .side .fine,.ni .side .fine a{color:#0A0A0A} .ni .side :focus-visible{outline-color:#0A0A0A} /* mega menu previews without a photo: a color panel with one big figure */ .mprev .mstat{display:none} .mprev.noimg .mph{background:var(--pc,#0A0A0A)} .mprev.noimg[data-p="learn"] .mph{background:#0A0A0A} .mprev.noimg .mstat{display:block;position:absolute;left:clamp(20px,2vw,28px);top:clamp(20px,2vw,28px);font-weight:300;font-size:clamp(64px,8vw,128px);letter-spacing:-.06em;line-height:.9;color:#F2F0EC} .mprev.noimg[data-p="build"] .mstat,.mprev.noimg[data-p="build"] .mtx{color:#0A0A0A} .mprev.noimg[data-p="build"]::after{background:none} .mprev.noimg::after{background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.35))} .mprev.noimg[data-p="build"] .md{color:#0A0A0A} .mprev.noimg[data-p="build"] .mgo{background:#0A0A0A;color:#FDFDFD} .mprev.noimg[data-p="learn"] .mbar{background:linear-gradient(90deg,var(--blue) 0 33.3%,var(--yellow) 33.3% 66.6%,var(--red) 66.6%)} .mgrp[data-p="learn"] .mit[data-k="advise"]{--c:var(--blue);--ct:var(--blue)} .mgrp[data-p="learn"] .mit[data-k="build"]{--c:var(--yellow);--ct:#8A6D00} .mgrp[data-p="learn"] .mit[data-k="grow"]{--c:var(--red);--ct:var(--red)} /* header wordmark on page load: the same motion as the footer hover, played twice, then hover takes over */ @media (prefers-reduced-motion:no-preference){ .wm-play .hdr .wm .o svg .mer{animation:sw-spin 1.1s linear .3s 2,sw-spin-fade 1.1s linear .3s 2} .wm-play .hdr .wm .o svg .m2{animation-delay:-.25s} .wm-play .hdr .wm .o svg.pl{animation:sw-orbit 1.6s cubic-bezier(.45,0,.25,1) .3s 1} } /* venture studio: five phases, the last in all three colors */ .steps.five{grid-template-columns:repeat(5,minmax(0,1fr))} .step.c-tri{border-top-color:transparent;border-image:linear-gradient(90deg,var(--blue) 0 33.3%,var(--yellow) 33.3% 66.6%,var(--red) 66.6%) 1} @media (max-width:1100px){.steps.five{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:700px){.steps.five{grid-template-columns:1fr 1fr}} @media (max-width:520px){.steps.five{grid-template-columns:1fr}} /* top nav: the label is a link to the page, the chevron opens the menu (hover opens it too) */ .mm-item{display:inline-flex;align-items:center;gap:2px} .mm-item .mm-link{padding:12px 0} .mm-item .mm-btn{padding:12px 4px;min-width:24px;justify-content:center;text-decoration:none!important} .mm-item .mm-btn svg{width:9px;height:9px} .mm-item.open .mm-link,.mm-item .mm-link[aria-current]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px} .mm-item.open .mm-link{opacity:1} /* mega menu group labels link to their section */ a.mlab{text-decoration:none!important;color:var(--muted);transition:color .25s} a.mlab .marr{display:inline-block;margin-left:4px;opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .3s} a.mlab:hover,a.mlab:focus-visible{color:var(--fg)} a.mlab:hover .marr,a.mlab:focus-visible .marr{opacity:1;transform:none} .mega a.mlab:hover{opacity:1} /* carried over from the new direction: Build Lab reserve block, steady button planets */ .duo + .duo,.duo + .ni,.ni + .duo,.duo + .bl-reserve{margin-top:0} .ni + .bl-sticky,main{margin-bottom:0} /* Build Lab: reserving is the loudest thing on the page */ .bl-heroside{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px} .bl-hero-go{padding:20px 32px!important;font-size:14px!important;letter-spacing:.1em} .bl-left{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#F2F0EC;display:inline-flex;align-items:center;gap:8px} .bl-left::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);animation:pulse-dot 1.6s ease-in-out infinite} @keyframes pulse-dot{50%{opacity:.35}} .bl-mid-go{padding:18px 30px!important;font-size:13px!important} .bl-reserve{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,88px);align-items:center;background:#0A0A0A;color:#F2F0EC;padding:clamp(88px,11vw,160px) var(--g);margin-top:var(--sec);position:relative} .bl-reserve::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:linear-gradient(90deg,var(--blue) 0 33.3%,var(--yellow) 33.3% 66.6%,var(--red) 66.6%)} .bl-rcap{color:rgba(242,240,236,.75);display:inline-flex;align-items:center;gap:10px} .bl-rcap .dots{display:inline-flex;gap:4px} .bl-rcap .dots i{width:10px;height:10px} .bl-rh{margin:18px 0 0;font-weight:300;font-size:clamp(56px,8.4vw,136px);line-height:.95;letter-spacing:-.05em;color:#F2F0EC} .bl-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;margin-top:clamp(28px,3vw,44px)} .bl-amt{font-weight:300;font-size:clamp(40px,4.4vw,64px);letter-spacing:-.04em;line-height:1} .bl-per{color:rgba(242,240,236,.7);font-size:16px;max-width:34ch} .bl-seats{display:flex;flex-direction:column;gap:12px;margin-top:30px;font-size:15px;color:rgba(242,240,236,.8)} .bl-seats b{color:#F2F0EC;font-weight:500} .bl-seatbar{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;max-width:520px} .bl-seatbar i{height:14px;border:1px solid rgba(242,240,236,.45)} .bl-seatbar i.on{background:#F2F0EC;border-color:#F2F0EC} .bl-terms{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px;color:rgba(242,240,236,.8)} .bl-terms li{padding-left:22px;position:relative} .bl-terms li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;background:var(--yellow)} .bl-rform{background:var(--bg);color:var(--fg);padding:clamp(24px,3vw,44px);--soft:rgba(10,10,10,.18)} .bl-fh{margin:0 0 8px;font-size:clamp(24px,2.2vw,30px);font-weight:300;letter-spacing:-.025em} .bl-rform .fields{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px} .bl-rform .field.full{grid-column:1 / -1} .bl-go{width:100%;justify-content:center;margin-top:22px;padding:20px 24px!important;font-size:13px!important} .bl-rform .fine{margin-top:14px} .bl-sticky{position:fixed;left:50%;bottom:18px;z-index:40;display:flex;align-items:center;gap:18px;padding:10px 10px 10px 22px;background:#0A0A0A;color:#F2F0EC;box-shadow:0 12px 40px rgba(0,0,0,.25);transform:translate(-50%,160%);transition:transform .45s cubic-bezier(.3,.6,.2,1);font-size:14px;white-space:nowrap;max-width:calc(100% - 24px)} .bl-sticky.show{transform:translate(-50%,0)} .bl-sticky b{font-weight:500} .bl-sticky .pill{padding:12px 20px} @media (max-width:900px){ .bl-reserve{grid-template-columns:1fr} .bl-sticky{left:0;right:0;bottom:0;transform:translateY(110%);max-width:none;justify-content:space-between;padding:10px var(--g) calc(10px + env(safe-area-inset-bottom,0px))} .bl-sticky.show{transform:none} .bl-sdet{display:none} } @media (max-width:520px){.bl-rform .fields{grid-template-columns:1fr}} @media (prefers-reduced-motion:reduce){.bl-sticky{transition:none}.bl-left::before{animation:none}} :root[data-theme="dark"] .bl-reserve,:root[data-theme="dark"] .bl-sticky{background:#1A1A18} :root[data-theme="dark"] .bl-rform{--soft:rgba(242,240,236,.18)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bl-reserve,:root:not([data-theme="light"]) .bl-sticky{background:#1A1A18}:root:not([data-theme="light"]) .bl-rform{--soft:rgba(242,240,236,.18)}} /* steady buttons: rest padding includes the planet slot (16px planet + 8px gap), hover hands it to the planet */ .bpl-hold{padding-left:calc(var(--pl) + 12px)!important;padding-right:calc(var(--pr) + 12px)!important;transition:padding .45s cubic-bezier(.3,.6,.2,1),background-color .3s,color .3s} .bpl-hold:is(:hover,:focus-visible){padding-left:var(--pl)!important;padding-right:var(--pr)!important} .bpl-hold:is(:hover,:focus-visible) .bpl{margin-right:8px} @media (prefers-reduced-motion:reduce){.bpl-hold{transition:none}} /* ---- service pages, calmer reading order ---- */ .sv-hero{grid-template-columns:1fr 1fr;min-height:min(calc(100svh - 120px),760px)} .sv-hero .gallery{display:block} .sv-hero .gallery .ph{height:100%;aspect-ratio:auto;min-height:420px} .sv-hero .info{justify-content:center;gap:22px;padding:clamp(32px,5vw,80px) var(--g);max-width:640px} .sv-hero .title{margin:0} .sv-head{font-size:clamp(22px,2vw,28px);line-height:1.2;letter-spacing:-.01em;margin:0} .sv-lede{font-size:16px;line-height:1.6;color:var(--muted);margin:0;max-width:48ch} .sv-facts{margin:6px 0 0} .sv-facts > div{padding:14px 0;font-size:14px;align-items:baseline} .sv-facts dt{font-size:11px} .sv-facts dd{max-width:30ch} .sv-row{display:grid;grid-template-columns:minmax(160px,1fr) 3fr;gap:clamp(20px,4vw,64px);padding:clamp(48px,7vw,104px) var(--g);border-top:1px solid var(--soft)} .sv-lab{padding-top:.5em} .sv-main{max-width:760px;display:flex;flex-direction:column;gap:20px} .sv-big{font-size:clamp(30px,3.6vw,52px);line-height:1.06;letter-spacing:-.025em;font-weight:400;margin:0;max-width:20ch} .sv-p{font-size:18px;line-height:1.6;font-weight:300;margin:0;max-width:56ch} .sv-inl{display:block;margin-bottom:6px;font-weight:400;color:var(--fg)} .sv-quote{font-size:clamp(20px,1.9vw,26px);line-height:1.45;font-weight:300;margin:0;max-width:44ch} .sv-list{list-style:none;margin:0;padding:0;max-width:900px} .sv-list li{display:grid;grid-template-columns:minmax(180px,1fr) 2fr;gap:24px;padding:18px 0;border-top:1px solid var(--soft);font-size:16px;line-height:1.55} .sv-list li:last-child{border-bottom:1px solid var(--soft)} .sv-dt{font-weight:500;display:flex;flex-direction:column;gap:4px} .sv-dt small{font-weight:400;font-size:10px} .sv-steps .step{min-height:0;padding-bottom:30px} .sv-steps .step p{font-size:15px;line-height:1.55;margin:0} .sv-close{display:grid;grid-template-columns:3fr 2fr;gap:2px;margin-top:clamp(48px,7vw,104px)} .sv-close-in{background:var(--stone);border-bottom:6px solid var(--c);padding:clamp(36px,5vw,72px) var(--g);display:flex;flex-direction:column;gap:20px} .sv-close .cta-row{align-items:center;gap:20px;flex-wrap:wrap} .sv-risk{font-size:14px;max-width:40ch} .sv-rel{background:var(--stone);padding:clamp(36px,5vw,72px) var(--g);display:flex;flex-direction:column;gap:18px} .sv-rel ul{list-style:none;margin:0;padding:0} .sv-rel li{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:14px 0;border-top:1px solid var(--soft);font-size:15px} .sv-rel li .muted{grid-column:1;font-size:13px} .sv-rel li .cap{grid-column:2;grid-row:1;align-self:baseline} /* slim newsletter strip */ .fsub.fslim{display:grid;grid-template-columns:1.2fr 1fr;gap:12px 48px;align-items:center;padding:clamp(28px,3.5vw,44px) var(--g);background:var(--red);color:#fff} .fslim .fs-copy{display:flex;flex-direction:column;gap:6px} .fslim .fs-copy a{color:inherit} .fslim .fs-h{font-size:clamp(24px,2.4vw,34px);font-weight:400;letter-spacing:-.02em;margin:0} .fslim .fs-sub{margin:0;font-size:15px;font-weight:300;opacity:.9} .fslim .fs-form{display:flex;gap:8px} .fslim .fs-form input{flex:1;min-width:0;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.7);color:#fff;font:inherit;font-size:16px;padding:12px 0} .fslim .fs-form input::placeholder{color:rgba(255,255,255,.75)} .fslim .fs-fine{grid-column:2;margin:0;font-size:12px;opacity:.85} .fslim .fs-fine a{color:inherit} .fslim .toast{grid-column:1/-1;color:#fff} @media (max-width:900px){ .sv-hero{grid-template-columns:1fr;min-height:0} .sv-hero .gallery{order:2} .sv-hero .gallery .ph{min-height:0;aspect-ratio:4/3} .sv-row{grid-template-columns:1fr;gap:14px} .sv-list li{grid-template-columns:1fr;gap:4px} .sv-steps{grid-template-columns:1fr !important} .sv-close{grid-template-columns:1fr} .fsub.fslim{grid-template-columns:1fr} .fslim .fs-fine{grid-column:1} } .sv-close{margin-top:0;border-top:1px solid var(--soft)} .fslim .fs-form{flex-direction:row;align-items:flex-end;flex-wrap:nowrap} .fslim .fs-form .pill{flex:none;white-space:nowrap} /* service hero: responsive, overrides the older pdp gallery rules */ .pdp.sv-hero{display:grid;grid-template-columns:1fr 1fr;align-items:stretch} .pdp.sv-hero .gallery{display:block;overflow:hidden;position:relative;min-height:420px;order:0;padding:0} .pdp.sv-hero .gallery .ph,.pdp.sv-hero .gallery .ph:first-child{position:absolute;inset:0;height:auto;aspect-ratio:auto;min-height:0} .pdp.sv-hero .info{position:static;order:0;max-width:640px;width:100%;box-sizing:border-box} @media (max-width:1100px){ .pdp.sv-hero{grid-template-columns:1fr;min-height:0} .pdp.sv-hero .gallery{order:0;min-height:0;aspect-ratio:16/9;max-height:52vh} .pdp.sv-hero .info{order:1;max-width:none;padding:clamp(28px,5vw,48px) var(--g) clamp(36px,6vw,56px)} .pdp.sv-hero .sv-facts,.pdp.sv-hero .sv-lede{max-width:640px} } @media (max-width:600px){ .pdp.sv-hero .gallery{aspect-ratio:3/2} .pdp.sv-hero .title{font-size:clamp(34px,10vw,44px)} .sv-facts > div{flex-direction:column;gap:4px} .sv-facts dd{text-align:left;max-width:none} .sv-hero .cta-row .pill{width:100%;justify-content:center;text-align:center} } @media (max-width:1100px) and (min-width:901px){ .sv-row{grid-template-columns:1fr 3fr} } @media (max-width:1100px){ .pdp.sv-hero .gallery{aspect-ratio:auto;max-height:none;width:100%;height:min(56vw,52vh)} } @media (max-width:600px){ .pdp.sv-hero .gallery{height:66vw} } .sv-rel li > a.u{justify-self:start;align-self:baseline;margin-right:28px} .sv-rel li{column-gap:24px} .sv-rel li .cap{white-space:nowrap} .sv-rel > a.u{align-self:flex-start} .sv-hero .info{gap:24px} .sv-hero .sv-head{max-width:22ch} .sv-sol{border-top:0} .sv-sol .sv-quote{font-weight:300} .sv-sol .sv-facts{max-width:640px;margin-top:8px} @media (min-width:1101px){.pdp.sv-hero{min-height:min(calc(100svh - 140px),620px)}} .pdp.sv-hero .info{display:flex;flex-direction:column;justify-content:center;align-self:stretch;top:auto} /* steps: every box in a row is the same height; the bounce lifts the box without resizing it */ .steps{align-items:stretch} .step,.step:hover,.step.up{border-top-width:6px} .step{transition:transform .45s cubic-bezier(.3,.6,.2,1),box-shadow .45s ease} .step:hover,.step.up{transform:translateY(-10px);box-shadow:inset 0 4px 0 var(--c,var(--fg))} /* service hero: full-bleed photo with the pitch on a pillar-colored plate */ .sv-phero{height:clamp(460px,74vh,760px)} .sv-phero .plate.sv-plate{gap:14px;max-width:680px} .sv-phero .sv-plate .headline{font-size:clamp(40px,5.4vw,84px);line-height:.98;margin:0} .sv-phero .sv-head{color:var(--on);font-size:clamp(19px,1.7vw,24px);max-width:26ch} .sv-phero .cta-row{margin-top:6px} .pill.sv-inv{background:var(--on);color:var(--c);border-color:var(--on)} .pill.sv-inv:hover{background:var(--on);color:var(--c);filter:none;opacity:.9} .sv-phero + .tri + .sv-sol{border-top:0} @media (max-width:600px){ .sv-phero{height:auto;min-height:0;display:flex;flex-direction:column} .sv-phero > img{position:relative !important;height:56vw !important;width:100%} .sv-phero .over{position:static;padding:0} .sv-phero .plate.sv-plate{min-width:0;width:100%;box-sizing:border-box} .sv-phero .cta-row .pill{width:100%;justify-content:center} } .sv-sol{border-top:1px solid var(--soft)} .sv-phero + .tri + .sv-row{border-top:0} /* hover text always contrasts with the hover fill the script picked (outranks the older forced-white rule) */ :is(.pill,.btn,.chip,.rail-ctl button):is(:hover,:focus-visible):not(.x-a):not(.x-b):not(.x-c){color:var(--fill-on,#fff)!important} :is(.pill,.btn,.chip,.rail-ctl button):is(:hover,:focus-visible):not(.x-a):not(.x-b):not(.x-c) *{color:inherit} /* blue text links: a lighter blue on dark backgrounds so they stay readable on hover */ :root[data-theme="dark"] .u:hover,:root[data-theme="dark"] .u:focus-visible{color:#7C98FF} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .u:hover,:root:not([data-theme="light"]) .u:focus-visible{color:#7C98FF}} .tile .u:hover,.hero .u:hover{color:var(--yellow)!important} /* ---- Studio page: more air, fewer boxes ---- */ .st-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,4vw,64px);padding:clamp(40px,6vw,88px) var(--g);border-top:1px solid var(--soft);border-bottom:1px solid var(--soft)} .st-stats > div{display:flex;flex-direction:column;gap:14px} .st-stats .n{font-size:clamp(48px,6vw,88px);font-weight:300;letter-spacing:-.04em;line-height:.9} .st-stats > div::after{content:"";order:1;width:48px;height:4px;background:var(--c)} .st-stats .cap{order:2} .st-stats .c-ink::after{background:linear-gradient(90deg,var(--blue) 0 33.3%,var(--yellow) 33.3% 66.6%,var(--red) 66.6%)} .steps.phases{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:clamp(16px,2.4vw,40px);padding:8px var(--g) clamp(48px,7vw,104px);align-items:stretch} .phases .step{background:none;border-top:3px solid var(--c,var(--fg));padding:22px 0 0;min-height:0;gap:12px} .phases .step.c-tri{border-top-width:3px} .phases .step .n{font-size:clamp(36px,3.4vw,52px)} .phases .step p{font-size:15px;line-height:1.6;margin:0} .phases .step:hover,.phases .step.up{box-shadow:none} .st-row{align-items:start} .st-lab{display:flex;flex-direction:column;gap:10px;max-width:22ch;position:sticky;top:96px} .st-lab .sub{font-size:clamp(24px,2.2vw,32px);line-height:1.15;margin:0} .st-row .sv-list{max-width:none} .st-doors{list-style:none;margin:0;padding:0} .st-doors li{display:grid;grid-template-columns:minmax(200px,1fr) 2fr auto;gap:24px;align-items:baseline;padding:24px 0;border-top:1px solid var(--soft);font-size:16px;line-height:1.55} .st-doors li:last-child{border-bottom:1px solid var(--soft)} .st-door{font-weight:500;display:flex;gap:12px;align-items:baseline} .st-door i{width:10px;height:10px;background:var(--c);flex:none;display:inline-block;transform:translateY(-1px)} .st-doors .c-ink .st-door i{background:linear-gradient(90deg,var(--blue) 0 33.3%,var(--yellow) 33.3% 66.6%,var(--red) 66.6%)} .st-doors a.u{white-space:nowrap;justify-self:end} .st-cap{font-size:14px;line-height:1.55;padding:14px var(--g) 0;max-width:40ch;margin:0} .st-bench{display:grid;grid-template-columns:3fr 2fr;gap:2px;margin-bottom:clamp(24px,4vw,48px)} .st-bench .ph{aspect-ratio:auto;height:clamp(320px,38vw,520px)} .st-bench .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 30%} .st-bench-tx{background:var(--stone);padding:clamp(28px,4vw,64px) var(--g);display:flex;flex-direction:column;justify-content:flex-end;gap:14px} @media (max-width:900px){ .st-stats{grid-template-columns:repeat(2,minmax(0,1fr))} .steps.phases{grid-template-columns:1fr!important;gap:28px} .st-lab{position:static;max-width:none} .st-doors li{grid-template-columns:1fr;gap:6px} .st-doors a.u{justify-self:start;margin-top:6px} .st-bench{grid-template-columns:1fr} .st-bench .ph{height:62vw} } .st-row{grid-template-columns:minmax(260px,1.2fr) 3fr} .st-lab{max-width:28ch} .grid.rel.cz-color .card .meta{padding-left:var(--g);padding-right:var(--g)} @media (max-width:900px){.st-row{grid-template-columns:1fr}} @media (min-width:901px){.st-doors li{grid-template-columns:230px minmax(0,1fr) 200px}} /* Ventures sub-navigation */ .st-sub{display:flex;gap:28px;padding:18px var(--g);border-bottom:1px solid var(--soft);overflow-x:auto;scrollbar-width:none} .st-sub a{white-space:nowrap;padding-bottom:4px;border-bottom:2px solid transparent;color:var(--muted)} .st-sub a:hover{color:var(--fg)} .st-sub a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--fg)} .st-key li{grid-template-columns:200px minmax(0,1fr)!important} .st-key{margin-top:8px} .st-close{border-top:1px solid var(--soft)} .st-legal .sv-p{font-size:15px} @media (max-width:900px){.st-key li{grid-template-columns:1fr!important}} /* ---- Ventures main page (new copy) ---- */ .vx-main{max-width:760px;display:flex;flex-direction:column;gap:18px} .vx-quote{font-size:clamp(26px,2.8vw,40px);line-height:1.15;letter-spacing:-.02em;margin:6px 0;max-width:22ch} .vx-strong{font-size:clamp(19px,1.6vw,22px);line-height:1.45;margin:6px 0 0;max-width:40ch} .vx-list{list-style:none;margin:4px 0;padding:0} .vx-list li{padding:14px 0 14px 22px;border-top:1px solid var(--soft);font-size:17px;line-height:1.55;font-weight:300;position:relative} .vx-list li:last-child{border-bottom:1px solid var(--soft)} .vx-list li::before{content:"";position:absolute;left:0;top:23px;width:8px;height:8px;background:var(--fg)} .vx-list li:nth-child(3n+1)::before{background:var(--blue)}.vx-list li:nth-child(3n+2)::before{background:var(--yellow)}.vx-list li:nth-child(3n)::before{background:var(--red)} .vx-list.vx-plain li{border:0;padding:6px 0 6px 22px} .vx-list.vx-plain li::before{top:15px} .vx-chips{list-style:none;margin:4px 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px} .vx-chips li{font-size:clamp(20px,2vw,28px);letter-spacing:-.015em;line-height:1.2;padding:6px 14px;border:1px solid var(--soft);border-radius:999px} .vx-grid{list-style:none;margin:4px 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px} .vx-grid li{padding:12px 0;border-top:1px solid var(--soft);font-size:17px} .vx-two{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:8px 0} .vx-two > div{display:flex;flex-direction:column;gap:10px} .vx-band{background:#0A0A0A;color:#F2F0EC;padding:clamp(56px,8vw,120px) var(--g);margin:clamp(24px,4vw,56px) 0 0} .vx-band .sv-p{color:#F2F0EC} .vx-band-in{display:flex;flex-direction:column;gap:18px} .vx-band .headline{font-size:clamp(34px,4.6vw,68px);max-width:18ch;margin:0 0 12px} .vx-band-cols{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(28px,6vw,96px);align-items:start} .vx-band-cols > div{display:flex;flex-direction:column;gap:16px} .vx-q1{font-size:clamp(24px,2.4vw,34px);line-height:1.2;margin:6px 0;letter-spacing:-.02em} .vx-qs{margin:0;padding:0;list-style:none;counter-reset:q} .vx-qs li{counter-increment:q;display:grid;grid-template-columns:44px 1fr;gap:8px;padding:18px 0;border-top:1px solid rgba(242,240,236,.2);font-size:clamp(19px,1.7vw,24px);line-height:1.35;font-weight:500} .vx-qs li:last-child{border-bottom:1px solid rgba(242,240,236,.2)} .vx-qs li::before{content:"0" counter(q);font-size:12px;letter-spacing:.12em;opacity:.6;padding-top:.55em} .vx-band .vx-list.vx-plain li{color:#F2F0EC} .vx-band .vx-list li:nth-child(3n+1)::before{background:var(--blue)} .vx-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);padding:8px var(--g) clamp(48px,7vw,104px)} .vx-way{border-top:3px solid var(--c);padding-top:22px;display:flex;flex-direction:column;gap:14px} .vx-way .sub{font-size:clamp(24px,2.2vw,32px);margin:0} .vx-way p{margin:0;font-size:16px;line-height:1.6} .vx-flow{font-size:11px;letter-spacing:.12em;color:var(--fg);margin:0 0 6px!important;line-height:1.8} .vx-flow span{color:var(--c);padding:0 4px} .vx-wins{list-style:none;margin:8px 0;padding:0} .vx-wins li{display:grid;grid-template-columns:28px 1fr;align-items:baseline;padding:16px 0;border-top:1px solid var(--soft);font-size:clamp(19px,1.6vw,22px);line-height:1.4} .vx-wins li:last-child{border-bottom:1px solid var(--soft)} .vx-wins i{width:12px;height:12px;background:var(--c);display:inline-block} .vx-wins .c-ink i{background:linear-gradient(90deg,var(--blue) 0 33.3%,var(--yellow) 33.3% 66.6%,var(--red) 66.6%)} .vx-see{background:var(--blue)} .vx-see .vx-list li::before{background:#F2F0EC!important} .phero .over .headline{text-wrap:balance} @media (max-width:900px){ .vx-band-cols,.vx-two,.vx-ways{grid-template-columns:1fr} .vx-grid{grid-template-columns:1fr} } .phero .headline:has(.vx-h){font-size:clamp(32px,4.4vw,66px);line-height:1.02} .phero .plate:has(.vx-h){max-width:900px} /* ---- Ventures case studies ---- */ .cs-idx{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px} .cs-idx a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0;border-top:1px solid var(--soft);font-size:17px} .cs-idx a:hover span:first-child{color:var(--blue)} .cs-idx .cap{font-size:10px;text-align:right} .cs{display:grid;grid-template-columns:5fr 7fr;border-top:1px solid var(--soft);scroll-margin-top:90px} .cs:nth-of-type(even){grid-template-columns:7fr 5fr} .cs:nth-of-type(even) > .ph{order:2} .cs > .ph{min-height:clamp(360px,42vw,640px);height:100%;aspect-ratio:auto} .cs > .ph img{width:100%;height:100%;object-fit:cover} .cs-tx{padding:clamp(36px,5vw,80px) var(--g);display:flex;flex-direction:column;gap:22px;max-width:760px} .cs-top{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:3px solid var(--c);padding-bottom:14px} .cs-tag{display:flex;align-items:center;gap:10px} .cs-tag i{width:10px;height:10px;background:var(--c);display:inline-block} .cs.c-ink .cs-top{border-image:linear-gradient(90deg,var(--blue) 0 33.3%,var(--yellow) 33.3% 66.6%,var(--red) 66.6%) 1} .cs.c-ink .cs-tag i{background:linear-gradient(90deg,var(--blue) 0 33.3%,var(--yellow) 33.3% 66.6%,var(--red) 66.6%)} .cs .sv-big{margin:0} .cs-f{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;padding-top:16px;border-top:1px solid var(--soft)} .cs-f p{margin:0;font-size:16px;line-height:1.6;font-weight:300} .cs-f .cap{padding-top:.35em} .cs-tx > a.u{align-self:flex-start;margin-top:4px} @media (max-width:900px){ .cs,.cs:nth-of-type(even){grid-template-columns:1fr} .cs:nth-of-type(even) > .ph{order:0} .cs > .ph{min-height:0;height:62vw} .cs-f{grid-template-columns:1fr;gap:6px} .cs-idx{grid-template-columns:1fr} } .vx-ways.vx-five{grid-template-columns:repeat(5,minmax(0,1fr))} .vx-way.c-tri{border-top:3px solid transparent;border-image:linear-gradient(90deg,var(--blue) 0 33.3%,var(--yellow) 33.3% 66.6%,var(--red) 66.6%) 1} .vx-way.c-ink{border-top-color:var(--fg)} .vx-wins .c-tri i{background:linear-gradient(90deg,var(--blue) 0 33.3%,var(--yellow) 33.3% 66.6%,var(--red) 66.6%)} .vx-wins-dark li{border-color:rgba(242,240,236,.2)!important;color:#F2F0EC} .vx-wins-dark .c-ink i{background:#F2F0EC} .vx-qs-light li{border-color:var(--soft)!important;font-weight:400} .vx-qs-light li:last-child{border-bottom:1px solid var(--soft)} @media (max-width:900px){.vx-ways.vx-five{grid-template-columns:1fr}} @media (min-width:901px) and (max-width:1200px){.vx-ways.vx-five{grid-template-columns:repeat(3,minmax(0,1fr))}} /* ==== Ventures system: editorial layout ==== */ .vx-sec{padding:clamp(48px,7vw,104px) var(--g);border-top:1px solid var(--soft)} .vx-sec-head{display:flex;flex-direction:column;gap:10px;margin-bottom:clamp(20px,3vw,36px);max-width:36ch} .vx-sec-head .sub{font-size:clamp(26px,2.6vw,38px);line-height:1.1;margin:0} .vx-sec-foot{max-width:760px;margin-top:28px;display:flex;flex-direction:column;gap:14px} /* lists: neutral markers; color is reserved for meaning */ .vx-list li::before,.vx-list li:nth-child(3n+1)::before,.vx-list li:nth-child(3n+2)::before,.vx-list li:nth-child(3n)::before{background:var(--fg);width:6px;height:6px;top:24px} .vx-list.vx-plain li::before{top:16px} .vx-band .vx-list li::before,.vx-band .vx-list li:nth-child(n)::before{background:#F2F0EC!important} /* inline typographic lists instead of pills */ .vx-chips{display:block;list-style:none;margin:4px 0;padding:0} .vx-chips li{display:inline;border:0;padding:0;border-radius:0;font-size:clamp(20px,2vw,28px);letter-spacing:-.015em;line-height:1.45} .vx-chips li:not(:last-child)::after{content:" / ";color:var(--muted);font-weight:300} /* ruled tables */ .vt-wrap{overflow-x:auto} .vt{width:100%;border-collapse:collapse;font-size:16px;line-height:1.5} .vt th,.vt td{text-align:left;vertical-align:top;padding:16px 24px 16px 0;border-top:1px solid var(--soft)} .vt tbody tr:last-child th,.vt tbody tr:last-child td{border-bottom:1px solid var(--soft)} .vt thead th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:400;border-top:0;padding-top:0} .vt tbody th{font-weight:500;width:26%} .vt td{color:var(--muted);font-weight:300} .vt-tight tbody th{width:30%} .vt-portfolio tbody th{width:14%} .vt-portfolio td:nth-child(3){white-space:nowrap;color:var(--fg)} .vt-model{color:var(--fg);text-decoration:underline;text-decoration-color:var(--soft);text-underline-offset:4px} .vt-model:hover{text-decoration-color:var(--fg)} .vt-links{display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end} /* three ways */ .vx-ways3{list-style:none;margin:0;padding:0} .vx-ways3 > li{display:grid;grid-template-columns:60px minmax(200px,1fr) 2fr;gap:24px;padding:28px 0;border-top:1px solid var(--soft)} .vx-ways3 > li:last-child{border-bottom:1px solid var(--soft)} .vx-ways3 .sub{font-size:clamp(22px,2vw,30px);margin:0;line-height:1.15} .vx-w-body{display:flex;flex-direction:column;gap:10px;max-width:60ch} .vx-w-body .sv-p{font-size:17px;margin:0} .vx-w-links{display:flex;gap:20px;flex-wrap:wrap;margin:6px 0 0} .vx-n{color:var(--muted);padding-top:.5em} /* definition rows */ .vx-dl{margin:6px 0;display:flex;flex-direction:column} .vx-dl > div{display:grid;grid-template-columns:160px minmax(0,1fr);gap:20px;padding:16px 0;border-top:1px solid var(--soft)} .vx-dl > div:last-child{border-bottom:1px solid var(--soft)} .vx-dl dt{font-size:clamp(19px,1.6vw,22px);font-weight:500} .vx-dl dd{margin:0;font-size:17px;line-height:1.55;font-weight:300} .vx-dl-stage dt{font-size:17px} /* section index */ .vx-index{list-style:none;margin:0;padding:0} .vx-index a{display:grid;grid-template-columns:60px minmax(200px,1fr) 2fr 32px;gap:24px;align-items:baseline;padding:22px 0;border-top:1px solid var(--soft)} .vx-index li:last-child a{border-bottom:1px solid var(--soft)} .vx-index-t{font-size:clamp(24px,2.4vw,36px);letter-spacing:-.02em;line-height:1.1} .vx-index-d{font-size:16px;line-height:1.5} .vx-index-a{font-size:22px;transition:transform .3s ease} .vx-index a:hover .vx-index-t{color:var(--blue)} .vx-index a:hover .vx-index-a{transform:translateX(6px)} /* stages */ .vx-steps{list-style:none;margin:0;padding:0} .vx-steps > li{display:grid;grid-template-columns:60px minmax(160px,1fr) 2fr 1.2fr;gap:24px;align-items:baseline;padding:22px 0;border-top:1px solid var(--soft)} .vx-steps > li:last-child{border-bottom:1px solid var(--soft)} .vx-steps .sub{font-size:clamp(20px,1.8vw,26px);margin:0} .vx-steps p{margin:0;font-size:16px;line-height:1.55} .vx-ask{font-style:italic;font-family:Cormorant,Georgia,serif;font-size:21px!important;line-height:1.3!important} /* next in section */ .vx-next{display:grid;grid-template-columns:1fr 2fr;gap:24px;align-items:end;padding:clamp(40px,6vw,80px) var(--g);border-top:1px solid var(--soft)} .vx-back{align-self:end} .vx-nextlink{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:3px solid var(--fg)} .vx-nexttitle{font-size:clamp(28px,3.4vw,48px);letter-spacing:-.02em;line-height:1.05} .vx-nextlink:hover .vx-nexttitle{color:var(--blue)} /* partner form */ .vx-formsec{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(28px,5vw,80px);padding:clamp(48px,7vw,104px) var(--g);background:var(--stone)} .vx-form-l{display:flex;flex-direction:column;gap:14px} .vx-form-l .headline{font-size:clamp(30px,3.6vw,52px);margin:0} .vx-form .fields{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin-bottom:22px} .vx-form .field{display:flex;flex-direction:column;gap:8px} .vx-form .field.full{grid-column:1/-1} .vx-form input,.vx-form select,.vx-form textarea{font:inherit;font-size:16px;color:var(--fg);background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 0;border-radius:0} .vx-form textarea{border:1px solid var(--soft);padding:12px;resize:vertical} .vx-form .fine{margin-top:14px} .vx-legal{font-size:13px!important;opacity:.7;max-width:56ch} .cs-tag{color:var(--fg)} a.cs-tag:hover{color:var(--blue)} @media (max-width:900px){ .vx-ways3 > li,.vx-steps > li{grid-template-columns:40px 1fr;gap:8px 12px} .vx-ways3 > li > :nth-child(n+3),.vx-steps > li > :nth-child(n+3){grid-column:2} .vx-index a{grid-template-columns:40px 1fr 24px;gap:6px 12px} .vx-index-d{grid-column:2;grid-row:2} .vx-index-a{grid-column:3;grid-row:1} .vx-dl > div{grid-template-columns:1fr;gap:4px} .vx-next{grid-template-columns:1fr} .vx-back{order:2} .vx-formsec{grid-template-columns:1fr} .vx-form .fields{grid-template-columns:1fr} .vt thead{display:none} .vt,.vt tbody,.vt tr,.vt th,.vt td{display:block;width:auto!important} .vt tr{padding:14px 0;border-top:1px solid var(--soft)} .vt tbody tr:last-child{border-bottom:1px solid var(--soft)} .vt th,.vt td{border:0!important;padding:3px 0} .vt td[data-l]:not([data-l=""])::before{content:attr(data-l) " ";display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:6px} .vt-links{justify-content:flex-start;margin-top:6px} } .vx-back{justify-self:start} .vx-next-end{grid-template-columns:1fr 2fr} .vx-next-end .vx-nextlink{grid-column:2} @media (max-width:900px){.vx-next-end .vx-nextlink{grid-column:1}} /* focus: advantage list + statement */ .vx-adv,.vx-models{list-style:none;margin:0;padding:0} .vx-adv > li{display:grid;grid-template-columns:60px minmax(220px,1fr) 2fr;gap:24px;padding:32px 0;border-top:1px solid var(--soft)} .vx-adv > li:last-child{border-bottom:1px solid var(--soft)} .vx-adv .sub{font-size:clamp(22px,2vw,30px);margin:0;line-height:1.15} .vx-statement{padding:clamp(64px,10vw,160px) var(--g);border-top:1px solid var(--soft);border-bottom:1px solid var(--soft)} .vx-statement p{margin:0;font-size:clamp(40px,7vw,112px);line-height:.98;letter-spacing:-.04em;font-weight:400} /* partner: models */ .vx-models > li{display:grid;grid-template-columns:60px minmax(200px,1fr) 2fr 120px;gap:24px;align-items:baseline;padding:24px 0;border-top:1px solid var(--soft)} .vx-models > li:last-child{border-bottom:1px solid var(--soft)} .vx-models .sub{font-size:clamp(22px,2vw,30px);margin:0} .vx-models p{margin:0;font-size:17px;line-height:1.55;font-weight:300} .vx-models .u{justify-self:end} .vx-models > li.vx-model-x{background:var(--stone);padding-left:16px;padding-right:16px;margin:0 -16px;border-top:3px solid var(--fg)} .vx-explore{background:#0A0A0A} .vx-explore .vx-chips li{color:#F2F0EC} .vx-explore .vx-chips li:not(:last-child)::after{color:rgba(242,240,236,.5)} .vx-dl-not dt{font-size:clamp(18px,1.5vw,21px)} .vx-dl-not > div{grid-template-columns:minmax(260px,1fr) 1.2fr} @media (max-width:900px){ .vx-adv > li,.vx-models > li{grid-template-columns:40px 1fr;gap:8px 12px} .vx-adv > li > :nth-child(n+3),.vx-models > li > :nth-child(n+3){grid-column:2} .vx-models .u{justify-self:start} .vx-dl-not > div{grid-template-columns:1fr} } .vx-adv > li{grid-template-columns:60px minmax(220px,1fr) minmax(0,2fr)} .vx-adv .vx-w-body{max-width:680px;width:100%;min-width:0} .vx-adv .vx-w-body > ul,.vx-adv .vx-w-body > ol{width:100%} .vx-ways3 .vx-w-body > ul,.vx-ways3 .vx-w-body > ol{width:100%} /* how we build */ .vx-statement-s{font-size:clamp(30px,4.2vw,64px)!important;line-height:1.08!important;max-width:22ch} .vx-flysec{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center;padding:clamp(48px,7vw,104px) var(--g);border-bottom:1px solid var(--soft)} .vx-fly-tx{display:flex;flex-direction:column;gap:18px} .vx-fly-tx .sub{font-size:clamp(24px,2.4vw,34px);line-height:1.15;margin:0;max-width:22ch} .vx-fly{width:100%;max-width:560px;height:auto;color:var(--fg);justify-self:center} .vx-fly .fw-l{font-size:20px;fill:var(--fg);font-family:inherit;letter-spacing:.02em} .vx-fly .fw-c{font-family:Cormorant,Georgia,serif;font-style:italic;font-size:30px;fill:var(--muted)} .vx-stages > li .vx-chips li{font-size:clamp(18px,1.6vw,22px)} /* portfolio index */ .vx-filter{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px} .vx-f{font:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);padding:8px 6px;cursor:pointer} .vx-f[aria-pressed="true"]{color:var(--fg);border-bottom-color:var(--fg)} .vx-f:hover{color:var(--fg)} .vx-entries{list-style:none;margin:0;padding:0} .vx-entry{display:grid;grid-template-columns:minmax(220px,1fr) 3fr;gap:24px;padding:28px 0;border-top:1px solid var(--soft)} .vx-entry:last-child{border-bottom:1px solid var(--soft)} .vx-e-head{display:flex;flex-direction:column;gap:8px} .vx-e-head .sub{font-size:clamp(24px,2.2vw,32px);margin:0;line-height:1.1} .vx-e-dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 32px} .vx-e-dl > div{display:flex;flex-direction:column;gap:4px} .vx-e-dl dd{margin:0;font-size:16px;line-height:1.5;font-weight:300} .vx-e-dl dd a{text-decoration:underline;text-decoration-color:var(--soft);text-underline-offset:4px} .vx-entry .vx-w-links{grid-column:2;margin:0} .vx-note{font-size:14px;max-width:70ch;margin-top:18px} /* case studies */ .cs-sum{list-style:none;margin:0;padding:0} .cs-sum a{display:grid;grid-template-columns:minmax(160px,.8fr) 1.4fr 1fr 1.4fr;gap:24px;padding:20px 0;border-top:1px solid var(--soft);font-size:15px;line-height:1.5} .cs-sum li:last-child a{border-bottom:1px solid var(--soft)} .cs-sum-n{font-size:clamp(22px,2vw,28px);letter-spacing:-.015em;line-height:1.1} .cs-sum-f{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-weight:300} .cs-sum-f b{font-weight:400;font-size:10px} .cs-sum a:hover .cs-sum-n{color:var(--blue)} .cs-v{font-size:16px;line-height:1.6;font-weight:300} .cs-v b{font-weight:500} .cs-v .vx-list{margin:0} .vx-lessons{list-style:none;margin:0;padding:0} .vx-lessons li{font-size:clamp(19px,1.6vw,22px);line-height:1.35;font-weight:400;padding:10px 0;border-top:1px solid var(--soft)} .vx-lessons li:last-child{border-bottom:1px solid var(--soft)} .cs-feature .cs-tx{max-width:860px} .cs-feature > .ph{min-height:clamp(480px,60vw,900px)} @media (max-width:900px){ .vx-flysec{grid-template-columns:1fr} .vx-entry{grid-template-columns:1fr;gap:14px} .vx-entry .vx-w-links{grid-column:1} .vx-e-dl{grid-template-columns:1fr} .cs-sum a{grid-template-columns:1fr;gap:8px} .cs-feature > .ph{min-height:0} } /* ==== Partner with us: opening + observation form ==== */ .vx-open{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(28px,6vw,96px);padding:clamp(56px,8vw,120px) var(--g);border-bottom:1px solid var(--soft)} .vx-open-l .vx-quote{font-size:clamp(34px,4.4vw,64px);max-width:14ch;margin:0;line-height:1.02} .vx-open-r{display:flex;flex-direction:column;gap:18px;max-width:640px} .vx-nots{list-style:none;margin:0;padding:0;font-size:clamp(19px,1.6vw,22px);line-height:1.4} .vx-nots li{padding:8px 0} .vx-formsec-wide{grid-template-columns:minmax(240px,1fr) 2.2fr;background:var(--stone)} .vx-formsec-wide .vx-form-l{position:sticky;top:120px;align-self:start} .vx-oform{display:flex;flex-direction:column;gap:18px;min-width:0} .vx-prog{list-style:none;margin:0 0 6px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font-size:10px} .vx-prog li{border-top:3px solid var(--soft);padding-top:8px;color:var(--muted)} .vx-prog li.on{border-top-color:var(--fg);color:var(--fg)} .vx-oform:not(.js) .vx-prog{display:none} .vx-step{border:0;margin:0;padding:0;min-width:0} .vx-step-h{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;outline:none;padding:0} .vx-step-t{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.02em;line-height:1.1} .vx-q{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:22px 0;border-top:1px solid var(--soft)} .vx-qn{color:var(--muted);padding-top:.35em} .vx-qb{display:flex;flex-direction:column;gap:10px;min-width:0} .vx-ql{font-size:clamp(18px,1.5vw,21px);line-height:1.35;font-weight:400;padding:0} .vx-req{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-left:8px;vertical-align:2px} .vx-hint{font-size:14px;color:var(--muted);margin-top:-4px} .vx-oform textarea,.vx-oform input[type=text],.vx-oform input[type=email]{font:inherit;font-size:16px;color:var(--fg);background:var(--bg);border:1px solid var(--soft);border-radius:0;padding:12px 14px;width:100%;box-sizing:border-box} .vx-oform textarea{resize:vertical;min-height:90px} .vx-oform :is(textarea,input):focus-visible{outline:2px solid var(--blue);outline-offset:1px} .vx-fs{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:10px} .vx-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px 20px} .vx-check{display:flex;gap:10px;align-items:flex-start;padding:8px 0;font-size:15px;line-height:1.4;cursor:pointer;border-bottom:1px solid var(--soft)} .vx-check input{margin:.2em 0 0;accent-color:var(--blue);width:16px;height:16px;flex:none} .vx-contact{display:grid!important;grid-template-columns:1fr 1fr;gap:16px} .vx-contact > div{display:flex;flex-direction:column;gap:8px} .vx-step-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:22px;border-top:1px solid var(--soft)} .vx-step-nav button.u{background:none;border:0;border-bottom:1px solid currentColor;padding:4px 0;cursor:pointer;color:var(--fg);font:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase} .vx-done{padding:28px 0;border-top:3px solid var(--fg);display:flex;flex-direction:column;gap:10px;outline:none} .vx-statement-end{display:flex;flex-direction:column;gap:28px} @media (max-width:900px){ .vx-open,.vx-formsec-wide{grid-template-columns:1fr} .vx-formsec-wide .vx-form-l{position:static} .vx-q{grid-template-columns:1fr;gap:6px} .vx-contact{grid-template-columns:1fr} .vx-checks{grid-template-columns:1fr 1fr} } @media (max-width:480px){.vx-checks{grid-template-columns:1fr}} /* ==== diagrams (shared grammar with the How We Build loop) ==== */ .dg{margin:0;display:flex;flex-direction:column;gap:18px} .dg-svg{display:block;width:100%;height:auto;color:var(--fg);overflow:visible} .dg-svg .dg-l{font-size:20px;fill:var(--fg);font-family:inherit;letter-spacing:.01em} .dg-svg .dg-s{font-size:15px;fill:var(--muted);font-family:inherit} .dg-svg .dg-i{font-size:23px;fill:var(--muted);font-family:Cormorant,Georgia,serif;font-style:italic} .dg-svg .dg-c{font-size:12px;fill:var(--fg);font-family:inherit;letter-spacing:.14em;text-transform:uppercase} .dg figcaption{font-size:15px;line-height:1.55;color:var(--muted);max-width:62ch;font-weight:300} .dg-sec{padding:clamp(40px,6vw,96px) var(--g);border-top:1px solid var(--soft)} .dg-sec .dg-wide{max-width:1100px;margin:0 auto} .dg-sec .dg-wide figcaption{margin:0 auto 0 0} .dg-in{border-top:0;padding-top:clamp(8px,2vw,24px)} .cs-tx .dg{padding-top:20px;border-top:1px solid var(--soft)} .vx-main .dg{margin-bottom:10px} @media (max-width:700px){ .dg-svg .dg-l{font-size:24px}.dg-svg .dg-s{font-size:19px}.dg-svg .dg-i{font-size:26px}.dg-svg .dg-c{font-size:15px} .dg-sec{padding-left:var(--g);padding-right:var(--g)} } .dg-scroll{outline:none} .dg-scroll:focus-visible{outline:2px solid var(--blue);outline-offset:4px} @media (max-width:700px){ .dg-svg .dg-l{font-size:20px}.dg-svg .dg-s{font-size:15px}.dg-svg .dg-i{font-size:23px}.dg-svg .dg-c{font-size:12px} .dg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 calc(var(--g) * -1);padding:0 var(--g);scrollbar-width:thin} .dg-scroll .dg-svg{min-width:700px} .cs-tx .dg-scroll{margin:0 calc(var(--g) * -1)} } .dg,.dg-scroll{min-width:0;max-width:100%} .vx-main > .dg,.cs-tx > .dg{width:100%} @media (max-width:700px){.vx-main .dg-scroll,.cs-tx .dg-scroll{margin:0;padding:0}} .vx-main,.cs-tx,.sv-row > *,.cs > *{min-width:0} @media (max-width:900px){.sv-row{grid-template-columns:minmax(0,1fr)}.cs,.cs:nth-of-type(even){grid-template-columns:minmax(0,1fr)}} @media (max-width:900px){.grid.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media (max-width:520px){.grid.pgrid{grid-template-columns:1fr!important}} /* service collections: four across, so each practice reads as a row */ @media (min-width:1101px){#grid.grid{grid-template-columns:repeat(4,minmax(0,1fr))}} .card-cta{display:flex;background:var(--stone);min-height:100%} .card-cta .cta-in{display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:clamp(20px,2.4vw,32px);width:100%} .card-cta .sub{font-size:clamp(20px,1.8vw,26px);line-height:1.2;max-width:18ch} .card-cta .u{align-self:flex-start} .card-cta:hover .sub{color:var(--blue)} /* save the Build Lab sessions to a calendar */ .cal-dd{position:relative;display:inline-block} .cal-dd>summary{list-style:none;cursor:pointer;gap:10px} .cal-dd>summary::-webkit-details-marker{display:none} .cal-dd>summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s} .cal-dd[open]>summary::after{transform:translateY(2px) rotate(-135deg)} .cal-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:min(320px,calc(100vw - 32px));background:var(--bg);color:var(--fg);border:1px solid var(--line);padding:6px;display:flex;flex-direction:column;box-shadow:0 12px 32px rgba(0,0,0,.12)} .cal-opt{display:flex;flex-direction:column;gap:2px;padding:12px 14px;font-size:15px;border-bottom:1px solid var(--line)} .cal-opt:hover,.cal-opt:focus-visible{background:var(--soft)} .cal-menu .fine{margin:0;padding:10px 14px 8px;font-size:12px;line-height:1.5;color:var(--muted)} .cal-rev{margin-top:18px} .cal-rev .cal-menu{left:0;right:auto} .cal-rev>summary{background:transparent;color:inherit;border:1px solid currentColor} @media (max-width:700px){.head .cal-dd .cal-menu{left:0;right:auto}} .cal-sub{font-size:12px;color:var(--muted)} .cal-dd>summary{white-space:nowrap} details.cal-dd{border:0!important;padding:0!important;margin:0} details.cal-dd>summary{padding:12px 24px} details.cal-dd>summary::after,details.cal-dd[open]>summary::after{content:""!important;font-size:0} #weeks .head h2{max-width:26ch} .bl-rcopy .cal-rev{margin-top:24px} /* Build Lab payment plans */ .bl-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:24px;border:1px solid rgba(242,240,236,.22)} .bl-plan{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-left:1px solid rgba(242,240,236,.22)} .bl-plan:first-child{border-left:0} .bl-plan .cap{color:var(--yellow)} .bl-plan b{font-weight:300;font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;line-height:1.1;color:#F2F0EC} .bl-plan span:last-child{font-size:13px;line-height:1.45;color:rgba(242,240,236,.7)} @media (max-width:700px){.bl-plans{grid-template-columns:1fr}.bl-plan{border-left:0;border-top:1px solid rgba(242,240,236,.22)}.bl-plan:first-child{border-top:0}} .bl-pick{border:0;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:0} .bl-pick legend{padding:0;margin-bottom:8px} .bl-pick label{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line);cursor:pointer;font-size:14px;line-height:1.45} .bl-pick label:last-child{border-bottom:1px solid var(--line)} .bl-pick input{accent-color:var(--ink,#0A0A0A);width:18px;height:18px;margin:1px 0 0;flex:none} .bl-pick b{font-weight:500;display:block} /* simplified menus: columns follow the number of groups */ .mega[data-menu="services"] .mlist{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto} .mega[data-menu="studio"] .mlist,.mega[data-menu="buildlab"] .mlist,.mega[data-menu="work"] .mlist{grid-template-rows:auto} .mlist{align-items:start} /* shorter menus now that the lists are shorter */ .mwrap{min-height:0} .mlist{align-content:start;padding:clamp(28px,3vw,40px) var(--g) clamp(32px,3.4vw,44px);gap:32px 28px} .mprev{min-height:clamp(320px,34vh,380px)} .mprev .mstat{font-size:clamp(56px,6vw,96px)!important} .mprev{min-height:380px} .mprev .mstat{font-size:clamp(48px,5vw,80px)!important} /* ============ Build Lab landing page ============ */ .blh{position:relative;min-height:min(90vh,860px);display:flex;align-items:flex-end;background:#0A0A0A;color:#F2F0EC;overflow:hidden} .blh .blh-bg{position:absolute;inset:0;aspect-ratio:auto;height:100%;margin:0} .blh .blh-bg img{width:100%;height:100%;object-fit:cover;opacity:.6} .blh::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.25) 0%,rgba(10,10,10,.35) 40%,rgba(10,10,10,.88) 100%);pointer-events:none} .blh-in{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,410px);gap:clamp(32px,5vw,80px);align-items:end;padding:clamp(96px,12vw,160px) var(--g) clamp(40px,5vw,64px)} .blh-eye{display:inline-flex;align-items:center;gap:10px;color:rgba(242,240,236,.85)} .blh-h{font-weight:300;font-size:clamp(48px,7.2vw,112px);line-height:.95;letter-spacing:-.045em;margin:18px 0 22px;color:#fff;text-wrap:balance;max-width:11ch} .blh-sub{margin:0;font-size:clamp(17px,1.5vw,21px);line-height:1.45;max-width:40ch;color:rgba(242,240,236,.9);font-weight:300} .blh-facts{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-wrap:wrap;border-top:1px solid rgba(242,240,236,.25)} .blh-facts li{display:flex;flex-direction:column;gap:3px;padding:14px 26px 0 0;margin-right:26px;border-right:1px solid rgba(242,240,236,.25)} .blh-facts li:last-child{border-right:0;margin-right:0} .blh-facts b{font-weight:400;font-size:17px;color:#fff} .blh-facts span{font-size:13px;color:rgba(242,240,236,.7)} .blh-ctas{display:flex;align-items:center;gap:14px 24px;flex-wrap:wrap;margin-top:30px} .blh .blh-ctas .u,.blm .blh-ctas .u{color:#F2F0EC} .blh-card{background:var(--bg);color:var(--fg);padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:16px;box-shadow:0 24px 60px rgba(0,0,0,.35)} .blh-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px} .blh-price b{font-weight:300;font-size:clamp(46px,4.4vw,60px);letter-spacing:-.045em;line-height:1} .blh-price span{font-size:15px;color:var(--muted)} .blh-card .bl-seatbar{gap:4px} .blh-card .bl-seatbar i{height:12px;border-color:var(--line)} .blh-card .bl-seatbar i.on{background:var(--fg);border-color:var(--fg)} .blh-left{margin:0;font-size:14px;color:var(--muted)} .blh-left b{color:var(--fg);font-weight:500} .blh-go{justify-content:center;width:100%} .blh-inc{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px;font-size:14px;line-height:1.4;color:var(--muted)} .blh-inc li{position:relative;padding-left:20px} .blh-inc li::before{content:"";position:absolute;left:0;top:.45em;width:8px;height:8px;background:var(--yellow)} @media (max-width:960px){.blh{min-height:0}.blh-in{grid-template-columns:1fr;padding-top:clamp(120px,24vw,200px)}.blh-card{max-width:520px}} @media (max-width:560px){.blh-facts li{padding-right:16px;margin-right:16px}.blh-ctas .pill{flex:1 1 100%;justify-content:center}} /* at-a-glance strip */ .blf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--soft)} .blf li{display:flex;flex-direction:column;gap:6px;padding:clamp(22px,3vw,36px) var(--g);border-left:1px solid var(--soft)} .blf li:first-child{border-left:0} .blf b{font-weight:300;font-size:clamp(40px,4.4vw,68px);letter-spacing:-.045em;line-height:1} .blf span{font-size:13px;color:var(--muted);letter-spacing:.02em} @media (max-width:760px){.blf{grid-template-columns:repeat(2,minmax(0,1fr))}.blf li{border-left:0;border-top:1px solid var(--soft)}.blf li:nth-child(even){border-left:1px solid var(--soft)}.blf li:nth-child(-n+2){border-top:0}.blf li:last-child{grid-column:1/-1}} /* mid-page call to action */ .blm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#0A0A0A;color:#F2F0EC;margin-top:var(--s,clamp(64px,8vw,120px))} .blm .blm-ph{aspect-ratio:auto;min-height:clamp(300px,34vw,460px);margin:0} .blm .blm-ph img{width:100%;height:100%;object-fit:cover} .blm-in{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:clamp(32px,5vw,72px) var(--g)} .blm-in .cap{display:inline-flex;align-items:center;gap:10px;color:rgba(242,240,236,.8)} .blm-in .headline{margin:0;color:#fff;font-size:clamp(34px,4vw,60px)} .blm-in p{margin:0;max-width:40ch;font-size:16px;line-height:1.5;color:rgba(242,240,236,.8)} .blm .blh-ctas{margin-top:6px} @media (max-width:760px){.blm{grid-template-columns:1fr}.blm .blm-ph{min-height:240px}} /* who it is for, and not for */ .blw-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,80px);padding:0 var(--g)} .blw-col>.cap{display:inline-flex;align-items:center;gap:10px} .blw-col>.cap::before{content:"";width:10px;height:10px;background:var(--yellow)} .blw-not>.cap::before{background:transparent;border:1.5px solid var(--muted)} .blw-col ul{list-style:none;margin:16px 0 0;padding:0} .blw-col li{display:flex;flex-direction:column;gap:6px;padding:20px 0;border-top:1px solid var(--soft)} .blw-col li:last-child{border-bottom:1px solid var(--soft)} .blw-col li b{font-weight:400;font-size:clamp(19px,1.7vw,23px);letter-spacing:-.01em} .blw-col li span{font-size:15px;line-height:1.5;color:var(--muted)} .blw-not li b{color:var(--muted)} @media (max-width:760px){.blw-cols{grid-template-columns:1fr}} /* instructor stats */ .bli-stats{list-style:none;margin:6px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .bli-stats li{display:flex;flex-direction:column;gap:4px} .bli-stats b{font-weight:300;font-size:clamp(28px,2.6vw,38px);letter-spacing:-.04em;line-height:1} .bli-stats span{font-size:12px;line-height:1.35;color:var(--muted)} @media (max-width:560px){.blh-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.blh-facts li{padding:12px 10px 0 12px;margin:0;border-right:0;border-left:1px solid rgba(242,240,236,.25)}.blh-facts li:first-child{border-left:0;padding-left:0}.blh-facts b{font-size:15px}.blh-facts span{font-size:12px}} .bli .ph img{object-position:50% 25%} @media (max-width:700px){.rows > div{grid-template-columns:1fr;gap:6px}.rows p{grid-column:auto}} .rows > div.brk .sub{color:var(--fg)} /* ============ Forefield: sign-up in a modal ============ */ html:not(.js) .js-only{display:none!important} html.nim-on{overflow:hidden} dialog.nim{padding:0;border:0;margin:auto;width:min(540px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;background:var(--bg);color:var(--fg);box-shadow:0 30px 80px rgba(0,0,0,.35)} dialog.nim::backdrop{background:rgba(10,10,10,.62);backdrop-filter:blur(3px)} dialog.nim[open]{animation:nim-in .28s cubic-bezier(.3,.6,.2,1)} @keyframes nim-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){dialog.nim[open]{animation:none}} .nim .tri{margin:0} .nim-in{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(24px,4vw,40px)} .nim-x{position:absolute;top:14px;right:14px;width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;color:var(--fg);cursor:pointer;border-radius:50%} .nim-x svg{width:20px;height:20px} .nim-x:hover,.nim-x:focus-visible{background:var(--soft)} .nim-eye{display:inline-flex;align-items:center;gap:8px;color:var(--muted)} .nim-eye .dot{width:9px;height:9px;border-radius:50%;background:var(--red)} .nim-h{margin:0;font-weight:300;font-size:clamp(32px,4vw,46px);line-height:1;letter-spacing:-.04em;padding-right:40px} .nim-sub{margin:0;font-size:15px;line-height:1.55;color:var(--muted);max-width:46ch} .nim-form{margin-top:6px;display:flex;flex-direction:column;gap:18px} .nim-form .fields{margin:0} .nim .form .field label{color:var(--muted)!important} .nim-form input{color:var(--fg)} .nim-topics{border:0!important;padding:0} .nim-topics>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--soft);border-bottom:1px solid var(--soft)} .nim-topics>summary::-webkit-details-marker{display:none} .nim-topics>summary::after{content:"+"!important;margin-left:auto;font-size:18px;line-height:1} .nim-topics[open]>summary::after{content:"\2212"!important} .nim-topics .opt{text-transform:none;letter-spacing:0;font-size:12px;color:var(--muted)} .nim-topics .chks{border:0;margin:12px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 16px} .nim-topics .chk{display:flex;gap:10px;align-items:center;font-size:14px;cursor:pointer} .nim-topics .chk input{width:18px;height:18px;accent-color:var(--fg);margin:0} .nim-go{align-self:stretch;justify-content:center} .nim-form .fine{margin:0;font-size:12px;line-height:1.5;color:var(--muted)} .nim-more{align-self:flex-start;margin-top:4px} .nim-form.sent .fields,.nim-form.sent .nim-topics,.nim-form.sent .nim-go,.nim-form.sent .fine{display:none} .nim-form .toast{margin:0;font-size:18px;line-height:1.4;font-weight:300} .nim-form.sent .toast{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em;outline:0} @media (max-width:520px){.nim-form .fields{grid-template-columns:1fr}.nim-topics .chks{grid-template-columns:1fr}} /* the calls to action that replaced the inline forms */ .fs-cta{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap} .fs-cta .fine{margin:0;opacity:.8} .fsub-cta{display:flex;flex-direction:column;gap:18px} .fsub-note{margin:0;font-size:15px;line-height:1.55;color:var(--fmu,rgba(242,240,236,.75));max-width:40ch} .fsub-cta .fine{margin:0} .ni-cta,.nip-cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:8px} .ni-cta .fine,.nip-cta .fine{margin:0;max-width:40ch} /* ============ Forefield, quieter ============ */ /* the soft call to action used everywhere */ .ni-go{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:inherit;padding:10px 0;border-bottom:1px solid currentColor;line-height:1.2;transition:gap .25s ease,color .2s ease} .ni-go .ni-arr{display:inline-block;transition:transform .25s ease} .ni-go:hover,.ni-go:focus-visible{gap:14px;color:var(--red)} .ni-go:hover .ni-arr,.ni-go:focus-visible .ni-arr{transform:translateX(2px)} @media (prefers-reduced-motion:reduce){.ni-go,.ni-go .ni-arr{transition:none}} /* footer: one line inside the dark footer, no colored slab */ .nirow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 28px;padding:0 0 clamp(28px,3vw,40px);margin-bottom:clamp(28px,3vw,40px);border-bottom:1px solid var(--frule);color:var(--ffg)} .nirow-eye{display:inline-flex;align-items:center;gap:8px;white-space:nowrap} .nirow-eye a{color:inherit} .nirow .dot{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red)} .nirow-txt{margin:0;font-size:15px;line-height:1.5;color:var(--fmu);max-width:72ch} .nirow-txt b{font-weight:400;color:var(--ffg)} .nirow .ni-go{color:var(--ffg);white-space:nowrap} .nirow .ni-go:hover,.nirow .ni-go:focus-visible{color:#FF5A3A} @media (max-width:860px){.nirow{grid-template-columns:1fr;align-items:start}.nirow .ni-go{justify-self:start}} /* homepage and Forefield page: the panel moves from red to the quiet stone */ section.ni .side{background:var(--stone)!important;color:var(--fg)!important} section.ni .side .cap,section.ni .side p,section.ni .side .headline,section.ni .side .fine,section.ni .side .fine a{color:var(--fg)!important} section.ni .side p:not(.fine){color:var(--muted)!important} section.ni .dot,section.ni .dot::after{background:var(--red)!important} section.ni .side .ni-go{color:var(--fg)} section.ni .side .ni-go:hover,section.ni .side .ni-go:focus-visible{color:var(--red)} .ni-cta,.nip-cta{gap:10px} .ni-cta .fine,.nip-cta .fine{color:var(--muted)!important} /* modal inputs: a blue, yellow, red line draws left to right under the field you are in */ .nim-form .field input{background-image:linear-gradient(90deg,var(--blue) 0 33.34%,var(--yellow) 33.34% 66.67%,var(--red) 66.67% 100%);background-repeat:no-repeat;background-position:0 100%;background-size:0% 2px;transition:background-size .55s cubic-bezier(.3,.6,.2,1),border-color .2s ease} .nim-form .field input:focus{background-size:100% 2px;border-bottom-color:transparent;outline:none} .nim-form .field input:focus-visible{outline:none} @media (prefers-reduced-motion:reduce){.nim-form .field input{transition:none}} /* backup sign-up page and thank-you page */ .subp{padding:clamp(48px,8vw,120px) var(--g) clamp(64px,9vw,140px)} .subp-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,520px);gap:clamp(32px,6vw,96px);align-items:start;max-width:1240px} .subp-one{display:flex;flex-direction:column;gap:16px;max-width:640px} .subp-copy{display:flex;flex-direction:column;gap:16px;padding-top:clamp(0px,2vw,24px)} .subp-h{margin:0;font-weight:300;font-size:clamp(44px,6vw,88px);line-height:.98;letter-spacing:-.045em} .subp-card{background:var(--bg);border:1px solid var(--soft);box-shadow:0 18px 50px rgba(0,0,0,.06)} .subp-card .tri{margin:0} .subp-form{padding:clamp(22px,3vw,36px)} .subp-links{display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap;margin-top:8px} @media (max-width:860px){.subp-in{grid-template-columns:1fr}} .subp-copy .u,.subp-links .u{align-self:flex-start} /* the tagline: Cormorant italic, like the wordmark, and always quiet */ .tagline,.ftag{font-family:var(--serif,'Cormorant',serif);font-style:italic;font-weight:300;letter-spacing:0;text-transform:none;line-height:1.2;margin:0} .tagline{font-size:clamp(22px,2vw,28px);opacity:.9} .ftag{font-size:clamp(20px,1.8vw,26px);color:var(--fmu);margin:-8px 0 clamp(28px,3vw,40px);text-align:right} @media (max-width:700px){.ftag{text-align:left;margin-top:4px}} .intro.center{grid-template-columns:1fr;justify-items:center}