/* ========================================================================== G! MARKETING v6 — "The Operator's Notebook" White paper editorial + hand-drawn ink accents. Fonts: Bricolage Grotesque (display) / Barlow (body) / Caveat (handwritten) ========================================================================== */ /* ---------- Design tokens ---------- */ :root{ --ink:#1A1A1A; --charcoal:#2D2D2D; --paper:#FFFFFF; --latte-wash:#F6F1E7; /* warm section background */ --latte:#D4C4A8; --rule:#E4DCCB; /* hairline lines */ --amped:#E94F00; /* the ONLY call-to-action color */ --amped-soft:#FF7A33; --moonshot:#5B6DA3; /* handwritten notes + quiet accents */ --moonshot-pale:#C8CFE2; --gray-dark:#4A4A4A; --gray-mid:#767676; --gray-light:#A8A8A8; /* Brand fonts (Adobe Fonts kit tvn8iij, loaded in each page's ): apotek-wide = headlines ("The Menu Board" pairing, picked 7/24), halyard-text = body copy. Caveat (Google Fonts) stays for handwriting. */ /* v7.1: headlines moved from Apotek Wide to Halyard Display (already in the kit). Every big-agency reference runs a heavy neutral grotesque; Apotek read as playful/techno next to them. */ --font-display:'halyard-display',sans-serif; --font-body:'halyard-text',sans-serif; --font-hand:'imaginaryfriend-bb',cursive; /* v7.3: was Caveat; Nick added Imaginary Friend BB to the kit */ --ease:cubic-bezier(0.16,1,0.3,1); } /* ---------- Reset & base ---------- */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:var(--font-body); background:var(--paper); color:var(--ink); overflow-x:hidden; -webkit-font-smoothing:antialiased; font-size:16px; line-height:1.6; } a{text-decoration:none;color:inherit} img{max-width:100%;display:block} .ctr{max-width:1200px;margin:0 auto;padding:0 48px} @media(max-width:768px){.ctr{padding:0 22px}} /* Screen-reader / honeypot helper */ .hidden-field{display:none!important} /* ========================================================================== NAVIGATION (structure kept from v4) ========================================================================== */ .nav{ position:fixed;top:0;left:0;width:100%;z-index:1000; padding:18px 0 12px; background:rgba(255,255,255,.94); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--rule); transition:opacity .4s cubic-bezier(.4,0,1,1),transform .5s cubic-bezier(.4,0,1,1); transform-origin:center top; } .nav.nav-hidden{opacity:0;transform:scale(.9) translateY(-100%);pointer-events:none} .nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center} .nav-logo{display:flex;align-items:center;justify-content:center} .nav-logo-svg{height:56px;width:auto} .nav-logo-svg .st0{fill:var(--amped)} @media(max-width:1024px){.nav-logo-svg{height:48px}} @media(max-width:600px){.nav-logo-svg{height:44px}} .nav-links{display:flex;align-items:center;gap:34px;list-style:none;justify-content:flex-start} .nav-links a{ font-size:13px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase; color:var(--ink);transition:color .3s; } .nav-links a:hover{color:var(--amped)} /* Mega dropdown */ .nav-dropdown{position:relative} .nav-dd-trigger{display:flex;align-items:center;gap:5px} .dd-arrow{font-size:10px;transition:transform .3s;display:inline-block} .nav-dropdown:hover .dd-arrow{transform:rotate(180deg)} .nav-dd-menu{ position:absolute;top:100%;left:-20px;padding-top:16px; opacity:0;visibility:hidden;transform:translateY(8px); transition:all .35s var(--ease);pointer-events:none;z-index:100; display:flex; } .nav-dropdown:hover .nav-dd-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto} .nav-dd-menu::before{content:'';position:absolute;top:8px;left:0;right:0;height:16px} .dd-inner{display:flex} .nav-dd-menu>.dd-col{background:#fff;border-top:2px solid var(--ink);box-shadow:0 16px 48px rgba(26,26,26,.10);border-bottom:1px solid var(--rule)} .nav-dd-menu>.dd-col:first-child{border-left:1px solid var(--rule)} .nav-dd-menu>.dd-col:last-child{border-right:1px solid var(--rule)} .dd-col{padding:26px 30px;min-width:180px;border-right:1px solid var(--rule)} .dd-heading{ font-family:var(--font-body);font-size:11px;font-weight:700; color:var(--amped);margin-bottom:12px;letter-spacing:2px;text-transform:uppercase; } .dd-link{ display:block;font-size:14px;font-weight:500;color:var(--ink); padding:6px 0;transition:color .2s,padding-left .2s; } .dd-link:hover{color:var(--amped);padding-left:4px} .dd-item{display:block;font-size:14px;font-weight:500;color:var(--gray-mid);padding:6px 0;cursor:default} /* Login + CTA (right side) */ .nav-right-group{display:flex;align-items:center;justify-content:flex-end;gap:16px} /* Stacked 2-line urgency badge */ .nav-badge{ display:flex;flex-direction:column;gap:2px; font-size:10px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--gray-mid); white-space:nowrap;line-height:1.2; } .nav-badge-line2{font-size:9px;color:var(--gray-mid);opacity:.7} /* The spots-remaining number: orange and blinking to pull the eye */ .nav-badge-num{color:var(--amped);font-weight:800;animation:blink 1.6s ease-in-out infinite} @media(max-width:1100px){.nav-badge{display:none}} .nav-login{position:relative;display:flex;align-items:center} .login-icon{ width:32px;height:32px;display:flex;align-items:center;justify-content:center; cursor:pointer;transition:all .3s;color:var(--ink); } .nav-login:hover .login-icon{color:var(--amped);transform:scale(1.08)} .login-dropdown{ position:absolute;top:100%;right:0;margin-top:14px;background:#fff; border-top:2px solid var(--ink);border-left:1px solid var(--rule);border-right:1px solid var(--rule);border-bottom:1px solid var(--rule); box-shadow:0 16px 48px rgba(26,26,26,.10);padding:22px;width:250px; opacity:0;visibility:hidden;transform:translateY(8px);transition:all .3s var(--ease); } .nav-login:hover .login-dropdown{opacity:1;visibility:visible;transform:translateY(0)} .login-title{font-family:var(--font-display);font-size:16px;font-weight:700;margin-bottom:6px} .login-sub{font-size:13px;color:var(--gray-mid);line-height:1.5;margin-bottom:14px} .login-btn{ display:block;text-align:center;width:100%;padding:11px; background:var(--ink);color:#fff;font-size:13px;font-weight:600; letter-spacing:.5px;border-radius:100px;transition:background .3s;cursor:pointer; } .login-btn:hover{background:var(--amped)} .nav-cta{ display:inline-block;padding:8px 20px;background:var(--amped);color:#fff; font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase; border:1.5px solid var(--amped);border-radius:100px;cursor:pointer; transition:all .35s var(--ease);white-space:nowrap; } .nav-cta:hover{background:#fff;color:var(--amped)} /* Mobile toggle + slide menu */ .menu-toggle{display:none} .mobile-menu{display:none} @media(max-width:1024px){ .nav-links,.nav-right-group{display:none!important} .nav-in{display:flex;align-items:center;justify-content:center;position:relative} .menu-toggle{ display:flex;align-items:center;gap:8px; font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase; color:var(--ink);cursor:pointer;background:none;border:none; position:absolute;right:22px;top:50%;transform:translateY(-50%);padding:8px 0;z-index:2; } .menu-toggle .menu-bar{width:22px;height:2px;background:var(--ink);display:block;position:relative;transition:all .3s} .menu-toggle .menu-bar::before,.menu-toggle .menu-bar::after{content:'';position:absolute;left:0;width:22px;height:2px;background:var(--ink);transition:all .3s} .menu-toggle .menu-bar::before{top:-6px} .menu-toggle .menu-bar::after{top:6px} .menu-toggle.active .menu-bar{background:transparent} .menu-toggle.active .menu-bar::before{top:0;transform:rotate(45deg)} .menu-toggle.active .menu-bar::after{top:0;transform:rotate(-45deg)} .mobile-menu{ position:fixed;top:0;right:-100%;width:100%;height:100vh;background:var(--paper);z-index:999; transition:right .5s var(--ease); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px; /* If the links get taller than a short phone screen (e.g. the What We Do accordion is open), let the menu scroll instead of clipping links */ overflow-y:auto;padding:90px 20px 40px; } /* These auto margins keep the links vertically centered when they fit, but let them scroll naturally when they overflow */ .mobile-menu > :first-child{margin-top:auto} .mobile-menu > :last-child{margin-bottom:auto} .mobile-menu.open{right:0} /* --- "What We Do" accordion inside the mobile menu --- */ .mobile-dd{display:flex;flex-direction:column;align-items:center} /* The trigger is a button, but styled to match the other big menu links */ .mobile-dd-trigger{ font-family:var(--font-display);font-size:clamp(34px,8vw,52px);font-weight:800; color:var(--ink);background:none;border:none;cursor:pointer;padding:0; display:flex;align-items:center;gap:10px;transition:color .3s; } .mobile-dd-trigger .m-dd-arrow{font-size:.45em;color:var(--amped);transition:transform .3s var(--ease)} .mobile-dd.open .mobile-dd-trigger .m-dd-arrow{transform:rotate(180deg)} /* Collapsed by default; sliding open via max-height */ .mobile-dd-menu{ max-height:0;overflow:hidden;transition:max-height .45s var(--ease); display:flex;flex-direction:column;align-items:center; } .mobile-dd.open .mobile-dd-menu{max-height:360px} /* Service links are smaller than the section links so six of them fit */ .mobile-menu .mobile-dd-menu a{ font-family:var(--font-body);font-size:17px;font-weight:600; color:var(--gray-mid);padding:8px 0; } .mobile-menu .mobile-dd-menu a:first-child{padding-top:16px} .mobile-menu a{ font-family:var(--font-display);font-size:clamp(34px,8vw,52px);font-weight:800; color:var(--ink);transition:color .3s; } .mobile-menu a:hover{color:var(--amped)} .mobile-menu .mobile-cta{ font-family:var(--font-body);font-size:15px;font-weight:700;letter-spacing:1px;text-transform:uppercase; padding:16px 38px;background:var(--amped);color:#fff!important;border-radius:100px;margin-top:10px; } } /* ========================================================================== HERO ========================================================================== */ .hero{ min-height:92svh;display:flex;align-items:center; padding:150px 0 60px;position:relative;overflow:hidden; } .hero-in{position:relative;z-index:1} /* v7.1: hero is centered like the reference sites */ .hero-in{text-align:center} .hero-h1{ font-family:var(--font-display); font-size:clamp(42px,6.6vw,88px); font-weight:800;line-height:1.02;letter-spacing:-.5px; max-width:1000px;margin:0 auto 30px; opacity:0;transform:translateY(24px);animation:fu 1s var(--ease) .15s forwards; } .hero-accent{color:var(--amped)} .underline-wrap{position:relative;white-space:nowrap} .sketch-underline{ position:absolute;left:-2%;bottom:-.12em;width:104%;height:.18em;overflow:visible; } .sketch-underline path{ stroke-dasharray:330;stroke-dashoffset:330; animation:draw 1s var(--ease) .95s forwards; } .hero-sub{ font-size:18px;line-height:1.65;color:var(--gray-mid);max-width:600px;margin:0 auto 40px; opacity:0;transform:translateY(20px);animation:fu 1s var(--ease) .35s forwards; } .hero-ctas{ display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:22px;position:relative; opacity:0;transform:translateY(20px);animation:fu 1s var(--ease) .55s forwards; } .btn-primary{ display:inline-flex;align-items:center;gap:10px; font-size:14px;font-weight:600;padding:12px 28px;letter-spacing:.3px; background:var(--amped);color:#fff;border-radius:100px; transition:all .4s var(--ease); } .btn-primary:hover{background:var(--amped-soft);transform:translateY(-2px);box-shadow:0 12px 36px rgba(233,79,0,.22)} .btn-primary .ar{transition:transform .3s} .btn-primary:hover .ar{transform:translateX(4px)} .btn-ghost{ font-size:15px;font-weight:600;color:var(--ink); border-bottom:2px solid var(--latte);padding-bottom:3px;transition:all .3s; } .btn-ghost:hover{color:var(--amped);border-color:var(--amped)} .hero-note{ font-family:var(--font-hand);font-size:21px;font-weight:400;color:var(--amped); display:inline-flex;align-items:flex-end;gap:4px;transform:rotate(-2deg); margin-left:6px; } .note-arrow{width:44px;height:30px;flex-shrink:0} .note-arrow.flip{transform:scaleX(1)} .hero-proof{ display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 0;list-style:none;margin-top:56px; opacity:0;transform:translateY(16px);animation:fu 1s var(--ease) .75s forwards; } .hero-proof li{ display:inline-flex;align-items:center;gap:7px; font-size:13px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--gray-mid); } .hero-proof li + li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--latte);margin:0 20px} .proof-star{width:18px;height:18px;object-fit:contain} @keyframes fu{to{opacity:1;transform:translateY(0)}} @keyframes blink{0%,100%{opacity:1}50%{opacity:.2}} @keyframes draw{to{stroke-dashoffset:0}} /* Small phones: compress the hero so the featured strip lands on the FIRST screen. If the hero content grows taller than 100svh minus the strip, the strip gets pushed below the fold and only the medic's head peeks up, so every line here fights for vertical room. NOTE: this block must stay BELOW the base hero rules; equal-specificity rules that come later in the file win, so placing it earlier silently disables everything in it. */ @media(max-width:640px){ .hero-h1{font-size:clamp(30px,8.6vw,42px);margin-bottom:22px} .hero-sub{font-size:15px;line-height:1.55;margin-bottom:24px} .hero-ctas{gap:14px} /* The arrow points at nothing once the layout stacks: arrow-less on phones, with the note on its own centered line under the punch-list CTA. */ .note-arrow{display:none} .hero-note{display:flex;flex-basis:100%;justify-content:center;margin-left:0;font-size:17px;transform:rotate(-1.5deg)} /* Hidden on phones on purpose: real iPhone viewports (~660-740px svh) cannot fit the proof line AND keep the Elite strip on the first screen. The strip wins; the stats still show on tablet/desktop. */ .hero-proof{display:none} .d-only{display:none} } /* ========================================================================== PARTNER TICKER ========================================================================== */ .ticker-section{padding:40px 0 56px;background:var(--paper);overflow:hidden;border-top:1px solid var(--rule)} .ticker-section .label{ text-align:center;font-family:var(--font-body);font-size:13px;font-weight:700; letter-spacing:3px;text-transform:uppercase; color:var(--gray-mid);margin-bottom:26px; } .ticker{overflow:hidden;position:relative;padding:12px 0} .ticker::before,.ticker::after{content:'';position:absolute;top:0;width:110px;height:100%;z-index:2;pointer-events:none} .ticker::before{left:0;background:linear-gradient(90deg,var(--paper),transparent)} .ticker::after{right:0;background:linear-gradient(-90deg,var(--paper),transparent)} .ticker-track{display:flex;gap:56px;animation:scroll 38s linear infinite;width:max-content;align-items:center} .ticker-track.rev{animation-direction:reverse} .logo-img{height:74px;width:auto;opacity:.55;transition:opacity .3s;flex-shrink:0;filter:grayscale(1)} .logo-img:hover{opacity:.95;filter:grayscale(0)} @media(max-width:768px){.logo-img{height:48px}} /* Track holds two identical logo sets separated by the flex gap (56px). One perfect loop = one set + one seam gap = 50% of total + half a gap. Plain -50% left the seam out, so the loop jumped and logos vanished early. */ @keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(calc(-50% - 28px))}} .ticker+.ticker{margin-top:8px} /* ========================================================================== SECTIONS (shared) ========================================================================== */ .section{padding:120px 0} .latte-bg{background:var(--latte-wash)} .sec-head{ border-top:1px solid var(--ink); padding-top:26px;margin-bottom:70px; text-align:center; /* v7.1: centered composition, like every reference site */ } .sec-eyebrow{ /* v7.1: was handwritten Caveat; now a clean uppercase label */ font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:3px; text-transform:uppercase;color:var(--amped); margin-bottom:16px;display:inline-block; } .sec-title{ font-family:var(--font-display); font-size:clamp(34px,4.6vw,60px);font-weight:800;line-height:1.05;letter-spacing:-.5px; margin-bottom:20px;max-width:820px;margin-left:auto;margin-right:auto; } .sec-title em{font-style:normal;color:var(--amped)} .sec-sub{font-size:17px;line-height:1.7;color:var(--gray-mid);max-width:560px;margin:0 auto} /* Phones: 120px of section air reads as an awkward void, especially between the logo ticker and What We Build. Tighter, consistent rhythm. (Kept BELOW the base rules above: later equal-specificity rules win.) */ @media(max-width:640px){ .section{padding:64px 0} .sec-head{margin-bottom:44px} .ticker-section{padding:32px 0 40px} } /* Scroll-reveal helper */ .rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .rv.vis{opacity:1;transform:translateY(0)} .rv-d1{transition-delay:.08s} .rv-d2{transition-delay:.16s} .rv-d3{transition-delay:.24s} /* ========================================================================== WHAT WE BUILD ========================================================================== */ .svc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} @media(max-width:900px){.svc-cards{grid-template-columns:1fr}} .svc-card{ padding:44px 36px;background:var(--paper); border:1px solid var(--rule);border-radius:4px; display:flex;flex-direction:column;position:relative; transition:all .5s var(--ease); box-shadow:2px 3px 0 rgba(26,26,26,.05); } .svc-card:hover{transform:translateY(-5px);border-color:var(--ink);box-shadow:5px 7px 0 rgba(233,79,0,.16)} .svc-icon{width:96px;height:96px;object-fit:contain;margin-bottom:26px;transition:transform .4s var(--ease)} .svc-card:hover .svc-icon{transform:rotate(-4deg) scale(1.06)} .svc-tag{font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--gray-light);margin-bottom:14px} .svc-card h3{font-family:var(--font-display);font-size:29px;font-weight:800;line-height:1.15;margin-bottom:14px;letter-spacing:-.3px} .svc-card .desc{font-size:15px;line-height:1.7;color:var(--gray-mid);margin-bottom:28px;flex-grow:1} .svc-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none} .svc-tags li{ font-size:12px;font-weight:500;color:var(--gray-mid); padding:6px 14px;background:var(--latte-wash);border:1px solid var(--rule);border-radius:100px; } /* ========================================================================== PRICING — THE MENU ========================================================================== */ .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch} @media(max-width:980px){.pricing-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}} .tier{ background:var(--paper);border:1px solid var(--rule);border-radius:4px; padding:46px 36px 40px;display:flex;flex-direction:column;position:relative; transition:all .5s var(--ease); box-shadow:2px 3px 0 rgba(26,26,26,.05); } .tier:hover{transform:translateY(-5px);box-shadow:6px 8px 0 rgba(26,26,26,.08)} .tier.featured{border:2px solid var(--ink);box-shadow:6px 8px 0 rgba(233,79,0,.2)} .tier.featured:hover{box-shadow:8px 11px 0 rgba(233,79,0,.24)} .tier-badge{ position:absolute;top:-22px;left:50%;transform:translate(-50%,0) rotate(-2deg); padding:8px 22px; } .tier-badge span{ font-family:var(--font-hand);font-size:22px;font-weight:700;color:var(--amped);white-space:nowrap;position:relative;z-index:1; } .scribble-circle{position:absolute;inset:-6px -10px;width:calc(100% + 20px);height:calc(100% + 12px)} .scribble-circle path{stroke-dasharray:520;stroke-dashoffset:520} .vis .scribble-circle path, .tier.featured.vis .scribble-circle path{animation:draw 1.2s var(--ease) .7s forwards} .tier-icon{width:88px;height:88px;object-fit:contain;margin-bottom:20px} .tier-name{font-family:var(--font-display);font-size:34px;font-weight:800;letter-spacing:-.3px;margin-bottom:4px} .tier-tagline{font-family:var(--font-hand);font-size:22px;font-weight:400;color:var(--moonshot);margin-bottom:22px} .tier-price{display:flex;align-items:baseline;gap:4px;margin-bottom:6px} .tier-price .num{font-family:var(--font-display);font-size:46px;font-weight:800;letter-spacing:-1px} .tier-price .per{font-size:16px;color:var(--gray-mid);font-weight:500} .tier-ast{font-size:14px;color:var(--amped)} .tier-setup{font-size:13px;font-weight:600;color:var(--gray-dark);margin-bottom:6px} .tier-for{font-size:14px;color:var(--gray-mid);margin-bottom:26px;padding-bottom:22px;border-bottom:1px dashed var(--latte)} .tier-feat{list-style:none;margin-bottom:34px;flex-grow:1} .tier-feat li{ font-size:15px;color:var(--gray-dark);padding:7px 0 7px 30px;position:relative; } .tier-feat li::before{ content:'';position:absolute;left:0;top:9px;width:18px;height:18px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13 C 7 15, 9 18, 10 19 C 13 13, 17 7, 21 4' fill='none' stroke='%23E94F00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:contain;background-repeat:no-repeat; } .tier-cta{ display:block;text-align:center;padding:15px;border-radius:100px; font-size:14px;font-weight:700;letter-spacing:.5px; border:2px solid var(--ink);color:var(--ink); transition:all .35s var(--ease); } .tier-cta:hover{background:var(--ink);color:#fff} .tier.featured .tier-cta{background:var(--amped);border-color:var(--amped);color:#fff} .tier.featured .tier-cta:hover{background:var(--amped-soft);border-color:var(--amped-soft)} /* Custom Latte: wide "off the menu" card under the three tiers */ .custom-latte{ margin-top:26px; background:var(--paper);border:1px dashed var(--ink);border-radius:4px; padding:34px 40px;display:flex;align-items:center;gap:36px; box-shadow:2px 3px 0 rgba(26,26,26,.05); transition:all .5s var(--ease); } .custom-latte:hover{transform:translateY(-3px);box-shadow:6px 8px 0 rgba(26,26,26,.08)} .cl-left{flex-shrink:0} .custom-latte .tier-tagline{margin-bottom:0} .cl-desc{font-size:15px;line-height:1.7;color:var(--gray-dark);flex:1} .cl-cta{flex-shrink:0;padding:15px 32px} @media(max-width:980px){ .custom-latte{flex-direction:column;align-items:flex-start;gap:18px;max-width:520px;margin:26px auto 0} .cl-cta{align-self:stretch} } .pricing-note{font-size:13px;color:var(--gray-mid);text-align:center;margin-top:44px} .pricing-foot{font-size:15px;color:var(--gray-dark);text-align:center;margin-top:10px} .pricing-foot a{color:var(--amped);font-weight:600;border-bottom:1px solid rgba(233,79,0,.35)} .pricing-foot a:hover{border-color:var(--amped)} /* ========================================================================== THE MATH — ONE SALARY BANNER (dark editorial band) ========================================================================== */ .salary-banner{ background:var(--ink);color:#fff; padding:110px 0;position:relative;overflow:hidden; text-align:center; /* centered on purpose: breaks the left-aligned rhythm of the page */ } .sb-eyebrow{ font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:3px; text-transform:uppercase;color:var(--latte); margin-bottom:16px;display:inline-block; } .sb-title{ font-family:var(--font-display); font-size:clamp(32px,4.6vw,58px);font-weight:800;line-height:1.08;letter-spacing:-.5px; margin-bottom:26px;max-width:900px;margin-left:auto;margin-right:auto;color:#fff; } .sb-title .underline-wrap{white-space:nowrap} .sb-underline{bottom:-.1em} .salary-banner .sketch-underline path{stroke-dasharray:330;stroke-dashoffset:330;animation:none} .salary-banner .rv.vis .sketch-underline path, .salary-banner .sb-title.vis .sketch-underline path{animation:draw 1s var(--ease) .5s forwards} .sb-sub{font-size:17px;line-height:1.75;color:rgba(255,255,255,.72);max-width:640px;margin:0 auto 34px} .sb-roles{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;list-style:none;margin-bottom:22px} .sb-roles li{ font-size:13px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:#fff; padding:9px 20px;border:1px solid rgba(255,255,255,.28);border-radius:100px; } .sb-note{ font-family:var(--font-hand);font-size:23px;font-weight:400;color:var(--amped); transform:rotate(-1.5deg);display:inline-block; } /* handwritten note under the investment promises (centered, one wink kept) */ .menu-note{ font-family:var(--font-hand);font-size:23px;font-weight:400;color:var(--amped); transform:rotate(-1.5deg);display:block;text-align:center;margin-top:44px; } /* ========================================================================== WHY G! ========================================================================== */ .why-list{display:flex;flex-direction:column} .why-row{ display:grid;grid-template-columns:120px 1fr;gap:36px;align-items:center; padding:44px 0;border-bottom:1px solid var(--rule); } .why-row:last-child{border-bottom:none} @media(max-width:768px){ .why-row{grid-template-columns:80px 1fr;gap:20px} } .why-icon{width:104px;height:104px;object-fit:contain} @media(max-width:768px){.why-icon{width:76px;height:76px}} .why-body h3{font-family:var(--font-display);font-size:26px;font-weight:800;line-height:1.15;margin-bottom:10px;letter-spacing:-.3px} .why-body p{font-size:16px;line-height:1.7;color:var(--gray-mid);max-width:680px} /* ========================================================================== THE WORK — SCRAPBOOK ========================================================================== */ .scrapbook{ display:grid;grid-template-columns:repeat(4,1fr);gap:34px 26px; } @media(max-width:1000px){.scrapbook{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.scrapbook{grid-template-columns:1fr;max-width:340px;margin:0 auto}} .snap{ background:#fff;padding:10px 10px 8px; box-shadow:0 6px 22px rgba(26,26,26,.12); position:relative;transition:transform .45s var(--ease),box-shadow .45s var(--ease); } .snap img{width:100%;aspect-ratio:4/5;object-fit:cover} .snap figcaption{ font-family:var(--font-hand);font-size:20px;font-weight:400;color:var(--amped); text-align:center;padding:10px 4px 6px; } /* masking-tape strip on top */ .snap::before{ content:'';position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-3deg); width:92px;height:26px;background:rgba(212,196,168,.65); box-shadow:0 1px 3px rgba(26,26,26,.08); } .tilt-l{transform:rotate(-2deg)} .tilt-r{transform:rotate(1.6deg)} .tilt-l2{transform:rotate(-1.2deg)} .tilt-r2{transform:rotate(2.2deg)} .snap:hover{transform:rotate(0deg) translateY(-6px) scale(1.02);box-shadow:0 18px 44px rgba(26,26,26,.18);z-index:2} /* the scrapbook lives inside a .rv wrapper, so re-apply tilts after reveal */ .rv .snap{transition:transform .45s var(--ease),box-shadow .45s var(--ease)} /* ========================================================================== THE WORK — CASE STUDY CARDS ========================================================================== */ .case-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:30px} @media(max-width:900px){.case-cards{grid-template-columns:1fr}} .case-card{ background:var(--paper);border:1px solid var(--rule);border-radius:4px;overflow:hidden; box-shadow:2px 3px 0 rgba(26,26,26,.05); transition:all .5s var(--ease);display:flex;flex-direction:column; } .case-card:hover{transform:translateY(-5px);border-color:var(--ink);box-shadow:6px 8px 0 rgba(233,79,0,.16)} .cc-img{overflow:hidden;border-bottom:1px solid var(--rule)} .cc-img img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .6s var(--ease)} .case-card:hover .cc-img img{transform:scale(1.03)} .cc-body{padding:30px 32px 34px} .cc-cat{ font-family:var(--font-body);font-size:12px;font-weight:700;color:var(--amped); letter-spacing:2.5px;text-transform:uppercase; margin-bottom:8px;display:inline-block; } .cc-body h3{font-family:var(--font-display);font-size:27px;font-weight:800;line-height:1.15;letter-spacing:-.3px;margin-bottom:10px} .cc-desc{font-size:15px;line-height:1.7;color:var(--gray-mid);margin-bottom:20px} .cc-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none} .cc-tags li{ font-size:12px;font-weight:500;color:var(--gray-mid); padding:6px 14px;background:var(--latte-wash);border:1px solid var(--rule);border-radius:100px; } /* small camera-roll strip under the case cards */ .scrap-label{ font-family:var(--font-hand);font-size:24px;font-weight:400;color:var(--amped); margin:64px 0 30px;transform:rotate(-1.5deg);display:inline-block; } .scrapbook.mini{gap:30px 22px} /* ========================================================================== RESULTS — CASE STUDY ========================================================================== */ .case-photos-hero{margin-bottom:56px;overflow:hidden;border-radius:4px;max-height:420px} .case-hero-img{width:100%;height:420px;object-fit:cover} .case-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start} @media(max-width:900px){.case-grid{grid-template-columns:1fr;gap:48px}} .case-label{ font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:2.5px; text-transform:uppercase;color:var(--amped);margin-bottom:10px; } .case-name{font-family:var(--font-display);font-size:38px;font-weight:800;line-height:1.12;margin-bottom:20px;letter-spacing:-.4px} .case-story{font-size:16px;line-height:1.75;color:var(--gray-dark);margin-bottom:30px} .case-tags{display:flex;flex-wrap:wrap;gap:6px} .case-tags span{ font-size:12px;font-weight:500;color:var(--gray-mid); padding:6px 14px;background:var(--latte-wash);border:1px solid var(--rule);border-radius:100px; } .metrics{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:520px){.metrics{grid-template-columns:1fr}} .metric{ background:var(--paper);padding:36px 30px;border:1px solid var(--rule);border-radius:4px; box-shadow:2px 3px 0 rgba(26,26,26,.05);transition:all .4s var(--ease); } .metric:hover{transform:translateY(-3px);border-color:var(--ink)} .metric-num{font-family:var(--font-display);font-size:clamp(34px,3.8vw,48px);font-weight:800;color:var(--amped);line-height:1;margin-bottom:10px} .metric-lbl{font-size:14px;line-height:1.5;color:var(--gray-mid)} /* Link from the Elite metrics block to its dedicated case study page */ .case-cta{margin-top:6px} .case-photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px} @media(max-width:768px){.case-photo-strip{grid-template-columns:1fr}} .case-strip-img{width:100%;height:280px;object-fit:cover;border-radius:4px} /* ========================================================================== FREE COFFEE — CONTACT ========================================================================== */ .cta-layout{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start} @media(max-width:900px){.cta-layout{grid-template-columns:1fr;gap:56px}} .cta-left .sec-eyebrow{margin-bottom:10px;font-size:24px} .cta-left .sec-title{margin-bottom:24px} .cta-left p{font-size:16px;line-height:1.75;color:var(--gray-mid);margin-bottom:22px;max-width:420px} .cta-note{ font-family:var(--font-hand);font-size:22px!important;font-weight:400;color:var(--amped)!important; display:flex;align-items:flex-end;gap:6px;transform:rotate(-1.5deg); } /* v7: what-you-get list in the teardown/contact section. Same hand-sketched checkmark the old menu tiers used. */ .offer-list{list-style:none;margin:4px 0 26px;max-width:440px} .offer-list li{ font-size:15px;line-height:1.6;color:var(--gray-dark); padding:8px 0 8px 30px;position:relative; } .offer-list li::before{ content:'';position:absolute;left:0;top:11px;width:18px;height:18px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13 C 7 15, 9 18, 10 19 C 13 13, 17 7, 21 4' fill='none' stroke='%23E94F00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:contain;background-repeat:no-repeat; } .cta-email{ font-size:16px;font-weight:600;color:var(--ink); border-bottom:2px solid var(--latte);padding-bottom:2px;transition:all .3s; } .cta-email:hover{color:var(--amped);border-color:var(--amped)} .cta-form{ background:var(--paper);padding:52px 44px;position:relative; border:1px solid var(--rule);border-radius:4px; box-shadow:4px 6px 0 rgba(26,26,26,.06); } @media(max-width:520px){.cta-form{padding:40px 26px}} .form-icon{ position:absolute;top:-34px;right:30px;width:72px;height:72px;object-fit:contain; transform:rotate(6deg); } .cta-form h3{font-family:var(--font-display);font-size:28px;font-weight:800;line-height:1.15;margin-bottom:6px;letter-spacing:-.3px} .form-sub{font-size:14px;color:var(--gray-mid);margin-bottom:30px} .fg{margin-bottom:18px} .fg label{display:block;font-size:13px;font-weight:600;color:var(--gray-dark);margin-bottom:7px} .fg .opt{font-weight:400;color:var(--gray-light)} .fg input,.fg select,.fg textarea{ width:100%;padding:13px 16px;font-family:var(--font-body);font-size:15px; border:1px solid var(--rule);border-radius:4px;background:var(--paper);color:var(--ink); outline:none;transition:border-color .3s,box-shadow .3s;-webkit-appearance:none;appearance:none; } .fg select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;background-size:16px; } .fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--moonshot);box-shadow:0 0 0 3px rgba(91,109,163,.10)} .fg textarea{min-height:84px;resize:vertical} .fr{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:600px){.fr{grid-template-columns:1fr}} .form-btn{ width:100%;padding:17px;font-family:var(--font-body);font-size:15px;font-weight:700; background:var(--amped);color:#fff;border:none;border-radius:100px;cursor:pointer; transition:all .3s;margin-top:8px; } .form-btn:hover{background:var(--amped-soft);transform:translateY(-1px);box-shadow:0 8px 24px rgba(233,79,0,.2)} .form-btn:disabled{opacity:.6;cursor:wait;transform:none} /* ========================================================================== FOOTER ========================================================================== */ .footer{padding:44px 0;background:var(--paper);border-top:1px solid var(--rule)} .footer-in{display:flex;justify-content:space-between;align-items:center;gap:16px} @media(max-width:600px){.footer-in{flex-direction:column;text-align:center}} .footer-logo-svg{height:30px;width:auto} .footer-logo-svg .st0{fill:var(--amped)} .footer-text{font-size:13px;color:var(--gray-light)} /* Privacy Policy + Cookie Preferences links in the footer */ .footer-legal-link{text-decoration:underline;text-underline-offset:3px} .footer-legal-link:hover{color:var(--amped)} /* The Powered by G! product logo: as small as it can be and still read */ .powered-by-logo{height:30px;width:auto;opacity:.85;transition:opacity .3s} .powered-by-logo:hover{opacity:1} /* ========================================================================== ACCESSIBILITY — reduced motion ========================================================================== */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} html{scroll-behavior:auto} .rv{opacity:1;transform:none} .hero-h1,.hero-sub,.hero-ctas,.hero-proof{opacity:1;transform:none} .sketch-underline path,.scribble-circle path{stroke-dashoffset:0} } /* ========================================================================== FEATURED PROJECTS STRIP (bottom of the hero) Label card + three client photo cards + torn-paper "super featured". ========================================================================== */ /* On big screens, shorten the hero just enough that hero + strip = one screen */ @media(min-width:1025px){ .hero{min-height:calc(100svh - 132px)} } .featured-strip{ display:grid; grid-template-columns:190px repeat(3,1fr) 1.55fr; width:100%; position:relative;z-index:2; /* lets the cutout overlap the hero above */ opacity:0;animation:fu 1s var(--ease) .9s forwards; } /* --- Label card --- */ .fs-label{ background:var(--ink);color:var(--paper); display:flex;align-items:center;justify-content:center;text-align:center; padding:18px 22px;min-height:132px; transition:background .3s; } .fs-label:hover{background:var(--charcoal)} .fs-label-title{ font-family:var(--font-display);font-weight:800; font-size:26px;line-height:1.12;letter-spacing:.4px;text-transform:uppercase; } /* --- Client photo cards --- */ .fs-card{position:relative;overflow:hidden;min-height:132px;display:block} .fs-card img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .6s var(--ease); } .fs-card:hover img{transform:scale(1.06)} .fs-card::after{ /* even ink scrim so the centered name always reads */ content:'';position:absolute;inset:0; background:linear-gradient(to top,rgba(26,26,26,.72) 0%,rgba(26,26,26,.42) 55%,rgba(26,26,26,.30) 100%); } .fs-card-body{ position:absolute;inset:0;z-index:1; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; padding:16px 14px;color:#fff;text-align:center; } .fs-card-name{ font-family:var(--font-display);font-weight:800; font-size:20px;letter-spacing:.4px;text-transform:uppercase;line-height:1.15; } .fs-card-stat{font-family:var(--font-hand);font-size:18px;color:var(--latte)} /* --- Super featured: torn paper + cutout --- */ .fs-super{position:relative;min-height:132px;display:block;z-index:3} /* floats over the cards beside it */ .fs-shape{ /* organic shape, taller and wider than the card so it rises above and hovers over ADG */ position:absolute;left:-7%;bottom:0;height:160%;width:107%; max-width:none; /* the global img{max-width:100%} would cap the stretch and leave a gap on the right */ pointer-events:none; } .fs-super-cutout{ /* the person, bottom-anchored, head pops past the top of the shape */ /* The webp carries transparent margin (110 left / 80 top / 40 right at natural size) so the drop-shadow has room to paint: browsers clip the filter at the image box, and a tight-trimmed box sliced the shadow off beside his head. The heights below are ~8% larger than the "real" body size to pay for the taller canvas, so he LOOKS the same size as before. */ position:absolute;right:1%;bottom:0;height:232%;width:auto; pointer-events:none; filter:drop-shadow(-6px 4px 12px rgba(26,26,26,.35)); transform-origin:50% 100%; /* feet stay planted when the hover zoom scales him up */ transition:transform .5s var(--ease); } .fs-super:hover .fs-super-cutout{transform:scale(1.05)} /* zoom, not lift: lifting exposed his cut-off legs */ .fs-super-copy{ position:absolute;left:42px;bottom:30px;z-index:1;color:#fff; display:flex;flex-direction:column;line-height:1.18;max-width:46%; text-shadow:0 1px 10px rgba(26,26,26,.30); /* keeps white copy readable over the texture's speckles */ } .fs-super-l1{font-family:var(--font-hand);font-size:19px;color:var(--latte-wash)} .fs-super-l2{ font-family:var(--font-display);font-weight:800; font-size:23px;text-transform:uppercase;letter-spacing:.4px; } .fs-super-l3{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.6px;text-transform:uppercase;margin-top:3px} /* --- Tablet: super featured takes the full width, others drop below --- */ @media(max-width:1024px){ .featured-strip{grid-template-columns:1fr 1fr} /* Pin the strip to the bottom of the first screen: the hero gives up the band's height. 64px bottom padding (not 24) keeps the shape's crown + the cutout girl (which rise above the band) from painting over the last proof line on real iPhones */ .hero{min-height:calc(100svh - 140px);padding:120px 0 72px} .hero-proof{margin-top:28px} /* Narrow sleek band; shape mostly solid with a controlled organic crown */ .fs-super{grid-column:1 / -1;grid-row:1;min-height:140px} .fs-shape{left:0;width:100%;height:128%} /* The cutout stands taller than the band, filling more of the orange */ .fs-super-cutout{right:4%;height:171%} .fs-super-copy{max-width:62%;bottom:18px;left:15%} .fs-super-l1{font-size:16px} .fs-super-l2{font-size:20px} .fs-super-l3{font-size:12px;letter-spacing:.5px} .fs-label{min-height:112px} .fs-card{min-height:100px} } /* --- Phone: tighter type, cutout tucked in --- */ @media(max-width:560px){ /* The bigger 155% cutout pops ~25px higher than the old 140% one. On short iPhones (SE, 13 mini) his head reached the "AI-NATIVE SINCE 2024" proof line, so the hero gives up a little more room at the bottom. v7.1 mobile fix: padding trimmed (120→80 top, 100→80 bottom; the proof line the 100px protected from the cutout's head is now hidden here). v7.2: the band grows to 170px (was 140) so the Elite copy and cutout can be phone-legible; the hero gives up the extra 30px to keep one screen. */ .hero{padding:80px 0 80px;min-height:calc(100svh - 170px)} .fs-super{min-height:170px} /* v7.2b: shape crown trimmed (128%→114% of the band). At 128% the taller band left a lot of empty orange between the crown and the copy; a tighter crown makes the splash denser and the text feel bigger in it. */ .fs-shape{height:114%} .fs-super-copy{max-width:74%;bottom:26px;left:14%} /* 11% put the stat line's first digit in an erosion hole at 393px wide */ .fs-super-l1{font-size:17px} .fs-super-l2{font-size:28px} .fs-super-l3{font-size:12.5px} /* 150% of the taller band = a visibly bigger medic; higher than this and his hair collides with the ghost CTA line now that the hero is tighter */ .fs-super-cutout{right:1%;height:150%} .fs-label{min-height:100px;padding:14px 18px} .fs-label-title{font-size:24px} .fs-card{min-height:100px} .fs-card-name{font-size:17px} .fs-card-stat{font-size:16px} } /* ========================================================================== SOLUTION PAGES (v7.4) — /lead-generation/, /lead-management/, /ai-integrations/, /brand-and-media/, /how-engagements-work/ Appended at the END of the file on purpose: later rules of equal specificity win, so nothing above can silently cancel these. ========================================================================== */ /* --- Page hero: shorter than the homepage hero, centered like everything --- */ .page-hero{padding:170px 0 72px;text-align:center} .crumbs{ font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase; color:var(--gray-light);margin-bottom:22px; } .crumbs a{color:var(--gray-mid);transition:color .3s} .crumbs a:hover{color:var(--amped)} .page-hero h1{ font-family:var(--font-display); font-size:clamp(38px,5.2vw,68px);font-weight:800;line-height:1.05;letter-spacing:-.5px; max-width:880px;margin:0 auto 24px; } .page-hero h1 em{font-style:normal;color:var(--amped)} .page-sub{font-size:18px;line-height:1.65;color:var(--gray-mid);max-width:640px;margin:0 auto 36px} .page-hero .hero-ctas{justify-content:center;opacity:1;transform:none;animation:none} @media(max-width:640px){ .page-hero{padding:128px 0 48px} .page-hero h1{font-size:clamp(30px,8.4vw,40px)} .page-sub{font-size:15.5px} } /* --- Proof blocks --- */ .proof-metrics{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){.proof-metrics{grid-template-columns:1fr 1fr}} @media(max-width:520px){.proof-metrics{grid-template-columns:1fr}} .proof-text{ font-size:19px;line-height:1.75;color:var(--gray-dark); max-width:760px;margin:0 auto;text-align:center; } .proof-cta{text-align:center;margin-top:40px} /* --- FAQ accordion (native
, no JS needed) --- */ .faq-list{max-width:780px;margin:0 auto;border-top:1px solid var(--rule)} .faq-item{border-bottom:1px solid var(--rule)} .faq-item summary{ cursor:pointer;list-style:none; display:flex;justify-content:space-between;align-items:center;gap:20px; padding:24px 0; font-family:var(--font-display);font-size:20px;font-weight:700;line-height:1.25; transition:color .3s; } .faq-item summary:hover{color:var(--amped)} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{ content:'+';font-family:var(--font-body);font-size:26px;font-weight:400; color:var(--amped);flex-shrink:0;line-height:1;transition:transform .3s; } .faq-item[open] summary::after{transform:rotate(45deg)} .faq-item p{font-size:16px;line-height:1.7;color:var(--gray-mid);padding:0 40px 26px 0} @media(max-width:640px){.faq-item summary{font-size:17px;padding:20px 0}} /* --- Closing CTA band (dark, like the salary banner) --- */ .cta-band{background:var(--ink);color:#fff;padding:100px 0;text-align:center} .cta-band h2{ font-family:var(--font-display); font-size:clamp(30px,4vw,52px);font-weight:800;line-height:1.08;letter-spacing:-.5px; margin-bottom:18px; } .cta-band p{font-size:17px;line-height:1.7;color:rgba(255,255,255,.72);max-width:560px;margin:0 auto 34px} @media(max-width:640px){.cta-band{padding:72px 0}}