/* ——— Services page ——— */

/* Hero */

.svc-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  /* Figma 1548:5279 — hero band is 1920x629 with 122px/120px padding,
     not a full-viewport hero (that left a ~350px dead zone below the copy). */
  height: auto;
  min-height: 629px;
  padding: 122px 120px;
  background: linear-gradient(180deg, #000 0%, #212121 100%);
  overflow: hidden;
  width: 100%;
}

.svc-hero-glow {
  position: absolute;
  left: 50%;
  top: -246px;
  transform: translateX(-50%);
  width: 623px;
  height: 257px;
  background: rgba(224, 105, 0, 0.5);
  border-radius: 200px;
  filter: blur(300px);
  pointer-events: none;
}

.svc-hero-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  position: relative;
  z-index: 1;
}

.svc-hero-left {
  flex: 1;
  min-width: 0;
}

.svc-hero-eyebrow {
  font-family: "Fustat", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: normal;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #909090;
  margin-bottom: 24px;
}

.svc-hero-title {
  font-family: "Fustat", sans-serif;
  font-weight: 600;
  font-size: 64px;
  line-height: 1.2;
  color: #fff;
  width: 799px;
  max-width: 100%;
}

.svc-hero-right {
  width: 755px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.svc-hero-copy {
  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

.svc-hero-copy p + p {
  margin-top: 1.5em;
}

/* Service grid */

.svc-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #1d1d1d;
}

.svc-row {
  display: flex;
  width: 100%;
  align-items: stretch;
}

.svc-card {
  position: relative;
  display: block;
  width: 960px;
  height: 882px;
  flex-shrink: 0;
  overflow: hidden;
  border-top: 1.333px solid #c9c9c9;
  border-right: 1.333px solid #c9c9c9;
  border-bottom: 1.333px solid #c9c9c9;
}

/* Figma draws no outer edge line at x=0 / x=1920 — only the row rules and the
   single centre divider. Drop the right border on the 2nd card of a full row. */
.svc-row > .svc-card + .svc-card {
  border-right: 0;
}

.svc-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 85.333px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Figma 1548:6399 — the cell is transparent over the #1d1d1d grid.
     It was #fff, which painted a full-bleed white slab in the dark page. */
  background: transparent;
}

.svc-card-media {
  position: relative;
  width: 100%;
  height: 711px;
  overflow: hidden;
}

.svc-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.svc-card:hover .svc-card-media img,
.svc-card:focus-visible .svc-card-media img {
  transform: scale(1.1);
}

.svc-card:focus-visible {
  outline: 2px solid #f68121;
  outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {
  .svc-card-media img {
    transition: none;
  }

  .svc-card:hover .svc-card-media img,
  .svc-card:focus-visible .svc-card-media img {
    transform: none;
  }
}

.svc-card-label {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 790px;
  height: 325px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 43px 34px;
  background: linear-gradient(0deg, #000 10.1%, rgba(0, 0, 0, 0) 100%);
  z-index: 1;
}

.svc-card-label span {
  font-family: "Fustat", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: #fff;
  text-align: center;
  width: 100%;
}

.svc-card--half {
  width: 960px;
}

/* Featured Blogs — styled entirely by css/components.css (+ footer.css /
   responsive.css breakpoints). The verbatim .blogs/.blog-* copy that used to
   sit here out-ranked the shared 1440 rules and pinned the band to 120px
   gutters and 743px cards. */

/* Enquire / contact form */

.enquire {
  position: relative;
  background: #0d0d0d;
  padding: 180px 215px 200px;
  width: 100%;
  overflow: hidden;
}

.enquire-row {
  display: flex;
  gap: 111px;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 1;
}

.enquire-left {
  width: 803px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 229px;
}

.enquire-eyebrow {
  font-family: "Fustat", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: normal;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #909090;
}

.enquire-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.enquire-title {
  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 64px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: #fff;
  text-transform: capitalize;
}

.enquire-sub {
  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  width: 726px;
  max-width: 100%;
}

.enquire-form-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  align-self: stretch;
}

.enquire-glow {
  position: absolute;
  left: 0;
  top: 0;
  width: 471.5px;
  height: 531.5px;
  background: linear-gradient(90deg, rgba(255, 131, 43, 0.2), rgba(246, 129, 33, 0.2));
  filter: blur(100px);
  pointer-events: none;
}

.enquire-glow-img {
  position: absolute;
  left: 50%;
  bottom: -11%;
  transform: translateX(-50%);
  width: 40%;
  max-width: 520px;
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}

.enquire-form {
  position: relative;
  z-index: 1;
  background: #131313;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  width: 576px;
  max-width: 100%;
  height: 584px;
  padding: 33px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.enquire-form-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.enquire-form-title {
  font-family: "Fustat", sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: normal;
  letter-spacing: -0.56px;
  color: #fff;
}

.enquire-form-sub {
  font-family: "Fustat", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.6);
  max-width: 427px;
}

.enquire-form-sub a {
  color: #fff;
  text-decoration: underline;
  text-underline-position: from-font;
}

.enquire-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.enquire-fields input,
.enquire-fields textarea {
  width: 100%;
  max-width: 510px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 12px 16px;
  font-family: "Fustat", sans-serif;
  font-size: 16px;
  color: #fff;
  outline: none;
}

.enquire-fields input {
  height: 50px;
}

.enquire-fields textarea {
  height: 122px;
  resize: none;
  line-height: 24px;
}

.enquire-fields input::placeholder,
.enquire-fields textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.enquire-fields .btn-primary {
  align-self: flex-start;
  height: 48px;
  padding: 14px 20px;
  font-size: 16px;
  line-height: 20px;
  margin-top: 8px;
}

.enquire-fields .btn-primary .btn-label {
  padding: 0 8px;
}

/* FAQ */

.faq {
  background: linear-gradient(180deg, #0d0d0d 0%, #1d1d1d 100%);
  padding: 120px 215px;
  width: 100%;
}

.faq-inner {
  display: flex;
  flex-direction: column;
  gap: 95px;
  align-items: center;
  width: 1520px;
  max-width: 100%;
  margin: 0 auto;
}

.faq-head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
  width: 100%;
}

.faq-eyebrow {
  font-family: "Fustat", sans-serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #909090;
}

.faq-title {
  font-family: "Fustat", sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.2;
  color: #fff;
  max-width: 1014px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 29px;
  width: 792px;
  max-width: 100%;
}

.faq-item {
  background: #1b1b1b;
  border-radius: 16px;
  width: 100%;
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.128px;
  color: #fff;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.faq-item[open] summary img {
  transform: rotate(45deg);
}

.faq-item[open] {
  min-height: 184px;
}

.faq-body {
  padding: 0 24px 24px;
  font-family: "Fustat", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(250, 250, 250, 0.7);
}

.faq-more {
  text-align: center;
  font-family: "Fustat", sans-serif;
  font-size: 15.9px;
  line-height: 24px;
  letter-spacing: -0.384px;
  color: #fafafa;
}

.faq-more a {
  font-weight: 500;
  font-size: 15.6px;
  letter-spacing: -0.128px;
  color: #fff;
  text-decoration: underline;
  text-underline-position: from-font;
}

/* CTA + Partners — styled entirely by css/components.css. The copy that
   used to sit here zeroed .cta-wrap's 110px top padding and pinned
   .cta-title to a 56px leading. */


/* The Figma canvas is 1920 wide and the grid is two fixed 960px cards. Below
   1920 that pair overflowed its row and the second card was clipped off the
   right edge (visible on every 1280/1440/1536 laptop), so the pair goes fluid
   while keeping the 960:882 card and 790:711 media proportions. */
@media (max-width: 1919px) {
  .svc-card,
  .svc-card--half {
    width: 50%;
    height: auto;
  }

  .svc-card-inner {
    padding: clamp(24px, 4.45vw, 85.333px);
  }

  .svc-card-media {
    height: auto;
    aspect-ratio: 790 / 711;
  }

  .svc-card-label {
    height: auto;
    min-height: 46%;
  }
}

/* Hero is no longer viewport-locked, so it scales on width rather than height. */
@media (max-width: 1600px) {
  .svc-hero-right {
    width: 46%;
  }
}

@media (max-width: 1280px) {
  .svc-hero {
    min-height: 0;
    padding: 88px 64px;
  }

  .svc-hero-title {
    font-size: 52px;
  }

  .svc-hero-right {
    width: 46%;
  }
}

@media (max-width: 768px) {
  .svc-hero, .services-hero {
    height: auto;
    min-height: 0;
    padding: 40px 20px 48px !important;
    align-items: stretch;
    overflow: visible;
  }

  .svc-hero-row {
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }

  .svc-hero-left,
  .svc-hero-right,
  .svc-hero-title,
  .svc-hero-copy,
  .svc-hero .btn-primary {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .svc-hero h1,
  .svc-hero-title,
  .svc-title,
  .services-hero h1 {
    font-size: clamp(28px, 8vw, 40px) !important;
    line-height: 1.15;
  }

  .svc-hero-copy {
    font-size: 15px;
  }

  .svc-hero .btn-primary {
    justify-content: center;
  }

  .svc-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px;
    padding: 0 16px 48px;
  }

  .svc-row {
    flex-direction: column;
  }

  .svc-card,
  .svc-card--half {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    min-height: 0;
    /* uniform box once the grid stacks — the desktop rule drops the right
       border on the 2nd card of a row, which reads as broken in a column */
    border: 1.333px solid rgba(201, 201, 201, 0.45);
  }

  .svc-row > .svc-card + .svc-card {
    border-right: 1.333px solid rgba(201, 201, 201, 0.45);
  }

  .svc-card-inner {
    padding: 16px !important;
  }

  .svc-card-media {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .svc-card-label {
    height: auto;
    min-height: 45%;
    padding: 24px 16px;
  }

  .enquire {
    padding: 64px 20px 80px !important;
  }

  .enquire-row {
    flex-direction: column;
    gap: 40px;
  }

  .enquire-left,
  .enquire-sub,
  .enquire-title,
  .enquire-form-wrap,
  .enquire-form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .enquire-left {
    gap: 32px;
  }

  .enquire-title {
    font-size: clamp(28px, 7vw, 40px) !important;
  }

  /* The FAQ band kept its desktop 215px side padding at every width, so at
     375px the content box collapsed to 0 and every answer wrapped one letter
     per line. */
  .faq {
    padding: 48px 20px 64px !important;
  }

  .faq-inner {
    gap: 40px;
  }

  .faq-head {
    gap: 12px;
  }

  .faq-title {
    font-size: clamp(26px, 7vw, 34px);
  }

  .faq-list {
    gap: 16px;
    width: 100%;
  }

  .faq-item summary {
    padding: 16px;
    font-size: 16px;
    line-height: 22px;
    min-height: 56px;
  }

  .faq-item[open] {
    min-height: 0;
  }

  .faq-body {
    padding: 0 16px 20px;
  }

}

/* The 215px FAQ gutter also overwhelms tablet widths. */
@media (max-width: 1100px) {
  .faq {
    padding: 96px 40px;
  }

  .enquire {
    padding: 120px 40px 140px;
  }
}

/* ============================================================
   LIGHT MODE — Services listing
   Palette mirrored from Figma light landing 1264:9007:
     dark gradients (#000→#212121 / #0d0d0d→#1d1d1d)  →  #ffffff→#f5f5f5
     #fff text                                        →  var(--text)   #121212
     rgba(255,255,255,.6) copy                        →  var(--text-secondary) #333333
     rgba(255,255,255,X) hairlines/fields             →  rgba(18,18,18,X)
     #909090 eyebrows and #f68121 accent are IDENTICAL in both themes.
   Photo-backed surfaces (service card labels, blog cards) stay dark — the
   gradient scrim is what makes the caption legible over the photograph.
   ============================================================ */

/* —— Hero —— */
html[data-theme="light"] .svc-hero {
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-page) 100%);
}

/* The orange bloom reads as a smear at full strength on white. */
html[data-theme="light"] .svc-hero-glow {
  background: rgba(224, 105, 0, 0.28);
}

html[data-theme="light"] .svc-hero-title {
  color: var(--text);
}

html[data-theme="light"] .svc-hero-copy {
  color: var(--text-secondary);
}

/* —— Service grid —— */
html[data-theme="light"] .svc-grid {
  background: var(--bg-body);
}

/* #c9c9c9 rules read as light-on-dark; on white they need the darker hairline. */
html[data-theme="light"] .svc-card {
  border-color: var(--border-strong);
}

/* —— Featured blogs —— light rules live in components.css: the band stays
   dark ink in both themes (homepage reference). The white-plate copy that
   used to sit here was the only reason this page's strip flipped to paper. */

/* —— Enquire —— */
html[data-theme="light"] .enquire {
  background: var(--bg-body);
}

html[data-theme="light"] .enquire-title {
  color: var(--text);
}

html[data-theme="light"] .enquire-sub {
  color: var(--text-secondary);
}

/* #444 skyline silhouette: a watermark on black, a slab on white. */
html[data-theme="light"] .enquire-glow-img {
  opacity: 0.1;
}

html[data-theme="light"] .enquire-form {
  background: var(--bg-body);
  border-color: rgba(18, 18, 18, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .enquire-form-title {
  color: var(--text);
}

html[data-theme="light"] .enquire-form-sub {
  color: var(--text-secondary);
}

html[data-theme="light"] .enquire-form-sub a {
  color: var(--text);
}

html[data-theme="light"] .enquire-fields input,
html[data-theme="light"] .enquire-fields textarea {
  background: var(--bg-elevated);
  border-color: rgba(18, 18, 18, 0.2);
  color: var(--text);
}

html[data-theme="light"] .enquire-fields input::placeholder,
html[data-theme="light"] .enquire-fields textarea::placeholder {
  color: rgba(18, 18, 18, 0.4);
}

/* —— FAQ —— */
html[data-theme="light"] .faq {
  background: linear-gradient(180deg, var(--bg-page) 0%, var(--bg-sunken) 100%);
}

html[data-theme="light"] .faq-title {
  color: var(--text);
}

/* Figma draws the light accordion as a plain #fff card. That vanishes where
   the section gradient reaches #fff, so the hairline is added here. */
html[data-theme="light"] .faq-item {
  background: var(--bg-body);
  border: 1px solid var(--border);
}

html[data-theme="light"] .faq-item summary {
  color: var(--text);
}

/* faq-plus.svg / faq-minus.svg are white-stroked; invert to the ink colour. */
html[data-theme="light"] .faq-item summary img {
  filter: invert(1);
}

html[data-theme="light"] .faq-body {
  color: var(--text-secondary);
}

html[data-theme="light"] .faq-more {
  color: var(--text-secondary);
}

html[data-theme="light"] .faq-more a {
  color: var(--text);
}

/* —— CTA + partners ——
   .cta / .cta-title / .cta-sub / .cta-wrap / .partners--band already have
   light rules in components.css; those out-specify the flat rules above. */

/* Eyebrows are hardcoded #909090 (identical in both themes by design); in
   light they follow --text-grey so they stay in step with the token file. */
html[data-theme="light"] .svc-hero-eyebrow,
html[data-theme="light"] .enquire-eyebrow,
html[data-theme="light"] .faq-eyebrow {
  color: var(--text-grey);
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE TOUCH / RHYTHM (<= 768px)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* .svc-grid gaps the rows but not the two cards inside a row, so a stacked
     pair read as one double-height box while the next pair sat apart. */
  .svc-row {
    gap: 16px;
  }

  /* Inline mail / help-centre links were 23px tall. The negative margin keeps
     the sentence on one baseline while giving the link a 44px touch box. */
  .enquire-form-sub a,
  .faq-more a {
    display: inline-block;
    padding: 12px 4px;
    margin: -12px -4px;
  }
}