:root {
    --ink: #262421;
    --ink-soft: #706A63;
    --ink-faint: #A9A29A;
    --paper: #FAF7F3;
    --paper-deep: #F0EAE2;
    --surface: #FFFFFF;
    --accent: #BD7A2E;
    --accent-strong: #8F5A1E;
    --accent-warm: #B0664B;
    --accent-warm-soft: #DCAA96;
    --line: rgba(38, 36, 33, 0.12);
    --line-strong: rgba(38, 36, 33, 0.24);
    --on-accent: #211C15;
    --shadow: 0 20px 50px -25px rgba(38, 30, 20, 0.28);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ink: #EFEAE3;
      --ink-soft: #BAB2A7;
      --ink-faint: #857D72;
      --paper: #17140F;
      --paper-deep: #100E0A;
      --surface: #241F19;
      --accent: #DE9D50;
      --accent-strong: #F2B96F;
      --accent-warm: #D18A6E;
      --accent-warm-soft: #E7B8A4;
      --line: rgba(239, 234, 227, 0.12);
      --line-strong: rgba(239, 234, 227, 0.24);
      --on-accent: #17140F;
      --shadow: 0 20px 50px -25px rgba(0, 0, 0, 0.6);
    }
  }

  :root[data-theme="dark"] {
    --ink: #EFEAE3;
    --ink-soft: #BAB2A7;
    --ink-faint: #857D72;
    --paper: #17140F;
    --paper-deep: #100E0A;
    --surface: #241F19;
    --accent: #DE9D50;
    --accent-strong: #F2B96F;
    --accent-warm: #D18A6E;
    --accent-warm-soft: #E7B8A4;
    --line: rgba(239, 234, 227, 0.12);
    --line-strong: rgba(239, 234, 227, 0.24);
    --on-accent: #17140F;
    --shadow: 0 20px 50px -25px rgba(0, 0, 0, 0.6);
  }

  * { box-sizing: border-box; }

  html { overflow-x: hidden; }

  body {
    margin: 0;
    overflow-x: hidden;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Secular One', 'Heebo', 'Segoe UI', Tahoma, sans-serif;
    font-weight: 300;
    direction: rtl;
    text-align: right;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, .display {
    font-family: 'Bellefair', 'Secular One', serif;
    font-weight: 400;
    text-wrap: balance;
    margin: 0;
    color: var(--ink);
    letter-spacing: 0.005em;
  }

  a { color: inherit; }

  .wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
  }

  @media (max-width: 720px) {
    .wrap { padding: 0 24px; }
  }

  /* ---------- concept ribbon ---------- */

  /* ---------- header ---------- */
  header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 96;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  }
  header.scrolled {
    background: color-mix(in srgb, var(--paper) 90%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  header:not(.scrolled) .logo img { filter: brightness(0) invert(1); }
  header:not(.scrolled) nav.primary a { color: rgba(251, 244, 236, 0.88); }
  header:not(.scrolled) nav.primary a.current { color: #FBF4EC; }
  header:not(.scrolled) .nav-toggle { border-color: rgba(251, 244, 236, 0.5); color: #FBF4EC; }

  .nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    padding-bottom: 20px;
    gap: 24px;
  }

  .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
  }
  .logo img {
    height: 56px;
    width: auto;
    display: block;
  }

  nav.primary {
    display: flex;
    align-items: center;
    gap: 34px;
    font-size: 15px;
    font-weight: 600;
  }
  nav.primary a {
    text-decoration: none;
    color: var(--ink-soft);
    position: relative;
    padding: 4px 0;
  }
  nav.primary a:hover { color: var(--ink); }
  nav.primary a.current { color: var(--ink); }
  nav.primary a.current::after {
    content: "";
    position: absolute;
    right: 0; left: 0; bottom: -3px;
    height: 2px;
    background: var(--accent-warm);
  }

  .nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--accent-warm);
    border-radius: 999px;
    padding: 10px 22px;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--shadow);
  }

  .nav-toggle { display: none; }

  @media (max-width: 900px) {
    nav.primary { display: none; }
    .nav-toggle {
      display: inline-flex;
      position: relative;
      width: 44px; height: 44px;
      align-items: center; justify-content: center;
      border: 1px solid var(--line-strong);
      border-radius: 50%;
      background: none;
      color: var(--ink);
      cursor: pointer;
      z-index: 95;
    }
  }

  /* ---------- mobile menu toggle (hamburger -> X) ---------- */
  .nav-toggle .bar {
    position: absolute;
    width: 16px;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .4s cubic-bezier(.65,0,.35,1), opacity .2s ease;
  }
  .nav-toggle .bar:nth-child(1) { transform: translateY(-3.5px); }
  .nav-toggle .bar:nth-child(2) { transform: translateY(3.5px); }
  body.menu-open .nav-toggle .bar:nth-child(1) { transform: translateY(0) rotate(45deg); }
  body.menu-open .nav-toggle .bar:nth-child(2) { transform: translateY(0) rotate(-45deg); }
  body.menu-open .nav-toggle { border-color: var(--accent-warm); }

  /* ---------- mobile menu overlay (circular reveal + staggered links) ---------- */
  body.menu-open { overflow: hidden; }
  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: circle(1px at calc(100% - 40px) 40px);
    transition: clip-path .65s cubic-bezier(.65,0,.35,1);
    pointer-events: none;
  }
  body.menu-open .mobile-menu {
    clip-path: circle(150% at calc(100% - 40px) 40px);
    pointer-events: auto;
  }
  .mobile-menu-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
  }
  .mobile-menu-nav a {
    font-family: 'Secular One', 'Bellefair', serif;
    font-size: clamp(26px, 7vw, 34px);
    color: var(--paper);
    text-decoration: none;
    padding: 9px 0;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .45s ease, transform .45s ease;
  }
  .mobile-menu-nav a.current { color: var(--accent-warm-soft); }
  .mobile-menu-nav a.mobile-cta {
    margin-top: 22px;
    font-family: 'Secular One', 'Heebo', sans-serif;
    font-weight: 700;
    font-size: 16px;
    background: var(--accent-warm);
    color: var(--ink);
    padding: 14px 32px;
    border-radius: 999px;
  }
  body.menu-open .mobile-menu-nav a { opacity: 1; transform: translateY(0); }
  body.menu-open .mobile-menu-nav a:nth-child(1) { transition-delay: .18s; }
  body.menu-open .mobile-menu-nav a:nth-child(2) { transition-delay: .24s; }
  body.menu-open .mobile-menu-nav a:nth-child(3) { transition-delay: .30s; }
  body.menu-open .mobile-menu-nav a:nth-child(4) { transition-delay: .36s; }
  body.menu-open .mobile-menu-nav a:nth-child(5) { transition-delay: .42s; }
  body.menu-open .mobile-menu-nav a:nth-child(6) { transition-delay: .48s; }
  body.menu-open .mobile-menu-nav a:nth-child(7) { transition-delay: .54s; }
  @media (prefers-reduced-motion: reduce) {
    .mobile-menu { transition: clip-path .01s linear; }
    .mobile-menu-nav a { transition: opacity .01s linear; transform: none; }
  }

  /* ---------- hero ---------- */
  /* ---------- full-screen video hero ---------- */
  .hero-video {
    position: relative;
    min-height: 92svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
  }
  .hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--ink);
  }
  .hero-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Skip the autoplay video on mobile (data/battery) and for anyone who
     prefers reduced motion — the office photo underneath covers both
     cases automatically, no JS needed. */
  @media (max-width: 760px) {
    .hero-media video { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-media video { display: none; }
  }
  .hero-photo {
    position: absolute;
    inset: -6%;
    width: 112%;
    height: 112%;
    object-fit: cover;
    animation: heroPan 26s ease-in-out infinite alternate;
  }
  .hero-media-fallback {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(60% 50% at 78% 22%, rgba(222,157,80,0.20), transparent 60%),
      radial-gradient(55% 45% at 20% 80%, rgba(180,102,75,0.16), transparent 65%),
      linear-gradient(150deg, rgba(23,19,16,0.72) 0%, rgba(17,14,11,0.82) 62%, rgba(16,13,11,0.90) 100%);
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-media-fallback { animation: none; }
  }
  @keyframes heroPan {
    0%   { transform: scale(1.06) translate(0, 0); }
    100% { transform: scale(1.14) translate(-1.5%, -1.5%); }
  }
  .video-badge {
    position: absolute;
    z-index: 2;
    bottom: 28px;
    left: 28px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Secular One', 'Heebo', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(250, 247, 243, 0.85);
    background: rgba(23, 20, 15, 0.55);
    border: 1px solid rgba(250, 247, 243, 0.25);
    border-radius: 999px;
    padding: 8px 16px;
    backdrop-filter: blur(6px);
  }
  .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(190deg, rgba(16,13,10,0.35) 0%, rgba(16,13,10,0.55) 55%, rgba(16,13,10,0.88) 100%);
  }
  .hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    padding-top: 96px;
    padding-bottom: 56px;
  }
  .hero-video .eyebrow { color: var(--accent-warm-soft); }
  .hero-video .eyebrow::before { background: var(--accent-warm-soft); }
  .hero-video h1 {
    color: #FBF4EC;
    max-width: 18ch;
    font-size: clamp(38px, 6vw, 74px);
    line-height: 1.12;
  }
  .hero-video h1 em { color: var(--accent-warm-soft); }
  .hero-video .hero-lede { color: rgba(251, 244, 236, 0.82); }
  .hero-video .btn-ghost {
    border-color: rgba(251, 244, 236, 0.4);
    color: #FBF4EC;
  }
  .scroll-cue {
    position: absolute;
    z-index: 3;
    bottom: 28px;
    right: 32px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Secular One', 'Heebo', sans-serif;
    font-size: 12.5px;
    color: rgba(251, 244, 236, 0.7);
  }
  .scroll-cue .line {
    width: 1px; height: 34px;
    background: rgba(251, 244, 236, 0.4);
  }

  /* ---------- stats strip (overlaps hero) ---------- */
  .stats-strip {
    position: relative;
    z-index: 5;
    margin-top: -64px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    box-shadow: var(--shadow);
    overflow: hidden;
  }
  .stats-strip .stat {
    padding: 30px 20px;
    text-align: center;
    border-inline-start: 1px solid var(--line);
  }
  .stats-strip .stat:first-child { border-inline-start: none; }
  .stats-strip .stat .num {
    font-family: 'Bellefair', serif;
    font-size: 32px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .stats-strip .stat .num small {
    font-family: 'Secular One', 'Heebo', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent-warm);
    margin-inline-start: 4px;
  }
  .stats-strip .stat .label {
    margin-top: 6px;
    font-size: 13px;
    color: var(--ink-soft);
  }
  @media (max-width: 760px) {
    .stats-strip { grid-template-columns: repeat(2, 1fr); }
    .stats-strip .stat:nth-child(2) { border-inline-start: 1px solid var(--line); }
    .stats-strip .stat:nth-child(3) { border-inline-start: none; border-top: 1px solid var(--line); }
    .stats-strip .stat:nth-child(4) { border-top: 1px solid var(--line); }
    .hero-content { padding-top: 100px; padding-bottom: 56px; }
    .scroll-cue { display: none; }
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-strong);
    margin-bottom: 22px;
  }
  .eyebrow::before {
    content: "";
    width: 26px; height: 1px;
    background: var(--accent-warm);
  }

  .hero-lede {
    margin-top: 26px;
    font-size: 18px;
    color: var(--ink-soft);
    max-width: 46ch;
  }

  .hero-actions {
    display: flex;
    gap: 14px;
    margin-top: 34px;
    flex-wrap: wrap;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border: 1px solid transparent;
  }
  .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow); }
  .btn-ghost { border-color: var(--line-strong); color: var(--ink); }

  /* ---------- section shell ---------- */
  section { padding: 84px 0; border-bottom: 1px solid var(--line); }
  section:last-of-type { border-bottom: none; }

  .section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    margin-bottom: 48px;
  }
  .section-head h2 { font-size: clamp(26px, 3vw, 36px); }
  .section-head .tag {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-strong);
    display: block;
    margin-bottom: 12px;
  }
  .section-note { max-width: 32ch; color: var(--ink-soft); font-size: 15px; }

  /* ---------- services index ---------- */
  .index-list { border-top: 1px solid var(--line-strong); }
  .index-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 26px;
    padding: 26px 4px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    transition: background .18s ease;
  }
  .index-item:hover { background: var(--surface); }
  .index-num {
    font-family: 'Bellefair', serif;
    font-size: 15px;
    color: var(--accent-warm);
    font-variant-numeric: tabular-nums;
  }
  .index-body h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 6px;
  }
  .index-body p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 15px;
    max-width: 62ch;
  }
  .index-arrow {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .index-item:hover .index-arrow { background: var(--ink); border-color: var(--ink); color: var(--paper); }

  @media (max-width: 640px) {
    .index-item { grid-template-columns: 40px 1fr; }
    .index-arrow { display: none; }
  }

  /* ---------- about / dossier ---------- */
  .dossier {
    display: grid;
    grid-template-columns: 1.28fr 0.72fr;
    gap: 56px;
    align-items: start;
  }
  .portrait {
    order: 2;
    aspect-ratio: 4/5;
    border-radius: 22px;
    background:
      linear-gradient(160deg, var(--accent-strong), var(--ink) 78%);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow);
    display: flex;
    align-items: flex-end;
    border: 1px solid var(--accent-warm);
  }
  .portrait::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
      repeating-linear-gradient(0deg, rgba(243,245,238,0.06) 0 1px, transparent 1px 34px),
      repeating-linear-gradient(90deg, rgba(243,245,238,0.06) 0 1px, transparent 1px 34px);
  }
  .portrait-photo {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 12%;
  }

  .credentials {
    list-style: none;
    padding: 0; margin: 30px 0 0;
    border-top: 1px solid var(--line-strong);
  }
  .credentials li {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
    color: var(--ink-soft);
  }
  .credentials li strong { color: var(--ink); font-weight: 700; min-width: 128px; }

  /* Name byline + the home-page intro copy, both folded into the same
     dossier card as the portrait/credentials (see home.blade.php) so the
     page reads as one "about" section instead of two. */
  .dossier-name {
    margin: 14px 0 0;
    font-family: 'Heebo', 'Secular One', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--accent-strong);
  }
  .about-body { margin-top: 18px; max-width: 62ch; }
  .about-body p { color: var(--ink-soft); font-size: 15.5px; margin: 0 0 16px; line-height: 1.8; }
  .about-body p:first-child { font-size: 16.5px; color: var(--ink); line-height: 1.7; }

  /* ---------- testimonials ---------- */
  .quote-deck {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line-strong);
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    overflow: hidden;
  }
  .quote-card {
    background: var(--surface);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .quote-mark {
    font-family: 'Bellefair', serif;
    font-size: 42px;
    color: var(--accent-warm-soft);
    line-height: 1;
  }
  .quote-card p {
    margin: 0;
    font-size: 15px;
    color: var(--ink);
    flex-grow: 1;
  }
  .quote-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--ink-soft);
    border-top: 1px solid var(--line);
    padding-top: 14px;
  }

  @media (max-width: 900px) {
    .quote-deck { grid-template-columns: 1fr; }
    .dossier { grid-template-columns: 1fr; }
    /* On desktop the portrait sits beside the text, so its order doesn't
       matter much; stacked on mobile, the about section now runs to a few
       hundred words (the merged home-page intro copy), so the photo
       should appear before that text, not after it. */
    .portrait { order: 0; }
  }

  /* ---------- twin panels: blog + forms ---------- */
  .twin {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  @media (max-width: 900px) { .twin { grid-template-columns: 1fr; } }

  .panel {
    border: 1px solid var(--line-strong);
    background: var(--surface);
    border-radius: 18px;
    padding: 34px;
  }
  .panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
  }
  .panel-head h3 { font-size: 21px; }
  .panel-head a {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--accent-strong);
    text-decoration: none;
  }
  .panel ul { list-style: none; margin: 0; padding: 0; }
  .panel li {
    padding: 15px 0;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 14.5px;
  }
  .panel li:first-child { border-top: none; }
  .panel .item-title { color: var(--ink); font-weight: 600; }
  .panel .item-meta { color: var(--ink-faint); font-size: 12.5px; white-space: nowrap; flex-shrink: 0; }
  .file-tag {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-strong);
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    padding: 2px 7px;
    flex-shrink: 0;
  }

  /* ---------- tool CTA (VAT calculator teaser) ---------- */
  .tool-cta {
    display: flex;
    align-items: center;
    gap: 36px;
    background: linear-gradient(135deg, var(--surface), var(--paper-deep));
    border: 1px solid var(--line-strong);
    border-radius: 24px;
    padding: 44px;
    box-shadow: var(--shadow);
  }
  .tool-cta-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--accent-warm-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--accent-warm);
  }
  .tool-cta-icon svg { width: 38px; height: 38px; }
  .tool-cta-body { flex: 1; }
  .tool-cta .btn { flex-shrink: 0; }
  @media (max-width: 760px) {
    .tool-cta { flex-direction: column; align-items: flex-start; padding: 30px; }
  }

  /* ---------- CTA band ---------- */
  .cta-band {
    background: var(--ink);
    color: var(--paper);
    border-radius: 24px;
    padding: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    box-shadow: inset 0 0 0 1px var(--accent-warm);
  }
  .cta-band h2 { color: var(--paper); font-size: clamp(24px,3vw,32px); max-width: 22ch; }
  .cta-band .btn-primary { background: var(--accent-warm); color: var(--ink); box-shadow: none; }

  /* ---------- footer ---------- */
  footer { padding: 64px 0 40px; }
  .foot-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.85fr 0.85fr 0.95fr 1fr;
    gap: 32px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--line);
  }
  @media (max-width: 1080px) { .foot-grid { grid-template-columns: 1fr 1fr 1fr; } }
  @media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 460px) { .foot-grid { grid-template-columns: 1fr; } }
  .foot-col h4 {
    font-size: 12.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 16px;
    font-weight: 700;
  }
  .foot-col a, .foot-col p {
    display: block;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 14.5px;
    margin-bottom: 10px;
  }
  .foot-col a:hover { color: var(--ink); }
  .foot-whatsapp-link {
    display: flex !important;
    align-items: center;
    gap: 7px;
    color: #3E7A52 !important;
  }
  .foot-whatsapp-link:hover { color: #2c5c3c !important; }
  .foot-hours-label {
    margin-top: 6px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: 700;
  }
  .foot-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 26px;
    font-size: 13px;
    color: var(--ink-faint);
    flex-wrap: wrap;
    gap: 12px;
  }

  svg.icon { width: 17px; height: 17px; flex-shrink: 0; }


/* ===== VAT calculator page ===== */
/* ---------- page intro ---------- */
  .tool-hero { padding: 64px 0 8px; }

  /* ---------- small hero band for internal pages ---------- */
  /* The optional background photo (per-page, see partials/page-hero.blade
     .php's $bg prop) sits on the section itself; the dark
     gradient — the same one this band always had — now lives on a ::before
     layer stacked ON TOP of that photo, so the photo shows through where
     the gradient is lighter and the text stays legible where it's darker.
     A page with no photo yet (until its image is uploaded) just shows the
     gradient on its own background-color, identical to before. */
  .page-hero {
    position: relative;
    padding: 168px 0 56px;
    overflow: hidden;
    background-color: var(--ink);
    background-size: cover;
    background-position: center;
  }
  .page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--accent-warm) 22%, transparent) 0%, transparent 55%),
      linear-gradient(155deg, var(--ink) 0%, color-mix(in srgb, var(--ink) 88%, #000 12%) 100%);
  }
  .page-hero.has-bg::before {
    background:
      radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--accent-warm) 30%, transparent) 0%, transparent 55%),
      linear-gradient(155deg, rgba(38,36,33,0.82) 0%, rgba(16,14,11,0.92) 100%);
  }
  .page-hero .wrap { position: relative; z-index: 1; }
  .page-hero .eyebrow { color: var(--accent-warm-soft); }
  .page-hero .eyebrow::before { background: var(--accent-warm-soft); }
  .page-hero h1 { color: #FBF4EC; font-size: clamp(30px, 3.6vw, 44px); max-width: 26ch; }
  .page-hero h1 em { font-style: normal; color: var(--accent-warm-soft); }
  .page-hero .hero-lede { color: rgba(251, 244, 236, 0.78); max-width: 60ch; margin-top: 16px; }
  .page-hero .back-link { color: rgba(251, 244, 236, 0.68); }
  .page-hero .back-link:hover { color: #FBF4EC; }

  @media (max-width: 640px) {
    .page-hero { padding: 148px 0 44px; }
  }

  /* ---------- services grid (home + index page) ---------- */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
  .service-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 30px 26px;
    border: 1px solid var(--line);
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    background: var(--surface);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .service-card:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow); }
  .service-card .service-icon {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--accent-warm) 14%, transparent);
    color: var(--accent-strong);
    flex-shrink: 0;
  }
  .service-card .service-icon svg { width: 24px; height: 24px; }
  .service-card h3 { font-size: 19px; font-weight: 600; }
  .service-card p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }
  .service-card .service-arrow {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13.5px; font-weight: 700; color: var(--accent-strong);
  }

  @media (max-width: 900px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 620px) {
    .services-grid { grid-template-columns: 1fr; }
  }

  /* ---------- blog cards ---------- */
  .posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
  .post-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px 24px;
    border: 1px solid var(--line);
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    background: var(--surface);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .post-card:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow); }
  .post-card h3 { font-size: 18px; font-weight: 600; margin-top: 4px; }
  .post-card p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; flex-grow: 1; }
  .post-date { font-size: 13px; color: var(--ink-faint); }
  .pagination-wrap { margin-top: 40px; }

  /* ---------- pagination (shared: public + admin) ---------- */
  .pagination-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }
  .pagination-summary {
    margin: 0;
    font-size: 13.5px;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
  }
  .pagination-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
  }
  a.pagination-btn:hover { border-color: var(--accent); color: var(--accent-strong); }
  .pagination-current { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .pagination-btn-disabled { opacity: .4; cursor: not-allowed; }
  .pagination-dots { padding: 0 4px; color: var(--ink-faint); font-weight: 600; }
  @media (max-width: 520px) {
    .pagination-nav { justify-content: center; }
    .pagination-summary { order: 2; width: 100%; text-align: center; }
    .pagination-links { justify-content: center; }
  }

  @media (max-width: 900px) {
    .posts-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 620px) {
    .posts-grid { grid-template-columns: 1fr; }
  }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--accent-strong); margin-bottom: 22px;
  }
  .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent-warm); }
  .tool-hero h1 { font-size: clamp(32px, 4.4vw, 50px); max-width: 20ch; }
  .tool-hero h1 em { font-style: normal; color: var(--accent); }
  .hero-lede { margin-top: 22px; font-size: 17.5px; color: var(--ink-soft); max-width: 58ch; }
  .back-link {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
    font-size: 13.5px; font-weight: 600; color: var(--ink-faint); text-decoration: none;
  }
  .back-link:hover { color: var(--ink); }

  section { padding: 64px 0; border-bottom: 1px solid var(--line); }
  section:last-of-type { border-bottom: none; }

  .section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 44px; }
  .section-head h2 { font-size: clamp(24px, 2.8vw, 32px); }
  .section-head .tag {
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--accent-strong); display: block; margin-bottom: 12px;
  }
  .section-note { max-width: 34ch; color: var(--ink-soft); font-size: 15px; }

  .btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px;
    font-weight: 700; font-size: 15px; text-decoration: none; border: 1px solid transparent; cursor: pointer;
  }
  .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow); }
  .btn-ghost { border-color: var(--line-strong); color: var(--ink); background: none; }

  /* ---------- calculator ---------- */
  .calc-shell {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 0;
    border: 1px solid var(--line-strong);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--surface);
  }
  .calc-form { padding: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
  .calc-field { display: flex; flex-direction: column; gap: 8px; }
  .calc-field.full { grid-column: 1 / -1; }
  .calc-field label { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
  .calc-field .hint { font-size: 12px; color: var(--ink-faint); margin-top: -4px; }
  .input-currency {
    display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 12px;
    overflow: hidden; background: var(--paper);
  }
  .input-currency span {
    padding: 12px 14px; color: var(--ink-faint); font-size: 14px; border-left: 1px solid var(--line-strong);
    font-family: 'Secular One', 'Heebo', sans-serif;
  }
  .input-currency input, .calc-field input[type="number"] {
    flex: 1; border: none; background: none; padding: 12px 14px; font-size: 15.5px;
    color: var(--ink); font-family: 'Secular One', 'Heebo', sans-serif; width: 100%; outline: none;
    font-variant-numeric: tabular-nums;
  }
  .calc-field input[type="number"]:not(.input-currency input) {
    border: 1px solid var(--line-strong); border-radius: 12px; background: var(--paper);
  }
  .input-currency:focus-within, .calc-field input:focus { border-color: var(--accent); }
  .calc-reset {
    grid-column: 1 / -1; display: flex; justify-content: flex-end;
    font-size: 13px; color: var(--ink-faint); text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; font-family: inherit;
  }

  .calc-results {
    background: var(--ink); color: var(--paper); padding: 44px; display: flex; flex-direction: column; gap: 22px;
  }
  .calc-results .kicker { font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-warm-soft); font-weight: 700; }
  .result-row { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; border-bottom: 1px solid rgba(250,247,243,0.14); }
  .result-row .rlabel { font-size: 13.5px; color: rgba(250,247,243,0.65); }
  .result-row .rvalue { font-family: 'Bellefair', serif; font-size: 30px; font-variant-numeric: tabular-nums; }
  .result-row.highlight .rvalue { color: var(--accent-warm-soft); font-size: 40px; }
  .calc-disclaimer { font-size: 12.5px; color: rgba(250,247,243,0.6); line-height: 1.6; margin-top: auto; }
  .calc-cta { margin-top: 6px; }

  @media (max-width: 860px) {
    .calc-shell { grid-template-columns: 1fr; }
    .calc-form { grid-template-columns: 1fr; padding: 30px; }
    .calc-results { padding: 30px; }
  }

  /* ---------- glossary ---------- */
  .glossary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); border-radius: 18px; overflow: hidden; }
  .glossary-item { background: var(--surface); padding: 26px 24px; }
  .glossary-item h3 { font-size: 17px; margin-bottom: 8px; }
  .glossary-item p { margin: 0; font-size: 14px; color: var(--ink-soft); }
  @media (max-width: 900px) { .glossary-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 620px) { .glossary-grid { grid-template-columns: 1fr; } }

  /* ---------- section-head: stack on narrow screens ----------
     .section-head is a flex row (tag+h2 on one side, a short note on the
     other) with no wrap rule, so on narrow phones the two columns get
     squeezed side by side instead of stacking, and the short note can
     end up sitting above/beside a multi-line heading. Used by every
     section across the site (home page intro/services/testimonials,
     service pages, etc.), so this is a global, not page-specific, fix. */
  @media (max-width: 760px) {
    .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .section-note { max-width: 100%; }
  }

  /* ---------- bold UI text: stop the browser from faking it ----------
     The site's body font stack leads with 'Secular One', which Google
     Fonts only ships in a single (regular) weight. Every place below
     asks for a bold weight (600/700) — nav links, buttons, tags,
     labels — so with no real bold file to use, the browser synthesizes
     one by mechanically thickening the regular glyphs. That's exactly
     what reads as "blurry / smudged" text (most visible in the header
     nav and the nav button, but it affects every bold element sitewide
     the same way). Heebo actually ships real 500/600/700 weight files,
     so for anything meant to look bold, lead with Heebo instead —
     headings (h1/h2/h3, weight 400) are untouched and keep their
     Bellefair/Secular One look. */
  nav.primary a,
  .nav-cta,
  .mobile-menu-nav a.mobile-cta,
  .video-badge,
  .stats-strip .stat .num small,
  .eyebrow,
  .section-head .tag,
  .index-body h3,
  .credentials li strong,
  .quote-name,
  .panel-head a,
  .panel .item-title,
  .file-tag,
  .service-card h3,
  .service-card .service-arrow,
  .post-card h3,
  .back-link,
  .btn,
  .calc-field label,
  .calc-results .kicker,
  .dossier-name {
    font-family: 'Heebo', 'Secular One', 'Segoe UI', Tahoma, sans-serif;
  }