:root{ --ink:#05122A; --plum:#3B0A3A; --paper:#EBEBEB; --paper-dim:#AFB3BC; --amber:#D97706; --line:rgba(235,235,235,.13); --header-h:4.1rem; --shell:min(1180px, 90vw); --pad-y:clamp(3.25rem, 10vw, 11rem); /* Boundary between two sections that share a background — see the rule below. */ --pad-y-seam:clamp(4.25rem, 7.5vw, 8rem); --e-out:cubic-bezier(.16,1,.3,1); --e-inout:cubic-bezier(.76,0,.24,1); --ease:cubic-bezier(.33,1,.68,1); --dur-fast:150ms; --dur:300ms; --dur-slow:550ms; --f-display:"Anton","Arial Narrow",sans-serif; --f-label:"Bebas Neue","Oswald",sans-serif; --f-body:"Inter","Helvetica Neue",Arial,sans-serif; } *{box-sizing:border-box; margin:0; min-width:0} html{scroll-padding-top:5rem; -webkit-text-size-adjust:100%; scrollbar-width:none; -ms-overflow-style:none} html::-webkit-scrollbar{width:0; height:0; display:none} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:smooth} } /* while a nav jump is gliding, sections appear instantly instead of drawn-out fades */ html.is-jumping .reveal{transition:none !important} html.is-jumping .rw > span{transition:none !important} html,body{overflow-x:clip; max-width:100%} a,button,input,label,summary{-webkit-tap-highlight-color:transparent} /* ---- Lenis smooth scroll (required by the library) --------------------- Without these, Lenis hijacks the wheel while the browser still runs its own native scroll underneath — which is exactly what makes it feel janky. */ html.lenis, html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto !important} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain} .lenis.lenis-stopped{overflow:hidden} .lenis.lenis-smooth iframe{pointer-events:none} /* removes the ~300ms double-tap delay on touch, and keeps the tap highlight ours */ a,button,summary,label,input[type=submit],.btn{touch-action:manipulation} .skip{position:fixed; top:0; left:0; z-index:200; background:var(--amber); color:var(--ink); padding:.85em 1.25em; font-family:var(--f-label); letter-spacing:.11em; text-transform:uppercase; text-decoration:none; transform:translateY(-130%); transition:transform .2s ease} .skip:focus{transform:none; outline:2px solid var(--ink); outline-offset:-4px} body{background:var(--ink); color:var(--paper); font-family:var(--f-body); font-size:clamp(1rem,.5vw + .9rem,1.12rem); line-height:1.7; -webkit-font-smoothing:antialiased} body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(120% 75% at 12% -5%, rgba(59,10,58,.32), transparent 58%), radial-gradient(95% 65% at 92% 105%, rgba(59,10,58,.26), transparent 55%), var(--ink)} /* subtle static film texture over the whole page */ body::after{content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.055; mix-blend-mode:overlay; background-repeat:repeat; background-size:150px 150px; 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='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} img{max-width:100%; height:auto; display:block} a{color:inherit} ::selection{background:var(--amber); color:var(--ink)} a:focus-visible,button:focus-visible,summary:focus-visible, input:focus-visible,textarea:focus-visible,.btn:focus-visible{ outline:3px solid var(--amber); outline-offset:3px} /* press feedback — small, but it's what makes a UI feel responsive rather than flat */ .btn:active{transform:translateY(1px)} h1,h2{font-family:var(--f-display); font-weight:400; text-transform:uppercase; line-height:.94; letter-spacing:.005em; text-wrap:balance} h1{font-size:clamp(2.9rem,8.5vw,6rem)} h2{font-size:clamp(2rem,5vw,3.4rem); margin-bottom:clamp(1.6rem,3.5vw,2.8rem)} h3{font-family:var(--f-label); font-weight:400; text-transform:uppercase; letter-spacing:.06em; font-size:clamp(1.25rem,2vw,1.5rem); line-height:1.15} p{max-width:60ch; text-wrap:pretty} h3{text-wrap:balance} .lead{font-size:clamp(1.1rem,.5vw + 1rem,1.3rem); max-width:52ch; text-wrap:pretty} .shell{width:var(--shell); margin-inline:auto} section{padding-block:var(--pad-y)} /* Where the background changes, two stacked --pad-y read as one deliberate section break. Where two sections share a background there is no visible seam, so the same doubled padding reads as a void — the eye loses the thread on the way down. Collapse those boundaries to a single, tighter gap. Sections that set their own padding by id (#how, #work) keep it: higher specificity. */ section:not(.light) + section:not(.light){padding-top:0} section:not(.light):has(+ section:not(.light)){padding-bottom:var(--pad-y-seam)} .light{position:relative; z-index:2; background:var(--paper); color:var(--ink)} .light p{color:#3a3e46} /* buttons */ .btn{font-family:var(--f-label); letter-spacing:.13em; text-transform:uppercase; font-size:1.08rem; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:.6em; padding:1.1em 2.1em; min-height:52px; border:1.5px solid var(--amber); color:var(--amber); background:transparent; transition:background-color .3s var(--ease),color .3s var(--ease); white-space:nowrap} .btn:hover,.btn:focus-visible{background-color:var(--amber); color:var(--ink); outline:none} .btn--solid{background-color:var(--amber); color:var(--ink)} .btn--solid:hover,.btn--solid:focus-visible{background-color:#985204; color:var(--paper)} .arrowlink{font-family:var(--f-label); letter-spacing:.1em; text-transform:uppercase; font-size:1.05rem; text-decoration:none; padding-bottom:.25em; border-bottom:1.5px solid transparent; transition:border-color .3s var(--ease)} .arrowlink:hover,.arrowlink:focus-visible{border-color:var(--amber); outline:none} /* fixed glass header — light blur + real turbulent refraction, lit edge */ /* NOTE: never put url(#filter) in backdrop-filter. Chrome does not support SVG filter references there and drops the WHOLE declaration, so the bar renders as flat translucent navy and page headings read straight through it. The @supports fallback below cannot catch it either, because Chrome does support plain blur(). */ .site-header{position:sticky; top:0; z-index:40; isolation:isolate; background:rgba(5,18,42,.94); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); border-bottom:1px solid rgba(235,235,235,.22); box-shadow:inset 0 1px 0 rgba(235,235,235,.26), inset 0 -1px 0 rgba(235,235,235,.05), 0 1px 0 rgba(5,18,42,.5), 0 12px 30px -14px rgba(5,18,42,.5)} .site-header .logo,.site-header .nav a{filter:drop-shadow(0 1px 3px rgba(5,18,42,.6))} @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){ .site-header{background:rgba(5,18,42,.94)} } /* The WordPress admin bar is position:fixed at the very top of the viewport. A sticky header at top:0 sticks *underneath* it and gets clipped, so it has to start below it. 32px desktop / 46px on phones — those are core's own admin-bar heights. */ body.admin-bar .site-header{top:32px} @media screen and (max-width:782px){ body.admin-bar .site-header{top:46px} } .site-header__in{position:relative; z-index:1; width:var(--shell); margin-inline:auto; display:flex; justify-content:space-between; align-items:center; min-height:var(--header-h); padding-block:.55rem} .logo{height:26px; width:auto} /* The logo image is 26px tall, so the link around it was a 26px-high target. Grow the hit area to 44px without changing how the logo looks. */ .site-header__in > a:has(> .logo){display:inline-flex; align-items:center; min-height:44px} .nav{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5rem 1.6rem; font-family:var(--f-label); letter-spacing:.11em; text-transform:uppercase; font-size:1rem} .nav a{position:relative; text-decoration:none; opacity:.8; transition:opacity .15s; padding-bottom:.15em} .nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform .38s var(--ease)} .nav a:hover{opacity:1} .nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)} .nav a[aria-current="page"]{opacity:1} /* 44x44 is the smallest comfortable thumb target; the bars stay 22px wide. */ .nav__toggle{display:none; background:none; border:0; padding:.5rem; margin:-.5rem -.5rem -.5rem 0; cursor:pointer; color:var(--paper); position:relative; z-index:62; min-width:44px; min-height:44px; flex-direction:column; align-items:center; justify-content:center} .nav__toggle span{display:block; width:22px; height:2px; background:currentColor; transition:transform .3s var(--e-out),opacity .2s} .nav__toggle span + span{margin-top:5px} .nav__toggle:hover span{background:var(--amber)} .nav__toggle:focus-visible{outline:3px solid var(--amber); outline-offset:2px} body.nav-open .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)} body.nav-open .nav__toggle span:nth-child(2){opacity:0} body.nav-open .nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .nav__scrim{position:fixed; inset:0; z-index:60; background:rgba(5,18,42,.6); opacity:0; visibility:hidden; transition:opacity .3s ease,visibility .3s} @media (max-width:720px){ .nav__toggle{display:flex} .nav{position:fixed; top:0; right:0; z-index:61; width:min(80vw,320px); height:100vh; height:100dvh; flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; align-items:stretch; gap:0; background:var(--ink); border-left:1px solid var(--line); padding:5.2rem 1.6rem 2rem; font-size:1.2rem; transform:translateX(100%); transition:transform .4s var(--e-out); overflow-y:auto} .nav a{padding:1rem 0; border-bottom:1px solid var(--line); opacity:1} .nav a::after{display:none} body.nav-open .nav{transform:none} body.nav-open .nav__scrim{opacity:1; visibility:visible} /* The header is a stacking context (isolation:isolate) at z-index:40, and the slide-in panel lives inside it — so the page-level scrim at z-index:60 was painting over the panel and eating every tap. Lift the whole header above the scrim while the menu is open; the scrim still covers the page behind it. */ body.nav-open .site-header{z-index:70} body.nav-open{overflow:hidden} } /* page transition — a clean navy wipe */ /* page transition — a pane of frosted glass; the page dissolves through it */ .pagex{position:fixed; inset:0; z-index:120; overflow:hidden; pointer-events:none; display:grid; place-items:center; will-change:opacity, transform; background:rgba(7,20,42,.6); -webkit-backdrop-filter:blur(26px) saturate(1.65) brightness(1.03); backdrop-filter:blur(26px) saturate(1.65) brightness(1.03); box-shadow:inset 0 0 140px 20px rgba(5,18,42,.55); opacity:1; transform:scale(1.015); transition:opacity 1.15s cubic-bezier(.4,0,.2,1), transform 1.5s cubic-bezier(.33,1,.68,1)} /* Failsafe: if the script ever fails to run, CSS alone clears the overlay. A stuck page-transition makes the whole site unusable, so this is not left to JS. */ @keyframes pagex-failsafe{to{opacity:0; visibility:hidden}} .pagex{animation:pagex-failsafe .4s linear 3s forwards} .pagex.leave{opacity:0; visibility:hidden; transform:scale(1.04); transition:opacity 1.15s cubic-bezier(.4,0,.2,1), transform 1.5s cubic-bezier(.33,1,.68,1), visibility 0s linear 1.15s} .pagex__waves{position:absolute; inset:0; width:100%; height:100%} /* the three curves draw one after another, like the left progress line */ .pagex__w{fill:none; stroke:var(--amber); stroke-width:1.6; vector-effect:non-scaling-stroke; transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1)} .pagex__w2{opacity:.6} .pagex__w3{opacity:.42} .pagex__logo{position:relative; width:min(280px,58vw); height:auto; filter:drop-shadow(0 3px 18px rgba(5,18,42,.7)); opacity:0; transform:translateY(14px) scale(.98); transition:opacity 1s ease .35s, transform 1.3s var(--e-out) .35s} .pagex:not(.leave) .pagex__logo{opacity:1; transform:none} @media (prefers-reduced-motion:reduce){ .pagex{display:none} } /* what happens next — a mini route, same family as #how */ .next-steps{position:relative; width:min(560px,90vw); margin:clamp(2.6rem,5vw,3.6rem) auto 0; padding-left:46px; list-style:none; display:grid; gap:1.7rem; counter-reset:ns} .next-steps::before{content:""; position:absolute; left:14px; top:.35rem; bottom:.35rem; width:2px; background:linear-gradient(var(--amber), rgba(217,118,6,.2))} .next-steps li{position:relative; color:var(--paper-dim); font-size:.98rem; line-height:1.55} .next-steps li::before{counter-increment:ns; content:counter(ns,decimal-leading-zero); position:absolute; left:-46px; top:-.1rem; width:30px; text-align:center; font-family:var(--f-label); font-size:1.15rem; line-height:1; color:var(--amber); background:var(--ink); padding-block:.15rem} /* pricing detail list + assurances */ .tier__desc{list-style:none; padding:0; margin:0; display:grid; gap:.6rem} .tier__desc li{position:relative; padding-left:1.3rem; color:var(--fg-dim); font-size:.95rem; line-height:1.5} .tier__desc li::before{content:"›"; position:absolute; left:0; top:-.05em; color:var(--fg-dim); font-family:var(--f-body); font-size:1.05rem} .assur{display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin-top:1.8rem} .assur span{font-family:var(--f-label); letter-spacing:.1em; text-transform:uppercase; font-size:.82rem; color:var(--fg-dim); padding:.5em 1em; border:1px solid var(--rule)} /* real series line */ .work__series{margin-top:1.4rem; color:var(--fg-dim); font-size:.95rem; text-align:center} /* form validation */ .form label.invalid input,.form label.invalid textarea{border-color:var(--amber); outline:1px solid var(--amber)} .form .err{display:none; margin-top:.15rem; font-family:var(--f-body); text-transform:none; letter-spacing:0; font-size:.82rem; color:var(--amber)} .form label.invalid .err{display:block} .form__hp{position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden} /* hero */ .hero{position:relative; min-height:calc(100svh - var(--header-h)); display:flex; align-items:flex-end; padding-bottom:clamp(3.5rem,8vw,7rem); overflow:hidden; isolation:isolate} .hero__img{position:absolute; inset:0; z-index:-2; background:#0b1c3a center/cover no-repeat; background-image:url("https://design-by-munk.com/wp-content/uploads/2026/09/raceweek-therbo-spa.jpg"); background-position:72% 28%} .hero::after{content:""; position:absolute; inset:0; z-index:-1; background: radial-gradient(70% 90% at 8% 40%, rgba(5,18,42,.94) 0%, rgba(5,18,42,.72) 38%, transparent 72%), radial-gradient(60% 70% at 88% 88%, rgba(59,10,58,.55) 0%, transparent 62%), linear-gradient(90deg,var(--ink) 0%,rgba(5,18,42,.62) 38%,rgba(5,18,42,.06) 78%), linear-gradient(0deg,var(--ink) 0%,rgba(5,18,42,.55) 22%,transparent 62%)} .hero__in{position:relative; width:var(--shell); margin-inline:auto} .hero h1{max-width:15ch} .hero .lead{margin:1.8rem 0 0} /* The reset zeroes every margin, so a CTA row after a paragraph sat flush against it. One rule for the gap above every CTA row, hero included. */ * + .hero__cta{margin-top:clamp(1.9rem,3.8vw,2.6rem)} .hero__cta{display:flex; flex-wrap:wrap; gap:1rem 1.7rem; align-items:center} /* race-week strip */ .strip{background:var(--ink); border-block:1px solid var(--line); padding-block:1.15rem} .strip__row{width:var(--shell); margin-inline:auto; display:flex; align-items:center; gap:1.3rem; flex-wrap:wrap; font-family:var(--f-label); letter-spacing:.19em; text-transform:uppercase; font-size:1rem; color:var(--paper-dim)} .strip__row b{color:var(--paper); font-weight:400} .strip__tick{flex:1; min-width:34px; height:2px; background:repeating-linear-gradient(90deg,var(--amber) 0 8px,transparent 8px 16px); opacity:.75} @media (max-width:620px){ .strip__row{gap:.55rem; font-size:.8rem; letter-spacing:.14em; justify-content:center} .strip__tick{min-width:12px; flex:0 1 22px} } /* what I make — copy + one graphic */ .make-grid{display:grid; gap:clamp(2.2rem,5vw,4rem); grid-template-columns:1fr; align-items:center} @media (min-width:960px){ .make-grid{grid-template-columns:1fr .8fr} } .make-copy > .lead{max-width:48ch} .services{display:grid; gap:clamp(1.8rem,4vw,2.6rem); grid-template-columns:1fr; margin-top:clamp(2.4rem,5vw,3.4rem)} .service{border-top:1px solid var(--line); padding-top:1.5rem} .service h3{margin-bottom:.8rem} .service p{max-width:46ch} .make-visual{margin:0; transform:rotate(-.7deg); transition:transform .5s var(--ease)} @media (hover:hover){ .make-visual:hover{transform:rotate(0)} } .make-visual img{width:100%; aspect-ratio:4/5; object-fit:cover} @media (max-width:960px){ .make-visual{max-width:400px} } /* how a month runs — an abstract circuit: straights joined by real corners. The path is generated in JS so the viewBox aspect always matches the rendered box; that keeps corner radii circular instead of stretching them into a squiggle. */ .section-centered{text-align:center} .section-centered .lead{margin-inline:auto} #how{padding-bottom:0} .route{--route-tail:clamp(2.5rem,5vw,4rem); --route-gutter:clamp(150px,24vw,320px); position:relative; margin-top:clamp(3.5rem,7vw,5.5rem); padding-bottom:var(--route-tail)} .route__svg{position:absolute; left:50%; top:0; height:calc(100% - var(--route-tail)); width:var(--route-gutter); transform:translateX(-50%); overflow:visible; z-index:0; pointer-events:none} /* One line, and only one: the amber itself is the scroll indicator. No grey twin underneath it — that second stroke is what read as two lines. */ .route__draw{fill:none; stroke:var(--amber); stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke} /* the car: a single small marker riding the racing line, driven by scroll only */ .route__stops{list-style:none; margin:0; padding:0; position:relative; z-index:1; display:grid; grid-template-columns:100%; width:100%; max-width:none; gap:clamp(3.2rem,7vw,4.8rem)} /* sector marker: prominent index, quiet denominator */ .stop__no{display:flex; align-items:baseline; gap:.4rem; margin-bottom:.55rem; font-family:var(--f-label); line-height:1} .stop__no b{font-weight:400; font-size:1.55rem; color:var(--paper); letter-spacing:.04em} .stop__no i{font-style:normal; font-size:.78rem; letter-spacing:.22em; color:var(--paper-dim); opacity:.5} .stop h3{margin-bottom:.5rem; transition:color .6s var(--ease)} .stop p{color:var(--paper-dim)} .stop__body{max-width:34ch} /* finish: a quiet close on the lap, not a flag graphic */ @media (min-width:900px){ .stop{display:grid; grid-template-columns:1fr var(--route-gutter) 1fr; align-items:center; width:100%; max-width:none; justify-self:stretch; box-sizing:border-box} .stop--l .stop__body{grid-column:1; justify-self:end; text-align:right} .stop--l .stop__no{justify-content:flex-end} .stop--r .stop__body{grid-column:3; justify-self:start; text-align:left} .route__stops{gap:clamp(3.4rem,7vw,5rem)} } @media (max-width:899px){ /* phones: the circuit straightens into a left-hand rail beside the steps */ .route{padding-left:44px} .route__svg{left:0; width:44px; transform:none} .route__stops{gap:2.6rem} .stop__body{max-width:62ch} } @media (prefers-reduced-motion:reduce){ .route__draw{transition:none} } /* the stakes line above the plans — set like every other section opener on the page: centred, one Anton line with the amber word inside it, one lead under. */ /* A standalone claim needs a beat after it, or the eye reads it as a caption for the pricing that follows instead of as a statement in its own right. */ .stakes{text-align:center; margin-bottom:clamp(3.4rem,8vw,6.5rem)} .stakes h3{font-family:var(--f-display); font-weight:400; text-transform:uppercase; line-height:1; letter-spacing:.01em; color:var(--paper); font-size:clamp(1.9rem,4.6vw,3.1rem); max-width:20ch; margin-inline:auto; text-wrap:balance} .stakes h3 em{font-style:normal; color:var(--amber)} .stakes p{margin:1.1rem auto 0; max-width:54ch; color:var(--paper-dim)} /* thank-you page — same shell, header and footer as home; this is the only block that page adds. Lives here so it ships inside home.css and the two pages can never drift apart. */ .thanks{width:var(--shell); margin-inline:auto; min-height:calc(72svh - var(--header-h)); display:flex; flex-direction:column; justify-content:center; padding-block:clamp(3rem,10vw,7rem)} .thanks h1{max-width:14ch} .thanks .lead{margin:1.6rem 0 0; max-width:46ch} .thanks .lead + .lead{margin-top:.9rem; color:var(--paper-dim)} .thanks__cta{display:flex; flex-wrap:wrap; gap:1rem 1.7rem; align-items:center; margin-top:clamp(2.2rem,5vw,3rem)} /* pricing — two clearly separated groups of clean flat boxes */ .pricing__group{position:relative; margin-top:clamp(3.5rem,8vw,6rem)} .pricing__group + .pricing__group{margin-top:clamp(4rem,9vw,7rem); padding-top:clamp(4rem,9vw,7rem); border-top:1px solid var(--rule)} .pricing__h{font-family:var(--f-display); font-weight:400; text-transform:uppercase; font-size:clamp(1.6rem,3.4vw,2.3rem); line-height:1; color:var(--fg); margin-bottom:.7rem} .pricing__lead{font-size:1.02rem; color:var(--fg-dim); margin-bottom:1.9rem; max-width:52ch} .pricing__row{display:grid; gap:clamp(1rem,2vw,1.4rem); grid-template-columns:1fr} @media (min-width:700px){ .pricing__row--2{grid-template-columns:repeat(2,1fr)} } @media (min-width:880px){ .pricing__row--3{grid-template-columns:repeat(3,1fr)} } .tier{background:transparent; border:1px solid var(--rule); padding:clamp(1.8rem,3.6vw,2.6rem); display:flex; flex-direction:column; gap:.9rem; transition:transform .35s var(--ease), border-color .3s var(--ease)} @media (hover:hover){ .tier:hover{transform:translateY(-3px); border-color:var(--rule-strong)} } .tier--feat{border-color:var(--amber); background-color:var(--feat-bg)} .tier--feat .tier__price{font-size:clamp(2.6rem,5.6vw,3.5rem)} .tier__tag{align-self:flex-start; background:var(--amber); color:var(--ink); font-family:var(--f-label); letter-spacing:.12em; text-transform:uppercase; font-size:.78rem; padding:.32em .85em} .tier__tag--soft{background:transparent; color:var(--amber); box-shadow:inset 0 0 0 1px var(--amber)} .tier__name{font-family:var(--f-label); letter-spacing:.12em; text-transform:uppercase; font-size:1.05rem; color:var(--fg-dim)} .tier__price{font-family:var(--f-display); font-size:clamp(2.2rem,4.6vw,2.9rem); color:var(--fg); line-height:1} .tier__price span{font-family:var(--f-label); font-size:1rem; color:var(--fg-dim); letter-spacing:.08em} .pricing__note{color:var(--fg-dim); font-size:.92rem; margin:1.4rem auto 0; max-width:58ch; text-align:center} .pricing__cta{margin-top:clamp(2.8rem,6vw,4rem); text-align:center} /* who it's for */ /* faq — plain accordion */ /* The first question sat flush against the intro line, so the intro read as part of the accordion rather than as its own sentence. */ .faq{max-width:720px; margin-inline:auto; margin-top:clamp(1.75rem,3.5vw,2.75rem)} .faq details{border-top:1px solid rgba(5,18,42,.15)} .faq details:last-child{border-bottom:1px solid rgba(5,18,42,.15)} .faq summary{list-style:none; cursor:pointer; position:relative; padding:1.15rem 2.4rem 1.15rem 0; font-family:var(--f-label); font-weight:400; letter-spacing:.05em; text-transform:uppercase; font-size:1.08rem; color:var(--ink)} .faq summary::-webkit-details-marker{display:none} .faq summary:focus{outline:none} .faq summary:focus-visible{outline:2px solid var(--amber); outline-offset:4px; border-radius:2px} .faq summary:hover{color:var(--amber)} .faq details[open] summary{color:var(--amber)} .faq summary::after{content:"+"; position:absolute; right:.1rem; top:.95rem; font-family:var(--f-body); font-size:1.5rem; line-height:1; color:var(--amber); transition:transform .3s var(--ease)} .faq details[open] summary::after{transform:rotate(45deg)} .faq details p{color:#3a3e46; padding:0 0 1.35rem; max-width:62ch; line-height:1.62} /* the work — 4 pieces, even grid, centred */ #work{padding-top:clamp(1rem,3vw,2.5rem)} .work__grid{display:grid; grid-template-columns:1fr; gap:2.6rem; margin-top:clamp(3.2rem,6vw,4.5rem)} @media (min-width:720px){ .work__grid{grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.5rem)} } .work__item figure{margin:0; overflow:hidden; transition:transform .5s var(--ease)} .work__item:nth-child(4n+1) figure{transform:rotate(-.55deg)} .work__item:nth-child(4n+2) figure{transform:rotate(.5deg)} .work__item:nth-child(4n+3) figure{transform:rotate(.35deg)} .work__item:nth-child(4n) figure{transform:rotate(-.4deg)} .work__item img{width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .6s var(--ease)} @media (hover:hover){ .work__item:hover figure{transform:rotate(0)} .work__item:hover img{transform:scale(1.02)} } .work__item figcaption{font-family:var(--f-label); letter-spacing:.15em; text-transform:uppercase; font-size:.95rem; color:var(--fg-dim); margin-top:1.1rem; text-align:center} .work__more{margin-top:clamp(3rem,6vw,4.5rem); text-align:center} /* what drivers say */ .voices{display:grid; gap:1.4rem; margin-top:clamp(2.4rem,5vw,3.4rem)} @media (min-width:640px){ .voices{grid-template-columns:repeat(3,1fr); gap:1.6rem} } .voice{margin:0; border:1px solid var(--line); padding:clamp(1.5rem,3.2vw,2rem); display:flex; flex-direction:column; gap:1.15rem; transition:border-color .3s var(--ease)} .voice:hover{border-color:rgba(235,235,235,.26)} .voice p{margin:0; font-size:1.03rem; line-height:1.62; color:var(--paper)} .voice p::before{content:"\201C"; color:var(--amber); margin-right:.1em} .voice p::after{content:"\201D"; color:var(--amber); margin-left:.05em} .voice__by{margin-top:auto; font-family:var(--f-label); letter-spacing:.08em; text-transform:uppercase; font-size:.82rem; color:var(--paper-dim)} .voice__by b{display:block; font-weight:400; font-size:1rem; letter-spacing:.06em; color:var(--amber); margin-bottom:.15rem} /* founder */ .founder{display:grid; gap:2.6rem; grid-template-columns:1fr} @media (min-width:900px){ .founder{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:4rem; align-items:start} } .founder .lead{max-width:38ch} /* how I work — a clean ruled list */ .creed{list-style:none; margin:0; padding:0; border:1px solid rgba(5,18,42,.15)} .creed li{display:grid; grid-template-columns:1.8rem 1fr; gap:.9rem; align-items:baseline; padding:clamp(1.15rem,2.6vw,1.5rem) clamp(1.15rem,2.4vw,1.5rem)} .creed li + li{border-top:1px solid rgba(5,18,42,.13)} .creed__no{font-family:var(--f-label); font-size:1.1rem; line-height:1; color:var(--amber)} .creed b{display:block; font-family:var(--f-label); font-weight:400; letter-spacing:.09em; text-transform:uppercase; font-size:1.08rem; color:var(--ink); margin-bottom:.3rem} .creed span{display:block; color:#3a3e46; font-size:.95rem; line-height:1.55} .creed li > div{grid-column:2} /* contact — heading, then the form centred underneath */ .contact{background:linear-gradient(165deg,var(--ink) 0%,#2a0c2c 130%)} .contact__head{max-width:640px; margin-inline:auto; text-align:center; margin-bottom:clamp(2.4rem,5vw,3.4rem)} .contact__head .lead{margin:0 auto} .contact__points{display:inline-grid; gap:.7rem; margin:1.9rem 0 0; padding:0; text-align:left} .contact__points li{list-style:none; display:flex; gap:.8rem; align-items:flex-start; color:var(--paper); font-size:.97rem} .contact__points li::before{content:"›"; color:var(--paper-dim); font-size:1.05rem; line-height:1.5; flex:none} .form{width:min(640px,90vw); margin-inline:auto; border:1px solid var(--line); padding:clamp(1.9rem,4.2vw,2.9rem); display:grid; gap:1.1rem} .form__fields{display:grid; gap:1.1rem} .form label{display:grid; gap:.35rem; font-family:var(--f-body); letter-spacing:0; text-transform:none; font-size:.9rem; color:var(--paper-dim)} .form input, .form textarea{font-family:var(--f-body); font-size:1rem; color:var(--paper); letter-spacing:-.011em; background:rgba(5,18,42,.42); border:1px solid var(--line); padding:.8em 1em; width:100%; transition:border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease)} .form input:not([type=radio]):not([type=checkbox]):hover, .form textarea:hover{border-color:rgba(217,118,6,.35)} /* one focus system for the whole form: a soft amber ring. Never a hard square outline — that is what made the round radio look boxed-in when selected. */ .form input:not([type=radio]):not([type=checkbox]):focus, .form textarea:focus{outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(217,118,6,.2)} .form textarea{min-height:92px; resize:vertical} .form__row{display:grid; gap:1.1rem} .graphics-upload[hidden]{display:none} /* an amber rail, not a boxed card, so the reason-to-upload copy reads as an aside */ .graphics-upload{border-left:2px solid var(--amber); padding:.1rem 0 .1rem 1.1rem} .graphics-upload__why{color:var(--paper-dim); font-size:.88rem; line-height:1.55; margin:.5rem 0 .9rem; max-width:46ch} .graphics-upload input[type=file]{display:block; width:100%; font:inherit; font-size:.85rem; color:var(--paper-dim); background:rgba(5,18,42,.42); border:1px solid var(--line); padding:.65em .8em; transition:border-color .25s var(--ease)} .graphics-upload input[type=file]:hover{border-color:rgba(217,118,6,.35)} /* restyles the native OS "choose file" button in-brand; the filename text beside it stays native (locale-dependent, can't be restyled without JS) but now sits in a bordered field instead of loose on the page */ .graphics-upload input[type=file]::file-selector-button{ font-family:var(--f-label); letter-spacing:.11em; text-transform:uppercase; font-size:.82rem; padding:.6em 1.05em; margin-right:1em; border:1.5px solid var(--amber); background:transparent; color:var(--amber); cursor:pointer; transition:background-color .25s var(--ease), color .25s var(--ease)} .graphics-upload input[type=file]:hover::file-selector-button, .graphics-upload input[type=file]:focus-visible::file-selector-button{background:var(--amber); color:var(--ink)} .graphics-upload small{display:block; color:var(--paper-dim); font-size:.78rem; line-height:1.5; margin-top:.5rem} /* single column on purpose — one column completes faster than two */ .form__group > span{display:block; font-family:var(--f-body); font-size:.9rem; color:var(--paper-dim); margin-bottom:.6rem} /* ---- the choice boxes --------------------------------------------------- One control shared by the static markup (.form__need label) and by whatever Contact Form 7 emits (.wpcf7-list-item), so both look and behave the same. The native radio/checkbox is drawn from scratch: the browser default sat in a white disc and picked up the field focus outline as a square, which read as a box around a circle. Here the whole row is the target, it lifts on hover, and the mark eases in with a short spring. */ .form__need{display:grid; grid-template-columns:1fr; gap:.55rem} .form__need label, .form .wpcf7-list-item{ position:relative; display:flex; align-items:center; gap:.75rem; margin:0 !important; padding:.8em .95em; cursor:pointer; font-family:var(--f-body); font-size:.95rem; letter-spacing:0; text-transform:none; color:var(--paper); background:rgba(5,18,42,.42); border:1px solid var(--line); transition:border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease)} .form__need label:hover, .form .wpcf7-list-item:hover{border-color:rgba(217,118,6,.45); background:rgba(5,18,42,.62)} .form__need label:active, .form .wpcf7-list-item:active{transform:scale(.99)} .form__need label:has(input:checked), .form .wpcf7-list-item:has(input:checked){ border-color:rgba(217,118,6,.75); background:rgba(217,118,6,.08); box-shadow:0 0 18px -6px rgba(217,118,6,.45)} /* focus shows on the box, not as an outline around the 19px control */ .form__need label:has(input:focus-visible), .form .wpcf7-list-item:has(input:focus-visible){ border-color:var(--amber); box-shadow:0 0 0 3px rgba(217,118,6,.2)} .form__need input[type=radio], .form__need input[type=checkbox], .form .wpcf7-list-item input[type=radio], .form .wpcf7-list-item input[type=checkbox]{ appearance:none; -webkit-appearance:none; flex:none; margin:0; padding:0; width:19px; height:19px; display:grid; place-content:center; background:transparent; border:1.5px solid rgba(235,235,235,.32); cursor:pointer; outline:none; transition:border-color .25s var(--ease), background-color .25s var(--ease)} .form__need input[type=radio], .form .wpcf7-list-item input[type=radio]{border-radius:50%} .form__need input[type=radio]::after, .form__need input[type=checkbox]::after, .form .wpcf7-list-item input[type=radio]::after, .form .wpcf7-list-item input[type=checkbox]::after{ content:""; transition:transform .3s cubic-bezier(.34,1.45,.5,1)} .form__need input[type=radio]::after, .form .wpcf7-list-item input[type=radio]::after{ width:9px; height:9px; border-radius:50%; background:var(--amber); transform:scale(0)} .form__need input[type=checkbox]::after, .form .wpcf7-list-item input[type=checkbox]::after{ width:10px; height:5px; margin-top:-3px; border-left:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:rotate(-45deg) scale(0)} .form__need input:checked, .form .wpcf7-list-item input:checked{border-color:var(--amber)} .form__need input[type=checkbox]:checked, .form .wpcf7-list-item input[type=checkbox]:checked{background:var(--amber)} .form__need input[type=radio]:checked::after, .form .wpcf7-list-item input[type=radio]:checked::after{transform:scale(1)} .form__need input[type=checkbox]:checked::after, .form .wpcf7-list-item input[type=checkbox]:checked::after{transform:rotate(-45deg) scale(1)} @media (prefers-reduced-motion:reduce){ .form__need label, .form .wpcf7-list-item, .form__need input, .form .wpcf7-list-item input, .form__need input::after, .form .wpcf7-list-item input::after{transition:none} .form__need label:active, .form .wpcf7-list-item:active{transform:none} } .form .btn{width:100%; margin-top:.4rem} .form__consent{margin:.6rem 0 0; color:var(--paper-dim); font-size:.82rem; line-height:1.55; max-width:54ch} .form__consent a{color:var(--paper); text-decoration:none; border-bottom:1px solid var(--amber)} .form__consent a:hover{color:var(--amber)} /* ---- Contact Form 7 ---------------------------------------------------- CF7 generates its own markup, so the design is applied to what it actually outputs. Built to the form-UX evidence: ONE column, persistent labels above each field, choices stacked vertically, generous vertical rhythm, and a full-width submit. */ .form .wpcf7{margin:0} .form .wpcf7-form{display:grid; gap:1.35rem} .form .wpcf7-form > p{margin:0; display:grid; gap:1.35rem} /* label sits above its field */ .form .wpcf7-form label{display:grid; gap:.45rem; font-family:var(--f-body); letter-spacing:0; text-transform:none; font-size:.9rem; color:var(--paper-dim)} .form .wpcf7-form-control-wrap{display:block; margin-top:.1rem} .form .wpcf7-form input[type=text], .form .wpcf7-form input[type=email], .form .wpcf7-form input[type=tel], .form .wpcf7-form textarea{ width:100%; font-family:var(--f-body); font-size:1rem; color:var(--paper); letter-spacing:-.011em; background:rgba(5,18,42,.5); border:1px solid var(--line); padding:.85em 1em; border-radius:0; transition:border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease)} .form .wpcf7-form input:not([type=radio]):not([type=checkbox]):not([type=submit]):hover, .form .wpcf7-form textarea:hover{border-color:rgba(217,118,6,.35)} .form .wpcf7-form input:not([type=radio]):not([type=checkbox]):not([type=submit]):focus, .form .wpcf7-form textarea:focus{outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(217,118,6,.2)} .form .wpcf7-form input::placeholder, .form .wpcf7-form textarea::placeholder{color:rgba(175,179,188,.6)} .form .wpcf7-form textarea{min-height:104px; resize:vertical} /* ---- the "What you need" choices --------------------------------------- CF7 emits and only wraps a