:root{ --ink:#000000; --cyan:#118083; --cyan-lt:#67DFE0; --orange:#FC5F25; --paper:#F4F5F5; --card:#FFFFFF; --sand:#ECEDED; --rule:#D9DBDB; --muted:#5A5F5F; --gap:clamp(28px,4vw,52px); --r:12px; --r-sm:8px; } *{box-sizing:border-box;margin:0;padding:0} /* scrollbar-gutter keeps the scrollbar's space reserved whether or not one is showing. Without it a page sitting near the height threshold oscillates: the scrollbar appears, the viewport narrows, every vw-sized full-bleed band shrinks, the page gets shorter, the scrollbar goes, and it repeats. */ html{scroll-behavior:smooth;background:var(--ink);overflow-x:clip; scrollbar-gutter:stable} /* No min-height here. The body is exactly as tall as its content, so on a short page the black background shows beneath it — matching the closing band. A min-height would stretch the body and paint the gap in the page colour instead. */ /* clip, not hidden. overflow-x:hidden turns the body into a scroll container, which breaks position:sticky on the nav and makes it flicker as the browser re-resolves it. clip contains the full-bleed bands without creating a scroll container. */ body{overflow-x:clip;background:var(--paper);color:var(--ink); font-family:'Poppins',system-ui,sans-serif; font-size:clamp(14.5px,1.05vw,16px);line-height:1.55;-webkit-font-smoothing:antialiased} /* fluid container — grows with the screen instead of stopping at 860px */ .wrap{width:min(1180px,100% - clamp(28px,5vw,80px));margin-inline:auto} h1,h2,h3,.bar-name,.price,.stat-num,.chan{font-family:'Oswald',sans-serif; text-transform:uppercase;letter-spacing:-.025em;line-height:1.04} h1{font-size:clamp(40px,6.4vw,72px);font-weight:400} h2{font-size:clamp(26px,3.4vw,40px);margin-bottom:6px;font-weight:400} h3{font-size:clamp(17px,1.5vw,22px);letter-spacing:-.005em;margin-bottom:10px;font-weight:500} .lede{font-size:clamp(15px,1.35vw,19px);color:var(--muted);max-width:64ch;margin-top:10px} .eyebrow{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:13px; font-weight:500;letter-spacing:.13em;color:var(--orange);margin-bottom:8px} .rule{height:3px;background:var(--ink);margin:22px 0} .hairline{height:1px;background:var(--rule);margin:var(--gap) 0} /* a rule introducing a labelled section needs far less air beneath it */ .hairline + .label{margin-top:clamp(18px,2vw,26px)} .hairline:has(+ .label){margin-bottom:0} .note{border-left:4px solid var(--cyan);padding:11px 0 11px 16px;font-size:14px; color:var(--muted);margin-top:20px} .terms{background:rgba(252,95,37,.07);border-left:4px solid var(--orange);padding:16px 20px; font-size:14px;margin-top:22px} .desc{font-size:15px;color:var(--muted);margin:0 0 13px;line-height:1.45} .label{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:12.5px; font-weight:500;letter-spacing:.1em;color:var(--muted);margin:24px 0 10px} /* masthead */ .mast{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap; gap:12px;padding:clamp(6px,0.7vw,10px) 0 0} .mast-brand{flex:0 1 auto;min-width:0} /* block, or the image sits on a text baseline and carries descender space beneath it that no amount of padding will remove */ .mast-brand img{max-width:100%;display:block;height:auto} .mast img{height:auto;display:block} .kit-login{display:inline-block;font-family:'Oswald',sans-serif;text-transform:uppercase; font-size:12.5px;font-weight:500;letter-spacing:.08em;text-decoration:none; color:var(--cyan);border:1.5px solid var(--cyan);border-radius:999px; padding:8px 18px;line-height:1;white-space:nowrap; transition:background .18s ease,color .18s ease,border-color .18s ease} .kit-login:hover{background:var(--cyan);border-color:var(--cyan);color:#fff} /* tabs */ /* full-bleed sticky bar, centred items */ .tabs{position:sticky;top:0;z-index:20;background:var(--ink); border-bottom:0;margin-bottom:var(--gap); /* a sticky bar can land on a fractional pixel and leave a hairline of page colour at the seam. This paints 1px of the same black just below it. */ box-shadow:0 1px 0 0 var(--ink)} .tabs:has(+ .hero-wrap){margin-bottom:0} .tabs > .wrap{width:min(1180px,100% - clamp(28px,5vw,80px))} .tabs-inner{display:flex;justify-content:center;gap:clamp(10px,2vw,34px); overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none} .tabs-inner::-webkit-scrollbar{display:none} .tab{position:relative;display:inline-block;text-decoration:none;white-space:nowrap; font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:clamp(13px,1.15vw,15px); font-weight:400;letter-spacing:.05em;color:rgba(255,255,255,.72); padding:11px 2px 10px;transition:color .18s ease} .tab:after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px; background:var(--cyan-lt);transform:scaleX(0);transform-origin:center; transition:transform .22s cubic-bezier(.4,0,.2,1)} .tab:hover{color:#fff} .tab:hover:after{transform:scaleX(1)} .tab.is-current,.tab[aria-selected="true"]{color:#fff} .tab.is-current:after,.tab[aria-selected="true"]:after{transform:scaleX(1);background:var(--cyan)} .panel[hidden]{display:none} .panel{padding-bottom:clamp(48px,7vw,90px)} /* section opens on a full-bleed band — no gap under the header */ .panel--flush{padding-top:0;width:100%;max-width:none} .hero-wrap:has(+ .panel--flush){margin-bottom:0} .panel--flush > *:not(.photo-band):not(.cta):not(.stats):not(.stats-btn):not(.nextnav-band){width:min(1180px,100% - clamp(28px,5vw,80px));margin-inline:auto} .panel:has(.cta){padding-bottom:0} /* full-bleed CTA: cancel the container's side margins for this block only */ .panel .cta{margin-left:calc(-1 * (50vw - 50%));margin-right:calc(-1 * (50vw - 50%)); width:auto;padding-left:max(clamp(24px,5vw,80px),calc(50vw - 590px)); padding-right:max(clamp(24px,5vw,80px),calc(50vw - 590px))} /* stats */ .stats-3{grid-template-columns:repeat(3,1fr)} @media (max-width:860px){.stats-3{grid-template-columns:1fr 1fr}} .stats{display:grid;grid-template-columns:repeat(4,1fr); margin:26px 0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)} .stat{background:var(--card);padding:clamp(16px,1.6vw,24px); border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)} .stat-num{font-size:clamp(28px,3.4vw,46px);font-weight:500} .stat-num.accent{color:var(--cyan)} .stat-lab{font-size:clamp(11px,.92vw,13px);color:var(--muted);text-transform:uppercase; letter-spacing:.06em;font-weight:500;margin-top:3px} .chan{font-size:clamp(22px,2.4vw,32px);font-weight:500;margin:var(--gap) 0 0; padding-bottom:10px;border-bottom:2px solid var(--cyan);color:var(--cyan)} .chan span{color:var(--muted);font-weight:400;font-size:.62em;letter-spacing:.02em} .chan + .stats{margin-top:0} /* split bars */ .split{margin:22px 0} .split-row{display:flex;align-items:center;gap:14px;margin-bottom:10px} .split-lab{flex:0 0 clamp(120px,16vw,220px);font-size:clamp(12.5px,1.05vw,15px);font-weight:500} .split-track{flex:1;height:clamp(18px,2vw,26px);background:var(--card);border:1px solid var(--rule)} .split-fill{height:100%} .split-fill.cy{background:var(--cyan-lt)} .split-fill.or{background:var(--orange)} .split-val{flex:0 0 52px;text-align:right;font-family:'Oswald',sans-serif; font-size:clamp(18px,1.9vw,26px);font-weight:500;letter-spacing:-.015em} /* images */ .hero-img{width:100%;aspect-ratio:8/3;object-fit:cover;display:block; border-radius:8px;margin:24px 0 4px} .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,20px);margin-top:6px} .post-img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;border-radius:8px; background:var(--rule)} .postlink{text-decoration:none;color:inherit;display:block} .post-cap{font-family:'Oswald',sans-serif;font-size:clamp(17px,2vw,30px);font-weight:500; margin-top:10px;line-height:1;letter-spacing:-.015em} .post-cap span{color:var(--cyan)} .post-cap small{display:block;font-family:'Poppins',sans-serif;font-size:clamp(10.5px,.9vw,13px); font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0;margin-top:4px;line-height:1.3} /* tables */ table{width:100%;border-collapse:collapse;margin-top:8px;font-size:clamp(13px,1.1vw,15px)} th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule)} thead th{background:var(--ink);color:#fff;font-family:'Oswald',sans-serif; text-transform:uppercase;font-size:clamp(13px,1.2vw,16px);font-weight:400; letter-spacing:.02em;text-align:center;padding:12px;line-height:1.2} thead th:first-child{text-align:left;width:30%} .th-p{display:block;color:var(--cyan-lt);font-size:clamp(17px,1.9vw,24px);font-weight:500;letter-spacing:-.015em} .th-p small{font-family:'Poppins',sans-serif;font-size:11.5px;font-weight:400; text-transform:none;letter-spacing:0;color:rgba(255,255,255,.72);margin-left:3px} tbody td{text-align:center} tbody th{font-weight:500} tbody tr:nth-child(even){background:#FAFBFB} td.dash{color:#B3B8B8} td.num,th.num{text-align:right} /* tier + package cards — three across once there's room */ .tiers{display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px);margin-top:8px;align-items:start} .tier{border:1px solid var(--rule);background:var(--card)} .tier-bar{background:var(--ink);color:#fff;display:flex;align-items:baseline; justify-content:space-between;gap:8px;padding:13px 18px;flex-wrap:wrap} .bar-name{font-size:clamp(20px,2vw,27px);font-weight:400} .price{font-size:clamp(20px,2vw,27px);font-weight:500;color:var(--cyan-lt)} .price small{font-family:'Poppins',sans-serif;font-size:13px;text-transform:none; letter-spacing:0;color:#fff;font-weight:400} .tier-body{padding:16px 18px 18px} .d{position:relative;padding-left:18px;font-size:clamp(13.5px,1.1vw,15px); line-height:1.45;margin-bottom:3px} .d::before{content:"";position:absolute;left:0;top:.46em;width:7px;height:7px; background:var(--cyan);transform:rotate(45deg)} .d b{font-weight:600} /* contact */ .contact{text-align:center;padding:clamp(20px,3vw,40px) 0 6px} .contact .big{font-family:'Oswald',sans-serif;font-size:clamp(24px,3.6vw,44px); font-weight:400;text-transform:uppercase;letter-spacing:-.02em} .contact .big a{color:var(--ink);text-decoration:none;border-bottom:3px solid var(--cyan)} .contact .lede{margin:0 auto 18px;text-align:center} .contact .meta{margin-top:16px;color:var(--muted);font-size:14px} .contact .meta a{color:inherit;text-decoration:none} @media (max-width:640px){ .posts{grid-template-columns:1fr 1fr 1fr;gap:8px} .split-lab{flex:0 0 112px} thead th:first-child{width:34%} } @media print{ @page{size:letter portrait;margin:.45in} html,body{background:#fff;font-size:11.5px} .wrap{width:auto} .tabs,.kit-login{display:none} .panel[hidden]{display:block !important} /* every tab prints */ .panel{page-break-before:always;break-before:page;padding-bottom:0} .panel:first-of-type{page-break-before:auto;break-before:auto} .tier,.card,.stats,.stat,.posts>div,.split-row,.terms,.note,table,tr,img{ page-break-inside:avoid;break-inside:avoid} h1,h2,h3,.chan{page-break-after:avoid;break-after:avoid} h1{font-size:42px}h2{font-size:26px} *{-webkit-print-color-adjust:exact;print-color-adjust:exact} } /* nav as links */ @media print{.tabs{display:none}} /* --------------------------------------------------------------- Softened corners — applied consistently so nothing reads as an outlier. Images already sit at 8px. --------------------------------------------------------------- */ /* cards */ .tier,.card{border-radius:var(--r)} /* round the dark bar's top corners directly, so nothing needs clipping and the badge can sit outside the card */ .tier-bar,.card-top{border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0} .tier-body,.card-body{border-radius:0 0 calc(var(--r) - 1px) calc(var(--r) - 1px)} /* stat grid: round the outer frame and clip the cells inside it */ .stats{border-radius:0} /* tables: round the header and the final row */ tbody tr:last-child th,tbody tr:last-child td{border-bottom:0} table{border:1px solid var(--rule);border-collapse:collapse} /* callouts */ .note{border-radius:0 var(--r-sm) var(--r-sm) 0;background:rgba(17,128,131,.05)} .terms{border-radius:0 var(--r-sm) var(--r-sm) 0} /* bars */ .split-track{border-radius:999px;overflow:hidden} .split-fill{border-radius:999px} /* badge */ .tier-badge{border-radius:999px} /* images already rounded — nudge to match the new scale */ .hero-img,.post-img{border-radius:var(--r)} /* centred page intros */ .intro{max-width:74ch} /* A Look Inside / Instagram: full-width card, partnership box beneath */ /* single-product pages: a narrower, highlighted card rather than a full-width slab */ .tiers.solo{grid-template-columns:1fr;justify-items:center;padding-top:26px} .tiers.solo .tier{width:min(680px,100%);border:2px solid var(--cyan); box-shadow:0 6px 26px rgba(17,128,131,.14)} .tiers.solo .tier-body{background:#FBFEFE} .tiers.solo .tier-bar{padding-top:16px;padding-bottom:16px} .tiers.solo .bar-name,.tiers.solo .price{font-size:clamp(21px,2.15vw,29px);font-weight:500} .tiers.solo .bullets{column-count:1} .tiers.solo .tier:hover{transform:translateY(-6px); box-shadow:0 12px 30px rgba(17,128,131,.2);border-color:var(--cyan)} @media (max-width:820px){.tiers.solo{padding-top:16px}} .addon{background:#E8F8F9;border:2px solid var(--cyan-lt);border-radius:var(--r); padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px);margin-top:clamp(16px,1.8vw,24px)} .addon h3{font-size:clamp(16px,1.45vw,21px);margin-bottom:6px;font-weight:500} .addon p{font-size:clamp(14px,1.15vw,15.5px);color:var(--muted);max-width:74ch;line-height:1.5} .addon p + p{margin-top:10px} /* ---- recommended tier ---- */ .tiers{align-items:stretch;padding-top:28px} .tier{position:relative;display:flex;flex-direction:column} .tier--featured{border:2px solid var(--cyan);box-shadow:0 6px 26px rgba(17,128,131,.14); transform:translateY(-14px)} .tier--featured .tier-bar{padding-top:16px;padding-bottom:16px} .tier--featured .bar-name,.tier--featured .price{font-size:clamp(21px,2.15vw,29px);font-weight:500} .tier-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%); background:var(--cyan);color:#fff;font-family:'Oswald',sans-serif;text-transform:uppercase; font-size:12px;font-weight:500;letter-spacing:.11em;padding:6px 16px;white-space:nowrap; border-radius:999px;z-index:4} .tier--featured .tier-body{background:#FBFEFE} thead th.col-featured{background:var(--cyan)} tbody td.col-featured{background:#E8F8F9;font-weight:500} tbody tr:nth-child(even) td.col-featured{background:#DEF4F5} @media (max-width:900px){ .tier--featured{transform:none;margin-top:14px} .tier-badge{top:-13px} .tiers{padding-top:16px} } @media print{.tier--featured{transform:none;box-shadow:none}.tiers{padding-top:22px}} /* ---- recommended event package ---- */ .cards3{display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch;padding-top:28px} .card{position:relative;display:flex;flex-direction:column} .card--featured{border:2px solid var(--cyan);box-shadow:0 6px 26px rgba(17,128,131,.14); transform:translateY(-14px)} .card--featured .card-top{padding-top:15px;padding-bottom:15px} .card--featured .card-body{background:#FBFEFE} @media (max-width:900px){ .card--featured{transform:none;margin-top:14px} .cards3{padding-top:16px} } @media print{.card--featured{transform:none;box-shadow:none}.cards3{padding-top:22px}} /* --------------------------------------------------------------- Responsive: three columns straight to one. The intermediate two-column state leaves an orphaned card, so it's skipped. --------------------------------------------------------------- */ @media (max-width:900px){ .tiers,.cards3{grid-template-columns:1fr} .tiers .tier,.cards3 .card{max-width:none} } @media (max-width:860px){ .stats{grid-template-columns:1fr 1fr} } /* ---- closing call to action ---- */ .cta{background:var(--ink);color:#fff;border-radius:0; width:100%;max-width:none;margin-left:calc(50% - 50%); padding:clamp(40px,5vw,76px) clamp(24px,5vw,80px); margin-top:clamp(40px,5vw,76px);text-align:center} .cta > *{max-width:1180px;margin-inline:auto} .cta h3{color:#fff;font-size:clamp(22px,2.8vw,36px);margin-bottom:10px;font-weight:400} .cta p{color:#B9C0C0;font-size:clamp(14.5px,1.3vw,17px);max-width:56ch; margin:0 auto 20px;line-height:1.5} .cta > a{display:inline-block;font-family:'Oswald',sans-serif;text-transform:uppercase; letter-spacing:-.015em;font-size:clamp(19px,2.3vw,30px);font-weight:500; color:var(--cyan-lt);text-decoration:none;border-bottom:3px solid var(--cyan-lt); padding-bottom:3px} .cta > a:hover{color:#fff;border-color:#fff} .cta .cta-sub{display:block;margin-top:16px;font-size:13.5px;color:#8E9797;letter-spacing:.02em} @media print{.cta{background:#fff;color:var(--ink);border:2px solid var(--ink); padding:18px 22px} .cta h3{color:var(--ink)}.cta p{color:var(--muted)}.cta a{color:var(--ink);border-color:var(--cyan)}} /* ---- featured image placeholder ---- Shows where each page's WordPress featured image will render. Delete this rule once real images are in; the .hero-img element stays. */ .hero-slot{width:100%;aspect-ratio:8/3;border-radius:var(--r); border:2px dashed var(--rule);background: repeating-linear-gradient(45deg,#fff,#fff 12px,#F7F8F8 12px,#F7F8F8 24px); display:flex;flex-direction:column;align-items:center;justify-content:center; gap:6px;margin:24px 0 4px;text-align:center;padding:20px} .hero-slot b{font-family:'Oswald',sans-serif;text-transform:uppercase; font-size:clamp(14px,1.4vw,19px);letter-spacing:.02em;color:var(--muted)} .hero-slot span{font-size:clamp(12px,1.05vw,14px);color:#8E9494;max-width:52ch} @media print{.hero-slot{display:none}} /* ---- masthead lockup ---- */ .mast-brand{display:flex;align-items:center;text-decoration:none;line-height:0} .mast-brand img{width:clamp(168px,22vw,225px)} .mast-sub{font-family:'Oswald',sans-serif;text-transform:uppercase; font-size:clamp(11px,1.1vw,15px);font-weight:400;letter-spacing:.1em; color:var(--muted);line-height:1.1;white-space:nowrap;margin-left:auto;text-align:right} @media (max-width:520px){ /* keep it on one line: the logo yields space rather than the label wrapping */ .mast-sub{font-size:12px;letter-spacing:.02em;white-space:nowrap; max-width:none;line-height:1.1;flex:0 0 auto} .mast-brand{flex:0 1 auto;min-width:0} .mast-brand img{width:clamp(130px,38vw,190px)} .mast{padding:7px 0 0;gap:10px} } @media (max-width:380px){ .mast-sub{font-size:11px} .mast-brand img{width:clamp(118px,34vw,160px)} } /* header image sits directly under the nav, above the page copy */ /* --------------------------------------------------------------- Hero — full bleed, with the page title and intro laid over it. Falls back to plain text when a page has no featured image. --------------------------------------------------------------- */ .hero-wrap{position:relative;margin-top:0;margin-bottom:0; min-height:clamp(340px,40vw,540px);display:flex;align-items:flex-end; background:var(--ink);overflow:hidden} .hero-wrap .hero-img,.hero-wrap .hero-slot{ position:absolute;inset:0;margin:0;width:100%;height:100%; border-radius:0;aspect-ratio:auto;object-fit:cover} .hero-wrap:after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.18) 30%, rgba(0,0,0,.55) 62%,rgba(0,0,0,.80) 82%,rgba(0,0,0,.90) 100%)} .hero-copy{position:relative;z-index:2;width:100%; padding:clamp(28px,4vw,64px) 0 clamp(26px,3.4vw,52px)} .hero-copy .eyebrow{color:var(--orange)} .hero-copy h1,.hero-copy h2{color:#fff;max-width:18ch;text-shadow:0 1px 18px rgba(0,0,0,.35)} .hero-copy .lede{color:rgba(255,255,255,.92);max-width:56ch;text-shadow:0 1px 12px rgba(0,0,0,.3)} .hero-wrap .hero-slot{display:flex} /* no image: normal text, no overlay */ .hero-wrap.is-plain{min-height:0;background:none;display:block} .hero-wrap.is-plain .hero-copy{width:min(1180px,100% - clamp(28px,5vw,80px));margin-inline:auto} .hero-wrap.is-plain:after{display:none} .hero-wrap.is-plain .hero-copy{padding:clamp(18px,2.4vw,34px) 0 0} .hero-wrap.is-plain h1,.hero-wrap.is-plain h2{color:var(--ink)} .hero-wrap.is-plain .lede{color:var(--muted)} @media (max-width:640px){ .hero-wrap{min-height:clamp(300px,72vw,420px)} .hero-copy h1,.hero-copy h2{max-width:none} } @media print{ .hero-wrap{min-height:0;background:none;display:block} .hero-wrap:after{display:none} .hero-wrap .hero-img{position:static;height:auto;max-height:2.6in} .hero-copy{padding:0} .hero-copy h1,.hero-copy h2{color:var(--ink)} .hero-copy .lede{color:var(--muted)} } /* --------------------------------------------------------------- Navigation Desktop: a row of links. Mobile: a dropdown showing the current page, using
so it needs no JavaScript. --------------------------------------------------------------- */ .nav-select{display:none} .nav-select summary{list-style:none;cursor:pointer;display:flex;align-items:center; justify-content:center;gap:10px;padding:13px 0; font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:15px; font-weight:400;letter-spacing:.05em;color:#fff} /* hamburger, so it reads as a menu rather than a page title */ .nav-select summary:before{content:"";width:17px;height:13px;flex:0 0 17px; background:linear-gradient(var(--cyan-lt) 0 2px, transparent 2px 5.5px, var(--cyan-lt) 5.5px 7.5px, transparent 7.5px 11px, var(--cyan-lt) 11px 13px)} .nav-select summary .nav-current{color:rgba(255,255,255,.55)} .nav-select[open] summary:before{background:linear-gradient(#fff 0 2px, transparent 2px 5.5px, #fff 5.5px 7.5px, transparent 7.5px 11px, #fff 11px 13px)} .nav-select summary::-webkit-details-marker{display:none} .nav-select summary:after{content:"";width:9px;height:9px;flex:0 0 9px; border-right:2px solid var(--cyan);border-bottom:2px solid var(--cyan); transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s} .nav-select[open] summary:after{transform:rotate(-135deg) translate(-3px,-3px)} .nav-select .nav-list{display:flex;flex-direction:column;padding:2px 0 12px} /* smooth open/close */ .nav-select::details-content{block-size:0;overflow:hidden; transition:block-size .28s cubic-bezier(.22,.61,.36,1),content-visibility .28s allow-discrete; transition-behavior:allow-discrete} .nav-select[open]::details-content{block-size:auto} @supports not (selector(::details-content)){ .nav-select[open] .nav-list{animation:gk-drop .26s cubic-bezier(.22,.61,.36,1)} @keyframes gk-drop{ from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} } } .nav-select .nav-list{align-items:center} .nav-select .nav-list a{padding:11px 0;text-decoration:none;width:100%;text-align:center; font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:15px; font-weight:400;letter-spacing:.05em;color:rgba(255,255,255,.72); border-top:1px solid rgba(255,255,255,.14);transition:color .15s} .nav-select .nav-list a:hover{color:#fff} .nav-select .nav-list a[aria-current]{color:var(--cyan-lt)} @media (max-width:820px){ .tabs-inner{display:none} .nav-select{display:block} } /* ---- card hover ---- Lift and sharpen on hover. The recommended card keeps its raised position, so its hover lifts from where it already sits. */ .tier{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease} .tier:hover{transform:translateY(-6px);border-color:var(--cyan); box-shadow:0 12px 30px rgba(0,0,0,.09)} .tier--featured:hover{transform:translateY(-20px); box-shadow:0 16px 38px rgba(17,128,131,.2)} .tier .tier-bar{transition:background .18s ease} .tier:hover .tier-bar{background:#111} /* the single-card pages don't need to lift */ /* post examples */ .postlink .post-img{filter:saturate(.92) brightness(.97);transition:filter .25s ease} .postlink:hover .post-img{filter:saturate(1.05) brightness(1.03)} @media (prefers-reduced-motion:reduce){ .tier,.tier:hover,.tier--featured:hover,.postlink,.postlink:hover{ transition:none;transform:none} } @media (hover:none){ .tier:hover,.tier--featured:hover,.postlink:hover{transform:none;box-shadow:inherit} .tier--featured:hover{transform:translateY(-14px)} } /* mobile: no dead space at the foot of a page */ @media (max-width:820px){ .panel{padding-bottom:0} .panel > .photo-band:first-child{margin-top:0} .cta{margin-top:clamp(28px,7vw,44px);padding:clamp(30px,8vw,44px) clamp(20px,6vw,32px)} .tiers{gap:12px} .hero-wrap{margin-bottom:clamp(20px,5vw,30px)} /* a section opening on a full-bleed band stays flush to the header */ .hero-wrap:has(+ .panel--flush){margin-bottom:0} .hero-wrap + .panel--flush{padding-top:0} .panel--flush > .photo-band:first-child{margin-top:0} } /* ---- scrolling gallery ---- Full bleed, drifts left to right. The track holds two copies of the image list so the loop has no seam. Pauses on hover. */ .marquee + .btn-row{margin-top:clamp(22px,2.6vw,34px)} .btn-row + .label,.marquee + .label{margin-top:clamp(34px,4.2vw,56px)} .marquee{position:relative;overflow:hidden; margin-left:calc(-1 * (50vw - 50%));margin-right:calc(-1 * (50vw - 50%)); margin-top:clamp(34px,4.2vw,60px);margin-bottom:clamp(30px,3.6vw,50px)} /* edge fades as overlays rather than a mask — masks can leave the strip unpainted on iOS until something forces a repaint */ .marquee:before,.marquee:after{content:"";position:absolute;top:0;bottom:0; width:clamp(28px,6vw,90px);z-index:2;pointer-events:none} .marquee:before{left:0;background:linear-gradient(90deg,var(--paper),transparent)} .marquee:after{right:0;background:linear-gradient(270deg,var(--paper),transparent)} .marquee-track{display:flex;gap:clamp(10px,1.2vw,18px);width:max-content; animation:guru-marquee 120s linear infinite; will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden} .marquee-item{flex:0 0 auto} .marquee-item img{display:block;height:clamp(150px,17vw,240px);width:auto; border-radius:var(--r);object-fit:cover} @keyframes guru-marquee{ from{transform:translate3d(-50%,0,0)} to{transform:translate3d(0,0,0)} } /* pause on hover only where hover really exists, so a tap can't freeze it */ @media (hover:hover){ .marquee:hover .marquee-track{animation-play-state:paused} } @media (prefers-reduced-motion:reduce){ .marquee-track{animation:none} .marquee{overflow-x:auto;-webkit-overflow-scrolling:touch} } @media print{.marquee{display:none}} /* contact page closes on the same black band as every other page */ .contact-close{background:var(--ink);color:#fff; margin-left:calc(-1 * (50vw - 50%));margin-right:calc(-1 * (50vw - 50%)); padding:clamp(40px,5vw,76px) clamp(24px,5vw,80px); margin-top:clamp(40px,5vw,76px);text-align:center} .contact-close .big a{color:#fff;border-bottom-color:var(--cyan-lt)} .contact-close .meta{color:rgba(255,255,255,.6)} .contact-close .meta a{color:var(--cyan-lt)} @media (max-width:820px){ .contact-close{margin-top:clamp(28px,7vw,44px); padding:clamp(30px,8vw,44px) clamp(20px,6vw,32px)} } @media print{.contact-close{background:#fff;color:var(--ink); margin-left:0;margin-right:0;padding:18px 0} .contact-close .big a{color:var(--ink)}} /* ---- secondary button ---- */ .btn-row{text-align:center;margin:clamp(20px,2.4vw,32px) 0 0} .btn{display:inline-block;font-family:'Oswald',sans-serif;text-transform:uppercase; font-size:clamp(13px,1.15vw,15px);font-weight:500;letter-spacing:.08em; text-decoration:none;color:var(--cyan);border:1.5px solid var(--cyan); border-radius:999px;padding:13px 30px;line-height:1; transition:background .18s ease,color .18s ease,border-color .18s ease} .btn:hover{background:var(--cyan);border-color:var(--cyan);color:#fff} .btn:after{content:"";display:inline-block;width:6px;height:6px;margin-left:9px; border-top:1.5px solid currentColor;border-right:1.5px solid currentColor; transform:rotate(45deg) translateY(-1px)} @media print{.btn-row{display:none}} /* push the closing black band to the bottom of short pages, so no page background is ever visible beneath it */ /* real gap above the closing band; the body fills the viewport so nothing shows beneath it on a short page */ .panel > .cta,.panel > .contact-close{margin-top:clamp(40px,5vw,72px)} /* two full-bleed bands in a row should meet, not leave a strip of page colour between them */ .photo-band + .cta, .photo-band + .btn-row + .cta, .photo-band + .label + .btn-row + .cta{margin-top:0} .photo-band:has(+ .cta){margin-bottom:0} .photo-band:has(+ .label){margin-bottom:clamp(22px,2.6vw,34px)} /* ---- footer social icons ---- */ .socials{display:flex;justify-content:center;align-items:center;flex-wrap:wrap; gap:clamp(16px,2vw,26px);margin-top:clamp(20px,2.4vw,30px)} .soc{display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;padding:0; border-radius:999px;border:1.5px solid rgba(255,255,255,.45); transition:background .18s ease,border-color .18s ease,transform .18s ease} .soc svg{display:block;width:20px;height:20px;flex:0 0 auto;fill:#fff; transition:fill .18s ease} .soc:hover{background:var(--cyan);border-color:var(--cyan);transform:translateY(-2px)} .soc:hover svg{fill:#fff} @media print{.socials{display:none}} /* ---- photo mosaic behind the whole section ---- Dense grid with varied spans so tiles crop at different sizes and always cover the section, however tall it gets. */ .photo-band{position:relative;overflow:hidden;background:var(--ink);margin-bottom:clamp(30px,3.6vw,50px); margin-left:calc(-1 * (50vw - 50%));margin-right:calc(-1 * (50vw - 50%)); margin-top:0;padding:clamp(36px,4.4vw,70px) clamp(24px,5vw,80px) clamp(38px,4.6vw,72px)} .photo-band.is-plain{background:none;padding-left:0;padding-right:0; margin-left:0;margin-right:0;padding-top:clamp(20px,2.4vw,34px)} .photo-band-inner{position:relative;z-index:2;max-width:1180px;margin-inline:auto} .photo-band-bg{position:absolute;inset:0;display:grid; grid-template-columns:repeat(12,1fr);grid-auto-rows:calc(100% / 8);grid-auto-flow:dense} .photo-band-bg span{background-size:cover;background-position:center; grid-column:span 3;grid-row:span 2} .photo-band-bg span:nth-child(6n+1){grid-column:span 4;grid-row:span 3} .photo-band-bg span:nth-child(6n+2){grid-column:span 2;grid-row:span 2} .photo-band-bg span:nth-child(6n+3){grid-column:span 3;grid-row:span 3} .photo-band-bg span:nth-child(6n+4){grid-column:span 3;grid-row:span 2} .photo-band-bg span:nth-child(6n+5){grid-column:span 2;grid-row:span 3} .photo-band-bg span:nth-child(6n+6){grid-column:span 4;grid-row:span 2} .photo-band:after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.68)} .photo-band .tiers{padding-top:28px} .photo-band .tier{box-shadow:0 14px 40px rgba(0,0,0,.34)} .photo-band .addon{box-shadow:0 12px 34px rgba(0,0,0,.3)} .addon{width:min(680px,100%);margin-inline:auto; background:linear-gradient(150deg,#E8F8F9,#D5F2F3); border:2px solid var(--cyan);text-align:center; padding:clamp(24px,2.6vw,34px) clamp(22px,2.4vw,32px)} .addon h3{font-size:clamp(18px,1.75vw,25px);color:var(--ink);margin-bottom:8px} .addon h3{display:flex;align-items:center;justify-content:center;gap:11px} .addon h3:before,.addon h3:after{content:"";flex:0 0 15px;width:15px;height:15px; background:var(--cyan); clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)} .addon p{font-size:clamp(14px,1.2vw,16px);color:var(--muted);max-width:56ch; margin-inline:auto;line-height:1.5} .addon p a{color:var(--cyan);font-weight:600;text-decoration:none; border-bottom:2px solid var(--cyan);transition:color .15s,border-color .15s} .addon p a:hover{color:var(--ink);border-color:var(--ink)} /* links inside a card bullet */ .d a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(17,128,131,.4); transition:color .15s,border-color .15s} .d a:hover{color:var(--ink);border-color:var(--ink)} .photo-band .note{background:var(--paper);padding:12px 16px;border-radius:0 var(--r-sm) var(--r-sm) 0; box-shadow:0 8px 24px rgba(0,0,0,.2)} /* light blocks keep working on the dark band */ .photo-band .btn{color:#fff;border-color:rgba(255,255,255,.55)} .photo-band .btn:hover{background:#fff;border-color:#fff;color:var(--ink)} @media (max-width:720px){ .photo-band-bg{grid-template-columns:repeat(6,1fr);grid-auto-rows:calc(100% / 12)} .photo-band-bg span{grid-column:span 3;grid-row:span 2} .photo-band-bg span:nth-child(6n+1){grid-column:span 4;grid-row:span 3} .photo-band-bg span:nth-child(6n+3){grid-column:span 2;grid-row:span 2} .photo-band-bg span:nth-child(6n+5){grid-column:span 3;grid-row:span 3} } @media print{ .photo-band{background:#fff;padding:0;margin-left:0;margin-right:0} .photo-band-bg,.photo-band:after{display:none} .photo-band .tier{box-shadow:none} .photo-band .note{color:var(--muted);background:none} .photo-band .label{color:var(--muted)} } /* ---- featured articles: a slow drifting strip that links out ---- */ .articles{position:relative;margin-top:10px} .articles-track{display:flex;gap:clamp(12px,1.4vw,20px);width:max-content} .article{flex:0 0 auto;width:clamp(200px,20vw,270px); text-decoration:none;color:inherit} .article-img{display:block;width:100%;aspect-ratio:3/2;border-radius:var(--r); background:var(--rule) center/cover no-repeat; filter:saturate(.92) brightness(.97);transition:filter .25s ease} .article-title{display:block;margin-top:9px;font-size:clamp(12.5px,1.05vw,14px); font-weight:500;line-height:1.35; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .article:hover .article-img{filter:saturate(1.05) brightness(1.03)} .article:hover .article-title{color:var(--cyan)} @media (prefers-reduced-motion:reduce){ .articles-track{animation:none} .articles{overflow-x:auto;-webkit-overflow-scrolling:touch} } @media print{.articles{display:none}} /* ---- audience page: divided channel blocks ---- */ .chan-block{padding-bottom:clamp(30px,3.6vw,50px);margin-bottom:clamp(30px,3.6vw,50px); border-bottom:1px solid var(--rule)} .chan-block:last-of-type{border-bottom:0;padding-bottom:0;margin-bottom:0} .chan-block:first-child{padding-top:clamp(26px,3.2vw,44px)} .chan-block .chan{margin-top:0} /* small heading above a chart or table */ .sub-label{font-family:'Oswald',sans-serif;text-transform:uppercase; font-size:12.5px;font-weight:500;letter-spacing:.1em;color:var(--muted); margin:clamp(24px,2.6vw,34px) 0 12px} /* explanatory line directly under the thing it describes */ .caption{font-size:clamp(13px,1.1vw,14.5px);color:var(--muted);line-height:1.5; margin-top:12px;padding-left:14px;border-left:2px solid var(--cyan)} .caption b{color:var(--ink);font-weight:600} /* ---- motion ---- Numbers count up when they scroll into view; the audience page also fades its blocks in. Tabular figures stop the tile jittering. */ .gk-motion .stat-num{font-variant-numeric:tabular-nums} .gk-motion .reveal{opacity:0;transform:translateY(8px); transition:opacity .32s ease-out,transform .32s ease-out; transition-delay:calc(var(--i,0) * 45ms)} .gk-motion .reveal.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .gk-motion .reveal{opacity:1;transform:none;transition:none} } @media print{.gk-motion .reveal{opacity:1;transform:none}} /* ---- FAQ ---- */ .faq-list{border-top:1px solid var(--rule);margin-bottom:clamp(30px,3.6vw,48px)} /* sitting under the comparison table rather than on its own page */ .faq-list.inline{border-top:0;margin-top:6px;margin-bottom:0} .label + .faq-list.inline{margin-top:6px} .faq-list.inline .faq-item:first-child{border-top:1px solid var(--rule)} .faq-list.inline summary{font-size:clamp(14px,1.25vw,16px);padding:13px 0} .faq-item{border-bottom:1px solid var(--rule)} .faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center; justify-content:space-between;gap:16px;padding:clamp(15px,1.6vw,20px) 0; font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:-.005em; font-size:clamp(15px,1.4vw,19px);font-weight:500;color:var(--ink)} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:after{content:"";flex:0 0 10px;width:10px;height:10px; border-right:2px solid var(--cyan);border-bottom:2px solid var(--cyan); transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease} .faq-item[open] summary:after{transform:rotate(-135deg) translate(-3px,-3px)} .faq-item summary:hover{color:var(--cyan)} .faq-a{padding:0 0 clamp(18px,2vw,24px);font-size:clamp(14px,1.15vw,15.5px); color:var(--muted);line-height:1.6;max-width:70ch} .faq-a a{color:var(--cyan)} .faq-item:target{scroll-margin-top:90px} .faq-item:target summary{color:var(--cyan)} .faq-item::details-content{block-size:0;overflow:hidden; transition:block-size .28s cubic-bezier(.22,.61,.36,1),content-visibility .28s allow-discrete; transition-behavior:allow-discrete} .faq-item[open]::details-content{block-size:auto} /* the little i that links into the FAQ */ .faq-link{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:7px} .faq-i{display:inline-flex;align-items:center;justify-content:center; width:15px;height:15px;flex:0 0 15px;border-radius:50%; border:1px solid var(--cyan);color:var(--cyan); font-family:Georgia,serif;font-size:10px;font-style:italic;line-height:1; transition:background .15s,color .15s} .faq-link:hover .faq-i{background:var(--cyan);color:#fff} @media print{.faq-i{display:none}.faq-item::details-content{block-size:auto}} /* ---- page content, and Contact Form 7 styled to match ---- */ .page-body{max-width:640px;margin:clamp(20px,2.6vw,36px) auto 0} .page-body p{margin-bottom:14px;color:var(--muted)} .wpcf7{margin-top:4px} .wpcf7 label{display:block;font-family:'Oswald',sans-serif;text-transform:uppercase; font-size:12.5px;font-weight:500;letter-spacing:.1em;color:var(--muted);margin-bottom:7px} .wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel], .wpcf7 input[type=url],.wpcf7 select,.wpcf7 textarea{ width:100%;font-family:'Poppins',sans-serif;font-size:15px;color:var(--ink); background:var(--card);border:1px solid var(--rule);border-radius:var(--r-sm); padding:12px 14px;margin-bottom:16px;transition:border-color .15s,box-shadow .15s} .wpcf7 textarea{min-height:130px;resize:vertical} .wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus{ outline:0;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(17,128,131,.13)} .wpcf7 input[type=submit]{display:inline-block;width:auto;cursor:pointer; font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:14px;font-weight:500; letter-spacing:.08em;color:#fff;background:var(--cyan);border:0;border-radius:999px; padding:14px 34px;margin:4px 0 0;transition:background .18s ease} .wpcf7 input[type=submit]:hover{background:var(--ink)} .wpcf7 .wpcf7-list-item{margin:0 18px 10px 0} .wpcf7-not-valid-tip{color:var(--orange);font-size:12.5px;margin:-10px 0 14px} .wpcf7 form .wpcf7-response-output{border:0;border-left:4px solid var(--cyan); background:rgba(17,128,131,.05);border-radius:0 var(--r-sm) var(--r-sm) 0; margin:16px 0 0;padding:12px 16px;font-size:14px;color:var(--muted)} .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output{border-left-color:var(--orange); background:rgba(252,95,37,.07)} @media print{.wpcf7{display:none}} /* links inside notes and captions */ .note a,.caption a,.terms a{color:var(--cyan);text-decoration:none; border-bottom:1px solid rgba(17,128,131,.4);transition:color .15s,border-color .15s} .note a:hover,.caption a:hover,.terms a:hover{color:var(--ink);border-color:var(--ink)} .photo-band .note a{color:var(--cyan)} /* ---- CTA button and the email beneath it ---- */ .cta .cta-btn, .cta .cta-btn:link, .cta .cta-btn:visited{ display:inline-block;font-family:'Oswald',sans-serif;text-transform:uppercase; font-size:clamp(15px,1.4vw,18px);font-weight:500;letter-spacing:.07em; text-decoration:none;border:0;border-bottom:0; color:var(--ink);background:var(--cyan-lt);border-radius:6px; padding:18px 44px;line-height:1;box-shadow:0 6px 20px rgba(103,223,224,.22); transition:background .18s ease,transform .18s ease,box-shadow .18s ease} .cta .cta-btn:hover{background:#fff;transform:translateY(-2px); box-shadow:0 10px 26px rgba(255,255,255,.2)} .cta .cta-alt{margin-top:16px;font-size:14px;color:#9AA3A3;max-width:none} .cta .cta-alt a, .cta .cta-alt a:link, .cta .cta-alt a:visited{ color:#fff;text-decoration:none; border-bottom:1px solid rgba(255,255,255,.4)} .cta .cta-alt a:hover{color:var(--cyan-lt);border-color:var(--cyan-lt)} @media print{ .cta .cta-btn{background:none;color:var(--ink);border:2px solid var(--ink);box-shadow:none} .cta .cta-alt{color:var(--muted)} .cta .cta-alt a{color:var(--ink);border-color:var(--ink)} } /* channel heading links — the site and handle beside Website / Instagram */ .chan span a,.chan span a:link,.chan span a:visited{ color:var(--muted);text-decoration:none; border-bottom:1px solid rgba(90,95,95,.35);transition:color .15s,border-color .15s} .chan span a:hover{color:var(--cyan);border-color:var(--cyan)} @media print{.chan span a{border-bottom:0}} /* condition line at the foot of a card */ .d-fine{display:block;font-size:12px;color:#8A9090;line-height:1.45} .d-fine i{font-style:italic} .d:has(.d-fine){margin-top:14px;padding-top:12px;padding-left:14px; border-top:1px solid var(--rule);border-left:3px solid var(--orange)} .d:has(.d-fine)::before{display:none} /* ---- where to next ---- */ .label-center{text-align:center} /* the next-page buttons sit on their own tinted full-bleed band, so they read as a separate step rather than more page content */ .nextnav-band{margin-left:calc(-1 * (50vw - 50%));margin-right:calc(-1 * (50vw - 50%)); overflow:hidden;background:var(--sand);border-top:1px solid var(--rule); margin-top:clamp(26px,3vw,44px);margin-bottom:0; padding:clamp(22px,2.6vw,34px) clamp(20px,5vw,80px) clamp(20px,2.4vw,30px)} /* the band runs straight into the closing CTA, no page colour between */ .nextnav-band + .cta{margin-top:0} .label.nextnav-label{text-align:center;margin-bottom:11px;color:var(--muted)} /* labels introducing a full-bleed strip keep the content column */ .rail-wrap{margin-left:0;margin-right:0} .btn-row.nextnav{display:flex;flex-wrap:wrap;justify-content:center; gap:clamp(9px,1vw,14px);margin-top:0} .btn-row.nextnav .btn{padding:12px 24px;font-size:clamp(12.5px,1.1vw,14px)} .btn-row.nextnav .btn:after{display:none} @media print{.nextnav-band{display:none}} /* ---- Instagram examples, drifting ---- */ .postrail{position:relative;margin-top:6px} /* no edge fades: they washed out the view counts at the ends of the strip. The arrows already say there is more to see. */ .postrail-track{display:flex;gap:clamp(12px,1.4vw,20px);width:max-content} .postrail-item{flex:0 0 auto;width:clamp(180px,18vw,240px)} .postrail-item .post-img{width:100%;aspect-ratio:3/4;object-fit:cover; border-radius:var(--r);filter:saturate(.92) brightness(.97); transition:filter .25s ease} .postrail-item .postlink:hover .post-img{filter:saturate(1.05) brightness(1.03)} .postrail-item .postlink{display:block} .postrail-item .post-cap span{transition:color .2s ease} .postrail-item .postlink:hover .post-cap span{color:var(--ink)} @media (prefers-reduced-motion:reduce){ .postrail-track{animation:none} .postrail{overflow-x:auto;-webkit-overflow-scrolling:touch} } @media print{.postrail{display:none}} /* ---- what every level includes ---- */ .includes{background:var(--card);border:2px solid var(--cyan);border-radius:var(--r); padding:clamp(15px,1.6vw,20px) clamp(18px,1.9vw,24px);margin-top:clamp(18px,2vw,26px)} .includes-head{font-family:'Oswald',sans-serif;text-transform:uppercase; font-size:clamp(13px,1.15vw,15px);font-weight:500;letter-spacing:.04em; color:var(--cyan);margin-bottom:9px;text-align:center} .includes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:6px clamp(14px,1.8vw,24px)} .includes-item{position:relative;padding-left:21px;font-size:clamp(13px,1.1vw,14.5px); line-height:1.4} .includes-item:before{content:"";position:absolute;left:0;top:.32em;width:12px;height:12px; border-radius:50%;background:var(--cyan)} .includes-item:after{content:"";position:absolute;left:3.5px;top:.57em;width:4.5px;height:2.5px; border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)} .includes-sub{margin-top:11px;padding-top:10px;border-top:1px solid var(--rule); font-size:clamp(12.5px,1.05vw,13.5px);color:var(--muted);text-align:center} .includes-sub a{color:var(--cyan)} @media print{.includes{border-color:var(--ink)}} /* ---- carousel controls ---- The strips are real scroll containers now, so a swipe works on touch and the arrows nudge them on desktop. The drift animation runs until someone interacts, then stops for good. */ .rail{position:relative} /* the outer element scrolls; the inner track stays max-content so cards keep their width instead of squashing */ .rail{overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none; -ms-overflow-style:none;-webkit-overflow-scrolling:touch} .rail::-webkit-scrollbar{display:none} /* arrows must sit outside the scrolling box */ .rail-wrap{position:relative} .rail-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:5; width:44px;height:44px;border-radius:50%;border:1px solid var(--rule); background:rgba(255,255,255,.94);cursor:pointer;display:none; align-items:center;justify-content:center;padding:0; box-shadow:0 4px 16px rgba(0,0,0,.12);transition:background .15s,border-color .15s} .rail-btn:hover{background:var(--cyan);border-color:var(--cyan)} /* the chevron is drawn from two borders, so rotating it shifts its visual centre off the box centre; nudge it back rather than translating the rotated element, which moves it along the rotated axes */ .rail-btn:before{content:"";width:9px;height:9px; border-top:2px solid var(--ink);border-right:2px solid var(--ink); transition:border-color .15s} .rail-btn:hover:before{border-color:#fff} .rail-prev{left:-6px} .rail-prev:before{transform:rotate(-135deg);margin-left:3px} .rail-next{right:-6px} .rail-next:before{transform:rotate(45deg);margin-right:3px} .rail-btn[disabled]{opacity:.3;pointer-events:none} @media (hover:hover) and (min-width:821px){.rail-btn{display:flex}} @media print{.rail-btn{display:none}} /* photo band mosaic keeps its own behaviour; these are the card strips */ /* the strips hold each item once, so there is nothing to loop; they sit still and are swiped or nudged with the arrows */ .rail .articles-track, .rail .postrail-track{animation:none} /* ---- contact page intro above the form ---- */ .contact-blurb{max-width:640px;margin:clamp(22px,2.6vw,34px) auto 0; padding:clamp(18px,2vw,24px) clamp(20px,2.2vw,28px); background:#E8F8F9;border-left:4px solid var(--cyan); border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:clamp(14px,1.2vw,15.5px);line-height:1.6;color:var(--muted)} /* channel heading following a product card needs less air above it */ .tiers + .chan{margin-top:clamp(26px,3vw,40px)} /* ---- landing page ---- */ /* landing stats: one teal band, full bleed, with the button inside it. The band and the button row are separate elements, so both need the bleed and the background or a white strip shows between them. */ .gk-landing .hero-copy{padding-bottom:clamp(30px,3.6vw,52px)} .gk-landing .stats{margin:0;border:0;border-radius:0;overflow:hidden; background:var(--cyan);grid-template-columns:repeat(4,1fr);gap:0; margin-left:calc(-1 * (50vw - 50%));margin-right:calc(-1 * (50vw - 50%)); padding:clamp(22px,2.6vw,34px) clamp(20px,5vw,80px) clamp(14px,1.6vw,20px)} .gk-landing .stat{background:transparent;border:0;border-radius:0;text-align:center; padding:clamp(4px,.8vw,10px) clamp(8px,1.2vw,18px); border-right:1px solid rgba(255,255,255,.22)} .gk-landing .stat:last-child{border-right:0} .gk-landing .stat-num, .gk-landing .stat-num.accent{font-size:clamp(28px,3.6vw,48px);font-weight:400; color:#fff;letter-spacing:-.02em;line-height:1} .gk-landing .stat-lab{color:rgba(255,255,255,.78);margin-top:8px; font-size:clamp(10px,.9vw,12px);letter-spacing:.1em;line-height:1.3} .gk-landing .stats + .stats-btn{margin:0;overflow:hidden;background:var(--cyan); margin-left:calc(-1 * (50vw - 50%));margin-right:calc(-1 * (50vw - 50%)); padding:0 clamp(20px,5vw,80px) clamp(24px,2.8vw,34px)} .btn-row.stats-btn{display:flex;justify-content:center} .btn-row.stats-btn .btn{padding:11px 28px;font-size:clamp(12.5px,1.1vw,14px); color:#fff;border-color:rgba(255,255,255,.55);background:transparent} .btn-row.stats-btn .btn:hover{background:#fff;border-color:#fff;color:var(--cyan)} .btn-row.stats-btn .btn:after{display:none} @media (max-width:860px){ .stats{grid-template-columns:1fr 1fr} .gk-landing .stats{grid-template-columns:1fr 1fr; padding-bottom:clamp(18px,2.2vw,24px)} .gk-landing .stat{padding-top:clamp(12px,1.6vw,18px); padding-bottom:clamp(12px,1.6vw,18px)} .gk-landing .stat:nth-child(2){border-right:0} .gk-landing .stat:nth-child(1),.gk-landing .stat:nth-child(2){ border-bottom:1px solid rgba(255,255,255,.22)} } @media print{ .gk-landing .stats,.gk-landing .stats + .stats-btn{background:none; margin-left:0;margin-right:0;padding-left:0;padding-right:0} .gk-landing .stats{border:1px solid var(--rule)} .gk-landing .stat{border-right:1px solid var(--rule)} .gk-landing .stat-num,.gk-landing .stat-num.accent{color:var(--ink)} .gk-landing .stat-lab{color:var(--muted)} } /* the four offers, built like the tier cards so the kit reads consistently */ .photo-band.offers{margin-top:0} /* on the landing page every band meets the next, with no page colour between */ .gk-landing .stats-btn + .photo-band, .gk-landing .stats + .photo-band{margin-top:0} /* this heading sits over a photo band and has to hold its own against it, so it runs much larger than the small labels elsewhere */ .offers-label{color:#fff;margin:0 0 clamp(18px,2.2vw,30px); font-size:clamp(20px,2.4vw,32px);font-weight:400;letter-spacing:-.01em; line-height:1.1;text-shadow:0 2px 14px rgba(0,0,0,.4)} .photo-band.offers.is-plain .offers-label{color:var(--muted)} .offers-grid{display:grid;grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,20px);align-items:stretch} @media (max-width:1020px){.offers-grid{grid-template-columns:1fr 1fr}} @media (max-width:560px){.offers-grid{grid-template-columns:1fr}} .offer{display:flex;flex-direction:column;text-decoration:none;color:inherit; background:var(--card);border:1px solid var(--rule);border-radius:var(--r); overflow:hidden;box-shadow:0 8px 26px rgba(0,0,0,.18); transition:border-color .18s ease,box-shadow .18s ease} .offer:hover{border-color:var(--cyan);box-shadow:0 8px 30px rgba(17,128,131,.3)} .offer-bar{display:flex;flex-direction:column;align-items:flex-start;justify-content:center; text-align:left;background:var(--ink);color:#fff;min-height:clamp(78px,6.8vw,100px); padding:clamp(13px,1.4vw,17px) clamp(14px,1.5vw,20px); transition:background .18s ease} .offer:hover .offer-bar{background:var(--cyan)} /* Reserve two lines on every card so one wrapping title does not make its black bar taller than the rest, and balance the break when it does wrap. */ .offer-name{display:block;font-family:'Oswald',sans-serif;text-transform:uppercase; font-weight:400;font-size:clamp(20px,2vw,27px);letter-spacing:-.018em; line-height:1.06;text-wrap:balance} /* the button sits centred at the foot */ .offer-foot{display:flex;justify-content:flex-start;margin-top:auto; padding-top:clamp(13px,1.4vw,18px)} /* price sits under the title in the bar, tight against it */ .offer-price{display:block;font-family:'Oswald',sans-serif;font-weight:500; font-size:clamp(13px,1.2vw,15.5px);letter-spacing:.02em;color:var(--cyan-lt); line-height:1;margin-top:5px;transition:color .18s ease} .offer:hover .offer-price{color:#fff} .offer-body{display:flex;flex-direction:column;flex:1; padding:clamp(14px,1.5vw,19px) clamp(15px,1.6vw,20px) clamp(15px,1.6vw,20px)} .offer-hook{display:block;font-family:'Oswald',sans-serif;text-transform:uppercase; font-size:clamp(13px,1.2vw,15px);font-weight:500;letter-spacing:.03em; color:var(--cyan);line-height:1.2;margin-bottom:7px} .offer-text{display:block;font-size:clamp(13.5px,1.15vw,15px);color:var(--muted); line-height:1.5} .offer-more{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:12px; font-weight:500;letter-spacing:.09em;color:var(--cyan);white-space:nowrap; transition:color .18s ease} .offer:hover .offer-more{color:var(--ink)} .offer-more:after{content:"";display:inline-block;width:5px;height:5px;margin-left:8px; border-top:1.5px solid currentColor;border-right:1.5px solid currentColor; transform:rotate(45deg) translateY(-1px)} @media (max-width:1020px){.offers-grid{grid-template-columns:1fr 1fr}} @media (max-width:560px){.offers-grid{grid-template-columns:1fr}} @media print{.offer{box-shadow:none}.offers-label{color:var(--ink)}} /* ---- landing offers on mobile ---- */ @media (max-width:560px){ /* title left, price right, the way the tier cards read */ .offer-bar{flex-direction:row;align-items:center;justify-content:space-between; gap:14px;min-height:0;padding:14px 17px} .offer-name{font-size:19px;line-height:1.1;flex:1 1 auto} .offer-price{margin-top:0;flex:0 0 auto;white-space:nowrap;text-align:right; font-size:14px} .offers-grid{gap:16px} .offer-body{padding:15px 17px 17px} }