:root{ --ink:#08090A; --ink-soft:#15161A; --paper:#F6F4EF; --paper-soft:#ECE9E1; --flash:#E7A33C; --flash-soft:#F4C978; --on-dark:#F6F4EF; --on-dark-mute:#8C8C86; --on-light:#0E0E0D; --on-light-mute:#6B6A63; --line-dark:rgba(246,244,239,0.14); --line-light:rgba(14,14,13,0.14); --disp:'Big Shoulders Display', sans-serif; --text:'Big Shoulders Text', sans-serif; --mono:'IBM Plex Mono', monospace; --pad: clamp(20px, 5vw, 64px); } *{box-sizing:border-box;} html{scroll-behavior:smooth;scroll-padding-top:100px;overflow-x:hidden;max-width:100%;} body{ margin:0; background:var(--paper); color:var(--on-light); font-family:var(--text); font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden; max-width:100%; width:100%; } img,video{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} ::selection{background:var(--flash);color:var(--ink);} :focus-visible{ outline:3px solid var(--flash); outline-offset:3px; } /* grain texture, used sparingly on dark sections */ .grain{ position:absolute; inset:0; pointer-events:none; opacity:0.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- Type scale ---------- */ .eyebrow{ font-family:var(--mono); font-weight:600; font-size:13px; letter-spacing:0.12em; text-transform:uppercase; } h1,h2,h3{ font-family:var(--disp); font-weight:900; text-transform:uppercase; letter-spacing:0.01em; margin:0; line-height:0.96; } p{margin:0;line-height:1.5;} .container{max-width:1280px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);} section{position:relative;padding:clamp(72px,12vw,140px) 0;} .on-dark{background:var(--ink);color:var(--on-dark);} .on-light{background:var(--paper);color:var(--on-light);} /* ---------- Header ---------- */ header{ position:fixed;top:0;left:0;right:0;z-index:50; display:flex;align-items:center;justify-content:space-between; padding:18px var(--pad); background:rgba(8,9,10,0.72); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-dark); } .wordmark{ font-family:var(--disp);font-weight:900;color:var(--on-dark); font-size:22px;letter-spacing:0.14em; display:inline-flex;align-items:center;line-height:0; } .wordmark-logo{height:38px;width:38px;display:block;object-fit:contain;} nav{display:flex;gap:28px;align-items:center;} .nav-links{display:flex;align-items:center;gap:36px;} nav a{ font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase; color:var(--on-dark-mute);transition:color 0.2s; white-space:nowrap; } nav a:hover{color:var(--on-dark);} .lang-switch{border:1px solid var(--line-dark);border-radius:999px;padding:5px 11px;line-height:1;} .lang-switch:hover{border-color:var(--on-dark-mute);color:var(--on-dark);} .foot-legal-links .lang-switch{border:0;padding:0;text-transform:uppercase;} .btn{ display:inline-flex;align-items:center;gap:8px; font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase; padding:11px 20px;border-radius:2px;border:1px solid currentColor; transition:background 0.2s,color 0.2s,transform 0.2s; cursor:pointer; } .btn-flash{background:var(--flash);color:var(--ink);border-color:var(--flash);} .btn-flash:hover{background:var(--flash-soft);transform:translateY(-1px);} .btn-ghost-dark{color:var(--on-dark);} .btn-ghost-dark:hover{background:var(--on-dark);color:var(--ink);} .btn-ghost-light{color:var(--on-light);} .btn-ghost-light:hover{background:var(--on-light);color:var(--paper);} .nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; background:transparent; border:none; cursor:pointer; padding:0; } .nav-toggle-bar{ display:block; width:22px; height:2px; background:var(--on-dark); transition:transform .25s ease, opacity .25s ease; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ opacity:0; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } .nav-toggle:focus-visible{ outline:2px solid var(--on-dark); outline-offset:3px; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:2px solid var(--flash); outline-offset:2px; } /* ---------- Hero ---------- */ .hero{ min-height:100vh;display:flex;flex-direction:column;justify-content:center; background:var(--ink);color:var(--on-dark);overflow:hidden;position:relative; } /* ---------- scroll-expand video intro ---------- */ .hero-expand{ position:relative;background:var(--ink);overflow:hidden; height:100dvh; } .expand-stage{ position:relative;width:100%;height:100%; display:flex;flex-direction:column;align-items:center;justify-content:center; } .expand-media{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:300px;height:400px;max-width:95vw;max-height:85vh; border-radius:14px;overflow:hidden;background:#000; box-shadow:0 0 60px rgba(0,0,0,0.5); will-change:width,height; } .expand-media video{width:100%;height:100%;object-fit:cover;display:block;} .expand-tint{position:absolute;inset:0;background:rgba(0,0,0,0.45);} .expand-title-row{ position:absolute;left:0;right:0;bottom:8%;z-index:2; display:flex;justify-content:center;gap:18px;flex-wrap:wrap;padding:0 18px; } .expand-word{ font-family:var(--disp);font-weight:800;font-size:clamp(13px,2.1vw,21px); text-transform:uppercase;letter-spacing:0.02em;color:var(--on-dark);white-space:nowrap; will-change:transform; } .expand-hint{ position:absolute;bottom:6%;left:50%;transform:translateX(-50%); font-family:var(--mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase; color:var(--on-dark-mute);z-index:2;transition:opacity 0.2s; } @media (max-width:880px){ .expand-word{font-size:13px;} } .flash-overlay{ position:fixed;inset:0;background:#fff;z-index:999; opacity:1;pointer-events:none; } .flash-overlay.fire{animation:flashfire 900ms ease-out forwards;} @keyframes flashfire{ 0%{opacity:1;} 8%{opacity:1;} 20%{opacity:0;} 100%{opacity:0;} } .hero-inner{padding-top:96px;padding-bottom:clamp(90px,14vh,160px);position:relative;z-index:2;} .hero .eyebrow{color:var(--flash);margin-bottom:18px;display:block;} .hero h1{font-size:clamp(2.4rem,8.4vw,6.4rem);max-width:1100px;} .hero h1 .accent{color:var(--flash);} .hero-sub{ margin-top:28px;max-width:560px;font-size:clamp(16px,1.6vw,19px); color:var(--on-dark-mute); } .hero-cta{margin-top:44px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;} .hero-cta .link-down{font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--on-dark-mute);} .hero-stats{ margin-top:88px;display:grid;grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-dark);padding-top:28px;gap:24px; } .hero-stats div span{display:block;font-family:var(--disp);font-weight:900;font-size:clamp(28px,4vw,44px);color:var(--flash);} .hero-stats div p{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--on-dark-mute);margin-top:6px;} /* ---------- infinite ribbon — crossed overlay ---------- */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} .ribbon-overlay{ position:absolute;left:50%;bottom:0.5%;transform:translateX(-50%); width:100%;height:110px;z-index:1;pointer-events:none; overflow:hidden;max-width:100vw; } .ribbon-strip{ position:absolute;top:50%;left:50%;width:150%; transform:translate(-50%,-50%) rotate(var(--angle)); overflow:hidden;background:var(--flash);color:var(--ink); padding:13px 0;box-shadow:0 14px 30px rgba(0,0,0,0.5); } .ribbon-strip.s1{--angle:-7deg;z-index:2;} .ribbon-strip.s2{--angle:7deg;z-index:1;} .ribbon-track{display:flex;width:max-content;white-space:nowrap;animation:ribbon-scroll 26s linear infinite;} .ribbon-track.reverse{animation-name:ribbon-scroll-reverse;} .ribbon-item{ font-family:var(--disp);font-weight:800;font-size:clamp(13px,1.7vw,19px); text-transform:uppercase;letter-spacing:0.03em;margin-right:26px;display:inline-block; } @keyframes ribbon-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} @keyframes ribbon-scroll-reverse{from{transform:translateX(-50%);}to{transform:translateX(0);}} @media (prefers-reduced-motion: reduce){ .ribbon-track{animation-duration:1ms !important;animation-iteration-count:1 !important;} } @media (max-width:880px){ .ribbon-overlay{height:90px;bottom:0.5%;} .ribbon-strip{width:200%;} } /* ---------- reveal on scroll ---------- */ .reveal{opacity:0;transform:translateY(18px);transition:opacity 0.7s ease,transform 0.7s ease;} .reveal.is-visible{opacity:1;transform:translateY(0);} /* ---------- Section heads ---------- */ .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:56px;flex-wrap:wrap;} .sec-head .eyebrow{margin-bottom:14px;display:block;} .on-dark .eyebrow{color:var(--flash);} .on-light .eyebrow{color:#A6730F;} .sec-head h1,.sec-head h2{font-size:clamp(2rem,5vw,3.6rem);max-width:820px;} .sec-note{max-width:340px;font-size:14px;} .on-dark .sec-note{color:var(--on-dark-mute);} .on-light .sec-note{color:var(--on-light-mute);} /* ---------- 001 Problem ---------- */ .problem-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:start;} .problem-list{display:flex;flex-direction:column;gap:0;} .problem-list .row{ display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--line-light); align-items:baseline; } .problem-list .row span.n{font-family:var(--mono);color:#A6730F;font-size:13px;} .problem-list .row p{font-size:clamp(17px,2vw,21px);font-weight:500;} [data-stagger] > *{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;} [data-stagger] > *.is-visible{opacity:1;transform:translateY(0);} @media (prefers-reduced-motion: reduce){ [data-stagger] > *{opacity:1;transform:none;transition:none;} } .problem-callout{ background:var(--ink);color:var(--on-dark);padding:40px;border-radius:2px; } .problem-callout h3{font-size:clamp(1.7rem,3.4vw,2.4rem);color:var(--on-dark);} .problem-callout p{margin-top:16px;color:var(--on-dark-mute);font-size:15px;} /* ---------- 002 Work — sticky switcher ---------- */ .switcher{display:grid;grid-template-columns:340px 1fr;gap:48px;align-items:start;} .switcher-list{display:flex;flex-direction:column;gap:2px;position:sticky;top:100px;} .switch-item{ display:flex;gap:14px;align-items:flex-start;text-align:left;padding:18px 18px; border:none;border-left:2px solid var(--line-dark);background:transparent;cursor:pointer; transition:background 0.2s,border-color 0.2s;width:100%; } .switch-item:hover{background:rgba(255,255,255,0.03);} .switch-item .idx{font-family:var(--mono);font-size:12px;color:var(--on-dark-mute);padding-top:2px;} .switch-item .meta{display:flex;flex-direction:column;gap:4px;} .switch-item .tag{font-family:var(--mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--on-dark-mute);transition:color 0.2s;} .switch-item .desc{font-size:13px;color:var(--on-dark-mute);opacity:0;max-height:0;overflow:hidden;transition:opacity 0.2s;} .switch-item.active{border-left-color:var(--flash);background:rgba(231,163,60,0.06);} .switch-item.active .tag{color:var(--flash);} .switch-item.active .desc{opacity:1;max-height:40px;} .switcher-stage{min-height:360px;} .stage-pane{display:none;} .stage-pane.active{display:block;animation:stagein 0.45s ease;} @keyframes stagein{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}} .stage-pane h3{font-size:clamp(1.6rem,2.8vw,2.2rem);color:var(--on-dark);} .stage-pane p{margin-top:14px;color:var(--on-dark-mute);font-size:15px;max-width:480px;} .stage-media{display:flex;gap:14px;margin-top:28px;} .stage-img,.stage-vid{position:relative;border-radius:2px;overflow:hidden;background:#000;flex:1;min-width:0;} .stage-img{aspect-ratio:4/5;max-width:512px;} .stage-img.wide{aspect-ratio:16/10;flex:1.8;max-width:1024px;} .stage-vid{aspect-ratio:9/16;flex:0.65;max-width:360px;} .stage-img img,.stage-vid video{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s ease;} .stage-img::after,.stage-vid::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;} .stage-img:hover::after,.stage-vid:hover::after{animation:snap 380ms ease-out;} .stage-img:hover img,.stage-vid:hover video{transform:scale(1.04);} @keyframes snap{0%{opacity:0.85;}100%{opacity:0;}} .media-cap{ display:block;margin-top:14px;font-family:var(--mono);font-size:11.5px;letter-spacing:0.03em; color:var(--on-dark-mute);font-style:italic; } /* ---------- scroll progress ---------- */ .progress-bar{position:fixed;top:0;left:0;height:3px;background:var(--flash);width:0%;z-index:60;transition:width 0.08s linear;} /* ---------- 003 Numbers ---------- */ .numbers-wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;} table.cost{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:14px;} table.cost th{text-align:left;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--on-light-mute);padding-bottom:14px;border-bottom:1px solid var(--line-light);} table.cost td{padding:18px 0;border-bottom:1px solid var(--line-light);vertical-align:top;} table.cost tr.creo td{color:#A6730F;font-weight:600;} .gain-block{display:flex;flex-direction:column;justify-content:center;gap:28px;} .gain-stat span{font-family:var(--disp);font-weight:900;font-size:clamp(3.2rem,9vw,6.2rem);color:var(--ink);display:block;line-height:0.9;} .gain-stat p{font-family:var(--mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--on-light-mute);margin-top:10px;} /* ---------- 004 Offers ---------- */ .offers-tabs{display:flex;gap:10px;margin-bottom:16px;} .price-disclaimer{font-family:var(--mono);font-size:11px;letter-spacing:0.04em;color:var(--on-dark-mute);margin:0 0 24px;} .tab-btn{ font-family:var(--mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase; padding:10px 18px;border:1px solid var(--line-dark);background:transparent;color:var(--on-dark-mute); cursor:pointer;border-radius:2px;transition:all 0.2s; } .tab-btn.active{background:var(--on-dark);color:var(--ink);border-color:var(--on-dark);} .pane{display:none;} .pane.active{display:block;} .pane-note{max-width:460px;font-size:14px;color:var(--on-dark-mute);margin:0 0 28px;} .menu-list{display:flex;flex-direction:column;} .menu-row{ display:flex;justify-content:space-between;align-items:baseline;gap:20px; padding:20px 0;border-bottom:1px solid var(--line-dark); } .menu-row .name{font-size:clamp(1.1rem,2vw,1.4rem);font-family:var(--disp);font-weight:800;text-transform:uppercase;color:var(--on-dark);} .menu-row .desc{color:var(--on-dark-mute);font-size:14px;margin-top:4px;max-width:520px;} .menu-row .price{font-family:var(--mono);font-size:18px;color:var(--flash);white-space:nowrap;} .retainer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .retainer-card{ border:1px solid var(--line-dark);border-radius:2px;padding:32px;display:flex;flex-direction:column; position:relative; } .retainer-card.feat{border-color:var(--flash);background:rgba(231,163,60,0.06);} .retainer-card .tier{font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--on-dark-mute);} .retainer-card .price{font-family:var(--disp);font-weight:900;font-size:clamp(1.8rem,3vw,2.4rem);color:var(--on-dark);margin-top:10px;} .retainer-card .price span{font-family:var(--mono);font-size:13px;color:var(--on-dark-mute);font-weight:400;} .retainer-card .price-from{font-family:var(--mono);font-size:13px;color:var(--on-dark-mute);margin-top:6px;} .retainer-card ul{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;flex:1;} .retainer-card li{font-size:14px;color:var(--on-dark-mute);padding-left:16px;position:relative;} .retainer-card li::before{content:"—";position:absolute;left:0;color:var(--flash);} .retainer-card .for{margin-top:24px;font-size:13px;color:var(--on-dark);font-style:italic;} /* ---------- Pricing card glow (pointer-tracked spotlight, locked to brand amber) ---------- */ .retainer-card[data-glow]{ --base:36; --spread:10; --radius:2; --border-size:1px; --size:260; --spotlight-size:calc(var(--size) * 1px); --hue:calc(var(--base) + (var(--xp,0.5) * var(--spread))); overflow:hidden; background-image:radial-gradient( var(--spotlight-size) var(--spotlight-size) at calc(var(--x,-999) * 1px) calc(var(--y,-999) * 1px), hsl(var(--hue) 70% 55% / 0.10), transparent 70% ); background-attachment:fixed;background-repeat:no-repeat; transition:border-color 0.3s ease; } .retainer-card[data-glow]::before, .retainer-card[data-glow]::after{ pointer-events:none;content:"";position:absolute; inset:calc(var(--border-size) * -1); border:var(--border-size) solid transparent; border-radius:inherit; background-attachment:fixed;background-repeat:no-repeat; mask:linear-gradient(transparent,transparent),linear-gradient(#fff,#fff); mask-clip:padding-box,border-box; -webkit-mask-composite:source-in;mask-composite:intersect; } .retainer-card[data-glow]::before{ background-image:radial-gradient( calc(var(--spotlight-size) * 0.8) calc(var(--spotlight-size) * 0.8) at calc(var(--x,-999) * 1px) calc(var(--y,-999) * 1px), hsl(var(--hue) 85% 62% / 0.95), transparent 100% ); } .retainer-card[data-glow]::after{ background-image:radial-gradient( calc(var(--spotlight-size) * 0.42) calc(var(--spotlight-size) * 0.42) at calc(var(--x,-999) * 1px) calc(var(--y,-999) * 1px), hsl(0 0% 100% / 0.5), transparent 100% ); } .glow-inner{ position:absolute;inset:0;border-radius:inherit;pointer-events:none; background-image:radial-gradient( calc(var(--spotlight-size, 260px) * 1.1) calc(var(--spotlight-size, 260px) * 1.1) at calc(var(--x,-999) * 1px) calc(var(--y,-999) * 1px), hsl(var(--hue, 36) 75% 58% / 0.16), transparent 72% ); background-attachment:fixed;background-repeat:no-repeat; } @media (hover:none){ .glow-inner,.retainer-card[data-glow]::before,.retainer-card[data-glow]::after{display:none;} } /* ---------- 005 Results ---------- */ .results-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-light);border:1px solid var(--line-light);margin-top:8px;} .result-card{background:var(--paper);padding:32px;display:flex;flex-direction:column;gap:18px;} .result-brand img{height:26px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:0.75;} .result-line{font-size:16px;line-height:1.55;color:var(--on-light);margin:0;} .result-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:auto;} .result-tag{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink);background:var(--flash-soft);padding:5px 10px;border-radius:999px;} .result-service{font-family:var(--mono);font-size:11px;letter-spacing:0.04em;color:var(--on-light-mute);} .results-stats{ display:flex;gap:48px;justify-content:center;flex-wrap:wrap; margin-top:56px;padding:36px clamp(20px,5vw,64px);border-radius:4px; background:var(--flash); } .rstat{text-align:center;} .rstat span{display:block;font-family:var(--disp);font-weight:900;font-size:clamp(1.8rem,4vw,2.6rem);color:var(--ink);} .rstat span.rstat-infinite{font-size:clamp(2.2rem,4.6vw,3.1rem);line-height:1;} .rstat p{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:rgba(8,9,10,0.62);margin-top:6px;} @media (max-width:880px){ .results-grid{grid-template-columns:1fr;} .results-stats{gap:32px;} } /* ---------- 006 Start ---------- */ .start-wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:end;} .start-wrap h2{font-size:clamp(2.2rem,6vw,4.4rem);} .capacity-note{ font-family:var(--disp);font-weight:800;text-transform:uppercase; font-size:clamp(1.6rem,3.4vw,2.6rem);letter-spacing:0.01em; color:var(--flash);text-align:center;margin-top:48px; } .start-form{display:flex;flex-direction:column;gap:14px;} .start-form[hidden]{display:none;} .start-form label{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--on-light-mute);} .start-form input,.start-form select{ font-family:var(--text);font-size:16px;padding:14px 0;background:transparent; border:none;border-bottom:1px solid var(--line-light);color:var(--on-light); } .start-form input:focus,.start-form select:focus{border-bottom-color:var(--ink);} .start-form .submit{margin-top:8px;align-self:flex-start;} /* ---------- Concept Campaign ---------- */ #concept{overflow:hidden;} #concept .container{position:relative;z-index:2;} .concept-wrap{max-width:820px;} .concept-badge{ display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:0.08em; text-transform:uppercase;color:var(--ink);background:var(--flash);padding:6px 12px;border-radius:2px;margin-bottom:22px; } #concept h1,#concept h2{font-size:clamp(2rem,5vw,3.6rem);margin-bottom:32px;} .concept-media{ position:relative;width:100%;margin:0 0 36px;border-radius:6px;overflow:hidden; background:#000;box-shadow:0 20px 60px rgba(0,0,0,0.4); } .concept-media video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;} .concept-body p{color:var(--on-dark-mute);font-size:16px;line-height:1.65;margin-top:18px;max-width:720px;} .concept-body p:first-child{margin-top:0;} .concept-body h2{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:0.04em;font-size:15px;line-height:1.2;color:var(--on-dark);margin:32px 0 0;} .concept-disclosure{ margin-top:28px !important;padding-top:24px;border-top:1px solid var(--line-dark); font-size:13.5px !important;font-style:italic;color:var(--on-dark-mute); } @media (max-width:720px){ .concept-media{margin-bottom:28px;border-radius:4px;} } /* ---------- Who this is for / founder / founding partners ---------- */ .archetype-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} @media (max-width:880px){.archetype-grid{grid-template-columns:1fr;}} .archetype-card{border:1px solid var(--line-dark);border-radius:2px;padding:24px;} .archetype-title{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:15px;color:var(--on-dark);margin-bottom:10px;letter-spacing:0.01em;} .archetype-card p:not(.archetype-title){color:var(--on-dark-mute);font-size:14px;line-height:1.55;} .founder-block,.founding-block{max-width:720px;margin-top:64px;padding-top:40px;border-top:1px solid var(--line-dark);} .founder-block{max-width:960px;} .founder-block h3,.founding-block h3{font-size:clamp(1.4rem,2.6vw,2rem);margin:14px 0 18px;color:var(--on-dark);} .founder-block p,.founding-block p{color:var(--on-dark-mute);font-size:15px;line-height:1.6;margin-top:12px;} .founder-block p:first-of-type{margin-top:0;} .founder-block a{color:var(--flash);border-bottom:1px solid currentColor;} .founder-block a:hover{color:var(--flash-soft);} .founder-layout{display:grid;grid-template-columns:1fr 220px;gap:40px;align-items:start;} .founder-photo{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:4px;order:2;} @media (max-width:720px){ .founder-block .eyebrow{display:block;margin-bottom:28px;} .founder-layout{grid-template-columns:1fr;gap:32px;} .founder-photo{order:-1;max-width:180px;margin:0 auto;} } /* ---------- FAQ ---------- */ .faq-list{display:flex;flex-direction:column;gap:0;max-width:820px;} .faq-item{border-bottom:1px solid var(--line-light);} .faq-item summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;-webkit-tap-highlight-color:transparent;} .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary::marker{content:"";} .faq-item summary:focus-visible{outline:2px solid var(--on-light);outline-offset:4px;} .faq-q{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:0.01em;font-size:clamp(1rem,1.7vw,1.2rem);color:var(--on-light);} .faq-icon{flex:none;font-family:var(--mono);font-size:1.5rem;line-height:1;color:var(--on-light-mute);transition:transform .2s ease;} .faq-item[open] .faq-icon{transform:rotate(45deg);} .faq-item[open] summary{padding-bottom:12px;} .faq-answer{margin:0 0 24px;font-size:15px;line-height:1.6;color:var(--on-light-mute);max-width:680px;} @media (prefers-reduced-motion:reduce){.faq-icon{transition:none;}} .faq-home-note a{color:var(--flash);border-bottom:1px solid currentColor;font-weight:600;} /* ---------- brief wizard (#start form, on-light) ---------- */ .start-head{margin-bottom:48px;max-width:640px;} .brief-wizard{ --brief-fg: var(--on-light); --brief-fg-dim: var(--on-light-mute); --brief-fg-faint: rgba(14,14,13,0.4); --brief-border: var(--line-light); --brief-border-strong: rgba(14,14,13,0.5); --brief-error: #B3261E; color: var(--brief-fg); } .brief-proof{margin-bottom:28px;} .trusted-by{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;background:var(--ink);border-radius:4px;padding:18px 0 18px 24px;overflow:hidden;} .trusted-by-label{font-family:var(--mono);font-weight:600;text-transform:uppercase;letter-spacing:0.1em;font-size:11px;color:var(--on-dark-mute);flex:none;} .trusted-by-viewport{ flex:1;min-width:0;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%); } .trusted-by-track{ list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:44px;width:max-content; animation:trusted-by-scroll 22s linear infinite; } .trusted-by:hover .trusted-by-track{animation-play-state:paused;} .trusted-by-track li{display:flex;align-items:center;flex:none;} .trusted-by-track a{display:block;line-height:0;} .trusted-by-track img{ height:22px;width:auto;max-width:110px; filter:brightness(0) invert(1); opacity:0.6; transition:opacity 0.2s ease; } .trusted-by-track a:hover img,.trusted-by-track a:focus-visible img{opacity:1;} @keyframes trusted-by-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} } @media (max-width:560px){ .trusted-by{padding:16px 0 16px 18px;gap:12px 0;} .trusted-by-track{gap:30px;} .trusted-by-track img{height:18px;max-width:88px;} } @media (prefers-reduced-motion:reduce){ .trusted-by-track{animation:none;} .trusted-by-viewport{overflow-x:auto;} } .brief-wizard-body{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:48px;align-items:start;} @media (max-width:720px){.brief-wizard-body{grid-template-columns:1fr;gap:24px;}} .brief-dm{border:1px solid var(--brief-border);border-radius:2px;padding:22px;position:sticky;top:120px;} @media (max-width:720px){.brief-dm{position:static;order:-1;}} .brief-dm-label{margin:0 0 8px;font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--brief-fg-dim);} .brief-dm-link{color:var(--brief-fg);text-decoration:none;border-bottom:1px solid var(--brief-border-strong);font-weight:600;} .brief-dm-link:hover,.brief-dm-link:focus-visible{border-bottom-color:var(--brief-fg);} .brief-noscript{font-size:13px;color:var(--brief-fg-dim);margin-bottom:16px;} .wizard-meta{display:flex;align-items:center;gap:10px;margin-bottom:26px;font-family:var(--mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;} .wizard-num{color:var(--brief-fg);font-weight:600;} .wizard-total{color:var(--brief-fg-faint);} .wizard-dots{display:flex;gap:6px;margin-left:6px;} .wizard-dots span{width:6px;height:6px;border-radius:50%;background:var(--brief-border);transition:background 0.2s ease;} .wizard-dots span.is-done,.wizard-dots span.is-current{background:var(--flash);} .brief-form{max-width:560px;} .step{border:0;margin:0;padding:0;} .step[hidden]{display:none;} .step.is-active{animation:brief-step-in 0.32s ease both;} @keyframes brief-step-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}} @media (prefers-reduced-motion: reduce){.step.is-active{animation:none;}} .step-question{display:block;font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:0.01em;font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.05;margin:0 0 20px;} legend.step-question{padding:0;} .step input[type="text"],.step input[type="email"],.step select,.step textarea{ width:100%;background:transparent;color:var(--brief-fg);border:none;border-bottom:1px solid var(--brief-border); padding:12px 2px;font-family:var(--text);font-size:16px;border-radius:0;transition:border-color 0.15s ease; } .step select{appearance:none;-webkit-appearance:none;} .step input:focus,.step select:focus,.step textarea:focus{outline:none;border-bottom-color:var(--brief-fg);} .step textarea{resize:vertical;min-height:90px;} .step.has-error input,.step.has-error select,.step.has-error textarea{border-bottom-color:var(--brief-error);} .field-error{min-height:18px;margin:8px 0 0;font-size:13px;color:var(--brief-error);} .option-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px;} @media (max-width:480px){.option-cards{grid-template-columns:1fr;}} .option-card{position:relative;display:flex;flex-direction:column;gap:4px;border:1px solid var(--brief-border);border-radius:2px;padding:16px;cursor:pointer;transition:border-color 0.15s ease,background 0.15s ease;} .option-card input{position:absolute;opacity:0;pointer-events:none;} .option-card-title{font-weight:700;font-size:15px;} .option-card-sub{font-family:var(--mono);font-size:11px;letter-spacing:0.03em;color:var(--brief-fg-dim);} .option-card:hover{border-color:var(--brief-border-strong);} .option-card:has(input:checked){border-color:var(--flash);background:rgba(231,163,60,0.08);} .option-card:has(input:focus-visible){outline:2px solid var(--flash);outline-offset:2px;} .step-actions{display:flex;gap:12px;margin-top:26px;} .step-actions .step-back{order:-1;} .brief-form-single .step-question{margin-bottom:28px;} .field-row{margin-bottom:22px;} .field-row-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:22px;} @media (max-width:480px){.field-row-pair{grid-template-columns:1fr;gap:22px;}} .field-row-pair .field-row{margin-bottom:0;} fieldset.field-row{border:0;margin:0 0 22px;padding:0;} .field-label{display:block;font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--brief-fg-dim);margin-bottom:8px;} .field-optional{font-weight:400;text-transform:none;letter-spacing:0;color:var(--brief-fg-faint);} .brief-form-single input[type="text"],.brief-form-single input[type="email"]{ width:100%;background:transparent;color:var(--brief-fg);border:none;border-bottom:1px solid var(--brief-border); padding:12px 2px;font-family:var(--text);font-size:16px;border-radius:0;transition:border-color 0.15s ease; } .brief-form-single input:focus{outline:none;border-bottom-color:var(--brief-fg);} .brief-form-single .field-row.has-error input{border-bottom-color:var(--brief-error);} .service-checks{display:flex;flex-wrap:wrap;gap:10px;} .service-check{position:relative;display:inline-flex;align-items:center;border:1px solid var(--brief-border);border-radius:999px;padding:9px 16px;cursor:pointer;transition:border-color 0.15s ease,background 0.15s ease;} .service-check input{position:absolute;opacity:0;pointer-events:none;} .service-check span{font-size:14px;font-weight:600;} .service-check:hover{border-color:var(--brief-border-strong);} .service-check:has(input:checked){border-color:var(--flash);background:rgba(231,163,60,0.08);} .service-check:has(input:checked) span::before{content:"✓ ";color:var(--flash);} .service-check:has(input:focus-visible){outline:2px solid var(--flash);outline-offset:2px;} .review-summary{margin:0 0 4px;} .review-summary div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--brief-border);font-size:14px;} .review-summary dt{color:var(--brief-fg-dim);} .review-summary dd{margin:0;text-align:right;font-weight:600;} .form-status{margin-top:14px;font-size:14px;color:var(--brief-fg-dim);} .brief-thanks .step-question{margin-bottom:12px;} .brief-thanks p:not(.step-question){color:var(--brief-fg-dim);max-width:480px;line-height:1.5;font-size:15px;} .calendly-embed-wrap{margin-top:20px;border-radius:4px;overflow:hidden;border:1px solid var(--brief-border);} .calendly-inline{min-width:280px;height:650px;} .calendly-fallback{margin-top:12px !important;font-size:13px !important;} .calendly-fallback a{color:var(--flash);text-decoration:underline;text-underline-offset:3px;} /* ---------- 000 The Eye ---------- */ .eye-wrap{display:grid;grid-template-columns:0.85fr 1.15fr;gap:64px;align-items:start;} .eye-copy p{margin-top:18px;color:var(--on-dark-mute);font-size:15px;max-width:380px;} .eye-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;} .eye-item{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:#000;} .eye-item img{width:100%;height:100%;object-fit:cover;} .eye-cat{margin-top:28px;display:flex;gap:24px;} .eye-cat span{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--on-dark-mute);} .eye-cat span::before{content:"— ";color:var(--flash);} /* ---------- background eyes (000 section) ---------- */ .eyes-bg{ position:absolute;left:var(--pad);bottom:36px;display:flex;gap:22px; opacity:0.9;pointer-events:none; } .goo-eye{ position:relative;width:84px;height:84px;border-radius:50%; background:var(--flash);border:4px solid var(--ink); display:flex;align-items:center;justify-content:center;overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,0.4); } .goo-pupil{ position:absolute;width:30px;height:30px;border-radius:50%;background:var(--ink); transition:transform 0.05s linear; } .goo-glint{ position:absolute;right:3px;bottom:3px;width:8px;height:8px;border-radius:50%;background:var(--on-dark); } @media (max-width:880px){ .eyes-bg{ position:static;display:flex;justify-content:center; margin:0 0 28px;opacity:1; } .goo-eye{width:54px;height:54px;} .goo-pupil{width:18px;height:18px;} } /* ---------- Footer ---------- */ footer{background:var(--ink);color:var(--on-dark-mute);padding:48px 0 32px;} .foot-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;border-bottom:1px solid var(--line-dark);padding-bottom:32px;margin-bottom:24px;} .foot-wordmark{font-family:var(--disp);font-weight:900;color:var(--on-dark);font-size:28px;letter-spacing:0.1em;display:inline-flex;align-items:center;line-height:0;} .foot-wordmark-logo{height:44px;width:44px;display:block;object-fit:contain;} .foot-links{display:flex;flex-wrap:wrap;row-gap:12px;gap:24px;font-family:var(--mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;} .foot-links a:hover{color:var(--on-dark);} .foot-bottom{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:0.04em;flex-wrap:wrap;gap:8px;} .foot-legal-links a:hover{color:var(--on-dark);} @media (max-width:880px){ .nav-toggle{ display:flex; } /* R8: header nav is an absolutely-positioned wrapper sitting right under the header, full-width, at z-index:210 — well above the hero and every section below it. It has no visible background of its own (transparent), so when the dropdown is CLOSED it looks like it isn't there. But its child .nav-links is only hidden with visibility+opacity+pointer-events:none — a visibility:hidden element still occupies its box for layout, and critically, pointer-events:none on the CHILD does not stop hit-testing from landing on the PARENT