/* DRC UAE landing page. Built from Dylan Joseph's Figma design (file F5pOIqX7Ke0QdVqrJs2ayn, read
   11 Nov 2026): desktop frame 1:7, mobile frame 91:4241. Colours, sizes and spacing are the design's.
   Fonts: Graphik, the design's text face, from DRC's web font files (Dylan Joseph, 12 Nov: Regular and Medium, licensed
   for web use only). Maax Mono, the design's label face, is still to come, so labels use IBM Plex Mono for now. The
   header nav is IBM Plex Mono in the design itself; every heading is Graphik (Figma's per-character overrides). */

@font-face { font-family: "Graphik"; src: url("assets/fonts/graphik-regular-web.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Graphik"; src: url("assets/fonts/graphik-medium-web.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex"; src: url("assets/fonts/ibm-plex-sans-latin.woff2") format("woff2");
  font-weight: 100 700; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400; font-display: swap; }

:root {
  --bg: #0a1f1f;          /* App, hero, intelligence, form, footer */
  --bg-2: #0f2c2b;        /* clients bar, documentation, form card */
  --bg-3: #12403a;        /* compliance, team */
  --ink: #dbfff6;
  --ink-66: rgba(219, 255, 246, .66);
  --ink-62: rgba(219, 255, 246, .62);
  --green: #17c99e;
  --mint: #9af5de;
  --pale: #cbf4ea;
  --coral: #ff6b6b;
  --line: rgba(154, 245, 222, .30);
  --sans: "Graphik", "Plex", "Helvetica Neue", Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, Menlo, monospace;
  --gutter: 40px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; font-weight: 400; }
ul { margin: 0; padding: 0; list-style: none; }

.container { width: 100%; max-width: calc(1440px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* Labels: "OUR SERVICES" and the like. Maax 13/15.6, +1.04 tracking, upper case, green, with a coral dot. */
.eyebrow { display: flex; align-items: center; gap: 10px; font: 400 13px/15.6px var(--mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.eyebrow-light { color: var(--ink); }
.dot { width: 8px; height: 8px; border-radius: 4px; background: var(--coral); flex: none; }

h1 { font-size: 72px; line-height: 76px; letter-spacing: -3px; margin-top: 28px; }
h1 .accent { color: var(--green); display: block; }
h2 { font-size: 64px; line-height: 75.6px; letter-spacing: -2.52px; margin-top: 24px; }
.lede { font-size: 18px; line-height: 27.9px; color: var(--ink-66); text-wrap: pretty; }   /* no last word alone */

/* Buttons: coral, 18 radius, label Graphik 500 13 upper case in the app's dark green. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0;
  border-radius: 18px; font: 500 13px/15.6px var(--sans); text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: background-color .2s, transform .2s; }
.btn-coral { background: var(--coral); color: var(--bg); }
.btn-coral:hover { background: #ff8282; }
.arrow { width: 12px; height: 9px; background: currentColor; flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M0 4.5h10.6M7.1 1l3.5 3.5L7.1 8' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M0 4.5h10.6M7.1 1l3.5 3.5L7.1 8' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Header: a glass pill, 1434 by 78, 55 radius, floating 28px from the top (Figma 1:500). */
.site-header { position: fixed; top: 28px; left: 0; right: 0; z-index: 50; padding: 0 var(--gutter); }
.bar { max-width: 1434px; height: 78px; margin: 0 auto; display: flex; align-items: center; gap: 24px;
  padding: 0 34px; border-radius: 55px; border: 1px solid rgba(219, 255, 246, .14);
  background: rgba(10, 31, 31, .28); -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%); }
/* Past the hero the glass darkens to the mobile design's fill (162:2397), so the links keep 4.5:1 over light photos. */
.site-header.is-scrolled:not([data-menu="open"]) .bar { background: rgba(10, 31, 31, .65); }
.brand { display: flex; align-items: center; flex: none; }
.logo-mark { display: none; }
.nav { display: flex; gap: 34px; margin: 0 auto; }
.nav a { font: 400 13px/19.5px var(--mono); text-transform: uppercase; color: #fff; text-decoration: none;
  padding: 12px 0; opacity: .92; }
.nav a:hover { color: var(--green); opacity: 1; }
.nav a, .btn { white-space: nowrap; }
.btn-header { height: 42px; padding: 0 18px; border-radius: 16px; }
.menu-toggle { display: none; }

/* Hero: 887 high on the 1972 canvas; the photo under two gradients. */
.hero { position: relative; min-height: 887px; display: flex; align-items: flex-start; overflow: hidden; }
.hero picture, .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-img { object-fit: cover; object-position: 50% 50%; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(5, 28, 27, .68) 0%, rgba(5, 28, 27, 0) 55%),
    linear-gradient(to right, rgba(5, 28, 27, .92) 52%, rgba(5, 28, 27, .7) 80.8%, rgba(5, 28, 27, .18) 100%); }
.hero-inner { position: relative; z-index: 1; padding-top: 362px; padding-bottom: 150px; }
.hero h1 { max-width: 900px; }
.hero-lede { max-width: 650px; margin-top: 32px; font-size: 18px; line-height: 25px; color: rgba(255, 255, 255, .85); }
.btn-hero { margin-top: 40px; height: 52px; padding: 0 24px; }

/* Two-column sections */
.split { display: grid; grid-template-columns: 635px minmax(0, 693px); justify-content: space-between; gap: 64px; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.services { padding: 128px 0; }
.services .lede { max-width: 505px; margin-top: 30px; }
.media-services { border-radius: 18px; overflow: hidden; background: #dfe5e2; aspect-ratio: 693 / 628; }
.media-services img { object-position: 81% 50%; }   /* Figma 1:130 crop, 31% to 93% of the photo */

/* Numbered rows: 75 apart, a 1px mint line under each. */
.rows { margin-top: 50px; border-top: 1px solid var(--line); }
.row { border-bottom: 1px solid var(--line); }
.row summary { display: flex; align-items: center; min-height: 74px; cursor: pointer; list-style: none; }
.row summary::-webkit-details-marker { display: none; }
/* Services: a list only, nothing opens (Dylan Joseph, 12 Nov: "remove the plus icons and keep the layout as a list only"). */
.rows-list { margin-bottom: 0; padding: 0; list-style: none; }
.rows-list .row { display: flex; align-items: center; min-height: 74px; }
.num { width: 54px; flex: none; font: 400 11px/16.5px var(--mono); color: var(--green); }
.row-title { flex: 1; font-size: 21px; line-height: 27.3px; transition: color .2s; }
.row summary:hover .row-title { color: var(--green); }
.row summary:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 4px; }
.plus { position: relative; width: 22px; height: 22px; flex: none; margin-right: 10px; transition: transform .25s; }
.plus::before, .plus::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 1.76px;
  margin-top: -.88px; background: var(--mint); transition: background-color .25s; }
.plus::after { transform: rotate(90deg); }
.row[open] .plus { transform: rotate(45deg); }
.row[open] .plus::before, .row[open] .plus::after { background: var(--coral); }
.row[open] .row-title { color: var(--green); font-weight: 500; }
.row > p { padding: 0 54px 26px 54px; max-width: 520px; font-size: 16px; line-height: 24.8px; color: var(--ink-62); }
/* A line the design does not give. Copy comes only from DRC, so it shows as a gap until they send it. */
.row > p.gap, .gap { color: var(--coral); font: 400 12px/18px var(--mono); text-transform: uppercase; letter-spacing: .04em; }

/* Compliance band */
.compliance { background: var(--bg-3); padding: 85px 0 88px; }
.compliance-inner { display: grid; grid-template-columns: 560px minmax(0, 812px); justify-content: space-between; gap: 40px; }
.h2-compliance { font-size: 48px; line-height: 63.8px; letter-spacing: -2.13px; }
.checks { border-top: 1px solid rgba(23, 201, 158, .28); }
.checks li { display: flex; gap: 19px; padding: 18px 0 20px; border-bottom: 1px solid rgba(23, 201, 158, .28); }
.check-arrow { width: 24px; height: 24px; flex: none; margin-top: 4px; background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 5.6l6.4 6.4-6.4 6.4' fill='none' stroke='%23000' stroke-width='2.16'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 5.6l6.4 6.4-6.4 6.4' fill='none' stroke='%23000' stroke-width='2.16'/%3E%3C/svg%3E") center / contain no-repeat; }
.checks h3 { font-size: 20px; line-height: 30px; font-weight: 500; color: var(--pale); }
.checks p { margin-top: 4px; font-size: 16px; line-height: 23.2px; color: rgba(255, 255, 255, .6); }

/* Clients bar: copy left, logos running right, faded at both ends. */
.clients { background: var(--bg-2); border-block: 1px solid rgba(23, 201, 158, .2); padding: 30px 0; }
.clients-inner { display: grid; grid-template-columns: 370px minmax(0, 1fr); align-items: center; gap: 40px; min-height: 55px; }
.clients-text { font-size: 14px; line-height: 19.6px; color: var(--ink-62); }
.marquee { overflow: hidden; }
/* The fade is on an inner window: on .marquee itself the mask also hid its keyboard focus ring. */
.marquee-window { overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 92%, transparent 100%); }
.marquee-track { width: max-content; animation: logos 90s linear infinite; }
.marquee-track img { height: 35px; width: auto; max-width: none; }
/* The strip holds the logos twice; the second set starts 3901 of 7723 along, so moving that far loops it. */
/* Keyboard focus pauses it; a tap or click toggles .is-paused (main.js). Mouse or touch focus does not pause it, or a
   second tap could not restart it. */
.marquee:focus-visible .marquee-track, .marquee.is-paused .marquee-track { animation-play-state: paused; }
/* Hover pauses it only where there is a real hover: on touch screens a tap's hover would stay on, and a second tap
   could not restart it. */
@media (hover: hover) { .marquee:hover .marquee-track { animation-play-state: paused; } }
.marquee:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
@keyframes logos { to { transform: translateX(-50.511%); } }

/* Building documentation */
.documentation { background: var(--bg-2); padding: 128px 0; }
.split-reverse { grid-template-columns: minmax(0, 632px) 708px; }
.media-surveys { border-radius: 22px; overflow: hidden; aspect-ratio: 632 / 688; }
.media-surveys img { transform: scaleX(-1); }   /* Figma 1:160 / 91:4470 show the photo mirrored */
.documentation .split-text { padding-left: 0; align-self: center; }
.documentation .lede { margin-top: 30px; font-size: 18px; line-height: 28.8px; }
.features { margin-top: 40px; border-top: 1px solid var(--line); }
.features li { display: flex; align-items: flex-start; gap: 20px; padding: 24px 0 32px; border-bottom: 1px solid var(--line); }
.features li:last-child { border-bottom: 0; padding-bottom: 0; }
.features img { width: 32px; height: 32px; flex: none; margin-top: 0; }
.features span { font-size: 16px; line-height: 24.8px; }

/* Building and asset intelligence */
.intelligence { position: relative; padding: 128px 0; overflow: hidden; }
/* pattern.svg is Dylan's second file (12 Nov) with one change: its base layer, which the shapes cover, is the page's
   dark green instead of #00AD82 (and its #12403A backdrop the same), so no green hairline shows where shape edges meet its outline (his "slight line on
   the left side"; the renders differ only in those edge pixels). */
.pattern { position: absolute; top: 0; right: 0; width: min(855px, 43.4vw); height: auto; pointer-events: none; }
.intel-head { position: relative; max-width: 600px; }
.intel-head .lede { max-width: 463px; margin-top: 21px; font-size: 18px; line-height: 28.8px; }
.intel-body { position: relative; display: grid; grid-template-columns: minmax(0, 717px) 593px;
  justify-content: space-between; gap: 64px; margin-top: 54px; align-items: start; }
.globe { position: relative; border: 1px solid rgba(23, 201, 158, .43); border-radius: 19px; overflow: hidden; aspect-ratio: 717 / 393; background: #0a1f1f; }
.globe img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The video: a poster with the design's play button until pressed, then Vimeo's player at the video's own 16:9. */
.video-play { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.video-play:focus-visible { outline: 2px solid var(--green); outline-offset: -4px; border-radius: 19px; }
.play { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%;
  background: rgba(10, 31, 31, .88); transition: transform .25s ease, background-color .25s ease; }
.play::after { content: ""; position: absolute; left: 38px; top: 30px; border-style: solid; border-width: 18px 0 18px 30px;
  border-color: transparent transparent transparent #fff; }
.video-play:hover .play, .video-play:focus-visible .play { transform: scale(1.06); background: rgba(10, 31, 31, .96); }
.globe.is-playing { aspect-ratio: 16 / 9; }
.globe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rows-intel { margin-top: 0; }

/* Team */
.team { background: var(--bg-3); padding: 128px 0; }
.team-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.team-head .lede { max-width: 436px; padding-bottom: 6px; }
.team-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 62px; }
/* The card is rounded by one clip over the whole card, not by overflow and border-radius: those cut each layer's
   corner separately, and the white of the photo showed through where the cuts blend (Dylan Joseph, 12 Nov: white
   outlines on the hover and on the mobile cards' bottom corners). The base under the photo is the tint's colour. */
.team-grid li { position: relative; aspect-ratio: 226 / 272; overflow: hidden; clip-path: inset(0 round 10px);
  background: #0f2c2b; }
.team-grid img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.team-grid .who { position: absolute; inset: auto 0 0 0; padding: 40px 12px 14px; text-align: center;
  background: linear-gradient(to top, rgba(10, 31, 31, .85), rgba(10, 31, 31, 0));
  opacity: 0; transition: opacity .35s ease; }
.team-grid li:hover .who, .team-grid li:focus-within .who { opacity: 1; }
/* Only the words rise; the tint fades in place, so the photo's edge is never uncovered on the way. */
.who b, .who span { transform: translateY(6px); transition: transform .35s ease; }
.team-grid li:hover .who b, .team-grid li:hover .who span,
.team-grid li:focus-within .who b, .team-grid li:focus-within .who span { transform: none; }
.who b { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: #fff; }
.who span { display: block; font-size: 12px; line-height: 17px; color: rgba(255, 255, 255, .8); }
@media (min-width: 761px) and (hover: hover) {   /* Figma Hover variant 53:889 / overlay 53:892 */
  .team-grid .who { inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 16px 55px;
    background: rgba(15, 44, 43, .9); }
  .who b { font-size: 14px; line-height: 16px; font-weight: 400; }
  .who span { margin-top: 5px; font-size: 12px; line-height: 15px; }
}
/* No hover (touch screens), phones, and keyboard focus on the list: the design's Mobile tile, names always
   shown over a dark fade (Figma 162:2872, overlay 162:2875). */
.team-grid:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.team-grid:focus-visible .who b, .team-grid:focus-visible .who span { transform: none; }
.team-grid:focus-visible .who { inset: 0; display: flex; flex-direction: column; justify-content: flex-end; opacity: 1;
  transform: none; padding: 15px 8px; background: linear-gradient(to bottom, rgba(15, 44, 43, .13) 0%, rgba(15, 44, 43, .45) 22.5%, rgba(15, 44, 43, .9) 77.5%); }
@media (hover: none), (max-width: 760px) {
  .team-grid .who { inset: 0; display: flex; flex-direction: column; justify-content: flex-end; opacity: 1;
    transform: none; padding: 15px 8px; background: linear-gradient(to bottom, rgba(15, 44, 43, .13) 0%, rgba(15, 44, 43, .45) 22.5%, rgba(15, 44, 43, .9) 77.5%); }
  .who b, .who span { transform: none; }
}
.team-grid[data-state="condensed"] .more { display: none; }
.view-all { display: flex; align-items: center; justify-content: center; gap: 8px; width: 468px; height: 37px;
  margin: 32px auto 0; background: none; border: 1px solid #fff; border-radius: 8px; color: #fff;
  font: 500 12px/13.2px var(--sans); cursor: pointer; }
.view-all:hover { background: rgba(255, 255, 255, .06); }
.chev { width: 12px; height: 7px; background: currentColor; transition: transform .25s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; }
.view-all[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Contact */
.contact { padding: 100px 0 66px; }
.contact-inner { display: grid; grid-template-columns: 476px minmax(0, 845px); justify-content: space-between; gap: 64px; align-items: start; }
.contact-text { padding-top: 84px; }
.h2-contact { line-height: 72.2px; letter-spacing: -2.41px; }
.contact-text .lede { margin-top: 28px; color: rgba(255, 255, 255, .66); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 36px; background: var(--bg-2);
  border: 1px solid rgba(23, 201, 158, .25); border-radius: 22px; }
.field { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label { font: 400 11px/16.5px var(--mono); text-transform: uppercase; color: var(--mint); }
.field label em { font-style: normal; color: var(--coral); }
.field input, .field textarea { width: 100%; height: 52px; padding: 0 19px; background: var(--bg);
  border: 1px solid rgba(154, 245, 222, .38); border-radius: 12px; color: var(--ink); font: 400 16px/1.1 var(--sans);
  outline: none; transition: border-color .2s, box-shadow .2s; }
.field textarea { height: 124px; padding: 16px 19px; resize: vertical; line-height: 1.5; }
.field input::placeholder { color: rgba(219, 255, 246, .45); }
.field input:focus, .field textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(23, 201, 158, .18); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--coral); }
/* After sending: the form gives way to the thank-you (its words are DRC's to give, so a gap for now). */
.form[hidden], .form-done[hidden], .form-error[hidden] { display: none; }
.form-done { padding: 36px; background: var(--bg-2); border: 1px solid rgba(23, 201, 158, .25); border-radius: 22px; }
/* The page moves focus here so screen readers read the message; the box itself needs no focus ring. */
.form-done:focus { outline: none; }
.done-title { font-size: 28px; line-height: 34px; font-weight: 400; letter-spacing: -.6px; color: var(--ink); text-wrap: balance; }
.done-text { margin-top: 12px; font-size: 18px; line-height: 27.9px; color: var(--ink-66); }
.form-error { margin: 0; padding: 14px 16px; border: 1px solid rgba(255, 107, 107, .45); border-radius: 12px; background: rgba(255, 107, 107, .08); }
.error-title { font-weight: 500; font-size: 16px; line-height: 22px; color: var(--coral); }
.error-text { margin-top: 4px; font-size: 15px; line-height: 22px; color: var(--ink-66); }
.error-text a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.btn-submit:disabled { opacity: .6; cursor: progress; }
/* While sending: a spinner in place of the arrow (no new words on the page); screen readers hear #f-status. */
.spinner { display: none; width: 14px; height: 14px; flex: none; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .8s linear infinite; }
.btn-submit.is-sending { opacity: .85; }
.btn-submit.is-sending .arrow { display: none; }
.btn-submit.is-sending .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0; }
/* The phone number with its country picker (intl-tel-input 24.6.0, themed to the page). */
.iti { display: block; width: 100%;
  --iti-border-color: rgba(154, 245, 222, .25); --iti-dialcode-color: var(--ink); --iti-dropdown-bg: var(--bg-2);
  --iti-arrow-color: var(--mint); --iti-hover-color: rgba(23, 201, 158, .14); --iti-spacer-horizontal: 14px; }
.iti__flag { background-image: url("assets/iti/flags.webp"); }
.iti__globe { background-image: url("assets/iti/globe.webp"); }
@media (min-resolution: 2x) {
  .iti__flag { background-image: url("assets/iti/flags@2x.webp"); }
  .iti__globe { background-image: url("assets/iti/globe@2x.webp"); }
}
.iti__country-container { padding: 1px; }
.iti__selected-country { border-radius: 11px 0 0 11px; background: transparent; }
.iti__selected-country-primary { padding: 0 6px 0 16px; }
.iti__selected-country:hover .iti__selected-country-primary, .iti__selected-country:focus .iti__selected-country-primary {
  background: rgba(23, 201, 158, .08); }
.iti__selected-dial-code { font: 400 16px/1 var(--sans); color: var(--ink); margin-left: 8px; }
.iti__arrow { margin-left: 8px; border-top-color: var(--mint); }
.iti__arrow--up { border-bottom-color: var(--mint); }
.iti__dropdown-content { border: 1px solid rgba(23, 201, 158, .3); border-radius: 12px; overflow: hidden; margin-top: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45); color: var(--ink); }
.iti__search-input { height: 44px; padding: 0 16px; background: var(--bg); color: var(--ink); border: 0;
  border-bottom: 1px solid rgba(154, 245, 222, .25); font: 400 15px/1 var(--sans); outline: none; }
.iti__search-input::placeholder { color: rgba(219, 255, 246, .5); }
.iti__country-list { max-height: 260px; }
.iti__country { padding: 10px 14px; font: 400 15px/1.2 var(--sans); }
.iti__country.iti__highlight { background: rgba(23, 201, 158, .14); }
.iti__dial-code { color: var(--ink-62); }
.iti--fullscreen-popup.iti--container { background: rgba(5, 18, 18, .7); }
.iti--fullscreen-popup .iti__dropdown-content { margin: 0; }
.btn-submit { grid-column: 1 / -1; height: 54px; border-radius: 14px; margin-top: 0; }

/* Footer */
.footer { padding: 52px 0 36px; }
.footer-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 30px;
  border-bottom: 1px solid rgba(23, 201, 158, .28); }
.to-top { display: flex; align-items: center; gap: 10px; font: 400 12px/18px var(--mono); text-transform: uppercase;
  color: var(--mint); text-decoration: none; }
.arrow-up { width: 9px; height: 12px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 12'%3E%3Cpath d='M4.5 12V1.4M1 4.9l3.5-3.5L8 4.9' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 12'%3E%3Cpath d='M4.5 12V1.4M1 4.9l3.5-3.5L8 4.9' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 20px; font-size: 12px; line-height: 18px; color: var(--green); }
.legal { display: flex; gap: 24px; }
.legal a { text-decoration: none; }
.legal a:hover, .to-top:hover { text-decoration: underline; }

/* Between desktop and phone: let the columns breathe. */
@media (max-width: 1280px) {
  :root { --gutter: 32px; }
  .nav { gap: 22px; }
  .split, .split-reverse, .contact-inner, .intel-body { grid-template-columns: 1fr 1fr; gap: 48px; }
  .compliance-inner { grid-template-columns: 1fr 1.3fr; }
  .documentation .split-text { padding-left: 0; }
  h1 { font-size: 60px; line-height: 64px; letter-spacing: -2.5px; }
  h2 { font-size: 54px; line-height: 64px; letter-spacing: -2.1px; }
}
/* Below 1201 the four links and the button no longer fit on one line: they fold into the menu (Figma 'Component 1' 162:2322). */
@media (max-width: 1200px) {
  .nav { display: none; }
  .btn-header { margin-left: auto; }
  .bar { flex-wrap: wrap; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px;
    padding: 0 10px; background: none; border: 0; cursor: pointer; }
  .menu-toggle span { display: block; height: 2px; background: #fff; border-radius: 1px; transition: transform .25s, opacity .25s; }
  .site-header[data-menu="open"] .bar { height: auto; border-radius: 24px; padding-top: 16px; padding-bottom: 16px; row-gap: 0; background: #0a1f1f; }
  /* Figma 162:2320: the top row is 78 high and the links start 4 below it, 21 under the close button. */
  .site-header[data-menu="open"] .nav { display: flex; flex-direction: column; gap: 0; width: calc(100% - 16px); order: 5; margin: 21px 8px 15px; }
  .site-header[data-menu="open"] .nav a { font-size: 15px; line-height: 24px; padding: 18px 0 17px; border-bottom: 1px solid rgba(255, 255, 255, .47); }
  .site-header[data-menu="open"] .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header[data-menu="open"] .menu-toggle span:nth-child(2) { opacity: 0; }
  .site-header[data-menu="open"] .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .team-head { display: block; }
  .team-head .lede { margin-top: 24px; max-width: 600px; }
}
@media (max-width: 1060px) {
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-inner { grid-template-columns: 1fr; gap: 40px; }
  .contact-text { padding-top: 0; }
}
@media (min-width: 761px) and (max-width: 1060px) {
  /* Graphik is wider than the fonts first used: at 761 to 872 the forced breaks left single words on a line. */
  h1 { font-size: clamp(54px, 7.4vw, 60px); line-height: 1.06; }
  h2:not(.h2-compliance) { font-size: clamp(36px, 4.6vw, 44px); line-height: 1.18; letter-spacing: -1.6px; }
  .h2-compliance { font-size: clamp(32px, 4vw, 40px); line-height: 1.25; }
}

/* Phone: the mobile frame, 456 wide with 28px sides. */
@media (max-width: 760px) {
  :root { --gutter: 28px; }
  br.d { display: none; }
  html { scroll-padding-top: 90px; }

  .site-header { top: 12px; padding: 0 max(16px, calc((100% - 390px) / 2)); }
  .bar { height: 60px; padding: 0 16px; border-radius: 30px; gap: 12px; flex-wrap: wrap; background: rgba(10, 31, 31, .65); }
  .logo-full { display: none; }
  .logo-mark { display: block; width: 45px; height: 20px; }
  .btn-header { height: 42px; padding: 0 18px; border-radius: 14px; margin-left: auto; }

  .hero { min-height: 710px; }
  .hero::after { background: linear-gradient(45deg, rgba(5, 28, 27, .92) 0%, rgba(5, 28, 27, .7) 45%, rgba(5, 28, 27, .18) 100%); }
  .hero-inner { padding-top: 240px; padding-bottom: 132px; }
  .eyebrow-light { font-size: 10px; line-height: 15.6px; letter-spacing: 0; gap: 10px;
    text-shadow: 0 0 6px rgba(5, 28, 27, .9), 0 0 2px rgba(5, 28, 27, .9); }
  h1 { font-size: 36px; line-height: 40px; letter-spacing: -1.08px; margin-top: 20px; }
  h1 .accent { display: inline; }
  .hero h1 { max-width: 330px; }
  .hero-lede { max-width: 332px; margin-top: 20px; font-size: 15px; line-height: 23px; }
  .btn-hero { margin-top: 20px; width: 160px; padding: 0; }

  h2, .h2-compliance, .h2-contact { font-size: 30px; line-height: 34px; letter-spacing: -.9px; margin-top: 20px; }
  .lede, .services .lede, .documentation .lede, .intel-head .lede, .team-head .lede, .contact-text .lede {
    font-size: 14px; line-height: 20px; margin-top: 16px; }

  .split, .split-reverse, .contact-inner, .intel-body { display: flex; flex-direction: column; gap: 0; }
  .services, .documentation, .intelligence { padding: 48px 0; }
  .services .split-media { margin-top: 30px; aspect-ratio: 400 / 240; }
  .media-services img { object-position: 50% 50%; }
  .rows { margin-top: 38px; }
  /* Rows open on phones too (Rogerio, 12 Nov: "the services doesnt expand on mobile like it does on desktop"),
     though the mobile frame draws them closed and without the +. The services list does not open. */
  .row summary, .rows-list .row { min-height: 75px; }
  .num { width: 34px; }
  .row-title { font-size: 16px; }
  .plus { margin-right: 4px; }
  .row > p { padding: 0 0 24px 34px; max-width: none; font-size: 14px; line-height: 21px; }

  .compliance { display: none; }   /* not in the mobile design */

  .clients { padding: 30px 0 32px; }
  .clients-inner { display: block; text-align: center; }
  .clients-text { max-width: 370px; margin: 0 auto; }
  .marquee { margin-top: 34px; }

  .split-reverse .split-media { order: 2; margin-top: 30px; aspect-ratio: 402 / 240; }
  .documentation .split-text { align-self: stretch; }
  .features { margin-top: 30px; }
  .features li { gap: 18px; padding: 24px 0 28px; }
  .features span { font-size: 15px; line-height: 24.8px; }

  .pattern { display: none; }
  .intel-body { margin-top: 36px; align-items: stretch; }
  .globe { aspect-ratio: 402 / 225; }
  .play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .play::after { left: 25px; top: 20px; border-width: 12px 0 12px 20px; }
  .rows-intel { margin-top: 20px; }

  .team { padding: 60px 0; }
  .team .container { position: relative; }
  .team .container::after { content: ""; position: absolute; right: 0; bottom: 0; width: 89px; height: 148px; pointer-events: none;
    background: linear-gradient(to right, rgba(18, 64, 58, 0) 22%, #12403a); }   /* Figma 216:3979 */
  .team-head { display: block; }
  .team-grid { display: flex; gap: 8px; margin: 30px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .team-grid::-webkit-scrollbar { display: none; }
  .team-grid li, .team-grid[data-state="condensed"] .more { display: block; flex: 0 0 129px; aspect-ratio: 129 / 148;
    clip-path: inset(0 round 16px); scroll-snap-align: start; }
  .who b { font-size: 11px; line-height: 15px; font-weight: 400; }
  .who span { font-size: 10px; line-height: 14px; }
  .view-all { display: none; }

  .contact { padding: 46px 0 40px; }
  .contact-inner { align-items: stretch; }
  .contact-text { padding-top: 0; }
  .form { display: flex; flex-direction: column; gap: 20px; margin-top: 30px; padding: 36px 25px; }
  .form-done { margin-top: 30px; padding: 32px 25px; }
  .done-title { font-size: 22px; line-height: 28px; }
  .done-text { font-size: 16px; line-height: 24px; }

  .footer { padding: 40px 0 36px; text-align: center; }
  .footer-top { justify-content: center; padding-bottom: 20px; }
  .footer-top img { width: 207px; }
  .to-top { display: none; }
  .footer-bottom { flex-direction: column-reverse; align-items: center; gap: 10px; }
  .legal { justify-content: center; }
}

/* The contact heading's mobile break (after "building data") needs just over 342px of column in Graphik, which a
   398px screen gives (Chromium; WebKit needs 399); narrower, it left "data" alone on a line, so it wraps evenly. */
@media (max-width: 400px) {
  .h2-contact br { display: none; }
  .h2-contact { text-wrap: balance; }
}
/* 375px phones (iPhone SE, 12/13 mini): the team heading's break left "outcome." alone. */
@media (max-width: 380px) {
  .team-head h2 br { display: none; }
  .team-head h2 { text-wrap: balance; }
}
/* 320 to 345px: the hero heading left "From" alone, and at 320 the menu button fell out of the header pill. */
@media (max-width: 345px) {
  h1 { font-size: 33px; line-height: 37px; }
}
@media (max-width: 340px) {
  .bar { gap: 8px; }
}
@media (max-width: 374px) {
  .h2-contact br, .team-head h2 br { display: none; }
  h2 { text-wrap: balance; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .spinner { animation-duration: 2.4s; }
}

/* CookieYes's banner on this page only (its settings are shared with drc.co, so the page restyles it rather than
   CookieYes): on desktop a box at the bottom right, clear of the hero's Contact us button; on phones a compact bar with
   the three buttons in one row (Rogerio, 12 Nov). The words are DRC's CookieYes text, unchanged. */
@media (min-width: 761px) {
  .cky-consent-container.cky-box-bottom-left { left: auto !important; right: 40px !important; bottom: 40px !important; width: 400px !important; }
}
@media (max-width: 760px) {
  .cky-consent-container.cky-box-bottom-left { left: 8px !important; right: 8px !important; bottom: 8px !important; width: auto !important;
    border-radius: 14px !important; overflow: hidden !important; }
  .cky-consent-container .cky-consent-bar { border-radius: 14px !important; }
  .cky-consent-container .cky-notice-content-wrapper { padding: 0 0 10px !important; }
  .cky-consent-container .cky-notice .cky-title { font-size: 15px !important; line-height: 20px !important; margin: 0 0 6px !important; padding: 14px 14px 0 !important; }
  .cky-consent-container .cky-notice-des { font-size: 12.5px !important; line-height: 18px !important; padding: 0 14px !important; max-height: 30vh !important; }
  .cky-consent-container .cky-notice-btn-wrapper { flex-direction: row !important; flex-wrap: nowrap !important; gap: 6px !important;
    margin: 10px 0 0 !important; padding: 0 14px !important; }
  .cky-consent-container .cky-notice-btn-wrapper .cky-btn { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; margin: 0 !important;
    padding: 6px 4px !important; font-size: 12.5px !important; line-height: 20px !important; }
  .cky-consent-container .cky-consent-bar > div:last-child { padding: 2px 0 8px !important; }
  .cky-consent-container .cky-consent-bar > div:last-child div { margin-top: 0 !important; }
}