/*
Theme Name: HTMLtoWP 51194
Theme URI: https://htmltowp.com/
Author: HTML to WP
Text Domain: htmltowp
*/

/* =========================================================
   VARIABLES
   ========================================================= */

:root {
  --navy: #07345f;
  --navy-dark: #052746;

  --teal: #4d8b80;
  --teal-dark: #276b62;

  --orange: #f4512a;

  --cream: #fbfaf6;

  --blue-line: rgba(38, 91, 145, .18);

  --text: #182735;
  --muted: #52616d;

  --border: rgba(7, 52, 95, .16);

  --max: 1180px;
}

/* =========================================================
   RESET / GLOBAL
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  color: var(--text);

  background: var(--cream);

  line-height: 1.55;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
}

/* =========================================================
   SITE WRAPPER
   ========================================================= */

.site-page {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* =========================================================
   PASSPORT / GUILLOCHÉ BACKGROUND
   ========================================================= */

.guilloche {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 620px;
  pointer-events: none;
  z-index: 0;

  opacity: .42;

  background:
    radial-gradient(
      circle at 4% 12%,
      rgba(20,70,120,.22) 0 2px,
      transparent 3px
    ),

    repeating-radial-gradient(
      ellipse at 4% 12%,
      transparent 0 12px,
      rgba(38,91,145,.20) 13px 14px,
      transparent 15px 24px
    ),

    repeating-radial-gradient(
      ellipse at 74% 18%,
      transparent 0 27px,
      rgba(38,91,145,.095) 28px 29px,
      transparent 30px 47px
    ),

    repeating-radial-gradient(
      ellipse at 51% 43%,
      transparent 0 42px,
      rgba(60,111,160,.055) 43px 44px,
      transparent 45px 72px
    ),

    repeating-linear-gradient(
      12deg,
      transparent 0 27px,
      rgba(38,91,145,.035) 28px 29px,
      transparent 30px 56px
    );

  mask-image:
    linear-gradient(
      to bottom,
      black 0%,
      rgba(0,0,0,.88) 50%,
      rgba(0,0,0,.55) 74%,
      transparent 100%
    );

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      black 0%,
      rgba(0,0,0,.88) 50%,
      rgba(0,0,0,.55) 74%,
      transparent 100%
    );
}

/* The .guilloche element should be placed INSIDE .hero in front-page-static.php.
   This creates the intended paint order: hero background -> guilloche -> hero content. */

/* =========================================================
   GENERAL CONTAINER
   ========================================================= */

.container {
  width: min(
    calc(100% - 120px),
    1060px
  );

  margin-inline: auto;
}

/* =========================================================

SECTION HEADINGS
   ========================================================= */

.section-heading,
.process-title {
  margin: 0 0 24px;

  color: var(--navy);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 1.55rem;
}

/* =========================================================
   CTA BUTTONS
   ========================================================= */

.cta-row {
  display: flex;
  align-items: center;
  gap: 17px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: 0 7px 18px rgba(244,81,42,.20);
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: pointer;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 11px 22px rgba(244,81,42,.28);
}

.btn-arrow {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 50%;
}

.cta-note {
  max-width: 300px;
  color: var(--navy);
  font-size: .87rem;
  line-height: 1.35;
}

/* =========================================================
   DOCUMENTS / WHY
   ========================================================= */

.split-section {
  position: relative;

  z-index: 3;

  padding: 54px 0;

  background: #fff;

  border-top:
    1px solid
    rgba(7,52,95,.08);

  border-bottom:
    1px solid
    rgba(7,52,95,.08);
}

.split-grid {
  display: grid;

  grid-template-columns:
    1fr 1.15fr;

  gap: 42px;
}

/* =========================================================
   DOCUMENT CARDS
   ========================================================= */

.document-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 10px;
}

.doc-card {
  min-height: 105px;

  padding: 16px 10px;

  display: grid;

  place-items: center;

  text-align: center;

  border:
    1px solid var(--border);

  border-radius: 8px;

  color: var(--navy);

  background: #fff;

  font-size: .88rem;

  font-weight: 700;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.doc-card:hover {
  transform: translateY(-2px);

  box-shadow:
    0 7px 18px
    rgba(7,52,95,.08);
}

.doc-icon {
  margin-bottom: 6px;

  color: var(--teal-dark);

  font-size: 1.65rem;
}
.why-grid {
  display: grid;

  /* Force four genuinely equal tracks, even when French text has
     wider intrinsic/min-content requirements than the English. */
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 0;
}

.why-card {
  min-width: 0;
  padding: 0 18px;

  border-left:
    1px solid var(--border);

  text-align: left;
}

.why-card:first-child {
  border-left: 0;
}

.why-icon {
  margin-bottom: 7px;

  color: var(--teal-dark);

  font-size: 1.7rem;

  text-align: center;
}

.why-card strong {
  display: block;
  margin-bottom: 6px;
  color: var(--navy);
  font-size: .86rem;
}

.why-card span {
  color: var(--muted);

  font-size: .82rem;

  line-height: 1.35;

  display: block;

  text-align: left;
}
/* =========================================================
   HOW IT WORKS
   ========================================================= */

.process {
  padding: 45px 0;

  background: #eef5fa;
}

.process-grid {
  display: grid;

  grid-template-columns:
    auto
    42px minmax(0, 1fr)
    auto
    42px minmax(0, 1fr)
    auto
    42px minmax(0, 1.15fr);

  gap: 14px;

  align-items: start;
}

.process-title {
  margin-right: 10px;
  padding-top: 2px;

  font-size: 1.45rem;
  line-height: 1.2;
  white-space: nowrap;
}

.step-number {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  margin-top: 7px;

  border-radius: 50%;

  background: var(--navy);

  color: #fff;

  font-weight: 800;
}

.step h3 {
  margin: 0 0 4px;

  color: var(--navy);

  font-size: .98rem;
}

.step p {
  margin: 0;

  color: var(--muted);

  font-size: .84rem;

  line-height: 1.35;
}

.arrow {
  color: #7c9ab1;

  font-size: 1.5rem;

  margin-top: 9px;
}

/* =========================================================
   TESTIMONIALS / FINAL CTA
   ========================================================= */

.social-proof {
  padding: 58px 0 70px;

  background: #fff;
}

.proof-grid {
  display: grid;
  grid-template-columns:
    1.7fr .9fr;
  gap: 38px;
  align-items: center;
}

.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.testimonial {
  margin: 0;
  padding-right: 12px;
  border-right: 1px solid var(--border);
}

.testimonial:last-child {
  border-right: 0;
}

.stars {
  color: #ef9d12;

  letter-spacing: .1em;

  margin-bottom: 8px;
}

.testimonial p {
  margin: 0;

  color: var(--text);

  font-size: .90rem;

  font-style: italic;

  line-height: 1.45;
}

.testimonial cite {
  display: block;

  margin-top: 12px;

  color: var(--muted);

  font-size: .80rem;

  font-style: normal;
}

/* =========================================================
   FINAL CTA
   ========================================================= */

.final-cta {
  padding: 34px 38px;

  border-radius: 15px;

  background:
    linear-gradient(
      135deg,
      var(--navy),
      var(--navy-dark)
    );

  color: #fff;

  box-shadow:
    0 14px 35px
    rgba(5,39,70,.14);
}

.final-cta h2 {
  margin: 0 0 8px;

  color: #fff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 2rem;

  line-height: 1.15;
}

.final-cta p {
  margin: 0 0 19px;

  color:
    rgba(255,255,255,.86);
}

.final-cta .btn {
  box-shadow: none;
}

.confidential {
  margin-top: 14px;

  color:
    rgba(255,255,255,.78);

  font-size: .78rem;
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  padding: 20px 0;

  background: #f7f7f4;

  border-top:
    1px solid var(--border);
}

.footer-inner {
  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 22px;

  color: var(--muted);

  font-size: .82rem;
}

/* =========================================================
   WORDPRESS CONTENT FALLBACK
   ========================================================= */

.content-section {
  position: relative;

  z-index: 2;

  padding: 54px 0 70px;

  background: #fff;

  border-top:
    1px solid
    rgba(7,52,95,.08);
}

.content-card,
article.post,
article.page,
.search-result,
.archive-post,
.not-found {
  padding: 28px;

  margin-bottom: 24px;

  background: #fff;

  border:
    1px solid var(--border);

  border-radius: 12px;
}

.entry-meta,
.post-meta {
  color: var(--muted);

  font-size: .90rem;

  margin-bottom: 16px;
}

.entry-content,
.page-content {
  color: var(--text);
}

/* =========================================================
   HOMEPAGE — REMOVE ANY TOP SPACING
   ========================================================= */

html,
body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.static-homepage {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body.static-homepage::before,
body.static-homepage::after {
  display: none !important;
  content: none !important;
}

body.static-homepage .site-page {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

body.static-homepage .hero {
  margin-top: 0 !important;
  border-top: 0 !important;
}

/* =========================================================

RESPONSIVE / TABLET
   ========================================================= */

@media (max-width: 1000px) {

  .split-grid,
  .proof-grid {
    grid-template-columns: 1fr;
  }

  .process-grid {
    grid-template-columns:
      auto 1fr auto 1fr;
  }

  .process-title {
    grid-column: 1 / -1;
  }

  .arrow:last-of-type {
    display: none;
  }
}

/* =========================================================
   RESPONSIVE / MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .container {
    width:
      min(
        calc(100% - 30px),
        var(--max)
      );
  }

  .document-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .why-grid {
    grid-template-columns:
      repeat(2, 1fr);

    gap: 24px 0;
  }

  .why-card:nth-child(3) {
    border-left: 0;
  }

  .process-grid {
    grid-template-columns:
      42px 1fr;
  }

  .process-title {
    grid-column: 1 / -1;
  }

  .arrow {
    display: none;
  }

  .testimonials {
    grid-template-columns: 1fr;
  }

  .testimonial {
    padding:
      0 0 20px;

    border-right: 0;

    border-bottom:
      1px solid var(--border);
  }

  .testimonial:last-child {
    border-bottom: 0;
  }

  .final-cta {
    padding:
      28px 25px;
  }
}

/* =========================================================
   PUBLIC BRAND HEADER
   ========================================================= */
.home-brand-header {
  position: relative;
  z-index: 30;
  min-height: 58px;
  display: flex;
  align-items: center;
  background: #fbfaf6;
  border-bottom: 1px solid rgba(7,52,95,.16);
}

.home-brand-inner {
  width: min(1340px, calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.home-brand-link {
  display: inline-flex;
  align-items: center;
  color: #07345f;
  text-decoration: none;
}

.home-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
}

.home-brand-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .005em;
}

.home-brand-credential {
  color: #52616d;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .01em;
}

.home-brand-link:hover .home-brand-name {
  color: #276b62;
}

.home-language-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #07345f;
  font-size: .85rem;
}

.home-language-switch a,
.home-language-switch span {
  color: inherit;
  text-decoration: none;
}

.home-language-switch a {
  font-weight: 600;
}

.home-language-switch a:hover {
  text-decoration: underline;
}

/* =========================================================
   OTTIAQ WEBSITE DISCLAIMER
   ========================================================= */
.ottiaq-disclaimer {
  width: min(1340px, calc(100% - 48px));
  margin: 8px auto 0;
  padding-bottom: 10px;
  text-align: center;
  font-size: 10px;
  line-height: 1.4;
  color: #52616d;
}

/* =========================================================
   REQUEST A QUOTE — INLINE CTA + THIN BLUE INFORMATION BAND
   ========================================================= */
.quote-inline-cta {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.quote-inline-cta .btn {
  margin: 0;
}

.process.quote-band {
  padding: 18px 0 20px;
  background: #07345f;
  color: #fff;
}

.quote-band .quote-band-title,
.quote-band .quote-band-text,
.quote-band .confidential {
  color: #fff;
}

.quote-band-inner {
  width: min(1340px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
}

.quote-band-title {
  margin: 0;
  white-space: nowrap;
}

.quote-band-text {
  max-width: none;
  margin: 0;
  line-height: 1.42;
}

.quote-band .confidential {
  margin: 0;
  text-align: right;
  white-space: nowrap;
  line-height: 1.35;
}

.proof-grid.testimonials-only {
  grid-template-columns: 1fr !important;
}

.proof-grid.testimonials-only > div {
  width: 100%;
}

@media (max-width: 1000px) {
  .quote-band-inner {
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: center;
  }

  .quote-band-title,
  .quote-band-text,
  .quote-band .confidential {
    white-space: normal;
    text-align: center;
  }
}

/* =========================================================
   HOMEPAGE LAYOUT FIXES
   ---------------------------------------------------------
   These rules fix:
   1. The "MSPRs and letters of recommendation" card
      so a hard line break does not strand "of".
   2. The fourth "Why Choose My Services?" heading so
      manual line breaks do not create an uneven layout.
   3. All four "Why Choose" headings occupy the same
      vertical space, keeping the descriptions aligned.
   ========================================================= */

/* ---------------------------------------------------------
   DOCUMENTS — MSPRs / LETTERS OF RECOMMENDATION
   --------------------------------------------------------- */

/* Let this card wrap naturally instead of forcing a break
   before "of recommendation". */
.document-grid .doc-card:nth-child(5) br {
  display: none;
}

.document-grid .doc-card:nth-child(5) {
  line-height: 1.35;
}

/* ---------------------------------------------------------
   WHY CHOOSE MY SERVICES
   --------------------------------------------------------- */

/* Do not force awkward manual line breaks in the fourth
   heading. Let the browser wrap the text naturally. */
.why-grid .why-card:nth-child(4) strong br {
  display: none;
}

/* Give every heading the same vertical space so that all
   four description paragraphs begin at the same height. */
.why-card strong {
  display: block;
  min-height: 3.6em;
  margin-bottom: 6px;
  color: var(--navy);
  font-size: .9rem;
  line-height: 1.2;
}

/* Keep the body copy aligned consistently. */
.why-card span {
  display: block;
  text-align: left;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.35;
}

/* ---------------------------------------------------------
   OPTIONAL: KEEP THE MSPR PHRASE TOGETHER WHEN POSSIBLE
   --------------------------------------------------------- */

/* Prevent "of recommendation" from being split apart if
   the available width permits it. */
.document-grid .doc-card:nth-child(5) {
  overflow-wrap: normal;
  word-break: normal;
}

/* =========================================================
   STATIC HOMEPAGE — APPROVED HERO
   Headline + credentials | bilingual seal
   ========================================================= */

body.static-homepage .hero {
  position: relative;
  z-index: 1;
  overflow: hidden;
  height: auto;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body.static-homepage .hero .guilloche {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none;
}

body.static-homepage .hero-wrap {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 120px), 1060px);
  max-width: 1060px;
  margin-inline: auto;
  padding: 0 0 64px;
  box-sizing: border-box;
}

body.static-homepage .hero-grid-simple {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  column-gap: 24px;
  align-items: start;
}

body.static-homepage .hero-copy-cell {
  min-width: 0;
  padding-top: 95px;
}
body.static-homepage .hero-seo-intro {
  max-width: 650px;
}

body.static-homepage .hero-title {
  width: 100%;
  max-width: 720px;
  margin: 0;
  padding: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 4vw, 4.15rem);
  line-height: .92;
  letter-spacing: -.038em;
}

body.static-homepage .hero-title .hero-line {
  display: block;
  line-height: .92;
  white-space: nowrap;
}

body.static-homepage .hero-title-desktop { display: block; }
body.static-homepage .hero-title-mobile { display: none; }

body.static-homepage .trust-row {
  width: 100%;
  margin-top: 36px;
  margin-bottom: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
}

body.static-homepage .trust-item {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 10px;
  padding: 0 18px 0 0;
  margin: 0 18px 0 0;
  min-width: 0;
  color: var(--navy);
  font-size: .95rem;
  line-height: 1.15;
  font-weight: 700;
  white-space: nowrap;
}

body.static-homepage .trust-item + .trust-item {
  border-left: 1px solid var(--border);
  padding-left: 18px;
}

body.static-homepage .trust-item:first-child { padding-left: 0; }

body.static-homepage .trust-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--navy);
  border-radius: 50%;
  color: var(--navy);
  font-size: .78rem;
  line-height: 1;
  box-sizing: border-box;
}

body.static-homepage .hero-grid-simple .ottiaq-logo-wrap {
  width: 38px;
  height: 38px;
  min-width: 38px;
  max-width: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.static-homepage .hero-grid-simple .ottiaq-logo {
  display: block;
  width: 38px;
  height: 38px;
  min-width: 38px;
  max-width: 38px;
  object-fit: contain;
}

body.static-homepage .hero-logo-cell {
  width: 310px;
  height: 310px;
  padding-top: 62px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
}

body.static-homepage .hero-brand-logo {
  display: block;
  width: 310px;
  height: 310px;
  min-width: 310px;
  max-width: 310px;
  margin: 0;
  padding: 0;
  object-fit: contain;
  position: static;
  transform: translateX(-80px);
}

@media (max-width: 1100px) and (min-width: 761px) {
  body.static-homepage .hero-wrap {
    width: min(calc(100% - 60px), 1060px);
    padding-bottom: 42px;
  }
  body.static-homepage .hero-grid-simple {
    grid-template-columns: minmax(0, 1fr) 250px;
    column-gap: 24px;
  }
  body.static-homepage .hero-copy-cell { padding-top: 0; }
  body.static-homepage .hero-title {
    max-width: 100%;
    font-size: clamp(2.7rem, 5vw, 3.7rem);
  }
  body.static-homepage .hero-logo-cell {
    width: 250px;
    height: 250px;
    padding-top: 0;
  }
  body.static-homepage .hero-brand-logo {
    width: 250px;
    height: 250px;
    min-width: 250px;
    max-width: 250px;
    transform: none;
  }
}

@media (max-width: 760px) {
  body.static-homepage .hero-wrap {
    width: calc(100% - 30px);
    max-width: none;
    padding-top: 64px;
    padding-bottom: 64px;
  }
  body.static-homepage .hero-grid-simple {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
  body.static-homepage .hero-copy-cell {
    padding-top: 0;
    width: 100%;
  }
  body.static-homepage .hero-title-desktop { display: none; }
  body.static-homepage .hero-title-mobile {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: clamp(1.95rem, 8.5vw, 3rem);
    line-height: .96;
    letter-spacing: -.03em;
    white-space: normal;
    overflow: visible;
    overflow-wrap: normal;
    word-break: normal;
  }
  body.static-homepage .hero-title-mobile br { display: block; }
  body.static-homepage .trust-row {
    width: 100%;
    margin-top: 22px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
  }
  body.static-homepage .trust-item,
  body.static-homepage .trust-item + .trust-item,
  body.static-homepage .trust-item:last-child {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    white-space: normal;
  }
  body.static-homepage .hero-logo-cell {
    width: 100%;
    height: auto;
    padding: 0;
    justify-content: center;
  }
  body.static-homepage .hero-brand-logo {
    width: min(62vw, 250px);
    height: min(62vw, 250px);
    min-width: 0;
    max-width: 250px;
    transform: none;
  }
}

@media (max-width: 480px) {
  .home-brand-inner { width: calc(100% - 30px); }
  .home-brand-name { font-size: 16px; }
  .home-brand-credential { font-size: 10px; }
  .home-language-switch { font-size: .78rem; }
}

/* =========================================================
   V17 — MOBILE HERO CORRECTIONS
   ---------------------------------------------------------
   Keep the approved desktop composition unchanged.
   Mobile-only fixes:
   1. Allow French hero lines to wrap inside the viewport.
   2. Use the same mobile headline scale as English.
   3. Reduce the excessive gap below the bilingual logo.
   ========================================================= */
@media (max-width: 760px) {
  body.static-homepage .hero-title {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(1.95rem, 8.5vw, 3rem) !important;
    line-height: .96 !important;
    letter-spacing: -.03em !important;
    overflow: visible !important;
  }

  body.static-homepage .hero-title .hero-line-french {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: .96 !important;
  }

  body.static-homepage .hero-wrap {
    padding-top: 64px;
    padding-bottom: 28px !important;
  }
}

/* =========================================================
   V18 — MOBILE HERO FINAL ALIGNMENT
   ---------------------------------------------------------
   Desktop is intentionally untouched.
   Mobile-only corrections:
   1. Keep the French headline fully inside the viewport.
   2. Keep the approved mobile title scale controlled.
   3. End the hero only a few pixels below the seal ribbon,
      matching the approved desktop relationship.
   ========================================================= */
@media (max-width: 760px) {
  body.static-homepage .hero-title {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body.static-homepage .hero-title .hero-line-french {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    font-size: clamp(1.85rem, 8vw, 2.65rem) !important;
    line-height: .94 !important;
  }

  /* Match the seal-to-next-section breathing room to desktop. */
  body.static-homepage .hero-wrap {
    padding-top: 64px !important;
    padding-bottom: 6px !important;
  }
}


/* Keep the clickable MSPR/DREM card free of hyperlink underlining. */
.document-grid a.doc-card-link,
.document-grid a.doc-card-link:visited,
.document-grid a.doc-card-link:hover,
.document-grid a.doc-card-link:active {
  color: inherit;
  text-decoration: none;
}

/* Keyboard focus for the clickable MSPR/DREM card.
   The existing .doc-card:hover rule already supplies the hover effect. */
.document-grid .doc-card-link:focus-visible {
  outline: 3px solid var(--teal-dark);
  outline-offset: 3px;
  position: relative;
  z-index: 1;
}


/* =========================================================
   ABOUT SECTION TAGLINE
   Placed directly below the personal-introduction heading.
   ========================================================= */
body.static-homepage .about-translation-tagline {
  margin-top: 22px;
}

body.static-homepage .about-tagline-rule {
  display: block;
  width: 46px;
  height: 2px;
  margin: 0 0 16px;
  background: #e7b93f;
}

body.static-homepage .about-translation-tagline p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.15rem, 1.45vw, 1.55rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
}

body.static-homepage .about-translation-tagline p span {
  display: block;
}

@media (max-width: 760px) {
  body.static-homepage .about-translation-tagline {
    margin-top: 16px;
  }

  body.static-homepage .about-tagline-rule {
    margin-bottom: 12px;
  }

  body.static-homepage .about-translation-tagline p {
    font-size: clamp(1.05rem, 4.6vw, 1.3rem);
  }
}

/* =========================================================
   PERSONAL INTRODUCTION SECTION — LAYOUT + PHOTO SIZING
   Explicitly scoped to the static homepage so theme styles
   cannot make the portrait expand to its intrinsic width.
   ========================================================= */
body.static-homepage .about-translation {
  position: relative;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  padding: 38px 0 28px;
}

body.static-homepage .about-translation-inner {
  width: min(calc(100% - 88px), 1600px) !important;
  max-width: 1600px !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: minmax(300px, 0.82fr) 220px minmax(0, 2fr);
  align-items: center;
  column-gap: 42px;
  row-gap: 24px;
}

body.static-homepage .about-translation-heading {
  min-width: 0;
}

body.static-homepage .about-eyebrow {
  margin: 0 0 14px;
  color: var(--teal-dark);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.19em;
  line-height: 1.3;
}

body.static-homepage .about-translation-heading h2 {
  margin: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 2.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
  overflow-wrap: normal;
}

body.static-homepage .about-translation-photo {
  display: block !important;
  width: 220px !important;
  max-width: 220px !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 204 / 261;
  object-fit: cover;
  object-position: center 35%;
  border-radius: 11px;
  justify-self: center;
  transform: translateX(-8px);
}

body.static-homepage .about-translation-copy {
  min-width: 0;
  padding-left: 42px;
  border-left: 1px solid var(--border);
  color: var(--muted);
  font-size: clamp(1rem, 1.22vw, 1.28rem);
  line-height: 1.52;
}

body.static-homepage .about-translation-copy p {
  margin: 0 0 16px;
}

body.static-homepage .about-translation-copy p:last-child {
  margin-bottom: 0;
}

body.static-homepage .about-translation-tagline {
  margin-top: 22px;
}

body.static-homepage .about-tagline-rule {
  display: block;
  width: 46px;
  height: 2px;
  margin: 0 0 16px;
  background: #e7b93f;
}

body.static-homepage .about-translation-tagline p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.12rem, 1.45vw, 1.55rem);
  font-weight: 400;
  line-height: 1.35;
}

body.static-homepage .about-translation-tagline p span {
  display: block;
}

@media (max-width: 1100px) {
  body.static-homepage .about-translation-inner {
    width: min(calc(100% - 48px), 920px) !important;
    grid-template-columns: minmax(0, 1fr) 190px;
    column-gap: 30px;
  }

  body.static-homepage .about-translation-photo {
    width: 200px !important;
    max-width: 200px !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 204 / 261;
    transform: none;
  }

  body.static-homepage .about-translation-copy {
    grid-column: 1 / -1;
    padding: 22px 0 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 700px) {
  body.static-homepage .about-translation {
    padding: 30px 0 26px;
  }

  body.static-homepage .about-translation-inner {
    width: min(calc(100% - 32px), 520px) !important;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 22px;
  }

  body.static-homepage .about-translation-heading h2 {
    font-size: clamp(2rem, 8vw, 2.55rem);
    max-width: 14ch;
  }

  body.static-homepage .about-translation-photo {
    width: min(220px, 60vw) !important;
    max-width: 220px !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 204 / 261;
    justify-self: start;
    transform: none;
  }

  body.static-homepage .about-translation-copy {
    grid-column: auto;
    padding: 20px 0 0;
    border-top: 1px solid var(--border);
    border-left: 0;
    font-size: 1rem;
  }

  body.static-homepage .about-translation-tagline {
    margin-top: 17px;
  }

  body.static-homepage .about-tagline-rule {
    margin-bottom: 12px;
  }

  body.static-homepage .about-translation-tagline p {
    font-size: clamp(1.08rem, 4.8vw, 1.28rem);
  }
}


/* Align the personal-introduction heading with the hero headline's left edge.
   This changes only the heading column; the section margins, portrait, and copy stay put. */
@media (min-width: 1101px) {
  body.static-homepage .about-translation-heading {
    padding-left: 82px;
    box-sizing: border-box;
  }
}

@media (max-width: 1100px) {
  body.static-homepage .about-translation-heading {
    padding-left: 0;
  }
}


/* Refine the four-column "Why Choose" section */
@media (min-width: 701px) {
  .why-grid .why-card {
    padding-left: 8px;
    padding-right: 8px;
  }

 

/* Refine the Why Choose / Documents two-column layout */
@media (min-width: 1001px) {
  .split-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 28px;
  }

  /* Give the four feature columns more usable width */
  .why-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .why-grid .why-card {
    padding-left: 10px;
    padding-right: 10px;
    min-width: 0;
  }

  /* Keep headings prominent and centered, allowing them to wrap */
  .why-grid .why-card strong {
    display: block;
    font-size: 0.9rem;
    line-height: 1.3;
    text-align: center;
    letter-spacing: -0.02em;
    white-space: normal;
    overflow-wrap: normal;
    min-height: 2.6em;
    max-width: 100%;
  }

  /* Preserve readable, left-aligned descriptions */
  .why-grid .why-card span {
    font-size: 0.82rem;
    line-height: 1.35;
    text-align: left;
  }
}
.institutional-acceptance {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}