/* ==========================================================================
   Homepage — "Corporate Trust" (design 3, chosen 2026-08-22)
   ==========================================================================

   Loaded ONLY on the homepage, via @push('head') in public/home.blade.php.

   EVERY rule is scoped under `.home3`, deliberately. Fifteen of this design's
   class names collide with site.css — .btn, .hero, .faq, .svc, .tst, .chip,
   .eyebrow and others — and site.css styles those for the whole site. Loading
   this unscoped would silently restyle buttons, heroes, testimonials and FAQs
   on services, about, contact and the property pages.

   The design tokens are also scoped rather than merged into :root. Most match
   site.css exactly (the brand maroon, the gold, Manrope + IBM Plex Sans
   Arabic), but --brand-50 and --gold-50 differ in value between the two, so
   promoting them globally would shift tints site-wide.

   The header and footer rules from the original preview are NOT ported. Those
   were stand-ins so the preview could be viewed standalone; the real site has
   its own header/footer partials in the shared layout, already on-brand.
   ========================================================================== */

.home3 {
  /* Same brand values as site.css. */
  --brand: #750F2A;
  --brand-700: #5E0C22;
  --gold: #A8802C;

  /* These two DIFFER from site.css — hence the scope. */
  --brand-50: #FBEFF2;
  --brand-100: #F6DCE3;
  --gold-50: #F7EFDD;

  --soft: #F5F4F6;
  --ink: #1E1A1C;
  --txt: #4A4348;
  --mut: #8A8288;
  --line: #EAE7E9;

  /* Plus Jakarta Sans is added by the layout's font link for this design. */
  --disp: 'Plus Jakarta Sans', system-ui, sans-serif;
  --sans: 'Manrope', system-ui, sans-serif;
  --ar: 'IBM Plex Sans Arabic', sans-serif;

  --sh: 0 4px 14px rgba(30, 26, 28, .06);
  --sh-lg: 0 20px 50px rgba(30, 26, 28, .12);

  color: var(--txt);
  font-family: var(--sans);
  line-height: 1.65;
}

[dir=rtl] .home3 { font-family: var(--ar); }

/* --------------------------------------------------------------------------
   Neutralise site.css, which still applies here.

   Scoping this file under .home3 stops it leaking OUT to other pages. It does
   NOT stop site.css leaking IN — every colliding class it defines still
   matches inside .home3, and any property this file does not itself set will
   bleed through.

   That is not hypothetical: site.css sets `.hero` to a dark maroon-to-black
   gradient with white text, so the new hero rendered near-black with dark
   maroon headings on top of it — illegible. The rules below reset exactly the
   properties site.css sets that this design does not otherwise override.
   -------------------------------------------------------------------------- */

.home3 .hero {
  /* site.css: dark radial gradient + color:#fff */
  background: none;
  color: var(--txt);
}
.home3 .hero h1,
.home3 .hero h2 { color: var(--ink); }
.home3 .hero p { color: var(--txt); }

.home3 .chip {
  /* site.css: white pill with an inset border — this design wants plain text */
  background: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

.home3 .faq {
  /* site.css treats .faq as the <details> itself and gives it a bottom border;
     here .faq is the grid wrapper around them. */
  border-bottom: 0;
}

.home3 .svc {
  /* site.css adds an inset 1px ring; this design uses a real border instead,
     and the two together read as a double edge. */
  box-shadow: none;
}
.home3 .svc:hover { box-shadow: var(--sh-lg); }

.home3 h1, .home3 h2, .home3 h3, .home3 h4 {
  font-family: var(--disp);
  color: var(--ink);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
}
[dir=rtl] .home3 h1, [dir=rtl] .home3 h2,
[dir=rtl] .home3 h3, [dir=rtl] .home3 h4 { font-family: var(--ar); }

.home3 img { display: block; max-width: 100%; }
.home3 a { color: inherit; text-decoration: none; }

.home3 .wrap { max-width: 1200px; margin-inline: auto; padding-inline: 32px; }

.home3 .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand);
  background: var(--brand-50); padding: 7px 14px; border-radius: 999px;
}
[dir=rtl] .home3 .eyebrow { letter-spacing: .04em; }

/* --- buttons ------------------------------------------------------------ */

.home3 .btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 700; font-size: 14.5px;
  height: 52px; padding-inline: 26px; border-radius: 12px;
  border: 1.5px solid transparent; cursor: pointer; transition: .22s;
}
[dir=rtl] .home3 .btn { font-family: var(--ar); }
.home3 .btn svg { width: 18px; height: 18px; }
.home3 .btn--fill { background: var(--brand); color: #fff; }
.home3 .btn--fill:hover { background: var(--brand-700); box-shadow: var(--sh-lg); transform: translateY(-2px); }
.home3 .btn--soft { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--sh); }
.home3 .btn--soft:hover { border-color: var(--brand); color: var(--brand); }
[dir=rtl] .home3 .rtl-flip { transform: scaleX(-1); }
.home3 .ico { width: 24px; height: 24px; }

/* --- hero --------------------------------------------------------------- */

.home3 .hero { position: relative; overflow: hidden; padding-block: 72px 84px; }
.home3 .hero::before {
  content: ""; position: absolute; top: -160px; inset-inline-end: -120px;
  width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, var(--brand-50), transparent 68%); z-index: 0;
}
.home3 .hero__grid {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
.home3 .hero h1 { font-size: clamp(42px, 5.6vw, 74px); font-weight: 800; margin-top: 24px; }
.home3 .hero h1 span { color: var(--brand); }
.home3 .hero p { font-size: 19px; max-width: 46ch; margin-top: 24px; }
.home3 .hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.home3 .hero__chips { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 34px; }
.home3 .chip { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--ink); }
.home3 .chip svg { width: 20px; height: 20px; color: var(--brand); }
.home3 .hero__art { position: relative; height: 520px; }
.home3 .hero__art img { position: absolute; border-radius: 20px; box-shadow: var(--sh-lg); object-fit: cover; }
.home3 .hero__art .a1 { width: 70%; height: 100%; inset-inline-end: 0; top: 0; }
.home3 .hero__art .a2 { width: 46%; height: 44%; inset-inline-start: 0; bottom: 36px; border: 5px solid #fff; }
.home3 .hero__badge {
  position: absolute; top: 26px; inset-inline-start: -10px; background: #fff;
  border-radius: 16px; box-shadow: var(--sh-lg); padding: 16px 20px;
  display: flex; align-items: center; gap: 14px; z-index: 2;
}
.home3 .hero__badge b { font-family: var(--disp); font-size: 26px; color: var(--brand); display: block; line-height: 1; }
.home3 .hero__badge span { font-size: 12px; color: var(--mut); }
.home3 .hero__badge .ic {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--gold-50); color: var(--gold); display: grid; place-items: center;
}
.home3 .hero__badge .ic svg { width: 24px; height: 24px; }
@media (max-width: 900px) {
  .home3 .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .home3 .hero__art { height: 400px; }
}

/* --- stats -------------------------------------------------------------- */

.home3 .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.home3 .stcard { background: var(--soft); border-radius: 18px; padding: 28px; }
.home3 .stcard b {
  font-family: var(--disp); font-size: clamp(30px, 3vw, 40px);
  color: var(--brand); font-weight: 800; display: block; line-height: 1;
}
.home3 .stcard span { font-size: 14px; color: var(--txt); margin-top: 8px; display: block; }
@media (max-width: 720px) { .home3 .stats { grid-template-columns: repeat(2, 1fr); } }

/* --- section scaffolding ------------------------------------------------ */

.home3 .blk { padding-block: 92px; }
.home3 .blk--flush { padding-top: 0; }
.home3 .blk--soft { background: var(--soft); }
.home3 .head { max-width: 640px; }
.home3 .head h2 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; margin-top: 16px; }
.home3 .head p { font-size: 18px; margin-top: 16px; }
.home3 .head--c { margin-inline: auto; text-align: center; }

/* --- services ----------------------------------------------------------- */

.home3 .svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.home3 .svc {
  background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 30px;
  display: flex; flex-direction: column; gap: 14px; transition: .25s;
}
.home3 .svc:hover { box-shadow: var(--sh-lg); transform: translateY(-4px); border-color: transparent; }
.home3 .svc__ic {
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--brand-50); color: var(--brand); display: grid; place-items: center;
}
.home3 .svc__ic svg { width: 28px; height: 28px; }
.home3 .svc h3 { font-size: 19px; font-weight: 700; }
.home3 .svc p { font-size: 14.5px; }
.home3 .svc__more {
  margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center;
  gap: 7px; font-weight: 700; font-size: 13.5px; color: var(--brand);
}
.home3 .svc__more svg { width: 15px; height: 15px; }
@media (max-width: 980px) { .home3 .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .home3 .svc-grid { grid-template-columns: 1fr; } }

/* --- why panel ---------------------------------------------------------- */

.home3 .why__panel {
  background: var(--brand); border-radius: 28px; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; color: #fff;
}
.home3 .why__txt { padding: 56px 48px; }
.home3 .why__panel .eyebrow { background: rgba(255, 255, 255, .14); color: #fff; }
.home3 .why__panel h2 { color: #fff; font-size: clamp(28px, 3.4vw, 42px); margin-top: 16px; }
.home3 .why__panel p { color: rgba(255, 255, 255, .84); font-size: 17px; margin-top: 16px; }
.home3 .why__list { margin-top: 26px; display: grid; gap: 14px; list-style: none; padding: 0; }
.home3 .why__list li { display: flex; gap: 12px; align-items: flex-start; color: #fff; font-size: 16px; }
.home3 .why__list svg { width: 22px; height: 22px; color: var(--gold); flex: none; margin-top: 2px; }
.home3 .why__img { background-size: cover; background-position: center; min-height: 360px; }
@media (max-width: 900px) {
  .home3 .why__panel { grid-template-columns: 1fr; }
  .home3 .why__img { min-height: 240px; }
}

/* --- testimonials ------------------------------------------------------- */

.home3 .tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.home3 .tst { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 30px; box-shadow: var(--sh); }
.home3 .tst__stars { display: flex; gap: 3px; color: var(--gold); margin-bottom: 14px; }
.home3 .tst__stars svg { width: 18px; height: 18px; }
.home3 .tst p { font-size: 15.5px; color: var(--ink); }
.home3 .tst__who { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.home3 .tst__ava {
  width: 44px; height: 44px; border-radius: 50%; background: var(--brand-50);
  color: var(--brand); display: grid; place-items: center; font-weight: 800; overflow: hidden;
}
.home3 .tst__ava img { width: 100%; height: 100%; object-fit: cover; }
.home3 .tst__who b { color: var(--ink); font-weight: 700; display: block; }
.home3 .tst__who small { color: var(--mut); }
@media (max-width: 900px) { .home3 .tgrid { grid-template-columns: 1fr; } }

/* --- client logos ------------------------------------------------------- */

.home3 .logos {
  display: flex; flex-wrap: wrap; gap: 18px 44px;
  align-items: center; justify-content: center; margin-top: 40px;
}
.home3 .logos .cell { height: 42px; display: flex; align-items: center; filter: grayscale(1); opacity: .6; transition: .3s; }
.home3 .logos .cell:hover { filter: none; opacity: 1; }
.home3 .logos img { max-height: 42px; }
.home3 .logos span { font-family: var(--disp); font-size: 19px; color: var(--ink); }

/* --- FAQ ---------------------------------------------------------------- */

.home3 .faq { max-width: 820px; margin: 44px auto 0; display: grid; gap: 12px; }
.home3 .faq details { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 20px 24px; }
.home3 .faq details[open] { border-color: var(--brand-100); background: var(--brand-50); }
.home3 .faq summary {
  font-family: var(--disp); font-size: 17px; color: var(--ink); cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; gap: 20px; font-weight: 700;
}
[dir=rtl] .home3 .faq summary { font-family: var(--ar); }
.home3 .faq summary::-webkit-details-marker { display: none; }
.home3 .faq summary::after { content: "+"; color: var(--brand); font-size: 24px; line-height: 1; transition: .25s; }
.home3 .faq details[open] summary::after { transform: rotate(45deg); }
.home3 .faq .a { margin-top: 14px; font-size: 16px; }

/* --- closing CTA -------------------------------------------------------- */

.home3 .cta__box { background: var(--brand); border-radius: 28px; padding: 64px 48px; text-align: center; color: #fff; }
.home3 .cta__box h2 { color: #fff; font-size: clamp(28px, 3.6vw, 46px); }
.home3 .cta__box p {
  color: rgba(255, 255, 255, .84); font-size: 18px;
  margin-top: 16px; max-width: 52ch; margin-inline: auto;
}
.home3 .cta__row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.home3 .cta__box .btn--fill { background: #fff; color: var(--brand); }
.home3 .cta__box .btn--fill:hover { background: var(--gold-50); }
.home3 .cta__box .btn--soft { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.home3 .cta__box .btn--soft:hover { background: rgba(255, 255, 255, .12); }

/* Respect users who ask for less motion — the design leans on hover lifts. */
@media (prefers-reduced-motion: reduce) {
  .home3 .btn, .home3 .svc, .home3 .logos .cell { transition: none; }
  .home3 .btn--fill:hover, .home3 .svc:hover { transform: none; }
}