/* ===========================================================================
   VID — Valika Interior Design
   Transcribed from the Figma file ss3BpFZ4CMYcQLlkUNgL6F, page "VID_WEBSITE
   DESIGN 3", via get_design_context. Every value below is taken from the design
   data; the node id is noted on each block so it can be checked against source.

   The canvas is 1512px wide. Sections run edge to edge and set their own insets.
   =========================================================================== */

/* --- Fonts -------------------------------------------------------------- */
/* Tinos is metrically identical to Times New Roman, which the design uses, and
   unlike Times it exists on every platform. Both are self-hosted. */
@font-face {
  font-family: "Tinos";
  src: url("../assets/fonts/tinos-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tinos";
  src: url("../assets/fonts/tinos-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Tinos";
  src: url("../assets/fonts/tinos-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens ------------------------------------------------------------- */
:root {
  --serif: "Tinos", "Times New Roman", Times, serif;
  --sans: "Montserrat", system-ui, sans-serif;

  --black: #000000;
  --white: #ffffff;
  --cream: #f5f1e5;   /* page background of every frame except ABOUT */
  --taupe: #9d9079;   /* intro band, closing band, New Heritage heading */
  --clay: #c2b5a8;    /* buttons */
  --espresso: #3d2a23;/* footer */
  --grey: #d9d9d9;    /* inactive slider dots */

  --page: 1512px;     /* design canvas width */
}

/* --- Reset -------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { background: var(--cream); }

body {
  margin: 0;
  background: var(--cream);
  color: var(--black);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img,
video,
svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul { margin: 0; padding: 0; list-style: none; }

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

/* Sections are laid out against the 1512px canvas. Percentages let the whole
   thing scale on wider or narrower screens while holding the proportions. */
.wrap {
  width: 100%;
  max-width: none;
  margin-inline: auto;
}

/* ===========================================================================
   NAV BAR — node 35896:8389, 1512x123
   Inner row is 64px tall inside 66px side padding. The menu is absolutely
   placed from x=453 to x=1099 (646 wide) and distributed with space-between;
   the gaps therefore come out of the label widths, they are not fixed.
   Montserrat Medium 14/14 with 2px tracking. Drop shadow 0 4px 43.9px rgba(0,0,0,.1).
   =========================================================================== */
.nav {
  position: relative;
  z-index: 10;
  height: 123px;
  padding-inline: 4.365%; /* 66 / 1512 */
  display: flex;
  align-items: center;
  filter: drop-shadow(0 4px 43.9px rgba(0, 0, 0, 0.1));
}

.nav__inner {
  position: relative;
  flex: 1;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__logo { width: 163px; flex: 0 0 163px; }
.nav__logo img { width: 100%; aspect-ratio: 600 / 239; object-fit: contain; }

.nav__menu {
  position: absolute;
  left: 28.04%;  /* 387 / 1380 */
  right: 25.14%; /* 347 / 1380 */
  top: 24.5px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__link {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 2px;
  white-space: nowrap;
}
/* The page you are on carries a rule under it — a 1px line at y=89 in the design,
   about 11 below the word and exactly as wide as it. A border on the inline link
   measures the glyphs rather than the padded box, which is what the design shows. */
.nav__link.is-current {
  /* Closer to the word than the design's 11 so it does not crowd the submenu
     that opens underneath. */
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
}

.nav__item { position: relative; }
/* PROJECTS carries 8px of inner padding in the design. */
.nav__item--projects > .nav__link { padding-inline: 8px; }

/* Sector row under PROJECTS, revealed on hover or focus. */
.nav__sub {
  position: absolute;
  top: 100%;
  left: 8px;
  padding-top: 6px;
  display: flex;
  gap: 22px;
  opacity: 0;
  visibility: hidden;
  /* Slow, delayed fade-out so the pointer has time to travel down into the row;
     appearing stays immediate. */
  transition: opacity .18s ease .35s, visibility 0s linear .53s;
}
/* Invisible bridge across the gap — without it the pointer leaves the item on the
   way down and the row closes before it can be reached. */
.nav__item--projects::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -8px;
  right: -8px;
  height: 28px;
  pointer-events: none;
}
.nav__item--projects:hover::after { pointer-events: auto; }
.nav__sub a { font-size: 10px; letter-spacing: 1.6px; opacity: 0.8; }
.nav__item--projects:hover .nav__sub,
.nav__item--projects:focus-within .nav__sub {
  opacity: 1;
  visibility: visible;
  transition: opacity .18s ease 0s, visibility 0s linear 0s;
}
.nav__sub a { padding-block: 6px; }   /* larger target than the 10px text alone */

/* Over the hero the bar is transparent with the white wordmark. */
.nav--over {
  position: absolute;
  inset: 0 0 auto;
  color: var(--white);
}

/* ===========================================================================
   HERO — node 35896:1793, 1512x982
   Six slides; the second is a video. Every slide carries an rgba(0,0,0,.2)
   layer in multiply. Each image has its own crop, set inline per slide.
   Arrows 28x48 at 2.05% / 96.1%; dot strip 125.77x10.96 at 96.08% down,
   active dot black, the rest #D9D9D9.
   =========================================================================== */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1512 / 982;
  overflow: hidden;
  background: #231f20;
}

.hero__slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.hero__slide.is-active { opacity: 1; }

.hero__slide img,
.hero__slide video {
  position: absolute;
  max-width: none;
  object-fit: cover;
}
.hero__slide video { inset: 0; width: 100%; height: 100%; }

.hero__shade {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.hero__mute {
  position: absolute;
  left: 91.83%;
  top: 88.65%;
  width: 44px;
  height: 44px;
  padding: 7px;
  border-radius: 34.5px;
  background: rgba(217, 217, 217, 0.57);
  z-index: 3;
}
.hero__mute img { width: 30.6px; height: 30.6px; }

.hero__arrow {
  position: absolute;
  top: calc(50% + 2.07px);
  transform: translateY(-50%);
  width: 28px;
  height: 48px;
  z-index: 2;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}
.hero__arrow:hover { opacity: 1; }
/* The exported arrow points down; the design turns it a quarter each way. */
.hero__arrow img { width: 48px; height: 28px; transform-origin: center; }
.hero__arrow--prev { left: 2.05%; }
.hero__arrow--prev img { transform: rotate(90deg) translateX(-10px); }
.hero__arrow--next { left: 96.1%; }
.hero__arrow--next img { transform: rotate(-90deg) translateX(10px); }

.hero__dots {
  position: absolute;
  left: 50%;
  top: 96.08%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 11.96px;
  z-index: 2;
}
.hero__dot {
  width: 10.96px;
  height: 10.96px;
  border-radius: 50%;
  background: var(--grey);
  transition: background 0.2s ease;
}
.hero__dot.is-active { background: var(--black); }

.hero__arrow:focus-visible,
.hero__dot:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* ===========================================================================
   INTRO BAND — node 35896:1795, 1512x265
   Taupe #9D9079, white text, column with a 44px gap and 85px of top padding.
   Heading Times 44/24 with 2.2px tracking, last word bold italic.
   Subline Montserrat 19/24 with 0.95px tracking in a 775px column.
   =========================================================================== */
.intro {
  background: var(--taupe);
  color: var(--white);
  padding: 85px 5.16% 64px; /* 78 / 1512 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
  text-align: center;
}
.intro__title {
  margin: 0;
  max-width: 1356px;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 2.91vw, 44px);
  line-height: 24px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}
.intro__title em { font-weight: 700; font-style: italic; }
.intro__sub {
  margin: 0;
  max-width: 775px;
  font-size: clamp(1rem, 1.26vw, 19px);
  line-height: 24px;
  letter-spacing: 0.95px;
}

/* ===========================================================================
   FEATURED TILES — nodes 35896:1798 and 35896:1816
   Row 1: padding 72/48/32, two 698 tiles, 20px apart with a rule between.
   Row 2: padding 32/32/72/48, 10px gaps, 698 + 339 + 339 with rules between.
   Tile: column, 16px gap, image 467 tall (plain cover), caption inset 24px,
   20px from title to hairline, 12px from hairline to the sub line.
   Title Times 14/1.09 at 3.64px; sub Montserrat 10/1.1 at 1.6px.
   =========================================================================== */
.featured { max-width: var(--page); margin-inline: auto; }
.featured__row { display: flex; align-items: flex-start; }
.featured__row--one { padding: 72px 3.175% 32px; gap: 0.706%; }        /* 48 inset, 10 gap */
.featured__row--two { padding: 32px 2.116% 72px 3.175%; gap: 0.698%; } /* 48 left, 32 right */

.featured__rule {
  align-self: stretch;
  width: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.25);
}

.tile { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* Shares of each row's own content box, so both rows end on the same edge (x=1464).
   Row 1 fills its 1416 exactly; row 2 leaves the design's 16px of slack on the right. */
.featured__row--one > .tile { flex: 0 0 49.294%; }                      /* 698 of 1416 */
.featured__row--two > .tile:nth-of-type(1) { flex: 0 0 48.743%; }       /* 698 of 1432 */
.featured__row--two > .tile:nth-of-type(2),
.featured__row--two > .tile:nth-of-type(3) { flex: 0 0 23.673%; }       /* 339 of 1432 */

.tile__image { aspect-ratio: 698 / 467; overflow: hidden; }
.featured__row--two > .tile:nth-of-type(2) .tile__image,
.featured__row--two > .tile:nth-of-type(3) .tile__image { aspect-ratio: 339 / 467; }
.tile__image img { width: 100%; height: 100%; object-fit: cover; }

.tile__caption {
  padding-inline: 24px;
  min-height: 69px;  /* tile is 552 = image 467 + 16 gap + 69 caption */
}
.tile__title {
  display: block;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--black);
  font-family: var(--serif);
  font-size: clamp(13px, 0.926vw, 14px);   /* 14 at the 1512 design width */
  line-height: 1.09;
  letter-spacing: 0.26em;          /* 3.64px at 14px */
  text-transform: uppercase;
  white-space: nowrap;
}
.tile__sub {
  display: block;
  margin-top: 12px;
  font-size: 10px;   /* 10 at the 1512 design width */
  line-height: 1.1;
  letter-spacing: 0.16em;          /* 1.6px at 10px */
  text-transform: uppercase;
}

/* ===========================================================================
   NEW HERITAGE — node 35896:1843, 1512x792
   Row, 24px gap, 44px vertical padding. Image in a 600x600 box with 10px
   padding, cropped to 197.36% width at -40.82%. Text column 693 wide with a
   45.977px gap. Heading Times 41 / 2.05px in #9D9079; body Montserrat 25.543px;
   button 154x57 on #C2B5A8 with black Montserrat Medium 22.75px.
   =========================================================================== */
.heritage {
  max-width: var(--page);
  margin-inline: auto;
  padding: 44px 3.17%;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
}
.heritage__media {
  flex: 0 1 600px;
  aspect-ratio: 1;
  padding: 10px;
  overflow: hidden;
}
.heritage__frame { position: relative; width: 100%; height: 100%; overflow: hidden; }
.heritage__frame img {
  position: absolute;
  top: 0;
  left: -40.82%;
  width: 197.36%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.heritage__text {
  flex: 0 1 693px;
  min-height: 704px;  /* fixed in the design; without it the column collapses to the image */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 45.977px;
}
.heritage__title {
  margin: 0;
  max-width: 561px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 2.71vw, 41px);
  line-height: 1.2;
  letter-spacing: 2.05px;
  text-transform: uppercase;
  color: var(--taupe);
}
.heritage__body {
  margin: 0;
  font-size: clamp(1rem, 1.69vw, 25.543px);
  line-height: 1.35;
}

/* Buttons — 154x57 in the body, 190x57 in the closing band. #C2B5A8, black text. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 154px;
  min-height: 57px;
  padding-inline: 18px;
  background: var(--clay);
  color: var(--black);
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 22.75px);
  text-align: center;
  white-space: nowrap;
}
.btn--lg {
  min-width: 190px;
  font-size: clamp(0.95rem, 1.32vw, 20px);
  letter-spacing: -0.1px;
}

/* ===========================================================================
   AWARDED — node 35896:1854
   Card column with a 16px gap; image 560x680; the Arabian Property Awards
   ribbon is 80.255x200 pinned at x=430 (76.79% of 560), top 0.
   Meta row Montserrat 12/1 at 0.24px in three columns of 187/188/187 with a
   16px gap; title Times 17/1.09 at 4.42px.
   =========================================================================== */
/* Cards sit at x=51 and x=647 and end at x=1207, so the right inset is 305, not 51. */
/* The design places this block from 51 to 1207, so 51 of margin on the left and
   305 on the right. Centred here on request: same 1156 of content, even margins. */
.awarded { max-width: var(--page); margin-inline: auto; padding: 64px 11.772%; }
.awarded__title {
  margin: 0 0 60px;
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.85vw, 28px);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-align: center;
}
.awarded__grid { display: flex; gap: 2.38%; align-items: flex-start; } /* 36 / 1512 */
.award {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.award__image { position: relative; aspect-ratio: 560 / 680; overflow: hidden; }
/* The ribbon is also a direct child, so the project image is matched explicitly —
   otherwise this rule outranks .award__ribbon and blows the badge up to full size. */
.award__image > img:not(.award__ribbon) { width: 100%; height: 100%; object-fit: cover; }
.award__ribbon {
  position: absolute;
  left: 76.79%;
  top: 0;
  width: 14.33%;
  height: auto;
}

.award__meta {
  display: grid;
  grid-template-columns: 187fr 188fr 187fr;
  gap: 16px;
  min-height: 22px;
  align-items: center;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.24px;
  /* All three read left in the design. Set to left / centre / right on request:
     the columns are symmetrical, so the middle one centres on the image and the
     year finishes flush with its right edge. */
  text-align: left;
}
.award__meta > :nth-child(2) { text-align: center; }
.award__meta > :nth-child(3) { text-align: right; }
.award__name {
  display: flex;
  align-items: center;
  min-height: 40px;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.09;
  letter-spacing: 4.42px;
  text-transform: uppercase;
}

/* ===========================================================================
   CLIENT LOGOS — node 35896:1876
   Verified against the file: the band is #FFFFFF (not cream), 70px padding top and
   bottom, 58px between heading and strip. Heading "OUR CLIENTS" in Times 28/32.2
   with 8.4px tracking, centred. The strip is a horizontal auto-layout of 116x116
   marks spaced 24.92px; the design already repeats the set, so the marquee loops.
   =========================================================================== */
.clients {
  background: var(--white);
  padding: 70px 0;
  overflow: hidden;
}
.clients__title {
  margin: 0 0 58px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.375rem, 1.85vw, 28px);
  line-height: 32.2px;
  letter-spacing: 8.4px;
  text-transform: uppercase;
  text-align: center;
}
.clients__strip {
  display: flex;
  width: max-content;
  gap: 24.92px;
  animation: clients-marquee 45s linear infinite;
}
.clients__strip img {
  height: 116px;
  width: 116px;
  flex: 0 0 auto;
  object-fit: contain;
}
@keyframes clients-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 12.46px)); }
}
.clients:hover .clients__strip { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .clients__strip { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
}

/* ===========================================================================
   CLOSING BAND — node 35896:1880, 1512x320
   Taupe #9D9079, white Times 40px heading in sentence case, 85px top padding,
   button 190x57.
   =========================================================================== */
.cta {
  background: var(--taupe);
  padding: 85px 7.14% 98px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cta__title {
  margin: 0 0 24px;
  max-width: 998px;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.65vw, 40px);
  line-height: 1.2;
  color: var(--white);
}

/* ===========================================================================
   FOOTER — node 35896:8404, 1512x329, #3D2A23 with white text
   Logo 186x84 at 36,24. Link row from x=864, six items 12px apart.
   Rule + FOLLOW US block 600 wide at x=876. Copyright centred at y=259.
   Links Montserrat Medium 12/37 at 2px; copyright Regular 14 at 9% tracking.
   =========================================================================== */
.footer {
  background: var(--espresso);
  color: var(--white);
  padding: 24px 2.38% 35px;
}
.footer__top {
  max-width: 1440px;
  min-height: 108px;
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}
.footer__logo img { width: 186px; aspect-ratio: 186 / 84; object-fit: contain; }

.footer__nav { width: 42.5%; }   /* 612 of the 1440 content box */
.footer__nav ul { display: flex; justify-content: space-between; gap: 12px; flex-wrap: nowrap; }
.footer__nav a {
  display: block;
  padding-inline: 6px;
  font-weight: 500;
  /* 12px at the 1512 design width; scales down so all six stay on one line. */
  font-size: clamp(11px, 0.794vw, 12px);
  line-height: 37px;
  letter-spacing: 0.1667em;   /* 2px at 12px */
  white-space: nowrap;
}
.footer__nav a:hover { text-decoration: underline; }

/* The copyright used to sit on its own centred row below. It now shares the line
   with FOLLOW US, ranged left under the wordmark, which lets the footer lose the
   whole bottom row — 67 of height. */
.footer__bottom {
  max-width: 1440px;
  margin: 32px auto 0;
  display: flex;
  align-items: center;
  gap: 4%;
}
.footer__follow {
  /* The rule runs from where PROJECTS begins to where CONTACT ends — 864 to 1473
     — and FOLLOW US lines up with its left edge rather than sitting 12 inside. */
  width: 42.5%;                    /* the same box the footer nav uses, so the rule
                                      starts under PROJECTS and ends under CONTACT */
  flex: 0 0 42.5%;
  min-height: 63px;
  margin: 0;                       /* the rule ends where CONTACT does */
  padding-top: 20px;
  border-top: 1px solid currentColor;
  display: flex;
  align-items: center;
  gap: 18px;
}
.footer__follow span {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 2px;
}
.footer__social { display: flex; gap: 11px; }
.footer__social svg { width: 22px; height: 22px; }

.footer__copy {
  flex: 1 1 auto;
  /* The 20 matches the padding above FOLLOW US so both lines of type sit level. */
  margin: 20px 0 0;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ===========================================================================
   Reduced motion
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================================
   PROJECT ARCHIVE — nodes 35896:1884 (page) and 35896:1887 (card)
   Card 1512x446, horizontal auto-layout, itemSpacing 12, paddingRight 172, both
   axes centred. That puts the 169-wide panel at x=202 and the 754 image at x=383.
   The panel box is 126 tall and centred, so it starts at y=160; its metadata and
   button sit below the card's 446 and are clipped until the card opens.
   Rows repeat every 495px -> 49px between cards.
   =========================================================================== */
.projects { max-width: var(--page); margin-inline: auto; padding-block: 32px; }

.pcard {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.794%;                 /* 12 / 1512 */
  padding-right: 11.375%;      /* 172 / 1512 */
  height: 0;
  padding-bottom: 29.497%;     /* 446 / 1512 */
  overflow: hidden;
  color: var(--black);
  transition: padding-bottom .35s ease;
}
.pcard + .pcard { margin-top: 3.241%; }  /* 49 / 1512 */

/* Auto-layout children are positioned against the card box, which is height:0
   plus padding, so both are pinned rather than laid out in flow. */
.pcard__panel,
.pcard__image { position: absolute; top: 0; }

/* The photograph is the control that opens the card; only the button navigates. */
.pcard__image { padding: 0; border: 0; background: none; cursor: pointer; display: block; }
.pcard__image:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }

.pcard__image {
  left: 25.331%;               /* 383 / 1512 */
  width: 49.868%;              /* 754 / 1512 */
  height: 100%;
  overflow: hidden;
}
.pcard__image picture,
.pcard__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pcard__panel {
  left: 13.360%;               /* 202 / 1512 */
  width: 11.177%;              /* 169 / 1512 */
  top: 35.874%;                /* 160 / 446 */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
  text-align: right;
}

.pcard__logo { width: 83px; max-width: 100%; }
.pcard__logo img { width: 100%; height: 61px; object-fit: contain; object-position: right center; }

.pcard__title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(13px, 1.19vw, 18px);
  line-height: 1;
  text-transform: uppercase;
}

/* Hidden while the card is closed — in the design they simply fall outside it. */
.pcard__meta,
.pcard__btn { opacity: 0; visibility: hidden; transition: opacity .25s ease; }

.pcard__meta { display: flex; flex-direction: column; gap: 16px; }
.pcard__field {
  font-family: var(--sans);
  font-weight: 400;            /* only the label is bold */
  font-size: clamp(11px, 0.794vw, 12px);
  line-height: 1.5;            /* 18 / 12 */
}
.pcard__field b { font-weight: 700; }

.pcard__btn {
  display: inline-flex;
  text-decoration: none;
  color: var(--black);
  align-items: center;
  justify-content: center;
  width: 133px;
  height: 37px;
  background: var(--clay);
  font-weight: 500;
  font-size: clamp(13px, 0.966vw, 14.6px);
  line-height: 17.8px;
}

/* Expanded state — "Property 1=Expanded", 1494x633.
   The image grows 754 -> 1072 and slides left 383 -> 224; the panel moves out with
   it, 202 -> 32, and the metadata and button come in. */
.pcard__panel,
.pcard__image { transition: left .35s ease, width .35s ease, top .35s ease; }

@media (min-width: 1025px) {
  .pcard.is-open { padding-bottom: 41.865%; }               /* 633 / 1512 */

  .pcard.is-open .pcard__image {
    left: 14.815%;                                          /* 224 / 1512 */
    width: 70.899%;                                         /* 1072 / 1512 */
  }
  .pcard.is-open .pcard__panel {
    left: 2.116%;                                           /* 32 / 1512 */
    top: 11.058%;                                           /* 70 / 633 */
  }
  .pcard.is-open .pcard__meta,
  .pcard.is-open .pcard__btn { opacity: 1; visibility: visible; }
}

/* Below the design width the side panel has no room, so the card stacks and the
   metadata is shown outright rather than hidden behind a hover. */
@media (max-width: 1024px) {
  .pcard {
    height: auto;
    padding: 0 20px 32px;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    overflow: visible;
  }
  /* The photograph leads, the way every other card and slider on the site
     reads — text first only happened because the panel is first in the
     markup (it has to be, so the button stays reachable before the image's
     own click target). Order alone puts the image back on top without
     touching that. */
  .pcard__image { position: static; width: 100%; height: auto; aspect-ratio: 754 / 446; order: -1; }
  .pcard__panel { position: static; width: 100%; align-items: flex-start; text-align: left; }
  .pcard__logo img { object-position: left center; }
  .pcard__meta, .pcard__btn { opacity: 1; visibility: visible; }
  /* Five fields read as a long list stacked one under another; paired up two
     to a row they take half the scroll and read more like a spec sheet. */
  .pcard__meta { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 12px; width: 100%; }
}

/* ===========================================================================
   PROJECT DETAIL — node 35896:4561, page 1512x4025
   Head block at y=203, vertical gap 43.14: logo 412x182 centred, title
   Times 56/64.4 uppercase in #434343, text 1008 wide Montserrat 16/24 at 0.8.
   Hero 1512x1080 full bleed. Meta grid 1288 at x=112 — five 243 cells pitched
   261, Montserrat 15.19/22.8 centred, CLIENT bold, the rest regular.
   =========================================================================== */
.phead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 43.14px;
  padding: 80px 3.17% 0;
  text-align: center;
  color: #434343;
}
.phead__logo { display: block; width: min(412px, 27.249vw); }   /* 412 of 1512, not of the padded box */
.phead__logo img { width: 100%; height: auto; object-fit: contain; }

.phead__title {
  margin: 0;
  max-width: min(1008px, 66.667vw);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.7vw, 56px);
  line-height: 1.15;
  text-transform: uppercase;
}
.phead__text {
  margin: 0;
  max-width: min(1008px, 66.667vw);   /* 1008 of 1512 */
  font-size: clamp(13px, 1.058vw, 16px);
  line-height: 1.5;       /* 24 / 16 */
  letter-spacing: 0.05em; /* 0.8 at 16 */
}

/* Hero runs the full width at 1512x1080. */
.phero { margin-top: 60px; aspect-ratio: 1512 / 1080; overflow: hidden; }
.phero picture, .phero img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pmeta {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0 1.19%;              /* 18 of 1512 between 243 cells pitched 261 */
  max-width: 85.185%;        /* 1288 / 1512 */
  margin: 64px auto 0;
  text-align: center;
  color: #434343;
}
.pmeta__cell {
  font-size: clamp(13px, 1.005vw, 15.19px);
  line-height: 1.5;          /* 22.8 / 15.19 */
}
.pmeta__cell b { font-weight: 700; }
/* Only the label is bold — the client's name is set like every other value. */

/* Remaining project images, in the order they appear in the design. */
.pgallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 90.476%;        /* 1368 / 1512 */
  margin: 72px auto 0;
}
.pgallery picture { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.pgallery img { width: 100%; height: 100%; object-fit: cover; }

/* 1368-wide rule between the project and the closing row. */
.prule {
  width: 90.476%;
  height: 1px;
  margin: 72px auto 0;
  background: rgba(67, 67, 67, .35);
}

.other { max-width: var(--page); margin-inline: auto; padding: 56px 4.762% 72px; }
.other__title {
  margin: 0 0 32px;
  font-family: var(--serif);
  font-weight: 400;                  /* Times 400 in the design, not the h2 default */
  font-size: clamp(1.25rem, 1.85vw, 28px);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.other__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.984%; } /* 30 / 1512 */
.other__card { display: block; }
.other__card picture { display: block; aspect-ratio: 480 / 680; overflow: hidden; }
.other__card img { width: 100%; height: 100%; object-fit: cover; }
.other__name {
  display: block;
  margin-top: 14px;
  font-family: var(--serif);
  font-size: clamp(13px, 1.124vw, 17px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

@media (max-width: 1024px) {
  .phead { padding-top: 48px; gap: 24px; }
  .phero { aspect-ratio: 4 / 3; }
  .pmeta { grid-template-columns: 1fr 1fr; gap: 20px 12px; max-width: 90%; }
  .pgallery { grid-template-columns: 1fr; max-width: 92%; }
  /* Two columns on tablet, not the phone's one — the cards (480x680) still
     read comfortably at half a 768-1024 viewport, and it halves the scroll
     a single column would force. */
  .other__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* ===========================================================================
   SECTOR ROW on the projects pages — the same four links the header dropdown has,
   repeated on the page itself so the sector views are reachable without hovering.
   =========================================================================== */
.psector {
  display: flex;
  justify-content: center;
  gap: 2.116%;                 /* 32 / 1512 */
  padding: 0 3.175% 24px;
}
.psector a {
  font-size: clamp(11px, 0.794vw, 12px);
  letter-spacing: 0.1667em;
  line-height: 2.4;
  opacity: .55;
}
.psector a.is-active,
.psector a:hover { opacity: 1; box-shadow: 0 2px 0 -1px currentColor; }

/* ===========================================================================
   OTHER PROJECTS — closing row on a detail page.
   A horizontal track the way the design's slider behaves: the cards continue past
   the right edge and are scrolled, rather than wrapping onto a second line.
   =========================================================================== */
.other__track {
  display: flex;
  gap: 2.193%;                 /* 30 of the 1368 content box */
  overflow-x: auto;
  overflow-y: clip;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-bottom: 12px;
}
.other__track { scrollbar-width: none; -ms-overflow-style: none; }
.other__track::-webkit-scrollbar { display: none; }

.oslide {
  flex: 0 0 35.088%;           /* 480 of the section's 1368 content box */
  scroll-snap-align: start;
}
/* The card frame is 680 but the photograph in it is 599; the caption starts at
   615, which is 16 below the image, not below the frame. */
.oslide picture { display: block; aspect-ratio: 480 / 599; overflow: hidden; }
.oslide img { width: 100%; height: 100%; object-fit: cover; }
.oslide__name {
  display: block;
  margin-top: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--black);
  font-family: var(--serif);
  font-size: clamp(13px, 0.926vw, 14px);
  line-height: 1.09;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.oslide__sub {
  display: block;
  margin-top: 12px;
  font-size: 10px;
  line-height: 1.1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Project gallery — the remaining images from the project's own page, scrolled
   sideways like the closing row. */
.pgal {
  display: flex;
  gap: 1.984%;               /* 30 of 1512 */
  overflow-x: auto;
  overflow-y: clip;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 64px 0 0;          /* meta ends 1990, strip starts 2054 */
  padding-bottom: 4px;
}
.pgal::-webkit-scrollbar { display: none; }
/* The strip is inset from the left and runs off the right edge, so the tile
   widths are shares of the page rather than of a padded box. The inset is a
   margin on the first tile for exactly that reason. */
.pgal picture {
  flex: 0 0 39.683%;         /* 600 */
  scroll-snap-align: start;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.pgal picture.is-wide {
  flex-basis: 59.524%;       /* 900 */
  aspect-ratio: 3 / 2;
}
/* Matches .prule's own inset (100 - 90.476) / 2, so the strip starts and ends
   flush with the divider above it rather than the design's own wider margin. */
.pgal picture:first-child { margin-left: 4.762%; }
.pgal picture:last-child { margin-right: 4.762%; }
.pgal img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1024px) {
  .pgal picture { flex: 0 0 82%; }
}

@media (max-width: 1024px) {
  .oslide { flex: 0 0 72%; }
  /* Four items wrap unevenly at this width — CULTURE ends up alone on its own
     line. A single scrollable row, the same pattern the sliders elsewhere on
     the site already use, keeps the row intact instead. */
  .psector {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 24px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .psector::-webkit-scrollbar { display: none; }
  .psector a { flex: 0 0 auto; font-size: 11px; white-space: nowrap; }
}

/* ===========================================================================
   ABOUT — node 35896:1963, page 1512x7224. The only page on a white ground.
   =========================================================================== */
.page-white { background: #fff; }

/* Intro, y=123 h=1028. A 912 copy column with a 96 gutter, then the 600 image
   flush to the right edge. The image is in flow, so it governs the section
   height exactly as in the design: 428 + 600 = 1028. */
.aintro { display: flex; align-items: flex-start; background: #fff; }
.aintro__text {
  flex: 0 0 60.317%;                 /* 912 */
  /* Vertical offsets in percent, not pixels: the image beside this column is
     sized in percent too, and mixing the two slid the copy down against the
     picture as soon as the window was narrower than the design. */
  padding: 14.947% 0 0 6.349%;       /* 226 top, 96 gutter */
}
.aintro__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4.762vw, 72px);
  line-height: 1.15;                 /* 82.8 / 72 */
  color: var(--taupe);
}
.aintro__body {
  margin: 30.693% 0 0;               /* 248 of the 808 column, not of the page */
  font-family: var(--sans);
  font-size: clamp(13px, 1.058vw, 16px);
  line-height: 1.5;                  /* 24 / 16 */
  letter-spacing: 0.05em;            /* 0.8 at 16 */
}
.aintro__body p { margin: 0; }
.aintro__body p + p { margin-top: 1.5em; }   /* the design's blank line */
/* A percentage margin resolves against the container's width, which is the
   content width. vw would count the scrollbar and drift a percent away from
   every neighbouring percentage. */
.aintro__image {
  flex: 0 0 39.683%;                 /* 600 */
  margin-top: 28.307%;               /* 428 */
  aspect-ratio: 1;
  display: block;
}
.aintro__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Mission and vision, y=1151 h=612. */
.values { display: flex; align-items: flex-start; background: #dbd0c5; padding: 126px 0 126px; }
.value { width: 40.873%; margin-left: 7.407%; text-align: center; }   /* 618 at 112 */
.value--vision { width: 37.5%; margin-left: 6.878%; }                 /* 567, 104 apart */
.value__icon { display: block; width: min(144px, 9.524vw); height: auto; margin: 0 auto; }
.value__title {
  margin: 25px 0 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(20px, 2.381vw, 36px);
  line-height: 1.22;                 /* 43.9 / 36 */
  min-height: min(48px, 3.175vw);    /* the design's box is 48, the line 43.9 */
}
.value__text {
  margin: 24px 0 0;
  font-family: var(--sans);
  font-size: clamp(13px, 1.058vw, 16px);
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* Team, y=1763 h=4015. */
.team {
  background: #ad9e8f;
  color: #fff;
  padding: 92px 0 74px;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.team__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 1.852vw, 28px);
  line-height: 1.15;
  letter-spacing: 0.3em;             /* 8.4 at 28 */
}
.team__lead {
  width: 70.635%;                    /* 1068 */
  margin: 24px auto 0;
  font-family: var(--sans);
  font-size: clamp(15px, 1.389vw, 21px);
  line-height: 1.143;                /* 24 / 21 */
  letter-spacing: 0.05em;
}
/* The CEO photograph, node 35896:2468. Hovering it swaps to the variant that
   carries his quote (35896:2457): the picture slides from 516 to 124 and the
   quote fades in at 660. Smart animate, 0.3s, ease out. */
.ceo { position: relative; width: 100%; aspect-ratio: 1512 / 646; margin-top: 106px; }
.ceo__photo {
  position: absolute; top: 0; left: 34.127%;   /* 516 */
  width: 31.746%; height: 100%;                /* 480 */
  display: block;
  transition: left .3s ease-out;
}
.ceo__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ceo__quote {
  position: absolute; left: 43.651%; top: 15.015%;   /* 660, 97 of 646 */
  width: 48.214%;                                    /* 729 */
  margin: 0;
  text-align: left;
  opacity: 0;
  transition: opacity .3s ease-out;
}
.ceo:hover .ceo__photo, .ceo:focus-within .ceo__photo { left: 8.201%; }   /* 124 */
.ceo:hover .ceo__quote, .ceo:focus-within .ceo__quote { opacity: 1; }
.ceo__text {
  margin: 18.930% 0 0;               /* 138 of 729 */
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(20px, 1.984vw, 30px);
  line-height: 1.22;                 /* 36.6 / 30 */
  letter-spacing: 0.04em;
  text-align: justify;
}
.ceo__name, .ceo__role { display: block; }
.ceo__name {
  margin-top: 7.682%;                /* 56 of 729 */
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(20px, 2.116vw, 32px);
  line-height: 1.091;
  letter-spacing: 0.26em;
}
.ceo__role {
  margin-top: 1.235%;
  font-family: var(--sans);
  font-size: clamp(20px, 1.852vw, 28px);
  line-height: 1.1;
  letter-spacing: 0.16em;
}

/* Two wide cards, then rows of three. Widths are shares of the padded box, not
   of the page: with 130 of gutter on each side the content box is 1252. */
.team__grid {
  display: flex;
  flex-wrap: wrap;
  padding-inline: 8.598%;            /* 130 */
  margin-top: 109px;
  column-gap: 9.744%;                /* 122 of 1252 */
  row-gap: min(20px, 1.323vw);
}
/* min-width:0 matters: a flex item will not shrink below its min-content width,
   and with the names set nowrap that is the full string. Without it the longest
   name pushed its card to 454 and broke the rows of three apart. */
.tmember { flex: 0 0 26.837%; min-width: 0; align-self: flex-start; }   /* 336 of 1252 */
.tmember--wide { flex: 0 0 45.048%; }        /* 564 of 1252 */
/* The card is a fixed 556 in the design however long a name runs, which is what
   keeps the rows pitched at 576. Keyed to the photo's own width so it holds for
   the wide cards too, and as a ratio rather than vw so it tracks the content
   width instead of the window. */
.tmember__inner { width: 100%; text-align: left; aspect-ratio: 336 / 556; }
.tmember--wide .tmember__inner { width: 59.574%; margin-inline: auto; }  /* 336 of 564 */
.tmember__photo { display: block; overflow: visible; }
.tmember__photo img {
  transition: transform .417s cubic-bezier(.35, 0, .25, 1);
  transform-origin: center;
}
.tmember:hover { position: relative; z-index: 1; }
.tmember:hover .tmember__photo img { transform: scale(1.086, 1.108); }
.tmember__photo img { width: 100%; aspect-ratio: 336 / 444; object-fit: cover; display: block; }
.tmember__name {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-weight: 700;
  /* The design says 29.4286 and 18.4329 — artefacts of a component that was
     scaled, not chosen sizes. Rounded to whole pixels so the glyphs land on the
     pixel grid; at this size the difference is under half a percent. */
  /* The design sets these at 29.4, which leaves SIVAPRASAD CHELOTHPARA and two
     others running onto a second line. Holding every name to one line inside the
     336 card caps the size at 21.4, so 21 it is — a deliberate step away from the
     design, taken because an even, single-line row was asked for. */
  font-size: clamp(15px, 1.389vw, 21px);
  line-height: 1.091;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0.06em;
}
.tmember__role {
  margin: 13px 0 0;
  font-family: var(--sans);
  font-size: clamp(13px, 1.025vw, 15.5px);   /* SENIOR COMMERCIAL MANAGER caps it at 15.9 */
  line-height: 1.101;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0.16em;
}

/* Client wall, y=5778 h=933. The marks are not on a regular grid, so each one
   keeps the place the design gives it. */
.clients-wall { background: #fff; padding: 80px 0 84px; text-align: center; }
.clients-wall__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 1.852vw, 28px);
  line-height: 1.15;
  letter-spacing: 0.3em;
}
.cwall { position: relative; width: 86.839%; margin: 72px auto 0; aspect-ratio: 1313 / 665; }
.cmark { position: absolute; }
.cmark picture, .cmark img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Branches, y=6711 h=184. */
.branches { background: #231f20; color: #fff; padding: 41px 0 41px; text-align: center; }
.branches__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 1.852vw, 28px);
  line-height: 1.15;
  letter-spacing: 0.3em;
  color: #ad9e8f;
}
.branches__list { display: flex; justify-content: center; gap: 0.661%; margin-top: 22px; }
.branches__list span {
  width: 21.098%;                    /* 319 */
  font-family: var(--sans);
  font-size: clamp(15px, 1.653vw, 25px);
  line-height: 1.6;                  /* 40 / 25 */
  letter-spacing: 0.44em;
  min-height: min(48px, 3.175vw);    /* box 48, line 40 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===========================================================================
   SERVICES — node 35896:2031, page 1512x5159
   =========================================================================== */
.shead { padding: 14.947% 0 0; }        /* title sits at 349, section starts 123 */
.shead__title {
  margin: 0;
  padding-left: 6.349%;                 /* 96 */
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4.762vw, 72px);
  line-height: 1.15;                    /* 82.8 / 72 */
  color: var(--taupe);
}

/* The reveal moves each image in from its own side, so the row is clipped rather
   than allowed to widen the page. clip, not hidden: it makes no scroll container. */
.services { overflow-x: clip; }

/* Blocks are 494 tall and pitched 590. Height comes from padding so that the
   children can be pinned against it — the type A image stands 58 proud at the
   top and bottom, which flow layout would not allow. */
.service {
  position: relative;
  height: 0;
  padding-bottom: 32.672%;              /* 494 */
  margin-top: 6.349%;                   /* 96 between blocks */
}
/* Two lines: the first word ranged left, the rest pushed to the right edge. The
   design does this with a line break and a run of spaces; done here with
   alignment so it holds whatever the font measures. */
.service__title {
  margin: 0;
  min-height: min(108px, 7.143vw);      /* the design's two-line box */
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(24px, 2.910vw, 44px);
  line-height: 1.218;                   /* 53.6 / 44 */
  text-transform: uppercase;
}
/* The offset comes from the design's own space count, converted to an indent by
   the generator. Rendering the spaces themselves came out half again too wide. */
.service__title span { display: block; }
.service__body {
  margin-top: min(44px, 2.910vw);
  font-family: var(--sans);
  font-size: clamp(13px, 0.926vw, 14px);
  line-height: 1.571;                   /* 22 / 14 */
  letter-spacing: 0.05em;               /* 0.7 at 14 */
}
.service__body p { margin: 0; }
.service__body p + p { margin-top: 1.571em; }
.service__image { display: block; }
.service__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Every block centres its copy in the panel — type A leaves 72 above and below,
   type B 83, GVC 66. Centring rather than pinning the top means a longer text, or
   a title that runs to two lines, stays balanced instead of sliding downwards.
   The offset uses the translate property, not transform, so the reveal on scroll
   can still use transform without cancelling it. */
.service__text { position: absolute; top: 50%; translate: 0 -50%; }

/* Type A: full width, copy left, square image proud of the block on the right. */
.service--a .service__text {
  left: 11.111%;                        /* 168 */
  width: 46.230%;                       /* 699 */
}
.service--a .service__image {
  position: absolute;
  left: 59.722%; top: -4.656%;          /* 903, centred on the block */
  width: 40.278%;                       /* 609 */
  /* The design has this square at 609, which leaves only 38 to the panels above
     and below. Trimmed to 540 tall on request, so the gap opens to 73. */
  aspect-ratio: 609 / 540;
}

/* Type B: a 1349 panel flush to the left edge, image left, copy right. The
   children's percentages are shares of that 1349, not of the page. */
.service--b, .service--gvc { width: 89.220%; background: #e6ddd3; }
.service--b .service__image, .service--gvc .service__image {
  position: absolute;
  left: 0; top: 0;
  width: 29.429%;                       /* 397 of 1349 */
  height: 100%;
  overflow: hidden;
}
.service--b .service__text {
  left: 32.098%;                        /* 433 of 1349 */
  width: 62.046%;                       /* 837 of 1349 */
}

/* GVC Contracting: a mark on white rather than a photograph, and its copy sits
   higher and wider than the other tinted panels — the design's own measurements,
   not the shared ones. */
.service--gvc .service__image {
  background: #fff;
  display: flex;
  align-items: center;
}
.service--gvc .service__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;                      /* 397 square inside the 397x494 panel */
  object-fit: contain;
}
.service--gvc .service__text {
  left: 32.098%;                        /* 433 of 1349 */
  width: 62.565%;                       /* 844 of 1349 */
}

/* Closing row, y=4013. Same slider as the project pages, its own heading. */
.other--services { margin-top: 2.513%; padding: 0 4.762% 62px; }
.other__title--services {
  margin: 0 0 21px;
  font-size: clamp(15px, 1.613vw, 24.4px);
  line-height: 2.21;                    /* 53.9 / 24.4 */
  letter-spacing: 0.221em;
  color: #434343;
}
.other--services .other__track { padding-left: 7.018%; gap: 2.339%; }   /* 96, 32 of 1368 */

/* ===========================================================================
   Reveal on scroll. Each piece enters from the side it already occupies, so the
   page reads as assembling itself rather than as panels flying in. Transform and
   opacity only, both cheap for the compositor, and nothing at all for anyone who
   has asked the system to reduce motion.
   =========================================================================== */
/* The hidden state is applied only once the script has confirmed it can undo it
   again — html.has-reveal is set by reveal.js. Hiding by default would leave the
   page blank for anyone whose JavaScript fails to run. */
@media (prefers-reduced-motion: no-preference) {
  .has-reveal [data-reveal] {
    opacity: 0;
    transition: opacity .7s ease-out, transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
  }
  .has-reveal [data-reveal="up"] { transform: translateY(24px); }
  .has-reveal [data-reveal="left"] { transform: translateX(-56px); }
  .has-reveal [data-reveal="right"] { transform: translateX(56px); }
  .has-reveal [data-reveal].is-in { opacity: 1; transform: none; }
}

/* ===========================================================================
   AWARDS — node 35896:2268, page 1512x3966
   =========================================================================== */
/* The copy sits level with ACCOLADES rather than with the top of the title, so
   the two columns finish on the same line. */
.ahead { display: flex; align-items: flex-end; padding: 14.947% 0 0; }  /* title at 349 */
.ahead__title {
  margin: 0 0 0 6.349%;                 /* 96 */
  flex: 0 0 39.021%;                    /* the design's 590 box, which breaks
                                           ACCOLADES onto its own line */
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4.762vw, 72px);
  line-height: 1.15;
  text-transform: uppercase;            /* textCase UPPER in the design */
  color: var(--taupe);
}
.ahead__lead {
  flex: 0 0 43.519%;                    /* 658 */
  /* Starts level with the second card of the strip below, at 724. The title box
     was narrowed so ACCOLADES would break onto its own line, which pulled this
     column 38 to the left of where the design puts it. */
  margin-left: 2.513%;
  font-family: var(--sans);
  font-size: clamp(13px, 1.190vw, 18px);
  line-height: 1.217;                   /* 21.9 / 18 */
}
.ahead__lead p { margin: 0; }

/* The strip runs past the right edge and scrolls. The design puts arrows at
   x=1386; they are left out at the client's request. */
.astrip { position: relative; margin-top: 4.762%; padding-bottom: 18px; }
.astrip__track {
  display: flex;
  gap: 2.381%;                          /* 36 */
  overflow-x: auto;
  overflow-y: clip;
  /* No snapping: it would pull the first card's 96 of inset back to zero, since a
     snap point sits at the card's edge rather than at its margin. The arrows do
     the stepping instead. */
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.astrip__track::-webkit-scrollbar { display: none; }
.acard { flex: 0 0 39.153%; }                 /* 592 */
.acard:first-child { margin-left: 6.349%; }               /* 96 */
.acard:last-child { margin-right: 6.349%; }
.acard picture { display: block; aspect-ratio: 592 / 720; overflow: hidden; }
.acard img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acard__meta {
  display: grid;
  grid-template-columns: 187fr 188fr 187fr;
  gap: 16px;
  margin-top: 16px;
  font-family: var(--sans);
  font-size: clamp(11px, 0.794vw, 12px);
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: left;
  min-height: min(22px, 1.455vw);       /* the design gives each caption a 22 box */
  align-items: center;
}
.acard__meta > :nth-child(2) { text-align: center; }
.acard__meta > :nth-child(3) { text-align: right; }
.acard__name {
  display: block;
  margin-top: 16px;
  font-family: var(--serif);
  font-size: clamp(13px, 1.124vw, 17px);
  line-height: 1.294;                   /* the design's 22 box, not the 18.5 line */
  letter-spacing: 0.26em;               /* 4.42 at 17 */
  text-transform: uppercase;
}

/* The list of awards, y=1393 on #F1EDE1. Rows are 216 tall and pitched 288, so
   the rule between them sits 36 clear on either side. */
/* The design closes the list 34 under its last row, then leaves 72 before the
   awarded projects and sets their heading 40 into that block: 146 in all. */
.alist { background: #f1ede1; margin-top: 4.762%; padding: 48px 0 34px; }
.alist__title {
  margin: 0 0 69px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 1.852vw, 28px);
  line-height: 1.15;
  letter-spacing: 0.3em;
  text-align: center;
}
.aitem {
  position: relative;
  min-height: min(216px, 14.286vw);
  margin-inline: 6.349%;                /* 96 */
}
.aitem:not(:last-child) {
  /* The row itself is 216 and the rule sits 36 below it. With border-box that
     padding has to be added to the minimum, or it eats into the 216 instead. */
  min-height: min(252px, 16.667vw);
  padding-bottom: 36px;
  margin-bottom: 36px;
  border-bottom: 1px solid rgba(0, 0, 0, .35);
}
.aitem__when {
  position: absolute;
  left: 0; top: 4.848%;                 /* 64 of 1320 */
  width: 25.758%;                       /* 340 of 1320 */
  font-family: var(--sans);
  font-size: clamp(20px, 2.381vw, 36px);
  line-height: 1.22;                    /* 43.9 / 36 */
  letter-spacing: 0.15em;               /* 5.4 at 36 */
}
/* The design sets the year bold and the place under it in the regular weight. */
.aitem__when b, .aitem__when span { display: block; }
.aitem__when b { font-weight: 700; }
.aitem__when span { font-weight: 400; }
.aitem__badge {
  position: absolute;
  left: 37.424%;                        /* 590 of 1320 */
  top: 0;
  width: 11.667%;                       /* 154 of 1320 */
  display: block;
}
.aitem__badge img { width: 100%; height: auto; display: block; }
/* The Luxury Lifestyle mark is the designer's own SVG and sits in the page as
   a bare image, so it needs the height released itself — and it is wider and
   shorter than the other badges: 223x202 against 154x216. */
.aitem__badge--wide {
  width: 16.894%;                       /* 223 of 1320 */
  height: auto;
  /* Centred on the same axis as the narrower badges: they run 154 from 590, so
     their middle sits at 43.258% and this one starts half its width before it. */
  left: 34.811%;
}
.aitem__cite {
  position: absolute;
  left: 60.682%;                        /* 897 of 1320 */
  top: 3.030%;                          /* 40 */
  width: 39.318%;                       /* 519 */
  font-family: var(--sans);
  font-size: clamp(13px, 1.190vw, 18px);
  line-height: 1.217;
}
.aitem__cite p { margin: 0; }
.aitem__cite p + p { margin-top: 1.217em; }
/* "Winner of ..." is set bold at 30 over the 18 of the citation beneath it. */
.aitem__cite h3 {
  margin: 0 0 18px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(20px, 1.984vw, 30px);
  line-height: 1.217;
}

/* Awarded projects, y=2728. Three cards of 560 that also run off the page. */
.awon { margin-top: 4.762%; padding: 40px 0 58px; }
.awon__title {
  margin: 0 0 32px 4.762%;              /* 72 */
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(15px, 1.323vw, 20px);
  line-height: 1.15;
  letter-spacing: 0.3em;                /* 6 at 20 */
}
.awon__track {
  display: flex;
  gap: 2.381%;                          /* 36 */
  overflow-x: auto;
  /* A guard only: with overflow-x auto the browser downgrades clip to hidden, so
     the strip must not overflow in the first place — see the rule below. */
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.awon__track::-webkit-scrollbar { display: none; }
.wcard { position: relative; flex: 0 0 37.037%; }            /* 560 */
.wcard:first-child { margin-left: 3.373%; }   /* 51 */
.wcard:last-child { margin-right: 3.373%; }
/* The design rules a line down the gap between cards, level with the pictures.
   The 680 is a share of the card's WIDTH, so it has to come from padding: a
   percentage height would resolve against the card's height instead and ran the
   line 161 past the bottom — which is what let the strip scroll vertically. */
.wcard + .wcard::before {
  content: "";
  position: absolute;
  left: -3.214%; top: 0;
  width: 1px;
  height: 0;
  padding-top: 121.429%;                /* 680 of the 560 card width */
  background: rgba(0, 0, 0, .35);
}
.wcard__image { position: relative; display: block; aspect-ratio: 560 / 680; overflow: hidden; }
.wcard__image > picture:not(.wcard__ribbon) { display: block; width: 100%; height: 100%; }
.wcard__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Each ribbon keeps the place and size the design gives it, as shares of the
   card — they differ between the 80x200 badge and the taller 74x335 one. */
.wcard__ribbon { position: absolute; top: 0; display: block; }
.wcard__ribbon picture, .wcard__ribbon img { width: 100%; height: 100%; display: block; }
.wcard__ribbon img { object-fit: contain; object-position: top; }

/* ===========================================================================
   CONTACT — node 35896:2108, 1512x3234
   CAREERS — node 35896:2236, 1512x3247
   Both open the same way: title at 349, full-bleed photograph at 497.
   =========================================================================== */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.chead { padding: 14.947% 0 0; }        /* title sits at 349 */
.chead__title {
  margin: 0;
  padding-left: 6.349%;                 /* 96 */
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4.762vw, 72px);
  line-height: 1.15;                    /* 82.8 / 72 */
  text-transform: uppercase;
  color: var(--taupe);
}
.chead__image { display: block; margin-top: 4.101%; }   /* title ends 312, image at 374 */
.chead__image img {
  width: 100%;
  aspect-ratio: 1512 / 488;
  object-fit: cover;
  display: block;
}

/* --- the enquiry form, y=1029 h=896 ------------------------------------- */
.cform { margin-top: 2.910%; padding-top: 18px; }       /* 44 gap, title at 1047 */
.cform__title {
  margin: 0;
  padding-left: 6.349%;
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(24px, 2.910vw, 44px);
  line-height: 1.218;                   /* 53.6 / 44 */
  text-transform: uppercase;
}
.cform__title span { display: block; }
.cform__lead {
  /* The design's title box is 86 while the two lines render 108, so the gap that
     lands the lead on 1184 is 29, not the 51 the boxes suggest. */
  margin: 29px 0 0;
  padding-left: 6.349%;
  font-family: var(--sans);
  font-size: clamp(13px, 1.058vw, 16px);
  line-height: 1.5;
  letter-spacing: 0.05em;
}
/* The rule runs 1320 from x=96 and the fields hang below it. Their widths are
   shares of that 1320 box, not of the page. */
.cform__grid {
  margin: 30px 6.349% 0;                   /* the lead box is 38 in the design but renders 26 */
  padding-top: 54px;
  padding-bottom: 105px;
  border-top: 1px solid rgba(0, 0, 0, .25);
  display: grid;
  grid-template-columns: 35.606% 63.030%;   /* 470 label column, 832 field */
  column-gap: 0.606%;                       /* 8 */
  row-gap: 25px;                            /* rows pitch 92.5 over a 67 field */
  align-items: start;
}
.cform__row { display: contents; }
.cform__label {
  grid-column: 1;
  justify-self: end;
  padding-top: 21px;                    /* the label sits 21 into the 67 field */
  font-family: var(--sans);
  font-size: clamp(13px, 0.926vw, 14px);
  line-height: 1.571;                   /* 22 / 14 */
  text-align: right;
  color: rgba(0, 0, 0, .85);
}
.cform__label span { margin-left: 4px; }    /* the colon follows the word at 564 */
.cform__input {
  grid-column: 2;
  width: 100%;
  height: min(67px, 4.431vw);
  padding: 0 12px;                      /* the placeholder starts at 586 */
  border: 1px solid #d9d9d9;
  background: #fff;
  font-family: var(--sans);
  font-size: clamp(13px, 0.926vw, 14px);
  line-height: 1.571;
  color: inherit;
}
.cform__input--tall {
  height: min(176px, 11.640vw);
  padding: 20px 12px;
  resize: vertical;
}
/* The design sets the label at 85% black and the placeholder at 25%. */
.cform__input::placeholder { color: rgba(0, 0, 0, .25); opacity: 1; }
.cform__req { color: #ff4d4f; font-style: normal; margin-left: 4px; }
.cform__input:focus-visible { outline: 2px solid var(--taupe); outline-offset: 2px; }
.cform__foot {
  grid-column: 2;
  /* The row gap that pitches the fields is 25, but the design leaves 18 between
     the textarea and the button. */
  margin-top: -7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cform__count {
  margin: 0;
  text-align: right;
  font-family: var(--sans);
  font-size: clamp(13px, 0.926vw, 14px);
  line-height: 1.571;
}
.cform__submit {
  width: min(132px, 8.730vw);
  height: min(50px, 3.307vw);
  border: 0;
  background: var(--clay);
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(15px, 1.323vw, 20px);
  line-height: 1.22;
  color: inherit;
}

/* --- the two offices, y=1969 and y=2426, each 413 on #C2B5A8 ------------- */
.office {
  position: relative;
  height: 0;
  padding-bottom: 27.315%;              /* 413 */
  margin-top: 2.910%;                   /* 44 between and above */
  background: var(--clay);
  color: var(--white);
  font-family: "Inter", var(--sans);
}
.office__body {
  position: absolute;
  left: 10.450%; top: 12.349%;          /* 158, 51 of 413 */
  width: 49.206%;                       /* 744 */
}
.office__name {
  margin: 0;
  padding-bottom: 31px;                 /* the rule follows at 120 */
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  font-weight: 700;
  font-size: clamp(20px, 2.086vw, 31.5px);
  line-height: 1.202;                   /* 37.9 / 31.5 */
  letter-spacing: -0.02em;
}
.office__company {
  margin: 32px 0 0;
  font-weight: 400;
  font-size: clamp(15px, 1.478vw, 22.3px);
  line-height: 1.2;                     /* 26.8 / 22.3 */
  letter-spacing: -0.02em;
}
.office__rows { margin: 31px 0 0; }
.office__row {
  display: flex;
  align-items: center;
  gap: 16px;                            /* icon at 158, words at 204 */
  min-height: min(55px, 3.638vw);
  border-bottom: 1px solid rgba(255, 255, 255, .5);
}
.office__row:last-child { border-bottom: 0; }
.office__row dt { flex: 0 0 min(33px, 2.183vw); display: flex; justify-content: center; }
.office__row dt img { width: 100%; height: auto; display: block; }
.office__row dd {
  margin: 0;
  font-weight: 500;
  font-size: clamp(13px, 0.870vw, 13.15px);
  line-height: 1.453;                   /* 19.1 / 13.15 */
  letter-spacing: -0.005em;
}
.office__row a { color: inherit; text-decoration: none; }
.office__row a:hover { text-decoration: underline; }
/* This frame is empty in the design; the space is held for a real map. */
.office__map {
  position: absolute;
  left: 62.434%; top: 5.811%;           /* 944, 24 of 413 */
  width: 27.116%; height: 88.620%;      /* 410 x 366 */
  overflow: hidden;
  background: #e8eef7;
}
.office__map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- careers: intro, two picture pairs, closing panel -------------------- */
.cintro { margin-top: 2.910%; padding: 18px 0 69px; }   /* section 1029..1409 */
.cintro__lead {
  margin: 0;
  padding-left: 6.349%;
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(24px, 2.910vw, 44px);
  line-height: 1.218;
  text-transform: uppercase;
}
.cintro__lead span { display: block; }
.cintro__strength {
  /* The design rules a line at 1184 across the same 1320 the copy uses, between
     the opening lines and this heading at 1228. */
  margin: 29px 6.349% 0;
  padding: 44px 0 0;
  border-top: 1px solid rgba(0, 0, 0, .25);
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(20px, 2.381vw, 36px);
  line-height: 1.219;                   /* 43.9 / 36 */
  text-transform: uppercase;
}
.cintro__copy {
  margin: 18px 0 0;                     /* the heading box is 38, it renders 44 */
  padding-left: 6.349%;
  width: 87.302%;                       /* 1320 */
  font-family: var(--sans);
  font-size: clamp(13px, 1.058vw, 16px);
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* A 1190 band from x=161 holding a 494 square and a heading beside it, the two
   swapping sides between the pairs. The heading is centred against the picture. */
.cpair {
  display: flex;
  align-items: center;
  gap: 3.025%;                          /* 36 of the 1190 band, not of the page */
  width: 78.704%;                       /* 1190 */
  margin: 2.910% 0 0 10.648%;           /* 44 above, 161 from the left */
}
.cpair__image { flex: 0 0 41.513%; display: block; }    /* 494 of 1190 */
.cpair__image img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.cpair__text {
  flex: 0 0 55.462%;                    /* 660 of 1190 */
  margin: 0;
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(24px, 2.910vw, 44px);
  line-height: 1.218;
  text-transform: uppercase;
}
.cpair--right { flex-direction: row-reverse; }

.ccta {
  margin-top: 2.910%;
  padding: 97px 0 98px;                 /* title at 2626, button ends 2820 */
  background: #ad9e8f;
  color: var(--white);
}
.ccta__title {
  margin: 0;
  padding-left: 6.349%;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(20px, 2.381vw, 36px);
  line-height: 1.219;
  text-transform: uppercase;
}
.ccta__copy {
  margin: 18px 0 0;                     /* heading box 38, renders 44 */
  padding-left: 6.349%;
  font-family: var(--sans);
  font-size: clamp(13px, 1.058vw, 16px);
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.ccta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(176px, 11.640vw);
  height: min(50px, 3.307vw);
  margin: 57px 0 0 6.349%;              /* copy ends 2713, button at 2770 */
  background: var(--clay);
  color: var(--black);
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(15px, 1.323vw, 20px);
  line-height: 1.22;
}

/* ===========================================================================
   OPENING SEQUENCE — the prototype's own start boards, nodes 35896:1708/1736/1764
   The board is only ever shown when the head script has proved JavaScript runs,
   so a failure leaves the home page visible rather than a black screen nobody
   can dismiss.
   =========================================================================== */
.opening { display: none; }
.js .opening {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: #000;
  overflow: hidden;
}
.opening__logo {
  width: 24.206vw;                      /* 366 of the design's 1512 */
  height: auto;
  display: block;
  transform-origin: center;
  will-change: transform;
}
/* The starting board — Intro 01, 27.2 times the size, off to the upper right
   — used to be set from JS after the first paint. Deferred script runs after
   the browser has already painted the logo at rest, so for one frame it
   showed small, then jumped out to this huge crop, then animated back in:
   a flash before the flourish. Set here instead, it is what the very first
   frame paints, with nothing to jump from. JS still owns everything after —
   the 800ms hold, the move to centre, the hand-off to the nav logo. Phones
   and tablets skip this board entirely (see the media query below); at that
   width the same relative zoom is a screen-filling crop of a letter for a
   full second, which reads as a glitch rather than a flourish. */
@media (min-width: 1025px) {
  .opening__logo { transform: translate(79.497vw, -16.435vw) scale(27.2022); }
}
/* Armed only after the opening state has painted, so the first move animates. */
.opening.is-running .opening__logo {
  transition: transform 1.25s cubic-bezier(.22, .61, .36, 1);
}
.opening.is-leaving { opacity: 0; transition: opacity 1.25s ease; pointer-events: none; }
.opening.is-quick { transition: opacity .25s ease; }
.opening.is-quick.is-leaving { transition: opacity .25s ease; }
/* Nothing scrolls behind the board. */
.is-opening, .is-opening body { overflow: hidden; }

/* ===========================================================================
   TABLET AND PHONE

   The design exists once, at 1512, and everything above scales it by
   percentage. That holds the proportions honestly down to about a tablet and
   then gives out: type reaches sizes nobody can read, and rows that sat side
   by side have no width left to sit in. Below here the layout reflows rather
   than shrinks.

   Two steps. 1024 is the tablet, where wide rows lose a column and the type
   stops following the viewport down. 700 is the phone, where everything
   becomes one column and the menu moves behind a button. Both sit where this
   design's own content gives out, not at any particular device.
   =========================================================================== */

/* --- Tablet ------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* The proportional type has shrunk as far as it usefully can. From here each
     role holds a floor; the size drawn in the design stays the ceiling. */
  .tile__title,
  .pcard__name,
  .other__name,
  .aitem__cite { font-size: 13px; }
  .tile__sub,
  .pcard__meta,
  .other__meta,
  .psector a,
  .footer__nav a { font-size: 11px; }

  .featured__row--one,
  .featured__row--two { padding-inline: 4%; }

  /* Both halves stay, but the fixed column height goes: it is the height of the
     design's own text and only opens a gap once the column is narrower. */
  .heritage { gap: 32px; }
  .heritage__text { min-height: 0; gap: 28px; }

  .awarded { padding-inline: 6%; }
  .awarded__grid { gap: 4%; }

  .clients__strip img { height: 84px; width: 84px; }

  /* The six footer links no longer fit beside the wordmark at a size worth
     reading, so the whole footer becomes a centred stack instead: logo, then
     the links three to a row (a grid holds that count regardless of how
     wide any one word runs), then the copyright on its own line, then
     FOLLOW US and the two marks — everything on the same centre line. */
  .footer__top { flex-direction: column; align-items: center; gap: 24px; text-align: center; }
  .footer__nav { width: 100%; }
  .footer__nav ul {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    column-gap: 28px;
    row-gap: 4px;
  }
  .footer__nav a { padding-inline: 0; }
  .footer__bottom { flex-direction: column; align-items: center; gap: 20px; text-align: center; }
  .footer__follow {
    width: auto;
    flex: 0 0 auto;
    justify-content: center;
    border-top: 0;
    padding-top: 0;
  }
  .footer__copy { flex: 0 0 auto; width: 100%; margin: 0; text-align: center; }

  /* About */
  .aintro { flex-direction: column; }
  .aintro__text,
  .aintro__image { flex: 1 1 auto; width: 100%; }
  .values { flex-wrap: wrap; gap: 40px 5%; padding-block: 72px; padding-inline: 5%; }
  /* The design gives each card a left margin as a share of the page, which only
     held while three of them sat in a row. Wrapped, the row spaces itself. */
  .value,
  .value--vision { flex: 1 1 40%; width: auto; margin-left: 0; }
  .team__grid { column-gap: 6%; }
  /* The two wide cards and their narrower, centred inner photo were sized to
     read as a pair in the design's own three-across row; once that row can
     no longer hold three, having two members photographed larger than the
     rest looks like an accident rather than a choice. Same size as everyone
     else. */
  .tmember--wide { flex: 0 0 26.837%; }
  .tmember--wide .tmember__inner { width: 100%; margin-inline: 0; }
  /* The hover scale is a mouse affordance; on a touch screen it has nothing
     to preview and nothing to undo it once a tap leaves it triggered. */
  .tmember:hover .tmember__photo img { transform: none; }

  /* The CEO block is its own hero band with a hover-only quote — there is no
     hover on a touch screen, so the quote (and his name inside it) never
     showed at all below the design width. Restyled here as one more member
     card, photo then name then role, same as everyone else in the grid. */
  /* .team carries no side padding of its own at this width — the grid's own
     8.598% is where the inset actually lives — so the CEO card, sitting
     outside that grid, is sized and placed as a share of the grid's own box
     rather than centred in the wider one around it. 26.837% of the grid's
     82.804% content width, offset by that same 8.598%, is one card. */
  .ceo {
    position: static;
    aspect-ratio: auto;
    width: 22.226%;
    margin: 0 0 0 8.598%;
  }
  .ceo__photo {
    position: static;
    left: auto; top: auto;
    width: 100%; height: auto;
    aspect-ratio: 336 / 444;
    transition: none;
  }
  .ceo:hover .ceo__photo, .ceo:focus-within .ceo__photo { left: auto; }
  .ceo__quote {
    position: static;
    width: 100%;
    margin-top: 10px;
    text-align: left;
    opacity: 1;
    transition: none;
  }
  .ceo:hover .ceo__quote, .ceo:focus-within .ceo__quote { opacity: 1; }
  .ceo__text { display: none; }
  .ceo__name {
    margin-top: 0;
    font-size: 15px;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
  .ceo__role {
    margin-top: 13px;
    font-size: 13px;
    letter-spacing: 0.16em;
  }
  /* Both names in the design's own case; the markup only capitalises one. */
  .branches__list span { text-transform: uppercase; }

  /* Awards */
  .acard { flex: 0 0 46%; }

  /* The list rows are built from three absolutely-positioned children inside a
     box whose min-height is a percentage of the viewport — it was tuned for
     1512px and collapses to a sliver below that, so the real content (in
     particular the citation, several lines of running text) hung out past the
     row and over whatever came next. Below the design width the row becomes a
     normal, static, wrapping flex line instead — nothing is positioned against
     the row's own box any more, so nothing can spill out of it. */
  .aitem {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 24px;
    row-gap: 16px;
    min-height: 0;
  }
  .aitem:not(:last-child) { min-height: 0; }
  .aitem__when,
  .aitem__badge,
  .aitem__badge--wide,
  .aitem__cite {
    position: static;
    left: auto;
    top: auto;
    width: auto;
  }
  .aitem__when { flex: 1 1 100%; }
  .aitem__badge { flex: 0 0 auto; width: 96px; }
  .aitem__badge--wide { width: 128px; }
  .aitem__cite { flex: 1 1 220px; }

  /* Touch targets — the social icons are drawn at their design size
     everywhere; below the design width that is a 22px box, under the 44px a
     finger needs. The icon itself stays put, only the box it sits in grows,
     so nothing about how it looks on a desktop pointer changes. */
  .footer__social a {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: -11px;   /* the icon's own gap already spaces the visible marks */
  }

  /* Contact and careers */
  .cform__grid { grid-template-columns: 1fr; row-gap: 8px; }
  /* The label and field were still pinned to grid-column 1 and 2 respectively,
     which is fine on the two-column desktop grid but forces a phantom second
     column back into existence the moment the grid itself is told to render
     as one — Grid creates an implicit track to honour the explicit placement,
     and the whole form crushed into two narrow columns instead of stacking.
     Both children now claim the row's one real column, and the label reads
     left rather than ranged right against a field that is no longer beside it. */
  .cform__label,
  .cform__input,
  .cform__foot { grid-column: 1; }
  .cform__label { padding-top: 0; text-align: left; justify-self: start; }
  /* Every field height in this form is a vw-scaled min(), tuned to stay put
     down to the design width and shrink below it — which on a phone-width
     viewport worked out to a 12-17px control, not the 50-67px drawn. Fixed
     floors here instead, held every width down to 320px. */
  .cform__input { height: 48px; }
  .cform__input--tall { height: 140px; }
  .cform__submit { width: 100%; height: 48px; }
  /* The submit button now fills the row on its own, so the counter beside it
     needs a row of its own too rather than being squeezed against it. */
  .cform__foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cform__count { text-align: left; }

  .office__rows { gap: 24px; }
  /* Same shape as the awards row: a percentage-of-viewport padding-bottom
     stood in for height, and the address/phone/mail block and the map, both
     absolutely placed against it, ran straight past it and into the office
     below. Given a real, static height instead. */
  .office {
    height: auto;
    padding: 32px 6%;
  }
  .office__body { position: static; width: 100%; }
  .office__map {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    margin-top: 24px;
  }
  /* The icon column is the same vw-scaled min() as the form fields above —
     33px at the design width, under 9px on a phone. A fixed floor keeps the
     address/phone/mail marks legible at every width below 1024. */
  .office__row dt { flex: 0 0 22px; }
  /* Rows sat close enough that the three read as one paragraph. Top-aligned
     rather than centred and given room on both sides, so the icon lines up
     with the first line of its text (which the long Riyadh address wraps to
     several of) instead of drifting to the middle of the whole block. The
     icon is trimmed a little further than the touch-target fix above gave
     it — it is not itself a tap target, and the room freed keeps the
     address from wrapping into an orphan word on its own line. */
  .office__row {
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
    min-height: 0;
    padding-block: 14px;
  }
  .office__row dt { margin-top: 2px; }
  .office__row dd { flex: 1 1 auto; min-width: 0; line-height: 1.5; text-wrap: pretty; }
}

/* --- Phone -------------------------------------------------------------- */
@media (max-width: 767px) {
  /* A page drawn 1512 wide carries insets of a few percent; on a phone that is
     a couple of pixels, so the whole page takes one honest gutter instead. */
  :root { --gutter: 22px; }

  .intro,
  .cta,
  .awarded,
  .featured__row--one,
  .featured__row--two,
  .heritage { padding-inline: var(--gutter); }

  /* The hero is drawn in landscape and a phone is not, so it is given a shape
     it can fill rather than a strip a few centimetres tall. */
  .hero { aspect-ratio: 3 / 4; }
  .hero__arrow { display: none; }
  .hero__mute { left: auto; right: var(--gutter); top: auto; bottom: 76px; }
  .hero__dots { top: auto; bottom: 24px; transform: translateX(-50%); }

  .intro { padding-block: 48px 40px; gap: 24px; }
  .intro__title { font-size: 22px; line-height: 1.3; letter-spacing: 1.2px; }
  .intro__sub { font-size: 16px; line-height: 1.5; letter-spacing: 0.4px; }

  /* Stacked, each tile has a full column, so the title can be read at the size
     it was drawn and no longer has to be held on one line. */
  .featured__row--one,
  .featured__row--two { flex-direction: column; gap: 32px; padding-block: 40px; }
  .featured__row--one > .tile,
  .featured__row--two > .tile:nth-of-type(1),
  .featured__row--two > .tile:nth-of-type(2),
  .featured__row--two > .tile:nth-of-type(3) { flex: 1 1 auto; width: 100%; }
  .featured__rule { display: none; }
  .tile__image,
  .featured__row--two > .tile:nth-of-type(2) .tile__image,
  .featured__row--two > .tile:nth-of-type(3) .tile__image { aspect-ratio: 3 / 2; }
  .tile__caption { padding-inline: 0; min-height: 0; }
  .tile__title { font-size: 13px; white-space: normal; }
  .tile__sub { font-size: 11px; }

  .heritage { flex-direction: column; padding-block: 40px; }
  .heritage__media { flex: 1 1 auto; width: 100%; padding: 0; }
  .heritage__text { flex: 1 1 auto; width: 100%; gap: 20px; }
  .heritage__title { font-size: 24px; letter-spacing: 1.2px; }
  .heritage__body { font-size: 16px; line-height: 1.5; }

  /* The height alone carries the touch target; the width is let go so a long
     label wraps instead of pushing the page sideways. */
  .btn,
  .btn--lg { min-width: 0; min-height: 48px; font-size: 15px; white-space: normal; }

  .awarded { padding-block: 40px; }
  .awarded__title { margin-bottom: 28px; font-size: 20px; letter-spacing: 0.8px; }
  .awarded__grid { flex-direction: column; gap: 32px; }
  .award__meta { font-size: 10px; gap: 8px; }
  .award__name { font-size: 14px; letter-spacing: 2.4px; min-height: 0; }

  .clients { padding-block: 44px; }
  .clients__title { margin-bottom: 28px; font-size: 20px; letter-spacing: 4px; }
  .clients__strip img { height: 64px; width: 64px; }

  .cta { padding-block: 48px 56px; }
  .cta__title { font-size: 22px; line-height: 1.3; }

  .footer { padding: 28px var(--gutter) 32px; }
  .footer__logo img { width: 132px; }
  .footer__nav ul { column-gap: 20px; row-gap: 10px; }
  .footer__follow { min-height: 0; }
  /* Uppercase with 2px of tracking is drawn for a much wider bar; at this
     width the full copyright line wraps to two. Case and tracking are purely
     stylistic here, so it is the one to give up to keep the line whole. */
  .footer__copy { font-size: 11px; letter-spacing: normal; text-transform: none; }

  /* Project archive and detail */
  .pcard,
  .phead,
  .pmeta,
  .pgallery,
  .psector { padding-inline: var(--gutter); }
  .pmeta { grid-template-columns: 1fr; max-width: none; }
  .pgallery { max-width: none; }
  .psector { justify-content: flex-start; }
  .pgal picture { flex: 0 0 88%; }
  .oslide { flex: 0 0 84%; }
  /* The tablet's two columns don't have the room left on a phone. */
  .other__grid { grid-template-columns: 1fr; }

  /* About */
  .ahead__title,
  .shead__title,
  .chead__title,
  .aintro__title { font-size: 34px; letter-spacing: 0.5px; }
  .ahead,
  .aintro__text,
  .aintro__image { padding-inline: var(--gutter); }
  /* The title and the lead paragraph are two fixed-percentage columns tuned
     for the 1512 canvas; narrower than that they both starve for width and
     end up fighting each other on the same line. Title first, full width,
     lead below it, the way a heading and its copy normally read. */
  .ahead { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ahead__title,
  .ahead__lead { flex: 1 1 auto; width: 100%; margin: 0; }
  .aintro__body { font-size: 16px; line-height: 1.6; }
  .values { flex-direction: column; gap: 40px; padding: 48px var(--gutter); }
  .value,
  .value--vision { flex: 1 1 auto; width: 100%; margin-left: 0; }
  .value__title { font-size: 18px; }
  .value__text { font-size: 16px; line-height: 1.6; }
  .team { padding-inline: var(--gutter); }
  /* .team now carries the section's own gutter, so the grid's separate
     8.598% (right below it, still doing its tablet job) would double up
     with it here — cards would sit inset from an inset. */
  .team__grid { flex-direction: column; row-gap: 36px; padding-inline: 0; }
  .tmember,
  .tmember--wide { flex: 1 1 auto; width: 100%; }
  /* The CEO card is sized like a tablet-width grid column above; stacked
     with everyone else here, it takes the same full-width column they do. */
  .ceo { width: 100%; margin: 36px 0 0; }
  .tmember__inner { aspect-ratio: auto; }
  .branches__list { flex-wrap: wrap; justify-content: center; gap: 12px; }

  /* Services — the blocks overlap by design, the picture set against the copy.
     Stacked, each is a picture with its words underneath. */
  .service,
  .service--a,
  .service--b,
  .service--gvc { padding: 0 var(--gutter) 44px; height: auto; }
  .service__text,
  .service--a .service__text,
  .service--b .service__text,
  .service--gvc .service__text,
  .service__image,
  .service--a .service__image,
  .service--b .service__image,
  .service--gvc .service__image {
    position: static;
    width: 100%;
    left: auto;
    right: auto;
    top: auto;
    translate: none;
  }
  .service__image { margin-bottom: 20px; aspect-ratio: 4 / 3; }
  .service__title { font-size: 20px; }
  .service__body { font-size: 16px; line-height: 1.6; }

  /* Awards */
  .astrip,
  .alist,
  .awon { padding-inline: var(--gutter); }
  /* The strip's own inset (6.349%, the same margin the title carries) is on
     top of the gutter just added to its container, so the row started
     further right than the heading above it. The container's padding is now
     doing that job, so the card's own margin is no longer wanted. */
  .acard:first-child { margin-left: 0; }
  .acard:last-child { margin-right: 0; }
  .acard { flex: 0 0 86%; }
  .aitem { gap: 8px; }
  .wcard { flex: 0 0 86%; }

  /* Contact and careers */
  .chead,
  .cintro,
  .cform,
  .office,
  .ccta { padding-inline: var(--gutter); }
  .cintro__lead { font-size: 22px; }
  .cintro__copy,
  .cintro__strength { font-size: 16px; line-height: 1.6; }
  .cform__input { font-size: 16px; }   /* 16 keeps iOS from zooming the field */
  .cform__submit { width: 100%; }
  .office__map { aspect-ratio: 4 / 3; }
  .cwall { width: 100%; aspect-ratio: 1 / 1; }
  .cpair,
  .cpair--right { flex-direction: column; gap: 20px; }
  .cpair__image,
  .cpair__text { width: 100%; flex: 1 1 auto; }
  .ccta__title { font-size: 22px; }
  .ccta__copy { font-size: 16px; line-height: 1.6; }
}

/* ===========================================================================
   MENU BUTTON

   The design has no phone drawing, so the bar keeps its own furniture — the
   wordmark — and the five entries move behind a button. The panel inherits
   the colour of the bar it drops out of, which is how it stays right both
   over the hero, where the bar is transparent and white, and on the inner
   pages, where it is cream and black.
   =========================================================================== */
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;            /* the target is wider than the mark it draws */
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
}
/* PROJECTS' own disclosure — a chevron, shown only where the sub-list is
   collapsed by default (the phone panel; see the media query below). */
.nav__subtoggle { display: none; }
.nav__subtoggle svg { width: 10px; height: 6px; display: block; }
.nav__bars,
.nav__bars::before,
.nav__bars::after {
  display: block;
  width: 24px;
  height: 1.5px;
  background: currentColor;
  transition: transform .25s ease, opacity .15s ease;
}
.nav__bars {
  position: relative;
}
.nav__bars::before,
.nav__bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav__bars::before { top: -7px; }
.nav__bars::after { top: 7px; }

/* Open: the outer two meet in the middle and cross, the middle one goes. */
.nav__toggle[aria-expanded="true"] .nav__bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__bars::before { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 767px) {
  .nav { height: 88px; padding-inline: 22px; }
  .nav__logo { width: 118px; flex: 0 0 118px; }
  .nav__toggle { display: flex; margin-left: auto; }

  /* The panel hangs off the bar itself, not off the inner row, so it starts at
     the bar's own bottom edge and runs the full width rather than stopping at
     the row's insets. */
  .nav__inner { position: static; }

  /* Out of flow so the bar keeps its height, and full width so the panel reads
     as part of the bar rather than a card floating under it. */
  .nav__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 8px 22px 24px;
    background: inherit;
    /* Over the hero the bar itself is transparent, so the panel would be too.
       It gets its own ground there, dark enough for the white type. */
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .nav--over .nav__menu { background: rgba(0, 0, 0, .72); }
  .nav:not(.nav--over) .nav__menu { background: var(--cream); }

  .nav__menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
  }

  .nav__item { width: 100%; }
  .nav__link {
    display: block;
    padding-block: 14px;            /* with the line box below, a 46px row */
    font-size: 15px;
    /* The bar sets a 14px line height against its own 14px type; at this size
       that clips the descenders, and the row lands under 44. */
    line-height: 1.2;
    letter-spacing: 2.5px;
  }
  .nav__item--projects > .nav__link { padding-inline: 0; }
  .nav__link.is-current { border-bottom: 0; padding-bottom: 14px; opacity: .55; }

  /* PROJECTS carries its own disclosure button here rather than the hover the
     desktop uses, and the four sector links stay collapsed under it until
     that button is tapped — the same as every other menu on a phone, and no
     longer four extra rows shown whether anyone wanted them or not. */
  .nav__item--projects {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .nav__item--projects > .nav__link { flex: 1 1 auto; }
  .nav__subtoggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    transition: transform .2s ease;
  }
  .nav__item--projects.is-open .nav__subtoggle { transform: rotate(180deg); }
  .nav__sub {
    position: static;
    flex-basis: 100%;
    opacity: 1;
    visibility: visible;
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
  }
  .nav__item--projects.is-open .nav__sub { max-height: 220px; }
  .nav__sub { padding: 0 0 8px 18px; }
  .nav__sub a { display: block; padding-block: 16px; font-size: 11px; }
  .nav__item--projects::after { display: none; }
}

/* --- Reveal on a phone ---------------------------------------------------
   The sideways entrances are drawn against a 1512 canvas, where 56px is a
   nudge. On a phone it is a sixth of the screen, and with the columns stacked
   there is no side for a piece to come from any more — everything is simply
   below what came before it. So the horizontal entrances become the vertical
   one the stacked page already uses. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .has-reveal [data-reveal="left"],
  .has-reveal [data-reveal="right"] { transform: translateY(24px); }
}

/* ===========================================================================
   CONTACT FORM — the parts the design does not draw

   The trap field and the notice after sending have no place in the Figma file
   because neither is part of what a visitor is meant to see: one is never
   shown at all, the other only exists once the form has been used.
   =========================================================================== */

/* Out of sight, out of the tab order, and out of the accessibility tree — but
   not display:none, which some robots check for before deciding to fill it. */
.cform__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cform__note {
  margin: 0 0 28px;
  padding: 16px 20px;
  border-left: 3px solid currentColor;
  background: rgba(157, 144, 121, 0.12);   /* the taupe, at a whisper */
  font-family: var(--sans);
  font-size: clamp(14px, 1.058vw, 16px);
  line-height: 1.5;
}
.cform__note--sent { color: #3d2a23; }
.cform__note--error { color: #8a2b1f; background: rgba(138, 43, 31, 0.08); }