/* ============================================================
   Grant Thornton–inspired layout & spacing
   ------------------------------------------------------------
   Adopts GT's spacing rhythm, content width and type scale.
   Keeps Syriac Consultancy's own colours, fonts and content.
   Loaded last so it refines the existing design tokens.
   ============================================================ */

:root {
  --gt-container: 1200px;                       /* GT content column */
  --gt-section-y: clamp(4rem, 6vw, 5.9rem);     /* ~64–94px vertical rhythm */
  --gt-gap: 1.9rem;                             /* ~30px card-grid gap */
}

/* ---- Narrower content column (GT keeps generous side air) ---- */
@media (min-width: 1280px) {
  .container,
  .container-xxl,
  .container-xl { max-width: var(--gt-container); }
}
.consultation-panel__inner { max-width: var(--gt-container); }

/* ---- Consistent, generous vertical section rhythm ---- */
.section-space,
.page-section { padding: var(--gt-section-y) 0; }
.leadership-section__main { padding: var(--gt-section-y) 0; }
.leadership-section__top { padding: var(--gt-section-y) 0 calc(var(--gt-section-y) - 1rem); }
.site-footer__main { padding: var(--gt-section-y) 0; }

/* ---- Compact, editorial body leading (GT ≈ 1.5) ---- */
body { line-height: 1.55; }
.section-heading > p:last-child,
.expertise-card p,
.service-card__body > p,
.value-card p { line-height: 1.6; }

/* ---- GT type scale: large, light headings, tight leading ---- */
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.015em; line-height: 1.14; }

.section-title,
.section-heading h2,
.why-section h2,
.faq-section h2 { font-size: clamp(2rem, 4vw, 2.5rem); line-height: 1.12; } /* all h2: no larger than 2.5rem */

.page-template-page-home .section-title,
.page-template-page-home .section-heading h2,
.page-template-page-home .why-section h2,
.page-template-page-home .faq-section h2 { font-size: clamp(2rem, 4vw, 2.5rem); line-height: 1.03; }

.hero-slide h1,
.hero-slide h2 { font-size: clamp(2.8rem, 5vw, 4.3rem); line-height: 1.06; }

.page-hero h1 { font-size: clamp(2.6rem, 4.5vw, 3.7rem); line-height: 1.07; }

.contact-cta h2,
.page-cta h2,
.digital-first h3,
.formation-feature__content h3 { font-size: 2rem; line-height: 1.1; } /* capped at 2rem, no viewport scaling */

/* ---- GT-style breathing room around section headings ---- */
.section-heading { margin-bottom: clamp(2.75rem, 4vw, 3.75rem); }
.eyebrow { margin-bottom: .85rem; }

/* ---- Normalise card-grid gaps toward GT's ~30px rhythm ---- */
.expertise-grid,
.icon-grid,
.step-grid,
.compliance-grid { gap: var(--gt-gap); }

/* ---- Slightly airier stat / value blocks ---- */
.stat-item { padding: 2.6rem 1rem; }
.value-card { padding: 2rem 1.7rem; }

/* ============================================================
   GT card style, shadows & control typography
   ============================================================ */

:root {
  --gt-radius: 20px;                                  /* GT rounds cards to 20px */
  --gt-shadow: 8px 8px 6px rgba(21, 22, 53, .20);     /* GT's offset "lifted paper" shadow, navy-tinted */
  --gt-shadow-lg: 12px 14px 12px rgba(21, 22, 53, .24);
}

/* ---- Cards: rounded corners + GT offset shadow (home/global families) ---- */
.expertise-card,
.service-card,
.value-card,
.leadership-card,
.about-visual,
.video-frame,
.region-accordion__item {
  border-radius: var(--gt-radius);
  box-shadow: var(--gt-shadow);
}
.expertise-card:hover,
.service-card:hover,
.value-card:hover,
.leadership-card:hover {
  box-shadow: var(--gt-shadow-lg);
}
/* keep media flush with the rounded card top */
.service-card__image { border-top-left-radius: var(--gt-radius); border-top-right-radius: var(--gt-radius); }
.leadership-card > img { border-top-left-radius: var(--gt-radius); border-top-right-radius: var(--gt-radius); }

/* ---- Buttons: GT weight/tracking/radius, our colours ---- */
.btn {
  border-radius: 8px;
  font-weight: 400;
  letter-spacing: normal;
  padding: .72rem 1.7rem;
}
.btn-sm { border-radius: 8px; padding: .55rem 1.2rem; }
/* space the icon from the label in the header CTA (btn is inline-flex, so whitespace collapses) */
.header-actions .btn { gap: .5rem; }

/* Nav links: no pill background — colour change only on hover / active */
.site-nav .nav-link:hover,
.site-nav .nav-link:focus,
.site-nav .nav-link.active,
.site-nav .dropdown-toggle.show { background: transparent; color: var(--color-gold-soft) !important; }

/* ---- Eyebrows / kickers: GT uses tight tracking, not wide ---- */
.eyebrow,
.section-kicker,
.mega-menu__cta > span,
.online-formation__label,
.value-card > span,
.process-list span {
  font-weight: 400;
  letter-spacing: .05em;
}

/* ---- Links / read-more cues stay regular weight (GT is 400) ---- */
.service-card a,
.faq-section__intro a,
.expertise-card__toggle,
.mega-menu__intro > a,
.mega-menu__cta > a { font-weight: 500; }

/* ============================================================
   Inner pages: swap the square / gold-offset premium cards for
   the same GT rounded corners + navy offset shadow as the home.
   ============================================================ */
.icon-card,
.step-card,
.compliance-card,
.sidebar-card,
.contact-form,
.page-intro__media,
.founder-panel,
.tax-industries-section,
.timely-compliance,
.service-content .service-split-section,
.service-content > section:not(.service-image-section):not(.service-split-section):not(.service-countries-panel) {
  border-radius: var(--gt-radius);
}

/* The "full" content column should span the whole container, not sit in column 1 */
.service-content--full { grid-column: 1 / -1; }

/* Dark feature bands run full-bleed; inner content stays on the container grid */
.service-content .service-image-section {
  border-radius: 0;
  margin-left: calc(50% - 50vw);
  padding: clamp(2.5rem, 6vw, 5rem) max(1.25rem, calc((100vw - var(--gt-container)) / 2)) !important;
  width: 100vw;
}

/* Panels that carried a hard gold offset shadow -> GT navy offset shadow */
.step-card,
.sidebar-card,
.contact-form,
.page-intro__media,
.founder-panel,
.tax-industries-section,
.timely-compliance {
  box-shadow: var(--gt-shadow);
}
.service-content .service-split-section { box-shadow: var(--gt-shadow); }
.step-card:hover { box-shadow: var(--gt-shadow-lg); }

/* Compliance cards sit on a dark section — round only, keep flat */
.compliance-card { box-shadow: none; }

/* Left-accent content blocks: soften into rounded cards but keep the gold rule */
.service-content > section:not(.service-image-section):not(.service-split-section):not(.service-countries-panel) {
  box-shadow: var(--gt-shadow);
}

/* ------------------------------------------------------------
   Media boxes: show the real photo instead of the abstract
   navy / gold diagonal-grid graphic.
   ------------------------------------------------------------ */
.service-split-section__media::before { content: none; }
.service-split-section__media img { opacity: 1; }

/* ------------------------------------------------------------
   About page founder panel: show the real founder photo instead
   of the gold "SS" monogram, and tighten the heading + spacing.
   ------------------------------------------------------------ */
.founder-panel__visual { background: #11132f; }
.founder-panel__visual::before { content: none; }
.founder-panel__visual img { display: block; height: 100%; object-fit: cover; object-position: top center; width: 100%; }
.founder-panel__copy { padding: clamp(2.25rem, 4.5vw, 4rem); }
.founder-panel__copy h2 { font-size: clamp(1.85rem, 3vw, 2.6rem); line-height: 1.1; }
.founder-panel__copy > p { margin-bottom: 1rem; }

/* ------------------------------------------------------------
   Contact offices: plain list — drop the 01/02/03 counter and
   the left timeline spine line.
   ------------------------------------------------------------ */
.contact-office { border-left: 0; grid-template-columns: 1fr; padding-left: 0; }
.contact-office::before { content: none; }

/* ------------------------------------------------------------
   Light logo animation: soft fade-in on load + gentle hover.
   ------------------------------------------------------------ */
@keyframes logo-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.site-nav__brand img { animation: logo-in .7s ease both; transition: max-width .35s ease, transform .35s ease, filter .35s ease; }
.site-nav__brand:hover img { filter: drop-shadow(0 4px 12px rgba(212, 175, 55, .4)); transform: translateY(-1px) scale(1.03); }
@media (prefers-reduced-motion: reduce) { .site-nav__brand img { animation: none; } }

/* ------------------------------------------------------------
   "Why Syriac" premium block sits on a light ivory background,
   but inherits the dark section's white text — force dark text.
   ------------------------------------------------------------ */
.premium-why { color: var(--color-ink); }
.premium-why h2 { color: var(--color-navy-deep); }
.premium-why header > p:last-child { color: #5c5d6c; }
.premium-why__list li strong { color: var(--color-navy-deep); }
.premium-why__list li span { color: var(--color-slate); }

/* ============================================================
   Footer — aligned to the new UI: gold-underlined uppercase
   column labels (matching the eyebrow/kicker language),
   tighter type, refined social buttons.
   ============================================================ */
.site-footer__contact-band { padding: 1.75rem 0; }
/* Contact items on one aligned row, centred with the logo (was a lopsided 2×2 grid) */
.footer-contact-grid { align-items: center; column-gap: 2rem; display: flex; flex-wrap: wrap; row-gap: .6rem; }
.footer-contact-grid li { align-items: center; }
.footer-contact-grid span { align-items: baseline; }
.site-footer h2 {
  color: #fff;
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .1em;
  margin-bottom: 1.5rem;
  padding-bottom: .85rem;
  position: relative;
  text-transform: uppercase;
}
.site-footer h2::after {
  background: var(--color-gold);
  bottom: 0;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  width: 34px;
}
/* the first column heading is the brand name — let it read as a name, not a label */
.site-footer__main .col-lg-3:first-child h2 {
  font-size: 1.15rem;
  letter-spacing: -.01em;
  text-transform: none;
}
.footer-about { line-height: 1.75; margin-top: .25rem; }
.footer-contact-grid strong { font-size: .72rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.footer-links a,
.office-address strong { letter-spacing: .01em; }
/* Social buttons — match the top bar's gold hover pill */
.social-links a { border-color: rgba(255, 255, 255, .2); height: 40px; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; width: 40px; }
.social-links a:hover { transform: translateY(-2px); }
.site-footer__bottom { letter-spacing: .02em; padding: 1.3rem 0; }

@media (max-width: 767.98px) {
  :root {
    --gt-section-y: 3.5rem;
    --gt-shadow: 6px 6px 5px rgba(21, 22, 53, .18);
    --gt-shadow-lg: 8px 8px 8px rgba(21, 22, 53, .22);
  }
  .section-heading { margin-bottom: 2.25rem; }
}

/* ============================================================
   Floating quick-contact widget (site-wide)
   ============================================================ */
.quick-contact { align-items: flex-end; bottom: 1.5rem; display: flex; flex-direction: column; gap: .9rem; position: fixed; right: 1.5rem; z-index: 1055; }
.quick-contact__toggle { align-items: center; background: var(--color-gold); border: 0; border-radius: 50%; box-shadow: 0 14px 34px rgba(212, 175, 55, .5); color: var(--color-navy-deep); cursor: pointer; display: flex; font-size: 1.45rem; height: 60px; justify-content: center; position: relative; transition: background-color .3s ease, color .3s ease, transform .3s ease; width: 60px; }
.quick-contact__toggle:hover { transform: translateY(-2px) scale(1.05); }
.quick-contact__toggle::before { animation: qc-pulse 2.4s ease-out infinite; border-radius: 50%; content: ""; inset: 0; position: absolute; }
@keyframes qc-pulse { 0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, .5); } 70% { box-shadow: 0 0 0 18px rgba(212, 175, 55, 0); } 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); } }
.quick-contact__icon-close { display: none; }
.quick-contact.is-open .quick-contact__toggle { background: var(--color-navy); color: #fff; }
.quick-contact.is-open .quick-contact__toggle::before { animation: none; }
.quick-contact.is-open .quick-contact__icon-open { display: none; }
.quick-contact.is-open .quick-contact__icon-close { display: block; }

.quick-contact__panel { background: #fff; border-radius: 16px; box-shadow: 0 30px 70px rgba(21, 22, 53, .3); max-width: calc(100vw - 3rem); opacity: 0; overflow: hidden; pointer-events: none; transform: translateY(14px) scale(.96); transform-origin: bottom right; transition: opacity .25s ease, transform .25s ease, visibility .25s; visibility: hidden; width: 330px; }
.quick-contact.is-open .quick-contact__panel { opacity: 1; pointer-events: auto; transform: none; visibility: visible; }
.quick-contact__head { background: linear-gradient(135deg, var(--color-navy-deep), var(--color-navy-light)); color: #fff; padding: 1.15rem 1.35rem; }
.quick-contact__head span { display: block; font-size: 1.05rem; font-weight: 700; }
.quick-contact__head p { color: rgba(255, 255, 255, .72); font-size: .82rem; line-height: 1.45; margin: .15rem 0 0; }
.quick-contact__list { padding: .5rem; }
.quick-contact__list a { align-items: center; border-radius: 11px; color: var(--color-navy-deep); display: flex; gap: .9rem; padding: .65rem .7rem; transition: background-color .2s ease; }
.quick-contact__list a:hover { background: var(--color-pale); }
.qc-ico { align-items: center; border-radius: 50%; color: #fff; display: flex; flex: 0 0 42px; font-size: 1.05rem; height: 42px; justify-content: center; width: 42px; }
.qc-ico--wa { background: #25d366; }
.qc-ico--in { background: var(--color-accent); }
.qc-ico--us { background: var(--color-navy); }
.qc-ico--mail { background: var(--color-gold); color: var(--color-navy-deep); }
.qc-txt { display: flex; flex-direction: column; line-height: 1.25; }
.qc-txt strong { color: var(--color-navy-deep); font-size: .92rem; font-weight: 700; }
.qc-txt small { color: var(--color-slate); font-size: .82rem; }

@media (max-width: 575.98px) {
  .quick-contact { bottom: 1rem; right: 1rem; }
  .quick-contact__toggle { height: 54px; width: 54px; }
}
@media (prefers-reduced-motion: reduce) { .quick-contact__toggle::before { animation: none; } }