/* =========================================================================
   Szigeti & Korán — production stylesheet
   All styling lives here. No inline style attributes anywhere in the HTML.
   ========================================================================= */

/* ---------- 1. Fonts (self-hosted, latin + latin-ext) ------------------- */
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
/* Space Grotesk ships in one weight only: --font-head is never set below 600,
   so a 500 face would be declared and never painted. */
@font-face{
  font-family:"Space Grotesk";
  src:url("../fonts/space-grotesk-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
/* Metric-matched fallback — kills CLS while Inter loads */
@font-face{
  font-family:"Inter Fallback"; src:local("Arial");
  size-adjust:107.64%; ascent-override:90%; descent-override:22.43%; line-gap-override:0%;
}

/* ---------- 2. Reset ------------------------------------------------------ */
*, *::before, *::after{ box-sizing:border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote{ margin:0; padding:0; }
ul[class], ol[class]{ list-style:none; }
img, svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
input, textarea, select{ font:inherit; }

/* ---------- 3. Design tokens ---------------------------------------------- */
:root{
  --bg:#0B1220; --bg-2:#0D1626;
  --surface:rgba(255,255,255,.04); --surface-2:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16);
  --txt:#E9EDF5; --muted:#9AA7BD;
  /* was #67748C = 3.97:1 on --bg, under AA. It styles real copy: the "since"
     line under every staff name, the (optional) form label, and every
     placeholder. #7A87A0 is 5.17:1 and still reads dimmer than --muted. */
  --faint:#7A87A0;
  --accent:#2B82E0; --accent-2:#135EAE; --accent-3:#75B0F0;
  --grad:linear-gradient(120deg,#2B82E0,#1E7FE6 45%,#4796EB);

  /* radii */
  --r-btn:10px; --r-card:16px; --r-hero:22px; --r-pill:999px;

  /* spacing scale — never eyeball a margin */
  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-24:24px;
  --sp-32:32px; --sp-48:48px; --sp-64:64px; --sp-96:96px; --sp-128:128px;

  /* type */
  --font-body:"Inter","Inter Fallback",system-ui,sans-serif;
  --font-head:"Space Grotesk","Inter Fallback",system-ui,sans-serif;

  /* easings */
  --ease-enter:cubic-bezier(.33,1,.68,1);
  --ease-ui:cubic-bezier(.4,0,.2,1);

  --container:1180px;
}

/* ---------- 4. Base -------------------------------------------------------- */
html{
  background:var(--bg);
  scroll-behavior:auto;
  overflow-x:hidden;
  scrollbar-color:#2A3854 var(--bg);
}
::selection{ background:var(--accent); color:#fff; }
html.js{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html.js{ scroll-behavior:auto; } }

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--txt);
  font-size:clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1, h2, h3, h4{ font-family:var(--font-head); font-weight:600; color:var(--txt); }
p{ text-wrap:pretty; hyphens:manual; }
h1, h2, h3, h4{ text-wrap:balance; }

h1{
  font-size:clamp(2.6rem, 5vw + 1rem, 4.4rem);
  letter-spacing:-0.03em; line-height:1.05;
}
h2{ font-size:clamp(1.9rem, 3.5vw, 2.8rem); letter-spacing:-0.02em; line-height:1.12; }
h3{ font-size:clamp(1.15rem, 2vw, 1.3rem); letter-spacing:-0.01em; line-height:1.3; }

/* --accent lands at 4.79:1 on --bg — it clears AA by 0.29, which is too thin a
   margin for 13px uppercase with wide tracking. --accent-3 gives 8.22:1 (AAA). */
.eyebrow{
  display:inline-flex; align-items:center; gap:var(--sp-8);
  font-family:var(--font-body); font-size:.8125rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:600; color:var(--accent-3);
}
.eyebrow.pill{
  border:1px solid var(--line); background:var(--surface);
  padding:var(--sp-8) var(--sp-16); border-radius:var(--r-pill);
}
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none;
}

.stat-num{ font-variant-numeric:tabular-nums; }

/* ---------- 5. Layout ------------------------------------------------------ */
.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--sp-24);
  position:relative; z-index:1;
}
@media (min-width:640px){ .container{ padding-inline:var(--sp-32); } }

main section{ padding-block:var(--sp-64); position:relative; z-index:1; }
@media (min-width:920px){ main section{ padding-block:var(--sp-96); } }

.section-head{ max-width:40em; margin-bottom:var(--sp-48); }
.section-head p{ color:var(--muted); font-size:1.06rem; margin-top:var(--sp-16); }
.section-head h2{ margin-top:var(--sp-16); }

/* Available to headings that exist for the document outline rather than the eye. */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:var(--sp-16); top:-100px;
  background:var(--accent); color:#fff; padding:var(--sp-12) var(--sp-16);
  border-radius:var(--r-btn); z-index:200; font-weight:600;
  transition:top .2s var(--ease-ui);
}
.skip-link:focus{ top:var(--sp-16); }

/* ---------- 6. Motion system ------------------------------------------------
   Base state (no .js): everything fully visible, zero motion.
   Under .js: entrance states are set, then released via IO / load trigger.
   ---------------------------------------------------------------------------*/
[data-reveal]{ opacity:1; transform:none; }
.js [data-reveal]{
  opacity:0; transform:translateY(12px);
  transition:opacity .55s var(--ease-enter), transform .55s var(--ease-enter);
}
.js [data-reveal].in{ opacity:1; transform:none; }

.hero-in{ opacity:1; transform:none; }
.js .hero-in{
  opacity:0; transform:translateY(10px);
  transition:opacity .55s var(--ease-enter), transform .55s var(--ease-enter);
}
.js.is-loaded .hero-in{ opacity:1; transform:none; }

.d0{ transition-delay:0ms; }
.d1{ transition-delay:80ms; }
.d2{ transition-delay:160ms; }
.d3{ transition-delay:240ms; }
.d4{ transition-delay:320ms; }

@media (prefers-reduced-motion:reduce){
  [data-reveal], .hero-in, .js [data-reveal], .js .hero-in{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}

/* ---------- 7. Ambient backgrounds ----------------------------------------- */
.aurora{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.aurora__blob{
  position:absolute; border-radius:50%; filter:blur(100px); will-change:transform;
  opacity:.55;
}
.aurora__blob--a{
  width:55vw; height:55vw; top:-15%; left:-8%;
  background:radial-gradient(circle, rgba(43,130,224,.35), transparent 70%);
}
.aurora__blob--b{
  width:50vw; height:50vw; top:-5%; right:-12%;
  background:radial-gradient(circle, rgba(19,94,174,.30), transparent 70%);
}
.aurora__blob--c{
  width:60vw; height:60vw; bottom:-25%; left:20%;
  background:radial-gradient(circle, rgba(58,74,102,.28), transparent 70%);
}
.js .aurora__blob--a{ animation:driftA 26s var(--ease-enter) infinite alternate; }
.js .aurora__blob--b{ animation:driftB 31s var(--ease-enter) infinite alternate; }
.js .aurora__blob--c{ animation:driftC 24s var(--ease-enter) infinite alternate; }
@keyframes driftA{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(3%,4%,0) scale(1.08); } }
@keyframes driftB{ from{ transform:translate3d(0,0,0) scale(1.02); } to{ transform:translate3d(-4%,3%,0) scale(0.96); } }
@keyframes driftC{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(-3%,-4%,0) scale(1.06); } }
@media (prefers-reduced-motion:reduce){
  .js .aurora__blob--a, .js .aurora__blob--b, .js .aurora__blob--c{ animation:none; }
}

.grain{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 8. Header / nav -------------------------------------------------*/
.site-header{
  position:sticky; top:0; z-index:100;
  transition:background-color .3s var(--ease-ui), border-color .3s var(--ease-ui);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(11,18,32,.72);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  min-height:76px; gap:var(--sp-24); position:relative;
}
.nav-links{
  display:flex; align-items:center; gap:var(--sp-16);
}
/* Seven items plus logo, language switch and CTA only just fit the 1180px
   container — the gap opens up again once there is room for it. */
@media (min-width:1280px){ .nav-links{ gap:var(--sp-24); } }
.nav-links a{
  color:var(--muted); font-size:.9rem; font-weight:500; white-space:nowrap;
  transition:color .2s var(--ease-ui);
}
.nav-links a:hover{ color:var(--txt); }
.nav-cta{ display:flex; align-items:center; gap:var(--sp-16); }

/* language switch — sits first inside .nav-cta, before the CTA button */
.lang-switch{
  display:inline-flex; gap:2px; align-items:center;
  border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; flex:none;
}
.lang-switch a{
  font-size:.78rem; font-weight:600; color:var(--muted);
  padding:4px 10px; border-radius:var(--r-pill);
  transition:color .2s var(--ease-ui);
}
.lang-switch a:hover{ color:var(--txt); }
.lang-switch a[aria-current="true"]{ background:var(--surface-2); color:var(--txt); }
@media (max-width:379px){
  /* Space is tight next to the hamburger — trim the inactive link's
     padding first. The control itself (both links) always stays visible. */
  .lang-switch a:not([aria-current="true"]){ padding-inline:var(--sp-4); }
}

.nav-toggle{
  display:none;
  width:40px; height:40px; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:var(--r-btn); color:var(--txt); flex:none;
}
.nav-toggle svg{ width:18px; height:18px; }

@media (max-width:1023px){
  /* No JS: keep every link reachable — wrap instead of collapsing behind
     a toggle that would never open. */
  .nav{ flex-wrap:wrap; padding-block:var(--sp-12); }
  .nav-links{ flex-wrap:wrap; row-gap:var(--sp-12); }

  .js .nav-toggle{ display:inline-flex; }
  .js .nav-cta .btn-primary{ display:none; }
  .js .nav-links{
    position:absolute; inset-inline:0; top:100%;
    flex-direction:column; align-items:flex-start; gap:var(--sp-16);
    background:var(--bg-2); border-bottom:1px solid var(--line);
    padding:0 var(--sp-24);
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height .3s var(--ease-ui), opacity .2s var(--ease-ui), padding-block .3s var(--ease-ui);
  }
  .js .site-header.nav-open .nav-links{
    max-height:70vh; opacity:1; padding-block:var(--sp-24);
  }
}

/* logo lockup — Andrea's mark and wordmark as artwork (white on the dark
   header), with the descriptor kept as live text so it can follow the page
   language rather than being baked into the SVG. */
.logo{ display:flex; flex-direction:column; gap:var(--sp-4); }
/* align-self is load-bearing: .logo is a column flexbox, so the default
   `stretch` would widen the mark to the descriptor's width and distort it. */
.logo-mark{ height:38px; width:auto; align-self:flex-start; }
.logo-descriptor{
  font-family:var(--font-body); font-weight:600; font-size:.55rem;
  letter-spacing:.24em; color:var(--muted);
  border-top:1px solid rgba(255,255,255,.2);
  padding-top:.5em;
}
footer .logo-mark{ height:32px; }
/* The mark is wider than the old text lockup — give the language switch and
   the hamburger room back before they run out of it. */
@media (max-width:479px){ .logo-mark{ height:30px; } }

/* ---------- 9. Buttons ------------------------------------------------------*/
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-8);
  font-weight:600; font-size:.94rem; padding:var(--sp-12) var(--sp-24);
  border-radius:var(--r-btn); white-space:nowrap;
  transition:transform .22s var(--ease-ui), box-shadow .22s var(--ease-ui), background-color .22s var(--ease-ui), border-color .22s var(--ease-ui);
}
.btn-primary{ background:var(--grad); color:#fff; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(43,130,224,.38); }
.btn-ghost{ border:1px solid var(--line); color:var(--txt); }
.btn-ghost:hover{ transform:translateY(-2px); background:var(--surface); border-color:var(--line-strong); }
.btn svg{ width:16px; height:16px; flex:none; }

/* ---------- 10. Hero --------------------------------------------------------*/
.hero{ padding-top:var(--sp-64); padding-bottom:var(--sp-64); }
@media (min-width:920px){ .hero{ padding-top:var(--sp-96); padding-bottom:var(--sp-96); } }
.hero-grid{
  display:grid; gap:var(--sp-48); align-items:center;
}
@media (min-width:920px){
  .hero-grid{ grid-template-columns:1.1fr .9fr; gap:var(--sp-64); }
}
.hero h1{ margin-top:var(--sp-24); color:var(--txt); }
.hero .lead{ color:var(--muted); max-width:34em; margin-top:var(--sp-24); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:var(--sp-16); margin-top:var(--sp-32); }
.hero-note{
  display:flex; align-items:center; gap:var(--sp-8);
  color:var(--muted); font-size:.94rem; margin-top:var(--sp-32);
}
.hero-note svg{ width:18px; height:18px; color:var(--accent); flex:none; }

/* hero work-product card */
.hero-visual{ position:relative; }
.hero-card{
  position:relative;
  border-radius:var(--r-hero);
  padding:var(--sp-32);
  background:
    linear-gradient(rgba(13,22,38,.6), rgba(13,22,38,.6)) padding-box,
    linear-gradient(135deg, rgba(43,130,224,.55), rgba(19,94,174,.25) 45%, rgba(117,176,240,.5)) border-box;
  border:1px solid transparent;
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 0 60px rgba(43,130,224,.14);
}
@media (min-width:920px){
  .js .hero-card{ animation:cardFloat 9s ease-in-out infinite alternate; }
  @media (prefers-reduced-motion:reduce){ .js .hero-card{ animation:none; } }
}
@keyframes cardFloat{ from{ transform:translateY(-8px); } to{ transform:translateY(8px); } }

.hero-card__head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:var(--sp-24);
}
.hero-card__label{
  font-size:.75rem; letter-spacing:.14em; font-weight:600; color:var(--muted);
  text-transform:uppercase;
}
.hero-card__status{
  display:inline-flex; align-items:center; gap:var(--sp-4);
  font-size:.75rem; font-weight:600; color:var(--accent-3);
  background:rgba(43,130,224,.14); border:1px solid rgba(43,130,224,.3);
  border-radius:var(--r-pill); padding:var(--sp-4) var(--sp-12);
}
.hero-card__rows{ display:grid; gap:var(--sp-16); }
.hero-card__row{
  display:flex; align-items:center; gap:var(--sp-12);
  font-size:.94rem; color:var(--txt);
}
.hero-card__row svg{ width:18px; height:18px; color:var(--accent-3); flex:none; }
.hero-card__foot{
  margin-top:var(--sp-24); padding-top:var(--sp-24);
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:var(--sp-12);
  position:relative;
}
.hero-card__chip{
  display:inline-flex; align-items:center; gap:var(--sp-8);
  font-size:.8rem; font-weight:500; color:var(--txt);
  background:var(--surface-2); border:1px solid var(--line-strong);
  border-radius:var(--r-pill); padding:var(--sp-8) var(--sp-16);
  transform:translateY(30%);
}
.hero-card__chip svg{ width:14px; height:14px; color:var(--accent-3); flex:none; }

/* ---------- 11. Bridge band + pillars -----------------------------------------
   Full-bleed image: it breaks out of .container so the picture spans the
   viewport, and its own edge gradients dissolve it into the page background. */
.bridge-band{
  position:relative; z-index:1;
  width:100%; overflow:hidden;
  background:var(--bg);
}
.bridge-band img{
  display:block;
  width:100%; height:clamp(200px, 27vw, 420px);
  object-fit:cover; object-position:center 58%;
  /* seat the warm sunset into the dark theme: cool + deepen slightly */
  filter:saturate(.9) brightness(.84) contrast(1.04);
  /* feather top & bottom so the band dissolves into the navy page */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 15%, #000 80%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 15%, #000 80%, transparent 100%);
}
/* cool scrim + vignette — pulls the photo toward the palette, darkens the edges */
.bridge-band::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(130% 150% at 50% 42%, rgba(11,18,32,0) 42%, rgba(11,18,32,.5) 100%),
    linear-gradient(180deg, rgba(43,130,224,.05) 0%, rgba(11,18,32,.1) 55%, rgba(11,18,32,.3) 100%);
}
/* continue the site's film grain over the photo so it matches every other section */
.bridge-band::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.pillars{ border-bottom:1px solid var(--line); }
main section.pillars{ padding-block:var(--sp-48); }
.pillars-grid{
  display:grid; grid-template-columns:1fr; gap:var(--sp-32);
}
@media (min-width:768px){
  .pillars-grid{ grid-template-columns:repeat(3,1fr); gap:var(--sp-48); }
  .pillar{ border-left:1px solid var(--line); padding-left:var(--sp-24); }
  .pillar:first-child{ border-left:0; padding-left:0; }
}
.pillar h3{ margin-bottom:var(--sp-8); }
.pillar p{ color:var(--muted); font-size:.95rem; }

/* ---------- 12. Services ------------------------------------------------------*/
.services-grid{
  display:grid; grid-template-columns:1fr; gap:var(--sp-24);
}
@media (min-width:640px){ .services-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:920px){ .services-grid{ grid-template-columns:repeat(3,1fr); } }

.svc-card{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); padding:var(--sp-32);
  transition:transform .3s var(--ease-ui), border-color .3s var(--ease-ui);
}
.svc-card:hover{ transform:translateY(-4px); border-color:rgba(43,130,224,.4); }
.svc-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(43,130,224,.13), transparent 70%);
  opacity:0; transition:opacity .2s var(--ease-ui); pointer-events:none;
}
.svc-card:hover::before{ opacity:1; }
.svc-card__icon{
  width:52px; height:52px; border-radius:14px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:rgba(43,130,224,.13); color:var(--accent-3);
  margin-bottom:var(--sp-24); position:relative; z-index:1;
}
.svc-card__icon svg{ width:24px; height:24px; }
.svc-card h3{ position:relative; z-index:1; margin-bottom:var(--sp-8); }
.svc-card__desc{ position:relative; z-index:1; color:var(--muted); font-size:.98rem; margin-bottom:var(--sp-16); }
.svc-card__list{ position:relative; z-index:1; display:grid; gap:var(--sp-8); }
.svc-card__list li{
  display:flex; align-items:flex-start; gap:var(--sp-8);
  color:var(--muted); font-size:.88rem;
}
.svc-card__list svg{ width:14px; height:14px; color:var(--accent); flex:none; margin-top:.3em; }

/* ---------- 13. Process -------------------------------------------------------*/
.process-grid{
  display:grid; grid-template-columns:1fr; gap:var(--sp-32);
  position:relative;
}
@media (max-width:639px){
  .process-grid{ padding-left:var(--sp-24); border-left:1px solid var(--line); }
  .process-grid .process-step{ border-top:0; padding-top:0; }
}
@media (min-width:640px){ .process-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:920px){ .process-grid{ grid-template-columns:repeat(4,1fr); gap:var(--sp-24); } }

.process-step{ position:relative; padding-top:var(--sp-24); border-top:1px solid var(--line); }
.process-step__num{
  display:block; font-family:var(--font-head); font-weight:600;
  font-size:clamp(1.8rem,3vw,2.4rem); color:var(--accent-3); margin-bottom:var(--sp-16);
}
.process-step h3{ margin-bottom:var(--sp-12); }
.process-step p{ color:var(--muted); font-size:.98rem; }

/* ---------- 14. About ----------------------------------------------------------*/
.about-grid{
  display:grid; grid-template-columns:1fr; gap:var(--sp-48); align-items:center;
}
@media (min-width:920px){ .about-grid{ grid-template-columns:1fr 1fr; } }
.about-text p{ color:var(--muted); font-size:1.06rem; margin-top:var(--sp-16); }
.about-list{ display:grid; gap:var(--sp-16); margin-top:var(--sp-32); }
.about-list li{ display:flex; align-items:flex-start; gap:var(--sp-12); font-size:1rem; color:var(--txt); }
.about-list svg{ width:20px; height:20px; color:var(--accent); flex:none; margin-top:.15em; }

.quote-panel{
  background:linear-gradient(150deg, rgba(43,130,224,.12), rgba(19,94,174,.06));
  border:1px solid var(--line); border-radius:var(--r-hero);
  padding:var(--sp-48) var(--sp-32);
}
.quote-panel .q{
  font-family:var(--font-head); font-weight:600;
  font-size:clamp(1.25rem, 2.2vw, 1.6rem); line-height:1.4; color:var(--txt);
}
.quote-panel .by{ margin-top:var(--sp-24); color:var(--muted); font-size:.95rem; }

/* ---------- 15. Team -------------------------------------------------------------*/
.team-grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-24); }
@media (min-width:640px){ .team-grid{ grid-template-columns:1fr 1fr; } }
.team-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:var(--sp-32); display:flex; gap:var(--sp-24); align-items:flex-start;
}
.team-card__tile{
  width:64px; height:64px; border-radius:var(--r-hero); flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:600; font-size:1.35rem; color:#fff;
  background:var(--grad);
}
.team-card h3{ margin-bottom:var(--sp-4); }
.team-card .role{ color:var(--accent-3); font-weight:600; font-size:.9rem; margin-bottom:var(--sp-12); }
.team-card__creds{ display:grid; gap:var(--sp-4); }
.team-card__creds span{ display:block; color:var(--muted); font-size:.92rem; }

/* colleagues — deliberately photo-free: monogram tiles, same lockup as the
   partner cards but one step quieter. */
.staff-head{
  margin-top:var(--sp-48); margin-bottom:var(--sp-24);
  font-size:1.05rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.1em; font-weight:600;
}
.staff-grid{
  display:grid; grid-template-columns:1fr; gap:var(--sp-16); list-style:none;
}
@media (min-width:560px){ .staff-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:920px){ .staff-grid{ grid-template-columns:repeat(3,1fr); } }

.staff-card{
  display:flex; align-items:center; gap:var(--sp-16);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:var(--sp-16) var(--sp-24);
}
.staff-card__tile{
  width:44px; height:44px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:600; font-size:.95rem;
  color:var(--accent-3); background:rgba(43,130,224,.13);
}
.staff-card__tile svg{ width:18px; height:18px; }
.staff-card__name{ display:block; font-family:var(--font-head); font-weight:600; font-size:1rem; }
.staff-card__role{ display:block; color:var(--muted); font-size:.88rem; margin-top:2px; }
.staff-card__since{ display:block; color:var(--faint); font-size:.8rem; margin-top:var(--sp-4); }

/* .staff-card--open (the "open position" tile) was removed from the team
   section: an unfilled payroll desk is not a trust signal to a prospective
   client. Recruiting belongs somewhere other than the page that answers
   "who will be handling my books". */

/* ---------- 16. FAQ -------------------------------------------------------------*/
.faq-list{ display:grid; gap:var(--sp-16); max-width:52em; }
.faq-item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:var(--sp-8) var(--sp-24);
}
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-16);
  padding-block:var(--sp-16); font-family:var(--font-head); font-weight:600; font-size:1.02rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::marker{ content:""; }
.faq-item .chevron{
  flex:none; width:20px; height:20px; color:var(--accent-3);
  transition:transform .25s var(--ease-ui);
}
.faq-item[open] .chevron{ transform:rotate(180deg); }
.faq-item__wrap{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .35s var(--ease-ui);
}
.faq-item[open] .faq-item__wrap{ grid-template-rows:1fr; }
.faq-item__inner{ overflow:hidden; }
.faq-item__inner p{ color:var(--muted); padding-bottom:var(--sp-24); font-size:.98rem; }

/* ---------- 17. Contact ------------------------------------------------------*/
.contact-layout{ display:grid; grid-template-columns:1fr; gap:var(--sp-24); align-items:start; }
@media (min-width:920px){ .contact-layout{ grid-template-columns:1fr 1.05fr; } }

.contact-grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-24); }
@media (min-width:640px){ .contact-grid{ grid-template-columns:1fr 1fr; } }

.contact-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:var(--sp-32);
}
.contact-card.featured{ grid-column:1 / -1; }
.contact-card__label{
  font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  color:var(--muted); margin-bottom:var(--sp-16); display:block;
}
.contact-card__phones{ display:flex; flex-wrap:wrap; gap:var(--sp-16); }
.tel-btn{
  display:inline-flex; align-items:center; gap:var(--sp-8);
  font-family:var(--font-head); font-weight:600; font-size:1.15rem;
  color:var(--txt); border:1px solid var(--line); border-radius:var(--r-btn);
  padding:var(--sp-16) var(--sp-24); transition:border-color .2s var(--ease-ui), transform .2s var(--ease-ui);
}
.tel-btn:hover{ border-color:var(--accent-3); transform:translateY(-2px); }
.tel-btn svg{ width:18px; height:18px; color:var(--accent); }

.contact-card__row{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-12); flex-wrap:wrap; }
.mail-link{ font-size:1.05rem; font-weight:500; color:var(--txt); }
.mail-link:hover{ color:var(--accent-3); }
.copy-btn{
  display:inline-flex; align-items:center; gap:var(--sp-8);
  font-size:.86rem; font-weight:600; color:var(--accent-3);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:var(--sp-8) var(--sp-16);
  transition:border-color .2s var(--ease-ui);
}
.copy-btn:hover{ border-color:var(--accent-3); }
.copy-btn svg{ width:14px; height:14px; }

.contact-card address{ font-style:normal; color:var(--txt); font-size:1.02rem; }
.map-link{
  display:inline-flex; align-items:center; gap:var(--sp-4);
  margin-top:var(--sp-16); color:var(--accent-3); font-weight:600; font-size:.94rem;
}
.map-link svg{ width:14px; height:14px; transition:transform .2s var(--ease-ui); }
.map-link:hover svg{ transform:translateX(3px); }

.contact-card .hours{ font-size:1.02rem; color:var(--txt); }

/* contact form */
.cform-card{ position:relative; }
.cform{ display:grid; gap:var(--sp-16); position:relative; }
.cform__row{ display:grid; gap:var(--sp-16); }
@media (min-width:640px){ .cform__row{ grid-template-columns:1fr 1fr; } }
.cform__field{ display:grid; gap:var(--sp-8); }
.cform label{ font-size:.86rem; font-weight:500; color:var(--muted); }
.cform label .opt{ font-weight:400; color:var(--faint); }
.cform input, .cform textarea{
  width:100%; font-size:1rem; color:var(--txt);
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  border-radius:var(--r-btn); padding:var(--sp-12) var(--sp-16);
  transition:border-color .2s var(--ease-ui), background-color .2s var(--ease-ui);
}
.cform input::placeholder, .cform textarea::placeholder{ color:var(--faint); }
.cform input:focus, .cform textarea:focus{
  outline:none; border-color:var(--accent); background:rgba(43,130,224,.06);
}
.cform textarea{ resize:vertical; min-height:120px; }
.cform__submit{ width:100%; }
.cform__submit[disabled]{ opacity:.65; cursor:default; transform:none; }
.cform__status{ font-size:.95rem; color:var(--accent-3); }
.cform__status.error{ color:#E39A9A; }
.cform__note{ font-size:.8rem; color:var(--muted); }
.cform__note a{ color:var(--accent-3); text-decoration:underline; }
/* honeypot: off-screen, not display:none */
.cform__hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* mobile sticky call bar */
.call-bar{
  position:fixed; left:var(--sp-16); right:var(--sp-16); bottom:var(--sp-16); z-index:90;
  display:none;
  align-items:center; justify-content:space-between; gap:var(--sp-12);
  background:rgba(13,22,38,.86);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--line-strong); border-radius:var(--r-card);
  padding:var(--sp-12) var(--sp-16);
  transform:translateY(140%);
  transition:transform .3s var(--ease-ui);
}
@media (max-width:767px){
  .js .call-bar{ display:flex; }
  .js .call-bar.visible{ transform:translateY(0); }
}
.call-bar__actions{ display:flex; gap:var(--sp-8); flex:1; }
.call-bar a.btn{ flex:1; padding-inline:var(--sp-16); }
.call-bar__dismiss{
  width:32px; height:32px; flex:none; display:flex; align-items:center; justify-content:center;
  color:var(--muted); border-radius:var(--r-btn);
}
.call-bar__dismiss svg{ width:16px; height:16px; }

/* ---------- 18. Footer ------------------------------------------------------*/
.site-footer{ border-top:1px solid var(--line); padding-block:var(--sp-48); }
.footer-grid{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-24);
}
.footer-links{ display:flex; flex-wrap:wrap; gap:var(--sp-24); align-items:center; }
.footer-links a{ color:var(--muted); font-size:.9rem; }
.footer-links a:hover{ color:var(--txt); }
.footer-copy{ color:var(--muted); font-size:.85rem; }

/* ---------- 19. Scroll progress bar --------------------------------------------*/
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:100%;
  background:var(--grad); transform-origin:0 0; transform:scaleX(0);
  z-index:200; pointer-events:none;
}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    .js .scroll-progress{
      animation:scrollProgress linear;
      animation-timeline:scroll(root);
    }
  }
}
@keyframes scrollProgress{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* ---------- 20. Focus / accessibility -------------------------------------------*/
:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--accent-3); outline-offset:2px; border-radius:4px;
}

/* ---------- 20b. Useful links page ---------------------------------------------*/
.links-head{
  margin-top:var(--sp-48); margin-bottom:var(--sp-16);
  font-size:1.05rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.1em; font-weight:600;
}
.links-head:first-of-type{ margin-top:0; }
.links-grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-16); list-style:none; }
@media (min-width:640px){ .links-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .links-grid{ grid-template-columns:repeat(3,1fr); } }

.link-card a{
  display:grid; grid-template-columns:1fr auto; align-items:start; gap:var(--sp-12);
  height:100%;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:var(--sp-16) var(--sp-24);
  transition:transform .22s var(--ease-ui), border-color .22s var(--ease-ui);
}
.link-card a:hover{ transform:translateY(-2px); border-color:rgba(43,130,224,.4); }
.link-card__name{ grid-column:1; font-family:var(--font-head); font-weight:600; font-size:.98rem; }
.link-card__desc{ grid-column:1; color:var(--muted); font-size:.85rem; margin-top:2px; }
.link-card a svg{
  grid-column:2; grid-row:1 / span 2;
  width:15px; height:15px; color:var(--accent-3); flex:none; margin-top:.35em;
  transition:transform .22s var(--ease-ui);
}
.link-card a:hover svg{ transform:translate(2px,-2px); }

.links-note{
  margin-top:var(--sp-48); color:var(--muted); font-size:.88rem; max-width:44em;
}
.links-note a{ color:var(--accent-3); text-decoration:underline; }

/* ---------- 21. Subpages (impresszum / adatvédelem / 404) ----------------------*/
.prose{ max-width:42em; }
.prose h1{ margin-bottom:var(--sp-24); }
.prose h2{ font-size:clamp(1.4rem,2.4vw,1.8rem); margin-top:var(--sp-48); margin-bottom:var(--sp-16); }
.prose p{ color:var(--muted); margin-bottom:var(--sp-16); font-size:1.02rem; }
.prose ul{ display:grid; gap:var(--sp-8); margin-bottom:var(--sp-16); padding-left:var(--sp-24); list-style:disc; color:var(--muted); }
.prose a{ color:var(--accent-3); }
.prose a:hover{ text-decoration:underline; }
.prose strong{ color:var(--txt); font-weight:600; }
.prose .updated{ color:var(--muted); font-size:.9rem; margin-top:var(--sp-48); }

.error-page{
  min-height:60vh; display:flex; flex-direction:column; align-items:flex-start;
  justify-content:center; gap:var(--sp-24);
}
.error-page h1{ display:flex; flex-direction:column; gap:var(--sp-16); }
.error-page .code{
  font-family:var(--font-head); font-weight:600; font-size:clamp(4rem,10vw,7rem);
  color:var(--txt); line-height:1;
}
.error-page__msg{
  display:block; font-family:var(--font-body); font-weight:400;
  color:var(--muted); font-size:1.1rem; letter-spacing:normal;
}

/* ---------- 22. Print --------------------------------------------------------
   An accountant's site gets printed: contact details on paper, ink-friendly. */
@media print{
  .aurora, .grain, .scroll-progress, .call-bar, .skip-link,
  .nav-toggle, .nav-cta, .hero-cta, .bridge-band{ display:none !important; }
  *{ color:#000 !important; background:transparent !important;
     box-shadow:none !important; text-shadow:none !important;
     -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  html, body{ background:#fff !important; }
  [data-reveal], .hero-in{ opacity:1 !important; transform:none !important; }
  .svc-card, .contact-card, .team-card, .staff-card, .faq-item, .quote-panel,
  .hero-card, .tel-btn, .copy-btn{ border:1px solid #bbb !important; }
  .team-card__tile{ border:1px solid #bbb !important; }
  a[href^="http"]:not(.logo)::after{ content:" (" attr(href) ")"; font-size:.8em; }
}