/* ==========================================================================
   Test Firm Ltd — style.css
   Single stylesheet, CSS custom properties for easy re-theming.
   ========================================================================== */

:root {
  /* Brand colors */
  --navy: #0B2D5C;
  --gold: #C9A13B;
  --ivory: #EFEBE3;
  --ivory-dim: #E5E0D6;
  --ink: #1C2430;
  --slate: #D8DCE3;
  --bordeaux: #5C1F2E;
  --white: #ffffff;
  --pano-line: #969BA5; /* dedicated mid-gray for background linework — kept visibly lighter than body text (--ink) so text stays easy to read over it */
  --primary: #24262B; /* Graphite & Brass: site-wide default heading/text/surface color. Navy is retired everywhere except the logo mark. */

  /* Type */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout */
  --max-width: 1120px;
  --gutter: 1.5rem;
  --radius: 4px;
  --transition: 0.28s ease;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--primary);
  line-height: 1.2;
  margin: 0 0 1rem;
  font-weight: 600;
}
h1 { font-size: clamp(2rem, 4vw + 1rem, 3.25rem); }
h2 { font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  min-height: 48px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn-primary { background: var(--gold); color: var(--primary); border-color: var(--gold); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--primary); color: var(--gold); border-color: var(--gold); }
.btn-outline { background: transparent; color: var(--ivory); border-color: var(--ivory); }
.btn-outline:hover, .btn-outline:focus-visible { background: var(--ivory); color: var(--primary); }

/* ---- Header / nav ---- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--ivory); border-bottom: 1px solid var(--slate); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.logo { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: 0.04em; color: var(--primary); text-decoration: none; }
.logo-mark { height: 40px; width: auto; display: block; }
.logo-text .accent { color: var(--gold); }
@media (max-width: 480px) {
  .logo { font-size: 0; gap: 0; }
  .logo-mark { height: 36px; }
}

.menu-toggle { display: flex; align-items: center; gap: 0.6rem; background: transparent; border: none; min-width: 48px; min-height: 48px; padding: 0 0.25rem; cursor: pointer; color: var(--primary); }

/* ---- Desktop inline nav (hidden on mobile; hamburger + off-canvas panel used instead) ---- */
.site-nav { display: none; }
.site-nav > ul { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.site-nav > ul > li { position: relative; }
.site-nav > ul > li > a {
  color: var(--primary); text-decoration: none; font-size: 0.95rem; font-weight: 500;
  padding: 0.5rem 0.1rem; border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.site-nav > ul > li > a:hover, .site-nav > ul > li > a:focus-visible { color: var(--gold); border-color: var(--gold); }

.site-dropdown {
  position: absolute; top: 100%; right: 0; min-width: 220px; margin-top: 0.5rem;
  background: var(--white); border: 1px solid var(--slate); border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(11,45,92,0.12); list-style: none; padding: 0.5rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.has-dropdown:hover .site-dropdown,
.has-dropdown:focus-within .site-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.site-dropdown li a {
  display: block; padding: 0.6rem 0.75rem; border-radius: calc(var(--radius) - 2px);
  color: var(--ink); text-decoration: none; font-size: 0.92rem;
  transition: background var(--transition), color var(--transition);
}
.site-dropdown li a:hover, .site-dropdown li a:focus-visible { background: var(--ivory); color: var(--primary); }

@media (min-width: 900px) {
  .site-nav { display: block; }
  .menu-toggle { display: none; }
}
.menu-toggle .menu-label { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.menu-toggle .bars { display: flex; flex-direction: column; gap: 5px; width: 26px; }
.menu-toggle .bars span { display: block; height: 2px; background: var(--primary); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); }
.menu-toggle[aria-expanded="true"] .bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Nav panel (hamburger, shared mobile + desktop) ---- */
.nav-panel { position: fixed; inset: 0; background: var(--primary); transform: translateX(100%); transition: transform var(--transition); z-index: 99; overflow-y: auto; }
.nav-panel.is-open { transform: translateX(0); }
.nav-panel-inner { max-width: 520px; margin: 0 auto; padding: 130px var(--gutter) 3rem; }
.nav-panel a { text-decoration: none; }
.nav-list > li { border-bottom: 1px solid rgba(247,245,240,0.14); }
.nav-list > li > a,
.nav-list .nav-parent-btn {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; text-align: left; color: var(--ivory);
  font-family: var(--font-display); font-size: 1.6rem; padding: 1.1rem 0.25rem;
  cursor: pointer; min-height: 48px; transition: color var(--transition);
}
.nav-list > li > a:hover, .nav-list > li > a:focus-visible,
.nav-list .nav-parent-btn:hover, .nav-list .nav-parent-btn:focus-visible { color: var(--gold); }
.nav-caret { transition: transform var(--transition); font-size: 1.1rem; color: var(--gold); }
.nav-parent-btn[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-sublist { max-height: 0; overflow: hidden; transition: max-height var(--transition); }
.nav-sublist.is-open { max-height: 400px; }
.nav-sublist li a { display: flex; align-items: center; padding: 0.65rem 0.25rem 0.65rem 1rem; font-size: 1rem; color: var(--slate); min-height: 48px; transition: color var(--transition); }
.nav-sublist li a:hover, .nav-sublist li a:focus-visible { color: var(--gold); }
.nav-close { position: absolute; top: 22px; right: var(--gutter); }

/* ---- Hero (used on About/Contact/Services page headers — navy) ---- */
.hero { background: var(--primary); color: var(--ivory); padding: 5rem 0 4.5rem; }
.hero h1 { color: var(--ivory); }
.hero-rule { width: 64px; height: 2px; background: var(--gold); border: none; margin: 0 0 1.5rem; }
.hero p.lede { max-width: 620px; font-size: 1.1rem; color: var(--slate); margin-bottom: 2.25rem; }

/* ---- Homepage: welcome + services unified into one light section ----
   Kept off navy deliberately so the homepage isn't dominated by a large
   blue field — navy/gold now read as accents (eyebrow, rule, card
   borders, button) rather than a full-bleed background. */
.home-intro { background: var(--ivory); padding: 3rem 0 3.5rem; }
.home-intro .eyebrow { color: var(--primary); }
.home-intro h1 { color: var(--primary); max-width: 720px; }
.home-intro .lede { max-width: 620px; font-size: 1.1rem; color: var(--ink); margin-bottom: 1.75rem; }
.mb-lg { margin-bottom: 3rem; }

/* ---- Bottom tabs (service links on homepage) ---- */
.tabs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }

/* Investment options grid: explicit 3-across on larger screens (two rows of
   three for 6 cards), single column on mobile — used only on the Investments
   page, reuses .tab-card styling for visual consistency but sized larger
   and closer to square. */
.investment-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin: 1.5rem 0 2rem; }
@media (min-width: 700px) {
  .investment-grid { grid-template-columns: repeat(3, 1fr); }
  .investment-grid .tab-card { padding: 2rem; min-height: 280px; }
  .investment-grid .tab-card h3 { font-size: 1.3rem; margin-bottom: 0.75rem; }
}
.tab-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--slate); border-top: 3px solid var(--primary); border-radius: var(--radius); padding: 1.25rem 1.5rem; text-decoration: none; color: var(--ink); transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); }
.tab-card:hover, .tab-card:focus-visible { border-color: var(--gold); border-top-color: var(--gold); transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 28px rgba(11,45,92,0.1); }
.tab-card h3 { margin-bottom: 0.4rem; }
.tab-card p { flex-grow: 1; }
.tab-card .tab-arrow { color: var(--gold); font-weight: 600; margin-top: 1rem; }
/* new services: add another .tab-card here, or omit it to keep only "top" services on the homepage */

/* ---- Service detail pages: framework table + numbered process steps ---- */
.section ul { margin: 1.5rem 0 2rem; }
.section ul li { position: relative; padding-left: 1.35rem; margin-bottom: 0.6rem; color: var(--ink); }
.section ul li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; background: var(--gold); border-radius: 1px; }
.info-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0 2.5rem; font-size: 0.95rem; }
.info-table th, .info-table td { text-align: left; padding: 0.8rem 1rem; border-bottom: 1px solid var(--slate); }
.info-table th { color: var(--primary); font-family: var(--font-body); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.info-table td:first-child { font-weight: 500; }

.process-steps { list-style: none; padding: 0; margin: 1.5rem 0 2.5rem; display: flex; flex-direction: column; gap: 1.75rem; }
.process-steps li { display: flex; gap: 1.5rem; align-items: flex-start; }
.step-number { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--gold); flex-shrink: 0; width: 2.75rem; line-height: 1.2; }
.process-steps h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.process-steps p { margin: 0; color: var(--ink); }

@media (max-width: 560px) {
  .process-steps li { gap: 1rem; }
  .step-number { width: 2.25rem; font-size: 1.25rem; }
}

/* ---- Generic page header (services/about/contact) ---- */
.page-header { background: var(--primary); color: var(--ivory); padding: 3.5rem 0; }
.page-header h1 { color: var(--ivory); }
.page-header-lede { max-width: 640px; color: var(--slate); font-size: 1.05rem; margin-top: 1rem; }


/* ---- Content sections ---- */
.section { padding: 4rem 0; }
.section-narrow .container { max-width: 760px; }
.section-alt { background: var(--ivory-dim); }

/* ---- Card grids (services hub, blog) ---- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.card { background: var(--white); border: 1px solid var(--slate); border-radius: var(--radius); padding: 1.75rem; }
.card h3 a { text-decoration: none; color: var(--primary); transition: color var(--transition); }
.card h3 a:hover, .card h3 a:focus-visible { color: var(--bordeaux); }

/* ---- Forms ---- */
.form-field { margin-bottom: 1.25rem; }
.form-field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--primary); }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; min-height: 48px; padding: 0.7rem 0.85rem; border: 1px solid var(--slate);
  border-radius: var(--radius); font-family: var(--font-body); font-size: 1rem;
  background: var(--white); color: var(--ink); transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,161,59,0.25);
}
.calendly-slot { border: 1px dashed var(--slate); border-radius: var(--radius); padding: 2.5rem 1.5rem; text-align: center; color: var(--ink); background: var(--white); }

/* ---- Footer ---- */
.site-footer { background: var(--primary); color: var(--slate); padding: 3rem 0 2rem; font-size: 0.9rem; }
.site-footer a { text-decoration: none; color: var(--ivory); transition: color var(--transition); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--gold); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(216,220,227,0.2); margin-bottom: 1.5rem; }
.footer-grid h3 { color: var(--gold); font-family: var(--font-body); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.85rem; }
.footer-grid li { margin-bottom: 0.5rem; }
.footer-legal { font-size: 0.8rem; color: rgba(216,220,227,0.75); line-height: 1.65; }
.legal-block h4 { color: var(--gold); font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 0.6rem; }
.legal-block p { margin: 0; }
.legal-block p a { color: rgba(216,220,227,0.85); text-decoration: underline; font-weight: 400; }
.legal-block p a:hover, .legal-block p a:focus-visible { color: var(--gold); }
.legal-divider { border: none; border-top: 1px solid rgba(216,220,227,0.2); margin: 1.5rem 0; }
.footer-copyright { font-size: 0.78rem; margin: 0; }
.footer-risk-note { font-size: 0.72rem; color: rgba(216,220,227,0.55); margin-top: 0.85rem; }
.footer-risk-note a { color: rgba(216,220,227,0.8); text-decoration: underline; transition: color var(--transition); }
.footer-risk-note a:hover, .footer-risk-note a:focus-visible { color: var(--gold); }

.footer-bottom-row {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem 2rem;
  margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(216,220,227,0.2);
}
.footer-legal-links { display: flex; gap: 1.5rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.footer-legal-links a { font-size: 0.78rem; color: rgba(216,220,227,0.7); text-decoration: none; transition: color var(--transition); }
.footer-legal-links a:hover, .footer-legal-links a:focus-visible { color: var(--gold); }
@media (max-width: 560px) {
  .footer-bottom-row { flex-direction: column; align-items: flex-start; }
}

.section p a { color: var(--primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--transition); }
.section p a:hover, .section p a:focus-visible { color: var(--gold); }

/* ---- Blog ---- */
.post-preview { border-bottom: 1px solid var(--slate); padding: 2rem 0; }
.post-preview:first-child { padding-top: 0; }
.post-date { font-size: 0.8rem; color: var(--bordeaux); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.post-preview h2 a { text-decoration: none; color: var(--primary); transition: color var(--transition); }
.post-preview h2 a:hover, .post-preview h2 a:focus-visible { color: var(--bordeaux); }
article.post-body { max-width: 700px; margin: 0 auto; }
article.post-body p { font-size: 1.05rem; line-height: 1.75; }
.post-cta { margin-top: 3rem; padding: 2rem; background: var(--ivory-dim); border-radius: var(--radius); text-align: center; }

/* ---- Page panorama: full-height line-art that scrolls WITH the page ----
   (not pinned to the viewport). Currently used on Infrastructure only.
   `inset: 0` on an absolutely-positioned element inside a `position:
   relative` main means it always matches main's actual rendered height,
   so it never needs a hardcoded pixel value that could drift out of sync
   as copy changes. Sits behind every section's own background, so it's
   only visible in the gaps (ivory sections), never against the opaque
   page-header/footer. */
.page-panorama { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.page-panorama svg { width: 100%; height: 100%; }
.pano-zone { opacity: 0.13; }
main { position: relative; z-index: 1; }
main > *:not(.page-panorama) { position: relative; z-index: 1; }
.site-header, .site-footer { position: relative; z-index: 2; }

.pano-dot-1 { offset-path: path('M175 1400 L925 2000'); animation: pano-travel 20s linear infinite; opacity: 0.6; }
.pano-dot-2 { offset-path: path('M175 1400 L925 2000'); animation: pano-travel 20s linear infinite; animation-delay: 10s; opacity: 0.6; }
.pano-dot-3 { offset-path: path('M0 960 Q 280 860 520 960 Q 720 840 920 960 Q 1200 860 1440 960'); animation: pano-travel 24s linear infinite; opacity: 0.55; }

@keyframes pano-travel {
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pano-dot-1, .pano-dot-2, .pano-dot-3 { animation: none; }
}

@media (max-width: 899px) {
  .page-panorama { display: none; }
}

/* ---- Icon benefit rows (e.g. "Additional benefits" lists) ---- */
.benefit-rows { display: flex; flex-direction: column; gap: 1.25rem; margin: 1.5rem 0 2rem; }
.benefit-row { display: grid; grid-template-columns: 64px 1fr; gap: 1.5rem; align-items: center; padding: 1.25rem 1.5rem; background: var(--ivory-dim); border: 1px solid var(--slate); border-radius: var(--radius); }
.benefit-row .benefit-icon { width: 40px; height: 40px; color: var(--primary); }
.benefit-row .benefit-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; }
.benefit-row h3 { margin-bottom: 0.35rem; font-size: 1.05rem; }
.benefit-row p { margin: 0; color: var(--ink); }
@media (max-width: 560px) {
  .benefit-row { grid-template-columns: 1fr; text-align: left; }
  .benefit-row .benefit-icon { margin-bottom: 0.25rem; }
}

/* ---- Placeholder / "coming soon" page ---- */
.coming-soon { text-align: center; padding: 3rem 1rem; }
.coming-soon .coming-soon-mark { width: 48px; height: 48px; margin: 0 auto 1.5rem; color: var(--gold); }
.coming-soon .coming-soon-mark svg { width: 100%; height: 100%; stroke: currentColor; fill: none; }
.coming-soon h2 { margin-bottom: 0.75rem; }
.coming-soon p { max-width: 480px; margin: 0 auto; color: var(--ink); }
.text-center { text-align: center; }
.mt-lg { margin-top: 3rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }

/* ---- Accordion (Remember / Risk Warning / Legal Information) ---- */
.accordion-group { margin: 3rem 0 0; }
.accordion { border: 1px solid var(--slate); border-radius: var(--radius); background: var(--ivory); margin-bottom: 0.85rem; }
.accordion summary {
  list-style: none; cursor: pointer; padding: 1.1rem 1.4rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--primary);
  transition: color var(--transition);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: ''; width: 9px; height: 9px; flex-shrink: 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform var(--transition);
}
.accordion[open] summary::after { transform: rotate(-135deg); }
.accordion summary:hover, .accordion summary:focus-visible { color: var(--gold); }
.accordion-body { padding: 0 1.4rem 1.4rem; border-top: 1px solid var(--slate); padding-top: 1.25rem; }
.accordion-body p { margin-bottom: 1rem; }
.accordion-body p:last-child { margin-bottom: 0; }
.accordion-body ul { margin: 0 0 1rem; }
.accordion-body ul:last-child { margin-bottom: 0; }
.accordion-body h4 { font-size: 0.95rem; margin-bottom: 0.5rem; color: var(--primary); }

/* "All services" is always the closing item in both nav dropdowns — bold to read as the catch-all option */
.site-dropdown li:last-child a, .nav-sublist li:last-child a { font-weight: 700; }

.skip-link {
  position: absolute; top: 0; left: 0; z-index: 200;
  background: var(--gold); color: var(--primary); font-weight: 600;
  padding: 0.85rem 1.25rem; text-decoration: none;
  transform: translateY(calc(-100% - 4px)); transition: transform var(--transition);
}
.skip-link:focus { transform: translateY(0); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (min-width: 640px) {
  .hero { padding: 7rem 0 5.5rem; }
  .home-intro { padding: 4rem 0 4.5rem; }
}