/* ========================================================================== Origin Media — main stylesheet Concept: "Charged" — navy foundations, electric-blue interaction, gold action. Critical above-the-fold CSS is inlined per-page in ; this file carries the rest. See DESIGN_NOTES.md. ========================================================================== */ :root{ --navy:#1A1A2E; --navy-deep:#12121F; --blue:#2D6FE0; --blue-deep:#1E3A5F; --green:#1B4332; --gold:#C9A84C; --gold-bright:#E0C266; --paper:#F6F5F1; --ink:#1A1A2E; --mist:#5B6472; --line:#E3E1DA; --white:#fff; --font-display:'Sora','Manrope',system-ui,sans-serif; --font-body:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --maxw:1200px; --radius:18px; --radius-sm:12px; --shadow:0 18px 50px -22px rgba(18,18,31,.35); --shadow-lift:0 30px 70px -28px rgba(26,26,46,.45); --ease:cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;font-family:var(--font-body);color:var(--ink);background:var(--paper); line-height:1.65;font-size:1.0625rem;-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;overflow-x:hidden; } img,svg,picture{max-width:100%;display:block;height:auto} a{color:var(--blue);text-decoration-thickness:1.5px;text-underline-offset:3px} h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.08; letter-spacing:-.02em;color:var(--navy);margin:0 0 .5em;overflow-wrap:break-word} p,li,blockquote,td,th,a{overflow-wrap:break-word} h1{font-size:clamp(2.4rem,1.4rem + 4.4vw,4.4rem);font-weight:800} h2{font-size:clamp(1.9rem,1.3rem + 2.6vw,3rem)} h3{font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem)} p{margin:0 0 1.1rem} ul,ol{margin:0 0 1.1rem;padding-left:1.2rem} :focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px} ::selection{background:var(--gold);color:var(--navy)} /* Layout primitives ------------------------------------------------------- */ .container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)} .section{padding-block:clamp(3.5rem,7vw,6.5rem)} .section--tight{padding-block:clamp(2.5rem,5vw,4rem)} .section--navy{background:var(--navy);color:#E8E9F1} .section--navy h1,.section--navy h2,.section--navy h3{color:#fff} .section--paper{background:var(--paper)} .section--mint{background:linear-gradient(180deg,#fff, #F1F3EF)} .lede{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);color:var(--mist);max-width:62ch} .section--navy .lede{color:#B7BDD2} .center{text-align:center;margin-inline:auto} .center .lede{margin-inline:auto} .grid{display:grid;gap:clamp(1rem,2.5vw,1.8rem)} .cols-2{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-4{grid-template-columns:repeat(4,1fr)} .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center} /* Eyebrow + voltage line -------------------------------------------------- */ .eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-body); font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase; color:var(--blue);margin:0 0 1rem} .section--navy .eyebrow{color:var(--gold)} .eyebrow .bolt{width:14px;height:14px;fill:var(--gold);flex:none} .eyebrow::after{content:"";width:34px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--gold),transparent)} /* Buttons ----------------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem; font-family:var(--font-body);font-weight:700;font-size:1rem;line-height:1; padding:.95rem 1.5rem;border-radius:999px;border:2px solid transparent; cursor:pointer;text-decoration:none;transition:transform .25s var(--ease), box-shadow .25s var(--ease),background .25s var(--ease),color .25s var(--ease); white-space:nowrap} .btn svg{width:18px;height:18px;flex:none} .btn--primary{background:var(--gold);color:var(--navy); box-shadow:0 12px 30px -10px rgba(201,168,76,.7)} .btn--primary:hover{background:var(--gold-bright);transform:translateY(-2px); box-shadow:0 18px 40px -10px rgba(201,168,76,.85)} .btn--ghost{background:transparent;color:var(--navy);border-color:var(--navy)} .section--navy .btn--ghost{color:#fff;border-color:rgba(255,255,255,.55)} .btn--ghost:hover{background:var(--navy);color:#fff;transform:translateY(-2px)} .section--navy .btn--ghost:hover{background:#fff;color:var(--navy)} .btn--blue{background:var(--blue);color:#fff;box-shadow:0 12px 30px -12px rgba(45,111,224,.8)} .btn--blue:hover{background:#2a64c9;transform:translateY(-2px)} .btn--block{width:100%} .btn--lg{padding:1.1rem 1.9rem;font-size:1.06rem} .actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.6rem} /* Header ------------------------------------------------------------------ */ .site-header{position:sticky;top:0;z-index:60;background:#fff; backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line)} .site-header .container{display:flex;align-items:center;justify-content:space-between; gap:1rem;min-height:72px} .brand{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-display); font-weight:800;font-size:1.4rem;letter-spacing:-.02em;color:var(--navy); text-decoration:none} .brand .o{color:var(--navy)}.brand .m{color:var(--blue)} .brand .bolt{width:16px;height:24px;fill:var(--gold);margin-inline:-1px} .nav{display:flex;align-items:center;gap:.3rem} .nav a{font-weight:600;font-size:.97rem;color:var(--navy);text-decoration:none; padding:.55rem .7rem;border-radius:8px;transition:color .2s,background .2s} .nav a:hover{color:var(--blue);background:rgba(45,111,224,.07)} .nav a[aria-current="page"]{color:var(--blue)} .nav a[aria-current="page"]::after{content:"";display:block;height:2px;border-radius:2px; background:var(--gold);margin-top:3px} .header-cta{display:flex;align-items:center;gap:.6rem} .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.4rem; color:var(--navy)} .nav-toggle svg{width:28px;height:28px} /* Hero -------------------------------------------------------------------- */ .hero{position:relative;background:var(--navy);color:#EaEbf3;overflow:hidden;isolation:isolate} .hero::before{content:"";position:absolute;inset:0;z-index:-1; background:radial-gradient(60% 60% at 25% 18%,rgba(45,111,224,.28),transparent 60%), radial-gradient(50% 50% at 90% 90%,rgba(201,168,76,.16),transparent 60%), linear-gradient(180deg,var(--navy),var(--navy-deep))} .hero .container{padding-block:clamp(3rem,7vw,5.5rem)} .hero h1{color:#fff;max-width:16ch} .hero .hl{color:var(--gold)} .hero-lede{color:#BfC4d8;font-size:clamp(1.1rem,1rem + .6vw,1.4rem);max-width:48ch} .hero-visual{position:relative} .hero-visual img{border-radius:var(--radius);box-shadow:var(--shadow-lift); border:1px solid rgba(255,255,255,.08)} .hero-badges{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem} /* Pills, tags ------------------------------------------------------------- */ .pill{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:600; padding:.4rem .85rem;border-radius:999px;background:rgba(255,255,255,.07); color:#D8DCEA;border:1px solid rgba(255,255,255,.14)} .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--gold)} .tag{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--blue);background:rgba(45,111,224,.1); padding:.3rem .6rem;border-radius:6px} /* Cards ------------------------------------------------------------------- */ .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:clamp(1.4rem,3vw,2rem);box-shadow:var(--shadow); transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s} .card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:#d3d0c6} .card h3{margin-bottom:.4rem} .card .icon{width:48px;height:48px;display:grid;place-items:center;border-radius:12px; background:linear-gradient(140deg,rgba(45,111,224,.14),rgba(201,168,76,.14)); margin-bottom:1rem} .card .icon svg{width:26px;height:26px;stroke:var(--blue);fill:none;stroke-width:1.8} .card--feature{background:linear-gradient(150deg,var(--navy),var(--blue-deep));color:#E8E9F1; border:0} .card--feature h3{color:#fff} .card--feature .icon{background:rgba(255,255,255,.1)} .card--feature .icon svg{stroke:var(--gold)} .card .card-link{font-weight:700;color:var(--blue);text-decoration:none; display:inline-flex;align-items:center;gap:.4rem;margin-top:.4rem} .card .card-link:hover{gap:.7rem} .card--feature .card-link{color:var(--gold)} /* Stats ------------------------------------------------------------------- */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.4rem} .stat .num{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,1.4rem + 2vw,2.9rem); color:var(--gold);line-height:1} .stat .lbl{font-size:.9rem;color:#BfC4d8;margin-top:.35rem} .section--paper .stat .lbl{color:var(--mist)} .section--paper .stat .num{color:var(--blue)} /* List with bolts --------------------------------------------------------- */ .bolt-list{list-style:none;padding:0;margin:1.2rem 0;display:grid;gap:.85rem} .bolt-list li{display:flex;gap:.7rem;align-items:flex-start} .bolt-list .bolt{width:18px;height:18px;fill:var(--gold);flex:none;margin-top:.2rem} /* Stat / proof bar -------------------------------------------------------- */ .proofbar{display:flex;flex-wrap:wrap;gap:1.4rem 2.4rem;align-items:center; justify-content:center;color:#B7BDD2;font-weight:600;font-size:.9rem} .proofbar .pb{display:flex;align-items:center;gap:.5rem} .proofbar svg{width:18px;height:18px;fill:var(--gold)} /* Forms ------------------------------------------------------------------- */ .field{display:grid;gap:.4rem;margin-bottom:1rem} .field label{font-weight:700;font-size:.92rem;color:var(--navy)} .field input,.field textarea,.field select{font-family:inherit;font-size:1rem; padding:.8rem .9rem;border:1.5px solid var(--line);border-radius:var(--radius-sm); background:#fff;color:var(--ink);width:100%;transition:border-color .2s,box-shadow .2s} .field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--blue);box-shadow:0 0 0 4px rgba(45,111,224,.14)} .field textarea{min-height:130px;resize:vertical} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .form-note{font-size:.84rem;color:var(--mist)} .form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:clamp(1.5rem,3vw,2.2rem);box-shadow:var(--shadow)} .consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;color:var(--mist)} .consent input{width:auto;margin-top:.25rem} /* Accordion (FAQ) --------------------------------------------------------- */ .accordion{display:grid;gap:.8rem;max-width:820px;margin-inline:auto} .acc{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden} .acc summary{list-style:none;cursor:pointer;padding:1.1rem 1.3rem;font-weight:700; font-family:var(--font-display);font-size:1.08rem;color:var(--navy); display:flex;justify-content:space-between;align-items:center;gap:1rem} .acc summary::-webkit-details-marker{display:none} .acc summary::after{content:"+";font-size:1.5rem;color:var(--blue);transition:transform .25s;flex:none} .acc[open] summary::after{transform:rotate(45deg)} .acc .acc-body{padding:0 1.3rem 1.2rem;color:var(--mist)} .acc .acc-body p:last-child{margin-bottom:0} /* Testimonials ------------------------------------------------------------ */ .quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:clamp(1.5rem,3vw,2.1rem);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:1rem} .quote .stars{color:var(--gold);letter-spacing:2px;font-size:1.05rem} .quote blockquote{margin:0;font-size:1.12rem;color:var(--ink);font-weight:500} .quote .who{display:flex;align-items:center;gap:.8rem;margin-top:auto} .quote .avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center; background:linear-gradient(140deg,var(--blue),var(--blue-deep));color:#fff;font-weight:800; font-family:var(--font-display)} .quote .who b{display:block;color:var(--navy)} .quote .who span{font-size:.86rem;color:var(--mist)} /* Package / pricing ------------------------------------------------------- */ .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,1.6rem);align-items:start} .plan{background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:clamp(1.5rem,3vw,2rem);box-shadow:var(--shadow);position:relative;display:flex; flex-direction:column;gap:.4rem} .plan--featured{border:2px solid var(--gold);box-shadow:var(--shadow-lift);transform:translateY(-6px)} .plan .plan-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%); background:var(--gold);color:var(--navy);font-weight:800;font-size:.74rem; letter-spacing:.08em;text-transform:uppercase;padding:.35rem .8rem;border-radius:999px} .plan h3{margin:0} .plan .who{color:var(--mist);font-size:.92rem;min-height:2.6em} .plan .price{font-family:var(--font-display);font-weight:800;font-size:2.2rem;color:var(--navy); margin:.3rem 0} .plan .price small{font-size:.9rem;font-weight:600;color:var(--mist)} .plan ul{list-style:none;padding:0;margin:.6rem 0 1.2rem;display:grid;gap:.6rem} .plan ul li{display:flex;gap:.55rem;align-items:flex-start;font-size:.95rem} .plan ul li svg{width:18px;height:18px;flex:none;margin-top:.15rem;stroke:var(--green);fill:none;stroke-width:2.4} .plan .btn{margin-top:auto} /* Comparison table -------------------------------------------------------- */ .compare-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)} table.compare{width:100%;border-collapse:collapse;min-width:640px} table.compare th,table.compare td{padding:1rem 1.1rem;text-align:left;border-bottom:1px solid var(--line)} table.compare thead th{background:var(--navy);color:#fff;font-family:var(--font-display);position:sticky;top:0} table.compare thead th.feat{background:var(--blue-deep)} table.compare tbody th{font-weight:700;color:var(--navy);background:#FAFAF7} table.compare td{text-align:center;color:var(--mist)} table.compare td.yes{color:var(--green);font-weight:800} table.compare td.no{color:#C2C0B8} table.compare tbody tr:hover td,table.compare tbody tr:hover th{background:#F4F6FF} table.compare .col-feat{background:rgba(201,168,76,.07)} /* Map / contact ----------------------------------------------------------- */ .map-embed{border:0;width:100%;height:100%;min-height:340px;border-radius:var(--radius); filter:grayscale(.2) contrast(1.05)} .info-list{list-style:none;padding:0;margin:0;display:grid;gap:1.1rem} .info-list li{display:flex;gap:.9rem;align-items:flex-start} .info-list .ic{width:42px;height:42px;border-radius:11px;flex:none;display:grid;place-items:center; background:rgba(45,111,224,.1)} .info-list .ic svg{width:20px;height:20px;stroke:var(--blue);fill:none;stroke-width:1.8} .info-list a{color:var(--navy);text-decoration:none;font-weight:700} .info-list a:hover{color:var(--blue)} .info-list small{display:block;color:var(--mist);font-weight:500} /* Booking embed ----------------------------------------------------------- */ .booking-frame{background:#fff;border:2px dashed var(--blue);border-radius:var(--radius); padding:clamp(1.8rem,4vw,3rem);text-align:center;color:var(--mist)} .booking-frame .bolt{width:34px;height:34px;fill:var(--gold);margin:0 auto .8rem} /* CTA band ---------------------------------------------------------------- */ .cta-band{background:linear-gradient(135deg,var(--navy),var(--blue-deep));color:#fff; border-radius:var(--radius);padding:clamp(2rem,5vw,3.5rem);text-align:center; position:relative;overflow:hidden;isolation:isolate} .cta-band::before{content:"";position:absolute;inset:0;z-index:-1; background:radial-gradient(50% 80% at 80% 10%,rgba(201,168,76,.22),transparent 60%)} .cta-band h2{color:#fff} .cta-band .lede{color:#C7CCDD;margin-inline:auto} /* Footer ------------------------------------------------------------------ */ .site-footer{background:var(--navy-deep);color:#A9AFC4;font-size:.95rem} .site-footer .container{padding-block:clamp(2.8rem,5vw,4rem)} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem} .site-footer h4{color:#fff;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase; font-family:var(--font-body);margin:0 0 1rem} .site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem} .site-footer a{color:#A9AFC4;text-decoration:none} .site-footer a:hover{color:#fff} .foot-brand .brand{color:#fff;font-size:1.5rem} .foot-brand .brand .o{color:#fff} .foot-brand p{max-width:34ch;margin-top:1rem} .socials{display:flex;gap:.6rem;margin-top:1.2rem} .socials a{width:40px;height:40px;border-radius:10px;display:grid;place-items:center; background:rgba(255,255,255,.07);transition:background .2s,transform .2s} .socials a:hover{background:var(--gold);transform:translateY(-2px)} .socials svg{width:20px;height:20px;fill:#fff} .socials a:hover svg{fill:var(--navy)} .foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:2.4rem;padding-top:1.5rem; display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.86rem} .foot-bottom .legal{display:flex;flex-wrap:wrap;gap:1rem} /* Cookie banner ----------------------------------------------------------- */ .cookie{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:80;max-width:560px; margin-inline:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow-lift);padding:1.2rem 1.3rem;display:none} .cookie.show{display:block;animation:rise .4s var(--ease)} .cookie p{font-size:.9rem;margin:0 0 .9rem;color:var(--mist)} .cookie .cookie-actions{display:flex;flex-wrap:wrap;gap:.6rem} .cookie .btn{padding:.7rem 1.1rem;font-size:.92rem} /* Chat widget ------------------------------------------------------------- */ .chat-launch{position:fixed;right:1.1rem;bottom:1.1rem;z-index:75;width:60px;height:60px; border-radius:50%;border:0;cursor:pointer;background:linear-gradient(140deg,var(--blue),var(--blue-deep)); box-shadow:0 16px 36px -10px rgba(45,111,224,.7);display:grid;place-items:center; transition:transform .25s var(--ease)} .chat-launch:hover{transform:scale(1.07)} .chat-launch svg{width:28px;height:28px;fill:#fff} .chat-launch .ping{position:absolute;top:6px;right:6px;width:12px;height:12px;border-radius:50%; background:var(--gold);border:2px solid #fff} .chat-panel{position:fixed;right:1.1rem;bottom:5.6rem;z-index:76;width:min(340px,calc(100vw - 2rem)); background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lift); overflow:hidden;display:none} .chat-panel.show{display:block;animation:rise .35s var(--ease)} .chat-head{background:var(--navy);color:#fff;padding:1rem 1.2rem;display:flex;align-items:center;gap:.7rem} .chat-head .avatar{width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--navy); display:grid;place-items:center;font-weight:800;font-family:var(--font-display)} .chat-head b{display:block;font-size:.98rem}.chat-head small{color:#9aa1bb} .chat-body{padding:1.1rem 1.2rem;display:grid;gap:.7rem;background:#FAFAF7} .chat-msg{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.7rem .85rem; font-size:.92rem;color:var(--ink)} .chat-body .btn{margin-top:.3rem} .chat-foot{padding:.7rem 1.2rem;font-size:.76rem;color:var(--mist);text-align:center;border-top:1px solid var(--line)} /* eBook popup ------------------------------------------------------------- */ .modal{position:fixed;inset:0;z-index:90;background:rgba(18,18,31,.62); backdrop-filter:blur(4px);display:none;place-items:center;padding:1.2rem} .modal.show{display:grid;animation:fade .3s ease} .modal-card{background:#fff;border-radius:var(--radius);max-width:880px;width:100%; display:grid;grid-template-columns:.9fr 1.1fr;overflow:hidden;box-shadow:var(--shadow-lift); position:relative;animation:rise .4s var(--ease)} .modal-aside{background:linear-gradient(160deg,var(--navy),var(--blue-deep));color:#fff; padding:clamp(1.6rem,3vw,2.4rem);display:flex;flex-direction:column;justify-content:center;gap:.6rem} .modal-aside .bolt{width:40px;height:40px;fill:var(--gold);margin-bottom:.4rem} .modal-aside h3{color:#fff;font-size:1.7rem} .modal-aside ul{list-style:none;padding:0;margin:.6rem 0 0;display:grid;gap:.5rem;font-size:.92rem;color:#Cfd4e6} .modal-aside ul li{display:flex;gap:.5rem;align-items:flex-start} .modal-aside ul li::before{content:"⚡";color:var(--gold)} .modal-main{padding:clamp(1.6rem,3vw,2.4rem);display:flex;flex-direction:column;justify-content:center} .modal-close{position:absolute;top:.8rem;right:.8rem;width:38px;height:38px;border-radius:50%; border:0;background:rgba(255,255,255,.15);color:#fff;font-size:1.3rem;cursor:pointer;z-index:2;line-height:1} .modal-main .modal-close{background:#F1EFEA;color:var(--navy)} .modal-close:hover{background:var(--gold);color:var(--navy)} /* Page hero (interior pages) --------------------------------------------- */ .page-hero{background:var(--navy);color:#E8E9F1;position:relative;overflow:hidden;isolation:isolate} .page-hero::before{content:"";position:absolute;inset:0;z-index:-1; background:radial-gradient(55% 70% at 15% 10%,rgba(45,111,224,.25),transparent 60%), radial-gradient(50% 60% at 95% 100%,rgba(201,168,76,.14),transparent 60%), linear-gradient(180deg,var(--navy),var(--navy-deep))} .page-hero .container{padding-block:clamp(3rem,6vw,4.6rem)} .page-hero h1{color:#fff;max-width:18ch} .page-hero p{color:#BfC4d8;max-width:60ch} .breadcrumb{font-size:.86rem;color:#8E95AE;margin-bottom:1rem} .breadcrumb a{color:#B7BDD2;text-decoration:none} .breadcrumb a:hover{color:#fff} /* Prose (legal pages) ----------------------------------------------------- */ .prose{max-width:780px;margin-inline:auto} .prose h2{margin-top:2.2rem} .prose h3{margin-top:1.6rem;font-size:1.2rem} .prose ul{display:grid;gap:.5rem} .prose table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.92rem} .prose th,.prose td{border:1px solid var(--line);padding:.7rem .8rem;text-align:left;vertical-align:top} .prose th{background:#FAFAF7} .prose .placeholder{background:#FFF7E0;border:1px solid #E8D58A;color:#7a5d12; padding:.1rem .4rem;border-radius:5px;font-size:.92em;font-weight:600} .updated{color:var(--mist);font-size:.9rem} /* Reveal animations ------------------------------------------------------- */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.is-visible{opacity:1;transform:none} .reveal[data-d="1"]{transition-delay:.08s} .reveal[data-d="2"]{transition-delay:.16s} .reveal[data-d="3"]{transition-delay:.24s} .reveal[data-d="4"]{transition-delay:.32s} @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @keyframes fade{from{opacity:0}to{opacity:1}} @keyframes heroUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} .skip-link{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--navy); padding:.7rem 1rem;border-radius:0 0 8px 0;font-weight:700;z-index:200} .skip-link:focus{left:0} .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Responsive -------------------------------------------------------------- */ @media (max-width:980px){ .split{grid-template-columns:1fr;gap:2.4rem} .cols-4{grid-template-columns:repeat(2,1fr)} .foot-grid{grid-template-columns:1fr 1fr} .price-grid{grid-template-columns:1fr;max-width:480px;margin-inline:auto} .plan--featured{transform:none} .modal-card{grid-template-columns:1fr} .modal-aside{display:none} } @media (max-width:760px){ .nav,.header-cta .btn--ghost{display:none} .nav-toggle{display:inline-flex} .nav.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column; align-items:stretch;background:#fff;border-bottom:1px solid var(--line);padding:.6rem 1rem 1.2rem; gap:.2rem;box-shadow:var(--shadow)} .nav.open a{padding:.85rem .6rem;border-radius:8px} .nav.open a[aria-current="page"]::after{display:none} .cols-2,.cols-3{grid-template-columns:1fr} .form-row{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr} .foot-bottom{flex-direction:column} } @media (max-width:420px){ .cols-4{grid-template-columns:1fr} h1{font-size:clamp(2rem,1.2rem + 4vw,2.4rem)} .hero h1,.page-hero h1{max-width:100%} .hero-lede,.hero-badges,.proofbar{max-width:100%} .pill{font-size:.78rem} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} .reveal,.reveal--zoom,.reveal--left,.reveal--right{opacity:1;transform:none} } /* ========================================================================== FEEDBACK UPDATE 2026-06-16 — logo, font, modern nav, motion, imagery, booking/onboarding embeds, case studies. Layered after the base styles. ========================================================================== */ /* Real logo in header ----------------------------------------------------- */ .brand--logo{gap:0} .brand-img{height:40px;width:auto;display:block} .site-footer .foot-brand .brand-img{height:38px} @media (max-width:420px){.brand-img{height:34px}} /* Outline button (fixes invisible-text-on-hover bug) ---------------------- */ /* Previously ghost buttons on light backgrounds used inline color overrides that beat the :hover colour, so text vanished. Use this instead. */ .btn--outline{background:transparent;color:var(--navy);border-color:var(--navy)} .btn--outline:hover,.btn--outline:focus-visible{background:var(--navy);color:#fff;transform:translateY(-2px)} .btn--outline svg{stroke:currentColor} /* Gold-on-light needs a hover that keeps text readable */ .btn--primary:focus-visible{background:var(--gold-bright);color:var(--navy)} /* Modernised header / navbar ---------------------------------------------- */ .site-header{transition:background .3s var(--ease),box-shadow .3s var(--ease),min-height .3s var(--ease)} .site-header.scrolled{background:#fff;box-shadow:0 10px 30px -18px rgba(18,18,31,.4)} .site-header.scrolled .container{min-height:62px} .nav a{position:relative} .nav a::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:.32rem;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--gold),var(--blue));transform:scaleX(0);transform-origin:left; transition:transform .28s var(--ease)} .nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)} .nav a[aria-current="page"]{color:var(--blue)} .nav a[aria-current="page"]::after{transform:scaleX(1);background:var(--gold)} .header-cta .btn{padding:.7rem 1.15rem;font-size:.95rem} .header-cta .btn--primary{box-shadow:0 10px 24px -12px rgba(201,168,76,.8)} /* Motion: zoom + directional scroll reveals ------------------------------- */ .reveal--zoom{opacity:0;transform:scale(.9);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal--zoom.is-visible{opacity:1;transform:none} .reveal--left{opacity:0;transform:translateX(-30px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal--right{opacity:0;transform:translateX(30px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal--left.is-visible,.reveal--right.is-visible{opacity:1;transform:none} .reveal--zoom[data-d="1"],.reveal--left[data-d="1"],.reveal--right[data-d="1"]{transition-delay:.08s} .reveal--zoom[data-d="2"],.reveal--left[data-d="2"],.reveal--right[data-d="2"]{transition-delay:.16s} .reveal--zoom[data-d="3"]{transition-delay:.24s} /* Hero staggered entrance */ .hero-copy>*{opacity:0;animation:heroUp .8s var(--ease) forwards} .hero-copy>*:nth-child(1){animation-delay:.05s} .hero-copy>*:nth-child(2){animation-delay:.15s} .hero-copy>*:nth-child(3){animation-delay:.25s} .hero-copy>*:nth-child(4){animation-delay:.35s} .hero-copy>*:nth-child(5){animation-delay:.45s} @media (prefers-reduced-motion:reduce){.hero-copy>*{opacity:1;animation:none}} /* Imagery treatments ------------------------------------------------------ */ .media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:relative; border:1px solid var(--line)} .media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .media:hover img{transform:scale(1.05)} .media--tall{aspect-ratio:4/5} .media--wide{aspect-ratio:16/9} .media--square{aspect-ratio:1/1} .section--navy .media,.hero .media{border-color:rgba(255,255,255,.1)} .card .media{margin:-.4rem 0 1.1rem;border-radius:var(--radius-sm)} .card .media img{aspect-ratio:16/10} /* Image strip / "in action" gallery */ .shots{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.7rem,1.6vw,1.1rem)} .shots .media{aspect-ratio:1/1} @media (max-width:760px){.shots{grid-template-columns:repeat(2,1fr)}} /* All-in-one USP band ----------------------------------------------------- */ .usp{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin-top:2.4rem} .usp .u{display:flex;gap:.8rem;align-items:flex-start;background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm);padding:1.1rem 1.2rem} .section--paper .usp .u{background:#fff;border-color:var(--line);box-shadow:var(--shadow)} .usp .u svg{width:24px;height:24px;flex:none;stroke:var(--gold);fill:none;stroke-width:1.8;margin-top:.15rem} .usp .u b{display:block;color:inherit;font-family:var(--font-display)} .section--navy .usp .u b{color:#fff} .usp .u span{font-size:.92rem} .phone-note{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--gold); font-family:var(--font-display)} /* Animated FAQ accordion -------------------------------------------------- */ .acc{transition:border-color .25s,box-shadow .25s} .acc[open]{border-color:var(--blue);box-shadow:var(--shadow)} .acc summary{transition:background .2s} .acc summary:hover{background:#FAFAF7} .acc .acc-body{display:grid;grid-template-rows:1fr} .acc:not([open]) .acc-body{animation:none} .acc[open] .acc-body{animation:accIn .35s var(--ease)} @keyframes accIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.acc[open] .acc-body{animation:none}} /* Case-study cards (testimonials) ----------------------------------------- */ .case{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow); padding:clamp(1.5rem,3vw,2.1rem);display:flex;flex-direction:column;gap:1rem; transition:transform .3s var(--ease),box-shadow .3s var(--ease)} .case:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)} .case .case-tag{align-self:flex-start} .case h3{margin:0} .case .client{color:var(--blue);font-weight:700} .case p{margin:0;color:var(--mist)} .case .metrics{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:auto;padding-top:.4rem; border-top:1px solid var(--line)} .case .metric .n{font-family:var(--font-display);font-weight:800;font-size:1.7rem;color:var(--gold);line-height:1} .case .metric .l{font-size:.78rem;color:var(--mist);text-transform:uppercase;letter-spacing:.05em} /* Booking / onboarding embeds -------------------------------------------- */ .embed-wrap{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden; border:1px solid var(--line)} .calendly-inline-widget{min-width:280px;height:1100px} @media (max-width:600px){.calendly-inline-widget{height:1250px}} .jot-frame{width:100%;border:0;min-height:780px;display:block;background:#fff} .steps-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2rem;counter-reset:step} @media (max-width:760px){.steps-flow{grid-template-columns:1fr}} .steps-flow .step-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:1.4rem;box-shadow:var(--shadow);position:relative} .steps-flow .step-card::before{counter-increment:step;content:counter(step);position:absolute;top:-16px;left:1.2rem; width:36px;height:36px;border-radius:50%;background:var(--gold);color:var(--navy);font-weight:800; font-family:var(--font-display);display:grid;place-items:center} /* Package picker on onboarding page */ .pkg-picker{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.4rem} .pkg-picker button{font-family:var(--font-body);font-weight:700;font-size:.95rem;padding:.7rem 1.3rem; border-radius:999px;border:2px solid var(--navy);background:#fff;color:var(--navy);cursor:pointer; transition:background .2s,color .2s,transform .2s} .pkg-picker button[aria-pressed="true"]{background:var(--navy);color:#fff} .pkg-picker button:hover{transform:translateY(-2px)} /* ========================================================================== FEEDBACK UPDATE 2026-06-22 — white nav, footer CTA, silver plan buttons ========================================================================== */ /* Footer "Free consultation" button — pure black text on gold (per feedback) */ .site-footer .btn--primary{color:#000} .site-footer .btn--primary:hover,.site-footer .btn--primary:focus-visible{color:#000} /* Silver action button — Launch & Perform plan CTAs (summary + compare table) */ .btn--silver{background:linear-gradient(145deg,#eef0f3,#c3c7cf 55%,#aeb3bd); color:var(--navy);border-color:#b7bcc6; box-shadow:0 10px 24px -12px rgba(60,64,72,.55),inset 0 1px 0 rgba(255,255,255,.7)} .btn--silver:hover,.btn--silver:focus-visible{background:linear-gradient(145deg,#f6f7f9,#cdd1d9 55%,#b6bbc5); color:var(--navy);transform:translateY(-2px); box-shadow:0 16px 32px -12px rgba(60,64,72,.6),inset 0 1px 0 rgba(255,255,255,.8)} .btn--silver svg{stroke:currentColor} /* ========================================================================== FEEDBACK UPDATE 2026-06-22 (b) — mobile: eBook popup stacking + compact package compare table. Appended last so it overrides earlier @media rules. ========================================================================== */ /* eBook popup on mobile: stack the "what you get" panel ON TOP of the form (previously hidden), and let the modal scroll if it's taller than the screen. */ @media (max-width:980px){ .modal{place-items:start center;overflow-y:auto;padding:1rem .9rem} .modal-card{grid-template-columns:1fr;max-width:460px;margin-block:auto} .modal-aside{display:flex;padding:1.3rem 1.4rem 1.1rem;gap:.45rem} .modal-aside .bolt{width:30px;height:30px;margin-bottom:.1rem} .modal-aside h3{font-size:1.3rem} .modal-aside ul{font-size:.86rem;gap:.4rem;margin-top:.3rem} .modal-main{padding:1.3rem 1.4rem 1.5rem} } /* Package compare table on mobile: shrink so the whole table fits one screen, no horizontal scroll. */ @media (max-width:600px){ .compare-wrap{overflow-x:hidden} table.compare{min-width:0;width:100%;table-layout:fixed;font-size:.66rem} table.compare th,table.compare td{padding:.4rem .2rem;word-break:break-word} table.compare thead th{font-size:.7rem;padding:.45rem .2rem} table.compare tbody th{font-size:.66rem;font-weight:700;line-height:1.2} table.compare th:first-child{width:40%} table.compare td{width:20%} table.compare td.yes,table.compare td.no{font-size:.85rem} /* Hide the redundant "Choose …" button row — it wrapped into ugly circles, and the plan cards above already carry the CTAs. */ table.compare tbody tr:last-child{display:none} } /* Mobile header: show the burger, declutter CTAs, stop the logo distorting ---- */ @media (max-width:760px){ /* Inline critical CSS sets .nav-toggle{display:none} after the stylesheet link, so !important is required to reveal the burger on mobile. */ .nav-toggle{display:inline-flex!important} /* Header was logo + 2 gold buttons + burger = overcrowded → squashed logo. Keep just logo + burger on mobile; the CTAs live throughout the pages + nav. */ .header-cta .btn{display:none} .brand{flex-shrink:0} .brand-img{flex:none;width:auto;max-width:none} }