@font-face{font-family:"Sora";src:url(/fonts/sora-vf.woff2) format("woff2");font-weight:100 800;font-style:normal;font-display:swap} @font-face{font-family:"DM Sans";src:url(/fonts/dm-sans-vf.woff2) format("woff2");font-weight:100 1000;font-style:normal;font-display:swap} @font-face{font-family:"DM Sans";src:url(/fonts/dm-sans-italic-vf.woff2) format("woff2");font-weight:100 1000;font-style:italic;font-display:swap} /* advisor-layout.css andrewhillmanadvisor.com — cyan paper, ink, tangerine CTAs. Sora display + DM Sans body. Offset hero (portrait left, copy right), airy measure. Not teal-gold consulting. Linked last in . No font-size !important so the a11y overlay still wins. */ :root { --bg: #ECFEFF; --paper: #ECFEFF; --surface: #FFFFFF; --ink: #164E63; --ink-2: #155E75; --line: #A5F3FC; --gold: #FF6B2C; --gold-deep: #C2410C; --navy: #164E63; --cobalt: #164E63; --cobalt-deep: #155E75; --accent: #06B6D4; --advisor-primary: #06B6D4; --advisor-accent: #FF6B2C; --cyan: #06B6D4; --cta: #FF6B2C; --coral: #FF6B2C; --amber: #06B6D4; --amber-ink: #164E63; --violet: #06B6D4; --violet-ink: #164E63; --sky: #06B6D4; --sunny: #FF6B2C; --mist: #CFFAFE; --gold-ink: #164E63; --serif: "Sora", Georgia, "Times New Roman", serif; --sans: "DM Sans", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --display: "Sora", Georgia, "Times New Roman", serif; --body: "DM Sans", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } html { overflow-x: hidden; } html.ah-advisor, html.ah-advisor body, body { font-family: var(--sans); color: var(--ink); background: var(--bg); letter-spacing: 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } html.ah-advisor h1, html.ah-advisor h2, html.ah-advisor h3, html.ah-advisor h4, html.ah-advisor h5, html.ah-advisor h6, html.ah-advisor .brand, html.ah-advisor .statement .big, html.ah-advisor .svc-row h3, html.ah-advisor .svc-row .no, html.ah-advisor .sc h3, html.ah-advisor .sc .no, html.ah-advisor .qa .q, html.ah-advisor .pq blockquote, html.ah-advisor .record .st .n, html.ah-advisor .e .t, html.ah-advisor .ph h3, html.ah-advisor .ph .num, html.ah-advisor .ms h3, html.ah-advisor .mediawall .logos a, html.ah-advisor .mediawall .logos span, h1, h2, h3, h4, h5, h6, .brand, .statement .big, blockquote { font-family: var(--serif); color: #164E63; font-optical-sizing: auto; } html.ah-advisor body, html.ah-advisor p, html.ah-advisor li, html.ah-advisor .lede, html.ah-advisor .hero p.sub, html.ah-advisor .nav-links, html.ah-advisor .facts, html.ah-advisor .contact { font-family: var(--sans); } a { color: #164E63; } .brand, .brand b { color: #164E63; } .nav-links a { color: var(--ink-2); } .nav-links a:hover, .nav-links a[aria-current="page"] { color: #164E63; } .kicker, .eyebrow, .statement .lbl, .hero .eyebrow, .phero .eyebrow { color: #164E63; } /* Gold CTAs — consulting, not a navy fill */ .nav-cta, .btn-pri, a.btn-pri, .btn.btn-pri, #inquire button.send { background: #FF6B2C !important; background-image: none !important; color: #164E63 !important; border-color: #FF6B2C !important; box-shadow: 0 8px 22px rgba(255, 122, 26, 0.28); border-radius: 999px; font-family: var(--sans); font-weight: 600; letter-spacing: 0.02em; } .nav-cta:hover, .btn-pri:hover, a.btn-pri:hover, .btn.btn-pri:hover, #inquire button.send:hover { background: #EA580C !important; color: #164E63 !important; } /* Quiet secondary */ .btn-sec { background: transparent; color: #164E63; border: 1px solid rgba(22, 78, 99, 0.28); border-radius: 999px; } /* Nav: thin gold hairline, cream glass */ .nav { background: rgba(236, 254, 255, 0.88) !important; border-bottom: 1px solid rgba(255, 122, 26, 0.38) !important; backdrop-filter: saturate(140%) blur(16px); } .nav-in { padding-top: 20px; padding-bottom: 20px; } /* ----- Offset consulting hero: portrait LEFT, copy right, lots of air ----- */ .hero { padding: 104px 36px 112px !important; background: radial-gradient(46% 42% at 6% 18%, rgba(22, 78, 99, 0.05), transparent 66%), radial-gradient(50% 40% at 96% 0%, rgba(255, 122, 26, 0.12), transparent 62%), linear-gradient(180deg, #FFFFFF 0%, var(--bg) 72%) !important; } .hero .in { display: grid !important; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) !important; justify-items: start !important; align-items: center !important; gap: 80px !important; text-align: left !important; max-width: 1180px; margin-left: auto; margin-right: auto; } .hero-copy, .hero .eyebrow, .hero h1, .hero p.sub, .hero .btns, .hero .scrollcue { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; justify-content: flex-start !important; justify-items: start !important; } .hero h1 { max-width: 20ch; color: #164E63; font-weight: 500; letter-spacing: -0.02em; line-height: 1.12; } .hero p.sub { max-width: 42ch; font-size: 1.15rem; line-height: 1.55; color: var(--ink-2); } .hero-photo, .hero .speaking-portrait { order: -1; margin: 0 !important; } .hero .btns { justify-content: flex-start !important; gap: 14px; } @media (max-width: 860px) { .hero .in { grid-template-columns: 1fr !important; gap: 36px !important; justify-items: start !important; } .hero-photo, .hero .speaking-portrait { margin: 0 !important; } } /* About page: same offset when a portrait is present */ .phero:has(.speaking-portrait) { padding: 80px 36px 88px !important; } .phero:has(.speaking-portrait) .in { display: grid !important; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) !important; gap: 64px !important; align-items: start !important; text-align: left !important; } .phero:has(.speaking-portrait) .speaking-portrait, .phero:has(.speaking-portrait) .about-portrait { grid-column: 1; grid-row: 1 / span 8; margin: 0.4rem 0 0 !important; } .phero:has(.speaking-portrait) .crumb, .phero:has(.speaking-portrait) .eyebrow, .phero:has(.speaking-portrait) h1, .phero:has(.speaking-portrait) .lede { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; } @media (max-width: 860px) { .phero:has(.speaking-portrait) .in { grid-template-columns: 1fr !important; } .phero:has(.speaking-portrait) .speaking-portrait, .phero:has(.speaking-portrait) .about-portrait { grid-row: auto; margin: 1.2rem 0 0 !important; } } /* Inner consulting pages without a portrait: left rag, airy — not a stacked magazine cover */ .phero:not(:has(.speaking-portrait)) { padding: 88px 36px 64px !important; } .phero:not(:has(.speaking-portrait)) .in, .phero:not(:has(.speaking-portrait)) h1, .phero:not(:has(.speaking-portrait)) .lede, .phero:not(:has(.speaking-portrait)) .eyebrow { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; } /* Air on the page */ section { padding-top: 96px; padding-bottom: 96px; } section .wrap > h2, section .wrap > p.lede, .kicker { text-align: left; margin-left: 0; margin-right: auto; } section .wrap > h2 { max-width: 22ch; } section .wrap > p.lede { max-width: 58ch; } /* Statement: editorial, not a stacked dossier */ .statement { padding: 96px 0 !important; } .statement .row { gap: 72px; } .statement .big { max-width: 18ch; } /* ----- Speaking / about portrait: cream mat, teal inner rule, gold hairline ----- */ .hero-photo, .about-portrait, .speaking-portrait { --portrait-cream: #ECFEFF; --portrait-navy: #164E63; --portrait-gold: #FF6B2C; box-sizing: border-box; max-width: 288px; width: min(78vw, 288px); margin: 1.35rem auto 0.4rem; padding: 9px 9px 16px; background: var(--portrait-cream); border: 1px solid var(--portrait-navy); box-shadow: 0 0 0 5px var(--portrait-cream), 0 0 0 6px var(--portrait-gold), 0 18px 40px rgba(22, 78, 99, 0.14); border-radius: 2px; } .hero-photo img, .about-portrait img, .speaking-portrait img, .hero-photo picture, .about-portrait picture, .speaking-portrait picture { display: block !important; width: 100% !important; max-width: 270px !important; height: auto !important; margin-left: auto !important; margin-right: auto !important; border-radius: 1px; border: 1px solid rgba(22, 78, 99, 0.28); box-shadow: none; object-fit: contain; } .hero-photo figcaption, .about-portrait figcaption, .speaking-portrait figcaption { text-align: center; margin-top: 0.85rem; font-family: var(--sans); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); } @media (max-width: 520px) { .hero-photo, .about-portrait, .speaking-portrait { max-width: 248px; width: min(82vw, 248px); } } /* 30-year infographic stays readable, not full-bleed */ .ah-infographic { margin: 36px auto; max-width: 520px; text-align: center; } .ah-infographic img { width: 100%; max-width: 520px; height: auto; margin: 0 auto; display: block; } /* Brand mark */ .brand img { width: 32px !important; height: 32px !important; max-width: 32px; object-fit: contain; border-radius: 8px; } /* Cards: light surface, gold hairline, more air */ .e, .sc, .ms, .qa { background: var(--surface); border-color: var(--line); } .e { border-top: 2px solid #FF6B2C; } .sc { padding: 8px 4px 4px; } /* Legal / utility pages: cream paper, teal links */ body > .wrap h1, body > .wrap .sub { text-align: left; margin-left: 0; margin-right: auto; } figcaption { text-align: center; } @media (max-width: 820px) { .nav-links { justify-content: flex-start; } .nav-in { justify-content: flex-start; } } /* Win against leftover Fraunces / Hanken if an earlier block used !important. font-family only — never font-size. */ html.ah-advisor h1, html.ah-advisor h2, html.ah-advisor h3, html.ah-advisor h4, html.ah-advisor h5, html.ah-advisor h6, html.ah-advisor .brand, html.ah-advisor .statement .big, html.ah-advisor blockquote { font-family: "Sora", Georgia, "Times New Roman", serif !important; } html.ah-advisor, html.ah-advisor body, html.ah-advisor p, html.ah-advisor li, html.ah-advisor .lede, html.ah-advisor .hero p.sub, html.ah-advisor .nav-links, html.ah-advisor .nav-cta, html.ah-advisor .btn { font-family: "DM Sans", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } /* ------------------------------------------------------------------ Readable contrast (2026-08-20). Visual only. Gold fill CTAs keep teal ink on the button. Body / nav / links = teal on cream. ------------------------------------------------------------------ */ html.ah-advisor body, body { font-size: 16.5px; line-height: 1.55; letter-spacing: 0; color: var(--ink); } h1 em, h2 em, h3 em, .hero h1 em, .phero h1 em { color: #164E63 !important; -webkit-text-fill-color: #164E63 !important; background: none !important; background-image: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; } .kicker, .eyebrow, .hero .eyebrow, .phero .eyebrow, .lbl-eyebrow { color: #164E63 !important; } a, .nav-links a, .brand, .brand b { color: #164E63; } p a, li a, dd a { color: #164E63; text-decoration: underline; text-underline-offset: 2px; } .nav-links a, .brand, .btn, a.btn, .nav-cta { text-decoration: none; } .nav-cta, .btn-pri, a.btn-pri, .btn.btn-pri, #inquire button.send { background: #FF6B2C !important; color: #164E63 !important; border-color: #FF6B2C !important; } .btn-sec { color: #164E63; } .speaking-portrait img, .hero-photo img, .about-portrait img { object-fit: contain !important; } /* ------------------------------------------------------------------ Tools restore (2026-08-20). Visibility + 44px tap only. Does not add products, calculators, or copy. Does not hide tools. ------------------------------------------------------------------ */ /* Skip-links: overflow-x:hidden on html/body can clip left:-9999px even after :focus { left:0 }. Pin focused skip to the viewport. */ .skip-to-content:focus, .skip-to-content:focus-visible, a.skip-to-content:focus, .skip:focus, .skip:focus-visible, .skip-link:focus, .skip-link:focus-visible, a.skip-link:focus { position: fixed !important; left: 12px !important; top: 12px !important; width: auto !important; height: auto !important; min-width: 44px; min-height: 44px; overflow: visible !important; clip: auto !important; clip-path: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; display: inline-flex !important; align-items: center; z-index: 2147483646 !important; } /* Accessibility toolbar injected by enhance.js */ .enh-bar, .enh-panel, .enh-lang { opacity: 1; visibility: visible; pointer-events: auto; } .enh-btn, .enh-toggle, .enh-step, .enh-reset { min-width: 44px; min-height: 44px; } /* Existing CTAs / form controls / downloads */ .nav-cta, .btn, a.btn, .btn-pri, a.btn-pri, .btn-sec, button.send, #inquire button.send, #inquire input, #inquire select, .dl .btn, .dl a.btn, a[download] { min-height: 44px; } /* Social chips already used as tap tools */ .chip { min-width: 44px; min-height: 44px; } /* Glossary A-Z jump filters */ .index a, nav.az a, nav.index a { min-width: 44px; min-height: 44px; box-sizing: border-box; } /* Coverage search on the record */ .cc-search, input.cc-search, input[type="search"] { min-height: 44px; box-sizing: border-box; } /* Record / shared site-search modal (markup already in the tree) */ #site-search-modal { position: fixed; inset: 0; background: rgba(10, 10, 10, 0.85); z-index: 10000; display: none; align-items: flex-start; justify-content: center; padding: 6rem 1rem 1rem; } #site-search-modal.open { display: flex !important; } #site-search-modal-inner { background: #fff; max-width: 720px; width: 100%; border-radius: 14px; padding: 1.5rem; max-height: 75vh; overflow-y: auto; } #site-search-close { min-width: 44px; min-height: 44px; background: transparent; border: none; cursor: pointer; float: right; font-size: 1.4rem; } #site-tools-bar { position: fixed; bottom: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: auto; opacity: 1; visibility: visible; } #site-tools-bar .stb-btn, .stb-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; min-width: 44px; min-height: 44px; background: #0A0A0A; color: #fff; border: none; border-radius: 50%; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); font-size: 1.1rem; position: relative; } .stb-btn[data-label]::after { content: attr(data-label); position: absolute; right: 56px; white-space: nowrap; background: #0A0A0A; color: #fff; padding: 0.45rem 0.8rem; border-radius: 6px; font-size: 0.85rem; opacity: 0; pointer-events: none; } .stb-btn:hover::after, .stb-btn:focus::after { opacity: 0.98; } #google_translate_widget { position: fixed; bottom: 1rem; right: 5rem; z-index: 9998; background: #fff; padding: 0.4rem 0.6rem; border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); display: none; } #google_translate_widget.open { display: block !important; } @media print { #site-tools-bar, #site-search-modal, #google_translate_widget, .enh-bar, .enh-panel, .enh-lang { display: none !important; } } /* ------------------------------------------------------------------ FUN palette (2026-08-20). Visual only. Paper cyan-ice, ink, tangerine CTA. Accent cyan on hairlines / portrait rule. Dark ink on the tangerine button. Beats leftover cream/gold/teal in earlier