@charset "UTF-8";
/* ============================================================
   TOKENS
   ============================================================ */
:root{
  /* Brand palette — the three official values, plus tints mixed from them only */
  --navy:#081827;          /* Midnight Navy */
  --gold:#d6b56e;          /* Champagne Gold */
  --smoke:#f1f1f1;         /* White Smoke */

  --navy-2:#0d2337;        /* navy + 6% smoke */
  --navy-3:#122c44;
  --blue-card:#16334f;     /* navy + 14% smoke — testimonial cards */
  --char:#111c26;          /* navy darkened — process band */
  --gold-soft:#e3ca90;     /* gold + smoke */
  --tan:var(--gold);
  --tan-2:#e0c795;
  --cream:var(--smoke);
  --cream-2:#e6e6e6;
  --ink:#081827;           /* dark type on light/gold = navy */
  --white:#f1f1f1;

  --serif:"Lora",Georgia,serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;

  --pad:clamp(20px,3vw,48px);
  --maxw:1600px;
  --r:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--navy);
  color:var(--white);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;line-height:1.05}
p{margin:0}

.eyebrow{
  font-size:11px;letter-spacing:.14em;text-transform:none;
  font-weight:500;opacity:.75;margin-bottom:14px;
}
.muted{opacity:.62;font-size:18px;line-height:1.75;font-weight:300}

/* Image placeholders — swap the .ph divs for <img> when assets land */
.ph{
  position:relative;overflow:hidden;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 12px,transparent 12px 24px),
    linear-gradient(150deg,#16334f,#0d2337 60%,#081827);
}
.ph[data-label]::after{
  content:attr(data-label);
  position:absolute;left:12px;bottom:10px;
  font:500 9px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.32);
}
.ph.light{background:
    repeating-linear-gradient(135deg,rgba(0,0,0,.04) 0 12px,transparent 12px 24px),
    linear-gradient(150deg,#e6e6e6,#cfcfcf);}
.ph.light[data-label]::after{color:rgba(8,24,39,.35)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 22px;border-radius:6px;
  font-size:12px;letter-spacing:.06em;font-weight:500;
  border:1px solid rgba(255,255,255,.45);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.btn:hover{background:var(--white);color:var(--navy);border-color:var(--white);transform:translateY(-2px)}
.btn--solid{background:var(--white);color:var(--navy);border-color:var(--white)}
.btn--solid:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn--gold{background:var(--tan);border-color:var(--tan);color:var(--ink)}
.btn--gold:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--ink)}
.btn--dark{border-color:rgba(8,24,39,.4);color:var(--ink)}
.btn--dark:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn--pill{border-radius:999px}

/* ============================================================
   REVEAL / MOTION
   ============================================================ */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.1s}
.rv[data-d="2"]{transition-delay:.2s}
.rv[data-d="3"]{transition-delay:.3s}
.rv[data-d="4"]{transition-delay:.4s}

.rv-line{overflow:hidden;display:block}
.rv-line > span{
  display:block;transform:translateY(105%);
  transition:transform 1.05s var(--ease);
}
.in .rv-line > span,.rv-line.in > span{transform:none}
.rv-line[data-d="1"] > span{transition-delay:.12s}
.rv-line[data-d="2"] > span{transition-delay:.24s}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background .4s var(--ease),backdrop-filter .4s var(--ease),padding .4s var(--ease),border-color .4s var(--ease);
  padding-block:22px;
  border-bottom:1px solid transparent;
}
.hdr.stuck{
  background:rgba(8,24,39,.86);
  backdrop-filter:blur(14px);
  padding-block:12px;
  border-bottom-color:rgba(255,255,255,.08);
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-family:var(--serif);font-size:20px;letter-spacing:.01em}
.nav{display:flex;gap:34px}
.nav a{font-size:12.5px;font-weight:400;opacity:.8;position:relative;padding-block:4px;transition:opacity .3s}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav a:hover,.nav a[aria-current="true"]{opacity:1}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1);transform-origin:left}
.burger{display:none;width:34px;height:34px;position:relative}
.burger span{position:absolute;left:6px;right:6px;height:1.5px;background:var(--smoke);transition:transform .35s var(--ease),opacity .25s}
.burger span:nth-child(1){top:12px}
.burger span:nth-child(2){top:20px}
.nav-open .burger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.nav-open .burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  padding-top:135px;
  padding-bottom:28px;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  top:-20%;
  right:-5%;
  width:60vw;
  height:60vw;
  background:radial-gradient(circle,rgba(214,181,110,.10),transparent 62%);
  pointer-events:none;
}

.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);
  gap:clamp(40px,6vw,100px);
  align-items:center;
  min-height:min(72vh,640px);

  /* Moves BOTH text and image just a little upward */
  transform:translateY(-12px);
}

.hero__content{
  position:relative;
  z-index:2;
}

.hero h1{
  font-size:clamp(2.9rem,7.2vw,6.4rem);
  line-height:1.02;
  letter-spacing:-.008em;
}

.hero__copy{
  max-width:430px;
  margin-top:26px;
}

.hero .btn,
.hero__btn{
  margin-top:26px;
}

/* Right-side portrait */
.hero__figure{
  position:relative;
  width:100%;
  max-width:560px;
  justify-self:center;
  align-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}

/* hero1.png already contains the yellow circle */
.hero__portrait{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  max-width:560px;
  height:auto;

  /* Keep the PNG's natural proportions */
  aspect-ratio:auto;
  object-fit:contain;
  object-position:center;

  /* Remove the old squeeze/fade behaviour */
  -webkit-mask-image:none;
  mask-image:none;
}

/* ============================================================
   MARQUEE
   ============================================================ */

.marquee{
  overflow:hidden;
  position:relative;
  display:flex;
}

.marquee__track{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  animation:slide 34s linear infinite;
}

.marquee:hover .marquee__track{
  animation-play-state:paused;
}

@keyframes slide{
  to{
    transform:translateX(-100%);
  }
}


/* ============================================================
   BRAND LOGO MARQUEE
   ============================================================ */

.logos{
  width:100%;
  overflow:hidden;

  border-top:1px solid rgba(255,255,255,.09);
  border-bottom:1px solid rgba(255,255,255,.09);

  padding:26px 0;
}


/* visible marquee area */
.logo-marquee{
  position:relative;
  width:100%;
  overflow:hidden;
}


/* the complete moving line */
.logo-track{
  display:flex;

  width:max-content;

  animation:logoScroll 16s linear infinite;

  will-change:transform;
}


/* EACH IDENTICAL GROUP */
.logo-group{
  display:flex;
  align-items:center;

  flex-shrink:0;

  /* THIS CONTROLS SPACE BETWEEN LOGOS */
  gap:clamp(100px,10vw,180px);

  /* important:
     gives space between end of group 1
     and start of group 2
  */
  padding-right:clamp(100px,10vw,180px);
}


/* EACH LOGO HOLDER */
.logo-item{
  width:clamp(140px,10vw,180px);
  height:52px;

  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:center;

  opacity:.75;

  transition:
    opacity .3s ease,
    transform .3s ease;
}


/* HOVER */
.logo-item:hover{
  opacity:1;
  transform:scale(1.06);
}


/* ACTUAL IMAGE */
.logo-item img{
  display:block;

  max-width:150px;
  max-height:44px;

  width:auto;
  height:auto;

  object-fit:contain;
}


/* ============================================================
   PERFECT INFINITE LOOP
   ============================================================ */

@keyframes logoScroll{

  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }

}


/* PAUSE WHEN USER HOVERS */
.logo-marquee:hover .logo-track{
  animation-play-state:paused;
}


/* ============================================================
   OPTIONAL EDGE FADE
   ============================================================ */

.logo-marquee::before,
.logo-marquee::after{
  content:"";

  position:absolute;
  top:0;
  bottom:0;

  width:60px;

  z-index:5;

  pointer-events:none;
}


.logo-marquee::before{
  left:0;

  background:linear-gradient(
    to right,
    var(--navy) 0%,
    transparent 100%
  );
}


.logo-marquee::after{
  right:0;

  background:linear-gradient(
    to left,
    var(--navy) 0%,
    transparent 100%
  );
}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:760px){

  .logos{
    padding:20px 0;
  }

  .logo-track{
    animation-duration:12s;
  }

  .logo-group{
    gap:70px;
    padding-right:70px;
  }

  .logo-item{
    width:110px;
    height:42px;
  }

  .logo-item img{
    max-width:105px;
    max-height:34px;
  }

  .logo-marquee::before,
  .logo-marquee::after{
    width:25px;
  }

}

/* ============================================================
   STATS — FIGMA MATCH
   ============================================================ */

.stats{
  position:relative;

  width:100%;

  background:var(--navy);

  color:var(--smoke);

  text-align:center;

  padding:58px 0 42px;

  overflow:hidden;
}


/* ============================================================
   HEADING
   ============================================================ */

.stats h2{
  margin:0 auto;

  font-family:var(--serif);

  font-size:clamp(1.55rem,2.15vw,2.15rem);

  font-weight:400;

  line-height:1.22;

  letter-spacing:-.01em;

  color:var(--smoke);

  text-align:center;
}


/* ============================================================
   STAT GRID
   ============================================================ */

.stats__row{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  align-items:start;

  gap:40px;

  width:100%;

  margin-top:52px;
}


/* ============================================================
   NUMBER
   ============================================================ */

.stat__n{
  font-family:var(--serif);

  font-size:clamp(2.8rem,4vw,4rem);

  font-weight:400;

  line-height:1;

  letter-spacing:-.02em;

  color:var(--gold);
}


/* ============================================================
   LABEL
   ============================================================ */

.stat__l{
  margin-top:12px;

  font-family:var(--sans);

  font-size:7px;

  font-weight:400;

  line-height:1;

  letter-spacing:.02em;

  text-transform:uppercase;

  color:rgba(241,241,241,.62);

  opacity:1;
}


/* ============================================================
   BOTTOM TICKER
   ============================================================ */

.ticker{
  position:relative;

  width:100%;

  margin-top:56px;

  overflow:hidden;

  font-family:var(--sans);

  font-size:6px;

  font-weight:500;

  line-height:1;

  letter-spacing:.01em;

  text-transform:uppercase;

  color:rgba(241,241,241,.72);

  opacity:1;
}


/* moving row */
.ticker .marquee__track{
  display:flex;

  align-items:center;

  width:max-content;

  animation:statsTicker 28s linear infinite;
}


/* each repeated text */
.ticker .marquee__item{
  flex-shrink:0;

  padding:0 8px;

  white-space:nowrap;
}


/* ticker animation */
@keyframes statsTicker{

  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }

}


/* ============================================================
   LARGE DESKTOP
   ============================================================ */

@media(min-width:1600px){

  .stats{
    padding-top:64px;
    padding-bottom:45px;
  }


  .stats h2{
    font-size:2.25rem;
  }


  .stats__row{
    margin-top:56px;
  }


  .stat__n{
    font-size:4.2rem;
  }


  .stat__l{
    margin-top:13px;

    font-size:7.5px;
  }


  .ticker{
    margin-top:60px;

    font-size:6.5px;
  }

}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:900px){

  .stats{
    padding:55px 0 40px;
  }


  .stats h2{
    font-size:1.8rem;
  }


  .stats__row{
    gap:20px;

    margin-top:45px;
  }


  .stat__n{
    font-size:3rem;
  }


  .stat__l{
    font-size:7px;
  }


  .ticker{
    margin-top:48px;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:650px){

  .stats{
    padding:48px 0 36px;
  }


  .stats h2{
    font-size:1.55rem;

    line-height:1.25;
  }


  .stats__row{
    grid-template-columns:1fr;

    gap:34px;

    margin-top:42px;
  }


  .stat__n{
    font-size:3.1rem;
  }


  .stat__l{
    margin-top:9px;

    font-size:7px;
  }


  .ticker{
    margin-top:40px;

    font-size:6px;
  }

}
/* ============================================================
   ABOUT
   ============================================================ */
.about{background:var(--tan);color:var(--ink);padding-block:clamp(52px,7vw,84px)}
.about__grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(30px,5vw,70px);

  align-items:center;
}

.about__text{
  display:flex;
  flex-direction:column;
  justify-content:center;

  min-height:100%;
}
.about h2{font-size:clamp(1.35rem,2.7vw,2rem);line-height:1.22;max-width:12ch}
.about .muted{margin-top:22px;max-width:34ch;opacity:.78;color:var(--ink)}
.about .eyebrow{opacity:.65}
.know{
  margin-top:34px;
  padding-top:0;

  font-size:12px;
  letter-spacing:.05em;

  display:inline-flex;
  align-items:center;
  gap:8px;

  align-self:flex-start;
}
.know i{display:block;width:16px;height:1px;background:currentColor;transition:width .35s var(--ease)}
.know:hover i{width:30px}

.vids{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(16px,2.4vw,30px);
  align-items:start;
}

.vid{
  position:relative;

  border-radius:var(--r);

  overflow:hidden;

  aspect-ratio:9/16;

  background:var(--navy-2);

  box-shadow:0 18px 40px rgba(0,0,0,.16);

  transition:
    transform .6s var(--ease),
    box-shadow .6s var(--ease);
}

.vid:nth-child(2){
  margin-top:clamp(24px,4vw,54px);
}

.vid:hover{
  transform:translateY(-8px);
  box-shadow:0 26px 60px rgba(0,0,0,.26);
}

.vid::before{
  display:none;
}

.vid iframe{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  border:0;

  border-radius:inherit;

  background:var(--navy-2);
}

/* ============================================================
   COLLABORATORS — FIGMA VERSION
   ============================================================ */

.collab.collab--figma{
  position:relative;

  width:100%;

  background:#081827;

  color:#f1f1f1;

  padding:68px 0 74px;

  overflow:hidden;
}


/* ============================================================
   TOP AREA
   ============================================================ */

.collab--figma .collab__top{
  display:flex;

  align-items:flex-end;
  justify-content:space-between;

  gap:40px;

  margin-bottom:48px;
}


/* LEFT */

.collab--figma .collab__intro{
  max-width:350px;
}


.collab--figma .collab__intro h2{
  margin:0;

  font-family:var(--serif);

  font-size:clamp(2.4rem,3.3vw,3.6rem);

  font-weight:400;

  line-height:.98;

  letter-spacing:-.02em;

  color:#f1f1f1;
}


.collab--figma .collab__intro p{
  max-width:300px;

  margin:22px 0 0;

  font-family:var(--sans);

  font-size:11px;

  font-weight:300;

  line-height:1.5;

  color:rgba(241,241,241,.72);
}


/* ============================================================
   SEE MORE
   ============================================================ */

.collab__more{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  min-width:105px;
  height:38px;

  padding:0 20px;

  border:1px solid #d6b56e;

  border-radius:999px;

  font-family:var(--sans);

  font-size:10px;

  font-weight:500;

  color:#f1f1f1;

  text-decoration:none;

  transition:
    background .3s ease,
    color .3s ease,
    transform .3s ease;
}


.collab__more:hover{
  background:#d6b56e;

  color:#081827;

  transform:translateY(-2px);
}


/* ============================================================
   PORTFOLIO GRID
   ============================================================ */

.collab__portfolio{
  display:grid;

  grid-template-columns:
    1.35fr
    1fr;

  grid-template-rows:
    245px
    205px;

  gap:12px;

  width:100%;
}


/* ============================================================
   BASE CARD
   ============================================================ */

.project-card{
  position:relative;

  min-width:0;

  overflow:hidden;

  border-radius:11px;

  isolation:isolate;

  transition:
    transform .5s var(--ease),
    box-shadow .5s var(--ease);
}


.project-card:hover{
  transform:translateY(-5px);

  box-shadow:
    0 18px 38px
    rgba(0,0,0,.20);
}


/* ============================================================
   CARD INNER
   ============================================================ */

.project-card__inner{
  position:relative;

  z-index:4;

  width:100%;
  height:100%;

  display:flex;

  flex-direction:column;

  justify-content:space-between;

  padding:22px 24px;
}


/* ============================================================
   LOGOS
   ============================================================ */

.project-logo{
  display:flex;
  align-items:center;
  height:90px;
}

.project-logo img{
  display:block;
  width:auto;
  height:auto;

  max-width:240px;
  max-height:80px;

  object-fit:contain;
  object-position:left center;
}


/* Dubai Finance */
.project-logo--dubai-finance img{
  max-width:200px;
  max-height:85px;
}


/* Binance */
.project-logo--binance img{
  max-width:230px;
  max-height:75px;
}


/* Amana */
.project-logo--amana img{
  max-width:210px;
  max-height:80px;
}


/* DFM */
.project-logo--dfm img{
  max-width:200px;
  max-height:78px;
}


/* ============================================================
   CARD BOTTOM CONTENT
   ============================================================ */

.project-card__bottom{
  position:relative;

  z-index:5;
}


.project-card__bottom h3{
  margin:0;

  font-family:var(--serif);

  font-size:26px;

  font-weight:400;

  line-height:1;

  color:#f1f1f1;
}


.project-card__bottom p{
  max-width:390px;

  margin:11px 0 0;

  font-family:var(--sans);

  font-size:10px;

  font-weight:300;

  line-height:1.5;

  color:rgba(241,241,241,.80);
}


/* ============================================================
   DUBAI FINANCE
   ============================================================ */

.project-card--dubai{
  grid-column:1;
  grid-row:1;

  background:#122c44;

  border:2px solid #00a9ff;
}


/* BACKGROUND IMAGE */

.project-card--dubai .project-card__bg{
  position:absolute;

  inset:0;

  z-index:0;

  width:100%;
  height:100%;

  object-fit:cover;

  object-position:center;
}


/* DARK IMAGE OVERLAY */

.project-card--dubai .project-card__shade{
  position:absolute;

  inset:0;

  z-index:1;

  background:
    linear-gradient(
      180deg,
      rgba(8,24,39,.20) 0%,
      rgba(8,24,39,.36) 38%,
      rgba(8,24,39,.90) 100%
    );
}


/* ============================================================
   BINANCE
   ============================================================ */

.project-card--binance{
  grid-column:2;
  grid-row:1;

  background:#1d1d1d;
}


/* ============================================================
   AMANA
   ============================================================ */

.project-card--amana{
  grid-column:1;
  grid-row:2;

  width:68%;

  justify-self:start;

  background:#1d1d1d;
}


/* ============================================================
   DFM
   ============================================================ */

.project-card--dfm{
  grid-column:1 / 3;
  grid-row:2;

  width:58%;

  justify-self:end;

  background:#d6b56e;

  color:#081827;
}


/* DFM TEXT DARK */

.project-card--dfm .project-card__bottom h3{
  color:#081827;
}


.project-card--dfm .project-card__bottom p{
  max-width:300px;

  color:rgba(8,24,39,.78);
}


/* keep content clear of person */

.project-card--dfm .project-card__inner{
  padding-right:43%;
}


/* ============================================================
   DFM PERSON
   ============================================================ */

.project-card__person{
  position:absolute;

  right:5%;

  bottom:0;

  z-index:3;

  width:34%;

  max-height:96%;

  object-fit:contain;

  object-position:right bottom;

  pointer-events:none;
}


/* ============================================================
   LARGE DESKTOP
   ============================================================ */

@media(min-width:1600px){

  .collab.collab--figma{
    padding:76px 0 82px;
  }


  .collab--figma .collab__top{
    margin-bottom:55px;
  }


  .collab--figma .collab__intro h2{
    font-size:3.8rem;
  }


  .collab--figma .collab__intro p{
    font-size:12px;

    max-width:320px;
  }


  .collab__portfolio{
    grid-template-rows:
      270px
      225px;

    gap:14px;
  }


  .project-card__inner{
    padding:25px 27px;
  }


  .project-card__bottom h3{
    font-size:29px;
  }


  .project-card__bottom p{
    font-size:11px;
  }

}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:1000px){

  .collab.collab--figma{
    padding:58px 0 64px;
  }


  .collab--figma .collab__top{
    margin-bottom:40px;
  }


  .collab__portfolio{
    grid-template-columns:1fr 1fr;

    grid-template-rows:
      230px
      200px;
  }


  .project-card--amana{
    width:100%;
  }


  .project-card--dfm{
    width:100%;
  }


  .project-card__bottom h3{
    font-size:23px;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:700px){

  .collab.collab--figma{
    padding:48px 0 55px;
  }


  .collab--figma .collab__top{
    align-items:flex-start;

    flex-direction:column;

    gap:26px;

    margin-bottom:35px;
  }


  .collab--figma .collab__intro h2{
    font-size:2.8rem;
  }


  .collab--figma .collab__intro p{
    font-size:11px;
  }


  .collab__portfolio{
    display:grid;

    grid-template-columns:1fr;

    grid-template-rows:none;

    gap:14px;
  }


  .project-card--dubai,
  .project-card--binance,
  .project-card--amana,
  .project-card--dfm{
    grid-column:auto;

    grid-row:auto;

    width:100%;

    min-height:240px;
  }


  .project-card--dfm{
    min-height:220px;
  }


  .project-card--dfm .project-card__inner{
    padding-right:40%;
  }


  .project-card__person{
    width:42%;
  }

}

/* ============================================================
   CLICKABLE COLLABORATION CARDS
   ============================================================ */

.project-card{
  display:block;

  text-decoration:none;

  color:inherit;

  cursor:pointer;
}


/* keep text colours correct */
.project-card:visited{
  color:inherit;
}


/* stronger hover feedback */
.project-card:hover{
  transform:translateY(-6px);

  box-shadow:
    0 20px 45px
    rgba(0,0,0,.24);
}


/* image movement */
.project-card--dubai .project-card__bg{
  transition:
    transform .7s cubic-bezier(.22,.61,.36,1);
}


.project-card--dubai:hover .project-card__bg{
  transform:scale(1.035);
}


/* title movement */
.project-card__bottom h3{
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1);
}


.project-card:hover .project-card__bottom h3{
  transform:translateX(4px);
}


/* accessible keyboard focus */
.project-card:focus-visible{
  outline:2px solid #d6b56e;

  outline-offset:4px;
}


.collab__more{
  cursor:pointer;
}

/* ============================================================
   SERVICES — FIGMA STYLE
   BIGGER BODY TEXT
   ============================================================ */

.serv.serv--figma{
  position:relative;
  width:100%;

  background:#081827;
  color:#f1f1f1;

  padding:54px 0 50px;

  overflow:hidden;
}


/* ============================================================
   MAIN GRID
   ============================================================ */

.serv__figma-grid{
  display:grid;

  grid-template-columns:
    minmax(220px,.72fr)
    minmax(0,1.65fr);

  align-items:center;

  gap:clamp(55px,7vw,120px);
}


/* ============================================================
   LEFT CONTENT
   ============================================================ */

.serv__intro{
  align-self:center;

  max-width:390px;
}


/* SMALL LABEL */

.serv__eyebrow{
  margin-bottom:15px;

  font-family:var(--sans);

  font-size:10px;

  font-weight:400;

  line-height:1;

  color:rgba(241,241,241,.82);
}


/* MAIN TITLE */

.serv--figma .serv__intro h2{
  margin:0;

  max-width:none;

  font-family:var(--serif);

  font-size:clamp(2.7rem,3.7vw,4.1rem);

  font-weight:400;

  line-height:.94;

  letter-spacing:-.02em;

  color:#f1f1f1;
}


/* ============================================================
   LEFT BODY TEXT — BIGGER
   ============================================================ */

.serv--figma .serv__intro p{
  margin:24px 0 0;

  max-width:380px;

  font-family:var(--sans);

  font-size:17px;

  font-weight:300;

  line-height:1.55;

  color:rgba(241,241,241,.84);
}


.serv--figma .serv__intro p + p{
  margin-top:22px;
}


/* ============================================================
   LEFT CONTACT BUTTON
   ============================================================ */

.serv__contact{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  min-width:120px;
  height:40px;

  margin-top:54px;

  padding:0 20px;

  border:1px solid #d6b56e;

  border-radius:4px;

  font-family:var(--sans);

  font-size:11px;

  font-weight:500;

  line-height:1;

  color:#f1f1f1;

  text-decoration:none;

  cursor:pointer;

  transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease;
}


.serv__contact:hover{
  background:#d6b56e;

  color:#081827;

  transform:translateY(-2px);
}


/* ============================================================
   CARDS CONTAINER
   ============================================================ */

.serv__cards{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:12px;

  align-items:stretch;

  width:100%;
}


/* ============================================================
   CARD
   ============================================================ */

.serv-card{
  position:relative;

  min-width:0;

  height:470px;

  border-radius:18px;

  overflow:hidden;

  background:#122c44;

  isolation:isolate;

  transition:
    transform .45s var(--ease),
    box-shadow .45s var(--ease);
}


.serv-card:hover{
  transform:translateY(-5px);

  box-shadow:0 18px 45px rgba(0,0,0,.22);
}


/* ============================================================
   IMAGE
   ============================================================ */

.serv-card__image{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  object-position:center;

  z-index:0;

  transition:transform .7s var(--ease);
}


.serv-card:hover .serv-card__image{
  transform:scale(1.035);
}


/* ============================================================
   DARK OVERLAY
   ============================================================ */

.serv-card__overlay{
  position:absolute;

  inset:0;

  z-index:1;

  background:
    linear-gradient(
      180deg,
      rgba(8,24,39,.18) 0%,
      rgba(8,24,39,.22) 28%,
      rgba(8,24,39,.62) 62%,
      rgba(8,24,39,.94) 100%
    );
}


/* ============================================================
   CARD CONTENT
   ============================================================ */

.serv-card__content{
  position:absolute;

  inset:auto 0 0 0;

  z-index:3;

  padding:0 18px 16px;

  color:#f1f1f1;
}


/* ============================================================
   CARD TITLE
   ============================================================ */

.serv-card h3{
  margin:0;

  font-family:var(--serif);

  font-size:27px;

  font-weight:400;

  line-height:.96;

  letter-spacing:-.01em;

  color:#f1f1f1;
}


/* ============================================================
   CARD BODY TEXT — BIGGER
   ============================================================ */

.serv-card p{
  margin-top:14px;

  font-family:var(--sans);

  font-size:16px;

  font-weight:300;

  line-height:1.5;

  color:rgba(241,241,241,.92);
}


/* ============================================================
   GOLD CLICKABLE BUTTON
   ============================================================ */

.serv-card__button{
  width:100%;

  height:46px;

  margin-top:16px;

  padding:0 17px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  background:#d6b56e;

  color:#081827;

  border-radius:12px;

  font-family:var(--sans);

  font-size:16px;

  font-weight:500;

  line-height:1;

  text-decoration:none;

  cursor:pointer;

  transition:
    background .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}


.serv-card__button:hover{
  background:#e3ca90;

  color:#081827;

  transform:translateY(-2px);

  box-shadow:0 6px 18px rgba(0,0,0,.14);
}


.serv-card__button:active{
  transform:translateY(0);
}


.serv-card__button:focus-visible{
  outline:2px solid #f1f1f1;

  outline-offset:3px;
}


/* ============================================================
   CHECKMARK
   ============================================================ */

.serv-card__check{
  display:flex;

  align-items:center;
  justify-content:center;

  font-size:19px;

  font-weight:500;

  line-height:1;

  color:#081827;
}


/* ============================================================
   DESKTOP
   ============================================================ */

@media(min-width:1200px){

  .serv.serv--figma{
    padding:60px 0 54px;
  }


  .serv__figma-grid{
    grid-template-columns:
      minmax(280px,.72fr)
      minmax(700px,1.6fr);
  }


  .serv__cards{
    gap:12px;
  }


  .serv-card{
    height:490px;
  }


  .serv-card h3{
    font-size:28px;
  }


  .serv-card p{
    font-size:16px;

    line-height:1.5;
  }


  .serv-card__button{
    height:46px;

    font-size:16px;

    padding:0 17px;
  }


  .serv-card__check{
    font-size:19px;
  }

}


/* ============================================================
   EXTRA LARGE SCREEN
   ============================================================ */

@media(min-width:1600px){

  .serv.serv--figma{
    padding:68px 0 62px;
  }


  .serv__figma-grid{
    gap:130px;
  }


  .serv__intro{
    max-width:420px;
  }


  .serv--figma .serv__intro h2{
    font-size:4.35rem;
  }


  .serv--figma .serv__intro p{
    max-width:400px;

    font-size:18px;

    line-height:1.55;
  }


  .serv__contact{
    margin-top:58px;

    min-width:125px;

    height:42px;

    font-size:11.5px;
  }


  .serv-card{
    height:520px;

    border-radius:20px;
  }


  .serv-card__content{
    padding:0 20px 18px;
  }


  .serv-card h3{
    font-size:30px;
  }


  .serv-card p{
    font-size:17px;

    line-height:1.5;
  }


  .serv-card__button{
    height:48px;

    padding:0 18px;

    font-size:17px;
  }


  .serv-card__check{
    font-size:20px;
  }

}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:1000px){

  .serv.serv--figma{
    padding:55px 0;
  }


  .serv__figma-grid{
    grid-template-columns:1fr;

    gap:45px;
  }


  .serv__intro{
    max-width:520px;
  }


  .serv--figma .serv__intro h2{
    font-size:3.7rem;
  }


  .serv--figma .serv__intro p{
    max-width:480px;

    font-size:15px;

    line-height:1.55;
  }


  .serv__contact{
    margin-top:30px;
  }


  .serv__cards{
    gap:12px;
  }


  .serv-card{
    height:460px;
  }


  .serv-card h3{
    font-size:26px;
  }


  .serv-card p{
    font-size:14px;
  }


  .serv-card__button{
    height:44px;

    font-size:15px;
  }


  .serv-card__check{
    font-size:18px;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:700px){

  .serv.serv--figma{
    padding:48px 0 55px;
  }


  .serv__figma-grid{
    gap:38px;
  }


  .serv--figma .serv__intro h2{
    font-size:3rem;
  }


  .serv--figma .serv__intro p{
    max-width:100%;

    font-size:14px;

    line-height:1.55;
  }


  .serv__cards{
    grid-template-columns:1fr;

    gap:18px;
  }


  .serv-card{
    height:520px;

    border-radius:18px;
  }


  .serv-card__content{
    padding:0 18px 16px;
  }


  .serv-card h3{
    font-size:28px;
  }


  .serv-card p{
    max-width:340px;

    font-size:14px;

    line-height:1.5;
  }


  .serv-card__button{
    height:46px;

    padding:0 16px;

    font-size:15px;
  }


  .serv-card__check{
    font-size:18px;
  }

}

/* ============================================================
   PROCESS
   ============================================================ */

.proc{
  background:#1d1d1d;
  padding-block:clamp(52px,6vw,78px);
  text-align:center;
  overflow:hidden;
}


/* MAIN HEADING */
.proc h2{
  font-family:var(--serif);
  font-size:clamp(2rem,3vw,3rem);
  font-weight:600;
  line-height:1.1;
  color:var(--smoke);
}


/* SUBTEXT */
.proc__sub{
  font-size:14px;
  opacity:.78;
  margin-top:20px;
  color:var(--smoke);
}


/* PROCESS RAIL */
.proc__rail{
  position:relative;
  margin-top:clamp(55px,6vw,80px);
}


/* HORIZONTAL LINE */
.proc__line{
  position:absolute;

  top:82px;

  left:8%;
  right:8%;

  height:3px;

  background:rgba(255,255,255,.22);

  transform:scaleX(0);
  transform-origin:left;

  transition:transform 1.4s var(--ease);

  z-index:0;
}


.proc__rail.in .proc__line{
  transform:scaleX(1);
}


/* FOUR COLUMNS */
.proc__steps{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:50px;

  position:relative;

  z-index:2;
}


/* EACH STEP */
.step{
  text-align:center;
}


/* NUMBER */
.step__n{
  font-family:var(--serif);

  color:var(--gold);

  font-size:clamp(2.2rem,3vw,3rem);

  line-height:1;

  margin-bottom:28px;
}


/* DOT */
.step__dot{
  width:20px;
  height:20px;

  border-radius:50%;

  background:#d9d9d9;

  border:2px solid var(--gold);

  margin:0 auto;

  box-shadow:0 0 0 4px #1d1d1d;

  transform:scale(0);

  transition:transform .55s var(--ease);

  position:relative;

  z-index:3;
}


.proc__rail.in .step__dot{
  transform:scale(1);
}


.proc__rail.in .step:nth-child(2) .step__dot{
  transition-delay:.22s;
}

.proc__rail.in .step:nth-child(3) .step__dot{
  transition-delay:.44s;
}

.proc__rail.in .step:nth-child(4) .step__dot{
  transition-delay:.66s;
}


/* STEP TITLE */
.step h3{
  font-family:var(--serif);

  font-size:clamp(1.45rem,2vw,2rem);

  font-weight:600;

  color:var(--smoke);

  margin-top:28px;

  line-height:1.1;
}


/* STEP DESCRIPTION */
.step p{
  font-size:14px;

  color:rgba(241,241,241,.8);

  line-height:1.45;

  margin-top:14px;

  max-width:240px;

  margin-inline:auto;
}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:900px){

  .proc__steps{
    grid-template-columns:repeat(2,1fr);
    gap:55px 30px;
  }

  .proc__line{
    display:none;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:600px){

  .proc{
    padding-block:50px;
  }

  .proc h2{
    font-size:2rem;
  }

  .proc__sub{
    font-size:13px;
  }

  .proc__rail{
    margin-top:45px;
  }

  .proc__steps{
    grid-template-columns:1fr;
    gap:46px;
  }

  .step__n{
    font-size:2.3rem;
    margin-bottom:18px;
  }

  .step__dot{
    width:18px;
    height:18px;
  }

  .step h3{
    margin-top:20px;
    font-size:1.5rem;
  }

  .step p{
    font-size:13px;
    max-width:280px;
  }

}
/* ============================================================
   TESTIMONIALS — TRUE MORPHING CAROUSEL
   ============================================================ */

.test.test--morph{
  position:relative;
  width:100%;

  padding:68px 0 72px;

  background:#081827;
  color:#f1f1f1;

  overflow:hidden;
}


/* ============================================================
   HEADER
   ============================================================ */

.morph-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:40px;
}


.morph-head h2{
  margin:0;

  font-family:var(--serif);
  font-size:44px;
  font-weight:400;
  line-height:1.05;

  color:#f1f1f1;
}


.morph-score{
  display:flex;
  align-items:flex-start;

  gap:16px;
}


.morph-score strong{
  font-family:var(--serif);
  font-size:42px;
  font-weight:400;
  line-height:1;

  color:#d6b56e;
}


.morph-score span{
  margin-top:3px;

  font-family:var(--sans);
  font-size:11px;
  font-weight:300;
  line-height:1.4;

  color:rgba(241,241,241,.58);
}


/* ============================================================
   REVIEWS ROW
   ============================================================ */

.morph-reviews{
  position:relative;

  display:flex;

  align-items:stretch;

  gap:16px;

  width:100%;

  margin-top:68px;

  overflow:hidden;
}


/* ============================================================
   NORMAL SMALL CARD
   ============================================================ */

.morph-card{
  position:relative;

  order:2;

  flex:1 1 0;

  min-width:0;

  height:250px;

  border-radius:10px;

  background:#163b5c;

  overflow:hidden;

  cursor:pointer;

  transform-origin:center;

  will-change:transform;

  transition:
    background .3s ease;
}


.morph-card:hover:not(.is-active){
  background:#1b4568;
}


/* ============================================================
   ACTIVE LARGE CARD
   ============================================================ */

.morph-card.is-active{
  order:1;

  flex:0 0 560px;

  background:transparent;

  cursor:default;
}


/* hide reviews after first 3 small cards */

.morph-card.is-hidden{
  display:none;
}


/* ============================================================
   EXPANDED CONTENT
   ============================================================ */

.morph-card__expanded{
  position:absolute;

  inset:0;

  display:grid;

  grid-template-columns:180px minmax(0,1fr);

  gap:28px;

  opacity:0;

  pointer-events:none;

  transition:opacity .20s ease;
}


.morph-card.is-active .morph-card__expanded{
  opacity:1;

  pointer-events:auto;
}


/* ============================================================
   CLIENT IMAGE
   ============================================================ */

.morph-card__image{
  width:180px;
  height:250px;

  overflow:hidden;

  border-radius:9px;

  background:#e5e5e5;
}


.morph-card__image img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;
}


/* ============================================================
   LARGE REVIEW CONTENT
   ============================================================ */

.morph-card__content{
  min-width:0;

  padding:9px 10px 8px 0;
}


.morph-stars{
  font-family:var(--sans);

  font-size:17px;

  line-height:1;

  letter-spacing:4px;

  color:#d6b56e;
}


.morph-card__content p{
  max-width:340px;

  margin:24px 0 0;

  font-family:var(--sans);

  font-size:15px;

  font-weight:300;

  line-height:1.6;

  color:rgba(241,241,241,.84);
}


/* ============================================================
   SMALL CARD
   ============================================================ */

.morph-card__small{
  position:absolute;

  inset:0;

  padding:24px;

  display:flex;

  flex-direction:column;

  justify-content:space-between;

  opacity:1;

  transition:opacity .18s ease;
}


.morph-card.is-active .morph-card__small{
  opacity:0;

  pointer-events:none;
}


.morph-card__small p{
  margin:0;

  font-family:var(--sans);

  font-size:13px;

  font-weight:300;

  line-height:1.55;

  color:rgba(241,241,241,.82);
}


/* ============================================================
   AUTHOR
   ============================================================ */

.morph-author{
  margin-top:22px;

  font-family:var(--sans);

  font-size:10px;

  line-height:1.45;
}


.morph-author strong{
  color:#f1f1f1;

  font-weight:600;
}


.morph-author span{
  margin-left:3px;

  color:rgba(241,241,241,.55);

  font-weight:300;
}


.morph-card__content .morph-author{
  font-size:11px;
}


/* ============================================================
   NAVIGATION
   ============================================================ */

.morph-nav{
  display:flex;

  align-items:center;

  gap:12px;

  margin-top:30px;
}


.morph-arrow{
  width:43px;
  height:43px;

  padding:0;

  display:flex;

  align-items:center;
  justify-content:center;

  border:1px solid rgba(241,241,241,.5);

  border-radius:50%;

  background:transparent;

  color:#f1f1f1;

  cursor:pointer;

  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .25s ease;
}


.morph-arrow:hover{
  transform:translateY(-2px);

  background:#d6b56e;

  border-color:#d6b56e;

  color:#081827;
}


.morph-arrow--next{
  background:#d6b56e;

  border-color:#d6b56e;

  color:#081827;
}


.morph-arrow svg{
  width:16px;
  height:16px;

  fill:none;

  stroke:currentColor;

  stroke-width:1.8;

  stroke-linecap:round;

  stroke-linejoin:round;
}


/* ============================================================
   DESKTOP
   ============================================================ */

@media(min-width:1600px){

  .test.test--morph{
    padding:76px 0 82px;
  }


  .morph-head h2{
    font-size:48px;
  }


  .morph-reviews{
    margin-top:76px;

    gap:18px;
  }


  .morph-card{
    height:270px;
  }


  .morph-card.is-active{
    flex-basis:610px;
  }


  .morph-card__expanded{
    grid-template-columns:195px minmax(0,1fr);

    gap:30px;
  }


  .morph-card__image{
    width:195px;
    height:270px;
  }


  .morph-card__content p{
    font-size:16px;

    max-width:370px;
  }


  .morph-card__small{
    padding:27px 25px;
  }


  .morph-card__small p{
    font-size:14px;
  }

}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:1050px){

  .morph-card.is-active{
    flex-basis:480px;
  }


  .morph-card__expanded{
    grid-template-columns:145px minmax(0,1fr);

    gap:20px;
  }


  .morph-card__image{
    width:145px;
  }


  .morph-card__content p{
    font-size:13px;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:700px){

  .test.test--morph{
    padding:50px 0 55px;
  }


  .morph-head{
    flex-direction:column;

    gap:25px;
  }


  .morph-head h2{
    font-size:31px;
  }


  .morph-reviews{
    margin-top:42px;
  }


  .morph-card:not(.is-active){
    display:none;
  }


  .morph-card.is-active{
    flex:0 0 100%;

    width:100%;

    height:440px;
  }


  .morph-card__expanded{
    grid-template-columns:1fr;

    gap:16px;
  }


  .morph-card__image{
    width:100%;

    height:230px;
  }


  .morph-card__content{
    padding:0 18px 18px;
  }

}
/* ============================================================
   COLLABORATE — FINAL ADJUSTED VERSION
   ============================================================ */

.cta{
  position:relative;

  width:100%;
  height:790px;

  background:var(--navy);

  overflow:hidden;

  padding:0;
}


/* ============================================================
   MAIN SCENE
   ============================================================ */

.cta__scene{
  position:relative;

  width:100%;
  height:100%;

  max-width:1700px;

  margin:0 auto;
}


/* ============================================================
   LEFT FORM
   ============================================================ */

.cta .form{
  position:absolute;

  left:5%;

  /* moved slightly upward */
  top:320px;

  width:510px;

  z-index:20;

  display:grid;

  gap:14px;

  margin:0;
}


.cta .form__row{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:14px;
}


.cta .form input,
.cta .form select{
  width:100%;

  height:56px;

  padding:0 17px;

  border:0;

  border-radius:5px;

  background:#f1f1f1;

  color:#081827;

  font-family:var(--sans);

  font-size:13.5px;

  outline:none;
}


.cta .form input::placeholder{
  color:rgba(8,24,39,.45);
}


.cta .form select{
  appearance:none;

  color:rgba(8,24,39,.65);

  background-color:#f1f1f1;

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      #081827 50%
    ),
    linear-gradient(
      135deg,
      #081827 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 20px) 24px,
    calc(100% - 15px) 24px;

  background-size:5px 5px;

  background-repeat:no-repeat;
}


.cta .form select option{
  background:#fff;

  color:#081827;
}


.cta .form button{
  width:100%;

  height:56px;

  margin:0;

  border:0;

  border-radius:5px;

  background:var(--gold);

  color:var(--navy);

  font-family:var(--sans);

  font-size:13.5px;

  font-weight:500;

  cursor:pointer;

  transition:
    background .3s ease,
    transform .3s ease;
}


.cta .form button:hover{
  background:var(--gold-soft);

  transform:translateY(-1px);
}


.cta .form__note{
  position:absolute;

  left:0;
  top:100%;

  margin-top:5px;

  font-size:9px;

  color:var(--smoke);
}


/* ============================================================
   CENTRE
   ============================================================ */

.cta__centre{
  position:absolute;

  left:50%;
  top:0;

  transform:translateX(-50%);

  width:620px;
  height:100%;

  z-index:10;

  pointer-events:none;
}


/* ============================================================
   TITLE
   ============================================================ */

.cta__title{
  position:absolute;

  top:50px;
  left:50%;

  transform:translateX(-50%);

  width:780px;

  margin:0;

  text-align:center;

  font-family:var(--serif);

  font-size:106px;

  font-weight:400;

  line-height:.89;

  letter-spacing:-2px;

  color:var(--smoke);

  /* title behind portrait */
  z-index:1;
}


/* ============================================================
   PORTRAIT
   ============================================================ */

.cta__portrait{
  position:absolute;

  left:50%;

  /*
    Bigger than before.
    This pulls the head upwards into the Collaborate text.
  */
  bottom:88px;

  transform:translateX(-50%);

  display:block;

  width:555px;
  height:680px;

  object-fit:contain;

  object-position:center bottom;

  /* portrait in front of title */
  z-index:4;
}


/* ============================================================
   RIGHT CONTENT
   ============================================================ */

.cta__side{
  position:absolute;

  right:5%;
  top:400px;

  width:455px;

  z-index:20;
}


.cta__side p{
  margin:0;

  max-width:415px;

  font-family:var(--sans);

  font-size:14px;

  font-weight:300;

  line-height:1.5;

  color:rgba(241,241,241,.82);
}


/* ============================================================
   DECORATIVE ARROW
   ============================================================ */

.cta__scribble{
  position:absolute;

  left:0;
  top:-120px;

  width:180px;
  height:120px;
}


.cta__curve-arrow{
  width:180px;
  height:120px;

  display:block;
  overflow:visible;
}


.cta__curve-path{
  fill:none;

  stroke:rgba(241,241,241,.65);
  stroke-width:2;

  stroke-linecap:round;
}


.cta__curve-head{
  fill:none;

  stroke:rgba(241,241,241,.80);
  stroke-width:2;

  stroke-linecap:round;
  stroke-linejoin:round;
}


/* ============================================================
   GOLD DIAGONAL BAND
   FULL WIDTH + FULL HEIGHT VISIBLE
   ============================================================ */

.cta-band{
  position:absolute;

  /*
    Extends outside viewport so there is
    no gap on either side after rotation.
  */
  left:-15vw;

  /*
    High enough that bottom edge
    of rotated strip does not get cut.
  */
  bottom:72px;

  width:130vw;
  height:92px;

  background:var(--gold);

  color:var(--navy);

  transform:rotate(-4.5deg);

  transform-origin:center;

  overflow:hidden;

  z-index:50;

  display:flex;

  align-items:center;
}


/* ============================================================
   GOLD BAND TRACK
   ============================================================ */

.cta-band__track{
  display:flex;

  align-items:center;

  width:max-content;

  min-width:220%;

  height:100%;

  white-space:nowrap;

  animation:ctaTicker 26s linear infinite;

  will-change:transform;
}


/* ============================================================
   GOLD BAND TEXT
   ============================================================ */

.cta-band__track span{
  display:flex;

  align-items:center;

  justify-content:center;

  flex-shrink:0;

  height:100%;

  padding:0 50px;

  font-family:var(--serif);

  font-size:35px;

  font-weight:500;

  line-height:1;

  color:var(--navy);
}


/* ============================================================
   GOLD BAND ANIMATION
   ============================================================ */

@keyframes ctaTicker{

  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }

}


.cta-band:hover .cta-band__track{
  animation-play-state:paused;
}


/* ============================================================
   LARGE DESKTOP
   ============================================================ */

@media(min-width:1600px){

  .cta{
    height:830px;
  }


  /* form slightly higher */
  .cta .form{
    top:335px;

    width:535px;
  }


  .cta .form input,
  .cta .form select,
  .cta .form button{
    height:58px;

    font-size:14px;
  }


  .cta__title{
    top:55px;

    font-size:112px;
  }


  /* larger portrait */
  .cta__portrait{
    width:585px;

    height:715px;

    bottom:92px;
  }


  .cta__side{
    top:420px;

    width:470px;
  }


  .cta__side p{
    max-width:425px;

    font-size:14.5px;
  }


  .cta-band{
    left:-15vw;

    width:130vw;

    height:96px;

    bottom:78px;
  }


  .cta-band__track span{
    font-size:37px;

    padding:0 54px;
  }

}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:1000px){

  .cta{
    height:950px;
  }


  .cta__centre{
    width:100%;
  }


  .cta__title{
    top:45px;

    width:100%;

    font-size:76px;
  }


  .cta__portrait{
    top:100px;

    bottom:auto;

    width:410px;

    height:500px;
  }


  .cta .form{
    top:600px;

    left:5%;

    width:43%;
  }


  .cta__side{
    top:630px;

    right:5%;

    width:40%;
  }


  .cta__side p{
    font-size:12px;
  }


  .cta__scribble{
    top:-85px;
  }


  .cta-band{
    left:-20vw;

    width:140vw;

    height:82px;

    bottom:62px;
  }


  .cta-band__track span{
    font-size:30px;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:650px){

  .cta{
    height:1080px;
  }


  .cta__scene{
    padding:0 20px;
  }


  .cta__centre{
    width:100%;
  }


  .cta__title{
    top:38px;

    width:100%;

    font-size:63px;

    line-height:.92;
  }


  .cta__portrait{
    top:120px;

    bottom:auto;

    width:325px;

    height:420px;
  }


  .cta .form{
    top:550px;

    left:20px;

    width:calc(100% - 40px);

    gap:10px;
  }


  .cta .form__row{
    gap:10px;
  }


  .cta .form input,
  .cta .form select,
  .cta .form button{
    height:51px;

    font-size:11.5px;
  }


  .cta__side{
    top:780px;

    left:20px;
    right:auto;

    width:calc(100% - 40px);

    text-align:center;
  }


  .cta__side p{
    max-width:370px;

    margin:auto;

    font-size:11.5px;
  }


  .cta__scribble{
    display:none;
  }


  .cta-band{
    left:-25vw;

    width:150vw;

    height:64px;

    bottom:50px;

    transform:rotate(-4deg);
  }


  .cta-band__track span{
    padding:0 32px;

    font-size:25px;
  }

}
/* ============================================================
   VIDEO
   ============================================================ */
.film{padding-block:clamp(40px,6vw,80px);text-align:center}
.film h2{font-size:clamp(1.4rem,3vw,2.15rem);line-height:1.25}
.film .muted{margin:18px auto 0;max-width:46ch}
.film__box{
  margin:clamp(30px,4vw,50px) auto 0;max-width:860px;aspect-ratio:16/9;
  border-radius:10px;background:var(--smoke);display:grid;place-items:center;
  position:relative;overflow:hidden;
}
.film__play{
  width:62px;height:44px;border-radius:11px;background:#f11;
  display:grid;place-items:center;transition:transform .35s var(--ease),background .35s;
}
.film__play svg{width:17px;height:17px;fill:var(--smoke)}
.film__box:hover .film__play{transform:scale(1.12);background:#d40000}
.film .btn{margin-top:clamp(24px,3vw,36px)}

/* ============================================================
   FOOTER — DESIGN MATCH
   ============================================================ */

.foot{
  background:#111111;
  color:var(--smoke);

  padding:32px 0 30px;

  min-height:210px;

  display:flex;
  align-items:center;
}


/* main layout */
.foot__grid{
  width:100%;

  display:grid;
  grid-template-columns:1.25fr .85fr;

  gap:70px;

  align-items:center;
}


/* ============================================================
   LEFT SIDE
   ============================================================ */

.foot__left{
  align-self:center;
}


.foot h2{
  font-family:var(--serif);

  font-size:clamp(4.8rem,7vw,7.2rem);

  font-weight:400;

  line-height:.99;

  letter-spacing:-.02em;

  color:var(--smoke);

  margin:0;
}


.foot__sub{
  margin-top:10px;

  font-family:var(--sans);

  font-size:19px;

  font-weight:300;

  line-height:1.4;

  color:rgba(241,241,241,.46);
}


/* ============================================================
   SOCIAL LINKS
   ============================================================ */

.socials{
  width:100%;

  display:flex;
  flex-direction:column;

  justify-content:center;

  gap:0;
}


/* each row */
.social-link{
  width:100%;

  min-height:72px;

  display:flex;

  align-items:center;
  justify-content:flex-start;

  gap:10px;

  border-bottom:1px solid rgba(255,255,255,.035);

  font-family:var(--serif);

  font-size:clamp(2.1rem,3vw,3rem);

  font-weight:400;

  line-height:1;

  letter-spacing:0;

  color:var(--smoke);

  transition:
    color .3s ease,
    padding-left .35s var(--ease);
}


/* Instagram gold */
.social-link--active{
  color:var(--gold);
}


/* arrow */
.social-arrow{
  font-family:var(--sans);

  font-size:15px;

  font-weight:300;

  line-height:1;

  margin-top:-2px;

  opacity:.95;
}


/* hover */
.social-link:hover{
  color:var(--gold);

  padding-left:7px;
}


/* remove old footer bar */
.foot__bar{
  display:none !important;
}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:1024px){

  .foot{
    padding:38px 0;
  }

  .foot__grid{
    grid-template-columns:1fr 1fr;

    gap:50px;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:760px){

  .foot{
    min-height:auto;

    padding:50px 0 40px;
  }


  .foot__grid{
    grid-template-columns:1fr;

    gap:35px;
  }


  .foot h2{
    font-size:3rem;
  }


  .foot__sub{
    margin-top:12px;

    font-size:9px;
  }


  .socials{
    width:100%;
  }


  .social-link{
    min-height:55px;

    font-size:1.25rem;
  }

}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .hero__grid{
    grid-template-columns:1fr;
    gap:24px;
    align-items:start;
    transform:none;
  }
  .hero__figure{
    max-width:430px;
    justify-self:center;
    margin-top:0;
  }
  .hero__portrait{
    max-width:430px;
    height:auto;
  }
  .about__grid,.collab__grid,.serv__grid,.cta__body,.foot__grid{grid-template-columns:1fr}
  .collab__grid > *{min-height:200px}
  .cta__body{margin-top:24px}
  .cta__figure{display:none}
  .cta__aside{justify-self:start;max-width:420px}
  .form{max-width:none}
  .socials{justify-items:start}
}
@media(max-width:760px){
  .nav{
    position:fixed;inset:0;flex-direction:column;justify-content:center;align-items:center;
    gap:26px;background:rgba(8,24,39,.97);backdrop-filter:blur(10px);
    opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
  }
  .nav a{font-size:20px;font-family:var(--serif)}
  .nav-open .nav{opacity:1;pointer-events:auto}
  .burger{display:block;position:relative;z-index:2}
  .hdr .btn{display:none}
  .hero{
    padding-top:115px;
    padding-bottom:24px;
  }
  .hero__grid{
    transform:none;
  }
  .hero__figure{
    justify-self:center;
    max-width:330px;
    margin-top:4px;
  }
  .hero__portrait{
    max-width:330px;
    height:auto;
  }
  .stats__row{grid-template-columns:1fr;gap:34px}
  .vids{grid-template-columns:1fr}
  .vid:nth-child(2){margin-top:0}
  .svc__row{grid-template-columns:1fr;gap:16px}
  .svc{aspect-ratio:4/3;margin-top:0 !important}
  .proc__steps{grid-template-columns:1fr 1fr;gap:34px 20px}
  .proc__line{display:none}
  .tcard--lead{grid-template-columns:1fr}
  .card--tan > *:not(.card__figure){max-width:100%}
  .card--tan .card__figure{opacity:.35}
  .foot__bar{flex-direction:column;gap:10px}
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  .rv{
    opacity:1;
    transform:none;
  }

  .rv-line > span{
    transform:none;
  }

  .band{
    transform:rotate(-3.2deg) scale(1.08);
  }

  /* KEEP MARQUEES MOVING */
  .marquee__track,
  .logo-track{
    animation-play-state:running !important;
  }
}

/* ============================================================
   FINAL PROCESS OVERRIDE
   Paste this at the VERY BOTTOM of styles.css
   ============================================================ */

.proc{
  background:#1d1d1d !important;
  padding:55px 0 65px !important;
  text-align:center;
  overflow:hidden;
}


/* MAIN TITLE */
.proc h2{
  font-family:var(--serif) !important;
  font-size:clamp(2rem,3vw,3rem) !important;
  font-weight:600 !important;
  line-height:1.1 !important;
  color:var(--smoke) !important;
}


/* SUB TITLE */
.proc__sub{
  margin-top:22px !important;
  font-size:14px !important;
  line-height:1.5 !important;
  color:rgba(241,241,241,.85) !important;
  opacity:1 !important;
}


/* AREA BELOW HEADING */
.proc__rail{
  position:relative !important;
  margin-top:62px !important;
}


/* 4 COLUMN GRID */
.proc__steps{
  position:relative !important;
  z-index:2 !important;

  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;

  gap:40px !important;
}


/* ============================================================
   HORIZONTAL CONNECTING LINE
   ============================================================ */

.proc__line{
  position:absolute !important;

  /* line passes exactly through the dots */
  top:89px !important;

  left:8.2% !important;
  right:8.2% !important;

  height:3px !important;

  background:rgba(255,255,255,.22) !important;

  z-index:1 !important;

  /* always visible */
  transform:none !important;

  transition:none !important;
}


/* ============================================================
   EACH PROCESS STEP
   ============================================================ */

.step{
  position:relative !important;
  text-align:center !important;
}


/* NUMBERS */
.step__n{
  font-family:var(--serif) !important;

  font-size:clamp(2.4rem,3vw,3.1rem) !important;

  font-weight:500 !important;

  line-height:1 !important;

  color:var(--gold) !important;

  margin:0 0 30px !important;
}


/* ============================================================
   CIRCLE DOTS
   ============================================================ */

.step__dot{
  position:relative !important;

  width:21px !important;
  height:21px !important;

  margin:0 auto !important;

  border-radius:50% !important;

  background:#ddd !important;

  border:2px solid var(--gold) !important;

  /* covers line behind circle */
  box-shadow:0 0 0 4px #1d1d1d !important;

  z-index:5 !important;

  /* override old animation hiding the circles */
  transform:none !important;

  transition:none !important;
}


/* ============================================================
   TITLES
   ============================================================ */

.step h3{
  margin-top:27px !important;

  font-family:var(--serif) !important;

  font-size:clamp(1.45rem,2vw,2rem) !important;

  line-height:1.15 !important;

  font-weight:600 !important;

  color:var(--smoke) !important;
}


/* ============================================================
   DESCRIPTION
   ============================================================ */

.step p{
  max-width:235px !important;

  margin:15px auto 0 !important;

  font-family:var(--sans) !important;

  font-size:14px !important;

  line-height:1.45 !important;

  color:rgba(241,241,241,.82) !important;

  opacity:1 !important;
}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:900px){

  .proc{
    padding:55px 0 !important;
  }

  .proc__steps{
    grid-template-columns:repeat(2,1fr) !important;
    gap:55px 30px !important;
  }

  .proc__line{
    display:none !important;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:600px){

  .proc{
    padding:45px 0 !important;
  }

  .proc h2{
    font-size:2rem !important;
  }

  .proc__sub{
    font-size:13px !important;
    margin-top:14px !important;
  }

  .proc__rail{
    margin-top:45px !important;
  }

  .proc__steps{
    grid-template-columns:1fr !important;
    gap:45px !important;
  }

  .proc__line{
    display:none !important;
  }

  .step__n{
    font-size:2.5rem !important;
    margin-bottom:20px !important;
  }

  .step h3{
    font-size:1.55rem !important;
    margin-top:20px !important;
  }

  .step p{
    max-width:290px !important;
    font-size:13px !important;
  }

}

/* ============================================================
   STATS SECTION — TIGHTER LAYOUT
   ============================================================ */

.stats.stats--figma{
  position:relative !important;

  width:100% !important;

  background:#081827 !important;

  color:#f1f1f1 !important;

  text-align:center !important;

  overflow:hidden !important;

  padding:70px 0 70px !important;
}


/* ============================================================
   MAIN TITLE
   ============================================================ */

.stats--figma h2{
  margin:0 !important;

  font-family:var(--serif) !important;

  font-size:42px !important;

  font-weight:400 !important;

  line-height:1.16 !important;

  letter-spacing:-.5px !important;

  color:#f1f1f1 !important;

  text-align:center !important;
}


/* ============================================================
   NUMBERS ROW
   ============================================================ */

.stats--figma .stats__row{
  display:grid !important;

  grid-template-columns:repeat(3,1fr) !important;

  gap:0 !important;

  align-items:start !important;

  width:100% !important;

  margin-top:65px !important;

  padding:0 4% !important;
}


/* ============================================================
   INDIVIDUAL STAT
   ============================================================ */

.stats--figma .stats__item{
  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;

  justify-content:flex-start !important;

  margin:0 !important;

  padding:0 !important;

  opacity:1 !important;

  visibility:visible !important;

  transform:none !important;
}


/* ============================================================
   GOLD NUMBERS
   ============================================================ */

.stats--figma .stat__n{
  display:block !important;

  margin:0 !important;

  padding:0 !important;

  font-family:var(--serif) !important;

  font-size:82px !important;

  font-weight:400 !important;

  line-height:.95 !important;

  letter-spacing:-1.5px !important;

  color:#d6b56e !important;

  opacity:1 !important;

  visibility:visible !important;
}


/* ============================================================
   LABELS
   ============================================================ */

.stats--figma .stat__l{
  display:block !important;

  margin-top:14px !important;

  font-family:var(--sans) !important;

  font-size:10px !important;

  font-weight:400 !important;

  line-height:1 !important;

  letter-spacing:.08em !important;

  text-transform:uppercase !important;

  color:rgba(241,241,241,.68) !important;

  opacity:1 !important;

  visibility:visible !important;
}


/* ============================================================
   STATIC TEXT BELOW NUMBERS
   ============================================================ */

.stats--figma .stats__static{
  position:relative !important;

  left:auto !important;
  top:auto !important;

  transform:none !important;

  width:100% !important;

  margin-top:38px !important;

  padding:0 20px !important;

  text-align:center !important;

  font-family:var(--sans) !important;

  font-size:8px !important;

  font-weight:500 !important;

  line-height:1.2 !important;

  letter-spacing:.04em !important;

  text-transform:uppercase !important;

  color:rgba(241,241,241,.72) !important;

  white-space:nowrap !important;

  opacity:1 !important;

  visibility:visible !important;

  animation:none !important;
}


/* ============================================================
   LARGE DESKTOP
   ============================================================ */

@media(min-width:1600px){

  .stats.stats--figma{
    padding:78px 0 78px !important;
  }


  .stats--figma h2{
    font-size:46px !important;
  }


  .stats--figma .stats__row{
    margin-top:70px !important;
  }


  .stats--figma .stat__n{
    font-size:88px !important;
  }


  .stats--figma .stat__l{
    margin-top:15px !important;

    font-size:10.5px !important;
  }


  .stats--figma .stats__static{
    margin-top:40px !important;

    font-size:8.5px !important;
  }

}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:900px){

  .stats.stats--figma{
    padding:58px 20px 60px !important;
  }


  .stats--figma h2{
    font-size:34px !important;
  }


  .stats--figma .stats__row{
    margin-top:55px !important;
  }


  .stats--figma .stat__n{
    font-size:64px !important;
  }


  .stats--figma .stat__l{
    margin-top:12px !important;

    font-size:8px !important;
  }


  .stats--figma .stats__static{
    margin-top:32px !important;

    font-size:7px !important;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:600px){

  .stats.stats--figma{
    padding:48px 20px 55px !important;
  }


  .stats--figma h2{
    font-size:28px !important;

    line-height:1.2 !important;
  }


  .stats--figma .stats__row{
    grid-template-columns:1fr !important;

    gap:38px !important;

    margin-top:50px !important;

    padding:0 !important;
  }


  .stats--figma .stat__n{
    font-size:68px !important;
  }


  .stats--figma .stat__l{
    margin-top:10px !important;

    font-size:8px !important;
  }


  .stats--figma .stats__static{
    margin-top:35px !important;

    font-size:7px !important;

    white-space:normal !important;

    line-height:1.5 !important;
  }

}

/* ============================================================
   FOOTER
   ============================================================ */

.foot{
  background:#111;
  color:#fff;
  padding:60px 0 40px;
}

.foot__in{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:300px;
  align-items:start;
}


/* LEFT SIDE */

.foot__left h2{
  margin:0;

  font-family:var(--serif);
  font-size:86px;
  font-weight:400;
  line-height:.95;

  color:#f5f5f5;
}

.foot__left p{
  margin:22px 0 0;

  font-size:18px;
  color:rgba(255,255,255,.35);
}


/* RIGHT SIDE */

.foot__right{
  display:flex;
  flex-direction:column;
}

.foot__right a{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:20px 0;

  border-bottom:1px solid rgba(255,255,255,.08);

  color:#f5f5f5;
  text-decoration:none;

  transition:color .25s ease;
}

.foot__right a span{
  font-family:var(--serif);
  font-size:42px;
  line-height:1;
}

.foot__right a i{
  font-style:normal;
  font-size:18px;
}

.foot__right a:hover{
  color:#d6b56e;
}


/* OPTIONAL: FIRST LINK GOLD LIKE BEFORE */

.foot__right a:first-child{
  color:#d6b56e;
}

.foot__right a:first-child:hover{
  color:#fff;
}


/* MOBILE */

@media(max-width:700px){

  .foot__in{
    grid-template-columns:1fr;
    gap:50px;
  }

  .foot__left h2{
    font-size:58px;
  }

  .foot__right a span{
    font-size:32px;
  }

}