/* =========================
   FONTS (brand rules)
========================= */
@font-face{
  font-family:"Termina";
  src:url("../assets/fonts/Termina-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:block;
}
@font-face{
  font-family:"Termina";
  src:url("../assets/fonts/Termina-Black.woff2") format("woff2");
  font-weight:900;
  font-style:normal;
  font-display:block;
}
@font-face{
  font-family:"Nave";
  src:url("../assets/fonts/Nave-HeavyItalic.woff2") format("woff2");
  font-weight:800;
  font-style:italic;
  font-display:block;
}

/* =========================
   TOKENS (brand-only colors)
========================= */
:root{
  --magenta:#B11258;
  --stone:#F4F2EF;
  --white:#FFFFFF;
  --charcoal:#1E1E1E;

  --max:1160px;
  --gutter: clamp(16px, 4vw, 34px);

  --radius-xl:24px;
  --radius-lg:18px;
  --radius-sm:14px;

  --shadow-soft: 0 16px 44px rgba(30,30,30,.10);
  --shadow-strong: 0 26px 70px rgba(30,30,30,.14);

  --p: 16px;
  --small: 13px;

  --slate:#5D8093; /* button slate */
}

/* =========================
   BASE
========================= */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Termina", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:400;
  background: var(--stone);
  color: var(--charcoal);
  line-height:1.55;
  font-size: var(--p);
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
.wrap{
  width:min(var(--max), calc(100% - (var(--gutter) * 2)));
  margin:0 auto;
}
/* Fix anchor scroll offset for sticky header */
:root{
  scroll-padding-top: 60px;
}
section[id]{
  scroll-margin-top: 86px;
}

/* =========================
   TYPOGRAPHY
========================= */
h1,h2{
  font-family:"Termina";
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  line-height:1.02;
  margin:0;
}
h1{font-size: clamp(28px, 3.6vw, 44px);}
h2{font-size: clamp(22px, 3vw, 34px);}

.subhead{
  font-family:"Nave";
  font-weight:800;
  font-style:italic;
  letter-spacing:.01em;
  font-size: clamp(18px, 2.2vw, 22px);
  margin: 0 0 10px;
}
.muted{opacity:.82;}
.fine{font-size: var(--small); opacity:.65;}

/* =========================
   BUTTONS (homepage match)
========================= */
.btn{
  font-family:"Termina";
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.98);
  background: var(--slate);
  display:inline-flex;
  align-items:center;
  gap: 10px;
}
.btn:hover{filter: brightness(.96);}

.btn-invert{
  border: 1px solid rgba(255,255,255,.72);
  background: rgba(255,255,255,.94);
  color: var(--magenta);
}
.btn-invert:hover{
  background: rgba(255,255,255,.86);
  color: #8f0d47;
}

/* =========================
       HEADER
    ========================= */
  .header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--magenta);
    border-bottom: 1px solid rgba(255, 255, 255, .18);
  }

  .header-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 0;
  }

  .brand {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 0 0 auto;
  }

  .brand img {
    width: clamp(160px, 18vw, 300px);
    height: auto;
  }

  .header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 22px;
    white-space: nowrap;
    position: relative;
  }

  .nav {
    display: flex;
    align-items: center;
    gap: 18px;
    white-space: nowrap;
  }

  .nav a {
    font-family: "Termina";
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 12px;
    color: rgba(255, 255, 255, .92);
    padding: 8px 10px;
    border-radius: 999px;
  }

  .nav a:hover {
    background: rgba(255, 255, 255, .10);
  }

  @media (max-width: 980px) {
    .nav {
      gap: 10px;
    }

    .nav a {
      padding: 8px 8px;
      letter-spacing: .10em;
    }
  }

/* =========================
   HERO
========================= */
.hero{position:relative;}
.hero-img{
  width:100%;
  height: 420px;
  object-fit:cover;
  border-bottom: 1px solid rgba(30,30,30,.08);
}
.phones{
  position:absolute;
  left:50%;
  top: 230px;
  transform: translateX(-50%);
  width: min(900px, 92vw);
  z-index: 10;
  filter: drop-shadow(0 22px 44px rgba(0,0,0,.22));
  pointer-events:none;
}
.after-hero{padding-top: 380px;}

.intro{
  text-align:left;
  max-width: 860px;
  margin: 0;
}
.intro p{
  margin: 12px 0 0;
  max-width: 760px;
  padding-top: 18px;
  font-family:"Nave";
  font-weight:800;
  font-style:italic;
  opacity:.86;
}

/* =========================
   CONTENT LAYOUT
========================= */
.section{padding: clamp(34px, 5vw, 62px) 0;}

.stage{
  margin-top: clamp(26px, 4vw, 46px);
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 3vw, 42px);
  align-items:center;
}
.stage .text{max-width: 520px;}
.stage .media{
  display:flex;
  justify-content:flex-end;
  position: relative;
}
.stage .media.left{justify-content:flex-start;}

.stage-label{
  font-family:"Termina";
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size: clamp(18px, 2.2vw, 22px);
  opacity: 1;
  margin: 0 0 12px;
  text-align:left;
}

.media-label{
  font-family:"Termina";
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size: clamp(18px, 2.2vw, 22px);
  margin-bottom: 10px;
  text-align:left;
  width:100%;
}

.mock{
  width: min(350px, 100%);
  border-radius: var(--radius-xl);
  overflow:hidden;
}
.mock.mock-large{
  width: min(460px, 100%);
}

.stage.offset-a .text{ padding-left: 0; }
.stage.offset-a .media{ transform: translateY(-10px); }
.stage.offset-c .text{ padding-left: 0; }
.stage.offset-c .media{ transform: translateY(-6px); }

@media (max-width: 980px){
  .phones{ top: 160px; width: min(720px, 92vw); }
  .after-hero{ padding-top: 260px; }
  .stage{ grid-template-columns: 1fr; }
  .stage .media, .stage .media.left{ justify-content:center; }
  .stage.offset-a .media,
  .stage.offset-c .media{ transform:none; }
}

.collage-block{
  margin-top: clamp(34px, 5vw, 64px);
  text-align:center;
}
.collage-block .collage{
  width: 100%;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(30,30,30,.10);
  box-shadow: var(--shadow-soft);
}
.collage-block .collage img{width:100%; height:auto; display:block;}

.collage-block .collage-text{
  padding-top: 10px;
  max-width: 720px;
  margin: 18px 0 0;
  text-align:left;
}
.collage-label{
  text-align:left;
  margin: 0 0 10px;
  width: 100%;
}

/* FOOTNOTE */
.footnote{
  padding: 26px 0 34px;
  text-align:left;
}
.footnote .wrap{ text-align:center; }
.footnote p{
  margin:0 auto;
  text-align:center;
  max-width: 550px;
  font-size: 9px;
  opacity: .62;
}

/* =========================
   MORE PROJECTS
========================= */
.more-projects{
  padding: clamp(42px, 6vw, 74px) 0;
  position:relative;
}
.more-projects .more-inner{
  border-radius: var(--radius-xl);
  border: 1px solid rgba(30,30,30,.10);
  box-shadow: var(--shadow-soft);
  background:
    radial-gradient(900px 420px at 10% 10%, rgba(69,140,173,.10) 0%, rgba(69,140,173,0) 60%),
    radial-gradient(900px 420px at 90% 30%, rgba(177,18,88,.08) 0%, rgba(177,18,88,0) 55%),
    radial-gradient(800px 420px at 60% 100%, rgba(248,170,21,.10) 0%, rgba(248,170,21,0) 58%),
    rgba(255,255,255,.52);
  padding: clamp(22px, 3vw, 32px);
  overflow:hidden;
}
.more-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.more-head h2{font-size: clamp(20px, 2.4vw, 30px);}

.more-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.more-card{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(30,30,30,.10);
  background: rgba(255,255,255,.70);
  box-shadow: 0 10px 26px rgba(30,30,30,.08);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 240px;
  transition: transform .15s ease, filter .15s ease;
}
.more-card:hover{
  transform: translateY(-2px);
  filter: brightness(.99);
}
.more-thumb{
  position:relative;
  height: 110px;
  overflow:hidden;
  background: rgba(30,30,30,.06);
  border-bottom: 1px solid rgba(30,30,30,.08);
}
.more-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.02);
}
.more-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(240px 140px at 20% 10%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(177,18,88,.06) 0%, rgba(69,140,173,.05) 55%, rgba(248,170,21,.05) 100%);
  pointer-events:none;
  opacity:.9;
}
.more-body{
  padding: 14px 14px 16px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  flex: 1;
}
.more-meta{
  font-family:"Termina";
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size: 11px;
  opacity:.72;
}
.more-title{
  font-family:"Termina";
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size: 14px;
  line-height:1.1;
}
.more-desc{
  font-size: 13px;
  opacity:.82;
  margin-top: 2px;
}
.more-cta{ margin-top:auto; }
.more-cta .btn{
  border-color: rgba(30,30,30,.10);
  background: var(--slate);
  color: rgba(255,255,255,.98);
}

@media (max-width: 980px){
  .more-grid{grid-template-columns: 1fr 1fr;}
}
@media (max-width: 560px){
  .more-grid{grid-template-columns: 1fr;}
  .more-thumb{height: 130px;}
}

/* =========================
       FOOTER
    ========================= */
  .footer {
    position: relative;
    padding: 56px 0 44px;
    background:
      radial-gradient(1200px 700px at 100% 0%, rgba(69, 140, 173, .50) 0%, rgba(69, 140, 173, 0) 60%),
      radial-gradient(1200px 700px at 0% 100%, rgba(248, 170, 21, .40) 0%, rgba(248, 170, 21, 0) 58%),
      linear-gradient(135deg, rgba(248, 170, 21, .08) 0%, rgba(177, 18, 88, .88) 42%, rgba(69, 140, 173, .28) 100%),
      var(--magenta);
    color: var(--white);
    overflow: hidden;
  }

  .footer-inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 18px;
    align-items: start;
  }

  .footer-logo {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
  }

  .footer-logo a {
    display: inline-flex;
    align-items: center;
  }

  .footer-logo img {
    width: clamp(160px, 18vw, 250px);
    height: auto;
    margin: 0;
  }

  .footer-links strong {
    font-family: "Termina";
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .10em;
    font-size: 12px;
    display: block;
    margin-bottom: 10px;
    opacity: .92;
  }

  .footer-links a {
    display: block;
    font-size: 13px;
    opacity: .88;
    margin: 8px 0;
  }

  .footer-links a:hover {
    opacity: 1;
  }

  .footer-cta {
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .footer-cta .btn {
    border-color: rgba(255, 255, 255, .18);
  }

  .footer-bottom {
    margin-top: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    opacity: .80;
    font-size: 12px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    padding-top: 18px;
  }

  @media (max-width: 980px) {
    .footer-inner {
      grid-template-columns: 1fr;
    }

    .footer-cta {
      justify-content: flex-start;
    }

    .footer-bottom {
      flex-direction: column;
      align-items: flex-start;
    }
  }

/* Social Icons */

.social-icons {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 2px;
  }

  .social-icons a {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .10);
    display: grid;
    place-items: center;
    opacity: .95;
  }

  .social-icons a:hover {
    background: rgba(255, 255, 255, .16);
  }

  .social-icons svg {
    width: 18px;
    height: 18px;
    fill: rgba(255, 255, 255, .92);
  }

  /* =========================
       FULLSCREEN MOBILE MENU
       - 100% opaque background
       - stone text
       - no extra CTA buttons
    ========================= */
  .menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .98);
    cursor: pointer;
    user-select: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    z-index: 110;
  }

  .menu-toggle:hover {
    background: rgba(255, 255, 255, .16);
  }

  .menu-toggle .bars {
    width: 18px;
    height: 12px;
    position: relative;
    display: block;
  }

  .menu-toggle .bars span {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    transition: transform .18s ease, top .18s ease, opacity .18s ease;
  }

  .menu-toggle .bars span:nth-child(1) {
    top: 0;
  }

  .menu-toggle .bars span:nth-child(2) {
    top: 5px;
  }

  .menu-toggle .bars span:nth-child(3) {
    top: 10px;
  }

  /* Always hidden by default */
  .mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 105;
    display: none;
    padding: max(18px, env(safe-area-inset-top)) var(--gutter) max(22px, env(safe-area-inset-bottom));
    overflow: auto;
    -webkit-overflow-scrolling: touch;

    /* 100% opaque charcoal-based gradient (no transparency) */
    background:
      radial-gradient(900px 520px at 85% 18%, rgba(69, 140, 173, 1) 0%, rgba(69, 140, 173, 0) 62%),
      radial-gradient(900px 560px at 20% 78%, rgba(177, 18, 88, 1) 0%, rgba(177, 18, 88, 0) 62%),
      radial-gradient(820px 520px at 70% 25%, rgba(248, 170, 21, 1) 0%, rgba(248, 170, 21, 0) 60%),
      linear-gradient(180deg, #1E1E1E 0%, #1A1A1A 100%);

    color: var(--stone);
  }

  .header.is-open .mobile-overlay {
    display: block;
  }

  .header.is-open .menu-toggle .bars span:nth-child(1) {
    top: 5px;
    transform: rotate(45deg);
  }

  .header.is-open .menu-toggle .bars span:nth-child(2) {
    opacity: 0;
  }

  .header.is-open .menu-toggle .bars span:nth-child(3) {
    top: 5px;
    transform: rotate(-45deg);
  }

  .overlay-inner {
    width: min(520px, 100%);
    margin-left: auto;
    margin-right: auto;
    margin-top: clamp(24px, 10vh, 70px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: center;
  }

  .overlay-title {
    font-family: "Termina";
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 12px;
    opacity: .8;
    color: var(--stone);
  }

  .overlay-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
  }

  .overlay-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 16px;
    border-radius: 18px;
    border: 1px solid rgba(244, 242, 239, .22);
    background: rgba(244, 242, 239, .08);

    font-family: "Termina";
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .10em;
    font-size: clamp(14px, 4.2vw, 18px);
    line-height: 1.15;

    color: var(--stone);
  }

  .overlay-nav a:hover {
    background: rgba(244, 242, 239, .14);
  }

  @media (max-width: 820px) {
    .menu-toggle {
      display: inline-flex;
    }

    .nav {
      display: none;
    }

    .header-right {
      gap: 12px;
    }
  }

  body.menu-open {
    overflow: hidden;
    touch-action: none;
  }