/* =========================================================
   YIAMAS — built from WEBSITE.psd (1920 x 4850)
   Colours, type sizes and spacing measured from the PSD.
   ========================================================= */

/* ---------- self-hosted fonts (no third-party request) ---------- */
@font-face{ font-family:'Anton'; src:url('assets/fonts/anton-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Space Mono'; src:url('assets/fonts/space-mono-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Space Mono'; src:url('assets/fonts/space-mono-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('assets/fonts/inter-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('assets/fonts/inter-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap; }

:root{
  /* --- palette (sampled from the PSD) --- */
  --cream:      #F2EFE6;
  --ink:        #131110;
  --black:      #000000;
  --pink:       #FC2167;
  --grey:       #696762;   /* body copy on cream            */
  --grey-mid:   #A19F99;   /* card body, card borders       */
  --grey-soft:  #6D6B67;   /* footer + social links         */
  --rule:       #D5D1C9;   /* hairline under the header     */
  --rule-dark:  #43413E;   /* divider inside the spec table */
  --white:      #FFFFFF;

  /* --- rhythm --- */
  --gutter: 3.125rem;      /* 50px at design scale */
  --header-h: 5.5rem;      /* 88px, trimmed down from the PSD's 115px */
  --header-h-scrolled: 4.375rem;
  --maxw: 120rem;          /* 1920px, giving the PSD's 1820px of content */
}

/* Everything is sized in rem against a root that scales with the
   viewport, so the whole layout shrinks in proportion exactly the
   way the artboard does. 1rem = 16px at 1920px wide. */
html{ font-size: clamp(11px, 0.8333vw, 16px); }

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

body{
  margin:0;
  background:var(--cream);
  color:var(--black);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

:focus-visible{ outline:3px solid var(--pink); outline-offset:3px; }

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

/* ---------- shared type ---------- */
.spark{ width:1.1875rem; height:1.1875rem; fill:var(--pink); flex:none; }

.display{
  font-family:'Anton',Impact,sans-serif;
  font-weight:400;
  font-size:4.5625rem;          /* 73px */
  line-height:0.98;
  letter-spacing:-0.005em;
  margin:1.875rem 0 0;
  text-wrap:balance;
}

.eyebrow{
  display:flex; align-items:center; gap:0.55rem;
  font-family:'Space Mono',monospace;
  font-size:0.84375rem;          /* 13.5px */
  letter-spacing:0.16em;
  color:var(--pink);
  margin:0;
}
.eyebrow--center{ justify-content:center; }

.lede{
  font-size:1.46875rem;          /* 23.5px */
  line-height:1.4;
  color:var(--grey);
  margin:2.375rem 0 0;
}
.lede--center{ text-align:center; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--cream);
  border-bottom:2px solid var(--rule);
  transition:background .3s ease, border-color .3s ease;
}
/* once the page moves, the bar tightens and lets a little of the page through */
.site-header.is-scrolled{
  background:rgba(242,239,230,0.72);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
          backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:rgba(19,17,16,0.10);
}
.site-header.is-scrolled .header-inner{ height:var(--header-h-scrolled); }
.header-inner{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:0 var(--gutter);
  height:var(--header-h);
  transition:height .3s ease;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem;
}

.brand{
  display:flex; align-items:center; gap:0.55rem;
  font-family:'Space Mono',monospace; font-weight:700;
  font-size:1.4375rem;           /* 23px */
  letter-spacing:0.16em;
}

.nav{ display:flex; gap:1.75rem; }
.nav a{
  position:relative;
  font-family:'Space Mono',monospace;
  font-size:1rem;                /* 16px */
  letter-spacing:0.16em;
  padding-bottom:0.55rem;
}
/* the pink bar — grows out from the centre on hover */
.nav a::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0;
  height:3px; background:var(--pink);
  transform:scaleX(0); transform-origin:center;
  transition:transform .32s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover::after,
.nav a:focus-visible::after,
.nav a.is-current::after{ transform:scaleX(1); }

.say-hi{
  display:inline-flex; align-items:center; gap:0.55rem;
  background:var(--black); color:var(--cream);
  font-family:'Space Mono',monospace;
  font-size:0.875rem; letter-spacing:0.16em;
  padding:0.9rem 1.35rem;
  transition:background .28s ease, color .28s ease;
}
.say-hi .spark{ fill:var(--cream); transition:fill .28s ease; }
.say-hi:hover{ background:var(--pink); color:var(--white); }
.say-hi:hover .spark{ fill:var(--white); }

.menu-toggle{ display:none; }
.mobile-nav{ display:none; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  background:var(--cream);
  color:var(--black);
  /* PSD: 178px above the wordmark, 49px below the scroll cue */
  padding:11.125rem 0 3.0625rem;
  display:flex; flex-direction:column; align-items:center;
  min-height:calc(100vh - var(--header-h));
  justify-content:flex-start;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

/* faint globe wireframe from the PSD, sitting behind everything */
.hero-bg{
  position:absolute; top:3.6875rem; left:50%;
  transform:translateX(-50%);
  width:117.375rem;              /* 1878px — the PSD's own size and offset */
  aspect-ratio:1878/1876;
  z-index:0;
  background:url('assets/globe.png') no-repeat center/100% 100%;
  pointer-events:none;
}
.hero-media{ width:min(60.875rem, 88vw); position:relative; z-index:1; }
.hero-logo{ width:100%; height:auto; }

.hero-disciplines{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:1rem 1.5rem;
  font-family:'Space Mono',monospace;
  font-size:1.5rem;              /* 24px */
  letter-spacing:0.16em;
  color:var(--grey);
  line-height:1;
  margin:4.1875rem 0 0;          /* PSD: 70px below the wordmark */
  position:relative; z-index:1;
  text-align:center;
}

.clients{ width:100%; margin-top:5.5rem; position:relative; z-index:1; }
.clients-label{
  text-align:center; margin:0 0 2rem;
  line-height:1;
  font-size:1.46875rem; color:var(--grey);
}

.scroll-cue{
  display:flex; flex-direction:column; align-items:center; gap:1.1875rem;
  margin-top:4.5625rem;          /* PSD: 73px below the logo row */
  font-family:'Space Mono',monospace;
  font-size:0.7125rem; letter-spacing:0.16em; color:var(--grey);
  position:relative; z-index:1;
}
.scroll-dot{
  width:3rem; height:3rem; border-radius:50%;
  background:var(--black); color:var(--cream);
  display:grid; place-items:center;
  animation:bob 2.2s ease-in-out infinite;
  transition:background .25s ease, color .25s ease;
}
.scroll-dot svg{ width:1.35rem; height:1.35rem; }
.scroll-cue:hover .scroll-dot{ background:var(--pink); color:var(--white); }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

/* =========================================================
   MARQUEES
   ========================================================= */
.marquee{ overflow:hidden; width:100%; }
.marquee-track{ display:flex; width:max-content; }
.marquee-group{
  display:flex; align-items:center; flex:none;
  animation:scroll-left var(--speed,38s) linear infinite;
}
.marquee[data-direction="right"] .marquee-group{ animation-name:scroll-right; }

@keyframes scroll-left{  from{transform:translateX(0)}    to{transform:translateX(-100%)} }
@keyframes scroll-right{ from{transform:translateX(-100%)} to{transform:translateX(0)} }

/* the black bands */
.marquee--band{
  background:var(--ink);
  padding:3.5625rem 0;
}
.marquee--band .marquee-group{ gap:3.625rem; padding-right:3.625rem; }
.marquee--band span{
  font-family:'Anton',Impact,sans-serif;
  font-size:2.5625rem;           /* 41px */
  line-height:1;
  color:var(--cream);
  white-space:nowrap;
}
.marquee--band .spark{ width:2.125rem; height:2.125rem; }

/* the client logo strip */
.marquee--clients{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee--clients .marquee-group{ gap:4.5rem; padding-right:4.5rem; --speed:46s; }
.marquee--clients img{
  width:auto; height:auto;
  max-height:2.4rem; max-width:11rem;
  object-fit:contain;
  opacity:.78;
  transition:opacity .25s ease;
}
.marquee--clients img:hover{ opacity:1; }

/* =========================================================
   SECTIONS
   ========================================================= */
.section{ padding:4rem 0 7.5rem; scroll-margin-top:var(--header-h); }
.section--dark{ background:var(--ink); color:var(--cream); padding:4.5rem 0; }
.section--dark .display{ color:var(--cream); }
.section--contact{ padding:5.875rem 0 5rem; }

/* ---------- services ---------- */
.service-grid{
  margin-top:4rem;
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--grey-mid);
}
.service-card{
  position:relative;
  background:var(--white);
  padding:3.7rem 2.4rem 3.2rem;
  border-right:1px solid var(--grey-mid);
  min-height:27.4rem;
  display:flex; flex-direction:column;
  transition:background .3s ease;
}
.service-card:last-child{ border-right:0; }
/* folded top-right corner, straight out of the PSD */
.service-card::after{
  content:'';
  position:absolute; top:0; right:0;
  width:3.6rem; height:3rem;
  background:linear-gradient(to bottom left,var(--grey-mid) 50%,transparent 50%);
}
.service-card .tag{
  align-self:flex-start;
  font-family:'Space Mono',monospace;
  font-size:0.825rem; letter-spacing:0.16em; color:var(--pink);
  border:1px solid var(--pink);
  padding:0.45rem 1.25rem;
  margin:0;
}
.service-card h3{
  font-family:'Anton',Impact,sans-serif; font-weight:400;
  font-size:3.21875rem;          /* 51.5px */
  line-height:1; margin:2.3rem 0 0;
}
.service-card p:not(.tag){
  font-size:1.5rem; line-height:1.34;
  color:var(--grey-mid);
  margin:1.5rem 0 0;
  max-width:20rem;             /* matches the PSD's text frame, so lines break the same */
}
.card-spark{ margin-top:auto; width:1.6rem; height:1.6rem; }

/* ---------- work ---------- */
.work-grid{
  margin-top:6.9rem;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:2.9rem;
}
.project{
  position:relative;
  aspect-ratio:264/392;
  background:linear-gradient(180deg,var(--white) 0%,var(--white) 58%,#BDBDBD 100%);
  border:1px solid var(--grey-mid);
  overflow:hidden;
  clip-path:polygon(0 0, calc(100% - 2.4rem) 0, 100% 2.4rem, 100% 100%, 0 100%);
  display:block;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.project img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.project::after{
  content:'';
  position:absolute; inset:auto 0 0 0; height:62%;
  background:linear-gradient(180deg,rgba(19,17,16,0) 0%,rgba(19,17,16,.86) 72%,rgba(19,17,16,.94) 100%);
  pointer-events:none;
}
.project-meta{
  position:absolute; left:1.05rem; right:1.05rem; bottom:1.05rem;
  z-index:2;
}
.project-meta .cat{
  font-family:'Space Mono',monospace;
  font-size:0.83125rem; letter-spacing:0.16em; color:var(--pink);
  margin:0 0 0.35rem;
}
.project-meta .title{
  font-weight:700; font-size:1.46875rem; color:var(--white); margin:0;
}
.project:hover{ transform:translateY(-8px); }
.project:hover img{ transform:scale(1.05); }

/* ---------- about ---------- */
.about-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:8.9rem; align-items:center;
}
.about-body{
  font-size:1.5rem; line-height:1.45;
  color:var(--cream); margin:2.375rem 0 0;
}
.spec{
  margin:0; padding:1.55rem 1.9rem;
  border:1px solid var(--rule-dark);
}
.spec > div{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:2rem; padding:1.15rem 0;
  border-bottom:1px dashed var(--rule-dark);
}
.spec > div:last-child{ border-bottom:0; }
.spec dt,.spec dd{
  font-family:'Space Mono',monospace;
  font-size:0.84375rem; letter-spacing:0.16em; margin:0;
}
.spec dt{ color:var(--pink); }
.spec dd{ color:var(--cream); text-align:right; }

/* ---------- contact ---------- */
.contact-inner{ text-align:center; }
.display--contact{ line-height:0.9; margin-top:0.3em; }
.dot{ color:var(--pink); }

.email-btn{
  display:inline-flex; align-items:center; gap:0.65rem;
  margin-top:3.1rem;
  background:var(--black); color:var(--cream);
  font-family:'Space Mono',monospace;
  font-size:1.0625rem; letter-spacing:0.16em;
  padding:1.1rem 1.7rem;
  transition:background .28s ease, transform .28s ease;
}
.email-btn .spark{ fill:var(--cream); transition:fill .28s ease; }
.email-btn:hover{ background:var(--pink); transform:translateY(-3px); }
.email-btn:hover .spark{ fill:var(--white); }

.socials{
  display:flex; justify-content:center; gap:2.3rem;
  margin-top:2.9rem;
}
.socials a{
  position:relative;
  font-family:'Space Mono',monospace;
  font-size:1.0625rem; letter-spacing:0.16em; color:var(--grey-soft);
  padding-bottom:0.5rem;
  transition:color .25s ease;
}
.socials a::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:3px; background:var(--pink);
  transform:scaleX(0); transform-origin:center;
  transition:transform .32s cubic-bezier(.2,.7,.3,1);
}
.socials a:hover{ color:var(--black); }
.socials a:hover::after{ transform:scaleX(1); }

/* ---------- footer ---------- */
.site-footer{ border-top:2px solid var(--rule); padding:2.3rem 0; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.brand--footer{ color:var(--grey-soft); font-size:1.140625rem; }
.brand--footer .spark{ width:0.95rem; height:0.95rem; }
.copyright{
  font-family:'Space Mono',monospace; font-weight:700;
  font-size:0.825rem; letter-spacing:0.16em;
  color:var(--grey-soft); margin:0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  html{ font-size:13px; }
  .work-grid{ grid-template-columns:repeat(3,1fr); }
  .service-grid{ grid-template-columns:repeat(2,1fr); }
  .service-card:nth-child(2n){ border-right:0; }
  .service-card:nth-child(-n+2){ border-bottom:1px solid var(--grey-mid); }
  .about-grid{ grid-template-columns:1fr; gap:4rem; }
}

@media (max-width:760px){
  html{ font-size:16px; }
  :root{ --gutter:1.5rem; }

  :root{ --header-h:4.25rem; --header-h-scrolled:3.75rem; }
  .brand{ font-size:1.05rem; }
  .nav, .say-hi{ display:none; }

  .menu-toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:2.75rem; height:2.75rem; padding:0;
    background:none; border:0; cursor:pointer;
  }
  .menu-toggle span{
    display:block; width:24px; height:2px; background:var(--black);
    transition:transform .3s ease, opacity .2s ease;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .mobile-nav{
    display:grid; gap:0.25rem;
    padding:0 var(--gutter);
    max-height:0; overflow:hidden;
    border-top:0 solid var(--rule);
    transition:max-height .38s ease, padding .38s ease;
  }
  .mobile-nav.is-open{ max-height:24rem; padding:1rem var(--gutter) 1.75rem; }
  .mobile-nav a{
    font-family:'Space Mono',monospace; font-size:1rem; letter-spacing:0.16em;
    padding:0.85rem 0;
  }
  .mobile-nav .say-hi{ display:inline-flex; align-self:flex-start; margin-top:0.5rem; }

  .hero{ min-height:auto; padding:3.5rem 0 3rem; }
  .hero-bg{ width:150%; top:1.5rem; }
  .hero-disciplines{ margin-top:2.25rem; }
  .clients{ margin-top:2.75rem; }
  .scroll-cue{ margin-top:2.5rem; }
  .hero-disciplines{ font-size:0.8rem; gap:0.5rem 0.7rem; }
  .clients{ margin-top:3rem; }

  .display{ font-size:3rem; }
  .display--contact{ font-size:3.2rem; }
  .lede{ font-size:1.05rem; }
  .section{ padding:4.5rem 0; }

  .service-grid{ grid-template-columns:1fr; margin-top:2.5rem; }
  .service-card{ border-right:0; border-bottom:1px solid var(--grey-mid); min-height:0; padding:2.25rem 1.5rem 2rem; }
  .service-card:last-child{ border-bottom:0; }
  .service-card h3{ font-size:2.4rem; }
  .service-card p:not(.tag){ font-size:1rem; }
  .card-spark{ margin-top:1.75rem; }

  .work-grid{ grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:2.5rem; }
  .project-meta .title{ font-size:1rem; }
  .project-meta .cat{ font-size:0.7rem; }

  .marquee--band{ padding:1.4rem 0; }
  .marquee--band span{ font-size:2rem; }
  .marquee--band .spark{ width:1.2rem; height:1.2rem; }

  .about-body{ font-size:1.05rem; }
  .spec > div{ flex-direction:column; align-items:flex-start; gap:0.3rem; }
  .spec dd{ text-align:left; }
  .spec dt,.spec dd{ font-size:0.85rem; }

  .email-btn{ font-size:1rem; }
  .footer-inner{ flex-direction:column; align-items:flex-start; gap:0.75rem; }
  .copyright{ font-size:0.7rem; }
}

/* =========================================================
   MOTION PREFERENCES
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .marquee-group{ animation:none; }
  .scroll-dot{ animation:none; }
}