@charset "UTF-8";
/* No universal transition here. `* { transition: 0.3s }` used to sit on this rule,
   which meant transition-property:all on every element - nothing was ever a choice,
   and 25 later rules existed mainly to opt back out of it. Motion is now declared
   deliberately, per component, using the tokens below. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* ---- Brand palette: these three colours only ---- */
  --black: #000000;
  --white: #ffffff;
  --blue: #1944f1;
  /* Transparent derivations of the three above - no new hues */
  --muted-on-black: rgba(255, 255, 255, 0.72);
  --muted-on-white: rgba(0, 0, 0, 0.7);
  --line-on-black: rgba(255, 255, 255, 0.16);
  --line-on-white: rgba(0, 0, 0, 0.12);
  --surface-on-black: rgba(255, 255, 255, 0.07);
  --scrim: rgba(0, 0, 0, 0.85);
  --scrim-soft: rgba(0, 0, 0, 0.72);
  --blue-wash: rgba(25, 68, 241, 0.75);
  --shadow: rgba(0, 0, 0, 0.18);
  /* A tint of the brand blue over the white ground - pastel without
     introducing a fourth colour. */
  --blue-pale: rgba(25, 68, 241, 0.08);
  --surface-on-white: rgba(0, 0, 0, 0.045);
  /* Hover blue for links on DARK grounds. The solid --blue is only 3.16:1 on
     black, below the accessible minimum for small text; this lands at 7.7:1.
     Literal first as a fallback, then the derived mix - same value either way. */
  --blue-soft: #8198f7;
  --blue-soft: color-mix(in srgb, var(--blue) 55%, var(--white));
  /* ---- Type ---- Lora carries all readable text; the mono is reserved for
     micro-type: counters, coordinates, labels, process chains. */
  --font-display: "Lora", "Times New Roman", Times, serif;
  --font-body: "Lora", "Times New Roman", Times, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  /* The footer runs on a sans by request - serif above, sans for the
     utility chrome at the bottom of the page. */
  --font-footer: "Poppins", "Helvetica Neue", Arial, sans-serif;
  /* ---- Motion ---- One curve and one duration scale across the whole site.
     Coherence is what keeps many moving parts reading as considered rather
     than busy. --ease was already in use on the discipline index; it is now
     the house curve. */
  --ease: cubic-bezier(0.22, 0.7, 0.3, 1);
  --ease-mask: cubic-bezier(0.16, 0.9, 0.24, 1);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 900ms;
  /* Reveals get their own, longer setting. The long tail on this curve is what
     makes the movement read as smooth rather than as a slide that stops. */
  --dur-reveal: 1150ms;
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  /* The standard interaction transition. Names its properties rather than
     using `all`, so nothing animates by accident. */
  --tr-interactive: color var(--dur-fast) var(--ease),
                    background-color var(--dur-base) var(--ease),
                    border-color var(--dur-base) var(--ease),
                    box-shadow var(--dur-base) var(--ease),
                    opacity var(--dur-base) var(--ease),
                    transform var(--dur-base) var(--ease);
  /* Same, minus transform. Anything GSAP animates transform on must use this,
     or the CSS transition smooths what quickTo is already smoothing. */
  --tr-interactive-notransform: color var(--dur-fast) var(--ease),
                    background-color var(--dur-base) var(--ease),
                    border-color var(--dur-base) var(--ease),
                    box-shadow var(--dur-base) var(--ease),
                    opacity var(--dur-base) var(--ease);
  /* Legacy aliases so older rules keep resolving */
  --mainColor: var(--blue);
  --subMainColor: var(--blue);
  --whiteColor: var(--white);
  --buttonColor2: var(--blue);
}

body {
  overflow-x: hidden;
  font-family: var(--font-body);
  background-color: var(--white);
  color: var(--black);
}

/* ---- Pull Bootstrap onto the same three colours ----
   Bootstrap ships its own off-black (#212529) and grey borders (#dee2e6),
   which is where several of the mismatched darks were coming from. */
.bg-dark {
  background-color: var(--black) !important;
}

.text-dark {
  color: var(--black) !important;
}

:root {
  --bs-border-color: var(--line-on-white);
  --bs-dark: var(--black);
  --bs-dark-rgb: 0, 0, 0;
  --bs-body-color: var(--black);
  --bs-body-bg: var(--white);
  --bs-link-color: var(--blue);
  --bs-link-hover-color: var(--blue);
  --bs-dropdown-link-color: var(--black);
  --bs-dropdown-link-hover-bg: var(--blue);
  --bs-dropdown-link-hover-color: var(--white);
}

/* ---- Bitmap assets that still carry the old pink/orange brand ----
   The logo, the marquee star and the WhatsApp glyph are flat marks on
   transparency, so rendering them white keeps them on-palette without
   touching the source files. Supply white or blue artwork and delete
   these two rules to drop the filters. */
header .logo img,
header .menuLogo img,
footer .fcols img {
  filter: brightness(0) invert(1);
}

/* Only the slide-in panel needs it - on a pointer device the header logo sits
   right above an inline menu that never covers it. */
.menuLogo {
  display: none;
}

.sliding-text__title img {
  filter: brightness(0) invert(1);
}

/* The WhatsApp bitmap was a filled green circle, so it could not be filtered
   without flattening the glyph. Font Awesome (already loaded) draws it instead. */
.btn-floating.whatsapp i {
  color: var(--white);
  font-size: 1.6rem;
  line-height: 1;
}

/* The pill lives inside <footer> now, so `footer i { margin: 0.5rem }` applied
   to its glyph and pushed it 8px off centre in the circle - and 8px past the
   right edge, where `overflow: hidden` cut it. A fixed 26px box either side of
   the 12px padding is exactly the 50px circle, so the glyph sits dead centre. */
.btn-floating i {
  flex: none;
  width: 26px;
  margin: 0;
  text-align: center;
}

.text-grandiant {
  color: var(--blue);
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: var(--black);
}

.heading {
  font-size: 3rem;
  font-weight: 700;
  color: var(--mainColor);
}

.subHeading {
  font-weight: 500;
  font-size: 2rem;
  color: var(--whiteColor);
}

.para {
  font-size: 14px;
  font-weight: 400;
  font-family: var(--font-body);
  color: var(--muted-on-black) !important;
}

.sendMsg {
  padding: 0.7rem 2rem !important;
}

.myButton {
  padding: 0.7rem 2rem;
  background: var(--blue);
  color: var(--white);
  text-transform: uppercase;
  transition: var(--tr-interactive);
  font-size: 14px;
  font-weight: 500;
  border: none;
  outline: none;
  border-radius: 30px;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  transition: var(--tr-interactive-notransform);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.myButton:hover {
  background: var(--white);
  color: var(--blue);
}

.menuTransformToggle {
  transform: translateX(0%) !important;
}

.hiddenInDesk {
  display: none;
}

.showInDesk {
  display: block;
}

.menuDiv {
  font-family: var(--font-mono);
}

/*.bg-video {
  position: fixed;
 top: 0;
  left: 0;
  min-width: 100vw;
  min-height: 100vh;
  width: auto;
  height: auto;
  z-index: -1;
  object-fit: cover;
  opacity: 0.25; // Adjust for desired darkness
  pointer-events: none;
}*/
header {
  /*box-shadow: 0px 0px 20px -10px var(--shadow);*/
  border-bottom: 0.1px solid var(--line-on-black);
  background-color: var(--black);
  position: fixed;
  width: 100%;
  top: 0px;
  left: 0;
  z-index: 5000;
  padding: 1rem 0;
}
header .d-lg-block {
  display: flex !important;
  justify-content: end !important;
}
header a {
  color: var(--white);
}
header img {
  width: 100%;
}
header .row {
  align-items: center;
}
header .row > .logo .ham {
  display: none;
}
header .row > .menu > .menuDiv {
  transform: translateX(0%);
}
header .row > .menu > .menuDiv > .cross {
  display: none;
}
header .row > .menu > .menuDiv > ul {
  display: flex;
  justify-content: end;
  gap: 2rem;
  margin-top: 1rem;
}
header .row > .menu > .menuDiv > ul > li > a {
  text-transform: uppercase;
  font-weight: 400;
  transition: var(--tr-interactive);
  font-size: 15px;
}
header .row > .menu > .menuDiv > ul > li > a:hover {
  color: var(--blue-soft);
}

/* The chevron and the "All Services" row exist for the phone accordion, where
   the label toggles instead of navigating. On a pointer device the menu opens
   on hover and the label still goes to services.php, so neither is needed. */
.navChev {
  display: none;
}

.serviceList__all {
  display: none;
}

header .dropdown-menu {
  position: absolute;
  font-family: var(--font-mono);
}
header .dropdown-menu a:hover {
  background: var(--blue);
  color: var(--white);
}

.dropdown-menu {
  transform: none !important;
  top: 100% !important;
  text-transform: uppercase !important;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 15px 10px 15px;
  clear: both;
  font-weight: 500;
  color: var(--bs-dropdown-link-color);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: var(--white);
  font-family: var(--font-mono);
}

.dropdown-menu {
  display: none;
  text-transform: uppercase;
  top: 0%;
  left: 0;
  min-width: 250px;
  padding: 0;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  z-index: 999;
}

.dropdown-center:hover .dropdown-menu {
  display: block;
}

.dropdown-menu li {
  border-bottom: 1px solid var(--line-on-white);
}

.dropdown-menu li:last-child {
  border-bottom: none;
}

.dropdown-menu .dropdown-item {
  display: block;
  padding: 16px 100px 16px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
  text-decoration: none;
  background: var(--white);
}

.first {
  position: relative;
  overflow: hidden;
}
.first iframe {
  width: 1410px;
  height: 650px;
}
.first .bg-video {
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 0;
  pointer-events: none;
}
.first .container {
  position: relative;
  z-index: 1;
}

.footerFloatingButton {
  padding: 0.7rem 1rem;
  background: var(--blue);
  color: var(--white);
  text-transform: uppercase;
  transition: var(--tr-interactive);
  font-size: 12px;
  font-weight: 600;
  border: none;
  outline: none;
  border-radius: 30px;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  box-shadow: 0px 0px 20px -5px var(--shadow), inset 0 0 0 1px var(--blue);
  transform: rotate(90deg);
}
.footerFloatingButton:hover {
  background: var(--white);
  color: var(--blue);
  font-weight: 600;
}
.footerFloatingButton {
  position: fixed;
  right: -2.25rem;
  top: 35%;
  z-index: 500;
}

@media only screen and (max-width: 700px) {
  header .row > .menu > .menuDiv > ul {
    gap: 0rem;
  }
  .our-services h2 span {
    background-color: var(--scrim-soft);
    padding: 0.5rem;
  }
  .our-services img {
    height: 15rem !important;
  }
  .first iframe {
    width: 100%;
    height: 300px;
  }
}
.first {
  padding-top: 5.5rem;
  /*background-color: var(--black);*/
  width: 100%;
}
.first img {
  width: 80%;
}
.first h1 {
  font-size: 46px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 2rem;
  font-family: var(--font-display);
  margin-top: 240px;
}
.first .social-links {
  margin-top: 5rem;
}
.first .social-links a {
  background-color: var(--surface-on-black);
  color: var(--white);
  border-radius: 5rem;
  padding: 0.6rem 0.8rem;
  margin-right: 1rem;
  font-size: 0.8rem;
}
.first .social-links a:hover {
  background-color: var(--blue);
}

.aboutUs {
  margin: 8rem 0 8rem 0;
}
.aboutUs .leftAu {
  position: relative;
}
.aboutUs .leftAu img:first-of-type {
  width: 70%;
}
.aboutUs .leftAu img:last-of-type {
  position: absolute;
  width: 45%;
  right: 5rem;
  bottom: -5rem;
  border: 15px solid var(--white);
}
.aboutUs .rightAu img {
  width: 70%;
}
.aboutUs .rightAu .row i {
  margin: 0 0.5rem;
  color: var(--blue);
}
.aboutUs .rightAu .row h6 {
  line-height: 2.5rem;
  font-size: 16px;
  font-family: var(--font-body);
  font-weight: 600;
}
.aboutUs .rightAu .row p {
  font-family: var(--font-body);
}
.aboutUs .rightAu .row h6:last-of-type {
  margin-bottom: 2rem;
}
.aboutUs .rightAu .row .myButton i {
  color: var(--white);
}

.our-services {
  overflow: hidden;
  background-color: var(--black);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 5rem) clamp(4rem, 8vw, 7rem);
}
.our-services .row {
  --bs-gutter-x: clamp(1rem, 2.4vw, 2rem);
  row-gap: clamp(2rem, 4vw, 3.25rem);
}

/* One service tile. Same grammar as the homepage plates: image, hairline,
   counter + name, then the process chain. */
.svc {
  display: block;
  color: var(--white);
}

.svc__frame {
  display: block;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.svc__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease);
}

.svc__meta {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-top: 0.7rem;
  margin-top: 0.7rem;
  border-top: 1px solid var(--line-on-black);
}

.svc__name {
  margin: 0;
  color: var(--white);
  font-weight: 400;
  transition: color var(--dur-fast) var(--ease);
}

.svc__chain {
  display: block;
  margin-top: 0.45rem;
  color: var(--muted-on-black);
  line-height: 1.7;
}
.svc__chain i {
  font-style: normal;
  color: var(--blue);
  margin: 0 0.3em;
}

/* `.tick` sets `white-space: nowrap` so a counter never breaks after its slash,
   and it is declared later in this file - so a bare `.svc__chain` loses the tie.
   A four-step process chain is not a counter: unable to wrap it ran up to 195px
   past its own tile and into the next column, and the extra width was what broke
   the 992px row into 3+1+2. */
.svc__chain.tick {
  white-space: normal;
}

.svc:hover .svc__frame img,
.svc:focus-visible .svc__frame img {
  transform: scale(1.04);
}
.svc:hover .svc__name,
.svc:focus-visible .svc__name {
  color: var(--blue-soft);
}

.divHeadings {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.portfolio {
  /*margin-top: 5rem;*/
  padding: 6rem 3rem;
  background-color: var(--black);
}
.portfolio .imgDiv {
  width: 100%;
  overflow: hidden;
}
.portfolio .imgDiv:hover img {
  scale: 1.1;
}
.portfolio .imgDiv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: scale var(--dur-base) var(--ease);
}
.portfolio .imgDiv .backyard {
  height: 313px;
}
.portfolio .imgDiv video {
  width: 100%;
  height: auto;
}

@media only screen and (max-width: 700px) {
  .portfolio .imgDiv .backyard {
    height: 154px;
  }
}
.contact-detail {
  padding: 3rem 3rem;
  background-color: var(--black);
}
.contact-detail .first-cd {
  background-color: var(--blue);
  height: 100%;
  color: var(--white);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-detail .first-cd .bg-dark {
  background-color: transparent !important;
  width: 70%;
  padding: 2rem 0.5rem;
}
.contact-detail .first-cd h2 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--white);
}
.contact-detail .first-cd .ph-no {
  color: var(--white);
}
.contact-detail .first-cd a {
  color: var(--white);
  display: block;
  width: 100%;
  font-family: var(--font-body);
}
.contact-detail .first-cd p {
  padding: 0 2rem;
  font-family: var(--font-body);
}
.contact-detail img {
  width: 80%;
  object-fit: cover;
}
.contact-detail iframe {
  width: 100%;
  height: 100%;
}
.contact-detail .second-cd {
  display: flex;
  justify-content: center;
}

/* ---------- Partners and clients ----------
   A hairline grid: the 1px gaps are the container colour showing between cells,
   which is the same rule language the index and the claims list use. Marks are
   flattened to white so twenty-five different brand palettes do not fight the
   three-colour scheme - that only works because every file was given a real
   alpha channel first. */
.partners {
  background-color: var(--white);
  color: var(--black);
  padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 4vw, 5rem) clamp(4rem, 9vw, 7rem);
}

.partners__inner {
  max-width: 82rem;
  margin: 0 auto;
}

.partners__rule {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  border-bottom: 1px solid var(--line-on-white);
  padding-bottom: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.partners__rule .tick {
  color: var(--muted-on-white);
}

/* Carried over from the retired .brand section - the one piece of real copy it
   had. Set on a measure rather than the old `w-50`, which was a share of the
   viewport and ran to ~180 characters a line on a wide screen. */
.partners__lede {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.65;
  max-width: 62ch;
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
  color: var(--muted-on-white);
}

.partners__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr));
  gap: 0;
  border-top: 1px solid var(--line-on-white);
  border-left: 1px solid var(--line-on-white);
}
.partners__grid li {
  border-right: 1px solid var(--line-on-white);
  border-bottom: 1px solid var(--line-on-white);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 2.2vw, 1.75rem);
  aspect-ratio: 16/10;
}
.partners__grid img {
  max-height: clamp(1.5rem, 3vw, 2.15rem);
  max-width: 100%;
  width: auto;
  filter: grayscale(1);
  opacity: 0.85;
  transition: filter var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}
.partners__grid li:hover img,
.partners__grid li:focus-within img {
  filter: grayscale(0);
  opacity: 1;
}

/* Phone: three across, and the marks sized to actually fill the cell.
   Two things were shrinking them. The grid was auto-filling on a 9.5rem track,
   which lands on two columns at 390px; and `max-height` is a clamp whose 3vw
   term collapses on a narrow screen, so it bottomed out at its 1.5rem floor -
   every logo rendered at 24px inside a 77px-tall cell, using under a third of
   the space it had.

   A 3-column cell is only ~117px wide, so the padding comes down hard: at the
   old 16px a side, 27% of the cell was margin. */
@media (max-width: 36rem) {
  .partners__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .partners__grid li {
    padding: 0.5rem 0.35rem;
    aspect-ratio: 4/3;
  }
  .partners__grid img {
    max-height: 2.25rem;
    max-width: 100%;
  }
}
/* ---------- Capabilities ----------
   Same section shape as .partners - hairline rule with two mono ticks, statement,
   lede on a measure, then a grid whose cells draw their own rules. Kept on the
   same white ground so it reads as a pair with the partners block rather than as
   a second copy of the black .index list two sections above. */
.capability {
  position: relative;
  background-color: var(--black);
  background-image: url(img/capability-bg.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--white);
  --muted-on-black: rgba(255, 255, 255, 0.86);
  --line-on-black: rgba(255, 255, 255, 0.3);
  padding: clamp(1.25rem, 4vw, 4.5rem) clamp(1rem, 4vw, 5rem);
}
.capability::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.68);
}

/* iOS Safari does not honour background-attachment: fixed - it pins the image to
   the document instead, which scales it to the full page height and shows a
   sliver of a 1600px photo blown up past 20000px. Scroll on touch. */
@media (hover: none), (max-width: 48rem) {
  .capability {
    background-attachment: scroll;
  }
}
.capability__inner {
  position: relative;
  z-index: 1;
  max-width: 82rem;
  margin: 0 auto;
  background-color: transparent;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: clamp(2rem, 5vw, 3.75rem) clamp(1.25rem, 3.5vw, 3.5rem) clamp(2.5rem, 6vw, 4.5rem);
}

/* No backdrop-filter (older Firefox with the flag off, some in-app browsers):
   a fully transparent panel would leave white type on a sharp photograph. Fall
   back to a dark sheet so the contrast is carried by opacity instead of blur. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .capability__inner {
    background-color: rgba(0, 0, 0, 0.45);
  }
}
.capability__rule {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  border-bottom: 1px solid var(--line-on-black);
  padding-bottom: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.capability__rule .tick {
  color: var(--muted-on-black);
}

/* The one piece of brand blue in the section, and the only one on this screen.
   It is a FILL, not a text colour: #1944f1 has a relative luminance of 0.107,
   and the brightest slice of photograph that passes behind this panel measures
   0.107 too - blue type would sit at 1.00:1 and disappear outright. As a solid
   ground under white it reads at 6.69:1 instead. */
.capability__rule .tick:first-child {
  background-color: var(--blue);
  color: var(--white);
  padding: 0.45em 0.75em;
}

.capability__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}

.capability__lede {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.65;
  max-width: 62ch;
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
  color: var(--muted-on-black);
}

.capability__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 0;
  border-top: 1px solid var(--line-on-black);
  border-left: 1px solid var(--line-on-black);
}

.capability__group {
  border-right: 1px solid var(--line-on-black);
  border-bottom: 1px solid var(--line-on-black);
  padding: clamp(1.25rem, 2.4vw, 1.9rem);
}

/* Deliberately not .tick, though it is the same treatment: .tick is declared far
   later in this file so its muted-on-black colour would win the source-order tie,
   and its `white-space: nowrap` would stop "Experience & Showcase" wrapping inside
   a narrow cell. */
.capability__name {
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 1.25vw, 1.2rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--white);
  min-height: 2.7em;
  margin: 0 0 clamp(0.9rem, 1.8vw, 1.25rem);
}

.capability__items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.capability__items li {
  display: grid;
  grid-template-columns: 1.4em 1fr;
  font-family: var(--font-mono);
  font-size: clamp(0.68rem, 0.85vw, 0.78rem);
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--muted-on-black);
}
.capability__items li + li {
  margin-top: 0.55rem;
}
.capability__items li::before {
  content: "→";
  opacity: 0.55;
}

/* ---------- Testimonials ----------
   Was the only centred section on the page, and the only one using grey rounded
   cards on white - which is what made it read as a different website. Rebuilt in
   the same language as everything else: a hairline rule with mono ticks, quotes
   in Lora on black, and the attribution on its own rule. The carousel and its
   breakpoints are untouched. */
.testimonails {
  position: relative;
  background-color: var(--white);
  color: var(--black);
  text-align: left;
  padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 4vw, 5rem) clamp(4rem, 9vw, 7rem);
  /* Dot field. Deliberately NOT `z-index: -1` - a negative index would put the
     pseudo-element behind the section's own white background and it would never
     be seen. It sits at 0 and the content is lifted to 1 instead. */
}
.testimonails::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(25, 68, 241, 0.16) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
.testimonails .testimonails__inner {
  position: relative;
  z-index: 1;
  max-width: 82rem;
  margin: 0 auto;
}
.testimonails .testimonails__rule {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  border-bottom: 1px solid var(--line-on-white);
  padding-bottom: 1rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.testimonails .tick {
  color: var(--muted-on-white);
}
.testimonails .swiper-slide {
  display: flex;
  height: auto;
  padding: 0;
  margin-top: 0;
  text-align: left;
}
.testimonails .inner-Div {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
  background: transparent;
  border-radius: 0;
  border-top: 1px solid var(--line-on-white);
  padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(0.75rem, 1.4vw, 1.15rem) 0 0;
}
.testimonails .inner-Div .stars {
  display: flex;
  justify-content: flex-start;
  gap: 0.2rem;
}
.testimonails .inner-Div i {
  color: orange;
  font-size: 0.72rem;
}
.testimonails .inner-Div p {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.55;
  color: var(--black);
  margin: 0;
}
.testimonails .inner-Div .user {
  margin-top: auto;
  padding-top: clamp(0.9rem, 1.8vw, 1.25rem);
}
.testimonails .inner-Div .username {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--black);
  margin: 0;
}
.testimonails .inner-Div .role {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-on-white);
  margin: 0.2rem 0 0;
}

.cta {
  background-color: var(--blue-pale);
  color: var(--black);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 5rem) clamp(3rem, 6vw, 5rem);
}
.cta .cta__rule {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  border-bottom: 1px solid var(--line-on-white);
  padding-bottom: 1rem;
}
.cta .cta__rule--bottom {
  border-bottom: none;
  border-top: 1px solid var(--line-on-white);
  padding: 1.4rem 0 0;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  flex-wrap: wrap;
  align-items: center;
}
.cta .cta__statement {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 4.6vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  display: flex;
  flex-direction: column;
  max-width: 16ch;
}
.cta .cta__line--accent {
  color: var(--blue);
}
.cta .cta__lede {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.6;
  max-width: 42ch;
  margin: 0;
  color: var(--muted-on-white);
}
.cta .tick {
  color: var(--muted-on-white);
}

@media (max-width: 700px) {
  .cta .cta__rule--bottom {
    gap: 1.5rem;
  }
}
@media (max-width: 700px) {
  .cta .cta__rule--bottom {
    gap: 1.75rem;
  }
}
footer {
  background-color: var(--black);
  padding: clamp(3.5rem, 6vw, 6rem) clamp(1.25rem, 4vw, 3rem) clamp(2.5rem, 4vw, 3.5rem);
  font-family: var(--font-footer);
}
footer p {
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.7;
  font-family: var(--font-footer);
  color: var(--muted-on-black) !important;
}
footer h5 {
  font-size: 1.1rem;
  color: var(--white);
  font-family: var(--font-footer);
  font-weight: 600;
  margin-bottom: clamp(1rem, 1.6vw, 1.4rem);
}
footer li {
  font-family: var(--font-footer);
}
footer i {
  color: var(--blue);
  margin: 0.5rem;
  font-size: 0.5rem;
}
footer {
  /* The link markers were `fa-greater-than` - a maths operator, not a UI
     chevron - set at 8px with 8px of margin on all four sides, which is why
     they read as stray blue specks. `li > span > i` picks out just those:
     the address and phone icons sit a level deeper, inside a <p>. */
}
footer li > span > i {
  font-size: 0.62rem;
  margin: 0 0.45rem 0 0;
  vertical-align: baseline;
}
footer .sec i {
  font-size: 0.8rem;
}
footer a {
  color: var(--muted-on-black);
  font-size: 14px;
  font-weight: 400;
  transition: var(--tr-interactive);
}
footer a:hover {
  color: var(--blue-soft);
  font-weight: 500;
}
footer a img {
  width: 70%;
}
footer .row {
  align-items: start;
  padding: 0;
  row-gap: clamp(2.5rem, 4vw, 3.5rem);
}
footer .row ul {
  padding: 0;
  margin-bottom: 0;
}
footer .row li {
  margin-bottom: 0.75rem;
}
footer .row li:last-child {
  margin-bottom: 0;
}
footer .row2 ul li {
  margin-top: 0.5rem;
}
footer .row2 ul li a i {
  font-size: 1rem;
  color: var(--white);
}
footer .row2 ul li a {
  background-color: var(--surface-on-black);
  margin-right: 0.5rem;
  padding: 0.5rem 0.2rem;
  border-radius: 5rem;
}
footer .row2 ul li a:hover {
  background-color: var(--blue);
}
footer .row2 {
  margin-top: clamp(3rem, 5vw, 4.5rem);
}
footer .row2 > [class^=col] {
  border-top: 1px solid var(--line-on-black);
  padding-top: clamp(2rem, 3vw, 2.75rem);
}
footer .row2 form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
footer .row2 input {
  flex: 1 1 20rem;
  width: auto;
  max-width: 30rem;
  padding: 0.85rem 1.15rem;
  border: none;
  outline: none;
  margin: 0;
  text-align: center;
}

@media only screen and (max-width: 700px) {
  footer {
    padding-inline: 0;
  }
  footer .container {
    padding-inline: 1.25rem;
  }
  footer .row {
    --bs-gutter-x: 1rem;
  }
  form {
    display: flex;
    margin: 1rem 0;
  }
  .portfolio .my-5 {
    margin: 0 !important;
  }
  .hiddenInPhone {
    display: none;
  }
  .showInPhone {
    display: block;
  }
  header .container {
    padding: 0;
  }
  header .row {
    --bs-gutter-x: 0;
  }
  header img {
    width: 60%;
  }
  header i {
    color: var(--white);
  }
  header .row > .logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
  }
  header .row > .logo h1 {
    font-size: 2.5rem;
  }
  header .row > .logo .ham {
    display: inline;
    font-size: 2rem;
    margin-right: 0rem;
  }
  header .row .menu .menuDiv .cross {
    display: inline;
    position: fixed;
    font-size: 1.2rem;
    border-radius: 5rem;
    background-color: var(--blue);
    color: var(--white);
    top: 1rem;
    right: 1rem;
    padding: 0.5rem 1rem;
  }
  header .row .menu .menuDiv .menuLogo {
    display: block;
    width: min(52vw, 13.5rem);
    margin: 0 2rem;
    padding: 1.75rem 0 1.5rem;
    border-bottom: 1px solid var(--line-on-black);
  }
  header .row .menu .menuDiv .menuLogo img {
    width: 100%;
    height: auto;
    display: block;
  }
  header .row .menu .menuDiv {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background-color: var(--black);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    transform: translateX(-110%);
  }
  header .row .menu .menuDiv ul {
    flex-direction: column;
    align-items: start;
    padding-right: 2rem;
  }
  header .row .menu .menuDiv ul li {
    line-height: 4rem;
  }
  header .row .menu .menuDiv ul li a {
    text-align: start;
    font-size: 20px;
    color: var(--white);
    font-weight: 400;
  }
  header .row .menu .menuDiv ul .dropdown-center {
    width: 100%;
  }
  header .row .menu .menuDiv ul .dropdown-center > .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
  }
  header .row .menu .menuDiv ul .dropdown-center > .dropdown-toggle::after {
    display: none;
  }
  header .row .menu .menuDiv ul .dropdown-center .navChev {
    display: inline-block;
    font-size: 0.7rem;
    line-height: 1;
    color: var(--muted-on-black);
    transition: transform var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
  }
  header .row .menu .menuDiv ul .dropdown-center.is-open .navChev {
    transform: rotate(180deg);
    color: var(--blue-soft);
  }
  header .row .menu .menuDiv ul .serviceList {
    display: block;
    position: static;
    width: 100%;
    min-width: 0;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    transition: max-height var(--dur-base) var(--ease);
  }
  header .row .menu .menuDiv ul .serviceList li {
    line-height: 1.4;
    border-bottom: 1px solid var(--line-on-black);
  }
  header .row .menu .menuDiv ul .serviceList li:last-child {
    border-bottom: 0;
  }
  header .row .menu .menuDiv ul .serviceList .dropdown-item {
    display: block;
    padding: 0.85rem 0 0.85rem 1.25rem;
    background: transparent;
    color: var(--muted-on-black);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    white-space: normal;
  }
  header .row .menu .menuDiv ul .serviceList .dropdown-item:hover,
  header .row .menu .menuDiv ul .serviceList .dropdown-item:focus {
    background: transparent;
    color: var(--blue-soft);
  }
  header .row .menu .menuDiv ul .dropdown-center.is-open .serviceList {
    max-height: 30rem;
  }
  header .row .menu .menuDiv ul .serviceList__all {
    display: block;
  }
  header .contact {
    display: none;
  }
  .divHeadings p {
    width: 100% !important;
  }
  .first {
    padding-top: 5rem;
  }
  .first .row {
    flex-direction: column-reverse;
  }
  .first h1 {
    font-size: 2rem;
  }
  .first img {
    width: 94vw;
    object-fit: cover;
  }
  .aboutUs {
    margin: 2rem 0;
  }
  .aboutUs .leftAu {
    margin-bottom: 2rem;
  }
  .aboutUs .leftAu img:last-of-type {
    width: 52%;
    right: 0rem;
    bottom: -4rem;
  }
  .aboutUs #HideImgInPhone {
    display: none;
  }
  .aboutUs {
    /*.rightAu{
      justify-items: center;
    }*/
  }
  .aboutUs .rightAu h3 {
    font-size: 28px;
  }
  .aboutUs .leftAu img:first-of-type {
    width: 100%;
  }
  .our-services .contentDiv {
    overflow: hidden;
    position: relative;
    width: 100%;
  }
  .our-services .contentDiv::after {
    content: "";
    background-color: var(--blue-wash);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
  }
  .our-services .contentDiv h2 {
    opacity: 1;
    padding: 0.5rem 0.5rem;
    left: 0 !important;
    margin-left: 0rem;
  }
  .our-services .contentDiv h2 span {
    background-color: var(--scrim-soft);
    padding: 0.5rem 0.5rem;
  }
  .our-services .row:last-child {
    margin-bottom: 2rem;
  }
  .our-services .row > div {
    padding-inline: 0.35rem;
  }
  .our-services {
    padding-bottom: 3px;
  }
  #generalEvent .container {
    margin-top: 1.5rem !important;
    margin-bottom: 0rem !important;
  }
  .wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
  }
  .wrapper::after {
    content: "";
    background-color: var(--blue-wash);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
  }
  .wrapper h2 {
    width: 78% !important;
    opacity: 1 !important;
    background-color: var(--scrim-soft);
    padding: 0.2rem 0.2rem !important;
    left: 0 !important;
    bottom: 0 !important;
    margin-left: 0.5rem !important;
  }
  .portfolio {
    padding: 0 1rem 20px;
  }
  .contact-detail {
    padding: 0 5px 20px 5px;
  }
  .contact-detail iframe {
    height: 15rem;
    margin-top: 1rem;
  }
  .contact-detail .first-cd {
    padding: 1rem 0;
  }
  .contact-detail .first-cd .bg-dark {
    width: 85%;
  }
  .contact-detail img {
    width: 100%;
    margin-top: 1rem;
  }
  .brand img {
    padding: 1rem;
  }
  .brand .row {
    justify-content: center;
    border: none;
  }
  .brand .row > div {
    width: 45%;
    border: none;
    border-bottom: 1px solid var(--line-on-white);
  }
  .brand h3 {
    font-size: 20px;
  }
  .brand p {
    padding: 0 20px;
  }
  .cta h2 {
    font-size: 20px;
  }
  footer #connectBtn {
    height: 3rem;
  }
  .cta p {
    width: 100%;
    text-align: center;
  }
}
@media (max-width: 992px) and (min-width: 700px) {
  header .container {
    padding: 0;
  }
  header .row {
    --bs-gutter-x: 0;
  }
  header img {
    width: 40%;
  }
  header i {
    color: var(--white);
  }
  header .row > .logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0rem;
    width: 99%;
  }
  header .row > .logo h1 {
    font-size: 2.5rem;
  }
  header .row > .logo .ham {
    display: inline;
    font-size: 2rem;
  }
  header .row .menu .menuDiv .cross {
    display: inline;
    position: fixed;
    font-size: 1.2rem;
    border-radius: 5rem;
    background-color: var(--blue);
    color: var(--white);
    top: 1rem;
    right: 1rem;
    padding: 0.5rem 1rem;
  }
  header .row .menu .menuDiv .menuLogo {
    display: block;
    width: min(52vw, 13.5rem);
    margin: 0 2rem;
    padding: 1.75rem 0 1.5rem;
    border-bottom: 1px solid var(--line-on-black);
  }
  header .row .menu .menuDiv .menuLogo img {
    width: 100%;
    height: auto;
    display: block;
  }
  header .row .menu .menuDiv {
    position: fixed;
    top: 0px;
    left: 0;
    width: 95vw;
    height: 100vh;
    background-color: var(--black);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    transform: translateX(-110%);
  }
  header .row .menu .menuDiv ul {
    flex-direction: column;
    align-items: start;
  }
  header .row .menu .menuDiv ul li {
    line-height: 4rem;
  }
  header .row .menu .menuDiv ul li a {
    text-align: start;
    font-size: 2.2rem;
    color: var(--black);
    font-weight: 600;
  }
  header .contact {
    display: none;
  }
  .first img {
    width: 100%;
  }
  .first {
    padding-top: 3.7rem;
  }
  .first .row {
    flex-direction: column-reverse;
  }
  .first .row > div:first-of-type {
    background-color: var(--black);
    padding: 5rem 2rem;
  }
  .aboutUs {
    margin: 44rem 0 0 0;
  }
  .aboutUs .leftAu {
    margin-bottom: 10rem;
  }
  .brand .row > div {
    border: none;
  }
  .our-services .row > div {
    padding: 0;
  }
  .our-services .hiddenInPhone {
    display: none;
  }
  .portfolio {
    padding: 0;
  }
  .portfolio img#tablet {
    display: none !important;
  }
  .contact-detail {
    padding: 0;
  }
  .contact-detail .row .first-cd {
    padding: 2rem 0.5rem;
  }
  .contact-detail .row .first-cd .bg-dark {
    width: 85%;
  }
  .contact-detail .second-cd {
    display: none;
  }
  footer #connectBtn {
    height: 3rem;
  }
}
@media only screen and (min-width: 768px) {
  .our-services h4 {
    font-size: 38px;
  }
  .contactPage .contactInfo {
    justify-content: space-evenly !important;
  }
}
/*@media only screen and (max-width: 440px) {
  .floatingIcon {
    display: none;
  }
}*/
@media (min-width: 1400px) {
  .first iframe {
    width: 100%;
    height: 700px;
  }
}
.contactPage .banner {
  margin-bottom: 3rem;
  width: 100%;
  background-color: var(--black);
  text-align: center;
  padding-top: 8rem;
  padding-bottom: 2rem;
  color: var(--white);
}
.contactPage .banner span {
  font-size: 48px;
}
.contactPage .banner p {
  font-family: var(--font-body);
}
.contactPage .banner i {
  font-size: 0.8rem;
  padding: 0rem 0.2rem;
}
.contactPage .contact {
  background-color: var(--white);
  color: var(--black);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.contactPage .contact img {
  width: 585px;
  height: 682px;
  object-fit: cover;
}
.contactPage .contact .right {
  width: 585px;
  height: 682px;
  margin-bottom: 2rem;
  margin-top: 2rem;
  padding: 40px;
  box-shadow: rgba(0, 0, 0, 0.11) 3px 3px 15px 0px;
}
.contactPage .contact .right h2 {
  color: var(--blue);
  font-weight: 500;
  font-size: 1rem;
  text-transform: uppercase;
}
.contactPage .contact .right h3 {
  font-size: 1.4rem;
  font-size: 1.8rem;
  font-weight: 700;
  padding-bottom: 1rem;
}
.contactPage .contact .right form {
  display: flex;
  flex-direction: column;
}
.contactPage .contact .right form #name,
.contactPage .contact .right form #email,
.contactPage .contact .right form #subject,
.contactPage .contact .right form #message,
.contactPage .contact .right form #submit {
  border: 0.8px solid var(--line-on-white);
  margin-bottom: 1rem;
  line-height: 21px;
  padding: 15px 25px;
  text-align: left;
  color: var(--muted-on-white);
}
.contactPage .contact .right form button {
  width: 12rem;
  padding: 1rem 2rem;
  text-align: center;
  background: var(--blue);
  color: var(--white);
  margin-top: 2rem;
  border: none;
}
.contactPage .contactInfo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: start;
  color: var(--black);
  margin-top: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 2rem;
  gap: 1rem;
  margin-left: 1rem;
}
.contactPage .contactInfo i {
  background: var(--blue);
  color: var(--white);
  padding: 1rem;
  margin-right: 1rem;
}
.contactPage .contactInfo span {
  font-size: 1.2rem;
  font-size: clamp(1.2rem, 1.14rem + 0.3vw, 1.5rem);
  font-weight: 500;
}
.contactPage .contactInfo span i {
  background: var(--blue);
  color: var(--white);
  padding: 1rem;
}
.contactPage .contactInfo .phone,
.contactPage .contactInfo .location,
.contactPage .contactInfo .mail {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-family: var(--font-display);
  font: 600;
}
.contactPage .contactInfo .phone p,
.contactPage .contactInfo .location p,
.contactPage .contactInfo .mail p {
  color: var(--black);
  font-weight: 500;
  font-family: var(--font-body);
  margin-bottom: 0;
}
.contactPage .contactInfo .phone p + p,
.contactPage .contactInfo .location p + p,
.contactPage .contactInfo .mail p + p {
  margin-top: 0.35rem;
}
.contactPage iframe {
  width: 100%;
  height: 650px;
}

@media screen and (min-device-width: 320px) and (max-device-width: 768px) {
  .contactPage .contact img {
    width: 100% !important;
  }
  .contactPage .contact .right h3 {
    font-size: 20px;
  }
  .contactPage iframe {
    object-position: center;
    height: auto;
  }
  .contactPage .contactInfo {
    margin-top: 3rem;
  }
  .aboutPage .container {
    margin: 4rem 0rem 0rem 0rem !important;
  }
  .aboutPage .container .leftAu {
    margin-bottom: 6rem !important;
  }
}
.our-services .banner {
  width: 100%;
  background-color: var(--black);
  text-align: center;
  padding-top: 8rem;
  padding-bottom: 2rem;
  color: var(--white);
}
.our-services .banner span {
  font-size: 2rem;
}
.our-services .banner i {
  font-size: 0.8rem;
  padding: 0rem 0.2rem;
}

.projects img#tablet {
  display: none !important;
}
.projects .banner {
  width: 100%;
  background-color: var(--black);
  text-align: center;
  padding-top: 8rem;
  padding-bottom: 2rem;
  color: var(--white);
}
.projects .banner span {
  font-size: 48px;
}
.projects .banner p {
  font-family: var(--font-body);
}
.projects .banner i {
  font-size: 0.8rem;
  padding: 0rem 0.2rem;
}

.portfolio .banner {
  width: 100%;
  background-color: var(--black);
  text-align: center;
  padding-top: 8rem;
  padding-bottom: 2rem;
  color: var(--white);
}
.portfolio .banner span {
  font-size: 2rem;
}
.portfolio .banner i {
  font-size: 0.8rem;
  padding: 0rem 0.2rem;
}
.portfolio {
  /*#projectHide {
    display: none;
  }*/
}

.servicePage .banner {
  width: 100%;
  background-color: var(--black);
  text-align: center;
  padding-top: 8rem;
  padding-bottom: 2rem;
  color: var(--white);
}
.servicePage .banner span {
  font-size: 48px;
}
.servicePage .banner p {
  font-family: var(--font-body);
}
.servicePage .banner i {
  font-size: 0.8rem;
  padding: 0rem 0.2rem;
}

.aboutPage .banner {
  width: 100%;
  background-color: var(--black);
  text-align: center;
  padding-top: 8rem;
  padding-bottom: 2rem;
  color: var(--white);
}
.aboutPage .banner span {
  font-size: 3rem;
}
.aboutPage .banner p {
  font-family: var(--font-body);
}
.aboutPage .banner i {
  font-size: 0.8rem;
  padding: 0rem 0.2rem;
}

.corporatePage .banner,
.micePage .banner,
.weddingPage .banner,
.generalPage .banner,
.publicityPage .banner {
  width: 100%;
  background-color: var(--black);
  text-align: center;
  padding-top: 8rem;
  padding-bottom: 2rem;
  color: var(--white);
}
.corporatePage .banner span,
.micePage .banner span,
.weddingPage .banner span,
.generalPage .banner span,
.publicityPage .banner span {
  font-size: 2rem;
}
.corporatePage .banner i,
.micePage .banner i,
.weddingPage .banner i,
.generalPage .banner i,
.publicityPage .banner i {
  font-size: 0.8rem;
  padding: 0rem 0.2rem;
}

.wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.wrapper::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.wrapper:hover h2 {
  opacity: 1;
}
.wrapper h2 {
  opacity: 0;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  font-size: clamp(0.5rem, 0.8rem + 1vw, 2rem);
}
.wrapper h2 {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  color: var(--white);
  opacity: 0;
  z-index: 50;
  transition: opacity var(--dur-base) var(--ease);
  font-weight: 700;
}

.btn-floating:hover img {
  margin-bottom: 3px;
}

.btn-floating {
  position: fixed;
  right: 25px;
  overflow: hidden;
  width: auto;
  min-width: 50px;
  max-width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 12px;
  border-radius: 100px;
  border: 0;
  color: var(--white);
  z-index: 10000;
  transition: var(--tr-interactive), max-width var(--dur-slow) var(--ease), padding-right var(--dur-slow) var(--ease);
}

.btn-floating:hover {
  max-width: 15rem;
  padding-right: 20px;
  cursor: pointer;
}

.btn-floating.whatsapp:hover {
  animation-play-state: paused;
}

.btn-floating span {
  font-size: 16px;
  margin-left: 8px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}

.btn-floating:hover span {
  opacity: 1;
}

/* Phone */
.btn-floating.phone {
  bottom: 85px;
  background-color: var(--black);
}

.btn-floating.phone:hover {
  background-color: var(--blue);
}

/* WhatsApp */
.btn-floating.whatsapp {
  background-color: var(--blue);
  bottom: 25px;
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

.btn-floating.whatsapp:hover {
  background-color: var(--blue);
}

.floatingIcon img {
  width: 3rem;
}

/* CTA Button styling */
#cta-button {
  cursor: pointer;
}

/* Form styling */
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: transparent;
  border: none;
  font-size: 20px;
  color: var(--blue);
  cursor: pointer;
  background: var(--white);
}

/* Form fields styling */
label {
  margin: 10px 0 5px;
  font-family: var(--font-body);
  display: flex;
}

input {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid var(--line-on-white);
  font-size: 15px;
  font-weight: 600;
  width: 100%;
  margin-bottom: 20px;
}

textarea, select {
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid var(--line-on-white);
  border-radius: 5px;
  font-size: 15px;
  font-weight: 600;
  width: 100%;
}

select {
  margin-bottom: 15px;
  width: 100%;
}

option {
  background-color: var(--white);
  border: none;
  cursor: pointer;
}

option:hover {
  background: var(--blue);
}

.event-date {
  width: 100%;
}

textarea {
  height: 80px;
  width: 100%;
}

.submit-btn {
  background: var(--blue);
  color: var(--white);
  padding: 10px;
  font-size: 14px;
  line-height: 22px;
  margin-top: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-family: var(--font-display);
  font-weight: 700;
}

#projectPage {
  padding: 0 3rem 6rem 3rem;
}

.privacyPolicy {
  padding: 7rem 0 !important;
}
.privacyPolicy li {
  list-style: disc;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 2;
}
.privacyPolicy h2,
.privacyPolicy h4 {
  font-family: var(--font-display);
  font-weight: 600;
}

@media only screen and (max-width: 700px) {
  #projectPage {
    padding: 0 1rem 6rem 1rem;
  }
  .contactPage .banner {
    margin-bottom: 1rem;
  }
  .contactPage .contact .right {
    height: 540px;
    box-shadow: none;
    margin-top: 0rem;
    padding: 25px;
  }
  input {
    font-size: 13px;
  }
  textarea {
    font-size: 13px;
  }
  .contactPage .contact .right form button {
    margin-top: 0rem;
  }
}
.aboutUsSec {
  padding: 50px 20px 50px 20px;
}
.aboutUsSec img {
  width: 90%;
}
.aboutUsSec span {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
}
.aboutUsSec h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--black);
  font-size: 28px;
}
.aboutUsSec h5 {
  font-family: var(--font-display);
  font-weight: 600;
}
.aboutUsSec h6 {
  line-height: 2.5rem;
  font-size: 16px;
  font-family: var(--font-body);
  font-weight: 600;
}
.aboutUsSec p {
  font-family: var(--font-body);
  font-size: 16px;
}
.aboutUsSec i {
  margin: 0 0.5rem;
  color: var(--blue);
}
.aboutUsSec .myButton i {
  color: var(--white);
}

@media screen and (min-device-width: 320px) and (max-device-width: 768px) {
  .aboutUsSec {
    padding: 20px 10px 40px 10px;
  }
  .aboutUsSec .attention {
    margin-bottom: 25px;
  }
  .aboutUsSec img {
    width: 100%;
    margin-bottom: 25px;
  }
  .aboutUs .leftAu {
    position: relative;
    order: 1;
    margin-top: 30px;
  }
}
/* ---------- About: Mission, Vision & Values ----------
   Was a bordered card centred on the page: Font Awesome pictograms for icons,
   a grey bar on the open row, and a JS-measured `max-height` that clipped its
   own last line. Rebuilt on the numbered-row system the homepage index already
   uses, on the same pastel ground it had before. */
.mvv {
  background-color: var(--blue-pale);
  color: var(--black);
  padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 4vw, 5rem) clamp(3.5rem, 8vw, 7rem);
}

.mvv__inner {
  max-width: 72rem;
  margin: 0 auto;
}

.mvv .tick {
  color: var(--muted-on-white);
}

.mvv__rule,
.mvv__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
}

.mvv__rule {
  border-bottom: 1px solid var(--line-on-white);
  padding-bottom: 1rem;
}

.mvv__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 5.2vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2rem, 5vw, 3.25rem);
  max-width: 18ch;
}

.mvv__list {
  border-top: 1px solid var(--line-on-white);
}

.mvv__item {
  border-bottom: 1px solid var(--line-on-white);
}

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

.mvv__row {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.mvv__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.5rem);
  width: 100%;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mvv__name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.6vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  transition: color var(--dur-base) var(--ease);
}

.mvv__chev {
  align-self: center;
  font-size: 0.7rem;
  color: var(--muted-on-white);
  transition: transform var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.mvv__head:hover .mvv__name,
.mvv__head:focus-visible .mvv__name,
.mvv__item.is-open .mvv__name {
  color: var(--blue);
}

.mvv__item.is-open .mvv__chev {
  transform: rotate(180deg);
  color: var(--blue);
}

/* Animates between 0fr and 1fr rather than to a measured pixel height. The old
   version froze `max-height` to `scrollHeight` at click time - while the
   panel's padding was still transitioning in from zero - so every panel came
   out short by its own padding and cut off the last line. */
.mvv__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease);
}

.mvv__item.is-open .mvv__panel {
  grid-template-rows: 1fr;
}

.mvv__panelInner {
  min-height: 0;
  overflow: hidden;
}

.mvv__panelInner p {
  color: var(--muted-on-white);
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.65;
  max-width: 62ch;
  margin: 0 0 clamp(1.25rem, 2.6vw, 1.75rem);
  padding-left: calc(2ch + clamp(1rem, 3vw, 2.5rem));
}

.mvv__foot {
  border-top: 1px solid var(--line-on-white);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 40rem) {
  .mvv__head {
    gap: 0.9rem;
  }
  .mvv__panelInner p {
    padding-left: 0;
  }
  .mvv__foot {
    gap: 1.25rem;
  }
}
/* Shared page header, used by every inner page. Was a centred 55px title over a centred paragraph
   running the full 1400px container - about 180 characters a line, which is
   both the least readable and the most template-looking option available. */
.pagehead {
  background-color: var(--black);
  color: var(--white);
  padding: clamp(7.5rem, 15vh, 10.5rem) clamp(1.25rem, 4vw, 5rem) clamp(2.5rem, 5vw, 4rem);
}
.pagehead .pagehead__rule {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  border-bottom: 1px solid var(--line-on-black);
  padding-bottom: 1.1rem;
}
.pagehead .pagehead__title {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(2rem, 6.5vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: clamp(1.75rem, 4vw, 3rem) 0 0;
  display: flex;
  flex-direction: column;
  color: var(--white);
}
.pagehead .pagehead__lede {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  line-height: 1.65;
  max-width: 58ch;
  margin: clamp(1.25rem, 2.5vw, 2rem) 0 0;
  color: var(--muted-on-black);
}

@media (max-width: 40rem) {
  .pagehead {
    padding-top: clamp(5.5rem, 11vh, 7rem);
  }
  .pagehead .pagehead__rule {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
}
@media only screen and (max-width: 700px) {
  .pagehead__lede {
    font-size: 0.95rem;
  }
}
/*-------Service Pages Images----------*/
main {
  height: 400px;
  margin: 100px auto 0;
  /*box-shadow: 0 0 3px var(--shadow);
      */
  position: relative;
  overflow: hidden;
  background: var(--black);
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: var(--tr-interactive);
}

img {
  object-fit: contain;
}

.nav {
  text-align: center;
  margin-top: 15px;
  padding: 40px;
}

.nav button {
  font-size: 29px;
  padding: 8px 20px;
  margin: 0 10px;
  cursor: pointer;
  color: var(--blue);
  border: none;
  font-weight: 800;
}

.nav button:hover {
  color: var(--white);
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.8);
  padding: 5px 10px;
  font-size: 22px;
  font-weight: 800;
  border-radius: 4px;
  text-decoration: none;
  color: var(--black);
  font-weight: bold;
  color: var(--blue);
}

.close-btn:hover {
  color: var(--white);
}

/* --------Gallery Section-------- */
/* ---------- Gallery ----------
   One grid for all seven gallery pages. Replaces two competing systems: fixed
   418px flex tiles (which abandoned up to 328px of row at 1280px) plus a
   79-line inline <style> block duplicated into wedding, social and project.
   Captions now sit under the image on a hairline, matching the homepage plates,
   instead of as a scrim bar painted over the photograph. */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.75rem);
  padding: 0 clamp(1.25rem, 4vw, 5rem) clamp(4rem, 8vw, 7rem);
  margin: 0;
}

.image-wrapper {
  position: relative;
  margin: 0;
  min-width: 0;
}

/* Covers <img> and <video> alike, so the old .notForVideo patch is gone. */
.image-wrapper > .popup-img {
  display: block;
  width: 100%;
  aspect-ratio: 3/2;
  height: auto;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform var(--dur-slow) var(--ease);
}

.image-wrapper {
  overflow: clip;
}

.image-wrapper:hover > .popup-img,
.image-wrapper:focus-within > .popup-img {
  transform: scale(1.04);
}

.image-wrapper:hover .plate__name,
.image-wrapper:focus-within .plate__name {
  color: var(--blue-soft);
}

/* The fixed 418x240 `.image-wrapper` box that used to live here predates
   the unified `.gallery` grid. Being later in the source it beat the
   responsive rules above and pinned every figure to 418px, which is what
   pushed the gallery pages 64px past a 390px viewport. Sizing now comes
   from `.gallery` + `.image-wrapper > .popup-img` alone.
   `.image-wrapper-wedPg` and `.notForVideo` went with it - the gallery
   unification removed both classes from the markup. */
.popup-img:hover {
  opacity: 0.8;
  content: "";
}

.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10005;
  background-color: var(--scrim);
  padding: clamp(3.5rem, 9vh, 5.5rem) clamp(1rem, 5vw, 4.5rem);
}

.modal-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
}

.modal-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: var(--white);
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1100;
}

.close:hover {
  color: var(--blue);
}

.nav-btn {
  color: var(--white);
  font-size: 40px;
  font-weight: bold;
  background: none;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.5rem 0.75rem;
  line-height: 1;
  z-index: 1100;
}

.nav-btn:hover {
  color: var(--blue-soft);
}

.prev {
  left: 20px;
}

.next {
  right: 20px;
}

/* ✅ Mobile Responsive */
@media (max-width: 768px) {
  .popup-img {
    width: 100%;
    max-width: 90vw;
  }
  .modal-image {
    max-width: 95vw;
    max-height: 70vh;
  }
  .close {
    font-size: 32px;
    top: 10px;
    right: 15px;
  }
  .nav-btn {
    font-size: 30px;
  }
  .prev {
    left: 10px;
  }
  .next {
    right: 10px;
  }
}
@media (max-width: 480px) {
  .modal-content {
    flex-direction: column;
  }
  .modal-image {
    max-width: 100%;
    max-height: 60vh;
  }
  .nav-btn {
    top: auto;
    bottom: 20px;
    transform: none;
  }
  .prev {
    left: 30%;
  }
  .next {
    right: 30%;
  }
}
.zoom-on-scroll {
  transform: scale(1);
  font-size: 28px;
  opacity: 1;
  transition: transform 0.4s ease, font-size 0.4s ease;
}

.zoom-on-scroll.zoomed {
  transform: scale(1.2);
  font-size: 42px;
}

/* ============================================================
   EDITORIAL SYSTEM
   Micro-type in mono, statements in Lora, hairline rules,
   oversized numerals, generous negative space.
   ============================================================ */
/* Micro-type: counters, coordinates, labels. */
.tick {
  font-family: var(--font-mono);
  white-space: nowrap;
  font-size: clamp(0.6rem, 0.72vw, 0.72rem);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-on-black);
  line-height: 1.5;
}

.tick__coord {
  color: var(--white);
  opacity: 0.45;
  margin-left: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.tick--link {
  color: var(--muted-on-black);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.tick--link:hover, .tick--link:focus-visible {
  color: var(--blue);
}

.tick__down {
  display: inline-block;
  animation: tickDrift 2.4s ease-in-out infinite;
}

@keyframes tickDrift {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}
/* ---------------- Hero ---------------- */
.hero {
  background: var(--black);
  color: var(--white);
  min-height: 100svh;
  display: flex;
  padding: clamp(7rem, 13vh, 10rem) 0 clamp(2rem, 5vh, 3.5rem);
}

.hero__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(3rem, 8vh, 6rem);
  padding: 0 clamp(1.25rem, 4vw, 5rem);
}

/* ---------- Hero: statement and film ----------
   Two columns from 62rem up - 4fr of statement against 6fr of film. Below that
   they stack, so the film is never lost on a phone. */
.hero__cols {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}

.hero__media {
  width: min(100%, 92.4444444444vh);
  margin-left: auto;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--surface-on-black);
}
.hero__media iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 62rem) {
  .hero__cols {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  }
  /* The statement now lives in 40% of the row rather than the full width, so
     its width term has to come down or it overruns its own track.
     Scoped through `.hero` deliberately: this block sits earlier in the file
     than the base `.hero__statement` rule, so at equal specificity the base
     would win on source order. */
  .hero .hero__statement {
    font-size: clamp(2rem, min(8.6vw, 15vh), 9rem);
  }
}
.hero__rule {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
}

.hero__rule--top {
  border-bottom: 1px solid var(--line-on-black);
  padding-bottom: 1.1rem;
}

.hero__rule--bottom {
  border-top: 1px solid var(--line-on-black);
  padding-top: 1.1rem;
}

.hero__statement {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(3rem, min(13vw, 17vh), 12.5rem);
  line-height: 0.84;
  letter-spacing: -0.035em;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* The middle line used to step in - the one asymmetric gesture in the hero.
   Flush left now, at every width, so WE / MAKE / EVENTS. share a single edge. */
.hero__line--indent {
  margin-left: 0;
}

.hero__line--accent {
  color: var(--blue);
}

/* Landscape phones and short laptops: the fixed rem minimums above (7rem of
   top padding, 3rem gaps) are what push the hero past the screen, not the
   type. Tighten them so the whole section still fits one viewport. */
@media (max-height: 560px) {
  .hero {
    padding: clamp(5rem, 12vh, 6rem) 0 1rem;
  }
  .hero__inner {
    gap: 1.25rem;
  }
  .hero__statement {
    font-size: clamp(2rem, min(12vw, 17vh), 6rem);
  }
}
/* ---------------- Hero on phones ----------------
   Three fixes over the desktop rule: the statement is width-bound here (14.5vw
   gave only 56px on a 390px screen, ~16% of the viewport), the top rule ran out
   of room for two labels, and space-between left ~240px voids above and below
   a small statement. */
@media (max-width: 40rem) {
  .hero {
    min-height: 82svh;
    padding: clamp(5.5rem, 11vh, 7rem) 0 clamp(1.5rem, 3vh, 2.25rem);
  }
  .hero__inner {
    justify-content: flex-start;
    gap: clamp(1.25rem, 3.5vh, 2rem);
  }
  .hero__rule--bottom {
    margin-top: auto;
  }
  .hero__statement {
    font-size: clamp(2.75rem, min(23vw, 26vh), 6.5rem);
    line-height: 0.9;
    margin-top: clamp(1.5rem, 5vh, 3rem);
  }
  .hero__rule--top {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
  .tick__coord {
    display: none;
  }
  .hero__rule--bottom {
    padding-right: 3.75rem;
  }
}
/* ---------------- Numbered discipline index ---------------- */
.index {
  background: var(--black);
  color: var(--white);
  padding: clamp(4rem, 9vw, 8rem) clamp(1.25rem, 4vw, 5rem) clamp(5rem, 10vw, 9rem);
}

.index__rule {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--line-on-black);
  padding-bottom: 1.2rem;
}

.index__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.index__row {
  border-bottom: 1px solid var(--line-on-black);
}
.index__row > a {
  display: grid;
  grid-template-columns: clamp(2.75rem, 6vw, 5.5rem) 1fr auto;
  align-items: start;
  gap: clamp(0.75rem, 3vw, 2.5rem);
  padding: 0.5rem 0;
  color: var(--white);
  transition: padding-left 0.55s cubic-bezier(0.22, 0.7, 0.3, 1);
}
.index__row > a:hover,
.index__row > a:focus-visible {
  padding-left: clamp(0.5rem, 1.6vw, 1.4rem);
}

.index__num {
  font-family: var(--font-mono);
  font-size: clamp(0.68rem, 1vw, 0.85rem);
  letter-spacing: 0.14em;
  color: var(--muted-on-black);
  font-variant-numeric: tabular-nums;
  transition: color 0.4s ease;
  padding-top: clamp(0.15rem, 0.55vw, 0.5rem);
}

.index__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(1.15rem, 2.9vw, 2.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  transition: color 0.4s ease;
}

/* Collapsed by default; the hover reveal is the whole point of the row. */
.index__chain {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(0.6rem, 0.8vw, 0.72rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-on-black);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.55s cubic-bezier(0.22, 0.7, 0.3, 1), opacity 0.4s ease, margin-top 0.55s cubic-bezier(0.22, 0.7, 0.3, 1);
}
.index__chain i {
  font-style: normal;
  color: var(--blue);
  margin: 0 0.35em;
}

.index__arrow {
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 1.6vw, 1.35rem);
  color: var(--muted-on-black);
  transition: transform 0.5s cubic-bezier(0.22, 0.7, 0.3, 1), color 0.4s ease;
}

.index__row > a:hover .index__title,
.index__row > a:focus-visible .index__title {
  color: var(--blue);
}
.index__row > a:hover .index__num,
.index__row > a:focus-visible .index__num {
  color: var(--white);
}
.index__row > a:hover .index__chain,
.index__row > a:focus-visible .index__chain {
  max-height: 5rem;
  opacity: 1;
  margin-top: 0.9rem;
}
.index__row > a:hover .index__arrow,
.index__row > a:focus-visible .index__arrow {
  color: var(--blue);
  transform: translate(0.3rem, -0.3rem);
}

/* Touch devices never hover, so the chains stay open. */
@media (hover: none) {
  .index__chain {
    max-height: 5rem;
    opacity: 1;
    margin-top: 0.75rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tick__down {
    animation: none;
  }
  .index__row > a,
  .index__chain,
  .index__arrow {
    transition-duration: 0.01ms;
  }
}
/* ---------------- Contact form feedback ---------------- */
/* Honeypot. Positioned off-screen rather than display:none, because some bots
   deliberately skip fields that are hidden that way. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formNote {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.7;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.4rem;
  color: var(--black);
  border-left: 2px solid var(--blue);
  background: rgba(25, 68, 241, 0.06);
}

/* The palette has no red, so failure reads as weight rather than hue. */
.formNote--bad {
  border-left-color: var(--black);
  background: rgba(0, 0, 0, 0.05);
  font-weight: 500;
}

/* ---------------- Fixed-header and floating-button clearances ---------------- */
/* The site header is position:fixed, so anchor jumps would otherwise land with
   the target's first line hidden underneath it. */
[id] {
  scroll-margin-top: clamp(5rem, 9vh, 7.5rem);
}

/* The WhatsApp pill is fixed at bottom-right and was sitting on top of the
   hero's "Scroll to explore" link. Keep the rule's right end clear of it. */
.hero__rule--bottom {
  padding-right: 4.5rem;
}

@media (max-width: 40rem) {
  .hero__rule--bottom {
    padding-right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
  }
}
/* ============================================================
   MOTION SYSTEM
   One curve (--ease), one duration scale. Driven by assets/motion.js.
   ============================================================ */
/* ---------- A. Mask reveal ----------
   Type wipes up from behind a hairline rather than fading. Fading is the
   default of every page builder, which is exactly why it reads as one. */
[data-reveal] .reveal-line {
  display: block;
  overflow: hidden;
}

[data-reveal] .reveal-line > span {
  display: block;
  transition: transform var(--dur-reveal) var(--ease-reveal);
}

/* Only hidden once JS has confirmed it is running - see motion.js. Without
   this gate a failed script would leave every revealed heading invisible. */
.js-motion [data-reveal] .reveal-line > span {
  transform: translateY(105%);
}

[data-reveal].is-in .reveal-line > span {
  transform: translateY(0);
}

/* Stagger. Small enough to feel authored, not enough to wait for. */
[data-reveal] .reveal-line:nth-child(2) > span {
  transition-delay: 90ms;
}

[data-reveal] .reveal-line:nth-child(3) > span {
  transition-delay: 180ms;
}

[data-reveal] .reveal-line:nth-child(4) > span {
  transition-delay: 270ms;
}

/* Single-element variant, for images and rows rather than lines of type. */
[data-reveal=block] {
  transition: clip-path var(--dur-slow) var(--ease-mask);
}

.js-motion [data-reveal=block] {
  clip-path: inset(0 0 100% 0);
}

[data-reveal=block].is-in {
  clip-path: inset(0 0 0 0);
}

/* ---------- C. Rule wipe on hover ----------
   One interaction language: a blue rule draws left to right. Applied through
   existing selectors so no markup has to change. */
header .row > .menu > .menuDiv > ul > li > a,
footer .fcols a,
.tick--link {
  position: relative;
}

header .row > .menu > .menuDiv > ul > li > a::after,
footer .fcols a::after,
.tick--link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.25em;
  width: 100%;
  height: 1px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}

header .row > .menu > .menuDiv > ul > li > a:hover::after,
header .row > .menu > .menuDiv > ul > li > a:focus-visible::after,
footer .fcols a:hover::after,
footer .fcols a:focus-visible::after,
.tick--link:hover::after,
.tick--link:focus-visible::after {
  transform: scaleX(1);
}

/* ---------- D. Marquee ----------
   Ambient drift only - it does not react to scrolling. Runs as a compositor
   animation so scrolling never makes it stutter. motion.js sets the duration
   from the measured width, so the speed is the same whatever the word count
   (the old hard-coded 25s sped up or slowed down as words were added). */
.sliding-text-one {
  background: var(--black);
  overflow: hidden;
}

.sliding-text__list {
  display: inline-flex;
  gap: clamp(2.5rem, 4vw, 6.25rem);
  white-space: nowrap;
  will-change: transform;
}

.sliding-text__list.is-running {
  animation-name: marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
/* Hover pause, as before - and keyboard focus too. */
.sliding-text-one:hover .sliding-text__list,
.sliding-text-one:focus-within .sliding-text__list {
  animation-play-state: paused;
}

/* ---------- E. Counters ---------- */
.count-num {
  font-variant-numeric: tabular-nums;
}

/* ---------- F. Page-transition wipe ---------- */
.wipe-panel {
  position: fixed;
  inset: 0;
  z-index: 10010;
  pointer-events: none;
  display: grid;
  place-items: center;
  background-color: var(--white);
  background-image: linear-gradient(var(--blue-pale), var(--blue-pale));
  clip-path: inset(100% 0 0 0);
}

.wipe-panel__mark {
  display: block;
  width: min(46vw, 20rem);
  aspect-ratio: 1890/430;
  background-color: var(--blue);
  -webkit-mask-image: url(logo/ps-logo.png);
  mask-image: url(logo/ps-logo.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.9;
}

/* Without mask support the box would paint as a solid blue rectangle, which is
   far worse than no mark at all. */
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .wipe-panel__mark {
    display: none;
  }
}
/* Set by the inline head script when arriving from an internal link, so the
   panel is already covering on first paint rather than flashing into place. */
.is-wiping .wipe-panel {
  clip-path: inset(0 0 0 0);
}

.wipe-panel.is-covering {
  animation: wipeCover 520ms var(--ease) forwards;
}

.wipe-panel.is-revealing {
  animation: wipeReveal 700ms var(--ease) forwards;
}

@keyframes wipeCover {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes wipeReveal {
  from {
    clip-path: inset(0 0 0 0);
  }
  to {
    clip-path: inset(0 0 100% 0);
  }
}
/* ---------- Reduced motion ----------
   One guard for the whole site. This previously covered 4 selectors while the
   three infinite loops - marquee, spinning stars, the floating WhatsApp pill -
   all ran regardless. motion.js makes the same check in JS, because CSS cannot
   stop a requestAnimationFrame loop. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .tick__down,
  .sliding-text__title img,
  .btn-floating.whatsapp {
    animation: none !important;
  }
  [data-reveal] .reveal-line > span {
    transform: none !important;
  }
  [data-reveal=block] {
    clip-path: none !important;
  }
  .wipe-panel {
    display: none !important;
  }
}
/* Reveal wrappers clip at the line box, so give descenders room to breathe. */
[data-reveal] .reveal-line {
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

/* ---------- Portfolio: an asymmetric composition ----------
   Six identical thirds read as a contact sheet, not a portfolio. Every plate
   now gets its own width and its own frame ratio, and two of them sit on a
   deliberate offset so the row baselines break. Spans are declared on
   :nth-child so the markup stays a plain list. */
.portfolio__inner {
  max-width: 82rem;
  margin: 0 auto;
}

.portfolio__rule {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line-on-black);
  padding-bottom: 1rem;
}

.portfolio__title {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--white);
  font-size: clamp(1.9rem, 5.2vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2.25rem, 5vw, 3.5rem);
  max-width: 18ch;
}

.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* two per row from the smallest screen */
  gap: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 1.6vw, 1.5rem);
}

/* Phone and tablet keep a ratio per plate, so the column still changes shape
   as it is scrolled. */
.portfolio__grid .plate:nth-child(1) .imgDiv {
  aspect-ratio: 4/3;
}

.portfolio__grid .plate:nth-child(2) .imgDiv {
  aspect-ratio: 3/2;
}

.portfolio__grid .plate:nth-child(3) .imgDiv {
  aspect-ratio: 1/1;
}

.portfolio__grid .plate:nth-child(4) .imgDiv {
  aspect-ratio: 4/3;
}

.portfolio__grid .plate:nth-child(5) .imgDiv {
  aspect-ratio: 3/2;
}

.portfolio__grid .plate:nth-child(6) .imgDiv {
  aspect-ratio: 4/5;
}

/* Below the mosaic breakpoint the grid is a plain two-up, and six different
   frame ratios there only make the rows ragged - one ratio lines the images up
   across each row. The varied sizes are what the desktop mosaic is for.
   `:nth-child(n)` matches the specificity of the per-plate rules above, which
   a plain `.plate .imgDiv` would lose to. */
@media (max-width: 61.99rem) {
  .portfolio__grid .plate:nth-child(n) .imgDiv {
    aspect-ratio: 4/3;
  }
}
/* Desktop: an interlocking mosaic on a fixed row unit. The previous cut placed
   six plates on a twelve-column field and let them fall where they liked, which
   left 36% of the block as bare ground and ran it to 1815px tall. Here the
   cells tile: one lead plate, two stacked beside it to the same height, and a
   three-across base. The work reads as one wall instead of scattered tiles. */
@media (min-width: 62rem) {
  .portfolio__grid {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: clamp(6rem, 7.6vw, 9.5rem);
  }
  .portfolio__grid .plate {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  /* The frame takes whatever height the caption leaves instead of imposing a
     ratio - that is what lets neighbouring cells line up exactly. */
  .portfolio__grid .plate .imgDiv {
    flex: 1;
    min-height: 0;
    aspect-ratio: auto;
  }
  /* Every cell is pinned to an explicit row, not left to `span` and the
     auto-placement cursor. Band three needs the tall right-hand plate to start
     level with the stacked pair that precedes it in the DOM, and sparse packing
     never backtracks - plate 9 dropped two rows and opened a hole beside 7.
     Explicit rows also make the wall readable: three bands, rows 1-5, 5-8, 8-12.

     Band 1 - lead plate left, two stacked right. */
  .portfolio__grid .plate:nth-child(1) {
    grid-column: 1/8;
    grid-row: 1/span 4;
  }
  .portfolio__grid .plate:nth-child(2) {
    grid-column: 8/13;
    grid-row: 1/span 2;
  }
  .portfolio__grid .plate:nth-child(3) {
    grid-column: 8/13;
    grid-row: 3/span 2;
  }
  /* Band 2 - three across. */
  .portfolio__grid .plate:nth-child(4) {
    grid-column: 1/5;
    grid-row: 5/span 3;
  }
  .portfolio__grid .plate:nth-child(5) {
    grid-column: 5/9;
    grid-row: 5/span 3;
  }
  .portfolio__grid .plate:nth-child(6) {
    grid-column: 9/13;
    grid-row: 5/span 3;
  }
  /* Band 3 - mirrors band 1: two stacked left, lead plate right. */
  .portfolio__grid .plate:nth-child(7) {
    grid-column: 1/6;
    grid-row: 8/span 2;
  }
  .portfolio__grid .plate:nth-child(8) {
    grid-column: 1/6;
    grid-row: 10/span 2;
  }
  .portfolio__grid .plate:nth-child(9) {
    grid-column: 6/13;
    grid-row: 8/span 4;
  }
}
/* Nine plates is odd, and the phone grid is two-up - the last one would sit
   alone in a half-width cell with a hole beside it. Let it take the full row. */
@media (max-width: 61.99rem) {
  .portfolio__grid .plate:nth-child(9) {
    grid-column: span 2;
  }
}
/* ---------- Portfolio plate captions ----------
   Counter + event name under each plate, in the same mono micro-type as the
   discipline index, separated by a hairline. */
.plate {
  margin: 0;
}

.plate__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem;
  padding-top: 0.7rem;
  margin-top: 0.7rem;
  border-top: 1px solid var(--line-on-black);
}

.plate__name {
  color: var(--white);
  white-space: normal;
  min-width: 0;
}

.plate:hover .plate__name {
  color: var(--blue-soft);
}

@media (max-width: 700px) {
  .plate__meta {
    gap: 0.6rem;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
  }
  .plate__name {
    letter-spacing: 0.12em;
  }
}
/* These two carry their own face from a global class rule, which out-specifies
   `footer p` / the inherited value, so they need naming explicitly. Scoped to
   the footer only - both keep their usual face everywhere else. */
/* .para carries its own face from a global class rule, which out-specifies the
   inherited value. .myButton is deliberately NOT here - buttons are UI chrome
   and stay on the micro-type face everywhere, footer included. */
footer .para {
  font-family: var(--font-footer);
}

/* The floating pill is a blue circle, which disappeared against the blue CTA
   field. A hairline ring keeps it delineated on black, white and blue alike. */
.btn-floating.whatsapp {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
}

/* ---------- Current page ----------
   The active state is the hover state held open: the same blue rule the links
   wipe in, drawn at rest, and the label in the same soft blue. No new visual
   idea, so the nav reads as one system. The selector matches the desktop rule's
   depth because that one is three classes deep and would otherwise win. */
header .row > .menu > .menuDiv > ul > li > a.is-current,
header .menuDiv .serviceList .dropdown-item.is-current {
  color: var(--blue-soft);
}

/* SERVICES is excluded: it carries a dropdown chevron as its indicator, so the
   held-open rule under it would be a second marker on the same item. Its hover
   underline is untouched - only the active one is dropped. */
header .row > .menu > .menuDiv > ul > li > a.is-current:not(.dropdown-toggle)::after {
  transform: scaleX(1);
}

/* Bootstrap draws its caret with `border-top` on `.dropdown-toggle::after` -
   the very pseudo-element this nav uses for its underline. The two merged, so
   SERVICES rendered a 4px bar where every other item has a 1px hairline, and
   the caret itself was never visible. Clearing the border separates them: the
   underline goes back to 1px and the icon below does the indicating. */
header .row > .menu > .menuDiv > ul > li > a.dropdown-toggle::after {
  border: 0;
  margin-left: 0;
  vertical-align: baseline;
}

/* The chevron already exists in the markup for the phone accordion; on a
   pointer device it marks SERVICES as having a menu, and turns over when that
   menu opens on hover. */
header .row > .menu > .menuDiv > ul > li > a.dropdown-toggle .navChev {
  display: inline-block;
  margin-left: 0.5em;
  font-size: 0.62em;
  line-height: 1;
  vertical-align: middle;
  transition: transform var(--dur-base) var(--ease);
}

header .row > .menu > .menuDiv > ul > li.dropdown-center:hover > a .navChev {
  transform: rotate(180deg);
}

/* In the phone panel the submenu rows have no underline to hold open, so the
   current one is marked with a rule down its leading edge instead. */
@media only screen and (max-width: 700px) {
  header .menuDiv .serviceList .dropdown-item.is-current {
    box-shadow: inset 2px 0 0 var(--blue);
  }
}
/* The rule that wipes in under nav and footer links follows their hover colour -
   a hard blue underline beneath soft blue text would read as a mismatch.
   .tick--link is left on the solid blue: it sits on its own. */
header .row > .menu > .menuDiv > ul > li > a::after,
footer .fcols a::after {
  background: var(--blue-soft);
}

/* The floating pill's phone number is a UI label, not body copy. */
.btn-floating span {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

/* ============================================================
   GSAP-DRIVEN MOTION
   ============================================================ */
/* Magnetic elements: GSAP owns `transform`, so CSS must not transition it. */
[data-magnetic] {
  transition: var(--tr-interactive-notransform);
  will-change: transform;
}

[data-drift] {
  will-change: transform, opacity;
}

/* SplitText wraps each line; the overflow is what makes words wipe up from
   behind the line rather than fading in place. */
.split-line {
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

/* ---- Hover preview that trails the cursor over the discipline index ---- */
.index[data-preview-host] {
  position: relative;
}

.rowpreview {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(13rem, 20vw, 20rem);
  aspect-ratio: 4/3;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
  border: 1px solid var(--line-on-black);
  opacity: 0;
  will-change: transform, opacity;
}

.rowpreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The rows sit above the preview so the type is never obscured by it. */
.index[data-preview-host] .index__row {
  position: relative;
  z-index: 4;
}

/* No cursor to trail on touch, and the panel would only cost bandwidth. */
@media (hover: none) {
  .rowpreview {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rowpreview {
    display: none;
  }
  [data-magnetic],
  [data-drift] {
    transform: none !important;
    will-change: auto;
  }
}
/* ---- Scroll entrance for standard blocks ----
   `data-reveal="up"` for a single element, `data-reveal-group` to stagger its
   children. The hidden state is gated behind .js-motion, so if the script never
   runs the content is simply visible - it can never be stranded. The observer
   in motion.js only ADDS .is-in and never removes it, so scrolling back up
   never un-reveals anything. */
[data-reveal=up],
[data-reveal-group] > * {
  transition: opacity var(--dur-reveal) var(--ease-reveal), transform var(--dur-reveal) var(--ease-reveal);
}

/* 26px was barely perceptible. 52px plus a slight scale reads clearly as an
   entrance without becoming a slideshow. */
.js-motion [data-reveal=up]:not(.is-in),
.js-motion [data-reveal-group]:not(.is-in) > * {
  opacity: 0;
  transform: translateY(52px) scale(0.985);
}

[data-reveal=up].is-in,
[data-reveal-group].is-in > * {
  opacity: 1;
  transform: none;
}

/* Stagger the children of a group. Small steps - a long cascade reads as a
   page assembling itself, which is the template look. */
[data-reveal-group].is-in > *:nth-child(2) {
  transition-delay: 110ms;
}

[data-reveal-group].is-in > *:nth-child(3) {
  transition-delay: 220ms;
}

[data-reveal-group].is-in > *:nth-child(4) {
  transition-delay: 330ms;
}

[data-reveal-group].is-in > *:nth-child(5) {
  transition-delay: 440ms;
}

[data-reveal-group].is-in > *:nth-child(6) {
  transition-delay: 550ms;
}

[data-reveal-group].is-in > *:nth-child(7) {
  transition-delay: 660ms;
}

[data-reveal-group].is-in > *:nth-child(8) {
  transition-delay: 770ms;
}

@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal=up],
  .js-motion [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* ---- Reversible stagger: [data-reveal-cycle] ----
   Every other reveal on this site fires once and latches, which is right for
   copy - re-animating a paragraph the reader has already read is a distraction.
   The partner wall is the exception: it is asked to animate in AND out, so
   `is-in` is toggled by the observer rather than set once.

   The cells carry the animation, not the <img> inside them. The marks already
   own `opacity` for the grayscale hover, so a reveal on the same property would
   fight it mid-transition. Moving the cell also brings its hairlines, which
   reads as the wall assembling rather than logos popping. No scale, for the
   same reason - scaling a 1px bordered box blurs the rules while it travels. */
[data-reveal-cycle] > * {
  transition: opacity var(--dur-reveal) var(--ease-reveal), transform var(--dur-reveal) var(--ease-reveal);
}

.js-motion [data-reveal-cycle]:not(.is-in) > * {
  opacity: 0;
  transform: translateY(24px);
}

[data-reveal-cycle].is-in > * {
  opacity: 1;
  transform: none;
}

/* The shared group stagger stops at nth-child(8); this wall holds 28 marks, so
   without these the last twenty would land in unison. 45ms a step keeps the
   full cascade near 1.2s. Delays live on the .is-in branch only - on the way
   OUT they do not apply, so the wall clears in one movement instead of
   unwinding for another second. */
[data-reveal-cycle].is-in > *:nth-child(1) {
  transition-delay: 0ms;
}

[data-reveal-cycle].is-in > *:nth-child(2) {
  transition-delay: 45ms;
}

[data-reveal-cycle].is-in > *:nth-child(3) {
  transition-delay: 90ms;
}

[data-reveal-cycle].is-in > *:nth-child(4) {
  transition-delay: 135ms;
}

[data-reveal-cycle].is-in > *:nth-child(5) {
  transition-delay: 180ms;
}

[data-reveal-cycle].is-in > *:nth-child(6) {
  transition-delay: 225ms;
}

[data-reveal-cycle].is-in > *:nth-child(7) {
  transition-delay: 270ms;
}

[data-reveal-cycle].is-in > *:nth-child(8) {
  transition-delay: 315ms;
}

[data-reveal-cycle].is-in > *:nth-child(9) {
  transition-delay: 360ms;
}

[data-reveal-cycle].is-in > *:nth-child(10) {
  transition-delay: 405ms;
}

[data-reveal-cycle].is-in > *:nth-child(11) {
  transition-delay: 450ms;
}

[data-reveal-cycle].is-in > *:nth-child(12) {
  transition-delay: 495ms;
}

[data-reveal-cycle].is-in > *:nth-child(13) {
  transition-delay: 540ms;
}

[data-reveal-cycle].is-in > *:nth-child(14) {
  transition-delay: 585ms;
}

[data-reveal-cycle].is-in > *:nth-child(15) {
  transition-delay: 630ms;
}

[data-reveal-cycle].is-in > *:nth-child(16) {
  transition-delay: 675ms;
}

[data-reveal-cycle].is-in > *:nth-child(17) {
  transition-delay: 720ms;
}

[data-reveal-cycle].is-in > *:nth-child(18) {
  transition-delay: 765ms;
}

[data-reveal-cycle].is-in > *:nth-child(19) {
  transition-delay: 810ms;
}

[data-reveal-cycle].is-in > *:nth-child(20) {
  transition-delay: 855ms;
}

[data-reveal-cycle].is-in > *:nth-child(21) {
  transition-delay: 900ms;
}

[data-reveal-cycle].is-in > *:nth-child(22) {
  transition-delay: 945ms;
}

[data-reveal-cycle].is-in > *:nth-child(23) {
  transition-delay: 990ms;
}

[data-reveal-cycle].is-in > *:nth-child(24) {
  transition-delay: 1035ms;
}

[data-reveal-cycle].is-in > *:nth-child(25) {
  transition-delay: 1080ms;
}

[data-reveal-cycle].is-in > *:nth-child(26) {
  transition-delay: 1125ms;
}

[data-reveal-cycle].is-in > *:nth-child(27) {
  transition-delay: 1170ms;
}

[data-reveal-cycle].is-in > *:nth-child(28) {
  transition-delay: 1215ms;
}

[data-reveal-cycle].is-in > *:nth-child(29) {
  transition-delay: 1260ms;
}

[data-reveal-cycle].is-in > *:nth-child(30) {
  transition-delay: 1305ms;
}

/* Four large cells, not 28 small marks: the shared 45ms step is imperceptible
   across so few, so this grid gets a wider one. Must sit AFTER the @for above -
   both selectors carry three class-level parts, so the tie goes to source
   order, and placed earlier this would silently lose. */
.capability__grid.is-in > *:nth-child(2) {
  transition-delay: 110ms;
}

.capability__grid.is-in > *:nth-child(3) {
  transition-delay: 220ms;
}

.capability__grid.is-in > *:nth-child(4) {
  transition-delay: 330ms;
}

@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal-cycle] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* Grid tiles reveal individually, so when several land in view together they
   would otherwise fire in perfect unison. A 3-cycle delay staggers each row
   without needing a rule per item - it works the same for 6 tiles or 27. */
.gallery > [data-reveal=up]:nth-child(3n+2),
.our-services .row > [data-reveal=up]:nth-child(3n+2) {
  transition-delay: 90ms;
}

.gallery > [data-reveal=up]:nth-child(3n),
.our-services .row > [data-reveal=up]:nth-child(3n) {
  transition-delay: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  .gallery > [data-reveal=up],
  .our-services .row > [data-reveal=up] {
    transition-delay: 0s !important;
  }
}
/* Breadcrumb inside the shared page header. Was a <p> containing a
   fa-greater-than icon; now a real <nav> with a typographic separator. */
.pagehead__crumb {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.pagehead__crumb .tick[aria-hidden] {
  opacity: 0.45;
}

/* ============================================================
   MANIFESTO  (replaces .aboutUs)
   Was: eyebrow + a category-label heading, justified body copy at 45ch on
   phones, three icon bullets marked up as <h6>, and two overlapping images
   with a 15px white border.
   ============================================================ */
.manifesto {
  background-color: var(--black);
  color: var(--white);
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 5rem) clamp(4rem, 8vw, 7rem);
}

.manifesto__rule {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  border-bottom: 1px solid var(--line-on-black);
  padding-bottom: 1.1rem;
}

.manifesto__statement {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 4vw, 3.5rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.manifesto__accent {
  color: var(--blue);
}

/* Asymmetric: copy on the left, claims to its right, plate below. */
.manifesto__body {
  display: grid;
  grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: stretch;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

.manifesto__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.manifesto__lede {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.7;
  max-width: 27rem;
  margin: 0;
  color: var(--muted-on-black);
}

.manifesto__list {
  list-style: none;
  align-self: start;
  margin: 0;
  padding: 0;
}
.manifesto__list li {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line-on-black);
}
.manifesto__list li:last-child {
  border-bottom: 1px solid var(--line-on-black);
}

.manifesto__claim {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.4;
}

.manifesto__more {
  margin-top: auto;
  align-self: start;
}

.manifesto__plate {
  margin: clamp(2.5rem, 6vw, 4.5rem) 0 0;
  overflow: clip;
  aspect-ratio: 21/9;
}
.manifesto__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 52rem) {
  .manifesto__body {
    grid-template-columns: 1fr;
  }
  .manifesto__plate {
    aspect-ratio: 3/2;
  }
}
/* ---------- Narrow phones (<=376px) ----------
   Two blocks are a few pixels wider than a 360px viewport, and both because a
   fixed padding minimum leaves too little room for content that cannot wrap:
   the header logo row (2rem each side) and the hero's top/bottom rules, whose
   `.tick` labels are `white-space: nowrap` by design. Trimming the inset only
   on this band relieves it without touching 390px and up, where the current
   spacing is correct. */
@media (max-width: 23.5rem) {
  header .row > .logo {
    padding-inline: 1.25rem;
  }
  .hero__inner {
    padding-inline: 1rem;
  }
}