/* ============================================================ BOSS Dublin — Bowes Office Support Services Premium design system: charcoal + gold ============================================================ */ :root{ --charcoal: #201e1c; --charcoal-2: #29271f; --charcoal-3: #322f27; --panel: #2c2a24; --cream: #f7f2e6; --cream-dim: #e7e0cf; --ink: #211f1c; --gold: #c9a765; --gold-light: #e2c88e; --gold-dim: #8f7845; --gold-text: #7a6538; --muted-on-dark: #b3ac9d; --muted-on-light:#5c574c; --line-on-dark: rgba(201,167,101,0.28); --line-on-light: rgba(33,31,28,0.12); --serif: "Playfair Display", "Georgia", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --container: 1180px; --radius: 2px; --shadow-soft: 0 20px 50px -20px rgba(0,0,0,0.45); } /* v2 redesign pass — opt-in per page via . Keeps pages not yet redesigned (Services/Pricing/About/Contact) on the original Playfair/Inter pairing until they're signed off. */ body.v2{ --serif: "Libre Bodoni", "Georgia", serif; --sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } *,*::before,*::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin: 0; font-family: var(--sans); background: var(--cream); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } ul{ margin: 0; padding: 0; list-style: none; } h1,h2,h3,h4{ font-family: var(--serif); font-weight: 700; margin: 0; letter-spacing: 0.01em; } p{ margin: 0; } button{ font-family: inherit; cursor: pointer; } .container{ max-width: var(--container); margin: 0 auto; padding: 0 32px; } /* ---------- Eyebrow / labels ---------- */ .eyebrow{ display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--gold); } .eyebrow::before{ content: ""; width: 26px; height: 1px; background: var(--gold); display: inline-block; } .section--dark .eyebrow{ color: var(--gold-light); } /* ---------- Buttons ---------- */ .btn{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 30px; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; border-radius: var(--radius); border: 1px solid transparent; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease; white-space: nowrap; } .btn-gold{ background: linear-gradient(180deg, var(--gold-light), var(--gold)); color: var(--ink); } .btn-gold:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(201,167,101,0.55); } .btn-outline-dark{ border-color: rgba(255,255,255,0.35); color: var(--cream); } .btn-outline-dark:hover{ border-color: var(--gold); color: var(--gold-light); transform: translateY(-2px); } .btn-outline-light{ border-color: var(--ink); color: var(--ink); } .btn-outline-light:hover{ border-color: var(--gold-dim); background: var(--ink); color: var(--cream); transform: translateY(-2px); } .btn-block{ width: 100%; } /* ---------- Header ---------- */ .site-header{ position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 22px 0; transition: padding 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; background: linear-gradient(180deg, rgba(32,30,28,0.85), rgba(32,30,28,0)); } .site-header.is-scrolled{ padding: 14px 0; background: rgba(26,24,22,0.92); backdrop-filter: blur(10px); box-shadow: 0 12px 30px -18px rgba(0,0,0,0.6); border-bottom: 1px solid var(--line-on-dark); } .site-header .container{ display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand{ display: flex; align-items: center; gap: 12px; } .brand img{ height: 58px; width: auto; transition: height 0.3s ease; } .site-header.is-scrolled .brand img{ height: 46px; } .main-nav{ display: flex; align-items: center; gap: 36px; } .main-nav a{ font-size: 13.5px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; color: var(--cream-dim); position: relative; padding: 6px 0; } .main-nav a::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--gold); transition: width 0.25s ease; } .main-nav a:hover{ color: var(--gold-light); } .main-nav a:hover::after{ width: 100%; } .main-nav a.is-active{ color: var(--gold-light); } .main-nav a.is-active::after{ width: 100%; } .header-cta{ display: flex; align-items: center; gap: 18px; } .header-cta .btn{ padding: 13px 22px; font-size: 12.5px; } .nav-toggle{ display: none; background: none; border: 1px solid var(--line-on-dark); border-radius: var(--radius); width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; } .nav-toggle span{ display: block; width: 20px; height: 1.5px; background: var(--cream); transition: transform 0.25s ease, opacity 0.25s ease; } .nav-toggle.is-open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2){ opacity: 0; } .nav-toggle.is-open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); } .mobile-panel{ display: none; } /* ---------- Sections ---------- */ section{ position: relative; } .section{ padding: 110px 0; } .section--tight{ padding: 80px 0; } .section--dark{ background: var(--charcoal); color: var(--cream); } .section--panel{ background: var(--charcoal-2); color: var(--cream); } .section--light{ background: var(--cream); color: var(--ink); } .section-head{ max-width: 680px; margin-bottom: 56px; } .section-head.center{ margin-left: auto; margin-right: auto; text-align: center; } .section-head h2{ font-size: clamp(30px, 4vw, 42px); margin-top: 18px; line-height: 1.15; } .section-head p{ margin-top: 18px; font-size: 17px; line-height: 1.7; color: var(--muted-on-light); } .section--dark .section-head p, .section--panel .section-head p{ color: var(--muted-on-dark); } .divider{ width: 60px; height: 1px; background: var(--gold); margin: 22px 0; } .divider.center{ margin-left: auto; margin-right: auto; } /* ---------- Hero ---------- */ .hero{ min-height: 100vh; display: flex; align-items: center; background: radial-gradient(ellipse 900px 600px at 78% 8%, rgba(201,167,101,0.16), transparent 60%), radial-gradient(ellipse 700px 500px at 10% 100%, rgba(201,167,101,0.08), transparent 60%), linear-gradient(160deg, var(--charcoal) 0%, #262420 60%, var(--charcoal-2) 100%); color: var(--cream); padding: 170px 0 90px; overflow: hidden; } .hero::before{ content: ""; position: absolute; width: 68vw; height: 58vw; right: -10vw; top: -9vw; background-image: url("../assets/logo-b-mark.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0.07; pointer-events: none; z-index: 0; } .hero .container{ position: relative; z-index: 1; } .hero-inner{ max-width: 760px; } .hero h1{ font-size: clamp(40px, 6vw, 68px); line-height: 1.08; margin-top: 22px; color: var(--cream); } .hero h1 em{ font-style: normal; color: var(--gold-light); } .hero-lead{ margin-top: 26px; font-size: 19px; line-height: 1.75; color: var(--muted-on-dark); max-width: 600px; } .hero-actions{ display: flex; flex-wrap: wrap; gap: 18px; margin-top: 42px; } .hero-stats{ display: flex; flex-wrap: wrap; gap: 40px; margin-top: 72px; padding-top: 32px; border-top: 1px solid var(--line-on-dark); } .hero-stat .num{ font-family: var(--serif); font-size: 28px; color: var(--gold-light); display: block; } .hero-stat .label{ margin-top: 6px; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-on-dark); } /* ---------- Pain point grid ---------- */ .grid{ display: grid; gap: 28px; } .grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-6{ grid-template-columns: repeat(6, minmax(0, 1fr)); } .check-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; } .check-item{ display: flex; align-items: flex-start; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line-on-dark); } .check-item .mark{ flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center; color: var(--gold-light); font-size: 12px; margin-top: 1px; } .check-item span.txt{ font-size: 15.5px; color: var(--cream-dim); line-height: 1.4; } .section--light .check-item{ border-bottom: 1px solid var(--line-on-light); } .section--light .check-item .mark{ border-color: var(--gold-dim); color: var(--gold-text); } .section--light .check-item span.txt{ color: var(--ink); } /* ---------- Ledger list (v2) ---------- Editorial alternative to .check-grid's icon-circle rows — reads as line-items in a ledger rather than a feature-icon grid. */ .ledger-list{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; border-top: 1px solid var(--line-on-dark); } .ledger-item{ display: flex; align-items: baseline; gap: 16px; padding: 19px 0; border-bottom: 1px solid var(--line-on-dark); } .ledger-item .mark{ flex: none; font-family: var(--serif); font-size: 15px; color: var(--gold); line-height: 1; width: 14px; } .ledger-item .txt{ font-size: 15.5px; color: var(--cream-dim); line-height: 1.4; } .section--light .ledger-list{ border-color: var(--line-on-light); } .section--light .ledger-item{ border-color: var(--line-on-light); } .section--light .ledger-item .mark{ color: var(--gold-text); } .section--light .ledger-item .txt{ color: var(--ink); } /* ---------- Founder photo ---------- */ .founder-photo{ display: inline-flex; align-items: center; gap: 16px; } .founder-photo img{ width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); box-shadow: 0 8px 22px -10px rgba(0,0,0,0.35); } .founder-photo figcaption{ line-height: 1.4; } .founder-photo .fp-name{ font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--ink); } .founder-photo .fp-role{ font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-on-light); } .section--dark .founder-photo .fp-name, .section--panel .founder-photo .fp-name{ color: var(--cream); } .section--dark .founder-photo .fp-role, .section--panel .founder-photo .fp-role{ color: var(--muted-on-dark); } /* ---------- Tag cloud ---------- */ .tag-cloud{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .tag-pill{ display: inline-block; padding: 10px 20px; border: 1px solid var(--line-on-light); border-radius: 30px; font-size: 13.5px; letter-spacing: 0.02em; color: var(--muted-on-light); transition: border-color 0.25s ease, color 0.25s ease; } .tag-pill:hover{ border-color: var(--gold-dim); color: var(--ink); } .section--dark .tag-pill, .section--panel .tag-pill{ border-color: var(--line-on-dark); color: var(--muted-on-dark); } .section--dark .tag-pill:hover, .section--panel .tag-pill:hover{ border-color: var(--gold); color: var(--cream); } /* ---------- Cards ---------- */ .card{ background: var(--panel); border: 1px solid var(--line-on-dark); border-radius: var(--radius); padding: 38px 32px; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .card:hover{ transform: translateY(-6px); border-color: var(--gold-dim); box-shadow: var(--shadow-soft); } .card .icon{ width: 52px; height: 52px; border: 1px solid var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold-light); margin-bottom: 24px; } .card .icon svg{ width: 24px; height: 24px; } .card h3{ font-size: 20px; color: var(--cream); margin-bottom: 12px; } .card p{ color: var(--muted-on-dark); font-size: 15px; line-height: 1.7; } .card.light{ background: #fff; border-color: var(--line-on-light); } .card.light h3{ color: var(--ink); } .card.light p{ color: var(--muted-on-light); } /* ---------- Comparison table ---------- */ .compare{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line-on-dark); border-radius: var(--radius); overflow: hidden; } .compare-col{ padding: 40px 30px; border-left: 1px solid var(--line-on-dark); } .compare-col:first-child{ border-left: none; } .compare-col h3{ font-family: var(--sans); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-on-dark); font-weight: 700; } .compare-col .price{ font-family: var(--serif); font-size: 26px; color: var(--cream); margin: 14px 0 24px; display: block; } .compare-col ul li{ font-size: 14.5px; color: var(--muted-on-dark); padding: 10px 0; border-top: 1px solid var(--line-on-dark); line-height: 1.5; } .compare-col ul li:first-child{ border-top: none; } .compare-col.featured{ background: linear-gradient(180deg, rgba(201,167,101,0.14), rgba(201,167,101,0.03)); position: relative; } .compare-col.featured .tag{ position: absolute; top: -1px; right: 24px; background: var(--gold); color: var(--ink); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 14px; border-radius: 0 0 4px 4px; } .compare-col.featured .price{ color: var(--gold-light); } .compare-col.featured ul li{ color: var(--cream-dim); } /* ---------- Pricing cards ---------- */ .price-card{ background: var(--panel); border: 1px solid var(--line-on-dark); border-radius: var(--radius); padding: 60px 44px; display: flex; flex-direction: column; position: relative; transition: transform 0.3s ease, border-color 0.3s ease; } .price-card:hover{ transform: translateY(-6px); border-color: var(--gold-dim); } .price-card.featured{ border-color: var(--gold); background: linear-gradient(180deg, #3a3222, var(--panel) 60%); } .price-card .tag{ position: absolute; top: 28px; right: 28px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--gold-light); border: 1px solid var(--gold-dim); padding: 6px 12px; border-radius: 20px; } .price-card h3{ font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--sans); color: var(--gold-light); font-weight: 700; } .price-card .amount{ font-family: var(--serif); font-size: 56px; color: var(--cream); margin: 22px 0 6px; } .price-card .amount sup{ font-size: 19px; color: var(--muted-on-dark); font-family: var(--sans); } .price-card .cadence{ font-size: 15px; color: var(--muted-on-dark); margin-bottom: 32px; } .price-card ul{ flex: 1; margin-bottom: 32px; } .price-card ul li{ display: flex; gap: 12px; font-size: 16px; color: var(--cream-dim); padding: 11px 0; line-height: 1.55; } .price-card ul li .m{ color: var(--gold); flex: none; } .price-card .btn{ padding: 18px 30px; font-size: 15px; } .tier-badge{ display: inline-block; margin-top: 12px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--gold-light); border: 1px solid var(--gold-dim); padding: 5px 12px; border-radius: 20px; } .section--light .tier-badge{ color: var(--gold-text); border-color: var(--line-on-light); } /* ---------- Stat banner ---------- */ .callout{ background: var(--ink); color: var(--cream); border-radius: var(--radius); padding: 56px; text-align: center; position: relative; border: 1px solid var(--line-on-dark); } .callout p.big{ font-family: var(--serif); font-size: clamp(24px, 3vw, 32px); line-height: 1.4; max-width: 780px; margin: 0 auto; } .callout p.big em{ color: var(--gold-light); font-style: normal; } /* ---------- CTA band ---------- */ .cta-band{ background: linear-gradient(160deg, var(--charcoal-2), var(--charcoal)); color: var(--cream); text-align: center; padding: 100px 0; } .cta-band h2{ font-size: clamp(28px, 4vw, 40px); } .cta-band p{ margin-top: 18px; color: var(--muted-on-dark); font-size: 17px; } .cta-band .hero-actions{ justify-content: center; margin-top: 38px; } /* ---------- Footer ---------- */ .site-footer{ background: var(--charcoal); color: var(--muted-on-dark); padding: 80px 0 30px; border-top: 1px solid var(--line-on-dark); } .footer-grid{ display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 50px; padding-bottom: 50px; border-bottom: 1px solid var(--line-on-dark); } .footer-brand .brand{ margin-bottom: 18px; } .footer-brand p{ font-size: 14.5px; line-height: 1.7; max-width: 320px; } .footer-social{ display: flex; gap: 12px; margin-top: 22px; } .footer-social a{ display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--line-on-dark); border-radius: 50%; color: var(--muted-on-dark); transition: color 0.2s ease, border-color 0.2s ease; } .footer-social a:hover{ color: var(--gold-light); border-color: var(--gold-light); } .footer-social svg{ width: 17px; height: 17px; } .footer-credit{ text-align: center; margin-top: 18px; font-size: 12px; color: var(--muted-on-dark); } .footer-credit a{ color: inherit; text-decoration: underline; transition: color 0.2s ease; } .footer-credit a:hover{ color: var(--gold-light); } .footer-col h2, .footer-col h3{ font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream); font-weight: 700; margin-bottom: 20px; } .footer-col ul li{ margin-bottom: 12px; } .footer-col a{ font-size: 14.5px; color: var(--muted-on-dark); transition: color 0.2s ease; } .footer-col a:hover{ color: var(--gold-light); } .footer-bottom{ display: flex; justify-content: space-between; align-items: center; padding-top: 26px; font-size: 13px; flex-wrap: wrap; gap: 12px; } /* ---------- Reveal animation ---------- */ .reveal{ opacity: 0; transform: translateY(12px); transition: opacity 0.35s cubic-bezier(0.22,0.61,0.36,1), transform 0.35s cubic-bezier(0.22,0.61,0.36,1); } .reveal.is-visible{ opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce){ .reveal{ opacity: 1; transform: none; transition: none; } } /* ---------- Page hero (sub-pages) ---------- */ .page-hero{ background: linear-gradient(160deg, var(--charcoal) 0%, var(--charcoal-2) 100%); color: var(--cream); padding: 190px 0 90px; text-align: center; position: relative; overflow: hidden; } .page-hero::before{ content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 700px 400px at 50% 0%, rgba(201,167,101,0.14), transparent 60%); } .page-hero .container{ position: relative; z-index: 1; } .page-hero .eyebrow{ justify-content: center; } .page-hero .eyebrow::before{ display: none; } .page-hero h1{ font-size: clamp(34px, 5vw, 54px); margin-top: 18px; } .page-hero p{ margin-top: 20px; max-width: 620px; margin-left: auto; margin-right: auto; color: var(--muted-on-dark); font-size: 17px; line-height: 1.7; } /* ---------- FAQ ---------- */ .faq-item{ border-bottom: 1px solid var(--line-on-light); padding: 26px 0; } .faq-q{ display: flex; justify-content: space-between; align-items: center; gap: 20px; width: 100%; background: none; border: none; padding: 0; text-align: left; cursor: pointer; font-family: var(--serif); font-size: 19px; color: var(--ink); } .faq-q:focus-visible{ outline: 2px solid var(--gold); outline-offset: 4px; } .faq-q .plus{ flex: none; width: 28px; height: 28px; border: 1px solid var(--gold-dim); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold-dim); font-size: 16px; transition: transform 0.3s ease; } .faq-item.is-open .faq-q .plus{ transform: rotate(45deg); } .faq-a{ max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .faq-a p{ padding-top: 16px; color: var(--muted-on-light); font-size: 15.5px; line-height: 1.75; max-width: 720px; } /* ---------- Timeline / process ---------- */ .process{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; } .process-step{ position: relative; padding-top: 46px; } .process-step .n{ position: absolute; top: 0; left: 0; font-family: var(--serif); font-size: 15px; color: var(--gold); border: 1px solid var(--gold); width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .process-step h3{ font-size: 17px; margin-bottom: 10px; color: var(--ink); } .process-step p{ font-size: 14.5px; color: var(--muted-on-light); line-height: 1.65; } .section--dark .process-step h3, .section--panel .process-step h3{ color: var(--cream); } /* ---------- Values grid (about) ---------- */ .value-item{ padding: 30px 0; border-top: 1px solid var(--line-on-light); display: grid; grid-template-columns: 200px 1fr; gap: 30px; } .value-item:first-child{ border-top: none; } .value-item h3{ font-size: 20px; color: var(--ink); } .value-item p{ color: var(--muted-on-light); font-size: 15.5px; line-height: 1.7; } /* ---------- Contact ---------- */ .contact-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } .contact-info-item{ display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line-on-light); } .contact-info-item .icon{ flex: none; width: 44px; height: 44px; border: 1px solid var(--gold-dim); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold-dim); } .contact-info-item .ci-label{ font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-on-light); margin-bottom: 6px; } .contact-info-item p, .contact-info-item a{ font-size: 16px; color: var(--ink); font-weight: 600; } .contact-info-item a{ display: inline-block; padding: 12px 0; margin: -12px 0; } /* ---------- Legal document ---------- */ .legal-doc{ max-width: 760px; margin: 0 auto; } .legal-doc .legal-updated{ font-family: var(--sans); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-on-light); margin-bottom: 44px; padding-bottom: 20px; border-bottom: 1px solid var(--line-on-light); } .legal-doc section{ margin-bottom: 40px; } .legal-doc h2{ font-size: 22px; color: var(--ink); margin-bottom: 16px; } .legal-doc p{ font-size: 15.5px; line-height: 1.75; color: var(--muted-on-light); margin-bottom: 12px; } .legal-doc ul{ margin: 4px 0 16px 0; padding-left: 0; } .legal-doc ul li{ list-style: none; position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.75; color: var(--muted-on-light); margin-bottom: 8px; } .legal-doc ul li::before{ content: "—"; position: absolute; left: 0; color: var(--gold-text); } .legal-doc strong{ color: var(--ink); font-weight: 600; } .legal-doc .legal-footer-note{ margin-top: 50px; padding-top: 30px; border-top: 1px solid var(--line-on-light); font-family: var(--sans); font-size: 13px; color: var(--muted-on-light); text-align: center; } /* ---------- Enquiry form ---------- */ .form-field{ display: flex; flex-direction: column; gap: 8px; } .form-field label{ font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--muted-on-light); } .form-field label span{ text-transform: none; font-weight: 400; letter-spacing: 0; color: var(--muted-on-light); } .form-field input, .form-field select, .form-field textarea{ font-family: var(--sans); font-size: 15px; color: var(--ink); background: transparent; border: none; border-bottom: 1px solid var(--line-on-light); padding: 10px 2px; transition: border-color 0.25s ease; width: 100%; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline: none; border-color: var(--gold-dim); } .form-field textarea{ resize: vertical; min-height: 90px; } .form-field select{ cursor: pointer; } .form-note{ margin-top: 14px; font-size: 12.5px; color: var(--muted-on-light); line-height: 1.6; } .form-note--success{ font-size: 14px; font-weight: 600; color: #3f6b3f; } .form-note--error{ font-size: 13px; font-weight: 600; color: #a83a3a; } .note-box{ margin-top: 30px; padding: 20px 22px; background: rgba(201,167,101,0.1); border: 1px solid var(--gold-dim); border-radius: var(--radius); font-size: 13.5px; color: var(--muted-on-light); line-height: 1.6; } /* Alternating column layout (Services page). Heading always comes first in DOM source (correct reading order for screen readers at every width). This visually pushes it to the right column on desktop only — mobile keeps natural source order once the grid collapses to one column. */ @media (min-width: 861px){ .swap-right{ order: 2; } } /* ---------- Responsive ---------- */ @media (max-width: 1024px){ .footer-grid{ grid-template-columns: 1fr 1fr; gap: 40px; } .compare{ grid-template-columns: 1fr; } .compare-col{ border-left: none; border-top: 1px solid var(--line-on-dark); } .compare-col:first-child{ border-top: none; } .check-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .ledger-list{ grid-template-columns: 1fr; } .process{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-grid{ grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 860px){ .main-nav{ display: none; } .header-cta{ display: none; } .nav-toggle{ display: flex; } .grid-3{ grid-template-columns: minmax(0, 1fr); } .grid-2{ grid-template-columns: minmax(0, 1fr); } .grid-6{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .check-grid{ grid-template-columns: minmax(0, 1fr); } .value-item{ grid-template-columns: minmax(0, 1fr); gap: 10px; } .footer-grid{ grid-template-columns: minmax(0, 1fr); } .footer-bottom{ flex-direction: column; align-items: flex-start; } .site-header{ background: rgba(26,24,22,0.97); } .mobile-panel{ display: block; position: fixed; inset: 0; top: 78px; background: var(--charcoal); z-index: 999; transform: translateX(100%); transition: transform 0.3s ease; padding: 20px 32px 40px; overflow-y: auto; } .mobile-panel.is-open{ transform: translateX(0); } .mobile-panel a:not(.btn){ display: block; padding: 18px 0; border-bottom: 1px solid var(--line-on-dark); font-family: var(--serif); font-size: 22px; color: var(--cream); } .mobile-panel .btn{ margin-top: 30px; } } @media (max-width: 640px){ .section{ padding: 80px 0; } .hero{ padding-top: 150px; } .hero::before{ width: 90vw; height: 76vw; right: -8vw; top: 4vw; } .hero-stats{ gap: 26px; } .process{ grid-template-columns: 1fr; } .compare-col{ padding: 30px 22px; } .callout{ padding: 36px 24px; } .container{ padding: 0 20px; } }