/* =========================================================
   Nexus Business Center
   Desktop values are taken 1:1 from the Figma frames (1440px).
   Tablet/mobile rules follow each group of sections.

   Layout uses logical properties (margin-inline-start, inset-inline-end,
   text-align: start ...) so the same CSS works for a right-to-left
   Arabic version: set <html lang="ar" dir="rtl"> (see the RTL block at
   the end for the few things that need mirroring by hand).
   ========================================================= */

:root {
  /* Colors (from Figma) */
  --maroon: #700030;        /* primary buttons, headings */
  --maroon-2: #790425;      /* top bar, hero outline button */
  --maroon-3: #7a0626;      /* active nav underline */
  --maroon-dark: #510727;   /* footer bottom bar */
  --ink: #252b42;           /* main text */
  --ink-2: #0c0c0c;         /* hero sub-heading */
  --body: #3d3737;          /* section intro text */
  --muted: #737373;         /* secondary text */
  --card-ink: #2f2d2d;      /* amenity labels */
  --soft: #fafafa;          /* light section background */
  --line: #ccc5c5;          /* header divider */
  --divider: #938f8f;       /* find-us divider */
  --copy: #c9c9c9;          /* copyright */

  --icon-accent: var(--maroon);

  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --container: 1200px;
  --gutter: 24px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, p, address, figure, blockquote { margin: 0; font-style: normal; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }

.container { width: min(var(--container), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.nobr { white-space: nowrap; } /* keeps hyphenated words like "Wi-Fi" together */

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; inset-inline-start: 16px; top: -100px; z-index: 100;
  padding: 10px 16px; background: var(--maroon); color: #fff; border-radius: 6px;
}
.skip-link:focus { top: 16px; }

:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: #fff; }

/* Icons (inline SVG, Solar set, same as the design) */
.ic { display: block; flex: none; width: 24px; height: 24px; }
.ic [stroke] { vector-effect: non-scaling-stroke; }
.ic--16 { width: 16px; height: 16px; }
.ic--20 { width: 20px; height: 20px; }
.ic--22 { width: 22px; height: 22px; }
.ic--23 { width: 23px; height: 23px; }
.ic--26 { width: 26px; height: 26px; }
.ic--32 { width: 32px; height: 32px; }
.ic--34 { width: 34px; height: 34px; }
.ic--35 { width: 35px; height: 35px; }
.ic--40 { width: 40px; height: 40px; }
.ic--41 { width: 41px; height: 41px; }
.ic--50 { width: 50px; height: 50px; }
.ic--52 { width: 52px; height: 52px; }

/* Cropped images – reproduces the Figma masks. The image keeps its own
   left/top offsets in both reading directions (photos are never mirrored). */
.crop { position: relative; display: block; overflow: hidden; }
.crop > img { position: absolute; max-width: none; object-fit: cover; }
/* Placeholder shown by build.py while a design photo is still missing */
.crop.crop > img[src$="pending.svg"] { inset: 0; width: 100%; height: 100%; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 500; letter-spacing: .2px; white-space: nowrap; text-align: center;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn--hero { font-size: 16px; line-height: 28px; padding: 10px 36px; border-radius: 37px; }
.btn--cta  { font-size: 15px; line-height: 28px; padding: 15px 40px; border-radius: 45px; }

.btn--solid { background: var(--maroon); color: #fff; }
.btn--solid:hover { background: var(--maroon-dark); }

/* Figma strokes are "inside", so borders are drawn with inset shadows to keep sizes identical */
.btn--outline { color: var(--maroon); box-shadow: inset 0 0 0 1px var(--maroon-2); }
.btn--outline:hover { background: var(--maroon); color: #fff; box-shadow: inset 0 0 0 1px var(--maroon); }
.btn--cta.btn--outline { font-size: 16px; box-shadow: inset 0 0 0 1px var(--maroon); }

.btn--light { font-size: 18px; color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.btn--light:hover { background: #fff; color: var(--maroon); }

.pill {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 60px; font-size: 16px; line-height: 24px; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.pill--outline { min-width: 147px; height: 40px; padding: 0 22px; color: var(--maroon); box-shadow: inset 0 0 0 1px var(--maroon); }
.pill--outline:hover, .pill--outline[aria-current="page"] { background: var(--maroon); color: #fff; }
.pill--solid { min-width: 162px; height: 48px; padding: 0 30px; background: var(--maroon); color: #fff; }
.pill--solid:hover { background: var(--maroon-dark); }
.pill--lg { height: 48px; }

/* =========================================================
   HEADER  (overlays the hero, 210px tall on desktop)
   ========================================================= */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; }

/* Top bar */
.topbar { height: 40px; background: var(--maroon-2); color: #fff; }
.topbar__inner { height: 100%; display: flex; align-items: center; justify-content: flex-end; }
.topbar__contacts { display: flex; align-items: center; gap: 30px; min-width: 0; }
.topbar__item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; line-height: 24px; letter-spacing: .2px; }
.topbar__item--mail { gap: 4.5px; }
.topbar__item--mail span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__item:hover span { text-decoration: underline; }
.lang {
  flex: none; margin-inline-start: 29px; height: 26px; padding-inline: 12px 5px;
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 3px; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
  font-size: 13px; line-height: 24px; color: #fff;
}

/* Main bar + workspace strip share the translucent white */
.header-main { background: rgba(255, 255, 255, .9); }
.navbar { position: relative; height: 88px; }
.navbar__inner { height: 80px; display: flex; align-items: center; }

.brand { flex: none; margin-inline-end: 37px; }
.brand__logo { width: 131px; height: auto; }

.menu { display: flex; align-items: center; }
.menu__links { display: flex; align-items: center; gap: 41px; }
.menu__links a { position: relative; display: block; font-size: 16px; line-height: 24px; color: #000; transition: color .15s ease; }
.menu__links a:hover, .menu__links a.is-active { color: var(--maroon); }
.menu__links a.is-active::after {
  content: ""; position: absolute; left: 1px; right: 1px; bottom: -4px; height: 2px; background: var(--maroon-3);
}
.menu__contact { margin-inline-start: 41px; }
.menu__tour { display: none; }
.tour { margin-inline-start: auto; }

.menu-toggle { display: none; }
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }

/* Workspace strip */
.subnav { display: block; height: 82px; padding-top: 14px; border-top: 1px solid var(--line); background: rgba(255, 253, 254, .6); }
.subnav__list {
  display: flex; justify-content: space-between; gap: 32px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__list a {
  position: relative; display: flex; flex-direction: column; align-items: center;
  white-space: nowrap; font-size: 16px; line-height: 32px; letter-spacing: .1px; color: var(--ink);
  transition: color .15s ease;
}
.subnav__list a:hover, .subnav__list a[aria-current="page"] { color: var(--maroon); }
.subnav__list a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 2px; background: var(--maroon-3);
}
.subnav__list .ic { color: var(--icon-accent); margin-bottom: -4px; }

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; height: 805px; overflow: hidden; background: var(--soft); }
.hero__bg {
  position: absolute; top: -10px; left: 0; max-width: none;
  width: calc(100% + 40px); height: calc(100% + 10px); object-fit: cover;
}
.hero__shade {
  position: absolute; top: -10px; bottom: 0; inset-inline-start: 0;
  width: calc(50% + 410px); max-width: 100%;
  background: linear-gradient(89.25deg, rgba(255, 255, 255, .9) 2.34%, rgba(255, 255, 255, .7) 47.55%, rgba(255, 255, 255, 0) 97.44%);
}
.hero__content { position: relative; padding-top: 326px; }
.hero__title {
  max-width: 760px; margin-block-end: -26px; /* two 80px lines; Figma text box is 134px */
  font-weight: 600; font-size: 57px; line-height: 80px; letter-spacing: .2px; color: var(--ink);
}
.hero__lead { max-width: 610px; margin-top: 25px; font-weight: 500; font-size: 20px; line-height: 30px; letter-spacing: .2px; color: var(--ink-2); }
.hero__tagline { display: block; }
.hero__actions { margin-top: 25px; display: flex; flex-wrap: wrap; gap: 10px; }

/* =========================================================
   SECTION HEADINGS
   Where Figma uses a line box shorter than the font (e.g. 40px text on
   24px), the CSS uses a normal line height and negative block margins,
   so the layout is identical but wrapped lines never overlap.
   ========================================================= */
.section-head { max-width: 680px; margin-inline: auto; text-align: center; }
.section-head__title { font-weight: 500; font-size: 40px; line-height: 57px; letter-spacing: .2px; color: var(--maroon); text-wrap: balance; }
.section-head__text { margin-top: 15px; font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: .2px; color: var(--body); }
.section-head--light .section-head__title,
.section-head--light .section-head__text { color: #fff; }
.section-head--light .section-head__text { line-height: 20px; }

/* =========================================================
   WHY NEXUS
   ========================================================= */
.why { padding: 70px 0 61px; }
.why__grid {
  margin-top: 36px;
  display: grid; grid-template-columns: minmax(0, 597px) minmax(0, 524px); column-gap: 70px; align-items: stretch;
  /* Figma: list column is 476px but its text rows run to 524px */
}
/* The photo grows with the list of 8 points (it is portrait, so at full height it is barely cropped) */
.why__media { min-height: 452px; }
.why__media img { inset: 0; width: 100%; height: 100%; object-position: 50% 63%; }

.features { display: flex; flex-direction: column; gap: 40px; }
.feature { display: flex; align-items: flex-start; gap: 20px; }
.feature .ic { color: var(--icon-accent); }
.feature__title { font-weight: 700; font-size: 16px; line-height: 24px; letter-spacing: .1px; color: var(--ink); }
.feature__text { margin-top: 5px; font-size: 16px; line-height: 24px; letter-spacing: .2px; color: var(--muted); }

/* =========================================================
   AMENITIES (home)
   ========================================================= */
.amenities { position: relative; overflow: hidden; min-height: 486px; padding: 62px 0 57px; color: #fff; }
.amenities__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 51% 88%; }
.amenities__overlay { position: absolute; inset: 0; background: rgba(112, 0, 48, .7); }
.amenities .container { position: relative; }

.amenity-list { margin-top: 47px; display: flex; gap: 20px; }
.amenity {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 40px; background: #fff; opacity: .9; text-align: center;
}
.amenity .ic { color: var(--icon-accent); }
.amenity__label { font-weight: 600; font-size: 18px; line-height: 24px; letter-spacing: .1px; color: var(--card-ink); white-space: nowrap; } /* one line at full width, as in Figma */
.amenities__cta { margin-top: 32px; display: flex; justify-content: center; }

/* =========================================================
   OTHER SERVICES
   ========================================================= */
.services { padding: 36px 0 70px; background: var(--soft); }
.services__title { margin-block: -6px; text-align: center; font-weight: 400; font-size: 28px; line-height: 36px; letter-spacing: .2px; color: var(--maroon); }
.services__grid { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
/* An odd last card (7 services) sits centred in its own row */
.services__grid > .service:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 10px); }

.service { min-height: 261px; padding-block: 35px 24px; padding-inline: 37px 20px; background: #fff; }
.service__title { margin-block: -3px; font-weight: 500; font-size: 24px; line-height: 30px; letter-spacing: .2px; color: #000; }
.service__body { margin-top: 13px; display: flex; align-items: flex-start; gap: 34px; }
.service__media { flex: none; width: 201px; aspect-ratio: 201 / 144; margin-block-start: 6px; margin-inline-start: 1px; }
.service__media img { width: 101%; height: 142.78%; left: -1%; top: var(--crop-y, -24.31%); }
.service__copy { flex: 1 1 auto; min-width: 0; max-width: 297px; }
.service__text { font-size: 16px; line-height: 24px; letter-spacing: .2px; color: #000; }

/* =========================================================
   FIND US  (home + contact)
   ========================================================= */
.findus { padding: 70px 0; }
.findus__title { margin-block: -12px; font-weight: 500; font-size: 40px; line-height: 48px; letter-spacing: .2px; color: var(--maroon); }
.findus__grid { display: grid; grid-template-columns: 604fr 2px 594fr; }
.findus__title + .findus__grid { margin-top: 27px; }

.findus__map { position: relative; aspect-ratio: 604 / 525; overflow: hidden; background: #eceaea; }
.findus__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.findus__divider { background: var(--divider); }

.findus__photo { min-height: 100%; }
.findus__photo > img { top: 0; right: 0; width: 138.85%; height: 100%; }

.info-card {
  position: absolute; inset-inline-end: 32px; bottom: 29px;
  width: 405px; min-height: 210px; padding: 38px 42px;
  background: rgba(0, 0, 0, .6); color: #fff;
}
.info-list { display: flex; flex-direction: column; gap: 10px; }
.info-item { display: flex; align-items: flex-start; gap: 10px; font-size: 18px; line-height: 24px; letter-spacing: .2px; }
.info-item--addr { min-height: 57px; }
.info-item--phone { min-height: 29.25px; }
.info-item--mail { align-items: center; font-size: 17px; }
.info-item a { min-width: 0; overflow-wrap: anywhere; }
.info-item a:hover { text-decoration: underline; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer-cta { background: var(--soft); }
.footer-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 50px 0; }
.footer-cta__title { font-weight: 700; font-size: 27px; line-height: 32px; letter-spacing: .1px; color: var(--ink); }
.footer-cta__text { margin-top: 10px; font-weight: 500; font-size: 18px; line-height: 20px; letter-spacing: .2px; color: var(--muted); }
.footer-cta__actions { display: flex; flex-wrap: wrap; gap: 20px; }

.footer-main { padding: 50px 0 43px; background: var(--maroon); color: #fff; }
.footer-grid {
  display: grid; align-items: start;
  grid-template-columns: 238px 138px 223px 167px 294px; column-gap: 29px;
}
.footer-col { display: flex; flex-direction: column; gap: 20px; }
.footer-logo { width: 120px; height: auto; }
.footer-about { max-width: 163px; font-size: 14px; line-height: 24px; letter-spacing: .2px; }
.footer-title { display: block; font-weight: 700; font-size: 16px; line-height: 24px; letter-spacing: .1px; white-space: nowrap; }
.footer-title--spacer { visibility: hidden; }
.footer-links { display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 24px; letter-spacing: .2px; }
.footer-links a:hover, .contact-item a:hover { text-decoration: underline; }

.contact-list { width: 284px; padding-inline-start: 7px; display: flex; flex-direction: column; gap: 10px; }
.contact-item { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 24px; letter-spacing: .2px; }
.contact-item a { min-width: 0; overflow-wrap: anywhere; }
.contact-item--phone { min-height: 29.25px; }
.contact-item--addr { align-items: flex-start; }

.footer-bottom { background: var(--maroon-dark); color: var(--copy); }
.footer-bottom__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0 23px; }
.footer-copy { font-size: 14px; line-height: 24px; letter-spacing: .2px; }
.socials { display: flex; align-items: center; gap: 20px; color: #fff; }
.socials a { display: block; transition: opacity .15s ease; }
.socials a:hover { opacity: .8; }
.socials__img { width: 22px; height: 22px; object-fit: cover; }

/* WhatsApp button (the "OBJECTS" layer, sits half off the edge) */
.wa-float { position: fixed; top: 215px; inset-inline-end: -12px; z-index: 60; width: 79px; height: 63.817px; }
.wa-float img { width: 100%; height: 100%; }

/* =========================================================
   RESPONSIVE – home + shared
   ========================================================= */

/* Small desktop / large tablet */
@media (max-width: 1239px) {
  .subnav__list { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .why__grid { column-gap: 40px; }
  .amenity { padding-inline: 16px; }
  .amenity__label { white-space: normal; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1.1fr 1fr 1.9fr; column-gap: 24px; }
  .contact-list { width: auto; padding-inline-start: 0; }
}

@media (max-width: 1100px) {
  .menu__links { gap: 28px; }
  .menu__contact { margin-inline-start: 28px; }
  .services__grid { grid-template-columns: minmax(0, 1fr); }
  .services__grid > .service:last-child:nth-child(odd) { width: auto; justify-self: stretch; }
  .service__copy { max-width: none; }
}

/* Tablet */
@media (max-width: 991px) {
  /* Header: collapse the menu */
  .navbar { height: 72px; }
  .navbar__inner { height: 72px; }
  .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-inline: 12px -9px; color: var(--maroon);
  }
  .menu {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 5;
    display: none; flex-direction: column; align-items: flex-start;
    padding: 8px var(--gutter) 24px; background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 16px 32px rgba(37, 43, 66, .12);
  }
  .menu.is-open { display: flex; }
  .menu__links { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .menu__links a { padding: 14px 0; border-bottom: 1px solid #eee; }
  .menu__links a.is-active { font-weight: 500; }
  .menu__links a.is-active::after { display: none; }
  .menu__contact { margin: 20px 0 0; }

  /* Hero */
  .hero { height: auto; padding-bottom: 96px; }
  .hero__content { padding-top: 258px; }
  .hero__title { max-width: 560px; margin-block-end: 0; font-size: 44px; line-height: 56px; }
  .hero__lead { margin-top: 16px; font-size: 18px; line-height: 28px; }
  .hero__actions { margin-top: 28px; }
  .hero__shade { width: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .78) 60%, rgba(255, 255, 255, .4) 100%); }

  .section-head__title { font-size: 32px; line-height: 44px; }

  /* Why */
  .why { padding: 56px 0; }
  .why__grid { margin-top: 32px; grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .why__media { min-height: 0; aspect-ratio: 597 / 452; } /* the Figma crop */

  /* Amenities */
  .amenities { min-height: 0; padding: 56px 0; }
  .amenity-list { margin-top: 36px; flex-wrap: wrap; justify-content: center; }
  .amenity { flex: 0 0 calc((100% - 40px) / 3); }

  /* Services */
  .services { padding: 48px 0 56px; }

  /* Find us */
  .findus { padding: 56px 0; }
  .findus__title { margin-block: 0; font-size: 32px; line-height: 40px; }
  .findus__title + .findus__grid { margin-top: 24px; }
  .findus__grid { grid-template-columns: minmax(0, 1fr); }
  .findus__divider { height: 2px; }
  .findus__photo { min-height: 0; aspect-ratio: 594 / 525; }

  /* Footer */
  .footer-cta__inner { flex-direction: column; align-items: flex-start; padding: 40px 0; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .footer-col--brand, .footer-col--contact { grid-column: 1 / -1; }
  .footer-about { max-width: 320px; }
}

/* Mobile */
@media (max-width: 575px) {
  :root { --gutter: 16px; }

  /* Top bar: phone number + email icon only, so any email length fits */
  .topbar__contacts { gap: 16px; }
  .topbar__item { font-size: 13px; }
  .topbar__item--mail span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .lang { margin-inline-start: 12px; }

  .tour { display: none; }
  .menu-toggle { margin-inline-start: auto; }
  .menu__tour { display: inline-flex; margin-top: 12px; }

  .subnav__list { gap: 24px; }
  .subnav__list a { font-size: 14px; }

  .hero { padding-bottom: 72px; }
  .hero__content { padding-top: 234px; }
  .hero__title { font-size: 34px; line-height: 44px; }
  .hero__lead { font-size: 16px; line-height: 26px; }
  .hero__lead br { display: none; }
  .btn--hero { padding: 10px 28px; }

  .section-head__title { font-size: 28px; line-height: 38px; }

  .amenity-list { gap: 16px; }
  .amenity { flex-basis: calc((100% - 16px) / 2); padding: 20px 12px; }
  .amenity__label { font-size: 16px; }

  .services__title { margin-block: 0; font-size: 24px; line-height: 32px; }
  .services__grid { margin-top: 24px; gap: 16px; }
  .service { min-height: 0; padding: 24px 20px; }
  .service__title { margin-block: 0; font-size: 22px; line-height: 28px; }
  .service__body { flex-direction: column; gap: 16px; margin-top: 16px; }
  .service__media { width: 100%; margin: 0; }

  .findus__photo { aspect-ratio: 1 / 1; }
  .info-card { left: 16px; right: 16px; bottom: 16px; width: auto; min-height: 0; padding: 20px; }
  .info-item { font-size: 15px; line-height: 22px; }
  .info-item--addr, .info-item--phone { min-height: 0; }
  .info-item--mail { font-size: 15px; }

  .footer-cta__title { font-size: 22px; line-height: 30px; }
  .footer-cta__text { font-size: 16px; line-height: 24px; }
  .btn--cta { padding: 13px 28px; }

  .footer-main { padding: 40px 0 32px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .footer-col--company { grid-column: 1 / -1; }

  .footer-bottom__inner { flex-direction: column; padding: 16px 0 20px; text-align: center; }

  .wa-float { top: auto; bottom: 20px; inset-inline-end: -10px; width: 64px; height: 51.7px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* =========================================================
   INNER PAGES – shared
   ========================================================= */
.site-footer--bordered { border-top: 1px solid #a7a1a1; }
.page-hero--amenities { --bg-top: -260px; --hero-pt: 319px; --hero-tmb: -21px; }
.page-hero--gallery   { --bg-top: -100px; --hero-pt: 319px; --hero-tmb: -21px; }
.page-hero--faq       { --bg-top: -81px;  --hero-pt: 319px; --hero-tmb: -21px; }
.page-hero--contact   { --bg-top: -81px;  --hero-pt: 319px; --hero-tmb: -21px; }
.page-hero--workspace { --bg-top: -70px;  --hero-pt: 327px; --hero-tmb: -7px; }

.page-hero { position: relative; height: 624px; overflow: hidden; background: var(--soft); }
.page-hero__bg { position: absolute; left: 0; top: var(--bg-top, -240px); width: 100%; height: var(--bg-h, 954px); max-width: none; object-fit: cover; }
.page-hero__content { position: relative; padding-top: var(--hero-pt, 327px); }
.page-hero__title {
  max-width: var(--title-max, 760px);
  margin-block-end: var(--hero-tmb, -32px); /* Figma text box is shorter than the 80px line */
  font-weight: 600; font-size: 57px; line-height: 80px; letter-spacing: .2px; color: var(--ink);
}
.page-hero__lead {
  margin-top: 25px; max-width: var(--lead-max, 520px);
  font-family: 'Montserrat', var(--font); font-weight: 500; font-size: 20px; line-height: 30px; letter-spacing: .2px; color: var(--ink-2);
}
.page-hero__lead--wide { max-width: var(--lead-max, 528px); }
.page-hero__line { display: block; } /* a second sentence that always starts on its own line */

.title-left { font-weight: 500; font-size: 40px; line-height: 57px; letter-spacing: .2px; color: var(--maroon); }
.title-left--tight { margin-block: -16.5px; } /* Figma: 24px text box */
.section-head--sm .section-head__text { font-size: 14px; line-height: 20px; }

/* =========================================================
   ABOUT
   ========================================================= */
/* Chairman's message */
.chairman { padding: 70px 0; }
.chairman__grid {
  margin-top: 52px;
  display: grid; grid-template-columns: minmax(0, 693px) minmax(0, 461px); justify-content: space-between; column-gap: 46px; align-items: start;
}
.chairman__quote { padding: 36px 44px; background: #fff3f8; border-radius: 9px; text-align: center; }
.chairman__quote-text { font-weight: 500; font-size: 25px; line-height: 37px; letter-spacing: .2px; color: #000; }
.chairman__text { margin-top: 30px; padding-inline-start: 10px; font-size: 18px; line-height: 24px; letter-spacing: .2px; color: #000; }
.chairman__text p + p { margin-top: 24px; }

/* The photo is larger than the card in Figma; the card clips it so any photo stays inside the frame */
.chairman-card { position: relative; width: 100%; max-width: 461px; aspect-ratio: 461 / 676; overflow: hidden; border-radius: 20px; }
/* The message is longer than the photo card: on desktop the card stays in view while it is read */
@media (min-width: 992px) { .chairman-card { position: sticky; top: 32px; } }
.chairman-card::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border: 2px solid #cdcbcc; border-radius: 20px;
}
.chairman-card__photo { position: absolute; left: -2.386%; top: 3.254%; width: 116.7%; height: 77.66%; max-width: none; object-fit: cover; }
.chairman-card__info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  height: 180px; padding-top: 17px; background: #f8f8f8; text-align: center;
}
.chairman-card__name { font-weight: 600; font-size: 28px; line-height: 37px; letter-spacing: .2px; color: var(--maroon); }
.chairman-card__role { margin-top: -3px; font-weight: 600; font-size: 20px; line-height: 37px; letter-spacing: .2px; color: #000; }
.chairman-card__social { margin-top: 7px; display: flex; justify-content: center; gap: 9px; }
.soc33 { display: block; width: 33px; height: 33px; border-radius: 50%; transition: opacity .15s ease; }
.soc33:hover { opacity: .8; }
.soc33 img { width: 33px; height: 33px; }

/* About Nexus */
.about-intro { min-height: 573px; padding: 62px 0 75px; background: var(--soft); }
.about-intro__inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 21px; }
.about-intro__copy { flex: 0 1 591px; min-width: 0; }
.about-intro__text { margin-top: 15px; max-width: 568px; font-size: 16px; line-height: 28px; color: #373333; }
.about-intro__media { flex: 0 1 588px; margin-top: 72px; aspect-ratio: 588 / 336; }
.about-intro__media img { width: 124.15%; height: 183.33%; left: -12.93%; top: -26.49%; }

/* Our vision */
.vision { position: relative; overflow: hidden; min-height: 667px; padding: 70px 0 88px; }
.vision__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 43.5%; }
.vision__shade { position: absolute; inset: 0; background: linear-gradient(269.38deg, rgba(0, 0, 0, .48) 2.29%, rgba(0, 0, 0, 0) 95.13%); }
.vision .container { position: relative; }
.vision__panel { margin-inline-start: auto; max-width: 793px; min-height: 509px; padding: 37px 61px 44px; background: rgba(255, 255, 255, .85); }
.vision__text { margin-top: 15px; font-size: 16px; line-height: 28px; color: #373333; }
.vision__text + .vision__text { margin-top: 28px; } /* one blank line, as in Figma */

/* Clients feedback */
.feedback { padding: 60px 0 70px; background: var(--soft); }
.feedback__pager { margin-top: 10px; height: 37px; display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.feedback__count { margin-inline-end: 4px; font-size: 16px; line-height: 37px; letter-spacing: .2px; color: #6c6c6c; }
.feedback__btn { display: inline-flex; color: var(--maroon); }
.feedback__btn:disabled { cursor: default; }
.feedback__btn .ic-on, .feedback__btn:not(:disabled) .ic-off { display: none; }
.feedback__btn:not(:disabled) .ic-on { display: block; }
.feedback__track {
  margin-top: 5px;
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.feedback__track::-webkit-scrollbar { display: none; }
.testimonial {
  scroll-snap-align: start;
  display: flex; align-items: flex-start; gap: 20px;
  min-height: 204px; padding: 24px 28px 18px; background: #fff; border-radius: 3px;
  transition: box-shadow .15s ease;
}
.testimonial:hover, .testimonial:focus-within { box-shadow: inset 0 0 0 1px var(--maroon); }
.testimonial__avatar { flex: none; width: 63px; height: 63px; border-radius: 50%; object-fit: cover; }
.testimonial__body { min-width: 0; }
.testimonial__quote { min-height: 96px; font-size: 14px; line-height: 24px; letter-spacing: .2px; color: var(--muted); }
.testimonial__quote .q { font-size: 24px; line-height: 0; color: var(--maroon); }
.testimonial__name { margin-top: 5px; font-weight: 600; font-size: 18px; line-height: 37px; letter-spacing: .2px; color: var(--maroon); }
.testimonial__role { margin-top: -10px; font-size: 14px; line-height: 37px; letter-spacing: .2px; color: #000; }

/* ---------- Inner pages: responsive ---------- */
@media (max-width: 1239px) {
  .chairman__grid { column-gap: 32px; }
  .chairman__quote { padding: 32px; }
}

@media (max-width: 991px) {
  .page-hero { height: auto; padding-bottom: 80px; }
  .page-hero__bg { top: 0; height: 100%; }
  .page-hero__content { padding-top: 258px; }
  .page-hero__title { margin-block-end: 0; font-size: 44px; line-height: 56px; }
  .page-hero__lead { margin-top: 12px; font-size: 18px; line-height: 28px; }

  .title-left { font-size: 32px; line-height: 44px; }
  .title-left--tight { margin-block: 0; }

  .chairman { padding: 56px 0; }
  .chairman__grid { margin-top: 28px; grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .chairman-card { order: -1; justify-self: center; max-width: 400px; }
  .chairman__quote-text { font-size: 22px; line-height: 32px; }

  .about-intro { min-height: 0; padding: 56px 0; }
  .about-intro__inner { flex-direction: column; gap: 28px; }
  .about-intro__copy, .about-intro__media { flex: none; width: 100%; }
  .about-intro__media { margin-top: 0; }
  .about-intro__text { max-width: none; }

  .vision { min-height: 0; padding: 56px 0; }
  .vision__panel { max-width: none; min-height: 0; padding: 32px; }

  .feedback { padding: 56px 0; }
  .feedback__track { grid-auto-columns: calc((100% - 20px) / 2); }

  
}

@media (max-width: 575px) {
  .page-hero { padding-bottom: 64px; }
  .page-hero__content { padding-top: 234px; }
  .page-hero__title { font-size: 34px; line-height: 44px; }
  .page-hero__lead { font-size: 16px; line-height: 26px; }
  .page-hero__lead br { display: none; }

  .title-left { font-size: 28px; line-height: 38px; }

  .chairman__quote { padding: 24px 20px; }
  .chairman__quote-text { font-size: 19px; line-height: 29px; }
  .chairman__text { padding-inline-start: 0; font-size: 16px; line-height: 26px; }
  .chairman__text p + p { margin-top: 16px; }
  .chairman-card__info { height: 150px; padding-top: 12px; }
  .chairman-card__name { font-size: 22px; line-height: 32px; }
  .chairman-card__role { margin-top: -2px; font-size: 17px; line-height: 30px; }

  .vision__panel { padding: 24px 20px; }

  .feedback__pager { margin-top: 16px; }
  .feedback__track { grid-auto-columns: 100%; }
  .testimonial { padding: 20px; }
}

/* =========================================================
   AMENITIES PAGE
   ========================================================= */
.amenity-grid-section { padding: 69px 0 70px; background: var(--soft); }
.amenity-grid {
    margin-top: 41px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
.amenity-grid > .amenity-card:last-child:nth-child(3n+1) { grid-column: 2; } /* a single card in the last row sits in the middle */
.amenity-grid > .amenity-card {
    flex: 0 0 calc((100% - 28px) / 3);
    min-width: 0;
}

.amenity-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-height: 224px;
    padding: 20px 16px;
    background: #fff;
    text-align: center;
}
.amenity-card .ic { color: var(--icon-accent); }
.amenity-card__title { font-weight: 600; font-size: 18px; line-height: 27px; letter-spacing: .2px; color: #000; }
.amenity-card__text { max-width: 360px; font-size: 16px; line-height: 24px; letter-spacing: .2px; color: #000; }

.designed { padding: 70px 0 47px; }
.designed .section-head { max-width: 720px; } /* room for the one-line heading on every browser */
.designed__row { margin-top: 51px; display: flex; align-items: flex-start; gap: 40px; }
.designed__media { flex: 0 1 597px; aspect-ratio: 597 / 537; }
.designed__media img { width: 152.6%; height: 113.04%; left: -13.9%; top: -6.145%; }
.designed__copy { flex: 0 1 562px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 50px; }
.points { display: flex; flex-direction: column; gap: 50px; }
.point { display: flex; align-items: flex-start; gap: 20px; }
.point .ic { color: var(--icon-accent); }
.point__title { margin-block: -3px; font-weight: 700; font-size: 24px; line-height: 30px; letter-spacing: .1px; color: var(--ink); }
.point__text { margin-top: 5px; font-size: 18px; line-height: 24px; letter-spacing: .2px; color: var(--muted); }

.all-in-one { position: relative; overflow: hidden; min-height: 545px; padding: 68px 0 70px; }
.all-in-one__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 52%; }
.all-in-one .container { position: relative; }
.all-in-one__panel {
  margin-inline-start: auto; max-width: 709px; min-height: 407px; padding-block: 29px 58px; padding-inline: 49px 35px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
  background: rgba(255, 255, 255, .9);
}
.all-in-one__title { font-weight: 600; font-size: 28px; line-height: 42px; color: #000; }
.all-in-one__text { font-size: 16px; line-height: 28px; color: #373333; }

.perks-section { padding: 60px 0; }
.perks { margin-top: 52px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.perk { display: flex; align-items: flex-start; gap: 20px; min-height: 130px; padding: 24px 28px 18px; background: #fff; border-radius: 3px; }
.perk .ic { color: var(--icon-accent); }
.perk__title { font-weight: 700; font-size: 16px; line-height: 24px; letter-spacing: .1px; color: var(--ink); }
.perk__text { margin-top: 5px; max-width: 277px; font-size: 14px; line-height: 24px; letter-spacing: .2px; color: var(--muted); }

/* =========================================================
   GALLERY PAGE
   ========================================================= */
.gallery { padding: 40px 0 39px; }
.tabstrip { display: flex; align-items: center; gap: 12px; }
.tabstrip__arrow { flex: none; display: inline-flex; color: var(--muted); transition: color .15s ease, opacity .15s ease; }
.tabstrip__arrow:hover:not(:disabled) { color: var(--maroon); }
.tabstrip__arrow:disabled { opacity: .35; cursor: default; }
.tabstrip__list { flex: 1 1 auto; min-width: 0; display: flex; overflow-x: auto; scrollbar-width: none; }
.tabstrip__list::-webkit-scrollbar { display: none; }
.tabstrip__tab, .faq__cat {
  flex: none; padding: 7px 16px; border-radius: 6px;
  font-size: 16px; line-height: 32px; letter-spacing: .1px; color: var(--ink); white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.tabstrip__tab:hover, .faq__cat:hover { color: var(--maroon); }
.tabstrip__tab[aria-pressed="true"], .faq__cat[aria-pressed="true"] { background: var(--maroon); color: #fff; }
.gallery-grid { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.gallery-grid__item { aspect-ratio: 588 / 352; overflow: hidden; background: #eee; }
.gallery-grid__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery__more { margin-top: 20px; display: flex; justify-content: center; }
.gallery__load { min-width: 162px; gap: 6px; padding: 0 19px; }

/* Shown when a Gallery/FAQ category has nothing in it yet */
.filter-empty {
  margin-top: 26px; padding: 40px 24px; background: var(--soft); text-align: center;
  font-size: 16px; line-height: 24px; letter-spacing: .2px; color: var(--body);
}
.faq__list .filter-empty { margin-top: 0; }
.filter-empty a { color: var(--maroon); text-decoration: underline; }

/* =========================================================
   FAQ PAGE
   ========================================================= */
.faq { padding: 70px 0 13px; }
.faq__inner { display: flex; align-items: stretch; gap: 20px; }
.faq__side { flex: 0 0 207px; min-width: 0; padding: 13px 17px; background: var(--soft); }
.faq__cats { display: flex; flex-direction: column; gap: 6px; }
.faq__cat { display: block; width: 100%; padding-block: 7px; padding-inline: 20px 5px; text-align: start; }
.faq__list { flex: 1 1 auto; min-width: 0; max-width: 939px; padding-top: 9px; display: flex; flex-direction: column; gap: 6px; }

.faq-item__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 50px; padding-block: 8px; padding-inline: 33px 13px;
  background: #fdf5f8; border: 1px solid #e4dbdf; border-radius: 4px;
  font-size: 16px; line-height: 32px; letter-spacing: .1px; color: #000;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q .ic { color: var(--maroon); }
.faq-item__minus, .faq-item[open] .faq-item__plus { display: none; }
.faq-item[open] .faq-item__minus { display: block; }
.faq-item__a { margin-top: 2px; padding: 20px 38px 31px; background: rgba(255, 252, 252, .9); font-size: 16px; line-height: 32px; letter-spacing: .1px; color: #000; }
.faq-item__a ul { list-style: disc; padding-inline-start: 24px; }
.faq-item__a a { color: var(--maroon); text-decoration: underline; }

/* Help banner (FAQ + workspace pages) */
.help-banner { position: relative; overflow: hidden; min-height: 368px; padding: 70px 0 62px; background: var(--maroon); color: #fff; }
main > .help-banner:last-child { margin-bottom: 68px; }
.help-banner__media { position: absolute; top: 0; bottom: 0; inset-inline-end: 2px; width: 802px; max-width: 58%; }
.help-banner__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 59%; opacity: .9; }
.help-banner__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(112, 0, 48, .97) 0%, rgba(112, 0, 48, 0) 52%);
}
.help-banner__content { position: relative; z-index: 2; }
.help-banner__title { max-width: 710px; font-weight: 500; font-size: 40px; line-height: 60px; letter-spacing: .2px; }
.help-banner__text { margin-top: 9px; padding: 10px; font-size: 18px; line-height: 27px; letter-spacing: .2px; }
.help-banner__actions { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 10px; }
.btn--white { background: #fff; color: var(--maroon); }
.btn--white:hover { background: #f5e8ee; }
.btn--ghost { gap: 5px; min-width: 203px; font-size: 14px; line-height: 26px; color: #fff; box-shadow: inset 0 0 0 1px #fff; }
.btn--ghost:hover { background: #fff; color: var(--maroon); }

/* ---------- Amenities / Gallery / FAQ: responsive ---------- */
@media (max-width: 1239px) {
  .designed__row { gap: 32px; }
  .point__title { margin-block: 0; font-size: 21px; line-height: 26px; }
}

@media (max-width: 991px) {
  .amenity-grid-section, .designed, .perks-section { padding: 56px 0; }
  .amenity-grid { margin-top: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amenity-grid > .amenity-card:last-child:nth-child(3n+1) { grid-column: auto; }
  .amenity-card { min-height: 0; }

  .designed__row { margin-top: 32px; flex-direction: column; }
  .designed__media, .designed__copy { flex: none; width: 100%; }
  .points { gap: 32px; }
  .designed__copy { gap: 32px; }

  .all-in-one { min-height: 0; padding: 56px 0; }
  .all-in-one__panel { max-width: none; min-height: 0; padding: 28px; }

  .perks { margin-top: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perk { min-height: 0; }

  .faq { padding: 48px 0 32px; }
  .faq__inner { flex-direction: column; gap: 16px; }
  .faq__side { flex: none; padding: 8px; }
  .faq__cats { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .faq__cats::-webkit-scrollbar { display: none; }
  .faq__cat { width: auto; padding-inline: 16px; }
  .faq__list { max-width: none; padding-top: 0; }

  .help-banner { min-height: 0; padding: 56px 0; }
  main > .help-banner:last-child { margin-bottom: 48px; }
  .help-banner__media { width: 100%; max-width: none; inset-inline-end: 0; }
  .help-banner__media::before { background: linear-gradient(90deg, rgba(112, 0, 48, .95) 0%, rgba(112, 0, 48, .78) 100%); }
  .help-banner__title { font-size: 32px; line-height: 44px; }
  .amenity-grid > .amenity-card {
    flex: 0 0 calc((100% - 14px) / 2);
  }
}

@media (max-width: 575px) {
  .amenity-grid, .perks, .gallery-grid { grid-template-columns: minmax(0, 1fr); }
  .gallery-grid { gap: 12px; }
  .gallery { padding-top: 24px; }
  .tabstrip { gap: 4px; }
  .tabstrip__arrow .ic { width: 24px; height: 24px; }
  .tabstrip__tab, .faq__cat { padding: 5px 14px; font-size: 15px; }
  .point__title { font-size: 19px; line-height: 24px; }
  .point__text { font-size: 16px; }
  .all-in-one__panel { padding: 24px 20px; }
  .all-in-one__title { font-size: 24px; line-height: 34px; }
  .faq-item__q { padding-block: 8px; padding-inline: 16px 12px; line-height: 24px; }
  .faq-item__a { padding: 16px 16px 20px; line-height: 28px; }
  .help-banner__title { font-size: 26px; line-height: 36px; }
  .help-banner__text { padding: 10px 0; font-size: 16px; }
  .amenity-grid > .amenity-card {
    flex-basis: 100%;
  }
}

/* =========================================================
   WORKSPACE PAGES  (Figma "Nexus-desktop-Private-Office", used for all 8)
   ========================================================= */
/* What's included: 4 cards over a faded photo */
.ws-features { position: relative; overflow: hidden; padding: 81px 0 67px; background: var(--soft); }
.ws-features__bg { position: absolute; top: 11px; left: 0; width: 100%; height: calc(100% - 11px); max-width: none; object-fit: cover; object-position: 50% 56%; opacity: .64; }
.ws-features .container { position: relative; }
.ws-features__title { margin-bottom: 32px; }
.ws-features__cta { margin-top: 32px; }
.ws-features__grid { display: grid; grid-template-columns: repeat(2, 319px); gap: 15px; }
.ws-feature { min-height: 264px; padding: 31px; background: rgba(255, 255, 255, .88); border: 1px solid rgba(112, 0, 48, .3); border-radius: 12px; }
.ws-feature .ic { color: var(--icon-accent); }
.ws-feature__title { margin-top: 7px; font-weight: 600; font-size: 22px; line-height: 31px; letter-spacing: .2px; color: #000; text-wrap: balance; }
.ws-feature__text { margin-top: 7px; font-size: 16px; line-height: 24px; letter-spacing: .2px; color: var(--muted); }

/* Offers: 3 cards */
.ws-offers { padding: 73px 0 70px; background: var(--soft); }
.ws-offers__grid { margin-top: 52px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.offer-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 304px; padding: 24px 28px 18px; background: #fff; }
.offer-card__img { width: 100%; aspect-ratio: 332 / 106; object-fit: cover; background: #eee; }
.offer-card__title { margin-top: 10px; font-weight: 700; font-size: 16px; line-height: 24px; letter-spacing: .1px; color: var(--ink); }
.offer-card__meta { margin-top: 4px; font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: .2px; color: var(--maroon); }
.offer-card__text { margin-top: 5px; margin-bottom: 21px; font-size: 14px; line-height: 24px; letter-spacing: .2px; color: var(--muted); }
.offer-card__cta { margin-top: auto; min-width: 165px; }

/* Customize your office space */
.ws-custom { padding: 65px 0 71px; }
.ws-custom__grid { margin-top: 39px; display: grid; grid-template-columns: minmax(0, 597px) minmax(0, 551px); column-gap: 40px; align-items: start; }
.ws-custom__media { aspect-ratio: 597 / 537; background: #eee; }
.ws-custom__media img { inset: 0; width: 100%; height: 100%; }
.ws-custom__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 21px; }
.ws-custom__list { gap: 21px; }

/* Image / text rows */
.ws-rows { padding: 72px 0 70px; }
.ws-row { display: grid; grid-template-columns: minmax(0, 588px) minmax(0, 576px); justify-content: space-between; column-gap: 35px; align-items: center; }
.ws-row + .ws-row { margin-top: 70px; }
.ws-row:nth-child(even) { grid-template-columns: minmax(0, 576px) minmax(0, 588px); }
.ws-row:nth-child(even) .ws-row__media { order: 2; }
.ws-row__media { aspect-ratio: 588 / 420; background: #eee; }
.ws-row__media img { inset: 0; width: 100%; height: 100%; } /* photos are supplied cropped to the 588 x 420 frame */
.ws-row__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.ws-row__title { font-weight: 600; font-size: 28px; line-height: 42px; color: #000; text-wrap: balance; }
.ws-row__body { font-size: 16px; line-height: 28px; color: #373333; }
.ws-row__body h3 { font-weight: 500; font-size: 20px; line-height: 30px; color: var(--ink); }
.ws-row__body p + h3, .ws-row__body p + p { margin-top: 12px; }
.ws-row__body a { color: var(--maroon); text-decoration: underline; }
.ws-row__body ul { list-style: disc; padding-inline-start: 22px; }
.ws-row__body li::marker { color: var(--maroon); }
.ws-row__body h3 + ul { margin-top: 4px; }
.ws-row__body p + ul { margin-top: 12px; }
.ws-row__body ul + p, .ws-row__body ul + h3 { margin-top: 12px; }
.ws-row__body strong { font-weight: 600; color: var(--ink); }
.ws-row__actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* A row whose text is much taller than its photo: the photo stays in view while the text is read */
@media (min-width: 992px) {
  .ws-row--tall { align-items: start; }
  .ws-row--tall .ws-row__media { position: sticky; top: 32px; }
}

@media (max-width: 1239px) {
  .ws-features__grid { grid-template-columns: repeat(2, minmax(0, 319px)); }
  .ws-row { column-gap: 32px; }
}

@media (max-width: 991px) {
  .ws-features { padding: 56px 0; }
  .ws-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-feature { min-height: 0; padding: 24px; }

  .ws-offers { padding: 56px 0; }
  .ws-offers__grid { margin-top: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer-card { min-height: 0; }

  .ws-custom { padding: 56px 0; }
  .ws-custom__grid { margin-top: 32px; grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .ws-custom__list { gap: 24px; }

  .ws-rows { padding: 56px 0; }
  .ws-row, .ws-row:nth-child(even) { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .ws-row + .ws-row { margin-top: 48px; }
  .ws-row:nth-child(even) .ws-row__media { order: 0; }
}

@media (max-width: 575px) {
  .ws-features__grid, .ws-offers__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ws-feature { padding: 20px; }
  .ws-feature__title { font-size: 20px; line-height: 28px; }
  .offer-card { padding: 20px; }
  .ws-row__title { font-size: 24px; line-height: 34px; }
  .ws-row__body h3 { font-size: 18px; line-height: 26px; }
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact { padding: 70px 0 0; }
.contact__grid {
  display: grid; grid-template-columns: minmax(0, 572px) minmax(0, 472px); column-gap: 94px; align-items: start;
  padding-inline-start: 10px;
}
.contact-card { padding: 50px 50px 44px; background: #fff; border-radius: 8px; box-shadow: 0 0 24px rgba(0, 0, 0, .08); }
.contact-card__eyebrow { font-weight: 500; font-size: 16px; line-height: 20px; letter-spacing: .2px; color: #000; }
.contact-card__title { margin-block-start: 9.5px; } /* 26px gap minus the tight-title offset */
.contact-card .form { margin-top: 24px; }

.tour-form { margin-top: 38px; }
.tour-form__title { margin-block: -8px; font-weight: 500; font-size: 32px; line-height: 40px; letter-spacing: .2px; color: var(--maroon); }
.tour-form .form { margin-top: 24px; }

/* Form fields */
.form { position: relative; display: flex; flex-direction: column; gap: 24px; }
.form__trap { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field__label { font-size: 14px; line-height: 20px; letter-spacing: .2px; color: #6c6c6c; }
.field__box { position: relative; }
.field__control {
  display: block; width: 100%; height: 44px; margin: 0; padding: 10px 14px;
  border: 1px solid transparent; border-radius: 6px; background: #f4f4f4;
  font: inherit; font-size: 16px; line-height: 24px; letter-spacing: .2px; color: var(--card-ink);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.field__control::placeholder { color: #8b8686; opacity: 1; }
.field__control:focus { outline: none; border-color: var(--maroon); background: #fff; box-shadow: 0 0 0 3px rgba(112, 0, 48, .12); }
.field__control--area { height: 131px; resize: vertical; }
.field__control--select, .field__control--date { padding-inline-end: 48px; -webkit-appearance: none; appearance: none; cursor: pointer; }
.field__control--select:invalid { color: #8b8686; }
.field__control--select option { color: var(--card-ink); }
.field__control--date { text-align: start; }
.field__control--date::-webkit-date-and-time-value { text-align: start; }
.field__control--date::-webkit-calendar-picker-indicator {
  position: absolute; inset-inline-end: 0; top: 0; width: 56px; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer;
}
/* Firefox draws its own calendar button inside date fields: use that one there */
@supports (-moz-appearance: none) {
  .field__control--date { padding-inline-end: 14px; }
  .field__control--date + .field__icon { display: none; }
}
.field__icon { position: absolute; top: 12px; inset-inline-end: 20px; pointer-events: none; color: var(--maroon); }
.field__icon--muted { color: #4a4545; }
.field.is-invalid .field__control { border-color: #b3261e; background: #fff8f8; }
.field__error { font-size: 13px; line-height: 18px; letter-spacing: .1px; color: #b3261e; }

.form__actions { display: flex; flex-wrap: wrap; gap: 20px; }
.form__btn { min-width: 139px; }
.form__btn--tour { min-width: 160px; }
.form__btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.form__status { padding: 12px 16px; border-radius: 6px; font-size: 15px; line-height: 22px; }
.form__status.is-success { background: #edf7ee; color: #1d5a2a; }
.form__status.is-error { background: #fcefef; color: #8a1c1c; }

.findus--contact { padding: 70px 0 75px; }

@media (max-width: 1239px) {
  .contact__grid { column-gap: 48px; padding-inline-start: 0; }
}

@media (max-width: 991px) {
  .contact { padding-top: 56px; }
  .contact__grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .contact-card__title { margin-block-start: 16px; }
  .tour-form { margin-top: 0; }
  .tour-form__title { margin-block: 0; font-size: 28px; line-height: 38px; }
  .findus--contact { padding: 56px 0; }
}

@media (max-width: 575px) {
  .contact-card { padding: 28px 20px; }
  .form__actions { gap: 12px; }
  .form__btn { flex: 1 1 0; min-width: 0; }
}

/* =========================================================
   RIGHT-TO-LEFT (Arabic)
   Everything above already flips with dir="rtl". These are the parts
   that need mirroring by hand: fades, scroll masks and arrow icons.
   Arabic pages load "Noto Kufi Arabic" (src/layout.html). Latin words,
   digits and brand names keep Poppins; Arabic letters use Noto Kufi.
   ========================================================= */
:root:lang(ar) { --font: 'Poppins', 'Noto Kufi Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif; }
:lang(ar) * { letter-spacing: 0 !important; } /* letter-spacing breaks the joined Arabic letters */
/* Arabic letters reach further below the line: drop the tight Figma offsets under banner headings */
:lang(ar) .hero__title, :lang(ar) .page-hero__title { margin-block-end: 0; }
/* Banner photos are mirrored so their open side sits under the (right-aligned) text.
   The workspace banner photo has lettering (wall calendars) and is left as it is. */
[dir="rtl"] .hero__bg,
[dir="rtl"] .page-hero__bg,
[dir="rtl"] .vision__bg,
[dir="rtl"] .all-in-one__bg { transform: scaleX(-1); }
[dir="rtl"] .page-hero--workspace .page-hero__bg { transform: none; }

[dir="rtl"] .hero__shade { background: linear-gradient(270.75deg, rgba(255, 255, 255, .9) 2.34%, rgba(255, 255, 255, .7) 47.55%, rgba(255, 255, 255, 0) 97.44%); }
[dir="rtl"] .vision__shade { background: linear-gradient(90.62deg, rgba(0, 0, 0, .48) 2.29%, rgba(0, 0, 0, 0) 95.13%); }
[dir="rtl"] .help-banner__media::before { background: linear-gradient(270deg, rgba(112, 0, 48, .97) 0%, rgba(112, 0, 48, 0) 52%); }
[dir="rtl"] .tabstrip__arrow .ic,
[dir="rtl"] .feedback__btn .ic { transform: scaleX(-1); }

@media (max-width: 1239px) {
  [dir="rtl"] .subnav__list { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 40px), transparent); }
}
@media (max-width: 991px) {
  [dir="rtl"] .hero__shade { background: linear-gradient(270deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .78) 60%, rgba(255, 255, 255, .4) 100%); }
  [dir="rtl"] .help-banner__media::before { background: linear-gradient(270deg, rgba(112, 0, 48, .95) 0%, rgba(112, 0, 48, .78) 100%); }
}