/* ============================================================ INTEGRIS AVIATION CONSULTANCY — Design System "Private banking for aviation" — Navy + Brushed Nickel ============================================================ */ /* Web fonts (Newsreader, Hanken Grotesk, IBM Plex Mono) are loaded from the page with preconnect hints — see _tools/build.js — so they download in parallel with this file. */ :root { /* ---- Navy scale ---- */ --navy-950: #14304f; --navy-900: #1b3c5e; --navy-800: #23486c; --navy-700: #2c557c; --navy-600: #386690; --navy-500: #4878a4; /* ---- Nickel / silver scale ---- */ --nickel-50: #f4f6f8; --nickel-100: #e7eaee; --nickel-200: #d3d8df; --nickel-300: #bcc3cc; --nickel-400: #9aa3af; --nickel-500: #79828f; --pewter: #6b7480; /* ---- Neutrals ---- */ --paper: #f2f2ed; --paper-2: #efefe9; --white: #ffffff; --ink: #0c1a28; --ink-soft: #46535f; --ink-mute: #6f7a85; /* ---- Roles ---- */ --bg: var(--paper); --accent: var(--nickel-400); /* ---- Wine / burgundy hover accent (works with the navy + nickel palette) ---- */ --wine: #8c2f43; /* on light backgrounds */ --wine-light: #d96a78; /* on navy backgrounds — clearer red */ /* ---- Type ---- */ --serif: 'Newsreader', Georgia, 'Times New Roman', serif; --sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ---- Layout ---- */ --maxw: 1240px; --gutter: clamp(20px, 5vw, 64px); --radius: 2px; /* ---- Brushed nickel ---- */ /* fine horizontal grain + diagonal sheen with real dark troughs = visibly metallic */ --metal: repeating-linear-gradient(0deg, rgba(255,255,255,.34) 0 1px, rgba(54,64,76,.11) 1px 2px), linear-gradient(100deg, #f4f6f8 0%, #aeb6c1 16%, #e9edf1 32%, #8f99a6 50%, #d4dae0 66%, #939eaa 82%, #c4cbd3 100%); --metal-edge: #868f9c; --metal-dark: repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, rgba(8,26,46,.18) 1px 2px), linear-gradient(100deg, #aeb6c1 0%, #6b7480 28%, #b6bdc7 50%, #5b6573 72%, #9aa3ae 100%); } /* ============================================================ RESET / BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--sans); background: var(--bg); color: var(--ink); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } ul { list-style: none; padding: 0; } h1, h2, h3, h4 { font-weight: 400; line-height: 1.08; letter-spacing: -0.01em; } /* ============================================================ TYPE UTILITIES ============================================================ */ .serif { font-family: var(--serif); } .mono { font-family: var(--mono); } .eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pewter); display: inline-flex; align-items: center; gap: 12px; } .eyebrow::before { content: ""; width: 34px; height: 3px; background: var(--metal); border-radius: 2px; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 .5px rgba(120,130,142,.4); display: inline-block; } .eyebrow.no-rule::before { display: none; } .eyebrow.on-navy { color: var(--nickel-300); } .eyebrow.on-navy::before { background: var(--metal); } .display { font-family: var(--serif); font-weight: 400; line-height: 1.04; letter-spacing: -0.02em; } .h-xl { font-size: clamp(40px, 6.2vw, 84px); } .h-lg { font-size: clamp(34px, 4.6vw, 60px); } .h-md { font-size: clamp(28px, 3.4vw, 42px); } .h-sm { font-size: clamp(22px, 2.4vw, 30px); } .lede { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--ink-soft); } .serif-i { font-style: italic; } /* ============================================================ LAYOUT ============================================================ */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .wrap-wide { max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(72px, 9vw, 140px); } .section-sm { padding-block: clamp(48px, 6vw, 88px); } .navy { background: var(--navy-900); color: var(--nickel-100); } .navy h1, .navy h2, .navy h3 { color: var(--white); } .navy .lede { color: var(--nickel-300); } .paper-2 { background: var(--paper-2); } .divider { height: 1px; background: var(--nickel-200); border: 0; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: 0.01em; padding: 15px 26px; border-radius: var(--radius); transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease; white-space: nowrap; } .btn .arrow { transition: transform .25s ease, color .25s ease; } .btn:hover .arrow { transform: translateX(4px); } .btn-metal:hover .arrow, .btn-ghost-dark:hover .arrow { color: var(--wine); } .btn-ghost:hover .arrow, .btn-navy:hover .arrow { color: var(--wine-light); } .btn-metal { background: var(--metal); background-size: 100% 100%, 220% 100%; background-position: 0 0, 0 0; color: #050d17; font-weight: 800; text-shadow: none; border: 1px solid var(--metal-edge); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 3px rgba(46,56,68,.4), 0 8px 22px -8px rgba(8,26,46,.5); transition: transform .25s ease, box-shadow .25s ease, background-position .5s ease, color .25s ease; } .btn-metal:hover { transform: translateY(-2px); background-position: 0 0, 100% 0; box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -2px 3px rgba(46,56,68,.45), 0 14px 32px -10px rgba(8,26,46,.6); } .btn-metal:active { transform: translateY(0); box-shadow: inset 0 2px 4px rgba(46,56,68,.5), inset 0 1px 0 rgba(255,255,255,.6); } .btn-navy { background: var(--navy-900); color: var(--white); } .btn-navy:hover { background: var(--navy-700); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--white); border: 1px solid rgba(220,228,236,.32); } .btn-ghost:hover { border-color: var(--nickel-200); background: rgba(255,255,255,.05); } .btn-ghost-dark { background: transparent; color: var(--navy-900); border: 1px solid var(--nickel-300); } .btn-ghost-dark:hover { border-color: var(--navy-700); background: var(--white); } .btn-lg { padding: 18px 32px; font-size: 16px; } .btn-block { display: flex; width: 100%; justify-content: center; } .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-700); font-weight: 500; border-bottom: 1px solid var(--nickel-300); padding-bottom: 3px; transition: gap .25s ease, border-color .25s ease, color .25s ease; } .link-arrow:hover { gap: 14px; color: var(--wine); border-color: var(--wine); } .link-arrow.on-navy { color: var(--nickel-200); border-color: var(--nickel-500); } .link-arrow.on-navy:hover { color: var(--wine-light); border-color: var(--wine-light); } /* ============================================================ HEADER / NAV ============================================================ */ #site-header { position: sticky; top: 0; z-index: 100; } .nav { background: var(--navy-950); border-bottom: 1px solid rgba(154,163,175,.18); color: var(--nickel-100); } .nav-inner { max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; height: 76px; } .brand { display: flex; align-items: center; gap: 12px; } .brand-logo { height: 52px; width: auto; display: block; padding-block: 6px; box-sizing: content-box; } .brand-logo-full { height: 60px; width: auto; display: block; } @media (max-width: 980px) { .brand-logo { height: 44px; } } .brand-mark { width: 22px; height: 22px; transform: rotate(45deg); border: 1.5px solid var(--nickel-300); position: relative; flex: none; } .brand-mark::after { content: ""; position: absolute; inset: 4px; background: var(--metal); } .brand-text { line-height: 1; } .brand-name { font-family: var(--serif); font-size: 21px; letter-spacing: .04em; color: #fff; } .brand-sub { font-family: var(--mono); font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: var(--nickel-400); margin-top: 3px; } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-link { font-size: 14.5px; font-weight: 500; color: var(--nickel-200); padding: 10px 14px; border-radius: var(--radius); position: relative; transition: color .2s ease; } .nav-link:hover { color: var(--wine-light); } .nav-link.active { color: #fff; } .nav-link.active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--metal); border-radius: 2px; } .nav-right { display: flex; align-items: center; gap: 18px; } .nav-phone { font-family: var(--mono); font-size: 13.5px; color: var(--nickel-200); letter-spacing: .02em; display: inline-flex; align-items: center; gap: 8px; } .nav-phone:hover { color: var(--wine-light); } .nav-phone .dot { width: 6px; height: 6px; border-radius: 50%; background: #5fb87f; box-shadow: 0 0 0 3px rgba(95,184,127,.18); } .nav-cta { padding: 11px 20px; font-size: 14px; } /* dropdown */ .has-dropdown { position: relative; } .dropdown { position: absolute; top: calc(100% + 2px); left: 0; min-width: 280px; background: var(--navy-900); border: 1px solid rgba(154,163,175,.2); padding: 10px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .22s ease; box-shadow: 0 24px 50px -20px rgba(0,0,0,.6); } .has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown a { display: block; padding: 12px 14px; border-radius: var(--radius); transition: background .18s ease; } .dropdown a:hover { background: var(--navy-700); } .dropdown a:hover .dd-title { color: var(--wine-light); } .dropdown a .dd-title { font-size: 15px; color: #fff; font-weight: 500; } .dropdown a .dd-sub { font-size: 12.5px; color: var(--nickel-400); margin-top: 2px; } /* mobile */ .nav-toggle { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; } .nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--nickel-200); position: relative; } .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 22px; height: 1.5px; background: var(--nickel-200); transition: .25s; } .nav-toggle span::before { top: -7px; } .nav-toggle span::after { top: 7px; } .mobile-menu { display: none; } @media (max-width: 980px) { .nav-links, .nav-right .nav-phone, .nav-right .nav-cta { display: none; } .nav-toggle { display: flex; } .mobile-menu { display: block; position: fixed; inset: 76px 0 0 0; background: var(--navy-950); transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1); z-index: 99; padding: 28px var(--gutter); overflow-y: auto; } .mobile-menu.open { transform: translateX(0); } .mobile-menu a { display: block; font-family: var(--serif); font-size: 26px; color: var(--nickel-100); padding: 16px 0; border-bottom: 1px solid rgba(154,163,175,.14); } .mobile-menu .btn { margin-top: 28px; } body.menu-open { overflow: hidden; } } /* ============================================================ PLACEHOLDER IMAGERY ============================================================ */ .ph { position: relative; overflow: hidden; background-color: var(--navy-800); background-image: repeating-linear-gradient(135deg, rgba(154,163,175,.10) 0 2px, transparent 2px 11px); display: flex; align-items: center; justify-content: center; color: var(--nickel-400); } .ph.light { background-color: var(--nickel-100); background-image: repeating-linear-gradient(135deg, rgba(107,116,128,.10) 0 2px, transparent 2px 11px); color: var(--pewter); } .ph-label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid currentColor; padding: 7px 12px; border-radius: 999px; opacity: .8; } img.ph { display: block; width: 100%; height: auto; object-fit: cover; background-image: none; } .ph-corner { position: absolute; top: 12px; left: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--nickel-500); opacity: .7; } /* ============================================================ CARDS / SHARED COMPONENTS ============================================================ */ .card { background: var(--white); border: 1px solid var(--nickel-200); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 28px 50px -28px rgba(8,26,46,.28); border-color: var(--nickel-300); } /* card hovers tint their call-to-action arrow wine */ .card:hover .link-arrow, .svc:hover .link-arrow, .res-card:hover .link-arrow, .ac-card:hover .link-arrow, .acx:hover .link-arrow, .guide:hover .link-arrow { color: var(--wine); border-color: var(--wine); } .stat-num { font-family: var(--serif); font-size: clamp(40px, 5vw, 66px); line-height: 1; letter-spacing: -.02em; } .stat-label { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-top: 14px; } .navy .stat-label { color: var(--nickel-400); } .tag { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pewter); border: 1px solid var(--nickel-300); padding: 5px 10px; border-radius: 999px; display: inline-block; white-space: nowrap; text-align: center; flex: 0 0 auto; } .tag.on-navy { color: var(--nickel-300); border-color: var(--nickel-500); } .tag.acquired { color: #3f6f52; border-color: #b7d2bf; background: #eef5f0; } .tag.forsale { color: #8a6a1c; border-color: #e0cd97; background: #faf3e0; } .tag.sold { color: #742a25; border-color: #d3a49f; background: #f7e9e7; } /* hairline grid */ .grid-lines { display: grid; gap: 1px; background: var(--nickel-200); border: 1px solid var(--nickel-200); } .grid-lines > * { background: var(--bg); } /* ============================================================ FOOTER ============================================================ */ #site-footer { background: var(--navy-950); color: var(--nickel-300); } .footer-top { padding: clamp(56px, 7vw, 92px) 0 56px; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; } .footer-col h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--nickel-500); margin-bottom: 22px; font-weight: 500; } .footer-col a { display: block; color: var(--nickel-300); font-size: 15px; padding: 7px 0; transition: color .2s; } .footer-col a:hover { color: var(--wine-light); } .footer-brand .brand-name { font-size: 26px; } .footer-pitch { font-family: var(--serif); font-size: 19px; line-height: 1.45; color: var(--nickel-200); margin: 22px 0; max-width: 34ch; } .footer-bottom { border-top: 1px solid rgba(154,163,175,.16); padding: 26px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; } .footer-bottom, .footer-bottom a { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--nickel-500); } .footer-bottom a:hover { color: var(--wine-light); } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } .footer-brand { grid-column: 1 / -1; } } /* ============================================================ SCROLL REVEAL ============================================================ */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); } .reveal.in { opacity: 1 !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } html { scroll-behavior: auto; } } @media print { .reveal { opacity: 1 !important; transform: none !important; } } /* ============================================================ MISC UTIL ============================================================ */ .center { text-align: center; } .mx-auto { margin-inline: auto; } .measure { max-width: 62ch; } .measure-sm { max-width: 48ch; } .flex { display: flex; } .between { justify-content: space-between; } .items-center { align-items: center; } .gap-sm { gap: 12px; } .gap { gap: 20px; } .gap-lg { gap: 40px; } .wrap-flex { flex-wrap: wrap; } .mt-sm { margin-top: 16px; } .mt { margin-top: 28px; } .mt-lg { margin-top: 48px; } .cta-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } /* ============================================================ PAGE HERO (interior pages) ============================================================ */ .page-hero { background: var(--navy-950); color: var(--nickel-100); position: relative; overflow: hidden; } .page-hero::before { content:""; position:absolute; inset:0; background: radial-gradient(110% 90% at 88% 0%, rgba(43,83,119,.4), transparent 58%); pointer-events:none; } .page-hero .wrap { position: relative; padding-block: clamp(56px, 7vw, 104px); } .breadcrumb { display: flex; gap: 10px; align-items: center; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--nickel-500); margin-bottom: 28px; } .breadcrumb a { color: var(--nickel-400); } .breadcrumb a:hover { color: var(--wine-light); } .breadcrumb .sep { opacity: .5; } .page-hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5.2vw, 68px); line-height: 1.04; letter-spacing: -.02em; color: #fff; max-width: 26ch; text-wrap: balance; } .page-hero h1 em { font-style: italic; color: var(--nickel-200); } .page-hero .lede { color: var(--nickel-300); margin-top: 26px; max-width: 78ch; } .page-hero.has-split h1, .page-hero.has-split .lede { max-width: 18ch; } .page-hero.has-split .lede { max-width: 56ch; } .page-hero.has-split .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px,5vw,72px); align-items: end; } @media (max-width: 860px) { .page-hero.has-split .wrap { grid-template-columns: 1fr; } } /* ============================================================ PROSE ============================================================ */ .prose { max-width: 68ch; } .prose p { color: var(--ink-soft); font-size: 18px; line-height: 1.7; margin-top: 22px; } .prose p:first-child { margin-top: 0; } .prose h2 { font-family: var(--serif); font-size: clamp(26px,3vw,36px); margin-top: 56px; } .prose h3 { font-family: var(--serif); font-size: 24px; margin-top: 40px; } .prose .lead-p { font-family: var(--serif); font-size: clamp(20px,2.2vw,26px); line-height: 1.45; color: var(--ink); } ul.ticks { margin-top: 24px; display: grid; gap: 14px; } ul.ticks li { padding-left: 34px; position: relative; color: var(--ink-soft); font-size: 17px; } ul.ticks li::before { content: ""; position: absolute; left: 0; top: 9px; width: 16px; height: 8px; border-left: 1.5px solid var(--navy-700); border-bottom: 1.5px solid var(--navy-700); transform: rotate(-45deg); } /* pull quote */ .pullquote { border-left: 2px solid var(--nickel-400); padding-left: 28px; margin: 44px 0; font-family: var(--serif); font-size: clamp(22px,2.4vw,30px); line-height: 1.4; color: var(--ink); } /* ============================================================ TEAM GRID ============================================================ */ .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .member .ph { aspect-ratio: 4/5; margin-bottom: 22px; } .member .m-name { font-family: var(--serif); font-size: 25px; } .member .m-role { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--pewter); margin-top: 8px; } .member .m-bio { color: var(--ink-soft); font-size: 15.5px; margin-top: 14px; } .member .m-creds { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; } @media (max-width: 820px) { .team-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } } /* ============================================================ REUSABLE CTA BAND (injected by site.js into #cta-band) ============================================================ */ .cta-band { background: var(--navy-950); position: relative; overflow: hidden; } .cta-band::before { content:""; position:absolute; inset:0; background: radial-gradient(80% 130% at 50% 130%, rgba(43,83,119,.5), transparent 60%); } .cta-band .inner { position: relative; text-align: center; padding-block: clamp(64px, 8vw, 120px); } .cta-band h2 { font-family: var(--serif); font-size: clamp(32px,4.4vw,56px); color: #fff; line-height: 1.06; } .cta-band .phone-big { font-family: var(--serif); font-size: clamp(26px,3vw,38px); color: var(--nickel-200); } .cta-band .phone-big:hover { color: var(--wine-light); } /* ============================================================ FEATURE SPLIT + PROCESS STEPS (service pages) ============================================================ */ .feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,88px); align-items: center; } .feature-split.reverse > :first-child { order: 2; } .feature-split .ph { aspect-ratio: 4/3; } @media (max-width: 860px){ .feature-split, .feature-split.reverse > :first-child { grid-template-columns: 1fr; order: 0; } } .steps { display: grid; gap: 1px; background: var(--nickel-200); border-block: 1px solid var(--nickel-200); } .steps .step { background: var(--bg); display: grid; grid-template-columns: 90px 1fr; gap: 28px; padding: 30px 0; align-items: start; } .steps .step .sn { font-family: var(--serif); font-size: 34px; color: var(--nickel-400); line-height: 1; } .steps .step h3 { font-family: var(--serif); font-size: 24px; } .steps .step p { color: var(--ink-soft); margin-top: 10px; font-size: 16px; max-width: 60ch; } @media (max-width: 600px){ .steps .step { grid-template-columns: 56px 1fr; gap: 16px; } .steps .step .sn { font-size: 26px; } } .svc-meta { display: flex; gap: 36px; flex-wrap: wrap; margin-top: 30px; } .svc-meta .m .k { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--nickel-500); } .svc-meta .m .v { color: var(--nickel-100); font-size: 16px; margin-top: 6px; font-weight: 500; } /* ============================================================ FAQ (native
, styled to the hairline system) ============================================================ */ .faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: start; } .faq { border-top: 1px solid var(--nickel-300); } .faq details { border-bottom: 1px solid var(--nickel-300); } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 22px 0; font-family: var(--serif); font-size: clamp(19px, 1.8vw, 23px); line-height: 1.3; color: var(--ink); transition: color .2s; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: var(--mono); font-size: 20px; color: var(--pewter); flex: none; transition: transform .25s ease, color .2s; } .faq summary:hover { color: var(--wine); } .faq summary:hover::after { color: var(--wine); } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { color: var(--ink-soft); font-size: 16.5px; line-height: 1.65; padding: 0 44px 24px 0; max-width: 62ch; } @media (max-width: 860px) { .faq-wrap { grid-template-columns: 1fr; } } /* independence callout */ .indie-note { background: var(--navy-900); color: var(--nickel-200); padding: clamp(28px,3.5vw,44px); display: grid; grid-template-columns: auto auto; gap: 24px; align-items: center; justify-content: center; text-align: center; } .indie-note .mark { width: 40px; height: 40px; transform: rotate(45deg); border: 1.5px solid var(--nickel-400); flex: none; position: relative; } .indie-note .mark::after { content:""; position:absolute; inset:7px; background: var(--metal); } .indie-note p { font-family: var(--serif); font-size: clamp(19px,2vw,24px); line-height: 1.4; color: #fff; max-width: 62ch; text-wrap: pretty; } @media (max-width: 560px){ .indie-note { grid-template-columns: 1fr; } } /* ============================================================ AVIATION VALUE FRAMEWORK · SITUATIONS · FAQ ============================================================ */ .avf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--nickel-200);border:1px solid var(--nickel-200)} .avf-cell{background:var(--bg);padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;gap:10px;color:var(--ink);transition:background .3s ease} .avf-cell:hover{background:var(--white)} .avf-cell .avf-l{font-family:var(--mono);font-size:22px;letter-spacing:.14em;color:var(--pewter)} .avf-cell .avf-n{font-family:var(--serif);font-size:24px;margin-top:6px} .avf-cell .avf-s{color:var(--ink-soft);font-size:14.5px;line-height:1.45} .avf-cell:hover .avf-l{color:var(--wine)} @media (max-width:820px){.avf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} .avf-area{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);padding-block:clamp(56px,6vw,88px);border-bottom:1px solid var(--nickel-200);scroll-margin-top:90px} .avf-area:last-child{border-bottom:none} .avf-sub{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);margin-top:14px} .avf-q{font-family:var(--serif);font-size:clamp(20px,2.1vw,25px);line-height:1.42;color:var(--ink);margin-top:28px;text-wrap:pretty} .avf-body h3{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--pewter);margin-top:36px} .avf-body h3:first-child{margin-top:4px} .avf-body ul.ticks{margin-top:18px} .avf-body p{color:var(--ink-soft);font-size:17px;line-height:1.65;margin-top:12px;max-width:60ch} .avf-body .pullquote{margin:40px 0 0;font-size:clamp(19px,1.9vw,23px)} @media (max-width:860px){.avf-area{grid-template-columns:1fr}} .sit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--nickel-200);border:1px solid var(--nickel-200)} .sit-grid>div{background:var(--bg);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column} .sit-grid .n{font-family:var(--mono);font-size:12px;color:var(--pewter);letter-spacing:.14em} .sit-grid h3{font-family:var(--serif);font-size:25px;margin-top:16px;text-wrap:balance} .sit-grid p{color:var(--ink-soft);margin-top:12px;font-size:15.5px} .sit-grid .want{margin-top:auto;padding-top:22px;border-top:1px solid var(--nickel-200)} .sit-grid .want .k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--pewter);margin-bottom:8px} .sit-grid .want p{margin-top:0;color:var(--ink)} .sit-grid p+.want{margin-top:22px} @media (max-width:900px){.sit-grid{grid-template-columns:1fr}} .faq{border-top:1px solid var(--nickel-200)} .faq details{border-bottom:1px solid var(--nickel-200)} .faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:baseline;padding:26px 0;font-family:var(--serif);font-size:clamp(20px,2vw,24px);line-height:1.3;color:var(--ink)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--mono);font-size:20px;color:var(--pewter)} .faq details[open] summary::after{content:"−"} .faq summary:hover{color:var(--wine)} .faq details p{color:var(--ink-soft);font-size:16.5px;line-height:1.65;max-width:68ch;padding-bottom:28px}